/* ============================================
   NOVAS WORX — TopTech tema uzerine marka override'lari
   Yuklenme sirasi: site.css (legacy) -> TopTech CSS -> bu dosya
   Tasarim tokenlari icin bkz: .claude/docs/design.md
   ============================================ */

:root {
    /* Tipografi — sablonun theme-default.css/style.css dosyalari da bu ailelere gecirildi.
       Rajdhani yalnizca marka yazisinda (.nw-brand) kullanilir. */
    --nw-font-heading: "Plus Jakarta Sans", sans-serif;
    --nw-font-body: "Inter", sans-serif;
    --nw-font-brand: "Nunito", sans-serif;

    --nw-primary: #0c5adb;
    --nw-primary-dark: #0b59d7;
    --nw-dark: #041424;
    --nw-navy: #000048;
    --nw-text: #686868;
    --nw-bg-light: #f3f8fc;
    --nw-white: #ffffff;
    --nw-border: #e6eefb;

    /* Koyu zemin uzerindeki vurgu mavisi. --nw-primary (#0c5adb) lacivert uzerinde
       3.2:1'de kaliyor (AA icin 4.5 gerekli); bu ton 6.9:1 veriyor. */
    --nw-accent-light: #5b9bff;
}

/* --- Metin logo (sablonun gorsel logosu yerine marka adi) --- */
.nw-brand {
    font-family: var(--nw-font-brand);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1;
    color: var(--nw-navy);
    display: inline-block;
    text-transform: uppercase;
}

.nw-brand span {
    color: var(--nw-primary);
}

.nw-brand:hover {
    color: var(--nw-navy);
}

.nw-brand-light,
.nw-brand-light:hover {
    color: var(--nw-white);
}

.footer-logo .nw-brand {
    margin-bottom: 22px;
}

/* Header zemini her iki varyantta da koyu: ic sayfada seffaf/koyu breadcrumb uzerinde,
   ana sayfada --nw-navy (TD0003). Marka yazisi ikisinde de beyaz.
   `.header-area` yalnizca masaustu header'i secer; footer logosu etkilenmez. */
.header-area .nw-brand,
.header-area .nw-brand:hover {
    color: var(--nw-white);
}

/* "WORX" hecesi: koyu zeminde --nw-primary 3.2:1'de kaliyor, acik tona gecer. */
.header-area .nw-brand span {
    color: var(--nw-accent-light);
}

/* --- Aktif menu ogesi ---
   TD0003: her iki header de koyu zeminli oldugu icin vurgu acik tona alindi. */
.style-two .header-menu ul li.active > a,
.inner-style .header-menu ul li.active > a {
    color: var(--nw-accent-light);
}

/* --- Dil secici (sub-menu icinde form + button) --- */
.nw-lang-switch > a {
    cursor: pointer;
}

.nw-lang-switch > a .bi-globe2 {
    left: 0;
    margin-right: 6px;
}

.header-menu ul li .sub-menu li form {
    margin: 0;
}

.nw-lang-item {
    display: block;
    width: 200px;
    padding: 8px 19px;
    border: 0;
    background: transparent;
    text-align: left;
    color: #1e1e1e;
    font-family: var(--nw-font-body);
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    position: relative;
    z-index: 1;
    transition: 0.5s;
}

.nw-lang-item:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    background: var(--nw-primary);
    z-index: -1;
    transition: 0.5s;
}

.nw-lang-item:hover {
    color: var(--nw-white);
}

.nw-lang-item:hover:before {
    height: 100%;
    top: 0;
}

.nw-lang-item.active {
    color: var(--nw-primary);
}

.nw-lang-item.active:hover {
    color: var(--nw-white);
}

