@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Italiana&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&family=Poiret+One&display=swap');
:root{
    --main-color: #FFD29D;
    --full-size-padding: 4%;
    --bar-color: #111111;
    --services-div-padding:3%;
    --sliding: -1041px;
    --logo-font-size:220px;
    --logo-height:250px;
}

html{
    scroll-behavior: smooth;
}

html, body{
    overflow-x:hidden;
}

::selection{
    background-color:white;
    color:black;
}
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.Italiana{
    font-family:'Italiana';
    font-weight:300;
}
.Josefin{
    font-family:'Josefin Sans';
}

.hidden, 
.hiddenFromLeft,
.hiddenFromRight,
.hiddenFromTop{
    opacity:0;
    transition:all 0s;
    transition-delay:0s;
}

.hiddenFromTop{
    transform:translateY(-30%);
}
.hiddenFromBottom{
    transform:translateY(30%);
}
.hiddenFromLeft{
    transform:translateX(-30%);
}

.hiddenFromRight{
    transform:translateX(30%);
}
.show{
    transition:all 1s;
    opacity:1;
    transform:translateX(0) translateY(0);
}


body{
    background-color: var(--main-color);
}


.innerbody{
    max-width:1920px;
    margin:0 auto;
}
section{
    position:relative;
}



nav{
    padding: 40px var(--full-size-padding);
    display:flex;
    justify-content: space-between;
    align-items:center;
    min-height:80px;
    position:relative;
}

.nav-options{
    display:flex;
    justify-content: space-evenly;
    align-items:center;
    gap:35px;
    font-size:24px;
    font-family:'Josefin Sans', sans-serif;
    font-weight:200;
    text-transform:capitalize;
    color:white;
    z-index: 2;
   
}

.hamburger{
    display:none;
}

.navLogo,
.animLogo{
    font-family: 'Italiana';
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}
.navLogo{
    font-size:45px;
    height:60px;
    width:60px;
}
.animLogo{
    position:absolute;
    left:50%;
    top:55%;
    transform:translateX(-50%);
    font-size:140px;
    z-index: 8;
    animation:logoDissapear 0.5s forwards 4.4s;
    pointer-events: none;
}

.logoLine{
    height:100%;
    width:2px;
    background-color: black;
}
.navLogo p,
.animLogo p{
    position:relative;
    overflow: hidden;
}

.navLogo .pLetter{
    padding-bottom:20%;
    padding-right:4px;
    top:-5px
}
.navLogo .aLetter{
    padding-top:20%;
    bottom:-5px
}
.navLogo .pLetter:after{
    content:"";
    position: absolute;
    left:0;
    top:5px;
    height:100%;
    width:calc(100% - 2px);
    border-right:2px solid #111111;
}


.animLogo .pLetter{
    padding-bottom:50px;
    color:transparent;
}
.animLogo .aLetter{
    padding-top:50px;
    color:transparent;
}

.animLogo .pLetter:before{
    color:#111111;
    content:"P";
    position: absolute;
    right:-100%;
    top:0;
    padding-bottom: inherit;
    animation:pLetter 1.2s forwards 2.6s;
}
.animLogo .pLetter:after{  /*THIS IS THE LINE*/
    content:"";
    position: absolute;
    left:0;
    top:0;
    height:0;
    width:calc(100% - 3px);
    border-right:3px solid #111111;
    animation:logoLine 1s forwards 2s;
}

.animLogo .aLetter:before{
    color:#111111;
    content:"A";
    position: absolute;
    left:-100%;
    bottom:0;
    padding-top:inherit;
    animation:aLetter 1.2s forwards 3.2s;
}
@keyframes logoDissapear{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}
@keyframes logoLine{
    0%{
        height:0;
    }
    100%{
        height:100%;
    }
}

@keyframes aLetter{
    0%{
        left:-100%;
    }
    100%{
        left:0;
    }
}
@keyframes pLetter{
    0%{
        right:-100%;
    }
    100%{
        right:0;
    }
}

li{
    list-style:none;
}

li a{
    text-decoration:none;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    position:relative;
    color:black;
    font-weight:300;
    font-size:30px;
}

li a:hover{
    text-shadow:0 0 1px black;
}

li a:before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:1px;
    width:0;
    background-color:black;
    transition:all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}

li a:hover:before{
    width:100%;
}
.bar{
    display:block;
    width:25px;
    height:3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color:var(--bar-color); 
}

