<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="VFitClub - A sleek fitness website designed with HTML5, CSS3, and Javascript, featuring grid and flexbox layout techniques and stylish animations." />

  <title>VFitClub - Elevate Your Fitness Journey</title>
  <link rel="icon" type="https://vfitclub.netlify.app/image/png" sizes="32x32" href="https://vfitclub.netlify.app/image/favicon.png" />
  <link rel="stylesheet" href="main.css" media="screen" />
  <link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet" />
</head>

<body>
  <!-- HEADER -->
  <header class="header">
    <div class="container">
      <nav class="header-nav" aria-label="navigation">
        <div class="logo-content">
          <img src="https://vfitclub.netlify.app/image/logo.png" alt="Logo" class="nav-icon" width="70" height=60 />
          <div class="logo">VFitClub</div>
        </div>
        <img src="https://vfitclub.netlify.app/image/nav-icon.svg" alt="navigation icon" class="nav-hamburger" width="30" height="30" />
        <ul>
          <li>
            <a href="#aboutus">About</a>
          </li>
          <li>
            <a href="#memberships">Memberships</a>
          </li>
          <li>
            <a href="#ourteam">Our Team</a>
          </li>
          <li>
            <a href="#contact">Join Us</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <main>
    <!-- MAIN SECTION -->
    <section class="section-hero" id="section-hero">
      <div class="container hero-box">
        <div class="hero-image-content">
          <h1 class="heading">Unlock Your Best Self at VFitClub. Embrace Wellness, Transform Your Life</h1>
          <p class="description">Experience the Ultimate Fitness Journey with Functional Training, Plyometric Boxes, Aerobics Classes, TRX, and More</p>
          <div class="hero-box-buttons"><button>Discover Classes</button><button>See Our Offerings</button></div>
        </div>
      </div>

    </section>
    <section class="section-aboutus" id="aboutus">
      <div class="container aboutus">
        <div class="section-aboutus-info" data-aos="fade-down">
          <h2>About VFitClub</h2>
          <p>
            At VFitClub, we're not just a fitness center; we're a community dedicated to transforming lives through health and wellness. Founded with a passion for helping individuals
            achieve their fitness goals, our mission is to empower, inspire, and support you on your journey to a healthier, happier life.
          </p>
          <h2>Our Vision</h2>
          <p>
            Our vision is to be your trusted partner in achieving optimal well-being. We believe that a strong and healthy body is the foundation for a successful, fulfilling life.
            Whether you're new to fitness or a seasoned athlete, we're here to guide you on your path to success.
          </p>
        </div>
        <div class="section-aboutus-images">
          <figure class="about-box__image">
            <img src="https://vfitclub.netlify.app/image/about-image1.jpg" alt="navigation icon" class="nav-hamburger" width=320" height="190" style="--i: 0" data-aos="fade-down-right" />
            <img src="https://vfitclub.netlify.app/image/about-image2.jpg" alt="navigation icon" class="nav-hamburger" width="320" height="190" style="--i: 1" data-aos="fade-down" />
            <img src="https://vfitclub.netlify.app/image/about-image3.jpg" alt="navigation icon" class="nav-hamburger" width="320" height="190" style="--i: 2" data-aos="fade-down-left" />
          </figure>
        </div>
      </div>
    </section>

    <section class="section-ourteam" id="ourteam">
      <div class="container ourteam" data-aos="fade-down">
        <h2 class="title">Our Team</h2>
        <div class="team-members">
          <div class="team-member">
            <img src="https://vfitclub.netlify.app/image/JoeBloggs.jpg" alt="Logo" class="member-logo" />
            <div class="team-memmber-info">
              <div class="member-name">Joe Bloggs</div>
              <div class="member-desg">Weight Lifting Coach</div>
              <div class="member-desc">Specializes in sculpting strength and muscle with precision</div>
            </div>
          </div>
          <div class="team-member">
            <img src="https://vfitclub.netlify.app/image/CharlieWatson.jpg" alt="Logo" class="nav-icon" />
            <div class="team-memmber-info">
              <div class="member-name">Charlie Watson</div>
              <div class="member-desg">MMA Coach</div>
              <div class="member-desc">Hones combat skills and self-defense with expertise</div>
            </div>
          </div>
          <div class="team-member">
            <img src="https://vfitclub.netlify.app/image/RachelDanielle.jpg" alt="Logo" class="nav-icon" />
            <div class="team-memmber-info">
              <div class="member-name">Rachel Danielle</div>
              <div class="member-desg">Yoga Instructor</div>
              <div class="member-desc">Guides you to inner peace and flexibility through mindful yoga practice</div>
            </div>
          </div>
          <div class="team-member">
            <img src="https://vfitclub.netlify.app/image/TaylorMelé.jpg" alt="Logo" class="nav-icon" />
            <div class="team-memmber-info">
              <div class="member-name">Taylor Melé</div>
              <div class="member-desg">Personal Trainer</div>
              <div class="member-desc">Your path to achieving fitness goals, one personalized session at a time</div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section-memberships" id="memberships">
      <div class="container memberships">
        <h2 class="title">Memberships</h2>
        <div class="classes">
          <div class="class" data-aos="flip-left">
            <h2 class="class-name">3 Months</h2>
            <div class="class-price">$100/MON USD</div>
            <hr />
            <div class="class-name">
              <ul>
                <li>5 Classes</li>
                <li>5 In Personal Training Sessions</li>
                <li>Full Gym & Facilities Access</li>
                <li>Gym Tour & Training Instruction</li>
              </ul>
            </div>
            <a>Get Started</a>
          </div>
          <div class="class" data-aos="flip-up">
            <h2 class="class-name">6 Months</h2>
            <div class="class-price">$75/MON USD</div>
            <hr />
            <div class="class-name">
              <ul>
                <li>10 Classes</li>
                <li>10 In Personal Training Sessions</li>
                <li>Full Gym & Facilities Access</li>
                <li>Boxing Ring, Free Events</li>
                <li>Gym Tour & Training Instruction</li>
              </ul>
            </div>
            <a>Get Started</a>
          </div>
          <div class="class" data-aos="flip-right">
            <h2 class="class-name">1 Whole Year</h2>
            <div class="class-price">$50/MON USD</div>
            <hr />
            <div class="class-name">
              <ul>
                <li>10 Classes</li>
                <li>15 In Personal Training Sessions</li>
                <li>Full Gym & Facilities Access</li>
                <li>Boxing Ring, Free Events</li>
                <li>Gym Tour & Training Instruction</li>
              </ul>
            </div>
            <a>Get Started</a>
          </div>
        </div>
      </div>
    </section>
    <section class="section-reviews" id="reviews">
      <div class="container reviews">
        <h2 class="title">Customer Reviews</h2>
        <div class="review">
          <div class="review-info">
            <div class="review-image" data-aos="image-rotateIn"><img src="https://vfitclub.netlify.app/image/review1.jpeg" alt="Logo" class="review-icon" width="130" height="130" /></div>
            <div class="review-details" data-aos="fade-down">
              <div>Samantha R</div>
              <div>
                I can't say enough good things about VFitClub. The trainers are exceptional, and the community is so welcoming. I've made incredible progress in my fitness journey
                here
              </div>
            </div>
          </div>
          <div class="review-info">
            <div class="review-image" data-aos="image-rotateIn"><img src="https://vfitclub.netlify.app/image/review2.jpeg" alt="Logo" class="review-icon" width="130" height="130" /></div>
            <div class="review-details" data-aos="fade-down">
              <div>Vinay U</div>
              <div>Charlie, the MMA coach, is a true expert. He pushes you to your limits while ensuring safety. I've learned so much and gained newfound confidence</div>
            </div>
          </div>
          <div class="review-info">
            <div class="review-image" data-aos="image-rotateIn"><img src="https://vfitclub.netlify.app/image/review3.jpeg" alt="Logo" class="review-icon" width="130" height="130" /></div>
            <div class="review-details" data-aos="fade-down">
              <div>Michael S</div>
              <div>
                VFitClub is not just a gym; it's a lifestyle. The facility is top-notch, and the trainers are top-level. I've never felt more motivated and supported in my fitness
                journey
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section class="section-contact" id="contact">
      <div class="container contact">
        <div class="contactus">
          <form>
            <h2 class="title">GET IN TOUCH</h2>
            <div class="class-input"><input type="text" placeholder="Name" /></div>
            <div class="class-input"><input type="email" placeholder="Email" /></div>

            <div class="class-input"><input type="number" placeholder="Number" /></div>
            <div class="class-input"><textarea placeholder="Message"></textarea></div>
            <button>SEND</button>
          </form>
        </div>
        <div class="map">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6208.882633670527!2d-77.03822868422614!3d38.914011108427125!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b7e5bf2241b3%3A0xeee16e72747760aa!2sU%20Street%2FAfrican-Amer%20Civil%20War%20Memorial%2FCardozo!5e0!3m2!1sen!2sin!4v1699174834310!5m2!1sen!2sin" allowfullscreen="" loading="lazy" style="border: 0" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
      </div>
    </section>
  </main>
  <footer class="section-footer" id="footer">
    <div class="footer-box container">
      <div class="contact-details">
        <h2>VFitClub</h2>
        <div class="contact-company-address">
          123 Wellness Way Activeville,<br />
          Fitnessland 56789<br />United States
        </div>
        <div class="contact-social-links">
          <img src="https://vfitclub.netlify.app/image/whatsapp.svg" alt="navigation icon" class="nav-hamburger" width=35" height="35" /> <img src="https://vfitclub.netlify.app/image/facebook.svg" alt="navigation icon" class="nav-hamburger" width=35" height="35" /> <img src="https://vfitclub.netlify.app/image/instagram.svg" alt="navigation icon" class="nav-hamburger" width=35" height="35" /> <img src="https://vfitclub.netlify.app/image/twitter.svg" alt="navigation icon" class="nav-hamburger" width=35" height="35" />
        </div>
      </div>
      <nav class="footer-nav" aria-label="navigation">
        <h3>Quick Links</h3>
        <ul>
          <li>
            <a href="#aboutus">About</a>
          </li>
          <li>
            <a href="#memberships">Memberships</a>
          </li>
          <li>
            <a href="#ourteam">Our Team</a>
          </li>
          <li>
            <a href="#contact">Contact </a>
          </li>
          <li>
            <a href="#reviews">Reviews</a>
          </li>
        </ul>
      </nav>
      <div class="newsletter">
        <h3>News Letter</h3>
        <input type="email" placeholder="email@domain.com" /><button>&#10003;</button>
      </div>
    </div>
    <hr />
    <div class="container copyrights">
      <div>Copyright © by Vinay</div>
      <a href="https://github.com/uvinay5/responsive-gym-web/" target="_blank"><img src="https://vfitclub.netlify.app/image/github.svg" alt="navigation icon" class="nav-hamburger" width="50" height="50" /></a>
    </div>
  </footer>
  <div id="offerModal" class="offerModal">
    <div class="modal-content">
      <h2>Got hiit</h2>
      <p>Experience our new high-intensity interval
        training facility to boost endurance and agility!</p>
      <h1>70%OFF FOR NEW GYM MEMBERS</h1>
      <div><button>Unlock 70% Off</button><button class="close-button">Maybe Later</button></div>
    </div>
  </div>
  <script src="./index.js"></script>
  <script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
  <script>
    AOS.init({
      offset: 120,
      delay: 50,
      duration: 400,
      once: true,
    });
  </script>
