/* ===================================================================================================================== */
/* 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: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

:root {
  /* ========================================================== */
  /* PAGE BACKGROUND - FOR SERVICE PRODUCT CARDS                */
  /* ========================================================== */
  --color-service-product-cards-backgrounds: #eee;
  /* --color-service-product-cards-button-background: #dc143c; */
  --color-service-product-cards-button-background: #01a7cf;
  --color-service-product-cards-buttons-text: #ffffff;
  --color-service-product-cards-identification-number-text: #01a7cf;
  --color-service-product-cards-close-button-x: #01a7cf;
  /* ========================================================== */
  /* CARD BACKGROUND & TEXT                                     */
  /* ========================================================== */
  --color-individual-service-product-cards-background: #ffffff;
  --color-individual-service-product-cards-extra-image-border: #000000;
  --color-individual-service-product-cards-extra-image-border-hover: #dc143c;
  --color-individual-service-product-cards-text-title: #000000;
  --color-individual-service-product-cards-text-description: #000000;
  --color-individual-service-product-cards-text-price-currency: #000000;
  --color-individual-service-product-cards-text-price-value: #000000;
  --color-individual-service-product-cards-back-heading-main-title: #01a7cf;
  --color-individual-service-product-cards-back-heading-sub-title: #000000;
  /* ========================================================== */
  /* COLOR SCHEMES - FOR SERVICE PRODUCT CARDS                  */
  /* ========================================================== */
  --color-scheme-shopmax-hex: #dc143c;
  --color-scheme-shopmax-rgb: rgb(220, 20, 60);
  --color-scheme-general-services-hex: #544179;
  --color-scheme-general-services-rgb: rgb(84, 65, 121);
  --color-scheme-professional-services-hex: #01a7cf;
  --color-scheme-professional-services-rgb: rgb(1, 167, 207);
}

/* =========================================================== */
/* 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: var(--color-service-product-cards-backgrounds);
  /* 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: var(--color-service-product-cards-backgrounds);
  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: var(--color-service-product-cards-backgrounds);
  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: var(--color-scheme-shopmax-hex);
  border-radius: 0.5rem;
  box-shadow: var(--color-box-shadow-01);
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
  text-align: center;
}

.new__page__button a {
  text-decoration: none;
  color: var(--color-service-product-cards-buttons-text);
  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 - SERVICE PRODUCT CARDS (START)                             TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* TODO:  CONTAINER HOLDING ALL SERVICE PRODUCT CARDS                                                                    */
/* ===================================================================================================================== */

.all__service__product__cards__container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0rem 0rem 0rem 0rem;
  background-color: var(--color-service-product-cards-backgrounds);
  /* border: 2px solid green; */
}

/* ===================================================================================================================== */
/* TODO:  SERVICE - PRODUCT CARDS                                                                                        */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* TODO:  MAIN SERVICE PRODUCT CARD (CONTAINERS)                                                                         */
/* ===================================================================================================================== */

/* ============================================== */
/* FIXME:  MAIN CONTAINER - HOLDING ALL ELEMENTS  */
/* ============================================== */

.single__service__product__card__container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26rem;
  height: 46rem;
  margin: 2rem 2rem 2rem 2rem;
  padding: 0rem 0rem 0rem 0rem;
  border-radius: 1.5rem;
  perspective: 200rem;
  z-index: 10;
  /* margin: 1rem auto 1rem auto; */
  /* box-shadow: var(--color-box-shadow-01); */
  /* border: 1px solid red; */
}

/* ======================================= */
/* FIXME:  SERVICE PRODUCT CARD CONTAINER  */
/* ======================================= */

.single__service__product__card__container .service-card-01,
.single__service__product__card__container .service-card-02,
.single__service__product__card__container .service-card-03,
.single__service__product__card__container .service-card-04,
.single__service__product__card__container .service-card-05,
.single__service__product__card__container .service-card-06,
.single__service__product__card__container .service-card-07,
.single__service__product__card__container .service-card-08,
.single__service__product__card__container .service-card-09,
.single__service__product__card__container .service-card-10,
.single__service__product__card__container .service-card-11,
.single__service__product__card__container .service-card-12,
.single__service__product__card__container .service-card-13,
.single__service__product__card__container .service-card-14,
.single__service__product__card__container .service-card-15,
.single__service__product__card__container .service-card-16,
.single__service__product__card__container .service-card-17,
.single__service__product__card__container .service-card-18,
.single__service__product__card__container .service-card-19,
.single__service__product__card__container .service-card-20,
.single__service__product__card__container .service-card-21,
.single__service__product__card__container .service-card-22,
.single__service__product__card__container .service-card-23,
.single__service__product__card__container .service-card-24,
.single__service__product__card__container .service-card-25,
.single__service__product__card__container .service-card-26,
.single__service__product__card__container .service-card-27,
.single__service__product__card__container .service-card-28,
.single__service__product__card__container .service-card-29,
.single__service__product__card__container .service-card-30,
.single__service__product__card__container .service-card-31,
.single__service__product__card__container .service-card-32,
.single__service__product__card__container .service-card-33,
.single__service__product__card__container .service-card-34,
.single__service__product__card__container .service-card-35,
.single__service__product__card__container .service-card-36,
.single__service__product__card__container .service-card-37,
.single__service__product__card__container .service-card-38,
.single__service__product__card__container .service-card-39,
.single__service__product__card__container .service-card-40,
.single__service__product__card__container .service-card-41,
.single__service__product__card__container .service-card-42,
.single__service__product__card__container .service-card-43,
.single__service__product__card__container .service-card-44,
.single__service__product__card__container .service-card-45,
.single__service__product__card__container .service-card-46,
.single__service__product__card__container .service-card-47,
.single__service__product__card__container .service-card-48,
.single__service__product__card__container .service-card-49,
.single__service__product__card__container .service-card-50,
.single__service__product__card__container .service-card-51,
.single__service__product__card__container .service-card-52,
.single__service__product__card__container .service-card-53,
.single__service__product__card__container .service-card-54,
.single__service__product__card__container .service-card-55,
.single__service__product__card__container .service-card-56,
.single__service__product__card__container .service-card-57,
.single__service__product__card__container .service-card-58,
.single__service__product__card__container .service-card-59,
.single__service__product__card__container .service-card-60,
.single__service__product__card__container .service-card-61,
.single__service__product__card__container .service-card-62,
.single__service__product__card__container .service-card-63,
.single__service__product__card__container .service-card-64,
.single__service__product__card__container .service-card-65,
.single__service__product__card__container .service-card-66,
.single__service__product__card__container .service-card-67,
.single__service__product__card__container .service-card-68,
.single__service__product__card__container .service-card-69,
.single__service__product__card__container .service-card-70,
.single__service__product__card__container .service-card-71,
.single__service__product__card__container .service-card-72,
.single__service__product__card__container .service-card-73,
.single__service__product__card__container .service-card-74,
.single__service__product__card__container .service-card-75,
.single__service__product__card__container .service-card-76,
.single__service__product__card__container .service-card-77,
.single__service__product__card__container .service-card-78,
.single__service__product__card__container .service-card-79,
.single__service__product__card__container .service-card-80,
.single__service__product__card__container .service-card-81,
.single__service__product__card__container .service-card-82,
.single__service__product__card__container .service-card-83,
.single__service__product__card__container .service-card-84,
.single__service__product__card__container .service-card-85,
.single__service__product__card__container .service-card-86,
.single__service__product__card__container .service-card-87,
.single__service__product__card__container .service-card-88,
.single__service__product__card__container .service-card-89,
.single__service__product__card__container .service-card-90,
.single__service__product__card__container .service-card-91,
.single__service__product__card__container .service-card-92,
.single__service__product__card__container .service-card-93,
.single__service__product__card__container .service-card-94,
.single__service__product__card__container .service-card-95,
.single__service__product__card__container .service-card-96,
.single__service__product__card__container .service-card-97,
.single__service__product__card__container .service-card-98,
.single__service__product__card__container .service-card-99,
.single__service__product__card__container .service-card-100,
.single__service__product__card__container .service-card-101,
.single__service__product__card__container .service-card-102,
.single__service__product__card__container .service-card-103,
.single__service__product__card__container .service-card-104,
.single__service__product__card__container .service-card-105,
.single__service__product__card__container .service-card-106,
.single__service__product__card__container .service-card-107,
.single__service__product__card__container .service-card-108,
.single__service__product__card__container .service-card-109,
.single__service__product__card__container .service-card-110,
.single__service__product__card__container .service-card-111,
.single__service__product__card__container .service-card-112,
.single__service__product__card__container .service-card-113,
.single__service__product__card__container .service-card-114,
.single__service__product__card__container .service-card-115,
.single__service__product__card__container .service-card-116,
.single__service__product__card__container .service-card-117,
.single__service__product__card__container .service-card-118,
.single__service__product__card__container .service-card-119,
.single__service__product__card__container .service-card-120,
.single__service__product__card__container .service-card-121,
.single__service__product__card__container .service-card-122,
.single__service__product__card__container .service-card-123,
.single__service__product__card__container .service-card-124,
.single__service__product__card__container .service-card-125,
.single__service__product__card__container .service-card-126,
.single__service__product__card__container .service-card-127,
.single__service__product__card__container .service-card-128,
.single__service__product__card__container .service-card-129,
.single__service__product__card__container .service-card-130,
.single__service__product__card__container .service-card-131,
.single__service__product__card__container .service-card-132,
.single__service__product__card__container .service-card-133,
.single__service__product__card__container .service-card-134,
.single__service__product__card__container .service-card-135,
.single__service__product__card__container .service-card-136,
.single__service__product__card__container .service-card-137,
.single__service__product__card__container .service-card-138,
.single__service__product__card__container .service-card-139,
.single__service__product__card__container .service-card-140,
.single__service__product__card__container .service-card-141,
.single__service__product__card__container .service-card-142,
.single__service__product__card__container .service-card-143,
.single__service__product__card__container .service-card-144,
.single__service__product__card__container .service-card-145,
.single__service__product__card__container .service-card-146,
.single__service__product__card__container .service-card-147,
.single__service__product__card__container .service-card-148,
.single__service__product__card__container .service-card-149,
.single__service__product__card__container .service-card-150,
.single__service__product__card__container .service-card-151,
.single__service__product__card__container .service-card-152,
.single__service__product__card__container .service-card-153,
.single__service__product__card__container .service-card-154,
.single__service__product__card__container .service-card-155,
.single__service__product__card__container .service-card-156,
.single__service__product__card__container .service-card-157,
.single__service__product__card__container .service-card-158,
.single__service__product__card__container .service-card-159,
.single__service__product__card__container .service-card-160,
.single__service__product__card__container .service-card-161,
.single__service__product__card__container .service-card-162,
.single__service__product__card__container .service-card-163,
.single__service__product__card__container .service-card-164,
.single__service__product__card__container .service-card-165,
.single__service__product__card__container .service-card-166,
.single__service__product__card__container .service-card-167,
.single__service__product__card__container .service-card-168,
.single__service__product__card__container .service-card-169,
.single__service__product__card__container .service-card-170,
.single__service__product__card__container .service-card-171,
.single__service__product__card__container .service-card-172,
.single__service__product__card__container .service-card-173,
.single__service__product__card__container .service-card-174,
.single__service__product__card__container .service-card-175,
.single__service__product__card__container .service-card-176,
.single__service__product__card__container .service-card-177,
.single__service__product__card__container .service-card-178,
.single__service__product__card__container .service-card-179,
.single__service__product__card__container .service-card-180,
.single__service__product__card__container .service-card-181,
.single__service__product__card__container .service-card-182,
.single__service__product__card__container .service-card-183,
.single__service__product__card__container .service-card-184,
.single__service__product__card__container .service-card-185,
.single__service__product__card__container .service-card-186,
.single__service__product__card__container .service-card-187,
.single__service__product__card__container .service-card-188,
.single__service__product__card__container .service-card-189,
.single__service__product__card__container .service-card-190,
.single__service__product__card__container .service-card-191,
.single__service__product__card__container .service-card-192,
.single__service__product__card__container .service-card-193,
.single__service__product__card__container .service-card-194,
.single__service__product__card__container .service-card-195,
.single__service__product__card__container .service-card-196,
.single__service__product__card__container .service-card-197,
.single__service__product__card__container .service-card-198,
.single__service__product__card__container .service-card-199,
.single__service__product__card__container .service-card-200 {
  position: absolute;
  transition: transform 1s;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  background: var(--color-individual-service-product-cards-background);
  border-radius: 1.5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  box-shadow: var(--color-box-shadow-01);
  /* position: relative; */
  /* overflow: hidden; */
  /* border: 1px solid red; */
}

