@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

.carousel { 
    width: 100vw; 
    height: 100vh; 
    margin-top: -50px; 
    overflow: hidden; 
    position: relative; 
}
    .carousel .list .item { 
        width: 180px; 
        height: 250px; 
        position: absolute; 
        top: 80%; 
        transform: translateY(-70%); 
        left: 70%; 
        border-radius: 20px; 
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
        background-position: 50% 50%;
        background-size: cover;
        z-index: 100;
        transition: 1s;
    }
        .carousel .list .item:nth-child(1), .carousel .list .item:nth-child(2) { top: 0; left: 0; transform: translate(0, 0); border-radius: 0; width: 100%; height: 100%; }
        .carousel .list .item:nth-child(3) { left: 107%; }
        .carousel .list .item:nth-child(4) { left: calc(67% + 200px); }
        .carousel .list .item:nth-child(5) { left: calc(67% + 400px); }
        .carousel .list .item:nth-child(6) { left: calc(67% + 600px); }
        .carousel .list .item:nth-child(n + 7) { left: calc(67% + 800px); opacity: 0; }
            .item .content { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); width: 100%; text-align: left; color: #FFFFFF; display: none; padding-right: 200px; }
            .list .item:nth-child(2) .content { display: block; }
                .content .title { font-size: 50px; text-transform: uppercase; color: #ffffff; font-weight: bold; line-height: 1; opacity: 0; animation: animate 1s ease-in-out .3s 1 forwards; }
                .content .lastLine { font-size: 20px; text-transform: uppercase; color: #ffffff; font-weight: 600; line-height: 1; opacity: 0; animation: animate 1s ease-in-out .8s 1 forwards;}
                .content .name { font-size: 100px; text-transform: uppercase; font-weight: bold; line-height: 1; text-shadow: 3px 4px 4px #03ad31da; opacity: 0; animation: animate 1s ease-in-out .6s 1 forwards; color: #14FF72; }    
                .content .des { margin-top: 10px; margin-bottom: 20px; font-size: 18px; margin-left: 5px; opacity: 0; animation: animate 1s ease-in-out .9s 1 forwards; width: 60%;}
                .content .btn { margin-left: 5px; opacity: 0; animation: animate 1s ease-in-out 1.2s 1 forwards; }
                    @keyframes animate {
                        from { opacity: 0; transform: translate(0, 100px); filter: blur(33px); }
                        to { opacity: 1; transform: translate(0); filter: blur(0); }
                    }
                    .content .btn button { padding: 10px 20px; border: none; cursor: pointer; font-size: 16px; border: 2px solid #FFFFFF; }
                        .content .btn button:nth-child(1) { margin-right: 15px; }
                        .content .btn button:nth-child(1) { background: rgba(43, 43, 43, 0.462); color: #14ff72; border: 2px solid #FFFFFF; transition: .3s; }
                            .content .btn button:nth-child(2):hover { background: #14FF72CB; color: #FFFFFF; border-color: #14FF72CB; }
.arrows { position: absolute; top: 80%; right: 52%; z-index: 100; width: 300px; max-width: 30%; display: flex; gap: 10px; align-items: center; }
    .arrows button { width: 50px; height: 50px; border-radius: 50%; background-color: #14FF72CB; color: #FFFFFF; border: none; outline: none; font-size: 16px; font-family: monospace; font-weight: bold; transition: .5s; cursor: pointer; }
        .arrows button:hover { background: #FFFFFF; color: #000000; }
        .carousel .timeRunning { position: absolute; z-index: 1000; width: 0%; height: 4px; background-color: #14FF72CB; left: 0; top: 0; animation: runningTime 7s linear 1 forwards; }
            @keyframes runningTime {
                from { width: 0%; }
                to { width: 100%; }
            }
    


@media screen and (max-width: 999px) {
    .list .item .content { left: 50px; }
        .content .name  { font-size: 70px; }
        .content .title{ font-size: 40px; }
        .content .des { font-size: 16px;}
}

@media screen and (max-width: 690px) {
    .carousel { height: 60vh; }
    .list .item .content { top: 55%; }
        .content .title { font-size: 25px; }
        .content .name { font-size: 45px; }
        .content .btn button { padding: 10px 15px; font-size: 14px; }
}

@media screen and (max-width: 450px) {
    .item .content { width: 300px; padding-right: 1px; }
    .list .item .content { left: 20px; }
}




















/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

.carousel { 
    width: 100vw; 
    height: 100vh; 
    margin-top: -50px; 
    overflow: hidden; 
    position: relative; 
}
    .carousel .list .item { 
        width: 180px; 
        height: 250px; 
        position: absolute; 
        top: 80%; 
        transform: translateY(-70%); 
        left: 70%; 
        border-radius: 20px; 
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
        background-position: 50% 50%;
        background-size: cover;
        z-index: 100;
        transition: 1s;
    }
        .carousel .list .item:nth-child(1), .carousel .list .item:nth-child(2) { top: 0; left: 0; transform: translate(0, 0); border-radius: 0; width: 100%; height: 100%; }
        .carousel .list .item:nth-child(3) { left: 107%; }
        .carousel .list .item:nth-child(4) { left: calc(67% + 200px); }
        .carousel .list .item:nth-child(5) { left: calc(67% + 400px); }
        .carousel .list .item:nth-child(6) { left: calc(67% + 600px); }
        .carousel .list .item:nth-child(n + 7) { left: calc(67% + 800px); opacity: 0; }
            .item .content { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); width: 100%; text-align: left; color: #FFFFFF; display: none; padding-right: 200px; }
            .list .item:nth-child(2) .content { display: block; }
                .content .title { font-size: 50px; text-transform: uppercase; color: #ffffff; font-weight: bold; line-height: 1; opacity: 0; animation: animate 1s ease-in-out .3s 1 forwards; }
                .content .lastLine { font-size: 20px; text-transform: uppercase; color: #ffffff; font-weight: 600; line-height: 1; opacity: 0; animation: animate 1s ease-in-out .8s 1 forwards;}
                .content .name { font-size: 100px; text-transform: uppercase; font-weight: bold; line-height: 1; text-shadow: 3px 4px 4px #03ad31da; opacity: 0; animation: animate 1s ease-in-out .6s 1 forwards; color: #14FF72; }    
                .content .des { margin-top: 10px; margin-bottom: 20px; font-size: 18px; margin-left: 5px; opacity: 0; animation: animate 1s ease-in-out .9s 1 forwards; width: 60%;}
                .content .btn { margin-left: 5px; opacity: 0; animation: animate 1s ease-in-out 1.2s 1 forwards; }
                    @keyframes animate {
                        from { opacity: 0; transform: translate(0, 100px); filter: blur(33px); }
                        to { opacity: 1; transform: translate(0); filter: blur(0); }
                    }
                    .content .btn button { padding: 10px 20px; border: none; cursor: pointer; font-size: 16px; border: 2px solid #FFFFFF; }
                        .content .btn button:nth-child(1) { margin-right: 15px; }
                        .content .btn button:nth-child(1) { background: rgba(43, 43, 43, 0.462); color: #14ff72; border: 2px solid #FFFFFF; transition: .3s; }
                            .content .btn button:nth-child(2):hover { background: #14FF72CB; color: #FFFFFF; border-color: #14FF72CB; }
.arrows { position: absolute; top: 80%; right: 52%; z-index: 100; width: 300px; max-width: 30%; display: flex; gap: 10px; align-items: center; }
    .arrows button { width: 50px; height: 50px; border-radius: 50%; background-color: #14FF72CB; color: #FFFFFF; border: none; outline: none; font-size: 16px; font-family: monospace; font-weight: bold; transition: .5s; cursor: pointer; }
        .arrows button:hover { background: #FFFFFF; color: #000000; }
        .carousel .timeRunning { position: absolute; z-index: 1000; width: 0%; height: 4px; background-color: #14FF72CB; left: 0; top: 0; animation: runningTime 7s linear 1 forwards; }
            @keyframes runningTime {
                from { width: 0%; }
                to { width: 100%; }
            }
    
@media screen and (max-width: 999px) {
    .list .item .content { left: 50px; }
        .content .name  { font-size: 70px; }
        .content .title{ font-size: 40px; }
        .content .des { font-size: 16px;}
}

@media screen and (max-width: 690px) {
    .carousel { height: 60vh; }
    .list .item .content { top: 55%; }
        .content .title { font-size: 25px; }
        .content .name { font-size: 45px; }
        .content .btn button { padding: 10px 15px; font-size: 14px; }
}

@media screen and (max-width: 450px) {
    .item .content { width: 300px; padding-right: 1px; }
    .list .item .content { left: 20px; }
} */