/* Development Page CSS */

/* General Layout */
.development-page {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
}

.section-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Header */
.development-header {
    padding: 51px 0 80px;
    margin-top: 99px;
    background-color: #fff;
}

.development-header-container {
    max-width: 1325px;
    margin: 0 auto;
    padding: 0 40px 0 74px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-end;
}

.development-title {
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: 4px;
    white-space: nowrap;
}

.d-blue {
    color: #29a9b8;
}

.development-subtitle {
    font-size: 24px;
    font-weight: 500;
    color: #333;
    letter-spacing: 1px;
}

.header-right img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Main Message */
.main-message-section {
    padding: 80px 0;
    text-align: center;
    background-color: #fff;
}

.main-heading {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 0px;
    line-height: 1.4;
    border: none !important;
}

.main-heading .highlight {
    color: #29a9b8;
    font-size: 40px;
}

.sub-heading {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #333;
}

.sub-heading .highlight-green {
    color: #29a9b8;
    font-size: 40px;
}

.description {
    font-size: 20px;
    line-height: 2;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

/* Proposal Section */
.proposal-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
    /* Background handling */
    background-image: url('../../images/development/develop-bg.jpeg');
    background-size: cover;
    background-position: center;
}

/* Black Overlay */
.proposal-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Dark overlay 60% */
    z-index: 1;
}

/* "DEVELOPMENT" Background Text */
.proposal-section::after {
    content: 'DEVELOPMENTDEVELOPMENT';
    position: absolute;
    top: 10%;
    left: -3%;
    font-size: 10vw;
    /* Responsive huge font */
    font-weight: 700;
    color: rgba(255, 255, 255, 0.1);
    /* Subtle light text */
    white-space: nowrap;
    z-index: 2;
    pointer-events: none;
    font-family: 'Arial Black', sans-serif;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* Ensure content stays on top of overlay and text */
.proposal-container {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.section-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    /* Title white to contrast dark bg */
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
    width: 100%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.section-title::after {
    display: none;
}

.proposal-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16.5px;
}

.proposal-card {
    background: #fff;
    padding: 40px 10px;
    border-radius: 4px;
    /* Less rounded as per design */
    text-align: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-start;
}

.proposal-card:hover {
    transform: translateY(-5px);
}

.card-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.proposal-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #29a9b8;
    /* Blue/Teal text */
    line-height: 1.6;
    margin: 0;
}

/* Features Section */
.features-section {
    padding: 100px 0;
    background-color: #fff;
}

.features-header {
    margin-bottom: 60px;
    text-align: left;
}

.features-title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    letter-spacing: 0.05em;
    border: none !important;
}

.f-blue {
    color: #29a9b8;
}

.features-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #333;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    /* Increased spacing */
}

.feature-item {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
    border-top: 1px solid #b3b3b3;
    padding-top: 50px;
    /* Space between content and border */
    margin-bottom: 0;
    /* Let padding handle the spacing content-wise, actually gap handles spacing between items */
}

/* Remove border from the last item */
.feature-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Feature 01: Image Right */
.feature-item:nth-child(odd) .feature-content {
    order: 1;
}

.feature-item:nth-child(odd) .feature-image {
    order: 2;
}

/* Feature 02: Image Right (Uniform layout as per design image) */
/* Wait, design image 1 has map on right. Design image 2 has hands on right. 
   So actually they are uniform: Content Left, Image Right. 
   Let's keep the grid default which is Content (1) Image (2) if HTML order is Content then Image.
*/

/* Feature Content Layout: Number side-by-side with text */
.feature-content {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "number title"
        "number desc";
    column-gap: 30px;
    align-items: start;
}

@media (max-width: 768px) {
    .feature-content {
        gap: 10px;
    }
}

.feature-number {
    grid-area: number;
    font-size: 20px;
    font-weight: 700;
    color: #29a9b8;
    margin-bottom: 0;
    /* Reset margin since it's grid */
    font-family: 'Noto Sans JP', sans-serif;
    margin-top: 20px;
    line-height: 1;
}


@media (max-width: 768px) {
    .feature-number {
        font-size: 22px;
        margin-top: 5px;
    }
}

.feature-title {
    grid-area: title;
    font-size: 40px;
    /* Slightly smaller for side-by-side balance if needed, keeping readable */
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
    border-bottom: none;
    font-style: italic;
    /* Italic as requested */
}

@media (max-width: 768px) {
    .feature-title {
        font-size: 24px;
    }
}

