/*==========================================
QUOTE PAGE
==========================================*/

/*==========================================
PAGE BANNER
==========================================*/

.page-banner{
    position:relative;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    padding:180px 0 120px;
    overflow:hidden;
}

.page-banner .overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
}

.banner-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:#fff;
}

.banner-content h1{
    font-size:58px;
    font-weight:700;
    margin-bottom:20px;
    color:#fff;
}

.banner-content p{
    max-width:700px;
    margin:0 auto 25px;
    font-size:18px;
    line-height:1.8;
    color:rgba(255,255,255,.90);
}

.breadcrumb{
    justify-content:center;
    margin-bottom:0;
}

.breadcrumb-item a{
    color:var(--secondary);
    text-decoration:none;
}

.breadcrumb-item.active{
    color:#fff;
}

.breadcrumb-item + .breadcrumb-item::before{
    color:#fff;
}

/*==========================================
SECTION TITLE
==========================================*/

.section-title{
    margin-bottom:50px;
}

.section-title span{
    display:inline-block;
    color:var(--secondary);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:12px;
}

.section-title h2{
    font-size:44px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:20px;
}

.section-title p{
    color:#666;
    max-width:720px;
    margin:auto;
    line-height:1.8;
}

/*==========================================
QUOTE INTRODUCTION
==========================================*/

.quote-intro{
    background:#fff;
}

.quote-intro p{
    font-size:17px;
    color:#666;
    line-height:1.9;
    margin-bottom:20px;
}

.quote-intro img{
    width:100%;
    border-radius:20px;
    transition:all .4s ease;
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}

.quote-intro img:hover{
    transform:scale(1.03);
}

.quote-intro .section-title{
    margin-bottom:25px;
}

/*==========================================
COMMON BUTTONS
==========================================*/

.btn{
    border-radius:50px;
    padding:14px 34px;
    font-weight:600;
    transition:all .35s ease;
}

.btn-primary{
    background:var(--secondary);
    border-color:var(--secondary);
}

.btn-primary:hover{
    background:var(--primary);
    border-color:var(--primary);
    transform:translateY(-3px);
}

.btn-outline-light{
    border:2px solid #fff;
    color:#fff;
}

.btn-outline-light:hover{
    background:#fff;
    color:var(--primary);
}

/*==========================================
COMMON SPACING
==========================================*/

.py-120{
    padding-top:120px;
    padding-bottom:120px;
}

.bg-light{
    background:#f8f9fa !important;
}

/*==========================================
QUOTE FORM SECTION
==========================================*/

.quote-form-section{
    background:#f8f9fa;
}

.quote-form-wrapper{
    background:#fff;
    padding:60px;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    transition:all .35s ease;
}

.quote-form-wrapper:hover{
    transform:translateY(-6px);
}

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

.quote-form-wrapper .form-label{
    font-weight:600;
    color:var(--primary);
    margin-bottom:10px;
}

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

.quote-form-wrapper .form-control,
.quote-form-wrapper .form-select{
    height:56px;
    border:1px solid #dcdcdc;
    border-radius:12px;
    padding:12px 18px;
    font-size:16px;
    color:#444;
    background:#fff;
    box-shadow:none;
    transition:all .3s ease;
}

.quote-form-wrapper textarea.form-control{
    min-height:170px;
    resize:vertical;
    padding-top:15px;
}

.quote-form-wrapper .form-control:focus,
.quote-form-wrapper .form-select:focus{
    border-color:var(--secondary);
    box-shadow:0 0 0 .2rem rgba(212,175,55,.18);
}

.quote-form-wrapper .form-control::placeholder{
    color:#999;
}

.quote-form-wrapper .form-select{
    cursor:pointer;
}

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

.quote-form-wrapper .btn-primary{
    padding:15px 40px;
    border-radius:50px;
    font-weight:600;
    letter-spacing:.5px;
    transition:all .35s ease;
}

.quote-form-wrapper .btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

/*==========================================
PROJECT INFORMATION
==========================================*/

.project-info{
    background:#fff;
}

.info-card{
    background:#fff;
    border-radius:18px;
    padding:40px 30px;
    text-align:center;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:all .35s ease;
    height:100%;
}

.info-card:hover{
    transform:translateY(-10px);
}

