style.css

body{
    background-color:#000000;
    color:white;
    font-family: "Bebas Neue", sans-serif;
    overflow-x: hidden;
    padding:10px;
}
.nav{
    display:flex;
    justify-content: end;
    gap:30px;
    flex-basis: 1;
}
.navSections{
    margin-top:10px;
}
a{
    text-decoration: none;
    color:#d3d3d3;
}
.navButton{
    padding:10px 20px 10px 20px;
    background-color:black;
    border:2px solid green;
    border-radius:20px;
    color:#d3d3d3;
    box-shadow:2px 2px 8px #77ff00;
}
.relative_heading{
    position:absolute;
    inset:350px 0px 0px 500px;
}
.heading{
    postion:absolute;
    inset:10px 0px 0px 0px;
    font-size: 500%;
    z-index: 1;
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    /* border-right:2px solid #fffbfb; */
    animation:
    typing  3s steps(29);
}
span{
    padding:2px;
    animation:blinking 2s steps(3, start) infinite;
}
@keyframes typing {
    0%{
        width:0%;
        border-right:2px solid white;
    }
    95%{
        border-right:2px solid white;
    }
    100%{
        width:100%;
        border-right:0px solid transparent;
    }
}
@keyframes blinking{
    50%{
        visibility:visible;
    }
    100%{
        visibility: hidden;
    }
}
.heading::after{
    position:absolute;
    inset:66px 0px 0px 0px;
    content:attr(data-content);
    z-index:2;
    /* color:#d3d3d34c */
    -webkit-text-stroke:1px #ffffff;
    color:transparent;
}
.border_right{
    display:inline-block;
}
.responsive-video{
width: 100%;
height: auto;
max-width: 100%;
display: block;
overflow:hidden;
}

.video-container {
position: relative;
width: 50%;
height: auto;
overflow: hidden;
padding: 0;
margin: auto;
z-index: ins;
}

.slider_portfolio_heading{
    font-size: 80px;
    text-align: center;
}
.constainer{
    padding:2rem;
}
.slider_wrapper{
    position:relative;
    max-width:78rem;
    margin:0 auto;
}
.slider{
    display:flex;
    height:80vh;
    width: 1300px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior: smooth;
    box-shadow:0.15rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
    border-radius:0.8rem;
    -ms-overflow-style:none;
    scrollbar-width:none;
}
.slider::-webkit-scrollbar {
	display: none;
}

.slider img {
	flex: 1 0 100%;
	scroll-snap-align: start;
	object-fit: cover;
}

.slider-nav {
	display: flex;
	column-gap: 1rem;
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.slider-nav a {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: #fff;
	opacity: 0.75;
	transition: opacity ease 250ms;
}

.slider-nav a:hover {
	opacity: 1;
}