/* @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); */
@import url('../css/font.css');

/* --- CSS Styling (Restored and Polished) --- */
:root {
    --primary-green: #b3cb1c;
    --dark-green: #fff;
    --light-bg: #f5f5f5;
    --border-color: #e5e5e5;
    --text-color: #1c1c1c;
    --secondary-text: #6e6e6e;
    --transition-speed: 0.3s;
}

.text-primary {
    color: var(--primary-green) !important;
}

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

body {
    color: var(--text-color);
    overflow-x: hidden;
    background-color: #000;
    font-family: "Raleway", sans-serif;
}

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

p {
    font-family: 'Raleway';
}

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

.prd-p {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    margin: 0;
    color: #fff;
}

/* --- Section Styling (Background and Layout) --- */
.stats-section {
    /* background-color: #0b0b0b; */
    /* padding: 38px 20px; */
    color: white;
    /* margin-top: -130px !important; */
    padding-top: 0;
}

.stat-item:hover {
    box-shadow: inset 0px -4px 11px 0px #80920f;
    transition: all 0.5s linear;
}

.stats-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    position: relative;
}

/* --- Stat Item Styling --- */
/* .stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    position: relative;
    flex-grow: 1;
} */
.heading-text {
    font-size: 40px;
}

.stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    position: relative;
    flex-grow: 1;
    background: #1a1919;
    padding: 2rem;
    margin: 1rem 2rem;
    /* border: 1px solid red; */
    border-radius: 30px;
    width: 25%;
}

/* Vertical Separator Lines */
/* .stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 100px;
    background: linear-gradient(45deg, #879b07, transparent);

} */

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -13%;
    bottom: 20px;
    width: 2px;
    background: linear-gradient(to top, #879b07 0%, transparent 100%);
    animation: fillLine 8s linear infinite;
    transform: rotate(180deg);
}


@keyframes fillLine {
    0% {
        height: 0%;
        /* opacity: 1; */
    }

    50% {
        height: 50%;
        /* opacity: 1; */
    }

    100% {
        height: 80%;
        /* opacity: 0; */
    }
}

/* --- Content Styling --- */
.stat-icon-text {
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.stat-icon {
    width: 55px;
    height: 55px;
    margin: auto;
    margin-bottom: 15px;
    /* margin-right: 15px; */
    /* filter: invert(70%) sepia(20%) saturate(1000%) hue-rotate(80deg) brightness(100%); */
}

.stat-number {
    /* font-family: 'Raleway', sans-serif; */
    font-size: 4em;
    /* Large, bold number */
    font-weight: 700;
    line-height: 1;
    color: white;
    font-family: 'Aileron';
    margin-bottom: 10px;
}

.stat-label {
    font-family: 'Raleway', sans-serif;
    font-size: 1.1em;
    color: #b3cb1c;
    margin-top: 0;
}

.desk-mb {
    display: block;
}

.mb-desk {
    display: none;
}

/* ===============================
   Banner Carousel Video Visibility
   =============================== */

/* .carousel.hero-section .item {
    position: absolute;
    inset: 0;
}

.carousel .item.active {
    z-index: 5;
}

.carousel .item:not(.active) {
    z-index: 1;
} */

.carousel .item .content button,
.carousel .item .content a {
    pointer-events: auto;
}




/* --- Responsiveness (For smaller screens) --- */
@media (max-width: 768px) {
    .desk-mb {
        display: none;
    }

    .mb-desk {
        display: block;
    }

    .row-gap2 {
        row-gap: 26px;
    }

    .stats-container {
        /* flex-direction: column; */
        /* Stack items vertically */
    }

    .stat-item {
        width: 100%;
        padding: 30px 0;
        border-bottom: 1px solid #385E3B;
        /* Use horizontal line for separation */
    }

    /* Remove vertical separators on mobile */
    .stat-item:not(:last-child)::after {
        content: none;
    }

    /* Add back the bottom border to separate stacked items */
    .stat-item:last-child {
        border-bottom: none;
    }

    .stat-number {
        font-size: 3em;
    }
}

.box>span {
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, black, transparent);
    z-index: 9;
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
    color: #fff;
    display: flex;
    align-items: end;
    padding: 50px 40px;
    font-weight: 500;
}

/* -------------------------------------- */
/* CSS Styling */
/* -------------------------------------- */

/* Basic styling for the content */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

#content {
    padding: 20px;
    min-height: 250vh;
    /* Page ko lamba karne ke liye */
}

/* Scroll to Top Button Styling */
#scrollToTopBtn {
    /* Position the button in the bottom-right corner */
    position: fixed;
    bottom: 100px;
    right: 20px;
    z-index: 1000;

    /* Make it a circle and center the content */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    text-decoration: none;

    /* Hide by default and then show with JS */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: pointer;
}

#scrollToTopBtn.show {
    opacity: 1;
    visibility: visible;
}

/* Arrow Styling */
.arrow {
    position: absolute;
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    font-weight: bold;
    color: white;
    background-color: #879b06;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    transition: background-color 0.2s;
}

#scrollToTopBtn:hover .arrow {
    background-color: #879b06;
    /* Darken on hover */
}

/* Progress Ring Styling (The Rotating Border) */
.progress-ring {
    position: absolute;
    /* Rotate the SVG so the progress starts at the top (12 o'clock) */
    transform: rotate(-90deg);
}

.progress-ring-circle {
    transition: stroke-dashoffset 0.35s linear;
    /* Yahan 163.36: 2 * pi * radius (26) */
    stroke-dasharray: 163.36;
    stroke-dashoffset: 163.36;
    /* Starts completely hidden */
}

/* carousel */

.carousel {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.carousel .list .item {
    width: 180px;
    height: 250px;
    position: absolute;
    top: 80%;
    transform: translateY(-70%);
    left: 70%;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    background-position: 50% 50%;
    background-size: cover;
    overflow: hidden;
    /* z-index: 100; */
    /* transition: 1s; */
}

.carousel .list .item:nth-child(1),
.carousel .list .item:nth-child(2) {
    top: 0;
    left: 0;
    transform: translate(0, 0);
    border-radius: 0;
    width: 100%;
    height: 100%;

}

.carousel .list .item:nth-child(3) {
    transition: 1s;
    left: 67%;
}

.carousel .list .item:nth-child(3)::after,
.carousel .list .item:nth-child(4)::after,
.carousel .list .item:nth-child(5)::after,
.carousel .list .item:nth-child(6)::after {
    background: none;
}

.carousel .list .item:nth-child(4) {
    transition: 1s;
    left: calc(67% + 200px);
}

.carousel .list .item:nth-child(5) {
    transition: 1s;
    left: calc(67% + 400px);
}

.carousel .list .item:nth-child(6) {
    transition: 1s;
    left: calc(74% + 600px);
}

.carousel .list .item:nth-child(n+7) {
    transition: 1s;
    left: calc(67% + 800px);
    opacity: 0;
}





.list .item .content {
    position: absolute;
    top: 50%;
    left: 100px;
    transform: translateY(-50%);
    width: 600px;
    text-align: left;
    color: #fff;
    display: none;
    /* font-family: 'Argentum Sans'; */
    /* font-family: "Playfair Display", serif; */
    font-family: 'Raleway', sans-serif;
    ;
    /* font-style: italic; */
}

.list .item:nth-child(2) .content {
    display: block;
}

.content .title {
    font-size: 50px;
    /* text-transform: uppercase; */
    margin-bottom: 5px;
    color: #b3cb1c;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    animation: animate 1s ease-in-out 0.3s 1 forwards;
}

.scroll-reveal-text {
    font-size: clamp(2rem, 5vw, 4rem);
    /* text-align: center; */
    font-weight: 700;
    line-height: 1.3;
    position: relative;

}

.scroll-reveal-text .char {
    color: #b3cb1c;
    opacity: 0.4;
    transition: none !important;
    display: inline-block;
    position: relative;
    /* right: -20px; */
}

.content .name {
    font-size: 50px;
    /* text-transform: uppercase; */
    font-weight: bold;
    line-height: 120%;
    /* text-shadow: 3px 4px 4px rgba(255, 255, 255, 0.8); */
    opacity: 0;
    animation: animate 1s ease-in-out 0.6s 1 forwards;
}

.content .des {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    margin-left: 5px;

    opacity: 0;
    animation: animate 1s ease-in-out 0.9s 1 forwards;
}

.content .btn {
    margin-left: 5px;

    opacity: 0;
    animation: animate 1s ease-in-out 1.2s 1 forwards;
}



@keyframes animate {

    from {
        opacity: 0;
        transform: translate(0, 100px);
        filter: blur(33px);
    }

    to {
        opacity: 1;
        transform: translate(0);
        filter: blur(0);
    }
}

/* Carousel */






/* next prev arrows */







/* time running */
.carousel .timeRunning {
    position: absolute;
    z-index: 1000;
    width: 0%;
    height: 4px;
    background-color: #b3cb1c;
    left: 0;
    top: 0;
    animation: runningTime 7s linear 1 forwards;
}



@keyframes runningTime {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }

}