/* =================================================================== */
/* TODO:FIXME:     JAVASCRIPT : FOR FLIP FUNCTIONALITY     TODO:FIXME: */
/* =================================================================== */

.single__service__product__card__container .service-card-01.animated,
.single__service__product__card__container .service-card-02.animated,
.single__service__product__card__container .service-card-03.animated,
.single__service__product__card__container .service-card-04.animated,
.single__service__product__card__container .service-card-05.animated,
.single__service__product__card__container .service-card-06.animated,
.single__service__product__card__container .service-card-07.animated,
.single__service__product__card__container .service-card-08.animated,
.single__service__product__card__container .service-card-09.animated,
.single__service__product__card__container .service-card-10.animated,
.single__service__product__card__container .service-card-11.animated,
.single__service__product__card__container .service-card-12.animated,
.single__service__product__card__container .service-card-13.animated,
.single__service__product__card__container .service-card-14.animated,
.single__service__product__card__container .service-card-15.animated,
.single__service__product__card__container .service-card-16.animated,
.single__service__product__card__container .service-card-17.animated,
.single__service__product__card__container .service-card-18.animated,
.single__service__product__card__container .service-card-19.animated,
.single__service__product__card__container .service-card-20.animated,
.single__service__product__card__container .service-card-21.animated,
.single__service__product__card__container .service-card-22.animated,
.single__service__product__card__container .service-card-23.animated,
.single__service__product__card__container .service-card-24.animated,
.single__service__product__card__container .service-card-25.animated,
.single__service__product__card__container .service-card-26.animated,
.single__service__product__card__container .service-card-27.animated,
.single__service__product__card__container .service-card-28.animated,
.single__service__product__card__container .service-card-29.animated,
.single__service__product__card__container .service-card-30.animated,
.single__service__product__card__container .service-card-31.animated,
.single__service__product__card__container .service-card-32.animated,
.single__service__product__card__container .service-card-33.animated,
.single__service__product__card__container .service-card-34.animated,
.single__service__product__card__container .service-card-35.animated,
.single__service__product__card__container .service-card-36.animated,
.single__service__product__card__container .service-card-37.animated,
.single__service__product__card__container .service-card-38.animated,
.single__service__product__card__container .service-card-39.animated,
.single__service__product__card__container .service-card-40.animated,
.single__service__product__card__container .service-card-41.animated,
.single__service__product__card__container .service-card-42.animated,
.single__service__product__card__container .service-card-43.animated,
.single__service__product__card__container .service-card-44.animated,
.single__service__product__card__container .service-card-45.animated,
.single__service__product__card__container .service-card-46.animated,
.single__service__product__card__container .service-card-47.animated,
.single__service__product__card__container .service-card-48.animated,
.single__service__product__card__container .service-card-49.animated,
.single__service__product__card__container .service-card-50.animated,
.single__service__product__card__container .service-card-51.animated,
.single__service__product__card__container .service-card-52.animated,
.single__service__product__card__container .service-card-53.animated,
.single__service__product__card__container .service-card-54.animated,
.single__service__product__card__container .service-card-55.animated,
.single__service__product__card__container .service-card-56.animated,
.single__service__product__card__container .service-card-57.animated,
.single__service__product__card__container .service-card-58.animated,
.single__service__product__card__container .service-card-59.animated,
.single__service__product__card__container .service-card-60.animated,
.single__service__product__card__container .service-card-61.animated,
.single__service__product__card__container .service-card-62.animated,
.single__service__product__card__container .service-card-63.animated,
.single__service__product__card__container .service-card-64.animated,
.single__service__product__card__container .service-card-65.animated,
.single__service__product__card__container .service-card-66.animated,
.single__service__product__card__container .service-card-67.animated,
.single__service__product__card__container .service-card-68.animated,
.single__service__product__card__container .service-card-69.animated,
.single__service__product__card__container .service-card-70.animated,
.single__service__product__card__container .service-card-71.animated,
.single__service__product__card__container .service-card-72.animated,
.single__service__product__card__container .service-card-73.animated,
.single__service__product__card__container .service-card-74.animated,
.single__service__product__card__container .service-card-75.animated,
.single__service__product__card__container .service-card-76.animated,
.single__service__product__card__container .service-card-77.animated,
.single__service__product__card__container .service-card-78.animated,
.single__service__product__card__container .service-card-79.animated,
.single__service__product__card__container .service-card-80.animated,
.single__service__product__card__container .service-card-81.animated,
.single__service__product__card__container .service-card-82.animated,
.single__service__product__card__container .service-card-83.animated,
.single__service__product__card__container .service-card-84.animated,
.single__service__product__card__container .service-card-85.animated,
.single__service__product__card__container .service-card-86.animated,
.single__service__product__card__container .service-card-87.animated,
.single__service__product__card__container .service-card-88.animated,
.single__service__product__card__container .service-card-89.animated,
.single__service__product__card__container .service-card-90.animated,
.single__service__product__card__container .service-card-91.animated,
.single__service__product__card__container .service-card-92.animated,
.single__service__product__card__container .service-card-93.animated,
.single__service__product__card__container .service-card-94.animated,
.single__service__product__card__container .service-card-95.animated,
.single__service__product__card__container .service-card-96.animated,
.single__service__product__card__container .service-card-97.animated,
.single__service__product__card__container .service-card-98.animated,
.single__service__product__card__container .service-card-99.animated,
.single__service__product__card__container .service-card-100.animated,
.single__service__product__card__container .service-card-101.animated,
.single__service__product__card__container .service-card-102.animated,
.single__service__product__card__container .service-card-103.animated,
.single__service__product__card__container .service-card-104.animated,
.single__service__product__card__container .service-card-105.animated,
.single__service__product__card__container .service-card-106.animated,
.single__service__product__card__container .service-card-107.animated,
.single__service__product__card__container .service-card-108.animated,
.single__service__product__card__container .service-card-109.animated,
.single__service__product__card__container .service-card-110.animated,
.single__service__product__card__container .service-card-111.animated,
.single__service__product__card__container .service-card-112.animated,
.single__service__product__card__container .service-card-113.animated,
.single__service__product__card__container .service-card-114.animated,
.single__service__product__card__container .service-card-115.animated,
.single__service__product__card__container .service-card-116.animated,
.single__service__product__card__container .service-card-117.animated,
.single__service__product__card__container .service-card-118.animated,
.single__service__product__card__container .service-card-119.animated,
.single__service__product__card__container .service-card-120.animated,
.single__service__product__card__container .service-card-121.animated,
.single__service__product__card__container .service-card-122.animated,
.single__service__product__card__container .service-card-123.animated,
.single__service__product__card__container .service-card-124.animated,
.single__service__product__card__container .service-card-125.animated,
.single__service__product__card__container .service-card-126.animated,
.single__service__product__card__container .service-card-127.animated,
.single__service__product__card__container .service-card-128.animated,
.single__service__product__card__container .service-card-129.animated,
.single__service__product__card__container .service-card-130.animated,
.single__service__product__card__container .service-card-131.animated,
.single__service__product__card__container .service-card-132.animated,
.single__service__product__card__container .service-card-133.animated,
.single__service__product__card__container .service-card-134.animated,
.single__service__product__card__container .service-card-135.animated,
.single__service__product__card__container .service-card-136.animated,
.single__service__product__card__container .service-card-137.animated,
.single__service__product__card__container .service-card-138.animated,
.single__service__product__card__container .service-card-139.animated,
.single__service__product__card__container .service-card-140.animated,
.single__service__product__card__container .service-card-141.animated,
.single__service__product__card__container .service-card-142.animated,
.single__service__product__card__container .service-card-143.animated,
.single__service__product__card__container .service-card-144.animated,
.single__service__product__card__container .service-card-145.animated,
.single__service__product__card__container .service-card-146.animated,
.single__service__product__card__container .service-card-147.animated,
.single__service__product__card__container .service-card-148.animated,
.single__service__product__card__container .service-card-149.animated,
.single__service__product__card__container .service-card-150.animated,
.single__service__product__card__container .service-card-151.animated,
.single__service__product__card__container .service-card-152.animated,
.single__service__product__card__container .service-card-153.animated,
.single__service__product__card__container .service-card-154.animated,
.single__service__product__card__container .service-card-155.animated,
.single__service__product__card__container .service-card-156.animated,
.single__service__product__card__container .service-card-157.animated,
.single__service__product__card__container .service-card-158.animated,
.single__service__product__card__container .service-card-159.animated,
.single__service__product__card__container .service-card-160.animated,
.single__service__product__card__container .service-card-161.animated,
.single__service__product__card__container .service-card-162.animated,
.single__service__product__card__container .service-card-163.animated,
.single__service__product__card__container .service-card-164.animated,
.single__service__product__card__container .service-card-165.animated,
.single__service__product__card__container .service-card-166.animated,
.single__service__product__card__container .service-card-167.animated,
.single__service__product__card__container .service-card-168.animated,
.single__service__product__card__container .service-card-169.animated,
.single__service__product__card__container .service-card-170.animated,
.single__service__product__card__container .service-card-171.animated,
.single__service__product__card__container .service-card-172.animated,
.single__service__product__card__container .service-card-173.animated,
.single__service__product__card__container .service-card-174.animated,
.single__service__product__card__container .service-card-175.animated,
.single__service__product__card__container .service-card-176.animated,
.single__service__product__card__container .service-card-177.animated,
.single__service__product__card__container .service-card-178.animated,
.single__service__product__card__container .service-card-179.animated,
.single__service__product__card__container .service-card-180.animated,
.single__service__product__card__container .service-card-181.animated,
.single__service__product__card__container .service-card-182.animated,
.single__service__product__card__container .service-card-183.animated,
.single__service__product__card__container .service-card-184.animated,
.single__service__product__card__container .service-card-185.animated,
.single__service__product__card__container .service-card-186.animated,
.single__service__product__card__container .service-card-187.animated,
.single__service__product__card__container .service-card-188.animated,
.single__service__product__card__container .service-card-189.animated,
.single__service__product__card__container .service-card-190.animated,
.single__service__product__card__container .service-card-191.animated,
.single__service__product__card__container .service-card-192.animated,
.single__service__product__card__container .service-card-193.animated,
.single__service__product__card__container .service-card-194.animated,
.single__service__product__card__container .service-card-195.animated,
.single__service__product__card__container .service-card-196.animated,
.single__service__product__card__container .service-card-197.animated,
.single__service__product__card__container .service-card-198.animated,
.single__service__product__card__container .service-card-199.animated,
.single__service__product__card__container .service-card-200.animated {
  transform: rotateY(-180deg);
}

