/* 1:1 aus vassops.com/collections/professional-vasso (ar_001) */
:where(.vasso-mirror) .ai-custom-html-aovlru0fytmpxculdvaigenblock28efa70jqkemk{
    display: block;
    width: 100%;
    max-width: 100%;
    direction: ltr;
  }
:where(.vasso-mirror) .ai-custom-html-container-aovlru0fytmpxculdvaigenblock28efa70jqkemk{
    width: 100%;
    padding: 0px 0 0px;
  }
:where(.vasso-mirror) .ai-custom-html-content-aovlru0fytmpxculdvaigenblock28efa70jqkemk{
    width: 100%;
  }
:where(.vasso-mirror) .ai-custom-html-empty-aovlru0fytmpxculdvaigenblock28efa70jqkemk{
    padding: 60px 20px;
    text-align: center;
    background-color: #f4f4f4;
    color: #666;
    font-size: 14px;
    border: 2px dashed #ddd;
    border-radius: 8px;
  }
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap");

    .vasso-custom-html{
      --vasso-obsidian:#08090b;
      --vasso-obsidian-2:#101215;
      --vasso-ivory:#f7f8f9;
      --vasso-ivory-dim:#b7bdc5;
      --vasso-silver:#c9d0d8;
      --vasso-platinum:#f3f5f7;
      --vasso-line:rgba(247,248,249,0.14);
      --vasso-display:"Noto Kufi Arabic", sans-serif;
      --vasso-body:"IBM Plex Sans Arabic", sans-serif;
      --vasso-ease:cubic-bezier(.22,1,.36,1);
      position:relative;
      display:block;
      width:100%;
      overflow:hidden;
      background:var(--vasso-obsidian);
      color:var(--vasso-ivory);
      font-family:var(--vasso-body);
      font-weight:300;
      -webkit-font-smoothing:antialiased;
      isolation:isolate;
      direction:rtl;
      text-align:right;
    }
:where(.vasso-mirror) .vasso-custom-html,:where(.vasso-mirror) .vasso-custom-html *{
      box-sizing:border-box;
      text-transform:none !important;
    }
:where(.vasso-mirror) .vasso-custom-html::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:
        radial-gradient(circle at 18% 8%, rgba(201,208,216,.11), transparent 34%),
        radial-gradient(circle at 82% 0%, rgba(127,135,146,.12), transparent 30%),
        linear-gradient(180deg, #08090b 0%, #111419 48%, #08090b 100%);
    }
:where(.vasso-mirror) .vasso-custom-html img{
      display:block;
      max-width:100%;
    }
:where(.vasso-mirror) .vasso-custom-html a{
      color:inherit;
      text-decoration:none;
    }
:where(.vasso-mirror) .vasso-custom-html button{
      font-family:inherit;
      cursor:pointer;
      background:none;
      border:none;
      color:inherit;
    }
:where(.vasso-mirror) .vasso-eyebrow{
      display:block;
      margin-bottom:16px;
      font-family:var(--vasso-body);
      letter-spacing:0;
      font-size:.82rem;
      line-height:1.55;
      color:var(--vasso-platinum);
      font-weight:600;
    }
:where(.vasso-mirror) .vasso-container{
      max-width:1320px;
      margin:0 auto;
      padding:0 clamp(20px,5vw,64px);
    }
:where(.vasso-mirror) .vasso-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:16px 34px;
      border:1px solid var(--vasso-silver);
      color:var(--vasso-ivory);
      font-family:var(--vasso-body);
      font-size:.9rem;
      line-height:1.5;
      letter-spacing:0;
      font-weight:600;
      position:relative;
      overflow:hidden;
      transition:
        color .5s var(--vasso-ease),
        border-color .5s var(--vasso-ease),
        box-shadow .5s var(--vasso-ease);
    }
:where(.vasso-mirror) .vasso-btn::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(135deg, var(--vasso-platinum), var(--vasso-silver));
      transform:scaleX(0);
      transform-origin:right;
      transition:transform .5s var(--vasso-ease);
      z-index:-1;
    }
:where(.vasso-mirror) .vasso-btn:hover::before{
      transform:scaleX(1);
    }
:where(.vasso-mirror) .vasso-btn:hover{
      color:var(--vasso-obsidian);
      box-shadow:0 18px 50px rgba(201,208,216,.14);
    }
:where(.vasso-mirror) .vasso-btn-ghost{
      border-color:var(--vasso-line);
    }