</body>

</html>
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;900&family=Poppins&display=swap");
:root {
  --color-yellow: #f4ce14;
  --color-yellow-dark: hsl(56, 100%, 33%);
  --color-yellow-light: hsl(55, 67%, 78%);
  --color-black: hsl(0, 0%, 13%);
  --color-black-light: hsl(0, 0%, 18%);
  --color-black-light-text: hsl(0, 0%, 27%);
  --two-col-layout: 2;
  --four-col-layout: 4;
  --three-col-layout: 3;
  --total-stack-size: 10;
}

@media only screen and (max-width: 56.25em) {
  :root {
    --two-col-layout: 1;
    --four-col-layout: 1;
    --three-col-layout: 1;
  }
}

@media only screen and (max-width: 59em) {
  :root {
    --two-col-layout: 1;
    --four-col-layout: 1;
    --three-col-layout: 1;
  }
}

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

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

h1 {
  font-size: 3.5rem;
}

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

hr {
  border: 0;
  margin: 0;
  width: 100%;
  height: 2px;
  background: #606060;
  margin-bottom: 10px;
}

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.9;
  color: #ffffff;
}

body .container {
  max-width: 1440px;
  padding: 0 1.4rem;
  margin: 0 auto;
}

body button {
  padding: 8px 25px;
  font-style: italic;
  text-transform: uppercase;
  background-color: var(--color-yellow);
  border: none;
  color: #000;
  font-weight: 600;
  margin-bottom: 5px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
  clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
}

