@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
     font-family: 'Montserrat';
     margin: 0; padding: 0;
     box-sizing: border-box;
     border: none;
     outline: none;
     list-style: none;
     text-decoration: none;
     scroll-behavior: smooth;
     transition: all .2s linear;
}

html {
     font-size: 62.5%;
     overflow-x: hidden;
     scroll-behavior: smooth;
     scroll-padding-top: 12rem;
     background: #f6f6f6;
}

body {
     overflow-x: clip;
     max-width: 100%;
     width: 100%;
}

[data-aos] {
  overflow-x: clip; /* yoki hidden */
  transform-origin: center;
  will-change: transform;
}

html.no-scroll,
body.no-scroll {
  overflow: hidden !important;
  position: fixed !important;
  width: 100%;
  height: 100%;
  touch-action: none;
}

section {
     max-width: 1500px;
     margin: 0 auto;
     padding: 2rem;
}

a, span, p, h1, h4 {
     font-family: 'Montserrat';
     font-weight: 500;
}

p {
     color: #000;
     opacity: .6;
     font-size: 1.7rem;
}

*::selection {
     background: #01B7AA;
     color: #f6f6f6;
}

html::-webkit-scrollbar {
     width: 0.7rem;
}

html::-webkit-scrollbar-thumb {
     background: #01B7AA;
     border-radius: 2rem;
}

html::-webkit-scrollbar-track{
     background: #f6f6f6;
}

.heading {
     font-size: 5rem;
     font-weight: 600;
     margin-bottom: 5rem;
     color: #01B7AA;
     border-radius: 1rem;
     text-transform: uppercase;
}

.loader-container {
     position: fixed;
     top:0; left:0;
     height:100%; 
     width:100%;
     z-index: 10000;
     background: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
}
 
.loader-container img{
     width: 20rem;
}
 
.loader-container.fade-out{
     top:-110%;
     opacity:0;
}

.header {
     position: sticky;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999;
     padding-top: 2rem;
     padding-bottom: 1.5rem;
     background: #f6f6f6;
     box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.05);
}

.header .header__flex {
     position: relative;
     display: flex;
     justify-content: space-between;
}

.header .header__flex .logo img {
     width: 20rem;
}

.header .header__flex .navbar {
     display: flex;
     align-items: center;
     gap: 2rem;
}

.header .header__flex .navbar a,
.header .header__flex .navbar .a {
     color: #000;
     display: flex;
     align-items: center;
     gap: 1rem;
     font-size: 1.6rem;
}

.header .header__flex .navbar i {
     font-size: 2rem;
}

.header .header__flex .navbar a:hover {
     color: #01B7AA;
}

.header .header__flex .navbar .select__bar {
     position: relative;
     cursor: pointer;
}

.header .header__flex .navbar .select__bar .option {
     position: absolute;
     top: 160%;
     left: 0;
     width: 20rem;
     background: #fff;
     border-radius: 2rem;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     padding: 1.5rem;
     transform: translateY(1rem);
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.25s ease, transform 0.25s ease;
     z-index: 100;
}

.header .header__flex .navbar .select__bar .option.active {
     transform: translateY(0);
     pointer-events: auto;
     opacity: 1;
}

.header .header__flex .navbar .select__bar .option a {
     padding: 1.5rem;
}

.header .header__flex .navbar .select__bar .option a:hover {
     background: rgba(4, 4, 21, .0392156863);
     border-radius: 1rem;
}

.header .header__flex .navbar .select__lang {
     position: relative;
     display: inline-block;
     cursor: pointer;
}

.header .header__flex .navbar .lang__bar {
     background: #fff;
     border: 1px solid rgba(0, 0, 0, .08);
     border-radius: 4rem;
     padding: 1rem 1.5rem;
}

.header .header__flex .navbar .lang__bar span {
     font-size: 1.5rem;
     display: flex;
     align-items: center;
     gap: 1rem;
}

.header .header__flex .navbar .lang__bar img {
     width: 2rem;
     height: 2rem;
     border-radius: 2rem;
}

.header .header__flex .navbar .lang__option {
     position: absolute;
     top: 160%;
     left: 0;
     width: fit-content;
     background: #fff;
     border-radius: 2rem;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     padding: 1.5rem;
     opacity: 0;
     transform: translateY(10px);
     pointer-events: none;
     transition: opacity 0.25s ease, transform 0.25s ease;
     z-index: 100;
}

