/* home page */
#hero {
    width: 100%;
}

#navbar {
    width: 100%;
    height: 80px;
    color: #ffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vw 3vw;
}

#navbar h1 {
    font-size: 1.6vw;
    opacity: 0.9;
}

#navbar h1 a {
    color: #ffff;
    text-decoration: none;
}

#navbar h1 a:hover {
    cursor: pointer;
}

#content {
    color: #ffff;
    margin-top: 4.7vw;
    padding: 2vw 3vw;
}

/* for animation */
.animationdiv {
    overflow: hidden;
}

.animationdiv h3 {
    overflow: hidden;
    font-size: 1vw;
}

#content-box1 h1 {
    opacity: 0.7;
    font-size: 8vw;
    margin-bottom: 0.1vw;
    font-weight: 200;

}

#content-box2 {
    width: fit-content;
    margin-left: 10vw;
    text-align: end;
}


#content-box2 h1 {
    opacity: 0.7;
    font-weight: 400;

    font-size: 8vw;
}

#content-box2 h5 {
    opacity: 0.7;
    font-size: 1.2vw;
}

#contentdata {
    margin-top: 2vw;
    color: #ffff;
    opacity: 0.7;
    text-align: end;
    padding-right: 3vw;
}

#herofooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3vw;
    margin-top: 4vw;
}

#herofooter a {
    color: white;
    opacity: 0.8;
    font-size: 2vmax;
    text-decoration: none;
}





.circle {
    width: fit-content;
    height: fit-content;
    font-size: 30px;
    color: white;
}

.circle i {
    /* color: black; */

    border: none;
}