:root {
  /* ------------------ */
  /* MAIN COLOR SCHEMES */
  /* ------------------ */
  --color-00-main-white: #ffffff;
  --color-00-main-black: #000000;
  --color-01-TimberWolf: #dad7cd;
  --color-02-SageGreen: #a3b18a;
  --color-03-HippieGreen: #588157;
  --color-04-WinterPine: #3a5a40;
  --color-05-BrunswickGreen: #344e41;
  /* --------------- */
  /* PAGE BACKGROUND */
  /* --------------- */
  --color-page-background: #a9a9a9;
  /* ----------- */
  /* BOX SHADOWS */
  /* ----------- */
  --color-box-shadow-01: 3px 5px 20px rgba(0, 0, 0, 0.35);
  --color-box-shadow-02: 0px 5px 4px rgba(0, 0, 0, 0.35);
  --color-box-shadow-03: 0px 1px 5px 3px rgba(0, 0, 0, 0.15);
  --color-box-shadow-04: 0px 5px 20px rgba(0, 0, 0, 0.35);
  /* -------------------------- */
  /* SOCIAL MEDIA COLOR SCHEMES */
  /* -------------------------- */
  --color-Facebook: #3b5998;
  --color-Instagram: #c32aa3;
  --color-LinkedIn: #0077b5;
  --color-X: #000000;
  --color-TikTok: #ffffff;
  --color-YouTube: #ff0000;
  --color-WhatsApp: #25d366;
  --color-Telegram: #0088cc;
  /* ------------------------------------------------- */
  /* CALL TO ACTION SECTION - BACKGROUND COLOR SCHEMES */
  /* ------------------------------------------------- */
  --color-cta-section-background-01: #dad7cd;
  --color-cta-section-background-02: #a3b18a;
  --color-cta-section-background-03: #588157;
  --color-cta-section-background-04: #3a5a40;
  --color-cta-section-background-05: #344e41;
  --color-cta-section-title-00: #ffffff;
  --color-cta-section-title-01: #dad7cd;
  --color-cta-section-title-02: #a3b18a;
  --color-cta-section-title-03: #588157;
  --color-cta-section-title-04: #3a5a40;
  --color-cta-section-title-05: #344e41;
  /* ------------------------------------------------ */
  /* RESELLER / CATALOGUE SIGNUP SECTION COLOR SCHEME */
  /* ------------------------------------------------ */
  --color-reseller-title-section-background: #000000;
  --color-reseller-title-section-title: #ffffff;
  --color-resellers-background: #dad7cd;
  --color-resellers-background-gradient-1: #a3b18a;
  --color-resellers-background-gradient-2: #588157;
  --color-resellers-form-title: #588157;
  --color-resellers-form-popi-and-privacy-text: #588157;
  --color-resellers-form-input-field-background: #ffffff;
  --color-resellers-form-input-field-placeholder: #000000;
  --color-resellers-form-input-field-icons: #588157;
  --color-resellers-form-input-field-text: #000000;
  --color-resellers-form-checkbox-background: #ffffff;
  --color-resellers-form-checkbox-border-normal: #588157;
  --color-resellers-form-checkbox-border-focussed: #588157;
  --color-resellers-form-checkbox-check-mark-checked: #588157;
  --color-resellers-form-checkbox-disabled: #959495;
  --color-resellers-form-submit-button-background: #000000;
  --color-resellers-form-submit-button-text: #ffffff;
  --color-resellers-panel-content-header: #000000;
  --color-resellers-panel-content-text: #ffffff;
  --color-resellers-panel-button-background: #000000;
  --color-resellers-panel-button-border: #ffffff;
  --color-resellers-panel-button-text: #dad7cd;
  /* ------ */
  /* FOOTER */
  /* ------ */
  --color-footer-section-horisontal-line: #d3d3d3;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "poppins", sans-serif;
  user-select: none;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-size: 1.6rem;
}

/* REMOVE BULLET POINTS FROM ALL LIST ITEMS */

li {
  list-style: none;
}

/* REMOVE "UNDERLINES" FROM ALL ANCHORS */

a {
  text-decoration: none;
}

/* ============================================================== */
/* STYLES FOR HEADING ELEMENTS - SMALLER SCREENS / MOBILE DEVICES */
/* ============================================================== */

/* ------------------------------ */
/* STYLES FOR ALL HEADER ELEMENTS */
/* ------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "poppins";
  margin: 0rem 0rem 2rem 0rem;
  font-weight: 300;
}

/* ------------------------------------- */
/* STYLES FOR INDIVIDUAL HEADER ELEMENTS */
/* ------------------------------------- */

h1 {
  font-size: 4rem;
  line-height: 1.2;
  letter-spacing: 0.1rem;
}

h2 {
  font-size: 3.6rem;
  line-height: 1.25;
  letter-spacing: 0.1rem;
}

h3 {
  font-size: 3rem;
  line-height: 1.3;
  letter-spacing: 0.1rem;
}

h4 {
  font-size: 2.4rem;
  line-height: 1.35;
  letter-spacing: 0.08rem;
}

h5 {
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

h6 {
  font-size: 1.5rem;
  line-height: 1.6;
  letter-spacing: 0;
}

/* ============================================================== */
/* STYLES FOR HEADING ELEMENTS - LARGER SCREENS / PCs & LAPTOPS   */
/* ============================================================== */

@media (min-width: 600px) {
  h1 {
    font-size: 5rem;
  }
  h2 {
    font-size: 4.2rem;
  }
  h3 {
    font-size: 3.6rem;
  }
  h4 {
    font-size: 3rem;
  }
  h5 {
    font-size: 2.4rem;
  }
  h6 {
    font-size: 1.5rem;
  }
}

/* =================================================================================================== */

/* ========================================== */
/* TODO: HEADER : NAVIGATION & SLIDER SECTION */
/* ========================================== */

/* ======================================== */
/* STYLING - STICKY HEADER & NAVIGATION BAR */
/* ======================================== */

header {
  z-index: 999;
  /* position: absolute; */
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 10rem;
  transition: 0.5s ease;
  background: rgba(0, 0, 0, 0.5);
}

header .logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .logo {
  position: relative;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .logo .logo-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5rem;
  object-fit: contain;
  padding: 0.5rem;
}

header .logo-text {
  color: var(--color-00-main-white);
  font-size: 1.8rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.5rem;
}

header .navigation {
  position: relative;
}

header .navigation .navigation-items a {
  position: relative;
  color: var(--color-00-main-white);
  font-size: 1.6rem;
  font-weight: 500;
  text-decoration: none;
  margin-left: 2rem;
  transition: 0.3s ease;
}

header .navigation .navigation-items a:before {
  content: "";
  position: absolute;
  background: var(--color-02-SageGreen);
  width: 0;
  height: 3px;
  bottom: 0;
  left: 0;
  transition: 0.3s ease;
}

header .navigation .navigation-items a:hover:before {
  width: 100%;
}

/* ======================================================= */
/* STYLING - VIDEO INFORMATION SLIDER & SOCIAL MEDIA LINKS */
/* ======================================================= */

section {
  padding: 100px 200px;
}

.home {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: var(--color-03-HippieGreen);
}

.home:before {
  z-index: 777;
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* ---------------------- */
/* STYLING - VIDEO SLIDER */
/* ---------------------- */

.home video {
  z-index: 000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-slide {
  position: absolute;
  width: 100%;
  clip-path: circle(0% at 0 50%);
}

.video-slide.active {
  clip-path: circle(150% at 0 50%);
  transition: 2s ease;
  transition-property: clip-path;
}

/* --------------------------------- */
/* STYLING - VIDEO SLIDER NAVIGATION */
/* --------------------------------- */

.slider-navigation {
  z-index: 888;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(250px);
  margin-bottom: 2rem;
}

.slider-navigation .nav-btn {
  width: 1.3rem;
  height: 1.3rem;
  background: var(--color-01-TimberWolf);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--color-box-shadow-01);
  transition: 0.3s ease;
}

.slider-navigation .nav-btn.active {
  background: var(--color-02-SageGreen);
}

.slider-navigation .nav-btn:not(:last-child) {
  margin-right: 2rem;
}

.slider-navigation .nav-btn:hover {
  transform: scale(1.3);
}

/* ----------------------- */
/* STYLING - VIDEO CONTENT */
/* ----------------------- */

.home .content {
  z-index: 888;
  color: var(--color-00-main-white);
  width: 70%;
  margin-top: 5rem;
  margin-left: -9rem;
  display: none;
}

.home .content.active {
  display: block;
}

.home .content h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 2.2rem;
  margin-bottom: 1rem;
}

.home .content p {
  margin-bottom: 5rem;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-01-TimberWolf);
}

.home .content a {
  background: var(--color-03-HippieGreen);
  color: var(--color-01-TimberWolf);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-decoration: none;
  border-radius: 1rem;
  padding: 1.5rem 2.5rem;
  box-shadow: var(--color-box-shadow-01);
}

/* ---------------------------- */
/* STYLING - SOCIAL MEDIA LINKS */
/* ---------------------------- */

.home .media-icons {
  z-index: 888;
  position: absolute;
  right: 3rem;
  display: flex;
  flex-direction: column;
  transition: 0.5s ease;
}

.home .media-icons a {
  color: var(--color-01-TimberWolf);
  font-size: 2.2rem;
  transition: 0.3s ease;
}

.home .media-icons a:not(:last-child) {
  margin-bottom: 20px;
}

.home .media-icons a:hover {
  transform: scale(1.3);
}

/* ===================================================== */
/* MEDIA QUERIES - STYLING FOR RESPONSIVENESS OF HEADER  */
/* ===================================================== */

@media (max-width: 1070px) {
  header .logo-text {
    font-size: 1.6rem;
  }
}

