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

:root{

    --primary:#0d63e8;
    --primary-dark:#064bb5;

    --dark:#071b3a;
    --dark-light:#102957;

    --white:#ffffff;

    --black:#111111;

    --gray:#666666;

    --light:#f5f8fc;

    --border:#e6eaf0;

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

    --transition:.35s ease;

}





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


*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:'Poppins',sans-serif;

    color:var(--black);

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



ul{

    list-style:none;

}



button{

    font-family:inherit;

}





/* =====================================================
        GLOBAL
===================================================== */


.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}



section{

    padding:100px 0;

}



.section-label{

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}



h1,
h2,
h3,
h4{

    line-height:1.2;

}



h2{

    font-size:45px;

    font-weight:700;

}





.primary-btn,
.quote-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:var(--primary);

    color:white;

    padding:16px 35px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}



.primary-btn:hover,
.quote-btn:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}





/* =====================================================
        TOP BAR
===================================================== */


.top-bar{

    background:var(--dark);

    color:white;

    font-size:14px;

    padding:12px 0;

}



.top-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.top-info,
.social-links{

    display:flex;

    gap:25px;

    align-items:center;

}



.top-info span,
.social-links span{

    display:flex;

    align-items:center;

    gap:8px;

}



.social-links a{

    color:white;

    transition:.3s;

}



.social-links a:hover{

    color:var(--primary);

}





/* =====================================================
        HEADER
===================================================== */


.header{

    position:absolute;

    top:45px;

    left:0;

    width:100%;

    z-index:100;

}



.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px 0;

}


/* ==========================
        LOGO SIZE CONTROL
========================== */


.logo{

    display:flex;

    align-items:center;

    height:70px;

    margin-left:-140px;

}


.logo img{

    width:420px;

    height:auto;

    object-fit:contain;

    transform:scale(1.15);

    transform-origin:left center;

}





.nav-menu{

    display:flex;

    gap:32px;

}



.nav-menu a{

    color:white;

    font-size:15px;

    font-weight:500;

    position:relative;

}



.nav-menu a:after{

    content:"";

    position:absolute;

    bottom:-8px;

    left:0;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.3s;

}



.nav-menu a:hover:after,
.nav-menu .active:after{

    width:100%;

}





.header-buttons{

    display:flex;

    align-items:center;

    gap:15px;

}



.search{

    width:45px;

    height:45px;

    border-radius:50%;

    border:none;

    background:rgba(255,255,255,.15);

    color:white;

    cursor:pointer;

}



.login-btn{

    color:white;

    padding:12px 25px;

    border:1px solid rgba(255,255,255,.5);

    border-radius:50px;

}





.mobile-toggle{

    display:none;

    color:white;

    font-size:25px;

}





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


.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    background-image:url("../background.jpg");

    background-size:cover;

    background-position:center;

}



.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    90deg,
    rgba(4,17,42,.9),
    rgba(4,17,42,.45)
    );

}



.hero-content{

    position:relative;

    z-index:2;

    color:white;

    padding-top:80px;

}



.subtitle{

    color:#69a6ff;

    letter-spacing:3px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}



.hero h1{

    font-size:78px;

    font-weight:800;

    margin-bottom:25px;

}



.hero h1 span{

    color:#3688ff;

}



.hero-text{

    width:600px;

    line-height:1.8;

    font-size:18px;

    color:rgba(255,255,255,.85);

    margin-bottom:40px;

}



.hero-buttons{

    display:flex;

    gap:20px;

}



.outline-btn{

    padding:16px 35px;

    border-radius:50px;

    border:2px solid white;

    color:white;

    font-weight:600;

    transition:.3s;

}



.outline-btn:hover{

    background:white;

    color:var(--dark);

}

/* =====================================================
        SOLUTIONS SECTION
===================================================== */


.solutions{

    background:white;

}



.solution-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}



.solution-content h2{

    margin-bottom:25px;

}



.solution-content p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:25px;

}



.solution-content ul{

    margin-bottom:35px;

}



.solution-content li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    font-weight:500;

}



.solution-content li i{

    color:var(--primary);

}



