/* ===================================================================================================================== */
/* TODO:  STYLING FOR SHOPMAX ONLINE STORE (PTY) LTD                                                                     */
/* ===================================================================================================================== */

/* ----------------------------------------------------- */
/* FIXME:  COLOR SCHEMES USED ON SHOPMAX WEBSITE  FIXME: */
/* ----------------------------------------------------- */

:root {
  /* ------------------------------------------------ */
  /* FIXME:  GENERAL COLORS - 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);
  /* ------------------------------------------------ */
  /* FIXME:  SPECIAL BACKGROUND FOR PRODUCTS          */
  /* ------------------------------------------------ */
  --color-page-background: #a9a9a9;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: LOGO, SEARCH BAR & SOCIAL MEDIA */
  /* ------------------------------------------------ */
  /* SEARCH BAR COLOR SCHEME */
  --color-page-background: white;
  --color-search-input-background: white;
  --color-search-icon: #dc143c;
  --color-list-items-background: #eee;
  --color-list-items-background-hover: #dc143c;
  --color-list-items-background-hover-text: white;
  /* SOCIAL MEDIA COLOR SCHEME */
  --color-facebook1: #1877f2;
  --color-facebook2: #3b5998;
  --color-instagram: #c32aa3;
  --color-twitter: #1da1f2;
  --color-linkedin: #0a66c2;
  --color-youtube: #ff0000;
  --color-whatsapp: #25d366;
  --color-wishlist: #555555;
  --color-shopping: #555555;
  /* BOX-ICONS */
  --color-box-icons-normal: black;
  --color-box-icons-hover: white;
  --color-box-icons-anchor: white;
  /* USER ACCOUNT ICON */
  --color-user-account: black;
  --color-user-account-hover: #dc143c;
  /* COLOR SCHEME FOR ADD TO CART BUTTONS, CARTS AND COUNTERS */
  --color-add-to-cart-button-background: #dc143c;
  --color-add-to-cart-button-text: white;
  --color-shopping-cart-icon: black;
  --color-shopping-cart-icon-hover: #dc143c;
  --color-shopping-cart-counter-background: #dc143c;
  --color-shopping-cart-counter-text: white;
  /* COLOR SCHEME FOR ADD TO WISH LIST BUTTONS, CARTS AND COUNTERS */
  --color-add-to-wish-list-button-background: #dc143c;
  --color-add-to-wish-list-button-text: white;
  --color-wish-list-icon: black;
  --color-wish-list-icon-hover: #dc143c;
  --color-wish-list-counter-background: #dc143c;
  --color-wish-list-counter-text: white;
  /* SHOPPING ICONS GROUP */
  --color-shopping-group-icons-background-01: #efefef;
  --color-shopping-group-icons-background-02: #ebf4f4;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: MAIN NAVIGATION                 */
  /* ------------------------------------------------ */
  /* COLOR SCHEME - PAGE BACKGROUND */
  /* --color-page-background: #18191a; */
  --color-page-background: white;
  /* COLOR SCHEME - TOP NAVIGATION */
  /* --color-top-navigation-background: #242526; */
  --color-top-navigation-background: white;
  /* --color-top-navigation-text: #b0b3b8; */
  --color-top-navigation-text: black;
  /* COLOR SCHEME - TOP NAVIGATION DROP-DOWN ICON */
  --topnavigation-dropdown-icon-color: #dc143c;
  /* COLOR SCHEME - DROP-DOWN MENU CONTAINER & TOOLTIP */
  /* --color-tooltip-background: #242526; */
  --color-tooltip-background: white;
  /* --color-drop-down-container: #242526; */
  --color-drop-down-container: white;
  /* COLOR SCHEME - UNORDERED LIST, LIST ITEMS, ANCHORS (ALL LEVELS) */
  /* --color-menu-items-all-levels: #b0b3b8; */
  --color-menu-items-all-levels: black;
  /* --color-menu-items-all-levels-hover: #3a3b3c; */
  --color-menu-items-all-levels-hover: lightgray;
  /* COLOR SCHEME - ICON CONTAINER */
  --color-icon-container: white;
  /* COLOR SCHEME - RIGHT ARROW */
  --color-icon-right-angle: #dc143c;
  /* COLOR SCHEME - BACK-BUTTON ICON (ARROW) AND TEXT */
  --color-back-button-arrow-and-text: black;
  --color-back-button-arrow-only: #dc143c;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: ROTATING HERO BANNERS           */
  /* ------------------------------------------------ */
  --color-slide-text: white;
  --color-button-background: none;
  --color-button-background-hover: #dc143c;
  --color-button-text: white;
  --color-button-text-hover: white;
  --color-arrows-background: none;
  --color-arrows-color: #dc143c;
  --color-dots-background-not-active: white;
  --color-dots-background-hover: #dc143c;
  --color-dots-background-active: #dc143c;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: SHOPPER LOGIN/REGISTRATION      */
  /* ------------------------------------------------ */
  /* SHOPPER - REGISTER & LOGIN PAGE */
  --color-shopper-login-page-background-1: white;
  --color-shopper-login-page-background-2: #dc143c;
  --color-shopper-login-page-title: black;
  --color-shopper-login-page-input-field-background: #f0f0f0;
  --color-shopper-login-page-input-field-text: #333;
  --color-shopper-login-page-input-field-icons: #acacac;
  --color-shopper-login-page-input-field-placeholder: #aaa;
  --color-shopper-login-page-button-background: #dc143c;
  --color-shopper-login-page-button-text: White;
  --color-shopper-login-page-social-media-text: black;
  --color-shopper-login-page-social-media-icons-border: black;
  --color-shopper-login-page-social-media-icons-border-hover: #dc143c;
  --color-shopper-login-page-social-media-icons: black;
  --color-shopper-login-page-social-media-icons-hover: #dc143c;
  /* --color-background-linear-gradient-1: #dc143c; */
  --color-shopper-background-linear-gradient-1: #eb2d53;
  --color-shopper-background-linear-gradient-2: #e91640;
  /* --color-shopper-background-linear-gradient-2: #eb2d53; */
  /* --color-shopper-background-linear-gradient-2: #f05c79; */
  /* --color-shopper-background-linear-gradient-2: #f6a2b3; */
  /* --color-shopper-background-linear-gradient-2: #fde8ec; */
  --color-shopper-panel-text: white;
  --color-shopper-panel-button-border: white;
  /* PRIVACY STATEMENT */
  --color-shopper-privacy-text: #dc143c;
  /* CUSTOM CHECKBOX */
  --color-shopper-custom-checkbox-border: #ccc;
  --color-shopper-custom-checkbox-background: white;
  --color-shopper-custom-checkbox-checkmark: #dc143c;
  --color-shopper-custom-checkbox-focus: #dc143c;
  --color-shopper-custom-checkbox-disabled: #959495;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: SELLER LOGIN/REGISTRATION       */
  /* ------------------------------------------------ */
  --color-seller-page-background: white;
  /* SHOPPER - REGISTER & LOGIN PAGE */
  --color-seller-login-page-background-1: white;
  --color-seller-login-page-background-2: #544179;
  --color-seller-login-page-title: black;
  --color-seller-login-page-input-field-background: #f0f0f0;
  --color-seller-login-page-input-field-text: #333;
  --color-seller-login-page-input-field-icons: #acacac;
  --color-seller-login-page-input-field-placeholder: #aaa;
  --color-seller-login-page-button-background: #544179;
  --color-seller-login-page-button-text: White;
  --color-seller-login-page-social-media-text: black;
  --color-seller-login-page-social-media-icons-border: black;
  --color-seller-login-page-social-media-icons-border-hover: #544179;
  --color-seller-login-page-social-media-icons: black;
  --color-seller-login-page-social-media-icons-hover: #544179;
  --color-seller-background-linear-gradient-1: #544179;
  --color-seller-background-linear-gradient-2: #7359a6;
  /* --color-background-linear-gradient-2: #f88e20; */
  --color-seller-panel-text: white;
  --color-seller-panel-button-border: white;
  /* PRIVACY STATEMENT */
  --color-seller-privacy-text: #544179;
  /* CUSTOM CHECKBOX */
  --color-seller-custom-checkbox-border: #ccc;
  --color-seller-custom-checkbox-background: white;
  --color-seller-custom-checkbox-checkmark: #544179;
  --color-seller-custom-checkbox-focus: #544179;
  --color-seller-custom-checkbox-disabled: #959495;
  /* CUSTOM CHECKBOX */
  --color-seller-custom-checkbox-border: #ccc;
  --color-seller-custom-checkbox-background: white;
  --color-seller-custom-checkbox-checkmark: #544179;
  --color-seller-custom-checkbox-focus: #544179;
  --color-seller-custom-checkbox-disabled: #959495;
  /* BUTTON - SELLING PLANS */
  --color-seller-selling-plan-buttons-background: #544179;
  --color-seller-selling-plan-buttons-text: white;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: INVESTOR LOGIN/REGISTRATION     */
  /* ------------------------------------------------ */
  --color-investor-page-background: white;
  /* SHOPPER - REGISTER & LOGIN PAGE */
  --color-investor-login-page-background-1: white;
  --color-investor-login-page-background-2: #434343;
  --color-investor-login-page-title: black;
  --color-investor-login-page-input-field-background: #f0f0f0;
  --color-investor-login-page-input-field-text: #333;
  --color-investor-login-page-input-field-icons: #acacac;
  --color-investor-login-page-input-field-placeholder: #aaa;
  --color-investor-login-page-button-background: #434343;
  --color-investor-login-page-button-text: White;
  --color-investor-login-page-social-media-text: black;
  --color-investor-login-page-social-media-icons-border: black;
  --color-investor-login-page-social-media-icons-border-hover: #434343;
  --color-investor-login-page-social-media-icons: black;
  --color-investor-login-page-social-media-icons-hover: #434343;
  --color-investor-background-linear-gradient-1: #434343;
  --color-investor-background-linear-gradient-2: #737373;
  /* --color-background-linear-gradient-2: #f88e20; */
  --color-investor-panel-text: white;
  --color-investor-panel-button-border: white;
  /* PRIVACY STATEMENT */
  --color-investor-privacy-text: #434343;
  /* CUSTOM CHECKBOX */
  --color-investor-custom-checkbox-border: #ccc;
  --color-investor-custom-checkbox-background: white;
  --color-investor-custom-checkbox-checkmark: #434343;
  --color-investor-custom-checkbox-focus: #434343;
  --color-investor-custom-checkbox-disabled: #959495;
  /* CUSTOM CHECKBOX */
  /* --color-investor-custom-checkbox-border: #ccc;
  --color-investor-custom-checkbox-background: white;
  --color-investor-custom-checkbox-checkmark: #434343;
  --color-investor-custom-checkbox-focus: #434343;
  --color-investor-custom-checkbox-disabled: #959495; */
  /* BUTTON - SELLING PLANS */
  --color-investor-selling-plan-buttons-background: #434343;
  --color-investor-selling-plan-buttons-text: white;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: A TO Z WHISTLEBLOWING           */
  /* ------------------------------------------------ */
  --color-button-background-atoz-whistleblowing: #0f5ca0;
  --color-button-text-atoz-whistleblowing: white;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: UNASHAMEDLY ETHICAL             */
  /* ------------------------------------------------ */
  --color-button-background-ue: #f57313;
  --color-button-text-ue: white;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: WHAT WE DO                      */
  /* ------------------------------------------------ */
  --color-what-we-do-page-background: #eee;
  --color-what-we-do-button-background: #dc143c;
  --color-what-we-do-button-text: white;
  --color-what-we-do-ultimate-package-text: #dc143c;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: PAGE UNDER CONSTRUCTION         */
  /* ------------------------------------------------ */
  --color-page-header: #000000;
  --color-container-background: #eee;
  --color-container-title: #dc143c;
  --color-container-paragraph: #000000;
  --color-time-container-background: #ffffff;
  --color-time-container-time-number: #000000;
  --color-time-container-time-text: #dc143c;
  --color-notify-button-background: #dc143c;
  --color-notify-button-text: #ffffff;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: TEAM AND OFFICES                */
  /* ------------------------------------------------ */
  /* ---------------------------------------------------- */
  /* TODO:  ACCORDIAN COLORS - TEAM AND OFFICES  TODO:  */
  /* ---------------------------------------------------- */
  --color-team-page-background: white;
  --color-team-accordian-item-background: white;
  --color-team-accordian-item-text: black;
  --color-team-accordian-item-plus-and-minus-sign: #dc143c;
  --color-team-accordian-item-header-active: #dc143c;
  /* --color-team-accordian-item-seperation-line: #edeade; */
  --color-team-accordian-item-seperation-line: #d3d3d3;
  /* --------------------------------------------------------- */
  /* TODO:  ANCHOR / LINKS COLORS - TEAM AND OFFICES  TODO:  */
  /* --------------------------------------------------------- */
  --color-team-anchor-links: #dc143c;
  /* --------------------------------------------------------- */
  /* TODO:  FRONT OF PROFILE CARD - TEAM AND OFFICES  TODO:  */
  /* --------------------------------------------------------- */
  --color-team-card-front-background: white;
  --color-team-card-front-person-photo-border: #dc143c;
  --color-team-card-front-person-name: black;
  --color-team-card-front-person-title: black;
  --color-team-card-front-socials-background: white;
  --color-team-card-front-socials-background-hover: white;
  --color-team-card-front-socials-icon-hover: #dc143c;
  --color-team-card-front-socials-border: black;
  --color-team-card-front-socials-border-hover: #dc143c;
  --color-team-card-front-button-background: #dc143c;
  --color-team-card-front-button-text: #fff;
  /* -------------------------------------------------------- */
  /* TODO:  BACK OF PROFILE CARD - TEAM AND OFFICES  TODO:  */
  /* -------------------------------------------------------- */
  /* --color-card-back-background: #323650; */
  --color-team-card-back-button-close: #dc143c;
  --color-team-card-back-background: white;
  --color-team-card-back-text: black;
  --color-team-card-back-person-qualifications: black;
  --color-team-card-back-person-qualifications-list: black;
  --color-team-card-back-skills-range-bar-background: #e4e8f0;
  --color-team-card-back-skills-range-bar-progress: #dc143c;
  --color-team-card-back-skills-range-bar-progress-percentage: white;
  /* ------------------------------------------------ */
  /* TODO:  CONTACT FORM - TEAM AND OFFICES  TODO:  */
  /* ------------------------------------------------ */
  --color-team-contact-form-header-background: #dc143c;
  --color-team-contact-form-header-text: white;
  --color-team-contact-form-privacy-statement: #dc143c;
  --color-team-contact-form-text-input-border: #ccc;
  --color-team-contact-form-text-input-border-focus: #dc143c;
  --color-team-contact-form-tel-input-border: #ccc;
  --color-team-contact-form-tel-input-border-focus: #dc143c;
  --color-team-contact-form-textarea-input-border: #ccc;
  --color-team-contact-form-textarea-border-focus: #dc143c;
  --color-team-contact-form-dropdown-list-input-border: #ccc;
  --color-team-contact-form-dropdown-list-border-focus: #dc143c;
  --color-team-contact-form-email-input-border: #ccc;
  --color-team-contact-form-email-border-focus: #dc143c;
  --color-team-custom-checkbox-border: #ccc;
  --color-team-custom-checkbox-background: white;
  --color-team-custom-checkbox-checkmark: #dc143c;
  --color-team-custom-checkbox-focus: #dc143c;
  --color-team-custom-checkbox-disabled: #959495;
  --color-team-contact-form-button-background: #dc143c;
  --color-team-contact-form-button-text: white;
  /* ------------------------------------------------ */
  /* FIXME:  REQUEST PRODUCT QUOTE                    */
  /* ------------------------------------------------ */
  --color-quote-products-form-header-background: #dc143c;
  --color-quote-products-form-header-text: white;
  --color-quote-products-privacy-text: #dc143c;
  --color-quote-products-delivery-cost-text: #dc143c;
  --color-quote-products-input-border: #ccc;
  --color-quote-products-input-border-focus: #dc143c;
  --color-quote-products-custom-checkbox-border: #ccc;
  --color-quote-products-custom-checkbox-background: white;
  --color-quote-products-custom-checkbox-checkmark: #dc143c;
  --color-quote-products-custom-checkbox-focus: #dc143c;
  --color-quote-products-custom-checkbox-disabled: #959495;
  --color-quote-products-button-background: #dc143c;
  --color-quote-products-button-text: white;
  /* ------------------------------------------------ */
  /* FIXME:  REQUEST SERVICE QUOTE                    */
  /* ------------------------------------------------ */
  --color-quote-services-form-header-background: #dc143c;
  --color-quote-services-form-header-text: white;
  --color-quote-services-privacy-text: #dc143c;
  --color-quote-services-delivery-cost-text: #dc143c;
  --color-quote-services-input-border: #ccc;
  --color-quote-services-input-border-focus: #dc143c;
  --color-quote-services-custom-checkbox-border: #ccc;
  --color-quote-services-custom-checkbox-background: white;
  --color-quote-services-custom-checkbox-checkmark: #dc143c;
  --color-quote-services-custom-checkbox-focus: #dc143c;
  --color-quote-services-custom-checkbox-disabled: #959495;
  --color-quote-services-button-background: #dc143c;
  --color-quote-services-button-text: white;
  /* ------------------------------------------------ */
  /* FIXME:  PRE-ORDER NEW PRODUCTS                   */
  /* ------------------------------------------------ */
  --color-pre-orders-form-header-background: #dc143c;
  --color-pre-orders-form-header-text: white;
  --color-pre-orders-privacy-text: #dc143c;
  --color-pre-orders-delivery-cost-text: #dc143c;
  --color-pre-orders-input-border: #ccc;
  --color-pre-orders-input-border-focus: #dc143c;
  --color-pre-orders-custom-checkbox-border: #ccc;
  --color-pre-orders-custom-checkbox-background: white;
  --color-pre-orders-custom-checkbox-checkmark: #dc143c;
  --color-pre-orders-custom-checkbox-focus: #dc143c;
  --color-pre-orders-custom-checkbox-disabled: #959495;
  --color-pre-orders-button-background: #dc143c;
  --color-pre-orders-button-text: white;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: SKYNAMO                         */
  /* ------------------------------------------------ */
  --color-skynamo-button-background: #e2218e;
  --color-skynamo-button-text: #fff;
  --color-skynamo-accordian-item-background: white;
  --color-skynamo-accordian-item-text: black;
  --color-skynamo-accordian-item-header-active: #e2218e;
  --color-skynamo-accordian-item-plus-and-minus-sign: #e2218e;
  --color-skynamo-accordian-item-seperation-line: #edeade;
  --color-skynamo-product-card-background: white;
  --color-skynamo-product-card-image-background: white;
  --color-skynamo-product-card-main-title: #e2218e;
  --color-skynamo-product-card-sub-title: black;
  --color-skynamo-product-card-description: black;
  --color-skynamo-product-card-specifications-background: #e2218e;
  --color-skynamo-product-card-specifications-statistics: white;
  --color-skynamo-product-card-specifications-statistics-seperation-line: white;
  --color-skynamo-page-header-text: white;
  --color-skynamo-input-border: #ccc;
  --color-skynamo-input-border-focus: #e2218e;
  --color-skynamo-rgb: rgb(226, 33, 142);
  --color-skynamo-custom-checkbox-border: #ccc;
  --color-skynamo-custom-checkbox-background: white;
  --color-skynamo-custom-checkbox-checkmark: #e2218e;
  --color-skynamo-custom-checkbox-focus: #e2218e;
  --color-skynamo-custom-checkbox-disabled: #959495;
  --color-skynamo-button-background: #e2218e;
  --color-skynamo-button-text: white;
  /* ------------------------------------------------ */
  /* FIXME:  BECOME A RESELLER                        */
  /* ------------------------------------------------ */
  --color-resellers-hex: #f88e20;
  --color-resellers-rgb: rgb(248, 142, 32);
  --color-resellers-page-background: white;
  --color-resellers-button-background: #f88e20;
  --color-resellers-button-text: white;
  --color-resellers-accordian-item-background: white;
  --color-resellers-accordian-item-text: black;
  --color-resellers-accordian-item-header-active: #f88e20;
  --color-resellers-accordian-item-plus-and-minus-sign: #f88e20;
  --color-resellers-accordian-item-seperation-line: #edeade;
  --color-resellers-team-accordian-item-seperation-line-alternative: #d3d3d3;
  --color-resellers-page-header-text: white;
  --color-resellers-input-border: #ccc;
  --color-resellers-input-border-focus: #f88e20;
  --color-resellers-custom-checkbox-border: #ccc;
  --color-resellers-custom-checkbox-background: white;
  --color-resellers-custom-checkbox-checkmark: #f88e20;
  --color-resellers-custom-checkbox-focus: #f88e20;
  --color-resellers-custom-checkbox-disabled: #959495;
  --color-resellers-custom-fileinput-background: white;
  --color-resellers-custom-fileinput-background-hover: #f88e20;
  --color-resellers-custom-fileinput-background-hover-text: white;
  --color-resellers-custom-fileinput-label-text: black;
  /* ------------------------------------------------ */
  /* FIXME:  SELL YOUR PRODUCT                        */
  /* ------------------------------------------------ */
  --color-sellproducts-hex: #8b3365;
  --color-sellproducts-rgb: rgb(139, 51, 101);
  --color-sellproducts-page-background: white;
  --color-sellproducts-button-background: #8b3365;
  --color-sellproducts-button-text: white;
  --color-sellproducts-accordian-item-background: white;
  --color-sellproducts-accordian-item-text: black;
  --color-sellproducts-accordian-item-header-active: #8b3365;
  --color-sellproducts-accordian-item-plus-and-minus-sign: #8b3365;
  --color-sellproducts-accordian-item-seperation-line: #edeade;
  --color-sellproducts-team-accordian-item-seperation-line-alternative: #d3d3d3;
  --color-sellproducts-page-header-text: white;
  --color-sellproducts-input-border: #ccc;
  --color-sellproducts-input-border-focus: #8b3365;
  --color-sellproducts-custom-checkbox-border: #ccc;
  --color-sellproducts-custom-checkbox-background: white;
  --color-sellproducts-custom-checkbox-checkmark: #8b3365;
  --color-sellproducts-custom-checkbox-focus: #8b3365;
  --color-sellproducts-custom-checkbox-disabled: #959495;
  --color-sellproducts-custom-fileinput-background: white;
  --color-sellproducts-custom-fileinput-background-hover: #8b3365;
  --color-sellproducts-custom-fileinput-background-hover-text: white;
  --color-sellproducts-custom-fileinput-label-text: black;
  /* ------------------------------------------------ */
  /* FIXME:  SELL YOUR GENERAL SERVICE                */
  /* ------------------------------------------------ */
  --color-generalservices-hex: #544179;
  --color-generalservices-rgb: rgb(84, 65, 121);
  --color-generalservices-page-background: white;
  --color-generalservices-button-background: #544179;
  --color-generalservices-button-text: white;
  --color-generalservices-accordian-item-background: white;
  --color-generalservices-accordian-item-text: black;
  --color-generalservices-accordian-item-header-active: #544179;
  --color-generalservices-accordian-item-plus-and-minus-sign: #544179;
  --color-generalservices-accordian-item-seperation-line: #edeade;
  --color-generalservices-team-accordian-item-seperation-line-alternative: #d3d3d3;
  --color-generalservices-page-header-text: white;
  --color-generalservices-input-border: #ccc;
  --color-generalservices-input-border-focus: #544179;
  --color-generalservices-custom-checkbox-border: #ccc;
  --color-generalservices-custom-checkbox-background: white;
  --color-generalservices-custom-checkbox-checkmark: #544179;
  --color-generalservices-custom-checkbox-focus: #544179;
  --color-generalservices-custom-checkbox-disabled: #959495;
  --color-generalservices-custom-fileinput-background: white;
  --color-generalservices-custom-fileinput-background-hover: #544179;
  --color-generalservices-custom-fileinput-background-hover-text: white;
  --color-generalservices-custom-fileinput-label-text: black;
  /* ------------------------------------------------ */
  /* FIXME:  SELL YOUR PROFESSIONAL SERVICE           */
  /* ------------------------------------------------ */
  --color-proservices-hex: #01a7cf;
  --color-proservices-rgb: rgb(1, 167, 207);
  --color-proservices-page-background: white;
  --color-proservices-button-background: #01a7cf;
  --color-proservices-button-text: white;
  --color-proservices-accordian-item-background: white;
  --color-proservices-accordian-item-text: black;
  --color-proservices-accordian-item-header-active: #01a7cf;
  --color-proservices-accordian-item-plus-and-minus-sign: #01a7cf;
  --color-proservices-accordian-item-seperation-line: #edeade;
  --color-proservices-team-accordian-item-seperation-line-alternative: #d3d3d3;
  --color-proservices-page-header-text: white;
  --color-proservices-input-border: #ccc;
  --color-proservices-input-border-focus: #01a7cf;
  --color-proservices-custom-checkbox-border: #ccc;
  --color-proservices-custom-checkbox-background: white;
  --color-proservices-custom-checkbox-checkmark: #01a7cf;
  --color-proservices-custom-checkbox-focus: #01a7cf;
  --color-proservices-custom-checkbox-disabled: #959495;
  --color-proservices-custom-fileinput-background: white;
  --color-proservices-custom-fileinput-background-hover: #01a7cf;
  --color-proservices-custom-fileinput-background-hover-text: white;
  --color-proservices-custom-fileinput-label-text: black;
  /* ------------------------------------------------ */
  /* FIXME:  BRONZE INVESTING PLAN                    */
  /* ------------------------------------------------ */
  --color-bronze-hex: #986c43;
  --color-bronze-rgb: rgb(152, 108, 67);
  --color-bronze-page-background: white;
  --color-bronze-button-background: #986c43;
  --color-bronze-button-text: white;
  --color-bronze-accordian-item-background: white;
  --color-bronze-accordian-item-text: black;
  --color-bronze-accordian-item-header-active: #986c43;
  --color-bronze-accordian-item-plus-and-minus-sign: #986c43;
  --color-bronze-accordian-item-seperation-line: #edeade;
  --color-bronze-team-accordian-item-seperation-line-alternative: #d3d3d3;
  --color-bronze-page-header-text: white;
  --color-bronze-input-border: #ccc;
  --color-bronze-input-border-focus: #986c43;
  --color-bronze-custom-checkbox-border: #ccc;
  --color-bronze-custom-checkbox-background: white;
  --color-bronze-custom-checkbox-checkmark: #986c43;
  --color-bronze-custom-checkbox-focus: #986c43;
  --color-bronze-custom-checkbox-disabled: #959495;
  --color-bronze-custom-fileinput-background: white;
  --color-bronze-custom-fileinput-background-hover: #986c43;
  --color-bronze-custom-fileinput-background-hover-text: white;
  --color-bronze-custom-fileinput-label-text: black;
  /* ------------------------------------------------ */
  /* FIXME:  SILVER INVESTING PLAN                    */
  /* ------------------------------------------------ */
  --color-silver-hex: #7d7d7d;
  --color-silver-rgb: rgb(125, 125, 125);
  --color-silver-page-background: white;
  --color-silver-button-background: #7d7d7d;
  --color-silver-button-text: white;
  --color-silver-accordian-item-background: white;
  --color-silver-accordian-item-text: black;
  --color-silver-accordian-item-header-active: #7d7d7d;
  --color-silver-accordian-item-plus-and-minus-sign: #7d7d7d;
  --color-silver-accordian-item-seperation-line: #edeade;
  --color-silver-team-accordian-item-seperation-line-alternative: #d3d3d3;
  --color-silver-page-header-text: white;
  --color-silver-input-border: #ccc;
  --color-silver-input-border-focus: #7d7d7d;
  --color-silver-custom-checkbox-border: #ccc;
  --color-silver-custom-checkbox-background: white;
  --color-silver-custom-checkbox-checkmark: #7d7d7d;
  --color-silver-custom-checkbox-focus: #7d7d7d;
  --color-silver-custom-checkbox-disabled: #959495;
  --color-silver-custom-fileinput-background: white;
  --color-silver-custom-fileinput-background-hover: #7d7d7d;
  --color-silver-custom-fileinput-background-hover-text: white;
  --color-silver-custom-fileinput-label-text: black;
  /* ------------------------------------------------ */
  /* FIXME:  GOLD INVESTING PLAN                      */
  /* ------------------------------------------------ */
  --color-gold-hex: #dc9d04;
  --color-gold-rgb: rgb(220, 157, 4);
  --color-gold-page-background: white;
  --color-gold-button-background: #dc9d04;
  --color-gold-button-text: white;
  --color-gold-accordian-item-background: white;
  --color-gold-accordian-item-text: black;
  --color-gold-accordian-item-header-active: #dc9d04;
  --color-gold-accordian-item-plus-and-minus-sign: #dc9d04;
  --color-gold-accordian-item-seperation-line: #edeade;
  --color-gold-team-accordian-item-seperation-line-alternative: #d3d3d3;
  --color-gold-page-header-text: white;
  --color-gold-input-border: #ccc;
  --color-gold-input-border-focus: #dc9d04;
  --color-gold-custom-checkbox-border: #ccc;
  --color-gold-custom-checkbox-background: white;
  --color-gold-custom-checkbox-checkmark: #dc9d04;
  --color-gold-custom-checkbox-focus: #dc9d04;
  --color-gold-custom-checkbox-disabled: #959495;
  --color-gold-custom-fileinput-background: white;
  --color-gold-custom-fileinput-background-hover: #dc9d04;
  --color-gold-custom-fileinput-background-hover-text: white;
  --color-gold-custom-fileinput-label-text: black;
  /* ------------------------------------------------ */
  /* FIXME:  PLATINUM INVESTING PLAN                  */
  /* ------------------------------------------------ */
  --color-platinum-hex: #434343;
  --color-platinum-rgb: rgb(67, 67, 67);
  --color-platinum-page-background: white;
  --color-platinum-button-background: #434343;
  --color-platinum-button-text: white;
  --color-platinum-accordian-item-background: white;
  --color-platinum-accordian-item-text: black;
  --color-platinum-accordian-item-header-active: #434343;
  --color-platinum-accordian-item-plus-and-minus-sign: #434343;
  --color-platinum-accordian-item-seperation-line: #edeade;
  --color-platinum-team-accordian-item-seperation-line-alternative: #d3d3d3;
  --color-platinum-page-header-text: white;
  --color-platinum-input-border: #ccc;
  --color-platinum-input-border-focus: #434343;
  --color-platinum-custom-checkbox-border: #ccc;
  --color-platinum-custom-checkbox-background: white;
  --color-platinum-custom-checkbox-checkmark: #434343;
  --color-platinum-custom-checkbox-focus: #434343;
  --color-platinum-custom-checkbox-disabled: #959495;
  --color-platinum-custom-fileinput-background: white;
  --color-platinum-custom-fileinput-background-hover: #434343;
  --color-platinum-custom-fileinput-background-hover-text: white;
  --color-platinum-custom-fileinput-label-text: black;
  /* ------------------------------------------------ */
  /* FIXME:  PRODUCTS CARDS - PROFESSIONAL SERVICES   */
  /* ------------------------------------------------ */
  /* PAGE BACKGROUND - PRODUCTS & SERVICES */
  --color-page-background: #ebf4f4;
  --color-page-background: #a9a9a9;
  /* BOX-SHADOW CONFIGURATIONS */
  --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);
  /* SHOPMAX COLOR SCHEME */
  --color-shopmax: #dc143c;
  --color-shopmax-rgb: rgb(220, 20, 60);
  /* CARD COLOR SCHEME */
  --color-product-card-brand-title: black;
  --color-product-card-background: white;
  --color-product-card-top-section-background: white;
  --color-product-card-arrow-left: black;
  --color-product-card-heart-right: #dc143c;
  --color-product-card-extra-images-section-background: white;
  --color-product-card-extra-image-background: white;
  --color-product-card-extra-image-border: black;
  --color-product-card-extra-image-border-hover: #dc143c;
  --color-product-card-title: black;
  --color-product-card-short-description: black;
  --color-product-card-sizes-title: black;
  --color-product-card-colors-title: black;
  --color-product-card-price-currency: black;
  --color-product-card-price-value: black;
  /* CUSTOM RADIO BUTTON */
  --color-custom-radiobutton-border: #ccc;
  --color-custom-radiobutton-background: white;
  --color-custom-radiobutton-circle: #dc143c;
  --color-custom-radiobutton-focus: #dc143c;
  --color-custom-radiobutton-disabled: #959495;
  /* COLOR SCHEME FOR ADD TO CART BUTTONS, CARTS AND COUNTERS */
  --color-add-to-cart-button-background: #dc143c;
  --color-add-to-cart-button-text: white;
  --color-shopping-cart-icon: black;
  --color-shopping-cart-counter-background: #dc143c;
  --color-shopping-cart-counter-text: white;
  /* COLOR SCHEME FOR ADD TO WISH LIST BUTTONS, CARTS AND COUNTERS */
  --color-add-to-wish-list-button-background: #dc143c;
  --color-add-to-wish-list-button-text: white;
  --color-wish-list-icon: black;
  --color-wish-list-counter-background: #dc143c;
  --color-wish-list-counter-text: white;
  /* FORM TEXT INPUTS */
  --color-input-border: #ccc;
  --color-input-border-focus: #dc143c;
  --color-input-border-focus-rgba: rgb(220, 20, 60);
  /* CLOSE BUTTON - BACK CARD */
  --color-card-back-button-close: #dc143c;
  --color-card-back-background: white;
  --color-card-back-text: black;
  /* BACK OF CARD */
  --color-heading-titles: #dc143c;
  --color-heading-values: black;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: KETTIE MEISIE                   */
  /* ------------------------------------------------ */
  /* GENERAL COLORS */
  --color-kettie-meisie: #1a354a;
  --color-kettie-meisie-rgb: rgb(26, 53, 74);
  /* HERO BANNER COLORS */
  --color-kettie-meisie-slide-text: white;
  --color-kettie-meisie-button-background: none;
  --color-kettie-meisie-button-background-hover: #1a354a;
  --color-kettie-meisie-button-text: white;
  --color-kettie-meisie-button-text-hover: white;
  --color-kettie-meisie-arrows-background: none;
  --color-kettie-meisie-arrows-color: #1a354a;
  --color-kettie-meisie-dots-background-not-active: white;
  --color-kettie-meisie-dots-background-hover: #1a354a;
  --color-kettie-meisie-dots-background-active: #1a354a;
  /* OTHER COLORS */
  --color-kettie-meisie-button-background-02: #1a354a;
  --color-kettie-meisie-button-text-02: white;
  --color-kettie-meisie-accordian-item-background: white;
  --color-kettie-meisie-accordian-item-background-alternative: #e9f0f1;
  --color-kettie-meisie-accordian-item-text: black;
  --color-kettie-meisie-accordian-item-header-active: #1a354a;
  --color-kettie-meisie-accordian-item-plus-and-minus-sign: #1a354a;
  --color-kettie-meisie-accordian-item-seperation-line: #e5e4e2;
  --color-kettie-meisie-accordian-item-seperation-line-alternative: #edeade;
  --color-kettie-meisie-product-card-brand-title: black;
  --color-kettie-meisie-product-card-background: white;
  --color-kettie-meisie-product-card-top-section-background: white;
  --color-kettie-meisie-product-card-arrow-left: black;
  --color-kettie-meisie-product-card-heart-right: #1a354a;
  --color-kettie-meisie-product-card-extra-images-section-background: white;
  --color-kettie-meisie-product-card-extra-image-background: white;
  --color-kettie-meisie-product-card-extra-image-border: black;
  --color-kettie-meisie-product-card-extra-image-border-hover: #1a354a;
  --color-kettie-meisie-product-card-title: black;
  --color-kettie-meisie-product-card-short-description: black;
  --color-kettie-meisie-product-card-sizes-title: black;
  --color-kettie-meisie-product-card-colors-title: black;
  --color-kettie-meisie-product-card-price-currency: black;
  --color-kettie-meisie-product-card-price-value: black;
  --color-kettie-meisie-input-border: #ccc;
  --color-kettie-meisie-input-border-focus: #1a354a;
  --color-kettie-meisie-input-border-focus-rgba: rgb(26, 53, 74);
  --color-kettie-meisie-add-to-cart-button-background: #1a354a;
  --color-kettie-meisie-add-to-cart-button-text: white;
  --color-kettie-meisie-shopping-cart-icon: black;
  --color-kettie-meisie-shopping-cart-counter-background: #1a354a;
  --color-kettie-meisie-shopping-cart-counter-text: white;
  --color-kettie-meisie-add-to-wish-list-button-background: #1a354a;
  --color-kettie-meisie-add-to-wish-list-button-text: white;
  --color-kettie-meisie-wish-list-icon: black;
  --color-kettie-meisie-wish-list-counter-background: #1a354a;
  --color-kettie-meisie-wish-list-counter-text: white;
  --color-kettie-meisie-card-back-button-close: #1a354a;
  --color-kettie-meisie-card-back-background: white;
  --color-kettie-meisie-card-back-text: black;
  --color-kettie-meisie-heading-titles: #1a354a;
  --color-kettie-meisie-heading-values: black;
  --color-kettie-meisie-button-sizing-guide-background: #1a354a;
  --color-kettie-meisie-button-sizing-guide-text: white;
  --color-kettie-meisie-page-background: #ebf4f4;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: FIRST PAGE (CALL TO ACTION)     */
  /* ------------------------------------------------ */
  /* PAGE BACKGROUND - PRODUCTS & SERVICES */
  /* --color-page-background: #ebf4f4; */
  --color-cta-page-background: #a9a9a9;
  --color-cta-page-text-on-buttons-or-anchors: white;
  --color-cta-page-text-hover: #dc143c;
  /* SECTION BACKGROUND */
  --color-cta-section-investing-plans-background: #e5e4e2;
  --color-cta-section-selling-plans-background: #d3d3d3;
  --color-cta-section-professional-services-background: #c0c0c0;
  --color-cta-section-latest-product-releases-background: #a9a9a9;
  /* BOX-SHADOW CONFIGURATIONS */
  --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);
  /* SHOPMAX COLOR SCHEME */
  --color-cta-shopmax: #dc143c;
  --color-cta-shopmax-rgb: rgb(220, 20, 60);
  /* CARD COLOR SCHEME */
  --color-cta-product-card-brand-title: black;
  --color-cta-product-card-background: white;
  --color-cta-product-card-top-section-background: white;
  --color-cta-product-card-arrow-left: black;
  --color-cta-product-card-heart-right: #dc143c;
  --color-cta-product-card-extra-images-section-background: white;
  --color-cta-product-card-extra-image-background: white;
  --color-cta-product-card-extra-image-border: black;
  --color-cta-product-card-extra-image-border-hover: #dc143c;
  --color-cta-product-card-title: black;
  --color-cta-product-card-short-description: black;
  --color-cta-product-card-sizes-title: black;
  --color-cta-product-card-colors-title: black;
  --color-cta-product-card-price-currency: black;
  --color-cta-product-card-price-value: black;
  /* COLOR SCHEME FOR ADD TO CART BUTTONS, CARTS AND COUNTERS */
  --color-cta-add-to-cart-button-background: #dc143c;
  --color-cta-add-to-cart-button-text: white;
  --color-cta-shopping-cart-icon: black;
  --color-cta-shopping-cart-counter-background: #dc143c;
  --color-cta-shopping-cart-counter-text: white;
  /* COLOR SCHEME FOR ADD TO WISH LIST BUTTONS, CARTS AND COUNTERS */
  --color-cta-add-to-wish-list-button-background: #dc143c;
  --color-cta-add-to-wish-list-button-text: white;
  --color-cta-wish-list-icon: black;
  --color-cta-wish-list-counter-background: #dc143c;
  --color-cta-wish-list-counter-text: white;
  /* FORM TEXT INPUTS */
  --color-cta-input-border: #ccc;
  --color-cta-input-border-focus: #dc143c;
  --color-cta-input-border-focus-rgba: rgb(220, 20, 60);
  /* CLOSE BUTTON - BACK CARD */
  --color-cta-card-back-button-close: #dc143c;
  --color-cta-card-back-background: white;
  --color-cta-card-back-text: black;
  /* BACK OF CARD */
  --color-cta-heading-titles: #dc143c;
  --color-cta-heading-values: black;
  /* INVESTING PLANS - COLOR SCHEMES */
  --color-cta-bronze: #986c43;
  --color-cta-bronze-rgb: rgb(152, 108, 67);
  --color-cta-silver: #7d7d7d;
  --color-cta-silver-rga: rgb(125, 125, 125);
  --color-cta-gold: #dc9d04;
  --color-cta-gold-rgb: rgb(220, 157, 4);
  --color-cta-platinum: #434343;
  --color-cta-platinum-rgb: rgb(67, 67, 67);
  /* SELLING PLANS - COLOR SCHEMES */
  --color-cta-resellers: #f88e20;
  --color-cta-resellers-rgb: rgb(248, 142, 32);
  --color-cta-sellproduct: #8b3365;
  --color-cta-sellproduct-rgb: rgb(139, 51, 101);
  --color-cta-generalservices: #544179;
  --color-cta-generalservices-rgb: rgb(84, 65, 121);
  --color-cta-professionalservices: #01a7cf;
  --color-cta-professionalservices-rgb: rgb(1, 167, 207);
  /* ------------------------------------------------ */
  /* FIXME:  GIFT VOUCHERS                            */
  /* ------------------------------------------------ */
  --color-gift-vouchers-page-background: #e5e4e2;
  --color-gift-vouchers-shopmax-color: #dc143c;
  --color-gift-vouchers-form-header-background: #dc143c;
  --color-gift-vouchers-form-header-text: white;
  --color-gift-vouchers-privacy-text: #dc143c;
  --color-gift-vouchers-delivery-cost-text: #dc143c;
  --color-gift-vouchers-input-border: #ccc;
  --color-gift-vouchers-input-border-focus: #dc143c;
  --color-gift-vouchers-custom-checkbox-border: #ccc;
  --color-gift-vouchers-custom-checkbox-background: white;
  --color-gift-vouchers-custom-checkbox-checkmark: #dc143c;
  --color-gift-vouchers-custom-checkbox-focus: #dc143c;
  --color-gift-vouchers-custom-checkbox-disabled: #959495;
  --color-gift-vouchers-button-background: #dc143c;
  --color-gift-vouchers-button-text: white;
  /* ------------------------------------------------ */
  /* FIXME:  SECTION: COMPANY FOOTER                  */
  /* ------------------------------------------------ */
  --color-page-background: #f7f7f7;
  --color-footer-background: white;
  --color-logo-name: black;
  --color-footer-description-area-text: black;
  --color-tagline: black;
  --color-footer-service-headers: #dc143c;
  --color-footer-service-headers-list-itmes: black;
  --color-footer-service-headers-list-itmes-hover: #dc143c;
  --color-horisontal-line: #f0f0f0;
  --color-copyright: black;
  --color-policies: #dc143c;
  --color-policies-hover: black;
  /* ==================================== */
  /* COLOURS USED FOR SOCIAL MEDIA LINKS  */
  /* ==================================== */
  --color-facebook1: #1877f2;
  --color-facebook2: #3b5998;
  --color-instagram: #c32aa3;
  --color-twitter: #1da1f2;
  --color-linkedin: #0a66c2;
  --color-youtube: #ff0000;
  --color-whatsapp: #25d366;
  --color-email: #555555;
  /* ------------------------------------------------ */
  /*                 END OF SECTION                   */
  /* ------------------------------------------------ */
}

