/* ==========================================================
   INDUSTRIES PAGE
   Reuses variables, container, buttons, header/footer, and the
   existing .industry-card / .process-card / shine components
   from home.css. Only new rules live here.
   ========================================================== */
/* ===== INDUSTRIES HERO ===== */

.industries-hero{position:relative;padding:20px 0 90px;background:url('assets/banner_img/industries2.webp') center/cover no-repeat;overflow:hidden; height: 480px;}

.industries-hero-overlay{display:none;}

.industries-hero .container{position:relative;z-index:2;}

.industries-hero-content{max-width:640px;}

.about-breadcrumb{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:22px;}

.about-breadcrumb a{color:rgba(255,255,255,.85);transition:.3s ease;}

.about-breadcrumb a:hover{color:#fff;}

.about-breadcrumb span:last-child{color:#fff;}

.eyebrow-light{color:#2563eb;}

.eyebrow-light::before{background:#cfe0ff;}

.industries-hero-content h1{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(32px,4vw,48px);line-height:1.18;letter-spacing:-0.02em;color:#0c0c0c;margin-bottom:18px;}

.industries-hero-content h1 .accent{display:block;color:#2563eb;}

.industries-hero-content p{font-size:16.5px;line-height:1.85;color:rgba(6,6,6,.85);max-width:540px;font-weight:bold;}

/* ===== INTRODUCTION ===== */

.industries-intro{padding:50px 0 40px;padding-bottom: 0px; background:var(--white);}

.industries-intro-inner{max-width:720px;margin:0 auto;text-align:center;}

.industries-intro-inner h2{
  font-size:clamp(28px,3.2vw,38px);
  font-weight:800;
  line-height:1.25;
  color:#0f172a;
  margin:14px 0 16px;
}

.industries-intro-inner h2 span{color:#2563eb;}

.industries-intro-inner p{font-size:16px;line-height:1.9;color:var(--muted);margin:0 auto;max-width:840px;}

.industry-content p{padding-bottom: 20px;}

/* ===== INDUSTRY CARDS (bullet points added on top of reused .industry-card) ===== */

.industry-points{
  list-style:none;
  margin:0 0 4px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:9px;
}

.industry-points li{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  font-weight:600;
  color:#374151;
}

.industry-points i{
  width:18px;height:18px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--blue-tint);
  color:var(--blue);
  font-size:10px;
  display:flex;align-items:center;justify-content:center;
}

/* ===== INDUSTRY IMAGES (spotlight rows) ===== */

.industry-spotlight-section{padding:30px 0;background:#f8fbff;}

.spotlight-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  margin-bottom:70px;
}

.spotlight-row:last-child{margin-bottom:0;}

.spotlight-row.reverse{direction:rtl;}

.spotlight-row.reverse > *{direction:ltr;}

.spotlight-image{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid transparent;
  box-shadow:0 20px 50px rgba(15,23,42,.10);
  transition:.45s ease;
}

.spotlight-image img{
  width:100%;
  height:340px;
  object-fit:cover;
  display:block;
  transition:.6s ease;
}

.spotlight-image::after{
  content:"";
  position:absolute;top:0;left:-170%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-25deg);
  pointer-events:none;
}

.spotlight-row:hover .spotlight-image{border-color:var(--blue);box-shadow:0 26px 60px rgba(13,91,255,.18);}

.spotlight-row:hover .spotlight-image img{transform:scale(1.06);}

.spotlight-row:hover .spotlight-image::after{animation:spotlightShine .8s linear;}

@keyframes spotlightShine{
  0%{left:-170%;}
  100%{left:170%;}
}

.spotlight-content .industry-number{
  display:block;
  font-size:44px;font-weight:800;line-height:1;
  color:rgba(13,91,255,.12);
  margin-bottom:6px;
}

.spotlight-content h3{font-size:24px;font-weight:800;color:#111827;margin-bottom:12px;}

.spotlight-content p{font-size:15px;line-height:1.85;color:var(--muted);margin-bottom:18px;}

/* ===== SOLUTION MAPPING ===== */

.mapping-section{padding:50px 0;background:var(--white);}

.mapping-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.mapping-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:26px 24px;
  box-shadow:var(--shadow-soft);
  transition:.35s ease;
}

.mapping-card:hover{transform:translateY(-6px);border-color:var(--blue);box-shadow:0 18px 38px rgba(13,91,255,.14);}

.mapping-card h3{font-size:16.5px;font-weight:800;color:#111827;margin-bottom:14px;}

.mapping-chain{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}

.mapping-chain span{
  background:var(--blue-tint);
  color:var(--blue);
  font-size:12.5px;
  font-weight:700;
  padding:6px 12px;
  border-radius:30px;
}

.mapping-chain i{font-size:11px;color:var(--muted);}

/* ===== BENEFITS ===== */

.benefits-section{padding:30px 0;background:#f8fbff;}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.benefit-card{
  position:relative;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:30px 26px;
  box-shadow:var(--shadow-soft);
  transition:.35s ease;
  overflow:hidden;
}

.benefit-card:hover{transform:translateY(-8px);border-color:var(--blue);box-shadow:0 20px 42px rgba(13,91,255,.14);}

.benefit-icon{
  width:52px;height:52px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--blue),#3b82f6);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  transition:.35s ease;
}

.benefit-icon i{font-size:22px;color:#fff;}

.benefit-card:hover .benefit-icon{transform:rotate(-6deg) scale(1.08);}

.benefit-number{
  position:absolute;top:22px;right:22px;
  font-size:28px;font-weight:800;
  color:rgba(13,91,255,.10);
}

.benefit-card h3{font-size:17px;font-weight:800;color:#111827;margin-bottom:8px;}

.benefit-card p{font-size:14px;line-height:1.75;color:var(--muted);margin:0;}

/* ===== PROCESS ===== (reuses .process / .process-card from home.css) */

/* ===== FAQ PREVIEW ===== */

.faq-preview-section{padding:100px 0;background:#f8fbff;}

.faq-preview-list{
  max-width:820px;
  margin:0 auto 36px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.faq-preview-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:22px 26px;
  box-shadow:var(--shadow-soft);
  transition:.3s ease;
}

.faq-preview-item:hover{border-color:var(--blue);}

.faq-preview-item h3{
  display:flex;align-items:flex-start;gap:10px;
  font-size:15.5px;font-weight:700;color:#111827;margin-bottom:8px;
}

.faq-preview-item h3 i{color:var(--blue);font-size:15px;margin-top:2px;}

.faq-preview-item p{font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 0 25px;}

.faq-preview-links{
  max-width:820px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
}

.faq-preview-more{display:flex;gap:22px;}

.faq-preview-more a{font-size:14px;font-weight:600;color:var(--muted);transition:.3s ease;}

.faq-preview-more a:hover{color:var(--blue);}

/* ===== CTA ===== */

.industries-cta{grid-template-columns:1fr auto;}

.industries-cta-actions{display:flex;gap:14px;flex-wrap:wrap;}

.btn-outline-white{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
}

.btn-outline-white:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
  transform:translateY(-3px);
}

/* ===== RESPONSIVE ===== */

@media(max-width:1100px){

  .benefits-grid{grid-template-columns:repeat(2,1fr);}

  .mapping-grid{grid-template-columns:repeat(2,1fr);}

}

@media(max-width:900px){

  .spotlight-row{grid-template-columns:1fr;gap:26px;}

  .spotlight-row.reverse{direction:ltr;}

  .spotlight-image img{height:260px;}

  .industries-cta{grid-template-columns:1fr;text-align:center;}

  .industries-cta-actions{justify-content:center;}

}

@media(max-width:768px){

  .industries-hero{padding:90px 0 60px;}

  .industries-intro{padding:64px 0 20px;}

  .industry-spotlight-section,
  .mapping-section,
  .benefits-section,
  .faq-preview-section{padding:64px 0;}

  .benefits-grid{grid-template-columns:1fr;}

  .mapping-grid{grid-template-columns:1fr;}

  .faq-preview-links{flex-direction:column;align-items:flex-start;}

}

@media(max-width:480px){

  .industries-hero-content p{max-width:none;}

}
/* ==================================================
   GLOBAL MOBILE HEADING STANDARD
   Keep all page headings consistent on mobile
   ================================================== */

@media (max-width: 768px){

    h1{font-size:32px !important;line-height:1.2 !important;}

    h2{font-size:25px !important;line-height:1.25 !important;}

    h3{font-size:22px !important;line-height:1.3 !important;}

    h4{font-size:18px !important;line-height:1.35 !important;}

    h5{font-size:16px !important;line-height:1.4 !important;}

    h6{font-size:14px !important;line-height:1.4 !important;}

}
/* ==================================================
   GLOBAL MOBILE SECTION SPACING
   Reduce excessive gaps between sections
   ================================================== */

@media (max-width:768px){

    section{margin-top:0 !important;margin-bottom:0 !important;padding-top:35px !important;padding-bottom:35px !important;}

    section+section{margin-top:0 !important;}

    .container{padding-left:16px !important;padding-right:16px !important;}

    .section-heading{margin-bottom:25px !important;}

    .section-title{margin-bottom:10px !important;}

    .section-subtitle{margin-bottom:20px !important;}

}
/* ==================================================
   INDUSTRIES HERO — MOBILE
   SAME STYLE AS SERVICES / PORTFOLIO / ABOUT
   RIGHT IMAGE + OVERLAY + CENTERED CONTENT
   ================================================== */

@media (max-width:576px){

    /* -----------------------------------------------
       INDUSTRIES HERO
       ----------------------------------------------- */

    .industries-hero{
        position:relative !important;
        overflow:hidden !important;

        background-position:right center !important;
        background-size:cover !important;
        background-repeat:no-repeat !important;
    }


    /* -----------------------------------------------
       BACKGROUND OVERLAY
       ----------------------------------------------- */

    .industries-hero-overlay{
        display:block !important;

        position:absolute !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100% !important;
        height:100% !important;

        z-index:2 !important;

        background:rgba(0,20,70,.40) !important;

        opacity:1 !important;
        visibility:visible !important;

        pointer-events:none !important;
    }


    /* -----------------------------------------------
       CONTAINER
       ----------------------------------------------- */

    .industries-hero .container{
        position:relative !important;
        z-index:3 !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 auto !important;

        padding-top:30px !important;
        padding-left:16px !important;
        padding-right:16px !important;

        text-align:center !important;
    }


    /* -----------------------------------------------
       HERO CONTENT
       ----------------------------------------------- */

    .industries-hero-content{
        position:relative !important;
        z-index:4 !important;

        width:100% !important;
        max-width:100% !important;

        margin:0 auto !important;

        text-align:center !important;
    }


    /* -----------------------------------------------
       EYEBROW / TOP PILL
       ----------------------------------------------- */

    .industries-hero .eyebrow{
        display:flex !important;

        align-items:center !important;
        justify-content:center !important;

        width:max-content !important;
        max-width:100% !important;

        margin:0 auto 18px !important;

        padding:9px 20px !important;

        background:#ffffff !important;

        border:none !important;
        border-radius:40px !important;

        color:#2563eb !important;

        font-size:10px !important;
        font-weight:800 !important;

        line-height:1.2 !important;
        letter-spacing:2px !important;

        text-align:center !important;

        white-space:nowrap !important;

        box-shadow:
            0 4px 15px rgba(0,0,0,.10) !important;
    }


    /* -----------------------------------------------
       EYEBROW BLUE LINE
       ----------------------------------------------- */

    .industries-hero .eyebrow::before{
        content:"" !important;

        display:block !important;

        width:22px !important;
        height:2px !important;

        margin-right:10px !important;

        background:#2563eb !important;

        border-radius:10px !important;

        flex-shrink:0 !important;
    }


    /* -----------------------------------------------
       MAIN HEADING
       ----------------------------------------------- */

    .industries-hero h1{
        position:relative !important;
        z-index:5 !important;

        width:100% !important;
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        color:#ffffff !important;

        font-weight:800 !important;

        text-align:center !important;

        text-shadow:
            0 2px 4px rgba(0,0,0,.90),
            0 4px 12px rgba(0,0,0,.65) !important;
    }


    /* -----------------------------------------------
       HEADING ACCENT
       ----------------------------------------------- */

    .industries-hero h1 .accent{
        color:#ffffff !important;

        background:none !important;

        -webkit-background-clip:initial !important;
        background-clip:initial !important;

        -webkit-text-fill-color:#ffffff !important;

        text-shadow:
            0 2px 5px rgba(0,0,0,.90) !important;
    }


    /* -----------------------------------------------
       DESCRIPTION
       ----------------------------------------------- */

    .industries-hero p{
        position:relative !important;
        z-index:5 !important;

        width:100% !important;
        max-width:100% !important;

        margin-left:auto !important;
        margin-right:auto !important;

        color:#ffffff !important;

        font-weight:600 !important;

        line-height:1.7 !important;

        text-align:center !important;

        text-shadow:
            0 2px 5px rgba(0,0,0,.90),
            0 3px 10px rgba(0,0,0,.60) !important;
    }

}

/* =========================================================
   INDUSTRIES HERO - MOBILE BANNER
   ========================================================= */

@media screen and (max-width: 576px) {

    .industries-hero {
        background-image: url("assets/mobile_banner/industries.webp") !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;

        min-height: 650px !important;
        overflow: hidden !important;
    }

    /* Hide HTML overlay */
    .industries-hero-overlay,
    .industries-hero .hero-overlay,
    .industries-hero .overlay {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        background: transparent !important;
    }

    /* Remove pseudo-element overlays */
    .industries-hero::before,
    .industries-hero::after {
        display: none !important;
        content: none !important;
        opacity: 0 !important;
        background: none !important;
    }

    /* Hide HTML hero content */
    .industries-hero-content {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

}