/* Brand Partners Dot Matrix Styles */

/* Brands Section with dot matrix */
.brands {
    padding: clamp(6rem, 10vw, 10rem) 2rem clamp(3rem, 5vw, 5rem);
    background: linear-gradient(to bottom, rgba(11, 15, 28, 0.5), rgba(11, 15, 28, 0.3));
    position: relative;
    overflow: hidden; /* Ensure the dots stay within the section */
    min-height: 100vh; /* Ensure a minimum height to allow proper dot pattern coverage */
}

/* Responsive padding adjustments for brands section */
@media (max-width: 768px) {
    .brands {
        padding-bottom: clamp(2rem, 4vw, 4rem);
    }
}

@media (max-width: 576px) {
    .brands {
        padding-bottom: 2rem; /* Further reduce bottom padding on mobile */
    }
}

/* Static dot matrix pattern overlay with fade-out */
.brands-pattern-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center center;
    background-repeat: repeat;
    opacity: 0.8;
    pointer-events: none; /* Allow clicking through to elements below */
    min-height: 100vh; /* Ensure it covers at least the viewport height */
    
    /* Add a slanted mask that fades out the dots as they approach the separator */
    mask-image: linear-gradient(
        5deg, /* Match the 5-degree angle of the slanted separator */
        transparent 0%, /* Fully transparent at bottom/slant */
        rgba(0, 0, 0, 0.4) 5%, /* Start fading in quickly */
        rgba(0, 0, 0, 1) 15% /* Fully visible above the fade zone */
    );
    -webkit-mask-image: linear-gradient(
        5deg, /* Match the 5-degree angle of the slanted separator */
        transparent 0%, /* Fully transparent at bottom/slant */
        rgba(0, 0, 0, 0.4) 5%, /* Start fading in quickly */
        rgba(0, 0, 0, 1) 15% /* Fully visible above the fade zone */
    );
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-position: bottom;
    -webkit-mask-position: bottom;
}

/* Container for the static dots */
.brands-animated-dots-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh; /* Ensure it covers at least the viewport height */
    z-index: 2;
    pointer-events: none;
    overflow: visible; /* Allow dots to occasionally overflow for natural look */
}

/* Style for individual static dots */
.brands-animated-dot {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.18);
    pointer-events: none;
}

/* Ensure content appears above the dot matrix */
.brands-content {
    position: relative;
    z-index: 4;
}

/* Ensure the border appears above the dot matrix */
.brands::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(45deg, rgb(255, 123, 0), rgb(4, 102, 200));
    opacity: 0.3;
    z-index: 3;
}

/* Slanted separator between brands section and footer */
.slanted-separator {
    position: relative;
    height: 120px;
    width: 100%;
    overflow: hidden;
    margin-top: -1px; /* Avoid gap between sections */
    z-index: 4;
}

/* Responsive height adjustments for the slanted separator */
@media (max-width: 768px) {
    .slanted-separator {
        height: 80px; /* Reduce height on tablets */
    }
}

@media (max-width: 576px) {
    .slanted-separator {
        height: 60px; /* Further reduce height on mobile phones */
    }
}

.slanted-separator::after {
    content: '';
    position: absolute;
    height: 1px; /* Thinner line matching the top separator */
    width: 140%; /* Extra width to account for rotation */
    top: 50%;
    left: -20%; /* Offset to ensure full width coverage */
    background: linear-gradient(90deg, rgb(255, 123, 0), rgb(4, 102, 200));
    transform: rotate(5deg) translateY(-50%); /* Positive rotation - opposite direction */
    opacity: 0.3; /* Match the subtle opacity of other separators */
    z-index: 5;
}

/* Ensure dot matrix continues into the separator */
.slanted-separator .dots-extension {
    position: absolute;
    top: -80px; /* Extend even further up into the Brand Partners section */
    left: 0;
    width: 100%;
    height: 200px; /* Increase height to cover the entire separator plus overlap */
    background: linear-gradient(to bottom, rgba(11, 15, 28, 0.5), rgba(11, 15, 28, 0.3) 70%, rgba(11, 15, 28, 0.2) 85%, transparent);
    z-index: 1;
}

/* Responsive adjustments for dots extension */
@media (max-width: 768px) {
    .slanted-separator .dots-extension {
        top: -40px; /* Reduce the top extension on tablets */
        height: 120px; /* Reduce overall height */
    }
}

@media (max-width: 576px) {
    .slanted-separator .dots-extension {
        top: -30px; /* Minimize top extension on mobile */
        height: 90px; /* Minimize overall height */
    }
}

/* Add static dot pattern matching the Brand Partners section */
.slanted-separator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Cover the entire separator with the dot pattern */
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: center center;
    background-repeat: repeat;
    opacity: 0.8;
    pointer-events: none;
    z-index: 2;
}