body button:hover {
  background-color: #000;
  color: var(--color-yellow);
  -webkit-clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
  clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
}

body section:nth-child(odd) {
  background-color: var(--color-black);
}

body section:nth-child(even) {
  background-color: var(--color-black-light);
}

body .header {
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(black),
    to(rgba(0, 0, 0, 0))
  );
  background-image: linear-gradient(black, rgba(0, 0, 0, 0));
}

body .header .header-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 0px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body .header .header-nav .nav-hamburger {
  display: none;
}

@media only screen and (max-width: 50em) {
  body .header .header-nav .nav-hamburger {
    display: block;
  }
}

body .header .header-nav .logo-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 5px;
}

body .header .header-nav .logo {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 3px;
}

@media only screen and (max-width: 50em) {
  body .header .header-nav .logo {
    font-size: 2.5rem;
  }
}

body .header .header-nav .nav-icon {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

@media only screen and (max-width: 50em) {
  body .header .header-nav .nav-icon {
    height: 40px;
    width: 40px;
  }
}

body .header .header-nav:hover > .nav-icon {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

body .header ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
  list-style: none;
  text-transform: uppercase;
}

@media only screen and (max-width: 50em) {
  body .header ul {
    display: none;
  }
}

body .header ul li {
  position: relative;
  padding: 5px;
  overflow: hidden;
  font-size: 1.8rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 1.2px;
  cursor: pointer;
}

body .header ul li:hover {
  color: var(--color-yellow);
}

body .header ul li a:after {
  background-color: var(--color-yellow);
  content: "";
  position: absolute;
  width: 90%;
  left: -100%;
  height: 3px;
  border-radius: 30px;
  bottom: 0px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

body .header ul li a:hover:after {
  left: 5%;
}

body .header ul li:last-child {
  background-color: var(--color-yellow);
  border: 2px solid var(--color-yellow);
  border-radius: 5px;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  color: #000;
  cursor: pointer;
  padding: 3px 10px;
}

body .header ul li:last-child:hover {
  background-color: inherit;
  color: #fff;
}

body .header ul li:last-child a:after {
  content: none;
}

body .section-hero {
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-image: url("https://vfitclub.netlify.app/image/hero-background.webp");
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-size: cover;
}

@media only screen and (max-width: 50em) {
  body .section-hero {
    background-image: url("https://vfitclub.netlify.app/image/hero-image.png"),
      url("https://vfitclub.netlify.app/image/hero-background.webp");
    background-position: bottom, center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

body .section-hero .hero-box {
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  background-image: url("https://vfitclub.netlify.app/image/hero-image.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
}

@media only screen and (max-width: 50em) {
  body .section-hero .hero-box {
    background-image: none;
  }
}

body .section-hero .hero-box .hero-image-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  gap: 15px;
}

body .section-hero .hero-box h1 {
  text-transform: uppercase;
  font-size: clamp(2.5rem, 3vw, 3rem);
  text-shadow: 2px 5px 5px rgba(0, 0, 0, 0.7), 0px -4px 12px rgba(0, 0, 0, 0.5);
  -webkit-animation: moveInLeft 0.5s ease-out;
  animation: moveInLeft 0.5s ease-out;
}

@media only screen and (max-width: 50em) {
  body .section-hero .hero-box h1 {
    text-shadow: none;
  }
}

body .section-hero .hero-box p {
  font-size: 1.8rem;
  text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.4), 0px -4px 10px rgba(0, 0, 0, 0.5);
  -webkit-animation: moveInRight 0.5s ease-out;
  animation: moveInRight 0.5s ease-out;
}

body .section-hero .hero-box .hero-box-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

body .section-hero .hero-box .hero-box-buttons button {
  font-size: 1.6rem;
}

body .section-hero .hero-section-mouseClick {
  position: absolute;
  -webkit-animation: onclick 0.1s;
  animation: onclick 0.1s;
  z-index: -1;
  -webkit-box-shadow: rgba(195, 184, 34, 0.15) 0px 0px 30px 30px;
  box-shadow: rgba(195, 184, 34, 0.15) 0px 0px 30px 30px;
}

body .section-aboutus {
  padding-top: clamp(4rem, 10vw, 10rem);
}

body .section-aboutus .aboutus {
  overflow: hidden;
  padding: 3rem 3rem;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(min-content, 1fr)) [var];
  grid-template-columns: repeat(
    var(--two-col-layout),
    minmax(-webkit-min-content, 1fr)
  );
  grid-template-columns: repeat(
    var(--two-col-layout),
    minmax(min-content, 1fr)
  );
  grid-row-gap: 0rem;
  grid-column-gap: 5rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: justify;
}

body .section-aboutus .aboutus .section-aboutus-images {
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-box-pack: baseline;
  -ms-flex-pack: baseline;
  justify-content: baseline;
}

body .section-aboutus .aboutus .section-aboutus-images figure {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
}

@media only screen and (max-width: 50em) {
  body .section-aboutus .aboutus .section-aboutus-images figure {
    -ms-grid-rows: 190px 190px 190px;
    grid-template-rows: 190px 190px 190px;
    grid-row-gap: 3rem;
  }
}

body .section-aboutus .aboutus .section-aboutus-images figure img {
  position: relative;
  top: calc(var(--i) * -55px);
  left: calc(var(--i) * 90px);
  outline: 5px solid #fff;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
}

@media only screen and (max-width: 50em) {
  body .section-aboutus .aboutus .section-aboutus-images figure img {
    top: 0px;
    left: 0px;
  }
}

body .section-aboutus .aboutus .section-aboutus-images figure img:hover {
  z-index: calc(var(--total-stack-size) - var(--i));
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

@media only screen and (max-width: 50em) {
  body .section-aboutus .aboutus .section-aboutus-images figure img:hover {
    -webkit-transform: none;
    transform: none;
  }
}

body .section-aboutus .aboutus .section-aboutus-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

body .section-aboutus .aboutus .section-aboutus-info h2 {
  margin-bottom: 1rem;
  text-transform: uppercase;
}

body .section-aboutus .aboutus .section-aboutus-info p {
  margin-bottom: 2rem;
}

body .section-ourteam {
  padding: clamp(4rem, 10vw, 12rem) 0;
}

body .section-ourteam .ourteam {
  padding: 2rem 3rem;
}

body .section-ourteam .ourteam .title {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 40px;
}

body .section-ourteam .ourteam .team-members {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(min-content, 1fr)) [var];
  grid-template-columns: repeat(
    var(--four-col-layout),
    minmax(-webkit-min-content, 1fr)
  );
  grid-template-columns: repeat(
    var(--four-col-layout),
    minmax(min-content, 1fr)
  );
  grid-column-gap: 5rem;
  grid-row-gap: 5rem;
  -webkit-box-pack: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch;
  margin-top: 10px;
}

body .section-ourteam .ourteam .team-members .team-member {
  cursor: pointer;
  height: 300px;
  position: relative;
  overflow: hidden;
}

body .section-ourteam .ourteam .team-members .team-member img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
}

body
  .section-ourteam
  .ourteam
  .team-members
  .team-member
  .team-memmber-info
  .member-name {
  padding: 1rem 0.8rem;
  background-color: var(--color-yellow);
  font-size: 1.5rem;
  position: absolute;
  padding-right: 40px;
  bottom: 0px;
  left: 0px;
  z-index: 4;
  -webkit-clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
  color: #000;
  font-weight: 600;
}

body
  .section-ourteam
  .ourteam
  .team-members
  .team-member
  .team-memmber-info
  .member-desg {
  font-style: italic;
  position: absolute;
  padding: 1rem 0.8rem;
  font-size: 1.5rem;
  background-color: var(--color-black-light-text);
  width: 100%;
  bottom: 0px;
  text-align: end;
  z-index: 3;
  right: 0px;
}

body .section-ourteam .ourteam .team-members .team-member:hover .member-desc {
  position: absolute;
  z-index: 2;
  left: 0%;
  top: 0px;
}

body .section-ourteam .ourteam .team-members .team-member .member-desc {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  left: 100%;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(20, 20, 20, 0.58);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 3rem;
  font-size: 1.8rem;
  top: 0px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

body .section-memberships {
  padding: clamp(4rem, 10vw, 8rem) 0;
}

body .section-memberships .memberships {
  padding: 3rem 3rem;
  position: relative;
}

body .section-memberships .memberships .title {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 40px;
}

body .section-memberships .memberships .classes {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(min-content, 1fr)) [var];
  grid-template-columns: repeat(
    var(--three-col-layout),
    minmax(-webkit-min-content, 1fr)
  );
  grid-template-columns: repeat(
    var(--three-col-layout),
    minmax(min-content, 1fr)
  );
  grid-column-gap: 10rem;
  grid-row-gap: 5rem;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin-top: 20px;
  margin: 20px 70px;
}

@media only screen and (max-width: 50em) {
  body .section-memberships .memberships .classes {
    margin: 0px;
  }
}

body .section-memberships .memberships .classes .class {
  cursor: pointer;
  background-color: #414141;
  z-index: 10;
  -webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

body .section-memberships .memberships .classes .class .class-name {
  padding: 1.5rem;
  margin-top: 10px;
  text-transform: uppercase;
}

body .section-memberships .memberships .classes .class .class-price {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

body .section-memberships .memberships .classes .class ul {
  padding: 2rem;
  list-style: none;
}

body .section-memberships .memberships .classes .class ul li {
  margin: 15px 0px;
}

body .section-memberships .memberships .classes .class a {
  width: 100%;
  padding: 15px;
  color: #000;
  font-weight: 600;
  text-align: center;
  font-size: 1.8rem;
  background-color: var(--color-yellow);
}

body .section-memberships .memberships .classes .class a:hover {
  background-color: var(--color-yellow-dark);
}

body .section-memberships .memberships .classes .class:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-box-shadow: rgba(0, 0, 0, 0.29) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.218) 0px 0px 0px 1px;
  box-shadow: rgba(0, 0, 0, 0.29) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.218) 0px 0px 0px 1px;
}

