.hero-title{

    animation: heroTitle 1s ease forwards;

}

@keyframes heroTitle{

    from{

        opacity:0;

        transform:
            perspective(1000px)
            rotateX(20deg)
            translateY(80px);

    }

    to{

        opacity:1;

        transform:
            perspective(1000px)
            rotateX(0)
            translateY(0);

    }

}


.hero-text{

    opacity:0;

    animation: fadeText 1.3s .4s forwards;

}

@keyframes fadeText{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


.hero-buttons{

    opacity:0;

    animation:fadeText 1.3s .8s forwards;

}

.btn-primary{

    transition:.35s;

}

.btn-primary:hover{

    transform:
        translateY(-6px)
        scale(1.05);

    box-shadow:
        0 20px 40px rgba(245,124,0,.35);

}


.btn-outline{

    transition:.35s;

}

.btn-outline:hover{

    transform:
        translateY(-6px)
        scale(1.05);

}

.hidden-section{

    opacity:0;

    transform:translateY(80px);

    transition:1s;

}

.show{

    opacity:1;

    transform:translateY(0);

}

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

nav a{
    transition:.3s;
}

nav a:hover{
    color:#F57C00;
}

.shadow-orange{
    box-shadow:0 15px 35px rgba(245,124,0,.35);
}

.logo-hover{
    transition:.4s;
}

.logo-hover:hover{
    transform:rotate(3deg) scale(1.05);
}

.hero-content{

    transform-style:preserve-3d;

    transition:transform .25s ease;

}

.hero-title{

    transform:translateZ(80px);

}

.hero-text{

    transform:translateZ(50px);

}

.hero-buttons{

    transform:translateZ(100px);

}
.hero-content {
    padding-top: 80px;
}