/* Responsive Design */

@media screen and (max-width: 999px) {

    header {
        padding-left: 50px;
    }

    .list .item .content {
        left: 50px;
    }

    .content .title,
    .content .name {
        font-size: 70px;
    }

    .content .des {
        font-size: 16px;
    }

}

@media screen and (max-width: 690px) {
    header nav a {
        font-size: 14px;
        margin-right: 0;
    }

    .list .item .content {
        top: 40%;
    }

    .content .title,
    .content .name {
        font-size: 45px;
    }

    .content .btn button {
        padding: 10px 15px;
        font-size: 14px;
    }
}

.tp-bg-common-black {
    background-color: #000;
}

.pb-80 {
    padding-bottom: 80px;
}

.pt-80 {
    padding-top: 80px;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    max-width: 1343px;
    margin: 0 auto;
}

.justify-content-center {
    justify-content: center !important;
}

img {
    max-width: 100%;
}

.row {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    justify-content: space-between;
}

.col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}

.mb-40 {
    margin-bottom: 40px;
}

.text-center {
    text-align: center !important;
}

.fs-18 {
    font-size: 18px;
}

.fw-500 {
    font-weight: 500;
}


.tp-section-pp-subtitle {
    margin: auto;
    display: flex !important;
    justify-content: center;
    width: fit-content;
    margin-bottom: 1rem;
}

.tp-section-pp-subtitle {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    background: #0d0d0d;
    padding: 5px 24px;
}

.lh-1 {
    line-height: 1 !important;
}

.fw-normal {
    font-weight: 400 !important;
}

.fs-60 {
    font-size: 60px;
}

.mb-30 {
    margin-bottom: 30px;
}

.text-white {
    --bs-text-opacity: 1;
    color: rgb(255 255 255);
}

.tp-text-common-white {
    color: #fff;
}

.fs-50 {
    font-size: 50px;
}

.fw-400 {
    font-weight: 400;
}

.lh-120-per {
    line-height: 1.2;
}

.tp_text_invert>div {
    /* background-image: linear-gradient(to right, #fff 50%, #999 50%); */
    background-image: linear-gradient(to right, #b3cb1c 50%, #999 50%);
    background-size: 200% 100%;
    background-position: 100%;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

.mb-60 {
    margin-bottom: 60px;
}

.tp-about-pp-border svg {
    width: 100%;
}

.col-xl-3 {
    flex: 0 0 auto;
    width: 23%;
}


.tp-about-pp-skill-wrap {
    background: #0d0d0d;
    border-radius: 100px;
    padding: 30px 25px 30px 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.align-items-center {
    align-items: center !important;
}

.d-flex {
    display: flex !important;
}

.tp-about-pp-skill-icon {
    width: 90px;
    height: 90px;
    display: inline-block;
    border-radius: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--tp-common-black-2);
    text-align: center;
    line-height: 90px;
    flex: 0 0 auto;
}

.mr-25 {
    margin-right: 25px;
}

.p-3 {
    padding: 1rem !important;
}


.tp-text-common-white {
    color: #fff;
}

.fs-22 {
    font-size: 22px;
}

.fw-500 {
    font-weight: 500;
}




.newbtn {
    width: fit-content;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s;
    padding: 12px 25px 12px 30px;
    border-radius: 100px;
    background: #b3cb1c;
    border: none;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition: all 0.5s linear;
}

.newbtn:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #fff;
    z-index: 0;
    transition: all 0.5s linear;
    border-radius: 100px;

}

.newbtn:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 0;
    transition: all 0.5s linear;

}

.newbtn:hover {
    background: #c4e201;
}

.newbtn>svg {
    width: 34px;
    margin-left: 10px;
    transition: transform 0.3s ease-in-out;
    z-index: 1;
}

.newbtn span {
    z-index: 1;
}

.newbtn:hover svg {
    transform: translateX(5px);
}

.newbtn:active {
    transform: scale(0.95);
}

.bnr-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 20px; */
}


.navbar {
    position: fixed;
    top: 10px;
    width: 100%;
    z-index: 1000;
    height: 80px;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
    align-items: center;

}

/* Rayen */
.button--rayen {
    overflow: hidden;
    /* padding: 20px 15px; */
    position: relative;
    width: 200px;
    display: block;
}

.button--rayen.button--inverted {
    text-align: center;
    color: #000000;
    background-color: #b3cb1c;
    border: 2px solid #b3cb1c;
    border-radius: 50px;
}

.button--rayen::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    background: #7986cb;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    align-items: center;
    justify-content: center;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
}

.button--rayen.button--inverted::before {
    background: #fff;
    color: #37474f;
}

.button--rayen>span {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
    padding: 20px 15px;
}

.button--rayen::before,
.button--rayen>span {
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}