/* ----------------------------------------------------- */
/* FIXME:   SIZING OF THE MAIN NAVIGATION ITEMS   FIXME: */
/* ----------------------------------------------------- */

:root {
  --topnavigation-button-width: 26rem;
  --topnavigation-line-height: 2rem;
  --topnavigation-font-size: 1.25rem;
  --topnavigation-dropdown-icon-line-height: 1.9rem;
  --topnavigation-dropdown-icon-font-size: 2rem;
  --navigation-wrapper-width: 26rem;
  --navigation-wrapper-ul-width: 26rem;
  --navigation-wrapper-ul-li-line-height: 2.3rem;
  --navigation-wrapper-ul-li-anchor-font-size: 1.175rem;
  --icon-circle-height: 1.8rem;
  --icon-circle-width: 1.8rem;
  --icon-right-angle-font-size: 1.8rem;
  --icon-back-button-font-size: 1.35rem;
}

/* ===================================================================================================================== */
/* FIXME:  SPECIAL NOTES (IN TERMS OF THE MAIN NAVIGATION                                                                  */
/* ======================================================================================================================= */
/* 01.  USER-SELECT controls whether the user can select TEXT (none / auto / text / contain / all)                         */
/* 02.  OVERFLOW sets behavior when an element's content is too big to fit in its block (in both directions)               */
/*      Options Available: visible / hidden / clip / scroll / auto                                                         */
/* 03                                                                                                                      */
/* 04.                                                                                                                     */
/* 05.                                                                                                                     */
/* ======================================================================================================================= */

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

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

