html{
    scroll-behavior:smooth;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#07162d;
}

/* HERO */

.hero{
    background:
        linear-gradient(rgba(2,12,35,.78), rgba(2,12,35,.82)),
        url("images/hero-desktop.jpg");
    background-size:cover;
    background-position:center;
}

@media (max-width:768px){

    .hero{
        background:
            linear-gradient(rgba(2,12,35,.80), rgba(2,12,35,.80)),
            url("images/hero-mobile.jpg");
        background-size:cover;
        background-position:center;
    }

}

/* NAVIGATION */

/* ===========================
   NAVBAR
=========================== */

.navbar{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 7%;
    z-index:1000;
}

.logo img{
    width:170px;
}

.nav-menu{
    display:flex;
    list-style:none;
    gap:35px;
}

.nav-menu a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    padding:10px 15px;
    border-radius:6px;
    transition:all .3s ease;
}

.nav-menu a:hover{
    color:#fff;
    background:#2f7cff;
}

.quote-btn{
    background:#2f7cff;
    color:#fff;
    text-decoration:none;
    padding:14px 28px;
    border-radius:5px;
    font-weight:600;
}

.quote-mobile{
    display:none;
}

/* Hamburger */

.menu-toggle{
    display:none;
    width:30px;
    cursor:pointer;
}

.menu-toggle span{
    display:block;
    width:100%;
    height:3px;
    background:#fff;
    margin:6px 0;
    transition:.3s;
}

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

