:root{
    --green: #00C07F;
    --dark: #1C1C21;
    --black: #0D0D0F;
    --white: #fff;
    --text: #B8B8C7;
}
.wel-main{
    font-family:'Inter',sans-serif;
    height:100vh;
    overflow:hidden;
    position: relative;
    background: var(--black);
    display:flex;
    justify-content:center;
    align-items:center;

    .app{
        max-width: 450px;
        width: 100%;
        height: 100%;
        overflow:hidden;
        position:relative;
        background:#111;
        box-shadow:
        0 40px 90px rgba(0,0,0,.7),
        inset 0 0 0 1px rgba(255,255,255,.04);
    }

    .slides{
        width:100%;
        height:100%;
        display:flex;
        transition:0.8s cubic-bezier(.77,0,.18,1);
    
        .slide{
            min-width:100%;
            height:100%;
            position:relative;
            overflow:hidden;
    
            &:nth-child(1){
                background:
                linear-gradient(145deg,#1A1A1F,#0D0D0F);
            }
            &:nth-child(2){
                background:
                linear-gradient(145deg,#141417,#101113);
            }
            &:nth-child(3){
                background:
                linear-gradient(145deg,#16181A,#0C0D0E);
            }
        }
        .hero{
            height: 90%;
            bottom:170px;
            left:50%;
            width:118%;
            object-fit:cover ;
            filter: drop-shadow(0 20px 35px rgba(0,0,0,.65));
            animation:float 4s ease-in-out infinite;
        }
        @keyframes float{
            0%{transform:translateX(-50%) translateY(0px);}
            50%{transform:translateX(-50%) translateY(-10px);}
            100%{transform:translateX(-50%) translateY(0px);}
        }
        .overlay{
            position:absolute;
            inset:0;
            background:
            linear-gradient(to top,
            rgba(0,0,0,.88) 12%,
            rgba(0,0,0,.2) 50%,
            transparent 75%);
        }
    }
    
    
    .content{
        position:absolute;
        left:28px;
        right:28px;
        bottom:38px;
        color:white;
    
        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            background:rgba(0,192,127,.12);
            border:1px solid rgba(0,192,127,.35);
            color:var(--green);
            padding:10px 14px;
            border-radius:40px;
            font-size:12px;
            font-weight:700;
            letter-spacing:.5px;
            margin-bottom:20px;
            backdrop-filter:blur(10px);
        
            .pulse{
                width:8px;
                height:8px;
                background:var(--green);
                border-radius:50%;
                box-shadow:0 0 12px var(--green);
            }
        }
        
        h1{
            font-size:2.3rem;
            line-height:1;
            margin-bottom:16px;
            font-weight:800;
            letter-spacing:-1.5px;
        }
        
        p{
            color:var(--text);
            line-height:1.7;
            font-size:14px;
            max-width:250px;
        }
        
        .bottom{
            margin-top:30px;
            display:flex;
            justify-content:space-between;
            align-items:center;
        
            .pagination{
                display:flex;
                gap:8px;
            
                span{
                    width:9px;
                    height:9px;
                    border-radius:50%;
                    background:rgba(255,255,255,.2);
                    transition:.4s;
                    
                    &.active{
                        width:30px;
                        border-radius:30px;
                        background:var(--green);
                        box-shadow:0 0 18px rgba(0,192,127,.7);
                    }
                }
            }
        }
        
        .actions{
            display:flex;
            align-items:center;
            gap:12px;
        
            .skip-btn{
                color:#aaa;
                font-size:14px;
                font-weight:600;
                cursor:pointer;
                transition:.3s;
            
                &:hover{
                    color:white;
                }
            }
            .next-btn{
                width:54px;
                height:54px;
                border-radius:50%;
                background:var(--green);
                border:none;
                color:#fff;
                font-size:22px;
                cursor:pointer;
                display:flex;
                align-items:center;
                justify-content:center;
                transition:.3s;
                box-shadow:0 10px 30px rgba(0,192,127,.35);
                
                &:hover{
                    transform:scale(1.08);
                }
            }
        }
    }

    .final-screen{
        position:absolute;
        inset:0;
        pointer-events:none;
        transition:.7s;
        background: lightblue url("../images/1663022793.png") no-repeat fixed center;
        opacity:0;
    
        .final-img-bg{
            padding:30px 30px 100px 30px;
            width: 100%;
            height: 100%;
            position: relative;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:end;
            gap:20px;
            text-align:center;
            background:radial-gradient(circle at top,rgba(0, 192, 128, 0.12),transparent 50%),linear-gradient(145deg, #000000c3, #14141acd);
        }
    
        .logo{
            width:90px;
            height:90px;
            border-radius:28px;
            background:
            linear-gradient(145deg,
            rgba(0,192,127,.2),
            rgba(0,192,127,.05));
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:2.4rem;
            color:var(--green);
            box-shadow:0 0 40px rgba(0,192,127,.2);
        }
        h2{
            font-size:2rem;
            color:white;
            font-weight:800;
        }
        p{
            max-width:260px;
            color:white;
        }
    
        .start-btn{
            margin-top:10px;
            width:100%;
            padding:18px;
            border:none;
            border-radius: 10px;
            background:var(--green);
            color:white;
            font-size:16px;
            font-weight:700;
            cursor:pointer;
            transition:.3s;
            text-decoration: none;
        
            &.log-in{
                background: none;
                margin-top: 5px;
                border: 1px solid var(--green);
                color: var(--green)
            }
        
            &:hover{
                transform:translateY(-2px);
            }
        }
    
        &.active{
            opacity:1;
            pointer-events:auto;
            z-index: 2;
        }
    }
}