*,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
span {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  font-size: 62.5%;
  --fonts-museo: "Museo", sans-serif;
  --fonts-inter: "Inter", sans-serif;
  --fonts-roboto: "Roboto", sans-serif;

  --tints-blue_100: #288bc8;
  --tints-blue_200: #1e3363;
  --tints-blue_300: #001646;
  --tints-dark_100: #3f3f40;
  --tints-gray_100: #dcdcdc;
  --tints-gray_200: #bababa;
  --tints-gray_300: #b3b9c7;
  --tints-green_100: #28a745;
  --tints-light_100: #ffffff;
  --tints-light_200: #f9f9f9;
  --tints-red_100: #dc3545;
  --tints-yellow_100: #f7c603;
  --tints-yellow_200: #ffc107;

  --background-side-bar: rgba(255, 255, 255, 0.9);

  --background-modal: rgba(0, 0, 0, 0.6);

  --shadow-blue_100: rgba(40, 138, 201, 0.4);
  --shadow-dark: rgba(130, 142, 153, 0.2);
  --shadow-gray: rgba(255, 255, 255, 0.18);

  --swiper-navigation-size: 2rem !important;
}

::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--tints-blue_200);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--tints-blue_100);
}

body {
  width: 100vw;
  height: 100vh;
  font-family: var(--fonts-roboto);
  overflow-x: hidden;
}

header {
  background: var(--tints-blue_200);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3.2rem 2rem 2.4rem;
  gap: 3.2rem;
}

header .logo {
  width: 15rem;
  height: 4rem;
}

header nav {
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  margin-left: 6.8rem;
}

header nav ul {
  display: flex;
  gap: 2.8rem;
  list-style: none;
}

header nav ul li {
  display: flex;
}

header nav ul a {
  text-decoration: none;
  color: var(--tints-light_100);
  font-style: normal;
  font-family: var(--fonts-inter);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  padding: 2rem 0;
}

header nav ul li:hover {
  transition: all ease-in-out 100ms;
}

header nav ul li a:hover {
  transition: all ease-in-out 100ms;
  color: var(--tints-yellow_100);
}

header nav ul .active {
  color: var(--tints-yellow_100);
  font-weight: 600;
  border-bottom: 2px solid var(--tints-yellow_100);
}

header nav ul {
  width: 100%;
  list-style: none;
  display: flex;
}

header .menu {
  position: fixed;
  top: 2rem;
  right: 2rem;
  background-color: var(--tints-blue_300);
  padding: 1rem;
  border-radius: 4px;
  z-index: 800;
}

header .menu .side-bar {
  position: absolute;
  background: var(--background-side-bar);
  box-shadow: 0 0.8rem 3.2rem 0 var(--shadow-dark);
  backdrop-filter: blur(1.6rem);
  -webkit-backdrop-filter: blur(1.6rem);
  border-radius: 4px;
  border: 1px solid var(--shadow-gray);
  top: 0;
  right: 0;
  display: none;
  padding: 4rem;
}

header .menu .side-bar-active {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

header .menu .side-bar ul {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  list-style: none;
  justify-content: center;
  align-items: center;
}

header .menu .side-bar ul a {
  text-decoration: none;
  color: var(--tints-blue_200);
  font-family: (--fonts-inter);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

header .menu .side-bar ul .active {
  color: var(--tints-yellow_100);
  font-weight: 600;
}

main section {
  display: flex;
  flex-direction: column;
}

main #home .banner-mobile {
  width: 100%;
  object-fit: cover;
}

main #home .banner-laptop {
  width: 100%;
  object-fit: cover;
  display: none;
}

main #home .banner-desktop {
  width: 100%;
  object-fit: cover;
  display: none;
  max-width: 148rem;
  margin: 0 auto;
}

main #campaign .purifiers-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 2.6rem 0rem;
}

main #campaign .purifiers-container h2 {
  color: var(--tints-blue_300);
  font-family: var(--fonts-museo);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
  margin: 0 2rem;
}