/* Remove pseudo-element underline if it exists */
.feature-title::after {
    display: none;
}

.feature-description {
    grid-area: desc;
    font-size: 20px;
    line-height: 2;
    color: #666;
}

.feature-image {
    border-radius: 20px;
    overflow: hidden;
    /* Enforce consistent aspect ratio */
}

.feature-image img {
    aspect-ratio: 517 / 316;
    width: 100%;
    height: 100%;
    /* Fill container */
    object-fit: cover;
    /* Crop to fit */
    display: block;
    transition: transform 0.5s ease;
}

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

/* Flow Section */
/* Flow Section */
.flow-section {
    background: linear-gradient(135deg, #ffffff 0%, #29a9b8 45%);
    /* Gradient based on design */
    padding: 58px 0 200px;
    color: #fff;
    text-align: center;
}

.flow-title {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    color: #fff;
    border: none !important;
    padding-bottom: 0;
}

.flow-subtitle {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 60px;
}

.flow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    /* For connecting line context if needed, but per card is easier */
}

.flow-step {
    background: #fff;
    border-radius: 15px;
    padding: 20px 10px 0px;
    /* Adjusted padding */
    color: #333;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}


/* We need the line to connect TO the next one from center.
   Actually, a full width line across the background might be easier?
   Or each card has a line extending to the right?
   Screenshot shows line going through the Middle of the top section.
*/
/* Let's try a different approach for the line. 
   Line needs to go from Center of Card 1 to Center of Card 4. 
*/

/* Step Number Positioning */
.step-number {
    font-size: 50px;
    font-weight: 700;
    color: #333;
    line-height: 1;
    margin-bottom: 0;
    font-style: italic;
    /* Cover the line behind if any */
    padding: 0 10px;
    z-index: 2;
    position: relative;
    margin-top: -40px;
    /* Pull up slightly */
    text-shadow:
        -2px -2px 0 #fff,
        2px -2px 0 #fff,
        -2px 2px 0 #fff,
        2px 2px 0 #fff,
        0 -2px 0 #fff,
        0 2px 0 #fff,
        -2px 0 0 #fff,
        2px 0 0 #fff;
}

.step-label {
    font-size: 12px;
    color: #333;
    margin-bottom: 30px;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    z-index: 2;
    background: #fff;
}

/* The Grid Line */
/* Using a pseudo element on the dot to draw line to right? */
.step-indicator-dot {
    width: 19px;
    height: 19px;
    background-color: #29a9b8;
    border-radius: 50%;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

/* Line connecting dots */
.step-indicator-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: calc(100vw / 4 + 20px);
    /* Approximate, better to rely on container */
    width: 300px;
    /* Fixed width fallback? No. */
    width: calc(100% + 200px);
    /* Very hacky. */
    /* Let's use a line on the container .flow-steps usually. */
    height: 1px;
    background-color: #29a9b8;
    transform: translateY(-50%);
    z-index: -1;
}

/* Re-thinking the line. Simple approach: Line on .flow-step::after extending to right */
.flow-step::after {
    content: '';
    position: absolute;
    top: 92px;
    /* Adjust to align with dot */
    right: -50%;
    width: 100%;
    height: 2px;
    background-color: #70d6d1;
    z-index: 0;
    display: none;
    /* Removing this approach */
}

/* Better Line Approach:
   The line connects the dots. The dots are approx 90px down.
*/
.flow-steps::before {
    content: '';
    position: absolute;
    top: 90px;
    /* Adjust based on dot position */
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background-color: #29a9b8;
    z-index: 2;
}

/* Remove dot line styling from before */
.step-indicator-dot::after {
    display: none;
}

.step-icon {
    height: 80px;
    margin-bottom: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.step-icon img {
    max-height: 100%;
    width: auto;
}

.step-title {
    font-size: 20px;
    font-weight: 700;
    color: #29a9b8;
    /* Blue text for title */
    margin-bottom: 10px;
}

.step-description {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    font-weight: 500;
}

/* Review Section */
.review-section {
    background: linear-gradient(135deg, #ffffff 0%, #333333 55%);
    /* White restricted to roughly 20%, then #333 */
    padding: 80px 0;
    color: #333;
    /* Default text color for light side */
}

.review-section .section-container {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.review-header {
    margin-bottom: 0;
    /* Remove bottom margin in flex layout */
    flex: 0 0 300px;
    /* Fixed width for header */
}

.review-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 1px;
    letter-spacing: 0.05em;
    color: #fff;
    /* White text for contrast */
    text-align: left;
    border: none !important;
}

.review-subtitle {
    font-size: 17px;
    opacity: 0.8;
    text-align: left;
    color: #fff;
    /* White text */
}

.review-cards {
    flex: 1;
    /* Take remaining space */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.review-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    color: #333;
}

.review-avatar {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.review-content {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 10px;
}

.review-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.review-text {
    font-size: 18px;
    line-height: 1.8;
    padding-top: 10px;
    border-top: 1px solid #b3b3b3;
}

/* Contact Section (Copied) */
.contact-section {
    position: relative;
    padding: 100px 0;
    background-image: url('../../images/common/common-contact.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}

.contact-section::before {
    display: none;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 1;
}

.contact-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}


.contact-icon {
    margin-bottom: 0;
}

.contact-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    line-height: 1;
    margin-bottom: 5px;
    letter-spacing: 0.05em;
}

.contact-text {
    font-size: 14px;
    color: #444;
    font-weight: 700;
}

.contact-arrow {
    font-size: 24px;
    color: #333;
    display: block;
    margin-top: 10px;
}

/* CTA Section before Footer */
.cta-section {
    padding: 100px 0;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.cta-highlight {
    color: #29a9b8;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
}

.cta-button-container {
    margin-top: 40px;
}

.btn-cta-large {
    background-color: #333;
    color: #fff;
    padding: 20px 80px;
    border-radius: 50px;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.btn-cta-large:hover {
    background-color: #29a9b8;
}

/* Responsive */
@media (max-width: 768px) {

    .main-message-section {
        padding-top: 0;
    }

    .development-header {
        padding: 50px 0;
    }

    .development-header-container {
        padding: 0 20px;
        gap: 40px;
    }

    .development-header-container,
    .feature-item,
    .review-cards,
    .contact-cards,
    .proposal-cards,
    .flow-steps {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .development-title {
        font-size: 40px;
        white-space: normal;
        text-align: center;
    }

    .header-left {
        text-align: center;
    }

    .features-title,
    .flow-title {
        font-size: 42px;
    }

    .flow-step {
        padding: 30px 20px;
    }

    .contact-section {
        padding: 60px 0;
    }

    .contact-card {
        padding: 30px;
    }

    .review-section {
        background: linear-gradient(135deg, #ffffff 0%, #333333 29%);
        padding-top: 30px;
    }

    .review-section .section-container {
        flex-direction: column;
    }

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

    .review-header {
        flex: none;
    }

    .main-heading .highlight,
    .sub-heading .highlight-green {
        font-size: 24px;
    }

    .main-heading,
    .sub-heading {
        font-size: 24px;
    }
}

/* Development CTA Section */
.development-cta {
    padding: 100px 0 80px;
    text-align: center;
    background-color: #fff;
    overflow: hidden;
    /* Ensure city image at bottom fits */
}

@media (max-width: 768px) {
    .development-cta {
        padding-top: 50px;
    }
}

.cta-decoration-spark {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
}

.cta-headline-v2 {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    margin-bottom: 0;
    line-height: 1.5;
    border: none !important;
}

.cta-subheadline-v2 {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
    line-height: 1.6;
}

.highlight-q {
    color: #29a9b8;
    font-weight: 700;
    font-size: 30px;
}

@media (max-width: 768px) {
    .highlight-q {
        font-size: 25px;
    }
}

.cta-button-wrapper {
    margin-bottom: 30px;
}

.btn-cta-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    padding: 16px 80px;
    border-radius: 50px;
    font-size: 33px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    gap: 20px;
}

.btn-cta-dark:hover {
    background-color: #fff;
    color: #333;
}

.btn-cta-dark .arrow {
    font-family: sans-serif;
}

.cta-bottom-text {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    margin-top: 50px;
    margin-bottom: 100px;
}

.cta-city-image {
    max-width: 1100px;
    margin: -30px auto 0;
    /* Align with bottom */
    width: 100%;
    position: relative;
    z-index: 1;
}

.cta-city-image img {
    width: 100%;
    height: auto;
    display: block;
}

.md-show {
    display: none;
}

@media (max-width: 768px) {
    .cta-headline-v2 {
        font-size: 25px;
        padding: 0 20px;
    }

    .cta-subheadline-v2 {
        font-size: 25px;
        padding: 0 20px;
    }

    .btn-cta-dark {
        padding: 14px 60px;
        font-size: 16px;
    }

    .md-none {
        display: none;
    }

    .md-show {
        display: block;
    }
}