/* =========================================================
   MOBILE SLIDER - 2 CARDS
   Desktop Layout Remains Unchanged
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

.mobile-slider-controls {
    display: none;
}


/* =========================================================
   MOBILE - MAX 767px
   ========================================================= */

@media (max-width: 767px) {
.about-visual {
	position: relative;
	width: 100%;
	min-height:200px !important;}

    .business-products-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .business-products-section .container-fluid {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }


    /* ---------------------------------------------------------
       Common Slider
       --------------------------------------------------------- */

    .business-choose-grid,
    .featured-products-grid {
        display: flex !important;

        flex-direction: row;
        flex-wrap: nowrap;

        width: 100%;
        max-width: 100%;

        gap: 15px;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 0 0 5px 0;
        margin: 0;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        /* Hide scrollbar Firefox */
        scrollbar-width: none;

        /* Prevent flex children from shrinking */
        align-items: stretch;
    }


    /* ---------------------------------------------------------
       Hide Scrollbar - Chrome / Safari / Edge
       --------------------------------------------------------- */

    .business-choose-grid::-webkit-scrollbar,
    .featured-products-grid::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }


    /* =========================================================
       BUSINESS CHOOSE
       EXACTLY 2 CARDS
       ========================================================= */

    .business-choose-grid .business-choose-item {
        flex: 0 0 calc((100% - 15px) / 2) !important;

        width: calc((100% - 15px) / 2);
        min-width: calc((100% - 15px) / 2);
        max-width: calc((100% - 15px) / 2);

        margin: 0;

        scroll-snap-align: start;
        scroll-snap-stop: always;

        box-sizing: border-box;
    }


    /* =========================================================
       FEATURED PRODUCTS
       EXACTLY 2 CARDS
       ========================================================= */

.featured-products-grid .product-card {
    flex: 0 0 calc((100% - 15px) / 1.5) !important;
    min-width: calc((100% - 15px) / 1.5);
    max-width: calc((100% - 15px) / 1.5);
}



    /* ---------------------------------------------------------
       Images
       --------------------------------------------------------- */

    .featured-products-grid .product-card .product-image {
        width: 100%;
        overflow: hidden;
    }

    .featured-products-grid .product-card .product-image img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
    }


    /* =========================================================
       MOBILE SLIDER CONTROLS
       Bottom Previous / Next
       ========================================================= */

    .business-choose .mobile-slider-controls,
    .featured-products .mobile-slider-controls {
        display: flex;

        width: 100%;

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

        gap: 12px;

        margin-top: 20px;
        margin-bottom: 5px;
    }


    /* ---------------------------------------------------------
       Buttons
       --------------------------------------------------------- */

    .mobile-slider-btn {
        display: flex;

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

        width: 42px;
        height: 42px;

        min-width: 42px;
        min-height: 42px;

        padding: 0;
        margin: 0;

        border: 1px solid #ddd;
        border-radius: 50%;

        outline: none;

        background: #fff;
        color: #222;

        font-size: 16px;
        line-height: 1;

        cursor: pointer;

        transition:
            background-color 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease,
            opacity 0.25s ease,
            transform 0.2s ease;

        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

        -webkit-tap-highlight-color: transparent;
    }


    /* ---------------------------------------------------------
       Button Hover
       --------------------------------------------------------- */

    .mobile-slider-btn:hover {
        background: #222;
        color: #fff;
        border-color: #222;
    }


    /* ---------------------------------------------------------
       Button Active
       --------------------------------------------------------- */

    .mobile-slider-btn:active {
        transform: scale(0.94);
    }


    /* ---------------------------------------------------------
       Disabled Button
       --------------------------------------------------------- */

    .mobile-slider-btn:disabled {
        opacity: 0.35;

        cursor: not-allowed;

        background: #f5f5f5;
        color: #999;

        border-color: #ddd;

        box-shadow: none;

        transform: none;
    }


    .mobile-slider-btn:disabled:hover {
        background: #f5f5f5;
        color: #999;
        border-color: #ddd;
    }


    /* ---------------------------------------------------------
       Button Icon
       --------------------------------------------------------- */

    .mobile-slider-btn i {
        display: block;

        font-size: 15px;

        line-height: 1;

        pointer-events: none;
    }


    /* ---------------------------------------------------------
       Hide Controls When Only One / No Slider Needed
       JS will add .no-slider
       --------------------------------------------------------- */

    .mobile-slider-controls.no-slider {
        display: none !important;
    }

}


/* =========================================================
   SMALL MOBILE - MAX 480px
   Still EXACTLY 2 CARDS
   ========================================================= */

@media (max-width: 480px) {

    .business-choose-grid,
    .featured-products-grid {
        gap: 12px;
    }


    /* ---------------------------------------------------------
       Choose - 2 Cards
       --------------------------------------------------------- */

    .business-choose-grid .business-choose-item {
        flex: 0 0 calc((100% - 12px) / 2) !important;

        width: calc((100% - 12px) / 2);
        min-width: calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
    }



    .business-choose .mobile-slider-controls,
    .featured-products .mobile-slider-controls {
        margin-top: 16px;
    }


    .mobile-slider-btn {
        width: 40px;
        height: 40px;

        min-width: 40px;
        min-height: 40px;
    }


    .mobile-slider-btn i {
        font-size: 14px;
    }
}




/* =========================
   CAPABILITIES - MOBILE ONLY
   ========================= */
