/*=============== 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), 4%, 10%);
--text-gradient: linear-gradient(hsl(var(--hue-color), 4%, 24%), hsl(var(--hue-color), 4%, 8%));
--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: 3.5rem;
--big-font-size: 2.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--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;
}

@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;
font-family: var(--body-font);
font-size: var(--normal-font-size);
background-color: #d6d2b8;
color: #5c5c5c;
}

h1, h2, h3 {
color: #4e4e4e;
}

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;
}

.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: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}

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

.nav__toggle {
font-size: 1.2rem;
color: #444431;
cursor: pointer;
}

@media screen and (max-width: 767px) {
.nav__menu {
    position: fixed;
    background-color: #d6d2b8;
    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 {
font-size: var(--h2-font-size);
text-transform: uppercase;
font-weight: var(--font-semi-bold);
background: var(--text-gradient);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: .4s;
}

.nav__link:hover {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

.nav__close {
position: absolute;
font-size: 1.5rem;
top: 1rem;
right: 1rem;
color: #444431;
cursor: pointer;
}

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

/* Change background header */
.scroll-header {
background-color: #a6a081;
}

/* Active link */
.active-link {
background: var(--white-color);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}

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

.home__data {
padding-top: 5rem;
}

.home__header {
position: relative;
}

.home__title {
position: absolute;
top: -4rem;
left: 1rem;
line-height: 6rem;
font-size: var(--biggest-font-size);
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: #444431;
color: #f7f7d4;
padding: 1rem 1.25rem;
border-radius: .5rem;
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;
row-gap: .25rem;
}

.specs__icon {
font-size: 1.2rem;
color: #444431;
}

.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: 1.5rem;
}

.specs__img {
width: 250px;
position: absolute;
top: 2rem;
right: -4rem;
}
  
/*=============== 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: #bbbb95;
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: -11rem;
}
  
/*=============== PRODUCTS ===============*/
.products__line {
line-height: 4rem;
}

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

.products__card {
position: relative;
height: 132px;
background-color: #bbbb95;
padding: .75rem;
border-radius: .5rem;
display: grid;
}

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

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

.products__title, .products__price {
font-size: var(--small-font-size);
}

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

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

/*=============== FOOTER ===============*/
.footer {
background-color: #444431;
}

.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);
color: #8d8d67;
}

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

.footer__link {
color: #beb4a2;
}

.footer__link:hover {
color: #7a7249;
}

.footer__form {
display: flex;
column-gap: .5rem;
border-radius: .5rem;
margin-bottom: var(--mb-2);
}

.footer__input {
background-color: #8d8455;
width: 90%;
color: #8d8d67;
}

.footer__input::placeholder {
color: #e4e496;
font-size: var(--normal-font-size);
font-family: var(--body-font);
}

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

.footer__social-link {
display: inline-flex;
color: #4e4e4e;
background-color: #bdbd73;
padding: .5rem;
border-radius: .25rem;
font-size: 1rem;
}

.footer__social-link:hover {
background-color: #8d8455;
}

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

.footer__copy-link {
font-size: var(--smaller-font-size);
color: #bbbb95;
}

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

.scrollup:hover {
background-color: #8d8d67;
opacity: 1;
}

.scrollup__icon {
color: #f5f5be;
font-size: 1.35rem;
}

/* 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);
    }
    .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: 576px) {
    .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-content: 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: 5rem;
    }
    .case__img {
      width: 300px;
    }
    .case__description {
      margin-bottom: var(--mb-2);
    }
    .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: .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.5rem;
    }
    .home__description {
      padding-right: 5rem;
    }
    .sponsor__img {
      width: 100px;
    }
    .discount__img {
      width: 350px;
    }
    .footer__container {
      padding-top: 3rem;
    }
    .footer__copy {
      margin-top: 9rem;
    }
}