/* ========================================
   CSS VARIABLES & DESIGN TOKENS
   ======================================== */
:root {
    /* Solar System Colors */
    --system-color-dark: oklch(0% 0 0);
    --system-color-light: oklch(100% 0 0);
    --system-color-logo: oklch(60.07% 0.241 28.73 / 80%);
    --system-color-red-100: #b125f025;
    --system-color-red-200: #8d11ee;
    --system-color-red-300: #4b25f0;
    --system-color-theme-paths: var(--system-color-red-100) var(--system-color-red-300);
    --system-color-theme-planets: var(--system-color-red-200) var(--system-color-red-200) var(--system-color-red-200) var(--system-color-red-300);
  
    /* Planet Radius */
    --planet-radius-mars: 33.895px;
    --planet-radius-earth: 63.71px;
    --planet-radius-venus: 60.518px;
    --planet-radius-mercury: 24.397px;
    --star-radius-sun: 174.085px;
  
    /* Planet Trajectories */
    --planet-trajectory-mars: 446.085px;
    --planet-trajectory-earth: 332.085px;
    --planet-trajectory-venus: 257.085px;
    --planet-trajectory-mercury: 203.085px;
  
    /* System Margins & Units */
    --system-margin-mars: 292px;
    --system-margin-earth: 35px;
    --system-margin-venus: 15px;
    --system-margin-mercury: 38px;
    --system-border-width: min(2px, 0.4dvmin);
}

/* ========================================
   ANIMATIONS & KEYFRAMES
   ======================================== */
