@media (max-width: 1399px) {
  .navbar-brand h1 {
    font-size: 1.9rem;
  }

  #about-us .heading h1 {
    font-size: 3.2rem;
  }

  #team .team-carousel .descriptions h3,
  #team .team .descriptions h3,
  #founders .team-carousel .descriptions h3,
  #officers .team-carousel .descriptions h3 {
    font-size: 1.3rem;
  }

  #find-a-doctor .find-a-doctor .circle {
    margin: 0.5rem 2rem;
  }

  #doctors {
    .left {
      width: 25%;
    }

    .right {
      width: 75%;
      margin-left: 25%;
    }
  }

  .modal-content {
    width: 40%;
    margin: 20% auto;
  }
}

@media (max-width: 1199px) {
  .navbar-brand img.logo {
    width: 11%;
  }

  .navbar .navbar-brand {
    width: 44%;
  }

  .navbar-brand h1 {
    font-size: 1.4rem;
  }

  .navbar-light .navbar-nav .nav-link {
    margin-left: 15px;
    font-size: 1.1rem;
  }

  .hero-header .header {
    width: 88%;
  }

  #about-us .heading h1 {
    font-size: 2.7rem;
  }

  .offers-carousel .owl-nav .owl-prev,
  .team-carousel .owl-nav .owl-prev,
  .blogs-carousel .owl-nav .owl-prev {
    left: -90px;
  }

  .offers-carousel .owl-nav .owl-next,
  .team-carousel .owl-nav .owl-next,
  .blogs-carousel .owl-nav .owl-next {
    right: -90px;
  }

  #team .team-carousel .descriptions h3,
  #team .team .descriptions h3,
  #founders .team-carousel .descriptions h3,
  #officers .team-carousel .descriptions h3 {
    font-size: 1.1rem;
  }

  #team .team-carousel .descriptions h6,
  #team .team .descriptions h6,
  #founders .team-carousel .descriptions h6,
  #officers .team-carousel .descriptions h6 {
    font-size: 0.9rem;
  }

  .testimonial-carousel .owl-dot {
    width: 15px;
    height: 15px;
  }

  .testimonial-carousel .owl-dot.active {
    width: 35px;
    height: 35px;
  }

  .blogs-carousel .owl-item .content,
  .blogs-carousel .owl-item .author {
    padding: 1rem;
  }

  #services .services-carousel h3,
  #services .services h3 {
    white-space: unset;
  }

  #footer p,
  #footer li {
    font-size: 0.9rem;
  }

  #footer .input-group input,
  #footer .input-group button {
    width: 100%;
  }

  #footer .input-group input {
    border-radius: 8px 8px 0 0;
  }

  #footer .input-group button {
    margin-left: 0;
    border-radius: 0 0 8px 8px;
  }

  #bottom-bar .content {
    padding: 0;
  }

  #bottom-bar .content:nth-child(1) {
    width: 60%;
  }

  #bottom-bar .content:nth-child(2) {
    width: 40%;
  }

  #bottom-bar p {
    font-size: 0.9rem;
  }

  #find-a-doctor .find-a-doctor .circle {
    margin: 0.5rem 1rem;
  }

  #contact-us h6 {
    width: 100%;
  }

  #doctors {
    .left {
      width: 27%;
    }

    .right {
      width: 73%;
      margin-left: 27%;
    }
  }

  .modal-content {
    width: 50%;
    margin: 25% auto;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  #footer .details {
    width: 30%;
  }

  #footer .quick-links {
    width: 20%;
  }
}

@media (min-width: 992px) {
  .navbar-light .navbar-nav .nav-link:hover::before,
  .navbar-light .navbar-nav .nav-link.active::before {
    width: 100%;
    left: 0;
  }

  #about-us .sm {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .navbar-light .navbar-nav .nav-link {
    margin-left: 0;
    padding: 10px 0;
  }
}