#header{
    transition:all 0.5s;
    overflow: hidden;
    min-height:1000px;
    text-align: center;
}


#header.scrolled{
    background-color:#111111;
}

@keyframes FadeIn{
    0%{
        opacity:0;
    }
    85%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

#header *:not(h1):not(.animLogo):not(.animLogo *):not(.nav-options){
    animation:FadeIn 6.5s;
}

@keyframes Intro{
    0%{
        opacity:0;
        top:-50px;
        content:"DESIGN.";
        font-family:sans-serif;
    }
    12.5%{
        top:0;
        opacity:1;
    }
    25%{
        top:50px;
        opacity:0;
        content:"DESIGN.";
        font-family:sans-serif;
    }
    26%{
        font-family:'Josefin Sans';
        top:-50px;
        opacity:0;
        content:"DEVELOP.";
    }
    37.5%{
        top:0;
        opacity:1;
    }
    50%{
        top:50px;
        opacity:0;
        content:"DEVELOP.";
        font-family:'Josefin Sans';
        font-weight:900;
    }
    51%{
        top:-50px;
        opacity:0;
        content:"IMPRESS.";
        font-family:'Italiana';
        font-weight:300;
    }
    67.5%{
        top:0;
        opacity:1;
    }
    75%{
        top:50px;
        opacity:0;
        content:"IMPRESS.";
        font-family:'Italiana';
        font-weight:300;
    }
    76%{
        font-family:'Inter';
        font-weight:900;
        top:-50px;
        opacity:0;
        content:"STAND OUT.";
    }
    100%{
        top:0;
        opacity:1;
        content:"STAND OUT.";
    }
}
@keyframes Line{
    0%{
        width:0;
        left:0;
    }
    83%{
        width:0;
        left:0;
    }
    91.50%{
        width:100%;
        left:0;
    }
    100%{
        left:100%;
        width:0;
    }
}

#header > h1,
#header > a{
    font-family:'Inter';
    display:inline-block;
    z-index: 0;
}
#header > h2,
#header > h3,
#header > h4,
#header > h5{
    font-family:'Josefin Sans';
    color:#111111;
    display:inline-block;
    z-index: -2;
    position:relative;
}

#header > h1 span{
    display:none;
}


#header > h3{
    font-size:clamp(20px, 5vw, 36px);
    font-weight:300;
    margin:120px 0 0 0;
}
#header > h1{
    font-size:clamp(60px,13vw,180px);
    font-weight:1000;
    letter-spacing: -5px;
    color:#111111;
    position:relative;
    transition-delay: 0.2s;
    line-height:0.8;
    text-align:center;
    color:transparent;
}

#header > h1:before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    animation:Intro 5s forwards;
    animation-delay:0.6s;
    color:#111111;
    white-space: nowrap;
}

#header > h1:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-20px;
    height:13px;
    width:0;
    background-color:black;
    animation: Line 6s infinite ease-in-out;
}

#header > h4{
    font-size:clamp(19px, 5vw, 33px);
    font-weight:400;
    margin:80px 0 0 0;
    transition-delay:0.3s;
}
#header > h2{
    font-size:clamp(35px, 6vw, 73px);
    padding:0 30px;
    font-weight:600;
    letter-spacing: -3px;
    transition-delay:0.4s;
}
#header > h5{
    font-size:20px;
    margin-bottom:60px;
    transition-delay:0.5s;

}

#header > a{
    text-decoration: none;
    padding:25px 30px;
    background-color:#111111;
    color:var(--main-color);
    font-size:35px;
    font-weight:900;
    position:relative;
    transition: all 0.5s;
}

#header > p{
    font-family:'Josefin Sans';
    margin-top:50px;
    color:#111111;
}


#header > a:hover{
    letter-spacing: 2px;
    background-color:white;
    color:#111111;
}

#about{
    display:flex;
    justify-content: space-around;
    background-color:#111111;
    padding:200px 0 ;

}


.aboutText{
    width:30%;
    color:var(--main-color);
    font-family:'Josefin Sans';
    
    padding-bottom:40px;
}
.aboutText:first-child{
    padding-top:80px;
}
.aboutText p{
    font-weight:200;
    font-size:28px;
}

.aboutText p span{
    font-weight:400;
}

