/* ===========================
   FULL MOBILE RESPONSIVE FIX
   =========================== */

@media (max-width: 768px) {
    /* Header */
    .header-container {
        padding: 12px 15px;
    }
    .logo img {
        width: 120px;
    }
    .image-carousel .carousel-container .row {
        flex-direction: column;
    }

    /* Banner */
    .banner {
        height: auto;
        padding: 40px 0;
        text-align: center;
    }
    .our-umrah-image {
        width: 100%;
        height: auto;
        margin: 20px auto 0;
    }
    .our-umrah-image img {
        width: 80%;
        margin: auto;
    }
    .banner-content {
        width: 100%;
        height: auto;
        align-items: center;
        text-align: center;
        padding: 20px;
    }
    .banner-content h2 {
        font-size: 28px;
        text-align: center;
    }
    .banner-content p {
        font-size: 14px;
        text-align: center;
        padding-left: 0;
        border: none;
    }

    /* About Section */
    .about-part {
        margin-top: 40px;
        padding: 20px;
    }
    .about-right-image {
        width: 100%;
        margin-left: 0;
        height: auto;
    }
    .about-right-image img {
        height: auto;
        border-radius: 20px;
    }

    /* Image Carousel */
    .carousel-container {
        /* flex-wrap: wrap; */
        display: flex !important;
        justify-content: center;
        gap: 15px;
    }

    .carousel-content {
        padding: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between !important;
        align-items: center;
        gap: 30px;
        overflow-x: scroll;

        .carousel-elm {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-width: max-content;

            p {
              min-width: 100%;
            }
        }
    }
    .carousel-image {
        width: 100px;
    }
    .about-part .about-contant h3 {
        font-size: 30px;
    }
    .about-left {
        margin-bottom: 50px;
    }

    /* Special Offer */
    .special-container {
        padding: 15px;
        border-radius: 20px;
    }
    .offer-list li {
        width: 100%;
        gap: 15px;
    }

    /* Journey Section */
    .journey-container {
        flex-direction: column;
        text-align: center;
    }

    .journey-cirle {
        padding: 0;
        margin: 0;
    }
    .journey-image-down {
        margin-bottom: 50px;
    }
    .journey-contant {
        padding-left: 0;
        margin-top: 20px;
    }
    .journey .journey-down-contant h5 {
        width: 100%;
    }

    /* Counter Section */
    .counting-container {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .count-text::after {
        display: none !important;
    }

    /* Packages */
    .packege-part {
        margin-bottom: 20px;
    }
    .packege-list li {
        width: 100%;
        gap: 15px;
    }

    /* Video Section */
    .video-section {
        height: auto;
        padding: 50px 0;
    }
    .video-content h1 {
        width: 100%;
        font-size: 22px;
    }
    .video-btn {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .video-btn button {
        width: 60%;
    }

    /* Contact Section */
    .contact-container {
        flex-direction: column;
        text-align: center;
    }
    .contact-us-image img {
        height: auto;
    }
    .contact-form {
        width: 100%;
    }
    .contact-form .form-labl {
        text-align: left;
    }
}

/* Extra small screen fix (max-width: 480px) */
@media (max-width: 480px) {
    .banner-content h2 {
        font-size: 22px;
    }
    .banner-content p {
        font-size: 13px;
    }

    .journey-contant h2,
    .packege-container h2,
    .contact-us-contant h2 {
        font-size: 28px !important;
        text-align: center;
    }

    .video-content p {
        font-size: 14px;
    }

    .video-btn button {
        width: 100%;
    }

    #videoBtn {
        width: 50px;
        height: 50px;
    }
}