:root { --j-navy: #002147; --j-orange: #FF8C00; }
    body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8f9fa; }

    /* 1. Sleek Stats Bar Style */
    .stats-bar-wrapper {
        background: #ffffff;
        padding: 30px 0;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        margin: 40px 0;
    }
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .stat-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        border-right: 1px solid #f0f0f0;
    }
    .stat-item:last-child { border-right: none; }
    .stat-icon-box {
        background: rgba(0, 33, 71, 0.05);
        color: var(--j-navy);
        width: 45px; height: 45px;
        display: flex; align-items: center; justify-content: center;
        border-radius: 12px; font-size: 1.4rem;
    }
    .stat-number { font-size: 1.6rem; font-weight: 800; color: var(--j-orange); margin: 0; }
    .stat-text { font-size: 0.8rem; font-weight: 700; color: #666; margin: 0; text-transform: uppercase; }

    /* 2. Course Card Image Fix */
    .course-card img {
        height: 200px;
        object-fit: cover;
        width: 100%;
        border-radius: 15px 15px 0 0;
    }
#courses {
    padding-top: 0 !important;   /* పైన ప్యాడింగ్ సున్నా */
    margin-top: -40px !important; /* నెగటివ్ మార్జిన్ పెంచడం వల్ల పైన సెక్షన్‌లోకి ఇది వెళ్తుంది */
}

.main-header-card.compact-box {
    margin-top: 0 !important;    /* కార్డ్ పైన గ్యాప్ లేకుండా చేస్తుంది */
    top: 0;
}
    @media (max-width: 768px) {
        .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
        .stat-item:nth-child(2) { border-right: none; }
    }

    .stats-bar-wrapper {
        /* background: #f8f9fa; /* Light Gray Background */
        background: linear-gradient(to right, #ffffff, #fcfcfc); /* Subtle Gradient */
        padding: 40px 0;
        border-top: 1px solid #e9ecef;
        margin-bottom: 0 !important; /* Footer కి గ్యాప్ లేకుండా చేస్తుంది */
        position: relative;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: center;
    }

    .stat-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        /* మధ్యలో నిలువు గీత కోసం */
        border-right: 1px dashed #dee2e6; 
        padding: 10px 0;
    }

    /* చివరి ఐటమ్ కి బోర్డర్ తీసేయడానికి */
    .stat-item:last-child {
        border-right: none;
    }

    .stat-icon-box {
        background: var(--j-navy); /* Navy Background for Icon */
        color: white;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%; /* సర్కిల్ షేప్ */
        font-size: 1.2rem;
        box-shadow: 0 4px 10px rgba(0, 33, 71, 0.2);
    }

    .stat-number {
        font-size: 1.8rem;
        font-weight: 800;
        color: var(--j-navy);
        margin-bottom: 0;
        line-height: 1.2;
    }

    .stat-text {
        font-size: 0.85rem;
        font-weight: 600;
        color: #FF8C00; /* Orange color for Text */
        margin-bottom: 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* మొబైల్ లో సెట్టింగ్స్ */
    @media (max-width: 768px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .stat-item {
            border-right: none;
            border-bottom: 1px dashed #dee2e6;
            padding: 20px 0;
        }
        .stat-item:nth-child(even) {
            border-left: 1px dashed #dee2e6;
            border-bottom: 1px dashed #dee2e6;
        }
    }
.category-block {
        background: #ffffff;
        padding: 20px 15px; /* ప్యాడింగ్ తగ్గించాను */
        border-radius: 25px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.02);
        border: 1px solid #f1f4f8;
        margin-bottom: 10px !important; 
        padding-bottom: 10px !important;
    }
  /* గ్యాలరీ సెక్షన్ పైన ఉండే గ్యాప్ తగ్గించడానికి */
