:root {
  --primaryColor: #FFB400;
  --brandRed: #AD1A1E;
  --black: #232122;
  --poppinsRegular: "Poppins", sans-serif;
  --poppinsMedium: "Poppins", sans-serif;
  --poppinsSemibold: "Poppins", sans-serif;
  --poppinsBold: "Poppins", sans-serif;
  
  


  /* --------------------------Header--------------------------*/
.front-page {
  background-color: var(--primaryColor);
  height: 122vh;
  overflow-y: hidden;
}


.heading1 {
  font-size: 30px;
}


/* --------------------------Hero--------------------------*/
  .hero-header{
    font-size: 80px;
    line-height: 4.5rem;
    color: #AD1A1E;
  }
  .hero-subheader{
    font-size: 24px;
    font-weight: 400;
    color: #AD1A1E;
  }
  .hero-right img{
    width: 100%;
  }
  
  /* --------------------------Hero-2--------------------------*/
  .hero2{
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.041);
  }
  .item{
    cursor: pointer;
  }
  .item img{
    width: 70px;
    height: 70px;
    object-fit: contain;
  }

  .item:hover .item img{
    width: 800px;
    height: 70px;
}


/*-------------------------------------------course preview--------------------------------*/
.course-preview{
  padding: 30px 45px;
  transition: ease-in-out 0.5s;
  
}
.course-preview:hover{
  border: 1px solid var(--brandRed);
  transform: translateY(-10px);
}
.course-preview img{
  width: 50px;
  height: 50px;
}
.preview-icon{
  background-color: var(--black);
  color: #Fff;
  padding: 13px 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: ease-in-out 0.5s;
}
.preview-icon:hover{
  background-color: var(--primaryColor);

}


/* ---------------------------------------------Why Choose-----------------------------------*/
.why-image img{
  width: 500px; 
  height: 500px; 
  object-fit: contain;
}




/*---------------------------------------------Treading Courses----------------------------------*/
.courses{
  overflow: hidden;
  position: relative;
}
.courses img{
  cursor: pointer;
  transition: 0.5s;
}
.course-img{
  z-index: 1;
}
.courses :hover .course-img{
  filter: brightness(50%);
  transform: scale(1.3);
}

/*==================================================Testimonial===========================================================*/
#testimonial{
  background-color: var(--primaryColor);
}
.customer-review{
  padding: 50px 60px;
  background-color: white;
  box-shadow: var(--brandRed) 0px 0px 0px 2px inset, #E7E7F1 -15px -10px 0px -1px;
}



/*==================================================FAQ===========================================================*/
.faq{
  background-color: var(--brandRed);
}


  @media all and (max-width: 1300px) and (min-width: 600px) {
 
    .front-page{
      height: 140vh;
    }
    
  .hero-left{
    transform: translateY(100px);
  }
  .hero-header{
    font-size: 70px;
    line-height: 4.3rem;
  }
  .hero-subheader{
    font-size: 24px;
  }
  .hero-right img{
    display: none;
  }
  .curved img{
    display: none;
  }
  }
  @media all and (max-width: 800px )and (max-width: 500px)and (min-width:350px){
    .headline{
      font-size: 65px;
    }
    .why-image img{
      width: 50px; 
      height: 50px; 
      object-fit: contain;
    }
    .hero-right img{
      display:none;
    }
    .curved img{
      display: none;
    }
    .front-page{
      height: 100vh;
    }
   
  }
  .why-image img{
    width: 400px; 
    height: 400px; 
    object-fit: contain;
  }
}