.button--rayen:hover::before {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.button--rayen:hover>span {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.imgcover {
    width: 100%;
    object-fit: cover;
    height: 250px;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;

}

/* --- Grid Layout --- */
.tech-solutions-grid {
    display: grid;
    gap: 15px;
    margin: 0 auto;
    grid-template-columns: 1fr;
    max-width: 1400px;
    /* margin: 0 auto 30px; */
    padding: 0px 0;
}

/* Desktop/Tablet Layout (3 Columns) */
@media (min-width: 768px) {
    .tech-solutions-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(300px, auto);
        /* Adjust height as needed */
    }

    /* Span 2 columns for the AI card */
    .card-ai {
        grid-column: span 2;
    }

    /* Positioning the Cards in a 3x2 grid */
    .card-ai {
        grid-area: 1 / 1 / 2 / 3;
    }

    .card-fintech {
        grid-area: 1 / 3 / 2 / 4;
    }

    .card-blockchain {
        grid-area: 2 / 1 / 3 / 2;
    }

    .card-cybersecurity {
        grid-area: 2 / 2 / 3 / 3;
    }

    .card-gaming {
        grid-area: 2 / 3 / 3 / 4;
    }
}

/* --- Card Base Styling --- */
.card {
    padding: 30px;
    border-radius: 50px;
    overflow: hidden;
    position: relative;
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
}

.card-title {
    font-family: 'Raleway', sans-serif;
    font-size: 2em;
    margin-bottom: 10px;
    margin-top: 10px;
    z-index: 2;
}

.card-description {
    font-size: 1.1em;
    line-height: 1.5;
    margin-top: 0px;
    z-index: 2;
    max-width: 80%;
    color: #383636;
    /* To prevent text from running into images/edges */
}

/* --- Tag Styling --- */
.tags {
    margin-bottom: 10px;
    z-index: 2;
}

.tags span {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 0.8em;
    margin-right: 8px;
    margin-bottom: 8px;
    border: 1px solid rgb(0 0 0);
    opacity: 0.7;
}

/* --- Specific Card Colors --- */
.card-ai {
    background-color: #fff;
    color: #000;
}

.card-fintech {
    background-color: #b3cb1c;
    color: #1a1a1a;
}

.card-fintech .tags span {
    border: 1px solid rgb(0 0 0 / 93%);
    opacity: 1;
    color: #000;
    font-weight: 500;
}

.card-blockchain {
    background-color: #fff;
    color: #000;
}

.card-cybersecurity {
    background-color: #b3cb1c;
    color: #000;
}

.card-gaming {
    background-color: #fff;
    color: #000;
}

/* --- Image Overlays (Crucial for the Look) --- */
.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    /* or contain, depending on the image */
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    /* Position behind text */
    opacity: 0.9;
    /* Slight opacity adjustment */
}

/* Placeholder for Image Backgrounds (REPLACE THESE with your actual image paths/styles) */
.ai-image {
    background-image: url('path/to/robot-head.jpg');
    background-position: center 30%;
    /* Adjust to show the head better */
}

.fintech-image {
    background-image: url('path/to/metal-sphere.jpg');
    background-size: contain;
    /* Since it looks like it floats */
    background-position: right top;
}

.blockchain-image {
    background-image: url('path/to/white-sphere.jpg');
    background-size: contain;
    background-position: left bottom;
}

.cybersecurity-image {
    background-image: url('path/to/shield.jpg');
    background-size: contain;
    background-position: center bottom;
}

.gaming-image {
    background-image: url('path/to/gpu.jpg');
    background-position: right top;
}


.navbar.hidden {
    transform: translateY(calc(97px * -1));
}

.btn-demo {
    background-color: #b3cb1c;
    color: #000;
    padding: 15px 19px;
    border-radius: 4px;
    font-weight: 400;
    transition: background-color var(--transition-speed);
}

.btn-demo:hover {
    background-color: var(--dark-green);
}

/* Utility for smooth height transition */
.u-smooth-height {
    transition: max-height var(--transition-speed) ease-in-out;
    overflow: hidden;
}

/* --- Navbar (Header) Styles --- */
.navbar {
    width: 100%;
    margin: 0 auto;
    display: block;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
}


.navbar-content {
    width: auto;
    min-width: 1000px;
    max-width: fit-content;
    padding: 8px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: #ffffff36;
    backdrop-filter: blur(18px);
    border-radius: 50px;
    /* box-shadow: inset 0 0 0px 2px #ffffff1f; */
}

.logos {
    width: 170px;
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--dark-green);
}

.logo svg {
    margin-right: 8px;
}

/* Nav Links Group (Desktop) */
.nav-links {
    display: flex;
    gap: 25px;
    font-size: 0.95rem;
    height: 100%;
}

.nav-item {
    cursor: pointer;
    padding: 10px 0;
    font-weight: 600;
    color: #fff;
    transition: color var(--transition-speed);
    position: relative;
    display: flex;
    align-items: center;
    font-family: "Raleway", sans-serif;
    /* font-family: "Playfair Display", serif; */
}

.nav-item i {
    transition: transform var(--transition-speed);
}

.nav-item:hover:not(.nav-solutions) {
    /* color: var(--primary-green); */
}

/* Rotate Icon on Hover */
.nav-item:hover i:not(.nav-solutions i) {
    transform: rotate(180deg);
}

.nav-solutions {
    font-weight: 600;
    /* color: var(--primary-green); */
}

.nav-solutions::after {
    content: '';
    position: absolute;
    bottom: 22%;
    left: 0;
    width: 0%;
    height: 3px;
    background-color: var(--primary-green);
    border-radius: 2px 2px 0 0;
    transition: all 0.3s linear;
}

.nav-solutions.hovered::after {
    content: '';
    position: absolute;
    bottom: 22%;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-green);
    border-radius: 2px 2px 0 0;
}

.dropdown-toggle::after {
    display: none;
}

/* .nav-item::after {
    content: '';
    position: absolute;
    bottom: 22%;
    left: 0;
    width: 0%;
    height: 3px;
    background-color: var(--primary-green);
    border-radius: 2px 2px 0 0;
    transition: all 0.3s linear;
} */

/* .nav-item:hover::after {
    content: '';
    position: absolute;
    bottom: 22%;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-green);
    border-radius: 2px 2px 0 0;
} */

.nav-solutions.hovered i {
    transform: rotate(180deg);
}

/* --- Desktop Dropdown Panel (Content-Width) --- */
.dropdown-panel-container {
    position: absolute;
    max-width: 1000px;
    top: 105%;
    width: 100%;
    left: 50.5%;
    border-radius: 50px;
    pointer-events: none;
    opacity: 0;
    background-color: #ffffff36;
    backdrop-filter: blur(18px);
    visibility: hidden;
    transform: translate(-50%, -10px);
    transition: opacity var(--transition-speed) ease, visibility var(--transition-speed), transform var(--transition-speed);
    z-index: 999;
}

.dropdown-panel-container.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0px);
    pointer-events: auto;
}

.panel-inner {
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    /* padding: 30px; */
    position: relative;
    z-index: 10;
    /* background-color: #ffffff75; */
    /* backdrop-filter: blur(30px); */
    overflow: hidden;
}

.dropdown-overlay {
    position: fixed;
    inset: 0;
    top: -10px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-speed);
    z-index: -1;
}

.dropdown-panel-container.open~.dropdown-overlay {
    opacity: 1;
}

/* --- Dropdown Content Layout --- */
.left-sections-horizontal {
    flex: 1;
    display: flex;
    gap: 20px;
    padding-right: 30px;
    border-right: 1px solid var(--border-color);
    padding: 30px;
}

.left-section {
    flex-shrink: 0;
    width: 250px;
}

.section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 25px;
}

.link-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.link-item {
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--transition-speed);
    position: relative;
    width: fit-content;
    color: #fff;
    padding-left: 0;
}

/* .link-item:hover {
    background: #b3cb1c;
} */

.link-item h5 {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0px;
    /* color: #fff; */
}

.link-item p {
    font-size: 0.8rem;
    color: var(--secondary-text);
    line-height: 1.3;
}

/* Right Section (Image Scroller) */
.right-section {
    flex: 0 0 350px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 15px;
    padding: 0 60px 0 30px;
}

