/* File Path: public/frontend/css/tablet.css */

/* ========================================================= */
/* ====================  TABLET HEADER  ==================== */
/* ========================================================= */
    @media (min-width: 481px) and (max-width: 991px) {
        /* New: */
        .sticky-header {
          position: sticky;
          top: 0;
          z-index: 1000;
        }

        .tablet-header {
          display: block;
        }
        .tablet-header .top-row {
        display: flex; align-items: center; justify-content: space-between;
        padding: .5rem 1.5rem;
        }
        .tablet-header .nav-row {
          z-index: 1001;
          padding: 0.5rem 1.5rem;
          display: flex;
          justify-content: center;
        }
        
        .tablet-header .brand { display: flex; align-items: center; gap: .5rem; }
        .tablet-header .logo { width: 36px; height: 36px; }
        .tablet-header .company-name { color: #fff; font-size: 1.1rem; font-weight: 600; }
        .tablet-header .nav-links a {
        color: #fff; margin: 0 .8rem; text-decoration: none; font-weight: 500;
        }
        .tablet-header .actions { display: flex; align-items: center; gap: .8rem; }
        .tablet-header .phone-btn {
        background: transparent; border: none; color: #fff; font-size: .95rem;
        }
        .tablet-header .social a { color: #fff; margin-left: .4rem; font-size: 1rem; }
    
        /* hide other headers & mobile menu */
        .desktop-header, .mobile-header, .mobile-menu { display: none !important; }
        
        /* Hide number by default */
        .phone-btn {
            background: transparent;
            border: none;
            color: #ffffff;
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }
        .phone-btn .phone-number {
            display: none;
        }
        
        /* When toggled */
        .phone-btn.show-number {
            background: #ffffff;
            color: #1e1c60;
            border-radius: 40px;
            padding: 6px 14px;
            font-weight: 600;
        }
        .phone-btn.show-number i {
            color: #1e1c60;
        }
        .phone-btn.show-number .phone-number {
            display: inline;
        }
    
    }
    
/* ========================================================= */
/* ====================  TABLET FOOTER  ==================== */
/* ========================================================= */
    @media (min-width: 481px) and (max-width: 991px) {
        .main-footer {
        padding: 2rem 0;
        background-color: #000;
        }
    
        .main-footer .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 2rem;
        }
    
        .main-footer h5,
        .footer-subheading {
        font-size: 1.1rem;
        color: #fff;
        }
    
        .footer-links {
        list-style: none;
        padding: 0;
        margin: 0;
        }
    
        .footer-links a {
        color: #fff;
        text-decoration: none;
        }
    
        .footer-links a:hover {
        color: #ef3639;
        }
    
        .social-icons a {
        color: #ef3639 !important;
        font-size: 1.4rem;
        margin-right: 0.75rem;
        }
    
        .newsletter-img {
            display: none;
        }
    
        .newsletter-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        }
    
        .newsletter-input,
        .subscribe-btn {
        width: 90%;
        max-width: 250px;
        margin: 0.25rem 0;
        border-radius: 1rem;
        font-family: 'Electrolize', sans-serif;
        font-size: 1rem;
        padding: 0.6rem 1rem;
        box-sizing: border-box;
        text-align: center;
        }
    
        .newsletter-input {
        border: 1px solid #333;
        background-color: #fff;
        color: #000;
        }
    
        .subscribe-btn {
        background-color: #ef3639;
        border: none;
        color: #fff;
        font-weight: bold;
        }
    
        .subscribe-btn:hover {
        background-color: #29A9A9;
        color: #fff;
        }
    }
    
