/* ============================================================
   Mint Incorporation — brand overrides on top of the Consalt template
   Loaded LAST so these win. Palette: navy #001845 + gold #bf9143.
   ============================================================ */
:root{ --mint-navy:#001845; --mint-navy2:#1a2d5a; --mint-gold:#bf9143; }

/* ---- Hero: Mint infrastructure imagery with navy overlay + light text ---- */
.consalt-slider-bg{
  background:linear-gradient(90deg,rgba(0,18,45,.84),rgba(0,18,45,.42)),url(../images/mint-hero.jpg) center center/cover no-repeat !important;
}
.consalt-slider-bg2{
  background:linear-gradient(90deg,rgba(0,18,45,.84),rgba(0,18,45,.42)),url(../images/mint-renewable.jpg) center center/cover no-repeat !important;
}
.consalt-slider-bg3{
  background:linear-gradient(90deg,rgba(0,18,45,.84),rgba(0,18,45,.42)),url(../images/mint-city.jpg) center center/cover no-repeat !important;
}
.consalt-slider-title{ color:#fff !important; }
.consalt-slider-des{ color:#eef1f7 !important; opacity:.95; }
.slider_info span,.slider_info a{ color:#e7d9b8 !important; }

/* White header bar carrying the approved FULL-COLOUR logo (logo.png from the HTML).
   Navy nav links, gold on hover. Stays white when sticky. */
.consalt-header-area.style_five{ background:#fff !important; box-shadow:0 2px 14px rgba(0,24,69,.08); }
.consalt-header-area.style_five .style_bg{ background:transparent !important; box-shadow:none !important; }
.consalt-header-area.style_five .header-menu .nav_scroll > li > a{ color:#001845 !important; }
.consalt-header-area.style_five .header-menu .nav_scroll > li > a:hover{ color:#bf9143 !important; }
.consalt-header-area.style_five.sticky{ background:#fff !important; box-shadow:0 6px 24px rgba(0,24,69,.12); }
.consalt-header-area.style_five.sticky .style_bg{ background:transparent !important; box-shadow:none !important; }

/* Hero text must always be visible on every slide (kill per-slide entrance anims) */
.consalt-slider-content,
.consalt-slider-title,
.consalt-slider-title-box,
.consalt-slider-des,
.consalt-slider-btn,
.consalt-slider-btn *{ opacity:1 !important; visibility:visible !important; animation:none !important; transform:none !important; }

/* ---- Logo sizing where the template renders it large ---- */
.header-logo img{ height:66px; width:auto; }
/* Pull the logo left to line up with the content/container edge */
.header-logo{ text-align:left !important; margin-left:-73px; }
/* Grow header to contain the larger logo, and clear the hero content below it */
.consalt-header-area{ padding:16px 0 !important; top:0 !important; margin-top:0 !important; }
/* Remove any white gap at the very top */
html, body{ margin:0 !important; padding-top:0 !important; }
body{ background:#ffffff; }
/* The page canvas shows through on mobile overscroll/bounce. Make it dark navy so
   scrolling past the navy footer never flashes a white bar at the bottom. */
html{ background:#001233; }
.loading-screen{ position:fixed !important; }
/* Mobile only: the header uses z-index:100 and was rendering above the
   preloader (no z-index was set on it before), showing a strip of the
   header at the very top while the splash was up. */
@media (max-width:991px){
  .loading-screen{ z-index:9999 !important; }
}
/* sections without their own bg must be white (not the body colour) */
.mint-section{ background:#ffffff; }
body > .consalt-header-area{ margin-top:0 !important; }
.mhero{ margin-top:0 !important; }
/* Home header is a solid white bar in normal flow, so the hero starts below it */
.consalt-header-area.style_five:not(.inner-navy):not(.sticky){ position:relative; top:0; left:0; width:100%; z-index:100; }
/* Header "Let's Talk" CTA shown on the right (restored per client request).
   Mobile header is display:none anyway, so this only shows on desktop. */
.consalt-header-area .consalt_header-right{ display:flex !important; }
.consalt-header-area .header-button{ display:block !important; }
.mhero-slide{ padding-top:0; }
/* Desktop: header (~132px) is in normal flow above the hero, so shrink the hero
   to fill the rest of the viewport (header + hero = one screen). */
@media (min-width:992px){ .mhero{ height:calc(100vh - 152px); min-height:560px; } }
.breadcumb-area{ padding-top:230px !important; }
.call_area .footer_logo img{ height:58px !important; width:auto !important; }
.footer_area .footer_logo img{ height:100px !important; width:auto !important; }
.nav-logo img{ height:46px; width:auto; }

/* Footer uses the reversed/white logo on the dark navy band */
.footer_area .footer_logo img{ content:url(../images/logo-white.png); }

/* ---- Gold accent for the primary header CTA ---- */
.header-button a,.consalt_header-right .header-button.style_two a{
  background:var(--mint-gold) !important; color:var(--mint-navy) !important;
}
.header-button a:hover{ background:#d3a95a !important; }

/* Section eyebrow labels + small headings in gold to reinforce the accent */
.section_title h4{ color:var(--mint-gold) !important; }

/* Case-study (Featured Expertise) images fill their frames nicely */
.case-study-thumb img{ width:100%; height:360px; object-fit:cover; }
/* Show each card's title + subtitle at all times (template hid it until hover,
   which never triggers on touch). The navy content panel now always sits at the
   bottom of the card. */
.case-study-content{ opacity:1 !important; bottom:0 !important; }

/* Justify the About intro paragraphs */
.about_area .section_title.home_five p, .about_area .about_qute{ text-align:justify; }

/* About image: constrain to its column (was overflowing full-width) */
.about_thumb img{ width:100%; height:440px; object-fit:cover; display:block; border-radius:16px; }
.about_area.style_five .about_thumb{ margin-right:30px; }

/* Brighten footer email link */
.footer-widget-address_text a{ color:#e7d9b8 !important; }

/* ---- Inner-page breadcrumb hero: Mint image + navy overlay ---- */
.breadcumb-area{ background:linear-gradient(rgba(0,18,45,.82),rgba(0,20,50,.90)),url(../images/mint-city.jpg) center center/cover no-repeat !important; min-height:420px; padding:200px 0 80px !important; }
.breadcumb-title h4{ color:#fff !important; font-size:44px; }
.breadcumb-content ul li, .breadcumb-content ul li a{ color:#e7d9b8 !important; }
/* inner page header is the same white bar */
.inner-navy{ background:#fff !important; }

/* ---- Reusable Mint content blocks for inner pages ---- */
.mint-section{ padding:100px 0; }
.mint-eyebrow{ display:inline-block; color:#bf9143; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; margin-bottom:14px; }
.mint-h2{ color:#001845; font-size:40px; line-height:1.15; font-weight:800; margin-bottom:18px; }
.mint-lead{ color:#5c6473; font-size:18px; }
.mint-service-card{ background:#fff; border:1px solid #ece_dc; border:1px solid #ece7dc; border-radius:14px; padding:34px; height:100%; transition:transform .3s ease, box-shadow .3s ease; }
.mint-service-card{ transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.mint-service-card .ic{ transition:background .35s ease, color .35s ease; }
/* Different hover: white card lifts with a gold border + gold icon tile */
.mint-service-card:hover{ border-color:#bf9143; box-shadow:0 26px 50px -24px rgba(0,24,69,.3); transform:translateY(-9px); }
.mint-service-card:hover .ic{ background:#bf9143; }
.mint-service-card:hover .ic i{ color:#001845 !important; }
.mint-service-card:hover h3{ color:#bf9143 !important; }
.mint-service-card .ic{ width:58px; height:58px; border-radius:12px; background:#001845; display:grid; place-items:center; color:#bf9143; font-size:26px; margin-bottom:18px; }
.mint-service-card h3{ color:#001845; font-size:22px; margin:0 0 10px; }
.mint-service-card p{ color:#5c6473; font-size:15px; margin:0; }
.mint-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:18px; border-top:1px solid #ece7dc; }
.mint-tags span{ font-size:12.5px; color:#1a2d5a; background:#eef1f7; border-radius:999px; padding:5px 12px; }
.mint-chips{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.mint-chip{ display:inline-flex; align-items:center; gap:9px; font-weight:600; color:#001845; background:#fff; border:1px solid #e6e2d8; border-radius:999px; padding:13px 24px; transition:transform .25s ease, box-shadow .25s ease; }
.mint-chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:#bf9143; }
.mint-chip:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(0,24,69,.3); }
.mint-step{ text-align:center; padding:34px 20px; background:#fff; border:1px solid #ece7dc; border-radius:14px; height:100%; transition:background .35s ease, transform .35s ease, box-shadow .35s ease; }
.mint-step .num{ font-size:40px; font-weight:800; color:#bf9143; line-height:1; margin-bottom:12px; transition:color .35s ease; }
.mint-step h3{ color:#001845; font-size:20px; margin:0 0 8px; transition:color .35s ease; }
.mint-step p{ color:#5c6473; font-size:14px; margin:0; transition:color .35s ease; }
/* Gold hover fill (matches the home feature cards) */
.mint-step:hover{ background:#bf9143; border-color:#bf9143; transform:translateY(-6px); box-shadow:0 22px 46px -22px rgba(0,24,69,.35); }
.mint-step:hover .num, .mint-step:hover h3, .mint-step:hover p{ color:#001845 !important; }
.mint-value{ border:1px solid rgba(255,255,255,.28); border-radius:14px; padding:32px 26px; height:100%; transition:border-color .3s ease, background .3s ease, transform .3s ease; }
.mint-value:hover{ border-color:#bf9143; background:rgba(255,255,255,.05); transform:translateY(-5px); }
.mint-value .ic{ width:52px; height:52px; border-radius:12px; background:rgba(191,145,67,.15); display:grid; place-items:center; color:#bf9143; font-size:22px; margin-bottom:14px; }
.mint-value h3{ color:#fff; font-size:20px; margin:0 0 8px; }
.mint-value p{ color:#c6cfe0; font-size:14px; margin:0; }
.mint-contact-card{ background:#001845; border-radius:18px; padding:44px; height:100%; }
.mint-contact-card .mint-eyebrow{ color:#e7d9b8; }
.mint-contact-item{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-top:1px solid rgba(255,255,255,.12); }
.mint-contact-item:first-of-type{ border-top:none; }
.mint-contact-item .ic{ width:46px; height:46px; flex:none; border-radius:12px; background:rgba(191,145,67,.16); display:grid; place-items:center; color:#e7d9b8; font-size:20px; }
.mint-contact-item .lbl{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#e7d9b8; margin-bottom:3px; }
.mint-contact-item .val{ font-size:18px; color:#fff; }
.mint-contact-item a.val:hover{ color:#e7d9b8; }
/* Contact form */
.mint-form{ margin-top:28px; }
.mint-form-row{ display:flex; gap:16px; margin-bottom:16px; }
.mint-form-row > *{ flex:1; min-width:0; }
.mint-form input, .mint-form textarea{ width:100%; padding:14px 16px; border:1px solid #d8d3c6; border-radius:10px; font-size:15px; font-family:inherit; color:#001845; background:#fff; }
.mint-form textarea{ margin-bottom:18px; resize:vertical; display:block; }
.mint-form input::placeholder, .mint-form textarea::placeholder{ color:#9aa6bd; }
.mint-form input:focus, .mint-form textarea:focus{ outline:none; border-color:#bf9143; box-shadow:0 0 0 3px rgba(191,145,67,.15); }
.mint-form-btn{ display:inline-flex; align-items:center; gap:10px; background:#bf9143; color:#001845; font-weight:700; font-size:15px; padding:14px 34px; border-radius:40px; border:none; cursor:pointer; transition:background .3s ease, transform .3s ease; }
.mint-form-btn:hover{ background:#d3a95a; transform:translateY(-2px); }
@media(max-width:600px){ .mint-form-row{ flex-direction:column; gap:16px; } }

/* ===== Custom self-contained hero slider (.mhero) — one slide visible, cycles ===== */
.mhero{ position:relative; height:100vh; min-height:640px; overflow:hidden; background:#001845; }
.mhero-slide{ position:absolute; inset:0; background-size:cover; background-position:center; display:flex; align-items:center; opacity:0; visibility:hidden; transition:opacity 1.4s ease-in-out; z-index:1; }
.mhero-slide.active{ opacity:1; visibility:visible; z-index:2; }
/* Outgoing slide stays fully opaque beneath the incoming fade (see index.html hero JS) */
.mhero-slide.prev{ opacity:1; visibility:visible; z-index:1; }
.mhero-slide::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,18,45,.86) 0%,rgba(0,18,45,.60) 45%,rgba(0,18,45,.32) 100%); }
.mhero .container{ position:relative; z-index:3; }
.mhero-inner{ max-width:720px; opacity:0; transform:translateY(26px); transition:opacity .8s ease .25s, transform .8s ease .25s; }
.mhero-slide.active .mhero-inner{ opacity:1; transform:none; }
.mhero-inner h1{ color:#fff; font-weight:800; font-size:clamp(2.3rem,4.6vw,3rem); line-height:1.1; margin:111px 0px 18px;; }
.mhero-inner p{ color:#eef1f7; font-size:1.2rem; line-height:1.6; max-width:600px; margin:0 0 32px; }
.mhero-btn{ display:inline-flex; align-items:center; gap:10px; background:#bf9143; color:#001845 !important; font-weight:700; font-size:1rem; padding:16px 34px; border-radius:40px; transition:background .3s ease, transform .3s ease; }
.mhero-btn:hover{ background:#d3a95a; transform:translateY(-2px); }
.mhero-dots{ position:absolute; left:50%; bottom:38px; transform:translateX(-50%); display:flex; gap:12px; z-index:5; }
.mhero-dots button{ width:12px; height:12px; padding:0; border-radius:50%; border:2px solid rgba(255,255,255,.6); background:transparent; cursor:pointer; transition:.25s; }
.mhero-dots button.active{ background:#bf9143; border-color:#bf9143; transform:scale(1.15); }
@media (max-width:768px){ .mhero{ height:88vh; min-height:540px; } .mhero-inner p{ font-size:1.05rem; } }

/* ===== Splash / preloader: navy bg, M-mark logo + wordmark (no spinner) ===== */
#loading-screen, #loading-screen .animation-preloader{ background:#001845 !important; }
#loading-screen .bar{ background:#001845 !important; }
/* Mobile only: hide the template's top/bottom preloader bars so just the
   Mint logo + wordmark show. Desktop preloader is untouched. */
@media (max-width:991px){
  #loading-screen .bar{ display:none !important; }
}
.animation-preloader .spinner{ display:none !important; }
.mint-splash-logo{ display:block; width:118px; height:auto; margin:0 auto 26px; animation:mint-splash-pulse 1.6s ease-in-out infinite; }
#loading-screen .txt-loading{ font-size:30px !important; font-weight:700 !important; letter-spacing:2px !important; color:#fff !important; text-align:center !important; display:block !important; min-width:0 !important; }
@keyframes mint-splash-pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.06); opacity:.82; } }

/* Feature cards overlapped the hero via a -187px margin — place them below it */
section.feature_area.style_four{ margin-top:0 !important; padding:90px 0 !important; }

/* Feature card hover fill: gold instead of navy, with navy text for contrast */
.feature_item.style_four::before{ background:#bf9143 !important; }
.feature_item.style_four:hover .feature_content h3,
.feature_item.style_four:hover .feature_content p,
.feature_item.style_four:hover .feature_numbers,
.feature_item.style_four:hover .feature_content a,
.feature_item.style_four:hover .feature_btns a{ color:#001845 !important; }

/* Home services cards — equal height, top-aligned, Read More pinned to bottom */
section.service_area.styel_five{ padding:150px 0 90px !important; margin-top:0 !important; }
section.service_area.styel_five .section_title.text-center{ margin-bottom:80px !important; margin-top: 6%;  }
section.service_area.styel_five .row{ align-items:stretch !important; }
section.service_area.styel_five .col-lg-3{ display:flex; margin-bottom:30px; }
.service_single_item.style_five{ height:100%; width:100%; display:flex !important; flex-direction:column; margin-top:0 !important; margin-bottom:0 !important; }
.service_single_item.style_five .service_content{ display:flex; flex-direction:column; flex:1 1 auto; }
.service_single_item.style_five .service_btns{ margin-top:auto; }

/* Stats band: subtle infrastructure background + more top spacing */
section.counter_area.style_sixs{
	background:linear-gradient(rgba(0,18,45,.28),rgba(0,16,40,.30)),url(../images/mint-masterplan.jpg) center center/cover no-repeat !important;
	padding:120px 0 100px !important;
}
/* Remove the Get in Touch button from the stats band */
section.counter_area .counter_upper .consalt_btn{ display:none !important; }

/* ---- Scrolling industries marquee ---- */
.mint-marquee{ background:#bf9143; overflow:hidden; padding:24px 0; white-space:nowrap; }
.mint-marquee .track{ display:inline-flex; align-items:center; gap:56px; animation:mint-scroll 30s linear infinite; }
.mint-marquee span{ color:#001845; font-size:26px; font-weight:800; display:inline-flex; align-items:center; gap:56px; opacity:1; }
.mint-marquee span::after{ content:"\25C6"; color:#001845; font-size:14px; opacity:.55; }
@keyframes mint-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* Home-5 footer + call bands ship a teal background IMAGE -> force navy */
section.footer_area.style_five{ background:linear-gradient(180deg,#24417a 0%,#0a1f4d 55%,#000c24 100%) !important; }
.call_area.style_four{ background:#f6f5f1 !important; }

/* Closing CTA band ("Let's Build the Future Together", all pages): the template
   ships it as a light-grey card (#e9eaec) that read as a stray white bar before the
   navy footer. Recolour to a navy card with white text + gold button. */
.contact_form .row.form_bg{ background:#001845 !important; }
.contact_form .form_content h5{ color:#bf9143 !important; }        /* gold eyebrow */
.contact_form .form_content h3{ color:#ffffff !important; }
.contact_form .form_content p{ color:#c6cfe0 !important; }
.contact_form .consalt_btn.home_five a{ background-color:#bf9143 !important; color:#001845 !important; }
.contact_form .consalt_btn.home_five a span{ background-color:#d3a95a !important; }
.contact_form .consalt_btn.home_five a:hover{ color:#001845 !important; }

/* Scroll-up progress ring in gold */
.prgoress_indicator::after{ color:var(--mint-gold) !important; }
.prgoress_indicator svg.progress-circle path{ stroke:var(--mint-gold) !important; }

/* ===== Mobile navigation & layout =====
   The template's MeanMenu injects its own "Consalt" label on small screens.
   Keep the plugin for its accessible toggle behaviour, but give it MINT's
   complete visual treatment. These rules are intentionally mobile-only so
   desktop remains unchanged. */
@media (max-width:991px){
  .consalt-header-area{ display:none !important; }
  .mobile-menu-area.sticky{
    display:block !important;
    position:fixed !important;
    inset:0 0 auto;
    margin:0;
    background:#fff !important;
    box-shadow:0 4px 16px rgba(0,24,69,.12) !important;
    z-index:1000;
  }
  .mobile-menu.mean-container{ overflow:visible; }
  .mean-container .mean-bar{
    height:76px;
    padding:0;
    position:relative;
    background:#fff !important;
  }
  /* Hide template text labels */
  .mean-bar > a:not(.meanmenu-reveal), .mobile-menu-area .logo, .mobile-menu-area .header-logo{ font-size:0 !important; }
  
  .mean-container .mean-bar::before{
    content:"";
    position:absolute;
    display:block;
    left:16px;
    top:38px;
    transform:translateY(-50%);
    width:138px;
    height:51px;
    background:url(../images/logo.png) left center/contain no-repeat;
    z-index:2;
  }
  /* Transparent clickable home link sitting over the mobile logo (injected by
     custom.js). Left area only, so it never covers the hamburger on the right. */
  .mean-container .mean-bar .mint-logo-link{
    position:absolute; left:16px; top:0; height:76px; width:150px;
    display:block; z-index:3;
  }
  
  /* Hide logo when menu is open */
  .mean-container a.meanmenu-reveal.meanclose ~ .mean-bar::before {
    display: none !important;
  }

  .mean-container a.meanmenu-reveal{
    position:absolute;
    width:30px;
    height:30px;
    padding:13px;
    top:50%;
    transform: translateY(-50%);
    right:16px;
    background:transparent !important;
    z-index: 10;
  }

  /* Improve close button appearance (the hamburger toggle becomes an 'X' via JS class .meanclose) */
  .mean-container a.meanmenu-reveal.meanclose {
    background: transparent !important;
    font-size: 0 !important;
    color: transparent !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    z-index: 10;
  }
  /* Kill every child (bars, stray text nodes wrapped in spans, etc.) so only
     the ::after glyph below is ever shown — this is what removes the
     duplicate "x" next to the drawn "×". */
  .mean-container a.meanmenu-reveal.meanclose > *{
    display: none !important;
  }
  .mean-container a.meanmenu-reveal.meanclose::after {
    content: "\00D7"; /* Multiplication sign (X) */
    display: block !important;
    opacity: 1 !important;
    font-size: 32px;
    line-height: 1;
    color: #bf9143 !important;
  }
  .mean-container a.meanmenu-reveal span{
    display:block;
    height:2px;
    margin-top:5px;
    background:#bf9143 !important;
  }
  .mean-container .mean-nav{
    background:#001845;
    border-top:1px solid rgba(255,255,255,.14);
    /* The 76px logo bar is taken out of normal flow (fixed/absolute),
       so the nav list was rendering underneath it — push the whole
       list down by the bar's height so "Home" clears the logo. */
    margin-top:76px !important;
  }
  /* Reset spacing on the list itself. NOTE: deliberately not touching
     `display`, `height`, or `max-height` here — MeanMenu's own JS
     toggles this same element's inline display (see style="display:none"
     in the DOM when closed). Overriding those with !important would
     force the panel to stay open and break the hamburger's close click. */
  .mean-container .mean-nav ul.nav_scroll{
    padding:0 !important;
    margin:0 !important;
  }
  .mean-container .mean-nav ul li,
  .mean-container .mean-nav ul.nav_scroll li{
    width:100%;
    background:#001845;
    height:auto !important;
    min-height:0 !important;
    line-height:normal !important;
    flex:none !important;
    margin:0 !important;
  }
  .mean-container .mean-nav ul li a,
  .mean-container .mean-nav ul.nav_scroll li a{
    width:100%;
    background:#001845;
  }
  .mean-container .mean-nav ul li a:hover{
    background:#001845;
  }
  .mean-container .mean-nav ul li{ border-top:1px solid rgba(255,255,255,.10); }
  .mean-container .mean-nav ul li a{
    box-sizing:border-box;
    padding:17px 24px;
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-transform:none;
    line-height:1.4 !important;
    height:auto !important;
    min-height:0 !important;
    display:block !important;
  }
  .mean-container .mean-nav ul li a:hover{ color:#bf9143; }
  .mean-container .mean-nav ul li a.mean-expand,
  .mean-container .mean-nav ul li a.mean-expand:hover{
    width:auto;
    background:transparent;
    color:#bf9143;
  }

  .mhero{ height:100svh; min-height:600px; }
  .mhero-slide{ padding-top:76px; }
  .mhero .container{ width:100%; max-width:none; padding-right:24px; padding-left:24px; }
  .mhero-inner{ width:100%; max-width:34rem; }
  .mhero-inner h1{ font-size:clamp(2.1rem,9vw,2.65rem); line-height:1.12; }
  .mhero-inner p{ font-size:1rem; line-height:1.6; margin-bottom:26px; }
  .mhero-btn{ padding:14px 25px; font-size:.94rem; }
  .mhero-dots{ bottom:26px; gap:10px; left:50% !important; right:auto !important; transform:translateX(-50%) !important; }

  .breadcumb-area{ min-height:auto; padding:142px 0 62px !important; }
  .breadcumb-title h4{ font-size:clamp(2rem,9vw,2.6rem); line-height:1.12; }
  .mint-section{ padding:68px 0; }
  .mint-h2{ font-size:32px; }
  .mint-lead{ font-size:17px; }
  .mint-service-card{ padding:26px; }
  .mint-contact-card{ padding:30px 25px; }
  .mint-contact-item .val{ font-size:16px; overflow-wrap:anywhere; }
  .mint-step{ padding:26px 16px; }
  .mint-value{ padding:26px 20px; }

  section.feature_area.style_four{ padding:56px 0 26px !important; }
  section.about_area.style_five{ padding:30px 0 26px !important; }
  /* Stacked on mobile: drop the desktop side-gap so the image spans the full
     width and its edges line up flush with the text below (not inset on the right). */
  section.about_area.style_five .about_thumb{ margin-right:0 !important; }
  /* Text below the image: fill the full width so it's flush with the image on both
     edges (justified block), not inset/left-looking on the right. */
  section.about_area.style_five .section_title.home_five p{ width:100% !important; }
  section.about_area.style_five .about_box{ padding-right:0 !important; }
  section.service_area.styel_five{ padding:30px 0 54px !important; margin-top:0 !important; }
  section.service_area.styel_five .section_title.text-center{ margin-bottom:46px !important;  margin-top: 19%; }
  section.counter_area.style_sixs{ padding:78px 0 62px !important; }
  section.case-study-area.style_three{ padding:70px 0 !important; }
  .case-study-thumb img{ height:280px; }
  section.footer_area.style_five{ margin-top:0 !important; padding:74px 0 26px !important; }
  .footer_area .footer_logo img{ height:76px !important; }
}

@media (max-width:479px){
  .mhero{ min-height:570px; }
  .mhero-inner h1{ font-size:2.1rem; }
  .mhero-inner p{ font-size:.96rem; }
  .mint-h2{ font-size:29px; }
  .mint-service-card{ padding:24px 20px; }
  section.service_area.styel_five .section_title.text-center {
        margin-top: 60%;
    }
}

/* ===== Floating WhatsApp chat button (all pages) =====
   Sits bottom-right, lifted above the scroll-up progress ring so they stack. */
.mint-wa{
  position:fixed; right:26px; bottom:96px; width:56px; height:56px;
  border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -6px rgba(0,0,0,.45);
  z-index:900; transition:transform .25s ease, box-shadow .25s ease;
}
.mint-wa:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 16px 34px -8px rgba(0,0,0,.5); color:#fff; }
.mint-wa svg{ display:block; }
@media (max-width:991px){
  .mint-wa{ right:18px; bottom:84px; width:52px; height:52px; }
}