﻿h2, h3 {
    font-family: "Heebo", sans-serif;
    font-weight: 800;
    color: #B62E27;
}

.reer-para {
    font-family: "Heebo", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #666565;
    margin-bottom: 1rem;
    
}

.product-list li {
    font-family: "Heebo", sans-serif;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666565;
}

    .product-list li i {
        color: #B62E27; /* red icons instead of green for consistency */
    }
.fas {
    color: #2ECC71;
}
.image-gallery {
    display: flex;
    flex-direction: column; /* stack images one by one */
    gap: 15px; /* same gap between all images */
}



@media (max-width: 767.98px) {
    .image-gallery {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .image-gallery > div {
            display: flex;
            justify-content: center;
            width: 100%;
            max-width: 350px;
        }

        .image-gallery img {
            margin-left: 0 !important;
            padding-left: 0 !important;
        }
}


/* Existing hover effect for consistency */
.image-gallery img {
    transition: transform 0.3s ease;
}

    .image-gallery img:hover {
        transform: scale(1.05);
    }

/* Default: stacked (mobile first) */
.image-gallery {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* For small devices (xs, sm) */
@media (max-width: 767.98px) {
    .image-gallery {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

        .image-gallery > div {
            display: flex;
            justify-content: center;
            width: 100%;
            max-width: 350px;
        }

        .image-gallery img {
            margin-left: 0 !important;
            padding-left: 0 !important;
        }
}

/* For medium devices (md: 768px – 991.98px, iPads in portrait/landscape) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .image-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 20px;
    }

        .image-gallery > div {
            margin: 0 auto;
            width: 100%;
        }

        .image-gallery img {
            width: 100%;
            height: auto;
        }
}
