/* ===================================
   SLIDE 1 - DESKTOP
====================================== */

.slide1 .desktop {
  display: block;
}

.slide1 .mobile {
  display: none;
}

section.section-custom.slide1 {
  padding: 1.5rem 0;
  background-color: #ff0078;
}

.slide1 h3.main-text {
  font-family: "Akrobat Bold", sans-serif;
  font-size: 50px;
  border: 1px solid #3e1e6f;
  border-radius: 84px;
  text-align: center;
  text-wrap: wrap;
  border-bottom-left-radius: 0;
  padding: 100px;
  max-width: 69%;
}

.slide1 h3.primary-color {
  color: #ffffff;
}

.slide1 img.desktop {
  max-width: 80%;
}

/* ===================================
   SLIDE 2 - DESKTOP
====================================== */

.slide2 .desktop {
  display: block;
}

.slide2 .mobile {
  display: none;
}

section.section-custom.slide2 {
  padding: 2.5rem 0;
}

.slide2 h3 {
  color: #3e1e6f;
}

.slide2 h3.title {
  font-family: "Akrobat Regular", sans-serif;
  font-size: 50px;
  color: #3e1e6f;
  text-align: center;
}

.slide2 h3 span.title-bold {
  font-family: "Akrobat Bold", sans-serif;
  font-size: 50px;
}

.slide2 h3.topic {
  font-family: "Akrobat Regular", sans-serif;
  font-size: 28px;
}

/* ===================================
   SLIDE 3 - DESKTOP
====================================== */

section.section-custom.slide3 {
  padding: 3.5rem 0;
}

.slide3 {
  position: relative;
  background-color: #6835f7;
}

.slide3 .topic {
  text-align: center;
  min-width: 10vw;
  padding: 20px;
}

.slide3 img {
  text-align: center;
}

.slide3 img.top {
  margin-bottom: 50px;
  max-width: 35%;
}

.slide3 img.bottom {
  margin-bottom: 40px;
  max-width: 15%;
}

.slide3 .top-text {
  font-family: "Akrobat Bold", sans-serif;
  font-size: 30px;
  text-align: center;
  min-height: 100px;
}

.slide3 .bottom-text {
  font-family: "Akrobat Regular", sans-serif;
  font-size: 30px;
  text-align: center;
}

/* ===================================
   SLIDE 4 - DESKTOP
====================================== */

.slide4 .desktop {
  display: block;
}

.slide4 .mobile {
  display: none;
}

section.section-custom.slide4 {
  padding: 3.5rem 0;
}

.slide4 h3.text {
  font-size: 30px;
  font-family: "Akrobat Regular", sans-serif;
  margin-bottom: 40px;
  color: #3e1e6f;
  text-align: center;
}

/* ===================================
   SLIDE 5 - DESKTOP
====================================== */

.slide5 .desktop {
  display: block !important;
}

