@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


/* ---------------------------- modern css reset ---------------------------- */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/* -------------------------------------------------------------------------- */
/*                                 global css                                 */
/* -------------------------------------------------------------------------- */


:root{
  --gray-light: rgba(222, 235, 241, 0.35);
  --gray-dark:#2d3845;
  --cyan:#00bdff;
  --blue: #0036fa;
  --blue-light: #0080fa;
  --blue-lighter:#009dfa;
  --blue-dark: #1958a4;
  --blue-darker: #133d71;
  --white:#FFF;
  --black:#333333;
  --black-light:#314763;

 /* ---------------------------------- sizes --------------------------------- */
    --rem-2: 0.125rem;
    --rem-4: 0.25rem;
    --rem-6: 0.375rem;
    --rem-8: 0.5rem;
    --rem-10: 0.625rem;
    --rem-12: 0.75rem;
    --rem-14: 0.875rem;
    --rem-base: 1rem;
    --rem-18: 1.125rem;
    --rem-20: 1.25rem;
    --rem-22: 1.375rem;
    --rem-24: 1.5rem;
    --rem-26: 1.625rem;
    --rem-28: 1.75rem;
    --rem-30: 1.875rem;
    --rem-32: 2rem;
    --rem-34: 2.125rem;
    --rem-36: 2.25rem;
    --rem-38: 2.375rem;
    --rem-40: 2.5rem;
    --rem-42: 2.625rem;
    --rem-44: 2.75rem;
    --rem-46: 2.875rem;
    --rem-48: 3rem;
    --rem-50: 3.125rem;
    --rem-52: 3.25rem;
    --rem-54: 3.375rem;
    --rem-56: 3.5rem;
    --rem-58: 3.625rem;
    --rem-60: 3.75rem;
    --rem-62: 3.875rem;
    --rem-64: 4rem;
    --rem-66: 4.125rem;
    --rem-68: 4.25rem;
    --rem-70: 4.375rem;
    --rem-72: 4.5rem;
    --rem-74: 4.625rem;
    --rem-76: 4.75rem;
    --rem-78: 4.875rem;
    --rem-80: 5rem;
    --rem-82: 5.125rem;
    --rem-84: 5.25rem;
    --rem-86: 5.375rem;
    --rem-88: 5.5rem;
    --rem-90: 5.625rem;
    --rem-92: 5.75rem;
    --rem-94: 5.875rem;
    --rem-96: 6rem;
    --rem-98: 6.125rem;
    --rem-100: 6.25rem;
    --rem-102: 6.375rem;
    --rem-104: 6.5rem;
    --rem-108: 6.75rem;
    --rem-110: 6.875rem;
    --rem-112: 7rem;
    --rem-114: 7.125rem;
    --rem-116: 7.25rem;
    --rem-118: 7.375rem;
    --rem-120: 7.5rem;
    --rem-122: 7.625rem;
    --rem-124: 7.75rem;
    --rem-150: 9.375rem;
}

/* -------------------------------------------------------------------------- */
/*                                   utility                                  */
/* -------------------------------------------------------------------------- */

/* ---------------------------------- color --------------------------------- */


.fn_clr--gray-light {
  color: var(--gray-light);
}

.fn_clr--gray-dark {
  color: var(--gray-dark);
}

.fn_clr--cyan {
  color: var(--cyan);
}

.fn_clr--blue {
  color: var(--blue);
}

.fn_clr--blue-light {
  color: var(--blue-light);
}

.fn_clr--blue-lighter {
  color: var(--blue-lighter);
}

.fn_clr--blue-dark {
  color: var(--blue-dark);
}

.fn_clr--blue-darker {
  color: var(--blue-darker);
}

.fn_clr--white {
  color: var(--white);
}

.fn_clr--black {
  color: var(--black);
}
.fn_clr--black-light {
  color: var(--black-light);
}



/* -------------------------------- bg color -------------------------------- */


.bg--gray-light {
  background-color: var(--gray-light);
}

.bg--gray-dark {
  background-color: var(--gray-dark);
}

.bg--cyan {
  background-color: var(--cyan);
}

