/* President Page Styles */
.president-page {
    background: white;
}

.president-hero {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0f8ff 100%);
    color: #2d5016;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.president-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/president-journey.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: 1;
}

.hero-overlay {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.sanskrit-quote {
    text-align: center;
    margin-bottom: 3rem;
    padding: 2rem;
    background: rgba(255,255,255,0.1);
    border-radius: 0;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

.sanskrit-quote p {
    font-size: 1.8rem;
    font-family: 'Noto Sans Devanagari', 'Mangal', 'Kokila', 'Playfair Display', serif;
    font-style: italic;
    color: #ff6b9d;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    margin: 0;
}

.president-intro {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4rem;
    align-items: center;
}

.president-intro img {
    width: 300px;
    height: 350px;
    object-fit: cover;
    border: 8px solid #ffffff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.president-details h1 {
    font-size: 2.8rem;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    color: #2d5016;
}

.president-details p {
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 0.5rem;
    opacity: 0.95;
}

.journey-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, #f0fff0 0%, #f8f8ff 100%);
}

.journey-section h2 {
    text-align: center;
    font-size: 3rem;
    color: #4a7c59;
    margin-bottom: 4rem;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.journey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    margin-bottom: 4rem;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.journey-image img {
    width: 100%;
    height: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.milestone {
    background: white;
    padding: 2.5rem;
    margin-bottom: 2rem;
    border-left: 6px solid #1e3c72;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.milestone:hover {
    transform: translateX(10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.milestone.highlight {
    background: linear-gradient(135deg, #1e3c72, #2a5298);
    color: white;
    border-left-color: #ff69b4;
}

.milestone h3 {
    font-size: 1.5rem;
    color: #1e3c72;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

.milestone.highlight h3 {
    color: #ff69b4;
}

.milestone p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 1rem;
    text-align: justify;
}

.milestone.highlight p {
    color: rgba(255,255,255,0.95);
}

.sanskrit-closing {
    text-align: center;
    padding: 3rem;
    background: rgba(30,60,114,0.05);
    border-radius: 0;
    border: 2px solid #1e3c72;
    max-width: 1200px;
    margin: 0 auto;
}

.sanskrit-closing p {
    font-size: 1.5rem;
    font-family: 'Noto Sans Devanagari', 'Mangal', 'Kokila', 'Playfair Display', serif;
    color: #4a7c59;
    margin-bottom: 1rem;
    font-style: italic;
}

.sanskrit-closing span {
    font-size: 1rem;
    color: #666;
    font-style: italic;
}

.president-story {
    background: white;
    padding: 4rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    border-radius: 0;
    border: 1px solid rgba(0,0,0,0.05);
    max-width: 1200px;
    margin: 0 auto;
}

.story-image {
    position: sticky;
    top: 2rem;
}

.story-image img {
    width: 100%;
    height: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border: 8px solid #ffffff;
}

.story-content {
    font-family: 'Inter', sans-serif;
    line-height: 1.8;
    color: #444;
}

.story-content p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    text-align: justify;
    text-indent: 0;
    position: relative;
}

.story-content p:first-child::first-letter {
    font-size: 4rem;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    color: #1e3c72;
    float: left;
    line-height: 3rem;
    margin: 0.5rem 0.5rem 0 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.highlight-quote {
    background: linear-gradient(135deg, rgba(255,107,157,0.1), rgba(135,206,235,0.1));
    padding: 2rem !important;
    border-left: 6px solid #ff6b9d !important;
    font-style: italic !important;
    font-size: 1.3rem !important;
    color: #4a7c59 !important;
    text-align: center !important;
    text-indent: 0 !important;
    font-family: 'Playfair Display', serif !important;
    font-weight: 600 !important;
    margin: 3rem 0 !important;
    box-shadow: 0 10px 30px rgba(255,107,157,0.1);
}

.founding-date {
    background: linear-gradient(135deg, #87ceeb, #98fb98);
    color: #2d5016 !important;
    padding: 2rem !important;
    text-align: center !important;
    font-size: 1.4rem !important;
    font-family: 'Playfair Display', serif !important;
    text-indent: 0 !important;
    margin: 3rem 0 0 0 !important;
    box-shadow: 0 15px 40px rgba(135,206,235,0.2);
}

.journey-hero-image {
    text-align: center;
    margin: 3rem 0;
}

.journey-hero-image img {
    width: 100%;
    max-width: 800px;
    height: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border: 8px solid #ffffff;
}

@media (max-width: 768px) {
    .president-intro {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .president-intro img {
        width: 250px;
        height: 300px;
        margin: 0 auto;
    }
    
    .president-details h1 {
        font-size: 2rem;
    }
    
    .journey-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .journey-section h2 {
        font-size: 2rem;
    }
    
    .milestone {
        padding: 2rem;
    }
    
    .president-story {
        padding: 2rem;
    }
    
    .story-image {
        position: static;
    }
    
    .story-content p {
        font-size: 1rem;
        text-indent: 1rem;
    }
    
    .story-content p:first-child::first-letter {
        font-size: 3rem;
        line-height: 2.5rem;
    }
    
    .highlight-quote {
        font-size: 1.1rem !important;
        padding: 1.5rem !important;
    }
    
    .founding-date {
        font-size: 1.2rem !important;
        padding: 1.5rem !important;
    }
}