.aboutP{
    overflow:hidden;
    margin-bottom:40px;
    border-bottom:1px solid var(--main-color);
    transition: all 0.5s linear;
    max-height:324px;
}
.aboutP.expandAboutText{
    max-height:1100px;
}
#openAboutText{
    font-weight:300;
    font-size:25px;
    border:1px solid var(--main-color);
    padding:20px 30px;
    border:1px solid var(--main-color);
    text-transform: capitalize;
    cursor:pointer;
    position:relative;
    transition:all 0.5s;
}
#openAboutText:before{
    content:"";
    position:absolute;
    left:50%;
    top:-33%;
    transform:translateX(-50%);
    height:100%;
    width:0;
    border-bottom:1px solid var(--main-color);
    transition:all 0.3s ease-out;
}
#openAboutText:hover{
    letter-spacing: 1px;
}
#openAboutText:hover:before{
    width:70%;
    
}

.aboutText h1{
    font-size:clamp(34px, 6vw, 120px);
    font-weight:900;
    margin:5px 0 35px 0;
    transition-delay:0.2s;
}

.aboutImg{
    position:relative;
    transition-delay:0.2s;
    max-height:651px;
}
.aboutImg img{
    position:relative;
    z-index: 1;
}

.aboutImg.show:before{
    height:100%;
    transition:all 1.3s;
    transition-delay:0.8s;
    opacity:1;
}

.aboutImg:before{
    opacity:0;
    content:"";
    height:0;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    background-image:url(img/about-wings.png);
}




#services{
    background-color:#111111;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-evenly;
    align-items:flex-start;
    min-height:900px;
    padding:100px 0;
}
#services > div{
    min-height:630px;
    max-width:calc( 32% - ( 2* var(--services-div-padding) ));
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding:0 var(--services-div-padding);
    font-family:'Josefin Sans';
    color: var(--main-color);
    position:relative;
}

#servicesImageDiv{
    min-width:440px;
}
.designDiv{
    left:20px;
}
#services > h1, #works > h1{
    text-align:center;
    color: var(--main-color);
    font-size:60px;
    text-transform: uppercase;
    padding-top:70px;
    width:100%;
    letter-spacing: 4px;
}

#services > h1 span, #works >h1 span{
    font-size:30px;
    font-weight:200;
}


#servicesImage{
    box-shadow:0 0 10px black;
    height:600px;
}

#services > div h1{
    font-size:70px;
    padding:0 20px 5px 20px;
    border-bottom:1px solid var(--main-color);
    margin-bottom:30px;
    font-weight:300;
    text-align: center;
}

#services > div p{
    font-weight:300;
    line-height:1.4;
    font-size:22px;
    text-align:center;
}

#services > div h3{
    font-size:70px;
    font-weight:800;
    position:absolute;
    opacity:0.8;
    z-index: 2;
    top:45%;
}
.showLater{
    display:none;
}
.development{
    left:-65%;
    transform:rotate(90deg);
}

.digitalAndLogo{
    right:-70%;
    transform:rotate(270deg);
}

#services a{
    border:1px solid var(--main-color);
    background-color:transparent;
    color:var(--main-color);
    padding:25px 35px;
    font-family:'Josefin Sans';
    font-size:17px;
    margin-top:50px;
    font-weight:300;
    transition:all 0.5s;
    position: relative;
    letter-spacing: 2px;
    overflow:hidden;
    text-decoration: none;
    text-align:center;
}

#services a:before{
    content:"";
    height:1px;
    width:75%;
    position:absolute;
    bottom:30%;
    left:50%;
    transform: translateX(-50%);
    background-color: var(--main-color);
}


#services a:hover{
    background-color: var(--main-color);
    color:black;
    letter-spacing: 3px;
}

#works{
    background-color:#111111;
    padding:150px 0;
}

#works > h1{
    padding:0 0 20px 0;
}


.work{
    width:100%;
    padding:40px 0;
    background-color:#0f0f0f;
    display:flex;
    position:relative;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
#works > div:not(.noBefore):before{   /*!!!!!!!!!!!!!!!!!!!!!!!!!!! this is stoopid !!!!!!!!!!!!!!!!!!!!!*/
    content:"";
    position:absolute;
    bottom:0;
    left:50%;
    transform: translateX(-50%);
    width:50%;
    height:1px;
    background-color: var(--main-color);
}

.work > div{
    height:90%;
    width:40%;
    padding:105px 5%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    transition-delay:0.4s;
}

