.hero-section {
  position: relative;
  height: 230px;
  overflow: hidden;
}

.pricing-menu-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 1;
    height: 210px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    mix-blend-mode: luminosity;
    z-index: -1;
}

.pricing-menu-bg::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 56, 0, 0.400)
    ;
}
.hero-content{
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumbs{
   padding-top: 100px;
  }


  .breadcrumbs ul,
  .breadcrumbs ul li a{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .breadcrumbs ul{
    list-style-type: none;
    height: 100%;
    align-items: center;
    justify-content: left;
    font-family: 'Outfit';
    align-items: center;
  }

  .breadcrumbs ul li{
    margin-right: 15px;
    position: relative;
  }

  .breadcrumbs .separator{
    color: #ffff;
    font-family: 'Outfit';
  }

  .separator{
    font-family: 'Outfit';
  }

  .wrapper ul li:before{
    content: ">";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -20px;
    color: #ffff;
    font-family: 'Outfit';
  }

  .wrapper ul li:last-child:before{
    display: none;
  }

  .breadcrumbs ul li a{
    align-items: baseline;
    color: #ffff;
  }

  .breadcrumbs ul li a .icon{
    margin-right: 5px;
  }

  .breadcrumbs ul li a p{
    font-size: 12px;
  }

  .breadcrumbs ul li.active a{
    color: #F54F00;
  }

  .hero-center-text {
    text-align: center;

  }

  .hero-center-text h1 {
    font-size: 3rem;
    color: #ffff;
    font-weight: 600;
    font-family: 'Outfit';
  }

  .benefit-section {
    padding: 50px;
    background-color: #f5f5f5;
    text-align: center;
}

.two.alt-two h1 {
    font-size: 36px;
    margin-bottom: 30px;
}


.swiper-slide{
    height: 500px;
}

.benefit-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-container {
    width: 100%;
    height: 250px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.swiper-slide-partnership{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.slide-content {
    height: 250px;
    font-weight: 350px;
    border-radius: 15px;
    background-color: transparent;
    border: 2px solid #F54F00;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 0;
}

.swiper-pagination-bullet-active {
    background-color: #3A563A;
  }

.slide-logo img {
    max-width: 100px;
    height: auto;
    margin-bottom: 15px;
}

.slide-title h2 {
    font-size: 20px;
    margin-bottom: 10px;
    font-family: 'Outfit';
    color: #3A563A;
}

.slide-description p {
    font-size: 14px;
    max-width: 380px;
    margin-bottom: 0;
    font-family: 'Outfit';
    color: #F54F00;
}

.map-content-partnership {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding-bottom: 10px;
    overflow: hidden;
}

.map-left-partnership {
    position: relative;
}

.map-left-partnership img{
    width: 450px;
    height: auto;
}

.map-right-partnership{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.map-right-partnership img{
    width: 200px;
    height: auto;
    padding-bottom: 20px;
}

.pin {
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #F54F00;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 128, 0, 0.5);
    transform: translate(-50%, -50%);
    animation: bounce 2s infinite ease-in-out;
}

.two.alt-two h2{
    color: #3A563A;
    font-family: 'Outfit';
}

.two.alt-two li{
    font-family: 'Outfit';
    color: #3A563A;
}

.whats-your-role {
    background-color: #E8E0C6;
    display: flex;
    position: relative;
    overflow: hidden;
    height: 350px;
    margin-bottom: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.whats-your-role .sgp-role-1{
    width: 1600px;
    position: absolute;
    top: 0;
    opacity: 0.15;
    z-index: 1;
}

.whats-your-role .sgp-role-2{
    width: 1600px;
    position: absolute;
    bottom: 0;
    opacity: 0.15;
    z-index: 1;
}


.bg-one{
    position: absolute;
    top: 0;
    opacity: 0.2;
    left: 0;
    height: 92px;
    width: 100vw;
    background-repeat: repeat;
    background-size: contain;
}

.bg-two{
    position: absolute;
    bottom: 0;
    opacity: 0.1;
    left: 0;
    height: 92px;
    width: 100vw;
    background-repeat: repeat;
    background-size: contain;
    z-index: -1;
}

.role-section {
    max-width: 1200px;
    width: 100%;
    display: flex;
    z-index: 2;
    justify-content: center;
}

.role-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #F54F00;
    color: white;
    border: none;
    font-family: 'Outfit';
    border-radius: 5px;
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.3s;
}

.role-buttons:hover {
    background-color: #3A563A;
}

.your-role {
    height: auto;
    overflow: hidden;
    display: flex;
    padding: 0;
    flex-direction: column;
}

.role-container{
    background-color: #E8DFC5;
    display: flex;
    justify-content: center;
    padding-top: 0;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

.role-button-container{
    display: flex;
}

.role-content{
    margin: 0 auto;
    max-width: 1200px;
    justify-content: center;
    align-items: center;
}

.two {
    margin-bottom: 20px;
}

.role-button {
    margin: 10px;
    padding: 10px 0;
    border: none;
    font-size: 20px;
    border-radius: 5px;
    font-family: 'Outfit';
    background-color: transparent;
    color: #F54F00;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.role-button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #3A563A;
    transform: scaleX(0);
    transition: transform 0.3s;
}

.role-button:hover::after,
.role-button:focus::after,
.role-button.active::after {
    transform: scaleX(1);
}

/* Tes 1 */

.contents {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-align: center; /* Pastikan teks atau elemen di dalam konten rata tengah */
    box-sizing: border-box; /* Agar padding tidak memengaruhi ukuran kontainer */
}


    .partnership-process-role {
        padding-bottom: 50px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }



    .process-steps {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        position: relative;

    }

    .step-line {
        position: absolute;
        top: 31%;
        width: calc(100%);
        height: 3px;
        background-color: #F54F00;
        z-index: 1;
    }


    .step {
      width: 200px;
      text-align: center;
      margin: 20px;
      position: relative;
      z-index: 1;
  }
  
  .step .icon {
      background: radial-gradient(#92ce92, #6e886e, #3A563A);
      border-radius: 50%;
      border: 3px solid #F54F00;
      width: 150px;
      height: 150px;
      display: flex;
      font-family: 'Outfit';
      align-items: center;
      justify-content: center;
      margin: 0 auto 10px;
      font-size: 20px;
      color: #3A563A;
  }
  
  .step h3 {
      font-family: 'Outfit';
      font-size: 20px;
      color: #3A563A;
      margin: 10px 0;  /* Top and bottom margin */
      line-height: 1.4; /* Line height for better spacing */
  }
  
  .step p {
      font-family: 'Outfit';
      font-size: 14px;
      color: #333;
      margin: 0; /* Remove top margin */
      line-height: 1.5; /* Consistent line height for better readability */
      padding: 0; /* No padding for paragraph */
  }
  
  /* Adjust the overall height of .step for visual balance */
  .step {
      padding-bottom: 20px; /* Add some padding below to ensure space */
      min-height: 250px; /* Adjust minimum height as needed for consistent appearance */
  }
  

    .partnership-terms{
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
    }

    .partnership-terms-content{
        padding: 0;
        overflow: hidden;
        padding-bottom: 0;
    }

    .term-card {
        background-color: #ff5722;
        color: white;
        text-align: center;
        position: relative; /* Posisi relatif untuk parent */
        border-radius: 15px;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        padding: 20px;
        width: 300px; /* Tambahkan width agar tidak ada konflik ukuran */
        height: 200px; /* Sesuaikan tinggi */
        margin-bottom: 15px;
    }

    .term-card::before {
        content: '';
        position: absolute;
        top: 15px; /* Atur jarak garis */
        right: 10px;
        width: calc(110% - 20px); /* Garis mengitari konten */
        height: calc(110% - 20px); /* Sesuaikan jarak tepi */
        border: 2px solid #F54F00; /* Warna border sama dengan background */
        border-radius: 15px; /* Border melingkari */
        z-index: -1; /* Di belakang konten */
        transform: rotate(-5deg); /* Kemiringan garis */
    }


    .circle {
        background-color: #ccc;
        border-radius: 50%;
        margin-bottom: 20px;
        width: 50px;
        height: 50px;
        top: 20px;
        font-family: 'Outfit';
    }

    .term-card h3 {
        margin: 10px 0;
        font-size: 1.5em;
        font-family: 'Outfit';
    }

    .term-card p {
        font-size: 0.9em;
        font-family: 'Outfit';
    }

    .cta-role-apply {
        display: flex;
        align-items: center;
        justify-content: center; /* Center horizontally */
        flex-direction: column; /* Stack content vertically */
        padding: 40px;
        background-color: #3A563A;
        justify-content: space-around;
        width: 100vw; /* Kurangi sedikit dari lebar viewport untuk menghindari overflow */
        height: 225px;
        overflow: hidden;
        box-sizing: border-box; /* Pastikan padding dihitung dalam lebar */
        margin: 0; /* Hilangkan margin */
    }


      .cta-content-row{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        max-width: 1200px;
        margin: 0 auto;
      }

      .cta-content {
        flex: 3;
        margin-right: 50px;
      }


      .cta-content h1 {
        font-size: 36px;
        margin-bottom: 10px;
        color: white;
        font-family: 'Outfit';
        font-weight: 600;
      }

      .cta-content p {
        font-size: 18px;
        line-height: 1.5;
        font-family: 'Outfit';
        font-weight: 200;
        color: white;
    }

      .cta-button {
        max-width: 100%;
      }

      .cta-button .btn-apply {
        background-color: #F54F00;
        color: white;
        font-family: 'Outfit';
        padding: 15px 30px;
        text-transform: uppercase;
        font-weight: bold;
        text-decoration: none;
        border-radius: 5px;
        transition: background-color 0.3s ease;
      }

      .cta-button .btn-apply:hover {
        background-color: #E8DFC5;
        color: #3A563A;
      }

      .quiz-section {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
        height: 298px;
        background-color: #E8E0C6;
    }

    #quizSection.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #E8E0C6;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 2000;
    }


    #quizSection.fullscreen .quiz-section {
        height: 550px;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;

    }

    #quizSection.fullscreen .quiz-section .left {
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        justify-content: center;
        text-align: center;
        align-items: center;
        display: flex;
    }

    #quizSection.fullscreen .quiz-section .left:has(.form-multi) {
      flex-direction: column;
      gap: 1em;
  }

    #quizSection.fullscreen .quiz-section .right {
        width: 50%;
        text-align: center;
    }

    #quizSection.fullscreen .quiz-section img {
        max-width: 50%;
    }

    #quizSection.fullscreen #questionText {
        font-size: 2rem;
        font-family: 'Outfit';
        font-weight: 600;
        color: #3A563A;
        margin-bottom: 15px ;

    }


    #quizSection.fullscreen .answer {
        background-color: #F54F00;
        border-radius: 100px;
        box-shadow: rgba(245, 79, 0, .2) 0 -25px 18px -14px inset,
                    rgba(245, 79, 0, .15) 0 1px 2px,
                    rgba(245, 79, 0, .15) 0 2px 4px,
                    rgba(245, 79, 0, .15) 0 4px 8px,
                    rgba(245, 79, 0, .15) 0 8px 16px,
                    rgba(245, 79, 0, .15) 0 16px 32px;
        color: #ffff;
        cursor: pointer;
        font-family: 'Outfit';
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        transition: all 250ms;
        border: 0;
        font-size: 1rem;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        width: 500px;
        margin: 20px;
      }

      #quizSection.fullscreen .answer:hover {
        box-shadow: rgba(245, 79, 0, .35) 0 -25px 18px -14px inset,
                    rgba(245, 79, 0, .25) 0 1px 2px,
                    rgba(245, 79, 0, .25) 0 2px 4px,
                    rgba(245, 79, 0, .25) 0 4px 8px,
                    rgba(245, 79, 0, .25) 0 8px 16px,
                    rgba(245, 79, 0, .25) 0 16px 32px;
        transform: scale(1.05) rotate(-1deg);
        font-weight: 600;
      }

      #quizSection.fullscreen .plus {
        background-color: #3A563A;
        border-radius: 100px;
        box-shadow: rgba(58, 86, 58, 0.2) 0 -25px 18px -14px inset,
                    rgba(58, 86, 58, 0.15) 0 1px 2px,
                    rgba(58, 86, 58, 0.15) 0 2px 4px,
                    rgba(58, 86, 58, 0.15) 0 4px 8px,
                    rgba(58, 86, 58, 0.15) 0 8px 16px,
                    rgba(58, 86, 58, 0.15) 0 16px 32px;
        color: #ffff;
        cursor: pointer;
        font-family: 'Outfit';
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
        transition: all 250ms;
        border: 0;
        font-size: 1rem;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        display: inline-block; /* Menyesuaikan lebar dengan konten */
        margin: 5px;
    }
    
    #quizSection.fullscreen .plus:hover {
        box-shadow: rgba(58, 86, 58, 0.35) 0 -25px 18px -14px inset,
                    rgba(58, 86, 58, 0.25) 0 1px 2px,
                    rgba(58, 86, 58, 0.25) 0 2px 4px,
                    rgba(58, 86, 58, 0.25) 0 4px 8px,
                    rgba(58, 86, 58, 0.25) 0 8px 16px,
                    rgba(58, 86, 58, 0.25) 0 16px 32px;
        transform: scale(1.05) rotate(-1deg);
        font-weight: 600;
    }
    



    .hidden {
        display: none !important;
    }

    .pt-30{
        padding-top: 6em;
    }
    .qstart-button{
        padding: 10px 65px;
        border-radius: 10px;
        font-size: 18px;
        background-color: #F54F00;
        color: white;
        font-family: 'Outfit';
        border: none;
        cursor: pointer;
        font-weight: 400;
        transition: background-color 0.5s ease, font-weight 0.5s ease;
    }

    .qstart-button:hover {
        background-color: #3A563A;
        font-weight: 600;
    }
    .startButtonContainer{
        display: flex;
        padding-top: 80px;
        flex-direction: column;
        align-items: center;
    }
    .bg-one-quiz{
        position: absolute;
        top: 0;
        opacity: 1;
        height: 92px;
        width: 100vw;
        opacity: 0.3;
        background-repeat: repeat;
        background-size: contain;
    }
    .bg-two-quiz{
        position: absolute;
        bottom:  0;
        height: 92px;
        opacity: 0.3;
        width: 100vw;
        background-repeat: repeat;
        background-size: contain;
    }
    /* Quiz Form */
    .quiz-form {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 10px;
        width: 50%;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        text-align: left;
        margin-top: 30px;
    }


    .quiz-form h3 {
    color: #F54F00; /* Menggunakan warna #F54F00 */
    font-family: 'Outfit', sans-serif;
    margin-bottom: 20px; /* Menambahkan jarak antara heading dan input pertama */
    }

    .quiz-form label {
        display: block;
        width: 100%;
        margin-bottom: 4px;
    }

    .quiz-form label:nth-of-type(2) {
        margin-top: 12px;
    }

    .quiz-form input {
        font-family: 'Outfit';
        background: #ecf0f3;
        padding: 10px;
        padding-left: 20px;
        height: 50px;
        font-size: 14px;
        border-radius: 50px;
        box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
        border: none;
        outline: none;
        width: 100%;
        box-sizing: border-box;
        margin: 10px 0;
    }

    .quiz-form input::placeholder {
        color: gray;
    }

    .quiz-form button {
        color: white;
        margin-top: 20px;
        background: #F54F00;
        height: 40px;
        font-family: 'Outfit';
        border-radius: 20px;
        cursor: pointer;
        font-weight: 700;
        box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
        transition: 0.5s;
        width: 100%;
    }

    .quiz-form button:hover {
        box-shadow: none;
    }

    .quiz-form a {
        position: absolute;
        font-size: 8px;
        bottom: 4px;
        right: 4px;
        text-decoration: none;
        color: black;
        background: yellow;
        border-radius: 10px;
        padding: 2px;
    }


    .btn-start {
        padding: 10px 20px;
        background-color: #F54F00;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-family: 'Poppins', sans-serif;
        transition: background-color 0.5s ease, font-weight 0.5s ease;
    }

    .btn-start:hover {
        background-color: #3A563A;
    }

    

    .property-address, .input-address, .submit-address {
        display: block;
        width: 100%;
        padding: 0;
        border: none;
        outline: none;
        box-sizing: border-box;
      }

      .property-address {
        margin-bottom: 4px;
        font-family: 'Outfit';
        color: #3A563A;
      }

      .property-address:nth-of-type(2) {
        margin-top: 12px;
      }

      .input-address::placeholder {
        color: gray;
        font-family: 'Outfit';
      }

      .input-address{
        background: #ecf0f3;
        padding: 10px;
        padding-left: 20px;
        height: 50px;
        font-size: 14px;
        border-radius: 50px;
        box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
      }

      .submit-address {
        color: white;
        margin-top: 20px;
        background: #F54F00;
        height: 40px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: 900;
        transition: 0.5s;
      }

      .submit-address:hover {
        box-shadow: none;
        background: #3A563A;
      }

      .congrats-container{
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
      }



    .terms-list {
        list-style: none;
        counter-reset: list;
        padding: 0 1rem;
    }

    .terms-item {
        --stop: calc(100% / var(--length) * var(--i));
        --c1: #F54F00; /* Primary orange color */
        --c2: #F54F00; /* Secondary orange color */
        display: flex;
        flex-direction: row;
        position: relative;
        counter-increment: list;
        max-width: 1200px;
        margin: 2rem auto; /* Center items */
        padding: 2rem 2rem 1rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Softer shadow */
        border-radius: 0.5rem; /* Slightly larger border radius */
        overflow: hidden;
        background-color: #3A563A; /* Background color */
        transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition */
    }

    .terms-row{
        display: flex;
        flex-direction: column;
        text-align: left;
        align-items: left;
      }
      
      .terms-row h3{
        color: #ffffff;
        font-family: 'Outfit', sans-serif;
          font-size: 1.5rem;
      }
      


    .terms-item::before {
        content: '';
        display: block;
        width: 100%;
        height: 1rem;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(to right, var(--c1) var(--stop), var(--c2) var(--stop));
    }

    .terms-title {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffff;
        font-family: 'Outfit';
    }

    .terms-title::before {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        margin-right: 1rem;
        width: 1rem;
        height: 1rem;
        content: counter(list);
        padding: 1rem;
        border-radius: 50%;
        background-color: var(--c1);
        color: white;
    }

    .terms-description {
        color: #ffff;
        font-family: 'Outfit';
        text-align: left;
        font-weight: 300px;
    }

    
    .congrats-two-alt {
        opacity: 0;
        animation: fadeIn 1s forwards;
    }

    .congrats-two-alt h1 {
        opacity: 0;
        animation: fadeIn 1s forwards;
        animation-delay: 0.5s;
    }

    .congrats-two-alt span {
        opacity: 0;
        animation: fadeIn 1s forwards;
        animation-delay: 1s;
    }

    .congrats-two-alt button {
        opacity: 0;
        animation: fadeIn 1s forwards;
        animation-delay: 1.5s;
    }

    .alt-two-congrats{
        width: 1100px;
    }

    #confettiCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        pointer-events: none; /* Supaya canvas tidak menghalangi interaksi lainnya */
    }

    .menu-map-partnership{
        display: flex;
        flex-direction: column;
    }

    .map-partnership{
        padding-top: 50px;
    }

    .button-87 {
        width: 300px;
        margin: 10px;
        padding: 15px 30px;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: #3A563A;
        background-color: white;
        border-radius: 10px;
        border: 1px solid #F54F00;
        display: block;
        font-weight: 700;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        font-family: 'Outfit';
        touch-action: manipulation;
      }

      .button-87:hover {
        background-position: right center;
        /* change the direction of the change here */
        color: #3A563A;
        text-decoration: none;
      }

      .button-87.active {
        background-image: linear-gradient(45deg, #F54F00 0%, #F09819  51%, #F54F00  100%);
        box-shadow: 0px 0px 14px -7px #f09819;
        color: #ffff;
    }


    #resultList .two.alt-two h1::before {
        display: none;
    }

    

    .content-map-partnership {
        display: none;
    }

    .content-map-partnership.active {
        display: block;
        margin-bottom: 50px;
    }


    .content-map-partnership {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .content-map-partnership {
        width: 100%;
        height: 250px; /* Adjust height as needed */
        position: relative;
        overflow: hidden;
    }


    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-250px * 7)); }
    }

    .slider {
      background: #ffff;
      height: 250px;
      margin: auto;
      overflow: hidden;
      position: relative;
      width: 1100px;
  }
  
  .slider::before,
  .slider::after {
      content: "";
      height: 100%;
      position: absolute;
      width: 200px;
      z-index: 2;
      background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  }
  
  .slider::after {
      right: 0;
      top: 0;
      transform: rotateZ(180deg);
  }
  
  .slider::before {
      left: 0;
      top: 0;
  }
    .slide-track {
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 14);
    }

    .slide {
        height: 100px;
        width: 250px;
        margin-right: 20px;

    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }



    @keyframes bounce {
        0%, 100% {
            transform: translate(-50%, -50%) scale(1);
        }
        50% {
            transform: translate(-50%, -60%) scale(1.2); /* Naik sedikit */
        }
    }

      .limited-offer{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
      }

      .card-front__heading {
        font-size: 1.3rem;
        font-family: 'Outfit';
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        margin-top: .25rem;
      }
      
      /* Main heading for inside page */
      .inside-page__heading { 
        padding-bottom: 5px; 
        width: 100%;
      }
      
      /* Mixed */
      
      /* For both inside page's main heading and 'view me' text on card front cover */
      .inside-page__heading,
      .card-front__text-view {
        font-size: 1.3rem;
        font-weight: 800;
        margin-top: .2rem;
      }
      
    
      .inside-page__heading--beach,
      .card-front__text-view--beach { 
        color: #3A563A; 
        font-family: 'Outfit';
        font-weight: 500;
    }
      
      
      /* Front cover */
      
      .card-front__tp { color: #fafbfa; }
      
      /* For pricing text on card front cover */
      .card-front__text-price {
        font-size: 1.2rem;
        margin-top: -.2rem;
      }
      
      /* Back cover */
      
      /* For inside page's body text */
      .inside-page__text {
        font-family: 'Outfit';
        color: #333;
      }
      
      
      .card-front__icon {
        fill: #fafbfa;
        font-size: 3vw;
        height: 3.25rem;
        margin-top: -.5rem;
        width: 3.25rem;
      }
      
      
      .inside-page__btn {
        background-color: transparent;
        border: 3px solid;
        border-radius: .5rem;
        font-size: 1.2rem;
        font-weight: 600;
        margin-top: 2rem;
        overflow: hidden;
        padding: .7rem .75rem;
        position: relative;
        text-decoration: none;
        transition: all .3s ease;
        width: 90%;
        z-index: 10;
      }
      
      .inside-page__btn::before { 
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transform: scaleY(0);
        transition: all .3s ease;
        width: 100%;
        z-index: -1;
      }
      
      .inside-page__btn--city { 
        border-color: #ff40a1;
        color: #ff40a1;
      }
      
      .inside-page__btn--city::before { 
        background-color: #ff40a1;
      }
      
      .inside-page__btn--ski { 
        border-color: #279eb2;
        color: #279eb2;
      }
      
      .inside-page__btn--ski::before { 
        background-color: #279eb2;
      }
      
      .inside-page__btn--beach { 
        border-color: #fa7f67;
        color: #fa7f67;
      }
      
      .inside-page__btn--beach::before { 
        background-color: #fa7f67;
      }
      
      .inside-page__btn--camping { 
        border-color: #00b97d;
        color: #00b97d;
      }
      
      .inside-page__btn--camping::before { 
        background-color: #00b97d;
      }
      
      .inside-page__btn:hover { 
        color: #fafbfa;
      }
      
      .inside-page__btn:hover::before { 
        transform: scaleY(1);
      }
      
      /* Layout Structure=========================================*/
      
      .main {
        background: linear-gradient(
          to bottom right,
          #eee8dd,
          #e3d9c6
        );
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;
        width: 100%;
      }
      
      /* Container to hold all cards in one place */
      .card-area {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        height: 100%;
        justify-content: space-evenly;
        padding: 1rem;
      }
      
      /* Card ============================================*/
      
      /* Area to hold an individual card */
      .card-section {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        width: 100%;
      }
      
      /* A container to hold the flip card and the inside page */
      .card {
        background-color: rgba(0,0,0, .05);
        box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.5);
        height: 15rem;
        position: relative;
        transition: all 1s ease;
        width: 15rem;
      }
      
      /* Flip card - covering both the front and inside front page */
      
      /* An outer container to hold the flip card. This excludes the inside page */
      .flip-card {
        height: 15rem;
        perspective: 100rem;
        position: absolute;
        right: 0;
        transition: all 1s ease;
        visibility: hidden;
        width: 15rem;
        z-index: 100;
      }
      
      /* The outer container's visibility is set to hidden. This is to make everything within the container NOT set to hidden  */
      /* This is done so content in the inside page can be selected */
      .flip-card > * {
        visibility: visible;
      }
      
      /* An inner container to hold the flip card. This excludes the inside page */
      .flip-card__container {
        height: 100%;
        position: absolute;
        right: 0;
        transform-origin: left;
        transform-style: preserve-3d;
        transition: all 1s ease;
        width: 100%;
      }
      
      .card-front,
      .card-back {
        backface-visibility: hidden;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }

      .card-back{
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .card-back img{
        width: 200px;
        height: auto;
      }
      
      /* Styling for the front side of the flip card */
      
      /* container for the front side */
      .card-front {
        background-color: #fafbfa;
        height: 15rem;
        width: 15rem;
      }
      
      /* Front side's top section */
      .card-front__tp {
        align-items: center;
        clip-path: polygon(0 0, 100% 0, 100% 90%, 57% 90%, 50% 100%, 43% 90%, 0 90%);
        height: 12rem;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        padding: 2.4rem;
      }
      
      .card-front__tp--city {
        background: linear-gradient(
          to bottom,
          #ff73b9,
          #ff40a1
        );
      }
      
      .card-front__tp--ski {
        background: linear-gradient(
          to bottom,
          #47c2d7,
          #279eb2
        );
      }
      
      .card-front__tp--beach {
        background: linear-gradient(to bottom, #ff6a00, #ff0000);
  
      }
      
      .card-front__tp--camping {
        background: linear-gradient(
          to bottom,
          #00db93,
          #00b97d
        );
      }
      
      /* Front card's bottom section */
      .card-front__bt {
        align-items: center;
        display: flex;
        font-family: 'Outfit';
        justify-content: center;
        color: #3A563A;
      }
      
      /* Styling for the back side of the flip card */
      
      .card-back {
        background-color: #fafbfa;
        transform: rotateY(180deg);
      }
      
      /* Specifically targeting the <video> element */
      .video__container {
        clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%);
        height: auto;
        min-height: 100%;
        object-fit: cover;
        width: 100%;
      }
      
      /* Inside page */
      
      .inside-page {
        background-color: #fafbfa;
        box-shadow: inset 20rem 0px 5rem -2.5rem rgba(0,0,0,0.25);
        height: 100%;
        padding: 1rem;
        position: absolute;
        right: 0;
        transition: all 1s ease;
        width: 15rem;
        z-index: 1;
      }
      
      .inside-page__container {
        align-items: center;
        display: flex;
        flex-direction: column;
        height: 100%;
        text-align: center; 
        width: 100%;
      }
      
      /* Functionality ====================================*/
      
      /* This is to keep the card centered (within its container) when opened */
      .card:hover {
        box-shadow:
        -.1rem 1.7rem 6.6rem -3.2rem rgba(0,0,0,0.75);
        width: 30rem;
      }
      
      /* When the card is hovered, the flip card container will rotate */
      .card:hover .flip-card__container {
        transform: rotateY(-180deg);
      }
      
      /* When the card is hovered, the shadow on the inside page will shrink to the left */
      .card:hover .inside-page {
        box-shadow: inset 1rem 0px 5rem -2.5rem rgba(0,0,0,0.1);
      }


      .answer-dropdown {
        font-family: 'Outfit', sans-serif;
        background-color: #f9f9f9;
        padding: 12px;
        padding-left: 18px;
        height: 45px;
        font-size: 15px;
        border-radius: 8px;
        border: 1px solid #d1d1d1;
        box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
        width: 100%;
        box-sizing: border-box;
        margin: 20px 0;
        appearance: none;
        -webkit-appearance: none;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
    }
    
    .answer-dropdown::placeholder {
        color: #8e8e8e;
    }
    
    .answer-dropdown:focus {
        outline: none;
        border-color: #333;
        box-shadow: 0px 0px 6px rgba(230, 157, 0, 0.3);
    }
    
    .answer-dropdown option {
        font-family: 'Outfit', sans-serif;
        font-size: 14px;
        color: #F54F00;
    }
    
    .answer-dropdown {
      background-image: url('data:image/svg+xml;utf8,<svg fill="%23F54F00" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
      background-repeat: no-repeat;
        background-position: right 16px center;
        background-size: 20px;
    }
    
    /* Optional: Hover effect */
    .answer-dropdown:hover {
        border-color: #F54F00;
    }

    .multi-answer {
      font-family: 'Outfit';
      width: 100%; /* Lebar penuh untuk responsivitas */
      padding: 10px; /* Ruang di dalam select */
      border: 1px solid #ccc; /* Garis batas */
      border-radius: 4px; /* Sudut yang membulat */
      font-size: 1em; /* Ukuran font untuk teks dalam select */
      color: #555; /* Warna teks */
      background-color: #f8f8f8; /* Warna latar belakang yang lebih terang */
      transition: border-color 0.3s ease; /* Transisi halus pada warna batas */
  }

  .multi-answer:hover {
    border-color: #888; /* Mengubah warna batas saat hover */
}

/* Gaya saat focus */
.multi-answer:focus {
    border-color: #007bff; /* Warna batas biru saat fokus */
    outline: none; /* Menghilangkan outline default */
}


  .label-property{  
    font-family: 'Outfit';
    display: flex;
    color: white;
    align-items: center;
  }

  .multi-answer {
    font-family: 'Outfit', sans-serif;
    background-color: #f9f9f9;
    padding: 12px;
    padding-left: 18px;
    height: 45px;
    font-size: 15px;
    border-radius: 8px;
    border: 1px solid #d1d1d1;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23F54F00" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
}

.multi-answer::placeholder {
    color: #8e8e8e;
}

.multi-answer:focus {
    outline: none;
    border-color: #333;
    box-shadow: 0px 0px 6px rgba(230, 157, 0, 0.3);
}

.multi-answer option {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #F54F00;
}

/* Optional: Hover effect */
.multi-answer:hover {
    border-color: #F54F00;
}

.form-container-quiz{
  padding-left: 15px;
  padding-right: 20px;
  flex-direction: column;
  align-items: center; /* Mengatur item di tengah secara vertikal */
  justify-content: center; /* Mengatur item di tengah secara horizontal */
  text-align: left;
}

.address-input {
  font-family: 'Outfit', sans-serif;
  background-color: #f9f9f9;
  padding: 12px;
  height: 45px;
  font-size: 15px;
  border-radius: 8px;
  border: 1px solid #d1d1d1;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
}

.address-input::placeholder {
  color: #999; /* Warna placeholder */
}

.form-multi{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: #3A563A;
  height: 90px;
  border-radius: 20px;
}

#quizSection.fullscreen .btn-dropdown-submit {
  background-color: #F54F00;
  border-radius: 100px;
  box-shadow: rgba(245, 79, 0, .2) 0 -25px 18px -14px inset,
              rgba(245, 79, 0, .15) 0 1px 2px,
              rgba(245, 79, 0, .15) 0 2px 4px,
              rgba(245, 79, 0, .15) 0 4px 8px,
              rgba(245, 79, 0, .15) 0 8px 16px,
              rgba(245, 79, 0, .15) 0 16px 32px;
  color: #ffff;
  cursor: pointer;
  font-family: 'Outfit';
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 1rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 500px;
  margin: 20px;
}

#quizSection.fullscreen .btn-dropdown-submit:hover {
  box-shadow: rgba(245, 79, 0, .35) 0 -25px 18px -14px inset,
              rgba(245, 79, 0, .25) 0 1px 2px,
              rgba(245, 79, 0, .25) 0 2px 4px,
              rgba(245, 79, 0, .25) 0 4px 8px,
              rgba(245, 79, 0, .25) 0 8px 16px,
              rgba(245, 79, 0, .25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
  font-weight: 600;
}

#quizSection.fullscreen .plus {
  background-color: #3A563A;
  border-radius: 100px;
  box-shadow: rgba(58, 86, 58, 0.2) 0 -25px 18px -14px inset,
              rgba(58, 86, 58, 0.15) 0 1px 2px,
              rgba(58, 86, 58, 0.15) 0 2px 4px,
              rgba(58, 86, 58, 0.15) 0 4px 8px,
              rgba(58, 86, 58, 0.15) 0 8px 16px,
              rgba(58, 86, 58, 0.15) 0 16px 32px;
  color: #ffff;
  cursor: pointer;
  font-family: 'Outfit';
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 1rem;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: inline-block; /* Menyesuaikan lebar dengan konten */
  margin: 5px;
}




  @media only screen and (max-width: 768px) {

    .hero-section {
      height: 180px;
    }

    .pricing-menu-bg {
      height: 160px;
    }

    .breadcrumbs {
      padding-top: 80px; /* Adjust padding */
  }
  
  .breadcrumbs ul {
      padding-top: 15px;
      justify-content: center; /* Center the breadcrumbs */
  }
  
  .breadcrumbs ul li {
      margin-right: 10px; /* Reduce margin between breadcrumbs */
  }
  
  .breadcrumbs ul li a p {
      font-size: 10px; /* Reduce font size */
  }
    .hero-center-text h1 {
      font-size: 2rem;
    }

    .benefit-content {
        flex-direction: column;
    }

    .swiper-container {
        height: 220px; /* Mengurangi tinggi pada layar lebih kecil */
        max-width: 100%; /* Membuat lebar 100% agar menyesuaikan layar */
        border-radius: 15px; /* Mengurangi radius agar lebih proporsional */
    }

    .swiper-slide-partnership {
        flex-direction: column; /* Tetap sama untuk tampilan kolom */
        justify-content: center; /* Menjaga konten tetap di tengah */
        align-items: center; /* Tetap di tengah */
    }

    .slide-content {
        height: 215px; /* Mengurangi tinggi agar sesuai dengan kontainer */
        width: 300px;
        border-radius: 10px; /* Mengurangi radius */
        padding: 10px; /* Menambahkan padding agar lebih rapi */
    }

    .slide-logo img {
        max-width: 80px; /* Mengurangi ukuran logo pada layar lebih kecil */
        margin-bottom: 10px; /* Mengurangi jarak bawah logo */
    }

    .slide-title h2 {
        font-size: 18px; /* Mengurangi ukuran font pada judul */
        margin-bottom: 5px; /* Mengurangi margin bawah judul */
    }

    .slide-description p {
        font-size: 12px; /* Mengurangi ukuran font deskripsi */
        max-width: 300px; /* Membatasi lebar deskripsi */
    }

    .map-content-partnership {
        flex-direction: column; /* Mengubah arah menjadi kolom untuk tampilan yang lebih baik */
        align-items: center; /* Menyelaraskan konten di tengah */
    }

    .map-left-partnership img {
        width: 100%; /* Membuat gambar responsif */
        max-width: 300px; /* Maksimum lebar gambar */
    }

    .map-right-partnership{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .pin {
        width: 4px; /* Mengurangi ukuran pin untuk layar kecil */
        height: 4px;
    }

    .two.alt-two h2,
    .two.alt-two li {
        font-size: 1.2em; /* Mengatur ukuran font untuk keterbacaan yang lebih baik */
    }


    .role-section {
        flex-direction: column;
        padding: 10px;
        align-items: center;
    }

    .role-buttons {
        padding: 8px 15px;
        font-size: 14px;
    }

    .your-role {
        height: auto;    }

    .role-container {
        width: 100%;
        padding: 0 15px;
    }

    .role-button-container {
        flex-direction: column;
        align-items: center;
    }

    .role-button {
        margin: 8px 0;
        font-size: 16px;
        padding: 8px 0;
        width: 100%;
        text-align: center;
    }

    .role-content {
        max-width: 100%;
        padding: 0 15px;
    }

    .two {
        margin-bottom: 10px;
    }


    .partnership-process-role {
        padding: 20px 10px;
    }

    .partnership-process-role h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .process-steps {
        flex-direction: column;
        align-items: flex-start;
    }

    .step-line {
        display: none;
        top: auto;
        width: calc(100%);
        height: 2px;
    }

    .step {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    .step .icon {
        width: 120px;
        height: 120px;
        font-size: 16px;
    }

    .step h3 {
        font-size: 18px;
    }

    .step p {
        font-size: 12px;
    }

    .partnership-terms-content {
        gap: 40px; /* Kurangi gap */
        padding-bottom: 0;
    }

    .term-card {
        width: 100%; /* Buat width 100% agar pas di container */
        height: auto; /* Buat height otomatis */
        padding: 15px; /* Sesuaikan padding */
    }

    .term-card::before {
        width: calc(100% - 10px); /* Kurangi lebar untuk garis agar tetap proporsional */
        height: calc(100% - 10px); /* Kurangi tinggi untuk garis */
        top: 10px; /* Sesuaikan jarak garis pada posisi atas */
        right: 5px; /* Sesuaikan jarak garis pada posisi kanan */
    }

    .circle {
        width: 40px; /* Sesuaikan ukuran lingkaran */
        height: 40px; /* Sesuaikan ukuran lingkaran */
        margin-bottom: 15px; /* Kurangi jarak margin */
    }

    .term-card h3 {
        font-size: 1.2em; /* Kurangi ukuran font */
        margin: 5px 0;
    }

    .term-card p {
        font-size: 0.8em; /* Kurangi ukuran font */
    }

    .cta-role-apply {
        justify-content: center; /* Tetap center horizontal */
        width: 100vw;
        height: 250px;
        padding: 30px;
      }

      .cta-content-row {
        flex-direction: column; /* Ubah arah flex menjadi kolom untuk layar kecil */
        justify-content: center;
        max-width: 100%; /* Buat lebar maksimum 100% untuk layar kecil */
        margin: 0 auto;
      }

      .cta-content {
        margin-right: 0; /* Hilangkan margin kanan */
        margin-bottom: 20px; /* Beri jarak bawah agar konten tidak menempel pada tombol */
        flex: unset; /* Hilangkan fleksibilitas untuk layar kecil */
      }

      .cta-content h1 {
        font-size: 28px; /* Kurangi ukuran font pada judul */
      }

      .cta-content p {
        font-size: 16px; /* Kurangi ukuran font pada paragraf */
        line-height: 1.4;
      }

      .cta-button {
        width: 100%; /* Tombol mengisi seluruh lebar */
        text-align: center; /* Pusatkan tombol */
      }

      .cta-button .btn-apply {
        padding: 12px 20px; /* Kurangi padding tombol */
        font-size: 14px; /* Kurangi ukuran font tombol */
      }

      .quiz-form {
        width: 90%; /* Mengurangi lebar agar lebih pas di layar kecil */
        padding: 15px; /* Mengurangi padding agar lebih proporsional */
        margin-top: 20px;
    }

    .quiz-form h3 {
        font-size: 1.5em; /* Mengubah ukuran font agar lebih kecil */
    }

    .quiz-form input {
        height: 45px; /* Mengurangi tinggi input */
        font-size: 13px; /* Mengurangi ukuran font */
    }

    .quiz-form button {
        height: 35px; /* Mengurangi tinggi tombol */
    }

    .btn-start {
        padding: 8px 16px; /* Mengurangi padding pada tombol start */
    }

    #quizSection.fullscreen .quiz-section {
        height: auto; /* Menyesuaikan tinggi agar tidak terlalu tinggi di layar kecil */
    }

    #quizSection.fullscreen .quiz-section .left,
    #quizSection.fullscreen .quiz-section .right
    #quizSection.fullscreen .quiz-section .button {
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #quizSection.fullscreen .quiz-section img {
        max-width: 40%; /* Memperkecil gambar pada layar kecil */
    }

    #quizSection.fullscreen #questionText {
        font-size: 1.5rem; /* Mengurangi ukuran font pertanyaan */
    }

    #quizSection.fullscreen .answer {
        width: 95%; /* Membuat tombol jawaban lebih lebar agar sesuai dengan layar */
        font-size: 0.9rem; /* Mengurangi ukuran font tombol */
        padding: 8px 10px ; /* Menyesuaikan padding tombol */
        margin-bottom: 0;
    }

    #quizSection.fullscreen .answer:hover {
        transform: none; /* Menonaktifkan transformasi pada hover di layar kecil */
    }

    #congratsMessage img {
        width: 100%; /* Make the image take full width */
        height: auto; /* Maintain aspect ratio */
        max-width: 300px; /* Ensure it doesn't exceed the original width */
    }

    /* Optional: Adjust the overall congrats container */
    .congrats-container {
        padding: 20px; /* Add padding for better spacing */
    }

    /* Adjust the heading font size */
    .congrats-container h1 {
        font-size: 24px; /* Make the heading smaller */
    }

    /* Adjust button styles */
    .btn-answer {
        padding: 10px 20px; /* Add some padding to the button */
        font-size: 16px; /* Adjust font size for readability */
    }

      /* Adjust the image size */
      #congratsMessage img {
        width: 100% !important;
        height: auto;
        max-width: 150px;
        max-height: 150px;
    }

    /* Optional: Adjust the overall congrats container */
    .congrats-container {
        padding: 20px; /* Add padding for better spacing */
    }

    /* Adjust the heading font size */
    .congrats-container h1 {
        font-size: 24px; /* Make the heading smaller */
    }

    .terms-item {
        width: 80vw; /* Tetap 100% agar responsif */
        max-width: 100%; /* Membuatnya menyesuaikan dengan ukuran layar kecil */
    }

    .terms-title {
        font-size: 1rem;
        text-align: left;
    }

    .terms-title::before {
        width: 0.75rem;
        height: 0.75rem;
        padding: 0.5rem;
    }

    .terms-description {
        font-size: 0.8rem;
    }
    

    #quizSection{
        height: 500px;
    }
    
    .alt-two-congrats{
        width: 300px;
    }

    .two.alt-two{
        width: 100vw;
        text-align: center;
        margin-bottom: 0;
    }

    .main {
        height: auto;
      }
    
      .card-area {
        flex-wrap: wrap;
        justify-content: center;
        padding: 1rem 0;
      }
    
      .card-section {
        width: 100%;
        justify-content: center;
      }
    
      .card {
        height: 12rem;
        width: 12rem;
        box-shadow: -.1rem 1.7rem 6.6rem -3.2rem rgba(0, 0, 0, 0.5);
        transition: all 0.8s ease;
      }
    
      .flip-card {
        height: 12rem;
        width: 12rem;
      }
    
      .flip-card__container {
        transition: all 0.8s ease;
      }
    
      .card-front,
      .card-back {
        height: 12rem;
        width: 12rem;
      }
    
      .card-front__tp {
        height: 9rem;
        padding: 2rem;
      }
    
      .card-front__icon {
        font-size: 4vw;
        height: 2.75rem;
        width: 2.75rem;
      }
    
      .inside-page {
        height: 12rem;
        width: 12rem;
        padding: 1rem;
      }
    
      .inside-page__btn {
        font-size: 1rem;
        padding: 0.5rem 0.6rem;
        margin-top: 1.5rem;
        width: 80%;
      }
    
      /* When the card is hovered, it will expand slightly but not as much as in larger screens */
      .card:hover {
        width: 24rem;
      }
    
      .inside-page__heading {
        font-size: 1.1rem;
      }
    
      .card-front__heading,
      .card-front__text-view {
        font-size: 1.1rem;
      }
    
      .card-front__text-price {
        font-size: 1rem;
      }
    
      /* For inside page's body text */
      .inside-page__text {
        font-size: 0.6rem;
        width: 130px;
      }
    
      .card-back img {
        width: 130px;
      }
}

