/* Friendly Infotech theme variables (home) */

          :root {
            /* Typography */
            --font-body--family: "Inter", sans-serif;
            --font-body--style: normal;
            --font-body--weight: 400;
    
            --font-heading--family: "Poppins", sans-serif;
            --font-heading--style: normal;
            --font-heading--weight: 600;
    
            --font-button--family: "Poppins", sans-serif;
            --font-button--style: normal;
            --font-button--weight: 600;
    
            /* h1-h6 */
            --font-h1--size: 60px;
            --font-h2--size: 48px;
            --font-h3--size: 36px;
            --font-h4--size: 24px;
            --font-h5--size: 20px;
            --font-h6--size: 16px;
    
            /* header nav */
            --font-nav-main: 16px;
    
            /* Colors */
            --color-background: rgba(255, 255, 255, 1);
            --color-foreground: rgba(28, 37, 57, 1);
            --color-foreground-heading: rgba(28, 37, 57, 1);
            --color-foreground-subheading: rgba(93, 102, 111, 1);
            --color-background-subheading: rgba(255, 255, 255, 0.1);
            --color-border-subheading-bg: rgba(32, 40, 45, 0.1);
            --color-primary: rgba(28, 37, 57, 1);
            --color-primary-background: rgba(28, 37, 57, 1);
            --color-primary-hover: rgba(28, 37, 57, 1);
            --color-primary-background-hover: rgba(28, 37, 57, 1);
            --color-border: rgba(255, 255, 255, 0.2);
            --color-border-hover: rgba(93, 102, 111, 0.5);
            --color-shadow: rgba(0, 0, 0, 1);
            --color-overlay: rgba(28, 37, 57, 0.6);
    
            /* Buttons */
            --font-button-size: 16px;
            --font-button-size-mobile: 16px;
            --style-button-height: 56px;
            --style-button-height-mobile: 48px;
            --style-button-slim-height: 52px;
            --style-button-slim-height-mobile: 40px;
            --style-cta-underline-offset: 5px;
            --style-cta-underline-thickness: 1px;
    
            /* Colors - Primary Button */
            --color-primary-button-text: rgba(255, 255, 255, 1);
            --color-primary-button-background: rgba(32, 40, 45, 1);
            --color-primary-button-border: rgba(32, 40, 45, 1);
            --color-primary-button-icon: rgba(28, 37, 57, 1);
            --color-primary-button-icon-background: rgba(255, 255, 255, 1);
    
            --color-primary-button-hover-text: rgba(32, 40, 45, 1);
            --color-primary-button-hover-background: rgba(255, 255, 255, 1);
            --color-primary-button-hover-border: rgba(32, 40, 45, 1);
            --color-primary-button-hover-icon: rgba(255, 255, 255, 1);
            --color-primary-button-hover-icon-background: rgba(28, 37, 57, 1);
    
            /* Colors - Secondary Button */
            --color-secondary-button-text: rgba(32, 40, 45, 1);
            --color-secondary-button-background: rgba(255, 255, 255, 1);
            --color-secondary-button-border: rgba(255, 255, 255, 1);
            --color-secondary-button-icon: rgba(255, 255, 255, 1);
            --color-secondary-button-icon-background: rgba(32, 40, 45, 1);
    
            --color-secondary-button-hover-text: rgba(255, 255, 255, 1);
            --color-secondary-button-hover-background: rgba(32, 40, 45, 1);
            --color-secondary-button-hover-border: rgba(32, 40, 45, 1);
            --color-secondary-button-hover-icon: rgba(28, 37, 57, 1);
            --color-secondary-button-hover-icon-background: rgba(255, 255, 255, 1);
    
            /* Colors - Input */
            --color-input-background: rgba(255, 255, 255, 1);
            --color-input-text: rgba(93, 102, 111, 1);
            --color-input-border: rgba(93, 102, 111, 0.2);
            --color-input-hover-background: rgba(255, 255, 255, 1);
            --color-input-hover-text: rgba(93, 102, 111, 1);
            --color-input-hover-border: rgba(93, 102, 111, 0.2);
    
            /* Borders */
            --style-border-width-buttons-primary: 1px;
            --style-border-width-buttons-secondary: 1px;
            --style-border-radius-buttons-primary: 40px;
            --style-border-radius-buttons-secondary: 40px;
    
            --style-border-width-inputs: 1px;
            --style-border-radius-inputs: 8px;
            --style-border-width: 1px;
    
            /* Focus */
            --focus-outline-width: 1px;
            --focus-outline-offset: 3px;
    
            /* Pagination */
            --style-pagination-border-width: 1px;
            --pagination-item-foreground: rgba(28, 37, 57, 1);
            --pagination-item-background: rgba(242, 242, 242, 1);
            --pagination-item-border: rgba(242, 242, 242, 1);
            --pagination-item-active-foreground: rgba(255, 255, 255, 1);
            --pagination-item-active-background: rgba(28, 37, 57, 1);
            --pagination-item-active-border: rgba(28, 37, 57, 1);
    
            /* Swiper */
            --swiper-navigation-size: 14px;
            --swiper-navigation-color: rgba(28, 37, 57, 1);
            --swiper-navigation-background-color: rgba(242, 242, 242, 1);
            --swiper-navigation-hover-color: rgba(28, 37, 57, 1);
            --swiper-navigation-hover-background-color: transparent;
            --swiper-pagination-bullet-inactive-color: rgba(242, 242, 242);
            --swiper-pagination-color: rgba(28, 37, 57, 1);
            --swiper-pagination-bullet-inactive-opacity: 1;
          }
          @media (max-width: 767px) {
            :root {
              --font-h1--size: 48px;
              --font-h2--size: 40px;
              --font-h3--size: 28px;
              --font-h4--size: 20px;
              --font-h5--size: 18px;
              --swiper-navigation-size: 12px;
            }
          }