/* ===================================
   Global Styles
   =================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Sora", sans-serif;
    /*font-family: 'Poppins', sans-serif;*/
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Luckiest Guy", cursive !important;
}

/*p{text-align: justify;}*/

/* ===================================
   Header/Navigation Styles
   =================================== */
.header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    padding: 0;
}

.navbar {
    background: #0170c9;
    padding: 0 0 80px;
    border-bottom: 10px solid #ffcc00;
}

.logo-img {
    height: 100px;
    width: auto;
    object-fit: contain;
}

.navbar-nav .nav-link {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #ffcc00;
}

.navbar-right {
    gap: 15px;
}

.user-icon {
    color: #ffffff;
    font-size: 20px;
    transition: all 0.3s ease;
}

.user-icon:hover {
    color: #ffc107;
}

/* .cta-btn {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #000;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 30px;
    border-radius: 25px;
    text-transform: uppercase;
    border: none;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: linear-gradient(135deg, #ff9800 0%, #ffc107 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.6);
    color: #000;
} */

/* ===================================
   Banner Section Styles
   =================================== */
.banner-section {
    position: relative;
    background: url('../images/new_banner.png') bottom center/cover no-repeat;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 280px;
    padding-bottom: 60px;
    overflow: hidden;
}

.banner-content {
    margin-bottom: 80px;
}

.main-logo {
    max-width: 400px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

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

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

/* ===================================
   Character Slider Styles
   =================================== */
.character-slider-wrapper {
    position: relative;
    width: 100%;
    /* padding: 0 50px; */
    /* margin-top: 50px; */
}

.character-slider {
    margin: 0 -10px;
}

.character-item {
    padding: 0 10px;
    text-align: center;
    opacity: 1;
    transition: opacity 1000ms ease-in-out;
}

/* Fade effect during slide transition */
.character-slider.slick-slider {
    .slick-track {
        transition: transform 1000ms ease-in-out;
    }

    .slick-slide {
        transition: opacity 500ms ease-in-out;
    }
}

.character-image {
    width: 100%;
    text-align: center;
}

.character-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    width: 100%;
}

.character-name {
    font-family: 'Archivo Black', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    text-transform: uppercase;
    margin: 5px 0 0 0;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Slick Slider Arrows */
.slick-prev,
.slick-next {
    width: 50px;
    height: 50px;
    z-index: 100;
}

.slick-prev {
    left: -25px;
}

.slick-next {
    right: -25px;
}

.slick-prev:before,
.slick-next:before {
    font-size: 40px;
    color: #ffffff;
    opacity: 0.8;
}

.slick-prev:hover:before,
.slick-next:hover:before {
    opacity: 1;
}


section.sec_fold {
    padding: 80px 0;
}

section.sec_fold h1 {
    font-family: 'Archivo Black';
    font-size: 72px;
}

section.sec_fold .character-name {
    color: #000;
}

/* ===================================
   Shop Section Styles
   =================================== */
.shop-section {
    background: url('../images/newbanner.jpg') right center/cover no-repeat;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
}

.shop-content {
    position: relative;
    z-index: 2;
}

.shop-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 92px;
    color: #ffffff;
    text-transform: lowercase;
    margin-bottom: 15px;
    line-height: 1;
}

.shop-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 40px;
    opacity: 0.95;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.product-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 15px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.product-image {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 15px;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.product-name {
    font-family: 'Archivo Black', sans-serif;
    font-size: 24px;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.5px;
}

.shop-character {
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.character-bike {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.2));
    animation: bikeFloat 3s ease-in-out infinite;
}

/* ===================================
   About Section Styles
   =================================== */
.about-section {
    background: url('../images/about_banner.png') right center/cover no-repeat;
    padding: 0;
    position: relative;
    overflow: hidden;
}

h2.about-title {
    font-family: "Archivo Black", Sans-serif;
    font-size: 80px;
    font-weight: 600;
    color: #000000;
    line-height: 1;
    font-weight: 400;
}

p.about-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 30px;
    text-align: justify;
    font-family: "Sora", sans-serif;
}

a.about-button {
    background-color: #0150b7 !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 15px 40px !important;
    border: none !important;
    clip-path: polygon(0% 0%, 85% 0%, 100% 30%, 100% 100%, 15% 100%, 0% 70%) !important;
    text-decoration: none;
}

.primarybutton {
    transition: all 0.2s ease-in-out;
    width: auto !important;
    filter: drop-shadow(4px 4px 0px lightblue) !important;
}

.primarybutton:hover {
    transform: translate(-2px, -2px);
}

@keyframes bikeFloat {

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

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

/* ===================================
   Character Showcase Slider Section
   =================================== */
.character-showcase-section {
    /* background: #ffffff; */
    padding: 30px 0 80px;
    position: relative;
}

.showcase-header {
    margin-bottom: 60px;
}

.showcase-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 100px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

.showcase-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #fff;
    max-width: 600px;
    margin: 0 auto;
}

.character-showcase-slider {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

.showcase-slide {
    outline: none;
}

.showcase-content {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.center-character {
    position: relative;
    z-index: 2;
    max-width: 500px;
    margin: 0 auto;
}

.center-character img {
    width: 100%;
    height: 600px;
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.15));
    object-fit: cover;
}

.text-bubble {
    position: absolute;
    max-width: 280px;
    z-index: 1;
    animation: bubbleFloat 3s ease-in-out infinite;
}

.text-bubble img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

