*{

    box-sizing: border-box;
    padding: 0;
    margin: 0;

}

body{
    font-family: sans-serif;
}

/* Header */

.header-inner-content{

    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}


.navbar{

    background-color: #2c2c2c;
    padding: 1rem;
    position: sticky;
    top: 0;
    box-shadow: 10px 0px 10px  #2c2c2c;
    z-index: 99;
}


.navbar>div{

    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

}


.logo{

    color: blueviolet;
}


.logo span{

    color: antiquewhite;
}

nav ul{

    display: flex;
    list-style: none;
    align-items: center;
}


.nav-icon-conteiner{

    display: flex;
    align-items: center;
}

.header-inner-content img{

    width: 30px;
    cursor: pointer;
}

.nav-icon-conteiner img:first-child{
margin-right: 1rem;

} 

nav ul li{

    color: antiquewhite;
    margin-right: 1.5rem;
    cursor: pointer;
}

nav ul li:hover{

    transform: translateY(-5px);
    transition: all 0.5s;
    font-weight: bold;
}

.menu-button{

    display: none;
}

header{

    background-image: radial-gradient(#fff, #c7c7c7) ;
}

.header-bottom-side{

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;

}




.header-bottom-side-left{

    height: 100%;
    flex-basis: 50%;
}


.header-bottom-side-left h2{

   font-size: 3.2rem;
   margin-bottom: 1.5rem;
}


.header-bottom-side-left p{

   line-height: 1.5rem;
   margin-bottom: 1.5rem;
 }
 
 .header-bottom-side-left button{

    background-color: blueviolet ;
    border: none;
    cursor: pointer;
    padding: 0.8rem 3.8rem;
    border-radius: 50px;
    color: antiquewhite;
    font-weight: 500;
    font-size: 1rem;

  }

  .header-bottom-side-left button:hover{

   background-color: rgb(96, 29, 158);
   transition: 0.4s; 

   

  }
  

.header-bottom-side-right{

    
    flex-basis: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

}



.header-bottom-side-right img{

    
    width: 115%;


}

/* Medie Queries */

@media (max-width: 800px){

    .logo{
        font-size: 1.2rem;
    }

    .menu-button{
      display: block;  
    }

    .header-bottom-side{

        flex-direction: column;
        text-align: center;
        padding-top: 4rem;
    }

    nav{
        position: absolute;
        background-color: #2c2c2c;
        width: 100%;
        top: 46px;
        display: none;

    }

    .show-menu nav{

        display: block;
    }

    nav ul{

        flex-direction: column;

    }

    nav ul li{
        text-align: center;
        padding: 0.8rem;
        
    }
}


/* End Header */


/*Main content */

.grey-background{

    background-color: #2c2c2c;
}

.page-inner-content{

    max-width: 1200px;
    margin: 0 auto;

}

.cols{
    display: grid;
    
    justify-content:space-evenly;
    padding: 4rem 1rem;
}
.cols-3{
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}
.cols img {
    width: 100%;
    height: auto;
}

/*end Main content */
main{

    background-color: #ebebeb;
}

.cols-3 img {

    max-width: 100%;
}

.cols-4 img {

    max-width: 100%;
}

.cols-4{

    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.cols>*{

    cursor: pointer;
    transition: all 0.4s;

}

.cols>*:hover{

    transform: translateY(-5px);

}

.section-title{

    text-align: center;
    margin-top: 4rem;
    font-size: 1.8rem;
}

.subtitle-underline{

    width: 100px;
    height: 5px;
    background: blueviolet;
    border: 50px;
    margin: 8px auto 0 auto;
    

}

.product{

    color: #2c2c2c;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
}


.product-name{

    font-weight: 600;
    margin-top: 0.4rem;
}

.rate{

    color:blueviolet;
    font-size: 1.3rem;
}

.product-price span{
    font-weight: 600;
}

.exclusive-container{

    color: antiquewhite;
    flex-direction: row-reverse;
    padding: 5rem 1rem;
}

.exclusive-container img{

    max-width: 500px;

}


/*Media queries*/

@media (max-width: 800px){

    .section-title{
        font-size: 1rem;
    }

    .cols-3{
        grid-template-columns: repeat(1,1fr);
    }

    .cols-4{
        grid-template-columns: repeat(2,1fr);
    }

    .product-name, .product-price, .rate{

        max-height: 1rem;
        overflow: hidden;
        font-size: 0.8rem;
    }

    .exclusive-container{
        flex-direction: column-reverse;
    }

    .exclusive-container img{
        margin-bottom: 4rem;
    }
}


/*Main content */

/*testimonials*/


.testimonials{

    display: flex;
    padding: 4rem 1rem;
    justify-content: space-evenly;
}

.testimonial{

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   flex-basis: 30%; 
   text-align: center;
   box-shadow: 0 0 15px #afafaf;
   padding: 1rem;
   border-radius: 1rem;
   cursor: pointer;
   transition: all 0.2s;

}

.testimonial:hover{

    transform: translateY(-5px);
  
}

.testimonial p{

    margin: 5px 0;
  
}

.testimonial p:first-child{

    font-weight: 600;
    font-size: 5rem;
    color: blueviolet;
    margin-top: 3rem;
    line-height: 2rem;


}



.testimonial p:last-child{

    font-weight: 600;
    
}

/*Media queries*/

@media (max-width: 800px){
    .testimonials{
        flex-direction: column;
    }

    .testimonial{
        margin-bottom: 1.2rem;
    }
}



/*testimonials*/

/*Footer*/

.footer-content{

    display: flex;
    align-items: center;
    color: #efefef;
    padding: 4rem 1rem;
    gap: 2rem;
}

.download-options>*{

    margin: 1rem 0;
}

.download-options>p:first-child{

    font-weight: 600;
    color: #fff;
}

.download-options>div{

    display: flex;

}

.download-options>div img{

   width: 180px;
}

.logo-footer{

    text-align: center;
}

.links-footer h3{

    color: #fff;
    margin-bottom: 0.8rem;
}


.links-footer ul{
    list-style: none;
}

.links-footer ul li {

    margin-bottom: 0.5rem;
    cursor: pointer;
}


.copyright{
    color: #fff;
    padding: 2rem 0;
    text-align: center;


}


/*Media queries*/

@media (max-width: 800px){

    .footer-content{
        display: inline;
        font-size: 0.8rem;

    }

    .footer-content>div{

        padding: 1rem;
    }

    .download-options>div{
        display: inline;
    }

    .download-options>div img{

        width: 120px;
    }
    .copyright{

        font-size: 0.8rem;
    }
}
  


/*Footer*/