@font-face {
    font-family: AnimationFont;
    src: url('assets/font/FontsFree-Net-D-DINCondensed-Bold.ttf');
}

body{
    margin:0;
}

#form-submitted-message {
    display: none;
}


main{
    max-width:1900px;
    margin:0 auto;
    background:linear-gradient(298deg, #D620FF -7.89%, #0D6CFF 87.57%);
}
#header{
    padding: 0 60px;
    display:flex;
    flex-direction:column;
    align-items:center;

}

@media screen and (max-width:650px){
    #header{
        padding:0 15px;
    }
}

#header .logo-image{
    width:100%;
    padding:80px 0;
    display:flex;
    justify-content: center;
}

@media screen and (max-width:500px){
    #header .logo-image img{
        height:40px;
    }
    #header .logo-image{
        padding:80px 0 15px 0;
    }
}

#header .logo-image img{
    max-height:60px;
}

#header .header-image{
    position:relative;
    margin:0 auto;
    display:flex;
}

#header .header-image .tv{
    max-height: 650px;
    width:100%;
}

#header .ladder-guy {
    position:absolute;
    top:135px;
    left:-235px;
    margin:0 auto;
    max-height:450px;
    z-index:200;
}

#header .ladder-guy img{
    max-height: 500px;
    width:100%;
}

.desktop-text-wrapper{
    position:absolute;
    width:100%;
    overflow:hidden;
    padding:50px 30px 40px 70px;
}

.slider-wrapper{
    min-width:32%;
}
#word-slider{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-width:33%;
}


.word-slider .column{
    transform: translatex(0);
    transition: transform 1s, opacity 1s;
}

.fixed-column .fixed-word:nth-child(1){
    color:rgba(255,255,255,1);
}
.fixed-column .fixed-word:nth-child(2){
    color:rgba(255,255,255,0.9);
}
.fixed-column .fixed-word:nth-child(3){
    color:rgba(255,255,255,0.8);
}
.fixed-column .fixed-word:nth-child(4){
    color:rgba(255,255,255,0.5);
}
.fixed-column .fixed-word:nth-child(5){
    color:rgba(255,255,255,0.4);
}
.fixed-column .fixed-word:nth-child(6){
    color:rgba(255,255,255,0.2);
}
.fixed-column .fixed-word:nth-child(7){
    color:rgba(255,255,255,0.1);
}

#second-fixed-column{
    padding-left:25px;
    padding-right:63px;
}
@media screen and (max-width:1500px){
    #second-fixed-column{
        padding-left:25px;
        padding-right:55px;
    }
}
@media screen and (max-width:1300px){
    #second-fixed-column{
        padding-left:25px;
        padding-right:48px;
    }
}

.desktop-text-wrapper .fixed-word  {
    font-size: 27px;
    color:white;
    font-family: AnimationFont;
    line-height: 0.99;
    white-space: nowrap;
    margin: 0 auto;
}

.desktop-text-wrapper .fixed-word.title {
    font-size:52px;
    line-height:0.7;
    letter-spacing:0.5px;
    padding-bottom:13px;
    overflow: hidden; 
    white-space: nowrap;
    margin: 0 auto;
}
.fixed-word.rotated{
    transform:rotate(-5deg)
}

@media screen and (min-width:1300px){
    
    .desktop-text-wrapper .fixed-word {
        font-size: 33px; 
        line-height: 0.99;
    }
    .desktop-text-wrapper .fixed-word.title{
        line-height:0.85;
        letter-spacing:0.3px;
        padding-bottom:10px;
        font-size:64px;
    }
}

@media screen and (min-width:1500px){
    .desktop-text-wrapper .fixed-word {
        font-size: 39px; 
        line-height: 0.99;
    }
    .desktop-text-wrapper .fixed-word.title{
        line-height:0.8;
        letter-spacing:0.3px;
        padding-bottom:18px;
        font-size:75px;
    }
}

.word-slider .word {
    font-size: 27px;
    color:white;
    font-family: AnimationFont;
    line-height: 0.99;
    white-space: nowrap;
    margin: 0 auto;
    opacity: 0;
}


@keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

.word.title {
    font-size:52px;
    line-height:0.7;
    letter-spacing:0.5px;
    padding-bottom:13px;
    overflow: hidden; 
    white-space: nowrap;
    margin: 0 auto;
}


@media screen and (min-width:1300px){
    
    .word-slider .word {
        font-size: 33px; 
        line-height: 0.99;
    }
    .word.title{
        line-height:0.85;
        letter-spacing:0.3px;
        padding-bottom:10px;
        font-size:64px;
    }
}