main #campaign .purifiers-container .swiper {
  width: 100%;
  height: 100%;
}

main #campaign .purifiers-container .swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  height: 58rem;
}

main #campaign .purifiers-container .swiper-slide img {
  display: block;
  width: 20rem;
  height: 24rem;
  object-fit: cover;
}

main #campaign .purifiers-container .swiper-slide .purifier-title {
  color: var(--tints-blue_300);
  font-family: var(--fonts-museo);
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}

main #campaign .purifiers-container .swiper-slide .purifier-description {
  color: var(--tints-blue_300);
  text-align: center;
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 24rem;
}

main #campaign .purifiers-container .swiper-slide .purifier-button {
  color: var(--tints-light_100);
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  border-radius: 8px;
  background: var(--tints-blue_100);
  width: 24rem;
  height: 6.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
}

main #campaign .purifiers-container .swiper-button-next,
main #campaign .purifiers-container .swiper-button-prev {
  height: 4.4rem;
  width: 4.4rem;
  border-radius: 50%;
  border: 2px solid var(--tints-blue_300);
  color: var(--tints-blue_300);
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: 1rem;
}

main #campaign .purifiers-container .swiper-pagination-bullet {
  background-color: var(--tints-light_100) !important;
  border: 2px solid var(--tints-blue_300) !important;
  border-radius: 50% !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 4px !important;
  opacity: 1 !important;
}

main #campaign .purifiers-container .swiper-pagination-bullet-active {
  background-color: var(--tints-blue_300) !important;
  opacity: 1 !important;
}

main #campaign .purifier-gift-container {
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 4rem;
}

main #campaign .purifier-gift-container h1 {
  color: var(--tints-blue_300);
  text-align: center;
  font-family: var(--fonts-museo);
  font-size: 3rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

main #campaign .purifier-gift-container img {
  width: 26rem;
}

main #campaign .purifier-gift-container .purifier-gift-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}

main
  #campaign
  .purifier-gift-container
  .purifier-gift-content
  .purifier-gift-title {
  color: var(--tints-blue_300);
  text-align: center;
  font-family: var(--fonts-museo);
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

main
  #campaign
  .purifier-gift-container
  .purifier-gift-content
  .purifier-gift-description {
  color: var(--tints-blue_300);
  text-align: center;
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

main #campaign .purifier-gift-container .buttons-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
}

main #campaign .purifier-gift-container .buttons-container .purifier-button {
  color: var(--tints-light_100);
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  border-radius: 8px;
  background: var(--tints-blue_100);
  height: 6.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  width: 100%;
  text-align: center;
  padding: 0 2rem;
}

main #campaign .purifiers-container .swiper-slide .purifier-button:hover {
  cursor: pointer;
  transition: all ease-in-out 200ms;
  filter: brightness(1.15);
}

main #gift-indication {
  background: var(--tints-blue_200);
  padding: 3.6rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

main #gift-indication h2 {
  color: var(--tints-light_100);
  text-align: center;
  font-family: var(--fonts-museo);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

main #gift-indication .form-model {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 4rem;
}

main #gift-indication .form-model .form-container {
  border-radius: 6px;
  background: var(--tints-light_100);
  padding: 3.4rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

main #gift-indication .form-model .form-container h4 {
  color: var(--tints-blue_300);
  text-align: center;
  font-family: var(--fonts-museo);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

main #gift-indication .form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: 100%;
}

main #gift-indication .form input {
  all: initial;
  border: none !important;
  color: var(--tints-blue_300);
  font-size: 1.4rem;
  height: 5rem;
  font-family: var(--fonts-roboto);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

main #gift-indication .form input:focus {
  border: none !important;
  border-bottom: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

main #gift-indication .form .input {
  height: 5rem;
  position: relative;
  border: 1px solid var(--tints-gray_100);
  border-radius: 4px;
  transition: 300ms ease-in-out;
  padding-left: 1rem;
  color: var(--tints-blue_300);
  font-size: 1.2rem;
}

