:root {
    --body-bg-rgb:
        249,
        250,
        252;
    --primary-rgb:
        17,
        71,
        117;
    --primary-tint1-rgb:
        227,
        84,
        212;
    --primary-tint2-rgb:
        255,
        93,
        159;
    --primary-tint3-rgb:
        255,
        142,
        111;
    --secondary-rgb:
        158,
        92,
        247;
    --warning-rgb:
        255,
        198,
        88;
    --info-rgb:
        14,
        165,
        232;
    --success-rgb:
        33,
        206,
        158;
    --danger-rgb:
        251,
        66,
        66;
    --light-rgb:
        249,
        249,
        250;
    --dark-rgb:
        10,
        10,
        10;
    --orange-rgb:
        254,
        124,
        88;
    --pink-rgb:
        254,
        84,
        155;
    --teal-rgb:
        0,
        216,
        216;
    --purple-rgb:
        123,
        118,
        254;
    --green-rgb:
        1,
        239,
        140;
    --default-body-bg-color: rgb(var(--body-bg-rgb));
    --primary-color: rgb(var(--primary-rgb));
    --primary-tint1-color: rgb(var(--primary-tint1-rgb));
    --primary-tint2-color: rgb(var(--primary-tint2-rgb));
    --primary-tint3-color: rgb(var(--primary-tint3-rgb));
    --primary-border: rgb(var(--primary-rgb));
    --primary01: rgba(var(--primary-rgb), 0.1);
    --primary02: rgba(var(--primary-rgb), 0.2);
    --primary03: rgba(var(--primary-rgb), 0.3);
    --primary04: rgba(var(--primary-rgb), 0.4);
    --primary05: rgba(var(--primary-rgb), 0.5);
    --primary06: rgba(var(--primary-rgb), 0.6);
    --primary07: rgba(var(--primary-rgb), 0.7);
    --primary08: rgba(var(--primary-rgb), 0.8);
    --primary09: rgba(var(--primary-rgb), 0.9);
    --primary005: rgba(var(--primary-rgb), 0.05);
    --default-font-family: "Poppins", sans-serif;
    --default-font-weight: 400;
    --default-text-color: #212b37;
    --default-border: #ecf3fb;
    --default-background: #f9fafb;
    --menu-bg: #fff;
    --menu-prime-color: #61748f;
    --menu-border-color: #e2e6f1;
    --header-bg: #fff;
    --header-prime-color: #61748f;
    --header-border-color: #e2e6f1;
    --custom-white: #fff;
    --custom-black: #000;
    --bootstrap-card-border: #ecf3fb;
    --list-hover-focus-bg: #f5f6f7;
    --text-muted: #6e829f;
    --input-border: #dee7f1;
    --form-control-bg: #ffffff;
    --bs-link-color-rgb: var(--default-text-color);
    --gray-1: #f9fafb;
    --gray-2: #f2f4f5;
    --gray-3: #e6eaeb;
    --gray-4: #dbdfe1;
    --gray-5: #949eb7;
    --gray-6: #7987a1;
    --gray-7: #4d5875;
    --gray-8: #383853;
    --gray-9: #323251;
    --white-1: rgba(255, 255, 255, 0.1);
    --white-2: rgba(255, 255, 255, 0.2);
    --white-3: rgba(255, 255, 255, 0.3);
    --white-4: rgba(255, 255, 255, 0.4);
    --white-5: rgba(255, 255, 255, 0.5);
    --white-6: rgba(255, 255, 255, 0.6);
    --white-7: rgba(255, 255, 255, 0.7);
    --white-8: rgba(255, 255, 255, 0.8);
    --white-9: rgba(255, 255, 255, 0.9);
    --black-1: rgba(0, 0, 0, 0.1);
    --black-2: rgba(0, 0, 0, 0.2);
    --black-3: rgba(0, 0, 0, 0.3);
    --black-4: rgba(0, 0, 0, 0.4);
    --black-5: rgba(0, 0, 0, 0.5);
    --black-6: rgba(0, 0, 0, 0.6);
    --black-7: rgba(0, 0, 0, 0.7);
    --black-8: rgba(0, 0, 0, 0.8);
    --black-9: rgba(0, 0, 0, 0.9);
}

