/* ==========================
   BLUR TO CLEAR TEXT EFFECT
========================== */

.blur-text{
    position:relative;
    display:inline-block;

    color:#ffffff;

    opacity:0;

    filter:blur(12px);

    animation:
        blurClear 2s ease forwards;
}

.blur-text::after{
    content:"";
    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:#ffffff;

    animation:
        sweepReveal 2s ease forwards;
}

/* Blur to Clear */

@keyframes blurClear{

    0%{
        opacity:0;
        filter:blur(12px);
    }

    100%{
        opacity:1;
        filter:blur(0px);
    }

}

/* Left → Right Sweep */

@keyframes sweepReveal{

    0%{
        width:100%;
    }

    100%{
        width:0%;
    }

}
/*Glass - Background-----------------------------------------------------------------------------------------------------------*/
/* ==================================
   MODERN GLASS CARD
================================== */

.glass-card{
    position:relative;
    overflow:hidden;

    background:rgba(255,255,255,0.15);

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

    border:1px solid rgba(255,255,255,0.25);

    border-radius:28px;

    padding:32px;

    box-shadow:
        0 8px 32px rgba(0,0,0,0.08);

    isolation:isolate;
}

/* ==================================
   ANIMATED BLOB 1
================================== */

.glass-card::before{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    top:-120px;
    right:-120px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,183,3,0.25),
        transparent 70%
    );

    animation:floatBlob1 8s ease-in-out infinite;

    z-index:-1;
}

/* ==================================
   ANIMATED BLOB 2
================================== */

.glass-card::after{
    content:"";

    position:absolute;

    width:220px;
    height:220px;

    bottom:-100px;
    left:-100px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,255,255,0.4),
        transparent 70%
    );

    animation:floatBlob2 10s ease-in-out infinite;

    z-index:-1;
}

/* ==================================
   FLOAT ANIMATIONS
================================== */

@keyframes floatBlob1{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(-30px,20px);
    }

    100%{
        transform:translate(0,0);
    }
}

@keyframes floatBlob2{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(30px,-20px);
    }

    100%{
        transform:translate(0,0);
    }
}

/* ==================================
   SHIMMER LIGHT
================================== */

.glass-shine{
    position:absolute;

    top:0;
    left:-100%;

    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );

    transform:skewX(-25deg);

    animation:shineMove 5s linear infinite;
}

@keyframes shineMove{

    0%{
        left:-120%;
    }

    100%{
        left:150%;
    }
}

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

.glass-card h1,
.glass-card h2,
.glass-card h3{
    color:#ffffff;
    margin-bottom:12px;
    position:relative;
    z-index:2;
}

.glass-card p{
    color:rgba(255,255,255,0.85);
    line-height:1.8;
    position:relative;
    z-index:2;
}

/* ==================================
   MOBILE
================================== */

@media(max-width:768px){

    .glass-card{
        padding:24px;
        border-radius:22px;
    }
}
/* MODERN PREMIUM YELLOW CARD------------------------------------------------------------------------------------------------- */

.feature-card{
    position:relative;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #fffdf6 25%,
        #fff7e5 60%,
        #fff1cc 100%
    );

    border-radius:28px;

    padding:32px;

    min-height:280px;

    border:1px solid rgba(255,183,3,0.15);

    box-shadow:
        0 10px 30px rgba(255,183,3,0.08),
        0 2px 8px rgba(0,0,0,0.04);

    transition:all .4s ease;
}

/* =====================================
   TOP LEFT GLOW
===================================== */

.feature-card::before{
    content:"";
    position:absolute;

    width:280px;
    height:280px;

    top:-160px;
    left:-160px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,183,3,.18),
        transparent 70%
    );
}

/* =====================================
   BOTTOM CURVED DESIGN
===================================== */

.feature-card::after{
    content:"";
    position:absolute;

    width:500px;
    height:500px;

    left:50%;
    bottom:-420px;

    transform:translateX(-50%);

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,183,3,.12),
        transparent 70%
    );
}

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

.feature-card:hover{
    transform:translateY(-10px);

    box-shadow:
        0 25px 60px rgba(255,183,3,0.18),
        0 8px 20px rgba(0,0,0,0.06);
}

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

