/* =========================== Fonts (PINGAR LT family) =========================== */
 @font-face{
    font-family:"PINGAR LT";
    src:url("../fonts/PINGAR+LT-REGULAR.OTF") format("opentype");
    font-weight:400;
    font-style:normal;
    font-display:swap
}
 @font-face{
    font-family:"PINGAR LT";
    src:url("../fonts/PINGAR+LT-MEDIUM.OTF") format("opentype");
    font-weight:500;
    font-style:normal;
    font-display:swap
}
 @font-face{
    font-family:"PINGAR LT";
    src:url("../fonts/PINGAR+LT-BOLD.OTF") format("opentype");
    font-weight:700;
    font-style:normal;
    font-display:swap
}
 @font-face{
    font-family:"PINGAR LT";
    src:url("../fonts/PINGAR+LT-BLACK.OTF") format("opentype");
    font-weight:900;
    font-style:normal;
    font-display:swap
}
 body{
     font-family:"PINGAR LT";
     background-color: #ffffff;
}
/* ---------- Type scale + animations (for your hero) ---------- */
 .kicker{
    font-size:clamp(2rem,2.7vw,1rem)
}
 .welcome{
    font-size:clamp(2.2rem,3vw,1.2rem)
}
 .title-top{
    font-size:clamp(3rem,14vw,2rem);
    letter-spacing:.2px
}
 .title-bottom{
    font-size:clamp(38px,12vw,76px);
    letter-spacing:.3px
}
 @keyframes slideInRight{
    from{
        opacity:0;
        transform:translateX(40px)
    }
    to{
        opacity:1;
        transform:translateX(0)
    }
}
 @keyframes slideInDown{
    from{
        opacity:0;
        transform:translateY(-40px)
    }
    to{
        opacity:1;
        transform:translateY(0)
    }
}
 @keyframes fadeIn{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
 .anim-right{
    animation:slideInRight .7s cubic-bezier(.22,1,.36,1) both
}
 .anim-down{
    animation:slideInDown .7s cubic-bezier(.22,1,.36,1) both
}
 .anim-fade{
    animation:fadeIn .8s ease-out both
}
 .anim-delay-0{
    animation-delay:0s
}
.anim-delay-200{
    animation-delay:.2s
}
.anim-delay-300{
    animation-delay:.3s
}
.anim-delay-400{
    animation-delay:.4s
}
.anim-delay-600{
    animation-delay:.6s
}
 @media(prefers-reduced-motion:reduce){
    .anim-right,.anim-down,.anim-fade{
        animation:none!important;
        opacity:1!important;
        transform:none!important
    }
}
/* ---------- Theme vars ---------- */
 :root{
     --header-border: rgba(255,255,255,.10);
     --link: #090909;
     --link-hover: #333;
     --menu-chip-bg: rgba(255,255,255,.06);
     --menu-chip-border: rgba(255,255,255,.12);
     --dropdown-bg: rgba(15,15,17,.98);
     --dropdown-border: rgba(255,255,255,.10);
     --shadow-lg: 0 10px 30px rgba(0,0,0,.35);
     --accent: #f59e0b;
}
/* =========================== NAVBAR (uses same bg as hero) =========================== */
 .header-four.header--sticky{
     position: sticky;
     top:0;
     z-index:60;
     background: transparent;
     border-bottom: 1px solid var(--header-border);
    /* Avoid text blur inside header */
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
}
 .header-four.header--sticky::before{
     content:"";
     position:absolute;
     inset:0;
     z-index:0;
    /* If this CSS is in assets/css/, keep the ../ below. If inline, change to assets/images/... */
     background-image:url('../images/banner/bg-4.webp');
     background-size:cover;
     background-position:center top;
     background-repeat:no-repeat;
     opacity:1;
}
 .header-four.header--sticky::after{
     content:"";
     position:absolute;
     inset:0;
     z-index:0;
    /* stronger tint so menu remains readable */
     background:rgba(0,0,0,.28);
}
 .header-four .header-main-wrapper{
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:16px;
     min-height:64px;
     position: relative;
     z-index: 1;
}
 .header-four .logo-area img{
     height:40px;
     width:auto;
     display:block 
}
 .rts-header-mid .main-nav-desk nav > ul{
     display:flex;
     align-items:center;
     gap:26px;
     margin:0;
     padding:0;
     list-style:none;
}
 .rts-header-mid .main-nav-desk nav > ul > li{
     position:relative 
}
 .nav-link{
     display:inline-block;
     padding:.375rem .25rem;
     color:var(--link);
     text-decoration:none;
     transition:color .2s ease;
     font-weight:500;
}
 .nav-link:hover{
     color:var(--link-hover) 
}
 .rts-header-mid .main-nav-desk nav > ul > li > .nav-link{
     position:relative 
}
 .rts-header-mid .main-nav-desk nav > ul > li > .nav-link::after{
     content:"";
     position:absolute;
     inset-inline-end:0;
     bottom:-6px;
     height:2px;
     width:0;
     background: linear-gradient(90deg, var(--accent), #fff);
     transition: width .25s ease;
}
 .rts-header-mid .main-nav-desk nav > ul > li:hover > .nav-link::after{
     width:100% 
}
/* Dropdown (البلدان) */
 .has-droupdown{
     position:relative 
}
 .has-droupdown .submenu{
     position:absolute;
     inset-inline-end:0;
     top:100%;
     min-width:220px;
     margin-top:12px;
     padding:8px;
     background:var(--dropdown-bg);
     border:1px solid var(--dropdown-border);
     border-radius:14px;
     box-shadow: var(--shadow-lg);
     opacity:0;
     visibility:hidden;
     transform:translateY(8px) scale(.98);
     transition: opacity .18s ease, transform .18s ease, visibility .18s step-end;
     z-index:70;
}
 .has-droupdown:hover .submenu{
     opacity:1;
     visibility:visible;
     transform:translateY(0) scale(1);
     transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
 .has-droupdown .submenu li{
     list-style:none 
}
 .has-droupdown .submenu a{
     display:block;
     padding:.55rem .75rem;
     border-radius:10px;
     color:#fff;
     text-decoration:none;
     font-size:.95rem;
     transition: background .15s ease, color .15s ease;
}
 .has-droupdown .submenu a:hover{
     background:rgba(255,255,255,.06) 
}
/* Right cluster (phone + burger) */
 .rts-header-right{
     display:flex;
     align-items:center;
     gap:10px 
}
 .rts-header-right .query-list{
     display:flex;
     align-items:center;
     gap:8px;
     background:var(--menu-chip-bg);
     border:1px solid var(--menu-chip-border);
     padding:.45rem .8rem;
     border-radius:999px;
}
 .rts-header-right .query-list .icon{
     color:var(--link-hover);
     opacity:.9 
}
 .rts-header-right .query-list .text-heading{
     color:#fff;
     font-weight:700;
     letter-spacing:.2px 
}
 .menu-area .nav-menu-link.menu-button{
     display:grid;
     grid-template-columns:repeat(2, 8px);
     grid-auto-rows:8px;
     gap:6px;
     width:40px;
     height:40px;
     place-content:center;
     border-radius:12px;
     background:var(--menu-chip-bg);
     border:1px solid var(--menu-chip-border);
     transition: background .2s ease, border-color .2s ease;
}
 .menu-area .nav-menu-link.menu-button:hover{
     background:rgba(255,255,255,.10);
     border-color:rgba(255,255,255,.20);
}
 .menu-area .menu-button span{
     display:block;
     width:8px;
     height:8px;
     background:#fff;
     border-radius:2px 
}
 .header-four .container{
     padding-top:.15rem;
     padding-bottom:.15rem 
}
 @media (min-width: 992px){
     .menu-area{
         display:none 
    }
}
 @media (min-width: 992px){
     .rts-header-mid{
         flex:1 1 auto;
         display:flex;
         justify-content:center 
    }
}
 .main-nav-desk nav > ul > li.is-active > .nav-link{
     color:#fff 
}
 .main-nav-desk nav > ul > li.is-active > .nav-link::after{
     width:100% 
}
/* =========================== Sidebar / Off-canvas (mobile) =========================== */
 #side-bar.side-bar{
     position:fixed;
     inset-block:0;
     inset-inline-end:0;
     width:min(84vw, 380px);
     background:#0b0b0d;
     color:#fff;
     border-inline-start:1px solid var(--header-border);
     transform:translateX(100%);
     transition: transform .28s ease;
     z-index: 80;
}
 #side-bar.active, #side-bar.open, body.sidebar-open #side-bar{
     transform:translateX(0) 
}
/* Actual overlay element will be injected by JS;
 class below styles it */
 .sidebar-overlay{
     position:fixed;
     inset:0;
     z-index:79;
     background:rgba(0,0,0,.78);
    /* dark, no blur so text stays sharp */
     opacity:0;
     pointer-events:none;
     transition:opacity .2s ease;
}
 .sidebar-overlay.is-open{
     opacity:1;
     pointer-events:auto 
}
/* Drawer inner + close button */
 #side-bar .inner{
     height:100%;
     display:flex;
     flex-direction:column;
     position:relative 
}
 #side-bar .close-icon-menu{
     position:absolute;
     inset-inline-end:12px;
     top:12px;
    /* visible in RTL */
     width:40px;
     height:40px;
     border-radius:10px;
     display:inline-flex;
     align-items:center;
     justify-content:center;
     background:rgba(255,255,255,.10);
     border:1px solid rgba(255,255,255,.18);
     color:#fff;
     cursor:pointer;
     z-index:2;
     transition: background .2s ease, transform .15s ease;
}
 #side-bar .close-icon-menu:hover{
     background:rgba(255,255,255,.18);
     transform:translateY(-1px) 
}
 #side-bar .close-icon-menu i{
     font-size:18px 
}
 #side-bar .inner .thumbnail{
     padding:18px 18px 8px;
}
 #side-bar .inner .thumbnail img{
     height:42px;
     width:auto 
}
 #side-bar .banner-shape-area .shape{
     display:none 
}
 #side-bar .inner .inner-content{
     padding:0 18px 12px 
}
 #side-bar .feature-list{
     margin:0;
     padding:0;
     list-style:none 
}
 #side-bar .feature-list .query-list{
     background:var(--menu-chip-bg);
     border:1px solid var(--menu-chip-border);
     padding:12px 14px;
     border-radius:14px;
     margin-bottom:10px;
}
 #side-bar .feature-list .phone{
     display:inline-block;
     margin-inline-start:8px;
     color:#fff;
     font-weight:700;
     text-decoration:none 
}
 #side-bar .feature-list .email{
     display:block;
     color:#ddd;
     font-size:.95rem;
     margin-top:2px;
     text-decoration:none 
}
 #side-bar .feature-list.two p{
     margin:0;
     color:#bbb 
}
 #side-bar .footer{
     margin-top:auto;
     padding:16px 18px;
     border-top:1px solid var(--header-border) 
}
 #side-bar .social-area{
     display:flex;
     gap:10px;
     padding:0;
     margin:0;
     list-style:none 
}
 #side-bar .social-area a{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     width:38px;
     height:38px;
     border-radius:10px;
     background:var(--menu-chip-bg);
     border:1px solid var(--menu-chip-border);
     color:#fff;
     transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
 #side-bar .social-area a:hover{
     background:rgba(255,255,255,.10);
     border-color:rgba(255,255,255,.20);
     transform:translateY(-1px) 
}
/* Mobile menu inside drawer */
 .mobile-menu{
     padding:14px 16px 
}
 .mobile-menu .nav-main .mainmenu{
     margin:0;
     padding:0;
     list-style:none 
}
 .mobile-menu .mainmenu > li{
     border-bottom:1px dashed rgba(255,255,255,.08) 
}
 .mobile-menu .mainmenu > li:last-child{
     border-bottom:none 
}
 .mobile-menu .nav-link{
     display:block;
     padding:12px 10px;
     border-radius:12px;
     color:#fff;
     text-decoration:none 
}
 .mobile-menu .nav-link:hover{
     background:rgba(255,255,255,.06) 
}
 .mobile-menu .submenu{
     margin:6px 8px 12px;
     padding:6px;
     list-style:none;
     background:rgba(255,255,255,.03);
     border:1px solid var(--menu-chip-border);
     border-radius:12px;
     max-height:280px;
     overflow:auto;
}
 .mobile-menu .submenu a{
     display:block;
     padding:10px 8px;
     border-radius:10px;
     color:#fff;
     text-decoration:none 
}
 .mobile-menu .submenu a:hover{
     background:rgba(255,255,255,.05) 
}
/* Responsive */
 @media (max-width: 991.98px){
     .rts-header-mid .main-nav-desk{
         display:none 
    }
     .header-four .header-main-wrapper{
         min-height:60px 
    }
     .rts-header-right .query-list{
         padding:.35rem .7rem 
    }
}
/* ====== Footer (scoped to .rts-footer-one) ====== */
 .rts-footer-one{
    /* theme tokens */
     --bg: #ffffff;
     --bg-2:#ffffff;
     --card: rgba(255,255,255,.03);
     --stroke: rgba(255,255,255,.10);
     --text: #0d0d10;
     --muted:#333;
     --brand:#E5102B;
    /* Ahmad Al Abdalla red */
     --brand-2:#ffb3bf;
    /* soft red for accents */
     --link:#090909;
     position: relative;
     color: var(--text);
     background: radial-gradient(120% 140% at 0% 100%, rgba(229,16,43,.16) 0%, rgba(229,16,43,0) 45%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
     overflow: hidden;
     padding-top: 3.5rem;
    /* extra air above cards */
}
/* soft top border like the designs */
 .rts-footer-one .rts-section-gap2Top {
     border-top: 2px solid rgba(255,255,255,.08);
}
/* Background shapes (decor) */
 .rts-footer-one .shape-1, .rts-footer-one .shape-2{
     position:absolute;
     z-index:0;
     opacity:.18;
     pointer-events:none;
     filter: drop-shadow(0 18px 45px rgba(0,0,0,.35));
}
 .rts-footer-one .shape-1{
     inset-inline-start:-40px;
     bottom:-40px;
     transform:scale(1.1);
}
 .rts-footer-one .shape-2{
     inset-inline-end:-30px;
     top:-50px;
     transform:rotate(-10deg) scale(1.05);
}
 .rts-footer-one .container{
     position:relative;
     z-index:2;
}
/* Layout: turn the three columns into elegant cards */
 .rts-footer-one .main-footer-wrapper-one{
     display: grid;
     gap: 1.25rem;
     grid-template-columns: 1fr;
}
 @media (min-width: 992px){
     .rts-footer-one .main-footer-wrapper-one{
         grid-template-columns: 1.2fr .9fr .8fr;
         gap: 1.5rem;
    }
}
 .rts-footer-one .single-footer-wized-one{
     background: var(--card);
     border-radius: 20px;
     padding: 22px 22px 20px;
     box-shadow: 0 10px 30px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.03);
     backdrop-filter: blur(2px);
}
/* --- Column: Logo & blurb --- */
 .rts-footer-one .logo-area .logo img{
     height:56px;
     width:auto;
}
 .rts-footer-one .disc-f{
     margin-top: 14px;
     color: var(--muted);
     line-height: 1.9;
     font-size: 15px;
}
/* little “hotline” strip */
 .rts-footer-one .query-list{
     margin-top: 16px;
     display:flex;
     align-items:center;
     gap:.75rem;
     flex-wrap:wrap;
}
 .rts-footer-one .query-list .sub-text{
     color:#333;
     background: rgba(255,255,255,.06);
     border:1px solid var(--stroke);
     padding:.35rem .7rem;
     border-radius: 999px;
     font-size:.85rem;
}
 .rts-footer-one .query-list a{
     text-decoration:none;
}
 .rts-footer-one .query-list .text-heading{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     background: var(--brand);
     color:#fff;
     min-width: 86px;
     padding:.45rem .85rem;
     border-radius:999px;
     font-weight:700;
     letter-spacing:.5px;
     box-shadow: 0 10px 25px rgba(229,16,43,.40);
     transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
 .rts-footer-one .query-list .text-heading:hover{
     transform: translateY(-2px);
     background:#c90e26;
     box-shadow: 0 14px 32px rgba(229,16,43,.55);
}
/* --- Column: Get in touch / hours --- */
 .rts-footer-one .footer-header-two .title{
     color:#333;
     font-weight:800;
     font-size:1.05rem;
     margin-bottom: 12px;
     position:relative;
     padding-bottom:8px;
}
 .rts-footer-one .footer-header-two .title::after{
     content:"";
     position:absolute;
     inset-inline-end:0;
     bottom:0;
     height:4px;
     width:56px;
     background: var(--brand);
     border-radius:999px;
}
 .rts-footer-one .get-touch ul{
     list-style:none;
     margin:0;
     padding:0;
}
 .rts-footer-one .get-touch li{
     display:flex;
     align-items:flex-start;
     gap:.6rem;
     color:var(--muted);
     line-height:1.9;
     font-size:15px;
     padding:.35rem 0;
     border-bottom:1px dashed rgba(255,255,255,.06);
}
 .rts-footer-one .get-touch ul li,
 .rts-footer-one .get-touch ul li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
 .rts-footer-one .get-touch li:last-child{
     border-bottom:none;
}
.rts-footer-one .get-touch i {
  color: #333;
  background: rgba(255, 0, 0, 0.1);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  font-size: .85rem;
  /*margin-right: 1rem;*/
}
/* Socials */
 .rts-footer-one .rts-social-wrapper ul{
     list-style:none;
     padding:0;
     margin:10px 0 0;
     display:flex;
     gap:.55rem;
     flex-wrap:wrap;
}
 .rts-footer-one .rts-social-wrapper a{
     width:36px;
     height:36px;
     border-radius:50%;
     display:inline-grid;
     place-items:center;
     color:#fff;
     border:1px solid var(--stroke);
     background: rgba(255,255,255,.04);
     transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
 .rts-footer-one .rts-social-wrapper a:hover{
     background: var(--brand);
     border-color: transparent;
     transform: translateY(-3px);
     box-shadow: 0 10px 26px rgba(229,16,43,.45);
}
/* --- Column: Links --- */
 .rts-footer-one .pages ul{
     list-style:none;
     margin:0;
     padding:0;
}
 .rts-footer-one .pages li{
     padding:.35rem 0;
}
 .rts-footer-one .pages a{
     color: var(--link);
     text-decoration:none;
     font-weight:600;
     transition: color .2s ease, transform .2s ease;
}
 .rts-footer-one .pages a:hover{
     color: var(--brand-red);
     transform: translateX(-4px);
}
/* Copyright bar */
 .copyright-area{
     background: #ffffff;
     border-top: 1px solid rgba(255,255,255,.08);
     margin-top: 28px;
}
 .copyright-area .disc{
     color:#000;
     text-align:center;
     padding:14px 0;
     margin:0;
     font-size:.95rem;
}
/* Small refinements on mobile */
 @media (max-width: 575.98px){
     .rts-footer-one .single-footer-wized-one{
         padding:18px;
         border-radius:16px;
    }
     .rts-footer-one .logo-area .logo img{
         height:50px;
    }
     .rts-footer-one .query-list{
         gap:.5rem 
    }
     .rts-footer-one .get-touch li{
         font-size:14px;
    }
}