@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@700&family=Roboto:wght@300;400;500;700&display=swap');

html, body {
   height: 100%;
   min-width: 320px;
}

.main {
   flex: 1 1 auto;
   font-family: 'Roboto', sans-serif;
   min-width: 0;
}

.wrapper {
   overflow: hidden;
   min-height: 100%;
   display: flex;
   flex-direction: column;
}

body {
   font-family: 'Roboto', sans-serif;
   background: #162831;
}

.header {
   display: flex;
   justify-content: center;
   margin-top: 30px;
   margin-bottom: 50px;
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
}

.header__container {
   max-width: 1296px;
   height: 60px;
   flex: 1 1 100%;
   padding: 0 20px;
   padding-bottom: 30px;
   display: flex;
   border-bottom: 1px solid white;
}

.header__nav {
   width: 100%;
   display: flex;
   align-items: center;
   flex: 1 1 100%;
   justify-content: space-between;
}

.nav__logo {
   cursor: pointer;
}

.nav__buttons {
   display: flex;
   gap: 50px;
}

.nav__buttons > li > a, .nav__buttons > li {
   color: #FFFFFF;
   font-size: 0.875rem;
   letter-spacing: 0.8px;
   cursor: pointer;
   text-decoration: none;
}

.nav__buttons > li:hover {
   color: #018ABE;
}

.nav__buttons > li > a:hover {
   color: #018ABE;
}

.nav__buttons > .current > a {
   color: #018ABE;
}

.nav__button {
   border: none;
   border-radius: 3px;
   background: #018ABE;
   width: 159px;
   height: 40px;
   color: white;
   font-size: 0.813rem;
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
   letter-spacing: 0.5px;
}

.menu-hamburger {
   display: none;
}

.menu-mobile {
   display: none;
}

.main {
   width: 100%;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   font-family: 'El Messiri', sans-serif;
}

.styled__heading {
   height: 59px;
   gap: 45px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
   margin-top: 30px;
   margin-bottom: 100px;
   padding: 0 20px;
}

.styled__heading > p {
   font-size: 2.625rem;
   color: #FFFFFF;
   line-height: 140%;
   text-align: center;
}

.styled__left {
   width: 28px;
   height: 14px;
   background: #018ABE;
   border-radius: 0px 50px;
}

.styled__right {
   width: 28px;
   height: 14px;
   background: #018ABE;
   border-radius: 0px 50px;
   transform: matrix(-1, 0, 0, 1, 0, 0);
}

.main__new-sessions {
   max-width: 1296px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   padding: 0 20px;
   padding-bottom: 161px;
}

.new-sessions__sessions {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

.new-sessions__text-block {
   display: flex;
   flex-flow: column nowrap;
   align-items: start;
}

.sessions-text-block__date {
   width: 100%;
   max-width: 1296px;
   display: flex;
   justify-content: start;
   margin-bottom: 23px;
}

.sessions-text-block__date-block {
   width: 96px;
   height: 30px;
   background: #018ABE;
   border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.sessions-text-block__date-block > p {
   font-size: 0.813rem;
   font-family: 'Roboto', sans-serif;
   color: #FFFFFF;
   font-weight: 700;
}

.sessions-text-block__heading {
   margin-top: 25px;
   margin-bottom: 35px;
}

.sessions-text-block__heading > p {
   font-size: 1.5rem;
   color: #ffffff;
}

.sessions-text-block__text {
   width: 526px;
   font-family: 'Roboto', sans-serif;
   line-height: 140%;
   color: #ffffff;
   font-weight: 300;
}

.footer {
   width: 100%;
   height: 90px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
}

.footer__container {
   width: 100%;
   max-width: 1296px;
   padding: 0 20px;
   display: flex;
   justify-content: start;
   border-top: 1px solid white;
}

.footer__text {
   padding: 0 20px;
   font-family: 'Roboto', sans-serif;
   font-size: 0.875rem;
   color: #FFFFFF;
   margin-top: 40px;
}

@media (max-width: 1241px) {
   .sessions-text-block__date {
      justify-content: center;
   }

   .new-sessions__sessions {
      grid-template-columns: 1fr;
      gap: 60px;
   }

   .new-sessions__text-block {
      align-items: center;
   }
}

@media (max-width: 1024px) {
   .nav__buttons, .nav__button {
      display: none;
   }

   .menu-hamburger {
      display: block;
      cursor: pointer;
   }

   .menu-mobile {
      display: none;
   }

   .menu-mobile.active {
      display: flex;
      position: absolute;
      width: 100%;
      height: 300px;
      background: #162831;
      z-index: 99;
      left: 0;
      top: 138px;
      flex-flow: column nowrap;
      align-items: center;
   }
   
   .menu-mobile__container {
      width: 100%;
      max-width: 1024px;
      display: flex;
      flex-flow: column nowrap;
      align-items: start;
   }

   .nav__buttons-mobile {
      display: flex;
      flex-flow: column nowrap;
      gap: 20px;
      padding: 0 20px;
      margin-bottom: 20px;
   }

   .nav__buttons-mobile > li {
      font-size: 0.875rem;
      color: #ffffff;
   }

   .nav__buttons-mobile > li:hover {
      color: #018ABE;
   }
   
   .nav__buttons-mobile > .current {
      color: #018ABE;
   }

   .nav__button-mobile {
      border: none;
      border-radius: 3px;
      background: #018ABE;
      width: 159px;
      height: 40px;
      color: white;
      font-size: 0.813rem;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      letter-spacing: 0.5px;
      margin-left: 20px;
   }

   .nav__buttons-mobile > li > a, .nav__buttons-mobile > li {
      color: #FFFFFF;
      font-size: 0.875rem;
      letter-spacing: 0.8px;
      cursor: pointer;
      text-decoration: none;
   }
   
   .nav__buttons-mobile > li:hover {
      color: #018ABE;
   }
   
   .nav__buttons-mobile > li > a:hover {
      color: #018ABE;
   }
   
   .nav__buttons-mobile > .current {
      color: #018ABE;
   }
}

@media (max-width: 660px) {
   .new-sessions__photo {
      display: flex;
      justify-content: center;
   }
   
   .new-sessions__photo > img {
      width: 320px;
      height: 196px;
   }
}

@media (max-width: 615px) {
   .styled__heading {
      max-width: 320px;
   }

   .sessions-text-block__text {
      width: 320px;
   }
}