*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif
}


.oxa{
    font-family: 'Oxanium', sans-serif;
}

html{
    scroll-behavior: smooth;
}

/* navigator */

.nav{
    width: 100%;
    background-color: rgba(0, 0, 2, 1);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: sticky;
    z-index: 30;
}

.logo a{
    text-decoration: none;
    color: rgba(254, 209, 38, 1);
    font-weight: 700;
    text-transform: uppercase;
}

.logo a span{
    color: white;
    font-weight: 300;
}

.meniu{
    display: flex;
    gap: 10px;
    display: none;
    align-items: center


}

.meniu a{
    text-decoration: none;
    text-transform: uppercase;
    color: rgba(148, 148, 148, 1);
    font-family: 'Oxanium', sans-serif;
}

 .h{
    font-weight: 700;
 }

.line{
    width: 1px;
    height: 17px;
    background-color: rgba(148, 148, 148, 1);
}

.socials{
    display: flex;
    
    gap: 25px;
    display: none;
}

.socials i{
    color: white;
}

.secret-meniu{
    color: white;
}

/* bg-hero  */

.hero-text{
    position: relative;
}

.bg {
    position: absolute;
    width: 100%;
    height: 900px;
    background: url('/works/-GearSpin--website-UI-UX---main/01_project-GearSpin/img/bike1 1.png') center/cover no-repeat;
    z-index: -10;  
    overflow-x: hidden;
    filter: brightness(40%);
    background-color: black;
}

.hero-text{
    padding: 70px 20px;

}

