/* ==================== RESPONSIVE STYLES - CLEANED ==================== */
/* Only classes actually used in HTML files */

/* ==================== MEDIA QUERY: 1200px ==================== */
@media only screen and (max-width: 1200px) {
  .container {
    max-width: 95%;
  }
}

/* ==================== MEDIA QUERY: 991px - TABLET ==================== */
@media only screen and (max-width: 991px) {
p {

    font-size: 16px !important;

}
.carousel-item{
  height: 600px;
}
.text-after::after {
    height: 5px;}
 /* .arrow{
transform: rotate(90deg) !important;
} */
.doctor-frame {
    transform: translate(15%, -41%) rotate(-10deg);
    background: var(--linear-gradient);
}
  /* Typography */
  h3 {
    font-size: 24px !important;
    line-height: 31px !important;
  }

  h4 {
    font-size: 20px !important;
    line-height: 27px;
  }

  .bg-img-section::after{
    width: 150px;
    height: 150px;
  }
button.prev-button, button.next-button {

    top: auto;
    bottom: 0%;
   
}
  h5 {
    font-size: 27px !important;
    line-height: 34px;
    font-weight: 600;
  }

  h6 {
    font-weight: bold;
  }

  /* Buttons */
  .btn {
    font-size: 13px !important;
    font-weight: 400 !important;
  }

  /* Images */
  .img-container {
    height: 340px;
  }

  /* Layout */
  .w-75 {
    width: 100% !important;
  }

  .w-25 {
    width: 100% !important;
  }

  /* Footer */
  footer img {
    width: 150px;
  }

  footer h4 {
    font-size: 16px;
  }
      .navContainer .nav-item{
    display: flex;
border-bottom: 1px solid rgb(218, 218, 218);
}
   .nav-link:hover span::after {
  width: 0% !important;
}
.lan {
    color: rgb(0, 0, 0);
}
}

/* ==================== MEDIA QUERY: 770px - MOBILE ==================== */
@media only screen and (max-width: 770px) {

      p {
        font-size: 16px !important;
    }
  /* RTL Support */
  html[lang="ar"] .text-md-start.text-center,
  html[lang="ar"] .text-md-end.text-center {
    text-align: center !important;
  }

  .img-container {
    height: 330px;
  }

  .header-div {
    height: 220px;
  }

  .doctor-frame {
    transform: translate(15%, -35%) rotate(-7deg);
    background: var(--linear-gradient);
}
  

  /* Grid Layout */
  .container-divs div:nth-child(3n+2) {
    padding-inline-start: 4px;
  }

  .container-divs div:nth-child(3n+1) {
    padding-inline-end: 4px;
  }

  .container-divs div:nth-child(3n) {
    margin-block: 16px;
  }
}

/* ==================== MEDIA QUERY: 550px - SMALL MOBILE ==================== */
@media only screen and (max-width: 550px) {

  
  h1, h2, h3, h4, h5 {
    font-size: 18px !important;
  }

  label:not(.form-check-label) {
    font-size: 15px;
  }

  footer a {
    font-size: 14px;
  }
}

/* ==================== MEDIA QUERY: 450px - EXTRA SMALL MOBILE ==================== */
@media only screen and (max-width: 450px) {

    .doctor-frame {
        min-width: 190%;
        transform: translate(-3%, -42%) rotate(-14deg);
    }
  
  .img-card {
  height: 250px !important;
  }

  p {
    font-size: 14px !important;
    line-height: 18px;
  }
}

/* ==================== MEDIA QUERY: 991px+ DESKTOP ==================== */
@media only screen and (min-width: 991px) {
  /* Home Slider Navigation */
  body:has(.slider-home-nav,.header-div) .nav-link span {
    color: var(--mainColor4);
    font-weight: 400;
  }
 .carousel-item {
    height: 800px;
}
    body:has(.slider-home-nav,.header-div) .navContainer {
        position: absolute;
        top: 0px;
        right: 0px;
        left: 0px;
    }
 body:has(.slider-home-nav,.header-div)   .navContainer .LanguageMenu svg {
    transition: transform 0.2s ease-in-out;


  }
  body:has(.slider-home-nav,.header-div)  .navContainer .LanguageMenu svg path{

    stroke: rgb(255, 254, 254);

  }

  .carousel-caption h3{
text-wrap: balance
  }
   body:has(.slider-home-nav)  .navContainer .LanguageMenu svg path:hover {
    transform: rotateY(180deg);

  }
 body:has(.slider-home-nav,.header-div) .navContainer .nav-link span {
    color: var(--mainColor4);
    font-weight: 400;
}
  .squre-after {
    position: relative;
  }
    .squre-after::after {
      position: absolute;
      content: "";
      width: 120px;
      bottom: 0px;
      left: -50px;
      top: 0px;
      transform: scaleX(1);
      background-image: url(../imgs/home/aftersqure.svg);
      background-position: left;
      background-repeat: no-repeat;
      background-size: contain;
      z-index: -1;
    }
    .header-div {
    position: absolute !important;
    top: 0px;
    bottom: 0px;
    right: 150px;
    z-index: 11;
    transform: scaleY(1.1);
  }
body:has(.slider-home-nav)  .navContainer .LanguageMenu svg path{

    stroke: white;

  }
 body:has(.slider-home-nav)  .navContainer .lan {
    color: var(--mainColor4);
}
 .fs-64 {
  font-size: 64px;
}
 html[lang="ar"]  .fs-64 {
  font-size: 58px;
}
    footer:first-child {
        border-radius: 90px 90px 0px 0px;
    }
        .squre-after:nth-child(1)::after {
        right: -50px;
        transform: scaleX(-1);
        left: auto;
      }
      html[lang="ar"] .squre-after::after {
  right: -50px;
  left: auto;
        transform: scaleX(-1);

      }
            html[lang="ar"] .squre-after:nth-child(1)::after  {
  left: -50px;
  right: auto;
        transform: scaleX(1);

      }
      
      .slider-phone .slick-list {
  overflow: visible;
  padding-block: 30px;
}

.slider-phone .slick-track {
  display: flex;
  align-items: center;
}

.slider-phone .slick-slide {
  transform-origin: left center;
}

.slider-phone .slick-slide {
  padding-inline: 7px;
  transform: scale(0.78);
  opacity: 0.75;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.slider-phone .slick-slide.slick-current {
  transform: scale(1);
  opacity: 1;
  position: relative;
  z-index: 2;
}

.slider-phone .img-card {
  width: 100%;
  height: 260px;
}

.slider-phone .phone-img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transform: translateY(30%);
}

.slider-phone .slick-slide {
  padding-inline: 8px;
  transform: scaleY(0.78);
  opacity: 0.75;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.slider-phone .slick-slide.slick-current {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

 .slider-phone .slick-slide.slick-current {
    width: 430px !important;
  }
html[dir=rtl] .slider-phone .slick-slide {
  transform-origin: right center;
}

html[dir=ltr] .slider-phone .slick-slide {
  transform-origin: left center;
}

.slider-phone .slick-list {
  overflow: hidden;
  padding: 25px 0;
}

}