/* ==========================================================================
   MODERN ELEGANT SLIM PILL NAVBAR & HOVER DROPDOWN REGULATION
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --color-primary: #272c89;
  --color-secondary: #00aaee;
  --primary-color: #272c89;
  --secondary-color: #00aaee;
  --primary-rgb: 39, 44, 137;
  --secondary-rgb: 0, 170, 238;
  --color-bg-light: #f8fafc;
  --color-text-dark: #0f172a;
  --color-text-muted: #64748b;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 14px 35px rgba(30, 58, 138, 0.12);
  --transition-fast: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  font-family: var(--font-primary) !important;
  color: var(--color-text-dark) !important;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.page-title h1 {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   0. OWL CAROUSEL — EKSİK "DEFAULT THEME" MODÜLÜ TAMAMLANIYOR
   css/owl.css sadece Owl Carousel'in "core" modülünü içeriyor, "theme"
   modülü hiç yok. Bunun sonucunda .owl-dot elemanı display:block kalıyor
   (div varsayılanı) ve noktalar yan yana değil alt alta diziliyor, bu da
   carousel'lerin altında büyük, beklenmedik boşluklara yol açıyor. Eksik
   yapısal kuralı (inline-block) buradan tamamlıyoruz; renk/boyut zaten
   .news-carousel .owl-dots .owl-dot span gibi kendi özel kurallarımızla
   ayarlanıyor, burada sadece dizilim (layout) düzeltiliyor.
   -------------------------------------------------------------------------- */
.owl-carousel .owl-dots {
  display: block !important;
  text-align: center !important;
}

.owl-carousel .owl-dots .owl-dot {
  display: inline-block !important;
  zoom: 1 !important;
}

.owl-carousel .owl-nav {
  text-align: center !important;
}

.owl-carousel .owl-nav [class*='owl-'] {
  display: inline-block !important;
}

/* --------------------------------------------------------------------------
   1. RESET LEGACY LAYOUT & EXPERIMENTAL OVERRIDES
   -------------------------------------------------------------------------- */
.header-style-one,
.header-style-two,
.header-style-one .logo-box,
.header-style-two .logo-box,
.header-style-one .header-lower .main-box,
.header-style-two .header-lower .main-box,
.header-style-one .header-lower,
.header-style-two .header-lower {
  position: static !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
}

/* --------------------------------------------------------------------------
   2. OVERFLOW VISIBLE FOR ALL HEADER CONTAINERS (No Clipping)
   -------------------------------------------------------------------------- */