@keyframes gradient-shift {
    0%, 100% { background-position: 0% 50%;}
    50% { background-position: 100% 50%;}
}
@keyframes brands-scroll {
    0% { transform: translateX(0);}
    100% { transform: translateX(-50%);}
}
@keyframes driftX {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@keyframes moveTextRight {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(100%);}
}
@keyframes moveTextLeft {
    0% { transform: translateX(100%);}
    100% { transform: translateX(-100%);}
}
@keyframes rotate-around-center {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes slideUp {
    0% { opacity: 0; transform: translateY(40px);}
    100% { opacity: 1; transform: translateY(0);}
} 
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
@keyframes progressFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.infinite-scroller {
    flex-wrap: nowrap;
    overflow: hidden;
}
.infinite-scroller.fading {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.infinite-scroller-group {
    --duration: 120s;
    animation: driftX var(--duration) linear infinite;
    animation-direction: normal;
    display: flex;
    flex-shrink: 0;
    padding: 26px 0;
    justify-content: space-around;
    min-width: 100%;
    will-change: transform;
    backface-visibility: hidden;
}
.infinite-scroller-group .scroll-item {
    align-items: center;
    display: flex;
    row-gap: 1rem;
    flex-direction: column;
}
.infinite-scroller-group .scroll-item .logo {
    filter: grayscale(1);
    opacity: 0.8;
    transition: var(--transition-base);
}
.infinite-scroller-group .scroll-item:hover .logo {
    filter: grayscale(0);
}
.infinite-scroller-group .scroll-item .label {
    font-weight: 500;
}
.infinite-scroller-group p {
    font-size: var(--font-size-xxl);
    letter-spacing: 0.3px;
}

/* ========================================
   UTILITY COMPONENTS
   ======================================== */

/* Infinite Scroller */
.infinite-scroller {
    flex-wrap: nowrap;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.infinite-scroller.fading {
    mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
    -webkit-mask: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}

.infinite-scroller-group {
    display: flex;
    flex-wrap: nowrap;
    animation: brands-scroll 20s linear infinite;
}

.infinite-scroller-group .scroll-item {
    flex-shrink: 0;
    margin-right: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infinite-scroller-group .scroll-item .logo {
    max-width: 120px;
    height: auto;
    filter: grayscale(1);
    opacity: 0.6;
    transition: var(--transition-base);
}

.infinite-scroller-group .scroll-item:hover .logo {
    filter: grayscale(0);
    opacity: 1;
}

.infinite-scroller-group .scroll-item .label {
    margin-left: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}
.infinite-scroller-group p {
    font-size: var(--font-size-xxl);
    letter-spacing: 0.3px;
}

* {
    -webkit-tap-highlight-color: transparent;
}   
*:focus-visible {
    outline: none;
}
*:focus-visible {
    outline: none;
}
/* ========================================
   BRANDS SECTION
   ======================================== */
.brands-grid {
    margin-bottom: 3rem;
    width: 100%;
    border-top: 1px solid #282828;
    border-bottom: 1px solid #282828;
    .row_gap_m {
        --horizontal-layout-gutter: 0px;
        width: calc(100% - 2rem);
        margin-left: 16px;
        margin-right: 16px;
    }
    [class*="col"] {
        background: rgba(255, 255, 255, 0.02);
        border-right: 1px solid #282828;
    }
    .brand-card {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: var(--transition-base);
        position: relative;
        overflow: hidden;
        min-height: 300px;
        height: 100%;
        width: 100%;
    }
    
    .brand-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity 0.4s ease;
        z-index: 0;
    } 
    .brand-card:hover::before {
        opacity: 1;
    }
    
    .brand-card:hover .brand-image {
        filter: grayscale(0);
        opacity: 1;
        transform: translateY(-20px) scale(0.9);
    }
    
    .brand-card:hover .brand-info {
        transform: translateY(0);
        opacity: 1;
    }
    
    .brand-card .brand-logo-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 1;
        padding: var(--spacing-lg);
    }
    
    .brand-card .brand-image {
        filter: grayscale(1);
        opacity: 0.7;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        max-width: 180px;
        max-height: 80px;
        width: auto;
        height: auto;
        object-fit: contain;
        position: relative;
        z-index: 2;
    }
    
    .brand-card .brand-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 1.5rem;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        transform: translateY(100%);
        opacity: 0;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 3;
    }
    .brand-card .brand-title {
        font-size: 2rem;
        font-weight: 600;
    }
    .brand-card .brand-description {
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.85);
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    /* Company-specific hover colors */
    .brand-card.company-deloitte::before {
        background: linear-gradient(135deg, rgba(0, 191, 166, 0.15) 0%, rgba(0, 191, 166, 0.35) 100%);
    }
    
    .brand-card.company-deloitte:hover .brand-info {
        background: linear-gradient(180deg, transparent, rgb(0 191 166 / 9%));
    }
    
    .brand-card.company-larco::before {
        background: linear-gradient(135deg, rgb(162 127 19 / 26%) 0%, rgb(208 169 11 / 58%) 137%);
    }
    
    .brand-card.company-larco:hover .brand-info {
        background: linear-gradient(180deg, transparent, rgba(208, 169, 11, 0.253));
    }
    
    .brand-card.company-cosmote::before {
        background: linear-gradient(135deg, rgba(0, 112, 192, 0.15) 0%, rgba(0, 112, 192, 0.35) 100%);
    }
    
    .brand-card.company-cosmote:hover .brand-info {
        background: linear-gradient(180deg, transparent, rgba(0, 76, 131, 0.171));
    }
    
    .brand-card.company-elna::before {
        background: linear-gradient(135deg, rgba(65, 75, 92, 0.15) 0%, rgba(4, 0, 220, 0.35) 100%);
    }
    
    .brand-card.company-elna:hover .brand-info {
        background: linear-gradient(180deg, transparent, rgba(2, 61, 255, 0.226));
    } 
}

/* ========================================
   HOMEPAGE SECTIONS
   ======================================== */
.carousel-section[data-section="home"] {
    min-height: calc(100svh - 100px);
    display: flex;
    align-items: center;
    .left-content {
        margin: 0% 20% 0% 0%;
    } 
    .carousel-container {
        position: relative;
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 2rem;
        cursor: grab;
        user-select: none;
         
        &:active {
            cursor: grabbing;
        }
        &.dragging {
             cursor: grabbing;
        }
    }
    .carousel-slides {
        position: relative;
        width: 100%;
        height: auto;
        min-height: calc(100svh - 100px);
    }
    .carousel-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: flex;
        flex-direction: column;
        pointer-events: none;
        z-index: 0;
    }
    .carousel-slide.active {
        opacity: 1;
        pointer-events: auto;
        z-index: 1;
    }
    .slide-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: calc(100svh - 100px);
    }
    .slide-top {
        width: 100%;
        max-width: 1440px;
        min-height: 45svh;
        align-content: center;
        margin: 0 auto;
    }
    .carousel-slide .heading-lg,
    .carousel-slide .paragraph-md {
        transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 0;
        transform: translateX(-50px);
    }
    .carousel-section .btn i {
        margin-left: var(--space-3, 8px);
        transition: all 0.3s ease;
    }
    .carousel-section .btn:hover i {
        transform: translateX(5px);
    }
    .slide-bottom {
        min-height: 450px;
        overflow: hidden;
        border-radius: 2rem;
    }
    .slide-image {
        width: 100%;
        height: 100%;
        min-height: 450px;
        object-fit: cover;
        pointer-events: none;
        transition: all 0.6s ease;
    }

    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    .carousel-slide:not(.active) .heading-lg,
    .carousel-slide:not(.active) .paragraph-md,
    .carousel-slide:not(.active) .btn--pill {
        opacity: 0;
        transform: translateX(-50px);
    }
    .carousel-slide.active .heading-lg,
    .carousel-slide.active .paragraph-md,
    .carousel-slide.active .btn--pill {
         opacity: 1;
         transform: translateX(0);
    }
}
.carousel-nav {
    position: absolute;
    bottom: 3.5rem;
    right: initial;
    left: 0px;
    z-index: 10;
    display: flex;
    background: var(--color-bg);
    border-radius: 0 30px 30px 0;
    flex-direction: column;
    gap: 0;
    align-items: center;
    .carousel-btn {
        background: transparent;
        color: var(--color-text-secondary);
        border: none;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        font-size: var(--font-size-lg, 16px);    
        overflow: visible;
        cursor: pointer;
        transition: var(--transition-base, 0.25s ease-in-out);
        position: relative;
        i {display: block;transition: var(--transition-base, 0.25s ease-in-out);}
    }
    .carousel-btn {
        -webkit-tap-highlight-color: transparent; /* or rgba(0,0,0,0) */
      }
    .carousel-btn:hover {
        color: var(--color-brand-red);
        &.prev i {
            transform: translateX(-2px);
        }
        &.next i {
            transform: translateX(2px);
        }
    }
    .carousel-btn.prev {
        position: relative;
    }
    .carousel-btn.prev::before, 
    .carousel-btn.next::after {
        content: "";
        position: absolute;
        left: 0px;
        width: 28px;
        height: 100%;
    } 
    .carousel-btn.prev::before {
        top: -100%;
        border-radius: 0 0 0 20px;
        box-shadow: 0 20px 0 0 var(--color-bg);
    }
    .carousel-btn.next {
        position: relative;
    }
    .carousel-btn.next::after {
        bottom: -100%;
        border-radius: 20px 0 0 0;
        box-shadow: 0 -20px 0 0 var(--color-bg);
    }
    .carousel-dots {
        display: flex;
        gap: 0.5rem;
        
        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgb(255 255 255 / 13%);
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            
            &.active {
                background: #fff;
            }

            &:hover {
                background: rgba(255, 255, 255, 0.3);
            }
        }
    }
}
section[data-section="brands"] {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    margin-left: -40px;
    margin-right: -40px;
    .section-inner {
        position: relative;
        margin-bottom: -100px;
        padding-bottom: 100px;
        padding-top: 4vw;
        background: linear-gradient(354deg, #0a0a0a 34%, #00000000);
    } 
    .brands-slogan .heading-lg {
        max-width: 800px;
    }
    .brands-slogan .paragraph-md {
        max-width: 600px;
    }
    .brand-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem;
        background: transparent;
        border-radius: 16px;
        opacity: 0.5;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .brand-logo:hover {
        opacity: 1;
    }
    .brand-logo .brand-image {
        width: 48px;
        height: 48px;
        margin-bottom: 1rem;
        opacity: 0.9;
        filter: brightness(0) invert(1);
        transition: all 0.3s ease;
    }
    .brand-logo span {
        color: #ffffff;
        font-weight: 500;
        font-size: 1rem;
        text-align: center;
        opacity: 0.9;
    }
    .brands-divider  {
        --e-transform-rotateZ: -2.07deg;
        border-radius: 36px;
        transform: perspective(var(--e-transform-perspective, 0)) rotate(var(--e-transform-rotateZ, 0)) rotateX(var(--e-transform-rotateX, 0)) rotateY(var(--e-transform-rotateY, 0)) translate(var(--e-transform-translate, 0)) translateX(var(--e-transform-translateX, 0)) translateY(var(--e-transform-translateY, 0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX, 0)) skewY(var(--e-transform-skewY, 0));
        transform-origin: var(--e-transform-origin-y) var(--e-transform-origin-x);
        overflow: hidden;
        margin-bottom: 85px;
    }
    .divider-angle {
        --divider-border-style: solid;
        --divider-border-width: 180px;
        width: 100%;
        border-block-start: var(--divider-border-width) var(--divider-border-style) #0a0a0a;
    }
}
.custom-text_green-gradient {
    background: linear-gradient(135deg, #119eee, #1dd3ba, #119eee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    background-size: 200% 200%;
    animation: gradient-shift 3s ease-in-out infinite;
}
.blog-cards {
    row-gap: 1.5rem;
}
/* ========================================
   BENTO CARD COMPONENTS
   ======================================== */
.bento-section {
    --bento-padding: 4rem 0;
    --bento-grid-gap: 1.5rem;
    --bento-card-radius: 16px;
    --bento-card-min-height: 200px;
    --bento-card-padding: 64px 40px;
    --bento-transition: all 0.3s ease;
    padding: var(--bento-padding);
    position: relative;
    overflow: hidden;

    .bento-header {
        h2, .heading-md {
            margin: 0;
        }
        .row {
            row-gap: 1rem;
        }
    } 
}
.bento-grid {
    display: grid;
    gap: var(--bento-grid-gap);
    margin-bottom: 3rem;
}
.bento-grid--services {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: 
        "card1 card2 card3"
        "card1 card4 card3"
        "card6 card7 card8"
        "card9 card9 card10";
    min-height: 1000px;
    gap: 1.5rem;

    .bento-card:nth-child(1) { grid-area: card1; }
    .bento-card:nth-child(2) { grid-area: card2; }
    .bento-card:nth-child(3) { grid-area: card3; }
    .bento-card:nth-child(4) { grid-area: card4; }
    .bento-card:nth-child(6) { grid-area: card6; }
    .bento-card:nth-child(7) { grid-area: card7; }
    .bento-card:nth-child(8) { grid-area: card8; }
    .bento-card:nth-child(9) { grid-area: card9; }
    .bento-card:nth-child(10) { grid-area: card10; }

}
 
.bento-grid[data-grid="modules"] {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
        "card1 card2 card3"
        "card4 card5 card3"
        "card6 card7 card8";
    gap: 1.5rem;
    .bento-card:nth-child(1) { grid-area: card1; }
    .bento-card:nth-child(2) { grid-area: card2; }
    .bento-card:nth-child(3) { grid-area: card3; }
    .bento-card:nth-child(4) { grid-area: card4; }
    .bento-card:nth-child(5) { grid-area: card5; }
    .bento-card:nth-child(6) { grid-area: card6; }
    .bento-card:nth-child(7) { grid-area: card7; }
    .bento-card:nth-child(8) { grid-area: card8; }
}
@media (max-width:1200px) { 
    .bento-grid--services {
        grid-template-columns: repeat(1, 1fr) !important;
        grid-template-areas: 
            "card1"
            "card2"
            "card3"
            "card4"
            "card5"
            "card6"
            "card7"
            "card8"
            "card9"
            "card10" !important;
        gap: 1rem;
        min-height: auto !important;
    }
    
    .bento-grid--services .bento-card {
        grid-area: unset !important;
        width: 100% !important;
    }
}
/* Tablet Override for Services Grid - 2 cards max */
@media (max-width: 990px) {
    .bento-grid--services {
        grid-template-columns: repeat(1, 1fr) !important;
        grid-template-areas: 
            "card1"
            "card2"
            "card3"
            "card4"
            "card5"
            "card6"
            "card7"
            "card8"
            "card9"
            "card10" !important;
        gap: 1rem;
        min-height: auto !important;
    }
    
    .bento-grid--services .bento-card {
        grid-area: unset !important;
        width: 100% !important;
    }
}

/* Mobile Override for Services Grid - 1 card */
@media (max-width: 768px) {
    .bento-grid--services {
        grid-template-columns: 1fr !important;
        grid-template-areas: none !important;
        gap: 1rem !important;
        min-height: auto !important;
    }
    .bento-grid--services .bento-card {
        grid-area: unset !important;
        width: 100% !important;
    }
}
.bento-grid[data-grid="approach"] { 
    display: grid;
    gap: var(--space-fluid-md);
    grid-template-areas: 
        "card1 card1 card2"
        "card1 card1 card3"
        "card4 card5 card6";
    grid-template-columns: repeat(3, 1fr);
    min-height: 800px;
    
    .bento-card:nth-child(1) { grid-area: card1; }
    .bento-card:nth-child(2) { grid-area: card2; }
    .bento-card:nth-child(3) { grid-area: card3; }
    .bento-card:nth-child(4) { grid-area: card4; }
    .bento-card:nth-child(5) { grid-area: card5; }
    .bento-card:nth-child(6) { grid-area: card6; }
}

@media (max-width: 768px) {
    .bento-grid[data-grid="approach"] {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "card1"
            "card2"
            "card3"
            "card4"
            "card5"
            "card6";
        min-height: 1200px;
        gap: var(--space-fluid-sm);
    }
}
@media (max-width:640px) { 
    .bento-section {
        --bento-card-padding: 44px 26px;
    }
}
.bento-card {
    position: relative;
    border-radius: var(--bento-card-radius);
    min-height: var(--bento-card-min-height);
    transition: var(--bento-transition);
    overflow: hidden;
    .action-btn {
        position: absolute;
        bottom: 0;
        right: 0px;
        display: flex;
        z-index: 1;
        background: #121212;
        border-radius: 24px 0 0 0;
        padding: 12px 1px 1px 12px;
        width: 48px;
        height: 48px;
        z-index: 2;
        align-items: center;
        justify-content: center;
        a {
            width: 100%;
            height: 100%;
            background: rgb(91 91 91 / 30%);
            aspect-ratio: 1 / 1;
            justify-content: center;
            padding: 0;
            i {
                font-size: 16px;
                transition: all 0.3s ease;
            }
        }
        &:hover {
            a {
                background: #2b2b2b;
            }
            i {
                transform: rotate(4deg);
            }
        }
        &::before, 
        &::after {
            content: "";
            z-index: -1;
            position: absolute;
            right: 0px;
            width: 28px;
            height: 100%;
        }  
        &::before {
            top: -100%;
            border-radius: 0;
            border-bottom-right-radius: 20px;
            box-shadow: 0 20px 0 0 #121212;
        }
        &::after {
            bottom: 0%;
            z-index: 0;
            right: 48px;
            border-radius: 0;
            border-bottom-right-radius: 20px;
            box-shadow: 0 20px 0 0 #121212;
        }
    } 
    .card-title-md {
        margin-bottom: 0.75rem;
        opacity: 1;
    }
    .paragraph-sm {
        opacity: 0.9;
        margin: 0;
    }     
   
}
.bento-card .card-content {
    position: relative;
    z-index: 2;
    padding: var(--bento-card-padding);
}
.card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
}

/* Stats item in bento cards */
.stats-item {
    margin-top: 1rem;
    text-align: center;
}

.stats-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.stats-label {
    display: block;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.25rem;
} 
/* Stats Highlight Component */
.stats-highlight {
    margin-top: 1rem;
    text-align: center;
    .number {
        display: block;
        font-size: 2.5rem;
        font-weight: 800;
        color: #ffffff;
        line-height: 1;
        margin-bottom: 0.25rem;
    }
    .label {
        display: block;
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    } 
}

.section-header .row {
    row-gap: 1rem;
}
/* ===== ABOUT US SECTION ===== */
section[data-section="about"] {
    overflow: hidden;
    .about-section {
        padding: 8rem 0;
        background: #0a0a0a;
        position: relative;
        overflow: hidden;
        min-height: 100vh;
    }
    .about-layout {
        padding-bottom: 128px;
        overflow: hidden;
    }
    .section-header .section-subtitle-md {
        color: #848484;
        margin-bottom: 1.5rem;
    }
    .section-title {
        font-size: 3.5rem;
        line-height: 1.1;
    }
    .visual-container {
        position: relative;
        width: 100%;
        height: 100%;
    }
    .content-body .paragraph-md {
        color: var(--text-secondary);
        margin-bottom: 1.5rem;
        text-align: justify;
        font-weight: 300;
        letter-spacing: 0.3px;
    }
}

section[data-section="services"] {
    position: relative;
    overflow: hidden;
    border-radius: 36px;
    .section-inner {
        background: #0a0a0a;
        margin-top: -100px;
        padding-bottom: 100px;
        border-radius: 36px;
    }
    .scroll-item .logo {
        max-width: 100px;
        opacity: 0.5;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .angle-shape {
        --divider-border-style: solid;
        --divider-border-width: 180px;
        width: 100%;
        border-block-start: var(--divider-border-width) var(--divider-border-style) #0a0a0a;
        --e-transform-rotateZ: 2.00deg;
        border-radius: 36px;
        transform: perspective(var(--e-transform-perspective, 0)) rotate(var(--e-transform-rotateZ, 0)) rotateX(var(--e-transform-rotateX, 0)) rotateY(var(--e-transform-rotateY, 0)) translate(var(--e-transform-translate, 0)) translateX(var(--e-transform-translateX, 0)) translateY(var(--e-transform-translateY, 0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX, 0)) skewY(var(--e-transform-skewY, 0));
        transform-origin: var(--e-transform-origin-y) var(--e-transform-origin-x);
        overflow: hidden;
        margin-top: 36px;
        z-index: 0;
    }
    .angle-shape::before {
        --divider-border-style: solid;
        --divider-border-width: 180px;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        border-block-start: var(--divider-border-width) var(--divider-border-style) #0a0a0a;
    }
}

/* ========================================
   FEATURE ICONS & UTILITIES
   ======================================== */
.feature-icon {
    background: #0a0a0a;
    position: relative;
    display: flex;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    i {
        font-size: 24px;
    } 
}
.card-icon.feature-icon::after {
    position: absolute;
    content: '';
    top: -7px;
    left: 0;
    width: 15px;
    height: 16px;
    filter: blur(9px);
    background: #ff4040;
    animation: rotate-around-center 10s ease-in-out infinite;
    z-index: 0;
    transform-origin: 32px 40px;
}
.card-icon.feature-icon::before {
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    width: 39px;
    height: 24px;
    filter: blur(15px);
    background: #f53fff3d;
    animation: rotate-around-center 10s ease-in-out infinite;
    z-index: 0;
    transform-origin: 32px 40px;
}

/* ========================================
   SCROLL & NAVIGATION UTILITIES
   ======================================== */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
    transform: translateY(120px);
    pointer-events: none;
    
    &.visible {
        transform: translateY(0);
        pointer-events: auto;
    }
    
    /* Active state for touch feedback */
    &.visible:active {
        transform: translateY(-2px) scale(0.95);
        transition: transform 0.1s ease;
    }
    
    /* Progress ring indicator */
    &::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: rgba(255, 255, 255, 0.6);
        border-right-color: rgba(255, 255, 255, 0.4);
        opacity: 0;
        transition: opacity 0.3s ease;
        animation: spin 2s linear infinite;
    }
    
    i {
        color: #ffffff;
        font-size: 1.35rem;
        transition: transform 0.3s ease;
    }
    
    a {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }
}

