@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');


@font-face {
    font-family: 'Montserrat';
    src: url('../font/Montserrat.ttf') format('truetype');
}

/* Default CSS */
:root {
    --primary-color: #ae2c2c; 
    --primary-color-low: rgba(174, 44, 44, 0.5);
    --primary-color-dark: #7a1f1f;
    --primary-color-rgb: 174, 44, 44;

    --secondary-color: #adb5bd; 
    --secondary-color-low: rgba(173, 181, 189, 0.5); 
    --secondary-color-dark: #6c757d;

    --tertiary-color: #e9ecef;
    --tertiary-color-low: rgba(233, 236, 239, 0.5);
    --tertiary-color-dark: #ced4da;

    --bg-color: #e7e7e7;
    --bg-color-low: rgba(248, 249, 250, 0.5);
    --bg-color-dark: #e4e7eb;

    --text-dark: #343a40;
    --text-dark-low: #495057b9;
    --text-dark-dark: #212529;

    --text-light: #f8f9fa;
    --text-light-low: rgba(248, 249, 250, 0.7);
    --text-light-dark: #e1e4e6;

    --button-color: #942727; 
    --button-color-low: rgba(148, 39, 39, 0.5);
    --button-color-dark: #6c1f1f;

    --card-bg: #fcfcfc;
    --card-bg-low: #f3f2f2;
    --smoothline-color: var(--bg-color);
}

.landing-sec {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;

}

.landing-sec .parallax-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--card-bg);
}

.landing-sec .parallax {
    position: absolute;
    height: 100%;
    width: auto;
    left: 0;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: transform;
    transform-style: flat; /* 3D yerine flat kullanımı */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: none;
    perspective: none;
}

.landing-sec .parallax .pstep {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    
}

.landing-sec .parallax .pstep img {
    height: 100%;
    width: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.landing-sec .parallax .pstep.sky {
    z-index: 0;
}


.landing-sec .parallax .pstep.buildfront {
    z-index: 5;
}

.landing-sec .parallax .pstep.build1-1 {
    z-index: 5;
}

.landing-sec .parallax .pcloud {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.landing-sec .parallax .pcloud img {
    height: 100%;
    width: auto;
}

.landing-sec .parallax .pcloud.cloud1-1 {
    animation: identifier 100s linear infinite;
    
}

.landing-sec .parallax .pcloud.cloud1-2 {
    animation: identifier 100s linear infinite;
}

.landing-sec .parallax .pcloud.cloud2-1 {
    animation: identifier2 200s linear infinite;
}

.landing-sec .parallax .pcloud.cloud2-2 {
    animation: identifier2 200s linear infinite;
    
}

@keyframes identifier {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}


@keyframes identifier2 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.landing-sec .parallax .pSvg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    z-index: 2;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.landing-sec .parallax .pSvg path {
    -webkit-perspective:1000;
    perspective: 1000;
    backface-visibility: hidden;
    -webkit-backface-visibility:hidden;
    will-change: stroke-dashoffset;
    -webkit-transform-style: preserve-3d;

}



.landing-sec .parallax .ptext {
    position: absolute;
    top: 60%;
    left: 67vw;
    transform: translateY(-50%);
    z-index: 6;
    color: #fff;
    font-size: 5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.3rem;
    margin: 0;
    padding: 0;

    background: linear-gradient(90deg, var(--primary-color), var(--text-light));
    background-size: 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: max-content;
    padding-right: 15px;
    display: inline-block;

    opacity: 0;
    
}

.landing-sec .parallax .pstarterText {
    position: absolute;
    top: 40%;
    left: 10vw;
    transform: translateY(-50%);
    z-index: 6;
    color: #fff;
    font-size: 6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.3rem;
    margin: 0;
    padding: 0;

    background: linear-gradient(90deg, var(--primary-color), var(--text-light));
    background-size: 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: max-content;
    padding-right: 15px;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
}

.landing-sec .parallax .pstarterText p {
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: initial;
    letter-spacing: normal;
    margin: 0;
    padding: 0;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    width: 80%;
}

.landing-sec .parallax .textStep1 {
    z-index: 2;
} 

.landing-sec .parallax .textStep2 {
    left: 90vw;
    font-size: 5rem;
    top: 33%;
    white-space: pre;
    line-height: 0.4;
    z-index: 2;
}

.landing-sec .parallax .textStep3 {
    left: 167vw;
    font-size: 5rem;
    top: 50%;
    letter-spacing: 0.1rem;
    z-index: 2;
}

.landing-sec .parallax .pstarter-btn {
    position: absolute;
    top: 85%;
    left: 5vw;
    transform: translateY(-50%);
    z-index: 10;
    color: #fff;
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin: 0;
    padding: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--text-light));
    background-size: 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: max-content;
    padding-right: 15px;
    display: inline-block;
    animation: pstarterShake 3s infinite;
    cursor: pointer;
}

