/*=========================
About Hero
=========================*/

.about-hero{

    position:relative;

    height:100vh;

    background:url('../images/ChatGPT Image Jun 25, 2026, 11_30_12 AM.png') center center/cover;

    background-attachment:fixed;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}

.about-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.about-hero-content{

    position:relative;

    z-index:2;

    text-align:center;

    color:#fff;

    max-width:900px;

    padding:20px;

}

.about-hero-content span{

    display:inline-block;

    color:#ff8c3a;

    letter-spacing:3px;

    font-size:15px;

    font-weight:600;

    margin-bottom:18px;

}

.about-hero-content h1{

    font-family:Georgia,serif;

    font-size:74px;

    font-weight:400;

    line-height:1.1;

    margin-bottom:30px;

}

.about-hero-content p{

    font-size:20px;

    line-height:1.9;

    max-width:720px;

    margin:auto;

}

/*======================
Next Section
=======================*/

.about-introduction{

    position:relative;

    z-index:5;

    background:#fff;

    padding:120px 0;

}
@media(max-width:992px){

.about-hero{

background-attachment:scroll;

height:80vh;

}

.about-hero-content h1{

font-size:52px;

}

}

@media(max-width:768px){

.about-hero{

height:70vh;

}

.about-hero-content h1{

font-size:38px;

}

.about-hero-content p{

font-size:16px;

}

}

/*=============================
 About Story Section
==============================*/

.about-story-section{

    padding:50px 0;

    background:#fffdf9;

}

.about-story-section .container{

    width:90%;

    max-width:1350px;

    margin:auto;

}

/* Heading */

.section-heading{

    text-align:center;

    margin-bottom:80px;

}

.section-heading span{

    color:#f36b2a;

    letter-spacing:2px;

    font-size:15px;

    font-weight:600;

}

.section-heading h2{

    margin:18px 0;

    font-size:62px;

    font-family:Georgia,serif;

    font-weight:400;

    color:#2d2d2d;

}

.section-heading p{

    max-width:760px;

    margin:auto;

    font-size:18px;

    color:#666;

    line-height:1.9;

}

/* Wrapper */

.about-story-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/* Image */

.about-image{

    position:relative;

}

.image-glow{

    position:absolute;

    width:380px;

    height:380px;

    background:rgba(243,107,42,.15);

    border-radius:50%;

    filter:blur(70px);

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

}

.about-image img{

    position:relative;

    z-index:2;

    width:100%;

    border-radius:28px;

    box-shadow:0 25px 60px rgba(0,0,0,.15);

    transition:.6s;

}

.about-image:hover img{

    transform:scale(1.04);

}

/* Content */

.about-small-title{

    color:#f36b2a;

    font-weight:600;

    letter-spacing:2px;

}

.about-content h3{

    font-size:56px;

    font-family:Georgia,serif;

    font-weight:400;

    line-height:1.15;

    margin:20px 0 25px;

}

.about-content p{

    color:#555;

    font-size:18px;

    line-height:2;

    margin-bottom:20px;

}

.about-features{

    display:grid;

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

    gap:18px;

    margin:35px 0;

}

.about-features div{

    color:#333;

    font-weight:500;

}

.about-btn{

    display:inline-block;

    padding:15px 38px;

    background:#f36b2a;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    transition:.3s;

}

.about-btn:hover{

    transform:translateY(-4px);

    background:#de5d24;

}

.reveal-left{

    opacity:0;

    transform:translateX(-100px);

    transition:1s ease;

}

.reveal-right{

    opacity:0;

    transform:translateX(100px);

    transition:1s ease;

}

.reveal-left.active,
.reveal-right.active{

    opacity:1;

    transform:translateX(0);

}
@media(max-width:992px){

.about-story-wrapper{

grid-template-columns:1fr;

gap:60px;

}

.about-content{

text-align:center;

}

.about-features{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:44px;

}

.about-content h3{

font-size:40px;

}

}

@media(max-width:768px){

.about-story-section{

padding:80px 0;

}

.section-heading h2{

font-size:34px;

}

.about-content h3{

font-size:32px;

}

}
/*======================================
      Temple Activities Timeline
=======================================*/