.image-scroller {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;

    .scroller-track {
        position: absolute;
        width: 100%;
        display: flex;
        flex-direction: column;
        will-change: transform;
        transition: transform 0.5s linear;
    }
}

/* Base styles for the navbar */
#main-navbar {
    position: fixed;
    /* or 'sticky' depending on your layout */
    top: 10px;
    width: 100%;
    z-index: 1000;
    /* Ensure it's on top of other content */
    /* Add any other styling like background-color, height, etc. */

    /* THE KEY: Add a transition for the 'top' property */
    transition: top 0.3s ease-in-out;
    /* Adjust the time (0.3s) and timing function as needed */
}

/* Style for the hidden state */
#main-navbar.hidden {
    /* Move the navbar up by its own height to hide it */
    top: -80px;
    /* **IMPORTANT:** Replace '80px' with the actual height of your navbar */
}

.image-scroller.is-dragging .scroller-track {
    transition: none;
}

.image-slide {
    flex-shrink: 0;
    width: 100%;
    padding-bottom: 15px;
}

.image-slide:last-child {
    padding-bottom: 0;
}

.image-placeholder {
    width: 100%;
    min-height: 130px;
    border-radius: 12px;
    background-color: var(--light-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Example Image Placeholder Backgrounds */
.img-1 {
    background: url('../images/menu-img1.jpg');
}

.img-2 {
    background: url('../images/menu-img2.jpg');
}

.img-3 {
    background: url('../images/menu-img3.jpg');
}

.img-4 {
    background: url('../images/menu-img4.jpg');
}

.img-5 {
    background: url('../images/menu-img5.jpg');
}

.img-6 {
    background: url('../images/menu-img6.jpg');
}

/* --- Burger Menu and Mobile Sidebar (Restored) --- */
.burger-menu {
    display: none;
    width: 30px;
    height: 25px;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    z-index: 1001;
}

.burger-menu span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #fff;
    border-radius: 2px;
    transition: all var(--transition-speed) ease-in-out;
}

.burger-menu.open span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.burger-menu.open span:nth-child(2) {
    opacity: 0;
}

.burger-menu.open span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* Action Buttons */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mobile-sidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    max-width: 400px;
    height: 100vh;
    background: white;
    z-index: 9999999;
    transition: left var(--transition-speed) ease-in-out;
    padding-top: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}

.mobile-sidebar.open {
    left: 0;
}

.mobile-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: white;
    z-index: 100;
}

.mobile-sidebar-header .close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    padding: 5px;
}

/* Mobile Nav Link Styles (Cleaner UI) */
.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 20px;
}

.mobile-nav-links .nav-item {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 15px 0;
    border-bottom: 1px solid #f2f2f2;
    justify-content: space-between;
    color: #000;
}

.mobile-nav-links .nav-item i {
    font-size: 0.9rem;
    color: var(--secondary-text);
    transition: transform var(--transition-speed);
}

.mobile-nav-links .nav-item.active i {
    transform: rotate(180deg);
}

/* Mobile Dropdown Content */
.mobile-dropdown-content {
    max-height: 0;
    padding: 0 20px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    transition: max-height var(--transition-speed) ease-in-out;
    margin-bottom: 10px;
}

.mobile-dropdown-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px 0;
}

