/* For tablets (992px and below) */
@media (max-width: 992px) {
    .container-main {
        max-width: 992px;
    }

    .topnav {
        padding: 12px 0px;
        font-size: 12px;
    }

        .topnav .logo {
            width: 30%;
        }

        .topnav .menu {
            display: none;
            height: 90vh;
            width: 300px;
            padding: 30px;
        }

    .menu-button {
        display: flex;
        margin-right: 5%;
    }

    #Hero {
        flex-direction: column;
        height: auto;
    }

    .hero-left {
        height: auto;
        width: 100%;
        border-radius: 0;
    }

    .hero-left-inner {
        width: 90%;
        padding-left: 150px;
    }

        .hero-left-inner p {
            font-size: 14px;
            width: 100%;
        }

        .hero-left-inner h3 {
            font-size: 40px;
            line-height: 1.3;
            width: 40%;
        }

    #find-store-btn {
        font-size: 14px;
        padding: 12px 14px;
    }

    .hero-right {
        width: 100%;
        height: auto;
    }

    #slider {
        margin: 120px 0px;
    }

    #slide {
        gap: 20px;
        padding: 50px;
    }

    #advertisement {
        height: 100vh;
    }

    #advertisement-header {
        height: 15%;
        padding: 20px;
    }

    #advertisement-headding {
        font-size: 28px;
    }

    #advertisement-poster {
        height: 85%;
    }

    .brand-name h1 {
        font-size: 30px;
    }

    .brand-name p {
        font-size: 12px;
    }

    /* AcerIndiaSupport */

    #support-header {
        height: 15%;
        padding: 60px;
    }

    /* Acer Bangladesh Support */
    #Bangleshsupport-header {
        height: 70vh;
    }

    #Support_Hero {
        display: block;
    }

    #Support_Hero-left {
        width: 100%;
        max-width: 992px;
    }

    #Support_Hero-right {
        width: 100%;
        max-width: 992px;
    }
}

@media (max-width: 768px) {
    .container-main {
        max-width: 768px;
        width: auto;
        height: auto;
    }

    .topnav {
        padding: 8px 0px;
        font-size: 12px;
    }

        .topnav .logo {
            width: 30%;
        }

        .topnav .menu {
            display: none;
            height: 90vh;
            width: 300px;
            padding: 30px;
        }

    .menu-button {
        display: flex;
        margin-right: 5%;
    }

    #Hero {
        height: auto;
        width: 100%;
    }

    .hero-left {
        height: auto;
        padding: 40px;
    }

    .hero-left-inner {
        height: auto;
        width: 90%;
    }

        .hero-left-inner p {
            font-size: 12px;
            width: 100%;
        }

        .hero-left-inner h3 {
            margin: 5px 0px;
            font-size: 28px;
            line-height: 1.5;
            width: 200px;
        }

    #find-store-btn {
        font-size: 12px;
        padding: 10px 14px;
        border-radius: 8px;
        margin-top: 12px;
    }

    .hero-right {
        height: auto;
        padding: 40px;
    }

    #slider {
        margin: 0;
    }

    /* Card Styling */
    /* .content-card {
    width: 200px;
    height: 80%;
  } */

    /* .content-card a div {
    padding: 8px;
  } */

    /* .content-card a div h1 {
    font-size: 8px;
    text-transform: uppercase;
    margin: 5px 0;
  } */

    /* .content-card a div p {
    font-size: 12px;
  } */

    /* Navigation buttons styling */
    .nav-button {
        height: 40px;
        width: 16px;
    }

    #advertisement {
        max-height: 380px;
        width: 100%;
        height: 100%;
    }

    #advertisement-headding {
        font-size: 24px;
    }

    #poster-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    #footer {
        flex-direction: column;
        width: 100%;
        font-size: 12px;
    }

        #footer ul {
            width: 100%;
            height: auto;
        }

    #botton-menu {
        width: 100%;
    }

    .brand-name {
        width: 100%;
        font-size: 12px;
    }
}