.info-card i{
    width:80px;
    height:80px;
    line-height:80px;
    border-radius:50%;
    background:rgba(212,175,55,.12);
    color:var(--secondary);
    font-size:32px;
    margin-bottom:25px;
    transition:all .35s ease;
}

.info-card:hover i{
    background:var(--secondary);
    color:#fff;
    transform:rotate(360deg);
}

.info-card h4{
    font-size:22px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:15px;
}

.info-card p{
    color:#666;
    line-height:1.8;
    margin-bottom:0;
}

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

.quote-form-wrapper small{
    display:block;
    margin-top:8px;
    color:#888;
    font-size:14px;
}

.quote-form-wrapper .required{
    color:#dc3545;
    margin-left:3px;
}

/*==========================================
INPUT ICON STYLE (OPTIONAL)
==========================================*/

.input-group-text{
    background:#fff;
    border:1px solid #dcdcdc;
    border-right:none;
    color:var(--secondary);
    border-radius:12px 0 0 12px;
}

.input-group .form-control{
    border-left:none;
    border-radius:0 12px 12px 0;
}

.input-group .form-control:focus{
    border-left:none;
}

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

.quote-form-wrapper .form-control,
.quote-form-wrapper .form-select,
.quote-form-wrapper textarea{
    transition:all .3s ease;
}

.quote-form-wrapper .form-control:hover,
.quote-form-wrapper .form-select:hover,
.quote-form-wrapper textarea:hover{
    border-color:var(--secondary);
}


/*==========================================
UPLOAD SECTION
==========================================*/

.upload-section{
    background:#fff;
}

.upload-list{
    margin:30px 0 0;
    padding:0;
    list-style:none;
}

.upload-list li{
    display:flex;
    align-items:center;
    margin-bottom:18px;
    font-size:16px;
    color:#555;
}

.upload-list li i{
    color:var(--secondary);
    margin-right:12px;
    font-size:18px;
}

.upload-card{
    background:#fff;
    padding:50px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:all .35s ease;
}

.upload-card:hover{
    transform:translateY(-8px);
}