#premiumGallery {
    padding-top: 10px !important;
    margin-top: -15px !important; /* అవసరమైతే దీన్ని ఇంకా పెంచవచ్చు */
}
    /* కేటగిరీ హెడర్ - మార్జిన్ తగ్గించాను */
    .category-header {
        text-align: center;
        margin-bottom: 25px; /* టైటిల్ కి కార్డులకి మధ్య గ్యాప్ తగ్గించాను */
    }

   .category-subtitle {
    font-size: 1.8rem; /* Size penchanu (1.8 nundi 2.2 ki) */
    font-weight: 800;  /* Inka bold ga kanipinchadaniki */
    color: #1a73e8;    /* Manchi vibrant Royal Blue color */
    margin-bottom: 12px;
    letter-spacing: 0.5px; /* Font chudadaniki premium ga untundi */
    text-transform: capitalize; /* Prathi word modati aksharam capital lo untundi */
}
    /* యానిమేటెడ్ లైన్ */
    .animated-line {
        width: 60px;
        height: 3px;
        background: linear-gradient(to right, var(--j-navy), var(--j-orange));
        margin: 0 auto;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }

    /* కోర్సు కార్డుల మధ్య గ్యాప్ కంట్రోల్ (Bootstrap G-3 వాడదాం) */
    .courses-grid {
        --bs-gutter-y: 1rem; /* నిలువు గ్యాప్ తగ్గించడానికి */
    }

