/* =========================================
   SCROLL REVEAL
========================================= */

.reveal{
    opacity:0;
    transform:translateY(80px);
    transition:1s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

.reveal-left{
    opacity:0;
    transform:translateX(-100px);
    transition:1s ease;
}

.reveal-left.active{
    opacity:1;
    transform:translateX(0);
}

.reveal-right{
    opacity:0;
    transform:translateX(100px);
    transition:1s ease;
}

.reveal-right.active{
    opacity:1;
    transform:translateX(0);
}

/* =========================================
   HERO ANIMATIONS
========================================= */

.slide-content h1{

    animation:
    heroTitle 1s ease forwards;
}

.slide-content p{

    opacity:0;

    animation:
    heroText 1s ease .4s forwards;
}

.hero-btn{

    opacity:0;

    animation:
    heroButton 1s ease .8s forwards;
}

@keyframes heroTitle{

    from{

        opacity:0;
        transform:translateY(50px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroText{

    from{

        opacity:0;
        transform:translateY(40px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroButton{

    from{

        opacity:0;
        transform:translateY(30px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

/* =========================================
   BUTTON GLOW
========================================= */

.hero-btn,
.header-btn{

    position:relative;

    overflow:hidden;
}

.hero-btn::before,
.header-btn::before{

    content:'';

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.6),
    transparent
    );

    transition:.7s;
}

.hero-btn:hover::before,
.header-btn:hover::before{

    left:100%;
}

/* =========================================
   FLOATING CARDS
========================================= */

.service-card{

    animation:
    floating 5s ease-in-out infinite;
}

.service-card:nth-child(2){
    animation-delay:.4s;
}

.service-card:nth-child(3){
    animation-delay:.8s;
}

.service-card:nth-child(4){
    animation-delay:1.2s;
}

.service-card:nth-child(5){
    animation-delay:1.6s;
}

.service-card:nth-child(6){
    animation-delay:2s;
}

@keyframes floating{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* =========================================
   PRICE TABLE EFFECT
========================================= */

.price-row{

    transition:.35s;
}

.price-row:hover{

    background:#ffcc00;

    color:#000;

    transform:scale(1.02);
}

/* =========================================
   GALLERY HOVER
========================================= */

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:20px;
}

.gallery-item img{

    transition:.7s;
}

.gallery-item:hover img{

    transform:scale(1.15);
}

.gallery-item::before{

    content:'';

    position:absolute;

    width:100%;
    height:100%;

    background:
    rgba(0,0,0,.5);

    opacity:0;

    transition:.5s;

    z-index:2;
}

.gallery-item:hover::before{

    opacity:1;
}

.gallery-item .gallery-title{

    position:absolute;

    bottom:20px;
    left:20px;

    color:white;

    font-weight:700;

    opacity:0;

    transition:.5s;

    z-index:3;
}

.gallery-item:hover .gallery-title{

    opacity:1;

    transform:translateY(-10px);
}

/* =========================================
   COUNTER EFFECT
========================================= */

.counter{

    font-size:64px;

    font-weight:800;

    color:#ffcc00;
}

.counter-card{

    transition:.4s;
}

.counter-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.15);
}

/* =========================================
   PARALLAX
========================================= */

.parallax{

    background-attachment:fixed;

    background-position:center;

    background-size:cover;
}

/* =========================================
   GLOW SECTION
========================================= */

.glow{

    position:relative;
}

.glow::before{

    content:'';

    position:absolute;

    width:500px;
    height:500px;

    background:
    radial-gradient(
    circle,
    rgba(255,204,0,.25),
    transparent 70%
    );

    top:-200px;
    left:-200px;

    z-index:-1;
}

/* =========================================
   TIMELINE STEPS
========================================= */

.step-card{

    transition:.4s;
}

.step-card:hover{

    transform:translateY(-10px);
}

.step-number{

    width:80px;
    height:80px;

    background:#ffcc00;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;

    font-weight:800;

    transition:.4s;
}

.step-card:hover .step-number{

    transform:rotate(360deg);
}

/* =========================================
   CONTACT FORM
========================================= */

.form-input{

    transition:.35s;
}

.form-input:focus{

    border-color:#ffcc00;

    box-shadow:
    0 0 20px rgba(255,204,0,.3);
}

/* =========================================
   FOOTER
========================================= */

    .footer{

        position:relative;
    }

    .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        #ffcc00,
        transparent
    );

    background-size: 1000px 100%;
    animation: footerLine 3s linear infinite;
}

@keyframes footerLine {
    from {
        background-position: -1000px 0;
    }

    to {
        background-position: 1000px 0;
    }
}

/* =========================================
   LOADER
========================================= */

.loader{

    position:fixed;

    inset:0;

    background:#111;

    display:flex;

    align-items:center;
    justify-content:center;

    z-index:999999;
}

.loader-circle{

    width:80px;
    height:80px;

    border:6px solid #333;

    border-top:6px solid #ffcc00;

    border-radius:50%;

    animation:
    spin 1s linear infinite;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}