*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }
  
  
  

  

a, a:visited {
  color: black;
  font-style: none;
  text-decoration: none; }

html {
  font-size: 62.5%; }
  @media (min-width: 93.75em) {
    html {
      font-size: 75.5%; } }

body {
  box-sizing: border-box;
  overflow-x: hidden;
  font-family: Montserrat; }

body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: .6rem;
  line-height: 1.7;
  background: #ffffff; }

.heading-primary {
  font-weight: 500;
  font-size: 2.4rem;
  text-transform: capitalize;
  margin-bottom: 3rem; }
  @media (max-width: 51.68em) {
    .heading-primary {
      text-align: center; } }
  .heading-primary--centered {
    text-align: center; }

.section-paragraph {
  width: 23.7rem;
  margin-bottom: 3rem;
  color: #514854;
  font-weight: normal;
  font-size: 13.5px;
  line-height: 16px; }
  @media (max-width: 51.68em) {
    .section-paragraph {
      text-align: justify; } }

.blog-heading {
  font-style: normal;
  font-weight: 600;
  font-size: 6rem;
  line-height: 7.3rem;
  text-transform: capitalize; }
  @media (max-width: 51.68em) {
    .blog-heading {
      text-align: center; } }

@keyframes playbtn {
  0% {
    transform: scale(0);
    opacity: 1; }
  100% {
    transform: scale(2);
    opacity: 0; } }

.header {
  width: 100vw; }
  .header__navbar {
    position: relative;
    width: 100%;
    padding: 5px 20px; }
    .header__navbar__menu {
      list-style-type: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      height: 6rem;
      font-size: 12px; }
      .header__navbar__menu a:hover {
        text-decoration: underline; }
      .header__navbar__menu__actual {
        flex: 1;
        display: flex;
        justify-content: center; }
        @media (max-width: 51.68em) {
          .header__navbar__menu__actual {
            display: none;
            position: absolute;
            background-color: #dddddd;
            width: 100vw;
            top: 0rem;
            left: 0;
            padding-top:5rem;} }
        .header__navbar__menu__actual ul {
          display: flex;
          list-style: none;
          margin: 0 auto; }
          @media (max-width: 51.68em) {
            .header__navbar__menu__actual ul {
              flex-direction: column;
              justify-content: space-around;
              align-items: stretch;
              text-align: center;
              width: 100%; }
              .header__navbar__menu__actual ul li {
                width: 100%; }
                .header__navbar__menu__actual ul li a {
                  display: inline-block;
                  width: 100%;
                  padding: 2rem; } }
  .header .toggle {
    order: 1;
    display: none;
    margin-left: 2rem; }
    @media (max-width: 51.68em) {
      .header .toggle {
        display: inline-block; } }
  .header .item.button {
    order: 2; }
  .header .item {
    margin: 0 2rem;
    order: 1; }
    @media (max-width: 36em) {
      .header .item {
        margin: 0; } }
    .header .item:nth-child(4) {
      margin-right: auto; }
  .header .item.active {
    display: block; }
  .header .toggle {
    cursor: pointer; }
  .header .bars {
    background: #999;
    display: inline-block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px; }
    .header .bars:before, .header .bars:after {
      background: #999;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      transition: all .2s ease-out;
      width: 100%; }
    .header .bars:before {
      top: 5px; }
    .header .bars:after {
      top: -5px; }
  .header .logo {
    order: 0; }
    @media (max-width: 51.68em) {
      .header .logo {
        flex: 1; } }
    .header .logo img {
      width: 10rem; }
  .header .button {
    color: white; }
  .header .signins {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center; }
    .header .signins li {
      margin-left: 1rem; }
    @media (max-width: 36em) {
      .header .signins {
        display: none;
        position: absolute;
        top: 35rem;
        text-align: center;
        width: 100vw;
        background-color: #ddd;
        left: 0;
        height: 18rem;
        flex-direction: column; }
        .header .signins li {
          margin-top: 4rem; }
          .header .signins li a {
            padding: 2rem 3rem; } }

.navbar-active {
  display: flex !important; }

.header-section {
  width: 86.5rem;
  margin: 0 auto;
  height: 71rem;
  display: flex;
  align-items: center; }
  @media (max-width: 57.625em) {
    .header-section {
      width: 100%;
      padding: 0 3rem; } }
  @media (max-width: 51.68em) {
    .header-section {
      flex-direction: column;
      padding-top: 10rem;
      height: auto; } }
  .header-section::before {
    content: "";
    width: 60rem;
    height: 60rem;
    background-color: #F7F8FA;
    position: absolute;
    border-radius: 100vh;
    z-index: -5;
    right: -13rem;
    top: -40rem;
    
       animation: myfirst9 3s linear 0.2s infinite alternate;
  }
  
  @keyframes myfirst9 {

     
}



