.new-design-page {
     height: 100vh;
}

.hero-text h1 {
     font-size: clamp(26px, 3vw, 38px);
     line-height: 1.2;
     margin-bottom: 8px;
}

.hero-text h2 {
     font-size: clamp(16px, 1.6vw, 22px);
     line-height: 1.4;
     margin-bottom: 0;
}

.new-design-feature-row {
     gap: 100px;
     list-style: none;
     margin: 0;
     padding: 0;
}

.new-design-feature-text {
     font-size: 15px;
     line-height: 1.3;
     font-weight: 600;
}


.new-design-feature-divider {
     align-self: stretch;
     width: 1px;
     background: rgba(0, 0, 0, 1);
}

.new-design-copy-block {
     padding: 16px 0 32px;
}

.new-design-logo {
     width: 100px;
     height: auto;
}

.new-design-copy-lead {
     font-size: 16px;
     line-height: 1.6;
     font-weight: 600;
     margin-bottom: 16px;
}

.new-design-copy-body {
     font-size: 16px;
     line-height: 1.7;
     color: #676767;
     margin-bottom: 0;
}

.new-design-gradient-card {
     background: linear-gradient(90deg, #f2f2f2 0%, #f2f2f2 70%, #6CBBFC 100%);
     border-radius: 28px;
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
}

.new-design-gradient-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
}

.new-design-gradient-text h2 {
     font-size: 20px;
     font-weight: bold;
}

.new-design-gradient-text p {
     font-size: 15px;
     line-height: 1.6;
     color: #676767;
     margin-bottom: 0;
     max-width: 820px;
}

.new-design-gradient-icon {
     position: relative;
     width: 22px;
     height: 22px;
     flex: 0 0 22px;
}

.new-design-gradient-icon span:first-child {
     transform: translate(-50%, -50%) rotate(45deg);
}

.new-design-gradient-icon span:last-child {
     transform: translate(-50%, -50%) rotate(-45deg);
}

.new-design-faq-section {
     background: #ffffff;
}

.new-design-faq-list {
     display: flex;
     flex-direction: column;
     gap: 18px;
}

.new-design-faq-item {
     background: #f2f2f2;
     border-radius: 999px;
     cursor: pointer;
     transition: border-radius 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.new-design-faq-item-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     width: 100%;
}