[data-theme-mode=dark] {
    --body-bg-rgb:
        25,
        25,
        28;
    --body-bg-rgb2:
        45,
        45,
        48;
    --menu-bg: rgb(var(--body-bg-rgb));
    --menu-border-color: rgba(255, 255, 255, 0.1);
    --menu-prime-color: rgba(255, 255, 255, 0.4);
    --header-bg: rgb(var(--body-bg-rgb));
    --header-prime-color: rgba(255, 255, 255, 0.4);
    --header-border-color: rgba(255, 255, 255, 0.1);
    --custom-white: rgb(var(--body-bg-rgb));
    --custom-black: #fff;
    --default-border: rgba(255, 255, 255, 0.1);
    --default-text-color: rgba(255, 255, 255, 0.8);
    --light-rgb:
        43,
        46,
        49;
    --dark-rgb:
        240,
        245,
        248;
    --bootstrap-card-border: rgba(255, 255, 255, 0.1);
    --list-hover-focus-bg: rgba(255, 255, 255, 0.1);
    --default-background: rgb(var(--body-bg-rgb2));
    --default-body-bg-color: rgb(var(--body-bg-rgb2));
    --text-muted: rgba(255, 255, 255, 0.5);
    --input-border: rgba(255, 255, 255, 0.1);
    --form-control-bg: rgb(var(--body-bg-rgb));
    color-scheme: dark;
    --gray-1: #110f0f;
    --gray-2: rgba(255, 255, 255, 0.1);
    --gray-3: #393946;
    --gray-4: rgba(255, 255, 255, 0.2);
    --gray-5: #73738c;
    --gray-6: #8f8fa3;
    --gray-7: #ababba;
    --gray-8: #c7c7d1;
    --gray-9: #e3e3e8;
    --white-1: rgba(0, 0, 0, 0.1);
    --white-2: rgba(0, 0, 0, 0.2);
    --white-3: rgba(0, 0, 0, 0.3);
    --white-4: rgba(0, 0, 0, 0.4);
    --white-5: rgba(0, 0, 0, 0.5);
    --white-6: rgba(0, 0, 0, 0.6);
    --white-7: rgba(0, 0, 0, 0.7);
    --white-8: rgba(0, 0, 0, 0.8);
    --white-9: rgba(0, 0, 0, 0.9);
    --black-1: rgba(255, 255, 255, 0.1);
    --black-2: rgba(255, 255, 255, 0.2);
    --black-3: rgba(255, 255, 255, 0.3);
    --black-4: rgba(255, 255, 255, 0.4);
    --black-5: rgba(255, 255, 255, 0.5);
    --black-6: rgba(255, 255, 255, 0.6);
    --black-7: rgba(255, 255, 255, 0.7);
    --black-8: rgba(255, 255, 255, 0.8);
    --black-9: rgba(255, 255, 255, 0.9);
}

.carousel-item h1,
.carousel-item h2 {
    color: var(--white-9);
    padding: 2rem;
    text-align: center;
}

.carousel-item p {
    color: var(--white-7);
    text-align: center;
}

.vinar-carousel .carousel-item {
    padding-bottom: 5rem !important;
    /* Added padding to prevent indicator overlap */
}

/* Carousel Enhancements */
.vinar-carousel .carousel-item.active,
.vinar-carousel .carousel-item-next,
.vinar-carousel .carousel-item-prev {
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: 200% 200%;
    animation: gradientMove 15s ease infinite;
    border-radius: 0;
}

/* Ensure background persists during transition */
.vinar-carousel .carousel-item {
    background-size: 200% 200%;
    border-radius: 0px;
}

/* Custom Gradients overriding text-bg-* */
.vinar-carousel .carousel-item.text-bg-primary {
    background: linear-gradient(45deg, rgba(var(--primary-rgb), 1), rgba(var(--secondary-rgb), 1), rgba(var(--info-rgb), 1)) !important;
}

.vinar-carousel .carousel-item.text-bg-secondary {
    background: linear-gradient(45deg, rgba(var(--secondary-rgb), 1), rgba(var(--purple-rgb), 1), rgba(var(--primary-rgb), 1)) !important;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Typography Enhancements */
.vinar-carousel h1,
.vinar-carousel h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.3s;
    padding-left: 10%;
    padding-right: 10%;
}

.vinar-carousel p {
    padding-bottom: 2rem;
}

@media (min-width: 768px) {

    .vinar-carousel h1,
    .vinar-carousel h2 {
        font-size: 3.5rem;
    }
}

