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


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

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
}





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

.top-bar {
    width: 100%;
    height: 64px;
    background: #020d2b;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.scroll-content {
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    animation: scrollText 25s linear infinite;
}

.scroll-content span {
    font-size: 23px;
    font-weight: 400;
}

.scroll-content a {
    color: #3765f4;
    text-decoration: none;
    font-size: 23px;
    font-weight: 600;
}

.scroll-content:hover{
    animation-play-state: paused;
}



@keyframes scrollText {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}




.navbar {
    width: 100%;
    height: 88px;
    display: flex;
    align-items: center;
    padding: 0 4%;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}




.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    width: 245px;
    height: auto;
    display: block;
}




.nav-links {
    display: flex;
    align-items: center;
    gap: 48px;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
}

.nav-links li a {
    color: #000;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    position: relative;
    transition: 0.3s ease;
}




.nav-links li a:hover {
    color: #3765f4;
}




.nav-links li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: #3765f4;
    transition: 0.3s ease;
}

.nav-links li a:hover::after {
    width: 100%;
}



.phone-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 320px;
    height: 66px;
    padding: 0 30px;
    border-radius: 50px;
    background: #3765f4;
    color: #fff;
    text-decoration: none;
    font-size: 21px;
    font-weight: 600;
    border: 2px solid #3765f4;
    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}




.phone-btn:hover {
    background: #fff;
    color: #3765f4;

    transform: translateY(-2px);
}





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

.menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    padding: 7px;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    z-index: 1100;
}




.menu-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background: #000000;
    border-radius: 5px;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* =========================================
   MOBILE BUTTON → X
========================================= */

.menu-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.menu-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


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

@media (max-width: 1150px) {

    .navbar {
        padding: 0 25px;
    }

    .logo img {
        width: 200px;
    }

    .nav-links {
        gap: 25px;
    }

    .nav-links a {
        font-size: 17px;
    }

    .phone-btn {
        min-width: 250px;
        height: 58px;
        padding: 0 20px;
        font-size: 17px;
    }

}


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

@media (max-width: 800px) {

    /* TOP BAR */

    .top-bar {
        height: 45px;
    }

    .top-group {
        gap: 18px;
        padding-right: 45px;
    }

    .top-group span,
    .top-group a {
        font-size: 15px;
    }

    .top-track {
        animation-duration: 20s;
    }


    /* NAVBAR */

    .navbar {
        min-height: 75px;
        padding: 0 20px;
        justify-content: space-between;
        position: relative;
    }


    /* LOGO */

    .logo img {
        width: 170px;
    }


    /* HIDE PHONE */

    .phone-btn {
        display: none;
    }


    /* SHOW MENU BUTTON */

    .menu-btn {
        display: flex;
    }


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

    .nav-links {

        /* IMPORTANT */
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background: #ffffff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        list-style: none;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

        /* Hidden state */

        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;

        z-index: 999;
    }


    /* OPEN MENU */

    .nav-links.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }


    /* MENU ITEMS */

    .nav-links li {
        width: 100%;
        border-top: 1px solid #eeeeee;
    }


    /* LINKS */

    .nav-links li a {
        display: block;
        width: 100%;
        padding: 18px 20px;
        color: #000000;
        font-size: 18px;
        text-decoration: none;
    }


    /* MOBILE HOVER */

    .nav-links li a:hover {
        background: #f5f7ff;
        color: #3765f4;
    }


    /* REMOVE DESKTOP UNDERLINE */

    .nav-links li a::after {
        display: none;
    }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 450px) {

    .navbar {
        padding: 0 15px;
    }

    .logo img {
        width: 150px;
    }

    .menu-btn {
        width: 38px;
        height: 38px;
    }

    .top-group span,
    .top-group a {
        font-size: 14px;
    }

}




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


html {
    scroll-behavior: smooth;
}











/* BACKGROUND FROM THE IMAGE */

.hero {
    position: relative;
    background: #0b0b0d;
    overflow: hidden;
    
}

/* Subtle square grid */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 101px 101px;
    background-position: 0 0;

    pointer-events: none;
    z-index: 0;
}

/* Very subtle fade toward the bottom */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 65%,
        rgba(11, 11, 13, 0.45) 100%
    );

    pointer-events: none;
    z-index: 0;
}

/* Keep all hero content above the background */
.hero> * {
    position: relative;
    z-index: 1;
}




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

.hero {
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px 8% 50px;
    box-sizing: border-box;
}

.hero-content {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

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

.hero-text {
    max-width: 800px;
}

.hero-text h1 {
    margin: 0 0 25px;
    font-size: clamp(45px, 6vw, 85px);
    line-height: 1.05;
    font-weight: 750;
    letter-spacing: -2px;
    color: white;
}

.hero-text p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 400;
    opacity: 0.85;
    color: rgb(228, 224, 224);
}




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

.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 190px;
}

