/* ===================================================
   NEXTRACK SOLUTIONS
   STYLE.CSS
   Part 1 - Global | Navigation | Hero
=================================================== */

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

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

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

:root{

    --primary:#0F4C81;
    --secondary:#1A73E8;
    --accent:#2BA84A;

    --dark:#16213E;
    --light:#F8FAFC;
    --white:#ffffff;

    --text:#555;
    --heading:#1F2937;

    --shadow:0 10px 35px rgba(0,0,0,.08);
    --transition:.35s ease;
    --radius:12px;

}

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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#fff;
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;

}

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

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

section{
    padding:100px 0;
}

.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}

/* ==============================
   TYPOGRAPHY
==============================*/

h1,
h2,
h3,
h4{

    color:var(--heading);
    line-height:1.2;

}

h1{

    font-size:3.8rem;
    font-weight:700;

}

h2{

    font-size:2.6rem;
    margin-bottom:15px;

}

h3{

    font-size:1.4rem;

}

p{

    margin:15px 0;

}

.section-title{

    text-align:center;
    margin-bottom:70px;

}

.section-title p{

    max-width:700px;
    margin:auto;

}

/* ==============================
   BUTTONS
==============================*/

.btn{

    display:inline-block;
    padding:15px 34px;

    border-radius:50px;

    transition:var(--transition);

    font-weight:600;

    cursor:pointer;

}

.primary-btn{

    background:var(--primary);
    color:#fff;

}

.primary-btn:hover{

    background:var(--secondary);
    transform:translateY(-4px);

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

}

.secondary-btn{

    border:2px solid white;
    color:white;

}

.secondary-btn:hover{

    background:white;
    color:var(--primary);

}

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

header{

    position:fixed;
    width:100%;
    top:0;
    left:0;

    z-index:999;

    transition:.4s;

}

header.sticky{

    background:white;

    box-shadow:var(--shadow);

}

header.sticky .logo,
header.sticky a{

    color:var(--heading);

}

header.sticky .logo span{

    color:var(--primary);

}

nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

}

.logo{

    color:white;
    font-size:1.6rem;
    font-weight:700;

}

.logo span{

    color:#7DC8FF;

}

.nav-links{

    display:flex;
    gap:40px;

}

.nav-links a{

    color:white;

    font-weight:500;

    transition:var(--transition);

    position:relative;

}

.nav-links a::after{

    content:'';

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#fff;

    transition:.3s;

}

header.sticky .nav-links a::after{

    background:var(--primary);

}

.nav-links a:hover::after{

    width:100%;

}

.menu-btn{

    display:none;

    color:white;

    font-size:28px;

    cursor:pointer;

}

header.sticky .menu-btn{

    color:var(--heading);

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    background:
    linear-gradient(
    rgba(8,30,60,.75),
    rgba(8,30,60,.75)),
    url("../images/hero.jpg");

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

    color:white;

}

.hero-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.hero-text{

    max-width:700px;

    animation:fadeUp 1s ease;

}

.hero h1{

    color:white;

    margin-bottom:25px;

}

.hero p{

    color:#ECECEC;

    font-size:1.1rem;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

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

.hero::before{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

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

    top:15%;
    right:10%;

    filter:blur(10px);

}

.hero::after{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

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

    border-radius:50%;

    left:8%;

    bottom:10%;

}

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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==============================
   UTILITIES
==============================*/

.text-center{

    text-align:center;

}

.mt-2{

    margin-top:20px;

}

.mt-3{

    margin-top:30px;

}

.mb-2{

    margin-bottom:20px;

}

.shadow{

    box-shadow:var(--shadow);

}

.rounded{

    border-radius:var(--radius);

}

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

.about {
    background: #ffffff;
}


.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    align-items: center;
}


.about-image {
    position: relative;
}


.about-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}


.about-content p {
    color: #4A5568;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 16px;
}


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


.services {
    background: #F8FAFC;
}


.services-grid {

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

}


.service-card {

    background: white;
    padding: 40px 30px;
    border-radius: 15px;

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

    transition: all .35s ease;

    position: relative;

    overflow: hidden;

}


.service-card::before {

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:#0F4C81;

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s ease;

}



.service-card:hover::before {

    transform:scaleX(1);

}



