@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
    --color--dark-primary: #090909;
    --font-family--font-secondary: "Space Grotesk", sans-serif;
    --color--white-50: #ffffff80;
    --typography--font-size-16px: 16px;
    --font-weight--weight-400: 400;
    --font-family--font-promary: Syne, sans-serif;
    --color--white: white;
    --typography--font-size-100px: 100px;
    --font-weight--weight-600: 600;
    --typography--font-size-94px: 94px;
    --font-weight--weight-500: 500;
    --typography--font-size-60px: 60px;
    --font-weight--weight-700: 700;
    --typography--font-size-48px: 48px;
    --typography--font-size-40px: 40px;
    --typography--font-size-32px: 32px;
    --color--white-60: #fff9;
    --typography--font-size-18px: 18px;
    --typography--font-size-20px: 20px;
    --color--white-80: #fffc;
    --typography--font-size-14px: 14px;
    --typography--font-size-24px: 24px;
    --speacing--space-140px: 140px;
    --speacing--space-100px: 100px;
    --speacing--space-40px: 40px;
    --speacing--space-32px: 32px;
    --color--transparent: #0000;
    --color--primary: #e3d327;
    --color--white-7: #ffffff12;
    --color--white-20: #fff3;
    --redius--redius-50px: 50px;
    --color--white-70: #ffffffb3;
    --color--white-45: #ffffff73;
    --speacing--space-30px: 30px;
    --speacing--space-80px: 80px;
    --redius--redius-32px: 32px;
    --speacing--space-16px: 16px;
    --speacing--space-10px: 10px;
    --color--dark-secondary: #141414;
    --typography--font-size-80px: 80px;
    --speacing--space-60px: 60px;
    --speacing--space-24px: 24px;
    --speacing--space-48px: 48px;
    --redius--redius-12px: 12px;
    --redius--redius-16px: 16px;
    --speacing--space-20px: 20px;
    --redius--redius-50: 50%;
    --speacing--space-72px: 72px;
    --redius--redius-20px: 20px;
    --redius--redius-8px: 8px;
    --typography--font-size-28px: 28px;
    --typography--font-size-72px: 72px;
    --speacing--space-120px: 120px;
    --speacing--space-18px: 18px;
    --redius--redius-24px: 24px;
    --redius--redius-4px: 4px;
}
.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/* ---- Process ---- */
.svc-process{margin:56px auto}
.svc-process .eyebrow{letter-spacing:.18em;color:#9fb3c8;margin-bottom:6px}
.svc-process h2{font-size:clamp(24px,3.2vw,34px);margin:0}
.svc-process h2 span{color:#8bd8ff}
.svc-process .sub{color:#b9c6d3;margin:6px 0 18px}

.proc-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(240px, 1fr);
    gap:14px; overflow-x:auto; padding:6px 2px 10px;
    scroll-snap-type:x mandatory;
}
.proc-track::-webkit-scrollbar{height:8px}
.proc-track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:999px}

.proc-card{
    scroll-snap-align:start;
    padding:16px; border-radius:16px;
    border:1px solid rgba(255,255,255,.14);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.proc-step{
    font-weight:800; font-size:12px; letter-spacing:.18em; color:#9fb3c8;
    display:inline-block; padding:4px 8px; border-radius:999px;
    border:1px solid rgba(255,255,255,.16); margin-bottom:8px;
}
.proc-card h3{margin:0 0 6px}
.proc-card p{color:#c9d6e2;margin:0 0 8px}
.proc-card ul{margin:0; padding-left:18px; color:#b7c5d2}
.proc-cta{display:flex; gap:12px; margin-top:16px}

/* ---- FAQ ---- */
.svc-faq{margin:46px auto 20px}
.svc-faq .eyebrow{letter-spacing:.18em;color:#9fb3c8;margin-bottom:6px}
.svc-faq h2{font-size:clamp(22px,3vw,32px);margin:0 0 10px}
.svc-faq h2 span{color:#8bd8ff}
.faq-list{display:grid; gap:10px}
.faq-item{
    border:1px solid rgba(255,255,255,.14); border-radius:14px;
    background:rgba(255,255,255,.03); padding:12px 14px;
}
.faq-item[open]{background:rgba(255,255,255,.05)}
.faq-item summary{
    cursor:pointer; font-weight:600; list-style:none; outline:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item p{color:#c9d6e2; margin:8px 0 0}

/* ---- Process başlık boyutunu sadece masaüstünde düşür ---- */
@media (min-width: 1024px) {
    .proc-card h3 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }
}

@media (min-width: 1440px) {
    .proc-card h3 {
        font-size: 24px !important;
    }
}

/* Ek güvenlik: çok geniş monitörlerde taşmayı önle */
@media (min-width: 1800px) {
    .proc-card h3 {
        font-size: 22px !important;
        max-width: 90% !important;
        white-space: normal !important;
    }
}

/* ===== Projects strip ===== */
.fd-projects { padding: 40px 0 24px; }
.fd-proj-head { margin-bottom: 20px; }
.fd-proj-title { font-size: clamp(24px, 3.2vw, 44px); font-weight: 800; letter-spacing:.2px; }
.fd-proj-title span { opacity:.75; }

/* Viewport: dış kapsayıcı – biz bunu kaydırıyoruz */
#fdProjectsViewport {
    position: relative;
    overflow: hidden;           /* otomatik kaydırmada gereken */
    padding-bottom: 20px;       /* progress için nefes */
}

/* Track: kartların dizildiği sıra */
#fdProjectsTrack {
    display: flex;
    align-items: stretch;
    gap: 18px;                  /* kart aralığı */
    width: max-content;         /* içerik kadar genişlik */
    will-change: transform;
    padding: 4px;               /* hafif iç boşluk */
}

/* Kart */
.fd-proj-card {
    list-style: none;
    flex: 0 0 auto;
    width: clamp(220px, 28vw, 520px);   /* MASAÜSTÜDE DAHA KÜÇÜK */
    border-radius: 22px;
    background: radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.06), rgba(255,255,255,.02));
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
}

/* Kart iç link */
.fd-proj-link {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
    text-decoration: none;
    color: #e8e8e8;
}

/* Görsel */
.fd-proj-link img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    pointer-events: none;
    user-select: none;
    filter: saturate(98%);
    transition: transform .35s ease, filter .35s ease;
}

/* Alt meta bar */
.fd-proj-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.2;
    background: linear-gradient(180deg, rgba(10,10,12,.55), rgba(10,10,12,.75));
    border-top: 1px solid rgba(255,255,255,.06);
}
.fd-proj-meta b {
    font-weight: 700;
    opacity:.85;
}

/* Hover (masaüstü) */
@media (hover:hover) {
    .fd-proj-link:hover img { transform: scale(1.03); filter: saturate(105%); }
}

/* Progress çizgisi (services ile aynı stil) */
#fdProjectsProgress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
#fdProjectsProgress > span {
    position: absolute;
    inset: 0 100% 0 0;                  /* soldan başla, sağa aç */
    background: linear-gradient(90deg, #6ee7f9, #a78bfa 60%, #f472b6);
    border-radius: 999px;
}

/* Tablet / mobil tuning */
@media (max-width: 991px) {
    #fdProjectsTrack { gap: 14px; }
    .fd-proj-card { width: clamp(210px, 70vw, 360px); border-radius: 18px; }
    .fd-proj-meta { font-size: 13px; padding: 9px 12px; }
}
@media (max-width: 600px) {
    .fd-proj-card { width: clamp(200px, 82vw, 310px); }
}

.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.hero-video {
    position: relative;
    width: 100%;
    height: 100vh; /* Masaüstünde tam ekran */
    overflow: hidden;
}

.hero-video img.hero-slider {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobilde biraz daha uzun olsun */
@media (max-width: 768px) {
    .hero-video {
        height: 120vh; /* aşağıya doğru uzatır */
    }
}

.service-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.service-card:hover .card-inner {
    transform: translateY(-4px);
    transition: all 0.3s ease;
}
.contact-submit-button[disabled],
.contact-submit-button.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    filter: saturate(.4);
}

/* Checkbox alanını vurgulama (hata anında) */
.contact-checkbox-field.shake {
    animation: fd-shake .4s linear;
}
@keyframes fd-shake {
    15% { transform: translateX(-4px); }
    30% { transform: translateX(4px); }
    45% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

/* Kutucuk işaretliyse gri “fake” tik dolsun */
.contact-checkbox-field.checked .contact-checkbox {
    background: #0a84ae;
    border-color: #0a84ae;
}
.contact-checkbox {
    transition: background .2s, border-color .2s;
}

.hero-overlay .hero-wrapper  {
    position: absolute;
    top: 50%;
    left: 7%;
    transform: translateY(-50%);
    z-index: 3;
    color: #fff;
    max-width: 820px;
    text-shadow: 0 4px 30px rgba(0,0,0,.45);
    padding: 0 1rem;
    font-family: "Inter","Helvetica Neue","SF Pro Display","Segoe UI",Arial,sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.services-section.fd{
    background: radial-gradient(1200px 600px at 50% -20%, #0e0f13 0%, #07080b 60%, #050607 100%);
    padding:96px 0 120px; color:#fff; overflow:hidden;
}
.services-track{
    display:flex; gap:32px; overflow-x:auto; scroll-snap-type:none; padding:12px 6px 28px;
}
.services-track::-webkit-scrollbar{display:none}

/* === KART === */
.service-card{
    --rx:72%; --ry:60%; --cx:110%; --cy:25%; /* yandan oval reveal */
    position:relative; flex:0 0 360px; min-height:360px;
    border-radius:28px; overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.service-card:hover{
    transform:translateY(-8px);
    border-color:rgba(255,255,255,.24);
    box-shadow:0 10px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* === YANDAN OVAL GÖRSEL === */
.card-media{
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    opacity:0;
    clip-path:ellipse(0% 0% at var(--cx) var(--cy)); /* başlangıçta küçük */
    transition:opacity .45s ease, clip-path .6s cubic-bezier(.22,.61,.36,1);
    filter:saturate(.9) brightness(.78);
}
.service-card:hover .card-media{
    opacity:.95;
    clip-path:ellipse(var(--rx) var(--ry) at var(--cx) var(--cy));
}

/* === İÇERİK === */
.card-inner{
    position:relative; z-index:2; height:100%;
    padding:36px 28px; display:flex; flex-direction:column; justify-content:flex-end;
    background:linear-gradient(180deg,rgba(0,0,0,0) 10%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.78) 100%);
}
.card-icon{
    position:absolute; top:24px; left:24px; width:56px; height:56px;
    border-radius:50%; display:grid; place-items:center; font-size:22px; color:#fff;
    background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.16),rgba(255,255,255,.08));
    border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(2px);
}
.card-title{font-size:26px;font-weight:700;margin:0 0 12px}
.card-desc{margin:0;color:#c9c9c9;line-height:1.6;font-size:16px}

/* === PROGRESS === */
.services-progress{position:relative;width:100%;height:4px;margin-top:22px;
    background:rgba(255,255,255,.06);border-radius:999px;overflow:hidden}
.services-progress>span{position:absolute;inset:0 100% 0 0;background:#fff;opacity:.28;
    border-radius:999px;transition:inset .2s linear}

/* === Responsive === */
@media(max-width:991px){
    .service-card{flex-basis:320px;min-height:320px;--cx:120%;--cy:30%;}
    .card-title{font-size:22px}
}


/* Üst başlık */
.hero-overlay .hero-wrapper .hero-subtitle {
    font-size: clamp(16px, 1.8vw, 20px);
    font-weight: 400;
    letter-spacing: 0.3px;
    margin: 0 0 12px 0;
    color: rgba(255,255,255,.95);
    text-transform: none; /* büyük harfi korur */
}

/* Layout */
.fd-duo { padding: 40px 0; }
.fd-grid.container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 24px;
}
@media (max-width: 1024px){
    .fd-grid.container { grid-template-columns: 1fr; }
}

/* Kartlar */
.fd-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    min-height: 613px;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.fd-card--dark {
    background: radial-gradient(120% 120% at 50% 0%, #151515 0%, #0b0b0b 55%, #050505 100%);
}
.fd-card--accent {
    background: linear-gradient(180deg, #0f1216 0%, #0b0d10 100%);
    border: 1px solid rgba(255,255,255,.06);
}
.brand-heading {
    text-align: center;
    margin-top: 20px;
}

.svc-hero-bg .glass{
    position:absolute; inset:auto 6% -14% auto;
    width:420px; height:260px; border-radius:28px; transform: rotate(-8deg);
    background:
            radial-gradient(60% 120% at 30% 20%, rgba(139,216,255,.28) 0%, rgba(139,216,255,0) 60%),
            radial-gradient(80% 140% at 80% 60%, rgba(168,112,255,.22) 0%, rgba(168,112,255,0) 60%),
            linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 20px 60px rgba(0,0,0,.35);
    overflow:hidden;               /* görsel camdan taşmasın */
}
.svc-hero-img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    opacity:.9; filter:saturate(1.02) contrast(1.02);
}
@media (max-width:768px){
    .svc-hero-bg .glass{ inset:auto 2% -18% auto; width:320px; height:200px; }
}

/* HERO */
.svc-hero{
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: radial-gradient(120% 120% at 50% 0%, #14171b 0%, #0b0d10 60%, #07090b 100%);
    padding: clamp(40px, 8vw, 120px) clamp(20px, 6vw, 80px);
    margin-bottom: 36px;
}
.svc-hero-bg .glow{ position:absolute; width:520px; height:520px; filter: blur(70px); border-radius:50%; opacity:.45; }
.svc-hero-bg .g1{ left:-8%; top:-10%; background: #7fd3ff3d; }
.svc-hero-bg .g2{ right:-6%; bottom:-18%; background: #a97bff33; }
.svc-hero-bg .glass{
    position:absolute; inset:auto 6% -14% auto;
    width:420px; height:260px; border-radius:28px; transform: rotate(-8deg);
    background:
            radial-gradient(60% 120% at 30% 20%, rgba(139,216,255,.28) 0%, rgba(139,216,255,0) 60%),
            radial-gradient(80% 140% at 80% 60%, rgba(168,112,255,.22) 0%, rgba(168,112,255,0) 60%),
            linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 20px 60px rgba(0,0,0,.35);
}

.svc-hero-inner{ position: relative; z-index: 2; text-align: center; }
.svc-eyebrow{ display:inline-block; font-size:12px; letter-spacing:.18em; color:#9fb3c8; padding:6px 10px; border:1px solid rgba(255,255,255,.12); border-radius:999px; margin-bottom:14px; background: rgba(255,255,255,.05);}
.svc-title{ font-size: clamp(28px, 5vw, 56px); color:#fff; margin: 0 0 10px; }
.svc-sub{ color:#c7d3df; max-width: 72ch; margin: 0 auto 18px; }

.svc-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.chip{
    padding:10px 14px; border-radius:999px; font-weight:600; color:#dbe7f3;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.04);
    text-decoration:none;
}
.chip.is-active{ background:#8bd8ff; color:#04121a; border-color: transparent; }

/* BODY */
.svc-body{ padding: clamp(28px, 5vw, 64px) 0; }
.svc-grid{
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap:24px;
}
@media (max-width:1024px){ .svc-grid{ grid-template-columns:1fr; } }

.svc-card{
    background: linear-gradient(180deg, #0f1216 0%, #0b0d10 100%);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 24px;
    padding: clamp(18px, 3.6vw, 28px);
    color:#e8eef6;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.svc-card h3{ margin:0 0 8px; font-size: clamp(22px, 3.2vw, 28px); }
.svc-card p{ color:#b9c6d3; margin-bottom:12px; }
.svc-list{ margin:0 0 16px 18px; }
.svc-list li{ margin:6px 0; }

.svc-cta{ display:flex; gap:12px; margin-top:6px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; font-weight:600; text-decoration:none; border:1px solid transparent; }
.btn-primary{ background:#8bd8ff; color:#04121a; }
.btn-ghost{ color:#cfe7f6; border-color: rgba(255,255,255,.22); }

/* yan kartlar */
.svc-cards{ display:grid; gap:14px; }
.svc-mini{
    border-radius:18px; padding:16px; background: rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(4px);
}
.svc-mini .mini-head{ display:flex; gap:10px; align-items:center; margin-bottom:8px; color:#eaf3ff; font-weight:600; }
.svc-mini img{ width:26px; height:26px; object-fit:contain; background:#fff; border-radius:50%; padding:4px; }

/* mobil hero daha ferah */
@media (max-width:768px){
    .svc-hero{ padding: 92px 16px 70px; }
    .svc-hero-bg .glass{ inset:auto 2% -18% auto; width:320px; height:200px; }
}

.brand-heading h3 {
    font-size: clamp(22px, 3vw, 28px);
    color: #fff;
    margin-bottom: 8px;
    font-weight: 600;
    letter-spacing: .02em;
}




.brand-heading p {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.5;
}

/* ------- Orbit (soldaki kart) ------- */
.brand-orbit-section {
    display:flex; align-items:center; justify-content:center;
    width:100%; height:100%;
    padding: 24px;
}
.brand-orbit {
    position: relative;
    width: min(100%, 700px);
    aspect-ratio: 1/1;
}

@media (max-width: 768px) {
    .brand-orbit-section {
        width: 100vw;           /* ekranı tamamen kapla */
        margin-left: 50%;       /* merkezde tut */
        transform: translateX(-50%);
        padding: 0;             /* kenar boşluklarını kaldır */
    }

    .brand-orbit {
        width: 100vw;            /* genişliği %95 yap */
        max-width: none;
    }

    .orbit-1 { width: 60%; height: 60%; }
    .orbit-2 { width: 80%; height: 80%; }
    .orbit-3 { width: 100%; height: 100%; }

    .brand-icon {
        width: 44px;
        height: 44px;
        padding: 8px;
    }
}

.orbit {
    position: absolute;
    top: 50%; left: 50%;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 40s linear infinite;
}
.orbit-1 { width: 42%; height: 42%; animation-duration: 35s; }
.orbit-2 { width: 66%; height: 66%; animation-duration: 50s; animation-direction: reverse; }
.orbit-3 { width: 88%; height: 88%; animation-duration: 60s; }

.brand-icon{
    position:absolute; width:56px; height:56px;
    object-fit: contain; background:#fff; border-radius:50%;
    padding:10px; box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 10px 25px rgba(0,0,0,.35);
    transition: transform .25s ease, box-shadow .25s ease;
}
.brand-icon:hover{ transform: scale(1.06); box-shadow:0 0 0 4px rgba(255,255,255,.6), 0 12px 28px rgba(0,0,0,.45); }

/* simetrik yerleşimler */
.orbit img:nth-child(1){ top:0; left:50%; transform:translate(-50%,-50%); }
.orbit img:nth-child(2){ top:50%; right:0; transform:translate(50%,-50%); }
.orbit img:nth-child(3){ bottom:0; left:50%; transform:translate(-50%,50%); }
.orbit img:nth-child(4){ top:50%; left:0; transform:translate(-50%,-50%); }
/* 3. halka 3 ikon */
.orbit-3 img:nth-child(1){ top:10%; left:80%; transform:translate(-50%,-50%); }
.orbit-3 img:nth-child(2){ top:78%; left:24%; transform:translate(-50%,-50%); }
.orbit-3 img:nth-child(3){ top:90%; left:72%; transform:translate(-50%,-50%); }

@keyframes rotate{
    from{ transform: translate(-50%, -50%) rotate(0deg); }
    to  { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (max-width: 768px){
    .brand-icon{ width:44px; height:44px; padding:8px; }
}

/* ------- Sağ kart (Fortis) ------- */
.fd-card-body{
    position:relative; height:100%;
    display:flex; flex-direction:column; justify-content:center;
    padding: clamp(24px, 3.6vw, 40px);
    color:#e8eef6;
}
.fd-badge{
    display:inline-block;
    font-size:12px; letter-spacing: .18em;
    color:#9fb3c8; background: rgba(255,255,255,.06);
    padding:6px 10px; border-radius:999px; margin-bottom:16px;
    border:1px solid rgba(255,255,255,.12);
}
.fd-title{

    line-height:1.18; margin: 0 0 10px 0;
}
.fd-title span{ color:#8bd8ff; }
.fd-desc{
    color:#b9c6d3; max-width: 46ch; margin: 0 0 18px 0;
}
.fd-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 20px; }
.chip{
    font-size:13px; color:#dbe7f3;
    padding:8px 12px; border-radius:999px;
    background: rgba(139,216,255,.12);
    border:1px solid rgba(139,216,255,.35);
}
.fd-cta{ display:flex; gap:12px; margin-top:6px; }
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:600;
    border:1px solid transparent;
}
.btn-primary{ background:#8bd8ff; color:#04121a; }
.btn-primary:hover{ filter: brightness(1.06); }
.btn-ghost{ color:#cfe7f6; border-color: rgba(255,255,255,.22); background: transparent; }
.btn-ghost:hover{ background: rgba(255,255,255,.06); }

/* Dekoratif görsel alanı */
.fd-visual{
    position:absolute; right: -6%; bottom:-10%;
    width: 320px; height: 220px; pointer-events:none;
    filter: blur(0.2px);
}
.fd-glass{
    width:100%; height:100%; border-radius:24px;
    background:
            radial-gradient(60% 120% at 30% 20%, rgba(139,216,255,.35) 0%, rgba(139,216,255,0) 60%),
            radial-gradient(80% 140% at 80% 60%, rgba(168,112,255,.28) 0%, rgba(168,112,255,0) 60%),
            linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 20px 60px rgba(0,0,0,.35);
    transform: rotate(-8deg);
}

@media (max-width: 1024px){
    .fd-visual{ position:relative; right:auto; bottom:auto; margin-top:18px; }
}


/* Ana başlık */
.hero-overlay .hero-wrapper {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.12;
    font-weight: 500;
    letter-spacing: -0.3px;
    margin: 0;
    padding: 0;
    transition: opacity .6s ease, transform .6s ease;
    text-transform: none; /* büyük/küçük harfleri HTML’den al */
    word-break: keep-all;
}

/* Daktilo imleci */
.hero-overlay .hero-wrapper .caret {
    display: inline-block;
    width: 4px;
    height: 1em;
    margin-left: 4px;
    background: #4cc9f0;
    animation: heroCaretBlink 1s steps(2,start) infinite;
}

@keyframes heroCaretBlink {
    0%,49% { opacity: 1; }
    50%,100% { opacity: 0; }
}

/* Responsive */
@media (max-width: 992px){
    .hero-overlay .hero-wrapper .hero-text-content { left: 6%; max-width: 88%; }
    .hero-overlay .hero-wrapper  { font-size: clamp(30px, 6vw, 50px); line-height: 1.15; }
    .hero-overlay .hero-wrapper .hero-subtitle { font-size: 15px; }
}
@media (max-width: 768px){
    .hero-overlay .hero-wrapper .hero-text-content { left: 5%; max-width: 90%; }
    .hero-overlay .hero-wrapper  { font-size: clamp(28px, 7vw, 46px); letter-spacing: -0.2px; }
}
@media (max-width: 480px){
    .hero-overlay .hero-wrapper  { font-size: clamp(24px, 9vw, 38px); line-height: 1.18; }
    .hero-overlay .hero-wrapper .hero-subtitle { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce){
    .hero-overlay .hero-wrapper  { transition: none !important; }
    .hero-overlay .hero-wrapper .caret { animation: none !important; }
}
.x-hero, .x-hero *{
    font-family: Inter,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;
    text-transform:none!important;
    box-sizing:border-box;
}
.x-hero{
    position:relative;
    width:100%;
    height:90vh;
    max-height:900px;
    overflow:hidden;
    color:#fff;
}
/* 1) Videoyu aşağı kaydır – çizgisiz */
.x-bg{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    object-position:center top;
    transform:scale(1.06) translateY(380px); /* margin-top yerine */
    /* Safari + tüm tarayıcılar için üstte yumuşak maske */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
}

/* 2) (Fallback + daha yumuşak görünüm) üstten gradyan örtü */
.x-overlay::before{
    content:"";
    position:absolute; left:0; right:0; top:0;
    height:220px;                 /* gerekirse 160–280px arası oynat */
    pointer-events:none;
    background:linear-gradient(to bottom, #0b0e13 0%, rgba(11,14,19,0) 100%);
    z-index:2;
}



.x-overlay{
    position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(5,8,15,.65) 0%,rgba(5,8,15,.35) 40%,rgba(5,8,15,.75) 100%);
}
.x-wrap{
    position:relative; z-index:1;
    height:100%;
    width:min(1280px,92%);
    margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    gap:clamp(20px,5vw,64px);
}
.x-left{
    flex:0 0 46%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:250px; /* yüksekliği sabit tut */
}
.x-over{
    margin:0 0 .75rem 0;
    font-size:clamp(13px,1.2vw,18px);
    color:rgba(255,255,255,.82);
}
.x-title{
    margin:0;
    font-weight:700;
    line-height:1.1;
    font-size:clamp(30px,3vw,70px);
    text-shadow:0 16px 40px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.35);
    min-height:5em; /* yükseklik sabit — yazı değişse bile oynamaz */
}
.x-right{
    flex:0 0 54%;
    display:grid;
    place-items:center;
}
.x-phone-wrap{
    right : 186px !important ;  
    position:relative;
    width:clamp(520px,81vw,860px);
    height:auto;
    display:flex;
    justify-content:center;
    align-items:center;
}
.x-phone {
    width:100%;
    height:auto;
    filter:drop-shadow(0 36px 72px rgba(0,0,0,.55));
    transform:translateY(0) scale(.9) rotate(-6deg);
    opacity:0;
    /* giriş + hemen ritme geçiş */
    animation:
            xPhoneIn 1.3s cubic-bezier(.25,.9,.25,1) .2s forwards;
          /* 1.5s = xPhoneIn bitince devreye girer */
}

/* Idle: biraz daha belirgin ritmik hareket */
@keyframes xPhoneIn {
    0%   { transform: translateY(40px) scale(.8) rotate(-10deg); opacity: 0; }
    60%  { transform: translateY(-10px) scale(.92) rotate(-5deg); opacity: 1; }
    100% { transform: translateY(0) scale(.9) rotate(-6deg); opacity: 1; }
}

/* === HEMEN ARDINDAN RİTME GİRSİN === */
@keyframes xPhoneIdle {
    0%   { transform: translateY(0) scale(.9) rotate(-6deg); filter:brightness(1); }
    15%  { transform: translateY(-18px) scale(.92) rotate(-5.1deg); filter:brightness(1.04); }
    35%  { transform: translateY(14px)  scale(.88) rotate(-6.9deg); filter:brightness(.96); }
    55%  { transform: translateY(-10px) scale(.91) rotate(-5.4deg); filter:brightness(1.03); }
    75%  { transform: translateY(10px)  scale(.89) rotate(-6.7deg); filter:brightness(.97); }
    100% { transform: translateY(0) scale(.9) rotate(-6deg); filter:brightness(1); }
}
/* === GİRİŞ OVERLAY (FD PRE) – ESKİ TASARIMLA AYNI === */

/* Sayfa yüklenirken scroll’u kilitle */
.fd-lock { overflow: hidden; }

/* Tüm ekranı kaplayan koyu – vignette + radial glow */
#fd-pre{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background:
            radial-gradient( circle at 50% 55%,
            rgba(40,48,70,.55) 0%,
            rgba(12,14,20,.92) 42%,
            #05070d 70%) ,
            #000;
    transition: opacity .6s ease, visibility .6s ease;
}

/* Kapanış */
#fd-pre.fd-hide{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* İç merkezleme */
#fd-pre .fd-core{
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}

/* Logo alanı: mobilde küçük, masaüstünde büyük */
#fd-pre .fd-logo-wrap{
    position: relative;
    width: clamp(160px, 42vw, 420px);
    aspect-ratio: 7/2;
}

/* Logo animasyonu (hafif pop-in) */
#fd-pre .fd-logo{
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.6));
    transform: translateZ(0);
    animation: fd-pop .9s cubic-bezier(.2,.8,.25,1) both;
}

/* Arkadaki mavi-beyaz yumuşak aura */
#fd-pre .fd-bgflow{
    position: absolute;
    inset: -22% -16%;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(40px) saturate(120%);
    opacity: .75;
    background:
            radial-gradient(circle at 50% 50%, rgba(95,125,255,.28), rgba(95,125,255,0) 60%),
            radial-gradient(circle at 70% 30%, rgba(255,255,255,.06), transparent 45%);
    animation: fd-breathe 3.6s ease-in-out infinite;
}

/* Kapanışta logonun hafif yukarı süzülmesi */
#fd-pre.fd-hide .fd-logo{
    animation: fd-out .5s ease forwards;
}

/* Animasyonlar */
@keyframes fd-pop{
    0%   { opacity: 0; transform: translateY(12px) scale(.94); }
    60%  { opacity: 1; transform: translateY(0) scale(1.02); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes fd-breathe{
    0%,100% { transform: scale(.95); opacity: .6; }
    50%     { transform: scale(1.08); opacity: .9; }
}
@keyframes fd-out{
    to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

/* Erişilebilirlik: hareketi azalt tercihinde animasyonları kapat */
@media (prefers-reduced-motion: reduce){
    #fd-pre, #fd-pre * { animation: none !important; transition: none !important; }
}


/* === BLOG DETAY TİPOGRAFİ / DÜZEN (FORCE OVERRIDE) === */
.blog-details-section {
    padding-top: 32px !important;
    padding-bottom: 80px !important;
}

.blog-details-wrapper {
    gap: 24px !important;
}

.blog-details-content-wrap {
    max-width: 820px !important;
    margin: 0 auto !important;
}

.blog-details-image-wrap {
    max-width: 1080px !important;
    margin: 0 auto 28px !important;
}
.blog-details-image-wrap img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 16px !important;
}

.blog-info {
    gap: 18px !important;
    align-items: center !important;
}
.blog-info-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #aab1bb !important;
    font-size: 14px !important;
}
.blog-info-line {
    width: 1px !important;
    height: 14px !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

.inner-hero-title {
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
    margin: 6px 0 0 !important;
    font-size: clamp(32px, 4.2vw, 56px) !important;
}

.blog-details-title {
    font-size: clamp(26px, 3.2vw, 40px) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.01em !important;
    margin: 6px 0 14px !important;
}

.blog-richtext {
    color: #e6edf5 !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    letter-spacing: 0 !important;
}

.blog-richtext p {
    margin: 0 0 18px !important;
    color: #cfd6df !important;
}
.blog-richtext p + p {
    margin-top: 14px !important;
}

.blog-richtext h2 {
    font-size: clamp(26px, 3vw, 36px) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    margin: 40px 0 12px !important;
    color: #ffffff !important;
}

.blog-richtext h3 {
    font-size: clamp(20px, 2.4vw, 28px) !important;
    line-height: 1.3 !important;
    margin: 28px 0 10px !important;
    color: #ffffff !important;
}

.blog-richtext h4 {
    font-size: 20px !important;
    margin: 22px 0 8px !important;
    color: #e9eef6 !important;
}

.blog-richtext ul,
.blog-richtext ol {
    margin: 0 0 18px 0 !important;
    padding-left: 22px !important;
    color: #cfd6df !important;
}
.blog-richtext li {
    margin: 6px 0 !important;
}
.blog-richtext ol {
    list-style: decimal !important;
}
.blog-richtext ul {
    list-style: disc !important;
}

.blog-richtext blockquote {
    margin: 22px 0 !important;
    padding: 14px 18px !important;
    border-left: 3px solid #5ac8fa !important;
    background: rgba(255, 255, 255, 0.045) !important;
    border-radius: 10px !important;
    color: #dbe3ee !important;
}

.blog-richtext img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    display: block !important;
    margin: 18px auto !important;
}

.blog-richtext figure {
    margin: 22px 0 !important;
}
.blog-richtext figcaption {
    font-size: 14px !important;
    color: #aab1bb !important;
    text-align: center !important;
    margin-top: 8px !important;
}

.blog-richtext pre,
.blog-richtext code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
}
.blog-richtext pre {
    overflow: auto !important;
    padding: 14px 16px !important;
    margin: 18px 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    border-radius: 12px !important;
    color: #e9eef6 !important;
}
.blog-richtext code {
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    color: #9ae6b4 !important;
}
/* Numara ile başlayan satırlar için başlık stili */
.blog-richtext .num-h2{
    font-size: clamp(26px, 3.2vw, 40px) !important;
    line-height: 1.22 !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    margin: 36px 0 12px !important;
    color: #fff !important;
}


/* hareket hassasiyeti düşük cihazlar için yumuşat */


@media (prefers-reduced-motion: reduce){
    .x-phone{ animation: xPhoneIn 1.6s ease-out .4s forwards; }
}
/* ==== MOBİL ==== */
@media(max-width:768px){
    .x-hero{height:92svh;max-height:780px;}
    .x-wrap{
        flex-direction:column;
        text-align:center;
        justify-content:flex-start;
        align-items:center;
        padding-top:calc(env(safe-area-inset-top) + 10vh);
    }
    .x-left,.x-right{flex:0 0 auto;width:100%;}
    .x-title{font-size:clamp(20px,2.2vw,44px);line-height:1.18;min-height:4.5em;}
    .x-phone-wrap{
        left: 9px ;
        width:min(150vw,860px); /* eski 88vw idi — büyütüldü */
        margin-top: -146px;
    }
    .x-phone{
        margin-right: 220px;
        transform:rotate(-4deg) scale(1.1); /* telefon %10 daha büyük */
    }
}


.w-checkbox-input--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}
/* Kart/görsel */
.blog-item { display:flex; flex-direction:column; height:100%; }
.blog-image-wrap { border-radius:14px; overflow:hidden; position:relative; }
.blog-image { width:100%; height:260px; object-fit:cover; display:block; }

/* Meta rozeti üstte sabit */
.blog-meta { position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:10px; }
.blog-date { font-size:12px; line-height:1; }
.meta-line { width:14px; height:1px; background:currentColor; opacity:.4; }

/* Başlık/özet kısma (satır sayısı sınırı) */
.clamp-2 {
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}
.clamp-3 {
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Grid – desktop varsayılan: 3 sütun */
.blog-collection-list.grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:40px;
}

/* İçerik alanı büyüsün, link alta insin */
.blog-content-wrap { display:flex; flex-direction:column; gap:10px; flex:1; }
.blog-link { margin-top:auto; } /* kartın en altına */

/* Tablet (≤1024px): 2 sütun, daha kısa görsel */
@media (max-width:1024px) {
    .blog-collection-list.grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
    .blog-image { height:220px; }
}

/* Mobil (≤640px): 1 sütun, görsel 200px, boşluklar sıkı */
@media (max-width:640px) {
    .blog-collection-list.grid { grid-template-columns:1fr; gap:20px; }
    .blog-image { height:200px; }
    .blog-title { font-size:22px; }
    .blog-name { font-size:18px; line-height:1.3; }
    .blog-details { font-size:14px; line-height:1.55; }
}
.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}



body {
    background-color: var(--color--dark-primary);
    font-family: 'Manrope', sans-serif !important;
    color: var(--color--white-50);
    font-size: var(--typography--font-size-16px);
    line-height: 1.4em;
    font-weight: var(--font-weight--weight-400);

    --color--dark-primary: #090909;
    --font-family--font-secondary: "Space Grotesk", sans-serif;
    --color--white-50: #ffffff80;
    --typography--font-size-16px: 16px;
    --font-weight--weight-400: 400;
    --font-family--font-promary: Syne, sans-serif;
    --color--white: white;
    --typography--font-size-100px: 100px;
    --font-weight--weight-600: 600;
    --typography--font-size-94px: 94px;
    --font-weight--weight-500: 500;
    --typography--font-size-60px: 60px;
    --font-weight--weight-700: 700;
    --typography--font-size-48px: 48px;
    --typography--font-size-40px: 40px;
    --typography--font-size-32px: 32px;
    --color--white-60: #fff9;
    --typography--font-size-18px: 18px;
    --typography--font-size-20px: 20px;
    --color--white-80: #fffc;
    --typography--font-size-14px: 14px;
    --typography--font-size-24px: 24px;
    --speacing--space-140px: 140px;
    --speacing--space-100px: 100px;
    --speacing--space-40px: 40px;
    --speacing--space-32px: 32px;
    --color--transparent: #0000;
    --color--primary: #e3d327;
    --color--white-7: #ffffff12;
    --color--white-20: #fff3;
    --redius--redius-50px: 50px;
    --color--white-70: #ffffffb3;
    --color--white-45: #ffffff73;
    --speacing--space-30px: 30px;
    --speacing--space-80px: 80px;
    --redius--redius-32px: 32px;
    --speacing--space-16px: 16px;
    --speacing--space-10px: 10px;
    --color--dark-secondary: #141414;
    --typography--font-size-80px: 80px;
    --speacing--space-60px: 60px;
    --speacing--space-24px: 24px;
    --speacing--space-48px: 48px;
    --redius--redius-12px: 12px;
    --redius--redius-16px: 16px;
    --speacing--space-20px: 20px;
    --redius--redius-50: 50%;
    --speacing--space-72px: 72px;
    --redius--redius-20px: 20px;
    --redius--redius-8px: 8px;
    --typography--font-size-28px: 28px;
    --typography--font-size-72px: 72px;
    --speacing--space-120px: 120px;
    --speacing--space-18px: 18px;
    --redius--redius-24px: 24px;
    --redius--redius-4px: 4px;
}


h1 {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-100px);
  line-height: 1em;
  font-weight: var(--font-weight--weight-600);
  letter-spacing: 4.5px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}

h2 {

  color: var(--color--white);
  font-size: var(--typography--font-size-94px);
  line-height: 1em;
  font-weight: var(--font-weight--weight-500);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
}

/* ================================
   FORTIS CHAT & FAB — FULL CSS
   ================================ */

/* ---- Theme Variables ---- */
:root{
    --fortis-dark: #213a56;   /* koyu lacivert */
    --fortis-mid:  #2b4c6d;
    --fortis-light:#6aa8ca;   /* açık mavi */
    --fortis-glow: rgba(106,168,202,.55);
    --fortis-green:#27C36B;   /* online dot */
    --card-bg:     rgba(10,16,24,.82);
    --text-100:    #fff;
    --text-70:     rgba(255,255,255,.7);
    --text-75:     rgba(255,255,255,.75);
    --border:      rgba(255,255,255,.08);
}

/* ---- Base (scope only inside widget) ---- */
.fd-chat, .fd-float { font-family: inherit; line-height: 1.35; }

/* =========================================
   FLOATING ACTION BUTTON (Kalem)
   ========================================= */
.fd-float{
    position: fixed; right: 18px; bottom: 18px; z-index: 10000;
    width: 64px; height: 64px; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; color: var(--text-100);
    background: radial-gradient(120% 120% at 30% 30%, var(--fortis-light), var(--fortis-mid) 60%, var(--fortis-dark));
    box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 0 var(--fortis-glow);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    -webkit-tap-highlight-color: transparent;
}
.fd-float::after{
    content:""; position:absolute; inset:2px; border-radius:50%;
    box-shadow: inset 0 1px 6px rgba(255,255,255,.35); pointer-events:none;
}
.fd-float:hover   { transform: translateY(-2px); filter: saturate(1.06); }
.fd-float:active  { transform: translateY(0); }
.fd-float svg     { width: 26px; height: 26px; }

/* Animations */
@keyframes fortis-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }
@keyframes fortis-ring    { 0%{box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 0 var(--fortis-glow)}
    70%{box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 14px rgba(106,168,202,0)}
    100%{box-shadow:0 10px 24px rgba(0,0,0,.35),0 0 0 0 rgba(106,168,202,0)} }
@keyframes fortis-pencil  { 0%,100%{transform:rotate(0deg)} 30%{transform:rotate(-8deg)} 60%{transform:rotate(6deg)} }

.fd-float{ animation: fortis-breathe 2.8s ease-in-out infinite, fortis-ring 2.8s ease-out infinite; }
.fd-float svg{ animation: fortis-pencil 2.4s ease-in-out infinite; }

/* =========================================
   CHAT WIDGET
   ========================================= */
.fd-chat[aria-hidden="true"]{ display:none; }
.fd-chat{
    position: fixed; right: 18px; bottom: 98px; z-index: 9999;
}

/* Card */
.fd-chat-card{
    width: 340px; max-width: 86vw; color: var(--text-100);
    background: var(--card-bg); border-radius: 16px; overflow: hidden;
    box-shadow: 0 18px 48px rgba(0,0,0,.45); backdrop-filter: blur(10px);
}

/* Head */
.fd-chat-head{
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.fd-chat-title strong{ display:block; font-size: 18px; letter-spacing: .2px; }
.fd-chat-title span  { display:block; margin-top:4px; font-size:12px; color: var(--text-70); }

/* Close button */
.fd-chat-close{
    width: 28px; height: 28px; border: 0; border-radius: 8px; color: var(--text-100);
    background: rgba(255,255,255,.12); display:grid; place-items:center; line-height:1;
    cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.fd-chat-close:hover{ background: rgba(255,255,255,.2); transform: translateY(-1px); }

/* Body */
.fd-chat-body{ padding: 14px 16px; }

/* Welcome bubble */
.fd-chat-bubble{
    display:inline-block; max-width: 100%;
    background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    padding: 10px 12px; border-radius: 12px 12px 12px 6px; font-size: 14px; margin-bottom: 12px;
    position: relative;
}
.fd-chat-bubble::after{
    content:""; position:absolute; left:10px; bottom:-6px;
    border-width:6px 6px 0 0; border-style: solid;
    border-color: rgba(255,255,255,.12) transparent transparent transparent;
}

/* Links inside widget (override global underline vb.) */
.fd-chat a{ text-decoration: none; color: inherit; }
.fd-chat a:hover{ text-decoration: none; }

/* CTA button (WhatsApp’a git) */
.fd-chat-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 14px; border-radius: 9999px; font-weight:700; font-size:14px;
    color: var(--text-100) !important; white-space: nowrap;
    background: radial-gradient(120% 120% at 30% 30%, var(--fortis-light), var(--fortis-mid) 60%, var(--fortis-dark));
    box-shadow: 0 10px 24px rgba(0,0,0,.35);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fd-chat-btn:hover{ transform: translateY(-1px); filter: saturate(1.06); box-shadow: 0 14px 28px rgba(0,0,0,.4); }

/* Status row */
.fd-chat-status{
    margin-top:10px; font-size:12px; color: var(--text-75);
    display:flex; align-items:center; gap:8px;
}
.fd-chat-status .dot{
    width:8px; height:8px; border-radius:50%;
    background: var(--fortis-green); box-shadow: 0 0 8px rgba(39,195,107,.75);
}

/* =========================================
   ACCESSIBILITY / PREFERENCES
   ========================================= */
@media (prefers-reduced-motion: reduce){
    .fd-float, .fd-float svg{ animation: none !important; }
    .fd-float{ transition: none !important; }
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 480px){
    .fd-chat{ right:12px; bottom:88px; }
    .fd-chat-card{ width: min(92vw, 360px); }
    .fd-float{ right:12px; bottom:12px; width:58px; height:58px; }
}

/* =========================================
   OPTIONAL: eski whatsapp fab'ı gizle
   ========================================= */
/* #wa-fab { display: none !important; } */

/* === MOBİL: yatay şerit + boşluk + küçük kartlar === */
/* === MOBIL: otomatik ve sonsuz akan yatay galeri === */
@media (max-width: 768px) {
    .project-title-line { display: none !important; }
    .project-title { font-size: 30px !important; line-height: 1.1 !important; }

    /* Dış şerit: overflow gizli, yükseklik akışa uygun */
    .project-item-wrapper{
        overflow: hidden !important;
        padding: 8px 14px 14px !important;
        position: relative !important;
        margin-top: 20px !important;
    }

    /* JS'in eklediği track; linear akış */
    .project-item-wrapper .auto-track{
        display: flex !important;
        align-items: center !important;
        gap: 14px !important;                 /* aralık */
        will-change: transform !important;
        animation: projectMarquee var(--proj-speed, 22s) linear infinite !important;
    }
    
    

    /* Kart boyutları */
    .project-item{
        flex: 0 0 62vw !important;            /* ekranda ~%62 genişlik */
    }

    .project-image-wrap{
        width: 100% !important;
        height: 36vw !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        position: relative !important;
        box-shadow: 0 6px 18px rgba(0,0,0,.35) !important;
        transition: transform .28s ease, box-shadow .28s ease !important;
    }
    .project-image{
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Hover / dokunmada büyütme */
    .project-item:hover .project-image-wrap,
    .project-item:active .project-image-wrap,
    .project-item:focus-within .project-image-wrap{
        transform: scale(1.08) !important;
        box-shadow: 0 12px 30px rgba(0,0,0,.5) !important;
    }

    /* Overlay’i kapat, isim/numarayı rozet gibi köşeye al */
    .project-overlay{ display:none !important; }
    .project-text-wrap.initila-state{
        position:absolute !important;
        left:10px !important; bottom:10px !important;
        background:rgba(0,0,0,.55) !important;
        padding:6px 9px !important; border-radius:10px !important;
        display:flex !important; gap:6px !important;
    }
    .project-name{ font-size:13px !important; color:#fff !important; }
    .project-amount{ font-size:12px !important; color:#ddd !important; }

    /* Akış animasyonu */
    @keyframes projectMarquee{
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); } /* içerik iki kez kopyalandığı için %50 sonsuz döngü */
    }
}

h3 {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-60px);
  line-height: 1.15em;
  font-weight: var(--font-weight--weight-700);
  letter-spacing: 1.2px;
  margin-top: 0;
  margin-bottom: 0;
}

h4 {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-48px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-700);
  letter-spacing: 1px;
  margin-top: 0;
  margin-bottom: 0;
}

h5 {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-40px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-700);
  margin-top: 0;
  margin-bottom: 0;
}

h6 {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-32px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-700);
  margin-top: 0;
  margin-bottom: 0;
}

p {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-60);
  font-size: var(--typography--font-size-16px);
  line-height: 1.5em;
  font-weight: var(--font-weight--weight-400);
  margin-bottom: 0;
}

a {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white);
  font-size: var(--typography--font-size-18px);
  font-weight: var(--font-weight--weight-500);
  text-decoration: underline;
}

ul, ol {
  color: var(--color--white-60);
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
  line-height: 1.5em;
}

img {
  max-width: 100%;
  display: inline-block;
}

strong {

  color: var(--color--white);
  font-size: var(--typography--font-size-20px);
  font-weight: 700;
}

em {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-80);
  font-size: var(--typography--font-size-18px);
  font-style: italic;
  font-weight: var(--font-weight--weight-500);
}

sup {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-60);
  font-size: var(--typography--font-size-14px);
  font-weight: var(--font-weight--weight-400);
}

sub {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-60);
  font-size: var(--typography--font-size-16px);
  font-weight: var(--font-weight--weight-500);
}

blockquote {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-80);
  font-size: var(--typography--font-size-24px);
  line-height: 22px;
  font-weight: var(--font-weight--weight-600);
  border-left: 5px solid #e2e2e2;
  margin-bottom: 10px;
  padding: 10px 20px;
}

.style-section {
  padding-top: var(--speacing--space-140px);
  padding-bottom: var(--speacing--space-100px);
}

.container {
  max-width: 1686px;
  padding-left: 16px;
  padding-right: 16px;
}

.style-wrapper {
  grid-column-gap: var(--speacing--space-100px);
  grid-row-gap: var(--speacing--space-100px);
  flex-flow: column;
  display: flex;
}

.style-item {
  grid-column-gap: var(--speacing--space-40px);
  grid-row-gap: var(--speacing--space-40px);
  flex-flow: column;
  display: flex;
}

.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-overlay {
  background-image: linear-gradient(90deg, #000 1%, #0000 50%, #000 95%);
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  padding-bottom: 10px;
  display: flex;
  position: absolute;
  inset: 0%;
}

.hero-video {
  height: 576px;
}

.navbar {
  padding-top: var(--speacing--space-32px);
  background-color: var(--color--transparent);
  position: absolute;
  inset: 0% 0% auto;
}

.nav-wrapper {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.nav-link-item {
  font-family: var(--font-family--font-promary);
  color: var(--color--white-80);
  letter-spacing: .48px;
  text-transform: uppercase;
  padding: 0;
  line-height: 1.4em;
  text-decoration: none;
  transition: color .3s;
  position: relative;
  overflow: hidden;
}

.nav-link-item:hover, .nav-link-item.w--current {
  color: var(--color--primary);
}

.nav-menu-wrapper {
  grid-column-gap: 55px;
  grid-row-gap: 55px;
  justify-content: flex-start;
  align-items: center;
}

.nav-menu-wrapper.tab-pn {
  display: none;
}

.site-logo.w--current {
  padding-left: 0;
}

.scroll-button {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  border: 1px solid var(--color--white-20);
  border-radius: var(--redius--redius-50px);
  font-family: var(--font-family--font-promary);
  color: var(--color--white-70);
  font-size: var(--typography--font-size-16px);
  line-height: 1em;
  font-weight: var(--font-weight--weight-400);
  letter-spacing: .45px;
  text-transform: uppercase;
  justify-content: flex-start;
  align-items: center;
  padding: 16px 22px;
  text-decoration: none;
  display: flex;
}

.scroll-icon {
  width: 12px;
  height: 16px;
}

.scroll-icon._02 {
  margin-top: -16px;
  position: absolute;
  inset: 0% 0% auto;
}

.hero-wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.hero-title {
  color: var(--color--white-45);
  text-align: center;
  font-size: 13.2vw;

}

.hero-subtext {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white);
  font-size: var(--typography--font-size-20px);
  font-weight: var(--font-weight--weight-400);
  letter-spacing: .4px;
  text-transform: uppercase;
  margin-left: 100px;
}

.hero-title-wrap {
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.hero-title-overlay {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  pointer-events: none;
  grid-template-rows: auto;
  grid-template-columns: 1.1fr .9fr .7fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: absolute;
  inset: 0%;
}

.hero-icon-wrap {
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.hero-icon {
  pointer-events: auto;
  width: 100px;
}

.hero-icon._01 {
  width: 80px;
  margin-bottom: -60px;
}

.hero-icon._02 {
  width: 112px;
  margin-top: -80px;
  margin-right: -50px;
}

.hero-icon._03 {
  width: 92px;
  margin-bottom: -60px;
  margin-right: -60px;
}

.scroll-icon-wrap {
  height: 16px;
  position: relative;
  overflow: hidden;
}

.menu-button {
  display: none;
}

.about-section {
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: hidden;
}

.about-wrapper {
  grid-column-gap: var(--speacing--space-30px);
  grid-row-gap: var(--speacing--space-30px);
  flex-flow: column;
  display: flex;
}

.about-subtitle {
  border: 1px solid var(--color--white-20);
  border-radius: var(--redius--redius-50px);
  font-family: var(--font-family--font-secondary);
  color: var(--color--white);
  font-size: var(--typography--font-size-18px);
  line-height: 1em;
  font-weight: var(--font-weight--weight-500);
  justify-content: space-between;
  align-items: center;
  max-width: 200px;
  padding: 16px 20px;
  display: flex;
}

.subtitle-dot {
  background-color: var(--color--primary);
  border-radius: 20px;
  width: 22px;
  height: 22px;
}

.about-wrap {
  grid-column-gap: 70px;
  grid-row-gap: 70px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 140px;
  display: flex;
  position: relative;
}

.about-text-wrap {
  z-index: 1;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 760px;
  display: flex;
  position: relative;
}

.button-pirmary {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--color--white-20);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--color--white-20);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--color--white-20);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--color--white-20);
  font-family: var(--font-family--font-secondary);
  color: var(--color--white);
  font-size: var(--typography--font-size-14px);
  line-height: 1em;
  font-weight: var(--font-weight--weight-500);
  letter-spacing: .5px;
  text-transform: uppercase;
  text-underline-offset: 2px;
  padding: 24px 48px 24px 24px;
  text-decoration: none;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: ease;
  position: relative;
}

.button-pirmary:hover {
  border-color: var(--color--primary);
  color: var(--color--primary);
}

.button-icon-wrap {
  width: 23px;
  height: 23px;
  position: absolute;
  inset: 3px 3px auto auto;
  overflow: hidden;
}

.about-text {font-family: 'Manrope', sans-serif !important;
  color: var(--color--white);
  font-size: var(--typography--font-size-24px);
  line-height: 1.8em;
  font-weight: var(--font-weight--weight-400);
  letter-spacing: 1px;

}

.about-text.tab-on {
  display: none;
}

.about-text-span {
  color: var(--color--white-50);
}

.about-image {
  transform: rotate(21deg);
}

.about-image-wrap {
  width: 220px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.button-icon {
  color: var(--color--white-20);
}

.button-icon._02 {
  color: var(--color--primary);
  position: absolute;
  top: 100%;
  right: 100%;
}

.about-brand-area {
  padding-top: 40px;
}

.about-brand-wrapper {
  grid-column-gap: var(--speacing--space-80px);
  grid-row-gap: var(--speacing--space-80px);
  flex-flow: column;
  display: flex;
}

.video-wrapper {
  height: 200vh;
}

.brand-area {
  grid-column-gap: var(--speacing--space-32px);
  grid-row-gap: var(--speacing--space-32px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 91%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
  overflow: hidden;
}

.brand-wrap {
  grid-column-gap: var(--speacing--space-100px);
  grid-row-gap: var(--speacing--space-100px);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.brand-logo {
  flex: none;
}

.brand-title {
  color: var(--color--white-50);
  font-size: var(--typography--font-size-18px);
  text-transform: uppercase;
  align-self: center;
  line-height: 1em;
}

.video-wrap {
  border-radius: var(--redius--redius-32px);
  height: 620px;
  position: sticky;
  top: 10px;
  overflow: hidden;
}

.about-video {
  width: 100%;
  height: 100%;
}

.brand-wrapper {
  grid-column-gap: var(--speacing--space-100px);
  grid-row-gap: var(--speacing--space-100px);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.brand-overlay {
  background-image: linear-gradient(90deg, var(--color--dark-primary), var(--color--transparent) 5%, var(--color--transparent) 95%, var(--color--dark-primary));
  pointer-events: none;
  position: absolute;
  inset: 0%;
}

.award-section {
  padding-top: var(--speacing--space-100px);
  padding-bottom: var(--speacing--space-100px);
}

.award-wrapper {
  grid-column-gap: var(--speacing--space-80px);
  grid-row-gap: var(--speacing--space-80px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}

.award-top-wrap {
  grid-column-gap: var(--speacing--space-100px);
  grid-row-gap: var(--speacing--space-100px);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.award-item {
  padding-top: var(--speacing--space-30px);
  padding-bottom: var(--speacing--space-30px);
  grid-column-gap: var(--speacing--space-16px);
  grid-row-gap: var(--speacing--space-16px);
  color: var(--color--white-80);
  border-bottom: 1px solid #ffffff12;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr .25fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}

.award-subtitle {
  margin-bottom: var(--speacing--space-10px);
  color: var(--color--white-50);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 15px;
}

.award-title-line {
  background-color: #ffffff12;
  width: 100%;
  height: 1px;
}

.award-name {
  font-family: var(--font-family--font-promary);
  font-size: var(--typography--font-size-20px);
  font-weight: var(--font-weight--weight-400);
}

.award-text {
  font-family: var(--font-family--font-secondary);
  font-size: var(--typography--font-size-18px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-400);
}

.award-image {
  width: 150px;
  position: absolute;
  inset: 50% auto 0% 49%;
  transform: rotate(15deg)translate(-50%, -50%);
}

.marquee-area {
  padding-top: var(--speacing--space-140px);
  padding-bottom: var(--speacing--space-140px);
  background-color: var(--color--dark-secondary);
  overflow: hidden;
}

.marquee-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.marquee-item-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  display: flex;
}

.marquee-item-wrap._02 {
  justify-content: flex-end;
  align-items: stretch;
}

.marquee-item {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.marquee-text {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-45);
  font-size: var(--typography--font-size-80px);
  text-transform: lowercase;
  flex: none;
  line-height: 1em;
}

.marquee-icon-wrapper {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background-color: #ffffff1a;
  border-radius: 50%;
  width: 220px;
  height: 220px;
  position: absolute;
}

.marquee-icon-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.marquee-icon {
  width: 54%;
  position: absolute;
}

.blog-section {
  padding-top: var(--speacing--space-100px);
  padding-bottom: var(--speacing--space-100px);
  overflow: hidden;
}

.blog-wrapper {
  grid-column-gap: var(--speacing--space-60px);
  grid-row-gap: var(--speacing--space-60px);
  flex-flow: column;
  display: flex;
  overflow: hidden;
}

.blog-title-wrap {
  padding-bottom: var(--speacing--space-32px);
  border-bottom: 1px solid var(--color--white-7);
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.blog-button {
  color: var(--color--white-70);
  letter-spacing: .3px;
  text-transform: uppercase;
  flex: none;
  padding: 4px 10px;
  font-weight: 500;
  line-height: 1.2em;
  text-decoration: none;
  transition: color .3s;
}

.blog-button:hover {
  color: var(--color--primary);
}

.blog-title {
  font-size: var(--typography--font-size-32px);
}

.blog-collection-list {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
}

.blog-collection-list.grid {
  grid-column-gap: var(--speacing--space-24px);
  grid-row-gap: var(--speacing--space-60px);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.blog-item {
  grid-column-gap: var(--speacing--space-30px);
  grid-row-gap: var(--speacing--space-30px);
  flex-flow: column;
  display: flex;
}

.blog-image-wrap {
  border-radius: var(--redius--redius-12px);
  position: relative;
  overflow: hidden;
}

.blog-content-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.blog-meta {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: var(--color--dark-primary);
  justify-content: flex-start;
  align-items: center;
  padding: 12px 15px;
  display: flex;
  position: absolute;
  inset: auto auto 0% 0%;
}

.meta-line {
  background-color: var(--color--white-20);
  width: 1px;
  height: 12px;
}

.blog-industry {
  color: var(--color--white-50);
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  line-height: 1em;
  text-decoration: none;
  transition: color .3s;
}

.blog-industry:hover {
  color: var(--color--primary);
}

.blog-date {
  color: var(--color--white-70);
  text-transform: uppercase;
  text-underline-offset: 2px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1em;
  text-decoration: underline;
}

.blog-name {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-18px);
  line-height: 1.5em;
  font-weight: var(--font-weight--weight-600);
  letter-spacing: .4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .3s;
}

.blog-name:hover {
  color: var(--color--primary);
}

.blog-details {
  margin-bottom: var(--speacing--space-32px);
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-60);
  font-size: var(--typography--font-size-14px);
  font-weight: var(--font-weight--weight-400);
}

.blog-link {
  opacity: .8;
  color: var(--color--primary);
  font-size: var(--typography--font-size-14px);
  font-weight: var(--font-weight--weight-600);
  letter-spacing: .6px;
  text-transform: uppercase;
  text-underline-offset: 2px;
}

.blog-link:hover {
  opacity: 1;
}

.blog-name-wrap {
  margin-bottom: var(--speacing--space-32px);
  text-decoration: none;
}

.blog-image {
  width: 100%;
  height: 100%;
}

.footer-section {
  padding-top: var(--speacing--space-60px);
  background-color: var(--color--dark-secondary);
  overflow: hidden;
}

.footer-wrapper {
  margin-bottom: var(--speacing--space-100px);
}

.footer-bottom-wrap {
  padding-bottom: var(--speacing--space-24px);
  grid-column-gap: var(--speacing--space-32px);
  grid-row-gap: var(--speacing--space-32px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.copywrite-text {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-16px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-400);
  text-align: center;
  letter-spacing: .3px;
}

.footer-big-text {
  font-family: var(--font-family--font-promary);
  color: var(--color--white-45);
  letter-spacing: 5px;
  text-transform: uppercase;
  font-size: 20.5vw;
  font-weight: 700;
  line-height: .7em;
}

.footer-big-text-wrap {
  display: flex;
  overflow: hidden;
}

.footer-top-wrap {
  margin-bottom: var(--speacing--space-60px);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer-line {
  margin-bottom: var(--speacing--space-80px);
  background-color: var(--color--white-7);
  height: 1px;
  text-decoration: line-through;
}

.footer-widget-wrap {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.footer-social-area {
  grid-column-gap: var(--speacing--space-30px);
  grid-row-gap: var(--speacing--space-30px);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.social-item {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  font-family: var(--font-family--font-promary);
  color: var(--color--white-70);
  font-size: var(--typography--font-size-14px);
  line-height: 1em;
  font-weight: var(--font-weight--weight-500);
  letter-spacing: .4px;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

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

.social-line {
  background-color: #ffffff1a;
  flex: none;
  width: 1px;
  height: 20px;
}

.social-icon {
  max-width: 16px;
}

.social-icon-path {
  color: var(--color--dark-secondary);
}

.footer-widget-item {
  grid-column-gap: var(--speacing--space-30px);
  grid-row-gap: var(--speacing--space-30px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 220px;
  display: flex;
}

.footer-address-item {
  grid-column-gap: var(--redius--redius-16px);
  grid-row-gap: var(--redius--redius-16px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.address-title {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  letter-spacing: .5px;
  text-transform: uppercase;
  text-underline-offset: 2px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1em;
  text-decoration: underline;
}

.address-text {
  color: var(--color--white-60);
  font-size: var(--typography--font-size-16px);
}

.address-line {
  background-color: var(--color--primary);
  width: 52px;
  height: 1px;
}

.widget-title {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-20px);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
}

.widget-link {
  font-family: var(--font-family--font-secondary);
  font-size: var(--typography--font-size-14px);
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1em;
  text-decoration: none;
}

.widget-link._02 {
  position: absolute;
}

.widget-link-wrap {
  grid-column-gap: var(--speacing--space-32px);
  grid-row-gap: var(--speacing--space-32px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-address-wrap {
  grid-column-gap: var(--speacing--space-48px);
  grid-row-gap: var(--speacing--space-48px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 220px;
  display: flex;
}

.widget-line {
  background-image: linear-gradient(90deg, #fff6, var(--color--transparent));
  width: 85px;
  height: 2px;
}

.widget-title-wrap {
  grid-column-gap: var(--speacing--space-16px);
  grid-row-gap: var(--speacing--space-16px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
}
/* === WhatsApp Widget === */
.waw { position: fixed; inset: auto 20px 100px auto; z-index: 9999; display: none; }
.waw.open { display: block; }

.waw-card{
    width: 320px; max-width: calc(100vw - 40px);
    background:#fff; border-radius:18px; overflow:hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
    transform: translateY(12px); opacity:0; transition:.25s ease;
}
.waw.open .waw-card{ transform:none; opacity:1; }

.waw-head{ background:#0f5132; color:#fff; padding:16px 16px 14px; display:flex; align-items:start; gap:8px; }
.waw-title{ line-height:1.2; }
.waw-title strong{ display:block; font-weight:700; }
.waw-title span{ display:block; font-size:13px; opacity:.9; }
.waw-close{ margin-left:auto; background:transparent; border:0; color:#fff; font-size:22px; line-height:1; cursor:pointer; opacity:.9; }
.waw-close:hover{ opacity:1; }

.waw-body{ padding:16px; background:#f7f7f7; }
.waw-bubble{
    background:#ededed; color:#111; padding:12px 14px; border-radius:12px;
    margin-bottom:12px; font-weight:600;
}
.waw-cta{
    display:block; text-align:center; padding:14px 16px; border-radius:14px;
    background:#25D366; color:#fff; font-weight:800; text-decoration:none;
    box-shadow: 0 6px 18px rgba(37,211,102,.35);
}
.waw-cta:active{ transform: translateY(1px); }
.waw-status{ margin-top:12px; font-size:14px; color:#4b4b4b; display:flex; align-items:center; gap:8px; }
.waw-status .dot{ width:10px; height:10px; border-radius:50%; background:#28a745; display:inline-block; }

.waw-fab{
    position: fixed; right:20px; bottom:24px; width:64px; height:64px; border-radius:50%;
    background:#25D366; color:#fff; border:0; cursor:pointer;
    display:grid; place-items:center; box-shadow:0 10px 30px rgba(37,211,102,.4);
    z-index: 9999;
}
.waw-fab:active{ transform: translateY(1px); }

/* Dark site ark-plan gölgeleri için ufak iyileştirme */
@media (max-width:420px){
    .waw { inset: auto 12px 90px auto; }
    .waw-card{ width: 94vw; }
}
.app-promo-section {
    background: #000;
    padding: 100px 0;
    text-align: center;
}


.app-promo-text h3 {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 26px;
}

.app-promo-text p {
    color: #aaa;
    font-size: 16px;
}

.app-promo-image img {
    max-width: 900px;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(160, 100, 255, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.app-promo-image img:hover {
    transform: scale(1.02);
    box-shadow: 0 0 60px rgba(160, 100, 255, 0.45);
}

.footer-contact-area {
  grid-column-gap: var(--speacing--space-20px);
  grid-row-gap: var(--speacing--space-20px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 220px;
  display: flex;
}

.footer-contact-item {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.contact-link {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-70);
  letter-spacing: .5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1em;
  text-decoration: none;
}

.contact-title {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  line-height: 1em;
}

.contact-text-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.contact-icon {
  opacity: .5;
  align-self: center;
}

.copywrite-link {
  color: var(--color--primary);
  font-weight: 500;
  text-decoration: none;
}

.project-section {
  padding-top: var(--speacing--space-100px);
  position: relative;
}

.section-line {
  background-color: var(--color--white-7);
  max-width: 1686px;
  height: 1px;
  margin-left: 16px;
  margin-right: 16px;
  position: absolute;
  inset: 0% 0% auto;
}

.project-title-wrapper {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.project-item-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr .6fr 1.25fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.project-title-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: flex-start;
  align-items: center;
  width: 700px;
  display: flex;
}

.project-title-wrap._02 {
  justify-content: flex-end;
  align-items: center;
}

.project-title-line {
  background-color: var(--color--white);
  width: 140px;
  height: 5px;
}

.project-icon {
  width: 120px;
}

.project-title {
  font-size: var(--typography--font-size-80px);
}

.project-item-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.project-item-wrap._01 {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 100px;
}

.project-item-wrap._02 {
  grid-column-gap: 300px;
  grid-row-gap: 300px;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 180px;
}

.project-item-wrap._04 {
  padding-top: 140px;
}

.project-item._01, .project-item._03 {
  max-width: 220px;
}

.project-item._04 {
  max-width: 164px;
}

.project-item._05 {
  max-width: 120px;
}

.project-item._06 {
  max-width: 104px;
  margin-right: -20px;
}

.project-item._07 {
  max-width: 130px;
}

.project-item._08 {
  max-width: 106px;
  margin-right: -20px;
}

.project-item._09 {
  align-self: flex-end;
  max-width: 164px;
  margin-bottom: 80px;
}

.project-item._10 {
  max-width: 230px;
  margin-bottom: 100px;
}

.project-item._11 {
  align-self: flex-start;
  max-width: 164px;
  margin-bottom: 40px;
}

.project-item._11.padding-none {
  margin-bottom: 0;
}

.project-item._12 {
  align-self: flex-end;
  max-width: 164px;
  margin-bottom: 80px;
}

.project-item._13 {
  align-self: center;
  max-width: 220px;
  margin-bottom: 120px;
}

.project-item._14 {
  align-self: flex-start;
  max-width: 164px;
}

.project-item._15 {
  max-width: 220px;
  margin-bottom: 120px;
}

.project-item._16 {
  align-self: flex-start;
  max-width: 164px;
  margin-bottom: 120px;
}

.project-item._16.padding-none {
  margin-bottom: 0;
}

.project-item._17 {
  align-self: flex-end;
  max-width: 220px;
  margin-bottom: 120px;
}

.project-item._18 {
  align-self: flex-start;
  max-width: 164px;
}

.project-item._02 {
  max-width: 164px;
}

.project-content-wrap {
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.project-image-wrap {
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.project-text-wrap {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex: 1;
  justify-content: flex-start;
  align-self: flex-end;
  align-items: center;
  display: flex;
}

.project-image {
  width: 100%;
  height: 100%;
}

.project-overlay {
  background-color: #0006;
  justify-content: center;
  align-items: center;
  padding: 15px;
  display: flex;
  position: absolute;
  inset: 0%;
}

.project-name {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-18px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-500);
}

.project-amount {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white);
  font-size: var(--typography--font-size-16px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-600);
  margin-top: -10px;
}

.plus-icon {
  position: absolute;
}

.project-items-coll-2 {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
}

.nav-link-text {
  font-family: var(--font-family--font-promary);
  font-size: var(--typography--font-size-16px);
  line-height: 1.4em;
  font-weight: var(--font-weight--weight-600);
  letter-spacing: .48px;
  text-transform: uppercase;
  padding: 0;
  transition: color .3s;
}

.nav-link-text._02 {
  position: absolute;
}

.blog-slider {
  background-color: var(--color--transparent);
  cursor: grab;
  height: auto;
}

.blog-musk {
  max-width: 320px;
  overflow: visible;
}

.slide-nav {
  display: none;
}

.blog-slide-item {
  margin-right: var(--speacing--space-16px);
}

.right-arrow {
  border: 1px solid var(--color--white-45);
  border-radius: var(--redius--redius-50);
  color: var(--color--white-45);
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: all .3s;
  display: flex;
  inset: -90px 0% auto auto;
}

.right-arrow:hover {
  border-color: var(--color--white);
  background-color: var(--color--white);
  color: var(--color--dark-primary);
}

.right-arrow.none {
  display: none;
}

.left-arrow {
  border: 1px solid var(--color--white-45);
  border-radius: var(--redius--redius-50);
  color: var(--color--white-45);
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: all .3s;
  display: flex;
  inset: -90px 60px auto auto;
}

.left-arrow:hover {
  border-color: var(--color--white);
  background-color: var(--color--white);
  color: var(--color--dark-primary);
}

.left-arrow.none {
  display: none;
}

.dropdown-list {
  background-color: var(--color--transparent);
  padding-top: 20px;
  display: none;
  position: absolute;
  inset: 20px -142px auto auto;
  overflow: hidden;
}

.nav-link {
  font-family: var(--font-family--font-promary);
  color: var(--color--white-80);
  letter-spacing: .65px;
  text-transform: uppercase;
  margin-left: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  transition: color .3s;
}

.nav-link:hover, .nav-link.w--current {
  color: var(--color--primary);
}

.dropdown-item-wrap {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.dropdown-item-wrapper {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #ffffff40;
  border-radius: 24px;
  justify-content: space-between;
  align-items: flex-start;
  width: 600px;
  padding: 35px 30px;
  display: flex;
  overflow: hidden;
}

.dr-list-line {
  background-color: var(--color--white-20);
  width: 100%;
  height: 1px;
}

.dr-list-line._02 {
  flex: none;
  align-self: flex-end;
  width: 1px;
  height: 100px;
  margin-bottom: 5px;
}

.nav-link-wrap {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.nav-link-title {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  letter-spacing: .5px;
  text-transform: uppercase;
  text-underline-offset: 3px;
  font-weight: 600;
  text-decoration: underline;
}

.span-icon {
  z-index: -1;
  position: absolute;
  inset: 8px 150px auto auto;
}

.nav-menu-wrap {
  grid-column-gap: var(--speacing--space-48px);
  grid-row-gap: var(--speacing--space-48px);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.inner-hero-area {
  padding-top: 220px;
  padding-bottom: var(--speacing--space-60px);
}

.inner-hero-wrapper {
  grid-column-gap: var(--speacing--space-40px);
  grid-row-gap: var(--speacing--space-40px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.inner-hero-title {
  font-size: 100px !important;
  font-weight: var(--font-weight--weight-600);
}
@media (max-width: 768px) {
    .inner-hero-title {
        font-size: 31px !important;
    }
}
.founder-signature {
    text-align: right;
    margin-top: 40px;
    margin-right: 10px;
}

.founder-signature-img {
    width: 220px;
    height: auto;
    opacity: 0.9;
    filter: brightness(1.1);
}

.founder-name {
    font-family: 'Story Script', cursive;
    font-size: 32px;
    color: #fff;
    margin-top: 8px;
}

.founder-title {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    margin-top: -8px;
    letter-spacing: 0.5px;
}
.founder-signature {
    text-align: right;
    margin-top: 40px;
    margin-right: 10px;
}

.founder-signature-img {
    width: 220px;
    height: auto;
    opacity: 0.9;
    filter: brightness(1.1);
}

.founder-name {
    font-family: 'Story Script', cursive;
    font-size: 32px;
    color: #fff;
    margin-top: 8px;
}

.founder-title {
    font-size: 16px;
    color: rgba(255,255,255,0.8);
    margin-top: -8px;
    letter-spacing: 0.5px;
}
/* ============ VARIABLES ============ */
:root{
    --bg: #0c0c0c;
    --card: rgba(255,255,255,.06);
    --stroke: rgba(255,255,255,.16);
    --accent: #2dd4bf;          /* teal */
    --accent-2:#60a5fa;         /* blue */
    --text:#f5f7f9;
    --muted:#aeb6c2;
    --glow: 0 12px 40px rgba(45,212,191,.22);
}

/* ============ HERO ============ */
.track-hero{ position:relative; overflow:hidden; }
.track-hero__title{
    letter-spacing:.02em;
    background:linear-gradient(90deg,var(--text),#c7d2fe);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    animation:title-pop .8s ease both;
}
@keyframes title-pop { from{transform:translateY(16px) scale(.98); opacity:.0} to{transform:none;opacity:1} }

.track-lines{ position:absolute; inset:0; pointer-events:none; }
.track-lines span{
    position:absolute; top:0; bottom:0; width:1px; background:linear-gradient(180deg,transparent,rgba(255,255,255,.15),transparent);
    transform:translateY(-100%);
    animation:line-sweep 8s linear infinite;
}
.track-lines span:nth-child(1){ left:18%; animation-delay:0s}
.track-lines span:nth-child(2){ left:52%; animation-delay:1.2s}
.track-lines span:nth-child(3){ left:78%; animation-delay:2.4s}
@keyframes line-sweep { to{ transform:translateY(100%);} }

/* ============ CARD ============ */
.track-area{ padding:32px 0 80px; }
.glass{
    background:var(--card);
    border:1px solid var(--stroke);
    border-radius:18px;
    box-shadow: var(--glow);
    backdrop-filter: blur(10px);
}
.track-card{ padding:22px; }
.track-input{ display:flex; gap:10px; align-items:center; }
.track-input input{
    flex:1; height:52px; border-radius:12px; border:1px solid var(--stroke);
    background:#0f1115; color:var(--text); padding:0 16px; font-size:16px;
    outline:none; transition:border .2s, box-shadow .2s;
}
.track-input input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(45,212,191,.15); }
.btn-primary{
    height:52px; padding:0 18px; border-radius:12px; border:1px solid transparent;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#061018; font-weight:700; letter-spacing:.02em; cursor:pointer;
    transition: transform .12s ease, filter .2s ease;
}
.btn-primary:hover{ filter:saturate(1.1) brightness(1.05); transform:translateY(-1px); }
.track-hint{ color:var(--muted); font-size:14px; margin-top:8px }

/* ============ RESULT ============ */
.track-result{ margin-top:20px; min-height:180px; }
.track-result.is-empty .timeline,
.track-result.is-empty .meta{ display:none; }

/* meta */
.meta{ display:flex; flex-wrap:wrap; gap:10px 20px; margin-bottom:16px; }
.meta .badge{ background:rgba(255,255,255,.08); border:1px solid var(--stroke); padding:6px 10px; border-radius:999px; color:var(--text); font-size:13px }

/* timeline */
.timeline{ position:relative; padding:22px 12px 8px; }
.timeline__track{
    height:6px; border-radius:8px; background:rgba(255,255,255,.08);
    position:relative; overflow:hidden;
}
.timeline__fill{
    position:absolute; inset:0 auto 0 0; width:0%;
    background:linear-gradient(90deg,var(--accent),var(--accent-2));
    border-radius:8px; box-shadow:var(--glow);
    transition:width .9s cubic-bezier(.2,.7,.2,1);
}
.timeline__stops{ display:flex; justify-content:space-between; margin-top:14px }
.stop{
    display:flex; flex-direction:column; align-items:center; gap:8px; min-width:70px; text-align:center;
    color:var(--muted); font-size:13px;
}
.stop .dot{
    width:36px; height:36px; border-radius:50%;
    display:grid; place-items:center;
    background:#0f1115; border:1px solid var(--stroke);
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s, background .2s;
}
.stop.active{ color:var(--text); }
.stop.active .dot{ border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#041217; transform:scale(1.05) }
.stop svg{ width:18px; height:18px }

/* skeleton */
.skeleton{ display:none; gap:8px }
.track-result.loading .skeleton{ display:grid }
.track-result.loading .meta,
.track-result.loading .timeline{ display:none }
.skeleton-title,.skeleton-line,.skeleton-timeline{
    background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
    background-size:200% 100%; animation:shimmer 1.2s linear infinite;
    border-radius:8px;
}
.skeleton-title{ height:22px; width:46% }
.skeleton-line{ height:14px; width:70% }
.skeleton-line.short{ width:38% }
.skeleton-timeline{ height:48px; margin-top:10px }
@keyframes shimmer{ to{ background-position:-200% 0 } }

/* toast */
.toast{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px); opacity:0;
    background:#101218; color:var(--text); border:1px solid var(--stroke); border-radius:12px; padding:10px 14px;
    transition: all .25s ease; pointer-events:none; z-index:50;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* responsive */
@media (max-width: 768px){
    .track-card{ padding:16px }
    .track-input{ gap:8px }
    .track-input input{ height:48px }
    .btn-primary{ height:48px }
    .timeline__stops{ gap:10px }
    .stop{ min-width:auto; font-size:12px }
    .stop .dot{ width:32px; height:32px }
    .track-hero__title{ font-size:31px !important; line-height:1.1 }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
    .track-lines span,.timeline__fill{ animation:none }
}
.inner-subtitle {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-50);
  font-size: var(--typography--font-size-16px);
  font-weight: var(--font-weight--weight-400);
  letter-spacing: .4px;
  text-transform: uppercase;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.inner-subtitle-link {
  color: var(--color--white);
  text-decoration: none;
  transition: color .3s;
}

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

.about-details-area {
  padding-top: var(--speacing--space-100px);
  padding-bottom: var(--speacing--space-100px);
  overflow: hidden;
}

.about-details-wrapper {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  display: flex;
}

.about-details-top-wrap {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.about-details-bottom-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.about-title {
  font-size: var(--typography--font-size-48px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-700);
  letter-spacing: 1px;
  text-transform: none;
}

.about-title-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  max-width: 940px;
  display: flex;
}

.about-details-wrap {
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 720px;
  display: flex;
}

.about-details-text-area {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 536px;
  display: flex;
}

.about-details-image-area {
  max-width: 560px;
  padding-right: 60px;
  position: relative;
}

.about-details-text-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  align-items: flex-start;
  max-width: 424px;
  display: flex;
}

.about-details-text {
  color: var(--color--white-60);
  line-height: 2em;
}

.video-link {
  flex: none;
}

.about-details-title {
  font-size: var(--typography--font-size-24px);
  text-transform: uppercase;
}

.about-logo-image {
  width: 240px;
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
  inset: 10% 0% 0% auto;
}

.about-details-text-border {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.about-details-text-border-line {
  background-color: var(--color--white-45);
  width: 2px;
  height: 77px;
}

.team-wrapper {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  display: flex;
  overflow: hidden;
}

.team-title {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-50);
  font-size: var(--typography--font-size-16px);
  font-weight: var(--font-weight--weight-400);
  letter-spacing: .75px;
  text-transform: uppercase;
}

.team-title-wrap {
  border-bottom: 1px solid var(--color--white-7);
  width: 80%;
  padding-bottom: 32px;
}

.team-slider {
  background-color: var(--color--transparent);
  height: auto;
}

.team-musk {
  max-width: 312px;
  overflow: visible;
}

.team-slide-item {
  margin-right: 16px;
}

.team-item {
  position: relative;
  overflow: hidden;
}

.team-overlay {
  flex-flow: column;
  justify-content: space-between;
  display: flex;
  position: absolute;
  inset: 0%;
}

.member-details {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.member-social-area {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
  padding-right: 10px;
  display: flex;
}

.team-member-designation {
  background-color: var(--color--dark-primary);
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-70);
  font-size: var(--typography--font-size-16px);
  font-weight: var(--font-weight--weight-400);
  padding: 5px;
}

.team-member-name {
  background-color: var(--color--dark-primary);
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: var(--typography--font-size-20px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-600);
  text-transform: uppercase;
  padding: 5px;
}

.social-link {
  border-radius: var(--redius--redius-50);
  background-color: var(--color--white);
  color: var(--color--dark-primary);
  border: 1px solid #00000080;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: flex;
}

.plus-icon-2 {
  width: 12.4px;
  height: 12.4px;
  margin-top: 1px;
  margin-left: 1px;
}

.plus-icon-wap {
  border-radius: var(--redius--redius-50);
  background-color: var(--color--white);
  color: var(--color--dark-primary);
  border: 1px solid #00000080;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: flex;
}

.arrow-icon {
  width: 18px;
}

.services-section {
  padding-top: 80px;
  padding-bottom: 100px;
}

.services-item-wrap {
  border-top: 1px solid var(--color--white-7);
}

.services-item {
  padding-top: var(--speacing--space-40px);
  padding-bottom: var(--speacing--space-40px);
  border-bottom: 1px solid var(--color--white-7);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.services-content-wrap {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  max-width: 50%;
  display: flex;
}

.services-image {
  width: 400px;
  position: absolute;
  inset: 0% 0% auto auto;
}

.services-image._02 {
  top: -20%;
}

.services-image._03 {
  top: -40%;
}

.services-image._04 {
  top: -60%;
}

.services-image._05 {
  top: -80%;
}

.services-image._06 {
  inset: auto 0% 0% auto;
}

.services-icon {
  max-width: 78px;
}

.services-icon-wrap {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.services-name {
  font-size: var(--typography--font-size-24px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-600);
  letter-spacing: 0;
  text-transform: capitalize;
}

.services-name-erap {
  max-width: 280px;
}

.services-serial {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-45);
  font-size: var(--typography--font-size-32px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-600);
}

.contact-text-wrap-2 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--color--white);
  flex-flow: column;
  font-size: 16px;
  font-weight: 600;
  line-height: 1em;
  display: flex;
}

.contact-submit-button {
  color: #fff;
  background-color: #1c1a1e;
  border-radius: 10px;
  padding: 20px 36px;
  font-weight: 700;
  line-height: 1em;
  transition: all .3s;
}

.contact-submit-button:hover {
  background-color: var(--color--primary);
  color: var(--color--dark-primary);
}

.contact-form-wrap {
  padding: var(--speacing--space-72px) var(--speacing--space-80px);
  border-radius: var(--redius--redius-20px);
  background-color: #000;
  flex-flow: column;
  width: 100%;
  max-width: 872px;
  display: flex;
}

.contact-item-wrap {
  padding: var(--speacing--space-32px) var(--speacing--space-20px);
  background-color: var(--color--dark-secondary);
  border-radius: 10px;
  flex-flow: column;
  display: flex;
}
.timeline__track { position: relative; height: 6px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.timeline__fill  { height: 100%; width: 0; background: linear-gradient(90deg,#5eead4,#60a5fa); border-radius: inherit;
    transition: width .9s cubic-bezier(.2,.7,.2,1); }

.contact-detail-text {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-50);
  font-size: var(--typography--font-size-18px);
  line-height: 1.2em;
}

.contact-text {
  color: var(--color--white-50);
  font-size: var(--typography--font-size-18px);
  line-height: 1.1em;
  text-decoration: none;
  transition: color .3s;
}
/* --- Contact sayfası düzen override'ları --- */

/* Üst şerit iki sütun: Sol (kart) büyük, sağ (harita) daha dar */
@media (min-width: 992px) {
    .contact-top {
        display: grid;
        grid-template-columns: 1.4fr 0.9fr; /* soldaki kart daha geniş */
        gap: 28px;
        align-items: start;
    }
}

/* Şablonun 3 kolonlu grid'ini iptal et: tek kolon / block yap */
.contact-top .contact-item-wrapper {
    display: block !important;
    grid-template-columns: none !important;
}

/* Kart kendi genişliğini normal kullansın */
.contact-top .contact-item-wrap {
    width: 100%;
}

/* Harita kartı */
.contact-map .map-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Harita boyutu: masaüstünde daha küçük, mobilde orantılı */
.contact-map .gmap {
    width: 100%;
    height: clamp(260px, 34vh, 420px); /* küçültüldü */
    border: 0;
    display: block;
    filter: grayscale(10%) contrast(1.04) saturate(1.1);
}

/* Tablet ve altı: alt alta akış, harita biraz daha geniş görünür */
@media (max-width: 991px) {
    .contact-top {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .contact-map .gmap {
        height: clamp(220px, 40vh, 380px);
    }
}

.contact-text:hover {
  color: var(--color--primary);
}

.contact-textarea {
  border-radius: var(--redius--redius-8px);
  background-color: var(--color--dark-secondary);
  border: 1px solid #0000;
  min-height: 170px;
  margin-bottom: 0;
  font-weight: 500;
}

.contact-textarea:focus {
  border-color: #1c1a1e;
}

.contact-textarea::placeholder {
  color: #595959;
}

.contact-item-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  max-width: 100%;
  display: grid;
}

.location-name {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white);
  font-size: var(--typography--font-size-28px);
  line-height: 1.2em;
  font-weight: var(--font-weight--weight-600);
}

.contact-icon-wrap {
  background-color: #373737;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}
/* === Gizlilik Modal === */
#policy-modal[aria-hidden="true"] { display: none; }
#policy-modal[aria-hidden="false"] { display: block; }

#policy-modal {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(2px);
}

.policy-dialog {
    position: relative;
    max-width: 780px; width: calc(100% - 32px);
    margin: 5vh auto; background: #0d0f12; color: #e8edf3;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
    overflow: hidden;
}

.policy-head {
    padding: 18px 20px; background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: space-between;
}

.policy-title { font-size: 18px; font-weight: 700; letter-spacing: .2px; }

.policy-close {
    appearance: none; border: 0; background: transparent; color: #cfd8e3;
    font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.policy-close:hover { color: #fff; }

.policy-body {
    padding: 18px 20px; max-height: 60vh; overflow: auto;
}

.policy-body h4 { margin: 16px 0 8px; font-size: 15px; }
.policy-body p, .policy-body li { font-size: 14px; line-height: 1.65; color: #c7d0dc; }
.policy-body ul { margin: 8px 0 0 18px; }

.contact-text-field {
  border-radius: var(--redius--redius-8px);
  background-color: var(--color--dark-secondary);
  border: 1px solid #0000;
  min-height: 56px;
  margin-bottom: 0;
  padding-left: 24px;
  font-weight: 500;
}

.contact-text-field:focus {
  border-style: solid;
  border-color: #1c1a1e;
}

.contact-text-field::placeholder {
  color: var(--color--white-45);
}

.contact-form {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  display: flex;
}

.contact-checkbox-field {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 32px;
  display: flex;
}

.contact-checkbox-label {
  color: var(--color--white-45);
  font-size: var(--typography--font-size-16px);
  margin-bottom: 0;
  font-weight: 500;
}

.contact-section {
  padding-top: var(--speacing--space-60px);
  padding-bottom: var(--speacing--space-100px);
}

.contact-wrapper {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.contact-item {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.contact-item.with-margin {
  margin-bottom: 30px;
}

.location-name-wrap {
  margin-bottom: var(--speacing--space-60px);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-50);
  font-size: var(--typography--font-size-18px);
  line-height: 1.5em;
  font-weight: var(--font-weight--weight-500);
  flex-flow: column;
  display: flex;
}

.contact-title-2 {
  font-family: var(--font-family--font-promary);
  font-size: var(--typography--font-size-48px);
  text-transform: none;
}

.checkbox-label-link {
  color: var(--color--white-60);
  font-weight: 500;
  text-decoration: underline;
}

.contact-line {
  background-color: var(--color--white-7);
  height: 1px;
  margin-bottom: 60px;
}

.contact-field-item-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.contact-title-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 536px;
  margin-bottom: 32px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.contact-field-label {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white);
  font-size: var(--typography--font-size-16px);
  line-height: 1em;
  font-weight: var(--font-weight--weight-600);
  margin-bottom: 14px;
}

.contact-checkbox {
  background-color: #fff;
  border: 1px solid #1c1a1e;
  border-radius: 4px;
  min-width: 14px;
  min-height: 14px;
  margin-top: 5px;
  margin-left: -30px;
}

.contact-checkbox.w--redirected-checked {
  background-color: var(--color--primary);
  background-image: url('../images/checked.svg');
  background-position: 50%;
  background-size: auto;
  border-color: #5956e9;
}

.contact-field-item {
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.project-details-section {
  padding-top: 0;
  padding-bottom: 100px;
}

.project-details-wrapper {
  grid-column-gap: var(--speacing--space-80px);
  grid-row-gap: var(--speacing--space-80px);
  flex-flow: column;
  display: flex;
}

.project-details-top {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.project-details-main {
  grid-column-gap: var(--speacing--space-40px);
  grid-row-gap: var(--speacing--space-40px);
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.project-details-image-wrap {
  border-radius: 20px;
  max-width: 720px;
  max-height: 520px;
  position: sticky;
  top: 10px;
  overflow: hidden;
}

.project-details-content-wrap {
  max-width: 600px;
}

.project-details-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.project-richtext h2 {
  margin-bottom: var(--speacing--space-32px);
  font-size: var(--typography--font-size-32px);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 600;
}

.project-richtext p {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-50);
  font-size: var(--typography--font-size-18px);
  margin-bottom: 45px;
  font-weight: 400;
  line-height: 1.8em;
}

.project-richtext ul {
  grid-column-gap: 50px;
  grid-row-gap: 32px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 48px;
  padding-left: 0;
  list-style-type: none;
  display: grid;
}

.project-richtext li {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-70);
  font-size: var(--typography--font-size-16px);
  background-image: url('../images/list-bullet.svg');
  background-position: 0 3px;
  background-repeat: no-repeat;
  background-size: auto;
  padding-left: 25px;
  font-weight: 500;
  line-height: 1.4em;
}

.project-richtext-image-wrap {
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  max-height: 394px;
  display: flex;
  overflow: hidden;
}

.project-richtext-image-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 40px;
  display: grid;
}

.project-richtext-image {
  object-fit: cover;
}

.project-info-item {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.project-info-line {
  background-color: var(--color--white-7);
  border-radius: 2px;
  width: 2px;
  height: 40px;
}

.project-info-icon {
  width: 40px;
}

.project-info-text {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white);
  font-size: var(--typography--font-size-20px);
  line-height: 1.3em;
  font-weight: var(--font-weight--weight-500);
}

.project-info-text-wrap {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--color--white-50);
  font-size: var(--typography--font-size-14px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1em;
  display: flex;
}

.blog-details-section {
  padding-bottom: 100px;
}

.blog-details-wrapper {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 1232px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.blog-details-image-wrap {
  border-radius: 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.blog-details-content-wrap {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  flex-flow: column;
  max-width: 800px;
  display: flex;
}

.blog-richtext h2 {
  margin-bottom: var(--speacing--space-32px);
  font-size: var(--typography--font-size-40px);
  font-weight: var(--font-weight--weight-600);
  letter-spacing: normal;
  text-transform: none;
}

.blog-richtext p {
  margin-bottom: var(--speacing--space-40px);
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-50);
  font-size: var(--typography--font-size-18px);
  line-height: 1.8em;
  font-weight: var(--font-weight--weight-400);
}

.blog-richtext ul {
  grid-column-gap: 50px;
  grid-row-gap: 32px;
  text-align: left;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 48px;
  padding-left: 0;
  list-style-type: none;
  display: grid;
}

.blog-richtext li {
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-70);
  font-size: var(--typography--font-size-16px);
  line-height: 1.4em;
  font-weight: var(--font-weight--weight-500);
  background-image: url('../images/list-bullet.svg');
  background-position: 0 3px;
  background-repeat: no-repeat;
  background-size: auto;
  padding-left: 25px;
}

.blog-richtext h3 {
  margin-bottom: var(--speacing--space-32px);
  font-size: var(--typography--font-size-32px);
  font-weight: var(--font-weight--weight-600);
}

.blog-richtext blockquote {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--color--white-50);
  font-size: var(--typography--font-size-24px);
  line-height: 1.4em;
  font-weight: var(--font-weight--weight-500);
  text-align: left;
  background-color: #141414;
  background-image: url('../images/quote-1.svg');
  background-position: 40px 40px;
  background-repeat: no-repeat;
  background-size: 38px;
  border-left-style: none;
  border-radius: 20px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 45px;
  padding: 80px 40px 40px;
  display: flex;
}

.blog-details-title-wap {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.blog-info {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.blog-info-item {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  font-family: var(--font-family--font-secondary);
  color: var(--color--white-50);
  font-size: var(--typography--font-size-16px);
  font-weight: var(--font-weight--weight-400);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.blog-info-line {
  background-color: var(--color--primary);
  flex: none;
  width: 2px;
  height: 10px;
}

.blog-details-title {
  font-size: var(--typography--font-size-40px);
  text-align: center;
  letter-spacing: normal;
  text-transform: capitalize;
  line-height: 1.2em;
}

.about-button {
  color: var(--color--white);
  flex: none;
  justify-content: center;
  align-items: center;
  width: 174px;
  height: 174px;
  margin-top: 40px;
  transition: all .3s;
  display: flex;
  position: relative;
}

.about-button-bg {
  color: var(--color--dark-primary);
}

.about-button-content {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  text-underline-offset: 2px;
  justify-content: flex-start;
  align-items: center;
  text-decoration: underline;
  display: flex;
  position: absolute;
}

.about-button-icon {
  width: 9px;
}

.style-title {
  font-size: var(--typography--font-size-80px);
}

.color-style-wrap {
  grid-column-gap: var(--speacing--space-16px);
  grid-row-gap: var(--speacing--space-16px);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.color-style-item {
  color: var(--color--white);
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  padding-top: 60px;
  padding-bottom: 60px;
  font-size: 20px;
  display: flex;
}

.color-style-item._1 {
  background-color: var(--color--primary);
}

.color-style-item._2 {
  border: 1px solid var(--color--white-20);
  background-color: var(--color--dark-primary);
}

.color-style-item._3 {
  border: 1px solid var(--color--white-20);
  background-color: var(--color--dark-secondary);
}

.color-style-item._4 {
  background-color: var(--color--white);
  color: var(--color--dark-primary);
}

.text-block {
  color: var(--color--dark-primary);
}

.typography-style, .richtext {
  grid-column-gap: var(--speacing--space-20px);
  grid-row-gap: var(--speacing--space-20px);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.richtext h1 {
  font-size: var(--typography--font-size-94px);
  letter-spacing: 2px;
}

.richtext h2 {
  font-size: var(--typography--font-size-80px);
}

.richtext h3 {
  font-size: var(--typography--font-size-48px);
}

.richtext h4 {
  font-size: var(--typography--font-size-40px);
}

.richtext h5 {
  font-size: var(--typography--font-size-32px);
}

.richtext h6 {
  font-size: var(--typography--font-size-28px);
}

.button-style {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.change-wrapper {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.change-wrapper.middle {
  justify-content: flex-start;
  align-items: center;
}

.change-item {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.text-large {
  color: var(--color--white);
  text-align: center;
  letter-spacing: 1px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em;
}

.text-large.left-align {
  text-align: left;
}

.text-large._60 {
  color: var(--color--white-60);
}

._404-wrapper {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
}

._404-wrapper.light {
  background-color: #ffffff1a;
}

._404-content {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  text-align: center;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

._404-text-wrap {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 600px;
  display: flex;
}

.lottie-animation {
  width: 400px;
}

._404-title {
  font-size: 60px;
}

.blog-share-wrapper {
  border-top: 1px solid var(--color--white-7);
  justify-content: space-between;
  align-items: center;
  margin-top: -40px;
  padding-top: 35px;
  display: flex;
}

.blog-tag-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.blog-tag {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  opacity: .6;
  color: var(--color--white);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  transition: all .3s;
  display: flex;
}

.blog-tag:hover {
  opacity: 1;
  color: var(--color--primary);
}

.blog-share-wrap {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.share-social-area {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.share-text {
  font-family: var(--font-family--font-promary);
  color: var(--color--white);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4em;
}

.about-text-item {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: relative;
}

.about-text-overlay {
  background-color: var(--color--dark-primary);
  opacity: .5;
  pointer-events: none;
  width: 100%;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.about-text-overlay._01 {
  width: 81%;
}

.about-text-overlay._02 {
  margin-right: 140px;
}

.about-text-overlay._03 {
  width: 13%;
}

.about-text-overlay._05 {
  margin-right: 60%;
}

.about-text-item-wrap {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.widget-link-item {
  color: var(--color--white-70);
  text-decoration: none;
  transition: color .3s;
  position: relative;
  overflow: hidden;
}

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

.instructions-title {
  font-size: 100px;
}

.style-text-wrap {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.nav-top-wrap {
  display: none;
}

.menu-button-3 {
  color: #1c1a1e;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: none;
}

.nav-close-wrap {
  cursor: pointer;
  border: 1px solid #eee;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}

.button-primary {
  color: #fff;
  background-color: #ff4d00;
  border-radius: 10px;
  flex: none;
  justify-content: center;
  align-items: center;
  height: 56px;
  padding-left: 36px;
  padding-right: 36px;
  font-family: DM Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.button-secondary {
  color: #fff;
  background-color: #1c1a1e;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding-left: 28px;
  padding-right: 28px;
  font-family: DM Sans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1em;
  text-decoration: none;
  display: flex;
}

.sidebar-button {
  color: #1c1a1e;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}

.cursor-wrapper {
  z-index: 999999;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0 0% 0%;
  overflow: hidden;
}

.cursor-1 {
  background-color: var(--color--white-45);
  border-radius: 20px;
  width: 4px;
  height: 4px;
  position: absolute;
}

.cursor-2 {
  border: 1px solid var(--color--white-45);
  border-radius: 50%;
  width: 24px;
  height: 24px;
}

.menu-button-close {
  display: none;
}

.text-block-2 {
  font-family: var(--font-family--font-secondary);
  font-size: var(--typography--font-size-16px);
  font-weight: var(--font-weight--weight-600);
}

.utility-page-form {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.password-image {
  width: 120px;
}

.submit-button {
  background-color: var(--color--dark-secondary);
  color: var(--color--white);
  border-radius: 10px;
  padding: 20px 36px;
  font-weight: 700;
  line-height: 1em;
  transition: all .3s;
}

.submit-button:hover {
  background-color: var(--color--primary);
  color: var(--color--dark-primary);
}

.password-text {
  color: var(--color--white);
  font-size: var(--typography--font-size-32px);
  font-weight: var(--font-weight--weight-500);
}

@media screen and (min-width: 1280px) {
  h1 {
    font-size: 120px;
  }

  .style-section {
    padding-top: 120px;
    padding-bottom: 100px;
  }

  .hero-video {
    height: 720px;
  }

  .hero-title {
    font-size: 159px;
  }

  .hero-subtext {
    margin-left: 120px;
  }

  .hero-icon {
    width: 120px;
  }

  .hero-icon._01 {
    width: 100px;
    margin-bottom: -80px;
  }

  .hero-icon._02 {
    width: 130px;
  }

  .hero-icon._03 {
    width: 100px;
  }

  .about-section {
    padding-top: 110px;
    padding-bottom: 110px;
  }

  .about-wrap {
    padding-left: 240px;
  }

  .about-text-wrap {
    max-width: 820px;
  }

  .about-text {
    font-size: 26px;
  }

  .about-image {
    width: 240px;
  }

  .about-image-wrap {
    right: 2%;
  }

  .brand-wrap {
    grid-column-gap: 132px;
    grid-row-gap: 132px;
  }

  .video-wrap {
    height: 730px;
  }

  .brand-wrapper {
    grid-column-gap: 132px;
    grid-row-gap: 132px;
  }

  .award-section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .award-image {
    width: 180px;
  }

  .marquee-area {
    padding-top: 160px;
    padding-bottom: 160px;
  }

  .marquee-wrapper {
    grid-column-gap: 45px;
    grid-row-gap: 45px;
  }

  .marquee-text {
    font-size: 88px;
  }

  .marquee-icon-wrapper {
    width: 260px;
    height: 260px;
  }

  .blog-section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .blog-collection-list {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .blog-collection-list.grid {
    grid-column-gap: 48px;
    grid-row-gap: 60px;
  }

  .blog-meta {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
  }

  .blog-name {
    font-size: 20px;
  }

  .footer-bottom-wrap {
    grid-column-gap: 45px;
    grid-row-gap: 45px;
  }

  .copywrite-text {
    font-size: 16px;
  }

  .footer-big-text {
    letter-spacing: 6px;
    font-size: 260px;
  }

  .footer-line {
    margin-bottom: 100px;
  }

  .project-section {
    padding-top: 120px;
  }

  .project-title-wrap {
    width: 750px;
  }

  .project-icon {
    width: 140px;
  }

  .project-title {
    font-size: 90px;
  }

  .project-item-wrap._01 {
    grid-column-gap: 160px;
    grid-row-gap: 160px;
    padding-top: 120px;
  }

  .project-item-wrap._02 {
    grid-column-gap: 340px;
    grid-row-gap: 340px;
    padding-top: 260px;
  }

  .project-item-wrap._04 {
    padding-top: 180px;
  }

  .project-item._01, .project-item._03 {
    max-width: 300px;
  }

  .project-item._04 {
    max-width: 200px;
  }

  .project-item._06 {
    margin-right: -30px;
  }

  .project-item._08 {
    margin-right: -40px;
  }

  .project-item._09 {
    align-self: center;
    max-width: 200px;
    margin-bottom: 100px;
    margin-right: -180px;
  }

  .project-item._10 {
    max-width: 300px;
    margin-bottom: 100px;
  }

  .project-item._11 {
    max-width: 200px;
    margin-left: 20px;
  }

  .project-item._12 {
    max-width: 200px;
    margin-bottom: 100px;
  }

  .project-item._13 {
    max-width: 300px;
    margin-bottom: 140px;
  }

  .project-item._14 {
    max-width: 200px;
  }

  .project-item._15 {
    max-width: 300px;
    margin-bottom: 160px;
  }

  .project-item._16 {
    max-width: 200px;
    margin-bottom: 240px;
  }

  .project-item._17 {
    max-width: 300px;
    margin-bottom: 140px;
  }

  .project-item._18, .project-item._02 {
    max-width: 200px;
  }

  .project-overlay {
    padding: 20px;
  }

  .project-items-coll-2 {
    grid-column-gap: 120px;
    grid-row-gap: 120px;
  }

  .blog-musk {
    max-width: 402px;
  }

  .blog-slide-item {
    margin-right: 40px;
  }

  .nav-menu-wrap {
    grid-column-gap: 55px;
    grid-row-gap: 55px;
  }

  .inner-hero-area {
    padding-top: 240px;
    padding-bottom: 70px;
  }

  .inner-hero-title {
    font-size: 120px;
  }

  .about-details-area {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .about-title {
    text-transform: none;
    font-size: 54px;
    line-height: 1.1em;
  }

  .about-details-text-area {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .about-details-image-area {
    max-width: 600px;
    padding-right: 60px;
  }

  .about-logo-image {
    width: 320px;
  }

  .team-slide-item {
    margin-right: 20px;
  }

  .services-section {
    padding-top: 100px;
    padding-bottom: 120px;
  }

  .services-image {
    width: 520px;
  }

  .contact-item-wrap {
    padding: var(--speacing--space-32px) var(--speacing--space-40px);
    border-radius: var(--redius--redius-12px);
  }

  .contact-text {
    font-size: 22px;
  }

  .contact-item-wrapper {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }

  .contact-section {
    padding-top: 100px;
    padding-bottom: 120px;
  }

  .contact-wrapper {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }

  .project-details-section {
    padding-top: 40px;
    padding-bottom: 120px;
  }

  .project-details-wrapper {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .project-details-main {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .project-details-image-wrap {
    max-height: 540px;
  }

  .project-details-content-wrap {
    max-width: 740px;
  }

  .project-richtext-image-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .blog-details-section {
    padding-bottom: 120px;
  }

  .blog-details-wrapper {
    max-width: 1140px;
  }

  .blog-details-image-wrap {
    max-height: 540px;
  }

  .blog-details-content-wrap {
    max-width: 900px;
  }

  .blog-details-title {
    font-size: 48px;
  }

  .text-large {
    font-size: 26px;
  }

  .instructions-title {
    font-size: 120px;
  }
}

@media screen and (min-width: 1440px) {
  h1 {
    font-size: 140px;
  }

  .style-section {
    padding-top: 140px;
    padding-bottom: 120px;
  }

  .hero-video {
    height: 812px;
  }

  .navbar {
    padding-top: 40px;
  }

  .hero-title {
    font-size: 190px;
  }

  .hero-icon {
    width: 160px;
  }

  .hero-icon._01 {
    width: 120px;
  }

  .hero-icon._02 {
    width: 160px;
  }

  .hero-icon._03 {
    width: 110px;
    margin-right: -80px;
  }

  .about-section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .about-wrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .about-subtitle {
    max-width: 220px;
  }

  .about-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    padding-left: 260px;
  }

  .about-text-wrap {
    max-width: 950px;
  }

  .about-text {
    letter-spacing: 1.5px;
    font-size: 30px;
  }

  .about-image-wrap {
    width: 280px;
    height: 280px;
    bottom: -16%;
    right: 3%;
  }

  .about-brand-wrapper {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .brand-area {
    max-width: 1220px;
  }

  .brand-wrap {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
  }

  .video-wrap {
    height: 792px;
  }

  .brand-wrapper {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
  }

  .award-section {
    padding-top: 140px;
    padding-bottom: 140px;
  }

  .award-wrapper {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .award-image {
    width: 200px;
  }

  .marquee-area {
    padding-top: 180px;
    padding-bottom: 180px;
  }

  .marquee-wrapper {
    grid-column-gap: 52px;
    grid-row-gap: 52px;
  }

  .marquee-item-wrap, .marquee-item {
    grid-column-gap: 45px;
    grid-row-gap: 45px;
  }

  .marquee-text {
    font-size: 100px;
  }

  .marquee-icon-wrapper {
    width: 300px;
    height: 300px;
  }

  .blog-section {
    padding-top: 130px;
    padding-bottom: 140px;
  }

  .blog-wrapper {
    grid-column-gap: 70px;
    grid-row-gap: 70px;
  }

  .blog-collection-list {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }

  .blog-collection-list.grid {
    grid-column-gap: 60px;
    grid-row-gap: 72px;
  }

  .blog-details {
    margin-bottom: 40px;
  }

  .footer-section {
    padding-top: 70px;
  }

  .footer-wrapper {
    margin-bottom: 110px;
  }

  .footer-big-text {
    letter-spacing: 8px;
    font-size: 292px;
  }

  .footer-line {
    margin-bottom: 115px;
  }

  .project-section {
    padding-top: 130px;
  }

  .project-title-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .project-item-wrapper {
    grid-template-columns: 1fr .6fr 1.5fr 1fr;
  }

  .project-title-wrap {
    width: 820px;
  }

  .project-title-wrap._02 {
    grid-column-gap: 128px;
    grid-row-gap: 128px;
    justify-content: flex-end;
    align-items: center;
  }

  .project-icon {
    width: 156px;
  }

  .project-title {
    font-size: 100px;
  }

  .project-item-wrap._01 {
    grid-column-gap: 180px;
    grid-row-gap: 180px;
    padding-top: 150px;
  }

  .project-item-wrap._02 {
    grid-column-gap: 440px;
    grid-row-gap: 440px;
    padding-top: 300px;
  }

  .project-item-wrap._04 {
    padding-top: 200px;
  }

  .project-item._01, .project-item._03 {
    max-width: 316px;
  }

  .project-item._04 {
    max-width: 210px;
  }

  .project-item._06 {
    margin-right: -40px;
  }

  .project-item._09 {
    align-self: center;
    max-width: 210px;
    margin-bottom: 120px;
    margin-right: -170px;
  }

  .project-item._10 {
    max-width: 316px;
    margin-bottom: 170px;
  }

  .project-item._11 {
    align-self: flex-start;
    max-width: 210px;
    margin-bottom: 50px;
    margin-left: 0;
  }

  .project-item._12 {
    max-width: 210px;
    margin-bottom: 120px;
  }

  .project-item._13 {
    align-self: center;
    max-width: 316px;
    margin-bottom: 160px;
  }

  .project-item._14 {
    align-self: flex-start;
    max-width: 210px;
  }

  .project-item._15 {
    max-width: 316px;
    margin-bottom: 180px;
  }

  .project-item._16 {
    max-width: 210px;
    margin-bottom: 320px;
  }

  .project-item._17 {
    max-width: 316px;
    margin-bottom: 172px;
  }

  .project-item._18, .project-item._02 {
    max-width: 210px;
  }

  .project-items-coll-2 {
    grid-column-gap: 150px;
    grid-row-gap: 150px;
  }

  .blog-musk {
    max-width: 442px;
  }

  .left-arrow {
    right: 70px;
  }

  .inner-hero-area {
    padding-top: 280px;
  }

  .inner-hero-title {
    font-size: 132px;
  }

  .about-details-area {
    padding-top: 132px;
    padding-bottom: 132px;
  }

  .about-title {
    font-size: 60px;
  }

  .about-details-text-area {
    grid-column-gap: 66px;
    grid-row-gap: 66px;
  }

  .about-details-image-area {
    max-width: 720px;
    padding-right: 100px;
  }

  .about-logo-image {
    width: auto;
  }

  .team-slide-item {
    margin-right: 30px;
  }

  .services-section {
    padding-top: 120px;
    padding-bottom: 140px;
  }

  .services-image {
    width: 540px;
  }

  .contact-item-wrap {
    padding: 40px 54px;
  }

  .contact-section {
    padding-top: 130px;
    padding-bottom: 130px;
  }

  .contact-wrapper {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .project-details-section {
    padding-top: 60px;
    padding-bottom: 140px;
  }

  .project-details-wrapper {
    grid-column-gap: 120px;
    grid-row-gap: 120px;
  }

  .project-details-main {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .project-details-image-wrap {
    max-height: 550px;
  }

  .project-details-content-wrap {
    max-width: 780px;
  }

  .project-richtext ul {
    margin-bottom: 60px;
  }

  .project-richtext-image-wrapper {
    margin-bottom: 48px;
  }

  .blog-details-section {
    padding-bottom: 140px;
  }

  .blog-details-wrapper {
    grid-column-gap: 120px;
    grid-row-gap: 120px;
    max-width: 1200px;
  }

  .blog-details-image-wrap {
    max-height: 550px;
  }

  .blog-details-content-wrap {
    grid-column-gap: 72px;
    grid-row-gap: 72px;
    max-width: 926px;
  }

  .blog-richtext ul {
    margin-bottom: 60px;
  }

  .text-large {
    letter-spacing: 1.5px;
    font-size: 30px;
  }

  ._404-content {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  ._404-text-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    max-width: 680px;
  }

  .lottie-animation {
    width: 440px;
  }

  .instructions-title {
    font-size: 140px;
  }
}

@media screen and (min-width: 1920px) {
  h1 {
    font-size: 150px;
  }

  .style-section {
    padding-top: 150px;
  }

  .hero-overlay {
    padding-bottom: 20px;
  }

  .hero-video {
    height: 1040px;
  }

  .hero-title {
    font-size: 142px;
  }

  .hero-subtext {
    margin-left: 125px;
  }

  .hero-icon {
    width: 218px;
  }

  .hero-icon._01 {
    width: 153px;
    margin-bottom: -100px;
  }

  .hero-icon._02 {
    width: 210px;
    margin-top: -160px;
  }

  .hero-icon._03 {
    width: 148px;
    margin-bottom: -110px;
    margin-right: -100px;
  }

  .about-section {
    padding-top: 130px;
    padding-bottom: 130px;
  }

  .about-wrap {
    grid-column-gap: 70px;
    grid-row-gap: 70px;
    padding-left: 286px;
    position: relative;
  }

  .about-image-wrap {
    width: 349px;
    height: 333px;
    bottom: -20%;
    right: 5%;
  }

  .brand-area {
    max-width: 1370px;
  }

  .video-wrap {
    height: 940px;
  }

  .award-section {
    padding-top: 150px;
    padding-bottom: 150px;
  }

  .award-image {
    width: 227px;
  }

  .marquee-area {
    padding-top: 215px;
    padding-bottom: 215px;
  }

  .marquee-wrapper, .marquee-item-wrap, .marquee-item {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .marquee-icon-wrapper {
    width: 331px;
    height: 330px;
  }

  .blog-section {
    padding-bottom: 150px;
  }

  .blog-collection-list {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .blog-collection-list.grid {
    grid-column-gap: 100px;
    grid-row-gap: 80px;
  }

  .footer-wrapper {
    margin-bottom: 120px;
  }

  .copywrite-text {
    font-size: 18px;
  }

  .footer-big-text {
    letter-spacing: 12px;
    font-size: 386px;
  }

  .section-line {
    margin-left: auto;
    margin-right: auto;
  }

  .project-item-wrap._01 {
    grid-column-gap: 208px;
    grid-row-gap: 208px;
  }

  .project-item-wrap._02 {
    grid-column-gap: 580px;
    grid-row-gap: 580px;
    padding-top: 350px;
  }

  .project-item-wrap._04 {
    justify-content: flex-start;
    align-items: flex-end;
    padding-top: 220px;
  }

  .project-item._09 {
    margin-bottom: 133px;
  }

  .project-item._10 {
    margin-bottom: 200px;
  }

  .project-item._12 {
    margin-bottom: 133px;
  }

  .project-item._13 {
    margin-bottom: 200px;
  }

  .project-item._15 {
    margin-bottom: 208px;
  }

  .project-item._16 {
    align-self: flex-start;
    margin-bottom: 390px;
  }

  .project-item._17 {
    margin-bottom: 208px;
  }

  .project-items-coll-2 {
    grid-column-gap: 170px;
    grid-row-gap: 170px;
  }

  .blog-musk {
    max-width: 484px;
  }

  .blog-slide-item {
    margin-right: 100px;
  }

  .inner-hero-area {
    padding-top: 312px;
  }

  .inner-hero-title {
    font-size: 150px;
  }

  .about-details-area {
    padding-top: 150px;
    padding-bottom: 150px;
  }

  .about-details-text-area {
    grid-column-gap: 72px;
    grid-row-gap: 72px;
  }

  .about-details-image-area {
    max-width: none;
    padding-right: 140px;
  }

  .services-section {
    padding-top: 130px;
    padding-bottom: 150px;
  }

  .services-image {
    width: 600px;
  }

  .contact-item-wrap {
    padding: 45px 60px;
  }

  .contact-item-wrapper {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
  }

  .contact-wrapper {
    grid-column-gap: 130px;
    grid-row-gap: 130px;
  }

  .project-details-section {
    padding-bottom: 150px;
  }

  .project-details-wrapper {
    grid-column-gap: 130px;
    grid-row-gap: 130px;
  }

  .project-details-main {
    grid-column-gap: 140px;
    grid-row-gap: 140px;
  }

  .project-details-image-wrap {
    max-height: 702px;
  }

  .project-details-content-wrap {
    max-width: 840px;
  }

  .project-richtext-image-wrapper {
    margin-bottom: 60px;
  }

  .blog-details-section {
    padding-bottom: 150px;
  }

  .blog-details-wrapper {
    max-width: 1232px;
  }

  .blog-details-image-wrap {
    max-height: 702px;
  }

  .blog-details-content-wrap {
    max-width: 840px;
  }

  ._404-text-wrap {
    max-width: 710px;
  }

  .lottie-animation {
    width: 520px;
  }

  .instructions-title {
    font-size: 150px;
  }
}

@media screen and (max-width: 991px) {
  body {
    --color--dark-primary: #090909;
    --font-family--font-secondary: "DM Sans", sans-serif;
    --color--white-50: #ffffff80;
    --typography--font-size-16px: 16px;
    --font-weight--weight-400: 400;
    --font-family--font-promary: Syne, sans-serif;
    --color--white: white;
    --typography--font-size-100px: 80px;
    --font-weight--weight-600: 600;
    --typography--font-size-94px: 72px;
    --font-weight--weight-500: 500;
    --typography--font-size-60px: 48px;
    --font-weight--weight-700: 700;
    --typography--font-size-48px: 40px;
    --typography--font-size-40px: 32px;
    --typography--font-size-32px: 28px;
    --color--white-60: #fff9;
    --typography--font-size-18px: 18px;
    --typography--font-size-20px: 20px;
    --color--white-80: #fffc;
    --typography--font-size-14px: 14px;
    --typography--font-size-24px: 22px;
    --speacing--space-140px: 120px;
    --speacing--space-100px: 80px;
    --speacing--space-40px: 32px;
    --speacing--space-32px: 28px;
    --color--transparent: #0000;
    --color--primary: #e3d327;
    --color--white-7: #ffffff12;
    --color--white-20: #fff3;
    --redius--redius-50px: 50px;
    --color--white-70: #ffffffb3;
    --color--white-45: #ffffff73;
    --speacing--space-30px: 26px;
    --speacing--space-80px: 64px;
    --redius--redius-32px: 24px;
    --speacing--space-16px: 16px;
    --speacing--space-10px: 10px;
    --color--dark-secondary: #141414;
    --typography--font-size-80px: 64px;
    --speacing--space-60px: 48px;
    --speacing--space-24px: 20px;
    --speacing--space-48px: 40px;
    --redius--redius-12px: 10px;
    --redius--redius-16px: 16px;
    --speacing--space-20px: 20px;
    --redius--redius-50: 50%;
    --speacing--space-72px: 60px;
    --redius--redius-20px: 20px;
    --redius--redius-8px: 8px;
    --typography--font-size-28px: 24px;
    --typography--font-size-72px: 60px;
    --speacing--space-120px: 80px;
    --speacing--space-18px: 18px;
    --redius--redius-24px: 24px;
    --redius--redius-4px: 4px;
  }

  h1 {
    letter-spacing: 3.5px;
  }

  h2 {
    letter-spacing: 2px;
  }

  h3 {
    letter-spacing: 1px;
  }

  .style-section {
    padding-bottom: 80px;
  }

  .hero-video {
    height: 460px;
  }

  .nav-link-item {
    justify-content: space-between;
    align-items: center;
    display: flex;
    position: relative;
  }

  .nav-menu-wrapper {
    z-index: 9999;
    background-color: var(--color--white-7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    flex-flow: column;
    width: 60%;
    padding: 40px;
    display: flex;
    position: absolute;
    inset: 0% auto auto 0%;
    overflow: auto;
  }

  .nav-menu-wrapper.tab-off {
    display: none;
  }

  .nav-menu-wrapper.tab-pn {
    width: 50%;
    padding: 24px 24px 40px;
    display: none;
    position: absolute;
    inset: 0%;
    overflow: auto;
  }

  .site-logo {
    z-index: 99;
  }

  .site-logo.w--current {
    z-index: 10;
  }

  .hero-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .hero-subtext {
    margin-left: 60px;
  }

  .hero-title-overlay, .hero-icon {
    display: none;
  }

  .hero-icon._01 {
    width: 70px;
  }

  .menu-button {
    border: 1px solid var(--color--white-45);
    background-color: var(--color--white-20);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--color--white);
    cursor: pointer;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    min-width: 48px;
    padding: 16px;
    display: flex;
    position: relative;
  }

  .menu-button.w--open {
    background-color: var(--color--white);
    color: var(--color--dark-primary);
  }

  .about-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .about-subtitle {
    max-width: 180px;
    padding: 12px 16px;
  }

  .about-wrap {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    padding-left: 0;
  }

  .about-text {
    letter-spacing: .8px;
  }

  .about-text.tab-on {
    display: block;
  }

  .about-image {
    display: none;
  }

  .about-brand-area {
    padding-top: 80px;
  }

  .video-wrapper {
    height: auto;
  }

  .brand-area {
    justify-content: flex-start;
    align-items: center;
    max-width: 100%;
  }

  .brand-logo {
    max-height: 45px;
  }

  .video-wrap {
    height: 420px;
  }

  .award-item {
    grid-template-columns: .75fr 1fr 1fr .25fr;
  }

  .award-image {
    display: none;
  }

  .marquee-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .marquee-icon-wrapper {
    width: 200px;
    height: 200px;
  }

  .blog-collection-list, .blog-collection-list.grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-big-text {
    letter-spacing: 4px;
    font-size: 20vw;
  }

  .footer-line {
    margin-bottom: 60px;
  }

  .footer-widget-wrap {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .footer-contact-area {
    flex-flow: row;
    max-width: none;
  }

  .section-line {
    top: 40px;
  }

  .project-item-wrapper {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-columns: 1fr .6fr 1fr;
    padding-top: 48px;
  }

  .project-title-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    width: 572px;
  }

  .project-title-line {
    width: 120px;
    height: 4px;
  }

  .project-icon {
    width: 100px;
  }

  .project-item-wrap._01 {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 0;
  }

  .project-item-wrap._02 {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0;
  }

  .project-item-wrap._03 {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: start stretch;
    display: grid;
  }

  .project-item-wrap._04 {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: flex-end;
    padding-top: 0;
    display: flex;
  }

  .project-item._06, .project-item._08 {
    margin-right: 0;
  }

  .project-item._09, .project-item._10, .project-item._11, .project-item._12, .project-item._13, .project-item._15 {
    margin-bottom: 0;
  }

  .project-item._16 {
    align-self: flex-end;
    margin-bottom: 0;
  }

  .project-item._17 {
    margin-bottom: 0;
  }

  .project-item._18 {
    align-self: flex-end;
  }

  .project-items-coll-2 {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .nav-link-text._02 {
    position: absolute;
    top: 100%;
  }

  .nav-link-dropdown {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .dropdown-list {
    flex-flow: wrap;
    padding-top: 10px;
    display: none;
    position: static;
  }

  .dropdown-item-wrapper {
    grid-column-gap: 60px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 24px;
  }

  .dr-list-line._02, .span-icon {
    display: none;
  }

  .nav-menu-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 88%;
    position: absolute;
    overflow: auto;
  }

  .inner-hero-area {
    padding-top: 140px;
    padding-bottom: 0;
  }

  .about-details-area {
    padding-top: 0;
  }

  .about-details-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .about-details-bottom-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
  }

  .about-title {
    font-size: 40px;
  }

  .about-title-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    max-width: 530px;
  }

  .about-details-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .about-details-text-area {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    max-width: none;
  }

  .about-details-image-area {
    padding-right: 0;
  }

  .about-details-text-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    max-width: none;
  }

  .video-link {
    width: 70px;
  }

  .about-logo-image {
    width: 320px;
    right: -15%;
  }

  .about-details-text-border-line {
    display: none;
  }

  .team-wrapper {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }

  .team-title-wrap {
    padding-bottom: 24px;
  }

  .services-content-wrap {
    grid-column-gap: 120px;
    grid-row-gap: 120px;
    justify-content: flex-start;
    max-width: 100%;
  }

  .services-image {
    display: none;
  }

  .contact-item-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    grid-template-columns: 1fr 1fr;
  }

  .contact-section {
    padding-top: 80px;
  }

  .contact-item.with-margin {
    margin-bottom: 24px;
  }

  .contact-line {
    margin-bottom: 50px;
  }

  .project-details-section {
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .project-details-top {
    grid-column-gap: var(--speacing--space-40px);
    grid-row-gap: var(--speacing--space-40px);
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .project-details-main {
    flex-flow: column;
  }

  .project-details-image-wrap {
    position: static;
  }

  .project-details-content-wrap {
    max-width: 100%;
  }

  .project-richtext p {
    margin-bottom: 40px;
  }

  .project-richtext ul {
    grid-column-gap: 40px;
    grid-row-gap: 24px;
    margin-bottom: 40px;
  }

  .project-richtext-image-wrapper {
    margin-bottom: 36px;
  }

  .project-info-line {
    display: none;
  }

  .blog-details-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .blog-details-wrapper {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    max-width: 1040px;
  }

  .blog-details-content-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    max-width: 100%;
  }

  .blog-richtext {
    text-align: left;
  }

  .blog-richtext ul {
    grid-column-gap: 40px;
    grid-row-gap: 24px;
    margin-bottom: 40px;
  }

  .blog-richtext blockquote {
    background-size: 32px;
    margin-bottom: 40px;
  }

  .blog-details-title-wap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .about-button {
    margin-top: 0;
  }

  .color-style-wrap {
    grid-template-columns: 1fr 1fr;
  }

  .change-wrapper {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .change-item {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .text-large {
    letter-spacing: .8px;
    font-size: 22px;
  }

  ._404-content {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  ._404-text-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    max-width: 520px;
  }

  ._404-title {
    font-size: 48px;
  }

  .share-social-area {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .about-text-item-wrap {
    display: none;
  }

  .menu-button-icon {
    width: 16px;
  }

  .menu-button-icon-wrap {
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  }

  .instructions-title {
    font-size: 80px;
  }

  .nav-top-wrap {
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 30px;
    display: flex;
  }

  .close-icon {
    width: 18px;
  }

  .menu-button-3 {
    color: #1c1a1e;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
  }

  .menu-button-3.w--open {
    color: #1c1a1e;
    background-color: #fff;
    border-color: #eee;
  }

  .nav-close-wrap {
    border: 1px solid #eee;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    display: flex;
  }

  .cursor-wrapper {
    display: none;
  }

  .menu-button-close {
    border: 1px solid var(--color--white-45);
    background-color: var(--color--white-7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: var(--color--white);
    cursor: pointer;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    min-width: 48px;
    padding: 15px;
    display: flex;
    position: relative;
  }

  .menu-button-close.w--open {
    background-color: var(--color--white);
    color: var(--color--dark-primary);
  }

  .dr-icon {
    width: 18px;
  }
}

@media screen and (max-width: 767px) {
  body {
    --color--dark-primary: #090909;
    --font-family--font-secondary: "DM Sans", sans-serif;
    --color--white-50: #ffffff80;
    --typography--font-size-16px: 16px;
    --font-weight--weight-400: 400;
    --font-family--font-promary: Syne, sans-serif;
    --color--white: white;
    --typography--font-size-100px: 60px;
    --font-weight--weight-600: 600;
    --typography--font-size-94px: 60px;
    --font-weight--weight-500: 500;
    --typography--font-size-60px: 40px;
    --font-weight--weight-700: 700;
    --typography--font-size-48px: 32px;
    --typography--font-size-40px: 28px;
    --typography--font-size-32px: 24px;
    --color--white-60: #fff9;
    --typography--font-size-18px: 16px;
    --typography--font-size-20px: 18px;
    --color--white-80: #fffc;
    --typography--font-size-14px: 14px;
    --typography--font-size-24px: 18px;
    --speacing--space-140px: 80px;
    --speacing--space-100px: 64px;
    --speacing--space-40px: 24px;
    --speacing--space-32px: 24px;
    --color--transparent: #0000;
    --color--primary: #e3d327;
    --color--white-7: #ffffff12;
    --color--white-20: #fff3;
    --redius--redius-50px: 50px;
    --color--white-70: #ffffffb3;
    --color--white-45: #ffffff73;
    --speacing--space-30px: 24px;
    --speacing--space-80px: 60px;
    --redius--redius-32px: 20px;
    --speacing--space-16px: 16px;
    --speacing--space-10px: 10px;
    --color--dark-secondary: #141414;
    --typography--font-size-80px: 52px;
    --speacing--space-60px: 40px;
    --speacing--space-24px: 18px;
    --speacing--space-48px: 32px;
    --redius--redius-12px: 8px;
    --redius--redius-16px: 16px;
    --speacing--space-20px: 18px;
    --redius--redius-50: 50%;
    --speacing--space-72px: 48px;
    --redius--redius-20px: 20px;
    --redius--redius-8px: 8px;
    --typography--font-size-28px: 20px;
    --typography--font-size-72px: 52px;
    --speacing--space-120px: 72px;
    --speacing--space-18px: 16px;
    --redius--redius-24px: 24px;
    --redius--redius-4px: 4px;
  }

  h1 {
    letter-spacing: 2.5px;
  }

  h2 {
    letter-spacing: 1px;
  }

  h3, h4 {
    letter-spacing: .5px;
  }

  .style-section {
    padding-bottom: 70px;
  }

  .hero-video {
    height: 400px;
  }

  .nav-menu-wrapper {
    padding: 32px;
  }

  .nav-menu-wrapper.tab-pn {
    width: 60%;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-wrapper {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .hero-title {
    font-size: 14vw;
  }

  .hero-subtext {
    margin-left: 40px;
    font-size: 18px;
  }

  .about-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .about-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .about-text {
    letter-spacing: .5px;
  }

  .about-brand-area {
    padding-top: 60px;
  }

  .brand-logo {
    max-height: 40px;
  }

  .video-wrap {
    height: 320px;
  }

  .award-top-wrap {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
  }

  .award-item {
    grid-template-columns: .6fr 1fr 1fr .25fr;
  }

  .marquee-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .marquee-icon-wrapper {
    width: 160px;
    height: 160px;
  }

  .blog-title.width-auto {
    width: auto;
  }

  .blog-collection-list {
    grid-template-columns: 1fr;
  }

  .blog-collection-list.grid {
    grid-column-gap: var(--speacing--space-48px);
    grid-row-gap: var(--speacing--space-48px);
    grid-template-columns: 1fr;
  }

  .footer-big-text {
    letter-spacing: 3px;
  }

  .footer-top-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    justify-content: space-between;
    align-items: flex-start;
  }

  .footer-line {
    margin-bottom: 52px;
  }

  .footer-widget-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-columns: 1fr 1fr;
  }

  .footer-social-area {
    flex-flow: wrap;
    max-width: 340px;
  }

  .widget-title {
    font-size: 18px;
  }

  .footer-contact-area {
    flex-flow: column;
  }

  .project-title-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .project-item-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: 1fr;
    padding-top: 40px;
  }

  .project-title-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    width: 440px;
  }

  .project-icon {
    width: 72px;
  }

  .project-item-wrap._01 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .project-item-wrap._02 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: flex-end;
    display: grid;
  }

  .project-item-wrap._03 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-columns: 1fr 1fr;
  }

  .project-item-wrap._04 {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: start stretch;
    display: grid;
  }

  .project-item._01, .project-item._03, .project-item._04, .project-item._05, .project-item._06, .project-item._07, .project-item._08, .project-item._09, .project-item._10, .project-item._11, .project-item._12, .project-item._13, .project-item._14, .project-item._15, .project-item._16, .project-item._17, .project-item._18, .project-item._02 {
    max-width: none;
  }

  .project-items-coll-2 {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-end;
    align-items: stretch;
    display: flex;
  }

  .dropdown-item-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    border-radius: 20px;
    flex-flow: column;
  }

  .nav-menu-wrap {
    grid-column-gap: 35px;
    grid-row-gap: 35px;
  }

  .about-details-wrapper {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .about-details-top-wrap {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .about-title {
    font-size: 32px;
  }

  .about-title-wrap {
    max-width: none;
  }

  .about-details-wrap {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .video-link {
    width: 60px;
  }

  .about-logo-image {
    width: 260px;
    right: 0%;
  }

  .team-title-wrap {
    width: 75%;
    padding-bottom: 20px;
  }

  .services-section {
    padding-top: 60px;
  }

  .services-content-wrap {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .services-icon {
    max-width: 60px;
  }

  .services-icon-wrap {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .contact-textarea {
    min-height: 140px;
  }

  .contact-item-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }

  .contact-text-field {
    min-height: 48px;
  }

  .contact-form {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .contact-checkbox-field {
    margin-bottom: 24px;
  }

  .contact-section {
    padding-top: 60px;
  }

  .contact-wrapper {
    grid-column-gap: 50px;
    grid-row-gap: 50px;
  }

  .contact-line {
    margin-bottom: 40px;
  }

  .contact-field-item-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .contact-title-wrap {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    margin-bottom: 24px;
  }

  .contact-field-label {
    margin-bottom: 10px;
  }

  .project-details-section {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .project-richtext p {
    margin-bottom: 32px;
  }

  .project-richtext ul {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
    margin-bottom: 32px;
  }

  .project-richtext-image-wrapper {
    grid-template-columns: 1fr;
    margin-bottom: 30px;
  }

  .project-info-icon {
    width: 36px;
  }

  .blog-details-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .blog-details-wrapper {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .blog-details-image-wrap {
    border-radius: 16px;
  }

  .blog-details-content-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .blog-richtext ul {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
    margin-bottom: 32px;
  }

  .blog-richtext h3 {
    margin-bottom: 28px;
  }

  .blog-richtext blockquote {
    background-position: 30px 24px;
    background-size: 30px;
    margin-bottom: 32px;
    padding: 60px 32px 32px;
  }

  .blog-richtext strong {
    color: var(--color--white);
  }

  .blog-details-title-wap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .blog-info {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: wrap;
  }

  .blog-details-title {
    text-align: left;
  }

  .about-button {
    margin-top: 24px;
  }

  .change-wrapper {
    grid-column-gap: 60px;
    grid-row-gap: 60px;
  }

  .change-item {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .text-large {
    letter-spacing: .5px;
    font-size: 18px;
  }

  ._404-content {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  ._404-text-wrap {
    max-width: 420px;
  }

  .lottie-animation {
    width: 80%;
  }

  ._404-title {
    font-size: 40px;
  }

  .blog-share-wrapper {
    margin-top: -30px;
    padding-top: 24px;
  }

  .blog-tag-wrap, .share-social-area {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .instructions-title {
    font-size: 10vw;
  }

  .nav-top-wrap {
    margin-bottom: 25px;
  }
}

@media screen and (max-width: 479px) {
  body {
    --color--dark-primary: #090909;
    --font-family--font-secondary: "DM Sans", sans-serif;
    --color--white-50: #ffffff80;
    --typography--font-size-16px: 16px;
    --font-weight--weight-400: 400;
    --font-family--font-promary: Syne, sans-serif;
    --color--white: white;
    --typography--font-size-100px: 48px;
    --font-weight--weight-600: 600;
    --typography--font-size-94px: 48px;
    --font-weight--weight-500: 500;
    --typography--font-size-60px: 32px;
    --font-weight--weight-700: 700;
    --typography--font-size-48px: 28px;
    --typography--font-size-40px: 24px;
    --typography--font-size-32px: 20px;
    --color--white-60: #fff9;
    --typography--font-size-18px: 16px;
    --typography--font-size-20px: 16px;
    --color--white-80: #fffc;
    --typography--font-size-14px: 14px;
    --typography--font-size-24px: 16px;
    --speacing--space-140px: 60px;
    --speacing--space-100px: 60px;
    --speacing--space-40px: 20px;
    --speacing--space-32px: 20px;
    --color--transparent: #0000;
    --color--primary: #e3d327;
    --color--white-7: #ffffff12;
    --color--white-20: #fff3;
    --redius--redius-50px: 50px;
    --color--white-70: #ffffffb3;
    --color--white-45: #ffffff73;
    --speacing--space-30px: 20px;
    --speacing--space-80px: 48px;
    --redius--redius-32px: 16px;
    --speacing--space-16px: 16px;
    --speacing--space-10px: 10px;
    --color--dark-secondary: #141414;
    --typography--font-size-80px: 40px;
    --speacing--space-60px: 32px;
    --speacing--space-24px: 16px;
    --speacing--space-48px: 28px;
    --redius--redius-12px: 8px;
    --redius--redius-16px: 16px;
    --speacing--space-20px: 16px;
    --redius--redius-50: 50%;
    --speacing--space-72px: 40px;
    --redius--redius-20px: 20px;
    --redius--redius-8px: 8px;
    --typography--font-size-28px: 16px;
    --typography--font-size-72px: 40px;
    --speacing--space-120px: 60px;
    --speacing--space-18px: 16px;
    --redius--redius-24px: 24px;
    --redius--redius-4px: 4px;
  }

  h1 {
    letter-spacing: 1.5px;
  }

  .style-section {
    padding-bottom: 60px;
  }

  .hero-video {
    height: 300px;
  }

  .nav-menu-wrapper {
    padding: 24px;
  }

  .nav-menu-wrapper.tab-pn {
    width: 76%;
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .scroll-button {
    display: none;
  }

  .hero-wrapper {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .hero-subtext {
    margin-left: 20px;
    font-size: 16px;
  }

  .menu-button {
    padding-top: 14px;
  }

  .brand-logo {
    max-height: 35px;
  }

  .video-wrap, .about-video {
    height: 200px;
  }

  .award-top-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .award-item {
    grid-column-gap: 24px;
    grid-row-gap: 12px;
    flex-flow: wrap;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    display: grid;
  }

  .marquee-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .marquee-icon-wrapper {
    width: 120px;
    height: 120px;
  }

  .blog-title {
    width: 140px;
  }

  .footer-big-text {
    letter-spacing: 2px;
    font-size: 19.5vw;
  }

  .footer-line {
    margin-bottom: 40px;
  }

  .footer-widget-wrap {
    grid-column-gap: 0px;
    grid-row-gap: 60px;
  }

  .footer-social-area {
    flex-flow: wrap;
    max-width: 210px;
  }

  .social-line {
    display: none;
  }

  .widget-title {
    font-size: 16px;
  }

  .footer-address-wrap {
    max-width: none;
  }

  .project-title-wrapper {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }

  .project-item-wrapper {
    padding-top: 32px;
  }

  .project-title-wrap {
    width: 320px;
    max-width: 89%;
  }

  .project-title-wrap._02 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .project-title-line {
    display: none;
  }

  .project-icon {
    width: 60px;
  }

  .project-item-wrap._01, .project-item-wrap._02, .project-item-wrap._03, .project-item-wrap._04 {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    grid-template-columns: 1fr;
  }

  .project-item._05, .project-item._06, .project-item._07, .project-item._08 {
    width: 100%;
  }

  .project-items-coll-2 {
    align-items: center;
  }

  .dropdown-item-wrapper {
    border-radius: 16px;
  }

  .nav-menu-wrap {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .about-details-wrapper {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .about-title {
    font-size: 24px;
  }

  .about-details-wrap {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    position: relative;
  }

  .about-details-text {
    text-indent: 54px;
    line-height: 2.2em;
  }

  .about-details-text._02 {
    text-indent: 0;
  }

  .video-link {
    z-index: 10;
    width: 40px;
    position: absolute;
  }

  .about-logo-image {
    width: 200px;
  }

  .team-title-wrap {
    width: 65%;
    padding-bottom: 16px;
  }

  .services-content-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: flex-start;
    align-items: flex-end;
  }

  .services-icon {
    max-width: 48px;
  }

  .services-icon-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
  }

  .services-serial {
    margin-right: -110px;
  }

  .contact-form-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .contact-wrapper {
    grid-column-gap: 45px;
    grid-row-gap: 45px;
  }

  .contact-item.with-margin {
    margin-bottom: 20px;
  }

  .contact-field-item-wrap {
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .project-details-top {
    grid-template-columns: 1fr;
  }

  .project-richtext p {
    margin-bottom: var(--speacing--space-24px);
  }

  .project-richtext ul {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    margin-bottom: 24px;
  }

  .project-richtext-image-wrapper {
    margin-bottom: 24px;
  }

  .project-info-icon {
    width: 32px;
  }

  .project-info-text {
    font-size: 18px;
  }

  .project-info-text-wrap {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .blog-details-wrapper {
    grid-column-gap: 45px;
    grid-row-gap: 45px;
  }

  .blog-details-image-wrap {
    border-radius: 12px;
  }

  .blog-details-content-wrap {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .blog-richtext ul {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    margin-bottom: 24px;
  }

  .blog-richtext blockquote {
    background-position: 16px 16px;
    background-size: 24px;
    margin-bottom: 24px;
    padding: 40px 16px 16px;
  }

  .about-button {
    width: 160px;
    height: 160px;
  }

  .color-style-wrap {
    grid-template-columns: 1fr;
  }

  .change-wrapper {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
  }

  .change-item {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .text-large {
    font-size: 16px;
  }

  ._404-content {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  ._404-text-wrap {
    max-width: 320px;
  }

  ._404-title {
    font-size: 32px;
  }

  .blog-share-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: -20px;
    padding-top: 20px;
  }

  .blog-tag-wrap {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .share-social-area {
    flex-flow: wrap;
  }

  .close-icon {
    width: 16px;
  }

  .menu-button-close {
    padding-top: 14px;
  }
}

#w-node-_1759403e-b20c-9464-904f-3194f6186847-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f6186851-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f618685b-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f6186865-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f618686f-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f6186879-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f6186883-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f618688d-f6186835 {
  justify-self: end;
}

@media screen and (max-width: 991px) {
  #w-node-f7f50526-9a89-612b-f2fc-8ec686280ac3-4ca80634 {
    order: 9999;
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-f7f50526-9a89-612b-f2fc-8ec686280ac4-4ca80634 {
    align-self: start;
  }

  #w-node-_0a73db53-043c-a813-eec0-246712d9588b-12d95866 {
    order: -9999;
  }

  #w-node-_0a73db53-043c-a813-eec0-246712d958b7-12d95866 {
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-f6de4081-e267-ae27-6b85-6269de22af84-4ca80639 {
    order: 9999;
    grid-area: span 1 / span 3 / span 1 / span 3;
  }

  #w-node-f6de4081-e267-ae27-6b85-6269de22af85-4ca80639, #w-node-f6de4081-e267-ae27-6b85-6269de22afbb-4ca80639 {
    align-self: start;
  }
}

@media screen and (max-width: 767px) {
  #w-node-f7f50526-9a89-612b-f2fc-8ec686280a2f-4ca80634 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-f7f50526-9a89-612b-f2fc-8ec686280a78-4ca80634 {
    order: 9999;
  }

  #w-node-f7f50526-9a89-612b-f2fc-8ec686280ac3-4ca80634 {
    grid-column: span 1 / span 1;
  }

  #w-node-_0a73db53-043c-a813-eec0-246712d9588b-12d95866 {
    order: 9999;
  }

  #w-node-_0a73db53-043c-a813-eec0-246712d958b7-12d95866, #w-node-f6de4081-e267-ae27-6b85-6269de22aef0-4ca80639 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-f6de4081-e267-ae27-6b85-6269de22af39-4ca80639 {
    order: 9999;
  }

  #w-node-f6de4081-e267-ae27-6b85-6269de22af84-4ca80639 {
    grid-column: span 1 / span 1;
  }

  #w-node-f6de4081-e267-ae27-6b85-6269de22b016-4ca80639 {
    align-self: start;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_0a73db53-043c-a813-eec0-246712d9588b-12d95866 {
    order: 9999;
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_0a73db53-043c-a813-eec0-246712d958b7-12d95866 {
    grid-area: span 1 / span 2 / span 1 / span 2;
    justify-self: start;
  }

  #w-node-_1759403e-b20c-9464-904f-3194f6186843-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f618684d-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f6186857-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f6186861-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f618686b-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f6186875-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f618687f-f6186835, #w-node-_1759403e-b20c-9464-904f-3194f6186889-f6186835 {
    justify-self: end;
  }
}