// Variables
 $color-primary: #007bff;
 $color-secondary: #6c757d;
 $color-bg: #f8f9fa;
 $color-bg2: #302F3B;
 $color-text: #212529;
 $color-text2: #9DA6AE;
 $color-heading: #121117;
 $color-black: #191825;
 $color-white: #ffffff;


 // Footer Colors
 $footer-bg: #191825;
 $footer-text: #b0b3c0;
 $footer-heading: #ffffff;
 $footer-accent: #0073E6;
 $footer-border: rgba(255, 255, 255, 0.1);
 $footer-copyright-bg: #2B2A36;
 $footer-icon-dark: #000;

 $font-family-base: "DM Sans", sans-serif;
 $font-size-base: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
 $line-height-base: 1.5;
 $line-height-heading: 1.2;


 $spacer: 1rem;

 // rem() function
 @function rem($px) {
   @return calc($px / 16) * 1rem;
 }