/*==============================
 WEBSITE COST CALCULATOR
==============================*/

.cost-calculator-section{
    padding:95px 0;
    background:#eef3f5;
}
.cost-calculator-section .container{
    max-width:1300px;
}

/* Breadcrumb */

.breadcrumb-area{
    display:flex;
    align-items:center;
    gap:10px;
    
    margin-bottom:40px;
    font-size:15px;
    font-weight:500;
}

.breadcrumb-area a{
    color:#00a7b5;
    text-decoration:none;
}

.breadcrumb-area a:hover{
    text-decoration:underline;
}

.breadcrumb-area span{
    color:#777;
}

.breadcrumb-area .active{
    color:#555;
}

/*==============================
 LEFT CARD
==============================*/

.calculator-card{
    background:#fff;
    padding:40px;
    border-radius:20px;
    border:1px solid #e5eff2;
    box-shadow:0 12px 35px rgba(0,0,0,.05);
}

.calculator-card h1{
    font-size:46px;
    font-weight:800;
    line-height:1.15;
    color:#0d3340;
    margin-bottom:20px;
}

.calculator-desc{
    color:#667085;
    font-size:18px;
    line-height:1.8;
    max-width:700px;
    margin-bottom:40px;
}

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

.form-label{
    font-weight:700;
    color:#0d3340;
    margin-bottom:10px;
    font-size:15px;
}

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

.form-select{
    height:56px;
    border-radius:12px;
    border:1px solid #d7e5eb;
    font-size:16px;
    box-shadow:none;
}

.form-select:focus{
    border-color:#00a7b5;
    box-shadow:0 0 0 .18rem rgba(0,167,181,.15);
}

/*==============================
 SWITCH
==============================*/

.form-switch{
    display:flex;
    align-items:center;
    gap:12px;
}

.form-switch .form-check-input{
    width:48px;
    height:24px;
    cursor:pointer;
    background-color:#cfd8dc;
    border:none;
}

.form-switch .form-check-input:checked{
    background-color:#11b7c4;
}

.form-check-label{
    color:#46535f;
    font-weight:500;
}

/*==============================
 ADDON TITLE
==============================*/

.addon-title{
    color:#0d3340;
    font-weight:700;
    margin-bottom:20px;
}/* ==========================
   ADDON SERVICES
========================== */

.addon-section{
    margin-top:40px;
}

.addon-title{
    font-size:16px;
    font-weight:700;
    color:#184856;
    margin-bottom:18px;
}

.addon-card{
    display:flex;
    align-items:flex-start;
    gap:14px;

    padding:18px;
    background:#fff;

    border:1px solid #d8edf3;
    border-radius:10px;

    cursor:pointer;
    transition:.3s ease;
    height:100%;
}

.addon-card:hover{
    border-color:#11b6c4;
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(17,182,196,.12);
}

.addon-card input{
    width:18px;
    height:18px;
    margin-top:3px;
    accent-color:#11b6c4;
    cursor:pointer;
}

.addon-card h6{
    margin:0 0 5px;
    font-size:18px;
    font-weight:700;
    color:#274653;
    line-height:1.35;
}

.addon-card span{
    font-size:15px;
    color:#6c7b82;
}

/* Checked State */

.addon-card:has(input:checked){
    border-color:#11b6c4;
    background:#f3fcfd;
    box-shadow:0 10px 25px rgba(17,182,196,.15);
}

/* Responsive */

@media(max-width:768px){

    .addon-card{
        padding:16px;
    }

    .addon-card h6{
        font-size:16px;
    }

    .addon-card span{
        font-size:14px;
    }

}
/*==============================
 RIGHT ESTIMATE CARD
==============================*/

.estimate-card{
    background:linear-gradient(135deg,#0795a2,#14b7c3);
    color:#fff;
    border-radius:20px;
    padding:32px;
    position:sticky;
    top:120px;
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.estimate-card h3{
    font-size:25px;
    font-weight:700;
    margin:0;
}

.live-badge{
    background:#fff;
    color:#111;
    font-size:14px;
    padding:6px 12px;
    border-radius:5px;
    font-weight:800;
}

.estimate-text{
    /* margin:10px 0 30px; */
    color:#eafcff;
    line-height:1.7;
}

.price-box{
    margin-bottom:10px;
}

.price-box small{
    display:block;
    color:#dffcff;
    font-size:13px;
    letter-spacing:.5px;
    text-transform:uppercase;
    margin-bottom:8px;
}

.price-box h2{
    font-size:25px;
    font-weight:800;
    margin:0;
}

.price-box h4{
    font-size:28px;
    margin:0;
    font-weight:700;
}

.price-box h5{
    font-size:24px;
    margin:0;
    font-weight:700;
}

 

.estimate-card h6{
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
}

.estimate-card p:last-child{
    line-height:1.8;
    margin:0;
    color:#fff;
}

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

@media(max-width:991px){

.calculator-card{
    padding:30px;
}

.calculator-card h1{
    font-size:36px;
}

.calculator-desc{
    font-size:16px;
}

.estimate-card{
    margin-top:30px;
    position:static;
}

}

@media(max-width:767px){

.cost-calculator-section{
    padding:50px 0;
}

.calculator-card{
    padding:25px;
}

.calculator-card h1{
    font-size:30px;
}

.calculator-desc{
    font-size:15px;
}

.form-select{
    height:52px;
}

.price-box h2{
    font-size:30px;
}

.price-box h4{
    font-size:24px;
}

.price-box h5{
    font-size:20px;
}

}


/*=========================
Customer Information
=========================*/

.customer-info{
    margin-top:50px;
}

.section-label{
    font-size:24px;
    font-weight:700;
    color:#0b3142;
}

.form-label{
    font-size:15px;
    font-weight:700;
    color:#0b3142;
    margin-bottom:8px;
}

.form-label span{
    color:#ff4d4d;
}

.customer-info .form-control,
.customer-info .form-select{
    height:52px;
    border-radius:10px;
    border:1px solid #cfe4ea;
    box-shadow:none;
    font-size:15px;
}

.customer-info textarea.form-control{
    height:110px;
    resize:none;
    padding-top:14px;
}

.customer-info .form-control:focus,
.customer-info .form-select:focus{
    border-color:#12b7c5;
    box-shadow:0 0 0 .15rem rgba(18,183,197,.15);
}

.phone-group{
    display:flex;
    gap:10px;
}

.country-code{
    width:140px;
    flex-shrink:0;
}

.exchange-box{
    height:52px;
    border:1px solid #d7e8ed;
    border-radius:10px;
    display:flex;
    align-items:center;
    padding:0 18px;
    background:#f7fafb;
    font-size:16px;
    color:#555;
}

.exchange-box strong{
    color:#222;
    margin-left:6px;
}

.estimate-btn{
    background:#b36a48;
    border:none;
    color:#fff;
    padding:13px 28px;
    border-radius:10px;
    font-weight:700;
}

.estimate-btn:hover{
    background:#96583b;
}

.reset-btn{
    border-radius:10px;
    padding:13px 24px;
    font-weight:600;
}

@media(max-width:768px){

    .phone-group{
        flex-direction:column;
    }

    .country-code{
        width:100%;
    }

    .estimate-btn,
    .reset-btn{
        width:100%;
    }

    .d-flex.gap-3{
        flex-direction:column;
    }

}