/* ===========================================
   CONTACT PAGE
=========================================== */

#contact{

    padding:90px 0;

}

#contact .lead{

    max-width:850px;

    margin:auto;

    color:#666;

}

/* ===========================================
   Calculator Notice
=========================================== */

.calculator-notice{

    background:#fff;

    border:none;

    border-left:6px solid var(--primary-color);

    border-radius:18px;

    padding:30px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.3s;

    margin-top:40px;

}

.calculator-notice:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

/* Header */

.calculator-notice-header{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:25px;

}

/* Icon */

.calculator-notice-icon{

    width:70px;

    height:70px;

    min-width:70px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary-color),
        var(--secondary-color)
    );

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:30px;

}

.calculator-notice-icon i{

    color:#fff !important;

    font-size:30px !important;

}

/* Title */

.calculator-notice h4{

    margin:0 0 12px;

    font-size:1.55rem;

    font-weight:700;

    color:#222;

}

/* Text */

.calculator-notice p{

    margin:0;

    color:#666;

    line-height:1.8;

}

/* Benefits */

.calculator-notice-features{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin:30px 0;

}

.calculator-feature{

    display:flex;

    align-items:center;

    gap:12px;

    color:#444;

    font-weight:500;

}

.calculator-feature i{

    color:#28a745;

    font-size:18px;

}

/* Button */

.calculator-notice-card .btn{

    min-width:260px;

    padding:14px 34px;

    font-size:1.05rem;

    font-weight:600;

    border-radius:50px;

color: #fff !important;

}

#contact form .btn,
#contact form .btn i{

    color:#fff !important;

}
/* ===========================================
   Mobile
=========================================== */

@media(max-width:768px){

    .calculator-notice{

        padding:24px;

    }

    .calculator-notice-header{

        flex-direction:column;

        align-items:center;

        text-align:center;

        gap:18px;

    }

    .calculator-notice-icon{

        width:64px;

        height:64px;

        min-width:64px;

        font-size:26px;

    }

    .calculator-notice h4{

        font-size:1.35rem;

    }

    .calculator-notice-features{

        margin:24px 0;

    }

    .calculator-feature{

        justify-content:center;

        text-align:left;

    }

    .calculator-notice .btn{

        width:100%;

        min-width:0;

    }

}

/* ===========================================
   Contact Card
=========================================== */

.contact-item{

    display:flex;

    align-items:center;

    gap:18px;

    padding:15px;

    border-radius:15px;

    color:#222;

    text-decoration:none;

    transition:.3s;

    margin-bottom:12px;

}

.contact-item:hover{

    background:#f8f8f8;

    transform:translateX(5px);

    color:#000;

}

.card:hover .contact-item i,
.card:hover .contact-item i:before {

    color:#fff !important;

    fill:#fff !important;

}

.contact-item i{

    width:46px;

    height:46px;

    min-width:46px;

    border-radius:50%;

    background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:18px;

}

.contact-item small{

    display:block;

    color:#888;

    font-size:13px;

}

.contact-item strong{

    display:block;

    font-size:16px;

    font-weight:600;

}

/* ===========================================
   Form
=========================================== */

#contact .form-control{

    border-radius:12px;

    padding:12px 16px;

}

#contact textarea.form-control{

    min-height:180px;

    resize:vertical;

}

#contact label{

    font-weight:600;

    margin-bottom:8px;

}

#contact .btn-gradient{

    min-width:240px;

}

/* ===========================================
   Mobile
=========================================== */

@media(max-width:768px){

    .calculator-notice{

        text-align:center;

    }

    .calculator-notice .btn{

        width:100%;

        margin-top:20px;

    }

    .contact-item{

        padding:12px;

    }

    #contact .btn-gradient{

        width:100%;

    }

}

/*==========================================
CALCULATOR SUMMARY
==========================================*/

.calculator-summary{

    margin-top:40px;

    border:none;

    border-radius:18px;

    overflow:hidden;

    transition:.3s;

}

.calculator-summary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.calculator-summary .card-body{

    padding:35px;

}

/*==========================================
ICON
==========================================*/

.summary-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:linear-gradient(135deg,#ff0000,#d32f2f);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    flex-shrink:0;

}

/*==========================================
STATS
==========================================*/

.calculator-summary h3{

    font-size:2rem;

    font-weight:700;

    margin-bottom:5px;

}

.calculator-summary small{

    color:#777;

    font-size:.9rem;

}

/*==========================================
TABLE
==========================================*/

.calculator-summary table{

    margin-top:20px;

}

.calculator-summary thead{

    background:#f8f9fa;

}

.calculator-summary th{

    border:none;

    font-weight:600;

    color:#555;

}

.calculator-summary td{

    vertical-align:middle;

    border-color:#ececec;

}

.calculator-summary tbody tr{

    transition:.2s;

}

.calculator-summary tbody tr:hover{

    background:#fafafa;

}

/*==========================================
SUCCESS ALERT
==========================================*/

.calculator-summary .alert{

    border-radius:12px;

    border:none;

}

/*==========================================
PRIMARY VALUES
==========================================*/

.calculator-summary .primary{

    color:var(--primary-color);

}

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

@media(max-width:768px){

    .calculator-summary .card-body{

        padding:25px;

    }

    .summary-icon{

        width:55px;

        height:55px;

        font-size:22px;

    }

    .calculator-summary h3{

        font-size:1.6rem;

    }

    .calculator-summary table{

        font-size:.85rem;

    }

}