.hero-section{
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  justify-content: space-between; 
  background-color: #000000; 
  padding: 12em 7em;
  gap:3 em;
  
}

.left {
  flex: 1 1 200px; 
  text-align: center;
  max-width: 100%; 
  height: auto;
  padding-right: 9rem;
}

.right {
  flex: 1 1 500px; 
  text-align: left; 
  padding-left: 40px; 
  padding-top: 20px;
  
}









/* Tablet View */
@media (max-width: 1647px) {
  .hero-section {
    padding-top: 7rem;
    padding-bottom: 7rem;
    padding-right: 3rem;
    padding-left: 3rem;
  }

  
  .left {
    padding-right: .2rem;
    padding-left: 1rem;
    padding-bottom: 2rem;
  }
  
   .p {
     font-size: 20em;
  }





/* Mobile View */
@media (max-width: 575px) {
  .hero-section {
    padding-top: 7rem;
    padding-bottom: 7rem;
    padding-right: 2rem;
    padding-left: 2rem;
  }

  
  .left {
    padding-right: 2rem;
    padding-left: 2rem;
    padding-bottom: 2rem;
  }
  
   .right {
     font-size: 1em;
  }

}