.contact-action {
    height: 55px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    border: 1px solid blue;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.contact-action:hover {
    transform: translateY(-3px);
}

.email-action {
    background: transparent;
    color: white;
}

.whatsapp-action {
    background: transparent;
    color: white;
}

.contact-icon {
    font-size: 19px;
}

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

@media (max-width: 900px) {

    .hero {
        padding: 110px 6% 70px;
    }

    .hero-content {
        gap: 40px;
    }

    .hero-text h1 {
        font-size: clamp(42px, 7vw, 65px);
    }

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

    .contact-actions {
        min-width: 170px;
    }
}

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

@media (max-width: 700px) {

    .hero {
        min-height: auto;
        padding: 120px 6% 70px;
    }

    .hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-text h1 {
        margin-bottom: 20px;
        margin-top: 50px;
        font-size: clamp(42px, 12vw, 60px);
        line-height: 1.05;
        letter-spacing: -1.5px;
    }

    .hero-text p {
        font-size: 17px;
        line-height: 1.7;
    }

    .contact-actions {
        width: 100%;
        flex-direction: row;
        gap: 12px;
    }

    .contact-action {
        flex: 1;
        height: 52px;
        padding: 0 12px;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .contact-icon {
        font-size: 17px;
    }
}

/* =========================
   SMALL PHONES
========================= */

@media (max-width: 420px) {

    .hero {
        padding: 105px 5% 90px;
    }

    .hero-content {
        gap: 30px;
    }

    .hero-text h1 {
        font-size: 36px;
        line-height: 1.2;
    }

    .hero-text p {
        font-size: 15px;
        line-height: 1.65;
    }

    .contact-actions {
        gap: 8px;
    }

    .contact-action {
        height: 50px;
        font-size: 10px;
        padding: 0 8px;
    }

    .contact-icon {
        font-size: 16px;
    }

     .desktop-break {
        display: none;
    }
}






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

.about-section {
    width: 100%;
    padding: 100px;
    background: #ffffff;
    scroll-margin-top: 100px;
}


/* ==================================================
   MAIN CONTAINER
================================================== */

.about-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;

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

    gap: 80px;

    align-items: center;
}


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

.about-image {
    width: 100%;
    height: 650px;

    overflow: hidden;

    border: 1px solid #1683ff;
    border-radius: 28px;
}


.about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


/* Optional image hover */

.about-image:hover img {
    transform: scale(1.03);
}


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

.about-content {
    width: 100%;
}


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

.about-label {
    display: inline-block;

    margin-bottom: 22px;

    color: #1683ff;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 2px;
}


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

.about-content h2 {
    max-width: 750px;

    margin: 0 0 28px;

    color: #071438;

    font-size: 48px;
    font-weight: 700;

    line-height: 1.15;
}


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

.about-content p {
    max-width: 760px;

    margin: 0 0 17px;

    color: #596579;

    font-size: 18px;

    line-height: 1.3;
}


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

.about-stats {
    width: 100%;

    display: grid;

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

    gap: 16px;

    margin-top: 42px;
}


/* ==================================================
   STAT BOX
================================================== */

.stat-box {
    min-height: 150px;

    padding: 25px 12px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: #f5f8fc;

    border: 1px solid #dce5f0;

    border-radius: 17px;

    transition: all 0.3s ease;
}




/* ==================================================
   STAT BOX HOVER
================================================== */

.stat-box:hover {
    transform: translateY(-5px);

    border-color: #1683ff;

    box-shadow: 0 12px 30px rgba(22, 131, 255, 0.10);
}


/* ==================================================
   NUMBER
================================================== */

.stat-box h3 {
    margin: 0 0 15px;

    color: #1683ff;

    font-size: 20px;

    font-weight: 700;

    line-height: 1;
}


/* ==================================================
   STAT TEXT
================================================== */

.stat-box .dism {
    color: #667085;

    font-size: 15px;

    line-height: 1.6;
}

.stat-box span {
    color: #667085;

    font-size: 30px;

    line-height: 1.6;
}



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

@media (max-width: 1100px) {

    .about-container {
        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }


    .about-content h2 {
        font-size: 40px;
    }


    .about-content p {
        font-size: 17px;
    }


    .about-stats {
        grid-template-columns: repeat(2, 1fr);
    }

}


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

@media (max-width: 768px) {

    .about-section {
        padding: 75px 20px;
    }


    .about-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /* Image comes first */

    .about-image {
        height: 450px;

        border-radius: 22px;
    }


    .about-content h2 {
        font-size: 36px;

        line-height: 1.2;
    }


    .about-content p {
        font-size: 17px;

        line-height: 1.7;
    }


    .about-stats {
        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

        margin-top: 35px;
    }


    .stat-box {
        min-height: 140px;
    }


    .stat-box h3 {
        font-size: 34px;
    }




}


/* ==================================================
   SMALL PHONES
================================================== */

@media (max-width: 480px) {

    .about-section {
        padding: 60px 16px;
    }


    .about-image {
        height: 380px;

        border-radius: 18px;
    }


    .about-label {
        font-size: 13px;

        margin-bottom: 18px;
    }


    .about-content h2 {
        font-size: 31px;
    }


    .about-content p {
        font-size: 17px;
    }


    .about-stats {
        gap: 10px;
    }


    .stat-box {
        min-height: 125px;

        padding: 18px 8px;
    }


    .stat-box h3 {
        font-size: 30px;

        margin-bottom: 12px;
    }


}





/* ================================
   PRICING SECTION
================================ */

.pricing-section {
    width: 100%;
    padding: 40px 20px;
    background: #eef7ff;
}




.pricing-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    align-items: stretch;
}



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

.pricing-header {
    justify-content: space-between;
    align-items: stretch;
    gap: 50px;
    margin-bottom: 42px;
    max-width: 100%;
    text-align: center;
}

.pricing-heading {
    flex: 1;
}

.pricing-eyebrow {
    display: block;
    margin-bottom: 12px;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #005dcc;
}

.pricing-heading h2 {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;

    color: black;
}

.pricing-intro {
    max-width: 100%;
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    padding-top: 18px;
    color: #455064;
}


/* =========================================
   PRICING HEADER — MOBILE
========================================= */

@media (max-width: 1000px) {

    .pricing-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        margin-bottom: 35px;
        padding-left: 5px;
        text-align: left;
    }

    .pricing-heading {
        width: 100%;
    }

    .pricing-eyebrow {
        margin-bottom: 10px;
        font-size: 11px;
        letter-spacing: 1.8px;
    }

    .pricing-heading h2 {
        font-size: 34px;
        line-height: 1.15;
    }

    .pricing-intro {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.7;
        padding-top: 0px;
    }
}


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

@media (max-width: 480px) {

    .pricing-header {
        gap: 20px;
        margin-bottom: 30px;
    }

    .pricing-heading h2 {
        font-size: 30px;
    }

    .pricing-intro {
        font-size: 13px;
        line-height: 1.7;
    }
}











/* ================================
   PRICING CARD
================================ */

.pricing-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e6e9ef;
    border-radius: 20px;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    border-color: #0d6efd;
    box-shadow:
        0 20px 50px rgba(2, 13, 43, 0.12);
}


/* ================================
   PRICING CONTENT
================================ */

.pricing-content {
    height: 100%;
    padding: 40px 32px 32px;
    display: flex;
    flex-direction: column;
}


/* ================================
   PLAN NAME
================================ */

.plan-name {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    color: #020d2b;
    text-transform: capitalize;
}


/* ================================
   PLAN DESCRIPTION
================================ */

.plan-description {
    margin: 0 0 30px;
    min-height: 45px;
    font-size: 15px;
    line-height: 1.7;
    color: #6b7280;
}


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

.plan-features {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    gap: 15px;

    flex: 1;
}

.plan-features li {
    position: relative;

    padding-left: 27px;

    font-size: 15px;
    line-height: 1.5;

    color: #374151;
}


/* Check icon */

.plan-features li::before {
    content: "✓";

    position: absolute;
    left: 0;
    top: 0;

    width: 19px;
    height: 19px;

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

    border-radius: 50%;

    background: #eaf2ff;
    color: #0d6efd;

    font-size: 12px;
    font-weight: 700;
}


/* ================================
   DIVIDER
================================ */

.plan-divider {
    width: 100%;
    height: 1px;

    margin: 30px 0 25px;

    background: #e6e9ef;
}


/* ================================
   PRICE
================================ */

.plan-price {
    margin-bottom: 25px;
}

.price {
    display: block;

    font-size: 32px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;

    color: #020d2b;
}


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

.package-button {
    width: 100%;

    min-height: 54px;

    padding: 0 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border: 1px solid #020d2b;
    border-radius: 10px;

    background: #ffffff;

    color: #020d2b;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.package-button span {
    font-size: 19px;

    transition: transform 0.3s ease;
}

.package-button:hover {
    background: #020d2b;
    color: #ffffff;

    border-color: #020d2b;
}

.package-button:hover span {
    transform: translate(3px, -3px);
}


/* ================================
   MOST POPULAR CARD
================================ */