@media (max-width:768px){

    .quote-btn{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .nav-menu{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#07162d;
        flex-direction:column;
        align-items:center;
        padding:30px 0;
        gap:25px;
    }

    .nav-menu li{
    width:100%;
    }

    .nav-menu a{
    display:block;
    width:100%;
    text-align:center;
    padding:15px 20px;
    transition:all .3s ease;
}

   .nav-menu a:hover{
    background:#2f7cff;
    color:#fff;
}

}



    .nav-menu.active{
        display:flex;
    }


    .logo img{
        width:140px;
    }


/* HERO TEXT */

.hero-content{

    width:600px;

    margin-left:7%;
    margin-top:120px;

    color:white;
}

.hero-content small{

    color:#c5d0e2;

    letter-spacing:2px;

    font-size:13px;
}

.hero-content h1{

    margin:20px 0;

    font-size:72px;

    line-height:82px;

    font-weight:800;
}

.hero-content span{

    color:#2f7cff;
}

.hero-content p{

    width:520px;

    color:#cfd7e5;

    margin-bottom:45px;

    line-height:30px;

    font-size:17px;
}

/* BUTTONS */

.buttons{

    display:flex;
    gap:20px;
}

.primary-btn{

    background:#2f7cff;
    color:white;

    padding:18px 40px;

    text-decoration:none;

    border-radius:6px;

    font-weight:600;
}

.secondary-btn{

    border:2px solid white;

    color:white;

    padding:18px 40px;

    border-radius:6px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.secondary-btn:hover{

    background:white;

    color:#07162d;
}

/* RESPONSIVE */

@media(max-width:992px){


    .hero-content{

        width:90%;
        margin:auto;
        text-align:center;
        padding:70px 0;
    }

    .hero-content h1{

        font-size:52px;
        line-height:60px;
    }

    .hero-content p{

        width:100%;
    }

    .buttons{

        justify-content:center;
        flex-wrap:wrap;
    }
}

/* =============================
   HERO FEATURES
============================= */

.hero-features{
    width:100%;
    background:#0a2c73;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:20px;

    padding:22px 7%;
}

.feature-card{
    display:flex;
    align-items:flex-start;
    gap:15px;
}

.feature-icon{
    width:50px;
    height:50px;

    border-radius:50%;

    background:#1d4ed8;

    display:flex;
    justify-content:center;
    align-items:center;

    flex-shrink:0;
}

.feature-icon i{
    color:#fff;
    font-size:20px;
}

.feature-text h4{
    color:#fff;
    font-size:17px;
    margin-bottom:6px;
}

.feature-text p{
    color:#d7dcef;
    font-size:14px;
    line-height:1.5;
}

@media (max-width:768px){

    .hero-features{
        grid-template-columns:1fr;
        gap:25px;
        padding:30px 20px;
    }

    .feature-card{
        align-items:center;
    }

}

/*==============================
        ABOUT
===============================*/

.about{

    padding:120px 7%;
    background:#081B3A;
}

.about-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:1.1fr 1fr;

    gap:70px;

    align-items:center;
}

.section-tag{

    color:#2F7CFF;

    font-size:14px;

    letter-spacing:2px;

    font-weight:600;

    text-transform:uppercase;
}

.about-content h2{

    color:#fff;

    font-size:48px;

    line-height:1.2;

    margin:20px 0 35px;
}

.about-content p{

    color:#cdd8ec;

    font-size:18px;

    line-height:1.9;

    margin-bottom:22px;
}

.about-buttons{

    margin-top:45px;

    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

.about-image{

    position:relative;
}

.about-image img{

    width:100%;

    border-radius:20px;

    display:block;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

    transition:.5s;
}

.about-image img:hover{

    transform:scale(1.03);
}

@media(max-width:992px){

.about{

    padding:80px 20px;
}

.about-container{

    grid-template-columns:1fr;

    gap:50px;
}

.about-content{

    order:2;
}

.about-image{

    order:1;
}

.about-content h2{

    font-size:34px;
}

.about-content p{

    font-size:17px;
}

.about-buttons{

    justify-content:center;
}

}

/*====================================
        FOUNDER SECTION
====================================*/

.founder{

    padding:120px 7%;
    background:#fff;

}

.founder-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:430px 1fr;

    gap:80px;

    align-items:center;

}

/* LEFT */

.founder-main{

    width:100%;
    display:block;

    border-radius:22px;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

    transition:.4s;

}

.founder-main:hover{

    transform:translateY(-10px);

}

.founder-gallery{

    display:flex;
    justify-content:center;

    margin-top:35px;

}

.founder-gallery img{

    width:135px;
    height:135px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid white;

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

    transition:.35s;

}

.founder-gallery img:first-child{

    margin-right:-20px;

    z-index:2;

}

.founder-gallery img:last-child{

    margin-left:-20px;

}

.founder-gallery img:hover{

    transform:translateY(-8px) scale(1.05);

}

/* RIGHT */

.founder-tag{

    color:#2F7CFF;

    font-size:14px;

    letter-spacing:2px;

    font-weight:700;

}

.founder-right h2{

    font-size:48px;

    color:#081B3A;

    margin:18px 0 8px;

}

.founder-right h3{

    color:#2F7CFF;

    font-size:22px;

    font-weight:600;

}

.founder-line{

    width:70px;
    height:4px;

    background:#2F7CFF;

    border-radius:20px;

    margin:25px 0 35px;

}

.founder-right p{

    color:#555;

    font-size:17px;

    line-height:1.9;

    margin-bottom:22px;

}

/* Expertise */

.founder-skills{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:40px;

}

.founder-skills span{

    padding:12px 22px;

    border-radius:30px;

    background:#EEF5FF;

    color:#2F7CFF;

    font-weight:600;

    transition:.3s;

}

.founder-skills span:hover{

    background:#2F7CFF;

    color:#fff;

    transform:translateY(-4px);

}

/* Mobile gallery hidden */

.founder-gallery-mobile{

    display:none;

}

@media(max-width:992px){

.founder{

    padding:80px 20px;

}

.founder-container{

    grid-template-columns:1fr;

    gap:45px;

}

.founder-left{

    max-width:420px;

    margin:auto;

}

.founder-right{

    text-align:center;

}

.founder-right h2{

    font-size:34px;

}

.founder-line{

    margin:20px auto 35px;

}

.founder-skills{

    justify-content:center;

}

/* Hide desktop circles */

.founder-gallery{

    display:none;

}

/* Show mobile circles */

.founder-gallery-mobile{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:40px;

}

.founder-gallery-mobile img{

    width:110px;

    height:110px;

    object-fit:cover;

    border-radius:50%;

    border:5px solid white;

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

}

}


/*==================================
    SERVICES • MISSION • VISION
===================================*/

.company-overview{

    padding:120px 7%;
    background:#f7f9fc;

}

.overview-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.overview-card{

    background:#fff;

    padding:45px 35px;

    border-radius:20px;

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

    transition:.35s;

    border-top:5px solid #2F7CFF;

}

.overview-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.card-icon{

    width:70px;
    height:70px;

    background:#2F7CFF;

    color:#fff;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:28px;

    margin-bottom:25px;

}

.overview-card h2{

    font-size:30px;

    color:#081B3A;

    margin-bottom:25px;

}

.overview-card p{

    color:#555;

    line-height:1.9;

    font-size:17px;

}

.overview-card ul{

    list-style:none;

    padding:0;

}

.overview-card ul li{

    margin-bottom:18px;

    padding-left:28px;

    position:relative;

    color:#555;

    line-height:1.7;

}

.overview-card ul li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#2F7CFF;

    font-weight:bold;

}

@media(max-width:992px){

    .overview-container{

        grid-template-columns:1fr;

    }

    .overview-card{

        padding:35px 28px;

    }

}


/*=========================
        SERVICES
==========================*/

.services{

    padding:120px 7%;
    background:#f8fbff;

}

.services-header{

    max-width:750px;
    margin:0 auto 70px;
    text-align:center;

}

.services-header h2{

    font-size:48px;
    color:#081B3A;
    margin:18px 0 25px;

}

.services-header p{

    color:#666;
    line-height:1.8;
    font-size:17px;

}

