/* ==========================================================
   CORRECTED RESPONSIVE STYLES (DIVIDER COLORS & STORY OVERLAPS FIXED)
========================================================== */

@media (max-width: 1024px) {
    /* --- Main Hero Section --- */
    .about-hero {
        padding-top: 100px !important;
        min-height: auto;
    }
    .about-container {
        grid-template-columns: 56% 44% !important;
        min-height: auto;
        padding-bottom: 40px;
    }
    .about-left {
        height: 520px;
    }
    .about-title {
        font-size: clamp(2.8rem, 4vw, 3.8rem);
    }
    .about-photo-placeholder {
        width: 300px;
        height: 420px;
        left: 50px;
    }
    .about-right {
        padding-top: 140px;
        margin-top: 0;
    }
    .about-right p {
        font-size: 18px;
        margin-bottom: 20px;
    }

    /* --- V Dividers Fix (Color Inverted) --- */
    .v-divider-white {
        background: #ffffff !important; /* Force solid black background */
        margin-top: -2px;
        position: relative;
        z-index: 10;
    }
    .v-divider-white svg,
    .v-divider-white svg path {
        fill: #0a0a0a !important; /* Force the actual V triangle shape to be pure white */
        height: 80px;
        display: block;
    }

    /* --- My Story Section --- */
    .my-story {
        padding: 80px 0 40px;
    }
    .story-top {
        grid-template-columns: 55% 45% !important;
        gap: 40px;
        margin-bottom: 80px;
    }
    .story-bottom {
        grid-template-columns: 60% 40% !important;
        gap: 50px;
    }
    .story-line1, .story-line2 { font-size: 30px; }
    .story-script { font-size: 36px; }
    .story-intro p, .story-text p { font-size: 17px; line-height: 1.4; }
    .story-photo-placeholder {
        width: 100%;
        max-width: 320px;
        height: 450px;
    }

    /* --- Childhood Section --- */
    .childhood-section {
        padding: 80px 0 50px;
    }
    .childhood-title { font-size: 54px; margin-top: -30px; }
    .childhood-title span { font-size: 38px; }
    .childhood-intro { font-size: 19px; }
    .child-photo {
        width: 220px;
        height: 310px;
    }

    /* --- Dream Gallery Layouts --- */
    .dream-gallery {
        padding: 60px 25px;
    }
    .dream-title { font-size: 40px; margin-top: -30px; margin-bottom: 40px; }
    .dream-grid { gap: 20px; }
    .photo-lg { width: 220px; height: 280px; }
    .photo-md { width: 180px; height: 160px; }
    .photo-xl { width: 260px; height: 330px; }
    .building-grid .photo-4 { margin-left: -60px; }

    /* --- Moments / Photo Divider --- */
    .photo-divider { 
        height: 320px; 
        overflow: hidden; 
        position: relative;
    }
    .photo-divider__shape { 
        height: 240px; 
    }
    .photo-divider__image { 
        width: 300px; 
        height: 380px; 
        font-size: 18px; 
        transform: translate(-50%, -50%) scale(0.95) !important;
    }

   /* ===========================
   MISSION TIMELINE
=========================== */

.mission-timeline{
    max-width:1000px;
}

.timeline-card{
    width:320px;
}

.timeline-card img{
    height:220px;
}

.timeline-text{
    width:300px;
}

.timeline-text h3{
    font-size:22px;
}

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

.mission-title span{
    font-size:50px;
}

.mission-intro{
    font-size:20px;
}
}

@media (max-width: 768px) {
    /* --- Main Hero Section --- */
    .about-hero {
        padding-top: 90px !important;
        min-height: auto;
    }
    
.about-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:35px;
}

.about-left{
    display:flex;
    flex-direction:column;
    align-items:center;
    height:auto;
    width:100%;
}

/* PHOTO FIRST */

.about-photo-placeholder{
    order:1;

    position:relative;
    left:auto;
    bottom:auto;

    width:260px;
    height:360px;

    margin:0 auto 25px;
}

