@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/aeonik-medium.woff');
  font-weight: 500;
  font-style: normal
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/aeonik-bold.woff');
  font-weight: 700;
  font-style: normal;
}

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

html {
  font-size: 16px;
  /*base size for rem calculations*/

  font-family: 'Aeonik';
  font-weight: 500;
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

:root {
  --background-white: #F7FAFF;
  --background-gray-line: #E8EBF0;
  --color-blur: #2933437A;

  --color-gray: #DDE0E5;
  --color-dark-gray: #091A46;
  --color-light-gray: #515D7D;
  --color-blue: #3871FF;
  --color-dark-blue: #0037C2;
  --color-light-blue: #D2DFFC;
  --color-box-shadow: #EBEFF7;
  --color-why-rockone: #F0F4FB;
  --color-footer-background: #E5E9F2;
  --color-red: #EA1636;

  --transition-duration: 0.3s ease-in-out;
  --hamburger-bar-width: 1.3125rem;
  --hamburger-bar-height: 0.1rem;
  /*this value needed to currently diagonal calculation*/
  --hamburger-gap: 0.273895624rem;

  --hamburger-height: calc(var(--hamburger-bar-height) * 3 + var(--hamburger-gap) * 2);
  --hamburger-margin: 0.5rem;

  --small-phones: 375px;
  --phones: 768px;
  --tablets: 1024;
  --small-laptops: 1280;
  --desktops: 1281;

  --fs-xxs: 0.75rem;
  /* 12px */
  --fs-xs: 0.8125rem;
  /* 13 px*/
  --fs-sm: 0.875rem;
  /* 14px */
  --fs-m: 0.9375rem;
  /*15px*/
  --fs-base: 1rem;
  /* 16px */
  --fs-lg: 1.125rem;
  /* 18px */
  --fs-xl: 1.25rem;
  /* 20px */
  --fs-2xl: 1.5rem;
  /* 24px */
  --fs-2-1xl: 1.68rem;
  /*27px*/
  --fs-3xl: 2rem;
  /* 32px */
  --fs-4xl: 2.5rem;
  /* 40px */
  --fs-4-5xl: 2.75rem;
  /*44px*/
  --fs-5xl: 3rem;
  /* 48px */
  --fs-5xxl: 3.5rem;
  /* 56px */
  --fs-6xl: 4rem;
  /* 64px */
  --fs-7xl: 4.5rem;
  /* 72px */

  --space-1: 0.25rem;
  /* 4px */
  --space-1l: 0.37rem;
  /*6px*/
  --space-2: 0.5rem;
  /* 8px */
  --space-2l: 0.54rem;
  /*8.6px*/
  --space-3: 0.625rem;
  /*10px*/
  --space-3l: 0.6875rem;
  /*11px*/
  --space-4: 0.75rem;
  /* 12px */
  --space-4l: 0.85rem;

  --space-5: 1rem;
  /* 16px */
  --space-5l: 1.125rem;
  /*18px*/
  --space-6: 1.25rem;
  /* 20px */
  --space-6l: 1.3125rem;
  /*21px*/
  --space-6xl: 1.4rem;
  /*22.5px*/
  --space-7: 1.5rem;
  /* 24px */
  --space-7l: 1.6rem;
  /*25.6*/
  --space-8: 2rem;
  /* 32px */
  --space-8l: 2.25rem;
  /* 36px */
  --space-8xl: 2.45rem;
  /*39px*/
  --space-9: 2.5rem;
  /* 40px */
  --space-9l: 2.7rem;
  /*44px*/
  --space-10: 3rem;
  /* 48px */
  --space-11: 3.125rem;
  /* 50px */
  --space-11l: 3.43rem;
  /*55px*/
  --space-11ml: 3.5rem;
  /*56px*/
  --space-11xl: 3.562rem;
  /*57px*/
  --space-12: 3.75rem;
  /*60px*/
  --space-13: 4rem;
  /* 64px */
  --space-14: 4.3rem;
  /*70px*/
  --space-15: 4.5rem;
  /*73px*/
  --space-17: 4.6rem;
  /*75px*/
  --space-18: 5rem;
  /*80px*/
  --space-18l: 5.3rem;
  /*86px*/
  --space-19s: 5.9rem;
  /*95px*/
  --space-19l: 8.1rem;
  /*129px*/
  --space-19: 11.6rem;
  /*187px*/
  --space-20: 6.2rem;
  /*100px*/
  --space-20l: 6.39rem;
  /*102px*/
  --space-21: 6.8rem;
  /*110px*/
  --space-22: 7.5rem;
  /*120px*/
  --space-24: 9.6rem;
  /*155px*/

  --lh-tiny: 0.7;

  --lh-01: 0.9;
  --lh-01s: 0.91;
  --lh-01l: 0.95;
  --lh-001: 1;
  /*16px*/
  --lh-1l: 1.08;
  /*17px*/
  --lh-2: 1.125;
  /*18px*/
  --lh-3: 1.25;
  /*20px*/
  --lh-4: 1.375;
  /*22px*/
  --lh-4l: 1.44;
  --lh-4xl: 1.555;
  --lh-5: 2.0625;
  /*33px*/
  --lh-6: 2.5625;
  /*41px*/
  --lh-7: 3.75;
  /*60px*/
  --lh-8: 3.9375;
  /*63px*/
}

body {
  background-color: var(--background-white);
  margin-top: 0;
}

body.menu-open,
html.menu-open {
  overflow: hidden;
}

.container {
  max-width: 83.8rem;
  margin: 0 auto;
  padding: 0 var(--space-3l);
  position: relative;
  height: 100%;
}

.hero,
.services-process {
  max-width: 76.7rem;
  width: 100%;
  margin: 0 auto;
}

.contact-us-panel-inner {
  max-width: 82rem;
  max-height: 55.5rem;
  width: 100%;
  margin: 0 auto;
}

.header,
.header-wrapper {
  max-width: 84.5rem;
  width: 100%;
  margin-left: auto;
}

.nav-list {
  max-width: 81rem;
  width: 100%;
  margin: 0 auto;
}

.background-lines {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 82.5rem;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.background-lines::before,
.background-lines::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: var(--background-gray-line);
}

@media (hover: hover) and (pointer: fine) {
  body.menu-open {
    padding-right: var(--space-5);
  }
}

@media (max-width: 768px) {
  body .background-line-middle {
    left: 54% !important;
  }
}

@media (max-width: 1024px) {
  .background-lines::before {
    left: var(--space-2) !important;
  }

  .background-lines::after {
    right: var(--space-2) !important;
  }

  .container {
    padding: 0 var(--space-6) !important;
  }
}

.background-lines::before {
  left: 0;
}

.background-lines::after {
  right: 0;
}

body .background-line-middle {
  position: absolute;
  left: 71%;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: var(--background-gray-line);
  z-index: 1;
  transition: left var(--transition-duration);
}

body.menu-open .header::before {
  background: #fff;
  opacity: 1;
}

.why-rockone-container {
  max-width: 88rem;
  width: 100%;
  margin: 0 auto;
  position: relative;
  height: fit-content;
}

.contact-us-btn:focus-visible {
  outline: none;
  border: 4px solid var(--color-blue) !important;
  border-radius: 0.5rem !important;
}

.cta-btn:focus-visible {
  outline: none;
  border: 4px solid black !important;
  border-radius: 0.5rem !important;
}

.footer-main-container {
  max-width: 83.5rem;
  margin: 0 auto;
  padding: 0 var(--space-4);
  position: relative;
  height: 100%;
}

.br-mobile {
  display: inline;
}

.br-desktop {
  display: none;
}

@media (min-width: 768px) {
  .br-mobile {
    display: none;
  }

  .br-desktop {
    display: inline;
  }
}