/*
-------------------------------------------------------------------
base css
-------------------------------------------------------------------
*/
:root {

    --fs-head1: normal normal bold 32px/65px Poppins-Bold;
    --s-fhead2: normal normal 600 28px/34px Poppins-SemiBold;
    --fs-head3: normal normal  20px/32px Poppins-SemiBold;
    --fs-head4: normal normal  18px/28px poppins-regular;
    --fs-desc: normal normal  15px/25px poppins-regular;
    --fs-subtitle: normal normal  15px/25px poppins-medium;
    --fs-h4box: normal normal  20px/28px Poppins-SemiBold;
    --fs-h4boxdesc: normal normal  15px/25px poppins-regular;
    --fs-ctabox: normal normal  22px/31px Poppins-BoldItalic;
    --fs-menuhead: normal normal 14px/25px Poppins-SemiBold;
  }
  /*Mobile devices*/
  @media only screen and (min-width: 320px) and (max-width: 480px) {
    :root {
  
      --fs-head1: normal normal bold 22px/42px Poppins-Bold;
      --fs-head2: normal normal 600 20px/32px Poppins-SemiBold;
      --fs-head3: normal normal  18px/32px Poppins-SemiBold;
      --fs-head4: normal normal  18px/28px poppins-regular;
      --fs-desc: normal normal  15px/30px poppins-regular;
      --fs-subtitle: normal normal  15px/30px poppins-medium;
      --fs-h4box: normal normal  18px/28px Poppins-SemiBold;
      --fs-h4boxdesc: normal normal  15px/28px poppins-regular;
      --fs-ctabox: normal normal  16px/22px Poppins-BoldItalic;
    }
  
  }
  
  /*Tablets*/
  @media only screen and (min-width: 481px) and (max-width: 767px) {
    :root {
  
      --fs-head1: normal normal bold 32px/65px Poppins-Bold;
      --fs-head2: normal normal 600 28px/34px Poppins-SemiBold;
      --fs-head3: normal normal  20px/32px Poppins-SemiBold;
      --fs-head4: normal normal  18px/28px poppins-regular;
      --fs-desc: normal normal  15px/30px poppins-regular;
      --fs-h4boxdesc: normal normal  14px/30px poppins-regular;
      --fs-subtitle: normal normal  15px/30px poppins-medium;
      --fs-ctabox: normal normal  22px/32px Poppins-BoldItalic;
    }
  
  }
  
  /*Small screens, laptops*/
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
    :root {
  
      --fs-head1: normal normal bold 32px/65px Poppins-Bold;
      --fs-head2: normal normal 600 28px/34px Poppins-SemiBold;
      --fs-head3: normal normal  20px/32px Poppins-SemiBold;
      --fs-head4: normal normal  18px/28px poppins-regular;
      --fs-desc: normal normal  15px/27px poppins-regular;
      --fs-h4boxdesc: normal normal  14px/20px poppins-regular;
      --fs-subtitle: normal normal  15px/30px poppins-medium;
    }
  
  }
  
  /*Desktops web*/
  @media only screen and (min-width: 1025px) and (max-width: 1566px) {
    :root {
  
      --fs-head1: normal normal bold 32px/65px Poppins-Bold;
      --fs-head2: normal normal 600 28px/34px Poppins-SemiBold;
      --fs-head3: normal normal  20px/32px Poppins-SemiBold;
      --fs-head4: normal normal  18px/28px poppins-regular;
      --fs-desc: normal normal  15px/27px poppins-regular;
      --fs-h4box: normal normal  18px/28px Poppins-SemiBold;
      --fs-h4boxdesc: normal normal  14px/20px poppins-regular;
      --fs-subtitle: normal normal  15px/32px poppins-medium;
    }
  
  }
  /*Extra large screens, TV*/
  @media only screen and (min-width: 1567px) {
    :root {
  
      --fs-head1: normal normal bold 45px/70px Poppins-Bold;
      --fs-head2: normal normal 600 30px/34px Poppins-Bold;
      --fs-head3: normal normal  25px/32px Poppins-SemiBold;
      --fs-head4: normal normal  20px/28px poppins-regular;
      --fs-desc: normal normal  18px/30px poppins-regular;
      --fs-h4box: normal normal  20px/28px Poppins-SemiBold;
      --fs-h4boxdesc: normal normal  16px/28px poppins-regular;
      --fs-subtitle: normal normal  18px/35px poppins-medium;
    }
     
  }