.brxe-horizontal-scroll {
    position: relative;
    min-height: 100vh; /* Changed back to 100vh - section should be viewport height */
}

.brxe-horizontal-scroll-container {
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    flex: 1;
    align-items: center;
}

.brxe-horizontal-scroll-block {
    max-width: 435px;
}

.brxe-horizontal-scroll-number {
    color: var(--Colors-Blue-300);
    border-top: 1px solid var(--Colors-Blue-300);
    border-left: 1px solid var(--Colors-Blue-300);
    padding-top: 4px !important;
    padding-left: 7px !important;
    margin-bottom: 85px;
}

.brxe-horizontal-scroll-text {
    margin-top: 16px;
}

.brxe-horizontal-scroll-svgs {
    .circles-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        pointer-events: none;
        z-index: 5;
        overflow: hidden;
    }

    .circle {
        position: absolute;
        border-radius: 50%;
        will-change: transform, opacity;
    }

    /* Large frosted glass - crisp edge highlights */
    .circle.glass-large {
        background: transparent;
        border: none;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 5;
        box-shadow:
            /* Crisp white highlight top-left */
            inset 0.75px 0.75px 0 rgba(255, 255, 255, 0.9),
            /* Crisp white highlight bottom-right */
            inset -0.75px -0.75px 0 rgba(255, 255, 255, 0.5);
    }

    /* Medium frosted - crisp edge highlights */
    .circle.glass-medium {
        background: transparent;
        border: none;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 10;
        box-shadow:
            /* Crisp white highlight top-left */
            inset 0.75px 0.75px 0 rgba(255, 255, 255, 0.85),
            /* Crisp white highlight bottom-right */
            inset -0.75px -0.75px 0 rgba(255, 255, 255, 0.45);
    }

    /* Small frosted - crisp edge highlights */
    .circle.glass-small {
        background: transparent;
        border: none;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        z-index: 8;
        box-shadow:
            /* Crisp white highlight top-left */
            inset 0.75px 0.75px 0 rgba(255, 255, 255, 0.8),
            /* Crisp white highlight bottom-right */
            inset -0.75px -0.75px 0 rgba(255, 255, 255, 0.4);
    }

    /* Outline only - thin stroke */
    .circle.outline {
        background: transparent;
        border: 0.5px solid #000000;
        z-index: 1;
    }

    /* Outline thicker */
    .circle.outline-thick {
        background: transparent;
        border: 0.5px solid #000000;
        z-index: 1;
    }

    /* Outline in front of glass */
    .circle.outline-front {
        background: transparent;
        border: 0.5px solid #000000;
        z-index: 11;
    }

    /* Small solid dots - accent blue */
    .circle.dot-solid {
        background: #2563eb;
        border: none;
        z-index: 2;
    }

    /* Blue dot in front of glass */
    .circle.dot-solid.front {
        z-index: 100;
    }

    /* SVG dashed circle container */
    .svg-circle {
        position: absolute;
        will-change: transform, opacity;
    }

    .svg-circle svg {
        width: 100%;
        height: 100%;
    }

    /* Vertical connecting line - using SVG for dash control */
    .connecting-line {
        position: fixed;
        left: 50%;
        top: 0;
        width: 20px;
        height: 100vh;
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 7;
        opacity: 0;
        transition: opacity 0.5s ease-out;
    }

    .connecting-line svg {
        width: 100%;
        height: 100%;
    }

    /* Arrow shape - 60% smaller than original */
    .arrow-shape {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        width: 86px;
        height: 59px;
        pointer-events: none;
        z-index: 50;
        opacity: 0;
    }

    .arrow-shape svg {
        width: 100%;
        height: 100%;
    }

    /* Scroll indicator */
    .scroll-hint {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        z-index: 20;
        animation: fadeOut 1s ease-out 3s forwards;
    }

    .scroll-hint span {
        color: #000000;
        font-size: 0.7rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }

    .scroll-hint .arrow {
        width: 16px;
        height: 16px;
        border-right: 0.75px solid #000000;
        border-bottom: 0.75px solid #000000;
        transform: rotate(45deg);
        animation: bounce 2s infinite;
    }
}

@media (max-width: 767px) {
	
	.brxe-horizontal-scroll-number{
		margin-bottom: 30px;
	}
	
    .brxe-horizontal-scroll {
        min-height: 100vh; /* Full viewport height on mobile */
        overflow: hidden; /* Prevent elements from escaping */
    }
    
    .brxe-horizontal-scroll-container {
        position: absolute;
        top: 20vh; /* Below header (20vh) */
        left: 0;
        right: 0;
        height: 40vh; /* Text area is 40vh */
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0; /* No gap - texts overlap in same position */
        z-index: 10; /* Above animation */
    }
    
    .brxe-horizontal-scroll-block {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0 20px;
        max-width: none;
    }
    
    /* Animation container positioned in bottom 40vh */
    .brxe-horizontal-scroll-svgs {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40vh; /* Animation takes bottom 40vh */
        pointer-events: none;
        overflow: visible; /* Clip elements to this area */
        z-index: 1; /* Below text */
    }
    
    .brxe-horizontal-scroll-svgs .circles-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Full height of animation area */
        pointer-events: none;
        z-index: 5;
        overflow: visible; /* Allow circles to be visible during animation */
    }
    
    .brxe-horizontal-scroll-svgs .arrow-shape {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 50;
    }
    
    /* Make circles properly visible on mobile */
    .brxe-horizontal-scroll-svgs .circle {
        position: absolute;
    }
    
    /* Hide connecting line on mobile */
/*
    .brxe-horizontal-scroll-svgs .connecting-line {
        display: none;
    }
*/
    
    /* Ensure glass circles are visible on light backgrounds */
    .brxe-horizontal-scroll-svgs .circle.glass-large,
    .brxe-horizontal-scroll-svgs .circle.glass-medium,
    .brxe-horizontal-scroll-svgs .circle.glass-small {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

@media (min-width: 768px) {
    .brxe-horizontal-scroll-svgs .circles-container {
        margin: -7.5px;
    }
}

@keyframes bounce {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(5px); }
}

@keyframes fadeOut {
    to { opacity: 0; }
}