/* General Styles */

.card-max {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start; /* Align the cards from the start */

  min-height: 100vh;

  margin: 0;

  flex-direction: column;

  font-family: 'Poppins', sans-serif;

  align-items: center; /* This will center the .card-deck horizontally */

}



.card {

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  transition: 0.3s;

  width: 18%;

  display: flex; /* Use flexbox for vertical alignment */

  flex-direction: column; /* Make sure the content inside the card is aligned vertically */

  justify-content: flex-start; /* Keep content aligned at the top */

  overflow: hidden;

  margin-bottom: 15px; /* Add margin between cards */

}



.card:hover {

  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);

}



.card img {

  transition: transform 0.3s ease; /* Smooth transition */

  width: 100%; /* Ensure images are responsive */

  height: auto; /* Maintain aspect ratio */

}



.card img:hover {

  transform: scale(1.05); /* Zoom in 10% on hover */

}



.container {

  text-align: left; 

  word-wrap: break-word; /* Allow wrapping of text */

  overflow: visible; /* Allow text to expand as needed */

  max-width: 1920px; /* Prevents it from becoming too wide */

  width: 100%; /* Ensures it takes full width but doesn't exceed max-width */

  font-family: 'Poppins', sans-serif;

  margin: auto;
  padding-top: 15px;
  padding-right: 10px;

  padding-left: 10px;

  box-sizing: border-box;

}



.container h7 {

  font-size: 1.2em; /* Adjusted size for title */

  white-space: normal; /* Allow title text to wrap */

  overflow: visible;

}



.container p {

  font-size: 1em; /* Default size for description */

  white-space: normal; /* Allow description text to wrap */

  overflow: visible;

  margin: auto;

}



.card-deck {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 15px;

  align-items: flex-start; /* Align items at the top to avoid movement */

  max-width: 1920px;

  padding: 0 15px; /* Add padding for better spacing on smaller screens */
  
  padding-bottom: 40px;

}



.p_class {

  text-align: center; /* Centers the text horizontally */

  font-size: 1em; /* Optional: Makes the text a bit larger for better visibility */

  margin-bottom: 30px; /* Adds space below the text */

  font-family: Cambria; /* Font style */

  line-height: 1em; /* Adjusts line height for spacing */

  

  /* Adding the underline and creating a gap between text and line */

  text-decoration: underline; /* Adds the underline */

  text-decoration-color: orange; /* Orange color for underline */

  text-decoration-thickness: 5px; /* Thickness for the underline */

  text-underline-offset: 20px; /* Gap between text and underline */

}



.container h7 {

  font-size: 1em; /* Adjust title size for smaller screens */

}



.container p {

  font-size: 0.9em; /* Adjust description size for smaller screens */

}





/* Responsive Styles */

@media (max-width:840px) {

  .card {

    width: calc(33% - 15px); /* Two cards per row on tablets */

  }



  .container h7 {

    font-size: 1em; /* Adjust title size for smaller screens */

  }



  .container p {

    font-size: 0.9em; /* Adjust description size for smaller screens */

  }



  .p_class {

    font-size: 1.2em; /* Adjust text size for smaller screens */

  }

}



@media (max-width: 480px) {

  .card {

    width: calc(50% - 15px); /* One card per row on mobile */

  }



  .container h7 {

    font-size: 0.9em; /* Further adjust title size for mobile */

  }



  .container p {

    font-size: 0.8em; /* Further adjust description size for mobile */

  }



  .p_class {

    font-size: 1em; /* Further adjust text size for mobile */

  }

}