/* ==================================================================== */
/* FIXME:  SUB-CONTAINER - HOLDING ALL ELEMENTS OF CARD (FRONT)  FIXME: */
/* ==================================================================== */

.single__service__product__card__container
  .service-card-01
  .service-card-front-side,
.single__service__product__card__container
  .service-card-02
  .service-card-front-side,
.single__service__product__card__container
  .service-card-03
  .service-card-front-side,
.single__service__product__card__container
  .service-card-04
  .service-card-front-side,
.single__service__product__card__container
  .service-card-05
  .service-card-front-side,
.single__service__product__card__container
  .service-card-06
  .service-card-front-side,
.single__service__product__card__container
  .service-card-07
  .service-card-front-side,
.single__service__product__card__container
  .service-card-08
  .service-card-front-side,
.single__service__product__card__container
  .service-card-09
  .service-card-front-side,
.single__service__product__card__container
  .service-card-10
  .service-card-front-side,
.single__service__product__card__container
  .service-card-11
  .service-card-front-side,
.single__service__product__card__container
  .service-card-12
  .service-card-front-side,
.single__service__product__card__container
  .service-card-13
  .service-card-front-side,
.single__service__product__card__container
  .service-card-14
  .service-card-front-side,
.single__service__product__card__container
  .service-card-15
  .service-card-front-side,
.single__service__product__card__container
  .service-card-16
  .service-card-front-side,
.single__service__product__card__container
  .service-card-17
  .service-card-front-side,
.single__service__product__card__container
  .service-card-18
  .service-card-front-side,
.single__service__product__card__container
  .service-card-19
  .service-card-front-side,
.single__service__product__card__container
  .service-card-20
  .service-card-front-side,
.single__service__product__card__container
  .service-card-21
  .service-card-front-side,
.single__service__product__card__container
  .service-card-22
  .service-card-front-side,
.single__service__product__card__container
  .service-card-23
  .service-card-front-side,
.single__service__product__card__container
  .service-card-24
  .service-card-front-side,
.single__service__product__card__container
  .service-card-25
  .service-card-front-side,
.single__service__product__card__container
  .service-card-26
  .service-card-front-side,
.single__service__product__card__container
  .service-card-27
  .service-card-front-side,
.single__service__product__card__container
  .service-card-28
  .service-card-front-side,
.single__service__product__card__container
  .service-card-29
  .service-card-front-side,
.single__service__product__card__container
  .service-card-30
  .service-card-front-side,
.single__service__product__card__container
  .service-card-31
  .service-card-front-side,
.single__service__product__card__container
  .service-card-32
  .service-card-front-side,
.single__service__product__card__container
  .service-card-33
  .service-card-front-side,
.single__service__product__card__container
  .service-card-34
  .service-card-front-side,
.single__service__product__card__container
  .service-card-35
  .service-card-front-side,
.single__service__product__card__container
  .service-card-36
  .service-card-front-side,
.single__service__product__card__container
  .service-card-37
  .service-card-front-side,
.single__service__product__card__container
  .service-card-38
  .service-card-front-side,
.single__service__product__card__container
  .service-card-39
  .service-card-front-side,
.single__service__product__card__container
  .service-card-40
  .service-card-front-side,
.single__service__product__card__container
  .service-card-41
  .service-card-front-side,
.single__service__product__card__container
  .service-card-42
  .service-card-front-side,
.single__service__product__card__container
  .service-card-43
  .service-card-front-side,
.single__service__product__card__container
  .service-card-44
  .service-card-front-side,
.single__service__product__card__container
  .service-card-45
  .service-card-front-side,
.single__service__product__card__container
  .service-card-46
  .service-card-front-side,
.single__service__product__card__container
  .service-card-47
  .service-card-front-side,
.single__service__product__card__container
  .service-card-48
  .service-card-front-side,
.single__service__product__card__container
  .service-card-49
  .service-card-front-side,
.single__service__product__card__container
  .service-card-50
  .service-card-front-side,
.single__service__product__card__container
  .service-card-51
  .service-card-front-side,
.single__service__product__card__container
  .service-card-52
  .service-card-front-side,
.single__service__product__card__container
  .service-card-53
  .service-card-front-side,
.single__service__product__card__container
  .service-card-54
  .service-card-front-side,
.single__service__product__card__container
  .service-card-55
  .service-card-front-side,
.single__service__product__card__container
  .service-card-56
  .service-card-front-side,
.single__service__product__card__container
  .service-card-57
  .service-card-front-side,
.single__service__product__card__container
  .service-card-58
  .service-card-front-side,
.single__service__product__card__container
  .service-card-59
  .service-card-front-side,
.single__service__product__card__container
  .service-card-60
  .service-card-front-side,
.single__service__product__card__container
  .service-card-61
  .service-card-front-side,
.single__service__product__card__container
  .service-card-62
  .service-card-front-side,
.single__service__product__card__container
  .service-card-63
  .service-card-front-side,
.single__service__product__card__container
  .service-card-64
  .service-card-front-side,
.single__service__product__card__container
  .service-card-65
  .service-card-front-side,
.single__service__product__card__container
  .service-card-66
  .service-card-front-side,
.single__service__product__card__container
  .service-card-67
  .service-card-front-side,
.single__service__product__card__container
  .service-card-68
  .service-card-front-side,
.single__service__product__card__container
  .service-card-69
  .service-card-front-side,
.single__service__product__card__container
  .service-card-70
  .service-card-front-side,
.single__service__product__card__container
  .service-card-71
  .service-card-front-side,
.single__service__product__card__container
  .service-card-72
  .service-card-front-side,
.single__service__product__card__container
  .service-card-73
  .service-card-front-side,
.single__service__product__card__container
  .service-card-74
  .service-card-front-side,
.single__service__product__card__container
  .service-card-75
  .service-card-front-side,
.single__service__product__card__container
  .service-card-76
  .service-card-front-side,
.single__service__product__card__container
  .service-card-77
  .service-card-front-side,
.single__service__product__card__container
  .service-card-78
  .service-card-front-side,
.single__service__product__card__container
  .service-card-79
  .service-card-front-side,
.single__service__product__card__container
  .service-card-80
  .service-card-front-side,
.single__service__product__card__container
  .service-card-81
  .service-card-front-side,
.single__service__product__card__container
  .service-card-82
  .service-card-front-side,
.single__service__product__card__container
  .service-card-83
  .service-card-front-side,
.single__service__product__card__container
  .service-card-84
  .service-card-front-side,
.single__service__product__card__container
  .service-card-85
  .service-card-front-side,
.single__service__product__card__container
  .service-card-86
  .service-card-front-side,
.single__service__product__card__container
  .service-card-87
  .service-card-front-side,
.single__service__product__card__container
  .service-card-88
  .service-card-front-side,
.single__service__product__card__container
  .service-card-89
  .service-card-front-side,
.single__service__product__card__container
  .service-card-90
  .service-card-front-side,
.single__service__product__card__container
  .service-card-91
  .service-card-front-side,
.single__service__product__card__container
  .service-card-92
  .service-card-front-side,
.single__service__product__card__container
  .service-card-93
  .service-card-front-side,
.single__service__product__card__container
  .service-card-94
  .service-card-front-side,
.single__service__product__card__container
  .service-card-95
  .service-card-front-side,
.single__service__product__card__container
  .service-card-96
  .service-card-front-side,
.single__service__product__card__container
  .service-card-97
  .service-card-front-side,
.single__service__product__card__container
  .service-card-98
  .service-card-front-side,
.single__service__product__card__container
  .service-card-99
  .service-card-front-side,
.single__service__product__card__container
  .service-card-100
  .service-card-front-side,
.single__service__product__card__container
  .service-card-101
  .service-card-front-side,
.single__service__product__card__container
  .service-card-102
  .service-card-front-side,
.single__service__product__card__container
  .service-card-103
  .service-card-front-side,
.single__service__product__card__container
  .service-card-104
  .service-card-front-side,
.single__service__product__card__container
  .service-card-105
  .service-card-front-side,
.single__service__product__card__container
  .service-card-106
  .service-card-front-side,
.single__service__product__card__container
  .service-card-107
  .service-card-front-side,
.single__service__product__card__container
  .service-card-108
  .service-card-front-side,
.single__service__product__card__container
  .service-card-109
  .service-card-front-side,
.single__service__product__card__container
  .service-card-110
  .service-card-front-side,
.single__service__product__card__container
  .service-card-111
  .service-card-front-side,
.single__service__product__card__container
  .service-card-112
  .service-card-front-side,
.single__service__product__card__container
  .service-card-113
  .service-card-front-side,
.single__service__product__card__container
  .service-card-114
  .service-card-front-side,
.single__service__product__card__container
  .service-card-115
  .service-card-front-side,
.single__service__product__card__container
  .service-card-116
  .service-card-front-side,
.single__service__product__card__container
  .service-card-117
  .service-card-front-side,
.single__service__product__card__container
  .service-card-118
  .service-card-front-side,