.header .header__flex .navbar .lang__option a {
     color: #000;
     font-size: 1.6rem;
     padding: 1.5rem;
}

.header .header__flex .navbar .lang__option a:hover {
     background: rgba(4, 4, 21, .0392156863);
     color: #01B7AA;
     border-radius: 1rem;
}

.header .header__flex .navbar .lang__option.active {
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
}

.header .header__flex .header__social {
     display: flex;
     align-items: center;
     gap: 1.5rem;
}

.header .header__flex .header__social a i {
     font-size: 2.7rem;
}

.header .header__flex .header__social a:hover {
     color: #01B7AA;
}

.overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     backdrop-filter: blur(8px);
     z-index: 999;
     transition: transform 0.4s ease, opacity 0.4s ease;
     transform: translateX(100%);
     opacity: 0;
}

.overlay.active {
     transform: translateX(0);
     opacity: 1;
}

.nav__responsive {
     position: fixed;
     top: 0;
     right: 0;
     z-index: 1000;
     background: #fff;
     height: 100%;
     width: 70%;
     padding: 2rem;
     overflow-y: auto;
}

.nav__responsive.active {
     display: block;
}

.nav__responsive .details {
     display: flex;
     align-items: center;
     justify-content: space-between;
}

.nav__responsive .details img {
     width: 25rem;
}

.nav__responsive .details #close {
     font-size: 4rem;
     cursor: pointer;
     transform: rotate(135deg);
}


.nav__responsive ul li {
     position: relative;
     padding-top: 3rem;
}

.nav__responsive ul li a {
     color: #000;
     display: flex;
     align-items: center;
     gap: 1rem;
     font-size: 2.5rem;
}

.nav__responsive ul li a img {
     width: 5rem;
}

.nav__responsive ul li a:hover {
     color: #01B7AA;
} 

.nav__responsive ul li ul {
     position: relative;
     left: 0;
     width: 20rem;
     display: none;
}

.nav__responsive ul li ul li {
     width: 100%;
}

.nav__responsive ul li:focus-within > ul,
.nav__responsive ul li:hover > ul {
     display: block;
     transition: .2s linear;
}

#menu {
     font-size: 4rem;
     color: #000;
     cursor: pointer;
     display: none;
}