@media (max-width: 991px) {
  .navbar .navbar-brand {
    width: 70%;
  }

  .navbar-brand img.logo {
    width: 11%;
  }

  .navbar {
    padding: 0.5em 0 !important;
  }

  .navbar-brand .fa-clinic-medical,
  .navbar-brand .fa-hospital-o {
    font-size: 2.5rem;
  }

  .navbar-brand h1 {
    font-size: 1.7rem;
  }

  .navbar-light .navbar-nav .nav-link:hover::before,
  .navbar-light .navbar-nav .nav-link.active::before {
    width: 25%;
    height: 2px;
    left: 0;
  }

  .hero-header h5 {
    width: 69%;
    font-size: 1.5em;
  }

  .hero-header h1 {
    font-size: 3.9rem;
  }

  #about-us .heading,
  #appointment .heading {
    text-align: center;
  }

  #appointment .cta {
    display: flex;
    justify-content: center;
  }

  #about-us .lg {
    display: none;
  }

  #team .team-carousel .descriptions h3,
  #team .team .descriptions h3,
  #founders .team-carousel .descriptions h3,
  #officers .team-carousel .descriptions h3 {
    font-size: 1.5rem;
  }

  #team .team-carousel .descriptions h6,
  #team .team .descriptions h6,
  #founders .team-carousel .descriptions h6,
  #officers .team-carousel .descriptions h6 {
    font-size: 1rem;
  }

  #footer .container {
    padding: 0;
  }

  #footer .company,
  #footer .details {
    margin-top: 0;
  }

  #bottom-bar .content:nth-child(1) {
    width: 100%;
  }

  #bottom-bar .content:nth-child(2) {
    width: 100%;
  }

  #about-us .image {
    height: unset;
  }

  #about-us img {
    height: unset;
  }

  #founders p {
    width: 65%;
  }

  #contact-us .details {
    margin-top: 30px;
  }

  #contact-us .details:nth-child(3) {
    margin-top: 0;
  }

  /* #contact-us h6 {
    width: 100%;
  } */

  #contact-us .div-form {
    margin-top: 0;
    z-index: 1;
  }

  #contact-us .form {
    margin: 0 0 3rem;
  }

  #footer img.logo {
    width: 70%;
  }

  #doctors {
    .left {
      width: 30%;
    }

    .right {
      width: 70%;
      margin-left: 30%;

      .descriptions h3 {
        font-size: 1.5rem;
      }
    }
  }

  #find-a-doctor .find-a-doctor .circle {
    margin: 0.5rem 1.5rem;
  }

  .modal-content {
    width: 60%;
    margin: 25% auto;
  }
}

@media (max-width: 767px) {
  .navbar .navbar-brand {
    width: 80%;
  }

  .navbar-brand img.logo {
    width: 12%;
  }

  .navbar-brand h1 {
    font-size: 1.7rem;
  }

  .hero-header h1 {
    font-size: 3.5rem;
  }

  .hero-header a,
  #appointment a {
    padding: 0.5rem 1.5rem;
  }

  .hero-header .btn-outline-light {
    color: var(--dark);
    border-color: var(--dark);
  }

  #about-us .heading h1 {
    font-size: 2.6rem;
  }

  #footer .input-group input {
    padding: 0.5rem;
  }

  #footer .newsletter .btn-lg-square {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  #founders p {
    width: 80%;
  }

  #doctors {
    .left {
      width: 100%;
      position: inherit;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
      border-bottom: 1px solid #00000057;
    }

    .right {
      width: 100%;
      margin-left: 0;
      padding-top: 1rem;

      .descriptions h3 {
        font-size: 1.8rem;
      }
    }
  }

  .modal-content {
    width: 80%;
    margin: 30% auto;
  }
}

@media (max-width: 605px) {
  .hero-header h1 {
    font-size: 3.1rem;
    -webkit-text-stroke: 1px var(--dark);
  }

  .hero-header a {
    background-color: var(--light);
    border-color: var(--dark);
  }

  #about-us .heading h1,
  #offers h1,
  #appointment h1,
  #services h1,
  #team h1,
  #founders h1,
  #officers h1,
  #history h1,
  #contact-us h1 {
    font-size: 1.9rem;
  }

  .offers-carousel .owl-nav,
  .blogs-carousel .owl-nav,
  .team-carousel .owl-nav {
    margin-top: 35px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    position: relative;
  }

  .offers-carousel .owl-nav .owl-prev,
  .offers-carousel .owl-nav .owl-next,
  .blogs-carousel .owl-nav .owl-prev,
  .blogs-carousel .owl-nav .owl-next,
  .team-carousel .owl-nav .owl-prev,
  .team-carousel .owl-nav .owl-next {
    position: relative;
    margin: 0 5px;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    background: #ffffff;
    font-size: 22px;
    border-radius: 45px;
    border: 1px solid var(--dark);
    transition: 0.5s;
    left: 0;
    right: 0;
  }

  .offers-carousel .owl-nav .owl-prev:hover,
  .offers-carousel .owl-nav .owl-next:hover,
  .blogs-carousel .owl-nav .owl-prev:hover,
  .blogs-carousel .owl-nav .owl-next:hover,
  .team-carousel .owl-nav .owl-prev:hover,
  .team-carousel .owl-nav .owl-next:hover {
    color: #ffffff;
  }

  #offers .offers-carousel {
    padding: 0 45px 45px 45px;
  }

  .blogs-carousel {
    padding: 0 40px 40px 40px;
  }

  .team-carousel {
    padding: 0 35px 35px 35px;
  }

  .offers-carousel::after,
  .blogs-carousel::after,
  .team-carousel::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 75%;
    bottom: -15px;
    left: 0;
    background: var(--primary);
    border-radius: 8px 8px 50% 50%;
    z-index: -1;
  }

  .blogs-carousel::after {
    height: 50%;
  }

  .team-carousel::after {
    height: 60%;
  }

  #appointment p {
    font-size: 1rem;
  }

  #appointment .form {
    padding: 1.5rem;
  }

  #appointment button {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #team .team-carousel .descriptions h3,
  #team .team .descriptions h3,
  #founders .team-carousel .descriptions h3,
  #officers .team-carousel .descriptions h3 {
    font-size: 1.1rem;
  }

  #team .team-carousel .descriptions h6,
  #team .team .descriptions h6,
  #founders .team-carousel .descriptions h6,
  #officers .team-carousel .descriptions h6 {
    font-size: 0.9rem;
  }

  #offers .item .offer-item {
    padding: 0 10px;
  }

  .offer-item .offer-icon {
    width: 120px;
    height: 80px;
  }

  #offers .item .offer-item h4 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }

  #offers .item .offer-item p {
    font-size: 0.85rem;
  }

  #doctors .right .descriptions h3 {
    white-space: pre;
  }
}