.feature-card h1,
.feature-card h2,
.feature-card h3,
.feature-card h4,
.feature-card h5,
.feature-card h6{
    position:relative;
    z-index:2;

    margin:0 0 12px;

    color:#1f2937;

    font-weight:700;

    font-size:clamp(22px,2vw,32px);

    line-height:1.3;
}

.feature-card p{
    position:relative;
    z-index:2;

    margin:0;

    color:#6b7280;

    font-size:clamp(14px,1vw,17px);

    line-height:1.8;
}

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

.feature-card img{
    display:block;

    margin:25px auto 0;

    max-width:120px;
    width:100%;
    height:auto;

    position:relative;
    z-index:2;

    transition:all .4s ease;
}

/* IMAGE HOVER */

.feature-card:hover img{
    transform:translateY(-5px) scale(1.05);
}

/* =====================================
   MOBILE
===================================== */

@media screen and (max-width:768px){

    .feature-card{
        padding:24px;
        min-height:240px;
        border-radius:22px;
    }

    .feature-card img{
        max-width:90px;
    }

    .feature-card h3{
        font-size:20px;
    }

    .feature-card p{
        font-size:14px;
    }
}
/*Image-card-------------------------------------------------------*/
/* ===================================
   FLOATING IMAGE CARD
=================================== */

.image-card{
    position:relative;
    overflow:hidden;

    background:#ffffff;

    border-radius:24px;

    padding:20px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);

    transition:all 0.4s ease;

    animation:floating 4s ease-in-out infinite;
}

/* IMAGE */

.image-card img{
    display:block;

    width:100%;
    height:auto;

    max-width:300px;

    margin:auto;

    border-radius:16px;

    transition:all 0.4s ease;
}

/* HOVER EFFECT */

.image-card:hover{
    transform:translateY(-12px);

    box-shadow:
        0 25px 50px rgba(255,183,3,0.20);
}

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

/* FLOATING ANIMATION */

@keyframes floating{

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

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

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

}

/* MOBILE */

@media screen and (max-width:768px){

    .image-card{
        padding:15px;
        border-radius:20px;
    }

    .image-card img{
        max-width:100%;
    }

}
/*Button--------------------------------------------------------------------*/
/* ==================================
   RESPONSIVE MODERN PREMIUM BUTTON
================================== */

.modern-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:clamp(14px,1.2vw,16px) clamp(28px,3vw,36px);

    background:linear-gradient(
        135deg,
        #FFB703,
        #FFD166
    );

    color:#1f2937;
    font-size:clamp(15px,1vw,16px);
    font-weight:600;

    text-decoration:none;
    border:none;
    border-radius:14px;

    cursor:pointer;
    overflow:hidden;

    white-space:nowrap;

    transition:all .4s ease;

    box-shadow:
        0 10px 25px rgba(255,183,3,.25);
}

/* Shine Effect */

.modern-btn::before{
    content:"";
    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );

    transform:skewX(-25deg);

    transition:.8s;
}

/* Hover */

.modern-btn:hover{
    transform:translateY(-4px);

    box-shadow:
        0 15px 35px rgba(255,183,3,.35);
}

.modern-btn:hover::before{
    left:150%;
}

/* Click */

.modern-btn:active{
    transform:scale(.96);
}

/* Small Mobile Fix */

@media(max-width:480px){

    .modern-btn{
        width:auto;
        min-width:160px;
    }

}
/*Modern card------------------------------------------------------------*/
/* ==================================
   MODERN WHITE GRADIENT CARD
================================== */

.modern-card{
    position:relative;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #ffffff 0%,
        #fffdf8 30%,
        #fff9ee 70%,
        #ffffff 100%
    );

    border-radius:28px;

    padding:32px;

    border:1px solid rgba(255,183,3,0.10);

    box-shadow:
        0 8px 30px rgba(0,0,0,0.04);

    backdrop-filter:blur(20px);
}

/* ANIMATED GLOW */

.modern-card::before{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    top:-150px;
    right:-150px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,183,3,0.15),
        transparent 70%
    );

    animation:floatGlow 8s ease-in-out infinite;
}

/* SECOND GLOW */

.modern-card::after{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    bottom:-120px;
    left:-120px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(255,220,120,0.12),
        transparent 70%
    );

    animation:floatGlow2 10s ease-in-out infinite;
}

/* CONTENT */

.modern-card *{
    position:relative;
    z-index:2;
}

/* TITLE */

