/*
  DigiMunchers - Mobile Responsive Stylesheet
  Covers: index.html, about-us.html, ourService.html, contact.html, footer.html, navbar.html
*/

/* ============================================
   BASE OVERRIDES — prevent horizontal scroll
   ============================================ */
* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* ============================================
   FLUID TYPOGRAPHY with clamp()
   ============================================ */
:root {
  --h1-font-size: clamp(28px, 5vw, 60px);
  --h2-font-size: clamp(22px, 4vw, 42px);
  --h3-font-size: clamp(18px, 3vw, 36px);
  --h4-font-size: clamp(16px, 2.5vw, 32px);
  --h5-font-size: clamp(15px, 2vw, 24px);
  --h6-font-size: clamp(14px, 1.8vw, 22px);
  --p-font-size: clamp(14px, 1.6vw, 18px);
}

h1 {
  font-size: var(--h1-font-size);
}
h2 {
  font-size: var(--h2-font-size);
}
h3 {
  font-size: var(--h3-font-size);
}
h4 {
  font-size: var(--h4-font-size);
}
h5 {
  font-size: var(--h5-font-size);
}
h6 {
  font-size: var(--h6-font-size);
}

p,
ul li {
  font-size: var(--p-font-size);
  line-height: 1.7;
}

/* ============================================
   NAVBAR — mobile hamburger & top header
   ============================================ */
@media screen and (max-width: 991px) {
  .site-header .row {
    flex-wrap: wrap;
    gap: 5px;
  }

  .site-header p {
    font-size: 13px;
    white-space: nowrap;
  }

  .site-header [class^="col-"] {
    flex: 0 0 auto;
    width: auto;
  }

  .navbar-brand img {
    height: 55px !important;
  }

  /* Mobile nav menu */
  .navbar-collapse {
    background: #fff;
    padding: 10px 15px;
    border-top: 1px solid #eee;
  }

  .navbar-nav .nav-link {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
  }

  .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }

  /* Dropdown on mobile: show inline, not absolute */
  .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none;
    box-shadow: none;
    border-radius: 0;
    background: #f9f9f9;
    padding-left: 10px;
  }

  .nav-item:hover .dropdown-menu,
  .nav-item:focus-within .dropdown-menu {
    display: block;
  }
}

/* ============================================
   HERO SECTION — index.html carousel
   ============================================ */
