@media (max-width: 667px) {
        .font_size{
            font-size: 12px !important;
        }
        .join_btn{
            display: block;
            width: 100%;
        }

    }
    @media (min-width: 668px) and (max-width: 1920px) {
        .font_size{
            font-size: 20px !important;
        }
    }

    .join_btn{
        background-color: #04472d;
        color: #fff;
        border-radius: 5px;
    }

    .join_btn:hover{
        background-color: #e6f9d6;
        color: #04472d;
    }

    .ytp-chrome-top-buttons {
        display: none !important;
    }

    .middle-banner-wrapper {
        height: 300px;
    }

    /*@media (max-width: 768px) {*/
    /*    .middle-banner-wrapper {*/
    /*        height: 250px;*/
    /*    }*/
    /*}*/

    @media (max-width: 500px) {
        .middle-banner-wrapper .tags_explore h3 {
            font-size: 17px;
        }
        .middle-banner-wrapper .tags_explore p {
            font-size: 13px;
            line-height: 1rem;
            margin-top: 10px;
        }
        .middle-banner-wrapper .tags_explore {
            padding: 5px 0px;
        }
    }

    .review-carousel {
        display: block;
    }

    .review-item {
        text-align: center;
        margin: 10px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 10px;
        background: #fff;
    }
    .testimonial-carousel {
        position: relative;
        padding: 50px 0px;
    }

    .testimonial-slider {
        display: flex;
        overflow: hidden;
    }

    .review-carousel {
        display: flex;
        min-height: 220px;
    }

    .testimonial-card {
        width: 100%;
        padding: 20px;
        text-align: center;
    }

    .testimonial-card img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 10px;
    }

    .testimonial-card h5 {
        font-weight: 600;
        margin-bottom: 10px;
    }

    .testimonial-card p {
        font-size: 14px;
        color: #666;
    }


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

    .category-item {
        position: relative;
        padding: 10px;
    }

    .subcategory-list {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background: white;
        border: 1px solid #ddd;
        min-width: 200px;
        padding: 10px;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
        z-index: 10000;
    }

    .category-item:hover .subcategory-list {
        display: block;
    }

    .home-slider {
        position: relative;
        z-index: 1;
    }

    /* Styling for second slider */
    .image-slider .slick-prev,
    .image-slider .slick-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        z-index: 10;
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        font-size: 18px;
    }

    .image-slider .slick-prev:hover,
    .image-slider .slick-next:hover {
        background: rgba(0, 0, 0, 0.8);
    }

    .image-slider .slick-prev {
        left: -10px;
    }

    .image-slider .slick-next {
        right: -10px;
    }

    /* Remove default slick arrows */
    .image-slider .slick-prev:before,
    .image-slider .slick-next:before {
        content: none !important;
    }

    /* Dots */
    .image-slider .slick-dots {
        bottom: -30px;
    }

    .image-slider .slick-dots li button:before {
        color: #000;
        font-size: 10px;
    }

    .image-slider .slick-dots li.slick-active button:before {
        color: #ffcc00;
    }

    /* Optional image styling */
    .image-slider img {
        width: 100%;
        padding: 0px 10px;
        border-radius: 10px !important;
    }


    /* Custom arrow buttons */
    .slick-prev, .slick-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border: none;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        z-index: 10;
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        font-size: 20px;
    }

    .slick-prev:hover, .slick-next:hover {
        background: rgba(0, 0, 0, 0.8);
    }

    .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
        color: #fff;
        outline: none;
        background: rgba(0, 0, 0, 0.8);
    }

    .slick-prev {
        left: 15px;
    }

    .slick-next {
        right: 15px;
    }

    /* ❌ Remove Slick default icons */
    .slick-prev:before,
    .slick-next:before {
        content: none !important;
    }

    /* Dots styling */
    .slick-dots {
        bottom: 15px;
    }

    .slick-dots li button:before {
        color: #fff;
        font-size: 12px;
    }

    .slick-dots li.slick-active button:before {
        color: #ffcc00;
    }

    /* Remove outline when clicking arrows */
    .slick-prev:focus, .slick-next:focus {
        outline: none;
    }

    /* Overlay effect */
    .overlay-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6); /* adjust opacity for darkness */
        z-index: 1;
    }

    /* Ensure text stays above overlay */
    .overlay-section .container {
        position: relative;
        z-index: 2;
    }


    section.video-section {
        padding: 60px 0;
        background-color: #f9f9f9;
        position: relative;
        /* top: 200px; */
        padding-bottom: 100px;
    }

    .video-slider .slick-prev,
    .video-slider .slick-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border: none;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        z-index: 10;
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
        font-size: 20px;
    }

    .video-slider .slick-prev:hover,
    .video-slider .slick-next:hover {
        background: rgba(0, 0, 0, 0.8);
    }

    .video-slider .slick-prev {
        left: 10px;
    }

    .video-slider .slick-next {
        right: 10px;
    }

    /* Remove default slick icons */
    .video-slider .slick-prev:before,
    .video-slider .slick-next:before {
        content: none !important;
    }

    .video-slider .slick-dots {
        bottom: -35px;
    }

    .video-slider .slick-dots li button:before {
        color: #000;
        font-size: 10px;
    }

    .video-slider .slick-dots li.slick-active button:before {
        color: #ffcc00;
    }

    .video-thumb {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        cursor: pointer;
    }

    .video-thumb img {
        width: 100%;
        /* height: auto; */
        /*height: 600px;*/
        border-radius: 12px;
        transition: transform 0.4s;
    }

    .video-thumb:hover img {
        transform: scale(1.05);
    }

    .video-thumb .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.7);
        border-radius: 50%;
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28px;
        transition: 0.3s;
    }

    .video-thumb:hover .play-btn {
        background: rgba(255, 0, 0, 0.8);
        transform: translate(-50%, -50%) scale(1.1);
    }


    @media (min-width: 992px) {
        .slider, .slide {
            height: 80vh;
        }
    }

    .slide {
        position: relative;
    }
    .slide .slide__img {
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    @media (min-width: 992px) {
        .slide .slide__img {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }
    .slide .slide__img img {
        max-width: 100%;
        height: auto;
        opacity: 1 !important;
        animation-duration: 3s;
        transition: all 1s ease;
    }
    .slide .slide__content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .slide .slide__content.slide__content__left {
        left: 15%;
        transform: translate(-15%, -50%);
    }
    .slide .slide__content.slide__content__right {
        right: 15%;
        left: auto;
        transform: translate(5%, -50%);
    }
    .slide .slide__content--headings {
        color: #FFF;
    }
    .slide .slide__content--headings h2 {
        font-size: 4.5rem;
        margin: 10px 0;
    }
    .slide .slide__content--headings .animated {
        transition: all 0.5s ease;
    }
    .slide .slide__content--headings .top-title {
        font-family: "Playball", cursive;
        font-size: 2.5rem;
    }
    .slide .slide__content--headings .title {
        font-size: 3.5rem;
    }
    .slide .slide__content--headings .button-custom {
        text-decoration: none;
        color: #333;
        padding: 1.2rem 2.5rem;
        font-size: 1.5rem;
    }

    .slider [data-animation-in] {
        opacity: 0;
        animation-duration: 1.5s;
        transition: opacity 0.5s ease 0.3s;
    }

    .slick-dotted .slick-slider {
        margin-bottom: 30px;
    }

    .slick-dots {
        position: absolute;
        bottom: 25px;
        list-style: none;
        display: block;
        text-align: center;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .slick-dots li {
        position: relative;
        display: inline-block;
        margin: 0 5px;
        padding: 0;
        cursor: pointer;
    }
    .slick-dots li button {
        border: 0;
        display: block;
        outline: none;
        line-height: 0px;
        font-size: 0px;
        color: transparent;
        padding: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .slick-dots li button:hover, .slick-dots li button:focus {
        outline: none;
    }

    .simple-dots .slick-dots li {
        width: 20px;
        height: 20px;
    }
    .simple-dots .slick-dots li button {
        border-radius: 50%;
        background-color: white;
        opacity: 0.25;
        width: 20px;
        height: 20px;
    }
    .simple-dots .slick-dots li button:hover, .simple-dots .slick-dots li button:focus {
        opacity: 1;
    }
    .simple-dots .slick-dots li.slick-active button {
        color: white;
        opacity: 0.75;
    }

    .stick-dots .slick-dots li {
        height: 3px;
        width: 50px;
    }
    .stick-dots .slick-dots li button {
        position: relative;
        background-color: white;
        opacity: 0.25;
        width: 50px;
        height: 3px;
        padding: 0;
    }
    .stick-dots .slick-dots li button:hover, .stick-dots .slick-dots li button:focus {
        opacity: 1;
    }
    .stick-dots .slick-dots li.slick-active button {
        color: white;
        opacity: 0.75;
    }
    .stick-dots .slick-dots li.slick-active button:hover, .stick-dots .slick-dots li.slick-active button:focus {
        opacity: 1;
    }

    /* /////////// IMAGE ZOOM /////////// */
    @keyframes zoomInImage {
        from {
            transform: scale3d(1, 1, 1);
        }
        to {
            transform: scale3d(1.1, 1.1, 1.1);
        }
    }
    .zoomInImage {
        animation-name: zoomInImage;
    }

    @keyframes zoomOutImage {
        from {
            transform: scale3d(1.1, 1.1, 1.1);
        }
        to {
            transform: scale3d(1, 1, 1);
        }
    }
    .zoomOutImage {
        animation-name: zoomOutImage;
    }

    .slick-nav {
        --active: #fff;
        --border: rgba(255, 255, 255, .12);
        width: 44px;
        height: 44px;
        position: absolute;
        cursor: pointer;
        top: calc(50% - 44px);
    }
    
    
    .slick-nav.prev-arrow {
        left: 3%;
        transform: scaleX(-1);
        z-index: 999;
    }
    .slick-nav.next-arrow {
        left: auto;
        right: 3%;
    }
    .slick-nav i {
        display: block;
        position: absolute;
        margin: -10px 0 0 -10px;
        width: 20px;
        height: 20px;
        left: 50%;
        top: 50%;
    }
    .slick-nav i:before, .slick-nav i:after {
        content: "";
        width: 10px;
        height: 2px;
        border-radius: 1px;
        position: absolute;
        left: 50%;
        top: 50%;
        background: var(--active);
        margin: -1px 0 0 -5px;
        display: block;
        transform-origin: 9px 50%;
    }
    .slick-nav i:before {
        transform: rotate(-40deg);
    }
    .slick-nav i:after {
        transform: rotate(40deg);
    }
    .slick-nav:before, .slick-nav:after {
        content: "";
        display: block;
        position: absolute;
        left: 1px;
        right: 1px;
        top: 1px;
        bottom: 1px;
        border-radius: 50%;
        border: 2px solid var(--border);
    }
    .slick-nav svg {
        width: 44px;
        height: 44px;
        display: block;
        position: relative;
        z-index: 1;
        color: var(--active);
        stroke-width: 2px;
        stroke-dashoffset: 126;
        stroke-dasharray: 126 126 0;
        transform: rotate(0deg);
    }
    
    .slick-nav.animate svg {
        animation: stroke 1s ease forwards 0.3s;
    }
    .slick-nav.animate i {
        animation: arrow 1.6s ease forwards;
    }
    .slick-nav.animate i:before {
        animation: arrowUp 1.6s ease forwards;
    }
    .slick-nav.animate i:after {
        animation: arrowDown 1.6s ease forwards;
    }

    @keyframes stroke {
        52% {
            transform: rotate(-180deg);
            stroke-dashoffset: 0;
        }
        52.1% {
            transform: rotate(-360deg);
            stroke-dashoffset: 0;
        }
        100% {
            transform: rotate(-180deg);
            stroke-dashoffset: 126;
        }
    }
    @keyframes arrow {
        0%, 100% {
            transform: translateX(0);
            opacity: 1;
        }
        23% {
            transform: translateX(17px);
            opacity: 1;
        }
        24%, 80% {
            transform: translateX(-22px);
            opacity: 0;
        }
        81% {
            opacity: 1;
            transform: translateX(-22px);
        }
    }
    @keyframes arrowUp {
        0%, 100% {
            transform: rotate(-40deg) scaleX(1);
        }
        20%, 80% {
            transform: rotate(0deg) scaleX(0.1);
        }
    }
    @keyframes arrowDown {
        0%, 100% {
            transform: rotate(40deg) scaleX(1);
        }
        20%, 80% {
            transform: rotate(0deg) scaleX(0.1);
        }
    }