/* --- Header & Top Bar (Image se matched colors) --- */
.kf-top-bar {
    font-size: 14px;
    background-color: #ff6b35;
    color: #ffffff;
}

.kf-main-header__container {
    background: transparent;
    box-shadow: unset;
}

.kf-nav__link {
    transition: color 0.3s ease;
    color: #0b1c3d;
    /* Dark Blue links */
    position: relative;
    padding-bottom: 4px;
    /* Underline ke liye thodi space */
}

.kf-nav__link::before {
    content: "";
    position: absolute;
    bottom: -145%;
    left: 0;
    width: 0;
    background-color: #ff993f;
    height: 1px;
    transition: all 0.3s ease-in-out;
}

span.body-color img {
    width: 40px;
    object-fit: scale-down;
    height: 36px;
}

/* Hover aur Active dono par underline full ho jayegi */
.kf-nav__link:hover::before,
.kf-nav__link.active::before {
    width: 100%;
}

.kf-nav__link:hover {
    color: #ff993f !important;
}

.kf-nav__link.active {
    color: #ff993f !important;
}

/* --- Mobile Menu Responsive Styles --- */
@media (max-width: 991.98px) {
    .kf-nav {
        display: none;
        /* Default hidden on mobile */
        width: 100%;
        background: #ffffff;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        margin-top: 15px;
    }

    .kf-nav.mobile-menu-active {
        display: block !important;
        /* JavaScript se toggle hoga */
    }

    .kf-nav__list {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
}

/* --- Banner Section (Image exact match) --- */
.kf-hero-banner {
    /* Precise background position and bottom dark wave from image */
    background: no-repeat center bottom / cover;
    min-height: 90vh;
    /* Approximate full height */
    position: relative;
    padding-top: 100px;
    /* Header space */
    padding-bottom: 100px;
    /* Stats space */
}

/* Ensure content is strictly above the gradient layer */
.kf-hero-banner .container {
    z-index: 1;
}

/* --- Typography (Fonts & Colors) --- */

.kf-hero-title {
    color: #0b1c3d;
    letter-spacing: -1.8px;
    /* Slightly tighter like design */
    line-height: 1.05;
    /* Tighter line height like design */
    font-size: 4rem;
    /* Adjusted Display 4 size */
}

/* Text Secondary Color (Exact Orange) */
.text-secondary {
    color: #ff6b35 !important;
}

.kf-hero-text {
    max-width: 550px;
    /* Prevents text from stretching across the image */
    color: #0b1c3d;
}

/* --- Subheading Pill (Badge) --- */
.kf-badge-pill {
    backdrop-filter: blur(5px);
    border: 1px solid rgb(242 242 242 / 98%) !important;
    padding: 10px;
    background: #ffffff99 !important;
}

.gradient-text-orange {
    /* Left to Right Gradient (Orange -> Red/Coral) */
    background: linear-gradient(90deg, #ff993f 0%, #ff5a4e 100%);

    /* Text Clips for Gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Cross-browser display fix */
    display: inline-block;
}

.gradient-text-orange {
    /* Left to Right Gradient (Orange -> Red/Coral) */
    background: linear-gradient(90deg, #ff993f 0%, #ff5a4e 100%);

    /* Text Clips for Gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Cross-browser display fix */
    display: inline-block;
}

.kf-main-header.mt-3 {
    position: absolute;
    z-index: 11;
    width: 100%;
    border-bottom: 1px solid #9eb1be;
    padding-bottom: 10px;
}

.kf-btn-outline {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    color: #0b1c3d !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    font-weight: 600;
    padding: 12px 30px;
    transition: all 0.3s ease;
}

.kf-btn-outline:hover {
    background: #ffffff;
    transform: translateY(-2px);
}

/* --- Stats Card Styling (Glassmorphism like image) --- */
.kf-hero-stats {
    max-width: 900px;
    /* Keeps stats in a focused row */
}

.kf-stat-card {
    backdrop-filter: blur(15px);
    border: 1px solid #fff !important;
    /* Lighter border for blur */
    border-radius: 20px !important;
    padding: 20px 25px;
    /* Comfortable spacing */
    transition: all 0.3s ease;
}

.kf-stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.6) !important;
}

.kf-stat-card.one-wrapper-cart2 {
    background: #D4EEEA;
    background: -webkit-linear-gradient(188deg, rgba(212, 238, 234, 0.82) 0%, rgba(212, 231, 217, 0.69) 52%, rgba(208, 211, 190, 0.9) 82%);
    background: -moz-linear-gradient(188deg, rgba(212, 238, 234, 0.82) 0%, rgba(212, 231, 217, 0.69) 52%, rgba(208, 211, 190, 0.9) 82%);
    background: linear-gradient(188deg, rgba(212, 238, 234, 0.82) 0%, rgba(212, 231, 217, 0.69) 52%, rgba(208, 211, 190, 0.9) 82%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#D4EEEA", endColorstr="#D0D3BE", GradientType=0);
}

.kf-stat-card.one-wrapper-cart3 {
    background: #F5E2B6;
    background: -webkit-linear-gradient(188deg, rgba(245, 226, 182, 0.82) 0%, rgba(243, 218, 175, 0.69) 52%, rgba(214, 195, 180, 0.9) 82%);
    background: -moz-linear-gradient(188deg, rgba(245, 226, 182, 0.82) 0%, rgba(243, 218, 175, 0.69) 52%, rgba(214, 195, 180, 0.9) 82%);
    background: linear-gradient(188deg, rgba(245, 226, 182, 0.82) 0%, rgba(243, 218, 175, 0.69) 52%, rgba(214, 195, 180, 0.9) 82%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F5E2B6", endColorstr="#D6C3B4", GradientType=0);
}

.kf-stat-card small {
    color: #5a6872;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.kf-stat-card h3 {
    font-size: 2rem;
    color: #0b1c3d;
}

/* Decorative diamond shapes from image bottom left/right */
.kf-diamond {
    width: 25px;
    height: 25px;
    background: rgba(255, 107, 53, 0.6);
    transform: rotate(45deg);
    position: absolute;
    bottom: 50px;
}

.kf-diamond-left {
    left: 40px;
}

.kf-stat-card {
    backdrop-filter: blur(45px);
    border: 1px solid #fff;
    border-radius: 40px !important;
    padding: 20px 25px;
    transition: all 0.3s ease;
}



.kf-stat-card.one-wrapper-cart {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5AD3FF", endColorstr="#009BBE", GradientType=1);
    background: #B8D0D9;
    background: -webkit-linear-gradient(90deg, rgba(184, 208, 217, 0.82) 0%, rgba(184, 208, 217, 0.69) 52%, rgba(184, 208, 217, 0.9) 82%);
    background: -moz-linear-gradient(90deg, rgba(184, 208, 217, 0.82) 0%, rgba(184, 208, 217, 0.69) 52%, rgba(184, 208, 217, 0.9) 82%);
    background: linear-gradient(90deg, rgba(184, 208, 217, 0.82) 0%, rgba(184, 208, 217, 0.69) 52%, rgba(184, 208, 217, 0.9) 82%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#B8D0D9", endColorstr="#B8D0D9", GradientType=1);
}

.kf-stat-card.one-wrapper-cart1 {
    background: #F7D3B6;
    background: -webkit-linear-gradient(188deg, rgba(247, 211, 182, 0.82) 0%, rgba(243, 209, 182, 0.69) 52%, rgba(220, 194, 189, 0.9) 82%);
    background: -moz-linear-gradient(188deg, rgba(247, 211, 182, 0.82) 0%, rgba(243, 209, 182, 0.69) 52%, rgba(220, 194, 189, 0.9) 82%);
    background: linear-gradient(188deg, rgba(247, 211, 182, 0.82) 0%, rgba(243, 209, 182, 0.69) 52%, rgba(220, 194, 189, 0.9) 82%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F7D3B6", endColorstr="#DCC2BD", GradientType=0);
}

.kf-diamond-right {
    right: 40px;
    background: rgba(255, 107, 53, 0.9);
}

/* --- Helper Classes --- */
.op-8 {
    opacity: 0.85;
}

.fs-8 {
    font-size: 0.75rem;
}

/* --- Responsive adjustments --- */
@media (max-width: 991px) {
    .kf-hero-banner {
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 80px;
        background-position: center bottom;
    }

    .kf-hero-title {
        font-size: 2.8rem;
    }
}

/* ////////////////// */
/* ============================================================
   Wind Collections Section Custom Styles
   ============================================================ */

.wind-collections-sec {
    background-color: var(--body-color, #030812);
    position: relative;
}

/* Custom Spacing & Typography Utilities */
.tracking-widest {
    letter-spacing: 2px;
}

.tracking-wider {
    letter-spacing: 1px;
}

.fs-8 {
    font-size: 12px;
}

.fs-7 {
    font-size: 14px;
}

/* Base Card Styling */
.collection-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition:
        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        border-color 0.4s ease;
    background-color: #0b1322;
}

/* Background Image Adjustments */
.collection-card .card-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
    z-index: 1;
}

/* Dark Gradient Overlay for Readability */
.collection-card .card-overlay {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg,
            rgba(3, 8, 18, 0) 20%,
            rgba(3, 8, 18, 0.6) 60%,
            rgba(3, 8, 18, 0.95) 100%);
}

/* Card Min-Heights for Grid Alignment */

.min-h-200 {
    min-height: 208px;
}

.min-h-220 {
    min-height: 230px;
}

/* Arrow Icon Button */
.explore-btn .arrow-icon {
    width: 26px;
    height: 26px;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.explore-btn .arrow-icon i {
    transition: transform 0.3s ease;
}

/* Hover Effects */
.collection-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.3);
}

.collection-card:hover .card-bg-img {
    transform: scale(1.05);
}

.collection-card:hover .explore-btn .arrow-icon {
    background-color: var(--secondary-color, #ff5e3a) !important;
    color: #ffffff !important;
}

.collection-card:hover .explore-btn .arrow-icon i {
    transform: translateX(2px);
}

/* Responsive Overrides */
@media (max-width: 991px) {
    .feature-card {
        min-height: 350px;
    }
}

@media (max-width: 575px) {
    .collection-card {
        min-height: 260px;
    }
}

/* ///////////////// */

/* The Wind Experience Section Styles */


.wind-experience-sec {
    background-color: var(--body-color, #030812);
}

/* Image Container */

.experience-img-wrapper img {
    border-radius: 32px;
}

/* Cyan Text Color Accent */
.text-cyan {
    color: var(--extra-color-14, #22d3ee);
}

/* Feature Cards (Dark Pill Container) */
.feature-card {
    background-color: rgba(13, 23, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease;
    border-radius: 20px;
}

.collection-card {
    border-radius: 27px;
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 211, 238, 0.4);
    background-color: rgba(18, 32, 53, 0.9);
}

/* Cyan Icon Circle Badges */
.feature-card .icon-badge {
    width: 38px;
    height: 38px;
    background-color: var(--extra-color-14, #22d3ee);
    color: #030812;
    font-size: 15px;
    transition: transform 0.3s ease;
}

.feature-card:hover .icon-badge {
    transform: scale(1.08);
}

/* Responsive Helper Adjustments */
@media (max-width: 991px) {
    .experience-img-wrapper {
        aspect-ratio: 4 / 3;
    }
}

/* ///////////////////// */
/* ============================================================
   Community Stats Banner Styling
   ============================================================ */

.community-stats-sec {
    background: no-repeat center center;
    background-size: cover;
    min-height: 480px;
    display: flex;
    align-items: center;
    position: relative;
}

/* Bright Cyan/Teal Gradient Overlay */
.community-stats-sec .stats-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #fffffff2 0%, #0dcaf08c 100%);
    z-index: 1;
    mix-blend-mode: multiply;
}

/* Fallback/Layering for vivid cyan color */
.community-stats-sec::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #22d3eeb0 0%, #f8f9fa7a 100%);
    background-color: #22d3ee6e;
    z-index: 1;
}

/* Z-Index for Text Content */
.z-2 {
    z-index: 2;
}

/* Glassmorphism Cards */
.stat-glass-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.3s ease;
    border-radius: 30px;
}

.stat-glass-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Font Adjustments */
.stat-number {
    letter-spacing: -1px;
}

.tracking-widest {
    letter-spacing: 2px;
}

.tracking-wider {
    letter-spacing: 1.2px;
}

.fs-8 {
    font-size: 11px;
}

/* ///////////////// */
/* ============================================================
   Featured Product Section & Inner Line Slider
   ============================================================ */

.featured-products-sec {
    background-color: var(--body-color, #030812);
}

.text-cyan {
    color: #22d3ee;
}

/* Product Card Styling */
.product-card {
    background-color: rgba(13, 23, 38, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Image Container & Images */
.card-img-slider-wrap {
    background-color: #0d1b2a;
    aspect-ratio: 1 / 1;
}

.card-slide-img {
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
}

/* Discount Badge */
.discount-badge {
    background-color: #22d3ee;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Cart Button */
.cart-btn {
    width: 42px;
    height: 42px;
    background-color: #22d3ee;
    transition:
        transform 0.3s ease,
        background-color 0.3s ease;
}

.cart-btn:hover {
    background-color: #1aadc4;
    transform: scale(1.08);
}

a.btn.wrapper-cartbest {
    background: #fff;
    color: #000;
    border: 1px solid #6c757d;
}

/* ============================================================
   CUSTOM SLICK SLIDER LINES (DOTS TO LINES CONVERSION)
   ============================================================ */

/* Slick Dots Container position over image bottom */
.inner-card-slider .slick-dots {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    margin: 0;
    list-style: none;
    z-index: 5;
}

/* Reset original dot styling */
.inner-card-slider .slick-dots li {
    margin: 0;
    padding: 0;
    flex: 1;
    /* Lines take equal distribution */
    max-width: 40px;
    /* Line width constraint */
    height: 4px;
    /* Line thickness */
}

/* Convert Dots into Horizontal Lines */
.inner-card-slider .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 100%;
    height: 4px;
    padding: 0;
    cursor: pointer;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.35);
    /* Inactive line color */
    border-radius: 4px;
    transition: all 0.3s ease;
}

.inner-card-slider .slick-dots li button:before {
    display: none;
    /* Removes default Slick round dot font character */
}

/* Active Line Styling */
.inner-card-slider .slick-dots li.slick-active button {
    background: #ff7a59;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* //////////////// */
/* ============================================================
   GSAP Custom Half-Cut Slider Styling (Optimized)
   ============================================================ */

.wild-kites-sec {
    background-color: #00193e;
}

.text-cyan {
    color: #22d3ee;
}

/* Outer Container Allows Half Cut Right Slide Visibility */
.gsap-slider-container {
    width: 100%;
    overflow: visible;
    cursor: grab;
    touch-action: pan-y;
    /* Mobile scroll smoothness ke liye */
}

.gsap-slider-container:active {
    cursor: grabbing;
}

/* Track holding slides with hardware acceleration */
.gsap-slider-track {
    display: flex;
    gap: 24px;
    will-change: transform;
    transform: translateZ(0);
    /* Jark khatam karne ke liye */
}

/* Individual Slide Width Configuration for Half Cut View */
.wild-slide-item {
    width: 78%;
    height: 460px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    user-select: none;
    border-radius: 30px;
    flex-shrink: 0;
    backface-visibility: hidden;
    /* Rendering flicker roknay ke liye */
}

.wild-slide-item .slide-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    pointer-events: none;
}

.wild-slide-item .slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg,
            rgb(3 8 18 / 43%) 30%,
            #212529a1 70%,
            #00193fd1 100%);
}

/* Progress Line Styling at Bottom */
.slider-progress-bar {
    height: 2px;
    background-color: rgba(255, 255, 255, 0.15);
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 16.66%;
    background: linear-gradient(90deg, #22d3ee 0%, #ff5e3a 100%);
    transition: width 0.3s ease;
}

/* Navigation Arrow Buttons */
.nav-btn {
    width: 42px;
    height: 42px;
    background-color: rgba(255, 255, 255, 0.08);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.nav-btn:hover {
    background-color: #22d3ee;
    color: #030812 !important;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .wild-slide-item {
        width: 85%;
        height: 380px;
    }
}

@media (max-width: 575px) {
    .wild-slide-item {
        width: 90%;
        height: 320px;
    }
}

/* ////////////////////////////////////////// */
/* ============================================================
   Bundle Builder Section & 3-Point Ambient Glow Effects
   ============================================================ */

.bundle-builder-sec {
    background-color: var(--body-color, #030812);
}

/* Outer Main Card Container */
.bundle-card-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    background: #0f194c;
    background: linear-gradient(168deg,
            rgba(15, 25, 76, 1) 0%,
            #212529 50%,
            #030812 100%);
    border-radius: 30px;
}

/* Arc Decoration SVG */
.bg-arc-line {
    top: -50px;
    left: 10%;
    width: 450px;
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   3 AMBIENT GLOW SPHERES (CUSTOM BLUR BLOBS)
   ============================================================ */

.glow-spot {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.65;
}

/* 1. Bottom Left Cyan Glow */
.glow-cyan-left {
    bottom: -100px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: #00bcd4;
}

/* 2. Top Right Orange/Peach Glow */
.glow-orange-top-right {
    top: -80px;
    right: -60px;
    width: 340px;
    height: 340px;
    background: #ff7043;
}

/* 3. Bottom Right Magenta/Purple Glow */
.glow-purple-bottom-right {
    bottom: -100px;
    right: -80px;
    width: 520px;
    height: 450px;
    background: #570069b8;
}

/* Tag Badge */
.tag-badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.text-cyan {
    color: #22d3ee;
}

.fs-9 {
    font-size: 10px;
}

/* Filter Pill Buttons */
.filter-pill-btn {
    border-radius: 50px;
    padding: 6px 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ffffff;
    border: none;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.filter-pill-btn:hover {
    transform: translateY(-2px);
    color: #ffffff;
}

.pill-sport {
    background: linear-gradient(90deg, #ff7a59 0%, #ff5252 100%);
    box-shadow: 0 4px 15px rgba(255, 82, 82, 0.3);
}

.pill-delta {
    background: linear-gradient(90deg, #00bcd4 0%, #00acc1 100%);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}

.pill-foil {
    background: linear-gradient(90deg, #ffb300 0%, #f57c00 100%);
    box-shadow: 0 4px 15px rgba(245, 124, 0, 0.3);
}

/* ============================================================
   RIGHT PANEL & GLASSMorphism ITEM LIST
   ============================================================ */

.bundle-glass-panel {
    background: #202f4aa3;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 15px 35px rgb(0 0 0 / 38%);
    backdrop-filter: blur(1px);
    border-radius: 20px;
}

/* Selected Item Styling (Glowing Border & Bright Fill) */
.bundle-item.item-selected {
    background: #f8f9fa4a;
    border: 1px solid rgba(34, 211, 238, 0.4);
    box-shadow: 0 0 55px #22d3ee5e;
    border-radius: 20px;
}

/* Unselected Item Styling */
.bundle-item.item-unselected {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
}

/* Item Icons */
.item-check-icon {
    width: 35px;
    height: 35px;
    background-color: #ff8a3d;
    color: #ffffff;
    background: linear-gradient(90deg,
            rgba(255, 153, 63, 1) 0%,
            rgba(255, 137, 52, 1) 36%,
            rgba(254, 113, 44, 1) 71%,
            rgba(247, 92, 75, 1) 100%);
}

.item-plus-icon {
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Orange Gradient Price */
.bundle-glass-panel .text-gradient-orange {
    background: linear-gradient(90deg, #ff7a59 0%, #ff5e3a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg, #ff993f 0%, #ff5a4e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.position-absolute.kite-right-wraaa {
    width: 50%;
    left: -13px;
    top: -150px;
    z-index: 11;
}

/* ////////////////////////////////// */
/* ============================================================
   Why Choose Us Section Styles
   ============================================================ */

.why-sky-sec {
    background-color: var(--body-color, #030812);
}

/* Top Ambient Lighting Glow */
.sky-top-glow {
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 45%;
    background: #1b4760;
    filter: blur(19px);
    pointer-events: none;
    z-index: 1;
}

.text-cyan-light {
    color: #38bdf8;
}

.z-2 {
    z-index: 2;
}

/* Glassmorphism Feature Cards */
.why-feature-card {
    background: rgba(22, 33, 52, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    min-height: 200px;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
    border-radius: 30px;
}

.why-feature-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(28, 42, 65, 0.6);
}

/* Active Highlighted Card Styling */
.why-feature-card.why-card-active {
    background: linear-gradient(135deg,
            #22d3ee75 0%,
            rgb(22 33 52) 50%,
            rgb(80 45 40 / 52%) 100%);
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.3),
        inset 0 0 20px rgba(255, 120, 70, 0.15);
}

.why-feature-card.why-card-active:hover {
    border-color: rgba(56, 189, 248, 0.7);
}

/* Badge Circle Styling */
.card-icon-badge {
    width: 38px;
    height: 38px;
}

.bg-cyan {
    background-color: #22d3ee;
}

.bg-orange {
    background: linear-gradient(135deg, #ff7a59 0%, #ff5e3a 100%);
    box-shadow: 0 4px 12px rgba(255, 94, 58, 0.3);
    background: linear-gradient(90deg,
            rgba(255, 153, 63, 1) 0%,
            rgba(255, 137, 52, 1) 36%,
            rgba(254, 113, 44, 1) 71%,
            rgba(247, 92, 75, 1) 100%);
}

.bg-orange i {
    color: #fff !important;
}

/* Font Adjustments */
.tracking-widest {
    letter-spacing: 2px;
}

.fs-8 {
    font-size: 11px;
}

.fs-7 {
    font-size: 13.5px;
}

/* ////////////////////////// */
/* ============================================================
   Sky Community Section & Background Image Setup
   ============================================================ */

.sky-community-sec {
    background-color: #030812;
    min-height: 650px;
}

.position-absolute-kite-wraaa {
    position: absolute;
    right: -520px;
    bottom: -90px;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Background Image & Overlay Layers */
.sky-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.7) contrast(1.1);
}

.sky-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #00193e9c;
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

/* Text & Typography Styling */
.community-tag {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
}

.text-cyan {
    color: #22d3ee;
}

.text-gradient-orange {
    background: linear-gradient(90deg, #ff7a59 0%, #ff5252 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.max-w-500 {
    max-width: 500px;
}

.fs-8 {
    font-size: 11px;
}

.fs-9 {
    font-size: 9.5px;
}

/* CTA Buttons */
.btn-orange-gradient {
    background: linear-gradient(90deg, #ff7a59 0%, #ff5252 100%);
    color: #ffffff;
    border: none;
    box-shadow: 0 8px 20px rgba(255, 82, 82, 0.35);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.btn-orange-gradient:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(255, 82, 82, 0.5);
}

.btn-glass-map {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.btn-glass-map:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Glassmorphic Stats Cards */
.stat-glass-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.3s ease;
    height: 100%;
}

.stat-glass-card:hover {
    border-color: rgba(34, 211, 238, 0.4);
}

/* ============================================================
   RIGHT SIDE KITES & FLOATING ANIMATIONS
   ============================================================ */

.right-kites-wrapper {
    height: 480px;
    width: 100%;
}

.kite-strings-svg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Individual Kites Placement */
.floating-kite {
    z-index: 2;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
    transition: transform 0.5s ease;
}

/* 1. Red Kite */
.kite-red {
    top: -10px;
    left: -20px;
    width: 150px;
    animation: floatKiteLeft 4s ease-in-out infinite alternate;
}

.position-absolute-kite-wraaa {
    position: absolute;
    right: -190px;
    bottom: -160px;
    width: 150%;
    height: 140%;
    object-fit: contain;
}

/* 2. Yellow Kite */
.kite-yellow {
    top: 20px;
    left: 170px;
    width: 160px;
    animation: floatKiteCenter 5s ease-in-out infinite alternate;
}

/* 3. Teal Kite */
.kite-teal {
    top: 100px;
    right: 20px;
    width: 155px;
    animation: floatKiteRight 4.5s ease-in-out infinite alternate;
}

/* Keyframe Animations for Floating Effect */
@keyframes floatKiteLeft {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    100% {
        transform: translateY(-15px) rotate(-3deg);
    }
}

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

    100% {
        transform: translateY(-20px) rotate(4deg);
    }
}

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

    100% {
        transform: translateY(-18px) rotate(-4deg);
    }
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .right-kites-wrapper {
        height: 380px;
    }

    .kite-red {
        width: 120px;
        top: 140px;
    }

    .kite-yellow {
        width: 130px;
        left: 130px;
    }

    .kite-teal {
        width: 125px;
    }
}

/* ============================================================
   Adventure Timeline Custom Styling
   ============================================================ */

.timeline-sec {
    background-color: var(--body-color, #030812);
}

.text-cyan {
    color: #22d3ee;
}

.fs-8 {
    font-size: 11px;
}

/* 5 Column Grid setup for desktop */
@media (min-width: 768px) {
    .col-md-2-4 {
        flex: 0 0 auto;
        width: 20%;
    }
}

/* Timeline Track Line */
.timeline-wrapper {
    width: 100%;
}

.timeline-line-bg {
    top: 52px;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 1;
    background: #5ad3ff;
    background: linear-gradient(90deg,
            rgba(90, 211, 255, 1) 0%,
            rgba(0, 155, 190, 0.88) 50%,
            rgba(255, 117, 39, 1) 100%);
    opacity: 0.3;
}

.timeline-line-progress {
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    /* GSAP se animate hogi */
    background: linear-gradient(90deg, #22d3ee 0%, #38bdf8 50%, #ff7a59 100%);
}

/* Node Icon Box (Squircle Shape) */
.node-icon-box {
    width: 72px;
    height: 72px;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.node-icon-box:hover {
    transform: translateY(-5px);
}

/* Top-Right Small Circle Badge Badge */
.node-badge-dot {
    top: -6px;
    right: -8px;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.node-icon-box img.img-fluid {
    width: 27px;
    height: 27px;
    object-fit: scale-down;
}

.node-icon-box:hover .node-badge-dot {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    background: linear-gradient(90deg, #ff993f 0%, #ff5a4e 100%);
}

.z-2 {
    z-index: 2;
}

/* //////////////////// */
/* ============================================================
   Windsocks & Wind Art Section Custom Styles
   ============================================================ */
/* Unique CSS for Frame and Image Scrolling */
.js-wind-img-frame {
    height: 480px;
    /* Frame height apne design ke hisaab se adjust karein */
}

.js-gsap-wind-autoscroll {
    height: 130% !important;
    /* Image ko vertical scroll room dene ke liye extra height */
    max-width: none;
    will-change: transform;
}

.wind-art-sec {
    background-color: #00193e;
}

.text-cyan {
    color: #22d3ee;
}

.text-gradient-orange111 {
    background: #ff7527;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.max-w-480 {
    max-width: 480px;
}

.fs-8 {
    font-size: 11px;
}

.py-2-5 {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* Button Custom Styles */
.btn-cyan-pill {
    background: #00acc1 !important;
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}

.btn-cyan-pill:hover {
    background-color: #22d3ee;
    color: #030812;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(34, 211, 238, 0.3);
}

.btn-white-pill {
    background: #ffffff !important;
    border: none;
    transition: all 0.3s ease;
}

.btn-white-pill:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}

/* Right Side Image & Floating Badge */
.wind-art-img-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px #22d3ee2b;
}

.wind-art-img-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px #22d3ee2b;
    border-radius: 20px;
}

.wind-art-img-wrapper img {
    border-radius: 20px;
}

.wind-floating-badge {
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    background-color: #ffffff;
    z-index: 2;
    transition: transform 0.3s ease;
}

.wind-art-img-wrapper:hover .wind-floating-badge {
    transform: scale(1.1) rotate(15deg);
}

/* Mobile responsive view adjustment */
@media (max-width: 767px) {
    .timeline-line-bg {
        display: none;
        /* Hide line on small mobile screens */
    }
}

/* ////////////////////////////////////////////////////////////// */
/* ============================================================
   Testimonial Flyer Stories Section Styling
   ============================================================ */

.flyer-stories-sec {
    background-color: var(--body-color, #030812);
}

.text-cyan {
    color: #22d3ee;
}

.text-orange {
    color: #ff6b35;
}

.max-w-450 {
    max-width: 450px;
}

.fs-8 {
    font-size: 11px;
}

/* Dual Art Cards Layout */
.art-card {
    width: 270px;
    height: 540px;
    transition: transform 0.4s ease;
}

/* Left Card Offset Down, Right Card Offset Up */
.art-card-left {
    transform: translateY(20px);
}

.art-card-right {
    transform: translateY(-49px);
}

.art-card:hover {
    transform: translateY(0);
}

/* Avatar & Icons */
.user-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
}

.quote-icon {
    line-height: 1;
    opacity: 0.9;
}

/* Carousel Indicators Styling */
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    margin-right: 8px;
}

.carousel-indicators .active {
    background-color: #22d3ee;
    width: 24px;
    border-radius: 10px;
}

/* Bottom White Satisfaction Pill Badge */
.quote-icon .stat-satisfaction-pill {
    background-color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 40px;
}

.stat-satisfaction-pill {
    border-radius: 40px;
}

i.fa-solid.fa-quote-right {
    background: linear-gradient(90deg, #ff993f 0%, #ff5a4e 100%);
    background: linear-gradient(90deg, #ff993f 0%, #ff5a4e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.stat-value {
    color: #030812;
    letter-spacing: -0.5px;
}

/* Avatar Group Overlap Stack */
.avatar-group {
    position: relative;
}

.stack-avatar {
    width: 38px;
    height: 38px;
    border: 2px solid #ffffff;
    object-fit: cover;
    margin-left: -12px;
}

.stack-avatar:first-child {
    margin-left: 0;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .art-card {
        width: 160px;
        height: 320px;
    }
}

/* ///////////////////////////././././././ */
/* ============================================================
   Community Gallery Custom Styles
   ============================================================ */

.community-gallery-sec {
    background-color: var(--body-color, #030812);
}

.text-cyan {
    color: #22d3ee;
}

.fs-8 {
    font-size: 11px;
}

/* CSS Grid for Asymmetric Layout */
.community-grid-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    grid-template-rows: repeat(2, 210px);
    gap: 20px;
}

/* Grid Areas Mapping */
.item-tall-left {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.item-mid-1 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.item-mid-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.item-mid-3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.item-mid-4 {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

.item-tall-right {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
}

/* Common Gallery Items */
.gallery-item {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #0e1726;
    cursor: pointer;
    border-radius: 20px;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Hover Effects */
.gallery-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
            rgba(34, 211, 238, 0.2) 0%,
            rgba(3, 8, 18, 0.4) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.gallery-item:hover .gallery-img {
    transform: scale(1.06);
}

.gallery-item:hover .gallery-hover-overlay {
    opacity: 1;
}

/* Responsive Grid Adjustments */
@media (max-width: 991px) {
    .community-grid-container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .item-tall-left,
    .item-tall-right {
        grid-column: span 1;
        grid-row: span 1;
        height: 250px;
    }

    .item-mid-1,
    .item-mid-2,
    .item-mid-3,
    .item-mid-4 {
        grid-column: span 1;
        grid-row: span 1;
        height: 200px;
    }
}

@media (max-width: 575px) {
    .community-grid-container {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .item-tall-left,
    .item-tall-right,
    .item-mid-1,
    .item-mid-2,
    .item-mid-3,
    .item-mid-4 {
        grid-column: span 1;
        height: 240px;
    }
}

/* /////////./././//../././././././././././././././././././/. */
/* ============================================================
   Learning Hub Custom Styles
   ============================================================ */

.learning-hub-sec {
    background-color: #00193e;
}

.text-cyan {
    color: #22d3ee;
}

.fs-8 {
    font-size: 12px;
}

.fs-9 {
    font-size: 10px;
    letter-spacing: 1px;
}

/* Glassmorphic Card Box */
.hub-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hub-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(34, 211, 238, 0.3);
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* Icon Box */
.hub-icon-box {
    width: 44px;
    height: 44px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.hub-card:hover .hub-icon-box {
    transform: scale(1.1);
}

/* Link Arrow Animation */
.link-arrow {
    transition: transform 0.3s ease;
}

.hub-card:hover .link-arrow {
    transform: translateX(5px);
    color: #22d3ee;
}

.hub-link:hover {
    color: #22d3ee !important;
}

/* ]]]]]]]]]]]]]]]]]]]]]]]]]] */
/* ============================================================
   Newsletter Banner Custom Styles
   ============================================================ */

.newsletter-banner-sec {
    background-color: var(--body-color, #030812);
}

.text-navy {
    color: #0b192c;
}

.text-navy-muted {
    color: #334155;
}

.max-w-650 {
    max-width: 650px;
}

.max-w-550 {
    max-width: 550px;
}

.max-w-500 {
    max-width: 500px;
}

.py-2-5 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Outer Banner Card with Custom Background Image */
.newsletter-card {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 32px !important;
}

/* Soft Radial/Gradient Light Overlay */
.card-bg-overlay {
    background: radial-gradient(circle,
            rgb(224 242 254 / 60%) 0%,
            rgb(186 230 253 / 48%) 100%);
    backdrop-filter: blur(2px);
}

/* Slider text to stay centered and non-overflowing */
.kf-top-bar__slider {
    max-width: 450px;
    overflow: hidden;
}

/* Fade animation for smooth text change */
.kf-top-bar__slider .carousel-item {
    transition: opacity 0.5s ease-in-out;
}

.kf-top-bar__slider .carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
}

.kf-top-bar__slider .carousel-fade .carousel-item.active {
    opacity: 1;
}

.cta-banner-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    min-height: 500px;
}

.cta-banner-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Black tint overlay */
}

/* Button styling */
.cta-btn {
    border-radius: 30px;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Mail Icon */
.mail-icon-box {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-classlinkmenu li a {
    color: #fff ! important;
}

/* Form Controls */
.newsletter-form .form-control {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #0b192c;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.newsletter-form .form-control:focus {
    background-color: #ffffff;
    border-color: #22d3ee;
    box-shadow: 0 0 0 0.25rem rgba(34, 211, 238, 0.25);
    color: #0b192c;
}

.newsletter-form .form-control::placeholder {
    color: #94a3b8;
}

/* Navy Subscribe Button */
.btn-navy-pill {
    background-color: #0b192c;
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 15px rgba(11, 25, 44, 0.3);
    transition: all 0.3s ease;
}

.btn-navy-pill:hover {
    background-color: #1e293b;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 25, 44, 0.4);
}

@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }
}

/* foter */
/* ============================================================
   Kiteflyershop Footer Custom Styling
   ============================================================ */

.site-footer {
    background-color: #00193e;
    font-family: inherit;
}

.text-orange {
    color: #ff6b35;
}

.fs-8 {
    font-size: 12px;
}

.max-w-280 {
    max-width: 280px;
}

/* Brand Logo Styling */
.logo-icon-badge {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #ff7a59 0%, #ff5e3a 100%);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.social-icon-link {
    transition: all 0.3s ease;
}

.social-icon-link:hover {
    color: #22d3ee !important;
    transform: translateY(-2px);
}

/* Footer Navigation Links */
.footer-heading {
    letter-spacing: 0.3px;
}

.footer-nav-list li a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-nav-list li a:hover {
    color: #22d3ee;
}

/* Bright Cyan Subscribe Card */
.subscribe-cyan-card {
    background-color: #00a8e8;
    box-shadow: 0 12px 30px rgba(0, 168, 232, 0.25);
    border-radius: 20px;
}

.subscribe-input {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
}

.subscribe-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.subscribe-input:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
}

.btn-white-submit {
    background: #ffffff !important;
    border: none;
    min-width: 100px;
    transition: all 0.3s ease;
}

.btn-white-submit:hover {
    background-color: #f1f5f9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Bottom Bar */
.footer-bottom-bar {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* banner */
/* ==========================================
   Custom Inner Banner CSS
   ========================================== */
.custom-inner-banner {
    background:
        linear-gradient(rgba(0, 0, 0, 0.6), #00193e),
        url(../img/banner-kite.png) no-repeat center center;
    background-size: cover;
    min-height: 390px;
    padding: 100px 0 0;
}

.custom-inner-banner .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5);
}

/* ==========================================
   Custom About Us Section CSS
   ========================================== */
.custom-about-section {
    background-color: #fcfdfe;
    position: relative;
    overflow: hidden;
}

.custom-about-img-box {
    position: relative;
}

.custom-main-img-1,
.custom-main-img-2 {
    width: 100%;
    height: 340px;
    object-fit: cover;
}

li.breadcrumb-item a {
    background: linear-gradient(90deg, #ff993f 0%, #ff5a4e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.breadcrumb-item.active {
    color: #ffc568 !important;
}

.custom-inner-banner h1 {
    font-family: var(--secondary-medium-font);
    font-weight: 500;
}

/* Floating Experience Card */
.custom-experience-card {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bs-primary, #0d6efd);
    min-width: 170px;
    border: 4px solid #ffffff;
}

/* Typography Helpers */
.tracking-wide {
    letter-spacing: 1px;
}

.tracking-wider {
    letter-spacing: 2px;
}

.custom-section-tag {
    font-size: 0.85rem;
}

/* Button Hover Effect */
.custom-hover-btn {
    transition: all 0.3s ease-in-out;
}

.custom-hover-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3) !important;
}

/* Responsive Styles */
@media (max-width: 991.98px) {
    .custom-experience-card {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        margin-top: 20px;
        display: inline-block;
    }
}


/* Success and Error Toast Start*/
.success-toast {
    position: fixed;
    top: 20px;
    right: 0px;
    background: #28a745;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.success-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.error-toast {
    position: fixed;
    top: 20px;
    right: 0px;
    background: #dc3545;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.error-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-icon {
    font-size: 20px;
}

.toast-message {
    font-weight: 500;
    font-size: 15px;
}

/* Success and Error Toast End*/


/* ck editor style start */
.static_des img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}

.static_des figure {
    max-width: 100% !important;
    margin: 20px 0 !important;
    overflow: hidden !important;
}

.static_des figure img {
    width: 100% !important;
    max-width: 100% !important;
}

.static_des p {
    font-size: 14px !important;
    font-family: var(--primary-regular-font) !important;
    color: #f8f9fa !important;
}

.static_des h1 {
    color: #ff7a00 !important;
    font-family: var(--secondary-semibold-font) !important;
    opacity: 1 !important;
    transform: translateX(0px) translateZ(0px) scaleX(1) !important;
    font-size: 36px !important;
}

.static_des h2,
.static_des h3 {
    color: #ffffff !important;
    font-family: var(--secondary-semibold-font) !important;
    opacity: 1 !important;
    transform: translateX(0px) translateZ(0px) scaleX(1) !important;
    font-size: 26px !important;
}

.static_des li {
    font-family: var(--primary-light-font) !important;
    font-size: 14px !important;
    padding-left: 10px !important;
    margin-bottom: 10px !important;
    color: #f8f9fa !important;
}

.static_des li::marker {
    font-family: var(--primary-bold-font) !important;
    font-weight: 700 !important;
    color: var(--secondary-color) !important;
}

/* ck editor style end */


/* Custom Pagination Styling start */
.custom-pagination .page-link {
    background-color: #0d1b2a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a0abbb;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    margin: 0 4px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.custom-pagination .page-item.active .page-link {
    background: linear-gradient(90deg, #ff7a00 0%, #ff4500 100%);
    border-color: transparent;
    color: #fff;
}

.custom-pagination .page-link:hover {
    background-color: #00bcd4;
    border-color: #00bcd4;
    color: #000;
}

.custom-pagination .page-item.disabled .page-link {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.2);
}

/* Custom Pagination Styling end */




/* Blog Section Main Base */
.blog-listing-section {
    background-color: #050b14;
    color: #fff;
    padding: 80px 0;
}

/* Blog Badges & Meta */
.blog-badge {
    background: linear-gradient(90deg, #ff7a00 0%, #ff4500 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 6px;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 0.5px;
}

.blog-meta {
    font-size: 13px;
    color: #a0abbb;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.blog-meta i {
    color: #00bcd4;
}

/* Standard Blog Card */
.blog-card {
    background-color: #0d1b2a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 188, 212, 0.4);
}

.blog-card-img-wrap {
    height: 220px;
    position: relative;
    overflow: hidden;
}

.blog-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-img-wrap img {
    transform: scale(1.08);
}

.blog-card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    transition: color 0.3s ease;
}

.blog-card:hover .blog-card-title {
    color: #00bcd4;
}

.blog-excerpt {
    color: #a0abbb;
    font-size: 13px;
    line-height: 1.6;
}

.read-more-btn {
    color: #00bcd4;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s ease;
}

.read-more-btn:hover {
    color: #ff7a00;
    gap: 10px;
}

/* Filter Bar & Search Styling */
.blog-filter-bar {
    background-color: #0d1b2a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 15px 20px;
}

.filter-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a0abbb;
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background-color: #00bcd4;
    color: #000;
    border-color: #00bcd4;
    font-weight: 700;
}

.blog-search-input {
    background-color: #050b14;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 25px;
    padding: 8px 18px;
    font-size: 13px;
}

.blog-search-input:focus {
    background-color: #050b14;
    border-color: #00bcd4;
    color: #fff;
    box-shadow: none;
}


.wind-art-img-wrapper {
    aspect-ratio: 4 / 3;
}

.wind-slider,
.wind-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.wind-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease;
}

.wind-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.wind-slider-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #00bcd4, #ff7a2f);
    width: 0%;
    z-index: 3;
}

.wind-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(5, 11, 20, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    transition: background 0.3s ease;
}

.wind-slider-arrow:hover {
    background: rgba(0, 188, 212, 0.85);
}

.wind-slider-prev {
    left: 14px;
}

.wind-slider-next {
    right: 14px;
}

.wind-slider-dots {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    z-index: 3;
}

.wind-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
}

.wind-slider-dot.active {
    background: #00bcd4;
    width: 22px;
    border-radius: 5px;
}


.custom-product-slider {
    position: relative;
}

.custom-product-slider>div.slide-item {
    display: none;
}

.custom-product-slider>div.slide-item.active-slide {
    display: block;
}

.custom-slider-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.custom-slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.2s ease;
}

.custom-slider-dot.active {
    background: #ff4500;
}