.mobile-dropdown-section .left-section {
    width: 100%;
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.mobile-dropdown-section .left-section h4 {
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.mobile-dropdown-section .left-section .link-group {
    gap: 10px;
}

.mobile-dropdown-section .left-section .link-item {
    padding: 8px 0;
}

.mobile-dropdown-section .right-section {
    width: 100%;
    padding-left: 0;
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.mobile-dropdown-section .image-scroller {
    height: 350px;
    border-radius: 8px;
}

.mobile-dropdown-section .image-placeholder {
    min-height: 120px;
    margin-top: 10px;
    background: #4ae27d;
}

.mobile-dropdown-section .img-2 {
    min-height: 200px;
}

.mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px;
    padding-bottom: 20px;
    /* border-top: 1px solid var(--border-color); */
}

.mobile-nav-actions .nav-item {
    border: none;
    padding-top: 20px;
}

.mobile-nav-actions .btn-demo {
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    padding: 15px;
    margin-top: 10px;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease;
}

.sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* --- Responsiveness --- */
@media (min-width: 1025px) {

    .burger-menu,
    .mobile-sidebar,
    .sidebar-overlay {
        display: none !important;
    }
}

@media (max-width: 1024px) {

    .nav-links,
    .nav-actions {
        display: none;
    }

    .burger-menu {
        display: flex;
    }

    .dropdown-panel-container {
        display: none;
        /* Hide desktop dropdown on mobile */
    }
}


/* Base Carousel Container */
.carousel {
    /* height: 913px; */
    width: 100vw;
    overflow: hidden;
    position: relative;
}

/* Main Slider (Swiper Container) */
.main-slider {
    width: 100%;
    height: 100%;
}

.main-slider .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
    /* FIX: Removed custom opacity, Swiper's fade effect handles this */
}

/* FIX: Removed active opacity */

.main-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content Styling */
.main-slider .swiper-slide .content {
    position: absolute;
    top: 28%;
    width: 1300px;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 5px 10px #0004;
    z-index: 10;
}

.main-slider .swiper-slide .author {
    font-weight: bold;
    letter-spacing: 10px;
}

.main-slider .swiper-slide .title,
.main-slider .swiper-slide .topic {
    font-size: 5em;
    font-weight: bold;
    line-height: 1.3em;
}

.main-slider .swiper-slide .topic {
    color: #b3cb1c;
}

.main-slider .swiper-slide .buttons {
    display: grid;
    grid-template-columns: repeat(2, 130px);
    /* grid-template-rows: 40px; */
    gap: 5px;
    margin-top: 20px;
}

.main-slider .swiper-slide .buttons button {
    border: none;
    background-color: #eee;
    letter-spacing: 3px;
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    cursor: pointer;
}

.main-slider .swiper-slide .buttons button:nth-child(2) {
    background-color: transparent;
    border: 1px solid #fff;
    color: #eee;
}

/* --- Arrows (Navigation) --- */
.arrows {
    position: absolute;
    bottom: 20px;
    right: 25.1%;
    z-index: 100;
    width: 133px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.arrows button {
    width: 60px;
    height: 60px;
    background-color: #ffffff17;
    backdrop-filter: blur(9px);
    border: 2px solid #b3cb1cba;
    color: #fff;
    font-size: 29px;
    font-family: "Raleway", sans-serif;
    transition: .5s;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
}

.arrows button>i {
    font-size: 23px;
    line-height: 140%;
    color: #ffffff;
}

.arrows button:hover {
    background-color: #fff;
    color: #000;
}

.arrows button:hover i {
    color: #000;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    content: none !important;
}

/* --- Custom Thumbnail Styling --- */
.thumbnail-slider {
    position: absolute;
    bottom: 50px;
    right: 50px;
    left: auto;
    transform: none;
    width: 580px;
    height: 250px;
    z-index: 100;
    overflow: hidden !important;
    padding: 0;
}

.thumbnail-slider .swiper-wrapper {
    display: flex;
    gap: 20px;
}

.thumbnail-slider .swiper-slide {
    width: 180px;
    height: 250px;
    flex-shrink: 0;
    position: relative;
    opacity: 1;
    transition: opacity 0.5s ease;
    border-radius: 20px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.thumbnail-slider .swiper-slide-thumb-active {
    opacity: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    transform: none !important;
}

.thumbnail-slider .swiper-slide:not(.swiper-slide-thumb-active) {
    transform: none !important;
}

.thumbnail-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    filter: brightness(0.7);
    transition: filter 0.3s ease;
}

.thumbnail-slider .swiper-slide-thumb-active img {
    filter: brightness(1);
}

.thumbnail-slider .swiper-slide .content {
    color: #fff;
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    z-index: 2;
    text-align: center;
    text-shadow: 0 2px 5px #0008;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    padding-top: 50px;
    padding-bottom: 5px;
    margin: -15px;
    border-radius: 0 0 20px 20px;
}

.thumbnail-slider .swiper-slide .content .title {
    font-weight: 600;
    font-size: 1.1em;
    margin-bottom: 5px;
}

.thumbnail-slider .swiper-slide .content .description {
    font-weight: 300;
    font-size: 0.9em;
    opacity: 0.8;
}

/* Time Running Indicator */
.carousel .time {
    position: absolute;
    z-index: 1000;
    width: 0%;
    height: 3px;
    background-color: #f1683a;
    left: 0;
    top: 0;
}

/* GSAP/Animation Preparation */
.main-slider .swiper-slide .content>* {
    opacity: 0;
}


/* footer */
/* Footer Container - The outer white box with shadow/border */

.graphy-footer-container {
    background-color: #ffffff;
    /* border-radius: 12px;  */
    box-shadow: 0 4px 21px 4px rgb(0 0 0 / 9%);
    padding: 40px 60px;
    margin: 0;
    position: relative;
    overflow: hidden;
    width: 100%;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    padding-bottom: 20px;
}

/* Footer Content - Main layout structure (Logo + Link Columns) */
.graphy-footer-main {
    display: flex;
    justify-content: left;
    margin-bottom: 30px;
    border-bottom: 1px solid #e0e0e0;
    /* Separator line above copyright */
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
    position: relative;
    /* Ensure content stays above the absolute 'W' */
    z-index: 2;
    /* Keep content above the video 'W' */
}

/* Brand Section (Logo, Text, Social Icons) */
.graphy-footer-brand {
    width: 24%;
    min-width: 250px;
    margin-right: 20px;
}

.graphy-logo {
    width: 250px;
    margin-bottom: 15px;
}

.graphy-logo svg {
    margin-right: 8px;
}

.graphy-description {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 140%;
    color: #000;
    margin: 0 0 20px 0;
    font-weight: 400;
    position: relative;
    display: inline;
}

/* .graphy-description::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    left: 0;
    
} */
.link-hover-animation-1 {
    --bs-link-hover-animation-color: #b3cb1c;
    background: linear-gradient(to right, #b3cb1c 0%, #b3cb1c 100%);
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: 0px 2px;
    background-repeat: no-repeat;
    background-position: left 100%;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    --bs-btn-border-radius: 0 !important;
    font-family: 'Raleway';
}

.link-hover-animation-1:hover {
    background-size: 100% 2px;
}

.img-con {
    width: 500px;
    display: block;
}

.img-con p {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    line-height: 140%;
}

.graphy-social-links {
    display: flex;
    gap: 5px;
    margin-top: 20px;
}

/* Social Links */
.graphy-social-links a {
    font-size: 18px !important;
    color: #1c1b1f;
    transition: color 0.2s;
    /* width: 50px; */
    /* height: 50px; */
    display: inline-block;
    /* border: 1px solid #b3cb1c; */
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin-right: 1rem !important;
}

.graphy-social-links a:hover {
    /* border: 2px solid #000; */
    color: #879b07;
}

/* Link Columns (Product, Resources, Company) */
.graphy-footer-links {
    flex-grow: 1;
    flex-basis: 33.3%;
    margin-bottom: 20px;
    /* width: ; */
}

.graphy-footer-links h4 {
    font-family: 'Raleway', sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 140%;
    text-align: left;
}

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

.graphy-footer-links li {
    margin-bottom: 16px;
}

.graphy-footer-links a {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    color: #5f5f5f;
    transition: color 0.2s;
    line-height: 140%;
    margin: 0;
    font-weight: 400;
}

/* .graphy-footer-links a:hover {
    color: #1c1b1f;
} */

.graphy-footer-video {
    /* position: absolute !important; */
    /* flex-grow: 1; */
    width: 33.3%;
    margin-bottom: 0px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 250px;
    /* width: 20vw;
    height: 30vh;
    bottom: 2px;
    right: -5%; */
    z-index: 0;
}

.graphy-footer-links ul li a {
    position: relative;
}

.graphy-footer-links ul li a:hover {
    position: relative;
    color: #000;
}

.graphy-footer-links ul li a:after {
    content: '';
    width: 0%;
    height: 1.5px;
    position: absolute;
    left: 0;
    bottom: -6px;
    transition: all 0.5s linear;
}

.graphy-footer-links ul li a:hover:after {
    width: 100%;
    background-color: var(--primary-green);

}

#masked-video {
    width: 98%;
    height: 98%;
    object-fit: cover;
}

/* Bottom Row (Copyright & Legal) */
.graphy-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #555555;
    position: relative;
    /* Ensure content stays above the absolute 'W' */
    z-index: 2;
    /* Keep content above the video 'W' */
}

.graphy-copyright {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 140%;
    color: #000;
    font-weight: 400;
    margin: 0;
}

.graphy-legal-links a {
    margin-left: 0px;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    line-height: 140%;
    color: #000;
    font-weight: 400;
}

.graphy-legal-links a:hover {
    text-decoration: underline;
    color: #1c1b1f;
}

.graphy-legal-links span {
    margin: 0 0.3rem;
}

.graphy-footer-video img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
}

/* =================================
           VIDEO 'W' MASKING STYLES
           ================================= */
.video-w-container {
    position: absolute;
    bottom: -50px;
    /* Adjust as needed */
    right: -50px;
    /* Adjust as needed */
    width: 450px;
    /* Initial large size */
    height: 450px;
    /* Initial large size, roughly square */
    z-index: 1;
    /* Place behind other footer content */
    pointer-events: none;
    /* Make it unclickable */
}

#wVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cover the container without distortion */
    /* The SVG "W" shape is defined in the CSS mask-image property */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23000000" d="M0 0 L20 100 L40 0 L60 100 L80 0 L100 100 L80 100 L65 50 L50 100 L35 50 L20 100 L0 100 L10 50 Z"/></svg>');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;

    /* Webkit specific for broader browser support */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path fill="%23000000" d="M0 0 L20 100 L40 0 L60 100 L80 0 L100 100 L80 100 L65 50 L50 100 L35 50 L20 100 L0 100 L10 50 Z"/></svg>');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.pt-50 {
    padding-top: 50px;
}

.latest-portfolio {
    width: 96%;
    margin: 0 auto;
    padding: 50px 0px 30px;
    position: relative;
}

.latest-portfolio:after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient();
}


h1 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 40px;
    color: #fff;
    font-weight: 500;
}

/* GALLERY CONTAINER (FLEXBOX) */
.portfolio-gallery {
    display: flex;
    height: 60vh;
    /* CRITICAL: Fixed height reference for items */
    gap: 5px;
}

