/*================================================
                   CORE VARIABLES
================================================*/
:root {
    /*#region CUSTOM COLORS*/
    --sb-blue: #3f78e0;
    --sb-hover: #3f78e0;
    --sb-dark: #343f52;
    --sb-body: #60697b;
    --sb-bg-dark: #262b32;
    --sb-border: rgba(164, 174, 198, 0.2);
    --sb-purple: #6a6adf;
    --sb-megenta: #e668b3;
    --sb-bg-light: #fff;
    --sb-body-bg: #f0f0f8;
    /*#endregion*/
    /*#region BOOTSTRAP 5 COLORS*/
    /*      Core colors 
    -----------------------*/
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    /* Emphasis colors (darker shade for better text contrast)
    -----------------------------------------------------------*/
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b3035;
    --bs-success-text-emphasis: #0f5132;
    --bs-danger-text-emphasis: #842029;
    --bs-warning-text-emphasis: #664d03;
    --bs-info-text-emphasis: #055160;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #1a1a1a;
    /*  Subtle background colors
    -------------------------------*/
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-light-bg-subtle: #f8f9fa;
    --bs-dark-bg-subtle: #d3d3d4;
    /* Subtle border colors
    ------------------------*/
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-warning-border-subtle: #ffe69c;
    --bs-info-border-subtle: #9eeaf9;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    /*#endregion*/

    --section-base-size: 1.8em;
    --section-title: calc(var(--section-base-size) * 1.2);
    --section-subtitle: calc(var(--section-base-size) * 0.6);
    --card-base-size: 10px;
    --card-title: calc(var(--card-base-size) * 2.2);
    --card-description: calc(var(--card-base-size) * 1.4);
    --heading-text: 2rem;
    --sub-heading-text: 1.5rem;
    --description-text: 14px;
    --head-font: "Manrope", sans-serif;
    --text-xxl: 1.2rem;
    --text-lg: 1rem;
    --text-md: 0.9rem;
    --text-sm: 0.8rem;
    --text-xs: 0.7rem;
}



/*================================================
                    HTML BODY
================================================*/
/*#region HTML BODY*/
body {
    font-family: "Manrope", sans-serif;
    background-color: #f0f0f8;
}


/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-purple) var(--sb-body-bg);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--sb-body-bg);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient( 180deg, var(--sb-purple), var(--sb-magenta) );
    border-radius: 10px;
    border: 2px solid var(--sb-body-bg);
    box-shadow: inset 0 0 4px rgba(255,255,255,0.35);
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( 180deg, var(--sb-magenta), var(--sb-purple) );
    }
/*#endregion*/

/*================================================
                      NAVBAR
================================================*/
/*#region BASE NAVBAR */
.dropdown-toggle::after {
    display: none !important;
}


/* --- NAVBAR STRUCTURAL FIXES --- */
.navbar {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    background: transparent;
    transition: all 0.35s ease-in-out;
}

    .navbar.navbar-sticky {
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px);
        box-shadow: 0 0 1.25rem rgba(30, 34, 40, 0.04);
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

.navbar-brand {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0;
}

    .navbar-brand img {
        height: 100%;
        width: auto;
        max-width: 280px;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    .navbar-brand:hover img {
        transform: translateY(-1px) scale(1.02);
    }



/* --- NAV LINKS --- */
.navbar-nav .nav-link {
    font-weight: 500;
    color: var(--sb-dark);
    font-size: var(--text-md);
    padding: 0.6rem 1rem !important;
    transition: color 0.2s;
}

    .navbar-nav .nav-link:hover {
        color: var(--sb-blue);
    }

    .navbar-nav .nav-link i {
        transition: transform 0.25s ease;
    }

.navbar .dropdown-item {
    font-weight: 500;
    font-size: var(--text-sm);
    transition: all 0.3s ease-in-out;
}

    .navbar .dropdown-item:hover {
        background: transparent;
        color: var(--sb-purple);
    }

.navbar-nav .dropdown:hover > .nav-link i,
.navbar-nav .dropdown > .dropdown-menu:hover ~ .nav-link i {
    transform: rotate(180deg);
    color: var(--sb-blue);
}

.navbar-nav .dropdown:hover > .nav-link,
.navbar-nav .dropdown > .dropdown-menu:hover ~ .nav-link {
    color: var(--sb-blue);
}

.offcanvas {
    z-index: 2000 !important;
}

@media (max-width: 991.98px) {
    .navbar.navbar-sticky {
        backdrop-filter: none;
    }
}


/*#endregion*/

/*#region MEGA MENU OF NAVBAR*/
/* --- MEGA MENU MAGIC (THE FIX) --- */
@media (min-width: 992px) {
    .navbar .container {
        position: relative;
    }

    .nav-item.dropdown-mega {
        position: static;
    }

    .dropdown-mega .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 15px;
        right: 15px;
        width: auto;
        margin-top: 10px;
        border: none;
        border-radius: 0.6rem;
        box-shadow: 0 0 3rem rgba(30, 34, 40, 0.08);
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.25s ease;
    }

    /* Hover Animation */
    .navbar-nav .dropdown:hover > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}


@media (min-width: 992px) {
    /* All dropdowns hover */
    .navbar-nav .dropdown:hover > .dropdown-menu {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Dropend hover */
    .dropdown-menu .dropend:hover > .dropdown-menu {
        display: block;
        left: 100%;
        top: 0;
    }
}



/* --- MENU THEMES --- */
.dropdown-menu-dark {
    background-color: var(--sb-bg-dark) !important;
    color: #fff;
    padding: 2rem !important;
}

.scroll-area {
    max-height: 460px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


    .scroll-area::-webkit-scrollbar {
        display: none;
    }


/* --- SOLUTION IMAGE CARDS --- */
.solution-card {
    margin-top: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.4rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    aspect-ratio: 16 / 10;
}

    .solution-card img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        /*        transform: translateZ(0);
        backface-visibility: hidden;*/
    }

    .solution-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

.solution-title {
    font-size: 0.7rem;
    font-weight: 500;
    color: #fff;
    margin-top: 0.2rem;
    display: block;
    text-align: center;
    text-decoration: none;
}
/*#endregion*/

/*#region NAVBAR PRODUCTS*/
/*.dropdown-menu-light {
    background-color: var(--sb-bg-light) !important;
    color: var(--sb-dark);
    padding: 1rem !important;
}*/

/* ---------- CARD ---------- */
.product-link {
    text-decoration: none;
    display: block;
    text-align: center;
    color: var(--sb-dark);
    font-weight: 500;
}

/* ---------- ICON ---------- */
.product-icon {
    position: relative;
    height: 100px;
    border-radius: 0.4rem;
    overflow: hidden;
    /* base shadow */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 10px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}


    /* IMAGE – FIXED */
    .product-icon img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 1;
        filter: grayscale(100%) contrast(100%);
        transition: filter 0.3s ease;
    }

    /* DARK OVERLAY */
    .product-icon::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgb(255, 255, 255, 0.1);
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 2;
    }

/* INFO PANEL (START BOTTOM) */
.product-info {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0.5rem;
    color: #000;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.45s ease, opacity 0.45s ease;
}

/* ---------- HOVER ---------- */
.product-link:hover .product-icon::before {
    opacity: 1;
    backdrop-filter: blur(10px);
}

.product-link:hover .product-info {
    transform: translateY(0);
    opacity: 1;
}

.product-link:hover .product-icon {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18), 0 20px 45px rgba(0, 0, 0, 0.22);
    transform: translateY(-3px);
}

    .product-link:hover .product-icon img {
        filter: grayscale(20%);
    }

/* ---------- TEXT ---------- */
.product-info h6 {
    font-size: 0.8rem;
    margin: 0;
    font-weight: 600;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

.product-info p {
    font-size: 0.6rem;
    margin-top: 4px;
    line-height: 1.3;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
}

.product-title {
    display: block;
    margin-top: 6px;
    font-size: var(--text-xs);
    color: var(--sb-bg-light)
}


/* SVG Styling for Wireframes */

/* --- BUTTONS --- */
.btn-primary {
    background-color: var(--sb-blue);
    border-color: var(--sb-blue);
    border-radius: 50rem;
    padding: 0.5rem 1.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 0 0 0 rgba(63, 120, 224, 0);
    transition: all 0.5s ease-in-out;
}

    .btn-primary:hover {
        background-color: #3467c5;
        transform: translateY(-2px);
        box-shadow: 0 0.25rem 0.75rem rgba(30, 34, 40, 0.15);
    }
/*#endregion*/

/*#region MOBILE & TABLET RESPONSIVE NAVBAR*/
/* ========================================
   MOBILE & TABLET RESPONSIVE NAVBAR
======================================== */
@media (max-width: 991.98px) {
    /* Offcanvas base */
    .offcanvas {
        width: 85% !important;
    }

    .navbar-nav {
        gap: 0.25rem;
    }

        /* Disable hover logic */
        .navbar-nav .dropdown:hover > .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: none;
        }

    /* Dropdown menu reset */
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none;
        margin: 0.25rem 0 0.75rem;
        padding: 0.75rem 0.75rem;
        border-radius: 0.5rem;
        box-shadow: none !important;
    }

    /* Show dropdown when opened */
    .dropdown.show > .dropdown-menu {
        display: block;
    }

    /* Mega menu becomes normal list */
    /*    .dropdown-mega .dropdown-menu {
        background: transparent !important;
        padding: 0 !important;
    }

    .dropdown-menu-dark {
        background: #f8f9fa !important;
        color: #000;
    }

    .dropdown-menu-light {
        background: #f8f9fa !important;
        color: #000;
    }*/

    /* Demo cards stack */
    /*    .solution-card {
        margin-bottom: 0.75rem;
    }

    .solution-title {
        color: #000;
    }*/

    /* Blocks grid */
    .block-link {
        color: #000;
    }

    .block-icon {
        background: #e9ecef;
    }
}

@media (min-width: 992px) {
    .border-lg-start {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
}

.dropdown-mega .module-header {
    color: var(--sb-purple);
    margin-bottom: 8px;
}
/*#endregion*/

/*#region FOOTER*/
#site-footer {
    background: linear-gradient(180deg, #f7f9ff, #eef2fb);
    color: #0b1020;
    padding: 70px 0 25px;
    font-family: Arial, sans-serif;
    border-top: 1px solid #e5e7ef;
}

    #site-footer .footer-container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
    }

    #site-footer .footer-logo {
        height: 52px;
        margin-bottom: 12px;
    }

    #site-footer .about-text {
        font-size: 0.95rem;
        line-height: 1.7;
        color: #374151;
    }

    #site-footer .footer-col .col-header {
        display: block;
        margin-bottom: 18px;
        font-size: 17px;
        font-weight: 600;
        color: #2563eb;
    }

    /*-------------
         Lists
    -------------*/
    #site-footer .footer-col ul {
        list-style: none;
        padding: 0;
    }

        #site-footer .footer-col ul li {
            margin: 8px 0;
        }

            #site-footer .footer-col ul li a {
                font-size: 0.95rem;
                font-weight: 500;
                color: #1f2937;
                text-decoration: none;
                transition: 0.3s;
            }

                #site-footer .footer-col ul li a:hover {
                    color: #2563eb;
                }

    /*-------------------------------
            ICON TEXT ALIGNMENT 
    -------------------------------*/
    #site-footer .footer-col .contact-info {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

        #site-footer .footer-col .contact-info .icon-div {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2563eb;
            font-size: 16px;
        }

    #site-footer .footer-col.contact a {
        color: var(--sb-dark);
        text-decoration: none;
        font-size: 0.95rem;
    }

        #site-footer .footer-col.contact a:hover {
            color: #2563eb;
        }

    /*-------------------
        Social icons
    -------------------*/
    #site-footer .social-icons a i {
        font-size: 30px;
        margin-right: 12px;
        color: #2563eb;
        transition: all 0.3s ease;
    }

        #site-footer .social-icons a i:hover {
            transform: translateY(-3px) scale(1.05);
        }

    /*-------------------
        Footer bottom
    -------------------*/
    #site-footer .footer-bottom {
        text-align: center;
        margin-top: 50px;
        padding-top: 20px;
        border-top: 1px solid #e5e7ef;
        color: #555;
    }

/*-------------------
     RESPONSIVE 
-------------------*/
@media (max-width: 900px) {
    #site-footer .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    #site-footer .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #site-footer .contact-info {
        justify-content: center;
    }

    #site-footer .social-icons {
        justify-content: center;
    }
}

/*-------------------
     DIVIDER 
-------------------*/
.footer-divider {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-bottom: -100px;
}

    .footer-divider svg {
        display: block;
        width: 100%;
        height: 100px;
        z-index: 2;
        filter: drop-shadow(0px -1px 5px rgba(0, 0, 0, 0.3));
    }


/*#endregion*/

/*================================================
                      HOME INTRO
================================================*/
/*#region HOME PAGE*/

/*#region HOME INTRO */
.intro-div-wrapper {
    position: relative;
    overflow: hidden;
}

.home-intro-div {
    box-shadow: inset 300px 10px 100px #fff, inset -300px -100px 100px #fff;
    background: url("../Assets/BackgroundImages/Home_1.png") center center;
    position: relative;
    height: 80vh;
    border-radius: 0 0 6px 6px;
    margin-top: -50px;
}

.intro-div-wrapper .home-intro-div .inner-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50%;
    width: 100%;
    text-transform: uppercase;
    color: var(--sb-dark);
    font-weight: 600;
}

    .intro-div-wrapper .home-intro-div .inner-div .hero-content {
        text-align: center;
        max-width: 720px;
        margin: auto;
        animation: heroFade 1.2s ease-out forwards;
    }

        .intro-div-wrapper .home-intro-div .inner-div .hero-content h1 {
            font-size: clamp(2.2rem, 4vw, 3.2rem);
            font-weight: 700;
            line-height: 1.2;
            color: #2e3445;
            opacity: 0;
            animation: slideUp 1s ease-out forwards;
        }

.intro-div-wrapper .home-intro-div .hero-content h1 span {
    background-image: linear-gradient(120deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    animation: highlight 1.4s ease-out forwards;
}

.intro-div-wrapper .home-intro-div .hero-content p {
    margin-top: 1.2rem;
    font-size: 1.05rem;
    color: #6b7280;
    opacity: 0;
    animation: fadeIn 1.2s ease-out forwards;
    animation-delay: 0.4s;
}

.intro-div-wrapper .home-intro-div .hero-content .button-container {
    margin-top: 50px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

/*    .hero-content .button-container .hero-btn {
        outline: none;
        border: none;
        font-size: var(--text-lg);
        padding: 10px 15px;
        border-radius: 30px;
        color: var(--sb-bg-light);
        font-weight: 500;
        font-style: italic;
        cursor: pointer;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.3s ease;
    }

    .hero-content .button-container .btn-purple {
        background: var(--sb-purple);
    }

    .hero-content .button-container .btn-magenta {
        background: var(--sb-megenta);
    }

    .hero-content .button-container .hero-btn:hover {
        box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }*/

/*    .hero-content .button-container .btn-purple {
        background: var(--sb-purple);
    }

    .hero-content .button-container .btn-magenta {
        background: var(--sb-megenta);
    }*/

.hero-content .button-container .hero-btn {
    font-size: 0.9rem;
    line-height: 1.7rem;
    font-weight: 500;
    display: inline-block;
    outline: none;
    box-sizing: border-box;
    border: none;
    padding: 0.3rem 0.9rem;
    border-radius: 0.2rem;
    background-image: linear-gradient(140deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border: 0px solid #a55d07;
    color: rgb(120, 50, 5);
    background-size: 100% 100%;
    /*        opacity: 0;
        transform: translateY(40px);*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    transition: all 0.3s linear;
    cursor: pointer;
}

    .hero-content .button-container .hero-btn:hover {
        background-size: 120% 130%;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        color: rgba(120, 50, 5, 0.8);
    }

/*   Text Animations
-------------------------*/
@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes highlight {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*#endregion*/

/*#region  FLOATING ICONS */
.intro-div-wrapper .hero-content i {
    position: absolute;
    font-size: var(--text-xxl);
    pointer-events: auto;
    cursor: grab;
    user-select: none;
}

.intro-div-wrapper .hero-content i {
    transition: left 0.15s ease, top 0.15s ease;
}


/*         Float animations
----------------------------------*/
@keyframes float1 {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(10deg);
    }

    100% {
        transform: translateY(0px) rotate(-10deg);
    }
}

@keyframes float2 {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(-15deg);
    }

    100% {
        transform: translateY(0px) rotate(10deg);
    }
}

@keyframes float3 {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }

    100% {
        transform: translateY(0px) rotate(-5deg);
    }
}

/*          Fade-in on load
------------------------------------*/
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: var(--opacity);
        transform: scale(var(--scale));
    }
}
/*#endregion*/

/*#region   HERO COUNTERS */
#home .intro-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /*    margin-top: -20px;*/
    /*    background: var(--sb-body-bg);*/
}

    #home .intro-wrapper .info-div {
        text-align: center;
        padding: 10px;
    }

        #home .intro-wrapper .info-div h2 {
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--sb-purple);
        }

        #home .intro-wrapper .info-div p {
            font-size: 16px;
            letter-spacing: 1px;
            opacity: 0.8;
            font-weight: 500;
            text-transform: uppercase;
            color: var(--sb-dark);
        }
/*#endregion*/

/*#region OUR CORE SERVICES*/
#home #core-service {
    padding: 20px 0 40px;
    background: #ffffff;
}

    #home #core-service .section-title {
        text-align: center;
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 4px;
        background: linear-gradient( 260deg, #8a6b1f, #c9a227, #f4d57a, #fff1b3 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #home #core-service .section-subtitle {
        color: var(--sb-dark);
    }

    /* GRID */
    #home #core-service .core-service-panels {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    /* PANEL */
    #home #core-service .service-panel {
        position: relative;
        background: #ffffff;
        border-radius: 12px;
        padding: 25px 30px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        transition: all 0.4s ease;
        overflow: hidden;
    }

    /* INNER CONTENT */
    #home #core-service .panel-inner {
        position: relative;
        z-index: 2;
    }

    /* NUMBER BADGE */
    #home #core-service .number-badge {
        position: absolute;
        top: 0;
        left: 0;
        width: 6px;
        height: 100%;
        font-size: 0.9rem;
        line-height: 1.7rem;
        font-weight: 500;
        display: inline-block;
        outline: none;
        box-sizing: border-box;
        border: none;
        border-radius: 0.2rem;
        background-image: linear-gradient(140deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
        border: 0px solid #a55d07;
        color: rgb(120, 50, 5);
        background-size: 100% 100%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        transition: all 0.3s linear;
    }

    #home #core-service .service-panel h3,
    #home #core-service .service-panel p,
    #home #core-service .service-panel .service-link,
    #home #core-service .service-panel .icon {
        transition: color 0.35s ease, filter 0.35s ease;
    }

    #home #core-service .service-panel:hover h3,
    #home #core-service .service-panel:hover p,
    #home #core-service .service-panel:hover .service-link {
        color: rgb(120, 50, 5);
    }

    #home #core-service .service-panel:hover .icon {
        filter: brightness(0) invert(1); /* turns icon white */
    }

    #home #core-service .service-panel:hover .number-badge {
        width: 100%;
    }


    /* ICON */
    #home #core-service .service-panel .icon {
        font-size: 24px;
        margin-bottom: 10px;
        background-image: linear-gradient(170deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* TITLE */
    #home #core-service .service-panel h3 {
        font-size: 20px;
        font-weight: 600;
        color: var(--sb-dark);
        margin-bottom: 8px;
    }

    /* TEXT */
    #home #core-service .service-panel p {
        color: var(--sb-dark);
        font-size: var(--card-description);
        line-height: 1.6;
    }

    /* LINK */
    #home #core-service .service-link {
        display: inline-block;
        margin-top: 10px;
        color: #8a6b1f;
        font-weight: 600;
        text-decoration: none;
    }

    /* GRADIENT GLOW ON HOVER */
    #home #core-service .service-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, transparent, rgba(201,162,39,0.2), transparent);
        opacity: 0;
        transition: 0.4s;
    }

    #home #core-service .service-panel:hover::before {
        opacity: 1;
    }

    /* FLOAT ON HOVER */
    #home #core-service .service-panel:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    }

    #home #core-service .service-tags {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

        #home #core-service .service-tags span {
            background: rgba(201,162,39,0.12);
            color: #8a6b1f;
            padding: 6px 10px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

    #home #core-service .service-panel:hover .service-tags span {
        background: rgba(201,162,39,0.59);
    }
/* RESPONSIVE */
@media (max-width: 1100px) {
    #home #core-service .core-service-panels {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #home #core-service .core-service-panels {
        grid-template-columns: 1fr;
    }
}



/*-------------------------
        Divider
-------------------------*/
#home .core-service-divider {
    margin-bottom: -100px;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

    #home .core-service-divider svg {
        width: 100%;
        height: 100px;
        display: block;
        transform: rotate(180deg);
        fill: #fff;
        filter: drop-shadow(0px -1px 5px rgba(0, 0, 0, 0.3));
    }
/*#endregion*/

/*#region  OUR PROCESS SECTION*/
#home #process {
    padding: 80px 20px 40px;
    color: #0b0f1a;
    position: relative;
    background: #fff;
    overflow: hidden;
}

    #home #process .process-container {
        max-width: 1200px;
        margin: auto;
        text-align: center;
    }



    #home #process .section-title {
        font-family: var(--head-font);
        font-size: var(--section-title);
        margin-bottom: 10px;
        font-weight: 700;
        background-image: linear-gradient(130deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #home #process .section-subtitle {
        font-size: var(--section-subtitle);
        color: #475569;
        margin-bottom: 30px;
    }

        #home #process .section-subtitle strong {
            background: linear-gradient( 0deg, #8a6b1f, #c9a227, #f4d57a, #fff1b3 );
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #home #process .timeline {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
        justify-content: center;
    }

    #home #process .step {
        max-width: 380px;
        background: rgba(255, 255, 255, 01);
        backdrop-filter: blur(5px);
        border-radius: 18px;
        padding: 40px 25px;
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    }

        /* ----- GRADIENT BORDER (works with border-radius) ----- */
        #home #process .step::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient( 260deg, #8a6b1f, #c9a227, #f4d57a, #fff1b3 );
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            z-index: 1;
        }

        /* ----- Your existing shine effect (kept exactly) ----- */
        #home #process .step::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 270deg, transparent, #8a6b1f, #c9a227, #f4d57a, #fff1b3, transparent );
            transform: translateX(-110%);
            transition: 0.6s;
            pointer-events: none;
            z-index: 2;
        }

        #home #process .step:hover::before {
            transform: translateX(100%);
        }

        #home #process .step:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(15, 23, 42, 0.25);
        }

        #home #process .step .step-icon i {
            letter-spacing: 2px;
            margin-bottom: 15px;
            font-weight: 600;
            line-height: 35px;
            background: linear-gradient( 260deg, #8a6b1f, #c9a227, #f4d57a, #fff1b3 );
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: all 0.3s ease;
        }

        #home #process .step:hover .step-icon i {
            filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
        }

        #home #process .step h3 {
            font-size: var(--card-title);
            margin-bottom: 10px;
            color: var(--sb-dark);
        }

        #home #process .step p {
            color: var(--sb-dark);
            font-size: var(--card-description);
            line-height: 1.6;
        }

/*-----------------------
     Process Divider
-----------------------*/
#home .process-divider {
    margin-bottom: -100px;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

    #home .process-divider svg {
        width: 100%;
        height: 100px;
        display: block;
        filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.3));
    }

@media (max-width: 768px) {

    #home .process-divider {
        margin-bottom: 0;
    }

    #home #why-choose-us {
        margin-top: 0;
        padding-top: 80px;
    }
}

/*#endregion*/

/*#region WHY CHOOSE US SECTION */
#home #why-choose-us {
    position: relative;
    margin-top: -100px;
    padding: 40px 20px 80px;
    color: #0b0f1a;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4) ), url('/Assets/BackgroundImages/Home/WhyChooseUs.webp');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

    /*----------------------
           Content
    ----------------------*/
    #home #why-choose-us .container {
        position: relative;
        z-index: 1;
    }

    #home #why-choose-us .section-title {
        text-align: center;
        font-size: var(--section-title);
        font-weight: 700;
        font-family: var(--head-font);
        margin-bottom: 10px;
        padding: 5px;
        background-image: linear-gradient(180deg, #a54e07, #b47e11, #bc881b, #a54e07);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /*        text-shadow: 1px 1px rgba(255, 255, 255,1.0);*/
    }

    #home #why-choose-us .section-subtitle {
        text-align: center;
        max-width: 700px;
        margin: 0 auto 30px;
        color: var(--sb-dark);
        font-size: var(--section-subtitle)
    }

    /*---------------------
          Grid Layout
    ---------------------*/
    #home #why-choose-us .why-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: 30px;
    }

    /*----------------------
          Card Design
    ----------------------*/
    #home #why-choose-us .why-card {
        overflow: hidden;
        position: relative;
        border-radius: 16px;
        padding: 30px 20px;
        text-align: center;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
        transition: all 0.35s ease;
    }

        #home #why-choose-us .why-card:hover {
            transform: translateY(-15px) scale(1.02);
            backdrop-filter: blur(20px);
            box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1), -5px -5px 30px rgba(255, 255, 255, 0.4);
        }

        #home #why-choose-us .why-card::before {
            content: "";
            position: absolute;
            inset: -60%;
            border-radius: inherit;
            background: linear-gradient( 120deg, transparent 30%, rgba(255, 255, 255, 0.8), transparent 70% );
            opacity: 0;
            transform: translateX(-120%) rotate(8deg);
            pointer-events: none;
        }

        #home #why-choose-us .why-card:hover::before {
            opacity: 1;
            animation: whyCardGlassShine 0.8s ease forwards;
        }

        #home #why-choose-us .why-card h3 {
            font-size: var(--card-title);
            font-weight: 500;
            color: var(--sb-dark);
        }

        #home #why-choose-us .why-card p {
            font-size: var(--card-description);
            font-weight: 400;
            color: var(--sb-dark);
        }

@keyframes whyCardGlassShine {
    from {
        transform: translateX(-120%) rotate(8deg);
    }

    to {
        transform: translateX(120%) rotate(8deg);
    }
}



/*--------------------
        Icon
 -------------------*/
#home .why-card .icon {
    font-size: 36px;
    display: inline-block;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

#home .why-card:hover .icon {
    filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}

#home .why-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    color: #0b0f1a;
}

#home .why-card p {
    font-size: 15px;
    color: #fff;
    line-height: 1.6;
    font-weight: 500;
}


/*----------------
    Responsive 
----------------*/
@media (max-width: 768px) {
    #home #why-choose-us {
        padding: 60px 15px;
    }

        #home #why-choose-us .section-title {
            font-size: 28px;
        }
}

/*-----------------------
     Process Divider
-----------------------*/
#home .why-us-divider {
    margin-top: -100px;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

    #home .why-us-divider svg {
        width: 100%;
        height: 100px;
        display: block;
        filter: drop-shadow(0px -1px 1px rgba(0, 0, 0, 0.3));
    }

/*#endregion*/

/*#region TESTIMONIALS SECTION*/
#home #testimonials {
    position: relative;
    padding: 40px 20px;
    background: linear-gradient(rgba(255,255,255,0.88), rgba(255,255,255,0.88)), url('/Assets/BackgroundImages/Home/Testimonials.webp');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

    #home #testimonials .section-title {
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 10px;
        background: linear-gradient( 90deg, #8a6b1f, #c9a227, #f4d57a, #fff1b3 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #home #testimonials .section-subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 30px;
        color: #5b5f73;
        font-size: 16px;
    }

/*-----------------------
    CLIENT LOGO STRIP
-----------------------*/
.client-logo-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 10px auto 10px;
    text-align: center;
}

    .client-logo-strip img {
        height: 80px;
        max-width: 180px;
        object-fit: contain;
        filter: grayscale(0.3);
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    .client-logo-strip span {
        font-size: 15px;
        font-weight: 600;
        color: #5b5f73;
        letter-spacing: 0.4px;
        text-transform: uppercase;
    }

    .client-logo-strip img:hover {
        transform: scale(1.08);
        filter: grayscale(0);
    }

/*--------------------
    SOLUTIONS GRID
--------------------*/
#home .testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

#home .testimonial-card {
    background: rgba(255,255,255,0.75);
    border-radius: 16px;
    padding: 28px 26px;
    border: 1px solid rgba(0,0,0, 0.08);
    transition: all 0.35s ease;
}

    #home .testimonial-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.25);
    }

    #home .testimonial-card .icon {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        #home .testimonial-card .icon .stars {
            color: #ffb400;
            font-size: 18px;
            margin-bottom: 14px;
        }

        #home .testimonial-card .icon i {
            font-size: 1.5rem;
            margin-bottom: 15px;
            background-image: linear-gradient(130deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: all 0.3s ease;
        }


    #home .testimonial-card:hover i {
        filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3));
    }

    #home .testimonial-card .quote {
        font-size: var(--card-description);
        line-height: 1.6;
        color: #0b0f1a;
        margin-bottom: 18px;
    }

    #home .testimonial-card .client strong {
        display: block;
        font-size: 16px;
        font-weight: 600;
    }

    #home .testimonial-card .client span {
        font-size: var(--card-description);
        color: #6a6f85;
    }

    #home .testimonial-card .client-meta {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px dashed rgba(0, 0, 0, 0.08);
        font-size: 13px;
        color: #6a6f85;
    }

/*-------------------------
        RESPONSIVE
-------------------------*/
@media (max-width: 768px) {
    #home #testimonials {
        padding: 70px 15px;
    }

        #home #testimonials .section-title {
            font-size: 28px;
        }
}

/*-----------------------
     Process Divider
-----------------------*/
#home .testimonial-divider {
    margin-top: -1px;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

    #home .testimonial-divider svg {
        width: 100%;
        height: 100px;
        display: block;
        filter: drop-shadow(0px -1px 10px rgba(0, 0, 0, 0.3));
    }

/*#endregion*/

/*#region OUR LOCATIONS*/
#home #our-locations {
    padding: 0 0 40px;
    background: #fff;
    overflow: hidden;
}

    #home #our-locations .section-title {
        text-align: center;
        font-size: 2.2rem;
        font-weight: 700;
        margin-bottom: 10px;
        background: linear-gradient( 90deg, #8a6b1f, #c9a227, #f4d57a, #fff1b3 );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #home #our-locations .section-subtitle {
        text-align: center;
        max-width: 780px;
        margin: 0 auto 50px;
        color: #555;
    }

    #home #our-locations .locations-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* MAP CARD */
    #home #our-locations .map-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        padding: 18px;
        transition: transform .3s ease, box-shadow .3s ease;
    }

        #home #our-locations .map-card:hover {
            transform: translateY(-6px) !important;
            box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;
        }

        #home #our-locations .map-card h4 {
            margin-bottom: 12px;
            font-size: 1.1rem;
            font-weight: 600;
        }

        /* IFRAME STYLE */
        #home #our-locations .map-card iframe {
            width: 100%;
            height: 350px;
            border-radius: 12px;
            border: none;
        }

/*-----------------------
     Process Divider
-----------------------*/
#home .location-divider {
    margin-top: -1px;
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

    #home .location-divider svg {
        width: 100%;
        height: 100px;
        display: block;
        filter: drop-shadow(0px -1px 10px rgba(0, 0, 0, 0.3));
    }

/* RESPONSIVE */
@media (max-width: 992px) {
    #home #our-locations .locations-grid {
        grid-template-columns: 1fr;
    }

    #home #our-locations .map-card iframe {
        height: 300px;
    }
}

/*#endregion*/

/*#region   SERVICE AND PRODUCT CAROUSELS */
#home .carousel-wrapper {
    /*    box-shadow: inset -6px -6px 10px rgba(0, 0, 0, 0.12), inset 6px 6px 10px rgba(0, 0, 0, 0.12);
    background: #e6e9ef;
    padding: 10px 0;*/
}

#home .carousel {
    margin: 0px;
    overflow: hidden;
    position: relative;
    width: 100%;
    border-radius: 16px;
    padding: 10px 0;
}

    #home .carousel .track {
        display: flex;
        width: max-content;
        animation: scroll linear infinite;
        will-change: transform;
    }

    #home .carousel .track {
        animation: scroll-left linear infinite;
    }

    #home .carousel.reverse .track {
        animation: scroll-right linear infinite;
    }

        #home .carousel .track:hover,
        #home .carousel.reverse .track:hover {
            animation-play-state: paused;
        }

    #home .carousel .item {
        position: relative;
        height: 220px;
        min-width: clamp(180px, 22vw, 260px);
        aspect-ratio: 5/3;
        margin: 0 10px;
        background: transparent;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 500;
        overflow: hidden;
        border: 1px dashed rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

        /*------------------------------
                    Image Zoom
        ------------------------------*/
        #home .carousel .item .img-div {
            border: none;
            outline: none;
            height: 100%;
            width: 100%;
        }

        #home .carousel .item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.45s cubic-bezier(.25,.8,.25,1);
            will-change: transform;
        }

        #home .carousel .item:hover img {
            transform: scale(1.09);
        }


        /*------------------------------
                Overlay Effect
        ------------------------------*/
        #home .carousel .item .item-overlay {
            position: absolute;
            inset: auto 0 0 0;
            height: 40px;
            padding: 10px 14px;
            background: linear-gradient( to top, rgba(0,0,0,0.85), rgba(0,0,0,0.25) );
            color: #fff;
            overflow: hidden;
            transition: height 0.4s ease, background 0.35s ease;
        }

        /*------------------------------
                Content Wrapper
        ------------------------------*/
        #home .carousel .item .overlay-content {
            transform: translateY(0);
            transition: transform 0.4s ease;
        }

        /*------------------------------
                    Title
        ------------------------------*/
        #home .carousel .item .item-overlay h4 {
            font-size: 15px;
            font-weight: 600;
            margin: 0 0 6px;
        }

        /*------------------------------
                    Paragraph
        ------------------------------*/
        #home .carousel .item .item-overlay p {
            font-size: 13px;
            opacity: 0;
            font-weight: 400;
            letter-spacing: 0.5px;
            transform: translateY(14px);
            pointer-events: none;
            transition: all 0.35s ease;
        }

        /*------------------------------
                    Hover State
        ------------------------------*/
        #home .carousel .item:hover .item-overlay {
            height: 100%;
            background: linear-gradient( to top, rgba(0,0,0,0.69), rgba(0,0,0,0.85) );
        }

        /*--------------------------------------------
            This makes text move up with overlay
        --------------------------------------------*/
        #home .carousel .item:hover .overlay-content {
            transform: translateY(-20px);
        }

        /*------------------------------
                    Reveal text
        ------------------------------*/
        #home .carousel .item:hover p {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            transition-delay: 0.35s;
        }

        /*------------------------------
                   Base button
        ------------------------------*/
        #home .carousel .item .item-overlay a {
            position: absolute;
            right: 14px;
            bottom: 14px;
            padding: 6px 14px;
            border-radius: 20px;
            background: rgba(255,255,255,0.2);
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            text-decoration: none;
            opacity: 0;
            transform: translateY(14px);
            pointer-events: none;
            transition: all 0.35s ease;
            overflow: hidden;
        }

        /*------------------------------------------
                Reveal button on item hover
        ------------------------------------------*/
        #home .carousel .item:hover a {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
            transition-delay: 0.45s;
        }

        /*------------------------------------------------
                Shine effect using pseudo-element
        ------------------------------------------------*/
        #home .carousel .item .item-overlay a::after {
            content: '';
            position: absolute;
            top: 0;
            left: -75%;
            width: 50%;
            height: 100%;
            background: linear-gradient( 120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100% );
            transform: skewX(-25deg);
            transition: all 0.5s ease;
        }

        /*--------------------------------
             Animate shine on hover
        --------------------------------*/
        #home .carousel .item .item-overlay a:hover::after {
            left: 125%;
            transition: all 0.7s ease;
        }

        #home .carousel .item .item-overlay a:hover {
            box-shadow: 0 0 8px rgba(255,255,255,1);
        }


/*-------------------------
        Animations
-------------------------*/
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

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

@keyframes scroll-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/*--------------------------
    Infinite animation
--------------------------*/
@keyframes scroll {
    from {
        transform: translateX(0);
    }

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

/*-------------------------
        Responsive
-------------------------*/
@media (max-width: 1024px) {
    #home .carousel-wrapper {
        grid-template-columns: 1fr;
    }
}

/*#endregion*/


/*#endregion*/

/*================================================
                  ALL SERVICES
================================================*/
/*#region CICD*/
#cicd {
    --bg: #ffffff;
    --text: #0b0f1a;
    --muted: #55607a;
    --brand-1: #0072ff;
    --brand-2: #00c6ff;
    --card-bg: linear-gradient(180deg, #f8faff 0%, #f4f6ff 100%);
    --container: 1200px;
}

    #cicd,
    #cicd * {
        box-sizing: border-box;
    }

#cicd {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
    background: var(--bg);
    color: var(--text);
    line-height: 1.45;
}

    #cicd .container {
        max-width: var(--container);
        margin: 48px auto;
        padding: 0 18px
    }

    /* HERO */
    #cicd .hero {
        min-height: 72vh;
        height: calc(100vh - 80px);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 28px 18px;
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(2,6,23,0.02), rgba(2,6,23,0.65)), url('/Assets/Hero/Services/CICD.webp') center/cover no-repeat;
    }

        /* soft overlay glow */
        #cicd .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(180deg, rgba(0,114,255,0.06), rgba(0,198,255,0.03));
            mix-blend-mode: soft-light;
        }

    #cicd .hero-content {
        position: relative;
        z-index: 2;
        max-width: 920px;
        padding: 40px;
        background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.08));
        border-radius: 20px;
        backdrop-filter: blur(6px);
        box-shadow: 0 12px 40px rgba(11,15,26,0.12)
    }

    #cicd .hero h1 {
        margin: 0 0 12px 0;
        font-size: clamp(1.8rem, 3.4vw, 3rem);
        line-height: 1.3;
        font-weight: 700;
        background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        letter-spacing: -0.01em;
    }

    #cicd .hero p {
        margin: 12px 0 20px;
        color: #fff;
        font-size: 1.03rem;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    }

    /* Primary CTA */
    #cicd .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 26px;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        font-weight: 600;
        font-size: 1rem;
        background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
        color: #fff;
        box-shadow: 0 8px 30px rgba(2,38,255,0.12);
        transition: all 0.3s ease;
    }

        #cicd .btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(2,38,255,0.14)
        }

    /* Section headings */
    #cicd .section h2, #cicd h2 {
        font-size: 1.6rem;
        margin: 0 0 18px;
        text-align: center;
        color: var(--text)
    }

    /* GRID LAYOUT */
    #cicd .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 22px
    }

    /* cards modern */
    #cicd .card {
        background: var(--card-bg);
        padding: 22px;
        height: 100%;
        border-radius: 14px;
        box-shadow: 0 8px 28px rgba(11,15,26,0.06);
        border: 1px solid rgba(7,20,60,0.04);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-height: 130px
    }

        #cicd .card h3 {
            margin: 0;
            font-size: 1.03rem
        }

        #cicd .card p {
            margin: 0;
            color: var(--muted);
            font-size: .98rem
        }

        #cicd .card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(11,15,26,0.09);
            border-color: rgba(0,114,255,0.12)
        }

    /* pipeline */
    #cicd .pipeline {
        display: flex;
        flex-wrap: nowrap;
        gap: 18px;
        align-items: stretch;
        padding: 12px 8px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    #cicd .step {
        flex: 0 0 200px;
        background: linear-gradient(180deg,#fbfdff,#eef6ff);
        padding: 20px;
        height: 100%;
        border-radius: 12px;
        min-width: 180px;
        text-align: center;
        box-shadow: 0 8px 22px rgba(2,18,60,0.04);
        border-top: 3px solid var(--brand-1);
        transition: transform .16s ease
    }

        #cicd .step strong {
            display: block;
            margin-bottom: 8px;
            color: var(--brand-1)
        }

        #cicd .step p {
            margin: 0;
            color: var(--muted);
            font-size: .95rem
        }

        #cicd .step:hover {
            transform: translateY(-6px)
        }

    /* tools grid tweaks */
    #cicd .grid.tools .card {
        min-height: 120px
    }

    /* cicd diagram container - do not change inner svg */
    #cicd .cicd-diagram {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 8px;
        overflow-x: auto
    }

.cicd-diagram svg {
    width: 100%;
    height: auto;
    display: block
}

/* info panel */
#cicd #diagram-info {
    margin-top: 28px;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(11,15,26,0.04);
    border: 1px solid rgba(7,20,60,0.03);
    text-align: center
}

    #cicd #diagram-info h3 {
        margin: 0 0 8px
    }

    #cicd #diagram-info p {
        margin: 0;
        color: var(--muted)
    }

/* CTA */
#cicd .cta {
    margin-top: 28px;
    padding: 36px 18px;
    background: linear-gradient(180deg, rgba(0,198,255,0.04), rgba(0,114,255,0.03));
    border-radius: 14px;
    text-align: center
}

/* footer inside section */
#cicd #cicd footer {
    margin-top: 40px;
    text-align: center;
    padding: 28px;
    border-radius: 12px;
    background: linear-gradient(180deg,#f8fbff,#f4f6ff);
    box-shadow: 0 6px 24px rgba(11,15,26,0.03)
}

/* responsive */
@media (max-width:900px) {
    #cicd .container {
        margin: 28px auto
    }

    #cicd .hero {
        height: 70vh
    }

    #cicd .hero-content {
        padding: 22px
    }
}

#cicd .hero-divider {
    width: 100%;
    line-height: 0;
    overflow: hidden;
    margin-top: -80px;
}

    #cicd .hero-divider svg {
        width: 100%;
        height: 160px;
        display: block;
    }

    #cicd .hero-divider.reverse svg {
        transform: rotate(180deg);
    }



@media (max-width:600px) {
    #cicd .pipeline {
        gap: 12px
    }

    #cicd .step {
        flex: 0 0 160px
    }

    #cicd .hero h1 {
        font-size: 1.6rem
    }
}
/*#endregion*/

/*#region CLOUD MIGRATION*/
#cloud-migration {
    --bg-main: #f6f8ff;
    --bg-gradient: linear-gradient(135deg, #4f8df9, #6a5cff);
    --primary: #4f8df9;
    --secondary: #6a5cff;
    --accent: #f04f8c;
    --dark: #1f2a44;
    --text: #4b5563;
    --card-bg: #ffffff;
    --border: #e5e9f2;
    background: var(--bg-main);
    color: var(--text);
}


    /*----------
        Hero
    ----------*/
    #cloud-migration .hero {
        min-height: 72vh;
        height: calc(100vh - 180px);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 28px 18px;
        position: relative;
        overflow: hidden;
        background: linear-gradient( 180deg, transparent, rgba(79, 141, 249, 0.15), rgba(31, 42, 68, 0.75) ), url('/Assets/Hero/Services/CloudMigration.webp') center / cover no-repeat;
        border-radius: 0 0 80px 80px;
    }

        #cloud-migration .hero .hero-content {
            border: 1px solid #fff;
            padding: 40px 80px;
            backdrop-filter: blur(5px);
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            box-shadow: 0 10px 15px rgba(255, 255, 255, 0.2)
        }


        #cloud-migration .hero h1 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #fff;
        }

        #cloud-migration .hero p {
            font-size: 18px;
            line-height: 1.6;
            max-width: 520px;
            color: #fff;
        }

    #cloud-migration .hero-actions {
        margin-top: 30px;
        display: flex;
        justify-content: space-evenly;
        gap: 16px;
    }

    #cloud-migration .hero-image img {
        width: 100%;
        max-width: 520px;
    }

    /*------------
        Button
    ------------*/
    #cloud-migration .btn {
        padding: 14px 26px;
        border-radius: 30px;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.25s ease;
    }

        #cloud-migration .btn.primary {
            background: var(--accent);
            color: white;
        }

        #cloud-migration .btn.outline {
            background: transparent;
            border: 2px solid white;
            color: white;
        }

        #cloud-migration .btn.primary:hover {
            background: #ff6fa2;
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(240, 79, 140, 0.35);
        }

        #cloud-migration .btn.outline:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }

    /*------------
        Section
    ------------*/
    #cloud-migration .section {
        padding: 80px 10%;
        text-align: center;
    }

        #cloud-migration .section h2 {
            font-size: 28px;
            color: var(--dark);
            margin-bottom: 20px;
        }

    #cloud-migration .section-desc {
        max-width: 700px;
        margin: 16px auto 50px;
    }


    /*---------
        Grid
    ---------*/
    #cloud-migration .grid {
        display: grid;
        gap: 24px;
    }

        #cloud-migration .grid.three {
            grid-template-columns: repeat(3, 1fr);
        }

        #cloud-migration .grid.four {
            grid-template-columns: repeat(4, 1fr);
        }

        #cloud-migration .grid.three i {
            display: block;
            text-align: center;
            margin: auto;
            margin-bottom: 10px;
        }

    /*----------
        Card
    ----------*/
    #cloud-migration .card {
        background: var(--card-bg);
        padding: 30px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    }

    /*--------------
        Icon Div
    --------------*/
    #cloud-migration .icon-card {
        background: white;
        padding: 26px;
        border-radius: 18px;
        font-size: 18px;
        font-weight: 600;
    }

        #cloud-migration .icon-card i {
            display: block;
            text-align: center;
            margin: auto;
            margin-bottom: 10px;
        }

    /*------------------------
        Card Hover Effect
    ------------------------*/
    #cloud-migration .card,
    #cloud-migration .icon-card,
    #cloud-migration .step {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

        #cloud-migration .card:hover,
        #cloud-migration .icon-card:hover,
        #cloud-migration .step:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 45px rgba(79, 141, 249, 0.25);
        }

            #cloud-migration .step:hover span {
                background: var(--accent);
            }

    /*--------------------------
         ICON HOVER EFFECTS
    --------------------------*/
    /*------------------------
        Base icon styling 
    ------------------------*/
    #cloud-migration i {
        font-size: 34px;
        color: var(--primary);
        transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
    }

    /*-----------------------------
        Card-based icon hover
    -----------------------------*/
    #cloud-migration .icon-card:hover i,
    #cloud-migration .card:hover i,
    #cloud-migration .step:hover i {
        transform: translateY(-6px) scale(1.08);
        color: var(--accent);
        text-shadow: 0 10px 25px rgba(240, 79, 140, 0.45);
    }

    /*-------------------
        Platform logos
    -------------------*/
    #cloud-migration .logos i {
        font-size: 44px;
        margin-bottom: 8px;
        display: inline-block;
    }

    /*----------------------
        Platform hover
    ----------------------*/
    #cloud-migration .logos .platform-div {
        cursor: pointer;
        transition: transform 0.25s ease;
    }

        #cloud-migration .logos .platform-div:hover {
            transform: translateY(-6px);
        }

            #cloud-migration .logos .platform-div:hover i {
                color: var(--secondary);
                text-shadow: 0 14px 30px rgba(79, 141, 249, 0.45);
            }

    #cloud-migration .icon-card:hover i {
        animation: iconPulse 0.4s ease;
    }


@media (prefers-reduced-motion: reduce) {
    #cloud-migration .btn,
    #cloud-migration .card,
    #cloud-migration .icon-card,
    #cloud-migration .step {
        transition: none;
    }
}


/*---------------
    TIMELINE
---------------*/
#cloud-migration .timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

#cloud-migration .step {
    background: white;
    padding: 30px;
    border-radius: 18px;
    position: relative;
}

    #cloud-migration .step span {
        position: absolute;
        top: -16px;
        left: 20px;
        background: var(--primary);
        color: white;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: bold;
    }

/*----------
    CTA
----------*/
#cloud-migration .cta {
    background: var(--bg-gradient);
    color: white;
    padding: 80px 10%;
    text-align: center;
    border-radius: 80px 80px 0 0;
}

/*---------------------------------
     RESPONSIVE IMPROVEMENTS
---------------------------------*/
/*--------------------
    Large tablets
--------------------*/
@media (max-width: 1200px) {
    #cloud-migration .section {
        padding: 70px 8%;
    }

    #cloud-migration .hero .hero-content {
        padding: 36px 60px;
    }
}

/*--------------
    Tablets
--------------*/
@media (max-width: 992px) {
    #cloud-migration .hero {
        height: auto;
        min-height: 65vh;
        padding: 40px 20px;
    }

        #cloud-migration .hero h1 {
            font-size: 42px;
        }

        #cloud-migration .hero p {
            font-size: 17px;
        }

        #cloud-migration .hero .hero-content {
            padding: 32px 48px;
        }

    #cloud-migration .grid.four {
        grid-template-columns: repeat(2, 1fr);
    }

    #cloud-migration .timeline {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*--------------
    Mobile
--------------*/
@media (max-width: 768px) {
    #cloud-migration .hero {
        min-height: auto;
        padding: 60px 16px;
        border-radius: 0 0 48px 48px;
    }

        #cloud-migration .hero .hero-content {
            padding: 28px 22px;
            border-radius: 14px;
        }

        #cloud-migration .hero h1 {
            font-size: 34px;
        }

        #cloud-migration .hero p {
            font-size: 16px;
            max-width: 100%;
        }

    #cloud-migration .hero-actions {
        flex-direction: column;
        gap: 14px;
    }

    #cloud-migration .btn {
        width: 100%;
    }

    #cloud-migration .section {
        padding: 60px 6%;
    }

    #cloud-migration .grid.three,
    #cloud-migration .grid.four {
        grid-template-columns: 1fr;
    }

    #cloud-migration .timeline {
        grid-template-columns: 1fr;
    }
}

/*--------------------
    Small mobile
--------------------*/
@media (max-width: 480px) {
    #cloud-migration .hero h1 {
        font-size: 30px;
    }

    #cloud-migration .hero p {
        font-size: 15px;
    }

    #cloud-migration .hero .hero-content {
        padding: 22px 18px;
    }
}


/*#endregion*/

/*#region CLOUD SERVICES*/
#cloud-services {
    --primary: #4A7BD0;
    --secondary: #2E4C8A;
    --accent: #E84C9B;
    --yellow: #F5C542;
    --dark: #1F2A44;
    --bg: #F4F7FD;
    background: var(--bg);
    color: #4b5563;
}

    /*----------
        Hero
    ----------*/
    #cloud-services .hero {
        padding: 90px 8%;
        background: linear-gradient(180deg, #ffffff, #eef3ff);
    }

    #cloud-services .hero-inner {
        display: grid;
        grid-template-columns: 1.1fr 1.5fr;
        align-items: center;
        gap: 60px;
    }

        #cloud-services .hero-inner .hero-actions {
            display: flex;
            justify-content: flex-start;
            gap: 0 20px;
        }

    #cloud-services .hero h1 {
        font-size: 46px;
        color: var(--dark);
    }

    #cloud-services .hero p {
        max-width: 520px;
        font-size: 18px;
        margin: 20px 0;
    }

    #cloud-services .hero-image img {
        width: 100%;
        max-width: 860px;
        mix-blend-mode: multiply;
    }

    /*-------------
        Buttons
    -------------*/
    #cloud-services .btn {
        padding: 14px 28px;
        border-radius: 28px;
        font-weight: 600;
        display: inline-block;
        transition: 0.25s ease;
    }

        #cloud-services .btn.primary {
            background: var(--primary);
            color: #fff;
        }

            #cloud-services .btn.primary:hover {
                background: var(--accent);
                transform: translateY(-2px);
            }

        #cloud-services .btn.outline {
            border: 2px solid var(--primary);
            color: var(--primary);
        }

    /*-------------
        Section
    -------------*/
    #cloud-services .section {
        padding: 80px 5%;
        text-align: center;
    }


    /*------------
         Grid
    ------------*/
    #cloud-services .grid {
        display: grid;
        gap: 24px;
    }

        #cloud-services .grid.three {
            grid-template-columns: repeat(3, 1fr);
        }

        #cloud-services .grid.four {
            grid-template-columns: repeat(4, 1fr);
        }

    /*----------
        Card
    ----------*/
    #cloud-services .card, .icon-card {
        background: white;
        padding: 30px;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,.06);
        transition: 0.25s ease;
    }

        #cloud-services .card, .icon-card i {
            display: block;
            text-align: center;
            margin: auto;
        }

            #cloud-services .card:hover, .icon-card:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 40px rgba(74,123,208,.25);
            }

            #cloud-services .card i, .icon-card i {
                font-size: 36px;
                color: var(--primary);
                margin-bottom: 12px;
            }

    /*------------------------
        Card Hover Effects
    ------------------------*/
    #cloud-services .card,
    #cloud-services .icon-card,
    #cloud-services .step {
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

        #cloud-services .card:hover,
        #cloud-services .icon-card:hover,
        #cloud-services .step:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 45px rgba(74, 123, 208, 0.28);
        }

            /*-------------------------
                Step number accent
            -------------------------*/
            #cloud-services .step:hover span {
                background: var(--primary);
            }


    #cloud-services i {
        font-size: 34px;
        color: var(--primary);
        transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
    }


    #cloud-services .card:hover i,
    #cloud-services .icon-card:hover i,
    #cloud-services .step:hover i {
        transform: translateY(-6px) scale(1.08);
        color: var(--accent);
        text-shadow: 0 10px 25px rgba(232, 76, 155, 0.45);
    }

    #cloud-services .logos .platform-div {
        margin: auto;
        width: max-content;
        cursor: pointer;
        transition: transform 0.25s ease;
    }

        #cloud-services .logos .platform-div i {
            display: block;
            margin: auto;
        }

        #cloud-services .logos .platform-div:hover {
            transform: translateY(-6px);
        }

            #cloud-services .logos .platform-div:hover i {
                color: var(--secondary);
                text-shadow: 0 14px 30px rgba(74, 123, 208, 0.45);
            }

@media (prefers-reduced-motion: reduce) {
    #cloud-services .card,
    #cloud-services .icon-card,
    #cloud-services .step,
    #cloud-services i {
        transition: none;
        animation: none;
    }
}

/*--------------
    Timeline
--------------*/
#cloud-services .timeline {
    margin: 20px 0 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
}

#cloud-services .step {
    background: white;
    padding: 30px;
    border-radius: 18px;
    position: relative;
}

    #cloud-services .step span {
        position: absolute;
        top: -18px;
        left: 20px;
        background: var(--accent);
        color: white;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: grid;
        place-items: center;
    }

/*--------
    CTA
--------*/
#cloud-services .cta {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 90px 10%;
    border-radius: 80px 80px 0 0;
}

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 900px) {
    #cloud-services .hero-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #cloud-services .grid.three,
    #cloud-services .grid.four,
    #cloud-services .timeline {
        grid-template-columns: 1fr;
    }
}

/*#endregion*/

/*#region DEVOPS*/
/*----------
    Hero
----------*/
#devops {
    --devops-primary: #0fa7a0;
    --devops-secondary: #f28c38;
    --devops-accent: #2f6fb2;
    --devops-light: #f6f9fc;
    --devops-dark: #1f2d3d;
}

    #devops .devops-hero {
        display: grid;
        grid-template-columns: 0.8fr 1fr;
        gap: 40px;
        padding: 80px 10%;
        background: linear-gradient(135deg, #e6f6f5, #ffffff);
        align-items: center;
    }

        #devops .devops-hero h1 {
            font-size: 48px;
            color: var(--devops-dark);
        }

        #devops .devops-hero p {
            font-size: 18px;
            margin: 20px 0;
        }

    #devops .hero-image img {
        max-width: 100%;
        mix-blend-mode: multiply;
    }

    /*------------
        Buttons
    ------------*/
    #devops .btn-primary {
        outline: none;
        border: none;
        background: var(--devops-primary);
        color: #fff;
        padding: 14px 32px;
        border-radius: 30px;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
    }

        #devops .btn-primary:hover {
            background: var(--devops-secondary);
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(242, 140, 56, 0.4);
        }

    /*---------------
        Sections
    ---------------*/
    #devops .section {
        padding: 70px 0;
        text-align: center;
    }

        #devops .section h2 {
            font-size: 36px;
            margin-bottom: 15px;
        }

    /*----------------
        Icon Grid
    ----------------*/
    #devops .icon-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 30px;
        margin-top: 40px;
    }

    #devops .icon-card {
        height: 100%;
        background: #fff;
        padding: 35px 25px;
        border-radius: 16px;
        transition: 0.3s ease;
    }

        #devops .icon-card i {
            font-size: 36px;
            color: var(--devops-primary);
            margin-bottom: 15px;
        }

        #devops .icon-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 45px rgba(15, 167, 160, 0.3);
        }

            #devops .icon-card:hover i {
                color: var(--devops-secondary);
            }

    /*--------------------
        SERVICE CARDS
    ---------------------*/
    #devops .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 30px;
    }

    #devops .card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 18px;
        transition: 0.3s ease;
    }

        #devops .card i {
            font-size: 34px;
            color: var(--devops-accent);
        }

        #devops .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 55px rgba(47, 111, 178, 0.35);
        }

    #devops .step:hover span {
        background: var(--devops-secondary);
    }

    /*-------------------------
         Icon Hover Effect
    -------------------------*/
    #devops i {
        font-size: 34px;
        color: var(--devops-primary);
        transition: transform 0.25s ease, color 0.25s ease, text-shadow 0.25s ease;
    }

    #devops .icon-card i {
        color: var(--devops-primary);
    }

    #devops .card i {
        display: block;
        margin: auto;
        color: var(--devops-accent);
    }

    #devops .step i {
        color: var(--devops-secondary);
    }

    #devops svg {
        fill: currentColor;
    }


    #devops .icon-card:hover i,
    #devops .card:hover i,
    #devops .step:hover i {
        transform: translateY(-6px) scale(1.08);
        color: var(--devops-secondary);
        text-shadow: 0 10px 25px rgba(47, 111, 178, 0.45);
        animation: iconPulse 0.35s ease;
    }

    /*--------------------
        PROCESS STEPS
    --------------------*/
    #devops .steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 30px;
    }

    #devops .step {
        background: #fff;
        padding: 30px;
        border-radius: 16px;
        position: relative;
        transition: 0.3s ease;
    }

        #devops .step span {
            position: absolute;
            top: -14px;
            left: 20px;
            background: var(--devops-primary);
            color: #fff;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            line-height: 34px;
        }

        #devops .step:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(15, 167, 160, 0.3);
        }

    /*---------
        CTA
    ---------*/
    #devops .cta {
        background: linear-gradient( 135deg, var(--devops-primary), var(--devops-accent) );
        color: #fff;
        padding: 90px 10%;
        text-align: center;
        margin-top: 80px;
        border-radius: 80px 80px 0 0;
        box-shadow: 0 -20px 60px rgba(15, 167, 160, 0.35);
    }

        #devops .cta h2 {
            font-size: 36px;
            margin-bottom: 14px;
        }

        #devops .cta p {
            font-size: 18px;
            margin-bottom: 28px;
            opacity: 0.95;
        }

/*------------------
    RESPONSIVE
------------------*/
@media (max-width: 900px) {
    #devops .devops-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/*#endregion*/

/*#region NETWORK INFRASTRUCTURE*/
#network-services {
    --primary: #1aa6a6;
    --secondary: #6fd3cf;
    --accent: #f2b866;
    --dark: #0e3f45;
    --bg: #f5fbfb;
}

    /*----------
        Hero
    ----------*/
    #network-services .net-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 90px 10%;
        background: linear-gradient(90deg, #e8f7f7, #e8f7f7);
        align-items: center;
        gap: 50px;
    }

    #network-services .hero-content h1 {
        font-size: 3rem;
        color: var(--dark);
    }

    #network-services .hero-content p {
        margin: 20px 0;
        font-size: 1.1rem;
        color: #555;
    }

    #network-services .hero-actions {
        display: flex;
        gap: 15px;
    }

    #network-services .hero-visual img {
        mix-blend-mode: multiply;
        width: 100%;
        max-width: 480px;
        animation: networkHeroImgfloat 5s ease-in-out infinite;
    }

    /*--------------
        Buttons
    --------------*/
    #network-services .btn {
        padding: 14px 26px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        border: none;
    }

        #network-services .btn.primary {
            background: var(--primary);
            color: white;
        }

        #network-services .btn.outline {
            border: 2px solid var(--primary);
            color: var(--primary);
            background: transparent;
        }

        #network-services .btn.primary:hover {
            background: #138f8f;
        }

    /*---------------
        Sections
    ---------------*/
    #network-services .section {
        padding: 40px 0;
        background: white;
    }

        #network-services .section.alt {
            background: var(--bg);
            border-radius: 20px;
        }

        #network-services .section h2 {
            text-align: center;
            color: var(--dark);
            font-size: 2.2rem;
        }

    #network-services .section-desc {
        text-align: center;
        max-width: 700px;
        margin: 15px auto 50px;
        color: #666;
    }

    /*------------
        Cards
    ------------*/
    #network-services .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 30px;
    }

    #network-services .net-card {
        background: white;
        padding: 30px;
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(0,0,0,0.08);
        text-align: center;
        transition: all 0.4s ease;
    }

        #network-services .net-card p {
            color: #666;
        }

        #network-services .net-card .icon {
            font-size: 2.4rem;
            color: var(--primary);
        }

        #network-services .net-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(26,166,166,0.3);
        }

            #network-services .net-card:hover .icon {
                color: var(--accent);
            }

    /*---------------
        Features
    ---------------*/
    #network-services .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 40px;
    }

    #network-services .feature {
        margin: auto;
    }

        #network-services .feature h4 {
            color: var(--primary);
        }

        #network-services .feature ul {
            padding-left: 18px;
        }

        #network-services .feature li {
            margin: 10px 0;
        }

    /*-------------------------
        Core Services Card
    -------------------------*/
    #network-services .core-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 30px;
        margin-top: 40px;
    }

    #network-services .core-card {
        height: 100%;
        background: white;
        padding: 35px 28px;
        border-radius: 16px;
        text-align: center;
        box-shadow: 0 14px 34px rgba(0,0,0,0.08);
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
    }

        #network-services .core-card i {
            font-size: 2.8rem;
            color: var(--primary);
            margin-bottom: 18px;
            display: inline-block;
            transition: all 0.4s ease;
        }

        #network-services .core-card h4 {
            color: var(--dark);
            margin-bottom: 12px;
            font-weight: 600;
        }

        #network-services .core-card p {
            color: #666;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        #network-services .core-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 26px 60px rgba(26,166,166,0.35);
        }

            #network-services .core-card:hover i {
                color: var(--accent);
                transform: scale(1.25) rotate(-8deg);
                filter: drop-shadow(0 10px 18px rgba(242,184,102,0.6));
            }


    /*------------
        Stats
    ------------*/
    #network-services .stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 30px;
        text-align: center;
    }

    #network-services .stat span {
        font-size: 2.2rem;
        font-weight: 700;
        color: var(--primary);
    }


    #network-services.stat {
        background: #ffffff;
        padding: 30px 20px;
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transition: transform 0.3s ease;
    }

        #network-services.stat:hover {
            transform: translateY(-8px);
        }

        #network-services.stat span {
            display: inline-block;
            font-size: 2.4rem;
            font-weight: 700;
            color: var(--primary);
        }

        #network-services .stat p {
            margin-top: 10px;
            color: #555;
            font-weight: 500;
        }

    /*--------------------
        Hover Effects
    --------------------*/
    #network-services .net-card .icon {
        font-size: 2.6rem;
        color: var(--primary);
        margin-bottom: 15px;
        display: inline-block;
        transition: all 0.4s ease;
    }

    #network-services .net-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 25px 50px rgba(26,166,166,0.35);
    }

        #network-services .net-card:hover .icon {
            color: var(--accent);
            transform: scale(1.25) rotate(-6deg);
            filter: drop-shadow(0 10px 18px rgba(242,184,102,0.6));
        }

    #network-services .net-card .icon {
        animation: iconPulse 4s ease-in-out infinite;
    }

    /*--------------------
        Architecture
    --------------------*/

    #network-services .architecture {
        scroll-margin-top: 80px;
        text-align: center;
        margin-top: 3px;
    }

    #network-services .architecture-wrapper {
        margin-top: 20px;
        overflow-x: hidden;
    }

    #network-services .network-svg {
        width: 100%;
        max-width: 1100px;
    }

        #network-services .network-svg .node rect {
            fill: white;
            stroke: var(--primary);
            stroke-width: 2;
            filter: drop-shadow(0 6px 14px rgba(26,166,166,0.25));
            transition: all 0.4s ease;
        }

        #network-services .network-svg .node text {
            fill: var(--dark);
            font-size: 14px;
            font-weight: 600;
            text-anchor: middle;
            dominant-baseline: middle;
        }

        #network-services .network-svg .node:hover rect {
            fill: var(--primary);
            stroke: var(--accent);
        }

        #network-services .network-svg .node:hover text {
            fill: white;
        }

    #network-services .net-line {
        stroke: var(--accent);
        stroke-width: 2;
        stroke-dasharray: 6;
        animation: networkFlow 3s linear infinite;
    }


    /*----------
        CTA 
    ----------*/
    #network-services .cta {
        padding: 90px 10%;
        text-align: center;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
    }

    #network-services .btn.large {
        margin-top: 25px;
        font-size: 1.1rem;
    }



/* DATA FLOW ANIMATION */
@keyframes networkFlow {
    to {
        stroke-dashoffset: -24;
    }
}


/* ANIMATION */
@keyframes networkHeroImgfloat {
    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* RESPONSIVE */
@media (max-width: 900px) {
    #network-services .net-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #network-services .hero-actions {
        justify-content: center;
    }
}

/*#endregion*/

/*#region AUTOMATION*/
#automation-services {
    --primary: #1f7cff;
    --secondary: #2de2e6;
    --accent: #6fffd2;
    --dark: #0a2e4f;
    --bg: #ecfbf6;
}

    /*-----------
        HERO
    -----------*/
    #automation-services .auto-hero {
        min-height: 72vh;
        height: calc(85vh - 80px);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 28px 18px;
        position: relative;
        overflow: hidden;
        background: linear-gradient( 180deg, transparent, rgba(10,46,79,0.35), rgba(10,46,79,0.85) ), url('/Assets/Hero/Services/Automation.webp') center / cover no-repeat;
    }

    #automation-services .hero-grid {
        display: block;
        max-width: 1100px;
        margin: auto;
    }

    #automation-services .hero-content {
        z-index: 2;
    }

        #automation-services .hero-content h1 {
            font-size: clamp(2.5rem, 5vw, 3.8rem);
            color: #fff;
        }

        #automation-services .hero-content p {
            max-width: 760px;
            margin: 24px auto;
            font-size: 1.2rem;
            opacity: 0.95;
            color: #fff;
        }

    #automation-services .hero-actions {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }


    #automation-services .hero-image img {
        width: 100%;
        filter: drop-shadow(0 40px 80px rgba(45,226,230,.35));
    }

    #automation-services .btn {
        outline: none;
        border: none;
        padding: 14px 30px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.3s ease;
    }

        #automation-services .btn.primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
        }

            #automation-services .btn.primary:hover {
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
                opacity: 0.9;
            }

        #automation-services .btn.outline {
            border: 2px solid var(--accent);
            color: var(--accent);
            background: transparent;
        }

            #automation-services .btn.outline:hover {
                background: var(--accent);
                color: white;
                transform: translateY(-3px);
                box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            }


    /*----------------
         Sections
    ----------------*/
    #automation-services .section {
        padding: 80px 0;
    }

        #automation-services .section.alt {
            background: var(--bg);
            border-radius: 30px;
        }

            #automation-services .section h2,
            #automation-services .section.alt h2 {
                text-align: center;
            }

            #automation-services .section .section-desc,
            #automation-services .section.alt .section-desc {
                text-align: center;
            }

    /*-----------
                Cards
            -----------*/
    #automation-services .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
        gap: 30px;
    }

    #automation-services .auto-card {
        height: 100%;
        background: white;
        padding: 40px;
        border-radius: 20px;
        text-align: center;
        transition: .45s ease;
        box-shadow: 0 20px 45px rgba(0,0,0,.08);
        position: relative;
    }

        #automation-services .auto-card i {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 20px;
            transition: .45s ease;
        }

        #automation-services .auto-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 80px rgba(31,124,255,.35);
        }

            #automation-services .auto-card:hover i {
                color: var(--secondary);
                text-shadow: 0 0 20px rgba(45,226,230,.9);
                transform: scale(1.15) rotate(-3deg);
            }

    /*-------------
        Matrics
    -------------*/
    #automation-services .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 30px;
        text-align: center;
    }

    #automation-services .metric h3 {
        font-size: 3rem;
        font-weight: 700;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #automation-services .metric p {
        font-weight: 600;
        opacity: .85;
    }

    /*---------------
        Use Cases
    ---------------*/
    #automation-services .usecase-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 30px;
    }

    #automation-services .usecase {
        height: 100%;
        background: white;
        padding: 40px;
        border-radius: 20px;
        text-align: center;
        box-shadow: 0 20px 45px rgba(0,0,0,.08);
        transition: .45s ease;
        position: relative;
    }

        #automation-services .usecase i {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 18px;
            transition: .45s ease;
        }

        #automation-services .usecase h4 {
            margin-bottom: 14px;
            color: var(--dark);
        }

        #automation-services .usecase ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #automation-services .usecase li {
            font-size: 0.9rem;
            text-align: left;
            margin-bottom: 10px;
            font-weight: 500;
        }

        #automation-services .usecase:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 80px rgba(31,124,255,.35);
        }

            #automation-services .usecase:hover i {
                color: var(--secondary);
                text-shadow: 0 0 20px rgba(45,226,230,.9);
                transform: scale(1.15) rotate(-3deg);
            }


    /*----------------------
        Technology Stack
    ----------------------*/
    #automation-services .tech-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        justify-content: center;
        margin-top: 45px;
    }

        #automation-services .tech-grid span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 24px;
            border-radius: 999px;
            background: linear-gradient( 135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.8) );
            border: 1px solid rgba(31,124,255,.18);
            font-weight: 700;
            font-size: .95rem;
            color: var(--dark);
            box-shadow: 0 10px 24px rgba(0,0,0,.07);
            transition: all .4s ease;
            cursor: default;
            position: relative;
            overflow: hidden;
        }

            #automation-services .tech-grid span i {
                font-size: 1.1rem;
                color: var(--primary);
                transition: .4s ease;
            }

            #automation-services .tech-grid span::after {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 999px;
                background: linear-gradient( 120deg, transparent, rgba(45,226,230,.35), transparent );
                opacity: 0;
                transition: .4s ease;
            }

            #automation-services .tech-grid span:hover {
                transform: translateY(-8px);
                color: var(--primary);
                box-shadow: 0 18px 45px rgba(31,124,255,.35), inset 0 0 0 1px rgba(45,226,230,.4);
            }

                #automation-services .tech-grid span:hover i {
                    color: var(--secondary);
                    transform: scale(1.15) rotate(-5deg);
                }

                #automation-services .tech-grid span:hover::after {
                    opacity: 1;
                }


    /*--------------------
        Before & After
    --------------------*/
    #automation-services .timeline-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
        gap: 40px;
        margin-top: 55px;
    }

    #automation-services .timeline {
        background: linear-gradient( 135deg, rgba(255,255,255,.98), rgba(255,255,255,.9) );
        padding: 42px;
        border-radius: 26px;
        box-shadow: 0 22px 55px rgba(0,0,0,.1);
        position: relative;
        overflow: hidden;
        transition: all .45s ease;
    }

        #automation-services .timeline::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 6px;
            width: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }

        #automation-services .timeline.before::before {
            background: linear-gradient(90deg, #ff6b6b, #ff9f43);
        }

        #automation-services .timeline.after::before {
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }

        #automation-services .timeline:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 70px rgba(31,124,255,.35), inset 0 0 0 1px rgba(45,226,230,.35);
        }

        #automation-services .timeline h4 {
            font-size: 1.5rem;
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--dark);
        }

            #automation-services .timeline h4 i {
                font-size: 1.4rem;
            }

        #automation-services .timeline ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #automation-services .timeline li {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 16px;
            font-weight: 600;
            line-height: 1.4;
            transition: .35s ease;
        }

            #automation-services .timeline li i {
                width: 22px;
                font-size: 1.1rem;
            }

        #automation-services .timeline.before li i {
            color: #ff6b6b;
        }

        #automation-services .timeline.after li i {
            color: var(--secondary);
        }

        #automation-services .timeline li:hover {
            transform: translateX(6px);
        }

    /*----------------------------
         Security & Compliance
    ----------------------------*/
    #automation-services .security-list {
        max-width: 760px;
        margin: 45px auto 0;
        padding: 0;
        list-style: none;
        display: grid;
        gap: 18px;
    }

        #automation-services .security-list li div {
            background: linear-gradient( 135deg, rgba(255,255,255,.98), rgba(255,255,255,.92) );
            padding: 20px 26px;
            border-radius: 16px;
            font-weight: 600;
            box-shadow: 0 14px 35px rgba(0,0,0,.1);
            display: flex;
            align-items: center;
            gap: 16px;
            transition: all .4s ease;
            position: relative;
            overflow: hidden;
        }

            #automation-services .security-list li div::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                width: 5px;
                height: 100%;
                background: linear-gradient(180deg, var(--primary), var(--secondary));
            }

        #automation-services .security-list li i {
            font-size: 1.25rem;
            color: var(--primary);
            min-width: 26px;
        }

        #automation-services .security-list li span {
            color: var(--dark);
        }

        #automation-services .security-list li div:hover {
            transform: translateX(10px);
            box-shadow: 0 22px 50px rgba(31,124,255,.35), inset 0 0 0 1px rgba(45,226,230,.3);
        }

            #automation-services .security-list li div:hover i {
                color: var(--secondary);
            }


    /*-----------
        FAQ's
    -----------*/
    #automation-services .faq-item {
        max-width: 920px;
        margin: 20px auto;
        background: linear-gradient( 135deg, rgba(255,255,255,.98), rgba(255,255,255,.92) );
        border-radius: 20px;
        box-shadow: 0 18px 45px rgba(0,0,0,.1);
        overflow: hidden;
        transition: all .4s ease;
    }

        #automation-services .faq-item:hover {
            transform: translateY(-6px);
            box-shadow: 0 26px 60px rgba(31,124,255,.28), inset 0 0 0 1px rgba(45,226,230,.3);
        }

        #automation-services .faq-item summary {
            padding: 24px 28px;
            cursor: pointer;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 16px;
            list-style: none;
            position: relative;
        }

            #automation-services .faq-item summary::-webkit-details-marker {
                display: none;
            }

            #automation-services .faq-item summary > i:first-child {
                font-size: 1.25rem;
                color: var(--primary);
                min-width: 26px;
            }

            #automation-services .faq-item summary span {
                flex: 1;
                font-size: 1.05rem;
                color: var(--dark);
            }

        #automation-services .faq-item .toggle-icon {
            font-size: 1.1rem;
            color: var(--primary);
            transition: transform .35s ease;
        }

        #automation-services .faq-item[open] .toggle-icon {
            transform: rotate(180deg);
            color: var(--secondary);
        }

        #automation-services .faq-item p {
            padding: 0 28px 28px 70px;
            margin: 0;
            line-height: 1.7;
            opacity: .88;
        }

        #automation-services .faq-item[open] {
            box-shadow: 0 28px 70px rgba(31,124,255,.35), inset 0 0 0 1px rgba(45,226,230,.35);
        }

    /*------------------
        Architecture
    ------------------*/
    #automation-services .automation-svg {
        width: 100%;
    }

    #automation-services .node rect {
        fill: white;
        stroke: var(--primary);
        stroke-width: 2;
    }

    #automation-services .node text {
        font-size: 0.8rem;
        fill: var(--dark);
        font-weight: 600;
        text-anchor: middle;
        dominant-baseline: middle;
    }

    #automation-services .auto-line {
        stroke: var(--accent);
        stroke-width: 2;
        stroke-dasharray: 6;
        animation: automationFlow 3s linear infinite;
    }

    #automation-services .node {
        cursor: pointer;
        transition: transform 0.3s ease;
        transform-origin: center;
    }

        #automation-services .node rect {
            transition: stroke 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease, transform 0.3s ease;
        }

        #automation-services .node text {
            transition: fill 0.3s ease;
        }

        #automation-services .node:hover rect {
            stroke: var(--accent);
            filter: drop-shadow(0 6px 14px rgba(45, 226, 230, 0.6));
        }

        #automation-services .node:hover text {
            fill: var(--primary);
        }

        #automation-services .node:hover rect {
            fill: #f0fffe;
        }


    /*----------
         CTA
    ----------*/
    #automation-services .cta {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        padding: 90px 10%;
        text-align: center;
        color: white;
    }

@keyframes automationFlow {
    to {
        stroke-dashoffset: -24;
    }
}

@media(max-width:900px) {
    #automation-services .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #automation-services .hero-actions {
        justify-content: center;
        flex-direction: column;
    }
}


/*#endregion*/

/*#region DIGITAL TRANSFORMATION*/
/*---------
    Hero
---------*/
#digital-transformation {
    --primary: #0fa7a0;
    --secondary: #f28c28;
    --dark: #1f2937;
    --light: #f9fafb;
}

    #digital-transformation .dt-hero {
        min-height: 80vh;
        background: linear-gradient(to right, rgba(255,255,255,0.95), rgba(255,255,255,0.85)), url("/Assets/Hero/Services/DigitalTransformation.webp") center/cover no-repeat;
        display: flex;
        align-items: center;
        padding: 0 10%;
    }

    #digital-transformation .dt-hero-content {
        max-width: 700px;
    }

    #digital-transformation .dt-hero h1 {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    #digital-transformation .dt-hero p {
        font-size: 1.1rem;
        margin-bottom: 30px;
        line-height: 1.6;
    }

    #digital-transformation .btn-primary {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        padding: 14px 28px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        transition: transform .3s, box-shadow .3s;
    }

        #digital-transformation .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(0,0,0,.15);
        }

    /*--------------
        Sections
    --------------*/
    #digital-transformation .dt-section {
        padding: 80px 2%;
        text-align: center;
    }

        #digital-transformation .dt-section.light {
            background: var(--light);
            border-radius: 20px;
        }

        #digital-transformation .dt-section h2 {
            font-size: 2.2rem;
            margin-bottom: 15px;
        }

    #digital-transformation .section-desc {
        max-width: 700px;
        margin: 0 auto 50px;
        color: #555;
    }

    /*-----------
        Grid
    -----------*/
    #digital-transformation .dt-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 30px;
    }

    /*----------
        Cards
    ----------*/
    #digital-transformation .dt-card {
        height: 100%;
        background: white;
        padding: 35px 25px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        transition: transform .3s, box-shadow .3s;
    }

        #digital-transformation .dt-card i {
            font-size: 2.4rem;
            color: var(--primary);
            margin-bottom: 15px;
            transition: transform .3s, color .3s;
        }

        #digital-transformation .dt-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 45px rgba(0,0,0,.15);
        }

            #digital-transformation .dt-card:hover i {
                transform: scale(1.15);
                color: var(--secondary);
                filter: drop-shadow(0 12px 20px rgba(242,140,40,.75));
            }

        #digital-transformation .dt-card h3 {
            margin-bottom: 10px;
        }

    /*-------------
        Timeline
    -------------*/
    #digital-transformation .dt-timeline {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 30px;
        margin-top: 50px;
    }

    #digital-transformation .dt-step {
        position: relative;
        background: white;
        padding: 30px;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        transition: transform .3s;
    }

        #digital-transformation .dt-step:hover {
            transform: translateY(-6px);
        }

        #digital-transformation .dt-step .dt-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 15px;
            box-shadow: 0 8px 20px rgba(15,167,160,.35);
            transition: transform .35s ease, box-shadow .35s ease;
        }

        #digital-transformation .dt-step .dt-step {
            background: white;
            padding: 30px;
            border-radius: 18px;
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
            transition: transform .35s ease, box-shadow .35s ease;
        }

        #digital-transformation .dt-step:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 45px rgba(0,0,0,.15);
        }

            #digital-transformation .dt-step:hover .dt-badge {
                transform: translateY(-55px);
                box-shadow: 0 12px 30px rgba(242,140,40,.5);
            }

    /*---------
        CTA
    ---------*/
    #digital-transformation .dt-cta {
        padding: 80px 10%;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
        text-align: center;
    }

        #digital-transformation .dt-cta h2 {
            margin-bottom: 25px;
        }

/*#endregion*/

/*#region IT - CONSULTING*/
#it-consulting {
    --primary: #4f8cff;
    --secondary: #6fd1c6;
    --accent: #ff9f43;
    --dark: #1f2a44;
    --light: #f7f9fc;
}

    /*----------
        Hero
    ----------*/
    #it-consulting .it-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 90px 10%;
        background: linear-gradient(0deg, #eef4ff, #ffffff);
        align-items: center;
        gap: 50px;
        overflow: hidden;
    }

    #it-consulting .hero-content h1 {
        font-size: 3rem;
        line-height: 1.3;
        color: var(--dark);
    }

        #it-consulting .hero-content h1 span {
            color: var(--primary);
        }

    #it-consulting .hero-content p {
        margin: 20px 0 30px;
        font-size: 1.1rem;
        color: #555;
        max-width: 560px;
    }

    #it-consulting .hero-actions {
        display: flex;
        gap: 16px;
    }

    #it-consulting .btn {
        padding: 14px 26px;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all .3s ease;
    }

        #it-consulting .btn.primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
        }

            #it-consulting .btn.primary:hover {
                transform: translateY(-3px);
                box-shadow: 0 12px 30px rgba(79,140,255,.35);
            }

        #it-consulting .btn.outline {
            border: 2px solid var(--primary);
            color: var(--primary);
            background: transparent;
        }

            #it-consulting .btn.outline:hover {
                background: var(--primary);
                color: white;
            }

    #it-consulting .hero-visual {
        position: relative;
    }

        #it-consulting .hero-visual img {
            width: 100%;
            max-width: 720px;
        }

    #it-consulting .floating-icon {
        position: absolute;
        width: 54px;
        height: 54px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 12px 30px rgba(0,0,0,.15);
        animation: itPulse 4s ease-in-out infinite;
    }

        #it-consulting .floating-icon i {
            font-size: 22px;
            color: var(--primary);
        }

    #it-consulting .icon-1 {
        top: 12%;
        left: -20px;
        animation-delay: 0s;
    }

    #it-consulting .icon-2 {
        bottom: 18%;
        right: -20px;
        animation-delay: 1.5s;
    }

    #it-consulting .icon-3 {
        top: 60%;
        left: -30px;
        animation-delay: 3s;
    }

    #it-consulting .it-section {
        padding: 90px 3%;
        text-align: center;
    }

        #it-consulting .it-section.alt {
            background: var(--light);
            border-radius: 20px;
        }

        #it-consulting .it-section h2 {
            font-size: 2.5rem;
            margin-bottom: 16px;
        }

    #it-consulting .section-sub {
        max-width: 700px;
        margin: 0 auto 50px;
        color: #666;
    }

    /*---------------
        SERVICES 
    ---------------*/
    #it-consulting .service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px,1fr));
        gap: 28px;
    }

    #it-consulting .service-card {
        height: 100%;
        background: white;
        padding: 34px 26px;
        border-radius: 18px;
        box-shadow: var(--shadow-soft);
        transition: all .35s ease;
        position: relative;
        overflow: hidden;
    }

        #it-consulting .service-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 135deg, rgba(79,140,255,.08), rgba(111,209,198,.08) );
            opacity: 0;
            transition: opacity .35s ease;
        }

        #it-consulting .service-card:hover::before {
            opacity: 1;
        }

        #it-consulting .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 28px 70px rgba(79,140,255,.25);
        }

        #it-consulting .service-card i {
            font-size: 36px;
            color: var(--primary);
            margin-bottom: 14px;
            transition: all .35s ease;
            position: relative;
            z-index: 1;
        }

        #it-consulting .service-card:hover i {
            color: var(--accent);
            transform: rotate(-8deg) scale(1.25);
        }

    /*---------------
        PROCESS
    ---------------*/
    #it-consulting .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 30px;
    }

    #it-consulting .process-step {
        height: 100%;
        background: white;
        padding: 36px 32px;
        border-radius: 20px;
        position: relative;
        transition: all .35s ease;
    }

        #it-consulting .process-step span {
            position: absolute;
            top: -16px;
            right: 20px;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            font-weight: 700;
            background: linear-gradient( 135deg, var(--primary), var(--secondary) );
            color: white;
            box-shadow: 0 10px 25px rgba(79,140,255,.35);
        }

        #it-consulting .process-step i {
            font-size: 32px;
            color: var(--secondary);
            margin-bottom: 12px;
            transition: transform .35s ease, color .35s ease;
        }

        #it-consulting .process-step:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 55px rgba(0,0,0,.12);
        }

            #it-consulting .process-step:hover i {
                transform: scale(1.2);
                color: var(--primary);
            }

    /*--------------
        METRICS
    --------------*/
    #it-consulting .metrics {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
    }

    #it-consulting .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 30px;
    }

    #it-consulting .metric h3 {
        font-size: 3rem;
        font-weight: 700;
    }

    #it-consulting .metric h3 {
        transition: transform .3s ease;
    }

    #it-consulting .metric:hover h3 {
        transform: scale(1.08);
    }


    /*----------
        CTA
    ----------*/
    #it-consulting .cta {
        background: var(--dark);
        color: white;
    }

/*--------------------------
    Here Icons Animation
--------------------------*/
@keyframes itPulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.12);
    }
}

/*-----------------
    Responsive
-----------------*/
@media (max-width: 992px) {
    #it-consulting .it-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #it-consulting .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }

    #it-consulting .hero-visual {
        margin-top: 40px;
    }
}

@media(max-width:768px) {
    #it-consulting .it-section h2 {
        font-size: 2rem;
    }
}

/*#endregion*/

/*#region PRODUCT CONSULTING*/
#product-consulting {
    --primary: #f4b41a;
    --secondary: #ff7a59;
    --accent: #4f8cff;
    --dark: #1c2431;
    --light: #f6f7fb;
    --shadow-soft: 0 18px 40px rgba(0,0,0,.08);
    --shadow-hover: 0 28px 60px rgba(0,0,0,.16);
}

    /*-----------
        HERO
    -----------*/
    #product-consulting .pc-hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        padding: 90px 10%;
        background: linear-gradient(0deg, #fff7e3, #ffffff);
        align-items: center;
    }

        #product-consulting .pc-hero h1 {
            font-size: 3rem;
            line-height: 1.3;
            color: var(--dark);
        }

        #product-consulting .pc-hero p {
            margin: 18px 0 30px;
            font-size: 1.1rem;
            color: #555;
            max-width: 560px;
        }

        #product-consulting .pc-hero img {
            width: 100%;
            max-width: 640px;
        }

    /*---------------
         Buttons
    ---------------*/
    #product-consulting .btn {
        padding: 14px 28px;
        border-radius: 10px;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all .35s ease;
    }

        #product-consulting .btn.primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
        }

            #product-consulting .btn.primary:hover {
                transform: translateY(-4px);
                box-shadow: 0 16px 36px rgba(0,0,0,.25);
            }

    /*---------------
        SECTIONS
    ---------------*/
    #product-consulting .it-section {
        padding: 90px 3%;
    }

        #product-consulting .it-section.alt {
            background: var(--light);
            padding: 90px 10%;
        }

        #product-consulting .it-section h2 {
            font-size: 2.6rem;
            color: var(--dark);
            margin-bottom: 14px;
            text-align: center;
        }

        #product-consulting .it-section .section-sub {
            max-width: 700px;
            color: #555;
            text-align: center;
            margin: auto;
            margin-bottom: 50px;
        }

    /*--------------
        SERVICES
    --------------*/
    #product-consulting .service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }

    #product-consulting .service-card {
        background: white;
        padding: 36px 28px;
        border-radius: 22px;
        box-shadow: var(--shadow-soft);
        transition: all .4s ease;
        position: relative;
        overflow: hidden;
    }

        #product-consulting .service-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            opacity: 0;
            transition: opacity .4s ease;
        }

        #product-consulting .service-card > * {
            position: relative;
            z-index: 1;
        }

        #product-consulting .service-card i {
            font-size: 40px;
            color: var(--primary);
            margin-bottom: 16px;
            transition: all .4s ease;
        }

        #product-consulting .service-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

            #product-consulting .service-card:hover::before {
                opacity: .08;
            }

            #product-consulting .service-card:hover i {
                color: var(--secondary);
                transform: rotate(-10deg) scale(1.25);
                filter: drop-shadow(0 10px 18px var(--shadow-soft));
            }

    /*-------------
        PROCESS
    -------------*/
    #product-consulting .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 34px;
    }

    #product-consulting .process-step {
        background: white;
        padding: 40px 32px;
        border-radius: 26px;
        box-shadow: var(--shadow-soft);
        position: relative;
        transition: all .4s ease;
    }

        #product-consulting .process-step span {
            position: absolute;
            top: -16px;
            right: 22px;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 24px rgba(0,0,0,.18);
        }

        #product-consulting .process-step i {
            font-size: 34px;
            color: var(--accent);
            margin-bottom: 14px;
            transition: transform .4s ease;
        }

        #product-consulting .process-step:hover {
            transform: translateY(-8px);
        }

            #product-consulting .process-step:hover i {
                transform: scale(1.25);
                color: var(--primary);
                filter: drop-shadow(0 10 10 var(--primary));
            }

    /*-------------
        METRICS
    -------------*/
    #product-consulting .metrics {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: white;
    }

    #product-consulting .metrics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 30px;
        text-align: center;
    }

    #product-consulting .metric h3 {
        font-size: 3.2rem;
        font-weight: 700;
        display: inline-block;
        transition: transform 0.3s ease;
    }

    #product-consulting .metrics-grid .metric h3:hover {
        transform: scale(1.1);
    }
    /*---------
        CTA
    ---------*/
    #product-consulting .cta {
        background: var(--dark);
        color: white;
        text-align: center;
    }

/*-------------
  RESPONSIVE
-------------*/
@media (max-width: 992px) {
    #product-consulting .pc-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

        #product-consulting .pc-hero img {
            margin-top: 40px;
        }
}

@media (max-width: 768px) {
    #product-consulting .it-section h2 {
        font-size: 2rem;
    }
}

/*#endregion*/

/*#region TECH STRATEGY*/
#tech-strategy {
    --ts-primary: #2f8f8b;
    --ts-secondary: #ff8a4c;
    --ts-accent: #f25c6d;
    --ts-bg: #f4fbfa;
    --ts-dark: #1f2f35;
    --ts-accent-shadow: rgba(242, 92, 109, 0.35);
}

#tech-strategy {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#tech-strategy {
    background: var(--ts-bg);
    color: var(--ts-dark);
    line-height: 1.7
}

    /*-----------
         HERO
    -----------*/
    #tech-strategy .ts-hero {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 60px;
        padding: 90px 10%;
        align-items: center;
        box-shadow: inset -10px -30px 40px #fff;
    }

        #tech-strategy .ts-hero h1 {
            font-size: 3.2rem;
            line-height: 1.15
        }

            #tech-strategy .ts-hero h1 span {
                color: var(--ts-primary)
            }

        #tech-strategy .ts-hero p {
            margin: 22px 0;
            max-width: 520px
        }

    #tech-strategy .hero-actions {
        display: flex;
        gap: 18px;
        margin-top: 30px
    }

    #tech-strategy .btn {
        padding: 14px 34px;
        border-radius: 12px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: .45s;
    }

        #tech-strategy .btn.primary {
            background: linear-gradient(135deg,var(--ts-primary),#3fb3ae);
            color: #fff
        }

        #tech-strategy .btn.secondary {
            border: 2px solid var(--ts-secondary);
            color: var(--ts-secondary)
        }

        #tech-strategy .btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(0,0,0,.18)
        }

    #tech-strategy .ts-hero img {
        width: 100%;
        border-radius: 20px;
    }

    /*--------------
        SECTION
    --------------*/
    #tech-strategy .section {
        padding: 90px 0
    }

        #tech-strategy .section.alt {
            background: #fff
        }

    #tech-strategy .section-title {
        text-align: center;
        margin-bottom: 60px
    }

        #tech-strategy .section-title h2 {
            font-size: 2.6rem
        }

        #tech-strategy .section-title p {
            max-width: 720px;
            margin: 16px auto;
            color: #666
        }

    /*-------------------------
        STRATEGY SERVICES
    -------------------------*/
    #tech-strategy .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 34px;
    }

    #tech-strategy .service-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        box-shadow: 0 20px 50px rgba(0,0,0,.08);
        transition: .45s;
    }

        #tech-strategy .service-card i {
            font-size: 2.4rem;
            color: var(--ts-primary);
            transition: .45s;
        }

        #tech-strategy .service-card h3 {
            margin: 18px 0
        }

        #tech-strategy .service-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 70px rgba(0,0,0,.18);
        }

            #tech-strategy .service-card:hover i {
                filter: drop-shadow(0 10px 20px var(--ts-accent-shadow));
                color: var(--ts-accent);
                transform: scale(1.15)
            }

    /*---------------------
        STRATEGY MODEL
    ---------------------*/
    #tech-strategy .strategy-flow {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
        gap: 28px;
    }

    #tech-strategy .flow-step {
        height: 100%;
        position: relative;
        background: linear-gradient(135deg,#ffffff,var(--ts-bg));
        padding: 30px;
        border-radius: 20px;
        transition: .4s;
    }

        #tech-strategy .flow-step span {
            position: absolute;
            right: 4px;
            top: 4px;
            display: inline-block;
            background: var(--ts-primary);
            font-weight: 700;
            color: #fff;
            width: 46px;
            height: 46px;
            text-align: center;
            line-height: 46px;
            border-radius: 50%;
            transition: all 0.3s ease-in-out;
        }

        #tech-strategy .flow-step:hover {
            transform: scale(1.06)
        }

            #tech-strategy .flow-step:hover span {
                background: var(--ts-accent);
                box-shadow: 0 10px 20px var(--ts-accent-shadow);
            }

    /*-------------------------
        STRATEGIC METRICS
    -------------------------*/
    #tech-strategy .metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 30px;
        text-align: center;
    }

    #tech-strategy .metric {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 20px;
        transition: .4s;
    }

        #tech-strategy .metric h3 {
            display: inline-block;
            font-weight: 700;
            font-size: 2.6rem;
            color: var(--ts-secondary);
            transition: all 0.3s ease;
        }

        #tech-strategy .metric:hover h3 {
            filter: drop-shadow( 0 10px 20px var(--ts-accent-shadow));
            transform: translateY(-5px);
        }

        #tech-strategy .metric:hover {
            transform: translateY(-10px);
            box-shadow: 0 22px 50px rgba(0,0,0,.15)
        }

    /*----------
        CTA
    ----------*/
    #tech-strategy .cta {
        background: linear-gradient(135deg,var(--ts-primary),var(--ts-secondary));
        color: #fff;
        text-align: center;
        padding: 90px 10%;
    }

        #tech-strategy .cta h2 {
            font-size: 2.8rem;
            margin-bottom: 20px
        }

@media(max-width:900px) {
    #tech-strategy .ts-hero {
        grid-template-columns: 1fr;
        text-align: center
    }

    #tech-strategy .hero-actions {
        justify-content: center
    }
}

/*#endregion*/

/*#region AI SOLUTION*/
#ai-solution {
    /* Brand Colors */
    --ai-primary: #00c2ff;
    --ai-secondary: #0b3c5d;
    --ai-accent: #1de9b6;
    /* Light UI */
    --ai-bg: #ffffff;
    --ai-card: #f6f9fc;
    --ai-text: #0b1f33;
    --ai-muted: #5f7d95;
    /* Effects */
    --ai-glow: rgba(0,194,255,.28);
    --ai-shadow: 0 20px 45px rgba(0,0,0,.08);
    font-family: 'Segoe UI', sans-serif;
    background: var(--ai-bg);
    color: var(--ai-text);
    line-height: 1.7;
}

    /*---------
        HERO
     --------*/
    #ai-solution .ai-hero {
        position: relative;
        width: 100%;
        height: 65vh;
        overflow: hidden;
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5) 100% ), url('/Assets/Hero/Services/AISolutions.webp') center/cover no-repeat;
    }

    #ai-solution .hero-overlay {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 10%;
        max-width: 920px;
    }

        #ai-solution .hero-overlay h1 {
            font-size: 3.6rem;
            line-height: 1.15;
            color: #ffffff;
        }

            #ai-solution .hero-overlay h1 span {
                color: var(--ai-primary);
            }

        #ai-solution .hero-overlay p {
            margin: 26px 0;
            font-size: 1.15rem;
            color: #e9f7ff;
        }

    #ai-solution .hero-actions {
        display: flex;
        gap: 18px;
        margin-top: 30px;
    }

    #ai-solution .btn {
        padding: 14px 36px;
        border-radius: 14px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: .4s ease;
        text-decoration: none;
        cursor: pointer;
    }

        #ai-solution .btn.primary {
            background: linear-gradient(135deg,var(--ai-primary),var(--ai-accent));
            color: #002233;
            box-shadow: 0 14px 34px var(--ai-glow);
        }

        #ai-solution .btn.secondary {
            border: 2px solid #ffffff;
            color: #ffffff;
        }

        #ai-solution .btn:hover {
            transform: translateY(-6px);
        }

    #ai-solution #wave-divider {
        background: #f6f9fc;
    }

    /*--------------
        SECTIONS
    --------------*/
    #ai-solution .section {
        padding: 80px 0;
    }

        #ai-solution .section.alt {
            background: #f6f9fc;
        }

    #ai-solution .section-title {
        text-align: center;
        margin-bottom: 70px;
    }

        #ai-solution .section-title h2 {
            font-size: 2.6rem;
        }

        #ai-solution .section-title p {
            max-width: 760px;
            margin: 18px auto;
            color: var(--ai-muted);
        }

    /*--------------
        SERVICES
    --------------*/
    #ai-solution .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(360px,1fr));
        gap: 36px;
    }

    #ai-solution .service-card {
        height: 100%;
        background: var(--ai-card);
        padding: 38px;
        border-radius: 22px;
        box-shadow: var(--ai-shadow);
        transition: .45s;
    }

        #ai-solution .service-card i {
            display: block;
            margin: auto;
            font-size: 2.6rem;
            color: var(--ai-primary);
            transition: .4s;
        }

        #ai-solution .service-card h4 {
            text-align: center;
            margin: 18px 0;
        }

        #ai-solution .service-card p {
            color: var(--ai-muted);
        }

        #ai-solution .service-card ul {
            margin-top: 14px;
            padding-left: 18px;
            color: var(--ai-muted);
        }

            #ai-solution .service-card ul li {
                margin-bottom: 6px;
                font-size: .95rem;
            }


        #ai-solution .service-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 30px 60px var(--ai-glow);
        }

            #ai-solution .service-card:hover i {
                transform: scale(1.2) translateY(-5px);
                color: var(--ai-accent);
                filter: drop-shadow(0 5px 30px var(--ai-accent));
            }

    /*-----------------
        AI PIPELINE
    -----------------*/
    #ai-solution .pipeline {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 28px;
    }

    #ai-solution .pipe-step {
        height: 100%;
        background: var(--ai-card);
        padding: 30px;
        border-radius: 20px;
        box-shadow: var(--ai-shadow);
        transition: .4s;
    }

        #ai-solution .pipe-step span {
            display: block;
            text-align: center;
            width: 40px;
            height: 40px;
            line-height: 40px;
            border-radius: 50%;
            background: var(--ai-primary);
            color: #fff;
            font-weight: 700;
            margin: auto;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }

        #ai-solution .pipe-step h4 {
            text-align: center;
        }

        #ai-solution .pipe-step:hover {
            transform: scale(1.06);
            box-shadow: 0 25px 50px var(--ai-glow);
        }

            #ai-solution .pipe-step:hover span {
                transform: translateY(-5px);
                background: var(--ai-accent);
                box-shadow: 0 5px 40px var(--ai-accent);
            }

    /*---------------
        USE CASES
    ---------------*/
    #ai-solution .usecases {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
        gap: 30px;
    }

    #ai-solution .usecase {
        height: 100%;
        background: var(--ai-card);
        padding: 30px 25px;
        border-radius: 20px;
        box-shadow: var(--ai-shadow);
        transition: .4s;
    }

        #ai-solution .usecase h4 {
            text-align: center;
        }

        #ai-solution .usecase i {
            display: block;
            text-align: center;
            margin: auto;
            font-size: 2rem;
            color: var(--ai-accent);
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }

        #ai-solution .usecase:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px var(--ai-glow);
        }

            #ai-solution .usecase:hover i {
                transform: translateY(-5px);
                color: var(--ai-primary);
                filter: drop-shadow(0 0 30px var(--ai-primary));
            }

    /*-------------
        METRICS
    -------------*/
    #ai-solution .metrics {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 30px;
        text-align: center;
    }

    #ai-solution .metric {
        height: 100%;
        background: var(--ai-card);
        padding: 38px;
        border-radius: 22px;
        box-shadow: var(--ai-shadow);
        transition: .4s;
    }

        #ai-solution .metric h3 {
            font-weight: 700;
            font-size: 2.8rem;
            color: var(--ai-primary);
            transition: all 0.3s ease;
        }

        #ai-solution .metric p {
            color: var(--ai-muted);
        }

        #ai-solution .metric:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 60px var(--ai-glow);
        }

            #ai-solution .metric:hover h3 {
                color: var(--ai-accent);
                transform: translateY(-5px);
                filter: drop-shadow(0 0 30px var(--ai-accent));
            }

    /*---------
        CTA
    ---------*/
    #ai-solution .cta {
        background: linear-gradient(135deg,var(--ai-primary),var(--ai-accent));
        text-align: center;
        padding: 110px 10%;
        color: #002233;
    }

        #ai-solution .cta h2 {
            font-size: 3rem;
            margin-bottom: 22px;
        }

/*---------------
   RESPONSIVE
---------------*/
@media (max-width: 900px) {

    #ai-solution .ai-hero {
        height: auto;
        min-height: 80vh;
    }

    #ai-solution .hero-overlay {
        padding: 0 6%;
    }

        #ai-solution .hero-overlay h1 {
            font-size: 2.4rem;
        }

    #ai-solution .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*#endregion*/

/*#region BIG DATA*/
#big-data {
    --bd-primary: #4fa3d1;
    --bd-secondary: #7fc8f8;
    --bd-accent: #22c55e;
    --bd-highlight: #f59e0b;
    --bd-dark: #0f172a;
    --bd-bg: #eef7fc;
    overflow: hidden;
}

    #big-data #bigdata-hero {
        background: linear-gradient(180deg, var(--bd-bg), var(--bd-bg));
        padding: 90px 5%;
        box-shadow: inset -10px -20px 30px #fff;
    }

    #big-data .bd-hero-grid {
        display: grid;
        grid-template-columns: 0.8fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #big-data .bd-tag {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 20px;
        background: rgba(79,163,209,.15);
        color: var(--bd-primary);
        font-weight: 600;
    }

    #big-data .bd-hero-content h1 {
        font-size: 3.2rem;
        margin: 18px 0;
        color: var(--bd-dark);
    }

        #big-data .bd-hero-content h1 span {
            color: var(--bd-primary);
        }

    #big-data .bd-hero-content p {
        font-size: 1.1rem;
        color: #475569;
        max-width: 520px;
    }

    #big-data .bd-stats {
        display: flex;
        gap: 30px;
        margin-top: 30px;
    }

        #big-data .bd-stats h3 {
            color: var(--bd-primary);
            font-size: 1.8rem;
        }

    #big-data .bd-hero-image img {
        filter: drop-shadow(0px 0px 0.5px var(--bd-primary));
        width: 100%;
    }

    /*------------------
        HERO BUTTONS
    ------------------*/
    #big-data .bd-hero-actions {
        display: flex;
        gap: 18px;
        margin-top: 32px;
    }

        #big-data .bd-hero-actions .btn {
            position: relative;
            padding: 14px 34px;
            border-radius: 12px;
            font-weight: 600;
            font-size: 1.05rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all .35s ease;
            overflow: hidden;
            cursor: pointer;
        }

            #big-data .bd-hero-actions .btn.primary {
                background: linear-gradient( 135deg, var(--bd-primary), var(--bd-secondary) );
                color: #fff;
                box-shadow: 0 14px 30px rgba(79,163,209,.45);
            }

                #big-data .bd-hero-actions .btn.primary::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -120%;
                    width: 120%;
                    height: 100%;
                    background: linear-gradient( 120deg, transparent, rgba(255,255,255,.35), transparent );
                    transition: left .6s ease;
                }

                #big-data .bd-hero-actions .btn.primary:hover::after {
                    left: 120%;
                }

                #big-data .bd-hero-actions .btn.primary:hover {
                    transform: translateY(-4px);
                    box-shadow: 0 20px 46px rgba(79,163,209,.6);
                }

            #big-data .bd-hero-actions .btn.outline {
                background: transparent;
                color: var(--bd-primary);
                border: 2px solid var(--bd-primary);
            }

                #big-data .bd-hero-actions .btn.outline::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    background: var(--bd-primary);
                    transform: scaleX(0);
                    transform-origin: left;
                    transition: transform .35s ease;
                    z-index: -1;
                }

                #big-data .bd-hero-actions .btn.outline:hover::before {
                    transform: scaleX(1);
                }

                #big-data .bd-hero-actions .btn.outline:hover {
                    color: #fff;
                    transform: translateY(-4px);
                    box-shadow: 0 16px 36px rgba(79,163,209,.4);
                }

            #big-data .bd-hero-actions .btn:active {
                transform: translateY(-1px);
                box-shadow: 0 10px 24px rgba(0,0,0,.2);
            }

    /*--------------
        SECTIONS
    --------------*/
    /*    #big-data .section {
        padding: 80px 0;
    }

        #big-data .section.alt {
            background: #f6f9fc;
        }

    #big-data .section-title {
        text-align: center;
        margin-bottom: 70px;
    }

        #big-data .section-title h2 {
            font-size: 2.6rem;
        }

        #big-data .section-title p {
            max-width: 760px;
            margin: 18px auto;
            color: var(--ai-muted);
        }*/


    #big-data .section {
        padding: 80px 0;
    }

        #big-data .section.alt {
            background: #f6f9fc;
        }

    #big-data .section-title {
        font-weight: 700;
        position: relative;
        text-align: center;
    }

        #big-data .section-title::after {
            content: "";
            width: 70px;
            height: 4px;
            background: linear-gradient( 90deg, var(--bd-primary), var(--bd-secondary) );
            display: block;
            margin: 16px auto 0;
            border-radius: 4px;
        }

    /*--------------
        SERVICES
    --------------*/
    #big-data .bd-services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 30px;
        margin-top: 50px;
    }

    #big-data .bd-card {
        background: white;
        padding: 36px;
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,.08);
        transition: all .4s ease;
        position: relative;
        overflow: hidden;
    }

        #big-data .bd-card i {
            font-size: 2.6rem;
            color: var(--bd-primary);
            margin-bottom: 20px;
            transition: transform .4s, color .4s;
        }

        #big-data .bd-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 60px rgba(79,163,209,.25);
        }

            #big-data .bd-card:hover i {
                transform: scale(1.2) rotate(5deg);
                color: var(--bd-accent);
            }

    /*-----------------
        TECH STACK
    -----------------*/
    #big-data .tech-stack {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

        #big-data .tech-stack .stact-wrapper {
            padding: 14px 22px;
            border-radius: 30px;
            background: white;
            box-shadow: 0 12px 25px rgba(0,0,0,.08);
            transition: all .3s ease;
            font-weight: 600;
        }

            #big-data .tech-stack .stact-wrapper:hover {
                background: var(--bd-primary);
                color: white;
                transform: translateY(-6px);
            }

            #big-data .tech-stack .stact-wrapper i {
                color: var(--bd-primary);
            }

            #big-data .tech-stack .stact-wrapper:hover i {
                color: white;
                filter: drop-shadow(0 0 8px var(--bd-accent));
            }

    /*----------------
        CARD BASE
    ----------------*/
    #big-data .bd-card {
        height: 100%;
        background: white;
        padding: 36px;
        border-radius: 20px;
        border: 1px solid rgba(79,163,209,.12);
        box-shadow: 0 20px 40px rgba(0,0,0,.08);
        position: relative;
        overflow: hidden;
        transition: all .4s ease;
    }

        #big-data .bd-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient( 120deg, transparent, rgba(79,163,209,.12), transparent );
            opacity: 0;
            transition: opacity .4s ease;
        }

        #big-data .bd-card:hover::before {
            opacity: 1;
        }

        #big-data .bd-card i {
            display: block;
            text-align: center;
            margin: auto;
            font-size: 2.6rem;
            color: var(--bd-primary);
            margin-bottom: 20px;
            transition: transform .4s, color .4s;
        }

        #big-data .bd-card h4 {
            text-align: center;
            font-weight: 700;
        }

        #big-data .bd-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 60px rgba(79,163,209,.25);
        }

            #big-data .bd-card:hover i {
                transform: scale(1.2) rotate(5deg);
                color: var(--bd-accent);
                filter: drop-shadow(0 8px 18px rgba(34,197,94,.45));
            }

    /*---------------
        USE CASES
    ---------------*/
    #big-data .bd-services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 30px;
        margin-top: 50px;
    }

    /*------------------------
        DELIVERY APPROACH
    ------------------------*/
    #big-data .section.alt .bd-services-grid {
        margin-top: 40px;
    }

    /*---------------------
        BUSINESS IMPACT
    ---------------------*/
    #big-data .bd-stats {
        padding-top: 20px;
        display: flex;
    }

        #big-data .bd-stats .matric {
            background: white;
            padding: 26px 34px;
            border-radius: 18px;
            box-shadow: 0 18px 36px rgba(0,0,0,.08);
            min-width: 200px;
            text-align: center;
            transition: transform .35s ease, box-shadow .35s ease;
        }

            #big-data .bd-stats .matric:hover {
                transform: translateY(-10px);
                box-shadow: 0 28px 50px rgba(79,163,209,.25);
            }

        #big-data .bd-stats h3 {
            color: var(--bd-primary);
            font-weight: 700;
        }

        #big-data .bd-stats p {
            margin-top: 6px;
            font-weight: 600;
            color: #475569;
        }

    /*----------------------------
        SECURITY & COMPLIANCE
    ----------------------------*/
    #big-data .section.alt .bd-card i {
        color: var(--bd-primary);
    }

    /*---------
        CTA
    ---------*/
    #big-data .section .bd-hero-actions {
        display: flex;
        gap: 18px;
        margin-top: 30px;
    }

        #big-data .section .bd-hero-actions .btn {
            min-width: 200px;
            padding: 16px 36px;
            font-size: 1.05rem;
        }

    #big-data .btn.primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 40px rgba(79,163,209,.45);
    }

    #big-data .btn.outline:hover {
        background: var(--bd-primary);
        color: #fff;
        box-shadow: 0 14px 30px rgba(79,163,209,.35);
    }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 1024px) {
    #big-data .bd-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #big-data .bd-hero-actions {
        justify-content: center;
    }

    #big-data .bd-stats {
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    #big-data .section {
        padding: 60px 0;
    }

    #big-data .bd-card {
        padding: 28px;
    }

    #big-data .bd-stats > div {
        min-width: 160px;
        padding: 22px;
    }
}

@media (max-width: 480px) {
    #big-data .bd-hero-actions {
        flex-direction: column;
    }

        #big-data .bd-hero-actions .btn {
            width: 100%;
        }

    #big-data .bd-stats h4 {
        font-size: 2rem;
    }
}

/*#endregion*/

/*#region BUSINESS INTELLIGENCE*/
/* ---------- THEME VARS ---------- */
#business-intelligence {
    --bi-primary: #2563eb;
    --bi-secondary: #38bdf8;
    --bi-accent: #22c55e;
    --bi-highlight: #f59e0b;
    --bi-dark: #0f172a;
    --bi-bg: #f1f7ff;
    /*    font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;*/
}

    /*----------
        HERO
    ----------*/
    #business-intelligence .bi-hero {
        margin: auto;
        position: relative;
        min-height: 80vh;
        display: flex;
        align-items: center;
        background: linear-gradient(0deg, rgba(15,23,42,.82), rgba(37,99,235,.42)), url("/Assets/Hero/Services/BusinessIntelligence.webp") center/cover no-repeat;
        padding: 40px 0;
        overflow: hidden;
    }

    #business-intelligence .bi-hero-overlay {
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 35% 40%, rgba(255,255,255,.04), transparent 40%);
        z-index: 1;
    }

    #business-intelligence .bi-hero-grid {
        display: flex;
        justify-content: center;
        position: relative;
        z-index: 2;
        gap: 20px;
    }

@media(min-width: 960px) {
    #business-intelligence .bi-hero-grid {
        grid-template-columns: 0.7fr 0.3fr;
        align-items: center;
    }
}

/* ---------- HERO CONTENT ---------- */
#business-intelligence .bi-hero-content {
    padding: 40px 80px;
    text-align: center;
    max-width: 820px;
    color: #fff;
    transition: all 0.3s ease;
}

    #business-intelligence .bi-hero-content:hover {
        backdrop-filter: blur(7px);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.03);
        transform: translateY(-10px) scale(1.05);
        box-shadow: -2px -2px 20px rgba(255, 255, 255, 0.2), 5px 5px 10px rgba(0, 0, 0, 0.2);
    }

#business-intelligence .bi-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-weight: 600;
    margin-bottom: 18px;
    font-size: 0.95rem;
}

    #business-intelligence .bi-tag i {
        color: var(--bi-secondary);
    }

#business-intelligence .bi-hero-content h1 {
    font-size: 2.6rem;
    line-height: 1.05;
    margin: 8px 0 18px;
    color: #fff;
    font-weight: 800;
}

@media(min-width: 960px) {
    #business-intelligence .bi-hero-content h1 {
        font-size: 3.4rem;
    }
}

#business-intelligence .bi-hero-content h1 span {
    color: var(--bi-secondary);
}

#business-intelligence .lead, .bi-hero-content p {
    font-weight: 500;
    font-size: 1.05rem;
    text-align: center;
    margin: auto;
    max-width: 640px;
    margin-bottom: 18px;
}

/* ---------- HERO ACTION BUTTONS ---------- */
#business-intelligence .bi-hero-actions {
    display: flex;
    justify-content: space-evenly;
    gap: 14px;
    margin: 18px 0 8px;
    flex-wrap: wrap;
}

#business-intelligence .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    transition: transform .28s ease, box-shadow .28s ease;
    cursor: pointer;
    border: none;
}

    #business-intelligence .btn.primary {
        background: linear-gradient(135deg, var(--bi-primary), var(--bi-secondary));
        color: #fff;
        box-shadow: 0 14px 34px rgba(37,99,235,.32);
    }

        #business-intelligence .btn.primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 26px 60px rgba(37,99,235,.4);
        }

    #business-intelligence .btn.outline {
        background: transparent;
        color: #fff;
        border: 2px solid rgba(255,255,255,.22);
    }

        #business-intelligence .btn.outline::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,.08);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .28s ease;
            z-index: -1;
        }

        #business-intelligence .btn.outline:hover {
            color: #fff;
        }

            #business-intelligence .btn.outline:hover::before {
                transform: scaleX(1);
            }

        #business-intelligence .btn.outline:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(37,99,235,.18);
        }

/* ---------- HERO STATS (overlay cards) ---------- */
#business-intelligence .bi-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-top: 24px;
    flex-wrap: wrap;
}

    #business-intelligence .bi-stats .stat {
        background: rgba(255,255,255,.09);
        padding: 14px 18px;
        border-radius: 12px;
        text-align: center;
        backdrop-filter: blur(6px);
        border: 1px solid rgba(255,255,255,.06);
    }

    #business-intelligence .bi-stats h3 {
        font-size: 1.6rem;
        color: #fff;
        margin: 0;
        font-weight: 800;
    }

    #business-intelligence .bi-stats p {
        color: rgba(235,239,242,.95);
        margin-top: 6px;
        font-weight: 600;
        font-size: 0.95rem;
    }

#business-intelligence .hero-divider {
    width: 100%;
    line-height: 0;
    overflow: hidden;
    margin-top: -50px;
}

    #business-intelligence .hero-divider svg {
        width: 100%;
        height: 100px;
        display: block;
    }

    #business-intelligence .hero-divider.reverse svg {
        transform: rotate(180deg);
    }

/*--------------
    SECTIONS
--------------*/
#business-intelligence .section {
    padding: 40px 0;
}

    #business-intelligence .section.alt {
        background: #fbfdff;
    }

#business-intelligence .section-title {
    text-align: center;
    font-size: 1.9rem;
    font-weight: 800;
    margin-bottom: 28px;
    color: var(--bi-dark);
    position: relative;
}

    #business-intelligence .section-title::after {
        content: "";
        width: 70px;
        height: 4px;
        background: linear-gradient(90deg, var(--bi-primary), var(--bi-secondary));
        display: block;
        margin: 12px auto 0;
        border-radius: 4px;
    }

/*-------------------
    GRID / CARDS
-------------------*/
#business-intelligence .bi-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 18px;
}

#business-intelligence .bi-card {
    height: 100%;
    background: #fff;
    padding: 28px;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 12px 30px rgba(6, 18, 39, .06);
    transition: transform .35s ease, box-shadow .35s ease;
    border: 1px solid rgba(6,18,39,.03);
}

    #business-intelligence .bi-card i {
        display: inline-block;
        font-size: 2rem;
        color: var(--bi-primary);
        margin-bottom: 12px;
        transition: all .35s ease;
    }

    #business-intelligence .bi-card h4 {
        margin: 8px 0;
        color: var(--bi-dark);
    }

    #business-intelligence .bi-card p {
        color: #475569;
        margin: 0;
        font-size: 0.95rem;
    }

    #business-intelligence .bi-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 30px 70px rgba(37,99,235,.12);
    }

        #business-intelligence .bi-card:hover i {
            color: var(--bi-accent);
            transform: scale(1.18) translateY(-5px);
            filter: drop-shadow(0 8px 18px var(--bi-accent));
        }

/*-------------------
    IMPACT CARDS
-------------------*/
#business-intelligence .bi-impact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px;
    margin-top: 18px;
}

#business-intelligence .impact-card {
    background: #fff;
    padding: 20px 26px;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(6,18,39,.06);
    text-align: center;
    min-width: 160px;
    transition: transform .3s ease, box-shadow .3s ease;
}

    #business-intelligence .impact-card h3 {
        color: var(--bi-primary);
        margin: 0;
        font-weight: 800;
    }

    #business-intelligence .impact-card p {
        margin: 8px 0 0;
        color: #475569;
        font-weight: 700;
    }

    #business-intelligence .impact-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 60px rgba(37,99,235,.12);
    }

/*----------------------------
    Accessibility helpers
----------------------------*/
#business-intelligence .text-center {
    text-align: center;
}

#business-intelligence .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/*-------------------
    RESPONSIVE
-------------------*/
@media (max-width: 900px) {
    #business-intelligence .bi-hero {
        min-height: 64vh;
        padding: 30px 0;
    }

    #business-intelligence .bi-hero-content h1 {
        font-size: 2.4rem;
    }

    #business-intelligence .bi-hero-grid {
        grid-template-columns: 1fr;
    }

    #business-intelligence .bi-hero-content {
        padding: 20px 0;
    }
}

@media (max-width: 480px) {
    #business-intelligence .bi-hero-content h1 {
        font-size: 1.7rem;
    }

    #business-intelligence .bi-stats .stat {
        min-width: 110px;
        padding: 10px 12px;
    }

    #business-intelligence .btn {
        padding: 10px 14px;
        font-size: 0.95rem;
    }
}

/*#endregion*/

/*#region DATA ANALYTICS*/
#data-analytics {
    --primary: #1e3a5f;
    --secondary: #3fbac2;
    --accent: #f4a261;
    --bg: #f5f7fa;
    --card: #ffffff;
    --text: #1f2937;
}

    /*-------------
        COMMON
    -------------*/
    #data-analytics .section {
        padding: 80px 0;
        background: var(--bg);
    }

        #data-analytics .section.alt {
            background: #ffffff;
        }

    #data-analytics .section-title {
        text-align: center;
        font-size: 2.4rem;
        margin-bottom: 60px;
        color: var(--text);
    }

    #data-analytics .lead {
        font-size: 1.1rem;
        line-height: 1.7;
        opacity: .9;
    }

    /*-----------
        HERO
    -----------*/
    #data-analytics .da-hero {
        min-height: 72vh;
        height: calc(85vh - 80px);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 28px 18px;
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.65)), url('/Assets/Hero/Services/DataAnalytics.webp') center / cover no-repeat;
        color: #fff;
    }

    #data-analytics .da-hero-grid {
        display: block;
        max-width: 1100px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        backdrop-filter: blur(8px);
        padding: 25px 0;
        border: 1px solid rgba(255, 255,255, 0.1);
        border-radius: 10px;
        transition: all 0.3s ease;
    }

        #data-analytics .da-hero-grid:hover {
            transform: translateY(-5px) scale(1.005);
            backdrop-filter: blur(15px);
        }

    #data-analytics .da-hero-content {
        color: #fff;
        text-align: left;
        max-width: 760px;
        margin: 0 auto;
    }

        #data-analytics .da-hero-content h1 {
            text-align: center;
            font-size: clamp(2.2rem, 5vw, 3.8rem);
            line-height: 1.08;
            margin: 8px 0 18px;
            color: #ffffff;
        }

            #data-analytics .da-hero-content h1 span {
                color: var(--secondary);
            }

        #data-analytics .da-hero-content .lead {
            text-align: center;
            max-width: 760px;
            margin: 18px 0 26px;
            font-size: 1.05rem;
            opacity: 0.95;
            color: rgba(255,255,255,0.95);
        }

    #data-analytics .hero-actions,
    #data-analytics .da-actions {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 18px;
    }

    #data-analytics .btn {
        outline: none;
        border: none;
        padding: 14px 30px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.28s ease;
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

        #data-analytics .btn.primary {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: 0 10px 30px rgba(30,58,95,0.25);
        }

            #data-analytics .btn.primary:hover {
                transform: translateY(-3px);
                box-shadow: 0 18px 40px rgba(30,58,95,0.30);
                opacity: 0.98;
            }

        #data-analytics .btn.outline {
            border: 2px solid var(--accent);
            color: var(--accent);
            background: transparent;
        }

            #data-analytics .btn.outline:hover {
                background: var(--accent);
                color: #fff;
                transform: translateY(-3px);
                box-shadow: 0 10px 30px rgba(244,162,97,0.14);
            }

    #data-analytics .da-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
        gap: 30px;
        margin-top: 28px;
        color: rgba(255,255,255,0.95);
    }

    #data-analytics .stat {
        position: relative;
        box-sizing: border-box;
        margin: auto;
        text-align: center;
        padding-bottom: 14px;
    }

        #data-analytics .stat::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 20%;
            height: 3px;
            background: rgba(255,255,255,0.25);
            transform: translateX(-50%);
            transition: width .35s ease, background .35s ease;
            border-radius: 2px;
        }

        #data-analytics .stat:hover::after {
            width: 60%;
            background: var(--secondary);
        }


        #data-analytics .stat h3 {
            display: inline-block;
            font-weight: 800;
            font-size: 1.8rem;
            margin: 0;
            color: var(--accent);
            line-height: 1;
            transition: all 0.3s ease;
        }

        #data-analytics .stat:hover h3 {
            transform: translateY(-5px);
            filter: drop-shadow(0 6px 15px var(--accent));
        }

    #data-analytics .hero-divider {
        background: #f5f7fa;
        width: 100%;
        line-height: 0;
        overflow: hidden;
        margin-top: -80px;
    }

        #data-analytics .hero-divider svg {
            width: 100%;
            height: 160px;
            display: block;
        }

        #data-analytics .hero-divider.reverse svg {
            transform: rotate(180deg);
        }

@media (max-width: 992px) {
    #data-analytics .da-hero-content {
        text-align: center;
        padding: 0 18px;
    }

    #data-analytics .hero-actions,
    #data-analytics .da-stats {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    #data-analytics .da-hero {
        height: auto;
        min-height: 60vh;
        padding: 36px 16px;
    }

    #data-analytics .da-hero-content h1 {
        font-size: clamp(1.8rem, 7vw, 2.6rem);
    }

    #data-analytics .da-stats {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/*---------
   STATS
---------*/
/*#data-analytics .da-stats {
    display: flex;
    gap: 40px;
    margin-top: 48px;
}

#data-analytics .stat {
    padding-left: 18px;
    border-left: 3px solid var(--secondary);
}

    #data-analytics .stat h3 {
        font-size: 2.2rem;
        color: var(--accent);
    }*/

/*-------------------
   SERVICE CARDS
-------------------*/
#data-analytics .da-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    gap: 34px;
}

#data-analytics .da-card {
    height: 100%;
    background: var(--card);
    padding: 38px 36px;
    border-radius: 20px;
    box-shadow: 0 18px 40px rgba(0,0,0,.08);
    transition: all .35s ease;
}

    #data-analytics .da-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 28px 60px rgba(0,0,0,.15);
    }

    #data-analytics .da-card i {
        display: block;
        margin: auto;
        font-size: 2.2rem;
        color: var(--secondary);
        margin-bottom: 16px;
        transition: all 0.3s ease;
    }

    #data-analytics .da-card:hover i {
        color: var(--accent);
        transform: scale(1.05) translateY(-5px);
        filter: drop-shadow(0 8px 15px var(--accent));
    }
/*--------------
   TIMELINE
--------------*/
#data-analytics .da-timeline {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
}

    #data-analytics .da-timeline .step {
        height: 100%;
        background: var(--card);
        padding: 32px;
        border-radius: 18px;
        text-align: center;
        box-shadow: 0 16px 36px rgba(0,0,0,.08);
        transition: all 0.3s ease;
    }

    #data-analytics .da-timeline i {
        font-size: 2rem;
        color: var(--secondary);
        margin-bottom: 12px;
        transition: all 0.3s ease;
    }

    #data-analytics .da-timeline .step:hover {
        transform: translateY(-12px);
        box-shadow: 0 28px 60px rgba(0,0,0,.15);
    }

        #data-analytics .da-timeline .step:hover i {
            color: var(--accent);
            transform: scale(1.05) translateY(-5px);
            filter: drop-shadow(0 8px 15px var(--accent));
        }

/*--------------------------
   INDUSTRY ICON CARDS
--------------------------*/
#data-analytics .da-icon-card {
    height: 100%;
    background: var(--card);
    padding: 22px 24px;
    border-radius: 14px;
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center;
    transition: .3s;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

    #data-analytics .da-icon-card:hover {
        background: var(--primary);
        color: #fff;
        transform: translateY(-6px);
    }

        #data-analytics .da-icon-card:hover i {
            color: var(--accent);
            filter: drop-shadow(0 8px 15px var(--accent));
        }
/*----------------
   RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #data-analytics .da-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #data-analytics .da-actions,
    #data-analytics .da-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    #data-analytics .da-hero-visual img {
        margin: 40px auto 0;
    }

    #data-analytics .da-timeline {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 576px) {
    #data-analytics .da-hero h1 {
        font-size: 2.3rem;
    }

    #data-analytics .da-timeline {
        grid-template-columns: 1fr;
    }
}

/*#endregion*/

/*#region MACHINE LEARNING*/
#machine-learning {
    --ml-primary: #00bcd4;
    --ml-secondary: #e8f4f8;
    --ml-accent: #ff8f00;
    --ml-bg: #ffffff;
    --ml-card: #ffffff;
    --ml-text: #0f172a;
    --ml-muted: #475569;
    --ml-hero-img: url('/Assets/Hero/Services/MachineLearning.webp');
    background: var(--ml-bg);
    color: var(--ml-text);
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #machine-learning .ml-hero {
        min-height: 640px;
        display: grid;
        place-items: center;
        position: relative;
        padding: 80px 0;
        overflow: hidden;
        background-image: linear-gradient( 180deg, rgba(255,255,255,0.50) 15%, rgba(255,255,255,0.100) 55%, rgba(255,255,255,0.10) 100% ), var(--ml-hero-img);
        background-size: cover;
        background-position: right center;
        background-repeat: no-repeat;
    }

        #machine-learning .ml-hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(600px 200px at 10% 50%, rgba(0,188,212,0.08), transparent 14%), radial-gradient(400px 120px at 20% 70%, rgba(255,143,0,0.06), transparent 10%);
            pointer-events: none;
        }

    #machine-learning .ml-hero-content {
        backdrop-filter: blur(15px);
        background: rgba(0,229,255,0.02);
        border: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 2;
        margin: auto;
        border-radius: 10px;
        text-align: center;
        max-width: 980px;
        padding: 30px;
        display: grid;
        gap: 18px;
        align-items: center;
    }

    #machine-learning .ml-tag {
        display: inline-block;
        background: rgba(0,229,255,0.40);
        color: #fff;
        font-weight: 500;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 13px;
        letter-spacing: 0.4px;
        margin: 0 auto;
    }

    #machine-learning .ml-hero-content h1 {
        font-size: clamp(28px, 4.2vw, 56px);
        line-height: 1.02;
        margin: 6px 0 0;
        font-weight: 700;
        color: var(--ml-text);
        text-wrap: balance;
        text-shadow: 1px 1px 1px #fff;
    }

        #machine-learning .ml-hero-content h1 span {
            color: var(--ml-primary);
            text-shadow: 1px 1px 1px #fff;
        }

    #machine-learning .ml-hero-content p {
        color: #fff;
        font-size: 16px;
        margin: 8px 0 0;
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    #machine-learning .ml-actions {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-top: 18px;
        flex-wrap: wrap;
    }

    #machine-learning .btn {
        padding: 12px 22px;
        border-radius: 10px;
        font-weight: 600;
        transition: all 0.32s cubic-bezier(.2,.9,.2,1);
        display: inline-flex;
        gap: 10px;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
        border: none;
    }

        #machine-learning .btn.primary {
            background: linear-gradient(135deg, var(--ml-primary), #4dd0e1);
            color: #ffffff;
            box-shadow: 0 10px 24px rgba(0,188,212,0.25);
        }

            #machine-learning .btn.primary:hover {
                transform: translateY(-6px) scale(1.02);
                box-shadow: 0 18px 40px rgba(0,188,212,0.35);
            }

        #machine-learning .btn.outline {
            border: 2px solid var(--ml-primary);
            color: var(--ml-primary);
            background: transparent;
        }

            #machine-learning .btn.outline:hover {
                background: rgba(0,188,212,0.08);
                transform: translateY(-4px);
            }

    #machine-learning .ml-stats {
        display: flex;
        gap: 22px;
        justify-content: center;
        margin-top: 18px;
        flex-wrap: wrap;
    }

        #machine-learning .ml-stats .stat {
            min-width: 120px;
            text-align: center;
        }

            #machine-learning .ml-stats .stat h3 {
                margin: 0;
                font-size: 2rem;
                color: var(--ml-accent);
                font-weight: 800;
            }

            #machine-learning .ml-stats .stat p {
                margin: 6px 0 0;
                font-size: 15px;
                font-weight: 500;
                color: #fff;
            }

    #machine-learning .hero-divider {
        background: #fff;
        width: 100%;
        line-height: 0;
        overflow: hidden;
        margin-top: -60px;
    }

        #machine-learning .hero-divider svg {
            width: 100%;
            height: 110px;
            display: block;
        }

        #machine-learning .hero-divider.reverse svg {
            transform: rotate(180deg);
        }

    /*--------------
        SECTION
    --------------*/
    #machine-learning .section {
        padding: 60px 3%;
    }

        #machine-learning .section.alt {
            background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent 30%);
        }

    #machine-learning .section-title {
        text-align: center;
        margin-bottom: 28px;
        font-size: 2.5rem;
        color: var(--ml-text);
    }

    /*-------------
        SERVICE
    -------------*/
    #machine-learning .ml-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 20px;
    }

    #machine-learning .ml-card {
        height: 100%;
        background: #ffffff;
        padding: 22px;
        border-radius: 14px;
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        border: 1px solid #e5e7eb;
        min-height: 140px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    }

        #machine-learning .ml-card i {
            display: block;
            text-align: center;
            font-size: 30px;
            color: var(--ml-primary);
            margin-bottom: 12px;
            margin: auto;
            transition: transform .35s ease, color .35s ease;
        }

        #machine-learning .ml-card h3 {
            text-align: center;
            margin: 6px 0 8px;
            font-size: 1.2rem;
        }

        #machine-learning .ml-card p {
            color: var(--ml-muted);
            font-size: 14px;
            line-height: 1.45;
            margin: 0;
        }

        #machine-learning .ml-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 24px 50px rgba(0,188,212,0.18);
            border-color: rgba(0,188,212,0.35);
        }

            #machine-learning .ml-card:hover i {
                color: var(--ml-accent);
                transform: scale(1.15) translateY(-5px);
                filter: drop-shadow(0 8px 20px var(--ml-accent));
            }

    /*-----------------
        ML PIPELINE
    -----------------*/
    #machine-learning .ml-pipeline {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 28px;
        align-items: start;
    }

    #machine-learning .pipeline-steps {
        display: grid;
        gap: 16px;
    }

    #machine-learning .step {
        height: 100%;
        display: flex;
        gap: 14px;
        align-items: flex-start;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        padding: 14px;
        border-radius: 12px;
        transition: all 0.3s ease;
    }

        #machine-learning .step:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 0px 20px rgba(0,0,0, 0.1);
        }

        #machine-learning .step i {
            min-width: 44px;
            height: 44px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: rgba(0,188,212,0.12);
            color: var(--ml-primary);
            font-size: 18px;
        }

        #machine-learning .step h4 {
            margin: 0 0 4px;
            font-size: 15px;
        }

        #machine-learning .step p {
            margin: 0;
            color: var(--ml-muted);
            font-size: 13px;
        }

    /*------ Tech Stack Card --------*/
    #machine-learning .tech-stack {
        background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
        padding: 18px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.03);
    }

        #machine-learning .tech-stack h4 {
            margin-top: 0;
        }

    #machine-learning .tech-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
    }


        #machine-learning .tech-list i {
            color: var(--ml-accent);
            transition: all 0.3s ease;
        }

    #machine-learning .tech-item {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 13px;
        color: var(--ml-muted);
        display: inline-flex;
        gap: 8px;
        align-items: center;
        transition: all 0.3s ease;
    }

    #machine-learning .tech-list .tech-item:hover {
        transform: translateY(-5px);
    }

        #machine-learning .tech-list .tech-item:hover i {
            color: var(--ml-primary);
        }

    /*--------------------------
       PERFORMANCE & SECURITY
    --------------------------*/
    #machine-learning .ml-insights-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 20px;
    }

    #machine-learning .insight {
        height: 100%;
        position: relative;
        padding: 18px;
        border-radius: 16px;
        background: #ffffff;
        border: 1px solid #e5e7eb;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
    }

        #machine-learning .insight::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background: linear-gradient( 120deg, rgba(0,188,212,0.12), transparent 40% );
            opacity: 0;
            transition: opacity 0.35s ease;
            pointer-events: none;
        }

        #machine-learning .insight:hover::before {
            opacity: 1;
        }

        #machine-learning .insight:hover {
            transform: translateY(-10px);
            box-shadow: 0 24px 50px rgba(0,188,212,0.18);
            border-color: rgba(0,188,212,0.35);
        }

        #machine-learning .insight h4 {
            margin-top: 0;
        }

        #machine-learning .insight p {
            color: var(--ml-muted);
            font-size: 14px;
        }

        #machine-learning .insight i {
            font-size: 26px;
            color: var(--ml-primary);
            margin-bottom: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background: rgba(0,188,212,0.12);
            transition: all 0.35s ease;
        }

        #machine-learning .insight:hover i {
            background: linear-gradient( 135deg, var(--ml-primary), var(--ml-accent) );
            color: #ffffff;
            transform: scale(1.1) rotate(-3deg);
            box-shadow: 0 12px 30px rgba(0,188,212,0.35);
        }


    #machine-learning .muted {
        color: var(--ml-muted);
        font-size: 14px;
    }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 920px) {
    #machine-learning .ml-pipeline {
        grid-template-columns: 1fr;
    }

    #machine-learning .ml-hero {
        background-position: center right;
        min-height: 520px;
        padding: 60px 0;
    }

    #machine-learning .ml-card {
        min-height: unset;
    }

    #machine-learning .ml-hero-content {
        padding: 20px;
    }
}

@media (max-width: 520px) {
    #machine-learning .ml-hero {
        padding: 48px 0;
        min-height: 420px;
    }

    #machine-learning .ml-actions {
        gap: 8px;
    }

    #machine-learning .ml-stats {
        gap: 10px;
    }

    #machine-learning .ml-hero-content p {
        font-size: 14px;
    }
}
/*#endregion*/

/*#region APP DESIGN*/
#app-design {
    --app-bg: #fff8f3;
    --app-surface: #ffffff;
    --app-muted: #6b7280;
    --app-text: #0f1724;
    --app-accent: #00bcd4;
    --app-accent-2: #ff8f00;
    --radius: 14px;
    --shadow-sm: 0 8px 20px rgba(18,24,32,0.06);
    --shadow-lg: 0 30px 70px rgba(0,188,212,0.18);
    font-family: "Inter", system-ui, sans-serif;
    background: var(--app-bg);
    color: var(--app-text);
    padding-bottom: 80px;
    position: relative;
    overflow: hidden;
}

    #app-design .blob {
        position: absolute;
        border-radius: 999px;
        filter: blur(40px);
        opacity: .25;
        pointer-events: none;
    }

        #app-design .blob.cyan {
            width: 300px;
            height: 300px;
            background: var(--app-accent);
            top: 80px;
            left: -100px;
        }

        #app-design .blob.orange {
            width: 260px;
            height: 260px;
            background: var(--app-accent-2);
            top: 300px;
            right: -80px;
        }

    /*-----------
        HERO
    -----------*/
    #app-design .hero {
        display: grid;
        grid-template-columns: 1fr 520px;
        gap: 40px;
        align-items: center;
        padding: 80px 0 50px;
    }

    #app-design .hero-tag {
        display: inline-flex;
        gap: 10px;
        align-items: center;
        padding: 8px 14px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(0,188,212,.15), rgba(255,143,0,.08));
        font-weight: 600;
        font-size: 13px;
        color: var(--app-accent);
    }

    #app-design h1 {
        font-size: clamp(30px, 4.5vw, 50px);
        margin: 18px 0 12px;
        font-weight: 800;
    }

    #app-design .lead {
        color: var(--app-muted);
        max-width: 560px;
    }

    #app-design .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        border-radius: 12px;
        font-weight: 600;
        text-decoration: none;
        transition: all .3s cubic-bezier(.2,.9,.2,1);
    }

        #app-design .btn.primary {
            background: linear-gradient(90deg,var(--app-accent),#4dd0e1);
            color: #fff;
        }

            #app-design .btn.primary:hover {
                transform: translateY(-6px);
                box-shadow: var(--shadow-lg);
            }

        #app-design .btn.ghost {
            border: 1px solid rgba(15,23,36,.08);
            color: var(--app-text);
        }

            #app-design .btn.ghost:hover {
                background: rgba(0,188,212,.06);
                transform: translateY(-4px);
            }

    #app-design .hero-illustration {
        height: 420px;
        border-radius: var(--radius);
        background: url('/Assets/Hero/Services/AppDesign.webp') center/contain no-repeat;
    }

    /*---------------
        SECTIONS 
    ---------------*/
    #app-design .section {
        padding: 60px 3%;
    }

    #app-design .section-title {
        text-align: center;
        /*        font-size: 24px;*/
        /*        font-weight: 800;*/
        margin-bottom: 18px;
    }

    /*--------------
        FEATURES 
    --------------*/
    #app-design .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
        gap: 20px;
    }

    #app-design .feature {
        background: var(--app-surface);
        padding: 20px;
        border-radius: 14px;
        border: 1px solid rgba(15,23,36,.05);
        box-shadow: var(--shadow-sm);
        transition: all .35s cubic-bezier(.2,.9,.2,1);
    }

        #app-design .feature i {
            width: 54px;
            height: 54px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            font-size: 24px;
            color: var(--app-accent);
            background: rgba(0,188,212,.08);
            transition: all .35s cubic-bezier(.2,.9,.2,1);
        }

        #app-design .feature:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-lg);
        }

            #app-design .feature:hover i {
                transform: scale(1.15) rotate(-6deg);
                background: linear-gradient(135deg,var(--app-accent),var(--app-accent-2));
                color: #fff;
            }

    /*-------------
        PROCESS 
    -------------*/
    #app-design .pipeline {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 24px;
    }

    #app-design .step {
        height: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 14px;
        padding: 16px;
        background: #fff;
        border-radius: 12px;
        border: 1px solid rgba(15,23,36,.05);
        transition: all .35s ease;
    }

        #app-design .step i {
            width: 46px;
            height: 46px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: rgba(0,188,212,.1);
            color: var(--app-accent);
            transition: all .35s ease;
        }

        #app-design .step:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-lg);
        }

            #app-design .step:hover i {
                background: linear-gradient(135deg,var(--app-accent),var(--app-accent-2));
                color: #fff;
            }

    /*----------------
        TECH STACK 
    ----------------*/
    #app-design .tech {
        background: #fff;
        padding: 18px;
        border-radius: 14px;
        border: 1px solid rgba(15,23,36,.05);
        box-shadow: var(--shadow-sm);
    }

        #app-design .tech div {
            display: flex;
            flex-wrap: wrap;
        }

            #app-design .tech div .tag {
                display: inline-flex;
                gap: 8px;
                align-items: center;
                padding: 8px 12px;
                border-radius: 8px;
                background: rgba(0,0,0,.04);
                margin: 6px;
                transition: all .3s ease;
            }

        #app-design .tech .tag:hover {
            transform: translateY(-4px);
            background: linear-gradient(90deg,rgba(0,188,212,.15),rgba(255,143,0,.15));
        }

    /*------------------
        CTA SECTION
    ------------------*/
    #app-design .cta {
        margin-top: 40px;
        padding: 60px 40px;
        border-radius: 20px;
        background: linear-gradient( 135deg, rgba(0,188,212,0.18), rgba(255,143,0,0.15) );
        box-shadow: 0 0px 100px rgba(0,188,212,0.25);
        text-align: center;
        position: relative;
        overflow: hidden;
    }

        #app-design .cta::before,
        #app-design .cta::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        #app-design .cta::before {
            background: radial-gradient( circle at top left, rgba(255,255,255,0.5), transparent 60% );
        }

        #app-design .cta::after {
            background: radial-gradient( circle at bottom right, rgba(0,188,212,0.35), transparent 55% );
        }

        #app-design .cta h2 {
            font-size: clamp(26px,4vw,38px);
            font-weight: 800;
            margin-bottom: 10px;
        }

        #app-design .cta p {
            max-width: 620px;
            margin: 0 auto 24px;
            color: #0f1724;
            font-size: 16px;
        }

    #app-design .cta-actions {
        display: flex;
        justify-content: center;
        gap: 16px;
        flex-wrap: wrap;
    }

    #app-design .cta .btn {
        padding: 14px 22px;
        font-size: 15px;
    }

        #app-design .cta .btn.primary:hover {
            transform: translateY(-6px) scale(1.03);
            box-shadow: 0 20px 45px rgba(0,188,212,0.45);
        }

        #app-design .cta .btn.ghost {
            background: rgba(255,255,255,0.65);
            backdrop-filter: blur(6px);
        }

            #app-design .cta .btn.ghost:hover {
                background: #fff;
                transform: translateY(-4px);
            }

/*-----------------
    RESPONSIVE
-----------------*/
@media (max-width:900px) {
    #app-design .hero {
        grid-template-columns: 1fr;
    }

    #app-design .pipeline {
        grid-template-columns: 1fr;
    }

    #app-design .hero-illustration {
        height: 300px;
        order: -1;
    }
}

/*#endregion*/

/*#region BRANDING*/
#branding {
    --brand-1: #3fb7ad;
    --brand-2: #7fd1c7;
    --accent: #f28b82;
    --accent-2: #f6c26b;
    --text: #1f2937;
    --muted: #6b7280;
    --bg: #f8fafc;
    --card: #ffffff;
    --border: #e5e7eb;
    --radius: 18px;
    --max-width: 1180px;
}

    #branding,
    #branding * {
        box-sizing: border-box;
    }

#branding {
    font-family: Inter, Poppins, system-ui;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

    /*-----------
        HERO
    -----------*/
    #branding .hero {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        background: linear-gradient(180deg,#ffffff,#f1f5f9);
        border-radius: 0 0 32px 32px;
        padding: 56px;
        margin: 0 20px;
        border: 1px solid var(--border);
    }

    #branding .tag {
        display: inline-flex;
        gap: 10px;
        align-items: center;
        background: #ecfeff;
        padding: 10px 18px;
        border-radius: 999px;
        color: var(--brand-1);
        font-weight: 700;
    }

    #branding h1 {
        font-size: 46px;
        font-weight: 800;
        line-height: 1.05;
        margin: 22px 0;
    }

        #branding h1 span {
            color: var(--brand-1);
        }

    #branding .lead {
        font-size: 17px;
        color: #475569;
        max-width: 540px;
    }

    #branding .hero-actions {
        display: flex;
        gap: 16px;
        margin-top: 28px;
    }

    #branding .btn {
        font-weight: 500;
        transition: transform 0.35s ease, box-shadow 0.35s ease;
    }

        #branding .btn.primary {
            background: var(--brand-1);
            color: #fff;
        }

        #branding .btn.ghost {
            outline: 2px solid var(--accent);
        }

        #branding .btn.primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 36px rgba(63, 183, 173, 0.45), 0 4px 12px rgba(127, 209, 199, 0.35);
        }

        #branding .btn.ghost:hover {
            background: linear-gradient(135deg, #e6fffa, #fef3c7);
            border-color: transparent;
            color: var(--brand-1);
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(0,0,0,0.12);
        }


    #branding .hero-visual {
        background: linear-gradient(135deg, #e6fffa, #fef3c7);
        border-radius: 26px;
        display: grid;
        place-items: center;
        transition: transform 0.4s ease;
        overflow: visible;
    }

        #branding .hero-visual img {
            max-width: 100%;
            height: auto;
            transform: scale(1.15);
            transition: transform 0.45s ease, filter 0.45s ease;
            will-change: transform;
        }

        #branding .hero-visual:hover img {
            transform: scale(1.35) translateY(-6px);
            filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.25));
        }

    /*--------------
        SECTIONS
    --------------*/
    #branding section {
        margin-top: 90px;
    }

    #branding .section-head {
        text-align: center;
        margin-bottom: 42px;
    }

        #branding .section-head h2 {
            font-size: 34px;
            font-weight: 800;
        }

        #branding .section-head p {
            color: var(--muted);
            max-width: 640px;
            margin: 12px auto 0;
        }

    /*--------------
        SERVICES
    --------------*/
    #branding .grid-3 {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 28px;
    }

    #branding .card {
        background: var(--card);
        padding: 30px;
        border-radius: var(--radius);
        border: 1px solid var(--border);
        transition: .35s;
    }

        #branding .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 70px rgba(0,0,0,.08);
        }

        #branding .card i {
            font-size: 30px;
            color: var(--brand-1);
        }

        #branding .card h3 {
            margin: 16px 0 10px;
        }

    /*-------------
        PROCESS
    -------------*/
    #branding .process {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 24px;
    }

    #branding .step {
        background: #fff;
        padding: 26px;
        border-radius: var(--radius);
        border: 1px dashed var(--brand-2);
    }

        #branding .step span {
            font-weight: 800;
            color: var(--accent);
        }

    /*---------
        CTA
    ---------*/
    #branding .cta-section {
        background: linear-gradient(135deg,var(--brand-1),var(--brand-2));
        padding: 70px;
        border-radius: 36px;
        text-align: center;
        color: #fff;
    }

    #branding .cta-btn {
        background: #fff;
        color: #111827;
        margin-top: 24px;
    }

    /*---------------------
        ENHANCED HOVERS
    ---------------------*/
    #branding .card i,
    #branding .impact-card i,
    #branding .industry-card i {
        transition: all 0.4s ease;
    }

    #branding .card:hover i {
        transform: rotate(-6deg) scale(1.2);
        color: var(--accent);
        filter: drop-shadow(0 8px 10px rgba(242, 139, 130, 0.85));
    }

    #branding .impact-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 26px;
    }

    #branding .impact-card {
        background: linear-gradient(180deg, #ffffff, #f8fafc);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 36px 24px;
        text-align: center;
        transition: all 0.45s ease;
    }

        #branding .impact-card i {
            font-size: 34px;
            color: var(--brand-1);
            margin-bottom: 14px;
        }

        #branding .impact-card:hover {
            transform: translateY(-14px) scale(1.03);
            box-shadow: 0 40px 80px rgba(0,0,0,0.1);
        }

            #branding .impact-card:hover i {
                transform: translateY(-6px) scale(1.2);
                color: var(--accent);
                filter: drop-shadow(0 8px 10px rgba(242, 139, 130, 0.85));
            }

    /*-----------------
        INDUSTRIES
    -----------------*/
    #branding .industry-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 22px;
    }

    #branding .industry-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 26px 16px;
        text-align: center;
        transition: all 0.4s ease;
        cursor: pointer;
    }

        #branding .industry-card i {
            font-size: 26px;
            color: var(--brand-1);
            margin-bottom: 10px;
            display: block;
        }

        #branding .industry-card:hover {
            transform: translateY(-10px);
            background: linear-gradient(135deg, #e6fffa, #fef3c7);
            box-shadow: 0 30px 60px rgba(0,0,0,0.08);
        }

            #branding .industry-card:hover i {
                transform: scale(1.25) rotate(6deg);
                color: var(--accent);
                filter: drop-shadow(0 8px 10px rgba(242, 139, 130, 0.85));
            }

/*-----------------
    RESPONSIVE
-----------------*/
@media (max-width: 900px) {
    #branding .impact-grid {
        grid-template-columns: 1fr 1fr;
    }

    #branding .industry-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #branding .hero {
        grid-template-columns: 1fr;
    }

    #branding .grid-3,
    #branding .process {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    #branding .industry-grid {
        grid-template-columns: 1fr 1fr;
    }

    #branding h1 {
        font-size: 32px;
    }

    #branding .grid-3,
    #branding .process {
        grid-template-columns: 1fr;
    }
}

/*#endregion*/

/*#region PRODUCT DESIGN*/
#product-design {
    --pd-primary: #3FB7AD;
    --pd-secondary: #7FE3D6;
    --pd-accent: #4A90E2;
    --pd-bg: #F4FDFC;
    --pd-dark: #24363F;
    font-family: Inter, Poppins, system-ui;
    background: var(--pd-bg);
    color: var(--pd-dark);
}

    /*-----------
        HERO
    -----------*/
    #product-design .pd-hero {
        padding: 80px 20px;
    }

    #product-design .pd-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #product-design .pd-tag {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        background: rgba(63,183,173,.15);
        color: var(--pd-primary);
        padding: 10px 18px;
        border-radius: 999px;
        font-weight: 600;
    }

    #product-design .pd-hero h1 {
        font-weight: 700;
        font-style: italic;
    }

        #product-design .pd-hero h1 span {
            color: var(--pd-primary);
        }

    #product-design .pd-hero-visual {
        background: linear-gradient(135deg,var(--pd-secondary),#e8fffb);
        overflow: visible;
        border-radius: 26px;
        padding: 30px;
    }

        #product-design .pd-hero-visual img {
            width: 100%;
            transition: .4s ease;
        }

        #product-design .pd-hero-visual:hover img {
            transform: scale(1.20) translateY(-25px);
            filter: drop-shadow(0 20px 30px rgba(63,183,173,.35));
        }

    #product-design .btn {
        outline: none;
        border: none;
        padding: 14px 30px;
        border-radius: 16px;
        font-weight: 700;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
    }

    #product-design .pd-actions {
        display: flex;
        justify-content: start;
        gap: 20px;
    }

    #product-design .btn.primary {
        background: linear-gradient(90deg,var(--pd-primary),var(--pd-accent));
        color: #fff;
        box-shadow: 0 10px 25px rgba(63,183,173,.35);
    }

        #product-design .btn.primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(63,183,173,.5);
        }

    #product-design .btn.ghost {
        background: #fff;
        border: 1px solid rgba(0,0,0,.08);
        color: var(--pd-dark);
    }

        #product-design .btn.ghost:hover {
            background: linear-gradient(90deg,var(--pd-primary),var(--pd-accent));
            color: #fff;
            transform: translateY(-4px);
            box-shadow: 0 14px 35px rgba(63,183,173,.35);
        }

    /*---------------
        SECTIONS
    ---------------*/
    #product-design .pd-section {
        padding: 80px 20px;
    }

        #product-design .pd-section.alt {
            background: #ffffff;
        }

            #product-design .pd-section .section-head,
            #product-design .pd-section.alt .section-head {
                text-align: center;
            }

    /*-----------
        GRID
    -----------*/
    #product-design .pd-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 30px;
    }

    /*-----------
        CARD
    -----------*/
    #product-design .pd-card {
        height: 100%;
        background: #fff;
        padding: 34px 26px;
        border-radius: 22px;
        border: 1px solid rgba(0,0,0,.04);
        transition: all .35s ease;
    }

        #product-design .pd-card i {
            display: block;
            margin: auto;
            font-size: 34px;
            color: var(--pd-primary);
            transition: .35s ease;
        }

        #product-design .pd-card h4 {
            text-align: center;
        }

        #product-design .pd-card:hover {
            transform: translateY(-10px);
            background: linear-gradient(180deg,#ffffff,#f0fffd);
            box-shadow: 0 25px 45px rgba(63,183,173,.18);
        }

            #product-design .pd-card:hover i {
                transform: scale(1.25) translateY(-4px);
                color: var(--pd-accent);
                filter: drop-shadow(0 6px 12px rgba(63,183,173,.45)) drop-shadow(0 0 20px rgba(127,227,214,.6));
            }

    /*------------
        TOOLS
    ------------*/
    #product-design .pd-tools {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }

        #product-design .pd-tools .tool-tag {
            font-weight: 500;
            padding: 12px 22px;
            border-radius: 999px;
            background: #fff;
            border: 1px solid rgba(0,0,0,.05);
            transition: all .3s ease;
        }

            #product-design .pd-tools .tool-tag:hover {
                background: linear-gradient(90deg,var(--pd-primary),var(--pd-accent));
                color: #fff;
                cursor: pointer;
                transform: translateY(-6px);
            }

            #product-design .pd-tools .tool-tag i {
                margin-right: 6px;
                color: var(--pd-accent);
            }

            #product-design .pd-tools .tool-tag:hover i {
                filter: drop-shadow(0 4px 10px rgba(255,255,255,.6));
                color: #fff;
            }

    /*----------
        CTA
    ----------*/
    #product-design .pd-cta {
        background: linear-gradient(135deg,var(--pd-primary),var(--pd-accent));
        padding: 90px 30px;
        border-radius: 40px;
        text-align: center;
        color: #fff;
        margin: 100px 20px 40px;
        position: relative;
        overflow: hidden;
    }

        #product-design .pd-cta::before {
            content: "";
            position: absolute;
            inset: -40%;
            background: radial-gradient(circle, rgba(255,255,255,.25), transparent 60%);
        }

        #product-design .pd-cta h2 {
            font-size: 38px;
            font-weight: 800;
            position: relative;
        }

        #product-design .pd-cta p {
            max-width: 620px;
            margin: 16px auto 30px;
            opacity: .95;
            position: relative;
        }

        #product-design .pd-cta .btn {
            background: #fff;
            color: var(--pd-dark);
            position: relative;
        }

            #product-design .pd-cta .btn:hover {
                background: #f0fffd;
            }

    /*----------------
        RESPONSIVE
    ----------------*/

    /* ---------- HERO VISUAL ---------- */
    #product-design .pd-hero-visual {
        background: linear-gradient(135deg, var(--pd-secondary), #e8fffb);
        overflow: visible;
        border-radius: 26px;
        padding: 30px;
        transition: .4s ease;
    }

        #product-design .pd-hero-visual img {
            width: 100%;
            transition: transform .4s ease, filter .4s ease;
            animation: float 6s ease-in-out infinite;
            display: block;
        }

        #product-design .pd-hero-visual:hover img {
            transform: scale(1.2) translateY(-25px);
            filter: drop-shadow(0 20px 30px rgba(63,183,173,.35));
        }

/* ---------- HERO GRID ---------- */
@media (max-width: 1024px) {
    #product-design .pd-hero-grid {
        gap: 40px;
    }

    #product-design .pd-hero h1 {
        font-size: 42px;
        line-height: 1.15;
    }
}

/* ---------- TABLET ---------- */
@media (max-width: 900px) {
    #product-design .pd-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #product-design .pd-hero-content {
        order: 1;
    }

    #product-design .pd-hero-visual {
        order: 2;
        max-width: 520px;
        margin: 0 auto;
    }

    #product-design .pd-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
    #product-design .pd-actions {
        flex-direction: column;
        align-items: center;
    }

    #product-design .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ---------- FEATURE / SERVICE CARDS ---------- */
@media (max-width: 768px) {
    #product-design .pd-grid {
        gap: 22px;
    }

    #product-design .pd-card {
        padding: 28px 22px;
    }

        #product-design .pd-card h4 {
            font-size: 18px;
        }

        #product-design .pd-card p {
            font-size: 15px;
        }
}

/* ---------- TOOLS / TECH STACK ---------- */
@media (max-width: 600px) {
    #product-design .pd-tools {
        gap: 12px;
    }

        #product-design .pd-tools span {
            font-size: 14px;
            padding: 10px 16px;
        }
}

/* ---------- CTA SECTION ---------- */
@media (max-width: 768px) {
    #product-design .pd-cta {
        padding: 70px 24px;
        border-radius: 28px;
    }

        #product-design .pd-cta h2 {
            font-size: 30px;
        }
}

@media (max-width: 480px) {
    #product-design .pd-cta h2 {
        font-size: 26px;
    }

    #product-design .pd-cta p {
        font-size: 15px;
    }
}

/* ---------- TOUCH DEVICES (Disable heavy hover) ---------- */
@media (hover: none) {
    #product-design .pd-hero-visual:hover img {
        transform: scale(1.05);
        filter: none;
    }
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/*#endregion*/

/*#region UIUX DESIGN*/
#uiux-design {
    --primary: #3b3f66;
    --secondary: #ffd166;
    --accent: #ff7a6e;
    --blue: #6c7cff;
    --bg: #f6f7fb;
    --card: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --radius: 18px;
}

#uiux-design {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

#uiux-design {
    font-family: Inter,system-ui,Arial;
    background: var(--bg);
    color: var(--text);
}

    #uiux-design .container {
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
    }

    /*-----------
        HERO
    -----------*/
    #uiux-design #uiux-hero {
        padding: 90px 0;
        background: linear-gradient(135deg,#fff, #eef0ff);
        border-radius: 0 0 80px 0;
    }

    #uiux-design .uiux-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: center;
        padding: 0 10%;
    }

    #uiux-design .uiux-tag {
        display: inline-block;
        background: rgba(108,124,255,.12);
        color: var(--blue);
        padding: 8px 18px;
        border-radius: 999px;
        font-weight: 600;
        margin-bottom: 18px;
    }

    #uiux-design .uiux-hero h1 {
        font-size: 54px;
        line-height: 1.1;
        font-weight: 700;
        font-style: italic;
    }

        #uiux-design .uiux-hero h1 span {
            color: var(--primary)
        }

    #uiux-design .uiux-hero p {
        margin: 22px 0 34px;
        font-size: 18px;
        color: var(--muted);
    }

    #uiux-design .hero-actions {
        display: flex;
        gap: 18px;
    }

    #uiux-design .btn {
        outline: none;
        border: none;
        padding: 15px 30px;
        border-radius: 14px;
        text-decoration: none;
        font-weight: 700;
        transition: .35s ease;
    }

        #uiux-design .btn.primary {
            background: linear-gradient(90deg,var(--primary),var(--blue));
            color: #fff;
        }

            #uiux-design .btn.primary:hover {
                transform: translateY(-4px);
                box-shadow: 0 18px 40px rgba(59,63,102,.35);
            }

        #uiux-design .btn.ghost {
            border: 2px solid var(--primary);
            color: var(--primary);
        }

            #uiux-design .btn.ghost:hover {
                background: var(--primary);
                color: #fff;
            }

    #uiux-design .hero-visual {
        /*        background: linear-gradient(135deg,#fff, #eef0ff);*/
        border-radius: 28px;
        transition: all .4s ease;
    }

        #uiux-design .hero-visual img {
            width: 100%;
            transform: scale(1.15);
            transition: .4s ease;
        }

        #uiux-design .hero-visual:hover img {
            transform: translateY(-20px);
            filter: drop-shadow(0 25px 35px rgba(59,63,102,.35));
        }

    /*---------------
        SERVICES
    ---------------*/
    #uiux-design #services {
        padding: 90px 0
    }

    #uiux-design .section-head {
        text-align: center;
        margin-bottom: 60px
    }

        #uiux-design .section-head h2 {
            /*            font-size: 42px*/
        }

        #uiux-design .section-head p {
            color: var(--muted);
            margin-top: 14px
        }

    #uiux-design .services-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 30px;
    }

    #uiux-design .service-card {
        height: 100%;
        background: var(--card);
        padding: 38px 32px;
        border-radius: var(--radius);
        transition: .35s ease;
        position: relative;
    }

        #uiux-design .service-card i {
            display: block;
            margin: auto;
            font-size: 34px;
            color: var(--secondary);
            margin-bottom: 22px;
            transition: .35s ease;
        }

        #uiux-design .service-card h4 {
            text-align: center;
        }

        #uiux-design .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0,0,0,.08);
        }

            #uiux-design .service-card:hover i {
                color: var(--accent);
                transform: scale(1.25) rotate(6deg);
                filter: drop-shadow(0 6px 12px rgba(255,122,110,.45)) drop-shadow(0 0 20px rgba(255,209,102,.65));
            }

    /*------------
        WHY US
    ------------*/
    #uiux-design #why-uiux {
        padding: 90px 0;
        background: linear-gradient(180deg,#f6f7fb,#ffffff);
    }

    /*--------------
        PROCESS
    --------------*/
    #uiux-design #process {
        padding: 90px 0;
        background: #fff
    }

    #uiux-design .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
        gap: 28px;
    }

    #uiux-design .process-step {
        height: 100%;
        background: linear-gradient(135deg,#f7f8ff,#ffffff);
        padding: 34px;
        border-radius: var(--radius);
        transition: .35s ease;
    }

        #uiux-design .process-step span {
            display: block;
            text-align: center;
            font-size: 28px;
            font-weight: 800;
            color: var(--secondary);
        }

        #uiux-design .process-step h4 {
            text-align: center;
        }

        #uiux-design .process-step:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 40px rgba(108,124,255,.25);
        }

    /*------------
        TOOSL
    ------------*/
    #uiux-design #uiux-tools {
        padding: 90px 0;
        background: #fff;
    }

    #uiux-design .tools-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
    }

        #uiux-design .tools-grid span {
            background: var(--card);
            padding: 14px 24px;
            border-radius: 999px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: .3s ease;
        }

            #uiux-design .tools-grid span:hover {
                background: linear-gradient(90deg,var(--primary),var(--blue));
                cursor: pointer;
                color: #fff;
                transform: translateY(-6px);
                box-shadow: 0 14px 30px rgba(59,63,102,.35);
            }

            #uiux-design .tools-grid span i {
                color: var(--accent);
            }

            #uiux-design .tools-grid span:hover i {
                color: #fff;
                filter: drop-shadow(0 4px 10px rgba(255,255,255,.6));
            }


    /*----------
        CTA
    ----------*/
    #uiux-design #cta {
        padding: 100px 0;
        background: linear-gradient(135deg,var(--primary),var(--blue));
        color: #fff;
        text-align: center;
    }

        #uiux-design #cta h2 {
            font-size: 44px
        }

        #uiux-design #cta p {
            margin: 18px 0 32px;
            opacity: .9
        }

/*-----------------
    RESPONSIVE
-----------------*/
@media(max-width:900px) {
    #uiux-design .uiux-grid {
        grid-template-columns: 1fr;
        text-align: center
    }

    #uiux-design .hero-actions {
        justify-content: center;
        flex-wrap: wrap
    }
}

@media(max-width:500px) {
    #uiux-design .uiux-hero h1 {
        font-size: 38px
    }

    #uiux-design .btn {
        width: 100%;
        text-align: center
    }
}
/*#endregion*/

/*#region WEB DESIGN*/
/*-----------
    THEME
-----------*/
#web-design {
    --primary: #2f4a7f;
    --secondary: #4aa3df;
    --accent: #7fd1f3;
    --highlight: #f6b26b;
    --bg: #f4f9ff;
    --card: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --radius: 20px;
    font-family: Inter, system-ui;
    background: var(--bg);
    color: var(--text);
}

    #web-design * {
        box-sizing: border-box;
    }

    #web-design .container {
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
    }

    /*----------
        HERO
    ----------*/
    #web-design .hero {
        padding: 90px 0;
        background: linear-gradient(135deg,#ffffff,#eaf4ff);
        border-radius: 0 0 90px 0;
    }

    #web-design .hero-grid {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 50px;
        align-items: center;
        padding: 0 10%;
    }

    #web-design .tag {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        background: rgba(74,163,223,.15);
        color: var(--primary);
        padding: 10px 18px;
        border-radius: 999px;
        font-weight: 700;
    }

    #web-design h1 {
        /*        font-size: 54px;*/
        font-weight: 700;
        font-style: italic;
        line-height: 1.1;
        margin: 18px 0;
    }

        #web-design h1 span {
            color: var(--secondary);
        }

    #web-design .hero p {
        font-size: 18px;
        color: var(--muted);
        margin-bottom: 34px;
    }

    #web-design .actions {
        display: flex;
        gap: 18px;
        flex-wrap: wrap;
    }

    #web-design .btn {
        outline: none;
        border: none;
        padding: 15px 32px;
        border-radius: 16px;
        text-decoration: none;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: .35s ease;
    }

        #web-design .btn.primary {
            background: linear-gradient(90deg,var(--primary),var(--secondary));
            color: #fff;
            box-shadow: 0 12px 30px rgba(47,74,127,.35);
        }

            #web-design .btn.primary:hover {
                transform: translateY(-4px);
                box-shadow: 0 20px 45px rgba(47,74,127,.5);
            }

        #web-design .btn.ghost {
            background: #fff;
            border: 2px solid var(--primary);
            color: var(--primary);
        }

            #web-design .btn.ghost:hover {
                background: var(--primary);
                color: #fff;
            }

    #web-design .hero-visual img {
        width: 100%;
        transition: .4s ease;
    }

    #web-design .hero-visual:hover img {
        transform: translateY(-22px) scale(1.15);
        /*        filter: drop-shadow(0 25px 40px rgba(47,74,127,.35));*/
    }

    /*---------------
        SECTIONS
    ---------------*/
    #web-design section {
        padding: 90px 0;
    }

    #web-design .section-head {
        text-align: center;
        margin-bottom: 60px;
    }

        #web-design .section-head h2 {
            /*            font-size: 42px;*/
        }

        #web-design .section-head p {
            margin-top: 14px;
            color: var(--muted);
        }

    /*-----------
        GRID
    -----------*/
    #web-design .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 30px;
    }

    /*-----------
        CARD
    -----------*/
    #web-design .card {
        height: 100%;
        background: var(--card);
        padding: 38px 32px;
        border-radius: var(--radius);
        transition: .35s ease;
        position: relative;
    }

        #web-design .card i {
            font-size: 36px;
            color: var(--secondary);
            margin-bottom: 18px;
            transition: .35s ease;
        }

        #web-design .card:hover {
            transform: translateY(-12px);
            box-shadow: 0 28px 60px rgba(0,0,0,.08);
        }

            #web-design .card:hover i {
                color: var(--highlight);
                transform: scale(1.25) rotate(6deg);
                filter: drop-shadow(0 6px 14px rgba(246,178,107,.45)) drop-shadow(0 0 22px rgba(127,209,243,.6));
            }

    /*--------------
        PROCESS
    --------------*/
    #web-design .step {
        height: 100%;
        background: linear-gradient(135deg,#f5faff,#ffffff);
        padding: 34px;
        border-radius: var(--radius);
        transition: .35s ease;
    }

        #web-design .step span {
            font-size: 28px;
            font-weight: 800;
            color: var(--secondary);
        }

        #web-design .step:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 40px rgba(74,163,223,.35);
        }

    /*------------
        TOOLS
    ------------*/
    #web-design .tools {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
        align-items: center;
    }

        #web-design .tools span {
            display: inline-flex;
            align-items: center;
            background: #fff;
            padding: 14px 24px;
            border-radius: 999px;
            font-weight: 600;
            display: inline-flex;
            gap: 10px;
            transition: .3s ease;
        }

            #web-design .tools span:hover {
                background: linear-gradient(90deg,var(--primary),var(--secondary));
                color: #fff;
                cursor: pointer;
                transform: translateY(-6px);
            }

            #web-design .tools span i {
                color: var(--secondary);
            }

            #web-design .tools span:hover i {
                color: #fff;
                filter: drop-shadow(0 4px 10px rgba(255,255,255,.6));
            }

    /*---------
        CTA
    ---------*/
    #web-design .cta {
        background: linear-gradient(135deg,var(--primary),var(--secondary));
        padding: 100px 30px;
        text-align: center;
        color: #fff;
        border-radius: 50px;
        margin: 40px 20px;
    }

        #web-design .cta h2 {
            font-size: 44px;
        }

        #web-design .cta p {
            margin: 16px auto 30px;
            max-width: 620px;
            opacity: .95;
        }

/*----------------
    RESPONSIVE
----------------*/
@media(max-width:900px) {
    #web-design .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #web-design .actions {
        justify-content: center;
    }
}

@media(max-width:500px) {
    #web-design h1 {
        font-size: 38px;
    }

    #web-design .btn {
        width: 100%;
        justify-content: center;
    }
}
/*#endregion*/

/*#region API DEVELOPMENT*/
/*-----------
    THEME
-----------*/
#api-development {
    --api-primary: #2f80ed;
    --api-secondary: #56ccf2;
    --api-dark: #1f3a5f;
    --api-bg: #f4f9ff;
    --api-card: #ffffff;
    --api-text: #334155;
    --api-muted: #64748b;
}

#api-development {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

#api-development {
    font-family: 'Segoe UI',sans-serif;
    color: var(--api-text)
}

    /*-------------
        COMMON
    -------------*/
    #api-development .container {
        max-width: 1200px;
        margin: auto;
        padding: 80px 20px
    }

    #api-development .section-head {
        text-align: center;
        margin-bottom: 50px
    }

        #api-development .section-head h2 {
            color: var(--api-dark)
        }

        #api-development .section-head p {
            max-width: 700px;
            margin: 12px auto;
            color: var(--api-muted)
        }

    #api-development .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 26px;
    }

    #api-development .card {
        height: 100%;
        background: var(--api-card);
        padding: 30px;
        border-radius: 18px;
        box-shadow: 0 10px 40px rgba(0,0,0,.05);
        transition: .4s ease;
        position: relative;
    }

        #api-development .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(47,128,237,.25);
        }

        #api-development .card i {
            font-size: 36px;
            color: var(--api-primary);
            margin-bottom: 16px;
            transition: .4s;
        }

        #api-development .card:hover i {
            color: var(--api-secondary);
            transform: scale(1.15);
        }

        #api-development .card h4 {
            margin-bottom: 10px;
            font-size: 20px
        }

        #api-development .card p {
            color: var(--api-muted);
            line-height: 1.6
        }

    /*-----------
        HERO
    -----------*/
    #api-development .hero {
        background: linear-gradient(135deg,#e9f4ff,#ffffff);
    }

    #api-development .hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: center;
        padding: 80px 10%;
        min-height: 700px;
    }

    #api-development .tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(47,128,237,.1);
        color: var(--api-primary);
        padding: 8px 16px;
        border-radius: 30px;
        margin-bottom: 18px;
        font-weight: 600;
    }

    #api-development .hero h1 {
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
        margin-bottom: 18px;
        color: var(--api-dark);
    }

        #api-development .hero h1 span {
            color: var(--api-primary)
        }

    #api-development .hero p {
        font-size: 18px;
        color: var(--api-muted);
        margin-bottom: 14px;
    }

    #api-development .actions {
        display: flex;
        gap: 16px;
        margin-top: 26px;
    }

    #api-development .btn {
        outline: none;
        border: none;
        padding: 14px 28px;
        border-radius: 30px;
        font-weight: 600;
        text-decoration: none;
        transition: .4s;
    }

        #api-development .btn:hover {
            transform: translateY(-5px);
        }

        #api-development .btn.primary {
            background: linear-gradient(135deg,var(--api-primary),var(--api-secondary));
            color: #fff;
        }

            #api-development .btn.primary:hover {
                box-shadow: 0 12px 30px rgba(47,128,237,.45)
            }

        #api-development .btn.ghost {
            border: 2px solid var(--api-primary);
            color: var(--api-primary);
        }

            #api-development .btn.ghost:hover {
                background: var(--api-primary);
                color: #fff;
            }

    #api-development .hero-visual img {
        width: 100%;
        margin: auto;
        display: block;
    }

    /*----------------
        API TYPES
    ----------------*/
    #api-development .api-types .card {
        border-top: 4px solid var(--api-primary);
    }

    /*-----------------
        TECH STACK
    -----------------*/
    #api-development .stack {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: center;
    }

        #api-development .stack .stack-badge {
            padding: 12px 20px;
            border-radius: 30px;
            background: #eef6ff;
            color: var(--api-primary);
            font-weight: 600;
            transition: .3s;
        }

            #api-development .stack .stack-badge:hover {
                background: var(--api-primary);
                color: #fff;
                transform: translateY(-5px);
                cursor: pointer;
            }

            #api-development.stack .stack-badge i {
                font-size: 18px;
                transition: .3s ease;
            }

            #api-development.stack .stack-badge:hover i {
                transform: scale(1.2);
                filter: drop-shadow(0 6px 10px rgba(47,128,237,.4));
            }

    /*----------
        CTA
    ----------*/
    #api-development .cta {
        background: linear-gradient(135deg,var(--api-primary),var(--api-secondary));
        color: #fff;
        text-align: center;
        padding: 80px 20px;
    }

        #api-development .cta h2 {
            font-size: 38px;
            margin-bottom: 16px
        }

        #api-development .cta p {
            max-width: 700px;
            margin: 0 auto 26px
        }

/*-----------------
    RESPONSIVE
-----------------*/
@media(max-width:900px) {
    #api-development .hero-grid {
        grid-template-columns: 1fr
    }

    #api-development .hero {
        text-align: center
    }

    #api-development .actions {
        justify-content: center
    }
}
/*#endregion*/

/*#region APP MODERNIZATION*/
/*-----------
    ROOT
-----------*/
#app-modernization {
    --am-primary: #1b2a5b;
    --am-secondary: #4da3ff;
    --am-accent: #ff8a34;
    --am-yellow: #ffbf3f;
    --am-bg: #f4f8ff;
    --am-card: #ffffff;
    --am-text: #0f172a;
    --am-muted: #64748b;
    background: var(--am-bg);
    color: var(--am-text);
}

    /*--------------
        CONTAINER
    --------------*/
    #app-modernization .am-container {
        max-width: 1200px;
        margin: auto;
        padding: 70px 20px;
    }

    /*----------
        HERO
    ----------*/
    #app-modernization .am-hero {
        position: relative;
        background: radial-gradient(circle at top right, rgba(77,163,255,0.18), transparent 45%), radial-gradient(circle at bottom left, rgba(255,138,52,0.12), transparent 40%), linear-gradient(135deg, #f9fbff 0%, #eef4ff 100%);
        color: var(--am-text);
        padding: 90px 10%;
        border-radius: 0 0 60px 60px;
        overflow: hidden;
    }

    #app-modernization .am-hero-grid {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 50px;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    #app-modernization .am-hero-content {
        z-index: 2;
    }

    #app-modernization .am-tag {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(77,163,255,0.14);
        color: var(--am-primary);
        padding: 8px 18px;
        border-radius: 30px;
        font-size: 14px;
        font-weight: 600;
    }

    #app-modernization .am-hero h1 {
        font-size: 46px;
        margin: 18px 0;
        line-height: 1.3;
        font-style: italic;
        font-weight: 800;
        color: var(--am-primary);
    }

        #app-modernization .am-hero h1 span {
            color: var(--am-accent);
        }

    #app-modernization .am-hero p {
        font-size: 18px;
        color: var(--am-muted);
        max-width: 520px;
        line-height: 1.7;
    }

    #app-modernization .am-btn {
        margin-top: 28px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, var(--am-accent), #ffb15e);
        color: #fff;
        padding: 14px 32px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.35s ease;
        box-shadow: 0 18px 35px rgba(255,138,52,0.35);
    }

        #app-modernization .am-btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 25px 45px rgba(255,138,52,0.45);
        }

    #app-modernization .am-hero-image {
        position: relative;
        text-align: center;
    }

        #app-modernization .am-hero-image img {
            width: 100%;
            animation: AMheroFloat 6s ease-in-out infinite;
            filter: drop-shadow(0 35px 60px rgba(27,42,91,0.35));
        }

@keyframes AMheroFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-16px);
    }
}

#app-modernization .am-hero::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(to bottom, transparent, var(--am-bg));
}

/*--------------------
    SECTION TITLE
--------------------*/
#app-modernization .am-title {
    text-align: center;
    margin-bottom: 50px;
}

    #app-modernization .am-title h2 {
        font-size: 34px;
    }

    #app-modernization .am-title p {
        color: var(--am-muted);
        max-width: 700px;
        margin: auto;
    }

/*--------------
    SERVICES
--------------*/
#app-modernization .am-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

#app-modernization .am-card {
    height: 100%;
    background: var(--am-card);
    padding: 28px;
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: 0.35s;
    position: relative;
    overflow: hidden;
}

    #app-modernization .am-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--am-secondary), var(--am-accent));
        opacity: 0;
        transition: 0.35s;
    }

    #app-modernization .am-card:hover::before {
        opacity: 0.08;
    }

    #app-modernization .am-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 40px rgba(0,0,0,0.12);
    }

#app-modernization .am-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--am-secondary), var(--am-accent));
    color: #fff;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 16px;
    transition: 0.35s;
}

#app-modernization .am-card:hover .am-icon {
    transform: rotate(-8deg) scale(1.1);
}

#app-modernization .am-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

#app-modernization .am-card p {
    color: var(--am-muted);
    font-size: 15px;
}

/*------------
    PROCESS
------------*/
#app-modernization .am-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
}

#app-modernization .am-step {
    height: 100%;
    background: var(--am-card);
    padding: 22px;
    border-radius: 16px;
    border-left: 5px solid var(--am-accent);
    transition: 0.3s;
}

    #app-modernization .am-step:hover {
        border-left-color: var(--am-secondary);
        transform: translateX(6px);
    }

    #app-modernization .am-step i {
        color: var(--am-accent);
        transition: all 0.8s ease;
    }

    #app-modernization .am-step:hover i {
        color: var(--am-secondary);
        transform: rotate(360deg);
    }

/*----------
    STATS
----------*/
#app-modernization .am-stats {
    background: linear-gradient(135deg, var(--am-secondary), var(--am-primary));
    color: #fff;
    border-radius: 30px;
    padding: 60px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    text-align: center;
    gap: 25px;
}

#app-modernization .am-stat h3 {
    font-size: 42px;
    font-weight: 700;
}

#app-modernization .am-stat p {
    font-weight: 500;
    opacity: 0.85;
}

/*-----------------
    RESPONSIVE
-----------------*/
@media (max-width: 900px) {
    #app-modernization .am-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #app-modernization .am-hero p {
        margin: auto;
    }

    #app-modernization .am-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #app-modernization .am-hero p {
        margin: auto;
    }

    #app-modernization .am-hero-image {
        margin-top: 40px;
    }
}

@media (max-width: 1024px) {
    #app-modernization .am-hero {
        padding: 80px 6%;
    }

        #app-modernization .am-hero h1 {
            font-size: 40px;
        }
}

@media (max-width: 520px) {
    #app-modernization .am-hero h1 {
        font-size: 34px;
    }

    #app-modernization .am-btn {
        padding: 13px 26px;
        font-size: 15px;
    }
}
/*#endregion*/

/*#region CMS SOLUTION*/
#cms-solution {
    --blue: #4F6EF7;
    --blue-dark: #3E5CE0;
    --teal: #2FD1B3;
    --yellow: #FFD44D;
    --dark: #0F172A;
    --text: #475569;
    --light: #F8FAFC;
    --white: #ffffff;
}

/*-----------
    BASE
-----------*/
#cms-solution {
    color: var(--dark);
}

    #cms-solution .container {
        width: 100%;
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
    }

    #cms-solution .section {
        padding: 90px 0;
    }

        #cms-solution .section.alt {
            background: var(--light);
        }

    #cms-solution h1, h2, h3, h4 {
        margin: 0 0 14px;
    }

    #cms-solution p {
        margin: 0;
        line-height: 1.7;
        color: var(--text);
    }

    /*---------
        HERO
    ---------*/
    #cms-solution .cms-hero {
        min-height: 60vh;
        height: calc(80vh - 80px);
        background: linear-gradient( 135deg, #6F8CFF 0%, #4F6EF7 55%, #3E5CE0 100% );
        color: var(--white);
        padding: 100px 0 120px;
        position: relative;
        overflow: hidden;
    }

        #cms-solution .cms-hero::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 200px;
            background: linear-gradient( to bottom, rgba(255,255,255,0), rgba(255,255,255,0.7), rgba(255,255,255,1) );
            pointer-events: none;
        }

    #cms-solution .cms-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 50px;
        align-items: center;
        padding: 0 10%;
    }

    #cms-solution .cms-hero h1 {
        font-weight: 700;
        font-style: italic;
        line-height: 1.15;
    }

        #cms-solution .cms-hero h1 span {
            color: var(--yellow);
        }

    #cms-solution .cms-hero p {
        font-size: 18px;
        margin: 22px 0 32px;
        color: #EAF0FF;
    }

    #cms-solution .cms-tags {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
    }

        #cms-solution .cms-tags span {
            background: rgba(255,255,255,.15);
            padding: 10px 18px;
            border-radius: 30px;
            font-size: 14px;
            backdrop-filter: blur(6px);
        }

        #cms-solution .cms-tags i {
            color: var(--yellow);
            margin-right: 6px;
        }

    #cms-solution .cms-hero img {
        max-width: 100%;
        height: 400px;
    }

    /*------------------
        SECTION HEAD
    ------------------*/
    #cms-solution .section-head {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
    }

        #cms-solution .section-head h2 {
            font-size: 36px;
        }

            #cms-solution .section-head h2 span {
                color: var(--blue);
            }

        #cms-solution .section-head p {
            font-size: 17px;
        }

    /*-------------
        SERVICES
    -------------*/
    #cms-solution .cms-services {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 28px;
    }

    #cms-solution .cms-card {
        height: 100%;
        background: var(--white);
        padding: 36px 28px;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(15,23,42,.08);
        position: relative;
        overflow: hidden;
        transition: .4s ease;
    }

        #cms-solution .cms-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,var(--teal),var(--blue));
            opacity: 0;
            transition: .4s ease;
        }

        #cms-solution .cms-card:hover::before {
            opacity: 1;
        }

        #cms-solution .cms-card * {
            position: relative;
            z-index: 1;
        }

        #cms-solution .cms-card i {
            font-size: 36px;
            color: var(--blue);
            margin-bottom: 18px;
            transition: .4s ease;
        }

        #cms-solution .cms-card h3 {
            margin-bottom: 10px;
        }

        #cms-solution .cms-card:hover i {
            color: var(--white);
            transform: scale(1.2);
        }

        #cms-solution .cms-card:hover h3,
        #cms-solution .cms-card:hover p {
            color: var(--white);
        }

    /*--------------
        FEATURES
    --------------*/
    #cms-solution .cms-features {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
        gap: 24px;
    }

    #cms-solution .cms-feature {
        height: 100%;
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }

        #cms-solution .cms-feature i {
            font-size: 26px;
            color: var(--teal);
            margin-top: 4px;
        }

    #cms-solution .cms-feature {
        padding: 18px 20px;
        border-radius: 14px;
        background: transparent;
        transition: all 0.35s ease;
    }

        #cms-solution .cms-feature:hover {
            background: #ffffff;
            box-shadow: 0 10px 28px rgba(15,23,42,.08);
            transform: translateY(-4px);
        }

        #cms-solution .cms-feature i {
            transition: all 0.35s ease;
        }

        #cms-solution .cms-feature:hover i {
            color: var(--blue);
            transform: scale(1.15) rotate(-4deg);
        }

    /*------------
        STATS
    ------------*/
    #cms-solution .cms-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
        gap: 26px;
        text-align: center;
    }

    #cms-solution .cms-stat {
        height: 100%;
        background: var(--white);
        padding: 36px 20px;
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(15,23,42,.08);
        position: relative;
        overflow: hidden;
        transition: all .4s ease;
        cursor: default;
    }

        #cms-solution .cms-stat::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, var(--teal), var(--blue));
            transition: .45s ease;
        }

        #cms-solution .cms-stat h3 {
            font-weight: 700;
            font-size: 42px;
            color: var(--blue);
            margin-bottom: 6px;
        }

        #cms-solution .cms-stat p {
            font-weight: 500;
        }

        #cms-solution .cms-stat:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 20px 45px rgba(79,110,247,.25);
        }

            #cms-solution .cms-stat:hover::before {
                left: 0;
            }

        #cms-solution .cms-stat h3 {
            transition: .35s ease;
        }

        #cms-solution .cms-stat:hover h3 {
            transform: scale(1.15);
            color: var(--blue-dark);
            text-shadow: 0 8px 24px rgba(79,110,247,.45);
        }

        #cms-solution .cms-stat p {
            transition: .35s ease;
        }

        #cms-solution .cms-stat:hover p {
            color: var(--dark);
            letter-spacing: .3px;
        }

    /*------------
        PROCESS
    ------------*/
    #cms-solution .cms-process {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
        gap: 28px;
    }

    #cms-solution .cms-step {
        height: 100%;
        position: relative;
        background: var(--white);
        border-radius: 20px;
        padding: 50px 30px 30px;
        box-shadow: 0 8px 24px rgba(0,0,0,.07);
        transition: .35s ease;
    }

        #cms-solution .cms-step:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 38px rgba(0,0,0,.12);
            background: var(--whit);
        }

        #cms-solution .cms-step span {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background: var(--teal);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            transition: all 0.3s ease;
        }

        #cms-solution .cms-step:hover span {
            background: #fff;
            color: var(--teal);
            box-shadow: 0 5px 8px rgba(0, 0, 0, 0.1);
        }

    /*----------
        CTA
    ----------*/
    #cms-solution .cms-cta {
        padding: 100px 0;
        background: linear-gradient( 135deg, var(--blue), var(--blue-dark) );
        position: relative;
        overflow: hidden;
    }

        #cms-solution .cms-cta::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.15), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,.12), transparent 40%);
        }

    #cms-solution .cms-cta-box {
        position: relative;
        max-width: 900px;
        margin: auto;
        text-align: center;
        color: var(--white);
        padding: 70px 60px;
        border-radius: 28px;
        background: rgba(255,255,255,.12);
        backdrop-filter: blur(10px);
        box-shadow: 0 30px 60px rgba(0,0,0,.25);
    }

    #cms-solution .cms-cta h2 {
        font-size: 42px;
        margin-bottom: 16px;
        font-weight: 700;
    }

        #cms-solution .cms-cta h2 span {
            color: var(--yellow);
        }

    #cms-solution .cms-cta p {
        font-size: 18px;
        color: #EAF0FF;
        margin-bottom: 36px;
        line-height: 1.7;
    }

    #cms-solution .cms-cta-actions {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
    }

    #cms-solution .cms-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 16px 28px;
        font-size: 16px;
        font-weight: 600;
        border-radius: 40px;
        text-decoration: none;
        transition: .35s ease;
    }

        #cms-solution .cms-btn.primary {
            background: var(--yellow);
            color: var(--dark);
            box-shadow: 0 12px 30px rgba(255,212,77,.45);
        }

            #cms-solution .cms-btn.primary:hover {
                transform: translateY(-4px) scale(1.05);
                box-shadow: 0 20px 45px rgba(255,212,77,.6);
            }

        #cms-solution .cms-btn.outline {
            border: 2px solid rgba(255,255,255,.6);
            color: var(--white);
        }

            #cms-solution .cms-btn.outline:hover {
                background: var(--white);
                color: var(--blue-dark);
                transform: translateY(-4px);
            }

/*-----------------
    RESPONSIVE
-----------------*/
@media(max-width:900px) {
    #cms-solution .cms-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #cms-solution .cms-tags {
        justify-content: center;
    }

    #cms-solution .cms-hero h1 {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    #cms-solution .cms-cta-box {
        padding: 50px 30px;
    }

    #cms-solution .cms-cta h2 {
        font-size: 32px;
    }

    #cms-solution .cms-cta p {
        font-size: 16px;
    }
}
/*#endregion*/

/*#region CUSTOM SOFTWARE*/
#custom-software {
    --primary: #4F5BFF;
    --secondary: #2B2E83;
    --accent: #FF7A6B;
    --light-bg: #EAF0FF;
    --dark: #0F172A;
    --text: #6B7280;
    --white: #ffffff;
}

#custom-software {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#custom-software {
    color: var(--dark);
    background: #fff;
    line-height: 1.7;
}

    #custom-software .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #custom-software .section {
        padding: 90px 0;
    }

        #custom-software .section.alt {
            background: var(--light-bg);
        }

    /*---------
        HERO 
    ---------*/
    #custom-software .cs-hero {
        background: linear-gradient(135deg, var(--light-bg), #fff);
        padding: 100px 0;
    }

    #custom-software .cs-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #custom-software .cs-tag {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(79, 91, 255, .1);
        color: var(--primary);
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
    }

    #custom-software .cs-hero h1 {
        font-weight: 700;
        font-style: italic;
        /*        font-size: 48px;*/
        margin: 20px 0;
    }

        #custom-software .cs-hero h1 span {
            color: var(--primary);
        }

    #custom-software .cs-hero p {
        color: var(--text);
        max-width: 520px;
    }

    #custom-software .cs-hero-actions {
        display: flex;
        gap: 18px;
        margin-top: 30px;
    }

    #custom-software .btn-primary {
        background: var(--primary);
        color: #fff;
        padding: 14px 28px;
        border-radius: 30px;
        text-decoration: none;
        transition: .3s;
    }

        #custom-software .btn-primary:hover {
            background: var(--secondary);
            transform: translateY(-3px);
        }

    #custom-software .btn-outline {
        border: 2px solid var(--primary);
        color: var(--primary);
        padding: 12px 26px;
        border-radius: 30px;
        text-decoration: none;
        transition: .3s;
    }

        #custom-software .btn-outline:hover {
            background: var(--primary);
            color: #fff;
        }

    #custom-software .cs-hero-image img {
        width: 100%;
    }

    /*-----------
        STATS
    -----------*/
    #custom-software .cs-stats {
        background: var(--secondary);
        color: #fff;
        padding: 50px 0;
    }

    #custom-software .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        text-align: center;
    }

    #custom-software .stat h3 {
        font-weight: 700;
        font-size: 36px;
        color: var(--accent);
    }

    #custom-software .stat p {
        font-weight: 500;
    }

    /*-------------
        SERVICES
    -------------*/
    #custom-software .section-head {
        text-align: center;
        margin-bottom: 60px;
    }

    #custom-software .service-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    #custom-software .service-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 18px;
        box-shadow: 0 20px 40px rgba(0,0,0,.06);
        transition: .35s;
    }

        #custom-software .service-card i {
            font-size: 32px;
            color: var(--primary);
            margin-bottom: 18px;
            transition: .35s;
        }

        #custom-software .service-card:hover {
            transform: translateY(-10px);
        }

            #custom-software .service-card:hover i {
                color: var(--accent);
            }

    /*-------------
        PROCESS
    -------------*/
    #custom-software .process-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }

    #custom-software .process-step {
        height: 100%;
        position: relative;
        background: #fff;
        padding: 50px 30px 30px 30px;
        border-radius: 16px;
        position: relative;
        transition: .3s;
    }

        #custom-software .process-step span {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background: var(--accent);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            font-weight: 700;
            color: #fff;
            transition: all 0.3s ease;
        }

        #custom-software .process-step:hover span {
            background: var(--primary);
        }

        #custom-software .process-step:hover {
            transform: translateY(-8px);
        }



    /*----------
        CTA
    ----------*/
    #custom-software .cs-cta {
        padding: 90px 0;
    }

    #custom-software .cta-box {
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        color: #fff;
        text-align: center;
        padding: 70px;
        border-radius: 26px;
    }

/*-----------------
    RESPONSIVE
-----------------*/
@media (max-width: 992px) {
    #custom-software .cs-hero-grid,
    #custom-software .service-grid,
    #custom-software .process-grid,
    #custom-software .stats-grid {
        grid-template-columns: 1fr;
    }

    #custom-software .cs-hero h1 {
        font-size: 38px;
    }
}

/*#endregion*/

/*#region ENTERPRISE APP*/
/*---------------------
    THEME VARIABLES
---------------------*/
#enterprise-app {
    --ea-blue: #1e88e5;
    --ea-yellow: #fbbc05;
    --ea-red: #ea4335;
    --ea-green: #34a853;
    --ea-bg: #f5f9ff;
    --ea-dark: #0b1020;
    --ea-text: #475569;
    --ea-radius: 18px;
    --ea-shadow: 0 10px 30px rgba(15,23,42,.10);
    --ea-shadow-hover: 0 25px 60px rgba(15,23,42,.22);
}

    /*---------
        HERO
    ---------*/
    #enterprise-app .ea-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at top right, rgba(30,136,229,.15), transparent 60%), linear-gradient(180deg, rgba(30,136,229,.08), rgba(245,249,255,1));
        box-shadow: inset 0 -20px 30px #fff;
    }

    #enterprise-app .ea-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: center;
    }

    #enterprise-app .ea-hero-content {
        max-width: 640px;
    }

    #enterprise-app .ea-tag {
        background: rgba(251, 188, 5, 0.09);
        padding: 8px 15px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        color: var(--ea-yellow);
        font-weight: 600;
        letter-spacing: .4px;
    }

    #enterprise-app .ea-hero h1 {
        font-weight: 700;
        font-style: italic;
        font-size: 48px;
        line-height: 1.15;
        margin-bottom: 20px;
        color: var(--ea-dark);
    }

        #enterprise-app .ea-hero h1 span {
            color: var(--ea-blue);
        }

    #enterprise-app .ea-hero p {
        font-size: 18px;
        color: var(--ea-text);
        margin-bottom: 34px;
    }

    #enterprise-app .ea-hero-image {
        text-align: right;
    }

        #enterprise-app .ea-hero-image img {
            width: 100%;
            animation: floatHero 6s ease-in-out infinite;
        }

@keyframes floatHero {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-14px);
    }

    100% {
        transform: translateY(0);
    }
}

#enterprise-app .ea-actions {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

#enterprise-app .ea-btn {
    text-decoration: none;
    padding: 14px 34px;
    border-radius: 50px;
    font-weight: 600;
    transition: all .35s ease;
}

    #enterprise-app .ea-btn.primary {
        background: linear-gradient(135deg, var(--ea-blue), #1565c0);
        color: #fff;
        box-shadow: 0 12px 30px rgba(30,136,229,.35);
    }

        #enterprise-app .ea-btn.primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 45px rgba(30,136,229,.5);
        }

    #enterprise-app .ea-btn.outline {
        border: 2px solid var(--ea-blue);
        color: var(--ea-blue);
    }

        #enterprise-app .ea-btn.outline:hover {
            background: var(--ea-blue);
            color: #fff;
        }

/*------------
   SECTIONS
------------*/
#enterprise-app .ea-section {
    padding: 90px 20px;
    background: #fff;
}

    #enterprise-app .ea-section.alt {
        background: var(--ea-bg);
    }

#enterprise-app .ea-section-header {
    text-align: center;
    max-width: 820px;
    margin: auto auto 60px;
}

    #enterprise-app .ea-section-header h2 span {
        color: var(--ea-blue);
    }

/*---------
   CARDS
---------*/
#enterprise-app .ea-overview-card,
#enterprise-app .ea-service-card,
#enterprise-app .ea-why-card,
#enterprise-app .ea-process-step {
    height: 100%;
    position: relative;
    background: #fff;
    border-radius: var(--ea-radius);
    padding: 34px 28px;
    box-shadow: var(--ea-shadow);
    transition: all .4s ease;
    overflow: hidden;
}

    #enterprise-app .ea-overview-card::before,
    #enterprise-app .ea-service-card::before,
    #enterprise-app .ea-why-card::before,
    #enterprise-app .ea-process-step::before {
        content: "";
        position: absolute;
        inset: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--ea-blue), var(--ea-yellow));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .4s ease;
    }

    #enterprise-app .ea-overview-card i,
    #enterprise-app .ea-service-card i,
    #enterprise-app .ea-why-card i {
        font-size: 34px;
        color: var(--ea-blue);
        margin-bottom: 16px;
        transition: all .4s ease;
    }

    #enterprise-app .ea-overview-card:hover,
    #enterprise-app .ea-service-card:hover,
    #enterprise-app .ea-why-card:hover,
    #enterprise-app .ea-process-step:hover {
        transform: translateY(-12px);
        box-shadow: var(--ea-shadow-hover);
    }

        #enterprise-app .ea-overview-card:hover::before,
        #enterprise-app .ea-service-card:hover::before,
        #enterprise-app .ea-why-card:hover::before,
        #enterprise-app .ea-process-step:hover::before {
            transform: scaleX(1);
        }

        #enterprise-app .ea-overview-card:hover i,
        #enterprise-app .ea-service-card:hover i,
        #enterprise-app .ea-why-card:hover i {
            color: var(--ea-yellow);
            transform: scale(1.15) rotate(-3deg);
            filter: drop-shadow(0 8px 10px rgba(251, 188, 5, 0.45) );
        }

/*---------
   GRIDS
---------*/
#enterprise-app .ea-overview-grid,
#enterprise-app .ea-service-grid,
#enterprise-app .ea-why-grid,
#enterprise-app .ea-process-grid {
    display: grid;
    gap: 30px;
}

#enterprise-app .ea-overview-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
}

#enterprise-app .ea-service-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}

#enterprise-app .ea-why-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}

#enterprise-app .ea-process-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
}

/*----------------
   PROCESS STEP
----------------*/
#enterprise-app .ea-process-step span {
    display: inline-block;
    background: linear-gradient(90deg, var(--ea-blue), var(--ea-yellow));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
}

/*---------------
   RESPONSIVE
---------------*/
@media (max-width: 900px) {
    #enterprise-app .ea-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #enterprise-app .ea-hero-image {
        text-align: center;
        margin-top: 40px;
    }

    #enterprise-app .ea-hero h1 {
        font-size: 36px;
    }

    #enterprise-app .ea-actions {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    #enterprise-app .ea-section {
        padding: 70px 16px;
    }

    #enterprise-app .ea-hero h1 {
        font-size: 1.9rem;
    }
}

/*#endregion*/

/*#region MICROSERVICES*/
/*-----------------
    ROOT THEME
-----------------*/
#microservices {
    --ms-primary: #1f4fd8;
    --ms-secondary: #3b82f6;
    --ms-accent: #facc15;
    --ms-dark: #0b1020;
    --ms-text: #475569;
    --ms-bg: #f5f8ff;
    --ms-card: #ffffff;
    --ms-border: rgba(31,79,216,.12);
    background: var(--ms-bg);
    color: var(--ms-text);
}

    /*------------
        GLOBAL
    ------------*/
    #microservices section {
        padding: 60px 0;
    }

    #microservices .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #microservices h2 {
        text-align: center;
        margin-bottom: 18px;
        color: var(--ms-dark);
    }

    #microservices .subtitle {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 60px;
        font-size: 18px;
        line-height: 1.7;
    }

    /*----------
        HERO
    ----------*/
    #microservices .ms-tag {
        background: rgba(59,130,246,.20);
        padding: 8px 15px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        color: var(--ms-secondary);
        font-weight: 600;
        letter-spacing: .4px;
    }

    #microservices .ms-hero {
        min-height: 80vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 18% 18%, rgba(59,130,246,.20), transparent 45%), radial-gradient(circle at 82% 30%, rgba(250,204,21,.14), transparent 42%), linear-gradient(180deg, #ffffff, #f5f8ff);
    }

    #microservices .ms-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        padding: 0 10%;
    }

    #microservices .ms-hero h1 {
        font-size: 46px;
        font-weight: 800;
        font-style: italic;
        line-height: 1.05;
        background: linear-gradient(90deg, var(--ms-primary), var(--ms-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #microservices .ms-hero p {
        font-size: 18px;
        line-height: 1.7;
        margin: 22px 0 30px;
    }

    #microservices .ms-hero ul {
        list-style: none;
        padding: 0;
    }

    #microservices .ms-hero li {
        margin-bottom: 12px;
        font-size: 16px;
    }

        #microservices .ms-hero li i {
            color: var(--ms-secondary);
            margin-right: 10px;
        }

    #microservices .ms-hero img {
        width: 100%;
        filter: drop-shadow(0 40px 60px rgba(31,79,216,.25));
    }

    /*--------------
        ICON BASE
    --------------*/
    #microservices i {
        transition: transform .25s ease, color .25s ease, text-shadow .25s ease;
    }

    /*----------
        CARDS
    ----------*/
    #microservices .ms-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #microservices .ms-card {
        height: 100%;
        background: var(--ms-card);
        padding: 34px 32px;
        border-radius: 18px;
        border: 1px solid var(--ms-border);
        box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        transition: transform .25s ease, box-shadow .25s ease;
    }

        #microservices .ms-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 45px rgba(31,79,216,0.25);
        }

            #microservices .ms-card:hover i {
                transform: translateY(-6px) scale(1.08);
                color: var(--ms-accent);
                text-shadow: 0 10px 25px rgba(31,79,216,0.45);
            }

    #microservices .ms-icon {
        font-size: 46px;
        color: var(--ms-primary);
        margin-bottom: 16px;
    }

    /*-----------------------
        ARCHITECTURE FLOW
    -----------------------*/
    #microservices .ms-flow {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
        gap: 26px;
        text-align: center;
    }

        #microservices .ms-flow div {
            height: 100%;
            background: #fff;
            padding: 26px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        }

        #microservices .ms-flow .flow-div {
            height: 100%;
            background: #fff;
            padding: 26px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.06);
            transition: transform .25s ease, box-shadow .25s ease;
        }

            #microservices .ms-flow .flow-div:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 45px rgba(31,79,216,0.25);
            }

        #microservices .ms-flow i {
            display: block;
            margin: auto;
            font-size: 34px;
            margin-bottom: 12px;
            color: var(--ms-primary);
            transition: all 0.3s ease;
        }

        #microservices .ms-flow .flow-div:hover i {
            transform: translateY(-6px);
            color: var(--ms-secondary);
            filter: drop-shadow(0 8px 15px var(--ms-secondary));
        }

    /*------------
        PROCESS
    ------------*/
    #microservices .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
    }

        #microservices .process-grid .process-div {
            height: 100%;
            position: relative;
            background: #fff;
            padding: 34px 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            border-radius: 18px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.06);
            transition: transform .25s ease, box-shadow .25s ease;
        }

            #microservices .process-grid .process-div:hover {
                transform: translateY(-8px);
                box-shadow: 0 20px 45px rgba(31,79,216,0.25);
            }

        #microservices .process-grid span {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 40px;
            width: 40px;
            background: var(--ms-secondary);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            font-size: 18px;
            font-weight: 700;
            color: var(--ms-accent);
            transition: all 0.3s ease;
        }

        #microservices .process-grid div:hover span {
            color: #fff;
            background: var(--ms-primary);
        }

    /*-------------
        FEATURES
    -------------*/
    #microservices .ms-feature {
        display: flex;
        gap: 16px;
        margin-bottom: 18px;
    }

        #microservices .ms-feature i {
            color: var(--ms-accent);
            font-size: 22px;
        }

    /*----------------
        TECH STACK
    ----------------*/
    #microservices .ms-stack {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

        #microservices .ms-stack span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 22px;
            background: linear-gradient(135deg, var(--ms-primary), var(--ms-secondary));
            color: #fff;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            box-shadow: 0 8px 22px rgba(31,79,216,.18);
            transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
        }

        #microservices .ms-stack i {
            font-size: 18px;
            transition: transform .25s ease, filter .25s ease;
        }

        #microservices .ms-stack span:hover {
            transform: translateY(-6px);
            box-shadow: 0 18px 40px rgba(31,79,216,.35);
            background: linear-gradient(135deg, var(--ms-secondary), var(--ms-primary));
        }

            #microservices .ms-stack span:hover i {
                transform: scale(1.25) rotate(6deg);
                filter: drop-shadow(0 6px 12px rgba(255,255,255,.6));
            }

    /*--------
        CTA
    --------*/
    #microservices .ms-cta {
        background: linear-gradient(120deg, var(--ms-primary), var(--ms-secondary));
        color: #fff;
        text-align: center;
    }

        #microservices .ms-cta h2 {
            color: #fff;
        }

        #microservices .ms-cta a {
            display: inline-block;
            padding: 15px 36px;
            background: #fff;
            color: var(--ms-primary);
            border-radius: 50px;
            font-weight: 700;
            text-decoration: none;
            transition: transform .25s ease, box-shadow .25s ease;
        }

            #microservices .ms-cta a:hover {
                transform: translateY(-4px);
                box-shadow: 0 18px 40px rgba(255,255,255,.6);
            }

/*-----------------
    RESPONSIVE
-----------------*/
@media (max-width: 992px) {
    #microservices .ms-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #microservices .ms-hero h1 {
        font-size: 42px;
    }
}

/*#endregion*/

/*#region MOBILE APP*/
/*------------
    THEME
------------*/
#mobile-app {
    --ma-primary: #2563eb;
    --ma-secondary: #3b82f6;
    --ma-accent: #facc15;
    --ma-danger: #ef4444;
    --ma-dark: #0f172a;
    --ma-text: #475569;
    --ma-bg: #f4f8ff;
    --ma-card: #ffffff;
    --ma-border: rgba(37,99,235,.14);
    background: var(--ma-bg);
    color: var(--ma-text);
}

    /*-----------
        GLOBAL
    -----------*/
    #mobile-app section {
        padding: 70px 0;
    }

    #mobile-app .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #mobile-app h2 {
        text-align: center;
        color: var(--ma-dark);
        margin-bottom: 18px;
    }

    #mobile-app .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
        line-height: 1.7;
    }

    /*----------
        HERO
    ----------*/
    #mobile-app .ma-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(59,130,246,.18), transparent 45%), radial-gradient(circle at 80% 30%, rgba(250,204,21,.18), transparent 40%), linear-gradient(180deg, #ffffff, #f4f8ff);
    }

    #mobile-app .ma-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        padding: 0 10%;
    }

    #mobile-app .ma-tag {
        background: rgba(59,130,246,.20);
        padding: 8px 15px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        color: var(--ma-primary);
        font-weight: 600;
        letter-spacing: .4px;
    }

    #mobile-app .ma-hero h1 {
        font-size: 46px;
        font-weight: 800;
        font-style: italic;
        line-height: 1.05;
        background: linear-gradient(90deg, var(--ma-primary), var(--ma-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #mobile-app .ma-hero p {
        font-size: 18px;
        margin: 22px 0 30px;
        line-height: 1.7;
    }

    #mobile-app .ma-tags {
        display: flex;
    }

        #mobile-app .ma-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            border: 1px solid var(--ma-border);
            font-weight: 600;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #mobile-app .ma-tags span i {
                color: var(--ma-primary);
            }

            #mobile-app .ma-tags span:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 30px rgba(37,99,235,.25);
            }

    /*-----------
        CARDS
    -----------*/
    #mobile-app .ma-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #mobile-app .ma-card {
        height: 100%;
        background: var(--ma-card);
        padding: 36px 32px;
        border-radius: 22px;
        border: 1px solid var(--ma-border);
        transition: transform .45s ease, box-shadow .45s ease;
        position: relative;
        overflow: hidden;
    }

        #mobile-app .ma-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent, rgba(59,130,246,.12), transparent);
            opacity: 0;
            transition: opacity .4s ease;
        }

        #mobile-app .ma-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 70px rgba(37,99,235,.25);
        }

            #mobile-app .ma-card:hover::before {
                opacity: 1;
            }

    #mobile-app .ma-icon {
        font-size: 46px;
        margin-bottom: 18px;
        color: var(--ma-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #mobile-app .ma-card:hover .ma-icon {
        transform: scale(1.2) rotate(8deg);
        color: var(--ma-accent);
        filter: drop-shadow(0 5px 8px rgba(250,204,21,.87));
    }

    /*    #mobile-app .ma-card h4 {
        font-size: 22px;
        color: var(--ma-dark);
        margin-bottom: 12px;
    }*/

    /*--------------
        FEATURES
    --------------*/
    #mobile-app .ma-feature {
        display: flex;
        gap: 14px;
        margin-bottom: 18px;
    }

        #mobile-app .ma-feature i {
            color: var(--ma-secondary);
            font-size: 22px;
            margin-top: 4px;
        }

    /*-------------
        PROCESS
    -------------*/
    #mobile-app .ma-process {
        background: linear-gradient(180deg, #ffffff, #f4f8ff);
    }

    #mobile-app .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 28px;
    }

        #mobile-app .process-grid .process-div-wrapper {
            position: relative;
            height: 100%;
            background: #fff;
            padding: 34px;
            border-radius: 20px;
            text-align: center;
            border: 1px solid var(--ma-border);
            transition: transform .4s ease, box-shadow .4s ease;
        }

        #mobile-app .process-grid .process-div {
            position: relative;
            height: 100%;
            background: #fff;
            padding: 34px;
            border-radius: 20px;
            text-align: center;
            border: 1px solid var(--ma-border);
            transition: transform .4s ease, box-shadow .4s ease;
        }

            #mobile-app .process-grid .process-div span {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%, -50%);
                height: 40px;
                width: 40px;
                border-radius: 50%;
                background: var(--ma-primary);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 18px;
                font-weight: 700;
                color: #fff;
                transition: all 0.3s ease;
            }

            #mobile-app .process-grid .process-div-wrapper:hover,
            #mobile-app .process-grid .process-div:hover {
                transform: translateY(-10px);
                box-shadow: 0 28px 60px rgba(37,99,235,.22);
            }

                #mobile-app .process-grid .process-div:hover span {
                    background: var(--ma-danger);
                    filter: drop-shadow(0 8px 10px var(--ma-danger));
                }

    /*----------------
        TECH STACK
    ----------------*/
    #mobile-app .ma-stack {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #mobile-app .ma-stack span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 22px;
            margin: 8px;
            background: linear-gradient(90deg, var(--ma-primary), var(--ma-secondary));
            color: #fff;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 500;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #mobile-app .ma-stack span i {
                font-size: 16px;
            }

            #mobile-app .ma-stack span:hover {
                transform: translateY(-6px) scale(1.08);
                box-shadow: 0 18px 40px rgba(37,99,235,.45);
            }

    /*---------
        CTA
    ---------*/
    #mobile-app .ma-cta {
        background: linear-gradient(120deg, var(--ma-primary), var(--ma-secondary));
        color: #fff;
        text-align: center;
    }

        #mobile-app .ma-cta h2 {
            color: #fff;
        }

        #mobile-app .ma-cta a {
            display: inline-block;
            padding: 16px 38px;
            background: #fff;
            color: var(--ma-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #mobile-app .ma-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #mobile-app .ma-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #mobile-app .ma-hero h1 {
        font-size: 42px;
    }
}
/*#endregion*/

/*#region SAAS PLATFORM*/
#saas-platform {
    --sa-primary: #4f73df;
    --sa-secondary: #7aa2f7;
    --sa-accent: #fbbf24;
    --sa-dark: #0f172a;
    --sa-text: #475569;
    --sa-bg: #f3f7ff;
    --sa-card: #ffffff;
    --sa-border: rgba(79,115,223,.18);
    background: var(--sa-bg);
    color: var(--sa-text);
}

    #saas-platform section {
        padding: 70px 0;
    }

    #saas-platform .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #saas-platform h2 {
        text-align: center;
        color: var(--sa-dark);
        margin-bottom: 16px;
    }

    #saas-platform .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
    }

    /*----------
        HERO
    ----------*/
    #saas-platform .sa-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(79,115,223,.18), transparent 45%), radial-gradient(circle at 80% 30%, rgba(251,191,36,.18), transparent 40%), linear-gradient(180deg,#fff,#f3f7ff);
    }

    #saas-platform .sa-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        padding: 0 10%;
    }

    #saas-platform .sa-tag {
        background: rgba(79,115,223,.18);
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--sa-primary);
    }

    #saas-platform .sa-hero h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        background: linear-gradient(90deg,var(--sa-primary),var(--sa-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #saas-platform .sa-tags {
        display: flex;
    }

        #saas-platform .sa-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            font-weight: 500;
            border: 1px solid var(--sa-border);
            transition: .3s;
        }

            #saas-platform .sa-tags span:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 30px rgba(79,115,223,.25);
            }

    /*----------
        CARDS
    ----------*/
    #saas-platform .sa-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 32px;
    }

    #saas-platform .sa-card {
        height: 100%;
        background: var(--sa-card);
        padding: 36px 32px;
        border-radius: 22px;
        border: 1px solid var(--sa-border);
        transition: .4s;
    }

        #saas-platform .sa-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 60px rgba(79,115,223,.25);
        }

    #saas-platform .sa-icon {
        font-size: 35px;
        color: var(--sa-primary);
        margin-bottom: 16px;
        transition: .4s;
    }

    #saas-platform .sa-card:hover .sa-icon {
        color: var(--sa-accent);
        transform: scale(1.2);
    }

    /*-------------
        PROCESS
    -------------*/
    #saas-platform .sa-process {
        background: linear-gradient(180deg,#fff,#f3f7ff);
    }

    #saas-platform .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 28px;
    }

    #saas-platform .process-div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        position: relative;
        background: #fff;
        padding: 34px;
        border-radius: 20px;
        text-align: center;
        border: 1px solid var(--sa-border);
        transition: .4s;
    }

        #saas-platform .process-div span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--sa-primary);
            color: #fff;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        #saas-platform .process-div:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 60px rgba(79,115,223,.25);
        }

            #saas-platform .process-div:hover span {
                background: #fff;
                color: var(--sa-primary);
                border: 4px dotted var(--sa-border);
            }

    /*-----------
        STACK
    -----------*/
    #saas-platform .sa-stack {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        #saas-platform .sa-stack .stack-div {
            background: linear-gradient(90deg,var(--sa-primary),var(--sa-secondary));
            color: #fff;
            padding: 12px 22px;
            margin: 8px;
            border-radius: 40px;
            font-weight: 500;
            transition: .3s;
        }

            #saas-platform .sa-stack .stack-div:hover {
                cursor: pointer;
                transform: translateY(-6px) scale(1.08);
            }

    /*---------
        CTA
    ---------*/
    #saas-platform .sa-cta {
        background: linear-gradient(120deg,var(--sa-primary),var(--sa-secondary));
        text-align: center;
        color: #fff;
    }

        #saas-platform .sa-cta a {
            display: inline-block;
            padding: 16px 38px;
            background: #fff;
            color: var(--sa-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: .3s;
        }

            #saas-platform .sa-cta a:hover {
                transform: scale(1.1);
            }

/*#endregion*/

/*#region WEB APP*/
#web-app {
    --wa-primary: #0ea5a4;
    --wa-secondary: #2563eb;
    --wa-accent: #22c55e;
    --wa-dark: #0f172a;
    --wa-text: #475569;
    --wa-bg: #f3f8ff;
    --wa-border: rgba(14,165,164,.18);
    background: var(--wa-bg);
    color: var(--wa-text);
}

    /*------------
        GLOBAL
    ------------*/
    #web-app section {
        padding: 70px 0;
    }

    #web-app .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #web-app h2 {
        text-align: center;
        color: var(--wa-dark);
        margin-bottom: 18px;
    }

    #web-app .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
        line-height: 1.7;
    }

    /*----------
        HERO
    ----------*/
    #web-app .wa-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(14,165,164,.2), transparent 45%), radial-gradient(circle at 80% 30%, rgba(37,99,235,.2), transparent 40%), linear-gradient(180deg, #ffffff, #f3f8ff);
    }

    #web-app .wa-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #web-app .wa-tag {
        background: rgba(14,165,164,.18);
        padding: 8px 16px;
        border-radius: 30px;
        font-weight: 600;
        color: var(--wa-primary);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 18px;
    }

    #web-app .wa-hero h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.1;
        background: linear-gradient(90deg, var(--wa-primary), var(--wa-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #web-app .wa-hero p {
        font-size: 18px;
        line-height: 1.7;
        margin: 22px 0 30px;
    }

    #web-app .wa-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #web-app .wa-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            border: 1px solid var(--wa-border);
            font-weight: 600;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #web-app .wa-tags span i {
                color: var(--wa-primary);
            }

            #web-app .wa-tags span:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 30px rgba(14,165,164,.25);
            }

    /*-----------
        CARDS
    -----------*/
    #web-app .wa-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 32px;
    }

    #web-app .wa-card {
        height: 100%;
        background: #fff;
        padding: 36px 32px;
        border-radius: 22px;
        border: 1px solid var(--wa-border);
        transition: transform .45s ease, box-shadow .45s ease;
        position: relative;
        overflow: hidden;
    }

        #web-app .wa-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent, rgba(14,165,164,.12), transparent);
            opacity: 0;
            transition: opacity .4s ease;
        }

        #web-app .wa-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 70px rgba(14,165,164,.28);
        }

            #web-app .wa-card:hover::before {
                opacity: 1;
            }

    #web-app .wa-icon {
        font-size: 44px;
        margin-bottom: 18px;
        color: var(--wa-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #web-app .wa-card:hover .wa-icon {
        transform: scale(1.2) rotate(8deg);
        color: var(--wa-accent);
        filter: drop-shadow(0 5px 8px rgba(34,197,94,.7));
    }

    /*-------------
        PROCESS
    -------------*/
    #web-app .wa-process {
        background: linear-gradient(180deg, #ffffff, #f3f8ff);
    }

    #web-app .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 28px;
        margin-top: 50px;
    }

    #web-app .process-div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        position: relative;
        background: #fff;
        padding: 38px 26px;
        border-radius: 20px;
        text-align: center;
        border: 1px solid var(--wa-border);
        font-weight: 600;
        transition: transform .4s ease, box-shadow .4s ease;
    }

        #web-app .process-div span {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background: var(--wa-primary);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            transition: .3s;
        }

        #web-app .process-div:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(14,165,164,.28);
        }

            #web-app .process-div:hover span {
                background: var(--wa-accent);
            }

    /*----------------
        TECH STACK
    ----------------*/
    #web-app .wa-stack {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 40px;
    }

        #web-app .wa-stack span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 22px;
            margin: 8px;
            background: linear-gradient(90deg, var(--wa-primary), var(--wa-secondary));
            color: #fff;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 500;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #web-app .wa-stack span:hover {
                transform: translateY(-6px) scale(1.08);
                box-shadow: 0 18px 40px rgba(14,165,164,.45);
            }

    /*---------
        CTA
    ---------*/
    #web-app .wa-cta {
        background: linear-gradient(120deg, var(--wa-primary), var(--wa-secondary));
        color: #fff;
        text-align: center;
    }

        #web-app .wa-cta h2 {
            color: #fff;
        }

        #web-app .wa-cta p {
            max-width: 600px;
            margin: 0 auto 28px;
        }

        #web-app .wa-cta a {
            display: inline-block;
            padding: 16px 40px;
            background: #fff;
            color: var(--wa-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #web-app .wa-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
   RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #web-app .wa-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 0 5%;
    }

    #web-app .wa-tags {
        justify-content: center;
    }

    #web-app .wa-hero h1 {
        font-size: 40px;
    }
}

@media (max-width: 576px) {
    #web-app .wa-hero h1 {
        font-size: 34px;
    }

    #web-app section {
        padding: 60px 0;
    }

    #web-app .wa-card {
        padding: 30px 24px;
    }
}

/*#endregion*/

/*#region WINDOWS APP*/
#windows-app {
    --wa-primary: #2563eb;
    --wa-secondary: #6366f1;
    --wa-accent: #22d3ee;
    --wa-dark: #0b1020;
    --wa-text: #475569;
    --wa-bg: #f3f6ff;
    --wa-card: #ffffff;
    --wa-border: rgba(99,102,241,.18);
    background: var(--wa-bg);
    color: var(--wa-text);
    overflow: hidden;
}

    /*------------
        GLOBAL
    ------------*/
    #windows-app section {
        padding: 70px 0;
    }

    #windows-app .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #windows-app h2 {
        text-align: center;
        color: var(--wa-dark);
        margin-bottom: 18px;
        font-size: 34px;
    }

    #windows-app h4 {
        margin-bottom: 10px;
    }

    #windows-app p {
        line-height: 1.7;
    }

    #windows-app .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #windows-app .wa-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(99,102,241,.25), transparent 45%), radial-gradient(circle at 80% 30%, rgba(34,211,238,.25), transparent 40%), linear-gradient(180deg, #fff, var(--wa-bg));
    }

    #windows-app .wa-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #windows-app .wa-hero img {
        width: 100%;
        margin: auto;
        filter: drop-shadow(0 40px 60px rgba(99,102,241,.35));
    }

    #windows-app .wa-tag {
        display: flex;
        align-items: center;
        background: rgba(99,102,241,.2);
        padding: 8px 16px;
        border-radius: 20px;
        color: var(--wa-primary);
        font-weight: 600;
        display: inline-flex;
        gap: 8px;
        margin-bottom: 14px;
    }

    #windows-app .wa-hero h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.05;
        background: linear-gradient(90deg, var(--wa-primary), var(--wa-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #windows-app .wa-tags {
        display: flex;
    }

        #windows-app .wa-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            border: 1px solid var(--wa-border);
            font-weight: 600;
            transition: .3s;
        }

            #windows-app .wa-tags span:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 30px rgba(99,102,241,.25);
            }

    /*-------------------
        GRID / CARDS
    -------------------*/
    #windows-app .wa-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 32px;
    }

    #windows-app .wa-card {
        height: 100%;
        background: var(--wa-card);
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--wa-border);
        transition: .45s;
        position: relative;
        overflow: hidden;
    }

        #windows-app .wa-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent, rgba(99,102,241,.15), transparent);
            opacity: 0;
            transition: .4s;
        }

        #windows-app .wa-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 70px rgba(99,102,241,.3);
        }

            #windows-app .wa-card:hover::before {
                opacity: 1;
            }

    #windows-app .wa-icon {
        font-size: 40px;
        color: var(--wa-primary);
        margin-bottom: 18px;
        transition: .4s;
    }

    #windows-app .wa-card:hover .wa-icon {
        transform: scale(1.2) rotate(6deg);
        color: var(--wa-accent);
    }

    /*-------------
        PROCESS
    -------------*/
    #windows-app .wa-process {
        background: linear-gradient(180deg, #fff, var(--wa-bg));
    }

    #windows-app .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
        gap: 24px;
    }

    #windows-app .process-box {
        height: 100%;
        position: relative;
        padding: 34px;
        border-radius: 20px;
        background: #fff;
        font-weight: 500;
        border: 1px solid var(--wa-border);
        text-align: center;
        transition: .4s;
    }

        #windows-app .process-box span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--wa-primary);
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            line-height: 40px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        #windows-app .process-box:hover {
            transform: translateY(-10px);
            box-shadow: 0 28px 60px rgba(99,102,241,.3);
        }

            #windows-app .process-box:hover span {
                color: var(--wa-primary);
                background: var(--wa-accent);
            }

    /*-----------
        STACK
    -----------*/
    #windows-app .wa-stack {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

        #windows-app .wa-stack span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 22px;
            margin: 8px;
            background: linear-gradient(90deg,var(--wa-primary),var(--wa-secondary));
            color: #fff;
            font-weight: 500;
            border-radius: 40px;
            transition: .3s;
        }

            #windows-app .wa-stack span:hover {
                transform: translateY(-6px) scale(1.08);
                box-shadow: 0 18px 40px rgba(99,102,241,.45);
            }

    /*---------
        CTA
    ---------*/
    #windows-app .wa-cta {
        background: linear-gradient(120deg,var(--wa-primary),var(--wa-secondary));
        color: #fff;
        text-align: center;
    }

        #windows-app .wa-cta h2 {
            color: #fff;
        }

        #windows-app .wa-cta a {
            text-decoration: none;
            display: inline-block;
            padding: 16px 38px;
            background: #fff;
            color: var(--wa-primary);
            border-radius: 50px;
            font-weight: 600;
            transition: .3s;
        }

            #windows-app .wa-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media(max-width:992px) {
    #windows-app .wa-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #windows-app .wa-hero h1 {
        font-size: 40px;
    }
}
/*#endregion*/

/*#region DIGITAL MARKETING*/
#digital-marketing {
    --dm-primary: #f97316;
    --dm-secondary: #22c1c3;
    --dm-accent: #38bdf8;
    --dm-dark: #0f172a;
    --dm-text: #475569;
    --dm-bg: #f8fafc;
    --dm-card: #ffffff;
    --dm-border: rgba(249,115,22,.18);
    background: var(--dm-bg);
    color: var(--dm-text);
    overflow: hidden;
}

    #digital-marketing section {
        padding: 70px 0;
    }

    #digital-marketing .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
        text-align: center;
    }

    /*---------
        HERO
    ---------*/
    #digital-marketing .dm-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(34,193,195,.25), transparent 45%), radial-gradient(circle at 80% 30%, rgba(249,115,22,.25), transparent 40%), linear-gradient(180deg, #fff, var(--dm-bg));
    }

    #digital-marketing .dm-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #digital-marketing .dm-tag {
        background: rgba(249,115,22,.2);
        padding: 8px 16px;
        border-radius: 20px;
        color: var(--dm-primary);
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #digital-marketing .dm-hero h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        background: linear-gradient(90deg, var(--dm-primary), var(--dm-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #digital-marketing .dm-tags {
        display: flex;
    }

        #digital-marketing .dm-tags span {
            display: inline-flex;
            align-items: center;
            font-weight: 500;
            gap: 8px;
            padding: 10px 20px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            border: 1px solid var(--dm-border);
            transition: .3s;
        }

            #digital-marketing .dm-tags span:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 30px rgba(249,115,22,.3);
            }

    /*------------
        CARDS
    ------------*/
    #digital-marketing .dm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 32px;
        margin-top: 30px;
    }

    #digital-marketing .dm-card {
        height: 100%;
        background: var(--dm-card);
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--dm-border);
        transition: .4s;
    }

        #digital-marketing .dm-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 35px 70px rgba(249,115,22,.25);
        }

    #digital-marketing .dm-icon {
        font-size: 44px;
        color: var(--dm-primary);
        margin-bottom: 18px;
        transition: .4s;
    }

    #digital-marketing .dm-card:hover .dm-icon {
        color: var(--dm-accent);
        transform: scale(1.2) rotate(8deg);
    }

    /*--------------
        PROCESS
    --------------*/
    #digital-marketing .dm-process {
        background: linear-gradient(180deg, #fff, var(--dm-bg));
    }

        #digital-marketing .dm-process .process-grid {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 30px;
        }

    #digital-marketing .process-div {
        position: relative;
        padding: 34px;
        font-weight: 500;
        border-radius: 20px;
        background: #fff;
        text-align: center;
        border: 1px solid var(--dm-border);
        transition: all 0.3s ease;
    }

        #digital-marketing .process-div span {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--dm-primary);
            color: #fff;
            height: 36px;
            width: 36px;
            font-weight: 500;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        #digital-marketing .process-div:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 40px rgba(249,115,22,.05);
        }

            #digital-marketing .process-div:hover span {
                background: var(--dm-secondary);
            }


    /*---------
        CTA
    ---------*/
    #digital-marketing .dm-cta {
        background: linear-gradient(120deg, var(--dm-primary), var(--dm-secondary));
        color: #fff;
        text-align: center;
    }

        #digital-marketing .dm-cta a {
            text-decoration: none;
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--dm-primary);
            border-radius: 50px;
            font-weight: 600;
            transition: .3s;
        }

            #digital-marketing .dm-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*-----------------
    RESPONSIVE
-----------------*/

/* ---------- TABLET ---------- */
@media (max-width: 992px) {

    #digital-marketing .dm-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #digital-marketing section {
        padding: 60px 0;
    }

    #digital-marketing .dm-hero {
        min-height: auto;
        padding: 60px 0;
    }

    #digital-marketing .dm-hero-grid {
        grid-template-columns: 1fr;
        padding: 0 6%;
        text-align: center;
        gap: 40px;
    }

    #digital-marketing .dm-hero h1 {
        font-size: 38px;
        line-height: 1.15;
    }

    #digital-marketing .dm-tags {
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 20px;
    }

        #digital-marketing .dm-tags span {
            font-size: 14px;
            padding: 9px 18px;
        }

    /* PROCESS GRID */
    #digital-marketing .dm-process .process-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    #digital-marketing .process-div {
        padding: 28px 20px;
        font-size: 14px;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width: 576px) {

    #digital-marketing section {
        padding: 50px 0;
    }

    #digital-marketing .container {
        width: 92%;
    }

    #digital-marketing .dm-hero-grid {
        padding: 0 4%;
        gap: 30px;
    }

    #digital-marketing .dm-hero h1 {
        font-size: 30px;
        font-weight: 700;
    }

    #digital-marketing .dm-hero p {
        font-size: 15px;
        line-height: 1.6;
    }

    #digital-marketing .dm-tag {
        font-size: 13px;
        padding: 6px 14px;
    }

    #digital-marketing .dm-tags span {
        font-size: 13px;
        padding: 8px 16px;
        margin: 4px;
    }

    /* CARDS */
    #digital-marketing .dm-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #digital-marketing .dm-card {
        padding: 28px 22px;
    }

    #digital-marketing .dm-icon {
        font-size: 38px;
    }

    /* PROCESS SINGLE COLUMN */
    #digital-marketing .dm-process .process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #digital-marketing .process-div span {
        top: -16px;
        height: 34px;
        width: 34px;
        font-size: 14px;
    }

    /* CTA */
    #digital-marketing .dm-cta {
        padding: 60px 0;
    }

        #digital-marketing .dm-cta h2 {
            font-size: 26px;
            line-height: 1.2;
        }

        #digital-marketing .dm-cta p {
            font-size: 15px;
        }

        #digital-marketing .dm-cta a {
            padding: 14px 32px;
            font-size: 15px;
        }
}

/* ---------- EXTRA SMALL DEVICES ---------- */
@media (max-width: 380px) {

    #digital-marketing .dm-hero h1 {
        font-size: 26px;
    }

    #digital-marketing .dm-tags span {
        font-size: 12px;
        padding: 7px 14px;
    }
}


/*#endregion*/

/*#region MARKETING AUTOMATION*/
#marketing-automation {
    --mauto-primary: #6366f1;
    --mauto-secondary: #3b82f6;
    --mauto-accent: #facc15;
    --mauto-dark: #0f172a;
    --mauto-text: #475569;
    --mauto-bg: #f5f7ff;
    --mauto-card: #ffffff;
    --mauto-border: rgba(99,102,241,.18);
    background: var(--mauto-bg);
    color: var(--mauto-text);
    overflow: hidden;
}

    #marketing-automation section {
        padding: 70px 0;
    }

    #marketing-automation .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
        text-align: center;
    }

    /*---------
        HERO
    ---------*/
    #marketing-automation .mauto-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(99,102,241,.25), transparent 45%), radial-gradient(circle at 80% 30%, rgba(250,204,21,.25), transparent 40%), linear-gradient(180deg, #fff, var(--mauto-bg));
    }

    #marketing-automation .mauto-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #marketing-automation .mauto-tag {
        background: rgba(99,102,241,.2);
        padding: 8px 16px;
        border-radius: 20px;
        color: var(--mauto-primary);
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #marketing-automation h1 {
        font-size: 46px;
        font-weight: 800;
        font-style: italic;
        background: linear-gradient(90deg, var(--mauto-primary), var(--mauto-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #marketing-automation .mauto-tags {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        #marketing-automation .mauto-tags span {
            display: inline-flex;
            align-items: center;
            font-weight: 500;
            gap: 8px;
            padding: 10px 20px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            border: 1px solid var(--mauto-border);
            transition: .3s;
        }

            #marketing-automation .mauto-tags span:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 30px rgba(99,102,241,.3);
            }

    /*-----------
        CARDS
    -----------*/
    #marketing-automation .mauto-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 32px;
        margin-top: 30px;
    }

    #marketing-automation .mauto-card {
        height: 100%;
        background: var(--mauto-card);
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--mauto-border);
        transition: .45s ease;
    }

        #marketing-automation .mauto-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 70px rgba(99,102,241,.25);
        }

    #marketing-automation .mauto-icon {
        font-size: 46px;
        color: var(--mauto-primary);
        margin-bottom: 18px;
        transition: .4s;
    }

    #marketing-automation .mauto-card:hover .mauto-icon {
        transform: scale(1.2) rotate(8deg);
        color: var(--mauto-accent);
        filter: drop-shadow(0 6px 8px rgba(250,204,21,.8));
    }

    /*-------------
        PROCESS
    -------------*/
    #marketing-automation .mauto-process {
        background: linear-gradient(180deg, #fff, var(--mauto-bg));
    }

    #marketing-automation .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 28px;
        margin-top: 30px;
    }

    #marketing-automation .process-div {
        height: 100%;
        position: relative;
        padding: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        border-radius: 20px;
        background: #fff;
        border: 1px solid var(--mauto-border);
        transition: .3s;
    }

        #marketing-automation .process-div span {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            height: 38px;
            width: 38px;
            background: var(--mauto-primary);
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        #marketing-automation .process-div:hover {
            transform: translateY(-10px);
            box-shadow: 0 28px 60px rgba(99,102,241,.22);
        }

            #marketing-automation .process-div:hover span {
                background: var(--mauto-secondary);
            }

    /*----------
        CTA
    ----------*/
    #marketing-automation .mauto-cta {
        background: linear-gradient(120deg, var(--mauto-primary), var(--mauto-secondary));
        color: #fff;
    }

        #marketing-automation .mauto-cta a {
            text-decoration: none;
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--mauto-primary);
            border-radius: 50px;
            font-weight: 600;
            transition: .3s;
        }

            #marketing-automation .mauto-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #marketing-automation .mauto-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 0 6%;
    }

    #marketing-automation h1 {
        font-size: 38px;
    }
}

@media (max-width: 576px) {
    #marketing-automation h1 {
        font-size: 30px;
    }

    #marketing-automation section {
        padding: 55px 0;
    }
}

/*#endregion*/

/*#region SEO SERVICE*/
#seo-service {
    --seo-primary: #3b82f6;
    --seo-secondary: #ef4444;
    --seo-accent: #facc15;
    --seo-dark: #0f172a;
    --seo-text: #475569;
    --seo-bg: #f8fafc;
    --seo-card: #ffffff;
    --seo-border: rgba(59,130,246,.18);
    background: var(--seo-bg);
    color: var(--seo-text);
    overflow: hidden;
}

    #seo-service section {
        padding: 70px 0;
    }

    #seo-service .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
        text-align: center;
    }

    /*----------
        HERO
    ----------*/
    #seo-service .seo-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(250,204,21,.25), transparent 40%), radial-gradient(circle at 80% 30%, rgba(59,130,246,.25), transparent 45%), linear-gradient(180deg, #fff, var(--seo-bg));
    }

    #seo-service .seo-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #seo-service .seo-tag {
        background: rgba(59,130,246,.15);
        padding: 8px 18px;
        border-radius: 20px;
        font-weight: 600;
        color: var(--seo-primary);
        display: inline-flex;
        justify-content: center;
        align-content: center;
        gap: 8px;
    }

        #seo-service .seo-tag i {
            margin-top: 5px;
        }

    #seo-service .seo-hero-grid h1 {
        font-size: 46px;
        font-weight: 700;
        line-height: 1.30;
        font-style: italic;
        background: linear-gradient(90deg, var(--seo-primary), var(--seo-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #seo-service .seo-pills {
        display: flex;
        flex-wrap: wrap;
    }

        #seo-service .seo-pills span {
            display: inline-flex;
            align-items: center;
            font-weight: 500;
            gap: 8px;
            padding: 10px 20px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            border: 1px solid var(--seo-border);
            transition: .3s;
        }

            #seo-service .seo-pills span:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 30px rgba(59,130,246,.3);
            }

    /*----------
        GRID
    ----------*/
    #seo-service .seo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 32px;
        margin-top: 30px;
    }

    #seo-service .seo-card {
        height: 100%;
        background: var(--seo-card);
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--seo-border);
        transition: .4s;
    }

        #seo-service .seo-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 70px rgba(59,130,246,.25);
        }

    #seo-service .seo-icon {
        font-size: 46px;
        color: var(--seo-primary);
        margin-bottom: 18px;
        transition: .4s;
    }

    #seo-service .seo-card:hover .seo-icon {
        color: var(--seo-accent);
        transform: scale(1.2);
    }

    /*-------------
        PROCESS
    -------------*/
    #seo-service .seo-process {
        background: linear-gradient(180deg, #fff, var(--seo-bg));
    }

    #seo-service .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #seo-service .process-step {
        background: #fff;
        padding: 30px;
        border-radius: 20px;
        font-weight: 600;
        border: 1px solid var(--seo-border);
        position: relative;
        transition: all 0.5s ease;
    }

        #seo-service .process-step:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 70px rgba(59,130,246,.25);
        }

        #seo-service .process-step span {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--seo-primary);
            color: #fff;
            height: 36px;
            width: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s ease;
        }

        #seo-service .process-step:hover span {
            background: transparent;
            border: 2px solid var(--seo-accent);
            color: var(--seo-primary)
        }

    /*---------
        CTA
    ---------*/
    #seo-service .seo-cta {
        background: linear-gradient(120deg, var(--seo-primary), var(--seo-secondary));
        color: #fff;
    }

        #seo-service .seo-cta a {
            text-decoration: none;
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--seo-primary);
            border-radius: 50px;
            font-weight: 600;
            transition: .3s;
        }

            #seo-service .seo-cta a:hover {
                transform: scale(1.1);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
/* ---------- LAPTOP / TABLET ---------- */
@media (max-width: 992px) {

    #seo-service section {
        padding: 60px 0;
    }

    #seo-service .seo-hero {
        min-height: auto;
        padding: 60px 0;
    }

    #seo-service .seo-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 6%;
        text-align: center;
    }

        #seo-service .seo-hero-grid h1 {
            font-size: 38px;
            line-height: 1.25;
        }

    #seo-service .seo-pills {
        justify-content: center;
        margin-top: 18px;
    }

        #seo-service .seo-pills span {
            padding: 9px 18px;
            font-size: 14px;
        }

    /* PROCESS */
    #seo-service .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    #seo-service .process-step {
        padding: 26px 20px;
        font-size: 14px;
    }
}

/* ---------- MOBILE ---------- */
@media (max-width: 576px) {

    #seo-service section {
        padding: 50px 0;
    }

    #seo-service .container {
        width: 92%;
    }

    #seo-service .seo-hero-grid {
        padding: 0 4%;
        gap: 30px;
    }

        #seo-service .seo-hero-grid h1 {
            font-size: 30px;
            line-height: 1.2;
            display: inline-block;
            padding-bottom: 6px;
        }

    #seo-service .seo-tag {
        font-size: 13px;
        padding: 6px 14px;
    }

    #seo-service .seo-pills span {
        font-size: 13px;
        padding: 8px 16px;
        margin: 4px;
    }

    /* GRID */
    #seo-service .seo-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #seo-service .seo-card {
        padding: 28px 22px;
    }

    #seo-service .seo-icon {
        font-size: 38px;
    }

    /* PROCESS */
    #seo-service .process-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #seo-service .process-step span {
        top: -16px;
        height: 34px;
        width: 34px;
        font-size: 14px;
    }

    /* CTA */
    #seo-service .seo-cta {
        padding: 60px 0;
        text-align: center;
    }

        #seo-service .seo-cta h2 {
            font-size: 26px;
            line-height: 1.25;
        }

        #seo-service .seo-cta p {
            font-size: 15px;
        }

        #seo-service .seo-cta a {
            padding: 14px 32px;
            font-size: 15px;
        }
}

/* ---------- EXTRA SMALL DEVICES ---------- */
@media (max-width: 380px) {

    #seo-service .seo-hero-grid h1 {
        font-size: 26px;
    }

    #seo-service .seo-pills span {
        font-size: 12px;
        padding: 7px 14px;
    }
}


/*#endregion*/

/*#region SOCIAL MEDIA MARKETING*/
#social-media {
    --sm-primary: #2563eb;
    --sm-secondary: #f97316;
    --sm-accent: #ef4444;
    --sm-dark: #0f172a;
    --sm-text: #475569;
    --sm-bg: #f8fafc;
    --sm-card: #ffffff;
    --sm-border: rgba(37,99,235,.15);
    background: var(--sm-bg);
    color: var(--sm-text);
}

    #social-media section {
        padding: 70px 0;
    }

    #social-media .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #social-media h2 {
        text-align: center;
        color: var(--sm-dark);
        margin-bottom: 18px;
    }

    #social-media .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
        line-height: 1.7;
    }

    /*----------
        HERO
    ----------*/
    #social-media .sm-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(37,99,235,.18), transparent 45%), radial-gradient(circle at 80% 30%, rgba(249,115,22,.18), transparent 40%), linear-gradient(180deg, #ffffff, var(--sm-bg));
    }

    #social-media .sm-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        padding: 0 10%;
    }

    #social-media .sm-tag {
        background: rgba(37,99,235,.18);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        color: var(--sm-primary);
        font-weight: 600;
    }

    #social-media .sm-hero h1 {
        font-size: 46px;
        font-weight: 800;
        font-style: italic;
        line-height: 1.1;
        background: linear-gradient(90deg, var(--sm-primary), var(--sm-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #social-media .sm-hero p {
        font-size: 18px;
        margin: 22px 0 30px;
        line-height: 1.7;
    }

    #social-media .sm-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #social-media .sm-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            border: 1px solid var(--sm-border);
            font-weight: 600;
            transition: .3s;
        }

            #social-media .sm-tags span:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 30px rgba(37,99,235,.25);
            }

    /*-----------
        CARDS
    -----------*/
    #social-media .sm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 32px;
    }

    #social-media .sm-card {
        height: 100%;
        background: var(--sm-card);
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--sm-border);
        transition: .4s;
    }

        #social-media .sm-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 70px rgba(37,99,235,.25);
        }

    #social-media .sm-icon {
        font-size: 46px;
        margin-bottom: 18px;
        color: var(--sm-primary);
        transition: .4s;
    }

    #social-media .sm-card:hover .sm-icon {
        color: var(--sm-accent);
        transform: scale(1.2);
        filter: drop-shadow(0 6px 18px rgba(239, 68, 68, 0.55));
    }

    /*--------------
        PROCESS
    --------------*/
    #social-media .sm-process {
        background: linear-gradient(180deg, #ffffff, var(--sm-bg));
    }

    #social-media .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 28px;
    }

    #social-media .process-div {
        position: relative;
        background: #fff;
        padding: 34px;
        border-radius: 20px;
        border: 1px solid var(--sm-border);
        text-align: center;
        font-weight: 600;
        transition: .4s;
    }

        #social-media .process-div span {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background: var(--sm-primary);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        #social-media .process-div:hover {
            transform: translateY(-10px);
            box-shadow: 0 28px 60px rgba(37,99,235,.22);
        }

            #social-media .process-div:hover span {
                background: var(--sb-megenta);
                border: 2px dashed #fff;
            }

    /*----------------
        PLATFORMS
    ----------------*/
    #social-media .sm-platforms {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        #social-media .sm-platforms span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 22px;
            margin: 8px;
            background: linear-gradient(90deg, var(--sm-primary), var(--sm-secondary));
            color: #fff;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 500;
            transition: .3s;
        }

            #social-media .sm-platforms span:hover {
                transform: translateY(-6px) scale(1.08);
                box-shadow: 0 18px 40px rgba(37,99,235,.45);
            }

    /*----------
        CTA
    ----------*/
    #social-media .sm-cta {
        background: linear-gradient(120deg, var(--sm-primary), var(--sm-secondary));
        color: #fff;
        text-align: center;
    }

        #social-media .sm-cta a {
            display: inline-block;
            padding: 16px 38px;
            background: #fff;
            color: var(--sm-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: .3s;
        }

            #social-media .sm-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #social-media .sm-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #social-media .sm-hero h1 {
        font-size: 38px;
    }
}

@media (max-width: 576px) {
    #social-media .sm-hero h1 {
        font-size: 30px;
    }
}

/*#endregion*/

/*#region AUTOMATION TESTING*/
#automation-testing {
    --at-primary: #2b2e8f;
    --at-secondary: #ff8a7a;
    --at-accent: #6ea8ff;
    --at-bg: #f4f6ff;
    --at-dark: #0f172a;
    --at-text: #475569;
    --at-card: #ffffff;
    --at-border: rgba(43,46,143,.18);
    background: var(--at-bg);
    color: var(--at-text);
    overflow: hidden;
}

    #automation-testing section {
        padding: 80px 0;
    }

    #automation-testing .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
        text-align: center;
    }

    /*----------
        HERO
    ----------*/
    #automation-testing .at-hero {
        min-height: 80vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(110,168,255,.25), transparent 40%), radial-gradient(circle at 80% 30%, rgba(255,138,122,.25), transparent 45%), linear-gradient(180deg, #fff, var(--at-bg));
    }

    #automation-testing .at-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        padding: 0 10%;
    }

        #automation-testing .at-hero-grid > div:first-child {
            text-align: left;
        }

    #automation-testing .at-hero-img img {
        width: 100%;
        height: auto;
        display: block;
        margin: auto;
    }

    #automation-testing .at-tag {
        background: rgba(43,46,143,.15);
        padding: 8px 18px;
        border-radius: 20px;
        font-weight: 600;
        color: var(--at-primary);
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    #automation-testing .at-hero h1 {
        font-size: 46px;
        font-weight: 700;
        line-height: 1.25;
        font-style: italic;
        margin: 20px 0;
        padding-bottom: 6px;
        background: linear-gradient(90deg, var(--at-primary), var(--at-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #automation-testing .at-hero p {
        font-size: 18px;
        max-width: 520px;
    }

    #automation-testing .at-hero .at-pills {
        display: flex;
        justify-content: start;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 25px;
    }

        #automation-testing .at-hero .at-pills span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            border: 1px solid var(--at-border);
            font-size: 14px;
            font-weight: 500;
            transition: .3s;
        }

            #automation-testing .at-hero .at-pills span i {
                margin-right: 5px;
            }

    /*-----------
        PILLS
    -----------*/
    #automation-testing .at-pills {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 25px;
    }

        #automation-testing .at-pills span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            margin: 6px;
            background: #fff;
            border-radius: 40px;
            border: 1px solid var(--at-border);
            font-size: 14px;
            font-weight: 500;
            transition: .3s;
        }

            #automation-testing .at-pills span:hover {
                transform: translateY(-4px);
                box-shadow: 0 14px 30px rgba(43,46,143,.3);
            }

    #automation-testing .at-tools span i {
        color: var(--at-primary);
        font-size: 16px;
        margin-right: 8px;
        transition: transform .3s ease, color .3s ease;
    }

    #automation-testing .at-tools span:hover i {
        color: var(--at-secondary);
        transform: scale(1.2);
    }

    /*--------------------
        INDUSTRY PILLS
    --------------------*/
    #automation-testing .at-industries span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 20px;
        margin: 6px;
        background: #fff;
        border-radius: 40px;
        border: 1px solid var(--at-border);
        font-size: 14px;
        font-weight: 500;
        transition: .3s;
    }

        #automation-testing .at-industries span i {
            color: var(--at-primary);
            font-size: 16px;
            margin-right: 8px;
            transition: transform .3s ease, color .3s ease;
        }

        #automation-testing .at-industries span:hover i {
            color: var(--at-secondary);
            transform: scale(1.2);
        }

    /*----------
        GRID
    ----------*/
    #automation-testing .at-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 32px;
        margin-top: 40px;
    }

    #automation-testing .at-card {
        height: 100%;
        background: var(--at-card);
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--at-border);
        transition: .4s;
    }

        #automation-testing .at-card h3 {
            font-weight: 800;
            font-size: 38px;
            color: var(--at-accent);
        }

        #automation-testing .at-card:hover {
            transform: translateY(-14px);
            box-shadow: 0 35px 70px rgba(43,46,143,.25);
        }

    #automation-testing .at-icon {
        font-size: 40px;
        color: var(--at-primary);
        margin-bottom: 18px;
        transition: .4s;
    }

    #automation-testing .at-card:hover .at-icon {
        color: var(--at-secondary);
        transform: scale(1.2);
    }

    /*-------------
        PROCESS
    -------------*/
    #automation-testing .at-process {
        background: linear-gradient(180deg, #fff, var(--at-bg));
    }

    #automation-testing .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #automation-testing .process-step {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        background: #fff;
        padding: 34px 30px 30px;
        border-radius: 20px;
        font-weight: 600;
        border: 1px solid var(--at-border);
        position: relative;
        transition: .4s;
    }

        #automation-testing .process-step span {
            position: absolute;
            top: -18px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--at-primary);
            color: #fff;
            height: 36px;
            width: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        #automation-testing .process-step:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 60px rgba(43,46,143,.25);
        }

            #automation-testing .process-step:hover span {
                background: var(--at-secondary);
            }

    /*---------
        CTA
    ---------*/
    #automation-testing .at-cta {
        background: linear-gradient(120deg, var(--at-primary), var(--at-secondary));
        color: #fff;
    }

        #automation-testing .at-cta a {
            text-decoration: none;
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--at-primary);
            border-radius: 50px;
            font-weight: 600;
            transition: .3s;
        }

            #automation-testing .at-cta a:hover {
                transform: scale(1.1);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #automation-testing .at-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

        #automation-testing .at-hero-grid > div:first-child {
            text-align: center;
        }

    #automation-testing .at-hero h1 {
        font-size: 38px;
    }
}

@media (max-width: 576px) {
    #automation-testing .at-hero h1 {
        font-size: 30px;
    }

    #automation-testing section {
        padding: 60px 0;
    }

    #automation-testing .at-hero .at-pills {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/*#endregion*/

/*#region MAINTENANCE & SUPPORT*/
#maintenance {
    --mt-primary: #0ea5a4;
    --mt-secondary: #2563eb;
    --mt-accent: #f59e0b;
    --mt-dark: #0f172a;
    --mt-text: #475569;
    --mt-bg: #f4fbfb;
    --mt-border: rgba(14,165,164,.18);
    background: var(--mt-bg);
    color: var(--mt-text);
}

    /*-----------
        GLOBAL
    -----------*/
    #maintenance section {
        padding: 70px 0;
    }

    #maintenance .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #maintenance h2 {
        text-align: center;
        color: var(--mt-dark);
        margin-bottom: 16px;
    }

    #maintenance .subtitle {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #maintenance .mt-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 20%, rgba(14,165,164,.18), transparent 40%), radial-gradient(circle at 80% 30%, rgba(245,158,11,.18), transparent 45%);
    }

    #maintenance .mt-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #maintenance .mt-tag {
        background: rgba(14,165,164,.15);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--mt-primary);
    }

    #maintenance .mt-hero h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.1;
        background: linear-gradient(90deg, var(--mt-primary), var(--mt-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /*        #maintenance .mt-hero h1 span {
            background: var(--mt-accent);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }*/

    #maintenance .mt-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #maintenance .mt-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--mt-border);
            font-weight: 600;
            transition: all 0.3s ease;
        }

            #maintenance .mt-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px rgba(14,165,164,.35);
            }

                #maintenance .mt-tags span:hover i {
                    color: var(--mt-accent);
                }

    /*-----------
        CARDS
    -----------*/
    #maintenance .mt-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #maintenance .mt-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--mt-border);
        transition: transform .4s ease, box-shadow .4s ease;
    }

    #maintenance .mt-icon {
        font-size: 40px;
        color: var(--mt-primary);
        margin-bottom: 18px;
        transition: transform .4s ease, filter .4s ease;
    }

    #maintenance .mt-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 30px 65px rgba(14,165,164,.35);
    }

        #maintenance .mt-card:hover .mt-icon {
            transform: scale(1.2);
            filter: drop-shadow(0 10px 14px rgba(245,158,11,.9));
            color: var(--mt-accent);
        }

    /*-------------
        PROCESS
    -------------*/
    #maintenance .mt-process {
        background: linear-gradient(180deg, #fff, #f4fbfb);
    }

    #maintenance .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #maintenance .process-div {
        height: 100%;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        text-align: center;
        border: 1px solid var(--mt-border);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        transition: all 0.3s ease;
    }

        #maintenance .process-div span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--mt-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        #maintenance .process-div:hover {
            transform: translateY(-14px);
            box-shadow: 0 30px 65px rgba(14,165,164,.35);
        }

            #maintenance .process-div:hover span {
                background: var(--mt-accent);
                box-shadow: 0 5px 15px rgba(245,158,11,.59);
            }

    /*---------
        CTA
    ---------*/
    #maintenance .mt-cta {
        background: linear-gradient(120deg, var(--mt-primary), var(--mt-secondary));
        color: #fff;
        text-align: center;
    }

        #maintenance .mt-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--mt-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #maintenance .mt-cta a:hover {
                transform: scale(1.1);
                box-shadow: 0 0 35px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media(max-width:992px) {
    #maintenance .mt-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #maintenance .mt-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #maintenance .mt-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/*#endregion*/

/*#region MONITORING*/
#monitoring {
    --mn-primary: #60a5fa;
    --mn-secondary: #1e3a8a;
    --mn-accent: #fb7185;
    --mn-success: #22c55e;
    --mn-dark: #0f172a;
    --mn-text: #475569;
    --mn-bg: #fff7ed;
    --mn-border: rgba(96,165,250,.18);
    background: var(--mn-bg);
    color: var(--mn-text);
}

    /*-----------
        GLOBAL
    -----------*/
    #monitoring section {
        padding: 70px 0;
    }

    #monitoring .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #monitoring h2 {
        text-align: center;
        color: var(--mn-dark);
        margin-bottom: 16px;
    }

    #monitoring .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #monitoring .mn-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 25% 20%, rgba(96,165,250,.2), transparent 45%), radial-gradient(circle at 80% 30%, rgba(251,113,133,.2), transparent 40%);
    }

    #monitoring .mn-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #monitoring .mn-tag {
        background: rgba(96,165,250,.2);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--mn-secondary);
    }

    #monitoring .mn-hero h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.3;
        background: linear-gradient(90deg, var(--mn-secondary), var(--mn-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #monitoring .mn-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #monitoring .mn-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--mn-border);
            font-weight: 500;
            transition: all 0.3s ease;
        }

            #monitoring .mn-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(96,165,250,.35);
            }

    /*-----------
        CARDS
    -----------*/
    #monitoring .mn-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #monitoring .mn-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--mn-border);
        transition: transform .45s ease, box-shadow .45s ease;
    }

    #monitoring .mn-icon {
        font-size: 40px;
        margin-bottom: 18px;
        color: var(--mn-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #monitoring .mn-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 34px 70px rgba(96,165,250,.35);
    }

        #monitoring .mn-card:hover .mn-icon {
            transform: scale(1.2) rotate(6deg);
            color: var(--mn-accent);
            filter: drop-shadow(0 10px 16px rgba(251,113,133,.9));
        }

    /*-------------
        PROCESS
    -------------*/
    #monitoring .mn-process {
        background: linear-gradient(180deg, #fff, #fff7ed);
    }

    #monitoring .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #monitoring .process-div {
        height: 100%;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        text-align: center;
        border: 1px solid var(--mn-border);
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        transition: all 0.3s ease;
    }

        #monitoring .process-div span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--mn-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        #monitoring .process-div:hover {
            transform: translateY(-14px);
            box-shadow: 0 34px 70px rgba(96,165,250,.35);
        }

            #monitoring .process-div:hover span {
                background: var(--mn-accent);
                box-shadow: 0 8px 20px rgba(251,113,133,.9);
            }

    /*-----------
        STACK
    -----------*/
    #monitoring .mn-stack {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        #monitoring .mn-stack span {
            display: inline-flex;
            align-items: center;
            font-weight: 500;
            gap: 10px;
            margin: 8px;
            padding: 12px 22px;
            background: linear-gradient(90deg, var(--mn-secondary), var(--mn-primary));
            color: #fff;
            border-radius: 40px;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #monitoring .mn-stack span:hover {
                transform: translateY(-6px) scale(1.08);
                box-shadow: 0 18px 40px rgba(96,165,250,.45);
            }

    /*---------
        CTA
    ---------*/
    #monitoring .mn-cta {
        background: linear-gradient(120deg, var(--mn-secondary), var(--mn-primary));
        color: #fff;
        text-align: center;
    }

        #monitoring .mn-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--mn-secondary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #monitoring .mn-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #monitoring .mn-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #monitoring .mn-hero h1 {
        font-size: 40px;
    }

    #monitoring .mn-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/*#endregion*/

/*#region PERFORMANCE*/
#performance {
    --pf-primary: #2563eb;
    --pf-secondary: #1e40af;
    --pf-accent: #f97316;
    --pf-pink: #fb7185;
    --pf-success: #22c55e;
    --pf-dark: #0f172a;
    --pf-text: #475569;
    --pf-bg: #f8fafc;
    --pf-border: rgba(37,99,235,.18);
    background: var(--pf-bg);
    color: var(--pf-text);
}

    /*-----------
        GLOBAL
    -----------*/
    #performance section {
        padding: 70px 0;
    }

    #performance .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #performance h2 {
        text-align: center;
        color: var(--pf-dark);
        margin-bottom: 16px;
    }

    #performance .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #performance .pf-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 25% 20%, rgba(249,115,22,.2), transparent 40%), radial-gradient(circle at 80% 30%, rgba(37,99,235,.2), transparent 45%);
    }

    #performance .pf-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #performance .pf-tag {
        background: rgba(249,115,22,.18);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--pf-accent);
    }

    #performance .pf-hero h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.1;
        background: linear-gradient(90deg, var(--pf-primary), var(--pf-accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #performance .pf-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #performance .pf-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--pf-border);
            font-weight: 600;
            transition: all 0.4s ease;
        }

            #performance .pf-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 25px rgba(249,115,22,.25);
            }

    /*-----------
        CARDS
    -----------*/
    #performance .pf-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #performance .pf-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--pf-border);
        transition: transform .45s ease, box-shadow .45s ease;
    }

    #performance .pf-icon {
        font-size: 40px;
        margin-bottom: 18px;
        color: var(--pf-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #performance .pf-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 34px 70px rgba(249,115,22,.25);
    }

        #performance .pf-card:hover .pf-icon {
            transform: scale(1.2) rotate(6deg);
            color: var(--pf-accent);
            filter: drop-shadow(0 10px 16px rgba(249,115,22,.59));
        }

    /*-------------
        PROCESS
    -------------*/
    #performance .pf-process {
        background: linear-gradient(180deg, #fff, #f8fafc);
    }

    #performance .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #performance .process-div {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        font-weight: 500;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        text-align: center;
        border: 1px solid var(--pf-border);
        position: relative;
        transition: all 0.3s ease;
    }

        #performance .process-div span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--pf-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        #performance .process-div:hover {
            transform: translateY(-14px);
            box-shadow: 0 34px 70px rgba(249,115,22,.25);
        }

            #performance .process-div:hover span {
                background: var(--pf-accent);
                box-shadow: 0 10px 20px rgba(249,115,22,.35);
            }

    /*-------------
        METRICS
    -------------*/
    #performance .pf-metrics {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        #performance .pf-metrics span {
            display: inline-flex;
            align-items: center;
            font-weight: 500;
            gap: 10px;
            margin: 8px;
            padding: 12px 22px;
            background: linear-gradient(90deg, var(--pf-primary), var(--pf-accent));
            color: #fff;
            border-radius: 40px;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #performance .pf-metrics span:hover {
                transform: translateY(-6px) scale(1.08);
                box-shadow: 0 18px 40px rgba(249,115,22,.45);
            }

    /*---------
        CTA
    ---------*/
    #performance .pf-cta {
        background: linear-gradient(120deg, var(--pf-primary), var(--pf-accent));
        color: #fff;
        text-align: center;
    }

        #performance .pf-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--pf-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #performance .pf-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*-----------------
    RESPONSIVE
-----------------*/
@media (max-width: 992px) {
    #performance .pf-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #performance .pf-hero h1 {
        font-size: 40px;
    }

    #performance .pf-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/*#endregion*/

/*#region QA TESTING*/
#qa-testing {
    --qa-primary: #4f83cc;
    --qa-teal: #4fd1c5;
    --qa-yellow: #facc15;
    --qa-coral: #fb7185;
    --qa-dark: #0f172a;
    --qa-text: #475569;
    --qa-bg: #f8fafc;
    --qa-border: rgba(79,131,204,.18);
    background: var(--qa-bg);
    color: var(--qa-text);
}

    /*-----------
        GLOBAL
    -----------*/
    #qa-testing section {
        padding: 70px 0;
    }

    #qa-testing .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #qa-testing h2 {
        text-align: center;
        color: var(--qa-dark);
        margin-bottom: 16px;
    }

    #qa-testing .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #qa-testing .qa-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 25%, rgba(79,209,197,.25), transparent 40%), radial-gradient(circle at 80% 30%, rgba(250,204,21,.25), transparent 45%);
    }

    #qa-testing .qa-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #qa-testing .qa-tag {
        background: rgba(79,209,197,.22);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--qa-teal);
    }

    #qa-testing .qa-hero h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.3;
        background: linear-gradient(90deg, var(--qa-primary), var(--qa-teal));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #qa-testing .qa-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #qa-testing .qa-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--qa-border);
            font-weight: 600;
            transition: all 0.3s ease;
        }

            #qa-testing .qa-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 25px rgba(79,209,197,.65);
                color: var(--qa-primary);
            }

    /*-----------
        CARDS
    -----------*/
    #qa-testing .qa-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #qa-testing .qa-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--qa-border);
        transition: transform .45s ease, box-shadow .45s ease;
    }

    #qa-testing .qa-icon {
        font-size: 40px;
        margin-bottom: 18px;
        color: var(--qa-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #qa-testing .qa-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 30px 65px rgba(79,209,197,.35);
    }

        #qa-testing .qa-card:hover .qa-icon {
            transform: scale(1.2) rotate(-6deg);
            color: var(--qa-teal);
            filter: drop-shadow(0 10px 16px rgba(79,209,197,.8));
        }

    /*-------------
        PROCESS
    -------------*/
    #qa-testing .qa-process {
        background: linear-gradient(180deg, #fff, #f8fafc);
    }

    #qa-testing .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #qa-testing .process-div {
        height: 100%;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        text-align: center;
        border: 1px solid var(--qa-border);
        position: relative;
        transition: all 0.3s ease;
    }

        #qa-testing .process-div span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--qa-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        #qa-testing .process-div:hover {
            transform: translateY(-14px);
            box-shadow: 0 30px 65px rgba(79,209,197,.35);
        }

            #qa-testing .process-div:hover span {
                box-shadow: 0 5px 15px rgba(79,209,197,.65);
                background: var(--qa-teal);
            }

    /*-----------
        TYPES
    -----------*/
    #qa-testing .qa-types {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        #qa-testing .qa-types span {
            display: inline-flex;
            align-items: center;
            font-weight: 500;
            gap: 10px;
            margin: 8px;
            padding: 12px 22px;
            background: linear-gradient(90deg, var(--qa-primary), var(--qa-teal));
            color: #fff;
            border-radius: 40px;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #qa-testing .qa-types span:hover {
                transform: translateY(-6px) scale(1.08);
                box-shadow: 0 18px 40px rgba(79,209,197,.45);
            }

    /*---------
        CTA
    ---------*/
    #qa-testing .qa-cta {
        background: linear-gradient(120deg, var(--qa-primary), var(--qa-teal));
        color: #fff;
        text-align: center;
    }

        #qa-testing .qa-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--qa-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #qa-testing .qa-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #qa-testing .qa-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #qa-testing .qa-hero h1 {
        font-size: 38px;
    }

    #qa-testing .qa-tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

/*#endregion*/

/*#region BLOCKCHAIN*/
#blockchain {
    --bc-primary: #2563eb;
    --bc-accent: #f59e0b;
    --bc-teal: #22d3ee;
    --bc-dark: #0f172a;
    --bc-text: #475569;
    --bc-bg: #f8fafc;
    --bc-border: rgba(37,99,235,.18);
    background: var(--bc-bg);
    color: var(--bc-text);
}

    /*-----------
        GLOBAL
    -----------*/
    #blockchain section {
        padding: 70px 0;
    }

    #blockchain .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #blockchain h2 {
        text-align: center;
        color: var(--bc-dark);
        margin-bottom: 16px;
    }

    #blockchain .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #blockchain .bc-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 30%, rgba(34,211,238,.25), transparent 45%), radial-gradient(circle at 80% 30%, rgba(245,158,11,.25), transparent 45%);
    }

    #blockchain .bc-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #blockchain .bc-tag {
        background: rgba(34,211,238,.22);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--bc-teal);
    }

    #blockchain .bc-hero h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
        background: linear-gradient(90deg, var(--bc-primary), var(--bc-teal));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #blockchain .bc-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #blockchain .bc-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--bc-border);
            font-weight: 600;
            transition: all .3s ease;
        }

            #blockchain .bc-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(37,99,235,.35);
                color: var(--bc-primary);
            }

    /*-----------
        CARDS
    -----------*/
    #blockchain .bc-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #blockchain .bc-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--bc-border);
        transition: transform .45s ease, box-shadow .45s ease;
    }

    #blockchain .bc-icon {
        font-size: 40px;
        margin-bottom: 18px;
        color: var(--bc-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #blockchain .bc-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 30px 65px rgba(37,99,235,.35);
    }

        #blockchain .bc-card:hover .bc-icon {
            transform: scale(1.2) rotate(-6deg);
            color: var(--bc-teal);
            filter: drop-shadow(0 10px 18px rgba(34,211,238,.8));
        }

    /*-------------
        PROCESS
    -------------*/
    #blockchain .bc-process {
        background: linear-gradient(180deg, #fff, #f8fafc);
    }

    #blockchain .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #blockchain .process-div {
        height: 100%;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        border: 1px solid var(--bc-border);
        text-align: center;
        position: relative;
        transition: all .3s ease;
    }

        #blockchain .process-div span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bc-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all .3s ease;
        }

        #blockchain .process-div:hover {
            transform: translateY(-14px);
            box-shadow: 0 30px 65px rgba(37,99,235,.35);
        }

            #blockchain .process-div:hover span {
                background: var(--bc-teal);
                box-shadow: 0 6px 18px rgba(34,211,238,.7);
            }

    /*--------------
        USE CASES
    --------------*/
    #blockchain .bc-usecases {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        #blockchain .bc-usecases span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin: 8px;
            padding: 12px 24px;
            background: linear-gradient(90deg, var(--bc-primary), var(--bc-teal));
            color: #fff;
            border-radius: 40px;
            font-weight: 500;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #blockchain .bc-usecases span:hover {
                transform: translateY(-6px) scale(1.08);
                box-shadow: 0 18px 40px rgba(37,99,235,.45);
            }

    /*---------
        CTA
    ---------*/
    #blockchain .bc-cta {
        background: linear-gradient(120deg, var(--bc-primary), var(--bc-teal));
        color: #fff;
        text-align: center;
    }

        #blockchain .bc-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--bc-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #blockchain .bc-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #blockchain .bc-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #blockchain .bc-hero h1 {
        font-size: 38px;
    }

    #blockchain .bc-tags {
        justify-content: center;
    }
}

/*#endregion*/

/*#region CRM*/
#crm {
    --crm-primary: #2563eb;
    --crm-accent: #38bdf8;
    --crm-dark: #0f172a;
    --crm-text: #475569;
    --crm-bg: #f8fafc;
    --crm-border: rgba(37,99,235,.18);
    background: var(--crm-bg);
    color: var(--crm-text);
}

    /*-----------
        GLOBAL
    -----------*/
    #crm section {
        padding: 70px 0;
    }

    #crm .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #crm h2 {
        text-align: center;
        color: var(--crm-dark);
        margin-bottom: 16px;
    }

    #crm .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #crm .crm-hero {
        min-height: 75vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 30%, rgba(56,189,248,.25), transparent 45%), radial-gradient(circle at 80% 30%, rgba(37,99,235,.25), transparent 45%);
    }

    #crm .crm-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #crm .crm-tag {
        background: rgba(56,189,248,.22);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--crm-accent);
    }

    #crm h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
        background: linear-gradient(90deg, var(--crm-primary), var(--crm-accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #crm .crm-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #crm .crm-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--crm-border);
            font-weight: 600;
            transition: all .3s ease;
        }

            #crm .crm-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(37,99,235,.35);
                color: var(--crm-primary);
            }

    #crm .crm-hero-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #crm .crm-hero-img img {
            width: 100%;
            border-radius: 22px;
            filter: drop-shadow(0 30px 60px rgba(37,99,235,.35));
            transition: transform .45s ease, filter .45s ease;
        }

        #crm .crm-hero-img:hover img {
            transform: translateY(-12px) scale(1.03);
            filter: drop-shadow(0 40px 80px rgba(37,99,235,.45));
        }

    #crm .crm-hero h1 span {
        background: linear-gradient(90deg, var(--crm-accent), var(--crm-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #crm .crm-tag i {
        font-size: 14px;
    }


    /*-----------
        CARDS
    -----------*/
    #crm .crm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #crm .crm-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--crm-border);
        transition: transform .45s ease, box-shadow .45s ease;
    }

    #crm .crm-icon {
        font-size: 40px;
        margin-bottom: 18px;
        color: var(--crm-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #crm .crm-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 30px 65px rgba(37,99,235,.35);
    }

        #crm .crm-card:hover .crm-icon {
            transform: scale(1.2) rotate(-6deg);
            color: var(--crm-accent);
            filter: drop-shadow(0 10px 18px rgba(56,189,248,.8));
        }

    /*-------------
        PROCESS
    -------------*/
    #crm .crm-process {
        background: linear-gradient(180deg, #fff, #f8fafc);
    }

    #crm .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #crm .process-div {
        height: 100%;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        border: 1px solid var(--crm-border);
        text-align: center;
        position: relative;
        transition: all .3s ease;
    }

        #crm .process-div span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--crm-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all .3s ease;
        }

        #crm .process-div:hover {
            transform: translateY(-14px);
            box-shadow: 0 30px 65px rgba(37,99,235,.35);
        }

            #crm .process-div:hover span {
                background: var(--crm-accent);
                box-shadow: 0 6px 18px rgba(56,189,248,.7);
            }

    /*--------------
        USE CASES
    --------------*/
    #crm .crm-usecases {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

        #crm .crm-usecases span {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin: 8px;
            padding: 12px 24px;
            background: linear-gradient(90deg, var(--crm-primary), var(--crm-accent));
            color: #fff;
            border-radius: 40px;
            font-weight: 500;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #crm .crm-usecases span:hover {
                transform: translateY(-6px) scale(1.08);
                box-shadow: 0 18px 40px rgba(37,99,235,.45);
            }

    /*---------
        CTA
    ---------*/
    #crm .crm-cta {
        background: linear-gradient(120deg, var(--crm-primary), var(--crm-accent));
        color: #fff;
        text-align: center;
    }

        #crm .crm-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--crm-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #crm .crm-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #crm .crm-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #crm h1 {
        font-size: 38px;
    }

    #crm .crm-tags {
        justify-content: center;
    }

    #crm .crm-hero-img {
        margin-top: 40px;
    }

        #crm .crm-hero-img img {
            max-width: 420px;
        }
}
/*#endregion*/

/*#region E-COMMERCE*/
#ecommerce {
    --ec-primary: #2f3b77;
    --ec-accent: #f59e0b;
    --ec-blue: #3b82f6;
    --ec-teal: #14b8a6;
    --ec-dark: #0f172a;
    --ec-text: #475569;
    --ec-bg: #f3f7ff;
    --ec-border: rgba(59,130,246,.18);
    background: var(--ec-bg);
    color: var(--ec-text);
    overflow: hidden;
}

    /*-----------
        GLOBAL
    -----------*/
    #ecommerce section {
        padding: 80px 0;
    }

    #ecommerce .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #ecommerce h2 {
        text-align: center;
        color: var(--ec-dark);
        margin-bottom: 16px;
    }

    #ecommerce .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #ecommerce .ec-hero {
        min-height: 80vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 30%, rgba(245,158,11,.18), transparent 45%), radial-gradient(circle at 80% 30%, rgba(59,130,246,.18), transparent 45%);
    }

    #ecommerce .ec-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #ecommerce .ec-tag {
        background: rgba(245,158,11,.18);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--ec-accent);
    }

        #ecommerce .ec-tag i {
            font-size: 14px;
        }

    #ecommerce h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
        background: linear-gradient(90deg, var(--ec-primary), var(--ec-blue));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #ecommerce .ec-hero h1 span {
        background: linear-gradient(90deg, var(--ec-accent), var(--ec-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #ecommerce .ec-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #ecommerce .ec-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--ec-border);
            font-weight: 600;
            transition: all .3s ease;
        }

            #ecommerce .ec-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(59,130,246,.35);
                color: var(--ec-primary);
            }

    #ecommerce .ec-hero-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #ecommerce .ec-hero-img img {
            width: 100%;
            border-radius: 22px;
            filter: drop-shadow(0 30px 60px rgba(59,130,246,.35));
            transition: transform .45s ease, filter .45s ease;
        }

        #ecommerce .ec-hero-img:hover img {
            transform: translateY(-12px) scale(1.03);
            filter: drop-shadow(0 40px 80px rgba(59,130,246,.45));
        }

    /*-----------
        CARDS
    -----------*/
    #ecommerce .ec-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #ecommerce .ec-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--ec-border);
        transition: transform .45s ease, box-shadow .45s ease;
    }

    #ecommerce .ec-icon {
        font-size: 40px;
        margin-bottom: 18px;
        color: var(--ec-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #ecommerce .ec-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 30px 65px rgba(59,130,246,.35);
    }

        #ecommerce .ec-card:hover .ec-icon {
            transform: scale(1.2) rotate(-6deg);
            color: var(--ec-accent);
            filter: drop-shadow(0 10px 18px rgba(245,158,11,.6));
        }

    /*-------------
        PROCESS
    -------------*/
    #ecommerce .ec-process {
        background: linear-gradient(180deg, #fff, #f3f7ff);
    }

    #ecommerce .process-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #ecommerce .process-div {
        height: 100%;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        border: 1px solid var(--ec-border);
        text-align: center;
        position: relative;
        transition: all .3s ease;
    }

        #ecommerce .process-div span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--ec-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all .3s ease;
        }

        #ecommerce .process-div:hover {
            transform: translateY(-14px);
            box-shadow: 0 30px 65px rgba(59,130,246,.35);
        }

            #ecommerce .process-div:hover span {
                background: var(--ec-accent);
                box-shadow: 0 6px 18px rgba(245,158,11,.6);
            }

    /*-----------
        STATS
    -----------*/
    #ecommerce .ec-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 40px;
        text-align: center;
    }

        #ecommerce .ec-stats .stat {
            height: 100%;
            padding: 20px 30px;
            border-radius: 30px;
            border: 1px dashed var(--ec-accent);
            transition: all 0.3s ease;
        }

            #ecommerce .ec-stats .stat:hover {
                transform: translateY(-14px);
                box-shadow: 0 30px 65px rgba(59,130,246,.15);
            }

        #ecommerce .ec-stats h3 {
            font-size: 42px;
            font-weight: 700;
            color: var(--ec-primary);
        }

    /*---------
        CTA
    ---------*/
    #ecommerce .ec-cta {
        background: linear-gradient(120deg,var(--ec-primary),var(--ec-blue));
        color: #fff;
        text-align: center;
    }

        #ecommerce .ec-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--ec-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #ecommerce .ec-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #ecommerce .ec-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #ecommerce h1 {
        font-size: 38px;
    }

    #ecommerce .ec-tags {
        justify-content: center;
    }

    #ecommerce .ec-hero-img {
        margin-top: 40px;
    }

        #ecommerce .ec-hero-img img {
            max-width: 420px;
        }
}
/*#endregion*/

/*#region ERP*/
#erp {
    --erp-primary: #3A6EA5;
    --erp-accent: #E74C3C;
    --erp-blue: #5C8DC6;
    --erp-gold: #F4B400;
    --erp-dark: #1E293B;
    --erp-text: #5B6B7C;
    --erp-bg: #F2F7FC;
    --erp-border: rgba(58,110,165,.18);
    background: var(--erp-bg);
    color: var(--erp-text);
    overflow: hidden;
}

    /*-----------
        GLOBAL
    -----------*/
    #erp section {
        padding: 80px 0;
    }

    #erp .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #erp h2 {
        text-align: center;
        color: var(--erp-dark);
        margin-bottom: 16px;
    }

    #erp .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #erp .erp-hero {
        min-height: 80vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 30%, rgba(231,76,60,.15), transparent 45%), radial-gradient(circle at 80% 30%, rgba(58,110,165,.18), transparent 45%);
    }

    #erp .erp-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #erp .erp-tag {
        background: rgba(231,76,60,.15);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--erp-accent);
    }

        #erp .erp-tag i {
            font-size: 14px;
        }

    #erp h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
        background: linear-gradient(90deg, var(--erp-primary), var(--erp-blue));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #erp .erp-hero h1 span {
        background: linear-gradient(90deg, var(--erp-accent), var(--erp-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #erp .erp-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #erp .erp-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--erp-border);
            font-weight: 600;
            transition: all .3s ease;
        }

            #erp .erp-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(58,110,165,.35);
                color: var(--erp-primary);
            }

    #erp .erp-hero-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #erp .erp-hero-img img {
            width: 100%;
            border-radius: 22px;
            filter: drop-shadow(0 30px 60px rgba(58,110,165,.35));
            transition: transform .45s ease, filter .45s ease;
        }

        #erp .erp-hero-img:hover img {
            transform: translateY(-12px) scale(1.03);
            filter: drop-shadow(0 40px 80px rgba(58,110,165,.45));
        }

    /*-----------
        CARDS
    -----------*/
    #erp .erp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #erp .erp-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--erp-border);
        transition: transform .45s ease, box-shadow .45s ease;
    }

    #erp .erp-icon {
        font-size: 40px;
        margin-bottom: 18px;
        color: var(--erp-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #erp .erp-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 30px 65px rgba(58,110,165,.35);
    }

        #erp .erp-card:hover .erp-icon {
            transform: scale(1.2) rotate(-6deg);
            color: var(--erp-accent);
            filter: drop-shadow(0 10px 18px rgba(231,76,60,.6));
        }

    /*--------------
        BENEFITS
    --------------*/
    #erp .erp-benefits {
        background: linear-gradient(180deg, #ffffff, #f2f7fc);
    }

    #erp .erp-benefit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
        gap: 30px;
    }

    #erp .erp-benefit {
        background: #fff;
        padding: 28px;
        border-radius: 18px;
        border: 1px solid var(--erp-border);
        text-align: center;
        font-weight: 600;
        transition: all .3s ease;
    }

        #erp .erp-benefit i {
            display: block;
            font-size: 28px;
            margin: auto;
            margin-bottom: 12px;
            color: var(--erp-primary);
            transition: .3s ease;
        }

        #erp .erp-benefit:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px rgba(58,110,165,.25);
        }

            #erp .erp-benefit:hover i {
                color: var(--erp-accent);
                transform: scale(1.15) translateY(-5px);
                filter: drop-shadow(0 6px 10px rgba(231,76,60,.6) );
            }


    /*-------------
        PROCESS
    -------------*/
    #erp .erp-process-section {
        background: linear-gradient(180deg, #fff, #f2f7fc);
    }

    #erp .erp-process {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #erp .erp-step {
        height: 100%;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        border: 1px solid var(--erp-border);
        text-align: center;
        position: relative;
        transition: all .3s ease;
    }

        #erp .erp-step span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--erp-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all .3s ease;
        }

        #erp .erp-step:hover {
            transform: translateY(-14px);
            box-shadow: 0 30px 65px rgba(58,110,165,.35);
        }

            #erp .erp-step:hover span {
                background: var(--erp-accent);
                box-shadow: 0 6px 18px rgba(231,76,60,.6);
            }

    /*-----------
        STATS
    -----------*/
    #erp .erp-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 40px;
        text-align: center;
    }

        #erp .erp-stats-grid .stat {
            display: block;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 20px 30px;
            border-radius: 30px;
            border: 1px dashed var(--erp-accent);
            transition: all .3s ease;
        }

            #erp .erp-stats-grid .stat:hover {
                transform: translateY(-14px);
                box-shadow: 0 30px 65px rgba(58,110,165,.15);
            }

        #erp .erp-stats-grid h3 {
            font-size: 42px;
            font-weight: 700;
            color: var(--erp-primary);
            transition: all 0.3s ease;
        }

        #erp .erp-stats-grid .stat:hover h3 {
            transform: translateY(-5px);
            color: var(--erp-accent);
            text-shadow: 0 6px 18px rgba(231,76,60,.6);
        }

    /*---------
        CTA
    ---------*/
    #erp .erp-cta {
        background: linear-gradient(120deg,var(--erp-primary),var(--erp-blue));
        color: #fff;
        text-align: center;
    }

        #erp .erp-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--erp-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #erp .erp-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {

    #erp .erp-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #erp h1 {
        font-size: 38px;
    }

    #erp .erp-tags {
        justify-content: center;
    }

    #erp .erp-hero-img {
        margin-top: 40px;
    }

        #erp .erp-hero-img img {
            max-width: 420px;
        }
}
/*#endregion*/

/*#region FINTECH*/
#fintech {
    --fin-primary: #1e3a8a;
    --fin-accent: #10b981;
    --fin-blue: #3b82f6;
    --fin-gold: #f59e0b;
    --fin-dark: #0f172a;
    --fin-text: #475569;
    --fin-bg: #f3f7ff;
    --fin-border: rgba(59,130,246,.18);
    background: var(--fin-bg);
    color: var(--fin-text);
    overflow: hidden;
}

    /*-----------
        GLOBAL
    -----------*/
    #fintech section {
        padding: 80px 0;
    }

    #fintech .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #fintech h2 {
        text-align: center;
        color: var(--fin-dark);
        margin-bottom: 16px;
    }

    #fintech .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #fintech .fin-hero {
        min-height: 80vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 30%, rgba(16,185,129,.15), transparent 45%), radial-gradient(circle at 80% 30%, rgba(59,130,246,.18), transparent 45%);
    }

    #fintech .fin-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #fintech .fin-tag {
        background: rgba(16,185,129,.15);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--fin-accent);
    }

        #fintech .fin-tag i {
            font-size: 14px;
        }

    #fintech h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
        background: linear-gradient(90deg, var(--fin-primary), var(--fin-blue));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #fintech .fin-hero h1 span {
        background: linear-gradient(90deg, var(--fin-accent), var(--fin-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #fintech .fin-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #fintech .fin-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--fin-border);
            font-weight: 600;
            transition: all .3s ease;
        }

            #fintech .fin-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(59,130,246,.35);
                color: var(--fin-primary);
            }

    #fintech .fin-hero-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #fintech .fin-hero-img img {
            width: 100%;
            border-radius: 22px;
            filter: drop-shadow(0 30px 60px rgba(59,130,246,.35));
            transition: transform .45s ease, filter .45s ease;
        }

        #fintech .fin-hero-img:hover img {
            transform: translateY(-12px) scale(1.03);
            filter: drop-shadow(0 40px 80px rgba(59,130,246,.45));
        }

    /*-----------
        CARDS
    -----------*/
    #fintech .fin-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #fintech .fin-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--fin-border);
        transition: transform .45s ease, box-shadow .45s ease;
    }

    #fintech .fin-icon {
        font-size: 40px;
        margin-bottom: 18px;
        color: var(--fin-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #fintech .fin-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 30px 65px rgba(59,130,246,.35);
    }

        #fintech .fin-card:hover .fin-icon {
            transform: scale(1.2) rotate(-6deg);
            color: var(--fin-accent);
            filter: drop-shadow(0 10px 18px rgba(16,185,129,.6));
        }

    /*--------------
        BENEFITS
    --------------*/
    #fintech .fin-benefits {
        background: linear-gradient(180deg, #ffffff, #f3f7ff);
    }

    #fintech .fin-benefit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
        gap: 30px;
    }

    #fintech .fin-benefit {
        background: #fff;
        padding: 28px;
        border-radius: 18px;
        border: 1px solid var(--fin-border);
        text-align: center;
        font-weight: 600;
        transition: all .3s ease;
    }

        #fintech .fin-benefit i {
            display: block;
            font-size: 28px;
            margin: auto;
            margin-bottom: 12px;
            color: var(--fin-primary);
            transition: .3s ease;
        }

        #fintech .fin-benefit:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px rgba(59,130,246,.25);
        }

            #fintech .fin-benefit:hover i {
                color: var(--fin-accent);
                transform: scale(1.15) translateY(-5px);
                filter: drop-shadow(0 6px 10px rgba(16,185,129,.6));
            }

    /*-------------
        PROCESS
    -------------*/
    #fintech .fin-process-section {
        background: linear-gradient(180deg, #fff, #f3f7ff);
    }

    #fintech .fin-process {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #fintech .fin-step {
        height: 100%;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        border: 1px solid var(--fin-border);
        text-align: center;
        position: relative;
        transition: all .3s ease;
    }

        #fintech .fin-step span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--fin-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all .3s ease;
        }

        #fintech .fin-step:hover {
            transform: translateY(-14px);
            box-shadow: 0 30px 65px rgba(59,130,246,.35);
        }

            #fintech .fin-step:hover span {
                background: var(--fin-accent);
                box-shadow: 0 6px 18px rgba(16,185,129,.6);
            }

    /*-----------
        STATS
    -----------*/
    #fintech .fin-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 40px;
        text-align: center;
    }

        #fintech .fin-stats-grid .stat {
            padding: 20px 30px;
            border-radius: 30px;
            border: 1px dashed var(--fin-accent);
            transition: all .3s ease;
        }

            #fintech .fin-stats-grid .stat:hover {
                transform: translateY(-14px);
                box-shadow: 0 30px 65px rgba(59,130,246,.15);
            }

        #fintech .fin-stats-grid h3 {
            font-size: 42px;
            font-weight: 700;
            color: var(--fin-primary);
            transition: all 0.3s ease;
        }

        #fintech .fin-stats-grid .stat:hover h3 {
            transform: translateY(-5px);
            color: var(--fin-accent);
            text-shadow: 0 6px 18px rgba(16,185,129,.6);
        }

    /*---------
        CTA
    ---------*/
    #fintech .fin-cta {
        background: linear-gradient(120deg,var(--fin-primary),var(--fin-blue));
        color: #fff;
        text-align: center;
    }

        #fintech .fin-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--fin-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #fintech .fin-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {

    #fintech .fin-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #fintech h1 {
        font-size: 38px;
    }

    #fintech .fin-tags {
        justify-content: center;
    }

    #fintech .fin-hero-img {
        margin-top: 40px;
    }

        #fintech .fin-hero-img img {
            max-width: 420px;
        }
}
/*#endregion*/

/*#region IOT SOLUTIONS*/
#iot {
    --iot-primary: #0ea5a4;
    --iot-accent: #2563eb;
    --iot-blue: #3b82f6;
    --iot-gold: #f59e0b;
    --iot-dark: #0f172a;
    --iot-text: #475569;
    --iot-bg: #f3f8ff;
    --iot-border: rgba(14,165,164,.18);
    background: var(--iot-bg);
    color: var(--iot-text);
    overflow: hidden;
}

    /*-----------
        GLOBAL
    -----------*/
    #iot section {
        padding: 80px 0;
    }

    #iot .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #iot h2 {
        text-align: center;
        color: var(--iot-dark);
        margin-bottom: 16px;
    }

    #iot .subtitle {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 60px;
        font-size: 18px;
    }

    /*----------
        HERO
    ----------*/
    #iot .iot-hero {
        min-height: 80vh;
        display: flex;
        align-items: center;
        background: radial-gradient(circle at 20% 30%, rgba(37,99,235,.15), transparent 45%), radial-gradient(circle at 80% 30%, rgba(14,165,164,.18), transparent 45%);
    }

    #iot .iot-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        padding: 0 10%;
        align-items: center;
    }

    #iot .iot-tag {
        background: rgba(14,165,164,.15);
        padding: 8px 16px;
        border-radius: 20px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        color: var(--iot-primary);
    }

        #iot .iot-tag i {
            font-size: 14px;
        }

    #iot h1 {
        font-size: 46px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
        background: linear-gradient(90deg, var(--iot-primary), var(--iot-blue));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #iot .iot-hero h1 span {
        background: linear-gradient(90deg, var(--iot-accent), var(--iot-primary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #iot .iot-hero .subtitle {
        text-align: left;
    }

    #iot .iot-tags {
        display: flex;
        flex-wrap: wrap;
    }

        #iot .iot-tags span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 8px;
            padding: 10px 18px;
            background: #fff;
            border-radius: 30px;
            border: 1px solid var(--iot-border);
            font-weight: 600;
            transition: all .3s ease;
        }

            #iot .iot-tags span:hover {
                transform: translateY(-5px);
                box-shadow: 0 15px 30px rgba(14,165,164,.35);
                color: var(--iot-primary);
            }

    #iot .iot-hero-img {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #iot .iot-hero-img img {
            width: 100%;
            border-radius: 22px;
            filter: drop-shadow(0 30px 60px rgba(14,165,164,.35));
            transition: transform .45s ease, filter .45s ease;
        }

        #iot .iot-hero-img:hover img {
            transform: translateY(-12px) scale(1.03);
            filter: drop-shadow(0 40px 80px rgba(14,165,164,.45));
        }

    /*-----------
        CARDS
    -----------*/
    #iot .iot-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
        gap: 32px;
    }

    #iot .iot-card {
        height: 100%;
        background: #fff;
        padding: 36px;
        border-radius: 22px;
        border: 1px solid var(--iot-border);
        transition: transform .45s ease, box-shadow .45s ease;
    }

    #iot .iot-icon {
        font-size: 40px;
        margin-bottom: 18px;
        color: var(--iot-primary);
        transition: transform .4s ease, color .4s ease, filter .4s ease;
    }

    #iot .iot-card:hover {
        transform: translateY(-14px);
        box-shadow: 0 30px 65px rgba(14,165,164,.35);
    }

        #iot .iot-card:hover .iot-icon {
            transform: scale(1.2) rotate(-6deg);
            color: var(--iot-accent);
            filter: drop-shadow(0 10px 18px rgba(37,99,235,.6));
        }

    /*-----------------
        WHY SECTION
    -----------------*/
    #iot .iot-why {
        background: linear-gradient(180deg,#ffffff,#f3f8ff);
    }

    /*--------------
        BENEFITS
    --------------*/
    #iot .iot-benefits {
        background: linear-gradient(180deg, #ffffff, #f3f8ff);
    }

    #iot .iot-benefit-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
        gap: 30px;
    }

    #iot .iot-benefit {
        background: #fff;
        padding: 28px;
        border-radius: 18px;
        border: 1px solid var(--iot-border);
        text-align: center;
        font-weight: 600;
        transition: all .3s ease;
    }

        #iot .iot-benefit i {
            display: block;
            font-size: 28px;
            margin: auto;
            margin-bottom: 12px;
            color: var(--iot-primary);
            transition: .3s ease;
        }

        #iot .iot-benefit:hover {
            transform: translateY(-12px);
            box-shadow: 0 25px 50px rgba(14,165,164,.25);
        }

            #iot .iot-benefit:hover i {
                color: var(--iot-accent);
                transform: scale(1.15) translateY(-5px);
                filter: drop-shadow(0 6px 10px rgba(37,99,235,.6));
            }

    /*-------------
        PROCESS
    -------------*/
    #iot .iot-process-section {
        background: linear-gradient(180deg, #fff, #f3f8ff);
    }

    #iot .iot-process {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
        gap: 26px;
        margin-top: 30px;
    }

    #iot .iot-step {
        height: 100%;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 32px;
        border-radius: 18px;
        border: 1px solid var(--iot-border);
        text-align: center;
        position: relative;
        transition: all .3s ease;
    }

        #iot .iot-step span {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--iot-primary);
            color: #fff;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            transition: all .3s ease;
        }

        #iot .iot-step:hover {
            transform: translateY(-14px);
            box-shadow: 0 30px 65px rgba(14,165,164,.35);
        }

            #iot .iot-step:hover span {
                background: var(--iot-accent);
                box-shadow: 0 6px 18px rgba(37,99,235,.6);
            }

    /*-----------
        STATS
    -----------*/
    #iot .iot-stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
        gap: 40px;
        text-align: center;
    }

        #iot .iot-stats-grid .stat {
            height: 100%;
            padding: 20px 30px;
            border-radius: 30px;
            border: 1px dashed var(--iot-accent);
            transition: all .3s ease;
        }

            #iot .iot-stats-grid .stat:hover {
                transform: translateY(-14px);
                box-shadow: 0 30px 65px rgba(14,165,164,.15);
            }

        #iot .iot-stats-grid h3 {
            font-size: 42px;
            font-weight: 700;
            color: var(--iot-primary);
            transition: all 0.3s ease;
        }

        #iot .iot-stats-grid .stat:hover h3 {
            transform: translateY(-5px);
            color: var(--iot-accent);
            text-shadow: 0 6px 18px rgba(37,99,235,.6);
        }



    /*---------
        CTA
    ---------*/
    #iot .iot-cta {
        background: linear-gradient(120deg,var(--iot-primary),var(--iot-blue));
        color: #fff;
        text-align: center;
    }

        #iot .iot-cta a {
            display: inline-block;
            margin-top: 20px;
            padding: 16px 40px;
            background: #fff;
            color: var(--iot-primary);
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: transform .3s ease, box-shadow .3s ease;
        }

            #iot .iot-cta a:hover {
                transform: scale(1.12);
                box-shadow: 0 0 36px rgba(255,255,255,.9);
            }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {

    #iot .iot-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #iot .iot-hero .subtitle {
        text-align: center;
    }

    #iot h1 {
        font-size: 38px;
    }

    #iot .iot-tags {
        justify-content: center;
    }

    #iot .iot-hero-img {
        margin-top: 40px;
    }

        #iot .iot-hero-img img {
            max-width: 420px;
        }
}
/*#endregion*/


/*================================================
                  ALL PRODUCTS
================================================*/
/*#region BETTING MANAGEMENT*/
#betting-management {
    --bm-gold: #fbbf24;
    --bm-orange: #f97316;
    --bm-green: #16a34a;
    --bm-dark: #0f172a;
    --bm-text: #475569;
    --bm-light-bg: #f8fafc;
    background: #fff;
    color: var(--bm-dark);
    overflow: hidden;
}

    /*------------
        GLOBAL
    ------------*/
    #betting-management section {
        padding: 110px 0;
    }

    #betting-management h2 {
        font-size: 38px;
        text-align: center;
        margin-bottom: 20px;
    }

    #betting-management p {
        font-size: 16px;
        line-height: 1.7;
        color: var(--bm-text);
    }

    /*----------
        HERO
    ----------*/
    #betting-management .bm-hero {
        padding-top: 140px;
        background: linear-gradient(180deg,#fff,#f8fafc);
    }

    #betting-management .bm-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #betting-management .bm-tag {
        background: linear-gradient(90deg,var(--bm-gold),var(--bm-orange));
        padding: 8px 18px;
        border-radius: 30px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 25px;
        color: #000;
    }

    #betting-management .bm-hero h1 {
        font-size: 50px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #betting-management .bm-hero h1 span {
            background: linear-gradient(90deg,var(--bm-gold),var(--bm-orange));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #betting-management .bm-hero p {
        margin: 25px 0;
        max-width: 520px;
    }

    #betting-management .bm-hero-buttons {
        display: flex;
        gap: 15px;
        margin-bottom: 30px;
    }

    #betting-management .bm-btn-primary {
        background: linear-gradient(90deg,var(--bm-gold),var(--bm-orange));
        padding: 13px 28px;
        border-radius: 30px;
        color: #000;
        font-weight: 600;
        text-decoration: none;
        transition: .3s;
    }

        #betting-management .bm-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(249,115,22,.3);
        }

    #betting-management .bm-btn-outline {
        border: 2px solid var(--bm-orange);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--bm-orange);
        text-decoration: none;
        transition: .3s;
    }

        #betting-management .bm-btn-outline:hover {
            background: var(--bm-orange);
            color: #fff;
        }

    #betting-management .bm-stats {
        display: flex;
        gap: 40px;
    }

        #betting-management .bm-stats .stat-div {
            border: 2px solid var(--bm-orange);
            padding: 10px 30px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
        }

        #betting-management .bm-stats h3 {
            font-size: 30px;
            font-weight: 700;
            color: var(--bm-orange);
        }

        #betting-management .bm-stats span {
            font-size: 14px;
            color: var(--bm-text);
            font-weight: 500;
        }

    #betting-management .bm-hero-image img {
        width: 100%;
        max-width: 580px;
    }

    /*--------------
        FEATURES
    --------------*/
    #betting-management .bm-features {
        background: var(--bm-light-bg);
    }

    #betting-management .bm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #betting-management .bm-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #betting-management .bm-card:hover {
            transform: translateY(-8px);
            border-color: var(--bm-orange);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #betting-management .bm-card i {
            font-size: 38px;
            color: var(--bm-orange);
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        #betting-management .bm-card:hover i {
            transform: translateY(-8px);
            filter: drop-shadow(0 10px 12px )
        }

    /*-----------------
        WHY SECTION
    -----------------*/
    #betting-management .bm-why {
        background: #fff;
    }

    #betting-management .bm-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 70px;
        align-items: center;
    }

    #betting-management .bm-why ul {
        list-style: none;
        padding: 0;
        margin-top: 25px;
    }

        #betting-management .bm-why ul li {
            margin-bottom: 15px;
            font-size: 16px;
        }

            #betting-management .bm-why ul li i {
                color: var(--bm-green);
                margin-right: 8px;
            }

    #betting-management .bm-highlight-card {
        background: linear-gradient(135deg,var(--bm-gold),var(--bm-orange));
        padding: 45px;
        border-radius: 20px;
        color: #000;
        box-shadow: 0 20px 40px rgba(0,0,0,.1);
    }

        #betting-management .bm-highlight-card h3 {
            font-size: 26px;
            margin-bottom: 15px;
        }

    /*---------
        CTA
    ---------*/
    #betting-management .bm-cta {
        text-align: center;
        background: linear-gradient(90deg,var(--bm-gold),var(--bm-orange));
        color: #000;
    }

        #betting-management .bm-cta h2 {
            font-size: 42px;
            font-weight: 800;
        }

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

/* ---------- Large Tablet (1200px) ---------- */
@media (max-width:1200px) {

    #betting-management .bm-hero h1 {
        font-size: 42px;
    }

    #betting-management .bm-hero-grid {
        gap: 30px;
    }

    #betting-management .bm-hero-image img {
        max-width: 480px;
    }
}


/* ---------- Tablet (992px) ---------- */
@media (max-width:992px) {

    #betting-management section {
        padding: 80px 0;
    }

    #betting-management .bm-hero-grid,
    #betting-management .bm-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #betting-management .bm-hero-image {
        order: -1; /* image on top for mobile */
        margin-bottom: 40px;
    }

    #betting-management .bm-hero h1 {
        font-size: 38px;
    }

    #betting-management .bm-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    #betting-management .bm-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    #betting-management .bm-why ul {
        text-align: left;
        display: inline-block;
    }
}


/* ---------- Mobile (768px) ---------- */
@media (max-width:768px) {

    #betting-management .bm-hero {
        padding-top: 110px;
    }

        #betting-management .bm-hero h1 {
            font-size: 32px;
        }

    #betting-management h2 {
        font-size: 28px;
    }

    #betting-management .bm-hero p {
        max-width: 100%;
    }

    #betting-management .bm-grid {
        gap: 25px;
    }

    #betting-management .bm-card {
        padding: 25px;
    }

    #betting-management .bm-highlight-card {
        padding: 30px;
    }
}


/* ---------- Small Mobile (480px) ---------- */
@media (max-width:480px) {

    #betting-management section {
        padding: 60px 0;
    }

    #betting-management .bm-hero h1 {
        font-size: 26px;
        line-height: 1.3;
    }

    #betting-management .bm-btn-primary,
    #betting-management .bm-btn-outline {
        width: 100%;
        text-align: center;
    }

    #betting-management .bm-stats {
        flex-direction: column;
        align-items: center;
    }

        #betting-management .bm-stats .stat-div {
            width: 100%;
            max-width: 220px;
        }

    #betting-management .bm-highlight-card h3 {
        font-size: 20px;
    }
}


/*#endregion*/

/*#region CAR SALES MANAGEMENT*/
#car-sales {
    --cs-primary: #e53935;
    --cs-accent: #f4b400;
    --cs-blue: #e3f2fd;
    --cs-dark: #111827;
    --cs-text: #4b5563;
}

    /*----------
        HERO
    ----------*/
    #car-sales .cs-hero {
        padding: 120px 0;
        background: linear-gradient(135deg,#fff,#f8fbff);
    }

    #car-sales .cs-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 60px;
    }

    #car-sales .cs-tag {
        background: rgba(229,57,53,.1);
        color: var(--cs-primary);
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 20px;
    }

    #car-sales h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        margin-bottom: 20px;
    }

        #car-sales h1 span {
            color: var(--cs-primary);
        }

    #car-sales p {
        color: var(--cs-text);
        margin-bottom: 30px;
    }

    #car-sales .cs-buttons {
        font-weight: 500;
        display: flex;
        gap: 15px;
        margin-bottom: 30px;
    }

    #car-sales .cs-btn-primary {
        background: var(--cs-primary);
        color: #fff;
        padding: 12px 24px;
        border-radius: 30px;
        text-decoration: none;
        transition: .3s;
    }

        #car-sales .cs-btn-primary:hover {
            background: #c62828;
            transform: translateY(-3px);
        }

    #car-sales .cs-btn-outline {
        border: 2px solid var(--cs-primary);
        color: var(--cs-primary);
        padding: 12px 24px;
        border-radius: 30px;
        text-decoration: none;
        transition: .3s;
    }

        #car-sales .cs-btn-outline:hover {
            background: var(--cs-primary);
            color: #fff;
        }

    #car-sales .cs-image img {
        width: 100%;
    }

    #car-sales .cs-stats {
        display: flex;
        gap: 40px;
    }

        #car-sales .cs-stats .stat {
            text-align: center;
            font-weight: 500;
        }

        #car-sales .cs-stats h3 {
            font-weight: 700;
            color: var(--cs-primary);
        }

    /*--------------
        FEATURES
    --------------*/
    #car-sales .cs-features {
        padding: 100px 0;
        background: #f9fafb;
        text-align: center;
    }

    #car-sales .cs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
        gap: 30px;
        margin-top: 50px;
    }

    #car-sales .cs-card {
        height: 100%;
        background: #fff;
        padding: 30px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,.05);
        transition: .3s;
    }

        #car-sales .cs-card:hover {
            transform: translateY(-8px);
        }

        #car-sales .cs-card i {
            font-size: 40px;
            color: var(--cs-primary);
            margin-bottom: 15px;
            transition: .4s ease;
        }

        #car-sales .cs-card:hover i {
            transform: scale(1.25) translateY(-8px);
            color: var(--cs-accent);
            filter: drop-shadow(0 8px 12px)
        }

    /*-----------------
        WHY SECTION
    -----------------*/
    #car-sales .cs-why {
        padding: 100px 0;
        text-align: center;
    }

    #car-sales .cs-why-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 30px;
        margin-top: 50px;
    }

    #car-sales .cs-why-card {
        height: 100%;
        background: #fff;
        padding: 30px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,.05);
        transition: .4s ease;
    }

        #car-sales .cs-why-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(229,57,53,.15);
        }

        #car-sales .cs-why-card i {
            font-size: 40px;
            color: var(--cs-primary);
            margin-bottom: 15px;
            transition: .4s ease;
        }

        #car-sales .cs-why-card:hover i {
            transform: rotate(10deg) scale(1.2);
            color: var(--cs-accent);
            filter: drop-shadow(0 8px 12px);
        }

    /*--------------
        WORKFLOW
    --------------*/
    #car-sales .cs-workflow {
        padding: 100px 0;
        background: #f9fafb;
        text-align: center;
    }

    #car-sales .cs-steps {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
        gap: 30px;
        margin-top: 50px;
    }

    #car-sales .cs-step {
        height: 100%;
        background: #fff;
        padding: 30px;
        border-radius: 16px;
        position: relative;
        transition: .3s;
    }

        #car-sales .cs-step span {
            font-size: 36px;
            font-weight: 700;
            color: rgba(229,57,53,.25);
            display: block;
            margin-bottom: 15px;
        }

        #car-sales .cs-step:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

    /*---------
        CTA
    ---------*/
    #car-sales .cs-cta {
        padding: 100px 0;
        text-align: center;
        background: linear-gradient(135deg,var(--cs-primary),#b71c1c);
        color: #fff;
    }

        #car-sales .cs-cta h2 {
            margin-bottom: 30px;
        }

/*----------------
    RESPONSIVE
----------------*/
@media(max-width:992px) {
    #car-sales .cs-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #car-sales .cs-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    #car-sales .cs-stats {
        justify-content: center;
    }
}


/*#endregion*/

/*#region CASINO MANAGEMENT*/
#casino-management {
    --cm-red: #ef4444;
    --cm-orange: #f97316;
    --cm-gold: #fbbf24;
    --cm-blue: #3b82f6;
    --cm-dark: #0f172a;
    --cm-text: #475569;
    --cm-light-bg: #f8fafc;
    overflow: hidden;
}

    /*---------
        HERO
    ----------*/
    #casino-management .cm-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#fff,#f8fafc);
    }

    #casino-management .cm-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #casino-management .cm-tag {
        background: linear-gradient(90deg,var(--cm-red),var(--cm-orange));
        padding: 8px 18px;
        border-radius: 30px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 25px;
        color: #fff;
    }

    #casino-management h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #casino-management h1 span {
            background: linear-gradient(90deg,var(--cm-red),var(--cm-orange));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #casino-management .cm-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #casino-management .cm-btn-primary {
        background: linear-gradient(90deg,var(--cm-red),var(--cm-orange));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #casino-management .cm-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(239,68,68,.3);
        }

    #casino-management .cm-btn-outline {
        border: 2px solid var(--cm-red);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--cm-red);
        text-decoration: none;
        transition: .3s;
    }

        #casino-management .cm-btn-outline:hover {
            background: var(--cm-red);
            color: #fff;
        }

    #casino-management .cm-stats {
        display: flex;
        gap: 30px;
    }

    #casino-management .stat-box {
        border: 2px solid var(--cm-orange);
        padding: 10px 25px;
        border-radius: 15px;
        font-weight: 500;
        text-align: center;
    }

        #casino-management .stat-box h3 {
            font-weight: 700;
            color: var(--cm-blue);
        }

    #casino-management .cm-hero-image img {
        width: 100%;
    }

    /*--------------
        FEATURES
    --------------*/
    #casino-management .cm-features {
        padding: 110px 0;
        background: var(--cm-light-bg);
    }

    #casino-management .cm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #casino-management .cm-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #casino-management .cm-card:hover {
            transform: translateY(-8px);
            border-color: var(--cm-orange);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #casino-management .cm-card i {
            font-size: 38px;
            color: var(--cm-orange);
            margin-bottom: 20px;
            transition: .3s;
        }

        #casino-management .cm-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--cm-blue);
            filter: drop-shadow(0 8px 15px)
        }

    /*---------
        WHY
    ---------*/
    #casino-management .cm-why {
        padding: 110px 0;
    }

    #casino-management .cm-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #casino-management .cm-why ul {
        list-style: none;
        padding: 0;
    }

        #casino-management .cm-why ul li {
            margin-bottom: 15px;
        }

            #casino-management .cm-why ul li i {
                color: var(--cm-gold);
                margin-right: 8px;
            }

    #casino-management .cm-highlight-card {
        background: linear-gradient(135deg,var(--cm-red),var(--cm-orange));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    /*---------
        CTA
    ---------*/
    #casino-management .cm-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,var(--cm-red),var(--cm-orange));
        color: #fff;
    }

/* RESPONSIVE */
/* ---------- ARGE TABLET (1200px) ---------- */
@media (max-width:1200px) {

    #casino-management h1 {
        font-size: 42px;
    }

    #casino-management .cm-hero-image img {
        max-width: 480px;
    }

    #casino-management .cm-grid {
        gap: 28px;
    }
}


/* ---------- TABLET (992px) ---------- */
@media (max-width:992px) {

    #casino-management section {
        padding: 90px 0;
    }

    #casino-management .cm-hero-grid,
    #casino-management .cm-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Image on top for better UX */
    #casino-management .cm-hero-image {
        order: -1;
        margin-bottom: 40px;
    }

    #casino-management .cm-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    #casino-management .cm-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    #casino-management .stat-box {
        min-width: 140px;
    }

    #casino-management .cm-why ul {
        text-align: left;
        display: inline-block;
        margin-top: 25px;
    }
}


/* ---------- MOBILE (768px) ---------- */
@media (max-width:768px) {

    #casino-management .cm-hero {
        padding-top: 110px;
    }

    #casino-management h1 {
        font-size: 34px;
        line-height: 1.3;
    }

    #casino-management h2 {
        font-size: 28px;
    }

    #casino-management .cm-hero-buttons a {
        width: 100%;
        text-align: center;
    }

    #casino-management .cm-grid {
        grid-template-columns: 1fr;
    }

    #casino-management .cm-card {
        padding: 25px;
    }

    #casino-management .cm-highlight-card {
        padding: 30px;
    }

    #casino-management .cm-stats {
        flex-direction: column;
        align-items: center;
    }

    #casino-management .stat-box {
        width: 100%;
        max-width: 220px;
    }
}


/* ---------- SMALL MOBILE (480px) ---------- */
@media (max-width:480px) {

    #casino-management section {
        padding: 70px 0;
    }

    #casino-management h1 {
        font-size: 26px;
    }

    #casino-management .cm-tag {
        font-size: 13px;
        padding: 6px 14px;
    }

    #casino-management .cm-btn-primary,
    #casino-management .cm-btn-outline {
        padding: 12px;
        font-size: 14px;
    }

    #casino-management .cm-card i {
        font-size: 32px;
    }

    #casino-management .cm-hero-image img {
        max-width: 100%;
    }
}


/*#endregion*/

/*#region FISHERY MANAGEMENT*/
#fishery-management {
    --fm-ocean: #1e3a5f;
    --fm-sky: #60a5fa;
    --fm-sea: #2f855a;
    --fm-coral: #e76f51;
    --fm-sand: #f4e1c1;
    --fm-text: #475569;
    --fm-light-bg: #f5f9ff;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #fishery-management .fm-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#ffffff,#f0f7ff);
    }

    #fishery-management .fm-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #fishery-management .fm-tag {
        background: linear-gradient(90deg,var(--fm-ocean),var(--fm-sea));
        padding: 8px 18px;
        border-radius: 30px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 25px;
        color: #fff;
    }

    #fishery-management h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #fishery-management h1 span {
            background: linear-gradient(90deg,var(--fm-ocean),var(--fm-sea));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #fishery-management .fm-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #fishery-management .fm-btn-primary {
        background: linear-gradient(90deg,var(--fm-ocean),var(--fm-sea));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #fishery-management .fm-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(30,58,95,.3);
        }

    #fishery-management .fm-btn-outline {
        border: 2px solid var(--fm-ocean);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--fm-ocean);
        text-decoration: none;
        transition: .3s;
    }

        #fishery-management .fm-btn-outline:hover {
            background: var(--fm-ocean);
            color: #fff;
        }

    #fishery-management .fm-stats {
        display: flex;
        gap: 30px;
    }

    #fishery-management .stat-box {
        border: 2px solid var(--fm-sea);
        padding: 10px 25px;
        border-radius: 15px;
        text-align: center;
    }

        #fishery-management .stat-box h3 {
            font-weight: 800;
            color: var(--fm-ocean);
        }

    #fishery-management .fm-hero-image img {
        width: 100%;
    }

    /*--------------
        FEATURES
    --------------*/
    #fishery-management .fm-features {
        padding: 110px 0;
        background: var(--fm-light-bg);
    }

    #fishery-management .fm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #fishery-management .fm-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #fishery-management .fm-card:hover {
            transform: translateY(-8px);
            border-color: var(--fm-sea);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #fishery-management .fm-card i {
            font-size: 38px;
            color: var(--fm-sea);
            margin-bottom: 20px;
            transition: .3s;
        }

        #fishery-management .fm-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--fm-ocean);
            filter: drop-shadow(0 8px 15px rgba(0,0,0,.15));
        }

    /*--------
        WHY
    --------*/
    #fishery-management .fm-why {
        padding: 110px 0;
    }

    #fishery-management .fm-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #fishery-management .fm-why ul {
        list-style: none;
        padding: 0;
    }

        #fishery-management .fm-why ul li {
            margin-bottom: 15px;
        }

            #fishery-management .fm-why ul li i {
                color: var(--fm-sea);
                margin-right: 8px;
            }

    #fishery-management .fm-highlight-card {
        background: linear-gradient(135deg,var(--fm-ocean),var(--fm-sea));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    /*---------
        CTA
    ---------*/
    #fishery-management .fm-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,var(--fm-ocean),var(--fm-sea));
        color: #fff;
    }

/*--------------
   RESPONSIVE
--------------*/

/* ---------- Large Laptop (1200px) ---------- */
@media (max-width: 1200px) {

    #fishery-management .fm-hero {
        padding: 110px 0;
    }

    #fishery-management h1 {
        font-size: 42px;
    }

    #fishery-management .fm-why-grid {
        gap: 40px;
    }
}


/* ---------- Tablet Landscape (992px) ---------- */
@media (max-width: 992px) {

    /* HERO STACK */
    #fishery-management .fm-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #fishery-management .fm-hero-image {
        margin-top: 40px;
    }

    #fishery-management .fm-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    #fishery-management .fm-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    /* WHY STACK */
    #fishery-management .fm-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #fishery-management .fm-highlight-card {
        margin-top: 40px;
    }
}


/* ---------- Tablet Portrait (768px) ---------- */
@media (max-width: 768px) {

    #fishery-management .fm-hero {
        padding: 90px 0;
    }

    #fishery-management h1 {
        font-size: 34px;
    }

    #fishery-management p {
        font-size: 15px;
    }

    #fishery-management .fm-stats {
        flex-direction: column;
        align-items: center;
    }

    #fishery-management .stat-box {
        width: 220px;
    }

    #fishery-management .fm-features {
        padding: 80px 0;
    }

    #fishery-management .fm-why {
        padding: 80px 0;
    }

    #fishery-management .fm-cta {
        padding: 80px 0;
    }
}


/* ---------- Mobile (576px) ---------- */
@media (max-width: 576px) {

    #fishery-management h1 {
        font-size: 28px;
    }

    #fishery-management .fm-tag {
        font-size: 13px;
        padding: 6px 14px;
    }

    #fishery-management .fm-btn-primary,
    #fishery-management .fm-btn-outline {
        width: 100%;
        text-align: center;
    }

    #fishery-management .fm-hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    #fishery-management .fm-card {
        padding: 25px;
    }

        #fishery-management .fm-card i {
            font-size: 32px;
        }

    #fishery-management .fm-highlight-card {
        padding: 30px;
    }

    #fishery-management .stat-box {
        width: 100%;
        max-width: 260px;
    }
}


/* ---------- Small Mobile (400px) ---------- */
@media (max-width: 400px) {

    #fishery-management h1 {
        font-size: 24px;
    }

    #fishery-management .fm-hero {
        padding: 70px 0;
    }

    #fishery-management .fm-card {
        padding: 20px;
    }

    #fishery-management .fm-highlight-card {
        padding: 25px;
    }
}


/*#endregion*/

/*#region HOTEL MANAGEMENT*/
#hotel-management {
    --hm-blue: #2b6cb0;
    --hm-purple: #805ad5;
    --hm-red: #f56565;
    --hm-yellow: #f6ad55;
    --hm-green: #38a169;
    --hm-text: #475569;
    --hm-light-bg: #f7f9ff;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #hotel-management .hm-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#ffffff,#f3f6ff);
    }

    #hotel-management .hm-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #hotel-management .hm-tag {
        background: linear-gradient(90deg,var(--hm-blue),var(--hm-purple));
        padding: 8px 18px;
        border-radius: 30px;
        font-weight: 600;
        display: inline-block;
        margin-bottom: 25px;
        color: #fff;
    }

    #hotel-management h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #hotel-management h1 span {
            background: linear-gradient(90deg,var(--hm-blue),var(--hm-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #hotel-management .hm-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #hotel-management .hm-btn-primary {
        background: linear-gradient(90deg,var(--hm-blue),var(--hm-purple));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #hotel-management .hm-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(43,108,176,.3);
        }

    #hotel-management .hm-btn-outline {
        border: 2px solid var(--hm-blue);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--hm-blue);
        text-decoration: none;
        transition: .3s;
    }

        #hotel-management .hm-btn-outline:hover {
            background: var(--hm-blue);
            color: #fff;
        }

    #hotel-management .hm-stats {
        display: flex;
        gap: 30px;
    }

    #hotel-management .stat-box {
        border: 2px solid var(--hm-purple);
        padding: 10px 25px;
        border-radius: 15px;
        text-align: center;
    }

        #hotel-management .stat-box h3 {
            font-weight: 800;
            color: var(--hm-blue);
        }

    #hotel-management .hm-hero-image img {
        width: 100%;
    }

    /*--------------
        FEATURES
    --------------*/
    #hotel-management .hm-features {
        padding: 110px 0;
        background: var(--hm-light-bg);
    }

    #hotel-management .hm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #hotel-management .hm-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #hotel-management .hm-card:hover {
            transform: translateY(-8px);
            border-color: var(--hm-purple);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #hotel-management .hm-card i {
            font-size: 38px;
            color: var(--hm-purple);
            margin-bottom: 20px;
            transition: .3s;
        }

        #hotel-management .hm-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--hm-blue);
            filter: drop-shadow(0 8px 15px rgba(0,0,0,.15));
        }

    /*--------
        WHY
    --------*/
    #hotel-management .hm-why {
        padding: 110px 0;
    }

    #hotel-management .hm-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #hotel-management .hm-why ul {
        list-style: none;
        padding: 0;
    }

        #hotel-management .hm-why ul li {
            margin-bottom: 15px;
        }

            #hotel-management .hm-why ul li i {
                color: var(--hm-purple);
                margin-right: 8px;
            }

    #hotel-management .hm-highlight-card {
        background: linear-gradient(135deg,var(--hm-blue),var(--hm-purple));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    /*---------
        CTA
    ---------*/
    #hotel-management .hm-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,var(--hm-blue),var(--hm-purple));
        color: #fff;
    }

/*--------------
   RESPONSIVE
--------------*/

/* Large Laptop */
@media (max-width:1200px) {
    #hotel-management .hm-hero {
        padding: 110px 0;
    }

    #hotel-management h1 {
        font-size: 42px;
    }

    #hotel-management .hm-why-grid {
        gap: 40px;
    }
}

/* Tablet */
@media (max-width:992px) {

    #hotel-management .hm-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #hotel-management .hm-hero-image {
        margin-top: 40px;
    }

    #hotel-management .hm-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    #hotel-management .hm-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    #hotel-management .hm-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #hotel-management .hm-highlight-card {
        margin-top: 40px;
    }
}

/* Tablet Portrait */
@media (max-width:768px) {

    #hotel-management .hm-hero {
        padding: 90px 0;
    }

    #hotel-management h1 {
        font-size: 34px;
    }

    #hotel-management .hm-stats {
        flex-direction: column;
        align-items: center;
    }

    #hotel-management .stat-box {
        width: 220px;
    }

    #hotel-management .hm-features,
    #hotel-management .hm-why,
    #hotel-management .hm-cta {
        padding: 80px 0;
    }
}

/* Mobile */
@media (max-width:576px) {

    #hotel-management h1 {
        font-size: 28px;
    }

    #hotel-management .hm-tag {
        font-size: 13px;
        padding: 6px 14px;
    }

    #hotel-management .hm-btn-primary,
    #hotel-management .hm-btn-outline {
        width: 100%;
        text-align: center;
    }

    #hotel-management .hm-hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    #hotel-management .hm-card {
        padding: 25px;
    }

        #hotel-management .hm-card i {
            font-size: 32px;
        }

    #hotel-management .hm-highlight-card {
        padding: 30px;
    }

    #hotel-management .stat-box {
        width: 100%;
        max-width: 260px;
    }
}

/* Small Mobile */
@media (max-width:400px) {

    #hotel-management h1 {
        font-size: 24px;
    }

    #hotel-management .hm-hero {
        padding: 70px 0;
    }

    #hotel-management .hm-card {
        padding: 20px;
    }

    #hotel-management .hm-highlight-card {
        padding: 25px;
    }
}

/*#endregion*/

/*#region HR & PAYROLL MANAGEMENT*/
#hr-payroll-management {
    --hp-primary: #0f766e;
    --hp-secondary: #14b8a6;
    --hp-accent: #f59e0b;
    --hp-dark: #1e293b;
    --hp-text: #475569;
    --hp-light-bg: #eef9f8;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #hr-payroll-management .hp-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#ffffff,#e6f7f6);
    }

    #hr-payroll-management .hp-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #hr-payroll-management h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #hr-payroll-management h1 span {
            background: linear-gradient(90deg,var(--hp-primary),var(--hp-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #hr-payroll-management .hp-tag {
        background: linear-gradient(90deg,var(--hp-primary),var(--hp-secondary));
        padding: 8px 18px;
        border-radius: 30px;
        color: #fff;
        display: inline-block;
        margin-bottom: 25px;
    }

    #hr-payroll-management .hp-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #hr-payroll-management .hp-btn-primary {
        background: linear-gradient(90deg,var(--hp-primary),var(--hp-secondary));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #hr-payroll-management .hp-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(15,118,110,.3);
        }

    #hr-payroll-management .hp-btn-outline {
        border: 2px solid var(--hp-primary);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--hp-primary);
        text-decoration: none;
        transition: .3s;
    }

        #hr-payroll-management .hp-btn-outline:hover {
            background: var(--hp-primary);
            color: #fff;
        }

    #hr-payroll-management .hp-hero-image img {
        width: 100%;
    }

    #hr-payroll-management .hp-stats {
        display: flex;
        gap: 30px;
    }

    #hr-payroll-management .stat-box {
        border: 2px solid #2dd4bf;
        padding: 10px 25px;
        border-radius: 15px;
        text-align: center;
        background: #ffffff;
    }

        #hr-payroll-management .stat-box h3 {
            font-weight: 800;
            color: var(--hp-primary);
        }

    /*--------------
        FEATURES
    --------------*/
    #hr-payroll-management .hp-features {
        padding: 110px 0;
        background: var(--hp-light-bg);
    }

    #hr-payroll-management .hp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #hr-payroll-management .hp-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #hr-payroll-management .hp-card:hover {
            transform: translateY(-8px);
            border-color: var(--hp-secondary);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #hr-payroll-management .hp-card i {
            font-size: 38px;
            color: var(--hp-secondary);
            margin-bottom: 20px;
            transition: .3s;
        }

        #hr-payroll-management .hp-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--hp-primary);
        }

    /*---------
        WHY
    ---------*/
    #hr-payroll-management .hp-why {
        padding: 110px 0;
    }

    #hr-payroll-management .hp-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #hr-payroll-management .hp-why-list {
        list-style: none;
        padding: 0;
    }

        #hr-payroll-management .hp-why-list li {
            margin-bottom: 15px;
            color: var(--hp-text);
        }

        #hr-payroll-management .hp-why-list i {
            color: var(--hp-secondary);
            margin-right: 8px;
        }

    #hr-payroll-management .hp-highlight-card {
        background: linear-gradient(135deg,var(--hp-primary),var(--hp-secondary));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    #hr-payroll-management .hp-gradient-text {
        background: linear-gradient(90deg,var(--hp-primary),var(--hp-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /*---------
        CTA
    ---------*/
    #hr-payroll-management .hp-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,#0f766e,#14b8a6);
        color: #fff;
    }

/*-----------------
    RESPONSIVE
-----------------*/

@media (max-width: 992px) {

    #hr-payroll-management .hp-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #hr-payroll-management .hp-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    #hr-payroll-management .hp-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    #hr-payroll-management .hp-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #hr-payroll-management .hp-highlight-card {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {

    #hr-payroll-management h1 {
        font-size: 34px;
    }

    #hr-payroll-management .hp-stats {
        flex-direction: column;
        align-items: center;
    }

    #hr-payroll-management .stat-box {
        width: 220px;
    }

    #hr-payroll-management .hp-features,
    #hr-payroll-management .hp-why,
    #hr-payroll-management .hp-cta {
        padding: 80px 0;
    }
}

@media (max-width: 576px) {

    #hr-payroll-management h1 {
        font-size: 28px;
    }

    #hr-payroll-management .hp-btn-primary,
    #hr-payroll-management .hp-btn-outline {
        width: 100%;
        text-align: center;
    }

    #hr-payroll-management .hp-hero-buttons {
        flex-direction: column;
    }

    #hr-payroll-management .stat-box {
        width: 100%;
        max-width: 260px;
    }
}

/*#endregion*/

/*#region INVENTORY MANAGEMENT*/
#inventory-management {
    --im-primary: #1f4e5f;
    --im-secondary: #5f86c2;
    --im-accent: #f4a261;
    --im-dark: #1e293b;
    --im-text: #475569;
    --im-light-bg: #eef4f7;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #inventory-management .im-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#ffffff,var(--im-light-bg));
    }

    #inventory-management .im-hero-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 40px;
    }

    #inventory-management h1 {
        font-size: 48px;
        font-style: italic;
        font-weight: 700;
        line-height: 1.2;
    }

        #inventory-management h1 span {
            background: linear-gradient(90deg,var(--im-primary),var(--im-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #inventory-management .im-tag {
        background: linear-gradient(90deg,var(--im-primary),var(--im-secondary));
        padding: 8px 18px;
        border-radius: 30px;
        color: #fff;
        display: inline-block;
        margin-bottom: 25px;
    }

    #inventory-management .im-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #inventory-management .im-btn-primary {
        background: linear-gradient(90deg,var(--im-primary),var(--im-secondary));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #inventory-management .im-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(31,78,95,.3);
        }

    #inventory-management .im-btn-outline {
        border: 2px solid var(--im-primary);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--im-primary);
        text-decoration: none;
        transition: .3s;
    }

        #inventory-management .im-btn-outline:hover {
            background: var(--im-primary);
            color: #fff;
        }

    #inventory-management .im-hero-image img {
        width: 100%;
    }

    #inventory-management .im-stats {
        display: flex;
        gap: 30px;
    }

    #inventory-management .stat-box {
        border: 2px solid var(--im-secondary);
        padding: 10px 25px;
        border-radius: 15px;
        text-align: center;
        background: #ffffff;
    }

        #inventory-management .stat-box h3 {
            font-weight: 800;
            color: var(--im-primary);
        }

    /*--------------
        FEATURES
    --------------*/
    #inventory-management .im-features {
        padding: 110px 0;
        background: var(--im-light-bg);
    }

    #inventory-management .im-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #inventory-management .im-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #inventory-management .im-card:hover {
            transform: translateY(-8px);
            border-color: var(--im-secondary);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #inventory-management .im-card i {
            font-size: 38px;
            color: var(--im-accent);
            margin-bottom: 20px;
            transition: .3s;
        }

        #inventory-management .im-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--im-primary);
        }

    /*---------
        WHY
    ---------*/
    #inventory-management .im-why {
        padding: 110px 0;
    }

    #inventory-management .im-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #inventory-management .im-why-list {
        list-style: none;
        padding: 0;
    }

        #inventory-management .im-why-list li {
            margin-bottom: 15px;
            color: var(--im-text);
        }

        #inventory-management .im-why-list i {
            color: var(--im-secondary);
            margin-right: 8px;
        }

    #inventory-management .im-highlight-card {
        background: linear-gradient(135deg,var(--im-primary),var(--im-secondary));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    #inventory-management .im-gradient-text {
        background: linear-gradient(90deg,var(--im-primary),var(--im-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /*---------
        CTA
    ---------*/
    #inventory-management .im-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,var(--im-primary),var(--im-secondary));
        color: #fff;
    }

/*-----------------
    RESPONSIVE
-----------------*/

@media (max-width: 992px) {

    #inventory-management .im-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #inventory-management .im-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    #inventory-management .im-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    #inventory-management .im-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #inventory-management .im-highlight-card {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {

    #inventory-management h1 {
        font-size: 34px;
    }

    #inventory-management .im-stats {
        flex-direction: column;
        align-items: center;
    }

    #inventory-management .stat-box {
        width: 220px;
    }

    #inventory-management .im-features,
    #inventory-management .im-why,
    #inventory-management .im-cta {
        padding: 80px 0;
    }
}

@media (max-width: 576px) {

    #inventory-management h1 {
        font-size: 28px;
    }

    #inventory-management .im-btn-primary,
    #inventory-management .im-btn-outline {
        width: 100%;
        text-align: center;
    }

    #inventory-management .im-hero-buttons {
        flex-direction: column;
    }

    #inventory-management .stat-box {
        width: 100%;
        max-width: 260px;
    }
}

/*#endregion*/

/*#region MONEY EXCHANGE MANAGEMENT*/
#money-exchange {
    --me-primary: #2f6fdd;
    --me-secondary: #5f8df5;
    --me-accent: #f4b400;
    --me-dark: #1e293b;
    --me-text: #475569;
    --me-light-bg: #eef3ff;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #money-exchange .me-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#ffffff,var(--me-light-bg));
    }

    #money-exchange .me-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #money-exchange h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #money-exchange h1 span,
        #money-exchange .me-gradient-text {
            background: linear-gradient(90deg,var(--me-primary),var(--me-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #money-exchange .me-tag {
        background: linear-gradient(90deg,var(--me-primary),var(--me-secondary));
        padding: 8px 18px;
        border-radius: 30px;
        color: #fff;
        display: inline-block;
        margin-bottom: 25px;
    }

    #money-exchange .me-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #money-exchange .me-btn-primary {
        background: linear-gradient(90deg,var(--me-primary),var(--me-secondary));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #money-exchange .me-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(47,111,221,.3);
        }

    #money-exchange .me-btn-outline {
        border: 2px solid var(--me-primary);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--me-primary);
        text-decoration: none;
        transition: .3s;
    }

        #money-exchange .me-btn-outline:hover {
            background: var(--me-primary);
            color: #fff;
        }

    #money-exchange .me-hero-image img {
        width: 100%;
    }

    #money-exchange .me-stats {
        display: flex;
        gap: 30px;
    }

    #money-exchange .stat-box {
        border: 2px solid var(--me-secondary);
        padding: 10px 25px;
        border-radius: 15px;
        text-align: center;
        background: #fff;
    }

        #money-exchange .stat-box h3 {
            font-weight: 800;
            color: var(--me-primary);
        }

    /*--------------
        FEATURES
    --------------*/
    #money-exchange .me-features {
        padding: 110px 0;
        background: var(--me-light-bg);
    }

    #money-exchange .me-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #money-exchange .me-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #money-exchange .me-card:hover {
            transform: translateY(-8px);
            border-color: var(--me-secondary);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #money-exchange .me-card i {
            font-size: 38px;
            color: var(--me-accent);
            margin-bottom: 20px;
            transition: .3s;
        }

        #money-exchange .me-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--me-primary);
        }

    /*---------
        WHY
    ---------*/
    #money-exchange .me-why {
        padding: 110px 0;
    }

    #money-exchange .me-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #money-exchange .me-why-list {
        list-style: none;
        padding: 0;
    }

        #money-exchange .me-why-list li {
            margin-bottom: 15px;
            color: var(--me-text);
        }

        #money-exchange .me-why-list i {
            color: var(--me-secondary);
            margin-right: 8px;
        }

    #money-exchange .me-highlight-card {
        background: linear-gradient(135deg,var(--me-primary),var(--me-secondary));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    /*---------
        CTA
    ---------*/
    #money-exchange .me-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,var(--me-primary),var(--me-secondary));
        color: #fff;
    }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #money-exchange .me-hero-grid,
    #money-exchange .me-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #money-exchange .me-hero-buttons,
    #money-exchange .me-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    #money-exchange .me-highlight-card {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {

    #money-exchange h1 {
        font-size: 34px;
    }

    #money-exchange .me-stats {
        flex-direction: column;
        align-items: center;
    }

    #money-exchange .stat-box {
        width: 220px;
    }

    #money-exchange .me-features,
    #money-exchange .me-why,
    #money-exchange .me-cta {
        padding: 80px 0;
    }
}

@media (max-width: 576px) {

    #money-exchange h1 {
        font-size: 28px;
    }

    #money-exchange .me-btn-primary,
    #money-exchange .me-btn-outline {
        width: 100%;
        text-align: center;
    }

    #money-exchange .me-hero-buttons {
        flex-direction: column;
    }

    #money-exchange .stat-box {
        width: 100%;
        max-width: 260px;
    }
}

/*#endregion*/

/*#region RESTAURANT MANAGEMENT*/
#restaurant-management {
    --rm-primary: #0f4c5c;
    --rm-secondary: #e63946;
    --rm-accent: #f4a261;
    --rm-dark: #1e293b;
    --rm-text: #475569;
    --rm-light-bg: #f3f9fb;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #restaurant-management .rm-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#ffffff,#e8f6f8);
    }

    #restaurant-management .rm-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #restaurant-management h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #restaurant-management h1 span {
            background: linear-gradient(90deg,var(--rm-primary),var(--rm-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #restaurant-management .rm-tag {
        background: linear-gradient(90deg,var(--rm-primary),var(--rm-secondary));
        padding: 8px 18px;
        border-radius: 30px;
        color: #fff;
        display: inline-block;
        margin-bottom: 25px;
    }

    #restaurant-management .rm-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #restaurant-management .rm-btn-primary {
        background: linear-gradient(90deg,var(--rm-primary),var(--rm-secondary));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #restaurant-management .rm-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(15,76,92,.3);
        }

    #restaurant-management .rm-btn-outline {
        border: 2px solid var(--rm-primary);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--rm-primary);
        text-decoration: none;
        transition: .3s;
    }

        #restaurant-management .rm-btn-outline:hover {
            background: var(--rm-primary);
            color: #fff;
        }

    #restaurant-management .rm-hero-image img {
        width: 100%;
    }

    #restaurant-management .rm-stats {
        display: flex;
        gap: 30px;
    }

    #restaurant-management .stat-box {
        border: 2px solid var(--rm-secondary);
        padding: 10px 25px;
        border-radius: 15px;
        text-align: center;
        background: #ffffff;
    }

        #restaurant-management .stat-box h3 {
            font-weight: 800;
            color: var(--rm-primary);
        }

    /*--------------
        FEATURES
    --------------*/
    #restaurant-management .rm-features {
        padding: 110px 0;
        background: var(--rm-light-bg);
    }

    #restaurant-management .rm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #restaurant-management .rm-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #restaurant-management .rm-card:hover {
            transform: translateY(-8px);
            border-color: var(--rm-secondary);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #restaurant-management .rm-card i {
            font-size: 38px;
            color: var(--rm-secondary);
            margin-bottom: 20px;
            transition: .3s;
        }

        #restaurant-management .rm-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--rm-primary);
        }

    /*---------
        WHY
    ---------*/
    #restaurant-management .rm-why {
        padding: 110px 0;
    }

    #restaurant-management .rm-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #restaurant-management .rm-why-list {
        list-style: none;
        padding: 0;
    }

        #restaurant-management .rm-why-list li {
            margin-bottom: 15px;
            color: var(--rm-text);
        }

        #restaurant-management .rm-why-list i {
            color: var(--rm-secondary);
            margin-right: 8px;
        }

    #restaurant-management .rm-highlight-card {
        background: linear-gradient(135deg,var(--rm-primary),var(--rm-secondary));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    #restaurant-management .rm-gradient-text {
        background: linear-gradient(90deg,var(--rm-primary),var(--rm-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /*---------
        CTA
    ---------*/
    #restaurant-management .rm-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,var(--rm-primary),var(--rm-secondary));
        color: #fff;
    }

/*-----------------
    RESPONSIVE
-----------------*/

@media (max-width: 992px) {

    #restaurant-management .rm-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #restaurant-management .rm-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    #restaurant-management .rm-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    #restaurant-management .rm-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #restaurant-management .rm-highlight-card {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {

    #restaurant-management h1 {
        font-size: 34px;
    }

    #restaurant-management .rm-stats {
        flex-direction: column;
        align-items: center;
    }

    #restaurant-management .stat-box {
        width: 220px;
    }

    #restaurant-management .rm-features,
    #restaurant-management .rm-why,
    #restaurant-management .rm-cta {
        padding: 80px 0;
    }
}

@media (max-width: 576px) {

    #restaurant-management h1 {
        font-size: 28px;
    }

    #restaurant-management .rm-btn-primary,
    #restaurant-management .rm-btn-outline {
        width: 100%;
        text-align: center;
    }

    #restaurant-management .rm-hero-buttons {
        flex-direction: column;
    }

    #restaurant-management .stat-box {
        width: 100%;
        max-width: 260px;
    }
}

/*#endregion*/

/*#region RETAIL MANAGEMENT*/
#retail-management {
    --rt-primary: #2563eb;
    --rt-secondary: #f59e0b;
    --rt-accent: #06b6d4;
    --rt-dark: #1e293b;
    --rt-text: #475569;
    --rt-light-bg: #f1f5f9;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #retail-management .rt-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#ffffff,#eef2ff);
    }

    #retail-management .rt-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #retail-management h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #retail-management h1 span {
            background: linear-gradient(90deg,var(--rt-primary),var(--rt-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #retail-management .rt-tag {
        background: linear-gradient(90deg,var(--rt-primary),var(--rt-secondary));
        padding: 8px 18px;
        border-radius: 30px;
        color: #fff;
        display: inline-block;
        margin-bottom: 25px;
    }

    #retail-management .rt-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #retail-management .rt-btn-primary {
        background: linear-gradient(90deg,var(--rt-primary),var(--rt-secondary));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #retail-management .rt-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(37,99,235,.3);
        }

    #retail-management .rt-btn-outline {
        border: 2px solid var(--rt-primary);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--rt-primary);
        text-decoration: none;
        transition: .3s;
    }

        #retail-management .rt-btn-outline:hover {
            background: var(--rt-primary);
            color: #fff;
        }

    #retail-management .rt-hero-image img {
        width: 100%;
    }

    #retail-management .rt-stats {
        display: flex;
        gap: 30px;
    }

    #retail-management .stat-box {
        border: 2px solid var(--rt-accent);
        padding: 10px 25px;
        border-radius: 15px;
        text-align: center;
        background: #ffffff;
    }

        #retail-management .stat-box h3 {
            font-weight: 800;
            color: var(--rt-primary);
        }

    /*--------------
        FEATURES
    --------------*/
    #retail-management .rt-features {
        padding: 110px 0;
        background: var(--rt-light-bg);
    }

    #retail-management .rt-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #retail-management .rt-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #retail-management .rt-card:hover {
            transform: translateY(-8px);
            border-color: var(--rt-secondary);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #retail-management .rt-card i {
            font-size: 38px;
            color: var(--rt-secondary);
            margin-bottom: 20px;
            transition: .3s;
        }

        #retail-management .rt-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--rt-primary);
        }

    /*---------
        WHY
    ---------*/
    #retail-management .rt-why {
        padding: 110px 0;
    }

    #retail-management .rt-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #retail-management .rt-why-list {
        list-style: none;
        padding: 0;
    }

        #retail-management .rt-why-list li {
            margin-bottom: 15px;
            color: var(--rt-text);
        }

        #retail-management .rt-why-list i {
            color: var(--rt-secondary);
            margin-right: 8px;
        }

    #retail-management .rt-highlight-card {
        background: linear-gradient(135deg,var(--rt-primary),var(--rt-secondary));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    /*---------
        CTA
    ---------*/
    #retail-management .rt-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,var(--rt-primary),var(--rt-secondary));
        color: #fff;
    }

/*----------------
    RESPONSIVE
----------------*/

@media (max-width: 992px) {
    #retail-management .rt-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #retail-management .rt-hero-buttons,
    #retail-management .rt-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    #retail-management .rt-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    #retail-management h1 {
        font-size: 34px;
    }

    #retail-management .rt-stats {
        flex-direction: column;
        align-items: center;
    }

    #retail-management .stat-box {
        width: 220px;
    }
}

@media (max-width: 576px) {
    #retail-management h1 {
        font-size: 28px;
    }

    #retail-management .rt-btn-primary,
    #retail-management .rt-btn-outline {
        width: 100%;
        text-align: center;
    }

    #retail-management .rt-hero-buttons {
        flex-direction: column;
    }
}
/*#endregion*/

/*#region SHIPPING MANAGEMENT*/
#shipping-management {
    --sm-primary: #0ea5e9;
    --sm-secondary: #f59e0b;
    --sm-accent: #ef4444;
    --sm-dark: #1e293b;
    --sm-text: #475569;
    --sm-light-bg: #f0f9ff;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #shipping-management .sm-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#ffffff,#e0f2fe);
    }

    #shipping-management .sm-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #shipping-management h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #shipping-management h1 span {
            background: linear-gradient(90deg,var(--sm-primary),var(--sm-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #shipping-management .sm-tag {
        background: linear-gradient(90deg,var(--sm-primary),var(--sm-secondary));
        padding: 8px 18px;
        border-radius: 30px;
        color: #fff;
        display: inline-block;
        margin-bottom: 25px;
    }

    #shipping-management .sm-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #shipping-management .sm-btn-primary {
        background: linear-gradient(90deg,var(--sm-primary),var(--sm-secondary));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #shipping-management .sm-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(14,165,233,.3);
        }

    #shipping-management .sm-btn-outline {
        border: 2px solid var(--sm-primary);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--sm-primary);
        text-decoration: none;
        transition: .3s;
    }

        #shipping-management .sm-btn-outline:hover {
            background: var(--sm-primary);
            color: #fff;
        }

    #shipping-management .sm-hero-image img {
        width: 100%;
    }

    #shipping-management .sm-stats {
        display: flex;
        gap: 30px;
    }

    #shipping-management .stat-box {
        border: 2px solid var(--sm-accent);
        padding: 10px 25px;
        border-radius: 15px;
        text-align: center;
        background: #ffffff;
    }

        #shipping-management .stat-box h3 {
            font-weight: 800;
            color: var(--sm-primary);
        }

    /*-------------
        FEATURES
    -------------*/
    #shipping-management .sm-features {
        padding: 110px 0;
        background: var(--sm-light-bg);
    }

    #shipping-management .sm-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #shipping-management .sm-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #shipping-management .sm-card:hover {
            transform: translateY(-8px);
            border-color: var(--sm-secondary);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #shipping-management .sm-card i {
            font-size: 38px;
            color: var(--sm-secondary);
            margin-bottom: 20px;
            transition: .3s;
        }

        #shipping-management .sm-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--sm-primary);
        }

    /*---------
        WHY
    ---------*/
    #shipping-management .sm-why {
        padding: 110px 0;
    }

    #shipping-management .sm-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #shipping-management .sm-why-list {
        list-style: none;
        padding: 0;
    }

        #shipping-management .sm-why-list li {
            margin-bottom: 15px;
            color: var(--sm-text);
        }

        #shipping-management .sm-why-list i {
            color: var(--sm-secondary);
            margin-right: 8px;
        }

    #shipping-management .sm-highlight-card {
        background: linear-gradient(135deg,var(--sm-primary),var(--sm-secondary));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    /*---------
        CTA
    ---------*/
    #shipping-management .sm-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,var(--sm-primary),var(--sm-secondary));
        color: #fff;
    }

/*----------------
    RESPONSIVE
----------------*/

@media (max-width: 992px) {
    #shipping-management .sm-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #shipping-management .sm-hero-buttons,
    #shipping-management .sm-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    #shipping-management .sm-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

@media (max-width: 768px) {
    #shipping-management h1 {
        font-size: 34px;
    }

    #shipping-management .sm-stats {
        flex-direction: column;
        align-items: center;
    }

    #shipping-management .stat-box {
        width: 220px;
    }
}

@media (max-width: 576px) {
    #shipping-management h1 {
        font-size: 28px;
    }

    #shipping-management .sm-btn-primary,
    #shipping-management .sm-btn-outline {
        width: 100%;
        text-align: center;
    }

    #shipping-management .sm-hero-buttons {
        flex-direction: column;
    }

    #shipping-management .stat-box {
        width: 100%;
        max-width: 260px;
    }
}
/*#endregion*/

/*#region VEHICLE PURCHASE MANAGEMENT*/
#vehicle-purchase-management {
    --vp-primary: #f59e0b;
    --vp-secondary: #fb923c;
    --vp-accent: #1e3a8a;
    --vp-dark: #1f2937;
    --vp-text: #4b5563;
    --vp-light-bg: #fff7ed;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/

    #vehicle-purchase-management .vp-hero {
        padding: 130px 0;
        background: linear-gradient(180deg,#ffffff,#fff7ed);
    }

    #vehicle-purchase-management .vp-hero-grid {
        display: grid;
        grid-template-columns: 1.2fr .8fr;
        align-items: center;
        gap: 40px;
    }

    #vehicle-purchase-management h1 {
        font-size: 48px;
        font-weight: 700;
        font-style: italic;
        line-height: 1.2;
    }

        #vehicle-purchase-management h1 span {
            background: linear-gradient(90deg,var(--vp-primary),var(--vp-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #vehicle-purchase-management .vp-tag {
        background: linear-gradient(90deg,var(--vp-primary),var(--vp-secondary));
        padding: 8px 18px;
        border-radius: 30px;
        color: #fff;
        display: inline-block;
        margin-bottom: 25px;
    }

    #vehicle-purchase-management .vp-hero-buttons {
        display: flex;
        gap: 15px;
        margin: 30px 0;
    }

    #vehicle-purchase-management .vp-btn-primary {
        background: linear-gradient(90deg,var(--vp-primary),var(--vp-secondary));
        padding: 13px 28px;
        border-radius: 30px;
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        #vehicle-purchase-management .vp-btn-primary:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 30px rgba(245,158,11,.3);
        }

    #vehicle-purchase-management .vp-btn-outline {
        border: 2px solid var(--vp-primary);
        padding: 12px 28px;
        border-radius: 30px;
        color: var(--vp-primary);
        text-decoration: none;
        transition: .3s;
    }

        #vehicle-purchase-management .vp-btn-outline:hover {
            background: var(--vp-primary);
            color: #fff;
        }

    #vehicle-purchase-management .vp-hero-image img {
        width: 100%;
    }

    #vehicle-purchase-management .vp-stats {
        display: flex;
        gap: 30px;
    }

    #vehicle-purchase-management .stat-box {
        border: 2px solid var(--vp-secondary);
        padding: 10px 25px;
        border-radius: 15px;
        text-align: center;
        background: #ffffff;
    }

        #vehicle-purchase-management .stat-box h3 {
            font-weight: 800;
            color: var(--vp-primary);
        }

    /*--------------
        FEATURES
    --------------*/

    #vehicle-purchase-management .vp-features {
        padding: 110px 0;
        background: var(--vp-light-bg);
    }

    #vehicle-purchase-management .vp-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
        gap: 35px;
        margin-top: 60px;
    }

    #vehicle-purchase-management .vp-card {
        height: 100%;
        background: #fff;
        padding: 35px;
        border-radius: 16px;
        text-align: center;
        transition: .3s;
        border: 1px solid #e2e8f0;
    }

        #vehicle-purchase-management .vp-card:hover {
            transform: translateY(-8px);
            border-color: var(--vp-accent);
            box-shadow: 0 15px 35px rgba(0,0,0,.08);
        }

        #vehicle-purchase-management .vp-card i {
            font-size: 38px;
            color: var(--vp-secondary);
            margin-bottom: 20px;
            transition: .3s;
        }

        #vehicle-purchase-management .vp-card:hover i {
            transform: scale(1.2) translateY(-8px);
            color: var(--vp-accent);
        }

    /*---------
        WHY
    ---------*/

    #vehicle-purchase-management .vp-why {
        padding: 110px 0;
    }

    #vehicle-purchase-management .vp-why-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
    }

    #vehicle-purchase-management .vp-why-list {
        list-style: none;
        padding: 0;
    }

        #vehicle-purchase-management .vp-why-list li {
            margin-bottom: 15px;
            color: var(--vp-text);
        }

        #vehicle-purchase-management .vp-why-list i {
            color: var(--vp-secondary);
            margin-right: 8px;
        }

    #vehicle-purchase-management .vp-highlight-card {
        background: linear-gradient(135deg,var(--vp-primary),var(--vp-secondary));
        padding: 45px;
        border-radius: 20px;
        color: #fff;
    }

    #vehicle-purchase-management .vp-gradient-text {
        background: linear-gradient(90deg,var(--vp-primary),var(--vp-secondary));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /*---------
        CTA
    ---------*/

    #vehicle-purchase-management .vp-cta {
        padding: 110px 0;
        text-align: center;
        background: linear-gradient(90deg,var(--vp-primary),var(--vp-secondary));
        color: #fff;
    }

/*-----------------
    RESPONSIVE
-----------------*/

@media (max-width: 992px) {

    #vehicle-purchase-management .vp-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #vehicle-purchase-management .vp-hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    #vehicle-purchase-management .vp-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    #vehicle-purchase-management .vp-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #vehicle-purchase-management .vp-highlight-card {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {

    #vehicle-purchase-management h1 {
        font-size: 34px;
    }

    #vehicle-purchase-management .vp-stats {
        flex-direction: column;
        align-items: center;
    }

    #vehicle-purchase-management .stat-box {
        width: 220px;
    }

    #vehicle-purchase-management .vp-features,
    #vehicle-purchase-management .vp-why,
    #vehicle-purchase-management .vp-cta {
        padding: 80px 0;
    }
}

@media (max-width: 576px) {

    #vehicle-purchase-management h1 {
        font-size: 28px;
    }

    #vehicle-purchase-management .vp-btn-primary,
    #vehicle-purchase-management .vp-btn-outline {
        width: 100%;
        text-align: center;
    }

    #vehicle-purchase-management .vp-hero-buttons {
        flex-direction: column;
    }

    #vehicle-purchase-management .stat-box {
        width: 100%;
        max-width: 260px;
    }
}

/*#endregion*/


/*================================================
                    COMPANY
================================================*/
/*#region ABOUT US*/
#about-us {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

#about-us {
    font-family: 'Poppins', sans-serif;
    color: #222;
    line-height: 1.6;
}

    /*----------
        HERO
    ----------*/
    #about-us .hero {
        position: relative;
        height: 100vh;
        background: linear-gradient(to right, rgba(0,0,0,0.65), rgba(0,0,0,0.35)), url("/Assets/Hero/Company/AboutUs.webp") center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
    }

        #about-us .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background: url("/Assets/Hero/Company/AboutUs.webp") center/cover no-repeat;
            animation: AboutUsheroZoom 20s ease-in-out infinite alternate;
            z-index: 0;
            opacity: 0.15;
        }

    #about-us .hero-content {
        position: relative;
        z-index: 2;
        padding: 50px 60px;
        border-radius: 20px;
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.08);
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        color: #fff;
        max-width: 800px;
    }

    #about-us .hero h1 {
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 700;
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    #about-us .hero p {
        font-size: 1.2rem;
        margin-bottom: 30px;
        opacity: 1;
        color: rgba(255, 255, 255, 0.6);
    }

    #about-us .btn {
        background: linear-gradient(135deg, #00b894, #0984e3);
        color: #fff;
        padding: 14px 40px;
        text-decoration: none;
        border-radius: 40px;
        font-weight: 600;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        box-shadow: 0 10px 30px rgba(0, 184, 148, 0.4);
    }

        #about-us .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(0, 184, 148, 0.6);
        }

    #about-us .hero-tagline {
        font-size: 1.1rem;
        margin-bottom: 25px;
        opacity: 0.9;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    #about-us .hero-highlights {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 30px;
        font-size: 0.95rem;
        opacity: 0.9;
    }

        #about-us .hero-highlights span {
            background: rgba(255,255,255,0.1);
            padding: 10px 14px 8px 14px;
            border-radius: 20px;
            backdrop-filter: blur(5px);
        }

    #about-us .hero-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        margin-bottom: 35px;
        flex-wrap: wrap;
    }

    #about-us .btn-outline {
        border: 2px solid #fff;
        color: #fff;
        padding: 12px 35px;
        border-radius: 40px;
        text-decoration: none;
        transition: 0.3s;
    }

        #about-us .btn-outline:hover {
            background: #fff;
            color: #111;
        }

    #about-us .hero-mini-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
        gap: 35px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

        #about-us .hero-mini-stats .mini-stat {
            text-align: center;
            border: 1px dashed rgba(255, 255, 255, 0.5);
            padding: 10px 20px;
            border-radius: 10px;
        }

        #about-us .hero-mini-stats strong {
            display: block;
            font-size: 2rem;
            font-weight: 700;
        }

        #about-us .hero-mini-stats small {
            font-size: 0.8rem;
            opacity: 0.8;
        }

    /*----------
        ABOUT
    ----------*/
    #about-us .container {
        width: 90%;
        max-width: 1200px;
        margin: auto;
    }

    #about-us .about {
        padding: 80px 0;
    }

        #about-us .about .container {
            display: flex;
            align-items: center;
            gap: 40px;
        }

    #about-us .about-text {
        flex: 1;
    }

    #about-us .about-image {
        flex: 1;
        overflow: hidden;
        border-radius: 15px;
    }

        #about-us .about-image img {
            width: 100%;
            border-radius: 15px;
            transition: all 0.3s ease;
        }

        #about-us .about-image:hover img {
            transform: scale(1.1);
        }

    /*-------------
        MISSION
    -------------*/
    #about-us .mission {
        background: #f8f9fa;
        padding: 80px 0;
    }

    #about-us .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    #about-us .card {
        background: #fff;
        padding: 40px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: 0.3s;
    }

        #about-us .card:hover {
            transform: translateY(-5px);
        }

    /*------------
        VALUES
    ------------*/
    #about-us .values {
        padding: 80px 0;
        text-align: center;
    }

        #about-us .values h2 {
            margin-bottom: 40px;
        }

    #about-us .values-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        width: 90%;
        max-width: 1000px;
        margin: auto;
    }

    #about-us .value-card {
        background: #00b894;
        color: white;
        padding: 40px 20px;
        border-radius: 15px;
        font-weight: 600;
        transition: 0.3s;
    }

        #about-us .value-card:hover {
            background: #019875;
        }

    /*-----------
        STATS
    -----------*/
    #about-us .stats {
        background: #111;
        color: white;
        padding: 60px 0;
    }

    #about-us .stats-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        text-align: center;
        gap: 20px;
    }

    #about-us .stats h3 {
        font-size: 48px;
        font-weight: 700;
    }

    /*--------
        CTA
    --------*/
    #about-us .cta {
        padding: 80px 0;
        text-align: center;
        background: linear-gradient(135deg, #00b894, #0984e3);
        color: white;
    }

    #about-us .btn-light {
        background: white;
        color: #0984e3;
        padding: 12px 30px;
        text-decoration: none;
        border-radius: 30px;
        display: inline-block;
        margin-top: 20px;
        transition: 0.3s;
    }

        #about-us .btn-light:hover {
            background: #f1f1f1;
        }

/*---------------
    ANIMATIONS
---------------*/
@keyframes AboutUsheroZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

/*----------------
    RESPONSIVE
----------------*/
#about-us section {
    padding-left: 20px;
    padding-right: 20px;
}

#about-us img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* LARGE TABLET (992px) */
@media (max-width: 992px) {

    #about-us .hero {
        height: auto;
        min-height: 85vh;
        padding: 80px 20px;
    }

    #about-us .hero-content {
        padding: 40px 30px;
        max-width: 95%;
    }

    #about-us .hero h1 {
        font-size: 2.4rem;
    }

    #about-us .about .container {
        flex-direction: column;
        text-align: center;
    }

    #about-us .about-text {
        order: 1;
    }

    #about-us .about-image {
        order: 2;
    }

    #about-us .grid-2 {
        grid-template-columns: 1fr;
    }

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

    #about-us .stats-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #about-us .stats h3 {
        font-size: 40px;
    }
}

/* TABLET (768px) */
@media (max-width: 768px) {

    #about-us .hero {
        min-height: 75vh;
    }

    #about-us .hero-content {
        padding: 35px 25px;
        border-radius: 15px;
    }

    #about-us .hero h1 {
        font-size: 2rem;
    }

    #about-us .hero-tagline {
        font-size: 1rem;
    }

    #about-us .hero-highlights {
        flex-direction: column;
        gap: 12px;
    }

    #about-us .hero-buttons {
        flex-direction: column;
        gap: 15px;
    }

    #about-us .btn,
    #about-us .btn-outline {
        width: 100%;
        text-align: center;
    }

    #about-us .hero-mini-stats {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    #about-us .card {
        padding: 30px;
    }
}

/* MOBILE (600px) */
@media (max-width: 600px) {

    #about-us .hero {
        min-height: 70vh;
        padding: 60px 15px;
    }

    #about-us .hero-content {
        padding: 25px 18px;
    }

    #about-us .hero h1 {
        font-size: 1.7rem;
    }

    #about-us .hero-tagline {
        font-size: 0.95rem;
    }

    #about-us .hero-mini-stats {
        grid-template-columns: 1fr;
    }

        #about-us .hero-mini-stats strong {
            font-size: 1.6rem;
        }

    #about-us .values-grid {
        grid-template-columns: 1fr;
    }

    #about-us .value-card {
        padding: 25px 15px;
    }

    #about-us .stats h3 {
        font-size: 34px;
    }

    #about-us .cta {
        padding: 60px 20px;
    }
}

/* SMALL MOBILE (400px) */
@media (max-width: 400px) {

    #about-us .hero h1 {
        font-size: 1.4rem;
    }

    #about-us .hero-tagline {
        font-size: 0.85rem;
    }

    #about-us .hero-mini-stats strong {
        font-size: 1.4rem;
    }

    #about-us .stats h3 {
        font-size: 28px;
    }
}

/*#endregion*/

/*#region LIFE AT RAMSYS*/
#life-ramsys {
    font-family: 'Poppins', sans-serif;
    color: #222;
    overflow: hidden;
}

    /*----------
        HERO
    ----------*/
    #life-ramsys .hero {
        position: relative;
        min-height: 100vh;
        background: linear-gradient(to right, rgba(0,0,0,0.65), rgba(0,0,0,0.64)), url('/Assets/Hero/Company/LifeAtRamsys.webp') center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 100px 20px;
    }

    #life-ramsys .hero-content {
        max-width: 800px;
        color: #fff;
        animation: fadeInUp 1s ease forwards;
    }

    #life-ramsys .hero h1 {
        font-size: clamp(2.2rem, 5vw, 4rem);
        font-weight: 700;
        margin-bottom: 20px;
    }

    #life-ramsys .hero p {
        font-size: clamp(1rem, 2vw, 1.3rem);
        margin-bottom: 30px;
        opacity: 0.95;
    }

    #life-ramsys .hero-highlights {
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 35px;
    }

        #life-ramsys .hero-highlights span {
            background: rgba(255,255,255,0.15);
            backdrop-filter: blur(8px);
            padding: 8px 16px;
            border-radius: 50px;
            font-size: 0.9rem;
            transition: 0.3s ease;
        }

            #life-ramsys .hero-highlights span:hover {
                background: rgba(255,255,255,0.3);
                transform: translateY(-3px);
            }

    #life-ramsys .btn {
        background: linear-gradient(135deg, #00b894, #0984e3);
        color: #fff;
        padding: 14px 40px;
        border-radius: 40px;
        text-decoration: none;
        font-weight: 500;
        transition: 0.3s ease;
        display: inline-block;
    }

        #life-ramsys .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.3);
        }

    /*-------------
        CULTURE
    -------------*/
    #life-ramsys .culture {
        padding: 100px 20px;
    }

    #life-ramsys .grid-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 60px;
        align-items: center;
        max-width: 1200px;
        margin: auto;
    }

    #life-ramsys .culture .img-div {
        overflow: hidden;
        border-radius: 20px;
    }

    #life-ramsys .culture img {
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        transition: 0.4s ease;
    }

        #life-ramsys .culture img:hover {
            transform: scale(1.03);
        }

    #life-ramsys .culture-list {
        margin-top: 20px;
        padding-left: 20px;
        line-height: 1.8;
    }

    /*-------------
        BENEFITS
    -------------*/
    #life-ramsys .benefits {
        padding: 100px 20px;
        background: #f8f9fa;
        text-align: center;
    }

        #life-ramsys .benefits h2 {
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

    #life-ramsys .benefits-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
        margin-top: 50px;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }

    #life-ramsys .benefit-card {
        height: 100%;
        background: #fff;
        padding: 40px 30px;
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.06);
        transition: 0.4s ease;
    }

        #life-ramsys .benefit-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        }

    /*----------------
        TEAM VIBES
    ----------------*/
    #life-ramsys .team-vibes {
        padding: 100px 20px;
        text-align: center;
        background: #fff;
    }

        #life-ramsys .team-vibes h2 {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

    /*--------
        CTA
    --------*/
    #life-ramsys .cta {
        padding: 100px 20px;
        text-align: center;
        background: linear-gradient(135deg, #00b894, #0984e3);
        color: #fff;
    }

    #life-ramsys .btn-light {
        background: #fff;
        color: #0984e3;
        padding: 14px 35px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 500;
        transition: 0.3s ease;
    }

        #life-ramsys .btn-light:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

/*----------------
    RESPONSIVE
----------------*/

@media (max-width: 1200px) {
    #life-ramsys .benefits-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {

    #life-ramsys .grid-2 {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    #life-ramsys .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #life-ramsys .hero {
        min-height: 80vh;
    }
}

@media (max-width: 600px) {

    #life-ramsys .hero {
        min-height: 70vh;
        padding: 80px 15px;
    }

    #life-ramsys .hero-highlights {
        flex-direction: column;
        gap: 10px;
    }

    #life-ramsys .benefits-grid {
        grid-template-columns: 1fr;
    }

    #life-ramsys .benefits h2,
    #life-ramsys .team-vibes h2 {
        font-size: 1.8rem;
    }
}

/*---------------
    ANIMATION
---------------*/

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

/*#endregion*/

/*#region NEWS AND BLOG*/
#news-page {
    font-family: 'Poppins', sans-serif;
    color: #222;
}

    /*---------
        HERO
    ---------*/
    #news-page .news-hero {
        position: relative;
        min-height: 70vh;
        background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.4)), url('/Assets/Hero/Company/NewsAndBlog.webp') center/cover no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 80px 20px;
    }

    #news-page .hero-content {
        color: #fff;
        max-width: 700px;
    }

        #news-page .hero-content h1 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 700;
        }

        #news-page .hero-content p {
            font-size: 1.2rem;
            margin-top: 15px;
        }

    /*------------------
        NEWS SECTION
    ------------------*/
    #news-page .news-section {
        padding: 100px 20px;
        background: #f8f9fa;
    }

        #news-page .news-section h2 {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 50px;
        }

    #news-page .news-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        max-width: 1200px;
        margin: auto;
    }

    /*----------
        CARD
    ----------*/
    #news-page .news-card-img {
        height: 180px;
        object-fit: cover;
        width: 100%;
    }

    #news-page .news-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    #news-page .news-description {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        opacity: 0.8;
        overflow: hidden;
    }

    #news-page .card {
        transition: 0.3s ease;
    }

        #news-page .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 992px) {
    #news-page .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    #news-page .news-hero {
        min-height: 50vh;
    }

    #news-page .news-grid {
        grid-template-columns: 1fr;
    }

    #news-page .news-section h2 {
        font-size: 1.8rem;
    }
}
/*#endregion*/

/*#region OUR TECHNOLOGIES */
#our-technologies {
    --ot-primary: #2563eb;
    --ot-secondary: #7c3aed;
    --ot-dark: #0f172a;
    --ot-text: #475569;
    --ot-bg: #f8fafc;
    background: var(--ot-bg);
}

    /*----------
        HERO
    ----------*/
    #our-technologies .ot-hero {
        position: relative;
        height: 75vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url('/Assets/Hero/Company/OurTechnologies.webp') center/cover no-repeat;
        overflow: hidden;
    }

    #our-technologies .ot-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, rgba(37,99,235,.75), rgba(124,58,237,.75) );
    }

    #our-technologies .ot-hero-content {
        position: relative;
        z-index: 2;
        color: #fff;
        max-width: 800px;
        text-align: center;
    }

    #our-technologies .ot-hero h1 {
        font-size: clamp(2.2rem, 4vw, 3.2rem);
        font-weight: 700;
    }

        #our-technologies .ot-hero h1 span {
            background: linear-gradient(90deg, #ffffff, #facc15);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    #our-technologies .ot-hero p {
        margin-top: 20px;
        font-size: 1.1rem;
    }

    /*--------------
        SECTION
    --------------*/
    #our-technologies .ot-section {
        padding: 80px 20px;
    }

    #our-technologies .ot-category {
        margin-bottom: 70px;
    }

        #our-technologies .ot-category h2 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 35px;
            text-align: center;
            background: linear-gradient( 90deg, var(--ot-primary), var(--ot-secondary) );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

    /*----------
        GRID
    ----------*/
    #our-technologies .ot-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 22px;
    }

    /*----------
        CARD
    ----------*/
    #our-technologies .ot-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        padding: 25px 20px;
        border-radius: 16px;
        text-align: center;
        font-weight: 600;
        color: var(--ot-dark);
        box-shadow: 0 8px 25px rgba(0,0,0,.06);
        transition: all .35s ease;
        cursor: pointer;
        border: 1px solid rgba(0,0,0,.04);
    }

        #our-technologies .ot-card i {
            font-size: 42px;
            margin-bottom: 14px;
            transition: .3s ease;
            display: block;
            font-size: 30px;
            margin-bottom: 12px;
            color: var(--ot-primary);
            transition: .3s ease;
        }

        #our-technologies .ot-card:hover {
            transform: translateY(-10px);
            background: linear-gradient( 135deg, var(--ot-primary), var(--ot-secondary) );
            color: #fff;
            box-shadow: 0 20px 40px rgba(0,0,0,.18);
        }

            #our-technologies .ot-card:hover i {
                color: #fff;
            }

/*----------------
    RESPONSIVE
----------------*/

@media (max-width: 992px) {
    #our-technologies .ot-hero {
        height: 65vh;
    }
}

@media (max-width: 768px) {
    #our-technologies .ot-hero {
        height: 60vh;
        padding: 20px;
    }

    #our-technologies .ot-section {
        padding: 60px 15px;
    }

    #our-technologies .ot-hero h1 {
        font-size: 2rem;
    }
}

/*#endregion*/

/*#region CAREERS*/
#careers {
    background: linear-gradient(to bottom, #f8fafc, #eef2ff);
    overflow: hidden;
}

    /*---------
        HERO
    ---------*/
    #careers .career-hero {
        position: relative;
        background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
        background-size: 300% 300%;
        animation: CareersgradientMove 8s ease infinite;
        padding: 140px 20px;
        color: #fff;
        overflow: hidden;
    }

        #careers .career-hero::before,
        #careers .career-hero::after {
            content: "";
            position: absolute;
            width: 400px;
            height: 400px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
            filter: blur(100px);
        }

        #careers .career-hero::before {
            top: -100px;
            left: -100px;
        }

        #careers .career-hero::after {
            bottom: -100px;
            right: -100px;
        }

        #careers .career-hero h1 {
            font-size: 3.5rem;
            font-weight: 800;
            letter-spacing: 1px;
        }

        #careers .career-hero p {
            font-size: 1.2rem;
            margin-top: 15px;
        }

    /*-----------------
        JOB SECTION
    -----------------*/
    #careers .career-section {
        padding: 100px 0;
    }

    /*----------
        CARD
    ----------*/
    #careers .career-card {
        position: relative;
        background: rgba(255,255,255,0.9);
        backdrop-filter: blur(12px);
        padding: 30px;
        border-radius: 20px;
        box-shadow: 0 15px 40px rgba(0,0,0,.08);
        transition: all .4s ease;
        height: 100%;
        overflow: hidden;
    }

        #careers .career-card::before {
            pointer-events: none;
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 20px;
            padding: 3px;
            background: linear-gradient(135deg, #2563eb, #7c3aed, #ec4899);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: .4s ease;
        }

        #careers .career-card:hover::before {
            opacity: 1;
        }

        #careers .career-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 25px 60px rgba(0,0,0,.15);
        }

        #careers .career-card h5 {
            font-weight: 700;
            font-size: 1.3rem;
            margin-bottom: 8px;
        }

        #careers .career-card .dept {
            background: linear-gradient(90deg, #7c3aed, #2563eb);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 600;
            margin-bottom: 10px;
        }

        #careers .career-card p {
            color: #475569;
            font-size: 0.95rem;
        }

        #careers .career-card .btn-primary {
            background: linear-gradient(90deg, #2563eb, #7c3aed);
            border: none;
            border-radius: 30px;
            padding: 10px 25px;
            font-weight: 600;
            transition: .3s ease;
        }

            #careers .career-card .btn-primary:hover {
                background: linear-gradient(90deg, #7c3aed, #ec4899);
                transform: scale(1.05);
                box-shadow: 0 10px 25px rgba(124,58,237,.4);
            }

    /*-----------
        MODAL
    -----------*/
    #careers .modal-content {
        border-radius: 20px;
        border: none;
        box-shadow: 0 20px 50px rgba(0,0,0,.2);
    }

    #careers .modal-header {
        background: linear-gradient(90deg, #2563eb, #7c3aed);
        color: #fff;
        border-radius: 20px 20px 0 0;
    }

    #careers .modal .btn-success {
        background: linear-gradient(90deg, #10b981, #059669);
        border: none;
        border-radius: 30px;
        padding: 10px 25px;
    }

        #careers .modal .btn-success:hover {
            transform: scale(1.05);
            box-shadow: 0 10px 20px rgba(16,185,129,.4);
        }

/*----------------
    RESPONSIVE
----------------*/
@media (max-width: 768px) {
    #careers .career-hero h1 {
        font-size: 2.2rem;
    }

    #careers .career-hero {
        padding: 100px 20px;
    }
}

/*---------------
    ANIMATIONS
---------------*/
@keyframes CareersgradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*#endregion*/