/* =========================================================================== */
/* ===================  TABLET LANDING PAGE HOME SECTION  ==================== */
/* =========================================================================== */
    @media (min-width: 481px) and (max-width: 991px) {
    
        :root {
        /* Font-size overrides for tablet */
        --hero-title-size: 2rem;
        --hero-desc-size: 1rem;
        --cta-font-size: 0.95rem;
        }
    
        /* Section layout and spacing */
        .hero-section {
        min-height: auto;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        }
    
        .hero-container {
        width: 100%;
        padding: 0 1.2rem;
        margin: 0 auto;
        padding-top: 0;
        padding-bottom: 0;
        }
    
        .hero-left,
        .hero-right {
        min-height: unset;
        }
    
        /* ── LEFT COLUMN ── */
        .hero-left {
        align-items: flex-start;
        padding-right: 2rem;
        }
    
        .hero-left-inner {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        gap: 1.5rem;
        height: auto;
        }
    
        .hero-title {
        font-size: var(--hero-title-size);
        text-align: left;
        }
    
        .hero-desc {
        font-size: var(--hero-desc-size);
        text-align: left;
        margin-bottom: 0;
        }
    
        .cta-container {
        text-align: left;
        margin-top: 1rem;
        margin-bottom: 1rem;
        }
    
        .btn-hero-cta {
        font-size: var(--cta-font-size);
        padding: 0.5rem 1.5rem;
        font-weight: 600;
        color: #fff;
        background: #ef3639 !important;
        border-radius: 50px;
        transition: 0.3s;
        }
    
        .btn-hero-cta:hover {
        background: rgba(64,176,70,1) !important;
        transform: scale(1.05);
        }
    
        /* ── HIDE INFO BOX ── */
        .info-box {
        display: none !important;
        }
    
        .col-lg-5.px-4,
        .col-md-6.px-4 {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .col-lg-7.px-5,
        .col-md-6.px-5 {
        padding-right: 0 !important;
        }

        /* ── RIGHT COLUMN ── */
        .delivery-tag {
        font-size: 1.6rem;
        margin-bottom: 1.2rem;
        }
    
        .hero-right {
        min-height: 400px;
        }
    }

/* ============================================================================== */
/* ===================  TABLET LANDING PAGE SERVICE SECTION  ==================== */
/* ============================================================================== */
    @media (min-width: 481px) and (max-width: 991px) {
        /* 1. Section background */
        .srv-section {
          padding: 3rem 0;
        }
        .srv-page-title {
          font-size: 1.75rem;
          color: #fff;
          margin-bottom: 1rem;
        }
          
        .srv-page-subtitle {
          font-size: 1rem;
          line-height: 1.5;
          color: #fff;
          margin-bottom: 2rem;
          padding-left: 1rem;
          padding-right: 1rem;
        }

        /* 1. Header layout - no background on row, white text on dark bg */
        .srv-header {
          font-size: 1.75rem;
          color: #fff;
          margin-bottom: 1rem;
        }
    
        .srv-heading,
        .srv-tagline-wrapper {
        width: 100%;
        background: transparent !important;
        text-align: center;
        }
    
        .srv-heading h2,
        .srv-tagline-wrapper h3 {
        color: #fff !important;
        margin: 0.5rem 0;
        }
    
        /* 3. Body content */
        .srv-body {
        border-radius: 1.25rem;
        padding: 2.5rem 2rem;
        color: #fff;
        transition: background-color 0.3s ease;
        }
    
        .srv-desc {
        font-size: 1rem;
        line-height: 1.6;
        }
    
        .srv-btn-group-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1.5rem;
        }
    
        .srv-btn-explore,
        .srv-btn-contact {
        width: 100%;
        text-align: center;
        border-radius: 50px;
        padding: 0.6rem 2rem;
        font-weight: 600;
        font-size: 1.1rem;
        background: #fff !important;
        color: #000 !important;
        border: none !important;
        text-decoration: none !important;
        transition: all 0.3s ease;
        display: inline-block;
        }
    
        .srv-btn-explore:hover,
        .srv-btn-contact:hover,
        .srv-btn-explore.active,
        .srv-btn-contact.active {
        background: rgba(64,176,70,1) !important;
        color: #fff !important;
        text-decoration: none !important;
        }
    
        /* 3. Tabs layout: 2 per row with spacing, centered */
        .srv-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-top: 2rem;
        padding: 0;
        list-style: none;
        justify-content: center;
        }
    
        .srv-tab {
        flex: 1 1 calc(50% - 0.75rem);
        background: #fff;
        color: #000;
        text-align: center;
        padding: 1rem 0;
        font-size: 1.05rem;
        font-weight: 600;
        border-radius: 0.75rem;
        cursor: pointer;
        transition: background 0.3s, color 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        }
    
        .srv-tab.active {
        background: var(--active-tab-bg, #000) !important;
        color: #fff !important;
        }
    
        /* Visual tweaks */
        .srv-visual {
        max-width: 280px;
        width: 100%;
        margin: 0 auto;
        }
    
        .srv-visual-column {
        justify-content: center;
        align-items: center;
        }
    
        #serviceVisual canvas,
        #serviceVisual svg,
        #serviceVisual img {
        max-width: 100%;
        max-height: 100%;
        width: 100% !important;
        height: auto;
        object-fit: contain;
        display: block;
        }
    }
    