@media (max-width: 767px) {

    .capabilities-section {
        padding: 50px 0;
        overflow: hidden;
    }

    .capabilities-section .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .capabilities-header {
        margin-bottom: 30px;
        text-align: left;
    }

    .capabilities-title {
        font-size: 28px;
        line-height: 1.2;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .capabilities-subtitle {
        font-size: 15px;
        line-height: 1.6;
    }

    .capabilities-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .capability-card {
        width: 100%;
        padding: 24px 20px;
        border-radius: 16px;
        overflow: hidden;
    }

    .capability-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .capability-number {
        font-size: 14px;
        font-weight: 600;
    }



    .capability-name {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .capability-heading {
        font-size: 22px;
        line-height: 1.25;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .capability-description {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 18px;
    }

    .capability-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
    }

    .capability-list-item {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        font-size: 14px;
        line-height: 1.5;
        text-decoration: none;
    }

    .capability-list-item i {
        flex: 0 0 auto;
        margin-top: 3px;
    }

    .capability-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        margin-top: 5px;
    }

    /* .capability-image {
        margin-top: 20px;
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
    } */

    .capability-image img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}
@media (max-width: 767px) {
    .capabilities-grid {
        display: flex;
        gap: 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px;
        scrollbar-width: none;
    }

    .capabilities-grid::-webkit-scrollbar {
        display: none;
    }

    .capability-card {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }
}
.capabilities-slider-controls {
    display: none;
}

@media (max-width: 767px) {

    .capabilities-grid {
        display: flex;
        gap: 16px;
        overflow: hidden;
    }

    .capability-card {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .capabilities-slider-controls {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 24px;
    }

    .capabilities-slider-controls button {
        width: 44px;
        height: 44px;
        border: 1px solid #ddd;
        border-radius: 50%;
        background: #fff;
        color: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all .2s ease;
    }

    .capabilities-slider-controls button:hover {
        background: #111;
        color: #fff;
        border-color: #111;
    }

    .capabilities-slider-controls button:disabled {
        opacity: .4;
        cursor: not-allowed;
    }
}

.products-mobile-slider {
    width: 100%;
}

.products-mobile-slider .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.products-mobile-slider .product-item {
    box-sizing: border-box;
}


/* ----------------------------------
   Mobile
---------------------------------- */

@media (max-width: 767px) {

    .products-mobile-slider {
        width: 100%;
        overflow: hidden;
    }

    .products-mobile-slider .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap;
    }

    .products-mobile-slider .product-item {
        width: 100%;
        min-width: 100%;
        flex-shrink: 0;
    }

    /* Pagination */

    .products-mobile-slider .swiper-pagination {
        position: relative;
        margin-top: 15px;
        bottom: auto;
    }

    .products-mobile-slider .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        opacity: 0.4;
    }

    .products-mobile-slider .swiper-pagination-bullet-active {
        opacity: 1;
    }

}
/* ----------------------------------
   Desktop - Hide Pagination
---------------------------------- */

