.hero-enquiry{
    background: hsl(0deg 0% 100% / 84%);
    backdrop-filter:blur(12px);
    border-radius:22px;
    padding:35px;
    box-shadow:
    0 20px 60px rgba(0,0,0,.15),
    0 8px 25px rgba(37,99,235,.08);
    transition:.35s;
}

.hero-enquiry:hover{
    transform:translateY(-3px);
    box-shadow:
    0 30px 70px rgba(0,0,0,.18),
    0 10px 35px rgba(37,99,235,.15);
}

.enquiry-form h3{
    font-size:38px;
    font-weight:700;
    color:#111827;
    margin-bottom:8px;
}

.enquiry-form p{
    color:#64748b;
    margin-bottom:28px;
    font-size:17px;
}

/*====================================
          INPUTS
====================================*/

.form-control, .form-select {
    height: 39px;
    border-radius: 14px;
    border: 1px solid #dbe4ef;
    background: #fff;
    font-size: 13px;
    transition: .35s;
    box-shadow: none;
}

textarea.form-control{
    min-height:130px;
    resize:none;
    padding-top:15px;
}

.form-control:focus,
.form-select:focus{
    border-color:#2563eb;
    box-shadow:
    0 0 0 5px rgba(37,99,235,.12);
}

.form-control::placeholder{
    color:#94a3b8;
}

/*====================================
         INVALID FIELD
====================================*/

.form-control.invalid,
.form-select.invalid{
    border-color:#dc2626;
    box-shadow:
    0 0 0 4px rgba(220,38,38,.08);
}

.field-error{
    display:block;
    margin-top:6px;
    color:#dc2626;
    font-size:13px;
    font-weight:500;
    min-height:18px;
}

/*====================================
          BUTTON
====================================*/

.btn-primary{
    height:56px;
    border:none;
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    font-size:16px;
    font-weight:600;
    letter-spacing:.3px;
    transition:.35s;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:
    0 18px 35px rgba(37,99,235,.35);
}

.btn-primary:disabled{
    opacity:.85;
    cursor:not-allowed;
}

/*====================================
      FLOATING BUTTON
====================================*/

#floatingQuote{
    position:fixed;
    right:35px;
    bottom:30px;
    display:none;
    z-index:9999;
}

#openQuote{
    border:none;
    border-radius:60px;
    padding:16px 30px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    font-size:16px;
    font-weight:600;
    letter-spacing:.4px;
    box-shadow:
    0 20px 45px rgba(37,99,235,.35);
    transition:.35s;

}

#openQuote:hover{

    transform:translateY(-5px);

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

}

#openQuote i{

    margin-right:8px;

}

/*====================================
          MODAL
====================================*/

#quoteModal{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.55);

    backdrop-filter:blur(8px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

}
.quote-box {
    width: 428px;
    top: 35px;
    background: #fff;
    padding: 22px;
    border-radius: 18px;
    position: relative;
    animation: popup .35s;
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
}

#closeQuote{

    position:absolute;

    right:18px;

    top:16px;

    width:42px;

    height:42px;

    border-radius:50%;

    border:none;

    background:#f1f5f9;

    font-size:22px;

    cursor:pointer;

    transition:.3s;

}

#closeQuote:hover{

    background:#2563eb;

    color:#fff;

    transform:rotate(90deg);

}

/*====================================
        POPUP ANIMATION
====================================*/

@keyframes popup{

    from{

        opacity:0;

        transform:translateY(40px) scale(.92);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

/*====================================
      SCROLLBAR
====================================*/

textarea::-webkit-scrollbar{

    width:6px;

}

textarea::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:20px;

}

/*====================================
      MOBILE
====================================*/

@media(max-width:991px){

.hero-enquiry{

padding:25px;

}

.enquiry-form h3{

font-size:30px;

}

.quote-box{

width:95%;

padding:25px;

}

#floatingQuote{

right:15px;

bottom:18px;

}

#openQuote{

padding:15px 24px;

font-size:15px;

}

}

@media(max-width:576px){

.form-control,
.form-select{

height:52px;

}

textarea.form-control{

min-height:120px;

}

.btn-primary{

height:52px;

}

.enquiry-form h3{

font-size:26px;

}

.enquiry-form p{

font-size:15px;

}

}