body {
  font-size: 1.6rem;
}

::selection {
  background: var(--color-page-background);
  color: var(--color-search-input-background);
}

input {
  font-family: "poppins", sans-serif;
}

/* ===================================================================================================================== */
/* TODO:  SET THE RESPONSIVE DEFAULT SIZES FOR ALL HEADING ELEMENTS (H1 - H6)                                      TODO: */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* TODO:  HEADING ELEMENTS : MOBILE / SMALLER SCREENS STYLING                                        FIXME: MOBILE FIRST */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* GENERAL NOTES (ALL HEADER ELEMENTS):                                                                                  */
/* 1.  Set the FONT-FAMILY to be used for the page (i.e. Google Fonts)                                                   */
/* 2.  Set all MARGINS - Top-Rigth-Bottom-Left                                                                           */
/* 3.  Set the FONT-WEIGHT : normal, bold, 100, 300, 500, 700 etc.                                                       */
/* ===================================================================================================================== */

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

/* ===================================================================================================================== */
/* GENERAL NOTES (INDIVIDUAL HEADER ELEMENTS):                                                                           */
/* 1.  Set the FONT-SIZE to be used as the standard for the page [1.6rem = 16px]                                         */
/* 2.  Set LINE-HEIGHT (spacing) : 1rem, 1.25rem, 1.4rem, 1.5rem etc                                                     */
/* 3.  Set LETTER-SPACING : normal, 0.1rem, 0.2rem, 0.3rem etc                                                           */
/* ===================================================================================================================== */

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

/* ===================================================================================================================== */
/* TODO:  HEADING ELEMENTS : WEBSITE / LARGER SCREENS STYLING                                      FIXME: LARGER SCREENS */
/* ===================================================================================================================== */

@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:TODO:                                 STICKY TOP BAR & NAVIGATION                                     TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* STICKY NAVIGATION BAR - ONLY FOR LARGER SCREENS */

.fixed__navigation__bar {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  background-color: white;
  z-index: 50;
  /* border: 1px solid green; */
}

/* REMOVE STICKY NAV BAR FOR SMALLER DEVICE SCREENS - 830 PIXEL BREAKPOINT */

@media screen and (max-width: 830px) {
  .fixed__navigation__bar {
    position: relative;
  }
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                     SECTION - LOGO, SEARCH BAR, SOCIAL MEDIA ICONS (START)                      TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* TODO:  PART 1 - CONTAINER (ALL) - HOLDING ALL ELEMENTS TOGETHER (LOGO, SEARCH BAR and SOCIAL MEDIA LINKS)             */
/* ===================================================================================================================== */

.top_bar_container_all {
  position: relative;
  display: grid;
  grid-template-columns: 4fr 12fr 5fr;
  max-width: 100%;
  height: 4rem;
  margin: 1rem 0rem 1rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  /* border: 1px solid orange; */
}

/* ===================================================================================================================== */
/* TODO:  PART 2 - CONTAINER (LOGO) - SHOPMAX LOGO                                                                       */
/* ===================================================================================================================== */

/* ========================================================= */
/* FIXME:  SHOPMAX LOGO SCALING (100%) = FACTOR 4.91         */
/* ========================================================= */
/* WIDTH = 50rem (500px) ==>  HEIGTH = 10.185rem (101.85px)  */
/* WIDTH = 45rem (450px) ==>  HEIGTH =  9.167rem  (91.67px)  */
/* WIDTH = 40rem (400px) ==>  HEIGTH =  8.148rem  (81.48px)  */
/* WIDTH = 35rem (350px) ==>  HEIGTH =  7.130rem  (71.30px)  */
/* WIDTH = 30rem (300px) ==>  HEIGTH =  6.111rem  (61.11px)  */
/* WIDTH = 25rem (250px) ==>  HEIGTH =  5.093rem  (50.93px)  */
/* WIDTH = 20rem (200px) ==>  HEIGTH =  4.074rem  (40.74px)  */
/* WIDTH = 15rem (150px) ==>  HEIGTH =  3.056rem  (30.56px)  */
/* WIDTH = 10rem (100px) ==>  HEIGTH =  2.037rem  (20.37px)  */
/* ========================================================= */

.top_bar_container_image {
  position: relative;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4rem;
  /* border: 1px solid red; */
}

.top_bar_container_image .top_bar_shopmax_logo {
  display: block;
  /* width: 100%; */
  /* margin: auto; */
  width: 100%;
  height: 4rem;
  object-fit: contain;
  padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  /* border: 1px solid purple; */
}

/* ===================================================================================================================== */
/* TODO:  PART 3 - CONTAINER (SEARCH) - NEW SEARCH BAR                                                                   */
/* ===================================================================================================================== */

/* --------------------------------------------------- */
/* FIXME:  MAIN CONTAINER - HOLDING EVERYTHING  FIXME: */
/* --------------------------------------------------- */

.top_bar_search-bar-container {
  /* max-width: 45rem; */
  /* display: flex;
    justify-content: center;
    align-items: center; */
  display: grid;
  grid-template-columns: 4fr 1fr;
  width: 100%;
  height: 4rem;
  border-radius: 0;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 2rem 0rem 2rem;
  /* border: 1px solid blue; */
}

/* ------------------------------------------------------------------------------------------ */
/* FIXME:  SUB-CONTAINER - HOLDING ELEMENTS - SEARCH-INPUT, SEARCH-ITEMS, SEARCH-ICON  FIXME: */
/* ------------------------------------------------------------------------------------------ */

.top_bar_search-bar-container .top_bar_search-input {
  position: relative;
  background: var(--color-search-input-background);
  width: 100%;
  height: 4rem;
  border-radius: 2.5rem 0rem 0rem 2.5rem;
  box-shadow: var(--color-box-shadow-04);
  padding: 0rem 0rem 0rem 0rem;
  /* border: 1px solid green; */
}

/* ------------------------------------- */
/* FIXME:  ELEMENT: SEARCH-INPUT  FIXME: */
/* ------------------------------------- */

.top_bar_search-input input {
  /* text-align: center; */
  border: none;
  outline: none;
  width: 100%;
  height: 4rem;
  border-radius: 2.5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 5rem 0rem 2rem;
  font-family: "Poppins", sans-serif;
  font-size: 1.3rem;
  /* box-shadow: var(--color-box-shadow-03); */
  /* border: 1px solid goldenrod; */
}

.top_bar_search-input input::placeholder {
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
}

/* ------------------------------------ */
/* FIXME:  ELEMENT: SEARCH-ICON  FIXME: */
/* ------------------------------------ */

.top_bar_search-input .top_bar_searchbar-icon {
  position: absolute;
  top: 0rem;
  right: 0.5rem;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  font-size: 1.52rem;
  color: var(--color-search-icon);
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
}

.top_bar_search-input .top_bar_searchbar-icon:hover {
  transform: scale(1.1);
}

/* -------------------------------------------------- */
/* FIXME:  SUB-CONTAINER - AUTO-COMPLETED BOX  FIXME: */
/* -------------------------------------------------- */

.top_bar_search-input .top_bar_search-autocomplete-box {
  max-height: 28rem;
  padding: 0rem 0rem 0rem 0rem;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  border-radius: 0rem 0rem 1rem 1rem;
  background: var(--color-list-items-background);
  /* z-index: 1; */
}

/* =================================================== */
/* TODO:FIXME:  JAVASCRIPT: ACTIVE CLASS  TODO:FIXME:  */
/*       WHEN ACTIVE DISPLAY AUTO-COMPLETE BOX         */
/* =================================================== */

.top_bar_search-input.active .top_bar_search-autocomplete-box {
  padding: 1rem 0.8rem 1rem 0.8rem;
  opacity: 1;
  pointer-events: auto;
}

.top_bar_search-input.active .top_bar_search-autocomplete-box li {
  display: block;
}

.top_bar_search-input.active input {
  border-radius: 0.5rem 0.5rem 0 0;
}

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

/* ----------------------------------- */
/* FIXME:  SEARCH - LIST-ITEMS  FIXME: */
/* ----------------------------------- */

.top_bar_search-autocomplete-box li {
  width: 100%;
  list-style: none;
  border-radius: 0.3rem;
  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
  cursor: default;
  display: none;
}

.top_bar_search-autocomplete-box li:hover {
  background: var(--color-list-items-background-hover);
  color: var(--color-list-items-background-hover-text);
}

/* ===================================================================================================================== */
/* TODO:  PART 4 - CONTAINER (SOCIAL) - SOCIAL MEDIA LINKS                                                               */
/* ===================================================================================================================== */

/* ==================================== */
/* COLOURS USED FOR SOCIAL MEDIA LINKS  */
/* ==================================== */

/* MAIN CONTAINER - HOLDING ALL SOCIAL MEDIA COMPONENTS TOGETHER  */
.top_bar_container_social {
  position: relative;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0.5rem 0rem;
  width: 100%;
  height: 4rem;
  /* border: 1px solid green; */
}

/* NOTE: Translate (width, height) */
.top_bar_social-media 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;
}

.top_bar_social-media ul li {
  list-style: none;
  margin: 0rem 0.5rem 0rem 0.5rem;
}

.top_bar_social-media ul li .bx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.65rem;
  line-height: 1.4rem;
  transition: 0.6s;
  color: var(--color-box-icons-normal);
}

.top_bar_social-media ul li .bx:hover {
  color: var(--color-box-icons-hover);
}

.top_bar_social-media ul li a {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--color-box-icons-anchor);
  text-align: center;
  transition: 0.6s;
  box-shadow: var(--color-box-shadow-02);
  /* border: 1px solid black; */
}

/* NOTE: Translate (width, height) */
.top_bar_social-media ul li a:hover {
  transform: translate(0, -0.4rem);
}

/* Implement on hover - FACEBOOK Color  */
.top_bar_social-media ul li:nth-child(1) a:hover {
  background-color: var(--color-facebook2);
}

/* Implement on hover - INSTAGRAM  */
.top_bar_social-media ul li:nth-child(2) a:hover {
  background-color: var(--color-instagram);
}

/* Implement on hover - TWITTER  */
.top_bar_social-media ul li:nth-child(3) a:hover {
  background-color: var(--color-twitter);
}

/* Implement on hover - LINKEDIN  */
.top_bar_social-media ul li:nth-child(4) a:hover {
  background-color: var(--color-linkedin);
}

/* Implement on hover - YOUTUBE  */
.top_bar_social-media ul li:nth-child(5) a:hover {
  background-color: var(--color-youtube);
}

/* Implement on hover - WHATSAPP  */
.top_bar_social-media ul li:nth-child(6) a:hover {
  background-color: var(--color-whatsapp);
}

/* Implement on hover - WISHLIST  */
.top_bar_social-media ul li:nth-child(7) a:hover {
  background-color: var(--color-wishlist);
}

/* Implement on hover - SHOPPING CART  */
.top_bar_social-media ul li:nth-child(8) a:hover {
  background-color: var(--color-shopping);
}

/* Implement on hover - USER ACCOUNT  */
.top_bar_social-media ul li:nth-child(9) a:hover {
  background-color: var(--color-shopping);
}

/* ===================================================================================================================== */
/* TODO:  PART 5 - BUTTONS FOR USER ACCOUNT AND TO TEST "ADD TO WISH LIST" AND "ADD TO CART"                             */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/*                                FIXME:  MAIN CONTAINER HOLDING USER, HEART & CART  FIXME:                              */
/* ===================================================================================================================== */

.top_bar_shopping_icons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  border-radius: 0rem 2.5rem 2.5rem 0rem;
  box-shadow: var(--color-box-shadow-01);
  background-color: var(--color-shopping-group-icons-background-02);
  /* border: 1px solid #dc143c; */
}

/* ===================================================================================================================== */
/*                                                TODO:  USER ACCOUNT  TODO:                                             */
/* ===================================================================================================================== */

/* ------------------------------------------ */
/* FIXME:  MAIN CONTAINER - USER ICON  FIXME: */
/* ------------------------------------------ */

.top_bar_user_account {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0rem 0rem 0rem 0rem;
  border-radius: 0rem 0rem 0rem 0rem;
  /* border: 1px solid orange; */
}

/* ------------------------------ */
/* FIXME:  ANCHOR ELEMENT  FIXME: */
/* ------------------------------ */

.top_bar_user_account a {
  text-decoration: none;
  cursor: pointer;
  color: var(--color-user-account);
}

/* ------------------------- */
/* FIXME:  USER ICON  FIXME: */
/* ------------------------- */

.top_bar_user_account i {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.9rem;
  font-weight: 600;
  width: 4rem;
  height: 4rem;
  color: var(--color-user-account);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  /* border: 1px solid yellow; */
}

/* --------------------------------- */
/* FIXME:  USER ICON - HOVER  FIXME: */
/* --------------------------------- */

.top_bar_user_account i:hover {
  color: var(--color-user-account-hover);
  transform: scale(1.1);
}

/* ===================================================================================================================== */
/*                                                TODO:  WISH LIST  TODO:                                                */
/* ===================================================================================================================== */

/* --------------------------------------------------------------- */
/* FIXME:  MAIN CONTAINER - HOLDING COUNTER AND HEART ICON  FIXME: */
/* --------------------------------------------------------------- */

/* ------------------------------------------------------------------------------------ */
/* CONTAINER HOLD WISH LIST BUTTON with "wishlist-add-animation" ID for Javascript Code */
/* ------------------------------------------------------------------------------------ */

/* .wishlist-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
} */

/* ----------------------------------------------------------------------------------- */
/* CONTAINER HOLD THE WISHLIST COUNTER with "wishlist-counter" ID for Javascript Code  */
/* ----------------------------------------------------------------------------------- */

.wishlist-counter-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 0rem 2.5rem 2.5rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
  /* border: 1px solid orange; */
}

/* ------------------------------ */
/* FIXME:  ANCHOR ELEMENT  FIXME: */
/* ------------------------------ */

.wishlist-counter-container a {
  text-decoration: none;
  cursor: pointer;
  color: var(--color-wish-list-icon);
}

/* -------------------------- */
/* FIXME:  HEART ICON  FIXME: */
/* -------------------------- */

.wishlist-counter-container i {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.35rem;
  font-weight: 500;
  width: 4rem;
  height: 4rem;
  color: var(--color-wish-list-icon);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  /* border: 1px solid green; */
}

/* ---------------------------------- */
/* FIXME:  HEART ICON - HOVER  FIXME: */
/* ---------------------------------- */

.wishlist-counter-container i:hover {
  color: var(--color-wish-list-icon-hover);
  transform: scale(1.1);
}

/* ---------------------------------------- */
/* FIXME:  WISH LIST SPAN - COUNTER  FIXME: */
/* ---------------------------------------- */

.wishlist-counter-container span {
  position: absolute;
  user-select: none;
  top: 0.3rem;
  right: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  background-color: var(--color-wish-list-counter-background);
  color: var(--color-wish-list-counter-text);
  z-index: 1;
}