@media (max-width: 575px) {
  #footer img.logo {
    width: 60vw;
  }

  #services .services-carousel,
  #offers .offers-carousel,
  .blogs-carousel {
    padding: 0 15px 45px 15px;
  }

  #team .team-carousel {
    padding: 0 15px 35px 15px;
  }

  #team .team-carousel .owl-item a {
    width: 40px;
    height: 40px;
  }

  #contact-us .details,
  #contact-us .details:nth-child(3) {
    width: 100%;
    margin: 1rem 0;
  }

  #contact-us .form {
    padding: 1.5rem;
  }

  #doctors {
    .right {
      .descriptions h3 {
        font-size: 1.3rem;
      }

      .btn-lg-square {
        width: 31px;
        height: 31px;
        padding: 0.35rem;
        font-size: 1rem;
      }
    }
  }

  .modal-content {
    width: 90%;
    margin: 35% auto;
  }

  #responseModal .modal-content button {
    width: 30%;
  }
}

@media (max-width: 552px) {
  .navbar-brand h1 {
    font-size: 1.2rem;
  }

  .navbar-brand img.logo {
    width: 9%;
  }

  .navbar-brand .fa-clinic-medical,
  .navbar-brand .fa-hospital-o {
    font-size: 2rem;
  }

  .navbar-light .navbar-nav .nav-link {
    font-size: 1rem;
  }

  #find-a-doctor .find-a-doctor .specialization {
    width: 50%;
  }

  #find-a-doctor .find-a-doctor .circle {
    margin: 0.5rem 3rem;
  }

  #find-a-doctor .doctors .descriptions h3 {
    white-space: pre;
  }
}

@media (max-width: 425px) {
  .hero-header h1 {
    font-size: 2.5rem;
  }

  .navbar-brand img.logo {
    width: 12%;
  }

  .hero-header a {
    padding: 0.4rem 1.2rem;
    /* font-size: 0.8rem; */
  }

  #about-us .heading h1,
  #offers h1,
  #appointment h1,
  #services h1,
  #team h1,
  #founders h1,
  #officers h1,
  #history h1,
  #contact-us h1 {
    font-size: 1.68rem;
  }

  #find-a-doctor .find-a-doctor .specialization h5 {
    font-size: 1rem;
  }

  #find-a-doctor .find-a-doctor .circle {
    margin: 0.5rem 2.5rem;
  }
}

@media (max-width: 407px) {
  .navbar .navbar-brand {
    width: 75%;
  }

  .navbar-brand img.logo {
    width: 13%;
  }

  .navbar-brand h1 {
    font-size: 1rem;
  }

  .navbar-toggler {
    font-size: 1rem;
  }

  #find-a-doctor .find-a-doctor .circle {
    margin: 0.5rem 2rem;
  }
}

@media (max-width: 375px) {
  #find-a-doctor .find-a-doctor .circle {
    margin: 0.5rem 1.5rem;
  }
}

@media (max-width: 355px) {
  #doctors {
    .right {
      .descriptions h3 {
        font-size: 1.15rem;
      }

      .btn-lg-square {
        padding: 0.3rem;
      }
    }
  }
}

@media (max-width: 331px) {
  #doctors {
    .right {
      .descriptions h3 {
        font-size: 1rem;
      }
      
      .descriptions h6 {
        font-size: 0.9rem;
      }

      & a {
        font-size: 0.9rem;
      }
    }
  }
}

@media (max-width: 320px) {
  #find-a-doctor .find-a-doctor .circle {
    margin: 0.5rem 1rem;
  }
}

@media (min-width: 576px) {
  .team-item .row {
    height: 350px;
  }
}