/* For mobile devices (576px and below) */
@media (max-width: 576px) {
    .container-main {
        max-width: 576px;
    }

    .topnav {
        padding: 8px 0px;
        font-size: 12px;
    }

        .topnav .logo {
            width: 30%;
        }

        .topnav .menu {
            display: none;
            height: 90vh;
            width: 200px;
            padding: 30px;
            overflow-x: hidden;
        }

    .menu-button {
        display: flex;
        margin-right: 5%;
    }

    #Hero {
        max-height: 1000px;
        flex-direction: column;
    }

    .hero-left {
        width: 100%;
        height: 50%;
        padding: 20px;
    }

    .hero-left-inner {
        width: 90%;
        height: 100%;
    }

        .hero-left-inner p {
            font-size: 12px;
            width: 100%;
        }

        .hero-left-inner h3 {
            margin: 5px 0px;
            font-size: 28px;
            line-height: 1.2;
            width: 100%;
        }

    #find-store-btn {
        font-size: 12px;
        padding: 12px 16px;
        margin-top: 10px;
    }

    .hero-right {
        width: 100%;
        height: 50%;
        padding: 30px;
    }

    /* Card Styling */
    .content-card {
        width: 250px;
        height: 80%;
    }

        .content-card a div {
            padding: 10px;
        }

            .content-card a div h1 {
                font-size: 8px;
                margin: 5px 0;
            }

            .content-card a div p {
                font-size: 12px;
            }

    /* Navigation buttons styling */
    .nav-button {
        height: 40px;
        width: 16px;
    }

    #advertisement {
        max-height: 300px;
    }

    #advertisement-headding {
        font-size: 24px;
    }

    #footer {
        flex-direction: column;
        width: 100%;
        font-size: 8px;
    }

        #footer ul {
            width: 100%;
            height: auto;
            gap: 5px;
            line-height: 1.5;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

    #botton-menu {
        width: 100%;
    }

    .brand-name {
        width: 100%;
        font-size: 12px;
    }

    #social-media {
        width: 30%;
        justify-content: center;
        gap: 10px;
    }


    /* AcerIndiaSupport */

    #support-header {
        height: 6%;
        padding: 12px;
    }

    #Bangleshsupport-header {
        height: 40vh;
    }
}

/* Extra small devices (360px and below) */
@media (max-width: 360px) {
    .container-main {
        min-width: 300px;
        max-width: 360px;
    }

    .topnav {
        font-size: 12px;
    }

        .topnav .logo {
            width: 50%;
        }

        .topnav .menu {
            display: none;
            height: 90vh;
            width: 200px;
            padding: 30px;
        }

    .menu-button {
        display: flex;
        margin-right: 5%;
    }

    #Hero {
        height: auto;
        max-height: 500px;
        flex-direction: column;
    }

    .hero-left {
        width: 100%;
        height: 50%;
        padding: 20px;
        background-size: 140%;
    }

    .hero-left-inner {
        width: 90%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
    }

        .hero-left-inner p {
            font-size: 10px;
            width: 100%;
        }

        .hero-left-inner h3 {
            /* margin: 5px 0px; */
            font-size: 20px;
            line-height: 1.1;
            width: 100%;
        }

    #find-store-btn {
        font-size: 12px;
        padding: 11px 14px;
        margin-top: 10px;
    }

    .hero-right {
        width: 100%;
        height: 50%;
        padding: 30px;
    }

    /* Card Styling */
    .content-card {
        width: 250px;
        height: 80%;
    }

        .content-card a div {
            padding: 10px;
        }

            .content-card a div h1 {
                font-size: 8px;
                margin: 5px 0;
            }

            .content-card a div p {
                font-size: 12px;
            }

    /* Navigation buttons styling */
    .nav-button {
        height: 40px;
        width: 16px;
    }

    #advertisement {
        max-height: 300px;
    }

    #advertisement-headding {
        font-size: 24px;
    }

    #footer {
        flex-direction: column;
        width: 100%;
        font-size: 8px;
    }

        #footer ul {
            width: 100%;
            height: auto;
            gap: 5px;
            line-height: 1.5;
        }

    #botton-menu {
        width: 100%;
    }

    .brand-name {
        width: 100%;
        font-size: 12px;
    }
}