/* GALLERY ITEMS */
.gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex-grow: 0.5;
    transition: all 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 20px;
}

/* Expanded Item: flex-grow: 7 approximates 50% width */
.gallery-item.active {
    flex-grow: 5;
}

.gallery-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #000 -15%, transparent 57%);
    z-index: 9;
}

.gallery-item.active::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0d0d0c 15%, transparent 57%);
    z-index: 9;
}

.tag {
    color: #b3cb1c;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 140%;
}

/* IMAGE STYLING */
.item-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    filter: brightness(1);
}

/* TEXT CONTENT */
.content-overlay {
    position: absolute;
    bottom: 10px;
    left: 90px;
    right: 20px;
    z-index: 10;
    opacity: 0;
    /* Handled by GSAP */
    pointer-events: none;
}

.content-overlay h2 {
    font-family: 'Raleway', sans-serif;
    font-size: 44px;
    line-height: 140%;
    margin: 0 0 10px 0;
    font-weight: 700;
    color: #fff;
}

.content-overlay p {
    font-family: 'Raleway', sans-serif;
    max-width: 694px;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 400;
    color: #fff;
    line-height: 140%;
}

.item-number {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 1.5rem;
    z-index: 11;
    opacity: 1;
    color: #fff;
}

/* ARROW CIRCLE STYLING */
.arrow-wrapper {
    position: absolute;
    bottom: 20px;
    right: 0;
    width: 80px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
    will-change: transform;
    background-color: #b3cb1c;
}

.arrow-wrapper:hover .arrow-up,
.arrow-wrapper:hover .arrow-down {
    stroke: #000;
}

.arrow-wrapper:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 0%;
    background: #b3cb1c;
    z-index: -1;
    border-radius: 50%;
    transition: all 0.8s linear;

}

.arrow-wrapper:hover:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: -1;
}

.arrow-container {
    position: relative;
    width: 50px;
    height: 50px;
}

.arrow-up,
.arrow-down {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    stroke: #fff;
    stroke-width: 1.5;
    fill: none;
    will-change: transform, opacity;
}

.arrow-down {
    opacity: 0;
}

/* --- SECTION LAYOUT (The main container) --- */
.testimonial-section {
    display: flex;
    background-color: #111111;
    height: 900px;
    border-radius: 50px;
    overflow: hidden;
    width: 100%;
    margin: 0 auto 0px;
    padding: 0px 0;
    /* margin-bottom: 80px; */
    position: relative;
}

.testimonial-section:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(181deg, black 10%, transparent 50%);
}

.testimonial-section:before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(0deg, black 10%, transparent 50%);
    z-index: 3;
}

.testimonial-content {
    flex: 1;
    padding: 90px 70px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #fff;
    max-width: 55%;
}

.testimonial-swiper {
    width: 100%;
    flex-grow: 1;
    /* Ensure enough space for the pagination to be visible */
    max-height: calc(100% - 60px);
    /* Adjust based on pagination/margin needs */
    overflow: hidden;
    /* Important for creative effect */
}

/* Swiper-specific overrides for creative effect */
.swiper-slide {
    /* Keep flex column for internal content alignment */
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    pointer-events: auto;
    /* Ensure slides are clickable/draggable */
}

/* Ensure .swiper-wrapper is allowed to move horizontally */
.swiper-wrapper {
    display: flex;
    /* Default is fine for horizontal */
    flex-direction: row;
    /* Explicitly set to ensure it's not column */
    align-items: flex-start;
    /* Align content to top within the slide */
}

/* --- TESTIMONIAL STYLING (LEFT SIDE) --- */

.quote-marks {
    font-family: serif;
    font-size: 10rem;
    font-weight: 900;
    line-height: 0.8;
    margin-bottom: 5px;
    color: var(--primary-green);
    opacity: 0.6;
    flex-shrink: 0;
    /* Prevent from shrinking */
}

.quote-text {
    font-size: 2rem;
    /* font-weight: 700; */
    line-height: 1.25;
    margin-bottom: auto;
    /* Pushes author-info to the bottom */
    flex-grow: 1;
    /* Allows text to grow */
    font-family: 'Raleway';
}

.author-info {
    align-self: flex-start;
    margin-top: 20px;
    flex-shrink: 0;
    margin-bottom: 50px;
}

.author-name {
    font-size: 1rem;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

.author-title {
    font-size: 0.85rem;
    color: #aaaaaa;
    font-weight: 400;
    border-top: 1px solid #aaaaaa;
    padding-top: 5px;
    margin-top: 5px;
    display: inline-block;
}

/* Custom Swiper Pagination Dots */
.custom-pagination {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    justify-content: flex-start;
}

/* Custom Swiper Pagination Dots */
.custom-pagination {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    justify-content: flex-start;
    /* position: static; <-- DELETE THIS LINE IF IT REMAINS */
}


.swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: #aaaaaa;
    opacity: 0.4;
    border-radius: 50%;
    transition: all 0.3s;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary-green);
}

/* --- IMAGE GRID STYLING (RIGHT SIDE) --- */

.image-grid {
    flex: 1;
    display: flex;
    height: 100%;
    overflow: hidden;
    /* Crucial for animation masking */
    max-width: 45%;
    width: 100%;
    background-color: #000;
    position: relative;
    /* For absolutely positioning image columns */
}

.image-column {
    width: 25%;
    height: auto;
    /* Allow content to define height */
    position: absolute;
    /* Position within .image-grid */
    top: 0;
    left: 0;
    /* Adjust for column-right */
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.column-right {
    left: 25%;
}

.column-left {
    left: 0;
    padding-left: 0;
}

.column-third {
    left: 50%;
}

.column-fourth {
    left: 75%;
    padding-right: 0;
}

.image-wrapper {
    width: 100%;
    min-height: 250px;
    overflow: hidden;
    border-radius: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    /* Prevent images from shrinking */
    cursor: pointer;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-column .image-wrapper:nth-child(even) {
    min-height: 300px;
}

.image-column .image-wrapper:nth-child(odd) {
    min-height: 200px;
}

.testimonial-section--gallery-only .testimonial-content {
    display: none;
}

.testimonial-heading-wrap {
    width: 96%;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
}

.testimonial-section--gallery-only .image-grid {
    max-width: 100%;
    flex: 0 0 100%;
}

.image-popup-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 20px;
}

.image-popup-modal.is-open {
    display: flex;
}

body.image-popup-open {
    overflow: hidden;
}

.image-popup-content {
    width: min(1000px, 100%);
    max-height: calc(100vh - 40px);
    background: #101010;
    border: 1px solid #2c2c2c;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

.image-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

#image-popup-preview {
    width: 100%;
    max-height: 68vh;
    object-fit: contain;
    background: #000;
    display: block;
}

.image-popup-meta {
    padding: 18px 22px 22px;
}

#image-popup-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: 1.25rem;
}

.image-popup-toggle {
    border: 1px solid #3d3d3d;
    background: #161616;
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
}

#image-popup-description {
    margin: 14px 0 0;
    color: #d2d2d2;
    line-height: 1.5;
    max-width: 70ch;
}

/* --- Section Layout --- */
.experience-section {
    display: flex;
    position: relative;
    width: 96%;
    margin: 0 auto;
    padding: 50px 0 100px;
    align-items: flex-start;
}

.left-col2 {
    position: sticky;
    top: 30px;
}

