/* @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,400;1,200&display=swap'); */


  /* @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400&display=swap'); */

  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400&display=swap');


:root {
  --blue: #1659a2;
  --brown: #f0bf4c;
  --maroon: #B8324E;
  --beige: #F5F5DC;
  --black: #444;
  --light-color: #1659a2;
  --box-shadow: .5rem .5rem 0 rgba(51, 102, 153, .3);
  --text-shadow: .4rem .4rem 0 rgba(0, 0, 0, .2);
  --border: .3rem solid var(--blue);
}

* {
  font-family: 'Roboto';
  ;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-transform: capitalize;
  text-decoration: none;
  transition: all .2s ease-out;
}

html {
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-padding-top: 7rem;
  scroll-behavior: smooth;
}

section {
  padding: 2rem 9%;
}

section:nth-child(even) {

  background: var(--beige);
  /* Gradient from Dodger Blue to Steel Blue */
  /* color: #fff; */
  /* White text for contrast */
}

section:nth-child(odd) {
  background: var(--beige);
  /* Gradient from Light Grayish Blue to Powder Blue */
  /* color: #333; */
  /* Dark Gray text for contrast */
}

.heading {
  text-align: center;
  padding-bottom: 2rem;
  text-shadow: var(--text-shadow);
  text-transform: uppercase;
  color: var(--maroon);
  font-size: 5rem;
  letter-spacing: .4rem;
}

.heading span {
  text-transform: uppercase;
  color: var(--blue);
}

.btn {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem;
  padding-left: 1rem;
  border: var(--border);
  border-radius: 2rem;
  box-shadow: var(--box-shadow);
  color: var(--blue);
  cursor: pointer;
  font-size: 1.7rem;
  background: #fff;
}

.btn span {
  padding: .7rem 1rem;
  border-radius: 1rem;
  background: var(--blue);
  color: #fff;
  margin-left: .5rem;
}

.btn:hover {
  background: var(--blue);
  color: #fff;
}

.btn:hover span {
  color: var(--blue);
  background: #fff;
  margin-left: 1rem;
}

/* Header Section Starts */
.header {
  padding: 2rem 9%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--brown);
}

.header .logo {
  font-size: 2.5rem;
  color: var(--blue);
}

.header .logo i {
  color: var(--blue);
}

.header .navbar a {
  font-size: 1.7rem;
  color: var(--light-color);
  margin-left: 2rem;
}

.header .navbar a:hover {
  color: var(--blue);
}

#menu-btn {
  font-size: 2.5rem;
  border-radius: .5rem;
  background: #eee;
  color: var(--blue);
  padding: 1rem 1.5rem;
  cursor: pointer;
  display: none;
}

/* Header Section End */

/* Home Section starts */
.home {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 10rem;
}

.home .image {
  flex: 1 1 45rem;
}

.home .image img {
  width: 100%;
}

.home .content {
  flex: 1 1 45rem;
}

.home .content h3 {
  font-size: 4.5rem;
  /* font-weight: 700; */
  color: var(--maroon);
  line-height: 1.8;
  /* text-shadow: var(--text-shadow); */
}

.home .content p {
  font-size: 1.7rem;
  color: var(--light-color);
  line-height: 1.8;
  padding: 1rem 0;
}

/* Home Section End */

/* icons section starts */
.icons-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.icons-container .icons {
  border: var(--border);
  box-shadow: var(--box-shadow);
  border-radius: .5rem;
  text-align: center;
  padding: 2.5rem;
}

.icons-container .icons i {
  font-size: 4.5rem;
  color: var(--blue);
  padding-bottom: .7rem;
}

.icons-container .icons h3 {
  font-size: 4.5rem;
  color: var(--black);
  padding: .5rem 0;
  text-shadow: var(--text-shadow);
}

.icons-container .icons p {
  font-size: 1.7rem;
  color: var(--light-color);

}

/* icons section End */

/* Service section Starts */
.services .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
  gap: 2rem;
}

.services .box-container .box {
  background: #D3E5D1;
  border-radius: 2rem;
  padding: 2.5rem;
  box-shadow: var(--box-shadow);
  border: .2rem solid var(--box-shadow);
}