/* ----------------------------------------- */
/* FIXME:  BUTTON - ADD TO WISH LIST  FIXME: */
/* ----------------------------------------- */

/* .wishlist-container button {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: 1rem 1rem 1rem 1rem;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  border-radius: 0.5rem;
  background-color: var(--color-add-to-wish-list-button-background);
  color: var(--color-add-to-wish-list-button-text);
  outline: none;
  border: none;
  transition: transform 0.3s ease-in-out;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  border: 1px solid red;
}

.wishlist-container button:hover {
  opacity: 0.9;
  transform: scale(1.02);
  cursor: pointer;
} */

/* ----------------------------------- */
/* FIXME:  COUNTER - ANIMATION  FIXME: */
/* ----------------------------------- */

/* ----------------------------------------------------------------------------------------------------- */
/* TODO:FIXME:  JAVASCRIPT - WISH LIST COUNTER ANIMATION ON "ADD TO WISH LIST" BUTTON CLICK  TODO:FIXME: */
/* ----------------------------------------------------------------------------------------------------- */

.wishlist-counter-container span:not(.wishlist-animated-counter) {
  display: flex;
}

.wishlist-counter-container span .wishlist-animated-counter {
  animation: wishCount 0.4s ease-in-out;
}

@keyframes wishCount {
  from {
    top: 0.2rem;
    right: -1.8rem;
    transform: rotate(120deg);
  }

  25% {
    top: -0.2rem;
    right: -1.2rem;
    transform: rotate(80deg);
  }

  50% {
    top: -0.4rem;
    right: -0.6rem;
    transform: rotate(60deg);
  }

  75% {
    top: -0.4rem;
    right: 0rem;
    transform: rotate(30deg);
  }

  to {
    top: 0.2rem;
    right: 0.3rem;
    transform: rotate(0deg);
  }
}

/* ===================================================================================================================== */
/*                                              TODO:  SHOPPING CART  TODO:                                              */
/* ===================================================================================================================== */

/* ----------------------------------------------------------------------- */
/* FIXME:  MAIN CONTAINER - HOLDING COUNTER AND SHOPPING CART ICON  FIXME: */
/* ----------------------------------------------------------------------- */

/* -------------------------------------------------------- */
/* FIXME:  CONTAINERS - MAIN (HOLDING ALL ELEMENTS)  FIXME: */
/* -------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* CONTAINER HOLD CART BUTTON with "add-animation" ID for Javascript Code */
/* ---------------------------------------------------------------------- */

/* .shopping-container {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
} */

/* ---------------------------------------------------------------------- */
/* CONTAINER HOLD THE CART COUNTER with "counter" ID for Javascript Code  */
/* ---------------------------------------------------------------------- */

.cart_counter-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 0rem 2.5rem 2.5rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
  /* border: 1px solid orange; */
}

/* ------------------------------ */
/* FIXME:  ANCHOR ELEMENT  FIXME: */
/* ------------------------------ */

.cart_counter-container a {
  text-decoration: none;
  cursor: pointer;
  color: var(--color-shopping-cart-icon);
}

/* ---------------------------------- */
/* FIXME:  SHOPPING CART ICON  FIXME: */
/* ---------------------------------- */

.cart_counter-container i {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.35rem;
  font-weight: 500;
  width: 4rem;
  height: 4rem;
  color: var(--color-shopping-cart-icon);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  /* border: 1px solid red; */
}

/* ------------------------------------------ */
/* FIXME:  SHOPPING CART ICON - HOVER  FIXME: */
/* ------------------------------------------- */

.cart_counter-container i:hover {
  color: var(--color-shopping-cart-icon-hover);
  transform: scale(1.1);
}

/* -------------------------------------------- */
/* FIXME:  SHOPPING CART SPAN - COUNTER  FIXME: */
/* -------------------------------------------- */

.cart_counter-container span {
  position: absolute;
  user-select: none;
  top: 0.4rem;
  right: 0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-family: "Poppins", sans-serif;
  font-size: 0.8rem;
  font-weight: bold;
  background-color: var(--color-wish-list-counter-background);
  color: var(--color-wish-list-counter-text);
  z-index: 1;
}

/* ------------------------------------ */
/* FIXME:  BUTTON - ADD TO CART  FIXME: */
/* ------------------------------------ */

/* .shopping-container button {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: 1rem 1rem 1rem 1rem;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  border-radius: 0.5rem;
  background-color: var(--color-add-to-cart-button-background);
  color: var(--color-add-to-cart-button-text);
  outline: none;
  border: none;
  transition: transform 0.3s ease-in-out;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  border: 1px solid red;
}

.shopping-container button:hover {
  opacity: 0.9;
  transform: scale(1.02);
  cursor: pointer;
} */

/* ---------------------------------------------------------------------------------------------------- */
/* TODO:FIXME:  JAVASCRIPT - SHOPPING CART COUNTER ANIMATION ON "ADD TO CART" BUTTON CLICK  TODO:FIXME: */
/* ---------------------------------------------------------------------------------------------------- */

.cart_counter-container span:not(.animated-counter) {
  display: flex;
}

.cart_counter-container span .animated-counter {
  animation: shopCount 0.4s ease-in-out;
}

@keyframes shopCount {
  from {
    top: 0.2rem;
    right: -1.8rem;
    transform: rotate(120deg);
  }

  25% {
    top: -0.2rem;
    right: -1.2rem;
    transform: rotate(80deg);
  }

  50% {
    top: -0.4rem;
    right: -0.6rem;
    transform: rotate(60deg);
  }

  75% {
    top: -0.4rem;
    right: 0rem;
    transform: rotate(30deg);
  }

  to {
    top: 0.2rem;
    right: 0.3rem;
    transform: rotate(0deg);
  }
}

/* ===================================================================================================================== */
/* TODO:  PART 6 - RESPONSIVE / MOBILE VIEW (ALL MEDIA QUERIES) - FOR 2ND COMPONENT                                      */
/* ===================================================================================================================== */

/* --------------------------- */
/* FIXME:  BREAKPOINT:  830 px */
/* --------------------------- */

@media screen and (max-width: 1280px) {
  .top_bar_search-input .top_bar_search-autocomplete-box {
    width: 100%;
    position: absolute;
    z-index: 10;
  }
}

@media screen and (max-width: 830px) {
  .top_bar_container_all {
    display: flex;
    flex-direction: column;
  }

  .top_bar_search-bar-container {
    max-width: 41rem;
    margin: 1rem auto 1rem auto;
  }

  .top_bar_social-media ul li {
    margin: 0.5rem 2rem 0rem 2rem;
  }

  /* .top_bar_search-input .top_bar_search-autocomplete-box {
    width: 100%;
    position: absolute;
    z-index: 9999;
  } */
}

/* --------------------------- */
/* FIXME:  BREAKPOINT:  520 px */
/* --------------------------- */

@media screen and (max-width: 520px) {
  .top_bar_search-bar-container {
    max-width: 39rem;
    margin: 1rem auto 1rem auto;
  }

  .top_bar_social-media ul li {
    margin: 0rem 1.8rem 0rem 1.8rem;
  }
}

/* --------------------------- */
/* FIXME:  BREAKPOINT:  450 px */
/* --------------------------- */

@media screen and (max-width: 450px) {
  .top_bar_search-bar-container {
    display: flex;
    flex-direction: column;
    max-width: 33rem;
    margin: 1rem auto 1rem auto;
    padding: 0rem 0rem 0rem 0rem;
  }

  .top_bar_search-bar-container .top_bar_search-input {
    border-radius: 1rem 1rem 0rem 0rem;
  }

  .top_bar_search-bar-container .top_bar_shopping_icons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 0rem 0rem 1rem 1rem;
    border: none;
  }

  .top_bar_container_social {
    top: 4rem;
  }

  .cart_counter-container {
    border-radius: 0rem 0rem 0rem 0rem;
  }

  .top_bar_user_account {
    border-radius: 0rem 0rem 0rem 0rem;
  }

  .top_bar_social-media ul li {
    margin: 0rem 1.7rem 0rem 1.7rem;
  }
}

/* --------------------------- */
/* FIXME:  BREAKPOINT:  400 px */
/* --------------------------- */

@media screen and (max-width: 400px) {
  .top_bar_search-bar-container {
    max-width: 30rem;
  }

  .top_bar_social-media ul li {
    margin: 0rem 1.4rem 0rem 1.4rem;
  }
}

/* --------------------------- */
/* FIXME:  BREAKPOINT:  350 px */
/* --------------------------- */

@media screen and (max-width: 350px) {
  .top_bar_search-bar-container {
    width: 26rem;
  }

  .top_bar_social-media ul li {
    margin: 0rem 1rem 0rem 1rem;
    /* transform: scale(0.75); */
  }
}

/* --------------------------- */
/* FIXME:  BREAKPOINT:  320 px */
/* --------------------------- */

@media screen and (max-width: 320px) {
  .top_bar_search-bar-container {
    width: 23.5rem;
  }

  .top_bar_social-media ul li {
    margin: 0rem 0.75rem 0rem 0.75rem;
    /* transform: scale(0.75); */
  }
}

/* --------------------------- */
/* FIXME:  BREAKPOINT:  300 px */
/* --------------------------- */

