/*header*/
/* Global left-right spacing for the whole site */
        body {
            box-sizing: border-box !important;
        }



        /* Add spacing specifically to header (including logo area) */
        header,
        .site-header,
        .main-header {
            padding-left: 40px !important;
            padding-right: 40px !important;
            box-sizing: border-box !important;
        }


/* FLOATING AD BANNER CTA */
                                            .wbt-cta-banner {
                                                width: 100%;
                                                margin-top: 20px;
                                                padding: 0 10px;
                                                text-align: center;
                                            }

                                            .wbt-cta-button {
                                                display: block;
                                                background: linear-gradient(90deg, #dc0087, #ff52a9);
                                                color: #fff;
                                                font-size: 17px;
                                                font-weight: 700;
                                                padding: 18px 20px;
                                                border-radius: 14px;
                                                text-decoration: none;
                                                text-transform: uppercase;
                                                box-shadow: 0 10px 35px rgba(220, 0, 135, 0.5);
                                                animation: floatCTA 3.5s ease-in-out infinite;
                                            }

                                            /* FLOATING ANIMATION */
                                            @keyframes floatCTA {
                                                0% {
                                                    transform: translateY(0);
                                                }

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

                                                100% {
                                                    transform: translateY(0);
                                                }
                                            }

                                            .wbt-cta-button:hover {
                                                filter: brightness(1.15);
                                                transform: scale(1.03);
                                            }

                                            /* MAIN MEGA MENU */
                                    .wbt-mega-menu {
                                        position: absolute;
                                        top: 100%;
                                        left: -185px;
                                        width: 1000px;
                                        padding: 25px;
                                        border-radius: 16px;
                                        display: none;
                                        flex-direction: column;
                                        gap: 25px;
                                        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
                                        z-index: 99999;
                                    }

                                    .menu-item-has-children:hover>.wbt-mega-menu {
                                        display: flex;
                                    }

                                    /* TOP CARD GRID */
                                    .wbt-top {
                                        display: grid;
                                        grid-template-columns: repeat(4, 1fr);
                                        gap: 20px;
                                    }

                                    .wbt-card {
                                        text-align: center;
                                        cursor: pointer;
                                        transition: .3s;
                                    }

                                    .wbt-card img {
                                        width: 100%;
                                        border-radius: 12px;
                                    }

                                    .wbt-card:hover {
                                        transform: translateY(-5px);
                                    }

                                    .wbt-card h4 {
                                        margin-top: 10px;
                                        font-size: 16px;
                                    }

                                    /* BOTTOM HORIZONTAL ROW */
                                    .wbt-bottom {
                                        background: #f5f9ff;
                                        padding: 15px 10px;
                                        border-radius: 10px;
                                        min-height: 50px;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                    }

                                    /* HIDDEN ROW BLOCKS */
                                    .wbt-bottom-row {
                                        display: none;
                                        grid-template-columns: repeat(4, 1fr);
                                        gap: 10px;
                                        width: 100%;
                                        text-align: center;
                                    }

                                    .wbt-item {
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 6px;
                                        font-size: 14px;
                                        color: #333;
                                    }

                                    .wbt-item i {
                                        color: #dc0087;
                                    }


                                    /* Static Sticky Header with Blur Effect */
        .cs-site_header {
            position: fixed !important;
            top: 0 !important;
            width: 100% !important;
            z-index: 10000 !important;
            backdrop-filter: blur(20px) !important;
            /* Applies blur */
            background-color: #ffffff14 !important;
            /* Slight transparency */

            transition: backdrop-filter 0.3s, background 0.3s !important;
        }

        /* Optional: Add shadow */
        .cs-site_header.cs-sticky_header {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
        }



        /* Force header to stay visible even when scrolling */
        .cs-site_header {
            transform: translateY(0) !important;
            opacity: 1 !important;
            visibility: visible !important;
        }

        .cs-site_header.cs-hide {
            transform: translateY(0) !important;
            /* Override hide animation */
            opacity: 1 !important;
            visibility: visible !important;
        }



        .cs-button-wrapper {
                                display: flex;
                                justify-content: center;
                                gap: 18px;
                                margin-top: 20px;
                            }

                            .cs-btn-demo,
                            .cs-btn-trial {
                                text-decoration: none;
                                font-family: 'Poppins', sans-serif;
                                font-size: 16px;
                                padding: 12px 28px;
                                border-radius: 40px;
                                transition: all 0.3s ease;
                                font-weight: 600;
                            }

                            .cs-btn-demo {
                                background: #dc0087;
                                color: #fff;
                                border: 2px solid #dc0087;
                            }

                            .cs-btn-demo:hover {
                                background: #fff;
                                color: #dc0087;
                            }

                            .cs-btn-trial {
                                background-color: #ffffff;
                                /* background: transparent; */
                                color: #dc0087;
                                border: 2px solid #ffffff;
                            }

                            .cs-btn-trial:hover {
                                background: #dc0087;
                                color: #ffffff;
                                border: 2px solid #dc0087;
                            }



                            /* keep your existing input styles */
            .unique-search-item input[type="text"],
            .unique-search-item input[type="tel"] {
                width: 100%;
                padding: 8px 12px;
                border: none;
                font-size: 14px;
                color: black;
                background: transparent;
                outline: none;
            }

            /* Align labels to the left and make them bold */
            .unique-search-item label {
                font-weight: bold;
                text-align: left;
                display: block;
                margin-bottom: 4px;
            }

            /* dropdown styling */
            .dropdown-toggle-box {
                padding: 8px 10px;
                background: transparent;
                border: 1px solid #ccc;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
                color: #333;
            }

            .dropdown-toggle-box:hover {
                border-color: #dc0087;
            }

            /* hide checkbox list initially */
            .dropdown-content {
                display: none;
                margin-top: 6px;
                background: #fff;
                border: 1px solid #ddd;
                border-radius: 6px;
                position: relative;
                z-index: 5;
            }

            /* show on toggle */
            .dropdown-content.show {
                display: block;
            }

            /* keep your checkbox group styling */
            .checkbox-group {
                border: none;
                border-radius: 4px;
                padding: 8px;
                background: transparent;
                max-height: 120px;
                overflow-y: auto;
            }

            /* Align dropdown option text left */
            .checkbox-option {
                display: flex;
                align-items: center;
                padding: 4px 0;
                cursor: pointer;
                border-radius: 4px;
                transition: background-color 0.2s;
            }

            .checkbox-option:hover {
                background-color: rgba(0, 0, 0, 0.05);
            }

            /* Custom tick mark instead of default checkbox */
            .checkbox-option input[type="checkbox"] {
                display: none;
            }

            .checkbox-option span {
                font-size: 14px;
                color: #333;
                padding: 4px 8px;
                border-radius: 4px;
                width: 100%;
                transition: all 0.2s;
                display: flex;
                align-items: center;
            }

            .checkbox-option span::before {
                content: '☐';
                margin-right: 8px;
                font-size: 14px;
                width: 18px;
            }

            .checkbox-option input[type="checkbox"]:checked+span {
                background-color: #dc0087;
                color: white;
            }

            .checkbox-option input[type="checkbox"]:checked+span::before {
                content: '✔';
                color: white;
            }

            /* Scrollbar hidden */
            .checkbox-group::-webkit-scrollbar {
                display: none;
            }

            .checkbox-group {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }

            /* submit button styling */
            .unique-search-btn {
                background-color: #dc0087;
                color: white;
                border: none;
                padding: 10px 20px;
                border-radius: 6px;
                cursor: pointer;
                font-weight: bold;
                transition: background-color 0.3s;
            }

            .unique-search-btn:hover {
                background-color: #e03e10;
            }


            /* FIX SOCIAL LINKS NOT CLICKABLE */
        .cs-hero_social_wrap {
            position: absolute !important;
            z-index: 99 !important;
            pointer-events: auto !important;
        }

        .cs-hero_social_wrap.cs-left_side {
            position: absolute !important;
            z-index: 99 !important;
        }





        .cs-hero {
            position: relative;
            overflow: hidden;
        }

        .cs-hero_video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 85%;
            object-fit: cover;
            z-index: 0;
        }

        .cs-hero_text,
        .cs-hero_social_wrap,
        .cs-down_btn {
            z-index: 2;
            position: relative;
        }

        .cs-hero::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        /* === Unique Hero Search Box === */
        .unique-hero-searchbox-wrapper {
            position: absolute;
            bottom: 50px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            z-index: 3;
        }

        .unique-hero-searchbox {
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
            padding: 25px 40px;
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
            border: 2px solid #dc0087;
            max-width: 1200px;
            width: 95%;
            flex-wrap: nowrap;
            /* force single row */
            margin-bottom: 50px;
        }

        .unique-search-item {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            min-width: 150px;
        }

        .unique-search-item i {
            font-size: 22px;
            color: #dc0087;
        }

        .unique-search-item label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #666;
            margin-bottom: 2px;
        }

        .unique-search-item select {
            border: none;
            outline: none;
            background: transparent;
            font-size: 16px;
            font-weight: 600;
            color: #000;
            width: 100%;
            cursor: pointer;
        }

        /* search button */
        .unique-search-btn-wrap {
            display: flex;
            justify-content: flex-end;
            flex: 0 0 auto;
        }

        .unique-search-btn {
            background: #dc0087;
            color: #fff;
            border: none;
            padding: 14px 35px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .unique-search-btn:hover {
            background: #dc0087;
        }

        @media (max-width: 992px) {
            .unique-hero-searchbox {
                flex-wrap: wrap;
                justify-content: center;
            }

            .unique-search-item {
                flex: 1 1 45%;
            }

            .unique-search-btn-wrap {
                flex: 1 1 100%;
                justify-content: center;
            }

            .unique-hero-searchbox-wrapper {
                bottom: -100px;
            }
        }


        /* Make video full */
        .card-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
        }

        /* Ensure video stays inside card */
        .destination-list {
            position: relative;
            overflow: hidden;
        }

        /* Keep text on top of video */
        .destination-content {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            padding: 12px;
            color: #fff;
        }

        .destination-content h4 a {
            color: #fff;
        }

        /* Mobile adjustments */
        @media (max-width: 767px) {
            .destination-list .box-title a {
                font-size: 16px;
                line-height: 1.3;
            }
        }



        /* === FLOATING CIRCLE 1 === */