.single__service__product__card__container
  .service-card-119
  .service-card-front-side,
.single__service__product__card__container
  .service-card-120
  .service-card-front-side,
.single__service__product__card__container
  .service-card-121
  .service-card-front-side,
.single__service__product__card__container
  .service-card-122
  .service-card-front-side,
.single__service__product__card__container
  .service-card-123
  .service-card-front-side,
.single__service__product__card__container
  .service-card-124
  .service-card-front-side,
.single__service__product__card__container
  .service-card-125
  .service-card-front-side,
.single__service__product__card__container
  .service-card-126
  .service-card-front-side,
.single__service__product__card__container
  .service-card-127
  .service-card-front-side,
.single__service__product__card__container
  .service-card-128
  .service-card-front-side,
.single__service__product__card__container
  .service-card-129
  .service-card-front-side,
.single__service__product__card__container
  .service-card-130
  .service-card-front-side,
.single__service__product__card__container
  .service-card-131
  .service-card-front-side,
.single__service__product__card__container
  .service-card-132
  .service-card-front-side,
.single__service__product__card__container
  .service-card-133
  .service-card-front-side,
.single__service__product__card__container
  .service-card-134
  .service-card-front-side,
.single__service__product__card__container
  .service-card-135
  .service-card-front-side,
.single__service__product__card__container
  .service-card-136
  .service-card-front-side,
.single__service__product__card__container
  .service-card-137
  .service-card-front-side,
.single__service__product__card__container
  .service-card-138
  .service-card-front-side,
.single__service__product__card__container
  .service-card-139
  .service-card-front-side,
.single__service__product__card__container
  .service-card-140
  .service-card-front-side,
.single__service__product__card__container
  .service-card-141
  .service-card-front-side,
.single__service__product__card__container
  .service-card-142
  .service-card-front-side,
.single__service__product__card__container
  .service-card-143
  .service-card-front-side,
.single__service__product__card__container
  .service-card-144
  .service-card-front-side,
.single__service__product__card__container
  .service-card-145
  .service-card-front-side,
.single__service__product__card__container
  .service-card-146
  .service-card-front-side,
.single__service__product__card__container
  .service-card-147
  .service-card-front-side,
.single__service__product__card__container
  .service-card-148
  .service-card-front-side,
.single__service__product__card__container
  .service-card-149
  .service-card-front-side,
.single__service__product__card__container
  .service-card-150
  .service-card-front-side,
.single__service__product__card__container
  .service-card-151
  .service-card-front-side,
.single__service__product__card__container
  .service-card-152
  .service-card-front-side,
.single__service__product__card__container
  .service-card-153
  .service-card-front-side,
.single__service__product__card__container
  .service-card-154
  .service-card-front-side,
.single__service__product__card__container
  .service-card-155
  .service-card-front-side,
.single__service__product__card__container
  .service-card-156
  .service-card-front-side,
.single__service__product__card__container
  .service-card-157
  .service-card-front-side,
.single__service__product__card__container
  .service-card-158
  .service-card-front-side,
.single__service__product__card__container
  .service-card-159
  .service-card-front-side,
.single__service__product__card__container
  .service-card-160
  .service-card-front-side,
.single__service__product__card__container
  .service-card-161
  .service-card-front-side,
.single__service__product__card__container
  .service-card-162
  .service-card-front-side,
.single__service__product__card__container
  .service-card-163
  .service-card-front-side,
.single__service__product__card__container
  .service-card-164
  .service-card-front-side,
.single__service__product__card__container
  .service-card-165
  .service-card-front-side,
.single__service__product__card__container
  .service-card-166
  .service-card-front-side,
.single__service__product__card__container
  .service-card-167
  .service-card-front-side,
.single__service__product__card__container
  .service-card-168
  .service-card-front-side,
.single__service__product__card__container
  .service-card-169
  .service-card-front-side,
.single__service__product__card__container
  .service-card-170
  .service-card-front-side,
.single__service__product__card__container
  .service-card-171
  .service-card-front-side,
.single__service__product__card__container
  .service-card-172
  .service-card-front-side,
.single__service__product__card__container
  .service-card-173
  .service-card-front-side,
.single__service__product__card__container
  .service-card-174
  .service-card-front-side,
.single__service__product__card__container
  .service-card-175
  .service-card-front-side,
.single__service__product__card__container
  .service-card-176
  .service-card-front-side,
.single__service__product__card__container
  .service-card-177
  .service-card-front-side,
.single__service__product__card__container
  .service-card-178
  .service-card-front-side,
.single__service__product__card__container
  .service-card-179
  .service-card-front-side,
.single__service__product__card__container
  .service-card-180
  .service-card-front-side,
.single__service__product__card__container
  .service-card-181
  .service-card-front-side,
.single__service__product__card__container
  .service-card-182
  .service-card-front-side,
.single__service__product__card__container
  .service-card-183
  .service-card-front-side,
.single__service__product__card__container
  .service-card-184
  .service-card-front-side,
.single__service__product__card__container
  .service-card-185
  .service-card-front-side,
.single__service__product__card__container
  .service-card-186
  .service-card-front-side,
.single__service__product__card__container
  .service-card-187
  .service-card-front-side,
.single__service__product__card__container
  .service-card-188
  .service-card-front-side,
.single__service__product__card__container
  .service-card-189
  .service-card-front-side,
.single__service__product__card__container
  .service-card-190
  .service-card-front-side,
.single__service__product__card__container
  .service-card-191
  .service-card-front-side,
.single__service__product__card__container
  .service-card-192
  .service-card-front-side,
.single__service__product__card__container
  .service-card-193
  .service-card-front-side,
.single__service__product__card__container
  .service-card-194
  .service-card-front-side,
.single__service__product__card__container
  .service-card-195
  .service-card-front-side,
.single__service__product__card__container
  .service-card-196
  .service-card-front-side,
.single__service__product__card__container
  .service-card-197
  .service-card-front-side,
.single__service__product__card__container
  .service-card-198
  .service-card-front-side,
.single__service__product__card__container
  .service-card-199
  .service-card-front-side,
.single__service__product__card__container
  .service-card-200
  .service-card-front-side {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  background: var(--color-individual-service-product-cards-background);
  border-radius: 1.5rem;
  overflow: hidden;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.75rem 0.5rem 0.75rem 0.5rem;
  box-shadow: var(--color-box-shadow-01);
  /* border: 1px solid red; */
}

/* =================================================================== */
/* FIXME:  SUB-CONTAINER - HOLDING ALL ELEMENTS OF CARD (BACK)  FIXME: */
/* =================================================================== */

.single__service__product__card__container
  .service-card-01
  .service-card-back-side,
.single__service__product__card__container
  .service-card-02
  .service-card-back-side,
.single__service__product__card__container
  .service-card-03
  .service-card-back-side,
.single__service__product__card__container
  .service-card-04
  .service-card-back-side,
.single__service__product__card__container
  .service-card-05
  .service-card-back-side,
.single__service__product__card__container
  .service-card-06
  .service-card-back-side,
.single__service__product__card__container
  .service-card-07
  .service-card-back-side,
.single__service__product__card__container
  .service-card-08
  .service-card-back-side,
.single__service__product__card__container
  .service-card-09
  .service-card-back-side,
.single__service__product__card__container
  .service-card-10
  .service-card-back-side,
.single__service__product__card__container
  .service-card-11
  .service-card-back-side,
.single__service__product__card__container
  .service-card-12
  .service-card-back-side,
.single__service__product__card__container
  .service-card-13
  .service-card-back-side,
.single__service__product__card__container
  .service-card-14
  .service-card-back-side,
.single__service__product__card__container
  .service-card-15
  .service-card-back-side,
.single__service__product__card__container
  .service-card-16
  .service-card-back-side,
.single__service__product__card__container
  .service-card-17
  .service-card-back-side,
.single__service__product__card__container
  .service-card-18
  .service-card-back-side,
.single__service__product__card__container
  .service-card-19
  .service-card-back-side,
.single__service__product__card__container
  .service-card-20
  .service-card-back-side,
.single__service__product__card__container
  .service-card-21
  .service-card-back-side,
.single__service__product__card__container
  .service-card-22
  .service-card-back-side,
.single__service__product__card__container
  .service-card-23
  .service-card-back-side,
.single__service__product__card__container
  .service-card-24
  .service-card-back-side,
.single__service__product__card__container
  .service-card-25
  .service-card-back-side,
.single__service__product__card__container
  .service-card-26
  .service-card-back-side,
.single__service__product__card__container
  .service-card-27
  .service-card-back-side,
.single__service__product__card__container
  .service-card-28
  .service-card-back-side,
.single__service__product__card__container
  .service-card-29
  .service-card-back-side,
.single__service__product__card__container
  .service-card-30
  .service-card-back-side,
.single__service__product__card__container
  .service-card-31
  .service-card-back-side,
.single__service__product__card__container
  .service-card-32
  .service-card-back-side,
.single__service__product__card__container
  .service-card-33
  .service-card-back-side,
.single__service__product__card__container
  .service-card-34
  .service-card-back-side,
.single__service__product__card__container
  .service-card-35
  .service-card-back-side,
.single__service__product__card__container
  .service-card-36
  .service-card-back-side,
.single__service__product__card__container
  .service-card-37
  .service-card-back-side,
.single__service__product__card__container
  .service-card-38
  .service-card-back-side,
.single__service__product__card__container
  .service-card-39
  .service-card-back-side,
.single__service__product__card__container
  .service-card-40
  .service-card-back-side,
.single__service__product__card__container
  .service-card-41
  .service-card-back-side,
.single__service__product__card__container
  .service-card-42
  .service-card-back-side,
.single__service__product__card__container
  .service-card-43
  .service-card-back-side,
.single__service__product__card__container
  .service-card-44
  .service-card-back-side,
.single__service__product__card__container
  .service-card-45
  .service-card-back-side,
.single__service__product__card__container
  .service-card-46
  .service-card-back-side,
.single__service__product__card__container
  .service-card-47
  .service-card-back-side,
.single__service__product__card__container
  .service-card-48
  .service-card-back-side,
.single__service__product__card__container
  .service-card-49
  .service-card-back-side,
.single__service__product__card__container
  .service-card-50
  .service-card-back-side,
.single__service__product__card__container
  .service-card-51
  .service-card-back-side,
.single__service__product__card__container
  .service-card-52
  .service-card-back-side,
.single__service__product__card__container
  .service-card-53
  .service-card-back-side,
.single__service__product__card__container
  .service-card-54
  .service-card-back-side,
.single__service__product__card__container
  .service-card-55
  .service-card-back-side,
.single__service__product__card__container
  .service-card-56
  .service-card-back-side,
.single__service__product__card__container
  .service-card-57
  .service-card-back-side,
