/* =====================================================
   responsive.css
   Purpose: Mobile & Tablet Advanced UI Enhancements
   Compatible with: Bootstrap 5 + Custom style.css
   Author: Website Strategist UX Layer
===================================================== */


/* =====================================================
   1. Large Devices (Desktops & Laptops ≤ 1200px)
   Minor typography scaling
===================================================== */
@media (max-width: 1200px) {

  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.8rem;
  }

}


/* =====================================================
   2. Medium Devices (Tablets ≤ 992px)
   Improve spacing & navigation
===================================================== */
@media (max-width: 992px) {

  /* Navbar adjustments */
  .navbar {
    padding: 0.75rem 1rem;
  }

  .navbar .nav-link {
    padding: 0.6rem 0.7rem;
  }

  /* Section spacing */
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

}


/* =====================================================
   3. Small Devices (Tablets & Mobiles ≤ 768px)
   Advanced Mobile UI (App-like feel)
===================================================== */
@media (max-width: 768px) {

  /* -----------------------------
     Global typography
  ----------------------------- */
  body {
    font-size: 15px;
    line-height: 1.7;
  }

  h1 {
    font-size: 1.9rem;
    line-height: 1.3;
  }

  h2 {
    font-size: 1.5rem;
  }

  p, li {
    font-size: 15px;
  }

  /* -----------------------------
     Section padding (touch friendly)
  ----------------------------- */
  section {
    padding: 2.5rem 1.2rem;
  }

  /* -----------------------------
     Cards – premium look
  ----------------------------- */
  .card {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  /* -----------------------------
     Buttons – app style
  ----------------------------- */
  .btn {
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 16px;
  }

  /* -----------------------------
     Navbar brand size
  ----------------------------- */
  .navbar-brand {
    font-size: 1.15rem;
  }

  /* -----------------------------
     Images smoother
  ----------------------------- */
  img {
    border-radius: 14px;
  }

  /* -----------------------------
     Utility helpers
  ----------------------------- */
  .text-center-mobile {
    text-align: center;
  }

  .hide-mobile {
    display: none !important;
  }

}


/* =====================================================
   4. Extra Small Devices (Phones ≤ 576px)
   One-hand friendly UI
===================================================== */
@media (max-width: 576px) {

  /* Headings scale down */
  h1 {
    font-size: 1.7rem;
  }

  h2 {
    font-size: 1.4rem;
  }

  /* Buttons full width */
  .btn {
    width: 100%;
  }

  /* Card spacing */
  .card {
    margin-bottom: 1rem;
  }

  /* Footer alignment */
  footer {
    text-align: center;
  }

  footer .d-flex {
    flex-direction: column;
  }

}


/* =====================================================
   5. Sticky Mobile CTA (Bottom Action Bar)
   App-like conversion booster
===================================================== */
@media (max-width: 768px) {

  .mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #0d6efd;
    text-align: center;
    padding: 12px;
    z-index: 999;
  }

  .mobile-cta a {
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
  }

}


/* =====================================================
   6. Optional Premium Touch (Glassmorphism)
   Uncomment if you want ultra-modern feel
===================================================== */
/*
@media (max-width: 768px) {
  .card {
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.95);
  }
}
*/


/* =====================================================
   End of responsive.css
   Result:
   ✔ Mobile-first premium UI
   ✔ App-like experience
   ✔ Bootstrap safe
   ✔ Production ready
===================================================== */








/* ===============================
   Fix: Scroll To Top Button
   Prevent full width on mobile
================================ */
@media (max-width: 576px) {
  #scrollTop {
    width: auto !important;
  }
}