/* =====================================================
   RESPONSIVE OVERRIDES — Mobile & Tablet Only
   -------------------------------------------------------
   Author  : Responsive Enhancement Pass
   Scope   : Fixes for 320px – 1199px ONLY
             Desktop (≥ 1200px) is UNTOUCHED.
   -------------------------------------------------------
   Breakpoints used:
     xl  ≤ 1199px  — large laptops / small desktops
     lg  ≤  991px  — tablets landscape / iPad
     md  ≤  767px  — tablets portrait / large phones
     sm  ≤  575px  — phones landscape / small tablets
     xs  ≤  374px  — small phones (iPhone SE, Galaxy A)
   ===================================================== */

/* ─────────────────────────────────────────────────────
   0.  GLOBAL OVERFLOW / BOX-SIZING HARDENING
   ─────────────────────────────────────────────────────
   Prevent ANY element from blowing past the viewport width.
   body already has overflow-x:hidden but child elements
   with absolute positioning or wide fixed widths can still
   create a scrollable overflow root on some browsers.     */
@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
    width: 100%;
  }
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  /* Prevent absolutely-positioned background shapes from
     creating horizontal scroll on narrow viewports         */
  .hero-bg,
  .sec-texture {
    overflow: hidden;
  }
}


/* ─────────────────────────────────────────────────────
   1.  NAVIGATION
   ─────────────────────────────────────────────────────
   The hamburger + theme-btn sit inside
   .d-flex.align-items-center.gap-3.ms-auto
   On small phones the logo + that flex cluster must not
   wrap or clip.                                           */
@media (max-width: 991px) {
  #mainNav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  /* Tighten the right-side cluster gap on tablets */
  #mainNav .d-flex.align-items-center {
    gap: 0.625rem !important;
  }
  /* Ensure hamburger is always visible */
  .hamburger {
    display: flex !important;
    flex-shrink: 0;
  }
  /* Hide desktop nav entirely (already done via !important
     in main CSS, belt-and-suspenders)                     */
  .navbar-collapse,
  #navbarNav {
    display: none !important;
  }
}

@media (max-width: 374px) {
  /* Smaller logo on tiny phones */
  .navbar-brand img {
    width: 60px !important;
  }
  .theme-btn {
    width: 34px;
    height: 34px;
  }
  .hamburger {
    width: 34px;
    height: 34px;
  }
}


/* ─────────────────────────────────────────────────────
   2.  HERO SECTION — Typography
   ─────────────────────────────────────────────────────
   .hero-title uses font-size:4rem !important in main CSS
   which blocks clamp(). We override with another
   !important scoped to each breakpoint.                   */
@media (max-width: 1199px) {
  .hero-title {
    font-size: 3.4rem !important;
  }
}
@media (max-width: 991px) {
  .hero-title {
    font-size: 3rem !important;
  }
  /* Reduce top/bottom breathing room so the two stacked
     columns don't create a 200vh section                  */
  .hero-section .row {
    min-height: auto !important;
    padding-top: 6rem !important;
    padding-bottom: 2rem !important;
  }
  .col-lg-7.py-5,
  .col-lg-5.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}
@media (max-width: 767px) {
  .hero-title {
    font-size: 2.6rem !important;
  }
  .hero-desc {
    max-width: 100%;
    font-size: 0.95rem;
  }
}
@media (max-width: 575px) {
  .hero-title {
    font-size: 2.25rem !important;
    line-height: 1.1;
  }
  .hero-typed-row {
    font-size: 1rem;
    min-height: 1.8rem;
  }
  .hero-section .row {
    padding-top: 5.5rem !important;
  }
}
@media (max-width: 374px) {
  .hero-title {
    font-size: 1.9rem !important;
  }
  .hero-typed-row {
    font-size: 0.9rem;
  }
  .hero-desc {
    font-size: 0.875rem;
  }
}


/* ─────────────────────────────────────────────────────
   3.  HERO SECTION — Code-card visual
   ─────────────────────────────────────────────────────
   On ≤991px the card stacks below the text content.
   The <pre> block contains code that may exceed mobile
   viewport width — we contain it with overflow-x:auto
   and prevent text wrapping.                             */
