/* ===========================
   Custom Styles for Atronfire
   =========================== */
html,
body {
    overflow-x: hidden;
}

/* Mega Menu Subcategory Hover Effect */
.peer\/sub1:hover,
.peer\/sub2:hover,
.peer\/sub3:hover,
.peer\/sub4:hover,
.peer\/sub5:hover,
.peer\/sub6:hover,
.peer\/sub7:hover,
.peer\/sub8:hover {
    background-color: #ffffff;
    color: #C62828;
}

/* Product card image hover */
.group\/card img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.group\/card:hover img {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Swiper Bullets */
.hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: white;
    opacity: 0.5;
    transition: all 0.3s;
}

.hero-slider .swiper-pagination-bullet-active {
    background: #C62828;
    opacity: 1;
    transform: scale(1.2);
}

.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
    font-size: 28px;
    font-weight: bold;
}

/* Search overlay animation */
#search-overlay {
    transition: opacity 0.2s ease;
}

#search-overlay.hidden {
    display: none;
}

/* Parallax fallback for mobile */
@supports (-webkit-touch-callout: none) {
    .bg-fixed {
        background-attachment: scroll;
    }
}

/* Smooth button hover */
.group:hover i {
    transform: translateX(4px);
}

/* Blog carousel arrows */
.blog-carousel .swiper-button-next,
.blog-carousel .swiper-button-prev {
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 40px;
    height: 40px;
}

.blog-carousel .swiper-button-next::after,
.blog-carousel .swiper-button-prev::after {
    font-size: 18px;
}

.blog-carousel .swiper-slide {
    height: auto;
}


/* Clients Swiper */
.clients-swiper .swiper-button-next,
.clients-swiper .swiper-button-prev {
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 40px;
    height: 40px;
}

.clients-swiper .swiper-button-next::after,
.clients-swiper .swiper-button-prev::after {
    font-size: 18px;
}

.clients-swiper .swiper-slide img {
    transition: filter 0.3s;
}