.loading-spinner {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media screen and (min-width: 769px) and (max-width: 960px) {

  .hero-section{
    height: 80px;
  }

  .breadcrumbs {
    padding-top: 0; /* Menyesuaikan padding */
  }

  .breadcrumbs ul {
    justify-content: center; /* Mengubah dari kiri ke tengah untuk tampilan yang lebih kecil */
  }

  .breadcrumbs ul li {
    margin-right: 10px; /* Mengurangi jarak antar item */
  }

  .breadcrumbs ul li a {
    font-size: 11px; /* Mengurangi ukuran font untuk tampilan lebih kompak */
  }

  .breadcrumbs ul li a p {
    font-size: 10px; /* Sesuaikan ukuran teks breadcrumb */
  }

  .hero-center-text h1 {
    font-size: 2.5rem; /* Mengurangi ukuran font judul */
  }
  
  .breadcrumbs ul li a .icon {
    margin-right: 3px; /* Menyesuaikan jarak ikon */
  }

  .swiper-slide {
      height: 400px; /* Sesuaikan tinggi slide untuk ukuran layar menengah */
  }

  .swiper-container {
      width: 90%; /* Kurangi lebar untuk menyesuaikan layar */
      height: 220px; /* Sesuaikan tinggi container */
  }

  .slide-content {
      height: 220px; /* Kurangi tinggi konten slide */
      font-weight: 300; /* Ubah font-weight agar lebih ringan */
      border-radius: 10px; /* Kurangi border-radius agar lebih ramping */
      padding-top: 10px; /* Tambahkan sedikit padding atas */
  }

  .slide-logo img {
      max-width: 80px; /* Kurangi ukuran logo agar lebih proporsional */
      margin-bottom: 10px; /* Kurangi margin bawah logo */
  }

  .slide-title h2 {
      font-size: 18px; /* Kurangi ukuran font title */
      margin-bottom: 8px; /* Sesuaikan margin bawah */
  }

  .slide-description p {
      font-size: 13px; /* Kurangi ukuran font deskripsi */
      max-width: 350px; /* Sesuaikan lebar maksimal untuk deskripsi */
  }
}

@media screen and (min-width: 769px) and (max-width: 960px) {
  .process-steps {
    flex-direction: column;
    align-items: flex-start;
}

.step-line {
    display: none;
    top: auto;
    width: calc(100%);
    height: 2px;
}

.step {
    width: 100%;
    text-align: center;
    margin: 10px 0;
}

.step .icon {
    width: 120px;
    height: 120px;
    font-size: 16px;
}

.step h3 {
    font-size: 18px;
}

.step p {
    font-size: 12px;
}

.partnership-terms-content {
    gap: 40px; /* Kurangi gap */
    padding-bottom: 0;
}

.term-card {
    width: 100%; /* Buat width 100% agar pas di container */
    height: auto; /* Buat height otomatis */
    padding: 15px; /* Sesuaikan padding */
}

.term-card::before {
    width: calc(100% - 10px); /* Kurangi lebar untuk garis agar tetap proporsional */
    height: calc(100% - 10px); /* Kurangi tinggi untuk garis */
    top: 10px; /* Sesuaikan jarak garis pada posisi atas */
    right: 5px; /* Sesuaikan jarak garis pada posisi kanan */
}

.circle {
    width: 40px; /* Sesuaikan ukuran lingkaran */
    height: 40px; /* Sesuaikan ukuran lingkaran */
    margin-bottom: 15px; /* Kurangi jarak margin */
}

.term-card h3 {
    font-size: 1.2em; /* Kurangi ukuran font */
    margin: 5px 0;
}
}