/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/*=============== VARIABLE CSS ===============*/
:root {
    --header-height:3rem;

/*=============== Hsl color ===============*/
    --hue-color: 180;
    --blue-color:hsl(224, 63%, 52%);
    --first-color-alt:hsl(224, 72%, 50%);
    --container-color:hsl(var(--hue-color), 90%, 100%);
    --title-color:hsl(var(--hue-color), 90%, 0%);
    --text-color:hsl(var(--hue-color), 2%, 35%);
    --text-color-light:hsl(var(--hue-color), 7%, 50%);
    --scroll-bar-color:hsl(var(--hue-color), 10%, 80%);
    --scroll-thumb-color:hsl(var(--hue-color), 10%, 40%);


/*=============== Font & typography ===============*/
    --body-font: 'Poppins', sans-serif;
    --title-font: 'Poppins', sans-serif;
    --biggest-font-size: 2.5rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;
/*=============== Font weight ===============*/
    --font-light:400;
    --font-medium: 500;
    --font-semi-bold: 600;
/*=============== Margin bottom ===============*/
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-25: 1.25rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
/*=============== Z-index ===============*/
    --z-tooltip: 10;
    --z-fixed: 100;
/*=============== Hover overlay ===============*/
    --img-transition: .3s;
    --img-hidden: hidden;
    --img-scale: scale(1.1);
}

@media screen and (min-width: 968px) {
    :root {
      --biggest-font-size: 4rem;
      --h1-font-size: 2.25rem;
      --h2-font-size: 1.75rem;
      --h3-font-size: 1.25rem;
      --normal-font-size: 1rem;
      --small-font-size: .875rem;
      --smaller-font-size: .813rem;
    }
  }
  
