/* ------------------------ IMGS ------------------------ */

.box-images {
    background: #F0F4F7;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2%;
    border-radius: var(--border-radius);
    padding: 16px;
}

.img-fintoda-1, .img-fintoda-2, .img-fintoda-3, .img-fintoda-4,
.img-drake-1, .img-drake-2, .img-drake-3,
.img-blimb {
    width: 100%;
    height: 60vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* ------------------------ IMGS-PROJECTS ------------------------ */

.img-drake-1 {
    background-image: url("../img/projects/fish-drakewars/sitemap.png");
}

.color-drake-2 {
    background-color: #D3E5FF;
}

.img-drake-2 {
    background-image: url("../img/projects/fish-drakewars/dragon-profile.png");
}

.color-drake-3 {
    background-color: #D3E5FF;
    padding: 16px 4vw;;
}

.img-drake-3 {
    background-image: url("../img/projects/fish-drakewars/talismans.png");
    height: 30vh;
    min-height: 436px;
}



.color-fintoda-2 {
    background-color: #D3E5FF;
}

.img-fintoda-1 {
    background-image: url("../img/projects/fish-fintoda/1-wallet.png");
    margin-top: 16px;
}

.img-fintoda-2 {
    background-image: url("../img/projects/fish-fintoda/2-labels.png");
}

.img-fintoda-3 {
    background-image: url("../img/projects/fish-fintoda/3-send.png");
    margin-top: 16px;
}

.img-fintoda-4 {
    background-image: url("../img/projects/fish-fintoda/4-details.png");
}



.img-blimb {
    background-image: url("../img/projects/blimb/screen-blimb.png");
}


/* ------------------------ MONSTERPLAY ------------------------ */

.monsterplay img  {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 40px;
    border-radius: 8px;
}

.dhyana img  {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 16px;
    border-radius: 8px;
}

.workers-dashboard img  {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 40px;
    border-radius: 8px;
}

.workers-dashboard-old .img-container img  {
    width: 100%;
    max-width: 1024px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 8px;
    margin: 0 auto;
    display: block;
}

.workers-dashboard-old .img-container  {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 40px;
    border-radius: 8px;
    background-color: #2C2C2C;
    padding: 0;
}

.yami img  {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 40px;
    border-radius: 8px;
}

.yami .img-container  {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 40px;
    border-radius: 8px;
    padding: 0;
}

.yami .img-container img {
    width: 100%;
    max-width: 329px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    margin: 64px auto 0 auto;
    display: block;
}

.route4me img  {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 24px;
    margin-bottom: 40px;
}

.route4me .route4me-img-main {
    width: 2004px;
    height: 1123px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../img/projects/route4me/r4m-img-1.png");
}

.cardiomo img  {
    width: 100%;
    max-width: 360px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 24px;
    margin-bottom: 40px;
}

.glhf img {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 16px;
    margin-bottom: 40px;
}

.box--stack {
    width: 100%;
    max-width: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    position: relative;
}

.overlay {
    margin-left: -100%;
    opacity: .0;
    z-index: 999;
    animation: fadeInOut 5s infinite;
}

.blimb img {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    margin-bottom: 40px;
    display: block;
    border-radius: 8px;
}

.drakewars img {
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    margin-bottom: 40px;
    display: block;
    border-radius: 8px;
}

.blimb .w360  {
    max-width: 400px;
}

.blimb .border {
    border: 1px solid #D3E7EB;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    75% {
        opacity: 100;
    }
    100% {
        opacity: 0;
    }
}

.youtube {
    width:100%;
    height: 70vh;
    border-radius: 8px;
}

iframe {
    border-radius: 8px;
}

#background-video {
    width: 375px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    margin: 16px auto;
    border-radius: 8px;
}