/* Adjust button size based on screen size */
@media (max-width: 1408px) {
    .qr-code-item img {
        max-width: 88px;
    }
    .qr-code-item img:nth-child(2) {
        max-width: 130px; 
        margin-top: 4px;
    }
    .qr-code-item-2 img {
        max-width: 88px;
    }
    .qr-code-item-2 img:nth-child(2) {
        max-width: 130px; 
        margin-top: 4px;
    }
}

@media (max-width: 1200px) {
    .qr-codes-container {
        bottom: 25%;
    }
    .qr-code-item img {
        max-width: 83px; 
    }
    .qr-code-item img:nth-child(2) {
        max-width: 130px; 
        margin-top: 4px; 
    }
    .qr-codes-container-2 {
        bottom: 30%;
    }
    .qr-code-item-2 img {
        max-width: 83px; 
    }
    .qr-code-item-2 img:nth-child(2) {
        max-width: 130px; 
        margin-top: 4px; 
    }
}

@media (max-width: 1024px) {
    .qr-code-item img {
        max-width: 60px; 
    }
    .qr-code-item img:nth-child(2) {
        max-width: 100px; 
        margin-top: 8px; 
    }
    .qr-code-item-2 img {
        max-width: 60px; 
    }
    .qr-code-item-2 img:nth-child(2) {
        max-width: 100px; 
        margin-top: 8px; 
    }
    .download-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    .food-section {
        margin-top: 120px;
    }
    .instant-features-section .title img {
        max-width: 45%;
        margin-bottom: 40px;
    }
    .features {
        gap: 40px;
    }
    .feature {
        justify-content: center;
        width: 45%;
        gap: 10px;
    }
    .feature video {
        max-width: 85%;
        height: 240px;
        margin-bottom: 10px;
        gap: 10px;
    }
    .feature img {
        height: 65px;
    }
    .download-now-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
}

@media (max-width: 900px) {
    .qr-code-item img {
        max-width: 55px;
    }
    .qr-code-item img:nth-child(2) {
        max-width: 100px;
        margin-top: 4px;
    }
    .qr-code-item-2 img {
        max-width: 55px;
    }
    .qr-code-item-2 img:nth-child(2) {
        max-width: 100px;
        margin-top: 4px;
    }
}

