/*=========================================
        GOOGLE FONT
=========================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*=========================================
        RESET
=========================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f7f9fc;
    color:#333;
    overflow-x:hidden;
}

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

a{
    text-decoration:none;
}

button,
input,
textarea{
    font-family:'Poppins',sans-serif;
    outline:none;
}

button{
    border:none;
    cursor:pointer;
}

/*=========================================
        VARIABLES
=========================================*/

:root{

    --primary:#0b1f3a;
    --primary-dark:#16355f;

    --secondary:#facc15;

    --white:#ffffff;

    --text:#374151;

    --heading:#1b1b1b;

    --border:#e5e7eb;

    --shadow:0 2px 8px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s ease;

}

/*=========================================
        COMMON CONTAINER
=========================================*/

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

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

.contact-hero{
    position: relative;
    min-height: 120px;              /* Reduced height */
    padding: 40px 0;                /* Less top & bottom space */

    background:
        linear-gradient(rgba(11,31,58,.92), rgba(7,20,38,.92)),
        url("../images/contact-banner.jpg") center center/cover no-repeat;

    display: flex;
    align-items: flex-start;        /* Move content to top */
}

.hero-content{
    max-width: 700px;
    color: #facc15;
    margin-top: 15px;               /* Move text upward */
}

.hero-content h1{
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.1;
}

.hero-content p{
    font-size: 14px;
    line-height: 1.7;
    color: #fff;
    max-width: 620px;
    margin-bottom: 0;
}

/*=========================================
 SECTION SPACING
=========================================*/

.contact-section{
    padding: 50px 0;
}

.map-section{
    padding: 0 0 50px;
}

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

@media (max-width:992px){

    .contact-hero{
        min-height:180px;
        padding:35px 0;
    }

    .hero-content{
        margin-top:10px;
    }

    .hero-content h1{
        font-size:42px;
    }

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

}

@media (max-width:768px){

    .contact-hero{
        min-height:160px;
        padding:30px 0;
        align-items:center;
    }

    .hero-content{
        text-align:center;
        margin-top:0;
    }

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

    .hero-content p{
        font-size:15px;
    }

    .contact-section{
        padding:40px 0;
    }

}

@media (max-width:480px){

    .contact-hero{
        min-height:150px;
        padding:25px 0;
    }

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

    .hero-content p{
        font-size:14px;
    }

}
/*=========================================
        CONTACT WRAPPER
=========================================*/

.contact-wrapper{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:35px;

    align-items:start;

}

/*=========================================
        COMMON CARD
=========================================*/

.contact-form-card,
.contact-info-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    border:1px solid  #071426;

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

    transition:.35s ease;

}

.contact-form-card:hover,
.contact-info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.12);

}

/*=========================================
        CARD TITLE
=========================================*/

.card-title{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:35px;

}

.card-title i{

    width:45px;

    height:45px;

    background:var(--primary);

    color:#facc15;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

}

.card-title h2{

    font-size:21px;

    color:var(--heading);

    font-weight:700;

}

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

form{

    width:100%;

}

.input-group{

    margin-bottom:22px;

}

.input-group label{

    display:block;

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#333;


}

/*=========================================
        INPUT ROW
=========================================*/

.input-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

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

.input-group input,
.input-group textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid var(--border);

    border-radius:12px;

    font-size:13px;

    font-weight:400;


    background:#fafafa;

    transition:.3s;

}

.input-group textarea{

    resize:none.input-group textarea{

    width:100%;

    height:50px;   /* Decreased height */

    padding:16px 18px;

    border:1px solid var(--border);

    border-radius:12px;

    font-size:15px;

    background:#fafafa;

    resize:vertical;   /* Optional: allows users to increase height */

    transition:.3s ease;

};

}

.input-group input:focus,
.input-group textarea:focus{

    border-color:var(--primary);

    background:#fff;

    box-shadow:0 0 0 4px rgba(13,124,82,.12);

}

/*=========================================
        PLACEHOLDER
=========================================*/

.input-group input::placeholder,
.input-group textarea::placeholder{

    font-size:10px;

    color:#999;

    font-weight:400;

}

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

form button{

    display:inline-flex;

    align-items:center;

    gap:6px;

    background:var(--primary);

    color:#facc15;

    padding:16px 35px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    transition:.35s;

}

form button:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

form button i{

    font-size:15px;

}

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

.info-box{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px 0;

    border-bottom:1px solid #ececec;

}

.info-box:last-child{

    border:none;

}

.info-box i{

    width:35px;

    height:35px;

    background:var(--primary);

    color:#facc15;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    flex-shrink:0;

}

.info-box h4{

    font-size:16px;

    margin-bottom:8px;

    color:#222;

}

.info-box p{

    color:#666;

    line-height:1.8;

    font-size:12px;

}

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

.info-box:hover i{

    transform:rotate(10deg) scale(1.05);

    transition:.35s;

}

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

@media(max-width:991px){

.contact-wrapper{

    grid-template-columns:1fr;

}

.contact-info-card{

    margin-top:10px;

}

}

@media(max-width:768px){

.contact-form-card,
.contact-info-card{

    padding:30px;

}

.input-row{

    grid-template-columns:1fr;

    gap:0;

}

.card-title h2{

    font-size:24px;

}

form button{

    width:100%;

    justify-content:center;

}

}

@media(max-width:480px){

.contact-form-card,
.contact-info-card{

    padding:22px;

}

.card-title{

    flex-direction:column;

    text-align:center;

}

.info-box{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.info-box i{

    margin-bottom:8px;

}

}
/*=========================================
        GOOGLE MAP SECTION
=========================================*/

.map-section{

    padding-bottom:100px;

}

/*=========================================
        MAP CARD
=========================================*/

.map-card{

    background:#ffffff;

    border-radius:20px;

    border:2px solid #071426;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(11, 1, 41, 0.899);

    transition:all .35s ease;

}

.map-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(0,0,0,.12);

}

/*=========================================
        MAP IFRAME
=========================================*/

.map-card iframe{

    width:100%;

    height:500px;

    border:1px;

    display:block;

}

/*=========================================
        OPTIONAL MAP TITLE
=========================================*/

.map-title{

    text-align:center;

    margin-bottom:40px;

}

.map-title h2{

    font-size:34px;

    color:var(--heading);

    margin-bottom:10px;

}

.map-title p{

    color:#666;

    font-size:16px;

    max-width:650px;

    margin:auto;

    line-height:1.8;

}

/*=========================================
        MAP ANIMATION
=========================================*/

.map-card{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:991px){

.map-card iframe{

    height:420px;

}

}

@media(max-width:768px){

.map-section{

    padding-bottom:70px;

}

.map-card{

    border-radius:16px;

}

.map-card iframe{

    height:350px;

}

.map-title h2{

    font-size:28px;

}

.map-title p{

    font-size:15px;

}

}

@media(max-width:480px){

.map-card iframe{

    height:280px;

}

}
/*=========================================
        JS ANIMATION
=========================================*/

.contact-form-card,
.contact-info-card,
.map-card{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.input-group.active label{

    color:var(--primary);

}
.about-section::before,
.about-section::after,
.vision-section::before,
.vision-section::after,
.why-section::before,
.why-section::after,
.faq-section::before,
.faq-section::after{

    display:none !important;

    content:none !important;

}