/*=============== GOOGLE FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/*=============== VARIABLES CSS ===============*/
:root {
   --header-height: 3rem;

   /*========== Colors ==========*/
   --hue-color: 206;
   --black-color: hsl(var(--hue-color), 4%, 4%);
   --black-color-alt: hsl(var(--hue-color), 4%, 8%);
   --title-color: hsl(var(--hue-color), 4%, 95%);
   --text-color: hsl(var(--hue-color), 4%, 75%);
   --text-color-light: hsl(var(--hue-color), 4%, 65%);
   --white-color: #FFF;
   --body-color: hsl(var(--hue-color), 4%, 6%);
   --container-color: hsl(var(--hue-color), 1%, 18%);
   --text-gradient: linear-gradient(hsl(var(--hue-color), 3%, 40%), hsl(var(--hue-color), 4%, 15%));
   --scroll-thumb-color: hsl(var(--hue-color), 4%, 16%);
   --scroll-thumb-color-alt: hsl(var(--hue-color), 4%, 20%);

   /*========== Font and typography ==========*/
   --body-font: 'Poppins', sans-serif;
   --biggest-font-size: 5rem;
   --bigger-font-size: 2.5rem;
   --big-font-size: 2.5rem;
   --h2-font-size: 1.25rem;
   --h3-font-size: 1.125rem;
   --normal-font-size: 1rem;
   --small-font-size: .813rem;
   --smaller-font-size: .75rem;
   --text-line-height: 2rem;

   /*========== Font weight ==========*/
   --font-medium: 500;
   --font-semi-bold: 600;

   /*========== Margenes Bottom ==========*/
   --mb-0-5: .5rem;
   --mb-0-75: .75rem;
   --mb-1: 1rem;
   --mb-1-5: 1.5rem;
   --mb-2: 2rem;
   --mb-2-5: 2.5rem;

   /*========== z index ==========*/
   --z-tooltip: 10;
   --z-fixed: 100;
}

/*=============== RESPONSIVE TYPOGRAPHY ===============*/
@media screen and (min-width: 968px) {
   :root {
      --biggest-font-size: 7.5rem;
      --bigger-font-size: 4.5rem;
      --big-font-size: 4rem;
      --h2-font-size: 1.5rem;
      --h3-font-size: 1.25rem;
      --normal-font-size: 1rem;
      --small-font-size: .875rem;
      --smaller-font-size: .813rem;
   }
}

/*=============== BASE ===============*/
* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}

html {
   scroll-behavior: smooth;
}

body {
   margin: var(--header-height) 0 0 0;
   background-color: var(--body-color);
   font-family: var(--body-font);
   font-size: var(--normal-font-size);
   color: var(--text-color);
}

h1,
h2,
h3 {
   color: var(--title-color);
}

ul {
   list-style: none;
}

a {
   text-decoration: none;
}

button,
input {
   border: none;
   outline: none;
}

button{
   cursor: pointer;
}

