/* ========== variables ========== */

:root {
  --metal: #0a1d4b;
  --cream: #fff6dd;
  --white: white;
  --black: black;
  --mint: #68dacb;
  --purple: #4c00b0;
  --pink: #ff80dd;
  --transparent: rgba(255, 255, 255, 0);
  --orange: orange;
  --blue: #3370f8;
  --yellow: #ffbb33;
  --slowyellow: #fff44f;
  --sky-blue: #86ceec;
  --green: #50b18a;
  --red: crimson;
  --darkgreen: #034c65;
  --pastel: #ef8c86;
  --darkpurple: #685268;
  --wood: #fcb677;
  --navyblue: #000080;
  --darkblue: #111184;
  --rosered: #c92351;
  --bluish: #0051a2;
  --orangedwood: #f29e03;
}

/* ========== reset ========== */

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

html,
body {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body,
p,
a,
ul,
li {
  text-decoration: none;
}
li {
  list-style-type: none;
}

section {
  padding: 20px;
}

/* ========== base styles ========== */

body {
  background-color: var(--white);
}
h1,
h2,
h3,
h4,
h5,
p,
a,
li {
  color: var(--metal);
}

/* ========== button base styles ========== */

.button {
  position: relative;
  z-index: 10;
  background-color: var(--mint);
  color: var(--white);
  padding: 15px 40px;
  border-radius: 30px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
  display: inline-block;
  font-size: 17px;
  font-family: "Generalsans", sans-serif;
  font-weight: 400;
  letter-spacing: 3px;
  margin: 30px;
  cursor: pointer;
}
.button:hover {
  background: var(--metal);
}

.button-swipe {
  width: 70%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 65%;
  bottom: 70px;
  transform: translateX(-50%);
  border-radius: 15px 0 0 15px;
  padding: 5px 15px;
  backdrop-filter: blur(15px);
}
.button-swipe h6,
.button-swipe span {
  color: var(--white);
  font-size: 15px;
  font-family: "Excon", sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
}

/* ========== products-container base styles ========== */

.main-products-container-1 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px;
}

.products-container-1 {
  width: 100%;
  max-width: 260px;
  max-height: 380px;
  display: flex;
  gap: 15px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  border-radius: 15px;
}

.products-container-1::-webkit-scrollbar {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 7.5px;
  height: 10px;
}
.products-container-1::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  border: 2px solid var(--transparent);
  background-clip: content-box;
}

.products-container-1 .page {
  min-width: 260px;
  height: 100%;
  scroll-snap-align: start;
}

.page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  cursor: pointer;
}

.page:last-child,
.page:first-child {
  position: relative;
  overflow: hidden;
}

.page .link-payment-1 {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(3px);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.page .link-payment-1 a {
  background-color: var(--mint);
  color: var(--white);
  padding: 10px 40px;
  border-radius: 30px;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
  text-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
  display: inline-block;
  font-size: 15px;
  font-family: "Generalsans", sans-serif;
  font-weight: 500;
  letter-spacing: 3px;
  margin: 30px;
  cursor: pointer;
}

.page .link-payment-1 a:hover {
  background: var(--metal);
}

/* ========== products-intro base styles ========== */

#products-intro-1,
#products-intro-2,
#products-intro-3,
#products-intro-4,
#products-intro-5 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

#products-intro-1 h1,
#products-intro-2 h1,
#products-intro-3 h1,
#products-intro-4 h1,
#products-intro-5 h1 {
  text-align: center;
  font-family: "Excon", sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: var(--white);
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* ========== products base styles ========== */

#products-1,
#products-2,
#products-3,
#products-4,
#products-5 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: -30px;
  padding-top: 70px;
}

#products-1 h4,
#products-2 h4,
#products-3 h4,
#products-4 h4,
#products-5 h4 {
  width: 95%;
  font-family: "Generalsans", sans-serif;
  font-weight: 500;
  font-size: 25px;
  letter-spacing: 2px;
  color: var(--white);
  text-align: center;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 1.5);
  border: 3px solid var(--white);
  border-radius: 15px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 1.5);
  padding: 7px;
  margin-bottom: 10px;
}