/* Hover effects only for devices that support hover (non-touch) */
@media (hover: hover) and (pointer: fine) {
    .scroll-to-top.visible:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 15px 35px rgba(239, 68, 68, 0.45);
        background: linear-gradient(135deg, #dc2626, #b91c1c);
    }
    
    .scroll-to-top.visible:hover::before {
        opacity: 1;
    }
    
    .scroll-to-top.visible:hover i {
        transform: translateY(-3px);
    }
    
    .scroll-to-top.visible:active {
        transform: translateY(-2px) scale(0.98);
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scroll-to-top {
        width: 48px;
        height: 48px;
        bottom: 1.5rem;
        right: 1.5rem;
        
        i {
            font-size: 1.2rem;
        }
    }
}

@media (max-width: 480px) {
    .scroll-to-top {
        width: 44px;
        height: 44px;
        bottom: 1rem;
        right: 1rem;
    }
}

/* ========================================
   ANGLED TEXT SECTIONS
   ======================================== */
.angled-text-section {
    width: 100vw;
    margin-left: -40px;
    margin-right: -40px;
    overflow: hidden;
    position: relative;
    padding: 2rem 0;
    .angled-text-row {
        position: relative;
        height: 120px;
        overflow: hidden;
        transform: skewY(-2deg);
    }
    .angled-text-row  {
        transform: skewY(2deg);
        margin-bottom: 0;
        backdrop-filter: blur(5px);
        background: linear-gradient(45deg, #000000, #222222);
    }
    .angled-text-content {
        display: flex;
        align-items: center;
        height: 100%;
        white-space: nowrap;
        font-size: clamp(2rem, 2.5vw, 3.5rem);
        font-weight: 300;
        text-align: center;
        justify-content: center;
        color: #ffffff;
        height: 120px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }  
}
.text-card {
    .paragraph-sm {
        font-weight: 300;
        letter-spacing: 0.3px;
        line-height: 2;
    }
}
.form {
    .form-row {
        margin-bottom: 1.5rem;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .form-group {
        position: relative;
    }
    .form-input {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--color-text-muted);
        padding: 1rem 0;
        color: var(--color-text-primary);
        font-size: var(--font-size-lg);
        font-family: inherit;
        transition: all 0.3s ease;
        outline: none;
        
        &::placeholder {
            color: var(--color-text-muted);
            opacity: 0.8;
        }
        
        &:focus {
            border-bottom-color: #ef4444;
            
            &::placeholder {
                opacity: 0.5;
                transform: translateY(-2px);
            }
        }
        
        &:hover {
            border-bottom-color: var(--color-text-secondary);
        }
        
        /* Select specific styles */
        &[type="select"], select& {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23919191' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0 center;
            background-size: 20px;
            padding-right: 2rem;
        }
        
        /* Textarea specific styles */
        &[rows] {
            resize: vertical;
            min-height: 100px;
        }
    }
    .form-checkbox {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        input[type="checkbox"] {
            appearance: none;
            width: 20px;
            height: 20px;
            border: 1px solid var(--color-text-muted);
            border-radius: 4px;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
            margin-top: 2px;
            
            &:checked {
                background: #ef4444;
                border-color: #ef4444;
                &::before {
                    content: "✓";
                    display: block;
                    color: #ffffff;
                    text-align: center;
                    font-size: 12px;
                    line-height: 16px;
                    font-weight: bold;
                }
            }
            &:hover {
                border-color: var(--color-text-secondary);
            }
            &:focus {
                outline: 2px solid rgba(239, 68, 68, 0.3);
                outline-offset: 2px;
            }
        }
        .checkbox-label {
            color: var(--color-text-secondary);
            font-size: var(--font-size-sm);
            line-height: 1.5;
            cursor: pointer;
            a {
                color: var(--color-text-secondary);
                text-decoration: none;
                transition: color 0.3s ease;
                &:hover {
                    color: var(--color-text-primary);
                    text-decoration: underline;
                }
            }
        }
    }
}
/* ===== GRADIENT ANIMATION KEYFRAMES ===== */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes radialPulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}


section[data-section="title"] {
    padding-top: 2vw;
}

/* ===== TESTIMONIALS SECTION ===== */
section[data-section="testimonials"] {
    position: relative;
    min-height: 60svh;
    overflow: hidden;
    padding-top: 120px;
    border-radius: 36px; 
    background: linear-gradient(40deg, #111111, #060606);
    svg {
        display: none;
    }
    
    .testimonials-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: none;
        &::before {
            content: '';
            position: absolute;
            top: calc(50% - 60%);
            left: calc(50% - 60%);
            width: 50%;
            height: 50%;
            background: radial-gradient(circle at center, rgb(18, 113, 255) 0%, rgb(18, 113, 255) 50%) no-repeat;
            transform-origin: center center;
            mix-blend-mode: hard-light;
            opacity: 1;
            animation: animateFirst 20s linear infinite;
            z-index: 2;
            filter: blur(80px);
            transition: filter 0.3s ease;
        }
        &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            filter: blur(40px);
            z-index: 1;
            border-radius: 36px;
        }
    }
    &::before {
        content: '';
        position: absolute;
        top: calc(50% - 60%);
        left: calc(50% - 60%);
        width: 120%;
        height: 120%;
        background: radial-gradient(circle at center, rgba(221, 74, 255, 0.8) 0%, rgba(221, 74, 255, 0) 50%) no-repeat;
        transform-origin: calc(50% - 400px);
        mix-blend-mode: hard-light;
        opacity: 1;
        animation: animateSecond 25s linear infinite;
        z-index: 2;
        filter: blur(80px);
        transition: filter 0.3s ease;
    }
    &::after {
        content: '';
        position: absolute;
        top: calc(50% - 60%);
        left: calc(50% - 60%);
        width: 120%;
        height: 120%;
        background: radial-gradient(circle at center, rgba(100, 220, 255, 0.8) 0%, rgba(100, 220, 255, 0) 50%) no-repeat;
        transform-origin: calc(50% + 400px);
        mix-blend-mode: hard-light;
        opacity: 1;
        animation: animateThird 30s linear infinite;
        z-index: 2;
        filter: blur(80px);
        transition: filter 0.3s ease;
    }
    
    /* Additional orbs using section-inner pseudo-elements */
    .section-inner {
        min-height: 60svh;
        &::before {
            content: '';
            position: absolute;
            top: calc(50% - 60%);
            left: calc(50% - 60%);
            width: 120%;
            height: 120%;
            background: radial-gradient(circle at center, rgba(200, 50, 50, 0.8) 0%, rgba(200, 50, 50, 0) 50%) no-repeat;
            transform-origin: calc(50% - 200px);
            mix-blend-mode: hard-light;
            opacity: 0.7;
            animation: animateFourth 22s linear infinite;
            z-index: -1;
            filter: blur(80px);
            transition: filter 0.3s ease;
        }
        
        &::after {
            content: '';
            position: absolute;
            top: calc(50% - 60%);
            left: calc(50% - 60%);
            width: 120%;
            height: 120%;
            background: radial-gradient(circle at center, rgba(180, 180, 50, 0.8) 0%, rgba(180, 180, 50, 0) 50%) no-repeat;
            transform-origin: calc(50% - 800px) calc(50% + 800px);
            mix-blend-mode: hard-light;
            opacity: 1;
            animation: animateFifth 28s linear infinite;
            z-index: -1;
            filter: blur(80px);
            transition: filter 0.3s ease;
        }
    } 
    .testimonials-content {
        padding-left: 18%;
        position: relative;
        z-index: 10; 
    }
    .testimonials-counter {
        display: flex;
        gap: 3rem;
        flex-wrap: wrap;
        
        .counter-item {
            text-align: center;
            text-align: left;
            flex-basis: 100%;
            
            .counter-number {
                font-size: 3rem;
                font-weight: 800;
                line-height: 1;
                margin-bottom: 0.5rem;
            }
            
            .counter-label {
                font-size: 0.8rem;
                color: rgb(180 210 255 / 70%);
                text-transform: uppercase;
                letter-spacing: 0.1em;
                font-weight: 500;
            }
        } 
    }
    .outer-box {
        background-color: #121212;
        padding: 6rem 8rem;
        align-content: center;
        position: absolute;
        border-radius: 30px;
        width: -webkit-fill-available;
        min-height: 500px;
        border-top-right-radius: 0;
        bottom: 0;
        z-index: 10;
        .carousel-nav {
            flex-direction: row;
            bottom: 0;
            border-radius: 30px 0 0 0;
            left: calc(0% - 84px);
            &::after {
                content: "";
                position: absolute;
                right: 51%;
                width: 30px;
                height: 45px;
                top: -45px;
                border-radius: 20px 0 0 0;
                border-bottom-right-radius: 20px;
                box-shadow: 0 20px 0 0 var(--color-bg);
            }
            &::before {
                content: "";
                position: absolute;
                left: -30px;
                width: 30px;
                height: 45px;
                top: 15px;
                border-radius: 20px 0 0 0;
                border-bottom-right-radius: 20px;
                box-shadow: 0 20px 0 0 var(--color-bg);
            }
            .carousel-btn.prev::before, .carousel-btn.next::after { display: none;}
        }
    }
    .testimonials-carousel {
        &::after {
            content: "";
            position: absolute;
            right: 0px;
            width: 30px;
            height: 45px;
            top: -45px;
            border-radius: 20px 0 0 0;
            border-bottom-right-radius: 20px;
            box-shadow: 0 20px 0 0 var(--color-bg);
        }  
        .carousel-slides {
            position: relative;
            width: 100%;
            height: auto;
            min-height: 200px;
        }
        .carousel-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            align-content: center;
            opacity: 0;
            transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
            z-index: 0;
            &.active {
                opacity: 1;
                pointer-events: auto;
                z-index: 1;
            }
            p {
                line-height: 1.6;
            }
        }
        .testimonial-quote {
            font-size: 2rem;
            color: #ef4444;
            margin-bottom: 1rem;
        }
        .testimonial-author {
            h4 { 
                margin-bottom: 0.25rem;
            } 
        }
  
        .carousel-slide .testimonial-quote,
        .carousel-slide .testimonial-author {
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            opacity: 0;
            transform: translateX(-50px);
        }
        .carousel-slide:not(.active) .testimonial-quote,
        .carousel-slide:not(.active) .testimonial-author {
            opacity: 0;
            transform: translateX(-50px);
        }
        .carousel-slide.active .testimonial-quote,
        .carousel-slide.active .testimonial-author {
            opacity: 1;
            transform: translateX(0);
        }
        
    }
}
/* ===== BLOG SECTION ===== */
.section-header .heading-md { 
    margin: 0;
}
section[data-section="blog"] {
    position: relative;

    .blog-card {
        background: #121212;
        border-radius: 31px;
        overflow: hidden;
        transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        height: 100%;
        cursor: pointer;
        border: solid 1px #6b728026;
        position: relative;
        transform: translateY(20px);
        opacity: 0;
        .blog-image-container {
            position: relative;
            height: 270px;
            overflow: hidden;
            border-radius: 30px 30px 0 30px;
            .blog-image {
                width: 110%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.6s ease;
                filter: brightness(0.7) contrast(1.1);
            }
        }
        .blog-image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(124, 58, 237, 0.1));
            opacity: 0;
            transition: opacity 0.6s ease;
        }
    }
    .blog-card:hover .blog-image {
        transform: translateX(-10px);
        filter: brightness(0.9) contrast(1.2);
    }
    .blog-card[data-animate="fade-up"] {
        animation: slideUp 0.8s ease-out forwards;
    }
    .blog-card:nth-child(2) {
        animation-delay: 0.2s;
    } 
    .blog-content {
        padding: 2rem;
    }
    .blog-meta {
        font-size: 0.775rem;
        color: #848484;
        letter-spacing: 0.3px;
        font-weight: 400;
        position: absolute;
        bottom: 0;
        right: 0;
        background: var(--color-bg);
        padding: 10px 24px 3px;
        -webkit-border-radius: 25px 25px 0 0;
        border-radius: 25px 25px 0 0;
        .blog-date {
            position: relative;
            &::before {
                content: "";
                position: absolute;
                left: -52px;
                width: 30px;
                height: 45px;
                bottom: -6px;
                border-radius: 0 0 20px 0;
                border-bottom-left-radius: 0;
                box-shadow: 0 20px 0 0 var(--color-bg);
            }
        }
    }
    .blog-category {
        font-size: 0.75rem;
        color: var(--color-text-primary);
        background: rgb(0 0 0 / 2%);
        backdrop-filter: blur(10px);
        padding: 0.25rem 0.75rem;
        border-radius: 12px;
        display: block;
        position: absolute;
        top: 8px;
        left: 2rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        font-weight: 600;
    }
    .blog-title {
        line-height: 1.4;
        position: relative;
        display: inline;
        text-decoration: none;
        background-image: linear-gradient(90deg, #fff, #fff);
        background-size: 0% 2px;
        background-repeat: no-repeat;
        background-position: 0 100%;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        &:hover {
            background-size: 100% 2px;
            &::after {
                width: 100%;
            } 
        } 
    }
}
section[data-section="contact"] {
    padding-top: 120px;
    padding-bottom: 64px;
    border-radius: 30px 30px 0 0;
    background: #0c0c0c;
    .contact-details {
        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            margin-bottom: 2rem;
            
            .contact-icon {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                background: rgba(239, 68, 68, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
                
                i {
                    font-size: 1.25rem;
                    color: #ef4444;
                }
            }
            .contact-content {
                h4 {
                    margin-bottom: 0.5rem;
                    color: var(--color-text-primary);
                }
                
                p, a {
                    color: var(--color-text-secondary);
                    text-decoration: none;
                    transition: color 0.3s ease;
                }
                
                a:hover {
                    color: #ef4444;
                }
            }
        }
    }
}
.page-header {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 24px;
    margin: 2rem 0;
    .page-header-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        z-index: -1;
    }
    .page-header-bg::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 0;
    }
    .page-header-content {
        padding: 2rem 0;
    }
}



