:root{

/*  section styles*/
--spacing: 14.45vw;
--spacing-f: calc(var(--spacing) + 20px);
--spacing-f-n: calc(var(--spacing-f) * -1);
--spacing-n: calc(var(--spacing) * -1);

--section-offset: 90px;
--section-offset-f: 120px;

/*  row styles*/
  --max-width: 100%;
  --row-offset: 80px;


/*  column styles*/
  --column-gap: 40px;


/*elements styles*/
  --default-gap: 40px;

/*  header height*/
   --hh: 110px;

/*colors*/
 --font-color: #fff;
 --accent-color: #0082ED;
 --dark: #000A3C;


 /* fonts */
 --fz-h1: 5.9375rem;
 --fz-h2: 3.125rem;
 --fz-h3: 1.875rem;
 --fz-h4: 1.25rem;
 --fz-p: 1.25rem;
 --fz-p-xs: 1rem;

 --title-offset: 56px;
 --subtitle-offset: 32px;
 --text-offset: 24px;

}

@media screen and (min-width: 1200px) and (max-width: 1728px){
  :root{
    /* fonts */
    --fz-h1: 4rem;
    --fz-h2: 2.5rem;
    --fz-h3: 1.5rem;
    --fz-p: 1.125rem;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1480px){
  :root{
    /*  section styles*/
    --spacing: 4vw;

    --section-offset: 80px;
    /*  row styles*/
    --row-offset: 48px;

    /*  header height*/
    --hh: 96px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1199px){
  :root{
    /*  section styles*/
    --spacing: 28px;

    --fz-h1: 3.125rem;
    --title-offset: 40px;
    --fz-h2: 2.5rem;

  }
}

@media screen and (max-width: 1199px){
  :root{
    /*  section styles*/
    --section-offset: 60px;

    /*  row styles*/
    --row-offset: 40px;

    --hh: 80px;



    --fz-h3: 1.375rem;
    --fz-p: 1rem;
  }

}
@media screen and (max-width: 767px){
  :root{
    /*  section styles*/
    --spacing: 4px;

    --fz-h1: 2.5rem;
    --fz-h2: 1.875rem;

    --title-offset: 40px;
    --subtitle-offset: 24px;
    --text-offset: 16px;
  }
}