@font-face{
    font-family: font7;
    src: url(Assest/ElgocAlt-Medium.ttf);
}
@font-face{
    font-family: font3;
    src: url(Assest/PlaywriteBEVLG-Regular.ttf);
}
@font-face{
    font-family: font4;
    src: url(Assest/Pacifico-Regular.ttf);
}
::selection{
    background-color: transparent;
    color: #27E0B3;
    color: #27e0b20c;
}
::-webkit-scrollbar{
    display: none;
}
.web{
    -webkit-background-clip: text;
    background-image: url(https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExYW56OHh5c3VobzZkaWg1amw0OGlsNXpoOGk1dTl5bGEzZGo2c2M3YSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3oz8xMzrtZHrqMjxNS/giphy.webp);
}

.web2{
    -webkit-background-clip: text;
    background-image: url(https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExYW56OHh5c3VobzZkaWg1amw0OGlsNXpoOGk1dTl5bGEzZGo2c2M3YSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/3oz8xMzrtZHrqMjxNS/giphy.webp);
}

nav{
    background-color: rgba(255, 255, 255, 0.022);
}
.insta:hover{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
}
.hover{
    transition: all ease 0.5s;
}

a h3,a h1{
    transition: all ease 0.5s;
}

#loader{
transition: all ease 0.7s;
}

#loader h1{
-webkit-background-clip: text;
animation-name: load;
animation-duration: 1s;
animation-delay: 1s;
animation-timing-function: linear;
}
#loader h1:nth-child(2){
animation-delay: 2s;
}
#loader h1:nth-child(3){
animation-delay: 3s;
}

#cursor-blur{
filter: blur(50px);
transition: all ease 0.08s;
} 
@keyframes load {
0%{
opacity: 0;
}
10%{
opacity: 1;
}
90%{
opacity: 1;
}
100%{
opacity: 0;
}
}

#typed-text::after {
    content: '|';
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

@media (max-width:499px) {
#loader h1{
font-size: 12vw;
}
.slides{
    gap: 0vh;
}
.slide{
    gap: 0vh;
    width: 300%;
}

.slide-img{
    width: 100vw;
}

}

.slides{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap :2vh;
width: 100%;
height: 100vh;
rotate: -20deg;
}
.slide{
display: flex;
align-items: center;
justify-content: center;
gap: 2vh;
height: 40vh;
width: 250%;
}
.slide-img{
display: flex;
align-items: center;
justify-content: center;
width: 30vw;
height: 100%;
border-radius: 20px;
overflow: hidden;
}
.overlay{
width: 100%;
height: 100%;
position: absolute;
background-image: url(Assest/noise.png);
}
.slide1,.slide3{
transition: all ease 0.5s;
}
.slide2,.slide4{
transition: all ease 0.8s;
}

#effect1,#effect2,#effect3{
    background-color: #ffffff0c;
    transform: scale(1);
}

.img{
    transform-origin: top;

}

#imgTwo{
    transform: perspective(1000px) rotateX(-90deg);
}
#imgThree{
    transform: perspective(1000px) rotateX(-90deg);
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling if needed */
}

body {
    min-height: 100vh; /* Ensure body is at least as tall as the viewport */
    font-family: 'Inter', sans-serif;
}

.main {
    /* If you want the main content to be taller than the viewport */
    min-height: 100vh;
}


.loader-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 2px;
}

.progress-bar {
    transition: width 0.5s ease-out;
}


#loader {
    transition: opacity 0.5s ease-out;
}

.progress-bar {
    transition: width 0.2s ease-out;
}