/*  CODE SNIPPET */
.code-snippet {
    background: #1e1e1e;
    border: 1px solid #2b2b2b;
    border-radius: var(--radius-card-md);
    padding: var(--space-6);
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    position: relative;
    overflow: hidden;
    margin: var(--space-6) 0;
    max-width: 400px;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #111, #555, #222);
    background-size: 200% 100%;
    animation: progressFlow 2s ease-in-out infinite;
  }
}
.typing-cursor {
    display: inline-block;
    width: 1px;
    vertical-align: middle;
    height: 16px;
    background: #ffffff;
    animation: blink 1s infinite;
    margin-left: 4px;
}



.breadcrumbs {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.3rem 1.2rem;
    font-size: 0.9rem;
    background: var(--color-bg);
    border-radius: 0 0 24px 24px;
    backdrop-filter: blur(10px);
    z-index: 4;
    width: auto;
    max-width: calc(100% - 4rem);
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: 0px;
        width: 33px;
        height: 42px;
        box-shadow: 0 -26px 0 0 var(--color-bg);
        backdrop-filter: blur(10px);
    }
    &::before {
        right: 99%;
        border-radius: 0 24px 0 24px;
    }
    &::after {
        right: -30px;
        border-radius: 24px 0 0 0;
    }
    .breadcrumb-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
        gap: 0.5rem;
        align-items: center;
    }
    .breadcrumb-item {
        display: flex;
        align-items: center;
    }
    .breadcrumb-item:not(:last-child)::after {
        content: '/';
        margin-left: 0.5rem;
        color: rgba(255, 255, 255, 0.6);
    }
    .breadcrumb-link {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: color 0.3s ease;
    } 
}