.home__banner .home__flex {
     background: linear-gradient(227.67deg, #01B7AA -150%, #dcfff9), #f2f2f8;
     height: 55rem;
     border-radius: 5rem;
     padding: 7rem 6rem;
     margin-top: 5rem;
     display: flex;
     justify-content: space-between;
}

.home__banner .home__flex .home__content {
     flex: 1 1 40rem;
}

.home__banner .home__flex .home__content span {
     font-size: 2rem;
     font-weight: 600;
     color: #01B7AA;
}

.home__banner .home__flex .home__content h3 {
     font-size: 5rem;
     padding: 2rem 0 2rem 0;
}

.home__banner .home__flex .home__content p {
     font-size: 2.5rem;
     line-height: 4rem;
     color: #000;
}

.home__banner .home__flex .home__img {
     position: relative;
}

.home__banner .home__flex .home__img img {
     max-width: 100%;
     width: 36rem;
}

.home__banner .home__flex .home__img .select__definition {
     position: absolute;
     top: 105%;
     background: #fff;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     border-radius: 1rem;
     display: flex;
     align-items: center;
     gap: 2rem;
     padding: 2rem;
     width: 35.5rem;
}

.home__banner .home__flex .home__img .select__definition .select__flex {
     display: flex;
     gap: 1rem;
     align-items: center;
     z-index: 100;
}

.home__banner .home__flex .home__img .select__definition .select__flex h4 {
     font-size: 1.4rem;
}

.home__banner .home__flex .home__img .select__definition .select__flex input {
     cursor: pointer;
}

.custom-radio {
     appearance: none;
     -webkit-appearance: none;
     background-color: #fff;
     font: inherit;
     width: 2.1rem;
     height: 2rem;
     border: 2px solid #cac9c9;
     border-radius: 50%;
     display: inline-grid;
     place-content: center;
     cursor: pointer;
     transition: border 0.2s ease;
}

.custom-radio:checked {
     border-color: #01B7AA;
}

.custom-radio:checked::before {
     content: "";
     border-radius: 50%;
     width: 1rem;
     height: 1rem;
     background: #01B7AA;
}

.home__banner .home__results {
     display: flex;
     flex-wrap: wrap;
     gap: 3rem;
     margin-top: 3rem;
}

.home__banner .home__results .results__box {
     display: flex;
     align-items: center;
     flex-basis: 30%;
     gap: 1rem;
}

.home__banner .home__results .results__box .num {
     display: inline-block;
     width: 80px;
     text-align: right;
}

.home__banner .home__results h3 {
     font-size: 3rem;
     width: 20rem;
}

.home__banner .home__results p {
     font-size: 1.8rem;
     color: #000;
     opacity: .6;
     padding-bottom: 0;
}

.about {
     margin-top: 10rem;
}

.about .about__flex {
     display: flex;
     justify-content: space-between;
     gap: 2rem;
     flex-wrap: wrap;
}

.about .about__content {
     flex: 1 1 40rem;
}

.about .about__content h3 {
     font-size: 3rem;
     padding-bottom: 2rem;
}

.about .about__content p {
     color: #000;
     opacity: .6;
     font-size: 2rem;
     line-height: 3rem;
     padding-bottom: 6.5rem;
}

.btn {
     display: flex;
     align-items: center;
     gap: 1rem;
     background: #01B7AA;
     width: fit-content;
     padding: 1.5rem 3rem;
     color: #fff;
     border-radius: 1rem;
     font-size: 2rem;
     cursor: pointer;
}

.btn img {
     width: 2rem;
}

.btn:hover img {
     transform: translateX(.2rem);
}

.about .about__img img {
     max-width: 100%;
     width: 55rem;
     border-radius: 2rem;
}

.team {
     margin-top: 10rem;
}

.team .team__flex {
     display: flex;
     flex-wrap: wrap;
}

.team .team__flex .team__user {
     background: #fff;
     padding: 5rem 1rem;
     text-align: center;
     flex: 1 1 25rem;
     border-radius: 2rem;
     margin: 0 1rem 1rem 0;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.team .team__flex .team__user h3 {
     font-size: 1.9rem;
     padding-bottom: 1rem;
}

.team .team__flex .team__user p {
     color: #000;
     opacity: .6;
     font-size: 1.7rem;
}

.team .team__flex .team__user img {
     width: 15rem;
     height: 15rem;
     object-fit: cover;
     border-radius: 50%;
     margin-bottom: 1.5rem;
}

.team .team__flex .team__user .social {
     display: flex;
     gap: 1rem;
     justify-content: center;
     margin-top: 2rem;
}

.team .team__flex .team__user .social i {
     font-size: 2.7rem;
     color: #000;
}

.team .team__flex .team__user .social i:hover {
     color: #01B7AA;
}

.wrapper {
     max-width: 1200px;
     width: 100%;
     position: relative;
     margin-top: 10rem;
     text-align: center;
}

.wrapper h1 {
     text-align: left;
}

.wrapper i {
     height: 50px;
     margin-right: 1rem;
     width: 50px;
     cursor: pointer;
     font-size: 3rem;
     text-align: center;
     line-height: 50px;
     background: #01B7AA;
     color: #fff;
     border-radius: 50%;
     box-shadow: 0 3px 6px rgba(0,0,0,0.23);
     transition: transform 0.1s linear;
}

.wrapper .carousel {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: calc((100% / 2.9) - 12px);
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     gap: 1.5rem;
     border-radius: 8px;
     scroll-behavior: smooth;
     scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
     display: none;
}

.carousel.no-transition {
     scroll-behavior: auto;
}

.carousel.dragging {
     scroll-snap-type: none;
     scroll-behavior: auto;
}
.carousel.dragging .card {
     cursor: grab;
     user-select: none;
}

.carousel :where(.card, .img) {
     display: flex;
     justify-content: center;
     align-items: center;
}

.carousel .card {
     scroll-snap-align: start;
     height: 25rem;
     list-style: none;
     background: #f2f2f8;
     cursor: pointer;
     padding-bottom: 15px;
     flex-direction: column;
     text-align: left;
     border-radius: 8px;
     position: relative;
}

.carousel .card .content__card {
     position: absolute;
     background: #f2f2f8; 
     padding: 2rem;
     opacity: 0;
     font-size: 1rem;
}

.carousel .card .content__card .card__details {
     display: flex;
     align-items: center;
     gap: 1rem;
     flex-wrap: wrap;
}

.carousel .card .content__card .card__details img {
     width: 5rem;
     border-radius: 5rem;
}

.carousel .card:hover .content__card {
     opacity: 1;
}

.carousel .card .content__card  p {
     line-height: 2.5rem;
     padding-top: 2rem;
}

.card img {
     width: 20em;
     object-fit: cover;
}

.reward {
     margin-top: 10rem;
}

.reward .reward__flex {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
     gap: 2rem;
     position: relative;
}

.reward .reward__flex .content__reward {
     background: #fff;
     position: absolute;
     bottom: 0;
     width: 100%;
     height: 25%;
     display: flex;
     align-items: center;
     gap: 2rem;
     justify-content: space-between;
     padding: 1.5rem;
     border-bottom-right-radius: 2rem;
     border-bottom-left-radius: 2rem;
}

.reward .reward__flex .content__reward h3 {
     font-size: 1.5rem;
     color: #000;
}

.reward .reward__flex .content__reward p {
     color: #00998D;
     font-size: 1.5rem;
}

.reward .reward__flex img {
     max-width: 100%;
     cursor: pointer;
     max-width: 100%;
     height: 30rem;
     width: 100rem;
     border-radius: 2rem;
     object-fit: cover;
}

.services {
     margin-top: 10rem;
}

.services .services__row {
     display: flex;
     justify-content: space-between;
     gap: 2rem;
     flex-wrap: wrap;
}

.services .services__row .services__column {
     flex: 1 1 33rem;
}

.services .services__row .services__column img {
     border-radius: 2rem;
     margin-bottom: 2rem;
     width: 20rem;
     height: 14rem;
}

.services .services__row .services__column h3 {
     font-size: 1.7rem;
     color: #000;
     font-weight: 580;
     width: 40rem;
     line-height: 2.5rem;
}

.services .btn {
     margin-top: 7rem;
}

.services__about .services__flex {
     display: flex;
     gap: 2rem;
     flex-wrap: wrap;
     margin-top: 10rem;
}

.services__about .services__flex .services__left {
     flex: 1 1 40rem;
}

.services__about .services__flex .services__left h3 {
     font-size: 3rem;
     padding-bottom: 2rem;
}

.services__about .services__flex .services__left p {
     line-height: 3rem;
}

.services__about .services__flex .services__right {
     flex: 1 1 40rem;
}

.services__about .services__flex .services__right img {
     max-width: 100%;
}

.news {
     margin-top: 10rem;
}

.news .news__flex {
     display: flex;
     gap: 2rem;
     flex-wrap: wrap;
}

.news .news__flex .new__card {
     background: #f2f2f8;
     border-radius: 2rem;
     cursor: pointer;
     flex: 1 1 25rem;
     padding-bottom: 3rem;
}

.news .news__flex .new__card h3 {
     font-size: 2rem;
     padding-bottom: 2rem;
}

.news .news__flex .new__card time {
     font-size: 1.8rem;
}

.news .news__flex .new__card .card__text {
     padding: 2rem;
}

.news .news__flex .new__card img {
     max-width: 100%;
     padding-bottom: 1rem;
     border-radius: 2rem 2rem 0 0;
}

.contact {
     margin-top: 10rem;
}

.contact .contact__flex {
     display: flex;
     gap: 2rem;
     flex-wrap: wrap;
}

.contact .contact__flex .contact__map {
     flex: 1 1 40rem;
}

.contact .contact__flex .contact__form {
     flex: 1 1 40rem;
}

.contact .contact__flex .contact__map iframe {
     border-radius: 2rem;
     max-width: 100%;
}

.contact .contact__flex .contact__form h1 {
     margin-bottom: 2rem;
}

.contact .contact__flex .contact__form input, textarea {
     background: #fff;
     padding: 2rem;
     border: 0.1rem solid #fff;
     width: 100%;
     border-radius: 1rem;
     font-size: 1.5rem;
     color: #000;
     margin-bottom: 1.5rem;
     resize: none;
}

.contact .contact__flex .contact__form textarea {
     height: 15rem;
}

.contact .contact__flex .contact__form input:focus {
     border: 0.1rem solid #01B7AA;
}

.contact .contact__flex .contact__form textarea:focus {
     border: 0.1rem solid #01B7AA;
}

.accordion {
     width: 100%;
     border-radius: 1rem;
     margin-top: 10rem;
}

.accordion .accordion-content {
     margin: 10px 0;
     border-radius: 4px;
     background: #fff;
     overflow: hidden;
     margin-bottom: 1.5rem;
}

.accordion-content.open{
     padding-bottom: 1.2rem;
}

.accordion-content header {
     display: flex;
     min-height: 5rem;
     padding: 2.5rem;
     cursor: pointer;
     align-items: center;
     justify-content: space-between;
     transition: all 0.2s linear;
}

.accordion-content.open header {
     min-height: 5rem;
}

.accordion-content header .title {
     font-size: 2rem;
     font-weight: 600;
     color: #000;
}

.accordion-content header i {
     font-size: 2rem;
     color: #000;
}

.accordion-content .description {
     height: 0;
     font-size: 1.6rem;
     color: #000;
     font-weight: 400;
     padding: 0 2rem;
     transition: all 0.2s linear;
     line-height: 3rem;
}

.background__app {
    padding: 70px;
    border-radius: 50px;
    width: 100%;
    height: 382px;
    background-image: url(../images/background__app.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-top: 20rem;
}

.background__app .left {
     flex: 1 1 50rem;
}

.background__app .left h3 {
     font-size: 4rem;
     width: 65%;
     color: #fff;
}

.background__app .left .button__store {
     margin-top: 5rem;
     display: flex;
     align-items: center;
     gap: 2rem;
}

.background__app .left .button__store img {
     width: 17rem;
}

.background__app .left .button__store img:hover {
     transform: translateY(-1rem);
     transition: 0.5s transform;
}

.background__app .right {
     position: absolute;
     right: 30px;
     top: -90px;
     width: 300px;
     max-height: 560px;
     -webkit-filter: drop-shadow(0 5px 35px rgba(4, 4, 21, .06));
     filter: drop-shadow(0 5px 35px rgba(4, 4, 21, .06));
     border-radius: 26px;
     -webkit-transform: rotate(5.11deg);
     transform: rotate(5.11deg);
}

.background__app .right img {
     max-width: 100%;
     width: 25rem;
     border-radius: 2rem;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.howtowork {
     margin-top: 10rem;
}

.howtowork .heading h2 {
     font-size: 2rem;
     font-weight: 400;
}

.howtowork .row {
     display: flex;
     align-items: center;
     gap: 2rem;
     justify-content: space-between;
     margin-top: 2rem;
     flex-wrap: wrap;
}

.howtowork .row .box {
     text-align: center;
     flex: 1 1 30rem;
}

.howtowork .row .box img {
     max-width: 100%;
     width: 30rem;
     border-radius: 2rem;
     padding-bottom: 2rem;
     padding-right: 3rem;
}

.howtowork .row .box p {
     font-size: 1.7rem;
}

.mentors {
     margin-top: 10rem;
}

.mentors .mentors__flex {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
}

.mentors .mentors__flex .mentors__card {
     background: #f2f2f8;
     flex: 1 1 25rem;
     width: 30rem;
     border-radius: 2rem;
}

.mentors .mentors__flex .mentors__card .mentors__text {
     padding: 1rem;
}

.mentors .mentors__flex .mentors__card .mentors__text h3 {
     font-size: 2rem;
     padding-bottom: 1rem;
}

.mentors .mentors__flex .mentors__card .mentors__text li {
     font-size: 1.6rem;
     list-style: disc;
     margin: 1rem 1.5rem;
     opacity: .6;
}

.mentors .mentors__flex .mentors__card img {
     max-width: 100%;
     width: 100%;
     object-fit: cover;
     border-radius: 2rem 2rem 0 0rem;
}

.footer {
     background: #f2f2f8;
     padding: 2rem;
     margin-top: 10rem;
}

.footer .footer__flex {
     display: flex;
     justify-content: space-between;
     gap: 2rem;
     flex-wrap: wrap;
}

.footer .footer__flex h3 {
     font-size: 2rem;
     padding-bottom: 2rem;
}

.footer .footer__flex a, 
.footer .footer__flex p {
     display: block;
     font-size: 1.7rem;
     padding-bottom: 1.5rem;
     color: #000;
     opacity: .6;
}

.footer .footer__flex a:hover {
     color: #01B7AA;
}

.footer .footer__credits {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 2rem;
     flex-wrap: wrap;
     margin-top: 3rem;
}

.footer .footer__credits .credits__left {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 2rem;
}

.footer .footer__credits .credits__left img {
     width: 20rem;
}

.footer .footer__credits .credits__left img {
     width: 20rem;
}

.footer .footer__credits .credits__right {
     display: flex;
     gap: 1rem;
}

.footer .footer__credits .credits__right a i {
     font-size: 2.7rem;
     color: #000;
}

.footer .footer__credits .credits__right a i:hover {
     color: #01B7AA;
}

#scrollUpBtn {
     position: fixed;
     bottom: 24px;
     right: 24px;
     width: 48px;
     height: 48px;
     border: none;
     border-radius: 50%;
     background: linear-gradient(135deg, #02B7AA, #00998D);
     box-shadow: 0 10px 24px rgba(2,183,170,.35);
     color: #fff;
     display: grid;
     place-items: center;
     cursor: pointer;
     opacity: 0;
     pointer-events: none;
     transform: translateY(12px);
     transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease, background .3s ease;
     z-index: 1000;
}

#scrollUpBtn.show {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0);
}

#scrollUpBtn:hover {
     background: linear-gradient(135deg, #02C9B8, #00B0A0);
     box-shadow: 0 12px 28px rgba(2,183,170,.45);
     transform: translateY(-4px);
}

#scrollUpBtn i {
     font-size: 26px;   /* Boxicons o‘lchami */
     line-height: 1;
     pointer-events: none;
}

.cursor {
     position: fixed;
     left: 0; top: 0;
     width: 0; height: 0;
     pointer-events: none;
     z-index: 9999;
}

.cursor-dot {
     position: fixed;
     width: 8px; height: 8px;
     border-radius: 50%;
     background: #02B7AA;
     transform: translate(-50%, -50%);
     transition: transform .18s ease, opacity .18s ease, background .18s ease;
     will-change: transform;
}

.cursor-ring {
     position: fixed;
     width: 36px; height: 36px;
     border-radius: 50%;
     border: 2px solid #02B7AA;
     background: rgba(2, 183, 170, .12);
     transform: translate(-50%, -50%) scale(1);
     transition: transform .25s cubic-bezier(.22,.61,.36,1), border-color .25s, background .25s, opacity .25s;
     will-change: transform;
}

.cursor.hover .cursor-dot {
     transform: translate(-50%, -50%) scale(0.7);
}

.cursor.hover .cursor-ring {
     transform: translate(-50%, -50%) scale(1);
     background: rgba(2, 183, 170, .18);
}

.cursor.active .cursor-ring {
     transform: translate(-50%, -50%) scale(1.25);
}

.cursor.active .cursor-dot {
     transform: translate(-50%, -50%) scale(0.55);
}

@media (max-width: 1035px) {
     html {
          font-size: 55%;
     }

     .home__banner .home__flex {
          border-radius: 0%;
          height: fit-content;
          padding: 2rem;
     }

     .cursor {
          display: none;
     }
}

@media (max-width: 800px) {
     html {
          font-size: 50%;
     }

     .background__app {
          border-radius: 0;
          height: fit-content;
          padding: 4rem;
          margin-top: 5rem;
     }

     .background__app .right  img {
          display: none;
     }

     .home__banner .home__flex .home__img img {
          display: none;
     }

     .home__banner .home__flex .home__img .select__definition {
          display: none;
     }

     .header .header__flex .navbar {
          display: none;
     }

     .footer,
     .accordion, .contact, .howtowork, .news, .services, .reward, .wrapper, .team .about, .home__flex, .mentors {
          margin-top: 0 !important;
     }

     #menu {
          display: block;
     }

     #scrollUpBtn { bottom: 16px; right: 16px; width: 44px; height: 44px; }
     #scrollUpBtn i { font-size: 24px; }
}

@media (max-width: 500px) {
     html {
          font-size: 45%;
     }

     .wrapper .carousel {
          grid-auto-columns: calc((100% / 1) - 12px);
     }

     .heading {
          font-size: 3.5rem !important;
     }

     .home__banner .home__results {
          display: block;
          margin-top: 0;
     }

     .home__banner .home__results .results__box  {
          margin-top: 2rem;
     }
}