.popular-card {
    border: 2px solid #0d6efd;

    box-shadow:
        0 15px 45px rgba(13, 110, 253, 0.12);
}


/* ================================
   MOST POPULAR LABEL
================================ */

.popular-label {
    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    padding: 8px 22px;

    background: #0d6efd;
    color: #ffffff;

    border-radius: 0 0 10px 10px;

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.7px;

    white-space: nowrap;

    z-index: 2;
}


/* Give popular card content more top space */

.popular-card .pricing-content {
    padding-top: 65px;
}


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

.popular-button {
    background: #0d6efd;

    border-color: #0d6efd;

    color: #ffffff;
}

.popular-button:hover {
    background: #020d2b;

    border-color: #020d2b;

    color: #ffffff;
}


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

@media (max-width: 950px) {

    .pricing-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-card:last-child {
        grid-column: 1 / -1;

        max-width: 500px;
        width: 100%;

        margin: 0 auto;
    }


}


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

@media (max-width: 650px) {

    .pricing-section {
        padding: 70px 16px;
    }

    .pricing-container {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .pricing-card:last-child {
        grid-column: auto;

        max-width: none;
    }

    .pricing-content {
        padding: 35px 25px 28px;
    }

    .popular-card .pricing-content {
        padding-top: 65px;
    }

    .plan-name {
        font-size: 25px;
    }

    .plan-description {
        font-size: 14px;

        min-height: auto;

        margin-bottom: 25px;
    }

    .plan-features {
        gap: 13px;
    }

    .plan-features li {
        font-size: 14px;
    }

    .price {
        font-size: 29px;
    }


}


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

@media (max-width: 400px) {

    .pricing-section {
        padding: 55px 12px;
    }

    .pricing-content {
        padding: 30px 20px 25px;
    }

    .popular-card .pricing-content {
        padding-top: 60px;
    }

    .plan-name {
        font-size: 23px;
    }

    .price {
        font-size: 27px;
    }

    .package-button {
        min-height: 50px;

        font-size: 14px;
    }


}



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

.services-section {
    background: black;
    padding: 100px 5%;
    min-height: 100vh;
    font-family: Arial, sans-serif;
    overflow: hidden;
    padding-top: 40px;
    scroll-margin-top: 100px;
}


/* =================================
   SECTION HEADING
================================= */

.services-heading {
    max-width: 100%;
    margin: 0 auto 30px;
    text-align: center;
}

.small-title {
    color: #087cff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin: 0 0 16px;
}

.services-heading h2 {
    color: white;
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    margin: 0 auto 18px;
}

.heading-text {
    color: #e7ebee;
    font-size: 15px;
    line-height: 1.7;
    max-width: 650px;
    margin: auto;
}


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

.services-container {
    max-width: 1200px;
    margin: auto;

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


/* =================================
   GLASS CARD
================================= */

.service-card {
    position: relative;

    padding: 30px 25px;
    min-height: 190px;

    /* Transparent glass */
    background: rgba(255, 255, 255, 0.058);

    /* Frosted glass */
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    /* Glass border */
    border: 1px solid rgba(255, 255, 255, 0.65);

    border-radius: 20px;

    /* Glass shadow */
    box-shadow:
        0 10px 30px rgba(31, 65, 90, 0.10),
        inset 0 1px 1px rgba(255, 255, 255, 0.5);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


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

.service-card:hover {
    transform: translateY(-7px);

    background: rgba(255, 255, 255, 0.088);

    box-shadow:
        0 18px 40px rgba(31, 65, 90, 0.16),
        inset 0 1px 1px rgba(255, 255, 255, 0.7);
}


/* =================================
   ICON BOX
================================= */

.service-icon {
    width: 46px;
    height: 46px;

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

    background: #087cff;
    color: #ffffff;

    border-radius: 12px;

    font-size: 18px;

    margin-bottom: 18px;

    box-shadow:
        0 7px 18px rgba(8, 124, 255, 0.25);

    transition: 0.3s ease;
}


/* Icon hover */

.service-card:hover .service-icon {
    transform: scale(1.06);
}


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

.service-card h3 {
    color: #b0c3ef;

    font-size: 17px;
    font-weight: 700;

    margin: 0 0 10px;
}


/* =================================
   CARD DESCRIPTION
================================= */

.service-card p {
    color: white;

    font-size: 14px;
    line-height: 1.6;

    margin: 0 0 20px;
}


/* =================================
   GET STARTED LINK
================================= */

.service-card a {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: #087cff;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none;

    transition: 0.3s ease;
}


/* Arrow */

.service-card a i {
    font-size: 11px;

    transition: transform 0.3s ease;
}


/* Link hover */

.service-card a:hover {
    color: #005dcc;
}

.service-card a:hover i {
    transform: translateX(5px);
}


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

@media (max-width: 900px) {

    .services-section {
        padding: 80px 5%;
    }

    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-heading h2 {
        font-size: 36px;
    }
}


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

@media (max-width: 600px) {

    .services-section {
        padding: 70px 20px;
    }

    .services-heading {
        margin-bottom: 40px;
    }

    .services-heading h2 {
        font-size: 30px;
    }

    .heading-text {
        font-size: 14px;
    }

    .services-container {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .service-card {
        padding: 26px 22px;
    }

}










/* =========================
   PORTFOLIO SECTION
========================= */

.portfolio-section {
    width: 100%;
    background: #ffffff;
    padding: 30px 80px;
    scroll-margin-top: 100px;
}







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

.portfolio-header {
    text-align: center;
    justify-content: space-between;
    align-items: stretch;
    gap: 50px;
    margin-bottom: 32px;
    max-width: 100%;
    padding-left: 90px;
}

.portfolio-heading {
    flex: 1;
}

.portfolio-eyebrow {
    display: block;
    margin-bottom: 12px;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #005dcc;
}

.portfolio-heading h2 {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;

    color: black;
}

.portfolio-intro {
    max-width: 100%;
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    padding-top: 15px;

    color: #455064;
}


/* =========================================
   PORTFOLIO HEADER — MOBILE
========================================= */

@media (max-width: 1000px) {

    .portfolio-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        margin-bottom: 35px;
        padding-left: 5px;
        text-align: left;
    }

    .portfolio-heading {
        width: 100%;
    }

    .portfolio-eyebrow {
        margin-bottom: 10px;
        font-size: 11px;
        letter-spacing: 1.8px;
    }

    .portfolio-heading h2 {
        font-size: 34px;
        line-height: 1.15;
    }

    .portfolio-intro {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.7;
        padding-top: 0px;
    }
}


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

@media (max-width: 480px) {

    .portfolio-header {
        gap: 20px;
        margin-bottom: 30px;
    }

    .portfolio-heading h2 {
        font-size: 30px;
    }

    .portfolio-intro {
        font-size: 13px;
        line-height: 1.7;
    }
}









.portfolio-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;

    /* 3 cards in one row */
    grid-template-columns: repeat(3, 1fr);

    gap: 35px;
}


/* =========================
   PORTFOLIO CARD
========================= */

.portfolio-card {
    position: relative;

    width: 100%;

    /* Makes the cards bigger */
    aspect-ratio: 0.68;

    overflow: hidden;

    border-radius: 20px;

    background: #06122f;

    border: 1px solid #e5e7eb;

    cursor: pointer;
}


/* =========================
   IMAGE
========================= */

.portfolio-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: top center;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


/* =========================
   LIGHTER HOVER EFFECT
========================= */

.portfolio-card:hover .portfolio-image {
    transform: scale(1.03);

    /* Much lighter than before */
    filter: brightness(0.99);
}


/* =========================
   OVERLAY
========================= */

.portfolio-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    /*
       Lighter transparent overlay
    */

    background: linear-gradient(
        to top,
        rgba(3, 12, 38, 0.88) 0%,
        rgba(3, 12, 38, 0.68) 28%,
        rgba(3, 12, 38, 0.20) 60%,
        rgba(3, 12, 38, 0) 100%
    );

    opacity: 0;

    transition: opacity 0.45s ease;
}


/* Show information */

.portfolio-card:hover .portfolio-overlay {
    opacity: 1;
}


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

.portfolio-content {
    width: 100%;

    padding: 32px;

    transform: translateY(25px);

    transition: transform 0.45s ease;
}


.portfolio-card:hover .portfolio-content {
    transform: translateY(0);
}


/* Category */

.portfolio-category {
    display: block;

    margin-bottom: 10px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #4c9eff;
}


/* Title */

.portfolio-content h3 {
    margin: 0 0 12px;

    font-size: 27px;

    line-height: 1.2;

    font-weight: 700;

    color: #ffffff;
}


/* Description */

.portfolio-content p {
    margin: 0 0 22px;

    max-width: 450px;

    font-size: 14px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.85);
}