:where(.vasso-mirror) .vasso-btn-ghost:hover{
      border-color:var(--vasso-silver);
    }
:where(.vasso-mirror) .vasso-hero{
      position:relative;
      height:100svh;
      min-height:640px;
      display:flex;
      align-items:flex-end;
      overflow:hidden;
    }
:where(.vasso-mirror) .vasso-hero-slides{
      position:absolute;
      inset:0;
    }
:where(.vasso-mirror) .vasso-hero-slide{
      position:absolute;
      inset:0;
      background-size:cover;
      background-position:var(--vasso-hero-position, center);
      opacity:0;
      transition:opacity 1.6s ease;
    }
:where(.vasso-mirror) .vasso-hero-slide.is-active{
      opacity:1;
    }
:where(.vasso-mirror) .vasso-hero-slides::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(8,9,11,.32) 0%, rgba(8,9,11,.46) 45%, rgba(8,9,11,.96) 100%);
      z-index:1;
    }
:where(.vasso-mirror) .vasso-hero-content{
      position:relative;
      z-index:2;
      padding:0 clamp(20px,5vw,64px) clamp(60px,9vw,110px);
      max-width:820px;
      text-align:right;
    }
:where(.vasso-mirror) .vasso-hero-content h1{
      margin:0 0 24px;
      font-family:var(--vasso-display);
      font-weight:600;
      font-size:clamp(3rem, 6.6vw, 5.8rem);
      line-height:1.28;
      letter-spacing:0;
      text-wrap:balance;
      color:var(--vasso-ivory);
    }
:where(.vasso-mirror) .vasso-hero-content h1 em{
      font-style:normal;
      color:var(--vasso-platinum);
      font-weight:700;
    }
:where(.vasso-mirror) .vasso-hero-content p{
      margin:0 0 36px;
      font-family:var(--vasso-body);
      font-size:1.06rem;
      color:var(--vasso-ivory-dim);
      max-width:560px;
      line-height:2;
    }
:where(.vasso-mirror) .vasso-hero-dots{
      position:absolute;
      left:clamp(20px,5vw,64px);
      right:auto;
      bottom:clamp(60px,9vw,110px);
      z-index:2;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
:where(.vasso-mirror) .vasso-hero-dots button{
      width:8px;
      height:8px;
      border-radius:50%;
      border:1px solid var(--vasso-platinum);
      background:transparent;
      transition:background .3s;
      padding:0;
    }
:where(.vasso-mirror) .vasso-hero-dots button.is-active{
      background:var(--vasso-platinum);
    }
:where(.vasso-mirror) .vasso-section{
      padding:clamp(70px,10vw,140px) 0;
    }
:where(.vasso-mirror) .vasso-section-head{
      text-align:center;
      max-width:640px;
      margin:0 auto clamp(46px,7vw,84px);
    }
:where(.vasso-mirror) .vasso-section-head h2{
      margin:0;
      font-family:var(--vasso-display);
      font-weight:600;
      font-size:clamp(2.25rem,4vw,3.45rem);
      line-height:1.4;
      text-wrap:balance;
      color:var(--vasso-ivory);
    }
:where(.vasso-mirror) .vasso-section-head p{
      margin:18px 0 0;
      color:var(--vasso-ivory-dim);
      font-family:var(--vasso-body);
      font-size:1.04rem;
      line-height:1.95;
    }
:where(.vasso-mirror) .vasso-cat-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:2px;
      background:var(--vasso-line);
    }
:where(.vasso-mirror) .vasso-cat-scroll-wrap{
      position:relative;
    }
:where(.vasso-mirror) .vasso-cat-card{
      position:relative;
      background:var(--vasso-obsidian);
      aspect-ratio:3/4;
      overflow:hidden;
      display:flex;
      align-items:flex-end;
    }
:where(.vasso-mirror) .vasso-cat-card img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform 1s var(--vasso-ease), filter .6s;
      filter:grayscale(.5) brightness(.55);
    }
:where(.vasso-mirror) .vasso-cat-card:hover img{
      transform:scale(1.08);
      filter:grayscale(0) brightness(.7);
    }
:where(.vasso-mirror) .vasso-cat-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, transparent 40%, rgba(8,9,11,.94) 100%);
    }
:where(.vasso-mirror) .vasso-cat-info{
      position:relative;
      z-index:1;
      padding:26px;
      width:100%;
      text-align:right;
    }
:where(.vasso-mirror) .vasso-cat-tag{
      display:block;
      margin-bottom:8px;
      font-family:var(--vasso-body);
      font-size:.78rem;
      letter-spacing:0;
      color:var(--vasso-ivory-dim);
      line-height:1.8;
      font-weight:500;
    }
