@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Slab&display=swap');

:root {
    --darkGray: #323643;
    --lightGray: #606470;
    --lightYellow: yellow;
    --lightLight: #f7f7f7; 
    --bodyFont: 'Poppins', sans-serif;
    --logoFont: 'Roboto Slab', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--bodyFont);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    position: relative;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--darkGray);
  padding: 20px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1100;
  border-bottom: 1px solid var(--lightGray);
}

nav .logo {
  font-family: var(--logoFont);
  text-decoration: none;
  font-size: 1.2vw;
  letter-spacing: 6px;
  font-weight: 600;
  color: var(--lightYellow);
  padding: 0 10px;
  z-index: 35;
  text-shadow: 1px 1px 0 #f1ed1c, 1px 6px 5px #000000;
  transition: 0.5s;
}

nav .logo:hover {
  color: #c0bd00;
  text-shadow: 1px 1px 0 #f1ed1c, 1px 6px 5px #3f3f3f;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  z-index: 1;
}

nav ul {
  position: relative;
  display: flex;
}

nav ul li {
  list-style: none;
  margin: 0 0.5em;
  text-align: center;
  outline: none;
  z-index: 33;
}

nav ul li a {
  position: relative;
  text-decoration: none;
  font-size: 18px;
  padding: 4px 12px;
  font-weight: 100;
  letter-spacing: 2px;
  color: var(--lightLight);
  outline: none;
  z-index: 999;
  text-shadow: none;
  transition: 0.4s;
}

nav ul li a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--lightYellow);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.4s ease-in-out;
}

nav ul li a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

nav .burger {
  display: none;
}

nav .mobileMenu {
  display: none;
  position: absolute;
  top: -600px;
  left: 0;
  width: 100%;
  line-height: 60px;
  opacity: 0;
  z-index: 20;
  transition: 0.6s;
}

section {
  padding: 100px;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px;
}

section#home, section#thanx {
  position: relative;
  width: 100%;
  min-height: calc(100vh + 34px);
  /* padding: ; */
  background-image: url("../graph/constructing3.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

section#home .yellowCorner {
  position: absolute;
  right: -12vw;
  top: -12vw;
  width: 24vw;
  height: 24vw;
  background-color: rgba(255, 251, 0, 0.507);
  /* border-radius: 50%; */
  transform: rotate(45deg);
}

section#home .homeHeader {
  width: 60vw;
  height: 100%;
  padding: 20px;
  color: yellow;
  border: 24px solid yellow;
  border-image: repeating-linear-gradient( 45deg, black, black 5%, yellow 5%, yellow 10%) 10;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  align-items:center;
  border-radius: 12px;
  margin-bottom: 6em;
  transition: 0.2s;
}

section#home .homeHeader:hover {
    border-image: repeating-linear-gradient( 45deg, yellow, yellow 5%, black 5%, black 10%) 10;
    color: yellow;
}

section#home .homeHeader h1 {
  color: #000000;
  font-family: var(--logoFont);
  font-size: clamp(2.6rem, 3.4vw, 3.6rem);
  text-shadow: 2px 2px 2px rgb(255, 255, 255);
  padding: 1rem 2rem;
  background-color: rgba(255, 255, 255, 0.486);
  /* border-radius: 12px; */
}

section#home .homeHeader h2 {
  font-family: var(--logoFont);
  letter-spacing: 2px;
  font-weight: 100;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
  text-shadow: 2px 2px 2px rgb(0, 0, 0);
  color: var(--lightYellow);
  padding: 1em 0;
}

section#home #sent {
  text-align: center;
  /* display: block; */
  border-bottom: 2px solid var(--lightYellow); 
  /* width: 96vw; */

}

section#home .homeHeader .aboutBtn {
  background-color: #000000;
  color: #f1ed1c;
  font-size: 2em;
  padding: 0.5em 1em;
  border-radius: 12px;
  text-decoration: none;
  border: 1px solid #f1ed1c;
  transition: 0.5s;
}

section#home .homeHeader .aboutBtn:hover {
  cursor: pointer;
  background-color: #f1ed1c;
  color: #000000;
  border: 1px solid black;
}

.heading {
  text-align: center;
  color: black;
  font-size: 60px;
  letter-spacing: 4px;
  padding: 0 0 20px 0;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.137);
}

.heading::first-letter {
  font-size: 2em;
  font-family: var(--headingFont)
}