@keyframes pstarterShake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(0);
    }
}

.landing-sec .parallax-up {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
}
.landing-sec .parallax-up .bg {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 1;
}

.landing-sec .parallax-up .bg .cloud {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    transition: 0.5s;
}

.landing-sec .parallax-up .bg .cloud img {
    height: 100vh;
    width: auto;
}

.landing-sec .parallax-up .bg .cloud.left {
    left: -120%;
}

.landing-sec .parallax-up .bg .cloud.right {
    left: 120%;
}

.landing-sec .parallax-up .bg .cloud.active {
    left: 0;
}

.landing-sec .parallax-up .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
    color: #fff;
    z-index: 10001;
    
}

.landing-sec .parallax-up .content h2 {
    color: #fff;
    font-size: 5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.3rem;
    margin: 0;
    padding: 0;

    background: linear-gradient(90deg, var(--primary-color), var(--text-light));
    background-size: 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: max-content;
    opacity: 0;
}

.landing-sec .parallax-up .content h2 img {
    width: 40%;
    height: auto;
    margin-top: 20px;
}


/* landing section responsive */


@media screen and (max-width: 1700px) {
    .landing-sec .parallax .ptext {
        left: 75vw;
        top: 59%;
    }   

    .landing-sec .parallax .textStep2 {
        left: 90vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 170vw;
        top: 50%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -110%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 110%;
    }
}

@media screen and (max-width: 1550px) {
    .landing-sec .parallax .ptext {
        left: 70vw;
        top: 59%;
    }   

    .landing-sec .parallax .textStep2 {
        left: 90vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 170vw;
        top: 50%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -120%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 120%;
    }
}


@media screen and (max-width: 1440px) {
    .landing-sec .parallax .ptext {
        left: 74vw;
        top: 59%;
    }   

    .landing-sec .parallax .textStep2 {
        left: 100vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 190vw;
        top: 50%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -130%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 130%;
    }
}

