@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Outfit:wght@300;400;500;600&family=Suravaram&display=swap');

/* Scrolling Marquee */
.scrolling-bar {
    width: 100%;
    background-color: var(--primary-maroon);
    color: var(--cream);
    overflow: hidden;
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    line-height: 35px;
    height: 35px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.scrolling-text {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 75s linear infinite;
    font-family: 'Arial', sans-serif;
    /* Support Telugu */
    word-spacing: 5px;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* Push body down so content isn't hidden behind fixed bar */
body {
    padding-top: 35px;
}

@media print {
    .scrolling-bar {
        display: none !important;
    }

    body {
        padding-top: 0 !important;
    }
}

:root {
    --primary-maroon: #800000;
    --primary-gold: #C5A059;
    --gold-light: #E5C585;
    --cream: #FFFDD0;
    --light-bg: #F9F9F5;
    --white: #ffffff;
    --text-dark: #333333;
    --text-muted: #666666;
    --transition: all 0.3s ease;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --border-radius: 8px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--light-bg);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Cinzel', serif;
    color: var(--primary-maroon);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.t-center {
    text-align: center;
}

.section-p {
    padding: 4rem 0;
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    border: none;
    transition: var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-gold), #B8860B);
    color: var(--primary-maroon);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ECC358, #D4AF37);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(197, 160, 89, 0.3);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--primary-gold);
    color: var(--primary-gold);
}

.btn-secondary:hover {
    background-color: var(--primary-gold);
    color: var(--primary-maroon);
}

.btn-maroon {
    background-color: var(--primary-maroon);
    color: var(--white);
}

.btn-maroon:hover {
    background-color: #600000;
    box-shadow: 0 5px 15px rgba(128, 0, 0, 0.3);
}

/* Header */
.header {
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 35px;
    /* Push down by height of scrolling bar */
    z-index: 1000;
    padding: 0.8rem 0;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 50px;
}

.logo-text {
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    color: var(--primary-maroon);
    line-height: 1.2;
}

.logo-text span {
    display: block;
    font-size: 0.8rem;
    color: var(--primary-gold);
    letter-spacing: 1px;
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    font-weight: 500;
    color: var(--text-dark);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-maroon);
}

.menu-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--primary-maroon);
    cursor: pointer;
}

/* Hero Section */
.hero {
    position: relative;
    /* Height matches image automatically */
    display: block;
    overflow: hidden;
}

.hero-bg {
    width: 100%;
    height: auto;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
    z-index: 1;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: left;
    color: var(--white);
    max-width: 1200px;
    width: 100%;
    padding: 0 20px;
}

/* Gold Shine Animation */
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin-bottom: 1rem;
    line-height: 1.1;
    text-align: left;
}

#hero-title-text {
    background: linear-gradient(90deg, #C5A059 0%, #F9F295 50%, #C5A059 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--primary-gold);
    /* Fallback */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
    animation: shine 3s linear infinite;
    display: inline-block;
}

.telugu-title {
    display: block;
    font-family: 'Suravaram', serif;
    font-size: 0.9em;
    margin-top: 15px;
    letter-spacing: 2px;
    line-height: 1.4;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    animation: none;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    color: var(--cream);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    max-width: 100%;
}

/* Search Widget */
.search-widget {
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: var(--border-radius);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    justify-content: center;
}

.form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 150px;
    flex: 1;
}

.form-group label {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 5px;
    font-weight: 500;
}

.form-control {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    outline: none;
}

.form-control:focus {
    border-color: var(--primary-maroon);
}

.search-overlap-container {
    margin-top: 0;
    position: relative;
    z-index: 10;
    background-color: var(--primary-maroon);
    padding: 30px 0;
}

@media (max-width: 768px) {
    .search-overlap-container {
        margin-top: 0;
        padding: 20px 0;
        background: var(--light-bg);
    }
}

/* Section Titles */
.section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.section-title p {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Featured Profiles */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

@media (min-width: 992px) {
    .profile-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.profile-card {
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid #eee;
    position: relative;
}

.profile-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-gold);
}

.verified-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-gold);
    color: var(--primary-maroon);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}

.profile-img {
    width: 100%;
    height: auto;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: center;
    background-color: #f0f0f0;
    border-bottom: 1px solid #eee;
}

/* Dynamic Grid Column Classes & Text Scaling */
.profile-grid {
    --card-title-size: 1.4rem;
    --card-text-size: 0.95rem;
    --card-padding: 20px;
}

.profile-grid.cols-1 {
    grid-template-columns: 1fr;
    --card-title-size: 1.6rem;
    --card-text-size: 1.1rem;
    --card-padding: 25px;
}

.profile-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
    --card-title-size: 1.5rem;
    --card-text-size: 1rem;
    --card-padding: 20px;
}