img{
   max-width: 100%;
   height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.section{
   padding: 4rem 0 2rem;
}

.section__title{
   font-size: var(--bigger-font-size);
   text-align: center;
   margin-bottom: var(--mb-2-5);
}

.section__title-gradient{
   background: var(--text-gradient);
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
}

/*=============== LAYOUT ===============*/
main{
   overflow: hidden; /*For animation and images*/
}

.container{
   max-width: 968px;
   margin-left: var(--mb-1-5);
   margin-right: var(--mb-1-5);  
}

.grid{
   display: grid;
}



/*=============== HEADER ===============*/
.header{
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: var(--z-fixed);
   background: transparent;
}

/*=============== NAV ===============*/
.nav{
   height: 3rem;
   display: flex;
   justify-content: space-between;
   align-items: center;

}

.nav__logo{
   display: flex;
   width: 1.5rem;
}

.nav__toggle{
   font-size: 1.2rem;
   color: var(--white-color);
   cursor: pointer;
}

@media screen and (max-width: 767px) {
   .nav__menu {
     position: fixed;
     background-color: var(--body-color);
     top: -100%;
     left: 0;
     width: 100%;
     padding: 4rem 0 3rem;
     transition: .4s;
   }
 }

 .nav__list{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
 }

 .nav__link{
    /* text-transform: uppercase; */
    background: var(--text-gradient);
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
    font-size: var(--h2-font-size);
    font-weight: var(--font-semi-bold);
 }

 .nav__link:hover{
    color: #FFF;
}

 .nav__close{
    position: absolute;
    font-size: 1.5rem;
    top: 1rem;
    right: 1rem;
    color: var(--white-color);
    cursor: pointer;
 }

/* show menu */
 .show-menu{
    top: 0;
 }

/* Change background header */
.scroll-header{
   background-color: var(--body-color);
}

/* Active link */
.active-link{
   color: #FFF;
}

/*=============== HOME ===============*/
.home__img{
   width: 250px;
   position: absolute;
   top: -16rem;
   right: 1rem;
}

.home__data{
   padding-top: 5rem;
}

.home__header{
   position: relative;
}

.home__title{
   font-size: var(--biggest-font-size);
   position: absolute;
   top: -4.3rem;
   line-height: 6rem;
   background: var(--text-gradient);
   color: transparent;
   -webkit-background-clip: text;
   background-clip: text;
}

.home__subtitle{
   font-size: var(--big-font-size);
   margin-bottom: var(--mb-2-5);
}

.home_title-description{
   font-size: var(--h3-font-size);
   font-weight: var(--font-medium);
   margin-bottom: var(--mb-1);
}

.home__description{
   margin-bottom: var(--mb-2-5);
   line-height: var(--text-line-height);
}

.home__price{
   font-size: var(--h3-font-size);
   font-weight: var(--font-semi-bold);
   margin-left: var(--mb-0-75);
}
/*=============== BUTTONS ===============*/
.button{
   display: inline-block;
   background-color: rgb(0, 0, 0);
   color: var(--white-color);
   padding: 1rem 1.25rem;
   border: 1px solid rgb(85, 85, 85);
   border-radius: .3rem;
   transition: .3s;
}

.button:hover{
   background-color: var(--black-color-alt);
}

.button_icon{
   font-size: 1.2rem;
}

.button-flex{
   display: inline-flex;
   align-items: center;
   column-gap: .75rem;
}
/*=============== SPONSOR ===============*/
.sponsor__img{
   width: 90px;
}

.sponsor__container{
   grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
   row-gap: 5rem;
   justify-items: center;
   align-items: center;
}

/*=============== SPECS ===============*/
.specs__container{
   position: relative;
}

.specs__content{
   row-gap: 1.5rem;
}

.specs__data{
   display: grid;
   gap: 0.25rem;
}

.specs__icon{
   font-size: 1.2rem;
   color: var(--white-color);
}

.specs__title{
   font-size: var(--normal-font-size);
   font-weight: var(--font-medium);
}

.specs__subtitle{
   font-size: var(--smaller-font-size);
}

.specs__data:nth-child(1),
.specs__data:nth-child(4){
   margin-left: var(--mb-1-5);
}

.specs__img{
   width: 250px;
   position: absolute;
   top: 2rem;
   right: -4.5rem;
}
/*=============== CASE ===============*/
.case__container{
   position: relative;
   grid-template-columns: repeat(2, 1fr);
}

.case__data{
   padding: 5rem 0 3rem;
}

.case__img{
   width: 250px;
   position: absolute;
   left: -7rem;
}

.case__description{
   margin-bottom: var(--mb-1-5);
   line-height: var(--text-line-height);
}
/*=============== DISCOUNT ===============*/
.discount__container{
   position: relative;
   background-color: var(--container-color);
   padding: 2rem 1.5rem;
   border-radius: .75rem;
}

.discount__title{
   font-size: var(--h3-font-size);
   margin-bottom: var(--mb-0-75);
}

.discount__description{
   margin-bottom: var(--mb-1);
}

.discount__img{
   width: 300px;
   position: absolute;
   top: 4rem;
   right: -13.6rem;
}

/*=============== PRODUCTS ===============*/
.products__container{
   grid-template-columns: repeat(2, 1fr);
   gap: 5rem 1.5rem;
   padding-top: 3rem;
}

.products__card{
   position: relative;
   height: 132px;
   padding: .75rem;
   padding-top: 5rem;
   background-color: var(--container-color);
   display: grid;
}

.products__img{
   width: 80px;
   position: absolute;
   inset: 0;
   margin-left: auto;
   margin-right: auto;
   top: -3rem;
}

.products__content{
   align-items: flex-end;
}

.products__title,
.product__price{

   font-size: var(--small-font-size);
}

.product__price{
   font-weight: var(--font-semi-bold);
}

.products__button{
   position: absolute;
   right: .5rem;
   bottom: .5rem;
   padding: .5rem;
   border-radius: .35rem;

}

/*=============== FOOTER ===============*/
.footer_container{
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   row-gap: 2rem;
}

.footer__logo{
   width: 2rem;
}

.footer__title{
   font-size: var(--h3-font-size);
   font-weight: var(--font-medium);
   margin-bottom: var(--mb-1);
}

.footer__links{
   display: flex;
   flex-direction: column;
   row-gap: .5rem;
}

.footer__link{
   color: #FFF;
}

.footer__link:hover{
   color: rgb(209, 209, 209);
}

.footer__form{
   display: flex;
   width: 100%;
   column-gap: .5rem;
   background-color: var(--container-color);
   padding: .5rem .75rem;
   border-radius: .5rem;
   margin-bottom: var(--mb-2);

}

.footer__input{
   background-color: var(--container-color);
   width: 90%;
   color: rgb(179, 179, 179);
   font-size: 14px;
}

.footer__input::placeholder{
   font-family: var(--body-color);
}

.footer__social{
   display: flex;
   column-gap: 1.25rem;
}

.footer__social-link{
   display: inline-flex;
   color: white;
   background-color: var(--container-color);
   padding: .5rem;
   font-size: 1.25rem;
} 

.footer__social-link:hover{
   background-color: black;
}

.footer__copy{
   margin-top: 5rem;
   text-align: center;
}

.footer__copy-link{
   font-size: var(--smaller-font-size);
   color: var(--text-color-light);
}
/*=============== SCROLL UP ===============*/
.scrollup{
   position: fixed;
   right: 1rem;
   bottom: -20%;
   display: flex;
   background-color: var(--container-color);
   border-radius: .25rem;
   padding: .45rem;
   opacity: 9;
   z-index: var(--z-tooltip);
   transition: .4s;
}

.scrollup__icon{
   color: var(--white-color);
   font-size: 1.35rem;
}

.scrollup:hover{
   background-color: black;
   opacity: 1;
}
/* Show Scroll Up*/
.show-scroll{
   bottom: 5rem;
}

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{
   width: .60rem;
   border-radius: .5rem;
}

::-webkit-scrollbar-thumb{
   background-color: var(--scroll-thumb-color);
   border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover{
   background-color: var(--scroll-thumb-color-alt);
}



/*=============== MEDIA QUERIES ===============*/
/* For small devices */
@media screen and (max-width: 340px){
   .container{
      margin-left: var(--mb-1);
      margin-right: var(--mb-1);
   }

   .section__title{
      font-size: var(--big-font-size);
   }

   .home__img{
      width: 200px;
      top: -13rem;
   }

   .home__title{
      top:-4rem;
      font-size: var(--bigger-font-size);
   }

   .home__data{
      padding-top: 1rem;
   }

   .home__description{
      font-size: var(--small-font-size);
   }

   .home__price{
      font-size: var(--normal-font-size);
   }
   
   .specs__img{
      width: 200px;
   }

   .case__container{
   grid-template-columns: .6fr 1fr;
   }

   .case__img{
      width: 220px;
      top: -2rem;
      left: -9rem;
   }

   .case__data{
      padding: 0;
   }

   .products__container{
      grid-template-columns: 142px;
      justify-content: center;
   }
}

/* For medium devices */
@media screen and (min-width: 598px) {
   .home__container{
      grid-template-columns: .8fr 1fr;
   }

   .home__data{
      padding-top: 2rem;
   }

   .home__img{
      top: -7rem;
      left: 0;
   }

   .specs__img{
      position: initial;
   }

   .specs__container{
      grid-template-columns: repeat(2, 1fr);
      justify-items: center;
      align-items: center;
   }

   .case__img{
      position: initial;
   }

   .case__data{
      padding: 0;
   }

   .case__container{
      grid-template-columns: max-content 250px;
      justify-items: center;
      align-items: center;
      column-gap: 2rem;
   }

   .discount__img{
      position: initial;
   }

   .discount__container{
      grid-template-columns: repeat(2, 1fr);
      justify-items: center;
      align-items: center;
   }

   .products__container{
      grid-template-columns: repeat(3,142px);
      justify-content: center;

   }
}

@media screen and (min-width: 767px) {
   body{
      margin: 0;
   }

   .section{
      padding: 6rem 0 2rem;
   }

   .nav{
      height: calc(var(--header-height) + 1.5rem);

   }
   
   .nav__logo{
      width: 2rem;
   }

   .nav__list{
      flex-direction: row;
      column-gap: 3.5rem;
   }

   .nav__link{
      font-size: var(--normal-font-size);
      text-transform: initial;
   }

   .nav__toggle,
   .nav__close{
      display: none;
   }

   .home__container{
      position: relative;
      grid-template-columns: repeat(2,1fr);
   }

   .home__img{
      top: -9rem;
      left: 4rem;
   }

   .home__data{
      padding-top: 8rem;
   }

   .specs__img{
      width: 300px;
   }

   .case__container{
      column-gap: 7rem;
   }

   .case__img{
      width: 250px;
   }

   .case__description{
      width: 350px;
   }

   .discount__container{
      grid-template-columns: 250px max-content;
      justify-content: center;
      column-gap: 5rem;
      padding: 3rem 0;
   }

   .discount__title{
      font-size: var(--h2-font-size);
      margin-bottom: var(--mb-1);
   }

   .discount__description{
      margin-bottom: var(--mb-2);
   }

   .products__container{
      grid-template-columns: repeat(3, 162px);
      gap: 6rem 3rem;
      padding-top: 5rem;
   }

   .products__card{
      height: 152px;
      padding: 100px .85rem .85rem .85rem;
   }

   .products__img{
      width: 95px;
   }

   .footer_container{
      grid-template-columns: .4fr .7fr .7fr 1fr;
   }
}


/* For large devices */

@media screen and (min-width: 1024px) {
   .container{
      margin-left: auto;
      margin-right: auto;
   }

   .home__img{
      width: 300px;
      top: -15rem
   }

   .home__title{
      top: -5rem;
      left: 3.2rem
   }

   .home__description{
      padding-right: 5rem;
   }

   .sponsor__img{
      width: 110px;
   }

   .discount__img{
      width: 350px;
   }

   .footer_container{
      padding-top: 3rem;
   }

   .footer__copy{
      margin-top: 9rem;
   }
}