:where(.vasso-mirror) .vasso-cat-info h4{
      margin:0 0 14px;
      font-family:var(--vasso-display);
      font-size:1.45rem;
      line-height:1.5;
      font-weight:600;
      color:var(--vasso-ivory);
    }
:where(.vasso-mirror) .vasso-cat-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding-bottom:4px;
      border-bottom:1px solid var(--vasso-platinum);
      font-family:var(--vasso-body);
      font-size:.8rem;
      line-height:1.5;
      letter-spacing:0;
      color:var(--vasso-platinum);
      font-weight:600;
    }
:where(.vasso-mirror) .vasso-diagnosis{
      display:grid;
      grid-template-columns:1fr 1fr;
      align-items:stretch;
      background:var(--vasso-obsidian-2);
      border-top:1px solid var(--vasso-line);
      border-bottom:1px solid var(--vasso-line);
      direction:rtl;
    }
:where(.vasso-mirror) .vasso-diagnosis-media{
      position:relative;
      width:100%;
      height:100%;
      min-height:420px;
      overflow:hidden;
      background:var(--vasso-obsidian);
    }
:where(.vasso-mirror) .vasso-diagnosis-media img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
    }
:where(.vasso-mirror) .vasso-diagnosis-copy{
      padding:clamp(40px,6vw,90px);
      text-align:right;
    }
:where(.vasso-mirror) .vasso-diagnosis-copy h2{
      margin:0 0 22px;
      font-family:var(--vasso-display);
      font-size:clamp(2.25rem,3.8vw,3.2rem);
      line-height:1.42;
      font-weight:600;
      text-wrap:balance;
      color:var(--vasso-ivory);
    }
:where(.vasso-mirror) .vasso-diagnosis-copy p{
      margin:0 0 34px;
      color:var(--vasso-ivory-dim);
      font-family:var(--vasso-body);
      font-size:1.04rem;
      line-height:2;
      max-width:500px;
    }
:where(.vasso-mirror) .vasso-vision-teaser{
      position:relative;
      height:70vh;
      min-height:460px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      overflow:hidden;
    }
:where(.vasso-mirror) .vasso-vision-teaser img,:where(.vasso-mirror) .vasso-vision-teaser video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      filter:grayscale(.5) brightness(.4);
    }
:where(.vasso-mirror) .vasso-vision-teaser::after{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(ellipse at center, rgba(8,9,11,.18), rgba(8,9,11,.88));
    }
:where(.vasso-mirror) .vasso-vision-content{
      position:relative;
      z-index:1;
      max-width:640px;
      padding:0 24px;
      text-align:center;
    }
:where(.vasso-mirror) .vasso-vision-content h2{
      margin:0 0 32px;
      font-family:var(--vasso-display);
      font-size:clamp(2.1rem,4vw,3.25rem);
      line-height:1.55;
      color:var(--vasso-ivory);
      font-weight:600;
      text-wrap:balance;
    }
@media (prefers-reduced-motion: reduce){:where(.vasso-mirror) .vasso-custom-html *{
        animation-duration:0.001ms !important;
        transition-duration:0.001ms !important;
      }}
@media (max-width:1024px){:where(.vasso-mirror) .vasso-cat-grid{
        grid-template-columns:repeat(2,1fr);
      }
:where(.vasso-mirror) .vasso-diagnosis{
        grid-template-columns:1fr;
      }
:where(.vasso-mirror) .vasso-diagnosis-media{
        min-height:360px;
      }}