@media (max-width: 1040px) {
  header {
    padding: 1.2rem 2rem;
  }

  section {
    padding: 10rem 2rem;
  }

  .home .content {
    margin-left: 0rem;
  }

  .home .media-icons {
    right: 1.5rem;
  }

  header .navigation {
    display: none;
    /* position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(1, 1, 1, 0.5); */
  }

  header .navigation.active {
    /* display: none; */
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(1, 1, 1, 0.5);
  }

  header .navigation .navigation-items a {
    color: var(--color-01-TimberWolf);
    font-size: 2rem;
    margin: 1.5rem;
  }

  header .navigation .navigation-items a:before {
    background: var(--color-00-main-white);
    height: 5px;
  }

  header .navigation.active .navigation-items {
    background: var(--color-03-HippieGreen);
    width: 600px;
    max-width: 600px;
    margin: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 1rem;
    box-shadow: var(--color-box-shadow-01);
  }

  .menu-btn {
    background: url(../images/Navigation/menu_hamburger.png) no-repeat;
    background-size: 3rem;
    background-position: center;
    width: 4rem;
    height: 5rem;
    cursor: pointer;
    transition: 0.3s ease;
  }

  .menu-btn.active {
    z-index: 999;
    background: url(../images/Navigation/menu_close.png) no-repeat;
    background-size: 3rem;
    background-position: center;
    transition: 0.3s ease;
  }
}

@media (max-width: 560px) {
  .slider-navigation {
    transform: translateY(255px);
    margin-bottom: 1rem;
  }

  .slider-navigation .nav-btn {
    width: 1rem;
    height: 1rem;
  }

  .slider-navigation .nav-btn:not(:last-child) {
    margin-right: 1rem;
  }

  .home .content h1 {
    font-size: 1.6rem;
    line-height: 1.6rem;
  }

  .home .content p {
    font-size: 1.3rem;
  }

  .home .content a {
    font-size: 1.6rem;
    padding: 1rem 2rem;
  }

  header .navigation .navigation-items a {
    font-size: 1.8rem;
  }
}

@media (max-width: 360px) {
  .slider-navigation .nav-btn {
    width: 0.8rem;
    height: 0.8rem;
  }

  .slider-navigation .nav-btn:not(:last-child) {
    margin-right: 0.8rem;
  }

  .home .content h1 {
    font-size: 1.4rem;
    line-height: 1.4rem;
  }

  .home .content p {
    font-size: 1.1rem;
  }

  .home .content a {
    font-size: 1.4rem;
    padding: 1rem 2rem;
  }

  header .navigation .navigation-items a {
    font-size: 1.6rem;
  }
}

@media (max-width: 330px) {
  .home .content h1 {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .home .content p {
    font-size: 1rem;
  }
}

@media (max-width: 290px) {
  .home .content h1 {
    font-size: 1.1rem;
    line-height: 1.1rem;
  }
}

/* =================================================================================================== */

/* ======================================================= */
/* TODO: CALL TO ACTION SECTIONS (CLICKABLE CATEGORY TAGS) */
/* ======================================================= */

/* ----------------------- */
/* NEW SECTION - CONTAINER */
/* ----------------------- */

.new__section__container {
  position: relative;
  top: 0rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: auto;
  object-fit: cover;
  margin: 0rem 0rem 0rem 0rem;
}

/* ------------------- */
/* NEW SECTION - TITLE */
/* ------------------- */

/* .new__section__title h5 {
  display: flex;
  justify-content: center;
  justify-items: center;
  text-transform: uppercase;
  width: 100%;
  padding: 1.5rem 1rem 1.5rem 1rem;
  background-color: #eee;
  text-align: center;  
} */

/* ----------------------- */
/* NEW SECTION - SUB-TITLE */
/* ----------------------- */

/* .new__section__sub__title p {
  display: flex;
  justify-content: center;
  justify-items: center;
  font-size: 1.2rem;
  text-transform: uppercase;
  width: 100%;
  margin: -4rem 0rem 0rem 0rem;
  padding: 0rem 1rem 0rem 1rem;
  background-color: #eee;
  text-align: center;
} */

/* NEW SECTION - BUTTONS / DOWNLOADABLE BROCHURE / LINK TO NEW SECTION */

/* MOBILE FIRST */

/* .new__section__buttons__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: -2rem 0rem 0rem 0rem;  
} */

/* .new__section__button {
  text-decoration: none;
  text-transform: uppercase;
  width: 18rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  margin: 1rem 1rem 2.5rem 1rem;
  padding: 1rem 0.5rem 1rem 0.5rem;
  border: none;
  outline: none;
  background: #dc143c;
  border-radius: 0.5rem;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
  text-align: center;
} */

/* .new__section__button a {
  text-decoration: none;
  color: white;
  cursor: pointer;
} */

/* .new__section__button:hover {
  transform: scale(1.05);
} */

/* MEDIA QUERIES: LARGER SCREENS */

/* @media screen and (min-width: 670px) {
  .new__section__buttons__container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;    
  }
} */

/* ============================================ */
/* CATEGORY 01 - WOMEN (CALL TO ACTION SECTION) */
/* ============================================ */

/* ------------------- */
/* VIEW - MOBILE FIRST */
/* ------------------- */

/* CALL TO ACTION - TITLE 01 */

.cta__section__title__01 {
  display: flex;
  justify-content: center;
  justify-items: center;
  flex-direction: column;
  width: 100vw;
  background-color: var(--color-cta-section-background-05);
}

.cta__section__title__01 h5 {
  display: flex;
  justify-content: center;
  justify-items: center;
  color: var(--color-cta-section-title-00);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.25rem;
  width: 100vw;
  margin: 8rem 0.5rem 2rem 0.5rem;
  padding: 1.5rem 2.5rem 0rem 2.5rem;
  text-align: center;
}

.cta__section__title__01 h6 {
  display: flex;
  justify-content: center;
  justify-items: center;
  text-transform: none;
  width: 100vw;
  margin: 0rem 0.5rem 0rem 0.5rem;
  padding: 1rem 5rem 1rem 5rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

/* CALL TO ACTION - CLICKABLE TAGS CONTAINER 01  */

.cta__clickable__tags__container__01 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  padding: 1rem 0rem 8rem 0rem;
  background-color: var(--color-cta-section-background-05);
}

/* CALL TO ACTION - CLICKABLE TAGS */

.cta__clickable__tags {
  position: relative;
  width: 52rem;
  height: 37rem;
  margin: 2rem 2rem 2rem 2rem;
  padding: 0rem 0rem 0rem 0rem;
  border-radius: 1.5rem;
  border: none;
  outline: none;
  box-shadow: var(--color-box-shadow-01);
}

.cta__clickable__tags a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  border-radius: 1.5rem;
  box-shadow: var(--color-box-shadow-01);
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
}

.cta__clickable__tags a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  object-fit: contain;
}

.cta__clickable__tags a:hover {
  transform: scale(1.04);
}

/* ------------------------------ */
/* MEDIA QUERIES - LARGER SCREENS */
/* ------------------------------ */

@media screen and (max-width: 800px) {
  .cta__clickable__tags {
    margin: 2rem 2.5rem 2rem 0.2rem;
    width: 39rem;
    height: 27.75rem;
  }
}

