@charset "utf-8";
/* CSS Document */

.hero-slider{
    position:relative;
    width:100%;
    height:500px;
    overflow:hidden;
}

.hero-slider .slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 1s ease;
}

.hero-slider .slide.active{
    opacity:1;
    z-index:1;
}

.hero-slider img{
    width:100%;
    height:100%;
    object-fit:cover;
    animation:zoomEffect 8s ease-in-out infinite;
}

@keyframes zoomEffect{
    0%{
        transform:scale(1);
    }
    100%{
        transform:scale(1.15);
    }
}

.slide-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.45);

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

    text-align:center;
    color:#fff;
    padding:20px;
}

.slide-overlay h1{
    font-size:60px;
    margin-bottom:15px;
    text-shadow:0 3px 10px rgba(0,0,0,.4);
}

.slide-overlay p{
    font-size:24px;
    max-width:700px;
}

.slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.3);
    color:#fff;
    font-size:26px;
    cursor:pointer;
    z-index:10;
    backdrop-filter:blur(5px);
}

.slider-btn:hover{
    background:rgba(255,255,255,.6);
}

.prev{
    left:25px;
}

.next{
    right:25px;
}

.slider-dots{
    position:absolute;
    bottom:25px;
    width:100%;
    text-align:center;
    z-index:10;
}

.dot{
    width:14px;
    height:14px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    display:inline-block;
    margin:0 6px;
    cursor:pointer;
}

.dot.active{
    background:#fff;
    transform:scale(1.2);
}

@media(max-width:768px){

    .hero-slider{
        height:450px;
    }

    .slide-overlay h1{
        font-size:32px;
    }

    .slide-overlay p{
        font-size:16px;
    }
	
}

/*animasi welcom to my web*/

.welcome-banner{
	animation:fadeZoom 2s ease;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    
    z-index:20;
    
    text-align:center;
    color:#fff;
    
    width:90%;
}

.welcome-banner h1{
    font-size:36px;
	font-family:"Comic Sans MS", cursive;
    margin-bottom:15px;
    text-shadow:2px 2px 10px rgba(0,0,0,0.5);
}

.welcome-banner p{
    font-size:24px;
    text-shadow:1px 1px 8px rgba(0,0,0,0.5);
	text-align: right;
}

.typing-text{
    display:inline-block;
    overflow:hidden;
    border-right:4px solid #ffffff;
    white-space:nowrap;

    animation:
        typing 5s steps(35,end),
        blink 0.8s linear infinite;
}

@keyframes typing{
    from{
        width:0;
    }
    to{
        width:100%;
    }
}

@keyframes blink{
    50%{
        border-color:transparent;
    }
}

@media(max-width:768px){

    .welcome-banner h1{
        font-size:24px;
    }

    .welcome-banner p{
        font-size:16px;
    }

}	
@keyframes fadeZoom{
    from{
        opacity:0;
        transform:translate(-50%,-50%) scale(0.8);
    }

    to{
        opacity:1;
        transform:translate(-50%,-50%) scale(1);
    }
}