@media (min-width: 768px) {

    .products-mobile-slider .swiper-pagination {
        display: none;
    }

}.core-services-grid {
	display: grid;
	padding: var(--space-8);
}
/* Mobile - horizontal slider */
@media (max-width: 767px) {
    .core-services-grid.mobile-slider {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        gap: 16px;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    .core-services-grid.mobile-slider::-webkit-scrollbar {
        display: none;
    }

    .core-services-grid.mobile-slider .service-card {
        flex: 0 0 calc(100% - 30px);
        width: calc(100% - 30px);
        scroll-snap-align: start;
    }

    .mobile-slider-controls {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 24px;
    }

    .mobile-slider-controls button {
        width: 42px;
        height: 42px;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

    .mobile-slider-controls button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    .why-items.mobile-slider {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 16px;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .why-items.mobile-slider::-webkit-scrollbar {
        display: none;
    }

    .why-items.mobile-slider .why-item {
        /* flex: 0 0 calc(100% - 30px); */
        width: calc(100% - 30px);
        scroll-snap-align: start;
    }
        .social-services-grid.mobile-slider {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 16px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 16px !important;
        margin: 0 !important;

        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    /* Chrome / Safari scrollbar */
    .social-services-grid.mobile-slider::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


    /* =====================================================
       CARD
       ===================================================== */

   .social-services-grid.mobile-slider .social-service-card {
    flex: 0 0 calc((100% - 16px) / 1.2) !important;
    min-width: calc((100% - 16px) / 1.2) !important;
    max-width: calc((100% - 16px) / 1.2) !important;

    box-sizing: border-box !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

    /* =====================================================
       IMAGE
       ===================================================== */

    .social-services-grid.mobile-slider
    .social-service-card
    .social-service-image {
        width: 100% !important;

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

        overflow: hidden !important;
    }

    .social-services-grid.mobile-slider
    .social-service-card
    .social-service-image img {
        display: block !important;

        width: 75%!important;
        max-width: 100% !important;

        height: auto !important;

        object-fit: contain !important;
        object-position: center !important;
    }

 .how-work-process.mobile-slider {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 16px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 16px !important;
        margin: 0 !important;

        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    .how-work-process.mobile-slider::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


    /* ==========================================
       INDIVIDUAL STEP
       ========================================== */

    .how-work-process.mobile-slider {
   
        max-width: calc(100% - 32px) !important;

        box-sizing: border-box !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }
    @media screen and (max-width: 767px) {

    .benefits-wrapper.mobile-slider {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 16px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 16px !important;
        margin: 0 !important;

        box-sizing: border-box !important;

        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    .benefits-wrapper.mobile-slider::-webkit-scrollbar {
        display: none !important;
    }

    /* 2 cards per view */
    .benefits-wrapper.mobile-slider > .benefit-item {
        flex: 0 0 calc((100% - 16px) / 2) !important;
        width: calc((100% - 16px) / 2) !important;
        min-width: calc((100% - 16px) / 2) !important;

        box-sizing: border-box !important;

        scroll-snap-align: start !important;
    }
}


    .benefits-wrapper.mobile-slider::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


    /* ==========================================
       BENEFIT CARD
       ========================================== */

   .benefits-wrapper.mobile-slider .benefit-item {
    flex: 0 0 calc(100% - 32px) !important;
    width: calc(100% - 32px) !important;
    min-width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
}

.benefits-wrapper.mobile-slider .benefit-item:first-child {
    flex-basis: calc(100% - 32px) !important;
}

.benefits-wrapper.mobile-slider .benefit-item:not(:first-child) {
    flex-basis: calc(50% - 16px) !important;
    width: calc(50% - 16px) !important;
    min-width: calc(76% - 16px) !important;
    max-width: calc(50% - 16px) !important;
}


    /* ==========================================
       ICON
       ========================================== */

    .benefits-wrapper.mobile-slider .benefit-icon {
        flex-shrink: 0 !important;
    }


    /* ==========================================
       CONTENT
       ========================================== */

    .benefits-wrapper.mobile-slider .benefit-content {
        min-width: 0 !important;
    }

    .benefits-wrapper.mobile-slider .benefit-title {
        display: block !important;
    }

    .benefits-wrapper.mobile-slider .benefit-text {
        display: block !important;
    }


    /* ==========================================
       CONTROLS
       ========================================== */

    .benefits-wrapper.mobile-slider
    + .mobile-slider-controls {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        width: 100% !important;

        margin-top: 20px !important;
    }

    .benefits-wrapper.mobile-slider
    + .mobile-slider-controls button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        padding: 0 !important;

        border: 1px solid #ddd !important;
        border-radius: 50% !important;

        background: #fff !important;

        cursor: pointer !important;
    }

    .benefits-wrapper.mobile-slider
    + .mobile-slider-controls button:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }


    /* ==========================================
       IMAGE / ICON
       ========================================== */

    .how-work-process.mobile-slider .how-work-icon {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        /* width: 100% !important; */
    }

    .mobile-slider .how-work-icon img {
        display: block !important;

        max-width: 100% !important;
        width: auto !important;
        height: auto !important;

        object-fit: contain !important;
        object-position: center !important;
    }
.success-stories-grid.mobile-slider {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 16px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 16px !important;
        margin: 0 !important;

        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    .success-stories-grid.mobile-slider::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


    /* ==========================================
       CARD
       ========================================== */

    .success-stories-grid.mobile-slider
    .success-story-card {
        flex: 0 0 calc(100% - 32px) !important;

        width: calc(100% - 32px) !important;
        min-width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;

        box-sizing: border-box !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;

        overflow: hidden !important;
    }


    /* ==========================================
       IMAGE
       ========================================== */

    .success-stories-grid.mobile-slider
    .success-story-image {
        width: 100% !important;

        overflow: hidden !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .success-stories-grid.mobile-slider
    .success-story-image img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    /* ==========================================
       CONTENT
       ========================================== */

    .success-stories-grid.mobile-slider
    .success-story-content {
        width: 100% !important;
        box-sizing: border-box !important;

        padding: 20px !important;
    }

    .success-stories-grid.mobile-slider
    .success-story-category {
        display: block !important;
    }

    .success-stories-grid.mobile-slider
    .success-story-description {
        display: block !important;

        margin-top: 10px !important;
    }

    .success-stories-grid.mobile-slider
    .success-story-result {
        display: flex !important;

        align-items: center !important;

        margin-top: 14px !important;
    }

    .success-stories-grid.mobile-slider
    .success-story-link {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        margin-top: 18px !important;
    }


    /* ==========================================
       CONTROLS
       ========================================== */

    .success-stories-grid.mobile-slider
    + .mobile-slider-controls {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        width: 100% !important;

        margin-top: 20px !important;
    }

    .success-stories-grid.mobile-slider
    + .mobile-slider-controls button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        padding: 0 !important;

        border: 1px solid #ddd !important;
        border-radius: 50% !important;

        background: #fff !important;

        cursor: pointer !important;
    }

    .success-stories-grid.mobile-slider
    + .mobile-slider-controls button:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }
     .platforms-grid.mobile-slider {
        display: flex !important;

        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 16px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 16px !important;
        margin: 0 !important;

        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;

        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    .platforms-grid.mobile-slider::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }



    .platforms-grid.mobile-slider .platform-icon {
        flex-shrink: 0 !important;
    }


    /* ==========================================
       CONTENT
       ========================================== */

    .platforms-grid.mobile-slider .platform-content {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .platforms-grid.mobile-slider .platform-name {
        display: block !important;
    }

    .platforms-grid.mobile-slider .platform-description {
        display: block !important;
    }


    /* ==========================================
       CONTROLS
       ========================================== */

    .platforms-grid.mobile-slider + .mobile-slider-controls {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        width: 100% !important;

        margin-top: 20px !important;
    }

    .platforms-grid.mobile-slider + .mobile-slider-controls button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;

        padding: 0 !important;

        border: 1px solid #ddd !important;
        border-radius: 50% !important;

        background: #fff !important;

        cursor: pointer !important;
    }

    .platforms-grid.mobile-slider
    + .mobile-slider-controls
    button:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }

    /* ==========================================
       NUMBER
       ========================================== */

    .how-work-process.mobile-slider .how-work-number {
        display: block !important;
    }


    /* ==========================================
       DESCRIPTION
       ========================================== */

    .how-work-process.mobile-slider .how-work-description {
        display: block !important;

        box-sizing: border-box !important;
    }


    /* ==========================================
       CONTROLS
       ========================================== */

    .how-work-process.mobile-slider
    + .mobile-slider-controls {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        width: 100% !important;

        margin-top: 20px !important;
    }

    .how-work-process.mobile-slider
    + .mobile-slider-controls button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        padding: 0 !important;

        border: 1px solid #ddd !important;
        border-radius: 50% !important;

        background: #fff !important;

        cursor: pointer !important;
    }

    .how-work-process.mobile-slider
    + .mobile-slider-controls button:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }
    /* =====================================================
       TITLE
       ===================================================== */

    /* .social-services-grid.mobile-slider
    .social-service-card
    .social-service-card-title {
        width: 100% !important;

        box-sizing: border-box !important;

        margin-top: 18px !important;

        padding: 0 20px !important;

        font-size: 22px !important;
        line-height: 1.25 !important;

        font-weight: 700 !important;
    } */


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    .social-services-grid.mobile-slider
    .social-service-card
    .social-service-card-text {
        width: 100% !important;

        box-sizing: border-box !important;

        /* padding: 0 20px 24px !important; */

        /* margin-top: 12px !important; */

        font-size: 16px !important;
        line-height: 1.55 !important;
    }


    /* =====================================================
       SLIDER CONTROLS
       ===================================================== */

    .mobile-slider-controls {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        width: 100% !important;

        margin-top: 20px !important;
    }

    .mobile-slider-controls button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;

        padding: 0 !important;

        border: 1px solid #ddd !important;
        border-radius: 50% !important;

        background: #fff !important;

        cursor: pointer !important;

        transition: all 0.2s ease !important;
    }

    .mobile-slider-controls button i {
        font-size: 14px !important;
    }

    .mobile-slider-controls button:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .social-services-grid.mobile-slider {
        gap: 14px !important;
        padding: 0 12px !important;
    }

    /* .social-services-grid.mobile-slider .social-service-card {
        flex: 0 0 calc(100% - 24px) !important;

        width: calc(100% - 24px) !important;
        min-width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
    } */

    .social-services-grid.mobile-slider
    .social-service-card
    .social-service-card-title {
        padding-left: 18px !important;
        padding-right: 18px !important;

        font-size: 14px !important;
    }

    .social-services-grid.mobile-slider
    .social-service-card
    .social-service-card-text {
        padding-left: 18px !important;
        padding-right: 18px !important;

        font-size: 15px !important;
    }
}

/* Desktop par controls hide */
@media (min-width: 768px) {
    .mobile-slider-controls {
        display: none;
    }
}

@media (max-width: 767px) {

    .seo-services-grid.mobile-slider {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 16px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 16px !important;
        margin: 0 !important;

        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .seo-services-grid.mobile-slider::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


    /* Card */
    .seo-services-grid.mobile-slider .seo-service-card {
        flex: 0 0 calc(100% - 32px) !important;

        width: calc(100% - 32px) !important;
        min-width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;

        box-sizing: border-box !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;

        overflow: hidden !important;
    }


    /* Image */
    .seo-services-grid.mobile-slider .seo-service-image {
        width: 100% !important;
        overflow: hidden !important;
    }

    .seo-services-grid.mobile-slider .seo-service-image img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        object-fit: cover !important;
    }


    /* Content */
    .seo-services-grid.mobile-slider .seo-service-name,
    .seo-services-grid.mobile-slider .capability-description,
    .seo-services-grid.mobile-slider .seo-service-list {
        box-sizing: border-box !important;
    }


    /* Controls */
    .seo-services-grid.mobile-slider + .mobile-slider-controls {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        width: 100% !important;

        margin-top: 20px !important;
    }

    .seo-services-grid.mobile-slider
    + .mobile-slider-controls button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;

        padding: 0 !important;

        border: 1px solid #ddd !important;
        border-radius: 50% !important;

        background: #fff !important;

        cursor: pointer !important;
    }

    .seo-services-grid.mobile-slider
    + .mobile-slider-controls button:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }
}


