/* ============================================================
   LEEDSKEM – Responsive Fixes
   Font scale + full mobile/tablet responsive overrides
   Brand color : #f4572e  |  Font: Roboto
   Breakpoints : 1199 | 991 | 767 | 575 | 480 | 380
   ============================================================ */

/* ─────────────────────────────────────────────
   0. CSS CUSTOM PROPERTIES  (font scale tokens)
   ─────────────────────────────────────────────
   Edit these four blocks to change every size
   across the whole site at once.
   ───────────────────────────────────────────── */
:root {
  /* Desktop (≥992px) */
  --fs-body   : 16px;
  --fs-p      : 20px;
  --fs-h1     : 48px;
  --fs-h2     : 38px;
  --fs-h3     : 32px;
  --fs-h4     : 26px;
  --fs-h5     : 21px;
  --fs-h6     : 17px;

  --fs-heading-title   : 34px;
  --fs-heading-title-2 : 36px;
  --fs-heading-title-3 : 44px;
  --fs-heading-subtitle: 15px;
  --fs-heading-desc    : 15px;

  --fs-slide-title : 2.2rem;
  --fs-slide-body  : 1rem;

  --fs-nav      : 14px;
  --fs-btn      : 14px;
  --fs-small    : 13px;
  --fs-counter  : 42px;
  --fs-service  : 17px;
  --fs-footer   : 15px;
}

/* ── Tablet  (768px – 991px) ── */
@media (max-width: 991px) {
  :root {
    --fs-body   : 15px;
    --fs-p      : 16px;
    --fs-h1     : 38px;
    --fs-h2     : 30px;
    --fs-h3     : 26px;
    --fs-h4     : 22px;
    --fs-h5     : 19px;
    --fs-h6     : 16px;

    --fs-heading-title   : 28px;
    --fs-heading-title-2 : 28px;
    --fs-heading-title-3 : 34px;
    --fs-heading-subtitle: 14px;
    --fs-heading-desc    : 14px;

    --fs-slide-title : 1.7rem;
    --fs-slide-body  : 0.95rem;

    --fs-counter  : 34px;
    --fs-service  : 15px;
    --fs-footer   : 14px;
  }
}

/* ── Mobile landscape (576px – 767px) ── */
@media (max-width: 767px) {
  :root {
    --fs-body   : 14px;
    --fs-p      : 15px;
    --fs-h1     : 30px;
    --fs-h2     : 24px;
    --fs-h3     : 22px;
    --fs-h4     : 20px;
    --fs-h5     : 17px;
    --fs-h6     : 15px;

    --fs-heading-title   : 22px;
    --fs-heading-title-2 : 24px;
    --fs-heading-title-3 : 28px;
    --fs-heading-subtitle: 13px;
    --fs-heading-desc    : 13px;

    --fs-slide-title : 1.4rem;
    --fs-slide-body  : 0.9rem;

    --fs-counter  : 28px;
    --fs-service  : 14px;
    --fs-footer   : 13px;
  }
}

/* ── Mobile portrait (≤575px) ── */
@media (max-width: 575px) {
  :root {
    --fs-body   : 14px;
    --fs-p      : 14px;
    --fs-h1     : 26px;
    --fs-h2     : 22px;
    --fs-h3     : 20px;
    --fs-h4     : 18px;
    --fs-h5     : 16px;
    --fs-h6     : 14px;

    --fs-heading-title   : 20px;
    --fs-heading-title-2 : 22px;
    --fs-heading-title-3 : 24px;
    --fs-heading-subtitle: 12px;
    --fs-heading-desc    : 12px;

    --fs-slide-title : 1.25rem;
    --fs-slide-body  : 0.85rem;

    --fs-counter  : 24px;
    --fs-service  : 13px;
    --fs-btn      : 13px;
    --fs-footer   : 13px;
  }
}

/* ── Tiny phones (≤380px) ── */
@media (max-width: 380px) {
  :root {
    --fs-h1     : 22px;
    --fs-h2     : 20px;
    --fs-h3     : 18px;
    --fs-h4     : 16px;
    --fs-slide-title : 1.1rem;
  }
}


/* ─────────────────────────────────────────────
   1. GLOBAL SAFETY NET
   ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
}
img {
  height: auto;
  display: block;
  max-width: 100%;
}


/* ─────────────────────────────────────────────
   2. BASE TYPOGRAPHY  (apply token vars)
   ───────────────────────────────────────────── */
body {
  font-size: var(--fs-body);
  line-height: 1.7;
}
p {
  font-size: var(--fs-p);
  line-height: 1.75;
}

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

