@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fonts/opensans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fonts/opensans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0300-0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("vendor/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0300-0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

:root {
  --pow-green: #1b6e3c;
  --pow-green-light: #00754a;
  --pow-green-dark: #124a28;
}

body.theme-pow,
#header,
#fh5co-offcanvas,
#menu-right {
  font-family: "Open Sans", Arial, sans-serif;
}

h1, h2, h3,
.item h2, .item h3,
#hero-statement,
.section-heading {
  font-family: "Montserrat", Arial, sans-serif;
}

#fh5co-offcanvas ul li a:hover,
#fh5co-offcanvas ul li a.active,
.navbar-nav > li.active a,
.navbar-nav > li > a.active {
  color: var(--pow-green) !important;
}

.projectsgrid .item {
  cursor: pointer;
  user-select: none;
}

.item .hoverbkg {
  background: rgba(27, 110, 60, 0.55);
}

/* Fotoğraf tipi kategori sayfalarındaki 2 sütunlu grid: kaynak görsellerin
   en-boy oranı farklı olsa da (peyzaj/portre karışık) satırdaki iki kutu
   HER ZAMAN aynı yükseklikte olsun diye sabit bir en-boy oranı kilitlenir
   (16:9, standart 1920x1080 referansı — daha geniş görseller yanlardan,
   daha dar/dikey görseller üstten-alttan kırpılır), görsel object-fit:cover
   ile bu kutuyu doldurup ortadan kırpılır. Bu sadece CSS'te bir görüntü —
   dosyanın kendisi hiç dokunulmaz, modalda görsel her zaman tam/orijinal
   haliyle (View::galleryImages -> Url::image, grid'in aksine imageGrid
   değil) gösterilir. */
.photo_tile .outer_image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
}

.photo_tile .outer_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#logo img,
#statement_logo img,
#nav-logo img {
  height: auto;
  width: 150px;
}

@media (min-width: 1024px) {
  #statement_logo {
    margin-bottom: 80px;
  }
}

#fh5co-offcanvas ul,
#menu-right ul {
  margin-top: 50px;
}

/* vendor/main.css'te z-index:110 — slider oklarının (120/130) altında
   kalıyordu, açıkken oklar üstünden görünüyordu. Menü her zaman en üstte
   olmalı, bu yüzden site içindeki en yüksek değerden (btn-circle: 130)
   daha yükseğe çıkarıldı. */
   #fh5co-offcanvas,
   #menu-right {
    z-index: 200;
  }

/* vendor/main.css'te #header (menü açma butonunu içeren sabit üst çubuk)
   z-index:105 — slider'ın hover bölgesinden (110) DAHA DÜŞÜK kalıyordu,
   fare o bölgeye (sol/sağ ok alanına) girince buton tıklanamaz hale
   geliyordu ("9999" vendor CSS'te .fh5co-nav-toggle'a verilmiş ama o
   kuralda position:fixed satırı YORUM SATIRI haline getirilmiş/etkisiz —
   z-index yalnızca konumlanmış (position != static) elemanlarda çalışır,
   #header zaten position:fixed olduğu için asıl düzeltme burada). Slider
   zincirindeki en yüksek değerin (ok butonları: 120) üzerine çıkarıldı. */
   #header {
    z-index: 150;
  }

  a {
    color: var(--pow-green);
  }
  a:hover,
  a:focus {
    color: var(--pow-green-dark);
  }

  body.index #slideshow-outer,
  body.index #album-outer {
    height: 100svh;
    max-height: none;
  }