main #gift-indication .form .input-line {
  display: flex;
  gap: 1.2rem;
}

main #gift-indication .form .input-line-desktop,
main #gift-indication .form .input-line-checkbox {
  flex-direction: column;
}

main #gift-indication .form .input-30 {
  width: 30%;
}

main #gift-indication .form .input-40 {
  width: 40%;
}

main #gift-indication .form .input-60 {
  width: 60%;
}

main #gift-indication .form .input-70 {
  width: 70%;
}

main #gift-indication .form .input input {
  width: 100%;
}

main #gift-indication .form .input label {
  position: absolute;
  left: 0;
  padding: 1.4rem 1rem;
  font-size: 1.4rem;
  color: var(--tints-gray_300);
  transition: 300ms ease-in-out;
  font-weight: 400;
}

main #gift-indication .form .input :focus ~ label,
main #gift-indication .form .input :valid ~ label {
  transform: translateX(1rem) translateY(-0.7rem);
  padding: 0 1rem;
  font-size: 1rem;
  background: #fff;
  font-family: var(--fonts-roboto);
  font-weight: 500;
  color: var(--tints-blue_300);
  border-left: 1px solid var(--tints-blue_300);
  border-right: 1px solid var(--tints-blue_300);
  vertical-align: middle;
}
main #gift-indication .form .input-select {
  padding-left: 0 !important;
  height: 5rem;
  width: 100%;
  position: relative;
  border: 1px solid var(--tints-gray_100);
  border-radius: 4px;
  transition: 300ms ease-in-out;
  padding-left: 1rem;
  color: var(--tints-blue_300);
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
}
main #gift-indication .form .input-select:hover {
  cursor: pointer;
}
main #gift-indication .form .input-select select {
  border: none;
  border-radius: 4px;
  height: 100%;
  width: 100%;
  font-size: 1.4rem;
  color: var(--tints-gray_300);
  font-weight: 400;
  padding-left: 1rem;
  appearance: none;
  outline: none;
  -webkit-appearance: none;
  cursor: pointer;
}

main #gift-indication .form .input-select img {
  position: absolute;
  right: 1.6rem;
  top: 2rem;
}

main
  #gift-indication
  .form-model
  .form-container
  .form
  .input-select
  select:focus {
  outline: none;
  color: var(--tints-blue_300);
}

main #gift-indication .form .input-checkbox {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fonts-roboto);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
main #gift-indication .form .input-checkbox input[type="checkbox"] {
  all: revert !important;
}

main #gift-indication .form .input-checkbox label {
  color: var(--tints-dark_100);
  cursor: pointer;
}

main #gift-indication .form .input-checkbox span {
  color: var(--tints-blue_100);
  text-decoration: underline;
  cursor: pointer;
}

main #gift-indication .form .input-file {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  text-align: center;
  display: block;
  cursor: pointer;
  background-color: var(--tints-light_100);
  color: var(--tints-blue_100);
  border: 2px solid var(--tints-blue_100);
  border-radius: 4px;
}

main #gift-indication .form .input-file:hover {
  transform: scale(1.02);
  transition: all ease-in-out 200ms;
}

main #gift-indication .form .input-file input[type="file"] {
  display: none;
}

main #gift-indication .form .input-file .file-input-label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
  width: 100%;
  text-transform: uppercase;
  text-align: center;
  border-radius: 4px;
  text-align: center;
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  cursor: pointer;
}

main #gift-indication .form .input-file .file-name {
  display: none;
  gap: 5px;
  justify-content: center;
  padding: 2rem 1rem;
}

main #gift-indication .form .input-file .file-name:hover {
  cursor: pointer;
}

main #gift-indication .form .input-file .file-name p {
  color: var(--tints-blue_100);
  font-family: var(--fonts-roboto);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: justify;
}

