.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: 28%; /* Fixed height */
background-color: rgb(244 67 54);
  color: white; /* Text color */
  display: flex;
  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;
}

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

.sliding-element {
  flex: 0 0 auto;
  width: 100%;
}

.sliding-element .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;
}

.sliding-container {
  display: flex;
  transition: transform 0.5s ease;
}

.sliding-element {
  flex: 0 0 auto;
}

.sliding-element .content {
  height: 100%;
  width: 100%;

  
  background-color: #ccc; /* Example background color */
}