/* ==========================================
   HPWebStar Premium Quote Popup
========================================== */

.quote-modal{

    position:fixed;
    inset:0;
    overflow-y: auto;
    width:100%;
    height:100%;

    background:rgba(10,20,40,.65);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    display:flex;
    justify-content:center;
    align-items:start;

    visibility:hidden;
    opacity:0;

    transition:.35s ease;

    z-index:999999;

}

.quote-modal.active{

    visibility:visible;
    opacity:1;

}

/* Popup */

.quote-box{

    width:95%;
    max-width:760px;

    background:#fff;

    border-radius:25px;

    padding:45px;

    position:relative;

    transform:translateY(50px);

    transition:.35s;

    box-shadow:
    0 30px 80px rgba(0,0,0,.25);

    overflow:hidden;

}

.quote-modal.active .quote-box{

    transform:translateY(0);

}

/* Decorative Circle */

.quote-box::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    rgba(37,99,235,.08),
    rgba(124,58,237,.08)
    );

    right:-80px;
    top:-80px;

}

/* Close */

.close-popup{

    position:absolute;

    right:22px;
    top:18px;

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    cursor:pointer;

    background:#F3F4F6;

    font-size:24px;

    transition:.3s;

    z-index:5;

}

.close-popup:hover{

    background:#2563EB;

    color:#fff;

    transform:rotate(90deg);

}

/* Heading */

.quote-box h2{

    font-size:34px;

    font-weight:700;

    margin-bottom:10px;

    color:#111827;

}

.quote-box p{

    color:#6B7280;

    margin-bottom:30px;

}

/* Inputs */

.quote-box input,
.quote-box textarea,
.quote-box select{

    width:100%;

    border:1px solid #E5E7EB;

    border-radius:14px;

    padding:8px 18px;

    margin-bottom:20px;

    outline:none;

    transition:.3s;

    font-size:15px;

}

.quote-box textarea{

    resize:none;

}

.quote-box input:focus,
.quote-box textarea:focus,
.quote-box select:focus{

    border-color:#2563EB;

    box-shadow:0 0 0 4px rgba(37,99,235,.10);

}

/* Submit */

.submit-btn{

    width:100%;

    border:none;

    background:linear-gradient(
    135deg,
    #2563EB,
    #7C3AED
    );

    color:#fff;

    padding:16px;

    border-radius:50px;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.submit-btn:hover{

    transform:translateY(-3px);

    box-shadow:
    0 20px 45px rgba(37,99,235,.25);

}

/* Response */

#response{

    margin-top:20px;

    text-align:center;

    font-weight:600;

}

/* Mobile */

@media(max-width:768px){

.quote-box{

padding:30px 22px;

}

.quote-box h2{

font-size:28px;

}

}