main #gift-indication .form .input-link {
  display: flex;
  align-items: center;
}

main #gift-indication .form .link-cep {
  color: var(--tints-blue_300);
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
}

main #gift-indication .form p {
  color: var(--tints-dark_100);
  font-family: var(--fonts-roboto);
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: justify;
  margin: 1.2rem 0;
}

main #gift-indication .form .form-button {
  color: var(--tints-light_100);
  text-align: center;
  font-family: var(--fonts-roboto);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--tints-blue_100);
  width: 100%;
  height: 6.2rem;
  border: none;
  text-align: center;
  padding: 0 1rem;
}

main #gift-indication .form .form-button:hover,
.purifier-button:hover,
main #gift-indication .form-conclude .form-container .form-button:hover {
  cursor: pointer;
  transition: all ease-in-out 200ms;
  filter: brightness(1.15);
}

.loading {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 6.2rem;
}
.lds-dual-ring {
  display: inline-block;
  width: 4rem;
  height: 4rem;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 6px solid var(--tints-blue_100);
  border-color: var(--tints-blue_100) transparent var(--tints-blue_100)
    transparent;
  animation: lds-dual-ring 1s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

main #gift-indication .form-model a {
  color: var(--tints-light_100);
  text-align: center;
  font-family: var(--fonts-roboto);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
}

main #gift-indication .form-conclude {
  margin-bottom: 5rem;
}

main #gift-indication .form-conclude .form-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

main #gift-indication .form-conclude .form-container img {
  width: 12rem;
  height: 12rem;
}

main #gift-indication .form-conclude .form-container h4 {
  color: var(--tints-blue_300);
  font-family: var(--fonts-museo);
  font-size: 30px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-align: center;
}

main #gift-indication .form-conclude .form-container p {
  color: var(--tints-blue_300);
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

main #gift-indication .form-conclude .form-container .form-button {
  color: var(--tints-light_100);
  text-align: center;
  font-family: var(--fonts-roboto);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  border-radius: 4px;
  background: var(--tints-blue_100);
  width: 100%;
  height: 6.2rem;
  border: none;
}

main #gift-indication .form-1,
main #gift-indication .form-2,
main #gift-indication .form-conclude,
main #gift-indication .vertical-line {
  display: none;
}

main #commom-questions {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  padding: 5rem 2rem 1rem;
}

main #commom-questions h2 {
  color: var(--tints-blue_300);
  font-family: var(--fonts-museo);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

main #commom-questions .questions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

main #commom-questions .question {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.2rem;
  border-radius: 4px;
  border: 1px solid var(--tints-gray_100);
  padding: 1.8rem 1.6rem;
  cursor: pointer;
  background: var(--tints-light_200);
}

main #commom-questions .question:hover {
  transition: all ease-in-out 150ms;
  border-color: var(--tints-blue_100);
}

main #commom-questions .question-active {
  border-color: var(--tints-blue_100);
  transition: all ease-in-out 800ms;
}

main #commom-questions .question-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

main #commom-questions .question-title h5 {
  color: var(--tints-blue_300);
  font-family: var(--fonts-museo);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

main #commom-questions .question-title .icon-plus {
  display: block;
}

main #commom-questions .question-title .icon-plus-active {
  display: none;
}

main #commom-questions .question-title .icon-minus {
  display: none;
}

main #commom-questions .question-title .icon-minus-active {
  display: block;
}

main #commom-questions .question-description {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 0.375px;
  display: none;
  text-align: justify;
}

main #commom-questions .question-description-active {
  display: block;
}

main #regulations {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  padding: 3rem 2rem 10rem;
}

main #regulations h2 {
  color: var(--tints-blue_300);
  font-family: var(--fonts-museo);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

main #regulations p {
  color: var(--tints-dark_100);
  font-family: var(--fonts-roboto);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8rem;
  text-align: justify;
}

