/* ========================================
   RESPONSIVE MEDIA QUERIES - ORGANIZED BY BREAKPOINT
   ======================================== */

/* ========================================
   LARGE TABLET/SMALL DESKTOP - 1024px
   ======================================== */
@media (max-width: 1024px) and (min-width: 768px) {
    .navbar {
        padding: 0 1.5rem;
    }

    .navbar-container {
        max-width: 950px;
    }

    .navbar-container .logo img {
        height: 36px;
    }

    .navbar-menu {
        gap: 1.5rem;
    }

    .navbar-menu li a {
        font-size: 16px;
    }

    .navbar-menu li span {
        font-size: 12px;
    }

    .Language {
        gap: 0.4rem;
    }

    .lang-button {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }

    /* Section 1 (Hero) adjustments for 1024px */
    .section-1 {
        padding: 5rem 1.5rem 3rem;
    }

    .content-container {
        max-width: 900px;
        gap: 3.5rem;
        padding: 0 1.5rem;
    }

    .content-container h1 {
        font-size: clamp(1.8rem, 3.8vw, 2.3rem);
    }

    /* Section 2 (About) adjustments for 1024px */
    section.section-2 {
        height: 580px;
    }

    section.section-2 .container {
        margin-top: 100px;
        margin-left: 150px;
        padding: 30px 28px;
    }

    section.section-2 header.hero h1 {
        font-size: 30px;
        font-weight: bold;
    }

    section.section-2 p.subtitle {
        font-size: 11px;
    }

    section.section-2 .content {
        gap: 35px;
        margin-top: 25px;
    }

    section.section-2 .left {
        min-width: 220px;
    }

    section.section-2 .label {
        width: 100px;
        font-size: 13px;
    }

    section.section-2 .value {
        font-size: 13px;
    }

    section.section-2 .right {
        width: 380px;
        gap: 20px;
    }

    section.section-2 .feature {
        gap: 16px;
        width: 630px;
    }

    section.section-2 a.tag {
        min-width: 210px;
        padding: 7px 11px;
    }

    section.section-2 .feature p {
        font-size: 12px;
    }

    /* Section 3 (Business) adjustments for 1024px */
    .section-3 {
        padding-top: 85px;
        height: 310px;
    }

    .business_inner .titles {
        margin-bottom: 85px;
    }

    .business_title {
        font-size: 39px;
        font-weight: bold;
    }

    .business_subtitle {
        font-size: 11px;
        margin: 7px 0 16px 0;
    }

    .business_line {
        font-size: 13px;
    }

    /* Section 4 (Global Network) adjustments for 1024px */
    .section-4 {
        height: 800px;
        margin-top: 80px;
    }

    .section-4 .background {
        top: 80px;
        margin-top: 60px;
        height: 80%;
    }

    .section-4 .network-section {
        margin-left: 120px;
        margin-bottom: 30px;
    }

    .section-4 .network-section h1 {
        font-size: 36px;
        font-weight: bold;
    }

    .section-4 .network-section span {
        font-size: 11px;
    }

    .section-4 .container .cards-section {
        gap: 30px;
        justify-content: center;
        align-items: flex-start;
    }

    .section-4 .container .cards-section .divider-1 {
        gap: 35px;
    }

    .section-4 .container .cards-section .divider-2 {
        display: flex;
        margin-top: 80px;
        gap: 35px;
    }

    .section-4 .container .cards {
        width: 420px;
        height: 245px;
        overflow: hidden;
        display: flex;
    }

    .section-4 .container .cards .card-left {
        flex: 1;
        width: 100%;
        margin: 24px 24px 0 24px;
        display: flex;
        flex-direction: column;
        height: calc(100% - 48px);
    }

    .section-4 .container .cards .card-right {
        flex: 1;
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /* Add this to ensure proper cropping */
    }

    .section-4 .container .cards .card-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-height: 100%;
        /* Ensure minimum height */
        min-width: 100%;
        /* Ensure minimum width */
    }

    .section-4 .container .cards .card-left .country {
        margin-bottom: 16px;
        font-size: 11px;
    }

    .section-4 .container .cards .card-left h1 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .section-4 .container .cards .card-left .postal,
    .section-4 .container .cards .card-left .address,
    .section-4 .container .cards .card-left .phone {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .section-4 .container .cards .card-left .phone {
        margin-bottom: 10px;
    }

    .section-4 .container .cards .read-more-container {
        margin-top: auto;
        padding-top: 6px;
    }

    .section-4

    /* Section 5 (News) adjustments for 1024px */
    .section-5 {
        height: 240px;
    }

    .news-container {
        width: 620px;
    }

    .news-left {
        padding: 13px;
        margin-bottom: 25px;
    }

    .news-left h2 {
        font-size: 28px;
    }

    .news-left p {
        font-size: 10px;
        margin: 4px 0 13px;
    }

    .news-left a {
        padding: 9px 30px;
        font-size: 11px;
        width: 160px;
    }

    .news-item {
        padding: 7px 13px;
        font-size: 12px;
    }

    .news-date {
        width: 90px;
    }

    /* Section 6 (Recruit) adjustments for 1024px */
    .section-6 {
        height: 908px;
    }

    .section-6 .text {
        padding: 85px 18px 0 18px;
    }


    .section-6 .text h1 {
        font-size: 39px;
    }

    .section-6 .text span {
        font-size: 11px;
    }

    /* Hide desktop grid layout for 1024px range */
    .section-6 .cards {
        display: none;
    }

    /* Show carousel only for 1024px to 768px range */
    .section-6-carousel-container {
        display: block !important;
        position: relative;
        width: 100%;
        height: 650px;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }

    .section-6-carousel-wrapper {
        display: flex;
        transition: transform 0.3s ease;
        height: 100%;
        gap: 0;
        width: calc(396.730px * 5);
    }

    .section-6-carousel-card {
        flex: 0 0 396.730px;
        width: 396.730px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
        margin: 0;
    }

    .section-6 .cards .card div {
        margin-top: 350px;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 1);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    /* Style the span text */
    .section-6 .cards .card div span {
        color: rgba(51, 166, 171, 1);
        font-size: 14px;
        font-weight: 500;
        z-index: 3;
    }

    /* 2nd and 4th cards margin-top */
    .section-6-carousel-card:nth-child(2),
    .section-6-carousel-card:nth-child(4) {
        margin-top: 50px;
    }

    .section-6-carousel-card .card-content {
        width: 100%;
        height: 441px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 30px;
        box-sizing: border-box;
        margin: 0;
    }

    /* Add background images for each carousel card */
    .section-6-carousel-card:nth-child(1) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image1.png');
    }

    .section-6-carousel-card:nth-child(2) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image2.png');
    }

    .section-6-carousel-card:nth-child(3) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image3.png');
    }

    .section-6-carousel-card:nth-child(4) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image4.png');
    }

    .section-6-carousel-card:nth-child(5) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image5.png');
    }

    .section-6-carousel-card h3 {
        color: white;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 12px;
        text-align: left;
    }

    .section-6-carousel-card .read-more-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #33A6AB;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 1);
        align-items: center;
        gap: 8px;
        width: 102px;
        cursor: pointer;
    }

    /* Carousel Navigation */
    .section-6-carousel-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 20px;
        right: 20px;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 10;
    }

    .section-6-carousel-btn {
        color: white;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 44px;
        pointer-events: auto;
    }

    .section-6-carousel-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* Section 7 (Philosophy) adjustments for 1024px */
    .section-7 {
        padding: 75px 0;
    }

    .section-7 h1 {
        font-size: 39px;
        font-weight: bold;
    }

    .section-7 .vision-pattern {
        max-width: 1050px;
    }

    .section-7 .vision-pattern p {
        margin-top: 18px;
        font-size: 14px;
        letter-spacing: 1.8px;
        padding-left: 75px;
        padding-right: 75px;
    }

    /* Section 8 (Footer) adjustments for 1024px */
    .footer {
        padding: 35px 18px;
    }

    .footer-top {
        max-width: 880px;
        margin: 0 auto 18px;
        padding-bottom: 18px;
    }

    .footer-column h3 {
        font-size: 13px;
        margin-bottom: 9px;
    }

    .footer-column ul li {
        font-size: 12px;
        margin: 3px 0;
    }

    .footer .icons_ {
        max-width: 880px;
        margin: 18px auto 0;
        padding: 14px 0;
    }

    .footer .icons_ i img {
        height: 26px;
        width: 26px;
    }

    .footer-logo img {
        max-height: 36px;
    }

    .footer-bottom {
        font-size: 11px;
        padding: 32px 0 0px 0;
    }
}

