@charset "UTF-8";
:root {
  --swiper-navigation-size:35px !important; }

.text-primary {
  color: #F6C80D !important; }

.text-yellow-green {
  color: #D0B701; }

.font-bsru {
  font-family: "bsruban"; }

.fw-900 {
  font-weight: 900; }

@keyframes shake {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(4deg); } }

@keyframes blink {
  from {
    background-color: rgba(255, 200, 131, 0.3);
    box-shadow: 0 0 4px #f8c37f; }
  to {
    background-color: rgba(255, 200, 131, 0.6);
    box-shadow: 0 0 6px #f5b35f; } }

@keyframes rotate {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(360deg); } }

/* Shine */
.hover-shine .shine-effect {
  position: absolute;
  inset: 0; }
  .hover-shine .shine-effect::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    transform: skewX(-25deg); }
  .hover-shine .shine-effect:hover::before {
    animation: shine 0.75s; }

.hover-shine {
  position: relative; }

@keyframes shine {
  100% {
    left: 125%; } }

@font-face {
  font-family: 'Kanit';
  font-weight: 300;
  src: url("../fonts/Kanit/Kanit-Light.ttf") format("truetype"); }

@font-face {
  font-family: 'Kanit';
  font-weight: normal;
  src: url("../fonts/Kanit/Kanit-Regular.ttf") format("truetype"); }

@font-face {
  font-family: 'Kanit';
  font-weight: 500;
  src: url("../fonts/Kanit/Kanit-Medium.ttf") format("truetype"); }

@font-face {
  font-family: 'Kanit';
  font-weight: 600;
  src: url("../fonts/Kanit/Kanit-SemiBold.ttf") format("truetype"); }

@font-face {
  font-family: 'Kanit';
  font-weight: 700;
  src: url("../fonts/Kanit/Kanit-Bold.ttf") format("truetype"); }

@font-face {
  font-family: 'Kanit';
  font-weight: 600;
  font-style: italic;
  src: url("../fonts/Kanit/Kanit-SemiBoldItalic.ttf") format("truetype"); }

@font-face {
  font-family: 'bsruban';
  font-weight: normal;
  src: url("../fonts/bsruban/BSRUBANSOMDEJ-Regular.otf"); }

@font-face {
  font-family: 'bsruban';
  font-weight: 600;
  src: url("../fonts/bsruban/BSRUBANSOMDEJ-SemiBold.otf"); }

@font-face {
  font-family: 'bsruban';
  font-weight: 700;
  src: url("../fonts/bsruban/BSRUBANSOMDEJ-Bold.otf"); }

@font-face {
  font-family: 'bsruban';
  font-weight: 900;
  src: url("../fonts/bsruban/BSRUBANSOMDEJ-Black.otf"); }

* {
  box-sizing: border-box; }

html.fixed {
  overflow-y: hidden; }
  @media (min-width: 1128px) {
    html.fixed {
      overflow-y: auto; } }

html,
body {
  position: relative;
  font-family: "Kanit";
  overflow-x: hidden;
  font-weight: 400;
  box-sizing: border-box;
  line-height: 1.4;
  color: #3D3721;
  padding: 0; }
  html > .wrapper,
  body > .wrapper {
    overflow-x: hidden; }

.btn-floating {
  position: fixed;
  right: 0.5rem;
  z-index: 7;
  top: 70vh; }
  .btn-floating .btn-to-top,
  .btn-floating .btn-to-game,
  .btn-floating .btn-to-download {
    width: 3.5rem;
    display: block;
    cursor: pointer;
    margin-bottom: .35rem; }
  @media (min-width: 1128px) {
    .btn-floating {
      right: 2rem; } }

.bg-gradient-5-6 {
  background: linear-gradient(180deg, rgba(253, 192, 65, 0) 0%, #FDC041 90.33%, #FFF8EA 10%); }

.table-health-value {
  background: url("../images/section6/bg-table.png");
  background-size: 100% 100%;
  border-radius: 1.65rem; }
  .table-health-value .table-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: .5rem;
    padding: 0 .5rem;
    text-align: center; }
    .table-health-value .table-row .item {
      padding: .75rem;
      position: relative; }
      .table-health-value .table-row .item .bubble {
        position: absolute;
        background-color: #FFF;
        border-radius: 3rem;
        color: #449634;
        top: 50%;
        transform: translateY(-50%);
        left: 110%;
        white-space: nowrap;
        padding: .35rem;
        z-index: 2;
        font-size: .875rem; }
    .table-health-value .table-row-head {
      position: relative;
      top: -1rem; }
      .table-health-value .table-row-head .item-head > div {
        background-color: #000;
        color: #FFF;
        border-radius: .5rem;
        padding: .35rem .75rem;
        font-weight: 300;
        font-size: .875rem;
        white-space: nowrap; }
      @media (min-width: 1128px) {
        .table-health-value .table-row-head .item-head > div {
          font-size: 1rem;
          display: inline-block;
          min-width: 6rem; } }
    .table-health-value .table-row:last-child {
      padding-bottom: 1rem; }
  @media (min-width: 1128px) {
    .table-health-value {
      background: url("../images/section6/bg-table-desktop.png");
      background-size: 100% 100%;
      font-size: 1.25rem;
      max-width: 90%; } }

.footer-menu {
  background: #FFF0CA;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding-bottom: 1rem;
  text-align: center; }
  .footer-menu-title {
    display: inline-block;
    background-color: #000;
    color: #FFF;
    font-weight: 300;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    position: relative;
    top: -1rem;
    z-index: 3;
    padding: .5rem 1.5rem;
    border-radius: .75rem; }
  .footer-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem; }
    .footer-menu ul li {
      background-color: #FFF;
      border-radius: 3rem;
      text-align: center;
      padding: .25rem .5rem;
      font-weight: 300; }
      .footer-menu ul li a {
        text-decoration: none;
        color: #000;
        font-size: .875rem; }
        @media (min-width: 1128px) {
          .footer-menu ul li a {
            font-size: 1rem; } }

.modal-export-guideline .export-guideline-title {
  background-color: #F6C80D;
  border-radius: 3rem;
  color: #FFF;
  font-size: 1.125rem;
  padding: .75rem 1rem;
  display: flex;
  justify-content: space-between;
  font-size: .875rem; }
  .modal-export-guideline .export-guideline-title img {
    width: 1.875rem;
    display: inline-block;
    cursor: pointer; }

.modal-export-guideline ul {
  font-size: .875rem;
  list-style-type: auto; }
  .modal-export-guideline ul li ul {
    list-style-type: disc; }

@media (min-width: 768px) {
  .modal-export-guideline .export-guideline-title {
    font-size: 1.125rem; }
  .modal-export-guideline ul {
    font-size: 1rem; } }

.highcharts-tooltip .tooltip {
  box-shadow: 0px 0px 6px 0px #8a8a8a4d;
  background-color: #fff;
  border-radius: 4rem;
  padding: .5rem .75rem; }
  .highcharts-tooltip .tooltip .title {
    font-size: 1rem; }

.credit {
  background-color: #009200;
  color: #FFF;
  font-weight: 300;
  font-size: .875rem;
  padding: .5rem 0;
  text-align: center; }

.section-1 {
  position: relative;
  background: linear-gradient(360deg, #F0F8FA 55.36%, #CCDDE5 100%);
  height: 90vh;
  z-index: 5;
  overflow: unset; }
  .section-1 .logo-doae {
    position: relative;
    z-index: 3;
    text-align: center;
    padding-top: 1.5rem;
    top: -100%; }
    .section-1 .logo-doae img {
      max-width: 7rem; }
      @media (min-width: 768px) {
        .section-1 .logo-doae img {
          max-width: 10rem; } }
  .section-1 .banana-image {
    position: absolute;
    top: 0rem;
    text-align: center;
    width: 100%; }
    .section-1 .banana-image img {
      max-width: 90%; }
      @media (min-width: 768px) {
        .section-1 .banana-image img {
          max-width: 80%; } }
      @media (min-width: 1128px) {
        .section-1 .banana-image img {
          max-width: 50%; } }
  .section-1 .slogan {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    opacity: 0; }
    .section-1 .slogan img {
      max-width: 100%; }
    @media (min-width: 1128px) {
      .section-1 .slogan {
        width: 50%; } }
  .section-1 .leaf {
    position: absolute; }
    .section-1 .leaf-1 {
      width: 70%;
      top: 0;
      opacity: 0;
      left: -100%; }
      @media (min-width: 768px) {
        .section-1 .leaf-1 {
          width: 60%; } }
      @media (min-width: 1128px) {
        .section-1 .leaf-1 {
          width: 50%;
          top: -10%; } }
    .section-1 .leaf-2 {
      width: 50%;
      right: -100%; }
      @media (min-width: 768px) {
        .section-1 .leaf-2 {
          width: 45%; } }
      @media (min-width: 1128px) {
        .section-1 .leaf-2 {
          width: 40%;
          top: -30%; } }
    .section-1 .leaf img {
      max-width: 100%; }
  @media (min-width: 1128px) {
    .section-1 {
      height: 85vh; } }

.section-2 {
  background: linear-gradient(360deg, rgba(253, 192, 65, 0) 0%, #FDC041 60.33%, #DEA841 100%);
  position: relative;
  padding-top: 36%; }
  @media (min-width: 768px) {
    .section-2 {
      padding-top: 32%; } }
  @media (min-width: 1128px) {
    .section-2 {
      padding-top: 20%; } }
  .section-2 .banana-name {
    background-color: #000;
    border-radius: 3rem;
    color: #FFFF;
    display: inline-block;
    padding: .35rem 1rem;
    position: absolute;
    top: 1.5rem;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%);
    z-index: 3; }
    @media (min-width: 768px) {
      .section-2 .banana-name {
        top: 3rem;
        font-size: 1.25rem; } }
    @media (min-width: 992px) {
      .section-2 .banana-name {
        font-size: 1.5rem; } }
    @media screen and (min-width: 1600px) {
      .section-2 .banana-name {
        top: 4rem; } }
  .section-2 .leaf {
    top: 0;
    position: absolute; }
    .section-2 .leaf-3 {
      width: 40%;
      left: -100%; }
      @media (min-width: 768px) {
        .section-2 .leaf-3 {
          width: 35%; } }
      @media (min-width: 1128px) {
        .section-2 .leaf-3 {
          width: 20rem;
          top: -10rem;
          z-index: 5; } }
    .section-2 .leaf-4 {
      width: 40%;
      right: -100%; }
      @media (min-width: 768px) {
        .section-2 .leaf-4 {
          width: 35%; } }
      @media (min-width: 1128px) {
        .section-2 .leaf-4 {
          width: 20rem;
          top: -15rem;
          z-index: 5; } }
  .section-2 .circle {
    background-image: url("../images/section2/bg-circle.png");
    background-size: 100% auto;
    background-position: top, bottom;
    width: 100%;
    z-index: 6;
    position: relative;
    background-repeat: no-repeat;
    height: 400vh; }
    @media (min-width: 1128px) {
      .section-2 .circle {
        background-image: unset; } }
    .section-2 .circle-body {
      background-position: center bottom;
      position: relative;
      height: 100vh;
      /* เต็มจอเวลา pin */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; }
      .section-2 .circle-body .banana-name-white {
        font-family: 'bsruban';
        color: #FFF;
        font-weight: 700;
        font-size: 2rem;
        text-align: center;
        margin-bottom: 3rem;
        margin-top: 4rem;
        transition: all .3s; }
        @media (min-width: 768px) {
          .section-2 .circle-body .banana-name-white {
            font-size: 3rem; } }
      .section-2 .circle-body .text-box {
        position: relative;
        width: 75%;
        min-height: 250px;
        margin-left: auto;
        margin-right: auto;
        /* กัน layout เด้ง */ }
        @media (min-width: 768px) {
          .section-2 .circle-body .text-box {
            font-size: 1.25rem; } }
        .section-2 .circle-body .text-box .text-item {
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          transform: translateY(30px);
          padding: 0 1rem;
          text-align: center;
          width: 100%; }
          @media (min-width: 768px) {
            .section-2 .circle-body .text-box .text-item {
              padding: 0 2rem; } }
        .section-2 .circle-body .text-box .text-item.active {
          opacity: 1;
          transform: translateY(0);
          position: absolute; }
      .section-2 .circle-body .banana-img {
        transform: rotate(50deg);
        width: 70%; }
      .section-2 .circle-body .step {
        position: absolute;
        right: .5rem;
        top: 50%;
        transform: translateY(-50%);
        list-style-type: none;
        counter-reset: my-counter;
        display: flex;
        flex-flow: column; }
        .section-2 .circle-body .step li {
          counter-increment: my-counter;
          color: #404040;
          position: relative;
          display: flex;
          flex-flow: column;
          align-items: center; }
          .section-2 .circle-body .step li:before {
            content: counter(my-counter);
            opacity: .4;
            display: flex;
            align-items: center;
            justify-content: center; }
          .section-2 .circle-body .step li:not(:last-child)::after {
            content: "";
            width: 1px;
            height: 6rem;
            display: block;
            background-color: #404040;
            opacity: .4; }
          .section-2 .circle-body .step li.active:before {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            opacity: 1;
            font-size: 1.5rem;
            border: 1px solid #404040; }
        @media (min-width: 1128px) {
          .section-2 .circle-body .step {
            z-index: 7; } }
      @media (min-width: 1128px) {
        .section-2 .circle-body .banana-name-white {
          opacity: 0;
          margin-top: 0; }
        .section-2 .circle-body .text-box {
          opacity: 0;
          width: 30%; }
        .section-2 .circle-body .banana-img {
          width: 40%;
          transform: rotate(0);
          position: absolute;
          transform-origin: center center;
          /* หรือ bottom center ถ้าอยากหมุนจากแกนล่าง */
          will-change: transform; }
        .section-2 .circle-body .bg-circle-pin {
          position: absolute;
          height: 400vh;
          top: 0; } }
  .section-2 .banana-main-description {
    padding-bottom: 4rem;
    position: relative;
    text-align: center;
    margin-top: 4rem;
    z-index: 2; }
    .section-2 .banana-main-description .paragraph-1 {
      width: 85%;
      margin-left: auto;
      margin-right: auto; }
      .section-2 .banana-main-description .paragraph-1 .title {
        font-family: 'bsruban';
        font-weight: 900;
        font-size: 2rem; }
      .section-2 .banana-main-description .paragraph-1 small {
        font-size: .875rem; }
    .section-2 .banana-main-description .paragraph-2 {
      width: calc(100% - 1rem);
      margin-left: auto;
      margin-right: auto; }
    .section-2 .banana-main-description .paragraph-3 {
      width: 70%;
      margin-left: auto;
      margin-right: auto; }
    @media (min-width: 768px) {
      .section-2 .banana-main-description .paragraph-1 small {
        font-size: 1rem;
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;
        display: block; }
      .section-2 .banana-main-description .paragraph-2 {
        width: 80%; }
      .section-2 .banana-main-description .paragraph-3 {
        width: 60%; }
        .section-2 .banana-main-description .paragraph-3 span {
          font-size: 1.25rem; } }
    @media (min-width: 1128px) {
      .section-2 .banana-main-description .paragraph-1 .title {
        font-size: 2.8rem; }
      .section-2 .banana-main-description .paragraph-1 small {
        font-size: 1.125rem; }
      .section-2 .banana-main-description .paragraph-2 {
        font-size: 1.125rem; }
      .section-2 .banana-main-description .paragraph-3 {
        font-size: 1.125rem; }
        .section-2 .banana-main-description .paragraph-3 span {
          font-size: 1.5rem; } }
  .section-2 .bg-circle {
    z-index: 6;
    width: 70%;
    aspect-ratio: 1;
    background: linear-gradient(360deg, rgba(253, 192, 65, 0) 0%, #FDC041 60.33%, #DEA841 100%);
    border-radius: 50%;
    top: 5%;
    position: absolute; }
    .section-2 .bg-circle-left {
      left: -50%; }
    .section-2 .bg-circle-right {
      right: -50%; }
    @media (min-width: 1128px) {
      .section-2 .bg-circle {
        top: 3%;
        width: 60%; }
        .section-2 .bg-circle-left {
          left: -40%; }
        .section-2 .bg-circle-right {
          right: -40%; } }

.section-3 {
  position: relative;
  display: flex;
  overflow: hidden; }
  .section-3 .compare-banana-type {
    position: relative;
    width: 100%; }
  .section-3 .item {
    padding: 7rem 0;
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
    text-align: center; }
    .section-3 .item .name {
      text-align: left;
      position: absolute;
      top: 1.5rem;
      color: #FFF;
      pointer-events: none; }
      .section-3 .item .name div {
        font-weight: 900;
        font-size: 1.25rem; }
    .section-3 .item img {
      width: 80%;
      display: block;
      position: relative; }
  .section-3 .item-1 {
    background: url("../images/section3/bg-left.png"), url("../images/section3/bg-right.png"), url("../images/section3/bg-item.webp");
    background-size: 40% ,40%,100% 100%;
    background-repeat: no-repeat;
    background-position: top left  , top right , center;
    position: absolute;
    top: 0;
    left: 0;
    clip-path: inset(0 50% 0 0);
    z-index: 2; }
    .section-3 .item-1 .name {
      left: 1rem; }
    @media (min-width: 768px) {
      .section-3 .item-1 {
        background-size: 30% ,30%,100% 100%; } }
  .section-3 .item-2 {
    background: url("../images/section3/bg-left.png"), url("../images/section3/bg-right.png"), url("../images/section3/bg-item2.webp");
    background-size: 40% ,40%,100% 100%;
    background-repeat: no-repeat;
    background-position: top left , top right , center; }
    @media (min-width: 768px) {
      .section-3 .item-2 {
        background-size: 30% ,30%,100% 100%; } }
    .section-3 .item-2 .name {
      right: 1rem; }
  .section-3 .detail {
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.5rem;
    font-size: .75rem;
    padding: 0 .75rem;
    width: 100%;
    font-weight: 300; }
  .section-3 .handle {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid #FFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5; }
    .section-3 .handle::before, .section-3 .handle:after {
      content: "";
      display: block;
      width: 3px;
      height: 9999px;
      left: 50%;
      margin-left: -1.5px;
      background-color: #FFF;
      position: absolute;
      bottom: 2.25rem;
      pointer-events: none; }
    .section-3 .handle:after {
      top: 2.25rem; }
    .section-3 .handle .left-arrow {
      position: absolute;
      z-index: 3;
      width: 10px;
      left: .25rem; }
    .section-3 .handle .right-arrow {
      position: absolute;
      z-index: 3;
      right: .25rem;
      width: 10px; }
  @media (min-width: 768px) {
    .section-3 .item {
      padding: 10rem 0 9rem; }
      .section-3 .item .name {
        font-size: 1.875rem;
        top: 5%;
        left: 5%; }
        .section-3 .item .name div {
          font-size: 2.5rem; }
      .section-3 .item img {
        width: 60%; }
      .section-3 .item-2 .name {
        right: 5%; }
    .section-3 .detail {
      font-size: 1rem;
      padding: 0 .75rem 1rem; }
    .section-3 .handle {
      width: 4rem;
      height: 4rem; }
      .section-3 .handle .left-arrow, .section-3 .handle .right-arrow {
        width: 18px; }
      .section-3 .handle:before {
        bottom: 3.85rem; }
      .section-3 .handle:after {
        top: 3.85rem; } }
  @media (min-width: 1128px) {
    .section-3 .item {
      padding: 10rem 0 12rem; }
      .section-3 .item .name {
        font-size: 1.875rem;
        top: 50%;
        transform: translateY(-50%);
        left: 15%; }
        .section-3 .item .name div {
          font-size: 2.5rem; }
      .section-3 .item img {
        width: 30rem; }
      .section-3 .item-2 .name {
        right: 15%; }
    .section-3 .detail {
      font-size: 1.125rem;
      padding: 0 .75rem 1rem; } }

.section-5 {
  position: relative;
  padding: 3rem 0; }
  @media (min-width: 1128px) {
    .section-5 {
      padding: 5rem 0; } }
  .section-5 .bg-circle-left {
    position: absolute;
    top: 0;
    left: -25%;
    width: 65%;
    z-index: -1;
    max-width: 25rem; }
    @media (min-width: 1128px) {
      .section-5 .bg-circle-left {
        left: 0; } }
  .section-5 .title,
  .section-5 .subtitle {
    font-family: 'bsruban';
    font-weight: 900; }
  .section-5 .title {
    color: #F6C80D;
    font-size: 2.5rem; }
    @media (min-width: 1128px) {
      .section-5 .title {
        font-size: 2.8rem; } }
  .section-5 .subtitle {
    font-size: .875rem; }
    @media (min-width: 768px) {
      .section-5 .subtitle {
        font-size: 1rem; } }
    @media (min-width: 1128px) {
      .section-5 .subtitle {
        font-size: 1.375rem; } }
  .section-5 .banana-wrapper .banana-nutrient {
    position: relative; }
    .section-5 .banana-wrapper .banana-nutrient .banana-image {
      position: relative;
      left: -3rem; }
    .section-5 .banana-wrapper .banana-nutrient .banana-description {
      background-color: #FFF;
      border-radius: 3rem;
      position: absolute;
      display: inline-block;
      padding: .75rem 1rem;
      font-weight: 600;
      z-index: 3;
      font-size: .875rem;
      top: 45%;
      left: 8%;
      transition: all .3s; }
    .section-5 .banana-wrapper .banana-nutrient .nutrient-item {
      position: absolute;
      background-color: #FFF;
      display: flex;
      align-items: center;
      font-weight: 500;
      gap: .5rem;
      box-shadow: 4px 4px 16px 0px #00000029;
      border-radius: 3rem;
      padding: .3rem .5rem .3rem .3rem;
      z-index: 2;
      font-size: .875rem;
      transition: all .3s;
      pointer-events: none; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item .icon {
        width: 1.5rem; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item .name {
        color: #F6C80D; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item .unit {
        display: none;
        font-weight: 300; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-1 {
        left: 47%; }
        .section-5 .banana-wrapper .banana-nutrient .nutrient-item-1 .unit {
          display: block; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-2 {
        left: 59%;
        top: 13%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-3 {
        left: 67%;
        top: 26%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-4 {
        left: 69%;
        top: 39%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-5 {
        left: 72%;
        top: 52%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-6 {
        left: 66%;
        top: 65%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-7 {
        left: 61%;
        top: 78%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-8 {
        left: 53%;
        top: 91%; }
  .section-5 .banana-wrapper .nav-ripeness-level {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .5rem; }
    .section-5 .banana-wrapper .nav-ripeness-level .nav-item .nav-link {
      white-space: nowrap;
      border-radius: 3rem;
      background-color: #D7E5EC;
      color: #102C37;
      font-size: .875rem; }
      .section-5 .banana-wrapper .nav-ripeness-level .nav-item .nav-link:hover, .section-5 .banana-wrapper .nav-ripeness-level .nav-item .nav-link.active {
        background-color: #F6C80D;
        color: #FFF; }
  .section-5 .banana-wrapper .tab-content p {
    font-size: .875rem; }
  .section-5 .banana-wrapper .tab-content .image {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto; }
  @media (min-width: 768px) {
    .section-5 .banana-wrapper {
      display: grid;
      grid-template-columns: 55% 45%;
      align-items: center; } }
  @media (min-width: 1128px) {
    .section-5 .banana-wrapper {
      padding-left: calc((100% - 1200px) / 2);
      padding-right: calc((100% - 1200px) / 2); }
      .section-5 .banana-wrapper .banana-nutrient .banana-description {
        left: 15%;
        font-size: 1rem; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item .name {
        white-space: nowrap; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item .unit {
        display: block;
        white-space: nowrap; }
      .section-5 .banana-wrapper .tab-content .image {
        margin-top: 1rem;
        max-width: 90%; } }
  @media (min-width: 1440px) {
    .section-5 .banana-wrapper .banana-nutrient .nutrient-item {
      padding: .5rem; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-1 {
        left: 67%;
        top: 10%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-2 {
        left: 74%;
        top: 21%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-3 {
        left: 76%;
        top: 31%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-4 {
        left: 80%;
        top: 42%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-5 {
        left: 78%;
        top: 53%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-6 {
        left: 74%;
        top: 64%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-7 {
        left: 69%;
        top: 75%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item-8 {
        left: 64%;
        top: 85%; }
    .section-5 .banana-wrapper .banana-ripeness-level {
      padding-left: 5%; }
      .section-5 .banana-wrapper .banana-ripeness-level h3 {
        font-size: 1.5rem; } }
  @media screen and (min-width: 1600px) {
    .section-5 .banana-wrapper {
      padding-left: calc((100% - 1600px) / 2 + 0.75rem);
      padding-right: calc((100% - 1600px) / 2 + 0.75rem);
      grid-template-columns: 55% 40%; }
      .section-5 .banana-wrapper .banana-nutrient .nutrient-item .name {
        font-size: 1.125rem; } }

.section-6 {
  position: relative; }
  @media (min-width: 1128px) {
    .section-6 {
      background-image: url("../images/section6/bg-tree.webp");
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: top; } }
  .section-6 .title {
    font-family: "bsruban";
    font-size: 1.5rem;
    font-weight: 900; }
    @media (min-width: 1128px) {
      .section-6 .title {
        font-size: 2.25rem; } }
  .section-6 .subtitle {
    font-size: .75rem; }
    @media (min-width: 768px) {
      .section-6 .subtitle {
        font-size: .875rem; } }
    @media (min-width: 1128px) {
      .section-6 .subtitle {
        font-size: 1.125rem; } }
  @media (min-width: 768px) {
    .section-6 .banana-yield {
      max-width: 40rem;
      margin-left: auto;
      margin-right: auto; }
      .section-6 .banana-yield h4 {
        font-size: 1.125rem; }
      .section-6 .banana-yield .table-health-value {
        max-width: 33rem;
        margin-left: auto;
        margin-right: auto; } }
  .section-6 .compare-banana-tree {
    display: flex;
    align-items: flex-end; }
    @media (max-width: 575.98px) {
      .section-6 .compare-banana-tree {
        margin-left: -.75rem;
        margin-right: -.75rem; } }
    .section-6 .compare-banana-tree .item {
      position: relative; }
      .section-6 .compare-banana-tree .item .label {
        position: absolute;
        border-radius: 3rem;
        background-color: #FFF;
        color: #449634;
        font-weight: 300;
        font-size: .75rem;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        white-space: nowrap;
        padding: .35rem;
        z-index: 3; }
      .section-6 .compare-banana-tree .item .name {
        background-color: #000;
        color: #FFF;
        font-weight: 300;
        font-size: .75rem;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
        padding: .35rem;
        border-radius: .5rem; }
    @media (min-width: 768px) {
      .section-6 .compare-banana-tree {
        max-width: 40rem;
        margin-left: auto;
        margin-right: auto; }
        .section-6 .compare-banana-tree .item .label {
          font-size: 1rem; }
        .section-6 .compare-banana-tree .item .name {
          font-size: 1rem;
          padding: .5rem .75rem; } }
  .section-6 .banana-planting {
    padding-bottom: 4rem; }
    .section-6 .banana-planting h5 {
      font-size: 1.125rem; }
    .section-6 .banana-planting p {
      font-size: .75rem; }
    .section-6 .banana-planting .detail {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      gap: .5rem; }
      .section-6 .banana-planting .detail .item {
        background-color: #FFF;
        border-radius: 3rem;
        color: #67A626;
        display: inline-flex;
        box-shadow: 4px 4px 16px 0px #00000029;
        align-items: center;
        padding: .35rem .5rem;
        font-size: .875rem;
        gap: .5rem; }
    @media (min-width: 768px) {
      .section-6 .banana-planting h5 {
        font-size: 1.5rem; }
      .section-6 .banana-planting p {
        font-size: 1rem; }
      .section-6 .banana-planting .detail .item {
        font-size: 1rem; } }
    @media (min-width: 1128px) {
      .section-6 .banana-planting-wrapper {
        display: grid;
        grid-template-columns: 60% 40%;
        align-items: flex-start; }
      .section-6 .banana-planting h5 {
        font-size: 2rem; }
      .section-6 .banana-planting .detail {
        align-items: flex-start;
        margin-left: -.5rem; }
        .section-6 .banana-planting .detail .item {
          padding: .5rem 1rem .5rem .5rem; }
          .section-6 .banana-planting .detail .item h5 {
            font-size: 1.125rem; }
          .section-6 .banana-planting .detail .item:not(:first-child) {
            margin-left: 2rem; } }

.section-7 {
  position: relative;
  background-image: url("../images/section7/bg-mobile.webp");
  background-size: 120% 100%;
  background-position: center;
  padding: 3rem 0; }
  .section-7 .item .title {
    font-size: 1.375rem;
    font-weight: 500;
    color: #F6C80D;
    margin-bottom: .5rem; }
    @media (min-width: 768px) {
      .section-7 .item .title {
        font-size: 1.25rem; } }
    @media (min-width: 992px) {
      .section-7 .item .title {
        font-size: 1.5rem; } }
  .section-7 .item p {
    max-width: 80%; }
  .section-7 .item .image {
    text-align: center;
    margin-top: 2rem;
    max-width: 60%;
    margin-left: auto;
    margin-right: auto; }
    .section-7 .item .image img {
      max-width: 100%; }
    @media (min-width: 768px) {
      .section-7 .item .image {
        max-width: 100%; }
        .section-7 .item .image img {
          height: 15rem; } }
  @media (min-width: 1128px) {
    .section-7 {
      background-image: url("../images/section7/bg.webp");
      background-size: 100% 100%;
      padding: 7rem 0; }
      .section-7 .item .title {
        font-size: 2rem; }
      .section-7 .item p {
        max-width: 100%; }
      .section-7 .item .image {
        margin-top: 3rem; }
        .section-7 .item .image img {
          max-height: 12rem; } }

.section-8 {
  position: relative;
  background-image: url("../images/section8/bg-mobile.webp");
  background-size: 120% 100%;
  background-position: center;
  padding: 3rem 0;
  margin-top: -2rem;
  z-index: 2; }
  @media (min-width: 768px) {
    .section-8 {
      background-image: url("../images/section8/bg-desktop.webp");
      background-size: 150% 100%;
      padding: 5rem 0;
      background-position: center; } }
  .section-8 .title {
    font-weight: 500; }
    @media (min-width: 768px) {
      .section-8 .title {
        font-size: 1.25rem; } }
    @media (min-width: 1128px) {
      .section-8 .title {
        font-size: 1.875rem; } }
  .section-8 .card {
    border: 0;
    padding: .75rem 1rem;
    border-radius: 1rem; }
    .section-8 .card-title {
      display: grid;
      grid-template-columns: 2.5rem auto;
      border-bottom: 1px dashed #A8A8A8;
      align-items: center;
      gap: .5rem;
      padding-bottom: .5rem;
      font-weight: 600; }
      .section-8 .card-title .name div {
        font-size: .87rem;
        font-weight: 400; }
    .section-8 .card .card-body ul {
      list-style-type: none;
      padding-left: 2.5rem;
      margin-bottom: 0; }
      .section-8 .card .card-body ul li {
        cursor: pointer; }
      .section-8 .card .card-body ul li:not(:last-child) {
        margin-bottom: .25rem; }
    .section-8 .card-gi .card-title {
      color: #C9980F; }
    .section-8 .card-other .card-title {
      color: #065335; }
    @media (min-width: 1128px) {
      .section-8 .card {
        max-width: 70%;
        margin-left: 5%; }
        .section-8 .card-title {
          font-size: 1.25rem; } }

.section-9 {
  position: relative; }
  .section-9 .title {
    font-size: 2rem;
    font-weight: 500;
    color: #F6C80D;
    margin-bottom: .5rem; }
  .section-9 .table-health-value .table-row-head {
    gap: .35rem; }
    .section-9 .table-health-value .table-row-head .item {
      padding: 0; }
      .section-9 .table-health-value .table-row-head .item > div {
        font-size: .75rem;
        padding: .5rem 0; }
  .section-9 .container {
    position: relative;
    z-index: 3; }
  @media (min-width: 768px) {
    .section-9 {
      padding: 2rem 0 0; }
      .section-9 .bg-image {
        position: absolute;
        bottom: .5rem;
        left: 0;
        z-index: 1;
        max-width: 55% !important; }
      .section-9 .table-health-value .table-row-head {
        gap: .5rem; }
        .section-9 .table-health-value .table-row-head .item {
          font-size: .875rem;
          padding: .5rem 0; } }
  @media (min-width: 1128px) {
    .section-9 {
      padding: 0 0 3rem; }
      .section-9 .title + p {
        font-size: 1.125rem; }
      .section-9 .bg-image {
        max-width: 50% !important;
        position: relative; }
      .section-9 .table-column {
        position: absolute;
        right: 0;
        top: 4rem; }
      .section-9 .table-health-value .table-row-head {
        gap: 1rem; }
        .section-9 .table-health-value .table-row-head .item div {
          padding: .5rem 1rem;
          font-size: 1rem; } }
  @media screen and (min-width: 1600px) {
    .section-9 {
      padding: 0; } }

.section-10 {
  background-image: url("../images/section10/bg-mobile.webp");
  background-size: 100% 95%;
  background-position: center;
  background-repeat: no-repeat; }
  @media (min-width: 768px) {
    .section-10 {
      background-image: url("../images/section10/bg-desktop.webp"); } }
  .section-10 .title {
    color: #FDC041;
    background-color: #000;
    border-radius: .5rem;
    padding: .5rem;
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    margin-top: 2rem; }
    @media (min-width: 1128px) {
      .section-10 .title {
        font-size: 1.875rem;
        margin-bottom: 5rem;
        margin-top: 0; } }
  .section-10 .item {
    position: relative;
    display: grid;
    grid-template-columns: 50% 40%;
    align-items: center;
    margin-bottom: 1rem;
    justify-content: center; }
    .section-10 .item .image {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center; }
      .section-10 .item .image .number {
        position: relative;
        z-index: 2;
        height: 4.5rem;
        left: 1rem; }
        .section-10 .item .image .number img {
          height: 100%; }
        @media (min-width: 768px) {
          .section-10 .item .image .number {
            position: absolute;
            left: 0rem;
            height: 3.5rem; } }
        @media (min-width: 1128px) {
          .section-10 .item .image .number {
            left: -1rem;
            height: 4.5rem; } }
      .section-10 .item .image .flag-image {
        width: 9rem;
        background-color: #FFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        font-size: 2rem;
        font-weight: 500; }
        @media (min-width: 768px) {
          .section-10 .item .image .flag-image {
            margin-left: .75rem;
            font-size: 1.25rem; } }
        @media (min-width: 1128px) {
          .section-10 .item .image .flag-image {
            font-size: 2rem; } }
    .section-10 .item .detail {
      padding-left: 1rem; }
      @media (min-width: 768px) {
        .section-10 .item .detail {
          padding-left: .5rem; } }
      .section-10 .item .detail .name {
        font-weight: 500;
        margin-bottom: .5rem; }
        @media (min-width: 768px) {
          .section-10 .item .detail .name {
            font-size: 1rem;
            white-space: nowrap; } }
        @media (min-width: 1128px) {
          .section-10 .item .detail .name {
            font-size: 1.25rem; } }
      .section-10 .item .detail .value {
        background-color: #FFF;
        border-radius: 3rem;
        font-size: 1.25rem;
        color: #449634;
        box-shadow: 4px 4px 16px 0px #00000029;
        display: inline-block;
        text-align: center;
        padding: .25rem 1.5rem; }
        @media (min-width: 768px) {
          .section-10 .item .detail .value {
            white-space: nowrap; } }
  .section-10 .export-detail {
    background-color: #FFFF;
    padding: 2.5rem 1.25rem;
    text-align: center;
    border-radius: 1rem;
    position: relative;
    font-size: .875rem; }
    @media (min-width: 768px) {
      .section-10 .export-detail {
        font-size: 1rem;
        padding: 2.5rem; } }
    @media (min-width: 1128px) {
      .section-10 .export-detail {
        padding: 2.5rem 5rem; } }
    .section-10 .export-detail .title {
      position: absolute;
      top: -3rem;
      transform: rotate(-10deg);
      left: -.5rem;
      background-color: #F6C80D;
      color: #FFF; }
      @media (min-width: 768px) {
        .section-10 .export-detail .title {
          font-size: 1.5rem;
          font-weight: 600;
          left: -1rem;
          top: -3rem; } }
      @media (min-width: 1128px) {
        .section-10 .export-detail .title {
          font-size: 1.875rem;
          left: -1.5rem; } }
    .section-10 .export-detail .export-guideline-title {
      background-color: #F6C80D;
      color: #FFF;
      border-radius: 5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem 0;
      font-size: .875rem; }
      .section-10 .export-detail .export-guideline-title img {
        display: inline-block;
        cursor: pointer;
        width: 1.25rem; }
      @media (min-width: 768px) {
        .section-10 .export-detail .export-guideline-title {
          display: inline-flex;
          padding: .75rem 1.5rem;
          font-size: 1rem; } }
      @media (min-width: 1128px) {
        .section-10 .export-detail .export-guideline-title {
          font-size: 1.125rem;
          padding: .75rem 2.5rem; } }

.section-11 .export-procedures .main-title {
  color: #FDC041;
  background-color: #000;
  border-radius: .5rem;
  padding: .5rem;
  display: inline-block;
  margin-bottom: 1.5rem;
  font-size: 1.25rem;
  font-weight: 600; }
  @media (min-width: 768px) {
    .section-11 .export-procedures .main-title {
      font-size: 1.5rem;
      margin-bottom: 0rem;
      position: relative;
      top: 4rem; } }
  @media (min-width: 1128px) {
    .section-11 .export-procedures .main-title {
      font-size: 2rem; } }

.section-11 .export-procedures-image {
  position: relative;
  display: inline-block; }
  .section-11 .export-procedures-image .item {
    position: absolute;
    transition: all .3s;
    cursor: pointer; }
    .section-11 .export-procedures-image .item .title {
      display: inline-flex;
      gap: .5rem;
      align-items: center;
      background-color: #FFF;
      border-radius: 3rem;
      box-shadow: 4px 4px 16px 0px #00000029;
      padding: .35rem .75rem .35rem .35rem;
      font-size: .875rem;
      position: relative;
      z-index: 2;
      color: #F6C80D; }
      .section-11 .export-procedures-image .item .title-green {
        color: #449634 !important; }
    .section-11 .export-procedures-image .item .content {
      background-color: #FFF;
      border-radius: .75rem;
      padding: 1rem 1.5rem 0rem .25rem;
      font-size: .75rem;
      position: absolute;
      white-space: nowrap;
      top: -rem;
      margin-top: -.75rem;
      left: 1rem;
      opacity: 0;
      pointer-events: none;
      transition: all .3s; }
      .section-11 .export-procedures-image .item .content ul {
        padding-left: 1.5rem; }
    .section-11 .export-procedures-image .item:hover {
      z-index: 99; }
      .section-11 .export-procedures-image .item:hover .content {
        opacity: 1;
        transition: all .3s; }
    .section-11 .export-procedures-image .item-1 {
      top: 17%;
      left: 10%; }
    .section-11 .export-procedures-image .item-2 {
      top: 22%;
      left: 30%; }
    .section-11 .export-procedures-image .item-3 {
      top: 29%;
      left: 65%; }
    .section-11 .export-procedures-image .item-4 {
      top: 43%;
      left: 12%; }
    .section-11 .export-procedures-image .item-5 {
      top: 80%;
      left: 40%; }
    .section-11 .export-procedures-image .item-6 {
      top: 63%;
      left: 35%; }
    .section-11 .export-procedures-image .item-7 {
      top: 65%;
      left: 68%; }
    @media (min-width: 768px) {
      .section-11 .export-procedures-image .item-1 {
        top: 26%;
        left: 10%; }
      .section-11 .export-procedures-image .item-2 {
        top: 42%;
        left: 17%; }
      .section-11 .export-procedures-image .item-3 {
        top: 41%;
        left: 40%; }
      .section-11 .export-procedures-image .item-4 {
        top: 51%;
        left: 52%; }
      .section-11 .export-procedures-image .item-5 {
        top: 65%;
        left: 68%; }
      .section-11 .export-procedures-image .item-6 {
        top: 47%;
        left: 70%; }
      .section-11 .export-procedures-image .item-7 {
        top: 48%;
        left: 85%; } }
    @media (min-width: 1128px) {
      .section-11 .export-procedures-image .item .title {
        font-size: 1.125rem; }
      .section-11 .export-procedures-image .item .content {
        font-size: .875rem; } }

.section-11 .export-procedures-detail {
  position: relative;
  z-index: 2;
  margin-top: -2rem;
  background-color: #FFF;
  border-radius: 1rem;
  padding: 1.25rem 1rem; }
  .section-11 .export-procedures-detail .title {
    font-size: 1.25rem;
    color: #F6C80D;
    font-weight: 500;
    margin-bottom: .5rem; }
  @media (min-width: 768px) {
    .section-11 .export-procedures-detail {
      max-width: 60%; } }
  @media (min-width: 1128px) {
    .section-11 .export-procedures-detail {
      padding: 2rem; }
      .section-11 .export-procedures-detail .title {
        font-size: 1.875rem; } }

.section-12 {
  position: relative;
  background: url("../images/section12/bg.webp"), linear-gradient(360deg, rgba(253, 192, 65, 0) 0%, #FDC041 50%, #DEA841 100%);
  background-repeat: no-repeat;
  background-position: top center, bottom center;
  background-size: 100% auto, 100% 70%; }
  @media (min-width: 768px) {
    .section-12 {
      padding: 3rem 0 0rem;
      background: url("../images/section12/bg-desktop.webp"), linear-gradient(360deg, rgba(253, 192, 65, 0) 0%, #FDC041 50%, #DEA841 100%);
      background-position: top center, bottom center;
      background-size: 100% auto, 100% 80%;
      background-repeat: no-repeat; } }
  .section-12 .title {
    background-color: #FCC654;
    color: #FFF;
    display: inline-block;
    font-weight: 600;
    padding: .75rem;
    border-radius: .75rem;
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; }
    @media (min-width: 768px) {
      .section-12 .title {
        font-size: 1.5rem; } }
    @media (min-width: 1128px) {
      .section-12 .title {
        font-size: 2.25rem; } }
  .section-12 .quiz-container {
    position: relative; }
  .section-12 .swiper-slide .quiz-slide {
    backface-visibility: hidden;
    padding: 1.25rem 0 0;
    min-width: 100%;
    scroll-snap-align: start;
    transition: transform .3s;
    display: flex;
    flex-flow: column;
    justify-content: center; }
    .section-12 .swiper-slide .quiz-slide.correct .banana-info .banana-image img {
      opacity: 1;
      transition: all .3s; }
    .section-12 .swiper-slide .quiz-slide.correct .banana-info .name {
      display: block;
      transition: all .3s; }
    .section-12 .swiper-slide .quiz-slide.correct .banana-info p {
      display: block;
      transition: all .3s; }
  .section-12 .swiper-slide .banana-info {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem; }
    .section-12 .swiper-slide .banana-info .image-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 12rem; }
      .section-12 .swiper-slide .banana-info .image-wrapper .banana-image {
        height: 10rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
        .section-12 .swiper-slide .banana-info .image-wrapper .banana-image img {
          height: 10rem;
          opacity: 0; }
        @media (min-width: 1128px) {
          .section-12 .swiper-slide .banana-info .image-wrapper .banana-image {
            height: 12rem; }
            .section-12 .swiper-slide .banana-info .image-wrapper .banana-image img {
              height: 12rem; } }
        @media screen and (min-width: 1600px) {
          .section-12 .swiper-slide .banana-info .image-wrapper .banana-image {
            height: 15rem; }
            .section-12 .swiper-slide .banana-info .image-wrapper .banana-image img {
              height: 15rem; } }
      .section-12 .swiper-slide .banana-info .image-wrapper .banana-image-main {
        height: 12rem;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
        .section-12 .swiper-slide .banana-info .image-wrapper .banana-image-main img {
          height: 12rem;
          opacity: 0; }
        @media (min-width: 1128px) {
          .section-12 .swiper-slide .banana-info .image-wrapper .banana-image-main {
            height: 16rem; }
            .section-12 .swiper-slide .banana-info .image-wrapper .banana-image-main img {
              height: 16rem; } }
        @media screen and (min-width: 1600px) {
          .section-12 .swiper-slide .banana-info .image-wrapper .banana-image-main {
            height: 20rem; }
            .section-12 .swiper-slide .banana-info .image-wrapper .banana-image-main img {
              height: 20rem; } }
      @media (min-width: 1128px) {
        .section-12 .swiper-slide .banana-info .image-wrapper {
          height: 16rem; } }
      @media screen and (min-width: 1600px) {
        .section-12 .swiper-slide .banana-info .image-wrapper {
          height: 20rem; } }
    .section-12 .swiper-slide .banana-info .name {
      display: none;
      margin-bottom: .5rem; }
      @media (min-width: 768px) {
        .section-12 .swiper-slide .banana-info .name {
          font-size: 1.125rem; } }
      @media (min-width: 1128px) {
        .section-12 .swiper-slide .banana-info .name {
          font-size: 1.5rem; } }
    .section-12 .swiper-slide .banana-info p {
      width: 50%;
      font-size: .875rem;
      transition: all .3s;
      display: none; }
      @media (min-width: 1128px) {
        .section-12 .swiper-slide .banana-info p {
          font-size: 1rem; } }
  .section-12 .quiz-arrow {
    top: 60%;
    transform: translateY(-50%);
    position: absolute;
    z-index: 5; }
    .section-12 .quiz-arrow--left {
      left: 1rem; }
    .section-12 .quiz-arrow--right {
      right: 1rem; }
  .section-12 .quiz-control .form-control {
    width: 70%;
    border: 0;
    border-radius: 3rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 15rem;
    display: none; }
    .section-12 .quiz-control .form-control::placeholder {
      color: #414042;
      font-size: .875rem;
      text-align: center; }
    @media (min-width: 768px) {
      .section-12 .quiz-control .form-control {
        padding: 1rem .75rem;
        font-size: 1rem; }
        .section-12 .quiz-control .form-control::placeholder {
          font-size: 1rem; } }
  .section-12 .quiz-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #424242;
    font-size: 1.5rem;
    gap: .5rem;
    padding-bottom: 3rem; }
    .section-12 .quiz-pagination #current {
      font-size: 2rem; }
  .section-12 .logo-doae img {
    max-width: 8rem; }