.vinar-carousel p {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0;
    /* For animation */
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.6s;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

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

/* Indicators */
.vinar-carousel .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    margin: 0 6px;
}

.vinar-carousel .carousel-indicators .active {
    background-color: #fff;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.vinar-carousel .btn {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
    animation-delay: 0.9s;
    border-radius: 50px;
    padding: 10px 30px;
}

/* Floating Icons */
.floating-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    /* Ensure text is clickable */
    z-index: 0;
}

/* Ensure content stays on top */
.carousel-item>div:not(.floating-icons) {
    z-index: 1;
    position: relative;
}

.floating-icons i {
    position: absolute;
    color: rgba(255, 255, 255, 0.15);
    /* Subtle transparent white */
    font-size: 4rem;
    animation: floating 1s ease-in-out infinite;
}

/* Position and distinct animation for each icon */
.floating-icons .icon-1 {
    top: 15%;
    left: 10%;
    font-size: 5rem;
    animation-duration: 7s;
}

.floating-icons .icon-2 {
    bottom: 20%;
    right: 10%;
    font-size: 6rem;
    animation-duration: 9s;
    animation-delay: 1s;
}

.floating-icons .icon-3 {
    top: 20%;
    right: 10%;
    font-size: 3rem;
    animation-duration: 5s;
    animation-delay: 2s;
}

.floating-icons .icon-4 {
    bottom: 20%;
    left: 10%;
    font-size: 6rem;
    animation-duration: 9s;
    animation-delay: 1s;
}

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

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

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

/* Infinite Scroll Animation (Industries) */
.vinar-scroll-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 2rem 0;

    /* Fade edges for smoother look */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.vinar-scroll-track {
    display: flex;
    flex-wrap: nowrap;
    /* CRITICAL: Force single row */
    width: max-content;
    animation: scrollLoop 40s linear infinite;
}

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

.vinar-scroll-track .card {
    flex: 0 0 auto;
    /* CRITICAL: Prevent shrinking */
    width: 350px;
    min-width: 350px;
    max-width: 350px;
    margin-right: 2rem;
    /* Use margin instead of gap for perfect loop math */
}

@keyframes scrollLoop {
    0% {
        transform: translateX(0);
    }

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

/* Service Card Hover Animations */
.vinar-hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.vinar-hover-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(var(--primary-rgb), 0.1) !important;
    border-color: rgba(var(--primary-rgb), 0.3) !important;
}

.vinar-hover-card:hover .avatar {
    transform: scale(1.1) rotate(5deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vinar-hover-card:hover .btn {
    background-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3);
}

.app-sidebar .side-menu__label {
    color: #000;
}

/* Popup Wrapper */
.cookie-popup-modern {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 5000;
    display: none;
    animation: fadeIn .45s ease-out;
}

/* Box with gradient border + shadow */
.cookie-box {
    background: #ffffff;
    padding: 20px 22px;
    border-radius: 16px;
    max-width: 350px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.cookie-box::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0056ff, #00a6ff);
    z-index: -1;
}

/* Cookie icon */
.cookie-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0056ff, #00a6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 6px 12px rgba(0, 86, 255, 0.35);
}

/* Modal backdrop */
.cookie-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    z-index: 6000;
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn .35s ease-out;
}

/* Modal Content */
.cookie-modal-content {
    background: #ffffff;
    padding: 26px;
    border-radius: 16px;
    width: 92%;
    max-width: 440px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    animation: slideUp .45s ease-out;
    border-top: 5px solid #0056ff;
}

/* Preference items */
.pref-item {
    padding-bottom: 12px;
    border-bottom: 1px solid #eaeaea;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    float: right;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: #c7c7c7;
    transition: .3s;
    cursor: pointer;
}

.slider:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    bottom: 2px;
    background: #ffffff;
    border-radius: 50%;
    transition: .3s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

input:checked+.slider {
    background: linear-gradient(135deg, #0056ff, #00a6ff);
}

input:checked+.slider:before {
    transform: translateX(26px);
}

.scrollToTop {
    bottom: 90px;
    cursor: pointer;
}

@media (max-width: 991px) {
    .landing-body .main-content .section:first-of-type {
        padding: 0;
    }

    .whatsapp-button {
        right: auto;
        left: 20px;
    }

    .scrollToTop {
        bottom: 30px;
    }

}