/* TITLE SECOND */

.about-title-wrapper{
    order:2;
    width:100%;
}

.about-title{
    position:relative;
    top:0;
    left:0;

    text-align:center;

    font-size:2.3rem;

    white-space:normal;
}

/* REMOVE GLOW */

.about-left::before{
    display:none;
}

/* TEXT THIRD */

.about-right{
    order:3;

    padding-top:0;
    margin:0;

    max-width:100%;
}

.about-right p{
    text-align:center;
    font-size:16px;
    line-height:1.7;
}
    /* --- V Dividers Fix (Color Inverted) --- */
    .v-divider-white {
        background: #ffffff !important;
        margin-top: -2px;
    }
    .v-divider-white svg,
    .v-divider-white svg path {
        fill: #0a0a0a !important;
        height: 60px;
        display: block;
    }
    .v-divider-bottom{
    margin-top:0;
}

.v-divider-bottom svg{
    height:70px;
    display:block;
}
/*story section*/
.my-story{
    padding:60px 0 25px;
}

.story-heading-wrap{
    margin-bottom:25px;
}

.story-line1,
.story-line2{
    font-size:30px;
}

.story-script{
    font-size:36px;
}

.story-line2{
    gap:8px;
}

.story-intro{
    max-width:92%;
}

.story-intro p{
    font-size:16px;
    line-height:1.6;
    max-width:100%;
}

.story-video{
    display:flex;
    justify-content:center;
    margin:35px 0 40px;
}

.video-placeholder{
    width:92%;
    aspect-ratio:16/9;
    height:auto;

    margin:0;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:14px;
}

.story-text{
    max-width:92%;
}

.story-text p{
    font-size:16px;
    line-height:1.7;
}

.story-text strong{
    font-size:22px;
    margin-bottom:15px;
}

    
    /* --- Childhood Section --- */
    .childhood-section { padding: 60px 0 40px; }
    .childhood-title { font-size: 34px; margin-top: -20px; }
    .childhood-title span { font-size: 24px; }
    .childhood-intro { font-size: 15px; margin: 15px auto; }
    .childhood-gallery { gap: 12px; margin: 30px 0; }
    .child-photo {
        width: 140px;
        height: 190px;
        border-width: 4px;
        font-size: 13px;
    }
    .quote-mark { font-size: 90px; }
    .childhood-quote p { font-size: 26px; margin-top: -30px; }

    /* --- Dream Gallery Layouts --- */
    .dream-gallery { padding: 60px 15px; }
    .dream-title { font-size: 28px; margin-top: -10px; margin-bottom: 30px; }
    .dream-grid { gap: 12px; }
    .photo-lg { width: 180px; height: 240px; border-width: 4px; font-size: 12px; }
    .photo-md { width: 140px; height: 180px; border-width: 4px; font-size: 12px; }
    .photo-xl { width: 210px; height: 280px; border-width: 4px; font-size: 12px; }
    /* ===========================
   LIVING MY DREAM
=========================== */

.living-grid{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:0;
    margin-top:15px;
}

.living-grid .dream-photo:nth-child(1){
    margin-top:35px;
    transform:rotate(-4deg);
    z-index:1;
}

.living-grid .dream-photo:nth-child(2){
    margin-left:-28px;
    margin-top:0;
    transform:rotate(2deg);
    z-index:3;
}

.living-grid .dream-photo:nth-child(3){
    margin-left:-28px;
    margin-top:45px;
    transform:rotate(-3deg);
    z-index:2;
}


/* ===========================
   BUILDING MY DREAM
=========================== */

.building-grid{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:0;
    flex-wrap:wrap;
    max-width:520px;
    margin:0 auto;
}

.building-grid .photo-1{
    margin-top:45px;
    transform:rotate(-4deg);
}

.building-grid .photo-2{
    margin-left:-35px;
    transform:rotate(3deg);
    z-index:3;
}

.building-grid .photo-3{
    margin-top:35px;
    margin-left:-35px;
    transform:rotate(-2deg);
}

