@font-face {
    font-family: s2;
    src: url('s2.woff2');
}

*{
    font-family: s2;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
}


body,html{
    height: 100vh;
    width: 100vw;
    overflow-x: hidden !important;
    direction: rtl;
}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 2rem;
    background-color: hsla(0,0%,100%,.3);
    transition:background-color 1s ease
    
         
}

.slider{
    height: 100vh;
    width: 100vw;
    justify-self: center;
    position: relative;
    border: 1px solid #000;
    overflow: hidden;
   
}
.slider img{

    height: 100vw;
    width: 100vw;
  position: absolute; 
object-fit: cover;
aspect-ratio: 16/9;

}
.include{
    width: 100%;;
    height: 100vh;

    /* animation: slide 20s infinite ease-in-out; */
}

/* @keyframes slide{
    0% {background-image: url("1.webp");}
    33% {background-image: url("2.jpg");}
    66% {background-image: url("1.webp");}
    100% {background-image: url("2.jpg");}
} */

.logo{
    max-width: 100px;;
    width: 100%;
    height: auto;
}
.bt{
    display: flex;
    gap:30px;
  
}


.sell{   
        cursor: pointer;
    max-width: 130px;
    width: 100%;
    height: 48px;
    border-radius: 8px;
 font-size: 13px;

    background-color: #25d218;
}

.intro{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 20px;
    transform: translate(0,70%);
    padding-right: 60px;
       background-color: #f7eded;
       width: fit-content;
       border-radius: 15px;
       opacity: 0.9;
}

.intro h1,h2{
    z-index: 99;
    width: 450px;
  
    color: #11ba05;
    position: relative;
   

}

.intro h1{
    margin-bottom: 2rem;
}
.show{
    opacity: 1;
}
.transtion{
    transition: 1s ease-in-out;
}
.hide{
    opacity: 0;
}