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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

@font-face {
    font-family: 'Britannica';
    src: url('../../public/fonts/Britanica-Thin/Britanica-Thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #000000;
    color: #ffffff;
    overflow-x: hidden;
    line-height: 1.6;
    min-height: 100vh;
    width: 100%;
}

/* Container */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-link.active::after {
    width: 100%;
}

/* Section Padding */
.section-padding {
    padding-left: 100px;
    padding-right: 100px;
}

.nav-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 150px;
    display: flex;
    align-items: center;
    gap: 7.5px;
}

/* Header Styles */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    backdrop-filter: blur(20px);
    padding: 20px 0;
    border-bottom: 1px solid #ffffff;
    background: rgba(0, 6, 16, 0.31);
    transition: all 0.3s ease;
}

.header .container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Styles */
.logo {
    width: 150px;
    display: flex;
    align-items: center;
    gap: 7.5px;
    cursor: pointer;
}

.logo-image {
    width: 150px;
    height: 60px;
}
/* Hero Section */
.hero-section {
    position: relative;
    padding-top: 200px;
    width: 100%;
    background-color: #000000;
}

.hero-main-text-container {
    display: flex;
    flex-direction: column;
}

/* Hero Background */
.hero-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(0.7) contrast(1.1) saturate(0.8);
    -webkit-filter: brightness(0.7) contrast(1.1) saturate(0.8);
}

.scroll-down-image {
    position: absolute;
    top: 600px;
    right: 0;
    width: 1080px;
    height: 1080px;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    opacity: 0.7;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            rgba(0, 6, 16, 0.3) 0%,
            rgba(0, 6, 16, 0.1) 50%,
            rgba(0, 6, 16, 0.4) 100%);
    z-index: 2;
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    max-width: 600px;
    overflow: visible;
    word-wrap: break-word;
    box-sizing: border-box;
}

.hero-icon {
    width: 24px;
    height: 21px;
    margin-bottom: 5px;
}

.hero-title {
    font-size: 48px;
    font-weight: 100;
    color: white;
    line-height: 1.1;
    font-family: 'Britannica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.hero-subtitle {
    font-size: 20px;
    margin-bottom: 50px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    line-height: 1.3;
    font-family: 'Noto Sans JP', sans-serif;
}

.hero-description {
    font-size: 36px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    font-family: 'Noto Sans JP', sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.hero-text-container {
    margin-left: 103px;
    width: 700px;
    font-family: 'Noto Sans JP', sans-serif;

}

.mission-heading {
    font-size: 36px;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
    margin-bottom: 30px;
}

.mission-text {
    font-size: 20px;
    color: #ffffff;
}

.hero-text-container {
    margin-top: 150px;
}

.mission-content {
    font-weight: 100;
}

/* Vision & Company Profile Section */
.vision-company-section {
    background-color: #000000;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 200px 0 120px 0;
}

.Japan-map-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 1440px;
    gap: 60px;
    align-items: flex-start;
    justify-content: space-between;
}

/* Container */
.vision-company-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    gap: 100px;
    align-items: flex-start;
    min-height: 800px;
}

/* Left Side - Text Content */
.text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 670px;
    padding-top: 0;
}

/* Vision Section */
.vision-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 60px;
}

.vision-title {
    font-size: 30px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 5px;
}

.vision-description {
    display: flex;
    flex-direction: column;
}

.vision-description p {
    font-size: 20px;
    font-weight: 100;
    color: #ffffff;
    margin: 0;
    line-height: 1.7;
    font-family: 'Noto Sans JP', sans-serif;
}

/* Company Profile Section */
.company-profile-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 5;
}

.company-profile-title {
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    margin: 0;
    line-height: 1.1;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 24px;
}

.company-details {
    display: flex;
    flex-direction: column;
    gap: 15px !important;
}

.detail-row {
    display: flex;
    gap: 150px;
    align-items: flex-start;
}

.detail-label {
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    min-width: 90px;
    flex-shrink: 0;
    font-family: 'Noto Sans JP', sans-serif;
    border-bottom: solid 1px #ffffff ;
}

.detail-value {
    font-size: 20px;
    font-weight: 100;
    color: #ffffff;
    line-height: 1.5;
    font-family: 'Noto Sans JP', sans-serif;
    flex: 1;
}

/* Right Side - Japan Map */
.map-container {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 640px;
    max-height: 640px;
    padding-top: 0;
}

.japan-map {
    width: 100%;
    max-width: 600px;
    height: 100%;
    min-height: 640px;
    max-height: 640px;
    position: absolute;
    overflow: hidden;
}

/* Japan Map Styling - Creating the map effect with CSS */
/* .japan-map::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 650px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 650"><path d="M225 60 L280 100 L320 150 L330 200 L325 250 L320 300 L310 350 L300 400 L290 450 L280 500 L270 550 L260 600 L250 630 L240 600 L230 550 L220 500 L210 450 L200 400 L190 350 L180 300 L175 250 L170 200 L180 150 L210 100 Z" fill="%23333" opacity="0.7" stroke="%23444" stroke-width="1"/><path d="M180 400 L190 420 L200 440 L210 460 L220 480 L230 500 L240 520 L250 540 L260 520 L270 500 L280 480 L290 460 L300 440 L310 420 L320 400 L310 380 L300 360 L290 340 L280 320 L270 300 L260 280 L250 260 L240 280 L230 300 L220 320 L210 340 L200 360 L190 380 Z" fill="%23333" opacity="0.7" stroke="%23444" stroke-width="1"/></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.8;
} */

/* Glowing points on the map */
.japan-map::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 42%;
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6), 0 0 25px rgba(255, 255, 255, 0.3);
}

/* Create multiple glowing points using pseudo-elements and additional styling */


/* Removed map-content wrapper - not needed with correct HTML structure */

.japan-map-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    opacity: 0.9;
    filter: brightness(0.8) contrast(1.2);
    display: block;
    max-width: 100%;
}

/* ===========================================
   LOGISTICS SECTION - NEW IMAGE DISPLAY
   =========================================== */

/* Logistics Section */
.logistics-section {
    background-color: #ffffff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.logistics-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
}

/* Text Content */
.logistics-text-content {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}

.logistics-title {
    font-size: 36px;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: 1.1;
    font-family: 'Noto Sans JP', sans-serif;
}

.logistics-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 600px;
}

.logistics-description p {
    font-size: 20px;
    font-weight: 200;
    color: #000000;
    margin: 0;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
}

/* Decorative Drone Icons */
.drone-icons {
    position: absolute;
    top: 0;
    right: 0;
    width: 515px;
    height: 215px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}