.building-grid .photo-4{
    margin-top:-50px;
    margin-left:110px;
    transform:rotate(4deg);
    z-index:4;
}
.building-grid .photo-12{
    margin-top:-50px;
    margin-left:-50px;
    transform:rotate(-7deg);
}

    /* --- Moments / Photo Divider --- */
    .photo-divider { 
        height: 180px; 
        margin-top: -20px; 
        overflow: hidden;
    }
    .photo-divider__shape { 
        height: 130px; 
    }
    .photo-divider__image { 
        width: 160px; 
        height: 210px; 
        font-size: 13px; 
        transform: translate(-50%, -45%) scale(0.85) !important;
    }

    /* ===========================
   MISSION TIMELINE
=========================== */

.mission-section{
    padding:70px 0;
}

.mission-title{
    font-size:34px;
    margin-top:60px;
    margin-bottom:25px;
}

.mission-title span{
    font-size:40px;
}

.mission-intro{
    font-size:16px;
    line-height:1.7;
    margin-bottom:60px;
    padding:0 20px;
}

/* Timeline lines */

.timeline-line,
.timeline-progress{
    left:25px;
    transform:none;
}

.timeline-item{
    flex-direction:column;
    align-items:flex-start;
    padding-left:60px;
    margin:60px 0;
}

.timeline-item.left,
.timeline-item.right{
    flex-direction:column;
    align-items:flex-start;
}

.timeline-item::before{
    left:19px;
    top:28px;
    transform:none;
}

.timeline-card{
    width:100%;
    max-width:500px;
}

.timeline-card img{
    height:240px;
}

.timeline-text{
    width:100%;
    margin-top:25px;
    text-align:left;
}

.timeline-number{
    font-size:16px;
}

.timeline-text h3{
    font-size:22px;
    line-height:1.35;
}

.timeline-caption p{
    font-size:15px;

}
}

@media (max-width: 480px) {
    /* --- Main Hero Section --- */
    .about-hero {
        padding-top: 80px !important;
        min-height: auto;
    }
    .about-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:25px;
}

.about-left{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    height:auto;
}

.about-photo-placeholder{
    order:1;

    position:relative;
    left:auto;
    bottom:auto;

    width:200px;
    height:280px;

    margin-bottom:18px;
}

.about-title-wrapper{
    order:2;
    width:100%;
}

.about-title{
    position:relative;
    top:0;
    left:0;

    text-align:center;

    font-size:1.8rem;
}

.about-left::before{
    display:none;
}

.about-right{
    order:3;

    padding-top:0;
    margin:0;
}

.about-right p{
    text-align:center;
    font-size:14px;
    line-height:1.6;
    margin-top: -20px;
}
    /* --- V Dividers Fix (Color Inverted) --- */
    .v-divider-white {
        background: #ffffff !important;
        margin-top: -2px;
    }
    .v-divider-white svg,
    .v-divider-white svg path {
        fill: #0a0a0a !important;
        height: 45px;
        display: block;
    }
    .v-divider-bottom{
    margin-top:0;
}

.v-divider-bottom svg{
    height:55px;
    display:block;
}

    /* --- My Story Section --- */
    .my-story{
    padding:60px 0 40px;
}

.my-story{
    padding:50px 0 20px;
}

.story-heading-wrap{
    margin-bottom:20px;
}

.story-line1,
.story-line2{
    font-size:24px;
}

.story-script{
    font-size:30px;
}

.story-line2{
    gap:6px;
}

.story-intro{
    max-width:94%;
}

.story-intro p{
    font-size:15px;
    line-height:1.6;
}

.story-video{
    display:flex;
    justify-content:center;
    margin:35px 0 40px;
}

.video-placeholder{
    width:92%;
    aspect-ratio:16/9;
    height:auto;

    margin:0;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:14px;
}

.story-text{
    max-width:94%;
}

.story-text p{
    font-size:15px;
    line-height:1.7;
}