/* Text Bubble Positions */
.bubble-top-left {
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.bubble-top-right {
    top: 0;
    right: 0;
    animation-delay: 0.5s;
}

.bubble-bottom-left {
    bottom: 0;
    left: 0;
    animation-delay: 1s;
}

.bubble-bottom-right {
    bottom: 0;
    right: 0;
    animation-delay: 1.5s;
}

@keyframes bubbleFloat {

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

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

/* Custom Dots Styling for Showcase Slider */
.character-showcase-slider .slick-dots {
    bottom: -50px;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.character-showcase-slider .slick-dots li {
    width: 12px;
    height: 12px;
    margin: 0;
}

.character-showcase-slider .slick-dots li button {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    background: #cccccc;
    transition: all 0.3s ease;
}

.character-showcase-slider .slick-dots li button:before {
    display: none;
}

.character-showcase-slider .slick-dots li.slick-active button {
    background: #000000;
    width: 12px;
    height: 12px;
}

/* ===================================
   Responsive Styles
   =================================== */
@media (max-width: 991px) {
    .navbar-nav {
        margin-top: 20px;
        text-align: center;
    }

    .navbar-right {
        justify-content: center;
        margin-top: 20px;
    }

    .main-logo {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .banner-section {
        padding-bottom: 100px;
    }

    .main-logo {
        max-width: 300px;
    }

    .character-slider-wrapper {
        padding: 0 30px;
    }

    .character-image {
        height: 120px;
    }

    .character-name {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .logo-img {
        height: 40px;
    }

    .navbar-nav .nav-link {
        font-size: 12px;
        padding: 8px 15px;
    }

    .cta-btn {
        font-size: 12px;
        padding: 8px 20px;
    }

    .main-logo {
        max-width: 250px;
    }

    .character-slider-wrapper {
        padding: 0 20px;
    }

    .character-image {
        height: 100px;
    }

    .character-name {
        font-size: 12px;
    }

    .slick-prev {
        left: -15px;
    }

    .slick-next {
        right: -15px;
    }

    .shop-section {
        padding: 60px 0;
    }

    .shop-title {
        font-size: 36px;
    }

    .shop-subtitle {
        font-size: 14px;
    }

    .product-grid {
        gap: 15px;
    }

    .product-image {
        height: 120px;
    }

    .product-name {
        font-size: 14px;
    }

    .shop-character {
        margin-top: 40px;
    }

    .character-bike {
        max-width: 80%;
    }

    /* Character Showcase Responsive */
    .character-showcase-section {
        padding: 60px 0;
    }

    .showcase-title {
        font-size: 42px;
    }

    .showcase-content {
        min-height: auto;
        padding-bottom: 60px;
        flex-direction: column;
    }

    .text-bubble {
        position: relative;
        max-width: 100%;
        margin: 15px 0;
        animation: none !important;
        text-align: center;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }

    .text-bubble img {
        max-width: 200px;
    }

    .center-character {
        order: -1;
        margin-bottom: 30px;
    }

    .center-character img {
        max-width: 80%;
        margin: 0 auto;
    }

    /* Reorder bubbles for mobile */
    .bubble-top-left,
    .bubble-top-right {
        order: 1;
    }

    .bubble-bottom-right {
        order: 2;
    }
}

/* ===================================
   Marquee Section Styles
   =================================== */
.marquee-section {
    position: relative;
    padding: 0;
    overflow: visible;
    background: transparent;
    z-index: 20;
    margin-top: -90px;
}

.marquee-wrapper {
    position: relative;
    height: 250px;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.marquee-strip {
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    padding: 15px 0;
    transform-origin: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    overflow: hidden;
}

.green-strip {
    background: #4db82a;
    color: #ffffff;
    transform: translateY(-50%) rotate(5deg);
    z-index: 2;
    border-top: 2px solid #4db82a;
    border-bottom: 2px solid #4db82a;
}

.white-strip {
    background: #FCC300;
    color: #000;
    transform: translateY(-50%) rotate(-5deg);
    z-index: 1;
    border: 2px solid #FCC300;
}

.marquee-content {
    display: flex;
    white-space: nowrap;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.marquee-content span {
    font-family: 'Archivo Black', sans-serif;
    font-size: 24px;
    padding-right: 50px;
    text-transform: uppercase;
    display: inline-block;
    word-spacing: 40px;
}

.scroll-left {
    animation: scrollLeft 20s linear infinite;
}

.scroll-right {
    animation: scrollRight 20s linear infinite;
}

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

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

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

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

/* ===================================
   Crafts & Activities Section Styles
   =================================== */
.crafts-section {
    /* padding: 0 0 100px; */
    background: #ffffff;
}

.crafts-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 72px;
    color: #000000;
    text-transform: uppercase;
    margin-bottom: 10px;
}



.crafts-slider {
    margin: 0 -15px;
}

/* ===================================
   YouTube Section Styles
   =================================== */
.youtube-section {
    padding: 180px 0;
    background: #ffffff;
}

.youtube-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 64px;
    color: #000000;
    margin-bottom: 20px;
}

.youtube-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #000000;
    background: #ffcc00;
    padding: 10px 0;
}

.playlist-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.playlist-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 20px;
    color: #888;
    margin: 0;
}

.video-count {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #888;
}

.playlist-item {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f5f5f5;
}

.playlist-item:hover,
.playlist-item.active {
    background: #f8f9fa;
}

.playlist-thumb {
    width: 120px;
    height: 68px;
    margin-right: 15px;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

.playlist-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.playlist-item:hover .thumb-overlay,
.playlist-item.active .thumb-overlay {
    opacity: 1;
}

.thumb-overlay i {
    color: #fff;
    font-size: 24px;
}

.playlist-info h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 0 0 5px 0;
}

.playlist-info .duration {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #888;
}

.video-player-container {
    background: #000;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) {
    .video-player-container {
        margin-bottom: 30px;
        /* Video on top order adjustment needed if stacked differently */
    }

    /* If we want video on top on mobile, we can use flex-direction column-reverse on the row, 
       but standard bootstrap col ordering puts playlist first in HTML. 
       Let's leave standard stacking (playlist then video) or user might want video first.
       Usually "Playlist on left, video on right" means video stacks under playlist on mobile, 
       which is okay. */
}

.crafts-item {
    padding: 0 15px;
}

.crafts-card {
    background: #e4e4e4;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}

.crafts-image-box {
    background: #ffffff;
    padding: 30px;
    text-align: center;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crafts-image-box img {
    max-width: 100%;
    height: auto;
    max-height: 280px;
}

.crafts-content {
    background: #ffc107;
    padding: 40px 15px 15px;
    text-align: center;
    position: relative;
    z-index: 1;
    height: 125px;
}

.crafts-name {
    font-family: 'Archivo Black', sans-serif;
    font-size: 32px;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
}

.crafts-btn {
    position: absolute;
    bottom: 120px;
    /* Adjust to overlap border */
    left: 50%;
    transform: translateX(-50%);
    background: #0056b3;
    color: #ffffff;
    padding: 12px 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    width: 60%;
    justify-content: center;
    white-space: nowrap;
}

.crafts-btn:hover {
    background: #004494;
    color: #ffffff;
}

/* Responsive Styles for Crafts Section */
@media (max-width: 991px) {
    .crafts-title {
        font-size: 48px;
    }

    .crafts-btn {
        width: 80%;
        font-size: 13px;
        bottom: 70px;
    }
}

@media (max-width: 576px) {
    .crafts-section {
        padding: 60px 0;
    }

    .crafts-title {
        font-size: 36px;
        margin-bottom: 40px;
    }

    .crafts-image-box {
        min-height: 280px;
        padding: 20px;
        border-width: 5px;
    }

    .crafts-image-box img {
        max-height: 200px;
    }

    .crafts-name {
        font-size: 24px;
    }

    .crafts-btn {
        width: 90%;
        bottom: 60px;
    }
}


/* ===================================
   About Section Styles
   =================================== */
.book-section {
    background: url('../images/book_banner.png') top center/cover no-repeat;
    padding: 180px 0 140px;
    position: relative;
    /* overflow: hidden; */
    /* margin-top: -180px; */
}

h2.book-title {
    font-family: "Archivo Black", Sans-serif;
    font-size: 60px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
}

p.book-subtitle {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin-bottom: 30px;
}

.book-content h5 {
    text-transform: uppercase;
    font-size: 26px;
    color: #fff;
    font-weight: 300;
}

section.book-section img {
    width: 100%;
}

a.book-button img {
    width: 26%;
}

section.book-section img.smbookimg {
    width: 10%;
    position: absolute;
    left: 30px;
    bottom: 80px;
}

.book-btn-wrap {
    position: relative;
}

section.book-section img.smbookimg2 {
    width: 50%;
    position: absolute;
    right: 80px;
    bottom: -210px;
}

img.bookleftele {
    position: absolute;
    width: 26% !important;
    left: 0;
    top: -300px;
}

img.bookrightele {
    position: absolute;
    width: 20% !important;
    right: 0;
    top: -190px;
}

/* ===================================
   Footer Section Styles
   =================================== */
.footer-section {
    position: relative;
    padding: 0px 0 30px;
    background: #ffffff;
    overflow: hidden;
}

/* Newsletter Styles */
.newsletter-wrapper {
    position: relative;
    margin-bottom: 60px;
    padding: 0 15px;
    z-index: 2;
}

.newsletter-title {
    font-family: 'Archivo Black', sans-serif;
    font-size: 72px;
    color: #000000;
    line-height: 1;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.newsletter-box {
    background: #0056b3;
    max-width: 800px;
    margin: 0 auto;
    padding: 15px 20px;
    border-radius: 0;
    box-shadow: none;
    clip-path: polygon(0 0, 95% 0, 100% 30%, 100% 100%, 5% 100%, 0 70%);
}

.newsletter-form {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 0;
    transform: none;
}

.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    padding: 10px;
    outline: none;
}

.newsletter-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
}

.subscribe-btn {
    background: #ffc107;
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    padding: 12px 40px;
    border: none;
    text-transform: capitalize;
    cursor: pointer;
    clip-path: polygon(0 0, 85% 0, 100% 40%, 100% 100%, 15% 100%, 0 60%);
    transition: all 0.3s ease;
    font-size: 16px;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

.subscribe-btn:hover {
    background: #e0a800;
    transform: translateY(-2px);
}

/* Footer Bikes */
.footer-bike-left {
    position: absolute;
    left: 0;
    bottom: 220px;
    width: 240px;
    z-index: 1;
    filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.2));
}

.footer-bike-right {
    position: absolute;
    right: 0;
    bottom: 200px;
    /* Aligned with newsletter area */
    width: 300px;
    /* Slightly smaller or varied */
    z-index: 1;
    filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.2));
}

/* Social Icons */
.social-icons-wrapper {
    position: relative;
    z-index: 2;
    margin-top: 50px;
    margin-bottom: 40px;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 25px;
}

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

.social-link:hover {
    transform: translateY(-5px);
}

/* Footer Links */
.footer-divider {
    border-top: 2px solid #000000;
    opacity: 1;
    margin: 30px 0;
}

.footer-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-nav li a {
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-nav li a:hover {
    color: #0056b3;
}

.footer-policy {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 25px;
}

.footer-policy li a {
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer-copyright p {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #000000;
    text-transform: uppercase;
    margin: 0;
}

.newsletter-wrapper.text-center img {
    width: 25%;
    margin-bottom: 20px;
}

/* Responsive Footer */
@media (max-width: 1200px) {
    .footer-bike-left {
        width: 250px;
        left: -20px;
    }

    .footer-bike-right {
        width: 250px;
        right: -20px;
    }
}

@media (max-width: 991px) {
    .newsletter-title {
        font-size: 48px;
    }

    .footer-bike-left,
    .footer-bike-right {
        /* position: relative; */
        bottom: 72px;
        /* left: 0; */
        right: 0;
        width: 180px;
        /* margin: 20px; */
        display: inline-block;
    }

    .footer-nav {
        justify-content: center;
    }

    .footer-policy {
        justify-content: center;
        margin-top: 15px;
    }
}

@media (max-width: 576px) {
    .footer-section {
        padding: 60px 0 30px;
    }

    .newsletter-title {
        font-size: 36px;
    }

    .newsletter-box {
        transform: none;
        border-radius: 15px;
        padding: 10px;
    }

    .newsletter-form {
        transform: none;
        flex-direction: column;
        gap: 10px;
    }

    .subscribe-btn {
        width: 100%;
        clip-path: none;
        border-radius: 5px;
    }

    .footer-nav,
    .footer-policy {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .footer-divider {
        margin: 20px 0;
    }

    .footer-copyright p {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .social-link {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
}

.primarybuttonyellow a {
    background-color: #ffcc00 !important;
    color: #1b1b1b !important;
    font-weight: 700 !important;
    padding: 15px 40px !important;
    border: none !important;
    clip-path: polygon(0% 0%, 85% 0%, 100% 30%, 100% 100%, 15% 100%, 0% 70%) !important;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.primarybuttonyellow {
    width: auto !important;
    filter: drop-shadow(4px 4px 0px #c49e00) !important;
}

.primarybuttonyellow:hover {
    transform: translate(-2px, -2px);
}

section.banner-section h1 {
    font-family: 'Archivo Black';
    font-size: 100px;
    color: #fff;
    margin-top: 150px;
}

section.mission {
    background: #0050b7;
    padding: 30px 0 200px;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

section.mission h2.about-title {
    color: #fff;
    font-size: 60px;
    margin-bottom: 20px;
}

section.mission p.about-subtitle {
    color: #000;
    font-size: 18px;
    background: #fff;
    padding: 50px 120px;
    clip-path: polygon(0% 0%, 85% 0%, 100% 30%, 100% 100%, 15% 100%, 0% 70%) !important;
    margin-top: 20px;
    text-align: justify;
}

section.banner-section.inner {
    min-height: 60vh !important;
    padding: 60px 0;
}

section.banner-section.inner h1 {
    margin-top: 50px;
}

/* profile menu */

.profile {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-align: end;
}

/*.profile h3 {*/
/*    text-align: end;*/
/*    line-height: 1;*/
/*    margin-bottom: 4px;*/
/*    font-weight: 600;*/
/*}*/

/*.profile p {*/
/*    line-height: 1;*/
/*    font-size: 14px;*/
/*    opacity: .6;*/
/*}*/

.profile .img-box {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}

.profile .img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.usericonwrap {
    display: flex;
    align-items: center;
}
.profile {
    display: flex;
    align-items: center;
    gap: 15px;
}
.social_wrap ul {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    gap: 15px;
    padding: 0;
}
.social_wrap ul li {
    list-style: none;
    color: #fff;
    font-size: 24px;
}
.social_wrap ul li:hover {
    color: #f8c000;
}
.img-box img {
    display: block;
    height: 40px;
    width: auto;
}

/* menu (the right one) */

.menu {
    position: absolute;
    top: calc(100% + 22px);
    right: 0px;
    width: 200px;
    min-height: 100px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition: 300ms;
}

.menu::before {
    content: '';
    position: absolute;
    top: -10px;
    right: 14px;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
    z-index: -1;
}

.menu.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* menu links */

.menu ul {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 10;
    background: #fff;
    padding: 0;
}

.menu ul li {
    list-style: none;
}

.menu ul li:hover {
    background: #eee;
}

.menu ul li a {
    text-decoration: none;
    color: #000;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    gap: 6px;
}

.menu ul li a i {
    font-size: 1.2em;
}

.usericonwrap {
    position: relative;
    margin-right: 15px;
}

section.about-section.inner {
    background: url("../images/new_banner.png");
    padding-top: 100px;
}

section.about-section.inner img {
    width: 100%;
}

section.charcinner .charcbox {
    background: #f0c721;
    text-align: center;
    padding: 20px;
    border-radius: 20px;
    height: 200px;
}

section.charcinner .charcbox h2 {
    margin-bottom: 10px;
}

section.charcinner .charcbox p {
    margin: 0;
}

section.charcinner {
    margin-bottom: 50px;
}

section.about-section.inner h1 {
    font-size: 70px;
    margin-bottom: 15px;
}

.sing-along-section {
    display: flex;
    justify-content: end;
    padding: 0;
    font-family: 'Arial', sans-serif;
    /* background: #59b447; */
    /* margin-top: -60px; */
}

.sing-along-container {
    display: flex;
    /* align-items: center; */
    /* justify-content: space-between; */
    background-image: url('/assets/images/back2.png');
    background-size: cover;
    width: 100%;
    /* max-width: 700px; */
    height: 700px;
    position: relative;
    /* border-radius: 15px; */
    overflow: visible;
    /* Character ko thoda bahar nikalne ke liye */
    /* margin-right: 120px; */
    background-repeat: no-repeat;
    border-radius: 20px;
    padding: 30px;
}

.sing-along-content {
    flex: 1;
    /* padding-left: 80px; */
    /* color: white; */
}

.sing-along-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 15px;
    letter-spacing: -1px;
    width: 500px;
}

.sing-along-lyrics {
    font-size: 1.1rem;
    line-height: 1.5;
    font-weight: 500;
    max-width: 500px;
}

.character-box {
    /* flex: 1; */
    /* display: flex; */
    /* justify-content: flex-end; */
    /* align-items: flex-end; */
    height: 270px;
    /* padding-right: 40px; */
    position: relative;
}

.bike-img {
    width: 500px;
    /* Zarurat ke mutabiq size adjust karein */
    height: auto;
    /* Image ko container se bahar nikalne ke liye */
    transform: translate(30px, -70px);
    /* position: absolute; */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sing-along-container {
        flex-direction: column;
        height: auto;
        padding: 40px 20px;
        text-align: center;
    }

    .sing-along-content {
        padding-left: 0;
        margin-bottom: 30px;
    }

    .sing-along-title {
        font-size: 2.5rem;
    }

    .bike-img {
        width: 200px;
        transform: translateY(20px);
    }

    .character-box {
        padding-right: 0;
        justify-content: center;
    }
}

.features-section {
    background-color: #59b447;
    /* Green Background */
    padding: 60px 0px;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.features-container {
    display: flex;
    align-items: center;
    max-width: 1100px;
    width: 100%;
    gap: 40px;
}

/* Left Side Image Styling */
.bike-image-area {
    flex: 1;
    display: flex;
    justify-content: center;
}

.main-bike {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

/* Right Side Cards Styling */
.info-cards-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card {
    padding: 25px 35px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 82%;
}

.card h3 {
    margin: 0 0 5px 0;
    font-size: 1.8rem;
    font-weight: 900;
    font-family: 'Arial Black', sans-serif;
}

.card p {
    margin: 0;
    font-size: 1.1rem;
    font-family: 'Arial', sans-serif;
    line-height: 1.4;
}

/* Colors */
.white-card {
    background-color: #ffffff;
    color: #000;
}

.yellow-card {
    background-color: #fff4bd;
    color: #000;
    margin-left: 50px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .features-container {
        flex-direction: column;
    }

    .card h3 {
        font-size: 1.5rem;
    }
}

.imagination-section {
    display: flex;
    justify-content: center;
    padding: 0px 0px 0;
    font-family: 'Arial', sans-serif;
    background: #59b447;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.imagination-container {
    width: 100%;
    max-width: 900px;
    /* height: 600px; */
    /* Zarurat ke mutabiq adjust karein */
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 150px 20px 50px; */
    /* display: none; */
}

.imagination-box {
    /* background-color: rgba(255, 255, 255, 0.2); */
    /* Transparent white look */
    /* border: 2px solid rgba(255, 255, 255, 0.5); */
    /* Border like the image */
    /* border-radius: 10px; */
    /* padding: 20px; */
    color: white;
    text-align: center;
    width: 100%;
    /* max-width: 600px; */
    /* backdrop-filter: blur(5px); */
    /* Optional: Premium glass effect ke liye */
}

.top-box {
    margin-bottom: 40px;
}

.imagination-box p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
    color: #000;
    text-align: left;
}

img.right-bike {
    position: absolute;
    left: 289px;
    width: 25%;
    /* display: none; */
    top: -430px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .imagination-container {
        height: auto;
        padding: 60px 20px;
    }

    .imagination-box {
        width: 100%;
        font-size: 0.9rem;
    }
}

.brave-heart-section {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* padding: 200px 0 150px; */
    /* font-family: 'Arial', sans-serif; */
    /* background: #59b447; */
}

.content-container {
    display: flex;
    align-items: self-start;
    background-image: url('/assets/images/back.png');
    background-size: cover;
    background-position: left;
    width: 100%;
    /* max-width: 1100px; */
    /* height: 350px; */
    position: relative;
    border-radius: 20px;
}

.image-wrapper {
    flex: 1;
    /* position: relative; */
}

.character-img {
    width: 30%;
    /* Image size adjust karein */
    position: absolute;
    top: 0;
    /* Image ko niche se thoda bahar nikalne ke liye */
    left: -20px;
    /* Agar image ko lift karna ho to niche wali line use karein */
    /* transform: translateY(-10px); */
}

.text-content {
    flex: 2;
    padding: 40px 60px 40px 20px;
    /* Left padding zyada rakhi hai taake character ke piche text na chup jaye */
    color: #000;
    justify-content: space-evenly;
}

.title {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.description {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 591px;
    display: flex;
    justify-content: space-evenly !important;
}

/* Responsive design mobile ke liye */
@media (max-width: 768px) {
    .content-container {
        flex-direction: column;
        height: auto;
        text-align: center;
        padding-top: 200px;
    }

    .character-img {
        position: relative;
        width: 250px;
        left: 0;
        bottom: 0;
        margin-top: -200px;
    }

    .text-content {
        padding: 20px;
    }
}

section.about-section.inner h2 {
    font-size: 66px;
    margin-bottom: 20px;
}

section.about-section.inner p {
    font-size: 18px;
    text-align: justify;
}

.abslute-wrap {
    /* position: relative; */
}

.abslute-wrap img {
    position: absolute;
}

img.right-two {
    right: 0;
    width: 18rem !important;
    bottom: 42%;
}

img.left-two {
    left: -90px;
    width: 21rem !important;
    bottom: 43%;
    z-index: 9;
}

img.right-one {
    right: -30px;
    top: 0px;
    width: 22rem !important;
}

img.left-one {
    left: 0px;
    top: 20px;
    width: 15rem !important;
}

img.left-three {
    right: 0px;
    bottom: 0;
    width: 24rem;
    z-index: 9;
}

img.right-three {
    left: 0;
    bottom: -20px;
    width: 20rem;
    z-index: 9;
}

/*new css*/
img.tyre {
    overflow: hidden;
    margin-bottom: -110px;
    object-fit: contain;
}

.character-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 50px 0 40px;
    /*background: url("../assets/images/tyre.png");*/
    position: absolute;
    top: 6.5rem;
    z-index: 999999;
}

.character-card {
    background-color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 8px 15px 8px 8px;
    /* min-width: 200px; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.icon-wrapper img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}

.character-name {
    font-family: 'Arial Black', Gadget, sans-serif;
    font-size: 15px;
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    /* margin-left: 10px; */
}

/* Har character ke liye alag background colors */
.bg-yellow {
    background-color: #fff4bd;
}

.bg-purple {
    background-color: #f3e0f7;
}

.bg-red {
    background-color: #ffdad6;
}

.bg-green {
    background-color: #e2f4e3;
}

.bg-blue {
    background-color: #e1f1ff;
}

.bg-pink {
    background-color: #ffe1f0;
}

.about-content {
    background: #FCC300;
    padding: 40px 40px 10px;
    border-radius: 20px;
}

section.about-section.inner section.marquee-section .marquee-wrapper {
    height: 100px;
}

section.about-section.inner section.marquee-section .marquee-strip.green-strip {
    transform: none;
    padding: 6px 0;
}

.maincaracter_wrap {
    padding: 30px 0 90px;
    /* background: url("../images/new_banner.png"); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    overflow: hidden;
}

/* Main Yellow Card */
.yellow-card {
    /* background: url("../images/back.png"); */
    border-radius: 25px;
    padding: 40px 40px 40px 300px;
    position: relative;
    /* min-height: 600px; */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left;
}

/* White Sidebar */
.white-card {
    background: #fff;
    border-radius: 25px;
    /* padding: 30px; */
    height: 100%;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.heading-font {
    font-weight: 400;
    text-transform: uppercase;
    color: #000;
}

.strider-text {
    font-size: 72px !important;
    margin-bottom: 20px;
    color: #000 !important;
    margin-top: 0 !important;
    font-weight: 400;
}

.info-box {
    border-top: 1px solid #747474;
    padding-top: 15px;
    margin-top: 15px;
}

.info-title {
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 24px;
    font-family: 'Luckiest Guy';
}

/* Character Image Position */
.character-img {
    position: absolute;
    left: -50px;
    top: -20px;
    width: 400px;
    z-index: 10;
}

.lyrics {
    font-style: italic;
    line-height: 1.8;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
}

.bike-img-new {
    position: absolute;
    left: -20px;
    bottom: -190px;
    width: 350px;
    z-index: 999;
}

.white-card:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    /* Corner ka size */
    height: 120px;
    background-color: #69b84a;
    /* Green color */
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    border-bottom-left-radius: 50%;
    border-radius: 0 20px 0 0;
}

.white-card:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 120px;
    /* Corner ka size */
    height: 120px;
    background-color: #69b84a;
    /* Green color */
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    border-bottom-left-radius: 50%;
    border-radius: 0 20px 0 0;
    transform: rotate(180deg);
}

.white-card h2 {
    padding-top: 30px;
    font-size: 42px;
}

.yellow-card p {
    text-align: justify;
    font-size: 17px;
    margin-bottom: 0;
}

.banner_new_home {
    position: relative;
    width: 100%;
    /* Aap apni zaroorat ke mutabiq height set kar sakte hain */
    overflow: hidden;
}

.banner_new_home::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    height: 40%;
    background-color: #f1bc00;
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 100%);
    z-index: 1;
}

.about_banner_new::before {
    content: "";
    position: absolute;
    bottom: -40px;
    left: 0;
    width: 20%;
    height: 30%;
    background-color: #f1bc00;
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 100%);
    z-index: 1;
    transform: rotate(90deg);
}

.banner_home_img {
    position: relative;
    z-index: 2;
    padding: 20px;
}

section.banner-section.banner_new_home img.single_right_banner {
    width: 100%;
    position: absolute;
    bottom: 20px;
    width: 40rem;
    z-index: 2;
    left: 57%;
}

section.banner-section.about_banner_new img.single_left_banner {
    width: 100%;
    position: absolute;
    bottom: 0;
    width: 40rem;
    z-index: 2;
    left: 40px;
}

section.banner-section.banner_new_home h2.about-title {
    font-size: 44px;
    font-weight: 500;
    margin-bottom: 20px;
}

section.banner-section.banner_new_home .about-content {
    margin: 50px 0 80px;
}

section.banner-section.banner_new_home .character-container {
    top: 6.5rem;
}

section.marquee-section.single_strip {
    transform: rotate(-5deg);
    height: 160px;
}

.marquee-strip.green-strip.blue-strip {
    background: #0050B7;
    border-color: #0050B7;
}

section.banner-section.about_banner_new .character-container {
    top: 6.5rem;
}

/* ===================================
   MOBILE RESPONSIVE CSS - COMPLETE
   Mobile Responsive CSS - Mukammal
   =================================== */

/* ===================================
   Extra Small Devices - 320px to 375px
   Bohot Chote Mobile Devices
   =================================== */
@media (max-width: 375px) {

    /* Global Typography - Mukammal Typography */
    body {
        font-size: 14px;
    }

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* All Headings - Sare Headings */
    h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    h3 {
        font-size: 20px !important;
    }

    h5 {
        font-size: 16px !important;
    }

    /* Character Cards - Character Cards ko adjust karna */
    .character-container {
        top: 75px !important;
        padding: 15px 0 12px !important;
    }

    .character-card {
        min-width: 140px !important;
        padding: 5px 8px 5px 5px !important;
        flex-shrink: 0 !important;
    }

    .icon-wrapper {
        width: 40px !important;
        height: 40px !important;
    }

    .character-name {
        font-size: 11px !important;
    }
}

/* ===================================
   Small Mobile Devices - 376px to 576px
   Chote Mobile Devices
   =================================== */
@media (max-width: 576px) {

    /* ========== HEADER & NAVIGATION ========== */
    /* Header aur Navigation */

    .logo-img {
        height: 60px !important;
    }

    .navbar {
        padding: 0 0 10px !important;
        border-bottom: 5px solid #ffcc00 !important;
    }

    .navbar-nav .nav-link {
        font-size: 13px !important;
        padding: 8px 15px !important;
    }

    .navbar-toggler {
        border-color: #fff !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* User Icon Menu - User Icon Menu */
    .usericonwrap {
        margin-right: 0 !important;
    }

    .profile .img-box {
        width: 40px !important;
        height: 40px !important;
    }

    .menu {
        width: 180px !important;
        right: -10px !important;
    }

    .primarybuttonyellow a {
        padding: 10px 25px !important;
        font-size: 13px !important;
    }

    /* ========== BANNER SECTION ========== */
    /* Banner Section - Homepage Banner */

    .banner-section {
        padding-top: 120px !important;
        padding-bottom: 40px !important;
        min-height: 50vh !important;
    }

    section.banner-section h1 {
        font-size: 32px !important;
        margin-top: 0px !important;
    }

    section.banner-section.banner_new_home {
        padding-top: 140px !important;
    }

    section.banner-section.banner_new_home h2.about-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    section.banner-section.banner_new_home .about-content {
        margin: 50px 0 220px !important;
        padding: 25px 20px 1px !important;
    }

    .about-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    .about-subtitle {
        font-size: 15px !important;
        text-align: justify !important;
    }

    /* Banner Background Triangle - Banner ka background triangle */
    .banner_new_home::before {
        width: 80% !important;
        height: 30% !important;
    }

    /* Right Side Banner Image - Daye taraf ki banner image */
    section.banner-section.banner_new_home img.single_right_banner {
        width: 70% !important;
        bottom: 10px !important;
        left: 125px !important;
    }

    section.banner-section.about_banner_new img.single_left_banner {
        width: 70% !important;
        bottom: 10px !important;
        left: 60px !important;
    }

    /* ========== CHARACTER SLIDER ========== */
    /* Character Slider - Character ka slider */

    .character-container {
        position: absolute !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 20px 0 15px !important;
        gap: 8px !important;
        z-index: 999 !important;
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Hide scrollbar but keep functionality */
    .character-container::-webkit-scrollbar {
        display: none;
    }

    section.banner-section.banner_new_home .character-container {
        top: 90px !important;
    }

    section.banner-section.about_banner_new .character-container {
        top: 85px !important;
    }

    .character-card {
        min-width: 150px !important;
        padding: 6px 10px 6px 6px !important;
        flex-shrink: 0 !important;
    }

    .icon-wrapper {
        width: 45px !important;
        height: 45px !important;
        margin-right: 8px !important;
    }

    .character-name {
        font-size: 12px !important;
    }

    /* ========== MARQUEE SECTION ========== */
    /* Marquee Section - Scrolling text wala section */

    .marquee-section {
        margin-top: -50px !important;
    }

    section.marquee-section.single_strip {
        height: 82px !important;
        transform: rotate(-5deg) !important;
    }

    .marquee-wrapper {
        height: 120px !important;
    }

    .marquee-strip {
        padding: 10px 0 !important;
    }

    .marquee-content span {
        font-size: 14px !important;
        padding-right: 30px !important;
        word-spacing: 20px !important;
    }

    /* ========== MISSION SECTION (5 SPOKES) ========== */
    /* Mission Section - 5 Spokes of Strider wala section */

    section.mission {
        padding: 60px 0 160px !important;
        margin-top: 0 !important;
    }

    section.mission h2.about-title {
        font-size: 28px !important;
        margin-bottom: 15px !important;
        font-weight: 400;
    }

    section.mission p {
        font-size: 15px !important;
    }

    section.mission p.about-subtitle {
        padding: 25px 15px !important;
        font-size: 14px !important;
        margin-top: 15px !important;
        clip-path: unset !important;
        text-align: justify !important;
        border-radius: 20px;
    }

    /* Bike Wheel Image - Bike ka wheel image */
    .bikeround img {
        width: 95% !important;
        margin: 15px 0 !important;
    }

    /* Hide Absolute Positioned Images on Mobile */
    /* Mobile par absolute positioned images ko hide karna */
    .abslute-wrap img {
        display: block !important;
    }

    /* ========== BOOK SECTION ========== */
    /* Book Section - Book wala section */

    .book-section {
        padding: 80px 0 60px !important;
        margin-top: -80px !important;
    }

    h2.book-title {
        font-size: 30px !important;
        line-height: 1.2 !important;
        font-weight: 400;
    }

    .book-content h5 {
        font-size: 20px !important;
        margin-bottom: 15px !important;
        font-weight: 400;
        margin-top: 10px;
    }

    p.book-subtitle {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    section.book-section img {
        width: 100% !important;
        text-align: center;
        margin: auto;
    }

    /* Hide Small Book Images on Mobile */
    /* Mobile par choti book images ko hide karna */
    section.book-section img.smbookimg,
    section.book-section img.smbookimg2 {
        display: none !important;
    }

    a.book-button img {
        width: 50% !important;
    }

    .book-btn-wrap {
        text-align: center !important;
    }

    /* ========== FOOTER SECTION ========== */
    /* Footer Section */

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

    /* Newsletter - Newsletter section */
    .newsletter-wrapper {
        margin-bottom: 40px !important;
    }

    .newsletter-wrapper.text-center img {
        width: 50% !important;
        margin-bottom: 15px !important;
    }

    .newsletter-title {
        font-size: 32px !important;
        margin-bottom: 20px !important;
    }

    .newsletter-box {
        transform: none !important;
        border-radius: 15px !important;
        padding: 10px !important;
        clip-path: none !important;
    }

    .newsletter-form {
        transform: none !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .newsletter-form input {
        font-size: 15px !important;
        padding: 12px !important;
        text-align: center !important;
    }

    .subscribe-btn {
        width: 100% !important;
        clip-path: none !important;
        border-radius: 8px !important;
        padding: 12px 30px !important;
        font-size: 15px !important;
    }

    /* Footer Bikes - Footer ki bikes */
    .footer-bike-left,
    .footer-bike-right {
        display: none !important;
    }

    /* Social Icons - Social media icons */
    .social-icons {
        gap: 15px !important;
    }

    .social-link img {
        width: 40px !important;
        height: 40px !important;
    }

    /* Footer Navigation - Footer ka navigation */
    .footer-nav,
    .footer-policy {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    .footer-nav li a,
    .footer-policy li a {
        font-size: 12px !important;
    }

    .footer-divider {
        margin: 20px 0 !important;
    }

    .footer-copyright p {
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    /* ========== ABOUT US PAGE ========== */
    /* About Us Page - About us ka page */

    section.about-section.inner {
        padding-top: 80px !important;
    }

    section.about-section.inner h1 {
        font-size: 36px !important;
        margin-bottom: 12px !important;
    }

    section.about-section.inner h2 {
        font-size: 32px !important;
        margin-bottom: 15px !important;
    }

    section.about-section.inner p {
        font-size: 15px !important;
    }

    section.about-section.inner img {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* ========== CHARACTERS PAGE ========== */
    /* Characters Page - Characters ka page */

    section.charcinner {
        margin-bottom: 30px !important;
    }

    section.charcinner .charcbox {
        height: auto !important;
        padding: 15px !important;
        margin-bottom: 15px !important;
    }

    section.charcinner .charcbox h2 {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    section.charcinner .charcbox p {
        font-size: 14px !important;
    }

    /* Strider Character Section - Strider character section */
    .yellow-card {
        padding: 30px 20px !important;
        margin-bottom: 20px !important;
    }

    .yellow-card p {
        font-size: 15px !important;
    }

    .strider-text {
        font-size: 36px !important;
        margin-bottom: 15px !important;
    }

    .info-title {
        font-size: 18px !important;
    }

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

    /* Character Image - Character ki image */
    .character-img {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 250px !important;
        margin: 0 auto 20px !important;
        display: block !important;
    }

    .bike-img-new {
        position: relative !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0px auto 0 !important;
        display: block !important;
    }

    .white-card {
        margin-bottom: 20px !important;
        padding: 20px !important;
    }

    .white-card h2 {
        font-size: 32px !important;
        padding-top: 20px !important;
    }

    .white-card:before,
    .white-card:after {
        width: 60px !important;
        height: 60px !important;
    }

    /* Sing Along Section - Sing along section */
    .sing-along-section {
        padding: 20px 0 !important;
    }

    .sing-along-container {
        height: auto !important;
        padding: 30px 20px !important;
        border-radius: 15px !important;
    }

    .sing-along-content {
        padding-left: 0 !important;
        margin-bottom: 20px !important;
    }

    .sing-along-title {
        font-size: 2rem !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .sing-along-lyrics {
        font-size: 0.95rem !important;
        max-width: 100% !important;
    }

    .character-box {
        height: auto !important;
        padding-right: 0 !important;
    }

    .bike-img {
        width: 100% !important;
        max-width: 250px !important;
        transform: none !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Features Section - Features section */
    .features-section {
        padding: 40px 0 !important;
    }

    .features-container {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .card {
        width: 100% !important;
        padding: 20px 25px !important;
        margin-left: 0 !important;
    }

    .card h3 {
        font-size: 1.5rem !important;
    }

    .card p {
        font-size: 1rem !important;
    }

    .yellow-card {
        margin-left: 0 !important;
    }

    /* Imagination Section - Imagination section */
    .imagination-section {
        padding: 40px 0 !important;
    }

    .imagination-container {
        padding: 40px 20px !important;
    }

    .imagination-box p {
        font-size: 0.95rem !important;
    }

    img.right-bike {
        display: none !important;
    }

    /* Brave Heart Section - Brave heart section */
    .content-container {
        flex-direction: column !important;
        height: auto !important;
        padding-top: 150px !important;
        border-radius: 15px !important;
    }

    .character-img {
        position: relative !important;
        width: 40% !important;
        max-width: 200px !important;
        left: 0 !important;
        bottom: 0 !important;
        margin: -30px auto 0 !important;
        display: none !important;
    }

    .text-content {
        padding: 20px !important;
    }

    .title {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }

    .description {
        font-size: 0.95rem !important;
        max-width: 100% !important;
    }

    /* ========== WATCH PAGE ========== */
    /* Watch Page - Watch ka page */

    .youtube-section {
        padding: 120px 0 60px !important;
    }

    .youtube-title {
        font-size: 36px !important;
        margin-bottom: 15px !important;
    }

    .youtube-subtitle {
        font-size: 14px !important;
    }

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

    .video-count {
        font-size: 12px !important;
    }

    .playlist-item {
        padding: 10px !important;
    }

    .playlist-thumb {
        width: 90px !important;
        height: 50px !important;
        margin-right: 10px !important;
    }

    .playlist-info h5 {
        font-size: 14px !important;
    }

    .playlist-info .duration {
        font-size: 12px !important;
    }

    .video-player-container {
        margin-bottom: 20px !important;
    }

    /* ========== CRAFTS PAGE ========== */
    /* Crafts Page - Crafts ka page */

    .crafts-section {
        padding: 120px 0 60px !important;
    }

    .crafts-title {
        font-size: 32px !important;
        margin-bottom: 30px !important;
    }

    .crafts-image-box {
        min-height: 250px !important;
        padding: 20px !important;
    }

    .crafts-image-box img {
        max-height: 180px !important;
    }

    .crafts-name {
        font-size: 20px !important;
    }

    .crafts-btn {
        width: 90% !important;
        bottom: 75px !important;
        font-size: 12px !important;
        padding: 10px 20px !important;
    }
    .craft-content{height: unset !important;}

    /* ========== INNER PAGE BANNER ========== */
    /* Inner Pages ka Banner */

    section.banner-section.inner {
        min-height: 50vh !important;
        padding: 80px 0 40px !important;
    }

    section.banner-section.inner h1 {
        margin-top: 30px !important;
        font-size: 36px !important;
    }

    /* ========== GENERAL UTILITIES ========== */
    /* General Utilities - Aam utilities */

    .primarybutton {
        filter: drop-shadow(2px 2px 0px lightblue) !important;
    }

    a.about-button {
        padding: 12px 30px !important;
        font-size: 14px !important;
    }

    /* Section Fold - Section fold */
    section.sec_fold {
        padding: 60px 0 !important;
    }

    section.sec_fold h1 {
        font-size: 48px !important;
    }
}

/* ===================================
   Medium Mobile to Small Tablets - 577px to 768px
   Medium Mobile se Small Tablets tak
   =================================== */
@media (min-width: 577px) and (max-width: 768px) {

    /* Banner Section */
    .banner-section {
        padding-top: 150px !important;
    }

    section.banner-section.banner_new_home h2.about-title {
        font-size: 36px !important;
    }

    .about-title {
        font-size: 48px !important;
    }

    section.mission h2.about-title {
        font-size: 42px !important;
    }

    h2.book-title {
        font-size: 42px !important;
    }

    .newsletter-title {
        font-size: 48px !important;
    }

    /* Character Cards */
    .character-container {
        top: 100px !important;
    }

    .character-card {
        min-width: 180px !important;
    }

    .icon-wrapper {
        width: 55px !important;
        height: 55px !important;
    }

    .character-name {
        font-size: 14px !important;
    }

    /* Mission Section */
    section.mission {
        padding: 80px 0 120px !important;
    }

    .bikeround img {
        width: 80% !important;
    }

    /* Book Section */
    .book-section {
        padding: 100px 0 80px !important;
    }

    /* Footer */
    .newsletter-box {
        padding: 15px !important;
    }

    .newsletter-form {
        flex-direction: row !important;
    }

    .subscribe-btn {
        width: auto !important;
    }
}

/* ===================================
   Tablets - 769px to 991px
   Tablets ke liye
   =================================== */
@media (min-width: 769px) and (max-width: 991px) {

    .about-title {
        font-size: 64px !important;
    }

    .banner-section {
        padding: 230px 0 350px;
    }

    section.banner-section.banner_new_home h2.about-title {
        font-size: 38px !important;
    }

    section.mission h2.about-title {
        font-size: 52px !important;
    }

    h2.book-title {
        font-size: 52px !important;
    }

    .newsletter-title {
        font-size: 56px !important;
    }

    /* Character Container */
    .character-container {
        top: 100px !important;
        gap: 10px !important;
    }

    /* Mission Section */
    section.mission p.about-subtitle {
        padding: 40px 80px !important;
    }

    .bikeround img {
        width: 70% !important;
    }

    /* Show some absolute images on tablet */
    .abslute-wrap img.left-one,
    .abslute-wrap img.right-one {
        display: block !important;
        width: 180px !important;
    }

    /* Footer Bikes - Show on tablet */
    .footer-bike-left,
    .footer-bike-right {
        width: 200px !important;
    }
}

/* ===================================
   Landscape Mobile Devices
   Landscape mode ke mobile devices
   =================================== */
@media (max-height: 500px) and (orientation: landscape) {

    .banner-section {
        padding-top: 100px !important;
        min-height: auto !important;
    }

    section.mission {
        padding: 50px 0 80px !important;
    }

    .character-container {
        padding: 20px 0 !important;
    }

    .footer-section {
        padding: 40px 0 20px !important;
    }
}

/* ===================================
   END OF MOBILE RESPONSIVE CSS
   Mobile Responsive CSS ka Khatma
   =================================== */
@media (max-width: 767px){
    .profile {
        display: none;
    }
    .navbar{padding: 0 0 10px !important;}
    main {
    overflow-x: hidden;
}
section.banner-section.about_banner_new .about-content {
    margin: 60px 0 305px;
}

.about_banner_new::before {
    width: 20%;
    height: 15%;
}
img.set_mobile_view {
    margin-top: 70px;
}
.maincaracter_wrap {
    margin: 30px 0 0;
}
.abslute-wrap img.left-one {
    width: 24% !important;
    top: 0;
}

.abslute-wrap img.right-one {
    width: 35% !important;
    top: 0;
    right: -27px;
}

.abslute-wrap img.left-two {
    display: none !important;
}

.abslute-wrap img.right-two {
    display: none !important;
}

.abslute-wrap img.left-three {
    width: 44% !important;
}

.abslute-wrap img.right-three {
    width: 34% !important;
}
}

a.book-button {
    text-decoration: none;
    color: #000;
    background: #fff;
    display: inline-block;
    padding: 20px;
    border-radius: 40px;
    font-family: 'Luckiest Guy';
    font-weight: 200;
    font-size: 18px;
    transition: 0.4s;
}
a.book-button:hover {
    background: #000;
    color: #fff;
}
.character-item a {
    text-decoration: none;
}

@media (max-width: 1200px){
    section.banner-section.about_banner_new img.single_left_banner{width: 38rem;}
    .about_banner_new::before{bottom: -50px;}
    img.left-one{width: 15rem !important;}
    img.right-one{width: 22rem !important;}
    img.left-two {width: 21rem !important;bottom: 43%;}
    img.right-two{width: 18rem !important;}
}

@media (max-width: 991px) {
    section.banner-section.banner_new_home img.single_right_banner {
        bottom: -30px;
        width: 33rem;
        right: 70px;
    }
    .banner_new_home::before {width: 22%;height: 30%;}
    section.book-section img {
        width: 100%;
        margin-bottom: 20px;
    }
    section.banner-section.about_banner_new {
        padding: 280px 0 400px;
    }
    .about_banner_new::before {
        bottom: -100px;
    }
    section.banner-section.about_banner_new img.single_left_banner {
        width: 23rem;
        left: unset;
        right: 100px;
    }
    .bikeround img {
        width: 90% !important;
    }
    img.left-three {
        width: 26% !important;
    }
    img.right-three {
        width: 28% !important;
    }
    img.left-two {
        width: 19rem !important;
    }
    img.right-two {
        width: 12rem !important;
    }
    .character-name{
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .crafts-content {
        height: unset;
    }
}
.header:has(.navbar-toggler:not(.collapsed)) {
    z-index: 9999;
    /*position: relative;*/
}
.header:has(.navbar-collapse.show) {
    z-index: 9999999;
    /*position: relative;*/
}