body .section-reviews {
  padding: clamp(4rem, 10vw, 8rem) 0;
}

body .section-reviews .reviews {
  padding: 2rem 3rem;
  position: relative;
}

body .section-reviews .reviews .title {
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 40px;
}

body .section-reviews .reviews .review {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(min-content, 1fr)) [var];
  grid-template-columns: repeat(
    var(--three-col-layout),
    minmax(-webkit-min-content, 1fr)
  );
  grid-template-columns: repeat(
    var(--three-col-layout),
    minmax(min-content, 1fr)
  );
  grid-column-gap: 10rem;
  grid-row-gap: 5rem;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin: 20px 0px;
}

body .section-reviews .reviews .review .review-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body .section-reviews .reviews .review .review-info .review-image {
  width: 145px;
  height: 145px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  border-radius: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}

body .section-reviews .reviews .review .review-info .review-image img {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  border-radius: 100%;
  z-index: 15;
  border: 2px solid var(--color-black);
}

body .section-reviews .reviews .review .review-info .review-image:before {
  content: "";
  width: 100%;
  height: 50%;
  z-index: 11;
  position: absolute;
  background-color: #fae500;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  bottom: 0px;
}

body .section-reviews .reviews .review .review-info .review-image:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 100%;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#212121),
    color-stop(rgba(179, 143, 0, 0.174)),
    to(#fae500)
  );
  background-image: linear-gradient(
    90deg,
    #212121,
    rgba(179, 143, 0, 0.174),
    #fae500 100%
  );
}