.oppositeFlex{
    flex-direction: row-reverse;
}

.work img{
    width:100%;
}

.paLogo{
    max-width:270px;
}

.workText{
    color:var(--main-color);
    
    text-align: center;
}

.workText h1{
    font-family:'Poiret One';
    letter-spacing:1px;
    font-size:40px;
    border-bottom:2px solid var(--main-color);
    padding-bottom:3px;
    transition:all 0.5s;
}

.workText p{
    font-family:'Josefin Sans';
    font-size:20px;
    line-height:1.1;
    font-weight:300;
    margin:20px 0;
}

.workText p span{
    font-size:25px;
    font-weight:400;
}



.workText a{
    color:var(--main-color);
    border:1px solid var(--main-color);
    padding:17px 35px;
    font-weight:200;
    font-size:17px;
    font-family:'Josefin Sans';
    text-decoration:none;
    transition:all 0.5s;
    position:relative;
}

.workText a:before{
    content:"";
    height:1px;
    width:65%;
    position:absolute;
    bottom:30%;
    left:50%;
    transform: translateX(-50%);
    background-color: var(--main-color);
}

.workText a:hover{
    background-color:var(--main-color);
    color:black;
    letter-spacing: 1px;
}
.quote{
    color:var(--main-color);
    display:block;
    width:70%;
    text-align: center;
    font-family:serif;
    font-style:italic;
    font-weight:300;
    padding:30px 0;
    font-size:35px;
}
.work span{
    font-family: 'Josefin Sans';
    font-size:25px;
}

#contact{
    min-height:100vh;
    background-color:#111111;
    padding-top:100px;
    color:var(--main-color);
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family:'Josefin Sans';
}



#contact h1{
    font-size:clamp(40px, 4vw, 70px);
    font-weight:300;
    margin-bottom:30px;
    position:relative;
    color:var(--main-color);
}



#contact p{
    font-size:clamp(20px, 2vw, 30px);
    font-weight:300;
    line-height:1.3;
    transition-delay:0.3s;
}

#contact a:hover{
    color:white;
}
#contact a{
    color:var(--main-color);
    transition:color 0.3s;
}

footer{
    width:100%;
    min-height:130px;
    background-color:#111111;
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
    color:var(--main-color);
    font-family:'Josefin Sans';
    padding:0 3% 20px 3%;
    position:relative;
}
footer img{
    width:80px;

}
footer p{
    font-weight:300;
    font-size:15px;
}


footer a{
    font-weight:300;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:20px;
    text-transform:uppercase;
    border-bottom:1px solid var(--main-color);
    font-size:15px;
    text-decoration: none;
    color:var(--main-color);
    transition: all 0.6s;
}

footer a:hover{
    letter-spacing:0.5px;
    color:white;
    border-bottom:1px solid white;
}



@media(max-width:1500px){
    .header-text h1{
        font-size:clamp(110px, 9vw, 130px);
    }
    .header-text h2{
        font-size:40px;
    }
}

@media(max-width:1230px){
    .header-image{
        position:absolute;
        height:900px;
        left:-200px;
        top:500px;
    }
    .header-image{
        height:850px;
    }
    .header-content{
        justify-content: flex-end;
    }
    #services > div p{
        font-size:20px;
    }
    .header-sliding-text{
        display:none;
    }
    .header-text h1{
        font-size:clamp(120px, 14vw, 170px);
    }
}