@media screen and (max-width: 460px) {
  .cta__clickable__tags {
    margin: 2rem 2rem 2rem 0.2rem;
    width: 32.5rem;
    height: 23.125rem;
  }

  .cta__section__title__01 h5,
  .cta__section__title__02 h5,
  .cta__section__title__03 h5,
  .cta__section__title__04 h5,
  .cta__section__title__05 h5 {
    margin: 8rem 1.5rem 1rem 1.5rem;
    text-align: center;
    font-size: 2rem;
  }

  .cta__section__title__01 h6,
  .cta__section__title__02 h6,
  .cta__section__title__03 h6,
  .cta__section__title__04 h6,
  .cta__section__title__05 h6 {
    margin: 0rem 1.5rem 2rem 1.5rem;
    padding: 0rem 2rem 0rem 2rem;
    text-align: justify;
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 400px) {
  .cta__clickable__tags {
    width: 26rem;
    height: 18.5rem;
  }
}

@media screen and (max-width: 300px) {
  .cta__clickable__tags {
    width: 24rem;
    height: 17.08rem;
  }

  .cta__section__title__01 h5,
  .cta__section__title__02 h5,
  .cta__section__title__03 h5,
  .cta__section__title__04 h5,
  .cta__section__title__05 h5 {
    font-size: 1.8rem;
  }

  .cta__section__title__01 h6,
  .cta__section__title__02 h6,
  .cta__section__title__03 h6,
  .cta__section__title__04 h6,
  .cta__section__title__05 h6 {
    font-size: 1.1rem;
  }
}

/* ========================================== */
/* CATEGORY 02 - MEN (CALL TO ACTION SECTION) */
/* ========================================== */

/* CALL TO ACTION - TITLE 02 */

.cta__section__title__02 {
  display: flex;
  justify-content: center;
  justify-items: center;
  flex-direction: column;
  width: 100vw;
  background-color: var(--color-cta-section-background-04);
}

.cta__section__title__02 h5 {
  display: flex;
  justify-content: center;
  justify-items: center;
  color: var(--color-cta-section-title-00);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.25rem;
  width: 100vw;
  margin: 8rem 0.5rem 2rem 0.5rem;
  padding: 1.5rem 2.5rem 0rem 2.5rem;
  text-align: center;
}

.cta__section__title__02 h6 {
  display: flex;
  justify-content: center;
  justify-items: center;
  text-transform: none;
  width: 100vw;
  margin: 0rem 0.5rem 0rem 0.5rem;
  padding: 1rem 5rem 1rem 5rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

/* CALL TO ACTION - CLICKABLE TAGS CONTAINER 02  */

.cta__clickable__tags__container__02 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  padding: 1rem 0rem 8rem 0rem;
  background-color: var(--color-cta-section-background-04);
}

/* =========================================== */
/* CATEGORY 03 - KIDS (CALL TO ACTION SECTION) */
/* =========================================== */

/* CALL TO ACTION - TITLE 03 */

.cta__section__title__03 {
  display: flex;
  justify-content: center;
  justify-items: center;
  flex-direction: column;
  width: 100vw;
  background-color: var(--color-cta-section-background-03);
}

.cta__section__title__03 h5 {
  display: flex;
  justify-content: center;
  justify-items: center;
  color: var(--color-cta-section-title-00);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.25rem;
  width: 100vw;
  margin: 8rem 0.5rem 2rem 0.5rem;
  padding: 1.5rem 2.5rem 0rem 2.5rem;
  text-align: center;
}

.cta__section__title__03 h6 {
  display: flex;
  justify-content: center;
  justify-items: center;
  text-transform: none;
  width: 100vw;
  margin: 0rem 0.5rem 0rem 0.5rem;
  padding: 1rem 5rem 1rem 5rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

/* CALL TO ACTION - CLICKABLE TAGS CONTAINER 03  */

.cta__clickable__tags__container__03 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  padding: 1rem 0rem 8rem 0rem;
  background-color: var(--color-cta-section-background-03);
}

/* =========================================== */
/* CATEGORY 04 - GEAR (CALL TO ACTION SECTION) */
/* =========================================== */

/* CALL TO ACTION - TITLE 04 */

.cta__section__title__04 {
  display: flex;
  justify-content: center;
  justify-items: center;
  flex-direction: column;
  width: 100vw;
  background-color: var(--color-cta-section-background-02);
}

.cta__section__title__04 h5 {
  display: flex;
  justify-content: center;
  justify-items: center;
  color: var(--color-cta-section-title-00);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.25rem;
  width: 100vw;
  margin: 8rem 0.5rem 2rem 0.5rem;
  padding: 1.5rem 2.5rem 0rem 2.5rem;
  text-align: center;
}

.cta__section__title__04 h6 {
  display: flex;
  justify-content: center;
  justify-items: center;
  text-transform: none;
  width: 100vw;
  margin: 0rem 0.5rem 0rem 0.5rem;
  padding: 1rem 5rem 1rem 5rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

/* CALL TO ACTION - CLICKABLE TAGS CONTAINER 04  */

.cta__clickable__tags__container__04 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  padding: 1rem 0rem 8rem 0rem;
  background-color: var(--color-cta-section-background-02);
}

/* =========================================== */
/* CATEGORY 05 - TECH (CALL TO ACTION SECTION) */
/* =========================================== */

/* CALL TO ACTION - TITLE 05 */

.cta__section__title__05 {
  display: flex;
  justify-content: center;
  justify-items: center;
  flex-direction: column;
  width: 100vw;
  background-color: var(--color-cta-section-background-01);
}

.cta__section__title__05 h5 {
  display: flex;
  justify-content: center;
  justify-items: center;
  color: var(--color-cta-section-title-00);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.25rem;
  width: 100vw;
  margin: 8rem 0.5rem 2rem 0.5rem;
  padding: 1.5rem 2.5rem 0rem 2.5rem;
  text-align: center;
}

.cta__section__title__05 h6 {
  display: flex;
  justify-content: center;
  justify-items: center;
  text-transform: none;
  width: 100vw;
  margin: 0rem 0.5rem 0rem 0.5rem;
  padding: 1rem 5rem 1rem 5rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

/* CALL TO ACTION - CLICKABLE TAGS CONTAINER 05  */

.cta__clickable__tags__container__05 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  padding: 1rem 0rem 8rem 0rem;
  background-color: var(--color-cta-section-background-01);
}

/* =================================================================================================== */

/* =============================================================================== */
/* TODO: RESELLERS (DUAL SIGNUP SECTION) - BECOME AS RESELLER OR GET OUR CATALOGUE */
/* =============================================================================== */

/* RESELLER SIGN-UP - TITLE */

.reseller__section__title {
  display: flex;
  justify-content: center;
  justify-items: center;
  flex-direction: column;
  width: 100%;
  background-color: var(--color-reseller-title-section-background);
}

.reseller__section__title h5 {
  display: flex;
  justify-content: center;
  justify-items: center;
  color: var(--color-reseller-title-section-title);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.25rem;
  width: 100%;
  margin: 8rem 0.5rem 2rem 0.5rem;
  padding: 1.5rem 2.5rem 0rem 2.5rem;
  text-align: center;
}

.reseller__section__title h6 {
  display: flex;
  justify-content: center;
  justify-items: center;
  text-transform: none;
  width: 100vw;
  margin: 0rem 0.5rem 0rem 0.5rem;
  padding: 1rem 5rem 1rem 5rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-align: center;
}

@media screen and (max-width: 460px) {
  .reseller__section__title h5 {
    margin: 8rem 0rem 1rem 0rem;
    text-align: center;
    font-size: 2rem;
  }

  .reseller__section__title h6 {
    margin: 0rem 1.5rem 2rem 1.5rem;
    padding: 0rem 2rem 0rem 2rem;
    text-align: justify;
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 300px) {
  .reseller__section__title h5 {
    font-size: 1.8rem;
  }

  .reseller__section__title h6 {
    font-size: 1.1rem;
  }
}

/* RESELLER SIGN-UP - CONTAINER */

.resellers__signup__section {
  position: relative;
  top: -0.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: auto;
  object-fit: cover;
  margin: 0rem 0rem 0rem 0rem;
  padding-bottom: 8rem;
  background: var(--color-reseller-title-section-background);
}

/* ------------------------------------------------------- */
/* SIGNUP (PART 1) - MAIN CONTAINER (RESELLER / CATALOGUE) */
/* ------------------------------------------------------- */

.resellers__signup__container {
  position: relative;
  margin: 2rem 2rem 2rem 0.25rem;
  width: 95vw;
  height: 100vh;
  background-color: var(--color-resellers-background);
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: var(--color-box-shadow-04);
}

/* SET THE CONTAINER (BEFORE) - DOUBLE THE SIZE OF THE ORiGINAL CONTAINER */

.resellers__signup__container:before {
  content: "";
  position: absolute;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: linear-gradient(
    -45deg,
    var(--color-resellers-background-gradient-2),
    var(--color-resellers-background-gradient-1)
  );
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  z-index: 6;
  transition: 1.8s ease-in-out;
}

/* ------------------------------------------------------------- */
/* SIGNUP (PART 2) - FORMS CONTAINER (HOLDING ALL FORM ELEMENTS) */
/* ------------------------------------------------------------- */

/* ALL FORM ELEMENTS (CONTAINER) */

.resellers__signup__container .reseller__forms__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0.5rem;
}

/* ONLY ELEMENTS WITHIN THE FORMS CONTAINER (INPUT, CLEAR, SUBMIT) */

.resellers__signup__container .reseller__signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 75%;
  width: 50%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}

/* -------------------------------- */
/* SIGNUP (PART 3) - FORMS ELEMENTS */
/* -------------------------------- */

.resellers__signup__container form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0rem 5rem 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

/* TO DISPLAY THE SIGN IN FORM FIRST */
/* HIGHER Z-INDEX & OPACITY = 1      */

.resellers__signup__container form.catalogue__signup__form {
  opacity: 0;
  z-index: 1;
}

.resellers__signup__container form.reseller__signup__form {
  z-index: 2;
}

/* ============================================== */
/* TODO: FORM 1 & 2 (RESELLER & CATALOGUE SIGNUP) */
/* ============================================== */

/* ----------------------------------------- */
/* FORM 1 & 2 (RESELLER & CATALOGUE) - TITLE */
/* ----------------------------------------- */

.resellers__signup__container .title {
  margin: 0rem 0rem 1.5rem 0rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-resellers-form-title);
}

/* -------------------------------------------------------------- */
/* FORM 1 & 2 (RESELLER & CATALOGUE) - POPI AND PRIVACY STATEMENT */
/* -------------------------------------------------------------- */

.resellers__signup__container .reseller__popi__privacy__statement {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0rem 0.4rem 2.5rem 0.4rem;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

.resellers__signup__container .reseller__popi__privacy__statement strong {
  text-decoration: none;
  font-weight: 900;
  color: var(--color-resellers-form-popi-and-privacy-text);
}

.resellers__signup__container .reseller__popi__privacy__statement a {
  text-decoration: none;
  font-weight: 900;
  color: var(--color-resellers-form-popi-and-privacy-text);
  cursor: pointer;
}

/* ----------------------------------------------------------- */
/* FORM 1 & 2 (RESELLER & CATALOGUE) - INPUT-FIELD (CONTAINER) */
/* ----------------------------------------------------------- */

.resellers__signup__container .reseller__input__field {
  position: relative;
  display: grid;
  grid-template-columns: 15% 85%;
  border-radius: 1rem;
  margin: 0.5rem 0rem 1rem 0rem;
  padding: 0rem 1rem 0rem 0.5rem;
  max-width: 30rem;
  width: 100%;
  height: 4.5rem;
  background-color: var(--color-resellers-form-input-field-background);
}

/* ------------------------------------------------------ */
/* FORM 1 & 2 (RESELLER & CATALOGUE) - INPUT-FIELD (ICON) */
/* ------------------------------------------------------ */

.resellers__signup__container .reseller__input__field i {
  text-align: center;
  line-height: 4rem;
  font-size: 1.6rem;
  transition: 0.5s;
  color: var(--color-resellers-form-input-field-icons);
}

/* ------------------------------------------------------------ */
/* FORM 1 & 2 (RESELLER & CATALOGUE) - INPUT-FIELD (INPUT-AREA) */
/* ------------------------------------------------------------ */

.resellers__signup__container .reseller__input__field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-resellers-form-input-field-text);
}

.resellers__signup__container .reseller__input__field input::placeholder {
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-resellers-form-input-field-placeholder);
}

/* -------------------------------------------------------- */
/* FORM 1 & 2 (RESELLER & CATALOGUE) - INPUT-FIELD (SELECT) */
/* -------------------------------------------------------- */

.resellers__signup__container .reseller__input__field select {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0rem 0rem 0rem 0rem;
  color: var(--color-resellers-form-input-field-text);
}

