#interests-and-contact{
    scroll-snap-align: start; /*because the container has 130vh, when scroll it should be aligned with the top not with the end*/
    height: 130vh;
}

#interests{
    /* scroll-snap-align: end; */
    height: 70vh;
}

.interests-title-container {
    margin-left: 10vw;
    margin-top: 15vh;
}
.interests-title {
    /* position: absolute;
    margin-left: 10vw;
    margin-top: 15vh; */
    font-size: 40px;
    color: rgba(0,0,0,0.3);
    width: 100%;
    background-color: rgba(0,0,0,0.04);
    /* border-bottom: rgba(0,0,0,0.2) solid;*/
}

.interests-row {
    display: flex;
    justify-content: center;
    gap: 100px;
    position: absolute;
    /* top: calc(50% - 65px);*/ /*center the element in the parent div: 50% of the parent div - 65px because the children are aprox 130px height (image+text) */
    width: 100%;
    bottom: 20%;
}


.interests-image {
    /* flex:1; divide the row width equally for each children */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;/*contains the whole image*/
    width:100px;
    height:100px;
    border-style: solid;
    border-color: rgba(80,222,208,0.8);
    border-width: 3px;
    border-radius: 50%;
    background-color: rgba(80, 222, 208,0.1);/*To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.*/
    margin: auto; /*to center the images*/
}

.interests-text {
    text-align: center;
    padding-top: 15px;
    font-size: 18px;

}

/*contact styles-----------------------*/

#contact {
    /* background-color: #26282f; */
    scroll-snap-align: end;
    height: 60vh;
}

.contact-content {
    margin-left: 10vw;
    margin-right: 10vw;
    padding-top: 3vh;
    color:rgb(202, 205, 212);
}

.contact-text {
    font-size: 25px;
    font-family: "Mukta";
    color: rgba(0,0,0,0.5);

}

.contact-email-content {
    padding-top: 100px;
    display: flex;
    gap: 25px;
}

.contact-linkedin-icon {
    background-image: url("../img/icons/linkedin-256x256px.svg");
    background-repeat: no-repeat;
    background-size: contain; /*it scales to cover the area*/
    width: 35px;
    height: 35px;
    background-position: center;
}

.contact-email {
    margin-top: auto; /*to center the text vertically in the div*/
    margin-bottom: auto; /*to center the text vertically in the div*/
    /* padding-top: 7px; */
    font-size: 25px;
    font-family: 'Mukta';
    color: rgba(0,0,0,0.5);
}