.bg--blue {
  background-color: var(--blue);
}

.bg--blue-light {
  background-color: var(--black-light);
}

.bg--blue-lighter {
  background-color: var(--blue-lighter);
}

.bg--blue-dark {
  background-color: var(--blue-dark);
}

.bg--blue-darker {
  background-color: var(--blue-darker);
}

.bg--white {
  background-color: var(--white);
}
.bg--black {
  background-color: var(--black);
}
.bg--black-light {
  background-color: var(--black-light);
}



/* ------------------------------- font weight ------------------------------ */


.f-bold {
    font-weight: 700;
  }
  
  .f-semibold {
    font-weight: 500;
  }
  
  .f-normal {
    font-weight: 400;
  }
  
  .f-light {
    font-weight: 300;
  }
  

  /* text alignt  */

  .t-center{
    text-align: center;
  }
  .t-left{
    text-align: left;
  }
  .t-right{
    text-align: right;
  }




/* Text
   ========================================================================== */
.t--xxl {
  font-size: 25px;
  line-height: 1.6em;
}

.t--xl {
  font-size: 21px;
  line-height: 1.6em;
}

.t--lg {
  font-size: 17px;
  line-height: 1.6em;
}

.t--md {
  font-size: 16px;
  line-height: 1.6em;
}

.t--sm {
  font-size: 14px;
  line-height: 1.6em;
}

.t--xs {
  font-size: 13px;
  line-height: 1.6em;
}

.t--xxs {
  font-size: 12px;
  line-height: 1.6em;
}

@media (max-width: 599px) {
  .t--xxl {
    font-size: 21px;
    line-height: 1.4em;
  }

  .t--xl {
    font-size: 19px;
    line-height: 1.4em;
  }

  .t--lg {
    font-size: 15px;
    line-height: 1.4em;
  }

  .t--md {
    font-size: 14px;
    line-height: 1.4em;
  }

  .t--sm {
    font-size: 14px;
    line-height: 1.4em;
  }

  .t--xs {
    font-size: 13px;
    line-height: 1.4em;
  }

  .t--xxs {
    font-size: 12px;
    line-height: 1.4em;
  }
}
/* Headlines
   ========================================================================== */
.h--xl {
  font-size: 34px;
}

.h--lg {
  font-size: 23px;
}

.h--md {
  font-size: 19px;
}

.h--sm {
  font-size: 16px;
}

.h--xs {
  font-size: 14px;
}

.h--xxs {
  font-size: 13px;
}

@media (max-width: 767px) {
  [class^=h--] br,
p br {
    display: none;
  }
}
@media (min-width: 768px) {
  .h--xl {
    font-size: 62px;
    line-height: 1.1em;
  }

  .h--lg {
    font-size: 42px;
    line-height: 1.1em;
  }

  .h--md {
    font-size: 32px;
    line-height: 1.1em;
  }

  .h--sm {
    font-size: 24px;
    line-height: 1.1em;
  }

  .h--xs {
    font-size: 18px;
    line-height: 1.1em;
  }

  .h--xxs {
    font-size: 14px;
    line-height: 1.1em;
  }
}
.h--multi {
  line-height: 1.5em;
}

.h--sans {
  font-family: TTNormsPro-Normal, "Roboto", -apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
}

.h--sansbold {
  font-family: TTNormsPro-DemiBold, "Roboto", -apple-system, BlinkMacSystemFont, helvetica, arial, sans-serif;
}

/* ==========================================================================
   Margin & Padding
   ========================================================================== */
/* === PADDING */
.p--1 {
  padding: 0.5rem;
}

.pt--1 {
  padding-top: 0.5rem;
}

.pr--1 {
  padding-right: 0.5rem;
}

.pb--1 {
  padding-bottom: 0.5rem;
}

.pl--1 {
  padding-left: 0.5rem;
}

.px--1 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py--1 {
  padding: 0.5rem;
  padding-bottom: 0.5rem;
}

/* === MARGIN */
.m--1 {
  margin: 0.5rem;
}

.mt--1 {
  margin-top: 0.5rem;
}