@media (max-width: 991px) {
  .hero-visual-wrap {
    max-width: 480px;
    width: 100%;
    margin: 2.5rem auto 1rem;
  }
}
@media (max-width: 575px) {
  .hero-visual-wrap {
    max-width: 100%;
    margin-top: 1.75rem;
  }
  .code-body {
    font-size: 0.72rem;
    padding: 1rem 1.125rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* allow horizontal scroll within the block only */
    white-space: pre;
  }
  .glass-card {
    border-radius: 12px;
  }
}
@media (max-width: 374px) {
  .code-body {
    font-size: 0.65rem;
    padding: 0.875rem 1rem;
  }
}


/* ─────────────────────────────────────────────────────
   4.  HERO STATS BAR
   ─────────────────────────────────────────────────────
   Already gets flex-wrap on ≤575px in main CSS.
   Additional tightening for xs screens.                  */
@media (max-width: 374px) {
  .hero-stats {
    gap: 0.5rem;
    padding: 0.875rem 0;
    flex-wrap: wrap;
  }
  .hstat-n {
    font-size: 1.4rem;
  }
  .hstat-div {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────
   5.  SECTION HEADINGS — Global responsive scale
   ─────────────────────────────────────────────────────
   .sec-title is hard-coded at 3rem in the main CSS.
   Use clamp-equivalent breakpoint scaling here.          */
@media (max-width: 1199px) {
  .sec-title {
    font-size: 2.6rem;
  }
}
@media (max-width: 991px) {
  .sec-title {
    font-size: 2.25rem;
  }
  .sp {
    padding: 4rem 0;
  }
  .mb-s {
    margin-bottom: 3rem;
  }
}
@media (max-width: 767px) {
  .sec-title {
    font-size: 2rem;
  }
  .sp {
    padding: 3.5rem 0;
  }
}
@media (max-width: 575px) {
  .sec-title {
    font-size: 1.75rem;
    line-height: 1.2;
  }
  .sec-sub {
    font-size: 0.9rem;
  }
}
@media (max-width: 374px) {
  .sec-title {
    font-size: 1.55rem;
  }
}


/* ─────────────────────────────────────────────────────
   6.  LOGO TICKER STRIP
   ─────────────────────────────────────────────────────
   The dark-mode .sa-logo-slider was missing overflow:hidden
   (it was only set for light mode), causing the ticker
   to bleed outside on any theme.                         */
.sa-logo-slider {
  overflow: hidden;
  width: 100%;
}
@media (max-width: 767px) {
  .sa-logo-track {
    gap: 48px;
    padding: 1.25rem;
  }
  .sa-logo-track img {
    height: 30px;
  }
}
@media (max-width: 575px) {
  .sa-logo-track {
    gap: 32px;
    padding: 1rem;
  }
  .sa-logo-track img {
    height: 26px;
  }
}


/* ─────────────────────────────────────────────────────
   7.  ABOUT SECTION
   ─────────────────────────────────────────────────────
   The .exp-pill uses bottom:-1rem right:-1rem (absolute).
   On narrow screens this overflows its container.        */
@media (max-width: 991px) {
  .about-img-wrap {
    padding: 1.25rem;
  }
  .about-dev-img {
    max-width: 360px;
  }
}
@media (max-width: 767px) {
  .about-img-wrap {
    margin-bottom: 1rem;
  }
  .exp-pill {
    /* Move pill inside bounds on smaller screens */
    bottom: -0.5rem;
    right: -0.5rem;
    padding: 0.625rem 1rem;
  }
}
@media (max-width: 575px) {
  .about-dev-img {
    max-width: 100%;
  }
  .exp-pill {
    bottom: 0;
    right: 0;
    padding: 0.5rem 0.75rem;
  }
  .exp-n {
    font-size: 1.5rem;
  }
  .exp-t {
    font-size: 0.65rem;
  }
  .about-section .btn-fill {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 374px) {
  .about-img-wrap {
    padding: 0.875rem;
  }
}

/* About counters — already column on ≤767px.
   Add spacing on very small screens.                     */
@media (max-width: 575px) {
  .about-cntrs {
    gap: 0.25rem;
  }
  .cnt-n {
    font-size: 1.75rem;
  }
}


/* ─────────────────────────────────────────────────────
   8.  SERVICES SECTION
   ─────────────────────────────────────────────────────
   Cards use col-md-6 col-lg-4 — Bootstrap handles the
   stacking. We just ensure touch-friendly sizing and
   prevent hover transforms being "sticky" on touch.      */
@media (max-width: 767px) {
  .svc-card {
    padding: 1.25rem;
  }
  /* Disable hover lift on touch devices to prevent
     sticky hover state after tap                         */
  @media (hover: none) {
    .svc-card:hover {
      transform: none;
      box-shadow: none;
    }
    .svc-card:hover .svc-icon {
      background: rgba(99, 102, 241, .1);
      color: var(--indigo);
      border-color: rgba(99, 102, 241, .16);
      transform: none;
    }
    .svc-card:hover::before {
      opacity: 0;
    }
  }
}
@media (max-width: 575px) {
  .svc-card {
    padding: 1.125rem;
  }
  .svc-title {
    font-size: 0.975rem;
  }
}


/* ─────────────────────────────────────────────────────
   9.  SKILLS SECTION
   ─────────────────────────────────────────────────────
   .tech-grid uses repeat(4, 1fr) even at 575px in the
   main CSS override — this makes cards too tiny on small
   phones. We replace with a sensible staircase.          */
@media (max-width: 991px) {
  .tech-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
  }
}
@media (max-width: 767px) {
  .tech-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0.625rem;
  }
  .tech-card {
    gap: 0.75rem;
  }
}
@media (max-width: 575px) {
  /* Override the existing repeat(4,1fr) at this breakpoint */
  .tech-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem;
  }
  .tech-card i {
    font-size: 1.5rem !important;
  }
  .tech-card span {
    font-size: 0.6rem;
  }
  .tech-card {
    gap: 0.5rem;
    padding: 0.25rem;
  }
}
@media (max-width: 374px) {
  .tech-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.375rem;
  }
  .tech-card i {
    font-size: 1.3rem !important;
  }
}