@media screen and (min-width:1500px){
    .word-slider .word {
        font-size: 39px; 
        line-height: 0.99;
    }
    .word.title{
        line-height:0.8;
        letter-spacing:0.3px;
        padding-bottom:18px;
        font-size:75px;
    }
}


#transform-text{
    width:331px;
    height:300px;
}

#header .mobile-header-image{
    margin:0 auto;
    display:flex;
    position:relative;
}

#header .mobile-header-image .phone{
    height: 550px;
    width:100%;
}

#header .mobile-header-image .mobile-ladder-guy{
    position:absolute;
    top:250px;
    left:-110px;
    margin:0 auto;
    max-height:300px;
    z-index:200;
}

.mobile-text-wrapper{
    position:absolute;
    bottom:120px;
    left:145px;
    height: 380px;
    width:40%;
    overflow:hidden;
}
#mobile-animation-wrapper{
    transition: transform 0.5s ease-in-out;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
#mobile-animation-wrapper .column{
    transform: translateY(0);
    transition: transform 1s, opacity 1s;
}

#mobile-animation-wrapper .word {
    font-size: 27px;
    color:white;
    font-family: AnimationFont;
    text-align:center;
    line-height: 0.99;
    white-space: nowrap;
    margin: 0 auto;
    opacity: 0;
}

@keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

#mobile-animation-wrapper .word.title {
    font-size:50px;
    line-height:0.7;
    letter-spacing:1px;
    padding-bottom:13px;
    overflow: hidden; 
    white-space: nowrap;
    margin: 0 auto;
    text-align:center;
}

@media screen and (max-width:650px){
    #header .mobile-header-image .phone{
        height:580px;
        width: 400px;
    }

    #header .mobile-header-image .mobile-ladder-guy{
        max-height:200px;
        left:-57px;
        top:280px;
    }

    .mobile-text-wrapper{
        bottom:150px;
        left:110px;
        height: 320px;
        width:40%;
    }

    #mobile-animation-wrapper .word.title {
        font-size:40px;
        line-height:0.7;
    }

    #mobile-animation-wrapper .word {
        font-size: 22px;
    }
}

@media screen and (max-width:500px){
    #header .mobile-header-image .phone{
        height:530px;
        width:350px;
    }

    #header .mobile-header-image .mobile-ladder-guy{
        left:-60px;
        max-height:190px;
        top:250px;
    }

    .mobile-text-wrapper{
        bottom:165px;
        left:100px;
        height: 250px;
        width:40%;
    }

    #mobile-animation-wrapper .word.title {
        font-size:35px;
        line-height:0.7;
    }

    #mobile-animation-wrapper .word {
        font-size: 20px;
    }
}

@media screen and (max-width:400px){

    #header .mobile-header-image .phone{
        height:530px;
        width:300px;
    }
    #header .mobile-header-image .mobile-ladder-guy{
        left:-25px;
        max-height:130px;
        top:250px;
    }

    #header .mobile-header-image .phone{
        height:530px;
        width:300px;
    }

    .mobile-text-wrapper{
        bottom:185px;
        left:85px;
        height: 200px;
        width:40%;
    }

    #mobile-animation-wrapper .word.title {
        font-size:30px;
        line-height:0.7;
    }

    #mobile-animation-wrapper .word {
        font-size: 16px;
    }
}

section{
    display:flex;
    flex-direction:column;

}

.second-section{
    z-index:100;
    position:relative;
    top:-320px;
}

.curve{
    background: url('assets/images/header.svg');
    background-repeat: no-repeat;
    background-size: cover;
    height:500px;
    width:100%;
    z-index:50;
}

@media screen and (max-width:1500px){
    .curve{
        height:400px;
    }
    .second-section{
        top:-300px;
    }
}
@media screen and (max-width:1500px){
    .second-section{
        top:-250px;
    }
}

@media screen and (max-width:1200px){
    .curve{
        height:300px;
    }
}

@media screen and (max-width:1100px){
    .second-section{
        top:-200px;
    }
}

@media screen and (max-width:600px){
    .curve{
        height:150px;
    }
}

.right-leafs{
    z-index:40;
    position: absolute;
    top:180px;
    right:0;
}
.right-leafs img{
    max-height:200px;
    max-width:250px;
    position:absolute;
    left:-180px;
}

@media screen and (max-width:1700px){
    .right-leafs{
        top:140px;
    }
}

@media screen and (max-width:1500px){
    .right-leafs{
        top:100px;
    }
}

@media screen and (max-width:1200px){
    .right-leafs{
        top:80px;
    }
}

.ladder-guy-leafs{
    z-index:40;
    position: absolute;
    top:0;
    left:0;
}