/* Chrome'a özgü "scroll anchoring": slider yüklenirken (video/poster boyutu
   oturana kadar) sayfa yüksekliği kısa süreliğine değişiyor, Chrome bunu
   telafi etmeye çalışırken sayfayı ~50px aşağı kaydırılmış gibi bırakıyordu
   (yukarı kaydırınca "düzeliyor" görünmesi bu yüzdendi — aslında hep 0'daydı,
   Chrome kendi telafisini geri alıyordu). Firefox bunu yapmıyordu. */
   body.index {
    overflow-anchor: none;
  }

  .cycle-slideshow > .slide {
    position: relative;
    background: #000;
  }
  .cycle-slideshow > .slide iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border: 0;
  }
  .cycle-slideshow > .slide .slide-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.6s ease;
  }
  .cycle-slideshow > .slide.is-playing .slide-poster {
    opacity: 0;
  }

  .slide-hover-zone {
  /* Oklar vendor/main.css'te sadece
     "@media screen and (min-height:420px) and (min-width:753px)" şartında
     görünüyor (mobilde hep display:none) — bu bölge de aynı şarta
     bağlanmazsa mobilde, hiçbir ok görünmezken bile, görünmez bir katman
     olarak durup dokunmaları (ör. altyazı linkini) engelleyebilirdi. */
     display: none;
   }
   @media screen and (min-height: 420px) and (min-width: 753px) {
    .slide-hover-zone {
      display: block;
      position: absolute;
    /* Tam yükseklik (top:0/bottom:0) logo ve sol menü butonunun da üzerine
       biniyor, tıklamalarını engelliyordu — okun etrafında dar, dikeyde
       ortalanmış bir banda indirildi, ok zaten dikeyde ortada. top:50% +
       translateY(-50%) yükseklik ne olursa olsun otomatik tam ortalar,
       top/height'i birbirine göre elle hesaplamaya gerek kalmaz. */
       top: 50%;
       transform: translateY(-50%);
       height: 30%;
       width: 20%;
    /* Cycle2 (js/vendor/jquery.cycle2.min.js) her slayta satır içi z-index
       atıyor, varsayılan tavanı (maxZ) 100 — bu bölge slaytların ÜZERİNDE
       olmazsa fare hep slayta değer, hover hiç tetiklenmez. */
       z-index: 110;
     }
   }
   .slide-hover-zone-left {
    left: 0;
  }
  .slide-hover-zone-right {
    right: 0;
  }

  .slide-nav-prev,
  .slide-nav-next {
  /* vendor/main.css'teki z-index:101, hover bölgesinin (110) altında
     kalıyordu — görünür olduklarında tıklanabilir kalsınlar diye bölgenin
     üzerine çıkarıldı. */
     z-index: 120;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.12s ease;
   }
/* Ok göründüğünde bölgenin (z-index:110) üzerine çıkıyor (z-index:120) —
   fare bölgeden okun kendisine geçtiğinde okun KENDİ hover'ı da koşula
   dahil edilmezse, bölge hover'ı kaybolur, ok gizlenir, bölge tekrar açığa
   çıkar, hover yeniden tetiklenir... sonsuz titreşim döngüsü oluşurdu
   (Firefox'ta gözle görülür, Chrome'da daha az belirgindi). */
   #slideshow-outer:has(.slide-hover-zone:hover, .slide-nav-prev:hover, .slide-nav-next:hover) .slide-nav-prev,
   #slideshow-outer:has(.slide-hover-zone:hover, .slide-nav-prev:hover, .slide-nav-next:hover) .slide-nav-next {
    opacity: 1;
    pointer-events: auto;
  }
