:root {
  --color-dark: #0A0A0A;
  --color-orange: #f99d1c;
  --color-white: #f1f1f1;
  --color-light-gray: #d2d2d2;
  --color-gray: #d7d7d7;
  --color-pure-white: #ffffff;
  --color-dark-orange: #e65100;
  --color-dark-gray: #a9a8a8;
  --color-dark-text: #545454;
}



/* var(--color-dark); */
/* var(--color-orange); */
/* var(--color-white); */
/* var(--color-light-gray); */
/* var(--color-gray); */
/* var(--color-pure-white); */
/* var(--color-dark-orange); */
/* var(--color-dark-gray); */
/* var(--color-dark-text); */

body {
  font-family: "Rubik", sans-serif;
  line-height: 1.5;
  background-color: var(--color-pure-white);
  color: var(--color-dark);
  margin: 0;
  padding: 0;
}



img {
  display: block;
}

a {
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}





#web-line {
  position: relative;
  height: 100vh;
  z-index: 0;
}

.web-line-box {
  position: fixed;
  width: 100%;
  height: 100%;
}

.line-1 {
  width: 1px;
  height: 100%;
  background: var(--color-gray);
  left: 8%;
  position: absolute
}

.line-2 {
  width: 1px;
  height: 100%;
  background: var(--color-gray);
  left: 16%;
  position: absolute
}

.line-3 {
  width: 1px;
  height: 100%;
  background: var(--color-gray);
  left: 50%;
  position: absolute
}

.line-4 {
  width: 1px;
  height: 100%;
  background: var(--color-gray);
  left: 58%;
  position: absolute
}

.line-5 {
  width: 1px;
  height: 100%;
  background: var(--color-gray);
  left: 84%;
  position: absolute
}


#new-half-menu #web-line .line-4 {
  left: 8%;
}

#new-half-menu #web-line .line-5 {
  left: 34%;
}

.main-contant {
  position: relative;
}

.gotcha-contant {
  position: absolute;
  width: 100%;
  top: 0px;
  left: 0px;
}

.gotcha-container {
  width: 68%;
  margin: 0 auto;
}