/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Anchor scroll handling */
:root {
    --header-height: 80px;
}

html {
    scroll-behavior: smooth;
}

/* 讓錨點滾動時預留 header 高度，避免標題被蓋住 */
section[id] {
    scroll-margin-top: calc(var(--header-height));
}

/* Header & Navigation */
header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.nav-container {
    display: flex;
    align-items: center;
}

/* Desktop Navigation */
.nav-section {
    display: flex;
    flex: 1;
    z-index: 1000;
}

.nav-left {
    display:flex;
    justify-content: center;
    gap: 80px;
}

.nav-right {
    display:flex;
    justify-content: center;
    gap: 80px;
}

.nav-section a {
    font-family: 'Noto Sans TC';
    font-weight: 400;
    font-size: 20px;
    text-decoration: none;
    line-height: 100%;
    letter-spacing: 2px;
    color: #FFFFFF;
    text-align: center;
}

/* Mobile Navigation */
.mobile-header {
    display: none;
    position: relative;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.mobile-logo {
    display: flex;
    align-items: center;
}

.burger-menu {
    display: none;
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1B2948;
    z-index: 2000;
}

.mobile-menu.active {
    display: flex;
    flex-direction: column;
}

.mobile-menu-header {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
}

.mobile-menu-logo {
    display: flex;
    align-items: center;
}

.close-menu {
    display: block;
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}


.mobile-menu-content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    padding-top: 80px; /* 調整與header的距離 */
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.mobile-nav a {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: #FFFFFF;
    text-decoration: none;
    line-height: 100%;
    letter-spacing: 2px;
}

/* Section 1 */
.section-1 {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.s1-container {
    padding-left: 120px;
    padding-bottom: 120px;
}

.s1-title {
    font-family: Noto Serif TC;
    font-weight: 700;
    font-size: 60px;
    line-height: 120%;
    letter-spacing: 2px;
    color: #FFFFFF;
    margin-bottom: 32px;
}
.s1-title br {
    display: none;
}

.s1-text {
    font-family: Noto Sans TC;
    font-weight: 300;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 2px;
    color: #FFFFFF;
    margin-bottom: 24px;
}
.s1-text-br {
    display: none;
}
.s1-line {
    display: flex;
    align-items: center;
}

.s1-button {
    font-family: 'Noto Sans TC';
    font-weight: 500;
    font-size: 18px;
    background: #56A959;
    color: #FFFFFF;
    border-radius: 8px;
    display: flex;
    border: none;
    align-items: center;
    gap: 4px;
    padding: 21px 68px;
    height: 64px;
    cursor: pointer;
    text-decoration: none;
}

.line-icon {
    width: 22px;
    height: 22px;
}

.s1-button:hover {
    background: #00A300;
    transform: scale(1.05);
}
.s1-button:active {
    transform: scale(0.95);
}
/* Section 2 */
.section-2 {
    background-color:#1B2948;
    padding-top: 160px;
    padding-bottom: 160px;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.s2-container-1{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.s2-content {
    width: 430px;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}
.s2-img{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.s2-title{
    align-self: flex-start;
    font-family: Noto Serif TC;
    font-weight: 700;
    font-size: 52px;
    line-height: 150%;
    letter-spacing: 2px;
    color: #FFFFFF;
    text-align: left;
}
.s2-text{
    align-self: flex-end;
    font-family: Noto Serif TC;
    font-weight: 700;
    font-size: 60px;
    line-height: 150%;
    letter-spacing: 2px;
    color: #E29452;
    text-align: right;
}
.s2-container-2{
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #1B2948;
    position: relative;
}


.s2-image-area-2 {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding-left: 240px;
    position: relative;
    z-index: 1;
}

.s2-text-area-2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 80px;
    position: relative;
    z-index: 1;
}

.s2-title-2 {
    font-family: 'Noto Sans TC';
    font-weight: 400;
    font-size: 36px;
    color: #FFFFFF;
    line-height: 120%;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.s2-text-2 {
    font-family: 'Noto Sans TC';
    font-weight: 300;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 100%;
    letter-spacing: 2px;
}
.s2-hr-2{
    width: 100%;
    max-width: 800px;
    height: 1px;
    background-color: #787878;
    margin-top: 32.5px;
    align-self: flex-end;
}

.s2-container-3 {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #1B2948;
    position: relative;
}
.s2-2bg-image {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/s2-2bg.png');
    background-position: left center;
    background-repeat: no-repeat;
    z-index: 0;
}
.s2-3bg-image {
    position: absolute;
    top: 50px;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/s2-3bg.png');
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 0;
}

.s2-4bg-image {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/s2-4bg.png');
    background-position: left center;
    background-repeat: no-repeat;
    z-index: 0;
}

.s2-5bg-image {
    position: absolute;
    top: 50px;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/s2-5bg.png');
    background-position: right center;
    background-repeat: no-repeat;
    z-index: 0;
}

.s2-text-area-3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 80px;
    position: relative;
    align-items: flex-end;
}

.s2-content-box {
    text-align: center;
}

.s2-image-area-3 {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    padding-right: 240px;
    position: relative;
    z-index: 1;
}

.s2-title-3 {
    font-family: 'Noto Sans TC';
    font-weight: 400;
    font-size: 36px;
    color: #FFFFFF;
    line-height: 120%;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-align: left;
}

.s2-text-3 {
    font-family: 'Noto Sans TC';
    font-weight: 300;
    font-size: 18px;
    color: #FFFFFF;
    line-height: 130%;
    letter-spacing: 2px;
    text-align: left;
}
.s2-text-3 br{
    display: none;
}

.s2-hr-3 {
    width: 100%;
    max-width: 800px;
    height: 1px;
    background-color: #787878;
    margin-top: 32.5px;
    align-self: flex-start;
}
.s2-img-2{
    width: 100%;
    height: 100%;
}
.s2-img-3 {
    width: 100%;
    height: 100%;
}

.s2-img-4 {
    width: 100%;
    height: 100%;
}

.s2-img-5 {
    width: 100%;
    height: 100%;
}
/* Section 3 */
.s3-bg{
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    z-index: 0;
    width: 100%;
    overflow: hidden;
}
.section-3 {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color:#1B2948;
    padding-top: 160px;
    padding-bottom: 240px;
}

.s3-title-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 120px;
}

.s3-title {
    font-family: Noto Serif TC;
    font-weight: 700;
    font-size: 52px;
    line-height: 130%;
    letter-spacing: 2px;
    text-align: center;
    color: #FFFFFF;
}

.s3-title-2 {
    font-family: Noto Serif TC;
    font-weight: 700;
    font-size: 60px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #E29452;
}

.s3-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    width: 100%;
    position: relative;
    flex-wrap: wrap;
    padding: 0 16px;
}


.s3-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.s3-image-container {
    margin-bottom: 32px;
    padding-top: 28px;
    padding-right: 28px;
}

.s3-image {
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

.s3-number {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background-color: #1B2948;
    border: 0.5px solid #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Aboreto';
    font-weight: 400;
    font-size: 40px;
    color: #FFFFFF;
    z-index: 1;
}

.s3-text-container {
    text-align: center;
}

.s3-main-text {
    font-family: Noto Sans TC;
    font-weight: 500;
    font-size: 24px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.s3-sub-text {
    font-family: 'Noto Sans TC';
    font-weight: 300;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 2px;
}
.s3-line {
    position: absolute;
    top: 128px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #787878;
    z-index: 0;
}
.s3-content {
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
}

/* Section 4 */
.section-4 {
    min-height: 100vh;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 160px 16px;
}

.s4-title-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}

.s4-title-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 24px;
}

.s4-title-1 {
    font-family: 'Noto Serif TC';
    font-weight: 700;
    font-size: 60px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #1E1E1E;
    text-align: center;
}
.s4-title-2 {
    font-family: 'Noto Serif TC';
    font-weight: 700;
    font-size: 60px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #E29452;
    text-align: center;
}
.s4-sub-title{
    font-family: 'Noto Sans TC';
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    color: #1E1E1E;
    letter-spacing: 2px;
    text-align: center;
}
.s4-main-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.s4-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 100px;
}

.s4-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    flex-wrap: wrap;
}

