html{
    height: 100vh;
    overflow-y: hidden; 
}

body{    
    margin: 0px; 
    perspective: 50px;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #1C2D40;
}

main{
    transform-style: preserve-3d;
}

    /*!TEXTS AND FONTS*/

h1{
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 5rem;
    line-height: 1.1;
    opacity: 0;
    animation: opacity-animation;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: 1s;      
}

.span{
    color:#14E9D6;
}

h1::before{
    content: '';    
    display: block;
    position: absolute;
    width: 200px;
    height: 3px;
    background-color: #14E9D6;
    transform: translateY(-20px);
    
}

H2{
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 1.5rem;
    color:#1C2D40;  
}

H3{
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 1.5rem;
    color:#1C2D40;
}

h4{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.1rem;
    color:#14E9D6;
    margin:0px;
}

p{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.1rem;
    color:#1C2D40;
    text-align: left;
    opacity: 0;
    animation: opacity-animation;
    animation-duration: 4s;    
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.social-proof-horizontal p{
    font-style: italic; 
}

li{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: 1.1rem;
    margin-right: 40px;
}


.international-container h2,
.international-container p{
    color: white;
    text-align: center;
}
.text-box{
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.8rem;
}


/*!BUTTON STYLES*/

.button-text{
    font-size: 1.7rem;
    font-weight: 800;
}

.button{
    background-color:#14E9D6;
    width: 170px;
    margin-top: 50px;
    text-align: center; 
    border-radius: 20px;
    box-shadow: var(--shadowbox);       
    transition: transform 0.5s ease;
    opacity: 0;
    animation: opacity-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 3s;  
}

.button:hover, .button-cv:hover, .button-social-proof:hover{
    /*background-color: #1C2D40;*/
    transform:scale(1.1) ;    
}

.button-cv{
    background-color:#14E9D6;
    width: 250px;
    margin-top: 50px;
    text-align: center; 
    border-radius: 20px;
    transition: transform 0.5s ease;     
}

.button-social-proof{
    background-color:#1C2D40;
    width: 240px;    
    text-align: center; 
    border-radius: 20px;
    transition: transform 0.5s ease;
    align-self: bottom; 
    margin: 80px;
}

/*!NAVIGATION BAR STYLES*/

.navigation img{
    width: 20vw;
    max-width: 100px;
    }

.navigation{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;    
    align-items: center;
}

li{
    list-style: none;
}

a{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
    text-decoration: none;
    margin: 20px;
    color: white; 
}

.menu a:hover{
    color: #14E9D6 ;
    text-decoration: underline;
}

/*!HERO STYLES*/

header{      
    min-height: 90dvh;
    padding: 40px 100px;
    position: relative;
    transform-style: preserve-3d;
    
    }

.hero{
    display: grid;
    grid-template-columns: 60% 40%;
    color: white;
    margin: 150px 80px;
}

.hero-text p{
    color: white;
}

.hero-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: 0.8;
    transform: translateZ(-50px) scale(2);       
}

/*!ABOUT SECTION*/

.about-top-sentence{
    background-color: white;
    position: absolute;
    bottom: 94%;
    left: 32%;
    max-width: 70vh;
    width: auto;
    border-radius: 20px;
    text-align: center;
    padding: 0px 40px;
    box-shadow: var(--shadowbox);
    transform: scale(0);    
    animation-name:scale-animation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-delay: 3.5s;     
}

#about{
    display: grid;
    grid-template-columns:60% 40%;
    background-color: white; 
    height: auto;    
    align-items: center;
    position: relative;
    align-items: end;       
    }

.about-texts{
    display: grid;
    grid-template-columns:50% 50%;
    margin: 150px;
    gap: 30px; 
    align-self: center;  
}

.about-horizontal::before{
    content: '';    
    display: block;
    position: absolute;
    width: 200px;
    height: 3px;
    background-color: #14E9D6;
    transform: translateY(-20px) translateX(0px);
    
}

.about-horizontal{    
    grid-column: span 2;
    transform: scale(0);
    opacity: 0;
    animation-name:scale-animation;
    animation-timeline: view();
    animation-range-start: 200px;
    animation-range-end: 600px;
    animation-fill-mode: forwards;       
}

.about-vertical{ 
    transform: scale(0);
    opacity: 0;
    animation-name:scale-animation;
    animation-timeline: view();
    animation-range-start: 200px;
    animation-range-end: 600px;
    animation-fill-mode: forwards;   
}

