/* ============================================= */
/*          Brands Section Styling             */
/* ============================================= */

#brands {
    padding: 80px 0; /* Adjust padding as needed */
    position: relative; /* Needed for overlays */
    overflow: hidden; /* Prevent potential overflow from animations */
    /* background-color removed to use gradient from style.css */
}

/* Keep existing overlays if desired */
.brands-pattern-overlay {
    /* Existing styles */
    z-index: 1;
}

.brands-animated-dots-container {
    /* Existing styles */
    z-index: 2;
}

#brands .container {
    position: relative; /* Ensure content is above overlays */
    z-index: 3;
}

/* Style for the main title */
#brands .section-title {
    font-family: 'IDLEWILD', sans-serif;
    font-weight: bold;
    font-size: clamp(2rem, 6vw, 2.8rem); /* Adjusted responsive size */
    color: white; /* Changed to white for better contrast on dark bg */
    margin-bottom: 80px; /* Increased space below title (was 40px) */
    text-transform: uppercase;
    text-align: center;
    padding: 0 15px; /* Add horizontal padding to prevent edge clipping */
    overflow-wrap: break-word; /* Allow wrapping if needed */
    word-wrap: break-word; /* Legacy support */
}

/* Container for the highlight blocks */
.brand-highlights-container {
    margin-top: 80px; /* Increased space above highlights (was 30px) */
    display: flex;
    flex-direction: column;
    gap: 25px; /* Space between highlight blocks */
}

/* Individual highlight block */
.brand-highlight {
    text-align: center;
    padding: 15px 0; /* Reduced vertical padding */
    border-bottom: 1px solid rgba(255, 123, 0, 0.15); /* Subtle separator */

    /* Animation Initial State - Reveal from bottom with rotation */
    opacity: 0;
    transform: translateY(40px) rotateX(-20deg); /* Start lower and slightly rotated */
    transform-origin: bottom center; /* Rotate around the bottom edge */
    transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Removed filter transition */
}

.brand-highlight:last-child {
    border-bottom: none; /* Remove border from last item */
}

/* Animation Active State (when .is-visible class is added) */
.brand-highlight.is-visible {
    opacity: 1;
    transform: translateY(0) rotateX(0deg); /* End at final position with no rotation */
    /* filter property removed */
}

/* Large Brand Name */
.highlight-name {
    font-family: 'IDLEWILD', sans-serif; /* Use header font */
    font-weight: bold;
    font-size: clamp(2.5rem, 6vw, 4.5rem); /* Large, responsive font size */
    color: white; /* White for prominence */
    margin-bottom: 5px; /* Reduced space */
    line-height: 1.1;
    text-transform: uppercase; /* Optional: Uppercase for impact */
    letter-spacing: -0.02em;
    transition: color 0.3s ease-in-out; /* Transition for hover */
}

/* Smaller Category/Descriptor Text */
.highlight-category {
    font-family: 'Gotham HTF Light', sans-serif;
    font-size: 1rem; /* Smaller size */
    color: rgba(255, 255, 255, 0.7); /* Lighter gray */
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease-in-out; /* Transition for hover */
}

/* Hover effect on the entire block */
.brand-highlight:hover .highlight-name,
.brand-highlight:hover .highlight-category {
    color: var(--primary-orange); /* Change both to orange on hover */
    cursor: default;
}

/* --- Brand Counter Styles --- */
.brand-counter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 5;
}

.brand-counter-number {
    font-family: 'IDLEWILD', sans-serif;
    font-weight: bold;
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    color: #fff;
    letter-spacing: -0.03em;
    text-shadow: 0 2px 12px rgba(4,102,200,0.18), 0 1px 0 #222;
    line-height: 1.1;
    transition: color 0.3s;
}

.brand-counter-label {
    display: block;
    font-family: 'Gotham HTF Ultra', 'Gotham HTF', sans-serif;
    font-size: 1.1rem;
    color: #ff7b00;
    letter-spacing: 0.12em;
    margin-top: 0.2em;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1.2;
    transition: color 0.3s;
}

/* Ticker Group - Complete layout overhaul */
.ticker-group {
    margin-top: 50px;
    margin-bottom: 100px; /* Significant space below counter group */
}

/* Ticker Row - Controls horizontal/vertical layout */
.ticker-row {
    display: flex;
    flex-direction: column; /* Default to vertical stacking for mobile */
    gap: 80px; /* Large vertical spacing between counters on mobile */
    align-items: center;
    justify-content: center;
}

/* Media queries for layout control */
@media (min-width: 992px) {
    /* Desktop layout: side by side with large spacing */
    .ticker-row {
        flex-direction: row;
        justify-content: space-evenly;
        gap: 80px; /* Increased horizontal spacing between counters */
        margin-top: 20px;
    }
    
    /* Adjust counter size for desktop */
    .brand-counter-number {
        font-size: clamp(3rem, 5vw, 4.5rem);
    }
    
    /* Ensure proper horizontal spacing on desktop */
    .ticker-group {
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    /* Tablet layout: still vertical but adjusted spacing */
    .ticker-row {
        gap: 70px;
    }
    
    .brand-counter-number {
        font-size: clamp(2.5rem, 6vw, 3.5rem);
    }
    
    .brand-counter-label {
        font-size: 1.05rem;
    }
}

@media (max-width: 767.98px) {
    /* Mobile layout */
    .ticker-row {
        gap: 60px; /* Still significant but slightly reduced for smaller screens */
    }
    
    .brand-counter-number {
        font-size: clamp(2rem, 8vw, 3.2rem);
    }
    
    .brand-counter-label {
        font-size: 1rem;
    }
    
    .ticker-group {
        margin-top: 40px;
        margin-bottom: 80px;
    }
}

@media (max-width: 575.98px) {
    /* Small mobile adjustments */
    .ticker-row {
        gap: 50px; /* Still significant spacing */
    }
    
    .brand-counter-number {
        font-size: clamp(1.8rem, 10vw, 2.5rem);
    }
    
    .brand-counter-label {
        font-size: 0.9rem;
    }
    
    .ticker-group {
        margin-top: 30px;
        margin-bottom: 60px;
    }
}


/* Responsive Adjustments */
@media (max-width: 767.98px) {
    #brands .section-title {
        font-size: 2.5rem; /* Adjusted title size */
    }
    .highlight-name {
        font-size: clamp(2rem, 8vw, 3.5rem); /* Adjust size for tablets */
    }
    .highlight-category {
        font-size: 0.9rem;
    }
    .brand-highlights-container {
        gap: 30px;
    }
}

@media (max-width: 575.98px) {
    #brands .section-title {
        font-size: 2rem; /* Adjusted title size */
    }
     .highlight-name {
        font-size: clamp(1.8rem, 10vw, 3rem); /* Adjust size for mobile */
    }
    .highlight-category {
        font-size: 0.85rem;
    }
    #brands {
        padding: 60px 15px; /* Add some horizontal padding */
    }
     .brand-highlights-container {
        gap: 25px;
    }
}