/* Heading component classes */
.heading-title           { font-size: var(--fs-heading-title);    line-height: 1.25; }
.heading-layout2 .heading-title { font-size: var(--fs-heading-title-2); }
.heading-layout3 .heading-title { font-size: var(--fs-heading-title-3); }
.heading-subtitle        { font-size: var(--fs-heading-subtitle); }
.heading-desc            { font-size: var(--fs-heading-desc);     }


/* ─────────────────────────────────────────────
   3. SECTION PADDING SCALE
   ───────────────────────────────────────────── */
/* style.css default: 110px / 110px */
@media (max-width: 991px) {
  section {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}
@media (max-width: 575px) {
  section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}


/* ─────────────────────────────────────────────
   4. NAVIGATION
   ───────────────────────────────────────────── */
.navbar .nav-link,
.navbar-nav .nav-link {
  font-size: var(--fs-nav);
}

@media (max-width: 991px) {
  .navbar-collapse {
    background-color: #fff;
    padding: 15px 20px;
    border-top: 2px solid #f4572e;
  }
  .navbar .nav-link {
    padding: 10px 5px;
    border-bottom: 1px solid #f0f0f0;
  }
}


/* ─────────────────────────────────────────────
   5. SLIDER
   ───────────────────────────────────────────── */
.slider .slide-item {
  min-height: 400px;
}
.slide-content .slide-title {
  font-size: var(--fs-slide-title);
  line-height: 1.3;
}
.slide-content p {
  font-size: var(--fs-slide-body);
}

@media (max-width: 991px) {
  .slider .slide-item {
    min-height: 320px;
  }
  .slide-content {
    padding: 24px 20px;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .slider .slide-item {
    min-height: 280px;
  }
  .slide-content {
    padding: 20px 16px;
  }
}
@media (max-width: 575px) {
  .slider .slide-item {
    min-height: 240px;
  }
  .slide-content .btn {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    margin-right: 0 !important;
  }
}


/* ─────────────────────────────────────────────
   6. PAGE-TITLE BANNER
   ───────────────────────────────────────────── */
.page-title {
  font-size: clamp(22px, 5vw, 40px);
  line-height: 1.2;
}
.page-title-layout1 h6 {
  font-size: clamp(13px, 2vw, 16px);
}

@media (max-width: 767px) {
  .page-title-layout1 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}
@media (max-width: 480px) {
  .page-title-layout1 {
    padding-top: 45px !important;
    padding-bottom: 45px !important;
  }
}


/* ─────────────────────────────────────────────
   7. ABOUT LAYOUT
   ───────────────────────────────────────────── */
@media (max-width: 1199px) {
  .about-layout1 .about-img,
  .about-layout2 .about-img {
    margin-top: 0 !important;
    margin-bottom: 30px;
    text-align: center;
  }
  .about-layout1 .about-img img,
  .about-layout2 .about-img img {
    max-width: 280px;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .about-layout1,
  .about-layout2 {
    text-align: center;
  }
}

/* "Why Choose" – 2-col → 1-col on small phone */
@media (max-width: 575px) {
  .about-layout1 .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Feature list items */
.features-list-layout2 .feature-item {
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.features-list-layout2 .feature-item .feature-title {
  font-size: clamp(14px, 2vw, 16px);
}


/* ─────────────────────────────────────────────
   8. SERVICES / PRODUCTS LAYOUT
   ───────────────────────────────────────────── */
.service-title {
  font-size: var(--fs-service);
  line-height: 1.4;
}
.service-desc {
  font-size: clamp(13px, 1.5vw, 15px);
}

@media (max-width: 1199px) {
  /* Sidebar + grid: stack full-width */
  .services-layout4 .col-xl-3,
  .services-layout4 .col-xl-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .services-layout4 .col-xl-3 {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    padding: 36px 24px;
    min-height: auto;
  }
}

.service-item .service-img img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

@media (max-width: 575px) {
  /* 2 cards per row → 1 card on small phones */
  .services-layout4 .col-sm-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ─────────────────────────────────────────────
   9. FANCYBOX / ICON BOXES
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .fancybox-layout2 .fancybox-item,
  .fancybox-layout6 .fancybox-item {
    padding: 28px 18px;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
  .fancybox-title {
    font-size: clamp(15px, 3vw, 18px);
  }
  .fancybox-body {
    font-size: clamp(13px, 2vw, 15px);
  }
}


/* ─────────────────────────────────────────────
   10. COUNTERS
   ───────────────────────────────────────────── */
.counter-number {
  font-size: var(--fs-counter);
  line-height: 1.1;
}
.counter-desc {
  font-size: clamp(12px, 1.5vw, 14px);
}

@media (max-width: 991px) {
  .counter-item {
    text-align: center;
    padding: 20px 12px;
  }
  .counters .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .counters .col-sm-6,
  .counters .col-md-6,
  .counters .col-lg-3 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}
@media (max-width: 575px) {
  .counters .col-sm-6 {
    margin-bottom: 12px;
  }
}


/* ─────────────────────────────────────────────
   11. BANNER LAYOUT 1 (Quality / Export strips)
   ───────────────────────────────────────────── */
.banner-layout1 .banner-text h3 {
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.3;
}
.banner-layout1 .banner-text p {
  font-size: clamp(13px, 1.8vw, 16px);
}

.banner-layout1 .banner-img {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}
.banner-layout1 .banner-img .bg-img {
  position: absolute;
  inset: 0;
}
.banner-layout1 .banner-img .bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 991px) {
  .banner-layout1 .container-fluid,
  .banner-layout1 .row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .banner-layout1 .banner-content {
    padding: 40px 24px;
  }
  .banner-layout1 .banner-img {
    min-height: 260px;
    padding: 20px;
    background: #f7f7f7;
  }
  .banner-layout1 .banner-img img {
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  }
}
@media (max-width: 767px) {
  .banner-layout1 .banner-img {
    min-height: 220px;
  }
}
@media (max-width: 480px) {
  .banner-layout1 .banner-img {
    min-height: 180px;
  }
}


/* ─────────────────────────────────────────────
   12. CLIENTS CAROUSEL
   ───────────────────────────────────────────── */
.clients .client {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
}
.clients .client img {
  object-fit: contain;
  max-height: 80px;
  width: auto;
}


/* ─────────────────────────────────────────────
   13. CONTACT CARDS & PANEL
   ───────────────────────────────────────────── */
@media (max-width: 767px) {
  .contact-card {
    min-height: auto;
    padding: 28px 18px;
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}
.contact-list li {
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.7;
  margin-bottom: 6px;
}

/* Contact / Enquiry / Career form inputs */
.form-control {
  font-size: clamp(13px, 1.8vw, 15px);
}
label {
  font-size: clamp(13px, 1.6vw, 14px);
}

@media (max-width: 575px) {
  .contact-panel-form .col-sm-12,
  .contact-panel-form .col-md-4,
  .contact-panel-form .col-xl-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/* ─────────────────────────────────────────────
   14. BUTTONS
   ───────────────────────────────────────────── */
.btn {
  font-size: var(--fs-btn);
}

@media (max-width: 575px) {
  .btn {
    padding: 10px 18px;
    white-space: nowrap;
  }
  /* Stack side-by-side button pairs */
  .d-flex.flex-wrap .btn,
  .d-flex.flex-wrap.mb-60 .btn,
  .d-flex.flex-wrap.mb-30 .btn {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  .mr-30 {
    margin-right: 0 !important;
  }
}


/* ─────────────────────────────────────────────
   15. ACCORDION (FAQ)
   ───────────────────────────────────────────── */
.accordion-title {
  font-size: clamp(14px, 2vw, 17px);
}
.accordion-body {
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.7;
}

@media (max-width: 575px) {
  .accordion-header {
    padding: 14px 16px;
  }
}


/* ─────────────────────────────────────────────
   16. MAP EMBED
   ───────────────────────────────────────────── */
.map iframe {
  display: block;
  width: 100% !important;
  height: 320px !important;
}
@media (max-width: 575px) {
  .map iframe {
    height: 240px !important;
  }
}


/* ─────────────────────────────────────────────
   17. FOOTER
   ───────────────────────────────────────────── */
.footer,
.footer p,
.footer li,
.footer a {
  font-size: var(--fs-footer);
}
.footer-widget-title {
  font-size: clamp(15px, 2vw, 18px);
}

@media (max-width: 767px) {
  .footer [class*="col-"] {
    margin-bottom: 24px;
  }
  .footer-widget-title {
    font-size: 16px;
  }
}


/* ─────────────────────────────────────────────
   18. GALLERY
   ───────────────────────────────────────────── */
@media (max-width: 575px) {
  .gallery-img {
    border-radius: 6px;
  }
  .slider-btn {
    padding: 6px 14px;
    font-size: 16px;
  }
}


/* ─────────────────────────────────────────────
   19. ROW BLEED PREVENTION
   ───────────────────────────────────────────── */
.row {
  margin-left: 0;
  margin-right: 0;
}
body {
  overflow-x: hidden;
}

/* ─────────────────────────────────────────────
   20. UTILITY OVERRIDES
   ───────────────────────────────────────────── */
/* Page-title subtitle */
@media (max-width: 575px) {
  section.pb-0.bg-overlay {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

/* Disable clip-path on mobile to prevent content clipping */
@media (max-width: 767px) {
  .contact-card,
  .fancybox-layout6 .fancybox-item {
    clip-path: none !important;
    -webkit-clip-path: none !important;
  }
}