/* ----------------------------------------------------------------------------------------------------- */
/* FORM 1 & 2 (RESELLER & CATALOGUE) - T's & C's (ACCEPT PRIVACY / ACCEPT CATALOGUE & DISCOUNT VOUCHERS) */
/* ----------------------------------------------------------------------------------------------------- */

/* ------------------ */
/* CHECKBOX - OPTIONS */
/* ------------------ */

.resellers__signup__container .form__group {
  margin: 1rem 0rem 1rem 0rem;
  display: flex;
  justify-content: center;
  max-width: 30rem;
  width: 100%;
  border-radius: 1rem;
}

.resellers__signup__container .form__group__double {
  margin: 1rem 0rem 1rem 0rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 30rem;
  width: 100%;
  border-radius: 1rem;
}

/* --------------------- */
/* CHECKBOX - INPUT TYPE */
/* --------------------- */

.resellers__signup__container .checkbox__option {
  width: 100%;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  text-transform: none;
  text-align: justify;
  display: grid;
  grid-template-columns: 1rem auto;
  gap: 1.5rem;
  margin: 1rem 0rem 0rem 0rem;
  cursor: pointer;
  padding: 0rem 1rem 1rem 1rem;
}

/* ------------------------------------ */
/* THIS IS TO HIDE THE NATIVE CHECKBOX  */
/* ------------------------------------ */

.resellers__signup__container input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  /* background-color: orange; */
  /* Not removed via appearance */
  margin: 0;
}

/* --------------------------------------- */
/* THIS IS TO DISPLAY THE CUSTOM CHECKBOX  */
/* Color of Checkbox Background & Border   */
/* --------------------------------------- */

.resellers__signup__container input[type="checkbox"] {
  appearance: none;
  background-color: var(--color-resellers-form-checkbox-background);
  margin: 0;
  font: inherit;
  /* color: orange; */
  width: 1.5rem;
  height: 1.5rem;
  border: 0.2rem solid var(--color-resellers-form-checkbox-border-normal);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  cursor: pointer;
}

.checkbox__option + .checkbox__option {
  margin-top: 1rem;
}

/* --------------------------------------- */
/* CUSTOM CHECKBOX - CHECKED STATE         */
/* Color of Tick Mark when checked         */
/* --------------------------------------- */

.resellers__signup__container input[type="checkbox"]::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em
    var(--color-resellers-form-checkbox-check-mark-checked);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
  /* Creating a checkmark with CLIP-PATH */
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.resellers__signup__container input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* --------------------------------------- */
/* CUSTOM CHECKBOX - FOCUSSED STATE        */
/* Color of Checkbox Border when clicked */
/* --------------------------------------- */

.resellers__signup__container input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid
    var(--color-resellers-form-checkbox-border-focussed);
  outline-offset: max(1px, 0.15em);
}

/* --------------------------------------- */
/* CUSTOM CHECKBOX - DISABLED STATE        */
/* Color of Checkbox when disabled         */
/* --------------------------------------- */

.resellers__signup__container .checkbox__option--disabled {
  color: var(--color-resellers-form-checkbox-disabled);
  cursor: not-allowed;
}

.resellers__signup__container input[type="checkbox"]:disabled {
  color: var(--color-resellers-form-checkbox-disabled);
  cursor: not-allowed;
}

/* ------------------------------------------------- */
/* FORM 1 & 2 (RESELLER & CATALOGUE) - SIGNUP BUTTON */
/* ------------------------------------------------- */

.resellers__signup__container .btn {
  border: none;
  outline: none;
  border-radius: 1rem;
  margin: 1rem 0rem 1rem 0rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 30rem;
  height: 4rem;
  cursor: pointer;
  background-color: var(--color-resellers-form-submit-button-background);
  color: var(--color-resellers-form-submit-button-text);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  transition: 0.5s;
  /* opacity: 1; */
}

.resellers__signup__container .btn:hover {
  opacity: 0.95;
  transform: scale(1.05);
}

/* ====================================== */
/* TODO: STYLING - GOOGLE RECAPTCHA TODO: */
/* ====================================== */

/* .shopper__registration__form__group .g-recaptcha {
  width: 100%;
  margin: 0.5rem 0.5rem 0rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center; */
/* transform: scale(0.89); */
/* transform: scale(0.95); */
/* -webkit-transform: scale(0.89); */
/* -webkit-transform: scale(0.95);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
} */

/* ================================================================================ */
/* TODO: JAVASCRIPT TO MAKE GOOGLE RECAPTCHA A REQUIREMENT ON FORM SUBMISSION TODO: */
/* ================================================================================ */

/* #g-recaptcha-responses .shopper__registration__form__group {
  display: block !important;
  position: absolute;
  margin: -50px 0 0 0 !important;
  z-index: -999999;
  opacity: 0;
}

@media screen and (max-width: 506px) {
  .shopper__registration__form__group .g-recaptcha {
    margin: 0.5rem 0.5rem -1.8rem 7.5rem;
    transform: scale(0.67);
    -webkit-transform: scale(0.67);
  }
} */

/* ======================================= */
/* SIGNUP (PART 4) - LEFT AND RIGHT PANELS */
/* ======================================= */

/* --------------------------- */
/* PANEL IMAGES (LEFT & RIGHT) */
/* --------------------------- */

.resellers__signup__container .image {
  margin: 1rem 0rem 0rem 0rem;
  padding: 1rem 1rem 1rem 1rem;
  width: 70%;
  transition: transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}

/* ------------------------------------------------- */
/* MAIN PANEL CONTAINER (HOLDING ALL PANEL ELEMENTS) */
/* ------------------------------------------------- */

.resellers__signup__container .panels-container {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* ---------------------------------------------------------- */
/* SUB-PANEL CONTAINER (HOLDING EITHER LEFT / RIGHT ELEMENTS) */
/* ---------------------------------------------------------- */

.resellers__signup__container .panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 6;
}

/* ---------------------- */
/* PANEL CONTAINER (LEFT) */
/* ---------------------- */

.resellers__signup__container .left-panel {
  pointer-events: all;
  padding: 3rem 17% 2rem 12%;
}

/* ----------------------- */
/* PANEL CONTAINER (RIGHT) */
/* ----------------------- */

.resellers__signup__container .right-panel {
  pointer-events: none;
  padding: 3rem 12% 2rem 17%;
}

/* ----------------------------------- */
/* PANEL CONTENT (BOTH LEFT AND RIGHT) */
/* ----------------------------------- */