.about-image{
    justify-content: center;
    align-items: center;
    justify-self: center; 
}


.about-image img{
    width: 100%;
    max-width: 40vh;
    position: relative;
    top: 6px;    
    transition: transform 0.5s ease;
}

.about-image img:hover{
    transform: scale(1.05);
}

/*!PORTFOLIO SECTION*/ 

.portfolio-top-title{
    background-color: white;
    position: absolute;
    bottom: 92%;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    text-align: center;
    align-content: center;
    box-shadow: var(--shadowbox);
    transform: rotateZ(0deg);
    animation-name: rotation-animation;
    animation-timeline: view();
    animation-range-start: 350px;
    animation-range-end: 700px;
    animation-fill-mode: forwards;
    
}

@keyframes rotation-animation{
    to{transform: rotateZ(360deg);}
}

#portfolio{
    height: auto;
    padding: 70px;    
    position: relative;
    display: flex;
    flex-wrap: wrap;   
    text-align: center;
    justify-content: center;
    background: linear-gradient(to bottom,black,rgb(76, 76, 76));
    background-attachment: fixed;   
}

#video{
    width: 90%;
    height: auto;
    max-width: 100vw;
    margin: 70px 0px;
    border-radius: 20px;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.7);  
}

.portfolio-bottom-sentence{
    background-color: white;
    width: 50vw;
    max-width: 100vw;
    border-radius: 20px;
    box-shadow: -10px -10px 30px rgba(0, 0, 0, 0.3);    
}

/*!GALLERY IMAGES*/

#pictures{
    transform-style: preserve-3d;
    z-index: -1;
}

.parallax{
    width: 100vw;
    height: 390vh;    
    display: flex;
    position: relative;    
    justify-content: center;
    align-items: center;
    z-index: -1;
    transform-style: preserve-3d;
        
        .image-parallax-combined-front{            
            width: 100vw;
            position: absolute;
            transform: translate3d(0px,-1800px,-25px)scale(1.5);      
        }
        
        .image-parallax-combined-back{
            width: 100vw; 
            position: absolute;
            transform: translate3d(0px,-1950px,-50px) scale(2.1) rotatez(5deg);
            
        } 

        .image-parallax-combined-logo{          
            position: absolute;           
            transform: translate3d(-550px,-1550px,0px);
            max-width: 40%;
        }

        .image-parallax-mondelez-back{
            width: 100vw;
            position: absolute;             
            transform: translate3d(0px,30px,-50px) scale(2.11) rotatez(5deg);
        }

        .image-parallax-mondelez-front{            
            width: 100vw;
            position: absolute;            
            transform: translate3d(0px,-150px,-25px) scale(1.5);      
        }

        .image-parallax-mondelez-logo{          
            position: absolute;           
            transform: translate3d(-600px,0px,0px);
            max-width: 30%;
        }

        .image-parallax-parallel-back{
            width: 100vw;
            position: absolute;             
            transform: translate3d(0px,1800px,-50px) scale(2.11) rotatez(5deg);
        }

        .image-parallax-parallel-front{            
            width: 100vw;
            position: absolute;            
            transform: translate3d(0px,1800px,-25px) scale(2);      
        }

        .image-parallax-parallel-logo{          
            position: absolute;           
            transform: translate3d(-600px,1700px,0px);
            max-width: 30%;
        }
        
}

.gallery-mobile{
    display: none;
    flex-wrap: wrap;
    .gallery-mobile-image{        
        width: 100%;
    }
}

/*@keyframes blackwhite-animation{
    to{filter: grayscale(0%); scale: 1;}
}*/

/*!SOCIAL PROOF SECTION*/

.social-proof-triangle{
    
    bottom: 40%;
    left: 80%;
    position: absolute;
    transform: rotateX(180deg); 
}
.triangulo {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #1C2D40;
}

#social-proof h2{
    color: #14E9D6;
    transform: rotateX(180deg);
    margin: 0px;
    position: absolute;
    top: 100px;
    right: 60px;
    text-align: center;
}

#social-proof::before{
    content: '';
    width: 3000px;
    height: 650px;
    background-color: #14E9D6;
    position: absolute;
    rotate: 5deg;
    bottom: -110px;
    right: -50px;
    z-index: -1;    
}     

