﻿@media (max-width: 1200px) {
    body {

        background: url("../../willbetgamebettingsa/image/main_mobile.jpg") no-repeat top center #e4ddc4;
        background-size: contain;
    }

    header {
        height: 14.8150vw;
        background: rgba(0, 0, 0, 0);
    }

    .logo {
        display: none;
    }

    .logomobile {
        height: 12.687vw;
        width: 43.272vw;
        margin: 1.66vw 0 0 1.33vw;
        display: block;
    }

    .header-btns {
        margin: 0 3.2vw 0 auto;
        order: 2;
    }

    .btn-signup {
        width: 24vw;
        height: 8.26vw;
        margin: 4.26vw 0 0 1.6vw;
        font-size: 3.2vw;
        border-radius: 5.25vw;
    }

    .btn-login {
        width: 24vw;
        height: 8.26vw;
        margin: 4.26vw 0 0 1.6vw;
        font-size: 3.2vw;
        border-width: 2px;
        border-radius: 5.25vw;
        border-color: #fff;
        color: #fff;
    }

    .btn-cta {
        width: 53.33vw;
        height: 10.8vw;
        font-size: 4.369vw;
        margin: 0 auto;
    }

    .hero-text {

        width: 100vw;
        line-height: 7.46vw;
        overflow: hidden;
        white-space: nowrap;
        margin-top: 5vw;
        gap: 2vw;
        margin-bottom: 50vw;
    }

    .hero-text .p1 {
        font-size: 6.282vw;
        line-height: 1;
        color: #fff;
        margin-top: 1vw;
    }

    span.herotext {
        font: normal normal 800 8.922vw/9.893vw Montserrat;
        letter-spacing: 0px;
        color: #fff;
        text-shadow: 3px 3px 2px #FFFFFF42;
        opacity: 1;
        width: 93vw;
    }

    .hero .btn-cta {
        width: 57.33vw;
        height: 13vw;
        margin: 3vw 0vw 10vw;
        border-radius: 8vw;
    }

    footer {
        font-size: 3.2vw;
        /* padding-top: 106vw; */
        line-height: 5.094vw;
    }

    footer p {
        padding: 0 2vw;
    }

    div#footerLinks {
        display: block;
    }

    .img-fluid {
        max-width: 100%;
        height: auto;
        width: 28vw;
        padding: 0 2vw;
    }

    .games-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns */
        gap: 3vw;
        /* Adjust gap between cards */
    }

    .game-card img {
        border-radius: 4vw;
    }

    .slots-section h2 {

        font: normal normal 700 4.46vw/5.177vw Montserrat;
    }

    .game-card {
        width: auto;
        /* Automatically adjust to grid */
        padding: 2vw;
        background: none;
        border: none;
        box-shadow: none;
    }

    .game-card:hover {
        transform: translateY(-0.26vw);
        box-shadow: none;
    }

    .game-card h3 {
        font-size: 4vw;
        /* Adjust font size for smaller screens */
        margin: 1vw 0;
    }

    .game-card p {
        font-size: 3vw;
        font-weight: 600;
    }

    .slider-row {
        /* Use a grid with 4 columns, so each image is one column */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        align-items: center;
    }

    .slider-row img {
        /* Possibly shrink them a bit for smaller screens */
        height: 15vw;
        margin: 2vw 0;
        width: auto;
    }

    .image-slider h2 {
        font: normal normal 700 4.5vw/6vw Montserrat;
    }

    .testimonial {
        flex: 0 0 98%;
        width: 100%;
        height: 70vw;
        padding: 7vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 5vw;
    }

    .testimonials-section h2 {
        font-size: 4.5vw;
        margin: 2vw 0;
        text-align: center;
    }

    .testimonial-text {
        font-size: 5vw;
    }

    .testimonial strong {
        font-size: 4vw;
    }

    .slider-btn img {
        width: 8vw;
        height: 8vw;
    }

    .testimonial-img {
        margin-bottom: 1vw;
        width: 8vw;
        height: 8vw;
    }
}

@media (min-width: 700px) and (max-width: 1200px) {
    body {
        background: url("../../willbetgamebettingsa/image/main_mobile.jpg") no-repeat top center #e4ddc4;
        background-size: contain;
    }

    .hero-text a {
        margin-top: 1vw;
    }

    .hero-text .p1 {
        font-size: 7vw;
        margin-top: 1vw;
    }
}