/* Left Column (Sticky Part) */
.left-col {
    width: 30%;
    padding-right: 50px;
    position: sticky;
    top: 0;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* padding-top: 60px; */
    z-index: 10;
    /* padding-bottom: 160px; */
}

/* 
.left-col h1 {
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 10px;
} */

/* Right Column (Accordion Content) */
.right-col {
    width: 70%;
    padding-left: 50px;
    z-index: 1;
}

/* --- Job Item Styling (Accordion) --- */
.job-item {
    padding-top: 50px;
    padding-bottom: 0;
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid #fff;
}

.pt-0 {
    padding-top: 0;
}


/* Header (The Clickable Part) */
.job-item .job-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    cursor: pointer;
    padding-bottom: 20px;
}

.job-item h2 {
    font-size: 1.7rem;
    font-weight: 400;
    color: #fff;
    transition: color 0.3s;
    font-family: 'Raleway';
}

.d-inline-block {
    display: inline-block !important;
}

.tp-rounded-btn-wrap a {
    width: 160px;
    height: 160px;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    color: var(--tp-common-black);
    font-family: var(--tp-ff-heading);
    border: 1px solid var(--tp-border-1);
    background: var(--tp-common-white);
    border-radius: 50%;
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    padding-top: 40px;
}

.tp-btn-rounded {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.mb-10 {
    margin-bottom: 10px;
}

.d-block {
    display: block !important;
}

.tp-btn-circle-dot {
    position: absolute;
    bottom: 0;
    left: 32px;
    width: 0px;
    height: 0px;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    line-height: 20px;
    border-radius: 50%;
    background-color: var(--tp-theme-primary);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 1px solid transparent;
    z-index: -1;
}

.aleric-dark .tp-rounded-btn-wrap a {
    border: 1px solid var(--tp-border-3);
    background: var(--tp-common-black);
    color: var(--tp-common-white);
}

.aleric-dark .tp-rounded-btn-wrap a:hover {
    color: var(--tp-common-black);
}

.job-description {
    margin-top: 10px;
    margin-bottom: 30px;
    color: #fff;
    line-height: 1.5;
}


.fill-container {
    position: relative;
    text-align: center;
    height: 312px;
}

.fill-container span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: inline-block;
}

.link-item h5 {
    line-height: 1.1 !important;
}

/* Base Text Layer (White) */
.text-white {
    color: #FFFFFF;
    z-index: 1;
}

.dropdown-overlay.active {
    opacity: 1;
}

.text-start {
    text-align: start;
}

/* Green Fill Layer (Clipped/Hidden) */
.text-green {
    color: #b3cb1c;
    z-index: 2;
    clip-path: inset(0% 100% 0% 0%);
}

img,
svg {
    vertical-align: middle;
}

/* Hover effect for clickable header */
.job-item.active .job-header h2,
.job-item .job-header:hover h2 {
    color: #b3cb1c;
}

.job-item .job-dates {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 300;
    position: relative;
    padding-right: 30px;
}

/* Accordion Indicator (The plus/minus sign) */
.job-item .job-dates::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    transition: content 0.3s;
}

.job-item.active .job-dates::after {
    content: '−';
}

:is(.fa-brands)::before {
    font-family: 'FontAwesome' !important;
}

/* Description Content (The Collapsible Part) */
.job-content {
    max-height: 0;
    overflow: hidden;

    /* CRITICAL: Defines the smooth transition for opening/closing */
    transition: max-height 0.4s ease-in-out;

    /* Example Padding/Styling for open content */
    padding: 0 15px;
    /* Adjust horizontal padding as needed */
}

.job-item.active .job-content {
    padding-bottom: 20px;
    /* max-height: 100% !important; */
}

.job-item .job-agency {
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 1.1rem;
    color: #aaaaaa;
}

.job-item .agency-name {
    text-decoration: underline;
}

.job-item .job-description {
    font-size: 1.2rem;
    font-weight: 300;
    max-width: 70%;
    margin-bottom: 20px;
    font-family: 'Raleway';
}

.job-divider {
    border: none;
    border-top: 1px solid #333333;
    margin-top: 0;
    width: 100%;
    transition: opacity 0.2s ease-in-out 0.4s;
    opacity: 0;
}

.job-item.active .job-content .job-divider {
    opacity: 1;
}

.job-item:last-child .job-divider {
    display: none;
}

.stage {
    position: relative;
    width: 100%;
    height: 100vh;
    perspective: 1200px;
}

.carousel {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    z-index: 1;
}

.box {
    position: absolute;
    /* width: 700px;
    height: 550px; */
    width: 320px;
    height: 400px;
    left: 50%;
    bottom: -22%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
}

.box img {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    object-fit: cover;
    border: 2px solid #fff;
    background: red;
}


.my-3d-carousel {
    cursor: grab;
}

.my-3d-carousel:active {
    cursor: grabbing;
}

.carousel-box:after {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(357deg, black 0%, transparent 30%);
    top: 0;
    left: 0;
    position: absolute;
    border-radius: 30px;
    z-index: 0;
    pointer-events: none;
}

.ban-sec h1 {
    font-size: 70px;
    margin-bottom: 20px;
}

.gapanalysis-hero h4 {
    font-size: 3rem;
}

.gapanalysis-insights h4 {
    font-size: 3rem;
}

.gap-sec2 {
    padding-bottom: 80px;
    margin-bottom: -50px;
    border-radius: 0px 0px 50px 50px;
    z-index: 999;
    position: relative;
}

.latest-portfolio h4 {
    font-size: 3rem;
}


/* --- Responsiveness (Mobile) --- */
@media (max-width: 1450px) {
    .navbar-content {
        min-width: 800px;
        max-width: fit-content;
        padding: 8px 30px;
    }

    .dropdown-panel-container {
        max-width: 800px;
    }

    .right-section {
        width: 100%;
        flex: unset;
        padding: 0 10px 0 10px;
    }

    .navbar {
        padding: 0 20px;
    }
}

@media (max-width: 1200px) {
    .navbar {
        padding: 0 10px;
    }

    .logos {
        width: 150px;
    }

    .newbtn {
        padding: 8px 10px 8px 20px !important;
        font-size: 14px !important;
    }

    .navbar-content {
        min-width: 700px;
        max-width: 700px;
        padding: 0;
    }

    .dropdown-panel-container {
        max-width: 700px;
    }

    .nav-item {
        font-size: 13px;
    }

    .left-section {
        flex-shrink: 0;
        width: 190px;
    }
}

@media (max-width:1300px) {
    .logos {
        width: 150px;
    }

    .nav-links {
        gap: 18px;
    }
}

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

    .navbar-content {
        min-width: 100px;
        max-width: 100px;
        padding: 0;
    }
} */

@media screen and (max-width: 400px) {

    .reveal-wrapper h1 {
        font-size: 1.6rem !important;
    }

    .carousel .list .item {
        width: 145px;
        height: 230px;
    }

    .list .item .content {
        left: -79px;
        scale: 0.7;
    }

    .arrows {
        bottom: 117px !important;
        right: 68% !important;
    }
}