/* Sol menü açıkken (main.js: body.offcanvas) menü sol taraftan kayıyor —
   sol ok o alanda kaldığı için gizlenir, sağ ok menünün etkilemediği
   bölgede olduğu için görünmeye devam edebilir (kullanıcı kararı). Menünün
   kendisi artık en üstte (z-index:200) olduğu için tıklanabilirliği zaten
   garanti. */
   body.offcanvas .slide-nav-prev {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #slide-title {
    left: 0;
    right: 0;
    padding: 0 70px 40px;
    color: #fff;
    pointer-events: none;
  }
  #slide-title a {
    pointer-events: auto;
    color: #fff;
    text-decoration: none;
  }
  #slide-title h2,
  #slide-title h3 {
    margin: 0;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  }
  #slide-title h2 {
    font-size: 20px;
    font-weight: 700;
  }
  #slide-title h3 {
    font-size: 20px;
    font-weight: 400;
    opacity: 0.9;
  }
  @media (max-width: 767px) {
    #slide-title {
      padding: 0 20px 24px;
    }
    #slide-title h2,
    #slide-title h3 {
      font-size: 18px;
    }
  }

  @media (min-width: 1260px) {
    #slide-title h2,
    #slide-title h3 {
      font-size: 60px;
      line-height: 66px;
    }
  }

  body.video-modal-open {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
  }
  #news-outer.video-modal {
    position: fixed;
    inset: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
    opacity: 0;
    transition: visibility 0s linear 0.5s;
    visibility: hidden;
    overflow: hidden;
  }
  #news-outer.video-modal.is-active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease,
    visibility 0s linear 0s;
  }
  #news-outer.video-modal.is-closing {
    transform: translateY(0);
    opacity: 0;
    visibility: visible;
    transition: opacity 0.7s ease, visibility 0s linear 0.7s;
  }
  #news-outer.video-modal.is-closing-down {
    transform: translateY(100%);
    opacity: 1;
    visibility: visible;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.5s;
  }
  .video-modal-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, transform 0.15s ease;
  }
  .video-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
  }
  .video-modal-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    background: #1a1a1a;
    transform-origin: center;
  }
  .video-modal-close span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .video-modal-close span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .video-modal-inner {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 70px 40px 20px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .video-modal-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 1440px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .video-modal-frame {
    position: relative;
    height: 100%;
    width: auto;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }
  .video-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
/* Fotoğraf/galeri slaytında video için ayarlanan sabit 16:9 oranı zorlanmaz
   — görselin kendi en-boy oranı bozulmasın diye (madde 16) çerçeve içeriğe
   göre daralır/genişler, #news-image kendi oranını object-fit:contain ile
   korur. */
   .video-modal-frame.is-image {
    aspect-ratio: auto;
    height: 100%;
    width: auto;
    background: transparent;
    box-shadow: none;
  }
  .video-modal-frame.is-image iframe {
    display: none;
  }
  #news-image {
    display: none;
    position: static;
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
  .video-modal-frame.is-image #news-image {
    display: block;
  }
/* Ok butonları artık #news-outer'ın DOĞRUDAN çocuğu (.video-modal-close ile
   aynı seviyede) — içerik (video/görsel) ortada ne kadar geniş olursa olsun
   oklar her zaman modal'ın kendi kenarında, içeriğin GERÇEKTEN dışında
   kalıyor, üzerine binmiyor. Modal içinde hero slider'daki gibi "fareyle
   yaklaşınca beliren" davranış YOK — her zaman görünürler (mobilde hover
   diye bir şey olmadığı için, "mobilde oklar erişilebilir olmalı" kuralı
   bunu gerektiriyor). */
/* .video-modal-nav.btn-circle (bileşik seçici) BİLEREK kullanıldı — sadece
   ".video-modal-nav" yazsaydık, ".btn-circle" kuralı (position:relative,
   margin:0 20px) dosyada SONRA geldiği için eşit önem derecesinde onu
   ezerdi, oklar konumlanamayıp ikisi de aynı yerde (solda) üst üste
   yığılıyordu. Bileşik seçici daha yüksek özgüllükle bunu garantiler. */
   .video-modal-nav.btn-circle {
    position: absolute;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    z-index: 5;
  }
  .video-modal-prev {
    left: 24px;
  }
  .video-modal-next {
    right: 24px;
  }
  @media (max-width: 767px) {
    .video-modal-prev {
      left: 10px;
    }
    .video-modal-next {
      right: 10px;
    }
  }
