/* =========================================================================
   FAISAL PREMIUM — Content-page design system.
   Styles the page-content HTML (Home / Contact / Academy share these classes)
   with the brand palette so the single Elementor Text Editor widget renders the
   page 100% identically on the front-end and in the editor. RTL-first.
   Scoped to .faisal-page-content so other pages are unaffected.
   ========================================================================= */

.faisal-page-content .container{width:100%;max-width:var(--container,75rem);margin-inline:auto;padding-inline:1.25rem}
.faisal-page-content section{padding-block:clamp(3rem,6vw,5.5rem)}
.faisal-page-content .section--alt{background:var(--bg-alt,#F7F4EF)}

/* ---- FULL-WIDTH page background (edge to edge, like the homepage) ----
   Every content section breaks out of ANY boxed theme/Elementor container so
   its background fills the viewport edge-to-edge; the inner .container keeps the
   text centered. Works no matter how deeply Elementor nests each section. */
.faisal-page-content section{
  position:relative;width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
/* keep the centered content readable inside the now-full-width band */
.faisal-page-content section > .container{margin-inline:auto}
/* guard against horizontal scrollbars from the breakout (both wrapper + page) */
.faisal-page-content{overflow-x:clip}
html body{overflow-x:clip}
.faisal-page-content .section__header{text-align:center;margin-bottom:2.5rem}
.faisal-page-content .section__tag{display:inline-block;font-size:.875rem;font-weight:700;letter-spacing:1px;color:var(--gold-dark,#a8883d);text-transform:uppercase;margin-bottom:.5rem}
.faisal-page-content .section__title{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:800;color:var(--text,#17231D);margin:0 0 .5rem}
.faisal-page-content .section__desc{color:var(--text-muted,#647067);max-width:42rem;margin:.25rem auto 0}
.faisal-page-content h4{margin:0 0 .25rem;font-weight:700;color:var(--text,#17231D)}
.faisal-page-content .gradient-text{background:linear-gradient(90deg,var(--gold,#C9A84C),var(--gold-light,#f5d169));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold,#C9A84C)}

/* Buttons */
.faisal-page-content .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;border-radius:999px;border:1.5px solid transparent;padding:.85rem 1.6rem;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;text-decoration:none}
.faisal-page-content .btn-lg{padding:1rem 2rem;font-size:1.0625rem}
.faisal-page-content .btn-xl{padding:1.05rem 2.25rem;font-size:1.1rem}
.faisal-page-content .btn-primary{background:var(--primary,#006837);color:#fff;box-shadow:0 10px 28px rgba(0,104,55,.30)}
.faisal-page-content .btn-primary:hover{background:var(--primary-dark,#00552c);transform:translateY(-2px);color:#fff}
.faisal-page-content .btn-gold{background:var(--gold,#C9A84C);color:var(--dark,#061410);box-shadow:0 10px 28px rgba(201,168,76,.28)}
.faisal-page-content .btn-gold:hover{background:var(--gold-light,#f5d169);transform:translateY(-2px);color:var(--dark,#061410)}
.faisal-page-content .btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.faisal-page-content .btn-outline-white:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.faisal-page-content .btn-outline{background:transparent;color:var(--primary,#006837);border-color:var(--primary,#006837)}
.faisal-page-content .btn-outline:hover{background:var(--primary,#006837);color:#fff;transform:translateY(-2px)}
.faisal-page-content .btn-outline-gold{background:transparent;color:var(--gold,#C9A84C);border-color:rgba(201,168,76,.5)}
.faisal-page-content .btn-outline-gold:hover{background:rgba(201,168,76,.12);border-color:var(--gold,#C9A84C);color:var(--gold,#C9A84C)}

/* HERO */
.faisal-page-content .hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--hero-1,#061410),var(--hero-2,#0D2518) 55%,var(--hero-3,#0F1E16));color:#fff;padding-block:clamp(3.5rem,7vw,6rem)}
.faisal-page-content .hero__grid{position:absolute;inset:0;background-image:radial-gradient(rgba(201,168,124,.07) 1px,transparent 1px);background-size:26px 26px;pointer-events:none}
.faisal-page-content .hero .container{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}
.faisal-page-content .hero__content{text-align:right}
.faisal-page-content .hero__badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--dark-soft,#1A4A2E);color:var(--gold,#C9A84C);border:1px solid rgba(201,168,124,.3);border-radius:999px;padding:.45rem 1rem;font-size:.875rem;font-weight:600;margin-bottom:1.25rem}
.faisal-page-content .hero__badge-dot{width:8px;height:8px;border-radius:50%;background:var(--gold,#C9A84C);animation:faisalPulse 1.8s infinite}
@keyframes faisalPulse{0%{box-shadow:0 0 0 0 rgba(201,168,76,.5)}70%{box-shadow:0 0 0 8px rgba(201,168,76,0)}100%{box-shadow:0 0 0 0 rgba(201,168,76,0)}}
.faisal-page-content .hero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.25rem);font-weight:800;line-height:1.25;margin:0 0 1rem}
.faisal-page-content .hero__desc{color:var(--gold-muted,#BFA06A);font-size:1.0625rem;line-height:1.85;max-width:40rem;margin:0 0 1.75rem}
.faisal-page-content .hero__cta{display:flex;gap:.875rem;flex-wrap:wrap;margin-bottom:1.75rem}
.faisal-page-content .hero__trust{display:flex;gap:1.5rem;flex-wrap:wrap;color:var(--gold-muted,#BFA06A);font-size:.875rem}
.faisal-page-content .hero__trust-item{display:inline-flex;align-items:center;gap:.4rem}
.faisal-page-content .hero__trust-icon{width:18px;height:18px;border-radius:50%;background:rgba(201,168,124,.25);position:relative;flex-shrink:0}
.faisal-page-content .hero__trust-icon::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold,#C9A84C);font-size:.7rem;font-weight:800}
.faisal-page-content .hero__visual{position:relative}
.faisal-page-content .hero__chart{background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(201,168,124,.24);border-radius:18px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.30)}
.faisal-page-content .hero__chart-header{color:var(--gold,#C9A84C);font-weight:700;font-size:.95rem;display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.faisal-page-content .hero__chart-spark{height:70px;border-radius:10px;margin-bottom:1rem;background:linear-gradient(180deg,rgba(201,168,76,.25),rgba(201,168,76,0));position:relative;overflow:hidden}
.faisal-page-content .hero__chart-spark::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--gold,#C9A84C);box-shadow:0 0 12px rgba(201,168,76,.8)}
.faisal-page-content .hero__chart-value{color:#fff;font-size:2rem;font-weight:800;line-height:1.1;direction:ltr;text-align:start}
.faisal-page-content .hero__chart-change{color:#10B981;font-weight:700;margin-bottom:1rem;direction:ltr}
.faisal-page-content .hero__chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;color:var(--gold-muted,#BFA06A);font-size:.85rem}
.faisal-page-content .hero__chart-grid strong{color:#fff}

/* Card grids */
.faisal-page-content .features-grid,.faisal-page-content .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.faisal-page-content .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.faisal-page-content .services-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.faisal-page-content .programs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.faisal-page-content .contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.faisal-page-content .feature-card,.faisal-page-content .step-card,.faisal-page-content .service-card,.faisal-page-content .program-card,.faisal-page-content .trust-card,.faisal-page-content .contact-card{background:linear-gradient(160deg,#fff 0%,#fcfaf6 100%);border:1px solid rgba(226,216,202,.85);border-radius:14px;padding:1.6rem 1.4rem;box-shadow:0 1px 2px rgba(6,20,16,.04),0 10px 24px rgba(6,20,16,.05);transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease,border-color .35s ease;height:100%}
.faisal-page-content .feature-card,.faisal-page-content .step-card,.faisal-page-content .trust-card,.faisal-page-content .contact-card{text-align:center;display:flex;flex-direction:column;align-items:center}
@media (hover:hover) and (pointer:fine){.faisal-page-content .feature-card:hover,.faisal-page-content .step-card:hover,.faisal-page-content .service-card:hover,.faisal-page-content .program-card:hover,.faisal-page-content .trust-card:hover,.faisal-page-content .contact-card:hover{transform:translateY(-8px);border-color:rgba(201,168,76,.55);box-shadow:0 6px 14px rgba(6,20,16,.06),0 26px 52px rgba(6,20,16,.12)}}
.faisal-page-content .feature-card__icon,.faisal-page-content .service-card__icon,.faisal-page-content .trust-card__icon,.faisal-page-content .contact-card__icon,.faisal-page-content .program-card__icon{width:54px;height:54px;border-radius:14px;flex-shrink:0;margin:0 auto .9rem;background:linear-gradient(140deg,rgba(0,104,55,.14),rgba(0,104,55,.05));border:1px solid rgba(0,104,55,.16)}
.faisal-page-content .service-card{display:flex;align-items:center;gap:.9rem;text-align:right}
.faisal-page-content .service-card__icon{margin:0}
.faisal-page-content .step-card__number{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--primary,#006837);color:#fff;font-weight:800;font-size:1.05rem;margin-bottom:.85rem}
.faisal-page-content .services-category{margin-bottom:1.75rem}
.faisal-page-content .services-category__title{font-size:1.05rem;font-weight:800;color:var(--primary,#006837);margin-bottom:.75rem;padding-bottom:.4rem;border-bottom:2px solid var(--primary-bg,rgba(0,104,55,.08))}
.faisal-page-content .program-card__header{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
.faisal-page-content .program-card__tag{font-size:.72rem;font-weight:700;color:var(--gold-dark,#a8883d);text-transform:uppercase;letter-spacing:.5px}
.faisal-page-content .program-card__body{color:var(--text-muted,#647067);font-size:.92rem}
.faisal-page-content .program-card__icon{margin:0}
.faisal-page-content .reports-list{grid-column:1 / -1;background:#fff;border:1px solid rgba(226,216,202,.85);border-radius:14px;padding:1.5rem;box-shadow:0 1px 2px rgba(6,20,16,.04)}
.faisal-page-content .reports-list h4{color:var(--primary,#006837);display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.faisal-page-content .reports-list ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.faisal-page-content .reports-list a{color:var(--text-secondary,#4b5563);text-decoration:none}
.faisal-page-content .reports-list a:hover{color:var(--primary,#006837)}
.faisal-page-content .trust-card h4{font-size:1.05rem;font-weight:800}

/* FaisalClick app */
.faisal-page-content .faisal-app{background:linear-gradient(135deg,var(--dark,#061410),var(--dark-green,#0D2518));border-radius:24px;padding:clamp(2rem,4vw,3rem);text-align:center;color:#fff;position:relative;overflow:hidden;margin-block:1rem}
.faisal-page-content .faisal-app::after{content:"";position:absolute;inset-block-start:-90px;inset-inline-end:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(201,168,124,.18),transparent 70%);pointer-events:none}
.faisal-page-content .faisal-app > .container,.faisal-page-content .faisal-app > *{position:relative;z-index:1}
.faisal-page-content .faisal-app__icon img{width:88px;height:88px;border-radius:20px;margin:0 auto 1rem;display:block;box-shadow:0 10px 28px rgba(201,168,76,.28)}
.faisal-page-content .faisal-app h2{color:var(--gold,#C9A84C)}
.faisal-page-content .faisal-app .section__desc{color:var(--gold-muted,#BFA06A)}
.faisal-page-content .faisal-app__btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:1.25rem}

/* FAQ */
.faisal-page-content .faq-tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.5rem}
.faisal-page-content .faq-tab{padding:.55rem 1.2rem;border-radius:999px;border:1.5px solid var(--border,#E2D8CA);background:#fff;cursor:pointer;font-weight:600;color:var(--text-secondary,#4b5563);font-family:inherit}
.faisal-page-content .faq-tab.active,.faisal-page-content .faq-tab:hover{background:var(--primary,#006837);color:#fff;border-color:var(--primary,#006837)}
.faisal-page-content .faq-list{max-width:46rem;margin-inline:auto}
.faisal-page-content .faq-item{background:#fff;border:1px solid var(--border-light,#eef1ee);border-radius:10px;margin-bottom:.75rem;overflow:hidden;box-shadow:0 1px 2px rgba(6,20,16,.04)}
.faisal-page-content .faq-question{width:100%;text-align:start;background:none;border:none;padding:1.1rem 1.25rem;font-weight:700;font-size:1rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--text,#17231D);font-family:inherit}
.faisal-page-content .faq-question i{transition:transform .3s ease;color:var(--primary,#006837)}
.faisal-page-content .faq-item.active .faq-question i{transform:rotate(180deg)}
.faisal-page-content .faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--text-muted,#647067)}
.faisal-page-content .faq-item.active .faq-answer{max-height:400px}
.faisal-page-content .faq-answer-inner{padding:0 1.25rem 1.1rem}

/* Open Account form */
.faisal-page-content .form-wrapper{background:#fff;border:1px solid var(--border,#E2D8CA);border-radius:18px;padding:clamp(1.5rem,4vw,2.5rem);box-shadow:0 12px 34px rgba(6,20,16,.10);max-width:60rem;margin-inline:auto}
.faisal-page-content .form-wrapper h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800;margin-bottom:.5rem}
.faisal-page-content .form-subtitle{color:var(--text-muted,#647067);margin-bottom:1.25rem}
.faisal-page-content .form-benefits{display:grid;gap:.5rem;margin:0 0 1.5rem;padding:0;list-style:none}
.faisal-page-content .form-benefits li{display:flex;align-items:center;gap:.5rem;color:var(--text-secondary,#4b5563);font-size:.9rem}
.faisal-page-content .form-benefits li::before{content:"✓";display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--primary-bg,rgba(0,104,55,.08));color:var(--primary,#006837);font-weight:800;font-size:.75rem;flex-shrink:0}
.faisal-page-content .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.faisal-page-content .form-group{margin-bottom:1rem;display:flex;flex-direction:column}
.faisal-page-content .form-group label{font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.faisal-page-content .form-group input,.faisal-page-content .form-group select,.faisal-page-content .form-group textarea{font-family:inherit;font-size:1rem;padding:.75rem .9rem;border:1.5px solid var(--border,#E2D8CA);border-radius:10px;background:#fff;color:var(--text,#17231D);width:100%}
.faisal-page-content .form-group input:focus,.faisal-page-content .form-group select:focus,.faisal-page-content .form-group textarea:focus{outline:none;border-color:var(--primary,#006837);box-shadow:0 0 0 4px var(--primary-bg,rgba(0,104,55,.08))}
.faisal-page-content .required{color:#dc2626}
.faisal-page-content .form-checkbox{display:flex;align-items:flex-start;gap:.6rem;margin:1rem 0;font-size:.9rem;color:var(--text-muted,#647067)}
.faisal-page-content .form-submit{width:100%;justify-content:center}

/* Contact */
.faisal-page-content .contact-card__label{font-weight:700;margin:.25rem 0 .35rem}
.faisal-page-content .contact-card__value,.faisal-page-content .contact-card a{color:var(--text-muted,#647067);text-decoration:none}
.faisal-page-content .contact-card a:hover{color:var(--primary,#006837)}

/* Popups (hidden until JS) */
.faisal-page-content .popup-overlay,.faisal-page-content .video-popup{display:none}
.faisal-page-content .popup-overlay.active,.faisal-page-content .video-popup.active{display:flex;position:fixed;inset:0;background:rgba(6,20,16,.6);align-items:center;justify-content:center;z-index:2000}
.faisal-page-content .popup-box{background:#fff;border-radius:16px;padding:2rem;max-width:30rem;text-align:center;position:relative}
.faisal-page-content .popup-close,.faisal-page-content .close-video{position:absolute;inset-block-start:.75rem;inset-inline-end:1rem;font-size:1.5rem;cursor:pointer;color:var(--text-muted,#647067)}

/* Reveal */
.js .faisal-page-content .animate-in{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s cubic-bezier(.4,0,.2,1)}
.js .faisal-page-content .animate-in.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:1024px){.faisal-page-content .hero .container{grid-template-columns:1fr}.faisal-page-content .hero__visual{margin-top:1.5rem}}
@media (max-width:900px){.faisal-page-content .features-grid,.faisal-page-content .trust-grid,.faisal-page-content .programs-grid,.faisal-page-content .contact-grid{grid-template-columns:repeat(2,1fr)}.faisal-page-content .steps{grid-template-columns:repeat(2,1fr)}.faisal-page-content .services-cards{grid-template-columns:1fr}}
@media (max-width:560px){.faisal-page-content .features-grid,.faisal-page-content .trust-grid,.faisal-page-content .programs-grid,.faisal-page-content .contact-grid,.faisal-page-content .steps{grid-template-columns:1fr}.faisal-page-content .form-row{grid-template-columns:1fr}}
[dir="rtl"] .faisal-page-content .service-card{text-align:right}

/* Home page content wrapper — passthrough; the homepage uses the theme's global
   classes (.hero-grid, .card, .icon-box, .faisalclick-section …) which are
   already styled by theme.css / cards.css / enhancements.css. */
.faisal-home-content{display:block}

/* =========================================================================
   CONTACT PAGE — premium fintech cards + SMART SVG ICONS (rendering fix)
   The .contact-card__icon boxes now center & color inline SVGs. Glass cards,
   hover lift, animated icons, equal heights. RTL-safe, mobile-optimized.
   ========================================================================= */
.faisal-page-content .contact-card__icon,
.faisal-page-content .feature-card__icon,
.faisal-page-content .service-card__icon,
.faisal-page-content .trust-card__icon,
.faisal-page-content .program-card__icon{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--primary,#006837);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .35s ease,color .35s ease,box-shadow .35s ease;
}
.faisal-page-content .contact-card__icon svg,
.faisal-page-content .feature-card__icon svg,
.faisal-page-content .service-card__icon svg,
.faisal-page-content .trust-card__icon svg,
.faisal-page-content .program-card__icon svg,
.faisal-page-content .faisal-svg{
  width:26px;height:26px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
/* Premium glass surface for contact cards */
.faisal-page-content .contact-card{
  background:linear-gradient(160deg,rgba(255,255,255,.95) 0%,rgba(252,250,246,.88) 100%);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:18px;position:relative;overflow:hidden;isolation:isolate;
}
.faisal-page-content .contact-card::before{
  content:"";position:absolute;inset-inline:0;top:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold,#C9A84C),transparent);
  opacity:0;transition:opacity .35s ease;
}
@media (hover:hover) and (pointer:fine){
  .faisal-page-content .contact-card:hover::before{opacity:1}
  .faisal-page-content .contact-card:hover .contact-card__icon{
    transform:scale(1.1) rotate(-5deg);
    background:linear-gradient(140deg,var(--primary,#006837),var(--primary-light,#008f4a));
    color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(0,104,55,.3);
  }
}
.faisal-page-content .contact-card__label{font-size:1.05rem}
.faisal-page-content .contact-card__value{font-size:.98rem;line-height:1.7}
/* 3-up on wide so 6 cards balance into 2 rows */
@media (min-width:901px){.faisal-page-content .contact-grid{grid-template-columns:repeat(3,1fr)}}