/* Small mobile */
@media (max-width: 480px) {

    .seo-services-grid.mobile-slider {
        gap: 14px !important;
        padding: 0 12px !important;
    }

    .seo-services-grid.mobile-slider .seo-service-card {
        flex: 0 0 calc(100% - 24px) !important;

        width: calc(100% - 24px) !important;
        min-width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
    }
}


/* Desktop: hide slider controls */
@media (min-width: 768px) {

    .seo-services-grid.mobile-slider
    + .mobile-slider-controls {
        display: none !important;
    }
    
}/* ==========================================
   SHOOT MANAGEMENT - MOBILE SLIDER
   ========================================== */

@media (max-width: 767px) {

    .shoot-management-grid.mobile-slider {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 16px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 0 16px !important;
        margin: 0 !important;

        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .shoot-management-grid.mobile-slider::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }


    /* Card */
    .shoot-management-grid.mobile-slider
    .shoot-management-card {
        flex: 0 0 calc(100% - 32px) !important;

        width: calc(100% - 32px) !important;
        min-width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;

        box-sizing: border-box !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;

        overflow: hidden !important;
    }


    /* Image */
    .shoot-management-grid.mobile-slider
    .shoot-management-image {
        width: 100% !important;
        overflow: hidden !important;
    }

    .shoot-management-grid.mobile-slider
    .shoot-management-image img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    /* Content */
    .shoot-management-grid.mobile-slider
    .shoot-management-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Features */
    .shoot-management-grid.mobile-slider
    .shoot-management-feature {
        display: flex !important;
        align-items: flex-start !important;
    }


    /* Controls */
    .shoot-management-grid.mobile-slider
    + .mobile-slider-controls {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        width: 100% !important;

        margin-top: 20px !important;
    }

    .shoot-management-grid.mobile-slider
    + .mobile-slider-controls button {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;

        padding: 0 !important;

        border: 1px solid #ddd !important;
        border-radius: 50% !important;

        background: #fff !important;

        cursor: pointer !important;
    }

    .shoot-management-grid.mobile-slider
    + .mobile-slider-controls button:disabled {
        opacity: 0.4 !important;
        cursor: not-allowed !important;
    }
}


