section {
    background-color: var(--color-snow);
}
/* 1.0  - SLIDER HERO */
.slider-container-hero{position:relative;width:100%;max-width:100%;margin:auto;text-align:center;min-height:500px;padding-top:55px}
.slider-wrapper-hero{position:relative;width:100%;height:500px;overflow:hidden}
.slider-image-hero{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;transition:opacity 1s ease-in-out;object-fit:cover}
.slider-image-hero.active{opacity:1}
.slider-content-hero h1,.slider-content-hero p{color:var(--color-white)}
.overlay-hero{position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(7 0 28 / 32%);z-index:1}
.slider-content-hero{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:800px;background:rgb(56 102 65 / 62%);text-align:center;padding:20px 20px 50px;border-top-left-radius:100px;border-top-right-radius:100px;z-index:2}
.slider-content-hero h1{margin:0;font-size:25px}p{font-size:16px;margin-top:10px}
.autoplay-progress{position:absolute;bottom:25px;right:15px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;z-index:2;opacity:.2}
.autoplay-progress svg{position:absolute;width:48px;height:48px;transform:rotate(-90deg)}
.autoplay-progress circle{fill:none;stroke:#fff;stroke-width:4;opacity:.6;stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset .1s linear}
/* 2.0  - SLIDER NEWS */
.padding-container-post{background:var(--color-white);padding-bottom:30px}
.heading-post{display:flex;background:var(--color-secondary);align-items:center;justify-content:space-between;margin-top:-50px;z-index:999;position:relative;padding:10px 20px;border-radius:30px}
.post-size{max-width:1250px;margin:auto;border:solid 1px var(--color-secondary);border-radius:20px;padding:20px 20px 5px;box-shadow:var(--shadow)}#container{max-width:100%;margin:0 auto;border:none;border-radius:0;padding:0}
.heading-news{color:var(--color-white);margin:0;font-size:1.2rem}
.heading-post svg:hover,.text-section a:hover,.accordion button .icon:hover,.ic-reset:hover{transform:scale(1.1)}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.ic-plus{max-width:28px;height:28px;background:var(--RGB-W70);padding:5px;border-radius:50%;fill:var(--color-primary);transition: transform 0.2s 
ease;}
.heading-post h3{margin:0;font-size:1rem}
.wp-block-image img,.wp-post-image{border-radius:0}
.swiper-dots{position:relative;margin-top:25px}
.swpr-btn{margin-top:50px;position: relative;}
.swiper-pagination-bullet{
  /* ✅ كان 16×16 (أصغر من الحد الموصى به 44×44 للّمس) */
  width: 24px;
  height: 24px;
	transition:.25s
}
.swiper-pagination-bullet-active{width:1.5rem;border-radius:100px}
.swiper-container-post{width:100%;max-width:1200px;margin:auto;overflow:hidden;position:relative}
/* ✅ كان 25×46 — نرفع العرض للحد الأدنى للمس */
.swiper-button-next,.swiper-button-prev{position:absolute;left:auto;z-index:2;width:44px;height:46px;margin-top:-10%!important;line-height:46px;background:var(--color-white);text-align:center;font-size:20px;color:var(--color-text);border-radius:2px;transition:.3s}
#logo-slider .swiper-button-next,#logo-slider .swiper-button-prev{margin-top:-20px!important}
.info-back,.swiper-slide h2{margin-bottom:0;left:50%;transform:translateX(-50%);font-size:18px;z-index:2}
.swiper-button-next:hover,.swiper-button-prev:hover{background:var(--color-primary);color:var(--color-white);opacity:.9}
.swiper-button-prev{border-top-left-radius:0;border-bottom-left-radius:0}
.swiper-button-next{right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.swiper-button-next:after,.swiper-button-prev:after{font-size:12px!important;font-weight:700}
.swiper-slide{position:relative;text-align:center;overflow:hidden;border-radius:15px}
#content .slide-content img{margin:0;width:100%;display:block;height:250px;object-fit:cover;transition:transform .3s ease-in-out}
.info-back,.slide-info,.swiper-slide h2{position:absolute;bottom:0;width:100%;text-align:left;transition:.9s cubic-bezier(.32, .32, .15, 1.17);color:#fff}
html[dir=rtl] .slide-info,html[dir=rtl] .swiper-slide h2{text-align:right}
.swiper-slide a img:hover{opacity:1}
.info-back{padding:50px;background:linear-gradient(to bottom,rgb(0 0 0 / 0%),rgb(0 0 0 / 100%))}
.info-back:hover{padding:100px;background:linear-gradient(to bottom,rgb(0 0 0 / 0%),rgb(0 0 0 / 90%))}
.swiper-slide h2{padding:15px;text-shadow: -2px 1px 5px #000000}
.slide-info{left:0;padding:1px 15px 15px;transform:translateY(100%)}
.swiper-slide p{font-size:14px;margin:0;color:#fff}
.swiper-slide:hover .slide-info{transform:translateY(0)}
.swiper-slide:hover h2{transform:translate(-50%,-74px);padding:15px 15px 0}
/* 3.0  - ABOUT CENTRE */
.blob-image,.blob-shape{width:100%;aspect-ratio:1/1}
.badge,.button{color:var(--color-white);font-weight:700}
.badge-icon svg,.blob-shape path,.decorative-arrow{fill:var(--color-primary)}
.container-about{display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;padding:50px 20px;gap:30px;max-width:1250px;margin:0 auto;position:relative}
.text-section{flex:1 1}
.text-section h2{color:var(--color-primary)}
.text-section h2 span{color:var(--color-black)}
.button{margin-top:20px;display:inline-block;background:var(--color-primary);padding:10px 20px;border-radius:30px;text-decoration:none;transition:.3s ease-out}
.image-section{position:relative;flex:1 1 330px;max-width:500px;margin:0 auto}
.blob-image{height:auto;object-fit:cover;clip-path:url(#blobClip);-webkit-clip-path:url(#blobClip);position:relative;z-index:2}
.badge,.badge-icon,.blob-shape,.decorative-arrow{position:absolute}
.blob-shape{top:20px;left:0;z-index:1;animation:2s ease-in-out infinite waveMotion}
.badge{bottom:30px;right:25px;font-size:25px;line-height:1.8;z-index:4;text-align:center}
.badge span{display:block;font-size:20px}
.badge-icon{bottom:0;right:0;width:150px;height:150px;display:flex;align-items:center;justify-content:center;animation:10s linear infinite rotateCenter;transform-origin:center center;z-index:3}@keyframes rotateCenter{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.decorative-arrow{left:20%;bottom:-90px;width:120px;height:120px;animation:2s ease-in-out infinite waveMotion}@keyframes waveMotion{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* 4.0  - SERVICE CENTRE */
.round{color:#6a994e}
.services-container{padding: 60px 0 40px}
#services{padding:60px 0 40px}
#services .feature-box{cursor:auto}
.icon-wrapper{border-radius:50%;width:120px;height:120px;padding:10px;display:flex;align-items:center;justify-content:center}
.icon-services{max-width:100%;max-height:100%;object-fit:contain}
.h-services{display:flex;justify-content:center}
.services-container .feature-box{cursor:auto}
.features-container{display:grid;grid-gap:20px;grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr;justify-items:center;max-width:1250px;margin:0 auto;padding:40px 20px}
.feature-number .feature-box{min-width:100px;background:0 0;border:none;text-align:center}
.feature-box i{font-size:40px;color:var(--color-primary);margin-bottom:10px}
.feature-box h3{font-size:20px;margin:10px 0}
.feature-box p{color:#979797}
.feature-box:hover{transform:translateY(-5px)!important}
.swiper-slide .mrafq-potos{display:block;max-width:100%;height:100%;object-fit:cover;image-rendering:-webkit-optimize-contrast;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges;border-radius: 15px;}
/**
 * ✅ إصلاح خروج قسم المرافق عن الشاشة.
 *
 * ⚠️ العلّة: كانت هذه الحاويات بـ`max-width` **بلا `width:100%`**:
 *      .section-photos-mrafq   { max-width:670px }
 *      .container-photos-mrafq { max-width:75rem }
 *      .mrafeq-container       { width:600px }   ← عرض ثابت!
 *
 *    و`max-width` وحدها **لا تُصغِّر** عنصرًا أبوه flex بحجم محتواه.
 *    والنتيجة المقيسة في متصفح حقيقي:
 *      • عرض 360px ⇒ .mrafq-slider بعرض 670px ⇒ **فائض 155px**
 *      • عرض 390px ⇒ فائض 140px
 *      • عرض 480px ⇒ فائض 95px
 *    والفائض كان مخفيًا بضمادة `body,html{overflow-x:hidden}` ⇒ يُقتطع
 *    المحتوى بدل أن يُظهر شريط تمرير. هذا أسوأ: الزائر لا يرى أن هناك
 *    محتوى مقطوعًا.
 *
 *    الآن: width:100% + max-width + box-sizing، فتتقلّص الحاويات مع
 *    الشاشة بلا اقتطاع.
 */
.section-photos-mrafq{
    background-color:transparent;
    margin-bottom:20px;
    width:100%;
    max-width:670px;
    min-width:0;
    padding:40px 0 10px;
    box-sizing:border-box;
}
.container-photos-mrafq{
    background-color:transparent;
    width:100%;
    max-width:75rem;
    min-width:0;
    height:auto;
    margin-inline:auto;
    padding-inline:1.25rem;
    box-sizing:border-box;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{background:var(--color-primary);color:var(--color-white);width:20px;height:20px;font-size:14px;margin-left:5px}
/* 5.0  - IMAGES MRAFEQ ALMARKAZ */
.back-mrafeq{background-color:var(--color-surface);padding-top:25px}

.mrafq-slider figcaption {
	/* ✅ كان display:none !important ⇒ تسميات الصور مفقودة عن **الجميع**
	   بما فيهم قارئ الشاشة. الآن مرئية بأناقة. */
	display: block;
	text-align: center;
	font-size: 14px;
	padding: 6px 10px;
	color: var(--color-text);
	/*
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    color: var(--color-black);
    background: var(--RGB-W70);
    width: 150px;
	border-radius:var(--radius);
    margin: auto;
	*/
}

.mrafeq-photos{display:flex;max-width:1250px;margin:auto;align-items:center;justify-content:center;padding-bottom:20px}
.Layer_60 svg{width:60px;height:auto}
.Layer_70 svg{width:70px;height:70px}
.Layer_55 svg{width:55px;height:55px}
@property --my-border{syntax:"<percentage>";inherits:false;initial-value:100%}
.round{display:flex;align-items:center;justify-content:center;position:relative;width:90px;aspect-ratio:1/1;border-radius:50%;margin:20px;background:#fbfbfb;}
.round:after{content:"";position:absolute;inset:-4px;z-index:-1;pointer-events:none;border-radius:50%;background:repeating-conic-gradient(#96c778 0,var(--color-primary) var(--my-border),transparent var(--my-border),transparent 100%);transform:rotate(143deg) scale(-1,1);transition:--my-border .8s ease,transform .5s ease}
.mrafq-cont .feature-box{background-color:transparent;min-width:auto;color:var(--color-text);border-radius:20px;transition:transform .3s ease-in-out}
.mrafq-cont .feature-box:hover{border:none}
.mrafq-cont .feature-box:hover .round:after{--my-border:80%}
/* ✅ width:100% قبل max-width — وإلا بقي العرض ثابتًا 600px وفاض على الجوال */
.mrafeq-container{padding:30px 0 10px;width:100%;max-width:600px;min-width:0;background-color:transparent;box-sizing:border-box}
.mrafq-cont{font-size:14px;width:100%;max-width:100%;min-width:0;color:var(--color-text);margin:0 auto}
.mrafq-swiper{width:100%;max-width:100%;min-width:0;height:auto;margin-left:auto;margin-right:auto;overflow:hidden}
/* ✅ الصور لا تتجاوز حاويتها مهما كان المقاس */
.mrafq-slider,
.mrafq-slider .swiper-wrapper,
.mrafq-slider .swiper-slide{max-width:100%;box-sizing:border-box}
.mrafq-slider img,
.mrafq-slider .mrafq-potos{max-width:100%;height:auto}
.mrafq-swiper .swiper-slide{text-align:center;margin-bottom:10px;height:200px;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}

@media (max-width:768px){
  .section-photos-mrafq{border-bottom:dashed 1px var(--color-primary);border-top:dashed 1px var(--color-primary);border-radius:10px}
}

/* 6.0  - BOX SHOW IMAGE */
.feature-box{background-color:var(--color-white);cursor:pointer;display:inline-block;border:dashed 1px var(--color-primary);border-radius:15px;padding:20px;transform:translateY(0);transition:.2s ease-out .1s}
/* 7.0  - VIDEO BLOCK */
  .yt-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .yt-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yt-placeholder::after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--color-secondary);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  }
@media (hover:hover) and (min-width:993px){
  .video-youtube{background-attachment:fixed}
}
.video-youtube{background-image:url(../images/BV.webp);background-size:cover;background-repeat:no-repeat;background-attachment:scroll;background-position:center center;position:relative;min-height:400px;padding:60px 0 20px}
.video-youtube::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / 70%);z-index:1}
.video-youtube>*{position:relative;z-index:2}
.video-block{max-width:1250px;margin:0 auto;padding:50px 0}
.video-container{display:flex;gap:15px;overflow:hidden;background:#000;align-items:center;justify-content:center;border-radius:10px}
.main-video{flex:none;width:100%;max-width:820px;aspect-ratio:16/9;position:sticky;top:20px;align-self:flex-start;display:flex}
.main-video iframe{width:100%;height:100%;border:none;border-radius:10px}
.video-scroll{width:100%;max-height:460px;padding:5px;overflow-x:auto}
.video-scroll::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#5b5858}
.video-scroll::-webkit-scrollbar{width:10px;background-color:#5b5858}
.video-scroll::-webkit-scrollbar-thumb{background-color:var(--color-primary)}
.video-list{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;min-width:250px;/*max-height:calc(100vh - 40px);*/padding-right:10px}
.video-item{cursor:pointer;background:#111;border-radius:8px;overflow:hidden;transition:background .3s;display:flex;align-items:center}
.video-item:hover{background:#222}
.video-item img{width:140.44px;height:79px;flex-shrink:0;object-fit:cover;border-radius:0 10px 10px 0}
.video-title{font-family:Arial,sans-serif;padding:10px;font-size:14px;color:#fff}
/* 8.0  - AHDAF & AFAQ */
:root{
  --progress-time: 400ms;
}

/* الرؤية */
.vision-section{
  background-color: var(--color-surface);
  padding: 60px 0;
  background-image: url("../images/wave.png");
  background-repeat: no-repeat;
  background-position: center top;
  position: relative;
}
.container-ahdaf{ max-width:1200px; margin:0 auto; padding:0 16px; }
.vision-intro{text-align:center;margin-bottom:40px;}
#videos-heading.text-white {
    color: #ffffff;
}
.heading{ font-size:2.2rem; color:var(--color-primary); margin-bottom:15px; font-weight:700; }
.section-intro{ font-size:1.1rem;color:#979797;line-height:1.7;max-width:720px;margin:50px auto 0 auto}
.double-column{ display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
.column{ flex:1 1 45%; max-width:48%; }
.article-title{
  font-size:1.5rem;
  margin-bottom:20px;
  background: var(--RGB-B5);
  padding:8px 10px;
  border-bottom:2px solid rgba(106,153,78,.15);
  font-weight:600;
  color:var(--color-primary);
}

/* القائمة */
.feature-item.visible p { display:none; }
.feature-item.visible.active p { display:block; }
.feature-list{ list-style:none; padding:0; margin:0; }
.feature-item{
  position:relative;
  cursor:pointer;
  padding:15px;
  margin-bottom:10px;
  background-color: var(--color-white);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, padding-left .25s ease;
  border-radius:6px;
  box-shadow: none;
}
.feature-item::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 4px;
  background-color: var(--color-primary);
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  transition: transform var(--progress-time) ease, opacity var(--progress-time) ease;
}

/* العناوين داخل العنصر — نتعامل مع h3 أو h4 */
.feature-item h3,
.feature-item h4 {
  display:flex;
  align-items:center;
  font-size:1.1rem;
  margin:0;
  font-weight:600;
  color:var(--color-text);
  z-index:2;
  gap:10px;
}
.feature-item h3::before,
.feature-item h4::before {
  content: "";
  display:inline-block;
  width:10px;
  height:2px;
  margin-right:10px;
  background-color: rgba(0,0,0,0.12);
  transition: width .25s ease, background-color .25s ease;
}

/* المحتوى القابل للطي */
.feature-content{
  max-height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height .38s ease, opacity .38s ease, transform .38s ease, padding .25s ease;
  color: var(--color-text);
  font-size: .95rem;
  line-height: 1.6;
}

/* الحالة النشطة */
.feature-item.active{
  box-shadow: var(--shadow);
  padding-left: 20px;
}
.feature-item.active::after{
  transform: scaleY(1);
  opacity: 1;
}
.feature-item.active h3::before,
.feature-item.active h4::before{
  width:16px;
  background-color: var(--color-primary);
}
.feature-item.active .feature-content{
  padding:10px 0 5px 10px;
  opacity: 1;
  transform: translateY(0);
  max-height: 520px;
}
.feature-item:hover{ transform: translateX(-3px); }

@media (max-width:992px){
  .double-column{ flex-direction:column; }
  .column{ max-width:100%; flex:1 1 100%; }
  .heading{ font-size:1.8rem; }
}
@media (max-width:576px){
  .double-column{ padding:15px; gap:12px; }
  .feature-item{ padding:12px; }
  .feature-item.active{ padding-left:16px; }
  .heading{ font-size:1.6rem; }
  .section-title{ font-size:1.3rem; }
}

/* إخفاء مرئي (لـ figcaption أو نصوص أخرى إن أردت) */
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* 9.0  - PARTENER CENTRE */
.padding-marq{margin:0 auto;max-width:1200px;padding:40px 0 50px}
.padding-marq h2{padding:30px 0;color:#d31b1b}
#logo-slider{cursor:pointer;background:rgb(255 255 255 / 50%);margin:20px 0}
#logo-slider .swiper-slide{display:flex;justify-content:center;align-items:center;border-radius:0}
#logo-slider .swiper-wrapper{align-items:center}
#logo-slider img{width:200px;height:auto}
/* 10.0  - FAQS */
.accordion button .icon::after,.accordion button .icon::before{display:block;position:absolute;content:"";background:currentColor}
.back-faq{background:var(--color-surface);padding:75px 0}
.faq-wat{background:var(--color-white);display:flex;gap:10px;max-width:1200px;margin:0 auto;border-radius:20px var(--radius)}
.container-faq{margin:0 auto;max-width:650px;padding:20px}
.container-faq h2{margin-top:15px}
.accordion .accordion-item{border-bottom:1px solid #e5e5e5}
.accordion .accordion-item button[aria-expanded=true]{border-bottom:1px solid var(--color-primary)}
.accordion button{position:relative;display:block;text-align:left;padding:1em 1em 1em 0;width:100%;color:var(--color-gray-dark);font-size:1.15rem;font-weight:400;border:none;background:0 0;outline:0}
html[dir=rtl] .accordion button{text-align:right;padding:1em 0 1em 1em}
.accordion button:focus,.accordion button:hover{cursor:pointer;color:var(--color-secondary)}
.accordion button:focus::after,.accordion button:hover::after{cursor:pointer;color:var(--color-secondary);border:1px solid var(--color-secondary)}
.accordion button .accordion-title{padding:1em 0 1em 1em;font-size:.9rem;font-weight:bold}
.accordion button .icon{display:inline-block;position:absolute;top:18px;right:0;width:22px;height:22px;border:1px solid;border-radius:22px}
html[dir=rtl] .accordion button .icon{left:0;right:auto}
.accordion button .icon::before{top:9px;right:5px;width:10px;height:2px}
.accordion button .icon::after{top:5px;right:9px;width:2px;height:10px}
.accordion-content ul{list-style:circle;margin-right:30px}
.accordion button[aria-expanded=true]{color:var(--color-secondary)}
.accordion button[aria-expanded=true] .icon::after{width:0}
.accordion button[aria-expanded=true]+.accordion-content{opacity:1;max-height:15em;transition:.2s linear;will-change:opacity,max-height}
.accordion .accordion-content{opacity:0;max-height:0;overflow:hidden;/*visibility:hidden;*/transition:opacity .2s linear,max-height .2s linear;will-change:opacity,max-height}
.accordion .accordion-content p{font-size:.9rem;font-weight:300;margin:2em 0}
/* 11.0  - WEATHER */
#weather-widget h3,.forecast-item p{margin:0;color:#fff}
#weather-widget{background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) center/cover no-repeat,url("../images/BW.webp") center/cover no-repeat;position:relative;font-size:14px;color:var(--color-white);width:100%;clear:both;overflow:hidden;text-align:center;padding:30px 0 40px}
.weather-update{display:flex;justify-content:space-between}
#weather-widget h3{text-align:right;padding:0 20px}
#reset{background:rgba(0,0,0,.5);border-radius:50%;width:40px;padding:0;height:40px;margin-right:20px;border:none;cursor:pointer}
html[dir=rtl] #reset{margin-right:0;margin-left:20px}
.ic-reset{height:25px;fill:#fff}
.weather-cont{display:flex;justify-content:space-around}
.weather-main{display:inline-block;line-height:1.5;margin-top:15px}
.weather-todays-stats{display:inline-block;padding:0 10px;vertical-align:top;text-align:right}
.weather-icon img{width:50px}
.weather-info{font-size:70px;font-weight:700;direction:ltr}
.weather-info sup{font-size:17px;vertical-align:super;font-weight:400}
.forecast{display:flex;justify-content:space-around;margin-top:10px}
.forecast-item{text-align:center;line-height:1.5;margin-top:30px}
.forecast-item svg{width:40px;height:40px}
#city-name{font-size:32px;font-weight:700;white-space:nowrap}
.forecast-icon,.icon-sun{fill:transparent;stroke:#ff7300;stroke-linecap:round;animation:10s linear infinite rotateCenter;align-items:center;justify-content:center;transform-origin:center center}
.weather-day-abbr{font-size:14px}
#weather-icon .icon-cloud,#weather-icon .icon-cloud-moon,#weather-icon .icon-mist,#weather-icon .icon-rain,#weather-icon .icon-snow,#weather-icon .icon-sun,#weather-icon .icon-thunder{width:100px}
.icon-cloud{color:#90a4ae}
.icon-rain{color:#2196f3}
.icon-snow{color:#00bcd4}
.icon-thunder{color:#ff9800}
.icon-mist{color:#9e9e9e}
.icon-cloud-moon{fill:#90a4ae}
/* 12.0  - CONTACT US */
.info-home{margin:0;padding:50px 30px;text-align:center}
.info-home .h-services{color:var(--color-black);font-size:24px;margin-bottom:20px;padding-top:10px}
.info-home .features-container{display:grid;max-width:1250px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));grid-template-rows:1fr;gap:15px;justify-content:center;align-items:center;padding:20px;margin:50px auto 0}
.info-home .features-container a{display:flex;flex-direction:column;align-items:center}
.info-home .feature-box{display:flex;justify-content:center;flex-direction:column;align-items:center;width:100%;height:200px;min-width:auto;border:none;text-align:center;background:var(--color-white);border-radius:10px;padding:10px;box-shadow:0px 22px 20px 0px rgba(0, 0, 0, 0.08);transition:transform .3s ease-in-out}
.info-home .feature-box:hover{transform:translateY(-5px)!important;box-shadow:0 8px 15px rgba(0,0,0,.15)}
.info-home .feature-box .icon{fill:var(--color-secondary);width:40px;height:auto}
.info-home .feature-box h3{font-size:14px;margin:10px 0;font-weight:700}
/* 13.0  - CONTACT US AND MAPS */
.back-contact-map{background-color:var(--color-surface)}
.contact-map-container{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;flex-direction:row-reverse;flex-wrap:nowrap;margin:0 auto}
.contact-form input,.contact-form textarea{width:100%;font-size:13px;padding:8px;margin-bottom:10px;border:none}
html[dir=rtl] .contact-form input{text-align:right}
.map-container{width:60%;box-shadow: 0px 4px 10px 0px rgb(0 0 0 / 25%)}
.contact-form{line-height:2;padding:20px;width:40%}
.contact-info{display:flex;gap:10px}
.contact-info div{width:50%}
.contact-form #message{height:150px;font-size:16px}
.btn-msg{background:var(--color-primary);color:var(--color-white);padding:10px 30px;font-weight:700;border-radius:5px;cursor:pointer;border:none;transition:.3s ease-out}
.btn-msg:hover{transform: scale(1.05);}
/* 14.0  - RESPONSIVE */
@media (max-width: 1400px) {
/* SERVICE CENTRE */
.features-container{grid-template-columns:1fr 1fr 1fr}
.services-container .feature-box{width:100%;height:auto;max-width:350px}
.contact-title{display:none}
}
@media (min-width: 1400px) {
.contact-form{padding-left:10%}
html[dir=rtl] .contact-form{padding-left:0;padding-right:10%}
.contact-title{display:block;position:relative;font-size:48px;font-weight:700;color:var(--color-secondary);transform:rotateZ(90deg);left:-55%;top:300px;height:0}
html[dir=rtl] .contact-title{left:0;right:-75%;top:130px}
}
@media (max-width: 1300px) {
/* MRAFEQ ALMARQAZ */
.container-faq,.mrafeq-photos{max-width:550px}
/* VIDEO BLOCK */
.main-video{width:800px}
}
@media (max-width: 1200px) {
/* FAQ */
.faq-wat{display:grid}
}
@media (min-width: 1200px) {
/* SLIDER NEWS */
.swiper-button-next{right:calc(50% - 600px)}
.swiper-button-prev{left:calc(50% - 600px)}
#weather-widget{border-radius:var(--radius)}
}
@media (max-width: 1024px) {
/* SERVICE CENTRE */
.features-container{grid-template-columns:1fr 1fr}
}
@media (max-width: 1000px) {
/* MRAFEQ ALMARQAZ */
.mrafeq-photos{flex-wrap:wrap;padding-bottom:30px}
.container-photos-mrafq{padding-inline:inherit}
/* VIDEO BLOCK */
.video-container{flex-direction:column;padding:0;border-radius:0}
.main-video iframe{border-radius:0}
.main-video{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;top:0}
.video-list{flex-direction:row;flex-wrap:nowrap;width:calc(100% + 50%);left:-20px;right:-20px;padding:0 12.5px;margin-bottom:10px;overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.video-item{flex-direction:column;width:120px;min-width:120px;flex-shrink:0}
.video-item img{width:100%;height:auto}
.video-title{padding:5px}
}
@media (max-width: 992px) {
.navbar ul{top:73px}
}
@media (min-width: 992px) {
/* SLIDER NEWS */
.post-size .swiper-container-post .swiper-button-next,.post-size .swiper-button-prev{opacity:0}
.swiper-container-post:hover .swiper-button-next,.swiper-container-post:hover .swiper-button-prev{opacity:1}
/*.post-size .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{background:var(--color-primary);color:var(--color-white);width:20px;height:20px;font-size:14px;margin-left:5px;}*/
}
@media (max-width: 900px) {
/* FIRST SLIDER HERO */
.slider-content-hero{width:97%;padding-bottom:35px;border-top-left-radius:50px;border-top-right-radius:50px}
}
@media (max-width: 768px) {
#services{position:relative}
#services{min-height:100vh}
@supports (min-height:100svh){#services{min-height:100svh}}
.n-services .feature-box{cursor:text}
.n-services{position:sticky;top:0;min-height:40vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--color-white);padding:20px;transition:.8s;opacity:0;transform:translateY(50px);animation:.8s forwards fadeInUp}
.n-services.active{opacity:1;transform:translateY(0)}
.n-services:first-child{z-index:1}
.n-services:nth-child(2){z-index:2}
.n-services:nth-child(3){z-index:3}
.n-services:nth-child(4){z-index:4}
.n-services:nth-child(5){z-index:5}
.n-services:nth-child(6){z-index:6}
.icon-wrapper{margin-bottom:20px;text-align:center}
.icon-services{max-width:100%;height:auto;object-fit:contain}
@keyframes fadeInUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
/* SLIDER NEWS */
.swiper-container-post .post-btn{display:none}
/* ABOUT CENTRE */
.container-about{flex-direction:column;padding:30px 10px;}
.text-section h2{font-size:26px}
.badge,.text-section p{font-size:16px}
.badge{padding:8px 12px;bottom:90px;right:10px}
.badge span{font-size:14px}
.badge-icon{width:100px;height:100px;bottom:70px}
.decorative-arrow{width:100px;height:100px;left:10%}
/* SERVICE CENTRE */
.features-container{grid-template-columns:1fr}
/* AHDAF AND AFAQ + CONTACT US AND MAPS */
.double-column,.contact-map-container{flex-direction:column}
.column{max-width:100%}
/* CONTACT US */
.info-home .features-container{grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))}
/* CONTACT US AND MAPS */
.map-container{order:-1;width:100%}
.contact-form{width:100%;padding:10px 10px 70px}
.contact-info{flex-direction:row}
.contact-info div{width:100%}
}
@media (max-width: 600px) {
/* MRAFEQ ALMARQAZ */
.mrafeq-photos{width:auto}
.mrafeq-photos .swiper-photos{width:100%!important;max-width:100%!important}
.swiper-slide.swiper-photos{border-radius:0}
}
@media (max-width: 530px) {
/* FIRST SLIDER HERO */
.slider-content-hero h1{max-width: 320px;margin:0 auto}
/* ABOUT CENTRE */
.image-section{max-width:90%}
.blob-image{clip-path:none;-webkit-clip-path:none;border-radius:30px}
.blob-shape{display:none}
.badge-icon{bottom:-25px}
.badge{bottom:-12px}
}
@media (max-width: 480px) {
/* IMAGES MRAFEQ ALMARKAZ */
.mrafeq-container{max-width:400px}
.mrafq-cont .swiper-button-next,.swiper-button-prev{display:block}
.mrafq-cont .feature-box{border-radius:15px}
.mrafq-slider .swiper-slide{border-radius:0}
.news .swiper-button-next,.news .swiper-button-prev{display:none!important}
}