/* View Project */

.portfolio-link {
    display: inline-flex;

    align-items: center;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    color: #ffffff;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.portfolio-link:hover {
    color: #4c9eff;

    transform: translateX(5px);
}


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

@media (max-width: 1050px) {

    .portfolio-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .portfolio-card {
        aspect-ratio: 0.70;
    }

}


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

@media (max-width: 650px) {

    .portfolio-section {
        padding: 40px 18px;
    }

    .portfolio-container {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .portfolio-card {
        aspect-ratio: 0.72;

        border-radius: 17px;
    }


    /* Disable desktop hover */

    .portfolio-card:hover .portfolio-image {
        transform: none;

        filter: none;
    }

    .portfolio-card:hover .portfolio-overlay {
        opacity: 0;
    }

    .portfolio-card:hover .portfolio-content {
        transform: translateY(25px);
    }


    /* Mobile scroll animation */

    .portfolio-card.is-visible .portfolio-overlay {
        opacity: 1;
    }

    .portfolio-card.is-visible .portfolio-content {
        transform: translateY(0);
    }

    .portfolio-card.is-visible .portfolio-image {
        transform: scale(1.03);

        filter: brightness(0.99);
    }


    .portfolio-content {
        padding: 25px;
    }


    .portfolio-content h3 {
        font-size: 23px;
    }


    .portfolio-content p {
        font-size: 13px;

        line-height: 1.6;
    }
}











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

.questions-section {
    width: 100%;
    padding: 40px 30px;
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(0, 102, 255, 0.35),
            transparent 40%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(0, 157, 255, 0.20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #000000 0%,
            #020d2b 45%,
            #031a4d 100%
        );
    position: relative;
    overflow: hidden;
}


/* =========================================
   SUBTLE BACKGROUND GLOW
========================================= */

.questions-section::before {
    content: "";
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(0, 119, 255, 0.15);
    border-radius: 50%;
    filter: blur(100px);
    top: -180px;
    right: -120px;
    pointer-events: none;
}

.questions-section::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(0, 70, 180, 0.12);
    border-radius: 50%;
    filter: blur(90px);
    bottom: -180px;
    left: -100px;
    pointer-events: none;
}


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

.questions-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


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

.questions-content {
    max-width: 100%;
    text-align: center;
    padding-top: 0;
}


/* =========================================
   HEADING
========================================= */

.questions-content h2 {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -2px;
    padding-top: 0;
}


/* =========================================
   DESCRIPTION
========================================= */

.questions-description {
    margin: 0 auto 40px;
    max-width: 580px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 1.15rem;
    line-height: 1.7;
    font-weight: 400;
}


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

.questions-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    padding: 16px 20px 16px 28px;

    background: #ffffff;
    color: #020d2b;

    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;

    border-radius: 50px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


/* =========================================
   ARROW CIRCLE
========================================= */

.questions-button span {
    width: 42px;
    height: 42px;

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

    background: #020d2b;
    color: #ffffff;

    border-radius: 50%;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


/* =========================================
   ARROW
========================================= */

.questions-button i {
    font-size: 15px;
    transition: transform 0.3s ease;
}


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

.questions-button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 40px rgba(0, 110, 255, 0.25);
}

.questions-button:hover span {
    background: #006eff;
}

.questions-button:hover i {
    transform: translate(3px, -3px);
}


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

@media (max-width: 768px) {

    .questions-section {
        padding: 90px 20px;
    }

    .questions-content h2 {
        letter-spacing: -1px;
    }

    .questions-description {
        font-size: 1rem;
        margin-bottom: 32px;
    }

}


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

@media (max-width: 480px) {

    .questions-section {
        padding: 75px 18px;
    }

    .questions-content h2 {
        font-size: 2.5rem;
        line-height: 1.1;
    }

    .questions-description {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .questions-button {
        padding: 13px 15px 13px 22px;
        font-size: 0.95rem;
        gap: 14px;
    }

    .questions-button span {
        width: 38px;
        height: 38px;
    }

}



/* FAQ SECTION */
.faq-section {
    width: 100%;
    padding: 90px 5%;
    background: #ffffff;
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 40px;
    box-sizing: border-box;
}

/* LEFT TITLE */
.faq-title h2 {
    margin: 0;
    color: #000000;
    font-size: 55px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -2px;
}

/* FAQ CONTAINER */
.faq-container {
    width: 100%;
    max-width: 850px;
}

/* EACH FAQ */
.faq-item {
    background: #eef7ff;
    border-radius: 20px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #d7ebfa;
    transition: 0.3s ease;
}

.faq-item:hover {
    border-color: #1687d9;
}

/* QUESTION BUTTON */
.faq-question {
    width: 100%;
    border: none;
    background: transparent;
    padding: 25px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #000000;
    font-size: 17px;
    text-align: left;
    font-family: inherit;
}

/* ARROW */
.faq-icon {
    color: #006dcc;
    font-size: 22px;
    font-weight: bold;
    transition: 0.3s ease;
}

/* ANSWER */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 28px;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-answer p {
    margin: 0;
    padding-bottom: 25px;
    color: #000000;
    font-size: 16px;
    line-height: 1.8;
}

/* ACTIVE FAQ */
.faq-item.active {
    background: #e5f3ff;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding-top: 2px;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    color: #0059b3;
}


/* TABLET */
@media (max-width: 900px) {
    .faq-section {
        grid-template-columns: 1fr;
        padding: 70px 5%;
    }

    .faq-title h2 {
        font-size: 48px;
    }

    .faq-container {
        max-width: 100%;
    }
}


/* MOBILE */
@media (max-width: 600px) {
    .faq-section {
        padding: 60px 20px;
        gap: 35px;
    }

    .faq-title h2 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .faq-question {
        padding: 21px 20px;
        font-size: 15px;
    }

    .faq-answer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .faq-answer p {
        font-size: 14px;
        line-height: 1.7;
    }

    .faq-item {
        border-radius: 16px;
    }
}



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

.footer {
    position: relative;
    background: #eef7ff;
    color: black;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}


/* Main Footer Container */

.footer-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 75px 40px 55px;

    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 70px;
}


