/* ===================================================== GLOBAL ===================================================== */
 body 
 {
     font-family: 'Noto Sans Kannada', Arial, sans-serif;
     margin: 0; 
     background-color: #fffde7; 
     overflow-x: hidden; }

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

   .header-top::before
{
    content: "";

    position: absolute;

    top: 45%;
    left: 50%;

    width: 600px;
    height: 250px;

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

     background: radial-gradient(
        circle,
        rgba(255,215,0,0.55) 0%,
        rgba(255,140,0,0.30) 35%,
        rgba(255,87,34,0.15) 60%,
        transparent 80%
    );

    z-index: 0;
    pointer-events: none;
}

header
{
    background:
    linear-gradient(
        135deg,
        #e25e4f 0%,
        #e08040 35%,
        #c9795f 65%,
        #e0bc47 100%
    );
}

 /* HEADER TOP */ 
 .header-top
  {
     display: flex;
      align-items: center; 
    justify-content: space-between; 
    position: relative; padding: 10px 40px;
 } 
 
 /* CENTER TEXT */ 

    .center-text
{
    position: relative;
    z-index: 2;
}
    
    /* MAIN SIDE IMAGES */ 
    .side-img 
    {
    width: 90px; 
    z-index: 4; 
}
 .palace-img 
 {
     width: 180px;
    
}

/* EXTRA LEFT IMAGE */ 
.extra-left 
{
     position: absolute; 
     left: 280px; 
     top: 65%; 
     transform: translateY(-50%); 
     width: 110px; 
     height: 130px; 
     object-fit: cover; 
     border-radius: 12px; 
     border: 3px solid #fdd835; 
     box-shadow: 0 4px 14px rgba(0,0,0,0.25); 
     z-index: 3; 
    }
    
    /* EXTRA RIGHT IMAGE */ 
    .extra-right 
    {
         position: absolute; 
         right: 380px; 
         top: 65%; 
         transform: translateY(-50%); 
         width: 110px; 
         height: 130px; 
         object-fit: cover; 
         border-radius: 12px; 
         border: 3px solid #fdd835; 
         box-shadow: 0 4px 14px rgba(0,0,0,0.25); 
         z-index: 3;
         }
         
         .center-text
          {
             text-align: center;
            }
     
/* ===================================================== SVG TITLE ===================================================== */

.banner-wrapper
{
    margin: 0;
    width: 100%;
}

.banner-svg
{
    width: 100%;
    height: 170px;
    overflow: visible;
}

.text-outline
{
    font-size: 58px;
    font-weight: 900;

    fill: none;

    stroke: #000;

    stroke-width: 2px;

    stroke-linejoin: round;

    paint-order: stroke fill;

    letter-spacing: 1px;
}