.mr--1 {
  margin-right: 0.5rem;
}

.mb--1 {
  margin-bottom: 0.5rem;
}

.ml--1 {
  margin-left: 0.5rem;
}

.mx--1 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my--1 {
  margin: 0.5rem;
  margin-bottom: 0.5rem;
}

/* === PADDING */
.p--2 {
  padding: 1rem;
}

.pt--2 {
  padding-top: 1rem;
}

.pr--2 {
  padding-right: 1rem;
}

.pb--2 {
  padding-bottom: 1rem;
}

.pl--2 {
  padding-left: 1rem;
}

.px--2 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py--2 {
  padding: 1rem;
  padding-bottom: 1rem;
}

/* === MARGIN */
.m--2 {
  margin: 1rem;
}

.mt--2 {
  margin-top: 1rem;
}

.mr--2 {
  margin-right: 1rem;
}

.mb--2 {
  margin-bottom: 1rem;
}

.ml--2 {
  margin-left: 1rem;
}

.mx--2 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my--2 {
  margin: 1rem;
  margin-bottom: 1rem;
}

/* === PADDING */
.p--3 {
  padding: 1.5rem;
}

.pt--3 {
  padding-top: 1.5rem;
}

.pr--3 {
  padding-right: 1.5rem;
}

.pb--3 {
  padding-bottom: 1.5rem;
}

.pl--3 {
  padding-left: 1.5rem;
}

.px--3 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py--3 {
  padding: 1.5rem;
  padding-bottom: 1.5rem;
}

/* === MARGIN */
.m--3 {
  margin: 1.5rem;
}

.mt--3 {
  margin-top: 1.5rem;
}

.mr--3 {
  margin-right: 1.5rem;
}

.mb--3 {
  margin-bottom: 1.5rem;
}

.ml--3 {
  margin-left: 1.5rem;
}

.mx--3 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my--3 {
  margin: 1.5rem;
  margin-bottom: 1.5rem;
}

/* === PADDING */
.p--4 {
  padding: 2rem;
}

.pt--4 {
  padding-top: 2rem;
}

.pr--4 {
  padding-right: 2rem;
}

.pb--4 {
  padding-bottom: 2rem;
}

.pl--4 {
  padding-left: 2rem;
}

.px--4 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py--4 {
  padding: 2rem;
  padding-bottom: 2rem;
}

/* === MARGIN */
.m--4 {
  margin: 2rem;
}

.mt--4 {
  margin-top: 2rem;
}

.mr--4 {
  margin-right: 2rem;
}

.mb--4 {
  margin-bottom: 2rem;
}

.ml--4 {
  margin-left: 2rem;
}

.mx--4 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my--4 {
  margin: 2rem;
  margin-bottom: 2rem;
}

/* === PADDING */
.p--5 {
  padding: 2.5rem;
}

.pt--5 {
  padding-top: 2.5rem;
}

.pr--5 {
  padding-right: 2.5rem;
}

.pb--5 {
  padding-bottom: 2.5rem;
}

.pl--5 {
  padding-left: 2.5rem;
}

.px--5 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py--5 {
  padding: 2.5rem;
  padding-bottom: 2.5rem;
}

/* === MARGIN */
.m--5 {
  margin: 2.5rem;
}

.mt--5 {
  margin-top: 2.5rem;
}

.mr--5 {
  margin-right: 2.5rem;
}

.mb--5 {
  margin-bottom: 2.5rem;
}

.ml--5 {
  margin-left: 2.5rem;
}

.mx--5 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.my--5 {
  margin: 2.5rem;
  margin-bottom: 2.5rem;
}

/* === PADDING */
.p--6 {
  padding: 3rem;
}

.pt--6 {
  padding-top: 3rem;
}

.pr--6 {
  padding-right: 3rem;
}

.pb--6 {
  padding-bottom: 3rem;
}

.pl--6 {
  padding-left: 3rem;
}

.px--6 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py--6 {
  padding: 3rem;
  padding-bottom: 3rem;
}

/* === MARGIN */
.m--6 {
  margin: 3rem;
}

