/* General Styles */
* {
  box-sizing: border-box;
}
body, html {
    margin-top:30px;
    padding: 0;
    font-family: 'Arial', sans-serif;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}  
.carousel-container {  
  position: relative;
  width: 100%;
  height: auto;/* Set the desired height */
  overflow: hidden;
}
.carousel { 
  display: flex;
  transition: transform 0.5s ease-in-out;
  
}
.carousel img {
  width: 100%;
  height:auto;  
  object-fit: cover;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 10;
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}

/* Hero Section */
.hero {
  text-align: center;
  
  padding: 20px; /* CHANGED: Added padding for better spacing */
}

.hero h2 {
  margin-top: 80px;
  font-size: 2.5rem; /* CHANGED: Increased from 2.2rem */
  margin-bottom: 10px;
}

.hero p {
  font-size: 1.2rem; /* CHANGED: Increased from 1rem */
  line-height: 1.6; /* CHANGED: Improved readability */
}




/* Container Section */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* CHANGED: Added padding for better spacing */
}

.container img {
  max-width: 100%;
  height: auto;
}

.Box-1 img {
  margin-left: 20px;
  height: 90%;
  width: 90%;
}

.Box-2 img {
  height: 50%;
  width: 95%;
}
/* Responsive Styles */
@media screen and (max-width: 1024px) {
  .new-carousel-container {
    width: 80%;
    height: auto;
  }
}

@media screen and (max-width: 768px) {
  .hero h2 {
    font-size: 2rem; /* CHANGED: Adjusted for tablets */
  }

  .hero p {
    font-size: 1rem; /* CHANGED: Adjusted for tablets */
  }

  .row-boxes .box {
    width: calc(50% - 20px); /* Two boxes per row */
  }

  .row-boxes .box h3 {
    font-size: 1rem; /* CHANGED: Adjusted for tablets */
  }

  .container {
    flex-direction: column; /* Stack items vertically */
  }

  .Box-1, .Box-2 {
    width: 100%; /* Full width for each item */
  }

  .new-carousel-container {
    width: 80%;
    height: auto;
  }
}

@media screen and (max-width: 480px) {
 .carousel-container{
  margin-top: 40px;
 }
  .hero h2 {
    font-size: 1.8rem; /* CHANGED: Adjusted for mobile */
  }

  .hero p {
    font-size: 0.9rem; /* CHANGED: Adjusted for mobile */
  }

  .row-boxes .box {
    width: calc(100% - 20px); /* One box per row */
  }

  .row-boxes .box h3 {
    font-size: 0.9rem; /* CHANGED: Adjusted for mobile */
  }

  .new-carousel-container {
    width: 90%;
    height: auto;
  }

  
}
@media screen and (max-width: 375px){
  .carousel-container{
    margin-top: 40px;
   }
}