.social-links {
    .social-icons {
        display: flex;
        padding-bottom: 1rem;
        gap: 1rem;
        .social-icon {
            width: 40px;
            height: 40px;
            aspect-ratio: 1/1;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-text-secondary);
            text-decoration: none;
            transition: all 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.1);
            i {
                font-size: 1.1rem;
            }
            &:hover {
                background: #ef4444;
                color: #ffffff;
                transform: translateY(-2px);
                box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
            }
        }
    }
}
.custom-text_purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}
.custom-text_red-purple {
    background: linear-gradient(135deg, #d66f78 0%, #a43ae4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}
.list-unstyled {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    li {
        position: relative;
        padding-left: 2rem;
        margin-bottom: 0.5rem;
    }
    li::before {
        content: "→";
        position: absolute;
        left: 0;
        color: #667eea;
        font-weight: bold;
    } 
}
/* Section Separators */
.section-separator {
    padding: 2rem 0;
    .separator-line {
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
        position: relative;
    }
    .separator-line::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        background: #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 10px rgb(255 255 255 / 82%);
    }
}
footer_nav {
    position: relative;
    border-radius: 0 0 30px 30px;
    display: block;
    margin-top: 5rem;
    padding-top: 4rem;
    .footer-nav-border {
        position: absolute;
        top: 0;
        left: 50%;
        right: 0;
        transform: translateX(-50%);
        width: 90%;
        height: 1px;
        background: linear-gradient(90deg, #181818, #333, #181818 );
        background-size: 200% 100%;
        animation: gradient-shift 6s ease-in-out infinite;
    }
    .footer-nav-content {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }
    .footer-nav-list li:not(:last-child) {
        margin-bottom: 0.5rem;
    }
    .footer-brand {
        width: calc(64.6666% - 30px);
    }
    .footer-logo {
        margin-bottom: 1.5rem;
        .footer-logo-image {
            max-height: 100px;
            max-width: 300px;
            width: 100%;
            object-fit: contain;
            filter: brightness(0.9);
            transition: filter 0.3s ease;
            &:hover {
                filter: brightness(1.1);
            }
        }
    }
    .footer-company-info {
        margin-top: 1rem;
        font-size: 0.7rem;
        opacity: 0.7;
        margin-right: 0.5rem;
    }
    .company-info-item {
        margin: 0;
        line-height: 1.4;
        display: flex;
        column-gap: 10px;
    }
    .company-info-label {
        color: var(--color-text-muted);
        font-weight: 500;
        display: block;
        margin-bottom: 0.25rem;
    }
    .company-info-value {
        color: var(--color-text-primary);
        font-weight: 400;
    }
    .footer-slogan {
        .footer-slogan-text {
            font-size: 2rem;
            font-weight: 700;
            margin: 0;
            text-align: center;
            line-height: 1.2;
        }
    }
    .footer-nav-title {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    .link {
        color: var(--color-text-secondary);
        text-decoration: none;
        font-weight: 300;
        transition: all 0.3s ease;
        letter-spacing: 0.3px;
        &:hover {
            color: var(--color-text-primary);
        }
    }
    .copyrights {
        padding: 1rem;
        text-align: center;
        width: fit-content;
        background: var(--color-bg);
        border-radius: 30px 30px 0 0;
        margin: 3rem auto;
        position: relative;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            width: 50px;
            height: 100%;
            border-radius: 0 0 30px 30px;
            box-shadow: 0 20px 0 0 #121212;
            content: "";
            position: absolute;
            left: -30px;
            width: 30px;
            height: 45px;
            bottom: 0;
            border-radius: 0 0 20px 0;
            border-bottom-left-radius: 0;
            box-shadow: 0 16px 0 0 var(--color-bg);
        }
        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            border-radius: 0 0 30px 30px;
            border-radius: 0px 20px 0px 20px;
            border-bottom-right-radius: 0;
            box-shadow: 0 16px 0 0 var(--color-bg);
            right: -30px;
            width: 30px;
            height: 45px;
        }
        .copyright-text {
            color: var(--color-text-muted);
            font-size: var(--font-size-sm);
            margin: 0;
            opacity: 0.8;
        }
    }
    &.footer-nav--home { 
        background: #0a0a0a;
        position: relative;
        margin-top: 0; 
        
        .container {
            position: relative;
            z-index: 1;
        }
    }
}
 

/* ===== ENHANCED ABOUT PAGE STYLES ===== */
.about-page {
    .mission-card {
        background: var(--color-surface-dark);
        border: 1px solid var(--color-border);
        border-radius: 16px;
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
        height: 100%;
        
        &:hover {
            transform: translateY(-4px);
            border-color: var(--color-brand-red);
            box-shadow: 0 8px 32px rgba(255, 0, 18, 0.1);
        }
        
        .mission-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--color-brand-red), var(--color-brand-pink));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            
            i {
                font-size: 1.5rem;
                color: white;
            }
        }
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        margin-top: 3rem;
        
        @media (max-width: 768px) {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
        
        @media (max-width: 480px) {
            grid-template-columns: 1fr;
        }
    }
    
    .stat-item {
        text-align: center;
        padding: 2rem 1rem;
        background: var(--color-surface-dark);
        border: 1px solid var(--color-border);
        border-radius: 16px;
        transition: all 0.3s ease;
        
        &:hover {
            transform: translateY(-4px);
            border-color: var(--color-brand-red);
            box-shadow: 0 8px 32px rgba(255, 0, 18, 0.1);
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 800;
            color: var(--color-brand-red);
            line-height: 1;
            margin-bottom: 0.5rem;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: var(--color-text-secondary);
            font-weight: 500;
        }
    }
    
    .team-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        margin-top: 3rem;
        
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
    }
    
    .team-member {
        background: var(--color-surface-dark);
        border: 1px solid var(--color-border);
        border-radius: 16px;
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
        opacity: 0;
        transform: translateY(20px);
        
        &.animate-in {
            opacity: 1;
            transform: translateY(0);
        }
        
        &:hover {
            transform: translateY(-4px);
            border-color: var(--color-brand-red);
            box-shadow: 0 8px 32px rgba(255, 0, 18, 0.1);
        }
        
        .member-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 auto 1rem;
            border: 3px solid var(--color-brand-red);
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        
        .member-info {
            h4 {
                color: var(--color-text-primary);
                margin-bottom: 0.25rem;
            }
            
            .paragraph-sm.text-muted {
                color: var(--color-text-secondary);
                margin-bottom: 1rem;
            }
        }
        
        .member-social {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
            
            .social-link {
                width: 32px;
                height: 32px;
                background: var(--color-surface);
                border: 1px solid var(--color-border);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: var(--color-text-secondary);
                transition: all 0.3s ease;
                
                &:hover {
                    background: var(--color-brand-red);
                    border-color: var(--color-brand-red);
                    color: white;
                    transform: translateY(-2px);
                }
            }
        }
    }
    
    .values-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        margin-top: 3rem;
        
        @media (max-width: 1024px) {
            grid-template-columns: repeat(2, 1fr);
        }
        
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }
    
    .value-card {
        background: var(--color-surface-dark);
        border: 1px solid var(--color-border);
        border-radius: 16px;
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
        opacity: 0;
        transform: translateY(20px);
        
        &.animate-in {
            opacity: 1;
            transform: translateY(0);
        }
        
        &:hover {
            transform: translateY(-4px);
            border-color: var(--color-brand-red);
            box-shadow: 0 8px 32px rgba(255, 0, 18, 0.1);
        }
        
        .value-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--color-brand-red), var(--color-brand-pink));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            
            i {
                font-size: 1.5rem;
                color: white;
            }
        }
        
        h3 {
            color: var(--color-text-primary);
            margin-bottom: 1rem;
        }
        
        p {
            color: var(--color-text-secondary);
            line-height: 1.6;
        }
    }
    
    .visual-container {
        position: relative;
        height: 400px;
        
        .solar-system {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: skewX(-15deg);
            
            .sun {
                position: absolute;
                width: 80px;
                height: 80px;
                background: radial-gradient(circle, #ff6b6b, #d63384);
                border-radius: 50%;
                box-shadow: 
                    0 0 20px rgba(208, 107, 255, 0.8),
                    0 0 40px rgba(107, 208, 255, 0.4);
                filter: drop-shadow(0px 0px 4px rgba(255, 107, 107, 0.8)) blur(1px);
                transform: skewX(15deg);
                z-index: 10;
            }
            
            .mercury-trajectory,
            .venus-trajectory,
            .earth-trajectory,
            .mars-trajectory {
                position: absolute;
                border: 1px solid rgba(230, 107, 255, 0.3);
                border-radius: 50%;
                aspect-ratio: 1;
                background: transparent;
                
                .mercury,
                .venus,
                .earth,
                .mars {
                    position: absolute;
                    border-radius: 50%;
                    background: rgba(255, 107, 107, 0.9);
                    border: 1px solid rgba(255, 107, 107, 0.6);
                    top: -8px;
                    left: 50%;
                    transform: translateX(-50%);
                    filter: drop-shadow(0px 0px 6px rgba(230, 107, 255, 0.6));
                    
                    &::after {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 40%;
                        height: 40%;
                        border-radius: 50%;
                        background: rgba(230, 107, 255, 0.8);
                        filter: drop-shadow(0px 0px 2px rgba(255, 107, 107, 0   .6));
                    }
                }
            }
            
            .mercury-trajectory {
                width: 120px;
                height: 120px;
                animation: revolution 44s linear infinite;
                
                .mercury {
                    width: 16px;
                    height: 16px;
                    animation: revolution 29s linear infinite;
                }
            }
            
            .venus-trajectory {
                width: 180px;
                height: 180px;
                animation: revolution 112s linear infinite;
                
                .venus {
                    width: 20px;
                    height: 20px;
                    animation: revolution 122s linear infinite;
                }
            }
            
            .earth-trajectory {
                width: 240px;
                height: 240px;
                animation: revolution 183s linear infinite;
                
                .earth {
                    width: 22px;
                    height: 22px;
                    animation: revolution 0.5s linear infinite;
                    
                    &::after {
                        animation: blink 2s linear infinite;
                    }
                }
            }
            
            .mars-trajectory {
                width: 300px;
                height: 300px;
                animation: revolution 343s linear infinite;
                
                .mars {
                    width: 18px;
                    height: 18px;
                    animation: revolution 0.5s linear infinite;
                }
            }
        }
    }
}