/*=============== BASE ===============*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: var(--header-height) 0 0 0;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
  }
  
  h1, h2, h3 {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
    font-family: var(--title-font);
  }
  
  ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
  }
  
  img
   {
    max-width: 100%;
    height: auto;
  }
  
  button,
  input {
    border: none;
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
  }
  
  button {
    cursor: pointer;
  }
  
  input {
    outline: none;
  }
  
  .main {
    overflow-x: hidden;
  }
  
/*=============== REUSABLE CSS CLASSES ===============*/
.section {
    padding: 4.5rem 0 2.5rem;
  }
  
  .section_title {
    font-size: var(--h2-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
    text-align: center;
    text-transform: capitalize;
    margin-bottom: var(--mb-2);
  }
  
  .container {
    max-width: 968px;
    margin-left: var(--mb-1);
    margin-right: var(--mb-1);
  }
  
  .grid {
    display: grid;
    gap: 1.5rem;
  }
  
/*=============== BUTTONS ===============*/
.button {
    display: inline-block;
    background-color: var(--blue-color);
    color: var(--container-color);
    padding: 1rem 1.2rem;
    border-radius: .25rem;
    font-weight: var(--font-medium);
    transition: .3s;
  }
  
  .button:hover {
    background-color: var(--first-color-alt);
  }
  .button_icon{
    transition: .3s;
  }
  
  .button:hover .button_icon{
    transform: translateX(.25rem);
  }
  
  .button--flex {
    display: flex;
    align-items: center;
    column-gap: .5rem;
  }
  
  .button--link {
    background: none;
    padding: 0;
  }
  
  .button--link:hover {
    background: none;
  }
/*=============== HEADER ===============*/
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--container-color);
  z-index: var(--z-fixed);
  transition: .3s;
}
/*=============== NAV ===============*/
.nav{
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav_logo, .nav_toggle, .nav_close{
  cursor: pointer;
}
.nav_toggle, .nav_close{
  font-size: 1.25rem;
}
.nav_logo{
  text-transform: uppercase;
  letter-spacing: -1px;
  font-size: var(--normal-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}
.nav_logo:hover{
  color: var(--blue-color);
  transition: .5s;
}
.nav_close{
  right: 1rem;
  top: 1rem;
  position: absolute;
}
.nav_list{
  margin-top: 2rem;
}
.nav_item{
  margin-bottom: var(--mb-2);
}
.nav_link{
  cursor: pointer;
  color: var(--text-color);
  font-weight: var(--font-medium);
}
.nav_contacts{
  position: absolute;
  bottom: 2rem;
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
}


@media screen and (max-width: 767px) {
  .nav_menu{
    position: fixed;
    background-color: var(--container-color);
    top: 0;
    right: -100%;
    height: 100%;
    width: 70%;
    box-shadow: -1px 0 4px rgba(14, 55, 63, 0.15);
    border-radius: .5rem 0 0 .5rem;
    padding: 3rem;
    transition: .3s;
  }
}
/*=============== Show menu ===============*/
.show-menu{
  right: 0;
}
/*=============== Scroll-header ===============*/
.scroll-header{
  box-shadow: 0 0 4px rgba(14, 55, 63, 0.15);
}
/*=============== Active link ===============*/
.active-link{
  position: relative;
  color: var(--first-color);
}

.active-link::after{
  content: '';
  position: absolute;
  bottom: -.6rem;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--blue-color);
}

/*=============== HOME ===============*/
.home_container{
  padding: 4.5rem 0 1.5rem;
  row-gap: 2rem;
  position: relative;
}
.home_data-title{
  font-size: var(--h1-font-size);
  font-weight: var(--font-medium);
  line-height: 140%;
  margin-bottom: var(--mb-0-75);
}
.home_data-description{
  margin-bottom: var(--mb-2);
  font-size: var(--normal-font-size);
}
.home_img{
  display: flex;
  justify-self: center;
  width: 200px;
  transition: var(--img-transition);
  margin-bottom: 8rem;
}
.home_stats{
  position: fixed;
  bottom: 0;
  display: inline-flex;
  column-gap: 1rem;
  justify-self: center;
  height: 100px;
  background-color: #dae2e64b;
  background-clip: padding-box;
  backdrop-filter: blur(80px);
  box-shadow: -5px 10px 20px rgba(14, 55, 63, 0.15);
  border-radius: .5rem;
  padding: 1rem;
}

.home_stat-content{
  display: grid;
  justify-content: center;
}
.home_stat-number{
  color: var(--blue-color);
  font-size: var(--normal-font-size);
}
.home_stat-description{
  font-size: var(--small-font-size);

}

/*=============== ABOUT ===============*/
.about_container{
  row-gap: 2rem;
}
.about_title{
  margin-bottom: var(--mb-1);
  font-size: var(--h2-font-size);
  font-weight: var(--font-medium);
}
.about_description{
  font-size: var(--normal-font-size);
  margin-bottom: 1.5rem;
  
}
.about_checklist{
  display: grid;
  align-items: center;
}
.check_button{
  color: var(--blue-color);
  font-size: 1.25rem;


}
.about_checklist-description{
  display: inline-flex;
  column-gap: .5rem;
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-0-75);
}
.about_img{
  justify-self: center;
  width: 320px;
  transform: var(--img-scale);
}
/*=============== TEAM SWIPER ===============*/
.team_description{
  text-align: center;
  color: var(--text-color);
  font-size: var(--normal-font-size);
  margin-bottom: 3rem;
}
.team_card, .doctor_img{
  width: 200px;
  height: 250;
}
.team_card{
  background-color: #dae2e6;
  overflow: var(--img-hidden);
  padding: .5rem;

}
.doctor_img{
  margin-top: 1.5rem;
}
.doctor_img:hover{
  transform: var(--img-scale);
  transition: var(--img-transition);
}
.doctor_data{
  text-align: center;
  padding: .5rem;
  margin-top: 1rem;

}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: none;
}

/*=============== SERVICES ===============*/
.services_container{
  row-gap: 2rem;
}
.services_description{
  text-align: center;
  margin-bottom: var(--mb-2-5);
}
.services_content{
  grid-template-columns: repeat(1, 1fr);
  justify-items: center;

}
.services_card{
  width: 320px;
  box-shadow: 0 4px 7px rgba(14, 55, 63, 0.15);
  padding: .75rem;
  border-radius: .5rem;
  margin-bottom: 2rem;
}
.service_overlay, .services_img{
  position: relative;
}
.services_img{
  width: 320px;
  border-radius: .5rem .5rem 0 0;
  row-gap: 1rem;
}
.service_button{
  position: absolute;
  bottom: .35rem;
  right: 0;
  background-color: var(--blue-color);
  color: var(--container-color);
  font-size: 1rem;
  padding: .625rem;
  border-radius: .2rem;
}
.services_data{
  margin-top: var(--mb-1);
  margin-bottom: 2rem;
}
.services_data-title{
  font-size: var(--normal-font-size);
  font-weight: var(--font-semi-bold);
  margin-bottom: var(--mb-0-5);
  color: rgb(48, 45, 45);
}
.button--service{
  display: inline-block;
  justify-content: center;
  justify-self: center;
}