body .section-reviews .reviews .review .review-info .review-image:hover:before {
  width: 100%;
  height: 100%;
}

body .section-reviews .reviews .review .review-info .review-details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

body
  .section-reviews
  .reviews
  .review
  .review-info
  .review-details
  div:first-child {
  font-size: 1.8rem;
  padding: 1rem;
}

body
  .section-reviews
  .reviews
  .review
  .review-info
  .review-details
  div:last-child {
  text-align: justify;
  position: relative;
  font-style: italic;
}

body
  .section-reviews
  .reviews
  .review
  .review-info
  .review-details
  div:last-child:before {
  top: -20px;
  left: -25px;
  position: absolute;
  content: "\201F";
  font-size: 5rem;
}

body .section-contact {
  position: relative;
}

body .section-contact .contact {
  overflow: hidden;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(min-content, 1fr)) [var];
  grid-template-columns: repeat(
    var(--two-col-layout),
    minmax(-webkit-min-content, 1fr)
  );
  grid-template-columns: repeat(
    var(--two-col-layout),
    minmax(min-content, 1fr)
  );
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

body .section-contact .contact .contactus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: stretch;
  -ms-flex-pack: stretch;
  justify-content: stretch;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 2rem 1rem;
}

body .section-contact .contact .contactus form {
  width: 100%;
}