section .horizonBar2, .horizonBar4 {
  position: absolute;
  bottom: 2em;
  width: 90%;
  height: 20px;
  background: linear-gradient(to right, var(--lightYellow), transparent);
  border-radius: 8px;
}

section#home .mixer {
  position: absolute;
  bottom: calc(2em + 20px);
  right: 50%;
  transform: translateX(50%);
  width: 14vw;
  height: auto;
  opacity: 0.5;
  animation: driving 2s ease-in-out;
}

@keyframes driving {
  0% {
    opacity: 0;
    right: -200px;
  }

  20% {
    opacity: 0.3;
  }

  80% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
    right: 55%;
  }

  100% {
    right: 50%;
  }
}

section#about {
  position: relative;
    min-height: calc(100vh - 71px);
    flex-direction: column;
}

section#about .absolutImg1 {
  position: absolute;
  top: 16%;
  right: 10vw;
  height: 500px;
  width:500px;
  background-color: #9191916b;
  transform: rotate(45deg);
  opacity: 0.5;
  z-index: 0;
}

.aboutHeading {
  padding-bottom: 1em;
  font-size: 4vw;
  z-index: 2;
}

.aboutHeading span {
  background-color: rgba(241, 237, 28, 0.767);
  padding: 1rem;
}

.aboutWrapper .arrow {
  margin: 0;
  margin-left: 10px;
	padding: 26px 0 26px 66px;
	list-style: none;
	background-image: url("../graph/arrow.png");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 70px;
  /* width: 40px;
  height: 40px; */
}

section#about .aboutWrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

section#about .aboutWrapper .paragraphs {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

section#about p {
  width: 100%;
  font-size: 2vw;
  z-index: 2;
  text-align: justify;
}

section#about p.second {
  font-size: 1.6vw;
}

section#about ul {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  align-items:center;
}

section#about ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 40%;
  height: 10vh;
  font-size: 1.5vw;
  z-index: 2;
  
}

section#about ul li.one {
  animation: flashText 4s linear infinite;
}
section#about ul li.two {
  animation: flashText 4s 1s linear infinite;
}
section#about ul li.three {
  animation: flashText 4s 2s linear infinite;
}
section#about ul li.four {
  animation: flashText 4s 3s linear infinite;
}

@keyframes flashText {
  0% {
    text-shadow: none;
  }
  40% {
    text-shadow: none;
  }
  50% {
    text-shadow: 0 0 3px black;
  }
  60% {
    text-shadow: none;
  }
  100% {
    text-shadow: none;
  }
}

section#about ul li img {
  width: 60px;
  height: auto;
}

section#about .horizonBar {
  position: absolute;
  bottom: 0;
  width: 90%;
  height: 20px;
  background: linear-gradient(to right, var(--lightYellow), transparent);
  border-radius: 8px;
}

section#contact {
  background: linear-gradient(#FFFFFF, #000000);
  flex-direction: column;
  position: relative;
}

section#contact h2 {
  color: #000000;
  font-family: var(--logoFont);
  font-size: clamp(2.8rem, 3.5vw, 3.8rem);
  text-shadow: 2px 2px 2px rgb(255, 255, 255);
  padding: 1rem 2rem;
}

section#contact h3 {
  padding-bottom: 2em;
}

section#contact .contactGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2em;
  justify-content: center;
  align-items: center;
  padding: 4em;
  background-color: #fff;
  width: 70vw;
  border-radius: 1em;
}

section#contact .contactGrid .gridLeft {
  position: relative;
  grid-column: span 1 / span 1;
  display: flex;
  flex-direction: column;
  justify-content:space-between;
  align-items:start;
  height: 100%;
}

section#contact .contactGrid .gridLeft img {
  position: absolute;
  right: -1em;
  top: 20%;
  transform: rotate(-10deg);
  width: 100%;
  opacity: 0.06;
}

section#contact .contactGrid .gridLeft p:first-of-type {
  font-size: 2em;
  width: 100%;
  text-align: center;
  font-weight: bolder; 
  background-color: rgba(241, 237, 28, 0.767);
}

section#contact .contactGrid .gridLeft p {
  font-size: 24px;
  line-height: 1.5;
  z-index: 4;
}

section#contact .contactGrid .gridLeft a {
  text-decoration: none;
  color: inherit;
}

section#contact .contactGrid .gridRight {
  width: 100%;
  grid-column: span 2 / span 2;
  margin: 0 auto;
}

section#contact form {
  /* max-width: 700px; */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: 1em;
  padding: 1em;
  background-color: #2b2b2b;
  border-radius: 5px;
}