/* ==================================================================== */
/* ==============  TABLET LANDING PAGE INDUSTRY SECTION  ============== */
/* ==================================================================== */
  @media (min-width: 481px) and (max-width: 991px) {
      .industry-section {
        padding: 3rem 0;
      }
    
      .industry-container {
        width: 90%;
        margin: 0 auto;
        text-align: center;
      }
    
      .industry-heading {
        font-size: 1.75rem;
        color: #fff;
        margin-bottom: 1rem;
      }
    
      .industry-subheading {
        font-size: 1rem;
        line-height: 1.5;
        color: #fff;
        margin-bottom: 2rem;
      }
    
      /* ============== CARDS WRAPPER FIX ============== */
      .industry-cards-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
        width: 100%;
        margin: 0 auto;
        padding: 2rem 0;
      }
    
      .industry-card {
        flex: 0 0 calc(50% - 16px);
        margin: 8px;
        min-height: 15rem;
        max-height: 15rem;
        background: #fff;
        border-radius: 1.5rem;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        position: relative;
        z-index: 2;
        overflow: hidden;
      }
    
      /* Hide images in tablet */
      .industry-card .card-image {
        display: none !important;
      }
    
      .industry-card .card-inner {
        flex-direction: column;
        justify-content: center;
        height: 100%;
      }
    
      .industry-card .card-text {
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
      }
    
      .industry-title {
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        word-break: break-word;
        max-width: 100%;
        text-align: inherit;
      }
    
      .industry-desc {
        font-size: 1rem;
        line-height: 1.4;
        text-align: inherit;
        margin: 0;
      }
    
      /* Directional alignment */
      .card1 .card-text { text-align: left;  align-items: flex-start; }
      .card2 .card-text { text-align: right; align-items: flex-end; }
      .card3 .card-text { text-align: left;  align-items: flex-start; }
      .card4 .card-text { text-align: right; align-items: flex-end; }
    
      /* Remove padding top/bottom */
      .industry-card.card1,
      .industry-card.card2 {
        padding-top: 0;
      }
    
      .industry-card.card3,
      .industry-card.card4 {
        padding-bottom: 0;
      }
    
      /* Card backgrounds & colors */
      .industry-card.card1 {
        background: #80ccba;
        color: #2b2d6c;
        -webkit-mask-image: radial-gradient(circle at bottom right, transparent 7.5rem, rgba(0,0,0,0.5) 7.9rem, black 8rem);
                mask-image: radial-gradient(circle at bottom right, transparent 7.5rem, rgba(0,0,0,0.5) 7.9rem, black 8rem);
      }
    
      .industry-card.card2 {
        background: #dfe4cd;
        color: #5f4779;
        -webkit-mask-image: radial-gradient(circle at bottom left, transparent 7.5rem, rgba(0,0,0,0.5) 7.9rem, black 8rem);
                mask-image: radial-gradient(circle at bottom left, transparent 7.5rem, rgba(0,0,0,0.5) 7.9rem, black 8rem);
      }
    
      .industry-card.card3 {
        background: #d9e1df;
        color: #fe012c;
        -webkit-mask-image: radial-gradient(circle at top right, transparent 7.5rem, rgba(0,0,0,0.5) 7.9rem, black 8rem);
                mask-image: radial-gradient(circle at top right, transparent 7.5rem, rgba(0,0,0,0.5) 7.9rem, black 8rem);
      }
    
      .industry-card.card4 {
        background: #4ba9f1;
        color: #043386;
        -webkit-mask-image: radial-gradient(circle at top left, transparent 7.5rem, rgba(0,0,0,0.5) 7.9rem, black 8rem);
                mask-image: radial-gradient(circle at top left, transparent 7.5rem, rgba(0,0,0,0.5) 7.9rem, black 8rem);
      }
    
      /* ====================== CENTER CIRCLE ======================= */
      .industry-central-circle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 14rem;
        height: 14rem;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
      }
    
      #industryLottieCircle {
        width: 100%;
        height: 100%;
      }
  }
  