body .section-contact .contact .contactus form input::-webkit-outer-spin-button,
body
  .section-contact
  .contact
  .contactus
  form
  input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body .section-contact .contact .contactus form input,
body .section-contact .contact .contactus form textarea {
  margin: 0;
  color: #fff;
  font-size: 1.8rem;
  padding: 10px 5px;
  width: 100%;
  background-color: transparent;
  border: 0px;
  outline: none;
  position: relative;
}

body .section-contact .contact .contactus form textarea {
  min-height: 50px;
}

body .section-contact .contact .contactus form .class-input {
  position: relative;
  margin: 20px 0px;
  overflow: hidden;
  border-bottom: 1px solid #6a6a6a;
  cursor: text;
}

body .section-contact .contact .contactus form .class-input:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0%;
  border-bottom: 2px solid yellow;
  left: 0px;
  bottom: 0px;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

body .section-contact .contact .contactus form .class-input:hover:after {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

body .section-contact .contact .contactus form button {
  padding: 10px 30px;
  font-size: 1.5rem;
}

body .section-contact .contact .contactus form button:hover {
  background-color: var(--color-yellow);
  color: #464646;
}

body .section-contact .contact .map {
  width: 100%;
  height: 450px;
}

body .section-contact .contact .map iframe {
  width: 100%;
  height: 100%;
}

body .section-footer {
  padding: clamp(4rem, 10vw, 8rem) 0;
  background-color: #161616;
}

body .section-footer .footer-box {
  margin: auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(min-content, 1fr)) [var];
  grid-template-columns: repeat(
    var(--three-col-layout),
    minmax(-webkit-min-content, 1fr)
  );
  grid-template-columns: repeat(
    var(--three-col-layout),
    minmax(min-content, 1fr)
  );
  grid-column-gap: 10rem;
  grid-row-gap: 5rem;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: 30px 30px;
}