/* Tek slayt varsa (ör. sadece kapak görseli, galeri/video yok) oklar
   gösterilmez — madde 9. */
   .video-modal.single-slide .video-modal-nav {
    display: none;
  }
  .video-modal-caption {
    flex: 0 0 auto;
    width: 100%;
    max-width: 900px;
    margin-top: 14px;
    text-align: center;
  }
  .video-modal-caption h1 {
    margin: 0 0 4px;
    font-size: 18px;
  }
  .video-modal-caption p {
    margin: 0;
    font-size: 14px;
    color: #6b6b6b;
  }
  @media (max-width: 991px) {
    .video-modal-inner {
      padding: 60px 24px 16px;
    }
  }
  @media (max-width: 767px) {
    .video-modal-close {
      top: 12px;
      right: 12px;
    }
    .video-modal-inner {
      padding: 54px 16px 14px;
    }
    .video-modal-caption h1 {
      font-size: 15px;
    }
    .video-modal-caption p {
      font-size: 12px;
    }
  }
  .btn-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff !important;
    font-size: 20px;
    line-height: 1;
    text-decoration: none !important;
  /* Bu sınıf şimdiye kadar hep <a> etiketinde kullanılıyordu (hiç varsayılan
     kenarlığı/görünümü olmaz) — modal oklarında gerçek <button> elemanı
     olunca tarayıcının native buton kenarlığı/görünümü hiç sıfırlanmamış
     oldu, yuvarlak köşenin dışına siyah bir kenar/gölge gibi taşıyordu. */
     border: 0;
     padding: 0;
     -webkit-appearance: none;
     appearance: none;
  /* Slider oklarında .slide-hover-zone (z-index:110) tıklamayı üstüne
     alıyordu, hover/tıklama sadece ikonun tam üzerinde çalışıyordu —
     dairenin kendisine de kendi z-index'i verilip üstte olduğu netleştirildi. */
     position: relative;
     z-index: 130;
     cursor: pointer;
  /* Chrome'un varsayılan odak halkası daire şeklini takip etmiyor, köşeli
     siyah/beyaz bir çerçeve gibi görünüyordu — tıklanabilir hâle gelince
     bu görünmeye başladı. Sadece yeşil daire kalsın diye kaldırıldı. */
     outline: none;
  /* outline:none tek başına yetmiyor — Chrome'a özgü "dokunma vurgusu"
     (tap highlight) tıklama sonrası siyah/beyaz bir halka gibi asılı
     kalıyordu, bu ayrı bir özellik, ayrıca kapatılması gerekiyor. */
     -webkit-tap-highlight-color: transparent;
   }
/* Bootstrap'ın "a:focus{outline:5px auto -webkit-focus-ring-color}" kuralı
   CSS önceliğinde (specificity) ".btn-circle"dan daha güçlü (:focus bir
   pseudo-class olarak sayılıyor) — bu yüzden yukarıdaki outline:none'ı
   eziyordu, tıklayıp fareyi çekince o beyaz/gri halka bu yüzden kalıyordu.
   ":focus" burada da eklenince önceliği eşitliyor/geçiyor, kesin kazanıyor. */
   .btn-circle:focus {
    outline: none;
  }
  .btn-circle:hover {
    background: rgba(27, 110, 60, 0.25);
    box-shadow: inset 0 0 0 2px var(--pow-green);
  }
/* vendor/main.css'teki ok ikonları 33x19px — 5px küçültüldü (28x14px).
   Modal oklarının da slider ile aynı boyutta olması istendi. */
   #slide-prev .btn-circle img,
   #slide-next .btn-circle img,
   .video-modal-nav img {
    width: 28px;
    height: 14px;
  }

  .item.placeholder-item .outer_image {
    background: #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
  }
  .item.placeholder-item .outer_image span {
    font-family: "Montserrat", Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    font-size: 13px;
  }

  .culinary-intro {
    padding: 60px 0 20px;
    text-align: center;
  }
  .culinary-intro img {
    max-width: 260px;
    margin-bottom: 24px;
  }
  .culinary-intro h2 {
    margin-bottom: 16px;
  }
  .culinary-intro p {
    max-width: 720px;
    margin: 0 auto 12px;
    line-height: 1.6;
  }