.drone-icon {
    width: 515px;
    height: 215px;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Three Images Row */
.logistics-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.logistics-image-item {
    flex: 0 0 auto;
    width: 450px;
    height: 250px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logistics-image-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.logistics-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ===========================================
   MATERIAL TRANSPORT SECTION - NEW DESIGN
   =========================================== */

/* Material Transport Section */
.material-transport-section {
    background-color: #000000;
    padding: 0;
    position: relative;
    overflow: hidden;
    margin-top: -50px;
}


/* Container */
.material-transport-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 100px;
    display: flex;
    gap: 80px;
    position: relative;
}

/* Image Collage */
.image-collage {
    flex: 1;
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collage-image {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.collage-image:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Image 1: Bottom-left, furthest back (z-index: 1) */
.collage-image-1 {
    top: 0;
    left: 0;
    width: 450px;
    height: 250px;
    z-index: 1;
}

/* Image 2: Top-right, middle layer (z-index: 2) */
.collage-image-2 {
    top: 200px;
    right: 0;
    width: 450px;
    height: 250px;
    z-index: 2;
}

/* Image 3: Middle-left, front layer (z-index: 3) */
.collage-image-3 {
    top: 400px;
    left: 0;
    width: 450px;
    height: 250px;
    z-index: 1;
}

.collage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Text Content */
.text-content {
    margin-right: 0rem;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 5;
}

.section-icon {
    margin-bottom: 15px;
}

.bruno-ace-regular {
    font-family: "Bruno Ace", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 150px;
    color: rgba(255, 255, 255, 0.5);
}

.section-icon img {
    width: 24px;
    height: 21px;
    display: block;
}

.material-title {
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: 1.1;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 20px;
}

.material-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 500px;
}

.material-description p {
    font-size: 16px;
    font-weight: 400;
    color: #333333;
    margin: 0;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
}

/* Background Drone Outline */
.text-content::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -100px;
    width: 300px;
    height: 200px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50 20 L60 30 L70 20 L60 10 Z" fill="%23e0e0e0" opacity="0.3"/><circle cx="50" cy="50" r="8" fill="%23e0e0e0" opacity="0.3"/><path d="M30 50 L70 50 M50 30 L50 70" stroke="%23e0e0e0" stroke-width="2" opacity="0.3"/></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.1;
    z-index: -1;
}

/* Point Container */
.point-container {
    margin-left: 10rem;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    max-width: 70rem;
}

.point-image {
    width: 100%;
    max-width: 38.5rem;
    height: 21.5rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.point-item {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: 2rem;
}



.point-title {
    font-size: 4rem;
    font-weight: 100;
    color: white;
    line-height: 1.1;
    font-family: 'Britannica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.point-description {
    font-size: 1.125rem;
    color: white;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
}


/* Automatic Navigation Section */
.automatic-navigation-section {
    background-color: #000000;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

/* Container */
.automatic-navigation-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Text Content */
.navigation-text-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
}

.navigation-title {
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    margin: 0;
    line-height: 1.1;
    font-family: 'Noto Sans JP', sans-serif;
}

.navigation-description {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.navigation-description p {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    margin: 0;
    line-height: 1.6;
    font-family: 'Noto Sans JP', sans-serif;
}

/* Three Images Row */
.navigation-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.navigation-image-item {
    flex: 0 0 auto;
    width: 450px;
    height: 250px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.navigation-image-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.navigation-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


.hero-glow-circle {
    width: 1080px;
    height: 1080px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding-left: 297px;
    padding-top: 101px;
    z-index: 2;
    pointer-events: none;
}

/* Particle Background */
.particle-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.particle-sphere {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    animation: float 6s ease-in-out infinite;
}

.particle-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: rotate 20s linear infinite;
}

.particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
}

.particles::before,
.particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #14b8a6, transparent);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.particles::before {
    top: 20%;
    left: 30%;
    animation-delay: 0s;
}

.particles::after {
    top: 60%;
    right: 15%;
    animation-delay: 1s;
}

/* Hero Content */
.hero-content {
    z-index: 10;
    width: 100%;
    padding: 0 100px 0 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative;
}

.hero-text {
    flex: 1;
    position: relative;
    z-index: 15;
    max-width: calc(100% - 80px);
    overflow: visible;
    margin-right: 80px;
    /* Align with red line position */
}

.main-heading {
    margin-bottom: 40px;
    position: relative;
    z-index: 16;
}

.main-heading .line {
    display: block;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #ffffff;
    position: relative;
    z-index: 16;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    overflow: visible;
}

.main-heading .line:first-child {
    font-size: 42px;
    font-weight: 700;
}

.main-heading .line:last-child {
    font-size: 56px;
    font-weight: 900;
}

.description {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.9);
}

.scroll-container {
    position: relative;
    right: 12px;
    top: 150px;
    transform: translateY(-50%);
    float: right;
    margin-top: 35px;
    /* z-index: 20;
    width: 60px;
    height: 240px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center; */
}

/* Scroll Indicator */
.scroll-indicator {
    position: relative;
    right: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
}

.scroll-indicator:hover {
    transform: translateX(-2px);
}

.scroll-indicator:hover .scroll-text {
    opacity: 0.8;
}