.profile-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
    --card-title-size: 1.3rem;
    --card-text-size: 0.9rem;
    --card-padding: 15px;
}

.profile-grid.cols-4 {
    grid-template-columns: repeat(4, 1fr);
    --card-title-size: 1.1rem;
    --card-text-size: 0.8rem;
    --card-padding: 12px;
}

.profile-grid.cols-5 {
    grid-template-columns: repeat(5, 1fr);
    --card-title-size: 0.9rem;
    --card-text-size: 0.75rem;
    --card-padding: 10px;
}

.profile-grid.cols-6 {
    grid-template-columns: repeat(6, 1fr);
    --card-title-size: 0.8rem;
    --card-text-size: 0.7rem;
    --card-padding: 8px;
}


/* Responsive text scaling for cards based on container width would rely on container queries, 
   but for broad support we assume the column count reduces card width and naturally text wraps.
   However, user asked for text sizes to adjust proportionally. 
   We can use clamp or simple relative units if the base font size is responsive.
*/

.profile-info {
    padding: var(--card-padding);
    text-align: center;
}

.profile-info h3 {
    margin-bottom: 5px;
    font-size: var(--card-title-size);
}

.profile-details {
    color: var(--text-muted);
    font-size: var(--card-text-size);
    margin-bottom: 15px;
}

.profile-details span {
    display: block;
    margin-bottom: 2px;
}

/* Categories */
.category-section {
    background-color: var(--primary-maroon);
    color: var(--white);
    background-image: linear-gradient(rgba(128, 0, 0, 0.9), rgba(128, 0, 0, 0.95)), url('hero_banner.png');
    background-size: cover;
    background-attachment: fixed;
}

.category-title h2 {
    color: var(--primary-gold);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.category-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: var(--transition);
}

.category-card:hover {
    background: var(--primary-gold);
    color: var(--primary-maroon);
    transform: scale(1.05);
}

.category-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

/* Footer */
footer {
    background-color: #1a1a1a;
    color: #aeaeae;
    padding-top: 4rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    padding-bottom: 3rem;
    border-bottom: 1px solid #333;
}

.footer-col h4 {
    color: var(--white);
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

.footer-links li {
    margin-bottom: 10px;
    overflow-wrap: break-word;
    /* Standard */
    word-wrap: break-word;
    /* IE/Legacy */
    word-break: break-word;
    /* Non-standard but helpful */
}

.footer-links a:hover {
    color: var(--primary-gold);
}

.copyright {
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 8vw;
    }

    .telugu-title {
        font-size: 3.5vw;
    }

    .hero-subtitle {
        font-size: 4vw;
    }

    .menu-toggle {
        display: block;
    }



    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--white);
        flex-direction: column;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transform: translateY(-150%);
        transition: var(--transition);
        z-index: 999;
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .search-widget {
        flex-direction: column;
    }

    .form-group {
        width: 100%;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    /* Mobile Profile Adjustments - Proportional Scaling */
    /* Mobile Profile Adjustments - Proportional Scaling */
    .profile-grid {
        /* Scale text based on screen width */
        --card-title-size: 4.5vw;
        --card-text-size: 3.2vw;
        --card-padding: 1.5vw;
        /* Very tight padding */
    }

    /* Reduce vertical spacing in mobile cards */
    .profile-info h3 {
        margin-bottom: 0.5vw !important;
    }

    .profile-details {
        margin-bottom: 1.5vw !important;
    }

    .profile-details span {
        margin-bottom: 0.2vw !important;
        line-height: 1.1;
    }

    /* Compact Buttons on Mobile */
    .view-profile-btn,
    .action-btn,
    .btn {
        padding: 1.5vw 3vw !important;
        font-size: 3.5vw !important;
        border-width: 1px !important;
        margin-top: 0 !important;
    }

    .action-btn-row {
        margin-top: 1vw !important;
    }

    /* Ensure image respects aspect ratio but fits naturally */
    .profile-img {
        height: auto;
        /* aspect-ratio is inherited from global styles */
    }

    .hero-bottom-badge {
        width: 30vw;
        /* Scale badge proportionally */
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
    }

    /* Adjust specific elements if needed without fixed pixels */
    .profile-card {
        margin-bottom: 20px;
    }
}

.hero-bottom-badge {
    position: absolute;
    bottom: 10%;
    left: calc(50% - 400px);
    width: 160px;
    z-index: 5;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
    transition: var(--transition);
}

@media (max-width: 1200px) {
    .hero-bottom-badge {
        left: 100px;
    }
}

@media (max-width: 768px) {
    .hero-bottom-badge {
        left: 50%;
        transform: translateX(-50%);
    }
}

.hero-bottom-badge:hover {
    transform: scale(1.05);
}