/* ==========================================================
   FAQ PAGE STYLES — Meg World Technologies
   Extends home.css design tokens (--blue, --radius, --shadow-soft…)
   Compact, premium, corporate. No new global resets.
========================================================== */
/* ===== FAQ HERO ===== */

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

.faq-hero::after{display:none;}

.faq-hero-inner{position:relative;z-index:2;max-width:640px;margin:0;}

.faq-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:40px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:#2563eb;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px;}

.faq-hero .eyebrow::before{background:#cfe0ff;}

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

.faq-hero h1 .accent{display:block;color:#2563eb;background:none;-webkit-background-clip:initial;-webkit-text-fill-color:initial;}

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

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

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

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

.faq-breadcrumb i{font-size:10px;color:rgba(255,255,255,.65);}

.faq-breadcrumb span{color:#fff;}

@media(max-width:768px){.faq-hero{padding:90px 0 60px;}.faq-hero-inner{max-width:100%;}.faq-hero h1{font-size:34px;}.faq-hero p{font-size:15px;}}
/* ===== FAQ INTRO / MAIN WRAPPER ===== */
.faq-main{padding:64px 0 80px;background:var(--light-bg,#F8FAFC);}
@media(max-width:768px){.faq-main{padding:48px 0 56px;}}

/* ===== FAQ SEARCH ===== */
.faq-search{
  position:relative;
  max-width:520px;
  margin:0 auto 28px;
}
.faq-search i{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--muted,#5B6472);font-size:14px;
}
.faq-search input{
  width:100%;
  padding:13px 18px 13px 44px;
  border-radius:50px;
  border:1.5px solid var(--border,#E5E7EB);
  background:#fff;
  font-family:'Inter',sans-serif;
  font-size:14.5px;
  color:var(--dark,#111);
  outline:none;
  box-shadow:0 6px 18px rgba(15,23,42,.04);
  transition:border-color .3s var(--ease,ease),box-shadow .3s var(--ease,ease);
}
.faq-search input::placeholder{color:#9aa3b0;}
.faq-search input:focus{
  border-color:var(--blue,#0D5BFF);
  box-shadow:0 10px 26px rgba(13,91,255,.14);
}

/* ===== FAQ FILTERS ===== */
.faq-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-bottom:44px;
}
.faq-filters button{
  padding:9px 18px;
  border-radius:50px;
  border:1.5px solid var(--border,#E5E7EB);
  background:#fff;
  color:var(--dark,#111);
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  transition:.3s var(--ease,ease);
  white-space:nowrap;
}
.faq-filters button:hover{
  border-color:var(--blue,#0D5BFF);
  color:var(--blue,#0D5BFF);
  background:var(--blue-tint,#EAF1FF);
}
.faq-filters button.active{
  background:var(--blue,#0D5BFF);
  border-color:var(--blue,#0D5BFF);
  color:#fff;
  box-shadow:0 8px 20px rgba(13,91,255,.25);
}

/* ===== FAQ ACCORDION ===== */
.faq-accordion{
  max-width:800px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.faq-item{
  position:relative;
  background:#fff;
  border:1px solid #e7edf7;
  border-radius:16px;
  overflow:hidden;
  transition:border-color .35s var(--ease,ease),box-shadow .35s var(--ease,ease),transform .35s var(--ease,ease);
  box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.faq-item::before{
  content:"";
  position:absolute;left:0;top:0;
  width:4px;height:100%;
  background:linear-gradient(180deg,#2563eb,#60a5fa);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s var(--ease,ease);
}
.faq-item:hover{
  border-color:#d7e6ff;
  box-shadow:0 14px 32px rgba(37,99,235,.1);
}

.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  text-align:left;
  background:none;
  font-family:'Manrope',sans-serif;
  font-size:15.5px;
  font-weight:700;
  color:var(--dark,#111);
}
.faq-num{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:9px;
  background:var(--blue-tint,#EAF1FF);
  color:var(--blue,#0D5BFF);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;
  font-family:'Manrope',sans-serif;
  transition:.35s var(--ease,ease);
}
.faq-q-text{flex:1;line-height:1.5;}
.faq-toggle{
  flex-shrink:0;
  width:30px;height:30px;
  border-radius:50%;
  border:1.5px solid var(--border,#E5E7EB);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted,#5B6472);
  transition:.35s var(--ease,ease);
}
.faq-toggle i{transition:transform .35s var(--ease,ease);font-size:12px;}

.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease,ease);
}
.faq-a-inner{
  padding:0 22px 20px 68px;
  color:var(--muted,#5B6472);
  font-size:14.5px;
  line-height:1.8;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .35s var(--ease,ease) .05s,transform .35s var(--ease,ease) .05s;
}

/* ===== FAQ ACTIVE STATE ===== */
.faq-item.open{
  border-color:#c9deff;
  box-shadow:0 18px 40px rgba(37,99,235,.14);
}
.faq-item.open::before{transform:scaleY(1);}
.faq-item.open .faq-num{
  background:var(--blue,#0D5BFF);
  color:#fff;
}
.faq-item.open .faq-q-text{color:var(--blue,#0D5BFF);}
.faq-item.open .faq-toggle{
  background:var(--blue,#0D5BFF);
  border-color:var(--blue,#0D5BFF);
  color:#fff;
  transform:rotate(180deg);
}
.faq-item.open .faq-a-inner{opacity:1;transform:translateY(0);}

/* empty state */
.faq-empty{
  display:none;
  text-align:center;
  max-width:800px;
  margin:10px auto 0;
  padding:26px;
  color:var(--muted,#5B6472);
  font-size:14.5px;
  font-weight:600;
  background:#fff;
  border:1px dashed var(--border,#E5E7EB);
  border-radius:14px;
}
.faq-empty.show{display:block;}

/* ===== FAQ CTA ===== */
.faq-cta{
  background:linear-gradient(120deg,var(--blue-dark,#0A46CC),var(--blue,#0D5BFF) 65%,#3b82f6);
  padding:44px 0;
}
.faq-cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.faq-cta-text h2{color:#fff;font-size:clamp(22px,2.4vw,28px);margin-bottom:6px;}
.faq-cta-text p{color:rgba(255,255,255,.8);font-size:14.5px;}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .faq-hero{padding:130px 0 52px;}
  .faq-hero h1{font-size:28px;}
  .faq-hero p{font-size:14.5px;}
  .faq-filters{gap:8px;}
  .faq-filters button{padding:8px 14px;font-size:12.5px;}
  .faq-q{padding:16px 16px;gap:12px;font-size:14.5px;}
  .faq-a-inner{padding:0 16px 18px 58px;font-size:14px;}
  .faq-num{width:26px;height:26px;font-size:11px;}
  .faq-toggle{width:26px;height:26px;}
  .faq-cta-inner{justify-content:center;text-align:center;}
}

@media(max-width:430px){
  .faq-hero{padding:120px 0 44px;}
  .faq-search input{font-size:14px;padding:12px 16px 12px 42px;}
  .faq-a-inner{padding-left:16px;}
  .faq-num{display:none;}
  .faq-q{gap:10px;}
}

@media(max-width:320px){
  .faq-filters button{padding:7px 12px;font-size:12px;}
}
/*==================================================
FAQ HEADING
==================================================*/

.faq-heading{text-align:center;max-width:720px;margin:0 auto 45px;}

.faq-heading .section-tag{display:inline-flex;align-items:center;justify-content:center;padding:7px 16px;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.12);border-radius:50px;color:#2563eb;font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:14px;}

.faq-heading h2{margin:0 0 12px;font-size:38px;font-weight:800;line-height:1.2;color:#101828;}

.faq-heading p{margin:0 auto;color:#64748b;font-size:15px;line-height:1.8;max-width:650px;}

@media(max-width:768px){

.faq-heading{margin-bottom:35px;}

.faq-heading h2{font-size:30px;}

.faq-heading p{font-size:14px;line-height:1.7;}

}

@media(max-width:480px){

.faq-heading h2{font-size:26px;}

.faq-heading .section-tag{font-size:9px;padding:6px 13px;}

.faq-heading p{font-size:13px;}

}
/* ==================================================
   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;}

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

@media (max-width:576px){

    /* -----------------------------------------------
       FAQ HERO
       ----------------------------------------------- */

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

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


    /* -----------------------------------------------
       BLUE / BLACK OVERLAY
       ----------------------------------------------- */

    .faq-hero::before{
        content:"" !important;

        position:absolute !important;
        inset:0 !important;

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

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

        z-index:1 !important;

        pointer-events:none !important;
    }


    /* -----------------------------------------------
       HERO INNER
       ----------------------------------------------- */

    .faq-hero-inner{
        position:relative !important;

        z-index:5 !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;
    }


    /* -----------------------------------------------
       EYEBROW
       ----------------------------------------------- */

    .faq-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
       ----------------------------------------------- */

    .faq-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
       ----------------------------------------------- */

    .faq-hero h1{
        position:relative !important;

        z-index:6 !important;

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

        margin:0 auto 18px !important;

        color:#ffffff !important;

        font-size:32px !important;

        line-height:1.2 !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;
    }


    /* -----------------------------------------------
       BLUE ACCENT
       ----------------------------------------------- */

    .faq-hero h1 span{
        color:#ffffff !important;

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


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

    .faq-hero p{
        position:relative !important;

        z-index:6 !important;

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

        margin:0 auto !important;

        color:#ffffff !important;

        font-size:15px !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;
    }

}


/* =========================================================
   FAQ HERO - MOBILE BANNER
   ========================================================= */

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

    .faq-hero {
        background-image: url("assets/mobile_banner/faq.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 text/content */
    .faq-hero-inner {
        display: none !important;
    }

    /* Remove any CSS overlay */
    .faq-hero::before,
    .faq-hero::after {
        display: none !important;
        content: none !important;
        background: none !important;
        opacity: 0 !important;
    }

}