/* ========================================
   MEDIUM TABLET - 900px
   ======================================== */
/* @media (max-width: 900px) and (min-width: ) {
    section.section-2 {
        margin-left: 6px;
        width: calc(100% - 50px);
    }
    .navbar {
        padding: 0 1.2rem;
    }

    .navbar-menu {
        gap: 1.2rem;
    }

    .navbar-menu li a {
        font-size: 15px;
    }

    .navbar-menu li span {
        font-size: 11px;
    }

    .Language {
        gap: 0.3rem;
    }

    .lang-button {
        padding: 0.25rem 0.5rem;
        font-size: 0.65rem;
    }
} */

/* ========================================
   SMALL TABLET - 800px
   ======================================== */
/* @media (max-width: 800px) {

    .navbar {
        padding: 0 1rem;
    }

    .navbar-menu {
        gap: 1rem;
    }

    .navbar-menu li a {
        font-size: 14px;
    }

    .navbar-menu li span {
        font-size: 10px;
    }

    .Language {
        gap: 0.25rem;
    }

    .lang-button {
        padding: 0.2rem 0.4rem;
        font-size: 0.6rem;
    }
} */



/* ========================================
   TABLET LANDSCAPE - 768px
   ======================================== */
@media (max-width: 769px) and (min-width: 639px) {
    .section-1 {
        height: 100vh;
        width: 100vw
    }

    .section-1 .content-container h1 {
        font-size: 47.19px;
        line-height: 1.3;
        padding: 0 40px;
    }

    .dropdown-menu {
        position: static;
        min-width: 100%;
        box-shadow: none;
        border: none;
        border-top: 1px solid #e5e5e5;
        margin-top: 10px;
        padding: 20px 0;
        background: #f8f9fa;
    }

    .dropdown.active .dropdown-menu {
        transform: none;
    }

    .dropdown-title {
        font-size: 16px;
    }

    .dropdown-list a {
        padding: 12px 15px;
    }

    .navbar {
        padding: 0 1rem;
    }

    .navbar-container {
        height: 56px;
    }

    .navbar-container .logo img {
        height: 37.28px;
    }

    .mobile-menu-toggle {
        display: flex;
        /* Remove any left margin */
        margin-right: 9.82px;
    }

    .Language {
        margin-left: 330px;
        justify-content: center;
        gap: 0.25rem;
    }

    /* Remove gap between language and toggle button */
    .navbar-container {
        display: flex;
        /* align-items: center; */
    }

    /* .navbar-container > *:not(.navbar-menu) {
    margin: 0;
  } */

    /* Position language and toggle button together */
    /* .Language + .mobile-menu-toggle {
    margin-left: 0;
  } */

    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #f8f8f8;
        border: 1px solid #e0e0e0;
        border-top: none;
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 40;
    }

    .navbar-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .navbar-menu li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
    }

    .navbar-menu li:last-child {
        border-bottom: none;
    }

    .nav-link {
        padding: 0.75rem 1rem;
        display: block;
        width: 100%;
    }

    /* Switch to abbreviated text on mobile */
    .lang-button .full-text {
        display: none;
    }

    .lang-button .short-text {
        display: inline;
    }

    .lang-button {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
        min-width: 35px;
    }

    /* Section 2 - About BITEX */
    section.section-2 {
        height: auto;
        width: 100%;

    }

    section.section-2 .container {
        max-width: 700px;
        margin-top: 80px;
        margin-left: 0;

    }

    section.section-2 .hero h1 {
        font-size: 34.1099853515625px;
        margin-bottom: 8px;
        color: black;
        font-weight: bold;
    }

    section.section-2 .hero .subtitle {
        font-size: 14px;
        margin-bottom: 105px;
        font-weight: bold;
    }

    section.section-2 .content .left .row {
        margin-bottom: 30px;
    }

    section.section-2 .content .left .row .label {
        font-size: 14px;
        min-width: 120px;
        margin-bottom: 8px;
    }

    section.section-2 .content .left .row .value {
        font-size: 14px;
        line-height: 1.6;
    }

    section.section-2 .content .left .row .right .feature {
        margin-bottom: 20px;
    }

    section.section-2 .content .left .row .right .feature .tag {
        font-size: 12px;
        padding: 6px 12px;
    }

    section.section-2 .content .left .row .right .feature p {
        font-size: 13px;
        line-height: 1.5;
    }

    /* Section 3 - Our Business */
    .section-3 {
        padding: 60px 30px;
    }

    .section-3 .business_inner {
        max-width: 600px;
        color: white;
    }

    .section-3 .business_title {
        font-size: 36px;
        margin-bottom: 8px;
        color: white;
        font-weight: bold;
    }

    .section-3 .business_subtitle {
        font-size: 14px;
        margin-bottom: 30px;
        color: white;
    }

    .section-3 .business_line {
        font-size: 16px;
        line-height: 1.8;
        color: rgb(255 255 255);
    }

    .section-3 .business_title {
        font-size: 53.261px;
        margin-bottom: 8px;
        color: rgb(255, 255, 255);
    }

    /* Section 4 - Global Network */
    .section-4 {
        padding: 40px 30px;
    }

    .section-4 .network-section h1 {
        font-size: 36px;
        margin-bottom: 8px;
        font-weight: bold;
    }

    .section-4 .network-section span {
        font-size: 14px;
        font-weight: bold;
    }

    .section-4 .container .cards-section {
        padding: 40px 0;
    }

    .section-4 .container .cards {
        max-width: 500px;
        margin: 0 auto 30px;
    }

    .section-4 .container .cards .card-left {
        padding: 20px;
        width: fit-content;
    }

    .section-4 .container .cards .card-left h1 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .section-4 .container .cards .card-left .country {
        font-size: 15px;
        padding: 0;
    }

    .section-4 .container .cards .card-left .postal,
    .section-4 .container .cards .card-left .address,
    .section-4 .container .cards .card-left .phone {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .section-4 .container .cards .card-right {
        height: 180px;
        width: 100%;
    }


    .carousel-card .cards {
        width: 100%;
        height: auto;
        min-height: 700px;
        background-color: white;
        overflow: hidden;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
    }

    .carousel-card .card-left {
        padding: 24px;
        flex: 1;
    }

    .carousel-card .card-left .country {
        display: inline-block;
        padding: 4px 12px;
        font-size: 11px;
        margin-bottom: 16px;
        color: #666;
    }

    .carousel-card .card-left h1 {
        font-size: 20px;
        margin-bottom: 20px;
        color: #000;
    }

    .carousel-card .card-left .postal,
    .carousel-card .card-left .address,
    .carousel-card .card-left .phone {
        font-size: 13px;
        line-height: 1.4;
        color: #333;
        margin-bottom: 8px;
    }

    .carousel-card .card-left .read-more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #33A6AB;
        text-decoration: none;
        font-size: 13px;
        margin-top: 0px;
        font-weight: 500;
    }

    .carousel-card .card-right {
        height: 200px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .carousel-card .card-right svg,
    .carousel-card .card-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Carousel Navigation */
    .carousel-navigation {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 500px;
        padding: 0 20px;
        position: absolute;
        top: 50%;
        left: 0px;
        z-index: 30;
    }

    .carousel-btn {
        color: white;
        width: 44px;
        height: 44px;
        display: flex;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 48px;
        align-items: center;
        justify-content: center;
    }

    .carousel-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .section-4 .carousel-card:nth-child(1) {
        margin-left: 112px !important;
    }

    .section-4 .carousel-card:nth-child(2) {
        margin-left: 7px !important;
    }

    .section-4 .carousel-card:nth-child(3) {
        margin-left: 41px !important;
    }

    .section-4 .carousel-card:nth-child(4) {
        margin-left: 42px !important;
    }

    /* Section 5 - News */
    .section-5 {
        height: auto;
        padding: 0px 30px 48px;
    }

    .news-container {
        flex-direction: column;
        gap: 30px;
        max-width: 600px;
        margin: 0 auto;
    }

    /* .news-left {
        text-align: center;
    } */

    .news-left h2 {
        font-size: 32px;
        margin-bottom: 8px;
    }

    .news-left p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .news-left a {
        font-size: 14px;
        padding: 12px 24px;
    }

    .news-right {
        width: 100%;
    }

    .news-item {
        padding: 20px 0;
        border-bottom: 1px solid #000000;
    }

    /* .news-item:last-child {
        border-bottom: none;
    } */

    .news-date {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .news-text {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Section 6 - Recruit */
    .section-6 {
        height: 879px !important;
        padding: 60px 0px;
    }

    .section-6 .text h1 {
        font-size: 36px;
        margin-bottom: 8px;
    }

    .section-6 .text span {
        font-size: 14px;
        margin-bottom: 40px;
    }

    /* Hide desktop grid layout */
    .section-6 .cards {
        display: none;
    }

    /* Show carousel for 769px */
    .section-6-carousel-container {
        display: block !important;
        position: relative;
        width: 100%;
        height: 500px;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }

    .section-6-carousel-wrapper {
        display: flex;
        transition: transform 0.3s ease;
        height: 100%;
        gap: 0;
        width: calc(396.730px * 5);
    }

    .section-6-carousel-card {
        flex: 0 0 396.730px;
        width: 396.730px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
        margin: 0;
    }

    /* 2nd and 4th cards margin-top */
    .section-6-carousel-card:nth-child(2),
    .section-6-carousel-card:nth-child(4) {
        margin-top: 50px;
    }

    .section-6-carousel-card .card-content {
        width: 100%;
        height: 441px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 30px;
        box-sizing: border-box;
        margin: 0;
    }

    /* Add background images for each carousel card */
    .section-6-carousel-card:nth-child(1) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image1.png');
    }

    .section-6-carousel-card:nth-child(2) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image2.png');
    }

    .section-6-carousel-card:nth-child(3) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image3.png');
    }

    .section-6-carousel-card:nth-child(4) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image4.png');
    }

    .section-6-carousel-card:nth-child(5) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image5.png');
    }

    .section-6-carousel-card h3 {
        color: white;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 12px;
        text-align: left;
    }

    .section-6-carousel-card .read-more-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #33A6AB;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 1);
        align-items: center;
        gap: 8px;
        width: 90px;
        cursor: pointer;
    }

    /* Carousel Navigation */
    .section-6-carousel-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 20px;
        right: 20px;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 10;
    }

    .section-6-carousel-btn {
        color: white;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 44px;
        pointer-events: auto;
    }

    .section-6-carousel-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* Section 6 Carousel for tablet */
    .section-6-carousel-container {
        padding: 0 20px;
    }

    .section-6-carousel-card {
        min-width: 280px;
        margin: 0 10px;
    }

    .section-6-carousel-card .card-content {
        height: 350px;
        padding: 25px;
    }

    .section-6-carousel-card .card-content h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .section-6-carousel-card .card-content .card-subtitle {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .section-6-carousel-card .card-content .read-more-btn {
        font-size: 13px;
        padding: 10px 20px;
    }

    /* Section 7 - Philosophy */
    .section-7 {
        padding: 60px 30px;
    }

    .section-7 h1 {
        font-size: 36px;
        margin-bottom: 30px;
        font-weight: bold;
    }

    .vision-pattern p {
        font-size: 16px;
        line-height: 1.8;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Section 8 - Footer */
    .section-8 {
        width: 100vw;
    }

    .read-more-container {
        margin-top: 100px;

    }

    .footer-top {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 30px;
    }

    .footer-column {
        text-align: center;
    }

    .footer-column h3 {
        font-size: 16px;
        margin-bottom: 15px;
        color: rgba(255, 255, 255, 1);
    }

    .footer-column ul li {
        font-size: 14px;
        margin-bottom: 8px;
        color: rgba(255, 255, 255, 1);
    }

    .icons_ {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 20px;
    }

    .footer-social {
        gap: 15px;
    }

    .footer-social i img {
        width: 20px;
        height: 20px;
    }

    .footer-logo img {
        height: 50px;
    }

    .footer-bottom {
        font-size: 12px;
        text-align: center;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    /* Language buttons - JP/EN format for tablets */
    .Language {
        position: relative;
        cursor: pointer;
    }

    .Language::before {
        content: "JP/EN";
        font-size: 14px;
        font-weight: 500;
        color: #2a2a2a;
        padding: 0.375rem 0.75rem;
        transition: all 0.2s ease;
        display: block;
        text-align: center;
        background: transparent;
    }

    .Language:hover::before {
        background: #f0f0f0;
    }

    .Language.jp-active::before {
        content: "JP/EN";
        background: #ffffff00;
        color: #000000;

    }

    .Language.en-active::before {
        content: "JP/EN";
        background: #2a2a2a;
        color: #ffffff;
    }

    .lang-button {
        display: none;
    }

    .section-4 {
        height: auto;
        padding: 0;
        background: transparent;
        margin-bottom: 50px;
        position: relative;
    }

    .section-4 .background {
        height: 900px !important;
        top: 120px;
        margin-top: 150px !important;
        position: absolute;
        z-index: -1;
    }

    .section-4 .network-section {
        color: #000;
        padding: 40px 20px 30px;
        text-align: left;
        background: transparent;
        position: relative;
        z-index: 10;
        margin: 0 0 30px 0;
    }

    .section-4 .network-section h1 {
        color: #000;
        font-size: 36px;
        margin-bottom: 12px;
        font-weight: 300;
        text-align: left;
        font-weight: bold;
    }

    .section-4 .network-section span {
        color: #666;
        font-size: 14px;
        letter-spacing: 1.5px;
        text-align: left;
    }

    .section-4 .container {
        position: relative;
        padding-top: 0;
        margin: 0;
    }

    /* Hide desktop layout */
    .section-4 .container .cards-section {
        display: none;
    }

    /* Show carousel for 640px and below */
    .carousel-container {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 40px 0 60px;
        max-width: 640px;
        margin: 0 auto;
    }

    .carousel-wrapper {
        display: flex;
        transition: transform 0.3s ease;
        width: max-content;
    }

    .carousel-card {
        flex-shrink: 0;
        padding-right: 142px;
    }

    .carousel-card .cards {
        height: auto;
        min-height: 900px;
        background-color: rgba(255, 255, 255, 1);
        overflow: hidden;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
    }

    .carousel-card .card-left {
        padding: 24px;
        flex: 1;
    }

    .carousel-card .card-left .country {
        display: inline-block;
        padding: 4px 12px;
        font-size: 11px;
        margin-bottom: 16px;
        color: #666;
    }

    .carousel-card .card-left h1 {
        font-size: 20px;
        margin-bottom: 20px;
        color: #000;
    }

    .carousel-card .card-left .postal,
    .carousel-card .card-left .address,
    .carousel-card .card-left .phone {
        font-size: 13px;
        line-height: 1.4;
        color: #333;
        margin-bottom: 8px;
    }

    .carousel-card .card-left .read-more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #33A6AB;
        text-decoration: none;
        font-size: 13px;
        margin-top: 0px;
        font-weight: 500;
    }

    .carousel-card .card-right {
        height: 200px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .carousel-card .card-right svg,
    .carousel-card .card-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Carousel Navigation */
    .carousel-navigation {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 600px;
        padding: 0 20px;
        position: absolute;
        top: 50%;
        left: 10px;
        z-index: 30;
    }

    .carousel-btn {

        color: white;
        width: 44px;
        height: 44px;
        display: flex;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 48px;
        align-items: center;
        justify-content: center;
    }

    /* .carousel-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
  }
   */
    .carousel-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* .carousel-indicators {
    display: flex;
    gap: 8px;
  } */
    /*   
  .carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .carousel-indicator.active {
    background: white;
  } */
}

/* ========================================
   TABLET RANGE - 768px to 639px  
   ======================================== */
@media (max-width: 768px) and (min-width: 639px) {

    /* Section 6 - Recruit Carousel for 768px-639px range */
    .section-6 {
        height: 879px !important;
        padding: 60px 0px;
    }

    .section-6 .text h1 {
        font-size: 36px;
        margin-bottom: 8px;
    }

    .section-6 .text span {
        font-size: 14px;
        margin-bottom: 40px;
    }

    /* Hide desktop grid layout for 768px-639px range */
    .section-6 .cards {
        display: none;
    }

    /* Show carousel only for 768px to 639px range */
    .section-6-carousel-container {
        display: block !important;
        position: relative;
        width: 100%;
        height: 650px;
        overflow: hidden;
        margin: 0 auto;
        padding: 0;
    }

    .section-6-carousel-wrapper {
        display: flex;
        transition: transform 0.3s ease;
        height: 100%;
        gap: 0;
        width: calc(396.730px * 5);
    }

    .section-6-carousel-card {
        flex: 0 0 396.730px;
        width: 396.730px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
        margin: 0;
    }

    /* 2nd and 4th cards margin-top */
    .section-6-carousel-card:nth-child(2),
    .section-6-carousel-card:nth-child(4) {
        margin-top: 50px;
    }

    .section-6-carousel-card .card-content {
        width: 100%;
        height: 441px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 30px;
        box-sizing: border-box;
        margin: 0;
    }

    /* Add background images for each carousel card */
    .section-6-carousel-card:nth-child(1) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image1.png');
    }

    .section-6-carousel-card:nth-child(2) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image2.png');
    }

    .section-6-carousel-card:nth-child(3) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image3.png');
    }

    .section-6-carousel-card:nth-child(4) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image4.png');
    }

    .section-6-carousel-card:nth-child(5) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image5.png');
    }

    .section-6-carousel-card h3 {
        color: white;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 12px;
        text-align: left;
    }

    .section-6-carousel-card .read-more-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #33A6AB;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 1);
        align-items: center;
        gap: 8px;
        width: 102px;
        cursor: pointer;
    }

    /* Carousel Navigation */
    .section-6-carousel-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 20px;
        right: 20px;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 10;
    }

    .section-6-carousel-btn {
        color: white;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 44px;
        pointer-events: auto;
    }

    .section-6-carousel-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* Only navbar menu active state for 768px-639px */
    .navbar-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        width: 100%;
    }

    /* Position dropdown menus to the right for Company and Recruit */
    .dropdown-menu {
        position: absolute !important;
        left: auto !important;
        right: -194px !important;
        min-width: 200px !important;
        transform: translateX(0) !important;
        top: 86% !important;
        z-index: 1000 !important;
        background: rgba(225, 225, 225, 1) !important;
    }

    /* Ensure other nav items stay behind dropdown */
    .navbar-menu li {
        position: relative;
        z-index: 1;
    }

    .dropdown.active {
        z-index: 1001 !important;
    }
}

