/*****Home*****/

/*Hero*/
.hero.home { background-image: url("../img/landing/hero-home.png"); }
.hero.home .subtitle { max-width: 570px; margin-top: 70px }

/*Racket and App*/
.racket-and-app.section-with-bg { background-image: url("../img/landing/racket-and-app.png"); overflow: hidden; }
.racket-and-app ul { display: flex; flex-direction: column; gap: 10px; position: relative; }
.racket-and-app ul li { display: flex; align-items: center; gap: 100px; font-size: 20px; }
.racket-and-app ul li img { width: 290px; }
.racket-and-app ul li .text-wrapper { max-width: 390px; }
.racket-and-app ul li .text-wrapper h2 { font-weight: 700; padding-bottom: 20px; }
.racket-and-app ul .top { position: relative; left: 160px; }
.racket-and-app ul .bottom { position: relative; left: -130px; }
.racket-and-app ul .feedback-arrows { position: absolute; left: 160px; top: 50%; }
.racket-and-app ul .feedback-arrows img { width: 50px; animation: rotate-360 2s infinite linear; }

.racket-and-app ul .top img,
.racket-and-app ul .bottom img { position: relative; }
.racket-and-app ul .top .text-wrapper,
.racket-and-app ul .bottom .text-wrapper { position: relative; }

/*Go Beyond Fitness Tracking*/
.beyond-fitness-tracking.section-with-bg { background-image: url("../img/landing/beyond-fitness-tracking-bg.png"); height: 715px; overflow: hidden; }
.beyond-fitness-tracking img { width: 250px; }