/* --- Mobil menu icindeki dil secici --- */
.mobile-menu .nw-lang-item,
.mean-nav .nw-lang-item {
    width: 100%;
    color: var(--nw-white);
    padding: 10px 5%;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.mobile-menu .nw-lang-item:hover,
.mean-nav .nw-lang-item:hover {
    background: var(--nw-primary);
    color: var(--nw-white);
}

/* --- Hero tipografisi ---
   Sablon hero basligini buyuk harfe ceviriyordu; Rajdhani kondens oldugu icin sorun degildi.
   Plus Jakarta Sans daha genis; Turkce uzun kelimeler ("ISLETMENIZI") 70px buyuk harfte
   satira sigmiyor ve okunurlugu dusuyor. Buyuk harf istenirse asagidaki blok kaldirilir. */
.style-two .hero-content h1,
.style-two .hero-content h4,
.hero-content h1,
.hero-content h4 {
    text-transform: none;
}

/* --- Hero basligindaki vurgu (resx icinde <span class="text-accent">) --- */
.hero-content .text-accent {
    color: var(--nw-accent-light);
}

/* --- Ortalanmis toptech butonu (bolum alti CTA'lari) --- */
.nw-center-button {
    display: inline-block;
    margin-top: 35px;
}

/* --- Breadcrumb alt basligi (sablonda yok, sayfa aciklamasi icin) --- */
.nw-breadcumb-subtitle {
    color: #d5d9e2;
    font-size: 18px;
    max-width: 620px;
    margin: 14px 0 0;
}

/* --- Ekip: gercek fotograf olmadigi icin ikon avatar --- */
.nw-team-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: var(--nw-bg-light);
}

.nw-team-avatar i {
    font-size: 120px;
    color: var(--nw-primary);
    line-height: 1;
}

.nw-team-desc {
    margin-top: 22px;
    text-align: center;
}

/* --- Referanslar: kart ve detay --- */
.nw-project-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    background: var(--nw-bg-light);
    color: var(--nw-primary);
    font-size: 56px;
}

.nw-project-summary {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 24px;
}

.nw-empty-state {
    padding: 60px 0;
    font-size: 18px;
    color: var(--nw-text);
}

/* Icerik duz metin saklanir; satir sonlari korunur */
.nw-prewrap {
    white-space: pre-wrap;
}

.nw-tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.nw-tech-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--nw-bg-light);
    color: var(--nw-navy);
    font-size: 13px;
    font-weight: 600;
}

.nw-customer-desc {
    margin-top: 6px;
    line-height: 24px;
}

/* --- Metin agirlikli ic sayfalar (Gizlilik vb.) --- */
.nw-text-page {
    padding: 100px 0;
}

.nw-text-page h2 {
    margin-bottom: 20px;
}

/* --- Honeypot: bot tuzagi. Ekran okuyuculardan da uzak tutmak icin
       aria-hidden + tabindex=-1 ile birlikte kullanilir (bkz. Contact.cshtml). --- */
.nw-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* --- Footer iletisim listesi (link degil, duz metin) --- */
.nw-footer-contact ul li {
    color: #d5d9e2;
    margin-bottom: 12px;
    line-height: 24px;
}

.nw-footer-contact ul li i {
    color: var(--nw-primary);
    margin-right: 10px;
}

/* ============================================
   TD0003 — Header ve hero duzenlemeleri (2026-09-07)
   Hocam ust bari (top-header-area), header'daki "Teklif Al" butonunu
   (.header-button) ve hero'nun sag gorsel sutununu kaldirdi. Asagidaki
   kurallar bu bosluklarin birakti izleri toparliyor.
   ============================================ */

/* --- 1. Menu sag kenara hizalanir ---
   Sablon her menu ogesine 35px sag bosluk veriyor; bu bosluk butonla menu
   arasindaki nefesti. Buton kalkinca son oge (dil secici) sag kenardan
   35px iceride asili kaldi. */
.header-area .header-menu > ul > li:last-child {
    margin-right: 0;
}