.scroll-line {
    position: relative;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* White vertical line */
.scroll-line::before {
    content: '';
    width: 1px;
    height: 120px;
    background-color: #ffffff;
    position: absolute;
    right: 0;
    top: 0;
}

@keyframes redLinePulse {

    0%,
    100% {
        opacity: 1;
        height: 40px;
    }

    50% {
        opacity: 0.7;
        height: 35px;
    }
}

.scroll-text {
    font-size: 14px;
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 4px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    position: relative;
    z-index: 21;
    margin-bottom: 10px;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.scroll-arrow {
    font-size: 16px;
    color: #ffffff;
    animation: bounce 2s infinite;
}

/* Business Intro */
.business-intro {
    position: relative;
    bottom: 120px;
    left: 160px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    z-index: 10;
}

.business-icon {
    position: relative;
    width: 24px;
    height: 21px;
}

.achievements-icon {
    position: relative;
    width: 24px;
    height: 21px;
}

.triangle {
    position: absolute;
    width: 0;
    height: 0;
    animation: float 3s ease-in-out infinite;
}

.triangle.purple {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 25px solid #9333ea;
    top: 0;
    left: 15px;
    animation-delay: 0s;
}

.triangle.yellow {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 25px solid #fbbf24;
    top: 10px;
    left: 30px;
    animation-delay: 1s;
}

.triangle.teal {
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 25px solid #14b8a6;
    top: 5px;
    left: 5px;
    animation-delay: 2s;
}

.business-title {
    font-size: 48px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 5px;
}

.business-subtitle {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

/* Business Cards Section */
.business-cards {
    display: flex;
    height: 400px;
    min-height: 400px;
    width: 100%;
}

.business-card {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    height: 100%;
}

.business-card:last-child {
    border-right: none;
}

.business-card:hover {
    transform: translateY(-10px);
}

.card-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.business-card:hover .card-image img {
    transform: scale(1.1);
}



.business-card:hover .card-overlay {
    background: linear-gradient(135deg,
            rgba(0, 6, 16, 0.1) 0%,
            rgba(0, 6, 16, 0.5) 100%);
}

.card-title {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
}

.card-arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Bottom Drone Silhouette */
.bottom-drone-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 0 40px 0;
    position: relative;
    z-index: 10;
}

.bottom-drone-image {
    width: 600px;
    height: 300px;
    object-fit: contain;
    object-position: center;
    display: block;
    opacity: 0.8;
    filter: grayscale(100%) brightness(0.7);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.bottom-drone-image:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Animations */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes float {

    0%,
    100% {
        transform: translate(-50%, -50%) translateY(0px);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-20px);
    }
}

@keyframes rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* ===========================================
   RESPONSIVE HEADER - MOBILE NAVIGATION
   =========================================== */

/* Mobile Navigation - Screens smaller than 1024px */
@media (max-width: 1023px) {

    /* Show hamburger menu button on mobile/tablet */
    .hamburger-menu {
        display: flex;
    }

    /* Hide navigation by default on mobile */
    /* Show navigation when active */

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}

@media (max-width: 1024px) {

    /* Header adjustments for smaller desktop */
    .nav-container {
        padding: 0 100px;
    }

    /* Hero section responsive */
    .hero-content {
        padding: 0 100px;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 18px;
    }

    .hero-description {
        font-size: 42px;
    }

    .hero-image {
        height: 600px;
    }

    /* Logistics section responsive */
    .logistics-container {
        padding: 0 60px;
        gap: 50px;
    }

    .logistics-title {
        font-size: 42px;
    }

    .logistics-description p {
        font-size: 15px;
    }

    .logistics-images {
        gap: 20px;
    }

    .logistics-image-item {
        width: 400px;
        height: 220px;
    }
    /* Material transport section responsive */
    .material-transport-container {
        padding: 60px 100px;
        gap: 60px;
    }

    .material-title {
        font-size: 42px;
    }

    .material-description p {
        font-size: 15px;
    }

    .image-collage {
        height: 500px;
    }

    .collage-image-1 {
        width: 450px;
        height: 250px;
        top: 180px;
        left: 0;
    }

    .collage-image-2 {
        width: 450px;
        height: 250px;
        top: 80px;
        right: 0;
    }

    .collage-image-3 {
        width: 450px;
        height: 250px;
        top: 0;
        left: 80px;
    }

    .text-content {
        padding-left: 60px;
    }

    /* Bottom drone responsive */
    .bottom-drone-container {
        padding: 50px 0 30px 0;
    }

    .bottom-drone-image {
        width: 500px;
        height: 250px;
    }

    /* Point container specific 1024px adjustments */
    .point-container {
        margin-left: 100px;
        margin-right: 100px;
        max-width: calc(100% - 200px);
    }

    .point-item {
        flex-direction: row;
        gap: 1.5rem;
        align-items: center;
    }

    .point-image {
        max-width: 45%;
        height: 14rem;
        flex-shrink: 0;
    }

    .point-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .point-title {
        font-size: 2.25rem;
    }

    .point-description {
        font-size: 0.9rem;
    }

    /* Vision & Company Profile section responsive for 1024px */
    .vision-company-section {
    }


    .vision-company-container {
        padding: 0 60px;
        gap: 80px;
        min-height: 700px;
    }

    .text-content {
        max-width: 450px;
        padding-top: 15px;
        margin-left: 450px;
    }

    .vision-section {
        gap: 18px;
        margin-bottom: 50px;
    }

    .vision-title {
        font-size: 28px;
    }

    .vision-description p {
        font-size: 16px;
        line-height: 1.7;
    }

    .company-profile-section {
        gap: 12px;
    }

    .company-profile-title {
        font-size: 20px;
    }

    .company-details {
        gap: 10px;
    }

    .detail-row {
        gap: 35px;
    }

    .detail-label {
        font-size: 16px;
        min-width: 80px;
    }

    .detail-value {
        font-size: 16px;
    }

    /* Removed map-content reference */

    .map-container {
        min-height: 600px;
        max-width: 500px;
    }

    .japan-map {
        min-height: 600px;
        max-height: 600px;
    }


    .section-description p {
        font-size: 15px;
        color: white;
        display: block;
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

    .bottom-right-image-item:first-child {
        width: 180px;
        height: 330px;
    }

    .bottom-right-image-item:last-child {
        width: 210px;
        height: 380px;
    }

    /* Automatic navigation section responsive */
    .automatic-navigation-container {
        padding: 0 100px;
        gap: 50px;
    }

    .navigation-title {
        font-size: 42px;
    }

    .navigation-description p {
        font-size: 15px;
    }

    .navigation-images {
        gap: 15px;
    }

    .navigation-image-item {
        width: 400px;
        height: 220px;
    }

    .hero-text {
        position: relative;
        z-index: 15;
        max-width: calc(100% - 80px);
        margin-left: auto;
        text-align: right;
        overflow: visible;
        margin: auto;
    }

    .scroll-container {
        right: 25px;
        width: 50px;
        height: 200px;
    }

    .scroll-line {
        height: 100px;
    }

    .scroll-line::before {
        height: 100px;
    }

    .scroll-line::after {
        height: 35px;
    }

    .main-heading .line:first-child {
        font-size: 38px;
    }

    .main-heading .line:last-child {
        font-size: 48px;
    }

    .description {
        max-width: 450px;
        font-size: 18px;
    }

    .business-intro {
        left: 60px;
    }

    /* Business cards maintain horizontal layout */
    .business-cards {
        flex-direction: row;
        height: 350px;
    }

    .business-card {
        height: 350px;
    }

    /* News section adjustments */
    .news-container {
        padding: 0 60px;
        gap: 50px;
    }

    .news-header {
        flex: 0 0 320px;
    }

    /* About section adjustments */
    .about-container {
        padding: 0 60px;
    }

    .about-content {
        gap: 50px;
    }

    .about-images {
        height: 280px;
    }

    /* Achievements section */
    .achievements-container {
        padding: 0 60px;
    }
}

/* ===========================================
   1024px RED SECTION POSITIONING
   =========================================== */
@media (min-width: 1024px) and (max-width: 1025px) {
    .bruno-ace-regular {
        margin-left: 40px;
        font-size: 6rem;
    }
    .hero-content {

    }
}

/* ===========================================
   768px BREAKPOINT - Tablet Portrait
   =========================================== */
@media (max-width: 768px) {

    /* Header adjustments */
    .nav-container {
        padding: 0 30px;
    }

    .logo-image {
        width: 120px;
        height: 48px;
    }

    .hamburger-menu {
        width: 40px;
        height: 40px;
        font-size: 13px;
    }

    /* Navigation link color for mobile */
    .nav-link {
        color: white;
    }

    .bruno-ace-regular {
        margin-left: 0px;
        font-size: 5rem;
    }

    /* Hero section responsive */
    .hero-section {
        height: 400px;
    }

    .hero-content {
        padding: 0 30px;
        justify-content: center;
    }

    .hero-text {
        text-align: center;
        align-items: center;
        max-width: 100%;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .hero-description {
        font-size: 32px;
    }

    /* Logistics section responsive */
    .logistics-section {
        padding: 60px 0;
    }

    .logistics-container {
        padding: 0 30px;
        gap: 40px;
    }

    .logistics-title {
        font-size: 36px;
    }

    .logistics-description p {
        font-size: 14px;
    }

    .logistics-images {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .logistics-image-item {
        width: 100%;
        max-width: 450px;
        height: 250px;
    }

    .drone-icons {
        display: flex;
        width: 300px;
        height: 120px;
        opacity: 0.4;
    }

    /* Material transport section responsive */
    .material-transport-section {
        margin-top: -30px;
    }

    .material-transport-container {
        padding: 50px 30px;
        flex-direction: column;
        gap: 40px;
    }

    .image-collage {
        height: 400px;
        order: 2;
    }

    .text-content {
        text-align: center;
        align-items: center;
        margin-left: 0px;
    }

    .material-title {
        font-size: 36px;
    }

    .material-description p {
        font-size: 14px;
    }

    .collage-image-1 {
        width: 350px;
        height: 195px;
        top: 140px;
        left: 20px;
    }

    .collage-image-2 {
        width: 350px;
        height: 195px;
        top: 60px;
        right: 20px;
    }

    .collage-image-3 {
        width: 350px;
        height: 195px;
        top: 0;
        left: 80px;
    }

    .text-content {
        padding-left: 0px;
    }

    /* Bottom drone responsive */
    .bottom-drone-container {
        padding: 40px 0 25px 0;
    }

    .bottom-drone-image {
        width: 400px;
        height: 200px;
    }

    /* Vision & Company Profile section responsive */
    .vision-company-section {
        padding: 60px 0;
        margin-top: 60px;
    }

    .vision-company-container {
        padding: 0 20px;
        flex-direction: column;
        gap: 50px;
        min-height: auto;
    }

    .text-content {
        gap: 40px;
        max-width: 100%;
        width: 100%;
    }

    .vision-section {
        gap: 20px;
        margin-bottom: 30px;
    }

    .vision-title {
        font-size: 236x;
        margin-bottom: 10px;
        text-align: left;
    }

    .vision-description p {
        font-size: 20px;
        text-align: left;
        line-height: 1.7;
    }

    /* Japan Map Container - Side by Side Layout for Tablet */
    .Japan-map-container {
        margin-top: 150px;
        flex-direction: row;
        gap: 40px;
        width: 100%;
        align-items: flex-start;
    }

    .company-profile-section {
        gap: 15px;
        flex: 1;
        max-width: 100%;
    }

    .company-profile-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .company-details {
        gap: 12px;
    }

    .detail-row {
        flex-direction: row;
        align-items: center;
        width: 100%;
        
    }

    .detail-label {
        font-size: 24px;
        min-width: auto;
        font-weight: 700;
    }

    .detail-value {
        font-size: 20px;
        line-height: 1.6;
    }

    /* Map Container - Responsive Sizing for Tablet */
    .map-container {
        flex: 1;
        max-width: 50%;
        min-height: 400px;
        max-height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
    }

    .japan-map {
        width: 100%;
        max-width: 100%;
        min-height: 400px;
        max-height: 400px;
    }

    .japan-map-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    /* Point container responsive */
    .point-container {
        margin-left: 2rem;
        gap: 2rem;
        min-height: auto;
        max-width: 100%;
    }

    .point-item {
        flex-direction: row;
        gap: 1.5rem;
        text-align: left;
    }

    .point-image {
        max-width: 50%;
        height: 15rem;
        flex-shrink: 0;
    }

    .point-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .point-title {
        font-size: 2.5rem;
    }

    .point-description {
        font-size: 1rem;
    }

    .right-content {
        gap: 30px;
    }

    .section-title {
        font-size: 36px;
    }

    .section-description p {
        font-size: 14px;
    }

    .bottom-right-images {
        justify-content: center;
        gap: 15px;
    }

    .bottom-right-image-item:first-child {
        width: 150px;
        height: 270px;
    }

    .bottom-right-image-item:last-child {
        width: 180px;
        height: 320px;
    }

    /* Automatic navigation section responsive */
    .automatic-navigation-section {
        padding: 60px 0;
    }

    .automatic-navigation-container {
        padding: 0 30px;
        gap: 40px;
    }

    .navigation-title {
        font-size: 36px;
    }

    .navigation-description p {
        font-size: 14px;
    }

    .navigation-images {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .navigation-image-item {
        width: 100%;
        max-width: 450px;
        height: 250px;
    }

    .hero-text {
        text-align: center;
        overflow: visible;
    }

    .scroll-container {
        right: 20px;
        width: 40px;
        height: 180px;
    }

    .scroll-line {
        height: 90px;
    }

    .scroll-line::before {
        height: 90px;
    }

    .scroll-line::after {
        height: 30px;
    }

    .scroll-text {
        font-size: 12px;
        letter-spacing: 3px;
    }

    .main-heading .line:first-child {
        font-size: 32px;
    }

    .main-heading .line:last-child {
        font-size: 38px;
    }

    .description {
        font-size: 16px;
        margin: 0 auto;
        text-align: center;
    }

    .scroll-indicator {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 15px;
        width: 100%;
        height: 100%;
    }

    /* Business intro adjustments */
    .business-intro {
        left: 30px;
        bottom: 60px;
    }

    .business-title {
        font-size: 36px;
    }

    .business-subtitle {
        font-size: 18px;
    }

    /* Business cards - stack vertically */
    .business-cards {
        flex-direction: column;
        height: auto;
        min-height: 600px;
    }

    .business-card {
        height: 300px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .business-card:last-child {
        border-bottom: none;
    }

    /* News section - stack vertically */
    .news-section {
        padding: 60px 0;
    }

    .news-container {
        padding: 0 30px;
        flex-direction: column;
        gap: 40px;
    }

    .news-header {
        flex: none;
        width: 100%;
    }

    .news-title {
        font-size: 36px;
    }

    .news-subtitle {
        font-size: 18px;
    }

    /* About section adjustments */
    .about-company-section {
        padding: 60px 0;
    }

    .about-container {
        padding: 0 30px;
    }

    .about-content {
        flex-direction: column;
        gap: 30px;
    }

    .about-text {
        flex: none;
        width: 100%;
    }

    .about-title {
        font-size: 36px;
    }

    .about-subtitle {
        font-size: 18px;
    }

    .about-images {
        height: 250px;
        width: 100%;
    }

    /* Achievements section */
    .achievements-section {
        padding: 50px 0;
    }

    .achievements-container {
        padding: 0 30px;
        flex-direction: column;
    }

    .achievements-image-column {
        flex: none;
        height: 250px;
        margin-bottom: 30px;
    }

    .achievements-main-image {
        width: 100%;
        height: 250px;
        max-width: 400px;
    }

    .achievements-content-column {
        flex: none;
    }

    .achievements-title {
        font-size: 36px;
    }

    .achievements-subtitle {
        font-size: 18px;
    }
    .recruit-contact-container {
        flex-direction: column;
        min-height: auto;
    }
    .hero-text-container {
        margin-left: 0;
    }
}

/* ===========================================
   425px BREAKPOINT - Mobile Medium
   =========================================== */
@media (max-width: 425px) {

    /* Header adjustments */
    .nav-container {
        padding: 0 20px;
    }

    .logo-image {
        width: 100px;
        height: 40px;
    }

    .hamburger-menu {
        width: 40px;
        height: 40px;
        font-size: 12px;
    }



    /* Hero section responsive */
    .hero-section {
        height: 350px;
    }

    .hero-content {
        padding: 0 20px;
        justify-content: center;
    }

    .hero-text {
        text-align: center;
        align-items: center;
        max-width: 100%;
        gap: 10px;
        box-sizing: border-box;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-description {
        font-size: 18px;
        line-height: 1.3;
        max-width: 100%;
        padding: 0 10px;
    }

    /* Logistics section responsive */
    .logistics-section {
        padding: 40px 0;
    }

    .logistics-container {
        padding: 0 20px;
        gap: 30px;
    }

    .logistics-title {
        font-size: 28px;
    }

    .logistics-description p {
        font-size: 13px;
    }

    .logistics-images {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .logistics-image-item {
        width: 100%;
        max-width: 350px;
        height: 200px;
    }

    .drone-icons {
        display: flex;
        width: 250px;
        height: 100px;
        opacity: 0.3;
    }

    /* Material transport section responsive */
    .material-transport-section {
        margin-top: -20px;
    }

    .material-transport-container {
        padding: 40px 20px;
        flex-direction: column;
        gap: 30px;
    }

    .image-collage {
        height: 350px;
        order: 2;
    }

    .text-content {
        text-align: center;
        align-items: center;
    }

    .material-title {
        font-size: 28px;
    }

    .material-description p {
        font-size: 13px;
    }

    .collage-image-1 {
        width: 280px;
        height: 155px;
        top: 110px;
        left: 10px;
    }

    .collage-image-2 {
        width: 280px;
        height: 155px;
        top: 50px;
        right: 10px;
    }

    .collage-image-3 {
        width: 280px;
        height: 155px;
        top: 0;
        left: 60px;
    }

    /* Bottom drone responsive */
    .bottom-drone-container {
        padding: 30px 0 20px 0;
    }

    .bottom-drone-image {
        width: 300px;
        height: 150px;
    }

    /* Vision & Company Profile section responsive for 425px */
    .vision-company-section {
        padding: 50px 0;
        margin-top: 40px;
    }

    .vision-company-container {
        padding: 0 20px;
        gap: 40px;
        min-height: auto;
    }

    .text-content {
        gap: 30px;
        max-width: 100%;
        width: 100%;
    }

    .vision-section {
        gap: 15px;
        margin-bottom: 20px;
    }
    /* Japan Map Container - Stacked Layout for Mobile */
    .Japan-map-container {
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }

    /* Map appears first on mobile */
    .map-container {
        order: -1;
        width: 100%;
        max-width: 100%;
        min-height: 300px;
        max-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .japan-map {
        width: 100%;
        max-width: 100%;
        min-height: 300px;
        max-height: 300px;
        display: none;
    }

    .japan-map-image {
      display: none;
    }

    /* Company profile appears second on mobile */
    .company-profile-section {
        gap: 15px;
        max-width: 100%;
        width: 100%;
    }

    .company-profile-title {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .company-details {
        gap: 12px;
    }

    .detail-row {
        flex-direction: column;
        gap: 4px;
        align-items: flex-start;
    }

    .detail-label {
        font-size: 20px;
        min-width: auto;
        font-weight: 500;
    }

    .detail-value {
        font-size: 18px;
        line-height: 1.6;
    }

    /* Point container responsive */
    .point-container {
        margin-left: 1rem;
        gap: 1.5rem;
        min-height: auto;
    }

    .point-item {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .point-image {
        max-width: 100%;
        height: 12rem;
    }

    .point-title {
        font-size: 2rem;
    }

    .point-description {
        font-size: 0.875rem;
    }

    .bruno-ace-regular {
        margin-left: 20px;
        font-size: 2.5rem;
    }

    .right-content {
        gap: 25px;
    }

    .section-title {
        font-size: 28px;
    }

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

    .bottom-right-images {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .bottom-right-image-item:first-child {
        width: 120px;
        height: 220px;
    }

    .bottom-right-image-item:last-child {
        width: 140px;
        height: 250px;
    }

    /* Automatic navigation section responsive */
    .automatic-navigation-section {
        padding: 40px 0;
    }

    .automatic-navigation-container {
        padding: 0 20px;
        gap: 30px;
    }

    .navigation-title {
        font-size: 28px;
    }

    .navigation-description p {
        font-size: 13px;
    }

    .navigation-images {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .navigation-image-item {
        width: 100%;
        max-width: 350px;
        height: 200px;
    }

    .hero-text {
        position: relative;
        z-index: 15;
        text-align: center;
        overflow: visible;
        margin: 0 auto;
    }

    .scroll-container {
        right: 15px;
        width: 35px;
        height: 160px;
    }

    .scroll-line {
        height: 80px;
    }

    .scroll-line::before {
        height: 80px;
    }

    .scroll-line::after {
        height: 25px;
    }

    .scroll-text {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .main-heading .line:first-child {
        font-size: 28px;
    }

    .main-heading .line:last-child {
        font-size: 32px;
    }

    .description {
        font-size: 15px;
    }

    /* Business intro adjustments */
    .business-intro {
        left: 20px;
        bottom: 50px;
    }

    .business-title {
        font-size: 32px;
    }

    .business-subtitle {
        font-size: 16px;
    }

    /* Business cards adjustments */
    .business-cards {
        min-height: 500px;
    }

    .business-card {
        height: 250px;
    }

    .card-title {
        font-size: 18px;
    }

    .card-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    /* News section adjustments */
    .news-section {
        padding: 50px 0;
    }

    .news-container {
        padding: 0 20px;
        gap: 30px;
    }

    .news-title {
        font-size: 32px;
    }

    .news-subtitle {
        font-size: 16px;
    }

    .news-button {
        max-width: 100%;
        padding: 10px 16px;
        font-size: 13px;
    }

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

    .article-description {
        font-size: 13px;
    }

    /* About section adjustments */
    .about-company-section {
        padding: 50px 0;
    }

    .about-container {
        padding: 0 20px;
    }

    .about-title {
        font-size: 32px;
    }

    .about-subtitle {
        font-size: 16px;
    }

    .about-description {
        font-size: 15px;
    }

    .about-button {
        padding: 10px 16px;
        font-size: 13px;
    }

    .about-images {
        height: 200px;
    }

    /* Achievements section adjustments */
    .achievements-section {
        padding: 40px 0;
    }

    .achievements-container {
        padding: 0 20px;
    }

    .achievements-image-column {
        height: 200px;
        margin-bottom: 25px;
    }

    .achievements-main-image {
        height: 200px;
        max-width: 350px;
    }

    .achievements-title {
        font-size: 32px;
    }

    .achievements-subtitle {
        font-size: 16px;
    }

    .achievements-button {
        width: 90px;
        height: 30px;
        margin-bottom: 80px;
        padding: 3px 15px;
    }

    .achievements-button>span {
        font-size: 6px;
    }
    .scroll-down-image {
        opacity: .5;
    }
}

/* ===========================================
   375px BREAKPOINT - Mobile Small
   =========================================== */
@media (max-width: 375px) {

    /* Header adjustments */
    .nav-container {
        padding: 0 15px;
    }

    .logo-image {
        width: 90px;
        height: 36px;
    }

    .hamburger-menu {
        width: 40px;
        height: 40px;
        font-size: 11px;
    }

    /* Hero section responsive */
    .hero-section {
        height: 300px;
    }

    .hero-content {
        padding: 0 20px;
        justify-content: center;
    }

    .hero-text {
        text-align: center;
        align-items: center;
        max-width: 100%;
        gap: 8px;
        box-sizing: border-box;
    }


    .hero-description {
        font-size: 16px;
        line-height: 1.3;
        max-width: 100%;
    }

    /* Point container responsive */
    .point-container {
        margin-left: 0.5rem;
        gap: 1rem;
        min-height: auto;
    }

    .point-item {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .point-image {
        max-width: 100%;
        height: 10rem;
    }

    .point-title {
        font-size: 1.5rem;
    }

    .point-description {
        font-size: 0.75rem;
    }

    .bruno-ace-regular {
        font-size: 2rem;
    }

    /* Logistics section responsive */
    .logistics-section {
        padding: 30px 0;
    }

    .logistics-container {
        padding: 0 15px;
        gap: 25px;
    }

    .logistics-title {
        font-size: 24px;
    }

    .logistics-description p {
        font-size: 12px;
    }

    .logistics-images {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .logistics-image-item {
        width: 100%;
        max-width: 300px;
        height: 180px;
    }

    .drone-icons {
        display: flex;
        width: 200px;
        height: 80px;
        opacity: 0.2;
    }

    /* Material transport section responsive */
    .material-transport-section {
        margin-top: -15px;
    }

    .material-transport-container {
        padding: 30px 15px;
        flex-direction: column;
        gap: 25px;
    }

    .image-collage {
        height: 300px;
        order: 2;
    }

    .material-title {
        font-size: 24px;
    }

    .material-description p {
        font-size: 12px;
    }

    .collage-image-1 {
        width: 220px;
        height: 122px;
        top: 85px;
        left: 5px;
    }

    .collage-image-2 {
        width: 220px;
        height: 122px;
        top: 40px;
        right: 5px;
    }

    .collage-image-3 {
        width: 220px;
        height: 122px;
        top: 0;
        left: 45px;
    }

    /* Bottom drone responsive */
    .bottom-drone-container {
        padding: 25px 0 15px 0;
    }

    .bottom-drone-image {
        width: 250px;
        height: 125px;
    }

    /* Vision & Company Profile section responsive for 375px */
    .vision-company-section {
        padding: 45px 0;
        margin-top: 35px;
    }

    .vision-company-container {
        padding: 0 15px;
        gap: 35px;
        min-height: auto;
    }

    .text-content {
        gap: 25px;
        max-width: 100%;
        width: 100%;
    }

    .vision-section {
        gap: 12px;
        margin-bottom: 15px;
    }

    /* Japan Map Container - Stacked Layout for Small Mobile */
    .Japan-map-container {
        flex-direction: column;
        gap: 25px;
        width: 100%;
    }

    /* Map appears first on mobile */
    .map-container {
        order: -1;
        width: 100%;
        max-width: 100%;
        min-height: 280px;
        max-height: 280px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    .japan-map {
        width: 100%;
        max-width: 100%;
        min-height: 280px;
        max-height: 280px;
    }

    .japan-map-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    /* Company profile appears second on mobile */
    .company-profile-section {
        gap: 12px;
        max-width: 100%;
        width: 100%;
    }

    .company-profile-title {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .company-details {
        gap: 10px;
    }

    .detail-row {
        flex-direction: column;
        gap: 3px;
        align-items: flex-start;
    }

    .detail-label {
        font-size: 13px;
        min-width: auto;
        font-weight: 500;
    }

    .detail-value {
        font-size: 16px;
        line-height: 1.6;
    }

    /* Automatic navigation section responsive */
    .automatic-navigation-section {
        padding: 30px 0;
    }

    .automatic-navigation-container {
        padding: 0 15px;
        gap: 25px;
    }

    .navigation-title {
        font-size: 24px;
    }

    .navigation-description p {
        font-size: 12px;
    }

    .navigation-images {
        gap: 10px;
    }

    .navigation-image-item {
        width: 100%;
        max-width: 300px;
        height: 180px;
    }

    .hero-text {
        position: relative;
        z-index: 15;
        text-align: center;
        overflow: visible;
    }

    .scroll-container {
        right: 12px;
        width: 30px;
        height: 140px;
    }

    .scroll-line {
        height: 70px;
    }

    .scroll-line::before {
        height: 70px;
    }

    .scroll-line::after {
        height: 20px;
    }

    .scroll-text {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .main-heading .line:first-child {
        font-size: 24px;
    }

    .main-heading .line:last-child {
        font-size: 28px;
    }

    .description {
        font-size: 14px;
    }

    /* Business intro adjustments */
    .business-intro {
        left: 15px;
        bottom: 40px;
    }

    .business-title {
        font-size: 28px;
    }

    .business-subtitle {
        font-size: 14px;
    }

    /* Business cards adjustments */
    .business-cards {
        min-height: 450px;
    }

    .business-card {
        height: 225px;
    }

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

    .card-arrow {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }

    /* News section adjustments */
    .news-section {
        padding: 40px 0;
    }

    .news-container {
        padding: 0 15px;
        gap: 25px;
    }

    .news-title {
        font-size: 28px;
    }

    .news-subtitle {
        font-size: 14px;
    }

    .news-button {
        padding: 8px 12px;
        font-size: 12px;
    }

    .article-title {
        font-size: 15px;
    }

    .article-description {
        font-size: 12px;
    }

    .article-date {
        font-size: 10px;
    }

    .tag {
        font-size: 9px;
        padding: 2px 4px;
    }

    /* About section adjustments */
    .about-company-section {
        padding: 40px 0;
    }

    .about-container {
        padding: 0 15px;
    }

    .about-title {
        font-size: 28px;
    }

    .about-subtitle {
        font-size: 14px;
    }

    .about-description {
        font-size: 14px;
    }

    .about-button {
        padding: 8px 12px;
        font-size: 12px;
    }

    .about-images {
        height: 180px;
    }

    /* Achievements section adjustments */
    .achievements-section {
        padding: 30px 0;
    }

    .achievements-container {
        padding: 0 15px;
    }

    .achievements-image-column {
        height: 180px;
        margin-bottom: 20px;
    }

    .achievements-main-image {
        height: 180px;
        max-width: 300px;
    }

    .achievements-title {
        font-size: 28px;
    }

    .achievements-subtitle {
        font-size: 14px;
    }

    .achievements-button {
        width: 80px;
        height: 28px;
        margin-bottom: 60px;
        padding: 2px 12px;
    }

    .achievements-button>span {
        font-size: 5px;
    }

    .achievements-description {
        font-size: 13px;
    }
}

/* ===========================================
   325px BREAKPOINT - Extra Small Mobile
   =========================================== */
@media (max-width: 325px) {

    /* Header adjustments */
    .nav-container {
        padding: 0 10px;
    }

    .logo-image {
        width: 80px;
        height: 32px;
    }

    .hamburger-menu {
        width: 60px;
        height: 60px;
        font-size: 10px;
    }

    /* Hero section responsive */
    .hero-section {
        height: 280px;
    }

    .hero-content {
        padding: 0 20px;
        justify-content: center;
    }

    .hero-text {
        text-align: center;
        align-items: center;
        max-width: 100%;
        gap: 6px;
    }

    .hero-title {
        font-size: 18px;
    }

    .hero-subtitle {
        font-size: 11px;
    }

    .hero-description {
        font-size: 16px;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        max-width: 100%;
        padding: 0 5px;
        text-align: center;
    }
}

/* ===========================================
   LEGACY SUPPORT - 1200px+ Desktop
   =========================================== */
@media (min-width: 1200px) {

    /* Maintain full desktop experience for larger screens */
    .achievements-section {
        min-height: 650px;
    }

    .achievements-main-image {
        width: 800px;
        height: 400px;
    }

    .achievements-title {
        font-size: 48px;
    }

    .achievements-subtitle {
        font-size: 24px;
    }
}

/* ===========================================
   NEWS SECTION
   =========================================== */

/* News Section */
.news-section {
    background-color: #ffffff;
    padding-block: 50px;
    position: relative;
    margin-top: 100px;
    z-index: 1;
}

.news-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

/* Left Column - News Header */
.news-header {
    flex: 0 0 350px;
    padding-left: 60px;
    position: relative;
}

.news-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 30px;
}

.news-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.news-title-image {
    width: 120px;
    height: auto;
    margin: 0 0 8px 0;
}

.news-subtitle {
    font-size: 24px;
    font-weight: 400;
    color: #333333;
    margin: 0 0 30px 0;
    line-height: 1.1;
    font-family: 'Noto Sans JP', sans-serif;
}

.news-button {
    background: transparent;
    border: 1px solid #F1F1F1;
    border-radius: 30px;
    padding: 12px 20px;
    color: #21B4E8;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 180px;
    margin-bottom: 60px;
    font-family: 'Noto Sans JP', sans-serif;
}

.news-button:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.6);
}

.news-button .arrow {
    font-size: 16px;
    color: #333333;
    margin-left: 8px;
}

.news-drone-graphic {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    z-index: 1;
}

.drone-icon {
    width: 515px;
    height: auto;
    opacity: 0.3;
}

/* Right Column - News Articles */
.news-articles {
    flex: 1;
    display: flex;
    padding-right: 60px;
    flex-direction: column;
    gap: 20px;
}

.news-article {
    display: flex;
    gap: 20px;
    position: relative;
}

.news-article:last-child {
    border-bottom: none;
}

.article-image {
    flex: 0 0 250px;
    position: relative;
    height: 150px;
    overflow: hidden;
    border-radius: 8px;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-image:hover img {
    transform: scale(1.05);
}

.new-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #3498db;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    font-family: sans-serif;
}

.news-title {
    font-size: 48px;
    font-weight: 100;
    color: black;
    margin: 0 0 10px 0;
    line-height: 1.1;
    font-family: 'Britannica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.about-title {
    font-size: 48px;
    font-weight: 100;
    color: white;
    margin: 0 0 10px 0;
    line-height: 1.1;
    font-family: 'Britannica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.achievements-title {
    font-size: 48px;
    font-weight: 100;
    color: white;
    margin: 0 0 10px 0;
    line-height: 1.1;
    font-family: 'Britannica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.news-subtitle {
    font-size: 24px;
    font-weight: 400;
    color: black;
    margin: 0 0 30px 0;
    opacity: 0.9;
    font-family: 'Noto Sans JP', sans-serif;
}

.article-content {
    flex: 1;
    display: flex;
    padding: 14px;
    flex-direction: column;
    justify-content: space-between;
}

.article-title {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 12px 0;
    line-height: 1.3;
    font-family: 'Noto Sans JP', sans-serif;
}

.article-description {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 1.6;
    margin: 0 0 16px 0;
    flex: 1;
    font-family: 'Noto Sans JP', sans-serif;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.article-date {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    font-family: 'Noto Sans JP', sans-serif;
}

.article-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    color: #ffffff;
    font-family: sans-serif;
}

.tag-blue {
    background: #5bc0de;
}

.tag-orange {
    background: #f0ad4e;
}

.tag-purple {
    background: #8e44ad;
}

/* ===========================================
   ABOUT COMPANY SECTION - PIXEL PERFECT IMPLEMENTATION
   =========================================== */

/* About Company Section */
.about-company-section {
    padding: 120px 0;
    position: relative;
    overflow: visible;
    background-image: url('../../public/img/image_3.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 2;
}

.about-company-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    /* darker overlay */
    z-index: 1;
}

.about-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 100px;
    position: relative;
    z-index: 3;
}

.about-container>img {
    position: absolute;
    width: 310px;
    height: 310px;
    top: -275px;
    left: 160px;
    z-index: 9999;
}

.about-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 30px;
    position: relative;
    z-index: 4;
}

.about-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 80px;
    position: relative;
    padding-inline: 60px;
}

.about-text {
    flex: 0 0 400px;
    padding-top: 20px;
    margin-top: 100px;
}

.news-text {
    flex: 0 0 400px;
    padding-top: 20px;
    margin-top: 100px;
}

.about-subtitle {
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 30px 0;
    opacity: 0.9;
    font-family: 'Noto Sans JP', sans-serif;
}

.about-description {
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    line-height: 1.8;
    margin: 0 0 40px 0;
    font-family: 'Noto Sans JP', sans-serif;
    opacity: 0.95;
}

.about-button {
    background: white;
    border: 1px solid #ffffff;
    color: #21B4E8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 124px;
    height: 40px;
    margin-bottom: 159px;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 5px 20px;
    border-radius: 9999px;
    cursor: pointer;
}

.about-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.about-button>span {
    font-size: 8px;
}


.achievements-button {
    background: white;
    border: 1px solid #ffffff;
    color: #21B4E8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 124px;
    height: 40px;
    margin-bottom: 159px;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 5px 20px;
    border-radius: 9999px;
    cursor: pointer;
}

.achievements-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

.achievements-button>span {
    font-size: 8px;
}

.button-arrow {
    font-size: 18px;
    font-weight: 400;
}

/* About Images */
.about-images {
    flex: 1;
    position: relative;
    min-height: 680px;
    /* Increased to accommodate 600px images + sawtooth offset */
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-right: 40px;
}

.speaker-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 280px;
    height: 350px;
    z-index: 2;
}

.speaker-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

.conference-image {
    position: absolute;
    top: 20px;
    right: -60px;
    width: 220px;
    height: 280px;
    z-index: 1;
}

.conference-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
}

.achievements-image {
    display: none;
}

/* ===========================================
   ACHIEVEMENTS SECTION - PIXEL PERFECT IMPLEMENTATION
   =========================================== */

/* Achievements Section */
.achievements-section {
    background-color: #000000;
    padding: 100px 0 0 0;
    position: relative;
    overflow: visible;
    margin-top: -100px;
}

.achievements-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    display: flex;
}

/* Left Column - Image (60-65% width) */
.achievements-image-column {
    flex: 0 0 65%;
    margin-top: -60px;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start;
    padding-top: 0;
    z-index: 2;
}

.achievements-main-image {
    width: 800px;
    height: 400px;
    object-fit: cover;
}

/* Right Column - Content (35-40% width) */
.achievements-content-column {
    flex: 0 0 35%;
    background-color: #000610;
    position: relative;
    /* padding: 80px 60px 80px 40px; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 3;
    margin-top: -12px;
}

/* Decorative Triangles */
.achievements-triangles {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 60px;
    height: 40px;
    z-index: 2;
}

.achievements-triangles .triangle {
    position: absolute;
    width: 0;
    height: 0;
}

.achievements-triangles .triangle-purple {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid #9333ea;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.achievements-triangles .triangle-yellow {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid #fbbf24;
    bottom: 8px;
    left: 16px;
    z-index: 2;
}

.achievements-triangles .triangle-blue {
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid #14b8a6;
    bottom: 4px;
    left: 4px;
    z-index: 3;
}

/* Text Content */
.achievements-text-content {
    position: relative;
    z-index: 2;
    margin-top: 14.7px;
}


.achievements-subtitle {
    font-size: 24px;
    font-weight: 400;
    color: #ffffff;
    margin: 0 0 40px 0;
    opacity: 0.9;
    font-family: 'Noto Sans JP', sans-serif;
}

/* Button */
.achievements-button {
    background: #ffffff;
    border: none;
    border-radius: 30px;
    padding: 12px 24px;
    color: #21B4E8;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 60px;
    font-family: 'Noto Sans JP', sans-serif;
    transition: all 0.3s ease;
    min-width: 140px;
}

.achievements-button:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.achievements-button svg {
    flex-shrink: 0;
}

/* Description */
.achievements-description {
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
    font-family: 'Noto Sans JP', sans-serif;
    max-width: 100%;
}

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

.nav-title-end {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 15px 0;
    font-family: 'Noto Sans JP', sans-serif;
    position: relative;
}

.nav-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 15px 0;
    font-family: 'Noto Sans JP', sans-serif;
    position: relative;
}

.nav-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 50%;
    height: 1px;
    background-color: #ffffff;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.nav-links .nav-link {
    font-size: 15px;
    color: white;
    margin: 0 0 10px 0;
    line-height: 1.1;
    font-family: 'Britannica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: opacity 0.3s ease;
}

.nav-links .nav-link:hover {
    opacity: 0.7;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000610;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Prevent horizontal overflow */
* {
    max-width: 100%;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Video responsiveness */
video {
    max-width: 100%;
    height: auto;
}

/* Touch-friendly elements */
button,
.card-arrow,
.nav-link {
    min-width: 44px;
}


/* High contrast mode support */
@media (prefers-contrast: high) {
    .card-title,
    .main-heading,
    .description {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================================
   IMAGE SLIDER - MODERN & RESPONSIVE
   =========================================== */

/* Main slider container - wraps everything */
.image-slider {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Wrapper that creates the viewport - only shows visible images */
.slider-wrapper {
    width: 100%;
    overflow: hidden;
    /* Hides images outside the visible area */
    position: relative;
    /* Modern rounded corners */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    /* Subtle shadow for depth */
    /* Height accommodates tallest image + offset for sawtooth pattern */
    min-height: 680px;
    /* 600px image + 80px offset */
}

/* Track that contains all images and moves horizontally */
.slider-track {
    display: flex;
    /* Aligns images in a row */
    gap: 20px;
    /* Space between images */
    padding: 0;
    /* No transition - JavaScript handles smooth animation */
}

/* Individual image container */
.slider-item {
    /* Fixed width of 350px as specified */
    flex: 0 0 350px;
    min-width: 350px;
    width: 350px;
    height: 600px;
    /* Fixed height of 600px as specified */
    position: relative;
    cursor: pointer;
    /* Rounded corners for images */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, margin-top 0.3s ease;
    /* Hover effect transitions */
}

/* Sawtooth pattern - alternating vertical positions */
/* Odd items (1st, 3rd, 5th) positioned at top */
.slider-item:nth-child(odd) {
    margin-top: 0;
    align-self: flex-start;
}

/* Even items (2nd, 4th) positioned lower to create zigzag effect */
.slider-item:nth-child(even) {
    margin-top: 80px;
    /* Offset downward for sawtooth pattern */
    align-self: flex-start;
}

/* Image hover effect - scales slightly on hover */
.slider-item:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Images inside each slider item */
.slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures images fill container while maintaining aspect ratio */
    display: block;
    user-select: none;
    /* Prevents image selection/drag */
}

/* Progress indicators container */
.slider-indicators {
    display: flex;
    gap: 2px;
}

/* Individual indicator bar */
.indicator {
    flex: 1;
    /* Each bar takes equal width */
    max-width: 165px;
    /* Limits maximum width for larger screens */
    height: 3px;
    background: #D9D9D9;
    opacity: .2;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Active indicator bar - shows current image */
.indicator.active {
    background: #D9D9D9;
    opacity: 1;
}

/* Hover effect for indicators */
.indicator:hover {
    background: #D9D9D9;
    opacity: 1;
}

/* Prevents hover effect on active indicator */
.indicator.active:hover {
    background: #D9D9D9;
}

/* ===========================================
   RESPONSIVE DESIGN FOR SLIDER
   =========================================== */

/* Large Tablet (1024px - 1199px) */
@media (max-width: 1199px) and (min-width: 1024px) {
    .slider-item {
        flex: 0 0 320px;
        min-width: 320px;
        width: 320px;
        height: 550px;
    }

    /* Adjust sawtooth offset for smaller screens */
    .slider-item:nth-child(even) {
        margin-top: 70px;
    }

    .slider-wrapper {
        min-height: 620px;
    }

    .about-images {
        min-height: 620px;
    }
}

/* Medium Tablet (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
    .slider-item {
        flex: 0 0 280px;
        min-width: 280px;
        width: 280px;
        height: 480px;
    }

    /* Adjust sawtooth offset for medium tablets */
    .slider-item:nth-child(even) {
        margin-top: 60px;
    }

    .slider-wrapper {
        min-height: 540px;
    }

    .about-images {
        min-height: 540px;
    }

    .slider-indicators {
        gap: 12px;
    }

    .indicator {
        max-width: 60px;
    }
}

/* Small Tablet (600px - 767px) */
@media (max-width: 767px) and (min-width: 600px) {
    .slider-item {
        flex: 0 0 250px;
        min-width: 250px;
        width: 250px;
        height: 420px;
    }

    /* Smaller sawtooth offset for small tablets */
    .slider-item:nth-child(even) {
        margin-top: 50px;
    }

    .slider-wrapper {
        min-height: 470px;
    }

    .about-images {
        min-height: 470px;
    }

    .slider-indicators {
        gap: 10px;
    }

    .indicator {
        max-width: 50px;
        height: 3px;
    }
}

/* Mobile Devices (< 600px) */
@media (max-width: 599px) {

    /* On mobile, show 1 full image + partial of next */
    .slider-item {
        flex: 0 0 220px;
        min-width: 220px;
        width: 220px;
        height: 370px;
    }

    /* Reduce sawtooth offset for mobile */
    .slider-item:nth-child(even) {
        margin-top: 40px;
    }

    .slider-wrapper {
        min-height: 410px;
    }

    .about-images {
        min-height: 410px;
    }

    .slider-track {
        gap: 15px;
    }

    .image-slider {
        gap: 20px;
    }

    .slider-indicators {
        gap: 8px;
        padding: 0 10px;
    }

    .indicator {
        max-width: 40px;
        height: 3px;
    }
}

/* Extra Small Mobile (< 400px) */
@media (max-width: 399px) {
    .slider-item {
        flex: 0 0 200px;
        min-width: 200px;
        width: 200px;
        height: 340px;
    }

    /* Minimal sawtooth offset for extra small screens */
    .slider-item:nth-child(even) {
        margin-top: 30px;
    }

    .slider-wrapper {
        min-height: 370px;
    }

    .about-images {
        min-height: 370px;
    }

    .slider-track {
        gap: 10px;
    }

    .indicator {
        max-width: 30px;
    }
}

/* ===========================================
   UNIVERSAL HERO TEXT POSITIONING FIX
   =========================================== */
/* Ensure hero text stays in consistent position across all screen sizes */


.main-heading {
    margin-bottom: 40px !important;
    z-index: 16 !important;
}

.main-heading .line {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
    z-index: 16 !important;
    overflow: visible !important;
}

.nav-column a {
    text-decoration: none;
}