.solution-image img{

    border-radius:25px;

    box-shadow:var(--shadow);

}






/* =====================================================
        INDUSTRIES SECTION
===================================================== */


.industries{

    background:var(--light);

}



.industry-grid{

    display:grid;

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

    gap:25px;

}



.industry-card{

    background:white;

    padding:40px 25px;

    border-radius:20px;

    text-align:center;

    transition:var(--transition);

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

}



.industry-card:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-8px);

}



.industry-card i{

    font-size:45px;

    color:var(--primary);

    margin-bottom:20px;

}



.industry-card:hover i{

    color:white;

}



.industry-card h3{

    font-size:20px;

}






/* =====================================================
        WHY CHOOSE US
===================================================== */


.why-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.why-image{

    position:relative;

}



.why-image img{

    border-radius:25px;

}



.floating-box{

    position:absolute;

    bottom:30px;

    right: 30px;

    transform: translateX(-50px);
    
    background:white;

    padding:25px;

    border-radius:20px;

    box-shadow:var(--shadow);

    display:flex;

    align-items:center;

    gap:20px;

    width: fit-content;

    max-width: 90%;

}



.floating-box i{

    width:55px;

    height:55px;

    background:var(--primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:22px;

}



.floating-box strong{

    display:block;

    font-size:28px;

}



.floating-box span{

    color:var(--gray);

    font-size:13px;

}





.why-content h2{

    margin-bottom:25px;

}



.why-content>p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:35px;

}



.advantages{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

}



.advantage{

    display:flex;

    gap:15px;

}



.advantage i{

    color:var(--primary);

    font-size:25px;

}



.advantage h4{

    margin-bottom:5px;

}



.advantage p{

    color:var(--gray);

    font-size:14px;

    line-height:1.5;

}







/* =====================================================
        STATISTICS
===================================================== */


.statistics{

    background:var(--dark);

    color:white;

}



.stats-grid{

    display:grid;

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

    text-align:center;

    gap:30px;

}



.stat-box i{

    font-size:40px;

    color:#4d9aff;

    margin-bottom:20px;

}



.stat-box h3{

    font-size:45px;

    margin-bottom:10px;

}



.stat-box p{

    color:rgba(255,255,255,.75);

}








/* =====================================================
        PROCESS SECTION
===================================================== */


.process{

    background:white;

}



.process-wrapper{

    display:flex;

    align-items:center;

    justify-content:center;

}



.process-step{

    text-align:center;

    max-width:220px;

}



.step-number{

    width:75px;

    height:75px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:white;

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}



.process-step p{

    color:var(--gray);

    font-size:14px;

    line-height:1.7;

}



.process-line{

    height:2px;

    width:80px;

    background:#dce7f8;

}

/* =====================================================
        TESTIMONIALS
===================================================== */


.testimonials{

    background:var(--light);

}



.testimonial-grid{

    display:grid;

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

    gap:30px;

}



.testimonial-card{

    background:white;

    padding:35px;

    border-radius:20px;

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

    transition:var(--transition);

}



.testimonial-card:hover{

    transform:translateY(-8px);

}



.stars{

    color:#ffb400;

    font-size:20px;

    margin-bottom:20px;

}



.testimonial-card p{

    color:var(--gray);

    line-height:1.8;

    margin-bottom:30px;

    font-style:italic;

}



.client{

    display:flex;

    align-items:center;

    gap:15px;

}



.client-image img{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

}



.client h4{

    font-size:16px;

}



.client span{

    color:var(--gray);

    font-size:13px;

}







/* =====================================================
        FAQ
===================================================== */


.faq{

    background:white;

}



.faq-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

}



.faq-title h2{

    margin-bottom:20px;

}



.faq-title p{

    color:var(--gray);

    line-height:1.8;

}



.faq-item{

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

    padding:20px 0;

}



.faq-item h4{

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:18px;

}



.faq-item i{

    color:var(--primary);

}



.faq-item p{

    color:var(--gray);

    line-height:1.7;

    margin-top:15px;

}







/* =====================================================
        CTA SECTION
===================================================== */


