@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap');

:root { 
    --navy: #001e3c; 
    --orange: #FF8C00; 
    --gold: #ffc107; 
    --soft-bg: #f8fafc; 
}

body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #fff; color: #333; }

/* Global Section Spacing Fix */
section { padding: 50px 0 !important; overflow: hidden; }
.bg-navy { background-color: var(--navy); }
.text-navy { color: var(--navy); }
.text-orange { color: var(--orange); }
.fw-black { font-weight: 800; }
/* Navbar మరియు Slider మధ్య గ్యాప్ తొలగించడానికి */
.navbar {
    margin-bottom: 0 !important;
}



/* ఒకవేళ మీ Header ఫిక్స్‌డ్ అయితే (Fixed Top) */
body {
    padding-top: 0 !important;
}

/* Premium Gradient Text Fix */
.text-gradient {
    display: inline-block;
    background: linear-gradient(90deg, var(--navy) 0%, var(--orange) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
}

/* Hero Section */
.hero-parallax-section {  position: relative; }
.fixed-bg-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-attachment: fixed; background-size: cover; background-position: center;
    z-index: 1;
    margin-top: 0 !important;
    padding-top: 0 !important;
    height: 80vh !important; /* Screen height లో 80% మాత్రమే */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.hero-glass-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,30,60,0.85), transparent);
    z-index: 2;
}

/* Welcome & Vertical Notifications Layout */
.welcome-news-area { background: #fff; padding-top: 30px !important; }
.welcome-content { border-left: 6px solid var(--orange); padding-left: 30px; }

.notif-card-premium {
    background: #ffffff;
    border-radius: 24px;
    height: 450px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,30,60,0.15);
    border: none;
    overflow: hidden;
}

