/*=====================================
QUOTATION BANNER
======================================*/

.quotation-banner{

    padding:180px 0 100px;

    background-image:
    linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),
    url('../images/banners/quotation-banner.png');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    text-align:center;

}

.quotation-banner h1{

    font-size:60px;

    margin-bottom:20px;

}

.quotation-banner p{

    max-width:850px;

    margin:auto;

    color:#ddd;

    font-size:20px;

    line-height:1.8;

}



/*=====================================
QUOTATION PAGE
======================================*/

.quotation-page{

    background:#111;

    padding:120px 0;

}

.quotation-grid{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:60px;

    align-items:flex-start;

}



/*=====================================
LEFT SIDE
======================================*/

.quotation-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.quote-box{

    background:#181818;

    padding:35px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

}

.quote-box:hover{

    transform:translateY(-8px);

    border-color:#D4AF37;

    box-shadow:0 20px 40px rgba(212,175,55,.12);

}

.quote-box i{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#D4AF37;

    color:#111;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    margin-bottom:25px;

}

.quote-box h3{

    font-size:28px;

    margin-bottom:15px;

}

.quote-box p{

    color:#cfcfcf;

    line-height:1.9;

}



/*=====================================
FORM
======================================*/

.quotation-form{

    background:#181818;

    padding:45px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.05);

}

.quotation-form form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.quotation-form input,

.quotation-form select,

.quotation-form textarea{

    width:100%;

    padding:18px;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    border-radius:10px;

    font-size:16px;

    transition:.3s;

}

.quotation-form input:focus,

.quotation-form select:focus,

.quotation-form textarea:focus{

    border-color:#D4AF37;

    outline:none;

}

.quotation-form textarea{

    resize:vertical;

    min-height:180px;

}

.quotation-form button{

    width:100%;

    margin-top:10px;

}



/*=====================================
FORM PLACEHOLDERS
======================================*/

.quotation-form input::placeholder,

.quotation-form textarea::placeholder{

    color:#999;

}

.quotation-form select{

    cursor:pointer;

}



/*=====================================
HELP TEXT
======================================*/

.quote-note{

    margin-top:25px;

    color:#bbb;

    font-size:15px;

    line-height:1.8;

}



/*=====================================
RESPONSIVE
======================================*/

@media(max-width:992px){

    .quotation-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .quotation-banner{

        padding:140px 0 80px;

    }

    .quotation-banner h1{

        font-size:42px;

    }

    .quotation-form{

        padding:30px;

    }

}
/*=====================================
FORM HEADINGS
======================================*/

.quotation-form h3{

    color:#D4AF37;

    margin:15px 0 10px;

    font-size:24px;

    border-bottom:1px solid rgba(212,175,55,.25);

    padding-bottom:10px;

}

/*=====================================
FILE UPLOAD
======================================*/

.upload-label{

    color:#ddd;

    font-weight:600;

    margin-top:10px;

    margin-bottom:8px;

    display:block;

}

.quotation-form input[type="file"]{

    background:#111;

    color:#bbb;

    cursor:pointer;

    padding:15px;

}

.quotation-form input[type="file"]::file-selector-button{

    background:#D4AF37;

    color:#111;

    border:none;

    padding:10px 18px;

    border-radius:6px;

    margin-right:15px;

    cursor:pointer;

    font-weight:600;

}

.quotation-form input[type="file"]::file-selector-button:hover{

    background:#c49b22;

}