@media screen and (max-width: 300px) {
  .top_bar_search-bar-container {
    width: 22rem;
  }

  .top_bar_social-media ul li {
    margin: 0rem 0.6rem 0rem 0.6rem;
    /* transform: scale(0.75); */
  }
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                    SECTION - LOGO, SEARCH BAR, SOCIAL MEDIA ICONS (END)                     FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                               SECTION - MAIN NAVIGATION (START)                                 TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

.main__navigation__container {
  display: flex;
  margin: 1.5rem 0rem 0.5rem 0rem;
  padding: 0rem 0rem 0.5rem 0rem;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  column-gap: 1rem;
  background-color: white;
  /* z-index: 0; */
  /* border: 2px solid red; */
}

/* ===================================================================================================================== */
/* TODO:  TOP NAVIGATION - TITLE, BUTTON & DROP-DOWN ICON                                                                */
/* ===================================================================================================================== */

/* TOP NAVIGATION - POSITIONING */

nav .shopproductsall {
  position: absolute;
  top: 1%;
  left: 1%;
  transform: translate(-1%, -1%);
  /* border: 3px solid green; */
}

/* TOP NAVIGATION - TITLE & BUTTON (THE COMPLETE BOX IS THE BUTTON) */

nav .productsdrop-btn {
  width: var(--topnavigation-button-width);
  background: var(--color-top-navigation-background);
  color: var(--color-top-navigation-text);
  line-height: var(--topnavigation-line-height);
  padding: 0rem 1rem 0rem 1rem;
  border-radius: 0.5rem;
  font-size: var(--topnavigation-font-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  z-index: 1;
}

/* TOP NAVIGATION - DROP-DOWN ICON */

nav .productsdrop-btn span {
  float: right;
  line-height: var(--topnavigation-dropdown-icon-line-height);
  font-size: var(--topnavigation-dropdown-icon-font-size);
  cursor: pointer;
  color: var(--topnavigation-dropdown-icon-color);
}

/* ===================================================================================================================== */
/* TODO:  1ST LEVEL NAVIGATION - TOOLTIP & DROP-DOWN MENU (CONTAINER)                                                    */
/* ===================================================================================================================== */

/* 1ST LEVEL - TOOLTIP POSITIONING, SIZING & COLOR  */

nav .productstooltip {
  position: absolute;
  left: 71.15rem;
  top: 2.2rem;
  height: 1rem;
  width: 1rem;
  background: var(--color-tooltip-background);
  transform: rotate(45deg);
  display: none;
}

/* =============================================== */
/* TODO:  TOOLTIP LINK TO JAVASCRIPT CODE          */
/* =============================================== */

/* TOOLTIP - DISPLAY ON OPENING OF CONTAINER */

nav .productstooltip.show {
  display: block;
}

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

/* 1ST LEVEL - CONTAINER (HOLDING ALL ELEMENTS */

/* CONTAINER - POSITIONING AND SIZING */

nav .productswrapper {
  position: absolute;
  /* top: 3.5rem; */
  top: 8.5rem;
  display: flex;
  width: var(--navigation-wrapper-width);
  overflow: hidden;
  background: var(--color-drop-down-container);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  display: none;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  z-index: 4;
  /* border: 1px solid green; */
}

/* ============================================= */
/* TODO:  CONTAINER LINK TO JAVASCRIPT SCRIPT    */
/* ============================================= */

/* CONTAINER - OPEN, CLOSING, DISPLAY TYPE */

nav .productswrapper.show {
  display: block;
  display: flex;
}

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

/* ===================================================================================================================== */
/* TODO:  1ST LEVEL NAVIGATION - MENU-ITEMS (UNORDERED LISTS, LIST ITEMS, ANCHORS AND ICONS)                             */
/* ===================================================================================================================== */

/* lEVEL 1 - UNORDERED LIST - REMOVE BULLETS, SET MAX-WIDTH OF LIST-ITEMS, SET PADDING AROUND LIST-ITEMS */

nav .productswrapper ul {
  list-style: none;
  width: var(--navigation-wrapper-ul-width);
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  transition: all 0.3s ease;
}

/* LEVEL 1 - LIST ITEMS - SET MAX LINE-HEIGHT OF LIST -ITEMS */

nav .productswrapper ul li {
  line-height: var(--navigation-wrapper-ul-li-line-height);
}

/* LEVEL 1 - UNORDERED LIST, LIST ITEMS, ANCHORS (POSITIONING, SIZING, FONT-SIZING) */

nav .productswrapper ul li a {
  position: relative;
  text-decoration: none;
  color: var(--color-menu-items-all-levels);
  display: flex;
  font-size: var(--navigation-wrapper-ul-li-anchor-font-size);
  font-weight: 500;
  padding: 0rem 0rem 0rem 0.5rem;
  align-items: center;
  border-radius: 0.8rem;
}

/* LEVEL 1 - UNORDERED LIST, LIST ITEMS, ANCHORS (ON HOVER COLOR) */

nav .productswrapper ul li:hover a {
  background: var(--color-menu-items-all-levels-hover);
}

/* LEVEL 1 - ICON CONTAINER - HEIGTH, WIDTH, MARGINS, BACKGROUND COLOR, ALIGNMENT OF ICONS WITHIN */

.productswrapper ul li a .icon {
  height: var(--icon-circle-height);
  width: var(--icon-circle-width);
  margin: 0rem 0.5rem 0rem 0rem;
  background: var(--color-icon-container);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
}

/* LEVEL 1 - NAVIGATION ICONS (TO NEXT LEVEL) - ICON: FA-ANGLE-RIGHT */

.productswrapper ul li a i {
  position: absolute;
  right: 0.8rem;
  font-size: var(--icon-right-angle-font-size);
  pointer-events: none;
  color: var(--color-icon-right-angle);
}

/* FIRST LEVEL DROPDOWN-TO-RIGHT */

/* ===================================================================================================================== */
/* TODO:  2ND LEVEL NAVIGATION - THE BACK BUTTON (ARROW) TO THE FIRST LEVEL & BUTTON TEXT                                */
/* ===================================================================================================================== */

.productswrapper ul .arrow {
  padding: 0rem 0rem 0rem 0.7rem;
  font-size: var(--icon-back-button-font-size);
  font-weight: 700;
  color: var(--color-back-button-arrow-and-text);
  cursor: pointer;
}

.productswrapper ul .arrow span {
  margin: 0rem 0.8rem 0rem 0rem;
}

.productswrapper .arrow span {
  color: var(--color-back-button-arrow-only);
}

/* ===================================================================================================================== */
/* TODO:  THE INCLUDED HIDDEN NESTED LISTS ON THE NAVIGATION (WHICH IS NOT VISIBLE WHEN NOT ACTIVE)                      */
/* ===================================================================================================================== */

/* nav .productswrapper .skynamo-drop, */
/* nav .productswrapper .whistleblowing-drop, */
/* nav .productswrapper .generalservices-drop, */
/* nav .productswrapper .professionalservices-drop, */
nav .productswrapper .marketplaceproducts-drop,
nav .productswrapper .kettie-drop,
nav .productswrapper .mobile-drop,
nav .productswrapper .laptops-drop,
nav .productswrapper .phones-drop,
nav .productswrapper .tablets-drop,
nav .productswrapper .watches-drop,
nav .productswrapper .data-drop,
nav .productswrapper .mobileaccessories-drop,
nav .productswrapper .office-drop,
nav .productswrapper .desktoppc-drop,
nav .productswrapper .pccomponents-drop,
nav .productswrapper .pcperipherals-drop,
nav .productswrapper .servers-drop,
nav .productswrapper .pointofsale-drop,
nav .productswrapper .securitysurveillance-drop,
nav .productswrapper .printers-drop,
nav .productswrapper .projectors-drop,
nav .productswrapper .software-drop,
nav .productswrapper .officestationery-drop,
nav .productswrapper .officefurniture-drop,
nav .productswrapper .homeliving-drop,
nav .productswrapper .bathrooms-drop,
nav .productswrapper .bedrooms-drop,
nav .productswrapper .cookware-drop,
nav .productswrapper .diningrooms-drop,
nav .productswrapper .kitchen-drop,
nav .productswrapper .laundry-drop,
nav .productswrapper .lounge-drop,
nav .productswrapper .patiopools-drop,
nav .productswrapper .homeaccessories-drop,
nav .productswrapper .television-drop,
nav .productswrapper .hobbies-drop,
nav .productswrapper .booksall-drop,
nav .productswrapper .camerasall-drop,
nav .productswrapper .gamingall-drop,
nav .productswrapper .radiocontrol-drop,
nav .productswrapper .toysall-drop,
nav .productswrapper .outdoors-drop,
nav .productswrapper .camping-drop,
nav .productswrapper .offroadvehicles-drop,
nav .productswrapper .outdoorgear-drop,
nav .productswrapper .shoothunt-drop,
nav .productswrapper .watersports-drop,
nav .productswrapper .sports-drop,
nav .productswrapper .tablesports-drop,
nav .productswrapper .diyall-drop,
nav .productswrapper .diygardening-drop,
nav .productswrapper .diymaterials-drop,
nav .productswrapper .diytools-drop,
nav .productswrapper .covid19-drop,
nav .productswrapper .emergency-drop,
nav .productswrapper .energy-drop,
nav .productswrapper .groceries-drop,
nav .productswrapper .freshproduce-drop,
nav .productswrapper .bakery-drop,
nav .productswrapper .dairyeggs-drop,
nav .productswrapper .deliparty-drop,
nav .productswrapper .meatspoultryfish-drop,
nav .productswrapper .frozenfoods-drop,
nav .productswrapper .beveragesall-drop,
nav .productswrapper .tabacco-drop,
nav .productswrapper .beercider-drop,
nav .productswrapper .winesall-drop,
nav .productswrapper .spiritsall-drop,
nav .productswrapper .snacks-drop,
nav .productswrapper .foodcupboard-drop,
nav .productswrapper .babycare-drop,
nav .productswrapper .petcare-drop,
nav .productswrapper .braaioutdoors-drop,
nav .productswrapper .clothingfootwear-drop,
nav .productswrapper .ladiesgroup-drop,
nav .productswrapper .ladiesshoes-drop,
nav .productswrapper .ladiesbottoms-drop,
nav .productswrapper .ladiesdresses-drop,
nav .productswrapper .ladiestops-drop,
nav .productswrapper .ladiesjackets-drop,
nav .productswrapper .ladieslingerie-drop,
nav .productswrapper .ladiessports-drop,
nav .productswrapper .ladiesswimwear-drop,
nav .productswrapper .ladiesaccessories-drop,
nav .productswrapper .ladiesbeauty-drop,
nav .productswrapper .mensgroup-drop,
nav .productswrapper .mensshoes-drop,
nav .productswrapper .mensbottoms-drop,
nav .productswrapper .mensformalwear-drop,
nav .productswrapper .menstops-drop,
nav .productswrapper .mensjackets-drop,
nav .productswrapper .mensunderwear-drop,
nav .productswrapper .menssports-drop,
nav .productswrapper .mensswimwear-drop,
nav .productswrapper .mensaccessories-drop,
nav .productswrapper .mensgrooming-drop,
nav .productswrapper .kidsgroup-drop,
nav .productswrapper .babygirls-drop,
nav .productswrapper .babyboys-drop,
nav .productswrapper .girlstwoeight-drop,
nav .productswrapper .boystwoeight-drop,
nav .productswrapper .girlseightsixteen-drop,
nav .productswrapper .boyseightsixteen-drop {
  display: none;
}

/* ===================================================================================================================== */
/* TODO:                          FIXME:   NAVIGATION (PART 3) - SUPPORT SERVICES  FIXME:                          TODO: */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* TODO:  TOP NAVIGATION - TITLE, BUTTON & DROP-DOWN ICON                                                                */
/* ===================================================================================================================== */

/* TOP NAVIGATION - POSITIONING */

nav .supportservices {
  position: absolute;
  top: 1%;
  left: 1%;
  transform: translate(-1%, -1%);
}

/* TOP NAVIGATION - TITLE & BUTTON (THE COMPLETE BOX IS THE BUTTON) */

nav .supportservices-btn {
  width: var(--topnavigation-button-width);
  background: var(--color-top-navigation-background);
  color: var(--color-top-navigation-text);
  line-height: var(--topnavigation-line-height);
  padding: 0rem 1rem 0rem 1rem;
  border-radius: 0.5rem;
  font-size: var(--topnavigation-font-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  z-index: 3;
}

/* TOP NAVIGATION - DROP-DOWN ICON */

nav .supportservices-btn span {
  float: right;
  line-height: var(--topnavigation-dropdown-icon-line-height);
  font-size: var(--topnavigation-dropdown-icon-font-size);
  cursor: pointer;
  color: var(--topnavigation-dropdown-icon-color);
}

/* ===================================================================================================================== */
/* TODO:  1ST LEVEL NAVIGATION - TOOLTIP & DROP-DOWN MENU (CONTAINER)                                                    */
/* ===================================================================================================================== */

/* 1ST LEVEL - TOOLTIP POSITIONING, SIZING & COLOR  */

nav .supportservicestooltip {
  position: absolute;
  left: 17.15rem;
  top: 2.2rem;
  height: 1rem;
  width: 1rem;
  background: var(--color-tooltip-background);
  transform: rotate(45deg);
  display: none;
}

/* =============================================== */
/* TODO:  TOOLTIP LINK TO JAVASCRIPT CODE          */
/* =============================================== */

/* TOOLTIP - DISPLAY ON OPENING OF CONTAINER */

nav .supportservicestooltip.show {
  display: block;
}

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

/* 1ST LEVEL - CONTAINER (HOLDING ALL ELEMENTS */

/* CONTAINER - POSITIONING AND SIZING */

nav .supportserviceswrapper {
  position: absolute;
  /* top: 3.5rem; */
  top: 8.5rem;
  display: flex;
  width: var(--navigation-wrapper-width);
  overflow: hidden;
  background: var(--color-drop-down-container);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  display: none;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

/* ============================================= */
/* TODO:  CONTAINER LINK TO JAVASCRIPT SCRIPT    */
/* ============================================= */

/* CONTAINER - OPEN, CLOSING, DISPLAY TYPE */

nav .supportserviceswrapper.show {
  display: block;
  display: flex;
}

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

/* ===================================================================================================================== */
/* TODO:  1ST LEVEL NAVIGATION - MENU-ITEMS (UNORDERED LISTS, LIST ITEMS, ANCHORS AND ICONS)                             */
/* ===================================================================================================================== */

/* lEVEL 1 - UNORDERED LIST - REMOVE BULLETS, SET MAX-WIDTH OF LIST-ITEMS, SET PADDING AROUND LIST-ITEMS */

nav .supportserviceswrapper ul {
  list-style: none;
  width: var(--navigation-wrapper-ul-width);
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  transition: all 0.3s ease;
}

/* LEVEL 1 - LIST ITEMS - SET MAX LINE-HEIGHT OF LIST -ITEMS */

nav .supportserviceswrapper ul li {
  line-height: var(--navigation-wrapper-ul-li-line-height);
}

/* LEVEL 1 - UNORDERED LIST, LIST ITEMS, ANCHORS (POSITIONING, SIZING, FONT-SIZING) */

nav .supportserviceswrapper ul li a {
  position: relative;
  text-decoration: none;
  color: var(--color-menu-items-all-levels);
  display: flex;
  font-size: var(--navigation-wrapper-ul-li-anchor-font-size);
  font-weight: 500;
  padding: 0rem 0rem 0rem 0.5rem;
  align-items: center;
  border-radius: 0.8rem;
}

/* LEVEL 1 - UNORDERED LIST, LIST ITEMS, ANCHORS (ON HOVER COLOR) */

nav .supportserviceswrapper ul li:hover a {
  background: var(--color-menu-items-all-levels-hover);
}

/* LEVEL 1 - ICON CONTAINER - HEIGTH, WIDTH, MARGINS, BACKGROUND COLOR, ALIGNMENT OF ICONS WITHIN */

.supportserviceswrapper ul li a .icon {
  height: var(--icon-circle-height);
  width: var(--icon-circle-width);
  margin: 0rem 0.5rem 0rem 0rem;
  background: var(--color-icon-container);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
}

/* LEVEL 1 - NAVIGATION ICONS (TO NEXT LEVEL) - ICON: FA-ANGLE-RIGHT */

.supportserviceswrapper ul li a i {
  position: absolute;
  right: 0.8rem;
  font-size: var(--icon-right-angle-font-size);
  pointer-events: none;
  color: var(--color-icon-right-angle);
}

/* FIRST LEVEL DROPDOWN-TO-RIGHT */

/* ===================================================================================================================== */
/* TODO:  2ND LEVEL NAVIGATION - THE BACK BUTTON (ARROW) TO THE FIRST LEVEL & BUTTON TEXT                                */
/* ===================================================================================================================== */

.supportserviceswrapper ul .arrow {
  padding: 0rem 0rem 0rem 0.7rem;
  font-size: var(--icon-back-button-font-size);
  font-weight: 700;
  color: var(--color-back-button-arrow-and-text);
  cursor: pointer;
}

.supportserviceswrapper ul .arrow span {
  margin: 0rem 0.8rem 0rem 0rem;
}

.supportserviceswrapper .arrow span {
  color: var(--color-back-button-arrow-only);
}

/* ===================================================================================================================== */
/* TODO:  THE INCLUDED HIDDEN NESTED LISTS ON THE NAVIGATION (WHICH IS NOT VISIBLE WHEN NOT ACTIVE)                      */
/* ===================================================================================================================== */

/* nav .supportserviceswrapper .investingplans-drop, */
nav .supportserviceswrapper .skynamo-drop,
nav .supportserviceswrapper .whistleblowing-drop,
nav .supportserviceswrapper .generalservices-drop,
nav .supportserviceswrapper .professionalservices-drop,
nav .supportserviceswrapper .sellingplans-drop {
  display: none;
}

/* ===================================================================================================================== */
/* TODO:                           FIXME:   NAVIGATION (PART 4) - CLIENT ZONE  FIXME:                              TODO: */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* TODO:  TOP NAVIGATION - TITLE, BUTTON & DROP-DOWN ICON                                                                */
/* ===================================================================================================================== */

/* TOP NAVIGATION - POSITIONING */

nav .clientzonegroup {
  position: absolute;
  top: 1%;
  left: 1%;
  transform: translate(-1%, -1%);
}

/* TOP NAVIGATION - TITLE & BUTTON (THE COMPLETE BOX IS THE BUTTON) */

nav .clientzonedrop-btn {
  width: var(--topnavigation-button-width);
  background: var(--color-top-navigation-background);
  color: var(--color-top-navigation-text);
  line-height: var(--topnavigation-line-height);
  padding: 0rem 1rem 0rem 1rem;
  border-radius: 0.5rem;
  font-size: var(--topnavigation-font-size);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  z-index: 3;
}

/* TOP NAVIGATION - DROP-DOWN ICON */

nav .clientzonedrop-btn span {
  float: right;
  line-height: var(--topnavigation-dropdown-icon-line-height);
  font-size: var(--topnavigation-dropdown-icon-font-size);
  cursor: pointer;
  color: var(--topnavigation-dropdown-icon-color);
}

/* ===================================================================================================================== */
/* TODO:  1ST LEVEL NAVIGATION - TOOLTIP & DROP-DOWN MENU (CONTAINER)                                                    */
/* ===================================================================================================================== */

/* 1ST LEVEL - TOOLTIP POSITIONING, SIZING & COLOR  */

nav .clientzonetooltip {
  position: absolute;
  left: 125.15rem;
  top: 2.2rem;
  height: 1rem;
  width: 1rem;
  background: var(--color-tooltip-background);
  transform: rotate(45deg);
  display: none;
}

/* =============================================== */
/* TODO:  TOOLTIP LINK TO JAVASCRIPT CODE          */
/* =============================================== */

/* TOOLTIP - DISPLAY ON OPENING OF CONTAINER */

nav .clientzonetooltip.show {
  display: block;
}

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

/* 1ST LEVEL - CONTAINER (HOLDING ALL ELEMENTS */

/* CONTAINER - POSITIONING AND SIZING */

nav .clientzonewrapper {
  position: absolute;
  /* top: 3.5rem; */
  top: 8.5rem;
  display: flex;
  width: var(--navigation-wrapper-width);
  overflow: hidden;
  background: var(--color-drop-down-container);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  display: none;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

/* ============================================= */
/* TODO:  CONTAINER LINK TO JAVASCRIPT SCRIPT    */
/* ============================================= */

/* CONTAINER - OPEN, CLOSING, DISPLAY TYPE */

nav .clientzonewrapper.show {
  display: block;
  display: flex;
}

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

/* ===================================================================================================================== */
/* TODO:  1ST LEVEL NAVIGATION - MENU-ITEMS (UNORDERED LISTS, LIST ITEMS, ANCHORS AND ICONS)                             */
/* ===================================================================================================================== */

/* lEVEL 1 - UNORDERED LIST - REMOVE BULLETS, SET MAX-WIDTH OF LIST-ITEMS, SET PADDING AROUND LIST-ITEMS */

nav .clientzonewrapper ul {
  list-style: none;
  width: var(--navigation-wrapper-ul-width);
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  transition: all 0.3s ease;
}

/* LEVEL 1 - LIST ITEMS - SET MAX LINE-HEIGHT OF LIST -ITEMS */

nav .clientzonewrapper ul li {
  line-height: var(--navigation-wrapper-ul-li-line-height);
}

/* LEVEL 1 - UNORDERED LIST, LIST ITEMS, ANCHORS (POSITIONING, SIZING, FONT-SIZING) */

nav .clientzonewrapper ul li a {
  position: relative;
  text-decoration: none;
  color: var(--color-menu-items-all-levels);
  display: flex;
  font-size: var(--navigation-wrapper-ul-li-anchor-font-size);
  font-weight: 500;
  padding: 0rem 0rem 0rem 0.5rem;
  align-items: center;
  border-radius: 0.8rem;
}

/* LEVEL 1 - UNORDERED LIST, LIST ITEMS, ANCHORS (ON HOVER COLOR) */

nav .clientzonewrapper ul li:hover a {
  background: var(--color-menu-items-all-levels-hover);
}

/* LEVEL 1 - ICON CONTAINER - HEIGTH, WIDTH, MARGINS, BACKGROUND COLOR, ALIGNMENT OF ICONS WITHIN */

.clientzonewrapper ul li a .icon {
  height: var(--icon-circle-height);
  width: var(--icon-circle-width);
  margin: 0rem 0.5rem 0rem 0rem;
  background: var(--color-icon-container);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
}

/* LEVEL 1 - NAVIGATION ICONS (TO NEXT LEVEL) - ICON: FA-ANGLE-RIGHT */

.clientzonewrapper ul li a i {
  position: absolute;
  right: 0.8rem;
  font-size: var(--icon-right-angle-font-size);
  pointer-events: none;
  color: var(--color-icon-right-angle);
}

/* FIRST LEVEL DROPDOWN-TO-RIGHT */

/* ===================================================================================================================== */
/* TODO:  2ND LEVEL NAVIGATION - THE BACK BUTTON (ARROW) TO THE FIRST LEVEL & BUTTON TEXT                                */
/* ===================================================================================================================== */

.clientzonewrapper ul .arrow {
  padding: 0rem 0rem 0rem 0.7rem;
  font-size: var(--icon-back-button-font-size);
  font-weight: 700;
  color: var(--color-back-button-arrow-and-text);
  cursor: pointer;
}

.clientzonewrapper ul .arrow span {
  margin: 0rem 0.8rem 0rem 0rem;
}

.clientzonewrapper .arrow span {
  color: var(--color-back-button-arrow-only);
}

/* ===================================================================================================================== */
/* TODO:  THE INCLUDED HIDDEN NESTED LISTS ON THE NAVIGATION (WHICH IS NOT VISIBLE WHEN NOT ACTIVE)                      */
/* ===================================================================================================================== */

/* nav .clientzonewrapper .investor-drop, */
nav .clientzonewrapper .shopper-drop,
nav .clientzonewrapper .seller-drop,
nav .clientzonewrapper .advertising-drop {
  display: none;
}

/* ===================================================================================================================== */
/* TODO:  MAKING NAVIGATION SYSTEM RESPONSIVE - MEDIA QUERIES                                                     TODO:  */
/* ===================================================================================================================== */

@media screen and (max-width: 840px) {
  .main__navigation__container {
    column-gap: 0.5rem;
  }
}

@media screen and (max-width: 830px) {
  .main__navigation__container {
    position: relative;
    top: 10rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
  }
  nav .productswrapper {
    position: relative;
    top: 0.75rem;
  }

  nav .supportserviceswrapper {
    position: relative;
    top: 0.75rem;
  }
  nav .clientzonewrapper {
    position: relative;
    top: 0.75rem;
  }
}

@media screen and (max-width: 450px) {
  .main__navigation__container {
    top: 14rem;
    margin: 1rem 0.25rem 1rem 0.25rem;
  }
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                              SECTION - MAIN NAVIGATION (END)                                FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                                 SECTION - HERO BANNER (START)                                   TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

.shopmax__main__hero__banner {
  position: relative;
  top: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0rem 0rem 0rem 0rem;
  /* border: 1px solid red; */
}

/* .shopmax__main__hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
} */

@media screen and (max-width: 830px) {
  .shopmax__main__hero__banner {
    /* position: relative; */
    top: 11rem;
  }
}

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

/* ===================================================================================================================== */
/* TODO:  PART 1 - CONTAINER HOLDING ALL ELEMENTS OF THE SLIDER (SLIDE CONTAINER, NAVIGATION ARROWS & DOTS)              */
/* ===================================================================================================================== */

/* ------------------------------- */
/* FIXME:  VIEW - MOBILE FIRST     */
/* ------------------------------- */

.slider {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 15.6vh;
  overflow: hidden;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  /* box-shadow: 0px 5px 4px rgba(0, 0, 0, 0.35); */
  /* border: 2px solid red; */
}

/* ===================================================================================================================== */
/* TODO:  PART 2 - CONTAINER HOLDING ALL SLIDES (SLIDE 1 - X)                                                            */
/* --------------------------------------------------------------------------------------------------------------------- */
/* FIXME: IMPORTANT NOTE FIXME:  EACH SLIDE TAKES UP 100% OF THE VIEW WIDTH / 10 SLIDES TAKE 100% * 10 = 1000% OF WIDTH  */
/* FIXME: IMPORTANT NOTE FIXME:  THIS SETS THE TOTAL WIDTH OF ALL SLIDES PLACE NEXT TO EACH OTHER                        */
/* width: 100%; - For 01 Slide                                                                                           */
/* width: 200%; - For 02 Slides                                                                                          */
/* width: 300%; - For 03 Slides                                                                                          */
/* width: 400%; - For 04 Slides                                                                                          */
/* width: 500%; - For 05 Slides                                                                                          */
/* width: 600%; - For 06 Slides                                                                                          */
/* width: 700%; - For 07 Slides                                                                                          */
/* width: 800%; - For 08 Slides                                                                                          */
/* width: 900%; - For 09 Slides                                                                                          */
/* width: 1000%; - For 10 Slides                                                                                         */
/* ETC.                                                                                                                  */
/* ===================================================================================================================== */

/* ------------------------------- */
/* FIXME:  VIEW - MOBILE FIRST     */
/* ------------------------------- */

.slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000%;
  height: 100%;
  transition: 2s ease;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  /* border: 3px solid greenyellow; */
}

/* ===================================================================================================================== */
/* TODO:  PART 3 - CONTAINER HOLDING INDIVIDUAL SLIDE ELEMENTS (IMAGES / TITLE / CONTENT / BUTTON)                       */
/* --------------------------------------------------------------------------------------------------------------------- */
/* FIXME: IMPORTANT NOTE FIXME:  THIS DEFINES THE SPACE TAKEN UP BY EACH SLIDE AS A % OF THE TOTAL WIDTH OF ALL          */
/* FIXME: IMPORTANT NOTE FIXME:  CONSTANTS SET: 1 SLIDE = 100% WIDTH / 2 SLIDES = 50% width EACH ETC.                    */
/* For 01 Slide   :  100% / 1   =  WIDTH = 100%                                                                          */
/* For 02 Slides  :  100% / 2   =  WIDTH = 50%                                                                           */
/* For 03 Slides  :  100% / 3   =  WIDTH = 33.33%                                                                        */
/* For 04 Slides  :  100% / 4   =  WIDTH = 25%                                                                           */
/* For 05 Slides  :  100% / 5   =  WIDTH = 20%                                                                           */
/* For 06 Slides  :  100% / 6   =  WIDTH = 16.66%                                                                        */
/* For 07 Slides  :  100% / 7   =  WIDTH = 14.2857%                                                                      */
/* For 08 Slides  :  100% / 8   =  WIDTH = 12.5%                                                                         */
/* For 09 Slides  :  100% / 9   =  WIDTH = 11.11%                                                                        */
/* For 10 Slides  :  100% / 10  =  WIDTH = 10%                                                                           */
/* ETC.                                                                                                                  */
/* ===================================================================================================================== */

/* ------------------------------- */
/* FIXME:  VIEW - MOBILE FIRST     */
/* ------------------------------- */

.slide {
  position: relative;
  top: 0;
  left: 0;
  float: left;
  width: 10%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  /* border: 5px solid salmon; */
}

/* ------------------------------------------------------------------------------------- */
/* CONTROLLING THE OPACITY OF THE LAYER OVER THE IMAGE FOR TEXT TO APPEAR MORE READIBLE  */
/* ------------------------------------------------------------------------------------- */

/* ------------------------------- */
/* FIXME:  VIEW - MOBILE FIRST     */
/* ------------------------------- */

.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* ===================================================================================================================== */
/* TODO:  PART 4 - INDIVIDUAL SLIDE DATA CONTAINTER - HOLDING ALL IMAGES, TITLES, CONTENT AND BUTTONS                    */
/* --------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------- */
/* FIXME:  VIEW - MOBILE FIRST     */
/* ------------------------------- */

/* ------------------------------- */
/* INDIVIDUAL SLIDE CONTAINER      */
/* ------------------------------- */

.slide-data {
  position: relative;
  top: 0;
  left: 0;
  /* transform: translateY(0%, 0%); */
  width: 100%;
  height: 100%;
  justify-content: center;
  text-align: center;
  /* border: 2px solid purple; */
}

/* ------------------------------- */
/* SLIDE - IMAGE                   */
/* ------------------------------- */

.slide-data .slide__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

/* ------------------------------- */
/* SLIDE - TITLE                   */
/* ------------------------------- */

.slide-data .slide__title p {
  position: absolute;
  top: 7.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1;
  font-weight: bolder;
  color: var(--color-slide-text);
  z-index: 2;
}

/* ------------------------------- */
/* SLIDE - CONTENT                 */
/* ------------------------------- */

.slide-data .slide__content p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  text-align: center;
  font-size: 0.65rem;
  line-height: 1.2;
  /* font-weight: bolder; */
  color: var(--color-slide-text);
  z-index: 2;
}

/* ------------------------------- */
/* SLIDE - BUTTON (WITH ANCHOR)    */
/* ------------------------------- */

/* .slide-data .slide__button button {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, 15%);
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bolder;
  color: var(--color-button-text);
  padding: 0.2rem 1rem 0.2rem 1rem;
  transition: 0.4s linear;
  border-radius: 0.5rem;
  background: var(--color-button-background);
  outline: none;
  border: 1px solid white;
  z-index: 2;
  cursor: pointer;
} */

.slide-data .slide__button a {
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, 15%);
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  /* font-weight: bolder; */
  color: var(--color-button-text);
  padding: 0.2rem 1rem 0.2rem 1rem;
  transition: 0.4s linear;
  border-radius: 0.5rem;
  background: var(--color-button-background);
  outline: none;
  border: 1px solid white;
  z-index: 2;
  cursor: pointer;
}

/* .slide-data .slide__button button:hover {
  background-color: var(--color-button-background-hover);
  color: var(--color-button-text-hover);
} */

.slide-data .slide__button a:hover {
  background-color: var(--color-button-background-hover);
  color: var(--color-button-text-hover);
}

/* .slide-data .slide__button button a {
  text-decoration: none;
  color: var(--color-button-text);
  cursor: pointer;
} */

/* ===================================================================================================================== */
/* TODO:  PART 5 - LEFT AND RIGHT NAVIGATION ARROWS                                                                      */
/* --------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------- */
/* FIXME:  VIEW - MOBILE FIRST     */
/* ------------------------------- */

.slider .arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-arrows-background);
  outline: none;
  border: none;
  font-size: 2rem;
  color: var(--color-arrows-color);
  transition: 0.4s linear;
  z-index: 3;
  cursor: pointer;
}

.slider .arrows:hover {
  text-shadow: 0px 0px 10px black, 0px 0px 10px black;
}

.slider .prev {
  left: 2.5%;
  z-index: 3;
}

.slider .next {
  right: 2.5%;
  z-index: 3;
}

/* ===================================================================================================================== */
/* TODO:  PART 6 - NAVIGATION DOTS (BOTTOM)                                                                              */
/* --------------------------------------------------------------------------------------------------------------------- */

/* ------------------------------- */
/* FIXME:  VIEW - MOBILE FIRST     */
/* ------------------------------- */

.dots {
  position: absolute;
  bottom: 0.15%;
  width: 100%;
  text-align: center;
  z-index: 3;
}

.dots span {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 100px;
  margin: 0rem 0.3rem 0rem 0.3rem;
  background-color: var(--color-dots-background-not-active);
  display: inline-block;
  transition: 0.4s linear;
  z-index: 3;
  cursor: pointer;
}

.dots span:hover {
  background-color: var(--color-dots-background-hover) !important;
  border: 1px solid #fff;
}

.dot-active {
  background-color: var(--color-dots-background-active) !important;
  border: 1px solid #fff;
}

/* ===================================================================================================================== */
/* TODO:  PART 7 - RESPONSIVE DESIGN - MEDIA QUERIES - FOR LARGER SCREENS (LAPTOPS / PC's / TV's etc.)                   */
/* --------------------------------------------------------------------------------------------------------------------- */

/* ---------------------------------- */
/* FIXME:  VIEW - ON LARGER SCREENS   */
/* ---------------------------------- */

@media screen and (min-width: 250px) {
  .slider {
    min-height: 14vh;
  }
}

@media screen and (min-width: 280px) {
  .slider {
    min-height: 14.5vh;
  }

  .slide-data .slide__title p {
    font-size: 0.8rem;
    line-height: 1;
  }

  .slide-data .slide__content p {
    font-size: 0.65rem;
    line-height: 1.2;
  }

  /* .slide-data .slide__button button {
    font-size: 0.65rem;
    line-height: 1;
  } */

  .slide-data .slide__button a {
    font-size: 0.65rem;
    line-height: 1;
  }

  .slider .arrows {
    font-size: 2rem;
  }

  .dots span {
    width: 0.6rem;
    height: 0.6rem;
    margin: 0rem 0.3rem 0rem 0.3rem;
  }
}

@media screen and (min-width: 280px) and (min-height: 653px) {
  .slider {
    min-height: 14.75vh;
  }
}

@media screen and (min-width: 350px) {
  .slider {
    min-height: 18.5vh;
  }

  .slide-data .slide__title p {
    font-size: 0.85rem;
    line-height: 1;
  }

  .slide-data .slide__content p {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  /* .slide-data .slide__button button {
    font-size: 0.75rem;
    line-height: 1;
  } */

  .slide-data .slide__button a {
    font-size: 0.75rem;
    line-height: 1;
  }

  .slider .arrows {
    font-size: 2.25rem;
  }

  .dots span {
    width: 0.65rem;
    height: 0.65rem;
    margin: 0rem 0.3rem 0rem 0.3rem;
  }
}

@media screen and (min-width: 360px) and (min-height: 740px) {
  .slider {
    min-height: 16.75vh;
  }
}

@media screen and (min-width: 375px) and (min-height: 667px) {
  .slider {
    min-height: 19.3vh;
  }
}

@media screen and (min-width: 390px) and (min-height: 844px) {
  .slider {
    min-height: 15.6vh;
  }
}

@media screen and (min-width: 393px) and (min-height: 851px) {
  .slider {
    min-height: 16vh;
  }
}

@media screen and (min-width: 400px) {
  .slider {
    min-height: 21.25vh;
  }

  .slide-data .slide__title p {
    font-size: 0.9rem;
    line-height: 1.15;
  }

  .slide-data .slide__content p {
    font-size: 0.85rem;
    line-height: 1.2;
  }

  /* .slide-data .slide__button button {
    font-size: 0.85rem;
    line-height: 1.15;
  } */

  .slide-data .slide__button a {
    font-size: 0.85rem;
    line-height: 1.15;
  }

  .slider .arrows {
    font-size: 2.5rem;
  }

  .dots span {
    width: 0.7rem;
    height: 0.7rem;
    margin: 0rem 0.3rem 0rem 0.3rem;
  }
}

@media screen and (min-width: 412px) and (min-height: 914px) {
  .slider {
    min-height: 15.4vh;
  }
}

@media screen and (min-width: 414px) and (min-height: 896px) {
  .slider {
    min-height: 15.75vh;
  }
}

@media screen and (min-width: 500px) {
  .slider {
    min-height: 26.75vh;
  }

  .slide-data .slide__title p {
    font-size: 1rem;
    line-height: 1.2;
  }

  .slide-data .slide__content p {
    font-size: 0.95rem;
    line-height: 1.2;
  }

  /* .slide-data .slide__button button {
    font-size: 0.95rem;
    line-height: 1.2;
  } */

  .slide-data .slide__button a {
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .slider .arrows {
    font-size: 2.75rem;
  }

  .dots span {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0rem 0.3rem 0rem 0.3rem;
  }
}

@media screen and (min-width: 540px) and (min-height: 720px) {
  .slider {
    min-height: 25.75vh;
  }
}

@media screen and (min-width: 600px) {
  .slider {
    min-height: 32.5vh;
  }

  .slide-data .slide__title p {
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .slide-data .slide__content p {
    font-size: 1.05rem;
    line-height: 1.2;
  }

  /* .slide-data .slide__button button {
    font-size: 1.05rem;
    line-height: 1.2;
  } */

  .slide-data .slide__button a {
    font-size: 1.05rem;
    line-height: 1.2;
  }

  .slider .arrows {
    font-size: 3rem;
  }

  .dots span {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0rem 0.3rem 0rem 0.3rem;
  }
}

@media screen and (min-width: 700px) {
  .slider {
    min-height: 38vh;
  }

  .slide-data .slide__title p {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .slide-data .slide__content p {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  /* .slide-data .slide__button button {
    font-size: 1.2rem;
    line-height: 1.4;
  } */

  .slide-data .slide__button a {
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .slider .arrows {
    font-size: 3.25rem;
  }

  .dots span {
    width: 1rem;
    height: 1rem;
    margin: 0rem 0.3rem 0rem 0.3rem;
  }
}

@media screen and (min-width: 768px) and (min-height: 1024px) {
  .slider {
    min-height: 25.75vh;
  }
}

@media screen and (min-width: 800px) {
  .slider {
    min-height: 43.5vh;
  }

  .slide-data .slide__title p {
    font-size: 1.35rem;
    line-height: 1.5;
  }

  .slide-data .slide__content p {
    font-size: 1.3rem;
    line-height: 1.5;
  }

  /* .slide-data .slide__button button {
    font-size: 1.3rem;
    line-height: 1.5;
  } */

  .slide-data .slide__button a {
    font-size: 1.3rem;
    line-height: 1.5;
  }

  .slider .arrows {
    font-size: 3.5rem;
  }

  .dots span {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0rem 0.3rem 0rem 0.3rem;
  }
}

@media screen and (min-width: 820px) and (min-height: 1180px) {
  .slider {
    min-height: 23.75vh;
  }
}

@media screen and (min-width: 900px) {
  .slider {
    min-height: 49vh;
  }

  .slide-data .slide__title p {
    font-size: 1.45rem;
    line-height: 1.5;
  }

  .slide-data .slide__content p {
    font-size: 1.35rem;
    line-height: 1.5;
  }

  /* .slide-data .slide__button button {
    font-size: 1.35rem;
    line-height: 1.5;
  } */

  .slide-data .slide__button a {
    font-size: 1.35rem;
    line-height: 1.5;
  }

  .slider .arrows {
    font-size: 3.75rem;
  }

  .dots span {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0rem 0.3rem 0rem 0.3rem;
  }
}

@media screen and (min-width: 912px) and (min-height: 1368px) {
  .slider {
    min-height: 22.75vh;
  }
}

@media screen and (min-width: 1000px) {
  .slider {
    min-height: 54.5vh;
  }

  .slide-data .slide__title p {
    font-size: 1.475rem;
    line-height: 1.5;
  }

  .slide-data .slide__content p {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  /* .slide-data .slide__button button {
    font-size: 1.4rem;
    line-height: 1.5;
  } */

  .slide-data .slide__button a {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .slider .arrows {
    font-size: 4rem;
  }

  .dots span {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0rem 0.5rem 0rem 0.5rem;
  }
}

@media screen and (min-width: 1024px) and (min-height: 600px) {
  .slider {
    min-height: 58.5vh;
  }
}

@media screen and (min-width: 1029px) {
  .slider {
    min-height: 56.25vh;
  }

  .slide-data .slide__title p {
    font-size: 1.55rem;
    line-height: 1.5;
  }

  .slide-data .slide__content p {
    font-size: 1.45rem;
    line-height: 1.5;
  }

  /* .slide-data .slide__button button {
    font-size: 1.45rem;
    line-height: 1.5;
  } */

  .slide-data .slide__button a {
    font-size: 1.45rem;
    line-height: 1.5;
  }

  .slider .arrows {
    font-size: 4.25rem;
  }

  .dots span {
    width: 1.3rem;
    height: 1.3rem;
    margin: 0rem 0.5rem 0rem 0.5rem;
  }
}

@media screen and (min-width: 1040px) {
  .slider {
    min-height: 58vh;
  }
}

@media screen and (min-width: 1050px) {
  .slider {
    min-height: 58.75vh;
  }
}

@media screen and (min-width: 1100px) {
  .slider {
    min-height: 61.5vh;
  }

  .slide-data .slide__title p {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .slide-data .slide__content p {
    font-size: 1.5rem;
    line-height: 1.5;
  }

  /* .slide-data .slide__button button {
    font-size: 1.5rem;
    line-height: 1.5;
  } */

  .slide-data .slide__button a {
    font-size: 1.5rem;
    line-height: 1.5;
  }

  .slider .arrows {
    font-size: 4.5rem;
  }

  .dots span {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0rem 0.5rem 0rem 0.5rem;
  }
}

@media screen and (min-width: 1150px) {
  .slider {
    min-height: 64vh;
  }
}

@media screen and (min-width: 1200px) {
  .slider {
    min-height: 67vh;
  }

  .slide-data .slide__title p {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  .slide-data .slide__content p {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  /* .slide-data .slide__button button {
    font-size: 1.6rem;
    line-height: 1.5;
  } */

  .slide-data .slide__button a {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  .slider .arrows {
    font-size: 4.5rem;
  }

  .dots span {
    width: 1.4rem;
    height: 1.4rem;
    margin: 0rem 0.5rem 0rem 0.5rem;
  }
}

@media screen and (min-width: 1250px) {
  .slider {
    min-height: 69vh;
  }
}

@media screen and (min-width: 1280px) {
  .slider {
    min-height: 70.25vh;
  }
}

/* NEST HUB MAX - 1280 x 800 */
@media screen and (min-width: 1280px) and (min-height: 800px) {
  .slider {
    min-height: 54.75vh;
  }
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                                SECTION - HERO BANNER (END)                                  FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:   SECTION - NEW PAGE CONTAINER WITH TITLE & BUTTON (TO LINKS / DOWNLOADABLE BROCHURE) (START)   TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* =========================================================== */
/* FIXME:  NEW PAGE - CONTAINER (HOLDING ALL ELEMENTS)  FIXME: */
/* =========================================================== */

.new__page__container {
  position: relative;
  top: 10rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0rem 0rem 0rem 0rem;
  background-color: #eee;
  /* border: 2px solid red; */
}

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

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

/* ========================================================== */
/* FIXME:  NEW PAGE - FULL TITLE OF THE PAGE           FIXME: */
/* ========================================================== */

.new__page__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;
  /* border: 2px solid purple; */
}

/* ========================================================== */
/* FIXME:  NEW PAGE - SUB-TITLE OF THE PAGE            FIXME: */
/* ========================================================== */

.new__page__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;
  /* border: 2px solid purple; */
}

/* ========================================================== */
/* FIXME:  NEW PAGE - LINKS OR DOWNLOADABLE BROCHURES  FIXME: */
/* ========================================================== */

/* =============================== */
/* FIXME:  VIEW - MOBILE FIRST     */
/* =============================== */

.new__page__buttons__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: -2rem 0rem 0rem 0rem;
  /* border: 1px solid green; */
}

.new__page__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__page__button a {
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.new__page__button:hover {
  transform: scale(1.05);
}

/* =============================== */
/* FIXME:  VIEW - LARGER SCREENS   */
/* =============================== */

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

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:  SECTION - NEW PAGE CONTAINER WITH TITLE & BUTTON (TO LINKS / DOWNLOADABLE BROCHURE) (END)  FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* FIXME:FIXME:FIXME:  ENTER NEW PAGE CONTENT BELOW  FIXME:FIXME:FIXME: */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                          SECTION - SELLER LOGIN / REGISTRATION (START)                          TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

.seller__login__registration__section {
  position: relative;
  top: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0rem 0rem 0rem 0rem;
  /* padding: 2rem 0rem 0rem 0rem; */
  /* border: 1px solid green; */
}

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

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

/* ===================================================================================================================== */
/* TODO:  PART 1 - REGISTER AND LOGIN PAGE - MAIN CONTAINER (HOLDING ALL ELEMENTS OF THE PROJECT)                        */
/* ===================================================================================================================== */

.seller__login__registration__container {
  position: relative;
  margin: 2rem 0.25rem 2rem 0.25rem;
  /* width: 100%; */
  width: 95vw;
  /* min-height: 100vh; */
  height: 93vh;
  background-color: var(--color-seller-login-page-background-1);
  overflow: hidden;
  border-radius: 0.5rem;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
}

/* SET THE CONTAINER (BEFORE) - DOUBLE THE SIZE OF THE ORGINAL CONTAINER */
.seller__login__registration__container:before {
  content: "";
  position: absolute;
  width: 2000px;
  height: 2000px;
  border-radius: 50%;
  background: linear-gradient(
    -45deg,
    var(--color-seller-background-linear-gradient-2),
    var(--color-seller-background-linear-gradient-1)
  );
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  z-index: 6;
  transition: 1.8s ease-in-out;
}

/* ===================================================================================================================== */
/* TODO:  PART 2 - REGISTER AND LOGIN PAGE - FORMS CONTAINER (HOLDING ALL FORM ELEMENTS)                                 */
/* ===================================================================================================================== */

/* ALL FORM ELEMENTS (CONTAINER) */

.seller__login__registration__container .forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0.5rem;
}

/* ONLY FORM RELATED ELEMENTS, INPUT, SOCIAL MEDIA AND SUBMIT SECTION */

.seller__login__registration__container .signin-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;
}

/* ===================================================================================================================== */
/* TODO:  PART 3 - REGISTER AND LOGIN PAGE - FORMS ELEMENTS                                                              */
/* ===================================================================================================================== */

.seller__login__registration__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      */

.seller__login__registration__container form.sign-up-form {
  opacity: 0;
  z-index: 1;
}

.seller__login__registration__container form.sign-in-form {
  z-index: 2;
}

/* ---------------------------- */
/* FIXME:  FORM (TITLE)  FIXME: */
/* ---------------------------- */

.seller__login__registration__container .title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0.5rem 0rem 0.5rem 0rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  color: var(--color-seller-login-page-title);
  /* border: 1px solid green; */
}

/* ------------------------- */
/* FIXME:  PRIVACY STATEMENT */
/* ------------------------- */

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

.seller__login__registration__container
  .product__quote__privacy__statement
  strong {
  text-decoration: none;
  font-weight: 900;
  color: var(--color-seller-privacy-text);
}

.seller__login__registration__container .product__quote__privacy__statement a {
  text-decoration: none;
  font-weight: 900;
  color: var(--color-seller-privacy-text);
  cursor: pointer;
}

/* --------------------------------------- */
/* FIXME:  INPUT-FIELD (CONTAINER)  FIXME: */
/* --------------------------------------- */

.seller__login__registration__container .input-field {
  position: relative;
  display: grid;
  grid-template-columns: 15% 85%;
  border-radius: 1rem;
  margin: 0.5rem 0rem 0.5rem 0rem;
  padding: 0rem 1rem 0rem 0.5rem;
  max-width: 30rem;
  width: 100%;
  height: 4rem;
  background-color: var(--color-seller-login-page-input-field-background);
}

.seller__login__registration__container .input-field-identification {
  position: relative;
  display: grid;
  grid-template-columns: 15% 85%;
  border-radius: 1rem;
  margin: 0.5rem 0rem 0.5rem 0rem;
  padding: 0rem 1rem 0rem 0.5rem;
  max-width: 30rem;
  width: 100%;
  height: 4rem;
  background-color: var(--color-seller-login-page-input-field-background);
}

/* ---------------------------------- */
/* FIXME:  INPUT-FIELD (ICON)  FIXME: */
/* ---------------------------------- */

.seller__login__registration__container .input-field i {
  text-align: center;
  line-height: 4rem;
  font-size: 1.6rem;
  transition: 0.5s;
  color: var(--color-seller-login-page-input-field-icons);
}

.seller__login__registration__container .input-field-identification i {
  text-align: center;
  line-height: 4rem;
  font-size: 2rem;
  transition: 0.5s;
  color: var(--color-seller-login-page-input-field-icons);
}

/* ---------------------------------------- */
/* FIXME:  INPUT-FIELD (INPUT AREA)  FIXME: */
/* ---------------------------------------- */

.seller__login__registration__container .input-field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-seller-login-page-input-field-text);
}

.seller__login__registration__container .input-field input::placeholder {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: var(--color-seller-login-page-input-field-placeholder);
}

.seller__login__registration__container .input-field-identification select {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-seller-login-page-input-field-text);
}

/* ---------------------------------------- */
/* FIXME:  FORM (SOCIAL MEDIA TEXT)  FIXME: */
/* ---------------------------------------- */

/* SOCIAL MEDIA */

.seller__login__registration__container .social-text {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.5rem 0rem 0.5rem 0rem;
  display: flex;
  justify-content: center;
  text-align: center;
  color: var(--color-seller-login-page-social-media-text);
}

/* --------------------------------------------- */
/* FIXME:  FORM (SOCIAL MEDIA CONTAINER)  FIXME: */
/* --------------------------------------------- */

.seller__login__registration__container .social-media {
  display: flex;
  justify-content: center;
}

/* ----------------------------------------- */
/* FIXME:  FORM (SOCIAL MEDIA ICONS)  FIXME: */
/* ----------------------------------------- */

.seller__login__registration__container .social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-seller-login-page-social-media-icons-border);
  color: var(--color-seller-login-page-social-media-icons);
  transition: 0.3s;
}

.seller__login__registration__container .social-icon:hover {
  transform: scale(1.05);
  color: var(--color-seller-login-page-social-media-icons-hover);
  border-color: var(--color-seller-login-page-social-media-icons-border-hover);
}

/* ----------------------------- */
/* FIXME:  FORM (BUTTON)  FIXME: */
/* ----------------------------- */

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

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

/* ===================================================================================================================== */
/* TODO:  PART 4 - REGISTER AND LOGIN PAGE - LEFT AND RIGHT PANELS                                                       */
/* ===================================================================================================================== */

/* ---------------------------- */
/* FIXME:  PANEL IMAGES  FIXME: */
/* ---------------------------- */

.seller__login__registration__container .image {
  padding: 5rem 5rem 5rem 5rem;
  width: 100%;
  transition: transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}

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

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

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

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

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

.seller__login__registration__container .left-panel {
  pointer-events: all;
  /* padding: 3rem 17% 2rem 12%; */
  padding: 1.5rem 12% 1.5rem 12%;
}

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

.seller__login__registration__container .right-panel {
  pointer-events: none;
  /* padding: 3rem 12% 2rem 17%; */
  padding: 1.5rem 12% 1.5rem 12%;
}

/* ----------------------------- */
/* FIXME:  PANEL CONTENT  FIXME: */
/* ----------------------------- */

.seller__login__registration__container .panel .content {
  color: var(--color-seller-panel-text);
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}

.seller__login__registration__container .panel h3 {
  font-size: 2.2rem;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
}

.seller__login__registration__container .panel p {
  font-size: 1.3rem;
  padding: 0.5rem 0rem 2.5rem 0rem;
  text-align: justify;
}

/* ----------------------------- */
/* FIXME:  PANEL BUTTONS  FIXME: */
/* ----------------------------- */

.seller__login__registration__container .btn.transparent {
  margin: 0rem 0rem 0rem 0rem;
  background: none;
  border: 2px solid var(--color-seller-panel-button-border);
  color: white;
  width: 15rem;
  height: 4rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  border-radius: 1.5rem;
  text-transform: uppercase;
}

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

/* ------------------------------- */
/* FIXME:  SELLING BUTTONS  FIXME: */
/* ------------------------------- */

.seller__login__registration__container .all-plans-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.seller__login__registration__container button {
  margin: 0rem 0rem 0rem 0rem;
}

.seller__login__registration__container button.selling-plan-1-button {
  background-color: var(--color-seller-selling-plan-buttons-background);
  margin: 1rem 0.5rem 2rem 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 20rem;
  height: 3.5rem;
  border: 0;
  outline: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  border-radius: 0.5rem;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: 0.5s;
}

.seller__login__registration__container button.selling-plan-1-button a {
  text-decoration: none;
  color: var(--color-seller-selling-plan-buttons-text);
}

.seller__login__registration__container button.selling-plan-1-button:hover {
  opacity: 0.95;
  transform: scale(1.05);
}

.seller__login__registration__container button.selling-plan-2-button {
  background-color: var(--color-seller-selling-plan-buttons-background);
  margin: 1rem 0.5rem 2rem 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 20rem;
  height: 3.5rem;
  border: 0;
  outline: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  border-radius: 0.5rem;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: 0.5s;
}

.seller__login__registration__container button.selling-plan-2-button a {
  text-decoration: none;
  color: var(--color-seller-selling-plan-buttons-text);
}

.seller__login__registration__container button.selling-plan-2-button:hover {
  opacity: 0.95;
  transform: scale(1.05);
}

.seller__login__registration__container button.selling-plan-3-button {
  background-color: var(--color-seller-selling-plan-buttons-background);
  margin: 1rem 0.5rem 2rem 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 20rem;
  height: 3.5rem;
  border: 0;
  outline: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  border-radius: 0.5rem;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: 0.5s;
}

.seller__login__registration__container button.selling-plan-3-button a {
  text-decoration: none;
  color: var(--color-seller-selling-plan-buttons-text);
}

.seller__login__registration__container button.selling-plan-3-button:hover {
  opacity: 0.95;
  transform: scale(1.05);
}

.seller__login__registration__container button.selling-plan-4-button {
  background-color: var(--color-seller-selling-plan-buttons-background);
  margin: 1rem 0.5rem 2rem 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  width: 20rem;
  height: 3.5rem;
  border: 0;
  outline: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  border-radius: 0.5rem;
  box-shadow: 3px 5px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: 0.5s;
}

.seller__login__registration__container button.selling-plan-4-button a {
  text-decoration: none;
  color: var(--color-seller-selling-plan-buttons-text);
}

.seller__login__registration__container button.selling-plan-4-button:hover {
  opacity: 0.95;
  transform: scale(1.05);
}

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

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

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

.seller__login__registration__container.sign-up-mode .signin-signup {
  left: 25%;
}

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

.seller__login__registration__container.sign-up-mode form.sign-in-form {
  opacity: 0;
  z-index: 1;
}

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

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

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

/* ===================================================================================================================== */
/* TODO:  PART 5 - MEDIA QUERIES (FOR SMALLER SCREENS / PHONES)                                                          */
/* ===================================================================================================================== */

@media (max-width: 870px) {
  .seller__login__registration__container {
    min-height: 800px;
    height: 100vh;
  }
  .seller__login__registration__container .signin-signup {
    width: 100%;
    top: 95%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .seller__login__registration__container .signin-signup,
  .seller__login__registration__container.sign-up-mode .signin-signup {
    left: 50%;
  }

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

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

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

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

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

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

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

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

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

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

  .seller__login__registration__container.sign-up-mode .signin-signup {
    top: 5%;
    transform: translate(-50%, 0);
  }
}

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

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

  .seller__login__registration__container {
    padding: 1.5rem;
  }

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

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

/* ===================================================================================================================== */
/* TODO:  PART 6 - FORM - CHECKBOX OPTIONS                                                                               */
/* ===================================================================================================================== */

/* ---------------------------------------------- */
/* FIXME:  INPUT FIELD = DROPDOWN LIST     FIXME: */
/*              TYPE OF SELLER                    */
/* ---------------------------------------------- */

.seller__login__registration__container select {
  /* width: 25rem; */
  /* width: 24rem; */
  border-radius: 0.5rem;
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-seller-login-page-input-field-text);
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.5rem 0rem 0.5rem 0rem;
  cursor: pointer;
}

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

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

.seller__login__registration__container label .label__strong {
  color: var(--color-seller-privacy-text);
}

/* --------------------------------------- */
/* FIXME:  INPUT FIELD = CHECKBOX  FIXME:  */
/* --------------------------------------- */

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

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

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

/* --------------------------------------- */
/* THIS IS TO DISPLAY THE CUSTOM CHECKBOX  */
/* --------------------------------------- */

.seller__login__registration__container input[type="checkbox"] {
  appearance: none;
  background-color: var(--color-seller-custom-checkbox-background);
  margin: 0;
  font: inherit;
  color: var(--color-seller-custom-checkbox-border);
  width: 1.5rem;
  height: 1.5rem;
  border: 0.15em solid var(--color-seller-custom-checkbox-border);
  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         */
/* --------------------------------------- */

.seller__login__registration__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-seller-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%);
}

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

/* --------------------------------------- */
/* CUSTOM CHECKBOX - FOCUSSED STATE        */
/* --------------------------------------- */

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

/* --------------------------------------- */
/* CUSTOM CHECKBOX - DISABLED STATE        */
/* --------------------------------------- */

.seller__login__registration__container .checkbox__option--disabled {
  color: var(--color-seller-custom-checkbox-disabled);
  cursor: not-allowed;
}

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

/* ------------------------------------ */
/* FIXME:  FINAL MEDIA QUERY - CHECKBOX */
/* ------------------------------------ */

@media screen and (max-width: 870px) {
  .seller__login__registration__container .image {
    width: 220px;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }

  .seller__login__registration__container .panel h3 {
    margin: -1rem 0rem 1rem 0rem;
    font-size: 2.2rem;
    text-align: center;
  }

  .seller__login__registration__container .panel p {
    margin: 0rem 0rem 1rem 0rem;
    font-size: 1.1rem;
    padding: 0.5rem 1rem 1rem 0.5rem;
  }

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

@media screen and (max-width: 760px) {
  .seller__login__registration__container .image {
    width: 200px;
  }

  .seller__login__registration__container .panel h3 {
    margin: -1rem 0rem 0.75rem 0rem;
    font-size: 2rem;
    text-align: center;
  }

  .seller__login__registration__container .panel p {
    margin: 0rem 0rem 0.5rem 0rem;
    font-size: 1.05rem;
    padding: 0.5rem 1rem 1rem 0.5rem;
  }

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

@media screen and (max-width: 665px) {
  .seller__login__registration__container .image {
    width: 200px;
  }

  .seller__login__registration__container .panel h3 {
    margin: -0.5rem 0rem 0.75rem 0rem;
    font-size: 1.8rem;
    text-align: center;
  }

  .seller__login__registration__container .panel p {
    margin: 0rem 0rem 0.5rem 0rem;
    font-size: 0.95rem;
    padding: 0.5rem 1rem 1rem 0.5rem;
  }
}

@media screen and (max-width: 610px) {
  .seller__login__registration__container .image {
    width: 180px;
  }

  .seller__login__registration__container .panel h3 {
    margin: -0.5rem 0rem 0.5rem 0rem;
    font-size: 1.65rem;
    text-align: center;
  }

  .seller__login__registration__container .panel p {
    margin: 0rem 0rem 0.25rem 0rem;
    font-size: 0.9rem;
    padding: 0.5rem 1rem 1rem 0.5rem;
  }
}

@media screen and (max-width: 570px) {
  .seller__login__registration__container .image {
    width: 140px;
  }
}

@media screen and (max-width: 506px) {
  .seller__login__registration__container .image {
    width: 120px;
  }

  .seller__login__registration__container .input-field {
    margin: 0.5rem 0rem 0.5rem -2.75rem;
    max-width: 21rem;
  }

  .seller__login__registration__container .input-field-identification {
    margin: 0.5rem 0rem 0.5rem -2.75rem;
    max-width: 21rem;
  }

  .seller__login__registration__container .input-field-identification select {
    font-size: 1rem;
    font-weight: 600;
  }

  .seller__login__registration__container .btn {
    margin: 0rem 0rem 1.5rem -2.75rem;
    max-width: 21rem;
    font-size: 1.3rem;
  }

  .seller__login__registration__container
    .sign-in-form
    .product__quote__privacy__statement {
    margin: 0rem 0rem 1.5rem -2.75rem;
    max-width: 21rem;
    font-size: 0.85rem;
    text-align: center;
  }

  .seller__login__registration__container .sign-in-form .title {
    margin: 1rem 0rem 1rem -2.75rem;
    font-size: 2rem;
    max-width: 21rem;
    text-align: center;
  }

  .seller__login__registration__container .product__quote__privacy__statement {
    margin: 0rem 2.5rem 1.5rem 0rem;
    max-width: 21rem;
    font-size: 0.85rem;
    text-align: center;
  }

  .seller__login__registration__container .all-plans-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0rem 2.5rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
  }

  .seller__login__registration__container .title {
    margin: 1rem 2.5rem 1rem 0rem;
    font-size: 2rem;
    max-width: 21rem;
    text-align: center;
  }

  .seller__login__registration__container .social-text {
    font-size: 1.1rem;
    margin: -1.25rem 0rem 0rem -2.75rem;
  }

  .seller__login__registration__container .social-icon {
    margin: -0.25rem 2.25rem 0.5rem -0.75rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
    border-radius: 50%;
    border: 1px solid var(--color-seller-login-page-social-media-icons-border);
    color: var(--color-seller-login-page-social-media-icons);
    transition: 0.3s;
  }

  .seller__login__registration__container .panel h3 {
    margin: -1rem 0rem 1rem -2.75rem;
    font-size: 1.6rem;
    text-align: center;
  }

  .seller__login__registration__container .panel p {
    margin: 0rem 0rem 1rem -2.75rem;
    font-size: 0.85rem;
    padding: 0.5rem 1rem 1rem 0.5rem;
  }

  .seller__login__registration__container .btn.transparent {
    margin: 0rem 0rem 0rem -2.75rem;
    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
    width: 12rem;
    height: 3rem;
    font-size: 1.3rem;
  }

  .seller__login__registration__container .form__group {
    margin: 0.5rem 0rem 1rem -2.75rem;
    padding: 0rem 0rem 0rem 0rem;
    max-width: 21rem;
  }

  .seller__login__registration__container .form__group__double {
    margin: 0.5rem 0rem 1rem -2.75rem;
    padding: 0rem 0rem 0rem 0rem;
    max-width: 21rem;
  }

  .seller__login__registration__container .checkbox__option {
    margin: 0rem 0rem 0rem 0rem;
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  }
}

@media screen and (max-width: 440px) {
  .seller__login__registration__container .image {
    width: 100px;
  }
}

@media screen and (max-width: 408px) {
  .seller__login__registration__container .image {
    /* width: 75px; */
    display: none;
  }
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                         SECTION - SELLER LOGIN / REGISTRATION (END)                         FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* FIXME:FIXME:FIXME:  ENTER NEW PAGE CONTENT ABOVE  FIXME:FIXME:FIXME: */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                                    SECTION - FOOTER (START)                                     TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

.shopmax__footer__section {
  position: relative;
  top: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0rem 0rem 0rem 0rem;
  /* border: 2px solid green; */
}

/* .shopmax__footer__section img {
  width: 100%;
  height: 100%;
  object-fit: contain;
} */

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

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

/* ------------------------------------- */
/* REMOVE BULLET POINTS FROM LIST ITEMS  */
/* ------------------------------------- */

li {
  list-style: none;
}

/* ------------------------------------- */
/* REMOVE "UNDERLINES" FROM ANCHORS      */
/* ------------------------------------- */

a {
  text-decoration: none;
}

/* ------------------------------------- */
/* SETTING FOOTER'S BASIC STYLES         */
/* ------------------------------------- */

footer {
  /* position: fixed; */
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: var(--color-footer-background);
  box-shadow: 0 16px 70px -8px rgba(0, 0, 0, 0.25);
  /* border-radius: 20px 20px 0 0; */
  transition: background 0.3s linear;
}

/* ===================================================================================================================== */
/* TODO:  PART 1 - FOOTER CONTAINER                                                                                      */
/* ===================================================================================================================== */

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

/* ===================================================================================================================== */
/* TODO:  PART 2 - FOOTER CONTENT                                                                                        */
/* ===================================================================================================================== */

.content_footer {
  display: flex;
  margin: 0rem 0rem 2rem 0rem;
}

/* ===================================================================================================================== */
/* TODO:  PART 3 - COMPANY LOGO & PROFILE                                                                                */
/* ===================================================================================================================== */

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

.profile .logo__area {
  display: flex;
  align-items: center;
  margin: 0rem 0rem 1.5rem 0rem;
}

.profile img {
  width: 20rem;
  height: auto;
}

.description__area {
  max-width: 30rem;
  text-align: justify;
  font-size: 1rem;
  margin: 1.5rem 0rem 1.5rem 0.5rem;
}

.description__area p {
  color: var(--color-footer-description-area-text);
  font-weight: 400;
  line-height: 1.8rem;
}

.tagline {
  color: var(--color-tagline);
}

/* ===================================================================================================================== */
/* TODO:  PART 4 - SOCIAL MEDIA ICONS                                                                                    */
/* ===================================================================================================================== */

/* MAIN CONTAINER - HOLDING ALL SOCIAL MEDIA COMPONENTS TOGETHER  */
.footer__section__container_social {
  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;
}

/* NOTE: Translate (width, height) */
.social-media ul {
  position: relative;
  top: 0%;
  left: 0%;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.5rem 0rem 0.3rem 0rem;
  transform: translate(0%, 0%);
  display: flex;
}

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

.social-media ul li .fa {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  line-height: 1.4rem;
  transition: 0.6s;
  color: #000000;
}

.social-media ul li .fa:hover {
  color: #ffffff;
}

.social-media ul li a {
  position: relative;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #ffffff;
  text-align: center;
  transition: 0.6s;
  box-shadow: 0 5px 4px rgba(0, 0, 0, 0.35);
  /* border: 1px solid black; */
}

/* NOTE: Translate (width, height) */
.social-media ul li a:hover {
  transform: translate(0, -0.4rem);
}

/* Implement on hover - FACEBOOK Color  */
.social-media ul li:nth-child(1) a:hover {
  background-color: var(--color-facebook2);
}

/* Implement on hover - INSTAGRAM  */
.social-media ul li:nth-child(2) a:hover {
  background-color: var(--color-instagram);
}

/* Implement on hover - TWITTER  */
.social-media ul li:nth-child(3) a:hover {
  background-color: var(--color-twitter);
}

/* Implement on hover - LINKEDIN  */
.social-media ul li:nth-child(4) a:hover {
  background-color: var(--color-linkedin);
}

/* Implement on hover - YOUTUBE  */
.social-media ul li:nth-child(5) a:hover {
  background-color: var(--color-youtube);
}

/* Implement on hover - WHATSAPP  */
.social-media ul li:nth-child(6) a:hover {
  background-color: var(--color-whatsapp);
}

/* Implement on hover - EMAIL  */
.social-media ul li:nth-child(7) a:hover {
  background-color: var(--color-email);
}

/* ===================================================================================================================== */
/* TODO:  PART 5 - GET TO KNOW US, SELLERS, INVESTORS & SHOPPERS                                                         */
/* ===================================================================================================================== */

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

.service__area ul li {
  margin: 0rem 0rem -0.3rem 0rem;
}

.service__header {
  margin: 0rem 0.5rem 0rem 10rem;
}

li.service__name {
  color: var(--color-footer-service-headers);
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
}

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

.service__header li a {
  color: var(--color-footer-service-headers-list-itmes);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 0.9rem;
  padding: 0rem 0rem 0rem 0rem;
}

.service__header li a:hover {
  color: var(--color-footer-service-headers-list-itmes-hover);
  font-weight: 600;
  cursor: pointer;
}

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

/* -------------------------------------------- */
/* SECTION - PAYMENT PLATFORMS & APP STORE      */
/* -------------------------------------------- */

/* ALL ELEMENT IN CONTAINER */

.payments__app__store {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* PAYMENT OPTIONS */

.payment__options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0rem 0rem 0rem 0.8rem;
}

.payment__options p {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  margin: 0rem 0.5rem 0rem 0rem;
}

.payment__options a {
  text-decoration: none;
}

.payment__options img {
  width: 7rem;
  height: auto;
  vertical-align: middle;
  margin: 0rem 0rem 0rem 4rem;
  transition: transform 0.5s ease-in-out;
}

.payment__options img:hover {
  transform: scale(1.04);
}

/* APP STORE OPTIONS */

.appstore__options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0rem 0.5rem 0rem 0rem;
}

.appstore__options p {
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  margin: 0rem 0.5rem 0rem 0rem;
}

.appstore__options a {
  text-decoration: none;
}

.appstore__options img {
  width: 7.5rem;
  height: auto;
  vertical-align: middle;
  margin: 0rem 0rem 0rem 4rem;
  transition: transform 0.5s ease-in-out;
}

.appstore__options img:hover {
  transform: scale(1.04);
}

/* -------------------------------------------- */
/* SECTION - BUSINESS SUPPORT PARTNERS          */
/* -------------------------------------------- */

/* ALL BUSINESS PARTNERS (CONTAINER) */

.business__partners {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

/* SKYNAMO */

.skynamo__partner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0rem 0rem 0rem 0.8rem;
}

.skynamo__partner p {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  margin: 0rem 0rem 0.5rem 0rem;
  color: #dc143c;
  text-transform: uppercase;
}

.skynamo__partner a {
  text-decoration: none;
}

.skynamo__partner img {
  width: 12rem;
  height: auto;
  vertical-align: middle;
  margin: 0rem 0rem 0rem 1rem;
  transition: transform 0.5s ease-in-out;
}

.skynamo__partner img:hover {
  transform: scale(1.04);
}

/* UNASHAMEDLY ETHICAL */

.ue__partner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0rem 0rem 0rem 0rem;
}

.ue__partner p {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  margin: 0rem 0rem 0.5rem 0rem;
  color: #dc143c;
  text-transform: uppercase;
}

.ue__partner a {
  text-decoration: none;
}

.ue__partner img {
  width: 7rem;
  height: auto;
  vertical-align: middle;
  margin: 0rem 0rem 0rem 1rem;
  transition: transform 0.5s ease-in-out;
}

.ue__partner img:hover {
  transform: scale(1.04);
}

/* A TO Z WHISTLEBLOWING SOLUTIONS */

.whistleblowing__partner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0rem 0.8rem 0rem 0rem;
}

.whistleblowing__partner p {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  margin: 0rem 0rem 0.5rem 0rem;
  color: #dc143c;
  text-transform: uppercase;
}

.whistleblowing__partner a {
  text-decoration: none;
}

.whistleblowing__partner img {
  width: 14rem;
  height: auto;
  vertical-align: middle;
  margin: 0rem 0rem 0rem 1rem;
  transition: transform 0.5s ease-in-out;
}

.whistleblowing__partner img:hover {
  transform: scale(1.04);
}

/* KETTIE MEISIE CLOTHING RANGE */

.kettie__meisie__partner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0rem 0.8rem 0rem 0rem;
}

.kettie__meisie__partner p {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  margin: 0rem 0rem 0.5rem 0rem;
  color: #dc143c;
  text-transform: uppercase;
}

.kettie__meisie__partner a {
  text-decoration: none;
}

.kettie__meisie__partner img {
  width: 12rem;
  height: auto;
  vertical-align: middle;
  margin: 0rem 0rem 0rem 1rem;
  transition: transform 0.5s ease-in-out;
}

.kettie__meisie__partner img:hover {
  transform: scale(1.04);
}

/* MAXREWARDS LOYALTY PROGRAM */

.max__rewards__loyalty__partner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0rem 0.8rem 0rem 0rem;
}