/* ========================================
   MOBILE LANDSCAPE - 640px
   ======================================== */
@media (max-width: 640px) {
    .section-1 {
        padding: 4rem 1rem 2rem;
        min-height: 900px;
    }

    .content-container {
        gap: 2.5rem;
        padding: 0 0.5rem;
    }

    .content-container h1 {
        font-size: clamp(1.2rem, 5vw, 2rem);
        line-height: 1.3;
    }

    .section-1 .background-video video {
        width: 640px;
        height: 900px;
        object-fit: cover;
    }

    section.section-2 {
        height: auto;
        min-height: 100vh;
        margin: 0;
        padding: 80px 0 60px;
        width: 100vw;
        overflow-x: hidden;
    }

    section.section-2 .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 20px;
    }

    section.section-2 header.hero {
        margin-bottom: 40px;
        padding: 0 10px;
    }

    section.section-2 header.hero h1 {
        margin: 0 0 12px 0;
        font-size: 36px;
        font-weight: bold;
        letter-spacing: 0.5px;
        color: #000;
        line-height: 1.2;
    }

    section.section-2 p.subtitle {
        margin: 0;
        color: #666;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 500;
    }

    section.section-2 .content {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 40px;
        align-items: stretch;
    }

    section.section-2 .left {
        flex: none;
        min-width: 100%;
        width: 100%;
    }

    section.section-2 .row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 25px 15px;
        align-items: stretch;
        margin-bottom: 2px;
    }

    section.section-2 .row:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    section.section-2 .label {
        width: 100%;
        font-size: 16px;
        color: #333;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }

    section.section-2 .value {
        flex: none;
        width: 100%;
        font-size: 15px;
        line-height: 1.6;
        padding: 0;
    }

    section.section-2 .right {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 15px;
    }

    section.section-2 .feature {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
        padding: 20px;
        width: 100%;
        margin-bottom: 15px;
    }

    section.section-2 a.tag {
        padding: 12px 20px;
        font-weight: 600;
        cursor: default;
        min-width: auto;
        width: 100%;
        text-align: center;
        font-size: 14px;
        border: 1px solid #070707;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    section.section-2 .feature p {
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
        color: #666;
        text-align: left;
        padding: 0 5px;
    }

    /* Special styling for the business features row */
    section.section-2 .row:last-child {
        background: transparent;
        box-shadow: none;
        padding: 20px 0;
    }

    section.section-2 .row:last-child .label {
        padding-left: 10px;
        margin-bottom: 25px;
        font-size: 18px;
        color: #000;
    }

    .section-3 {
        padding: 60px 0 80px;
        height: auto;
        min-height: 500px;
        width: 100vw;
        margin: 0;
        overflow-x: hidden;
        background: url('building.png') no-repeat center center #00000091;
        background-size: cover;
        position: relative;
    }

    .business-page {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        min-height: 400px;
        z-index: 2;
    }

    .business_inner {
        text-align: center;
        color: #000000;
        max-width: 50%;
        z-index: 2;
        position: relative;
    }

    .business_inner .titles {
        margin-bottom: 60px;
    }

    .business_title {
        margin: 0 0 15px 0;
        font-size: 36px;
        line-height: 1.2;
        font-weight: 300;
        letter-spacing: 0.5px;
        color: rgb(255 255 255);
        font-weight: bold;
    }

    .business_subtitle {
        margin: 0 0 40px 0;
        font-size: 14px;
        text-transform: uppercase;
        opacity: 0.8;
        color: #ffffff;
        letter-spacing: 1.5px;
        font-weight: 500;
    }

    .business_line {
        margin: 0;
        font-size: 16px;
        opacity: 0.9;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.8;
        color: #ffffff;
        padding: 0 10px;
        word-wrap: break-word;
        text-align: center;
    }

    .section-4 {
        height: auto;
        padding: 0;
        background: transparent;
        margin-bottom: 100px;
        position: relative;
    }

    .section-4 .background {
        height: 800px;
        top: 120px;
        margin-top: 0;
    }

    .section-4 .network-section {
        color: #000;
        padding: 0px 0px 0px 10px;
        text-align: left;
        background: transparent;
        position: relative;
        z-index: 10;
        margin: 0 0 30px 0;
    }

    .section-4 .network-section h1 {
        color: #000;
        font-size: 36px;
        margin-bottom: 12px;
        font-weight: 300;
        text-align: left;
        font-weight: bold;
    }

    .section-4 .network-section span {
        color: #000000;
        font-size: 14px;
        letter-spacing: 1.5px;
        text-align: left;
        font-weight: bold;
    }

    .section-4 .container {
        position: relative;
        padding-top: 0;
        margin: 0;
    }

    /* Hide desktop layout */
    .section-4 .container .cards-section {
        display: none;
    }

    .carousel-card {
        flex: 0 0 460px;
        width: 460px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Remove individual card margins - let JS handle positioning */
    .section-4 .carousel-card:nth-child(1),
    .section-4 .carousel-card:nth-child(2),
    .section-4 .carousel-card:nth-child(3),
    .section-4 .carousel-card:nth-child(4) {
        margin-left: 0 !important;
    }

    .carousel-card .cards {
        width: 460px;
        height: auto;
        min-height: 650px;
        background-color: white;
        overflow: hidden;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
    }

    .carousel-card .card-left {
        padding: 24px;
        flex: 1;
    }

    .carousel-card .card-left .country {
        display: inline-block;
        padding: 4px 12px;
        font-size: 11px;
        margin-bottom: 16px;
        color: #666;
    }

    .carousel-card .card-left h1 {
        font-size: 20px;
        margin-bottom: 20px;
        color: #000;
    }

    .carousel-card .card-left .postal,
    .carousel-card .card-left .address,
    .carousel-card .card-left .phone {
        font-size: 13px;
        line-height: 1.4;
        color: #333;
        margin-bottom: 8px;
    }

    .read-more-container {
        margin-top: 100px;
    }

    .carousel-card .card-left .read-more {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #33A6AB;
        text-decoration: none;
        font-size: 13px;
        margin-top: 0px;
        font-weight: 500;
    }

    .carousel-card .card-right {
        height: 200px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .carousel-card .card-right svg,
    .carousel-card .card-right img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Carousel Navigation */
    .carousel-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 30;
        max-width: 640px;
        margin: 0 auto;
    }

    .carousel-btn {

        color: white;
        width: 44px;
        height: 44px;
        display: flex;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 48px;
        align-items: center;
        justify-content: center;
    }

    /* .carousel-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
  }
   */
    .carousel-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    /* .carousel-indicators {
    display: flex;
    gap: 8px;
  } */
    /*   
  .carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .carousel-indicator.active {
    background: white;
  } */

    .section-5 {
        height: 1000px;
        width: 100vw;
        margin: 0;
        padding: 60px 70px;
        display: flex;
        justify-content: center;
    }

    .news-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 600px;
        font-family: Arial, sans-serif;
    }

    /* Left side - Header section */
    .news-left {
        flex: none;
        padding: 0;
    }

    .news-left h2 {
        margin: 0 0 12px 0;
        font-size: 36px;
        font-weight: 300;
        color: #000;
    }

    .news-left p {
        margin: 0 0 30px 0;
        font-size: 14px;
        font-weight: normal;
        color: #666;
        letter-spacing: 1px;
    }

    .news-left a {
        padding: 12px 100px;
        border: 2px solid #000;
        cursor: pointer;
        font-size: 14px;
        width: auto;
        min-width: 150px;
        transition: all 0.3s ease;
        font-weight: 500;
    }


    .section-5 .news-container .news-left p {
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
    }

    /* Right side - News items */
    .news-right {
        flex: none;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        gap: 16px;
    }

    .news-item {
        display: flex;
        flex-direction: column;
        padding: 20px;
        font-size: 14px;
        gap: 12px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-bottom: #000000 1px solid;
    }

    .news-item:hover {
        transform: translateY(-2px);
    }



    .news-item:last-child {
        border-bottom: #000000 1px solid;
    }

    .news-date {
        width: auto;
        font-weight: 600;
        font-size: 13px;
        color: #666;
        border-bottom: 1px solid #eee;
        padding-bottom: 8px;
    }

    .news-text {
        flex: 1;
        color: #333;
        line-height: 1.6;
        font-size: 14px;
    }

    /* Add more news items for mobile to fill the height */
    .news-right::after {
        content: '';
        display: block;
        min-height: 200px;
    }

    .section-6 {
        height: 1008px;
        padding: 40px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        width: 100vw;
        overflow-x: hidden;
    }

    .section-6 .text {
        padding: 0 20px 40px;
        margin-bottom: 20px;
    }

    .section-6 .text h1 {
        font-size: 48px;
        font-weight: 300;
        margin-bottom: 10px;
    }

    .section-6 .text p {
        font-size: 14px;
        color: #ccc;
        letter-spacing: 1px;
    }

    /* Hide desktop cards */
    .section-6 .cards {
        display: none;
    }

    /* Show carousel */
    .section-6-carousel-container {
        display: block !important;
        position: relative;
        width: 100vw;
        /* Full viewport width */
        height: 500px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        /* Negative margin to break out of padding */
    }

    .section-6-carousel-wrapper {
        display: flex;
        transition: transform 0.3s ease;
        height: 100%;
        gap: 0;
        width: calc(500px * 5);
        /* No gaps between cards */
        /* Position the first card to show 140px of previous card */
        transform: translateX(-140px);
    }

    .section-6-carousel-card {
        flex: 0 0 500px;
        /* Each card takes exactly 20% (100% / 5 cards) */
        width: 500px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
        /* Remove padding to eliminate gaps */
        margin: 0;
        /* Remove margin to eliminate gaps */
    }

    .section-6-carousel-card .card-content {
        width: 100%;
        /* Full width of container */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 30px;
        box-sizing: border-box;
        margin: 0;
        /* Remove margin */
    }

    .section-6-carousel-card:nth-child(1) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image1.png');
        height: 450px;

    }

    .section-6-carousel-card:nth-child(2) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image2.png');
        margin-top: 200px;
        padding-bottom: 100px;
        height: 450px;
    }

    .section-6-carousel-card:nth-child(3) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image3.png');
        height: 450px;
    }

    .section-6-carousel-card:nth-child(4) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image4.png');
        margin-top: 200px;
        padding-bottom: 100px;
        height: 450px;
    }

    .section-6-carousel-card:nth-child(5) .card-content {
        background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%), url('image5.png');
        height: 450px;
    }

    .section-6-carousel-card h3 {
        color: white;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 12px;
        text-align: left;
    }

    .section-6-carousel-card .card-subtitle {
        color: #ccc;
        font-size: 12px;
        margin-bottom: 20px;
    }

    .section-6-carousel-card .read-more-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #33A6AB;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 1);
        align-items: center;
        gap: 8px;
        width: 102px;
        cursor: pointer;
    }

    /* Carousel Navigation */
    .section-6-carousel-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 20px;
        right: 20px;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 10;
    }

    .section-6-carousel-btn {
        color: white;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 44px;
        pointer-events: auto;
    }

    .section-6-carousel-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .section-7 {
        width: 100vw;
        padding: 60px 20px;
        height: auto;
        min-height: 400px;
        overflow-x: hidden;
        margin: 0;
    }

    .section-7 h1 {
        font-size: 48px;
        color: #000;
        margin: 0 0 30px 0;
        text-align: center;
        letter-spacing: 1px;
        font-weight: bold;
    }

    .section-7 .vision-pattern {
        margin: 0 auto;
        max-width: 100%;
        padding: 0 10px;
        width: 100%;
    }

    .section-7 .vision-pattern p {
        margin-top: 0;
        color: #666;
        letter-spacing: 1px;
        font-size: 16px;
        line-height: 1.8;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        padding: 20px;
        margin: 0;
    }

    .section-8 {
        width: 100vw;
        height: fit-content;
    }

    .footer {
        background: #000;
        color: #fff;
        padding: 50px 20px 30px;
        font-family: Arial, sans-serif;
        width: 100vw;
        margin: 0;
        overflow-x: hidden;
    }

    .footer-top {
        display: flex;
        flex-direction: column;
        gap: 30px;
        max-width: 100%;
        margin: 0 auto 30px;
        border-bottom: 1px solid #444;
        padding-bottom: 30px;
    }

    .footer-column {
        width: 100%;
        text-align: left;
    }

    .footer-column h3 {
        font-size: 16px;
        margin-bottom: 15px;
        font-weight: 600;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .footer-column ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .footer-column ul li {
        font-size: 14px;
        margin: 8px 0;
        line-height: 1.5;
        color: #ccc;
        padding: 2px 0;
        transition: color 0.2s ease;
    }

    .footer-column ul li:hover {
        color: #fff;
        cursor: pointer;
    }

    /* Icons section mobile layout */
    .footer .icons_ {
        max-width: 100%;
        margin: 20px auto 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
        padding: 20px;
    }

    .footer-social {
        display: flex;
        align-items: center;
        justify-content: center;
        /* gap: 20px; */
        order: 2;
    }

    .footer-social i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        transition: all 0.3s ease;
    }

    .footer-social i:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-2px);
    }

    .footer-social i img {
        width: 22px;
        height: 22px;
        filter: brightness(0) invert(1);
    }

    .footer-logo {
        order: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .footer-logo img {
        max-height: 50px;
        width: auto;
    }

    .footer-bottom {
        text-align: center;
        font-size: 13px;
        color: #999;
        margin-top: 30px;
        padding-top: 25px;
        border-top: 1px solid #333;
        line-height: 1.4;
    }


    .footer-social {
        gap: 3px;
        order: 1;
    }
}

