/*****Overview*****/

/*Hero*/
.hero.overview { background-image: url("../img/overview/overview-hero.png"); height: 820px; min-height: auto; }
.hero.overview .content { margin-top: 120px; }
.hero.overview h1 { max-width: 660px; margin-bottom: 40px; }
.hero.overview .subtitle { max-width: 525px; font-family: Helvetica, Arial, sans-serif; letter-spacing: 0.5px; margin-bottom: 50px; }
.hero.overview .container-buttons li { font-size: 16px; }

.hero.overview.reveal.active .content { animation: fadeInAnimation 2s; }

/*****Augmented Training And Learning*****/
.augmented-training-and-learning { background-color: var(--sky-blue); padding: 80px 20px; overflow: hidden; }
.augmented-training-and-learning .content { display: flex; flex-direction: column; align-items: center; }
.augmented-training-and-learning h2 { font-size: 30px; font-weight: 700; margin-bottom: 60px; }
.augmented-training-and-learning h3 { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
.augmented-training-and-learning h4 { font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.augmented-training-and-learning .subtitle {font-size: 20px; max-width: 750px; text-align: center; line-height: 1.5; letter-spacing: 0.5px; }
.augmented-training-and-learning .subtitle.medium { max-width: 700px; }
.augmented-training-and-learning .subtitle.small { max-width: 490px; }
.augmented-training-and-learning .main-image { max-width: 1300px; width: 100%; margin: 90px 0; }
.augmented-training-and-learning .main-image .big-img { width: 100%; }
.augmented-training-and-learning .main-image .big-img.only-mobile { display: none; }
.augmented-training-and-learning .main-image .left-sensor { position: absolute; top: 38%; left: 46.8%; width: 35px; }
.augmented-training-and-learning .main-image .right-sensor { position: absolute; top: 71%; left: 59.2%; transform: rotate(180deg); width: 35px; }
.augmented-training-and-learning ul { margin: 100px 0 90px; display: flex; }
.augmented-training-and-learning ul li h4 { font-size: 18px; font-weight: 700; margin-bottom: 0; }
.augmented-training-and-learning ul li p { font-size: 18px; line-height: 1.5; }
.augmented-training-and-learning ul li .title-wrapper { display: flex; align-items: center; gap: 20px; padding-bottom: 40px; }
.augmented-training-and-learning ul li .title-wrapper img { height: 65px; }
.augmented-training-and-learning ul .with-arrow::after { content: ""; display: block; background-image: url("../img/overview/arrow.png"); background-repeat: no-repeat; width: 40px; height: 20px; position: absolute; top: 50%; transform: translateY(-50%); right: -65px; }
.augmented-training-and-learning .four-items li { max-width: 270px; width: 100%; min-height: 300px; padding: 30px; background-color: #6897b7; position: relative; margin-right: 80px; }
.augmented-training-and-learning .four-items li:nth-child(2) { margin-right: 110px;}
.augmented-training-and-learning .four-items .items-wrapper { position: relative; display: flex; gap: 30px; }
.augmented-training-and-learning .four-items .items-wrapper::after { content: ""; display: block; position: absolute; border: 3px solid var(--black); padding: 20px; width: calc(100% + 50px); height: calc(100% + 50px); top: -25px; left: -25px; }
.augmented-training-and-learning .four-items .items-wrapper li { margin-right: 0; }
.augmented-training-and-learning .four-items .items-wrapper .repeat-arrows { position: absolute; z-index: 2; left: 46%; top: -10px; width: 50px; }
.augmented-training-and-learning .three-items { gap: 20px; max-width: 1140px; }
.augmented-training-and-learning .three-items li { width: 100%; border: 3px solid var(--black); padding: 20px; }

.augmented-training-and-learning .main-image.reveal.active .left-sensor,
.augmented-training-and-learning .main-image.reveal.active .right-sensor { animation: fadeInAnimation 1.5s infinite linear; }
.augmented-training-and-learning .four-items.reveal.active .items-wrapper .repeat-arrows { animation: rotate-360 2s infinite linear;}

/*****CueMate's Movement Model*****/
.movement-model ul { display: flex;  gap: 60px; }
.movement-model ul li { width: 100%; max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.movement-model ul li .link-item { margin-top: 15px; }

/*****Skill Model****/
.skill-model { padding-bottom: 20px; }

/*****Training with CueMate****/
.skills-to-next-level { padding-bottom: 10px; }
.skills-to-next-level p { max-width: 485px; margin: 0 auto; }

/*****Assessment and Diagnostics*****/
.assessment-and-diagnostics { padding: 50px 20px 0; color: var(--black); }
.assessment-and-diagnostics .content { display: flex; flex-direction: column; align-items: center; max-width: 1140px; }
.assessment-and-diagnostics h2 { font-size: 24px; font-weight: 700; margin-bottom: 60px; }
.assessment-and-diagnostics figure { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 30px 0 40px; }
.assessment-and-diagnostics figure .image-wrapper { display: flex; width: 100%; }
.assessment-and-diagnostics figure .image-wrapper div { width: 33%; }
.assessment-and-diagnostics figure .image-wrapper div.main-image { position: relative; }
.assessment-and-diagnostics figure .image-wrapper div.main-image img { position: absolute; width: calc(100% + 4px); bottom: -26px; left: 4px; }
.assessment-and-diagnostics figure .timeline { height: 24px; width: 100%; background-color: #e3f0f9; display: flex; }
.assessment-and-diagnostics figure .timeline div { width: 100%; height: inherit; }
.assessment-and-diagnostics figure .timeline div.active { background-color: #71b4e1; }
.assessment-and-diagnostics .wrapper-lists { display: flex; gap: 30px; }
.assessment-and-diagnostics .wrapper-lists .single-list { width: 100%; }
.assessment-and-diagnostics .wrapper-lists .single-list h3 { font-weight: 700; padding-bottom: 20px; }
.assessment-and-diagnostics .list-item-circle li { font-weight: 500; }
.assessment-and-diagnostics .link-item { margin: 30px 0; }


/*****Rating System****/
.rating-system .link-item.black { margin-top: 50px; }

/*****Three Positions****/
.three-positions.two-sides-content .right img { max-width: none; width: auto; }
.three-positions.two-sides-content .images-wrapper { max-width: 650px; width: 100%; position: relative; }
.three-positions.two-sides-content .images-wrapper .main-image { width: 100%; }
.three-positions.two-sides-content .images-wrapper .first-sensor { position: absolute; width: 40px; left: 7%; top: 27%; }
.three-positions.two-sides-content .images-wrapper .second-sensor { position: absolute; width: 40px; left: 58.7%; top: 29%; transform: rotate(180deg); }
.three-positions.two-sides-content .images-wrapper .third-sensor { position: absolute; width: 40px; right: 3%; top: 15%; }

.three-positions.two-sides-content .right.reveal.active .images-wrapper .first-sensor,
.three-positions.two-sides-content .right.reveal.active .images-wrapper .second-sensor,
.three-positions.two-sides-content .right.reveal.active .images-wrapper .third-sensor { animation: fadeInAnimation 2s infinite linear; }

/*****Benefits of Using CueMate****/
.benefits-of-cuemate { padding-top: 0; }
.benefits-of-cuemate.two-sides-content .content { gap: 90px; }
.benefits-of-cuemate .text-wrapper { max-width: none; }
.benefits-of-cuemate .text-wrapper p { max-width: 475px; margin: 0 auto; }
.benefits-of-cuemate .right img { max-width: 480px; width: 100%; }

.benefits-of-cuemate.two-sides-content .right.reveal.active img { animation: rotate-360 10s infinite linear; }

/*****CueMate Web App****/
.cuemate-app-features { padding-top: 0; padding-bottom: 120px; }
.cuemate-app-features .left h3 { font-size: 18px; }
.cuemate-app-features .link-item.black { margin-top: 50px; }


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

    /*****Augmented Training And Learning*****/
    .augmented-training-and-learning .main-image { max-width: 875px; }
    .augmented-training-and-learning h2 { margin-bottom: 50px; }
    .augmented-training-and-learning .subtitle { font-size: 18px; }
    .augmented-training-and-learning ul { margin: 80px 0 90px; }
    .augmented-training-and-learning .four-items li { max-width: 230px; min-height: 270px; padding: 25px; margin-right: 50px; }
    .augmented-training-and-learning .four-items li:nth-child(2) { margin-right: 65px; }
    .augmented-training-and-learning .four-items .items-wrapper li { margin-right: 0; }
    .augmented-training-and-learning ul .with-arrow::after { right: -50px; }
    .augmented-training-and-learning ul li .title-wrapper { gap: 15px; }
    .augmented-training-and-learning ul li .title-wrapper img { height: 50px; }
    .augmented-training-and-learning ul li h4 { font-size: 18px; }
    .augmented-training-and-learning ul li p { font-size: 14px; }
    .augmented-training-and-learning .four-items .items-wrapper { gap: 15px; }
    .augmented-training-and-learning .four-items .items-wrapper::after { width: calc(100% + 30px); height: calc(100% + 30px); top: -14px; left: -15px; }
    .augmented-training-and-learning .four-items .items-wrapper .repeat-arrows { width: 40px; }

    .augmented-training-and-learning .main-image .left-sensor { width: 30px; left: 46.3%; }
    .augmented-training-and-learning .main-image .right-sensor { width: 30px; left: 58.8%; }


}

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

    /*Hero*/
    .hero.overview { height: 100%; min-height: 100vh; }
    .hero.overview .content { margin-top: 65px; }
    .hero.overview h1 { margin-bottom: 25px; }
    .hero.overview .subtitle { margin-bottom: 30px; }

    /*****Augmented Training And Learning*****/
    .augmented-training-and-learning ul { flex-wrap: wrap; justify-content: center; gap: 50px; }
    .augmented-training-and-learning .four-items li,
    .augmented-training-and-learning .four-items li:nth-child(2) { margin-right: 0; }
    .augmented-training-and-learning .three-items { max-width: 350px; }

    .augmented-training-and-learning .main-image .left-sensor { width: 25px; left: 46.7%; }
    .augmented-training-and-learning .main-image .right-sensor { width: 25px; left: 59%; }

    /*****Assessment and Diagnostics*****/
    .assessment-and-diagnostics figure .image-wrapper div.main-image img { width: calc(100% + 2px); }

    /*****Three Positions****/
    .three-positions.two-sides-content .images-wrapper { max-width: none; min-width: 270px; }
    .three-positions.two-sides-content .right .images-wrapper img { min-width: auto; }
    .three-positions.two-sides-content.reveal.active .images-wrapper .first-sensor,
    .three-positions.two-sides-content.reveal.active .images-wrapper .second-sensor, 
    .three-positions.two-sides-content.reveal.active .images-wrapper .third-sensor { width: 30px; }

}

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

    /*****Benefits of Using CueMate****/
    .benefits-of-cuemate.two-sides-content .content { flex-direction: column; gap: 50px; }
    .benefits-of-cuemate .right img { max-width: 250px; }

    /*****Augmented Training And Learning*****/
    .augmented-training-and-learning .main-image .left-sensor { width: 22px; left: 46.2%; top: 37%; }
    .augmented-training-and-learning .main-image .right-sensor { width: 22px; left: 58.7%; top: 70.5%; }
    .augmented-training-and-learning .main-image .big-img.only-desktop { display: none; }
    .augmented-training-and-learning .main-image .big-img.only-mobile { display: block; }

    /*****Three Positions****/
    .three-positions.two-sides-content.reveal.active .images-wrapper .first-sensor,
    .three-positions.two-sides-content.reveal.active .images-wrapper .second-sensor, 
    .three-positions.two-sides-content.reveal.active .images-wrapper .third-sensor { width: 20px; }
    
}

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

    /*****Augmented Training And Learning*****/
    .augmented-training-and-learning { padding: 60px 20px; }
    .augmented-training-and-learning .content { text-align: center; }
    .augmented-training-and-learning h2 { margin-bottom: 40px; }
    .augmented-training-and-learning .subtitle { font-size: 16px; }
    .augmented-training-and-learning ul { gap: 30px; margin: 60px 0 80px; }
    .augmented-training-and-learning ul li .title-wrapper { padding-bottom: 30px; justify-content: center; }
    .augmented-training-and-learning ul .with-arrow::after { display: none; }
    .augmented-training-and-learning .four-items li { min-height: 250px; }
    .augmented-training-and-learning .four-items .items-wrapper { margin-top: 0; flex-wrap: wrap; justify-content: center; gap: 30px; }
    .augmented-training-and-learning .four-items .items-wrapper::after { display: none; }
    .augmented-training-and-learning .four-items .items-wrapper .repeat-arrows { display: none; }
    .augmented-training-and-learning .three-items li h4 { text-align: left; }

    .augmented-training-and-learning .main-image { max-width: 335px; }
    .augmented-training-and-learning .main-image .left-sensor { width: 16px; left: 45.8%; top: 34%; }
    .augmented-training-and-learning .main-image .right-sensor { width: 16px; left: 58.3%; top: 69.5%; }

    /*****CueMate's Movement Model*****/
    .movement-model ul { flex-wrap: wrap; }

    /*****Assessment and Diagnostics*****/
    .assessment-and-diagnostics h2 { font-size: 22px; margin-bottom: 40px; }
    .assessment-and-diagnostics .wrapper-lists { flex-wrap: wrap; }
    .assessment-and-diagnostics figure .image-wrapper div.main-image img { width: 100%; left: 1px; bottom: -7px; }

}