.activities-section{

    position: relative;

    padding:50px 0;

    background:#fcf8f3;

    overflow:hidden;

}

.activities-section .container{

    width:90%;

    max-width:1450px;

    margin:auto;

}

/*========================
      Heading
=========================*/

.section-heading{

    text-align:center;

    margin-bottom:100px;

}

.section-subtitle{

    display:inline-block;

    color:#f36b2a;

    font-size:15px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.section-title{

    font-size:62px;

    font-family:Georgia, serif;

    font-weight:400;

    color:#2b2b2b;

    line-height:1.15;

    margin-bottom:25px;

}

.section-description{

    max-width:850px;

    margin:auto;

    font-size:18px;

    line-height:2;

    color:#666;

}

/*=========================
      Timeline
==========================*/
.activities-timeline{

position:relative;

padding-bottom:80px;

}

.timeline-line{

position:absolute;

left:50%;

top:0;

bottom:0;

width:4px;

transform:translateX(-50%);

background:#e6dfd7;

border-radius:30px;

overflow:hidden;

}

.timeline-progress{

position:absolute;

left:0;

top:0;

width:100%;

height:0;

background:#f36b2a;

transition:height .15s linear;

}

/*=========================
      Timeline Item
==========================*/

.timeline-item{

    position:relative;

    width:100%;

    display:flex;

    margin-bottom:120px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-item.left{

    justify-content:flex-start;

}

.timeline-item.right{

    justify-content:flex-end;

}

/*=========================
      Dot
==========================*/

.timeline-dot{

    position:absolute;

    left:50%;

    top:45%;

    transform:translate(-50%,-50%);

    width:24px;

    height:24px;

    border-radius:50%;

    background:#fff;

    border:5px solid #f36b2a;

    z-index:10;

    box-shadow:

        0 0 0 8px rgba(243,107,42,.12);

}

/*=========================
      Card
==========================*/

.timeline-content{


    width:calc(50% - 70px);

    max-width:560px;


    background:#fff;

    border-radius:28px;

    overflow:hidden;

    box-shadow:

        0 20px 60px rgba(0,0,0,.08);

    transition:.45s;

}

.timeline-content:hover{

    transform:translateY(-8px);

}

/*=========================
      Image
==========================*/

.timeline-content img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.6s;

    display:block;

}

.timeline-content:hover img{

    transform:scale(1.08);

}

/*=========================
      Text Area
==========================*/

.timeline-text{

    padding:35px;

}

.timeline-text span{

    display:inline-block;

    color:#f36b2a;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:12px;

}

.timeline-text h3{

    font-size:34px;

    font-family:Georgia, serif;

    font-weight:400;

    color:#222;

    margin-bottom:18px;

}

.timeline-text p{

    font-size:17px;

    line-height:1.9;

    color:#666;

    margin-bottom:28px;

}

.timeline-text a{

    display:inline-block;

    color:#f36b2a;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.timeline-text a:hover{

    letter-spacing:1px;

}

/*=========================
    Card Spacing
==========================*/

.timeline-item.left .timeline-content{

    margin-right:70px;

}

.timeline-item.right .timeline-content{

    margin-left:70px;

}
/*======================================
        Reveal Animation
=======================================*/

.reveal{

    opacity:0;

    transition:1s ease;

}

.timeline-item.left.reveal{

    transform:translateX(-120px);
    padding-left: 65px;

}

.timeline-item.right.reveal{

    transform:translateX(120px);
    padding-right: 65px;

}

.timeline-item.active{

    opacity:1;

    transform:translateX(0);

}

/*======================================
        Hover Animation
=======================================*/

.timeline-content{

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}

.timeline-content:hover{

    transform:translateY(-12px);

    box-shadow:
        0 30px 70px rgba(0,0,0,.15);

}

.timeline-content img{

    transition:
        transform .8s ease;

}

.timeline-content:hover img{

    transform:scale(1.08);

}

.timeline-content:hover .timeline-text h3{

    color:#f36b2a;

}

/*======================================
        Timeline Dot Animation
=======================================*/

.timeline-dot{

    transition:.45s;

}

.timeline-item.active .timeline-dot{

    background:#f36b2a;

    box-shadow:

        0 0 0 10px rgba(243,107,42,.15),

        0 0 25px rgba(243,107,42,.4);

}

/*======================================
        Image Animation
=======================================*/

.timeline-content img{

    animation:floatImage 6s ease-in-out infinite;

}

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/*======================================
        Button Hover
=======================================*/

.timeline-text a{

    position:relative;

}

.timeline-text a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:#f36b2a;

    transition:.4s;

}