.cta{

    background:

    linear-gradient(
    90deg,
    rgba(13,99,232,.95),
    rgba(7,27,58,.95)
    );

    color:white;

}



.cta-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}



.cta .section-label{

    color:#a9d0ff;

}



.cta h2{

    margin-bottom:15px;

}



.cta p{

    color:rgba(255,255,255,.85);

    max-width:600px;

}



.cta .primary-btn{

    background:white;

    color:var(--primary);

}



.cta .primary-btn:hover{

    background:#eef5ff;

}







/* =====================================================
        FOOTER
===================================================== */


.footer{

    background:#06152f;

    color:white;

    padding-top:80px;

}



.footer-grid{

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr 1.2fr;

    gap:50px;

}



.footer-logo img{

    width:380px;

    margin-bottom:25px;

}



.footer-column p{

    color:rgba(255,255,255,.7);

    line-height:1.8;

    margin-bottom:25px;

}



.footer-column h3{

    margin-bottom:25px;

    font-size:20px;

}



.footer-column ul li{

    margin-bottom:14px;

}



.footer-column ul a{

    color:rgba(255,255,255,.7);

    transition:.3s;

}



.footer-column ul a:hover{

    color:white;

}



.footer-social{

    display:flex;

    gap:12px;

}



.footer-social a{

    width:40px;

    height:40px;

    border-radius:50%;

    background:rgba(255,255,255,.1);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}



.footer-social a:hover{

    background:var(--primary);

}





.contact-list li{

    display:flex;

    gap:12px;

    align-items:center;

    color:rgba(255,255,255,.7);

}



.contact-list i{

    color:#4d9aff;

}



.newsletter{

    display:flex;

    margin-top:15px;

}



.newsletter input{

    width:100%;

    padding:14px;

    border:none;

    outline:none;

}



.newsletter button{

    width:55px;

    border:none;

    background:var(--primary);

    color:white;

    cursor:pointer;

}





.footer-bottom{

    margin-top:60px;

    border-top:1px solid rgba(255,255,255,.1);

    padding:25px 0;

}



.footer-bottom .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.footer-bottom p{

    color:rgba(255,255,255,.6);

}



.bottom-links{

    display:flex;

    gap:25px;

}



.bottom-links a{

    color:rgba(255,255,255,.6);

    font-size:14px;

}

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


/* ==========================
        TABLETS
========================== */


@media(max-width:1100px){


    .container{

        width:92%;

    }



    .nav-menu{

        gap:20px;

    }



    .header-buttons .login-btn{

        display:none;

    }



    .hero h1{

        font-size:60px;

    }



    .feature-grid{

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

    }



    .services-grid{

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

    }



    .industry-grid{

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

    }



    .stats-grid{

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

    }



    .footer-grid{

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

    }



}








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


@media(max-width:768px){



    section{

        padding:70px 0;

    }



    h2{

        font-size:34px;

    }






    /* TOP BAR */


    .top-container{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }



    .top-info{

        flex-direction:column;

        gap:8px;

    }



    .social-links{

        display:none;

    }







    /* HEADER */


    .header{

        top:0;

    }



    .navbar{

        padding:15px 0;

    }



    .logo img{

        width:170px;

    }



    nav{

        display:none;

    }



    .header-buttons{

        display:none;

    }



    .mobile-toggle{

        display:block;

    }








    /* HERO */


    .hero{

        min-height:850px;

    }



    .hero-content{

        padding-top:120px;

    }



    .hero h1{

        font-size:42px;

        line-height:1.15;

    }



    .hero-text{

        width:100%;

        font-size:16px;

    }



    .hero-buttons{

        flex-direction:column;

        align-items:flex-start;

    }






    /* FEATURES */


    .features{

        margin-top:-50px;

    }



    .feature-grid{

        grid-template-columns:1fr;

    }








    /* ABOUT */


    .about-grid{

        grid-template-columns:1fr;

        gap:40px;

    }



    .about-points{

        grid-template-columns:1fr;

    }








    /* SERVICES */


    .services-grid{

        grid-template-columns:1fr;

    }








    /* SOLUTIONS */


    .solution-grid{

        grid-template-columns:1fr;

        gap:40px;

    }



    .solution-image{

        order:-1;

    }








    /* INDUSTRIES */


    .industry-grid{

        grid-template-columns:1fr;

    }








    /* WHY */


    .why-grid{

        grid-template-columns:1fr;

    }



    .advantages{

        grid-template-columns:1fr;

    }



    .floating-box{

        right:15px;

        bottom:15px;

    }








    /* STATS */


    .stats-grid{

        grid-template-columns:1fr;

    }








    /* PROCESS */


    .process-wrapper{

        flex-direction:column;

        gap:30px;

    }



    .process-line{

        width:2px;

        height:40px;

    }








    /* TESTIMONIALS */


    .testimonial-grid{

        grid-template-columns:1fr;

    }








    /* FAQ */


    .faq-grid{

        grid-template-columns:1fr;

        gap:40px;

    }








    /* CTA */


    .cta-content{

        flex-direction:column;

        align-items:flex-start;

    }








    /* FOOTER */


    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

    }



    .footer-bottom .container{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }



    .bottom-links{

        flex-direction:column;

        gap:10px;

    }



}