.new-design-faq-item-description {
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     margin-top: 0;
     color: #676767;
     transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.new-design-faq-item.is-expanded {
     align-items: flex-start;
     flex-direction: column;
     background: linear-gradient(90deg, #f2f2f2 0%, #f2f2f2 70%, #6CBBFC 100%);
     border-radius: 28px;
     box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
     padding: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 48px) !important;
     position: relative;
}

.new-design-faq-item.is-expanded .new-design-faq-item-description {
     max-height: 1200px;
     opacity: 1;
     margin-top: 12px;
}

.new-design-faq-item.is-expanded .new-design-faq-item-header {
     align-items: flex-start;
     justify-content: flex-start;
}

/* .new-design-faq-item.is-expanded .new-design-faq-icon {
    position: absolute;
    right: clamp(16px, 3vw, 32px);
    top: 50%;
    transform: translateY(-50%);
} */

.new-design-faq-item-description.is-empty {
     display: none;
}

.new-design-faq-title {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 0px !important;
}

.new-design-faq-icon {
     position: relative;
     width: 26px;
     height: 26px;
     flex: 0 0 26px;
}

.new-design-faq-icon span {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 18px;
     height: 2px;
     background: #1d4ed8;
     transform: translate(-50%, -50%);
}

.new-design-faq-icon span:last-child {
     transform: translate(-50%, -50%) rotate(90deg);
}

.new-design-faq-card {
     background: white;
     border-radius: 999px;
     padding: 40px 60px;
     position: relative;
     overflow: hidden;
}

.new-design-faq-card-content {
     display: grid;
     grid-template-columns: 1fr 2fr;
     gap: 40px;
     align-items: center;
}

.new-design-faq-card-title {
     font-size: clamp(18px, 2.4vw, 26px);
     font-weight: 700;
     line-height: 1.3;
}

.new-design-faq-card-list {
     display: flex;
     flex-direction: column;
     list-style: none;
     margin: 0;
     padding: 0;
}

.new-design-faq-card-item h3 {
     font-size: clamp(16px, 1.6vw, 20px);
     font-weight: bold;
     margin-bottom: 4px;
}

.new-design-faq-card-item p {
     font-size: clamp(14px, 1.4vw, 16px);
     color: #676767;
     margin-bottom: 0;
}

.new-design-cta-card {
     border: 1px solid #e5e7eb;
     border-radius: 12px;
     padding: 48px 24px;
     background: #ffffff;
}

.new-design-cta-title {
     font-size: clamp(22px, 2.6vw, 30px);
     font-weight: 700;
}

.new-design-cta-subtitle {
     font-size: clamp(16px, 1.6vw, 22px);
     color: #676767;
     margin-bottom: 22px;
}

.new-design-cta-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     padding: clamp(10px, 1.6vw, 14px) clamp(16px, 3vw, 26px);
     border-radius: 999px;
     background: linear-gradient(90deg, #57AFFF 0%, #2676DC 100%);
     color: #ffffff;
     font-size: clamp(12px, 2.2vw, 14px);
     font-weight: 600;
     line-height: 1.3;
     text-decoration: none;
     box-shadow: 0 10px 18px rgba(59, 130, 246, 0.2);
     max-width: 100%;
     text-align: center;
     white-space: normal;
}

a:hover {
     color: #ffffff;
     text-decoration: none
}

.bg-faq-section {
     background-color: #F7F7F7;
}

@media (max-width: 991.98px) {
     .new-design-feature-row {
          gap: 40px;
     }
}

@media (max-width: 768px) {
     .new-design-page {
          height: auto;
          min-height: 80vh;
     }

     .hero-text h1 {
          font-size: 26px;
          font-weight: 700;
     }

     .hero-text h2 {
          font-size: 14px;
     }

     .new-design-feature-row {
          flex-direction: column;
          gap: 5px;
     }

     .new-design-feature-divider {
          width: 40%;
          height: 1px;
          align-self: center;
     }

     .new-design-feature-text {
          font-size: 13px;
          font-weight: 500;
     }

     .new-design-copy-block {
          padding: 0px;
          padding-top: 16px;
     }

     .new-design-copy-lead {
          font-size: 14px;
          margin-bottom: 12px;
     }

     .new-design-copy-body {
          font-size: 14px;
     }

     .new-design-gradient-card {
          border-radius: 22px;
          box-shadow: none;
     }

     .new-design-gradient-content {
          flex-direction: column;
          align-items: flex-start;
          position: relative;
          padding-right: 26px;
     }

     /* .new-design-faq-item.is-expanded .new-design-faq-item-header,
    .new-design-faq-item.is-expanded .new-design-faq-item-description {
        padding-right: 40px;
    } */

     .new-design-faq-item.is-expanded .new-design-faq-icon {
          position: absolute;
          top: 16px;
          transform: none;
     }

     .new-design-gradient-text h2 {
          font-size: 16px;
          line-height: 1.3;
     }

     .new-design-gradient-text p {
          font-size: 14px;
     }

     .new-design-gradient-icon {
          position: absolute;
          top: 28px;
          right: 24px;
     }

     .new-design-faq-title {
          font-size: 16px;
     }

     .new-design-faq-icon {
          width: 18px;
          height: 18px;
          flex: 0 0 18px;
     }

     .new-design-faq-icon span {
          width: 16px;
     }

     .new-design-faq-card {
          background: #ffffff;
          border-radius: 22px;
          padding: 20px;
     }

     .bg-faq-section {
          background-color: transparent;
     }

     .new-design-logo {
          width: 50px;
          height: auto;
     }

     .new-design-gradient-icon {
          width: 18px;
          height: 18px;
          flex: 0 0 18px;
     }

     .new-design-gradient-card {
          background: linear-gradient(90deg, #f2f2f2 0%, #f2f2f2 50%, #A6D2F7 100%);
     }
}