.services .box-container .box:hover {
  transform: scale(1.02);
}


.services .box-container .box i {
  color: var(--blue);
  font-size: 5rem;
  padding-bottom: .5rem;
}

.services .box-container .box h3 {
  color: var(--black);
  font-size: 2.5rem;
  padding: 1rem 0;
}

.services .box-container .box p {
  color: var(--light-color);
  font-size: 1.4rem;
  line-height: 2;
}

/* Service section End */

/* About section Start */
.about .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.about .row .image {
  flex: 1 1 45rem;
}

.about .row .image img {
  width: 100%;
}

.about .row .content {
  flex: 1 1 45rem;
}

.about .row .content h3 {
  color: var(--black);
  text-shadow: var(--text-shadow);
  font-size: 4rem;
  line-height: 1.8;
}

.about .row .content p {
  color: var(--light-color);
  padding: 1rem 0;
  font-size: 1.5rem;
  line-height: 1.8;
}

/* About section End  */

/* Doctors section Starts */
.providers .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 2fr));
  gap: 3rem;
}

.providers .box-container .box {
  text-align: center;
  /* background: #D3E5D1; */
  ;
  border: var(--light-color);
  border-radius: 2rem;
  /* box-shadow: var(--box-shadow);   */
  padding: 1rem;
}


.providers .box-container .box img {
  height: 20rem;
  border: var(--border);
  /* box-shadow: var(--box-shadow); */
  border-radius: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.providers .box-container .box img:hover {
  transform: scale(1.1);
}

.providers .box-container .box h3 {
  color: var(--black);
  font-size: 2.5rem;
}

.providers .box-container .box span {
  color: var(--blue);
  font-size: 2rem;
}

.providers .box-container .box .share {
  padding-top: 2rem;
}

.providers .box-container .box .share a {
  height: 6rem;
  width: 17rem;
  line-height: 4.5rem;
  font-size: 2rem;
  color: var(--blue);
  border: var(--border);
  border-radius: 2rem;
  margin: .3rem;
}

.providers .box-container .box .share a:hover {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--box-shadow);
}

/* Doctors section End */

/* Book section Starts */
.book .row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.book .row .image {
  flex: 1 1 45rem;
}

.book .row .image img {
  width: 100%;
  border-radius: 2rem;
  border-shadow: var(--box-shadow)
}

.book .row form {
  flex: 1 1 45rem;
  background: #fff;
  border: var(--border);
  box-shadow: var(--box-shadow);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  border-radius: .5rem;
}

.book .row form h3 {
  color: var(--black);
  padding-bottom: 1rem;
  font-size: 3rem;
}

.book .row form .box {
  width: 100%;
  margin: .7rem 0;
  border: var(--border);
  border-radius: 2rem;
  font-size: 1.6rem;
  color: var(--black);
  text-transform: none;
  padding: 1rem;
}

.book .row form .btn {
  padding: 1rem 4rem;
}

/* Book section End */

/* Review section Starts */
.review .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
  gap: 2rem;
}

.review .box-container .box {
  border: var(--border);
  box-shadow: var(--box-shadow);
  border-radius: .5rem;
  padding: 2.5rem;
  background: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.review .box-container .box img {
  height: 10rem;
  width: 10rem;
  border-radius: 50%;
  object-fit: cover;
  border: .5rem solid #fff;
}

.review .box-container .box h3 {
  color: #fff;
  font-size: 2.2rem;
  padding: .5rem 0;
}

.review .box-container .box .stars i {
  color: #fff;
  font-size: 1.5rem;
}

.review .box-container .box .text {
  color: var(--light-color);
  line-height: 1.8;
  font-size: 1.6rem;
  padding-top: 4rem;
}

.review .box-container .box::before {
  content: "";
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--blue);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  height: 25rem;
  width: 120%;
  z-index: -1;
}



.footer .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 2rem;
}

.footer .box-container .box h3 {
  font-size: 2.5rem;
  color: var(--black);
  padding: 1rem 0;
}