.resellers__signup__container .panel .content {
  color: var(--color-resellers-panel-content-text);
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.resellers__signup__container .panel h3 {
  margin: 0rem 0rem 1.5rem 0rem;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  color: var(--color-resellers-panel-content-header);
}

.resellers__signup__container .panel p {
  font-size: 1.3rem;
  padding: 1rem 1rem 1rem 1rem;
  text-align: justify;
}

/* ----------------------------------- */
/* MEDIA QUERIES (LEFT & RIGHT PANELS) */
/* ----------------------------------- */

@media (max-width: 1350px) {
  .resellers__signup__container .left-panel p {
    padding: 1rem 2rem 1rem 2rem;
  }

  .resellers__signup__container .right-panel p {
    padding: 1rem 1rem 1rem 3rem;
  }
}

@media (max-width: 1100px) {
  .resellers__signup__container .left-panel p {
    padding: 1rem 3rem 1rem 2rem;
  }

  .resellers__signup__container .right-panel p {
    padding: 1rem 1rem 1rem 4rem;
  }
}

@media (max-width: 1050px) {
  .resellers__signup__container .left-panel p {
    padding: 1rem 5rem 1rem 2rem;
  }

  .resellers__signup__container .right-panel p {
    padding: 1rem 2rem 1rem 5rem;
  }
}

@media (max-width: 1000px) {
  .resellers__signup__container .left-panel p {
    padding: 1rem 5rem 1rem 1rem;
  }

  .resellers__signup__container .right-panel p {
    padding: 1rem 2rem 1rem 6rem;
  }
}

@media (max-width: 970px) {
  .resellers__signup__container .left-panel p {
    padding: 1rem 7rem 1rem 1rem;
  }

  .resellers__signup__container .right-panel p {
    padding: 1rem 2rem 1rem 8rem;
  }
}

@media (max-width: 950px) {
  .resellers__signup__container .left-panel p {
    padding: 1rem 7rem 1rem 1rem;
  }

  .resellers__signup__container .right-panel p {
    padding: 1rem 1rem 1rem 9rem;
  }
}

@media (max-width: 900px) {
  .resellers__signup__container .left-panel p {
    font-size: 1.25rem;
    padding: 1rem 7rem 1rem 1rem;
  }

  .resellers__signup__container .right-panel p {
    font-size: 1.25rem;
    padding: 1rem 1rem 1rem 9rem;
  }

  .resellers__signup__container .panel h3 {
    font-size: 1.8rem;
  }
}

@media (max-width: 870px) {
  .resellers__signup__container .left-panel p {
    font-size: 1.25rem;
    padding: 1rem 9rem 1rem 1rem;
  }

  .resellers__signup__container .right-panel p {
    font-size: 1.25rem;
    padding: 1rem 1rem 1rem 9rem;
  }

  .resellers__signup__container .panel h3 {
    font-size: 1.7rem;
  }
}

@media (max-width: 850px) {
  .resellers__signup__container .left-panel p {
    font-size: 1.2rem;
    padding: 1rem 9rem 1rem 1rem;
  }

  .resellers__signup__container .right-panel p {
    font-size: 1.2rem;
    padding: 1rem 1rem 1rem 9rem;
  }

  .resellers__signup__container .panel h3 {
    font-size: 1.6rem;
  }
}

/* ------------- */
/* PANEL BUTTONS */
/* ------------- */

.resellers__signup__container .btn.transparent {
  margin: 2rem 0rem 0rem 0rem;
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  background: none;
  border: 2px solid var(--color-resellers-panel-button-border);
  color: var(--color-resellers-panel-button-text);
  background: var(--color-resellers-panel-button-background);
  width: 12rem;
  height: 5rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  border-radius: 1.5rem;
  text-transform: uppercase;
}

/* ====================================================================================================== */
/* SIGNUP (PART 5) - ANIMATION (MOVING FROM ONE PANEL TO THE OTHER) - TODO: PART OF JAVASCRIPT CODE TODO: */
/* ====================================================================================================== */

.resellers__signup__container .right-panel .image,
.resellers__signup__container .right-panel .content {
  transform: translateX(800px);
}

.resellers__signup__container.sign-up-mode:before {
  transform: translate(100%, -50%);
  right: 52%;
}

.resellers__signup__container.sign-up-mode .left-panel .image,
.resellers__signup__container.sign-up-mode .left-panel .content {
  transform: translateX(-800px);
}

.resellers__signup__container.sign-up-mode .reseller__signup {
  left: 25%;
}

.resellers__signup__container.sign-up-mode form.catalogue__signup__form {
  opacity: 1;
  z-index: 2;
}

.resellers__signup__container.sign-up-mode form.reseller__signup__form {
  opacity: 0;
  z-index: 1;
}

.resellers__signup__container.sign-up-mode .right-panel .image,
.resellers__signup__container.sign-up-mode .right-panel .content {
  transform: translateX(0%);
}

.resellers__signup__container.sign-up-mode .left-panel {
  pointer-events: none;
}

.resellers__signup__container.sign-up-mode .right-panel {
  pointer-events: all;
}

/* ============================================================== */
/* SIGNUP (PART 6) - MEDIA QUERIES (FOR SMALLER SCREENS / PHONES) */
/* ============================================================== */

@media (max-width: 850px) {
  .resellers__signup__container {
    min-height: 800px;
    height: 100vh;
  }

  .resellers__signup__container .reseller__signup {
    width: 100%;
    top: 95%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .resellers__signup__container .image {
    padding: 0rem 0rem 0rem 0rem;
  }

  .resellers__signup__container .reseller__signup,
  .resellers__signup__container.sign-up-mode .reseller__signup {
    left: 50%;
  }

  .resellers__signup__container .panels-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .resellers__signup__container .panel {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2.5rem 8%;
    grid-column: 1 / 2;
  }

  .resellers__signup__container .right-panel {
    grid-row: 3 / 4;
  }

  .resellers__signup__container .left-panel {
    grid-row: 1 / 2;
  }

  .resellers__signup__container .panel .content {
    padding-right: 15%;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.8s;
  }

  .resellers__signup__container:before {
    width: 1500px;
    height: 1500px;
    transform: translateX(-50%);
    left: 30%;
    bottom: 77%;
    right: initial;
    top: initial;
    transition: 2s ease-in-out;
  }

  .resellers__signup__container.sign-up-mode:before {
    transform: translate(-50%, 100%);
    bottom: 25%;
    right: initial;
  }

  .resellers__signup__container.sign-up-mode .left-panel .image,
  .resellers__signup__container.sign-up-mode .left-panel .content {
    transform: translateY(-300px);
  }

  .resellers__signup__container.sign-up-mode .right-panel .image,
  .resellers__signup__container.sign-up-mode .right-panel .content {
    transform: translateY(0px);
  }

  .resellers__signup__container .right-panel .image,
  .resellers__signup__container .right-panel .content {
    transform: translateY(300px);
  }

  .resellers__signup__container.sign-up-mode .reseller__signup {
    top: 3%;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 570px) {
  .resellers__signup__container form {
    padding: 0 1.5rem;
  }

  .resellers__signup__container .panel .content {
    padding: 0.5rem 1rem;
  }

  .resellers__signup__container {
    padding: 1.5rem;
  }

  .resellers__signup__container:before {
    bottom: 72%;
    left: 50%;
  }

  .resellers__signup__container.sign-up-mode:before {
    bottom: 28%;
    left: 50%;
  }
}

/* ------------------------------------ */
/* LEFT AND RIGHT PANEL - MEDIA QUERIES */
/* ------------------------------------ */

@media screen and (max-width: 850px) {
  .resellers__signup__container .image {
    width: 20rem;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }

  .resellers__signup__container .panel h3 {
    margin: 0rem 0rem -2rem 0rem;
    text-align: center;
  }

  .resellers__signup__container .panel p {
    margin: 2rem 0rem -2rem 0rem;
    padding: 1rem 1rem 1rem 1rem;
  }

  .resellers__signup__container .btn.transparent {
    margin: 2rem 0rem -2rem 0rem;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    width: 10rem;
    height: 3rem;
    font-size: 1.3rem;
    text-align: center;
  }

  /* ---------------------- */
  /* PANEL CONTAINER (LEFT) */
  /* ---------------------- */

  .resellers__signup__container .left-panel {
    padding: 3rem 8% 2rem 3%;
    margin: -4rem 0rem 0rem 0rem;
  }

  /* ----------------------- */
  /* PANEL CONTAINER (RIGHT) */
  /* ----------------------- */

  .resellers__signup__container .right-panel {
    padding: 3rem 8% 2rem 3%;
    margin: 1rem 0rem 0rem 0rem;
  }
}

@media screen and (max-width: 792px) {
  .resellers__signup__container .left-panel p {
    font-size: 1.2rem;
    padding: 1rem 0rem 1rem 0rem;
  }

  .resellers__signup__container .right-panel p {
    font-size: 1.2rem;
    padding: 1rem 0rem 1rem 0rem;
  }

  .resellers__signup__container .panel h3 {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 764px) {
  .resellers__signup__container .left-panel p {
    margin-right: -8rem;
  }

  .resellers__signup__container .right-panel p {
    margin-right: -8rem;
  }
}

@media screen and (max-width: 660px) {
  .resellers__signup__container .image {
    display: none;
  }

  .resellers__signup__container .left-panel p {
    padding: 1rem 2rem 1rem 2rem;
    margin-right: -6rem;
  }

  .resellers__signup__container .right-panel p {
    margin-right: -6rem;
  }

  .resellers__signup__container .panel h3 {
    margin-top: -2rem;
  }
}

@media screen and (max-width: 600px) {
  .resellers__signup__container .panel h3 {
    margin-top: -3rem;
  }
}

@media screen and (max-width: 570px) {
  .resellers__signup__container .left-panel p {
    margin-right: -3rem;
  }

  .resellers__signup__container .right-panel p {
    margin-right: -3rem;
  }

  .resellers__signup__container:before {
    bottom: 78%;
  }

  .resellers__signup__container.sign-up-mode:before {
    bottom: 24%;
  }

  .resellers__signup__container.sign-up-mode .reseller__signup {
    top: 1%;
  }
}

@media screen and (max-width: 506px) {
  .resellers__signup__container .panel h3 {
    margin-top: -1rem;
  }

  .resellers__signup__container:before {
    bottom: 77%;
  }
}

@media screen and (max-width: 450px) {
  .resellers__signup__container .left-panel p {
    font-size: 1.1rem;
  }

  .resellers__signup__container .right-panel p {
    font-size: 1.1rem;
  }

  .resellers__signup__container .panel h3 {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 375px) {
  .resellers__signup__container .left-panel p {
    font-size: 1rem;
    margin-right: -2rem;
  }

  .resellers__signup__container .right-panel p {
    font-size: 1rem;
    margin-right: -2rem;
  }

  .resellers__signup__container .panel h3 {
    font-size: 1.4rem;
  }

  .resellers__signup__container:before {
    bottom: 78%;
  }
}

@media screen and (max-width: 350px) {
  .resellers__signup__container .reseller__signup {
    top: 98%;
  }

  .resellers__signup__container:before {
    bottom: 77%;
  }
}

@media screen and (max-width: 340px) {
  .resellers__signup__container .reseller__signup {
    top: 96%;
  }

  .resellers__signup__container .left-panel p {
    font-size: 0.95rem;
  }

  .resellers__signup__container .right-panel p {
    font-size: 0.95rem;
  }

  .resellers__signup__container .panel h3 {
    font-size: 1.2rem;
  }

  .resellers__signup__container:before {
    bottom: 74%;
  }

  .resellers__signup__container.sign-up-mode:before {
    bottom: 23%;
  }

  .resellers__signup__container.sign-up-mode .reseller__signup {
    top: 3%;
  }

  .resellers__signup__container .btn {
    width: 25rem;
  }

  .resellers__signup__container .title {
    font-size: 1.5rem;
  }

  .resellers__signup__container .reseller__popi__privacy__statement {
    font-size: 1.1rem;
  }

  .resellers__signup__container .checkbox__option {
    font-size: 1.1rem;
    line-height: 1.1;
  }
}

@media screen and (max-width: 320px) {
  .resellers__signup__container .reseller__popi__privacy__statement {
    font-size: 1rem;
  }
}

@media screen and (max-width: 300px) {
  .resellers__signup__container .reseller__signup {
    top: 97%;
  }

  .resellers__signup__container .reseller__popi__privacy__statement {
    font-size: 0.9rem;
  }
}

/* =================================================================================================== */

/* ============================== */
/* TODO: FOOTER SECTION - CONTACT */
/* ============================== */

/* HORIZONTAL ROW */

hr {
  height: 0.1rem;
  border: none;
  background-color: var(--color-footer-section-horisontal-line);
  margin: 1rem 0rem 1.5rem 0rem;
}

.horizontal__row__height {
  height: 0.1rem;
  border: none;
  background-color: var(--color-00-main-white);
  margin: 0rem 0rem 0rem 0rem;
}

/* ================================== */
/* FOOTER - STYLING OF MAIN CONTAINER */
/* ================================== */

.footer__section__main__container {
  position: relative;
  top: -0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  object-fit: cover;
  margin: 0rem 0rem 0rem 0rem;
}

/* MEDIA QUERIES - STYLING FOR RESPONSIVENESS OF FOOTER MAIN CONTAINER  */

@media screen and (max-width: 830px) {
  .footer__section__main__container {
    position: relative;
    top: -0.2rem;
  }
}

@media screen and (max-width: 650px) {
  .footer__section__main__container {
    position: relative;
    top: -0.2rem;
  }
}

@media screen and (max-width: 450px) {
  .footer__section__main__container {
    position: relative;
    top: -0.2rem;
  }
}

/* ====================== */
/* FOOTER - BASIC STYLING */
/* ====================== */

footer {
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: var(--color-05-BrunswickGreen);
  box-shadow: var(--color-box-shadow-01);
  transition: background 0.3s linear;
}

/* ========================== */
/* FOOTER - SECTION CONTAINER */
/* ========================== */

.footer__section__container {
  max-width: 124rem;
  padding: 9rem 4rem 5rem 4rem;
  margin: auto;
}

/* ----------------------------- */
/* FOOTER - PAGE TITLE CONTAINER */
/* ----------------------------- */

.footer__page__title__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0rem 0rem 1rem 0rem;
}

/* ------------------- */
/* FOOTER - PAGE TITLE */
/* ------------------- */

.footer__page__title h5 {
  display: flex;
  color: var(--color-00-main-white);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  width: 100%;
  padding: 0rem 1rem 0rem 1rem;
  text-align: center;
}

/* -------------------------- */
/* FOOTER - CONTENT CONTAINER */
/* -------------------------- */

.footer__content__container {
  display: flex;
  justify-content: space-between;
  margin: 0rem 0rem 2rem 0rem;
}

/* ---------------------------------- */
/* FOOTER - COMPANY PROFILE CONTAINER */
/* ---------------------------------- */

.footer__company__profile__container {
  margin: 0rem 1rem 1rem 0.5rem;
}

/* --------------------- */
/* FOOTER - COMPANY LOGO */
/* --------------------- */

.footer__company__profile__container .footer__company__profile__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0rem 0rem 2rem 0rem;
}

.footer__company__profile__container img {
  width: 25rem;
  height: auto;
}

/* ---------------------------- */
/* FOOTER - COMPANY DESCRIPTION */
/* ---------------------------- */

.footer__company__profile__description {
  max-width: 30rem;
  justify-content: center;
  text-align: justify;
  font-size: 1.3rem;
  margin: 3rem 1rem 3rem 1rem;
}

.footer__company__profile__description p {
  color: var(--color-01-TimberWolf);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 2rem;
}

/* ----------------------------- */
/* FOOTER - COMPANY SOCIAL MEDIA */
/* ----------------------------- */

/* SOCIAL MEDIA CONTAINER  */

.footer__company__profile__social__media__container {
  position: relative;
  max-width: 30rem;
  margin: 0.2rem 0.2rem 0.2rem 0.2rem;
  padding: 0rem 0rem 0rem 0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  z-index: 0;
}

/* SOCIAL MEDIA LINKS */

.footer__profile__social__media__links ul {
  position: relative;
  top: 0%;
  left: 0%;
  transform: translate(0%, 0%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
}

.footer__profile__social__media__links ul li {
  list-style: none;
  margin: 0rem 1rem 0rem 1rem;
}

.footer__profile__social__media__links ul li .fab {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  line-height: 2rem;
  transition: 0.6s;
  color: var(--color-01-TimberWolf);
}

.footer__profile__social__media__links ul li .fab:hover {
  color: var(--color-00-main-white);
}

.footer__profile__social__media__links ul li a {
  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background-color: var(--color-03-HippieGreen);
  text-align: center;
  transition: 0.6s;
  box-shadow: var(--color-box-shadow-01);
}

.footer__profile__social__media__links ul li a:hover {
  transform: translate(0, -0.4rem);
}

/* ---------------------------------------------- */
/* IMPLEMENT BACKGROUND COLOR ON HOVER - FACEBOOK */
/* ---------------------------------------------- */

.footer__profile__social__media__links ul li:nth-child(1) a:hover {
  background-color: var(--color-00-main-black);
}

/* ----------------------------------------------- */
/* IMPLEMENT BACKGROUND COLOR ON HOVER - INSTAGRAM */
/* ----------------------------------------------- */

.footer__profile__social__media__links ul li:nth-child(2) a:hover {
  background-color: var(--color-00-main-black);
}

/* ------------------------------------------------- */
/* IMPLEMENT BACKGROUND COLOR ON HOVER - TWITTER / X */
/* ------------------------------------------------- */

.footer__profile__social__media__links ul li:nth-child(3) a:hover {
  background-color: var(--color-00-main-black);
}

/* -------------------------------------------- */
/* IMPLEMENT BACKGROUND COLOR ON HOVER - TIKTOK */
/* -------------------------------------------- */

.footer__profile__social__media__links ul li:nth-child(4) a:hover {
  background-color: var(--color-00-main-black);
}

/* --------------------------------------------- */
/* IMPLEMENT BACKGROUND COLOR ON HOVER - YOUTUBE */
/* --------------------------------------------- */

.footer__profile__social__media__links ul li:nth-child(5) a:hover {
  background-color: var(--color-00-main-black);
}

/* ---------------------- */
/* FOOTER - SITEMAP LINKS */
/* ---------------------- */

/* SITEMAP - ALL COLUMNS CONTAINER */

.footer__column__container__all {
  display: flex;
  flex-wrap: wrap;
}

.footer__column__container__all ul li {
  margin: 0rem 0rem 0rem 0rem;
}

/* SITEMAP - COLUMN HEADERS & LINKS (GENERAL STYLING) */

.footer__column__group__header {
  margin: 0rem 3rem 0rem 8rem;
}

li.footer__column__group__name {
  color: var(--color-00-main-white);
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 600;
}

.footer__column__group__header li {
  margin: 0rem 0rem 0rem 0rem;
}

.footer__column__group__header li a {
  color: var(--color-01-TimberWolf);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 0.9rem;
  padding: 0rem 0rem 0rem 0rem;
}

.footer__column__group__header li.footer__column__group__name a {
  color: var(--color-00-main-white);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 0.9rem;
  padding: 0rem 0rem 0rem 0rem;
}

.footer__column__group__header li a:hover {
  color: var(--color-02-SageGreen);
  font-weight: 600;
  cursor: pointer;
}

.footer__column__group__item {
  color: var(--color-01-TimberWolf);
  text-transform: none;
  font-size: 1.3rem;
  font-weight: 500;
}

/* SITEMAP - COLUMN 1 - STYLING - FAX, EMAIL, WHATSAPP */

.footer__column__group__fax,
.footer__column__group__whatsapp,
.footer__column__group__email {
  display: flex;
  justify-content: left;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-01-TimberWolf);
}

.footer__column__group__fax img,
.footer__column__group__whatsapp img,
.footer__column__group__email img {
  width: 1.7rem;
  height: 1.7rem;
}

.footer__column__group__email a,
.footer__column__group__whatsapp a {
  text-decoration: none;
  color: var(--color-01-TimberWolf);
}

/* ==================================================== */
/* FOOTER - BOTTOM - COPYRIGHT / PAIA / POPI / PRIVACY  */
/* ==================================================== */

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 600;
  font-weight: 600;
}

.copy__right {
  margin: 0rem 0rem 0rem 0.5rem;
  color: var(--color-00-main-white);
  display: flex;
  align-items: center;
}

.copy__right span {
  margin: 0rem 0rem 0rem 0.8rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
}

.footer__bottom__policies a {
  color: var(--color-00-main-white);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0rem 0.5rem 0rem 2rem;
}

.footer__bottom__policies a:hover {
  color: var(--color-02-SageGreen);
}

/* ============================================================= */
/* FOOTER : MEDIA QUERIES - STYLING FOR RESPONSIVENESS OF FOOTER */
/* ============================================================= */

/* =================== */
/* BREAKPOINT:  1920px */
/* =================== */

@media screen and (max-width: 1920px) {
  .footer__column__group__header {
    margin: 0rem 3rem 0rem 8rem;
  }

  .footer__column__content {
    margin: 0rem 1rem 0rem 8rem;
  }
}

/* =================== */
/* BREAKPOINT:  1500px */
/* =================== */

@media screen and (max-width: 1500px) {
  .footer__column__content {
    margin: 0rem 1rem 0rem 8rem;
  }
}

/* =================== */
/* BREAKPOINT:  1300px */
/* =================== */

@media screen and (max-width: 1300px) {
  .footer__column__content {
    margin: 0rem 1rem 0rem 8rem;
  }
}

/* ==================== */
/* BREAKPOINT:  1250 px */
/* ==================== */

@media screen and (max-width: 1250px) {
  .footer__column__content {
    margin: 0rem 1rem 0rem 6rem;
  }
}

/* ==================== */
/* BREAKPOINT:  1200 px */
/* ==================== */

@media screen and (max-width: 1200px) {
  .footer__column__content {
    margin: 0rem 1rem 0rem 5.25rem;
  }
}

/* ==================== */
/* BREAKPOINT:  1165 px */
/* ==================== */

@media screen and (max-width: 1165px) {
  .footer__column__group__header {
    margin: 0rem 3rem 0rem 7rem;
  }

  .footer__column__content {
    margin: 0rem 1rem 0rem 4rem;
  }
}

/* ==================== */
/* BREAKPOINT:  1130 px */
/* ==================== */

@media screen and (max-width: 1130px) {
  .footer__column__group__header {
    margin: 0rem 3rem 0rem 6rem;
  }

  .footer__column__content {
    margin: 0rem 1rem 0rem 3rem;
  }
}

/* ==================== */
/* BREAKPOINT:  1110 px */
/* ==================== */

@media screen and (max-width: 1110px) {
  .footer__column__group__header {
    margin: 0rem 3rem 0rem 5rem;
  }

  .footer__column__content {
    margin: 0rem 1rem 0rem 2.5rem;
  }
}

/* ==================== */
/* BREAKPOINT:  1085 px */
/* ==================== */

@media screen and (max-width: 1085px) {
  .footer__column__group__header {
    margin: 0rem 3rem 0rem 4rem;
  }

  .footer__column__content {
    margin: 0rem 1rem 0rem 2rem;
  }
}

/* ==================== */
/* BREAKPOINT:  1070 px */
/* ==================== */

@media screen and (max-width: 1070px) {
  .footer__column__group__header {
    margin: 0rem 3rem 0rem 3rem;
  }

  .footer__column__content {
    margin: 0rem 1rem 0rem 1rem;
  }
}

/* ==================== */
/* BREAKPOINT:  1040 px */
/* ==================== */

@media screen and (max-width: 1040px) {
  .footer__column__group__header {
    margin: 0rem 3rem 0rem 2rem;
  }

  .footer__column__content {
    margin: 0rem 0rem 0rem 0rem;
  }
}

/* =================== */
/* BREAKPOINT:  980 px */
/* =================== */

@media screen and (max-width: 980px) {
  .footer__column__group__header {
    margin: 0rem 2.75rem 0rem 3.5rem;
  }

  .footer__company__profile__container img {
    width: 25rem;
  }

  .footer__company__profile__description p {
    font-size: 1.1rem;
  }

  li.footer__column__group__name {
    font-size: 1.2rem;
  }

  .footer__column__group__item {
    font-size: 1.1rem;
  }

  .footer__column__group__header li a {
    font-size: 1.1rem;
  }

  .footer__column__group__header li a.combos__header {
    font-size: 1.2rem;
  }

  .footer__column__group__header li a.gifts__header {
    font-size: 1.2rem;
  }

  .footer__column__group__email p,
  .footer__column__group__fax p,
  .footer__column__group__whatsapp p {
    font-size: 1.1rem;
  }

  .footer__column__group__fax img,
  .footer__column__group__whatsapp img,
  .footer__column__group__email img {
    width: 1.4rem;
    height: 1.4rem;
  }

  .copy__right span,
  .footer__bottom__policies a {
    font-size: 1.2rem;
  }

  .footer__profile__social__media__links ul li .fab {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }

  .footer__profile__social__media__links ul li a {
    width: 3.5rem;
    height: 3.5rem;
  }
}

/* =================== */
/* BREAKPOINT:  965 px */
/* =================== */

@media screen and (max-width: 965px) {
  .footer__column__group__header {
    margin: 0rem 2.5rem 0rem 3rem;
  }
}

/* =================== */
/* BREAKPOINT:  940 px */
/* =================== */

@media screen and (max-width: 9405px) {
  .footer__column__group__header {
    margin: 0rem 2rem 0rem 2.5rem;
  }
}

/* =================== */
/* BREAKPOINT:  915 px */
/* =================== */

@media screen and (max-width: 915px) {
  .footer__company__profile__container img {
    width: 25rem;
  }

  .footer__company__profile__description {
    max-width: 25rem;
  }

  .footer__company__profile__description p {
    line-height: 1.6rem;
  }

  .footer__company__profile__social__media__container {
    max-width: 25rem;
  }
}

/* =================== */
/* BREAKPOINT:  865 px */
/* =================== */

@media screen and (max-width: 865px) {
  .footer__column__group__header {
    margin: 0rem 2rem 0rem 2.5rem;
  }

  .footer__company__profile__description p {
    font-size: 1rem;
  }

  li.footer__column__group__name {
    font-size: 1.1rem;
  }

  .footer__column__group__item {
    font-size: 1rem;
  }

  .footer__column__group__header li a {
    font-size: 1rem;
  }

  .footer__column__group__header li a.combos__header {
    font-size: 1.1rem;
  }

  .footer__column__group__header li a.gifts__header {
    font-size: 1.1rem;
  }

  .footer__column__group__email p,
  .footer__column__group__fax p,
  .footer__column__group__whatsapp p {
    font-size: 1rem;
  }

  .footer__column__group__fax img,
  .footer__column__group__whatsapp img,
  .footer__column__group__email img {
    width: 1.2rem;
    height: 1.2rem;
  }

  .footer__profile__social__media__links ul li .fab {
    font-size: 1.3rem;
    line-height: 1.3rem;
  }

  .footer__profile__social__media__links ul li a {
    width: 3rem;
    height: 3rem;
  }

  .copy__right span,
  .footer__bottom__policies a {
    font-size: 1.1rem;
  }

  .footer__bottom__policies a {
    margin: 0rem 0.5rem 0rem 1.5rem;
  }
}

/* =================== */
/* BREAKPOINT:  835 px */
/* =================== */

/* SPLIT INTO 1 COLUMN  */

@media screen and (max-width: 835px) {
  footer {
    position: relative;
  }

  .footer__content__container {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .footer__column__container__all {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0rem 0rem 0rem 0rem;
    padding: 1rem 0rem 1rem 0rem;
  }

  .footer__column__container__all .footer__column__content {
    width: 15rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    gap: 2rem;
  }

  .footer__column__content .footer__column__group__number {
    width: 15rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 1rem 0rem 1rem 0rem;
    row-gap: 1rem;
  }

  .footer__company__profile__container .footer__company__profile__logo {
    justify-content: center;
  }

  .footer__company__profile__description {
    font-size: 1rem;
    text-align: center;
    margin: 3rem 0.5rem 3rem 0.5rem;
  }

  .footer__company__profile__social__media__container {
    margin-bottom: 2rem;
  }

  .footer__column__container__all {
    display: flex;
    flex-wrap: wrap;
    row-gap: 2rem;
    margin: 1rem 0rem 1rem 0rem;
  }

  .footer__column__group__header {
    margin: 0rem 1rem 0rem 1rem;
  }

  .footer__column__group__number {
    margin: 0rem 0rem 0rem 0rem;
  }

  .footer__column__group__email,
  .footer__column__group__fax,
  .footer__column__group__whatsapp {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.5rem;
    margin: 0.5rem 0rem 0.5rem 0rem;
  }

  .footer__bottom__policies a {
    margin: 0.5rem 0.25rem 0.5rem 0.25rem;
  }

  /* ------------------------------- */
  /* FONT SIZES (ON SMALLER SCREENS) */
  /* ------------------------------- */

  .footer__company__profile__description p {
    font-size: 1.3rem;
    line-height: 1.3;
  }

  li.footer__column__group__name {
    font-size: 1.4rem;
  }

  .footer__column__group__item {
    font-size: 1.3rem;
  }

  .footer__column__group__header li a {
    font-size: 1.3rem;
  }

  .footer__column__group__header li a.combos__header {
    font-size: 1.4rem;
  }

  .footer__column__group__header li a.gifts__header {
    font-size: 1.4rem;
  }

  .footer__column__group__email p,
  .footer__column__group__fax p,
  .footer__column__group__whatsapp p {
    font-size: 1.3rem;
  }

  .footer__column__group__fax img,
  .footer__column__group__whatsapp img,
  .footer__column__group__email img {
    width: 1.8rem;
    height: 1.8rem;
  }

  .footer__profile__social__media__links ul li .fab {
    font-size: 1.3rem;
    line-height: 1.3rem;
  }

  .footer__profile__social__media__links ul li a {
    width: 3rem;
    height: 3rem;
  }

  .copy__right span,
  .footer__bottom__policies a {
    font-size: 1.4rem;
  }

  .footer__bottom__policies a {
    margin: 0rem 0.5rem 0rem 1.5rem;
  }
}

/* =================== */
/* BREAKPOINT:  415 px */
/* =================== */

@media screen and (max-width: 415px) {
  .footer__column__container__all {
    display: flex;
    flex-direction: column;
    column-count: 1;
    flex: wrap;
    align-items: center;
    text-align: center;
  }

  .footer__column__container__all .footer__column__content {
    margin: 0rem 0rem 0rem 0rem;
  }

  .footer__column__content .footer__column__group__number {
    margin: 0rem 0rem 0.5rem 0rem;
  }
}

/* =================== */
/* BREAKPOINT:  370 px */
/* =================== */

@media screen and (max-width: 370px) {
  .footer__company__profile__description {
    margin: 1rem 0.5rem 2rem 0.5rem;
    max-width: 30rem;
    height: 8rem;
  }

  .footer__profile__social__media__links ul li {
    margin: 3rem 0.4rem 1rem 0.4rem;
  }

  .footer__company__profile__container img {
    width: 21rem;
    margin: 0rem 0.5rem 0rem 0.5rem;
  }

  .footer__company__profile__description p {
    width: 100%;
    margin: 0rem 0rem 0rem 0rem;
  }

  .footer__company__profile__social__media__container {
    max-width: 100%;
    margin: 0rem 0rem 0rem 0rem;
  }

  .footer__content__container {
    max-width: 100%;
  }

  .footer__company__profile__container {
    width: 22rem;
    margin: 0rem 0rem 0rem -2rem;
  }

  .footer__column__container__all {
    margin: 1.5rem 0rem 0rem -2rem;
  }

  .footer__profile__social__media__links ul li a {
    margin: 0rem 0.2rem 0rem 0.2rem;
  }

  .copy__right span,
  .footer__bottom__policies a {
    font-size: 1.2rem;
  }

  .footer__bottom__policies a {
    margin: 0rem 0.5rem 0rem 0.5rem;
  }
}

/* =================================================================================================== */

/* ================================================= */
/* TODO: ORDER FORM ELEMENTS - STYLING FOR ALL FORMS */
/* ================================================= */

/* ------------------- */
/* MAIN FORM CONTAINER */
/* ------------------- */

/* ------------- */
/* FORM - LABELS */
/* ------------- */

.order__form__section__element {
  margin: 0rem 0rem 1rem 1rem;
}

.order__form__section__element label {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0.5rem 1.75rem 0.5rem 1.75rem;
}

.order__form__section__element input::placeholder {
  font-family: "Poppins", sans-serif;
}

/* ------------------------------------------------------- */
/* FORM - INPUT FIELD TYPE (TEXT)                          */
/* Example: "NAME" or "LAST NAME" etc                      */
/* ------------------------------------------------------- */

.order__form__section__element input[type="text"] {
  /* width: 25rem; */
  width: 96%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-quote-products-input-border);
  margin: 0.5rem 1.4rem 0.5rem 1.4rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.order__form__section__element input[type="text"]:focus {
  border-color: var(--color-quote-products-input-border-focus);
  box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.95);
  outline: 0;
}

.order__form__section__element input[type="text"]::placeholder {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
}

/* ------------------------------------------------------- */
/* FORM - INPUT FIELD TYPE (TEL)                           */
/* Example: "TELEPHONE" or "MOBILE" numbers etc            */
/* ------------------------------------------------------- */

.order__form__section__element input[type="tel"] {
  /* width: 25rem; */
  width: 96%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-quote-products-input-border);
  margin: 0.5rem 1.4rem 0.5rem 1.4rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.order__form__section__element input[type="tel"]:focus {
  border-color: var(--color-quote-products-input-border-focus);
  box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.95);
  outline: 0;
}

.order__form__section__element input[type="tel"]::placeholder {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
}

/* ------------------------------------------------------- */
/* FORM - INPUT FIELD TYPE (EMAIL)                         */
/* Example: Any "EMAIL" address that needs to be entered   */
/* ------------------------------------------------------- */

.order__form__section__element input[type="email"] {
  /* width: 25rem; */
  width: 96%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-quote-products-input-border);
  margin: 0.5rem 1.4rem 0.5rem 1.4rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.order__form__section__element input[type="email"]:focus {
  border-color: var(--color-quote-products-input-border-focus);
  box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.95);
  outline: 0;
}

