* {
   padding: 0;
   margin: 0;
   font-family: "Jersey 25", sans-serif;
   box-sizing: border-box;
}

body {

   height: 100vh;
   background: radial-gradient(
      ellipse 80% 50% at center,
      #292727,
      #111111
    ); 

    background-color: #111;
   
}

ul {
   list-style: none;
}

a {
   color: inherit;
   text-decoration: none;
}

header {
   padding: 15px 15px;
}

.headerSection {
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
}

.headerTitle {
   font-size: 14px;
   color: #4BFF3C;
}

.headerMenu {
   font-size: 14px;
   color: #565656;
   text-decoration: underline;
}

.headerPart {
   flex: 1;
}
.headerRight {
   display: flex;
   align-items: flex-end;
   justify-content: flex-end;
}

/* Hero */

.heroSection {
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 30px 15px;
   max-width: 1100px;
   margin: 0 auto;
}

.heroHead {
   font-size: 50px;
   color: white;
   text-align: center;
   line-height: 42px;
}

.heroTag {
   color: white;
   font-size: 14px;
   text-align: center;
}

.heroImgMobile {
   max-width: 300px;
   justify-content: center;
   margin: 0 auto;
   
}
.heroImgMobile img {
   width: 100%;
}

.mainButtonContainer {
   margin: 0 auto;
}

.heroBtn {
   all: unset;
   background-color: #4BFF3C;
   color: #565656;
   padding: 5px 15px 2px 15px;
   border-radius: 5px;
   font-size: 14px;
   margin: 0 auto;
   display: flex;
   align-items: center;
}
.heroBtn img {
   width: 25px;
}
.heroBtn span {
   margin-right: 10px;
}

.heroBtnIconContainer {
   display: flex;
   justify-content: end;
}


/* Intro */

.introSection {
   padding: 15px 15px;
}

.introTitle {
   color: white;
   font-size: 35px;
   margin-bottom: 25px;
}


.introP {
   color: white;
   margin-bottom: 50px;
   text-align: justify;
   font-size: 12px;
}

.viewMore {
   color: #4BFF3C;
   text-decoration: underline;
}


 

    .slider {
      width: min(800px, 90%);
      position: relative;
      margin: 0 auto;
      opacity: .5;
    }

    /* Image window */
    .slider-window {
      overflow: hidden;
      border-radius: 12px;
    }

    /* Container holding all images */
    .slider-track {
      display: flex;
      transition: transform 0.4s ease;
    }

    .slide {
      min-width: 100%;
      height: 450px;
    }

    .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    /* Arrow buttons */
    .arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);

      width: 45px;
      height: 45px;

      border: none;
      border-radius: 50%;

      background: rgba(0, 0, 0, 0.7);
      color: white;

      font-size: 24px;
      cursor: pointer;

      z-index: 2;
    }

    .arrow:hover:not(:disabled) {
      background: rgba(0, 0, 0, 0.9);
    }

    .arrow:disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .prev {
      left: -22px;
    }

    .next {
      right: -22px;
    }

    /* Dots */
    .dots {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 18px;
    }

    .dot {
      width: 11px;
      height: 11px;

      border: none;
      border-radius: 50%;

      background: #ccc;
      cursor: pointer;

      padding: 0;
    }

    .dot.active {
      background: #333;
      transform: scale(1.2);
    }

    .dot:hover {
      background: #777;
    }

    /* Mobile */
    @media (max-width: 600px) {
      .slide {
        height: 300px;
      }

      .arrow {
        width: 38px;
        height: 38px;
        font-size: 20px;
      }

      .prev {
        left: 10px;
      }

      .next {
        right: 10px;
      }
    }
  

    .footerContainer {
      display: flex;
      padding: 20px;
    }

   .footerTag {
      color: #4BFF3C;
      margin: 0 auto;
   }