/* =====================================================
        FEATURE CARD IMPROVEMENTS
===================================================== */


.features{

    position:relative;

    margin-top:-110px;

    z-index:20;

}



.feature-grid{

    align-items:stretch;

}



.feature-card{

    min-height:330px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:45px 35px;

}



.feature-card .icon{

    flex-shrink:0;

}



.feature-card h3{

    font-size:24px;

    margin-bottom:18px;

    font-weight:700;

}



.feature-card p{

    flex-grow:1;

    font-size:15px;

    line-height:1.8;

}



.feature-card a{

    margin-top:auto;

    display:inline-block;

}



.feature-card.featured{

    transform:translateY(-15px);

}



.feature-card.featured:hover{

    transform:translateY(-25px);

}
/* =====================================================
        ABOUT IMPROVEMENTS
===================================================== */


.about{

    padding-top:120px;

}



.about-image{

    padding-right:20px;

}



.about-image img{

    height:550px;

    object-fit:cover;

}



.about-content h2{

    font-size:45px;

    line-height:1.25;

}



.about-content > p{

    font-size:16px;

}



.about-points{

    margin-top:30px;

}



.about-points div{

    background:#f7faff;

    padding:15px 20px;

    border-radius:10px;

}



.about-points i{

    width:25px;

    height:25px;

    background:var(--primary);

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

}

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


.services{

    padding-top:110px;

}



.service-card{

    min-height:350px;

    display:flex;

    flex-direction:column;

}



.service-icon{

    width:75px;

    height:75px;

    border-radius:20px;

}



.service-icon i{

    font-size:30px;

}



.service-card h3{

    font-size:24px;

    margin-bottom:15px;

}



.service-card p{

    flex-grow:1;

}



.service-card a{

    margin-top:auto;

}



.service-card:hover{

    box-shadow:

    0 20px 45px rgba(13,99,232,.15);

}

/* =====================================================
        SOLUTIONS IMPROVEMENT
===================================================== */


.solutions{

    padding:120px 0;

}



.solution-grid{

    align-items:center;

}



.solution-content h2{

    font-size:45px;

    margin-bottom:25px;

}



.solution-content > p{

    font-size:16px;

}



.solution-content ul{

    margin:30px 0;

}



.solution-content li{

    background:#f7faff;

    padding:14px 18px;

    border-radius:10px;

    margin-bottom:12px;

}



.solution-content li i{

    font-size:18px;

}



.solution-image{

    position:relative;

}



.solution-image img{

    height:520px;

    width:100%;

    object-fit:cover;

    border-radius:25px;

}





/* =====================================================
        INDUSTRIES IMPROVEMENT
===================================================== */


.industries{

    padding:110px 0;

}



.industry-grid{

    margin-top:50px;

}



.industry-card{

    min-height:220px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}



.industry-card i{

    width:85px;

    height:85px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#edf4ff;

    border-radius:50%;

}



.industry-card:hover i{

    background:rgba(255,255,255,.2);

}