.modern-card h1,
.modern-card h2,
.modern-card h3{
    color:#111827;
    font-weight:700;
    margin-bottom:12px;
}

/* TEXT */

.modern-card p{
    color:#6b7280;
    line-height:1.8;
}

/* GLOW ANIMATION */

@keyframes floatGlow{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(-20px,20px);
    }
    100%{
        transform:translate(0,0);
    }
}

@keyframes floatGlow2{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(20px,-20px);
    }
    100%{
        transform:translate(0,0);
    }
}

/* MOBILE */

@media(max-width:768px){

    .modern-card{
        padding:24px;
        border-radius:22px;
        margin:10px;
    }

}
/*New-idea-----------------------------*/
/* SECTION LAYOUT */

.feature-section{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:start;
}

/* LEFT COLUMN */

.left-content{
    position:sticky;
    top:20px;
}

/* RIGHT COLUMN */

.right-scroll{
    height:700px;
    overflow:hidden;
    position:relative;
}

/* SCROLLING CARD WRAPPER */

.scroll-wrapper{
    display:flex;
    flex-direction:column;
    gap:20px;

    animation:scrollCards 30s linear infinite;
}

/* CARD */

.card{
    background:#fff;
    border-radius:24px;
    padding:24px;

    box-shadow:
    0 8px 25px rgba(0,0,0,.05);

    border:1px solid rgba(255,183,3,.08);
}

/* AUTO SCROLL */

@keyframes scrollCards{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(-50%);
    }
}

/* MOBILE */

@media(max-width:768px){

    .feature-section{
        grid-template-columns:1fr;
    }

    .right-scroll{
        height:500px;
    }

    .left-content{
        position:relative;
        top:auto;
    }
}
/*Branch Caard --------------------------------------------------------------------------------*/
/* Glassmorphism Green Gradient Card - Zoho Sites */

.custom-card {
    position: relative;
    width: 320px;
    padding: 40px 30px;
    border-radius: 38px;

    /* Light Green Gradient */
    background: linear-gradient(
        135deg,
        rgba(235,255,240,0.95) 0%,
        rgba(214,255,225,0.90) 35%,
        rgba(190,255,210,0.85) 70%,
        rgba(225,255,235,0.90) 100%
    );

    /* Glass Effect */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    /* Soft Border */
    border: 1.5px solid rgba(255,255,255,0.45);

    /* Modern Shadow */
    box-shadow:
        0 15px 40px rgba(70,180,100,0.12),
        inset 0 1px 1px rgba(255,255,255,0.7);

    overflow: hidden;
}

/* Gradient Glow */
.custom-card::before{
    content:'';
    position:absolute;
    inset:-30%;
    background: radial-gradient(
        circle,
        rgba(170,255,190,0.35) 0%,
        transparent 65%
    );
    pointer-events:none;
}

/* Inner Border Glow */
.custom-card::after{
    content:'';
    position:absolute;
    inset:1px;
    border-radius:37px;
    border:1px solid rgba(255,255,255,0.35);
    pointer-events:none;
}

/* Optional Button Style */
.custom-btn{
    display:inline-block;
    padding:16px 35px;
    border-radius:22px;

    background: linear-gradient(
        135deg,
        rgba(185,255,200,0.85),
        rgba(145,235,170,0.9)
    );

    border:1px solid rgba(255,255,255,0.4);

    color:#1e4d2b;
    font-weight:600;
    text-decoration:none;

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

    box-shadow:
        0 8px 20px rgba(70,180,100,0.15),
        inset 0 1px 1px rgba(255,255,255,0.6);
}
/* ==========================
   Capsule Tabs Design
   ========================== */

/* Main Tab Header */
.capsule-tabs{
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:20px;
    padding:12px 14px;
    width:fit-content;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* Tab Items */
.capsule-tabs a{
    position:relative;
    padding:12px 18px;
    color:#374151;
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    border-radius:14px;
    transition:all .3s ease;
}

/* Divider */
.capsule-tabs a:not(:last-child)::after{
    content:"";
    position:absolute;
    right:-1px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:20px;
    background:#e5e7eb;
}

/* Active Tab */
.capsule-tabs a.active{
    background:#f1f1f1;
    color:#111827;
}

/* Hover */
.capsule-tabs a:hover{
    background:#f7f7f7;
}