main #regulations button {
  color: var(--tints-blue_300);
  font-family: var(--fonts-roboto);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8rem;
  text-decoration-line: underline;
  background: none;
  border: none;
  text-align: left;
}

main #regulations .regulation-content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

main #regulations .regulation-content ul {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-left: 4rem;
  list-style: none;
  font-size: 1.2rem;
}

main #regulations .regulation-content ul li ul {
  display: flex;
  flex-direction: column;
  margin-left: 4rem;
  list-style: disc;
  font-size: 1rem;
  margin-top: 1rem;
}

main #regulations .regulation-container {
  max-height: 60rem;
  overflow-y: scroll;
  padding-right: 1rem;
  gap: 1.6rem;
  display: flex;
  flex-direction: column;
}

.link-cep:hover,
.link:hover,
.link-message:hover,
main #regulations #show-regulation-content:hover {
  cursor: pointer;
  transition: all ease-in-out 150ms;
  color: var(--tints-blue_100) !important;
}

.active {
  display: flex !important;
}

.hide {
  display: none !important;
}

footer {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  padding: 5rem 2rem 10rem;
  background: var(--tints-light_200);
  margin-bottom: 10rem;
}

footer .content-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}

footer .content-info h2 {
  color: var(--tints-blue_300);
  font-family: var(--fonts-museo);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

footer .content-info p {
  color: var(--tints-dark_100);
  font-family: var(--fonts-roboto);
  text-align: center;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

footer .contact-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5.4rem;
}

footer .contact-container .contact-content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  justify-content: center;
  align-items: center;
  background: var(--tints-light_100);
  padding: 6rem;
  border-radius: 1.6rem;
}

footer .contact-container .contact-content img {
  height: 4rem;
  width: 4rem;
}

footer .contact-container .contact-content .contact-content-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

footer .contact-container .contact-content .contact-content-info span,
footer .contact-container .contact-content .contact-content-info .link {
  color: var(--tints-blue_300);
  font-family: var(--fonts-museo);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
}