.industry-card h3{

    margin-top:15px;

    font-size:22px;

}







/* =====================================================
        WHY CHOOSE US IMPROVEMENT
===================================================== */


.why-us{

    padding:120px 0;

}



.why-image img{

    height:600px;

    width:100%;

    object-fit:cover;

}



.why-content h2{

    font-size:45px;

}



.advantages{

    margin-top:35px;

}



.advantage{

    background:#f8fbff;

    padding:20px;

    border-radius:15px;

    transition:.3s;

}



.advantage:hover{

    background:white;

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

}



.advantage i{

    min-width:35px;

}



.advantage h4{

    font-size:18px;

}



.floating-box{

    padding:30px;

}



.floating-box strong{

    color:var(--primary);

}

/* =====================================================
   PREMIUM SECTION OVERHAUL
===================================================== */


/* =========================
   GLOBAL SECTION HEADINGS
========================= */


.section-heading{

    max-width:850px;

    margin-bottom:70px;

}



.section-heading h2{

    font-size:48px;

    color:#071b3a;

    letter-spacing:-1px;

}



.section-heading p:last-child{

    font-size:17px;

    color:#68758a;

}





/* =========================
   SERVICES PREMIUM CARDS
========================= */


.services{

    background:#f6f9ff;

}



.services-grid{

    gap:30px;

}



.service-card{

    background:#ffffff;

    border:1px solid #edf1f7;

    border-radius:24px;

    padding:45px 35px;

    position:relative;

    overflow:hidden;

    min-height:380px;

}



.service-card:before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    height:5px;

    width:0;

    background:#0d63e8;

    transition:.4s;

}



.service-card:hover:before{

    width:100%;

}



.service-icon{

    background:#eaf3ff;

    width:80px;

    height:80px;

    border-radius:22px;

}



.service-card h3{

    color:#071b3a;

    margin-top:25px;

}



.service-card p{

    color:#68758a;

}







/* =========================
   SOLUTIONS PREMIUM
========================= */


.solutions{

    position:relative;

}



.solution-grid{

    background:#ffffff;

}



.solution-content{

    padding-right:30px;

}



.solution-content h2{

    font-size:48px;

    color:#071b3a;

}



.solution-content li{

    background:white;

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

    border-radius:14px;

    padding:18px 22px;

}



.solution-image img{

    border-radius:30px;

    box-shadow:

    0 30px 60px rgba(0,0,0,.12);

}







/* =========================
   INDUSTRIES PREMIUM
========================= */


.industries{

    background:#071b3a;

}



.industries .section-label{

    color:#63a1ff;

}



.industries h2{

    color:white;

}



.industry-card{

    background:#102957;

    border:none;

    color:white;

    border-radius:25px;

    min-height:240px;

}



.industry-card:hover{

    background:#0d63e8;

}



.industry-card i{

    background:rgba(255,255,255,.12);

    color:white;

}



.industry-card h3{

    color:white;

}







/* =========================
   WHY CHOOSE US PREMIUM
========================= */


.why-us{

    background:white;

}



.why-content h2{

    color:#071b3a;

    font-size:48px;

}



.why-content>p{

    color:#68758a;

}



.advantages{

    gap:20px;

}



.advantage{

    background:#f7faff;

    border-radius:18px;

    padding:25px;

}



.advantage i{

    background:#0d63e8;

    color:white;

    width:50px;

    height:50px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

}



.advantage p{

    color:#68758a;

}



.why-image img{

    border-radius:30px;

}



.floating-box{

    border-radius:20px;

    padding:30px;

}

/* =====================================================
        GLOBAL DESIGN POLISH
===================================================== */


body{

    background:#ffffff;

}



section{

    overflow:hidden;

}



h1,h2,h3,h4{

    letter-spacing:-0.5px;

}



p{

    font-size:16px;

}



.container{

    position:relative;

}





/* Section spacing */

.about,
.services,
.solutions,
.industries,
.why-us,
.process,
.testimonials,
.faq{

    position:relative;

}






/* Better section labels */

.section-label{

    display:inline-block;

    background:#eaf3ff;

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}






/* Better card shadows */