.mt--6 {
  margin-top: 3rem;
}

.mr--6 {
  margin-right: 3rem;
}

.mb--6 {
  margin-bottom: 3rem;
}

.ml--6 {
  margin-left: 3rem;
}

.mx--6 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.my--6 {
  margin: 3rem;
  margin-bottom: 3rem;
}

/* === PADDING */
.p--7 {
  padding: 3.5rem;
}

.pt--7 {
  padding-top: 3.5rem;
}

.pr--7 {
  padding-right: 3.5rem;
}

.pb--7 {
  padding-bottom: 3.5rem;
}

.pl--7 {
  padding-left: 3.5rem;
}

.px--7 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py--7 {
  padding: 3.5rem;
  padding-bottom: 3.5rem;
}

/* === MARGIN */
.m--7 {
  margin: 3.5rem;
}

.mt--7 {
  margin-top: 3.5rem;
}

.mr--7 {
  margin-right: 3.5rem;
}

.mb--7 {
  margin-bottom: 3.5rem;
}

.ml--7 {
  margin-left: 3.5rem;
}

.mx--7 {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.my--7 {
  margin: 3.5rem;
  margin-bottom: 3.5rem;
}

/* === PADDING */
.p--8 {
  padding: 4rem;
}

.pt--8 {
  padding-top: 4rem;
}

.pr--8 {
  padding-right: 4rem;
}

.pb--8 {
  padding-bottom: 4rem;
}

.pl--8 {
  padding-left: 4rem;
}

.px--8 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py--8 {
  padding: 4rem;
  padding-bottom: 4rem;
}

/* === MARGIN */
.m--8 {
  margin: 4rem;
}

.mt--8 {
  margin-top: 4rem;
}

.mr--8 {
  margin-right: 4rem;
}

.mb--8 {
  margin-bottom: 4rem;
}

.ml--8 {
  margin-left: 4rem;
}

.mx--8 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.my--8 {
  margin: 4rem;
  margin-bottom: 4rem;
}

/* === PADDING */
.p--9 {
  padding: 4.5rem;
}

.pt--9 {
  padding-top: 4.5rem;
}

.pr--9 {
  padding-right: 4.5rem;
}

.pb--9 {
  padding-bottom: 4.5rem;
}

.pl--9 {
  padding-left: 4.5rem;
}

.px--9 {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.py--9 {
  padding: 4.5rem;
  padding-bottom: 4.5rem;
}

/* === MARGIN */
.m--9 {
  margin: 4.5rem;
}

.mt--9 {
  margin-top: 4.5rem;
}

.mr--9 {
  margin-right: 4.5rem;
}

.mb--9 {
  margin-bottom: 4.5rem;
}

.ml--9 {
  margin-left: 4.5rem;
}

.mx--9 {
  margin-top: 4.5rem;
  margin-bottom: 4.5rem;
}

.my--9 {
  margin: 4.5rem;
  margin-bottom: 4.5rem;
}

/* === PADDING */
.p--10 {
  padding: 5rem;
}

.pt--10 {
  padding-top: 5rem;
}

.pr--10 {
  padding-right: 5rem;
}

.pb--10 {
  padding-bottom: 5rem;
}

.pl--10 {
  padding-left: 5rem;
}

.px--10 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py--10 {
  padding: 5rem;
  padding-bottom: 5rem;
}

/* === MARGIN */
.m--10 {
  margin: 5rem;
}

.mt--10 {
  margin-top: 5rem;
}

.mr--10 {
  margin-right: 5rem;
}

.mb--10 {
  margin-bottom: 5rem;
}

.ml--10 {
  margin-left: 5rem;
}

.mx--10 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.my--10 {
  margin: 5rem;
  margin-bottom: 5rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* btn style starts here */

button, .button, input[type=submit] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
button:focus, .button:focus, input[type=submit]:focus {
  outline: 0;
}

.btn,
.button {
  background-color: #0036fa;
  border: 2px solid #0036fa;
  border-radius: 3rem;
  color: #FFF;

  font-size: 12px;
  font-weight: normal;
  display: inline-block;
  letter-spacing: 0.1em;
  line-height: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.btn:focus,
.button:focus {
  outline: 0;
}
.btn:hover,
.button:hover {
  background-color: #002dd1;
  border-color: #002dd1;
  color: #FFF;
}
.btn-sm,
.button-sm {
  font-size: 13px;
  line-height: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.btn-xs,
.button-xs {
  font-size: 12px;
  line-height: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.btn-xxs,
.button-xxs {
  font-size: 12px;
  line-height: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.btn-full,
.button-full {
  box-sizing: border-box;
  width: 100%;
}
.btn-outline,
.button-outline {
  background-color: transparent;
  border-color: #0036fa;
  color: #0036fa;
}
.btn-outline:hover,
.button-outline:hover {
  background-color: #0036fa;
  border-color: #0036fa;
  color: #FFF;
}
.btn-secondary:hover,
.button-secondary:hover {
  color: #FFF;
}
.btn-secondary.button-reverse,
.button-secondary.button-reverse {
  color: #FFF;
}
.btn.disabled, .btn-delete,
.button.disabled,
.button-delete {
  background-color: transparent;
  border-color: #deebf1;
  color: #909eac;
}
.btn.disabled:hover, .btn-delete:hover,
.button.disabled:hover,
.button-delete:hover {
  background-color: transparent;
  border-color: #deebf1;
  color: #909eac;
}
.btn-cancel,
.button-cancel {
  background-color: transparent;
  border-color: #909eac;
  color: #909eac;
}
.btn-cancel:hover,
.button-cancel:hover {
  background-color: #909eac;
  border-color: #909eac;
  color: #FFF;
}
.btn-play,
.button-play {
  background-image: url(../img/icon-arrow.svg);
  background-position: center center;
  background-size: 1rem auto;
  background-repeat: no-repeat;
  border-radius: 80px;
  height: 80px;
  width: 80px;
}
.btn-play .hidden,
.button-play .hidden {
  display: none;
}
/* btn style starts here */

  /* a tag  */

  a{
    text-decoration: none;
    cursor: pointer;
    color: #333333;
  }

  p br{
    display: none;
  }


html{
    font-size: 16px;
    scroll-behavior: smooth;
    font-family: 'Roboto', sans-serif;
}
body{
    min-height: 100vh;
    position: relative;
    background: #FFFFFF;
  
    font-size: 1rem;
    color: var(--gray-dark);
    font-weight: normal;
    line-height: 1.2rem;
}

  

/* -------------------------------------------------------------------------- */
/*                                media queries                               */
/* -------------------------------------------------------------------------- */

/* --------------------------------- header --------------------------------- */

.siteheader{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
 
  background: transparent;
  transition: 300ms ease-in;
 
 
}

.siteheader.scrolling{
  background-color:#071733;
}

.siteheader_content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
 
  /* position: relative; */
}

.siteheader_logo{
  cursor: pointer;
  position: relative;
  z-index: 999;

}
.siteheader_nav-mobile{
  border: none;
  width: 1.88rem;
  height: 1.88rem;
  display: block;
  appearance: none;
  background: none;
  position: relative;
  outline: none;
  padding: 0;
  margin: 0;
  z-index: 100;

}

/* header burger  */

.hamburger{
  display: block;
  cursor: pointer;
  position: relative;
}
.hamburger .bar{
 
 display: block;
 background: rgb(230, 230, 230);
  height: 2px;
 transition: 0.4s;
 margin: 6px auto;
 border-radius: 4px;

 
}
.siteheader_nav-mobile.active .hamburger .bar:nth-child(1){
  transform: rotate(45deg) translate(40%, 0);
}

.siteheader_nav-mobile.active .hamburger .bar:nth-child(2){
  scale: 0;
}
.siteheader_nav-mobile.active .hamburger .bar:nth-child(3){
  transform: rotate(-45deg) translate(40%, 0);
}
.siteheader_nav{
  display: none;
  position: absolute;
  justify-content: center;
  
  padding: 100px 30px 60px;
  top: 0;
  left: 0;
  right: 0;
  background-color: #071733;
  z-index: 99;
  overflow-y: auto;
  

 
  
}
.siteheader_nav.active{
  display: flex;
  
  
}
.siteheader_nav-main ul{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  text-align: center;
    font-size: 12px;
    font-weight: 500;
    line-height: 2.5em;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    color: white
}

.siteheader_nav-main ul a{
  color: var(--white);
  font-weight: 500;
}

.siteheader_nav-main ul a:active,
.siteheader_nav-main ul a::selection,
.siteheader_nav-main ul a:hover{
  color: var(--blue-light);
}
.siteheader_nav-main-link.active{
  color: var(--blue-light);
}

.siteheader_nav-main-static{
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  text-align: center;
    font-size: 12px;
    /* font-weight: 300; */
    line-height: 2.5em;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    color: white;
    font-weight: 500;
    
}

/* --------------------------------- footer --------------------------------- */

.footer__container{
  margin: var(--rem-32) 0;
  padding: var(--rem-30) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
/* footer :left */
.footer_left{
  order: 1;
}
.footer_logo_link{
  display: grid;
  justify-content: center;
}


.footer_leagal_links{
  color: #909eac;
  display: block;
  font-size: 11px;
  letter-spacing: 0.03em;
  margin-top: 10px;
  text-align: centerleft;
}
.footer_leagal_links a{
  color: #909eac;
  font-size: 11px;
}
.footer_leagal_links a:hover{
  text-decoration: underline;
}


/* footer :right */
.footer_social_icons_list{
  display: flex;
  gap: 10px;
  padding: 0;
  align-items: center;
}
/*.social_icon{
  width: 25px;
}*/
.social_icon_facebook{
  width: 26px;
}
.social_icon_instagram{
  width: 26px;
}
.social_icon_threads{
  width: 23px;
}
.social_icon_linkedin{
  width: 25px;
}
.social_icon_twitter{
  width: 24px;
}










/* ? -------------------------------------------------------------------------- */
/* ?                              media query 640px                             */
/* ? -------------------------------------------------------------------------- */


@media (min-width: 40em) {

  p br{
    display: block;
  }
  
  /* ------------------------------- siteheader ------------------------------- */

  .siteheader_content{
    padding-left: var(--rem-44);
    padding-right: var(--rem-44);
  }


 

/* --------------------------------- footer --------------------------------- */
.footer__container{
  flex-direction: row;
  justify-content: space-between;
  padding-left: var(--rem-44);
  padding-right: var(--rem-44);
}
/* footer :left */
.footer_left{
order: 0;
  }
  .footer_logo_link{
    display: inherit;
  }

}
/* ? -------------------------------------------------------------------------- */
/* ?                              media query 768px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 75em) {


  .js-mobileNav{
    display: none;
  }




  /* ------------------------------- siteheader ------------------------------- */
  


.siteheader_nav{
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  padding: 0;
  background: transparent;
 
}
.siteheader_nav-main{
  display: flex;
  gap: var(--rem-22);
}
.siteheader_nav-main ul{
  flex-direction: row;
  text-align: unset;
  gap: var(--rem-22);
}
.siteheader_nav-main ul:nth-child(2){
  padding-left: var(--rem-22);
  border-left: 1px solid rgba(222, 235, 241, 0.35);
}

.siteheader_nav-main ul:nth-child(3){
  padding-left: var(--rem-22);
  border-left: 1px solid rgba(222, 235, 241, 0.35);
}

}
  



/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1024px                             */
/* ? -------------------------------------------------------------------------- */
/*@media (min-width: 64em) {
  
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1280px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 80em) {
 
  
}

/* ? -------------------------------------------------------------------------- */
/* ?                             media query 1536px                             */
/* ? -------------------------------------------------------------------------- */
@media (min-width: 96em) {

  /* --------------------------------- header --------------------------------- */

  .siteheader_content{
    max-width: 1280px;
    margin: 0 auto;
  }


  /* --------------------------------- footer --------------------------------- */

  .footer__container{
    max-width: 1280px;
    margin: 0 auto;
  }



}