/* ===================================== */
/* --- GLOBAL STYLES & VARIABLES --- */
/* ===================================== */

:root {
    /* Dark Section Colors (Section 2) */
    --dark-bg-color: #0d0d0d;
    --dark-text-color: #e0e0e0;
    --dark-accent-color: #1a1a1a;
    --dark-link-color: #90ee90;

    /* Light Section Colors (Sections 3, 4, 6, 7, 9) */
    --light-bg-color: #fcfcfc;
    --light-primary-text: #212121;
    --light-secondary-text: #616161;
    --button-primary: #9b59b6; 
    --active-bg: #212121;
    --active-text: #ffffff;
    --inactive-bg: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.08);

    /* Scrolling & Dev Colors */
    --logo-box-size: 140px;
    --logo-box-margin: 15px;
    --animation-duration: 40s;
    --developer-bg: #141414;
    --developer-highlight: #f0ff00;
    --tag-bg: #c7ff00;
    --tag-text: #333;
    
    /* Hero Section Colors */
    --promo-bar-bg: #9c27b0; 
    --promo-signup-btn: #ffffff;
    --nav-color: #141413;
    --shivir-color: #ff6347;
    --cta-btn-color: #6a5acd; 
    --slide-card-bg: #ffffff;
    --slide-detail-color: #007bff;
}

/* --- Global Reset & Page Background --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
}

/* Utility class to combine common dark styles */
.dark-background-section {
    background-color: var(--dark-bg-color);
    color: var(--dark-text-color);
    position: relative;
    overflow: hidden; 
}


/* ===================================== */
/* --- SECTION 0: TOP BAR & NAVBAR --- */
/* ===================================== */

