/* ========================================= */
/* TRUE YOG - ABOUT PAGE */
/* ========================================= */

/* ========================================= */
/* ABOUT HERO */
/* ========================================= */

.about-hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff;
}

.about-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.about-hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.about-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            120deg,
            rgba(0,0,0,.72),
            rgba(15,40,25,.58),
            rgba(31,122,76,.35)
        );
    z-index:2;
}

.hero-shapes{
    position:absolute;
    inset:0;
    z-index:3;
    overflow:hidden;
    pointer-events:none;
}

.hero-shapes span{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    animation:floatShape 8s ease-in-out infinite;
}

.hero-shapes span:nth-child(1){
    width:220px;
    height:220px;
    top:12%;
    left:8%;
}

.hero-shapes span:nth-child(2){
    width:150px;
    height:150px;
    right:12%;
    top:22%;
    animation-delay:2s;
}

.hero-shapes span:nth-child(3){
    width:280px;
    height:280px;
    bottom:-60px;
    right:18%;
    animation-delay:4s;
}

.about-hero .container{
    position:relative;
    z-index:5;
}

.about-hero-content{
    max-width:760px;
}

.about-hero-content h1{
    font-family:"Playfair Display",serif;
    font-size:4rem;
    line-height:1.15;
    margin:20px 0;
    font-weight:700;
}

.about-hero-content h1 span{
    color:#8CE99A;
}

.about-hero-content p{
    font-size:1.08rem;
    line-height:1.9;
    color:rgba(255,255,255,.92);
    margin-bottom:35px;
    max-width:650px;
}

.breadcrumb{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:35px;
    font-size:.95rem;
}

.breadcrumb a{
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.breadcrumb a:hover{
    color:#8CE99A;
}

.breadcrumb .active{
    color:#8CE99A;
    font-weight:600;
}

/* ========================================= */
/* FLOAT ANIMATION */
/* ========================================= */

@keyframes floatShape{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-25px);
    }

    100%{
        transform:translateY(0px);
    }

}
/* ========================================= */
/* OUR STORY */
/* ========================================= */

.about-story{
    background:#fff;
}

.story-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
}

/* ========================================= */
/* STORY IMAGE */
/* ========================================= */

.story-image{
    flex:1;
    position:relative;
    max-width:560px;
}

.story-image img{
    width:100%;
    display:block;
    border-radius:24px;
    box-shadow:0 30px 70px rgba(0,0,0,.15);
    transition:.4s;
}

.story-image:hover img{
    transform:scale(1.02);
}

.experience-badge{
    position:absolute;
    right:-40px;
    bottom:40px;

    width:190px;
    padding:22px;

    text-align:center;

    background:rgba(255,255,255,.95);
    backdrop-filter:blur(18px);

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    z-index:5;
}

.experience-badge h3{
    font-size:2rem;
    color:#1F7A4C;
    margin-bottom:8px;
}

.experience-badge p{
    color:#666;
    font-size:.95rem;
    line-height:1.6;
}

/* ========================================= */
/* STORY CONTENT */
/* ========================================= */

.story-content{
    flex:1;
}

.story-content p{
    margin-bottom:22px;
    line-height:1.9;
    color:#555;
}

/* ========================================= */
/* MISSION & VISION */
/* ========================================= */

.story-boxes{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin:35px 0;
}

.story-box{
    display:flex;
    align-items:flex-start;
    gap:20px;

    padding:24px;

    background:#F6FCF8;

    border-radius:18px;

    transition:.35s;
}

.story-box:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(31,122,76,.10);

}

.story-icon{

    width:62px;
    height:62px;

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

    border-radius:50%;

    background:linear-gradient(135deg,#1F7A4C,#2FA66A);

    color:#fff;

    font-size:1.4rem;

    flex-shrink:0;

}

.story-box h3{

    margin-bottom:8px;

    color:#222;

}

.story-box p{

    margin:0;

    color:#666;

    line-height:1.8;

}

/* ========================================= */
/* STORY HIGHLIGHTS */
/* ========================================= */

.story-highlights{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-top:35px;

}

.story-highlights div{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:500;

    color:#333;

}

.story-highlights i{

    color:#1F7A4C;

    font-size:1.1rem;

}
/* ========================================= */
/* WHY CHOOSE TRUE YOG */
/* ========================================= */

.why-choose{
    background:#F6FCF8;
}

/* ========================================= */
/* SECTION HEADER (shared style but refined) */
/* ========================================= */

.section-header{
    text-align:center;
    max-width:850px;
    margin:0 auto 60px auto;
}

.section-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(31,122,76,.12);
    color:#1F7A4C;
    font-weight:600;
    font-size:.85rem;
    margin-bottom:15px;
}