.order__form__section__element input[type="email"]::placeholder {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
}

/* ------------------------------------------------------- */
/* FORM - INPUT FIELD TYPE (TEXTAREA)                      */
/* Example: Any "ADDRESS" that runs over multiple rows     */
/* ------------------------------------------------------- */

.order__form__section__element textarea {
  resize: none;
  /* width: 25rem; */
  width: 96%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-quote-products-input-border);
  margin: 0.5rem 1.4rem 0.5rem 1.4rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1.2rem;
  font-family: "poppins", sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.order__form__section__element textarea:focus {
  border-color: var(--color-quote-products-input-border-focus);
  box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.95);
  outline: 0;
}

.order__form__section__element textarea::placeholder {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
}

/* ------------------------------------------------------- */
/* FORM - INPUT FIELD TYPE (NUMBER)                        */
/* Example: Any "NUMBER" that needs to be entered          */
/* ------------------------------------------------------- */

.order__form__section__element input[type="number"] {
  /* width: 25rem; */
  width: 96%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-quote-products-input-border);
  margin: 0.5rem 1.4rem 0.5rem 1.4rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1.2rem;
  font-family: "poppins", sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.order__form__section__element input[type="number"]:focus {
  border-color: var(--color-quote-products-input-border-focus);
  box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.95);
  outline: 0;
}