/* ========================================
   SOLAR SYSTEM ANIMATION
   ======================================== */
.solar-system {
    display: flex;
    filter: blur(10px);
    opacity: 0.8;
    justify-content: center;
    align-items: center;

    inline-size: 100%;
    block-size: 100%;

    /* Simplified transform for better performance */
    transform: skewX(-45deg) translateZ(0);
    -webkit-transform: skewX(-45deg) translateZ(0);
    
    /* GPU acceleration hints */
    will-change: transform;
    backface-visibility: hidden;

    & .solar-system__sun {
    z-index: 100;

    /* ☛ ⚠ Size of the Sun is not respected here. */
    aspect-ratio: 1;
    inline-size: var(--star-radius-sun);
    border-radius: 50%;

    background-color: var(--system-color-red-300);
    background: linear-gradient(
        135deg,
        var(--system-color-red-300) 20%,
        transparent
    );

    /* Simplified filter for better performance */
    filter: drop-shadow(0px 0px 1px var(--system-color-red-300));
    -webkit-filter: drop-shadow(0px 0px 1px var(--system-color-red-300));

    transform: skewX(45deg) translateZ(0);
    -webkit-transform: skewX(45deg) translateZ(0);
    
    /* GPU acceleration hints */
    will-change: transform;
    backface-visibility: hidden;
    }

    & article:not(.solar-system__sun) {
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    z-index: 99;

    aspect-ratio: 1;
    border-radius: 50%;

    background: transparent;

    border-width: var(--system-border-planets-width);
    border-style: solid;
    border-color: var(--system-color-theme-planets);

    /* GPU acceleration hints */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);

    &::after {
        content: "";
        aspect-ratio: 1;
        inline-size: 40%;
        border-radius: 50%;

        background: var(--system-color-red-300);

        /* Simplified filter for better performance */
        -webkit-filter: drop-shadow(0px 0px 2px var(--system-color-red-200));
        filter: drop-shadow(0px 0px 2px var(--system-color-red-200));
    }
    }

    & section {
    position: absolute;
    z-index: 98;
    aspect-ratio: 1;

    border-radius: 50%;

    border-width: var(--system-border-width);
    border-style: solid;
    border-color: var(--system-color-theme-paths);
    
    /* GPU acceleration hints */
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    }

    & .solar-system__mercury-trajectory {
    inline-size: var(--planet-trajectory-mercury);

    /* Optimized duration for better performance */
    -webkit-animation: revolution 60s linear infinite;
    animation: revolution 60s linear infinite;

    & .solar-system__mercury-trajectory__mercury {
        inline-size: var(--planet-radius-mercury);
        top: var(--system-margin-mercury);

        /* Optimized duration for better performance */
        -webkit-animation: revolution 40s linear infinite;
        animation: revolution 40s linear infinite;
    }
    }

    & .solar-system__venus-trajectory {
    inline-size: var(--planet-trajectory-venus);

    /* Optimized duration for better performance */
    -webkit-animation: revolution 90s linear infinite;
    animation: revolution 90s linear infinite;

    & .solar-system__venus-trajectory__venus {
        inline-size: var(--planet-radius-venus);
        top: var(--system-margin-venus);

        /* Optimized duration for better performance */
        -webkit-animation: revolution 100s linear infinite;
        animation: revolution 100s linear infinite;
    }
    }

    & .solar-system__earth-trajectory {
    inline-size: var(--planet-trajectory-earth);

    /* Optimized duration for better performance */
    -webkit-animation: revolution 120s linear infinite;
    animation: revolution 120s linear infinite;

    & .solar-system__earth-trajectory__earth {
        inline-size: var(--planet-radius-earth);
        top: var(--system-margin-earth);

        /* Optimized duration for better performance */
        -webkit-animation: revolution 1s linear infinite;
        animation: revolution 1s linear infinite;

        &::after {
        -webkit-animation: blink 3s linear infinite;
        animation: blink 3s linear infinite;
        }
    }
    }

    & .solar-system__mars-trajectory {
    inline-size: var(--planet-trajectory-mars);

    /* Optimized duration for better performance */
    -webkit-animation: revolution 150s linear infinite;
    animation: revolution 150s linear infinite;

    & .solar-system__mars-trajectory__mars {
        inline-size: var(--planet-radius-mars);
        top: var(--system-margin-mars);

        /* Optimized duration for better performance */
        -webkit-animation: revolution 1.2s linear infinite;
        animation: revolution 1.2s linear infinite;
    }
    }
}
    
  
  @keyframes revolution {
    to {
      transform: rotateZ(360deg) translateZ(0);
    }
  }
  
  @keyframes blink {
    to {
      background-color: var(--system-color-dark);
  
      filter: drop-shadow(0 0 0 var(--system-color-red-200)) blur(0);
    }
  }
  
  /*** ◰ media queries ***/
  /** smartphone **/
  @media screen and (width < 768px) {
    body {
      & .solar-system {
        & .solar-system__sun {
          inline-size: calc(var(--star-radius-sun) / 2);
        }
        & .solar-system__mercury-trajectory {
          inline-size: calc(var(--planet-trajectory-mercury) / 2);
  
          & .solar-system__mercury-trajectory__mercury {
            inline-size: calc(var(--planet-radius-mercury) / 2);
  
            top: calc(var(--system-margin-mercury) - 20px);
          }
        }
  
        & .solar-system__venus-trajectory {
          inline-size: calc(var(--planet-trajectory-venus) / 2);
  
          & .solar-system__venus-trajectory__venus {
            inline-size: calc(var(--planet-radius-venus) / 2);
  
            top: calc(var(--system-margin-venus) - 9px);
          }
        }
  
        & .solar-system__earth-trajectory {
          inline-size: calc(var(--planet-trajectory-earth) / 2);
  
          & .solar-system__earth-trajectory__earth {
            inline-size: calc(var(--planet-radius-earth) / 2);
  
            top: calc(var(--system-margin-earth) - 19px);
          }
        }
  
        & .solar-system__mars-trajectory {
          inline-size: calc(var(--planet-trajectory-mars) / 2);
  
          & .solar-system__mars-trajectory__mars {
            inline-size: calc(var(--planet-radius-mars) / 2);
  
            top: calc(var(--system-margin-mars) - 234px);
          }
        }
      }
    }
  }
   