.single__service__product__card__container
  .service-card-58
  .service-card-back-side,
.single__service__product__card__container
  .service-card-59
  .service-card-back-side,
.single__service__product__card__container
  .service-card-60
  .service-card-back-side,
.single__service__product__card__container
  .service-card-61
  .service-card-back-side,
.single__service__product__card__container
  .service-card-62
  .service-card-back-side,
.single__service__product__card__container
  .service-card-63
  .service-card-back-side,
.single__service__product__card__container
  .service-card-64
  .service-card-back-side,
.single__service__product__card__container
  .service-card-65
  .service-card-back-side,
.single__service__product__card__container
  .service-card-66
  .service-card-back-side,
.single__service__product__card__container
  .service-card-67
  .service-card-back-side,
.single__service__product__card__container
  .service-card-68
  .service-card-back-side,
.single__service__product__card__container
  .service-card-69
  .service-card-back-side,
.single__service__product__card__container
  .service-card-70
  .service-card-back-side,
.single__service__product__card__container
  .service-card-71
  .service-card-back-side,
.single__service__product__card__container
  .service-card-72
  .service-card-back-side,
.single__service__product__card__container
  .service-card-73
  .service-card-back-side,
.single__service__product__card__container
  .service-card-74
  .service-card-back-side,
.single__service__product__card__container
  .service-card-75
  .service-card-back-side,
.single__service__product__card__container
  .service-card-76
  .service-card-back-side,
.single__service__product__card__container
  .service-card-77
  .service-card-back-side,
.single__service__product__card__container
  .service-card-78
  .service-card-back-side,
.single__service__product__card__container
  .service-card-79
  .service-card-back-side,
.single__service__product__card__container
  .service-card-80
  .service-card-back-side,
.single__service__product__card__container
  .service-card-81
  .service-card-back-side,
.single__service__product__card__container
  .service-card-82
  .service-card-back-side,
.single__service__product__card__container
  .service-card-83
  .service-card-back-side,
.single__service__product__card__container
  .service-card-84
  .service-card-back-side,
.single__service__product__card__container
  .service-card-85
  .service-card-back-side,
.single__service__product__card__container
  .service-card-86
  .service-card-back-side,
.single__service__product__card__container
  .service-card-87
  .service-card-back-side,
.single__service__product__card__container
  .service-card-88
  .service-card-back-side,
.single__service__product__card__container
  .service-card-89
  .service-card-back-side,
.single__service__product__card__container
  .service-card-90
  .service-card-back-side,
.single__service__product__card__container
  .service-card-91
  .service-card-back-side,
.single__service__product__card__container
  .service-card-92
  .service-card-back-side,
.single__service__product__card__container
  .service-card-93
  .service-card-back-side,
.single__service__product__card__container
  .service-card-94
  .service-card-back-side,
.single__service__product__card__container
  .service-card-95
  .service-card-back-side,
.single__service__product__card__container
  .service-card-96
  .service-card-back-side,
.single__service__product__card__container
  .service-card-97
  .service-card-back-side,
.single__service__product__card__container
  .service-card-98
  .service-card-back-side,
.single__service__product__card__container
  .service-card-99
  .service-card-back-side,
.single__service__product__card__container
  .service-card-100
  .service-card-back-side,
.single__service__product__card__container
  .service-card-101
  .service-card-back-side,
.single__service__product__card__container
  .service-card-102
  .service-card-back-side,
.single__service__product__card__container
  .service-card-103
  .service-card-back-side,
.single__service__product__card__container
  .service-card-104
  .service-card-back-side,
.single__service__product__card__container
  .service-card-105
  .service-card-back-side,
.single__service__product__card__container
  .service-card-106
  .service-card-back-side,
.single__service__product__card__container
  .service-card-107
  .service-card-back-side,
.single__service__product__card__container
  .service-card-108
  .service-card-back-side,
.single__service__product__card__container
  .service-card-109
  .service-card-back-side,
.single__service__product__card__container
  .service-card-110
  .service-card-back-side,
.single__service__product__card__container
  .service-card-111
  .service-card-back-side,
.single__service__product__card__container
  .service-card-112
  .service-card-back-side,
.single__service__product__card__container
  .service-card-113
  .service-card-back-side,
.single__service__product__card__container
  .service-card-114
  .service-card-back-side,
.single__service__product__card__container
  .service-card-115
  .service-card-back-side,
.single__service__product__card__container
  .service-card-116
  .service-card-back-side,
.single__service__product__card__container
  .service-card-117
  .service-card-back-side,
.single__service__product__card__container
  .service-card-118
  .service-card-back-side,
.single__service__product__card__container
  .service-card-119
  .service-card-back-side,
.single__service__product__card__container
  .service-card-120
  .service-card-back-side,
.single__service__product__card__container
  .service-card-121
  .service-card-back-side,
.single__service__product__card__container
  .service-card-122
  .service-card-back-side,
.single__service__product__card__container
  .service-card-123
  .service-card-back-side,
.single__service__product__card__container
  .service-card-124
  .service-card-back-side,
.single__service__product__card__container
  .service-card-125
  .service-card-back-side,
.single__service__product__card__container
  .service-card-126
  .service-card-back-side,
.single__service__product__card__container
  .service-card-127
  .service-card-back-side,
.single__service__product__card__container
  .service-card-128
  .service-card-back-side,
.single__service__product__card__container
  .service-card-129
  .service-card-back-side,
.single__service__product__card__container
  .service-card-130
  .service-card-back-side,
.single__service__product__card__container
  .service-card-131
  .service-card-back-side,
.single__service__product__card__container
  .service-card-132
  .service-card-back-side,
.single__service__product__card__container
  .service-card-133
  .service-card-back-side,
.single__service__product__card__container
  .service-card-134
  .service-card-back-side,
.single__service__product__card__container
  .service-card-135
  .service-card-back-side,
.single__service__product__card__container
  .service-card-136
  .service-card-back-side,
.single__service__product__card__container
  .service-card-137
  .service-card-back-side,
.single__service__product__card__container
  .service-card-138
  .service-card-back-side,
.single__service__product__card__container
  .service-card-139
  .service-card-back-side,
.single__service__product__card__container
  .service-card-140
  .service-card-back-side,
.single__service__product__card__container
  .service-card-141
  .service-card-back-side,
.single__service__product__card__container
  .service-card-142
  .service-card-back-side,
.single__service__product__card__container
  .service-card-143
  .service-card-back-side,
.single__service__product__card__container
  .service-card-144
  .service-card-back-side,
.single__service__product__card__container
  .service-card-145
  .service-card-back-side,
.single__service__product__card__container
  .service-card-146
  .service-card-back-side,
.single__service__product__card__container
  .service-card-147
  .service-card-back-side,
.single__service__product__card__container
  .service-card-148
  .service-card-back-side,
.single__service__product__card__container
  .service-card-149
  .service-card-back-side,
.single__service__product__card__container
  .service-card-150
  .service-card-back-side,
.single__service__product__card__container
  .service-card-151
  .service-card-back-side,
.single__service__product__card__container
  .service-card-152
  .service-card-back-side,
.single__service__product__card__container
  .service-card-153
  .service-card-back-side,
.single__service__product__card__container
  .service-card-154
  .service-card-back-side,
.single__service__product__card__container
  .service-card-155
  .service-card-back-side,
.single__service__product__card__container
  .service-card-156
  .service-card-back-side,
.single__service__product__card__container
  .service-card-157
  .service-card-back-side,
.single__service__product__card__container
  .service-card-158
  .service-card-back-side,
.single__service__product__card__container
  .service-card-159
  .service-card-back-side,
.single__service__product__card__container
  .service-card-160
  .service-card-back-side,
.single__service__product__card__container
  .service-card-161
  .service-card-back-side,
.single__service__product__card__container
  .service-card-162
  .service-card-back-side,
.single__service__product__card__container
  .service-card-163
  .service-card-back-side,
.single__service__product__card__container
  .service-card-164
  .service-card-back-side,
.single__service__product__card__container
  .service-card-165
  .service-card-back-side,
.single__service__product__card__container
  .service-card-166
  .service-card-back-side,
.single__service__product__card__container
  .service-card-167
  .service-card-back-side,
.single__service__product__card__container
  .service-card-168
  .service-card-back-side,
.single__service__product__card__container
  .service-card-169
  .service-card-back-side,
.single__service__product__card__container
  .service-card-170
  .service-card-back-side,
.single__service__product__card__container
  .service-card-171
  .service-card-back-side,
.single__service__product__card__container
  .service-card-172
  .service-card-back-side,
.single__service__product__card__container
  .service-card-173
  .service-card-back-side,
.single__service__product__card__container
  .service-card-174
  .service-card-back-side,
.single__service__product__card__container
  .service-card-175
  .service-card-back-side,
.single__service__product__card__container
  .service-card-176
  .service-card-back-side,
.single__service__product__card__container
  .service-card-177
  .service-card-back-side,
.single__service__product__card__container
  .service-card-178
  .service-card-back-side,
.single__service__product__card__container
  .service-card-179
  .service-card-back-side,
.single__service__product__card__container
  .service-card-180
  .service-card-back-side,
.single__service__product__card__container
  .service-card-181
  .service-card-back-side,
.single__service__product__card__container
  .service-card-182
  .service-card-back-side,
.single__service__product__card__container
  .service-card-183
  .service-card-back-side,
.single__service__product__card__container
  .service-card-184
  .service-card-back-side,
.single__service__product__card__container
  .service-card-185
  .service-card-back-side,
.single__service__product__card__container
  .service-card-186
  .service-card-back-side,
.single__service__product__card__container
  .service-card-187
  .service-card-back-side,
.single__service__product__card__container
  .service-card-188
  .service-card-back-side,
.single__service__product__card__container
  .service-card-189
  .service-card-back-side,
.single__service__product__card__container
  .service-card-190
  .service-card-back-side,
.single__service__product__card__container
  .service-card-191
  .service-card-back-side,
.single__service__product__card__container
  .service-card-192
  .service-card-back-side,
.single__service__product__card__container
  .service-card-193
  .service-card-back-side,
.single__service__product__card__container
  .service-card-194
  .service-card-back-side,
.single__service__product__card__container
  .service-card-195
  .service-card-back-side,
.single__service__product__card__container
  .service-card-196
  .service-card-back-side,
.single__service__product__card__container
  .service-card-197
  .service-card-back-side,
.single__service__product__card__container
  .service-card-198
  .service-card-back-side,
.single__service__product__card__container
  .service-card-199
  .service-card-back-side,
