.top-social-menu{
    background-color: var(--main-red) !important;
    .social {
        a {
            color: #fff;
            font-size: 1.2rem;
            padding: 0.5rem;
            transition: color 0.3s ease;
            &:hover {
                color: var(--main-dark);
            }
    }

}

.language-menu{
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 0;
    li{
        margin: 0 5px;
        a {
            color: #fff;
            padding: 0.5rem;
            transition: color 0.3s ease;
            &:hover {
                color: var(--main-dark);
            }
        }
    }
}
}

.ftco-navbar-light{
    background-color: var(--main-dark) !important;
    .nav-item.active{
        background-color: var(--main-red) !important;
        color: #fff !important;
    }
}

.ftco-navbar-light .navbar-nav > .nav-item.active > a{
    background-color: var(--main-red) !important;
}

.ftco-navbar-light .navbar-nav > .nav-item a:hover{
    background-color: var(--main-red) !important;
}

.topper .icon span{
    color: var(--main-red);
}

.bg-red{
    background-color: var(--main-red) !important;
    color: #fff;
    border-color: transparent !important;
    &:hover{
        background-color: var(--main-dark) !important;
        color: #fff !important;
    }
}

.bg-dark{
    background-color: var(--main-dark) !important;
    border-color: transparent !important;
}

.form-control{
    option{
        background-color: var(--main-dark) !important;
        padding-left: 5px;
    }
}

.ftco-about{
    color: #fff;
    h2{
        color: #fff;
    }
}

.tab-pane p{
    color: var(--main-dark)
}

.tabulation-2 .nav-pills .nav-item .nav-link.active{
    background-color: var(--main-red);
}

.tabulation-2 .nav-pills .nav-item .nav-link{
    font-size: 13px;
}

.ftco-counter .text span{
    color: #fff;
}

/* Slider için özel CSS */
.home-slider.owl-carousel,
.home-slider.owl-carousel .owl-stage,
.home-slider.owl-carousel .owl-item,
.home-slider.owl-carousel .owl-stage-outer {
    touch-action: pan-y !important;
}

.carousel-testimony.owl-carousel,
.carousel-testimony.owl-carousel .owl-stage,
.carousel-testimony.owl-carousel .owl-item,
.carousel-testimony.owl-carousel .owl-stage-outer {
    touch-action: pan-y !important;
}

