/* Hero section styles */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    background: linear-gradient(135deg, var(--background-light-color) 0%, white 100%);

    position: relative;

    overflow: hidden;

}



.hero::before {

    /*content: '';*/

    position: absolute;

    top: 5%;

    right: 0;

    width: 50%;

    height: 100%;

    /*background: url('https://images.unsplash.com/photo-1557426272-fc759fdf7a8d?auto=format&fit=crop&w=800&q=80') center/cover;*/

    /*background: url('../../assets/refer.svg') center/cover;*/

    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);

    opacity: 0.2; /* Original is 0.1 *Modified* */

}

.background-video {

    position: relative;

    width: 100%;

    height: 100vh;

    overflow: hidden;

}



.background-video video {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.hero .container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 4rem;

    align-items: center;

}



.hero-content {

    position: relative;

    z-index: 1;

}



.hero h1 {

    font-size: 3.5rem;

    line-height: 1.2;

    margin-bottom: 1.5rem;

    animation: slideInLeft 1s ease;

}



.hero p {

    font-size: 1.25rem;

    color: var(--text-light-color);

    margin-bottom: 2rem;

    animation: slideInLeft 1s ease 0.2s backwards;

}



.hero-image {

    position: relative;

    animation: floatAnimation 6s ease-in-out infinite;

}



.hero-image img {

    width: 100%;

    border-radius: var(--border-radius);

    box-shadow: var(--shadow-lg);

}



@keyframes floatAnimation {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-20px); }

}





@media (max-width: 768px) {

    .hero {

        margin-top: 3rem;

        display: flex; /* Change to flexbox for simpler centering */

        flex-direction: column;

        justify-content: flex-start; /* Align the content to the top */

        align-items: center;

        text-align: center;

        padding: 20px; /* Add some padding for spacing */

        position: relative; /* Ensure positioning for ::before */

    }



    .hero::before {

        content: '';

        position: absolute;

        top: 40%;

        left: 0;

        width: 100%;

        height: 70%;

        /*background: url('../../assets/refer.svg') center/cover;*/

        opacity: 0.2; /* Keep the opacity low */

        z-index: 0; /* Places it behind the content */

    }



    .hero .container {

        display: flex; /* Override grid layout */

        flex-direction: column;

        align-items: center;

        gap: 1.5rem; /* Adjust spacing between elements */

        position: relative; /* Ensures content stays above ::before */

        z-index: 1;

        margin-top:2.5rem;

    }



    .hero-content {

        width: 100%; /* Ensure the content spans the screen */

        max-width: 500px; /* Optional: Limit max width for better readability */

        position: relative; /* Keep content above background */

        z-index: 1;

        margin-top: 20px; /* Add some margin at the top if needed */

    }



    .hero h1 {

        font-size: 2rem; /* Adjust text size for mobile */

        line-height: 1.4;

    }



    .hero p {

        font-size: 1rem;

        line-height: 1.6;

    }



    .cta-button {

        font-size: 1rem;

        padding: 12px 24px;

    }



    .hero-image {

        display: none; /* Hide separate image element since background handles it */

    }

}