@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;600&display=swap');
.ooo-hero, .ooo-hero *{ font-family:'IBM Plex Sans Arabic',sans-serif !important; }
.ooo-hero .title, .ooo-hero p{ font-weight:300 !important; }
@media (max-width:991px){
  .ooo-hero .floating_text{ align-items:flex-end !important; text-align:right !important; padding-right:0 !important; }
}



@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500&display=swap');

.oooblue .banner{position:relative !important;border-radius:1rem;overflow:hidden}
.oooblue .img{animation:oooblueZoom 24s ease-in-out infinite alternate}
@keyframes oooblueZoom{from{transform:scale(1)}to{transform:scale(1.05)}}

.oooblue .banner::before{content:"";position:absolute;left:62%;top:38%;width:55%;height:70%;
 transform:translate(-50%,-50%);z-index:1;pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(circle,rgba(255,247,235,.5),transparent 65%);filter:blur(10px);
 animation:oooblueBreathe 7s ease-in-out infinite}
@keyframes oooblueBreathe{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.92)}
 50%{opacity:.6;transform:translate(-50%,-50%) scale(1.08)}}

.oooblue .banner::after{content:"";position:absolute;top:-40%;left:-60%;width:45%;height:180%;z-index:1;
 background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);transform:rotate(10deg);
 pointer-events:none;animation:oooblueSheen 9s ease-in-out infinite;animation-delay:2s}
@keyframes oooblueSheen{0%{left:-60%}45%,100%{left:150%}}

.ooo-cap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
 align-items:flex-start;direction:rtl;text-align:right;padding:0 clamp(24px,5vw,72px);
 font-family:'IBM Plex Sans Arabic',sans-serif;pointer-events:none}
.ooo-cap h2{color:#14213d;font-weight:300;font-size:clamp(24px,4.6vw,52px);line-height:1.25;margin:0;
 opacity:0;transform:translateX(-40px);animation:oooblueSlide 1s .3s cubic-bezier(.22,.61,.36,1) forwards}
.ooo-cap span{margin-top:clamp(8px,1.5vw,18px);display:inline-flex;align-items:center;gap:7px;color:#14213d;
 font-weight:400;font-size:clamp(13px,1.5vw,17px);border-bottom:1px solid #14213d;padding-bottom:3px;
 opacity:0;transform:translateX(-40px);animation:oooblueSlide 1s .5s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes oooblueSlide{to{opacity:1;transform:translateX(0)}}

@media (prefers-reduced-motion:reduce){
 .oooblue .img,.oooblue .banner::before,.oooblue .banner::after,.ooo-cap h2,.ooo-cap span{
  animation:none;opacity:1;transform:none}}





.ooosun .banner{position:relative !important;border-radius:1rem;overflow:hidden}
.ooosun .img{animation:ooosunZoom 24s ease-in-out infinite alternate}
@keyframes ooosunZoom{from{transform:scale(1)}to{transform:scale(1.05)}}

.ooosun .banner::before{content:"";position:absolute;left:62%;top:38%;width:55%;height:70%;
 transform:translate(-50%,-50%);z-index:1;pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(circle,rgba(255,247,235,.5),transparent 65%);filter:blur(10px);
 animation:ooosunBreathe 7s ease-in-out infinite}
@keyframes ooosunBreathe{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.92)}
 50%{opacity:.6;transform:translate(-50%,-50%) scale(1.08)}}

.ooosun .banner::after{content:"";position:absolute;top:-40%;left:-60%;width:45%;height:180%;z-index:1;
 background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent);transform:rotate(10deg);
 pointer-events:none;animation:ooosunSheen 9s ease-in-out infinite;animation-delay:2s}
@keyframes ooosunSheen{0%{left:-60%}45%,100%{left:150%}}

.ooosun .ooo-cap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
 align-items:flex-start;direction:rtl;text-align:right;padding:0 clamp(24px,5vw,72px);
 font-family:'IBM Plex Sans Arabic',sans-serif;pointer-events:none}
.ooosun .ooo-cap h2{color:#14213d;font-weight:300;font-size:clamp(24px,4.6vw,52px);line-height:1.25;margin:0;
 opacity:0;transform:translateX(-40px);animation:ooosunSlide 1s .3s cubic-bezier(.22,.61,.36,1) forwards}
.ooosun .ooo-cap span{margin-top:clamp(8px,1.5vw,18px);display:inline-flex;align-items:center;gap:7px;color:#14213d;
 font-weight:400;font-size:clamp(13px,1.5vw,17px);border-bottom:1px solid #14213d;padding-bottom:3px;
 opacity:0;transform:translateX(-40px);animation:ooosunSlide 1s .5s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes ooosunSlide{to{opacity:1;transform:translateX(0)}}

@media (prefers-reduced-motion:reduce){
 .ooosun .img,.ooosun .banner::before,.ooosun .banner::after,.ooosun .ooo-cap h2,.ooosun .ooo-cap span{
  animation:none;opacity:1;transform:none}}



.oooblue .banner, .ooosun .banner{
  border: 1px solid #000 !important;
  border-radius: 1rem !important;
  overflow: hidden !important;



}
.oooblue .img, .ooosun .img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;   /* الانحناء صار على الحاوية، نشيله من الصورة */
}