/* Footer Columns */

.footer-column {
    min-width: 0;
}


/* Logo */

.footer-logo {
    display: inline-block;
    margin-bottom: 25px;
}


/* Logo Image */

.footer-logo img {
    width: 130px;
    height: auto;
    display: block;
    object-fit: contain;
}


/* Description */

.footer-brand p {
    max-width: 350px;

    margin: 0;

    color: black;

    font-size: 16px;
    line-height: 1.6;
}


/* Footer Headings */

.footer-column h3 {
    margin: 0 0 22px;

    font-size: 16px;
    font-weight: 700;

    color: black;
}


/* Lists */

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* List Items */

.footer-column ul li {
    margin-bottom: 17px;
}


/* Links */

.footer-column ul li a {
    color: black;
    text-decoration: none;

    font-size: 16px;

    transition: 0.3s ease;
}


/* Link Hover */

.footer-column ul li a:hover {
    color: #1683ff;
}


/* Contact Information */

.contact-info li {
    color: black;
    font-size: 16px;
}


/* ================= SOCIAL ICONS ================= */

.social-icons {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-top: 26px;
}


.social-icons a {
    width: 44px;
    height: 44px;

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

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;

    color: black;

    text-decoration: none;

    font-size: 17px;

    transition: all 0.3s ease;
}


.social-icons a:hover {
    color: #ffffff;

    background: #087cff;

    border-color: #087cff;

    transform: translateY(-3px);
}


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

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);

    padding: 25px 20px;

    text-align: center;
}


.footer-bottom p {
    margin: 0;

    color: black;

    font-size: 10px;
}

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

.back-to-top {
    position: fixed;
    right: 25px;
    bottom: 25px;

    width: 52px;
    height: 52px;

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

    background: #087cff;
    color: #ffffff;

    border-radius: 50%;

    text-decoration: none;
    font-size: 18px;

    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.25);

    /* Hidden at the top */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition: all 0.3s ease;

    z-index: 9999;
}


/* Show button after scrolling */

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Hover */

.back-to-top:hover {
    background: #ffffff;
    color: #087cff;

    transform: translateY(-4px);
}



/* ================= MOBILE FOOTER SPACING ================= */

@media (max-width: 600px) {

    .footer-container {
        grid-template-columns: 1fr;
        padding: 40px 25px 35px;
        gap: 25px;
    }

    /* Footer headings */
    .footer-column h3 {
        margin-bottom: 10px;
    }

    /* Navigation and Services */
    .footer-column ul li {
        margin-bottom: 7px;
    }

    /* Contact */
    .contact-info li {
        margin-bottom: 7px;
    }

    /* Brand description */
    .footer-brand p {
        margin-bottom: 10px;
        line-height: 1.5;
    }

    /* Social icons */
    .social-icons {
        margin-top: 15px;
        gap: 10px;
    }

    /* Bottom footer */
    .footer-bottom {
        padding: 18px 65px 18px 20px;
    }

}

@media (max-width: 600px) {

    .footer-container {
        gap: 18px;
    }

    .footer-column h3 {
        margin-bottom: 7px;
    }

    .footer-column ul li {
        margin-bottom: 4px;
    }

    .contact-info li {
        margin-bottom: 4px;
    }

}






.success-message {
    display: none;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    background: #e8f8ef;
    color: #16803c;
    font-size: 15px;
    line-height: 1.5;
}

.success-message.show {
    display: block;
}





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

.contact-section {
    font-family: "Inter", sans-serif;
    background: #ffffff;
    color: #17213f;
}


.contact-section {
    min-height: 100vh;

    padding: 80px 8%;

    background:
        radial-gradient(
            circle at top left,
            rgba(38, 132, 232, 0.10),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(38, 132, 232, 0.08),
            transparent 35%
        ),

        #ffffff;
}


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

.contact-container {
    max-width: 1200px;

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 70px;

    align-items: center;
}


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

.contact-info {
    width: 100%;
}


/* ================= SMALL TITLE ================= */

.small-title {
    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #2684e8;

    margin-bottom: 15px;
}


/* ================= HEADING ================= */

.contact-info h1 {
    font-size: 38px;

    font-weight: 800;

    line-height: 1.2;

    color: #17213f;

    margin-bottom: 15px;
}


/* ================= DESCRIPTION ================= */

.contact-description {
    font-size: 13px;

    line-height: 1.7;

    color: #718096;

    margin-bottom: 28px;
}


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

.contact-details {
    display: flex;

    flex-direction: column;

    gap: 17px;

    margin-bottom: 25px;
}


.contact-item {
    display: flex;

    align-items: center;

    gap: 13px;

    font-size: 13px;

    color: #53627d;
}


.contact-item i {
    color: #2684e8;

    width: 18px;

    font-size: 14px;
}


/* ================= SOCIAL LINKS ================= */

.social-links {
    display: flex;

    gap: 10px;

    margin-bottom: 25px;
}


.social-links a {
    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: #17213f;

    background: rgba(255, 255, 255, 0.7);

    border: 1px solid rgba(23, 33, 63, 0.12);

    border-radius: 50%;

    box-shadow:
        0 8px 20px
        rgba(31, 38, 135, 0.08);

    transition: 0.3s ease;
}


.social-links a:hover {
    background: #2684e8;

    color: white;

    transform: translateY(-4px);
}


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

.map-container {
    width: 100%;

    height: 280px;

    overflow: hidden;

    border-radius: 18px;

    background: white;

    border: 1px solid rgba(23, 33, 63, 0.08);

    box-shadow:
        0 15px 35px
        rgba(31, 38, 135, 0.12);
}


.map-container iframe {
    width: 100%;

    height: 100%;

    border: 0;

    display: block;
}





/* =========================================
   ANTI-SPAM HONEYPOT
========================================= */

.honeypot-field {
    position: fixed !important;
    top: -10000px !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}



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

.contact-form {
    width: 100%;

    padding: 35px;

    /* Glass background */

    background:
        rgba(255, 255, 255, 0.55);


    /* Glass blur */

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);


    /* Glass border */

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


    border-radius: 22px;


    /* Shadow */

    box-shadow:

        0 20px 50px
        rgba(31, 38, 135, 0.12),

        inset 0 1px 1px
        rgba(255, 255, 255, 0.9);
}


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