/* ========================================= */
/* GRID */
/* ========================================= */

.choose-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

/* ========================================= */
/* CARD */
/* ========================================= */

.choose-card{
    background:#fff;
    padding:32px 28px;
    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.06);

    transition:.4s ease;

    position:relative;
    overflow:hidden;
}

.choose-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(31,122,76,.05),transparent);
    opacity:0;
    transition:.4s;
}

.choose-card:hover::before{
    opacity:1;
}

.choose-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(31,122,76,.12);
}

/* ========================================= */
/* ICON */
/* ========================================= */

.choose-icon{
    width:62px;
    height:62px;

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

    border-radius:50%;

    background:linear-gradient(135deg,#1F7A4C,#2FA66A);

    color:#fff;

    font-size:1.3rem;

    margin-bottom:18px;
}

/* ========================================= */
/* TEXT */
/* ========================================= */

.choose-card h3{
    margin-bottom:10px;
    color:#222;
    font-size:1.2rem;
}

.choose-card p{
    color:#666;
    line-height:1.8;
    font-size:.95rem;
}

/* ========================================= */
/* RESPONSIVE (IMPORTANT) */
/* ========================================= */

@media (max-width: 992px){

    .choose-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width: 576px){

    .choose-grid{
        grid-template-columns:1fr;
    }

}
/* ========================================= */
/* TRAINERS SECTION */
/* ========================================= */

.trainers-section{
    background:#fff;
}

/* ========================================= */
/* GRID */
/* ========================================= */

.trainers-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

/* ========================================= */
/* TRAINER CARD */
/* ========================================= */

.trainer-card{
    background:#fff;
    border-radius:22px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    transition:.4s ease;

    position:relative;
}

.trainer-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 80px rgba(31,122,76,.15);
}

/* ========================================= */
/* IMAGE SECTION */
/* ========================================= */

.trainer-image{
    position:relative;
    width:100%;
    height:320px;
    overflow:hidden;
}

.trainer-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s ease;
}

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

/* ========================================= */
/* BADGE */
/* ========================================= */

.trainer-badge{
    position:absolute;
    top:15px;
    left:15px;

    background:linear-gradient(135deg,#1F7A4C,#2FA66A);
    color:#fff;

    padding:6px 14px;
    font-size:.75rem;
    border-radius:50px;

    font-weight:600;
}

/* ========================================= */
/* CONTENT */
/* ========================================= */

.trainer-content{
    padding:25px;
}

.trainer-content h3{
    margin-bottom:5px;
    font-size:1.3rem;
    color:#222;
}

.trainer-degree{
    display:block;
    font-size:.9rem;
    color:#1F7A4C;
    font-weight:500;
    margin-bottom:12px;
}

.trainer-content p{
    color:#666;
    line-height:1.8;
    font-size:.95rem;
    margin-bottom:18px;
}

/* ========================================= */
/* TAGS */
/* ========================================= */

.trainer-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:18px;
}

.trainer-tags span{
    font-size:.75rem;
    padding:6px 10px;
    border-radius:50px;

    background:#F6FCF8;
    color:#1F7A4C;

    font-weight:500;
}

/* ========================================= */
/* SPECIALIZATION */
/* ========================================= */

.trainer-specialization{
    border-top:1px solid #eee;
    padding-top:15px;
}

.trainer-specialization h4{
    font-size:.95rem;
    margin-bottom:10px;
    color:#222;
}

.trainer-specialization ul{
    list-style:none;
    padding:0;
    margin:0;
}

.trainer-specialization ul li{
    font-size:.9rem;
    color:#555;
    margin-bottom:6px;
    position:relative;
    padding-left:18px;
}

.trainer-specialization ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    color:#1F7A4C;
    font-weight:bold;
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 992px){

    .trainers-grid{
        grid-template-columns:1fr;
    }

    .trainer-image{
        height:360px;
    }

}

/* ========================================= */
/* ACHIEVEMENTS SECTION */
/* ========================================= */

.achievement-section{
    background:#F6FCF8;
}

/* ========================================= */
/* GRID */
/* ========================================= */

.achievement-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

/* ========================================= */
/* CARD */
/* ========================================= */

.achievement-card{
    background:#fff;
    padding:35px 25px;

    border-radius:20px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.06);

    transition:.4s ease;

    position:relative;
    overflow:hidden;
}