/*Feedback After Every Stroke*/
.feedback-after-stroke { padding: 80px 20px; background-color: var(--sky-blue); overflow: hidden; }
.feedback-after-stroke .content { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.feedback-after-stroke .text-wrapper { display: flex; flex-direction: column; gap: 25px; }
.feedback-after-stroke h2 { font-size: 24px; font-weight: 700; }
.feedback-after-stroke p { max-width: 690px; font-size: 20px; }
.feedback-after-stroke ul { display: flex; position: relative; }
.feedback-after-stroke ul .blue { position: absolute; left: -370px; top: -250px; }
.feedback-after-stroke ul .blue img { width: 255px; }
.feedback-after-stroke ul .red { position: relative; left: 60px; }
.feedback-after-stroke ul .red img { width: 275px; }
.feedback-after-stroke ul .green { position: relative; top: -200px; left: 360px; }
.feedback-after-stroke ul .green img { width: 365px; }

.feedback-after-stroke ul li img  { opacity: 0; }
.feedback-after-stroke ul.reveal.active img.fade-in { animation: fadeInAnimation 1s; }

/*See Your Path to Becoming a Better Player*/
.becoming-a-better-player { padding: 100px 20px; height: auto; background-image: url("../img/landing/becoming-a-better-player.png"); background-color: #275678d6; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; }
.becoming-a-better-player .main-title { font-weight: 700;font-size: 24px; text-align: center; margin-bottom: 70px; }
.becoming-a-better-player .zigzag-single { display: flex; align-items: center; justify-content: center; gap: 50px; margin-bottom: 60px; }
.becoming-a-better-player .zigzag-single .image-wrapper { position: relative; }
.becoming-a-better-player .zigzag-single .image-wrapper .phone { width: 250px; position: relative; z-index: 2; }
.becoming-a-better-player .zigzag-single .image-wrapper .circle { z-index: 1;}
.becoming-a-better-player .zigzag-single .text-wrapper { display: flex; flex-direction: column; gap: 25px; max-width: 390px; }
.becoming-a-better-player .zigzag-single .text-wrapper h2 { font-weight: 700;font-size: 22px; }

.becoming-a-better-player .zigzag-single.section-two .text-wrapper { max-width: 525px; }
.becoming-a-better-player .zigzag-single.section-one .image-wrapper .circle { width: 160px; height: auto; position: absolute; left: -100px; top: 30px; }
.becoming-a-better-player .zigzag-single.section-two .image-wrapper .circle { width: 130px; height: auto; position: absolute; right: -75px; bottom: 130px; }
.becoming-a-better-player .zigzag-single.section-three .text-wrapper { max-width: none; }
.becoming-a-better-player .zigzag-single.section-three .text-wrapper h2 { max-width: 450px; }
.becoming-a-better-player .zigzag-single.section-three .text-wrapper p { max-width: 465px; }
.becoming-a-better-player .zigzag-single.section-three .image-wrapper .circle { width: 140px; height: auto; position: absolute; left: -100px; bottom: 120px; }

.becoming-a-better-player .zigzag-single .image-wrapper.reveal.active .circle { animation: rotate-90-minus 1.5s linear; }
.becoming-a-better-player .zigzag-single.section-two .image-wrapper.reveal.active .circle { animation: rotate-90 1s linear; }
.becoming-a-better-player .zigzag-single.section-three .image-wrapper.reveal.active .circle { animation: rotate-90-minus 1s linear; }

/*Make Deliberate Training Part of Your Routine*/
.make-deliberate-training.section-with-bg { background-image: url("../img/landing/make-deliberate-training-bg.png"); background-color: #234761cc; }
.make-deliberate-training .content { gap: 120px; }
.make-deliberate-training img { width: 480px; }
.make-deliberate-training .text-wrapper { max-width: 590px; }

.make-deliberate-training.text-with-img .content figure.reveal.active img  { animation: rotate-360 10s infinite linear; }

/*Get Early Access*/
.get-early-access.section-with-bg { background-image: url("../img/landing/get-early-access.png"); background-color: #234761cc; height: 600px; }
.get-early-access .content { flex-direction: column; gap: 25px; }
.get-early-access h2 { font-size: 50px; font-weight: 700; }
.get-early-access p { max-width: 755px; text-align: center; }
.get-early-access a { margin-top: 20px; }

/*Responsive*/
@media screen and (max-width: 1280px){

    /*Racket and App*/
    .racket-and-app ul li { gap: 70px; }
    .racket-and-app ul li img { width: 245px; }
    .racket-and-app ul .feedback-arrows { left: 112px; }

    /*Go Beyond Fitness Tracking*/
    .beyond-fitness-tracking.section-with-bg { min-height: 100vh; height: 100%; }

    /*Feedback After Every Stroke*/
    .feedback-after-stroke { height: 650px; }
    .feedback-after-stroke .text-wrapper { max-width: 550px; }
    .feedback-after-stroke p { font-size: 18px; }
    .feedback-after-stroke ul .blue { left: -290px; top: -236px; }
    .feedback-after-stroke ul .blue img { width: 200px; }
    .feedback-after-stroke ul .red { top: -30px; }
    .feedback-after-stroke ul .red img { width: 170px; }
    .feedback-after-stroke ul .green { left: 270px; }
    .feedback-after-stroke ul .green img { width: 235px; }

    /*See Your Path to Becoming a Better Player*/
    .becoming-a-better-player .zigzag-single { gap: 30px; }

    /*Make Deliberate Training Part of Your Routine*/
    .make-deliberate-training .content { gap: 50px; }
    .make-deliberate-training img { width: 330px; }
    .make-deliberate-training .text-wrapper { max-width: 450px; }

}

@media screen and (max-width: 1024px){

    /*Hero*/
    .hero.home .subtitle { margin-top: 50px; }

    /*Racket and App*/
    .racket-and-app ul { gap: 40px; }
    .racket-and-app ul li { gap: 40px; }
    .racket-and-app ul li img { width: 140px; }
    .racket-and-app ul li .text-wrapper { max-width: 300px; }
    .racket-and-app ul li .text-wrapper h2 { padding-bottom: 15px; }
    .racket-and-app ul li .text-wrapper p { font-size: 16px; }
    .racket-and-app ul .top { left: 85px; }
    .racket-and-app ul .bottom { left: -65px; }
    .racket-and-app ul .feedback-arrows { left: 60px;}
    .racket-and-app ul .feedback-arrows img { width: 40px; }

     /*Feedback After Every Stroke*/
    .feedback-after-stroke h2 { font-size: 20px; }

    /*See Your Path to Becoming a Better Player*/
    .becoming-a-better-player { padding: 80px 20px; }
    .becoming-a-better-player .main-title { margin-bottom: 50px; }
    .becoming-a-better-player .zigzag-single .text-wrapper { gap: 12px; }
    .becoming-a-better-player .zigzag-single .text-wrapper h2 { font-size: 20px; }
    .becoming-a-better-player .zigzag-single.section-two .text-wrapper { max-width: 390px; }

    /*Make Deliberate Training Part of Your Routine*/
    .make-deliberate-training img { width: 260px; }
    .make-deliberate-training .content p { font-size: 18px; }

    /*Get Early Access*/
    .get-early-access.section-with-bg { height: 100%; }
    .get-early-access.section-with-bg h2 { font-size: 32px; }

}

@media screen and (max-width: 768px){

    /*Hero*/
    .hero.home .subtitle { margin-top: 35px; max-width: 495px; }

    /*Go Beyond Fitness Tracking*/
    .beyond-fitness-tracking .content { flex-direction: column; }

    /*Feedback After Every Stroke*/
    .feedback-after-stroke { height: 100vh; padding: 40px 20px; }
    .feedback-after-stroke .text-wrapper { max-width: 415px; }
    .feedback-after-stroke p { font-size: 16px; }
    .feedback-after-stroke ul .blue { left: -250px; top: -215px; }
    .feedback-after-stroke ul .blue img { width: 180px; }
    .feedback-after-stroke ul .red { top: -60px; }
    .feedback-after-stroke ul .red img { width: 100px; }
    .feedback-after-stroke ul .green { left: 230px; }
    .feedback-after-stroke ul .green img { width: 215px; }

    /*See Your Path to Becoming a Better Player*/
    .becoming-a-better-player { padding: 60px 20px; }
    .becoming-a-better-player .zigzag-single { flex-direction: column; margin-bottom: 40px; gap: 20px; }
    .becoming-a-better-player .zigzag-single.section-two { flex-direction: column-reverse; }
    .becoming-a-better-player .zigzag-single.section-three .text-wrapper { position: relative; z-index: 1; }
    .becoming-a-better-player .zigzag-single.section-three { margin-bottom: 20px; }
    .becoming-a-better-player .zigzag-single.section-one .image-wrapper .circle { width: 115px; left: -60px; top: 35px; }
    .becoming-a-better-player .zigzag-single.section-two .image-wrapper .circle { width: 110px; right: -55px; bottom: 110px; }
    .becoming-a-better-player .zigzag-single.section-three .image-wrapper .circle { width: 110px; left: -60px; bottom: 110px; }

    /*Make Deliberate Training Part of Your Routine*/
    .make-deliberate-training .content { flex-direction: column; }
    .make-deliberate-training img { width: 240px; }
    .make-deliberate-training .content p { font-size: 16px; }

}

@media screen and (max-width: 540px){

    /*Racket and App*/
    .racket-and-app ul { gap: 45px; }
    .racket-and-app ul li { gap: 20px; }
    .racket-and-app ul li .text-wrapper { text-align: center; }
    .racket-and-app ul li .text-wrapper h2 { padding-bottom: 15px; }
    .racket-and-app ul .top,
    .racket-and-app ul .bottom { left: 0; flex-direction: column; }
    .racket-and-app ul .feedback-arrows { display: none; }

    /*Feedback After Every Stroke*/
    .feedback-after-stroke .text-wrapper { margin-top: 40px; text-align: center; }
    .feedback-after-stroke p { font-size: 16px; }
    .feedback-after-stroke ul .blue,
    .feedback-after-stroke ul .green,
    .feedback-after-stroke ul .red { position: static; }
    .feedback-after-stroke ul .blue img { width: 140px; }
    .feedback-after-stroke ul .red img { width: 115px; }
    .feedback-after-stroke ul .green img { width: 215px; }

    /*Get Early Access*/
    .get-early-access.section-with-bg h2 { font-size: 26px; }
    .get-early-access p { font-size: 16px; }

    /*Go Beyond Fitness Tracking*/
    .beyond-fitness-tracking img { width: 220px; }

}