@media(max-width:1080px){
    .header{
        overflow:hidden;
    }
    .aboutText{
        z-index: 1;
        width:100%;
        padding:0 10%;
        text-align:center;
        height:600px;
    }
    .aboutText h1{
        font-size:clamp(34px, 10vw, 120px);
    }
    .aboutText p{
        font-size:clamp(20px, 3.4vw, 30px);
    }
    .aboutImg{
        position:absolute;
        left:0;
        left:50%;
        transform:translateX(-50%);
        z-index: 0;
    }
    .aboutImg:after{
        content:"";
        position:absolute;
        left:0;
        top:0;
        height:100%;
        width:100%;
        background:rgba(17,17,17,0.7);
        z-index: 2;
    }
    .aboutImg:before{
        background-image: url(img/about-wings.png) ;
    }
    #services > h1{
        margin-bottom:50px;
    }
    .Where{
        margin-top:0;
    }
    .header-content{
        margin:0;
    } 
    #servicesImageDiv *{
        display:none;
    }
    #servicesImageDiv{
        min-width:0;
    }
    :root{
        --services-div-padding:0%;
    }

    .showLater{
        display:block;
    }

    .workText h1{
        font-size:30px;
    }
    .workText p{
        font-size:15px;
    }
    #contact:before{
        right:-60%;
    }
    footer img{
        width:60px;
    }
    footer a{
        font-size:12px
    }
}
@media(max-width:775px){
    #header > a{
        font-size:clamp(15px, 5vw, 35px);
    }
    #services a{
        padding:15px 25px;
        font-size:14px;
    }
    .workText h1{
        font-size:20px;
    }
    #contact{
        flex-direction: column;
        text-align: center;
    }
    #contactText{
        margin-bottom:40px;
    }
    #contact h1{
        font-size:clamp(25px, 8vw, 40px);
    }
    #contact h2{
        font-size:clamp(20px, 8vw, 35px);
    }
    #contact p{
        font-size:clamp(18px, 4vw, 24px);
    }
    footer p{
        font-size:10px;
    }

    footer{
        padding:0 2% 20px 2%;
    }
}
@media(max-width:715px){
    .header-image{
        bottom:-400px;
        height:850px;
    }
    .header-text h1,
    .header-text h1:not(.Technology){
        font-size:100px;
        margin-top:10px;
    }
    #services > div p {
        font-size:15px;
    }
    #services > div h1 {
        font-size:40px;
    }
    #services button {
        font-size:12px;
        padding:18px 10px;
    }
    .workText h1, .workText p{
        margin-bottom:30px;
    }
    .work{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height:auto;
    }  
    .workText{
        order:1;
    } 
    .quote{
        order:3;
        font-size:18px;
    }
    .work span{
        font-size:16px;
    }
    .work > div img{
        width:clamp(200px, 60%, 300px);
        margin-bottom:30px;
        padding-top:50px;
    }
    .work > div{
        width:70%;
        padding:10px 0;
    }

}
@media(max-width:640px){
    :root{
        --full-size-padding:7%;
        --logo-font-size:120px;
        --logo-height:140px;
    }
    .view-more{
        left:85%;
    }
    nav{
        padding-bottom:0;
    }
    #header > h1{
        font-size:clamp(30px, 17vw, 120px);
    }
    #header > h1:before span{
        display:inline;
    }
    #header > h3{
        margin: 120px 0 0 0;
    }
    .icons{
        right:10px;
    }
    .icons img{
        width:18%;
    }
    #services a{
        font-size:12px;
    }
    footer img{
        display:none;
    }
    footer a{
        bottom:50px;
    }
}

@media(max-width:470px){
    #header > h1:before {
        padding: 0 30px;
    }
    #services > div:not(#servicesImageDiv){
        max-width:60%;
        width:60%;
        margin-bottom:50px;
    }
    #services a{
        font-size:14px;
    }
    .workText h1{
        font-size: 22px;
    }
    .workText a{
        padding:12px 25px;
        font-size:15px;
    }
    .workText a:before{
        bottom:25%;
        width:75%;
    }
    #contact:before{
        display:none;
    }

}
@media(max-width:768px){
    .hamburger{
        display:block;
        z-index: 10;
    }

    .hamburger.active .bar:nth-child(2){
        opacity:0;
    }

    .hamburger.active .bar:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }
    .hamburger.active .bar:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .nav-options{
        position:absolute;
        left:0;
        top:0;
        flex-direction:column;
        width:100vw;
        text-align:center;
        transition:0.4s;
        padding:130px 0 0 0;
        background-color:rgba(0,0,0,0.97);
        opacity:0;
        padding-bottom:100vh;
        z-index: 10;
        pointer-events:none;
    }
    .nav-options.active{
        opacity:1;
        pointer-events:all;
    }
    .animLogo{
        top:40%;
    }

    li a{
        color:var(--main-color);
        padding-bottom:5px;
        font-size:29px;
    }

    li a:after{
        content:"";
        position:absolute;
        left:0;
        bottom:0;
        width:100%;
        height:1px;
        background-color:var(--main-color);
    }
    
    nav li{
        margin:16px 0;
    }
    
}
@media(max-width:330px){

    #services a{
        font-size:10px;
    }
    #services > h1, #works > h1{
        font-size:40px;
    }
    #contact p{
        font-size:15px;
    }
}