#social-proof{
    display: grid;
    grid-template-columns:70% 30%;
    /*background-color: white;*/ 
    /* position: relative;*/ 
    height: 43vh;
    align-items: center;
    position: relative;
}     

.social-proof-text{
    display: grid;
    grid-template-columns:50% 50%;
    margin-left: 80px;
    gap: 30px;    
}

.social-proof-horizontal{    
    grid-column: span 2;
    transform: scale(0);
    opacity: 0;
    animation-name:scale-animation;
    animation-timeline: view();
    animation-range-start: 100px;
    animation-range-end: 300px;
    animation-fill-mode: forwards;
    }

.plataformlogos-container img{
    width: 100%;
    height: auto;
    padding-top: 45px;
    transform: scale(0);
    opacity: 0;
    animation-name:scale-animation;
    animation-timeline: view();
    animation-range-start: 200px;
    animation-range-end: 400px;
    animation-fill-mode: forwards;         
}

/*! INTERSECTION LINES*/

.line{
    background-color: #14E9D6;
    width: 100%;
    height: 5px;
}

/*! INTERNATIONAL SECTION*/


#international{
    width: 100vw;
    background-color: #1C2D40;
} 

.international-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-top: 100px;    
} 

.international-container h2::before{
    content: '';    
    display: block;
    position: absolute;
    width: 1003px;
    height: 3px;
    background-color: #14E9D6;
    transform: translateY(50px) translateX(50px);
}

.international-container p{
    padding: 0px 300px;
    text-align: left;
}


.international-image-container{
    width: 100vw;
    height: 35vh;    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    transform-style: preserve-3d;
    opacity: 0;
    animation-name:scale-animation;
    animation-timeline: view();
    animation-range-start: 100px;
    animation-range-end: 300px;
    animation-fill-mode: forwards;
}

.berlin-background,.berlin-front{
    max-height: 30vh;
    position: absolute;
    transition: transform 1s ease;
}

.berlin-front:hover{
    transform:rotateX(-5deg) scale(1.05);
} 

/*!FOOTER SECTION*/

#footer{
  
    position: relative;
    
    padding: 80px 400px;
    background: linear-gradient(to bottom,#1C2D40 30%,#14E9D6);
    z-index: 1;
}

.footer-container{
    display: flex;
    justify-content: space-between;    
    width: 100%;
    
}

.list-element{
    padding: 0px;
    opacity: 0;
    animation-name:opacity-animation;
    animation-timeline: view();
    animation-range-start: 50px;
    animation-range-end: 150px;
    animation-fill-mode: forwards;
}

.list-element a{
    padding: 0px;
    margin: 0px;
    text-decoration: underline;
    font-size: 1.1rem;      
}

.list-element a:hover{
    color: #14E9D6;
}

/*! Animation*/

@keyframes opacity-animation{
    to{opacity: 1;}
}

@keyframes scale-animation{
    to{transform: scale(1); opacity: 1;}
}

/*!Responsive 1537px*/