/* ================================================================== */
/* ==============  TABLET LANDING PAGE WHY US SECTION  ============== */
/* ================================================================== */
  @media (min-width: 481px) and (max-width: 991px){
      .why-us-section {
          --gap: 8px;
          --base: clamp(2rem, 8cqi, 80px);
          --speed: 0.6s;
          --easing: ease;
          color: #000;
          color: #fff;
          padding: 4rem 0;
      }

      .why-us-title {
          font-size: 1.75rem;
          font-weight: 700;
          margin-bottom: 0.75rem;
      }

      .why-us-intro {
          max-width: 78ch;
          margin: 0 auto 2.5rem;
          line-height: 1.55;
          opacity: 0.9;
          font-size: 1rem;
      }
    
      .why-us-grid {
          list-style: none;
          margin: 0 auto;
          padding: 0;
          display: grid;
          grid-template-columns: 10fr 1fr 1fr 1fr 1fr 1fr 1fr;
          gap: var(--gap);
          height: clamp(220px, 32dvh, 340px);   /* slightly shorter for tablets */
          width: min(100%, calc(100% - 2rem)); /* ensure full width on tablets */        
          transition: grid-template-columns var(--speed) var(--easing);
          container-type: inline-size;
      }

      /* collapsed (inactive) cards = dark text on light panel */
      .why-us-grid li {
          position: relative;
          overflow: hidden;
          min-width: var(--base);
          border-radius: 8px;
          border: 1px solid color-mix(in hsl, canvas, canvasText 50%);
          background: light-dark(#fff, #000);
          color: #2b2d6c;
      }

      /* expanded (active) card = white text */
      .why-us-grid li[data-active="true"] {
          color: #fff;
      }

      .why-card {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          gap: 0.5rem;
          padding: 0.5rem;
          width: var(--why-card-width, 100%);
          font-family: monospace;
          background: linear-gradient(90deg,#1e1c60,#9f5590);
      }
    
      /* Bring heading, paragraph, and link above the image */
      .why-card h3,
      .why-card p,
      .why-card a {
          position: relative;
          z-index: 2;
          color: inherit;
      }
    
      /* Rotated heading, vertically centered (collapsed mode) */
      .why-card h3 {
          position: absolute;
          top: 1rem;
          left: 1.25rem;
          transform: rotate(90deg);
          transform-origin: top left;
          font-size: 1rem;
          font-weight: 700;
          letter-spacing: 0.04em;
          text-transform: uppercase;
          white-space: nowrap;
          color: inherit;
          z-index: 2;
          padding-right: 0.5rem; /* avoids clipping */
          max-width: calc(100% - 2rem);
          overflow: hidden;
          text-overflow: ellipsis;
      }
    
    
      .why-card p {
          font-size: 1rem;
          font-weight: 700;
          line-height: 1.4;
          margin: 0;
          opacity: 0;
      }
    
      .why-card a {
          font-size: 0.85rem;
          font-weight: 600;
          color: inherit;
          opacity: 0;
          text-underline-offset: 4px;
      }
    
      .why-card a:hover {
          text-decoration: underline;
      }
    
      .why-card img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 85%;
          object-fit: cover;
          filter: grayscale(1) brightness(1.4);
          transform: scale(1.1);
          transition: filter var(--speed) var(--easing), transform var(--speed) var(--easing);
          z-index: 0;
      }
    
      /* Dark gradient overlay on active card */
      .why-card::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, transparent 70%);
          opacity: 0;
          transition: opacity var(--speed) var(--easing);
          z-index: 1;
      }
    
      .why-us-grid li[data-active="true"] .why-card::after {
          opacity: 1;
      }
    
      /* Activation states for content */
      .why-us-grid li[data-active="true"] img {
          filter: grayscale(0) brightness(1);
          transform: scale(1);
      }
    
      .why-us-grid li[data-active="true"] :is(h3, p, a) {
          opacity: 1;
          transition: opacity var(--speed) var(--easing) 0.15s;
      }
  }