.footer .box-container .box a {
  display: block;
  font-size: 1.5rem;
  color: var(--light-color);
  padding: 1rem 0;
}

.footer .box-container .box a i {
  padding-right: .5rem;
  color: var(--blue);
}

.footer .box-container .box a:hover i {
  padding-right: 2rem;
}

.footer .credit {
  padding: 1rem;
  padding-top: 2rem;
  margin-top: 2rem;
  text-align: center;
  font-size: 2rem;
  color: var(--light-color);
  border-top: .1rem solid rgba(0, 0, 0, .1);
}

.footer .credit span {
  color: var(--blue);
}

.footer .box-container .address p {
  display: flex;
  font-size: 2rem;
  color: var(--light-color);
  padding: 1rem 0
}

/* Footer section End */










/* media queries  */
@media (max-width:991px) {

  html {
    font-size: 55%;
  }

  .header {
    padding: 2rem;
  }

  section {
    padding: 2rem;
  }
}

@media (max-width:768px) {

  #menu-btn {
    display: initial;
  }

  .header .navbar {
    position: absolute;
    top: 115%;
    right: 2rem;
    border-radius: .5rem;
    box-shadow: var(--box-shadow);
    width: 30rem;
    border: var(--border);
    background: #fff;
    transform: scale(0);
    opacity: 0;
    transform-origin: top right;
    transition: none;
  }

  .header .navbar.active {
    transform: scale(1);
    opacity: 1;
    transition: .2s ease-out;
  }

  .header .navbar a {
    font-size: 2rem;
    display: block;
    margin: 2.5rem;
  }

  .book .row form {
    margin: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  


}

@media (max-width:450px) {

  html {
    font-size: 50%;
  }

  .book .row form {
    margin: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .footer .box-container .box {
    display: flex space-between: 1px
  }

  .anim-img1 img {
    width: 70vw;
    margin-left: 80px;
    /* animation: floatImage 4s ease-in-out infinite; */
  }

  .anim-img img {
    width: 80vw;
    margin-left: 80px;
    /* animation: floatImage 4s ease-in-out infinite; */
  }

}

.anim-img1 img {
  width: 40vw;
  /* animation: floatImage 4s ease-in-out infinite; */
}

.anim-img img {
  width: 40vw;
  /* animation: floatImage 4s ease-in-out infinite; */
}

@keyframes floatImage {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2.4rem);
  }

  100% {
    transform: translateY(0);
  }
}

/*FAQS*/
.faq {
  border: 1px solid #bbb;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 5px;
}

.faq_question {
  margin: 0px;
  padding: 0px 0px 5px 0px;
  cursor: pointer;
  font-weight: bold;
  font-size: 2rem;
  padding: 10px 10px 10px 42px;
  background: #6abdc8;
  color: #333;
  position: relative;
}

.faq_question::before,
.faq_question::after {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate3d(0, -50%, 0);
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 20px;
  background-color: rgba(0, 0, 0, .3);
  background-position: center center;
  background-repeat: no-repeat;
}

.faq_question::before {
  display: inline-block;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C5%209%2C5%209%2C0%205%2C0%205%2C5%200%2C5%200%2C9%205%2C9%205%2C14%209%2C14%209%2C9%2014%2C9%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.faq_question::after {
  display: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Crect%20y%3D%225%22%20style%3D%22fill%3A%23FFFFFF%3B%22%20width%3D%2214%22%20height%3D%224%22%2F%3E%3C%2Fsvg%3E");
}

.faq.open .faq_question {
  border-bottom: 1px solid #bbb;
}

.faq.open .faq_question::before {
  display: none;
}

.faq.open .faq_question::after {
  display: block;
}

.faq_answer_container {
  height: 0;
  overflow: hidden;
  padding: 0;
  font-size: 2rem;
}

.faq_answer {
  padding: 20px;
}


.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #d3e9e6;
  margin: 35% auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  font-size: 20px;
  border-radius: 25px;
  box-shadow: #888;
  /* Could be more or less, depending on screen size */
}

/* .modal-content h1{
  font-size: 40px;
}
.modal-content P {
  font-size: 30px;
}
 */

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}