:root{
--primary-color: #2a9d8f;
--accent-color:#FFB703;
--dark-text:#212529;
--light-text:#f8f9fa;
}

/* 320px - 480px: Smallest mobile devices (portrait). */

@media (min-width:320px) and (max-width:480px){
  /*BANNER SECTION*/
  header ul li a,.contact-banner {
  font-size: .7rem;
}
 .contact-banner {
    display: grid;
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 600px;
  }

/*HERO SECTION*/
.aboutus-hero {
    padding: 60px 0 10px;
}
.aboutus-text {
    padding: 15px;
    border-radius: 20px;
}
.aboutus-text h1 {
    font-size: 2rem;
    padding-bottom: 15px;
}
.aboutus-text p {
    font-size: 1.3rem;
    margin-bottom: 8px;
}
.aboutus-text p span {
    font-size: 1.4rem;    
}

/*WELCOME SECTION*/
.abt-welcome-container {
  max-width: 90%;
  margin: 30px auto;
  padding: 0 15px 25px;
}


.abt-welcome-container p {
    font-size: 1.2rem;
    font-weight: 500;

}

/*FOUNDER SECTION*/

.founder-section{
  display: flex;
  flex-direction: column-reverse;
}

.founder-photo{
  max-width: 100%;
  margin: auto;
}
.founder-text h4 {
  font-size: 1.3rem;
    padding-bottom: 20px;
}
.credentials-table td {    
    font-size: 1rem;
}
.founder-text{
  max-width: 90%;
  margin: auto;
  padding: 0 10px;
}
.founder-text h2 {
    text-align: center;
}
.founder-text h3 {
    text-align: center;
}

.founder-text-extn-container {
    max-width: 90%;
    margin: auto;
    padding: 0 15px;
}
.founder-text-extn-container h4 {
  font-size: 1.3rem;
    padding-bottom: 20px;
}

/*ACCOMPLISHMENTS SECTION*/
.accomplishments {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 15px;    
}

.accomplishments h2 {
    font-size: 1.8rem;
    text-align: left;
}
.award-card {
    width: 320px;
}

/*OUR VALUES*/
.our-values {
    max-width: 90%;
    margin: auto;
    padding: 40px 20px;
    text-align: center;
}
.our-values h2 {
font-size: 2rem;
    margin-bottom: 10px;
}
.awards-grid {
    margin-top: 45px;
}

/*REVIEWS*/
.reviews-container h3 {
  font-size: 1.8rem;
  padding: 30px;
}
#reviewImage {
    width: 100%;
    max-width: 90%;
    margin: auto;
}


/*APPOINTMENT*/
.appointment-container {
  display: flex;
  flex-direction: column-reverse;
    max-width: 90%;
    margin: auto;
}

.section-tag-appointment {
    text-align: center;
}
.info-box h2 {
  font-size: 1.8rem;
    text-align: center;
}
.phone{
  text-align: center;
}
.timing-row {
    font-size: .8rem;
}
/* .form-box {
    min-width: 338px;
    max-width: 100%;
} */
.form-box{
  padding:20px;
  min-width: 300px;
  margin: auto;
}

/*LOCATION*/
.location{
  max-width: 90%;
  margin: auto;
}
.location {
    margin-top: 45px;
}
.location h1 {
    text-align: center;
    font-size: 2rem;
}


.location-container{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    margin: auto;
}
.location-map {
    min-height: 445px;
}

/* FOOTER */
.footer-box{
    max-width: 300px;
}

}

/* 481px - 600px: Larger mobile devices (landscape). */
@media (min-width:481px) and (max-width:600px){

 /*BANNER SECTION*/
  header ul li a,.contact-banner {
  font-size: .8rem;
}
 .contact-banner {
    display: grid;
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 600px;
  }

/*WELCOME SECTION*/
.abt-welcome-container {
  max-width: 90%;
  margin: 35px auto;
  padding: 0 15px 25px;
}


.abt-welcome-container p {
    font-size: 1.2rem;
    font-weight: 500;

}

/*FOUNDER SECTION*/

.founder-section{
  display: flex;
  flex-direction: column-reverse;
}

.founder-photo{
  max-width: 100%;
  margin: auto;
}
.founder-text h3 {
   text-align: center;
}
.founder-text h4 {
    padding-bottom: 20px;
}
.credentials-table td {    
    font-size: 1.1rem;
}
.founder-text{
  max-width: 90%;
  margin: auto;
  padding: 0 10px;
}
.founder-text h2 {
    text-align: center;
}

.founder-text-extn-container {
    max-width: 90%;
    margin: auto;
    padding: 0 15px;
}
.founder-text-extn-container h4 {
    padding-bottom: 20px;
}

/*ACCOMPLISHMENTS SECTION*/
.accomplishments {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 15px;    
}

.accomplishments h2 {
  font-size: 1.8rem;
    text-align: left;
}

.award-card{
  max-width: 500px;
  width: 80%;
}

/*OUR VALUES*/
.our-values {
    max-width: 90%;
    margin: auto;
    padding: 40px 20px;
    text-align: center;
}
.our-values h2 {
font-size: 1.8rem;
    margin-bottom: 10px;
}

/*REVIEWS*/
.reviews-container h3 {
    font-size: 1.8rem;
}
#reviewImage {

    width: 100%;
    max-width: 85%;
    margin: auto;
}

/*APPOINTMENT*/
.appointment-container {
  display: flex;
  flex-direction: column-reverse;
    max-width: 76%;
    margin: auto;
}
.section-tag-appointment {
    text-align: center;
}
.info-box h2 {
  font-size: 1.7rem;
    text-align: center;
}
.phone{
  text-align: center;
}
.timing-row {
    font-size: .8rem;
}
.form-box {
    min-width: 390px;
    max-width: 100%;
}

