/* Hero Swiper Styles - Enhanced with higher specificity */
section.hero-area-three .hero-swiper {
    width: 100% !important;
    height: auto !important;
    min-height: 400px !important;
    max-height: 800px !important;
}

section.hero-area-three .hero-swiper .swiper-slide {
    position: relative !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: auto !important;
    min-height: 400px !important;
    max-height: 800px !important;
    overflow: hidden !important;
    aspect-ratio: 2.4/1 !important; /* 1920x800 oranı */
}

section.hero-area-three .hero-swiper .swiper-slide .container {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

/* Override main CSS padding with higher specificity */
section.hero-area-three .hero-swiper .hero-padding-three {
    padding: 0 !important;
    height: auto !important;
    min-height: 400px !important;
    max-height: 800px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    aspect-ratio: 2.4/1 !important; /* 1920x800 oranı */
}

section.hero-area-three .hero-swiper .single-slider {
    height: auto !important;
    min-height: 400px !important;
    max-height: 800px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    aspect-ratio: 2.4/1 !important; /* 1920x800 oranı */
}

/* Force background image to display correctly */
section.hero-area-three .hero-swiper .single-slider[style*="background"] {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* Navigation Arrows */
section.hero-area-three .hero-swiper .swiper-button-next,
section.hero-area-three .hero-swiper .swiper-button-prev {
    color: #fff !important;
    background: var(--primary) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
}

section.hero-area-three .hero-swiper .swiper-button-next:hover,
section.hero-area-three .hero-swiper .swiper-button-prev:hover {
    background: var(--primary-light) !important;
    transform: scale(1.1) !important;
}

section.hero-area-three .hero-swiper .swiper-button-next::after,
section.hero-area-three .hero-swiper .swiper-button-prev::after {
    font-size: 20px !important;
    font-weight: bold !important;
}

/* Pagination */
section.hero-area-three .hero-swiper .swiper-pagination {
    bottom: 30px !important;
    z-index: 10 !important;
}

section.hero-area-three .hero-swiper .swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background: var(--primary) !important;
    opacity: 0.7 !important;
    transition: all 0.3s ease !important;
}

section.hero-area-three .hero-swiper .swiper-pagination-bullet-active {
    background: var(--primary-light) !important;
    transform: scale(1.2) !important;
    opacity: 1 !important;
}

/* Responsive Design */
@media (max-width: 1400px) {
    section.hero-area-three .hero-swiper {
        height: auto !important;
        min-height: 350px !important;
        max-height: 700px !important;
    }
    section.hero-area-three .hero-swiper .swiper-slide {
        height: auto !important;
        min-height: 350px !important;
        max-height: 700px !important;
    }
    section.hero-area-three .hero-swiper .hero-padding-three {
        height: auto !important;
        min-height: 350px !important;
        max-height: 700px !important;
    }
    section.hero-area-three .hero-swiper .single-slider {
        height: auto !important;
        min-height: 350px !important;
        max-height: 700px !important;
    }
}

@media (max-width: 1200px) {
    section.hero-area-three .hero-swiper {
        height: auto !important;
        min-height: 300px !important;
        max-height: 600px !important;
    }
    section.hero-area-three .hero-swiper .swiper-slide {
        height: auto !important;
        min-height: 300px !important;
        max-height: 600px !important;
    }
    section.hero-area-three .hero-swiper .hero-padding-three {
        height: auto !important;
        min-height: 300px !important;
        max-height: 600px !important;
    }
    section.hero-area-three .hero-swiper .single-slider {
        height: auto !important;
        min-height: 300px !important;
        max-height: 600px !important;
    }
}

@media (max-width: 992px) {
    section.hero-area-three .hero-swiper {
        height: auto !important;
        min-height: 250px !important;
        max-height: 500px !important;
    }
    section.hero-area-three .hero-swiper .swiper-slide {
        height: auto !important;
        min-height: 250px !important;
        max-height: 500px !important;
    }
    section.hero-area-three .hero-swiper .hero-padding-three {
        height: auto !important;
        min-height: 250px !important;
        max-height: 500px !important;
    }
    section.hero-area-three .hero-swiper .single-slider {
        height: auto !important;
        min-height: 250px !important;
        max-height: 500px !important;
    }
}

@media (max-width: 768px) {
    section.hero-area-three .hero-swiper {
        height: auto !important;
        min-height: 200px !important;
        max-height: 400px !important;
    }
    section.hero-area-three .hero-swiper .swiper-slide {
        height: auto !important;
        min-height: 200px !important;
        max-height: 400px !important;
    }
    section.hero-area-three .hero-swiper .hero-padding-three {
        height: auto !important;
        min-height: 200px !important;
        max-height: 400px !important;
    }
    section.hero-area-three .hero-swiper .single-slider {
        height: auto !important;
        min-height: 200px !important;
        max-height: 400px !important;
    }
    
    section.hero-area-three .hero-swiper .swiper-button-next,
    section.hero-area-three .hero-swiper .swiper-button-prev {
        width: 40px !important;
        height: 40px !important;
    }
    
    section.hero-area-three .hero-swiper .swiper-button-next::after,
    section.hero-area-three .hero-swiper .swiper-button-prev::after {
        font-size: 16px !important;
    }
    
    section.hero-area-three .hero-swiper .swiper-pagination {
        bottom: 20px !important;
    }
}

@media (max-width: 576px) {
    section.hero-area-three .hero-swiper {
        height: auto !important;
        min-height: 150px !important;
        max-height: 300px !important;
    }
    section.hero-area-three .hero-swiper .swiper-slide {
        height: auto !important;
        min-height: 150px !important;
        max-height: 300px !important;
    }
    section.hero-area-three .hero-swiper .hero-padding-three {
        height: auto !important;
        min-height: 150px !important;
        max-height: 300px !important;
    }
    section.hero-area-three .hero-swiper .single-slider {
        height: auto !important;
        min-height: 150px !important;
        max-height: 300px !important;
    }
}

@media (max-width: 480px) {
    section.hero-area-three .hero-swiper {
        height: auto !important;
        min-height: 120px !important;
        max-height: 240px !important;
    }
    section.hero-area-three .hero-swiper .swiper-slide {
        height: auto !important;
        min-height: 120px !important;
        max-height: 240px !important;
    }
    section.hero-area-three .hero-swiper .hero-padding-three {
        height: auto !important;
        min-height: 120px !important;
        max-height: 240px !important;
    }
    section.hero-area-three .hero-swiper .single-slider {
        height: auto !important;
        min-height: 120px !important;
        max-height: 240px !important;
    }
    
    section.hero-area-three .hero-swiper .swiper-button-next,
    section.hero-area-three .hero-swiper .swiper-button-prev {
        width: 35px !important;
        height: 35px !important;
    }
    
    section.hero-area-three .hero-swiper .swiper-button-next::after,
    section.hero-area-three .hero-swiper .swiper-button-prev::after {
        font-size: 14px !important;
    }
}

/* RTL Support */
[dir="rtl"] section.hero-area-three .hero-swiper .swiper-button-next {
    right: auto !important;
    left: 20px !important;
}

[dir="rtl"] section.hero-area-three .hero-swiper .swiper-button-prev {
    left: auto !important;
    right: 20px !important;
}

/* Animation for slide content */
section.hero-area-three .hero-swiper .swiper-slide-active .hero-caption {
    animation: fadeInUp 1s ease-out !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero caption styles */
section.hero-area-three .hero-swiper .swiper-slide {
    position: relative !important;
}

section.hero-area-three .hero-swiper .swiper-slide .hero-caption .title {
    color: #fff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

section.hero-area-three .hero-swiper .swiper-slide .hero-caption .pera {
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

section.hero-area-three .hero-swiper .swiper-slide .hero-caption .key-title {
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

section.hero-area-three .hero-swiper .swiper-slide .hero-caption .hero-count .title {
    color: #fff !important;
}

section.hero-area-three .hero-swiper .swiper-slide .hero-caption .hero-count .pera {
    color: #fff !important;
}

/* Hover effects */
section.hero-area-three .hero-swiper .swiper-slide {
    transition: transform 0.3s ease !important;
}

section.hero-area-three .hero-swiper .swiper-slide a {
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

section.hero-area-three .hero-swiper .swiper-slide:hover {
    transform: scale(1.02) !important;
}

/* Additional fixes for background image issues */
section.hero-area-three .hero-swiper .swiper-slide .single-slider {
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-origin: padding-box !important;
}

/* Force override any conflicting styles */
section.hero-area-three .hero-swiper .swiper-slide .single-slider[style*="background"] {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
} 