.cto-geometric-bg {
    background-image: url('../../../assets/geometric-bg.webp');
    background-position: 75vh -2vh;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    height: 588px;
    width: 100%;
    transition: 0.5s;
}

.cto-mini-bio {
    height: 96px;
    width: 100%;
    object-fit: contain;
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    background-repeat: no-repeat;
    background-image: url('../../../assets/cto-avatar.webp');
    margin-top: 3vh;
    z-index: 999 !important;
}

.cto-info {
    margin-left: 7em;
    transition: 0.5s;
}

.cto-translucent {
    background-color: #020e10ac;
    border-radius: 15px;
    transition: 0.5s;
}

@media screen and (width >0px) and (width <=600px) {
    .cto-container {
        background-position: 100px 50px;
        background-size: cover;
        background-repeat: no-repeat;
        background-origin: content-box;
        transition: 0.5s;
        justify-content: center;
        max-width: 80%;
    }

    .cto-bp {
        padding-right: 0%;
        transition: 0.5s;
    }

    .shadowdrop {
        border-radius: 72.5px;
        box-shadow: 4px 4px #00000040;
        transition: 0.5s;
        justify-content: center;
    }

    .cto-shadow {
        align-items: flex-start;
        display: flex;
        vertical-align: center;
        padding-left: 15%;
    }
}

@media screen and (width >=601px) {
    .cto-container {
        background-position: 100px 50px;
        background-size: cover;
        background-repeat: no-repeat;
        background-origin: content-box;
        transition: 0.5s;
        width: 100%;
    }

    .cto-bp {
        padding-right: 0%;
        transition: 0.5s;
    }

    .cto-shadow {
        align-items: flex-start;
        display: flex;
        vertical-align: center;
        padding-inline: 12%;
    }
}