/* 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 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        /* margin: 20px 0; */
        justify-content: center;
    }
    .download-app-section .section-image {
        content: url("../images/section-1-mobile-01.jpg");
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    .qr-codes-container {
        position: absolute;
        bottom: 14%; 
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        display: none;
        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;
    }

    .promo-label {
        bottom: 5%;
        position: absolute;
        display: flex;
        font-family: 'Poppins', sans-serif; /* Similar to your landing page style */
        font-size: 36px; /* Adjust as needed */
        color: #33131A; /* Accent color matching the theme */
        text-align: center;
        justify-content: center;
        margin: 20px;
        font-weight: bold;
        width: 90%;
    }

    .download-btn {
        margin: 20px;
        position: relative;
        left: 15%;
        padding: 14px 26px;
        font-size: 1.0rem;
    }

    /* Centered Section Styling */
    .centered-section {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px; /* Spacing between steps */
        /* margin: 20px 0; */
        justify-content: center;
        overflow: hidden;
    }

    .centered-section .section-image {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .steps {
        position: absolute;
        width: 90%;
        height: 100%;
        overflow: hidden;
    }

    .step {
        overflow: hidden;
        width: 100%;
        display: flex;
        flex-direction: column; /* Stack label on top of the button */
        align-items: center;
        justify-content: center;
        gap: 10px; /* Space between label and button */
    }

    .step-referral-code {
        width: 80%;
        gap: 20px;
        overflow: hidden;
    }

    /* Label Styling */
    .step-label {
        display: flex;
        font-family: 'Poppins', sans-serif; /* Similar to your landing page style */
        font-size: 36px; /* Adjust as needed */
        color: #33131A; /* Accent color matching the theme */
        text-align: center;
        justify-content: center;
        margin: 10px;
        font-weight: bold;
        width: 100%;
    }

    .step-divider {
        width: 80%; /* Adjust width to your requirement */
        border: 0;
        border-top: 1px solid #33131A; /* Divider color */
        transform: translateX(12%); /* Shift back to actual center */
        top: auto; /* Set a specific position if needed */
        margin: 25px 0; /* Reset any conflicting margin styles */
    }

    .referral-input {
        color: #4A2F2A;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 50px;
        /* border-color: grey; */
        padding: 8px 20px;
        font-size: 0.8rem;
        transition: all 0.3s ease; 
    }

    .referral-input:focus{
        border-color: grey;
    }

    /* Button Styling */
    .copy-button, .download-button {
        background-color: #4A2F2A;
        color: #E5B274;
        font-size: 1rem;
        font-weight: 600;
        border-radius: 50px;
        text-transform: uppercase;
        border: none;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease; 
        padding: 10px 20px;
        font-size: 0.8rem;
        margin-bottom: 10px;
    }

    .copy-button:hover, .download-button:hover {
        transform: scale(1.05); 
        background-color: #4A2F2A;
        color: #E5B274;
    }

    .centered-section .screenshot-image {
        width: 80%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    .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 */
    }
    .promo-label {
        bottom: 5%;
        font-size: 30px; /* Adjust as needed */
    }
    .step-label {
        font-size: 28px; /* Adjust as needed */
    }
    .step-divider {
        margin: 15px 0;
    }
    .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;
    }
    .promo-label {
        bottom: 0%;
        font-size: 26px; /* Adjust as needed */
    }
    .step-label {
        font-size: 22px; /* Adjust as needed */
    }
    .referral-input {
        padding: 8px 16px;
        font-size: 0.7rem;
        max-width: 150px;
    }
    .copy-button, .download-button {
        padding: 8px 16px;
        font-size: 0.7rem;
    }
    .centered-section .screenshot-image {
        width: 70%;
    }
    .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;
    }
    .promo-label {
        font-size: 22px; /* Adjust as needed */
    }
    .step-label {
        font-size: 16px; /* Adjust as needed */
    }
    .referral-input {
        padding: 5px 10px;
        font-size: 0.5rem;
        max-width: 110px;
    }
    .copy-button, .download-button {
        padding: 5px 10px;
        font-size: 0.5rem;
    }
    .centered-section .screenshot-image {
        width: 60%;
    }
    .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;
    }
}