/* 1. TOP PROMO BAR (BASE STYLES) */
.top-promo-bar {
    background: linear-gradient(to right, #f9c54e, #d868a2, #9b59b6);
     padding: 8px 20px;
     display: flex;
    justify-content: center;
     align-items: center;
     color: white;
    font-size: 0.85rem;
    font-weight: 500;
gap: 20px;
}

/* 2. PROMO BAR FIXED POSITIONING (CRUCIAL) */
.fixed-top-promo {
     position: fixed;
     top: 0;
     /* width: 100%;
    z-index: 1031;  */
    height: 40px; 
}

    .top-promo-bar p {
     margin: 0;
     color: white;
    }

.top-promo-bar strong {
     font-weight: 700;
}

.promo-signup-btn {
    background-color: var(--promo-signup-btn);
     color: var(--promo-bar-bg);
     border: none;
     padding: 5px 15px;
     border-radius: 4px;
     font-weight: 700;
     cursor: pointer;
     transition: opacity 0.2s;
}


.header {
  background: transparent;
  transition: all 0.3s ease;
}



.header.fixed-top {
    top: 46px;
}
.header.scrolled {
    top: 5px;

}

/* 3. NAVBAR CONTAINER BASE (Positioned below the Promo Bar) */
.navbar-container {
     z-index: 1030;
}

/* 4. NAVBAR INITIAL STATE (Over Hero) */
.navbar-initial {
    /* Transparent background on load */
     background-color: transparent !important; 
     border-bottom: none !important;
    box-shadow: none !important;
}
    
    /* Make links/buttons light for dark hero background */
    .nav-links .nav-item .nav-link,
    .nav-buttons .nav-login-btn { 
     color: white !important;
     }


/* 5. NAVBAR SCROLLED STATE (Added by JS) */
.navbar-scrolled {
    /* Moves navbar up to cover the promo bar */
    top: 0 !important; 

}
    
    /* Change links/buttons to dark color for white background */
    .nav-links .nav-item .nav-link,
     .nav-buttons .nav-login-btn { 
     color: var(--nav-color) !important; /* Your default dark color */
    }

.navbar-wrapper {
   
}

.nav-logo {
 height: 50px; 
}

header.scrolled .nav-logo {
 height: 30px; 
}
.nav-links {
 list-style: none;
 display: flex;
 gap: 15px;
 margin: 0;
 padding: 0;
}

.nav-links a {
     text-decoration: none;
     color: var(--nav-color);
     font-size: 0.95rem;
    font-weight: 500;
     transition: color 0.2s;
}

.shivir-link {
     color: var(--shivir-color);
     font-weight: 700;
}

.nav-buttons button {
     padding: 8px 18px;
     border: 1px solid var(--cta-btn-color);
     border-radius: 4px;
     font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.nav-login-btn {
 background-color: white;
     color: var(--cta-btn-color);
     margin-right: 10px;
}

.nav-try-free-btn {
background-color: var(--cta-btn-color);
color: white;
}

/* You will also need to add padding to your hero section 
   to prevent content from being hidden behind the combined header: */
.hero-section {
    padding-top: 75px; /* (40px promo bar + ~60px navbar height) */
}


.promo-signup-btn {
    background-color: var(--promo-signup-btn);
    color: var(--promo-bar-bg);
    border: none;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
}




/* ===================================== */
/* --- SECTION 1: HERO SLIDER SECTION --- */
/* ===================================== */
.hero-section {
    background: radial-gradient(at top left, #a5b7ff 0%, #ffc0cb 50%, #f7f7f7 100%);
    position: relative;
        overflow: hidden;
}



    .hero-section.gradientBanner {
        padding-bottom: 160px;
        
    }
.hero-section.gradientBanner .hero-content {
        padding-top: 30px;
    padding-bottom: 30px;
}

    .hero-section.gradientBanner:after {
        content: "";
        position: absolute;
        bottom: -70px;
        /* moves it slightly below the bottom edge */
        left: 0;
        width: 102%;
        height: 160px;
        /* thickness of the strip */
        background: #fff;
        transform: rotate(-3deg);
        transform-origin: top left;
        z-index: 1;
    }





/* FIX: Added position: relative and overflow: hidden to contain the slide's content */

.sliderArrow {
    /* Set positioning to the bottom-right of the hero section */
    position: absolute;
    bottom: 30px; 
    left: 9%; /* Aligns with the content area */
    /* left: auto;  */
    transform: none; 
    z-index: 999; 
    display: flex; 
    align-items: center;
    gap: 15px; /* Spacing between arrows and indicator */
}
.leftArrow.custom-prev, 
.rightArrow.custom-next {
    display: flex;
    justify-content: center;
    align-items: center;
   width:22px;
    height:22px;
    border-radius: 50%;
    background-color: white; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.leftArrow.custom-prev i, 
.rightArrow.custom-next i {
    /* Base Inactive Icon Color (Dark Gray) */
    color: #333 !important; 
    font-size: 1.2rem !important;
    transition: color 0.3s ease;
}
.sliderArrow.slide-1 .leftArrow i,
.sliderArrow.slide-1 .rightArrow i {
    color: black !important;
}

/* State 2: Both arrows turn black when slide-2 is active */
.sliderArrow.slide-2 .leftArrow i,
.sliderArrow.slide-2 .rightArrow i {
    color: black !important;
}

/* State 3: Both arrows turn black when slide-3 is active */
.sliderArrow.slide-3 .leftArrow i,
.sliderArrow.slide-3 .rightArrow i {
    color: black !important;
}
/* NOTE: Add .slide-4, .slide-5, etc., rules here if you have more slides */

/* Arrow Color on Hover (Optional: Maintain black on hover) */
.leftArrow.custom-prev:hover i,
.rightArrow.custom-next:hover i {
    color: black !important;
}

/* ========================================================== */
/* --- DASHLINE DOT STYLING (Indicator Line) --- */
/* ========================================================== */

.slick-dots-container {
    /* Container for the UL to sit in */
    padding: 0;
    margin: 0;
    
}

/* The UL container for the dashes */
.slick-dots {
    display: flex !important; 
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    width: auto; 
    display: none;
    
}

/* The individual list item (The Dash) */
.slick-dots li {
    width: 25px; 
    height: 4px; 
    margin: 0 4px;
    background-color: #ccc; /* Inactive dash color */
    opacity: 0.5;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: none;
}

/* The active dash (Purple segment) */
.slick-dots li.slick-active {
    background-color: var(--cta-btn-color); /* #6a5acd */
    opacity: 1;
}

/* HIDE the default button/text inside the dashes */
.slick-dots button {
    display: none;
}

/* --- Hide stray dots that appear outside of our custom wrapper --- */
/* .hero-slider-container > .slick-dots {
    display: none;
} */






.slide {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    gap: 50px;
    align-items: center;
    min-height: 450px;
    position: relative;
  overflow: hidden !important;
}

.slide-content-left {
    flex: 1;
    max-width: 55%;
   
}

.slide-content-left h1 {
    font-size: 3.5rem;
    /* font-weight: 700; */
    /* color: #1a1a1a; */
    line-height: 1.1;
    margin-bottom: 20px;
}
@media (max-width: 1200px) {
    .slide-content-left h1 {
        font-size: 3rem;
    }
}
@media (max-width: 992px) {
    .slide-content-left h1 {
        font-size: 2.5rem;
    }
}

.slide-subtitle {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 30px;
}

.slide-cta-btn {
    background-color: var(--cta-btn-color);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
}

.slide-content-right {
    flex: 1;
    max-width: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-area {
    position: relative;
    width: 100%;
    max-width: 500px;
    min-height: 350px;
}

.main-visual {
    position: absolute;
    top: 50px;
    left: 20px;
    width: 150px;
    z-index: 10;
}

.ready-to-ship-card {
    background-color: var(--slide-card-bg);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 100px;
    left: 150px;
    z-index: 20;
    width: 250px;
    text-align: left;
}

.ready-to-ship-icon {
    font-weight: 700;
    color: #388e3c;
    margin-bottom: 10px;
    display: block;
}

.shipping-address {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 5px;
}

.address-detail {
    font-weight: 500;
    color: #333;
    font-size: 0.95rem;
}

.shipment-details-bar {
    background-color: var(--slide-card-bg);
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 50px;
    right: 50px;
    width: 300px;
    display: flex;
    justify-content: space-around;
    z-index: 20;
}

.shipment-details-bar div {
    text-align: center;
}

.detail-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--slide-detail-color);
    line-height: 1;
}

.detail-label {
    font-size: 0.75rem;
    color: #777;
}

/* Slider Controls */
.hero-slider-controls {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 15px;
}

.hero-arrow {
    background: none;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.hero-arrow:hover {
    background-color: #eee;
}

.slide-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
}

.slide-indicator.active {
    background-color: var(--cta-btn-color);
}




/* ===================================== */
/* --- SECTION 2: AI Powered (DARK) --- */
/* ===================================== */

.innovation-section {
    padding: 80px 40px 100px 40px; 
    z-index: 1;
}

.innovation-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 L 0 10" fill="none" stroke="%231a1a1a" stroke-width="0.5"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.2;
    z-index: -1;
}

.main-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

.cards-container {
    display: flex;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    flex: 1;
    background-color: var(--dark-accent-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.05);
}

.card-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: white;
}

.card-description-dark {
    font-size: 1rem;
    margin-bottom: 30px;
    flex-grow: 1;
}

.know-more {
    color: var(--dark-text-color);
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    padding-top: 15px;
    transition: color 0.3s;
}

.know-more:hover {
    color: var(--dark-link-color);
}

.image-placeholder {
    width: 100%;
    height: 180px;
    background-color: #2c2c2c;
    border-radius: 4px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
}

.section-divider {
    height: 50px;
    background: linear-gradient(to top, var(--light-bg-color) 0%, var(--dark-bg-color) 100%);
    z-index: 2;
}





/* ===================================== */
/* --- SECTION 3: Live Demos (LIGHT) --- */
/* ===================================== */

.product-demo-section {
    background-color: var(--light-bg-color);
    color: var(--light-primary-text);
    text-align: center;
    position: relative;
    z-index: 3;
}

.section-header {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 40px;
    color: #1a1a1a;
}

/* --- Tab/Button Group Styles --- */
.tab-controls {
    display: inline-flex;
    background-color: var(--inactive-bg);
    border-radius: 50px;
    padding: 5px;
    margin-bottom: 50px;
    box-shadow: 0 4px 10px var(--card-shadow);
}

.tab-btn {
    background-color: transparent;
    color: var(--light-primary-text);
    border: none;
    padding: 12px 25px;
    margin: 0 2px;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.tab-btn.active {
    background-color: var(--active-bg);
    color: var(--active-text);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* --- Content/Card Styles --- */
.product-cards-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.product-card {
    width: 100%; 
    display: none; 
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.product-card.active-card {
    display: block;
    opacity: 1;
}

.product-card-content-wrapper {
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    background: var(--inactive-bg);
    border-radius: 12px;
    box-shadow: 0 10px 30px var(--card-shadow);
    overflow: hidden;
    display: flex; 
    flex-wrap: wrap;
}

.card-content {
    flex: 1 1 40%; 
    padding: 40px;
}

.card-title-light {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.card-description-light {
    color: var(--light-secondary-text);
    margin-bottom: 25px;
}

.live-demo-btn {
    background-color: var(--button-primary);
    color: var(--active-text);
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.live-demo-btn:hover {
    background-color: #7d3f98;
}

.card-visual {
    flex: 1 1 60%; 
    min-height: 400px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #909090;
    font-style: italic;
}

/* Specific visual placeholders */
#shipping-card .product-card-content-wrapper {
    box-shadow: 0 0 0 10px rgba(255, 255, 150, 0.2), 0 0 0 20px rgba(150, 200, 255, 0.1);
}
#checkout-card .product-card-content-wrapper {
    box-shadow: 0 0 0 10px rgba(150, 255, 150, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.1);
}
#engage360-card .product-card-content-wrapper {
    box-shadow: 0 0 0 10px rgba(255, 150, 150, 0.2), 0 0 0 20px rgba(255, 200, 150, 0.1);
}


/* ===================================== */
/* --- SECTION 4: Integrations (SCROLLING) --- */
/* ===================================== */

.integration-section {
    background-color: var(--light-bg-color); 
    padding: 80px 0;
    position: relative;
    overflow: hidden;
    background-image: radial-gradient(#ccc 1px, transparent 1px);
    background-size: 15px 15px;
}

.integration-header {
    max-width: 1200px;
    margin: 0 auto 50px auto;
    text-align: left;
    padding-left: 40px;
}

.integration-header h2 {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 5px;
}

.integration-header p {
    font-size: 2rem;
    font-weight: 700;
}

/* --- Scrolling Wrapper --- */
.scrolling-logos {
    width: 100%;
    white-space: nowrap; 
    overflow: hidden; 
}

.logo-row {
    display: flex;
    margin: var(--logo-box-margin) 0;
    gap: 2 * var(--logo-box-margin);
    padding: 0 var(--logo-box-margin);
}

/* The container for the logos to be animated */
.logo-track {
    display: flex;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: var(--animation-duration);
}

/* The Box Styling (A, B, C...) */
.logo-box {
    flex-shrink: 0; 
    width: var(--logo-box-size);
    height: 90px; 
    margin-right: var(--logo-box-margin);
    border-radius: 8px;
    background-color: var(--logo-bg);
    color: white;
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-box img {
   
    max-width: 100%; 
    max-height: 100%;

   
    object-fit: contain; 
    
    
    display: block; 
}
.logo-box-dark img {
   
    max-width: 100%; 
    max-height: 100%;
    object-fit: contain; 
    
    /* 3. Display block for better layout control */
    display: block; 
    filter: brightness(200%); /* Makes dark logos stand out on a dark background */
    opacity: 0.8;
}
.logo-box:hover img {
    /* Example: Make it bright and solid on hover */
    opacity: 1;
}

/* --- Animation Keyframes --- */
@keyframes scroll-rtl {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); } 
}

@keyframes scroll-ltr {
    from { transform: translateX(-50%); } 
    to { transform: translateX(0%); } 
}

.logo-track.rtl { animation-name: scroll-rtl; }
.logo-track.ltr { animation-name: scroll-ltr; }

.logo-row:nth-child(1) .logo-box:nth-child(1), .logo-row:nth-child(1) .clone:nth-child(1) { background-color: #483d8b; }
.logo-row:nth-child(1) .logo-box:nth-child(2), .logo-row:nth-child(1) .clone:nth-child(2) { background-color: #ff6347; }
.logo-row:nth-child(1) .logo-box:nth-child(3), .logo-row:nth-child(1) .clone:nth-child(3) { background-color: #00bfff; }
.logo-row:nth-child(1) .logo-box:nth-child(4), .logo-row:nth-child(1) .clone:nth-child(4) { background-color: #36454F; }
.logo-row:nth-child(1) .logo-box:nth-child(5), .logo-row:nth-child(1) .clone:nth-child(5) { background-color: #8fbc8f; }
.logo-row:nth-child(1) .logo-box:nth-child(6), .logo-row:nth-child(1) .clone:nth-child(6) { background-color: #8a2be2; }
.logo-row:nth-child(1) .logo-box:nth-child(7), .logo-row:nth-child(1) .clone:nth-child(7) { background-color: #ff4500; }

.logo-row:nth-child(2) .logo-box:nth-child(1), .logo-row:nth-child(2) .clone:nth-child(1) { background-color: #ff007f; }
.logo-row:nth-child(2) .logo-box:nth-child(2), .logo-row:nth-child(2) .clone:nth-child(2) { background-color: #36454F; }
.logo-row:nth-child(2) .logo-box:nth-child(3), .logo-row:nth-child(2) .clone:nth-child(3) { background-color: #ff4500; }
.logo-row:nth-child(2) .logo-box:nth-child(4), .logo-row:nth-child(2) .clone:nth-child(4) { background-color: #36454F; }
.logo-row:nth-child(2) .logo-box:nth-child(5), .logo-row:nth-child(2) .clone:nth-child(5) { background-color: #800000; }
.logo-row:nth-child(2) .logo-box:nth-child(6), .logo-row:nth-child(2) .clone:nth-child(6) { background-color: #008000; }
.logo-row:nth-child(2) .logo-box:nth-child(7), .logo-row:nth-child(2) .clone:nth-child(7) { background-color: #8a2be2; }
/* ===================================== */
/* --- SECTION 5: Engineered for Developers (DARK) --- */
/* ===================================== */

.developer-section {
    background-color: var(--developer-bg);
    color: var(--dark-text-color);
    padding-top: 80px;
    padding-bottom: 0; 
}

/* Custom grid background for the dev section */
.developer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 100px); 
    background-image: linear-gradient(to right, #222 1px, transparent 1px), linear-gradient(to bottom, #222 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
    z-index: -1;
}

.dev-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px 80px 40px;
    z-index: 2; 
    position: relative;
}

.dev-header h2 {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    line-height: 1.1;
}

.dev-header h2 span {
    /* color: var(--developer-highlight); */
    color:green;
}

.dev-header p {
    font-size: 1rem;
    /* color: var(--dark-text-color); */
    color:white;
    max-width: 700px;
    margin-top: 15px;
    margin-bottom: 50px;
}

.dev-features {
    display: flex;
    gap: 30px;
    margin-bottom: 50px;
}

.dev-feature-card {
    flex: 1;
}

.dev-feature-card h3 {
    font-size: 1.5rem;
    /* color: var(--developer-highlight); */
    color:green;
    margin-bottom: 10px;
}

.dev-feature-card a {
    color: var(--dark-text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.dev-feature-card a:hover {
    color: var(--developer-highlight);
}

/* Final Scrolling Row (Yellow Tags) */
.tag-scrolling-row {
    /* background-color: var(--tag-bg); */
    background-color: #008000;
    padding: 10px 0;
}

.tag-scrolling-row .logo-track {
    animation-duration: 25s; 
}

.tag-scrolling-row .logo-row {
    margin: 0;
}

.tag-scrolling-row .logo-box {
    background-color: transparent;
    color: var(--tag-text);
    font-size: 1rem;
    font-weight: 500;
    height: 30px;
    padding: 0 15px;
    border: 1px solid var(--tag-text);
    border-radius: 20px;
    width: auto; 
}


/* ===================================== */
/* --- SECTION 6: Core Strengths (SLIDER) --- */
/* ===================================== */

.strengths-section {
    background-color: var(--light-bg-color);
    padding: 80px 0;
    font-family: 'Roboto', sans-serif;
}

/* .strengths-header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
} */

.strengths-header-container {
    max-width: 1200px;
    margin: 0 auto;
    /* Use default horizontal padding to align with container */
    padding: 0 15px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.strengths-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1a1a;
}

.slider-controls {
    display: flex;
    gap: 10px;
}

.slider-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background-color: white;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.slider-arrow:hover {
    background-color: #f0f0f0;
    border-color: #aaa;
}

/* --- Slider Core Styling --- */
.strengths-slider-wrapper {
    overflow: hidden; 
    padding-left: 40px;
}

.strengths-slider {
    display: flex;
    width: fit-content; 
    transition: transform 0.5s ease-in-out;
}

.strength-card {
    flex-shrink: 0; 
    width: 100%; 
    height: 400px; 
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
    margin-right: 30px; 
    padding: 30px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

/* .slider-controls .custom-dots {
    display: none !important; 
} */

.card-stat {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
}

.card-metric {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.card-detail {
    font-size: 0.9rem;
    color: #777;
    flex-grow: 1; 
    margin-bottom: 20px;
}

.card-visual-placeholder {
    height: 150px;
    background-color: #f5f5f5;
    border-radius: 8px;
    margin-top: auto; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



/* Optional: Placeholder for image type */
.globe-visual { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#888"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8A8 8 0 0112 20zm0-16a8 8 0 017 4H5a8 8 0 017-4zM4 12a8 8 0 0116 0H4z"/></svg>'); background-size: 40px; }
.partners-visual { background-color: #fff; border: 1px solid #eee; }
.integrations-visual { background-color: #f0f0ff; }
.transactions-visual { background-color: #e0fff0; }
.sellers-visual { background-color: #ffffe0; }
.uptime-visual { background-color: #ffe0e0; }


/* ===================================== */
/* --- SECTION 7: Business Benefit Grid (2x2) --- */
/* ===================================== */

.benefit-section {
    background-color: var(--light-bg-color); 
    padding: 80px 40px;
}



.benefit-header {
    margin-bottom: 50px;
}

.benefit-header h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.benefit-header p {
    font-size: 1.1rem;
    color: #555;
}

/* --- The 2x2 Grid Layout --- */
/* .benefit-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
} */

.benefit-cards-grid {
    
    display: flex; 
    flex-wrap: nowrap; 
    overflow-x: scroll;
    overflow-y: hidden; 
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; 
    margin-left: 0;
    margin-right: 0;

    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 20px; 
}
.benefit-cards-grid::-webkit-scrollbar {
    display: none;
}

.benefit-cards-grid > .col-lg-6 {
   
    min-width: 400px; 
    
    flex-shrink: 0; 
    scroll-snap-align: start; 
    
    
    padding-left: var(--bs-gutter-x, 0.5rem); /* Preserve Bootstrap gutter */
    padding-right: var(--bs-gutter-x, 0.5rem); /* Preserve Bootstrap gutter */
}

.benefit-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 30px;
    display: flex;
    flex-direction: column;
    height:700px;
    width:100%;
}

.benefit-card-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.benefit-card-subheader {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 25px;
}

/* --- Product Tags Styling --- */
.product-tags {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-tag {
    display: inline-block;
    padding: 5px 10px;
    background-color: #f0f8ff; 
    color: #007bff; 
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* --- Metrics Row Styling --- */
.card-metrics-row {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.metric-item {
    flex: 1;
}

.metric-label {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 5px;
}

.metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.benefit-image-placeholder {
    height: 200px; 
    background-color: #f5f5f5;
    border-radius: 8px;
    margin-top: auto; 
}


/* ===================================== */
/* --- SECTION 8: Courier Partners (SCROLLING) --- */
/* ===================================== */

.courier-section {
    background-color: var(--light-bg-color); 
    background-image: radial-gradient(#ccc 1px, transparent 1px); 
    background-size: 15px 15px;
    padding: 80px 0;
    overflow: hidden;
}

.courier-header {
    max-width: 1200px;
    margin: 0 auto 50px auto;
    text-align: left;
    padding: 0 40px;
}

.courier-header h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

/* Couriers use large, bright rectangular boxes */
.courier-scrolling-logos .logo-box {
    width: var(--logo-box-size);
    height: 60px; 
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: 500;
}

/* Row 1 Colors (Top Row: LTR) */
.courier-row-1 .logo-box:nth-child(1), .courier-row-1 .clone:nth-child(1) { background-color: #ff8c00; color: white; } 
.courier-row-1 .logo-box:nth-child(2), .courier-row-1 .clone:nth-child(2) { background-color: #000000; color: white; } 
.courier-row-1 .logo-box:nth-child(3), .courier-row-1 .clone:nth-child(3) { background-color: #000000; color: #008c95; } 
.courier-row-1 .logo-box:nth-child(4), .courier-row-1 .clone:nth-child(4) { background-color: #6a5acd; color: white; } 
.courier-row-1 .logo-box:nth-child(5), .courier-row-1 .clone:nth-child(5) { background-color: #0076a3; color: white; } 
.courier-row-1 .logo-box:nth-child(6), .courier-row-1 .clone:nth-child(6) { background-color: #191970; color: white; } 
.courier-row-1 .logo-box:nth-child(7), .courier-row-1 .clone:nth-child(7) { background-color: #ff6347; color: white; } 

/* Row 2 Colors (Bottom Row: RTL) */
.courier-row-2 .logo-box:nth-child(1), .courier-row-2 .clone:nth-child(1) { background-color: #dc143c; color: white; } 
.courier-row-2 .logo-box:nth-child(2), .courier-row-2 .clone:nth-child(2) { background-color: #6a5acd; color: white; } 
.courier-row-2 .logo-box:nth-child(3), .courier-row-2 .clone:nth-child(3) { background-color: #4682b4; color: white; } 
.courier-row-2 .logo-box:nth-child(4), .courier-row-2 .clone:nth-child(4) { background-color: #ff69b4; color: white; } 
.courier-row-2 .logo-box:nth-child(5), .courier-row-2 .clone:nth-child(5) { background-color: #2e8b57; color: white; } 
.courier-row-2 .logo-box:nth-child(6), .courier-row-2 .clone:nth-child(6) { background-color: #191970; color: white; } 
.courier-row-2 .logo-box:nth-child(7), .courier-row-2 .clone:nth-child(7) { background-color: #008080; color: white; } 

/* Ensure the animations for this section use the same definitions */
.courier-row-1 { animation-name: scroll-ltr; }
.courier-row-2 { animation-name: scroll-rtl; }


/* ===================================== */
/* --- SECTION 9: Voices of Our Sellers (TESTIMONIALS) --- */
/* ===================================== */

.testimonial-section {
    background-color: var(--light-bg-color);
}

.testimonial-wrapper {
}

.testimonial-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 50px;
}

/* --- Seller Tabs/Navigation --- */
.seller-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    margin-bottom: 50px;
    border-bottom: 1px solid #ddd;
    overflow-x: auto; 
}

.seller-tab {
    background: none;
    border: none;
    font-size: 1.5rem;
    padding: 0 0 15px 0;
    cursor: pointer;
    color: #999; 
    font-weight: 500;
    transition: color 0.3s, border-bottom 0.3s;
    flex-shrink: 0;
    position: relative;
}

.seller-tab.active {
    color: #1a1a1a; 
    font-weight: 700;
}

.seller-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px; 
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #1a1a1a; 
}

/* --- Testimonial Content Area --- */
.testimonial-content-area {
    position: relative;
    min-height: 400px; 
}

.testimonial-card {
    display: none; 
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    gap: 50px;
    align-items: flex-start;
    position: absolute;
    top: 0;
    width: 100%;
}

.testimonial-card.active-testimonial {
    display: flex; 
    opacity: 1;
}

.testimonial-text {
    flex: 1;
    max-width: 45%;
    padding-top: 20px;
}

.testimonial-text p {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 20px;
}

.seller-info {
    font-weight: 700;
    color: #1a1a1a;
}

.testimonial-visual {
    flex: 1;
    height: 350px;
    /* background-color: #9b59b6;  */
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-size: 1.5rem;
    font-weight: 600;
    overflow: hidden;
}
.testimonial-img {
    /* Force the image to cover the entire container without distortion */
    width: 100%;
    height: 100%;
    object-fit: cover; /* This is the key: scales the image to cover the area */
    
    /* Ensure the image doesn't break the rounded corners of the parent div */
    border-radius: inherit; 
}

/* ===================================== */
/* --- Media Queries (General) --- */
/* ===================================== */

@media (max-width: 900px) {
    /* Global */
    .navbar-wrapper { flex-wrap: wrap; justify-content: center; text-align: center; }
    .nav-links { display: none; }
    .main-title { font-size: 2.5rem; padding-left: 0; }
    
    /* Hero */
    /* .hero-section { padding: 40px 0; }
    .slide { flex-direction: column; text-align: center; }
    .slide-content-left, .slide-content-right { max-width: 100%; padding: 0 20px; }
    .slide-content-left h1 { font-size: 2.5rem; }
    .image-area { min-height: 250px; }
    .ready-to-ship-card { top: 20px; left: auto; right: 10px; width: 180px; }
    .shipment-details-bar { bottom: 0; right: auto; left: 50%; transform: translateX(-50%); width: 90%; } */

    /* Section 2 */
    .cards-container { flex-direction: column; }

    /* Section 3 */
    .card-content, .card-visual { flex: 1 1 100%; }
    .product-card-content-wrapper { flex-direction: column; }
    .card-visual { order: -1; min-height: 250px; }
    
    /* Sections 4, 5, 8 */
    .integration-section { padding: 40px 0; }
    .dev-features { flex-direction: column; }
    .courier-header h2 { font-size: 2.2rem; }
    
    /* Section 6 (Slider) */
    .strengths-slider-wrapper { padding-left: 20px; }
    .strength-card { width: 280px; }
    
    /* Section 7 (Grid) */
    .benefit-section { padding: 50px 20px; }
    .benefit-header h2 { font-size: 2.2rem; }
    .benefit-cards-grid { grid-template-columns: 1fr; }
    
    /* Section 9 (Testimonials) */
    .testimonial-title { font-size: 2.5rem; }
    .testimonial-card { flex-direction: column; gap: 20px; position: relative; }
    .testimonial-text { max-width: 100%; padding-top: 0; }
    .testimonial-visual { order: -1; height: 250px; }
}


.success-stories-section {
    background-color: #000000; /* True black background */
    padding: 30px 0 50px 0;
}

.success-stories-wrapper {
    max-width: 1300px;
    margin: 0 auto;
}

.success-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: white;
    margin-bottom: 30px;
    padding-left: 40px;
}

.success-title strong {
    font-weight: 700;
}

/* Custom styling for these logo boxes (reusing scroll structure) */
.success-logos .logo-row {
    margin: 0;
}

.logo-box-dark {
    flex-shrink: 0;
    width: 200px; /* Wider box for brand names */
    height: 80px;
    margin-right: 20px;
    border: 1px solid #333; /* Subtle dark border */
    background-color: #000000;
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ===================================== */
/* --- SECTION 10: Discover Our Blogs (GRID) --- */
/* ===================================== */



.blog-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.blog-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 40px;
}

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

.blog-card {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 15px;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}

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

/* .blog-image-placeholder {
    height: 180px;
    background-color: #f7f7f7;
    border-radius: 8px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
     background-image: linear-gradient(135deg, #f0f0f5 0%, #ffffff 100%); 
    position: relative;
    overflow: hidden;
} */
 .blog-image-placeholder {
    
    height: 200px; /* You can adjust this height as per your design needs */
    width: 100%; /* Ensure it takes full width of its parent column */
    overflow: hidden;
    border-radius: inherit; /* If you want the image to inherit rounded corners from its parent card */
    margin-bottom: 1rem; 
}

.blog-image-cover {
    width: 100%; /* Make the image take 100% width of its parent .blog-image-placeholder */
    height: 100%; 
    object-fit: cover;  
   
}
.blog-card .blog-image-placeholder img {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.blog-image-text {
    font-size: 1.1rem;
    font-weight: 700;
    color: #555;
    text-align: center;
    padding: 20px;
    opacity: 0.7;
}

.blog-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #007bff;
    background-color: #e0f0ff;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.blog-post-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    flex-grow: 1; /* Pushes the link to the bottom */
    margin-bottom: 15px;
}

.blog-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: #9b59b6; 
    text-decoration: none;
    transition: color 0.3s;
}

.blog-link:hover {
    color: #7d3f98;
}

/* --- Media Queries for Blog Grid --- */
@media (max-width: 1100px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 600px) {
    .blog-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
    .blog-title {
        font-size: 2.5rem;
    }
}


/* --- NEW SLIDER STYLING --- */

/* The viewport wrapper. This keeps 3-4 cards visible at once. */
.blog-slider-viewport {
    /* Use a fixed width or just let it expand, but we need horizontal overflow. */
    width: 100%;
    overflow-x: scroll; /* KEY: Enables horizontal scrolling */
    overflow-y: hidden;
    padding-bottom: 20px; /* Space for the scrollbar on desktop */
    -webkit-overflow-scrolling: touch; /* Improves smooth scrolling on iOS */

    /* Optional: Hide scrollbar but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.blog-slider-viewport::-webkit-scrollbar {
    display: none;
}

/* The track where all cards sit side-by-side */
.blog-slider-track {
    display: flex; /* KEY: Arranges children horizontally */
    gap: 30px; /* Space between cards */
    /* Ensure the track is wide enough for all cards */
    width: fit-content; 
    min-width: 100%; /* Ensures it fills the space if content is short */
    padding-right: 30px; /* Space at the end */
}

/* Individual Slide Item (Replaces the col-lg-3 structure) */
.blog-slide-item {
    /* Fixed width for each card, matching the visual size in the image (approx 1/4 of a container) */
    width: 280px; 
    flex-shrink: 0; /* Ensures cards do not try to shrink in the flex container */
}



.blog-card {
    /* ... existing styles ... */
    height: 100%; /* Ensures the card fills the height of the slide item */
}

/* ... rest of your existing CSS ... */


.blog-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 40px;
}

/* @media queries for grid are now obsolete for this slider structure */

/* ===================================== */
/* --- SECTION 12: DOMESTIC SHIPPING --- */
/* ===================================== */
/* ===================================== */
/* --- SECTION 12: DOMESTIC SHIPPING (SLIDER) --- */
/* ===================================== */




.domestic-shipping-section {
    background-color: var(--light-bg-color);
}

.domestic-shipping-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background-image: linear-gradient(135deg, #a5b7ff 0%, #ffc0cb 100%); 
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.domestic-header h2 {
    font-size: 3rem;
}

.domestic-slider-wrapper {
    overflow: hidden; 
}

.domestic-slider-track {
    display: flex;
    width: max-content; 
    transition: transform 0.4s ease-in-out;
}

.service-card {
    flex-shrink: 0; 
    width: 270px; 
    height: 420px; 
    margin-right: 20px; /* Space between cards */
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.service-visual-area {
    height: 250px;
    background-color: #f5f5f5;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.service-visual-text {
    font-size: 0.9rem;
    color: #999;
    font-style: italic;
    text-align: center;
}

.service-title {
    font-size: 1.25rem;
    color: #1a1a1a;
}

.service-arrow-link {
    font-size: 1.5rem;
    color: #333;
    text-decoration: none;
}

.service-link {
    color: var(--button-primary); 
    font-weight: 500;
}

/* Media Queries to adjust card size */
@media (max-width: 1200px) {
    .service-card {
        width: 250px;
    }
}
@media (max-width: 768px) {
    .service-card {
        width: 300px; /* Make cards wider on mobile to take up more horizontal space */
    }
}








/* ===================================== */
/* --- FOOTER SECTION STYLES (Flexbox Column Fixes) --- */
/* ===================================== */

.main-footer {
    /* CRITICAL: CURVED TOP CORNERS */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden; 
    background-color: #000;
    
    color: #fff; 
    padding-top: 60px;
    padding-bottom: 30px;
    font-size: 0.95rem;
}

/* ---------------------------------------------------- */
/* CRITICAL: MANUAL FLEXBOX GRID FOR COLUMNS */
/* ---------------------------------------------------- */

.footer-columns-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
}

.footer-col {
    /* Define widths that ensure 4 columns on large screens */
    width: 23%; 
    min-width: 180px; 
    margin-bottom: 30px; /* Space between rows on stacked layouts */
    padding-right: 15px; /* Internal spacing between columns */
}

.footer-col-1 {
    width: 30%; /* Give the first column more space */
}

/* ---------------------------------------------------- */
/* HEADING AND LINK STYLING */
/* ---------------------------------------------------- */

.courierpe-footer-heading {
    color: white; 
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.courierpe-link-group li {
    margin-bottom: 0.5rem;
}

.courierpe-footer-link {
    color: #B0B0B0 !important; /* Forces link color */
    text-decoration: none;
    font-size: 0.9rem;
}

.courierpe-footer-link:hover {
    color: #fff !important; 
}

/* Contact Icons */
.courierpe-contact-info .courierpe-footer-icon {
    color: var(--dark-link-color); 
    width: 20px;
    min-width: 20px;
}

/* Social & Payment Icons (MUST BE DISPLAY:FLEX to be in a row) */
.courierpe-social-icons {
    list-style: none;
    padding-left: 0;
    /* Already has d-flex and gap-2 from HTML */
}

.courierpe-social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #333; 
    color: white;
    text-decoration: none; 
}

.payment-icons i {
    color: #999; 
}

/* Footer Bottom Bar */
.footer-bottom {
    background-color: #000;
}

.courierpe-social-icons li,
.payment-icons li {
    display: inline-flex !important; /* Forces horizontal alignment for icons */
    margin-right: 15px !important;  /* Ensures consistent spacing */
    vertical-align: middle;
}

/* ---------------------------------------------------- */
/* RESPONSIVENESS OVERRIDE FOR FLEXBOX COLUMNS */
/* ---------------------------------------------------- */

@media (max-width: 992px) {
    .footer-col, .footer-col-1 {
        width: 48%; /* 2 columns wide on tablets */
    }
}

@media (max-width: 576px) {
    .footer-col, .footer-col-1 {
        width: 100%; /* Full width on phones */
    }
}


/* --- CSS Variables for easy local editing (Optional, but safe without :root) --- */
.domestic-shipping-section {
    --color-0: #f0e6ff; /* Light purple (Card 1) */
    --color-1: #d3f3ee; /* Light teal/mint (Card 2) */
    --color-2: #ffe6d3; /* Light peach/orange (Card 3) */
    --color-3: #d1e2f9; /* Light sky blue (Card 4) */
    
    --card-height: 600px;
    --card-width: 1000px; /* Keeping the wide size you requested */
    --header-color: #2c3e50;
    --text-color: #333;
    --link-color: #7b68ee;
    --panel-bg: #f8f8f8;
}

/* --- SLIDER CONTAINER (The fixed viewing window and DYNAMIC BG) --- */
.domestic-slider-wrapper {
    /* Sizing to control the visible area (the window) */
    height: var(--card-height); 
    overflow: hidden; 
    
    /* 🛑 NEW: Border radius and shadow applied here to the compact element */
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); 
    
    background-color: var(--color-0); 
    transition: background-color 0.4s ease-in-out; 
    
    /* Ensure it centers if not using Bootstrap's mx-auto */
    margin-left: auto;
    margin-right: auto;
    
    cursor: pointer; 
}

/* --- CARD WRAPPER (The vertical track that moves) --- */
#cardWrapper {
    display: flex;
    flex-direction: column; 
    width: 100%;
    height: calc(4 * var(--card-height));
    transition: transform 0.4s ease-in-out;
    transform: translateY(0);
}

/* --- INDIVIDUAL SLIDING CARD STYLING --- */
.card-slide {
    min-height: var(--card-height); 
    width: 100%;
    flex-shrink: 0;
    background-color: transparent; /* Allows dynamic background color to show */
    padding: 50px; 
    box-sizing: border-box; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}

/* === Inner Content Panel Layout (Two side-by-side white panels) === */
.card-content-area {
    display: flex;
    justify-content: space-between; 
    gap: 40px; 
    width: 95%; 
    max-width: 950px;
}

.card-panel {
    flex: 1; 
    padding: 30px; 
    border-radius: 15px;
    background-color: white; /* Inner panels are white for contrast */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    min-height: 400px; 
}

/* Panel Header and Icons */
.panel-header { display: flex; align-items: center; margin-bottom: 15px; margin-top: 10px; }
.icon { font-size: 2em; margin-right: 15px; }
.panel-header h3 { margin: 0; font-size: 1.3em; color: #333; }
.card-panel p { font-size: 1em; color: #555; margin-top: 0; margin-bottom: 20px; }

/* Links */
.panel-link, .box-link { display: block; align-items: center; color: var(--link-color); text-decoration: none; font-weight: bold; font-size: 1em; margin-top: 5px; }
.panel-link:hover, .box-link:hover { text-decoration: underline; }


/* Inner Box (e.g., BEST RATES, COD) */
.panel-box { background-color: #f0f0f0; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; border: 1px solid #ddd; }
.box-title { margin: 0; font-weight: bold; color: var(--header-color); font-size: 0.9em; }
.box-img { max-width: 100%; height: 80px; margin-bottom: 10px; }
.box-link { display: block; text-align: left; padding: 8px 0; border-bottom: 1px solid #ddd; font-size: 0.9em; color: #444; }
.box-link:last-child { border-bottom: none; }



/* Custom Styles for Domestic Shipping Section (Tailwind Replacement) */
.domestic-shipping-section {
    /* You may need to adjust padding/margins based on your full site */
    padding-top: 3rem; /* pt-5 equivalent */
    padding-bottom: 3rem; /* py-12 is often larger, adjust as needed */
}

.courier-heading {
   color: #141413;
    font-size: 40px;
}

.courier-card-gradient {
    /* Inline style converted to class for reusability */
    background-image: linear-gradient(to right, #f9c54e, #d868a2, #9b59b6);
}

.feature-item-icon {
    color: #9b59b6; /* Custom icon color */
    font-size: 2.25rem; /* Explicit size for consistency */
}

/* Optional: Adding back the hover effect for the image */
.product-mockup {
    transition: transform 0.5s;
}

.product-mockup:hover {
    transform: scale(1.02); /* hover:scale-[1.02] equivalent */
}



      /* ========================================================== */
/* === NEW: STANDALONE HERO SLIDER CONTROLS (CSS) === */
/* ========================================================== */

/* Hide slick default black dots */
.slick-dots li button:before {
    font-size: 0 !important;
    color: transparent !important;
}

.slick-dots li {
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}


/* 1. Positioning the main controls wrapper */
.hero-control-wrapper {
    position: absolute !important;
    bottom: 40px !important; 
    left: 40px !important; 
    z-index: 9999 !important; 
    display: flex !important; 
    align-items: center !important;
    gap: 15px !important; 
}

/* 2. Styling the new custom arrow buttons */
.nav-prev-btn, 
.nav-next-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 19px !important;
    height: 19px !important;
    border-radius: 50% !important;
    background-color: white !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important; 
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* Base icon color */
.nav-prev-btn i, 
.nav-next-btn i {
    color: #333 !important; 
    font-size: 1.2rem !important;
    transition: color 0.3s ease !important;
}

/* 3. Styling the Indicator Line (The dashes) */
.hero-indicator-container {
    padding: 0 !important;
    margin: 0 !important;
}

.hero-indicator-container .slick-dots {
    display: flex !important; 
    align-items: center !important;
    list-style: none !important;
}

.hero-indicator-container .slick-dots li {
    width: 25px !important; 
    height: 4px !important; 
    margin: 0 4px !important;
    background-color: #ccc !important; 
    opacity: 0.5 !important;
}

.hero-indicator-container .slick-dots li.slick-active {
    background-color: var(--cta-btn-color) !important; 
    opacity: 1 !important;
}

/* 4. Color Change Logic (Based on new state classes) */
.hero-control-wrapper.state-1 .nav-prev-btn i,
.hero-control-wrapper.state-1 .nav-next-btn i {
    color: black !important;
}

.hero-control-wrapper.state-2 .nav-prev-btn i,
.hero-control-wrapper.state-2 .nav-next-btn i {
    color: black !important;
}

.hero-control-wrapper.state-3 .nav-prev-btn i,
.hero-control-wrapper.state-3 .nav-next-btn i {
    color: black !important;
}
/* Add more states as needed */