@charset "UTF-8";

/* =========================================================
   ghaithkfmc — WordPress adaptations for the design (ghaith.css)
   Keep ghaith.css identical to the design; put fixes here.
   ========================================================= */

/* ============ Tajawal (local) ============ */
@font-face{font-family:"Tajawal";font-weight:400;font-display:swap;src:url("../fonts/Tajawal-Regular.woff2") format("woff2"),url("../fonts/Tajawal-Regular.woff") format("woff")}
@font-face{font-family:"Tajawal";font-weight:500;font-display:swap;src:url("../fonts/Tajawal-Medium.woff2") format("woff2"),url("../fonts/Tajawal-Medium.woff") format("woff")}
@font-face{font-family:"Tajawal";font-weight:700;font-display:swap;src:url("../fonts/Tajawal-Bold.woff2") format("woff2"),url("../fonts/Tajawal-Bold.woff") format("woff")}
@font-face{font-family:"Tajawal";font-weight:800;font-display:swap;src:url("../fonts/Tajawal-ExtraBold.woff2") format("woff2"),url("../fonts/Tajawal-ExtraBold.woff") format("woff")}
@font-face{font-family:"Tajawal";font-weight:900;font-display:swap;src:url("../fonts/Tajawal-Black.woff2") format("woff2"),url("../fonts/Tajawal-Black.woff") format("woff")}

/* ============ Admin bar ============ */
.admin-bar .header{top:32px}
@media (max-width:782px){.admin-bar .header{top:46px}}
@media (max-width:600px){.admin-bar .header{top:0}}

/* ============ Primary menu (wp_nav_menu) ============ */
.nav .nav-menu{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.nav li{position:relative}
.nav .nav-menu > li > a{display:block}
.nav .current-menu-item > a,
.nav .current-menu-ancestor > a{color:var(--green-800)}
.nav .current-menu-item > a::after,
.nav .current-menu-ancestor > a::after{transform:scaleX(1)}

.nav .menu-item-has-children > a{padding-inline-end:30px}
.nav .menu-item-has-children > a::before{
  content:"";position:absolute;inset-inline-end:14px;top:50%;width:6px;height:6px;margin-top:-5px;
  border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.nav .sub-menu{
  position:absolute;top:100%;inset-inline-start:0;z-index:70;min-width:230px;margin:0;padding:8px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.nav .sub-menu a{display:block;padding:9px 14px;border-radius:10px;font-size:14.5px;white-space:nowrap}
.nav .sub-menu a::after,
.nav .sub-menu a::before{display:none}
.nav .sub-menu a:hover,
.nav .sub-menu .current-menu-item > a{background:var(--green-50)}

/* Placeholder parents ("#") only open their sub-menu */
.nav a[href="#"],.mobile-menu a[href="#"]{cursor:default}

/* Room for the full primary_menu on small desktops */
.nav .nav-menu > li > a{white-space:nowrap}
@media (min-width:1024px) and (max-width:1279.98px){
  .header .container{gap:14px}
  .nav .nav-menu{gap:0}
  .nav .nav-menu > li > a{padding-inline:11px;font-size:15px}
  .nav .nav-menu > li > a::after{inset-inline:11px}
  .nav .nav-menu > .menu-item-has-children > a{padding-inline-end:26px}
  .nav .menu-item-has-children > a::before{inset-inline-end:11px}
}

/* Mobile menu — ".header .container" is flex in the design, stack it here */
.mobile-menu .container{display:block;min-height:0}
.mobile-menu ul{margin:0;padding:0;list-style:none}
.mobile-menu .m-cta .btn{display:inline-flex;padding:10px 20px;border-bottom:1.6px solid transparent}
.mobile-menu .m-cta .btn-outline{border-bottom-color:rgba(15,92,63,.35)}
.mobile-menu .current-menu-item > a{color:var(--green-700)}
.mobile-menu .sub-menu a{padding-inline-start:22px;font-weight:500;font-size:15px}

/* ============ Home sections ============ */
.about-more{margin-top:30px}

/* Service cards are links to the service page */
a.card{display:block;color:inherit}
.card .ic img{width:30px;height:30px;object-fit:contain;transition:filter .3s}
.card:hover .ic img{filter:brightness(0) invert(1)}

/* Fewer than six counters */
@media (min-width:900px){
  .stats--1{grid-template-columns:1fr}
  .stats--2{grid-template-columns:repeat(2,1fr)}
  .stats--4{grid-template-columns:repeat(4,1fr)}
  .stats--5{grid-template-columns:repeat(5,1fr)}
}
@media (min-width:1024px){
  .stats--1{grid-template-columns:1fr}
  .stats--2{grid-template-columns:repeat(2,1fr)}
  .stats--3{grid-template-columns:repeat(3,1fr)}
  .stats--4{grid-template-columns:repeat(4,1fr)}
  .stats--5{grid-template-columns:repeat(5,1fr)}
}

/* ============ Logo — horizontal lockup (mark + name), assets/images/logo-horizontal*.svg ============ */
.brand img{height:50px;max-width:none}
.footer-brand img{height:auto;width:100%;max-width:300px;margin-bottom:22px}
@media (min-width:600px){.brand img{height:60px}}

/* ============ Links inside the new header / footer ============ */
.topbar a:hover{color:#fff}
.brand:hover{color:inherit}
.footer-contact a:hover{color:#fff}
.btn-primary:hover,.btn-gold:hover,.btn-outline:hover{color:#fff}

/* =========================================================
   Inner pages still load Bootstrap 4 + the parent CSS.
   Keep the new header / footer matching the design there.
   ========================================================= */
.has-legacy-css .topbar .container,
.has-legacy-css .header .container,
.has-legacy-css .footer .container{max-width:none;padding-inline:0}
.has-legacy-css .nav{flex-wrap:nowrap}
.has-legacy-css .btn{line-height:1.85;vertical-align:baseline}
.has-legacy-css .btn:focus{box-shadow:none}
.has-legacy-css .footer-brand img{width:100%}