html {
    /* overflow-x: hidden; */
    /* Prevent horizontal scroll on the root */
}

body {
    margin: 0;
    /* overflow-x: hidden; */
}

/* .gw-main-banner {
    width: 100%;
    height: 700px;
    object-fit: cover;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    white-space: nowrap;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
 }

 .gw-main-banner img {
    display: inline-block;
    width: auto;
    height: 100%;
    margin-right: 10px;
 } */

.promotion-banner {
    z-index: 4;
    margin-bottom: 4%;
}

.promotion-banner2 {
    z-index: 4;
}

.img-banner {
    width: 100vw;
    height: 100px;
    /* Allow the image to fill the container */
    display: block;
    object-fit: cover;
    position: absolute;
    top: 150px;
    /* Added px unit */
}

/* Snowflake styles */

.snowflake {
    position: absolute;
    top: -10px;
    width: 10px;
    height: 10px;
    background-color: white;
    /* Change from image to a white circle */
    border-radius: 50%;
    /* Makes it round */
    opacity: 0.7;
    filter: blur(1px);
    z-index: 9999;
    animation: fall 10s linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-10px);
        /* Start just above the container */
    }

    100% {
        transform: translateY(100vh);
        /* End at the bottom of the viewport */
    }
}

/* Fade-out effect */
.fade-out {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* Main banner styles */
.gw-main-banner {
    position: relative;
    /* Make this a positioned element for the snowflakes to be positioned relative to */
    width: 100%;
    height: 480px;
    /* Set the height to control the image size */
    object-fit: cover;
    /* Ensure the image fills the container */
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* Prevent horizontal overflow */
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    /* Center the image if needed */
    align-items: center;
    /* Center content vertically */
    /* margin-bottom: 20px; */
}

.gw-main-banner-mobile {
    position: relative;
    width: 100%;
    /* height: 480px; */
    height: 76dvh;
    object-fit: cover;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-bottom: 20px; */
    display: none;
}

/* Styling for image inside the gw-main-banner */
.gw-main-banner img {
    display: block;
    /* Make the image behave as a block element */
    width: auto;
    /* Let the image adjust based on its aspect ratio */
    height: 100%;
    /* Make the image height 100% of the container */
}


.look-main-banner-mobile {
    margin: 8% 0;
    width: 100%;
    display: none; 
}

.look-main-banner {
    margin: 5% 0;
    width: 100%;
    display: block;
}



.web-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24%, 1fr));
    /* Create flexible grid */
    gap: 300px 10px;
    /* Spacing between cards */
    padding: 0px 4%;
    background-color: white;
    /* border-radius: 15px; */
    grid-auto-rows: 150px;
}

.web-products::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
    /* grid-column: span 1; */
    grid-column: 2 / -1;
    /* Ensures the grid layout stays intact */
}

.web-product-card {
    position: relative;
    height: 400px;
}

div.web-fav-icon {
    position: absolute;
    bottom: 10%;
    right: 10px;
    width: 7%;
    height: 7%;
    z-index: 1;
    background-image: url('img/icons/favB.png');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;

}

.footer-container {
    /* width: 100%; */
    /* height: 300px; */
    /* background-color: aqua; */
    /* padding: 20px 0; */
}

/* Mobile Styles */
@media (max-width : 440px) {
    .web-products {
        grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
        gap: 150px 10px;
    }

    .web-product-card {
        height: 290px;
    }

    .gw-main-banner {
        display: none;
    }

    .gw-main-banner-mobile {
        display: block;
    }

    .look-main-banner-mobile {
        display: block; /* Show mobile banner */
    }

    .look-main-banner {
        display: none; /* Hide desktop banner */
    }

}

@media (min-width: 441px) and (max-width : 500px) {
    .web-products {
        grid-template-columns: repeat(auto-fill, minmax(166px, 1fr));
        gap: 224px 10px;
    }

    .web-product-card {
        height: 360px;
    }

    .gw-main-banner {
        display: none;
    }

    .gw-main-banner-mobile {
        display: block;
    }


}

@media (min-width: 501px) and (max-width: 560px) {
    .gw-main-banner {
        display: none;
    }

    .gw-main-banner-mobile {
        display: block;
    }

    .img-banner {
        top: 130px;
        transform: scale(1.25);
        height: auto;
        max-height: 200px;
        width: 100%;
        left: 50%;
        transform: translate(-50%, 0);
        object-fit: contain;
    }

    .web-products {
        grid-template-columns: repeat(auto-fill, minmax(166px, 1fr));
        gap: 310px 10px;
    }

    .web-product-card {
        height: 440px;
    }

    div.web-fav-icon {
        bottom: 11.5%;
        right: 10px;
        width: 9%;
        height: 6%;
    }

 

}

@media (min-width: 561px) and (max-width: 600px) {

    .gw-main-banner {
        display: none;
    }

    .gw-main-banner-mobile {
        display: block;
    }

    .img-banner {
        top: 130px;
        transform: scale(1.25);
        height: auto;
        max-height: 200px;
        width: 100%;
        left: 50%;
        transform: translate(-50%, 0);
        object-fit: contain;
    }

    .web-products {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 310px 10px;
    }

    .web-product-card {
        height: 440px;
    }

    div.web-fav-icon {
        bottom: 11.5%;
        right: 10px;
        width: 9%;
        height: 6%;
    }

}


/* Tablet Styles */

@media (min-width: 601px) and (max-width: 755px) {
    .gw-main-banner {
        display: none;
    }

    .gw-main-banner-mobile {
        display: block;
    }

    .img-banner {
        position: absolute;
        top: 450px;
        height: auto;
        max-height: 300px;
        width: 90%;
        left: 50%;
        transform: translate(-50%, 0);
        object-fit: contain;
    }

    .web-products {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 340px 10px;
    }

    .web-product-card {
        height: 480px;
    }
}

@media (min-width: 756px) and (max-width: 1224px) {
    .gw-main-banner {
        /* height: 700px; */
        height: 660px;
        /* height: 68vh; */
        /* object-position: 20% 16%; */
        /* margin-bottom: 60px; */
    }

    .img-banner {
        position: absolute;
        top: 450px;
        height: auto;
        max-height: 300px;
        width: 90%;
        left: 50%;
        transform: translate(-50%, 0);
        object-fit: contain;
    }

    .web-products {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 330px 10px;
    }

    .web-product-card {
        height: 450px;
    }
}

/* PC Styles */
@media (min-width: 1225px) {
    .gw-main-banner {
        /* height: 1810px;
       object-position: 20% 36%; */
        /* height: 1000px; */
        height: 100dvh;
        /* object-position: 20% 14%; */
        /* margin-bottom: 80px; */
    }

    .img-banner {
        position: absolute;
        top: 16%;
        height: auto;
        max-height: 400px;
        width: 90%;
        left: 50%;
        transform: translate(-50%, 0);
        object-fit: contain;
    }

    .web-products {
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
        /* gap: 600px 10px; */
        gap: 720px 20px;
    }

    .web-product-card {
        /* height: 700px; */
        height: 840px;
    }
}