@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 {
   min-width: 0;
   width: 100%;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   font-family: 'El Messiri', sans-serif;
}

.styled__heading {
   max-width: 482px;
   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;
}

.main__ritmstyle-news {
   max-width: 1296px;
   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   padding: 0 20px;
   padding-bottom: 120px;
}

.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);
}

.ritmstyle-news__cards {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 24px;
}

.ritmstyle-cards__card {
   width: 416px;
   height: 258px;
   border-radius: 10px;
   background: url(img/session-card2.png);
   display: flex;
   flex-flow: column nowrap;
   align-items: start;
}

.ritmstyle-cards-card__text {
   height: 100%;
   margin: 30px 0 30px 35px;
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
}

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

.card-text__date > p {
   font-size: 0.813rem;
   font-family: 'Roboto', sans-serif;
   color: #FFFFFF;
   font-weight: 700;
}

.card-text__title > p {
   font-size: 1.313rem;
   color: white;
}

.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: 1296px) {
   .ritmstyle-news__cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
   }
}

@media (max-width: 860px) {
   .ritmstyle-news__cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
   }
}

@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: 425px) {
   .ritmstyle-cards__card {
      width: 320px;
   }
}