#products-1 h5,
#products-2 h5,
#products-3 h5,
#products-4 h5,
#products-5 h5 {
  font-family: "Generalsans", sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 1.5px;
  color: var(--white);
  margin-bottom: 30px;
  text-align: center;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* ========== fonts ========== */

@font-face {
  font-family: "Excon";
  src: url(assets/fonts/excon-regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Excon";
  src: url(assets/fonts/excon-medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Excon";
  src: url(assets/fonts/excon-bold.otf) format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Generalsans";
  src: url(assets/fonts/generalsans-extralight.otf) format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Generalsans";
  src: url(assets/fonts/generalsans-regular.otf) format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Generalsans";
  src: url(assets/fonts/generalsans-medium.otf) format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Generalsans";
  src: url(assets/fonts/generalsans-bold.otf) format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========== welcome-section ========== */

#welcome {
  background-color: var(--cream);
  min-height: 100dvh;
  background: url(assets/img/backgrounds/hero.svg) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
}
#welcome h1 {
  text-align: center;
  font-family: "Excon", sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--mint);
  letter-spacing: 1.3px;
  margin: 50px auto;
}

.welcome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.welcome-container h2 {
  font-family: "Excon", sans-serif;
  font-weight: 700;
  font-size: 45px;
  color: var(--metal);
  line-height: 0.9;
  padding: 0 25px;
  margin-bottom: 25px;
  letter-spacing: -2px;
}

.welcome-container .content-text {
  font-size: 20px;
  margin: 30px;
  font-family: "Generalsans", sans-serif;
  font-weight: 400;
  letter-spacing: 1.5px;
}

/* ========== products-intro section ========== */

#products-intro-1 {
  background-color: var(--darkgreen);
  z-index: 9;
}

#products-intro-2 {
  background-color: var(--rosered);
  z-index: 7;
}

#products-intro-3 {
  background-color: var(--bluish);
  z-index: 5;
}

#products-intro-4 {
  background-color: var(--green);
  z-index: 3;
}

#products-intro-5 {
  background-color: var(--purple);
  z-index: 1;
}

/* ========== products-1 section ========== */

#products-1 {
  background-color: var(--rosered);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='250' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.05'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: scroll;
  background-size: 300px 250px;
  background-repeat: repeat;
  z-index: 8;
}

#products-1 h4 {
  background-color: var(--rosered);
}

/* ========== products-2 section ========== */

#products-2 {
  background-color: var(--bluish);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 120 120'%3E%3Cpolygon fill='%23000' fill-opacity='0.11' points='120 0 120 60 90 30 60 0 0 0 0 0 60 60 0 120 60 120 90 90 120 60 120 0'/%3E%3C/svg%3E");
  background-attachment: scroll;
  background-size: 50px 50px;
  background-repeat: repeat;
  z-index: 6;
}

#products-2 h4 {
  background-color: var(--bluish);
}

/* ========== products-3 section ========== */

