@import url('../css/vendor/');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/swiper-bundle.min.css');
@import url('../css/vendor/rtmicons.css');
@import url('../css/vendor/syne/stylesheet.css');
@import url('../css/vendor/inter/stylesheet.css');

/* ===== Tokens ===== */
:root {
    --bg: #05080e;
    --bg-2: #0a1017;
    --ink: #EAF2FF;
    --muted: #9CB0C8;
    --line: #122035;
  
    /* Gradient paleti (mor → camgöbeği) */
    --brand1: #e25aff;  /* mor */
    --brand2: #45f0ff;  /* camgöbeği */
    --brand3: #6ab8ff;  /* alternatif mavi */
    --brand4: #b468ff;  /* lila/violet */
    --danger: #ff6b6b;
  
    --glass-blur: 14px;
    --container: 1260px;
  
    /* Brand1 ile uyumlu gölgeler */
    --shadow-1: 0 14px 40px rgba(226, 90, 255, 0.25);
    --shadow-2: 0 30px 120px rgba(226, 90, 255, 0.35);
  }
  
  /* ===== Reset & Base ===== */
  * { box-sizing: border-box; }
  html, body {
    height: auto;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* mobil dikey kaydırmayı garanti et */
  }
  body {
    margin: 0;
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background:
      radial-gradient(1200px 520px at 10% -10%, rgba(245,200,75,.08), transparent 60%),
      radial-gradient(1200px 520px at 110% 120%, rgba(24,208,110,.08), transparent 60%),
      linear-gradient(180deg,#05080e,#070b12 35%, #070c13);
  }
  img, video { max-width: 100%; height: auto; display: block; }
  .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
  
  /* ===== Background layers ===== */
  .grid-bg,
  #starfield,
  .noise,
  .spotlight,
  .cursor-aura {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none; /* dokunmayı engellemesin */
  }
  .grid-bg {
    opacity: .22; /* düşürüldü */
    mix-blend-mode: overlay;
    background-image:
      linear-gradient(#0c1624 1px, transparent 1px),
      linear-gradient(90deg,#0c1624 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 -1px, -1px 0;
  }
  .noise {
    z-index: 1;
    opacity: .05; /* düşürüldü */
    mix-blend-mode: overlay;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.25"/></svg>');
  }
  .cursor-aura {
    left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%;
    z-index: 9999; opacity:.35; filter: blur(12px);
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.55), rgba(255,255,255,0));
    transform: translate(-50%,-50%);
  }
  .spotlight {
    z-index: 2;
    background: radial-gradient(600px 300px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.04), rgba(255,255,255,0));
  }
  
  /* İçerik katmanlarını üste alalım */
  header, .hero, .section, .cta, footer, .mini-header, .side-contact__toggle { position: relative; z-index: 3; }
  
  /* ===== Hero ===== */
  .hero {
    position: relative;
    min-height: auto;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    padding-top: 40px;
  }
  @media (min-width:1024px){
    .hero { min-height: 100vh; padding-top: 0; }
  }
  #starfield { position: absolute; inset: 0; }
  .hero__glow {
    position: absolute; inset: -20%; filter: blur(70px); opacity: .6; z-index: 0;
    background:
      radial-gradient(38vw 38vw at 15% 10%, rgba(255,209,90,.18), transparent 60%),
      radial-gradient(40vw 40vw at 85% 90%, rgba(23,232,139,.18), transparent 60%),
      radial-gradient(24vw 24vw at 30% 70%, rgba(106,184,255,.18), transparent 60%),
      radial-gradient(26vw 26vw at 70% 30%, rgba(180,104,255,.16), transparent 60%);
  }
  .blob {
    position: absolute; width: 62vw; aspect-ratio: 1/1; left: -12vw; top: 18vh;
    filter: blur(60px); opacity: .25; z-index: 0;
    background: conic-gradient(from 120deg at 50% 50%, var(--brand4), var(--brand3), var(--brand2), var(--brand1), var(--brand4));
    border-radius: 42% 58% 64% 36%/44% 54% 46% 56%;
    animation: blob 18s ease-in-out infinite alternate;
  }
  @keyframes blob{
    50%{ border-radius:62% 38% 40% 60%/55% 45% 55% 45%; transform:translate3d(4vw,-2vh,0) rotate(8deg) }
    100%{ border-radius:36% 64% 58% 42%/46% 56% 44% 54%; transform:translate3d(-2vw,4vh,0) rotate(-6deg) }
  }
  .grid-hero { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
  @media (min-width:1024px){
    .grid-hero { grid-template-columns: 1.1fr .9fr; gap: 48px; }
  }
  .kicker { letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: #8aa0bd; opacity: .92; }
  .display { margin: .2rem 0 .55rem; line-height: 1.02; font-weight: 900; font-size: clamp(48px,6.8vw,100px); }
  .display .grad {
    background: linear-gradient(134deg, #e25aff, var(--brand2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .lead { font-size: clamp(16px,2.1vw,20px); color: var(--muted); max-width: 65ch; }
  .chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
  .chip {
    border-radius: 999px; padding: 8px 12px; font-weight: 800; line-height: 1;
    background: color-mix(in oklab, #0f1826 75%, var(--brand3) 12%);
    border: 1px solid color-mix(in oklab, var(--line) 70%, var(--brand3) 30%);
    color: color-mix(in oklab, var(--ink) 92%, transparent);
  }
  
  /* Buttons */
  .btn {
    border-radius: 999px; padding: 14px 22px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 10px;
    transition: .22s ease; text-decoration: none; white-space: nowrap;
    position: relative; overflow: hidden; color: inherit;
  }
  .btn-primary {
    background: linear-gradient(134deg, #e25aff, var(--brand2));
    color: #0a0d12;
    box-shadow: 0 10px 30px rgba(226, 90, 255, 0.25);
  }
  .btn-primary:hover { transform: translateY(-2px) scale(1.02); }
  .btn-ghost { border: 2px solid var(--ink); }
  .btn-ghost:hover { background: var(--ink); color: #0b0f14; transform: translateY(-2px); }
  .btn::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.25), transparent 60%);
    opacity: 0; transition: .25s;
  }
  .btn:hover::after { opacity: .5; }
  
  /* Stats */
  .stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 18px; }
  .stat { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg,#0f1622,#0d141e); }
  .stat b { display: flex; align-items: center; justify-content: space-between; font-size: clamp(18px,2.2vw,20px); }
  .bar { height: 8px; border-radius: 8px; background: #0d1a2a; overflow: hidden; margin-top: 8px; }
  .bar>i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,var(--brand2),var(--brand3)); transition: width 1.2s cubic-bezier(.2,.65,.2,1); }
  
  /* Capsule */
  .capsule {
    justify-self: end; position: relative; width: 100%; aspect-ratio: 16/9;
    border-radius: 28px; overflow: hidden; background: #0f1622;
    border: 1px solid var(--line); box-shadow: var(--shadow-2);
  }
  .capsule__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0f1622; }
  .capsule__ring {
    position: absolute; inset: -1px; border-radius: 28px; pointer-events: none; padding: 1px;
    background: linear-gradient(135deg,var(--brand1),var(--brand2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: .65;
  }
  .capsule__shine {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .6;
    background:
      radial-gradient(40% 30% at 20% 80%, rgba(255,255,255,.08), transparent 70%),
      radial-gradient(60% 40% at 65% 20%, rgba(255,255,255,.18), transparent 60%);
  }
  
  /* ===== Sections ===== */
  .section { padding: 60px 0; }
  @media (min-width:1024px){ .section{ padding: 100px 0; } }
  .head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
  .title-lg { font-size: clamp(32px,4.4vw,52px); margin: 0; position: relative; }
  .title-lg:after {
    content: ""; display: block; height: 3px; width: 98px; margin-top: 12px;
    background: linear-gradient(134deg, #e25aff, var(--brand2)); border-radius: 6px;
  }
  .lead-text { color: var(--muted); max-width: 72ch; }
  
  /* ===== Tabs + Features ===== */
  .tabs { display: grid; grid-template-columns: 1fr; gap: 18px; }
  @media (min-width:991px){ .tabs{ grid-template-columns: 300px 1fr; } }
  .tab-list { display: flex; flex-direction: column; gap: 14px; position: static; }
  .tab-btn {
    padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line);
    background: linear-gradient(180deg, #0f1621, #0e151f); font-weight: 800;
    text-align: left; cursor: pointer; transition: .22s; color: #fff;
  }
  .tab-btn[aria-selected="true"],
  .tab-btn:hover {
    border-color: transparent; box-shadow: var(--shadow-1); color: #fff;
  }
  .tab-btn[aria-selected="true"] {
    background: linear-gradient(
      135deg,
      color-mix(in oklab, #0f1621 80%, var(--brand1) 12%),
      color-mix(in oklab, #0e151f 80%, var(--brand2) 12%)
    );
  }
  .tab-panel {
    display: none; border: 1px solid var(--line); border-radius: 22px; padding: 22px;
    background: linear-gradient(180deg,#0f1724,#0e1420); box-shadow: var(--shadow-1);
  }
  .tab-panel.active { display: block; }
  .feature { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: center; }
  @media (min-width:991px){ .feature{ grid-template-columns: 1.1fr .9fr; } }
  .feature video, .feature img { border-radius: 16px; border: 1px solid var(--line); }
  
  /* ===== Modules cards ===== */
  .modules { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
  @media (min-width:768px){ .modules{ grid-template-columns: repeat(2,1fr); } }
  @media (min-width:1200px){ .modules{ grid-template-columns: repeat(4,1fr); } }
  .card3d {
    position: relative; border: 1px solid var(--line); border-radius: 20px; padding: 16px;
    background: linear-gradient(180deg,#0f1724,#0e1420); transform-style: preserve-3d;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .card3d:hover { box-shadow: 0 20px 60px rgba(0,0,0,.45); }
  .card3d h4 { margin: .2rem 0 .4rem; }
  .card3d p { color: var(--muted); }
  .card3d .cover { height: 160px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; margin-bottom: 10px; }
  .card3d .cover img { width: 100%; height: 100%; object-fit: cover; }
  
  /* ===== Specs + Timeline ===== */
  .specs { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
  @media (min-width:991px){ .specs{ grid-template-columns: 1.1fr .9fr; } }
  .sheet {
    position: sticky; top: 96px;
    background: linear-gradient(180deg,#0f1724,#0e1420);
    border: 1px solid var(--line); box-shadow: var(--shadow-1);
    border-radius: 22px; padding: 24px;
  }
  .sheet .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .spec { padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg,#0e1520,#0d141e); border: 1px solid var(--line); }
  .spec span { color: #90a4c2; }
  .timeline { position: relative; margin-top: 12px; }
  .timeline::before {
    content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(var(--brand1),var(--brand2)); opacity: .85;
  }
  .step { position: relative; padding-left: 40px; margin: 18px 0; }
  .step::before {
    content: ""; position: absolute; left: 5px; top: 4px; width: 14px; height: 14px; border-radius: 50%;
    background: linear-gradient(135deg,var(--brand1),var(--brand2)); box-shadow: 0 0 0 4px #0f1622;
  }
  
  /* ===== Gallery ===== */
  .swiper {
    border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
    background: linear-gradient(180deg,#0f1724,#0e1420); box-shadow: var(--shadow-2);
    touch-action: pan-y; /* yatay sürükleme + dikey sayfa kaydırma uyumu */
  }
  .swiper-slide img { width: 100%; height: auto; object-fit: cover; } /* sabit yükseklik kaldırıldı */
  .swiper-pagination-bullet { background: #e8efff; opacity: .35; }
  .swiper-pagination-bullet-active { background: linear-gradient(135deg,var(--brand1),var(--brand2)); }
  .gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 12px; }
  @media (max-width:991px){ .gallery-grid{ grid-template-columns: 1fr 1fr; } }
  .gallery-grid a img { height: 220px; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
  
  /* ===== Marquee ===== */
  .marquee {
    position: relative; overflow: hidden; border: 1px solid var(--line);
    border-radius: 16px; background: linear-gradient(180deg,#0f1724,#0e1420); padding: 10px;
  }
  .track { display: flex; gap: 40px; white-space: nowrap; will-change: transform; animation: scroll 18s linear infinite; }
  .track b { opacity: .9; }
  @keyframes scroll { from{ transform: translateX(0) } to{ transform: translateX(-50%) } }
  
  /* ===== CTA + FAB ===== */
  .cta {
    padding: 98px 0 110px;
    background:
      radial-gradient(900px 320px at -10% -20%, rgba(245,200,75,.18), transparent 55%),
      radial-gradient(900px 320px at 110% 120%, rgba(24,208,110,.16), transparent 55%);
  }
  .cta__box {
    display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between;
    background: linear-gradient(180deg,#0f1724,#0e1420); border: 1px solid var(--line);
    border-radius: 26px; padding: 28px; box-shadow: var(--shadow-2); position: relative;
  }
  .cta__box::after {
    content: ""; position: absolute; inset: -1px; border-radius: 26px; padding: 1px;
    background: linear-gradient(135deg,var(--brand1),var(--brand2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; pointer-events: none;
  }
  .fab {
    position: fixed; right: 20px; bottom: 20px; width: 62px; height: 62px; display: grid; place-items: center;
    border-radius: 50%; z-index: 9998; cursor: pointer; border: 1px solid var(--line);
    background: linear-gradient(135deg,var(--brand1),var(--brand2)); color: #0b0f14; font-weight: 900;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
  }
  .fab:hover { transform: translateY(-2px); }
  .toast {
    position: fixed; right: 20px; bottom: 96px; background: #0f1826; border: 1px solid var(--line);
    padding: 12px 14px; border-radius: 12px; color: var(--ink); box-shadow: var(--shadow-1);
    opacity: 0; transform: translateY(8px); pointer-events: none; transition: .25s;
  }
  .toast.show { opacity: 1; transform: none; }
  
  /* ===== Reveal ===== */
  .reveal { opacity: 0; transform: translateY(24px); transition: .6s cubic-bezier(.2,.65,.2,1); }
  .reveal.is-visible { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none }
    .track{ animation:none }
  }
  
  /* ===== Sağ Kayan İletişim Paneli ===== */
  .side-contact {
    position: fixed; top: 0; right: 0; height: 100dvh; width: min(420px, 92vw);
    background: linear-gradient(180deg,#0f1724,#0e1420);
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 80px rgba(0,0,0,.45);
    transform: translateX(110%);
    transition: transform .35s cubic-bezier(.2,.65,.2,1);
    z-index: 9998;
    display: grid; grid-template-rows: auto 1fr;
  }
  .side-contact.open { transform: translateX(0); }
  .side-contact__close {
    position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid var(--line); background: #0f1622; color: var(--ink); cursor: pointer;
  }
  .side-contact__head {
    display: flex; gap: 12px; align-items: center; padding: 18px 18px 10px; border-bottom: 1px solid var(--line);
  }
  .side-contact__head img { height: 36px; opacity: .9; }
  .side-contact__head strong { display: block; font-size: 14px; letter-spacing: .06em; }
  .side-contact__head span { color: var(--muted); font-size: 12px; }
  .side-contact__body { padding: 16px; overflow: auto; }
  .contact-cards { display: grid; gap: 10px; margin-bottom: 14px; }
  .c-card {
    display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink);
    background: linear-gradient(180deg,#0f1724,#0e1420);
    border:1px solid var(--line); border-radius:14px; padding:12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .c-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); border-color: transparent; }
  .c-card i {
    font-style: normal; font-size: 18px; width: 28px; height: 28px; display: grid; place-items: center;
    border-radius: 8px; background: color-mix(in oklab, var(--brand2) 18%, #0f1826);
  }
  .c-card b { font-size: 14px; }
  .c-card span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
  .quick-form { border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: #0f1622; }
  .quick-form h4 { margin: 0 0 10px; }
  .quick-form label { display: grid; gap: 6px; margin-bottom: 10px; font-size: 13px; color: #9bb1c9; }
  .quick-form input,
  .quick-form textarea {
    width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line);
    background: #0b1119; color: var(--ink);
  }
  .quick-form input:focus,
  .quick-form textarea:focus { outline: none; border-color: color-mix(in oklab, var(--brand3) 35%, var(--line)); }
  
  /* Açma butonu (sağ orta) */
  .side-contact__toggle {
    position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border-radius: 999px; cursor: pointer;
    background: linear-gradient(134deg, #e25aff, var(--brand2));
    color: #0b0f14; border: 1px solid var(--line); z-index: 9997; box-shadow: var(--shadow-1);
  }
  .side-contact__toggle i{ font-style: normal; }
  .side-contact__toggle:hover{ transform: translateY(-50%) scale(1.03); }
  
  /* Küçük ekranlarda panel çekmeceye dönüşsün; toggle sağ alta insin */
  @media (max-width:768px){
    .side-contact {
      inset: auto 0 0 0; width: 100vw; max-width: none; border-left: none;
      border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
      transform: translateY(100%); height: calc(100dvh - 0px);
    }
    .side-contact.open { transform: translateY(0); }
    .side-contact__body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
    .side-contact__toggle {
      top: auto; bottom: calc(18px + env(safe-area-inset-bottom)); right: 16px; transform: none;
      padding: 14px 16px;
    }
  }
  
  /* Sağ alt köşedeki eski/harici floating butonları kapat */
  .fab,#quickContact,.toast,
  .floating-btn,.float-btn,.floaty,.scrollTop,.back-to-top,
  .youtube-fab,.floating-youtube,
  [class*="ytp-"],
  .ytp-button, .ytp-cards-button, .floating-chat, .messenger-button { display: none !important; }
  
  /* ===== Sabit küçük iletişim paneli (ops.) ===== */
  .contact-panel { position: fixed; bottom: 24px; right: 24px; z-index: 9999; }
  .contact-toggle {
    width: 58px; height: 58px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--brand1), var(--brand2));
    color: #0b0f14; font-size: 24px; font-weight: bold;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35); cursor: pointer; transition: transform .25s ease;
  }
  .contact-toggle:hover { transform: scale(1.05); }
  .contact-content {
    display: none; position: absolute; bottom: 72px; right: 0;
    background: linear-gradient(180deg,#0f1724,#0e1420);
    border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; width: 280px;
    box-shadow: var(--shadow-2); color: var(--ink); text-align: left;
  }
  .contact-content h4 { margin: 0 0 6px; font-size: 18px; }
  .contact-content p { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
  .contact-actions { display: flex; flex-direction: column; gap: 8px; }
  .contact-btn {
    background: var(--bg-2); border: 1px solid var(--line); padding: 10px 14px;
    border-radius: 12px; color: var(--ink); text-decoration: none; transition: background .25s ease; font-size: 14px;
  }
  .contact-btn:hover { background: color-mix(in oklab, var(--brand2) 12%, var(--bg)); color: #fff; }
  
/* Youtube gömülü oynatıcıyı kullanmıyorsanız sayfada kalan yuvarlak tuşu saklar */
/* ---------------------------- */
/* Header, Footer and Navbar       */
/* ---------------------------- */

/* ===== Modern Mini Header (back only) ===== */
.mini-header{
    position:fixed; inset:0 0 auto 0; z-index:9998; border-bottom:1px solid var(--line);
    background:color-mix(in oklab,#0a1019 86%, transparent);
    backdrop-filter:saturate(1.15) blur(var(--glass-blur));
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  .mini-header__inner{
    display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 24px;
    min-height:64px;
  }
  
  /* back link */
  .back-link{
    --ring: linear-gradient(135deg,var(--brand1),var(--brand2));
    display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink);
    padding:6px 10px; border-radius:999px; position:relative; isolation:isolate;
  }
  .back-link::after{
    content:""; position:absolute; inset:0; border-radius:999px; opacity:.14; transition:opacity .2s ease;
    background:var(--ring);
  }
  .back-link:hover::after{ opacity:.22;}
  .back-icon{
    display:grid; place-items:center; width:30px; height:30px; border-radius:999px;
    background:var(--ring); color:#0a0d12; box-shadow:0 6px 16px rgba(0,0,0,.35);
  }
  .back-text{font-weight:800; letter-spacing:.01em}
  
  /* marka çipi */
  .brand-chip{
    display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:999px;
    border:1px solid var(--line);
    background:linear-gradient(180deg,#0f1621,#0e151f);
    box-shadow:0 8px 22px rgba(0,0,0,.35);
  }
  .brand-chip img{height:26px; width:auto; display:block; opacity:.95}
  .brand-chip b{font-weight:900; letter-spacing:.08em; opacity:.92}
  
  /* fixed header boşluğu */
  .hero{padding-top:80px}
  
  /* küçük ekranlar */
  @media (max-width:640px){
    .mini-header__inner{padding:8px 16px; min-height:58px}
    .brand-chip b{display:none}           /* mobilde yalnızca logo göster */
    .brand-chip img{height:22px}
    .back-text{font-weight:800; font-size:14px}
  }
  /* === MOBILE GÖRÜNÜM DÜZELTMELERİ (ekle: CSS'in EN SONUNA) === */
html { -webkit-text-size-adjust: 100%; } /* iOS'un otomatik büyütmesini kapat */
@media (max-width: 480px){

  /* Genel boşluk ve metin */
  .container{ padding: 0 16px; }
  .lead{ font-size: 15px; }

  /* HERO başlık/cta */
  .display{
    /* min 48px çok büyütüyordu; mobile özel düşürdük */
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1.05;
  }
  .chips .chip{ padding: 6px 10px; font-weight: 700; }
  .cta-row .btn{ padding: 12px 16px; font-size: 14px; }

  /* Capsule (hero görsel kutusu) */
  .capsule{ border-radius: 18px; }

  /* İstatistik kartları tek sütun */
  .stats{ grid-template-columns: 1fr; }
  .stat b{ font-size: 16px; }

  /* Bölüm başlığı ve alt çizgi */
  .title-lg{ font-size: clamp(24px, 7vw, 32px); }

  /* Sekmeler */
  .tab-btn{ padding: 12px 14px; font-size: 14px; }
  .tab-panel{ padding: 16px; }

  /* Özellik bileşeni tek sütun */
  .feature{ grid-template-columns: 1fr; gap: 14px; }

  /* Modül kartları tek sütun */
  .modules{ grid-template-columns: 1fr; }
/* Panel katmanları ve tıklama önceliği */
.side-contact{ z-index: 9998; }
#sideContactBackdrop{ z-index: 9996; }

/* Panel açık/kapalı iken etkileşim */
#sideContact[aria-hidden="true"]{ pointer-events: none; }
#sideContact[aria-hidden="false"]{ pointer-events: auto; }

/* Çarpı butonu her şeyin üstünde ve tıklanabilir olsun */
.side-contact__close{
  position: absolute; /* zaten öyleyse sorun yok */
  z-index: 10001;
  pointer-events: auto;
}
  /* Teknik özet kartları tek sütun + sticky kapalı */
  .sheet{ position: static; padding: 16px; }
  .sheet .grid{ grid-template-columns: 1fr; }
  .spec{ padding: 12px; }

  /* Zaman çizelgesi sıklaştırma */
  .timeline .step{ margin: 14px 0; }

  /* Sağ iletişim butonu ekranda taşmasın */
  .side-contact__toggle{
    padding: 12px 14px;
    top: auto; bottom: calc(18px + env(safe-area-inset-bottom));
    right: 16px; transform: none;
  }
}

/* Daha küçük cihazlar (≤360px) için ekstra güvenlik */
@media (max-width: 360px){
  .display{ font-size: clamp(26px, 9.5vw, 34px); }
  .cta-row .btn{ font-size: 13px; padding: 10px 14px; }
  .tab-btn{ font-size: 13px; }
}

#header {
    transition: all 0.5s ease;
}

.logo-container {
    max-width: 230px;
}

.logo-partner {
    filter: brightness(200%) contrast(0%) saturate(0%) blur(0px) hue-rotate(0deg);
    transition-duration: 0.5s;
}

.logo-partner:hover {
    filter: none;
}

.offcanvas {
    background-color: var(--primary);
}

.offcanvas-header {
    color: var(--text-color);
}

.navbar {
    padding-block: 1.5rem;
}

.navbar-nav .nav-link:focus {
    color: var(--accent-color);
    text-align: center;
}

.navbar-nav .nav-link.show {
    color: var(--accent-color);
}

.navbar-expand-xl .navbar-nav .nav-link {
    padding-inline: 1rem;
}

.nav-link {
    font-size: 0.95rem;             /* dropdown-item ile uyumlu */
    font-family: var(--font-1);     /* dropdown-item ile aynı font */
    font-weight: 400;               /* dropdown-item ile aynı */
    color: var(--text-color-2);
    text-align: center;
    padding-block: 1.2rem;
}

.nav-link:hover {
    color: var(--text-color);
    text-align: center;
}

.nav-link.active {
    color: #ebd561 !important;
    text-align: center;
}

.navbar-toggler {
    border: none;
    color: var(--accent-color-2);
}

.navbar-toggler:focus {
    box-shadow: none;
    background-color: transparent;
    color: var(--accent-color-2);
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link {
    background-color: transparent;
    color: var(--accent-color);
    border: none;
    position: relative;
}

.nav-tabs .nav-link:hover {
    border: none;
    color: white;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    border: none;
}

.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
}

.dropdown-menu {
    border-radius: 0;
    border: none;
    padding: 0;
    width: 200px;
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
    overflow: visible;
}

.dropdown-item {
    padding-block: 0.75rem;
    color: var(--text-color);
    font-family: var(--font-1);
    font-size: 0.95rem;
    font-weight: 400;
    padding-inline: 0.75rem;
    text-align: center;
    background-color: var(--background-color);
    overflow: visible;
}

.dropdown-item.active {
    color: var(--primary);
    background-color: var(--accent-color);
}

.dropdown-item:hover {
    background-color: var(--accent-color);
    color: var(--primary);
}

.dropdown-item:focus {
    color: var(--accent-color);
}

/* ---------------------------- */
/* Section and Container       */
/* ---------------------------- */
.section {
    padding: 6em 3em 6em 3em;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

.r-container {
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
}


/* ---------------------------- */
/* Background and Setting Color      */
/* ---------------------------- */
.bg-accent-primary {
    background-color: var(--primary);
}

.bg-accent-color {
    background-color: var(--accent-color);
}

.bg-accent-color-2 {
    background-color: var(--accent-color-2);
}

.bg-accent-color-3 {
    background: var(--accent-color-3);
}

.bg-accent-color-4 {
    background-color: var(--accent-color-4);
}

.bg-accent-color-5 {
    background-color: var(--accent-color-5);
}

.bg-accent-color-6 {
    background-color: var(--accent-color-6);
}

.bg-accent-color-7 {
    background-color: var(--accent-color-7);
}

.bg-accent-color-8 {
    background-color: var(--accent-color-8);
}

.bg-accent-color-9 {
    background-color: var(--accent-color-9);
}

.bg-accent-color-10 {
    background-color: var(--accent-color-10);
}

.bg-accent-color-11 {
    background-color: var(--accent-color-11);
}

.bg-accent-color-12 {
    background-color: var(--accent-color-12);
}

.bg-accent {
    background-color: var(--background-color);

}

.bg-text-color {
    background-color: var(--text-color);
}

.bg-text-color-2 {
    background-color: var(--text-color-2);
}

.bg-accent-color-hover:hover {
    background-color: var(--accent-color);
    color: white;
}

.bg-dark-transparent {
    background-color: #232323b7;
}

.accent-color-primary {
    color: var(--primary);
}

.accent-color {
    color: var(--accent-color);
}

.accent-color-2 {
    color: var(--accent-color-2);
}

.accent-color-3 {
    color: var(--accent-color-3);
}

.accent-color-4 {
    color: var(--accent-color-4);
}

.accent-color-5 {
    color: var(--accent-color-5);
}

.accent-color-6 {
    color: var(--accent-color-6);
}

.accent-color-7 {
    color: var(--accent-color-7);
}

.accent-color-8 {
    color: var(--accent-color-8);
}

.accent-color-9 {
    color: var(--accent-color-9);
}

.accent-color-10 {
    color: var(--accent-color-10);
}

.accent-color-11 {
    color: var(--accent-color-11);
}

.accent-color-12 {
    color: var(--accent-color-12);
}

.bg-background-color {
    color: var(--background-color);
}

.border-accent {
    border-color: var(--text-color-2) !important;
}

.border-accent-2 {
    border-color: var(--accent-color) !important;
}

.border-accent-4 {
    border-color: var(--accent-color-4) !important;
}

.border-accent-5 {
    border-color: var(--accent-color-5) !important;
}

.border-text-color {
    border-color: var(--text-color) !important;
}

.border-testimonial {
    border-right: 5px solid var(--accent-color-2);
}

.border-bottom-hover:hover {
    border-bottom: 2px solid var(--accent-color);
}

.border-accent-color {
    border: 1px solid var(--accent-color);
}

.custom-border {
    border-width: 15px 0 0 15px;
    border-style: solid;
    border-color: var(--background-color);
    border-radius: 50% 0 50% 0;
}

.custom-border-2 {
    border-width: 10px;
    border-style: solid;
    border-color: var(--primary);
    border-radius: 50%;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: -2.5rem;
    position: relative;
    z-index: 2;
}

.clipped-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 73%, 82% 73%, 82% 100%, 0 100%, 0% 80%, 0% 20%)
}

.outline {
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--accent-color);
}

.text-gray {
    color: grey !important;
}

/* ---------------------------- */
/* Swiper Setting              */
/* ---------------------------- */
.text-marquee {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.text-marquee-content {
    display: inline-block;
    animation: text-marquee 70s linear infinite;
    font-size: 100px;
    padding-right: 50%;
}

@keyframes text-marquee {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

.marquee-container {
    overflow: hidden;
    /* white-space: nowrap; */
    width: 100%;
    display: flex;
    flex-direction: row;
    --gap: 1rem;
    --speed: 20;
    /* gap: var(--gap); */
}

.marquee {
    animation: marquee calc(500s / var(--speed)) infinite linear;
}

.reverse .marquee {
    animation-direction: reverse;
}

.marquee-content {
    display: inline-flex;
}

.marquee-item:hover img {
    filter: var(--accent-color);
}

.marquee-item {
    text-wrap: nowrap;
    padding-inline: var(--gap);
    margin-right: 1rem;
    width: max-content;
}

@keyframes marquee {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(calc(-100% - 1rem));
    }
}

img.rotate {
    width: 300px;
    animation: rotation 6s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.swiperTestimonials {
    overflow: visible;
}

.swiperTestimonials2 {
    position: relative;
    padding-bottom: 40px;
}

.swiperStep .swiper-slide.swiper-slide-thumb-active h4 {
    color: var(--accent-color);
}

.swiperStep {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.swiperStep2 .swiper-slide img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

.swiperStep2 .swiper-slide {
    background-size: cover;
    background-position: center;
}

.swiperStep {
    width: 100%;
    height: 100%;
}

.swiperStep .swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.swiperStep {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.swiperStep .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.swiperStep .swiper-slide-thumb-active {
    opacity: 1;
}

.padding-swiper {
    position: relative;
    padding-inline: 5rem;
}

.mySwiper {
    position: relative;
    padding-bottom: 156px;
}

.swiperImage {
    position: relative;
    width: 100%;
}

.swiper-pagination {
    margin-top: 1rem;
    position: relative;
}
.breadcrumb-item a:hover {
    color: #e7352b !important;
    text-decoration: underline;
  }

.swiper-pagination-bullet {
    background-color: #fff !important;   /* Beyaz */
    opacity: 0.7;
    width: 12px;
    height: 12px;
    margin: 0 6px !important;
  }

.swiper-pagination-bullet-active {
    background-color: #ffd700 !important; /* Sarı (aktif olan dot) */
    opacity: 1;
  }

.swiper-slide {
    padding: 0.5rem;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 27px;
}

.swiperStep2 .swiper-button-next::after,
.swiperStep2 .swiper-button-prev::after {
    font-size: 45px;
}

.swiperStep2 .swiper-button-next,
.swiperStep2 .swiper-button-prev {
    right: -1rem;
    top: 15rem;
    width: 95px;
    height: 95px;
    border: 6px solid var(--primary);
    background: linear-gradient(180deg, #050505 -77.42%, #01C7F3 100%);
    color: var(--text-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.swiper-button-next.accent,
.swiper-button-prev.accent {
    bottom: 10px;
    /* Posisikan tombol di bagian bawah */
    width: 50px;
    height: 50px;
    border: 1px solid var(--accent-color);
    background-color: var(--background-color);
    /* Warna background semi-transparan */
    color: var(--accent-color);
    border-radius: 50%;
    /* Membuat tombol bulat */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.swiper-button-next.accent {
    right: 0;
    transform: translateY(20px);
}

.swiper-button-prev.accent {
    left: 0;
    transform: translateY(20px);
}

.swiper-button-next.accent2,
.swiper-button-prev.accent2 {
    top: 15px;
    /* Posisikan tombol di bagian bawah */
    width: 50px;
    height: 50px;
    border: 1px solid var(--accent-color);
    background-color: var(--background-color);
    /* Warna background semi-transparan */
    color: var(--accent-color);
    border-radius: 50%;
    /* Membuat tombol bulat */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.swiper-button-next.accent2 {
    right: 0;
    transform: translateY(20px);
}

.swiper-button-prev.accent2 {
    left: 0;
    transform: translateY(20px);
}

/* Center the buttons horizontally */
.swiperStep2 .swiper-button-next {
    right: 0;
    transform: translateY(20px);
}

.swiperStep2 .swiper-button-prev {
    left: 0;
    transform: translateY(20px);
}

.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
    top: 25rem;
    width: 50px;
    height: 50px;
    border: 2px solid var(--accent-color);
    background-color: transparent;
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Center the buttons horizontally */
.mySwiper .swiper-button-next {
    right: 45%;
    transform: translateY(20px);
}

.mySwiper .swiper-button-prev {
    left: 45%;
    transform: translateY(20px);
}

/* Center the buttons horizontally */
.swiper-button-next.service {
    right: -9%;
    /* Gerakkan tombol next ke kanan dari tengah */
    transform: translateY(20px);
}

.swiper-button-prev.service {
    left: -7%;
    /* Gerakkan tombol prev ke kiri dari tengah */
    transform: translateY(20px);
}

/* Style for both next and prev buttons */
.swiperImage .swiper-button-next,
.swiperImage .swiper-button-prev {
    bottom: 10px;
    /* Posisikan tombol di bagian bawah */
    width: 50px;
    height: 50px;
    border: 1px solid var(--accent-color);
    background-color: var(--background-color);
    /* Warna background semi-transparan */
    color: var(--accent-color);
    border-radius: 50%;
    /* Membuat tombol bulat */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Center the buttons horizontally */
.swiperImage .swiper-button-next {
    left: 50%;
    /* Gerakkan tombol next ke kanan dari tengah */
    transform: translateY(20px);
}

.swiperImage .swiper-button-prev {
    left: 47%;
    /* Gerakkan tombol prev ke kiri dari tengah */
    transform: translateY(20px);
}

/* Ukuran icon panah */
.swiperImage .swiper-button-next::after,
.swiperImage .swiper-button-prev::after {
    font-size: 24px;
}

/* Hover effect */
.swiperImage .swiper-button-next:hover,
.swiperImage .swiper-button-prev:hover {
    background-color: var(--accent-color);
    color: var(--primary);
    /* Background lebih gelap saat hover */
}

.custom-swiper {
    width: 100%;
    height: 600px;
    padding-right: 3rem;
}

.custom-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-scrollbar {
    width: 6px;
    position: absolute;
    right: 10px;
    top: 0px;
    margin-top: 150px;
    bottom: 0;
    background: #e0e0e0;
    border-radius: 10px;
    z-index: 9999;
}

.swiper-scrollbar.swiper-scrollbar-vertical {
    height: 300px;
}

.custom-scrollbar .swiper-scrollbar-drag {
    background: #ff9800;
    border-radius: 10px;
}

/* ---------------------------- */
/* Buttons & Links              */
/* ---------------------------- */
button {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    text-decoration: none;
    transition: all 0.5s;
}

button:hover {
    color: var(--text-color);
}

a {
    text-decoration: none;
}

.w-max-content {
    width: max-content;
}

.read-more {
    color: var(--accent-color-4);
    font-family: var(--font-2);
    font-size: 16px;
    transition: all 0.5s;
}

.read-more.blog {
    color: var(--text-color);
    transition: all 0.5s;
}

.read-more:hover {
    color: var(--text-color);
}

.tags {
    font-family: var(--font-1);
    font-size: 18px;
    color: var(--accent-color-4);
}

.tags.active {
    color: var(--accent-color);
}

.btn {
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-1);
    font-weight: 600;
    position: relative;
    display: inline-block;
    pointer-events: auto;
    cursor: pointer;

}

.btn::before,
.btn::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn-close {
    color: var(--text-color);
}

.btn-close:hover {
    color: var(--text-color);
}

.btn-accent {
    background: linear-gradient(78.12deg, #fffeda 0.32%, #e1bf16 99.52%);

    transition: all 0.5s;
    border: 1px solid transparent;
    padding: 16px 32px;
    border-radius: 20px;
    overflow: hidden;
}

.btn-accent:hover span {
    animation: MoveScaleRightInitial 0.3s forwards, MoveScaleRightEnd 0.3s forwards 0.3s;
}

@keyframes MoveScaleRightInitial {
    to {
        transform: translate3d(105%, 0, 0) scale3d(2, 1, 1);
        opacity: 0;
    }
}

@keyframes MoveScaleRightEnd {
    from {
        transform: translate3d(-100%, 0, 0) scale3d(2, 1, 1);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.btn-accent:hover {
    border-color: var(--accent-color);
    color: var(--primary);
}

.btn-accent.accent {
    background: transparent;
    border-color: transparent;
    color: var(--text-color);
}

.btn-accent.accent:hover {
    border: 1px solid var(--text-color);
    color: var(--text-color);
}

.btn-accent-underline {
    background-color: transparent;
    border-bottom: 1px solid transparent;
    color: var(--text-color);
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    padding-bottom: 4px;
}

.btn-accent-underline::before,
.btn-accent-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: currentColor;
    top: 100%;
    left: 0;
    pointer-events: none;
}

.btn-accent-underline::before {
    transform: scaleX(1);
    transform-origin: 0% 50%;
    transition: transform 0.3s ease-in-out;
}

.btn-accent-underline:hover::before {
    transform-origin: 100% 50%;
    transform: scaleX(0);
}

.btn-accent-underline::after {
    transform: scaleX(0);
    transform-origin: 0% 50%;
    transition: transform 0.3s ease-in-out 0.3s;
}

.btn-accent-underline:hover::after {
    transform: scaleX(1);
}

.btn-accent-underline:hover {
    background: linear-gradient(78.12deg, #fffeda 0.32%, #e1bf16 99.52%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.btn-toggler-accent {
    background-color: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    aspect-ratio: 1/1;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}


.btn-toggler-accent:hover {
    background-color: var(--text-color);
    color: var(--primary);
}

.btn-white-outline {
    background-color: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    padding: 16px 32px;
    border-radius: 20px;
    overflow: hidden;
}

.btn-white-outline:hover {
    background-color: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
}

.btn-white-outline:hover span {
    animation: MoveScaleRightInitial 0.3s forwards, MoveScaleRightEnd 0.3s forwards 0.3s;
}

@keyframes MoveScaleRightInitial {
    to {
        transform: translate3d(105%, 0, 0) scale3d(2, 1, 1);
        opacity: 0;
    }
}

@keyframes MoveScaleRightEnd {
    from {
        transform: translate3d(-100%, 0, 0) scale3d(2, 1, 1);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

.btn-accent-icon {
    background-color: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    padding-left: 32px;
    border-radius: 20px;
    padding-right: 4.5rem;
    height: 56px;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
}

.btn-accent-icon:hover {
    border: 1px solid transparent;
}

.btn-accent-icon .icon-box {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    border-radius: 19px;
    background: linear-gradient(78.12deg, #A9F8B5 0.32%, #DFF494 99.52%);
    box-shadow: 0px 4px 4.8px rgba(4, 4, 4, 0.4);
    color: var(--primary);
    padding: 15px;
    width: 54px;
    height: 54px;
    transform: translateX(0);
    transition: transform 0.4s ease-in-out, width 0.4s ease-in-out;
}

.btn-accent-icon:hover .icon-box {
    width: 100%;
    height: 54px;
}

.btn-accent-icon:hover i {
    animation: MoveScaleRightInitial 0.3s forwards, MoveScaleRightEnd 0.3s forwards 0.3s;
}

.partner {
    display: flex;
    justify-content: center;
}

.partner svg {
    color: var(--accent-color-4);
    width: 216px;
    height: 51px;
    transition: all 0.5s ease;
}

.partner:hover svg {
    color: var(--text-color);
}

.image-footer .social-item {
    color: var(--primary);
    background-color: var(--accent-color);
}

.image-footer:hover .image-footer-blur {
    background: rgba(24, 21, 24, 0.3);
    backdrop-filter: blur(2px);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    transition: all 0.5s ease;
}

.image-footer {
    position: relative;
    width: max-content;
}

.image-footer .image-zoom {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all 0.5s ease;
}

.image-footer:hover .image-zoom {
    transform: scaleY(1);
}


.card .link {
    color: var(--accent-color);
    transition: color 0.5s;
}

.card .link:hover {
    color: var(--primary);
}

.link.accent-color {
    color: var(--accent-color);
    transition: color 0.5s;
}

.link.accent-color:hover {
    color: var(--dark-bg);
}

.link {
    color: var(--text-color-2);
}

.link:hover {
    color: var(--accent-color);
}

a .icon-box-2 {
    transition: all 0.5s ease;
    transform: rotate(0deg);
}

a:hover .icon-box-2 {
    transform: rotate(45deg);
}

.link-white {
    color: white;
}

.link-white:hover {
    color: var(--accent-color);
}

/* ---------------------------- */
/* Overlay                      */
/* ---------------------------- */
.blog-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 69, 81, 0.6) 100%);
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.image-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.3) 23.17%, rgba(1, 199, 243, 0.3) 127.38%);
}

.overlay {
    color: var(--accent-color-2);
    opacity: 0.3;
}

.bg-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

.bg-overlay-2 {
    background: linear-gradient(0deg, rgba(1, 137, 142, 0.28), rgba(1, 137, 142, 0.28));
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.testimonial-overlay {
    background: linear-gradient(0deg, rgba(255, 239, 225, 0.96), rgba(255, 239, 225, 0.96));
    position: absolute;
    width: 75%;
    height: 100%;
    top: 0;
    right: 0;
}

.bg-accent-opacity {
    background: linear-gradient(0deg, rgba(43, 43, 43, 0.86), rgba(43, 43, 43, 0.86));
}

.bg-blur {
    position: absolute;
    background: rgba(24, 21, 24, 0.3);
    border: 1px solid rgba(207, 171, 130, 0.2);
    backdrop-filter: blur(17.5px);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.linear-gradient {
    padding: 14px 42px;
    background-color: var(--accent-color-2);
    border-radius: 50px;
    width: max-content;
}

.cta-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20.5%, rgba(1, 199, 243, 0.2) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.contact-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 27.06%, rgba(1, 199, 243, 0.61) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}
.lang-dropdown {
    position: relative;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
  }
  
  .lang-btn {
    background: #e0e0e0;
    color: #000;
    border: none;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .arrow-down {
    border: solid #555;
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    margin-left: 4px;
  }
   
  .lang-menu {
    display: none;
    position: absolute;
    background-color: #1a1a1a;
    min-width: 100px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px;
    z-index: 1000;
    margin-top: 6px;
  }
  
  .lang-menu a {
    color: #fff;
    padding: 8px 12px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
  }
  .lang-menu a.disabled {
    background-color: #333;
    color: #999;
    pointer-events: none;
    font-weight: bold;
    opacity: 0.6;
  }
  
  .lang-menu a.disabled img {
    opacity: 0.5;
  }
  .lang-menu a:hover {
    background-color: #333;
    border-radius: 10px;
  }

.video-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, rgba(4, 56, 63, 0.144) 0%, rgba(4, 56, 63, 0.72) 100%);
    opacity: 0.5;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

/* ---------------------------- */
/* Utility Classes              */
/* ---------------------------- */

.devider-progress {
    position: absolute;
    height: calc(100% - 5px);
    border-left: 1px dashed var(--text-color);
    margin-left: 37px;
    margin-top: 5px;
    z-index: -1;
    display: block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.hover-transform:hover {
    transform: translateY(-10px);
}

.font-1 {
    font-family: var(--font-1);
}

.font-2 {
    font-family: var(--font-2);
}

.font-3 {
    font-family: var(--font-2);
}

.ls-2 {
    letter-spacing: 2px;
}

.fs-7 {
    font-size: 0.8rem !important;
}

.fs-very-large {
    font-size: 4.125rem;
}

.fw-black {
    font-weight: 900 !important;
}

.team-detail {
    background-color: var(--background-color);
    color: var(--accent-color);
    transition: all 0.5s;
}

.team-detail:hover {
    background-color: var(--accent-color);
    color: var(--primary);
}

.divider {
    display: flex;
    align-items: center;
}

.divider::after {
    display: block;
    content: "";
    border-bottom: 0;
    flex-grow: 1;
    border-top: 3px solid #8692af;
    max-width: 30px;
    min-width: 30px;
}


.divider-element {
    letter-spacing: 2px;
    flex-shrink: 0;
    flex-grow: 1;
    margin: 0;
    margin-left: 1rem;
    font-weight: 400;
}


.animation-bg {
    animation: background_animation 10s forwards;
}

.bg-attach-fixed {
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: 100%;
}

.bg-attach-cover {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.social-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.social-container.column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2.4px);
    border-right: 1px solid var(--accent-color);
    border-top: 1px solid var(--accent-color);
}

.character-img {
    position: relative;
    z-index: 2;
}

.w-70 {
    width: 70%;
}

.stock-img {
    position: relative;
    z-index: 20;
}

.customer-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 12px;
    width: 60px;
    height: 60px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color-2);
    margin-left: -6px;
    overflow: hidden;
}

.customer-item.testimonial {
    width: 57px;
    height: 57px;
}

.customer-item.single {
    margin-left: 0;
}

.testimonial-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 19px;
    width: 5rem;
    height: 5rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    margin-left: -6px;
    overflow: hidden;
}

.bg-box {
    bottom: 0;
    right: 0;
    height: 60%;
    width: 50%;
    border: solid 3px var(--accent-color-2);
}

.icon-box {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
    border-radius: 19px;
    background: linear-gradient(78.12deg, #fffeda 0.32%, #e1bf16 99.52%);

    box-shadow: 0px 4px 4.8px rgba(4, 4, 4, 0.4);
    color: var(--primary);
    padding: 15px;
    width: max-content;
    height: max-content;
}

.icon-box-2 {
    display: flex;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
    border-radius: 10px;
    background: linear-gradient(78.12deg, #bdd9c2 0.32%, #f1d400 99.52%);
    color: var(--primary);
    padding: 20px;
    width: max-content;
    height: max-content;
}

.icon-box-3 {
    display: flex;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
    border-radius: 10px;
    background-color: var(--primary);
    border: 1px dashed var(--text-color);
    color: var(--text-color);
    padding: 20px;
    width: max-content;
    height: max-content;
}

.author-box {
    border-radius: 50%;
    aspect-ratio: 1/1;
    width: 15rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -6px;
    overflow: hidden;
}

.post-button {
    background-color: transparent;
    color: var(--accent-color) !important;
    border: none !important;
}

.post-button:hover {
    background-color: transparent !important;
    color: var(--accent-color) !important;
    transform: scale(1.15);
}

.position-xl-absolute {
    position: absolute;
}

.w-60 {
    width: 60% !important;
}

.shadow-double {
    box-shadow: 40px -40px 0px -4px var(--accent-color), -54px 44px 0px -3px var(--text-color-2);
}

.shadow-single-left {
    box-shadow: -54px 44px 0px -3px var(--accent-color);
}

.shadow-single-right {
    box-shadow: 40px -40px 0px -4px var(--accent-color);
}

.shadow-accent {
    box-shadow: 22px 22px 44.7px rgba(4, 4, 4, 0.4);
    border-radius: 20px;
}

.text-404 {
    font-size: 200px;
    font-weight: bold;
    font-family: var(--font-2);
}

.number-text {
    font-size: 96px;
    font-weight: bold;
}

.text-banner {
    font-size: 200px;
}

.rounded-end {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.swiperImage.floating-left {
    margin-left: 16rem;
}

.floating-footer {
    position: relative;
    margin-top: -20rem;
    z-index: 1;
}

.floating-404 {
    position: relative;
    margin-block: -10rem;
    z-index: 1;
}

.floating-banner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.image-container {
    position: relative;
    display: inline-block;
}

.hotspot {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(24, 21, 24, 0.5);
    border: 0.5px solid var(--text-color);
    backdrop-filter: blur(2px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.hotspot:hover {
    background-color: var(--accent-color);
}

.hotspot i {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.hotspot:hover i {
    color: white;
}

/* Tooltip */
.hotspot::after {
    content: attr(data-text);
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    white-space: nowrap;
    display: none;
}

.hotspot:hover::after {
    display: block;
}
.footer {
        background-color: #111;
        color: #fff;
        padding: 60px 30px 30px;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
    }
  .footer-container {
    max-width: 1280px;
    margin: 0 auto;
  }
  .footer-row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }
  .footer-col {
    flex: 1 1 300px;
  }
  .footer-col h5,
  .footer-col h6 {
    font-weight: 600;
    margin-bottom: 16px;
  }
  .footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .footer-col ul li {
    margin-bottom: 8px;
  }
  .footer-col ul li a {
    color: #ccc;
    text-decoration: none;
  }
  .footer-col ul li a:hover {
    color: #fff;
  }
  .footer-col .desc {
    color: #bbb;
    margin-bottom: 16px;
    line-height: 1.6;
  }
  .social-icons a {
    display: inline-block;
    margin-right: 12px;
    color: #fff;
    font-size: 18px;
  }
  .social-icons a:hover {
    color: #fcd34d;
  }
  .contact {
    margin-top: 16px;
    color: #ccc;
  }
  .menu-columns {
    display: flex;
    gap: 40px;
  }
  .newsletter-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
  }
  .newsletter-form input {
    flex: 1;
    padding: 6px 10px;
    border-radius: 4px;
    border: none;
  }
  .newsletter-form button {
    background-color: #fcd34d;
    color: #000;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
  }
  .footer-bottom {
    text-align: center;
    color: #888;
    font-size: 13px;
    margin-top: 40px;
    border-top: 1px solid #333;
    padding-top: 20px;
  }



  
.d-inline-block {
    display: inline-block;
}

.position-responsive {
    position: absolute;
}

.list .icon-box {
    width: 4.3rem;
    height: 4.3rem;
}

.list-flush-horizontal {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 1rem;
}

.list-flush-horizontal .list-item:first-child,
.list-flush-horizontal .list-item {
    border-right: 1px solid white;
}

.list-flush-horizontal .list-item:last-child {
    border-left: 1px solid white;
    border-right: none;
}

.list-flush-horizontal .list-item:nth-last-child(2) {
    border: none;
}

.list-group-item {
    background-color: transparent;
    border-radius: 10px;
}

.list-group .link {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    transition: all 0.5s;
    border-radius: 50px;
    padding: 10px;
}

.list-group .link.active {
    color: var(--primary);
    background-color: var(--accent-color);

}

.list-group .link:hover {
    color: var(--primary) !important;
    background-color: var(--accent-color);
    text-decoration: none;
}

.list-group .link .icon-box {
    background-color: var(--accent-color);
    color: var(--primary);
}

.list-group .link.active .icon-box {
    background-color: var(--primary);
    color: var(--accent-color);
}

.list-group .link:hover .icon-box {
    background-color: var(--primary);
    color: var(--accent-color);
}

.list-group .list-group-item.active {
    background-color: var(--accent-color-2);
    color: var(--accent-color);
}

.list-group .list-group-item.list-group-item-action:hover {
    background-color: var(--accent-color-2);
    color: white;
}

.list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    padding-inline: 0.5rem;
}

.list li {
    padding: 0;
    font-size: 16px;
    font-family: var(--font-2);
}

.list li .link {
    transition: all 0.5s;
    color: var(--accent-color-4);
    font-size: 16px;
}

.list li i {
    transition: all 0.5s;
    color: var(--accent-color);
}

.list.text-black i {
    color: #131313;
}

.list li .link:hover,
.list li .link:hover i {
    color: var(--text-color);
}

.countdown {
    display: flex;
    gap: 20px;
}

.countdown-box {
    background-color: var(--accent-color);
    color: white;
    text-align: center;
    padding: 30px;
    width: 200px;
    border-radius: 8px;
}

.countdown-box h2 {
    margin: 0;
    font-size: 2em;
}

.countdown-box p {
    margin: 0;
    font-size: 1.2em;
}

/* ---------------------------- */
/* Social and Contact Setting    */
/* ---------------------------- */
.customer-container {
    display: flex;
    flex-direction: row-reverse;
}

.customer-item:nth-child(1) {
    z-index: 6;
}

.customer-item:nth-child(2) {
    z-index: 5;
}

.customer-item:nth-child(3) {
    z-index: 4;
}

.customer-item:nth-child(4) {
    z-index: 3;
}

.subscribe-container {
    box-sizing: border-box;
    margin-bottom: -8em;
}

.contact-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 16px;
    width: 36px;
    height: 36px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.social-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 16px;
    width: 36px;
    height: 36px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    background:linear-gradient(78.12deg, #fffeda 0.32%, #e1bf16 99.52%);

    border: 1px solid transparent;
}

.social-item-2 {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 16px;
    width: 36px;
    height: 36px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
    background-color: transparent;
    border: 1px solid var(--accent-color);
}

.social-item-3 {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 16px;
    width: 36px;
    height: 36px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color-6);
    background-color: transparent;
    border: 1px solid var(--accent-color-6);
}

.social-item-4 {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 16px;
    width: 36px;
    height: 36px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color-3);
    background-color: transparent;
    border: 1px solid var(--accent-color-3);
}

.social-item-5 {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 16px;
    width: 36px;
    height: 36px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color-8);
    background-color: transparent;
    border: 1px solid var(--accent-color-8);
}

.social-item-6 {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 16px;
    width: 36px;
    height: 36px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color-9);
    background-color: transparent;
    border: 1px solid var(--accent-color-9);
}

.social-item:hover {
    background: transparent;
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.social-item-2:hover {
    background-color: var(--accent-color);
    color: var(--accent-color-12);
}

.social-item-3:hover {
    background-color: var(--accent-color-6);
    color: var(--accent-color-12);
}

.social-item-4:hover {
    background-color: var(--accent-color-3);
    color: var(--accent-color-12);
}

.social-item-5:hover {
    background-color: var(--accent-color-8);
    color: var(--accent-color-12);
}

.social-item-6:hover {
    background-color: var(--accent-color-9);
    color: var(--accent-color-12);
}

.social-container .share-button {
    background-color: var(--accent-color-1);
    aspect-ratio: 1/1;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.share-button:hover {
    background-color: var(--accent-color-2);
}

/* ---------------------------- */
/* Breadcrumb    */
/* ---------------------------- */
.breadcrumb {
    align-items: center;
    font-family: var(--font-1);
    font-size: 18px;
    border: 1px solid var(--accent-color);
    width: max-content;
    padding: 4px 10px;
    padding-right: 3px;
    border-radius: 100px;
    gap: 10px;
    font-weight: 600;
}

.breadcrumb .breadcrumb-item>a {
    color: var(--text-color);
    font-family: var(--font-1);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--primary);
    font-family: var(--font-1);
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--accent-color-3);
    font-size: 18px;
}

.breadcrumb-item+.breadcrumb-item::before {
    display: none;
}

/* ---------------------------- */
/* Specific Media Queries       */
/* ---------------------------- */
.video-e119 {
    width: 60%;
    margin-bottom: -3rem;
    margin-left: -3rem;
}

.ifr-video {
    aspect-ratio: 16/9;
    width: 100%;
}

.video-container {
    aspect-ratio: 3/2;
    background-size: cover;
    background-position: center;
    position: relative;
    border: 5px solid white;
    border-radius: 10px;
}

.video-iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.video-btn {
    border-radius: 50%;
    aspect-ratio: 1/1;
    width: 4rem;
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 2rem;
    color: white;
    border: none;
    opacity: 0.7;
}

.video-btn:hover {
    opacity: 1;
    color: white;
}

.request-loader {
    position: relative;
    height: 60px;
    width: 60px;
    border-radius: 50% !important;
    border: solid 1px var(--text-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    font-size: 25px;
    aspect-ratio: 1/1;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(2px);

}

.request-loader:hover {
    color: var(--primary);
    background: var(--accent-color);
}

.request-loader::after,
.request-loader::before {
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    color: var(--text-color);
    border: 4px solid currentColor;
    border-radius: 50%;
    animation-name: ripple;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);
    z-index: 0;
}

.request-loader::after {
    animation-delay: 0.5s;
    animation-duration: 3s;
}

.request-loader::before {
    animation-delay: 0.2s;
    animation-duration: 3s;
}


/* ---------------------------- */
/* card Setting       */
/* ---------------------------- */
.card {
    border: none;
    border-radius: 10px;
    transition: all 0.5s;
    background-color: var(--primary);
}

.card-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    transition: all 0.5s;
}

.card-accent {
    color: var(--text-color);
    position: relative;
    border: 1px solid var(--accent-color-5);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    z-index: 1111;
    overflow: hidden;
    padding: 30px;
    height: 100%;
}

.card-accent p {
    color: var(--text-color-2);
}

.card-accent:hover {
    color: var(--primary);
}

.card-accent:hover p {
    color: var(--primary);
}

.card-accent svg {
    color: var(--accent-color);
}

.card-accent:hover svg {
    color: var(--primary);
}

.card-accent span {
    color: var(--accent-color-4);
}

.card-accent:hover span {
    color: var(--primary);
}

.card-accent .grey-hover {
    color: var(--accent-color-4);
}

.card-accent:hover .grey-hover {
    color: var(--primary);
}

.card-accent .btn-accent {
    background: var(--background-color);
    backdrop-filter: blur(17.5px);
    border-top: 1px solid var(--text-color);
    border-radius: 20px;
}

.card-accent:hover .btn-accent {
    background: var(--text-color);
    border-top: 1px solid transparent;
}

.card-accent .social-item {
    height: 24px;
    width: 24px;
    font-size: 12px;
    color: var(--primary);
    background:linear-gradient(78.12deg, #fffeda 0.32%, #e1bf16 99.52%);

}

.card-accent:hover .social-item {
    color: var(--accent-color);
    background: var(--primary);
}

.card-accent .btn-accent span,
.card-accent h6 {
    color: var(--text-color);
}

.card-accent:hover .btn-accent span,
.card-accent:hover h6 {
    color: var(--primary);
}

.card-accent h5 {
    background:linear-gradient(78.12deg, #fffeda 0.32%, #e1bf16 99.52%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-accent:hover h5 {
    background: var(--primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    z-index: 2;
    background: var(--primary);
    backdrop-filter: blur(24px);
    border-radius: 20px;
    overflow: hidden;
    outline: transparent;
    transition: all 0.5s;
}

.bg:hover {
    background: var(--accent-color-3);
}

.card-accent:hover .bg {
    background: var(--accent-color-3);
}

.blob.price {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: var(--accent-color-3);
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 8s infinite ease;
}

.blob {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: var(--accent-color-3);
    opacity: 1;
    filter: blur(12px);
    animation: blob-bounce 8s infinite ease;
}

@keyframes blob-bounce {
    0% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }

    25% {
        transform: translate(-100%, -100%) translate3d(100%, 0, 0);
    }

    50% {
        transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
    }

    75% {
        transform: translate(-100%, -100%) translate3d(0, 100%, 0);
    }

    100% {
        transform: translate(-100%, -100%) translate3d(0, 0, 0);
    }
}

.card-blog h4 {
    color: var(--text-color);
}

.card-blog:hover h4 {
    color: var(--accent-color);
}

.card-blog h6 {
    color: var(--text-color);
}

.card-blog:hover h6 {
    color: var(--accent-color);
}

.card-service {
    color: var(--text-color);
    border-radius: 20px;
    border: 1px solid var(--accent-color-5);
    padding: 30px 30px;
    background: rgba(4, 4, 4, 0.35);
    backdrop-filter: blur(2.4px);
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: space-between;
    height: 100%;
    transition: all 0.5s;
}

.card-service:hover .btn-accent-underline {
    background: linear-gradient(78.12deg, #dd5555 0.32%, #DFF494 99.52%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--accent-color);
}

.card-service .info {
    padding: 6px 12px;
    color: var(--text-color);
    border-radius: 10px;
    border: 1px solid var(--accent-color-5);
}

.card-service:hover .info {
    border: 1px solid var(--accent-color);
    background:linear-gradient(78.12deg, #fffeda 0.32%, #e1bf16 99.52%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.card-service:hover {
    color: var(--text-color);
    border: 1px solid var(--accent-color);
}

.card-service.class {
    gap: 0;
    overflow: hidden;
}

.card-service.class:hover {
    gap: 50px;
    height: 100%;
}

.card-service.class p,
.card-service.class .btn-accent-underline {
    transform: scaleY(0);
    transition: all 0.5s;
    transform-origin: top;
    max-height: 0;
    display: none;
}

.card-service.class:hover p,
.card-service.class:hover .btn-accent-underline {
    transform: scaleY(1);
    max-height: 300px;
    display: block;
}

.background-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.card:hover {
    transform: translateY(-5px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.card-testimonial {
    border: none;
    border-radius: 20px;
    transition: all 0.5s;
    background-color: var(--accent-color-3);

}

.card .icon-box.bg-accent-color {
    background-color: var(--accent-color);
    color: var(--accent-color);
}

.card .icon-box.accent-color-2 {
    color: var(--accent-color-2);
    font-size: 4rem;
}

.card:hover .icon-box.accent-color-2 {
    color: var(--accent-color-2);
}

.card-testimonial:hover {
    transform: translateY(-20px);
    box-shadow: 0px 0px 0px 2px var(--accent-color);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.card.card-pricing {
    color: var(--primary);
    background-color: var(--accent-color-6);
    border-radius: 40px;

}

.card.card-pricing:hover h3 {
    color: var(--accent-color);
}

.card.card-pricing p {
    color: var(--primary);
}

.card.card-pricing:hover {
    background-color: var(--accent-color);
    transform: scale(1.04);
}

.card.card-pricing:hover::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    right: -14px;
    bottom: -14px;
    border-radius: 45px;
    border: 2px solid var(--text-color);
    /* Border luar */
    z-index: -1;
}

.card.card-pricing:hover::after {
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    right: -7px;
    bottom: -7px;
    border-radius: 45px;
    border: 2px solid var(--accent-color);
    /* Border luar */
    z-index: -1;
}

.card-pricing-middle {
    transform: scale(1);
    flex: 1.00;
    color: white;
}

.card.card-pricing:hover .btn-accent-outline {
    background-color: var(--text-color);
    color: var(--primary);
}

.card.card-pricing .btn-accent-outline i {
    color: var(--text-color);
}

.card.card-pricing:hover .btn-accent-outline i {
    color: var(--primary);
}

.card:hover .icon-box.bg-accent-color {
    background-color: var(--accent-color);
    color: var(--accent-color-2);

}

.card.card-outline-hover {
    box-shadow: 0 7px 15px 0 rgba(0, 0, 0, .13), 0 1px 4px 0 rgba(0, 0, 0, .11);
    border: 1px solid var(--accent-color);
}

.card.blog {
    background-color: var(--background-color);
}

.card.blog:hover {
    border: solid 1px var(--accent-color-2);
    border-radius: 10px;
}


.card.card-outline-hover:hover .btn-accent {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.card-overlay {
    background-color: transparent;
    height: 100%;
}

.card-overlay:hover .card-image {
    border: 1px solid var(--accent-color);
    transition: all 0.5s;
}

.card-overlay .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.5s;
    padding: 0;
}

.card-overlay:hover .card-body {
    transform: scaleX(1);
    opacity: 1;
}

.card-overlay .card-footer h4 {
    color: var(--text-color);
}

.card-overlay:hover .card-footer h4 {
    color: var(--accent-color);
}

.card-overlay .card-footer span {
    color: var(--accent-color-4);
}

.card:hover .icon-box.bg-accent-color {
    background-color: white;
    color: var(--accent-color);
}

.card:hover p {
    transition: all 0.5s;
}

.card.with-border-bottom {
    border-bottom: 5px solid var(--accent-color) !important;
}

.card-about {
    background-color: var(--background-color);
    padding: 3rem;
    transition: all 0.8s;
}


.card-about:hover p {
    color: var(--primary);
}

.card-about:hover .icon-box-2 {
    background-color: var(--primary);
    color: var(--accent-color-2);
}

.card-about:hover {
    background-color: var(--accent-color-2);
    margin-top: -5rem;
    color: var(--primary);
    height: calc(100% + 5rem);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.activities-container {
    border-radius: 20px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--primary);
}

.activities-container p,
.activities-container .read-more {
    color: var(--primary);
}

.activities-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    transition: transform 0.3s ease;
    z-index: -1;
}

.activities-container:hover::after {
    transform: rotate(3deg);
}

.activities-container.accent {
    background-color: var(--accent-color-6);
}

.activities-container.accent::after {
    border: 2px solid var(--accent-color-13);
}

.activities-container.accent:hover,
.activities-container.accent:hover p,
.activities-container.accent:hover .read-more {
    color: var(--accent-color-13);
}

.activities-container.accent2 {
    background-color: var(--accent-color-3);
}

.activities-container.accent2::after {
    border: 2px solid var(--accent-color);
}

.activities-container.accent2:hover,
.activities-container.accent2:hover p,
.activities-container.accent2:hover .read-more {
    color: var(--accent-color);
}

.activities-container.accent3 {
    background-color: var(--accent-color-2);
}

.activities-container.accent3::after {
    border: 2px solid var(--accent-color-14);
}

.activities-container.accent3:hover,
.activities-container.accent3:hover p,
.activities-container.accent3:hover .read-more {
    color: var(--accent-color-14);
}

.activities-container.accent4 {
    background-color: var(--accent-color-9);
}

.activities-container.accent4::after {
    border: 2px solid var(--accent-color-15);
}

.activities-container.accent4:hover,
.activities-container.accent4:hover p,
.activities-container.accent4:hover .read-more {
    color: var(--accent-color-15);
}

.activities-container.accent5 {
    background-color: var(--accent-color-8);
}

.activities-container.accent5::after {
    border: 2px solid var(--accent-color-16);
}

.activities-container.accent5:hover,
.activities-container.accent5:hover p,
.activities-container.accent5:hover .read-more {
    color: var(--accent-color-16);
}

.activities-container.accent6 {
    background-color: var(--accent-color-11);
}

.activities-container.accent6::after {
    border: 2px solid var(--accent-color-17);
}

.activities-container.accent6:hover,
.activities-container.accent6:hover p,
.activities-container.accent6:hover .read-more {
    color: var(--accent-color-17);
}

.testimonial-container {
    background-color: var(--background-color);
    padding: 40px;
    border-radius: 30px;
    color: var(--text-color-2);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    gap: 0.5rem;
    height: 370px;
    position: relative;
}

.testimonial-container:hover {
    height: 370px;
}

.testimonial-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 32px;
    transition: transform 0.3s ease;
    z-index: -1;
    border: 2px solid var(--accent-color);
}

.testimonial-container:hover::after {
    transform: rotate(2deg);
}

.services-container {
    background-color: transparent;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
}

.features-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.feature-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--accent-color);
    color: var(--primary);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease;
}

.feature-box-middle {
    transform: scaleY(1.15) scaleX(1.05);
}

.feature-box-middle h3,
.feature-box-middle p {
    position: relative;
    transform: none;
    will-change: contents;
}

/* Class Cards */
.class-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    flex-wrap: wrap;
    align-items: center;
}

.class-course {
    display: none;
}

.class-course.active {
    display: block;
}

.class-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 2rem;
    color: var(--accent-color);
    background-color: var(--background-color);
    align-items: center;
    height: 100%;
    padding: 1.5rem;
    transition: all 0.5s;
}

.class-card:hover {
    background-color: var(--accent-color-7);
    color: var(--accent-color-2);
}

.class-card:hover .icon-box {
    background-color: var(--accent-color-2);
    border: 1px solid var(--accent-color-2);
    color: var(--primary);

}

.class-card:hover .custom-border {
    background-color: var(--accent-color-7);
    border-color: var(--accent-color-7);
}

.class-info {
    color: var(--primary);
    margin: 20px;
    font-family: var(--font-2);
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.class-speakers {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.class-price {
    font-size: 1.2em;
    color: var(--primary);
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    width: max-content;
}

.class-link {
    color: #ff3b3b;
    font-weight: bold;
    margin-top: 10px;
    text-align: left;
    display: inline-block;
}

.class-duration {
    display: none;
}

.class-duration.active {
    display: block;
}

/* Tab Navigation */
.tab-container {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.background-container {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.tabs {
    display: flex;
    justify-content: space-around;

}

.tab {
    text-align: center;
    cursor: pointer;
    color: var(--accent-color);
    transition: background 0.3s ease-in-out;
}

.tab.active {
    color: var(--primary);
    padding: 8px 10px;
    background-color: var(--accent-color);
    border-radius: 30px;
}

.tab .title-tab {
    font-size: 32px;
    font-weight: bold;
    padding: 30px;
}

.tab.active .title-tab {
    background-color: var(--primary);
}

.content {
    display: none;
}

.content.active {
    display: block;
}

.tab .content {
    display: none;
    position: absolute;
    bottom: 10rem;
    margin-left: -4rem;
    max-width: 500px;
    padding: 40px;
    text-align: left;
    background: rgba(35, 31, 32, 0.3);
    backdrop-filter: blur(17.5px);
    /* Sembunyikan semua konten */
}

.tab.active .content {
    display: block;
    /* Tampilkan konten yang aktif */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 kolom */
    gap: 0;
    /* Jarak antar elemen 0 untuk mengatur garis */
    position: relative;
}

.grid-item-1 {
    border-right: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kanan */
    border-bottom: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal bawah */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-2 {
    border-right: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kanan */
    border-bottom: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal bawah */
    border-left: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kiri */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-3 {
    border-bottom: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal bawah */
    border-left: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kiri */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-4 {
    border-right: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kanan */
    border-top: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal atas */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-5 {
    border-right: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kanan */
    border-left: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kiri */
    border-top: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal atas */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-6 {
    border-left: 1px solid rgba(255, 255, 255, 0.61);
    /* Garis vertikal kiri */
    border-top: 1px solid rgba(255, 255, 255, 0.61);
    /* Garis horizontal atas */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

/* ---------------------------- */
/* Progress and Rating       */
/* ---------------------------- */
.r-progress {
    --value: 17;
    --progress-color: var(--text-color);
    --secondary-progress-color: var(--accent-color-2);
    --animation-duration: 2000;
}

.r-progress-bar {
    position: relative;
    height: 8px;
    background-color: var(--secondary-progress-color);
    display: flex;
    border-radius: 3px;
    /* overflow: hidden; */
}

.r-progress-bar .progress-value {
    height: 100%;
    width: calc(var(--progress) * 1%);
    background-color: var(--progress-color);
    position: relative;
    border-radius: 3px;
    animation: load;
    animation-fill-mode: forwards;
    animation-duration: calc(var(--animation-duration) * 1ms);
    animation-timing-function: linear;
    animation-delay: 500ms;
    color: black;
}

.r-progress-bar.percentage-label::after {
    counter-reset: percentage var(--progress);
    content: counter(percentage) '%';
    display: block;
    position: absolute;
    left: calc((var(--progress) * 1%));
    animation: load;
    animation-fill-mode: forwards;
    animation-duration: calc(var(--animation-duration) * 1ms);
    animation-timing-function: linear;
    animation-delay: 500ms;
    font-size: 18px;
    line-height: 1.2;
    /* font-weight: 700; */
    font-family: var(--font-1);
    bottom: calc(100% + 0.5rem);
}

.rating {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

.rating li {
    color: #f1c644;
}

.rating li.inactive {
    color: #d9d9d9;
}

.glass-effect {
    background: rgba(4, 4, 4, 0.70);
    backdrop-filter: blur(2.4px);
}