/* css/why-choose-us.css */

/* --- 1. Hero Parallax --- */
.page-hero {
    height: 80vh;
    background-color: #000;
}

.parallax-bg {
    background-image: url('../../assets/images/whychooseus/1.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax Magic */
}

.hero-overlay {
    background: linear-gradient(45deg, rgba(0,0,0,0.8), rgba(233,33,38,0.2));
}

.letter-spacing-3 { letter-spacing: 3px; }

/* Modern Play Button */
.play-btn-modern {
    width: 90px;
    height: 90px;
    background: #fff;
    color: var(--primary-red);
    border: none;
    font-size: 24px;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s;
}

.play-btn-modern:hover {
    transform: scale(1.1);
}

.play-btn-modern .waves {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255, 0.3);
    border-radius: 50%;
    z-index: -1;
    animation: wave 2s infinite;
}

@keyframes wave {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* Scroll Down Bounce */
.animate-bounce {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-10px);}
    60% {transform: translateY(-5px);}
}

/* --- 2. Stats Strip --- */
.stats-strip {
    background-color: #111;
}

/* --- 3. Tabs Section --- */
.image-frame-border {
    transform: translate(-15px, -15px);
    z-index: 0;
}
.img-fluid { z-index: 1; }

.nav-pills .nav-link {
    color: var(--dark-gray);
    background: transparent;
    border-bottom: 2px solid #ddd;
    margin-right: 15px;
    transition: 0.3s;
}

.nav-pills .nav-link.active {
    background: transparent;
    color: var(--primary-red);
    border-bottom: 2px solid var(--primary-red);
}

.nav-pills .nav-link:hover {
    color: var(--primary-red);
}

/* --- 4. Feature Boxes --- */
.feature-box {
    border: 1px solid #f0f0f0;
    z-index: 1;
}

.shadow-hover:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    transform: translateY(-10px);
}

.hover-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background-color: var(--primary-red);
    transition: width 0.4s ease;
}

.feature-box:hover .hover-line {
    width: 100%;
}

/* --- 5. Logos --- */
.grayscale-logos {
    filter: grayscale(100%);
    transition: 0.3s;
}
.grayscale-logos:hover {
    filter: grayscale(0%);
    opacity: 1 !important;
}

.why-choose-us-stats-strip .stat-item{
    text-align: center;
}