section.section-custom.slide5 {
  display: block;
  height: 60vh;
  padding: 0;
  background-image: url("../images/chat-session5-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.slide5 .topic {
  text-align: center;
  min-width: 10vw;
  padding: 20px;
}

.slide5 img {
  text-align: center;
  margin-bottom: 50px;
  max-width: 35%;
}

.slide5 .top-text {
  font-family: "Akrobat Bold", sans-serif;
  font-size: 50px;
  text-align: center;
  margin-top: 55px;
  margin-bottom: 30px;
}

.slide5 .bottom-text {
  font-family: "Akrobat Regular", sans-serif;
  font-size: 30px;
  text-align: center;
}

/* ===================================
   SLIDE 6 - DESKTOP
====================================== */

.slide6 .desktop {
  display: block;
}

.slide6 .mobile {
  display: none;
}

section.section-custom.slide6 {
  padding: 3.5rem 0;
  background-color: #ff0078;
}

.slide6 .left-column {
  text-align: center;
}

.slide6 h3.first-line {
  font-family: "Akrobat Regular", sans-serif;
  color: #ffffff;
  font-size: 40px;
  margin-bottom: 10px;
  margin-left: 90px;
}

.slide6 h3.second-line {
  font-family: "Akrobat Bold", sans-serif;
  color: #ffffff;
  font-size: 40px;
  margin-bottom: 40px;
  margin-left: 90px;
}

.slide6 .right-col img {
  margin-left: 90px;
  max-width: 80%;
}

/* ===================================
   SLIDE 7 - DESKTOP
====================================== */

section.section-custom.slide7 {
  padding: 6.5rem 0;
}

.slide7 {
  background-color: #ffffff;
}

.slide7 h3 {
  font-family: "Akrobat Regular", sans-serif;
  color: #3e1e6f;
  font-size: 30px;
}

.slide7 h3.title {
  font-size: 45px;
  margin-bottom: 40px;
  text-align: center;
}

.slide7 h3 span.text-bold {
  font-family: "Akrobat Bold", sans-serif;
  font-size: 30px;
  margin-bottom: 40px;
}

.slide7 img.title {
  max-width: 70px;
  padding: 0 20px;
}

.slide7 .topic {
  flex-wrap: unset;
  align-items: center;
}

.slide7 .topic img {
  max-width: 35%;
  margin-bottom: 3rem;
}

.slide7 .topic h3 {
  padding: 0 15px;
}

/* ===================================
   Media Queries
====================================== */

@media screen and (max-width: 767px) {
  /* ===================================
   SLIDE 1 - MOBILE
====================================== */

  .slide1 .desktop {
    display: none;
  }

  .slide1 .mobile {
    display: block;
  }

  .slide1 h3.main-text {
    font-size: 30px;
    padding: 20px;
    max-width: 60%;
    margin-left: 20%;
    border: 3px solid #3e1e6f;
  }

  .slide1 img.mobile {
    max-width: inherit;
    padding: 35px;
  }

  /* ===================================
     SLIDE 2 - MOBILE
     =================================== */

  .slide2 .desktop {
    display: none;
  }

  .slide2 .mobile {
    display: block;
  }

  section.section-custom.slide2 {
    padding: 1.5rem 0;
  }

  .slide2 h3.title {
    font-size: 25px;
  }

  .slide2 h3 span.title-bold {
    font-size: 25px;
  }

  .slide2 h3.topic {
    font-size: 17px;
    max-width: 80%;
    width: 100%;
    margin-left: 10%;
  }

  .slide2 img.mobile {
    margin-top: 15px;
    margin-bottom: 20px;
  }

  /* ===================================
     SLIDE 3 - MOBILE
     =================================== */

  section.section-custom.slide3 {
    padding: 1.5rem 0;
  }

  .slide3 img.top {
    margin-top: 30px;
    margin-bottom: 25px;
    max-width: 60%;
  }

  .slide3 img.bottom {
    margin-bottom: 15px;
  }

  .slide3 .top-text {
    font-size: 20px;
  }

  .slide3 .bottom-text {
    font-size: 20px;
  }

  /* ===================================
     SLIDE 4 - MOBILE
     =================================== */

  .slide4 .desktop {
    display: none;
  }

  .slide4 .mobile {
    display: block;
  }

  section.section-custom.slide4 {
    padding: 3.5rem 0;
  }

  .slide4 .left-col {
    text-align: center;
  }

  .slide4 h3.main-text {
    font-size: 30px;
  }

  .slide4 h3.secondary-text {
    margin-top: 24px;
    margin-bottom: 24px;
    font-family: "Akrobat Regular", sans-serif;
  }

  /* ===================================
     SLIDE 5 - MOBILE
     =================================== */

  .slide5 .desktop {
    display: none !important;
  }

  section.section-custom.slide5 {
    height: 60vh;
  }
  section.section-custom.slide5 {
    padding: 1.5rem 0;
  }

  .slide5 .topic {
    padding: 10px;
  }

  .slide5 img {
    max-width: 80%;
    margin-bottom: 20px;
  }

  .slide5 .top-text {
    font-size: 30px;
    margin-top: 20px;
  }

  .slide5 .bottom-text {
    font-size: 20px;
  }

  /* ===================================
   SLIDE 6 - MOBILE
====================================== */

  .slide6 .desktop {
    display: none;
  }

  .slide6 .mobile {
    display: block;
  }

  section.section-custom.slide6 {
    padding: 2.5rem 0;
  }

  .slide6 h3.first-line {
    font-size: 35px;
    margin-bottom: 10px;
    text-align: center;
    margin-left: 0px;
  }

  .slide6 h3.second-line {
    font-size: 35px;
    margin-bottom: 40px;
    text-align: center;
    margin-left: 0px;
  }

  .slide6 .left-col img {
    max-width: 70%;
    margin-left: 18vw;
  }

  .slide6 .right-col img {
    margin-left: 9vw;
    max-width: 80%;
  }

  /* ===================================
   SLIDE 7 - MOBILE
====================================== */
  section.section-custom.slide7 {
    padding: 2.5rem 0;
  }

  .slide7 h3 {
    font-size: 25px;
  }

  .slide7 h3.title {
    font-size: 30px;
    margin-bottom: 35px;
  }

  .slide7 h3 span.text-bold {
    font-size: 25px;
  }

  .slide7 img.title {
    max-width: 45px;
    padding: 0 10px;
  }

  .slide7 .topic {
    flex-wrap: wrap;
    text-align: center;
    margin-bottom: 30px;
  }

  .slide7 .topic img {
    max-width: 50%;
    margin-left: 28%;
    margin-bottom: 20px;
  }
}