@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;

   scroll-behavior: smooth;
}

body {
   background: #17153b;
}

::-webkit-scrollbar {
   width: 10px;
   background: #252B42;
}

::-webkit-scrollbar-thumb {
   background: #eee;
}

::selection {
   background: rgba(66, 76, 117, 0.7);
   color: #fff;
}

.app {
   max-width: 1300px;
   margin: 0 auto;
   padding: 20px;
}

.header {
   display: flex;
   padding: 20px 0;
   align-items: center;
   justify-content: space-around;
}

.menu .menu-item,
.button-mark,
.main-type,
.main-header,
.main-subline,
.button-line,
.main-plus,
.about-title,
.title,
.lessons-category,
.lesson-name {
   font-family: 'Montserrat';
   font-weight: 700;
   font-size: 24px;
   line-height: 32px;
   letter-spacing: 0.1px;
   color: #FFFFFF;
}

.brand {
   width: 150px;
}

.menu {
   display: flex;
   flex-wrap: wrap;
   margin-left: 83px;
   gap: 21px;
}

.menu .menu-item {
   flex: auto 100px;
   display: block;
   color: #fff;
   text-decoration: none;
   font-size: 14px;
   line-height: 24px;
   text-align: center;
   letter-spacing: 0.2px;
   color: #FFFFFF;
   transition: 0.3s;
   border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.menu-item:hover {
   border-bottom: 1px solid #fff;
}

.buttons {
   width: 100%;
   flex: 1;
   display: flex;
   justify-content: right;
   align-items: center;
}

.button-mark {
   font-size: 14px;
   line-height: 22px;
   text-align: right;
   letter-spacing: 0.2px;
   color: #FFFFFF;
   text-decoration: none;
   transition: 0.3s;
   display: inline-block;
   background: #382b85;
   border-radius: 5px;
   padding: 15px 25px;
   border: 0;
}

.button-mark:hover {
   opacity: 0.8;
}

.main {
   text-align: center;
   max-width: 899px;
   margin: 0 auto;
   margin-top: 133px;
   min-height: 100vh;
}

.main-type {
   text-align: center;
   width: 100%;
   margin-top: 20px;
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0.1px;
   color: #382b85;
}

.main-header {
   font-size: 58px;
   line-height: 80px;
   text-align: center;
   letter-spacing: 0.2px;
   color: #FFFFFF;
   margin-top: 40px;
   height: calc(160px + 58px);
}

.main-subline,
.main-column-subline,
.about-p,
.lessons-subtext {
   font-family: "Montserrat";
   margin-top: 40px;
   font-size: 20px;
   line-height: 30px;
   font-weight: 400;
   text-align: center;
   letter-spacing: 0.2px;
   color: #FFFFFF;
}

.main-buttons {
   margin-top: 40px;
   display: flex;
   justify-content: center;
   gap: 20px;
}

.main-button {
   display: block;
   width: auto;
}

.button-line {
   font-size: 14px;
   line-height: 22px;
   text-align: center;
   letter-spacing: 0.2px;
   color: #382b85;
   padding: 15px 25px;
   border: 1px solid #382b85;
   border-radius: 5px;
   text-decoration: none;
   transition: 0.3s;
   background: transparent;
}

.button-line:hover {
   background: #382b84;
   color: #fff;
}


.about {
   display: flex;
}

.about-img{
   width: 100%;
   max-width: 500px;
}

.about-item {
   flex: 2 1 200px;
   width: 100%;
}
.demonstration{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   flex: 1 1 300px;
}

.about-line {
   background: #68eaab;
   width: 94px;
   height: 7px;
   margin-bottom: 35px;
}

.about-title {
   font-size: 40px;
   line-height: 50px;
   letter-spacing: 0.2px;
   color: #FFFFFF;
   max-width: 394px;
   flex: 1;
   
}
.about-block{
   margin-top: 35px;
   display: flex;
   align-items: center;
   gap: 20px;
}

.about-icon{
   width: 80px;
   height: 80px;
}

.about-link{
   margin-top: 15px;
}

.about-p {
   margin-top: 20px;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.2px;
   color: #FFFFFF;
   max-width: 645px;
   text-align: left;
}

blockquote {
   font-size: 25px;
   color: #fff;
   font-family: "Montserrat";
   margin-top: 30px;
   padding-left: 20px;
   position: relative;
}

blockquote::before {
   content: "";
   position: absolute;
   width: 5px;
   height: 100%;
   background: #68eaab;
   left: 0;
   top: 0;
}

.about-children {
   float: right;
   width: 80%;
}

.lessons {
   margin-top: 320px;
}

.title {
   font-size: 14px;
   line-height: 24px;
   text-align: center;
   letter-spacing: 0.2px;
   color: #382b85;
}


.lessons-price,
.lessons-price_num {
   font-size: 20px;
   font-family: "Montserrat";
   color: #fff;
   margin-top: 40px;
}

.lessons-price_num {
   font-size: 60px;
   margin-top: 0;
}

.lessons-buttons{
   display: flex;
   justify-content: center;
   margin: 70px 0;
   gap: 20px;
}

.lessons-subtext {
   font-size: 14px;
   line-height: 20px;
   text-align: center;
   letter-spacing: 0.2px;
   color: #FFFFFF;
   max-width: 463px;
   margin: 0 auto;
   margin-top: 70px;
}

.allNothink {
   position: absolute;
   top: 0;
   left: 0;

}

.lessons-row {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   overflow-x: scroll;
   padding: 0px;
   gap: 15px;
   width: 100%;
   margin: 0 auto;
   min-height: 500px;
   position: relative;
}

.lessons-item {
   width: 100%;
   max-width: 330px;
   background: #e9e9e9;
   height: auto;
   position: relative;
   padding-bottom: 100px;
}

.lessons-img-container {
   position: relative;
   transition: 0.3s;
}

.lessons-img-container img {
   width: 330px;
   height: 300px;
}

.lessons-container {
   max-width: 280px;
   margin: 0 auto;
}

.lesson-header {
   display: flex;
   justify-content: space-between;
}


.lessons-categoryContainer {
   margin-top: 26px;
}

.lessons-category,
.lessons-price_economy {
   font-size: 14px;
   line-height: 24px;
   letter-spacing: 0.2px;
   color: #382b85;
}

.lessons-price_economy {
   font-family: "Montserrat";
}

.lessons-starItem {
   flex: 1;
   display: flex;
   justify-content: right;
}

.lessons-starContainer {
   padding: 5px;
   background: #252B42;
   border-radius: 20px;
   display: flex;
   align-items: center;
}

.lessons-star {
   width: 12px;
}

.lessons-ocinka {
   display: block;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
   letter-spacing: 0.2px;
   color: #FFFFFF;
}

.lessons-about {
   margin-top: 10px;
}

.lesson-name {
   font-size: 16px;
   line-height: 24px;
   letter-spacing: 0.1px;
   color: #252B42;
}

.lesson-text {
   font-family: 'Montserrat';
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.2px;
   color: #737373;
   margin-top: 10px;
}

.price-title{
   margin-top: 50px;
}

.price-flex {
   margin-top: 60px;
   position: relative;
   display: flex;
   gap: 40px;
   flex-wrap: wrap;
   justify-content: left;
}

.price-block {
   flex: 1 0 350px;
}

.toright {
   display: flex;
   justify-content: right;
   align-items: last baseline;
   width: 100%;
}

.logotoright {
   float: right;
   width: 100px;
}

.logogif {
   position: absolute;
   right: 0;
   bottom: 0;
   width: 300px;
}

.lessons-learnmore {
   display: inline-block;
   padding: 10px 20px;
   border: 1px solid #382b85;
   border-radius: 10px;
   margin-top: 20px;
   text-decoration: none;
   color: #382b85;
   font-family: 'Montserrat';
   font-weight: 700;
   font-size: 14px;
   line-height: 24px;
   letter-spacing: 0.2px;
   margin-bottom: 30px;
   position: absolute;
   bottom: 10px;
   transition: 0.3s;
}
.lessons-learnmore:hover{
   background: #382b85;
   color: #fff;
}


@media (max-width: 1046px) {
   .header {
      flex-direction: column;
   }

   .menu {
      margin-left: 0;
      margin-top: 20px;
   }

   .buttons {
      justify-content: center;
      margin-top: 25px;
   }
}

@media (max-width: 1046px) {
   .main-item:hover {
      transform: scale(1);
   }
}

@media (max-width: 900px) {
   .logogif {
      display: none;
   }

   .main-header {
      font-size: 40px;
   }

   .main-columns,
   .about {
      flex-direction: column;
   }

   .about-children {
      margin-top: 50px;
      width: 100%;
      margin-left: 0;
   }

   .main-header {
      line-height: 60px;
   }

   .main-buttons {
      flex-direction: column;
      margin-left: 0;
      gap: 10px
   }

   .main-button {
      margin-left: 0;
      width: 100%;
   }

   .button-mark {

      text-align: center;
   }
}

@media(max-width: 356px) {}