.form-group {
    margin-bottom: 20px;
}


/* ================= LABEL ================= */

.form-group label {
    display: block;

    font-size: 12px;

    font-weight: 600;

    color: #24304d;

    margin-bottom: 8px;
}


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

.form-group input,

.form-group select,

.form-group textarea {

    width: 100%;

    padding: 14px;

    font-family: inherit;

    font-size: 13px;

    color: #17213f;

    outline: none;


    /* Glass input */

    background:
        rgba(255, 255, 255, 0.55);


    border:
        1px solid
        rgba(40, 70, 120, 0.15);


    border-radius: 10px;


    transition: 0.3s ease;
}


/* ================= TEXTAREA ================= */

.form-group textarea {
    height: 110px;

    resize: vertical;
}


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

.form-group input::placeholder,

.form-group textarea::placeholder {
    color: #9aa7bd;
}


/* ================= INPUT FOCUS ================= */

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

    border-color: #2684e8;


    box-shadow:

        0 0 0 3px
        rgba(38, 132, 232, 0.12);
}


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

.send-btn {

    border: none;

    outline: none;

    padding: 14px 28px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #3b9cff,
            #176ed0
        );

    color: white;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;


    box-shadow:

        0 10px 25px
        rgba(38, 132, 232, 0.30);


    transition: 0.3s ease;
}


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

.send-btn:hover {

    transform:
        translateY(-3px);


    box-shadow:

        0 15px 30px
        rgba(38, 132, 232, 0.40);
}


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

@media (max-width: 900px) {

    .contact-container {

        grid-template-columns:
            1fr;

        gap: 50px;
    }


    .contact-section {
        padding:
            60px 7%;
    }

}


@media (max-width: 500px) {

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


    .contact-info h1 {
        font-size: 30px;
    }


    .contact-form {
        padding: 22px;
    }


    .map-container {
        height: 240px;
    }

}



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

.hero-text {
    animation:
        heroTextReveal
        1.1s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

.contact-actions {
    animation:
        heroButtonsReveal
        1.1s
        0.25s
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}


@keyframes heroTextReveal {

    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


@keyframes heroButtonsReveal {

    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


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

.hero-text p {
    animation:
        heroParagraph
        1s
        0.35s
        ease
        both;
}

@keyframes heroParagraph {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 0.85;
        transform: translateY(0);
    }

}


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

.services-heading,
.pricing-section > h2,
.portfolio-section > h2,
.faq-title {
    animation-duration: 0.9s;
}


/* =========================================================
   STAT BOXES
   ========================================================= */

.stat-box {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.35s ease;
}

.stat-box:hover {
    transform: translateY(-7px);
}




/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .scroll-reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .stagger-item,
    .faq-item {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero-text,
    .hero-text p,
    .contact-actions {
        animation: none;
    }

}






/* =========================================
   BLOG SECTION
========================================= */

.blog-section {
    width: 100%;
    padding: 80px 40px;
    background:   #faf9f7;
    box-sizing: border-box;
}

.blog-container {
    max-width: 1400px;
    margin: 0 auto;
}


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

.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 50px;
    margin-bottom: 42px;
}

.blog-heading {
    flex: 1;
}

.blog-eyebrow {
    display: block;
    margin-bottom: 12px;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #005dcc;
}

.blog-heading h2 {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 700;

    color: black;
}

.blog-intro {
    max-width: 480px;
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: #455064;
}





/* =========================================
   BLOG GRID
========================================= */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}


/* =========================================
   BLOG CARD
========================================= */

.blog-card {
    background: white;
    border: 1px solid #d7d4ce;
    border-radius: 9px;
    overflow: hidden;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


/* BLUE OUTLINE ON HOVER */

.blog-card:hover {
    border-color: blue;

    box-shadow:
        0 0 0 1px blue,
        0 12px 35px rgba(2, 13, 43, 0.08);

    transform: translateY(-3px);
}


/* =========================================
   BLOG IMAGE
========================================= */

.blog-image {
    width: 100%;
    height: 190px;
    overflow: hidden;
    background: white;
}

.blog-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.03);
}


/* =========================================
   BLOG CONTENT
========================================= */

.blog-content {
    padding: 20px 24px 27px;
}

.blog-category {
    display: block;

    margin-bottom: 19px;

    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;

    color: #005dcc;
}

.blog-content h3 {
    margin: 0 0 12px;

    max-width: 390px;

    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 1.15;
    font-weight: 400;

    color: black;
}

.blog-content p {
    margin: 0;

    min-height: 76px;

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.65;

    color: #596273;
}


/* =========================================
   BLOG META
========================================= */

.blog-meta {
    margin-top: 25px;
    margin-bottom: 25px;

    font-family: Arial, sans-serif;
    font-size: 10px;

    color: #687080;
}


/* =========================================
   READ MORE
========================================= */

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    text-decoration: none;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;

    color: #005dcc;

    transition: gap 0.25s ease;
}

.read-more span {
    font-size: 17px;
    line-height: 1;
}

.read-more:hover {
    gap: 9px;
}


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

@media (max-width: 1000px) {

    .blog-section {
        padding: 70px 25px;
    }

    .blog-header {
        align-items: flex-start;
    }

    .blog-heading h2 {
        font-size: 38px;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


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

@media (max-width: 700px) {

    .blog-section {
        padding: 60px 18px;
    }

    .blog-header {
        display: block;
        margin-bottom: 30px;
    }

    .blog-heading h2 {
        font-size: 34px;
    }

    .blog-intro {
        margin-top: 18px;
        max-width: 100%;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .blog-image {
        height: 210px;
    }

    .blog-content {
        padding: 20px 20px 25px;
    }

    .blog-content h3 {
        font-size: 21px;
    }
}


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

@media (max-width: 400px) {

    .blog-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .blog-heading h2 {
        font-size: 30px;
    }

    .blog-image {
        height: 190px;
    }
}







/* BACKGROUND FROM THE IMAGE */

.blog-hero {
    position: relative;
    background: #0b0b0d;
    overflow: hidden;
    
}

/* Subtle square grid */
.blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 101px 101px;
    background-position: 0 0;

    pointer-events: none;
    z-index: 0;
}

/* Very subtle fade toward the bottom */
.blog-hero::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 65%,
        rgba(11, 11, 13, 0.45) 100%
    );

    pointer-events: none;
    z-index: 0;
}

/* Keep all hero content above the background */
.blog-hero> * {
    position: relative;
    z-index: 1;
}




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

.blog-hero {
    width: 100%;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 150px 9% 60px;
    box-sizing: border-box;
}