body .section-footer .footer-box .contact-details .contact-company-address {
  font-size: 1.8rem;
  margin: 10px 0px;
}

body .section-footer .footer-box .contact-social-links {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  gap: 4rem;
}

body .section-footer .footer-box .footer-nav h3 {
  margin: 10px 0px;
}

body .section-footer .footer-box .footer-nav li {
  font-size: 1.7rem;
  list-style: none;
}

body .section-footer .footer-box .newsletter h3 {
  margin: 10px 0px;
}

body .section-footer .footer-box .newsletter input {
  padding: 8px 10px;
  width: 60%;
  background-color: #414141;
  margin-right: 10px;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 1.7rem;
  outline: none;
}

body .section-footer .footer-box .newsletter button {
  font-weight: 900;
  padding: 08px 20px;
}

body .section-footer .copyrights {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

body .section-footer .copyrights div {
  font-size: 1.8rem;
  margin: 20px;
}

body .offerModal {
  -webkit-animation: movemodel 0.5s forwards;
  animation: movemodel 0.5s forwards;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
  opacity: block;
  position: fixed;
  background-color: red;
  padding: 35px 35px;
  right: -80%;
  top: 50%;
  width: 420px;
  -webkit-transform: translate(50%, -50%);
  transform: translate(50%, -50%);
  z-index: 15;
  background: rgba(255, 252, 252, 0.14);
  border-radius: 16px;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(10px);
}

@media only screen and (max-width: 50em) {
  body .offerModal {
    display: none;
  }
}

body .offerModal .modal-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  align-items: center;
}