/* Overlay katmanı için özel CSS */
.owl-carousel.home-slider .slider-item .overlay {
    touch-action: none !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Animasyonlu logo için CSS */
.animated-logo {
    /* Başlangıçta görünmez ve solda */
    transform: translateX(-100%);
    opacity: 0;
    /* Animasyonu tanımlayın */
    animation: slideIn 2s ease-out forwards;
}

@keyframes slideIn {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}



/* Logo Loader Animation - Letter by letter reveal */
.logo-loader {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease-out, visibility 0s linear 0.6s;
}

.logo-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.logo-loader .logo-container {
  position: relative;
  width: 266px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Individual letter segments */
.logo-loader .logo-letter {
  height: 100%;
  background-image: url('../logo.png');
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(20px);
  animation: letterAppear 0.5s forwards;
  /* margin: 0 1px; */
}

/* Specific letter styles for 266px width */
.logo-loader .letter-0 {
  width: 32px; /* Approx 12% of 266px */
  background-position: 0 0;
  background-size: 266px 80px;
  animation-delay: 0s;
}

.logo-loader .letter-1 {
  width: 32px;
  background-position: -32px 0;
  background-size: 266px 80px;
  animation-delay: 0.1s;
}

.logo-loader .letter-2 {
  width: 32px;
  background-position: -64px 0;
  background-size: 266px 80px;
  animation-delay: 0.2s;
}

.logo-loader .letter-3 {
  width: 32px;
  background-position: -96px 0;
  background-size: 266px 80px;
  animation-delay: 0.3s;
}

.logo-loader .letter-4 {
  width: 10px; /* Space */
  background-position: -128px 0;
  background-size: 266px 80px;
  animation-delay: 0.4s;
}

.logo-loader .letter-5 {
  width: 32px;
  background-position: -138px 0;
  background-size: 266px 80px;
  animation-delay: 0.5s;
}

.logo-loader .letter-6 {
  width: 32px;
  background-position: -170px 0;
  background-size: 266px 80px;
  animation-delay: 0.6s;
}

.logo-loader .letter-7 {
  width: 32px;
  background-position: -202px 0;
  background-size: 266px 80px;
  animation-delay: 0.7s;
}

.logo-loader .letter-8 {
  width: 32px;
  background-position: -234px 0;
  background-size: 266px 80px;
  animation-delay: 0.8s;
}

.logo-loader .letter-9 {
  width: 32px;
  background-position: -266px 0;
  background-size: 266px 80px;
  animation-delay: 0.9s;
}

@keyframes letterAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .logo-loader .logo-container {
    width: 200px;
    height: 100px;
  }
  
  .logo-loader .letter-0 {
    width: 24px;
    background-position: 0 0;
    background-size: 200px 100px;
    animation-delay: 0s;
  }
  
  .logo-loader .letter-1 {
    width: 24px;
    background-position: -24px 0;
    background-size: 200px 100px;
    animation-delay: 0.15s;
  }
  
  .logo-loader .letter-2 {
    width: 24px;
    background-position: -48px 0;
    background-size: 200px 100px;
    animation-delay: 0.3s;
  }
  
  .logo-loader .letter-3 {
    width: 24px;
    background-position: -72px 0;
    background-size: 200px 100px;
    animation-delay: 0.45s;
  }
  
  .logo-loader .letter-4 {
    width: 8px;
    background-position: -96px 0;
    background-size: 200px 100px;
    animation-delay: 0.6s;
  }
  
  .logo-loader .letter-5 {
    width: 24px;
    background-position: -104px 0;
    background-size: 200px 100px;
    animation-delay: 0.75s;
  }
  
  .logo-loader .letter-6 {
    width: 24px;
    background-position: -128px 0;
    background-size: 200px 100px;
    animation-delay: 0.9s;
  }
  
  .logo-loader .letter-7 {
    width: 24px;
    background-position: -152px 0;
    background-size: 200px 100px;
    animation-delay: 1.05s;
  }
  
  .logo-loader .letter-8 {
    width: 24px;
    background-position: -176px 0;
    background-size: 200px 100px;
    animation-delay: 1.2s;
  }
  
  .logo-loader .letter-9 {
    width: 24px;
    background-position: -200px 0;
    background-size: 200px 100px;
    animation-delay: 1.35s;
  }
}

@media (max-width: 480px) {
  .logo-loader .logo-container {
    width: 150px;
    height: 75px;
  }
  
  .logo-loader .letter-0 {
    width: 18px;
    background-position: 0 0;
    background-size: 150px 75px;
    animation-delay: 0s;
  }
  
  .logo-loader .letter-1 {
    width: 18px;
    background-position: -18px 0;
    background-size: 150px 75px;
    animation-delay: 0.15s;
  }
  
  .logo-loader .letter-2 {
    width: 18px;
    background-position: -36px 0;
    background-size: 150px 75px;
    animation-delay: 0.3s;
  }
  
  .logo-loader .letter-3 {
    width: 18px;
    background-position: -54px 0;
    background-size: 150px 75px;
    animation-delay: 0.45s;
  }
  
  .logo-loader .letter-4 {
    width: 6px;
    background-position: -72px 0;
    background-size: 150px 75px;
    animation-delay: 0.6s;
  }
  
  .logo-loader .letter-5 {
    width: 18px;
    background-position: -78px 0;
    background-size: 150px 75px;
    animation-delay: 0.75s;
  }
  
  .logo-loader .letter-6 {
    width: 18px;
    background-position: -96px 0;
    background-size: 150px 75px;
    animation-delay: 0.9s;
  }
  
  .logo-loader .letter-7 {
    width: 18px;
    background-position: -114px 0;
    background-size: 150px 75px;
    animation-delay: 1.05s;
  }
  
  .logo-loader .letter-8 {
    width: 18px;
    background-position: -132px 0;
    background-size: 150px 75px;
    animation-delay: 1.2s;
  }
  
  .logo-loader .letter-9 {
    width: 18px;
    background-position: -150px 0;
    background-size: 150px 75px;
    animation-delay: 1.35s;
  }
}