/*---------------------------------------------------*/
/*  Mobile Responsive Fixes
/*  Targets screens <= 767px (phones) and <= 991px (tablets)
/*---------------------------------------------------*/

/* Prevent any element from causing horizontal scroll */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* --------------------------------
   Banner / Home Section
   -------------------------------- */
@media (max-width: 767px) {
  /* Reduce huge title size on phones */
  .home-title-s1 {
    font-size: 2.8rem !important;
    line-height: 1.1 !important;
  }

  .home-title-s1 .subtitle {
    font-size: 1rem !important;
    letter-spacing: 0.1em !important;
  }

  .home-subtitle {
    font-size: 1.4rem !important;
  }

  .home-hero-text {
    font-size: 1rem !important;
    max-width: 100% !important;
  }

  /* Stack the banner image below text on mobile */
  #home .col-lg-6.order-lg-2 {
    margin-bottom: 2rem;
  }

  /* Keep image contained in blob */
  .img-wrap-s2-inner,
  .img-wrap-s1-inner {
    max-width: 320px;
    margin: 0 auto;
  }
}

/* --------------------------------
   Section Titles
   -------------------------------- */
@media (max-width: 767px) {
  .section-title-s1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
  }

  .section-title-s3 {
    font-size: 2.2rem !important;
  }

  .section-title-s4 {
    font-size: 1.8rem !important;
    line-height: 1.2 !important;
  }

  .section-title-s5 {
    font-size: 2.5rem !important;
  }

  .page-section-title {
    margin-bottom: 2rem !important;
  }

  /* Disable decorative lines that cause overflow */
  .line-left:before,
  .line-right:before {
    display: none !important;
  }

  /* Reset offsets for titles */
  .offset-lg-3, .offset-lg-2 {
    margin-left: 0 !important;
  }
}

/* --------------------------------
   Marquee / Scrolling Text
   -------------------------------- */
@media (max-width: 767px) {
  .marquee-text {
    overflow: hidden;
    font-size: 1.5rem !important;
  }
}

/* --------------------------------
   About Section
   -------------------------------- */
@media (max-width: 991px) {
  .img-wrap-s1-inner {
    max-width: 280px;
    margin: 0 auto 2rem auto;
  }
}

/* --------------------------------
   Experience Cards
   -------------------------------- */
@media (max-width: 991px) {
  .experience-card-s1 {
    flex-direction: column !important;
    text-align: left !important;
  }

  .experience-card-s1 .text-lg-end {
    text-align: left !important;
  }
}

/* --------------------------------
   Portfolio Grid
   -------------------------------- */
@media (max-width: 767px) {
  .portfolio-layout-s1 .col-lg-4 {
    margin-top: 0 !important;
  }
}

/* --------------------------------
   Counter/Stats Section
   -------------------------------- */
@media (max-width: 575px) {
  .counter-card-s2__digit {
    font-size: 2.5rem !important;
  }
}

/* --------------------------------
   Contact Section
   -------------------------------- */
@media (max-width: 767px) {
  .contact-info-s1 {
    margin-bottom: 2rem;
  }
}

/* --------------------------------
   General Layout Fixes
   -------------------------------- */
@media (max-width: 767px) {
  .page-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Prevent blurred backgrounds from overflowing */
  .bg-blurred-red,
  .bg-blurred-purple,
  .bg-blurred-red-1 {
    max-width: 100%;
    overflow: hidden;
  }

  /* Make all images fluid */
  img {
    max-width: 100%;
    height: auto;
  }
}

/* --------------------------------
   Tablet Fixes (768px - 991px)
   -------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .home-title-s1 {
    font-size: 5rem !important;
  }

  .home-subtitle {
    font-size: 2rem !important;
  }
}