/* --- 2. Header yuksekligi (yalnizca ana sayfa) ---
   Sablon menu linklerine 40px alt/ust padding veriyor → ~100px header.
   22px ile ~64px'e iniyor. Ic sayfalar (inner-style) bilincli olarak
   disarida birakildi: oradaki header breadcrumb'in uzerine `margin-bottom:
   -106px` ile biniyor, padding degisirse o deger de yeniden hesaplanmali. */
.header-area.style-two .header-menu > ul > li > a {
    padding: 22px 0;
}

/* --- 3. Header zemini (ikinci tur: acik ton → koyu lacivert) ---
   Ilk denemede --nw-bg-light (#f3f8fc) verilmisti; uygulandi ama beyazdan
   ayirt edilemedi. Hocam'in karari (2026-09-07): **koyu lacivert**.
   Hero de koyu oldugu icin header ile hero arasindaki sinir tamamen kalkiyor,
   ustteki acik serit sorunu kokten cozuluyor. Alt ayraca da gerek kalmadi.
   Yalnizca style-two: inner-style header'i seffaf kalmali (breadcrumb uzerinde durur). */
.header-area.style-two {
    background: var(--nw-navy);
}

/* Sablon sticky durumda beyazi !important ile dayatiyor; ayni tona cekilir. */
.header-area.style-two.sticky {
    background: var(--nw-navy) !important;
}

/* Koyu zemin: menu metni, ikonlar ve dil secici tetikleyicisi beyaza doner.
   Sablon bunlari #000048 ile veriyordu — zeminle ayni renk kalirdi. */
.header-area.style-two .header-menu > ul > li > a,
.header-area.style-two .header-menu > ul > li > a i {
    color: var(--nw-white);
}

.header-area.style-two .header-menu > ul > li > a:hover,
.header-area.style-two .header-menu > ul > li > a:hover i {
    color: var(--nw-accent-light);
}

/* Aktif sayfa vurgusu yukaridaki "Aktif menu ogesi" blogunda --nw-accent-light'a alindi. */

/* --- 4. Hero yuksekligi (ikinci tur: 600px → 470px) ---
   Sablon 800px *sabit* yukseklik veriyordu (hero-bg.png 1920x810).
   Sag gorsel sutunu kaldirildigi icin bu alan gereksiz.
   `height` yerine `min-height`: kisa ekranda icerik kesilmez — sablonun
   `overflow: hidden` kurali sabit yukseklikte metni kirpardi.

   `background-position` neden `center 25%`: 470px'lik pencerede `cover`
   gorselin 340px'ini kirpiyor. Ortadan kirpinca yukselen okun ucu (gorselde
   y≈105) kesiliyordu; %25 ile ok tam gorunur kaliyor, bunun yerine barlarin
   alt ucu kirpiliyor — grafik yerden yukseliyormus gibi duruyor. */
.style-two.hero-area {
    height: auto;
    min-height: 470px;
    padding-top: 60px;
    padding-bottom: 60px;
    background-position: center 25%;
}

/* --- 5. Hero icerigi yukari ---
   View'da satir `align-items-center` yerine `align-items-start` aldi.
   Ikinci turda ustteki rozet satiri (h4) da kaldirildi; basligin uzerinde
   kalan bosluk sifirlanip CTA araligi biraz daha toplandi. */
.style-two .hero-content h1 {
    margin-top: 0;
}

.style-two .hero-button {
    margin-top: 32px;
}

/* Mobilde 470px bile genis kaliyor: baslik 28px'e dusuyor, icerik kisa. */
@media (max-width: 767px) {
    .style-two.hero-area {
        min-height: 360px;
        padding-top: 45px;
        padding-bottom: 45px;
    }
}

