.mainSection{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 20px;
}

.mainSection img{
  height:500px;
   width:60%;
   padding: 15px 20px;
   box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.39), 10px -10px 10px rgba(0, 0, 0, 0.364);
  
}
.mainSection h2{
  width: 100%;
  text-align: center;
  font-size: 2.2rem;
  padding-top: 10px;
}
.introPara{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  line-height: 1.3;
  font-size: 20.1px;
  font-weight: 500;
  text-align: justify;
  gap: 20px;
  padding: 0px 50px 30px 30px;
 
}
.introSlogans{
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: space-around;
  gap: 10px; 
  height:10vh;
  width: 100%;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.para{
  display: flex;
  flex-direction: column;
 margin-top: -20px;
}

@media (min-width: 800px) and (max-width: 1300px) {
  .mainSection img{
    height:400px;
     width:50%; 
  }
  .mainSection h2{
    width: 100%;
    font-size: 2rem;
   height: 100%;
  }
}
@media (min-width: 500px) and (max-width: 800px) {
  .mainSection img{
    height:400px;
     width:70%; 
  }
  .mainSection h2{
    width: 100%;
    font-size: 1.5rem;
   height: 100%;
  }
}
@media (min-width: 0px) and (max-width: 500px) {
  .mainSection img{
    height:300px;
     width:80%; 
  }
  .mainSection h2{
    width: 100%;
    font-size: 1.3rem;
    font-weight: 600;
   height: 100%;
  }
  .introPara{
    font-size: 15.1px;
   
    padding: 0px 15px 30px 15px;
   
  }
}