#products-3 {
  background-color: var(--green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3Crect stroke='%2350B18A' stroke-width='0.3' width='1' height='1' id='s'/%3E%3Cpattern id='a' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='scale(30) translate(-966.67 -725)'%3E%3Cuse fill='%2357b38d' href='%23s' y='2'/%3E%3Cuse fill='%2357b38d' href='%23s' x='1' y='2'/%3E%3Cuse fill='%235eb591' href='%23s' x='2' y='2'/%3E%3Cuse fill='%235eb591' href='%23s'/%3E%3Cuse fill='%2364b794' href='%23s' x='2'/%3E%3Cuse fill='%2364b794' href='%23s' x='1' y='1'/%3E%3C/pattern%3E%3Cpattern id='b' width='7' height='11' patternUnits='userSpaceOnUse' patternTransform='scale(30) translate(-966.67 -725)'%3E%3Cg fill='%2369b897'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' y='5' /%3E%3Cuse href='%23s' x='1' y='10'/%3E%3Cuse href='%23s' x='2' y='1'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='8'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='5' y='2'/%3E%3Cuse href='%23s' x='5' y='6'/%3E%3Cuse href='%23s' x='6' y='9'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='h' width='5' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(30) translate(-966.67 -725)'%3E%3Cg fill='%2369b897'%3E%3Cuse href='%23s' y='5'/%3E%3Cuse href='%23s' y='8'/%3E%3Cuse href='%23s' x='1' y='1'/%3E%3Cuse href='%23s' x='1' y='9'/%3E%3Cuse href='%23s' x='1' y='12'/%3E%3Cuse href='%23s' x='2'/%3E%3Cuse href='%23s' x='2' y='4'/%3E%3Cuse href='%23s' x='3' y='2'/%3E%3Cuse href='%23s' x='3' y='6'/%3E%3Cuse href='%23s' x='3' y='11'/%3E%3Cuse href='%23s' x='4' y='3'/%3E%3Cuse href='%23s' x='4' y='7'/%3E%3Cuse href='%23s' x='4' y='10'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='c' width='17' height='13' patternUnits='userSpaceOnUse' patternTransform='scale(30) translate(-966.67 -725)'%3E%3Cg fill='%236fba9a'%3E%3Cuse href='%23s' y='11'/%3E%3Cuse href='%23s' x='2' y='9'/%3E%3Cuse href='%23s' x='5' y='12'/%3E%3Cuse href='%23s' x='9' y='4'/%3E%3Cuse href='%23s' x='12' y='1'/%3E%3Cuse href='%23s' x='16' y='6'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='d' width='19' height='17' patternUnits='userSpaceOnUse' patternTransform='scale(30) translate(-966.67 -725)'%3E%3Cg fill='%2350B18A'%3E%3Cuse href='%23s' y='9'/%3E%3Cuse href='%23s' x='16' y='5'/%3E%3Cuse href='%23s' x='14' y='2'/%3E%3Cuse href='%23s' x='11' y='11'/%3E%3Cuse href='%23s' x='6' y='14'/%3E%3C/g%3E%3Cg fill='%2374bc9d'%3E%3Cuse href='%23s' x='3' y='13'/%3E%3Cuse href='%23s' x='9' y='7'/%3E%3Cuse href='%23s' x='13' y='10'/%3E%3Cuse href='%23s' x='15' y='4'/%3E%3Cuse href='%23s' x='18' y='1'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='e' width='47' height='53' patternUnits='userSpaceOnUse' patternTransform='scale(30) translate(-966.67 -725)'%3E%3Cg fill='%2350B18A'%3E%3Cuse href='%23s' x='2' y='5'/%3E%3Cuse href='%23s' x='16' y='38'/%3E%3Cuse href='%23s' x='46' y='42'/%3E%3Cuse href='%23s' x='29' y='20'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='f' width='59' height='71' patternUnits='userSpaceOnUse' patternTransform='scale(30) translate(-966.67 -725)'%3E%3Cg fill='%2350B18A'%3E%3Cuse href='%23s' x='33' y='13'/%3E%3Cuse href='%23s' x='27' y='54'/%3E%3Cuse href='%23s' x='55' y='55'/%3E%3C/g%3E%3C/pattern%3E%3Cpattern id='g' width='139' height='97' patternUnits='userSpaceOnUse' patternTransform='scale(30) translate(-966.67 -725)'%3E%3Cg fill='%2350B18A'%3E%3Cuse href='%23s' x='11' y='8'/%3E%3Cuse href='%23s' x='51' y='13'/%3E%3Cuse href='%23s' x='17' y='73'/%3E%3Cuse href='%23s' x='99' y='57'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23b)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23h)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23c)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23d)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23e)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23f)' width='100%25' height='100%25'/%3E%3Crect fill='url(%23g)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-attachment: scroll;
  background-size: cover;
  background-repeat: repeat;
  z-index: 4;
}

#products-3 h4 {
  background-color: var(--green);
}

/* ========== products-4 section ========== */

#products-4 {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(0,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%234C00B0'/%3E%3Cstop offset='1' stop-color='%234C00B0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='15' cy='15' r='15'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.07'/%3E%3C/svg%3E");
  background-attachment: scroll;
  background-size: cover;
  background-repeat: repeat;
  z-index: 2;
}

#products-4 h4 {
  background-color: var(--purple);
}

/* ========== products-5 section ========== */

#products-5 {
  background-color: var(--orangedwood);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 100 100'%3E%3Crect x='0' y='0' width='90' height='90' fill-opacity='0.28' fill='%23FCB677'/%3E%3C/svg%3E");
  background-attachment: scroll;
  background-size: 40px 40px;
  background-repeat: repeat;
  padding-bottom: 150px;
}