section#contact form input,
section#contact form textarea {
  border: 1px solid rgba(0, 0, 0, 0.14);
  padding: 0.2em 1em;
  border-radius: 5px;
  font-family: inherit;
  font-size: inherit;
  color: #1d1d1d;
  width: 100%;
  /* border: 2px solid red; */
}

section#contact form button,
section#contact form textarea {
  grid-column: span 2 / span 2;
}

section#contact form button {
  border: none;
  padding: 0.4em 0;
  color: var(--lightYellow);
  background: linear-gradient(var(--lightGray), var(--darkGray));
  font-weight: 600;
  letter-spacing: 3px;
  border-radius: 5px;
  font-family: inherit;
  font-size: inherit;
  transition: 0.5s;
}

section#contact form button:hover {
  cursor: pointer;
  letter-spacing: 4px;
  background: linear-gradient(var(--darkGray), var(--lightGray));
}

section .horizonBar3 {
  position: absolute;
  bottom: 3em;
  width: 90%;
  height: 20px;
  background: linear-gradient(90deg, var(--lightYellow), transparent,  transparent);
  background-size: 200% 200%;
  border-radius: 8px;
  /* animation: bgChange 16s infinite linear; */
}

@keyframes bgChange {
  0%{background-position:10% 0%}
  50%{background-position:91% 100%}
  100%{background-position:10% 0%}
}

.footer {
  position: absolute;
  bottom: 5px;
  width: 100%;
  text-align: center;
  /* background-color: #000000; */
  color: var(--lightYellow);
  /* padding: 15px 0; */
  font-size: 16px;
}

.footer a {
  text-decoration: none;
  color: var(--lightYellow);
  letter-spacing: 1px;
  transition: 0.5s;
}

.footer a:hover {
  color: rgb(17, 0, 255);
}

/*     MEDIA QUERY    */
/*     MEDIA QUERY    */
/*     MEDIA QUERY    */

@media only screen and (max-width: 991px) {
  nav {
      /* width: 100%; */
      padding: 10px 20px;
      height: 64px;
  }

  nav ul.fullSize {
      display: none;
  }

  nav .logo {
      font-size: 20px;
      letter-spacing: 2px;
  }

  nav .burger {
      display: block;
      position: absolute;
      top: 10px;
      right: 15px;
      width: 50px;
      height: 42px;
      transition: 0.3s;
      z-index: 990;
  }

  nav .burger:hover {
      cursor: pointer;
  }

  nav .burger.active {
      transform: rotate(-180deg);
  }

  nav .burger span {
      position: absolute;
      width: 100%;
      height: 4px;
      background-color: var(--lightYellow);
      left: 0;
      transition: top 0.2s 0.2s, bottom 0.2s 0.2s, transform 0.2s 0.4s;
  }

  nav .burger span:nth-child(1) {
      top: 0;
  }

  nav .burger.active span:nth-child(1) {
      transform: rotate(45deg);
      top: calc(50% - 2px);
      background-color: var(--lightYellow);
  }

  nav .burger span:nth-child(2) {
      top: calc(50% - 2px);
  }

  nav .burger.active span:nth-child(2) {
      opacity: 0;
  }

  nav .burger span:nth-child(3) {
      bottom: 0;
  }

  nav .burger.active span:nth-child(3) {
      transform: rotate(-45deg);
      bottom: calc(50% - 2px);
      background-color: var(--lightYellow);
  }

  nav .mobileMenu {
      display: block;
  }

  nav .mobileMenu.pokaz {
    /* width: 100%; */
      top: 0;
      opacity: 1;
  }

  nav .mobileMenu ul {
    /* width: 100%; */
      display: block;
      width: 100%;
      background-color: #000000;
      list-style: none;
      line-height: 40px;
      padding: 0;
      opacity: 1;
      padding-top: 90px;
      text-align: center;
      overflow: hidden;
      margin: 0;
      z-index: 9999;
  }

  nav .mobileMenu ul li {
      margin: 0;
      padding: 16px 10px;
      outline: none;
      transition: 0.5s;
  }

  nav .mobileMenu ul li:focus {
      outline: none;
  }

  .pokaz ul li:last-of-type {
      margin-bottom: 40px;
  }

  nav .mobileMenu a {
    display: inline-block;
    width: 100%;
      font-size: 2em;
      color: var(--lightYellow);
      letter-spacing: 3px;
      outline: none;
      z-index: 999;
  }

  nav .mobileMenu a:hover {
      color: #00fc69;
  }

  nav .mobileMenu a:focus {
      outline: none;
  }

  nav .mobileMenu a::before {
      height: 0;
  }

  section#home {
    /* height: 100vh; */
    height: calc(100vh - 64px);
  }

  section#home .homeHeader {
    width: 90vw;
    padding: 20px;
    border: 14px solid yellow;
    border-image: repeating-linear-gradient( 45deg, black, black 5%, yellow 5%, yellow 10%) 10;
    color: black;
  }
  
  section#home .homeHeader h1 {
    font-family: var(--logoFont);
    font-size: clamp(1.8rem, 3.5vw, 3.8rem);
    padding: 1rem 2rem;
    background-color: rgba(255, 255, 255, 0.486);
    text-align: center;
  }
  
  section#home .homeHeader .aboutBtn {
    font-size: 1.5em;
    padding: 0.5em 1em;
  }

  section#home .mixer {
    position: absolute;
    bottom: calc(2em + 20px);
    width: 24vw;
    height: auto;
    opacity: 0.5;
  }
  
  section#about {
    padding: 50px 20px;
    height: 100%;
  }

  section#about .absolutImg1 {
    right: -2em;
    height: 200px;
    width:200px;
  }

  section#about .aboutWrapper {
    height: 50vh;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
  }

  section#about .aboutWrapper .paragraphs {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  section#about p {
    width: 100%;
    font-size: 3.5vw;
    z-index: 2;
    text-align: justify;
  }
  
  section#about p.second {
    font-size: 2.5vw;
  }

  section#about ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items:center;
  }

  .aboutWrapper .arrow {
    background-size: 20px;
    background-image: url('../graph/external-down-arrows-kmg-design-basic-outline-kmg-design-1.png');
  }

  section#about ul li {
    display: flex;
    flex-direction: column;
    width: 30%;
    font-size: 2.5vw;
    z-index: 2;
  }

  section#contact {
    padding: 50px 20px;
    height: 100%;
  }

  section#contact .contactGrid {
    padding: 1em;
    width: 90vw;
  }
}