/* ========================================
   MOBILE PORTRAIT - 480px
   ======================================== */
@media (max-width: 480px) and (min-width: 420px) {

    /* Section 1 - Hero Section */
    .navbar {
        padding: 0 1rem;
    }

    .navbar-container {
        height: 56px;
    }

    .navbar-container .logo img {
        height: 37.28px;
    }

    .mobile-menu-toggle {
        display: flex;
        margin-right: 9.82px;
    }

    .Language {
        margin-left: 146px;
        justify-content: center;
        gap: 0.05rem;
    }

    .navbar-container {
        display: flex;
    }

    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #f8f8f8;
        border: 1px solid #e0e0e0;
        border-top: none;
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 40;
    }

    .navbar-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .navbar-menu li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
    }

    .navbar-menu li:last-child {
        border-bottom: none;
    }

    .nav-link {
        padding: 0.75rem 1rem;
        display: block;
        width: 100%;
    }

    /* Switch to abbreviated text on mobile */
    .lang-button .full-text {
        display: none;
    }

    .lang-button .short-text {
        display: inline;
    }

    .lang-button {
        padding: 0.3rem 0.5rem;
        font-size: 0.7rem;
        min-width: 35px;
    }

    /* Language buttons - JP/EN format for mobile */
    .Language {
        position: relative;
        cursor: pointer;

    }

    .Language::before {
        content: "JP/EN";
        font-size: 14px;
        font-weight: 500;
        color: #2a2a2a;
        padding: 0.375rem 0.75rem;
        transition: all 0.2s ease;
        display: block;
        text-align: center;
        background: transparent;
    }

    .Language:hover::before {
        background: #f0f0f0;
    }

    .Language.jp-active::before {
        content: "JP/EN";
        background: #ffffff00;
        color: #000000;
    }

    .Language.en-active::before {
        content: "JP/EN";
        background: #2a2a2a;
        color: #ffffff;
    }

    .lang-button {
        display: none;
    }


    .dropdown-list {
        padding: 0px 0 1px 6px;
    }



    .section-1 {
        padding: 3rem 0.5rem 1.5rem;
        height: 100vh;
    }

    .content-container {
        gap: 2rem;
        padding: 0 0.25rem;
    }



    .content-container h1 {
        font-size: clamp(1.1rem, 6vw, 1.8rem);
        letter-spacing: -0.01em;
        font-size: 67.19px;
    }


    section.section-2 .container {
        padding: 0 15px;
    }

    section.section-2 header.hero h1 {
        font-size: 28px;
        margin-bottom: 10px;
        font-weight: bold;
    }

    section.section-2 p.subtitle {
        font-size: 12px;
    }

    section.section-2 .row {
        padding: 20px 12px;
        gap: 10px;
    }

    section.section-2 .label {
        font-size: 15px;
    }

    section.section-2 .value {
        font-size: 14px;
    }

    section.section-2 .feature {
        padding: 15px;
        gap: 12px;
    }

    section.section-2 a.tag {
        padding: 10px 16px;
        font-size: 13px;
    }

    section.section-2 .feature p {
        font-size: 13px;
    }

    .section-3 {
        padding: 50px 0 70px;
        min-height: 450px;
    }

    .business-page {
        padding: 0 15px;
        min-height: 350px;
    }

    .business_inner .titles {
        margin-bottom: 50px;
    }

    .business_title {
        font-size: 28px;
        margin-bottom: 12px;
        color: rgb(255 255 255);
    }

    .business_subtitle {
        font-size: 13px;
        margin-bottom: 35px;
        color: rgb(255 255 255);
    }

    .business_line {
        font-size: 15px;
        line-height: 1.7;
        padding: 0 8px;
        color: rgb(255 255 255);
    }

    /* Hide desktop layout */
    .section-4 .container .cards-section {
        display: none;
    }

    /* Responsive carousel container widths */
    .carousel-container {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 40px 0 60px;
        margin: 0 auto;
        max-width: 480px;
    }

    .carousel-wrapper {
        display: flex;
        transition: transform 0.3s ease;
        width: max-content;
    }

    .carousel-card {
        flex: 0 0 380px;
        width: 380px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .carousel-card .cards {
        width: 296px !important;
        height: auto !important;
        min-height: 600px;
        background-color: white !important;
        overflow: hidden;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        flex-direction: column;
    }

    /* Remove specific margins - let JS handle centering */
    .section-4 .carousel-card:nth-child(1),
    .section-4 .carousel-card:nth-child(2),
    .section-4 .carousel-card:nth-child(3),
    .section-4 .carousel-card:nth-child(4) {
        margin-left: 0 !important;
    }

    /* Carousel Navigation for 480px-426px */
    .carousel-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 30;
        max-width: 480px;
        margin: 0 auto;
    }

    .background {
        height: 900px !important;
    }

    .section-7 {
        padding: 40px 15px;
        min-height: 350px;
    }

    .section-7 h1 {
        font-size: 36px;
        margin-bottom: 25px;
        font-weight: bold;
    }

    .section-5 {
        height: 700px;
        width: 100vw;
        margin: 0;
        padding: 60px 70px;
        display: flex;
        justify-content: center;
    }

    .section-7 .vision-pattern p {
        font-size: 15px;
        line-height: 1.7;
        padding: 18px;
        letter-spacing: 0.5px;
    }

    .section-4 .background {
        height: 910px !important;
        top: 120px;
        margin-top: 150px !important;
        position: absolute;
        z-index: -1;
    }

    .section-3 .business_line {
        font-size: 29.26001px !important;
        margin-bottom: 8px;
        padding: 0 33px !important;
    }

    .section-3 .business_subtitle {
        font-size: 29.26001px !important;
    }

    .footer {
        padding: 40px 15px 25px;
    }

    .footer-top {
        gap: 25px;
        margin-bottom: 25px;
        padding-bottom: 25px;
        padding-left: 34px;
    }

    .footer-column h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .footer-column ul li {
        font-size: 13px;
        margin: 6px 0;
    }

    .footer .icons_ {
        gap: 20px;
        padding: 15px;
        display: flex;
        align-items: center;
    }

    .footer-social {
        gap: 3px;
        order: 1;
    }

    .footer-social i {
        width: 40px;
        height: 40px;
    }

    .news-right::after {
        content: '';
        display: block;
        min-height: 100px;
    }


    .footer-social i img {
        width: 36px !important;
        height: 36px !important;
        margin-bottom: 29px;
    }

    .footer-logo img {
        max-height: 45px !important;
        width: 288px !important;
    }

    .footer-bottom {
        font-size: 12px;
        margin-top: 25px;
        padding-top: 20px;
    }


    .news-left h2 {
        font-weight: bold;
    }
}