/* ------------------------------------------------------- */
/* FORM - INPUT FIELD TYPE (DATE)                          */
/* Example: Any "DATE" that needs to be entered            */
/* ------------------------------------------------------- */

.order__form__section__element input[type="date"] {
  /* width: 25rem; */
  width: 96%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-quote-products-input-border);
  margin: 0.5rem 1.4rem 0.5rem 1.4rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.order__form__section__element input[type="date"]:focus {
  border-color: var(--color-quote-products-input-border-focus);
  box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.95);
  outline: 0;
}

.order__form__section__element input[type="date"]::placeholder {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
}

/* ------------------------------------------------------- */
/* FORM - INPUT FIELD TYPE (DROPDOWN LIST)                 */
/* Example: "TITLES" or "COUNTRIES" or "PROVINCES"         */
/* ------------------------------------------------------- */

.order__form__section__element select {
  /* width: 25rem; */
  width: 96%;
  border-radius: 0.5rem;
  border: 1px solid var(--color-quote-products-input-border);
  margin: 0.5rem 1.4rem 0.5rem 1.4rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.order__form__section__element select:focus {
  border-color: var(--color-quote-products-input-border-focus);
  box-shadow: 0 0 0 2px rgba(220, 20, 60, 0.95);
  outline: 0;
}

.order__form__section__element select::placeholder {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
}

/* ------------------------------------------------------- */
/* FORM - INPUT FIELD TYPE (CHECKBOXES)                    */
/* Example: Check the box if you say "YES"                 */
/* ------------------------------------------------------- */

/* TODO: STYLING THE CUSTOM CHECKBOX */

.order__form__checkbox__option {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
  text-align: justify;
  display: grid;
  grid-template-columns: 1rem auto;
  gap: 3rem;
  margin: 2rem 0rem 2rem 0rem;
  padding: 0rem 1.5rem 0rem 0rem;
  cursor: pointer;
  /* border: 1px solid red; */
}

label.order__form__checkbox__option {
  display: grid;
  text-transform: initial;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
  color: black;
}

/* TODO: THIS IS TO HIDE THE NATIVE CHECKBOX */

.order__form__checkbox__option input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: var(--color-quote-products-custom-checkbox-background);
  /* Not removed via appearance */
  margin: 0;
}