@media only screen and (max-width: 600px) {
  .aboutHeading {
    padding-bottom: 1em;
    font-size: 8vw;
    z-index: 2;
  }

  section#home h2 {
    text-align: center;
  }

  section#home .mixer {
    padding-top: 2em;
    width: 30vw;
    height: auto;
    opacity: 0.5;
  }

  section#home #sent {
    width: 90vw;
  }

  section#about p {
    width: 100%;
    font-size: 5vw;
    z-index: 2;
    text-align: justify;
  }
  
  section#about p.second {
    font-size: 4.5vw;
  }

  section#about ul li {
    display: flex;
    flex-direction: column;
    width: 30%;
    font-size: 3.5vw;
    z-index: 2;
  }

  section#about .absolutImg1 {
    right: -5em;
    height: 200px;
    width:200px;
  }

  section#contact {
    padding: 50px 20px;
    height: 100%;
  }

  section#contact h3 {
    text-align: center;
  }

  section#contact .contactGrid {
    grid-template-columns: 1fr;
    width: 100%;
    padding: 1em;
    gap: 0;
  }

  section#contact .contactGrid .gridLeft {
    justify-content: center;
    align-items: center;
  }

  section#contact .contactGrid .gridLeft p {
    width: 100%;
    text-align: center
  }

  section#contact form {
    max-width: 100%;
    /* max-width: 700px; */
    grid-template-columns: 1fr;
  }

  section#contact form button, section#contact form textarea {
    grid-column: span 1 / span 1;
  }

  /* section#contact form input,
section#contact form textarea {
  width: 100%;
} */

  section .horizonBar3 {
    display: none;
  }
}

@media only screen and (max-width: 370px) {
  .aboutHeading {
    padding-bottom: 1em;
    font-size: 8vw;
    z-index: 2;
  }

  section#home h2 {
    text-align: center;
  }

  section .horizonBar2 {
    position: absolute;
    bottom: 2em;
    width: 90%;
    height: 20px;
    background: linear-gradient(to right, var(--lightYellow), transparent);
    border-radius: 8px;
}

.horizonBar4 {
  display: none;
}
  
  section#home .mixer {
    position: absolute;
    bottom: calc(2em + 20px);
    /* width: 24vw; */
    height: auto;
    opacity: 0.5;
  }
}