.ladder-guy-leafs .pink-leaf{
    max-height:200px;
    max-width:250px;
    position:absolute;
    top:-140px;
    left:70px;
}

.ladder-guy-leafs .yellow-leaf{
    max-height:200px;
    max-width:100px;
    position:absolute;
    top:-70px;
    left:30px;
}


@media screen and (max-width:1500px){
    #header .header-image .tv{
        max-height: 550px;
    }
    #header .ladder-guy{
        top:120px;
        left:-220px;
        margin:0 auto;
        max-height:400px;
    }
}

@media screen and (max-width:1300px){
    #header .header-image .tv{
        max-height: 450px;
    }
    #header .ladder-guy{
        top:105px;
        left:-160px;
        margin:0 auto;
        max-height:300px;
    }

    .ladder-guy-leafs .pink-leaf{
        max-height:150px;
        max-width:200px;
        top:-90px;
        left:70px;
    }
    
    .ladder-guy-leafs .yellow-leaf{
        max-height:170px;
        max-width:70px;
        top:-40px;
        left:40px;
    }

}

.section-content{
    background: #FFFFFF;
    padding: 30px 10rem 200px 10rem;
    gap:100px;
    position:relative;
    top:-5px;
}

@media screen and (max-width:1300px){
    .section-content{
        padding: 30px 5rem 200px 5rem;
    }
}

@media screen and (max-width:992px){
    .section-content{
        gap:0px;
        padding: 30px 3rem 0px 3rem;
    }
}
.section-content p{
    color: rgba(0, 0, 0, 0.69);
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.section-content .section-image{
    width:100%;
    max-height:400px;
}

.mobile-section-image{
    height:350px;
    width:100%;
}

@media screen and (max-width:600px){
    .section-content p{
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .mobile-section-image{
        height:200px;
        width:100%;
    }
}

#footer{
    background: #ffffff;
    top:-326px;
    position:relative;
}

@media screen and (max-width:1500px){
    #footer{
        top:-256px;
    }
}

@media screen and (max-width:1100px){
    #footer{
        top:-210px;
    }
}

#footer .desktop-get-in-touch{
    padding: 0 10rem;
    width:100%;
    max-height:470px;
    padding-top:50px;
}

.footer-images-wrapper{
    position:relative;
    top:100px;
    padding:0 50px;
}

.footer-images-wrapper .get-in-touch-wrapper{
    gap:15px;
}

.footer-images-wrapper .get-in-touch-wrapper img{
    height:50px;
    margin-top:5px;
}

@media screen and (max-width:550px){
    .footer-images-wrapper .get-in-touch-wrapper img{
        height:30px;
    }
}

.footer-images-wrapper .get-in-touch-wrapper p{
   width:fit-content;
}

.footer-images-wrapper .mobile-woman-wrapper{
    height:200px;
    position:absolute;
    bottom:-60px;
    right:40px;
}

@media screen and (max-width:650px){
    .footer-images-wrapper .mobile-woman-wrapper{
        height:150px;
        bottom:-40px;
        right:20px;
    }
}

@media screen and (max-width:400px){
    .footer-images-wrapper .get-in-touch-wrapper img{
        height:20px;
    }
    .footer-images-wrapper .mobile-woman-wrapper{
        height:110px;
    }
}

#footer .footer-content{
    padding: 0 60px;
}

#footer .footer-curve{
    background: url('assets/images/footer.svg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 10rem 80px 10rem;
}
.footer-image-woman-wrapper{
    padding:15px;
}
.footer-image-woman-wrapper img{
    max-height:450px;
    width:100%;
}

#footer .form-wrapper{
    padding: 160px 0 80px 0;
}


@media screen and (max-width:992px){
    #footer .form-wrapper{
        padding: 200px 50px 80px 50px;
    } 
    #footer .footer-curve{
        padding: 0 3rem 40px 3rem;
    }
}

@media screen and (max-width:600px){
    #footer .footer-curve{
        padding: 0 0px 40px 0px;
    }
}

#footer .form-wrapper form{
    gap:25px;
}

#footer .form-wrapper p{
    color: #FFF;
    font-size: 27px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-bottom: 0px;
    margin-top:auto
}

#footer .form-wrapper input{
    padding: 15px 25px;
    border-radius:10px;
    outline:none;
    border:none;
}

#footer .form-wrapper textarea{
    padding: 15px 25px;
    border-radius:10px;
    outline:none;
    border:none;
}

#footer .form-wrapper button{
    padding: 15px 25px;
    border-radius:10px;
    outline:none;
    border:none;
    background-color:#2B3178;
    color: #FDF3EA;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}