.s4-item {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.s4-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.s4-image {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.s4-item-text {
    font-family: 'Noto Sans TC';
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #1E1E1E;
}

/* Section 5 */
.s5-bg{
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 0;
    overflow: hidden;
}
.section-5 {
    background-color: #1B2948;
    padding: 160px 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.s5-title-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.s5-title {
    font-family: 'Noto Serif TC';
    font-weight: 700;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #FFFFFF;
    text-align: center;
}

.s5-main-container {
    width: 100%;
    display: flex;
    align-items: center;
}

.s5-image-area {
    flex: 0.5635;
    width: 100%;
    height: 100%; 
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.s5-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s5-text-area {
    flex: 0.4365;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s5-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 80px;
}

.s5-main-title {
    font-family: 'Noto Sans TC';
    font-weight: 700;
    font-size: clamp(1.5rem, 1.3088rem + 0.7843vw, 2.25rem);
    line-height: 120%;
    letter-spacing: 2px;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 16px;
}

.s5-pill-container {
    width: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #E29452;
    border-radius: 100px;
    padding: 8px 0;
    margin-bottom: 40px;
}

.s5-pill {
    font-family: 'Noto Sans TC';
    font-weight: 700;
    font-size: 18px;
    color: #1B2948;
}

.s5-columns-container {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    width: 100%;
}

.s5-column {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.s5-column-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.s5-column-icon {
    width: 24px;
    height: 24px;
}

.s5-column-title {
    font-family: 'Noto Sans TC';
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
}

.s5-column-list {
    list-style: none;
    padding: 16px 0;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

.s5-column-list li {
    font-family: 'Noto Sans TC';
    font-weight: 300;
    font-size: clamp(1rem, 0.9681rem + 0.1307vw, 1.125rem);
    line-height: 120%;
    color: #FFFFFF;
    margin-bottom: 16px;
    letter-spacing: 1.7px;
    display: flex;
    align-items: center;
}

.s5-button {
    max-width: 232px;
    width: 100%;
    font-family: 'Noto Sans TC';
    font-weight: 500;
    font-size: 18px;
    background: #56A959;
    color: #FFFFFF;
    border-radius: 8px;
    display: flex;
    border: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: pointer;
    align-self: flex-start;
    gap:4px;
    text-decoration: none;
}

.s5-button:hover {
    background: #00A300;
    transform: scale(1.05);
}

/* Section 5 - Second Container */
.s5-main-container-2 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.s5-text-area-2 {
    flex: 0.4365;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 80px;
}

.s5-content-2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.s5-main-title-2 {
    font-family: 'Noto Sans TC';
    font-weight: 700;
    font-size: clamp(1.5rem, 1.3088rem + 0.7843vw, 2.25rem);
    line-height: 120%;
    letter-spacing: 2px;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 40px;
}

.s5-columns-container-2 {
    display: flex;
    gap: 40px;
    width: 100%;
}

.s5-column-2 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.s5-column-header-2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.s5-column-icon-2 {
    width: 24px;
    height: 24px;
}

.s5-column-title-2 {
    font-family: 'Noto Sans TC';
    font-weight: 600;
    font-size: 20px;
    color: #FFFFFF;
}

.s5-column-list-2 {
    list-style: none;
    padding: 16px 0;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

.s5-column-list-2 li {
    font-family: 'Noto Sans TC';
    font-weight: 300;
    font-size: clamp(1rem, 0.9681rem + 0.1307vw, 1.125rem);
    line-height: 120%;
    color: #FFFFFF;
    margin-bottom: 16px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
}

.s5-empty-item {
    height: 21.5px;
    margin-bottom: 16px;
}

.s5-content-item {
    font-family: 'Noto Sans TC';
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
    color: #FFFFFF;
    display: flex;
    align-items: center;
}
.s5-note-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #4C5E83;
    margin: 48px 0;
    padding: 8px 12px;
}
.s5-note {
    font-family: 'Noto Sans TC';
    font-weight: 300;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 5px;
    color: #FFFFFF;
    white-space: nowrap;
}
.s5-button-2 {
    max-width: 232px;
    width: 100%;
    font-family: 'Noto Sans TC';
    font-weight: 500;
    font-size: 18px;
    background: #56A959;
    color: #FFFFFF;
    border-radius: 8px;
    display: flex;
    border: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: pointer;
    align-self: flex-start;
    gap: 4px;
    text-decoration: none;
    z-index: 1;
}

.s5-button-2:hover {
    background: #00A300;
    transform: scale(1.05);
}

.s5-image-area-2 {
    width: 100%;
    flex: 0.5635;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.s5-image-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-6{
    background-color: #1B2948;
    padding: 160px 0;
    display: flex;
    flex-direction: column;
}
.s6-title-container{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 80px;
    gap: 16px;
}
.s6-title{
    font-family: 'Noto Serif TC';
    font-weight: 700;
    font-size: 52px;
    line-height: 130%;
    letter-spacing: 2px;
    text-align: center;
    color: #FFFFFF;
}

.s6-subtitle{
    font-family: 'Noto Sans TC';
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #E29452;
}

.s6-main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.s6-arrow-left,
.s6-arrow-right {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #FFFFFF;
}

.s6-arrow-left:hover,
.s6-arrow-right:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.s6-arrow-left:active,
.s6-arrow-right:active {
    transform: scale(0.95);
}

.s6-arrow-icon {
    z-index: 1;
    object-fit: contain;
}

.s6-carousel-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.s6-carousel-track {
    display: flex;
    gap: 16px;
    transition: transform 0.3s ease;
    width: 100%;
    justify-content: flex-start;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

.s6-review-card {
    flex: 0 0 calc((100% - 48px) / 4);
    min-width: 280px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s6-review-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s6-review-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.s6-reviewer-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.s6-person {
    width: 32px;
    height: 32px;
    background-color: #1E1E1E;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.s6-person-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.s6-reviewer-name {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #1B2948;
    margin: 0;
}

.s6-review-stars {
    color: #E29452;
    font-size: 14px;
    letter-spacing: 2px;
}

.s6-review-time {
    font-family: 'Noto Sans TC';
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 2px;
    color: #1E1E1E;
}

.s6-review-text {
    font-family: 'Noto Sans TC';
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #1E1E1E;
    letter-spacing: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.s6-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

.s6-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.s6-dot.active {
    background-color: #E29452;
    transform: scale(1.2);
}
/* Section 7 Styles */
.section-7 {
    background-color: #1B2948;
    padding: 80px 0 0 0;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
}

.s7-left-container {
    flex: 1;
    padding: 0 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80vh;
    gap: 40px;
}

.s7-text-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.s7-title {
    font-family: 'Noto Serif TC';
    font-weight: 700;
    font-size: 52px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #FFFFFF;
}

.s7-description {
    font-family: 'Noto Sans TC';
    font-weight: 300;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #FFFFFF;
}

.s7-rectangles-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s7-rectangle {
    width: 100%;
    height: 120px;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    border-radius: 16px;
}

.s7-rectangle-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.s7-rectangle-icon {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
}

.s7-rectangle-text {
    font-family: 'Noto Sans TC';
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #FFFFFF;
}

.s7-rectangle-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.s7-rectangle-amount {
    font-family: 'Aboreto';
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #FFFFFF;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.s7-rectangle-amount-2{
    font-family: 'Noto Sans TC';
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #FFFFFF;
    margin: 0;
}
.s7-line-button {
    align-self: flex-end;
    background: #56A959;
    border: none;
    border-radius: 12px;
    padding: 28px 24px;
    color: #FFFFFF;
    font-family: 'Noto Sans TC';
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    z-index: 2;
}

.s7-line-button:hover {
    background: #00A300;
    transform: scale(1.05);
}

.s7-line-button:active {
    transform: scale(0.95);
}

.s7-line-button .line-icon {
}

.s7-right-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex: 1;
    position: relative;
}
.s7-bg{
    position: absolute;
    right: 0;
    z-index: 0;
    overflow: hidden;
}
.s7-image {
}

/* Section 8 Styles */
.section-8 {
    padding: 160px 0;
}

.s8-title-container {
    text-align: center;
    margin-bottom: 80px;
}

.s8-title {
    font-family: Noto Serif TC;
    font-weight: 600;
    font-size: 60px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #1E1E1E;
    margin-bottom: 16px;
}

.s8-description {
    font-family: Noto Sans TC;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #1E1E1E;
}

.s8-main-container {
    display: flex;
    margin: 0 160px;
    gap: 16px;
    align-items: center;
    border-top:1px #F2F2F2 solid;
    border-bottom:1px #F2F2F2 solid;
}

.s8-main-container-2 {
    display: flex;
    margin: 0 160px;
    gap: 16px;
    align-items: center;
    flex-direction: row-reverse;
    border-top:1px #F2F2F2 solid;
    border-bottom:1px #F2F2F2 solid;
}

.s8-left-container {
    padding: 24px 0;
    flex: 1;
}

.s8-image {
}

.s8-right-container {
    flex: 1;
}

.s8-text-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: 40px;
}

.s8-content-title {
    font-family: Noto Sans TC;
    font-size: 32px;
    font-weight: 700;
    color: #1B2948;
    margin-bottom: 24px;
    letter-spacing: 2px;
    margin-bottom: 16px;
}
.s8-sub-title{
    font-family: Noto Sans TC;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 2px;
    text-align: center;
    color: #1E1E1E;
    margin-bottom: 8px;
}
.s8-content-text {
    font-family: Noto Sans TC;
    font-weight: 400;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: 2px;
    color: #1E1E1E;
}
.s8-google-map-container {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
.s8-google-map-text {
    font-family: Aboreto;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #1E1E1E;
    text-decoration: underline;
}
.s8-google-map-image {
    width: 24px;
    height: 24px;
}
.section-9{
    background-color: #1B2948;
    padding: 160px;
}
.s9-title-container{
    text-align: center;
}

/* Section 9 Styles */
.section-9 {
    padding: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.s9-title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-bottom: 40px;
}

.s9-main-title {
    font-family: Noto Serif TC;
    font-weight: 700;
    font-size: 52px;
    line-height: 130%;
    letter-spacing: 2px;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.s9-sub-title {
    font-family: Noto Serif TC;
    font-weight: 700;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #E29452;
}

.s9-content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.s9-faq-card {
    background: white;
    border-radius: 100px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 100%;
    padding: 120px;
    display: flex;
    flex-direction: column;
}

.s9-faq-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #CCCCCC;
    padding: 60px 0;
}

.s9-faq-item:first-child {
    border-top: 1px solid #CCCCCC;
}

.s9-faq-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.s9-faq-number-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.s9-faq-number {
    font-family: Aboreto;
    font-weight: 400;
    font-size: 60px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #E29452;
}

.s9-faq-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s9-faq-question {
    font-family: Noto Sans TC;
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #1B2948;
}

.s9-faq-answer {
    font-family: Noto Sans TC;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 2px;
    color: #1E1E1E;
}
.section-10 {
    padding: 160px 0;
    background-color: #1B2948;
}

.s10-main-container {
    display: flex;
    gap: 16px;
}

.s10-left-container {
    flex: 0.5625;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s10-image {
    width: 100%;
}

.s10-right-container {
    flex: 0.4375;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    text-align: start;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: #787878;
}
.s10-content-container{
    padding-left: 80px;
    margin-bottom: 80px;
}
.s10-text-content {
    text-align: start;

}

.s10-content-title {
    font-family: Noto Serif TC;
    font-weight: 700;
    font-size: clamp(2rem, 1.5539rem + 1.8301vw, 3.75rem);
    line-height: 140%;
    letter-spacing: 2px;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.s10-cta-container {
    width: 400px;
    background-color: #E29452;
    padding: 8px 12px;
    border-radius: 100px;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s10-cta-text {
    font-family: Noto Sans TC;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #1B2948;
}

.s10-business-info {
    font-family: Noto Sans TC;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #FFFFFF;
}
.s10-line-container{
    padding-left: 80px;

 }
.s10-line-button {
    width: 351px;
    background: #56A959;
    border: none;
    border-radius: 8px;
    padding: 20px 16px;
    color: #FFFFFF;
    font-family: 'Noto Sans TC';
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: center;
    justify-content: center;
    text-decoration: none;
}
.s10-line-button:hover{
    background: #00A300;
    transform: scale(1.05);
}
.s10-line-icon {
}
.footer {
    background-color: #1E1E1E;
    padding: 40px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.footer-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.footer-logo {
}

.footer-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom:24px;
}

.footer-info-item {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-start;
}

.footer-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-label {
    font-family: Noto Sans TC;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #FFFFFF;
    text-align: left;
}

.footer-content {
    font-family: Noto Sans TC;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #FFFFFF;
    text-align: left;
    text-decoration: none;
}

.footer-copyright {
    font-family: Noto Sans TC;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 2px;
    color: #CCCCCC;
    font-size: 14px;
    text-align: right;
    text-decoration: none;
}
.footer-copyright br {
    display: none;
}
.footer-bottom {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-social {
    display: flex;
}

.social-icon {
    color: #FFFFFF;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-icon img {
}
@media (max-width: 1780px) {
    .s5-image {
       width: 100%;
    }
    .s5-image-2 {
        width: 100%;
    }
    .s7-left-container{
        padding: 0 80px;
    }
    .section-7{
        gap: 20px;
    }
    .s8-main-container{
        margin: 0 80px;
    }
    .s8-main-container-2{
        margin: 0 80px;
    }
    .footer {
        padding: 24px;
    }
}
@media (max-width: 1700px) {
    .s5-content{
        padding: 0 40px;
    }
    .s5-text-area-2 {
        padding: 0 40px;
    }
}
@media (max-width: 1500px) {
    .s2-text-area-2{
        padding-left: 40px;
    }
    .s2-image-area-2{
        padding-left: 80px;
    }
    .s2-text-area-3{
        padding-right: 40px;
    }
    .s2-image-area-3{
        padding-right: 80px;
    }
    .s2-text-3 br{
        display: block;
    }
    .s2-text-3{
        text-align: start;
    }
    .s3-container {
        gap: 40px;
    }

    .s5-columns-container{
        margin-bottom: 20px;
    }
    .s5-note-container {
        margin: 36px 0;
        padding: 8px 12px;
    }
    .s5-main-title-2{
        margin-bottom: 20px;
    }
    /* .s5-main-container-2{
        align-items: center;
    } */
    .s5-pill-container{
        margin-bottom: 20px;
    }
    .s7-image{
        width: 100%;
    }
    .s8-image{
        width: 100%;
    }
    .s10-main-container{
        gap: 4px;
    }
    .s10-content-container{
        padding-left: 40px;
        margin-bottom: 40px;
    }
    .s10-line-container{
        padding-left: 40px;
    }
}
@media (max-width: 1470px) {
    .nav-left {
        gap: 40px;
    }
    .s1-title{
        font-size: 50px;
    }
    .s1-text{
        font-size: 18px;
    }
    .s2-title-2{
        font-size: 34px;
    }
    .s2-title-3{
        font-size: 34px;
    }
    .s4-row{
        gap: 40px;
    }
    .s4-item-text {
        font-size: 22px;
    }
    .nav-right {
        gap: 40px;
    }
    .s2-image-area-2{
        padding-left: 40px;
    }
    .s2-image-area-3{
        padding-right: 40px;
    }

    .section-9{
        padding: 120px;
    }
    .s9-faq-card{
        padding: 80px;
    }
    .s10-content-title{
        font-size:48px;
    }

}
@media (max-width: 1400px) {
    .s4-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 60px 40px;
        margin: 0 auto;
        justify-items: center;
        align-items: start;
    }
    .s5-content{
        padding: 0 20px;
    }
    .s5-text-area-2 {
        padding: 0 20px;
    }
    .s4-row {
        display: contents;
    }
    
    .s6-review-card {
        flex: 0 0 calc((100% - 32px) / 3);
        min-width: 320px;
    }
    .s7-left-container{
        padding: 0 20px;
    }
    .s8-main-container{
        margin: 0 40px;
    }
    .s8-main-container-2{
        margin: 0 40px;
    }
}
@media (max-width: 1350px) {
    .s2-title-2 {
        font-size: 30px;
    }
    .s2-title-3 {
        font-size: 30px;
    }
    .s3-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 60px;
        padding: 0;
        max-width: 1000px;
        margin: 0 auto;
    }
    .s3-line{
        display: none;
    }
    .s3-item {
        flex: 0 0 auto;
        min-width: 200px;
    }
    .s10-right-container {
        flex: 0.4375;
        display: flex;
        align-items: start;
        justify-content: center;
        flex-direction: column;
        text-align: start;
        border-width: 1px 0px 1px 0px;
        border-style: solid;
        border-color: #787878;
        padding: 16px 0;
    }
    .s10-content-title{
        font-size:44px;
    }
}


@media (max-width: 1200px) {
      .s3-bg{
        display: none;
    }
    .s5-bg{
        display: none;
    }
    .s7-bg{
        display: none;
    }
    .nav-section,
    .logo {
        display: none;
    }
    
    .logo a {
        display: block;
        text-decoration: none;
    }
    
    .logo a:hover {
        opacity: 0.8;
    }
    .mobile-header {
        display: flex;
    }
    .burger-menu {
        display: block;
    }
    .s2-2bg-image {
    display: none;
    }
    .s2-3bg-image {
    display: none;
    }
    
    .s2-4bg-image {
    display: none;
    }
    
    .s2-5bg-image {
    display: none;
    }
    .s2-title-2 {
        text-align: center;
    }
    .s2-title-3 {
        text-align: center;
    }
    /* .section-5 {
        padding: 80px 16px;
    } */
    .s5-main-container {
        flex-direction: column;
        gap: 40px;
        align-items: center;
        justify-content: center;
    }
    
    .s5-main-container-2 {
        flex-direction: column;
        gap: 40px;
        margin-top: 40px;
        align-items: center;
        justify-content: center;
    }
    .s5-title{
        font-size: 42px;
    }
    .s5-image-area,
    .s5-image-area-2 {
        order: 1;
    }
    
    .s5-text-area,
    .s5-text-area-2 {
        order: 2;
        padding: 0 16px;
        width: 100%;
        max-width: 100%;
    }
    
    .s5-content,
    .s5-content-2 {
        padding: 0;
        align-items: center;
        justify-content: center;
    }
    
    .s5-main-title,
    .s5-main-title-2 {
        text-align: center;
        margin-bottom: 24px;
    }
    
    .s5-pill-container {
        margin-bottom: 32px;
    }
    .s5-column-header,
    .s5-column-header-2 {
        margin-bottom: 16px;
    }
    .s5-columns-container,
    .s5-columns-container-2 {
        flex-direction: column;
        gap: 32px;
        margin-bottom: 32px;
    }
    .s5-empty-item {
    height: 0;
    margin-bottom: 0;
}
    .s5-button,
    .s5-button-2 {
        align-self: center;
        width: 100%;
        max-width: 100%;
    }
    
     .s1-container{
      padding-left: 60px;
     }
   .section-2{
    padding: 80px 16px;
    gap:40px;
   }
   .s2-hr-2,
   .s2-hr-3{
    display: none;
    }
   .s2-container-2 {
    flex-direction: column;
    align-items: center;
   }
    .s2-image-area-2 {
    justify-content: center;
    padding: 0;
    }
    .s2-text-area-2 {
     padding-left: 0px;
     text-align: center;
     align-items: center;
     justify-content: center;
     }

    .s2-img-2{
        padding-bottom: 16px;
        width: 100%;
        height: 100%;
    }

     .s2-container-3 {
        flex-direction: column-reverse;
        align-items: center;
    }
    .s2-image-area-3 {
    justify-content: center;
    padding: 0;
    }
    .s2-text-area-3 {
    padding-right: 0px;
    text-align: center;
    align-items: center;
    justify-content: center;
    }
    
    .s2-content-box {
        text-align: center;
    }

    
    .s2-text-3 {
        text-align: center;
    }
    
    .s2-img-3{
        padding-bottom: 16px;
        width: 100%;
        height: 100%;
    }
    .s2-img-4{
        padding-bottom: 16px;
        width: 100%;
        height: 100%;
    }
    .s2-img-5{
        padding-bottom: 16px;
        width: 100%;
        height: 100%;
    }
    .s2-text-3 br{
        display: none;
    }
    .section-3{
        padding: 80px 16px;
    }
    .section-4{
        padding: 80px 16px;
    }
      .section-7 {
        flex-direction: column;
        gap: 40px;
        padding: 40px 0 0 0;
    }
    .s7-text-container{
        gap: 8px;
        margin-bottom: 0;
    }
    .s7-left-container {
        width: 100%;
        order: 1;
        padding: 0 16px;
        min-height: auto;
        gap: 24px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .s7-title{
        font-size: 32px;
    }
    .s7-description{
        font-size: 16px;
    }
    .s7-rectangles-container{
        width: 100%;
    }
    .s7-rectangle{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        padding: 24px;
        gap: 16px;
        height: auto;
        min-height: 120px;
    }
    .s7-rectangle-text{
        font-size: 24px;
    }
    .s7-rectangle-amount{
        font-size: 48px;
    }
    .s7-rectangle-amount-2{
        font-size: 20px;
    }
    .s7-right-container {
        order: 2;
        justify-content: center;
        align-items: center;
        min-height: auto;
    }
    .s7-image {
        position: relative;
    }
    .s7-line-button{
        width: 100%;
        justify-content: center;
        align-self: center;
        text-align: center;
    }
    .section-9{
        padding: 100px;
    }
    .s9-faq-card{
        border-radius: 40px;
        padding: 60px;
    }
    .section-10 {
        padding: 80px 0;
    }
    
    .s10-main-container {
        flex-direction: column;
        gap: 60px;
    }
    
    .s10-left-container {
        order: 1;
    }
    
    .s10-right-container {
        order: 2;
        align-items: center;
        text-align: center;
        padding: 24px 0;
    }
    
    .s10-content-container {
        padding-left: 0;
        margin-bottom: 40px;
    }
    
    .s10-text-content {
        text-align: center;
    }
    
    /* .s10-content-title {
        font-size: 48px;
    } */
    
    .s10-cta-container {
        width: 100%;
        max-width: 400px;
        margin: 0 auto 40px auto;
    }
    
    .s10-business-info {
        margin-bottom: 0px;
    }
    
    .s10-line-container {
        padding-left: 0;
        align-items: center;
        justify-content: center;
    }
    
    .s10-line-button {
        width: 351px;
    }
    .footer-info{
        margin-bottom: 8px;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    
    .footer-copyright {
        text-align: right;
    }
    .footer-copyright br {
        display: block;
    }
}
/* Media Queries */
@media (max-width: 1024px) {

    .s1-title br{
        display: block;
    }
    .section-8{
        padding: 80px 16px;
    }
    .s8-main-container{
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        margin:0;
    }
    .s8-main-container-2{
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        margin:0;
    }
    .s8-image{
        width: 100%;
    }
    .s8-text-content{
        margin-bottom: 16px;
    }
    .s8-google-map-container{
        margin-bottom: 32px;
    }
}
@media (max-width: 868px) {
    .section-4{
        padding: 80px 16px;
    }
    .s4-title-row{
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }
    .s4-title-container{
        margin-bottom: 40px;
    }
    .s4-content {
        display: flex;
        flex-direction: column;
        gap: 60px;
        align-items: center;
    }
    
    .s4-row {
        display: contents;
    }
    
    .s4-item {
        max-width: 100%;
        width: 100%;
    }
    .s4-title-1{
        font-size: 32px;
    }
    .s4-title-2{
        font-size: 32px;
    }
    .s4-sub-title{
        font-size: 20px;
    }
    .s4-item-text{
        font-size: 20px;
    }
    .s6-title-container{
        padding: 0 16px;
    }
    .s6-main-container {
        padding-left:16px;
        padding-right:0px;
    }
    .s6-carousel-container {
        justify-content: flex-start;
    }
    .s6-carousel-track {
        gap:8px;
        justify-content: flex-start;
    }
    .s6-review-card {
        flex: 0 0 352px;
        min-width: 352px;
    }
    
    .s6-arrow-left,
    .s6-arrow-right {
        display: none;
    }
    .s6-title{
        font-size: 32px;
    }
    .s6-subtitle{
        font-size: 16px;
    }
    .section-6{
        padding: 40px 0px;
        min-height: auto;
    }
    .section-9{
        padding: 80px 16px;
        height: auto;
    }
    .s9-title-container{
        margin-bottom: 24px;
    }
    .s9-main-title{
        font-size: 32px;
    }
    .s9-sub-title{
        font-size: 40px;
    }
    .s9-faq-card{
        padding: 40px;
    }
    .s9-faq-item{
        padding: 40px 0;
    }
    .s9-faq-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .s9-faq-number-container {
        align-self: flex-start;
    }
    .s9-faq-content {
        gap:16px;
        width: 100%;
    }
    .s9-faq-number{
        font-size: 32px;
    }
    .s9-faq-question{
        font-size: 18px;
    }
    .s9-faq-answer{
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 2px;
    }
    .footer{
        padding: 40px 16px;
    }
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    
    .footer-left {
        align-self: flex-start;
    }
    .footer-logo{
        content: url('images/footer-mlogo.png');
    }
    .footer-right {
        align-items: flex-start;
        width: 100%;
    }
    
    .footer-info {
        margin-bottom: 24px;
    }
    .footer-label{
        font-size: 14px;
    }
    .footer-content{
        font-size: 14px;
    }
    .footer-social{
        align-items: flex-start;
        justify-content: flex-start;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .footer-copyright {
        letter-spacing: 2px;
        line-height: 100%;
        text-align: left;
    }
    .footer-copyright br{
        display: none;
    }
}

@media (max-width: 768px) {
    .s1-title{
        font-size: 32px;
        margin-bottom: 8px;
    }
    .s1-text{
        font-size: 16px;

    }
    .s1-container{
        padding-left: 16px;
        padding-bottom: 40px;
        padding-right: 16px;
       }
    .s1-text-br {
        display: block;
    }
    .mobile-logo img {
        content: url('images/mobile-logo.svg');
    }
    
    .mobile-menu-logo img {
        content: url('images/mobile-logo.svg');
    }
    
    .s2-container-2 {
        align-items: center;
    }
    
    .s2-image-area-2 {
        align-self: center;
    }

    .s2-text-area-2 {
        width: 358px;
        align-self: center;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .s2-title{
        font-size: 32px;
    }
    .s2-text{
        font-size: 40px;
        margin-right:24px;
    }
    .s2-title-2 {
        font-size: 24px;
        text-align: left;
    }
    .s2-text-2 {
        font-size: 16px;
        text-align: left;
    }
    .s2-img-2 {
        content: url('images/s2-2m.png');
    }
    .s2-img-3 {
        content: url('images/s2-3m.png');
    }
    
    .s2-img-4 {
        content: url('images/s2-4m.png');
    }
    
    .s2-img-5 {
        content: url('images/s2-5m.png');
    }
    .s2-text-area-3 {
        width: 358px;
        align-self: center;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .s2-content-box {
        text-align: left;
    }
    .s2-title-3 {
        font-size: 24px;
        text-align: left;
    }
    .s2-text-3 {
        font-size: 16px;
        text-align: left;
    }
    .section-3 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .s3-title-container{
        padding-bottom: 40px;
    }
    .s3-container {
        flex-direction: column;
        gap: 40px;
        padding: 0 16px;
        max-width: none;
    }
    .s3-title{
        font-size: 32px;
    }
    .s3-title-2{
        font-size: 40px;
    }
    .section-5{
        padding: 80px 0;
    }
    .s5-main-container {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .s5-main-container-2 {
        flex-direction: column;
        gap: 24px;
        margin-top: 24px;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .s5-text-area,
    .s5-text-area-2 {
        padding: 0 16px;
    }
    .s5-columns-container-2 {

        margin-bottom: 0px;
    }
    .s5-pill{
        letter-spacing: 3.5px;
    }
    .s5-content,
    .s5-content-2 {
        padding: 0;
        align-items: flex-start;
        justify-content: flex-start;
        margin:0;
    }
    .s5-main-title,
    .s5-main-title-2 {
        font-size: 24px;
        text-align: left;
        margin-bottom: 24px;
    }
    .s5-note-container{
        padding: 8px 12px;
        margin: 24px 0;
    }
    .s5-note{
        font-size: 16px;
        letter-spacing: 4px;
        white-space: normal;
    }
    .s6-title-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;
        gap: 8px;
    }
    .s8-title{
        font-size: 32px;
    }
    .s8-description{
        font-size: 16px;
    }
    .s8-title-container{
        margin-bottom: 40px;
    }
    .s8-content-title{
        font-size: 24px;
    }
    .s8-sub-title{
        font-size: 16px;
    }
    .s8-content-text{
        font-size: 16px;
    }
    .section-10{
        padding: 40px 0;
    }
    .s10-right-container{
        padding:24px 16px;
    }
    .s10-main-container{
        gap:16px;
    }
    .s10-content-title{
        font-size: 32px;
    }
    .s10-cta-container{
        margin-bottom: 24px;
    }
}
@media (max-width: 390px) {

    .s1-text{
        margin-bottom: 16px;
    }
    .section-1 {
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    .s2-text-area-2 {
        align-self: flex-start;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .s2-text-area-3 {
        align-self: flex-start;
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .s2-title-3{
        text-align: start;
    }
    .s10-content-title{
        text-align: start;
    }
    .s10-cta-text{
        letter-spacing: 1px;
    }
    .s10-business-info{
        letter-spacing: 1px;
    }
    .footer-social{
        align-items: center;
        justify-content: center;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .footer-copyright {
        letter-spacing: 2px;
        line-height: 100%;
        text-align: center;
    }
    .footer-label{
        letter-spacing: 1px;
    }
    .footer-content{
        letter-spacing: 1px;
    }
}