/* ============================================================
   Al Wassata Litaslif – colour refresh
   paste this block after style.css / in custom.css
   ============================================================ */

/* ---------- 1.  Global custom-properties  ---------- */
:root{
    /* background */
    --clr-bg-main:     #ffffff;   /* pages restent blanches pour la clarté */
    --clr-bg-alt:      #fff5eb;   /* crème douce f9f4e7 */
    --clr-bg-alt2:     #fcfaf5;   /* crème + clair */

    /* accents (boutons, liens, soulignés) */
    --clr-primary:      #9e0023;   /* camel doré cf9c64 */
    --clr-primary-dark: #6B745A;   /* rouge logo 9e0023 */
    --clr-primary-d1:   #b52b32;   /* rouge atténué */
    --clr-primary-d2:   #4d0012;   /* bordeaux profond green olive #5e7c67 */

    /* texte olive remplacé par taupe (logo haut) */
    --clr-taupe:        #6e635f;
    --clr-taupe-light:  #807773;
    --clr-taupe-dark:   #59514d;
}

/* ---------- 2.  Backgrounds  ---------- */
body,
.bg-white               {background:var(--clr-bg-main)!important;}
.bg-white-alt           {background:var(--clr-bg-alt)!important;}
.banner-area-5          {background:var(--clr-bg-alt2);}

/* ---------- 3.  Primary accent (buttons, links etc.) ---------- */
.theme-btn,
.theme-btn:focus,
.theme-btn:hover,
.theme-btn:active       {background:var(--clr-primary);border-color:var(--clr-primary);}
.theme-btn:hover,
.theme-btn:active       {background:var(--clr-primary-dark);}

a,
.under_link,
.read-more              {color:var(--clr-primary);}
a:hover,
.under_link:hover,
.read-more:hover        {color:var(--clr-primary-dark);}

/* underline decorative shape */
.underline-shape::after {background:orange;}