.services-grid{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;

}

.service-card{

    background:#fff;

    padding:35px;

    border-radius:20px;

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

    transition:.35s;

    border-top:4px solid transparent;

}

.service-card:hover{

    transform:translateY(-10px);

    border-top:4px solid #2F7CFF;

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

}

.service-icon{

    width:70px;
    height:70px;

    background:#2F7CFF;

    color:white;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:28px;

    margin-bottom:25px;

}

.service-card h3{

    font-size:22px;
    color:#081B3A;
    margin-bottom:18px;

}

.service-card p{

    color:#666;
    line-height:1.8;

}

@media(max-width:992px){

.services{

    padding:80px 20px;

}

.services-header h2{

    font-size:34px;

}

.services-grid{

    grid-template-columns:1fr;

}

.service-card{

    padding:30px;

}

}


/*==========================
    COLLABORATION SECTION
===========================*/

.collaboration{

    padding:120px 7%;
    background:#f8fbff;

}

.collaboration-container{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.collaboration-image{

    overflow:hidden;
    border-radius:20px;

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

}

.collaboration-image img{

    width:100%;
    display:block;

    transition:.5s;

}

.collaboration-image:hover img{

    transform:scale(1.05);

}

.collaboration-content h2{

    font-size:44px;

    color:#081B3A;

    margin:18px 0 30px;

}

.collaboration-content p{

    font-size:17px;

    line-height:1.9;

    color:#555;

    margin-bottom:20px;

}

.team-points{

    margin-top:35px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.point{

    background:white;

    padding:18px;

    border-radius:12px;

    font-weight:600;

    color:#081B3A;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;

}

.point:hover{

    transform:translateY(-6px);

    background:#2F7CFF;

    color:white;

}

@media(max-width:992px){

.collaboration{

    padding:80px 20px;

}

.collaboration-container{

    grid-template-columns:1fr;

}

.collaboration-content{

    text-align:center;

}

.collaboration-content h2{

    font-size:34px;

}

.team-points{

    grid-template-columns:1fr;

}

}

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

.contact{

    padding:120px 7%;
    background:#081B3A;

}

.contact-title{

    max-width:760px;
    margin:auto;
    text-align:center;
    margin-bottom:70px;

}

.contact-title h2{

    color:#fff;
    font-size:50px;
    margin:18px 0;

}

.contact-title p{

    color:#d9e3f4;
    line-height:1.9;

}

.contact-wrapper{

    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:400px 1fr;

    gap:45px;

}

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

.contact-info{

    background:#fff;
    padding:45px;
    border-radius:20px;

}

.contact-info h3{

    font-size:30px;
    color:#081B3A;
    margin-bottom:15px;

}

.contact-info>p{

    color:#666;
    margin-bottom:35px;
    line-height:1.8;

}

.contact-item{

    display:flex;
    align-items:flex-start;

    gap:18px;

    margin-bottom:28px;

}

.contact-item .icon{

    width:58px;
    height:58px;

    border-radius:50%;

    background:#2F7CFF;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#fff;

    font-size:22px;

    flex-shrink:0;

}

.contact-item h4{

    margin-bottom:5px;
    color:#081B3A;

}

.contact-item p{

    color:#666;

}

/*=========================
SOCIALS
==========================*/

.social-links{

    margin-top:40px;

    display:flex;

    gap:15px;

}

.social-links a{

    width:50px;
    height:50px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#EEF5FF;

    color:#2F7CFF;

    text-decoration:none;

    font-size:20px;

    transition:.35s;

}

.social-links a:hover{

    background:#2F7CFF;

    color:white;

    transform:translateY(-5px);

}

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

.contact-form{

    background:white;

    padding:45px;

    border-radius:20px;

}

.row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:17px 18px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:10px;

    outline:none;

    font-size:16px;

    transition:.3s;

}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#2F7CFF;

}

.contact-form textarea{

    resize:none;

}

.contact-form button{

    width:100%;

    padding:18px;

    border:none;

    border-radius:10px;

    background:#2F7CFF;

    color:#fff;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.contact-form button:hover{

    background:#0F63FF;

    transform:translateY(-3px);

}

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

@media(max-width:992px){

.contact{

    padding:80px 20px;

}

.contact-title h2{

    font-size:34px;

}

.contact-wrapper{

    grid-template-columns:1fr;

}

.row{

    grid-template-columns:1fr;

}

.contact-info,
.contact-form{

    padding:30px;

}

.social-links{

    justify-content:center;

}

}

/*=========================
BACK TO TOP
=========================*/

.back-to-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    background:#2F7CFF;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    font-size:22px;

    box-shadow:0 10px 30px rgba(0,0,0,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.4s;

    z-index:999;

}

.back-to-top:hover{

    background:#0F63FF;

    transform:translateY(-6px);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}