.timeline-text a:hover::after{

    width:100%;

}
/*======================================
      Active Timeline Card
=======================================*/

.timeline-item.active .timeline-content{

    transform:translateY(0);

    opacity:1;

}

.timeline-item.active .timeline-dot{

    background:#f36b2a;

    border-color:#f36b2a;

    box-shadow:

        0 0 0 8px rgba(243,107,42,.15),

        0 0 25px rgba(243,107,42,.5);

}

/*==============================
      Reveal Default
===============================*/

.timeline-item{

    opacity:0;

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.timeline-item.left{

    transform:translateX(-120px);

}

.timeline-item.right{

    transform:translateX(120px);

}

.timeline-item.active{

    opacity:1;

    transform:translateX(0);

}

/*======================================
        Laptop / Tablet Landscape
=======================================*/

@media (max-width:1200px){

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

    .activities-section .container{
        width:94%;
    }

    .timeline-content{

        width:46%;

    }

    .timeline-item.left .timeline-content{

        margin-right:45px;

    }

    .timeline-item.right .timeline-content{

        margin-left:45px;

    }

    .timeline-content img{

        height:220px;

    }

    .timeline-text{

        padding:24px;

    }

    .timeline-text h3{

        font-size:28px;

    }

}

/*======================================
        Small Tablet
=======================================*/

@media(max-width:992px){

    .section-title{

        font-size:42px;

    }

    .activities-timeline{

        padding-left:80px;

    }

    .timeline-line{

        left:25px;

    }

    .timeline-dot{

        left:25px;

    }

    .timeline-item{

        justify-content:flex-start !important;

    }

    .timeline-content{

        width:100%;

        margin-left:60px !important;

        margin-right:0 !important;

    }

    .timeline-item.left{

        transform:translateX(-70px);

    }

    .timeline-item.right{

        transform:translateX(-70px);

    }

}

/*======================================
        Mobile View
=======================================*/
@media (max-width:768px){

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

    .activities-section .container{
        width:100%;
        padding:0 18px;
    }

    .section-heading{
        margin-bottom:60px;
    }

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

    .section-description{
        font-size:15px;
        line-height:1.8;
    }

    .activities-timeline{
        position:relative;
        padding-left:42px;
    }

    .timeline-line{
        left:16px;
        transform:none;
    }

    .timeline-dot{
        left:16px;
        top:28px;
        transform:translate(-50%,0);
        width:18px;
        height:18px;
        border-width:4px;
    }

    .timeline-item{

        width:100%;

        justify-content:flex-start !important;

        margin-bottom:35px;

    }

    .timeline-item.left,
    .timeline-item.right{

        transform:none;

    }

    .timeline-content{

        width:100%;

        margin:0 !important;

        border-radius:20px;

    }

    .timeline-content img{

        height:210px;

    }

    .timeline-text{

        padding:20px;

    }

    .timeline-text h3{

        font-size:25px;

        line-height:1.3;

    }

    .timeline-text p{

        font-size:15px;

        line-height:1.8;

    }
    .timeline-item.left.active,
.timeline-item.right.active{

    transform:none;

}

}


/*======================================
        Extra Small Mobile
=======================================*/

@media(max-width:480px){

    .section-title{

        font-size:28px;

    }

    .section-description{

        font-size:15px;

    }

    .timeline-content img{

        height:180px;

    }

    .timeline-text{

        padding:18px;

    }

    .timeline-text h3{

        font-size:21px;

    }

    .timeline-text p{

        font-size:14px;

    }

}