/* Skill bars — prevent long label text overflow */
@media (max-width: 575px) {
  .bar-name {
    font-size: 0.8rem;
  }
  .bar-pct {
    font-size: 0.7rem;
  }
  .bars-col {
    gap: 1.25rem;
  }
}
@media (max-width: 374px) {
  .bar-name {
    font-size: 0.75rem;
  }
}


/* ─────────────────────────────────────────────────────
   10. PROJECTS / SWIPER CAROUSEL
   ─────────────────────────────────────────────────────
   The outer Swiper is fine. The inner image carousel
   may have dots that are hard to tap on small screens.   */
@media (max-width: 575px) {
  .proj-body {
    padding: 1.125rem;
  }
  .proj-title {
    font-size: 0.925rem;
  }
  .proj-desc {
    font-size: 0.8rem;
  }
  .proj-thumb {
    height: 185px;
  }
  /* Larger tap targets for inner carousel dots */
  .proj-inner-dot {
    width: 8px;
    height: 8px;
    /* Expand touch target with padding trick */
    padding: 6px;
    background-clip: content-box;
    border-radius: 50%;
    box-sizing: content-box;
  }
  .proj-inner-dot.active {
    width: 18px;
    padding: 6px;
  }
}
@media (max-width: 374px) {
  .proj-thumb {
    height: 165px;
  }
}


/* ─────────────────────────────────────────────────────
   11. TESTIMONIALS CAROUSEL
   ─────────────────────────────────────────────────────
   Already switches to 100% card width at ≤575px.
   Add padding and touch-action for smooth swipe.         */