footer .contact-container .contact-content .contact-content-info p,
footer .contact-container .contact-content .contact-content-info p a {
  color: var(--tints-dark_100);
  text-align: center;
  font-family: var(--fonts-roboto);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

footer .customer-service-hours {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

footer .customer-service-hours span {
  color: var(--tints-dark_100);
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}

footer .customer-service-hours p {
  color: var(--tints-dark_100);
  font-family: var(--fonts-roboto);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

main hr {
  opacity: 0;
}

.toast {
  position: fixed;
  top: 10rem;
  right: 0;
  background-color: var(--tints-light_100);
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 1.6rem 2rem 1.6rem 1.6rem;
  gap: 1.2rem;
  border-left: 8px solid var(--tints-red_100);
  z-index: 800;
  display: none;
}

.green-toast {
  border-left: 8px solid var(--tints-green_100);
}

.yellow-toast {
  border-left: 8px solid var(--tints-yellow_200);
}

.toast img {
  width: 3.2rem;
  height: 3.2rem;
}

.toast .toast-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
  align-items: flex-start;
}

.toast .toast-info span {
  color: var(--tints-dark_100);
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-align: center;
}

.toast .toast-info p {
  color: var(--tints-dark_100);
  font-family: var(--fonts-roboto);
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.modal-container,
.modal-terms {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--background-modal);
  padding: 16rem 3rem;
  display: none;
}

.modal-container .modal-content,
.modal-terms .modal-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  background: var(--tints-light_100);
  width: 100%;
  position: relative;
  padding: 4rem 6rem;
  border-radius: 2.4rem;
}

.modal-container .modal-content .close-modal-button,
.modal-terms .modal-content .close-modal-terms-button {
  position: absolute;
  top: -2rem;
  right: -2rem;
  cursor: pointer;
}

.modal-container .modal-content h5 {
  color: var(--tints-blue_300);
  text-align: center;
  font-family: var(--fonts-museo);
  font-size: 2rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.modal-container .modal-content .options {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  align-items: center;
  justify-content: center;
}
.modal-container .modal-content a {
  text-decoration: none;
  color: var(--tints-blue_300);
  text-align: center;
  font-family: var(--fonts-roboto);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.modal-container .modal-content a .option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  border: 1px solid var(--tints-gray_200);
  border-radius: 8px;
  padding: 4.8rem 2rem;
}

.modal-container .modal-content a .option img {
  width: 8rem;
}

.modal-terms .modal-content {
  max-width: 80rem;
  height: 36rem;
  margin: 0 auto;
}

.modal-terms .modal-content .modal-content-terms {
  max-height: 60rem;
  overflow-y: scroll;
  padding-right: 1rem;
  gap: 1.6rem;
  display: flex;
  flex-direction: column;
}

.modal-terms .modal-content p {
  color: var(--tints-dark_100);
  font-family: var(--fonts-roboto);
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8rem;
  text-align: justify;
}

.info-container {
  position: relative;
  cursor: pointer;
}

.info-container .info-box {
  display: none;
  position: absolute;
  background-color: var(--tints-blue_300);
  border-radius: 6px;
  padding: 1rem 1.6rem;
  width: 22rem;
  right: -10rem;
  top: -9rem;
}

.info-container .info-box p {
  color: var(--tints-light_100) !important;
  text-align: center !important;
  font-family: var(--fonts-roboto) !important;
  font-size: 1.2rem !important;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.info-container:hover .info-box {
  display: block;
}

@keyframes slideLeft {
  from {
    transform: translateX(200%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(200%);
  }
}

@media (min-width: 374px) {
  main #campaign .purifiers-container .swiper-slide img {
    width: 24rem;
    height: 24rem;
  }
  main #campaign .purifier-gift-container .purifier-gift img {
    width: 26rem;
  }

  main #campaign .purifier-gift-container .buttons-container .purifier-button,
  main #gift-indication .form .form-button {
    padding: 0;
  }
}

@media (min-width: 390px) {
  main #campaign .purifiers-container {
    padding: 2.6rem 2rem;
  }
}

@media (min-width: 390px) {
  main #campaign .purifiers-container {
    padding: 6rem 2rem;
  }
}

@media (min-width: 767px) {
  main #home .banner-mobile {
    display: none;
  }

  main #home .banner-laptop {
    display: block;
  }

  main #campaign .purifier-gift-container {
    display: grid;
    grid-template-areas:
      "image title"
      "image info"
      "image buttons";
  }

  main #campaign .purifier-gift-container h1 {
    grid-area: title;
    width: 40rem;
    text-align: start;
  }

  main #campaign .purifier-gift-container img {
    grid-area: image;
    margin-right: 5rem;
  }

  main #campaign .purifier-gift-container .purifier-gift-content {
    grid-area: info;
    width: 40rem;
    align-items: flex-start;
  }

  main #campaign .purifier-gift-container .purifier-gift-content p {
    text-align: start !important;
  }

  main #campaign .purifier-gift-container .buttons-container {
    grid-area: buttons;
    width: 40rem;
    align-items: flex-start;
  }

  main #campaign .purifier-gift-container .buttons-container .purifier-button {
    width: 30rem;
  }

  main
    #campaign
    .purifier-gift-container
    .buttons-container
    .purifier-button.buy-by-website {
    display: none;
  }

  main #gift-indication .form-model .form-container {
    max-width: 64rem;
  }

  main #commom-questions .question-description {
    padding-right: 4rem;
  }

  footer .contact-container .contact-content {
    width: 30rem;
    height: 30rem;
  }

  .modal-container .modal-content {
    width: 70rem;
    margin: 0 auto;
  }

  .modal-container .modal-content .options {
    flex-direction: row;
  }

  .modal-container .modal-content a .option {
    height: 24rem;
    width: 24rem;
  }

  /*Resize Fonts*/
  main #regulations p {
    font-size: 1.4rem;
  }

  main #gift-indication .form input,
  main #gift-indication .form .input-select,
  main #commom-questions .question-title h5,
  footer .link-message,
  footer .contact-container .contact-content .contact-content-info p {
    font-size: 1.6rem !important;
  }

  main
    #campaign
    .purifier-gift-container
    .purifier-gift-content
    .purifier-gift-description,
  footer .contact-container .contact-content .contact-content-info .link {
    font-size: 2rem;
  }

  main
    #campaign
    .purifier-gift-container
    .purifier-gift-content
    .purifier-gift-title {
    font-size: 2.4rem;
  }

  main #campaign .purifiers-container h2,
  main #gift-indication h2,
  main #commom-questions h2,
  main #regulations h2,
  footer .content-info h2 {
    text-align: center;
    font-size: 4.2rem;
    font-weight: 600;
  }
}