/*=============== CONSULTATION ===============*/
.consultation_container{
  row-gap: 2.5rem;
}
.consultation_data{
  margin-bottom: var(--mb-2-5);
}
.consultation_title{
  font-size: var(--h1-font-size);
  font-weight: var(--font-medium);
  margin-bottom: var(--mb-2);
}
.consultation_content{
  row-gap: 2.5rem;
}
.consultation_card{
  position: relative;
  justify-self: center;
  width: 290px;
  height: 270px;
  padding: 1rem;
  border-radius: 2.5rem;
  background: linear-gradient(45deg, #cacaca, #f0f0f0);
  box-shadow:  25px -25px 51px #bebebe,
             -25px 25px 51px #ffffff;
}
.consultation_icon-1{
  position: absolute;
  top: 1.5rem;
  font-size: 1.5rem;
  color: var(--blue-color);
}
.consultation_card-title{
  font-size: var(--h3-font-size);
  font-weight: var(--font-semi-bold);
  margin-top: 4.5rem;
  margin-bottom: .625rem;
}
.consultation_card-description{
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  margin-bottom: 2rem;
}
.consultation_button{
  display: inline-flex;
  background-color: var(--blue-color);
  color: var(--container-color);
  padding: .725rem;
  border-radius: .5rem;
  font-weight: var(--font-medium);
  transition: .3s;
  width: 100%;
}
.consultation_button p{
  margin-left: auto;
  margin-right: auto;
}

/*=============== TESTIMONIALS ===============*/
.testimonial_description{
  text-align: center;
  margin-bottom: 3rem;
}
.testimonial_card{
  position: relative;
  background-color: #cacaca44;
  padding: 1rem;
  padding-top: 4rem;
  width: 260px;

}
.testimonial_icon{
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: 0.4;
  color: var(--blue-color);
  font-size: 2.5rem;
}

.testimonial_details{
  display: flex;
  align-items: center;
  margin-top: 2rem;
  column-gap: 1rem;
}
.testimonial_img{
  position: relative;
  height: 75px;
  width: 80px;
}
.testimonial_img img{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50%;
  border-radius: 50%;
}
.testimonial_patient{
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: none;
}

/*=============== CONTACT ===============*/
.contacts_container{
  row-gap: 4.5rem;

}
.contacts_form{
  position: relative;
}
.contacts_title{
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  color: var(--title-color);
  margin-bottom: 2rem;
}
.form_div{
  display: grid;
  position: relative;
  height: 3rem;
  margin-bottom: 2rem;
}

.contacts_input{
  margin-top: 1rem;
  border-bottom: 1px solid var(--text-color);
}
.contacts_area{
  outline: none;
  border: none;
  border-bottom: 1px solid var(--text-color-light);
  height: 7rem;
  margin-top: 1rem;
  margin-bottom: 3rem;
  width: 100%;
}
.contacts_label{
  color: var(--text-color-light);
}
iframe{
  width: 100%;
  height: 420px;
  justify-self: center;
}
/*=============== FOOTER ===============*/
.footer_container{
  row-gap: 2.5rem;
}
.footer_logo{
  font-size: var(--h3-font-size);
  letter-spacing: -1px;
  margin-bottom: 2rem;
  font-weight: var(--font-semi-bold);
}
.subscribe_title{
  margin-bottom: .725rem;
  font-size: var(--h2-font-size);
  font-weight: var(--font-medium);
  text-transform: capitalize;
  color: var(--title-color);
}
.subscribe_description{
  text-align: initial;
  margin-bottom: 1.5rem;
}
.subscribe_form {
  background-color:#dae2e6;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  border-radius: .5rem;
  margin-bottom: 2.5rem;
}

.subscribe_input {
  width: 60%;
  padding-right: 1rem;
  background-color: #dae2e6;
  color: var(--text-color);
}

.subscribe_input::placeholder {
  color: var(--text-color);
}
.footer_data-title{
  color: var(--text-color);
}
.footer_link{
  color: var(--text-color-light);
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  padding-bottom: .5rem;
}
.footer_social{
  margin-top: 1rem;
  display: inline-flex;
  column-gap: .625rem;
}
.footer_social-link{
  color: var(--blue-color);

}
.footer_social-link:hover{
  transform: translateY(-.25rem);
}
.footer_rights{
  display: grid;
  margin-top: 3rem;
  justify-content: center;
}
.footer_copyright{
  text-align: center;
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}
.footer_terms{
  display: flex;
  column-gap: 1.5rem;
}
.footer_terms-link{
  font-size: var(--small-font-size);
  color: var(--text-color-light);
}

/*========== SCROLL UP ==========*/
.scrollup {
  position: fixed;
  right: 1rem;
  bottom: -20%;
  background-color: var(--blue-color);
  padding: .5rem;
  display: flex;
  opacity: .9;
  z-index: var(--z-tooltip);
  transition: .4s;
}

.scrollup:hover {
  background-color: var(--first-color-alt);
  opacity: 1;
}

.scrollup_icon {
  color: var(--container-color);
  font-size: 1.2rem;
}

/* Show scroll */
.show-scroll {
  bottom: 5rem;
}
/*=============== SCROLLBAR ===============*/
::-webkit-scrollbar{
  background: var(--scroll-bar-color);
  width: .6rem;
}
::-webkit-scrollbar-thumb{
  background: var(--scroll-thumb-color);
  border-radius: .5rem;
}

@media screen and (min-width: 574px) {

  .consultation_data{
    padding-top: 5rem;
  }
  .consultation_card-title,
  .consultation_card-description
  {
    font-size: var(--smaller-font-size);
  }
  .consultation_card-title{
    font-size: var(--small-font-size);
    margin-top: 2.5rem;
  }  
  .consultation_card-description{
    margin-bottom: 1rem;
  }

  .consultation_button p{
    font-size: var(--smaller-font-size);
  }
  }

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

  .nav {
    height: calc(var(--header-height) + 1.5rem);
  }
  .nav_link {
    color: var(--text-color);
    text-transform: initial;
  }
  .nav_contacts, .nav_toggle, .nav_close{
    display: none;
  }
  .nav_list{
    display: flex;
    flex-direction: row;
    column-gap: 2.5rem;
  }
  .section{
    padding: 8rem 0 1rem;
  }
  .section_title{
    margin-bottom: 3rem;
  }
  .home{
    padding: 5rem 0 2rem;
  }
  .home_container{
    grid-template-columns: 1.2fr .8fr;
    column-gap: 4rem;
    position: relative;
    height: 80vh;
    
  }
  .home_img{
    position:absolute ;
    width: auto;
    height: 410px;
    right: 1rem;
  }

  .home_stats{
    bottom: 2.5rem;
    column-gap: 4rem;
    height: 100px;
    backdrop-filter: blur(30px);
    padding: 1rem 2.5rem;
  }
  .home_stat-content{
    display: grid;
    justify-content: center;
  }
  .home_stat-number{
    font-size: var(--h3-font-size);
    font-weight: var(--font-semi-bold);
    text-align: center;
  }
  
  .about_container{
    grid-template-columns: 1fr .8fr;
    gap: 3rem;
  }
  .about_data{
    margin-bottom: 1rem;
  }

  .about_img{
    margin-top: auto;
    margin-bottom: auto;
    width: 420px;
  }
  .team_container{
    margin-left: auto;
    margin-right: auto;
    width: 600px;
  }
  .services_content{
    grid-template-columns: repeat(2, 1fr);
  }
  .consultation_container{
    grid-template-columns: 1.2fr .8fr;
  }
  .consultation_card{
    height: 210px;
    width: 200px;
  }
  .consultation_content{
    grid-template-columns: repeat(2, 1fr);
  }
  .contacts_container{
    grid-template-columns: .8fr 1fr ;
    gap: 3rem;
  }
  .testimonials_container{
    margin-left: auto;
    margin-right: auto;
    width: 700px;
  }
  .testimonial_card{
    width: 600px;
  }
  .footer_container{
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    column-gap: 3rem;
  }
  .footer_logo{
    margin-bottom: 1rem;
  }
  .footer_rights{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .footer_copyright{
    font-size: var(--smaller-font-size);
  }
  .footer_terms{
    display: flex;
    justify-content: space-between;
    font-size: var(--smaller-font-size);
  }
}

/*=============== Large screens ===============*/
@media screen and (min-width:1024px) {
  .container{
    margin-left: auto;
    margin-right: auto;
  }
  .services_content{
    grid-template-columns: repeat(3, 1fr);
  }
  .footer_container{
    grid-template-columns: 1.3fr .4fr .4fr .4fr;
  }
}