.max__rewards__loyalty__partner p {
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.05rem;
  margin: 0rem 0rem 0.5rem 0rem;
  color: #dc143c;
  text-transform: uppercase;
}

.max__rewards__loyalty__partner a {
  text-decoration: none;
}

.max__rewards__loyalty__partner img {
  width: 12rem;
  height: auto;
  vertical-align: middle;
  margin: 0rem 0rem 0rem 1rem;
  transition: transform 0.5s ease-in-out;
}

.max__rewards__loyalty__partner img:hover {
  transform: scale(1.04);
}

.footer__column__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0rem 0rem 0rem 0rem;
}

/* -------------------------------------------- */
/* SECTION - COPYRIGHT / PAIA / POPI / PRIVACY  */
/* -------------------------------------------- */

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

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

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

.footer__bottom__policies a {
  color: var(--color-policies);
  font-size: 1rem;
  font-weight: 600;
  margin: 0rem 0.5rem 0rem 2rem;
}

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

/* ===================================================================================================================== */
/* TODO:  PART 6 - RESPONSIVE DESIGN (MEDIA QUERIES)                                                                     */
/* ===================================================================================================================== */

/* --------------------------------------TODO: 1250px */

@media screen and (max-width: 1250px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 9rem;
  }

  .payment__options img {
    margin: 0rem 0rem 0rem 3.5rem;
  }

  .appstore__options img {
    margin: 0rem 0rem 0rem 3.5rem;
  }
}

