* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
/* Font family */
/* monserrat */
@font-face {
  font-family: "Montserrat";
  src: url(/assets/fonts/Montserrat/Montserrat-Regular.ttf);
  font-weight: 400;
}
/* roboto */
@font-face {
  font-family: "Roboto";
  src: url(/assets/fonts/Roboto/Roboto-Regular.ttf);
  font-weight: 400;
}
:root {
  /* Font family */
  --font-primary: "Montserrat";
  --font-secondary: "Roboto";
  /* Font Sizes */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 32px;
  --fs-4xl: 48px;
  --fs-5xl: 60px;
  /* colors */
  --color-primary: #ebe5d8;
  --color-secondary: #afe4df;
  --color-lightsecondary: #dbeef1;
  --color-danger: #bb271a;
  /* transitions */
  --trans-300: all 0.3s ease-in-out;
}
.font-monserrat {
  font-family: var(--font-primary) !important;
}
.font-roboto {
  font-family: var(--font-secondary) !important;
}
.color-primary {
  color: var(--color-primary) !important;
}
.color-secondary {
  color: var(--color-secondary) !important;
}
.color-danger {
  color: var(--color-danger) !important;
}
.background-primary {
  background-color: var(--color-primary) !important;
}
.background-secondary {
  background-color: var(--color-secondary) !important;
}
.background-lightsecondary {
  background-color: var(--color-lightsecondary) !important;
}
.background-danger {
  background-color: var(--color-danger) !important;
}
.min-h-vh {
  min-height: 100vh;
}
.bg-cover-center {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.overlay-dark {
  position: relative;
}
.overlay-dark::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.76);
}
.overlay-dark .container {
  position: relative;
  z-index: 20;
}
/* tags branding */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
p,
.p {
  margin: 0;
}
h1,
.h1 {
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--fs-3xl);
  color: var(--color-primary);
}
h2,
.h2 {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: black;
  text-transform: capitalize;
}
h3,
.h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--fs-xl);
  color: black;
}
h4,
.h4 {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--fs-md);
  color: black;
}
p,
.p {
  font-family: var(--font-secondary);
  font-weight: 400;
  font-size: var(--fs-md);
  color: black;
}
.button-primary,
.button-secondary,
.button-dark,
.button-light,
.button-danger {
  padding: 8px 16px;
  border: 2px solid;
  transition: var(--trans-300);
  text-transform: uppercase;
  font-family: var(--font-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  display: inline-block;
  text-decoration: none;
  border-radius: 8px;
}
.button-primary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.button-primary:hover {
  background-color: var(--color-primary);
  color: black;
}
.button-secondary {
  background-color: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.button-secondary:hover {
  background-color: var(--color-secondary);
  color: black;
}
.button-danger {
  background-color: var(--color-danger);
  color: rgb(255, 255, 255);
  border-color: var(--color-danger);
}
.button-danger:hover {
  background-color: transparent;
  color: var(--color-danger);
}
.button-dark {
  background-color: black;
  color: rgb(255, 255, 255);
  border-color: black;
}
.button-dark:hover {
  background-color: transparent;
  color: black;
}
.button-light {
  background-color: white;
  color: var(--color-lightsecondary);
  border-color: white;
}
.button-light:hover {
  background-color: transparent;
  color: white;
}
.position-relative {
  position: relative;
  z-index: 20;
}
.rounded-full {
  border-radius: 9999px !important;
}



/*header*/
      header {
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 999;
          
      }
      
        /* header .bg-light-wheat {
            background-color: rgba(255, 255, 255, 0.4);
        } */

        /*.logo img {*/
        /*    width: 100%;*/
        /*    height: 100px;*/
        /*}*/
        
        .logo-width{
          width: 600px !important;
        }
        .header-button a {
            text-decoration: none;
            background-color: transparent !important;
            color: var(--color-secondary);
        }

        .header-button a:hover {
            color: #ffffff;
        }

   
        .darkHeader {
          transition: background-color 300ms linear;
            background-color: rgba(0, 0, 0);
        }
        
        
        
/* hero-sec */
.hero-sec {
  min-height: 80vh;
}

/* about-us-sec */
.about-us-sec {
  .column-one::before,
  .column-second::before {
    content: "";
    position: absolute;
    left: 0;
    z-index: 0;
    width: 100%;
  }
  .column-one::before {
    top: 0;
    background-color: var(--color-primary);
    height: 70%;
  }
  .column-second::before {
    bottom: 0;
    background-color: var(--color-secondary);
    height: 30%;
  }
}
/* services-sec */
.services-sec {
  .slick-track .slick-slide,
  .slick-track {
    display: flex;
  }
  .slick-track .slick-slide {
    height: inherit;
  }
  .slick-list {
    border-radius: 12px;
  }
  iframe {
    height: 200px;
  }
}
/* faq-sec */
.faq-sec {
  .accordion-item {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.219);
    background-color: var(--color-primary);
  }
  video {
    max-height: 95vh;
    object-fit: cover;
    object-position: center;
  }
}
/* biography-sec */
.biography-sec {
  .skills-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
/* book-an-appointment-sec */
.book-an-appointment-sec {
  .book-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;

    input {
      background-color: #ffffff66;
      font-family: var(--font-primary);
      font-weight: 500;
      font-size: var(--fs-sm);
      color: black;
      &:focus {
        border: none !important;
        outline: none !important;
      }
      &::placeholder {
        text-transform: capitalize;
        color: black;
      }
    }
  }
}
@media (min-width: 767px) {
  .about-us-sec {
    .column-one::before,
    .column-second::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 0;
      height: 100%;
    }
    .column-one::before {
      background-color: var(--color-primary);
      width: 70%;
      left: 0;
      right: unset;
    }
    .column-second::before {
      left: unset;
      right: 0;
      background-color: var(--color-secondary);
      width: 30%;
    }
  }
  /* book an appointment */
  .book-an-appointment-sec {
    .book-form {
      grid-template-columns: repeat(2, 1fr);
      row-gap: 20px;

      input {
        font-size: var(--fs-md);
      }
    }
  }
  /* award-area */
  .award-area {
    img {
      width: 75%;
      margin: auto;
    }
  }
}
@media (min-width: 992px) {
  /* globals */
  h1,
  .h1 {
    font-size: var(--fs-4xl);
  }
  h2,
  .h2 {
    font-size: var(--fs-3xl);
  }
  h3,
  .h3 {
    font-size: var(--fs-2xl);
  }
  h4,
  .h4 {
    font-size: var(--fs-lg);
  }
  p,
  .p {
    font-size: var(--fs-lg);
  }
  .button-primary,
  .button-secondary,
  .button-dark,
  .button-light,
  .button-danger {
    padding: 12px 24px;
    font-size: var(--fs-md);
  }
  .hero-sec {
    min-height: 100vh;
  }
  /* aboutus page */
  /* .about-us-sec {
    .column-one,
    .column-second {
      padding: 40px;
    }
  } */
  /* services sec css */
  .services-sec {
    iframe {
      height: 400px;
    }
  }
  /* book-an-appointment-sec */
  .book-an-appointment-sec {
    .overflow-top-image {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 85%;
    }
  }
}
@media (min-width: 1200px) {
  /* biography sec css */
  .biography-sec {
    .column-big::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 60%;
      z-index: 0;
      background-color: var(--color-secondary);
    }
    .overflow-img {
      position: absolute !important;
      width: 40%;
      transform: translate(-100px, 60px);
    }
    margin-bottom: 60px;
  }
  /* book-an-appointment-sec */
  .book-an-appointment-sec {
    .book-appointment-box {
      margin: 0px 100px;
    }
  }
}
@media (min-width: 1560px) {
  .about-us-sec {
    .container {
      max-width: unset !important;
    }
    .success-container {
      width: max-content;
    }
    .column-one {
      padding: 60px 0px 60px 140px;
    }
    .column-second {
      padding: 60px 140px;
    }
  }
}
@media (max-width: 1200px) {
  .about-us-sec {
    h3 {
      font-size: var(--fs-xl);
    }
    h4 {
      font-size: var(--fs-xs);
    }
  }
  /* biography sec css */
  .biography-sec {
    background-color: var(--color-secondary);
  }
}
@media (max-width: 360px) {
  .hero-sec {
    h1 span {
      font-size: 7vw;
    }
    .button-primary, .button-secondary {
      padding: 8px 10px;
      font-size:3.4vw;
  }
  }
}