@media (max-width: 991px) {
  .tc-wrap {
    padding: 1.25rem 0.5rem;
  }
  .tc-card {
    padding: 1.5rem;
  }
}
@media (max-width: 575px) {
  .tc-wrap {
    padding: 0.75rem 0;
    /* Allow horizontal swipe on touch               */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .tc-card {
    padding: 1.25rem;
    gap: 1rem;
  }
  .tc-text {
    font-size: 0.825rem;
  }
  .car-ctrl {
    margin-top: 1.75rem;
    gap: 1rem;
  }
  .car-btn {
    width: 38px;
    height: 38px;
    /* Touch-friendly min size */
    min-width: 44px;
    min-height: 44px;
  }
}


/* ─────────────────────────────────────────────────────
   12. CONTACT SECTION
   ─────────────────────────────────────────────────────
   col-lg-4 (info) + col-lg-8 (form) stack fine via
   Bootstrap. We refine spacing and touch targets.        */
@media (max-width: 991px) {
  .contact-section .row {
    gap: 0;
  }
  /* Info panel gets bottom spacing when it sits above form */
  .contact-section .col-lg-4 {
    margin-bottom: 2rem;
  }
}
@media (max-width: 767px) {
  .form-wrap {
    padding: 1.5rem;
  }
  /* Make contact info cards a horizontal list on tablet */
  .ci-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}
@media (max-width: 575px) {
  .form-wrap {
    padding: 1.25rem;
  }
  /* Back to single column on phone */
  .ci-cards {
    grid-template-columns: 1fr;
  }
  .ci-card {
    padding: 1rem;
  }
  /* Touch-friendly input fields */
  .fi {
    padding: 0.875rem 0.875rem;
    font-size: 1rem; /* prevents iOS zoom on focus */
    border-radius: 8px;
  }
  textarea.fi {
    font-size: 1rem;
  }
  .fg label {
    font-size: 0.68rem;
  }
  /* Full-width submit button (already w100 class but
     reinforce for stacked layout)                        */
  #submitBtn {
    width: 100%;
    justify-content: center;
    min-height: 48px; /* touch target */
  }
}
@media (max-width: 374px) {
  .form-wrap {
    padding: 1rem;
  }
}

/* Social buttons in contact section — touch targets */
@media (max-width: 575px) {
  .socials {
    flex-wrap: wrap;
    justify-content: center;
  }
  .soc-btn {
    width: 42px;
    height: 42px;
    min-width: 44px;
    min-height: 44px;
  }
  /* Disable sticky hover on touch */
  @media (hover: none) {
    .soc-btn:hover {
      transform: none;
      background: var(--glass);
      border-color: var(--border);
      color: var(--t-mid);
    }
  }
}


/* ─────────────────────────────────────────────────────
   13. FOOTER
   ─────────────────────────────────────────────────────
   Bootstrap grid (col-lg-4, col-md-6) handles stacking.
   Tighten padding and fix bio max-width on mobile.       */
@media (max-width: 767px) {
  .footer-top {
    padding: 3.5rem 0 2rem;
  }
  .footer-bio {
    max-width: 100%;
  }
}
@media (max-width: 575px) {
  .footer-top {
    padding: 2.5rem 0 1.5rem;
  }
  .footer-logo {
    font-size: 1.35rem;
  }
  .footer-bot {
    padding: 1rem 0;
    text-align: center;
  }
}


/* ─────────────────────────────────────────────────────
   14. BACK-TO-TOP & WHATSAPP BUTTONS
   ─────────────────────────────────────────────────────
   On mobile the two fixed buttons (btt at bottom-right
   and whatsapp above it) can overlap with each other and
   the viewport edge. We reposition for small screens.    */
@media (max-width: 575px) {
  .btt {
    bottom: 1.25rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    /* Minimum touch target via transparent padding trick */
    box-sizing: content-box;
  }
  .whatsapp-button {
    bottom: 4.5rem; /* sits above btt */
    right: 1rem;
    padding: 7px;
  }
  .whatsapp-button img {
    width: 32px;
    height: 32px;
  }
}
@media (max-width: 374px) {
  .btt {
    width: 36px;
    height: 36px;
  }
  .whatsapp-button {
    bottom: 4.25rem;
    right: 0.75rem;
  }
}