.upload-icon{
    width:100px;
    height:100px;
    margin:auto;
    border-radius:50%;
    background:rgba(212,175,55,.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
}

.upload-icon i{
    font-size:42px;
    color:var(--secondary);
}

.upload-card h4{
    font-size:28px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:15px;
}

.upload-card p{
    color:#666;
    line-height:1.8;
    margin-bottom:30px;
}

.upload-card input[type="file"]{
    border:2px dashed #d5d5d5;
    border-radius:15px;
    padding:18px;
    background:#fafafa;
    cursor:pointer;
    transition:all .35s ease;
}

.upload-card input[type="file"]:hover{
    border-color:var(--secondary);
    background:#fffdf5;
}

/*==========================================
WHY QUOTE
==========================================*/

.why-quote{
    background:#f8f9fa;
}

.benefit-card{
    background:#fff;
    padding:40px 30px;
    text-align:center;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:all .35s ease;
    height:100%;
}

.benefit-card:hover{
    transform:translateY(-10px);
}

.benefit-card i{
    width:85px;
    height:85px;
    line-height:85px;
    border-radius:50%;
    background:rgba(212,175,55,.12);
    color:var(--secondary);
    font-size:34px;
    margin-bottom:25px;
    transition:all .4s ease;
}

.benefit-card:hover i{
    background:var(--secondary);
    color:#fff;
    transform:rotateY(360deg);
}

.benefit-card h4{
    font-size:22px;
    font-weight:700;
    color:var(--primary);
    margin-bottom:15px;
}

.benefit-card p{
    color:#666;
    line-height:1.8;
    margin-bottom:0;
}

/*==========================================
FAQ SECTION
==========================================*/

.faq-section{
    background:#fff;
}

.faq-section .accordion-item{
    border:none;
    border-radius:15px;
    overflow:hidden;
    margin-bottom:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.faq-section .accordion-button{
    background:#fff;
    color:var(--primary);
    font-size:18px;
    font-weight:600;
    padding:22px 25px;
    box-shadow:none;
}

.faq-section .accordion-button:not(.collapsed){
    background:var(--secondary);
    color:#fff;
}

.faq-section .accordion-button:focus{
    box-shadow:none;
}

.faq-section .accordion-body{
    padding:25px;
    color:#666;
    line-height:1.8;
    background:#fff;
}

/*==========================================
CALL TO ACTION
==========================================*/

.cta-section{
    position:relative;
    background:url("../images/backgrounds/cta-bg.jpg") center center/cover;
    padding:120px 0;
    overflow:hidden;
}

.cta-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(10,28,46,.88);
}

.cta-section .container{
    position:relative;
    z-index:2;
}

.cta-section .sub-title{
    display:inline-block;
    color:var(--secondary);
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.cta-section h2{
    color:#fff;
    font-size:48px;
    font-weight:700;
    margin-bottom:20px;
}

.cta-section p{
    color:rgba(255,255,255,.90);
    max-width:760px;
    margin:0 auto 35px;
    line-height:1.9;
}

.hero-buttons .btn{
    min-width:200px;
    margin:8px;
}

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

@media (max-width:991.98px){

    .page-banner{
        padding:150px 0 100px;
    }

    .banner-content h1{
        font-size:46px;
    }

    .section-title h2{
        font-size:38px;
    }

    .quote-intro img{
        margin-top:40px;
    }

    .quote-form-wrapper{
        padding:45px;
    }

    .upload-card{
        margin-top:40px;
    }

    .cta-section h2{
        font-size:40px;
    }

}

@media (max-width:767.98px){

    .page-banner{
        padding:130px 0 80px;
    }

    .banner-content h1{
        font-size:34px;
    }

    .banner-content p{
        font-size:16px;
    }

    .section-title h2{
        font-size:30px;
    }

    .quote-form-wrapper{
        padding:30px;
    }

    .upload-card{
        padding:35px 25px;
    }

    .info-card,
    .benefit-card{
        padding:30px 25px;
    }

    .cta-section{
        padding:90px 0;
    }

    .cta-section h2{
        font-size:32px;
    }

    .hero-buttons .btn{
        width:100%;
        margin:10px 0;
    }

}

@media (max-width:575.98px){

    .banner-content h1{
        font-size:28px;
    }

    .section-title h2{
        font-size:26px;
    }

    .quote-form-wrapper{
        padding:25px;
    }

    .upload-card{
        padding:25px 20px;
    }

    .upload-icon{
        width:80px;
        height:80px;
    }

    .upload-icon i{
        font-size:34px;
    }

    .info-card,
    .benefit-card{
        padding:25px 20px;
    }

    .info-card i,
    .benefit-card i{
        width:70px;
        height:70px;
        line-height:70px;
        font-size:28px;
    }

    .faq-section .accordion-button{
        padding:18px 20px;
        font-size:16px;
    }

    .faq-section .accordion-body{
        padding:18px 20px;
    }

}

/*==========================================
HOVER EFFECTS
==========================================*/

.quote-form-wrapper,
.upload-card,
.info-card,
.benefit-card{
    transition:all .35s ease;
}

.quote-form-wrapper:hover,
.upload-card:hover,
.info-card:hover,
.benefit-card:hover{
    transform:translateY(-8px);
}

.upload-icon,
.info-card i,
.benefit-card i{
    transition:all .35s ease;
}

.upload-card:hover .upload-icon{
    transform:scale(1.08);
}

.info-card:hover i,
.benefit-card:hover i{
    transform:rotate(360deg);
}

img{
    transition:transform .4s ease;
}

img:hover{
    transform:scale(1.02);
}

/*==========================================
UTILITY CLASSES
==========================================*/

.rounded-20{
    border-radius:20px;
}

.shadow-soft{
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.py-120{
    padding-top:120px;
    padding-bottom:120px;
}

.bg-light{
    background:#f8f9fa;
}

.text-gold{
    color:var(--secondary);
}

.text-primary-dark{
    color:var(--primary);
}

/*==========================================
GLOBAL ELEMENTS
==========================================*/

html{
    scroll-behavior:smooth;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    transition:all .3s ease;
}

button{
    transition:all .3s ease;
}

::selection{
    background:var(--secondary);
    color:#fff;
}

.form-control::placeholder,
.form-select,
textarea::placeholder{
    color:#999;
}

.form-control,
.form-select,
textarea{
    font-family:inherit;
}

/*==========================================
END OF FILE
==========================================*/