/* --- 3. tur: Hizmetler bolumu ---
   "Hizmetlerimiz" ile "Neler Yapiyoruz?" metinleri **resx icinde** takas edildi
   (Views degil): boylece rozet/baslik rollerinin CSS'i degismedi, yalnizca hangi
   metnin hangi rolde durdugu degisti. Alt aciklama satiri view'dan cikarildi;
   `Home_Services_Subtitle` anahtari uc dilde de duruyor (resx key sayilari esit
   kalsin diye silinmedi, geri almak tek satir).

   Bolum ustten 30px yukari alindi — aciklama satirinin bosalttigi yerin ustune. */
.style-two.service-area {
    padding-top: 90px;
}

/* Rozet satiri koyu zemin (service-bg.png) uzerinde duruyor; sablonun verdigi
   --nw-primary orada 4.5:1'in altinda kaliyor. Header'la ayni acik tona alindi.
   Not: ayni sinif acik zeminli bolumlerde de kullaniliyor, bu yuzden kural
   yalnizca .service-area altina baglandi. */
.style-two.service-area .section-title h4 {
    color: var(--nw-accent-light);
}

/* --- 4. tur: Iletisim bilgi kartlari ---
   Uc kart farkli yuksekliklerde duruyordu. Iki sebep vardi:
   (1) saat kartinda basliktan sonra fazladan bir <br /> — view'dan cikarildi,
   (2) deger metni 26px'ti ve "Pzt - Cmrt: 00:00 - 23:58" o boyutta satira
       sigmayip sariyordu.

   Saat metni **bilincli bir espri** (Hocam): "her zaman ulasabilirsiniz" mesaji
   veriyor. Metin kisaltilmadi; onun yerine deger punto'su 22px'e cekildi —
   uc kartta da tek satira siğiyor ve baslik/deger dengesi duzeliyor.

   `height: 100%` ise kalici guvence: metin ileride yine uzasa bile Bootstrap
   sutunlari zaten esit oldugu icin kartlar birbirine hizali kalir. */
.style-two .contact-info-box {
    height: 100%;
}

.style-two .contact-info-content p {
    font-size: 22px;
}

/* --- Tiklanabilir iletisim bilgileri (4. tur) ---
   Telefon ve e-posta uc yerde geciyor: ana sayfa kartlari, iletisim sayfasi
   bilgi kutulari ve footer. Hepsi `tel:` / `mailto:` linki oldu.

   `color: inherit` bilincli: her uc yerin kendi rengi ve hover davranisi var
   (kart hover'inda metin beyaza doner, footer'da acik gri durur). Link kendi
   rengini dayatirsa bu gecisler bozulurdu. Geri bildirim icin yalnizca
   uzerine gelince alt cizgi eklenir. */
.contact-info-content a,
.nw-footer-contact a {
    color: inherit;
    text-decoration: none;
    transition: 0.5s;
}

.contact-info-content a:hover,
.nw-footer-contact a:hover {
    color: inherit;
    text-decoration: underline;
}

/* --- 5. tur: Ana sayfa kartlari her dilde esit yukseklikte ---
   Sablon kartlara yukseklik vermiyor; her kart kendi icerigi kadar uzuyordu.
   Turkce metinlerde satir sayilari denk geldigi icin sorun gorunmuyordu, ama
   Ingilizce ve Fransizca cevirilerde bir kart digerinden uzun olunca satir
   bozuluyordu. Ayni sorun uc kart grubunda birden var.

   `height` neden `calc()`: sablon her karta bir `margin-bottom` veriyor.
   Duz `height: 100%` verilseydi kart, sutunun tamamini kaplayip margin'i
   disari tasirdi ve alttaki satira binerdi. Margin kadar dusulunce kart tam
   en uzun kardesinin boyuna oturuyor, bosluk korunuyor. */
.style-two .single-feature-box {
    height: calc(100% - 23px);
}

.style-two .single-services-box {
    height: calc(100% - 25px);
}

.style-two .single-about-icon-box {
    height: calc(100% - 29px);
}