.single__service__product__card__container
  .service-card-200
  .service-card-back-side {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  width: 100%;
  height: 100%;
  background: var(--color-individual-service-product-cards-background);
  border-radius: 1.5rem;
  overflow: hidden;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.75rem 0.75rem 0.75rem 0.75rem;
  box-shadow: var(--color-box-shadow-01);
  /* border: 1px solid red; */
}

/* MEDIA QUERY - PRODUCT CARD CONTAINERS */

@media screen and (max-width: 350px) {
  .single__service__product__card__container {
    margin: 2rem 0.75rem 2rem 0.75rem;
  }
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/*                                      TODO:  SERVICE PRODUCT CARD (FRONT)  TODO:                                       */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* TODO:  SERVICE PRODUCT CARD SECTION 1 (TOP)                                                                           */
/* ===================================================================================================================== */

/* ================================ */
/* FIXME:  CONTAINER - TOP SECTION  */
/* ================================ */

.service-card-front-top-section {
  position: relative;
  width: 100%;
  height: 60%;
  border-radius: 0rem 0rem 0rem 0rem;
  background-color: var(--color-individual-service-product-cards-background);
  /* box-shadow: var(--color-box-shadow-01); */
  /* border: 1px solid red; */
}

/* ================================================================= */
/* FIXME:  TOP SECTION - SERVICE FEATURED IMAGE (CURRENTLY SHOWING)  */
/* ================================================================= */

/* ================ */
/* IMAGE CONTAINER  */
/* ================ */

.service-card-front-top-section .service-card-main-featured-image {
  position: relative;
  top: 0;
  left: 0;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* border: 1px solid red; */
}

/* ====== */
/* IMAGE  */
/* ====== */

.service-card-front-top-section .service-card-main-featured-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.5rem 1rem 0.5rem 1rem;
}

/* ===================================================================================================================== */
/* TODO:  SERVICE PRODUCT CARD SECTION 2 - EXTRA SERVICE IMAGES                                                          */
/* ===================================================================================================================== */

/* =================================== */
/* FIXME:  SECTION 2 - MAIN CONTAINER  */
/* =================================== */

.service-card-extra-images-container {
  position: relative;
  height: 4.8rem;
  background: var(--color-individual-service-product-cards-background);
  /* border: 1px solid red; */
}

/* =========================================== */
/* FIXME:  SECTION 2 - EXTRA IMAGES CONTAINER  */
/* =========================================== */

.service-card-extra-images-container .extra-service-images {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-individual-service-product-cards-background);
  /* border: 1px solid red; */
}

.service-card-extra-images-container .extra-service-images img {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0.5rem 0.5rem 0rem 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  background: var(--color-individual-service-product-cards-background);
  border-radius: 0.5rem;
  /* box-shadow: var(--color-box-shadow-01); */
  /* border: 1px solid var(--color-individual-service-product-cards-extra-image-border); */
  cursor: pointer;
}

.service-card-extra-images-container .extra-service-images img:hover {
  border: 3px solid
    var(--color-individual-service-product-cards-extra-image-border-hover);
}

/* ===================================================================================================================== */
/* TODO:  SERVICE PRODUCT CARD SECTION 3 - SERVICE INFORMATION                                                           */
/* ===================================================================================================================== */

/* =========================================================== */
/* FIXME:  SERVICE PRODUCT CARD - BRIEF INFORMATION CONTAINER  */
/* =========================================================== */

.service-card-brief-information-container {
  position: relative;
  width: 100%;
  height: 13rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0.5rem 0rem 0.5rem;
  /* border: 1px solid red; */
}

/* ===================================== */
/* FIXME:  SERVICE PRODUCT CARD - TITLE  */
/* ===================================== */

.service-card-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0rem 0.5rem 0rem;
  width: 100%;
  height: 4rem;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--color-individual-service-product-cards-text-title);
  /* border: 1px solid red; */
}

/* ================================================= */
/* FIXME:  SERVICE PRODUCT CARD - BRIEF DESCRIPTION  */
/* ================================================= */

.service-card-short-description {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 9rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.2rem 0.5rem 0.2rem 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: initial;
  text-align: justify;
  color: var(--color-individual-service-product-cards-text-description);
  /* border: 1px solid red; */
}

/* ===================================================================================================================== */
/* TODO:  SERVICE PRODUCT CARD - SERVICE PRICING                                                                         */
/* ===================================================================================================================== */

/* ================================================= */
/* FIXME:  SERVICE PRODUCT CARD - PRICING CONTAINER  */
/* ================================================= */

.service-card-pricing-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0rem 0.5rem 0.25rem 0.5rem;
  /* border: 1px solid red; */
}

/* ================================================== */
/* FIXME:  SERVICE PRODUCT CARD - PRICING (CURRENCY)  */
/* ================================================== */

.service-card-price-currency {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: 0rem 0.5rem 0rem 0rem;
  color: var(--color-individual-service-product-cards-text-price-currency);
}

/* =============================================== */
/* FIXME:  SERVICE PRODUCT CARD - PRICING (VALUE)  */
/* =============================================== */

.service-card-price-value {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: 0rem 0rem 0rem 0rem;
  color: var(--color-individual-service-product-cards-text-price-value);
}

/* ===================================================================================================================== */
/* TODO:  SERVICE PRODUCT CARD - BUTTON (ADD TO SHOPPING CART)                                                           */
/* ===================================================================================================================== */

.service-card-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid green; */
}

/* ======================================= */
/* FIXME:  CONTAINER - ADD-TO-CART  FIXME: */
/* ======================================= */

.add-to-cart-container {
  width: 50%;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0rem 0rem 1rem 0rem;
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  /* border: 1px solid red; */
}

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

.add-to-cart-container button {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.75rem 1rem 0.75rem 1rem;
  border-radius: 0.75rem;
  background-color: var(--color-service-product-cards-button-background);
  color: var(--color-service-product-cards-buttons-text);
  outline: none;
  border: none;
  transition: transform 0.3s ease-in-out;
  box-shadow: var(--color-box-shadow-01);
  /* border: 1px solid green; */
}

.add-to-cart-container i.bx-cart {
  font-size: 2rem;
}

.add-to-cart-container button:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/* ============================== */
/* PLACE ORDER / GET QUOTE BUTTON */
/* ============================== */

.add-to-cart-container a {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.75rem 1rem 0.75rem 1rem;
  border-radius: 0.75rem;
  background-color: var(--color-service-product-cards-button-background);
  color: var(--color-service-product-cards-buttons-text);
  outline: none;
  border: none;
  transition: transform 0.3s ease-in-out;
  box-shadow: var(--color-box-shadow-01);
  /* border: 1px solid green; */
}

.add-to-cart-container i.bx-cart {
  font-size: 2rem;
}

.add-to-cart-container a:hover {
  transform: scale(1.05);
  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: count 0.4s ease-in-out;
}

@keyframes count {
  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:  SERVICE PRODUCT CARD - BUTTON (MORE INFO)                                                                      */
/* ===================================================================================================================== */

/* ===================================== */
/* FIXME:  CONTAINER - MORE INFO  FIXME: */
/* ===================================== */

.more-info-container {
  width: 50%;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0rem 0rem 0rem 1rem;
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  /* border: 1px solid red; */
}

/* ================================== */
/* FIXME:  BUTTON - MORE INFO  FIXME: */
/* ================================== */

.more-info-container .more-info-btn {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.75rem 1rem 0.75rem 1rem;
  border-radius: 0.75rem;
  background-color: var(--color-service-product-cards-button-background);
  color: var(--color-service-product-cards-buttons-text);
  outline: none;
  border: none;
  transition: transform 0.3s ease-in-out;
  box-shadow: var(--color-box-shadow-01);
  /* border: 1px solid green; */
}

.more-info-container i.bx-list-check {
  font-size: 2rem;
}

.more-info-btn:hover {
  transform: scale(1.05);
}

/* ===================================================================================================================== */
/* TODO:  SERVICE PRODUCT CARD - BUTTON (ADD TO WISHLIST)                                                                */
/* ===================================================================================================================== */

/* ===========================================*/
/* FIXME:  CONTAINER - ADD-TO-WISHLIST  FIXME: */
/* =========================================== */

.add-to-wishlist-container {
  position: absolute;
  top: -0.3rem;
  right: -0.25rem;
  width: 2rem;
  height: 2rem;
  z-index: 200;
  outline: none;
  border: none;
  background: var(--color-individual-service-product-cards-background);
  /* border: 1px solid red; */
}

/* ======================================== */
/* FIXME:  BUTTON - ADD-TO-WISHLIST  FIXME: */
/* ======================================== */

.add-to-wishlist-container button {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  background: var(--color-individual-service-product-cards-background);
  padding: 0rem 0rem 0rem 0rem;
  cursor: pointer;
  /* border: 1px solid green; */
}

.add-to-wishlist-container i.bx-heart {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  background-color: var(--color-service-product-cards-button-background);
  color: var(--color-service-product-cards-buttons-text);
  margin: 0rem 0rem 0rem 0rem;
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
  border-radius: 2rem;
  transition: transform 0.3s ease-in-out;
}

.add-to-wishlist-container button i:hover {
  transform: scale(1.11);
  cursor: pointer;
}

/* ========================================== */
/* SERVICE PRODUCT CARD IDENTIFICATION NUMBER */
/* ========================================== */

.add-to-wishlist-container p {
  position: absolute;
  top: 0;
  right: 0rem;
  width: 100%;
  height: 100%;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-service-product-cards-identification-number-text);
  margin: 0rem 0.75rem 0rem 0rem;
}

/* ===================================================================================================== */
/* 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: count 0.4s ease-in-out;
}

@keyframes count {
  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:  SERVICE PRODUCT CARD (BACK)  TODO:                                       */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ======================================== */
/* FIXME:  BUTTON "X" TO CLOSE BACK  FIXME: */
/* ======================================== */

.single__service__product__card__container .close {
  width: 2.5rem;
  height: 2.5rem;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0.74rem;
  right: 0.75rem;
  font-size: 2.5rem;
  border-radius: 2rem;
  text-decoration: none;
  text-align: center;
  color: var(--color-service-product-cards-close-button-x);
  transition: transform 0.3s ease-in-out;
  /* border: 1px solid purple; */
  z-index: 5;
}

.single__service__product__card__container .close:hover {
  transform: scale(1.1);
}

/* ======================================================================== */
/* FIXME:  SUB-CONTAINER - HOLDING ALL CONTENT/TEXT ON BACK PROFILE  FIXME: */
/* ======================================================================== */

.service-information-container-back {
  padding: 2rem 1rem 2rem 1rem;
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 0.5rem;
  background-color: var(--color-individual-service-product-cards-background);
  color: var(--color-individual-service-product-cards-text-title);
  /* box-shadow: var(--color-all-elements-box-shadow); */
  /* border: 1px solid plum; */
}

