@font-face {
    font-family: 'PoppinsXBold'; /* Custom font name */
    src: url('../fonts/Poppins/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'PoppinsLight';
    src: url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@keyframes fadeInFromRight {
    from {
        opacity: 0.4;
        transform: translateX(20px); /* Optional: slide-in effect */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fadeInFromLeft {
    from {
        opacity: 0.4;
        transform: translateX(-20px); /* Optional: slide-in effect */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
.from-right {
    opacity: 0.4; /* Start hidden */
    animation: fadeInFromRight 1s ease-in forwards;
}
.from-left {
    opacity: 0.4; /* Start hidden */
    animation: fadeInFromLeft 1s ease-in forwards;
}
.large-text {
    font-family: 'PoppinsXBold', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 4vw;
    text-wrap: wrap;
}
.someworkmates {
    display: grid;
    place-items: center;
}

@media (max-width: 768px) {
    .column-reverse {
        flex-direction: column-reverse;
    }
}
.flex-right {
    flex:1;
}
.flex-left {
    flex:1;
}
.float-container {
    overflow: hidden;
    display: grid;
    place-items: center;
    max-height: 80vh;
}
.picture-div {
    max-width: 50vh;
    max-height: 50vh;
}
@media (max-width: 768px) {
    .float-container {
        padding: 5vw;
    }
    .picture-div {
        height: 76vw;
        width: 76vw;
    }
    .details-div {
        width: 76vw;
        max-height: 25vh;
        font-size: 2vw;
    }
    .svg-icon {
        width: 2vw;
        height: 2vw;
    }
}
@media (min-width: 768px) {
    .float-container {
        padding: 2.5vh;
    }
    .picture-div {
        height: 38vw;
        width: 38vw;
    }
    .details-div {
        width: 38vw;
        max-height: 25vh;
        font-size: 2vh;
    }
    .svg-icon {
        width: 2vh;
        height: 2vh;
    }
}

/* I could avoid some of this if I were using em all through */
/* @media (min-width:1080px){
    .max-width-1080 {
        max-width: 1080px;
    }
    .picture-div {
        height: 410px;
        width: 410px;
    }
    .details-div {
        width: 410px;
        font-size: 2em;
    }
    .float-container {
        padding: 54px; 
    }
} */
/* end of I could avoid some of this if I were using em all through */

.picture-div img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.details-div {
    text-align: center;
    font-family: 'PoppinsLight', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.details-div .main-button {
    font-weight: bold;
}