.story-text strong{
    font-size:20px;
    margin-bottom:12px;
}


    /* --- Childhood Section --- */
    .childhood-section { padding: 40px 0 30px; }
    .childhood-title { font-size: 24px; margin-top: -10px; }
    .childhood-title span { font-size: 18px; }
    .childhood-intro { font-size: 12px; margin: 10px auto; }
    .childhood-gallery { gap: 8px; margin: 20px 0; }
    .child-photo {
        width: 95px;
        height: 135px;
        border-width: 3px;
        font-size: 11px;
    }
    .quote-mark { font-size: 70px; margin-bottom: 0; }
    .childhood-quote p { font-size: 20px; margin-top: -20px; }

    /* --- Dream Gallery Layouts --- */
    .dream-gallery { padding: 30px 10px; }
    .dream-title { font-size: 22px; margin-top: 0; margin-bottom: 20px; }
    .dream-grid { gap: 8px; }
    .photo-lg { width: 130px; height: 210px; font-size: 10px; border-width: 3px; }
    .photo-md { width: 110px; height: 95px; font-size: 10px; border-width: 3px; }
    .photo-xl { width: 150px; height: 200px; font-size: 10px; border-width: 3px; }
    /* ===========================
   LIVING MY DREAM
=========================== */

.living-grid{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:0;
}

.living-grid .dream-photo:nth-child(1){
    margin-top:20px;
    transform:rotate(-4deg);
}

.living-grid .dream-photo:nth-child(2){
    margin-left:-22px;
    transform:rotate(2deg);
    z-index:3;
}

.living-grid .dream-photo:nth-child(3){
    margin-left:-22px;
    margin-top:30px;
    transform:rotate(-3deg);
}


/* ===========================
   BUILDING MY DREAM
=========================== */

.building-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:0;
    max-width:320px;
    margin:0 auto;
}

.building-grid .photo-1{
    margin-top:30px;
    transform:rotate(-4deg);
}

.building-grid .photo-2{
    margin-left:-25px;
    transform:rotate(3deg);
}

.building-grid .photo-3{
    margin-left:-25px;
    margin-top:25px;
    transform:rotate(-3deg);
}

.building-grid .photo-4{
    margin-left:70px;
    margin-top:-35px;
    transform:rotate(4deg);
}
.building-grid .photo-12{
    margin-top:-50px;
    margin-left:-50px;
    transform:rotate(-7deg);
}
    
    /* --- Moments / Photo Divider --- */
    .photo-divider { 
        height: 120px; 
        margin-top: -25px; 
        overflow: hidden;
    }
    .photo-divider__shape { 
        height: 90px; 
    }
    .photo-divider__image { 
        width: 105px; 
        height: 140px; 
        font-size: 10px; 
        transform: translate(-50%, -45%) scale(0.8) !important;
    }

    /* ===========================
   MISSION TIMELINE
=========================== */
.mission-section{
    padding:55px 0;
}

.mission-title{
    font-size:26px;
    margin-top:40px;
    margin-bottom:18px;
}

.mission-title span{
    font-size:30px;
}

.mission-intro{
    font-size:14px;
    line-height:1.7;
    margin-bottom:40px;
    padding:0 18px;
}

/* Timeline lines */

.timeline-line,
.timeline-progress{
    left:18px;
    transform:none;
}

.timeline-item{
    padding-left:45px;
    margin:45px 0;
}

.timeline-item.left,
.timeline-item.right{
    flex-direction:column;
    align-items:flex-start;
}

.timeline-item::before{
    left:13px;
    width:10px;
    height:10px;
}

.timeline-card{
    width:100%;
}

.timeline-card img{
    height:190px;
}

.timeline-caption{
    padding:16px;
}

.timeline-caption p{
    font-size:13px;
    line-height:1.6;
}

.timeline-number{
    font-size:15px;
    margin-bottom:8px;
}

.timeline-text{
    text-align:left;
}

.timeline-text h3{
    font-size:18px;
    line-height:1.35;
}
}