.ht1 {
    max-width: 550px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.ht1 h1{
 color: white;
 text-transform: uppercase;
}

.ht1 p{
    color: white;
    text-align: center;
}

.ht1 button{
border: 1px solid white;
color: white;
background-color: transparent;
padding: 5px 10px;
border-radius: 10px;
cursor: pointer;
}

.ht2 {
    max-width: 550px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 80px;
}

.ht2 h1{
 color: white;
 text-transform: uppercase;
}

.ht2 p{
    color: white;
    text-align: center;
}

.ht2 button{
border: 1px solid white;
color: white;
background-color: transparent;
padding: 5px 10px;
border-radius: 10px;
cursor: pointer;
}

.main-text{
    font-size: 35px;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
    text-transform: uppercase;
}

.main-text h1{
    color: rgba(254, 209, 38, 1);
    font-weight: 700;
    font-family: 'Oxanium', sans-serif;
}
.main-text span {
    color: white;
    font-weight: 300;
    font-family: 'Oxanium', sans-serif;
}

.insp{
    width: 100%;
    height: 200px;
    background-color: black;
    color: white;
    margin-top: 8px;
    padding: 20px;
    text-align: center;
}

.insp p{
    color: rgba(148, 148, 148, 1);
    font-family: 'Oxanium', sans-serif;
}


/* <!-- top3 --> */

.title1 h1{
text-transform: uppercase;
font-family: 'Oxanium', sans-serif;
text-align: center;
margin-top: 50px;
margin-bottom: 40px;
}

.bikes{
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.bike{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.bike p{
font-size: 30px;
font-family: 'Oxanium', sans-serif;
}

.bike img{
    width: 330px;
}

.bike button{
    border: 1px solid black;
    color: black;
    background-color: transparent;
    padding: 5px 10px;
    border-radius: 10px;
    margin-top: 20px;
    cursor: pointer;
}


.bike button::hover{
    color: black;
    background-color: white;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
 }

/* <!-- Trends --> */

.trend{
    background-color: black;
    padding: 20px;
    margin-top: 40px;
}

.trend-text h1{
    color: white;
    text-transform: uppercase;
    color: rgba(254, 209, 38, 1);
}

.trend-text p{
    color: rgba(148, 148, 148, 1);
    margin-bottom: 10px;
}

 

.but1 {
    border: 1px solid black;
    color: black;
    background-color: rgba(254, 209, 38, 1);
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
    }

    .but2 {
        border: 1px solid black;
        color: black;
        background-color: white;
        padding: 5px 10px;
        border-radius: 10px;
        cursor: pointer;
        }

.fa-bolt{
    color: rgba(254, 209, 38, 1); 
    font-size: 25px;
}

.filter{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.part-two img{
    width: 300px;
}
.trending-img{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.trending-img img{
    width: 300px;
}

/* <!-- modern soliution  --> */

.modern{
    background-color: white;
    padding: 0 20px;
}

.modern-tite{
    font-family: 'Oxanium', sans-serif;
    text-align: center;
    text-transform: uppercase;
    margin-top: 50px;
}

.mod3{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.mod3 img{
    width: 300px;
}

.m1{
    text-align: end;
}

.m1 h2{
    text-transform: uppercase;
}

.m2{
    text-align: start;
}

.m2 h2{
    text-transform: uppercase;
}

/* <!-- features --> */

.feat{
    background-color: rgba(17, 17, 17, 1);
}

.fiat-title{
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 20px;
}

.fiat-title1{
    font-family: 'Oxanium', sans-serif;
    text-align: center;
    text-transform: uppercase;
    margin-top: 50px;
    color: rgba(254, 209, 38, 1);
}

.feat p{
    color: rgba(148, 148, 148, 1);
    text-align: center;
    margin-top: 10px;
}

.allfiat{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px;
    gap: 10px;
}

.feat01{
    background-color: black;
}

.feat01 img{
    width: 300px;
}

.feat01 h1{
    color: rgba(254, 209, 38, 1);
    padding-left: 10px;
}

.feat01 p{
    padding: 10px 20px;
    text-align: start;
}


.feat02{
    background-color: rgba(254, 209, 38, 1);
}

.feat02 img{
    width: 300px;
}

.feat02 h1{
    color: black;
    padding-right: 10px;
    text-align: end;
}

.feat02 p{
    padding: 10px 20px;
    text-align: end;
    color: white;
}

.navi img{
    position: absolute;
    width: 100%;
    z-index: 1;
}

.navi h1{
    position: relative;
    z-index: 10;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-family: 'Oxanium', sans-serif;
}

.navi p{
    position: relative;
    z-index: 10;
    color: white;
}

.navi{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 30vh;
    background: url('/img/gps\ 1.png') center/cover no-repeat;
    z-index: -10;  
    overflow-x: hidden;
    filter: brightness(90%)
}

 /* <!-- accessories --> */

 .acc{
    display: flex;
    justify-content: center;
    margin: 20px 0;
 }

 .acc h1{
    color: white;
    font-family: 'Oxanium', sans-serif;
    text-transform: uppercase;
 }

 
.prod01{
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 10px;
    width: 320px;
    height: 600px;
    background-color: white;
}
.prod01 img{
    width: 300px;
 }

.prod01 p{
    color: black;
    font-weight: 700;
    font-size: 26px;

}

.prod02{
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin-bottom: 10px;
    width: 322px;
    height: 285px;
    background-color: white;
}
.prod02 img{
    width: 300px;
 }

.prod02 p{
    color: black;
    font-weight: 700;
    font-size: 26px;

}

.access{
    display: flex;
    flex-direction: column;
    align-items: center;
 
}

.read button{
    border: 1px solid white;
    color: white;
    background-color: transparent;
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
    }

.read{
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-bottom: 50px;
}

.hid{
    display: none;
}

/* <!-- footer --> */

.allfooter{
    background-color: black;
    padding: 20px;
}

.search p{
    color: rgba(148, 148, 148, 1);
}

.email input{
    padding: 5px 15px;
    border-radius: 7px;
    border: transparent;
}

.email{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 13px 0;
    justify-content: center;
}

.fa-paper-plane{
    border: 0px solid white;
    background-color: white;
    padding: 8px;
    border-radius: 7px;
    color: rgba(148, 148, 148, 1);
}

.latest p{
    color: rgba(254, 209, 38, 1);
    font-weight: 700;
}

.second-s{
    margin-top: 25px;
}

.latest a{
    text-decoration: none;
    color: rgba(148, 148, 148, 1);
}

.latest{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.soc-footer i{
    color: white;
}

.second-s{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.first-s{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;  
}

.line1{
    width: 95%;
    height: 2px;
    background-color: rgba(148, 148, 148, 1);
    margin-top: 5px;
}

.bottom p{
    color: rgba(148, 148, 148, 1);
}

.bottom a{
    color: rgba(254, 209, 38, 1);
    text-decoration: none;
}

.bottom{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; 
    background-color: black;
}

.burger-meniu{
    position: fixed;
    background-color: black;
    right: 0;
    height: 900px;
    width: 60%;
    padding: 30px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
     gap: 10px;
     opacity: 1;  
     transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
     transform: translateX(0);
     margin-top: -50px;
    
}

.visible{
    transform: translateX(100%);
    opacity: 0; 
    visibility: hidden;
}
 

.burger-meniu a{
    text-decoration: none;
    color: rgba(148, 148, 148, 1);
    text-transform: uppercase;
    font-size: 25px;
}

.burger-meniu a:hover{
    color: rgba(254, 209, 38, 1);
}

.fa-rectangle-xmark{
    color: rgba(148, 148, 148, 1);
    font-size: 40px;
    margin-top: 50px;
    cursor: pointer;
}

.fa-bars-staggered{
    cursor: pointer;
    font-size: 21px;
}

body{
    overflow-x: hidden;
}

.meniu a:hover{
    font-weight: 700;
    transition: 0.5s;
}
.socials i{
    padding: 3px;
}

.socials i:hover{
    transform: translateY(-10px);
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.logo a:hover{
    color: white;
    transition: 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
 
 .ht2 button:hover{
    color: black;
    background-color: white;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
 }

 .ht1 button:hover{
    color: black;
    background-color: white;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
 }




@media only screen and (min-width: 600px) {
    .main-text{
        font-size: 60px;
    }

    .hero-text{
        display: flex;
    }

    .insp{
        margin-top: 208px;
    }
  }

  @media only screen and (min-width: 768px) {
    .main-text{
        font-size: 80px;
    }
    .ht2{
        margin-top: 0;
    }
    .ht1 h1,
    .ht2 h1{
        color:rgba(254, 209, 38, 1);
    }

    .bikes{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

    .filter{
        display: flex;
        flex-direction: row;
        gap: 30px;
        justify-content: center;
        margin-bottom: 40px;
    }

    .trending-img{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 8px;
    }

    .trending-img img:first-child{
        width: 405px;
    }

    .mod3{
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }
    .modern-tite{
        font-size: 65px;
    }
    .allfiat{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .access{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .prod-small{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }
    .prod-small{
        width: 319px;
    }
   
    .second-s{
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 30px;
    }

    .latest{
        align-items: flex-start;
    }
 
  }

  @media only screen and (min-width: 1024px) {
    .meniu{
        display: flex;
    }
    .socials{
        display: flex;
    }

    .secret-meniu{
        display: none;
    }
    .main-text {
        font-size: 105px;
    }

    .ht1 {
        align-items: start;
        max-width: 343px;
    }

    .ht1 p {
        text-align: start;
    }
    .ht2 {
        align-items: end;
        max-width: 357px;
    }

    .ht2 p {
        text-align: end;
    }
    .hero-text{
        justify-content: space-between;
    }
   
    .part-one{
        width: 625px;
    }
    .trend-text h1{
        margin-bottom: 50px;
    }

    .buttons{
        display: flex;
        gap: 15px;
    }
    .trending-img img:first-child{
        width: 640px;
    }
    
    .m1{
        width: 300px;
    }
    .m1 h2{
        font-size: 32px;
    }

    .m2{
        width: 300px;
    }
    .m2 h2{
        font-size: 32px;
    }
    .mod3{
        justify-content: center;
    }

    .hid{
        display: flex;
    }
    .prod-small{
        width: 668px;
    }

  .allfooter{
    display: flex;
    justify-content: center;
    gap: 80px;
  }

  .first-s{
    width: 374px;
    align-items: start;
    text-align: start;
  }

  .email{
    justify-content: start;
  }
    
  }

  @media only screen and (min-width: 1280px) {
    .hero-text{
        justify-content: space-around;
    }
    .ht2 p {
        color: rgba(148, 148, 148, 1);
    }
    .ht1 p {
        color: rgba(148, 148, 148, 1);
    }
    .ht2 button {
        color: rgba(148, 148, 148, 1);
        border: 1px solid rgba(148, 148, 148, 1);
    }
    .ht1 button {
        color: rgba(148, 148, 148, 1);
        border: 1px solid rgba(148, 148, 148, 1);
    }
    .main-text {
        font-size: 135px;
    }

    .hero-text {
        padding-top: 150px;
    }

    .bg {
        filter: brightness(100%)
        }

    .insp{
        margin-top: 153px;
        height: 67px;
    }

    .bikes{
       gap: 72px;     
    }

    .part-two img{
        width:365px;
    }

    .trending-img img:first-child{
        width: 737px;
    }

    .mod3 img{
        width: 490px;
    }

    .modern-tite{
        font-size: 130px;
        line-height: 100px;
        width: 728px;
        
    }

    .modern{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mod3{
        margin-top: -141px;
    }

    .m1{
        margin-top: 45px;
    }
    .m2{
        margin-top: 45px;
    }

    .feat p{
        width: 100%;
        max-width: 707px;
        margin: 0 auto;
        text-align: center;
    }

    .feat01{
        width: 600px;
        height: 700px;
    }

    .feat02{
        width: 600px;
        height: 700px;
    }

    .feat02 img{
        width: 600px;
        margin-top: 40px;
    }

    .feat01 img{
        width: 600px;
    }

    .allfiat{
        margin-top: 40px;
    }

    .navi{
        height: 44vh;
    }

    .allfooter{
        gap: 130px;
    }

  
  }

  @media only screen and (min-width: 1536px) {
    .main-text {
        font-size: 165px;
    }

    .insp{
        margin-top: 92px;
        height: 67px;
    }

    .bikes{
        gap: 100px;     
     }

     .filter{
        gap:153px;
     }

    .trending-img{
        gap:80px;
    }

    .allfiat{
        gap: 20px;
    }

    .allfooter{
        gap: 350px;
    }

    .second-s{
        gap: 80px;
    }

  }