/* ========================================
   SMALL MOBILE - 425px to 327px
   ======================================== */
@media (max-width: 425px) and (min-width: 327px) {

    /* Navbar responsive styles for 425px-327px */
    .navbar {
        padding: 0 0.75rem;
    }

    .navbar-container {
        height: 52px;
    }

    .navbar-container .logo img {
        height: 32px;
    }

    .content-container h1 {
        font-size: clamp(1.1rem, 6vw, 1.8rem);
        letter-spacing: -0.01em;
        font-size: 58.19px;
    }

    .mobile-menu-toggle {
        display: flex;
        margin-right: 8px;
    }

    .Language {
        margin-left: 180px;
        justify-content: center;
        gap: 0.25rem;
    }

    .navbar-container {
        display: flex;
    }

    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #f8f8f8;
        border: 1px solid #e0e0e0;
        border-top: none;
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 40;
    }

    .navbar-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .navbar-menu li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
    }

    .navbar-menu li:last-child {
        border-bottom: none;
    }

    .nav-link {
        padding: 0.75rem 1rem;
        display: block;
        width: 100%;
    }

    /* Language buttons - JP/EN format for 425px-327px */
    .Language {
        position: relative;
        cursor: pointer;
    }

    .Language::before {
        content: "JP/EN";
        font-size: 13px;
        font-weight: 500;
        color: #2a2a2a;
        padding: 0.3rem 0.6rem;
        transition: all 0.2s ease;
        display: block;
        text-align: center;
        background: transparent;
    }

    .Language:hover::before {
        background: #f0f0f0;
    }

    .Language.jp-active::before {
        content: "JP/EN";
        background: #ffffff00;
        color: #000000;
    }

    .Language.en-active::before {
        content: "JP/EN";
        background: #2a2a2a;
        color: #ffffff;
    }

    .lang-button {
        display: none;
    }

    /* Section 4 carousel setup for 425px-327px */
    .carousel-container {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 40px 0 60px;
        margin: 0 auto;
        max-width: 425px;
    }

    .carousel-wrapper {
        display: flex;
        transition: transform 0.3s ease;
        width: max-content;
    }

    .carousel-card {
        flex: 0 0 320px;
        width: 320px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .carousel-card .cards {
        width: 320px;
        height: auto;
        min-height: 550px;
        background-color: white;
        overflow: hidden;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
    }

    /* Remove specific margins - let JS handle centering */
    .section-4 .carousel-card:nth-child(1),
    .section-4 .carousel-card:nth-child(2),
    .section-4 .carousel-card:nth-child(3),
    .section-4 .carousel-card:nth-child(4) {
        margin-left: 0 !important;
    }

    /* Carousel Navigation for 425px-327px */
    .carousel-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 30;
        max-width: 425px;
        margin: 0 auto;
    }

    .content-container h1 {
        font-size: 62.885372161865234px;
    }

    section.section-2 header.hero h1 {
        margin: 0 0 12px 0;
        font-size: 36px;
        font-weight: bold;
        letter-spacing: 0.5px;
        color: #000;
        line-height: 1.2;
    }

    section.section-2 p.subtitle {

        font-weight: bold;
        color: rgba(0, 0, 0, 1);
    }

    section.section-2 .label {
        color: rgba(128, 128, 128, 1);
    }


    section.section-2 .row:last-child .label {
        margin-bottom: 25px;
        padding-left: 10px;
        font-size: 18px;
        align-items: start;
        color: rgba(128, 128, 128, 1);
    }

    section.section-2 .container {
        max-width: 700px;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-top: 58px;
    }

    section.section-2 {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .section-3 .titles h1 {
        color: white;
    }

    .section-3 .titles .business_line {
        color: white;
    }

    .section-4 .container .cards .card-left {
        flex: 0 0 80% !important;
        width: 80% !important;
        max-width: 80% !important;
    }

    .section-4 .container .cards .card-right {
        flex: 0 0 20% !important;
        width: 20% !important;
        max-width: 20% !important;
    }

    .section-4 .network-section h1 {
        color: #000;
        font-size: 36px;
        margin-bottom: 12px;
        font-weight: bold;
        text-align: left;
    }

    .section-7 h1 {
        font-weight: bold;
    }


    .section-4 .carousel-navigation {
        gap: 288px !important;
    }

    .news-container {
        align-items: start !important;
        width: 100%;
        max-width: 600px;
        padding: 0 15px;
    }

    .section-5 {
        height: 1000px !important;
        padding: 0px 0 172px 0px;
    }

    .news-right::after {
        content: '';
        display: none;
        min-height: 100px;
    }

    .news-left {
        padding: 0 0 0px 13px;
    }

    .section-5 .news-container .news-left p {
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
    }


    .news-left a {
        padding: 10px 30px !important;
    }

    .news-left h2 {
        margin: 0 0 12px 0;
        font-size: 36px;
        font-weight: bold;
        color: #000;
    }

    .footer-social i img {
        width: 33px !important;
        height: 33px !important;
        margin-bottom: 29px;
    }

    .footer-social {
        gap: 3px;
        order: 1;
    }


    /* .carousel-card .card-right {
        min-width: 60px !important;
        height: 60px !important;
    }
        



    .section-4 .container .cards .card-right {
        width: 100% !important; 
    } */

}

