/* scroll-indicator.css */
.hero-section {
    position: relative;
}

.scroll-indicator {
    position: absolute;
    bottom: 20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    width: 5vw; /* Adjust width to fit the V shape */
    height: 4vh; /* Adjust height to fit the V shape */
    background: transparent; /* Make background transparent */
    border: none; /* Remove default button border */
    cursor: pointer; /* Change cursor to pointer */
    padding: 0; /* Remove default padding */
    display: flex; /* Align child elements */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.scroll-icon {
    position: absolute;
    width: 5vw; /* Width of the lines */
    height: 5px; /* Thickness of the lines */
    background: #f7f2f7; /* White color */
    transition: all .3s;
    transform-origin: bottom; /* Anchor the rotation at the bottom */
}

/* First line (right side) */
.scroll-icon:nth-child(1) {
    transform: rotate(30deg);
    bottom: 0;
    right: 50%; /* Adjust as needed */
    transform-origin: bottom right; /* Adjust rotation origin */
}

/* Second line (left side) */
.scroll-icon:nth-child(2) {
    transform: rotate(-30deg); /* Adjust rotation angle to avoid negative degrees */
    bottom: 0;
    left: 50%; /* Adjust as needed */
    transform-origin: bottom left; /* Adjust rotation origin */
}

.scroll-indicator:hover .scroll-icon {
    background: #e5dce6; /* Darker white shade on hover */
}