.notif-header {
    padding: 18px;
    border-radius: 20px 20px 0 0;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(45deg, var(--navy), #003366);
    color: white;
    padding: 20px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.notif-body { flex-grow: 1; overflow: hidden; position: relative; }
.notif-scroll-track {
    position: absolute; width: 100%;
    animation: scroll-vertical 25s linear infinite;
}
.notif-scroll-track:hover { animation-play-state: paused; }

.notif-link {
    display: block; padding: 15px 20px; border-bottom: 1px solid #f1f1f1;
    text-decoration: none; color: #444; transition: 0.3s;
}
.notif-link:hover { background: #fff9f2; color: var(--orange); }

@keyframes scroll-vertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* Course Cards */
.course-card-premium {
    background: white; border-radius: 20px; overflow: hidden;
    transition: 0.4s; border: 1px solid #eee; height: 100%;
}
.course-card-premium:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.card-img-wrap { height: 200px; overflow: hidden; position: relative; }


/* Enquiry Form */
.enquiry-gradient { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); }
.premium-input { padding: 12px; border-radius: 10px; border: 1px solid #ddd; margin-bottom: 15px; width: 100%; }


/* Welcome Title & Quotation */
.welcome-badge {
    color: var(--orange);
    letter-spacing: 3px;
    font-size: 0.8rem;
}

.quote-text {
    font-style: italic;
    color: #6c757d;
    border-left: 3px solid var(--gold);
    padding-left: 15px;
    margin: 20px 0;
    font-size: 1.1rem;
}

/* Feature Highlights */
.feature-pill {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid #f1f1f1;
    transition: 0.3s;
}
.feature-pill:hover {
    transform: translateY(-5px);
    border-color: var(--orange);
}

/* Premium Notification Table Look */


.notif-link {
    padding: 18px 20px;
    border-bottom: 1px solid #f8f9fa;
    transition: all 0.3s ease;
}

.notif-title-style {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #2d3436;
    line-height: 1.4;
}

.notif-date-badge {
    font-size: 0.75rem;
    background: #f1f2f6;
    padding: 2px 8px;
    border-radius: 4px;
    color: #576574;
}

/* Read More Button - Premium Hover Effect Fix */
.btn-navy-premium {
    background-color: var(--navy) !important;
    color: #ffffff !important; /* మొదట వైట్ టెక్స్ట్ */
    border: 2px solid var(--navy) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 700;
    letter-spacing: 1px;
}

.btn-navy-premium:hover {
    background-color: var(--orange) !important; /* మౌస్ పెట్టినప్పుడు ఆరెంజ్ వస్తుంది */
    border-color: var(--orange) !important;
    color: var(--navy) !important; /* టెక్స్ట్ నేవీ బ్లూ లోకి మారుతుంది (స్పష్టంగా కనిపిస్తుంది) */
    transform: translateY(-5px); /* కొంచెం పైకి లేస్తుంది */
    box-shadow: 0 10px 20px rgba(255, 140, 0, 0.3) !important; /* ఆరెంజ్ షాడో */
}

/* బటన్ లోపల ఉన్న ఐకాన్ కి కూడా కలర్ మారేలా.. */
.btn-navy-premium:hover i {
    color: var(--navy) !important;
}
.course-badge {
    position: absolute;
    top: 15px;
    right: 15px; /* దీన్ని రైట్ సైడ్ కి మార్చాను, లుక్ బాగుంటుంది */
    
    /* Background Color: నేవీ బ్లూ కి కొంచెం ట్రాన్స్‌పరెన్సీ ఇస్తే ప్రీమియం గా ఉంటుంది */
    background: rgba(0, 30, 60, 0.9); 
    
    /* Text Color: గోల్డ్ లేదా ఎల్లో కలర్ */
    color: #ffc107 !important; 
    
    padding: 5px 15px;
    border-radius: 50px; /* పిల్ షేప్ */
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid rgba(255, 193, 7, 0.3); /* లైట్ గోల్డ్ బోర్డర్ */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    backdrop-filter: blur(4px); /* గ్లాస్ ఎఫెక్ట్ */
    z-index: 5;
}
/* Hero Section Enhancements */
.hero-parallax-section { 
    height: 85vh; /* హైట్ కొంచెం పెంచాను */
    position: relative; 
    overflow: hidden;
}

.fixed-bg-img {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-size: cover; /* ఇమేజ్ మొత్తం ఆక్యుపై చేస్తుంది */
    background-position: center center; /* ఇమేజ్ మధ్యలోకి ఉంటుంది */
    background-repeat: no-repeat;
    transform: scale(1.1); /* చిన్న జూమ్ ఎఫెక్ట్ కోసం */
    transition: transform 6s ease; /* స్లైడ్ మారేటప్పుడు స్లోగా జూమ్ అవుతుంది */
}

/* ఆక్టివ్ స్లైడ్ వచ్చినప్పుడు జూమ్ అవుట్ ఎఫెక్ట్ */
.carousel-item.active .fixed-bg-img {
    transform: scale(1);
}

/* Stylish College Code Badge */
.college-codes-container {
    display: inline-flex;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    margin-bottom: 25px;
}

.code-item {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.code-label { color: var(--gold); margin-right: 5px; }
.code-value { color: #fff; }

.divider-line {
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 10px;
}

/* Hero Title Styling */
.hero-content-box h1 {
    font-size: 4rem;
    text-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* ABOVE SLIDER SCROLL TEXT  */
/* Navbar మరియు Slider మధ్య గ్యాప్ ఫిక్స్ */
header, .navbar {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Stylish Scrolling News Ticker */
.college-ticker-wrap {
    background: var(--navy); /* నేవీ బ్లూ బ్యాక్‌గ్రౌండ్ */
    color: white;
    padding: 10px 0;
    overflow: hidden;
    border-bottom: 2px solid var(--orange); /* కింద ఒక ఆరెంజ్ లైన్ */
    margin-bottom: 0 !important; /* కింది గ్యాప్ తొలగించబడింది */
    line-height: 1; /* లైన్ హైట్ తగ్గించాను */
}
.hero-parallax-section {
    margin-top: 0 !important; /* స్లైడర్ పైన గ్యాప్ తొలగించబడింది */
    padding-top: 0 !important;
}

/* --- Stylish Text Animation (Infinite Gold/White Shine) --- */
.college-name-shine {
    font-family: 'Cinzel', serif;
    font-size: 2.8rem; 
    font-weight: 800;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    color: white; 
    
    /* Gold & White Shine Gradient */
    background: linear-gradient(
        120deg, 
        rgba(255,255,255,0) 25%, 
        #ffd700 50%, 
        #ffffff 52%, 
        #ffd700 55%, 
        rgba(255,255,255,0) 75%
    );
    background-size: 200% auto;
    
    /* Text Clipping Properties */
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* అనిమేషన్ స్లోగా ఎప్పుడూ రావడానికి infinite వాడాను */
    animation: luxuryShine 8s linear infinite !important; 
}

@keyframes luxuryShine {
    0% { background-position: 150% center; }
    100% { background-position: -150% center; }
}


.ticker-content {
    display: inline-block;
    white-space: nowrap;
    /* padding-left: 100%;  టెక్స్ట్ బయట నుండి మొదలవ్వడానికి */
    animation: marquee-smooth 40s linear infinite; /* వేగం తగ్గించాను */
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 1rem;
    text-transform: uppercase;
    display: inline-block;
    padding: 10px 0; /* కేవలం పైకి కిందకి మాత్రమే ప్యాడింగ్ */
    margin: 0;
}

/* మౌస్ మీదకు వెళ్తే స్క్రోలింగ్ ఆగుతుంది (యూజర్ చదువుకోవడానికి వీలుగా) */
.college-ticker-wrap:hover .ticker-content {
    animation-play-state: paused;
    cursor: pointer;
}

@keyframes marquee-smooth {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* బానర్ హైట్ తగ్గించాను */
/* --- Banner Section (No Gap & Fixed Height) --- */
.college-banner {
    background: #001e3c !important; 
    padding: 15px 0 !important;   /* బ్యానర్ లాగా హైట్ తగ్గించాను */
    margin-top: -2px !important;   /* స్లైడర్‌కి అతుక్కునేలా గ్యాప్ తీసేశాను */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #ffc107;
    z-index: 10;
    border-top: 1px solid rgba(255, 215, 0, 0.3);
}

/* అనిమేషన్ స్లోగా వెళ్లే క్లాస్ */
.start-shine {
    -webkit-text-fill-color: transparent;
    animation: luxuryShine 10s linear 10; /* 5 seconds - very slow */
}

@keyframes luxuryShine {
    0% { background-position: 100% center; }
    100% { background-position: -100% center; }
}

/* Lighting Line */

/* --- The Moving Lighting Line (Infinite) --- */
.light-streak {
    position: absolute;
    bottom: -5px;
    left: -100%;
    width: 250px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, #ffffff, #ffd700, transparent);
    box-shadow: 0 0 15px #ffd700;
    border-radius: 50%;
    display: block !important; /* పక్కాగా కనిపించేలా */
    
    /* లైన్ మూమెంట్ ఎప్పుడూ వచ్చేలా */
    animation: moveLine 6s linear infinite !important;
}

@keyframes moveLine {
    0% { left: -50%; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 120%; opacity: 0; }
}

/* --- Mobile Responsive Fix --- */
@media (max-width: 768px) {
    .college-name-shine {
        font-size: 1.5rem !important;
    }
    .college-banner {
        padding: 10px 0 !important;
    }
}
.start-line {
    display: block;
    animation: moveLine 5s linear 5; /* 5 seconds - slow */
}

@keyframes moveLine {
    0% { left: -30%; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* slider below line code */
/* 1. స్లైడర్ సెక్షన్ గ్యాప్ ఫిక్స్ */
.hero-parallax-section {
    position: relative;
    height: 80vh !important; /* హైట్ ని అడ్జస్ట్ చేయండి */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 2. స్లైడర్ కింద స్టైలిష్ గోల్డ్ లైన్ */
.slider-bottom-divider {
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, transparent, #ffc107, #ffffff, #ffc107, transparent);
    box-shadow: 0px -5px 15px rgba(255, 193, 7, 0.8); /* పైకి గ్లో వస్తుంది */
    position: relative;
    z-index: 20;
    margin-top: -4px; /* స్లైడర్ కి అతుక్కునేలా */
}

/* 3. కాలేజీ బానర్ సెక్షన్ అడ్జస్ట్మెంట్ */
.college-banner {
    background: #001e3c !important;
    padding: 15px 0 !important; /* లోపల గ్యాప్ తగ్గించాను */
    margin-top: 0 !important;   /* పైన గ్యాప్ క్లోజ్ చేశాను */
    position: relative;
    z-index: 10;
    border-top: none !important;
}

/* 4. స్లైడర్ లోపల ఉన్న గ్లాస్ ఓవర్లే గ్యాప్ ఫిక్స్ */
.hero-glass-overlay {
    height: 100% !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}

/* bottom registration info realted */
.bg-light-soft { background-color: #fcfdfe; }
.admissions-badge {
    background: #ffc107;
    color: #001e3c;
    padding: 5px 15px;
    border-radius: 5px;
    font-weight: 800;
    font-size: 0.8rem;
    display: inline-block;
    margin-bottom: 20px;
}
.icon-box-sm {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.9rem;
}
.premium-input {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid #e1e8ef;
    border-radius: 10px;
    transition: all 0.3s;
    font-size: 0.95rem;
}
.premium-input:focus {
    border-color: #ffc107;
    outline: none;
    background: #fff;
    box-shadow: 0 0 10px rgba(255,193,7,0.1);
}
.error-msg { font-size: 0.75rem; display: block; margin-top: 2px; }

.motivation-box {
    border-left: 3px solid #ffc107;
    padding-left: 20px;
    margin-top: 20px;
}

.contact-footer span {
    font-size: 1.1rem;
    font-weight: 600;
}

.bg-navy {
    background: linear-gradient(135deg, #001e3c 0%, #000c1a 100%) !important;
}

.premium-input::placeholder {
    color: #a0aec0;
    font-size: 0.9rem;
}

/* gallery */
/* స్క్రోల్ అయ్యే మెయిన్ బాక్స్ */
.gallery-wrapper {
    display: flex !important;           /* ఇమేజెస్ పక్కపక్కనే రావడానికి */
    overflow-x: auto !important;       /* పక్కకు స్క్రోల్ అవ్వడానికి */
    gap: 20px;                         /* ఇమేజెస్ మధ్య దూరం */
    padding: 10px 5px 25px 5px;
    scroll-snap-type: x mandatory;     /* స్మూత్ స్క్రోలింగ్ కోసం */
    scrollbar-width: none;             /* Firefox లో స్క్రోల్ బార్ కనిపించకుండా */
    -ms-overflow-style: none;          /* IE/Edge లో */
}


/* స్క్రోల్ అయ్యే మెయిన్ బాక్స్ */
/* పాత కోడ్ తీసేసి ఇది ఒక్కటే పెట్టండి */
.gallery-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important; /* ఇమేజెస్ కిందకు పడిపోకుండా ఆపుతుంది */
    overflow-x: auto !important;  /* పక్కకు స్క్రోల్ అవ్వడానికి */
    overflow-y: hidden;
    gap: 20px;
    padding: 15px 0 30px 0;
    -webkit-overflow-scrolling: touch; /* మొబైల్ స్మూత్ స్క్రోల్ కోసం */
    scroll-snap-type: x mandatory;
    scrollbar-width: thin; /* ఒకవేళ స్క్రోల్ బార్ కావాలంటే */
}

/* Chrome/Safari లో స్క్రోల్ బార్ కనిపించకుండా ఉండాలంటే ఇది ఉంచండి */
.gallery-wrapper::-webkit-scrollbar {
    height: 6px; /* సన్నని స్క్రోల్ బార్ */
}
.gallery-wrapper::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.gallery-slide {
    flex: 0 0 300px !important; /* ఇమేజ్ వెడల్పు తగ్గకుండా చూస్తుంది */
    scroll-snap-align: start;
}

@media (max-width: 768px) {
    .gallery-slide {
        flex: 0 0 260px !important;
    }
}

/* మిగతా .gallery-card, .gallery-overlay మీ కోడ్ అలాగే ఉంచండి */
.gallery-card {
    position: relative;
    height: 220px;                     /* ఫోటో హైట్ */
    border-radius: 12px;
    overflow: hidden;
    background: #eee;
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;                 /* ఇమేజ్ సాగకుండా నీట్‌గా కనిపిస్తుంది */
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    height: 60%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

/* మెయిన్ కంటైనర్ */
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: 20px;
    padding: 20px 0;
}

/* ఇమేజెస్ గ్రూప్ */
.marquee-content {
    display: flex;
    flex-shrink: 0;
    gap: 20px;
    min-width: 100%;
    animation: scroll-marquee 30s linear infinite; /* 30s అంటే స్పీడ్, పెంచితే స్లో అవుతుంది */
}

/* ఒక్కొక్క ఇమేజ్ స్టైల్ */
.marquee-item {
    width: 300px;
    height: 200px;
    flex-shrink: 0;
}

.marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* మౌస్ మీదకు వెళ్తే ఆగడానికి (Optional) */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

/* Animation లాజిక్ */
@keyframes scroll-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - 20px));
    }
}

/* మొబైల్ కోసం అడ్జస్ట్మెంట్ */
@media (max-width: 768px) {
    .marquee-item {
        width: 220px;
        height: 150px;
    }
}

/* number count course etc */
.stats-bar-wrapper {
    background: #ffffff;
    padding: 25px 0; /* తక్కువ ఎత్తు కోసం */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.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); /* Navy background with transparency */
    color: #002147;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.3rem;
}

.stat-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #FF8C00; /* Orange color */
    margin: 0;
    line-height: 1;
}

.stat-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin: 0;
    text-transform: uppercase;
}

/* మొబైల్ కోసం సర్దుబాటు */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .stat-item:nth-child(2) {
        border-right: none;
    }
}