/* Montserrat Font Weights */
@font-face {
    font-family: "Montserrat";
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-Thin.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-weight: 200;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-ExtraLight.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-Light.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-Regular.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-Medium.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-SemiBold.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-Bold.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-ExtraBold.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-Black.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-ThinItalic.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-ExtraLightItalic.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-LightItalic.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-RegularItalic.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-MediumItalic.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-SemiBoldItalic.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-BoldItalic.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-ExtraBoldItalic.otf");
  }
  @font-face {
    font-family: "Montserrat";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/montserrat/Montserrat-BlackItalic.otf");
  }
  
  /* Kanit Font Weights */
  @font-face {
    font-family: "Kanit";
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-Thin.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-weight: 200;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-ExtraLight.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-Light.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-Regular.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-Medium.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-SemiBold.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-Bold.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-ExtraBold.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-Black.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-style: italic;
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-ThinItalic.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-style: italic;
    font-weight: 200;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-ExtraLightItalic.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-LightItalic.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-RegularItalic.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-MediumItalic.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-SemiBoldItalic.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-BoldItalic.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-ExtraBoldItalic.otf");
  }
  @font-face {
    font-family: "Kanit";
    font-style: italic;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/kanit/Kanit-BlackItalic.otf");
  }
  
  :root {
    --primary-font: "Montserrat", serif;
    --secondary-font: "Kanit", serif;
  }
  
  .primary_font {
    font-family: var(--primary-font);
    font-style: normal;
  }
  
  .secondary_font {
    font-family: var(--secondary-font);
    font-style: normal;
  }
  
  .secondary_italic {
    font-style: italic;
    font-family: var(--secondary-font);
  }
  
  .font__light {
    font-weight: 300;
  }
  
  .fw__reg {
    font-weight: 400;
  }
  
  .fw__med {
    font-weight: 500;
  }
  
  .fw__semiBold {
    font-weight: 600;
  }
  
  .fw__bold {
    font-weight: 700;
  }
  
  .fw__extrabold {
    font-weight: 900;
  }
  
  .fw__thin {
    font-weight: 100;
  }
  
  /* Font Family Assignments */
  /* .heading-font {
    font-family: var(--primary-font);
  }
  
  .secondary-regular-font {
    font-family: var(--secondary-font);
  }
  
  .secondary-semibold-font {
    font-family: var(--secondary-font);
  }
  
  .primary-regular-font {
    font-family: var(--primary-font);
  }
  
  .primary-medium-font {
    font-family: var(--primary-font);
  }
  
  .primary-semibold-font {
    font-family: var(--primary-font);
  }
  
  .primary-bold-font {
    font-family: var(--primary-font);
  } */
  
  /* Font Size Levels */
  .level-1 {
    font-size: 45px;
  }
  
  .level-2 {
    font-size: 35px;
  }
  
  .level-3 {
    font-size: 25px;
  }
  
  .level-4 {
    font-size: 20px;
  }
  
  .level-5 {
    font-size: 18px;
  }
  
  .level-6 {
    font-size: 14px;
  }
  
  .level-7 {
    font-size: 12px;
  }
  
  .level-8 {
    font-size: 9px;
  }
  @media(max-width:1024px){
    .level-1 {
        font-size: 35px;
      }
      
      .level-2 {
        font-size: 30px;
      }
      
      .level-3 {
        font-size: 20px;
      }
      
      .level-4 {
        font-size: 15px;
      }
      
      .level-5 {
        font-size: 13px;
      }
      
      .level-6 {
        font-size: 12px;
      }
      
      .level-7 {
        font-size: 10px;
      }
      
      .level-8 {
        font-size: 9px;
      }
  }