#products-5 h4 {
  background-color: var(--orangedwood);
}

/* svg curve-5 */

.curve-5 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}
.curve-5 svg {
  width: calc(300% + 1.3px);
  height: 104px;
}

.curve-5 .shape-fill {
  fill: #50b18a;
}

/* ========== footer section ========== */

#footer {
  background-color: var(--green);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  position: relative;
  padding-bottom: 85px;
}

#footer h1 {
  text-align: center;
  font-family: "Excon", sans-serif;
  font-weight: 700;
  font-size: 35px;
  color: var(--white);
  margin-top: 0;
  margin-bottom: 20px;
  padding: 0 15px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.socials-container {
  display: flex;
  gap: 30px;
  margin-bottom: 70px;
  padding: 0 15px;
}
.socials-container svg {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
  height: 35px;
  fill: var(--white);
}

#footer h4 {
  font-size: 17px;
  text-align: center;
  font-family: "Excon", sans-serif;
  font-weight: 500;
  letter-spacing: 1.7px;
  color: var(--white);
  margin-top: 0;
  padding: 0 15px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

#footer h3 {
  text-align: center;
  font-family: "Excon", sans-serif;
  font-weight: 700;
  font-size: 65px;
  letter-spacing: 1.7px;
  color: var(--mint);
  margin-top: -20px;
  margin-bottom: -120px;
  padding: 0 15px;
}

/* mmmmmmmmmm small tablet styles mmmmmmmmmm */
@media screen and (min-width: 481px) {
  #welcome h1 {
    font-size: 27px;
  }

  .welcome-container h2 {
    font-size: 53px;
  }

  .welcome-container .content-text {
    font-size: 25px;
  }

  .button {
    font-size: 20px;
  }

  #products-intro-1 h1,
  #products-intro-2 h1,
  #products-intro-3 h1,
  #products-intro-4 h1,
  #products-intro-5 h1 {
    font-size: 37px;
  }

  #products-1 h4,
  #products-2 h4,
  #products-3 h4,
  #products-4 h4,
  #products-5 h4 {
    font-size: 27px;
  }

  #products-1 h5,
  #products-2 h5,
  #products-3 h5,
  #products-4 h5,
  #products-5 h5 {
    font-size: 23px;
  }
}
/* mmmmmmmmmm large tablet & small laptop styles mmmmmmmmmm */

@media screen and (min-width: 768px) {
  #welcome h1 {
    font-size: 30px;
  }

  .welcome-container h2 {
    font-size: 55px;
  }

  .welcome-container .content-text {
    font-size: 30px;
  }

  .button {
    font-size: 25px;
  }

  #products-intro-1 h1,
  #products-intro-2 h1,
  #products-intro-3 h1,
  #products-intro-4 h1,
  #products-intro-5 h1 {
    font-size: 40px;
  }

  #products-1 h4,
  #products-2 h4,
  #products-3 h4,
  #products-4 h4,
  #products-5 h4 {
    font-size: 29px;
  }

  #products-1 h5,
  #products-2 h5,
  #products-3 h5,
  #products-4 h5,
  #products-5 h5 {
    font-size: 23px;
  }

  #footer h1 {
    font-size: 45px;
  }

  .socials-container {
    gap: 50px;
  }
  .socials-container svg {
    height: 53px;
  }

  #footer h4 {
    font-size: 25px;
  }

  #footer h3 {
    font-size: 80px;
  }
}
/* mmmmmmmmmm desktop styles mmmmmmmmmm */
@media screen and (min-width: 1024px) {
  #products-intro-1 h1,
  #products-intro-2 h1,
  #products-intro-3 h1,
  #products-intro-4 h1,
  #products-intro-5 h1 {
    font-size: 45px;
  }

  #products-1 h4,
  #products-2 h4,
  #products-3 h4,
  #products-4 h4,
  #products-5 h4 {
    font-size: 35px;
  }

  #products-1 h5,
  #products-2 h5,
  #products-3 h5,
  #products-4 h5,
  #products-5 h5 {
    font-size: 27px;
  }
}