/* ===================================================================================================================== */ /* TODO: STYLING FOR DEBT MASTERS (PTY) LTD */ /* ===================================================================================================================== */ /* ========================================================== */ /* FIXME: COLOR SCHEMES USED ON DEBT MASTERS WEBSITE FIXME: */ /* ========================================================== */ :root { /* ========================================================= */ /* SHADES OF GREY COLOUR SCHEMES (FOR PAGE BACKGROUNDS) */ /* ========================================================= */ --color-section-background-01-grey: #808080; --color-section-background-02-gainsboro: #dcdcdc; --color-section-background-03-lightgrey: #d3d3d3; --color-section-background-04-silver: #c0c0c0; --color-section-background-05-platinum: #e5e4e2; --color-section-background-06-darkgrey: #a9a9a9; --color-section-background-07-lightslategrey: #778899; --color-section-background-08-slategrey: #708090; --color-section-background-09-dimgrey: #696969; --color-section-background-10-isabelline: #f4f0ec; --color-section-background-11-timberwolf: #dbd7d2; --color-section-background-12-lavendergrey: #c4c3d0; --color-section-background-13-pastelgrey: #cfcfc4; --color-section-background-14-palesilver: #c9c0bb; --color-section-background-15-ashgrey: #b2beb5; --color-section-background-16-cadetgrey: #91a3b0; --color-section-background-17-gunmetalgrey: #818589; --color-section-background-18-gunmetalgrey: #818589; --color-section-background-19-smoke: #848884; --color-section-background-20-steelgrey: #71797e; /* ========================================================= */ /* SHADES OF WHITE COLOUR SCHEMES (FOR PAGE BACKGROUNDS) */ /* ========================================================= */ --color-section-background-21-white: #ffffff; --color-section-background-22-vanilla: #f3e5ab; --color-section-background-23-seashell: #fff5ee; --color-section-background-24-pearl: #e2dfd2; --color-section-background-25-peach: #ffe5b4; --color-section-background-26-parhment: #fcf5e5; --color-section-background-27-offwhite: #faf9f6; --color-section-background-28-navajowhite: #ffdead; --color-section-background-29-linen: #e9dcc9; --color-section-background-30-ivory: #fffff0; --color-section-background-31-eggshell: #f0ead6; --color-section-background-32-cream: #fffdd0; --color-section-background-33-cornsilk: #fff8dc; --color-section-background-34-bonewhite: #f9f6ee; --color-section-background-35-beige: #f5f5dc; --color-section-background-36-alabaster: #edeade; /* ================================================ */ /* 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: GENERAL CORPORATE COLORS - DEBT MASTERS */ /* ================================================ */ --color-debt-masters-dark-blue: #0b1128; --color-debt-masters-light-blue: #065bb3; /* ================================================ */ /* FIXME: SOCIAL MEDIA COLOR SCHEMES */ /* ================================================ */ --color-facebook1: #1877f2; --color-facebook2: #3b5998; --color-instagram: #c32aa3; --color-twitter: #1da1f2; --color-linkedin: #0a66c2; --color-tiktok-pink: #ff0050; --color-tiktok-aqua: #00f2ea; --color-tiktok-black: #000000; --color-youtube: #ff0000; --color-whatsapp: #25d366; --color-telegram: #0088cc; --color-email: #555555; /* ------------------------------------------------ */ /* 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-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: 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: 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; */ /* =================================================== */ /* END OF COLOR SCHEMES */ /* =================================================== */ } /* ===================================================== */ /* 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 */ /* ======================================================================================================================= */ * { 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; } .horizontal__row__height { height: 0.1rem; border: none; background-color: white; margin: 0rem 0rem 0rem 0rem; } /* @media screen and (max-width: 650px) { .horizontal__row__height { display: none; background-color: white; } } */ /* ===================================================================================================================== */ /* 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 NAVIGATION BAR TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ================================================ */ /* FIXME: COLOR SCHEME - NAVIGATION */ /* ================================================ */ --color-navigation-bar-background: #ffffff; --color-navigation-social-media-icons: #ffffff; --color-navigation-social-media-icons-hover: #ffffff; --color-navigation-social-media-icons-background: #ffffff; /* ===================================================== */ /* FIXME: CORPORATE COLORS OF ORGANISATION - SEE TOP */ /* ===================================================== */ /* ===================================================== */ /* FIXME: COLOR SCHEME - SOCIAL MEDIA ICONS - SEE TOP */ /* ===================================================== */ } /* ======================================================= */ /* FIXME: 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: var(--color-navigation-bar-background); z-index: 50; /* border: 1px solid green; */ } /* =============================================================================== */ /* FIXME: 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, NAVIGATION, SOCIAL MEDIA ICONS (START) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO: PART 1 - CONTAINER (ALL) - HOLDING ALL ELEMENTS TOGETHER (LOGO, NAVIGATION AND SOCIAL MEDIA LINKS) */ /* ===================================================================================================================== */ .top_bar_container_all { position: relative; display: grid; /* grid-template-columns: 4fr 12fr 5fr; */ grid-template-columns: 2fr 12fr 5fr; max-width: 100%; height: 8rem; margin: 1rem 0rem 1rem 0rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid blue; */ } /* =================================================== */ /* FIXME: RESPONSIVE DESIGN - SMALLER SCREENS FIXME: */ /* =================================================== */ /* =========================== */ /* FIXME: BREAKPOINT: 830 px */ /* =========================== */ @media screen and (max-width: 830px) { .top_bar_container_all { display: flex; flex-direction: column; } } /* ===================================================================================================================== */ /* TODO: PART 2 - CONTAINER (LOGO) - DEBT MASTERS LOGO */ /* ===================================================================================================================== */ /* ========================================================= */ /* FIXME: DEBT MASTER 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: 8rem; /* border: 1px solid red; */ } .top_bar_container_image .top_bar_debt_masters_logo { display: block; width: 100%; height: 8rem; object-fit: contain; padding: 0.2rem 0.2rem 0.2rem 0.2rem; /* border: 1px solid purple; */ } /* ===================================================================================================================== */ /* TODO: PART 3 - CONTAINER (NAVIGATION) - NAVIGATION */ /* ===================================================================================================================== */ /* =================================================== */ /* FIXME: MAIN CONTAINER - HOLDING EVERYTHING FIXME: */ /* =================================================== */ .top_navigation_links_container { display: flex; justify-content: center; align-items: center; width: 100%; height: 8rem; margin: 0rem 0rem 0rem 0rem; padding: 0rem 0rem 0rem 0rem; /* border: 2px solid red; */ } /* .debt__review__process, */ .about__us, .request__call__back__top, .contact__us { display: flex; justify-content: center; align-items: center; margin: 0rem 1rem 0rem 1rem; padding: 0rem 1rem 0rem 1rem; /* border: 1px solid orange; */ } /* .debt__review__process a, */ .about__us a, .request__call__back__top a, .contact__us a { display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 600; text-transform: uppercase; text-decoration: none; color: var(--color-debt-masters-dark-blue); cursor: pointer; } /* .debt__review__process a:hover, */ .about__us a:hover, .request__call__back__top a:hover, .contact__us a:hover { color: var(--color-debt-masters-light-blue); } /* ======================================================= */ /* TODO:TODO: NAVIGATION DROP-DOWN MENU BELOW TODO:TODO: */ /* ======================================================= */ /* ========================================================================= */ /* TODO: SECTION - DROP-DOWN NAVIGATION */ /* ========================================================================= */ :root { /* ================================================ */ /* FIXME: COLOR SCHEME - NAVIGATION */ /* ================================================ */ --color-navigation-bar-background: #ffffff; --color-navigation-text-option-1: #065bb3; --color-navigation-text-option-1-hover: #0b1128; --color-navigation-text-option-2: #0b1128; --color-navigation-text-option-2-hover: #065bb3; --color-navigation-box-shadow-01: 3px 5px 20px rgba(0, 0, 0, 0.35); --color-navigation-box-shadow-02: 0px 5px 4px rgba(0, 0, 0, 0.35); --color-navigation-box-shadow-03: 0px 1px 5px 3px rgba(0, 0, 0, 0.15); --color-navigation-box-shadow-04: 0px 5px 20px rgba(0, 0, 0, 0.35); --color-navigation-background-horisontal: #ffffff; --color-navigation-background-vertical: #ffffff; --color-navigation-background-sub-menu-1: #f7f7f7; --color-navigation-background-sub-menu-2: #faf9f6; --color-navigation-background-sub-menu-3: #fffff0; --color-navigation-background-sub-menu-4: #edeade; } /* ================================================================== */ /* FIXME: NAVIGATION BAR CONTAINER (HOLDING ALL NAVIGATION ELEMENTS */ /* ================================================================== */ .navigation__container { margin: 0 0 0 0; padding: 0 0 0 0; display: flex; justify-content: center; align-items: center; background-color: var(--color-navigation-background-horisontal); color: var(--color-navigation-background-horisontal); width: 100vw; /* border: 1px solid greenyellow; */ } /* FIXME: OPTION 1 : Make "navigation__container" STICKY ON SCROLL */ /* Use this option when there is nothing above the navbor */ .navigation__container { /* A - Add the BROWSER COMPATIBILITY Sets for STICKY */ /* A - Set the POSITION of the navbar to FIXED or STICKY */ /* FIXED - No items above NAVBAR / STICKY - There are Items above NAVBAR */ /* B - Set the position on TOP to ZERO */ position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; top: 0%; } /* ========================================================================= */ /* FIXME: NAVIGATION MAIN LIST-ITEMS / LINKS */ /* ========================================================================= */ .navigation__main__links { margin: 0rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 0rem; display: flex; justify-content: center; align-items: center; background-color: var(--color-navigation-background-horisontal); gap: 3rem; /* border: 1px solid pink; */ } /* ========================================================================== */ /* FIXME: NAVIGATION - SUB-MENU LINKS (CONTAINER HOLDING ALL SUB-MENU ITEMS) */ /* ========================================================================== */ .debt__review__process { display: flex; justify-content: center; align-items: center; height: 2.5rem; margin: 0rem 1rem 0rem 1rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid orange; */ } .navigation__sub__menu__links { display: flex; flex-direction: column; width: 100%; padding: 0rem 1rem 0rem 0rem; gap: 0.5rem; /* border: 1px solid purple; */ } .navigation__sub__menu__links a:hover { color: var(--color-navigation-text-option-2-hover); } /* ========================================================================== */ /* FIXME: NAVIGATION BUTTONS (LINKS) / TOP-MENU-ITEM & SUB-MENU0ITEMS */ /* ========================================================================== */ /* =========================== */ /* TODO: TOP-MENU-ITEM TODO: */ /* =========================== */ .navigation__button { background: none; border: none; text-decoration: none; text-transform: uppercase; color: var(--color-navigation-text-option-2); font-family: "Poppins"; font-style: normal; font-size: 1.5rem; font-weight: 600; cursor: pointer; margin: 0rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; /* border: 1px solid orange; */ } /* ============================ */ /* TODO: SUB-MENU-ITEMS TODO: */ /* ============================ */ .navigation__button.alternative { text-transform: none; font-weight: 500; } .navigation__button.alternative strong { color: var(--color-navigation-text-option-2); } .navigation__button.alternative strong:hover { color: var(--color-navigation-text-option-2-hover); } /* ======================================= */ /* TODO:TODO: JAVASCRIPT CODE TODO:TODO: */ /* ======================================= */ .navigation__dropdown.active > .navigation__button, .navigation__button:hover { color: var(--color-navigation-text-option-2-hover); font-weight: 600; } .navigation__dropdown { position: relative; } /* ========================================================================== */ /* FIXME: DROPDOWN-MENU APPEARANCE - ACTIONS AND STYLES (WHEN NON-ACTIVE) */ /* ========================================================================== */ .navigation__dropdown__menu { opacity: 0; position: absolute; left: 0; top: calc(100% + 0.5rem); /* width: max-content; */ width: 18.5rem; padding: 1rem 0.25rem 1rem 0.25rem; border-radius: 0.75rem; pointer-events: none; transform: translateY(-0.5rem); transition: opacity 175ms ease-in-out, transform 175ms ease-in-out; box-shadow: var(--color-navigation-box-shadow-01); background-color: var(--color-navigation-background-sub-menu-2); /* border: 1px solid red; */ z-index: 1; } /* ========================================================================== */ /* FIXME: DROPDOWN-MENU APPEARANCE - ACTIONS AND STYLES (WHEN ACTIVE) */ /* ========================================================================== */ /* TODO: COMMENTS TODO: */ /* SET OPACITY TO 1 SO THAT THE "navigation__dropdown__menu" CAN DISPLAY WHEN ACTIVE */ /* HOW TO READ BELOW STATEMENT: SELECT THE "navigation__button" LINK THAT IS INSIDE THE "navigation__dropdown TO DISPLAY THE "navigation__dropdown__menu", WHENEVER THE "navigation__button" LINK IS FOCUSSED */ /* ======================================= */ /* TODO:TODO: JAVASCRIPT CODE TODO:TODO: */ /* ======================================= */ .navigation__dropdown.active > .navigation__button + .navigation__dropdown__menu { opacity: 1; transform: translateY(0); pointer-events: auto; } /* ======================================================= */ /* TODO:TODO: NAVIGATION DROP-DOWN MENU ABOVE TODO:TODO: */ /* ======================================================= */ /* =================================================== */ /* FIXME: RESPONSIVE DESIGN - SMALLER SCREENS FIXME: */ /* =================================================== */ /* ============================ */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================ */ @media screen and (max-width: 1050px) { .about__us, /* .debt__review__process, */ .request__call__back__top, .contact__us { margin: 0rem 0.5rem 0rem 0.5rem; padding: 0rem 1rem 0rem 1rem; } .debt__review__process { margin: 0rem 0.5rem 0rem 0.5rem; } .navigation__button { padding: 0rem 1rem 0rem 1rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 990 px */ /* =========================== */ @media screen and (max-width: 990px) { .about__us, /* .debt__review__process, */ .request__call__back__top, .contact__us { margin: 0rem 0.5rem 0rem 0.5rem; padding: 0rem 1rem 0rem 1rem; } .debt__review__process { margin: 0rem 0.5rem 0rem 0.5rem; height: 2.3rem; padding: 0rem 0rem 0.1rem 0rem; } .navigation__button { padding: 0rem 1rem 0rem 1rem; font-size: 1.4rem; } .navigation__dropdown__menu { width: 17rem; } .about__us a, /* .debt__review__process a, */ .request__call__back__top a, .contact__us a { font-size: 1.4rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 940 px */ /* =========================== */ @media screen and (max-width: 940px) { .about__us a, /* .debt__review__process a, */ .request__call__back__top a, .contact__us a { font-size: 1.35rem; } .navigation__button { font-size: 1.35rem; } .navigation__dropdown__menu { width: 16.5rem; } .debt__review__process { height: 2.25rem; padding: 0rem 0rem 0.3rem 0rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 925 px */ /* =========================== */ @media screen and (max-width: 925px) { .about__us a, /* .debt__review__process a, */ .request__call__back__top a, .contact__us a { font-size: 1.3rem; } .navigation__button { font-size: 1.3rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 900 px */ /* =========================== */ @media screen and (max-width: 900px) { .about__us, /* .debt__review__process, */ .request__call__back__top, .contact__us { margin: 0rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; } .debt__review__process { margin: 0rem 0rem 0rem 0rem; height: 2.25rem; padding: 0rem 0rem 0.3rem 0rem; } .navigation__dropdown__menu { width: 16rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 860 px */ /* =========================== */ @media screen and (max-width: 860px) { .about__us a, /* .debt__review__process a, */ .request__call__back__top a, .contact__us a { font-size: 1.2rem; } .navigation__button { font-size: 1.2rem; } .debt__review__process { margin: 0rem 0rem 0rem 0rem; height: 2rem; padding: 0rem 0rem 0.3rem 0rem; } .navigation__dropdown__menu { width: 15rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 830 px */ /* =========================== */ @media screen and (max-width: 830px) { .top_navigation_links_container { max-width: 100%; margin: 1rem auto 1rem auto; padding: 1rem 0rem 1rem 0rem; order: 3; } .about__us, /* .debt__review__process, */ .request__call__back__top, .contact__us { margin: 0rem 0.5rem 0rem 0.5rem; padding: 0rem 1rem 0rem 1rem; } .about__us a, /* .debt__review__process a, */ .request__call__back__top a, .contact__us a { font-size: 1.4rem; } .navigation__button { font-size: 1.4rem; } .debt__review__process { margin: 0rem 0.5rem 0rem 0.5rem; height: 2.3rem; padding: 0rem 0rem 0.3rem 0rem; } .navigation__dropdown__menu { width: 17rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 650 px */ /* =========================== */ @media screen and (max-width: 650px) { .top_navigation_links_container { display: flex; flex-direction: column; max-width: 100%; margin: 1rem auto 1rem auto; padding: 1rem 0rem 1rem 0rem; height: auto; row-gap: 0.5rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 520 px */ /* =========================== */ @media screen and (max-width: 520px) { .top_navigation_links_container { max-width: 100%; margin: 1rem auto 1rem auto; } } /* =========================== */ /* FIXME: BREAKPOINT: 400 px */ /* =========================== */ @media screen and (max-width: 400px) { .top_navigation_links_container { max-width: 100%; } } /* =========================== */ /* FIXME: BREAKPOINT: 350 px */ /* =========================== */ @media screen and (max-width: 350px) { .top_navigation_links_container { width: 100%; } } /* =========================== */ /* FIXME: BREAKPOINT: 320 px */ /* =========================== */ @media screen and (max-width: 320px) { .top_navigation_links_container { width: 100%; } } /* =========================== */ /* FIXME: BREAKPOINT: 300 px */ /* =========================== */ @media screen and (max-width: 300px) { .top_navigation_links_container { width: 100%; } } /* ===================================================================================================================== */ /* 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: 8rem; /* 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.8rem; line-height: 1.8rem; transition: 0.6s; color: var(--color-navigation-social-media-icons); } .top_bar_social-media ul li .bx:hover { color: var(--color-navigation-social-media-icons-hover); } .top_bar_social-media ul li a { position: relative; display: block; width: 3rem; height: 3rem; border-radius: 50%; /* background-color: var(--color-navigation-social-media-icons-background); */ /* background-color: var(--color-debt-masters-dark-blue); */ background-color: var(--color-debt-masters-light-blue); 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 */ /* ============================== */ .top_bar_social-media ul li:nth-child(1) a:hover { /* background-color: var(--color-facebook2); */ /* background-color: var(--color-debt-masters-light-blue); */ background-color: var(--color-debt-masters-dark-blue); } /* =============================== */ /* IMPLEMENT ON HOVER - INSTAGRAM */ /* =============================== */ .top_bar_social-media ul li:nth-child(2) a:hover { /* background-color: var(--color-instagram); */ /* background-color: var(--color-debt-masters-light-blue); */ background-color: var(--color-debt-masters-dark-blue); } /* ============================= */ /* IMPLEMENT ON HOVER - TWITTER */ /* ============================= */ .top_bar_social-media ul li:nth-child(3) a:hover { /* background-color: var(--color-twitter); */ /* background-color: var(--color-debt-masters-light-blue); */ background-color: var(--color-debt-masters-dark-blue); } /* ============================== */ /* IMPLEMENT ON HOVER - LINKEDIN */ /* ============================== */ .top_bar_social-media ul li:nth-child(4) a:hover { /* background-color: var(--color-linkedin); */ /* background-color: var(--color-debt-masters-light-blue); */ background-color: var(--color-debt-masters-dark-blue); } /* ============================ */ /* IMPLEMENT ON HOVER - TIKTOK */ /* ============================ */ .top_bar_social-media ul li:nth-child(5) a:hover { /* background-color: var(--color-tiktok-black); */ /* background-color: var(--color-debt-masters-light-blue); */ background-color: var(--color-debt-masters-dark-blue); } /* ============================= */ /* IMPLEMENT ON HOVER - YOUTUBE */ /* ============================= */ .top_bar_social-media ul li:nth-child(6) a:hover { /* background-color: var(--color-youtube); */ /* background-color: var(--color-debt-masters-light-blue); */ background-color: var(--color-debt-masters-dark-blue); } /* ===================================================================================================================== */ /* TODO: PART 6 - RESPONSIVE / MOBILE VIEW (ALL MEDIA QUERIES) - FOR 2ND COMPONENT */ /* ===================================================================================================================== */ /* =========================== */ /* FIXME: BREAKPOINT: 830 px */ /* =========================== */ @media screen and (max-width: 830px) { .top_bar_social-media ul li { margin: 2rem 2rem 1rem 2rem; order: 2; } } /* =========================== */ /* FIXME: BREAKPOINT: 520 px */ /* =========================== */ @media screen and (max-width: 520px) { .top_bar_social-media ul li { margin: 2rem 1.8rem 1rem 1.8rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 450 px */ /* =========================== */ @media screen and (max-width: 450px) { .top_bar_social-media ul li { margin: 2rem 1.7rem 1rem 1.7rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 400 px */ /* =========================== */ @media screen and (max-width: 400px) { .top_bar_social-media ul li { margin: 2rem 1.4rem 1rem 1.4rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 350 px */ /* =========================== */ @media screen and (max-width: 350px) { .top_bar_social-media ul li { margin: 2rem 1rem 1rem 1rem; /* transform: scale(0.75); */ } } /* =========================== */ /* FIXME: BREAKPOINT: 320 px */ /* =========================== */ @media screen and (max-width: 320px) { .top_bar_social-media ul li { margin: 2rem 0.75rem 1rem 0.75rem; /* transform: scale(0.75); */ } } /* =========================== */ /* FIXME: BREAKPOINT: 300 px */ /* =========================== */ @media screen and (max-width: 300px) { .top_bar_social-media ul li { margin: 2rem 0.6rem 1rem 0.6rem; /* transform: scale(0.75); */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION - LOGO, NAVIGATION, SOCIAL MEDIA ICONS (END) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION - HERO BANNER (START) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ================================================ */ /* FIXME: COLOR SCHEME - HERO BANNERS */ /* ================================================ */ --color-slide-layer-above-for-text-opacity: rgba(0, 0, 0, 0.1); --color-slide-text-title: #ffffff; --color-slide-text-content: #ffffff; --color-slide-text-button: #ffffff; --color-slide-text-button-hover: #ffffff; --color-slide-text-button-background: #065bb3; --color-slide-text-button-background-hover: #065bb3; --color-slide-text-button-border: #ffffff; --color-slide-arrows: #065bb3; --color-slide-arrows-hover: #000000; --color-slide-dots-background-active: #065bb3; --color-slide-dots-background-active-border: #ffffff; --color-slide-dots-background-not-active: #ffffff; --color-slide-dots-background-not-active-border: #ffffff; --color-slide-dots-background-not-active-hover: #065bb3; } .debt__masters__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: 2px solid yellow; */ } /* ============================================================ */ /* MEDIA QUERIES FOR RESPONSIVE DESIGN - FOR OTHER SCREEN SIZES */ /* ============================================================ */ /* ============================ */ /* FIXME: BREAKPOINT: 830 px */ /* ============================ */ @media screen and (max-width: 830px) { .debt__masters__main__hero__banner { top: 11rem; } } /* ============================ */ /* FIXME: BREAKPOINT: 650 px */ /* ============================ */ @media screen and (max-width: 650px) { .debt__masters__main__hero__banner { position: relative; top: 19.5rem; } } /* ============================ */ /* FIXME: BREAKPOINT: 450 px */ /* ============================ */ @media screen and (max-width: 450px) { .debt__masters__main__hero__banner { position: relative; top: 19.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: var(--color-slide-layer-above-for-text-opacity); 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; 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-title); 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; color: var(--color-slide-text-content); z-index: 2; } .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; color: var(--color-slide-text-button); padding: 0.2rem 1rem 0.2rem 1rem; transition: 0.4s linear; border-radius: 0.5rem; background: var(--color-slide-text-button-background); outline: none; border: 1px solid var(--color-slide-text-button-border); z-index: 2; cursor: pointer; } .slide-data .slide__button a:hover { background-color: var(--color-slide-text-button-background-hover); color: var(--color-slide-text-button-hover); } /* ===================================================================================================================== */ /* 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-slide-arrows); transition: 0.4s linear; z-index: 3; cursor: pointer; } .slider .arrows:hover { text-shadow: 0px 0px 10px var(--color-slide-arrows-hover), 0px 0px 10px var(--color-slide-arrows-hover); } .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-slide-dots-background-not-active); display: inline-block; transition: 0.4s linear; z-index: 3; cursor: pointer; } .dots span:hover { background-color: var( --color-slide-dots-background-not-active-hover ) !important; border: 2px solid var(--color-slide-dots-background-not-active-border); } .dot-active { background-color: var(--color-slide-dots-background-active) !important; border: 2px solid var(--color-slide-dots-background-active-border); } /* ===================================================================================================================== */ /* TODO: PART 7 - RESPONSIVE DESIGN - MEDIA QUERIES - FOR LARGER SCREENS (LAPTOPS / PC's / TV's etc.) */ /* ===================================================================================================================== */ /* ================================== */ /* FIXME: VIEW - ON LARGER SCREENS */ /* ================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 225 px */ /* ============================= */ @media screen and (min-width: 225px) { .slider { min-height: 11vh; top: 0rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 250 px */ /* =========================== */ @media screen and (min-width: 250px) { .slider { min-height: 12vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 279 px */ /* ============================= */ @media screen and (min-width: 279px) { .slider { min-height: 13vh; top: 0rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 280 px */ /* =========================== */ @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 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; } } /* ========================================================== */ /* FIXME: BREAKPOINT: 280 px - 653 px (SAMSUNG GALAXY FOLD) */ /* ========================================================== */ @media screen and (min-width: 280px) and (min-height: 653px) { .slider { min-height: 14.5vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 281 px */ /* ============================= */ @media screen and (min-width: 281px) { .slider { min-height: 13.5vh; top: 0rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 290 px */ /* ============================= */ @media screen and (min-width: 290px) { .slider { min-height: 14vh; top: 0rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 325 px */ /* ============================= */ @media screen and (min-width: 325px) { .slider { min-height: 15.5vh; top: 0rem; } } /* =========================== */ /* FIXME: BREAKPOINT: 350 px */ /* =========================== */ @media screen and (min-width: 350px) { .slider { min-height: 17vh; } .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 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; } } /* ======================================================== */ /* FIXME: BREAKPOINT: 360 px - 740 px (SAMSUNG GALAXY S8+ */ /* ======================================================== */ @media screen and (min-width: 360px) and (min-height: 740px) { .slider { min-height: 16.5vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 374 px */ /* ============================= */ @media screen and (min-width: 374px) { .slider { min-height: 18vh; top: 0rem; } } /* ================================================ */ /* FIXME: BREAKPOINT: 375 px - 667 px (IPHONE SE) */ /* ================================================ */ @media screen and (min-width: 375px) and (min-height: 667px) { .slider { min-height: 19vh; } } /* ================================================ */ /* FIXME: BREAKPOINT: 390 px - 844 px (IPHONE 12) */ /* ================================================ */ @media screen and (min-width: 390px) and (min-height: 844px) { .slider { min-height: 15.6vh; } } /* ============================================== */ /* FIXME: BREAKPOINT: 393 px - 851 px (PIXEL 5) */ /* ============================================== */ @media screen and (min-width: 393px) and (min-height: 851px) { .slider { min-height: 15.5vh; } } /* ============================ */ /* FIXME: BREAKPOINT: 400 px */ /* ============================ */ @media screen and (min-width: 400px) { .slider { min-height: 19.5vh; } .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 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; } } /* ================================================================ */ /* FIXME: BREAKPOINT: 412 px - 914 px (SAMSUNG GALAXY A51 / A71) */ /* ================================================================ */ @media screen and (min-width: 412px) and (min-height: 914px) { .slider { min-height: 15.4vh; } } /* ====================================================================== */ /* FIXME: BREAKPOINT: 414 px - 896 px (IPHONE XR) (SAMSUNG GALAXY S20) */ /* ====================================================================== */ @media screen and (min-width: 414px) and (min-height: 896px) { .slider { min-height: 15.5vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 425 px */ /* ============================= */ @media screen and (min-width: 425px) { .slider { min-height: 20.5vh; top: 0rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (min-width: 450px) { .slider { min-height: 22vh; top: 0rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 475 px */ /* ============================= */ @media screen and (min-width: 475px) { .slider { min-height: 23.5vh; top: 0rem; } } /* ============================ */ /* FIXME: BREAKPOINT: 500 px */ /* ============================ */ @media screen and (min-width: 500px) { .slider { min-height: 24.5vh; } .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 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; } } /* ============================= */ /* FIXME: BREAKPOINT: 525 px */ /* ============================= */ @media screen and (min-width: 525px) { .slider { min-height: 26vh; top: 0rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 550 px */ /* ============================= */ @media screen and (min-width: 550px) { .slider { min-height: 27vh; top: 0rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 575 px */ /* ============================= */ @media screen and (min-width: 575px) { .slider { min-height: 29vh; top: 0rem; } } /* ================================================== */ /* FIXME: BREAKPOINT: 540 px - 720 px (SURFACE DUO) */ /* ================================================== */ @media screen and (min-width: 540px) and (min-height: 720px) { .slider { min-height: 25.5vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (min-width: 600px) { .slider { min-height: 30vh; top: 0rem; } .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 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; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (min-width: 650px) { .slider { min-height: 32.5vh; top: 0rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (min-width: 700px) { .slider { min-height: 35vh; } .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 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; } } /* ======================================================= */ /* FIXME: BREAKPOINT: 768 px - 1024 px (APPLE IPAD MINI) */ /* ======================================================= */ @media screen and (min-width: 768px) and (min-height: 1024px) { .slider { min-height: 25.5vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (min-width: 800px) { .slider { min-height: 41vh; } .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 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; } } /* ====================================================== */ /* FIXME: BREAKPOINT: 820 px - 1180 px (APPLE IPAD AIR) */ /* ====================================================== */ @media screen and (min-width: 820px) and (min-height: 1180px) { .slider { min-height: 23.75vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (min-width: 900px) { .slider { min-height: 45vh; } .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 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; } } /* ====================================================== */ /* FIXME: BREAKPOINT: 912 px - 1368 px (SURFACE PRO 7) */ /* ====================================================== */ @media screen and (min-width: 912px) and (min-height: 1368px) { .slider { min-height: 22.75vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (min-width: 1000px) { .slider { min-height: 50vh; } .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 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; } } /* ================================================= */ /* FIXME: BREAKPOINT: 1024 px - 600 px (NEST HUB) */ /* ================================================= */ @media screen and (min-width: 1024px) and (min-height: 600px) { .slider { min-height: 58.25vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 1025 px */ /* ============================= */ @media screen and (min-width: 1025px) { .slider { min-height: 51.5vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 1029 px */ /* ============================= */ @media screen and (min-width: 1029px) { .slider { min-height: 51.5vh; } .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 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; } } /* ============================= */ /* FIXME: BREAKPOINT: 1040 px */ /* ============================= */ @media screen and (min-width: 1040px) { .slider { min-height: 52vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (min-width: 1050px) { .slider { min-height: 53vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 1100 px */ /* ============================= */ @media screen and (min-width: 1100px) { .slider { min-height: 56vh; } .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 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; } } /* ============================= */ /* FIXME: BREAKPOINT: 1150 px */ /* ============================= */ @media screen and (min-width: 1150px) { .slider { min-height: 64vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 1200 px */ /* ============================= */ @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 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; } } /* ============================= */ /* FIXME: BREAKPOINT: 1250 px */ /* ============================= */ @media screen and (min-width: 1250px) { .slider { min-height: 69vh; } } /* ============================= */ /* FIXME: BREAKPOINT: 1280 px */ /* ============================= */ @media screen and (min-width: 1280px) { .slider { min-height: 70.25vh; } } /* ===================================================== */ /* FIXME: BREAKPOINT: 1280 px - 800 px (NEST HUN MAX) */ /* ===================================================== */ @media screen and (min-width: 1280px) and (min-height: 800px) { .slider { min-height: 54.5vh; } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION - HERO BANNER (END) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 1 (START) - ABOUT US TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ --color-section-about-us-background: #ffffff; --color-section-about-us-border-bottom: #e5e4e2; --color-section-about-us-main-header-text: #065bb3; --color-section-about-us-sub-header-text: #0b1128; --color-section-about-us-internal-header-text: #0b1128; --color-section-about-us-internal-description-text: #000000; --color-section-about-us-buttons-background: #0b1128; --color-section-about-us-buttons-text: #ffffff; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 1 - ABOUT US (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* =========================================================== */ /* FIXME: ABOUT US - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* =========================================================== */ .about__us__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-section-about-us-background); /* border-bottom: 1px solid var(--color-section-about-us-border-bottom); */ border-top: 1px solid var(--color-section-about-us-border-bottom); /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .about__us__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .about__us__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .about__us__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .about__us__container { position: relative; top: 19.5rem; } } /* ========================================================== */ /* FIXME: ABOUT US - MAIN TITLE FIXME: */ /* ========================================================== */ .about__us__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-about-us-main-header-text); background-color: var(--color-section-about-us-background); text-align: center; /* border: 2px solid purple; */ } /* ========================================================== */ /* FIXME: ABOUT US - SUB-TITLE FIXME: */ /* ========================================================== */ .about__us__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-about-us-sub-header-text); background-color: var(--color-section-about-us-background); text-align: center; /* border: 2px solid purple; */ } /* ====================================================================== */ /* FIXME: ABOUT US - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ====================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .about__us__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .about__us__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-section-about-us-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .about__us__button a { text-decoration: none; color: var(--color-section-about-us-buttons-text); cursor: pointer; } .about__us__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .about__us__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 1 - ABOUT US (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* =========================================================== */ /* TODO: ABOUT US (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* =========================================================== */ .about__us__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .about__us__content__container { display: flex; flex-direction: column; } } */ /* =========================================================== */ /* TODO: ABOUT US (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* =========================================================== */ .about__us__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .about__us__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .about__us__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .about__us__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .about__us__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .about__us__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .about__us__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .about__us__content__image { padding: 0rem 0rem 51% 0rem; /* width: 96.75%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .about__us__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .about__us__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .about__us__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .about__us__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .about__us__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .about__us__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* =========================================================== */ /* TODO: ABOUT US (CONTENT) - CONTAINER HOLDING ALL TEXT */ /* =========================================================== */ .about__us__content__text__container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 1rem 1rem 1rem 1rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid green; */ } /* ================================================================ */ /* TODO: ABOUT US (CONTENT) - CONTAINER HOLDING ALL TEXT - HEADER */ /* ================================================================ */ .about__us__content__text__header { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid purple; */ } .about__us__content__text__header p { font-size: 1.5rem; font-weight: 700; line-height: 1.5; width: 100%; color: var(--color-section-about-us-internal-header-text); text-transform: uppercase; /* border: 1px solid pink; */ } /* ===================================================================== */ /* TODO: ABOUT US (CONTENT) - CONTAINER HOLDING ALL TEXT - DESCRIPTION */ /* ===================================================================== */ .about__us__content__text__description { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid orange; */ } .about__us__content__text__description p { font-size: 1.5rem; font-weight: 500; line-height: 1.5; width: 100%; color: var(--color-section-about-us-internal-description-text); text-align: justify; /* border: 1px solid orange; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 990 px */ /* ============================= */ @media screen and (max-width: 990px) { .about__us__content__text__header p { font-size: 1.4rem; } .about__us__content__text__description p { font-size: 1.4rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 940 px */ /* ============================= */ @media screen and (max-width: 940px) { .about__us__content__text__header p { font-size: 1.35rem; } .about__us__content__text__description p { font-size: 1.35rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 925 px */ /* ============================= */ @media screen and (max-width: 925px) { .about__us__content__text__header p { font-size: 1.3rem; } .about__us__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 860 px */ /* ============================= */ @media screen and (max-width: 860px) { .about__us__content__text__header p { font-size: 1.2rem; } .about__us__content__text__description p { font-size: 1.2rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .about__us__content__text__header p { font-size: 1.3rem; } .about__us__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .about__us__content__text__header p { font-size: 1.3rem; } .about__us__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .about__us__content__text__header p { font-size: 1.2rem; } .about__us__content__text__description p { font-size: 1.2rem; } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 1 (END) - ABOUT US TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 2 (START) - DEBT REVIEW PROCESS (WHEN TO CONSIDER) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ --color-section-when-to-consider-background: #ffffff; --color-section-when-to-consider-border-bottom: #e5e4e2; --color-section-when-to-consider-main-header-text: #065bb3; --color-section-when-to-consider-sub-header-text: #0b1128; --color-section-when-to-consider-internal-header-text: #0b1128; --color-section-when-to-consider-internal-description-text: #000000; --color-section-when-to-consider-buttons-background: #0b1128; --color-section-when-to-consider-buttons-text: #ffffff; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 2 - DEBT REVIEW PROCESS (WHEN TO CONSIDER) (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ========================================================================================= */ /* FIXME: DEBT REVIEW PROCESS (WHEN TO CONSIDER) - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* ========================================================================================= */ .when__to__consider__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-section-when-to-consider-background); /* border-bottom: 1px solid var(--color-section-when-to-consider-border-bottom); */ border-top: 1px solid var(--color-section-when-to-consider-border-bottom); /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .when__to__consider__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .when__to__consider__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .when__to__consider__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .when__to__consider__container { position: relative; top: 19.5rem; } } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (WHEN TO CONSIDER) - MAIN TITLE FIXME: */ /* ===================================================================== */ .when__to__consider__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-when-to-consider-main-header-text); background-color: var(--color-section-when-to-consider-background); text-align: center; /* border: 2px solid purple; */ } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (WHEN TO CONSIDER) - SUB-TITLE FIXME: */ /* ===================================================================== */ .when__to__consider__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-when-to-consider-sub-header-text); background-color: var(--color-section-when-to-consider-background); text-align: center; /* border: 2px solid purple; */ } /* ==================================================================================================== */ /* FIXME: DEBT REVIEW PROCESS (WHEN TO CONSIDER) - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ==================================================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .when__to__consider__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .when__to__consider__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-section-when-to-consider-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .when__to__consider__button a { text-decoration: none; color: var(--color-section-when-to-consider-buttons-text); cursor: pointer; } .when__to__consider__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .when__to__consider__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 2 - DEBT REVIEW PROCESS (WHEN TO CONSIDER) (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* =================================================================== */ /* TODO: WHEN TO CONSIDER (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* =================================================================== */ .when__to__consider__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .when__to__consider__content__container { display: flex; flex-direction: column; } } */ /* =================================================================== */ /* TODO: WHEN TO CONSIDER (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* =================================================================== */ .when__to__consider__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .when__to__consider__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .when__to__consider__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .when__to__consider__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .when__to__consider__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .when__to__consider__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .when__to__consider__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .when__to__consider__content__image { width: 96.75%; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .when__to__consider__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .when__to__consider__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .when__to__consider__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .when__to__consider__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .when__to__consider__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .when__to__consider__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* =================================================================== */ /* TODO: WHEN TO CONSIDER (CONTENT) - CONTAINER HOLDING ALL TEXT */ /* =================================================================== */ .when__to__consider__content__text__container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 1rem 1rem 1rem 1rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid green; */ } /* ======================================================================== */ /* TODO: WHEN TO CONSIDER (CONTENT) - CONTAINER HOLDING ALL TEXT - HEADER */ /* ======================================================================== */ .when__to__consider__content__text__header { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid purple; */ } .when__to__consider__content__text__header p { font-size: 1.5rem; font-weight: 700; line-height: 1.5; width: 100%; color: var(--color-section-when-to-consider-internal-header-text); text-transform: uppercase; /* border: 1px solid purple; */ } /* ============================================================================= */ /* TODO: WHEN TO CONSIDER (CONTENT) - CONTAINER HOLDING ALL TEXT - DESCRIPTION */ /* ============================================================================= */ .when__to__consider__content__text__description { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid orange; */ } .when__to__consider__content__text__description p { font-size: 1.5rem; font-weight: 500; line-height: 1.5; width: 100%; color: var(--color-section-when-to-consider-internal-description-text); text-align: justify; /* border: 1px solid orange; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 990 px */ /* ============================= */ @media screen and (max-width: 990px) { .when__to__consider__content__text__header p { font-size: 1.4rem; } .when__to__consider__content__text__description p { font-size: 1.4rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 940 px */ /* ============================= */ @media screen and (max-width: 940px) { .when__to__consider__content__text__header p { font-size: 1.35rem; } .when__to__consider__content__text__description p { font-size: 1.35rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 925 px */ /* ============================= */ @media screen and (max-width: 925px) { .when__to__consider__content__text__header p { font-size: 1.3rem; } .when__to__consider__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 860 px */ /* ============================= */ @media screen and (max-width: 860px) { .when__to__consider__content__text__header p { font-size: 1.2rem; } .when__to__consider__content__text__description p { font-size: 1.2rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .when__to__consider__content__text__header p { font-size: 1.3rem; } .when__to__consider__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .when__to__consider__content__text__header p { font-size: 1.3rem; } .when__to__consider__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .when__to__consider__content__text__header p { font-size: 1.2rem; } .when__to__consider__content__text__description p { font-size: 1.2rem; } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 2 (END) - DEBT REVIEW PROCESS (WHEN TO CONSIDER) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 3 (START) - DEBT REVIEW PROCESS (THE PURPOSE) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ --color-section-the-purpose-background: #ffffff; --color-section-the-purpose-border-bottom: #e5e4e2; /* --color-section-the-purpose-main-header-text: #065bb3; */ --color-section-the-purpose-main-header-text: #ffffff; --color-section-the-purpose-sub-header-text: #0b1128; --color-section-the-purpose-internal-header-text: #0b1128; --color-section-the-purpose-internal-description-text: #000000; --color-section-the-purpose-buttons-background: #0b1128; --color-section-the-purpose-buttons-text: #ffffff; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 3 - DEBT REVIEW PROCESS (THE PURPOSE) (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ========================================================================================= */ /* FIXME: DEBT REVIEW PROCESS (THE PURPOSE) - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* ========================================================================================= */ .the__purpose__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-section-the-purpose-background); /* border-bottom: 1px solid var(--color-section-the-purpose-border-bottom); */ border-top: 1px solid var(--color-section-the-purpose-border-bottom); /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .the__purpose__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .the__purpose__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .the__purpose__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .the__purpose__container { position: relative; top: 19.5rem; } } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (THE PURPOSE) - MAIN TITLE FIXME: */ /* ===================================================================== */ .the__purpose__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-the-purpose-main-header-text); background-color: var(--color-section-the-purpose-background); text-align: center; /* border: 2px solid purple; */ } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (THE PURPOSE) - SUB-TITLE FIXME: */ /* ===================================================================== */ .the__purpose__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-the-purpose-sub-header-text); background-color: var(--color-section-the-purpose-background); text-align: center; /* border: 2px solid purple; */ } /* ==================================================================================================== */ /* FIXME: DEBT REVIEW PROCESS (THE PURPOSE) - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ==================================================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .the__purpose__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .the__purpose__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-section-the-purpose-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .the__purpose__button a { text-decoration: none; color: var(--color-section-the-purpose-buttons-text); cursor: pointer; } .the__purpose__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .the__purpose__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 3 - DEBT REVIEW PROCESS (THE PURPOSE) (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* ==================================================================================== */ /* TODO: DEBT REVIEW PROCESS (THE PURPOSE) (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* ==================================================================================== */ .the__purpose__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .the__purpose__content__container { display: flex; flex-direction: column; } } */ /* ==================================================================================== */ /* TODO: DEBT REVIEW PROCESS (THE PURPOSE) (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* ==================================================================================== */ .the__purpose__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .the__purpose__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .the__purpose__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .the__purpose__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .the__purpose__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .the__purpose__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .the__purpose__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .the__purpose__content__image { padding: 0rem 0rem 51% 0rem; /* width: 96.75%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .the__purpose__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .the__purpose__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .the__purpose__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .the__purpose__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .the__purpose__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .the__purpose__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* ==================================================================================== */ /* TODO: DEBT REVIEW PROCESS (THE PURPOSE) (CONTENT) - CONTAINER HOLDING ALL TEXT */ /* ==================================================================================== */ .the__purpose__content__text__container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 1rem 1rem 1rem 1rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid green; */ } /* ========================================================================================= */ /* TODO: DEBT REVIEW PROCESS (THE PURPOSE) (CONTENT) - CONTAINER HOLDING ALL TEXT - HEADER */ /* ========================================================================================= */ .the__purpose__content__text__header { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid purple; */ } .the__purpose__content__text__header p { font-size: 1.5rem; font-weight: 700; line-height: 1.5; width: 100%; color: var(--color-section-about-us-internal-header-text); text-transform: uppercase; /* border: 1px solid pink; */ } /* ============================================================================================== */ /* TODO: DEBT REVIEW PROCESS (THE PURPOSE) (CONTENT) - CONTAINER HOLDING ALL TEXT - DESCRIPTION */ /* ============================================================================================== */ .the__purpose__content__text__description { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid orange; */ } .the__purpose__content__text__description p { font-size: 1.5rem; font-weight: 500; line-height: 1.5; width: 100%; color: var(--color-section-about-us-internal-description-text); text-align: justify; /* border: 1px solid orange; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 990 px */ /* ============================= */ @media screen and (max-width: 990px) { .the__purpose__content__text__header p { font-size: 1.4rem; } .the__purpose__content__text__description p { font-size: 1.4rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 940 px */ /* ============================= */ @media screen and (max-width: 940px) { .the__purpose__content__text__header p { font-size: 1.35rem; } .the__purpose__content__text__description p { font-size: 1.35rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 925 px */ /* ============================= */ @media screen and (max-width: 925px) { .the__purpose__content__text__header p { font-size: 1.3rem; } .the__purpose__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 860 px */ /* ============================= */ @media screen and (max-width: 860px) { .the__purpose__content__text__header p { font-size: 1.2rem; } .the__purpose__content__text__description p { font-size: 1.2rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .the__purpose__content__text__header p { font-size: 1.3rem; } .the__purpose__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .the__purpose__content__text__header p { font-size: 1.3rem; } .the__purpose__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .the__purpose__content__text__header p { font-size: 1.2rem; } .the__purpose__content__text__description p { font-size: 1.2rem; } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 3 (END) - DEBT REVIEW PROCESS (THE PURPOSE) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 4 (START) - DEBT REVIEW PROCESS (BRIEF OVERVIEW) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ --color-section-brief-overview-background: #ffffff; --color-section-brief-overview-border-bottom: #e5e4e2; /* --color-section-brief-overview-main-header-text: #065bb3; */ --color-section-brief-overview-main-header-text: #ffffff; --color-section-brief-overview-sub-header-text: #0b1128; --color-section-brief-overview-internal-header-text: #0b1128; --color-section-brief-overview-internal-description-text: #000000; --color-section-brief-overview-buttons-background: #0b1128; --color-section-brief-overview-buttons-text: #ffffff; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 4 - DEBT REVIEW PROCESS (BRIEF OVERVIEW) (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ========================================================================================= */ /* FIXME: DEBT REVIEW PROCESS (BRIEF OVERVIEW) - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* ========================================================================================= */ .brief__overview__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-section-brief-overview-background); /* border-bottom: 1px solid var(--color-section-brief-overview-border-bottom); */ border-top: 1px solid var(--color-section-brief-overview-border-bottom); /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .brief__overview__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .brief__overview__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .brief__overview__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .brief__overview__container { position: relative; top: 19.5rem; } } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (BRIEF OVERVIEW) - MAIN TITLE FIXME: */ /* ===================================================================== */ .brief__overview__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-brief-overview-main-header-text); background-color: var(--color-section-brief-overview-background); text-align: center; /* border: 2px solid purple; */ } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (BRIEF OVERVIEW) - SUB-TITLE FIXME: */ /* ===================================================================== */ .brief__overview__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-brief-overview-sub-header-text); background-color: var(--color-section-brief-overview-background); text-align: center; /* border: 2px solid purple; */ } /* ==================================================================================================== */ /* FIXME: DEBT REVIEW PROCESS (BRIEF OVERVIEW) - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ==================================================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .brief__overview__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .brief__overview__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-section-brief-overview-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .brief__overview__button a { text-decoration: none; color: var(--color-section-brief-overview-buttons-text); cursor: pointer; } .brief__overview__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .brief__overview__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 4 - DEBT REVIEW PROCESS (BRIEF OVERVIEW) (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (BRIEF OVERVIEW) (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* ======================================================================================= */ .brief__overview__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .brief__overview__content__container { display: flex; flex-direction: column; } } */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (BRIEF OVERVIEW) (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* ======================================================================================= */ .brief__overview__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .brief__overview__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .brief__overview__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .brief__overview__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .brief__overview__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .brief__overview__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .brief__overview__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .brief__overview__content__image { padding: 0rem 0rem 51% 0rem; /* width: 96.75%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .brief__overview__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .brief__overview__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .brief__overview__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .brief__overview__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .brief__overview__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .brief__overview__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (BRIEF OVERVIEW) (CONTENT) - CONTAINER HOLDING ALL TEXT */ /* ======================================================================================= */ .brief__overview__content__text__container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 1rem 1rem 1rem 1rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid green; */ } /* ============================================================================================ */ /* TODO: DEBT REVIEW PROCESS (BRIEF OVERVIEW) (CONTENT) - CONTAINER HOLDING ALL TEXT - HEADER */ /* ============================================================================================ */ .brief__overview__content__text__header { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid purple; */ } .brief__overview__content__text__header p { font-size: 1.5rem; font-weight: 700; line-height: 1.5; width: 100%; color: var(--color-section-brief-overview-internal-header-text); text-transform: uppercase; /* border: 1px solid purple; */ } /* ================================================================================================= */ /* TODO: DEBT REVIEW PROCESS (BRIEF OVERVIEW) (CONTENT) - CONTAINER HOLDING ALL TEXT - DESCRIPTION */ /* ================================================================================================= */ .brief__overview__content__text__description { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid orange; */ } .brief__overview__content__text__description p { font-size: 1.5rem; font-weight: 500; line-height: 1.5; width: 100%; color: var(--color-section-brief-overview-internal-description-text); text-align: justify; /* border: 1px solid orange; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 990 px */ /* ============================= */ @media screen and (max-width: 990px) { .brief__overview__content__text__header p { font-size: 1.4rem; } .brief__overview__content__text__description p { font-size: 1.4rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 940 px */ /* ============================= */ @media screen and (max-width: 940px) { .brief__overview__content__text__header p { font-size: 1.35rem; } .brief__overview__content__text__description p { font-size: 1.35rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 925 px */ /* ============================= */ @media screen and (max-width: 925px) { .brief__overview__content__text__header p { font-size: 1.3rem; } .brief__overview__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 860 px */ /* ============================= */ @media screen and (max-width: 860px) { .brief__overview__content__text__header p { font-size: 1.2rem; } .brief__overview__content__text__description p { font-size: 1.2rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .brief__overview__content__text__header p { font-size: 1.3rem; } .brief__overview__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .brief__overview__content__text__header p { font-size: 1.3rem; } .brief__overview__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .brief__overview__content__text__header p { font-size: 1.2rem; } .brief__overview__content__text__description p { font-size: 1.2rem; } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 4 (END) - DEBT REVIEW PROCESS (BRIEF OVERVIEW) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 5 (START) - DEBT REVIEW PROCESS (THE PROCESS) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ --color-section-the-process-background: #ffffff; --color-section-the-process-border-bottom: #e5e4e2; /* --color-section-the-process-main-header-text: #065bb3; */ --color-section-the-process-main-header-text: #ffffff; --color-section-the-process-sub-header-text: #0b1128; --color-section-the-process-internal-header-text: #0b1128; --color-section-the-process-internal-description-text: #000000; --color-section-the-process-buttons-background: #0b1128; --color-section-the-process-buttons-text: #ffffff; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 5 - DEBT REVIEW PROCESS (THE PROCESS) (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ========================================================================================= */ /* FIXME: DEBT REVIEW PROCESS (THE PROCESS) - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* ========================================================================================= */ .the__process__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-section-the-process-background); border-bottom: 1px solid var(--color-section-the-process-border-bottom); border-top: 1px solid var(--color-section-the-process-border-bottom); /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .the__process__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .the__process__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .the__process__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .the__process__container { position: relative; top: 19.5rem; } } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (THE PROCESS) - MAIN TITLE FIXME: */ /* ===================================================================== */ .the__process__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-the-process-main-header-text); background-color: var(--color-section-the-process-background); text-align: center; /* border: 2px solid purple; */ } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (THE PROCESS) - SUB-TITLE FIXME: */ /* ===================================================================== */ .the__process__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-the-process-sub-header-text); background-color: var(--color-section-the-process-background); text-align: center; /* border: 2px solid purple; */ } /* ==================================================================================================== */ /* FIXME: DEBT REVIEW PROCESS (THE PROCESS) - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ==================================================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .the__process__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .the__process__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-section-the-process-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .the__process__button a { text-decoration: none; color: var(--color-section-the-process-buttons-text); cursor: pointer; } .the__process__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .the__process__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 5 - DEBT REVIEW PROCESS (THE PROCESS) (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* ==================================================================================== */ /* TODO: DEBT REVIEW PROCESS (THE PROCESS) (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* ==================================================================================== */ .the__process__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .the__process__content__container { display: flex; flex-direction: column; } } */ /* ==================================================================================== */ /* TODO: DEBT REVIEW PROCESS (THE PROCESS) (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* ==================================================================================== */ .the__process__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .the__process__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .the__process__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .the__process__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .the__process__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .the__process__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .the__process__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .the__process__content__image { padding: 0rem 0rem 51% 0rem; /* width: 96.75%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .the__process__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .the__process__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .the__process__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .the__process__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .the__process__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .the__process__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* ==================================================================================== */ /* TODO: DEBT REVIEW PROCESS (THE PROCESS) (CONTENT) - CONTAINER HOLDING ALL TEXT */ /* ==================================================================================== */ .the__process__content__text__container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 1rem 1rem 1rem 1rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid green; */ } /* ========================================================================================= */ /* TODO: DEBT REVIEW PROCESS (THE PROCESS) (CONTENT) - CONTAINER HOLDING ALL TEXT - HEADER */ /* ========================================================================================= */ .the__process__content__text__header { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid purple; */ } .the__process__content__text__header p { font-size: 1.5rem; font-weight: 700; line-height: 1.5; width: 100%; color: var(--color-section-the-process-internal-header-text); text-transform: uppercase; /* border: 1px solid pink; */ } /* ============================================================================================== */ /* TODO: DEBT REVIEW PROCESS (THE PROCESS) (CONTENT) - CONTAINER HOLDING ALL TEXT - DESCRIPTION */ /* ============================================================================================== */ .the__process__content__text__description { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid orange; */ } .the__process__content__text__description p { font-size: 1.5rem; font-weight: 500; line-height: 1.5; width: 100%; color: var(--color-section-the-process-internal-description-text); text-align: justify; /* border: 1px solid orange; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 990 px */ /* ============================= */ @media screen and (max-width: 990px) { .the__process__content__text__header p { font-size: 1.4rem; } .the__process__content__text__description p { font-size: 1.4rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 940 px */ /* ============================= */ @media screen and (max-width: 940px) { .the__process__content__text__header p { font-size: 1.35rem; } .the__process__content__text__description p { font-size: 1.35rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 925 px */ /* ============================= */ @media screen and (max-width: 925px) { .the__process__content__text__header p { font-size: 1.3rem; } .the__process__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 860 px */ /* ============================= */ @media screen and (max-width: 860px) { .the__process__content__text__header p { font-size: 1.2rem; } .the__process__content__text__description p { font-size: 1.2rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .the__process__content__text__header p { font-size: 1.3rem; } .the__process__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .the__process__content__text__header p { font-size: 1.3rem; } .the__process__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .the__process__content__text__header p { font-size: 1.2rem; } .the__process__content__text__description p { font-size: 1.2rem; } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 5 (END) - DEBT REVIEW PROCESS (THE PROCESS) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 6 (START) - DEBT REVIEW PROCESS (CONSEQUENCES) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ --color-section-consequences-background: #ffffff; --color-section-consequences-border-bottom: #e5e4e2; /* --color-section-consequences-main-header-text: #065bb3; */ --color-section-consequences-main-header-text: #ffffff; --color-section-consequences-sub-header-text: #0b1128; --color-section-consequences-internal-header-text: #0b1128; --color-section-consequences-internal-description-text: #000000; --color-section-consequences-buttons-background: #0b1128; --color-section-consequences-buttons-text: #ffffff; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 6 - DEBT REVIEW PROCESS (CONSEQUENCES) (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ========================================================================================= */ /* FIXME: DEBT REVIEW PROCESS (CONSEQUENCES) - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* ========================================================================================= */ .consequences__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-section-consequences-background); border-bottom: 1px solid var(--color-section-consequences-border-bottom); /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .consequences__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .consequences__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .consequences__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .consequences__container { position: relative; top: 19.5rem; } } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (CONSEQUENCES) - MAIN TITLE FIXME: */ /* ===================================================================== */ .consequences__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-consequences-main-header-text); background-color: var(--color-section-consequences-background); text-align: center; /* border: 2px solid purple; */ } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (CONSEQUENCES) - SUB-TITLE FIXME: */ /* ===================================================================== */ .consequences__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-consequences-sub-header-text); background-color: var(--color-section-consequences-background); text-align: center; /* border: 2px solid purple; */ } /* ==================================================================================================== */ /* FIXME: DEBT REVIEW PROCESS (CONSEQUENCES) - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ==================================================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .consequences__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .consequences__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-section-consequences-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .consequences__button a { text-decoration: none; color: var(--color-section-consequences-buttons-text); cursor: pointer; } .consequences__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .consequences__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 6 - DEBT REVIEW PROCESS (CONSEQUENCES) (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (CONSEQUENCES) (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* ======================================================================================= */ .consequences__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .consequences__content__container { display: flex; flex-direction: column; } } */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (CONSEQUENCES) (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* ======================================================================================= */ .consequences__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .consequences__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .consequences__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .consequences__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .consequences__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .consequences__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .consequences__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .consequences__content__image { padding: 0rem 0rem 51% 0rem; /* width: 96.75%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .consequences__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .consequences__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .consequences__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .consequences__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .consequences__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .consequences__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (CONSEQUENCES) (CONTENT) - CONTAINER HOLDING ALL TEXT */ /* ======================================================================================= */ .consequences__content__text__container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 1rem 1rem 1rem 1rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid green; */ } /* ============================================================================================ */ /* TODO: DEBT REVIEW PROCESS (CONSEQUENCES) (CONTENT) - CONTAINER HOLDING ALL TEXT - HEADER */ /* ============================================================================================ */ .consequences__content__text__header { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid purple; */ } .consequences__content__text__header p { font-size: 1.5rem; font-weight: 700; line-height: 1.5; width: 100%; color: var(--color-section-consequences-internal-header-text); text-transform: uppercase; /* border: 1px solid purple; */ } /* ================================================================================================= */ /* TODO: DEBT REVIEW PROCESS (CONSEQUENCES) (CONTENT) - CONTAINER HOLDING ALL TEXT - DESCRIPTION */ /* ================================================================================================= */ .consequences__content__text__description { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid orange; */ } .consequences__content__text__description p { font-size: 1.5rem; font-weight: 500; line-height: 1.5; width: 100%; color: var(--color-section-consequences-internal-description-text); text-align: justify; /* border: 1px solid orange; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 990 px */ /* ============================= */ @media screen and (max-width: 990px) { .consequences__content__text__header p { font-size: 1.4rem; } .consequences__content__text__description p { font-size: 1.4rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 940 px */ /* ============================= */ @media screen and (max-width: 940px) { .consequences__content__text__header p { font-size: 1.35rem; } .consequences__content__text__description p { font-size: 1.35rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 925 px */ /* ============================= */ @media screen and (max-width: 925px) { .consequences__content__text__header p { font-size: 1.3rem; } .consequences__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 860 px */ /* ============================= */ @media screen and (max-width: 860px) { .consequences__content__text__header p { font-size: 1.2rem; } .consequences__content__text__description p { font-size: 1.2rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .consequences__content__text__header p { font-size: 1.3rem; } .consequences__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .consequences__content__text__header p { font-size: 1.3rem; } .consequences__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .consequences__content__text__header p { font-size: 1.2rem; } .consequences__content__text__description p { font-size: 1.2rem; } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 6 (END) - DEBT REVIEW PROCESS (CONSEQUENCES) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 7 (START) - DEBT REVIEW PROCESS (RESPONSIBILITIES) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ --color-section-responsibilities-background: #ffffff; --color-section-responsibilities-border-bottom: #e5e4e2; /* --color-section-responsibilities-main-header-text: #065bb3; */ --color-section-responsibilities-main-header-text: #ffffff; --color-section-responsibilities-sub-header-text: #0b1128; --color-section-responsibilities-internal-header-text: #0b1128; --color-section-responsibilities-internal-description-text: #000000; --color-section-responsibilities-buttons-background: #0b1128; --color-section-responsibilities-buttons-text: #ffffff; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 7 - DEBT REVIEW PROCESS (RESPONSIBILITIES) (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ============================================================================================= */ /* FIXME: DEBT REVIEW PROCESS (RESPONSIBILITIES) - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* ============================================================================================= */ .responsibilities__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-section-responsibilities-background); border-bottom: 1px solid var(--color-section-responsibilities-border-bottom); /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .responsibilities__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .responsibilities__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .responsibilities__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .responsibilities__container { position: relative; top: 19.5rem; } } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (RESPONSIBILITIES) - MAIN TITLE FIXME: */ /* ===================================================================== */ .responsibilities__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-responsibilities-main-header-text); background-color: var(--color-section-responsibilities-background); text-align: center; /* border: 2px solid purple; */ } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (RESPONSIBILITIES) - SUB-TITLE FIXME: */ /* ===================================================================== */ .responsibilities__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-responsibilities-sub-header-text); background-color: var(--color-section-responsibilities-background); text-align: center; /* border: 2px solid purple; */ } /* ==================================================================================================== */ /* FIXME: DEBT REVIEW PROCESS (RESPONSIBILITIES) - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ==================================================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .responsibilities__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .responsibilities__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-section-responsibilities-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .responsibilities__button a { text-decoration: none; color: var(--color-section-responsibilities-buttons-text); cursor: pointer; } .responsibilities__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .responsibilities__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 7 - DEBT REVIEW PROCESS (RESPONSIBILITIES) (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* ======================================================================================== */ /* TODO: DEBT REVIEW PROCESS (RESPONSIBILITIES (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* ======================================================================================== */ .responsibilities__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .responsibilities__content__container { display: flex; flex-direction: column; } } */ /* ========================================================================================= */ /* TODO: DEBT REVIEW PROCESS (RESPONSIBILITIES) (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* ========================================================================================= */ .responsibilities__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .responsibilities__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .responsibilities__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .responsibilities__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .responsibilities__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .responsibilities__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .responsibilities__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .responsibilities__content__image { width: 96.75%; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .responsibilities__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .responsibilities__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .responsibilities__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .responsibilities__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .responsibilities__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .responsibilities__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* ========================================================================================= */ /* TODO: DEBT REVIEW PROCESS (RESPONSIBILITIES) (CONTENT) - CONTAINER HOLDING ALL TEXT */ /* ========================================================================================= */ .responsibilities__content__text__container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 1rem 1rem 1rem 1rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid green; */ } /* ============================================================================================== */ /* TODO: DEBT REVIEW PROCESS (RESPONSIBILITIES) (CONTENT) - CONTAINER HOLDING ALL TEXT - HEADER */ /* ============================================================================================== */ .responsibilities__content__text__header { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid purple; */ } .responsibilities__content__text__header p { font-size: 1.5rem; font-weight: 700; line-height: 1.5; width: 100%; color: var(--color-section-responsibilities-internal-header-text); text-transform: uppercase; /* border: 1px solid pink; */ } /* =================================================================================================== */ /* TODO: DEBT REVIEW PROCESS (RESPONSIBILITIES) (CONTENT) - CONTAINER HOLDING ALL TEXT - DESCRIPTION */ /* =================================================================================================== */ .responsibilities__content__text__description { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid orange; */ } .responsibilities__content__text__description p { font-size: 1.5rem; font-weight: 500; line-height: 1.5; width: 100%; color: var(--color-section-responsibilities-internal-description-text); text-align: justify; /* border: 1px solid orange; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 990 px */ /* ============================= */ @media screen and (max-width: 990px) { .responsibilities__content__text__header p { font-size: 1.4rem; } .responsibilities__content__text__description p { font-size: 1.4rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 940 px */ /* ============================= */ @media screen and (max-width: 940px) { .responsibilities__content__text__header p { font-size: 1.35rem; } .responsibilities__content__text__description p { font-size: 1.35rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 925 px */ /* ============================= */ @media screen and (max-width: 925px) { .responsibilities__content__text__header p { font-size: 1.3rem; } .responsibilities__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 860 px */ /* ============================= */ @media screen and (max-width: 860px) { .responsibilities__content__text__header p { font-size: 1.2rem; } .responsibilities__content__text__description p { font-size: 1.2rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .responsibilities__content__text__header p { font-size: 1.3rem; } .responsibilities__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .responsibilities__content__text__header p { font-size: 1.3rem; } .responsibilities__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .responsibilities__content__text__header p { font-size: 1.2rem; } .responsibilities__content__text__description p { font-size: 1.2rem; } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 7 (END) - DEBT REVIEW PROCESS (RESPONSIBILITIES) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 8 (START) - DEBT REVIEW PROCESS (FEE STRUCTURE) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ --color-section-fee-structure-background: #ffffff; --color-section-fee-structure-border-bottom: #e5e4e2; /* --color-section-fee-structure-main-header-text: #065bb3; */ --color-section-fee-structure-main-header-text: #ffffff; --color-section-fee-structure-sub-header-text: #0b1128; --color-section-fee-structure-internal-header-text: #0b1128; --color-section-fee-structure-internal-description-text: #000000; --color-section-fee-structure-buttons-background: #0b1128; --color-section-fee-structure-buttons-text: #ffffff; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 8 - DEBT REVIEW PROCESS (FEE STRUCTURE) (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ========================================================================================= */ /* FIXME: DEBT REVIEW PROCESS (FEE STRUCTURE) - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* ========================================================================================= */ .fee__structure__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-section-fee-structure-background); border-bottom: 1px solid var(--color-section-fee-structure-border-bottom); /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .fee__structure__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .fee__structure__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .fee__structure__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .fee__structure__container { position: relative; top: 19.5rem; } } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (FEE STRUCTURE) - MAIN TITLE FIXME: */ /* ===================================================================== */ .fee__structure__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-fee-structure-main-header-text); background-color: var(--color-section-fee-structure-background); text-align: center; /* border: 2px solid purple; */ } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (FEE STRUCTURE) - SUB-TITLE FIXME: */ /* ===================================================================== */ .fee__structure__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.8rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-fee-structure-sub-header-text); background-color: var(--color-section-fee-structure-background); text-align: center; /* border: 2px solid purple; */ } /* ==================================================================================================== */ /* FIXME: DEBT REVIEW PROCESS (FEE STRUCTURE) - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ==================================================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .fee__structure__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .fee__structure__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-section-fee-structure-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .fee__structure__button a { text-decoration: none; color: var(--color-section-fee-structure-buttons-text); cursor: pointer; } .fee__structure__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .fee__structure__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 8 - DEBT REVIEW PROCESS (FEE STRUCTURE) (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (FEE STRUCTURE) (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* ======================================================================================= */ .fee__structure__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .fee__structure__content__container { display: flex; flex-direction: column; } } */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (FEE STRUCTURE) (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* ======================================================================================= */ .fee__structure__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .fee__structure__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .fee__structure__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .fee__structure__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .fee__structure__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .fee__structure__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .fee__structure__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .fee__structure__content__image { padding: 0rem 0rem 51% 0rem; /* width: 96.75%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .fee__structure__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .fee__structure__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .fee__structure__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .fee__structure__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .fee__structure__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .fee__structure__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (FEE STRUCTURE) (CONTENT) - CONTAINER HOLDING ALL TEXT */ /* ======================================================================================= */ .fee__structure__content__text__container { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 1rem 1rem 1rem 1rem; padding: 0rem 0rem 0rem 0rem; /* border: 1px solid green; */ } /* ============================================================================================ */ /* TODO: DEBT REVIEW PROCESS (FEE STRUCTURE) (CONTENT) - CONTAINER HOLDING ALL TEXT - HEADER */ /* ============================================================================================ */ .fee__structure__content__text__header { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid purple; */ } .fee__structure__content__text__header p { font-size: 1.5rem; font-weight: 700; line-height: 1.5; width: 100%; color: var(--color-section-fee-structure-internal-header-text); text-transform: uppercase; /* border: 1px solid purple; */ } /* ================================================================================================= */ /* TODO: DEBT REVIEW PROCESS (FEE STRUCTURE) (CONTENT) - CONTAINER HOLDING ALL TEXT - DESCRIPTION */ /* ================================================================================================= */ .fee__structure__content__text__description { margin: 1rem 1rem 1rem 1rem; padding: 0rem 1rem 0rem 1rem; width: 95%; /* border: 1px solid orange; */ } .fee__structure__content__text__description p { font-size: 1.5rem; font-weight: 500; line-height: 1.5; width: 100%; color: var(--color-section-fee-structure-internal-description-text); text-align: justify; /* border: 1px solid orange; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 990 px */ /* ============================= */ @media screen and (max-width: 990px) { .fee__structure__content__text__header p { font-size: 1.4rem; } .fee__structure__content__text__description p { font-size: 1.4rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 940 px */ /* ============================= */ @media screen and (max-width: 940px) { .fee__structure__content__text__header p { font-size: 1.35rem; } .fee__structure__content__text__description p { font-size: 1.35rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 925 px */ /* ============================= */ @media screen and (max-width: 925px) { .fee__structure__content__text__header p { font-size: 1.3rem; } .fee__structure__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 860 px */ /* ============================= */ @media screen and (max-width: 860px) { .fee__structure__content__text__header p { font-size: 1.2rem; } .fee__structure__content__text__description p { font-size: 1.2rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .fee__structure__content__text__header p { font-size: 1.3rem; } .fee__structure__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .fee__structure__content__text__header p { font-size: 1.3rem; } .fee__structure__content__text__description p { font-size: 1.3rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .fee__structure__content__text__header p { font-size: 1.2rem; } .fee__structure__content__text__description p { font-size: 1.2rem; } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 8 (END) - DEBT REVIEW PROCESS (FEE STRUCTURE) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 9 (START) - DEBT REVIEW PROCESS (FAQS) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ --color-section-faqs-background: #ffffff; --color-section-faqs-border-bottom: #e5e4e2; /* --color-section-faqs-main-header-text: #065bb3; */ --color-section-faqs-main-header-text: #ffffff; --color-section-faqs-sub-header-text: #0b1128; --color-section-faqs-internal-header-text: #0b1128; --color-section-faqs-internal-description-text: #000000; --color-section-faqs-buttons-background: #0b1128; --color-section-faqs-buttons-text: #ffffff; --color-section-faqs-accordian-internal-links: #e5e4e2; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 9 - DEBT REVIEW PROCESS (FAQS) (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ========================================================================================= */ /* FIXME: DEBT REVIEW PROCESS (FAQS) - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* ========================================================================================= */ .FAQS__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-section-faqs-background); /* border-bottom: 1px solid var(--color-section-faqs-border-bottom); */ /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .FAQS__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .FAQS__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .FAQS__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .FAQS__container { position: relative; top: 19.5rem; } } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (FAQS) - MAIN TITLE FIXME: */ /* ===================================================================== */ .FAQS__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-faqs-main-header-text); background-color: var(--color-section-faqs-background); text-align: center; /* border: 2px solid purple; */ } /* ===================================================================== */ /* FIXME: DEBT REVIEW PROCESS (FAQS) - SUB-TITLE FIXME: */ /* ===================================================================== */ .FAQS__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.6rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-faqs-sub-header-text); background-color: var(--color-section-faqs-background); text-align: center; /* border: 2px solid purple; */ } /* ==================================================================================================== */ /* FIXME: DEBT REVIEW PROCESS (FAQS) - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ==================================================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .FAQS__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .FAQS__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-section-faqs-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .FAQS__button a { text-decoration: none; color: var(--color-section-faqs-buttons-text); cursor: pointer; } .FAQS__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .FAQS__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 9 - DEBT REVIEW PROCESS (FAQS) (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (FAQS) (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* ======================================================================================= */ .FAQS__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .FAQS__content__container { display: flex; flex-direction: column; } } */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (FAQS) (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* ======================================================================================= */ .FAQS__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .FAQS__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .FAQS__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .FAQS__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .FAQS__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .FAQS__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .FAQS__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .FAQS__content__image { padding: 0rem 0rem 51% 0rem; /* width: 96.75%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .FAQS__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .FAQS__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .FAQS__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .FAQS__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .FAQS__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .FAQS__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* ===================================================================================================================== */ /* TODO: DEBT MASTERS - ACCORDIAN "MAIN" CONTAINER (HOLDING ALL ELEMENTS) */ /* ===================================================================================================================== */ .debt__masters__accordian { width: 95%; max-width: 128rem; margin: 2rem auto 2rem auto; /* border: 1px solid white; */ } /* ===================================================================================================================== */ /* TODO: DEBT MASTERS - ACCORDIAN "ITEMS" CONTAINER (HOLDING ALL ITEMS) */ /* ===================================================================================================================== */ .debt__masters__accordian_item { /* background-color: #065bb3; */ /* color: white; */ /* background-color: white; */ /* color: #0b1128; */ background-color: #0b1128; color: white; margin: 1rem 0rem 1rem 0rem; padding: 0.5rem 0rem 0.5rem 0rem; border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); } /* ===================================================================================================================== */ /* TODO: DEBT MASTERS - ACCORDIAN - ITEM (HEADER) */ /* ===================================================================================================================== */ .debt__masters__accordian-item-header { display: flex; position: relative; align-items: center; min-height: 3.5rem; line-height: 1.25rem; font-family: "Poppins", sans-serif; font-size: 1.3rem; 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 */ .debt__masters__accordian-item-header::after { /* content: "\25BE"; */ content: "\002B"; font-size: 2rem; position: absolute; right: 1rem; color: var(--color-platinum-accordian-item-plus-and-minus-sign); transition: transform 0.5s ease-in-out; } /* FIXME: NOTE: THE CSS ENTITY CODE FOR MINUS SIGN "-" = "\2212" */ .debt__masters__accordian-item-header.active::after { /* transform: rotate(-180deg); */ content: "\2212"; transform: none; } .debt__masters__accordian-item-header.active { color: var(--color-platinum-accordian-item-header-active); } /* ===================================================================================================================== */ /* TODO: DEBT MASTERS - ACCORDIAN-ITEM (BODY) */ /* ===================================================================================================================== */ /* ITEM - MAIN CONTAINER */ .debt__masters__accordian-item-body { /* display: none; */ max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } /* ITEM - ALL ELEMENTS CONTAINER */ .debt__masters__accordian-item-body-content { display: flex; justify-content: space-between; align-items: center; margin: 0rem 0rem 0rem 0rem; padding: 0.5rem 1rem 0.5rem 1rem; /* border: 1px solid red; */ } .debt__masters__content-statement { max-width: 100%; font-size: 1.3rem; font-weight: 500; font-family: "Poppins", sans-serif; text-align: justify; letter-spacing: 0.025rem; line-height: 1.5; padding: 0rem 1rem 0rem 1rem; /* border: 1px solid green; */ } .debt__masters__content-statement a { text-decoration: none; color: var(--color-section-faqs-buttons-text); cursor: pointer; } .debt__masters__content-statement a:hover { color: var(--color-section-faqs-accordian-internal-links); } /* ===================================================================================================================== */ /* TODO: DEBT MASTERS - MEDIA QUERY (LARGER DEVICES) */ /* ===================================================================================================================== */ @media screen and (max-width: 430px) { .debt__masters__accordian-item-header { font-size: 1rem; justify-content: center; text-align: center; } .debt__masters__accordian-item-body-content { flex-direction: column; margin: 0rem 0rem 0rem 0rem; padding: 0.5rem 1rem 0.5rem 1rem; } .debt__masters__content-statement { justify-content: center; text-align: justify; max-width: 280px; font-size: 1rem; padding: 0rem 0.5rem 0rem 0.5rem; } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 9 (END) - DEBT REVIEW PROCESS (FAQS) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 10 (START) - REQUEST CALL-BACK TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ========================================================= */ /* SECTION COLOUR SCHEMES */ /* ========================================================= */ /* --color-section-request-call-back-background: #ffffff; */ --color-section-request-call-back-background: #eee; --color-section-request-call-back-border-bottom: #e5e4e2; --color-section-request-call-back-main-header-text: #065bb3; --color-section-request-call-back-sub-header-text: #0b1128; --color-section-request-call-back-internal-header-text: #0b1128; --color-section-request-call-back-internal-description-text: #000000; --color-section-request-call-back-buttons-background: #0b1128; --color-section-request-call-back-buttons-text: #ffffff; } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 10 - REQUEST CALL-BACK (HEADER) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ========================================================================================= */ /* FIXME: REQUEST CALL-BACK - CONTAINER (HOLDING ALL ELEMENTS) FIXME: */ /* ========================================================================================= */ .request__call__back__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-section-request-call-back-background); border-bottom: 1px solid var(--color-section-request-call-back-border-bottom); border-top: 1px solid var(--color-section-request-call-back-border-bottom); /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .request__call__back__container { position: relative; top: 11rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .request__call__back__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .request__call__back__container { position: relative; top: 19.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .request__call__back__container { position: relative; top: 19.5rem; } } /* ===================================================================== */ /* FIXME: REQUEST CALL-BACK - MAIN TITLE FIXME: */ /* ===================================================================== */ .request__call__back__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 1.5rem 1rem 1.5rem 1rem; color: var(--color-section-request-call-back-main-header-text); background-color: var(--color-section-request-call-back-background); text-align: center; /* border: 2px solid purple; */ } /* ===================================================================== */ /* FIXME: REQUEST CALL-BACK - SUB-TITLE FIXME: */ /* ===================================================================== */ .request__call__back__sub__title p { display: flex; justify-content: center; justify-items: center; font-size: 1.6rem; font-weight: 700; text-transform: uppercase; width: 100%; margin: -4rem 0rem 0rem 0rem; padding: 0rem 1rem 0rem 1rem; color: var(--color-section-request-call-back-sub-header-text); background-color: var(--color-section-request-call-back-background); text-align: center; /* border: 2px solid purple; */ } /* ==================================================================================================== */ /* FIXME: REQUEST CALL-BACK - BUTTONS FOR LINKS OR DOWNLOADABLE BROCHURES FIXME: */ /* ==================================================================================================== */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .request__call__back__buttons__container { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: -2rem 0rem 0rem 0rem; /* border: 1px solid green; */ } .request__call__back__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-section-request-call-back-buttons-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); transition: transform 0.5s ease-in-out; cursor: pointer; text-align: center; } .request__call__back__button a { text-decoration: none; color: var(--color-section-request-call-back-buttons-text); cursor: pointer; } .request__call__back__button:hover { transform: scale(1.05); } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ @media screen and (min-width: 670px) { .request__call__back__buttons__container { display: flex; flex-direction: row; justify-content: center; align-items: center; /* row-gap: 1rem; */ } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION 10 - REQUEST CALL-BACK (CONTENT) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT BELOW FIXME:FIXME:FIXME: */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (FEE STRUCTURE) (CONTENT) - CONTAINER HOLDING ALL ELEMENTS */ /* ======================================================================================= */ .request__call__back__content__container { /* display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2rem; */ display: flex; flex-direction: column; row-gap: 0.5rem; margin: 0rem 0.5rem 0rem 0.5rem; padding: 1rem 0.5rem 1rem 0.5rem; /* border: 1px solid yellow; */ width: 100%; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 670 px */ /* ============================= */ /* @media screen and (max-width: 800px) { .request__call__back__content__container { display: flex; flex-direction: column; } } */ /* ======================================================================================= */ /* TODO: DEBT REVIEW PROCESS (FEE STRUCTURE) (CONTENT) - CONTAINER HOLDING ALL IMAGES */ /* ======================================================================================= */ .request__call__back__content__image { position: relative; height: 0; width: 100%; margin: 1rem 1rem 1rem 0rem; /* padding: 0rem 0rem 27% 0rem; */ /* padding: 0rem 0rem 56.25% 0rem; */ /* padding: 0rem 0rem 100% 0rem; */ padding: 0rem 0rem 30% 0rem; /* border: 1px solid red; */ } .request__call__back__content__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0rem 0rem 0rem 0rem; } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZED */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1050 px */ /* ============================= */ @media screen and (max-width: 1050px) { .request__call__back__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 32.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .request__call__back__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 35% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 900 px */ /* ============================= */ @media screen and (max-width: 900px) { .request__call__back__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 37.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 800 px */ /* ============================= */ @media screen and (max-width: 800px) { .request__call__back__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 42.5% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 700 px */ /* ============================= */ @media screen and (max-width: 700px) { .request__call__back__content__image { /* padding: 0rem 0rem 70% 0rem; */ padding: 0rem 0rem 48% 0rem; /* width: 97.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .request__call__back__content__image { padding: 0rem 0rem 51% 0rem; /* width: 96.75%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 600 px */ /* ============================= */ @media screen and (max-width: 600px) { .request__call__back__content__image { padding: 0rem 0rem 56% 0rem; /* width: 96.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 500 px */ /* ============================= */ @media screen and (max-width: 500px) { .request__call__back__content__image { padding: 0rem 0rem 65% 0rem; /* width: 96%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .request__call__back__content__image { padding: 0rem 0rem 70% 0rem; /* width: 95.5%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 400 px */ /* ============================= */ @media screen and (max-width: 400px) { .request__call__back__content__image { padding: 0rem 0rem 75% 0rem; /* width: 95%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 350 px */ /* ============================= */ @media screen and (max-width: 350px) { .request__call__back__content__image { padding: 0rem 0rem 75% 0rem; /* width: 94%; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 280 px */ /* ============================= */ @media screen and (max-width: 280px) { .request__call__back__content__image { padding: 0rem 0rem 75% 0rem; /* width: 92%; */ } } /* ===================================================================================================================== */ /* TODO: DEBT MASTERS - FORM HEADERS (ON REGISTRATION FORM) */ /* ===================================================================================================================== */ :root { /* FORM - BACKGROUND */ --color-form-section-background-1: #e5e4e2; --color-form-section-background-2: #eee; /* FORM - SECTION HEADERS */ --color-form-section-header-background-1: #0b1128; --color-form-section-header-background-1-rgb: rgb(11, 17, 40); --color-form-section-header-background-2: #065bb3; --color-form-section-header-background-2-rgb: rgb(6, 91, 179); --color-form-section-header-text: #ffffff; /* FORM - POPI, PRIVACY & OTHER STATEMENTS */ --color-form-section-policy-statements-1: #0b1128; --color-form-section-policy-statements-2: #065bb3; /* FORM - INPUT AREAS */ --color-form-section-input-border: #ccc; --color-form-section-input-border-focus: #0b1128; --color-form-section-input-border-focus-rgb: rgba(11, 17, 40, 0.95); /* FORM - CHECK BOXES */ --color-form-section-checkbox-background-hidden: #ffffff; --color-form-section-checkbox-background-active: #ffffff; --color-form-section-checkbox-border-active: #ccc; --color-form-section-checkbox-tick-mark-active: #0b1128; --color-form-section-checkbox-disabled-state: #959495; /* FORM - FILE UPLOAD */ --color-form-section-file-upload-background: #ffffff; --color-form-section-file-upload-background-hover: #0b1128; --color-form-section-file-upload-background-text: #ffffff; --color-form-section-file-upload-label-text: #0b1128; /* FORM - CLEAR AND SUBMIT BUTTONS */ --color-form-section-submit-button-background: #0b1128; --color-form-section-submit-button-text: #ffffff; } /* ==================================================================================== */ /* TODO:TODO: BACKGROUND COLOR OF THE FORM SECTION - TITLE & IMAGE SECTION TODO:TODO: */ /* ==================================================================================== */ .debt__masters__call__back__form__section { position: relative; top: 0rem; width: 100%; height: auto; object-fit: cover; margin: 0rem 0rem 0rem 0rem; padding: 0rem 0rem 2rem 0rem; background-color: var(--color-form-section-background-2); /* border: 2px solid red; */ } @media screen and (max-width: 830px) { .debt__masters__call__back__form__section { position: relative; top: 0rem; } } @media screen and (max-width: 450px) { .debt__masters__call__back__form__section { position: relative; top: 0rem; } } /* ============================================================================= */ /* TODO:TODO: BACKGROUND COLOR OF THE FORM SECTION - HEADER SECTION TODO:TODO: */ /* ============================================================================= */ /* =============================== */ /* FIXME: VIEW - MOBILE FIRST */ /* =============================== */ .debt__masters__registration_form__header { 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-form-section-header-background-1); color: var(--color-form-section-header-text); margin: 2.5rem 0.4rem 2rem 0.4rem; padding: 0.5rem 1rem 0.5rem 1rem; border-radius: 0.5rem; box-shadow: var(--color-box-shadow-01); } /* ========================= */ /* FIXME: POLICY STATEMENTS */ /* ========================= */ .debt__masters__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; } .debt__masters__no__obligation__callback__statement { display: flex; justify-content: center; align-items: center; text-align: center; margin: 1rem 0.4rem 0rem 0.4rem; font-size: 1.2rem; text-transform: uppercase; } /* =============================================================================== */ /* TODO:TODO: BACKGROUND COLOR OF THE FORM SECTION - POLICY STATEMENTS TODO:TODO: */ /* =============================================================================== */ .debt__masters__no__obligation__callback__statement strong { color: var(--color-form-section-policy-statements-1); } .debt__masters__privacy__statement strong { text-decoration: none; color: var(--color-form-section-policy-statements-1); } .debt__masters__privacy__statement a { text-decoration: none; color: var(--color-form-section-policy-statements-1); cursor: pointer; } /* =============================== */ /* FIXME: VIEW - LARGER SCREENS */ /* =============================== */ @media screen and (max-width: 430px) { .debt__masters__registration_form__header { font-size: 1rem; text-align: center; } } /* ===================================================================================================================== */ /* TODO: DEBT MASTERS - REGISTRATION FORM */ /* ===================================================================================================================== */ /* ============================================== */ /* FIXME: FORM CONTAINER FIXME: */ /* ============================================== */ .debt__masters__form__group { margin: 0rem 0rem 1rem 1rem; } /* ============================================== */ /* FIXME: FORM LABEL FIXME: */ /* ============================================== */ .debt__masters__form__group label { display: block; font-size: 1.2rem; font-weight: 600; text-transform: uppercase; margin: 0.5rem 1.75rem 0.5rem 1.75rem; } .debt__masters__form__group input::placeholder { font-family: "Poppins", sans-serif; } /* ============================================== */ /* FIXME: INPUT FIELD TYPE = TEXT FIXME: */ /* e.g. "NAME" or "LAST NAME" etc. */ /* ============================================== */ .debt__masters__form__group input[type="text"] { /* width: 25rem; */ width: 96%; border-radius: 0.5rem; border: 1.25px solid var(--color-form-section-input-border); margin: 0.5rem 1.4rem 0.5rem 1.4rem; padding: 0.5rem 1rem 0.5rem 1rem; font-size: 1.2rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .debt__masters__form__group input[type="text"]:focus { border-color: var(--color-form-section-input-border-focus); box-shadow: 0 0 0 2px var(--color-form-section-input-border-focus-rgb); outline: 0; } /* ============================================== */ /* FIXME: INPUT FIELD TYPE = TEL FIXME: */ /* e.g. "TELEPHONE" or "MOBILE" Number etc. */ /* ============================================== */ .debt__masters__form__group input[type="tel"] { /* width: 25rem; */ width: 96%; border-radius: 0.5rem; border: 1px solid var(--color-form-section-input-border); margin: 0.5rem 1.4rem 0.5rem 1.4rem; padding: 0.5rem 1rem 0.5rem 1rem; font-size: 1.2rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .debt__masters__form__group input[type="tel"]:focus { border-color: var(--color-form-section-input-border-focus); box-shadow: 0 0 0 2px var(--color-form-section-input-border-focus-rgb); outline: 0; } /* ============================================== */ /* FIXME: INPUT FIELD TYPE = TEXTAREA FIXME: */ /* Runs over multiple lines (rows) e.g. "Address" */ /* ============================================== */ .debt__masters__form__group textarea { resize: none; /* width: 25rem; */ width: 96%; border-radius: 0.5rem; border: 1px solid var(--color-form-section-input-border); margin: 0.5rem 1.4rem 0.5rem 1.4rem; padding: 0.5rem 1rem 0.5rem 1rem; font-size: 1.2rem; font-family: "poppins", sans-serif; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .debt__masters__form__group textarea:focus { border-color: var(--color-form-section-input-border-focus); box-shadow: 0 0 0 2px var(--color-form-section-input-border-focus-rgb); outline: 0; } /* ============================================== */ /* FIXME: INPUT FIELD TYPE = NUMBER FIXME: */ /* ============================================== */ .debt__masters__form__group input[type="number"] { /* width: 25rem; */ width: 96%; border-radius: 0.5rem; border: 1px solid var(--color-form-section-input-border); margin: 0.5rem 1.4rem 0.5rem 1.4rem; padding: 0.5rem 1rem 0.5rem 1rem; font-size: 1.2rem; font-family: "poppins", sans-serif; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .debt__masters__form__group input[type="number"]:focus { border-color: var(--color-form-section-input-border-focus); box-shadow: 0 0 0 2px var(--color-form-section-input-border-focus-rgb); outline: 0; } /* ============================================== */ /* FIXME: INPUT FIELD TYPE = DATE FIXME: */ /* ============================================== */ .debt__masters__form__group input[type="date"] { /* width: 25rem; */ width: 96%; border-radius: 0.5rem; border: 1px solid var(--color-form-section-input-border); margin: 0.5rem 1.4rem 0.5rem 1.4rem; padding: 0.5rem 1rem 0.5rem 1rem; font-size: 1.2rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .debt__masters__form__group input[type="date"]:focus { border-color: var(--color-form-section-input-border-focus); box-shadow: 0 0 0 2px var(--color-form-section-input-border-focus-rgb); outline: 0; } .debt__masters__form__group input[type="date"]::placeholder { font-family: "Poppins", sans-serif; font-size: 1rem; } /* ============================================== */ /* FIXME: INPUT FIELD = DROPDOWN LIST FIXME: */ /* e.g. Countries, Provinces, Titles etc. */ /* ============================================== */ .debt__masters__form__group select { /* width: 25rem; */ width: 96%; border-radius: 0.5rem; border: 1px solid var(--color-form-section-input-border); margin: 0.5rem 1.4rem 0.5rem 1.4rem; padding: 0.5rem 1rem 0.5rem 1rem; font-size: 1.2rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .debt__masters__form__group select:focus { border-color: var(--color-form-section-input-border-focus); box-shadow: 0 0 0 2px rgba(11, 17, 40, 0.95); outline: 0; } /* ========================================================================= */ /* TODO: START STYLING OF CUSTOM CHECKBOX */ /* ========================================================================= */ /* ======================================= */ /* FIXME: INPUT FIELD = CHECKBOX FIXME: */ /* ======================================= */ .debt__masters__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: 1rem 1.5rem 0rem 0rem; cursor: pointer; } label.debt__masters__checkbox__option { display: grid; text-transform: initial; font-size: 1.2rem; font-weight: 500; line-height: 1.25; color: black; } /* ==================================== */ /* THIS IS TO HIDE THE NATIVE CHECKBOX */ /* ==================================== */ .debt__masters__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-form-section-checkbox-background-hidden); /* Not removed via appearance */ margin: 0; } /* ======================================= */ /* THIS IS TO DISPLAY THE CUSTOM CHECKBOX */ /* ======================================= */ .debt__masters__checkbox__option input[type="checkbox"] { appearance: none; background-color: var(--color-form-section-checkbox-background-active); margin: 0; font: inherit; /* color: var(--color-form-section-checkbox-background-active); */ width: 1.5rem; height: 1.5rem; border: 1.25px solid var(--color-form-section-checkbox-border-active); border-radius: 0.15em; transform: translateY(-0.075em); display: grid; place-content: center; cursor: pointer; } .debt__masters__checkbox__option + .debt__masters__checkbox__option { margin-top: 1rem; } /* ======================================= */ /* CUSTOM CHECKBOX - CHECKED STATE */ /* ======================================= */ .debt__masters__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 1rem 1rem var(--color-form-section-checkbox-tick-mark-active); /* 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%); } .debt__masters__checkbox__option input[type="checkbox"]:checked::before { transform: scale(1); } /* ======================================= */ /* CUSTOM CHECKBOX - FOCUSSED STATE */ /* ======================================= */ .debt__masters__checkbox__option input[type="checkbox"]:focus { outline: max(2px, 0.15em) solid var(--color-form-section-input-border-focus); outline-offset: max(1px, 0.15em); } /* ======================================= */ /* CUSTOM CHECKBOX - DISABLED STATE */ /* ======================================= */ .debt__masters__checkbox__option--disabled { color: var(--color-form-section-checkbox-disabled-state); cursor: not-allowed; } .debt__masters__checkbox__option input[type="checkbox"]:disabled { color: var(--color-form-section-checkbox-disabled-state); cursor: not-allowed; } /* ========================================================================= */ /* TODO: END OF STYLING OF CUSTOM CHECKBOX */ /* ========================================================================= */ /* ========================================================================= */ /* TODO: START STYLING OF CUSTOM FILE-UPLOAD */ /* ========================================================================= */ /* ============================================== */ /* FIXME: INPUT FIELD TYPE = FILE FIXME: */ /* ============================================== */ .debt__masters__file-input { display: inline-block; margin: 1rem 1.4rem 1rem 1.4rem; padding: 1rem 1rem 1rem 1rem; text-align: left; background: var(--color-form-section-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 */ /* ============================================== */ .debt__masters__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 */ /* ============================================ */ .debt__masters__file-input > .debt__masters__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-form-section-file-upload-background); border-radius: 0.5rem; box-shadow: var(--color-box-shadow-02), var(--color-box-shadow-01); cursor: pointer; } .debt__masters__file-input:hover > .debt__masters__button { background: var(--color-form-section-file-upload-background-hover); color: var(--color-form-section-file-upload-background-text); } .debt__masters__file-input > .debt__masters__label { display: flex; justify-content: center; align-items: center; margin: 1.5rem 0.5rem 0rem 0.5rem; font-size: 0.9rem; font-weight: 500; color: var(--color-form-section-file-upload-label-text); white-space: nowrap; opacity: 0.5; } .debt__masters__file-input.-chosen > .debt__masters__label { opacity: 1; } .debt__masters__file-input .fa { font-size: 1.8rem; margin: 0rem 1rem 0rem 0rem; } label .debt__masters__label__strong { color: var(--color-form-section-file-upload-label-text); } /* ========================================================================= */ /* TODO: END OF STYLING OF CUSTOM FILE-UPLOAD */ /* ========================================================================= */ /* ========================================== */ /* FIXME: INPUT FIELD TYPE = EMAIL FIXME: */ /* ========================================== */ .debt__masters__form__group input[type="email"] { /* width: 25rem; */ width: 96%; border-radius: 0.5rem; border: 1px solid var(--color-form-section-input-border); margin: 0.5rem 1.4rem 0.5rem 1.4rem; padding: 0.5rem 1rem 0.5rem 1rem; font-size: 1.2rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; } .debt__masters__form__group input[type="email"]:focus { border-color: var(--color-form-section-input-border-focus); box-shadow: 0 0 0 2px var(--color-form-section-input-border-focus-rgb); outline: 0; } /* ============================= */ /* FIXME: FORM BUTTONS FIXME: */ /* ============================= */ .debt__masters__button__container button { background: var(--color-form-section-submit-button-background); color: var(--color-form-section-submit-button-text); border: 0; outline: 0; border-radius: 0.5rem; width: 20rem; height: 3rem; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1rem; text-transform: uppercase; margin: 0.5rem 2rem 3rem 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; } .debt__masters__button__container button:hover { transform: scale(1.05); } .debt__masters__button__container { display: flex; flex-direction: row; justify-content: center; align-items: center; } /* ============================================== */ /* FIXME: STYLING - GOOGLE RECAPTCHA FIXME: */ /* ============================================== */ .debt__masters__form__group .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; /* border: 1px solid red; */ } /* =============================================================== */ /* FIXME: FINAL MEDIA QUERY - REGISTRATION FORM (SMALLER SCREENS) */ /* =============================================================== */ @media screen and (max-width: 600px) { .debt__masters__button__container button { margin: 0rem 1rem 2rem 1rem; font-size: 1rem; display: flex; justify-content: center; align-items: center; text-align: center; } .debt__masters__button__container { flex-direction: column; } .debt__masters__file-input { margin: 1rem 0.2rem 1rem 0.2rem; } .debt__masters__form__group label { font-size: 1rem; margin: 0rem 0.6rem 0rem 0.5rem; } .debt__masters__form__group input[type="email"] { margin: 0.5rem 0.2rem 0.5rem 0.2rem; } .debt__masters__checkbox__option { font-size: 1.1rem; font-weight: 500; margin: 2rem 2rem 2rem 0.1rem; } .debt__masters__form__group select { margin: 0.5rem 0.1rem 0.5rem 0.1rem; } .debt__masters__form__group textarea { margin: 0.5rem 0.1rem 0.5rem 0.1rem; } .debt__masters__form__group input[type="tel"] { margin: 0.5rem 0.1rem 0.5rem 0.1rem; } .debt__masters__form__group input[type="text"] { margin: 0.5rem 0.1rem 0.5rem 0.1rem; } .debt__masters__form__group input[type="date"] { margin: 0.5rem 0.1rem 0.5rem 0.1rem; } .debt__masters__form__group input[type="number"] { margin: 0.5rem 0.1rem 0.5rem 0.1rem; } } @media screen and (max-width: 350px) { .debt__masters__form__group .g-recaptcha { margin: 2rem 1rem 2rem 4.75rem; transform: scale(0.79); -webkit-transform: scale(0.79); } } /* FIXME:FIXME:FIXME: ENTER NEW PAGE CONTENT ABOVE FIXME:FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION 10 (END) - REQUEST CALL-BACK TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO:TODO: SECTION - FOOTER (START) TODO:TODO: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ :root { /* ================================================ */ /* FIXME: COLOR SCHEME - FOOTER */ /* ================================================ */ --color-footer-section-background: #ffffff; --color-footer-section-text-main-title: #065bb3; --color-footer-section-text-profile-description: #000000; --color-footer-section-text-profile-description-tagline: #000000; --color-footer-section-social-media-icons: #ffffff; --color-footer-section-social-media-icons-hover: #ffffff; --color-footer-section-social-media-icons-background: #ffffff; --color-footer-section-column-group-header: #0b1128; --color-footer-section-column-group-list_items: #000000; --color-footer-section-column-group-list_items-hover: #065bb3; --color-footer-section-column-group-list_items-strong: #065bb3; --color-footer-section-column-group-list_items-strong-hover: #0b1128; --color-footer-section-horisontal-line: #d3d3d3; --color-footer-section-contact-numbers-text: #000000; --color-footer-section-copyright-text: #0b1128; --color-footer-section-policies-text: #065bb3; --color-footer-section-policies-text-hover: #0b1128; } .debt__masters__footer__section { position: relative; top: 10rem; /* top: 5rem; */ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; /* height: auto; */ object-fit: cover; margin: 0rem 0rem 0rem 0rem; /* border: 2px solid green; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ @media screen and (max-width: 830px) { .debt__masters__footer__section { position: relative; top: 11rem; /* margin: -8rem 0rem 0rem 0rem; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 650 px */ /* ============================= */ @media screen and (max-width: 650px) { .debt__masters__footer__section { position: relative; top: 19.5rem; /* margin: 0rem 0rem 0rem 0rem; */ } } /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ @media screen and (max-width: 450px) { .debt__masters__footer__section { position: relative; top: 19.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: relative; width: 100%; bottom: 0; left: 0; background-color: var(--color-footer-section-background); box-shadow: 0 16px 70px -8px rgba(0, 0, 0, 0.25); transition: background 0.3s linear; } /* =========================================================== */ /* FIXME: CONTACT US - CONTAINER (PAGE TITLE) FIXME: */ /* =========================================================== */ .contact__us__page__title__container { /* position: relative; top: 10rem; */ display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%; height: auto; object-fit: cover; margin: -1.5rem 0rem 1rem 0rem; /* border: 2px solid red; */ } /* =============================================================== */ /* TODO: RESPONSIVE DESIGN - MEDIA QUERY - FOR OTHER SCREEN SIZES */ /* =============================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 830 px */ /* ============================= */ /* @media screen and (max-width: 830px) { .contact__us__page__title__container { position: relative; top: 11rem; } } */ /* ============================= */ /* FIXME: BREAKPOINT: 450 px */ /* ============================= */ /* @media screen and (max-width: 450px) { .contact__us__page__title__container { position: relative; top: 14.5rem; } } */ /* ========================================================== */ /* FIXME: NEW PAGE - FULL TITLE OF THE PAGE FIXME: */ /* ========================================================== */ .contact__us__page__title h5 { display: flex; justify-content: center; justify-items: center; text-transform: uppercase; width: 100%; padding: 0rem 1rem 0rem 1rem; text-align: center; color: var(--color-footer-section-text-main-title); /* border: 2px solid purple; */ } /* ===================================================================================================================== */ /* TODO: PART 1 - FOOTER SECTION CONTAINER (HOLDING ALL ELEMENTS OF THE FOOTER) */ /* ===================================================================================================================== */ .footer__section__container { max-width: 124rem; padding: 3rem 4rem 3rem 4rem; margin: auto; /* border: 2px solid red; */ } /* ===================================================================================================================== */ /* TODO: PART 2 - FOOTER CONTENT CONTAINER (HOLDING LOGO, DESCRIPTION AREA, SOCIAL MEDIA ICONS, COLUMNS WITH LINKS) */ /* ===================================================================================================================== */ .footer__content__container { display: flex; justify-content: space-between; margin: 0rem 0rem 2rem 0rem; /* border: 2px solid orange; */ } /* ===================================================================================================================== */ /* TODO: PART 3 - FOOTER PROFILE CONTAINER (COMPANY PROFILE - LOGO / DESCRIPTION / SOCIAL ICONS) */ /* ===================================================================================================================== */ .footer__profile__container { margin: 0rem 1rem 0rem 0.5rem; /* border: 2px solid purple; */ } .footer__profile__container .footer__profile__logo { display: flex; justify-content: center; align-items: center; margin: 2rem 0rem 2rem 0rem; /* border: 1px solid green; */ } .footer__profile__container img { width: 30rem; height: auto; } .footer__profile__description { max-width: 30rem; justify-content: center; text-align: justify; font-size: 1.3rem; margin: 2rem 1rem 3rem 1rem; /* border: 1px solid green; */ } .footer__profile__description p { color: var(--color-footer-section-text-profile-description); font-weight: 400; line-height: 1.8rem; } .tagline { color: var(--color-footer-section-text-profile-description-tagline); } /* ===================================================================================================================== */ /* TODO: PART 4 - SOCIAL MEDIA ICONS */ /* ===================================================================================================================== */ /* MAIN CONTAINER - HOLDING ALL SOCIAL MEDIA COMPONENTS TOGETHER */ .footer__profile__social__media__container { position: relative; max-width: 30rem; margin: 0.2rem 0.2rem 0.2rem 0.2rem; padding: 0rem 0rem 0rem 0rem; display: flex; justify-content: center; align-items: center; width: 100%; z-index: 0; } /* ====================================== */ /* TODO: NOTE: Translate (width, height) */ /* ====================================== */ .footer__profile__social__media__links ul { position: relative; top: 0%; left: 0%; transform: translate(0%, 0%); display: flex; justify-content: center; align-items: center; margin: 0rem 0rem 0rem 0rem; padding: 0rem 0rem 0rem 0rem; } .footer__profile__social__media__links ul li { list-style: none; margin: 0rem 0.5rem 0rem 0.5rem; } .footer__profile__social__media__links ul li .bx { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.8rem; line-height: 1.8rem; transition: 0.6s; /* color: var(--color-footer-section-social-media-icons); */ color: var(--color-footer-section-social-media-icons); } .footer__profile__social__media__links ul li .bx:hover { color: var(--color-footer-section-social-media-icons-hover); } .footer__profile__social__media__links ul li a { position: relative; display: block; width: 3rem; height: 3rem; border-radius: 50%; /* background-color: var(--color-footer-section-social-media-icons-background); */ background-color: var(--color-debt-masters-dark-blue); /* background-color: var(--color-debt-masters-light-blue); */ text-align: center; transition: 0.6s; box-shadow: var(--color-box-shadow-02); /* border: 1px solid black; */ } /* ====================================== */ /* TODO: NOTE: Translate (width, height) */ /* ====================================== */ .footer__profile__social__media__links ul li a:hover { transform: translate(0, -0.4rem); } /* ============================== */ /* IMPLEMENT ON HOVER - FACEBOOK */ /* ============================== */ .footer__profile__social__media__links ul li:nth-child(1) a:hover { /* background-color: var(--color-facebook2); */ background-color: var(--color-debt-masters-light-blue); /* background-color: var(--color-debt-masters-dark-blue); */ } /* =============================== */ /* IMPLEMENT ON HOVER - INSTAGRAM */ /* =============================== */ .footer__profile__social__media__links ul li:nth-child(2) a:hover { /* background-color: var(--color-instagram); */ background-color: var(--color-debt-masters-light-blue); /* background-color: var(--color-debt-masters-dark-blue); */ } /* ============================= */ /* IMPLEMENT ON HOVER - TWITTER */ /* ============================= */ .footer__profile__social__media__links ul li:nth-child(3) a:hover { /* background-color: var(--color-twitter); */ background-color: var(--color-debt-masters-light-blue); /* background-color: var(--color-debt-masters-dark-blue); */ } /* ============================== */ /* IMPLEMENT ON HOVER - LINKEDIN */ /* ============================== */ .footer__profile__social__media__links ul li:nth-child(4) a:hover { /* background-color: var(--color-linkedin); */ background-color: var(--color-debt-masters-light-blue); /* background-color: var(--color-debt-masters-dark-blue); */ } /* ============================= */ /* IMPLEMENT ON HOVER - YOUTUBE */ /* ============================= */ .footer__profile__social__media__links ul li:nth-child(5) a:hover { /* background-color: var(--color-youtube); */ background-color: var(--color-debt-masters-light-blue); /* background-color: var(--color-debt-masters-dark-blue); */ } /* ============================== */ /* IMPLEMENT ON HOVER - WHATSAPP */ /* ============================== */ .footer__profile__social__media__links ul li:nth-child(6) a:hover { /* background-color: var(--color-whatsapp); */ background-color: var(--color-debt-masters-light-blue); /* background-color: var(--color-debt-masters-dark-blue); */ } /* =========================== */ /* IMPLEMENT ON HOVER - EMAIL */ /* =========================== */ .footer__profile__social__media__links ul li:nth-child(7) a:hover { /* background-color: var(--color-email); */ background-color: var(--color-debt-masters-light-blue); /* background-color: var(--color-debt-masters-dark-blue); */ } /* ===================================================================================================================== */ /* TODO: PART 5 - FOOTER - COLUMNS */ /* ===================================================================================================================== */ /* ======================================== */ /* FIXME: CONTAINER - HOLDING ALL COLUMNS */ /* ======================================== */ .footer__column__container__all { display: flex; flex-wrap: wrap; /* border: 1px solid black; */ } .footer__column__container__all ul li { margin: 0rem 0rem 0rem 0rem; } .footer__column__group__header { margin: 0rem 3rem 0rem 8rem; } li.footer__column__group__name { color: var(--color-footer-section-column-group-header); text-transform: uppercase; font-size: 1.4rem; font-weight: 600; } .footer__column__group__header li { margin: 0rem 0rem 0rem 0rem; } .footer__column__group__header li a { color: var(--color-footer-section-column-group-list_items); font-size: 1.3rem; font-weight: 500; line-height: 0.9rem; padding: 0rem 0rem 0rem 0rem; } .footer__column__group__header li a:hover { color: var(--color-footer-section-column-group-list_items-hover); font-weight: 600; cursor: pointer; } .footer__column__group__item { color: var(--color-footer-section-column-group-list_items); text-transform: none; font-size: 1.3rem; font-weight: 500; /* border: 1px solid pink; */ } .request__call__back strong { color: var(--color-footer-section-column-group-list_items-strong); text-transform: none; font-size: 1.3rem; font-weight: 700; } .request__call__back strong:hover { color: var(--color-footer-section-column-group-list_items-strong-hover); text-transform: none; font-size: 1.3rem; font-weight: 700; } .online__application strong { color: var(--color-footer-section-column-group-list_items-strong); text-transform: none; font-size: 1.3rem; font-weight: 700; } .online__application strong:hover { color: var(--color-footer-section-column-group-list_items-strong-hover); text-transform: none; font-size: 1.3rem; font-weight: 700; } hr { height: 0.1rem; border: none; background-color: var(--color-footer-section-horisontal-line); margin: 1rem 0rem 1.5rem 0rem; } /* ============================================================== */ /* SECTION - CONTACT DETAILS - TELEPHONE / FAX / WHATSAPP / EMAIL */ /* ============================================================== */ .footer__column__group__telephone, .footer__column__group__fax, .footer__column__group__whatsapp, .footer__column__group__email { display: flex; justify-content: left; font-family: "Poppins", sans-serif; font-size: 1.3rem; font-weight: 500; color: var(--color-footer-section-contact-numbers-text); } .footer__column__group__telephone img, .footer__column__group__fax img, .footer__column__group__whatsapp img, .footer__column__group__email img { width: 1.7rem; height: 1.7rem; } .footer__column__group__email a, .footer__column__group__whatsapp a { text-decoration: none; color: var(--color-footer-section-contact-numbers-text); } /* ============================================ */ /* SECTION - COPYRIGHT / PAIA / POPI / PRIVACY */ /* ============================================ */ .footer__bottom { display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; font-size: 1.4rem; font-weight: 600; font-weight: 600; } .copy__right { margin: 0rem 0rem 0rem 0.5rem; color: var(--color-footer-section-copyright-text); display: flex; align-items: center; } .copy__right span { margin: 0rem 0rem 0rem 0.8rem; font-size: 1.4rem; font-weight: 600; letter-spacing: 0.05rem; } .footer__bottom__policies a { color: var(--color-footer-section-policies-text); font-size: 1.4rem; font-weight: 600; margin: 0rem 0.5rem 0rem 2rem; } .footer__bottom__policies a:hover { color: var(--color-footer-section-policies-text-hover); } /* ===================================================================================================================== */ /* TODO: PART 6 - RESPONSIVE DESIGN (MEDIA QUERIES) */ /* ===================================================================================================================== */ /* ============================= */ /* FIXME: BREAKPOINT: 1250 px */ /* ============================= */ @media screen and (max-width: 1250px) { .footer__column__group__header { margin: 0rem 3rem 0rem 8rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 1210 px */ /* ============================= */ @media screen and (max-width: 1210px) { .footer__column__group__header { margin: 0rem 3rem 0rem 5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 1200 px */ /* ============================= */ @media screen and (max-width: 1200px) { .footer__column__group__header { margin: 0rem 3rem 0rem 4rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 1167 px */ /* ============================= */ @media screen and (max-width: 1167px) { .footer__column__group__header { margin: 0rem 3rem 0rem 2.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 1060 px */ /* ============================= */ @media screen and (max-width: 1060px) { .footer__column__group__header { margin: 0rem 3rem 0rem 1.75rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 1030 px */ /* ============================= */ @media screen and (max-width: 1030px) { .footer__column__group__header { margin: 0rem 3rem 0rem 0.75rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 1000 px */ /* ============================= */ @media screen and (max-width: 1000px) { .footer__column__group__header { margin: 0rem 2.75rem 0rem 0rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 970 px */ /* ============================= */ @media screen and (max-width: 970px) { .footer__column__group__header { margin: 0rem 2.75rem 0rem 0rem; } .footer__profile__description { font-size: 1.1rem; } li.footer__column__group__name { font-size: 1.2rem; } .footer__column__group__item { font-size: 1.1rem; } .footer__column__group__header li a { font-size: 1.1rem; } .footer__column__group__email p, .footer__column__group__telephone p, .footer__column__group__fax p, .footer__column__group__whatsapp p { font-size: 1.1rem; } .footer__column__group__telephone img, .footer__column__group__fax img, .footer__column__group__whatsapp img, .footer__column__group__email img { width: 1.5rem; height: 1.5rem; } .request__call__back strong, .online__application strong { font-size: 1.2rem; } .request__call__back strong:hover, .online__application strong:hover { font-size: 1.2rem; } .copy__right span, .footer__bottom__policies a { font-size: 1.2rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 910 px */ /* ============================= */ @media screen and (max-width: 910px) { .footer__profile__container img { width: 25rem; } .footer__profile__description { max-width: 25rem; } .footer__profile__social__media__container { max-width: 25rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 855 px */ /* ============================= */ @media screen and (max-width: 855px) { .footer__column__group__header { margin: 0rem 2.75rem 0rem 0rem; } .footer__profile__description { font-size: 1rem; } li.footer__column__group__name { font-size: 1.1rem; } .footer__column__group__item { font-size: 1rem; } .footer__column__group__header li a { font-size: 1rem; } .footer__column__group__email p, .footer__column__group__telephone p, .footer__column__group__fax p, .footer__column__group__whatsapp p { font-size: 1rem; } .footer__column__group__telephone img, .footer__column__group__fax img, .footer__column__group__whatsapp img, .footer__column__group__email img { width: 1.4rem; height: 1.4rem; } .request__call__back strong, .online__application strong { font-size: 1.1rem; } .request__call__back strong:hover, .online__application strong:hover { font-size: 1.1rem; } .copy__right span, .footer__bottom__policies a { font-size: 1.1rem; } .footer__bottom__policies a { margin: 0rem 0.5rem 0rem 1.5rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 822 px */ /* ============================= */ /* FIXME: SPLIT INTO 1 COLUMN */ @media screen and (max-width: 822px) { footer { position: relative; } .footer__content__container { flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .footer__column__container__all { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 0rem 0rem 0rem 0rem; padding: 1rem 0rem 1rem 0rem; } .footer__column__container__all .footer__column__content { width: 15rem; margin: 0rem 0rem 0rem 0rem; padding: 0rem 0rem 0rem 0rem; gap: 2rem; } .footer__column__content .footer__column__group__number { width: 15rem; margin: 0rem 0rem 0rem 0rem; padding: 0rem 0rem 0rem 0rem; } .footer__bottom { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin: 1rem 0rem 1rem 0rem; row-gap: 1rem; } .footer__profile__container .footer__profile__logo { justify-content: center; } .footer__profile__description { font-size: 1rem; margin: 1rem 0.5rem 1rem 0.5rem; } .footer__profile__social__media__container { margin-bottom: 2rem; } .footer__column__container__all { display: flex; flex-wrap: wrap; row-gap: 2rem; margin: 1rem 0rem 1rem 0rem; } .footer__column__group__header { margin: 0rem 1rem 0rem 1rem; } .footer__column__group__number { margin: 0rem 0rem 0rem 0rem; } .footer__column__group__email, .footer__column__group__telephone, .footer__column__group__fax, .footer__column__group__whatsapp { display: flex; flex-direction: column; align-items: center; row-gap: 0.5rem; margin: 0.5rem 0rem 0.5rem 0rem; } .footer__bottom__policies a { margin: 0.5rem 0.25rem 0.5rem 0.25rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 415 px */ /* ============================= */ @media screen and (max-width: 415px) { .footer__column__container__all { display: flex; flex-direction: column; column-count: 1; flex: wrap; align-items: center; text-align: center; } .footer__column__container__all .footer__column__content { margin: 0rem 0rem 0rem 0rem; } .footer__column__content .footer__column__group__number { margin: 0rem 0rem 0.5rem 0rem; } } /* ============================= */ /* FIXME: BREAKPOINT: 370 px */ /* ============================= */ @media screen and (max-width: 370px) { .footer__profile__description { margin: 1rem 0.5rem 2rem 0.5rem; max-width: 30rem; height: 8rem; } .footer__profile__social__media__links ul li { margin: 0rem 0.4rem 0rem 0.4rem; } .footer__profile__container img { width: 21rem; margin: 0rem 0.5rem 0rem 0.5rem; } /* .footer__profile__description { max-width: 15rem; } */ .footer__profile__description p { width: 100%; margin: 0rem 0rem 0rem 0rem; } .footer__profile__social__media__container { max-width: 100%; margin: 0rem 0rem 0rem 0rem; } .footer__content__container { max-width: 100%; } .footer__profile__container { width: 22rem; margin: 0rem 0rem 0rem -2rem; } .footer__column__container__all { /* border: 1px solid blue; */ margin: 1.5rem 0rem 0rem -2rem; } } /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* FIXME:FIXME: SECTION - FOOTER (END) FIXME:FIXME: */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* ===================================================================================================================== */ /* TODO: STYLING ENDS TODO: */ /* ===================================================================================================================== */