@media (min-width: 1023px) {
  header {
    border-radius: 8px;
    flex-direction: row;
    height: 6.8rem;
    position: fixed;
    top: 2rem;
    left: 2rem;
    right: 2rem;
    padding: 0 4rem;
    z-index: 999;
    margin: 0 auto;
    max-width: 128rem;
  }

  header nav {
    display: flex;
  }

  header .menu {
    display: none;
  }

  main #home .banner-desktop {
    object-fit: contain;
  }

  main #home {
    background: var(--tints-blue_300);
  }
  main #campaign {
    max-width: 148rem;
    margin: 0 auto;
  }

  main #campaign .purifier-gift-container .purifier-gift-content {
    width: 70rem;
  }

  main #campaign .purifiers-container .swiper-slide .purifier-description {
    height: 8rem;
  }

  main #campaign .purifier-gift-container img {
    width: 40rem;
  }

  main #gift-indication .form {
    flex-direction: row;
    gap: 0;
    background: var(--tints-light_100);
    border-radius: 6px;
    align-items: center;
    max-width: 148rem;
  }

  main #gift-indication .form-1,
  main #gift-indication .form-2 {
    display: flex;
    width: 50%;
    height: 100%;
  }

  main #gift-indication .vertical-line {
    border-left: 2px solid var(--tints-gray_100);
    height: 50rem;
    display: block;
  }

  main #gift-indication .form-model .form-container h4 {
    color: var(--tints-blue_300);
    text-align: center;
    font-family: var(--fonts-museo);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: start;
  }

  main #gift-indication .form-1 .button-form-1 {
    display: none;
  }

  main #gift-indication .form-link {
    display: none;
  }

  main #gift-indication .form .input-line-desktop {
    flex-direction: row;
  }

  main #gift-indication .form .input-65 {
    width: 65%;
  }

  main #gift-indication .form .input-35 {
    width: 35%;
  }

  main #gift-indication .form .input-line-checkbox {
    flex-direction: row;
  }

  main #gift-indication .form .input-checkbox {
    gap: 3px;
    width: 60%;
  }

  main #campaign .purifier-gift-container .buttons-container .purifier-button {
    width: 30rem;
  }

  main #commom-questions,
  main #regulations {
    max-width: 92rem;
    margin: 0 auto;
  }

  footer .contact-container .contact-content img {
    height: 6rem;
    width: 6rem;
  }
}

@media (min-width: 1439px) {
  main #home .banner-laptop {
    display: none;
  }
  main #home .banner-desktop {
    display: block;
  }

  main #campaign .purifiers-container .swiper-slide .purifier-button,
  main #campaign .purifiers-container .swiper-slide .purifier-description {
    width: 36rem;
  }

  main #commom-questions {
    max-width: 128rem;
    padding: 10rem 0 0;
    margin: 0 auto;
  }

  main #regulations {
    max-width: 128rem;
    padding: 10rem 0;
    margin: 0 auto;
  }
  /*Rezize Fonts*/
  main #campaign .purifier-gift-container h1 {
    font-size: 6rem;
  }
}