:root {
  --white: #ffffff;
  --gray: #404244;
  --gray-white: #f5f5f5;
  --green: #489339;
  --gold: #ffbf00;
  --montserrat: "Montserrat", sans-serif, system-ui;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--montserrat);
}

/*----------------- Utils -----------------*/

a {
  text-decoration: none;
  color: var(--gray);
}

a:hover {
  color: var(--green);
}

header ul,
header li,
.grid-cards,
.card {
  list-style: none;
}

button {
  border: none;
}

.title {
  padding: 30px 0;
  font-size: 36px;
  text-align: center;
}
/*----------------- HEADER Section -----------------*/

.header {
  background: var(--white);
  width: 100%;
  padding: 20px 0px;
  border-bottom: 1px solid var(--gray);
}

.container {
  max-width: 1224px;
  width: 94%;
  margin: 0 auto;
}

.navbar {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-brand {
  display: flex;
  align-items: center;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

.nav-link {
  transition: 200ms ease-out;
  font-size: 18px;
  font-weight: 600;
}

.nav-button {
  display: none;
  margin: 5px;
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  --button-color: var(--gray);
}

.nav-button .hamburger {
  transition:
    translate 0.2s,
    rotate 0.5s;
}

.nav-button[aria-expanded="true"] .hamburger {
  translate: 2px -1px;
  rotate: 0.125turn;
}

.nav-button .line {
  transition: 0.5s;
  stroke-dasharray: 60 31 60 300;
}

.nav-button[aria-expanded="true"] .line {
  stroke-dasharray: 60 105 60 300;
  stroke-dashoffset: -90;
}

/*----------------- MAIN Section -----------------*/

.main.title {
  color: var(--gray);
}

.grid-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 80px;
}

.card {
  width: 250px;
  height: 300px;
  background: var(--gray-white);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.card svg {
  width: 200px;
  height: 100px;
}

.card-title {
  font-size: 24px;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
}

.card-title span {
  color: var(--green);
}

/*----------------- ABOUT Section -----------------*/

.green.screwd {
  background: var(--green);
  color: var(--white);
  transform: skew(0deg, 5deg);
  margin-top: 50px;
  padding: 50px 0 100px 0;
}

.container.screwd {
  transform: skew(0deg, -5deg);
}

.about.title {
  border-bottom: 1px solid var(--white);
}

.para {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding: 100px 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}

.banners {
  display: flex;
  justify-content: space-between;
}

.banners p {
  background: var(--gray);
  width: 400px;
  height: 150px;
  text-align: center;
  padding: 40px 0;
  border-radius: 28px;
  font-weight: 700;
  font-size: 28px;
}

.banners span {
  color: var(--gold);
}

.grenton {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
}

.line {
  border: 3px solid var(--white);
  height: 120px;
}
.logo_grenton {
  width: 245px;
  padding-right: 30px;
}

.grenton p {
  font-size: 28px;
  font-weight: 600;
  padding-left: 55px;
}

/*----------------- CONTACT Section -----------------*/

.gray.screwd {
  background: var(--gray);
  color: var(--white);
  transform: skew(0deg, 5deg);
  padding: 50px 0 0 0;
}

h1 + p {
  padding: 30px 0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

.contact,
.rodo {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.contact_details {
  text-align: center;
}

.contact_svg {
  height: 40px;
  fill: var(--gold);
  margin: 15px;
}

.rodo {
  padding-top: 130px;
  background: var(--gray);
  text-align: center;
}

section a {
  color: var(--white);
}

.gray_background {
  padding-bottom: 140px;
  height: 100%;
  background: var(--gray);
}

/*----------------- Regulations Section -----------------*/

.regulations,
.regulations + p {
  margin-top: 1rem;
  color: var(--gray);
  line-height: 1.5;
  font-weight: 500;
  list-style-position: inside;
}
.regulations ul {
  list-style-type: lower-alpha;
  margin-left: 1.4rem;
  margin-bottom: 1rem;
}

.regulations ul > ul {
  list-style-type: disc;
  margin-left: 1.8rem;
}

.regulations > ul > li {
  margin-bottom: 1rem;
}

.regulations > li {
  margin-bottom: 1rem;
}

.regulations + p {
  margin: 4rem 0;
}

.regulations + p > a {
  color: var(--gray);
}
.regulations + p > a:hover {
  color: var(--green);
}

/*----------------- SVG Animation Section -----------------*/

svg .svg1-elem-1 {
  stroke-width: 6;
  stroke: var(--gray);
  stroke-dashoffset: 600.1483154296875px;
  stroke-dasharray: 600.1483154296875px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg1-elem-1 {
  stroke-dashoffset: 0;
  fill: var(--gray-white);
}

svg .svg1-elem-2 {
  stroke: var(--green);
  stroke-width: 2;
  stroke-dashoffset: 89.83856201171875px;
  stroke-dasharray: 89.83856201171875px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg1-elem-2 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg1-elem-3 {
  stroke: var(--green);
  stroke-dashoffset: 314.94940185546875px;
  stroke-dasharray: 314.94940185546875px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg1-elem-3 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg1-elem-4 {
  stroke: var(--green);
  stroke-dashoffset: 274.3633117675781px;
  stroke-dasharray: 274.3633117675781px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg1-elem-4 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg1-elem-5 {
  stroke: var(--gray);
  stroke-width: 6;
  stroke-dashoffset: 716.9400024414062px;
  stroke-dasharray: 716.9400024414062px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg1-elem-5 {
  stroke-dashoffset: 0;
  fill: var(--gray-white);
}

svg .svg1-elem-6 {
  stroke-dashoffset: 47.48049545288086px;
  stroke-dasharray: 47.48049545288086px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg1-elem-6 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg1-elem-7 {
  stroke-dashoffset: 108.86701965332031px;
  stroke-dasharray: 108.86701965332031px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg1-elem-7 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg1-elem-8 {
  stroke-dashoffset: 169.29598999023438px;
  stroke-dasharray: 169.29598999023438px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg1-elem-8 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

/* 2 */
svg .svg2-elem-1 {
  stroke: var(--gray);
  stroke-width: 6;
  stroke-dashoffset: 254.90606689453125px;
  stroke-dasharray: 254.90606689453125px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg2-elem-1 {
  stroke-dashoffset: 0;
  fill: var(--gray-white);
}

svg .svg2-elem-2 {
  stroke: var(--green);
  stroke-dashoffset: 128.88998413085938px;
  stroke-dasharray: 128.88998413085938px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg2-elem-2 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg2-elem-3 {
  stroke: var(--gray);
  stroke-width: 6;
  stroke-dashoffset: 372.52130126953125px;
  stroke-dasharray: 372.52130126953125px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg2-elem-3 {
  stroke-dashoffset: 0;
  fill: var(--gray-white);
}

svg .svg2-elem-4 {
  stroke: var(--green);
  stroke-width: 6;
  stroke-dashoffset: 198.97810990565068px;
  stroke-dasharray: 198.97810990565068px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s;
}

svg.active .svg2-elem-4 {
  stroke-dashoffset: 0;
  fill: var(--gray-white);
}

svg .svg2-elem-5 {
  stroke-dashoffset: 34.67256359733385px;
  stroke-dasharray: 34.67256359733385px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s;
}

svg.active .svg2-elem-5 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg2-elem-6 {
  stroke-dashoffset: 34.67256359733385px;
  stroke-dasharray: 34.67256359733385px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s;
}

svg.active .svg2-elem-6 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg2-elem-7 {
  stroke: var(--green);
  stroke-width: 6;
  stroke-dashoffset: 17.70000457763672px;
  stroke-dasharray: 17.70000457763672px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s;
}

svg.active .svg2-elem-7 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg2-elem-8 {
  stroke: var(--gray);
  stroke-width: 6;
  stroke-dashoffset: 658.27978515625px;
  stroke-dasharray: 658.27978515625px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s;
}

svg.active .svg2-elem-8 {
  stroke-dashoffset: 0;
}

/* 3 */
svg .svg3-elem-1 {
  stroke: var(--gray);
  stroke-width: 6;
  stroke-dashoffset: 548.0607299804688px;
  stroke-dasharray: 548.0607299804688px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg3-elem-1 {
  stroke-dashoffset: 0;
  fill: var(--gray-white);
}

svg .svg3-elem-2 {
  stroke-dashoffset: 46.71465301513672px;
  stroke-dasharray: 46.71465301513672px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg3-elem-2 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

svg .svg3-elem-3 {
  stroke: var(--green);
  stroke-width: 6;
  stroke-dashoffset: 266.1602478027344px;
  stroke-dasharray: 266.1602478027344px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
  transition:
    stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 1s;
}

svg.active .svg3-elem-3 {
  stroke-dashoffset: 0;
  fill: var(--gray-white);
}

/* 4 */
svg .svg4-elem-1 {
  stroke: var(--gray);
  stroke-dashoffset: 1085.0052490234375px;
  stroke-dasharray: 1085.0052490234375px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition:
    stroke-dashoffset 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg4-elem-1 {
  stroke-dashoffset: 0;
  fill: var(--gray);
}

svg .svg4-elem-2 {
  stroke: var(--green);
  stroke-width: 6;
  stroke-dashoffset: 318.47930908203125px;
  stroke-dasharray: 318.47930908203125px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition:
    stroke-dashoffset 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg4-elem-2 {
  stroke-dashoffset: 0;
  fill: var(--gray-white);
}

/* 5 */
svg .svg5-elem-1 {
  stroke: var(--gray);
  stroke-width: 6;
  stroke-dashoffset: 689.6768188476562px;
  stroke-dasharray: 689.6768188476562px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
  transition:
    stroke-dashoffset 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg5-elem-1 {
  stroke-dashoffset: 0;
  fill: var(--gray-white);
}

svg .svg5-elem-2 {
  stroke: var(--green);
  stroke-dashoffset: 1106.85107421875px;
  stroke-dasharray: 1106.85107421875px;
  fill: transparent;
  -webkit-transition:
    stroke-dashoffset 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
  transition:
    stroke-dashoffset 1.2s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s,
    fill 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg5-elem-2 {
  stroke-dashoffset: 0;
  fill: var(--green);
}

/*----------------- Media Queries -----------------*/

@media (max-width: 1024px) {
  /*---------------- HEADER Section ---------------*/
  .logo {
    width: 125px;
  }

  .header {
    z-index: 1;
    position: sticky;
    top: 0;
    overflow: hidden;
    padding: 10px 0px;
  }

  .nav-button {
    display: block;
  }

  .nav-menu {
    position: fixed;
    left: -100%;
    top: 91px;
    gap: 0;
    flex-direction: column;
    width: 100%;
    text-align: center;
    background: var(--white);
    transition: 0.3s;
  }

  .nav-item {
    margin: 16px 0;
  }

  .nav-menu.active {
    left: 0;
  }

  /* .header.active { */
  /* background: var(--gray); */
  /* } */
  /*---------------- MAIN Section ---------------*/
  .title {
    font-size: 28px;
    padding: 20px 0;
  }

  .grid-cards {
    gap: 40px;
  }

  /*---------------- ABOUT Section ---------------*/
  .green.screwd {
    padding-top: 35px;
    padding-bottom: 60px;
  }

  .para {
    gap: 30px;
    padding: 50px 0;
    font-size: 18px;
    font-weight: 400;
  }

  .banners p {
    width: 180px;
    height: 90px;
    padding: 20px 0;
    border-radius: 16px;
    font-weight: 500;
    font-size: 18px;
  }
  .banners p:first-of-type + p {
    padding: 12px 0;
  }
  .grenton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 0;
  }

  .line {
    border: 2px solid var(--white);
    height: 80px;
  }
  .logo_grenton {
    width: 150px;
    padding-right: 20px;
  }

  .grenton p {
    font-size: 18px;
    font-weight: 500;
    padding-left: 40px;
  }

  #about,
  #contact {
    scroll-margin: 100px;
  }
}