.feature-card,
.service-card,
.industry-card,
.testimonial-card{

    box-shadow:

    0 20px 50px rgba(7,27,58,.08);

}






/* Smooth hover everywhere */

.feature-card,
.service-card,
.industry-card,
.testimonial-card,
.advantage{

    transition:.35s ease;

}





/* Images */

.about-image img,
.solution-image img,
.why-image img{

    filter:saturate(1.05);

}





/* Buttons */

.primary-btn{

    box-shadow:

    0 15px 30px rgba(13,99,232,.25);

}





.primary-btn:hover{

    box-shadow:

    0 20px 40px rgba(13,99,232,.35);

}

/* =====================================================
        ABOUT TROCK SERVICE - FINAL POLISH
===================================================== */


.about{

    padding:120px 0;

}



.about-grid{

    gap:90px;

}



.about-image{

    position:relative;

}



.about-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:

    0 30px 70px rgba(7,27,58,.15);

}






/* Experience Badge */


.experience-box{

    position:absolute;

    bottom:35px;

    right:50px;

    background:white;

    color:#071b3a;

    width:180px;

    height:180px;

    border-radius:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

    0 25px 60px rgba(0,0,0,.15);

}



.experience-box strong{

    display:block;

    font-size:55px;

    line-height:1;

    color:#0d63e8;

}



.experience-box span{

    display:block;

    color:#68758a;

    margin-top:8px;

    font-size:14px;

    font-weight:600;

}






/* About Content */


.about-content{

    padding-left:20px;

}



.about-content h2{

    font-size:50px;

    line-height:1.15;

    margin-bottom:25px;

    color:#071b3a;

}



.about-content p{

    color:#68758a;

    line-height:1.9;

    max-width:560px;

}






/* About Points */


.about-points{

    margin:35px 0;

    display:grid;

    grid-template-columns:1fr;

    gap:15px;

}



.about-points div{

    background:#f7faff;

    border-radius:14px;

    padding:18px 22px;

    display:flex;

    align-items:center;

    gap:15px;

    font-weight:600;

    color:#071b3a;

}



.about-points i{

    width:28px;

    height:28px;

    border-radius:50%;

    background:#0d63e8;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

}





.about-content .primary-btn{

    margin-top:10px;

}

/* =====================================================
        OUR SERVICES - FINAL POLISH
===================================================== */


.services{

    padding:120px 0;

    background:#f6f9ff;

}





.services .section-heading{

    text-align:center;

    max-width:800px;

    margin:0 auto 70px;

}



.services .section-heading h2{

    font-size:50px;

    color:#071b3a;

    margin-bottom:20px;

}



.services .section-heading p{

    color:#68758a;

    line-height:1.8;

}







/* Service Grid */


.services-grid{

    display:grid;

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

    gap:30px;

}







/* Service Card */


.service-card{

    background:white;

    border-radius:25px;

    padding:45px 35px;

    min-height:390px;

    position:relative;

    overflow:hidden;

    border:1px solid #edf1f7;

    box-shadow:

    0 20px 45px rgba(7,27,58,.06);

    transition:.35s ease;

}





.service-card:after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    background:#eaf3ff;

    border-radius:50%;

    right:-40px;

    bottom:-40px;

    transition:.35s;

}





.service-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 30px 60px rgba(7,27,58,.12);

}





.service-card:hover:after{

    background:#0d63e8;

}







/* Icons */


.service-icon{

    width:80px;

    height:80px;

    background:#eaf3ff;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    position:relative;

    z-index:2;

}



.service-icon i{

    font-size:32px;

    color:#0d63e8;

    transition:.3s;

}



.service-card:hover .service-icon{

    background:#0d63e8;

}



.service-card:hover .service-icon i{

    color:white;

}







/* Text */


.service-card h3{

    font-size:24px;

    color:#071b3a;

    margin-bottom:15px;

    position:relative;

    z-index:2;

}



.service-card p{

    color:#68758a;

    line-height:1.8;

    margin-bottom:25px;

    position:relative;

    z-index:2;

}






/* Learn More */