@media screen and (max-width: 1300px) {
    .landing-sec .parallax .ptext {
        left: 82vw;
        top: 59%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 110vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 210vw;
        top: 50%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -150%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 150%;
    }

    .landing-sec .parallax {
        left: -30%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 5rem;
        left: 40vw;
    }

    .landing-sec .parallax .pstarterText p {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 1220px) {
    .landing-sec .parallax .ptext {
        left: 90vw;
        top: 59%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 120vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 230vw;
        top: 50%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -160%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 160%;
    }
    


}

@media screen and (max-width: 1100px) {
    .landing-sec .parallax .ptext {
        left: 105vw;
        top: 59%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 135vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 255vw;
        top: 50%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -180%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 180%;
    }
}

@media screen and (max-width: 992px) {
    .landing-sec .parallax .ptext {
        left: 115vw;
        top: 59%;
        font-size: 4rem;
    }  

    .landing-sec .parallax .textStep2 {
        left: 165vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 310vw;
        top: 40%;
        transform: rotate(-26deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -200%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 200%;
    }

    .landing-sec .parallax-up .content h2 {
        font-size: 4rem;
    }

    .landing-sec .parallax-up .content h2 img {
        width: 30%;
    }

    .landing-sec .parallax {
        left: -50%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 4rem;
        left: 60vw;
    }

    .landing-sec .parallax .pstarterText p {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 850px) {
    .landing-sec .parallax .ptext {
        left: 130vw;
        top: 59%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 185vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 350vw;
        top: 40%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -220%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 220%;
    }

    .landing-sec .parallax-up .content h2 {
        font-size: 3rem;
    }

    .landing-sec .parallax-up .content h2 img {
        width: 25%;
    }
}

@media screen and (max-width: 768px) {
    .landing-sec .parallax .ptext {
        left: 148vw;
        top: 59%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 210vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 395vw;
        top: 40%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -240%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 240%;
    }
}

@media screen and (max-width: 700px) {
    .landing-sec .parallax .ptext {
        left: 158vw;
        top: 59%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 225vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 420vw;
        top: 40%;
        transform: rotate(-27deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -265%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 265%;
    }

    .landing-sec .parallax {
        left: -70%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 3.5rem;
        left: 80vw;
    }

    .landing-sec .parallax .pstarterText p {
        font-size: 1.3rem;
    }

}

@media screen and (max-width: 675px) {
    .landing-sec .parallax .ptext {
        left: 165vw;
        top: 59%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 230vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 440vw;
        top: 40%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -280%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 280%;
    }

    .landing-sec .parallax {
        left: -80%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 3.5rem;
        left: 90vw;
    }

}

@media screen and (max-width: 645px) {
    .landing-sec .parallax .ptext {
        left: 173vw;
        top: 59%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 245vw;
        top: 33%;
    }

    .landing-sec .parallax .textStep3 {
        left: 460vw;
        top: 40%;
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -300%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 300%;
    }

    .landing-sec .parallax {
        left: -90%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 3.5rem;
        left: 100vw;
    }

    .landing-sec .parallax .pstarterText p {
        font-size: 1.2rem;
    }

}


@media screen and (max-width: 600px) {
    .landing-sec .parallax .ptext {
        left: 188vw;
        top: 60%;
        font-size: 3.5rem;
    }  

    .landing-sec .parallax .textStep2 {
        left: 284vw;
        top: 32%;
    }

    .landing-sec .parallax .textStep3 {
        left: 500vw;
        top: 40%;
        transform: rotate(-25deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -330%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 330%;
    }

    .landing-sec .parallax {
        left: -100%;
    }

    .landing-sec .parallax .pcloud {
        display: none;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 3.5rem;
        left: 115vw;
    }

    .landing-sec .parallax .pstarterText p {
        font-size: 1.1rem;
    }

}

@media screen and (max-width: 560px) {
    .landing-sec .parallax .ptext {
        left: 205vw;
        top: 60%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 300vw;
        top: 32%;
    }

    .landing-sec .parallax .textStep3 {
        left: 540vw;
        top: 40%;
        transform: rotate(-26deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -350%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 350%;
    }

    .landing-sec .parallax {
        left: -110%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 3.2rem;
        left: 135vw;
    }

    .landing-sec .parallax .pstarterText p {
        font-size: 1rem;
    }

}

@media screen and (max-width: 530px) {
    .landing-sec .parallax .ptext {
        left: 215vw;
        top: 60%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 320vw;
        top: 32%;
    }

    .landing-sec .parallax .textStep3 {
        left: 570vw;
        top: 40%;
        transform: rotate(-27deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -370%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 370%;
    }

    .landing-sec .parallax {
        left: -120%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 3rem;
        left: 135vw;
        letter-spacing: -0.1rem;
    }

    .landing-sec .parallax .pstarterText p {
        font-size: 1rem;
    }

    .landing-sec .parallax-up .content h2 {
        font-size: 2.6rem;
    }

    .landing-sec .parallax-up .content h2 img {
        width: 20%;
    }

}

@media screen and (max-width: 500px) {
    .landing-sec .parallax .ptext {
        left: 225vw;
        top: 60%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 340vw;
        top: 32%;
    }

    .landing-sec .parallax .textStep3 {
        left: 610vw;
        top: 40%;
        transform: rotate(-27deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -390%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 390%;
    }

    .landing-sec .parallax {
        left: -125%;
    }



    .landing-sec .parallax-up .content h2 {
        font-size: 2.5rem;
    }

    .landing-sec .parallax-up .content h2 img {
        width: 19%;
    }

}

@media screen and (max-width: 480px) {
    .landing-sec .parallax .ptext {
        left: 240vw;
        top: 60%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 350vw;
        top: 32%;
    }

    .landing-sec .parallax .textStep3 {
        left: 635vw;
        top: 40%;
        transform: rotate(-27deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -400%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 400%;
    }

    .landing-sec .parallax {
        left: -130%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 2.8rem;
        left: 145vw;
    }

    .landing-sec .parallax .pstarterText p {
        font-size: 1rem;
    }

    .landing-sec .parallax-up .content h2 {
        font-size: 2.4rem;
    }

    .landing-sec .parallax-up .content h2 img {
        width: 18%;
    }

}

@media screen and (max-width: 440px) {
    .landing-sec .parallax .ptext {
        left: 255vw;
        top: 60%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 385vw;
        top: 32%;
    }

    .landing-sec .parallax .textStep3 {
        left: 685vw;
        top: 40%;
        transform: rotate(-27deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -430%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 4230%;
    }

    .landing-sec .parallax {
        left: -140%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 2.6rem;
        left: 155vw;
    }

    .landing-sec .parallax-up .content h2 {
        font-size: 2.2rem;
    }

    .landing-sec .parallax-up .content h2 img {
        width: 16%;
    }

}

@media screen and (max-width: 420px) {
    .landing-sec .parallax .ptext {
        left: 270vw;
        top: 60%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 370vw;
        top: 32%;
    }

    .landing-sec .parallax .textStep3 {
        left: 718vw;
        top: 40%;
        transform: rotate(-27deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -450%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 450%;
    }

    .landing-sec .parallax {
        left: -150%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 2.4rem;
        left: 165vw;
    }

    .landing-sec .parallax-up .content h2 {
        font-size: 2rem;
    }

    .landing-sec .parallax-up .content h2 img {
        width: 15%;
    }

}

@media screen and (max-width: 400px) {
    .landing-sec .parallax .ptext {
        left: 285vw;
        top: 60%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 435vw;
        top: 32%;
    }

    .landing-sec .parallax .textStep3 {
        left: 735vw;
        top: 40%;
        transform: rotate(-27deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -470%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 470%;
    }

    .landing-sec .parallax {
        left: -160%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 2.2rem;
        left: 170vw;
    }

    .landing-sec .parallax-up .content h2 {
        font-size: 1.8rem;
    }

    .landing-sec .parallax-up .content h2 img {
        width: 14%;
    }

}

@media screen and (max-width: 380px) {
    .landing-sec .parallax .ptext {
        left: 300vw;
        top: 60%;
    }  

    .landing-sec .parallax .textStep2 {
        left: 460vw;
        top: 32%;
    }

    .landing-sec .parallax .textStep3 {
        left: 800vw;
        top: 40%;
        transform: rotate(-27deg);
    }

    .landing-sec .parallax-up .bg .cloud.left {
        left: -490%;
    }
    
    .landing-sec .parallax-up .bg .cloud.right {
        left: 490%;
    }

    .landing-sec .parallax {
        left: -170%;
    }

    .landing-sec .parallax .pstarterText {
        font-size: 2rem;
        left: 180vw;
    }

    .landing-sec .parallax .pstarterText p {
        font-size: 0.9rem;
    }

    .landing-sec .parallax-up .content h2 {
        font-size: 1.6rem;
        letter-spacing: normal;
    }

    .landing-sec .parallax-up .content h2 img {
        width: 13%;
    }

}

.landing-sec .scrollinfo {
    position: absolute;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    color: var(--text-light);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    animation: bounce 2s infinite;
}

.landing-sec .scrollinfo span {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.landing-sec .scrollinfo i {
    font-size: 1.2rem;
    position: relative;
    left: -5px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-10px) translateX(-50%);
    }
    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

/* scrollinfo responsive */
@media screen and (max-width: 768px) {
    .landing-sec .scrollinfo {
        top: auto;
        bottom: 150px;
    }
}

@media screen and (max-width: 480px) {
    .landing-sec .scrollinfo {
        bottom: 100px;
    }

    .landing-sec .scrollinfo span {
        font-size: 1rem;
    }

    .landing-sec .scrollinfo i {
        font-size: 1rem;
    }
}