/* ============================================
   TD0004 — Ic sayfa duzenlemeleri (2026-09-07)
   TST0002 Senaryo 7'de cikan 15 madde. Cogu tek bir ortak bilesene ait:
   `_Breadcrumb.cshtml` ve `.breadcumb-area` — bes sayfada birden gorunuyordu,
   bir kez duzeltildi.
   ============================================ */

/* --- N1/N4/N5: Sayfa basligi alani ---
   Sablon 211px ust + 200px alt dolgu veriyordu; `margin-top: -100px` ile de
   header'in uzerine biniyor. Gorunen yukseklik ~470px'ti — icinde yalnizca bir
   baslik olan bir serit icin fazla ("cok buyuk").

   Zemin neden duz renk: `breadcumb-bg.png` koyu lacivert bir fotograf, ama sol-alt
   ve sag-alt koseleri parlak mavi (#0c5adb) bir cerceveyle bitiyor. Mavi gorselin
   *icinde* oldugu icin CSS ile ayrica kaldirilamiyordu ve alan kisaldikca kadraji
   tutturmak kirilganlasiyordu. Gorsel tamamen kalkti: header zaten --nw-navy,
   ikisi artik tek koyu blok — ana sayfadaki header+hero cozumunun aynisi.

   `margin-top: -100px` korundu: header seffaf (`inner-style`) ve bu serit onun
   altindan geciyor. */
.breadcumb-area {
    background: var(--nw-navy);
    padding: 150px 0 60px;
}

/* 1199px altinda sablon `margin-top: 0` veriyor — header artik ustune binmiyor,
   o yuzden ust dolgu da bu kadar buyuk olmak zorunda degil. */
@media (max-width: 1199px) {
    .breadcumb-area {
        padding: 60px 0 50px;
    }
}

/* --- N8: Misyon ve Vizyon gorselleri ---
   Sablonda `.service-icon-thumb` kucuk bir ikon icin tasarlanmis (arkasindaki
   suslemesi 40x40px bir daire). Biz oraya 645px'lik fotograflar koymustuk, bu
   yuzden kartin icine sigmiyordu. Fotograf kart genisligine oturtuldu ve makul
   bir kapak yuksekligine kirpildi. */
.nw-mission-area .service-icon-thumb img {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 8px;
}

/* --- N9: Hizmetler sayfasi kartlari her dilde esit yukseklikte ---
   TD0003 M20'nin ic sayfa karsiligi: sablon kartlara yukseklik vermiyor, her kart
   kendi icerigi kadar uzuyor. Turkce metinlerde satir sayilari denk geldigi icin
   sorun gorunmuyor, EN/FR cevirilerinde satir bozuluyordu.

   Hizmet kartinda `calc()` gerekli: sablon 64px alt bosluk veriyor, duz
   `height: 100%` o margin'i disari tasirip alttaki satira bindirirdi. Surec
   kartinin margin'i yok, orada `height: 100%` yeterli. */
.inner-style .single-service-box {
    height: calc(100% - 64px);
}

.process-area.style-three .single-process-box {
    height: 100%;
}

/* --- N11: Ekip karti hover'siz, her sey bir anda gorunur ---
   Sablon uye adini ve rolunu `rotateX(90deg)`, sosyal ikonlari `rotateX(-90deg)`
   ile katlayip gizliyordu; ikisi de yalnizca fareyle uzerine gelince aciliyordu.
   Yani **isim ve rol hover olmadan hic okunmuyordu** — dokunmatik cihazlarda hic
   gorunmuyor demek. Kart artik CTA kartlari gibi duz ve statik.

   `position: static`: icerik blogu `bottom: -74px` ile kartin disina tasiyordu;
   normal akisa alininca altindaki aciklama paragrafi de dogru yere oturuyor. */
.team-area.style-one .team-content {
    position: static;
    margin-top: 18px;
}

.team-area.style-one .team-bio,
.team-area.style-one .team-social-icon ul {
    transform: none;
    transition: none;
}