html,
body,
.page-wrapper,
header,
.main-header,
.site-header-unified,
.header-top,
.header-top-two,
.site-topbar,
.header-lower,
.site-navbar,
.site-navbar-pill,
.auto-container,
.main-box,
.nav-outer,
.site-nav-outer,
.menu-box,
.main-menu,
.navbar-collapse {
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

header,
.main-header,
.site-header-unified,
.header-style-one,
.header-style-two {
  position: relative !important;
  z-index: 999999 !important;
  isolation: isolate !important;
  overflow: visible !important;
  background-color: var(--primary-color, #272c89) !important;
  background: var(--primary-color, #272c89) !important;
  width: 100% !important;
  height: auto !important;
}

/* --------------------------------------------------------------------------
   3. LAYER 1: TOPBAR
   -------------------------------------------------------------------------- */
.site-topbar {
  background-color: var(--secondary-color, #00aaee) !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.site-topbar .topbar-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.site-topbar .contact-info-list {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.site-topbar .contact-info-list li {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.site-topbar .contact-info-list li i {
  color: var(--primary-color, #272c89) !important;
  font-size: 16px !important;
}

.site-topbar .language-flags-list {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.site-topbar .language-flags-list img {
  border-radius: 4px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s ease !important;
  vertical-align: middle !important;
}

.site-topbar .language-flags-list img:hover {
  transform: scale(1.1) !important;
}

/* --------------------------------------------------------------------------
   4. LAYER 2: ELEGANT SLIM PILL NAVBAR CONTAINER
   -------------------------------------------------------------------------- */
.site-navbar {
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 14px 0 20px 0 !important;
  width: 100% !important;
  height: auto !important;
  background-color: var(--primary-color, #272c89) !important;
  background: var(--primary-color, #272c89) !important;
}

.site-navbar-pill {
  max-width: 1200px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-radius: 40px !important;
  margin: 0 auto !important;
  background: #ffffff !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(39, 44, 137, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  position: relative !important;
  z-index: 1000 !important;
  overflow: visible !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Desktop Only Height for Pill Navbar */
@media (min-width: 992px) {
  .site-navbar-pill {
    padding: 4px 28px !important;
    min-height: 54px !important;
    height: 54px !important;
    flex-direction: row !important;
  }
}

.site-navbar-pill:hover {
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
}

/* Logo ve Metin Dikey Hizalama */
.site-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

.site-logo img {
  max-height: 30px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.site-logo .logo-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--primary-color, #272c89) !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  margin-bottom: 0 !important;
  font-family: var(--font-heading) !important;
}

.site-logo .logo-text strong {
  background-color: transparent !important;
  background: none !important;
  color: var(--secondary-color, #00aaee) !important;
  font-weight: 800 !important;
  padding: 0 !important;
  display: inline !important;
}

/* Hamburger Toggle: sadece mobilde görünür (bkz. 991px media query) */
.mobile-nav-toggle {
  display: none !important;
}

/* Menü Elemanları Dikey Hizalama */
.site-nav-outer,
.main-menu {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.main-menu .navigation {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.main-menu .navigation>li,
.site-navbar-pill .site-nav-outer .main-menu .navigation>li {
  margin: 0 4px !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.main-menu .navigation>li>a,
.site-navbar-pill .site-nav-outer .main-menu .navigation>li>a {
  font-family: 'Poppins', sans-serif !important;
  padding: 6px 14px !important;
  font-size: 13.5px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  letter-spacing: 0.3px !important;
  border-radius: 20px !important;
  gap: 6px !important;
  transition: all 0.25s ease !important;
  text-decoration: none !important;
  position: relative !important;
}

.main-menu .navigation>li.current>a,
.site-navbar-pill .site-nav-outer .main-menu .navigation>li.current>a {
  color: var(--primary-color, #272c89) !important;
  background-color: rgba(var(--primary-rgb), 0.08) !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
}

/* :hover tabanlı vurgu SADECE masaüstünde aktif — dokunmatik ekranlarda
   tarayıcı dokunuşu :hover olarak simüle ettiği için bu kural mobilde
   devre dışı bırakılmazsa mobil dropdown/accordion davranışıyla çakışıyor. */
@media (min-width: 992px) {
  .main-menu .navigation>li:hover>a,
  .site-navbar-pill .site-nav-outer .main-menu .navigation>li:hover>a {
    color: var(--primary-color, #272c89) !important;
    background-color: rgba(var(--primary-rgb), 0.08) !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
  }
}

/* Alt çizgi span'ın (sadece metin) genişliğine göre hizalanır, tüm <a>
   kutusuna göre değil — aksi halde mobilde tam genişlik linklerde çizgi
   satırın ortasına, metnin dışına düşüyor. */
.nav-label {
  position: relative !important;
  display: inline-block !important;
}

.main-menu .navigation>li>a .nav-label::after,
.site-navbar-pill .site-nav-outer .main-menu .navigation>li>a .nav-label::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 50% !important;
  width: 0 !important;
  height: 3px !important;
  background-color: var(--secondary-color, #00aaee) !important;
  transition: all 0.3s ease !important;
  transform: translateX(-50%) !important;
  border-radius: 3px !important;
}

.main-menu .navigation>li.current>a .nav-label::after,
.site-navbar-pill .site-nav-outer .main-menu .navigation>li.current>a .nav-label::after {
  width: 100% !important;
}

@media (min-width: 992px) {
  .main-menu .navigation>li:hover>a .nav-label::after,
  .site-navbar-pill .site-nav-outer .main-menu .navigation>li:hover>a .nav-label::after {
    width: 100% !important;
  }
}

/* --------------------------------------------------------------------------
   5. DROPDOWN HOVER BRIDGE & SUB-MENU UI REGULATION
   -------------------------------------------------------------------------- */
.main-menu .navigation>li.dropdown::after,
.site-navbar-pill .site-nav-outer .main-menu .navigation>li.dropdown::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -15px !important;
  height: 20px !important;
  background: transparent !important;
  z-index: 999999 !important;
}

.main-menu .navigation>li>ul,
.main-menu .navigation li ul,
.site-navbar-pill .site-nav-outer .main-menu .navigation>li>ul,
.site-navbar-pill .site-nav-outer .main-menu .navigation li ul,
ul.sub-menu,
.sub-menu,
.dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 0 !important;
  min-width: 200px !important;
  padding: 8px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  z-index: 99999999 !important;
  overflow: visible !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* Hover ile dropdown açma SADECE masaüstünde — mobilde bu iş tamamen
   .mobile-dropdown-active JS sınıfına bırakılıyor (bkz. script.js). */
@media (min-width: 992px) {
  .main-menu .navigation>li:hover>ul,
  .main-menu .navigation li:hover>ul,
  .site-nav-outer .main-menu .navigation>li:hover>ul,
  .site-nav-outer .main-menu .navigation li:hover>ul,
  li.dropdown:hover>ul,
  li.dropdown:hover>.sub-menu,
  li.dropdown:hover>.dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999999 !important;
  }
}

.main-menu .sub-menu li,
ul.sub-menu li,
.dropdown-menu li,
.main-menu .navigation li ul li {
  margin-bottom: 4px !important;
  display: block !important;
  width: 100% !important;
}

.main-menu .sub-menu li:last-child,
ul.sub-menu li:last-child,
.dropdown-menu li:last-child,
.main-menu .navigation li ul li:last-child {
  margin-bottom: 0 !important;
}

.main-menu .navigation li ul li a,
.main-menu .sub-menu li a,
.sub-menu li a,
.dropdown-menu li a {
  display: block !important;
  padding: 10px 16px !important;
  color: #333333 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  transition: all 0.2s ease-in-out !important;
  background: transparent !important;
  background-color: transparent !important;
  /* Match the top-level nav items: always uppercase on the front-end,
     regardless of how the title/subtitle text is cased in the database. */
  text-transform: uppercase !important;
}

.main-menu .navigation li ul li:hover>a,
.main-menu .sub-menu li a:hover,
.sub-menu li a:hover,
.dropdown-menu li a:hover {
  background-color: rgba(var(--secondary-rgb), 0.1) !important;
  color: var(--secondary-color, #00aaee) !important;
  padding-left: 20px !important;
}

/* --------------------------------------------------------------------------
   6. LOWER Z-INDEX FOR ALL HERO / BANNER / SECTION WRAPPERS (Z-INDEX 1)
   -------------------------------------------------------------------------- */
section,
.banner-section-one,
.banner-section,
.main-slider,
.page-title,
.slider-container,
#slider,
.banner-carousel,
.hero-section,
.owl-carousel,
.swiper-container,
.swiper,
main,
#content {
  position: relative !important;
  z-index: 1 !important;
}

.banner-section-one .slide-item,
.main-slider .slide-item {
  min-height: 540px !important;
  background-size: cover !important;
  background-position: center center !important;
}

.main-slider .auto-container {
  position: relative !important;
  z-index: 2 !important;
}

/* --------------------------------------------------------------------------
   7. MODERN CARD GRID SYSTEM (Services & Blog)
   -------------------------------------------------------------------------- */
.service-block .inner-box,
.service-block-two .inner-box,
.news-block .inner-box,
.team-block .inner-box,
.team-block-two .inner-box,
.feature-block .inner-box,
.testimonial-block .inner-box {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-subtle) !important;
  transition: var(--transition-fast) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  background: #ffffff !important;
  height: 100% !important;
}

.service-block .inner-box:hover,
.service-block-two .inner-box:hover,
.news-block .inner-box:hover,
.team-block .inner-box:hover,
.team-block-two .inner-box:hover,
.feature-block .inner-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(var(--primary-rgb), 0.2) !important;
}

/* Image Hover Zoom Effects */
.image-box figure.image img,
.service-detail .images-box img,
.news-block .image-box figure img {
  transition: transform 0.5s ease-in-out !important;
}

.image-box:hover figure.image img,
.news-block .image-box:hover figure img {
  transform: scale(1.05) !important;
}

/* Modern Form Elements */
.form-group input,
.form-group select,
.form-group textarea,
.contact-form input,
.contact-form textarea,
.contact-form select {
  border-radius: var(--radius-sm) !important;
  border: 1.5px solid #cbd5e1 !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
  font-family: var(--font-primary) !important;
  transition: var(--transition-fast) !important;
  background-color: #f8fafc !important;
  box-shadow: none !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: var(--primary-color, #272c89) !important;
  background-color: #ffffff !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12) !important;
}

/* Theme Buttons Modern Styling */
.theme-btn,
.btn-style-one,
.btn-style-two {
  border-radius: 30px !important;
  padding: 12px 30px !important;
  font-weight: 600 !important;
  font-family: var(--font-heading) !important;
  letter-spacing: 0.02em !important;
  transition: var(--transition-fast) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
}

.theme-btn:hover,
.btn-style-one:hover,
.btn-style-two:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

/* --------------------------------------------------------------------------
   8. FLOATING WHATSAPP BUTTON (FIXED BOTTOM-LEFT) WITH PULSE EFFECT
   -------------------------------------------------------------------------- */
#whatsapp-button {
  position: fixed !important;
  left: 25px !important;
  right: auto !important;
  bottom: 25px !important;
  top: auto !important;
  z-index: 99998 !important;
  display: block !important;
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#whatsapp-button a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}

#whatsapp-button img {
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.28)) !important;
  animation: pulse-whatsapp 2s infinite ease-in-out !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}

#whatsapp-button:hover img,
#whatsapp-button a:hover img {
  transform: scale(1.12) !important;
  filter: drop-shadow(0 6px 20px rgba(37, 211, 102, 0.5)) !important;
}

@keyframes pulse-whatsapp {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   9. DYNAMIC PRELOADER LOGO STYLING & FAILSAFE HIDING
   -------------------------------------------------------------------------- */
.preloader,
.loader-wrap,
#preloader {
  background-image: none !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

.preloader .logo-text,
.loader-wrap .logo-text {
  color: var(--primary-color, #272c89) !important;
}

.preloader img,
.loader-wrap img {
  max-width: 180px !important;
  height: auto !important;
  object-fit: contain !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: #ffffff !important;
  padding: 15px !important;
  border-radius: 50% !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.preloader.loaded,
.loader-wrap.loaded,
#preloader.loaded {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

/* --------------------------------------------------------------------------
   10. HORIZONTAL OVERFLOW & LAYOUT SHIFT PROTECTION
   -------------------------------------------------------------------------- */
html,
body,
.page-wrapper,
.main-page-wrapper,
#page {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

img {
  max-width: 100% !important;
  height: auto;
}

/* --------------------------------------------------------------------------
   11. GLOBAL DYNAMIC COLOR OVERRIDES
   -------------------------------------------------------------------------- */
/* Primary Color (#272c89) Elements */
.main-header,
.site-navbar-pill .current>a,
.btn-primary,
.bg-primary,
.theme-btn,
footer,
.top-bar,
.sidebar-widget .title {
  background-color: var(--primary-color) !important;
}

a,
.text-primary,
.main-menu .navigation>li>a:hover,
.site-logo .logo-text,
.accordion-title {
  color: var(--primary-color) !important;
}

.border-primary,
.form-control:focus {
  border-color: var(--primary-color) !important;
}

/* Secondary Color (#00aaee) Elements */
.btn-secondary,
.bg-secondary,
.badge-secondary,
.main-menu .sub-menu li a:hover,
.scroll-to-top,
.active-dot,
.owl-theme .owl-dots .owl-dot.active span {
  background-color: var(--secondary-color) !important;
}

a:hover,
.text-secondary,
.sec-title .sub-title,
.icon-box i {
  color: var(--secondary-color) !important;
}

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

/* Hover and Opacity RGB Effects */
.btn-primary:hover {
  background-color: rgba(var(--primary-rgb), 0.85) !important;
}

.btn-secondary:hover {
  background-color: rgba(var(--secondary-rgb), 0.85) !important;
}

/* --------------------------------------------------------------------------
   12. LOGO TEXT TRANSPARENT BACKGROUND OVERRIDE
   -------------------------------------------------------------------------- */
.site-logo .logo-text strong {
  background-color: transparent !important;
  background: none !important;
  color: var(--secondary-color, #00aaee) !important;
  font-weight: 800 !important;
  padding: 0 !important;
  display: inline !important;
}

/* --------------------------------------------------------------------------
   15. PREMIUM FLOATING NAVBAR IN RICH BLUE OCEAN (ELIMINATES WHITE STRIPE)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {

  header,
  .main-header,
  .site-header-unified,
  .header-lower {
    background-color: var(--primary-color, #272c89) !important;
    background: var(--primary-color, #272c89) !important;
    border: none !important;
    border-bottom: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .top-bar,
  .header-top {
    background-color: var(--primary-color, #272c89) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 10px 0 !important;
    margin: 0 !important;
  }

  .site-topbar {
    background-color: var(--secondary-color, #00aaee) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 10px 0 !important;
    margin: 0 !important;
  }

  .site-navbar {
    background-color: var(--primary-color, #272c89) !important;
    background: var(--primary-color, #272c89) !important;
    padding: 14px 0 20px 0 !important;
    margin: 0 !important;
    border: none !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  .site-navbar-pill {
    max-width: 1200px !important;
    padding: 4px 28px !important;
    min-height: 54px !important;
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 40px !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(39, 44, 137, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  .site-navbar-pill:hover {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28) !important;
  }

  .main-slider,
  .banner-section,
  .banner-section-one,
  .hero-section,
  .emtu-slider-wrap {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   16. ISOLATE SLIDER OVERLAY TO BACKGROUND IMAGE ONLY (BELOW TEXT)
   -------------------------------------------------------------------------- */
/* Reset outer parent overlays so they never cover text */
.banner-section-one::after,
.banner-section::after,
.hero-section::after,
.slider-wrapper::after,
.emtu-slider-wrap::after,
.banner-carousel .slide-item::after,
.main-slider .slide-item::after {
  display: none !important;
}

/* Slide Item Stacking Context Isolation */
.banner-section-one,
.banner-section,
.hero-section,
.slider-wrapper,
.banner-carousel .slide-item,
.main-slider .slide-item,
.emtu-slider-wrap {
  position: relative !important;
  isolation: isolate !important;
}

/* Gradient Overlay strictly behind text layer (z-index: 1) */
.slide-overlay,
.emtu-slide-overlay {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(to right,
      rgba(39, 44, 137, 0.35) 0%,
      rgba(39, 44, 137, 0.18) 25%,
      rgba(39, 44, 137, 0.05) 40%,
      rgba(39, 44, 137, 0.00) 50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Text Container & Elements Forced to Highest Layer Above Overlay (z-index: 9999) */
.banner-carousel .auto-container,
.main-slider .auto-container,
.main-slider .content-outer,
.main-slider .content-box,
.content-outer,
.content-box,
.emtu-slide-content {
  position: relative !important;
  z-index: 9999 !important;
  isolation: isolate !important;
}

/* --------------------------------------------------------------------------
   17. SLIDER TEXT DISTINCT COLOR & WHITE CONTOUR GLOW
   -------------------------------------------------------------------------- */
/* 1. Üst Yazı (Rozet / Subtitle / .title): Ana Renk 1 (--primary-color: #272c89) */
.main-slider .content-box .title,
.banner-section-one .content-box .title,
.emtu-slide-subtitle,
.content-box .emtu-slide-subtitle,
.main-slider .slider-subtitle,
.content-box .subtitle,
.content-box .sub-title {
  color: var(--primary-color, #272c89) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1.5px solid var(--primary-color, #272c89) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  padding: 6px 20px !important;
  border-radius: 30px !important;
  display: inline-block !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 15px !important;
  position: relative !important;
  z-index: 10000 !important;
}

/* 2. Ana Başlık (2. Yazı / h2): Birinci Renk (--primary-color: #272c89) + Beyaz Kontur Vurgusu */
.main-slider .content-box h2,
.banner-section-one .content-box h2,
.emtu-slide-title,
.content-box h2,
.content-box h1 {
  color: var(--primary-color, #272c89) !important;
  font-weight: 800 !important;
  text-shadow:
    0 0 10px #ffffff,
    0 0px 1px rgba(255, 255, 255, 0.95),
    -1.5px -1.5px 0 #ffffff,
    1.5px -1.5px 0 #ffffff,
    -1.5px 1.5px 0 #ffffff,
    1.5px 1.5px 0 #ffffff !important;
  position: relative !important;
  z-index: 10000 !important;
}

/* 3. Açıklama Metni (3. ve Küçük Yazı / .text): Siyah Çevreli Gölgeli Yazı */
.main-slider .content-box .text,
.main-slider .content-box .text *,
.banner-section-one .content-box .text,
.banner-section-one .content-box .text *,
.emtu-slide-desc,
.emtu-slide-desc *,
.main-slider p {
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow:
    -1px -1px 0 #000000,
    1px -1px 0 #000000,
    -1px 1px 0 #000000,
    1px 1px 0 #000000,
    0 3px 12px rgba(0, 0, 0, 0.95) !important;
  position: relative !important;
  z-index: 10000 !important;
}

/* Butonlar En Üst Katmanda (z-index: 10001) */
.content-box .btn,
.content-box a,
.content-box .btn-box,
.main-slider .slide-item a,
.emtu-slide-btns a {
  position: relative !important;
  z-index: 10001 !important;
}

.mobile-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* --------------------------------------------------------------------------
   18. COMPLETE RESPONSIVE MOBILE & TABLET STYLING REGULATION
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

  /* Mobilde konum bilgisi topbar'dan kaldırılıyor (yer kazanmak için) */
  .site-topbar .contact-info-list li.topbar-address {
    display: none !important;
  }

  /* Footer alt bar (copyright) mobilde tam ortalansın — .footer-nav
     içerik açısından her zaman boş olduğu için tamamen gizleniyor,
     copyright metni de tam genişlik + merkezi hizalanmış blok oluyor. */
  .main-footer .footer-bottom .inner-container {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .main-footer .footer-bottom .footer-nav {
    display: none !important;
  }

  .main-footer .footer-bottom .copyright-text {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .main-footer .footer-bottom .copyright-text p {
    text-align: center !important;
    width: 100% !important;
  }

  /* Header & Navbar Container Mobile Adjustments */
  .site-navbar {
    padding: 8px 0 14px 0 !important;
  }

  .site-navbar-pill {
    max-width: 92% !important;
    margin: 0 auto !important;
    height: auto !important;
    min-height: unset !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 22px !important;
    gap: 0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
    background: #ffffff !important;
  }

  .site-navbar-pill .site-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    padding: 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
  }

  .site-navbar-pill .site-logo img {
    max-height: 26px !important;
    width: auto !important;
  }

  .site-navbar-pill .logo-text {
    font-size: 15px !important;
    margin: 0 !important;
  }

  /* Hamburger Toggle Button */
  .site-navbar-pill .mobile-nav-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(var(--primary-rgb), 0.08) !important;
    color: var(--primary-color, #272c89) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  .site-navbar-pill.mobile-nav-open .mobile-nav-toggle {
    background: var(--primary-color, #272c89) !important;
    color: #ffffff !important;
  }

  /* Collapsible Nav Panel */
  .site-navbar-pill .site-nav-outer {
    order: 3 !important;
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: max-height 0.25s ease, margin 0.25s ease !important;
  }

  .site-navbar-pill.mobile-nav-open .site-nav-outer {
    max-height: 640px !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li {
    width: 100% !important;
    margin: 0 !important;
    display: block !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li:last-child {
    border-bottom: none !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li>a {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 12px 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li.current>a,
  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li:hover>a {
    background-color: transparent !important;
    padding: 12px 6px !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li.current>a {
    color: var(--primary-color, #272c89) !important;
  }

  /* Mobile Dropdown Accordion (tap to reveal sub-menu, no hover on touch) */
  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li.dropdown {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li.dropdown>a i.fa-angle-down {
    transition: transform 0.2s ease !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li.dropdown.mobile-dropdown-active>a i.fa-angle-down {
    transform: rotate(180deg) !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li.dropdown>.sub-menu {
    display: none !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li.dropdown.mobile-dropdown-active>.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: rgba(0, 0, 0, 0.02) !important;
  }

  .site-navbar-pill .site-nav-outer .main-menu .navigation#navbar>li.dropdown.mobile-dropdown-active>.sub-menu li a {
    padding: 10px 6px 10px 22px !important;
    font-size: 12.5px !important;
  }

  /* Slider Section Mobile Scaling */
  .banner-section-one .slide-item,
  .main-slider .slide-item {
    min-height: 420px !important;
    padding: 30px 0 !important;
  }

  .main-slider .content-box {
    padding: 10px 15px !important;
    text-align: left !important;
  }

  .main-slider .content-box h2,
  .banner-section-one .content-box h2 {
    font-size: 24px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .main-slider .content-box .title,
  .banner-section-one .content-box .title {
    font-size: 12px !important;
    padding: 4px 14px !important;
    margin-bottom: 10px !important;
  }

  .main-slider .content-box .text,
  .banner-section-one .content-box .text {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
  }

  .theme-btn,
  .btn-style-one,
  .btn-style-two {
    padding: 8px 20px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 767px) {

  /* Topbar Mobile Layout Cleanup */
  .site-topbar {
    padding: 8px 10px !important;
  }

  .site-topbar .topbar-inner {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    text-align: center !important;
  }

  .site-topbar .contact-info-list {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
  }

  .site-topbar .contact-info-list li {
    font-size: 11.5px !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    justify-content: center !important;
    line-height: 1.35 !important;
  }

  .site-topbar .language-flags-list {
    justify-content: center !important;
  }

  /* Slider Mobile Overlay Soft Top-to-Bottom Fade */
  .slide-overlay,
  .emtu-slide-overlay {
    background: linear-gradient(to bottom,
        rgba(39, 44, 137, 0.45) 0%,
        rgba(39, 44, 137, 0.25) 50%,
        rgba(39, 44, 137, 0.05) 80%,
        rgba(39, 44, 137, 0.00) 100%) !important;
  }

  /* Slider Elements on Mobile Screens */
  .banner-section-one .slide-item,
  .main-slider .slide-item {
    min-height: 360px !important;
  }

  .main-slider .content-box h2,
  .banner-section-one .content-box h2 {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }

  .main-slider .content-box .text,
  .banner-section-one .content-box .text {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
}

/* --------------------------------------------------------------------------
   19. BRANDS / CLIENTS LOGO CAROUSEL REGULATION
   -------------------------------------------------------------------------- */
.clients-section {
  padding: 15px 0 !important;
  background-color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
}

.clients-section .sponsors-outer {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}

.clients-section .slide-item,
.sponsors-outer .slide-item,
.clients-carousel .slide-item {
  min-height: unset !important;
  height: 55px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
}

.clients-section .slide-item a,
.sponsors-outer .slide-item a,
.clients-carousel .slide-item a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 5px !important;
  transition: all 0.3s ease !important;
}

.clients-carousel .slide-item img,
.clients-section .slide-item img,
.sponsors-outer .slide-item img {
  display: block !important;
  width: auto !important;
  max-height: 40px !important;
  margin: 0 auto !important;
  opacity: 0.75 !important;
  transition: all 0.3s ease !important;
  object-fit: contain !important;
}

.clients-carousel .slide-item img:hover,
.clients-section .slide-item a:hover img,
.sponsors-outer .slide-item a:hover img {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

/* Text fallback for brands with no logo uploaded: a bold wordmark in the
   site's primary color instead of a broken/missing image. */
.clients-carousel .slide-item .brand-text-logo,
.clients-section .slide-item .brand-text-logo,
.sponsors-outer .slide-item .brand-text-logo {
  display: inline-block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
  color: var(--primary-color, #272c89) !important;
  transition: transform 0.3s ease !important;
}

.clients-carousel .slide-item a:hover .brand-text-logo,
.clients-section .slide-item a:hover .brand-text-logo,
.sponsors-outer .slide-item a:hover .brand-text-logo {
  transform: scale(1.05) !important;
}

/* --------------------------------------------------------------------------
   20. PRELOADER CSS FAILSAFE ANIMATION (FORCE HIDE AFTER 1.5s)
   -------------------------------------------------------------------------- */
.preloader,
.loader-wrap,
#preloader {
  animation: forceHidePreloader 0.3s ease 1.5s forwards !important;
}

@keyframes forceHidePreloader {
  to {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* --------------------------------------------------------------------------
   21. SCROLL TO TOP BUTTON STYLING (SECONDARY BG & FIXED LARGER PRIMARY ARROW)
   -------------------------------------------------------------------------- */
.scroll-to-top {
  position: fixed !important;
  right: 30px !important;
  bottom: 30px !important;
  z-index: 99999 !important;
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 22px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  background-color: var(--secondary-color, #00aaee) !important;
  background: var(--secondary-color, #00aaee) !important;
  color: var(--primary-color, #272c89) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 15px rgba(0, 170, 238, 0.4) !important;
  transition: all 0.3s ease !important;
  text-align: center !important;
}

.scroll-to-top span,
.scroll-to-top i,
.scroll-to-top .fa {
  color: var(--secondary-color, #00aaee) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: inline-block !important;
  line-height: 44px !important;
}

.scroll-to-top:hover {
  background-color: var(--secondary-color, #00aaee) !important;
  background: var(--secondary-color, #00aaee) !important;
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(0, 170, 238, 0.6) !important;
}

.scroll-to-top:hover span,
.scroll-to-top:hover i,
.scroll-to-top:hover .fa {
  color: var(--primary-color, #272c89) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* --------------------------------------------------------------------------
   22. COMPLETE MODERN CORPORATE DYNAMIC FOOTER REGULATION
   -------------------------------------------------------------------------- */
/* Main Footer & Widgets Container */
.main-footer {
  background-color: var(--primary-color, #272c89) !important;
  background: var(--primary-color, #272c89) !important;
  color: #ffffff !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Tema dosyasındaki (style.css) sabit renkli :before örtüleri, üstteki
   dinamik ana/ikincil renk arka planını neredeyse tamamen kapatıyordu
   (widgets-section: #152858 @ %95 opaklık, footer-bottom: siyah @ %20
   opaklık) — bu yüzden footer, panelde seçilen renkler yerine sabit
   koyu lacivert/kararmış mavi gösteriyordu. Örtüleri devre dışı bırakıyoruz. */
.main-footer .widgets-section:before,
.main-footer .footer-bottom:before {
  display: none !important;
}

.main-footer .widgets-section {
  background-color: var(--primary-color, #272c89) !important;
  background: var(--primary-color, #272c89) !important;
  background-image: none !important;
  padding: 60px 0 35px 0 !important;
}

/* Footer Logo Proportions, Circular White Badge & Company Name */
.main-footer .about-widget .logo {
  margin-bottom: 18px !important;
}

.main-footer .about-widget .footer-logo-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.main-footer .about-widget .footer-logo-brand .logo-img-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 65px !important;
  height: 65px !important;
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  padding: 8px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  flex-shrink: 0 !important;
}

.main-footer .about-widget .footer-logo-brand:hover .logo-img-wrapper {
  transform: scale(1.05) !important;
  box-shadow: 0 8px 24px rgba(0, 170, 238, 0.35) !important;
}

.main-footer .about-widget .footer-logo-brand img {
  max-width: 46px !important;
  max-height: 46px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin-bottom: 0 !important;
  display: block !important;
}

.main-footer .about-widget .footer-logo-brand .logo-text {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  font-family: var(--font-heading) !important;
}

.main-footer .about-widget .footer-logo-brand .logo-text strong {
  color: var(--secondary-color, #00aaee) !important;
  font-weight: 800 !important;
  display: inline !important;
}

.main-footer .about-widget .text {
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 22px !important;
}

/* Social Icons in Footer */
.main-footer .social-icon-three li {
  margin-right: 8px !important;
  display: inline-block !important;
}

.main-footer .social-icon-three li a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--secondary-color, #00aaee) !important;
  border-radius: 50% !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.main-footer .social-icon-three li a:hover {
  background-color: var(--secondary-color, #00aaee) !important;
  color: var(--primary-color, #272c89) !important;
  transform: translateY(-3px) !important;
}

/* Widget Titles & Accent Underlines */
.main-footer .widget-title {
  color: var(--secondary-color, #00aaee) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin-bottom: 22px !important;
  position: relative !important;
  padding-bottom: 10px !important;
  letter-spacing: 0.3px !important;
}

.main-footer .widget-title::after,
.main-footer .widget-title::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 3px !important;
  width: 38px !important;
  background-color: var(--secondary-color, #00aaee) !important;
  border-radius: 2px !important;
}

/* User Links List (Hızlı Menü & Ürünlerimiz) */
.main-footer .user-links li {
  margin-bottom: 10px !important;
  position: relative !important;
}

.main-footer .user-links li a {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  /* Veritabanındaki yazım ne olursa olsun (Hızlı Menü / Ürünlerimiz) her zaman büyük harf */
  text-transform: uppercase !important;
}

.main-footer .user-links li a::before {
  content: "\f105" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: var(--secondary-color, #00aaee) !important;
  font-size: 12px !important;
  transition: transform 0.25s ease !important;
}

.main-footer .user-links li a:hover {
  color: var(--secondary-color, #00aaee) !important;
  transform: translateX(4px) !important;
  padding-left: 2px !important;
}

/* Contact List Alignment & Icons */
.main-footer .contact-widget .contact-list {
  padding-left: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.main-footer .contact-widget .contact-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

.main-footer .contact-widget .contact-list li .icon,
.main-footer .contact-widget .contact-list li i,
.main-footer .contact-widget .contact-list li span[class*="flaticon-"] {
  color: var(--secondary-color, #00aaee) !important;
  font-size: 18px !important;
  min-width: 24px !important;
  margin-top: 3px !important;
  display: inline-block !important;
}

.main-footer .contact-widget .contact-list li .text {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  flex: 1 !important;
}

.main-footer .contact-widget .contact-list li a {
  color: rgba(255, 255, 255, 0.95) !important;
  transition: color 0.25s ease !important;
  text-decoration: none !important;
}

.main-footer .contact-widget .contact-list li a:hover {
  color: var(--secondary-color, #00aaee) !important;
}

/* Copyright Footer Bottom Bar (Slim & Compact) */
.main-footer .footer-bottom {
  background-color: var(--secondary-color, #00aaee) !important;
  background: var(--secondary-color, #00aaee) !important;
  color: #ffffff !important;
  padding: 10px 0 !important;
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.main-footer .footer-bottom .inner-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.main-footer .footer-bottom .copyright-text {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px !important;
  padding: 4px 0 !important;
  float: none !important;
  display: inline-block !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.main-footer .footer-bottom .copyright-text p {
  margin: 0 !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  font-size: 13px !important;
}

.main-footer .footer-bottom .copyright-text a {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   23. STAGGERED VERTICAL FLOW LAYOUT FOR ABOUT SECTION (HAKKIMIZDA 4'LÜ DİKEY KADEMELİ AKIŞ)
   -------------------------------------------------------------------------- */
.about-section {
  position: relative !important;
  padding: 90px 0 !important;
  background-color: #ffffff !important;
}

/* Images Column Container */
.about-section .images-column {
  position: relative !important;
  z-index: 2 !important;
}

.about-section .images-column .inner-column {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  text-align: left !important;
  margin-right: 0 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Decorative Vertical Connecting Timeline Line & Dots Pattern */
.about-section .images-column .inner-column::before {
  content: "" !important;
  position: absolute !important;
  top: 30px !important;
  bottom: 30px !important;
  left: 50% !important;
  width: 3px !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 170, 238, 0.15) 0%,
    var(--secondary-color, #00aaee) 50%,
    rgba(0, 170, 238, 0.15) 100%
  ) !important;
  border-radius: 4px !important;
  z-index: 0 !important;
  transform: translateX(-50%) !important;
}

/* Decorative Accent Dot Grid Element */
.about-section .images-column .inner-column::after {
  content: "" !important;
  position: absolute !important;
  top: 20px !important;
  right: -10px !important;
  width: 120px !important;
  height: 120px !important;
  background-image: radial-gradient(var(--secondary-color, #00aaee) 2px, transparent 2px) !important;
  background-size: 14px 14px !important;
  opacity: 0.25 !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Base Image Figures Styling */
.about-section .images-column figure {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 35px rgba(39, 44, 137, 0.12) !important;
  border: 4px solid #ffffff !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  background-color: #ffffff !important;
}

.about-section .images-column figure img {
  width: 100% !important;
  height: 220px !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 16px !important;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* Hover Süzülme & Parlama Efekti */
.about-section .images-column figure:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 45px rgba(0, 170, 238, 0.25) !important;
  border-color: var(--secondary-color, #00aaee) !important;
}

.about-section .images-column figure:hover img {
  transform: scale(1.04) !important;
}

/* 1. Görsel: Sol Üst Odak (Sol Offset) */
.about-section .image-1 {
  width: 82% !important;
  align-self: flex-start !important;
  margin-left: 0 !important;
}

/* 2. Görsel: Sağ Orta-1 Odak (Sağ Offset) */
.about-section .image-2 {
  width: 82% !important;
  align-self: flex-end !important;
  margin-right: 0 !important;
}

/* 3. Görsel: Sol Orta-2 Odak (Sol Offset) */
.about-section .image-3 {
  width: 82% !important;
  align-self: flex-start !important;
  margin-left: 0 !important;
}

/* 4. Görsel: Sağ Alt Odak (Sağ Offset - 4'lü Akış Tamamlayıcı) */
.about-section .image-4 {
  width: 82% !important;
  align-self: flex-end !important;
  margin-right: 0 !important;
}

/* Hide legacy hex background image & video link */
.about-section .image-3 .hex,
.about-section .images-column .video-link {
  display: none !important;
}

/* Mobile & Tablet Responsiveness for Staggered Flow */
@media (max-width: 991px) {
  .about-section .images-column .inner-column {
    gap: 22px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .about-section .image-1,
  .about-section .image-2,
  .about-section .image-3,
  .about-section .image-4 {
    width: 100% !important;
    align-self: center !important;
  }

  .about-section .images-column figure img {
    height: 200px !important;
  }
}

/* Disable legacy theme bubble span animations */
.about-section .link-box .btn-style-one span:not(.btn-title),
.about-section .btn-style-one span:not(.btn-title) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* About Section Premium Button Styling */
.about-section .link-box {
  margin-top: 25px !important;
  display: block !important;
  width: 100% !important;
}

.about-section .link-box .btn-style-one,
.about-section .btn-style-one {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 14px 38px !important;
  min-height: 52px !important;
  width: auto !important;
  max-width: max-content !important;
  background-color: var(--secondary-color, #00aaee) !important;
  background: var(--secondary-color, #00aaee) !important;
  color: var(--primary-color, #272c89) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(0, 170, 238, 0.35) !important;
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  position: relative !important;
  z-index: 5 !important;
  border: 2px solid transparent !important;
  overflow: hidden !important;
}

.about-section .link-box .btn-style-one::before,
.about-section .btn-style-one::before,
.about-section .link-box .btn-style-one::after,
.about-section .btn-style-one::after {
  display: none !important;
}

.about-section .link-box .btn-style-one .btn-title,
.about-section .btn-style-one .btn-title {
  color: var(--primary-color, #272c89) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  white-space: nowrap !important;
  display: inline-block !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 9 !important;
  transition: color 0.3s ease !important;
  transform: none !important;
}

.about-section .link-box .btn-style-one i,
.about-section .link-box .btn-style-one .fa,
.about-section .link-box .btn-style-one .fas {
  color: var(--primary-color, #272c89) !important;
  font-size: 14px !important;
  position: relative !important;
  z-index: 9 !important;
  transition: transform 0.3s ease, color 0.3s ease !important;
  display: inline-block !important;
  line-height: 1 !important;
}

/* SLEEK PREMIUM HOVER STATE */
.about-section .link-box .btn-style-one:hover,
.about-section .btn-style-one:hover {
  background-color: var(--primary-color, #272c89) !important;
  background: var(--primary-color, #272c89) !important;
  border-color: var(--primary-color, #272c89) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(39, 44, 137, 0.45) !important;
}

.about-section .link-box .btn-style-one:hover .btn-title,
.about-section .btn-style-one:hover .btn-title {
  color: var(--secondary-color, #00aaee) !important;
  font-size: 15px !important;
  transform: none !important;
}

.about-section .link-box .btn-style-one:hover i,
.about-section .link-box .btn-style-one:hover .fa,
.about-section .link-box .btn-style-one:hover .fas {
  color: var(--secondary-color, #00aaee) !important;
  transform: translateX(5px) !important;
}

/* ==========================================================================
   24. PRODUCTS & CATEGORY DETAIL PAGE MODERNIZATION
   ========================================================================== */

/* Tighten spacing between Page Title and Sidebar Container */
.sidebar-page-container {
  padding: 35px 0px 60px !important;
}

/* Left Sidebar Category Card Container */
.sidebar-widget.categories {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 22px !important;
  box-shadow: 0 10px 30px rgba(39, 44, 137, 0.06) !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 30px !important;
}

.sidebar-widget.categories .widget-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--primary-color, #272c89) !important;
  padding-bottom: 12px !important;
  margin-bottom: 18px !important;
  border-bottom: 2px solid var(--secondary-color, #00aaee) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.sidebar-widget.categories .widget-title i {
  color: var(--secondary-color, #00aaee) !important;
}

/* Category List Reset & Modernization */
.services-categories {
  position: relative !important;
  margin-bottom: 0 !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
}

.services-categories li {
  position: relative !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  overflow: hidden !important;
  margin: 0 !important;
  z-index: 1 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.services-categories li:last-child {
  border-bottom: 1px solid #e2e8f0 !important;
}

.services-categories li a {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.4 !important;
  padding: 13px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

/* Hide theme sliding overlay pseudo-element */
.services-categories li a:after {
  display: none !important;
}

/* Indicator Icon */
.services-categories li a:before {
  position: static !important;
  content: "\f105" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #94a3b8 !important;
  order: 2 !important;
  transition: all 0.3s ease !important;
}

/* Hover State */
.services-categories li:hover {
  background: #ffffff !important;
  border-color: var(--secondary-color, #00aaee) !important;
  transform: translateX(5px) !important;
  box-shadow: 0 4px 14px rgba(0, 170, 238, 0.15) !important;
}

.services-categories li:hover a {
  color: var(--secondary-color, #00aaee) !important;
}

.services-categories li:hover a:before {
  color: var(--secondary-color, #00aaee) !important;
  transform: translateX(3px) !important;
}

/* Active State */
.services-categories li.active {
  background: var(--secondary-color, #00aaee) !important;
  border-color: var(--secondary-color, #00aaee) !important;
  transform: translateX(6px) !important;
  box-shadow: 0 6px 18px rgba(0, 170, 238, 0.3) !important;
}

.services-categories li.active a {
  color: #ffffff !important;
  font-weight: 700 !important;
}

.services-categories li.active a:before {
  content: "\f0a9" !important;
  color: #ffffff !important;
  transform: none !important;
  font-size: 14px !important;
}

/* Right Detail Content Box */
.service-detail {
  padding-left: 0 !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 35px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e2e8f0 !important;
}

.service-detail .images-box {
  margin: 0 0 32px 0 !important;
  text-align: center !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e2e8f0 !important;
}

.service-detail .images-box .image {
  margin-bottom: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.service-detail .images-box img {
  width: 100% !important;
  max-height: 480px !important;
  object-fit: cover !important;
  border-radius: 14px !important;
  display: block !important;
  margin: 0 auto !important;
  transition: transform 0.5s ease !important;
}

.service-detail .images-box:hover img {
  transform: scale(1.02) !important;
}

.service-detail .content-box {
  padding: 0 !important;
}

.service-detail .content-box .title-box {
  margin-bottom: 25px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid #f1f5f9 !important;
  position: relative !important;
}

.service-detail .content-box .title-box:after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 60px !important;
  height: 3px !important;
  background: var(--secondary-color, #00aaee) !important;
  border-radius: 3px !important;
}

.service-detail .content-box h2 {
  color: var(--primary-color, #272c89) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  letter-spacing: -0.4px !important;
}

.detail-description,
.service-detail .content-box p {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #475569 !important;
  margin-bottom: 20px !important;
}

.detail-description h3,
.detail-description h4,
.detail-description h5 {
  color: var(--primary-color, #272c89) !important;
  font-weight: 700 !important;
  margin-top: 28px !important;
  margin-bottom: 14px !important;
}

.detail-description ul,
.detail-description ol {
  padding-left: 20px !important;
  margin-bottom: 20px !important;
}

.detail-description li {
  line-height: 1.8 !important;
  color: #334155 !important;
  margin-bottom: 8px !important;
}

/* ==========================================================================
   25. SPLIT FAQ (SOLDA SORULAR, SAĞDA CEVAP) MODERNIZATION
   ========================================================================== */

.faq-split-section {
  background-color: #f8fafc !important;
  padding: 50px 0 80px !important;
}

/* Left Column Card Container */
.faq-nav-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 24px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

.faq-nav-header {
  margin-bottom: 20px !important;
  padding-bottom: 15px !important;
  border-bottom: 2px solid #f1f5f9 !important;
}

.faq-nav-header h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--primary-color, #272c89) !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.faq-nav-header h3 i {
  color: var(--secondary-color, #00aaee) !important;
}

.faq-nav-header p {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* Question List Items */
.faq-nav-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.faq-nav-item {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 4px solid transparent !important;
  border-radius: 12px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
}

.faq-nav-number {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  margin-right: 12px !important;
  padding: 3px 8px !important;
  background: #f1f5f9 !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

.faq-nav-title {
  flex: 1 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--primary-color, #272c89) !important;
  line-height: 1.4 !important;
  transition: color 0.3s ease !important;
}

.faq-nav-arrow {
  font-size: 12px !important;
  color: #cbd5e1 !important;
  margin-left: 10px !important;
  transition: all 0.3s ease !important;
}

/* Hover State */
.faq-nav-item:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateX(4px) !important;
}

.faq-nav-item:hover .faq-nav-title {
  color: var(--secondary-color, #00aaee) !important;
}

.faq-nav-item:hover .faq-nav-arrow {
  color: var(--secondary-color, #00aaee) !important;
  transform: translateX(3px) !important;
}

/* ACTIVE State (Seçili Soru) */
.faq-nav-item.active {
  background: #f0f9ff !important;
  border-color: #e2e8f0 !important;
  border-left: 4px solid var(--secondary-color, #00aaee) !important;
  box-shadow: 0 4px 14px rgba(0, 170, 238, 0.12) !important;
  transform: translateX(6px) !important;
}

.faq-nav-item.active .faq-nav-title {
  color: var(--secondary-color, #00aaee) !important;
  font-weight: 700 !important;
}

.faq-nav-item.active .faq-nav-number {
  background: var(--secondary-color, #00aaee) !important;
  color: #ffffff !important;
}

.faq-nav-item.active .faq-nav-arrow {
  color: var(--secondary-color, #00aaee) !important;
  transform: translateX(4px) !important;
}

/* Right Column Answer Panel */
.faq-content-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 32px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  min-height: 100% !important;
}

/* Tab Panels */
.faq-tab-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease !important;
}

.faq-tab-panel.active {
  display: block;
}

.faq-tab-panel.active.show {
  opacity: 1;
  transform: translateY(0);
}

.faq-badge {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--secondary-color, #00aaee) !important;
  background: rgba(0, 170, 238, 0.1) !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  margin-bottom: 12px !important;
  letter-spacing: 0.5px !important;
}

.faq-panel-header h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--primary-color, #272c89) !important;
  line-height: 1.35 !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 2px solid #f1f5f9 !important;
  position: relative !important;
}

.faq-panel-header h2:after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 50px !important;
  height: 3px !important;
  background: var(--secondary-color, #00aaee) !important;
  border-radius: 3px !important;
}

.faq-panel-body,
.faq-panel-body p {
  font-size: 16px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
  margin-bottom: 14px !important;
}

.faq-panel-body p:last-child {
  margin-bottom: 0 !important;
}

.faq-panel-body strong,
.faq-panel-body b {
  color: var(--primary-color, #272c89) !important;
  font-weight: 700 !important;
}

.faq-panel-body a {
  color: var(--secondary-color, #00aaee) !important;
  text-decoration: underline !important;
}

/* ==========================================================================
   26. DISABLE STICKY / FIXED HEADER SCROLL MECHANISM
   ========================================================================== */
.sticky-header, 
.fixed-header .sticky-header,
.mobile-sticky-header,
.is-sticky,
.fixed-header {
  display: none !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep main header normal relative position at page top */
.main-header {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  box-shadow: none !important;
}

/* ==========================================================================
   27. HOMEPAGE NEWS / BLOG CAROUSEL MODERNIZATION (EDITORIAL UI)
   ========================================================================== */

.news-section {
  position: relative !important;
  padding: 80px 0 !important;
  background-color: #f8fafc !important;
}

.news-carousel {
  position: relative !important;
  padding-bottom: 50px !important;
}

/* News Block Container */
.news-block {
  margin-bottom: 10px !important;
}

.news-block .inner-box {
  position: relative !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease !important;
}

.news-block .inner-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(39, 44, 137, 0.12) !important;
  border-color: var(--secondary-color, #00aaee) !important;
}

/* Image Box & Badge */
.news-block .image-box {
  position: relative !important;
  overflow: hidden !important;
  border-top-left-radius: 13px !important;
  border-top-right-radius: 13px !important;
  background: #0f172a !important;
}

.news-block .image-box figure.image {
  margin: 0 !important;
  overflow: hidden !important;
}

.news-block .image-box figure.image img {
  width: 100% !important;
  height: 230px !important;
  object-fit: cover !important;
  display: block !important;
  border-top-left-radius: 13px !important;
  border-top-right-radius: 13px !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.news-block .inner-box:hover .image-box figure.image img {
  transform: scale(1.06) !important;
}

/* Badge on Image */
.news-block .image-box .news-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: var(--secondary-color, #00aaee) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 10px rgba(0, 170, 238, 0.3) !important;
  z-index: 3 !important;
}

/* Content Area */
.news-block .lower-content {
  padding: 24px !important;
}

/* Title (Max 2 Lines Clamp) */
.news-block .lower-content h4 {
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

.news-block .lower-content h4 a {
  color: var(--primary-color, #272c89) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: 2.8em !important;
  transition: color 0.3s ease !important;
}

.news-block .inner-box:hover .lower-content h4 a {
  color: var(--secondary-color, #00aaee) !important;
}

/* Excerpt Text (Max 2 Lines Clamp) */
.news-block .lower-content .text {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  height: 3.2em !important;
  margin-bottom: 18px !important;
}

/* Read More Link */
.news-block .lower-content .btn-box {
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.news-block .lower-content .read-more {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--secondary-color, #00aaee) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.news-block .lower-content .read-more i {
  font-size: 12px !important;
  transition: transform 0.3s ease !important;
}

.news-block .lower-content .read-more:hover i,
.news-block .inner-box:hover .read-more i {
  transform: translateX(4px) !important;
}

/* Owl Carousel Navigation & Dots Styling */
.news-carousel .owl-nav {
  display: none !important;
}

.news-carousel .owl-dots {
  text-align: center !important;
  margin-top: 25px !important;
}

.news-carousel .owl-dots .owl-dot span {
  width: 10px !important;
  height: 10px !important;
  margin: 0 5px !important;
  background: #cbd5e1 !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.news-carousel .owl-dots .owl-dot.active span,
.news-carousel .owl-dots .owl-dot:hover span {
  width: 26px !important;
  border-radius: 10px !important;
  background: var(--secondary-color, #00aaee) !important;
}

/* ==========================================================================
   28. COMPACT VERTICAL SPACING BETWEEN HOMEPAGE SECTIONS & FOOTER
   ========================================================================== */

.clients-section {
  padding: 15px 0 !important;
  margin: 0 !important;
}

.top-features {
  padding: 20px 0 !important;
  margin: 0 !important;
}

.news-section {
  padding: 35px 0 20px 0 !important;
  margin: 0 !important;
}

.news-carousel {
  padding-bottom: 10px !important;
}

.news-carousel .owl-dots {
  margin-top: 15px !important;
}

.about-section {
  padding: 40px 0 !important;
  margin: 0 !important;
}

.services-section {
  padding: 40px 0 25px 0 !important;
  margin: 0 !important;
}

.team-section {
  padding: 40px 0 25px 0 !important;
  margin: 0 !important;
}

/* Reduce extra top padding on main footer widgets section */
.main-footer .widgets-section {
  padding: 45px 0 35px 0 !important;
}

/* ==========================================================================
   29. CONTACT FORM HARMONIOUS UI & ALIGNMENT FIXES
   ========================================================================== */

.contact-form .form-control {
  height: 52px !important;
  padding: 12px 18px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.contact-form .form-control::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
}

.contact-form .form-control:focus {
  background-color: #ffffff !important;
  border-color: var(--secondary-color, #00aaee) !important;
  box-shadow: 0 0 0 4px rgba(0, 170, 238, 0.15) !important;
  outline: none !important;
}

/* Phone Group with +90 Prefix Badge */
.contact-phone-group {
  display: flex !important;
  position: relative !important;
  width: 100% !important;
}

.contact-phone-group .phone-prefix {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--primary-color, #272c89) !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-right: none !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  user-select: none !important;
}

.contact-phone-group .phone-field {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.contact-form textarea.contact-textarea {
  height: 100% !important;
  min-height: 180px !important;
  resize: vertical !important;
}

@media (min-width: 992px) {
  .contact-form .row.align-items-stretch {
    display: flex !important;
  }
  .contact-form textarea.contact-textarea {
    height: 186px !important;
  }
}

/* ==========================================================================
   30. UNIVERSAL BUTTON DESIGN & HIGH-CONTRAST TEXT SYSTEM
   ========================================================================== */

/* Disable legacy 5-span white background hover effect */
.theme-btn span:not(.btn-title) {
  display: none !important;
}

/* Primary Button (.btn-style-one) - Dark Primary Background + Crisp White Text */
.btn-style-one,
.theme-btn.btn-style-one,
a.btn-style-one,
button.btn-style-one,
.theme-btn {
  background-color: var(--primary-color, #272c89) !important;
  color: #ffffff !important;
  border: 1px solid var(--primary-color, #272c89) !important;
  border-radius: 30px !important;
  padding: 12px 30px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 14px rgba(39, 44, 137, 0.25) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

.btn-style-one .btn-title,
.btn-style-one span.btn-title,
.btn-style-one i,
.btn-style-one a,
.theme-btn .btn-title,
.theme-btn span.btn-title,
.theme-btn i {
  color: #ffffff !important;
  position: relative !important;
  z-index: 2 !important;
  transition: color 0.3s ease !important;
}

/* Hover & Active States - Secondary Color Accent with 100% Crisp White Text */
.btn-style-one:hover,
.theme-btn.btn-style-one:hover,
a.btn-style-one:hover,
button.btn-style-one:hover,
.theme-btn:hover {
  background-color: var(--secondary-color, #00aaee) !important;
  border-color: var(--secondary-color, #00aaee) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(39, 44, 137, 0.4) !important;
}

.btn-style-one:hover .btn-title,
.btn-style-one:hover span.btn-title,
.btn-style-one:hover i,
.theme-btn:hover .btn-title,
.theme-btn:hover span.btn-title,
.theme-btn:hover i {
  color: #ffffff !important;
  /* Vendor style.css has ".theme-btn:hover span { transform: scale(2) }"
     which also matches .btn-title (it's a <span> too) and blows the text
     up — cancel that out so only the background/color changes on hover. */
  transform: none !important;
}

.btn-style-one:active,
.theme-btn.btn-style-one:active {
  transform: translateY(0) !important;
  box-shadow: 0 3px 10px rgba(39, 44, 137, 0.3) !important;
}

/* Secondary / Outline Button (.btn-style-two) */
.btn-style-two,
.theme-btn.btn-style-two {
  background-color: #ffffff !important;
  color: var(--primary-color, #272c89) !important;
  border: 2px solid var(--primary-color, #272c89) !important;
  border-radius: 30px !important;
  padding: 11px 28px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
  transition: all 0.3s ease !important;
}

.btn-style-two .btn-title,
.btn-style-two span.btn-title,
.btn-style-two i {
  color: var(--primary-color, #272c89) !important;
}

.btn-style-two:hover,
.theme-btn.btn-style-two:hover {
  background-color: var(--primary-color, #272c89) !important;
  color: #ffffff !important;
  border-color: var(--primary-color, #272c89) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(39, 44, 137, 0.3) !important;
}

.btn-style-two:hover .btn-title,
.btn-style-two:hover span.btn-title,
.btn-style-two:hover i {
  color: #ffffff !important;
}