@media (max-width: 768px) {
    .download-app-section .section-image {
        content: url("../images/section-1-mobile.png");
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .qr-codes-container {
        position: absolute;
        bottom: 14%; 
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        display: flex;
        justify-content: space-around;
    }
    .qr-code-item img {
        max-width: 100px;
        margin-bottom: 4px;
    }
    .qr-code-item img:nth-child(2) {
        max-width: 130px;
        margin-top: 3px;
    }
    .qr-codes-container-2 {
        left: 50%;
        transform: translateX(-50%);
        bottom: 30%;
        width: 85%;
        display: flex;
        justify-content: space-around; 
    }
    .qr-code-item-2 img {
        max-width: 100px;
        margin-bottom: 4px;
    }
    .qr-code-item-2 img:nth-child(2) {
        max-width: 130px;
        margin-top: 3px;
    }
    .download-btn {
        bottom: 9%;
        left: 50%;
        padding: 14px 26px;
        font-size: 1.0rem;
    }
    .coffee-section .background-image {
        content: url('../images/section-2-mobile.png');
    }
    .coffee-1 {
        content: url('../images/coffee-1-mobile.png');
        top: 15%;
        left: 0%;
        width: 100%;
    }
    
    .coffee-2 {
        content: url('../images/coffee-2-mobile.png');
        top: 46%;
        left: 0%;
        width: 100%;
    }
    
    .coffee-3 {
        content: url('../images/coffee-3-mobile.png');
        left: 0%;
        top: 63%;
        width: 100%;
    }
    .food-section {
        margin-top: 100px;
    }
    .food-section .food-image {
        content: url('../images/section-3-mobile.png');
    }
    .instant-features-section .title img {
        max-width: 80%;
        margin-bottom: 20px;
    }
    .features {
        display: flex;
        overflow: visible; /* Ensures only one slide shows at a time */
        width: 100%; /* Make sure features container takes full width */
        transition: transform 0.5s ease;
    }
    .feature {
        min-width: 100%; /* Each slide takes full viewport width */
        flex-shrink: 0;
        text-align: center;
    }
    .feature video {
        max-width: 80%;
        height: auto;
        margin: 0;
    }
    .feature img {
        max-width: 85%;
        height: 90%;
        margin: 0 auto;
    }
    .order img {
        content: url('../images/order-description-mobile.png');
    }
    
    .special img {
        content: url('../images/special-deals-description-mobile.png');
    }
    
    .seamless img {
        content: url('../images/seamless-payment-description-mobile.png');
    }
    .slider {
        display: block;
        position: relative;
    }
    .slider-dots {
        display: block;
        text-align: center;
        margin-top: 60px;
    }
    .slider-dots .dot {
        height: 15px;
        width: 15px;
        margin: 0 15px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
    }
    .dot.active {
        background-color: #000;
    }
    .new-user-perks-section .section-image {
        width: 100%;
        content: url('../images/section-5-mobile.png');
    }
    .download-now-section .section-image {
        content: url('../images/section-6-mobile.png');
    }
    .download-now-btn {
        padding: 14px 26px;
        font-size: 1.0rem;
    }
}

@media (max-width: 600px) {
    .qr-code-item img {
        max-width: 80px;
    }
    .qr-code-item img:nth-child(2) {
        max-width: 110px;
    }
    .qr-code-item-2 img {
        max-width: 80px;
    }
    .qr-code-item-2 img:nth-child(2) {
        max-width: 110px;
    }
    .perk-slide.left {
        left: -40%; /* Left position for left perk */
    }
    .perk-slide:nth-child(1).left {
        top: 34%;
    }
    .perk-slide:nth-child(2).left {
        top: 27%;
    }
    .perk-slide:nth-child(3).left {
        display: none;
        top: 37%;
    }
    .perk-slide.right {
        left: 70%; /* Right position for right perk */
    }
    .perk-slide:nth-child(1).right {
        display: none;
        top: 42%;
    }
    .perk-slide:nth-child(2).right {
        top: 27%;
    }
    .perk-slide:nth-child(3).right {
        top: 28%;
    }
    .perk-slide:nth-child(1).active {
        top: 23%;
    }
    .perk-slide:nth-child(2).active {
        top: 15%;
    }
    .perk-slide:nth-child(3).active {
        top: 18%;
    }
    .download-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
    .download-now-btn {
        padding: 10px 20px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .qr-code-item img {
        max-width: 60px;
    }
    .qr-code-item img:nth-child(2) {
        max-width: 90px;
    }
    .qr-code-item-2 img {
        max-width: 60px;
    }
    .qr-code-item-2 img:nth-child(2) {
        max-width: 90px;
    }
    .download-btn {
        padding: 8px 16px;
        font-size: 0.7rem;
    }
    .food-section {
        margin-top: 60px;
    }
    .instant-features-section .title img {
        margin-bottom: 30px; 
    }
    .slider-dots {
        margin-top: 10px;
    }
    .slider-dots .dot {
        height: 5px;
        width: 5px;
        margin: 0 5px
    }
    .perk-slide.left {
        left: -45%; /* Left position for left perk */
    }
    .perk-slide:nth-child(1).left {
        top: 28%;
    }
    .perk-slide:nth-child(2).left {
        top: 21%;
    }
    .perk-slide:nth-child(3).left {
        display: none;
        top: 37%;
    }
    .perk-slide.right {
        left: 65%; /* Right position for right perk */
    }
    .perk-slide:nth-child(1).right {
        display: none;
        top: 42%;
    }
    .perk-slide:nth-child(2).right {
        top: 20%;
    }
    .perk-slide:nth-child(3).right {
        top: 21%;
    }

    .perk-slide:nth-child(1).active {
        top: 12%;
    }
    .perk-slide:nth-child(2).active {
        top: 3%;
    }
    .perk-slide:nth-child(3).active {
        top: 6%;
    }
    .perk-dots {
        margin-top: 60px;
    }
    .perk-dot {
        height: 5px;
        width: 5px;
        margin: 0 5px
    }
    .download-now-btn {
        padding: 8px 16px;
        font-size: 0.7rem;
    }
}

@media (max-width: 320px) {
    .qr-code-item img {
        max-width: 35px;
    }
    .qr-code-item img:nth-child(2) {
        max-width: 65px;
    }
    .qr-code-item-2 img {
        max-width: 35px;
    }
    .qr-code-item-2 img:nth-child(2) {
        max-width: 65px;
    }
    .perk-slide.left {
        left: -50%; /* Left position for left perk */
    }
    .perk-slide:nth-child(1).left {
        top: 13%;
    }
    .perk-slide:nth-child(2).left {
        top: 6%;
    }
    .perk-slide:nth-child(3).left {
        display: none;
        top: 37%;
    }
    .perk-slide.right {
        left: 55%; /* Right position for right perk */
    }
    .perk-slide:nth-child(1).right {
        display: none;
        top: 42%;
    }
    .perk-slide:nth-child(2).right {
        top: 6%;
    }
    .perk-slide:nth-child(3).right {
        top: 6%;
    }
    .perk-slide:nth-child(1).active {
        top: -6%;
    }
    .perk-slide:nth-child(2).active {
        top: -17%;
    }
    .perk-slide:nth-child(3).active {
        top: -13%;
    }
    .download-btn {
        padding: 5px 10px;
        font-size: 0.5rem;
    }
    .download-now-btn {
        padding: 5px 10px;
        font-size: 0.5rem;
    }
}

@media (min-width: 769px) {
    .slider-dots {
        display: none;
    }
    .features {
        flex-direction: row;
        gap: 10px;
        justify-content: space-evenly;
    }
    .feature {
        max-width: 300px;
    }
    .perk-slider, .perk-dots {
        display: none;
    }
}