/* General styling for each image container */
.img_new {
    background-size: cover; /* Ensure the div is fully filled with the image */
    background-position: center center; /* Center the image within the div */
    background-repeat: no-repeat; /* Prevent repeating the image */
    width: 100%;  /* Ensure div stretches fully horizontally */
    height: 100%;  /* Ensure image div stretches fully vertically */
    display: block;  /* Makes the div behave like a block-level element */
    border-radius: 10px;  /* Optional rounded corners */
    background-color:rgba(245, 245, 245, 0);  /* Fallback color in case image fails to load */
    position: relative;
    transition: all 0.3s ease;
    z-index: 0;
}

/* Wrapper for the product item ensuring consistency */
.product-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* Adjusts the layout of image and text */
    height: 100%;  /* Ensure it stretches fully within the column */
    padding: 5px;
}

/* Styling for the product description section */
.desc {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px;
    border-radius: 5px;
}

/* Text styling for product names */
.text h2 {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
}

/* Ensure all product images and text are aligned */
#newp {
    padding: 5px;
    border: 2px solid transparent;
    overflow: hidden;  /* Hide overflow if the image exceeds the container's boundaries */
    position: relative;
    aspect-ratio: 1 / 1; /* Ensures square aspect ratio for uniform image display */
    background-color:rgba(245, 245, 245, 0);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Make sure the container fills the available space */
}

/* Ensure the image fully fills the container */
#newp .img_new {
    object-fit: cover; /* Ensures the image fully covers the div */
    width: 100%;  /* Make sure the image takes up the full width of the container */
    height: 100%; /* Ensure the image fully fits the height of the container */
}

/* Responsive design for larger screens */
@media (max-width: 1200px) {
    .col-md-3 {
        width: 23%; /* Ensure that 4 items fit per row on larger screens */
    }
}

/* Ensure the layout looks good on smaller devices */
@media (max-width: 768px) {
    .col-md-3 {
        width: 100%; /* Full width for each item on smaller screens */
    }
}

/* Tighten spacing between images for a more compact look */
.row {
    margin-left: -5px;
    margin-right: -5px;
}

.col-md-3 {
    padding-left: 5px;
    padding-right: 5px;
}

/* Additional styling for hover effects and animations */
#newp:hover .img_new {
    transform: scale(1.05);  /* Slight zoom effect on hover */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adds shadow on hover */
}

#newp:hover .desc {
    background: rgba(0, 0, 0, 0.7); /* Darker background for description on hover */
}

/* Adjustments for dynamic content that changes across categories */
#newp img {
    object-fit: cover;  /* Ensure the image fully covers the div */
    width: 100%; /* Make sure the image takes up the full width of the container */
    height: 100%; /* Ensure the image fully fits the height */
}

/* Ensures the image size remains consistent across all categories */
.product-container {
    height: 110%;  /* Full height of the parent container */
    width: 100%;   /* Ensure full width */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Media query for tablet and smaller screens */
@media (max-width: 992px) {
    .col-md-3 {
        width: 50%;  /* Two items per row on medium screens */
    }
}

/* Media query for mobile devices */
@media (max-width: 576px) {
    .col-md-3 {
        width: 100%; /* Full width for each item on smaller screens */
    }
}


/* display content correct for mobile view */

.block-20 {
    flex: 1 1 auto;
    background-size: cover;
    background-position: center;
    min-height: 200px; /* Adjust as necessary */
  }
  
  .text {
    flex: 1 1 auto;
  }
  
  @media (max-width: 768px) {
    .blog-entry {
      flex-direction: column !important;
    }
  }
  
/* Hide menu icon when navbar is expanded */
.navbar-toggler[aria-expanded="true"] .fas.fa-bars,
.navbar-toggler[aria-expanded="true"] .oi.oi-menu {
  display: none;
}

/* Show menu icon when navbar is collapsed */
.navbar-toggler[aria-expanded="false"] .fas.fa-bars,
.navbar-toggler[aria-expanded="false"] .oi.oi-menu {
  display: inline;
}

#section3 {
    margin-bottom: 0;
    padding-bottom: 50px;
}

#section4 {

    margin-top: 0;
    padding-top: 0;
}

#testimony{
    position: relative;
    width: 100%;
    /* height: 300px; */
    height: 392px;
  }

  
/* Style for the container */
.testimony-wrap {
    width: 100%; /* Make the div flexible */
    max-width: 700px; /* Set a maximum width for larger screens */
    margin: 0 auto; /* Center-align the container */
    padding: 10px; /* Add some spacing around the content */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  /* Style for the images */
  .testimony-wrap .text img {
    width: 100%; /* Allow the image to fill the container width */
    height: auto; /* Maintain the aspect ratio */
    max-height: 500px; /* Limit the height for consistent design */
    object-fit: contain; /* Ensure the full image is displayed without cutting */
    display: block; /* Ensure proper alignment */
    margin: 0 auto; /* Center the image */
  }


.popup-img{
    max-width: 80%;
    max-height: 80vh;
  }