body .offerModal .modal-content h2 {
  font-size: 35px;
}

body .offerModal .modal-content p {
  font-size: 15px;
}

body .offerModal .modal-content h1 {
  color: #ff4646;
  font-weight: bolder;
}

body .offerModal .modal-content button {
  width: 180px;
  height: 40px;
  -webkit-clip-path: none;
  clip-path: none;
}

body .offerModal .modal-content .close-button {
  width: 150px;
  background-color: #414141;
  color: #f4ce14;
}

body .offerModal .modal-content .close-button:hover {
  background-color: #000;
}

body .offerModal .modal-content div {
  margin-top: 10px;
  gap: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

[data-aos="image-rotateIn"] {
  -webkit-transform: rotate(360deg) scale(0.5);
  transform: rotate(360deg) scale(0.5);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: transform, opacity;
  transition-property: transform, opacity, -webkit-transform;
}

[data-aos="image-rotateIn"].aos-animate {
  -webkit-transform: rotate(90deg) scale(1);
  transform: rotate(90deg) scale(1);
}

@-webkit-keyframes onclick {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes onclick {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes moveInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@-webkit-keyframes moveInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}

@-webkit-keyframes movemodel {
  0% {
    right: -80%;
  }
  100% {
    right: 20%;
  }
}

@keyframes movemodel {
  0% {
    right: -80%;
  }
  100% {
    right: 20%;
  }
}
/*# sourceMappingURL=main.css.map */
import aos from "https://esm.sh/aos";
var movementStrength = 25;

const hero = document.getElementById("section-hero");

var modal = document.getElementById("offerModal");

var closeButton = document.querySelector(".close-button");

closeButton.onclick = function () {
  modal.style.display = "none";
};

hero.addEventListener("mousemove", (e) => {
  const div = document.createElement("div");
  div.classList.add("hero-section-mouseClick");
  div.style.left = e.pageX + "px";
  div.style.top = e.pageY + "px";
  const box = document.getElementById("section-hero");
  box.appendChild(div);
  setTimeout(() => {
    box.removeChild(div);
    div.remove();
  }, 200);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js