.firstbox {
    height: 80%;

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

.box1 {
    position: relative;
    width: 95%;
    height: 95%;

    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.firstbg {

    height: 100%;

}

.firstbg img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    filter: brightness(70%);


}

.firstbgdetails {
    margin-left: 40px;
    position: absolute;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.boxh1 {
    width: 70%;
    height: 13%;

    display: flex;

}

.boxh1 h1 {
    color: white;
    font-size: 50px;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;

}

.boxhp {
    width: 70%;
    height: 20%;


}

.boxhp p {
    color: rgb(145, 143, 143);
    width: 72%;
    margin: 0;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 300;
}

.boxbutton {
    width: 60%;
    height: 15%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.buttonbuy {

    width: 25%;
    height: 60%;
    background-color: rgb(36, 130, 93);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.buttonbuy:hover {
    background-color: rgb(65, 63, 66);
}

.buttonbuy p {
    margin: 0;
    color: white;
    transition: color 0.5s ease;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 13px;

}

.buttonbuy:hover p {
    margin: 0;
    color: rgb(50, 195, 115);

}

.buttonlearn {
    width: 25%;
    height: 60%;
    background-color: rgb(65, 63, 66);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.5s ease;
}

.buttonlearn p {
    margin: 0;
    transition: color 0.5s ease;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 13px;

}

.buttonlearn:hover p {
    margin: 0;
    color: rgb(50, 195, 115);

}

.boxarrow {
    width: 100%;
    height: 5%;

}