/* TODO: THIS IS TO DISPLAY THE CUSTOM CHECKBOX */

.order__form__checkbox__option input[type="checkbox"] {
  appearance: none;
  background-color: var(--color-quote-products-custom-checkbox-background);
  margin: 0;
  font: inherit;
  color: var(--color-quote-products-custom-checkbox-border);
  width: 1.5rem;
  height: 1.5rem;
  border: 0.15em solid var(--color-quote-products-custom-checkbox-border);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  cursor: pointer;
}

.order__form__checkbox__option + .order__form__checkbox__option {
  margin-top: 1rem;
}

/* TODO: CUSTOM CHECKBOX - CHECKED STATE */

.order__form__checkbox__option input[type="checkbox"]::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em
    var(--color-quote-products-custom-checkbox-checkmark);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
  /* Creating a checkmark with CLIP-PATH */
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.order__form__checkbox__option input[type="checkbox"]:checked::before {
  transform: scale(1);
}

/* TODO: CUSTOM CHECKBOX - FOCUSSED STATE */

.order__form__checkbox__option input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid
    var(--color-quote-products-custom-checkbox-focus);
  outline-offset: max(1px, 0.15em);
}

/* TODO: CUSTOM CHECKBOX - DISABLED STATE */

.order__form__checkbox__option--disabled {
  color: var(--color-quote-products-custom-checkbox-disabled);
  cursor: not-allowed;
}

.order__form__checkbox__option input[type="checkbox"]:disabled {
  color: var(--color-quote-products-custom-checkbox-disabled);
  cursor: not-allowed;
}

/* ------------------------------------------------------- */
/* FORM BUTTONS - "SUBMIT" or "CLEAR"                      */
/* Example: To submit a completed form or to clear it      */
/* ------------------------------------------------------- */

.order__form__submit__button__container button {
  background: var(--color-quote-products-button-background);
  color: var(--color-quote-products-button-text);
  border: 0;
  outline: 0;
  border-radius: 0.5rem;
  width: 15rem;
  height: 3rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: 0.5rem 2rem 2rem 2rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.5s ease-in-out;
  box-shadow: var(--color-box-shadow-01);
}

.order__form__submit__button__container button:hover {
  transform: scale(1.05);
}

.order__form__submit__button__container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* ------------------------------------------------------- */
/* FORM BUTTONS - "PAYMENT OPTIONS"                        */
/* Example: "PAYFAST" and "YOCO" payment options           */
/* ------------------------------------------------------- */

.order__form__submit__button__container a {
  border: 0;
  outline: 0;
  border-radius: 0.5rem;
  width: 15rem;
  height: 3rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: 0.5rem 2rem 2rem 2rem;
  padding: 0.25rem 1rem 0.25rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.5s ease-in-out;
  box-shadow: var(--color-box-shadow-01);
}

.order__form__submit__button__container a:hover {
  transform: scale(1.05);
}

.order__form__submit__button__container a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.payfast__payment {
  background: white;
  color: black;
}

.yoco__payment {
  background: #00a9e0;
  color: white;
}

/* ------------------------------------------------------- */
/* FORM AUTHENTICATION - GOOGLE RECAPTCHA                  */
/* Example: Google Recaptcha Version 2                     */
/* ------------------------------------------------------- */

.order__form__section__element .g-recaptcha {
  margin: 2rem 1rem 2rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* transform: scale(0.89); */
  transform: scale(1);
  /* -webkit-transform: scale(0.89); */
  -webkit-transform: scale(1);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}

/* ------------------------------------------------------- */
/* FORM RESPONSIVENESS - MEDIA QUERIES                     */
/* Example: Responsive Design for smaller screens          */
/* ------------------------------------------------------- */

@media screen and (max-width: 600px) {
  .order__form__submit__button__container button {
    margin: 0rem 1rem 2rem 1rem;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .order__form__submit__button__container {
    flex-direction: column;
  }

  .order__form__section__element label {
    font-size: 1rem;
    margin: 0rem 0.6rem 0rem 0.5rem;
  }

  .order__form__section__element input[type="email"] {
    margin: 0.5rem 0.2rem 0.5rem 0.2rem;
  }

  .order__form__checkbox__option {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 2rem 2rem 2rem 0.1rem;
  }

  .order__form__section__element select {
    margin: 0.5rem 0.1rem 0.5rem 0.1rem;
  }

  .order__form__section__element textarea {
    margin: 0.5rem 0.1rem 0.5rem 0.1rem;
  }

  .order__form__section__element input[type="tel"] {
    margin: 0.5rem 0.1rem 0.5rem 0.1rem;
  }

  .order__form__section__element input[type="text"] {
    margin: 0.5rem 0.1rem 0.5rem 0.1rem;
  }

  .order__form__section__element input[type="date"] {
    margin: 0.5rem 0.1rem 0.5rem 0.1rem;
  }

  .order__form__section__element input[type="number"] {
    margin: 0.5rem 0.1rem 0.5rem 0.1rem;
  }
}

@media screen and (max-width: 350px) {
  .order__form__section__element .g-recaptcha {
    margin: 2rem 0.5rem 2rem 4rem;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
  }
}