.homepage-whatsapp-btn {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 20;
}

@media screen and (min-width: 770px) {
  .homepage-whatsapp-btn {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* HERO */
.s-hero {
  overflow: hidden;
}

@media screen and (max-width: 770px) {
  .s-hero.bg-beehive-white {
    background-position: 56% 0;
  }
}

.s-hero .container {
  padding-top: 48px;
  padding-bottom: 84px;
}

@media screen and (min-width: 1026px) {
  .s-hero .container {
    align-items: center;
    display: grid;
    grid-template-columns: 45% 77%;
    padding-bottom: 22px;
  }
}

@media screen and (min-width: 1285px) {
  .s-hero .container {
    grid-template-columns: 613px 746px;
  }
}

.s-hero__title {
  margin: 28px 0;
  font-size: 49px;
  word-break: break-word;
}
@media (max-width: 403px) {
  .s-hero__title {
    font-size: 32px;
  }
}
@media (min-width: 403px) and (max-width: 767px) {
  .s-hero__title {
    font-size: 40px;
  }
}

.s-hero__img {
  width: 73%;
  position: relative;
  top: -68px;
  height: auto;
}

@media screen and (min-width: 1285px) {
  .s-hero__img {
    left: -82px;
    width: 100%;
  }
}

@media screen and (max-width: 1026px) {
  .s-hero__figure {
    display: none;
  }
}

.s-hero .btn {
  margin-top: 40px;
}

@media screen and (min-width: 770px) {
  .s-hero .btn {
    width: max-content;
  }
}

@media screen and (min-width: 1026px) {
  .s-hero .paragraph {
    max-width: 478px;
  }
}

/* ABOUT VOLPE */
.s-about-volpe .container {
  padding-top: 80px;
  padding-bottom: 80px;
  display: grid;
}

@media screen and (min-width: 1026px) {
  .s-about-volpe .container {
    grid-template-columns: 47.5% 38.5%;
    gap: 11%;
  }
}

.s-about-volpe__img {
  width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  margin-top: 31px;
  height: auto;
  object-fit: cover;
  max-width: 467px;
}

@media screen and (min-width: 1026px) {
  .s-about-volpe__img {
    width: 81%;
  }
}

.s-about-volpe__title {
  margin-top: 16px;
}

@media screen and (min-width: 1026px) {
  .s-about-volpe__title {
    margin-top: 32px;
  }
}

@media screen and (max-width: 1026px) {
  .s-about-volpe__title br {
    display: none;
  }
}

.s-about-volpe__btn {
  margin-top: 24px;
  width: 100%;
}

@media screen and (min-width: 770px) {
  .s-about-volpe__btn {
    width: max-content;
    margin-top: 32px;
  }
}

.s-about-volpe__qr-code {
  padding-top: 67px;
}

.s-about-volpe__qr-code .qr-code {
  margin-top: 80px;
}

@media screen and (max-width: 1026px) {
  .s-about-volpe__qr-code {
    display: grid;
    justify-items: center;
  }
}

@media screen and (min-width: 1285px) {
  .s-about-volpe__qr-code .qr-code {
    min-width: 486px;
    margin-top: 139px;
  }
}

/* SLIDER COURSES */
.s-courses {
  overflow: hidden;
}

.s-courses .container {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (min-width: 1026px) {
  .s-courses .container {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.s-courses,
.s-courses .paragraph {
  color: white;
}

.s-courses__title {
  margin-bottom: 24px;
}

@media screen and (max-width: 1026px) and (min-width: 680px) {
  .s-courses__title {
    padding-right: 24px;
    padding-left: 24px;
  }
}

.s-courses__text {
  max-width: 430px;
}

@media screen and (max-width: 1026px) and (min-width: 680px) {
  .s-courses__text {
    padding-right: 24px;
    padding-left: 24px;
  }
}

.s-courses__redirect {
  text-align: center;
}

.s-courses__pagination .btn {
  font-size: 14px;
  padding: 8px 20px;
}

.s-courses__pagination {
  width: 100%;
  font-size: 14px;
  overflow-x: auto;
  position: relative;
}

@media screen and (max-width: 1026px) {
  .s-courses__pagination {
    display: grid;
    grid-template-columns: 158px 108px 117px;
    gap: 8px;
    padding-right: 27px;
    padding-left: 24px;
  }
}

@media screen and (min-width: 1026px) {
  .s-courses__pagination {
    max-width: 506px;
    justify-content: space-between;
    display: flex;
  }

  .s-courses__pagination .btn {
    font-size: 16px;
    padding: 8px 32px;
  }
}

.s-courses .s-courses__swiper-wrapper {
  margin-top: 40px;
  margin-bottom: 40px;
}

@media screen and (min-width: 1026px) {
  .s-courses .s-courses__swiper-wrapper {
    margin-top: 88px;
    margin-bottom: 56px;
  }
}

.s-courses__header {
  display: grid;
  gap: 64px;
}

@media screen and (min-width: 1252px) {
  .s-courses__header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0;
    padding: 0;
  }
}

.s-courses__footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
}

@media screen and (min-width: 700px) {
  .s-courses__footer {
    justify-content: space-between;
    padding: 0 24px;
  }
}

.s-courses__navigation {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1fr;
}

@media screen and (max-width: 1026px) {
  .s-courses__navigation {
    display: none;
  }
}

.s-courses__arrows {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  margin-top: 0;
}

@media screen and (min-width: 1026px) {
  .s-courses .swiper-pagination {
    margin-left: 16px;
  }
}

.s-courses .swiper-pagination-bullet {
  height: auto;
  width: auto;
}

.s-courses .swiper-pagination-item {
  margin: 0 10px;
  padding: 5px 10px;
  cursor: pointer;
  font-weight: bold;
  color: #000;
}

.s-courses .swiper-pagination-item.active {
  color: #007aff;
}

.s-courses .swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* @media screen and (max-width: 1026px) {
  .s-courses .swiper {
    margin-right: -24px;
    margin-left: -24px;
  }
} */

/* .c-card-courses-group {
  display: grid;
  grid-template-columns: 282px 282px 282px 282px;
  gap: 23px;
  overflow-x: auto;
  padding: 0 24px;
}

@media screen and (min-width: 1026px) {
  .c-card-courses-group {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 0;
  }
} */

/* FSI BRASIL */
.s-fsi {
  padding: 96px 0;
  overflow: hidden;
}

@media screen and (min-width: 1026px) {
  .s-fsi {
    padding: 120px 0;
  }
}

.s-fsi .container {
  display: grid;
  align-items: center;
  gap: 64px;
}

@media screen and (min-width: 1026px) {
  .s-fsi .container {
    grid-template-columns: 43% 33%;
    gap: 24%;
  }
}

.s-fsi__title {
  margin-top: 24px;
  margin-bottom: 24px;
}

@media screen and (min-width: 1026px) {
  .s-fsi__title {
    margin-bottom: 48px;
  }
}

.s-fsi__img {
  width: 100%;
  position: relative;
  height: auto;
}

@media screen and (max-width: 1026px) {
  .s-fsi__img {
    margin: 0 auto;
    width: 93%;
    display: block;
    max-width: 503px;
  }
}

@media screen and (min-width: 1026px) {
  .s-fsi__img {
    left: -98px;
    top: 69px;
  }
}

.s-fsi .btn {
  margin-top: 24px;
}

@media screen and (min-width: 770px) {
  .s-fsi .btn {
    margin-top: 48px;
    width: max-content;
  }
}

/* MAGAZINE */
.s-magazine {
  margin: 80px 0;
}

.s-magazine__wrapper {
  border-radius: 16px;
  color: white;
  overflow: hidden;
}

@media screen and (max-width: 1026px) {
  .s-magazine__wrapper {
    padding: 50px 24px;
  }
}

@media screen and (min-width: 1026px) {
  .s-magazine__wrapper {
    padding: 109px 24px;
    display: grid;
    grid-template-columns: 34% 57%;
    align-items: center;
  }
}

.s-magazine .paragraph {
  color: white;
}

.s-magazine .tag {
  color: var(--secondary);
}

.s-magazine__img {
  width: 91%;
  height: auto;
}

@media screen and (max-width: 1026px) {
  .s-magazine__img {
    margin: 0 auto 30px;
    display: block;
    max-width: 367px;
  }
}

.s-magazine__title {
  margin: 24px 0;
}

.s-magazine .btn {
  margin-top: 24px;
}

@media screen and (min-width: 770px) {
  .s-magazine .btn {
    width: max-content;
  }
}

@media screen and (min-width: 1026px) {
  .s-magazine .btn {
    margin-top: 40px;
  }
}

/* FAQ */
.s-faq {
  display: grid;
  justify-items: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (min-width: 1026px) {
  .s-faq {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

.s-faq .accordion {
  max-width: 907px;
}

.s-faq .s-faq__title {
  margin: 22px 0 84px;
  text-align: center;
}