/* ---------- 4.  Headers & nav  ---------- */
.header-menu-4,
.navbar-toggler         {background:var(--clr-primary);}
.header-menu-4 .nav-link{color:#fff;}                /* keep links white */
.header-menu-4 .nav-link:hover,
.header-menu-4 .nav-link.active
                        {color:var(--clr-bg-main);}  /* subtle hover */

/* ---------- 5.  Icons, dots & small UI bits ---------- */
.arrow_right,
.arrow_left,
.icon_star,
.slick-dots button      {color:var(--clr-primary);}

/* ---------- 6.  Text colours ---------- */
body,
p, li, .feature-item    {color:var(--clr-olive);}
.subtitle, .short-title-2,
.section-title h1 span  {color:var(--clr-primary);}

/* ---------- 7.  Footer ---------- */
.footer-3               {background:var(--clr-primary-dark);}
.footer-3, .footer-3 p,
.footer-3 a             {color:#fff;}
.footer-3 a:hover       {color:var(--clr-bg-alt);}

/* ---------- 8.  CTA block ---------- */
.cta-bg-primary         {background:var(--clr-primary);}
.cta-4 .theme-btn       {background:#fff;color:var(--clr-primary-dark);}
.cta-4 .theme-btn:hover {background:var(--clr-bg-alt);}

/* ---------  OPTIONAL: smooth colour-transition on hover --------- */
.theme-btn,
a,
.slick-dots button,
.nav-link               {transition:all .25s ease;}
/* --- Hero text always black ------------------------------------ */
.banner-area-5 .banner-content h1,
.banner-area-5 .banner-content p{
    color:#000 !important;
}


/* ==============================================================
   1 /  Headings & “steps” – use the same cuivré accent as “Digital”
   ==============================================================*/

/* step section (4 étapes) underline + titles */
#feature .section-title .underline-shape::after,
.feature-card-widget-8 h4,
.feature-card-widget-8 .card-img svg path,            /* if icons are inline-SVG */
.feature-card-widget-8 .card-img img {                /* if icons are images with currentColor */
    background: var(--clr-primary) !important;
    color: var(--clr-primary) !important;
    fill:  var(--clr-primary) !important;
}

/* any other underline-shape on the page */
.underline-shape::after{
    background: orange !important;
}

/* ==============================================================
   2 /  Loan calculator – black background, white text
   ==============================================================*/
.basic-loan-calculator{
    background:#000 !important;
    color:#fff !important;
    border-radius:14px;                 /* keeps original style */
}

/* make inner text & labels readable */
.basic-loan-calculator h4,
.basic-loan-calculator .label,
.basic-loan-calculator .feature-list li,
.basic-loan-calculator input::placeholder{
    color:#fff !important;
}

/* inputs: dark field + white text */
.basic-loan-calculator .form-control{
    background:#111 !important;
    border-color:#444 !important;
    color:#fff !important;
}
.basic-loan-calculator .form-control:focus{
    border-color:var(--clr-primary);
    box-shadow:none;
}

/* optional – keep the primary accent for the calculator button */
.basic-loan-calculator .theme-btn{
    background:var(--clr-primary);
    border-color:var(--clr-primary);
}
.basic-loan-calculator .theme-btn:hover{
    background:var(--clr-olive-light);
}
/* ============================================================
   1 / Only underline-shape in headings gets the accent colour
   (reverts any colour we had given to step icons or titles)
   ============================================================ */

/* reset step icons & titles */
.feature-card-widget-8 h4,
.feature-card-widget-8 .card-img,
.feature-card-widget-8 .card-img svg path{
    color:inherit !important;
    background:none !important;
    fill:currentColor !important;
}

/* keep accent just for the decorative bar under highlighted words */
.underline-shape::after{
    background:orange!important;
}

/* ============================================================
   2 / Loan calculator – new subtle background
   ============================================================ */
.basic-loan-calculator{
    background:#fefdfc !important;   /* soft off-white */
    color:var(--clr-olive) !important;
}

/* inside the calculator ------------------------------------------------ */
.basic-loan-calculator h4,
.basic-loan-calculator .label{
    color:var(--clr-primary-dark) !important;
}

.basic-loan-calculator .form-control{
    background:#ffffff !important;
    border-color:#e5e5e5 !important;
    color:var(--clr-olive) !important;
}

.basic-loan-calculator .theme-btn{
    background:var(--clr-primary);
    border-color:var(--clr-primary);
}
.basic-loan-calculator .theme-btn:hover{
    background:var(--clr-olive-light);
}
/* underline text = black, bar = cuivré */
.underline-shape{
    color:#000 !important;          /* text */
}
.underline-shape::after{
    background:orange;  /* bar stays accent colour */
}
/* -------------------------------------------------
   Hero banner (1ʳᵉ section) – soft-grey background
   -------------------------------------------------*/
.banner-area-5{
    background:#f5f5f5 !important;   /* doux gris clair */
}
/* “Questions fréquentes” – text in white */
.faq-area-3 .underline-shape{color:#fff!important;}
/* steps icons – remove coloured circle / square */
.feature-card-widget-8 .card-img,
.feature-card-widget-8 .card-img img,
.feature-card-widget-8 .card-img svg{
    background:transparent !important;
    box-shadow:none !important;   /* kills any template shadow */
}

/* if the SVG paths themselves were tinted, reset them */
.feature-card-widget-8 .card-img svg path{
    fill:currentColor !important; /* inherits normal text colour */
}
/* =====================================================
   Steps  – replace icons by SVG badges Étape 1-4
   (leave your HTML unchanged)
   ===================================================== */

/* Hide original <img> / <svg> inside .card-img */
.feature-card-widget-8 .card-img > *{
    display:none !important;
}

/* Shared badge style */
.feature-card-widget-8 .card-img{
    width:80px;height:80px;
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

/* ---------------- Badge SVGs as data-URIs ------------- */
.feature-card-widget-8:nth-of-type(1) .card-img{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='40' cy='40' r='38' fill='%23f5f5f5' stroke='%23e0e0e0' stroke-width='2'/><text x='40' y='34' text-anchor='middle' font-family='Arial' font-size='15' fill='%23000'>Étape</text><text x='40' y='56' text-anchor='middle' font-family='Arial' font-size='22' font-weight='700' fill='%23000'>1</text></svg>");
}
.feature-card-widget-8:nth-of-type(2) .card-img{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='40' cy='40' r='38' fill='%23f5f5f5' stroke='%23e0e0e0' stroke-width='2'/><text x='40' y='34' text-anchor='middle' font-family='Arial' font-size='15' fill='%23000'>Étape</text><text x='40' y='56' text-anchor='middle' font-family='Arial' font-size='22' font-weight='700' fill='%23000'>2</text></svg>");
}
.feature-card-widget-8:nth-of-type(3) .card-img{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='40' cy='40' r='38' fill='%23f5f5f5' stroke='%23e0e0e0' stroke-width='2'/><text x='40' y='34' text-anchor='middle' font-family='Arial' font-size='15' fill='%23000'>Étape</text><text x='40' y='56' text-anchor='middle' font-family='Arial' font-size='22' font-weight='700' fill='%23000'>3</text></svg>");
}
.feature-card-widget-8:nth-of-type(4) .card-img{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><circle cx='40' cy='40' r='38' fill='%23f5f5f5' stroke='%23e0e0e0' stroke-width='2'/><text x='40' y='34' text-anchor='middle' font-family='Arial' font-size='15' fill='%23000'>Étape</text><text x='40' y='56' text-anchor='middle' font-family='Arial' font-size='22' font-weight='700' fill='%23000'>4</text></svg>");
}
/* ==========================================================
   NAVBAR  –  default white, coloured after scroll
   ========================================================== */

/* 1.  Default (top of page) -------------------------------- */
.header-menu-4,
.header-menu-4 .navbar-toggler{
    background:var(--clr-bg-main) !important;   /* white */
}

.header-menu-4 .nav-link{
    color:var(--clr-primary-dark) !important;   /* cuivré texte */
}

/* hamburger lines */
.header-menu-4 .hamburger span,
.header-menu-4 .hamburger-cross span{
    background:var(--clr-primary-dark) !important;
}

/* 2.  After scroll – JS adds .navbar_fixed ----------------- */
.navbar_fixed{
    background:var(--clr-bg-alt) !important;  /* cuivré */
}

.navbar_fixed .nav-link{
    color:primary !important;
}
.navbar_fixed .nav-link:hover,
.navbar_fixed .nav-link.active{
    color:var(primary) !important;       /* subtle hover */
}

.navbar_fixed .hamburger span,
.navbar_fixed .hamburger-cross span{
    background:#fff !important;                /* white bars */
}
/* ==========================================================
   BUTTON HOVER COLORS – Hero Section
   ========================================================== */

/* Accéder aux offres – white text, background animates on hover */
.banner-area-5 .theme-btn {
    color: #fff !important;
    background: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    transition: background 0.3s ease;
}

.banner-area-5 .theme-btn:hover {
    background: var(--clr-primary-dark) !important;
    border-color: var(--clr-primary-dark) !important;
    color: #fff !important; /* keep white text */
}


/* Découvrir davantage – olive green by default */
.banner-area-5 .under_link {
    color: var(--clr-olive) !important;
}

.basic-loan-calculator .theme-btn:hover {
    background: var(--clr-primary) !important; /* Cuivré color on hover */
    color: #fff !important;                   /* Ensure text stays white */
}

/* on masque le pseudo-élément que Slick crée par défaut */
.about-slider .slick-dots li button::before { display:none; }

/* on dessine nos propres ronds */
.about-slider .slick-dots li button{
  width:10px;                /* taille du point */
  height:10px;
  border-radius:50%;
  background:var(--clr-primary-dark);
  opacity:.35;               /* point inactif */
  transition:opacity .25s ease;
  margin:0 6px;
}

/* point actif */
.about-slider .slick-dots li.slick-active button{
  opacity:1;
    background:var(--clr-primary-dark);




}


/* ==========================================================
   BANNER “Al Wassata Litaslif” – colour tune-up
   (drop this at the very end of custom.css)
   ========================================================== */

/* 1 /  Section background  –– soft off-white ↑ palette */
.banner-area-5{
    background: var(--clr-bg-alt) !important;   /* #FEFDFC */
}

/* 2 /  Decorative SVG / PNG shapes inside the banner
       tint them in the primary cuivré                       */
.banner-area-5 .bg-shapes .shape img{
    filter: brightness(0) saturate(100%)   /* prep */
            sepia(1) hue-rotate(-10deg)    /* tiny tweak */
            saturate(600%)                 /* punch */
            brightness(95%);               /* keep it warm */
}

/* 3 /  Headline accents
------------------------------------------------------------*/
.banner-area-5 .underline-shape{
    color:#000 !important;                 /* text stays black   */
}
.banner-area-5 .underline-shape::after{
    background: orange !important;   /* cuivré bar   */
}

/* 4 /  Buttons & links
------------------------------------------------------------*/
/* Accéder aux offres – cuivré background, white text */
.banner-area-5 .theme-btn{
    background: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    color:#fff !important;
}
.banner-area-5 .theme-btn:hover{
    background: var(--clr-primary-dark) !important;
    border-color: var(--clr-primary-dark) !important;
}

/* Découvrir davantage – permanent olive link */
.banner-area-5 .under_link{
    color: var(--clr-olive) !important;
}
.banner-area-5 .under_link:hover{
    color: var(--clr-olive-light) !important;
}

/* 5 /  “Basic-loan-calculator” card inside the banner
------------------------------------------------------------*/
.banner-area-5 .basic-loan-calculator{
    background:#fff !important;            /* keep it bright     */
    border:1px solid #e5e5e5;
    box-shadow:0 8px 24px rgba(0,0,0,0.05);
}
.banner-area-5 .basic-loan-calculator h4{
    color: var(--clr-primary-dark) !important;
}
.banner-area-5 .basic-loan-calculator .theme-btn{
    background: var(--clr-primary);
    border-color: var(--clr-primary);
}
.banner-area-5 .basic-loan-calculator .theme-btn:hover{
    background: var(--clr-primary-dark);
}

/* 6 /  Operator logos (optional) – desaturate so the
       palette remains harmonious. Remove if you
       want to keep their original colours              */
.banner-area-5 .co-operators img{
    filter: grayscale(80%) contrast(110%);
}
.banner-area-5 .co-operators img:hover{
    filter:none;                            /* full colour on hover */
}
/* ==========================================================
   CTA  – bright cuivré background matching big buttons
   ========================================================== */

/* 1 ▸ block itself  */
.cta-bg-primary{
    /* single bright colour (same as buttons) */
    background: var(--clr-primary) !important;               /* #BE8057 */
    /* or, if you prefer a subtle gradient:                    *
     * background:linear-gradient(135deg,
     *            var(--clr-primary) 0%, #ca9466 100%) !important;
     */

    color:#fff;                                              /* white text */
}

/* 2 ▸ inside that block , keep the button style you already set */
.cta-4 .theme-btn{
    background:#fff !important;          /* white pill */
    color:var(--clr-primary-dark) !important;
    border-color:#fff !important;
}
.cta-4 .theme-btn:hover{
    background:var(--clr-bg-alt) !important; /* off-white on hover  */
}

/* 3 ▸ make sure links inside stay readable */
.cta-bg-primary a,
.cta-bg-primary p,
.cta-bg-primary h2,
.cta-bg-primary li{color:#fff!important;}

/* ====================== ABOUT-SLIDER ========================== */
.about-slider {               /* conteneur principal */
  position: relative;         /* permettra de positionner les dots */
  max-width: 100%;
  padding-bottom: 60px;       /* réserve de l’espace pour les dots */
}

.about-slider img {
  max-height: 550px;          /* hauteur désirée */
  width: auto;                /* conserve le ratio original 740×760 */
  max-width: 100%;            /* fluide si colonne + petite */
  height: auto;
  object-fit: contain;        /* >>> plus de rognage <<< */
  display: block;
  margin: 0 auto;
}

/* Dots repositionnés dans l’espace réservé plus haut */
.about-slider .slick-dots {
  position: absolute;
  bottom: 10px;               /* espace vers le bas */
  left: 0; right: 0;
}

/* Mobile / tablette : plein écran, hauteur auto */
@media (max-width: 991px) {
  .about-slider {
    padding-bottom: 40px;
  }
  .about-slider img {
    max-height: none;
    width: 100%;
  }
}


/* ============================================================== */

.btn-nl{
  background:#9e0023;
  border-color:#9e0023;
  color:#fff;
}
.btn-nl:hover,
.btn-nl:focus{
  background:#4d0012;      /* tonalité foncée cohérente avec votre palette */
  border-color:#4d0012;
  color:#fff;
}

.modal-backdrop.show {
    z-index: 1 !important;
}

.bg-primary {
    background-color: var(--clr-primary) !important;
}


html {
  color-scheme: light !important;
}