.service-card a{

    color:#0d63e8;

    font-weight:700;

    display:inline-flex;

    align-items:center;

    gap:8px;

    position:relative;

    z-index:2;

}



.service-card a:hover{

    gap:14px;

}







/* Featured Service */


.service-card.featured-service{

    background:#0d63e8;

    color:white;

}



.service-card.featured-service h3{

    color:white;

}



.service-card.featured-service p{

    color:rgba(255,255,255,.8);

}



.service-card.featured-service .service-icon{

    background:rgba(255,255,255,.15);

}



.service-card.featured-service .service-icon i{

    color:white;

}



.service-card.featured-service a{

    color:white;

}

/* =====================================================
        GLOBAL NETWORK FEATURE CARDS
===================================================== */


.features{

    position:relative;

    margin-top:-100px;

    z-index:20;

    padding-bottom:40px;

}



.feature-grid{

    display:grid;

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

    gap:25px;

}







.feature-card{

    background:white;

    border-radius:25px;

    padding:40px 30px;

    min-height:360px;

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    box-shadow:

    0 25px 60px rgba(7,27,58,.12);

    transition:.35s ease;

}







.feature-card:hover{

    transform:translateY(-12px);

}







/* Decorative circle */


.feature-card:before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    background:#f0f6ff;

    border-radius:50%;

    right:-60px;

    top:-60px;

}







/* Icon */


.feature-card .icon{

    width:75px;

    height:75px;

    border-radius:20px;

    background:#eaf3ff;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

    position:relative;

    z-index:2;

}



.feature-card .icon i{

    color:#0d63e8;

    font-size:30px;

}







/* Text */


.feature-card h3{

    font-size:23px;

    color:#071b3a;

    margin-bottom:15px;

    position:relative;

    z-index:2;

}



.feature-card p{

    color:#68758a;

    line-height:1.8;

    font-size:15px;

    flex-grow:1;

    position:relative;

    z-index:2;

}





.feature-card a{

    color:#0d63e8;

    font-weight:700;

    position:relative;

    z-index:2;

}








/* Highlight Card */


.feature-card.featured{

    background:white;

    color:#071b3a;

    transform:none;

}


.feature-card.featured:hover{

    transform:translateY(-12px);

}



.feature-card.featured .icon{

    background:#eaf3ff;

}



.feature-card.featured .icon i{

    color:#0d63e8;

}



.feature-card.featured h3{

    color:#071b3a;

}



.feature-card.featured p{

    color:#68758a;

}



.feature-card.featured a{

    color:#0d63e8;

}





.feature-card.featured:hover{

    transform:translateY(-35px);

}







.feature-card.featured:before{

    background:rgba(255,255,255,.1);

}







.feature-card.featured .icon{

    background:rgba(255,255,255,.15);

}



.feature-card.featured .icon i{

    color:white;

}



.feature-card.featured h3{

    color:white;

}



.feature-card.featured p{

    color:rgba(255,255,255,.85);

}



.feature-card.featured a{

    color:white;

}

/* Fix Featured Feature Card Text */

.feature-card.featured h3,
.feature-card.featured p,
.feature-card.featured a{

    opacity:1;

    visibility:visible;

    color:#071b3a;

}



.feature-card.featured h3{

    display:block;

}



.feature-card.featured p{

    display:block;

}



.feature-card.featured a{

    display:inline-flex;

}



.feature-card.featured .icon{

    position:relative;

    z-index:3;

}



.feature-card.featured h3,
.feature-card.featured p,
.feature-card.featured a{

    position:relative;

    z-index:3;

}

/* =====================================================
        WHY CHOOSE TROCK SERVICE - FINAL POLISH
===================================================== */


.why-us{

    padding:120px 0;

    background:#ffffff;

}



.why-grid{

    align-items:center;

    gap:90px;

}



/* Image Side */


.why-image{

    position:relative;

}



.why-image img{

    width:100%;

    height:600px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:

    0 30px 70px rgba(7,27,58,.15);

}







/* Floating Experience Box */


.floating-box{

    position:absolute;

    bottom:35px;

    right:-35px;

    background:white;

    border-radius:25px;

    padding:30px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:

    0 25px 60px rgba(0,0,0,.15);

}