.service-card:hover {

    transform:translateY(-10px);

    box-shadow:
    0 20px 45px rgba(0,0,0,0.15);

}



.service-card i {

    width:70px;
    height:70px;

    display:flex;

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

    background:#EAF2F8;

    color:#0F4C81;

    border-radius:50%;

    font-size:30px;

    margin-bottom:25px;

    transition:.3s ease;

}



.service-card:hover i {

    background:#0F4C81;

    color:white;

}



.service-card h3 {

    font-size:22px;

    margin-bottom:15px;

    color:#16213E;

}



.service-card p {

    color:#4A5568;

    line-height:1.7;

    margin-bottom:20px;

}



.service-card ul {

    list-style:none;

    padding:0;

}



.service-card ul li {

    position:relative;

    padding-left:25px;

    margin-bottom:12px;

    color:#4A5568;

}



.service-card ul li::before {

    content:"✓";

    position:absolute;

    left:0;

    color:#2BA84A;

    font-weight:bold;

}



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


.process {

    background:white;

}



.process-grid {

    display:grid;

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

    gap:20px;

    position:relative;

}



.process-grid::before {

    content:"";

    position:absolute;

    top:55px;

    left:10%;

    width:80%;

    height:2px;

    background:#D9E2EC;

    z-index:0;

}



.step {

    background:white;

    text-align:center;

    position:relative;

    z-index:1;

}



.step span {

    width:75px;

    height:75px;

    background:#0F4C81;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 25px;

    border-radius:50%;

    font-size:22px;

    font-weight:700;

    box-shadow:
    0 10px 25px rgba(15,76,129,.25);

}



.step h3 {

    font-size:20px;

    color:#16213E;

    margin-bottom:10px;

}



.step p {

    color:#4A5568;

    line-height:1.6;

    font-size:14px;

}



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


.why-us {

    background:#16213E;

    color:white;

}



.why-us .section-title h2 {

    color:white;

}



.why-us .section-title p {

    color:#CBD5E0;

}



.why-grid {

    display:grid;

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

    gap:30px;

}



.why-grid > div {

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

    padding:35px 25px;

    border-radius:15px;

    text-align:center;

    transition:.35s ease;

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

}



.why-grid > div:hover {

    background:white;

    transform:translateY(-10px);

}



.why-grid i {

    font-size:40px;

    color:#2BA84A;

    margin-bottom:20px;

}



.why-grid h3 {

    font-size:20px;

    margin-bottom:15px;

}



.why-grid p {

    color:#CBD5E0;

    line-height:1.7;

}



.why-grid > div:hover h3 {

    color:#16213E;

}



.why-grid > div:hover p {

    color:#4A5568;

}



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


@media(max-width:992px){


.about-grid {

    grid-template-columns:1fr;

}


.services-grid {

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

}


.process-grid {

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

}


.process-grid::before {

    display:none;

}


.why-grid {

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

}


}




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


@media(max-width:600px){


.services-grid {

    grid-template-columns:1fr;

}


.process-grid {

    grid-template-columns:1fr;

}


.why-grid {

    grid-template-columns:1fr;

}


.about-image img {

    height:300px;

}


.service-card {

    padding:30px 20px;

}


}

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

.cta {

    background: linear-gradient(
        135deg,
        #0F4C81,
        #16213E
    );

    padding: 90px 0;

    text-align: center;

    color: white;

}


.cta h2 {

    font-size: 2.5rem;

    margin-bottom: 20px;

}


.cta p {

    max-width: 700px;

    margin: auto;

    font-size: 1.1rem;

    line-height: 1.8;

    opacity: .9;

}


.cta .btn {

    margin-top: 35px;

}


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


.contact {

    background: #f8fafc;

}


.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    align-items: start;

}



.contact-info {

    background: white;

    padding: 40px;

    border-radius: 15px;

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

}



.contact-info h3 {

    margin-bottom: 30px;

    font-size: 1.5rem;

    color: #16213E;

}



.contact-info p {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

    color: #4A5568;

}



.contact-info i {

    color: #0F4C81;

    font-size: 1.2rem;

    width: 25px;

}



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


.contact form {

    background:white;

    padding:40px;

    border-radius:15px;

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

}



