/* Parallax Header */

.parallax-container {
    position: relative;
    width: 100%;
    
}

.parallax {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    box-shadow: 0px 20px 100px 100px rgba(0,0,0,0.8) inset;
    
}

.sky {
    position: absolute;
    width: 156.90%;
    top: 70.87%;
    left: 50%;
    z-index: 1;
}

.parallax img.mountain {
    position: absolute;
    width: 146.44%;
    top: 70.87%;
    left: 50%;
    z-index: 2;
}

.parallax img.smoke1 {
    position: absolute;
    width: 156.90%;
    top: 70.87%;
    left: 50%;
    z-index: 3;
}

.parallax .text {
    opacity: 1;
}

.parallax .text1 {
    position: absolute;
    z-index:4 ;
    top: 34.35%;
    left: 60.87%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    pointer-events: auto;
    color: #333;
}

.parallax .text1 h1 {
    font-weight: 750;
    font-size: 6rem;
    line-height: 0.88;
}

.parallax img.ground {
    position: absolute;
    width: 146.44%;
    top: 60.43%;
    left: 50%;
    z-index: 5;
}

.parallax img.smoke2 {
    position: absolute;
    width: 156.90%; 
    top: 75.87%;
    left: 50%;
    z-index: 6;
}

.parallax .text2 {
    position: absolute;
    z-index: 7 ;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    pointer-events: auto;
    text-align: center;
    color: #fff;
}

.parallax .text2 h1 {
    font-weight: 750;
    font-size: 6rem;
    line-height: 0.88;
}

.parallax img.smoke3 {
    position: absolute;
    width: 156.90%;
    top: 80%;
    left: 50%;
    z-index: 9;
}

.parallax .vignette {
    position: absolute;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse at center , rgba(0,0,0,0) 65%, rgba(0,0,0,0.7));
    pointer-events: none;
}
/* Alt kısımda 20px yüksekliğinde gradient oluşturuyoruz. */
/* en alt beyaz olucak üste doğru opaklık artıcak. */
.parallax .bottom-shadow {
    position: absolute;
    z-index: 11;
    width: 100vw;
    height: 20px;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(180deg, rgba(255,255,255,0) 4%, rgba(255,255,255,1) 96%);
    background-position: 50% 50%;
}

.parallax .pslide {
    pointer-events: none;
    transition:1s cubic-bezier(.2,.49,.32,.99);
    transform: translateX(-50%) translateY(-50%);
}








/* Responsive */

@media (max-width: 1150px) {
    .parallax .text1 h1 {
        font-size: 5rem;
    }
    .parallax .text2 h1 {
        font-size: 5rem;
    }
    .parallax-products .products img {
        width: 140px;
    }
    .parallax-products span.category_name {
        font-size: 1.5rem;
    }
    .curved-text  h1{
        font-size: 1.2rem;
    }
    

    .parallax .sky {
        width: initial;
        height: 200.6%;
    }

    .parallax .mountain {
        width: initial;
        height: 150.44%;
    }

    .parallax .smoke1 {
        width: initial;
        height: 166.90%;
    }

    .parallax .ground {
        width: initial;
        height: 155.44%;
    }

    .parallax .smoke2 {
        width: initial;
        height: 166.90%;
    }

    .parallax .smoke3 {
        width: initial;
        height: 166.90%;
    }

    .parallax img.sky {
        width: initial;
        height: 200.6%;
    }

    .parallax img.mountain {
        width: initial;
        height: 150.44%;
    }

    .parallax img.smoke1 {
        width: initial;
        height: 166.90%;
    }

    .parallax img.ground {
        width: initial;
        height: 155.44%;
    }

    .parallax img.smoke2 {
        width: initial;
        height: 166.90%;
    }

    .parallax img.smoke3 {
        width: initial;
        height: 166.90%;
    }

}




@media (max-width: 768px) {
    .parallax .text1 h1 {
        font-size: 4.5rem;
    }
    .parallax .text2 h1 {
        font-size: 4.5rem;
    }

    /* width: inital, height: (width değeri)*/
    .parallax .sky {
        width: initial;
        height: 249,6%;
    }

    .parallax img.mountain {
        width: initial;
        height: 146.44%;
    }

    .parallax img.smoke1 {
        width: initial;
        height: 156.90%;
    }

    .parallax img.ground {
        width: initial;
        height: 146.44%;
    }

    .parallax img.smoke2 {
        width: initial;
        height: 156.90%;
    }

    .parallax img.smoke3 {
        width: initial;
        height: 156.90%;
    }
}

@media (max-width: 600px) {
    .parallax .text1 h1 {
        font-size: 4rem;
    }
    .parallax .text2 h1 {
        font-size: 4rem;
    }

    .parallax .text2 {
        left: 45%;
    }
}

@media (max-width: 500px) {
    .parallax .text1 h1 {
        font-size: 3.5rem;
    }
    .parallax .text2 h1 {
        font-size: 3.5rem;
    }
    .parallax .text1 {
        left: 50%;
        top: 40%;
    
    }
}


/* Mobile */

@media (max-width: 430px) {

    .parallax .text1 h1 {
        font-size: 3rem;
    }
    .parallax .text2 h1 {
        font-size: 3rem;
    }
    
    .curved-text  h1{
        font-size: 0.7rem;
    }

    .parallax .text1 {
        left: 50%;
        top: 40%;
    }

}