/* ========================================
   EXTRA SMALL MOBILE - 326px
   ======================================== */
@media (max-width: 326px) {
    .section-1 {
        padding: 2.5rem 0.25rem 1rem;
        min-height: 300px;
    }

    .content-container h1 {
        font-size: 34.19px !important;
    }

    /* Enhanced navbar responsive styles for 326px and below */
    .navbar {
        padding: 0 0.5rem;
    }

    .navbar-container {
        height: 48px;
    }

    .navbar-container .logo img {
        height: 24px;
    }

    .mobile-menu-toggle {
        display: flex;
        margin-right: 6px;
    }

    .Language {
        margin-left: 92px;
        justify-content: center;
        gap: 0.25rem;
    }

    .navbar-container {
        display: flex;
    }

    .navbar-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #f8f8f8;
        border: 1px solid #e0e0e0;
        border-top: none;
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 40;
    }

    .navbar-menu.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .navbar-menu li {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #e0e0e0;
    }

    .navbar-menu li:last-child {
        border-bottom: none;
    }

    .nav-link {
        padding: 0.75rem 1rem;
        display: block;
        width: 100%;
    }

    /* Language buttons - JP/EN format for 326px and below */
    .Language {
        position: relative;
        cursor: pointer;
    }

    .Language::before {
        content: "JP/EN";
        font-size: 11px;
        font-weight: 500;
        color: #2a2a2a;
        padding: 0.25rem 0.5rem;
        transition: all 0.2s ease;
        display: block;
        text-align: center;
        background: transparent;
    }

    .Language:hover::before {
        background: #f0f0f0;
    }

    .Language.jp-active::before {
        content: "JP/EN";
        background: #ffffff00;
        color: #000000;
    }

    .Language.en-active::before {
        content: "JP/EN";
        background: #2a2a2a;
        color: #ffffff;
    }

    .lang-button {
        display: none;
    }


    .dropdown-list {
        list-style: none;
        padding: 0px 0 2px 12px;
        margin: 0;
    }

    /* Section 4 carousel setup for 326px and below */
    .carousel-container {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: 40px 0 76px;
        margin: 0 auto;
        max-width: 100%;
    }

    .section-4 .background {
        top: 147px;
        margin-top: 0;
    }


    .carousel-wrapper {
        display: flex;
        transition: transform 0.3s ease;
        width: max-content;
        gap: 65px !important;
        padding: 0 50px;
    }

    .carousel-card {
        flex: 0 0 200px;
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .carousel-card .cards {
        width: 180px;
        height: auto;
        background-color: white;
        overflow: hidden;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
    }

    /* Remove specific margins - let JS handle centering */
    .section-4 .carousel-card:nth-child(1) {
        margin-left: 0 !important;
    }

    .section-4 .carousel-card:nth-child(2) {
        margin-left: 0 !important;
    }

    .section-4 .carousel-card:nth-child(3) {
        margin-left: 0 !important;
    }

    .section-4 .carousel-card:nth-child(4) {
        margin-left: 0 !important;
    }

    .news-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 600px;
        font-family: Arial, sans-serif;
        padding: 0 24px;
    }

    /* Carousel Navigation for 326px and below */
    .carousel-navigation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        z-index: 30;
        max-width: 326px;
        margin: 0 auto;
    }

    section.section-2 {
        padding: 0px 0 40px;
        margin-top: 203px !important;
    }

    section.section-2 .container {
        padding: 0 10px;

        margin-left: 9px;
        margin-top: 80px;
    }

    section.section-2 header.hero h1 {
        font-size: 24px;
        font-weight: bold;
    }

    section.section-2 .row {
        padding: 15px 10px;
    }

    section.section-2 .feature {
        padding: 12px;
    }

    section.section-2 a.tag {
        padding: 8px 12px;
        font-size: 12px;
    }


    .section-3 {
        padding: 40px 0 60px;
        min-height: 400px;
    }

    .business-page {
        padding: 0 10px;
        min-height: 300px;
    }

    .business_inner .titles {
        margin-bottom: 40px;
    }

    .business_title {
        font-size: 24px;
        margin-bottom: 10px;
        color: white;
        font-weight: bold;
        color: rgb(255 255 255);
    }

    .business_subtitle {
        font-size: 12px;
        margin-bottom: 30px;
        color: rgb(255 255 255);
    }

    .business_line {
        font-size: 14px;
        line-height: 1.6;
        padding: 0 5px;
        color: rgb(255 255 255);
    }




    .section-4 {
        height: auto;
        padding: 0 !important;
        margin-top: 20px !important;
    }

    .section-4 .network-section {
        margin: 0 0 0px 0 !important;
    }

    .section-4 .background {
        height: 681px !important;
    }

    .section-4 .container .cards .card-left {
        margin: 23px 32px;
        flex: 1;
    }

    .carousel-card .card-left .country {
        padding: 4px 0px;

    }

    .section-4 .carousel-navigation {
        gap: 200px;
    }

    .carousel-card .card-left {
        padding: 8px !important;
    }

    .carousel-card .card-left h3 {
        font-size: 14px !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    .carousel-card .card-left p {
        font-size: 11px !important;
        line-height: 1.4 !important;
        margin-bottom: 4px !important;
    }

    .carousel-card .card-right {
        min-width: 60px !important;
        height: 60px !important;
    }

    .section-4 .container .cards .card-left {
        width: 80%;
    }

    .section-4 .container .cards .card-right {
        width: 100%;
    }

    /* .carousel-wrapper {
        gap: 8px !important;
    } */

    .section-5 {
        height: 583px;
        padding: 0px 0 172px 0px;
    }


    .section-5 .news-container .news-left p {
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
    }

    .news-left a {
        padding: 12px 96px;
    }

    .news-item {
        display: flex;
        flex-direction: column;
        padding: 15px;
        font-size: 14px;
        gap: 12px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border-bottom: #000000 1px solid !important;
    }

    .news-right::after {
        display: none;
    }



    .news-left {
        padding: 0 0 0px 13px !important;
    }

    .news-left h2 {
        font-weight: bold;
    }

    .section-6 {
        height: 762px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        width: 100vw;
        overflow-x: hidden;
    }


    .section-6-carousel-container {
        display: block !important;
        position: relative;
        width: 100vw;
        height: 500px;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }

    .section-6-carousel-wrapper {
        display: flex;
        transition: transform 0.3s ease;
        height: 100%;
        gap: 0;
        width: calc(100vw * 5);
        transform: translateX(0px);
    }

    .section-6-carousel-card {
        flex: 0 0 100vw;
        width: 100vw;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0;
        margin: 0;
    }

    .section-6-carousel-card .read-more-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #33A6AB;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        padding: 8px 10px;
        background: rgba(255, 255, 255, 1);
        align-items: center;
        gap: 8px;
        width: 102px;
        cursor: pointer;
    }


    .section-7 {
        padding: 30px 10px;
        min-height: 300px;
    }

    .section-7 h1 {
        font-size: 28px;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .section-7 .vision-pattern p {
        font-size: 14px;
        line-height: 1.6;
        padding: 15px;
        letter-spacing: 0.3px;
    }


    .footer {
        padding: 35px 10px 20px;
    }

    .footer-top {
        gap: 20px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .footer-column h3 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .footer-column ul li {
        font-size: 12px;
        margin: 5px 0;
    }

    .footer .icons_ {
        gap: 15px;
        padding: 10px;
    }

    .footer-social {
        gap: 12px;
    }

    .footer-social i {
        width: 36px;
        height: 36px;

    }

    .footer-social i img {
        width: 33px !important;
        height: 33px !important;
        margin-bottom: 22px;


    }

    .footer-logo img {
        max-height: 50px;
    }

    .footer-bottom {
        font-size: 11px;
        margin-top: 20px;
        padding-top: 15px;
    }

    .footer-social {
        gap: 3px;
        order: 1;
    }
}