.contact input,
.contact textarea {


    width:100%;

    padding:15px 18px;

    margin-bottom:20px;

    border:1px solid #e2e8f0;

    border-radius:8px;

    font-family:inherit;

    font-size:.95rem;

    transition:.3s;

}



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


    outline:none;

    border-color:#0F4C81;

    box-shadow:
    0 0 0 3px rgba(15,76,129,.1);

}



.contact textarea {

    resize:none;

}



.contact button {

    border:none;

    cursor:pointer;

}



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


footer {


    background:#16213E;

    color:white;

    padding:60px 0 25px;

}



.footer-content {


    text-align:center;

}



.footer-content h2 {


    font-size:2rem;

    margin-bottom:15px;

}



.footer-content p {


    max-width:500px;

    margin:auto;

    color:#cbd5e1;

    line-height:1.8;

}



.socials {


    margin-top:30px;

    display:flex;

    justify-content:center;

    gap:20px;

}



.socials a {


    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:white;

    transition:.3s;

}



.socials a:hover {


    background:#2BA84A;

    transform:translateY(-5px);

}



footer hr {


    border:none;

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

    margin:40px 0 20px;

}



.copyright {


    text-align:center;

    color:#94a3b8;

    font-size:.9rem;

}



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


#topBtn {


    position:fixed;

    right:30px;

    bottom:30px;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:#0F4C81;

    color:white;

    cursor:pointer;

    display:none;

    justify-content:center;

    align-items:center;

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

    transition:.3s;

    z-index:999;

}



#topBtn:hover {


    background:#2BA84A;

    transform:translateY(-5px);

}



/* ==========================================
   SCROLL ANIMATIONS
========================================== */


.fade-in {


    opacity:0;

    transform:
    translateY(40px);

    transition:
    all .8s ease;

}



.fade-in.active {


    opacity:1;

    transform:
    translateY(0);

}



/* ==========================================
   LOADING ANIMATION
========================================== */


@keyframes fadeUp {


    from {


        opacity:0;

        transform:
        translateY(40px);

    }


    to {


        opacity:1;

        transform:
        translateY(0);

    }

}



.hero-text {


    animation:
    fadeUp 1s ease;

}



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


@media(max-width:992px){


    .hero h1 {

        font-size:2.8rem;

    }


    .about-grid,
    .contact-grid {


        grid-template-columns:1fr;

    }


    .services-grid {


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

    }


    .why-grid {


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

    }


}



@media(max-width:768px){


    body {

        overflow-x:hidden;

    }



    /* Mobile Navigation */


    .nav-links {


        position:absolute;

        top:80px;

        left:0;

        width:100%;

        background:white;

        flex-direction:column;

        align-items:center;

        padding:30px 0;

        gap:25px;

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

        transform:
        translateX(-100%);

        transition:.4s;

    }



    .nav-links.active {


        transform:
        translateX(0);

    }



    .menu-btn {


        display:block;

        font-size:1.5rem;

        cursor:pointer;

        color:#0F4C81;

    }



    .hero {


        min-height:90vh;

    }



    .hero h1 {


        font-size:2.2rem;

    }



    .hero p {


        font-size:1rem;

    }



    .hero-buttons {


        flex-direction:column;

    }



    .btn {


        width:100%;

        text-align:center;

    }



    .services-grid,
    .why-grid {


        grid-template-columns:
        1fr;

    }



    .process-grid {


        grid-template-columns:
        1fr;

    }



    .cta h2 {


        font-size:2rem;

    }



    .section {


        padding:60px 0;

    }



}



@media(max-width:480px){


    .container {


        width:
        90%;

    }


    .hero h1 {


        font-size:
        1.9rem;

    }


    .section-title h2 {


        font-size:
        1.8rem;

    }


    .contact form,
    .contact-info {


        padding:
        25px;

    }


}

.hidden {
    opacity:0;
    transform:translateY(40px);
    transition:0.6s ease;
}

.show {
    opacity:1;
    transform:translateY(0);
}


.sticky {
    position:fixed;
    top:0;
    width:100%;
    background:white;
    box-shadow:0 5px 20px rgba(0,0,0,.1);
    z-index:1000;
}


#topBtn {
    opacity:0;
    pointer-events:none;
}


#topBtn.show {
    opacity:1;
    pointer-events:auto;
}