/* soft green glow effect */
.achievement-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top, rgba(31,122,76,.12), transparent 70%);
    opacity:0;
    transition:.4s;
}

.achievement-card:hover::before{
    opacity:1;
}

.achievement-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 80px rgba(31,122,76,.15);
}

/* ========================================= */
/* ICON */
/* ========================================= */

.achievement-icon{
    width:70px;
    height:70px;

    margin:0 auto 18px auto;

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

    border-radius:50%;

    background:linear-gradient(135deg,#1F7A4C,#2FA66A);

    color:#fff;

    font-size:1.4rem;
}

/* ========================================= */
/* COUNTER */
/* ========================================= */

.achievement-card h3.counter{
    font-size:2.4rem;
    color:#1F7A4C;
    margin-bottom:6px;
    font-weight:700;
}

/* ========================================= */
/* TITLE */
/* ========================================= */

.achievement-card h4{
    font-size:1.1rem;
    color:#222;
    margin-bottom:10px;
}

/* ========================================= */
/* DESCRIPTION */
/* ========================================= */

.achievement-card p{
    font-size:.9rem;
    color:#666;
    line-height:1.7;
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 992px){

    .achievement-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width: 576px){

    .achievement-grid{
        grid-template-columns:1fr;
    }

}
/* ========================================= */
/* STUDIO & YOGA MOMENTS */
/* ========================================= */

.studio-section{
    background:#fff;
}

/* ========================================= */
/* GRID LAYOUT (MASONRY STYLE) */
/* ========================================= */

.studio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

/* large featured items */
.studio-item.large{
    grid-column:span 2;
}

/* ========================================= */
/* IMAGE CARD */
/* ========================================= */

.studio-item{
    position:relative;
    border-radius:18px;
    overflow:hidden;

    height:260px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    cursor:pointer;

    transition:.4s ease;
}

.studio-item.large{
    height:340px;
}

.studio-item img{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:.6s ease;
}

/* ========================================= */
/* HOVER EFFECT */
/* ========================================= */

.studio-item:hover img{
    transform:scale(1.08);
}

.studio-item:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 80px rgba(31,122,76,.15);
}

/* ========================================= */
/* OVERLAY TEXT */
/* ========================================= */

.studio-overlay{
    position:absolute;
    inset:0;

    display:flex;
    align-items:flex-end;

    padding:18px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.65),
        transparent
    );

    opacity:0;
    transition:.4s ease;
}

.studio-item:hover .studio-overlay{
    opacity:1;
}

.studio-overlay h3{
    color:#fff;
    font-size:1.1rem;
    font-weight:600;
}

/* ========================================= */
/* GALLERY BUTTON */
/* ========================================= */

.gallery-btn{
    text-align:center;
    margin-top:50px;
}

/* reuse your global button styles, just enhance hover */
.gallery-btn .btn-primary{
    padding:14px 30px;
    font-size:1rem;
    border-radius:50px;
    box-shadow:0 15px 35px rgba(31,122,76,.25);
    transition:.3s ease;
}

.gallery-btn .btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 25px 60px rgba(31,122,76,.35);
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 992px){
/* ========================================= */
/* ABOUT STORY - MOBILE */
/* ========================================= */

.story-container{
    display:flex;
    flex-direction:column;
    gap:40px;
}

.story-image{
    width:100%;
    order:1;
}

.story-image img{
    width:100%;
    height:380px;
    object-fit:cover;
    border-radius:20px;
    display:block;
}

.experience-badge{
    position:absolute;
    left:50%;
    bottom:20px;
    transform:translateX(-50%);
    width:220px;
    text-align:center;
    padding:18px;
}

.experience-badge h3{
    font-size:2rem;
}

.experience-badge p{
    font-size:.95rem;
}

.story-content{
    width:100%;
    order:2;
}

.story-content .section-title{
    font-size:2rem;
    line-height:1.3;
    margin-bottom:18px;
}

.story-content p{
    font-size:1rem;
    line-height:1.9;
}

.story-boxes{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-top:30px;
}

.story-box{
    display:flex;
    gap:18px;
    padding:22px;
}

.story-icon{
    width:60px;
    height:60px;
    min-width:60px;
    font-size:1.3rem;
}

.story-box h3{
    font-size:1.15rem;
    margin-bottom:8px;
}

.story-box p{
    font-size:.95rem;
    line-height:1.8;
}

.story-highlights{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:35px;
}

.story-highlights div{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:18px 20px;
    border-radius:14px;
    background:#F6FCF8;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.story-highlights i{
    color:#1F7A4C;
    margin-top:3px;
    font-size:1rem;
}

    .studio-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .studio-item.large{
        grid-column:span 2;
    }

}