/* --------------------------------------TODO: 1207px */

@media screen and (max-width: 1207px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 8.5rem;
  }
}

/* --------------------------------------TODO: 1200px */

@media screen and (max-width: 1200px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 8rem;
  }

  .payment__options img {
    margin: 0rem 0rem 0rem 3rem;
  }

  .appstore__options img {
    margin: 0rem 0rem 0rem 3rem;
  }
}

/* --------------------------------------TODO: 1167px */

@media screen and (max-width: 1167px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 7.5rem;
  }
}

/* --------------------------------------TODO: 1150px */

@media screen and (max-width: 1150px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 7rem;
  }

  .payment__options img {
    margin: 0rem 0rem 0rem 2.5rem;
  }

  .appstore__options img {
    margin: 0rem 0rem 0rem 2.5rem;
  }
}

/* --------------------------------------TODO: 1127px */

@media screen and (max-width: 1127px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 6.25rem;
  }
}

/* --------------------------------------TODO: 1125px */

@media screen and (max-width: 1125px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 6rem;
  }

  .payment__options img {
    margin: 0rem 0rem 0rem 2rem;
  }

  .appstore__options img {
    margin: 0rem 0rem 0rem 2rem;
  }
}

/* --------------------------------------TODO: 1087px */

@media screen and (max-width: 1087px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 5.5rem;
  }
}