@media (max-width: 768px) {
    .content-overlay h2 {
        font-size: 16px;
    }

    .arrow-wrapper {
        width: 60px;
        height: 60px;
    }

    .arrow-container {
        width: 30px;
        height: 30px;
    }

    .left-col2 {
        position: relative;
        top: 0;
        padding-bottom: 35px;
    }

    .carousel {
        height: 100vh;
    }

    .experience-section {
        flex-direction: column;
        padding: 40px 15px;
    }

    .navbar-content {
        min-width: 150px;
        max-width: 70px;
        height: 70px;
        padding: 0;
    }

    .burger-menu {
        width: 20px;
        height: 20px;
    }

    .left-col {
        position: static;
        width: 100%;
        height: auto;
        padding-right: 0;
        padding-top: 0;
        margin-bottom: 30px;
        text-align: center;
    }

    .left-col h1 {
        font-size: 3rem;
    }

    .right-col {
        width: 100%;
        padding-left: 0;
    }

    .job-item h2 {
        font-size: 1.5rem;
    }

    /* On mobile, keep content open and disable max-height transition */
    /* .job-content {
        max-height: 0;
        opacity: 1;
        padding-bottom: 0px;
    } */

    /* .job-item .job-dates::after {
        content: '';
    } */


}

/* --- RESPONSIVENESS --- */
@media (max-width: 992px) {
    .testimonial-section {
        flex-direction: column;
        min-height: auto;
        height: auto;
    }

    .testimonial-content {
        max-width: 100%;
        padding: 40px 30px;
    }

    .image-grid {
        max-width: 100%;
        min-height: 350px;
        padding: 5px;
        position: relative;
        /* For containing absolute columns */
    }

    .image-column {
        position: static;
        /* Reset to static for flow on smaller screens */
        width: 25%;
        padding: 5px;
        left: auto;
        top: auto;
        /* Reset positioning */
    }

    /* On mobile, column-left first, then column-right */
    .image-grid {
        display: flex;
        flex-direction: row;
        /* Ensure columns stay side-by-side if enough space */
        flex-wrap: nowrap;
        /* Prevent wrapping if space is tight */
    }

    .quote-text {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .quote-text {
        font-size: 1.5rem;
    }

    .testimonial-content {
        padding: 30px 20px;
    }

    .image-grid {
        min-height: 250px;
        flex-direction: column;
        /* Stack images vertically on very small screens */
    }

    .image-column {
        width: 50%;
    }

    .testimonial-heading-wrap {
        width: 100%;
        padding: 0 10px;
        margin-bottom: 14px;
        flex-direction: row;
        align-items: flex-start;
    }

    .image-popup-content {
        border-radius: 14px;
    }
}

.testimonial-slide {
    opacity: 0 !important;
}

.testimonial-slide.swiper-slide-active {
    opacity: 1 !important;
}

.disc li {
    list-style: disc;
    color: #1c1c1c;
    font-family: 'Raleway';
    font-size: 16px;
    line-height: 26px;
}

.stack1 p {
    line-height: 26px;
}



/* --- RESPONSIVENESS (Mobile/Tablet) --- */
@media (max-width: 768px) {
    .portfolio-gallery {
        flex-direction: column;
        height: auto;
        gap: 5px;
    }

    .gallery-item {
        height: 150px;
        flex-grow: 1 !important;
    }

    .gallery-item.active {
        height: 350px;
    }

    .content-overlay p {
        display: none;
    }
}

/* =================================
           RESPONSIVE DESIGN (Media Queries)
           ================================= */

/* Tablet and smaller desktops (992px) */
@media (max-width: 992px) {
    .graphy-footer-main {
        gap: 30px;
        /* Add gap between sections for better spacing */
    }

    .graphy-footer-brand {
        width: 100%;
        /* Brand section takes full width */
        margin-right: 0;
        margin-bottom: 30px;
    }

    /* Distribute the link columns more evenly */
    .graphy-footer-links {
        flex-basis: calc(33.33% - 20px);
        /* Three columns per row */
        min-width: 120px;
    }

    .video-w-container {
        width: 350px;
        /* Smaller 'W' */
        height: 350px;
        bottom: -30px;
        right: -30px;
    }
}

/* Mobile Devices (576px) */
@media (max-width: 576px) {
    .graphy-footer-container {
        padding: 30px 20px;
        /* Reduce padding on mobile */
    }

    .graphy-footer-main {
        border-bottom: none;
        /* Remove separator line in main section */
    }

    /* Stack link columns vertically */
    .graphy-footer-links {
        flex-basis: 100%;
        border-top: 1px solid #e0e0e0;
        /* Add a separator between stacked columns */
        padding-top: 20px;
        margin-top: 15px;
    }

    /* Stack copyright and legal links vertically */
    .graphy-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 20px;
        /* border-top: 1px solid #e0e0e0; */
        /* Separator line */
    }

    .graphy-copyright {
        margin-bottom: 15px;
    }

    .graphy-legal-links a {
        margin-left: 0;
        margin-right: 15px;
        /* Add spacing between legal links */
    }

    .video-w-container {
        width: 200px;
        /* Even smaller 'W' on mobile */
        height: 200px;
        bottom: -10px;
        right: -10px;
        opacity: 0.6;
        /* Make it slightly less prominent on small screens */
    }
}


/* Responsive adjustments */
@media screen and (max-width: 900px) {
    .main-slider .swiper-slide .content {
        padding-right: 0;
        top: 15%;
        max-width: 90%;
    }

    .main-slider .swiper-slide .content .title,
    .main-slider .swiper-slide .content .topic {
        font-size: 2em;
    }

    .main-slider .swiper-slide .content .des {
        display: none;
    }

    .fs-50 {
        font-size: 31px;
    }

    .thumbnail-slider {
        bottom: 20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 95%;
        height: 180px;
        overflow: hidden !important;
    }

    .thumbnail-slider .swiper-slide {
        width: 120px;
        height: 180px;
        border-radius: 15px;
    }

    .thumbnail-slider .swiper-slide-thumb-active {
        transform: none !important;
    }

    .thumbnail-slider .swiper-slide:not(.swiper-slide-thumb-active) {
        transform: none !important;
    }

    .thumbnail-slider .swiper-slide .content {
        bottom: 10px;
        left: 10px;
        right: 10px;
        padding-top: 30px;
        margin: -10px;
    }

    .arrows {
        top: auto;
        bottom: 220px;
        right: 50%;
        transform: translateX(50%);
    }

    .ban-sec h1 {
        font-size: 2rem;
    }

    .gapanalysis-hero h4 {
        font-size: 2rem;
    }

    .gapanalysis-insights h4 {
        font-size: 2rem;
    }

    .latest-portfolio h4 {
        font-size: 2rem;
    }

    .ban-sec .ps-60px {
        padding-left: 20px !important;
    }

    .ban-sec {
        background: #dcdcdc;
    }

    .ban-sec .pt-100 {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .gapanalysis-hero {
        padding: 120px 0 90px !important;
    }

    .link-item {
        color: #000;
    }

    .mobile-dropdown-content {
        border: none;
        padding: 0 10px;
    }

    .mobile-dropdown-section {
        display: flex;
        gap: 0px;
        padding: 10px 0;
    }

    .mobile-dropdown-section .left-section {
        padding: 6px 15px;
        border-radius: 0;
    }

    .navbar-content {
        justify-content: end;
    }

    .mobile-sidebar-header {
        padding: 10px 20px;
        border-bottom: none;
        padding-bottom: 2rem;
    }

    .nav-item:hover i:not(.nav-services-mobile i) {
        transform: rotate(180deg);
    }
}