.box1 {
    background: url(./../img/holding_cell2.webp);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #DBE2E2;
    object-fit: fill;
    position: relative;
    padding-inline-start: 20px;
    padding-block-start: 20px;
    padding-block-end: 20px;
    box-sizing: border-box;

    /* width: 100%; */
    width: 100vw;
    height: 100vh;
}
    


.box1 .logo {
    position: absolute;
    left: 0;
    top: 13%;
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 359px) {
    .box1 .logo {
        top: 5%;
    }
}

@media only screen and (min-width: 360px) and (max-width: 479px){
    .box1 .logo {
        top: 1%;
    }
}



.box1 .logo img{
    width: 100%;
    height: 100%;
}




.box1 .welcome {
    width: 100%;
    height: auto;

    position: absolute;
    left: 8%;
    bottom: 12%;

    display: flex;
    flex-direction: column;
    /* justify-content: flex-end;
    align-items: flex-end; */


    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    color: rgb(63, 0, 82);

}

.box1 .welcome p {
    margin-block-start: 0;
    margin-block-end: 0;
}

.box1 .welcome .text_normal{
    font-weight: 200;
}

.box1 .welcome .text_strong{
    font-weight: 700;
}
  
/** ihpone 11 pro max */

@media only screen and (max-width: 414px) and (max-height:896px){
    .box1, .box2{
        height: 70vh;
    }

    
}


@media only screen and (orientation: landscape){
    .box1{
        background-position: right bottom;
        background-size: contain;
    }
    
}



@media only screen and (min-width: 768px) and (max-width: 999px){
    .box1 .logo {
        top: -10%;
    }
}

@media only screen and (min-width: 1000px) and (min-height: 800px) {
   
    @keyframes moverLogo {
        from {top: -20%}
        to {top: -10%}
    }

    @keyframes moverSaludo {
        from {left: -5%;}
        to {left: 8%;}
    }    


    .box1 .logo {
        top: -100%;
        width: auto;
        height: 100vh;
        
        animation-name: moverLogo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        /* animation-direction: reverse; */
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }

    .box1 .logo img{
        width: auto;
        height: 100%;        
    }

    .box1 .welcome{
        left: -50%;
        animation-name: moverSaludo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        animation-fill-mode: forwards;

    }
}



@media only screen and (max-height: 320px) and (orientation: landscape){

    @keyframes moverLogo {
        from {top: -30%}
        to {top: -15%}
    }

    @keyframes moverSaludo {
        from {left: -10%;}
        to {left: 12%;}
    }
    
    
    .box1 .logo {
        top: -30%;
        width: auto;
        height: 100vh;
        animation-name: moverLogo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }

    .box1 .welcome {
        left: 12%;
        bottom: 3%;

        animation-name: moverSaludo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        animation-fill-mode: forwards;        
    }
}


@media only screen and (min-height:321px) and (max-height: 360px) and (orientation: landscape){

    @keyframes moverLogo {
        from {top: -30%}
        to {top: -12%}
    }

    @keyframes moverSaludo {
        from {left: -10%;}
        to {left: 12%;}
    }
    
    
    .box1 .logo {
        top: -30%;
        width: auto;
        height: 100vh;
        animation-name: moverLogo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }

    .box1 .welcome {
        left: 12%;
        bottom: 3%;

        animation-name: moverSaludo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        animation-fill-mode: forwards;        
    }
}




@media only screen and (min-height: 361px) and (max-height: 480px) and (orientation: landscape){

    @keyframes moverLogo {
        from {top: -60%}
        to {top: -5%}
    }

    @keyframes moverSaludo {
        from {left: -10%;}
        to {left: 12%;}
    }    
    
    
    .box1 .logo {
        top: -60%;
        width: auto;
        height: 100vh;
        animation-name: moverLogo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }

    .box1 .welcome {
        left: -10%;
        bottom: 3%;

        animation-name: moverSaludo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        animation-fill-mode: forwards;        
    }
}



@media only screen and (min-height: 481px) and (max-height: 768px) and (orientation: landscape){
    
    @keyframes moverLogo {
        from {top: -60%}
        to {top: -3%}
    }

    @keyframes moverSaludo {
        from {left: -10%}
        to {left: 22%;}
    }  

    .box1 .logo {
        top: -60%;
        width: auto;
        height: 100vh;
        animation-name: moverLogo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        animation-timing-function: ease;
        animation-fill-mode: forwards;
    }

    .box1 .welcome {
        left: -10%;
        bottom: 10%;
        animation-name: moverSaludo;
        animation-duration: 1.5s;    
        animation-delay:0.5s;
        animation-fill-mode: forwards;        
    }    
}