.floating-box i{

    width:60px;

    height:60px;

    background:#0d63e8;

    color:white;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

}



.floating-box strong{

    display:block;

    font-size:32px;

    color:#071b3a;

}



.floating-box span{

    color:#68758a;

}







/* Text Side */


.why-content .section-label{

    margin-bottom:20px;

}



.why-content h2{

    font-size:50px;

    line-height:1.15;

    color:#071b3a;

    margin-bottom:25px;

}



.why-content>p{

    color:#68758a;

    line-height:1.9;

    margin-bottom:35px;

}







/* Advantage Boxes */


.advantages{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}



.advantage{

    background:#f7faff;

    padding:25px;

    border-radius:18px;

    display:flex;

    gap:15px;

    align-items:flex-start;

    transition:.35s;

}



.advantage:hover{

    background:white;

    box-shadow:

    0 15px 40px rgba(7,27,58,.08);

    transform:translateY(-5px);

}



.advantage i{

    width:45px;

    height:45px;

    flex-shrink:0;

    background:#0d63e8;

    color:white;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

}



.advantage h4{

    color:#071b3a;

    margin-bottom:8px;

}



.advantage p{

    color:#68758a;

    font-size:14px;

    line-height:1.6;

}

/* =====================================================
        STATISTICS - FINAL DESIGN
===================================================== */

.statistics{

    background:linear-gradient(
        135deg,
        #071b3a 0%,
        #0b2d63 100%
    );

    padding:110px 0;

    position:relative;

    overflow:hidden;

}



/* Decorative circles */

.statistics::before{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    border-radius:50%;

    background:rgba(255,255,255,.03);

    top:-200px;

    right:-150px;

}



.statistics::after{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    border-radius:50%;

    background:rgba(255,255,255,.02);

    bottom:-120px;

    left:-80px;

}



.stats-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:30px;

}



.stat-box{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:25px;

    padding:40px 25px;

    text-align:center;

    transition:.35s ease;

}



.stat-box:hover{

    transform:translateY(-8px);

    background:#0d63e8;

}



.stat-box i{

    font-size:42px;

    color:#7db4ff;

    margin-bottom:20px;

}



.stat-box h3{

    color:white;

    font-size:52px;

    margin-bottom:10px;

    font-weight:700;

}



.stat-box p{

    color:rgba(255,255,255,.8);

    font-size:15px;

    letter-spacing:.5px;

}

/* =====================================================
        PROCESS TIMELINE
===================================================== */

.process{

    background:white;

}



.process-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:20px;

    margin-top:60px;

}



.process-step{

    flex:1;

    text-align:center;

    position:relative;

}



.process-step:not(:last-child)::after{

    content:"";

    position:absolute;

    top:38px;

    right:-10%;

    width:20%;

    height:2px;

    background:#d8e6ff;

}



.step-number{

    width:80px;

    height:80px;

    background:#0d63e8;

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    font-size:24px;

    font-weight:700;

    box-shadow:0 15px 35px rgba(13,99,232,.3);

}



.process-step h3{

    color:#071b3a;

    margin-bottom:15px;

}



.process-step p{

    color:#68758a;

    line-height:1.8;

    max-width:230px;

    margin:auto;

}

@media(max-width:768px){

    .nav-menu.active{

        display:flex;
        flex-direction:column;
        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#071b3a;
        padding:30px;
        gap:20px;

    }

}

/* ===============================
   SCROLL REVEAL ANIMATION
================================ */

.reveal{

    opacity:0;

    transform:translateY(40px);

    transition:0.8s ease;

}


.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ===============================
   STICKY HEADER
================================ */

.header.scrolled{

    position:fixed;

    top:0;

    background:#071b3a;

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

    transition:.35s ease;

}

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

@media(max-width:768px){

    .nav-menu{

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:#071b3a;

        flex-direction:column;

        align-items:center;

        padding:30px 0;

        gap:25px;

        transform:translateY(-150%);

        transition:.35s ease;

    }


    .nav-menu.active{

        transform:translateY(0);

    }

}