/* =====================================================
CONTACT PAGE CSS
KNBC TECHNOLOGIES PVT LTD
===================================================== */

/* =====================================================
CONTACT HERO SECTION
===================================================== */

.contact-page .page-hero-section{

    background:
    linear-gradient(
    rgba(2,6,23,0.86),
    rgba(15,23,42,0.92)
    ),
    url('../images/contact/contact-bg.webp');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

/* =====================================================
CONTACT INFO CARD
===================================================== */

.contact-info-card{

    position:relative;

    background:#ffffff;

    border-radius:30px;

    padding:40px 35px;

    text-align:center;

    height:100%;

    overflow:hidden;

    border:1px solid #e2e8f0;

    box-shadow:
    0 15px 40px rgba(15,23,42,0.06);

    transition:0.4s ease;

}

.contact-info-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 30px 70px rgba(15,23,42,0.12);

}

/* =====================================================
TOP BORDER EFFECT
===================================================== */

.contact-info-card::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:
    linear-gradient(
    90deg,
    #2563eb,
    #60a5fa
    );

}

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

.contact-icon{

    width:95px;
    height:95px;

    margin:0 auto 28px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    #eff6ff,
    #dbeafe
    );

    display:flex;

    align-items:center;

    justify-content:center;

    transition:0.4s ease;

}

.contact-icon i{

    font-size:40px;

    color:#2563eb;

    transition:0.4s ease;

}

.contact-info-card:hover .contact-icon{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #1d4ed8
    );

    transform:
    rotate(-5deg)
    scale(1.05);

}

.contact-info-card:hover .contact-icon i{
    color:#ffffff;
}

/* =====================================================
CONTACT CONTENT
===================================================== */

.contact-info-card h4{

    font-size:28px;

    font-weight:800;

    color:#020617;

    margin-bottom:16px;

}

.contact-info-card p{

    font-size:15px;

    line-height:1.9;

    color:#64748b;

    margin-bottom:22px;

}

.contact-info-card a{

    display:inline-block;

    color:#2563eb;

    font-size:17px;

    font-weight:700;

    word-break:break-word;

}

.contact-info-card a:hover{
    color:#020617;
}

/* =====================================================
CONTACT FORM BOX
===================================================== */

.contact-form-box{

    background:#ffffff;

    border-radius:32px;

    padding:45px 40px;

    border:1px solid #e2e8f0;

    box-shadow:
    0 15px 40px rgba(15,23,42,0.06);

}

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

.form-group{
    position:relative;
}

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

.contact-form-box .form-control{

    width:100%;

    height:60px;

    border-radius:16px;

    border:1px solid #cbd5e1;

    padding:15px 22px;

    font-size:15px;

    color:#020617;

    background:#ffffff;

    transition:0.3s ease;

    box-shadow:none;

}

.contact-form-box textarea.form-control{

    height:auto;

    resize:none;

    padding-top:18px;

}

.contact-form-box .form-control:focus{

    border-color:#2563eb;

    box-shadow:
    0 0 0 4px rgba(37,99,235,0.10);

}

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

.submit-btn{

    width:100%;

    height:60px;

    border:none;

    border-radius:16px;

    background:#2563eb;

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    transition:0.3s ease;

}

.submit-btn:hover{

    background:#020617;

    transform:translateY(-2px);

}

/* =====================================================
MAP SECTION
===================================================== */

.map-section{
    position:relative;
}

.map-section iframe{

    width:100%;

    height:500px;

    border:none;

    display:block;

}

/* =====================================================
CONTACT FEATURE BOX
===================================================== */

.contact-feature-box{

    background:#ffffff;

    border-radius:30px;

    padding:35px;

    border:1px solid #e2e8f0;

    box-shadow:
    0 15px 40px rgba(15,23,42,0.06);

    transition:0.4s ease;

    height:100%;

}

.contact-feature-box:hover{

    transform:translateY(-10px);

    box-shadow:
    0 30px 70px rgba(15,23,42,0.12);

}

.contact-feature-box h4{

    font-size:26px;

    font-weight:800;

    color:#020617;

    margin-bottom:16px;

}

.contact-feature-box p{

    font-size:15px;

    line-height:1.9;

    color:#64748b;

    margin:0;

}

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

@media(max-width:991px){

    .contact-info-card{
        padding:35px 28px;
    }

    .contact-form-box{
        padding:35px 30px;
    }

}

@media(max-width:767px){

    .contact-info-card{
        padding:30px 24px;
    }

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

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

    .contact-info-card h4{
        font-size:24px;
    }

    .contact-info-card p{
        font-size:14px;
    }

    .contact-form-box{
        padding:30px 24px;
    }

    .contact-form-box .form-control{
        height:56px;
    }

    .submit-btn{
        height:56px;
    }

    .map-section iframe{
        height:400px;
    }

}

@media(max-width:575px){

    .contact-info-card{
        padding:28px 20px;
    }

    .contact-form-box{
        padding:26px 20px;
    }

    .contact-info-card h4{
        font-size:22px;
    }

    .map-section iframe{
        height:320px;
    }

}