/* Reset default body and html padding/margin */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
  overflow-x: hidden; /* Prevent sideways scroll */
}

/* Apply box-sizing border-box globally */
*, *::before, *::after {
  box-sizing: border-box;
}
.insights-product {
    /* min-height: 100vh; */
    width: 100vw;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    text-align: center;
    padding: 0;
    position: relative;
    overflow: hidden !important;
}

.insights-product h1 {
    color: #4adde8;
    font-size: 5.5rem;
}

.insights-product h2 {
    color: #4adde8;
    font-size: 3rem;
}

.insights-product .wave {
    position: absolute;
    bottom: -.5rem;
    left: 0;
    height: 11rem;
    width: 100%;
    background: url(../images/insight.avif);
    background-size: 100rem 11rem;
    animation: waves 8s linear infinite;
    background-repeat: repeat-x;
}

.insights-product .wave2 {
    animation-direction: reverse;
    animation-duration: 6s;
    opacity: .3;
}

.insights-product .wave3 {
    animation-duration: 4s;
    opacity: .5;
}

@keyframes waves {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 100rem;
    }
}

.home-insights {
    text-align: center;
    align-items: center;
    background-image: url(../images/insight.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    min-height: 85vh;
    padding: 100px 20px 20px 20px;
}

.home-insights h1 {
    font-size: 7rem;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-top: calc(85vh/2);
    /* margin-top: 19rem; */
}

/* Background Image Section */
.background.top {
    position: relative; /* Ensure relative positioning to apply the ::before pseudo-element */
    background-image: url('path_to_your_image.jpg'); /* Add your image URL */
    background-size: cover; /* Ensures the background image covers the entire section */
    background-position: center center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    width: 100%;
    filter: blur(2px);
    height: 85vh; /* Adjust height as needed */
    z-index: 1;
}

/* Gradient overlay for smooth transition to the next section */
.background.top::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.785) 60%, #f4f4f4 100%); /* Adjust the gradient and colors as needed */
    z-index: 1; /* Keeps the overlay behind any text/content */
}

/* Ensure that content appears above the darkened background */
.background.top > * {
    position: relative;
    z-index: 2;
    color: white; /* Make sure the text stands out on the dark background */
}

/* Name overlay for text on the image */
.name-overlay {
    position: absolute;
    top: 350px; /* Adjust the top position of the name */
    left: 50px; /* Adjust the left position of the name */
    font-family: 'Arial', sans-serif;
    font-size: 60px; /* Set the font size for the name */
    font-weight: bold; /* Make the text bold */
    color: rgb(255, 255, 255); /* Set the text color */
    letter-spacing: 4px;
    z-index: 2; /* Ensure the text appears above any background image or overlay */
    background-color: rgba(0, 0, 0, 0.493); /* Optional: add a background behind the text for visibility */
    padding: 10px; /* Add padding to the text for better readability */
    border-radius: 5px; /* Optional: add rounded corners to the background */
}
/* Products Section */
.products-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align items from left to right */
    padding: 20px;
    gap: 20px; /* Add space between product cards */
  }
  
  /* Individual Product Card */
  .product {
    perspective: 1000px;
    margin: 20px;
    width: calc(25% - 40px); /* Default: 4 products per row */
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  /* Inner Container for 3D Flip Effect */
  .product-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .product:hover .product-inner {
    transform: rotateY(180deg);
  }
  
  /* Front and Back Faces */
  .product-front, .product-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }
  
  /* Front Face Content */
  .product-front {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  
  .product-front img {
    max-width: 100%;
    height: 200px;
    border-radius: 10px;
  }
  
  .product-front h3 {
    margin-top: 15px;
    font-size: 20px;
    font-weight: bold;
    color: #0077cc;
    text-align: center;
  }
  
  /* Back Face Content */
  .product-back {
    background-color: #f4f4f4;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
  }
  
  .product-back p {
    font-size: 16px;
    color: #333;
    text-align: center;
    line-height: 1.4;
  }
  
  /* Read More Button Styling */
  .read-more {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0077cc;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .read-more:hover {
    background-color: #005fa3;
  }
  
  /* Responsive Design */
  
  /* Tablet Screens (Less than 1024px) */
  @media screen and (max-width: 1024px) {
    .product {
      width: calc(50% - 40px); /* Show 2 products per row on tablets */
      height: 350px; /* Adjust height for smaller screens */
    }
  }
  
  /* Mobile Screens (Less than 768px) */
  @media screen and (max-width: 768px) {
    .product {
      width: calc(100% - 40px); /* Show 1 product per row on small devices */
      height: 350px;
    }
  
    /* Center align the products */
    .products-section {
      justify-content: center;
    }
  }
  
  /* Extra Small Mobile Devices (Less than 480px) */
  @media screen and (max-width: 480px) {
    .product {
      width: 100%;
      margin: 10px 0; /* Reduce margin for small screens */
      height: auto; /* Allow auto height for better content visibility */
    }
  
    .product-front img {
      height: 150px; /* Reduce image height for smaller devices */
    }
  
    .product-back p {
      font-size: 14px; /* Adjust font size for better readability */
    }
  }
  
  /* Ensure horizontal scrolling does not occur */
  .products-section {
    overflow-x: hidden;
  }
  
  /* Additional Media Queries for Ensuring Responsiveness */
  @media (max-width: 768px) {
    /* Adjust background for smaller screens */
    .background.top {
      height: auto;
      background-size: contain;
    }
  
    /* Product container for small screens */
    .products-section {
      flex-direction: column;
      align-items: center;
    }
  }
  
  /* For very small screens */
  @media (max-width: 768px) {
    /* Stack images and content vertically on small screens */
    .product {
      flex-direction: column;
    }
  
    .product img,
    .product-content {
      width: 100%;
    }
  
    .product-content {
      padding: 20px 0;
    }
  }
  
  /* Keyframes for the animation */
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      transform: translateY(50px); /* Start from below */
    }
    100% {
      opacity: 1;
      transform: translateY(0); /* End in original position */
    }
  }