@media (max-width: 575px) { 

.header{
  padding: 0 30px;
  padding-top: 20px;
}
.header .logo{
  max-width: 140px;
  margin: auto;
  margin-bottom: 10px;
}
.header h1{
  font-size:24px;
}

.main-container{
  margin-top: 20px;
}

.mainhero{
  min-height:350px
}

.cta-1{
  background-color: var(--primary);
  padding: 30px;
  padding-top: 40px;
}
.cta-1 h2{
  font-size: 30px;
  letter-spacing: 1.5px;
}

.cta-1 p{
  font-size: 20px;
}

.signupBtn{
  height: 75px;
  font-size: 28px;
  letter-spacing: 2px;
  line-height: 65px;
}

.intro{
  padding: 25px 30px;
}

.intro h3{
  font-size: 45px;
}
.intro p{
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color)
}

.books-area h4{
  font-size: 24px;
}


.learnmoreBtn{
  background-color: var(--primary);
  color: #f6f4e8;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 800;
  border-radius: 70px;
  padding: 20px 35px;
  letter-spacing: 2px;
}

}


@media (min-width: 576px) and (max-width: 767px) {

.header{
  padding: 0 30px;
  padding-top: 20px;
}
.header .logo{
  max-width: 140px;
  margin: auto;
  margin-bottom: 10px;
}
.header h1{
  font-size:24px;
}

.main-container{
  margin-top: -30px;
}

.mainhero{
  min-height:350px
}

.cta-1{
  background-color: var(--primary);
  padding: 30px;
  padding-top: 40px;
}
.cta-1 h2{
  font-size: 30px;
  letter-spacing: 1.5px;
}

.cta-1 p{
  font-size: 20px;
}

.signupBtn{
  height: 75px;
  font-size: 28px;
  letter-spacing: 2px;
  line-height: 65px;
}

.intro{
  padding: 25px 30px;
}

.intro h3{
  font-size: 45px;
}
.intro p{
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color)
}

.books-area h4{
  font-size: 24px;
}


.learnmoreBtn{
  background-color: var(--primary);
  color: #f6f4e8;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 800;
  border-radius: 70px;
  padding: 20px 35px;
  letter-spacing: 2px;
}

}


@media (min-width: 768px) and (max-width: 991px) { 


.header{
  padding: 0 30px;
  padding-top: 20px;
}
.header .logo{
  max-width: 140px;
  margin: auto;
  margin-bottom: 10px;
}
.header h1{
  font-size:24px;
}

.main-container{
  margin-top: -30px;
}

.mainhero{
  min-height:350px
}

.cta-1{
  background-color: var(--primary);
  padding: 30px;
  padding-top: 40px;
}
.cta-1 h2{
  font-size: 30px;
  letter-spacing: 1.5px;
}

.cta-1 p{
  font-size: 20px;
}

.signupBtn{
  height: 75px;
  font-size: 28px;
  letter-spacing: 2px;
  line-height: 65px;
}

.intro{
  padding: 25px 30px;
}

.intro h3{
  font-size: 45px;
}
.intro p{
  font-size: 20px;
  font-weight: 600;
  color: var(--text-color)
}

.books-area h4{
  font-size: 24px;
}


.learnmoreBtn{
  background-color: var(--primary);
  color: #f6f4e8;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 800;
  border-radius: 70px;
  padding: 20px 35px;
  letter-spacing: 2px;
}

}

@media (min-width: 992px) and (max-width: 1200px) { 

.header h1{
  font-size:34px;
}

}



@media (min-width: 1201px) and (max-width: 1460px) { 


}