@media (max-width: 36em) {
    
     .header-section::before {
    content: "";
    width: 60rem;
    height: 60rem;
    background-color: #F7F8FA;
    position: absolute;
    border-radius: 100vh;
    z-index: -5;
    right: -13rem;
    top: -40rem;
    
   
  } 
}
    

  .header-section__left {
    margin-left:3rem; 
    margin-right:3rem;
    margin-bottom: 15rem; }

    @media (max-width: 51.68em) {
        
        
                   .header-section__left h1 {
      font-size: 2.2rem;
      text-transform: capitalize;
      font-weight: 600;
      line-height: 5.1rem; }
        
      .header-section__left {
              margin-left:3rem; 
    margin-right:3rem;
        margin-bottom: 10rem;
        text-align: center; }
        
             .header-section__left p {
      width: 80%;
      height: 7.2rem;
      font-weight: 300;
      font-size: 1.5rem;
      line-height: 136.4%;
      margin-left:3rem;
      margin-right:3rem;
      margin-top: 3rem;
      margin-bottom: 4.4rem;
      color: #000000;
      text-align: justify;
             }
        
        
    }
    .header-section__left h1 {
      font-size: 4.2rem;
      text-transform: capitalize;
      font-weight: 600;
      line-height: 5.1rem; }
    .header-section__left p {
      width: 37rem;
      height: 7.2rem;
      font-weight: 300;
      font-size: 1.5rem;
      line-height: 136.4%;
      margin-left:2rem;
      margin-right:2rem;
      margin-top: 3rem;
      margin-bottom: 4.4rem;
      color: #000000;
      text-align: justify;
        
    }
  .header-section__right {
    justify-self: end;
    width: 50%; }
    @media (max-width: 36em) {
      .header-section__right {
        margin-top: 7.4rem;  
        width: 90%;
        margin-bottom:20px;
        display: flex;
        justify-content: center; } 
        
        
            .header-section__right__hero {
      width: 24rem;
      height: 48rem;
      background-image: url(../assets/hero-x1.png);
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 100vh;
      float: right;
     
      position: relative; }
      .header-section__right__hero::before {
        content: "";
        width: 7rem;
        height: 3.6rem;
        background-color: #23B0B0;
        position: absolute;
        display: block;
        border-radius: 0 0 100vh 100vh;
        right: -4rem;
        top: 50%;
        z-index: -1;
        animation: myfirst7 3s linear 0.2s infinite alternate;
          
      }
      
          .header-section__right__hero .pattern {
        width: 7rem;
        height: 7rem;
        background: url("../assets/dots-pattern.png");
        background-size: 20%;
        bottom: 0;
        left: -4rem;
        position: absolute;
        z-index: -1;
        
           animation: myfirst8 3s linear 0.2s infinite alternate;
      }
      
      
           .header-section__right__hero__play-btn {
        width: 6.5rem;
        height: 6.5rem;
        background-color: #FFB31B;
        display: inline-block;
        border-radius: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 25%;
        cursor: pointer;
        left: -5rem; }
        .header-section__right__hero__play-btn::before {
             
          content: "";
          background-color: #FFB31B;
          position: absolute;
          width: 90%;
          height: 90%;
          z-index: -1;
          border-radius: 100vh;
          animation: playbtn 2s ease infinite;
          }
        .header-section__right__hero__play-btn svg {
          width: 3rem; }
        
    }
    
    
    
        @media (max-width: 51.68em) {
      .header-section__right {
        margin-top: 7.4rem;  
        width: 90%;
        margin-bottom:20px;
        display: flex;
        justify-content: center; } 
        
        
            .header-section__right__hero {
      width: 24rem;
      height: 48rem;
      background-image: url(../assets/hero-x1.png);
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 100vh;
      float: right;
     
      position: relative; }
      .header-section__right__hero::before {
        content: "";
        width: 7rem;
        height: 3.6rem;
        background-color: #23B0B0;
        position: absolute;
        display: block;
        border-radius: 0 0 100vh 100vh;
        right: -4rem;
        top: 50%;
        z-index: -1;
        animation: myfirst7 3s linear 0.2s infinite alternate;
          
      }
      
          .header-section__right__hero .pattern {
        width: 7rem;
        height: 7rem;
        background: url("../assets/dots-pattern.png");
        background-size: 20%;
        bottom: 0;
        left: -4rem;
        position: absolute;
        z-index: -1;
        
           animation: myfirst8 3s linear 0.2s infinite alternate;
      }
      
      
           .header-section__right__hero__play-btn {
        width: 6.5rem;
        height: 6.5rem;
        background-color: #FFB31B;
        display: inline-block;
        border-radius: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 25%;
        cursor: pointer;
        left: -5rem; }
        .header-section__right__hero__play-btn::before {
             
          content: "";
          background-color: #FFB31B;
          position: absolute;
          width: 90%;
          height: 90%;
          z-index: -1;
          border-radius: 100vh;
          animation: playbtn 2s ease infinite;
          }
        .header-section__right__hero__play-btn svg {
          width: 3rem; }
        
    }
    
    .header-section__right__hero {
      width: 26rem;
      height: 48rem;
      background-image: url(../assets/hero-x1.png);
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 100vh;
      float: right;
      position: relative; }
      .header-section__right__hero::before {
        content: "";
        width: 7.4rem;
        height: 3.6rem;
        background-color: #23B0B0;
        position: absolute;
        display: block;
        border-radius: 0 0 100vh 100vh;
        right: -4rem;
        top: 50%;
        z-index: -1;
        animation: myfirst7 3s linear 0.2s infinite alternate;
          
      }
      
      
      @keyframes myfirst7 {
 from { transform: rotate(0deg) translateX(15px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(5px) rotate(-360deg); }
}
      
      
      .header-section__right__hero::after {
        content: "";
        width: 9rem;
        height: 2.618rem;
        background: url("../assets/dots-pattern.png");
        background-size: 20%;
        right: -6rem;
        top: 5rem;
        position: absolute;
        animation: myfirst8 3s linear 0.2s infinite alternate;
          
      }
      
      
           @keyframes myfirst8 {
 from { transform: rotate(0deg) translateX(15px) rotate(0deg); }
    to   { transform: rotate(60deg) translateX(5px) rotate(-160deg); }
}
      
      
      .header-section__right__hero__play-btn {
        width: 7.5rem;
        height: 7.5rem;
        background-color: #FFB31B;
        display: inline-block;
        border-radius: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 25%;
        cursor: pointer;
        left: -5rem; }
        .header-section__right__hero__play-btn::before {
             
          content: "";
          background-color: #FFB31B;
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -1;
          border-radius: 100vh;
          animation: playbtn 2s ease infinite;
          }
        .header-section__right__hero__play-btn svg {
          width: 3rem; }
      .header-section__right__hero .pattern {
        width: 9rem;
        height: 9rem;
        background: url("../assets/dots-pattern.png");
        background-size: 20%;
        bottom: 0;
        left: -4rem;
        position: absolute;
        z-index: -1;
        
           animation: myfirst8 3s linear 0.2s infinite alternate;
      }

.secondary-text, .footer__caption, .footer__payment p, .footer__middle, .footer__bottom {
  font-style: normal;
  font-weight: 300;
  font-size: 1.2rem; }

.footer {

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 6.4rem !important;
  padding-bottom: 3rem !important;
  height: 44rem; }
  @media (max-width: 36em) {
    .footer > * {
      margin-bottom: 7rem;
      align-items: stretch; } }
  .footer__social-media {
    width: 10.8rem;
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between; }
  .footer__top {
    display: flex;
    justify-content: space-between; }
    @media (max-width: 36em) {
      .footer__top {
        flex-direction: column; } }
    .footer__top__left {
      width: 26.4rem; }
  .footer__caption {
    padding-top: 2rem; }
  .footer__payment {
    width: 28.8rem; }
    @media (max-width: 36em) {
      .footer__payment {
        margin-top: 2rem; } }
    .footer__payment__methods {
      padding-top: 2rem;
      display: flex;
      justify-content: space-between; }
    .footer__payment p {
      font-weight: 500; }
  .footer__middle {
    display: flex;
    justify-content: space-between; }
    @media (max-width: 36em) {
      .footer__middle {
        flex-direction: column; } }
    .footer__middle ul {
      list-style: none; }
      .footer__middle ul li:first-child {
        font-weight: 600;
        color: black;
        margin-bottom: 2rem; }
  .footer__get-in-touch {
    width: 28.4rem; }
    @media (max-width: 36em) {
      .footer__get-in-touch {
        margin-top: 3rem; } }
    .footer__get-in-touch h5 {
      font-weight: 600;
      font-size: 1.3rem;
      color: black;
      margin-bottom: 2rem; }
  .footer__bottom {
    color: #A5A5A5;
    font-size: 1.2rem;
    display: flex;
    justify-content: space-between; }

.btn {
  border: 0;
  padding: 1rem 2rem;
  background-color: #FF465F;
  color: white;
  border-radius: 100vh;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 1rem;
  line-height: 1.2rem;
  cursor: pointer;
  transition: all .4s ease;
  font-family: Montserrat; }
  .btn:hover {
    background-color: #ff1333; }
  .btn--outlined {
    width: 100%;
    padding: 1rem 0;
    font-weight: 500;
    font-size: 1rem;
    text-align: cente;
    color: #FF465F;
    background-color: white;
    font-weight: 500;
    border: solid 0.01rem #FF465F; }
    .btn--outlined:hover {
      color: white;
      background-color: #FF465F; }

@media (max-width: 36em) {
  .header__btn {
    font-size: 1.8rem;
    padding: 1.6rem 8rem;
    width: 36rem; } }

.header__btn::after {
  content: "\2192";
  font-size: 2rem;
  margin-left: 2rem;
  transform: translateX(20px); }

.category {
  font-size: .6rem;
  color: #415EB6;
  padding: .5rem 1rem .5rem 2rem;
  background-color: #ECF5FD;
  display: inline-block;
  border-radius: 100vh;
  position: relative; }
  .category::before {
    content: "";
    width: 1rem;
    height: 1rem;
    background-image: url("../assets/category-icon.svg");
    background-size: cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .5rem; }

.advantages-section__card {
  display: flex;
  align-items: center;
  margin-bottom: 5rem; }
  .advantages-section__card__icon {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: .75rem;
    display: flex;
    justify-content: center;
    align-items: center; }
    .advantages-section__card__icon img {
      max-width: 4.4rem;
      max-height: 4.1rem; }
  .advantages-section__card p {
    margin-top:20px;  
    width: 9.6rem;
    font-weight: normal;
    font-size:15px;font-weight:500;
    
    line-height: 1.2rem;
    margin-left:35px; }
  .advantages-section__card-1 .advantages-section__card__icon {
    background-color: #F0FFFF; }
  .advantages-section__card-2 .advantages-section__card__icon {
    background-color: #FEEEEE; }
  .advantages-section__card-3 .advantages-section__card__icon {
    background-color: #F7F3E7; }
  .advantages-section__card-4 .advantages-section__card__icon {
    background-color: #ECF5FD; }
    
    


.course-cards {
    transition: 0.5s all ease-in-out;
  display: flex;
  position: relative;
   
    border:0;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);  
     
    
}
  .onecard:hover { 
      
       box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
  }
  @media (max-width: 51.68em) {
    .course-cards {
      padding-left: 2rem; } }

.course-card {
  outline: none;
  cursor: pointer;
  width: 18.8rem;
  min-width: 17.8rem;
  overflow: hidden;
  border-radius: 1rem;
  background-color: white;
  flex-shrink: 0; }
  .course-card:not(:last-child) {
    margin-right: 1.5rem; }
    
    .course-card:last-child {
    margin-right: 2.5rem; }
  .course-card__image {
    height: 10rem;
 
    background-size: contain;
    background-repeat: no-repeat;}
  .course-card__details {
    padding: .75rem 1.5rem; }
    .course-card__details__title {
      font-weight: 500;
      font-size: .9rem;
      line-height: 1.3rem;
      margin: 1rem 0; }
    .course-card__details__creator {
      font-size: .7rem;
      display: flex;
      align-items: center;
      color: grey;
      align-items: center;
      margin-bottom: 1rem; }
      .course-card__details__creator__picture {
        width: 1.5rem;
        height: 1.5rem;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100vh;
        display: inline-block; }
        .course-card__details__creator__picture img {
          width: 1.8rem; }
      .course-card__details__creator__name {
        font-weight: 500;
        font-size: .9rem;
        display: inline-block;
        color: black; }
      .course-card__details__creator span {
        margin: 0 .5rem; }
    .course-card__details__footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      bottom: 0;
      font-size: .7rem;
      color: #514854; }
      .course-card__details__footer__duration {
        margin-left: 1.5rem;
        position: relative; }
        .course-card__details__footer__duration::before {
          content: "";
          width: 1rem;
          height: 1rem;
          background-image: url("../assets/clock.svg");
          background-size: contain;
          background-repeat: no-repeat;
          position: absolute;
          left: -1.5rem;
          top: 50%;
          transform: translateY(-50%); }
      .course-card__details__footer__lectures {
        margin-left: 1.5rem;
        position: relative; }
        .course-card__details__footer__lectures::before {
          content: "";
          width: 1rem;
          height: 1rem;
          background-image: url("../assets/folder.svg");
          background-size: contain;
          background-repeat: no-repeat;
          position: absolute;
          left: -1.5rem;
          top: 50%;
          transform: translateY(-50%); }
      .course-card__details__footer__price {
        color: #415EB6;
        font-weight: 700;
        font-size: .95rem; }

.testimony {
  width: 23.6rem;
  background-color: #F0FFFF;
  border-radius: 1.3rem;
  font-size: 1.05rem;
  padding: 2.4rem 2.2rem; }
  .testimony__author {
    display: flex;
    margin-bottom: 2rem;
    align-items: center; }
    .testimony__author__avatar {
      width: 4rem;
      height: 4rem;
      border-radius: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin-right: 1.5rem; }
      .testimony__author__avatar img {
        width: 100%; }
    .testimony__author__naming {
      display: flex;
      flex-direction: column; }
      .testimony__author__naming__name {
        font-style: normal;
        font-weight: 500;
        font-size: 1.2rem;
        text-transform: capitalize;
        display: inline-block;
        line-height: 2rem; }
      .testimony__author__naming__city {
        font-weight: normal;
        display: inline-block;
        font-size: .9rem;
        text-transform: capitalize;
        color: #514854; }
  .testimony__body {
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 16.91px; }

.team-section__team-cards__card {
  min-width: 15.7rem;
  margin-right: 1rem;}
  .team-section__team-cards__card__avatar {
    overflow: hidden;
    border-radius: .75rem;
    background-color: #F7F3E7;
    position: relative;
    height: 22rem;
    width: 15rem;}
    .team-section__team-cards__card__avatar img {
      position: absolute;
      width: 100%;
      bottom: 0; }
  .team-section__team-cards__card__naming {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    height: 5.5rem; }
    .team-section__team-cards__card__naming__name {
      font-weight: 500;
      font-size: 1.3rem;
      line-height: 2.4rem; }
    .team-section__team-cards__card__naming__position {
      font-weight: normal;
      font-size: 1.15rem;
      color: #A5A5A5; }

.pricing-section__plans__plan {
  border-radius: .75rem;
  border: 0.5px solid #FFB31B;
  width: 18.7rem;
  height: 45.7rem;
  padding: 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center; }
  .pricing-section__plans__plan--primary {
    width: 20.3rem;
    height: 50.2rem;
    background-color: #FEEEEE;
    border: solid 0.5px #FF465F; }
    .pricing-section__plans__plan--primary .btn {
      background-color: #FF465F; }
      .pricing-section__plans__plan--primary .btn:hover {
        background-color: #ff1333; }
    .pricing-section__plans__plan--primary .pricing-section__plans__plan__price {
      color: #FF465F; }
  .pricing-section__plans__plan--secondary {
    border: solid 0.1rem #23B0B0; }
    .pricing-section__plans__plan--secondary .btn {
      background-color: #23B0B0; }
      .pricing-section__plans__plan--secondary .btn:hover {
        background-color: #1b8585; }
    .pricing-section__plans__plan--secondary .pricing-section__plans__plan__price {
      color: #23B0B0; }
  .pricing-section__plans__plan__title {
    font-weight: 500;
    font-size: 1.25rem;
    text-align: center;
    text-transform: uppercase; }
  .pricing-section__plans__plan__price {
    font-weight: 600;
    font-size: 3.65rem;
    color: #FFB31B;
    position: relative; }
    .pricing-section__plans__plan__price::after {
      content: "DH";
      position: absolute;
      top: 0;
      right: 0;
      transform: translateX(100%);
      font-weight: 500;
      font-size: 1.14rem; }
  .pricing-section__plans__plan__duration {
    font-weight: normal;
    font-size: 1.07rem;
    color: #A5A5A5;
    text-transform: capitalize;
    transform: translateY(-3rem); }
  .pricing-section__plans__plan__advantages {
    text-align: start; }
    .pricing-section__plans__plan__advantages__title {
      font-weight: 600;
      font-size: .95rem;
      margin-bottom: 1.8rem; }
    .pricing-section__plans__plan__advantages ul li {
      margin-bottom: .8rem;
      list-style: none;
      font-size: .95rem;
      color: #514854; }
      .pricing-section__plans__plan__advantages ul li::before {
        content: "\2713";
        color: #FF465F;
        font-weight: bold;
        display: inline-block;
        width: .95rem;
        margin-right: .5rem; }
  .pricing-section__plans__plan__btn {
    background-color: #FFB31B; }
    .pricing-section__plans__plan__btn:hover {
      background-color: #e79a00; }

.glider-prev,
.glider-next {
  top: 50%;
  transform: translateY(-20%); }

.section {
  width: 87.75rem;
  margin: 0 auto;
  padding: 0 5rem;
  font-size: 1.2rem; }
  @media (max-width: 57.625em) {
    .section {
      width: 100%;
      padding: 0 3rem; } }
  @media (max-width: 51.68em) {
    .section {
      padding: 0 2rem; } }

.advantages-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12rem auto;
  flex-wrap: wrap; }
  @media (max-width: 25em) {
    .advantages-section {
      justify-content: center; } }

.courses-section {
  height: 43rem;
  width:70%;
  background-color: #F7F8FA;
  border-radius: 1.8rem;
  padding-top: 2rem;

  padding-bottom: 4rem; }
  @media (max-width: 51.68em) {
    .courses-section {
      padding-left: 0;
      padding-right: 0; } }

.payment-section {
  height: 60rem;
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media (max-width: 51.68em) {
    .payment-section {
      flex-direction: column-reverse;
      height: auto;
      padding-top: 10rem;
      padding-bottom: 10rem; } }
  .payment-section__left {
    width: 50%;
    position: relative; }
    @media (max-width: 51.68em) {
      .payment-section__left {
        width: 80%; } }
    @media (max-width: 36em) {
      .payment-section__left {
        width: 100%; } }
    .payment-section__left__image {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      overflow: hidden;
      border-radius: 100vh;
      height: auto;
      position: relative; }
      .payment-section__left__image img {
        width: 100%;
        position: relative; }
    .payment-section__left span {
      display: inline-block;
      width: 3.6rem;
      height: 7.4rem;
      border-radius: 100vh 0 0 100vh;
      background-color: #FFB31B;
      position: absolute;
      left: 11.5rem;
      bottom: -7rem; }
      .payment-section__left span::after {
        content: "";
        width: 22.8rem;
        height: 22.8rem;
        border-radius: 100vh;
        background-color: #F7F8FA;
        position: absolute;
        z-index: -1;
        right: -30rem;
        top: -35rem; }
      .payment-section__left span::before {
        content: "";
        width: 7rem;
        height: 7rem;
        background-color: #23B0B0;
        position: absolute;
        border-radius: 100vh;
        z-index: -1;
        right: -30rem; }
  .payment-section__right {
    padding-left: 15rem;
    width: 50%;
    display: flex;
    flex-direction: column; }
    .payment-section__right h1 {
      width: 30rem; }
    @media (max-width: 57.625em) {
      .payment-section__right {
        padding-left: 7rem; } }
    @media (max-width: 51.68em) {
      .payment-section__right {
        padding-left: 0;
        text-align: center;
        align-items: center;
        margin-bottom: 6rem; } }

.testimonials-section {
  padding-top: 9rem;
  background-color: #F7F8FA;
  height: 45rem;
  display: flex;
  justify-content: space-between;
  position: relative; }
  @media (max-width: 51.68em) {
    .testimonials-section {
      flex-direction: column;
      align-items: center;
      height: 60rem; } }
  @media (max-width: 36em) {
    .testimonials-section {
        flex-direction: column;
      height: auto;
      padding-bottom: 2rem; } }
  .testimonials-section:before {
    content: "";
    background-color: #F7F8FA;
    position: absolute;
    height: 100%;
    width: 100vw;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: -2; }
  @media (max-width: 51.68em) {
    .testimonials-section__left {
      margin-bottom: 2rem; } }
  .testimonials-section__right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2rem; }
    @media (max-width: 36em) {
      .testimonials-section__right {
        display: flex;
        flex-direction: column; } }

.testimony-2 {
  background-color: #F7F3E7; }
  .testimony-2::before {
    content: "";
    position: absolute;
    background: url("https://www.universitech.ma/storage/images/ts2.png") no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100vh;
    width: 4.6rem;
    height: 4.6rem;
    top: -3.1rem;
    left: 70rem;
    z-index: 10;
    animation: myfirst2 5s linear 0.2s infinite alternate;
      
  }
  .testimony-2::after {
    content: "";
    position: absolute;
    background: url("https://www.universitech.ma/storage/images/ts4.png") no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100vh;
    right: -8em;
    width: 4rem;
    height: 4rem;
      animation: myfirst1 5s linear 0.2s infinite alternate;}


@media (max-width: 51.68em) {
    .testimony-2 {
  background-color: #F7F3E7; }
  .testimony-2::before {
    content: "";
    position: absolute;
    background: url("https://www.universitech.ma/storage/images/ts3.png") no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100vh;
    width: 4.6rem;
    height: 4.6rem;
    top: -3.1rem;
    left: 10rem;
    z-index: 10; }
  .testimony-2::after {
    content: "";
    position: absolute;
    background: url("https://www.universitech.ma/storage/images/ts2.png") no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100vh;
    left: 30rem;
    width: 4rem;
    height: 4rem; }
    
}

@media (max-width: 36em) {
    .testimony-2 {
  background-color: #F7F3E7; }
  .testimony-2::before {
    content: "";
    position: absolute;
    background: url("https://www.universitech.ma/storage/images/ts2.png") no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100vh;
    width: 4.6rem;
    height: 4.6rem;
    top: -3.1rem;
    left: 10rem;
    z-index: 10; }
  .testimony-2::after {
    content: "";
    position: absolute;
    background: url("https://www.universitech.ma/storage/images/ts4.png") no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100vh;
    left: 30rem;
    width: 4rem;
    height: 4rem; 
      
  }
    
}

.testimony-3 {
  background-color: #FEEEEE; }
  .testimony-3::before {
    content: "";
    position: absolute;
    background: url("https://www.universitech.ma/storage/images/ts3.png") no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 100vh;
    width: 3.7rem;
    height: 3.7rem;
    bottom: -3.5rem;
    left: 2rem;
    z-index: 10;
    
  animation: myfirst 5s linear 0.2s infinite alternate;
  }
    

@keyframes myfirst {
 from { transform: rotate(0deg) translateX(25px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}
 
@keyframes myfirst1 { 
  from { transform: rotate(360deg) translateX(25px) rotate(-360deg); }
    to   { transform: rotate(0deg) translateX(25px) rotate(0deg); }
}   


@keyframes myfirst2 {
 from { transform: rotate(0deg) translateX(15px) rotate(-80deg); }
    to   { transform: rotate(80deg) translateX(15px) rotate(0deg); }
}

.testimony-4 {
  background-color: #ECF5FD; }

.team-section {
  margin-top: 15rem;
  margin-bottom: 5rem;
  height: 60rem;
  padding-top: 9rem;
  padding-bottom: 9rem; }
  .team-section__top {
    width: 100%;
    display: flex;
    justify-content: space-between; }
    .team-section__top__meet-more {
      font-weight: normal;
      font-size: 1.35rem;
      text-align: right;
      text-decoration-line: underline; }
      .team-section__top__meet-more::after {
        content: "\2192";
        font-size: 2rem;
        margin-left: 2rem;
        text-decoration: none; }
  .team-section__team-cards {
    display: flex;
    justify-content: space-between; }
    .team-section__team-cards__card-2 .team-section__team-cards__card__avatar {
      background-color: #FEEEEE; }
    .team-section__team-cards__card-3 .team-section__team-cards__card__avatar {
      background-color: #ECF5FD; }
    .team-section__team-cards__card-4 .team-section__team-cards__card__avatar {
      background-color: #F0FFFF; }

.video-section {
  display: flex;
  justify-content: space-between;
  align-items: cente;
  padding-top: 9rem;
  padding-bottom: 9rem;
  background-color: #F7F8FA;
  position: relative; }
  @media (max-width: 51.68em) {
    .video-section {
      flex-direction: column-reverse;
      align-items: center;
      text-align: center; } }
  .video-section::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100%;
    background-color: #F7F8FA;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -2; }
  .video-section__left {
    margin-right: 6rem; }
    @media (max-width: 51.68em) {
      .video-section__left {
        margin: 0; } }
    @media (max-width: 36em) {
      .video-section__left {
        width: 100%; } }
        .video-section__left__video {
      width: 44.7rem;
      height: 27.6rem;
      border-radius: 100vh;
      background: url("../assets/video-bg.png");
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center; }
      @media (max-width: 57.625em) {
        .video-section__left__video {
          width: 39.7rem; } }
      @media (max-width: 36em) {
        .video-section__left__video {
          width: 100%;
          height: 18.6rem; } }
      .video-section__left__video__play-btn {
        width: 7.65rem;
        height: 7.65rem;
        background-color: #FF465F;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border-radius: 100vh; }
        .video-section__left__video__play-btn svg {
          width: 3rem; }
  .video-section__right {
    height: 100%;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between; }
    @media (max-width: 51.68em) {
      .video-section__right {
        align-items: center;
        margin-bottom: 6rem; } }
    .video-section__right__heading {
      margin-bottom: .9rem; }
    .video-section__right__time {
      margin-bottom: 4rem;
      color: #FF465F; }
    .video-section__right__title {
      font-weight: 500;
      width: 28.2rem;
      font-size: 1.95rem;
      line-height: 2.4rem;
      margin-bottom: 1.5rem; }
    .video-section__right__description {
      font-size: 1rem;
      line-height: 1.8rem;
      color: #A5A5A5; }
      @media (max-width: 51.68em) {
        .video-section__right__description {
          width: 46rem; } }
      @media (max-width: 36em) {
        .video-section__right__description {
          width: 80%; } }

.blog-section {
  padding-top: 9rem;
  padding-bottom: 9rem;
  position: relative; }
  .blog-section + button {
    position: absolute; }
  .blog-section__articles {
    display: flex;
    justify-content: space-between; }
    .blog-section__articles__article {
      min-width: 17.3rem;
      margin-right: 2rem; }
      .blog-section__articles__article__img {
        width: 100%;
        height: 14.6rem;
        overflow: hidden;
        border-radius: .75rem;
        display: flex;
        justify-content: center;
        align-items: center; }
        .blog-section__articles__article__img img {
          height: 100%; }
      .blog-section__articles__article__details__category {
        margin: .9rem 0; }
      .blog-section__articles__article__details__title {
        font-weight: 500;
        font-size: 1.05rem;
        line-height: 1.3rem;
        margin-bottom: 1rem;
        font-family: Montserrat;
        width: 100%; }
        
      .blog-section__articles__article__details__caption {
        font-weight: 300;
        font-size: .75rem;
        font-family: Montserrat;
        line-height: 148.4%;
        margin-bottom: 1rem; }


        .blog-section__articles__article__details__caption {
          font-weight: 300;
          font-size: .75rem;
          font-family: Montserrat;
          line-height: 148.4%;
          margin-bottom: 1rem; }

.pricing-section {
  padding: 3rem 12rem 9rem; }
  @media (max-width: 57.625em) {
    .pricing-section {
      padding: 3rem 9rem 9rem; } }
  @media (max-width: 51.68em) {
    .pricing-section {
      padding: 3rem 5rem 9rem; } }
  .pricing-section__plans {
    display: flex;
    justify-content: space-between; }
    @media (max-width: 36em) {
      .pricing-section__plans {
        flex-direction: column;
        align-items: center; }
        .pricing-section__plans > *:not(:last-child) {
          margin-bottom: 2rem; } }

.cta-banner {
  height: 19.2rem;
  background-color: #514854;
  border-radius: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 2rem; }
  @media (max-width: 57.625em) {
    .cta-banner {
      border-radius: 0; } }
  .cta-banner::before {
    content: "";
    width: 2.9rem;
    height: 5.8rem;
    background-color: #FF465F;
    border-radius: 100vh 0 0 100vh;
    position: absolute;
    top: -1.5rem;
    left: 7rem; }
    @media (max-width: 36em) {
      .cta-banner::before {
        left: 2rem; } }
  .cta-banner__heading {
    width: 56rem;
    font-weight: 500;
    font-size: 2rem;
    line-height: 2.5rem;
    text-align: center;
    color: white;
    margin-bottom: 2.5rem; }
    @media (max-width: 36em) {
      .cta-banner__heading {
        width: 100%; } }
  .cta-banner__btn {
    color: #514854;
    background-color: #FFB31B;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2rem; }

.contact-us {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: -4rem;
  z-index: -2;
  background-color: #F7F8FA;
  height: 40.8rem;
  border-radius: 1.35rem; }
  @media (max-width: 36em) {
    .contact-us {
      flex-direction: column;
      height: auto;
      padding: 5rem 0; } }
  .contact-us__right form {
    display: flex;
    flex-direction: column; }
    .contact-us__right form input, .contact-us__right form textarea {
      border-radius: 1.7rem;
      border: none;
      width: 22.5rem;
      padding: 1rem 1.4rem;
      font-family: inherit;
      font-size: 1.2rem;
      margin-bottom: 1rem; }
      @media (max-width: 36em) {
        .contact-us__right form input, .contact-us__right form textarea {
          width: 35rem; } }
    .contact-us__right form input {
      height: 3.6rem; }
    .contact-us__right form textarea {
      height: 8.2rem; }

.abt-us-header {
  margin-top: 13rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0; }
  .abt-us-header__left h1 {
    font-weight: 600;
    font-size: 4.5rem;
    width: 30.2rem;
    line-height: 5.5rem; }
  .abt-us-header__right {
    position: relative; }
  .abt-us-header__img {
    width: 47.1rem;
    height: 27.6rem;
    border-radius: 100vh;
    overflow: hidden; }
    .abt-us-header__img img {
      width: 100%; }

.abt-us-details {
  margin-top: 9.6rem; }
  .abt-us-details p {
    font-style: normal;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 2.2rem;
    column-count: 2; }

.faq-section {
  margin-top: 15rem;
  margin-bottom: 9rem;
  padding: 0; }
  .faq-section .page-title {
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 4.4rem;
    width: 64rem;
    margin-bottom: 8rem; }

.faqs {
  width: 58.2rem;
  margin: 0 auto; }

.questions {
  border-radius: .8rem;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
  padding: 0 5.2rem; }
  .questions .faq:not(:last-child) {
    border-bottom: 1.5px solid #eee; }
  .questions .faq .question {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 3rem 0;
    transition: all ease .3s;
    height: auto; }
    .questions .faq .question h5 {
      font-weight: 500;
      font-size: 1.5rem;
      position: relative;
      color: #FF465F; }
    .questions .faq .question svg {
      transition: all ease .3s;
      width: 1.5rem;
      transform: rotate(180deg); }
      .questions .faq .question svg path {
        stroke: #FF465F; }
  .questions .faq .answer {
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 2.11rem;
    overflow: hidden;
    padding-bottom: 3rem;
    align-items: center; }
  .questions input {
    display: none; }
    .questions input:not(:checked) + label h5 {
      color: black !important; }
    .questions input:not(:checked) + label svg {
      transform: rotate(0) !important; }
      .questions input:not(:checked) + label svg path {
        stroke: black !important; }
    .questions input:not(:checked) + label p {
      height: 0;
      padding-bottom: 0 !important; }

.article-section {
  margin-top: 9rem;
  padding: 0; }
  .article-section .back-link {
    margin-bottom: 5rem;
    display: block;
    text-transform: capitalize;
    font-size: 1.35rem;
    position: relative;
    padding-left: 2rem;
    color: #6C6C6C;
    width: 10rem; }
    .article-section .back-link:hover {
      text-decoration: underline; }
    .article-section .back-link::before {
      content: "";
      width: 1.5rem;
      height: 1.5rem;
      background-image: url(../assets/left-arrow.svg);
      background-size: cover;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      position: absolute; }
  .article-section .category {
    transform: scale(1.3);
    transform-origin: bottom left;
    margin-bottom: 3rem; }
  .article-section .article__writer {
    display: flex;
    align-items: center;
    margin-bottom: 3rem; }
    .article-section .article__writer .article__avatar {
      width: 3.3rem;
      height: 3.3rem;
      border-radius: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      margin-right: 2rem; }
      .article-section .article__writer .article__avatar img {
        width: 100%; }
    .article-section .article__writer span {
      margin-right: 1rem;
      color: grey; }
    .article-section .article__writer p:not(:first-child) {
      margin-right: 1rem; }
  .article-section h1 {
    font-weight: 500;
    font-size: 3.5rem;
    width: 66rem;
    line-height: 4.2rem;
    margin-bottom: 3rem; }
  .article-section .share {
    width: 14.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .article-section .share a {
      padding: 1rem;
      background-color: #eee;
      border-radius: 100vh;
      line-height: 0;
      font-size: 0; }

.article__img {
  width: 100%;
  height: 30.8rem;
  border-radius: 1.3rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  margin-bottom: 8rem; }
  .article__img img {
    width: 100%; }

.article__body {
  width: 62.1rem;
  margin: 0 auto;
  margin-bottom: 20rem; }

.article__heading {
  font-weight: 500;
  font-size: 2.4rem;
  margin-bottom: 3rem; }

.article__paragraph {
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 208%;
  margin-bottom: 4rem; }

.blog-header {
  padding: 0;
  margin-top: 10rem; }
  .blog-header__menu {
    margin: 4rem 0 6rem 0; }
    .blog-header__menu ul {
      list-style: none;
      display: flex;
      text-transform: uppercase;
      font-size: 1rem; }
      .blog-header__menu ul li a {
        color: #A5A5A5; }
      .blog-header__menu ul li:not(:last-child) {
        margin-right: 4rem; }

.top-article {
  display: flex;
  margin-bottom: 12rem; }
  .top-article__img {
    width: 74%;
    height: 26.3rem;
    border-radius: 1.3rem;
    margin-right: 5rem; }
  .top-article__details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between; }
  .top-article__title {
    font-weight: 500;
    font-size: 3.4rem;
    line-height: 4.2rem; }
  .top-article__description {
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 148.4%;
    color: #514854; }
  .top-article__writer {
    display: flex;
    align-items: center; }
    .top-article__writer span {
      margin-right: 1rem;
      color: #514854; }
    .top-article__writer p {
      font-size: 1rem;
      text-transform: capitalize;
      color: #000000;
      font-weight: 400; }
  .top-article__avatar {
    width: 3.3rem;
    height: 3.3rem;
    border-radius: 100vh;
    overflow: hidden;
    position: relative;
    margin-right: 1rem; }
    .top-article__avatar img {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }

.recent-articles {
  margin-bottom: 15rem; }
  .recent-articles .articles {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 3.5rem; }
    .recent-articles .articles__pagination {
      margin: 5rem auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-transform: uppercase;
      font-size: 1rem;
      width: 51.3rem; }
      .recent-articles .articles__pagination .pagination-pages {
        display: flex;
        justify-content: space-between; }
        .recent-articles .articles__pagination .pagination-pages a {
          width: 3.5rem;
          height: 3.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #A5A5A5;
          border-radius: 100vh; }
      .recent-articles .articles__pagination .pagination-active {
        background-color: #F7F8FA;
        color: black !important; }

.sign-in-container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center; }
  .sign-in-container__logo {
    margin-bottom: 3rem; }
  .sign-in-container__right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 41.5rem;
    width: 31.6rem;
    font-size: 1.2rem; }
    .sign-in-container__right .signin-form {
      display: flex;
      flex-direction: column;
      border: solid 0.2px #A5A5A5;
      border-radius: 1rem;
      padding: 2.2rem;
      width: 100%; }
      .sign-in-container__right .signin-form input {
        background-color: #F7F8FA;
        border: none;
        border-radius: 100vh;
        height: 3.5rem;
        font-weight: 300;
        font-size: 1.2rem;
        padding: 1rem 1.5rem;
        margin-bottom: 1rem;
        font: inherit; }
        .sign-in-container__right .signin-form input:focus {
          border: none;
          outline: none; }
      .sign-in-container__right .signin-form button {
        height: 3.5rem;
        font-size: 1.2rem !important;
        padding: 0 !important;
        margin-top: 2.2rem; }
    .sign-in-container__right span {
      color: #A5A5A5;
      position: relative; }
      .sign-in-container__right span::before, .sign-in-container__right span::after {
        content: "";
        position: absolute;
        width: 8rem;
        height: .2px;
        background-color: #A5A5A5;
        top: 50%; }
      .sign-in-container__right span::before {
        left: -600%; }
      .sign-in-container__right span::after {
        right: -600%; }
    .sign-in-container__right .signin-with {
      border: solid 0.2px #A5A5A5;
      border-radius: 1rem;
      padding: 2.2rem;
      width: 100%; }
      .sign-in-container__right .signin-with .signin-item {
        cursor: pointer;
        width: 27.1rem;
        height: 3.5rem;
        border-radius: 100vh;
        display: flex;
        justify-content: center;
        background-color: #F7F8FA;
        display: flex;
        align-items: center; }
        .sign-in-container__right .signin-with .signin-item img {
          margin-right: 2rem; }
      .sign-in-container__right .signin-with .facebook {
        margin-bottom: 1rem; }
  .sign-in-container__left {
    width: 50vw; }
    .sign-in-container__left h1 {
      font-weight: 500;
      font-size: 3.3rem;
      line-height: 4.1rem;
      text-transform: capitalize;
      width: 22rem;
      margin-bottom: 1.5rem; }
    .sign-in-container__left > p {
      width: 37rem;
      font-weight: 400;
      font-size: 1.6rem;
      line-height: 1.9rem;
      color: #514854;
      margin-bottom: 4.8rem; }
  .sign-in-container__advantages {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 26.3rem; }
    .sign-in-container__advantages .advantage {
      display: flex;
      align-items: center; }
      .sign-in-container__advantages .advantage__img {
        height: 5.5rem;
        width: 5.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: .8rem;
        margin-right: .7rem; }
        .sign-in-container__advantages .advantage__img img {
          width: 4.3rem; }
      .sign-in-container__advantages .advantage p {
        font-weight: normal;
        font-size: 1.2rem;
        width: 18.8rem;
        line-height: 1.2rem; }

.advantage:nth-child(1) > .advantage__img {
  background-color: #F0FFFF; }

.advantage:nth-child(2) > .advantage__img {
  background-color: #FEEEEE; }

.advantage:nth-child(3) > .advantage__img {
  background-color: #F7F3E7; }

.advantage:nth-child(4) > .advantage__img {
  background-color: #ECF5FD; }

.signin-form__name {
  height:50px;
  display: flex;
  justify-content: space-between; }
  .signin-form__name input {
    width: 45%; }

.app-container {
  display: flex;
  font-size: .9rem;
  height: 100vh;
  width: 100vw; }
  .app-container__side-bar {
    flex: 0 0 18.7rem;
    padding: 2.4rem 1.5rem;
    box-shadow: 1px 0 0.7px rgba(0, 0, 0, 0.75); }
    .app-container__side-bar__top {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6rem; }
      .app-container__side-bar__top__logo {
        width: 9rem; }
    .app-container__side-bar__menu {
      list-style: none; }
      .app-container__side-bar__menu li {
        font-size: .9rem;
        display: flex;
        align-items: center;
        margin-bottom: 3rem;
        text-transform: capitalize; }
        .app-container__side-bar__menu li img {
          width: 1.5rem;
          margin-right: 1.1rem; }
  .app-container__body {
    flex: 1;
    background-color: #F7F8FA;
    overflow-y: scroll; }
    .app-container__body__top {
      height: 6rem;
      background-color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 3.8rem; }
      .app-container__body__top .bread-crumb {
        flex: 1; }
        .app-container__body__top .bread-crumb > * {
          margin: 0 1rem; }
      .app-container__body__top__profile {
        display: flex;
        justify-content: space-between;
        margin-left: 6rem;
        width: 6.5rem; }
        .app-container__body__top__profile__avatar {
          width: 2.2rem;
          height: 2.2rem;
          border-radius: 100vh;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center; }
          .app-container__body__top__profile__avatar img {
            width: 100%; }
        .app-container__body__top__profile .notification {
          position: relative; }
          .app-container__body__top__profile .notification span {
            position: absolute;
            top: -50%;
            right: -50%;
            background-color: #FF465F;
            padding: .1rem;
            color: #ffffff;
            border-radius: 100vh;
            font-size: .6rem; }
      .app-container__body__top form {
        display: flex;
        align-items: center; }
        .app-container__body__top form input {
          background-color: #F7F8FA;
          height: 3rem;
          width: 22.1rem;
          border: none;
          border-radius: 100vh;
          padding-left: 4rem;
          position: relative; }
        .app-container__body__top form img {
          margin-right: -3rem;
          z-index: 2; }
    .app-container__body__bottom {
      padding: 3rem 4rem;
      height: calc(100vh - .6rem);
      position: relative; }
      .app-container__body__bottom .announcement {
        background-color: #c0e8de;
        color: white;
        border-radius: .8rem;
        width: 100%;
        padding: 2.5rem 3rem; }
        .app-container__body__bottom .announcement h3 {
          font-weight: 500;
          font-size: 1.35rem;
          line-height: 1.6rem;
          margin-bottom: 1.5rem; }
        .app-container__body__bottom .announcement p {
          width: 27.8rem; }

.app-heading-primary {
  margin-top: 3rem;
  text-transform: capitalize;
  margin-bottom: 3rem; }
  .app-heading-primary--2 {
    font-weight: 500;
    font-size: 1.35rem;
    text-transform: capitalize;
    margin-bottom: 1.5rem; }

.app-categories {
  display: flex;
  align-items: center;
  margin-bottom: 4rem; }
  .app-categories .app-category {
    background-color: #ffffff;
    border-radius: .8rem;
    color: #FF465F;
    padding: .75rem;
    display: flex; }
    .app-categories .app-category:not(:last-child) {
      margin-right: .75rem; }
    .app-categories .app-category svg {
      background-color: #FEEEEE;
      width: 1.8rem;
      height: 1.8rem;
      border-radius: .5rem;
      margin-right: .75rem; }
    .app-categories .app-category p {
      font-size: 1rem; }

.app-courses-section {
  width: 100%; }
  .app-courses-section:not(:last-child) {
    margin-bottom: 3rem; }
  .app-courses-section__cards {
    display: flex;
    overflow: hidden;
    width: 100%; }

.app-heading {
  margin-bottom: 1.5rem;
  text-transform: capitalize;
  font-weight: 500; }

.carousel > button {
  top: 0;
  border: none;
  color: grey;
  position: absolute;
  top: 50%;
  transform: ranslateY(-50%); }
  .carousel > button::before {
    content: ">>";
    color: #FF465F;
    width: 5rem;
    height: 5rem; }
  .carousel > button::first-child::before {
    content: "<<"; }

.app-container__body__bottom__course {
  background-color: red; }
  .app-container__body__bottom__course__title {
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 2.3rem;
    margin-bottom: 1.5rem; }
  .app-container__body__bottom__course__creator {
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    margin-bottom: 3.3rem; }
    .app-container__body__bottom__course__creator__picture {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 100vh;
      display: flex;
      overflow: hidden;
      margin-right: .75rem; }
    .app-container__body__bottom__course__creator span {
      color: #A5A5A5;
      font-size: 1.2rem;
      margin-right: .75rem; }
    .app-container__body__bottom__course__creator h6 {
      font-weight: 500;
      font-size: 1.2rem; }
  .app-container__body__bottom__course__body {
    display: flex;
    flex-direction: column; }
  .app-container__body__bottom__course__details {
    background-color: #fff;
    border-radius: .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3.1rem;
    height: 5.3rem;
    margin-bottom: 1.5rem; }
    .app-container__body__bottom__course__details__info {
      display: flex; }
      .app-container__body__bottom__course__details__info img {
        margin-right: .6rem; }
  .app-container__body__bottom__course__bottom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; }
  .app-container__body__bottom__course__price {
    width: 25%;
    height: 18.5rem;
    border-radius: .57rem;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; }
    .app-container__body__bottom__course__price p {
      font-weight: normal;
      font-size: 1.2rem;
      text-align: center;
      text-transform: uppercase; }
    .app-container__body__bottom__course__price b {
      font-weight: 600;
      font-size: 2.6rem;
      line-height: 3.2rem;
      text-align: center;
      text-transform: uppercase; }
  .app-container__body__bottom__course__video {
    width: 70%; }
    .app-container__body__bottom__course__video .inside {
      background-color: #fff;
      padding: 1.5rem;
      border-radius: .75rem; }
      .app-container__body__bottom__course__video .inside img {
        width: 100%; }
    .app-container__body__bottom__course__video h2 {
      margin-top: 2rem;
      font-weight: 500;
      font-size: 1.35rem;
      line-height: 1.6rem;
      text-transform: capitalize; }
    .app-container__body__bottom__course__video ul {
      list-style: none;
      display: flex;
      justify-content: space-between;
      width: 20rem; }
    .app-container__body__bottom__course__video__overview {
      background-color: #fff;
      margin-top: 1.5rem;
      padding: 1.5rem;
      border-radius: .75rem; }
      .app-container__body__bottom__course__video__overview ul {
        text-transform: capitalize;
        padding: 1rem 3rem;
        font-size: 1.2rem;
        font-weight: normal; }
        .app-container__body__bottom__course__video__overview ul li {
          margin-right: 6rem; }
          .app-container__body__bottom__course__video__overview ul li a {
            padding: 1rem;
            border-radius: .5rem;
            outline: none; }
            .app-container__body__bottom__course__video__overview ul li a[aria-selected="true"] {
              background-color: #F7F8FA;
              color: #FF465F;
              font-weight: 500; }
      .app-container__body__bottom__course__video__overview > div {
        padding: 5rem 3rem; }
        .app-container__body__bottom__course__video__overview > div p {
          font-size: 1.2rem;
          font-weight: normal;
          width: 48.8rem;
          line-height: 184%; }
  .app-container__body__bottom__course__comments {
    background-color: #ffffff;
    padding: 2.3rem;
    margin-top: 1rem;
    border-radius: .75rem; }
    .app-container__body__bottom__course__comments h1 {
      font-weight: 500;
      font-size: 1.95rem;
      line-height: 2.4rem;
      text-transform: capitalize;
      margin-bottom: 3rem; }
    .app-container__body__bottom__course__comments form {
      display: flex;
      align-items: center;
      margin-bottom: 6rem; }
      .app-container__body__bottom__course__comments form input {
        flex: 1;
        background-color: #F7F8FA;
        border-radius: 100vh;
        border: none;
        height: 3.15rem;
        padding: 0 1.5rem; }
        .app-container__body__bottom__course__comments form input::placeholder {
          color: #7e7e7e; }
      .app-container__body__bottom__course__comments form .avatar {
        width: 3.15rem;
        height: 3.15rem;
        border-radius: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 2.2rem; }
        .app-container__body__bottom__course__comments form .avatar img {
          width: 100%; }
    .app-container__body__bottom__course__comments__comment {
      padding: 2rem 0; }
      .app-container__body__bottom__course__comments__comment:not(:last-child) {
        border-bottom: 0.5px solid #c4c4c4; }
      .app-container__body__bottom__course__comments__comment__body {
        font-style: normal;
        font-weight: normal;
        font-size: 1.2rem;
        line-height: 203%;
        margin-left: 5.3rem; }
      .app-container__body__bottom__course__comments__comment__creator {
        display: flex;
        align-items: center;
        margin-bottom: 1.5rem; }
        .app-container__body__bottom__course__comments__comment__creator__avatar {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 3.15rem;
          height: 3.15rem;
          border-radius: 100vh;
          overflow: hidden;
          margin-right: 2.2rem; }
        .app-container__body__bottom__course__comments__comment__creator__name h5 {
          font-style: normal;
          font-weight: 500;
          font-size: 1.2rem; }
        .app-container__body__bottom__course__comments__comment__creator__name p {
          color: #514854; }
        .app-container__body__bottom__course__comments__comment__creator .comment-tag {
          background-color: #FEEEEE;
          color: #FF465F;
          border-radius: 100vh;
          padding: .1rem .7rem;
          margin-left: 2rem;
          align-self: self-start; }

.lessons-chat {
  background-color: #ffffff;
  border-radius: .75rem;
  width: 28%;
  cursor: pointer;
  overflow: hidden;
  height: 37.4rem; }
  .lessons-chat ul {
    display: flex;
    list-style: none;
    background-color: #F7F8FA; }
    .lessons-chat ul li {
      width: 50%;
      text-align: center; }
      .lessons-chat ul li a {
        padding: 1rem 3rem;
        display: inline-block;
        width: 100%; }
      .lessons-chat ul li a[aria-selected="true"] {
        background-color: #ffffff;
        color: #FF465F;
        font-weight: 500; }
  .lessons-chat .lesson {
    padding: .8rem; }
    .lessons-chat .lesson:not(:last-child) {
      border-bottom: 0.3px solid #e2e2e2; }
    .lessons-chat .lesson:hover {
      background-color: #e2e2e2; }
    .lessons-chat .lesson__top {
      display: flex;
      justify-content: space-between;
      margin-bottom: .3rem; }
      .lessons-chat .lesson__top p {
        font-style: normal;
        font-weight: 300;
        font-size: .75rem;
        line-height: .9rem;
        text-transform: uppercase; }
    .lessons-chat .lesson__title {
      font-style: normal;
      font-weight: normal;
      font-size: 1rem;
      line-height: 1.3rem;
      margin-top: 1rem; }

.ask-question {
  position: absolute;
  right: 4rem;
  top: 3rem; }

.forum {
  border-radius: .75rem;
  overflow: hidden; }
  .forum__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    cursor: pointer; }
    .forum__question:nth-child(odd) {
      background-color: #fff; }
    .forum__question__main {
      flex: 1; }
      .forum__question__main__title {
        font-weight: normal;
        font-size: 1.07rem;
        line-height: 1.3rem;
        margin-bottom: .7rem; }
      .forum__question__main__details {
        display: flex;
        font-weight: 300;
        font-size: .9rem;
        line-height: .9rem; }
        .forum__question__main__details > * {
          margin-right: 1rem; }
    .forum__question__likes, .forum__question__answers {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 2rem; }
      .forum__question__likes h4, .forum__question__answers h4 {
        font-weight: normal;
        font-size: 1.19rem;
        line-height: 1.5rem;
        margin-bottom: .5rem;
        text-align: center; }
      .forum__question__likes span, .forum__question__answers span {
        font-weight: 300;
        font-size: .9rem;
        line-height: .6rem;
        text-align: center;
        color: #514854; }
    
    .forum__question__answers {
      color: #FF465F;
      border: 0.5px solid #FF465F;
      width: 4rem;
      height: 4rem;
      border-radius: .7rem;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .forum__question__answers span {
        color: inherit; }
  .forum__pagination {
    margin: 5rem auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    font-size: 1rem;
    width: 40.3rem; }
    .forum__pagination .pagination-pages {
      display: flex;
      justify-content: space-between; }
      .forum__pagination .pagination-pages a {
        width: 3.5rem;
        height: 3.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #A5A5A5;
        border-radius: 100vh; }
      .forum__pagination .pagination-pages .pagination-active {
        background-color: #ffffff;
        color: black !important; }

.question-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transition: all .5s ease-in-out;
   
  transform: translate(-50%, -50%);
 
background-image: linear-gradient(315deg, #ffffff 0%, #d7e1ec 74%);
  height: 43.6rem;
  width: 54.4rem;
  box-shadow: 0px 0px 0px 300rem rgba(0, 0, 0, 0.5);
  border-radius: .75rem;
  padding: 4rem;
  display: absolute;
  
  flex-direction: column;
  align-items: stretch; }
  
  .question-popup .close {
  position: absolute;
  top: 33px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.question-popup .close:hover {
  color: red;
}
  
  @keyframes question-popup {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.4);
  }
  60%{
    transform: scale(1.1);
  }
  70%{
    transform: scale(1.2);
  }
  80%{
    transform: scale(1);
  }
  90%{
    transform: scale(1.1);
  }
  100%{
    transform: scale(1);
  }
}
  
  .question-popup form {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around; }
    .question-popup form label {
      font-weight: 500;
      font-size: 1.13rem;
      line-height: 1.4rem; }
    .question-popup form input, .question-popup form textarea {
      background-color: #F7F8FA;
      border: none;
      font: inherit;
      font-size: 1.2rem;
      padding: 1rem 1.5rem;
      border-radius: 1.8rem;
      resize: none;
      outline: none; }
    .question-popup form input {
      height: 3.6rem; }
    .question-popup form textarea {
      height: 15.7rem; }
  .question-popup span {
    font-size: 1.8rem;
    cursor: pointer;
    position: absolute;
    right: 4rem;
    padding: .5rem; }

.hide-popup {
  display: none; }

.forum-question-heading {
  font-weight: 500;
  font-size: 2.25rem;
  line-height: 2.7rem;
  margin-bottom: 3rem;
  margin-top: 4rem; }

.question__creator, .question__answers__answer .answer-creator {
  display: flex;
  align-items: center;
  margin-bottom: 2rem; }
  .question__creator__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem; }
    .question__creator__avatar img {
      width: 100%; }
  .question__creator__details h5 {
    font-weight: 500;
    font-size: 1.2rem; }
  .question__creator__details span {
    font-weight: normal;
    font-size: .86rem;
    color: #514854; }

.question__body {
  padding-left: 3.5rem;
  margin-bottom: 7rem; }
  .question__body p {
    font-weight: normal;
    font-size: 1.07rem;
    line-height: 203%;
    margin-bottom: 3rem; }

.question__likes {
  display: flex; }
  .question__likes > * {
    display: flex;
    align-items: center; }
  .question__likes svg {
    background-color: #fff;
    width: 1.03rem;
    margin-right: .75rem;
    cursor: pointer;
    border-radius: 100vh; }
  .question__likes__like {
    margin-right: 2rem; }

.question__answers__top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.375px solid #A5A5A5;
  margin-bottom: 1.5rem; }
  .question__answers__top ul {
    list-style: none;
    display: flex; }
    .question__answers__top ul li a {
      font-weight: 500;
      font-size: .8rem;
      padding: .4rem .7rem; }
  .question__answers__top .answers-tab-active {
    background-color: #FF465F;
    color: #ffffff;
    border-radius: 100vh; }

.question__answers__answer {
  background-color: #fff;
  padding: 1.5rem 2.2rem;
  border-radius: .75rem; }
  .question__answers__answer:not(:last-child) {
    margin-bottom: 3rem; }
  .question__answers__answer .answer-creator__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 1rem; }
    .question__answers__answer .answer-creator__avatar img {
      width: 100%; }
  .question__answers__answer .answer-creator__details h5 {
    font-weight: 500;
    font-size: 1.2rem; }
  .question__answers__answer .answer-creator__details span {
    font-weight: normal;
    font-size: .86rem;
    color: #514854; }
  .question__answers__answer__main {
    padding-left: 3.5rem; }
    .question__answers__answer__main p {
      font-weight: normal;
      font-size: 1.07rem;
      line-height: 203%;
      margin-bottom: 3rem; }

.answer-name {
  font-weight: 500;
  font-size: 1.2rem; }

.profile {
  margin-top: 4rem; }
  .profile__top {
    display: flex;
    margin-bottom: 5rem; }
    .profile__top__left {
      background-color: #fff;
      border-radius: .75rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 19.5rem;
      position: relative;
      height: 26.6rem;
      margin-right: 1.5rem; }
    .profile__top__right {
      background-color: #fff;
      border-radius: .75rem;
      flex: 1;
      overflow: hidden; }
      .profile__top__right ul {
        display: flex;
        list-style: none;
        background-color: #F7F8FA; }
        .profile__top__right ul li {
          text-transform: capitalize; }
          .profile__top__right ul li a {
            display: inline-block;
            padding: 1.8rem 4rem;
            font-size: 1.2rem; }
          .profile__top__right ul li .active-tab {
            background-color: #fff; }
      .profile__top__right form {
        padding: 3rem 4rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around; }
        .profile__top__right form input {
          margin: .5rem 0;
          background-color: #F7F8FA;
          border: none;
          padding: .2rem 1rem;
          border-radius: 100vh;
          font-family: inherit;
          font-size: 1rem;
          height: 2.7rem; }
  .profile__avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 100vh;
    overflow: hidden;
    margin-bottom: 3rem; }
    .profile__avatar img {
      width: 100%; }
  .profile span {
    position: absolute;
    background-color: #FF465F;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 100vh;
    right: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; }

.professor-section {
  padding-top: 10rem;
  position: relative; }
  .professor-section::before {
    content: "";
    position: absolute;
    background-color: #F7F8FA;
    width: 100vw;
    transform: translateX(-50%);
    left: 50%;
    top: 0;
    height: 26.4rem;
    z-index: -1; }
  .professor-section__header {
    height: 36.7rem; }
    .professor-section__header__bottom {
      display: flex; }
      .professor-section__header__bottom h2 {
        font-weight: 500;
        font-size: 3.4rem;
        line-height: 4.2rem; }
  .professor-section__avatar {
    width: 21rem;
    height: 21rem;
    border-radius: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-items: center;
    margin-right: 6rem; }
    .professor-section__avatar img {
      width: 100%; }
  .professor-section__bottom {
    display: flex;
    margin-bottom: 6rem; }
    .professor-section__bottom__about {
      margin-right: 7rem; }
      .professor-section__bottom__about h2 {
        font-weight: 500;
        font-size: 2.4rem;
        line-height: 2.9rem;
        text-transform: capitalize;
        margin-bottom: 3.7rem; }
      .professor-section__bottom__about p {
        font-weight: normal;
        font-size: 1.35rem;
        line-height: 184%; }

.go-back {
  margin-bottom: 3.4rem;
  display: inline-block; }