@media (width<1537px){
    h1{
        font-size: 3.5rem;
        line-height: 1.1;
    }

    .hero{
        display: grid;
        grid-template-columns: 70% 30%;
        color: white;
        margin: 30px 50px;
    }
    
    .text-box{
        
        font-size: 1.4rem;
    }

    .about-top-sentence{
        bottom: 97%;
        left: 27%;
    }

    #about{
        display: grid;
        grid-template-columns:60% 40%;
        background-color: white; 
        height: auto;    
        align-items: center;
        position: relative;
        align-items: end;       
    }

    .about-texts{
        display: block;
        margin: 70px 100px;
    }

    .about-horizontal{
        animation-range-start: 50px;
        animation-range-end: 200px
    }
    
    .about-vertical{
        animation-range-start: 50px;
        animation-range-end: 200px;
    }

    .about-image img{
        max-width: 60vh;
    }

    .portfolio-top-title{
        bottom: 89%;
        animation-range-start: 150px;
        animation-range-end: 600px;
    }

    .parallax{
        width: 100vw;
        height: 370vh;    
        display: flex;
        position: relative;    
        justify-content: center;
        align-items: center;
        z-index: -1;
        transform-style: preserve-3d;
            
            .image-parallax-combined-front{
                transform: translate3d(0px,-1050px,-25px)scale(1.5);      
            }
            
            .image-parallax-combined-back{
                transform: translate3d(0px,-1350px,-50px) scale(2.1) rotatez(5deg);
            } 
    
            .image-parallax-combined-logo{
                transform: translate3d(-350px,-1000px,0px);
                
            }
    
            .image-parallax-mondelez-back{
                transform: translate3d(0px,100px,-50px) scale(2.11) rotatez(5deg);
            }
    
            .image-parallax-mondelez-front{
                transform: translate3d(0px,-150px,-25px) scale(1.5);      
            }
    
            .image-parallax-mondelez-logo{
                transform: translate3d(-350px,-150px,0px);
            }
    
            .image-parallax-parallel-back{
                transform: translate3d(0px,1200px,-50px) scale(2.11) rotatez(5deg);
            }
    
            .image-parallax-parallel-front{
                transform: translate3d(0px,1000px,-25px) scale(2);      
            }
    
            .image-parallax-parallel-logo{
                transform: translate3d(-350px,850px,0px);
            }
    }

    #social-proof{
        display: grid;
        grid-template-columns:70% 30%;
        height: 60vh;
        align-items: center;
        position: relative;
    }

    #social-proof h2{
        right: 60px;
    }

    .button-social-proof{
        margin: 60px;
    }

    .plataformlogos-container img{
        animation-range-start: 50px;
        animation-range-end: 200px;
    }

    .international-container h2::before{
        
        transform: translateY(50px) translateX(50px);
    }

    .international-container p{
        padding: 0px 150px;
        text-align: left;
    }

    #footer{
        padding: 80px 200px;
    }
}

/*!Responsive 1025px*/

@media (width<1025px){
    
    .navigation{
        display: flex;
        flex-direction: column;        
        justify-content: center;    
        align-items: center;
        height: auto;
        padding: 20px;
    }

    .menu,li{
        display: grid;        
        height: auto;
        text-align: center;
        margin: 20px 0px;
    }

    .menu-link{        
        margin: 0px;
    }  
    
    h1{ 
        font-size: 2.5rem;
        text-align: left;        
    }

    .hero-text p{
        text-align: left; 
    }

    header{
        padding: 0px;
        min-height: 50dvh;
    }
    
    .hero{
        display: block;
        margin: 100px 50px;       
    }

    .hero-video{
        
        scale: 2.7;
        left: 250px;
        transform: translateX(-200px) translateY(100px);
    }

    #about{
        display: block;
        padding-top: 20px;
        height: auto;        
    }

    .about-top-sentence{
        display: none;
        
    }
    .about-texts{
        display: block;
        margin: 60px;        
    }

    .about-horizontal{
        text-align: left;
    }

    .about-horizontal,p{
        text-align: left;
    }

    .about-vertical{
        text-align: left;
    }

    .about-vertical,p{
        text-align: left;
    }
    
    .about-image img{
        width: 60%;        
        display: block;
        margin-left: auto;
        margin-right: auto;     
    }
    
    #portfolio{
        padding: 20px;
    }
    
    .portfolio-top-title{
        position: relative;
        height: 30px;
        width: 150px;
        border-radius: 20px;
        color: white;
        bottom: -30px;
        left: 0px;
        animation-name: none;
    }

    .portfolio-top-title h2{
        position: absolute;
        bottom: -24px;
        left: 26px;
        font-size: 1.5rem;        
    }
    
    .portfolio-bottom-sentence{
        display: none;
    }

    .parallax{
        display: none;
    }

    .gallery-mobile{
        display: flex;
        flex-wrap: wrap;  
    }

    #social-proof{
        display: block;
        height: auto;        
    }

    #social-proof::before{        
        bottom: 130px;
    }     

    .social-proof-text{
        display: block;
        margin: 0px;
        padding: 50px;          
    }   

    .social-proof-triangle{
        display: none;
    }

    .button-social-proof{
        margin: 40px auto;
    }
    
    .international-container{
        display: block;
        margin: 0px;
        padding: 50px;     
    }

    .international-container p{
        padding: 0px 10px;
        text-align: left;
    }

    .international-image-container{
        
        opacity: 1;
    }

    .international-container h2::before{
        display: none;
    }

    #footer{
        height: 90vh;
        padding: 40px; 
    }

    .footer-container{
        display: block;
        text-align: center;            
    }

    .list-element,li{
        margin: 5px;
    }
}