*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.imgg{
  display: flex;
justify-content: space-around;
}
.my1div{
 
  width: 47%;

  border-radius: 8px;

}
.my2div{
 
  width: 47%;
  border-radius: 8px;
 
}
.my1div{
  
  margin: 0 auto;
  overflow: hidden;
  
}
.my2div{

  margin: 0 auto;
  overflow: hidden;
  
}
.slider {
  transition: transform 0.5s ease;
  display: flex;
  height: 100%;

}

.slide {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
  transition: transform 0.5s ease;
    /* Add this line */
flex-direction: column;
  position: relative;
}
.slide p {
 
  padding: 5px;
  margin: 0;

}

.slide-content {


  width: 100%;
  height: 100%;
 margin-top: 60%;
 background-color: rgb(62, 53, 239);
  color: white; /* Example color */
}
.random1div{
  margin: 0 auto;
  overflow: hidden;
}

.random2div{
  margin: 0 auto;
  overflow: hidden;
}

.random-slider {
  transition: transform 0.5s ease;
  display: flex;
  height: 100%;
}

.random-slide {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: white;
  transition: transform 0.5s ease;
  flex-direction: column;
  position: relative;
}

.random-slide p {
  padding: 5px;
  margin: 0;
}

.random-slide-content {
  width: 100%;
  height: 100%;
  margin-top: 60%;
  background-color: rgb(62, 53, 239);
  color: white; /* Example color */
}
.sliderimg{
  position: absolute;
  width: 100%;
  height: 100%;
  margin-bottom: 21%;
  border: black solid 1px;
}
.slide {
  position: relative;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: flex-end; /* Align text to the bottom */
  height: 100%; /* Ensure slide takes full height */
  text-align: center; /* Center text horizontally */
}

.slide-image {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.slide-content {
  position: absolute;
  bottom: 0; /* Position at the bottom */
  left: 0;
  right: 0;
  height: 45%; /* Fixed height */
  background-color: rgb(62, 53, 239);/* Semi-transparent background */
  color: white; /* Text color */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
}
.random-slide {
  position: relative;
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: flex-end; /* Align text to the bottom */
  height: 100%; /* Ensure slide takes full height */
  text-align: center; /* Center text horizontally */
}

.random-slide-image {
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.random-slide-content {
  position: absolute;
  bottom: 0; /* Position at the bottom */
  left: 0;
  right: 0;
  height: 28%; /* Fixed height */
  background-color: rgb(62, 53, 239);
  color: white; /* Text color */
  display: flex;
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */

}
html, body, .main, .sliding-container {
  height: 100%;
}

.main {
  object-fit: contain;
  overflow: hidden;
  padding: 0; /* Adjust padding as needed */
  font-size: 20px;
  text-align: center;
}

.main-carousel-container {
  height: 100%;
  width: 100%;
  display: flex;
  transition: transform 0.5s ease;
}

.main-carousel-slide {
  flex: 0 0 auto;
  width: 100%;
}

.main-carousel-slide .content {
  height: 100%;
  width: 100%;
  background-color: #ccc; /* Example background color */
}

@media screen and (max-width: 640px) {
  .my1div, .my2div {
    width: 100%;
  }
  .my1div{
 
    width: 47%;
  
    border-radius: 8px;
  
  }
  .my2div{
   
    width: 47%;
    border-radius: 8px;
   
  }
  .my1div{
    
    margin: 0 auto;
    overflow: hidden;
    
  }
  .my2div{
  
    margin: 0 auto;
    overflow: hidden;
    
  }
  .slider {
    transition: transform 0.5s ease;
    display: flex;
    height: 100%;
  
  }
  
  .slide {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    transition: transform 0.5s ease;
      /* Add this line */
  flex-direction: column;
    position: relative;
  }
  .slide p {
   
    padding: 5px;
    margin: 0;
  
  }
  
  .slide-content {
  
  
    width: 100%;
    height: 100%;
   margin-top: 60%;
   background-color: rgb(62, 53, 239);
    color: white; /* Example color */
  }
  .random1div{
    margin: 0 auto;
    overflow: hidden;
  }
  
  .random2div{
    margin: 0 auto;
    overflow: hidden;
  }
  
  .random-slider {
    transition: transform 0.5s ease;
    display: flex;
    height: 100%;
  }
  
  .random-slide {
    flex: 0 0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    transition: transform 0.5s ease;
    flex-direction: column;
    position: relative;
  }
  
  .random-slide p {
    padding: 5px;
    margin: 0;
  }
  
  .random-slide-content {
    width: 100%;
    height: 100%;
    margin-top: 60%;
    background-color: rgb(62, 53, 239);
    color: white; /* Example color */
  }
  .sliderimg{
    position: absolute;
    width: 100%;
    height: 100%;
    margin-bottom: 21%;
    border: black solid 1px;
  }
  .slide {
    position: relative;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: flex-end; /* Align text to the bottom */
    height: 100%; /* Ensure slide takes full height */
    text-align: center; /* Center text horizontally */
  }
  
  .slide-image {
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  
  .slide-content {
    position: absolute;
    bottom: 0; /* Position at the bottom */
    left: 0;
    right: 0;
    height: 45%; /* Fixed height */
    background-color: rgb(62, 53, 239);/* Semi-transparent background */
    color: white; /* Text color */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
  }
  .random-slide {
    position: relative;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: flex-end; /* Align text to the bottom */
    height: 100%; /* Ensure slide takes full height */
    text-align: center; /* Center text horizontally */
  }
  
  .random-slide-image {
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  
  .random-slide-content {
    position: absolute;
    bottom: 0; /* Position at the bottom */
    left: 0;
    right: 0;
    height: 28%; /* Fixed height */
    background-color: rgb(62, 53, 239);
    color: white; /* Text color */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
  
  }
  html, body, .main, .sliding-container {
    height: 100%;
  }
  
  .main {
    object-fit: contain;
    overflow: hidden;
    padding: 0; /* Adjust padding as needed */
    font-size: 20px;
    text-align: center;
  }
  
  .main-carousel-container {
    height: 100%;
    width: 100%;
    display: flex;
    transition: transform 0.5s ease;
  }
  
  .main-carousel-slide {
    flex: 0 0 auto;
    width: 100%;
  }
  
  .main-carousel-slide .content {
    height: 100%;
  
  
    
  }
  html, body, .main, .sliding-container, .sliding-element {
    height: 100%;
    width: 100%;
  }
  
  .main {
    object-fit: contain;
    overflow: hidden;
    padding: 0; /* Adjust padding as needed */
    font-size: 20px;
    text-align: center;
  }
  
  .main-carousel-container {
    display: flex;
    transition: transform 0.5s ease;
  }
  
  .main-carousel-slide {
    flex: 0 0 auto;
  }
  
  .main-carousel-slide .content {
    height: 100%;
    width: 100%;
  
    
    background-color: #ccc; /* Example background color */
  }
}
@media screen and (min-width: 1400px) {
  .main, .sliding-container, .sliding-element {
    height: 80%; /* 95% of the viewport height */
  }
}