/* ================================================================================== */
/* ===================  TABLET LANDING PAGE PROCESS SECTION  ======================= */
/* ================================================================================== */
  
@media (min-width: 481px) and (max-width: 991px){
  #process h2 {
    font-size: 1.75rem;
    font-weight: bold;
  }
  #process h4 {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.8);
  }
  #process p.lead {
    font-size: 1rem;
    max-width: 800px;
    margin: 0 auto;
    color: rgba(255,255,255,0.9);
  }
  
  #process .text-muted {
    color: #fff !important;
  }
}

/* =================================================================================== */
/* ===================  TABLET LANDING PAGE TESTIMONIALS SECTION  ==================== */
/* =================================================================================== */
  @media (min-width: 481px) and (max-width: 991px) {
      .testimonial-row {
        gap: 1.5rem;
      }
    
      .testimonial-card {
        flex: 0 0 calc(50% - 1.5rem); /* 2 cards per row */
        font-size: 1rem;
      }
    
      .testimonial-text {
        font-size: 1rem;
      }
    
      .testimonial-author {
        font-size: 1.1rem;
      }
    
      .testimonial-role {
        font-size: 0.9rem;
      }
  }
    
/* ================================================================================== */
/* ===================  TABLET LANDING PAGE CONTACT US SECTION  ===================== */
/* ================================================================================== */
  @media (min-width: 481px) and (max-width: 991px) {
      /* Section spacing */
      .cta-form-section {
        padding: 1.5rem 0;
      }

      .cta-form-container {
        flex-direction: column !important;
      }
    
      .cta-horizontal-info {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }
    
      /* Wrapper width and padding */
      .cta-form-wrapper {
        width: 85%;
        padding: 2rem;
        border-radius: 1.5rem;
        margin: 0 auto;
      }
    
      /* Heading & description */
      .cta-heading {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 1rem;
      }
      .cta-description {
        font-size: 1.1rem;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 1.5rem;
      }
    
      /* Form layout spacing */
      .cta-form-container {
        gap: 1.5rem;
        margin-top: 1.5rem;
      }
    
      /* Form fields */
      .cta-left-form .row > [class*="col-"] {
        margin-bottom: 1rem;
      }
    
      /* Submit button */
      .cta-submit-btn {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
      }
    
      /* Contact info */
      .cta-horizontal-info {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 2rem 3rem;
          margin-top: 2.5rem;
        }
      
        .cta-horizontal-info > div {
          flex: 0 1 auto;
          display: flex;
          align-items: center;
          gap: 0.6rem;
          white-space: nowrap;
        }
      
        .cta-horizontal-info i {
          font-size: 1.3rem;
          color: #025185; /* deep violet */
        }
      
        .cta-horizontal-info span {
          font-size: 1rem;
          word-break: break-word;
          color: #2c2c2c;
        }
      
  }

/* ============================================================= */
/* ================ ABOUT US PAGE ============================== */
/* ============================================================= */
/* ==================================================================== */
/* =========================== HERO SECTION =========================== */
/* ==================================================================== */
  @media (min-width: 481px) and (max-width: 991px) {

      .hero-about-wrapper {
          width: 95%;
          padding: 0 1rem;
          margin: 0;
          display: flex;
          text-align: center;
          align-items: center;
      }

      .book-container {
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
      }
    
      .hero-about-title {
        font-size: 1.5rem;
      }
    
      .hero-about-subtext {
        font-size: 1rem;
      }
  }