@media (max-width: 576px){

    .studio-grid{
        grid-template-columns:1fr;
    }

    .studio-item,
    .studio-item.large{
        height:260px;
        grid-column:auto;
    }

}
/* ========================================= */
/* TESTIMONIALS SECTION */
/* ========================================= */

.testimonial-section{
    background:#F6FCF8;
}

/* ========================================= */
/* GRID */
/* ========================================= */

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

/* ========================================= */
/* CARD */
/* ========================================= */

.testimonial-card{
    background:#fff;
    padding:30px 25px;

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.06);

    position:relative;

    transition:.4s ease;

    overflow:hidden;
}

/* soft green glow overlay */
.testimonial-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at top left, rgba(31,122,76,.12), transparent 70%);
    opacity:0;
    transition:.4s ease;
}

.testimonial-card:hover::before{
    opacity:1;
}

.testimonial-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 80px rgba(31,122,76,.15);
}

/* ========================================= */
/* QUOTE ICON */
/* ========================================= */

.quote-icon{
    font-size:2rem;
    color:#1F7A4C;
    margin-bottom:15px;
    opacity:.8;
}

/* ========================================= */
/* TEXT */
/* ========================================= */

.testimonial-card p{
    color:#555;
    line-height:1.8;
    font-size:.95rem;
    margin-bottom:20px;
}

/* ========================================= */
/* USER INFO */
/* ========================================= */

.testimonial-user{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:15px;
}

.testimonial-user img{
    width:50px;
    height:50px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #1F7A4C;
}

.testimonial-user h4{
    font-size:1rem;
    margin:0;
    color:#222;
}

.testimonial-user span{
    font-size:.85rem;
    color:#777;
}

/* ========================================= */
/* STARS */
/* ========================================= */

.testimonial-stars{
    color:#f5b301;
    font-size:.95rem;
}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 992px){

    .testimonial-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width: 576px){

    .testimonial-grid{
        grid-template-columns:1fr;
    }

}

/* ========================================= */
/* FINAL CTA SECTION */
/* ========================================= */

.about-cta{
    position:relative;
    padding:120px 0;

    background:linear-gradient(
        135deg,
        #1F7A4C,
        #2FA66A
    );

    color:#fff;

    overflow:hidden;
    text-align:center;
}

/* ========================================= */
/* FLOATING SHAPES */
/* ========================================= */

.cta-shapes{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.cta-shapes span{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    animation:ctaFloat 10s ease-in-out infinite;
}

.cta-shapes span:nth-child(1){
    width:200px;
    height:200px;
    top:10%;
    left:8%;
}

.cta-shapes span:nth-child(2){
    width:140px;
    height:140px;
    bottom:15%;
    right:10%;
    animation-delay:2s;
}

.cta-shapes span:nth-child(3){
    width:260px;
    height:260px;
    top:40%;
    right:25%;
    animation-delay:4s;
}

/* ========================================= */
/* CONTENT */
/* ========================================= */

.about-cta-content{
    max-width:800px;
    margin:0 auto;
    position:relative;
    z-index:2;
}

.about-cta-content h2{
    font-size:3rem;
    font-weight:700;
    line-height:1.2;
    margin:20px 0;
    font-family:"Playfair Display",serif;
}

.about-cta-content p{
    font-size:1.1rem;
    line-height:1.9;
    opacity:.95;
    margin-bottom:35px;
}

/* ========================================= */
/* BUTTONS */
/* ========================================= */

.cta-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.cta-buttons .btn-primary{
    background:#fff;
    color:#1F7A4C;
    padding:14px 28px;
    border-radius:50px;
    font-weight:600;
    transition:.3s ease;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.cta-buttons .btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 30px 70px rgba(0,0,0,.25);
}

.cta-buttons .btn-secondary{
    border:2px solid rgba(255,255,255,.8);
    color:#fff;
    padding:14px 28px;
    border-radius:50px;
    font-weight:600;
    transition:.3s ease;
}

.cta-buttons .btn-secondary:hover{
    background:#fff;
    color:#1F7A4C;
    transform:translateY(-4px);
}

/* ========================================= */
/* ANIMATION */
/* ========================================= */

@keyframes ctaFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-25px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media (max-width: 768px){

    .about-cta-content h2{
        font-size:2.2rem;
    }

    .about-cta{
        padding:80px 20px;
    }

}