/* ==================================================== */
/* FIXME:  SERVICE PRODUCT CARD (BACK) - BRAND LOGO     */
/* ==================================================== */

.service-brand-logo {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.service-brand-logo img {
  width: auto;
  height: 3.5rem;
  object-fit: contain;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

/* ====================================================== */
/* TODO:     SERVICE IDENTIFICATION SECTION         TODO: */
/*        (incl. service sku, service category)           */
/* ====================================================== */

/* MAIN CONTAINER */

.service-identification-container-back {
  position: absolute;
  top: 1.4rem;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0.5rem 0rem 0.5rem;
  /* border: 1px solid red; */
}

/* ====================================================== */
/* FIXME:  SERVICE PRODUCT CARD (BACK) - BRAND NAME       */
/* ====================================================== */

.service-brand-name-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3rem;
  /* border: 1px solid blue; */
}

.service-brand-name-container .service-brand-name-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 1.5rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-brand-name-container .service-brand-name-info {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 1.5rem;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
  /* border: 1px solid green; */
}

/* ====================================================== */
/* FIXME:  SERVICE PRODUCT CARD (BACK) - SERVICE CODE     */
/* ====================================================== */

.service-code-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 5rem;
  /* border: 1px solid blue; */
}

.service-code-container .service-code-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-code-container .service-code-info {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 3rem;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
  /* border: 1px solid green; */
}

/* ====================================================== */
/* FIXME:  SERVICE PRODUCT CARD (BACK) - MODEL NUMBER     */
/* ====================================================== */

.service-model-number-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 5rem;
  /* border: 1px solid blue; */
}

.service-model-number-container .service-model-number-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-model-number-container .service-model-number-info {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 3rem;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
  /* border: 1px solid green; */
}

/* ====================================================== */
/* FIXME:  SERVICE PRODUCT CARD (BACK) - AVAILABLE STOCK  */
/* ====================================================== */

.service-stock-available-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3rem;
  /* border: 1px solid blue; */
}

.service-stock-available-container .service-stock-available-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 1.5rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-stock-available-container .service-stock-available-info {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 1.5rem;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
  /* border: 1px solid green; */
}

/* ========================================================= */
/* TODO:    SERVICE PRODUCT MEASUREMENT SECTION        TODO: */
/* (incl. cta-Length(CM), Width(CM), Height(CM), Weigth(KG)  */
/* ========================================================= */

/* MAIN CONTAINER */

.service-measurements-container {
  position: absolute;
  top: 8.5rem;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.5rem;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 0rem 0rem;
  /* border: 1px solid red; */
}

/* ====================================================== */
/* FIXME:  SERVICE PRODUCT CARD (BACK) - LENGHT (CM)      */
/* ====================================================== */

.service-length-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.5rem;
  /* border: 1px solid blue; */
}

.service-length-container .service-length-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2.5rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-length-container .service-length-title span {
  font-size: 0.6rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  align-items: center;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
}

.service-length-container .service-length-info {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2rem;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
  /* border: 1px solid green; */
}

/* ===================================================== */
/* FIXME:  SERVICE PRODUCT CARD (BACK) - WIDTH (CM)      */
/* ===================================================== */

.service-width-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.5rem;
  /* border: 1px solid blue; */
}

.service-width-container .service-width-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2.5rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-width-container .service-width-title span {
  font-size: 0.6rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  align-items: center;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
}

.service-width-container .service-width-info {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2rem;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
  /* border: 1px solid green; */
}

/* ====================================================== */
/* FIXME:  SERVICE PRODUCT CARD (BACK) - HEIGHT (CM)      */
/* ====================================================== */

.service-height-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.5rem;
  /* border: 1px solid blue; */
}

.service-height-container .service-height-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2.5rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-height-container .service-height-title span {
  font-size: 0.6rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  align-items: center;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
}

.service-height-container .service-height-info {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2rem;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
  /* border: 1px solid green; */
}

/* ====================================================== */
/* FIXME:  SERVICE PRODUCT CARD (BACK) - WEIGHT (KG)      */
/* ====================================================== */

.service-weight-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4.5rem;
  /* border: 1px solid blue; */
}

