/*==========================================================
    KSHARASUTRA SECTION
==========================================================*/

.ksharasutra-section{

    position:relative;

    padding:130px 0;

    background:
    linear-gradient(180deg,#ffffff 0%,#f8fcf9 100%);

    overflow:hidden;

}

/* Decorative Background */

.ksharasutra-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(26,142,75,.05);

    filter:blur(80px);

}

.ksharasutra-section::after{

    content:"";

    position:absolute;

    right:-150px;

    bottom:-150px;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(26,142,75,.06);

    filter:blur(90px);

}

/*==========================================================
    HEADER
==========================================================*/

.kshara-header{

    max-width:850px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;

}

.kshara-header .section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 24px;

    border-radius:50px;

    background:#EAF8EE;

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    margin-bottom:24px;

}

.kshara-header h2{

    font-size:56px;

    font-weight:800;

    line-height:1.15;

    color:#222;

    margin-bottom:22px;

}

.kshara-header h2 span{

    color:var(--primary);

}

.kshara-header p{

    font-size:20px;

    line-height:1.9;

    color:#667085;

}

/*==========================================================
    TWO COLUMN LAYOUT
==========================================================*/

.kshara-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:90px;

}
/*==========================================================
    LEFT IMAGE
==========================================================*/

.kshara-image{

    flex:0 0 42%;

    position:relative;

}

.kshara-image img{

    width:100%;

    display:block;

    border-radius:28px;

    object-fit:cover;

    box-shadow:
    0 35px 80px rgba(0,0,0,.12);

    transition:.5s;

}

.kshara-image:hover img{

    transform:scale(1.02);

}

/* Decorative Border */

.kshara-image::before{

    content:"";

    position:absolute;

    top:-20px;

    left:-20px;

    width:100%;

    height:100%;

    border:2px solid rgba(26,142,75,.12);

    border-radius:32px;

    z-index:-1;

}

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

.heritage-card{

    position:absolute;

    right:-45px;

    bottom:40px;

    width:290px;

    padding:28px;

    border-radius:26px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.45);

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

}

.heritage-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:26px;

    padding:1px;

    background:linear-gradient(
    135deg,
    rgba(26,142,75,.35),
    transparent);

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

}

.heritage-card h4{

    font-size:22px;

    color:var(--primary);

    font-weight:800;

    margin-bottom:14px;

}

.heritage-card p{

    font-size:15px;

    line-height:1.8;

    color:#667085;

}
/*==========================================================
    RIGHT CONTENT
==========================================================*/

.kshara-content{

    flex:0 0 50%;

}

.content-tag{

    display:inline-flex;

    align-items:center;

    padding:10px 20px;

    border-radius:50px;

    background:#EAF8EE;

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

.kshara-content h3{

    font-size:48px;

    font-weight:800;

    color:#222;

    line-height:1.2;

    margin-bottom:24px;

}

.kshara-content p{

    font-size:18px;

    line-height:1.9;

    color:#667085;

    margin-bottom:22px;

}

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

.benefits-grid{

    display:grid;

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

    gap:20px;

    margin:45px 0;

}

.benefit-card{

    background:#fff;

    border-radius:22px;

    padding:28px 24px;

    text-align:center;

    box-shadow:

    0 15px 40px rgba(0,0,0,.06);

    border:1px solid rgba(26,142,75,.08);

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 28px 55px rgba(26,142,75,.16);

}

.benefit-card{

    font-size:40px;

}

.benefit-card h4{

    margin-top:16px;

    font-size:18px;

    font-weight:700;

    color:#222;

    line-height:1.5;

}

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

.kshara-content .btn{

    padding:18px 38px;

    border-radius:50px;

    font-size:17px;

    font-weight:700;

    box-shadow:

    0 18px 40px rgba(26,142,75,.25);

}

.kshara-content .btn:hover{

    transform:translateY(-4px);

}
/*==========================================================
    PREMIUM TIMELINE
==========================================================*/

.kshara-timeline{

    margin-top:120px;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    position:relative;

    gap:20px;

}

/* Connecting Line */

.kshara-timeline::before{

    content:"";

    position:absolute;

    top:38px;

    left:10%;

    width:80%;

    height:4px;

    border-radius:50px;

    background:linear-gradient(
    90deg,
    #1A8E4B,
    #49C16D);

    z-index:0;

}

/* Timeline Item */

.timeline-item{

    flex:1;

    position:relative;

    text-align:center;

    z-index:2;

}

/* Circle */

.circle{

    width:78px;

    height:78px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    background:#ffffff;

    border:4px solid #1A8E4B;

    box-shadow:
    0 12px 30px rgba(26,142,75,.18);

    transition:.35s;

}

.timeline-item:hover .circle{

    transform:translateY(-10px) scale(1.08);

    background:var(--primary);

    color:#fff;

}

/* Title */

.timeline-item h4{

    margin-top:24px;

    font-size:20px;

    font-weight:700;

    color:#222;

}

/* Description */

.timeline-item p{

    margin-top:10px;

    font-size:15px;

    line-height:1.7;

    color:#667085;

    max-width:220px;

    margin-left:auto;

    margin-right:auto;

}