@media screen and (max-width: 767px) {
  .hero {
    height: 60vh;
    min-height: 380px;
  }

  /* Center carousel text like the contact page hero */
  .carousel-caption {
    width: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .carousel-caption h1 {
    font-size: clamp(22px, 6vw, 34px);
    letter-spacing: -0.5px;
    margin-bottom: 16px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .carousel-caption .d-flex {
    justify-content: center;
  }

  .carousel-control-next,
  .carousel-control-prev {
    bottom: 12px;
    top: auto;
  }

  .carousel-control-next-icon,
  .carousel-control-prev-icon {
    width: 36px;
    height: 36px;
  }

  .carousel-control-prev {
    right: 55px;
    left: auto;
  }
}

/* ============================================
   HERO SECTION — ourService.html & contact.html
   ============================================ */
@media screen and (max-width: 767px) {
  /* Match contact page (3rd screenshot) style: flex center, 60vh */
  .hero-section {
    height: 60vh !important;
    min-height: 320px !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .hero-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    z-index: 2;
  }

  .hero-section h1,
  .hero-section h1.make-visible {
    font-size: clamp(22px, 6vw, 34px) !important;
    margin-bottom: 12px;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  }

  .hero-section .lead,
  .hero-section p.lead.make-visible {
    font-size: clamp(13px, 3.5vw, 17px) !important;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    margin-bottom: 0;
  }
}

/* ============================================
   ABOUT PAGE HERO — about-us.html
   ============================================ */
@media screen and (max-width: 767px) {
  /* Match contact page hero: flex centering instead of giant top padding */
  .page-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    height: 60vh !important;
    min-height: 320px !important;
  }

  .page-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .page-hero h1 {
    font-size: clamp(22px, 6vw, 36px) !important;
    text-align: center;
    margin-bottom: 12px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  }

  .page-hero p.lead {
    font-size: clamp(14px, 4vw, 18px) !important;
    text-align: center;
  }
}

/* ============================================
   SECTION PADDING — universal
   ============================================ */
@media screen and (max-width: 767px) {
  .section-padding {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .about-section {
    padding: 40px 0 !important;
  }

  /* ---- Bootstrap spacing utilities — compress on mobile ---- */
  /* mb-5 (3rem → 1rem) */
  .mb-5 {
    margin-bottom: 1rem !important;
  }
  /* mb-4 (1.5rem → 0.75rem) */
  .mb-4 {
    margin-bottom: 0.75rem !important;
  }
  /* mt-5 (3rem → 1rem) */
  .mt-5 {
    margin-top: 1rem !important;
  }
  /* py-5 (3rem top/bottom → 1rem) */
  .py-5 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
  /* pt-0 sections should keep zero */
  .pt-0 {
    padding-top: 0 !important;
  }

  /* Lead text with mb-5 inside contact form header */
  .lead.mb-5,
  p.lead.mb-5 {
    margin-bottom: 1rem !important;
  }
}

/* ============================================
   ABOUT SECTION — index.html
   ============================================ */
@media screen and (max-width: 991px) {
  .about-image-wrap {
    margin-bottom: 30px;
  }

  .about-thumb {
    padding: 25px 20px !important;
    margin-bottom: 20px;
  }

  .about-info h5,
  .about-info p {
    font-size: clamp(13px, 3vw, 16px) !important;
  }
}

@media screen and (max-width: 575px) {
  .about-image-info {
    padding: 20px;
  }

  .about-image-info h4 {
    font-size: 18px;
  }

  .about-image-info p {
    font-size: 13px;
  }

  /* Stack the two small about boxes */
  .about .row.h-100 .col-lg-6.col-6 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ============================================
   SERVICES SECTION — index.html tabs
   ============================================ */
@media screen and (max-width: 991px) {
  .nav-tabs .nav-link {
    margin-right: 10px !important;
    margin-left: 10px !important;
    padding: 20px !important;
  }

  .nav-tabs .nav-link h3 {
    font-size: clamp(16px, 3vw, 22px);
  }

  .nav-tabs .nav-link span {
    font-size: clamp(13px, 2.5vw, 16px);
  }
}

@media screen and (max-width: 767px) {
  .services .col-lg-6:first-child {
    margin-bottom: 30px;
  }

  .nav-tabs .nav-link {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 15px !important;
  }
}

/* ============================================
   SERVICE CARDS — ourService.html
   ============================================ */
@media screen and (max-width: 767px) {
  /* Reset card bottom padding — button will flow in-line now */
  .service-card {
    padding: 30px 20px 30px !important;
    margin-bottom: 20px;
  }

  /* Override the inline style: position absolute → centered block */
  .service-card a[href="contact.html"],
  .service-card .btn-custom {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin-top: 20px !important;
  }

  .service-card h3 {
    font-size: clamp(18px, 4vw, 24px);
  }

  .service-card p,
  .service-features li {
    font-size: clamp(13px, 3.5vw, 16px);
  }

  .service-icon {
    font-size: 32px !important;
    margin-bottom: 15px !important;
  }

  .service-highlight {
    padding: 50px 20px !important;
    margin: 30px 0 !important;
  }

  .service-highlight h2 {
    font-size: clamp(20px, 5vw, 32px) !important;
  }

  .service-highlight p {
    font-size: clamp(13px, 3.5vw, 16px) !important;
  }

  .process-step {
    padding: 20px 15px;
    margin-bottom: 20px;
  }

  .cta-section {
    padding: 40px 20px !important;
  }
}

/* ============================================
   PROJECTS SECTION — index.html
   ============================================ */
@media screen and (max-width: 767px) {
  .projects-thumb-large {
    min-height: 220px !important;
  }

  .projects-image {
    height: 220px !important;
  }

  .projects-title {
    font-size: clamp(16px, 4vw, 22px);
  }
}

/* ============================================
   CONTACT SECTION — index.html "We're here" box
   ============================================ */
@media screen and (max-width: 767px) {
  .footer-wrapper {
    padding: 30px 15px !important;
  }

  .footer-wrapper h1 {
    font-size: clamp(22px, 6vw, 40px) !important;
    margin-bottom: 20px;
  }

  .footer-box {
    flex-direction: column !important;
    padding: 20px !important;
    gap: 10px;
  }

  .footer-box .title {
    font-size: clamp(16px, 4vw, 24px) !important;
    margin-bottom: 5px;
  }

  .footer-box .desc {
    font-size: clamp(13px, 3.5vw, 16px) !important;
  }

  .footer-box .arrow {
    font-size: 24px !important;
    align-self: flex-end;
  }

  .contact-info {
    padding: 25px 20px !important;
  }

  .contact-thumb {
    bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .contact-container-wrap {
    padding-bottom: 40px !important;
  }
}

/* ============================================
   CONTACT FORM — contact.html
   ============================================ */
@media screen and (max-width: 767px) {
  /* Tighten the outer container that wraps form + illustration */
  .container.py-5 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .creative-form-container {
    padding: 20px 16px !important;
  }

  .form-step-indicator {
    gap: 5px;
    flex-wrap: wrap;
  }

  .step {
    margin: 0 8px !important;
  }

  .step-label {
    font-size: 0.75rem;
  }

  .step-circle {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .form-footer {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .btn-custom,
  .btn-outline-custom {
    width: 100%;
    justify-content: center;
  }

  .contact-info-block {
    padding: 25px 18px !important;
    margin-bottom: 20px;
  }

  /* ---- Illustration: unclip and let content flow ---- */
  .illustration-container {
    /* Remove fixed-ratio clip that hides the badges */
    aspect-ratio: unset !important;
    height: auto !important;
    overflow: visible !important;
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
  }

  /* Image becomes natural height (not 100%-fill of container) */
  .illustration-img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 12px;
    display: block;
    flex-shrink: 0;
  }

  /* Floating badges: reset from absolute → visible inline blocks below image */
  .floating-element {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: inline-flex !important;
    animation: none !important;
    margin: 8px 8px 0 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    background: #fff;
    align-items: center;
    flex-shrink: 0;
  }

  /* Badges row — sits right below the image */
  .contact-card {
    display: flex;
    flex-direction: column;
  }

  .floating-element .icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    font-size: 14px;
    margin-right: 8px !important;
    flex-shrink: 0;
  }

  .floating-element strong {
    font-size: 13px;
    white-space: nowrap;
  }

  .floating-element p.small,
  .floating-element p.mb-0.small {
    font-size: 11px !important;
    margin: 0 !important;
    white-space: nowrap;
  }
} /* end @media 767px contact form */

/* ============================================
   FOOTER — footer.html
   ============================================ */
@media screen and (max-width: 767px) {
  footer {
    padding: 40px 0 20px !important;
  }

  footer .col-lg-4,
  footer .col-lg-2,
  footer .col-lg-3 {
    text-align: center;
  }

  footer .footer-links {
    margin-bottom: 20px;
  }

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

  footer img[alt*="Logo"] {
    height: 120px !important;
    margin-bottom: 15px;
  }

  footer p {
    font-size: 14px;
  }

  footer h5 {
    font-size: 16px;
    margin-bottom: 12px !important;
  }

  .copyright {
    margin-top: 25px;
    padding-top: 15px;
    font-size: 13px;
  }

  .input-group {
    max-width: 350px;
    margin: 0 auto 20px;
  }
}

/* ============================================
   ABOUT US PAGE — about-us.html cards & values
   ============================================ */
@media screen and (max-width: 767px) {
  .about-section .col-lg-6 img {
    margin-bottom: 25px;
  }

  .about-section h2 {
    font-size: clamp(20px, 5vw, 32px);
    text-align: center;
  }

  .core-values {
    padding: 25px 18px !important;
    margin-bottom: 20px;
  }

  .core-values h4 {
    font-size: clamp(16px, 4vw, 22px);
  }

  .goals-list li,
  .approach-list li,
  .choice-list li {
    font-size: clamp(13px, 3.5vw, 16px) !important;
  }

  .card-img-top {
    height: 160px;
    object-fit: cover;
  }

  .card-body {
    padding: 15px !important;
  }

  .card-title {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  .card-text {
    font-size: clamp(12px, 3.5vw, 15px) !important;
  }
}

/* ============================================
   BUTTONS — global mobile sizing
   ============================================ */
@media screen and (max-width: 480px) {
  .custom-btn {
    font-size: 13px;
    padding: 10px 20px;
  }

  .btn-custom,
  .btn-primary-brand {
    font-size: 13px !important;
    padding: 10px 20px !important;
  }
}

/* ============================================
   UTILITY — touch targets & readability
   ============================================ */
@media screen and (max-width: 767px) {
  a,
  button {
    min-height: 44px;
  }

  .navbar-toggler {
    padding: 6px 10px;
  }

  /* Prevent tiny text in paragraphs with inline styles */
  [style*="font-size: 20px"] {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  /* Ensure SVG wave doesn't cause overflow */
  .contact svg {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ============================================
   EXTRA SMALL — phones < 400px
   ============================================ */
@media screen and (max-width: 400px) {
  .carousel-caption h1 {
    font-size: 22px !important;
  }

  .footer-box .title {
    font-size: 16px !important;
  }

  .navbar-brand img {
    height: 45px !important;
  }

  footer img[alt*="Logo"] {
    height: 90px !important;
  }
}

/* ============================================
   TABLET / SMALL LAPTOP — 768px to 1199px
   Well-designed layout for tab-sized screens
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  /* --- NAVBAR --- */
  .navbar-brand img {
    height: 60px !important;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 12px;
    padding-left: 12px;
    font-size: 13px;
  }

  .site-header p {
    font-size: 13px;
    white-space: nowrap;
  }

  /* --- HERO --- */
  .hero {
    height: 65vh;
    min-height: 400px;
  }

  .carousel-caption {
    width: 65% !important;
  }

  .carousel-caption h1 {
    font-size: clamp(26px, 4vw, 42px);
  }

  /* --- SECTION PADDING --- */
  .section-padding {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }

  /* --- ABOUT SECTION — two-column boxes --- */
  .about-thumb {
    padding: 25px 20px !important;
  }

  .about-info h5 {
    font-size: clamp(16px, 2.2vw, 20px) !important;
    margin-bottom: 12px !important;
  }

  .about-info p {
    font-size: clamp(12px, 1.6vw, 15px) !important;
    line-height: 1.5;
  }

  /* Make the two bottom boxes (Our Mission + What We Do) equal & compact */
  .about .row.h-100 {
    gap: 0;
  }

  .about .row.h-100 .col-lg-6.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .about .row.h-100 .about-thumb {
    padding: 20px 15px !important;
    margin-bottom: 0 !important;
  }

  .about .row.h-100 .about-thumb h5 {
    font-size: clamp(12px, 1.6vw, 15px) !important;
    margin-bottom: 8px !important;
  }

  .about .row.h-100 .about-thumb p {
    font-size: clamp(8px, 1.1vw, 10px) !important;
    line-height: 1.4;
  }

  /* Active styling for footer-box links */
  .footer-box.active .title {
    font-weight: 800;
  }
  .footer-box.active {
    border-top: 5px solid white;
  }

  /* --- SERVICES TABS --- */
  .nav-tabs .nav-link {
    margin-right: 15px !important;
    margin-left: 15px !important;
    margin-bottom: 15px !important;
    padding: 20px !important;
  }

  .nav-tabs .nav-link h3 {
    font-size: clamp(16px, 2.5vw, 22px);
  }

  .nav-tabs .nav-link span {
    font-size: clamp(12px, 1.6vw, 15px);
  }

  /* --- PROJECTS --- */
  .projects-thumb-large {
    min-height: 280px !important;
  }

  .projects-image {
    height: 260px !important;
  }

  .projects-title {
    font-size: clamp(16px, 2.5vw, 22px);
  }

  /* --- FOOTER WRAPPER (We're here for you 24/7) --- */
  .footer-wrapper h1 {
    font-size: clamp(26px, 4vw, 38px) !important;
  }

  .title {
    font-size: clamp(20px, 3vw, 30px) !important;
  }

  .desc {
    font-size: clamp(13px, 1.8vw, 16px) !important;
  }

  .footer-box {
    padding: 25px 30px !important;
  }

  /* --- CONTACT INFO --- */
  .contact-info {
    padding: 30px 25px !important;
  }

  /* --- SITE FOOTER --- */
  footer h5 {
    font-size: 16px;
  }

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

/* ============================================
   TABLET PORTRAIT ONLY — 768px to 991px
   Extra tweaks for narrower tablets
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Make "Our Mission" & "What We Do" text more compact to prevent wrapping */
  .about .row.h-100 .about-thumb p {
    font-size: clamp(9px, 1.1vw, 11px) !important;
    line-height: 1.35;
  }

  .about .row.h-100 .about-thumb h5 {
    font-size: clamp(12px, 1.7vw, 15px) !important;
    margin-bottom: 6px !important;
  }

  /* Hero section adjustments */
  .hero-section,
  .page-hero {
    height: 50vh !important;
    min-height: 300px !important;
  }

  /* Service cards tablet */
  .service-card {
    padding: 30px 25px !important;
    margin-bottom: 20px;
  }

  .service-card h3 {
    font-size: clamp(18px, 2.5vw, 24px);
  }
}