/* Kategori "Özel Bağlantı" alanı — düz metin gibi görünüp fark edilmiyordu,
   belirgin bir çağrı-aksiyon (CTA) linki görünümüne çevrildi. */
   .category-custom-link {
    margin-top: 8px;
  }
  .category-custom-link a {
    display: inline-block;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--pow-green-light);
  }
  .category-custom-link a:hover,
  .category-custom-link a:focus,
  .category-custom-link a:active {
    color: var(--pow-green-dark);
  }

  .about-content {
    padding: 0 0 60px;
  }
  .about-content p {
    line-height: 1.7;
    margin-bottom: 18px;
  }

  .contact-page {
    padding-bottom: 60px;
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    width: 100%;
  }
  .contact-info-card,
  .contact-form-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
    padding: 40px;
  }
  .contact-info-card h1,
  .contact-form-card h1 {
    margin: 0 0 24px;
    font-size: 26px;
  }
  .contact-info-list {
    margin-bottom: 28px;
  }
  .contact-info-item {
    padding: 14px 0;
    border-bottom: 1px solid #eee;
  }
  .contact-info-item:first-child {
    padding-top: 0;
  }
  .contact-info-label {
    display: block;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 4px;
  }
  .contact-info-value {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    color: #1a1a1a;
  }
  .contact-info-value a {
    color: inherit;
  }
  .contact-info-value a:hover {
    color: var(--pow-green);
  }
  .contact-social {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
  }
  .contact-social a {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1a1a1a;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .contact-social a:hover {
    border-color: var(--pow-green);
    color: var(--pow-green);
  }
  .contact-map {
    border-radius: 10px;
    overflow: hidden;
    line-height: 0;
  }
  .contact-map iframe {
    width: 100%;
    height: 260px;
    border: 0;
  }
  .contact-alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
  }
  .contact-alert-success {
    background: #e3f5e8;
    color: #1b6e3c;
  }
  .contact-alert-error {
    background: #fbe7e7;
    color: #a83232;
  }
  .contact-form-honeypot {
    position: absolute;
    left: -9999px;
  }
  .form-field {
    margin-bottom: 20px;
  }
  .form-field label {
    display: block;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666;
    margin-bottom: 8px;
  }
  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fafafa;
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
  }
  .contact-form textarea {
    resize: vertical;
    min-height: 120px;
  }
  .contact-form input:focus,
  .contact-form textarea:focus {
    outline: none;
    border-color: var(--pow-green);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(27, 110, 60, 0.12);
  }
  .field-error {
    display: block;
    color: #a83232;
    font-size: 12px;
    margin-top: 6px;
  }
  .contact-form button {
    background: var(--pow-green);
    color: #fff;
    border: none;
    border-radius: 30px;
    padding: 14px 40px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .contact-form button:hover {
    background: var(--pow-green-dark);
  }
  @media (max-width: 991px) {
    .contact-grid {
      grid-template-columns: 1fr;
      padding: 0 20px;
    }
    .contact-info-card,
    .contact-form-card {
      padding: 28px;
    }
  }

  .lang-switch {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .lang-switch a {
    display: inline-block !important;
    width: auto !important;
    font-size: 18px !important;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: #6b6b6b !important;
    opacity: 1 !important;
    transition: color 0.15s ease;
  }
  .lang-switch a:hover {
    color: #cfcfcf !important;
  }
  .lang-switch a.active {
    color: var(--pow-green) !important;
  }
  .lang-switch span {
    color: #444;
    font-size: 12px;
  }

  .navbar-nav > li > a {
    line-height: 40px;
  }