/* Default styles for large screens ----------------------------------------------------------------------------------------------------- */

/* Extra Large Screens (TVs, 4K displays, 1440px and above) */
@media (min-width: 1440px) {}




/* Large Screens (Laptops, Desktops, 1200px to 1439px) */
@media (max-width: 1439px) {}




/* Medium Screens (Tablets, Small Laptops, 992px to 1199px) */
@media (max-width: 1199px) {
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }
    h3{ font-size: 35px; }
    h4 { font-size: 30px; }
    h5 { font-size: 22px; }
    
    .Herosection{ height: 500px; }
    .heroimg{ width:35%; }
    .grid-container{ height: 350px;  gap: 5px; }
}



/* Small Screens (Tablets, Large Phones, 768px to 991px) ------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 991px) {
    h1 { font-size: 32px; }
    h2 { font-size: 20px; }
    h3{ font-size: 22px; }
    h4 { font-size: 20px; }
    h5 { font-size: 16px; }
    p{ font-size: 16px; line-height: 25px; }
    
    .Herosection{ height: 400px; }
    .heroimg{ width:40%; }
    .grid-container{ height: 250px;  gap: 5px; }

}



/* Extra Small Screens (Portrait Tablets, Small Phones, 576px to 767px)-------------------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 767px) {
    h1 { font-size: 32px; }
    h2 { font-size: 20px; }
    h3{ font-size: 22px; }
    h4 { font-size: 18px; }
    h5 { font-size: 16px; }
    p{ font-size: 14px; line-height: 20px; }
    .Herosection{ height: 300px; }
    .heroimg{ width:40%; }
    .buyit #arrow{ display: none; }
    .grid-container{ height: 250px;  gap: 5px; }

    .popup-content{ height: auto; }
}



/* Very Small Screens (Mobile Phones, 320px to 575px) ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .mobNav, .repon_menu {
        display: block;
    }

    .menu {
        display: none;
    }

    .repon_menu {
        width: 70%;
    }
    .buyit{ display: none; }
    .Herosection{ height: auto; }
    .heroimg{ width:100%; }
    .heroimg{ position: relative;}
    .section h2{ padding: 10px 0px 10px 0px;
        border-left: none; }

        .popup-content{ height: auto; }
}




/* Ultra Small Screens (Old mobile devices, 320px and below) ----------------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 320px) {
    .mobNav, .repon_menu{
        display: block;
    }

    .menu {
        display: none;
    }

    .repon_menu {
        width: 80%;
    }
    .buyit{ display: none; }
    .Herosection{ height: auto; }
    .heroimg{ width:100%; }
    .heroimg{ position: relative;}
    .grid-container{ height: 150px; gap: 2px; }

    .section h2{ padding: 10px 0px 10px 0px;
        border-left: none; }

        .popup-content{ height: auto; }
}






/* Orientation-based Queries */

/* Landscape mode (for all devices) */
@media (orientation: landscape) {}


/* Portrait mode (for all devices) */
@media (orientation: portrait) {}


/* Mobile Phones in Landscape */
@media (max-width: 767px) and (orientation: landscape) {

}


/* Mobile Phones in Portrait */
@media (max-width: 767px) and (orientation: portrait) {
    .mobNav, .repon_menu {
        display: block;
    }

    .menu {
        display: none;
    }
}









/* Tablets in Landscape */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {}

/* Tablets in Portrait */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    .mobNav, .repon_menu {
        display: block;
    }

    .menu {
        display: none;
    }
}