/* Small mobile */
@media (max-width: 480px) {

    .shoot-management-grid.mobile-slider {
        gap: 14px !important;
        padding: 0 12px !important;
    }

    .shoot-management-grid.mobile-slider
    .shoot-management-card {
        flex: 0 0 calc(100% - 24px) !important;

        width: calc(100% - 24px) !important;
        min-width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
    }
}


/* Desktop - hide mobile controls */
@media (min-width: 768px) {

    .shoot-management-grid.mobile-slider
    + .mobile-slider-controls {
        display: none !important;
    }
}

/* =========================================================
   COMMON MOBILE SLIDER
   ========================================================= */



.mobile-slider-controls {
    display: none;
}


/* =========================================================
   MOBILE
   Show 2 cards + half of 3rd card
   ========================================================= */

@media (max-width: 767px) {

    /* .mobile-slider {
        display: flex;
        flex-wrap: nowrap;

        gap: 16px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        padding-bottom: 10px;

        scrollbar-width: none;
        -ms-overflow-style: none;
    } */

    .mobile-slider::-webkit-scrollbar {
        display: none;
    }


    /* -----------------------------------------
       2 CARDS + HALF OF 3RD CARD
       ----------------------------------------- */
.mobile-slider > * {
    /* flex: 0 0 calc((100% - 16px) / 2); */
    min-width: calc((100% - 16px) / 2);

    scroll-snap-align: start;
}


    /* -----------------------------------------
       SERVICE
       ----------------------------------------- */

    .custom-service-grid.mobile-slider {
        margin-left: 0;
        margin-right: 0;
    }

    .custom-service-grid.mobile-slider .custom-service-card {
        width: auto;
    }


    /* -----------------------------------------
       WHY
       ----------------------------------------- */

    .custom-why-grid.mobile-slider .custom-why-item {
        width: auto;
    }


    /* -----------------------------------------
       PROCESS
       ----------------------------------------- */

    .process-list.mobile-slider .process-item {
        width: auto;
    }


    /* -----------------------------------------
       SOLUTIONS
       ----------------------------------------- */

    .solutions-grid.mobile-slider .solution-card {
        width: auto;
    }


    /* -----------------------------------------
       CONTROLS
       ----------------------------------------- */

    .mobile-slider-controls {
        display: flex;

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

        gap: 10px;

        margin-top: 20px;
    }

    .mobile-slider-controls button {
        width: 42px;
        height: 42px;

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

        padding: 0;

        border: 1px solid #ddd;
        border-radius: 50%;

        background: #fff;
        color: var(--color-secondary);

        cursor: pointer;

        transition:
            background-color 0.25s ease,
            color 0.25s ease,
            border-color 0.25s ease,
            transform 0.25s ease;
    }

    .mobile-slider-controls button:hover {
        background: var(--color-secondary);
        color: #fff;
        border-color: var(--color-secondary);
    }

    .mobile-slider-controls button:active {
        transform: scale(0.95);
    }

    .mobile-slider-controls button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .mobile-slider {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .mobile-slider-controls {
        display: none;
    }

.clikzop-feature {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.clikzop-features__list> :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - (var(--space-3) / 2));
}

}
/* =========================================================
   SOLUTIONS SLIDER
   Mobile: 1 full card + half of next card
   ========================================================= */

@media (max-width: 767px) {

    .solutions-grid.mobile-slider > .solution-card {
        flex: 0 0 calc(100% - 50px);
        min-width: calc(100% - 50px);
        scroll-snap-align: start;
    }

}


/* =========================================================
   DEVELOPMENT PROCESS
   DESKTOP
   ========================================================= */

.development-process__grid {
    display: grid;
    /* grid-template-columns: repeat(4, minmax(0, 1fr)); */
    gap: 30px;
}


/* Arrow is part of desktop layout */
.development-process__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================
   MOBILE
   2 CARDS + HALF OF 3RD CARD
   ========================================================= */