.service-weight-container .service-weight-title {
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2.5rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-weight-container .service-weight-title span {
  font-size: 0.6rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  align-items: center;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
}

.service-weight-container .service-weight-info {
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2rem;
  color: var(--color-individual-service-product-cards-back-heading-sub-title);
  /* border: 1px solid green; */
}

/* ====================================================== */
/* TODO:     SERVICE FULL DESCRIPTION SECTION       TODO: */
/*             (incl. title & description)                */
/* ====================================================== */

/* MAIN CONTAINER */

.service-full-description-container {
  position: absolute;
  top: 6.25rem;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0rem 0rem 0rem 0rem;
  width: 100%;
  height: 28.5rem;
  /* border: 1px solid blue; */
}

.service-full-description-container .service-full-specifications-title {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-full-description-container .service-full-specifications-details {
  position: absolute;
  top: 2rem;
  left: 0;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  text-align: justify;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  text-transform: initial;
  padding: 0.25rem 1rem 0.25rem 1rem;
  width: 100%;
  height: 25rem;
  /* border: 1px solid green; */
}

/* ====================================================== */
/* TODO:     IMPORTANT NOTIFICATIONS SECTION        TODO: */
/*             (incl. title & description)                */
/* ====================================================== */

.service-card-important-notification-container {
  position: absolute;
  top: 34.5rem;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 11.35rem;
  border-radius: 0rem 0rem 1.5rem 1.5rem;
  /* border: 1px solid blue; */
}

.service-card-important-notification-container
  .service-card-notification-title {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  height: 2.35rem;
  color: var(--color-individual-service-product-cards-back-heading-main-title);
  /* border: 1px solid yellow; */
}

.service-card-important-notification-container .service-card-notification-info {
  position: absolute;
  top: 2rem;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: justify;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0rem 1rem 0rem 1rem;
  width: 100%;
  height: 9rem;
  border-radius: 0rem 0rem 1.5rem 1.5rem;
  /* border: 1px solid green; */
}

.service-card-important-notification-container
  .service-card-notification-info
  a {
  display: inline-block;
  text-decoration: none;
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                          SECTION - SERVICE PRODUCT CARDS (END)                              FIXME:FIXME: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* TODO:TODO:                            SECTION - SERVICE ORDER FORM (START)                                 TODO:TODO: */
/* ===================================================================================================================== */
/* ===================================================================================================================== */

:root {
  --color-order-form-background: #eee;
  --color-order-form-section-heading-background: #01a7cf;
  --color-order-form-section-heading-text: #ffffff;
  --color-order-form-privacy-and-popi-text: #01a7cf;
  --color-order-form-delivery-costs-text: #01a7cf;
  /* ========================================================= */
  /* FORM ACCORDIANS - ADD MORE PRODUCTS / SERVICES            */
  /* ========================================================= */
  --color-order-form-accordian-background: #eee;
  --color-order-form-accordian-text: #000000;
  --color-order-form-accordian-plus-and-minus-sign: #01a7cf;
  /* ========================================================= */
  /* INPUT FIELDS - BORDERS, BORDERS-FOCUS, BORDERS-BOX-SHADOW */
  /* ========================================================= */
  --color-order-form-input-field-border: #ccc;
  --color-order-form-input-field-border-focus: #01a7cf;
  --color-order-form-input-field-border-focus-box-shadow: 0 0 0 2px
    rgba(1, 167, 207, 0.95);
  /* =============== */
  /* FORM CHECKBOXES */
  /* =============== */
  --color-order-form-checkbox-label: #000000;
  --color-order-form-checkbox-background: #ffffff;
  --color-order-form-checkbox-border: #ccc;
  --color-order-form-checkbox-checkmark: #01a7cf;
  --color-order-form-checkbox-focus: #01a7cf;
  --color-order-form-checkbox-disabled: #959495;
  /* ===================== */
  /* FORM - SUBMIT BUTTONS */
  /* ===================== */
  --color-order-form-buttons-background: #01a7cf;
  --color-order-form-buttons-text: #ffffff;
  /* ================== */
  /* FORM - FILE UPLOAD */
  /* ================== */
  --color-order-form-file-upload-background: #ffffff;
  --color-order-form-file-upload-background-text: #ffffff;
  --color-order-form-file-upload-background-hover: #01a7cf;
  --color-order-form-file-upload-label-text: #01a7cf;
}

/* ================================================================== */
/* FIXME:  ORDER FORM - CONTAINER (HOLDING ALL FORM ELEMENTS)  FIXME: */
/* ================================================================== */

.shopmax__place__order__section {
  position: relative;
  /* top: 9rem; */
  top: 0rem;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin: 0rem 0rem 0rem 0rem;
  padding: 0rem 0rem 2rem 0rem;
  background-color: var(--color-order-form-background);
  /* border: 2px solid blue; */
}

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

@media screen and (max-width: 450px) {
  .shopmax__place__order__section {
    position: relative;
    /* top: 12.5rem; */
    top: 0rem;
  }
}

/* ================================================================== */
/* FIXME:  ORDER FORM - HEADER / TITLE                         FIXME: */
/* ================================================================== */

.place__order__form__heading h6 {
  display: flex;
  justify-content: center;
  justify-items: center;
  text-transform: uppercase;
  width: 100%;
  padding: 0.5rem 1rem 0.5rem 1rem;
  background-color: var(--color-order-form-background);
  text-align: center;
  /* border: 2px solid purple; */
}

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

.place__order__form__sub__heading p {
  display: flex;
  justify-content: center;
  justify-items: center;
  font-size: 1.2rem;
  text-transform: uppercase;
  width: 100%;
  margin: -2.75rem 0rem 2rem 0rem;
  padding: 0rem 1rem 0rem 1rem;
  background-color: var(--color-order-form-background);
  text-align: center;
  /* border: 2px solid purple; */
}

/* ===================================================================================================================== */
/* TODO:  ORDER FORM - SECTIONS                                                                                          */
/* ===================================================================================================================== */

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

.order__form__section__title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.2rem;
  background-color: var(--color-order-form-section-heading-background);
  color: var(--color-order-form-section-heading-text);
  margin: 1rem 0.4rem 2rem 0.4rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 0.5rem;
  box-shadow: var(--color-box-shadow-01);
}

/* ========================= */
/* FIXME:  PRIVACY STATEMENT */
/* ========================= */

.order__form__privacy__statement {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 1rem 0.4rem 2rem 0.4rem;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.order__form__privacy__statement strong {
  text-decoration: none;
  color: var(--color-order-form-privacy-and-popi-text);
}

.order__form__privacy__statement a {
  text-decoration: none;
  color: var(--color-order-form-privacy-and-popi-text);
  cursor: pointer;
}

/* =========================== */
/* FIXME:  SHIPPING STATEMENT  */
/* =========================== */

.order__form__delivery__cost {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 1rem 0.4rem 2rem 0.4rem;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.order__form__delivery__cost strong {
  text-decoration: none;
  color: var(--color-order-form-delivery-costs-text);
}

.order__form__delivery__cost a {
  text-decoration: none;
  color: var(--color-order-form-delivery-costs-text);
  cursor: pointer;
}

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

@media screen and (max-width: 430px) {
  .order__form__section__title {
    font-size: 1rem;
    text-align: center;
  }
}

/* ===================================================================================================================== */
/*                         FIXME:  ACCORDIAN - FOR EXTRA PRODUCTS TO ORDER (START)  FIXME:                               */
/* ===================================================================================================================== */

.add_products_to_order_accordian {
  width: 95%;
  max-width: 128rem;
  /* margin: 2rem auto 2rem auto; */
  margin: 2rem 2rem 2rem 2.5rem;
  /* border: 1px solid green; */
}

@media screen and (max-width: 830px) {
  .add_products_to_order_accordian {
    margin: 2rem auto 2rem auto;
  }
}

/* ===================================================================================================================== */
/* TODO:  ACCORDIAN (OPEN & CLOSES) - CONTAINER HOLDING ALL ELEMENTS (ADD MORE PRODUCTS & QUANTITIES TO THE ORDER LIST)  */
/* ===================================================================================================================== */

.add_products_to_order_accordian_item {
  background-color: var(--color-order-form-accordian-background);
  color: var(--color-order-form-accordian-text);
  margin: 1rem 0rem 1rem 0rem;
  border-radius: 0.5rem;
  box-shadow: var(--color-box-shadow-01);
}

/* ===================================================================================================================== */
/* TODO:  ACCORDIAN (OPEN & CLOSES) - HEADER / TITLE                                                                     */
/* ===================================================================================================================== */

.add_products_to_order-accordian-item-header {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  min-height: 3.5rem;
  line-height: 1.25rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  padding: 0.5rem 3rem 0.5rem 1rem;
  cursor: pointer;
}

/* FIXME:  NOTE:  THE CSS ENTITY CODE FOR PLUS SIGN "+" = "\002B" */
/* FIXME:  NOTE:  THE CSS ENTITY CODE FOR DOWN ARROW "v" = \25BE */

.add_products_to_order-accordian-item-header::after {
  /* content: "\25BE"; */
  content: "\002B";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
  color: var(--color-order-form-accordian-plus-and-minus-sign);
  transition: transform 0.5s ease-in-out;
}

/* FIXME:  NOTE:  THE CSS ENTITY CODE FOR MINUS SIGN "-" = "\2212" */

.add_products_to_order-accordian-item-header.active::after {
  /* transform: rotate(-180deg); */
  content: "\2212";
  transform: none;
}

.add_products_to_order-accordian-item-header.active {
  color: var(--color-order-form-accordian-plus-and-minus-sign);
}

/* ===================================================================================================================== */
/* TODO:  ACCORDIAN (OPEN & CLOSES) - ITEMS CONTAINER                                                                    */
/* ===================================================================================================================== */

.add_products_to_order-accordian-item-body {
  /* display: none; */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.add_products_to_order_accordian-item-body {
  /* display: none; */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* ===================================================================================================================== */
/* TODO:  MEDIA QUERY (LARGER DEVICES)                                                                                   */
/* ===================================================================================================================== */

@media screen and (max-width: 430px) {
  .add_products_to_order-accordian-item-header {
    font-size: 1rem;
    justify-content: center;
    text-align: center;
  }
}

/* ===================================================================================================================== */
/*                            FIXME:  ACCORDIAN - FOR EXTRA PRODUCTS TO ORDER (END)  FIXME:                              */
/* ===================================================================================================================== */

/* ===================================================================================================================== */
/* TODO:  ORDER FORM ELEMENTS                                                                                            */
/* ===================================================================================================================== */

/* ============================================== */
/* FIXME:  FORM CONTAINER  FIXME:                 */
/* ============================================== */

/* ============================================== */
/* FIXME:  FORM LABEL  FIXME:                     */
/* ============================================== */

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

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

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

/* ============================================== */
/* FIXME:  INPUT FIELD TYPE =  TEXT  FIXME:       */
/* e.g. "NAME" or "LAST NAME" etc.                */
/* ============================================== */

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

.order__form__section__element input[type="text"]:focus {
  border-color: var(--color-order-form-input-field-border-focus);
  box-shadow: var(--color-order-form-input-field-border-focus-box-shadow);
  outline: 0;
}

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

/* ============================================== */
/* FIXME:  INPUT FIELD TYPE =  TEL  FIXME:        */
/* e.g. "TELEPHONE" or "MOBILE" Number etc.       */
/* ============================================== */

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

.order__form__section__element input[type="tel"]:focus {
  border-color: var(--color-order-form-input-field-border-focus);
  box-shadow: var(--color-order-form-input-field-border-focus-box-shadow);
  outline: 0;
}

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

/* ========================================== */
/* FIXME:  INPUT FIELD TYPE =  EMAIL  FIXME:  */
/* ========================================== */

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

.order__form__section__element input[type="email"]:focus {
  border-color: var(--color-order-form-input-field-border-focus);
  box-shadow: var(--color-order-form-input-field-border-focus-box-shadow);
  outline: 0;
}

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

/* ============================================== */
/* FIXME:  INPUT FIELD TYPE =  TEXTAREA  FIXME:   */
/* Runs over multiple lines (rows) e.g. "Address" */
/* ============================================== */

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

.order__form__section__element textarea:focus {
  border-color: var(--color-order-form-input-field-border-focus);
  box-shadow: var(--color-order-form-input-field-border-focus-box-shadow);
  outline: 0;
}

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

/* ============================================== */
/* FIXME:  INPUT FIELD TYPE =  NUMBER  FIXME:     */
/* ============================================== */

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

.order__form__section__element input[type="number"]:focus {
  border-color: var(--color-order-form-input-field-border-focus);
  box-shadow: var(--color-order-form-input-field-border-focus-box-shadow);
  outline: 0;
}

/* ============================================== */
/* FIXME:  INPUT FIELD TYPE =  DATE  FIXME:       */
/* ============================================== */

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

.order__form__section__element input[type="date"]:focus {
  border-color: var(--color-order-form-input-field-border-focus);
  box-shadow: var(--color-order-form-input-field-border-focus-box-shadow);
  outline: 0;
}

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

/* ============================================== */
/* FIXME:  INPUT FIELD = DROPDOWN LIST     FIXME: */
/* e.g. Countries, Provinces, Titles etc.         */
/* ============================================== */

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

.order__form__section__element select:focus {
  border-color: var(--color-order-form-input-field-border-focus);
  box-shadow: var(--color-order-form-input-field-border-focus-box-shadow);
  outline: 0;
}

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

/* ========================================================================= */
/* TODO:  START STYLING OF CUSTOM CHECKBOX                                   */
/* ========================================================================= */

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

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

label.order__form__checkbox__option {
  display: grid;
  text-transform: initial;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-order-form-checkbox-label);
}

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

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

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

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

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

/* ======================================= */
/* CUSTOM CHECKBOX - CHECKED STATE         */
/* ======================================= */

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

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

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

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

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

.order__form__checkbox__option--disabled {
  color: var(--color-order-form-checkbox-disabled);
  cursor: not-allowed;
}

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

/* ========================================================================= */
/* TODO:  END OF STYLING OF CUSTOM CHECKBOX                                  */
/* ========================================================================= */

/* ========================================================================= */
/* TODO: START STYLING OF CUSTOM FILE-UPLOAD                                 */
/* ========================================================================= */

/* ============================================== */
/* FIXME: INPUT FIELD TYPE = FILE          FIXME: */
/* ============================================== */

.order__form__file-input {
  display: inline-block;
  margin: 1rem 1.4rem 1rem 1.4rem;
  padding: 1rem 1rem 1rem 1rem;
  text-align: left;
  background: var(--color-order-form-file-upload-background);
  /* width: 450px; */
  width: 96%;
  position: relative;
  border-radius: 0.5rem;
  box-shadow: var(--color-box-shadow-02), var(--color-box-shadow-01);
}

/* ============================================== */
/* HIDING THE NATIVE FILE UPLOADER                */
/* ============================================== */

.order__form__file-input > [type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
  cursor: pointer;
}

/* ============================================ */
/* STYLE AND DISPLAY THE CUSTOM FILE UPLOADER   */
/* ============================================ */

.order__form__file-input > .order__form__button {
  /* display: inline-block; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0rem 0.5rem 0.75rem 0.5rem;
  padding: 0.8rem 1rem 0.8rem 1rem;
  font-size: 1.3rem;
  font-weight: 500;
  background: var(--color-order-form-file-upload-background);
  border-radius: 0.5rem;
  box-shadow: var(--color-box-shadow-02), var(--color-box-shadow-01);
  cursor: pointer;
}

.order__form__file-input:hover > .order__form__button {
  background: var(--color-order-form-file-upload-background-hover);
  color: var(--color-order-form-file-upload-background-text);
}

.order__form__file-input > .order__form__label {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0.5rem 0rem 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-order-form-file-upload-label-text);
  white-space: nowrap;
  /* opacity: 0.5; */
}

.order__form__file-input.-chosen > .order__form__label {
  opacity: 1;
}

.order__form__file-input .fa {
  font-size: 1.8rem;
  margin: 0rem 1rem 0rem 0rem;
}

label .order__form__label__strong {
  color: var(--color-order-form-file-upload-label-text);
}

/* ========================================================================= */
/* TODO:  END OF STYLING OF CUSTOM FILE-UPLOAD                               */
/* ========================================================================= */

/* ================================================== */
/* FIXME:  FORM BUTTONS (SUBMISSION & CLEAR)  FIXME:  */
/* ================================================== */

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

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

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

/* ================================================== */
/* FIXME:  FORM BUTTONS (PAYMENT OPTIONS)     FIXME:  */
/* ================================================== */

/* ============================== */
/* PAYFAST & YOCO PAYMENT OPTIONS */
/* ============================== */

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

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

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

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

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

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

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

/* =============================================================== */
/* FIXME:  FINAL MEDIA QUERY - REGISTRATION FORM (SMALLER SCREENS) */
/* =============================================================== */

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

  .order__form__submit__button__container {
    flex-direction: column;
  }

  .order__form__file-input {
    margin: 1rem 0.2rem 1rem 0.2rem;
  }

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

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

  .order__form__checkbox__option {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 2rem 2rem 2rem 0.1rem;
    /* border: 1px solid red; */
  }

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

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

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

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

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

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

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

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* FIXME:FIXME:                             SECTION - SERVICE ORDER FORM (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: */
/* ===================================================================================================================== */