@media (max-width:760px){:where(.vasso-mirror) .vasso-custom-html{
        overflow-x:hidden;
      }
:where(.vasso-mirror) .vasso-hero{
        height:auto;
        min-height:0;
        display:block;
        overflow:hidden;
      }
:where(.vasso-mirror) .vasso-hero-slides{
        position:relative;
        inset:auto;
        width:100%;
        aspect-ratio:16/9;
        min-height:260px;
        background:#ffffff;
        overflow:hidden;
      }
:where(.vasso-mirror) .vasso-hero-slide{
        overflow:hidden;
        background-image:none !important;
      }
:where(.vasso-mirror) .vasso-hero-slide::before{
        content:"";
        position:absolute;
        inset:-18px;
        background-image:var(--vasso-hero-image);
        background-size:cover;
        background-position:var(--vasso-hero-position, center);
        filter:blur(18px);
        transform:scale(1.08);
        opacity:.9;
      }
:where(.vasso-mirror) .vasso-hero-slide::after{
        content:"";
        position:absolute;
        inset:0;
        background-image:var(--vasso-hero-image);
        background-size:cover;
        background-repeat:no-repeat;
        background-position:var(--vasso-hero-position, center);
      }
:where(.vasso-mirror) .vasso-hero-slides::after{
        display:none;
      }
:where(.vasso-mirror) .vasso-hero-content{
        position:relative;
        padding:28px 20px 46px;
        max-width:none;
        background:
          linear-gradient(180deg, rgba(16,18,21,.72), rgba(8,9,11,1)),
          var(--vasso-obsidian);
        border-top:1px solid var(--vasso-line);
      }
:where(.vasso-mirror) .vasso-hero-content h1{
        margin-bottom:16px;
        font-size:clamp(2.45rem, 11.5vw, 3.65rem);
        line-height:1.34;
      }
:where(.vasso-mirror) .vasso-hero-content p{
        max-width:none;
      }
:where(.vasso-mirror) .vasso-hero-dots{
        top:18px;
        left:20px;
        right:auto;
        bottom:auto;
        flex-direction:row;
      }
:where(.vasso-mirror) .vasso-cat-grid{
        display:flex;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        scroll-padding-inline:12vw;
        gap:12px;
        padding-inline:12vw;
        background:transparent;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-inline:contain;
      }
:where(.vasso-mirror) .vasso-cat-scroll-wrap::after{
        content:"";
        position:absolute;
        top:0;
        bottom:0;
        inset-inline-end:0;
        z-index:4;
        width:34%;
        pointer-events:none;
        background:
          linear-gradient(to right, rgba(247,248,249,.72), rgba(247,248,249,.22), rgba(247,248,249,0));
        opacity:0;
      }
:where(.vasso-mirror) .vasso-cat-scroll-wrap::before{
        content:"";
        position:absolute;
        top:8%;
        bottom:8%;
        inset-inline-end:0;
        z-index:5;
        width:2px;
        pointer-events:none;
        background:rgba(255,255,255,.86);
        box-shadow:0 0 18px rgba(255,255,255,.72), 0 0 38px rgba(255,255,255,.34);
        opacity:0;
      }
:where(.vasso-mirror) .vasso-cat-scroll-wrap.is-scroll-hint-active::after{
        animation:vassoEdgeHint 1.45s var(--vasso-ease) 3 forwards;
      }
:where(.vasso-mirror) .vasso-cat-scroll-wrap.is-scroll-hint-active::before{
        animation:vassoEdgeLineHintRtl 1.45s var(--vasso-ease) 3 forwards;
      }
:where(.vasso-mirror) .vasso-cat-grid::-webkit-scrollbar{
        display:none;
      }
:where(.vasso-mirror) .vasso-cat-card{
        flex:0 0 76vw;
        min-width:0;
        max-width:360px;
        scroll-snap-align:center;
        scroll-snap-stop:always;
        aspect-ratio:3/4;
      }
:where(.vasso-mirror) .vasso-cat-card:hover img{
        transform:none;
        filter:grayscale(.5) brightness(.55);
      }
:where(.vasso-mirror) .vasso-section-head{
        padding:0 4px;
      }
:where(.vasso-mirror) .vasso-diagnosis{
        display:block;
      }
:where(.vasso-mirror) .vasso-diagnosis-media{
        position:relative;
        width:100%;
        height:auto;
        min-height:0;
        aspect-ratio:16/9;
        background:var(--vasso-obsidian);
        overflow:hidden;
      }
:where(.vasso-mirror) .vasso-diagnosis-media img{
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
      }
:where(.vasso-mirror) .vasso-diagnosis-copy{
        padding:34px 20px 52px;
      }
:where(.vasso-mirror) .vasso-diagnosis-copy h2{
        font-size:clamp(2.2rem, 9.5vw, 3rem);
      }
:where(.vasso-mirror) .vasso-diagnosis-copy p{
        max-width:none;
      }}
@keyframes vassoEdgeHint{
      0%{opacity:0;}
      18%{opacity:.9;}
      62%{opacity:.55;}
      100%{opacity:0;}
    }
@keyframes vassoEdgeLineHintRtl{
      0%{opacity:0; transform:translateX(0);}
      18%{opacity:1; transform:translateX(0);}
      62%{opacity:.78; transform:translateX(18px);}
      100%{opacity:0; transform:translateX(30px);}
    }