@media (max-width: 767px) {

    .development-process__grid.mobile-slider {
        display: flex;
        flex-wrap: nowrap;

        gap: 16px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        padding-bottom: 10px;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .development-process__grid.mobile-slider::-webkit-scrollbar {
        display: none;
    }


 .development-process__grid.mobile-slider
.development-process__card {
    flex: 0 0 calc((100% - 16px) / 1.5);
    min-width: calc((100% - 16px) / 1.5);

    scroll-snap-align: start;
}




    /* Hide arrows between cards on mobile */
    .development-process__grid.mobile-slider
    .development-process__arrow {
        display: none;
    }


    /* Mobile controls */
    .development-process-slider-controls {
        display: flex;

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

        gap: 10px;

        margin-top: 20px;
    }

    .development-process-slider-controls button {
        width: 42px;
        height: 42px;

        padding: 0;

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

        border: 1px solid #ddd;
        border-radius: 50%;

        background: #fff;
        color: var(--color-secondary);

        cursor: pointer;

        transition: all 0.25s ease;
    }

    .development-process-slider-controls button:hover {
        background: var(--color-secondary);
        color: #fff;
        border-color: var(--color-secondary);
    }

    .development-process-slider-controls button:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .development-process__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

}
/* =========================================
   ABOUT HERO - align with service full-bleed banner
   ========================================= */

.clikzop-about {
    position: relative;
    overflow: hidden;
    min-height: 510px;
}

.clikzop-about-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.clikzop-about-bg img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.clikzop-about .container-fluid {
    position: relative;
    z-index: 2;
    display: block;
}

.clikzop-about-inner {
    position: relative;
    z-index: 2;
    min-height: 510px;
}

.clikzop-about-content {
    width: 100%;
    max-width: none;
}

.clikzop-about-stats {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Tablet: left scrim already from shared hero CSS */
@media (max-width: 991px) {
    .clikzop-about-content {
        max-width: 36rem;
    }

    .clikzop-about-features {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile about hero overlay details (base overlay in style.css) */
@media (max-width: 767px) {
    .clikzop-about,
    .clikzop-about-inner {
        min-height: unset;
        height: auto;
    }

    .clikzop-about-breadcrumb {
        margin-bottom: 0.55rem;
    }

    .clikzop-about-title,
    .clikzop-about-highlight {
        margin-bottom: 0.15rem;
        line-height: 1.15;
    }

    .clikzop-about-description {
        margin-top: 0.55rem !important;
        margin-bottom: 0.65rem !important;
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .clikzop-about-features {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.4rem !important;
        margin-top: 0.55rem !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .clikzop-about-features .clikzop-about-feature {
        width: auto;
        max-width: none;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0.35rem 0.45rem;
        gap: 0.35rem;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none;
        box-sizing: border-box;
        border-radius: var(--radius-md);
    }

    .clikzop-about-features .clikzop-about-feature-icon {
        width: 24px;
        min-width: 24px;
        height: 24px;
        font-size: 0.7rem;
        border-radius: 0.3rem;
        background: rgba(255, 255, 255, 0.12) !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
        color: #fff !important;
    }

    .clikzop-about-features .clikzop-about-feature-content {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.2rem;
        row-gap: 0;
        min-width: 0;
        font-size: 0.68rem;
        line-height: 1.2;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.92);
    }

    .clikzop-about-features .clikzop-about-feature-title,
    .clikzop-about-features .clikzop-about-feature-text {
        display: inline;
        white-space: nowrap;
        margin: 0;
        color: rgba(255, 255, 255, 0.92) !important;
    }

    .clikzop-about-stats {
        width: 100%;
        margin: 0.5rem 0 0;
        padding: 0.65rem 0 0 !important;
        min-height: 0 !important;
        flex-wrap: wrap;
        gap: 0.65rem;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .clikzop-about-stat-number,
    .clikzop-about-stat-label {
        color: #fff !important;
    }

    .clikzop-about-stat-icon {
        background: rgba(255, 255, 255, 0.14) !important;
        color: #fff !important;
    }

    .clikzop-about-stat {
        flex: 1 1 calc(50% - 0.65rem);
        min-width: 7.5rem;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .clikzop-about-stat-divider {
        display: none;
    }
}

@media (max-width: 480px) {
    .clikzop-about-features {
        gap: 0.35rem !important;
    }

    .clikzop-about-features .clikzop-about-feature {
        padding: 0.3rem 0.4rem;
    }
}

@media (max-width: 767px) {

    /* =========================
       CONTACT HERO (overlay base in style.css)
       ========================= */

    .contact-hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover !important;
        object-position: center center !important;
        display: block;
    }

    /* Text */
    .contact-content {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: none;
        min-height: 0;
    }

    /* Breadcrumb */
    .contact-breadcrumb {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 10px;
        line-height: 1;
    }

    .contact-breadcrumb-arrow {
        font-size: 7px;
    }

    /* Main title (contact page only) */
    .contact-content .clikzop-hero-title {
        width: 100%;
        font-size: 1.65rem !important;
        line-height: 1.15;
        margin: 0 0 10px;
        color: #fff !important;
    }

    .contact-title-highlight {
        display: block;
        width: 100%;
        line-height: 1.1;
        color: #5eead4 !important;
    }

.contact-description {
	width: 100%;
	max-width: 100%;
	margin: 8px 0 12px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85) !important;
}

    /* Buttons */
    .contact-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }


    /* =========================
       INFO CARDS
       2 COLUMNS
       ========================= */
.contact-info {
	display: grid;
	/* grid-template-columns: repeat(2, 1fr); */
	gap: 6px;
	padding: 8px 43px 40px;
	background: #fff;
}
.form-control-custom {
	width: 100%;
	height: 42px;
	padding: 0 var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	outline: none;
	background: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--fs-sm);
	transition: var(--transition);
}
.newsletter-input {
	flex:none !important;
	min-width: 0;
	height: 100%;
	padding: 0 var(--space-4);
	border: 0;
	outline: none;
	background: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-family);
	font-size: var(--fs-sm);
}
    .contact-card {
        display: flex;
        align-items: flex-start;

        gap: 6px;

        min-height: 52px;


        background: #fff;

        border: 1px solid #dfe5eb;
        border-radius: 7px;

        box-shadow: 0 2px 7px rgba(0, 0, 0, .08);
    }

    /* Card icon */
    .contact-card-icon {
        flex: 0 0 24px;

        width: 24px;
        height: 24px;

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

        border-radius: 5px;

        font-size: 10px;
    }

    /* Card content */
    .contact-card-content {
        min-width: 0;
    }

    .contact-card-title {
        /* font-size: 8px; */
        line-height: 1.15;

        margin-bottom: 2px;

        font-weight: 700;
    }

    .contact-card-text,
    .contact-card-link {
        /* font-size: 8px; */
        line-height: 1.25;

        word-break: break-word;
    }
}
@media (max-width: 991px) {

    /* =========================================
       MOBILE HEADER
       ========================================= */

    .clikzop-header {
        position: relative;
        z-index: 9999;
    }

    .clikzop-header .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .clikzop-header-inner {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 4.25rem;
        padding: 0;
        gap: 0.75rem;
    }

    .clikzop-logo {
        position: relative;
        z-index: 10001;
        display: inline-flex;
        align-items: center;
        align-self: center;
        line-height: 0;
        flex-shrink: 0;
    }

    .clikzop-logo img {
        width: auto;
        max-width: 9.25rem;
        height: auto;
        display: block;
    }

    /* Book consultation hide on mobile */
    .clikzop-header-btn {
        display: none;
    }

    /* =========================================
       HAMBURGER
       ========================================= */

    .clikzop-mobile-btn {
        position: relative;
        z-index: 10001;
        flex-shrink: 0;
        align-self: center;

        width: 42px;
        height: 42px;

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

        border: 0;
        border-radius: 8px;

        background: var(--color-secondary);
        color: #fff;

        font-size: 18px;

        cursor: pointer;
    }

    .clikzop-mobile-btn i {
        transition: transform .25s ease;
    }


    /* =========================================
       MOBILE NAV DRAWER
       ========================================= */

    .clikzop-nav {
        position: fixed;

        top: 0;
        right: 0;

        width: min(88%, 360px);
        height: 100vh;

        padding: 90px 20px 30px;

        background: #fff;

        z-index: 10000;

        overflow-y: auto;

        box-shadow: -8px 0 30px rgba(0, 0, 0, .12);

        transform: translateX(100%);
        visibility: hidden;

        transition:
            transform .3s ease,
            visibility .3s ease;
    }

    .clikzop-nav.mobile-active {
        transform: translateX(0);
        visibility: visible;
    }


    /* =========================================
       NAV ITEMS
       ========================================= */

    .clikzop-nav-item {
        width: 100%;
        margin: 0;

        border-bottom: 1px solid #edf0f4;
    }

    .clikzop-nav-link {
        width: 100%;

        min-height: 52px;

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

        padding: 14px 4px;

        color: #063b72;

        font-size: 15px;
        font-weight: 600;

        text-decoration: none;
    }

    .clikzop-nav-link:hover {
        color: #ff4d00;
    }

    /* Chevron */
    .clikzop-nav-link i {
        font-size: 11px;

        transition: transform .25s ease;
    }

    .clikzop-dropdown.dropdown-active > .clikzop-nav-link i {
        transform: rotate(180deg);
    }


    /* =========================================
       DROPDOWN
       ========================================= */

    .clikzop-dropdown-menu {
        position: static !important;

        width: 100% !important;

        display: grid;

        grid-template-rows: 0fr;

        max-height: 0;

        overflow: hidden;

        padding: 0 !important;
        margin: 0 !important;

        background: #f7f9fc;

        border: 0 !important;
        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        transform: none !important;

        transition:
            max-height .3s ease,
            padding .3s ease;
    }

    .clikzop-dropdown.dropdown-active .clikzop-dropdown-menu {
        max-height: 500px;

        padding: 8px !important;
    }

    .clikzop-service-list {
        min-height: 0;
        overflow: hidden;
    }


    /* =========================================
       SERVICE ITEMS
       ========================================= */

    .clikzop-service-item {
        display: flex;
        align-items: center;

        width: 100%;

        padding: 10px;

        margin-bottom: 5px;

        border-radius: 8px;

        background: #fff;

        text-decoration: none;

        border: 1px solid #edf0f4;
    }

    .clikzop-service-item:last-child {
        margin-bottom: 0;
    }

    .clikzop-service-icon {
        flex: 0 0 34px;

        width: 34px;
        height: 34px;

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

        border-radius: 7px;

        font-size: 14px;
    }

    .clikzop-service-content {
        flex: 1;

        min-width: 0;

        padding: 0 9px;
    }

    .clikzop-service-content h5 {
        margin: 0;

        color: #063b72;

        font-size: 12px;
        line-height: 1.25;
        font-weight: 600;
    }

    .clikzop-service-arrow {
        font-size: 10px;
        color: #98a2b3;
    }


    /* =========================================
       BODY LOCK WHEN MENU OPEN
       ========================================= */

    body:has(.clikzop-nav.mobile-active) {
        overflow: hidden;
    }
}


/* =========================================
   SMALL MOBILE
   ========================================= */

@media (max-width: 480px) {

    .clikzop-header-inner {
        min-height: 4rem;
    }

    .clikzop-logo img {
        max-width: 8.75rem;
    }

    .clikzop-mobile-btn {
        width: 39px;
        height: 39px;
        font-size: 16px;
    }

    .clikzop-nav {
        width: 88%;
        padding: 80px 16px 25px;
    }

    .clikzop-nav-link {
        min-height: 49px;
        font-size: 14px;
    }

    .clikzop-service-item {
        padding: 8px;
    }

    .clikzop-service-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        font-size: 12px;
    }

    .clikzop-service-content h5 {
        font-size: 11px;
    }
}
@media (max-width: 767px) {

    .footer-section {
        padding: 30px 0 0;
    }

    .footer-section .container-fluid {
        padding: 0 14px;
    }

    /* =================================
       MOBILE 2 COLUMN GRID
       ================================= */

    .footer-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }


    /* =================================
       BRAND
       ================================= */

    .footer-brand {
        grid-column: 1 / -1;

        padding: 16px;

        /* background: #073967; */
        border-radius: 12px;
    }

    .footer-logo {
        margin-bottom: 10px;
    }

    .footer-logo img {
        max-width: 115px;
    }

 
    .footer-socials {
        margin-top: 12px;
        gap: 6px;
    }

    .footer-social {
        width: 27px;
        height: 27px;
        font-size: 9px;
    }


    /* =================================
       QUICK LINKS / SERVICES /
       DEVELOPMENT / PRODUCTS
       ================================= */

    .footer-column {
        width: 100%;
        min-width: 0;

        padding: 13px;

        /* background: rgba(255,255,255,.05);

        border: 1px solid rgba(255,255,255,.08); */

        border-radius: 10px;
    }


    .footer-column-title::after {
        width: 18px;
        height: 2px;
        bottom: -5px;
    }

    .footer-links {
        margin: 0;
        padding: 0;
    }


    .footer-links a {
        font-size: 13px;
        line-height: 1.35;
    }

    .footer-links a::before {
        display: none;
    }


    /* =================================
       CONTACT - FULL WIDTH
       ================================= */

    .footer-contact-column {
        grid-column: 1 / -1;

        width: 100%;

        padding: 14px;

        /* background: rgba(255,255,255,.05);

        border: 1px solid rgba(255,255,255,.08); */

        border-radius: 10px;
    }

    .footer-contact-item {
        gap: 7px;
        margin-bottom: 9px;

        font-size: 9px;
        line-height: 1.4;
    }

    .footer-contact-icon {
        flex: 0 0 24px;

        width: 24px;
        height: 24px;

        font-size: 9px;
        border-radius: 5px;
    }


    /* =================================
       BOTTOM
       ================================= */

    .footer-bottom {
        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 8px;

        padding: 14px 0;

        margin-top: 20px;

        text-align: center;
    }


    .footer-bottom-links {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .process-steps > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - (var(--space-3) / 2));
}