.blog-hero-content {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

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

.blog-hero-text {
    max-width: 100%;
}

.blog-hero-text h1 {
    margin: 0 0 25px;
    font-size: clamp(45px, 6vw, 85px);
    line-height: 1.05;
    font-weight: 750;
    letter-spacing: -2px;
    color: white;
}

.blog-hero-text p {
    margin: 0;
    font-size: 17px;
    line-height: 1.8;
    font-weight: 400;
    opacity: 0.85;
    color: rgb(228, 224, 224);
}






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

@media (max-width: 900px) {

    .blog-hero {
        padding: 110px 6% 70px;
    }

    .blog-hero-content {
        gap: 40px;
    }

    .blog-hero-text h1 {
        font-size: clamp(42px, 7vw, 65px);
    }

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

}

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

@media (max-width: 700px) {

    .blog-hero {
        min-height: auto;
        padding: 120px 6% 70px;
    }

    .blog-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }

    .blog-hero-text {
        max-width: 100%;
    }

    .blog-hero-text h1 {
        margin-bottom: 20px;
        margin-top: 50px;
        font-size: clamp(42px, 12vw, 60px);
        line-height: 1.05;
        letter-spacing: -1.5px;
    }

    .blog-hero-text p {
        font-size: 17px;
        line-height: 1.7;
    }

}

/* =========================
   SMALL PHONES
========================= */

@media (max-width: 420px) {

    .blog-hero {
        padding: 105px 5% 90px;
    }

    .blog-hero-content {
        gap: 30px;
    }

    .blog-hero-text h1 {
        font-size: 36px;
        line-height: 1.2;
    }

    .blog-hero-text p {
        font-size: 15px;
        line-height: 1.65;
    }

}






/* =====================================================
   ARTICLE PAGE
===================================================== */

:root {
    --article-blue: #06122f;
    --article-dark: #101010;
    --article-text: #444;
    --article-light: #777;
    --article-border: #e2e2e2;
    --article-background: #f5f4f1;
}


/* =====================================================
   MAIN SECTION
===================================================== */




/* =====================================
   OPPORTUNITY TABLE
===================================== */

.opportunity-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    font-size: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Table Header */
.opportunity-table thead {
    background: #06122f;
}

.opportunity-table th {
    padding: 16px 18px;
    text-align: left;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Table Cells */
.opportunity-table td {
    padding: 15px 18px;
    border-bottom: 1px solid #e5e7eb;
    color: #333333;
    vertical-align: middle;
}

/* Rank Column */
.opportunity-table td:first-child {
    font-weight: 700;
    color: #06122f;
    width: 70px;
}

/* Opportunity Column */
.opportunity-table td:last-child {
    font-weight: 600;
}

/* Remove border from last row */
.opportunity-table tbody tr:last-child td {
    border-bottom: none;
}

/* Hover Effect */
.opportunity-table tbody tr {
    transition: all 0.25s ease;
}

.opportunity-table tbody tr:hover {
    background: #f3f8fb;
    transform: scale(1.01);
}


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

@media (max-width: 600px) {

    .opportunity-table {
        font-size: 13px;
        margin: 25px 0;
    }

    .opportunity-table th,
    .opportunity-table td {
        padding: 12px 10px;
    }

    .opportunity-table th:first-child,
    .opportunity-table td:first-child {
        width: 45px;
    }

    .opportunity-table td:first-child {
        text-align: center;
    }

}





.article-page {
    width: 100%;
    padding: 70px 20px;
    background: var(--article-background);
    box-sizing: border-box;
}

.article-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}


/* =====================================================
   ARTICLE
===================================================== */

.article-post {
    background: #ffffff;
    border: 1px solid var(--article-border);
}


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



.article-meta {
    display: flex;
    gap: 25px;

    margin-top: 22px;

    font-family: Arial, sans-serif;
    font-size: 11px;

    color: #777;
}

.article-meta i {
    margin-right: 5px;
    color: white;
}


/* =====================================================
   ARTICLE BODY
===================================================== */

.article-body {
    padding: 35px 55px 50px;
}

.article-body p {
    margin: 0 0 20px;

    font-family: Arial, sans-serif;
    font-size: 15px;
    line-height: 1.85;

    color: var(--article-text);
}

.article-body strong {
    color: #222;
}


/* =====================================================
   HEADINGS
===================================================== */

.article-body h2 {
    margin: 42px 0 18px;

    padding-top: 8px;

    font-family: Arial, sans-serif;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 600;

    color: var(--article-dark);

    border-top: 1px solid #eeeeee;
}

.article-body h3 {
    margin: 28px 0 10px;

    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 600;

    color: var(--article-blue);
}


/* =====================================================
   LISTS
===================================================== */

.article-body ul {
    margin: 10px 0 25px;
    padding-left: 22px;
}

.article-body li {
    margin-bottom: 8px;

    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.7;

    color: var(--article-text);
}

.article-body li::marker {
    color: var(--article-blue);
}


/* =====================================================
   CTA LIST
===================================================== */

.cta-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin: 20px 0 25px;
}

.cta-list span {
    padding: 8px 12px;

    border: 1px solid #d8d8d8;
    background: #fafafa;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;

    color: var(--article-blue);
}


/* =====================================================
   HIGHLIGHT BOX
===================================================== */

.highlight-box {
    display: flex;
    flex-direction: column;
    gap: 13px;

    margin: 25px 0;
    padding: 22px 25px;

    background: #f8f8f8;

    border-left: 3px solid var(--article-blue);
}

.highlight-box strong {
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;

    color: #222;
}


/* =====================================================
   FINAL HIGHLIGHT
===================================================== */

.final-highlight {
    margin: 30px 0;

    padding: 22px 25px;

    background: #f8f8f8;

    border-left: 3px solid var(--article-blue);
}

.final-highlight strong {
    font-family: Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;

    color: #222;
}


/* =====================================================
   WILLNOVA TECH LINK
===================================================== */

.brand-link {
    color: var(--article-blue);
    font-weight: 700;
    text-decoration: none;

    transition: opacity 0.2s ease;
}

.brand-link:hover {
    opacity: 0.7;
    text-decoration: underline;
}


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

.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding: 20px 55px;

    border-top: 1px solid var(--article-border);
    border-bottom: 1px solid var(--article-border);
}











/* ================================
   ARTICLE SHARE
================================ */

.article-share {
    width: 100%;
    height: 90px;

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

    padding: 0 28px;

    background: #ffffff;
    box-sizing: border-box;
}


/* TEXT */

.share-title {
    font-size: 15px;
    font-weight: 600;
    color: #111111;
}


/* BUTTONS */

.share-buttons {
    display: flex;
    align-items: center;

    gap: 10px;
}


/* EACH BOX */

.share-button {
    width: 43px;
    height: 43px;

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

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #d8d8d8;

    color: #181818;

    text-decoration: none;

    transition: all 0.25s ease;
}


/* ICON */

.share-button i {
    font-size: 16px;
}


/* HOVER */

.share-button:hover {
    background: #f5f5f5;
    border-color: #bdbdbd;
}


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

@media (max-width: 600px) {

    .article-share {
        height: 70px;
        padding: 0 15px;
    }

    .share-title {
        font-size: 13px;
    }

    .share-buttons {
        gap: 6px;
    }

    .share-button {
        width: 36px;
        height: 36px;
    }

    .share-button i {
        font-size: 14px;
    }

}