.floating-circle-1 {
    position: absolute;
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    backdrop-filter: blur(4px);
    animation: floatCircle1 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes floatCircle1 {
    0% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-60%) translateX(20px); }
    100% { transform: translateY(-50%) translateX(0); }
}

/* === FLOATING CIRCLE 2 === */
.floating-circle-2 {
    position: absolute;
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    top: 20%;
    right: 10%;
    backdrop-filter: blur(3px);
    animation: floatCircle2 7s ease-in-out infinite;
    z-index: 0;
}

@keyframes floatCircle2 {
    0% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(25px) translateX(-15px); }
    100% { transform: translateY(0) translateX(0); }
}

/* === FLOATING CIRCLE 3 === */
.floating-circle-3 {
    position: absolute;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    bottom: 10%;
    left: 60%;
    backdrop-filter: blur(5px);
    animation: floatCircle3 8s ease-in-out infinite;
    z-index: 0;
}

@keyframes floatCircle3 {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.05); }
    100% { transform: translateY(0) scale(1); }
}

/* Pink background wrapper */
.cs-funfact_wrap_2.cs-type1 {
    background: linear-gradient(90deg, #ff66b3, #dc0087);
    padding: 80px 60px;
    border-radius: 16px;
    position: relative;
    overflow: hidden; /* Prevent overflow */
}

.cs-funfacts {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.cs-funfact_number,
.cs-funfact_title {
    color: #fff !important;
}

.cs-funfact_shape { display: none; }

/* =====================================================
   🔥 RESPONSIVE CSS FOR MOBILE + TABLETS
   ===================================================== */
@media (max-width: 992px) {
    .cs-funfact_wrap_2.cs-type1 {
        padding: 60px 40px;
    }

    .cs-funfacts {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 30px;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .cs-funfact_wrap_2.cs-type1 {
        padding: 50px 25px;
    }

    .cs-funfacts {
        flex-direction: column;
        gap: 25px;
    }

    /* Resize circles */
    .floating-circle-1,
    .floating-circle-2,
    .floating-circle-3 {
        opacity: 0.4;
    }

    .floating-circle-1 {
        width: 70px;
        height: 70px;
        left: 5%;
        top: 30%;
    }

    .floating-circle-2 {
        width: 60px;
        height: 60px;
        right: 5%;
        top: 10%;
    }

    .floating-circle-3 {
        width: 90px;
        height: 90px;
        left: 50%;
        bottom: 5%;
    }
}

/* VERY SMALL SCREENS */
@media (max-width: 480px) {
    .cs-funfact_wrap_2.cs-type1 {
        padding: 40px 20px;
    }

    .floating-circle-1,
    .floating-circle-2,
    .floating-circle-3 {
        opacity: 0.2;
        transform: scale(0.8);
    }
}


/* MAIN SECTION */
        .dm-tabs-section {
            width: 100%;
            padding: 40px 0;
            background-color: #000;
            position: relative;
            overflow: hidden;
        }

        /* FLOATING STRIP */
        .dm-floating-strip {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 160%;
            height: 180px;
            background: linear-gradient(135deg, #ff75c9, #ff0089);
            opacity: 0.5;
            transform: translate(-50%, -50%) rotate(-8deg);
            border-radius: 999px;
            animation: dmFloatStrip 1s ease-in-out infinite alternate;
            filter: blur(4px);
            z-index: 0;
        }

        /* TABS */
        .dm-tabs-wrapper {
            display: flex;
            justify-content: center;
            gap: 35px;
            margin-bottom: 40px;
            flex-wrap: wrap;
            position: relative;
        }

        .dm-tab {
            padding: 12px 22px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(6px);
            cursor: pointer;
            color: #eee;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: 0.35s ease;
        }

        .dm-tab img {
            width: 28px;
            height: 28px;
            object-fit: contain;
            transition: .3s ease;
        }

        .dm-tab:hover img {
            transform: scale(1.15);
        }

        .dm-tab.dm-tab-active {
            background: linear-gradient(135deg, #ff4dc0, #dc0087);
            color: #fff;
        }

        /* CARD GRID */
        .dm-card-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 25px;
            padding: 0 20px;
            max-width: 1300px;
            margin: 0 auto;
        }

        @media (max-width: 1024px) {
            .dm-card-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .dm-card-grid {
                grid-template-columns: repeat(1, 1fr);
            }
        }

/* Force 2 cards on mobile */
@media (max-width: 768px) {
    .dm-card-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
        padding: 0 12px;
    }
}


        /* CARD */
        .sp-card {
            border-top: #fff 7px;
            background: #fff;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0px 3px 15px rgb(166 166 166);
            transition: .35s ease;
            cursor: pointer;
        }

        .sp-card:hover {
            transform: translateY(-8px) scale(1.03);
        }

        .sp-img {
            height: 140px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px;
            background: #fff;
            border: 3px solid #ffffff;
            /* WHITE BORDER ON ALL SIDES */
            border-radius: 10px;
            /* optional */
        }

        .sp-img img {
            padding-top: 0px;
            width: 158px;
            height: 113px;
        }


        .sp-card:hover .sp-img img {
            transform: scale(1.12);
        }

        /* TITLE */
        .sp-name {
            font-size: 17px;
            font-weight: 600;
            padding: 5px 0 5px;
            text-align: center;
            color: #333;
        }

        .dm-hide {
            display: none !important;
        }

        /* GRADIENTS */
        .sp-g1 {
            background: linear-gradient(135deg, #ff9844, #ff5e7e);
        }

        .sp-g2 {
            background: linear-gradient(135deg, #ffffff, #ffffff);
        }

        .sp-g3 {
            background: linear-gradient(135deg, #00c7ff, #0072ff);
        }

        .sp-g4 {
            background: linear-gradient(135deg, #25d366, #128c7e);
        }

        .sp-g5 {
            background: linear-gradient(135deg, #ff7ca3, #ff92c2);
        }


        .dm-tabs-wrapper,
        .dm-card-grid {
            position: relative;
            z-index: 2;
        }


        /* Section */
.video-section {
    width: 100%;
    padding: 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    background-image: url('assets/img/bg/line-pattern3.webp');
    position: relative;
}

/* Side Headings */
.side-heading {
    font-size: 58px;
    font-weight: 800;
    color: #dc0087;
    text-transform: uppercase;
    width: 30%;
    line-height: 1.2;
    text-align: center;
}

/* LEFT heading animation → UP first */
.left-heading {
    text-align: center;
    animation: floatUp 4s ease-in-out infinite;
}

/* RIGHT heading animation → DOWN first */
.right-heading {
    text-align: center;
    animation: floatDown 4s ease-in-out infinite;
}

/* Video Container */
.video-container {
    width: 350px;
    height: 620px;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Video */
.vertical-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Floating Animations */
@keyframes floatUp {
    0% { transform: translateY(20px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(20px); }
}

@keyframes floatDown {
    0% { transform: translateY(-20px); }
    50% { transform: translateY(20px); }
    100% { transform: translateY(-20px); }
}

/* =========================================================
   📱 MOBILE RESPONSIVE FIXES (Desktop 100% unchanged)
   ========================================================= */
@media (max-width: 992px) {
    .video-section {
        flex-direction: column;
        gap: 30px;
        padding: 50px 0;
    }

    .side-heading {
        width: 100%;
        text-align: center !important;
        font-size: 40px;
        line-height: 1.3;
    }

    .video-container {
        width: 260px;
        height: 460px;
    }
}

@media (max-width: 600px) {
    .side-heading {
        font-size: 32px;
    }

    .video-container {
        width: 220px;
        height: 380px;
    }
}

@media (max-width: 450px) {
    .side-heading {
        font-size: 28px;
    }

    .video-container {
        width: 200px;
        height: 340px;
    }
}



    .cross-ribbon-section {
    width: 100%;
    padding: 180px 0;
    position: relative;
    overflow: hidden;
}

/* Shared ribbon base */
.ribbon {
    width: 160%;
    margin-left: -30%;
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    border: 2px solid #0b0022;
}

/* TOP STRIP (white, rotated left) */
.ribbon-top {
    background: #ffffff;
    transform: rotate(-10deg);
    z-index: 3;
}

/* BOTTOM STRIP (pink, rotated right) */
.ribbon-bottom {
    background: #dc0087;
    transform: rotate(4deg);
    margin-top: 80px;
    z-index: 2;
}

.ribbon-track {
    display: inline-flex;
    animation: slide 25s linear infinite;
}

.ribbon-track span {
    font-size: 40px;
    font-weight: 700;
    padding: 25px 60px;
    color: #0b0022;
}

/* Movement */
@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* =========================================================
   📱 MOBILE RESPONSIVE FIXES (Desktop unchanged)
   ========================================================= */
@media (max-width: 768px) {

    .cross-ribbon-section {
        padding: 120px 0;
    }

    .ribbon {
        width: 200%;            /* more width to prevent clipping */
        margin-left: -50%;
    }

    .ribbon-top {
        transform: rotate(-6deg);  /* less angle for small screens */
    }

    .ribbon-bottom {
        transform: rotate(3deg);
        margin-top: 60px;
    }

    .ribbon-track span {
        font-size: 26px;      /* reduced font */
        padding: 18px 40px;   /* smaller spacing */
    }
}

@media (max-width: 480px) {

    .cross-ribbon-section {
        padding: 100px 0;
    }

    .ribbon {
        width: 230%;
        margin-left: -65%;
    }

    .ribbon-top {
        transform: rotate(-4deg);
    }

    .ribbon-bottom {
        transform: rotate(2deg);
        margin-top: 50px;
    }

    .ribbon-track span {
        font-size: 20px;     /* clean, readable */
        padding: 12px 25px;
    }
}


    /* ===============================
   MOBILE RESPONSIVE FIX FOR TABS
   =============================== */
@media (max-width: 768px) {

    .cs-tabs_heading {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .cs-tab_links {
        display: flex;
        flex-wrap: wrap;          /* allow wrap */
        gap: 10px;
        padding: 15px;
        border-radius: 10px;
    }

    .cs-tab_links li {
        flex: 1 1 calc(50% - 10px);   /* 2 tabs per row */
        text-align: center;
        margin: 0 !important;
    }

    .cs-tab_links li a {
        display: block;
        font-size: 15px;
        padding: 10px 14px;
        background: #222;
        border-radius: 8px;
        color: #fff !important;
    }

    .cs-tab_links li.active a {
        background: #ff0099 !important; /* your pink color */
        color: #fff !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {

    .cs-tab_links li {
        flex: 1 1 100%;      /* 1 per row on very small screens */
    }

    .cs-tab_links li a {
        font-size: 14px;
        padding: 10px;
    }
}

.customise-btn-wrap {
                    text-align: center;
                    /* Centers the button */
                    margin-top: 30px;
                }

                .customise-btn {
                    display: inline-block;
                    padding: 14px 40px;
                    background: linear-gradient(90deg, #dc0087 0%);
                    color: #fff;
                    font-weight: 600;
                    font-size: 16px;
                    border-radius: 50px;
                    /* Rounded like your screenshot */
                    text-decoration: none;
                    transition: 0.3s ease;
                }

                .customise-btn:hover {
                    transform: translateY(-3px);
                    opacity: 0.9;
                }

        .pricing-content {
            display: none;
        }

        .pricing-content.active {
            display: block;
        }

        .cs-isotop_filter ul li.active a {
            color: #d81c6f;
            /* Active tab color */
            font-weight: bold;
        }


        /* ==========================
   INDUSTRY SECTION
   ========================== */

.ind-section {
    padding: 90px 0;
    background: linear-gradient(120deg, #2c2c2c 0%, #040404 100%);
    text-align: center;
}

.ind-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.ind-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: #e9f0ff;
    color: #dc0087;
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 20px;
}

.ind-title {
    color: rgb(255, 255, 255);
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 50px;
}

/* GRID */
.ind-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    justify-content: center;
}

/* CARD */
.ind-card {
    position: relative;
    background: #fff;
    border-radius: 22px;
    padding: 35px 20px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06);
    transition: 0.3s ease;
    overflow: hidden;
    cursor: pointer;
}

.ind-card img {
    width: 180px;
    margin-bottom: 18px;
    position: relative;
    z-index: 3;
}

.ind-card:hover img {
    transform: scale(1.07);
}

.ind-card h4 {
    color: black;
    font-size: 20px;
    font-weight: 600;
    z-index: 3;
    position: relative;
}

/* BLOB */
.ind-blob {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    background: #dc0087;
    border-radius: 45% 55% 60% 40%;
    transform: rotate(25deg);
    transition: 0.4s ease;
    opacity: 0;
    z-index: 1;
}

.ind-card:hover {
    transform: translateY(-6px);
}

.ind-card:hover .ind-blob {
    opacity: 1;
    bottom: -10px;
    right: -10px;
}

/* BUTTON */
.ind-btn {
    display: inline-block;
    margin-top: 55px;
    background: #dc0087;
    color: #fff;
    padding: 16px 34px;
    border-radius: 12px;
    font-size: 18px;
    text-decoration: none;
    transition: 0.3s;
}

.ind-btn:hover {
    transform: translateY(-4px);
}


/* =========================================================
   📱 RESPONSIVE FIXES — MOBILE & TABLET
   ========================================================= */

/* TABLETS → 3 columns */
@media (max-width: 1024px) {
    .ind-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .ind-card img {
        width: 150px;
    }
}

/* MOBILE LANDSCAPE → 2 columns */
@media (max-width: 768px) {
    .ind-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ind-card {
        padding: 28px 18px;
    }

    .ind-card img {
        width: 135px;
    }

    .ind-card h4 {
        font-size: 18px;
    }
}

/* SMALL MOBILE → 1 column */
@media (max-width: 480px) {
    .ind-grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 18px;
    }

    .ind-card {
        padding: 25px 15px;
    }

    .ind-card img {
        width: 120px;
    }

    .ind-card h4 {
        font-size: 17px;
    }

    .ind-btn {
        width: 100%;
        font-size: 16px;
        padding: 14px 0;
        border-radius: 10px;
    }
}


 #categorySlide .swiper-pagination {
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: auto !important;
        }


        .learnmore-btn {
                                border: none;
                                background: #dc0087;
                                color: #fff !important;
                                padding: 12px 24px;
                                border-radius: 8px;
                                cursor: pointer;
                                font-size: 16px;
                                display: inline-flex;
                                align-items: center;
                                gap: 10px;
                                transition: 0.3s ease;
                                text-decoration: none !important;
                            }

                            .learnmore-btn:hover {
                                background: #b8006e;
                                transform: translateX(3px);
                            }

                            .learnmore-btn svg {
                                transition: 0.3s ease;
                            }

                            .learnmore-btn:hover svg {
                                transform: translateX(4px);
                            }


                            .cs-video_block {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            width: 100%;
            height: 420px;
            /* adjust height as needed */
            background: #000;
            /* keeps empty area black if aspect ratio differs */
        }

        .cs-video_element {
            width: 100%;
            height: 100%;
            object-fit: contain !important;
            /* show full video */
            display: block;
        }


        /* Pop-up animation */
        .gal-btn {
            display: inline-block;
            padding: 10px 22px;
            margin: 5px;
            border-radius: 50px;
            font-size: 15px;
            font-weight: 600;
            transition: transform 0.25s ease, opacity 0.25s ease;
            color: #fff;
            transform: translateZ(0);
            /* smoother animation */
        }

        .gal-btn:hover {
            opacity: 0.9;
            transform: scale(1.08);
            /* pop-up effect */
        }

        /* Insta + WhatsApp colors */
        .insta-btn {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
        }

        .whatsapp-btn {
            background: #25D366;
        }

        .gal-btn i {
            margin-right: 8px;
            font-size: 18px;
        }


        .gallery-buttons {
            margin-top: 15px;
        }

        .gal-btn {
            display: inline-block;
            padding: 10px 22px;
            margin: 5px;
            border-radius: 50px;
            font-size: 15px;
            font-weight: 600;
            transition: 0.3s;
            color: #fff;
        }

        .insta-btn {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
        }

        .whatsapp-btn {
            background: #25D366;
        }

        .gal-btn i {
            margin-right: 8px;
            font-size: 18px;
        }

        .gal-btn:hover {
            opacity: 0.85;
        }

        /* LinkedIn */
        .linkedin-btn {
            background: #0077b5;
        }

        .linkedin-btn:hover {
            background: #005b8a;
        }


        .enquire-btn {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;

            padding: 10px 25px !important;
            background: linear-gradient(90deg, #ff2b95 0%, #5d00ff 100%) !important;
            color: #fff !important;
            border-radius: 6px !important;
            text-decoration: none !important;
            font-weight: 600 !important;
            font-size: 14px !important;
            text-align: center !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 10 !important;
        }

        .enquire-btn:hover {
            opacity: 0.85;
            transform: translateY(-2px);
        }


            /* =========================================================
   📱 MOBILE RESPONSIVE FIXES — Testimonial Section
   ========================================================= */
@media (max-width: 992px) {

    .testi-review {
        padding: 20px;
        background-size: contain !important;
    }

    .testi-box {
        margin-bottom: 25px;
        padding: 22px !important;
    }

    .testi-box_text {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .testi-box_review i {
        font-size: 15px !important;
    }

    .testi-box_profile {
        margin-top: 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        text-align: left;
    }

    .testi-box_avater img {
        width: 55px;
        height: 55px;
    }

    .box-title {
        font-size: 17px !important;
    }

    .testi-box_desig {
        font-size: 14px !important;
    }
}

/* Small Mobile */
@media (max-width: 576px) {

    .testi-review {
        padding: 10px;
    }

    .testi-box {
        padding: 18px !important;
        border-radius: 12px !important;
    }

    .testi-box_text {
        font-size: 15px !important;
    }

    .testi-box_avater img {
        width: 50px;
        height: 50px;
    }

    .testi-box_profile {
        flex-direction: row;
        align-items: center;
    }

    .testi-box_review i {
        font-size: 14px;
    }

    .box-title {
        font-size: 16px !important;
    }
}

/* Extra Small Phones */
@media (max-width: 400px) {

    .testi-box {
        padding: 15px !important;
    }

    .testi-box_text {
        font-size: 14px !important;
    }

    .testi-box_avater img {
        width: 45px;
        height: 45px;
    }
}


        /* .parallax-section {
            background-image: url('assets/img/portfolio_45.webp');
            
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
            padding: 150px 20px;
            position: relative;
            color: #ffffff;
        }

        
        .parallax-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.45);
            z-index: 1;
        }

        .parallax-content {
            position: relative;
            max-width: 800px;
            margin: auto;
            text-align: center;
            z-index: 2;
        }

        .parallax-content h2 {
            color: palegoldenrod;
            font-size: 48px;
            font-weight: 700;
            margin-bottom: 20px;
        }

        .parallax-content p {
            font-size: 20px;
            line-height: 1.7;
            margin-bottom: 25px;
        } */

        /* ===========================
   BLOG SECTION STYLE
=========================== */
        .wbtblog-section {
            padding: 80px 0;
            background: #000;
            text-align: center;
        }

        .wbtblog-title {
            font-size: 42px;
            color: #fff;
            font-weight: 700;
        }

        .wbtblog-subtitle {
            color: #b8b8b8;
            margin-bottom: 30px;
        }

        /* FILTER BUTTONS */
        .wbtblog-filters {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 14px;
            margin-bottom: 40px;
        }

        .wbtblog-btn {
            padding: 10px 22px;
            background: transparent;
            border: 2px solid #fff;
            border-radius: 40px;
            color: #fff;
            cursor: pointer;
            font-weight: 600;
            transition: 0.3s;
        }

        .wbtblog-btn.active,
        .wbtblog-btn:hover {
            background: #ff008c;
            border-color: #ff008c;
        }

        /* GRID — ONLY FIRST 6 VISIBLE */
        .wbtblog-card:nth-child(n+7) {
            display: none;
        }

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

        @media (max-width: 992px) {
            .wbtblog-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .wbtblog-grid {
                grid-template-columns: 1fr;
            }
        }

        /* PREMIUM CARD DESIGN */
        .wbtblog-card {
            background: #ffffff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            transition: 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .wbtblog-card:hover {
            transform: translateY(-5px);
        }

        .wbtblog-img {
            width: 100%;
            height: 230px;
            object-fit: cover;
        }

        .wbtblog-content {
            padding: 22px 26px;
            text-align: left;
        }

        .wbtblog-content h3 {
            font-size: 21px;
            font-weight: 700;
            color: #2a2a2a;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .wbtblog-content p {
            font-size: 15px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 18px;
        }

        /* READ MORE — Pink (#dc0087) */
        .wbtblog-readbtn {
            font-size: 15px;
            font-weight: 700;
            color: #dc0087 !important;
            text-decoration: none;
        }

        /* VIEW ALL BUTTON — Pink (#dc0087) */
        .viewall-wrap {
            margin-top: 40px;
        }

        .viewall-btn {
            padding: 14px 34px;
            background: #dc0087;
            color: #fff;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 700;
            font-size: 17px;
            display: inline-block;
            transition: 0.3s;
        }

        .viewall-btn:hover {
            opacity: 0.85;
        }


        .awards-wrapper {
            background-image: url('assets/img/bg/line-pattern3.webp');
        }

        .awards-container {
            max-width: 1400px;
            margin: auto;
            display: flex;
            gap: 60px;
            align-items: center;
        }

        .awards-left {
            width: 45%;
        }

        .awards-badge {
            display: inline-flex;
            align-items: center;
            background: #eef4ff;
            padding: 8px 14px;
            border-radius: 30px;
            gap: 6px;
            font-size: 14px;
            color: #dc0087;
            margin-bottom: 20px;
        }

        .awards-badge img {
            width: 20px;
        }

        .awards-title {
            font-size: 42px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .awards-desc {
            color: #555;
            font-size: 17px;
            margin-bottom: 35px;
            line-height: 1.6;
        }

        .awards-btn {
            display: inline-block;
            background: #dc0087;
            padding: 16px 28px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 17px;
            color: white;
            text-decoration: none;
        }

        /* ==========================
   RIGHT SIDE MOVING LOGOS
========================== */
        .awards-right {
            width: 55%;
            display: flex;
            justify-content: center;
            gap: 40px;
            height: 420px;
            overflow: hidden;
            padding: 10px 0;
        }

        .award-column {
            height: 100%;
            overflow: hidden;
            position: relative;
        }

        .award-track {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .award-column img {
            width: 160px;
            /* fixed width */
            height: 120px;
            /* fixed height */
            background: #fff;
            padding: 20px;
            border-radius: 14px;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
            object-fit: contain;
            /* keeps logo proportion perfect */
            display: block;
        }

        /* ==========================
   ANIMATIONS — PERFECT LOOP
========================== */
        .move-up .award-track {
            animation: scrollUp 25s linear infinite;
        }

        .move-down .award-track {
            animation: scrollDown 25s linear infinite;
        }

        @keyframes scrollUp {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-100%);
            }
        }

        @keyframes scrollDown {
            0% {
                transform: translateY(-100%);
            }

            100% {
                transform: translateY(0);
            }
        }

        /* ==========================
   RESPONSIVE
========================== */
        @media (max-width: 992px) {
            .awards-container {
                flex-direction: column;
                text-align: center;
            }

            .awards-left,
            .awards-right {
                width: 90%;
            }
        }


        /* ============================
   MAIN SECTION
============================ */
.supportSection-new {
    padding: 80px 20px;
    background-image: url("assets/img/bg/team_bg_1.webp");
    font-family: "Poppins", sans-serif;
}

/* GRID */
.supportGrid-new {
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* ============================
   CARD STYLE (same as f-card)
============================ */
.supportCard-new {
    position: relative;
    width: 100%;
    padding: 35px 28px 28px 28px;
    border-radius: 20px;
    background: #ffffff;

    border: 8px solid transparent;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(135deg,
            rgba(255, 240, 180, 0.8),
            rgba(220, 230, 255, 0.8),
            rgba(255, 200, 250, 0.8));
    background-clip: padding-box, border-box;

    box-shadow:
        0px 8px 20px rgba(243, 243, 243, 0.08),
        0px 12px 35px rgba(255, 255, 255, 0.06);

    transition: all .35s ease-in-out;
}

.supportCard-new:hover {
    transform: translateY(-10px);
    box-shadow:
        0px 12px 25px rgba(0, 0, 0, 0.12),
        0px 18px 50px rgba(0, 0, 0, 0.10);
}

/* ============================
   ICON + TITLE ROW
============================ */
.icon-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* ICON BEFORE HEADING */
.supportIcon-front {
    font-size: 26px;
    color: #dc0087;
    padding: 10px;
    border-radius: 12px;

    background: radial-gradient(circle at 30% 30%,
            #edf4ff,
            #f7eaff,
            #fff2d9);

    box-shadow: 0 4px 12px rgba(220, 0, 135, 0.15);
}

/* REMOVE OLD TOP-RIGHT ICON */
.support-iconTop {
    display: none !important;
}

/* ============================
   TITLE
============================ */
.support-title {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

/* ============================
   DESCRIPTION
============================ */
.support-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.55;
    max-width: 260px;
    margin-bottom: 35px;
}

/* ============================
   CARD BOTTOM ARROW BUTTON
============================ */
.support-bottom {
    display: flex;
    justify-content: flex-end;
}

.support-arrow {
    width: auto;
    padding: 10px 18px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-size: 18px;

    background: linear-gradient(135deg,
            #e6e9ff,
            #f7eaff,
            #ffe9d6);

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

    transition: all .35s ease-in-out;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.06);
}

.support-arrow span {
    color: #000;
    font-weight: 600;
    display: inline-block;
    transition: transform .35s cubic-bezier(0.19, 1, 0.22, 1);
}

.support-arrow:hover span {
    transform: translateX(6px);
}

/* ============================
   FULL CARD CLICKABLE LAYER
============================ */
.cardLink-full {
    position: absolute;
    inset: 0;
    z-index: 5;
}

/* =========================================================
   📱 RESPONSIVE FIXES — TABLET & MOBILE
   ========================================================= */

/* Tablet (3 cards) */
@media (max-width: 1024px) {
    .supportGrid-new {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .supportCard-new {
        padding: 30px 25px;
    }
}

/* Mobile (2 cards per row) */
@media (max-width: 768px) {

    /* REAL LEFT-RIGHT spacing fix */
    .supportGrid-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        padding-left: 18px;    /* ← FIX  */
        padding-right: 18px;   /* ← FIX  */
    }

    .supportCard-new {
        padding: 28px 22px;
        border-radius: 16px;
    }

    .support-title {
        font-size: 18px;
    }

    .supportIcon-front {
        font-size: 22px;
        padding: 8px;
    }

    .support-desc {
        font-size: 13px;
        margin-bottom: 25px;
        max-width: 100%;
    }
}



.cta-section {
            background: #dc0087;
            padding: 30px 10px;
            border-radius: 12px;
            position: relative;
            overflow: hidden;
            margin-left: 40px;
            /* ⭐ Left spacing added */
            margin-right: 40px;
            /* ⭐ Right spacing added */
        }

        .cta-container {
            position: relative;
            z-index: 2;
        }

        .cta-title {
            color: #fff;
            font-size: 44px;
            font-weight: 700;
            margin: 15px 0 10px;
        }

        .cta-subtext {
            color: #fff;
            font-size: 18px;
            max-width: 720px;
        }

        .cta-label {
            color: #fff;
            font-size: 18px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #fff;
            color: #dc0087;
            padding: 14px 30px;
            border-radius: 10px;
            font-weight: 600;
            text-decoration: none;
            position: absolute;
            top: 50%;
            right: 60px;
            transform: translateY(-50%);
            transition: 0.3s;
        }

        .cta-btn:hover {
            opacity: 0.8;
            color: #000000;
        }

        .cta-bg-shape {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50%;
            height: 120%;
            background: rgba(255, 255, 255, 0.3);
            border-top-left-radius: 200px;
            transform: translateY(20%);
        }

        @media (max-width: 768px) {
            .cta-btn {
                position: static;
                transform: none;
                margin-top: 20px;
            }

            .cta-section {
                margin-left: 20px;
                /* smaller spacing for mobile */
                margin-right: 20px;
            }
        }

        .fab {
                                        color: #dc0087;
                                    }

        /* =======================================
   FOOTER LIST (Desktop Default)
======================================= */

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

.cs-footer-list li {
    color: #bbb;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.cs-footer-list li i {
    color: #dc0087;
    font-size: 16px;
    min-width: 18px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.cs-footer-list li a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s ease;
}

.cs-footer-list li:hover i {
    color: #fff;
    transform: scale(1.2);
}

.cs-footer-list li a:hover {
    color: #fff;
}

/* =======================================
   QR APP SECTION
======================================= */
.footerAppSection {
    margin-top: 25px;
}

.footerAppTitle {
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    margin-bottom: 15px;
}

.footerAppQR {
    width: 160px;
    height: auto;
    display: block;
    margin-bottom: 12px;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.footerAppQR:hover {
    transform: scale(1.07);
}

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

/* Tablet */
@media (max-width: 992px) {
    .cs-footer-list li {
        font-size: 17px;
        gap: 8px;
    }

    .footerAppQR {
        width: 140px;
    }
}

/* =======================================
   SUPER FIX – FORCE FULL CENTER ON MOBILE
======================================= */
@media (max-width: 768px) {

    /* CENTER ALL FOOTER COLUMNS */
    .cs-footer_item,
    .footerAppSection,
    .footer-social,
    .footer-services,
    .footer-links,
    .cs-footer-list {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* CENTER LIST ITEMS */
    .cs-footer-list li {
        justify-content: center !important;
        text-align: center !important;
    }

    .cs-footer-list li i {
        margin: 0 auto !important;
        display: block;
    }

    /* CENTER QR IMAGE */
    .footerAppQR {
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* CENTER SOCIAL ICONS */
    .footer-social {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 15px;
    }

    /* CENTER SERVICES SECTION */
    .footer-services {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100%;
    }

    /* CENTER ANY HEADING (Company Name Titles) */
    .cname,
    .cs-footer_item h3,
    .footerAppTitle {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}






        @media (min-width: 992px) {
            .col-lg-3 {
                width: 18%;
            }
        }


        .meeting-popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .meeting-popup-box {
            background: #f1ffe6;
            padding: 20px;
            border-radius: 10px;
            width: 320px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            text-align: center;
            position: relative;
        }

        .meeting-popup-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: transparent;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }

        .meeting-popup-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            color: black;
        }

        .meeting-popup-textarea {
            width: 100%;
            height: 120px;
            border-radius: 8px;
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 15px;
            resize: none;
            color: black;
        }

        .meeting-popup-send {
            background: #25d366;
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            font-weight: bold;
        }

        .meeting-popup-send:hover {
            background: #1ebe57;
        }


        .sales-popup {
            position: fixed;
            bottom: 20px;
            left: -380px;
            /* start hidden */
            width: 300px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 999999;
            opacity: 0;
            transition: all .5s ease;
            font-family: sans-serif;
        }

        .sales-popup.show {
            left: 20px;
            opacity: 1;
        }

        .popup-img img {
            width: 60px;
            height: 60px;
            border-radius: 6px;
            object-fit: cover;
        }

        .popup-info {
            color: #000;
            font-size: 14px;
            line-height: 1.2;
        }

        .popup-info .product-name {
            color: #dc0087;
            font-weight: bold;
            font-size: 15px;
            margin: 2px 0;
        }

        .popup-close {
            color: #000;
            cursor: pointer;
            font-size: 18px;
            margin-left: auto;
        }

        /* ===========================
   MOBILE RESPONSIVE (768px)
=========================== */
@media (max-width: 768px) {

  .sales-popup {
    bottom: 15px;
    left: -320px;        /* slide from left but smaller */
    width: 250px;        /* smaller for mobile */
    padding: 10px;
    gap: 8px;
    border-radius: 10px;
  }

  .sales-popup.show {
    left: 15px;          /* visible position */
    opacity: 1;
  }

  .popup-img img {
    width: 50px;
    height: 50px;
    border-radius: 6px;
  }

  .popup-info {
    font-size: 12px;
    line-height: 1.25;
  }

  .popup-info .product-name {
    font-size: 13px;
  }

  .popup-close {
    font-size: 16px;
  }
}



        /* ================== UNIQUE POPUP OVERLAY ================== */
        .dq-overlay {
            position: fixed;
            inset: 0;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(10, 10, 10, 0.75);
            z-index: 9999999;
        }

        /* ================== UNIQUE POPUP BOX ================== */
        .dq-popup-box {
            width: 92%;
            max-width: 420px;
            background: #ffffff;
            padding: 35px 25px;
            border-radius: 18px;
            position: relative;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
            animation: dqPopIn 0.3s ease;
        }

        @keyframes dqPopIn {
            from {
                transform: scale(0.85);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* CLOSE BUTTON */
        .dq-close-btn {
            position: absolute;
            right: 18px;
            top: 12px;
            font-size: 30px;
            cursor: pointer;
            font-weight: bold;
            color: #333;
        }

        /* TITLE */
        .dq-form-title {
            margin-bottom: 20px;
            text-align: center;
            font-size: 26px;
            color: #202020;
            font-weight: 700;
        }

        /* INPUTS */
        .dq-input,
        .dq-textarea {
            width: 100%;
            padding: 13px 15px;
            margin-bottom: 15px;
            border-radius: 10px;
            border: 1px solid #ccc;
            font-size: 15px;
            transition: 0.2s;
        }

        .dq-input:focus,
        .dq-textarea:focus {
            border-color: #dc0087;
            box-shadow: 0 0 5px rgba(220, 0, 135, 0.4);
            outline: none;
        }

        /* TEXTAREA */
        .dq-textarea {
            height: 120px;
            resize: none;
        }

        /* SUBMIT BUTTON */
        .dq-submit-btn {
            width: 100%;
            padding: 14px 0;
            font-size: 18px;
            background: #dc0087;
            color: #fff;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: 0.2s;
        }

        .dq-submit-btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .dq-input,
        .dq-textarea {
            color: #000 !important;
            /* Text color */
        }

        .dq-input::placeholder,
        .dq-textarea::placeholder {
            color: #777 !important;
            /* Placeholder color */
        }


        /* =====================
   VIDEO FIX — DESKTOP (UNCHANGED)
===================== */
        .video-wrap {
            width: 310px;
            height: 100%;
            overflow: hidden;
            display: block;
        }

        .video-wrap video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* =====================
   TIMER DESIGN
===================== */
        .discount-timer {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 18px 0 25px 0;
        }

        .time-box {
            padding: 12px 18px;
            border: 2px dashed #c9c9c9;
            border-radius: 8px;
            min-width: 55px;
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            color: #333;
        }

        .colon {
            font-size: 22px;
            font-weight: 700;
            color: #555;
        }

        /* =====================
   BACKDROP
===================== */
        .discount-popup {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.55);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99999;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s ease;
            backdrop-filter: blur(3px);
        }

        .discount-popup.active {
            opacity: 1;
            visibility: visible;
        }

        /* =====================
   MAIN POPUP BOX (DESKTOP UNCHANGED)
===================== */
        .popup-box {
            background: #fff;
            width: 90%;
            max-width: 700px;
            border-radius: 14px;
            display: flex;
            overflow: hidden;
            position: relative;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
        }

        /* =====================
   CLOSE BUTTON
===================== */
        .close-btn {
            position: absolute;
            right: 18px;
            top: 14px;
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #666;
            z-index: 10;
        }

        /* =====================
   LEFT IMAGE / VIDEO
===================== */
        .popup-left img {
            width: 310px;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* =====================
   RIGHT CONTENT (DESKTOP UNCHANGED)
===================== */
        .popup-right {
            padding: 65px 45px;
            flex: 1;
        }

        .badge {
            left: 350px;
            background: #ffeef9;
            color: #dc0087;
            font-weight: 600;
            font-size: 12px;
            padding: 8px 15px;
            border-radius: 6px;
            display: inline-block;
            margin-bottom: 20px;
        }

        .popup-right h2 {
            font-size: 28px;
            font-weight: 700;
            color: #333;
            line-height: 1.3;
            margin-bottom: 18px;
        }

        .info-text {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
            max-width: 410px;
            margin-bottom: 10px;
        }

        /* =====================
   BUTTONS
===================== */
        .action-btns {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        .primary-btn {
            background: #dc0087;
            padding: 12px 24px;
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            border-radius: 8px;
            text-decoration: none;
            transition: 0.25s ease;
        }

        .primary-btn:hover {
            background: #b80072;
            transform: translateY(-3px);
            box-shadow: 0px 6px 15px rgba(220, 0, 135, 0.35);
        }

        .secondary-btn {
            font-size: 15px;
            font-weight: 600;
            text-decoration: none;
            color: #dc0087;
            padding: 12px 24px;
            border-radius: 8px;
            border: 2px solid #dc0087;
            transition: 0.25s ease;
        }

        .secondary-btn:hover {
            background: #dc0087;
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0px 6px 15px rgba(220, 0, 135, 0.35);
        }

        /* =====================
   MOBILE ONLY OVERRIDES
   DESKTOP SAFE
===================== */
        @media (max-width: 768px) {

            .popup-box {
                flex-direction: column;
                width: 95%;
                max-width: 420px;
            }

            .video-wrap {
                width: 100%;
                height: 220px;
            }

            .popup-left img {
                width: 100%;
                height: 100%;
            }

            .popup-right {
                padding: 24px 20px;
                text-align: center;
            }

            .badge {
                margin: 0 auto 14px;
                font-size: 11px;
            }

            .popup-right h2 {
                font-size: 22px;
            }

            .info-text {
                font-size: 13px;
                max-width: 100%;
            }

            .discount-timer {
                justify-content: center;
                gap: 8px;
            }

            .time-box {
                min-width: 48px;
                font-size: 16px;
                padding: 10px 12px;
            }

            .colon {
                font-size: 18px;
            }

            .action-btns {
                flex-direction: column;
                gap: 12px;
            }

            .primary-btn,
            .secondary-btn {
                width: 100%;
                text-align: center;
                font-size: 14px;
                padding: 12px;
            }

            .close-btn {
                right: 12px;
                top: 10px;
                font-size: 26px;
            }
        }

        /* =====================
   EXTRA SMALL PHONES
===================== */
        @media (max-width: 420px) {

            .video-wrap {
                height: 200px;
            }

            .popup-right h2 {
                font-size: 20px;
            }

            .time-box {
                font-size: 15px;
            }
        }


        /* Allow floating icons without creating space */
        .your-section {
            position: relative;
            overflow: visible;
        }

        /* Base icon styling */
        .dd-float-icon {
            position: absolute;
            width: 90px;
            /* adjust size */
            pointer-events: none;
            z-index: 50;
        }

        /* Floating animations */
        .dd-f1 {
            animation: floatA 6s ease-in-out infinite;
        }

        .dd-f2 {
            animation: floatB 7s ease-in-out infinite;
        }

        .dd-f3 {
            animation: floatC 8s ease-in-out infinite;
        }

        @keyframes floatA {
            0% {
                transform: translateY(0px);
            }

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

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

        @keyframes floatB {
            0% {
                transform: translateY(0px);
            }

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

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

        @keyframes floatC {
            0% {
                transform: translateY(0px);
            }

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

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


          /* POPUP WRAPPER (HIDDEN BY DEFAULT) */
.spin-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: 0.3s ease;
  z-index: 999999;
}

/* Hidden State */
.spin-popup.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* POPUP BOX */
.spin-popup-box {
  width: 90%;
  max-width: 900px;
  background: linear-gradient(135deg, #dc0086, #4902ad);
  padding: 40px;
  border-radius: 12px;
  color: #fff;
  display: flex;
  gap: 30px;
  position: relative;
  box-shadow: 0 0 25px rgba(0,0,0,0.4);
}

/* CLOSE BUTTON */
.spin-close {
  position: absolute;
  top: 15px;
  right: 20px;
  cursor: pointer;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
}

/* LEFT SIDE */
.spin-left {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* POINTER */
.pointer {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 40px;
  background: #000;
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  z-index: 20;
}

/* WHEEL */
.wheel {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  border: 12px solid #ffffff44;
  overflow: hidden;
  position: relative;
  transform: rotate(-22.5deg);
  transition: transform 4s cubic-bezier(0.33, 0, 0.67, 1);

  background: conic-gradient(
    #ffcccc 0deg 45deg,
    #f2f2f2 45deg 90deg,
    #c6ffd1 90deg 135deg,
    #ffd7c2 135deg 180deg,
    #ffdada 180deg 225deg,
    #d4faff 225deg 270deg,
    #e2ffc6 270deg 315deg,
    #ffe7c9 315deg 360deg
  );
}

/* SLICE */
.slice {
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  transform-origin: 0% 100%;
  transform: rotate(calc(45deg * var(--i)));
  display: flex;
  justify-content: center;
  align-items: center;
}

.slice span {
  transform: rotate(calc(-45deg * var(--i)));
  font-size: 18px;
  font-weight: 700;
  color: #000;
  text-shadow: 1px 1px 2px #fff;
  width: 120px;
}

/* RIGHT SIDE */
.spin-right {
  width: 50%;
}

.spin-input {
  width: 100%;
  padding: 12px;
  border-radius: 5px;
  border: none;
  margin-bottom: 10px;
  font-size: 15px;
}

.spin-btn {
  width: 100%;
  padding: 14px;
  background: #fff;
  color: #000;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: 0.2s;
}

.spin-btn:hover {
  background: #f1f1f1;
}

.agree {
  display: block;
  margin: 10px 0;
}

/* RESPONSIVE */
@media(max-width: 768px) {
  .spin-popup-box {
    flex-direction: column;
    text-align: center;
  }
  .spin-left, .spin-right {
    width: 100%;
  }
  .wheel {
    width: 260px;
    height: 260px;
  }
  .pointer {
    top: -15px;
  }
}


/* pricing page */
    .app-dev-section {
  background: #000000;
  padding: 60px 0;
  text-align: center;
  overflow: visible;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #dc0087;
  margin-bottom: 40px;
  letter-spacing: 1px;
}

.app-carousel {
  position: relative;
  width: 100%;
  overflow: visible;
}

.app-track {
  display: flex;
  gap: 30px;
  animation: moveApps 30s linear infinite;
  width: max-content;
}

.app-card {
  background: #fff;
  padding: 20px 30px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.app-card i {
  font-size: 2rem;
  color: #dc0087;
  margin-bottom: 10px;
}

.app-card span {
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}

.app-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

@keyframes moveApps {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 768px) {
  .app-card {
    min-width: 150px;
    padding: 15px;
  }
  .app-card i {
    font-size: 1.5rem;
  }
  .section-title {
    font-size: 1.5rem;
  }
}


.movingTextBar-unique {
  background-color: #ec1394;
  overflow: hidden;
  white-space: nowrap;
  padding: 25px 0;
  position: relative;
}

.movingTextWrapper-unique {
  display: flex;
  width: max-content;
  animation: scrollTextUnique 25s linear infinite;
}

.movingTextTrack-unique {
  display: flex;
}

.movingTextTrack-unique span {
  display: inline-block;
  font-weight: 700;
  color: #fff;
  font-size: 22px;
  margin: 0 40px;
}

@keyframes scrollTextUnique {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


@media (max-width: 768px) {

    /* Add spacing left–right inside container */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Make each card full width */
    .row > div.col-lg-4 {
        width: 100%;
        margin-bottom: 25px;
    }

    /* Adjust card spacing & padding */
    .cs-iconbox.cs-style2 {
        padding: 22px 18px;
        border-radius: 16px;
    }

    /* Resize icon for mobile */
    .cs-iconbox_icon svg {
        width: 50px;
    }

    /* Mobile title size */
    .cs-iconbox_title {
        font-size: 19px;
    }

    /* Subtitle text */
    .cs-iconbox_subtitle {
        font-size: 14px;
        line-height: 1.52;
        max-width: 95%;
        margin: auto;
    }
}



/* ============================
   MAIN SECTION
============================ */
.processSection-dark {
  background-color: #181818;
  color: #fff;
  padding: 80px 0;
  font-family: "Poppins", sans-serif;
  text-align: center;
}

.processSubtitle-dark {
  color: #dc0087;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.processTitle-dark {
  font-size: 2.3rem;
  font-weight: 700;
  margin-bottom: 50px;
}

/* ============================
   GRID → 5 CARDS IN ONE ROW
============================ */
.newProcessGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
  max-width: 1400px;
  margin: auto;
}

/* ============================
   CARD STYLE
============================ */
.f-card {
    width: 100%;
    padding: 35px 28px 28px 28px;
    border-radius: 20px;
    background: #ffffff;
    position: relative;
    overflow: visible;

    border: 8px solid transparent;
    background-image:
        linear-gradient(#ffffff, #ffffff),
        linear-gradient(135deg,
            rgba(255,240,180,0.8),
            rgba(220,230,255,0.8),
            rgba(255,200,250,0.8)
        );
    background-clip: padding-box, border-box;

    /* NEW PREMIUM SHADOW */
    box-shadow:
        0px 8px 20px rgba(243, 243, 243, 0.08),
        0px 12px 35px rgba(255, 255, 255, 0.06);

    text-align: left;
    transition: all .35s ease-in-out;
}

.f-card:hover {
    transform: translateY(-10px);

    /* STRONGER HOVER SHADOW */
    box-shadow:
        0px 12px 25px rgba(0,0,0,0.12),
        0px 18px 50px rgba(0,0,0,0.10);
}


/* ============================
   NUMBERING (TOP RIGHT OUTSIDE)
============================ */
.step-num {
    position: absolute;
    top: -7px;     /* above card */
    right: 20px;
    padding: 4px 10px;

    font-size: 26px;
    font-weight: 800;

    background: linear-gradient(135deg,
        rgba(255,240,180,1),
        rgba(220,230,255,1),
        rgba(255,200,250,1)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    pointer-events: none;
}

/* ============================
   TITLE
============================ */
.f-title {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* ============================
   UNIFORM DESCRIPTION
============================ */
.f-desc {
    font-size: 14px;
    color: #555;
    line-height: 1.55;
    max-width: 260px;  /* SAME width for all */
    margin-bottom: 35px;
}

/* ============================
   BOTTOM ROW (ICON + ARROW)
============================ */
.f-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.f-icon {
    width: 40px;
    opacity: 0.9;
}

/* ============================
   ARROW BUTTON
============================ */
.f-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;

    background: radial-gradient(circle at 30% 30%,
        #edf4ff,
        #f7eaff,
        #fff2d9
    );

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

    transition: transform .35s ease-in-out;
}

/* ARROW SLIDE ANIMATION */
.f-arrow span {
    display: inline-block;
    transition: transform .35s cubic-bezier(0.19, 1, 0.22, 1);
}

.f-arrow:hover span {
    transform: translateX(6px);
}

@media (max-width: 768px) {

  /* Grid → 2 cards per row */
  .newProcessGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 15px;
  }

  /* Card adjustments */
  .f-card {
    padding: 26px 22px;
    border-radius: 16px;
  }

  /* Title */
  .f-title {
    font-size: 17px;
  }

  /* Description */
  .f-desc {
    max-width: 100%;
    margin-bottom: 25px;
    font-size: 13px;
  }

  /* Step number */
  .step-num {
    font-size: 22px;
    right: 15px;
  }

  /* Icon */
  .f-icon {
    width: 34px;
  }

  /* Arrow button */
  .f-arrow {
    width: 36px;
    height: 36px;
  }
}



/* ============================
   MOBILE RESPONSIVE ONLY
============================ */
@media (max-width: 768px) {
    .cs-page_heading.cs-style1.cs-center.text-center.cs-bg {
        height: 200px;             /* Better mobile height */
        margin-top: 70px;
        background-position: top;   /* Keeps main subject visible */
    }
}


.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
}


.video-small-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.video-small {
  width: 80%;              /* adjust size here */
  max-width: 1000px;        /* prevents over-large */
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}


/* Background Section */
.contact-section {
    position: relative;
    background-image: url('assets/img/hero/contact.webp'); /* Replace image */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh; /* Adjust to your image height */
}

/* Info Box Placement */
.contact-info-box {
    position: absolute;
    top: 68%;            /* Adjust to align with your blue-marked area */
    left: 52%;
    transform: translate(-10%, -50%);
    width: 650px;
}

/* "CLICK ICONS TO VISIT" */
.icons-title {
    font-size: 22px;
    font-weight: 700;
    color: #2b1464;
    margin-bottom: 12px;
}

/* Floating Animation */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* Social Icons */
.social-icons {
    display: flex;
    align-items: center;
    gap: 22px;
}

.social-icons i {
    font-size: 60px;
    color: #2b1464;
    transition: 0.3s ease;
    animation: float 3s ease-in-out infinite;   /* FLOATING EFFECT */
}

/* Each icon floats at different timing */
.social-icons a:nth-child(1) i {
    animation-delay: 0s;
}
.social-icons a:nth-child(2) i {
    animation-delay: 0.4s;
}
.social-icons a:nth-child(3) i {
    animation-delay: 0.8s;
}

/* Hover Effect */
.social-icons i:hover {
    transform: scale(1.25); /* Bigger pop on hover */
    color: #e50870;
}

/* Email / Phone Row */
.info-row {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 25px;
}

/* Titles */
.info-block h3 {
    font-size: 24px;
    font-weight: 700;
    color: #e50870;
    margin-bottom: 5px;
}

/* Values */
.info-block p {
    font-size: 22px;
    color: #2b1464;
    font-weight: 600;
}

/* Website Section */
.website-block {
    margin-top: 10px;
}





.contact-section {
    margin-top: 90px;
}

@media (max-width: 768px) {

    .contact-section {
        position: relative;
        width: 100%;
        height: auto !important;
        background-image: url('assets/img/hero/contact.webp');
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;

        padding-bottom: 300px;
        margin-top: 90px !important;
    }

    .contact-section::before {
        display: none !important;
    }

    /* 🟣 FLOATING INFO BOX IN MARKED AREA */
    .contact-info-box {
        position: absolute !important;

        top: 67%;
        left: 71%;
        transform: translate(-50%, -50%);

        width: 220px !important;
        padding: 14px 12px;

        text-align: left !important;   

        background: rgba(255,255,255,0.92);
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        backdrop-filter: blur(3px);

        z-index: 10;
    }

    /* title */
    .icons-title {
        font-size: 14px !important;
        margin-bottom: 6px;
        color: #d0007c;
        text-align: left !important;   
    }

    /* Social icons left */
    .social-icons {
        justify-content: flex-start !important;   
        gap: 12px !important;
        margin-bottom: 10px;
    }

    .social-icons i {
        font-size: 30px !important;
        animation: none !important;
    }

    .info-row {
        flex-direction: column;
        align-items: flex-start !important;   
        gap: 8px;
        margin: 10px 0;
    }

    .info-block h3 {
        font-size: 15px !important;
        margin: 0;
        text-align: left !important;   
    }

    .info-block p {
        font-size: 13px !important;
        margin: 0;
        text-align: left !important;  
    }

    .website-block p {
        font-size: 13px !important;
        word-break: break-all;
        text-align: left !important; 
    }
}



@media (max-width: 768px) {
    .container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}


/* ============================================
   DIGITAL MARKETING SERVICES SECTION - UNIQUE
============================================ */

/* FLOATING BACKGROUND */
.dm-services-section {
    position: relative;
    overflow: hidden;
    background-color: #000;
    padding: 40px 0;
    font-family: "Poppins", sans-serif;
}

.dm-srv-floating-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160%;
    height: 180px;
    background: linear-gradient(135deg, #ff75c9, #ff0089);
    opacity: 0.50;
    transform: translate(-50%, -50%) rotate(-8deg);
    border-radius: 999px;
    animation: dm-srv-float-bg 1s ease-in-out infinite alternate;
    filter: blur(4px);
    z-index: 0;
}

/* Floating animation */
@keyframes dm-srv-float-bg {
    0% {
        transform: translate(-50%, -52%) rotate(-8deg);
    }
    100% {
        transform: translate(-50%, -48%) rotate(-8deg);
    }
}

/* Keep content above background */
.dm-services-tab-container,
.dm-srv-cards-grid {
    position: relative;
    z-index: 2;
}

/* TABS CONTAINER */
.dm-services-tab-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* TAB BUTTONS */
.dm-srv-tab {
    background: none;
    border: none;
    cursor: pointer;
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    padding-bottom: 6px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 15px;
}

.dm-srv-tab i {
    font-size: 26px;
    color: #aaa;
    transition: 0.3s ease;
}

.dm-srv-tab span {
    font-size: 14px;
    font-weight: 500;
    color: #888;
    transition: 0.3s ease;
}

/* Hover effect */
.dm-srv-tab:hover i,
.dm-srv-tab:hover span {
    color: #dc0087;
}

/* Active tab */
.dm-srv-tab.dm-srv-tab-active i,
.dm-srv-tab.dm-srv-tab-active span {
    color: #dc0087;
    font-weight: 600;
}

.dm-srv-tab.dm-srv-tab-active::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 25px;
    height: 3px;
    background: #dc0087;
    transform: translateX(-50%);
    border-radius: 6px;
}

/* CARDS GRID */
.dm-srv-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* CARD STYLES */
.dm-srv-card {
    background: #ffe6f5;
    border-radius: 20px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 0 0 1px #ff90c5 inset;
    transition: 0.3s ease;
    min-height: 180px;
}

/* CARD ICON */
.dm-srv-card-icon {
    width: 65px;
    height: 65px;
    background: #ff0099;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 15px;
    transition: 0.3s ease;
}

/* Hover Effects */
.dm-srv-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.dm-srv-card:hover .dm-srv-card-icon {
    transform: scale(1.1);
    background: #dc0087;
}

.dm-srv-card-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #222;
}

/* HIDDEN STATE */
.dm-srv-hidden {
    display: none !important;
}

/* ================================
   📱 MOBILE RESPONSIVE – 768px
================================ */
@media (max-width: 768px) {
    /* Section spacing */
    .dm-services-section {
        padding: 40px 12px !important;
    }

    /* Headings center + smaller */
    .dm-services-section .cs-section_title {
        font-size: 26px !important;
        line-height: 1.3;
        padding: 0 10px;
    }

    .dm-services-section .cs-section_subtitle {
        font-size: 16px !important;
    }

    /* Tabs wrapper */
    .dm-services-tab-container {
        gap: 20px !important;
        padding: 0 10px;
        justify-content: center;
    }

    /* Each tab smaller */
    .dm-srv-tab {
        font-size: 13px !important;
        gap: 4px !important;
    }

    .dm-srv-tab i {
        font-size: 22px !important;
    }

    /* Active underline smaller */
    .dm-srv-tab.dm-srv-tab-active::after {
        width: 18px !important;
        height: 2px !important;
        bottom: -4px;
    }

    /* Floating pink background adjust for mobile */
    .dm-srv-floating-bg {
        height: 120px !important;
        width: 200% !important;
        opacity: 0.35 !important;
        top: 55%;
    }

    /* GRID: 1 CARD PER ROW */
    .dm-srv-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 0 12px !important;
    }

    /* Cards smaller */
    .dm-srv-card {
        min-height: 150px !important;
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }

    /* Icon smaller */
    .dm-srv-card-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 22px !important;
        margin-bottom: 10px !important;
    }

    /* Title smaller */
    .dm-srv-card-title {
        font-size: 14px !important;
    }
}


.icon-wrap i {
  font-size: 55px;
  color: #fff;
  opacity: 0.85;
  transition: 0.3s ease;
}

.icon-wrap:hover i {
  opacity: 1;
  transform: scale(1.05);
}





/* MAIN SECTION */
.tech-mixed-grid {
  background: #000000;
  padding: 70px 0;
}

/* GRID WRAPPER */
.grid-wrapper {
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #1f1f1f;
}

/* GRID BOX */
.grid-box {
  border: 1px solid #1f1f1f;
  background: #121212;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  transition: background 0.3s ease;
  position: relative;       /* ⭐ important: isolate hover */
  z-index: 1;               /* ⭐ ensures no overlap */
}

/* TWO ICON BOX */
.grid-box.two-icons {
  padding: 40px 0;
}

/* FULL BOX HOVER (CORRECT FIX) */
.grid-box:hover {
  background: #1b1b1b;      /* grey hover */
  z-index: 2;               /* ⭐ brings only this box forward */
}

/* ICON WRAPPER */
.icon-wrap {
  text-align: center;
  padding: 10px 0;
  transition: 0.3s ease;
}

/* ICON */
.icon-wrap svg {
  width: 65px;
  height: 65px;
  opacity: 0.8;
  transition: 0.3s ease;
}

/* TEXT */
.icon-wrap p {
  margin-top: 10px;
  color: #c8c8c8;
  font-size: 18px;
  transition: 0.3s ease;
}

/* INDIVIDUAL ICON HOVER */
.icon-wrap:hover svg {
  opacity: 1;
  transform: scale(1.05);
}

.icon-wrap:hover p {
  color: #fff;
}

/* SEPARATOR */
.icon-separator {
  width: 60%;
  height: 1px;
  background: #2b2b2b;
  margin: 12px 0;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .grid-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .grid-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .grid-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}



/* MAIN SECTION */
.comparisonSection-dark {
  background-color: #000;
  color: #fff;
  padding: 80px 0;
  font-family: "Poppins", sans-serif;
}

.comparisonContainer-dark {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 50px;
  max-width: 1200px;
  margin: auto;
}

/* BOX */
.comparisonBox-dark {
  background-color: #111;
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease;
}

.comparisonBox-dark:hover {
  transform: translateY(-5px);
}

/* TITLES */
.comparisonTitle-dark {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.underline-dark {
  width: 60px;
  height: 3px;
  background-color: #555;
  margin-bottom: 30px;
}

.greenLine-dark {
  background-color: #00ff88;
}

/* ITEMS */
.comparisonItem-dark {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.comparisonLabel-dark {
  flex: 1;
  font-weight: 600;
}

/* BARS */
.comparisonBar-dark {
  flex: 4;
  height: 8px;
  background-color: #222;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.comparisonFill-dark {
  height: 100%;
  border-radius: 10px;
  transition: width 1s ease-in-out;
}

.comparisonFill-dark.gray {
  background: linear-gradient(90deg, #777, #999);
}

.comparisonFill-dark.green {
  background: linear-gradient(90deg, #00e676, #00c853);
}

/* VALUES */
.comparisonValue-dark {
  width: 80px;
  text-align: right;
  font-weight: 500;
}

.pinkText-dark {
  color: #ff4a95;
}

.greenText-dark {
  color: #22e188;
}

/* BORDERS */
.beforeBox-dark {
  border: 1px solid #ff4a95;
}

.afterBox-dark {
  border: 1px solid #22e188;
}


/* 🚀 MOBILE RESPONSIVE */
@media (max-width: 768px) {

  .comparisonSection-dark {
    padding: 50px 15px;
  }

  .comparisonBox-dark {
    padding: 25px 20px;
    border-radius: 12px;
  }

  .comparisonTitle-dark {
    font-size: 1.3rem;
    text-align: center;
  }

  .underline-dark {
    margin: 10px auto 25px;
  }

  /* STACK ITEMS */
  .comparisonItem-dark {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* FULL WIDTH BARS */
  .comparisonBar-dark {
    width: 100%;
    height: 14px !important;
    border-radius: 12px;
  }

  .comparisonFill-dark {
    height: 100% !important;
  }

  /* VALUES BELOW BAR */
  .comparisonValue-dark {
    width: 100%;
    text-align: left;
    margin-top: 4px;
    font-size: 14px;
  }
}


/* ============================
   📱 MOBILE RESPONSIVE — 768px
=============================== */
@media (max-width: 768px) {

    /* Section spacing */
    .supportSection-new {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Grid → 2 columns */
    .supportGrid-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Card adjustments */
    .supportCard-new {
        padding: 22px 18px;
        border-radius: 14px;
    }

    /* Icon + Title row */
    .icon-title-row {
        gap: 10px;
        margin-bottom: 10px;
    }

    .supportIcon-front {
        font-size: 20px;
        padding: 7px;
        border-radius: 10px;
    }

    .support-title {
        font-size: 17px;
    }

    /* Description */
    .support-desc {
        font-size: 13px;
        line-height: 1.45;
        margin-bottom: 20px;
        max-width: 100%;
    }
}

/* DESKTOP DEFAULT — DO NOT CHANGE */
.cs-iconbox_4_wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 35px 60px;
  align-items: start;
}

.cs-iconbox.cs-style4 {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cs-iconbox_icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(230, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-iconbox_icon i {
  color: #dc0087;
  font-size: 36px;
  transition: all 0.3s ease;
}

.cs-iconbox_title a {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}



/* =============================
      📱 MOBILE RESPONSIVE
   ============================= */
@media (max-width: 768px) {

  /* Add spacing in container */
  #webservice .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Make image responsive */
  .webImgRes {
    width: 100% !important;
    height: auto !important;
    max-width: 330px;
    display: block;
    margin: 0 auto;
  }

  /* ICONBOX layout → 1 column */
  .cs-iconbox_4_wrap {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Card spacing */
  .cs-iconbox.cs-style4 {
    gap: 15px !important;
    padding: 12px 5px;
  }

  /* Smaller icons */
  .cs-iconbox_icon {
    width: 55px !important;
    height: 55px !important;
  }

  .cs-iconbox_icon i {
    font-size: 28px !important;
  }

  /* Smaller text */
  .cs-iconbox_title a {
    font-size: 18px !important;
  }

  /* Reduce top/bottom spacing */
  .cs-height_45,
  .cs-height_30 {
    height: 18px !important;
  }

}



/* ============================
   MAIN LAYOUT FIX
============================ */
.keyFeatureWrap {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.keyFeatureLeft {
    flex: 1;
    min-width: 300px;
}

.keyFeatureRight {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

/* Image Desktop */
.keyFeatureImg {
    width: 450px;
    height: 450px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 6px 25px rgba(0,0,0,0.25);
}

/* ============================
   FEATURES GRID
============================ */
.lms-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.feature {
    background: #ffffff;
    padding: 18px 25px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: 0.3s ease;
}

.feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.feature i {
    font-size: 22px;
    transition: 0.3s ease;
}

.feature:hover i {
    transform: scale(1.2) rotate(5deg);
}

.feature span {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

/* ============================
   BUTTONS
============================ */
.keyFeatureBtn {
    margin-top: 20px;
    display: inline-block;
}

.keyFeatureBtn2 {
    margin-left: 120px;
}

@media (max-width: 768px) {

    /* Container spacing */
    #whyus .container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* Columns become vertical */
    .keyFeatureWrap {
        flex-direction: column;
        text-align: center;
    }

    /* Responsive image */
    .keyFeatureImg {
        width: 100% !important;
        height: auto !important;
        max-width: 360px;
    }

    /* Features grid becomes single column */
    .lms-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Buttons stacked */
    .keyFeatureBtn,
    .keyFeatureBtn2 {
        display: block !important;
        width: 100% !important;
        margin: 10px 0 !important;
        text-align: center !important;
    }

    .keyFeatureBtn2 {
        margin-left: 0 !important;
    }
}



.unique-gallery-section {
  background: #000;
  padding: 60px 0;
  text-align: center;
}

/* Carousel Wrapper */
.unique-carousel {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 500px;
  margin: auto;
  overflow: hidden;
  border-radius: 14px;
}

/* Inner Slides Row */
.unique-carousel-inner {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease-in-out;
}

/* Slide */
.unique-slide {
  width: 900px;
  height: 500px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 14px;
}

/* Buttons */
.unique-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #dc0087;
  font-size: 40px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.3s;
}

.unique-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}

.prev { left: 15px; }
.next { right: 15px; }


/* ============================
   📱 MOBILE RESPONSIVE (≤768px)
============================ */
@media (max-width: 768px) {

  .unique-gallery-section {
    padding: 40px 0;
  }

  /* Carousel smaller for mobile */
  .unique-carousel {
    height: 260px !important;
    max-width: 100% !important;
    border-radius: 12px;
  }

  .unique-carousel-inner {
    height: 260px !important;
  }

  .unique-slide {
    width: 100% !important;
    height: 260px !important;
    object-fit: cover;
  }

  /* Smaller buttons */
  .unique-btn {
    font-size: 28px;
    padding: 6px 12px;
  }

  .prev { left: 8px; }
  .next { right: 8px; }
}


  .saasSection-dark {
    background: #000;
    color: #fff;
    padding: 80px 0;
    text-align: center;
    font-family: 'Poppins', sans-serif;
  }

  .saasSection-title {
    font-size: 48px;
    color: #dc0087;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 60px;
  }

  .saasSection-container {
    width: 85%;
    margin: auto;
  }

  .saasSection-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
  }

  @media (max-width: 1024px) {
    .saasSection-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .saasSection-grid {
      grid-template-columns: 1fr;
    }
  }

  .saasSection-card {
    background: #111;
    border-radius: 20px;
    padding: 40px 30px;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 0 15px rgba(152, 21, 121, 0.05);
    border: 2px solid rgba(230, 65, 167, 0.4); /* ✨ Neon border */
  }

  .saasSection-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px rgb(253, 21, 172);
  }

  .saasCard-icon {
    font-size: 40px;
    margin-bottom: 25px;
  }

  .saasSection-card h3 {
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 700;
    color: #ffffff;
  }

  .saasSection-card p {
    font-size: 15px;
    color: #ccc;
    line-height: 1.6;
  }

  /* Icon colors */
  .saasCard-blue .saasCard-icon { color: #4cc9f0; }
  .saasCard-pink .saasCard-icon { color: #ff4b91; }
  .saasCard-purple .saasCard-icon { color: #9d4edd; }
  .saasCard-orange .saasCard-icon { color: #ff8800; }
  .saasCard-green .saasCard-icon { color: #1dd1a1; }
  .saasCard-yellow .saasCard-icon { color: #feca57; }
  .saasCard-red .saasCard-icon { color: #ff6b6b; }
  .saasCard-cyan .saasCard-icon { color: #00d2d3; }

  /* Button styling */
  .saasSection-btn-wrap {
    margin-top: 70px;
  }

  .saasSection-btn {
    display: inline-block;
    padding: 14px 40px;
    background-color: #dc0087;
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .saasSection-btn:hover {
    background-color: #dc0087;
    transform: scale(1.05);
  }


  
/* ======= Section Styling ======= */
.placed-students {
  background: rgb(0 0 0);
  /* background-image: url('/assets/img/bg/pattern-2.png'); */
  padding: 60px 0;
  text-align: center;
  color: #fff;
}
.count-title { font-size: 90px; color: #0ea5e9; font-weight: 800; margin-bottom: 10px; }
.count-btn { background: #0ea5e9; color: #fff; padding: 12px 28px; border-radius: 8px; font-size: 20px; margin-bottom: 15px; }
.count-subtitle { font-size: 20px; opacity: 0.8; margin-bottom: 40px; }

/* ======= Carousel Rows ======= */
.carousel-wrapper { overflow: hidden; width: 100%; }
.carousel-row { display: flex; overflow: hidden; margin: 15px 0; white-space: nowrap; }
.carousel-row.reverse .carousel-track { animation-direction: reverse; }

/* ======= Animation ======= */
.carousel-track { display: flex; animation: scroll 26s linear infinite; }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ======= Cards ======= */
.student-card {
  background: #fff;
  width: 150px;
  height: 185px;
  border-radius: 12px;
  overflow: hidden;
  margin-right: 20px;
  flex-shrink: 0;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.student-img { width: 100%; height: 75%; object-fit: cover; }
.student-name { font-size: 14px; font-weight: 700; margin: 2px 0 0; color: #000; }
.student-course { font-size: 11px; color: #444; margin: 0; }

/* FIX COURSE NAME CUTTING ON MOBILE */
@media (max-width: 768px) {

  .student-card {
    width: 130px;
    height: 175px !important; /* Increased height slightly */
    padding-bottom: 10px; /* Extra space for text */
  }

  .student-name {
    font-size: 13px;
    line-height: 1.2;
    white-space: normal !important;
  }

  .student-course {
    font-size: 11px;
    line-height: 1.2;
    white-space: normal !important;  /* allow wrapping */
    padding: 0 4px; /* prevent cutoff */
    display: block;
  }
}


        .cs-iconbox_icon {
    width: 90px;            /* same width for all icons */
    height: 90px;           /* same height for all icons */
    margin: 0 auto 20px;    /* center horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
}

.cs-iconbox_icon svg {
    width: 70px;  /* scale SVG nicely */
    height: 70px;
    display: block;
}







/* ===============================
   WB TECH FAQ SECTION
================================= */

.wb-faq-section {
    background: #000;
    padding: 60px 20px;
    color: #fff;
    font-family: Arial, sans-serif;
}

/* Container */
.faq-container {
    max-width: 900px;
    margin: auto;
}

/* Heading */
.cs-section_heading {
    text-align: center;
    margin-bottom: 40px;
}

.cs-section_subtitle {
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
}

.cs-section_title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
}

/* ===============================
   FAQ BLOCK
================================= */

.faq-block {
    width: 100%;
}

/* FAQ Question */
.faq-item {
    padding: 18px 22px;
    border-radius: 14px;
    margin-bottom: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.25s ease-in-out;
}

/* Alternating Colors */
.faq-block:nth-of-type(odd) .faq-item {
    background: #dc0087; /* Pink */
}

.faq-block:nth-of-type(even) .faq-item {
    background: #ffffff; /* White */
}

/* Text Always Black */
.faq-item h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #000;
}

.faq-item span {
    font-size: 24px;
    font-weight: bold;
    color: #000;
    transition: transform 0.3s ease;
}

/* Hover Effect */
.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.25);
}

/* ===============================
   FAQ ANSWER
================================= */

.faq-answer {
    display: none;
    margin-top: -8px;
    margin-bottom: 18px;
    padding: 15px 22px;
    border-radius: 0 0 14px 14px;
    font-size: 16px;
    line-height: 1.6;
    background: #f5f5f5;
    color: #000;
}

/* ===============================
   PAGINATION
================================= */

.faq-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 15px;
}

.faq-pagination button {
    background: #ffffff;
    color: #000;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.25s ease;
}

.faq-pagination button:hover {
    background: #dc0087;
    color: #fff;
}

.faq-pagination span {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

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

@media (max-width: 768px) {
    .cs-section_title {
        font-size: 30px;
    }

    .faq-item h3 {
        font-size: 16px;
    }

    .faq-item {
        padding: 15px 18px;
    }

    .faq-answer {
        font-size: 15px;
    }
}