.hero{

    position: absolute;

    top:150px;

    padding: 10px 10%;

    width: 80%;
}

.hero-text p{

    font-size: 70px;

    margin-bottom: 0;
    margin-top: 0;

    color: white;
}

.hero-explore{

    display: flex;
    align-items: center;

    width: fit-content;

    gap:10px;

    color: black;

    background: white;

    padding: 0 20px;

    border-radius: 50px;

    margin-top: 30px;

    cursor: pointer;
}
.arrow{

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background: black;
    
    display: flex;
    align-items: center;
    justify-content: center;

}
.hero-explore svg{

    background: black;

    color: white;

    font-size: 15px;
}

.hero-bottom{

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.circles{

    display: flex;
    align-items: center;

    gap:20px;

    font-size: 30px;

    color: white;
}
.circle{

    color: white;
}
.active{

    color: red;
}

.play-buttons{

    display: flex;
    align-items: center;

    gap:15px
}

.video-button{

    border: 1px solid white;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    
}

.play-buttons svg{

   color: white;
    
}

.hero-play{

    font-size: 20px;

    color: white;

    cursor: pointer;
}

@media screen and (max-width: 760px){

    .hero{

        display: flex;
        flex-direction: column;

        align-items: center;
    }

    .hero-text p{

        font-size: 50px;

    }

    .hero-explore h2{

        font-size: 18px;
    }

    .hero-explore svg{

        font-size: 12px;
    }

    .arrow{

        width: 30px;
        height:  30px;
    }

    .video-button{
        width: 30px;
        height:  30px;

    }

    .video-button svg{

        font-size: 15px;
    }

    .hero-bottom{

        flex-direction: column;

     }

     .hero-play{

        margin-top: 0;
    }

    .circles{

        margin-bottom: 0;
    }

   
}

@media screen and (max-width: 560px){

    .hero-text p{

        font-size: 34px;

    }

    .hero-explore h2{

        font-size: 16px;
    }

    .hero-play p{

        font-size: 16px;
    }

    .circles{

        font-size: 25px ;

        margin-bottom: 0;
    }


}