/* ========================================================================= */
/* ================ COMPANY INFO & FOUNDER MESSAGE SECTION ================= */
/* ========================================================================= */
  @media (min-width: 481px) and (max-width: 991px) {
      .company-info-wrapper {
        width: 95%; /* Wider on tablet */
      }
    
      .info-block {
        flex-direction: row !important; 
        margin: 0;
      }
    
      .info-image, .info-text {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 1rem;
      }
    
      .info-image img {
        width: 100%;
        height: auto;
        border-radius: 0.75rem;
      }
    
      .info-title {
        font-size: 1.3rem;
      }
    
      .info-subtitle {
        font-size: 1.1rem;
      }
    
      .info-text p,
      .info-list,
      .info-list li,
      blockquote {
        font-size: 0.95rem;
        line-height: 1.6;
      }
    
      blockquote footer {
        font-size: 1rem;
      }
  }
    
/* ==================================================================== */
/* ================ MISSION & VISION & VALUES SECTION ================= */
/* ==================================================================== */
  @media (min-width: 481px) and (max-width: 991px) {
      /* Make tablet container mimic desktop layout */
      .mvv-container-tablet {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 2rem;
        max-width: 1400px;
        margin: auto;
        padding: 3rem 1rem;
      }
    
      .mvv-left-tablet,
      .mvv-right-tablet {
        display: flex;
        flex-direction: column;
      }
    
      .mvv-left-tablet {
        flex: 0 0 70%;
        padding-right: 2rem;
        gap: 1.5rem;
        justify-content: space-between;
      }
    
      .mvv-top-tablet {
        gap: 1rem;
        margin-bottom: 1rem;
      }
    
      .mvv-block {
        display: flex;
        align-items: stretch;
        /* gap: 1.5rem; */
      }
    
      .mvv-label {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        background: #fff;
        color: #000;
        font-weight: 700;
        padding: 0.5rem;
        border-radius: 1rem;
        text-align: center;
        min-width: 3rem;
      }
    
      .mvv-content h3 {
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
        color: #fff;
      }
    
      .mvv-content p {
        font-size: 1.2rem;
        line-height: 1.6;
        color: #f0f0f0;
      }
    
      .mvv-right-tablet {
        flex: 0 0 20%;
        gap: 0.5rem;
      }
    
      .mvv-right-tablet .value-card {
        background: #fff;
        color: #000;
        padding: 1rem;
        border-radius: 0.75rem;
      }
    
      .mvv-right-tablet .value-card h4 {
        font-weight: 700;
        margin-bottom: 0.3rem;
        font-size: 1.1rem;
      }
    
      /* Optional: show text if you want to match desktop completely */
      .mvv-right-tablet .value-card p {
        font-size: 0.95rem;
        line-height: 1.4;
        margin: 0;
        display: block;
      }
  } 

/* ==================================================================== */
/* ================ SERVICES PAGE ================= */
/* ==================================================================== */

  @media (min-width:481px) and (max-width:991px) {
    .srv-section         { 
      padding:3rem 0; }
    .srv-header          { display:flex; flex-direction:column; align-items:center; margin-bottom:2rem; background:none; }
    .srv-heading h2,
    .srv-tagline-wrapper h3 { color:#fff; margin:.5rem 0; }
    .srv-body            { border-radius:1.25rem; padding:2.5rem 2rem; color:#fff; }
    .srv-btn-group-wrapper{ display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem; }
    .srv-btn-explore,
    .srv-btn-contact     { width:100%;font-size:1.1rem; }

    /* Color overrides */
    .phlebo-service .srv-body{background:#00a1ab;}
    .logistic-service .srv-body{background:#222155;}
    .ecom-service .srv-body{background:#841023;}
    .whitecollar-service .srv-body{background:#54206d;}
  }

/* ============================================================= */
/* ====================== TABLET CAREER ======================== */
/* ============================================================= */

  @media (min-width: 481px) and (max-width: 991px) {
    .career-section { padding: 1.5rem 0; }
    .career-wrapper   { width: 85%; padding: 2rem; border-radius: 1.5rem; }

    .career-heading   { font-size: 1.8rem; }
    .career-description { font-size: 1.1rem; }

    .career-form-container { flex-direction: column !important; gap: 1.5rem; }

    .career-horizontal-info { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .career-contact-info span {
      color: #000000;
      font-weight: 500;
    }
  }