/* హెడ్డింగ్ బాక్స్ - Height మరియు Gaps ఇంకా తగ్గించాను */
    .main-header-card {
        background: #f8faff; 
        /* Padding ఇంకా తగ్గించాను (పైన/కింద 12px, ఇరుపక్కల 15px) */
        padding: 12px 15px; 
        border-radius: 12px;
        
        /* ప్రొఫెషనల్ బోర్డర్ */
        border: 2px solid var(--j-navy); /* మీ వెబ్‌సైట్ నేవీ బ్లూ కలర్ */
        
        /* షాడో తగ్గించి సింపుల్ గా ఉంచాను */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        
        /* కింద ఉన్న సెక్షన్ కి గ్యాప్ తగ్గించాను */
        margin-bottom: 20px; 
        position: relative;
        text-align: center;
    }

    /* గ్రేడియంట్ టెక్స్ట్ ఎర్రర్ రాకుండా ఫిక్స్ చేశాను */
  /* మెయిన్ కార్డ్ - గ్యాప్ తగ్గించి గ్లాస్ ఎఫెక్ట్ ఇచ్చాను */
    .premium-header-box {
        background: linear-gradient(145deg, #ffffff, #f0f4f8);
        padding: 15px 10px; /* Height చాలా తగ్గించాను */
        border-radius: 15px;
        border: 1px solid rgba(0, 33, 71, 0.1);
        border-left: 6px solid #dc3545; /* ఎడమవైపున రెడ్ బార్ */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        margin-bottom: 10px; /* కింద ఉన్న గ్యాప్ పూర్తిగా తగ్గించాను */
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }

    /* బాక్స్ పైకి కిందకి మెల్లగా కదిలే యానిమేషన్ */
    .premium-header-box:hover {
        transform: translateY(-3px);
    }

    /* మెయిన్ టైటిల్ సైజ్ పెంచాను */
    .main-display-title {
        font-size: 2.2rem; /* సైజ్ పెంచాను */
        font-weight: 900;
        margin: 5px 0;
        line-height: 1.1;
        letter-spacing: -0.5px;
        color: #002147;
    }

    /* మల్టీ-కలర్ యానిమేటెడ్ టెక్స్ట్ (Blue & Red Mix) */
    .animated-gradient-text {
        background: linear-gradient(90deg, #002147, #0052d4, #dc3545, #002147);
        background-size: 300% auto;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
        animation: wave-animation 4s reverse infinite;
    }

    @keyframes wave-animation {
        to { background-position: 300% center; }
    }

    /* అకడమిక్ ప్రోగ్రామ్స్ బ్యాడ్జ్ కి Pulse యానిమేషన్ */
    .pulse-badge {
        font-size: 0.75rem;
        letter-spacing: 2px;
        background: rgba(220, 53, 69, 0.1) !important;
        color: #430ae2 !important;
        border: 1px solid rgba(220, 53, 69, 0.3);
        animation: pulse-red 2s infinite;
    }

    @keyframes pulse-red {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
        70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
    }

    /* కింద ఉండే డివైడర్ కి షైన్ ఎఫెక్ట్ */
    .stylish-divider {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 5px;
    }

    .line-segment {
        height: 4px;
        width: 60px;
        background: linear-gradient(90deg, #002147, #dc3545);
        border-radius: 10px;
        position: relative;
        overflow: hidden;
    }

    .line-segment::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, #ffffff, transparent);
        animation: line-shine 2s infinite;
    }

    @keyframes line-shine {
        to { left: 100%; }
    }
    /* టైటిల్ బార్ ని కూడా ఇంకా చిన్నగా చేశాను */
    .title-bar-mini {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin-top: 5px;
    }

    .mini-dot { width: 4px; height: 4px; background: #FF8C00; border-radius: 50%; }
    .mini-bar { width: 30px; height: 2px; background: #002147; border-radius: 10px; }
/* academic style in ocurses heading */
/* మెయిన్ కార్డ్ సెట్టింగ్స్ - సైజ్ తగ్గించడానికి */
.stylish-compact-box {
    max-width: fit-content;    /* బాక్స్ వెడల్పు కంటెంట్ వరకే ఉంటుంది */
    margin: 0 auto;            /* బాక్స్‌ను మధ్యలోకి తెస్తుంది */
    padding: 8px 25px;         /* పైన, కింద గ్యాప్ బాగా తగ్గించాను */
    border: 1px solid #00214733; 
    border-left: 5px solid #dc3545; 
    background: #ffffff;
    border-radius: 8px 25px 8px 25px; /* స్టైలిష్ అంచులు */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
}

/* గోల్డ్ బాడ్జ్ సెట్టింగ్స్ */
.gold-shiny-badge {
    font-size: 0.6rem;
    font-weight: 900;
    color: #002147; /* డార్క్ బ్లూ టెక్స్ట్ గోల్డ్ మీద బాగా కనిపిస్తుంది */
    background: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7);
    padding: 2px 12px;
    border-radius: 4px;
    display: inline-block;
    border: 1px solid #996515;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* టైటిల్ కింద ఉండే మినీ బార్ సెట్టింగ్స్ */
.title-bar-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 5px;
}

.mini-dot { width: 6px; height: 6px; border-radius: 50%; }
.red-dot { background: #dc3545; }
.blue-dot { background: #002147; }

.mini-bar {
    width: 40px;
    height: 3px;
    border-radius: 10px;
    background: linear-gradient(to right, #002147, #dc3545);
}


    
/* home spin name */
/* Remove default margins from slider */
/* Slider bottom gap fix */
#heroSlider {
    margin-bottom: 0 !important;
}

.college-info-bar {
    background: linear-gradient(135deg, #052607 0%, #1b5e20 100%);
    min-height: 130px;
    padding: 15px 0;
    position: relative;
    border-top: 5px solid #ff9800;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Typing Animation Logic */
.typing-wrapper {
    display: flex;
    justify-content: flex-start;
}

.college-name-typing {
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    font-weight: 800;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #ff9800;
    width: 0;
    animation: typing-main 5s steps(40, end) infinite alternate;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

@keyframes typing-main {
    from { width: 0; }
    to { width: 100%; }
}

/* Code Cards Styling */
.code-stack {
    display: flex;
    gap: 15px;
    justify-content: flex-end; /* Desktop lo chivaraki untundhi */
}

.modern-code-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    min-width: 150px;
}

.card-icon {
    font-size: 1.5rem;
    color: #ffc107;
    margin-right: 12px;
}

.card-info {
    display: flex;
    flex-direction: column;
}

.label {
    font-size: 0.6rem;
    color: #ffc107;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.value {
    font-size: 1.3rem;
    font-weight: 900 !important; /* Very Strong */
    color: #ffffff;
    line-height: 1;
}

/* Bottom Glow */
.premium-bottom-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff9800, #ffc107, transparent);
    animation: move-glow 3s linear infinite;
}

@keyframes move-glow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* --- MOBILE SPECIFIC FIXES --- */
@media (max-width: 768px) {
    .college-info-bar {
        min-height: auto;
        padding: 20px 10px;
    }

    /* Mobile lo kuda typing ravalante width ni fix cheyali */
    .college-name-typing {
        font-size: 1.1rem;
        white-space: nowrap; /* Mobile lo line break avvakunda typing kosam */
        animation: typing-main 4s steps(30, end) infinite alternate;
        margin: 0 auto; /* Center alignment */
    }

    .code-stack {
        flex-direction: column; /* One by one vertical alignment */
        align-items: flex-end; /* Bar chivaraki (Right side) vachhela */
        width: 100%;
        margin-top: 15px;
    }

    .modern-code-card {
        width: 180px; /* Mobile lo box width fix */
        justify-content: flex-start;
    }
}


/*IMP  coursess catlog for colr */

/* Section Height & Gap Adjustments */

/* Section Spacing */
#courses {
    padding-top: 60px !important;
    padding-bottom: 80px !important;
}

/* Header Styles */
.fw-black { font-weight: 900 !important; }
.premium-gradient-text {
    background: linear-gradient(to right, #1b5e20, #0052d4);
    
    /* 1. స్టాండర్డ్ ప్రాపర్టీ (వార్నింగ్ ఉండదు) */
    background-clip: text; 
    
    /* 2. వెండర్ ప్రెఫిక్స్ (Chrome/Safari కోసం - వార్నింగ్ ఉన్నా ఇది అవసరం) */
    -webkit-background-clip: text; 
    
    /* టెక్స్ట్ కలర్ ట్రాన్స్‌పరెన్సీ కోసం */
    -webkit-text-fill-color: transparent; 
}
.title-bar-wrapper { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; }
.bar-main { width: 60px; height: 4px; background: #1b5e20; border-radius: 10px; }
.bar-dot { width: 6px; height: 6px; background: #FF8C00; border-radius: 50%; }

/* Card Styling */
.course-premium-card {
    background: #ffffff;
    border-radius: 25px !important;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.course-premium-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}

.course-img-wrapper { height: 180px; overflow: hidden; }
.course-title-main { color: #001e3c; font-weight: 800; font-size: 1.2rem; }

/* View Details Button (Green Outline) */
.btn-expand-details {
    background: transparent;
    border: 2px solid #1b5e20;
    color: #1b5e20;
    padding: 10px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 0.85rem;
    transition: 0.3s;
}

.btn-expand-details:hover {
    background: #1b5e20;
    color: #fff;
}

/* Expanded Box & Purple Button */
.details-inner-box {
    background: #fdfbff; /* Very light purple tint */
    border-radius: 18px;
    border: 1px dashed #d1c4e9;
}

.btn-view-full {
    background: #5e17eb; /* Purple Shade */
    color: #ffffff !important;
    padding: 12px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: 0.3s;
}

.btn-view-full:hover {
    background: #4a12ba;
    box-shadow: 0 8px 20px rgba(94, 23, 235, 0.25);
    transform: scale(1.02);
}

.collapse { transition: all 0.4s ease-in-out; }

/* --- మీ పాత కోడ్ డిస్టర్బ్ అవ్వకుండా ఉండే అదనపు స్టైల్స్ --- */

/* 1. కార్డు పైన మరియు కింద స్టైలిష్ గ్రాడియంట్ లైన్స్ */
.course-premium-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #1b5e20, #FF8C00, #0052d4);
    z-index: 5;
}

/* 2. కార్డు కింద ఒక సన్నని గ్లో లైన్ (హోవర్ చేసినప్పుడు కనిపిస్తుంది) */
.course-premium-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: hsl(22, 96%, 50%);
    transition: all 0.4s ease;
    transform: translateX(-50%);
    z-index: 5;
}

.course-premium-card:hover::after {
    width: 80%; /* హోవర్ చేసినప్పుడు కింద లైన్ వస్తుంది */
}

/* 3. ఇమేజ్ కి చుట్టూ ఒక సన్నని బోర్డర్ మరియు షాడో */
.course-img-wrapper {
    position: relative;
    border-bottom: 2px solid rgba(27, 94, 32, 0.1);
}

/* 4. కార్డు బోర్డర్ కలర్ హోవర్ చేసినప్పుడు మారడానికి */
.course-premium-card:hover {
    border: 1px solid rgba(27, 94, 32, 0.4) !important;
    box-shadow: 0 15px 35px rgba(27, 94, 32, 0.12) !important;
}

/* 5. కార్డు లోపల సాఫ్ట్ బ్యాక్ గ్రౌండ్ ఎఫెక్ట్ */
.course-premium-card .card-body {
    background: linear-gradient(180deg, #ffffff 0%, #f9f9ff 100%);
}

/* 6. కోర్సు టైటిల్ కింద ఒక చిన్న డెకరేటివ్ లైన్ */
.course-title-main {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
}

.course-title-main::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #FF8C00;
    border-radius: 2px;
    transition: 0.3s;
}

.course-premium-card:hover .course-title-main::after {
    width: 60px; /* హోవర్ చేసినప్పుడు టైటిల్ కింద లైన్ పెరుగుతుంది */
}


/* --- 1. Header & Title Styles galleryyy imp --- */
.gallery-header-box { position: relative; }
.badge-text { font-size: 0.7rem; font-weight: 800; color: #1b5e20; letter-spacing: 2px; }
.mini-line { display: inline-block; width: 25px; height: 3px; background: #FF8C00; margin-right: 5px; border-radius: 5px; }

.gallery-main-title { font-size: 2.2rem; font-weight: 900; color: #001e3c; margin: 0; line-height: 1.2; }
.gradient-text-alt { 
    background: linear-gradient(to right, #1b5e20, #0052d4); 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent; 
}
.title-underline-glow { width: 60px; height: 4px; background: #FF8C00; margin-top: 10px; border-radius: 10px; box-shadow: 0 0 10px rgba(255, 140, 0, 0.4); }

/* --- 2. Swiper & Cards --- */
.gallerySwiper { padding-bottom: 50px !important; }

.modern-gallery-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
}

.img-wrapper { height: 200px; position: relative; overflow: hidden; }
.img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.modern-gallery-card:hover img { transform: scale(1.1); }

/* Category Glass Badge */
.category-tag-glass {
    position: absolute; bottom: 10px; left: 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    color: #fff; border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 3px 12px; border-radius: 30px; font-size: 0.65rem; font-weight: 700;
}

/* --- 3. Content Details --- */
.topic-dot { width: 8px; height: 8px; background: #FF8C00; border-radius: 50%; display: inline-block; margin-right: 8px; }
.topic-name { font-size: 0.7rem; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 1px; }
.gallery-item-title { color: #001e3c; font-weight: 700; font-size: 0.95rem; }

/* --- 4. View All Button --- */
.premium-view-all-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 22px; background: #001e3c; color: #fff !important;
    border-radius: 50px; font-size: 0.85rem; font-weight: 700; text-decoration: none;
    transition: 0.3s; box-shadow: 0 5px 15px rgba(0, 30, 60, 0.2);
}
.premium-view-all-btn:hover { background: #1b5e20; transform: translateY(-3px); }

/* Pagination Fix */
.swiper-pagination-bullet-active { background: #1b5e20 !important; width: 25px !important; border-radius: 10px !important; }

 /* notifications */

    /* Premium Ticker Styles */
    .news-ticker-wrapper {
        width: 100%;
        padding: 0;
        margin: 0;
        background: #001e3c;
    }
    .news-ticker-container {
        background: #001e3c;
        border-bottom: 3px solid #ffc107;
        height: 55px;
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;
    }
    .ticker-label {
        background: linear-gradient(45deg, #d32f2f, #f44336);
        color: white;
        padding: 0 30px 0 20px;
        height: 100%;
        display: flex;
        align-items: center;
        font-weight: 800;
        font-size: 0.85rem;
        z-index: 15;
        position: relative;
        clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
        white-space: nowrap;
    }
    .ticker-scroll-area {
        flex-grow: 1;
        overflow: hidden;
        display: flex;
        align-items: center;
    }
    .ticker-content {
        display: inline-block;
        white-space: nowrap;
        animation: ticker-swipe 40s linear infinite;
    }
    .ticker-content:hover {
        animation-play-state: paused;
    }
    .update-item {
        display: inline-flex;
        align-items: center;
        margin-right: 60px;
        color: #ffffff;
        text-decoration: none;
        font-weight: 600;
        font-size: 0.95rem;
        transition: 0.3s;
    }
    .update-item:hover {
        color: #ffc107 !important;
    }
    .category-pill {
        background: rgba(255, 193, 7, 0.2);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.5);
        padding: 2px 12px;
        border-radius: 4px;
        font-size: 0.7rem;
        margin-right: 12px;
        text-transform: uppercase;
        font-weight: 700;
    }
    .ticker-view-all {
        z-index: 15;
        background: #001e3c;
        padding: 0 15px;
        height: 100%;
        display: flex;
        align-items: center;
        box-shadow: -10px 0 20px rgba(0,0,0,0.3);
    }
    .btn-view-all {
        background: #ffc107;
        color: #001e3c;
        font-weight: 700;
        font-size: 0.75rem;
        border-radius: 50px;
        padding: 6px 15px;
        text-decoration: none;
        transition: 0.3s;
        border: 2px solid #ffc107;
    }
    .btn-view-all:hover {
        background: transparent;
        color: #ffc107;
    }
    @keyframes ticker-swipe {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }


/* marquee scrolloing code in home */
    /* స్క్రోలింగ్ బార్ కంటైనర్ */
   /* స్క్రోలింగ్ బార్ కంటైనర్ */
    .info-scroller {
        background: linear-gradient(90deg, #002147, #dc3545); /* Navy to Red Gradient */
        color: white;
        padding: 12px 0;
        font-weight: 600;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        z-index: 10;
        border-top: 1px solid rgba(255,255,255,0.1);
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    /* స్క్రోలింగ్ కంటెంట్ - స్పీడ్ తగ్గించాను (35s) */
    .scrolling-content {
        display: inline-block;
        animation: scroll-left 35s linear infinite; /* వేగం తగ్గించి 35 సెకన్లు పెట్టాను */
        font-size: 0.9rem;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }

    /* ప్రతి ఐటెమ్ స్టైల్ */
    .info-item {
        display: inline-flex;
        align-items: center;
        margin-right: 60px; /* ఐటెమ్స్ మధ్య గ్యాప్ */
    }

    /* ఐకాన్స్ కోసం గోల్డ్ కలర్ */
    .info-item i {
        margin-right: 12px;
        color: #ffc107; 
        font-size: 1.1rem;
    }

    /* యానిమేషన్ */
    @keyframes scroll-left {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); } /* కంటిన్యూస్ లూప్ కోసం */
    }

    /* మౌస్ పెట్టినప్పుడు ఆగుతుంది */
    .info-scroller:hover .scrolling-content {
        animation-play-state: paused;
    }

/* belo slide and college code */

    /* Container Layout */
.modern-abstract-grid {
    position: relative;
    width: 100%;
    height: 480px; /* ఇమేజ్‌లన్నీ ఈ హైట్ లోనే ఫిట్ అవుతాయి */
    margin-top: 20px;
}

/* Base style for frames */
.abs-item {
    position: absolute;
    overflow: hidden;
    border: 6px solid #ffffff;
    transition: all 0.4s ease;
}

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

/* మెయిన్ ఇమేజ్ - మధ్యలో ఉంటుంది */
.main-frame {
    width: 70%;
    height: 350px;
    top: 50px;
    left: 50px;
    z-index: 2;
    border-radius: 80px 20px 80px 20px; /* Stylish shape */
}

/* పైన చిన్న ఇమేజ్ */
.top-frame {
    width: 45%;
    height: 180px;
    top: 0;
    right: 0;
    z-index: 3;
    border-radius: 20px 50px 20px 20px;
}

/* కింద ఉండే ఇమేజ్ */
.bottom-frame {
    width: 50%;
    height: 200px;
    bottom: 0;
    left: 0;
    z-index: 4;
    border-radius: 20px 20px 20px 50px;
}

/* ఎక్స్‌పీరియన్స్ స్టిక్కర్ */
.exp-sticker {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ff6600; /* కాలేజీ థీమ్ ఆరెంజ్ */
    color: white;
    padding: 10px;
    border-radius: 20px 0 0 0;
}

.s-count { display: block; font-size: 1.2rem; font-weight: 900; line-height: 1; }
.s-label { font-size: 0.5rem; font-weight: bold; }

/* వెనకాల ఉండే డెకరేటివ్ బోర్డర్ */
.abstract-border-box {
    position: absolute;
    width: 70%;
    height: 350px;
    border: 2px solid #1b5e2022;
    top: 20px;
    left: 20px;
    border-radius: 80px 20px 80px 20px;
    z-index: 1;
}

/* Hover Animation */
.abs-item:hover {
    z-index: 10;
    transform: scale(1.05);
}
/* --- Right Side: Slim Feature Badges --- */
.feature-vertical-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.f-badge {
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 4px solid #ddd;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.f-badge:hover {
    transform: translateX(8px);
    background: #fdfdfd;
}

.f-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.f-info strong {
    display: block;
    font-size: 0.8rem;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 2px;
    letter-spacing: 0.5px;
}

.f-info span {
    font-size: 0.55rem;
    color: #777;
    font-weight: 700;
    text-transform: uppercase;
}

/* Color Branding for Badges */
.exp-style { border-left-color: #1b5e20; }
.exp-style .f-icon { background: linear-gradient(45deg, #1b5e20, #2e7d32); }

.placement-style { border-left-color: #007bff; }
.placement-style .f-icon { background: linear-gradient(45deg, #007bff, #0056b3); }

.ncc-style { border-left-color: #002147; }
.ncc-style .f-icon { background: linear-gradient(45deg, #002147, #003366); }

.task-style { border-left-color: #ff6600; }
.task-style .f-icon { background: linear-gradient(45deg, #ff6600, #e65c00); }

/* Responsive adjustments */
@media (max-width: 991px) {
    .stylish-image-stack { height: 350px; margin-bottom: 20px; }
    .feature-vertical-stack { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .f-badge { width: calc(50% - 12px); }
}