/* ─────────────────────────────────────────────────────
   15. BUTTON TOUCH TARGETS & SIZING
   ─────────────────────────────────────────────────────
   Ensure all interactive buttons meet 44×44px minimum
   touch target recommended by WCAG 2.5.5                */
@media (max-width: 767px) {
  .btn-fill,
  .btn-ghost {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .btn-ghost {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Disable sticky transform on touch */
  @media (hover: none) {
    .btn-fill:hover {
      transform: none;
    }
    .btn-ghost:hover {
      transform: none;
    }
  }
}
@media (max-width: 575px) {
  /* Hero CTAs — already column + 100% in main CSS       */
  .hero-ctas .btn-fill,
  .hero-ctas .btn-ghost {
    text-align: center;
    justify-content: center;
    font-size: 0.875rem;
  }
}


/* ─────────────────────────────────────────────────────
   16. SCROLL CUE
   ─────────────────────────────────────────────────────
   On short-viewport phones (landscape) the scroll cue
   can overlap content. Hide it below 600px height.       */
@media (max-height: 600px) {
  .scroll-cue {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────
   17. SECTION SPACING REFINEMENT
   ─────────────────────────────────────────────────────
   Consolidate all .sp overrides in one place to avoid
   conflicts with the main CSS cascade.                   */
@media (max-width: 991px) {
  .sp {
    padding: 4rem 0 !important;
  }
  .mb-s {
    margin-bottom: 2.5rem !important;
  }
}
@media (max-width: 767px) {
  .sp {
    padding: 3.25rem 0 !important;
  }
  .mb-s {
    margin-bottom: 2rem !important;
  }
}
@media (max-width: 575px) {
  .sp {
    padding: 2.75rem 0 !important;
  }
}


/* ─────────────────────────────────────────────────────
   18. MOBILE MENU — Touch usability
   ─────────────────────────────────────────────────────
   The full-screen mobile menu is well-built. We add
   momentum scrolling in case the viewport is short.      */
@media (max-width: 991px) {
  .mobile-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2rem 1rem;
  }
  .mobile-link {
    padding: 0.75rem 0;
    /* Minimum touch target height */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mob-socials {
    position: relative;
    bottom: auto;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 374px) {
  .mobile-link {
    font-size: 1.5rem;
    padding: 0.5rem 0;
  }
}


/* ─────────────────────────────────────────────────────
   19. ABOUT LIST — Prevent icon/text misalignment
   ─────────────────────────────────────────────────────
   On 320px the .about-list-item flex row can overflow
   if the text is too long without wrapping.              */
@media (max-width: 575px) {
  .about-list-item {
    gap: 0.625rem;
  }
  .ali-t {
    font-size: 0.825rem;
  }
  .ali-s {
    font-size: 0.72rem;
  }
  .ali-icon {
    width: 32px;
    height: 32px;
    font-size: 0.78rem;
    flex-shrink: 0;
  }
}


/* ─────────────────────────────────────────────────────
   20. EYEBROW LABELS — Prevent overflow on narrow screens
   ─────────────────────────────────────────────────────
   The eyebrow uses display:inline-flex with pseudo-element
   decorations. On very small screens it can push outside
   centered text blocks.                                  */
@media (max-width: 374px) {
  .eyebrow {
    font-size: 0.65rem;
  }
  .eyebrow::before {
    width: 16px;
  }
}


/* ─────────────────────────────────────────────────────
   21. CROSS-BROWSER — Safari-specific fixes
   ─────────────────────────────────────────────────────
   Safari < 16 does not support :has() and some CSS
   features. Reinforce backdrop-filter fallbacks.         */

/* Safari gradient text fallback — already handled in
   main CSS with -webkit- prefixes ✓

   iOS Safari date/time inputs default styling override   */
.fi[type="text"],
.fi[type="email"],
textarea.fi {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 10px;
}

/* Fix iOS Safari 100vh issue — inner viewport unit      */
@supports (-webkit-touch-callout: none) {
  .hero-section {
    min-height: -webkit-fill-available;
    /* Use dvh when supported (Safari 15.4+)             */
    min-height: 100svh;
  }
}


/* ─────────────────────────────────────────────────────
   22. FIREFOX — Scrollbar & misc fixes
   ─────────────────────────────────────────────────────
   Firefox doesn't support -webkit-backdrop-filter, and
   scrollbar-width is FF-specific for thin scrollbars.    */
@-moz-document url-prefix() {
  .glass-card,
  .mobile-menu,
  #mainNav.scrolled {
    /* Graceful degradation — slight opacity instead of blur */
    background: rgba(8, 15, 30, 0.92);
  }
  [data-theme="light"] .glass-card,
  [data-theme="light"] .mobile-menu,
  [data-theme="light"] #mainNav.scrolled {
    background: rgba(240, 244, 252, 0.94);
  }
}
/* Firefox thin scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--indigo) var(--bg-1);
}


/* ─────────────────────────────────────────────────────
   23. PERFORMANCE — Reduce motion preference
   ─────────────────────────────────────────────────────
   Respect prefers-reduced-motion for accessibility.
   Disables heavy animations on sensitive user setups.    */
@media (prefers-reduced-motion: reduce) {
  .geo,
  .orb,
  .fbadge,
  .float-animate,
  .deco-ring,
  .scroll-line,
  .loader-fill,
  .whatsapp-button,
  .hero-name::after,
  .badge-dot {
    animation: none !important;
  }
  .rv,
  .rv-l,
  .rv-r,
  .rv-z {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .glass-card,
  .svc-card,
  .proj-card,
  .btn-fill,
  .btn-ghost {
    transition: none !important;
  }
}


/* ─────────────────────────────────────────────────────
   24. IMAGE LAZY LOADING — prevent layout shift
   ─────────────────────────────────────────────────────
   Set explicit aspect ratio placeholder for all lazily
   loaded images so the page doesn't reflow on load.      */
img[loading="lazy"] {
  content-visibility: auto;
}
.proj-thumb img[loading="lazy"] {
  /* Matches the .proj-thumb height so no shift            */
  aspect-ratio: 16 / 9;
}


/* ─────────────────────────────────────────────────────
   25. ABOUT-IMG SOCIAL ICONS — Center on mobile
   ─────────────────────────────────────────────────────  */
@media (max-width: 991px) {
  .about-section .socials {
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────
   26. CONTACT SECTION social icons row
   ─────────────────────────────────────────────────────  */
@media (max-width: 575px) {
  .contact-section .socials {
    justify-content: center;
    margin-top: 1rem;
  }
}


/* ─────────────────────────────────────────────────────
   27. PAGE LOADER — scale logo on small screens
   ─────────────────────────────────────────────────────  */
@media (max-width: 374px) {
  .page-loader img {
    width: 130px !important;
  }
  .loader-text {
    font-size: 2.5rem;
  }
}


/* ─────────────────────────────────────────────────────
   28. PROJECTS SECTION — mb-s bottom spacing fix
   ─────────────────────────────────────────────────────  */
@media (max-width: 575px) {
  .projects-section .mb-s {
    margin-bottom: 2rem !important;
  }
}


/* ─────────────────────────────────────────────────────
   29. CONTACT SECTION — text-center alignment on mobile
   ─────────────────────────────────────────────────────  */
@media (max-width: 767px) {
  .contact-section .text-center {
    text-align: center !important;
  }
  .contact-section .socials {
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────
   30. HERO LEFT COLUMN — padding-top on tablet
   ─────────────────────────────────────────────────────
   The .col-lg-7.py-5 adds 3rem padding. On tablet the
   stacked layout plus nav-h means content can clip.      */
@media (min-width: 576px) and (max-width: 991px) {
  .hero-section .col-lg-7 {
    padding-top: 1.5rem !important;
  }
}