/* Dar kutular yerine kartin tam genisligi — "CTA karti gibi dizayn". */
.team-area.style-one .team-bio {
    width: 100%;
}

.team-area.style-one .team-social-icon ul {
    left: 0;
    width: 100%;
}

/* =====================================================================
   TD0005 — Referanslar musteri odakli
   Liste artik projeleri degil musterileri gosterir: logo + ad + sektor.
   Detay sayfasi once musteriyi tanitir, devaminda projeleri sunar.
   ===================================================================== */

/* --- Liste: logo karti ---
   Kartin tamami tek bir <a>. Isim ve sektor her zaman gorunur; hicbir bilgi
   hover'a bagli degil (TD0004 N11'de duzeltilen kusurun tekrarlanmamasi icin).

   `calc(100% - 30px)`: kartin 30px alt bosluguna ragmen ayni satirdaki tum
   kartlar esit yukseklikte kalir, alttaki satira binmez. */
.nw-reference-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 28px 20px;
    background: var(--nw-white);
    border: 1px solid var(--nw-border);
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.nw-reference-card:hover {
    border-color: var(--nw-primary);
    box-shadow: 0 10px 30px rgba(12, 90, 219, 0.12);
    transform: translateY(-4px);
}

.nw-reference-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90px;
    margin-bottom: 18px;
}

/* `contain`: farkli en/boy oranlarindaki logolar kirpilmadan ve ezilmeden sigar. */
.nw-reference-logo img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
}

.nw-reference-logo-empty {
    color: var(--nw-primary);
    font-size: 48px;
    line-height: 1;
}

.nw-reference-name {
    margin: 0;
    color: var(--nw-navy);
    font-family: var(--nw-font-heading);
    font-size: 18px;
    line-height: 26px;
}

.nw-reference-sector {
    margin: 6px 0 0;
    color: var(--nw-text);
    font-size: 14px;
    line-height: 22px;
}

/* --- Detay: musteriyi tanitan ust bolum --- */
.nw-reference-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 50px;
    padding: 30px;
    background: var(--nw-bg-light);
    border-radius: 10px;
}

.nw-reference-intro-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 160px;
    min-height: 110px;
    padding: 14px;
    background: var(--nw-white);
    border: 1px solid var(--nw-border);
    border-radius: 8px;
}

.nw-reference-intro-logo img {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
}

.nw-reference-intro-body {
    flex: 1 1 320px;
}

.nw-reference-intro-body h4 {
    margin-bottom: 10px;
    color: var(--nw-navy);
}

.nw-reference-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-bottom: 14px;
}

.nw-reference-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nw-text);
    font-size: 15px;
}

.nw-reference-meta-item i {
    color: var(--nw-primary);
}

/* Yalnizca ekran okuyucular icin: ikonun ne anlama geldigini ("Sektor", "Web
   Sitesi", "Yil") gorsel duzeni bozmadan soyler. */
.nw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a.nw-reference-meta-item:hover {
    color: var(--nw-primary);
}

/* --- Detay: proje listesi --- */
.nw-reference-projects-title {
    margin-bottom: 26px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--nw-border);
    color: var(--nw-navy);
}

.nw-reference-project {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--nw-border);
}

.nw-reference-project:last-of-type {
    border-bottom: 0;
}

.nw-reference-project-thumb img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.nw-reference-project-body h5 {
    margin-bottom: 8px;
    color: var(--nw-navy);
    font-size: 22px;
}

.nw-reference-project-year {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--nw-text);
    font-size: 15px;
}

.nw-reference-project-year i {
    color: var(--nw-primary);
}

.nw-reference-project .nw-tech-list {
    margin-top: 14px;
}

@media only screen and (max-width: 767px) {
    .nw-reference-intro {
        gap: 20px;
        padding: 22px;
    }

    .nw-reference-intro-logo {
        flex: 1 1 100%;
    }

    .nw-reference-project-thumb {
        margin-bottom: 20px;
    }
}