.seo-benefits,
.seo-process-flow,
.clikzop-features__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.seo-benefits > .seo-benefit:last-child:nth-child(odd),
.seo-process-flow > .seo-process-item:last-child:nth-child(odd),
.clikzop-features__list > .clikzop-feature:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - (var(--space-3) / 2));
}
}
@media (max-width: 767px) {
    .services-row.mobile-slider {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 16px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
    }

    .services-row.mobile-slider .service-card-link {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        scroll-snap-align: start !important;
        box-sizing: border-box !important;
    }

    .services-row.mobile-slider .service-card {
        width: 100% !important;
    }

    .services-row.mobile-slider::-webkit-scrollbar {
        display: none;
    }

    .services-row.mobile-slider {
        scrollbar-width: none;
    }
    
}

/* =========================================
   ABOUT - FOUNDER CARD (company section)
========================================= */
@media (max-width: 991px) and (min-width: 768px) {
    .clikzop-founder {
        width: 100%;
        max-width: 15rem;
        margin: 0 auto;
    }

    .clikzop-founder-image {
        height: auto;
        aspect-ratio: 3 / 4;
        max-height: 16rem;
    }

    .clikzop-founder-info {
        width: calc(100% - 1.25rem);
        margin: -2rem auto 0;
    }
}

@media (max-width: 767px) {
    .clikzop-founder {
        max-width: 100% !important;
    }

    .clikzop-founder-image {
        height: 26rem !important;
        aspect-ratio: auto;
        max-height: none !important;
        min-height: 26rem;
    }

    .clikzop-founder-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .clikzop-founder-info {
        width: calc(100% - 1.25rem) !important;
        max-width: calc(100% - 1.25rem);
        margin: -2.25rem auto 0 !important;
        padding: 0.75rem 1rem !important;
    }

    .clikzop-founder-name {
        font-size: 1rem !important;
        line-height: 1.25;
    }

    .clikzop-founder-role {
        font-size: 0.78rem !important;
    }
}

@media (max-width: 480px) {
    .clikzop-founder-image {
        height: 26rem !important;
        min-height: 26rem;
        aspect-ratio: auto;
        max-height: none !important;
    }

    .clikzop-founder-info {
        margin-top: -2.25rem !important;
        padding: 0.65rem 0.9rem !important;
    }
}