/*LOCATION*/
.location{
  max-width: 80%;
  margin: 40px auto;
}
.location h1 {
    font-size: 2rem;
    text-align: center;
}

/* FOOTER */
.footer-box{
    max-width: 300px;
}
}

/* 600px - 768px: Tablets (portrait). */
@media (min-width:600px) and (max-width:768px){
 /*BANNER SECTION*/
header ul li a,.contact-banner {
  font-size: 1rem;
}
 .contact-banner {
    max-width: 100%;
    margin: auto;
    display: grid;
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    max-width: 600px;
  }
/*WELCOME SECTION*/
.abt-welcome-container {
  max-width: 90%;
  margin: 40px auto;
  padding: 0 15px 25px;
}
.abt-welcome-container p {
    font-size: 1.5rem;
    font-weight: 500;
}
/*FOUNDER SECTION*/
.founder-section{
  display: flex;
  flex-direction: column-reverse;
}

.founder-photo{
  max-width: 100%;
  margin: auto;
}
.founder-text h4 {
    padding-bottom: 20px;
}
.founder-text h3 {
    text-align: center;
}
.credentials-table td {    
    font-size: 1.1rem;
}
.founder-text{
  max-width: 90%;
  margin: auto;
  padding: 0 10px;
}
.founder-text h2 {
    text-align: center;
}

.founder-text-extn-container {
    max-width: 90%;
    margin: auto;
    padding: 0 15px;
}
.founder-text-extn-container h4 {
    padding-bottom: 20px;
}
/*ACCOMPLISHMENTS SECTION*/
.accomplishments {
    max-width: 90%;
    margin: 0 auto;
    padding: 0 15px;    
}

.accomplishments h2 {
  font-size: 1.8rem;
    text-align: left;
}

.award-card{
  max-width: 500px;
  width: 80%;
}
/*OUR VALUES*/
.our-values {
    max-width: 90%;
    margin: auto;
    padding: 40px 20px;
    text-align: center;
}
.our-values h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}
/*REVIEWS*/
.reviews-container h3 {
    font-size: 1.8rem;
}
#reviewImage {

    width: 100%;
    max-width: 85%;
    margin: auto;
}

/*APPOINTMENT*/
.appointment-container {
  display: flex;
  flex-direction: column-reverse;
    max-width: 60%;
    margin: auto;
}
.section-tag-appointment {
    text-align: center;
}
.info-box h2 {
  font-size: 1.8rem;
    text-align: center;
}
.phone{
  text-align: center;
}
.timing-row {
    font-size: .8rem;
}
.form-box {
    min-width: 390px;
    max-width: 100%;
}

/*LOCATION*/
.location{
  max-width: 80%;
  margin: auto;
}
.location {
    margin-top: 45px;
}
.location h1 {
    font-size: 1.8rem;
  
}

/* FOOTER */
.footer-box{
    max-width: 300px;
}

}

/* 768px - 992px: Tablets (landscape) and small laptops. */

@media (min-width:768px) and (max-width:992px){
header ul li a,.contact-banner {
  font-size: .7rem;
}
 .contact-banner {
    max-width: 100%;
    margin: auto;
    display: grid;
    flex: 1;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    max-width: 600px;
  }
/*HERO SECTION*/

.founder-section {
max-width: 90%;
margin: auto;
}
.credentials-table td {
    font-size: 1.1rem;
}
.founder-text-extn-container {
    max-width: 90%;
    margin: auto;
}
.accomplishments {
    max-width: 90%;
    margin: 0 auto;
}
.accomplishments h2 {
    font-size: 2rem;
}

/*VALUES*/
.our-values h2 {
    font-size: 2rem;
}
.values-grid {
    max-width: 90%;
    margin: auto;
}
/*REVIEWS */
.reviews-container h3 {
    font-size: 2rem;
}
/*APPOINTMENT*/
.info-box h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 10px 0;
}

/*LOCATION*/
.location {
    max-width: 85%;
    margin: auto;
}

}


/* 992px - 1200px: Laptops and desktops. */
@media (min-width:992px) and (max-width:1200px) {

.founder-section {
  max-width: 950px;
    margin: 0 auto;
    
}
.founder-text-extn-container {
    max-width: 950px;
    margin: auto;
}

}

/*FOR IPAD PRO*/



/* 1200px and up: Larger desktops and high-resolution screens.  */









/*ACTIVATE HAMBURGER MENU*/
@media (max-width: 768px) {
  .nav-bar{
    position: sticky;
    top:0;
  }
  .nav-links {
    height: 100vh;
    position: absolute;
    top: 80px;
    right: 0;
    flex-direction: column;
    background: #f8f9fa;
    width: 200px;
    display: none;
    transition: transform 0.4s ease;
    padding: 20px;
    z-index: auto;
    
  }

  .nav-links.open {
    display: flex;

    
  }

  .nav-links ul {
    position: relative;
    top: 0;
  }

  .hamburger {
    display: flex;
  }
    /* HERO BUTTON */
   /* .hero-btn {
    font-size: 1.1rem;
    padding: 12px 25px;
  } */

}

  /*Rotate Animation*/
  /* Only animate when fa-xmark appears */
  .rotate-in {
    animation: rotatePop 0.5s ease-in-out;
  }

  /* Rotate + scale animation */
  @keyframes rotatePop {
    0% {
      transform: rotate(0deg) scale(0.5);
      opacity: 0;
    }
    100% {
      transform: rotate(180deg) scale(1);
      opacity: 1;
      transition: 0.5s ease;
    }


  }