/* --------------------------------------TODO: 1075px */

@media screen and (max-width: 1075px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 5rem;
  }

  .payment__options img {
    margin: 0rem 0rem 0rem 1.5rem;
  }

  .appstore__options img {
    margin: 0rem 0rem 0rem 1.5rem;
  }
}

/* --------------------------------------TODO: 1047px */

@media screen and (max-width: 1047px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 4.5rem;
  }
}

/* --------------------------------------TODO: 1030px */

@media screen and (max-width: 1030px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 3.5rem;
    /* border: 1px solid green; */
  }

  .payment__options img {
    margin: 0rem 0rem 0rem 1rem;
  }

  .appstore__options img {
    margin: 0rem 0rem 0rem 1rem;
  }
}
/* --------------------------------------TODO: 1000px */

@media screen and (max-width: 1000px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 3rem;
  }

  .payment__options img {
    margin: 0rem 0rem 0rem 0.8rem;
  }

  .appstore__options img {
    margin: 0rem 0rem 0rem 0.8rem;
  }
}

/* --------------------------------------TODO: 980px */

@media screen and (max-width: 980px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 2rem;
  }

  .payment__options img {
    margin: 0rem 0rem 0rem 0.5rem;
  }

  .appstore__options img {
    margin: 0rem 0rem 0rem 0.5rem;
  }
}

/* --------------------------------------TODO: 950px */

@media screen and (max-width: 950px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 1.5rem;
  }

  .payment__options img {
    width: 6.5rem;
    margin: 0rem 0rem 0rem 0.4rem;
  }

  .appstore__options img {
    width: 6.5rem;
    margin: 0rem 0rem 0rem 0.5rem;
  }
}

/* --------------------------------------TODO: 930px */

@media screen and (max-width: 930px) {
  .service__header {
    margin: 0rem 0.5rem 0rem 1.25rem;
  }

  .payment__options img {
    width: 6rem;
    margin: 0rem 0rem 0rem 0.3rem;
  }

  .appstore__options img {
    width: 6.5rem;
    margin: 0rem 0rem 0rem 0.5rem;
  }
}

/* --------------------------------------TODO: 910px */

@media screen and (max-width: 910px) {
  .description__area {
    font-size: 0.9rem;
  }

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

  .service__header li a {
    font-size: 0.8rem;
  }

  .payment__options img {
    width: 5.5rem;
    margin: 0rem 0rem 0rem 0.25rem;
  }

  .appstore__options img {
    width: 6rem;
    margin: 0rem 0rem 0rem 0.5rem;
  }
}

/* --------------------------------------TODO: 875px */

@media screen and (max-width: 875px) {
  .description__area {
    font-size: 0.9rem;
  }

  .service__header {
    margin: 0rem 0.5rem 0rem 0.75rem;
  }

  li.service__name {
    font-size: 0.9rem;
  }

  .service__header li a {
    font-size: 0.8rem;
  }

  .payment__options p {
    font-size: 0.8rem;
  }

  .payment__options img {
    width: 5.5rem;
    margin: 0rem 0rem 0rem 0.25rem;
  }

  .appstore__options p {
    font-size: 0.8rem;
  }

  .appstore__options img {
    width: 6rem;
    margin: 0rem 0rem 0rem 0.5rem;
  }

  .skynamo__partner p {
    font-size: 0.9rem;
  }

  .skynamo__partner img {
    width: 11rem;
    height: auto;
  }

  .ue__partner p {
    font-size: 0.9rem;
  }

  .ue__partner img {
    width: 6.9rem;
    height: auto;
  }

  .whistleblowing__partner p {
    font-size: 0.9rem;
  }

  .whistleblowing__partner img {
    width: 13rem;
    height: auto;
  }

  .kettie__meisie__partner p {
    font-size: 0.9rem;
  }

  .kettie__meisie__partner img {
    width: 11rem;
    height: auto;
  }

  .max__rewards__loyalty__partner p {
    font-size: 0.9rem;
  }

  .max__rewards__loyalty__partner img {
    width: 11rem;
    height: auto;
  }

  .footer__bottom {
    font-size: 0.9rem;
  }

  .copy__right span {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
  }

  .footer__bottom__policies a {
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 850px) {
  .description__area {
    font-size: 0.9rem;
    margin: 1.5rem 0.75rem 1.5rem 0.5rem;
  }

  .service__header {
    margin: 0rem 0.5rem 0rem 0rem;
  }
}

/* --------------------------------------TODO: 820px */

@media screen and (max-width: 820px) {
  .description__area {
    font-size: 0.9rem;
    margin: 1.5rem 0.75rem 1.5rem 0.5rem;
  }

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

  .service__area {
    width: 40rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
  }

  .footer__section__container {
    padding: 3rem 3.5rem 3rem 3.5rem;
  }

  .payment__options img {
    width: 5rem;
    margin: 0rem 0rem 0rem 0.15rem;
  }

  .appstore__options img {
    width: 5.5rem;
    margin: 0rem 0rem 0rem 0.3rem;
  }

  .skynamo__partner img {
    width: 10rem;
    height: auto;
  }

  .ue__partner img {
    width: 6.9rem;
    height: auto;
  }

  .whistleblowing__partner img {
    width: 12rem;
    height: auto;
  }

  .kettie__meisie__partner img {
    width: 10rem;
    height: auto;
  }

  .max__rewards__loyalty__partner img {
    width: 10rem;
    height: auto;
  }

  .footer__bottom {
    font-size: 0.9rem;
  }

  .copy__right span {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
  }

  .footer__bottom__policies a {
    font-size: 0.9rem;
  }
}

/* --------------------------------------TODO: 780px */

/* FIXME: SERVICE_AREA SPLIT INTO 2 COLUMN / 2 ROWS  */

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

  .content_footer {
    flex-wrap: wrap;
    justify-content: center;
  }

  .service__area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 37rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 1rem 0rem 1rem 0rem;
    /* border: 1px solid green; */
  }

  .service__area .about__us {
    width: 15rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    /* border: 1px solid red; */
  }

  .service__area .sellers {
    width: 15rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    /* border: 1px solid red; */
  }

  .service__area .footer__column__content {
    width: 15rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    /* border: 1px solid red; */
    gap: 2rem;
  }

  .footer__column__content .investors {
    width: 15rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    /* border: 1px solid red; */
  }

  .footer__column__content .advertising {
    width: 15rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    /* border: 1px solid red; */
  }

  .service__area .shoppers {
    width: 15rem;
    margin: 0rem 0rem 0rem 0rem;
    padding: 0rem 0rem 0rem 0rem;
    /* border: 1px solid red; */
  }

  .payments__app__store {
    display: flex;
    flex-direction: column;
  }

  .payment__options {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem 1rem 0rem;
    row-gap: 1rem;
  }

  .appstore__options {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem 1rem 0rem;
    row-gap: 1rem;
  }

  .business__partners {
    display: flex;
    flex-direction: column;
  }

  .skynamo__partner {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem 1rem 0rem;
    row-gap: 1rem;
  }

  .ue__partner {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem 1rem 0rem;
    row-gap: 1rem;
  }

  .whistleblowing__partner {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem 1rem 0rem;
    row-gap: 1rem;
  }

  .kettie__meisie__partner {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem 1rem 0rem;
    row-gap: 1rem;
  }

  .max__rewards__loyalty__partner {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem 1rem 0rem;
    row-gap: 1rem;
  }

  .footer__bottom {
    display: flex;
    flex-direction: column;
    margin: 1rem 0rem 1rem 0rem;
    row-gap: 1rem;
  }

  /* ------------------------------ */

  .profile .logo__area {
    justify-content: center;
  }

  .description__area {
    font-size: 1rem;
    margin: 1rem 0.5rem 1rem 0.5rem;
  }

  .footer__section__container_social {
    margin-bottom: 2rem;
  }

  /* ------------------------------ */

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

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

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

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

  .about__us {
    margin: 0rem 0rem 0rem 20%;
  }

  .sellers {
    margin: 0rem 0rem 0rem 6%;
  }

  .investors {
    margin: 0rem 0rem 0rem 20%;
  }

  .shoppers {
    margin: 0rem 0rem 0rem 11.5%;
  }

  /* ------------------------------ */

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

  .payment__options img {
    width: 6rem;
    margin: 0.5rem 0rem 0rem 0.5rem;
  }

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

  .appstore__options img {
    width: 8rem;
    margin: 0.5rem 0rem 0rem 1rem;
  }

  /* ------------------------------ */

  .skynamo__partner p {
    font-size: 0.95rem;
  }

  .skynamo__partner img {
    width: 12rem;
    height: auto;
    margin: 0.5rem 0rem 0.5rem 0rem;
  }

  .ue__partner p {
    font-size: 0.95rem;
  }

  .ue__partner img {
    width: 7rem;
    height: auto;
    margin: 0.5rem 0rem 0.5rem 0rem;
  }

  .whistleblowing__partner p {
    font-size: 0.95rem;
  }

  .whistleblowing__partner img {
    width: 14rem;
    height: auto;
    margin: 0.5rem 0rem 0.5rem 0rem;
  }

  .kettie__meisie__partner p {
    font-size: 0.95rem;
  }

  .kettie__meisie__partner img {
    width: 12rem;
    height: auto;
    margin: 0.5rem 0rem 0.5rem 0rem;
  }

  .max__rewards__loyalty__partner p {
    font-size: 0.95rem;
  }

  .max__rewards__loyalty__partner img {
    width: 12rem;
    height: auto;
    margin: 0.5rem 0rem 0.5rem 0rem;
  }

  /* ------------------------------ */

  .footer__bottom {
    font-size: 1rem;
  }

  .copy__right span {
    font-size: 1rem;
  }

  .footer__bottom__policies a {
    font-size: 1.1rem;
    margin: 0.5rem 0.5rem 0.5rem 0.5rem;
  }
}

/* --------------------------------------TODO: 425px */

@media screen and (max-width: 425px) {
  .description__area {
    margin: 1.5rem 1rem 1.5rem 1rem;
  }

  .social-media ul li {
    margin: 0rem 1rem 0rem 1rem;
  }
}

/* --------------------------------------TODO: 415px */

/* FIXME: SERVICE_AREA SPLIT INTO 1 COLUMN / 4 ROWS  */

@media screen and (max-width: 415px) {
  .description__area {
    margin: 1.5rem 1rem 1.5rem 1rem;
  }

  .social-media ul li {
    margin: 0rem 0.8rem 0rem 0.8rem;
  }

  .service__area {
    display: flex;
    flex-direction: column;
    column-count: 1;
    /* flex: wrap; */
    align-items: center;
    text-align: center;
  }

  .service__area .about__us {
    margin: 0rem 0rem 0.5rem 0rem;
  }

  .service__area .sellers {
    margin: 0rem 0rem 0.5rem 0rem;
  }

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

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

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

  .service__area .shoppers {
    margin: 0rem 0rem 0rem 0rem;
  }
}

/* --------------------------------------TODO: 370px */

@media screen and (max-width: 370px) {
  .payment__options img {
    display: flex;
    flex-wrap: wrap;
    width: 7rem;
    margin: 0.5rem 0rem 0.5rem 0rem;
  }

  .appstore__options img {
    display: flex;
    flex-wrap: wrap;
    width: 10rem;
    margin: 0.5rem 0rem 0rem 0rem;
  }
}

/* --------------------------------------TODO: 330px */

@media screen and (max-width: 330px) {
  .description__area {
    margin: 1.5rem 0.75rem 1.5rem 0.75rem;
  }

  .social-media ul li {
    margin: 0rem 0.4rem 0rem 0.4rem;
  }

  .payment__options p {
    font-size: 0.9rem;
  }

  .appstore__options p {
    font-size: 0.9rem;
  }

  .skynamo__partner p {
    font-size: 0.85rem;
  }

  .ue__partner p {
    font-size: 0.9rem;
  }

  .whistleblowing__partner p {
    font-size: 0.9rem;
  }

  .copy__right span {
    font-size: 0.7rem;
  }
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                                   SECTION - FOOTER (END)                                    FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                       SECTION - POPUP MODAL - COOKIES & POPI ACT (START)                        TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                     SECTION - POPUP MODAL - COOKIES & POPI ACT (END)                        FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                   SECTION - POPUP MODAL - ADVERTISING & PROMOTIONS (START)                      TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                  SECTION - POPUP MODAL - ADVERTISING & PROMOTIONS (END)                     FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                             SECTION - WISH LIST PAGE (START)                                    TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                            SECTION - WISH LIST PAGE (END)                                   FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                           SECTION - SHOPPING CART PAGE (START)                                  TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                          SECTION - SHOPPING CART PAGE (END)                                 FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* FIXME:  SPECIAL NOTES (PART 10)                                                                                       */
/* ===================================================================================================================== */
/* 01.            */
/* 02.            */
/* 03             */
/* 04.            */
/* 05.            */
/* ===================================================================================================================== */

/* ----------------------------------------------------------------------------------------- */
/* FIXME:  GOOGLE CHROME DEVICE - BREAKPOINTS                          TODO: VARIOUS DEVICES */
/* ----------------------------------------------------------------------------------------- */

/* TODO:  SAMSUNG GALAXY FOLD  TODO: */
@media screen and (min-width: 280px) and (min-height: 653px) {
}

/* TODO:  SAMSUNG GALAXY S8+  TODO: */
@media screen and (min-width: 360px) and (min-height: 740px) {
}

/* TODO:  APPLE IPHONE SE  TODO: */
@media screen and (min-width: 375px) and (min-height: 667px) {
}

/* TODO:  APPLE IPHONE 12 PRO  TODO: */
@media screen and (min-width: 390px) and (min-height: 844px) {
}

/* TODO:  PIXEL 5  TODO: */
@media screen and (min-width: 393px) and (min-height: 851px) {
}

/* TODO:  SAMSUNG GALAXY A51/A71  TODO: */
/* TODO:  SAMSUNG GALAXY S20 ULTRA  TODO: */
@media screen and (min-width: 412px) and (min-height: 914px) {
}

/* TODO:  APPLE IPHONE XR  TODO: */
@media screen and (min-width: 414px) and (min-height: 896px) {
}

/* TODO:  SURFACE DUO  TODO: */
@media screen and (min-width: 540px) and (min-height: 720px) {
}

/* TODO:  APPLE IPAD MINI  TODO: */
@media screen and (min-width: 768px) and (min-height: 1024px) {
}

/* TODO:  APPLE IPAD AIR  TODO: */
@media screen and (min-width: 820px) and (min-height: 1180px) {
}

/* TODO:  SURFACE PRO 7  TODO: */
@media screen and (min-width: 912px) and (min-height: 1368px) {
}

/* TODO:  NEST HUB  TODO: */
@media screen and (min-width: 1024px) and (min-height: 600px) {
}

/* TODO:  NEST HUB MAX  TODO: */
@media screen and (min-width: 1280px) and (min-height: 800px) {
}

/* ===================================================================================================================== */
/*                                                                                            TODO:  STYLING ENDS  TODO: */
/* ===================================================================================================================== */