@keyframes revolution {
    0% {
        transform: rotate(0deg) translateZ(0);
    }
    100% {
        transform: rotate(360deg) translateZ(0);
    }
}

@keyframes blink {
    0%, 100% {
        background: rgba(107, 213, 255, 0.8);
        filter: drop-shadow(0px 0px 2px rgba(107, 171, 255, 0.6));
    }
    50% {
        background: rgba(0, 0, 0, 0.8);
        filter: drop-shadow(0px 0px 0px rgba(255, 107, 107, 0));
    }
}

/* RESPONSIVE STYLES */
@media (max-width: 1400px) {
    section[data-section="testimonials"] {
        .outer-box { 
            padding: 2rem 4rem;
            min-height: 485px;
        }
    }
}
@media (max-width: 1269px) {
    section[data-section="testimonials"] {
        .section-inner {
            min-height: 40svh;
        }
        position: relative;
        min-height: 50svh;
        padding-top: 72px;
        .outer-box { 
            padding: 2rem 4rem;
            min-height: 310px;
            .carousel-nav {
                right: 0;
                justify-content: center;
            }
        }
        .testimonials-content {
            padding-left: 4rem;
        }
        .testimonials-counter {
            flex-direction: row;
            gap: 0;
            margin-top: 3rem;
            .counter-item {
                flex-basis: calc(100% / 3);
            }
        }
    }
    section[data-section="brands"] {
        .container {
            width: auto;
        }
    }
}
@media (max-width: 990px) {
    section[data-section="testimonials"] {
        .testimonials-counter {
            gap: 2rem;
            .counter-item {
                flex-basis: 100%;
            }
        }
        .outer-box { 
            padding: 1.5rem 3rem;
            min-height: 485px;
            .carousel-nav {
                justify-content: flex-start;
                &::after {
                    right: calc(100% - 84px);
                    width: 30px;
                    height: 45px;
                    top: -45px;
                    border-radius: 20px 0 0 0;
                    border-bottom-right-radius: 20px;
                    box-shadow: 0 20px 0 0 var(--color-bg);
                }
            }
        }
    } 
    footer_nav {
        .logo-col {
            flex-basis: 100%;
            max-width: none;
        }
        .container {
            .row {align-items: flex-start;
            }
        }
    }
}
@media (max-width: 768px) {
    main {
        padding: 0px 20px 0px 20px;
    }
    section[data-section="brands"] {
        margin-left: 0px;
        margin-right: 0px;
        .section-inner {
            padding-left: 2rem;
            padding-right: 2rem;
        }
    }
    .blog-cards {
        row-gap: 1.5rem;
    }
    section[data-section="testimonials"] {
        .outer-box { 
            padding: 1rem 3rem;
            min-height: 485px; 
        }
    }
    .section[data-section="blog"] {
        .container {
            padding-left: 0px;
            padding-right: 0px;
        }
    }
    .angled-text-section {
        margin-left: -20px;
        margin-right: -20px;
    }
} 

