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

  .wrapper {max-width: 1500px;}


  .course-item {max-width: 110px;}

  .search-form {max-width: 650px;}

  .home-banner::after {width: 376px;}

  .decoration-2::after {width: 170px; height: 392px;}

  .highlight .container .grid {padding-bottom: 60px;}

  .home-banner article {max-width: 650px;}

  .vertSwiper .swiper-slide article p {font-size: 19px;}

  .product-item figure {height: 320px;}

  .product-wrapper .info-item::after {right: -122px;}

  .step-item:last-child {margin-right: 150px;}


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

  :root {
    --top-left: 0 50px 50px 50px;
    --top-left-small: 0 25px 25px 25px;
    --bottom-left: 50px 50px 50px 0;
  }

  #loading-screen article {top: 100px; left: 100px; width: 750px;}

  .wrapper {max-width: 1300px;}
  .wrapper-sml {max-width: 1200px;}
  header .header-left > a, header .header-left p {margin: 0 15px; font-size: 16px;}
  header .header-left p {padding: 30px 40px 30px 20px;}
  header .header-right .bottom a {font-size: 16px;}

  .arrow {right: 30px; width: 15px; height: 15px; top: 30px;}

  .home-banner article .form-wrapper {margin-top: 50px;}
  .home-banner article .form-wrapper .button, footer .grid > article .form-wrapper .button {padding: 36px 70px 37px;}

  .inner-banner article {max-width: 510px;}
  .inner-banner.products article  {max-width: 520px;}

  .form-wrapper input {font-size: 18px;padding: 31px 140px 35px 50px;}

  .product-wrapper .info-item h3 {max-width: 400px;}
  .product-wrapper .info-item p {font-size: 20px; max-width: 340px;}

  .filter-accordion p {font-size: 16px;}

  .content p {font-size: 18px;}

  .master h3 {max-width:400px;}

  .filter-accordion ul li a {font-size: 14px;}

  .course-item {max-width: 100px; height: 600px;}
  .course-item > span {height: 600px;}
  .course-item > span p {font-size: 16px;}
  .course-item.opened {max-width: 375px;}
  .course-item figure .circle {right: 20px; top: 20px;}

  .home-banner {padding: 14vw 0 6vw;}
  .home-banner::before {height: 120dvh;}
  .home-banner::after {top: 75dvh; width: 326px;}
  .home-banner article {max-width: 585px;}

  .search-form { max-width: 550px;}

  .button {font-size: 20px; padding: 43px 50px;}

  .product-wrapper {grid-template-columns: 1fr 1fr 1fr;}
  .button-wrapper {grid-column: span 3;}

  .category-navigation .navigation::before {width: 25px; height: 25px;}
  .category-navigation .navigation, .category-navigation p, .category-navigation .sort-by p, .category-navigation .sort-by .custom-select span {font-size: 16px;}

  .category-navigation .sort-by .custom-select {width: 55px;}

  .step-item:last-child {margin-right: 200px;}

  .info-tab {padding: 20px; grid-template-columns: 1fr 1fr;}
  .info-tab .flex-row {padding-right: 15px;}
  .info-tab .flex-row:last-child {padding-left: 15px;}
  .info-tab .flex-row p strong {font-size: 25px;}

  .highlight .container .grid article p strong {line-height: 1;}

  .vertical-swiper-wrapper {grid-template-columns: 100px 1fr; height: 600px;}
  .vertical-swiper-wrapper .custom-pagintion .swiper-pagination {left: 15px;}

  .vertSwiper .swiper-slide article p {font-size: 16px;}

  .content.purple .grid-left { grid-template-columns: 450px 1fr;}
  .step-tile p strong {font-size: 20px;}
  .step-tile p {font-size: 16px;}
  .step-tile::after {left:115px;}

  .course-highlight {padding: 60px 65px}
  .course-highlight h3 {font-size: 50px; line-height: 60px;}
  .course-highlight article {bottom: 30px; right: 40px;}

  .content-standard .grid {grid-gap: 50px;}

  .section--checkout > .wrapper {max-width: 1200px;}
  .checkout-left {max-width: 700px;}

}

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

  .dropdown-wrapper {grid-template-columns: 1fr 3fr 1fr; padding: 30px; grid-gap: 30px;}
  .toggle-switch {width: 250px;}
  .toggle-switch label {font-size: 13px;}
  .toggle-switch .slider {width: 83px;}
  .categories-list ul li a {font-size: 14px; margin: 30px 0;}
  .categories-list ul li a::before {width: 30px; height: 25px;}
  header .header-left p {margin-right: 0px;}
  .arrow {right: 10px;}

}

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

  #loading-screen article {top: 50px; left: 50px;}
  #loading-text {bottom: 30px; right: 50px;}

  header .logo {width: 200px;}
  header .header-left > div .dropdown {left: -5px; padding: 35px 20px 30px;}

  .wrapper, .inner-banner.products .wrapper, .info-bar {max-width: 1100px;}

  .course-content .wrapper { max-width: 1050px;}
  .course-content h3 {font-size: 22px;}
  .course-content p, .course-content li {font-size: 16px;}
  .course-content li {margin-bottom: 10px;}


  .info-content article p {font-size: 12px;}
  .info-content article p strong {font-size: 16px;}
  .info-bar {padding: 30px; margin: 100px auto -185px;}

  .course-item { max-width: 80px; height: 550px; }
  .course-item > span {height: 550px;}

  .home-banner {padding: 16vw 0 6vw;}
  .home-banner::after {width: 376px; height: 310px;}

  .home-banner article { max-width: 500px;}
  .home-banner article h2 {font-size: 3vw;}

  .inner-banner.shop {padding: 14vw 0 10vw;}

  .filter-grid {grid-gap: 50px;}

  .search-form {max-width: 500px;}
  .form-wrapper input {font-size: 16px; padding: 29px 160px 31px 30px;}
  .home-banner article .form-wrapper .button, footer .grid > article .form-wrapper .button {padding: 33px 60px 34px;}


  .category-slider h3 {margin-bottom: 30px;}
  .custom-pagination a {font-size: 16px;}

  .categorySwiper .swiper-slide article p strong {font-size: 20px; margin-bottom: 10px;}
  .categorySwiper .swiper-slide article p {font-size: 16px;}

  .login-banner .login-box h2 {font-size: 3vw; line-height: 3.5vw;}

  .vertSwiper .swiper-slide {grid-gap: 40px;}


  .stepsSwiper, .step-item {height: 344px;}
  .step-tile {padding: 25px 20px 15px; height: 130px;}
  .step-tile::after {top: 130px;}
  .step-item:nth-child(2n+2) .step-tile::after { bottom: 125px;}

  .button {padding: 33px 50px 38px;}

  .section__cart .wrapper-sml {max-width: 1100px;}

  footer .grid {grid-gap: 100px;}

}

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

  header .header-left > a, header .header-left p {font-size: 15px; margin: 0 5px;}
  header .header-left .arrow {width: 12px; height: 12px; right: 10px;}

  header .header-left p { padding: 30px 30px 30px 20px;}

  .dropdown-wrapper {padding: 30px; grid-template-columns: 1fr 2fr 1fr;}

  .button-outline {font-size: 15px;}
  .wrapper-sml {max-width: 900px;}

  .stepsSwiper, .step-item {height: 300px;}
  .step-tile {padding: 25px 20px 15px; height: 130px;}
  .step-tile::after {top: 130px; left: 140px;}
  .step-item:nth-child(2n+2) .step-tile::after { bottom: 123px;}

  .vertSwiper .swiper-slide article div {margin-top: 10px;}


  .section--checkout > .wrapper {max-width: 1000px;}
  .checkout-left {max-width: 700px;}

}
@media screen and (max-width: 1100px) {
  .hamburger {display: block;}

  header .logo {padding: 30px 0;}
  header .header-left, header .header-right {display: none;}

  h3 {font-size: 40px;}
  .wrapper, .inner-banner.products .wrapper, .info-bar {max-width: 900px;}
  .course-content .wrapper {max-width: 850px;}
  .course-content.intro {padding: 100px 0 0;}
  .course-content .grid {grid-gap: 30px;}
  .course-content article, .course-content .grid article:last-child {max-width: none; margin: 0;}

  .info-bar {margin: 50px auto -130px;}

  .course-content .grid-right {grid-template-columns: 1fr; grid-gap: 50px;}

  .advertisement { max-width: 300px; margin: 0 auto;}

  .button { padding: 23px 40px 28px; font-size: 16px; }

  .content p { font-size: 14px; }

  .grid, .filter-grid {grid-template-columns: 1fr;}

  .inner-banner.shop { padding: 130px 0 100px; }
  .product-container {margin: -50px 0; padding: 50px 0 100px; border-radius: 0 40px 0 0;}

  .filter {display: none; position: relative; top: auto;}
  .category-navigation {padding-bottom: 50px;}
  .category-navigation .sort-by {gap: 20px; bottom: 25px;}
  .category-navigation .sort-by .custom-select {width: 55px; display: flex;}

  .product-item figure, .categorySwiper .swiper-slide figure { height: 230px; }
  .product-item .tags {bottom: 15px; width: 90%;}
  .product-item .tags span {padding: 5px 10px; font-size: 10px;}

  .product-item article .title {font-size: 16px; max-width: 160px;}

  .product-wrapper .info-item {padding: 50px 0;}

  .content.purple .grid-left { grid-template-columns: 355px 1fr; }

  .course-highlight h3 {margin-bottom: 100px;}

  .section__cart .wrapper-sml { max-width: 900px;}

  footer .grid figure {display: none;}
  footer .grid {grid-gap: 50px; padding-bottom: 100px; width: 85%;}
  footer .grid > article {max-width: none;}
  footer .grid > article p {font-size: 20px;}

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

  #loading-screen article {left: 50%; transform: translateX(-50%);width: 85%;}
  #loading-screen article span {font-size: 40px; line-height: 46px;}
  #loading-screen article span:nth-child(5) p {margin-left: 0px;}

  header .header-wrapper {border-radius: 0 0 30px 30px}

  h3 {font-size: 30px; margin-bottom: 30px;}
  h4 {font-size: 20px; margin-bottom: 20px;}

  .button {padding: 30px 50px 30px; font-size: 16px}

  .wrapper, .inner-banner.products .wrapper, .info-bar {max-width: 90%;}

  .home-banner { padding: 120px 0 50px; }
  .home-banner::after { width: 156px; height: 160px; top: 80dvh; left: -50px; }
  .home-banner::before { height: 45dvh; }
  .home-banner .grid {grid-gap: 50px; position: relative; z-index: 1;}
  .home-banner article {max-width: 100%;}
  .home-banner article h1 {font-size: 12px;}
  .home-banner article h2 { font-size: 35px; margin-bottom: 10px;}
  .home-banner article p {font-size: 20px; line-height: 1.3;}

  .category-slider {position: relative; z-index: 1; margin-bottom: 30px;}
  .categorySwiper { width: 120vw;}

  .custom-navigation {width: 100vw; max-width: 100%;}

  .course-item article {left: 50%; transform: translateX(-50%); width: 85%; bottom: 20px;}
  .course-item article p {font-size: 15px; margin-bottom: 0px;}
  .course-item article span {font-size: 12px;}

  .course-item {height: 300px; width: 100%; max-width: 20%;}
  .course-item.opened {max-width: 200px; height: 300px; width: 100%; max-width: 55%;}
  .course-item > span { height: 300px; padding-bottom: 20px; }
  .course-item > span div {width: 25px; height: 25px; margin-top: 15px;}
  .course-item > span p { font-size: 12px; letter-spacing: 2px; }

  .custom-pagination {flex-wrap: wrap; grid-gap: 20px;}

  .decoration-2::after { width: 100px; height: 322px; bottom: -150px; }

  .content.padding {padding: 50px 0;}

  .content .grid {grid-gap: 30px;}
  .content .grid article h3:only-child {margin: 0;}
  .content .grid > figure:first-child {margin-right: 0;}
  .content .grid > article:last-child {max-width: 100%; padding: 0;}

  .content p {font-size: 16px; margin-bottom: 20px;}

  .info-tab {margin-bottom: 50px;}
  .info-tab .flex-row {padding: 0; border: 0;}

  .content.purple .grid-left, .grid-left {grid-template-columns: 1fr; grid-gap: 50px;}

  .stepsSwiper {margin-left: 0; position: relative; padding: 0px 200px 0 100px; width: 140vw; right: 0;}
  .stepsSwiper::before {left: -20px; width: 0px; box-shadow: 20px 0px 10px 10px #24053A;}

  .highlight .container .grid article p {font-size: 16px;}
  .highlight .container .grid article p strong {font-size: 20px; margin-bottom: 0px;}
  .highlight .container .grid figure {margin-top: 1px;}
  .highlight .container .grid > img {height: 52px; max-height: 52px; top: 80px;}

  .vertical-swiper-wrapper {grid-template-columns: 1fr; padding: 20px; height: 820px; margin-bottom: 30px;}
  .vertical-swiper-wrapper .custom-pagintion .swiper-pagination { right: auto; display: flex; position: relative; justify-content: center; left: auto;}

  .vertSwiper .swiper-slide {grid-template-columns: 1fr; grid-gap: 30px; padding-bottom: 100px;}
  .vertSwiper .swiper-slide figure {border-radius: var(--top-left-small); height: 230px;}
  .vertSwiper .swiper-slide article h3 {margin-bottom: 10px;}
  .vertSwiper .swiper-slide article h6 {font-size: 12px;}
  .vertSwiper .swiper-slide article p {margin-bottom: 20px; font-size: 16px;}
  .vertSwiper .swiper-slide article .flex-row .button {order: 2; margin-top: 20px;}

  .vertSwiper .swiper-slide .details {bottom: 0px; right: auto; justify-content: center; width: 100%;}
  .vertSwiper .swiper-slide .details div {font-size: 12px;}
  .vertSwiper .swiper-slide .details div:first-child {margin-left: 0px;}

  .testi-swiper h3 {margin-bottom: 20px;}
  .testiSwiper {width: 100%;}

  footer {border-radius: 50px 50px 0 0; padding: 30px 0;}
  footer .grid > article h3 {margin-bottom: 20px; font-size: 25px;}
  footer .grid > article p, footer .grid > article .form-wrapper {margin-bottom: 30px;}

  footer .grid > article p, footer .grid > article .form-wrapper {font-size: 16px;line-height: 1.3;}

  footer .social-row ~ div p a {margin-bottom: 5px; font-size: 16px;}

  #scrollToTopBtn {bottom: 25px;}

  footer .copyright {justify-content: center; grid-gap: 10px;}

  .social-row  {margin-bottom: 15px;}
  .social-row + div p {margin: 0!important;}

  .login-banner .wrapper-sml { padding: 150px 0; margin-bottom: -70px; max-width: 90%;}
  .login-banner .login-box {max-width: 100%; padding: 30px;}
  .login-banner .login-box h1 {margin-bottom: 10px;}
  .login-banner .login-box h2 { font-size: 30px; line-height: 40px; }

  .form-grid {grid-template-columns: 1fr;}
  .form-grid #registerSystemMessage, .form-grid #systemMessage, .form-grid .button-group, .form-field.textarea, .login-banner .login-box #resetForm .form-field {grid-column: span 1;}
  #login_form .button-group {gap: 20px; margin-top: 0px;}
  .login-banner .login-box p {font-size: 14px;}

  .content.purple .grid-left {grid-template-columns: 100%;}

  .small-banner {padding: 150px 0 70px; margin-bottom: 40px;}
  .small-banner h1 {font-size: 20px;}

  .course-content.faqs { max-width: 90%; margin: 0 auto 40px;}

  .course-stage {padding: 30px;}
  .course-stage p { font-size: 16px; line-height: 24px;}
  .course-stage p strong {font-size: 20px;}

  .course-highlight {padding: 40px; margin-bottom: 30px;}
  .course-highlight article {position: relative; bottom: auto; right: auto; max-width: 100%;align-items: flex-start; flex-direction: column; gap: 15px;}
  .course-highlight h3 {font-size: 30px; line-height: 1.3; margin-bottom: 40px; z-index: 1; position: relative;}
  .course-highlight .button {padding: 30px 50px 30px;}

  .form-wrapper input { font-size: 16px; padding: 28px 160px 29px 30px; }
  .form-wrapper .button { padding: 32px 50px; }
  .product-wrapper .form-wrapper input {padding: 26px 150px 29px 30px; font-size: 16px;}
  .product-wrapper .info-item h3 { max-width: 100%; }

  .vertical-swiper-wrapper .custom-pagintion .swiper-pagination-bullet {margin: 0 0 20px; width: 50px; height: 50px;}
  .vertical-swiper-wrapper .custom-pagintion .swiper-pagination-bullet::before {width: 20px; height: 20px;}

  .inner-banner.products .wrapper, .course-content .wrapper {max-width: 85%;}

  .course-content.intro {padding: 100px 0 0;}
  .course-content .grid {grid-gap: 30px;}

  .course-content h3 {font-size: 25px;}
  .course-content p, .course-content li {font-size: 16px;}

  .inner-banner.products .product-category {font-size: 14px; padding-left: 40px; margin-bottom: 20px;}
  .inner-banner.products .product-category::before {left: 5px; width: 25px; height: 25px;}
  .inner-banner.products .product-title {font-size: 30px; line-height: 1.3;}
  .inner-banner.products .product-intro p {font-size: 16px; line-height: 1.3; max-width: 100%; font-weight: 300;}
  .inner-banner.products .button-row {flex-direction: column-reverse; align-items: flex-start;}
  .inner-banner.products .button-row p {font-weight: 300; padding: 5px 0;}
  .inner-banner.products .button-row p::after {display: none;}

  .course-content.decoration {padding: 50px 0;}

  .course-content .grid-right {grid-template-columns: 1fr; grid-gap: 30px;}

  .add-to-cart-wrapper {margin-top: 30px;}

  .info-bar {margin: 50px auto -150px; max-width: 90%; grid-template-columns: 1fr; padding: 20px; grid-gap: 15px;}

  .info-content article p strong {font-size: 16px; margin-top: 5px;}

  #systemMessage p {margin-top: 10px;}

  .dashboard {padding: 150px 0 200px;}
  .dashboard-content h1 {font-size: 25px; line-height: 1.5;}
  .dashboard-content article p {font-size: 16px; line-height: 1.3;}
  .dashboard .grid-left {grid-template-columns: 1fr; max-width: 90%;}

  .grid-left-courses {grid-template-columns: 1fr; margin-bottom: 50px;}
  .dashboard-content  {padding: 25px 20px 20px;}
  .dashboard .breadcrumbs {margin: -35px 0 30px}
  .dashboard .sticky { position: relative; top: auto;}
  .dashboard .course-container h2 {font-size: 25px; line-height: 1.3; margin-bottom: 30px;}
  .dashboard .course-container p strong {font-size: 20px;}
  .dashboard .course-container .video-container {height: 140px}
  .dashboard .course-stage {padding: 20px 20px 0; max-height: 120px; scroll-margin-top:200px;}
  .dashboard .course-stage p {margin-bottom: 20px; min-height: 48px;}
  .dashboard .course-stage p:first-child {margin-bottom: 5px; min-height: 0px;}
  .dashboard .course-stage .pill {top: 20px; right: 20px;}
  .dashboard .course-stage:first-child { border-radius: 15px 15px 0 0;}
  .dashboard .course-stage:last-child { border-radius: 0 0 15px 15px;}
  .account-nav ul li .course-nav-item .active-overlay article h4 {max-width: 70%; font-size: 30px;}
  .account-nav ul li .course-nav-item .active-overlay article p {font-size: 14px;}
  .account-nav ul li .course-nav-item {height: 250px;}
  .account-nav ul li .course-nav-item .top h5 {max-width: 70%;}
  .account-nav ul li .course-nav-item .top p {max-width: 100%;}
  .account-nav ul li .course-nav-item .progress-wrapper p {font-size: 14px;}
  .account-nav ul li .course-nav-item.active {height: 275px;}
  .account-nav ul li .course-nav-item.active .active-overlay {max-height: 275px;}
  .account-nav ul li .course-nav-item.active .active-overlay figure {max-height: 275px; height: 275px;}
  .account-nav ul li .course-nav-item .active-overlay figure img {height: 275px;}

  .details-pop {max-width: 95%;}
  .details-pop article {padding: 20px; max-height: 75dvh; overflow: scroll;}
  .details-pop article h3 {font-size: 20px; line-height: 1.3;}
  .details-pop .close-icon {right: 20px; top: 20px;}

  .wrapper-sml {max-width: 80%;}
  .section__cart .wrapper-sml {max-width: 80%;}

  .content-standard {padding: 170px 0 100px;}
  .content-standard h2 {font-size: 30px;}
  .content-standard p {font-size: 16px; line-height: 1.3;}

  .product-wrapper {grid-template-columns: 1fr 1fr; grid-gap: 15px;}
  .button-wrapper {grid-column: span 2;}

  .product-wrapper .form-wrapper .button {font-size: 16px;}

  .search-form {max-width: none;}
  .home-banner article .form-wrapper .button, footer .grid > article .form-wrapper .button {padding: 32px 50px}

  .slide {padding: 30px;}
  .slide h2 {font-size: 20px; line-height: 1.3;}
  .slide .grid-right {grid-template-columns: 1fr;}

  .section__cart, .section--checkout {padding: 150px 0; margin-bottom: -75px;}
  .section--checkout > .wrapper {max-width: 85%;}

  footer .flex-row {align-items: flex-start; gap: 10px;}

  .cart__item {flex-wrap: wrap;}
  .cart__item figure {width: 100%; height: 250px; margin: 0 auto 25px; display: block;}
  .cart__item article {width: 100%; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px;}
  .cart__item article > div:first-child {grid-column: span 3;}

  .wrapper-xsml {max-width: 85%;}
  .content-standard .wrapper-xsml h3 {font-size: 20px; margin-bottom: 10px;}
  .content-standard .wrapper-xsml p {font-size: 16px; margin-bottom: 20px;}

  .category-navigation {display: grid; text-align: center; gap: 10px; grid-template-columns: 1fr;}
  .category-navigation .navigation, .category-navigation p {margin: 0 auto;}

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

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

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

}