/* ================================
   SMALL PHONES
================================ */

@media (max-width: 400px) {

    .article-share {
        padding: 0 10px;
    }

    .share-title {
        font-size: 12px;
    }

    .share-buttons {
        gap: 4px;
    }

    .share-button {
        width: 33px;
        height: 33px;
    }

    .share-button i {
        font-size: 13px;
    }

}












/* =====================================================
   COMMENTS SECTION
===================================================== */

.comments-section {
    padding: 40px 55px 55px;
}

.comments-heading {
    margin-bottom: 25px;
}

.comments-heading h2 {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 23px;
    font-weight: 500;

    color: var(--article-dark);
}


/* =====================================================
   COMMENT LIST
===================================================== */

.comments-list {
    display: flex;
    flex-direction: column;

    gap: 15px;

    margin-bottom: 45px;
}

.no-comments {
    padding: 20px;

    background: #f8f8f8;

    border-left: 3px solid var(--article-blue);

    font-family: Arial, sans-serif;
    font-size: 13px;

    color: #777;
}


/* =====================================================
   SINGLE COMMENT
===================================================== */

.comment-item {
    padding: 20px;

    border: 1px solid #e4e4e4;
    background: #fff;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;
}

.comment-name {
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;

    color: var(--article-dark);
}

.comment-date {
    font-family: Arial, sans-serif;
    font-size: 10px;

    color: #999;
}

.comment-text {
    margin: 0;

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1.7;

    color: #555;
}


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

.comment-form-wrapper {
    padding-top: 30px;

    border-top: 1px solid var(--article-border);
}

.comment-form-wrapper h3 {
    margin: 0 0 7px;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 500;

    color: var(--article-dark);
}

.comment-note {
    margin: 0 0 25px;

    font-family: Arial, sans-serif;
    font-size: 11px;

    color: #888;
}


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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;

    color: #444;
}

.form-group input,
.form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 12px 13px;

    border: 1px solid #dddddd;
    border-radius: 0;

    background: #ffffff;

    outline: none;

    font-family: Arial, sans-serif;
    font-size: 12px;

    color: #333;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input {
    height: 43px;
}

.form-group textarea {
    resize: vertical;
    min-height: 130px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--article-blue);

    box-shadow:
        0 0 0 2px rgba(0, 93, 204, 0.08);
}


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

.comment-submit {
    padding: 12px 22px;

    border: none;

    background: var(--article-blue);
    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.comment-submit:hover {
    background: #004da8;
    transform: translateY(-1px);
}


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

@media (max-width: 700px) {

    .article-page {
        padding: 25px 12px;
    }


    .article-meta {
        flex-wrap: wrap;
        gap: 12px;
    }

    .article-body {
        padding: 25px 22px 35px;
    }

    .article-body p {
        font-size: 14px;
        line-height: 1.8;
    }

    .article-body h2 {
        font-size: 20px;
        margin-top: 35px;
    }

    .article-body h3 {
        font-size: 16px;
    }

    .article-footer {
        flex-direction: column;
        align-items: flex-start;

        padding: 18px 22px;
    }

    .comments-section {
        padding: 30px 22px 40px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .comment-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}











/* BACKGROUND FROM THE IMAGE */

.blog-hero2 {
    position: relative;
    background: #0b0b0d;
    overflow: hidden;
    
}

/* Subtle square grid */
.blog-hero2::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );

    background-size: 101px 101px;
    background-position: 0 0;

    pointer-events: none;
    z-index: 0;
}

/* Very subtle fade toward the bottom */
.blog-hero2::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 65%,
        rgba(11, 11, 13, 0.45) 100%
    );

    pointer-events: none;
    z-index: 0;
}

/* Keep all hero content above the background */
.blog-hero2> * {
    position: relative;
    z-index: 1;
}




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

.blog-hero2 {
    width: 100%;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
   
    box-sizing: border-box;
}

.blog-hero-content {
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

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

.blog-hero-header {
    max-width: 100%;
    padding-left: 200px;
    padding-top: 150px;
    padding-bottom: 100px;
   
}

.blog-hero-header h1 {
    margin: 0 0 5px;
    font-size: clamp(30px, 4vw, 60px);
    line-height: 1.0;
    font-weight: 500;
    letter-spacing: -2px;
    color: white;
}





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

@media (max-width: 900px) {

    .blog-hero2 {
        padding: 110px 6% 70px;
    }

    .blog-hero-content {
        gap: 40px;
    }

    .blog-hero-header h1 {
        font-size: clamp(42px, 7vw, 65px);
    }


    .blog-hero-header {
    max-width: 100%;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
   
}


}

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

@media (max-width: 700px) {

    .blog-hero2 {
        min-height: auto;
        padding: 120px 6% 70px;
    }

    .blog-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }

    .blog-hero-header {
    max-width: 100%;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
   
}

    .blog-hero-header h1 {
        margin-bottom: 20px;
        margin-top: 50px;
        font-size: clamp(42px, 12vw, 60px);
        line-height: 1.05;
        letter-spacing: -1.5px;
    }

  

}

/* =========================
   SMALL PHONES
========================= */

@media (max-width: 420px) {

    .blog-hero2 {
        padding: 105px 5% 90px;
    }

    .blog-hero-content {
        gap: 30px;
    }

    .blog-hero-header h1 {
        font-size: 36px;
        line-height: 1.2;
    }

   

}





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

/* Hidden state */
.scroll-reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.stagger-item {
    opacity: 0;

    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Normal animation - moves upward */
.scroll-reveal {
    transform: translateY(45px);
}


/* Slide in from left */
.reveal-left {
    transform: translateX(-55px);
}


/* Slide in from right */
.reveal-right {
    transform: translateX(55px);
}


/* Slight zoom animation */
.reveal-scale {
    transform: scale(0.94);
}


/* Staggered elements */
.stagger-item {
    transform: translateY(45px);
}


/* Visible state */
.scroll-reveal.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible,
.stagger-item.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}


/* =========================================================
   STAGGER DELAYS
   ========================================================= */

.stagger-item:nth-child(1) {
    transition-delay: 0.05s;
}

.stagger-item:nth-child(2) {
    transition-delay: 0.12s;
}

.stagger-item:nth-child(3) {
    transition-delay: 0.19s;
}

.stagger-item:nth-child(4) {
    transition-delay: 0.26s;
}

.stagger-item:nth-child(5) {
    transition-delay: 0.33s;
}

.stagger-item:nth-child(6) {
    transition-delay: 0.40s;
}

.stagger-item:nth-child(7) {
    transition-delay: 0.47s;
}

.stagger-item:nth-child(8) {
    transition-delay: 0.54s;
}


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

@media (max-width: 700px) {

    .reveal-left {
        transform: translateX(-30px);
    }

    .reveal-right {
        transform: translateX(30px);
    }

    .scroll-reveal,
    .stagger-item {
        transform: translateY(30px);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .scroll-reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .stagger-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}