@media (max-width: 640px) {
    .section.bento-section {
        margin-left: -16px;
        margin-right: -16px;
    }
    section[data-section="brands"] {
        margin-left: -16px;
        margin-right: -16px;
        .section-inner {
            padding-top: 4rem;
        } 
        .brands-grid {
            margin-bottom: 1rem;
            border-top: none;
            border-bottom: none;
            [class*="col"] {
                background: transparent;
                border-right: none;
            }
        }
        .divider-angle {
            --divider-border-width: 24px;
        }
        .brands-divider {
            margin-bottom: 10px;
        }

    }
    section[data-section="testimonials"] {
        .testimonials-counter {
            gap: 2rem;
            .counter-item {
                flex-basis: 100%;
            } 
        }
        .testimonials-carousel {
            .carousel-slides {
                min-height: 300px;
            }
        }
        .outer-box { 
            position: relative;
            margin-top: 4rem;
            min-height: 300px;
            .carousel-nav {
                justify-content: center;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }
    .brands-grid {
        .brand-card {
            min-height: 100px;
            .brand-image {
                max-width: 120px;
                max-height: 60px;
            }
            
            .brand-title {
                font-size: 1rem;
            }
            
            .brand-description {
                font-size: 0.8rem;
            }
        }
        .brand-card .brand-info {
            display: none;
        }
    }
    section[data-section="about"] {
        .about-layout {
            padding-bottom: 64px;
        }
        .section-title {
            font-size: 2.5rem;
            line-height: 1.4;
        }
        .visual-container {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .content-body .paragraph-md {
            color: var(--text-secondary);
            font-weight: 300;
            letter-spacing: 0.1px;
            text-align: left;
        }
    }
    section[data-section="testimonials"] {
        .testimonials-content {
            padding-left: 2rem;
        }
        .outer-box {
            padding: 0 2rem;
        }
    }
    .page-header {
        .breadcrumbs {
            left: 1rem;
            right: unset;
            width: calc(100% - 4rem);
            font-size: 0.8rem;
            .breadcrumb-item {
                white-space: nowrap; 
                &:last-child {
                    flex: 1 1 auto;  
                    min-width: 0;     
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap; 
                }
                span {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            &::before, &::after {
                content: "";
                position: absolute;
                top: 0px;
                left: -2rem;
                width: 33px;
                height: 50px;
                box-shadow: 0 -26px 0 0 var(--color-bg);
                backdrop-filter: blur(10px);
            }
            &::after {
                right: -2rem;
                left: unset;
            } 
        }
        .page-header-content {
            padding: 2rem 0;
            h1 {
                margin-top: 4rem;
                font-size: 2rem;
            }
            p {
                font-size: 1rem;
            }
        }
    }

}

@media (max-width: 480px) {
    main {
        padding: 0 1rem;
    }
    .carousel-section[data-section="home"] {
        min-height: calc(70svh - 100px);
        .slide-content {
            min-height: 60svh;
            .paragraph-lg {
                font-size: 1rem;
            }
        }
        .slide-top {
            min-height: auto;
        }
        .carousel-nav {
            bottom: 0;
            flex-direction: row;
            gap: 0;
            border-radius: 0px 30px 0 0;
            align-items: center;
            .carousel-btn.next::after { 
                top: 0;
                left: 100%;
                border-radius: 0 0px 0px 20px;
                box-shadow: 0 20px 0 0 var(--color-bg);
            }
        }
    }
}