.text-fill
{
    font-size: 58px;

    font-weight: 900;

    fill: url(#grad1);

    letter-spacing: 1px;

    filter:
    drop-shadow(1px 1px 0 #000)
    drop-shadow(-1px -1px 0 #000)
    drop-shadow(1px -1px 0 #000)
    drop-shadow(-1px 1px 0 #000);
}

     /* Text Below Title */
     .center-text p 
     {
         margin: 4px 0;
     } 
     .slogan 
     {
         color: #c62828;
        font-size: 22px; 
        font-weight: bold; 
    }
    
    /* Images */ 
    .side-img 
    {
         width: 90px; 
    } 
    .palace-img 
    {
         width: 180px; 
    }
     header hr
      {
         border: 3px solid #fdd835;
          width: 80%;
     } 
     
     /* ===================================================== NAVIGATION ===================================================== */
      nav 
      {
         background: #c62828; 
         padding: 12px; 
         text-align: center; 
    } 
    
    nav a 
    {
         color: #fdd835; 
         margin: 15px; 
         text-decoration: none; 
         font-weight: bold; 
         transition: 0.3s; 
    }
    
    nav a:hover 
    {
         color: white; 
    }
    
    nav a.active 
     {
         color: white; 
         border-bottom: 2px solid #fdd835; 
    } 
    
    /* ===================================================== PHOTO SLIDER ===================================================== */ 
    
    .photo-slider 
    {
         position: relative; 
         width: 100%; 
         aspect-ratio: 16 / 9; 
         overflow: hidden; 
    } 
    
    .slider-container 
    { 
        width: 100%; 
        height: 100%; 
        position: relative;  
    }
     .slide 
     {
         position: absolute; 
         width: 100%; 
         height: 100%; 
         opacity: 0; 
         transition: opacity 1s ease; 
    } 
    .slide.active 
    { 
        opacity: 1; 
    } 
    
    /* Blur Background */ 
    .slide::before 
    { 
        content: ""; 
        position: absolute; 
        inset: 0; 
        background-image: var(--bg); 
        background-size: cover; 
        background-position: center; 
        filter: blur(25px); 
        transform: scale(1.2); 
        z-index: 1; 
    } 
    
    /* Overlay */ 
    .slide::after 
    { 
        content: ""; 
        position: absolute; 
        inset: 0; 
        background: linear-gradient( 135deg, rgba(198, 40, 40, 0.5), rgba(253, 216, 53, 0.3) ); 
        z-index: 2; 
    } 
    
    /* Slide Image */ 
    .slide img 
    { 
        position: relative; 
        z-index: 3; 
        width: 100%; 
        height: 100%; 
        object-fit: contain; 
    } 
    
    /* Slide Text */ 
    .slide-content 
    { 
        position: absolute; 
        bottom: 30px; 
        left: 40px; 
        z-index: 5; 
        color: white; max-width: 60%; 
    } 
    .slide-content h2 
    { 
        font-size: 32px; 
        margin: 0; 
        font-weight: bold; 
    } 
    .slide-content p 
    { 
        font-size: 18px; 
        margin-top: 8px; 
    } 
    
    /* Slider Arrows */ 
    .photo-slider .prev, 
    .photo-slider .next 
    {
         position: absolute; 
         top: 50%; 
         transform: translateY(-50%); 
         font-size: 35px; 
         color: white; 
         padding: 10px; 
         cursor: pointer; 
         background: rgba(0,0,0,0.4); 
         border-radius: 50%; 
         z-index: 6; 
         transition: 0.3s; 
        }
        
        .photo-slider .prev 
        {
             left: 15px; 
        } 
        .photo-slider .next 
        {
            right: 15px; 
        } 
        .photo-slider 
        .prev:hover, 
        .photo-slider 
        .next:hover 
        { 
            background: rgba(0,0,0,0.7); 
        } 
        
    /* ===================================================== HERO SECTION ===================================================== */
    
    .hero 
    { 
        position: relative; 
        height: 350px; 
        overflow: hidden; 
    } 
    
    .hero-slide 
{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    transition: opacity 1s;
    z-index: 1;
}
    
    .hero-slide.active 
{ 
    opacity: 1;
    z-index: 2;
}
    
   .hero-slide::before
{
    content: "";

    position: absolute;

    inset: 0;

    background:
    linear-gradient(
        135deg,
        rgba(90,0,0,0.78),
        rgba(198,40,40,0.72),
        rgba(255,193,7,0.45)
    ),
    url("images/karnataka-flag-op4.png");

    background-size: cover;

    background-position: center;

    filter: blur(10px);

    transform: scale(1.08);

    z-index: 1;
}
    
    /* Kannada Letters */ 
    .letters-bg 
    { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    z-index: 2;
    } 
    
    .letter 
    {
         position: absolute; 
         color: rgba(0,0,0,0.15); 
         opacity: 0; 
         transform: scale(0.5); 
    } 
    
    .hero-slide.active .letter 
    { 
        animation: fadeLetters 1.5s forwards; 
    } 
    
    @keyframes fadeLetters { to { opacity: 1; transform: scale(1) rotate(360deg); } } 
    
    /* Overlay */ 
    
    .hero-overlay 
    { 
        position: absolute; 
        width: 100%; 
        height: 100%; 
        background: rgba(0,0,0,0.52); 
        z-index: 3; 
    } 
    
    /* Hero Content */ 
    
    .hero-content 
    { 
        position: relative; 
        z-index: 4; 
        color: white; 
        text-align: center; 
    }

    /* Progress Bar */

.progress-bar 
{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: #fdd835;
    z-index: 5;
    transition: width 5s linear;
}

@keyframes progress 
{
    from 
    {
        width: 0%;
    }

    to 
    {
        width: 100%;
    }
}
    
    /* Dots */ 
    
    .dots 
{ 
    position: absolute; 
    bottom: 10px; 
    width: 100%; 
    text-align: center;
    z-index: 20;
}

    .dot 
    { 
        width: 12px; 
        height: 12px; 
        background: #fdd835; display: inline-block; 
        margin: 5px; 
        border-radius: 50%; 
        cursor: pointer; 
  position: relative;
    z-index: 21;

    } 
    .dot.active 
    { 
        background: #c62828; 
    } 
    
    /* ===================================================== COMMON SECTION ===================================================== */ 
    
    section 
    { 
        padding: 30px; 
        margin: 20px; 
        background: white; 
        border-left: 8px solid #c62828; 
        border-radius: 10px; 
    } 
    /* ===================================================== PAGE TITLE ===================================================== */ 
    
    .page-title 
    { 
        text-align: center; 
        background: white; 
    } 
    .page-title h2 
    { 
        color: #c62828; 
        font-size: 34px; 
        margin: 0; 
    } 
    
    /* ===================================================== GALLERY PAGE ===================================================== */ 
    
    .gallery 
    { 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
        gap: 18px; 
        padding: 10px; 
        background: linear-gradient( 135deg, #e6ba0a 0%, #fffde7 30%, #f70606 60%, #ffaa82 100% ); 
    } 
    .gallery img 
    {
         width: 100%; 
         height: 260px; 
         object-fit: cover; 
         border-radius: 14px; 
         cursor: pointer; 
         opacity: 0; 
         transform: scale(0.92); 
         transition: transform 0.4s ease, opacity 0.5s ease, box-shadow 0.4s ease; 
         background: #eee; 
        } 
        .gallery img.loaded 
        { 
            opacity: 1; 
            transform: scale(1); 
        } 
        .gallery img:hover 
        { 
            transform: scale(1.04); 
            box-shadow: 0 10px 25px rgba(0,0,0,0.25), 0 0 15px rgba(198, 40, 40, 0.4); 
        } 

    /* ===================================================== LIGHTBOX ===================================================== */
     .lightbox 
     { 
        position: fixed; 
        inset: 0; 
        background: rgba(0,0,0,0.92); 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        opacity: 0; 
        visibility: hidden; 
        transition: 0.4s ease; 
        z-index: 9999; 
    } 
    .lightbox.show 
    { 
        opacity: 1; 
        visibility: visible; 
    } 
    .lightbox-content 
    { 
        position: relative; 
        max-width: 90%; 
        max-height: 90%; 
        text-align: center; 
    } 
    .lightbox-content img 
    {
         max-width: 100%; 
         max-height: 82vh; 
         border-radius: 14px; 
         box-shadow: 0 0 30px rgba(255,255,255,0.15); 
    } 
    .counter 
    { 
        color: white; 
        margin-top: 12px; 
        font-size: 18px; 
    } 
    .close 
    { 
        position: absolute; 
        top: 20px; 
        right: 35px; 
        color: white; 
        font-size: 45px; 
        cursor: pointer; 
    } 
    .lightbox .prev, 
    .lightbox .next 
    { 
        position: absolute;
        top: 50%; 
        transform: translateY(-50%); 
        color: white; 
        font-size: 50px; 
        cursor: pointer; 
        padding: 12px; 
        background: rgba(255,255,255,0.08); 
        border-radius: 50%; 
    } 
    .lightbox .prev 
    { 
        left: 25px; 
    } 
    .lightbox .next 
    { 
        right: 25px; 
    }
    
    /* ===================================================== CONTACT PAGE ===================================================== */ 
    .contact-section 
    { 
        display: flex; 
        justify-content: center; 
        padding: 10px 0; 
        background: linear-gradient( 135deg, #e6ba0a 0%, #fffde7 30%, #f70606 60%, #ffaa82 100% ); 
    } 
    
    /* CONTACT GRID */ 
    .contact-container 
    { 
        width: 100%; 
        max-width: 980px; 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
        gap: 28px; 
        justify-items: center; 
        align-items: stretch; 
    } 
    .contact-card 
    { 
        width: 100%; 
        max-width: 420px; 
        background: linear-gradient( 135deg, #fff8dc 0%, #fffde7 30%, #fff3c4 60%, #ffe082 100% ); 
        border-radius: 22px; 
        padding: 35px 28px; 
        text-align: center; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.12); 
        border: 2px solid rgba(198,40,40,0.12); 
        transition: transform 0.4s ease, box-shadow 0.4s ease; 
    } 
    .contact-card:hover 
    { 
        transform: translateY(-6px); 
        box-shadow: 0 16px 40px rgba(0,0,0,0.18), 0 0 20px rgba(198,40,40,0.15); 
    } 
    .contact-img 
    { 
        width: 170px; 
        height: 170px; 
        object-fit: cover; 
        border-radius: 50%; 
        border: 5px solid #fdd835; 
        box-shadow: 0 6px 20px rgba(0,0,0,0.2); 
        margin-bottom: 18px; 
    } 
    .leader-name 
    { 
        font-size: 30px; 
        font-weight: bold; 
        color: #c62828; 
    } 
    .leader-org 
    { 
        font-size: 18px;
        color: #444;
    } 
    .leader-role 
    { 
        font-size: 20px; 
        font-weight: bold; 
        color: #7f1d1d; 
        margin-bottom: 28px; 
    } 
    .contact-info 
    { 
        display: flex; 
        flex-direction: column; 
        gap: 16px; 
    }
     .info-item 
     { 
        display: flex; 
        align-items: center; 
        gap: 12px; 
        background: white; 
        padding: 14px 16px; 
        border-radius: 14px; 
        box-shadow: 0 4px 12px rgba(0,0,0,0.08); 
    } 
    .info-item span:first-child 
    { 
        font-size: 22px; 
    } 
    .info-item a, 
    .info-item span:last-child 
    { 
        color: #333; 
        text-decoration: none; 
        font-size: 16px; 
        word-break: break-word; 
    }


    /* ========================= SPLIT ABOUT SECTION ========================= */ 

    .split-about 
    { 
        display: flex; 
        gap: 10px; 
        margin-top: 10px; 
        background: linear-gradient( 135deg, #e6ba0a 0%, #fffde7 30%, #f70606 60%, #ffaa82 100% ); 
    } 
    .about-half 
    { 
        flex: 1; 
        background: #fff8e1; padding: 4px 8px; border-left: 5px solid #c62828; 
        border-radius: 8px; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.08); 
    } 
    .about-half h3 
    { 
        color: #b71c1c; 
        margin-bottom: 2px; 
        font-size: 20px; 
    } 
    .about-half p 
    { 
        font-size: 14px; 
        line-height: 1.6; 
        color: #333; 
    } 
    
    /* ========================= LEADERS SECTION ========================= */ 
    .about-grid 
    { 
        display: flex; 
        flex-direction: column; 
        gap: 25px; 
        margin: 35px auto; 
        width: 85%; 
        background: linear-gradient( 135deg, #e6ba0a 0%, #fffde7 30%, #f70606 60%, #ffaa82 100% ); 
    } 
    .leader-card 
    { 
        background: #fff8e1; 
        padding: 22px; 
        border-left: 6px solid #c62828; 
        border-radius: 10px; 
        box-shadow: 0 3px 10px rgba(0,0,0,0.08); 
        
    /* text-align: center; position: relative; overflow: hidden; */ 
    }

.leader-img, 
.nagaraj-name, 
.leader-card h3 
{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 
.nagaraj-name 
{ 
    font-size: 18px; 
    font-weight: 600; 
    color: #444; 
    margin-top: 8px; 
    margin-bottom: 8px; 
} 
.leader-img 
{ 
    width: 170px; 
    height: 180px; 
    object-fit: cover; 
    border-radius: 10px; 
    border: 3px solid #c62828; 
    margin-bottom: 12px; 
} 
.leader-img:hover 
{ 
    transform: scale(1.03); 
} 
.leader-card h3 
{ 
    color: #b71c1c; 
    font-size: 26px; 
    margin-bottom: 15px; 
    letter-spacing: 1px; 
} 
.leader-text 
{ 
    text-align: justify; 
    line-height: 1.9; 
    font-size: 16px; 
    color: #333; 
} 
.nagaraj-name 
{ 
    font-size: 18px; 
    font-weight: 600; 
    color: #444; 
    margin-top: -2px; 
    margin-bottom: 10px; 
} 

/* ========================= TEAM SECTION ========================= */ 
.team-section 
{ 
    background: linear-gradient( 135deg, #e6ba0a 0%, #fffde7 30%, #f70606 60%, #ffaa82 100% ); 
    padding: 30px; 
    margin: 20px; 
    border-left: 8px solid #c62828; 
    border-radius: 10px; 
    box-shadow: 0 3px 10px rgba(0,0,0,0.08); 
} 
.team-title 
{ 
    color: #b71c1c; 
    margin-bottom: 20px; 
    font-size: 28px; 
} 
.team-slider 
{ 
    display: flex; 
    align-items: center; 
    gap: 15px; 
} 
.team-container 
{ 
    display: flex; 
    gap: 30px; 
    overflow-x: auto; 
    scroll-behavior: smooth; 
    scrollbar-width: none; 
    flex: 1; 
} 
.team-container::-webkit-scrollbar { display: none; } 
.team-card 
{ 
    min-width: 280px; 
    text-align: center; 
} 
.team-card img 
{
     width: 170px; 
     height: 170px; 
     object-fit: cover; 
     object-position: top; 
     border-radius: 10px; 
     border: 3px solid #c62828; 
     background: #fff; 
} 
.team-card h4 
{ 
    margin-top: 10px; 
    margin-bottom: 5px; 
    color: #b71c1c; 
    font-size: 18px; 
} 
.team-card p 
{ 
    color: #444; 
    font-size: 15px; 
} 

/* BUTTONS */ 

.slider-btn 
{ 
    background: #c62828; 
    color: white; 
    border: none; 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    cursor: pointer; 
    font-size: 20px; 
} 

.slider-btn:hover { background: #a31515; } 

/* ========================================= LAST SECTION ========================================= */ 
.last-section
{ 
    display: grid; 
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); 
    gap: 30px; 
    padding: 50px 8%; 
    background: linear-gradient( 135deg, #7a0000, #c62828, #f9a825, #ffeb3b ); 
    color: white; 
} 

/* BOX */ 
.last-box
{ 
    background: rgba(255,255,255,0.08); 
    padding: 25px; 
    border-radius: 18px; 
    backdrop-filter: blur(6px); 
    box-shadow: 0 6px 20px rgba(0,0,0,0.25); 
} 

/* HEADINGS */ 
.last-box h2
{ 
    margin-bottom: 20px; 
    font-size: 28px; 
} 

/* NEWS CARD */ 
.news-card
{ 
    background: rgba(255,255,255,0.12); 
    padding: 15px; 
    margin-bottom: 15px; 
    border-left: 5px solid yellow; 
    border-radius: 12px; 
} 
.news-card h3
{ 
    margin-bottom: 8px; 
} 

/* CENTER */ 
.center-box
{ 
    text-align: center; 
} 
.footer-logo
{ 
    width: 120px; 
    margin-bottom: 15px; 
} 

/* LINKS */ 
.quick-links
{ 
    list-style: none; 
    padding: 0; 
} 
.quick-links li
{ 
    margin-bottom: 12px; 
} 
.quick-links a
{ 
    color: white; 
    text-decoration: none; 
    font-size: 18px; 
    transition: 0.3s; 
} 
.quick-links a:hover{ color: yellow; padding-left: 8px; } 
.news-list
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
.news-list li
{ 
    background: rgba(255,255,255,0.12); 
    padding: 12px 15px; 
    margin-bottom: 12px; 
    border-left: 4px solid yellow; 
    border-radius: 10px; 
    font-size: 16px; 
    line-height: 1.5; 
    transition: 0.3s; 
} 
.news-list li:hover
{ 
    transform: translateX(5px); 
    background: rgba(255,255,255,0.18); 
} 
.main-line
{ 
    margin-bottom: 25px; 
    line-height: 1.8; 
} 
.slogan-list
{ 
    display: flex; 
    flex-direction: column; 
    gap: 14px; 
} 
.slogan-list p
{ 
    background: rgba(255,255,255,0.12);
    padding: 12px; 
    border-radius: 12px; 
    font-size: 17px; 
    font-weight: 500; 
    transition: 0.3s; 
} 
.slogan-list p:hover{ transform: scale(1.03); background: rgba(255,255,255,0.18); } 
.social-section
{ 
    margin-top: 65px; 
} 
.social-section h3
{ 
    margin-bottom: 15px; 
    font-size: 22px; 
} 
.social-btn
{ 
    display: block; 
    text-decoration: none; 
    color: white; 
    background: rgba(255,255,255,0.12); 
    padding: 12px 16px; 
    margin-bottom: 12px; 
    border-radius: 12px; 
    transition: 0.3s; 
    font-size: 17px; 
} 
.social-btn:hover
{ 
    background: rgba(255,255,255,0.22); 
    transform: translateX(5px); 
    color: yellow; 
} 
.social-text
{ 
    font-size: 15px; 
    line-height: 1.7; 
    margin-bottom: 18px; 
    color: rgba(255,255,255,0.9); 
} 

/* FOOTER */ 
footer
{ 
    text-align: center; 
    padding: 18px; 
    background: #5a0000;
    color: white; 
    font-size: 17px; } 
    
/* ================= PROGRAM SECTION ================= */ 

.program-section 
{ 
    padding: 50px 20px; 
    background: linear-gradient( 135deg, #e6ba0a 0%, #fffde7 30%, #f70606 60%, #ffaa82 100% ); 
} 

/* TITLE */ 

.program-title 
{ 
    text-align: center; 
    font-size: 34px; 
    color: #b71c1c; 
    margin-bottom: 45px; 
} 

/* PROGRAM ROW */ 

.program-row 
{ 
    display: flex; 
    align-items: center; 
    gap: 35px; 
    margin-bottom: 45px; 
    background: linear-gradient(to right, #fff8e1, #ffffff); 
    padding: 20px; 
    border-radius: 16px; 
    box-shadow: 0 4px 14px rgba(0,0,0,0.08); border-left: 7px solid #c62828; 
} 

/* ALTERNATE LAYOUT */ 

.program-row.reverse 
{ 
    flex-direction: row-reverse; 
} 

/* IMAGE */ 

.program-row img 
{ 
    width: 350px; 
    height: 240px; 
    object-fit: cover; 
    border-radius: 12px; 
    border: 4px solid #fbc02d; 
    flex-shrink: 0; 
} 

/* TEXT */ 
.program-text 
{ 
    flex: 1; 
} 

.program-text h3 
{ 
    color: #b71c1c; 
    margin-bottom: 12px; 
    font-size: 26px; 
} 
.program-text p 
{ 
    color: #444; 
    line-height: 1.8; 
    font-size: 17px; 
} 

/* HOVER EFFECT */ 

.program-row:hover
 {
     transform: translateY(-4px); 
     transition: 0.3s; 
} 

/* ========================= SOCIAL MEDIA SECTION ========================= */ 

.social-qr 
{ 
    width: 180px; 
    height: 180px; 
    object-fit: contain; 
    border-radius: 14px; 
    background: white; 
    padding: 10px; 
    border: 3px solid #fdd835; 
    box-shadow: 0 6px 18px rgba(0,0,0,0.12); 
    margin-bottom: 18px; 
} 

.social-id 
{ 
    font-size: 17px; 
    color: #444; 
    margin-bottom: 20px; 
    word-break: break-word; 
} 
.social-box 
{ 
    justify-content: center; 
} 

.district
{
    font-size: 18px;
    font-weight: bold;
    margin: 5px 0;
}

.reg-no
{
    font-size: 14px;
    margin: 4px 0;
    line-height: 1.5;
}

/* === newly added 4.6.2026 ==== */
.left-caption
{
    position: absolute;

    left: 240px;      /* adjust slightly if needed */
    top: 87%;

    width: 170px;

    text-align: center;

    z-index: 5;
}

.right-caption
{
    position: absolute;

    right: 340px;     /* adjust slightly if needed */
    top: 87%;

    width: 170px;

    text-align: center;

    z-index: 5;
}

.cap-name
{
    color: #c62828;
    font-weight: bold;
    font-size: 12px;
}

.cap-post
{
    color: #444;
    font-size: 12px;
    line-height: 1.2;
}

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

@media (max-width: 768px) 
{ 

    /* FIX MOBILE HORIZONTAL SCROLL */

html, body
{
    overflow-x: hidden;
    max-width: 100%;
}
header hr
    {
        width: 92%;
    }

 .header-top
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    text-align: center;
}
    
    /* MOBILE HEADER IMAGES */ 

    .side-img
    {
        width: 55px;
        height: auto;
    }

    .palace-img
    {
        width: 70px;
    }

    
    /* HIDE EXTRA PHOTOS ON MOBILE */ 
    
  .extra-left,
    .extra-right
    {
        position: static;
        transform: none;
        width: 65px;
        height: 80px;
        object-fit: cover;
        margin: 0;
    }


.leader-left,
.leader-right
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.left-caption,
.right-caption
{
    position: static;
    width: 90px;
    text-align: center;
    margin-top: 4px;
}

.cap-name
{
    font-size: 8px;
    font-weight: bold;
    /* min-height: 20px; */
    white-space: nowrap;
}

.cap-post
{
    font-size: 7px;
    line-height: 1.2;
    min-height: 18px;
}

.text-outline
{
    font-size: 70px;
    stroke-width: 1.2px;
    letter-spacing: 0px;
}

.text-fill
{
    font-size: 70px;
    letter-spacing: 0px;
} */

/* ================= MOBILE SVG FIX ================= */

.banner-wrapper
{
    width: 100%;
    overflow: visible;
    margin: 0;
    padding: 0;

}

.banner-svg
{
    width: 100%;
     height: 95px;   /* reduced from 130px */
    overflow: visible;
    display: block;
}


.text-outline
{
    display: block;

    font-size: 70px;
    font-weight: 900;

    fill: none;
    stroke: #000;
    stroke-width: 3px;

    letter-spacing: 0px;
}

.text-fill
{
    font-size: 70px;
    font-weight: 900;

    letter-spacing: 0px;

    fill: url(#grad1);
}

.banner-svg text
{
    dominant-baseline: middle;
    text-anchor: middle;
}


.text-fill
{
    font-size: 70px;

    font-weight: 900;

    letter-spacing: 0px;

    fill: url(#grad1);

    -webkit-text-stroke: 1px black;

    paint-order: stroke fill;
}


    .center-text
    {
        width: 100%;
        order: 2;
        margin-top: -10px;   /* reduced */
    padding-top: 0;
    }

    .center-text h1
{
    margin: 0;
    line-height: 1;
}

    .slogan
    {
            font-size: 18px;
    margin-top: 6px;
    margin-bottom: 0;
    line-height: 1.3;
    color: #d32f2f;
    }


     .district
    {
        font-size: 18px;
        font-weight: bold;
        margin-top: -8px;   /* pulls upward */
        margin-bottom: 4px;
    }


   .reg-no
    {
        font-size: 12px;
        line-height: 1.4;
        padding: 0 10px;
        margin: 0;
    }

/* NAVIGATION */

nav
{
    padding: 10px 2px;
}

   nav a
{
    display: inline-block;
    margin: 5px 2px;
    font-size: 12px;

    white-space: nowrap;
}
    
    section 
    { 
        margin: 12px; 
        padding: 18px; 
    } 

/* ================= MOBILE PHOTO SLIDER FIX ================= */

.photo-slider
{
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border-left: none;
    box-sizing: border-box;
    overflow: hidden;
}

.slider-container
{
    width: 100%;
    overflow: hidden;
}

.slide
{
    width: 100%;
}

.slide img
{
    width: 100%;
    height: 230px;
    object-fit: cover;   /* fills properly */
    display: block;
}

/* TEXT */

.slide-content
{
    position: absolute;

    left: 12px;
    bottom: 10px;

    right: auto;

    width: auto;

    max-width: 82%;

    background: rgba(120, 0, 0, 0.82);

    padding: 7px 12px;

    border-radius: 10px;

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

    backdrop-filter: blur(3px);

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

    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}

.slide-content h2
{
    font-size: 16px;
    margin: 0;
    line-height: 1.3;
}

.slide-content p
{
    font-size: 12px;

    margin-top: 2px;
    margin-bottom: 0;

    line-height: 1.4;
}

/* ARROWS */

.photo-slider .prev,
.photo-slider .next
{
    font-size: 24px;
    padding: 6px 10px;
}

    /* IMAGES FIX */
    img
{
    max-width: 100%;
    height: auto;
}

/* SECTION FIX */
    .team-section,
.program-section,
.last-section
{
    box-sizing: border-box;
    width: 100%;
}
    
    .slide-content 
    { 
        left: 15px; 
        right: 15px; 
        max-width: 90%; 
    } 
    
    .slide-content h2 
    { 
        font-size: 18px;
 } 
 
 .slide-content p 
 { 
    font-size: 13px; 
}  

.hero 
{ 
    height: 240px; 
} 

   .hero-content
    {
        width: 88%;
        padding-left: 12px;
        padding-right: 55px;

        text-align: left;
    }

@media (max-width: 768px)
{
    .leader-card
    {
        margin: 10px;
        padding: 12px;
        max-width: 100%;
    }

    .leader-img
    {
        width: 100px;
        height: 100px;
    }

    .nagaraj-name
    {
        font-size: 16px;
    }

    .leader-card h3
    {
        font-size: 13px;
    }

    .leader-text
    {
        text-align: left;
        line-height: 1.6;
        font-family: 'Noto Sans Kannada', sans-serif;
        word-spacing: normal;
        max-width: 100%;
    }
}

/* =================  team section ===================== */
    
 .team-section
{
    padding: 18px 10px;
    overflow: hidden;
}

     .team-slider
    {
        display: flex;
        align-items: center;

        gap: 4px;

        padding: 0 2px;
    }


    .team-container
    {
        display: flex;

        gap: 10px;

        overflow-x: auto;

        scroll-behavior: smooth;

        padding-left: 0;
        padding-right: 0;

        width: 100%;
    }


.team-card
    {
        min-width: 205px;
        max-width: 205px;

        padding: 12px 6px;

        text-align: left;

        flex-shrink: 0;
    }

     .team-card img
    {
        width: 120px;
        height: 120px;

        margin-left: 4px;
    }


    .team-card h4
    {
        font-size: 17px;

        padding-left: 4px;

        margin-top: 10px;
    }


     .team-card p
    {
        font-size: 13px;

        line-height: 1.5;

        padding-left: 4px;
        padding-right: 2px;

        margin: 4px 0;

        white-space: normal;

        overflow-wrap: break-word;
        word-break: break-word;
    }

  

    .slider-btn
    {
        width: 28px;
        height: 28px;

        font-size: 18px;

        flex-shrink: 0;
    }



.gallery 
{ 
    grid-template-columns: repeat(2, 1fr); 
    gap: 10px; 
} 

.gallery img 
{ 
    height: 160px; 
} 

.contact-card 
{ 
    padding: 25px 18px; 
} 

.contact-img 
{ 
    width: 130px; 
    height: 130px; 
} 

.leader-name
 { 
    font-size: 24px; 
} 

.leader-role 
{ 
    font-size: 17px; 
} 

.split-about 
{ 
    flex-direction: column; 
} 

.program-row, 
.program-row.reverse
 { 
    flex-direction: column; 
} 

.program-row img
 {
     width: 100%; 
     height: auto; 
} 

.program-text h3
 {
     text-align: center;
 } 
 
 .program-text p 
 { 
    text-align: center; 
} 
} 


/* ===================================================== EXTRA SMALL DEVICES ===================================================== */ 

@media (max-width: 480px) 
{ 
    /* nav a 
    { 
        font-size: 12px; 
        margin: 4px; 
    }  */
    
    .gallery img 
    { 
        height: 135px; 
    } 
    
    .contact-img 
    { 
        width: 110px; 
        height: 110px; 
    } 
    
    .leader-name 
    { 
        font-size: 22px; 
    } 
}