/* ============================================
   RESPONSIVE BREAKPOINTS - Mobile First Approach
   ============================================ */

@media only screen and (max-width: 680px) {
  .strength-title {
    font-size: 45px;
  }
}

/* Extra Small Devices - Mobile (up to 575px) */
@media (max-width: 575px) {
  /* blog */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* footer */
  .footer-text {
    text-align: center;
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  /* steps */
  .step-number {
    font-size: 100px;
    top: -8%;
  }

  .step-content {
    padding-top: 0px;
    margin: 35px 0 0 40px;
  }
  /* leaf */
  img.leaf-2 {
    left: 20%;
    bottom: -160%;
  }
  .navbar-nav a > span::after {
    background-color: transparent !important;
  }
  .navbar-expand-lg .navbar-brand {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* Small Devices - Large Mobile (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  /* blog */
  .blog-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
  }

  /* footer */
  .footer-text {
    text-align: center;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* steps */
  .step-number {
    font-size: 100px;
    top: -10%;
  }

  .step-content {
    padding-top: 0px;
    margin: 25px 0 0 30px;
  }
  /* leaf */
  img.leaf-2 {
    left: 20%;
    bottom: -180%;
  }

  .services-slider
    .swiper-controls
    .swiper-navigation
    .swiper-button.swiper-button-next {
    right: -1.5rem;
  }

  .services-slider
    .swiper-controls
    .swiper-navigation
    .swiper-button.swiper-button-prev {
    left: -1.5rem;
  }
  .navbar-nav a > span::after {
    background-color: transparent !important;
  }
  .navbar-expand-lg .navbar-brand {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* Medium Devices - Tablet (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  /* blog */
  .blog-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 30px !important;
  }

  /* footer */
  .footer-text {
    text-align: center;
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }

  /* steps */
  .step-number {
    font-size: 120px;
    top: -10%;
  }

  .step-content {
    padding-top: 0px;
    margin: 35px 0 0 40px;
  }

  /* leaf */
  img.leaf-2 {
    left: 20%;
    bottom: -200%;
  }

  .services-slider
    .swiper-controls
    .swiper-navigation
    .swiper-button.swiper-button-next {
    right: -2rem;
  }

  .services-slider
    .swiper-controls
    .swiper-navigation
    .swiper-button.swiper-button-prev {
    left: -2rem;
  }
  .navbar-nav a > span::after {
    background-color: transparent !important;
  }
  .navbar-expand-lg .navbar-brand {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* Large Devices - Desktop (992px and up) */
@media (min-width: 992px) {
  /* blog */
  .blog-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    gap: 40px !important;
  }

  /* footer */
  .footer-text {
    text-align: left;
    grid-template-columns: 3fr 1fr 2fr !important;
    gap: 30px !important;
  }

  /* steps */
  .step-number {
    font-size: 140px;
    top: -12%;
  }

  .step-content {
    padding-top: 0px;
    margin: 50px 0 0 50px;
  }

  .services-slider
    .swiper-controls
    .swiper-navigation
    .swiper-button.swiper-button-next {
    right: -2rem;
  }

  .services-slider
    .swiper-controls
    .swiper-navigation
    .swiper-button.swiper-button-prev {
    left: -2rem;
  }
}

/* Other Pages Media Queries */

@media (max-width: 1024px) {
  .about-banner-handler,
  .health-banner-handler,
  .shakus-living-banner-handler,
  .holistic-banner-handler {
    height: 200px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
@media (max-width: 991.98px) {
  .big-number1 {
    top: 0px;
    left: 55px;
  }
}
@media only screen and (max-width: 800px) {
  .about-banner-handler h1,
  .health-banner-handler h1,
  .shakus-living-banner-handler h1,
  .holistic-banner-handler h1 {
    font-size: 40px !important;
  }
}
@media (max-width: 768px) {
  .map-responsive {
    height: 300px;
  }
}
@media (min-width: 538px) and (max-width: 767px) {
  .big-number1 {
    top: 0px;
    left: 172px;
  }
  .big-number2 {
    top: -15px;
    left: 54px;
  }
}
@media (max-width: 480px) {
  .big-number1 {
    top: 0px;
    left: 132px;
  }
}
@media only screen and (max-width: 425px) {
  .counter-text .counter {
    font-size: 144px;
  }
  .big-number1 {
    top: 0px;
    left: 132px;
  }
  .big-number2 {
    top: -4px;
    left: 38px;
  }
  .shakus-living-banner-handler {
    height: 148px;
  }
}
@media only screen and (max-width: 380px) {
  .counter-text .counter {
    font-size: 123px;
  }
}
@media only screen and (max-width: 320px) {
  .shakus-living-banner-handler {
    height: 127px;
  }
}