:root {
  /* ////////////////////////////////////////
  //// Global Color Settings //////////
  /////////////////////////////////////// */
  --black: #231f20;
  --gray: #eef5f8;
  --white: #ffffff;
  --offWhite: #f2f3f4;
  --color1: #009fe3;
  --color2: #29235c;
  --color3: #49c5b1;
  --color4: #7f56d9;
  --gradient: linear-gradient(-90deg, #009fe3, #0e76b6, #1b4c89, #29235c);
  /* //////////////////////////////////////
  //// Global Spinner Settings /////////
  ////////////////////////////////////// */
  --spinner-color: var(--color1);
  /* ////////////////////////////////////////
  //// Global Spacing Settings //////////
  ///////////////////////////////////////
  // max-wdith, minus left-right-padding */
  --content-width: 1400px;
  --text-max-width: 850px;
  --horizontal-padding: 50px;
  --vertical-padding-normal: 90px;
  --vertical-padding-more: 150px;
  --vertical-padding-less: 50px;
  /* ////////////////////////////////////////
  //// Global Styling Settings //////////
  ///////////////////////////////////////
  // max-wdith, minus left-right-padding */
  --border-radius-1: 40px;
  --border-radius-2: 20px;
  --line-thickness: 1px;
  /* ////////////////////////////////////////
  //// Global Transition Settings ///////
  ///////////////////////////////////////
  // max-wdith, minus left-right-padding */
  --transition-timing: 0.6s;
  --transition-ease: ease;
  /* /////////////////////////////////////
  //// Global Font Settings //////////
  ////////////////////////////////////
  // Body */
  --body-font-family: "Poppins", sans-serif;
  --body-font-weight: 300;
  --body-font-size: 16px;
  --body-line-height: 1.6;
  --body-font-color: var(--black);
  /* // Headlines */
  --headline-font-family: "Titillium Web", sans-serif;
  --headline-weight: 600;
  --headline-color: var(--color1);
  /* // Subheadlines */
  --subheadline-font-family: "Poppins", sans-serif;
  --subheadline-weight: 400;
  --subheadline-color: var(--color1);
  /* // h1 */
  --heading-1-size: 128px;
  --heading-1-height: 1;
  --heading-1-font-family: var(--headline-font-family);
  --heading-1-weight: var(--headline-weight);
  /* // h2 */
  --heading-2-size: 50px;
  --heading-2-height: 1.1;
  --heading-2-font-family: var(--headline-font-family);
  --heading-2-weight: var(--headline-weight);
  /* // h3 */
  --heading-3-size: 40px;
  --heading-3-height: 1.25;
  --heading-3-font-family: var(--headline-font-family);
  --heading-3-weight: var(--subheadline-weight);
  /* // h4 */
  --heading-4-size: 30px;
  --heading-4-height: 1.3;
  --heading-4-font-family: var(--headline-font-family);
  --heading-4-weight: var(--subheadline-weight);
  --heading-4-color: var(--color1);
  /* // h5 */
  --heading-5-size: 28px;
  --heading-5-height: 1.5;
  --heading-5-font-family: var(--subheadline-font-family);
  --heading-5-weight: var(--body-font-weight);
  /* // h6 */
  --heading-6-size: 20px;
  --heading-6-height: 1.5;
  --heading-6-font-family: var(--subheadline-font-family);
  --heading-6-weight: var(--body-font-weight);
  /* /////////////////////////////
  //// Text Link Settings ////
  //////////////////////////// */
  --text-link-color: var(--color1);
  --text-link-underline-color: var(--color1);
  --text-link-underline-height: 1px;
  --text-link-underline-offset: 3px;
  /* // On Hover */
  --text-link-color-hover: var(--color2);
  --text-link-underline-height-hover: 1px;
  /* //////////////////////////
  //// List Settings //////
  ///////////////////////// */
  --list-marker-color: var(--color1);
  --list-item-vertical-margin: 0.5rem;
  /* ////////////////////////
  //// HR Settings //////
  /////////////////////// */
  --hr-color: var(--color2);
  --hr-width: 100%;
  --hr-height: 1px;
  /* ////////////////////////////////
  //// Block Quote Settings //////
  /////////////////////////////// */
  --block-quote-border-color: var(--color2);
  --block-quote-font-size: 1em;
  --block-quote-vertical-sapcing: 16px;
  --block-quote-horizontal-sapcing: calc(var(--block-quote-vertical-sapcing) * 2);
  /* ////////////////////////////////
  //// Button Settings //////////
  /////////////////////////////// */
  --button-font-family: var(--body-font-family);
  --button-text-size: 16px;
  --button-text-weight: var(--body-font-weight);
  --button-vertical-padding: 12px;
  --button-horizontal-padding: 20px;
  --button-margins: 10px;
  --button-text-color: var(--color1);
  --button-background-color: var(--white);
  --button-border-radius: 8px;
  /* // Hover Settings */
  --button-text-color-hover: var(--color1);
  --button-background-color-hover: var(--gray);
  /* ////////////////////////////////
  //// Input Settings ///////////
  /////////////////////////////// */
  --input-font-family: var(--body-font-family);
  --input-font-weight: var(--body-font-weight);
  --input-padding-vertical: 10px;
  --input-padding-horizontal: 12px;
  --input-border-highlight: var(--color1);
  --input-border-radius: 0;
  /* ////////////////////////////////////////
  //// Global Box Shadow Settings ///////
  /////////////////////////////////////// */
  --box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  /* // Hover */
  --box-shadow-hover: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  /* ////////////////////////////////////////
  //// Global Pagination Settings ///////
  ///////////////////////////////////////
  // Section Spacing */
  --pagination-padding-vertical: 30px;
  --pagination-padding-horizontal: 0;
  /* // Border */
  --pagination-border-width: 1px;
  --pagination-border-color: var(--black);
  /* // Button Spacing */
  --pagination-button-padding-vertical: 10px;
  --pagination-button-padding-horizontal: 15px;
  --pagination-button-space-between: 8px;
  /* // Clickable Buttons */
  --pagination-clickable-text-color: var(--black);
  --pagination-clickable-background-color: var(--color1);
  --pagination-clickable-border-color: var(--color1);
  /* // Clickable Buttons Hover */
  --pagination-clickable-text-color-hover: var(--black);
  --pagination-clickable-background-color-hover: white;
  --pagination-clickable-border-color-hover: var(--black);
  /* // Active Button */
  --pagination-active-text-color: var(--pagination-clickable-text-color);
  --pagination-active-background-color: white;
  --pagination-active-border-color: var(--color1);
  /* // Next Prev Buttons */
  --pagination-net-prev-padding: calc(var(--pagination-button-padding-horizontal) + 5px);
  /* //////////////////////////
  //// Header Settings ////
  /////////////////////////
  // This determines the height of the logo. */
  --header-position: fixed;
  --header-height: 100px;
  --header-vertical-padding: 40px;
  --header-background-color: rgba(0, 0, 0, 0);
  --header-menu-item-spacing: 30px;
  --header-font-size: 16px;
  --header-font-family: var(--body-font-family);
  --header-font-weight: var(--body-font-weight);
  --header-nav-link-color: var(--white);
  --header-nav-link-underline-color: var(--color2);
  --header-nav-link-underline-color-hover: var(--color2);
  --header-nav-link-underline-height: 0px;
  --header-nav-link-underline-height-hover: 0px;
  --header-nav-active-link-color: var(--offWhite);
  --header-search-text-color: var(--black);
  --header-search-button-text-color: var(--white);
  --header-search-button-background-color: var(--black);
  /* //////////////////////////
  //// Modal Settings ////
  /////////////////////////*/
  --modal-background-color: var(--color2);
  --modal-text-color: var(--white);
  --modal-border-radius: 40px;
  /* //////////////////////////
  //// Footer Settings ////
  /////////////////////////
  /// // Footer Section Spacing */
  --footer-vertical-spacing-top: 90px;
  --footer-vertical-spacing-bottom: 60px;
  /* // Take Total Number of Columns divide by 100 */
  --footer-tile-width: 33.333333%;
  --footer-tile-padding-vertical: 0px;
  --footer-tile-padding-horizontal: 25px;
  /* // Tile Text */
  --footer-font-size: var(--body-font-size);
  --footer-font-weight: 300;
  --footer-background-color: var(--white);
  --footer-text-color: var(--black);
  --footer-text-color-hover: var(--color2);
  /* // Tile Title */
  --footer-title-font-family: var(--headline-font-family);
  --footer-title-font-size: 24px;
  --footer-title-font-weight: 400;
  --footer-title-margin-bottom: 20px;
  /* // Footer Links */
  --footer-nav-link-underline-height: 0px;
  --footer-nav-link-underline-height-hover: 2px;
  /* // Copyright Footer */
  --copyright-background-color: none;
  --copyright-text-color: inherit;
  --copyright-vertical-padding: 18px;
  /* //////////////////////////////
  //// WP Standard Settings ///
  ///////////////////////////// */
  --wp-post-block-padding: 50px;
}
@media screen and (max-width: 1024px) {
  :root {
    --header-vertical-padding: 25px;
    /* // Take Total Number of Columns divide by 100 */
    --header-height: 90px;
    --heading-1-size: 100px;
    --heading-1-height: 1.15;
    /* // h2 */
    --heading-2-size: 58px;
    --heading-2-height: 1.2;
    /* // h3 */
    --heading-3-size: 52px;
    --heading-3-height: 1.25;
    /* // h4 */
    --heading-4-size: 36px;
    --heading-4-height: 1.3;
    /* // h5 */
    --heading-5-size: 28px;
    --heading-5-height: 1.5;
    /* // h6 */
    --footer-tile-width: 50%;
    --footer-tile-padding-vertical: 30px;
    /* --footer-tile-padding-horizontal: 25px; */
  }
}
@media screen and (max-width: 885px) {
  :root {
    --horizontal-padding: 35px;
    --vertical-padding-normal: 60px;
    --vertical-padding-more: 120px;
    --vertical-padding-less: 30px;
    --border-radius-1: 20px;
    --border-radius-2: 10px;
    --body-font-size: 16px;
    --body-line-height: 1.65;
    /* // h1 */
    --heading-1-size: 85px;
    --heading-1-height: 1.1;
    /* // h2 */
    --heading-2-size: 40px;
    --heading-2-height: 1.1;
    /* // h3 */
    --heading-3-size: 32px;
    --heading-3-height: 1.15;
    /* // h4 */
    --heading-4-size: 28px;
    --heading-4-height: 1.3;
    /* // h5 */
    --heading-5-size: 24px;
    --heading-5-height: 1.5;
    /* // h6 */
    --heading-6-size: 16px;
    --heading-6-height: 1.5;
    /* // Footer Section Spacing */
    --footer-vertical-spacing-top: 30px;
    --footer-vertical-spacing-bottom: 40px;
    /* // Take Total Number of Columns divide by 100 */
    --footer-tile-width: 100%;
    /* --footer-tile-padding-vertical: 0px; */
    /* --footer-tile-padding-horizontal: 25px; */
  }
}