html,
body {
    overflow-x: hidden;
    width: 100%;
}

:root {
    /* --bg-peach: #f9cbac; */
    --text-dark-blue: #002B49;
    --accent-orange: #D35400;
    --yellow-highlight: #F1C40F;
    --card-bg: #FAE5D3;
    /* Lighter peach for cards */
    --footer-bg: #002B49;
    --text-color: #333;
}

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

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

@font-face {
    font-family: 'NeueMontreal';
    src: url('../neue-montreal/NeueMontreal-Bold.otf');
    font-weight: 700;
}

/* ... existing font faces ... */

/* Quote Section */
.quote-section {
    background-color: var(--text-dark-blue);
    /* border-bottom: 5px solid var(--accent-orange); */
    /* Just a guess, adds nice break */
}
.service-card p.small {
    font-weight: 500 !important;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('../neue-montreal/NeueMontreal-BoldItalic.otf');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('../neue-montreal/NeueMontreal-Italic.otf');
    font-style: italic;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('../neue-montreal/NeueMontreal-Light.otf');
    font-weight: 300;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('../neue-montreal/NeueMontreal-LightItalic.otf');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('../neue-montreal/NeueMontreal-Medium.otf');
    font-weight: 500;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('../neue-montreal/NeueMontreal-MediumItalic.otf');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('../neue-montreal/NeueMontreal-Regular.otf');
    font-weight: 400;
}

@font-face {
    font-family: 'NeueMontreal';
    src: url('../neue-montreal/NeueMontreal-RegularItalic.otf');
    font-weight: 400;
    font-style: italic;
}

body {
    background: url('../Rectangle\ 161.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-family: 'NeueMontreal', sans-serif;
    font-weight: 500;
    color: var(--text-color);
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'NeueMontreal', sans-serif;
    color: var(--text-dark-blue);
}

.font-maku {
    font-family: 'Maku', cursive;
}

.text-dark-blue {
    color: var(--text-dark-blue) !important;
}

/* Hero Section */
.hero-section {
    position: relative;
    padding-bottom: 50px;
}

.logo-placeholder i {
    color: #3498db !important;
    /* Light blue logomark */
}

/* Video Wrapper */
.video-wrapper {
    max-width: 850px;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    overflow: visible;
    /* Allow arrows to stick out */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.plyr--video {
    border-radius: 8px;
}


.helper-right .arrow-curve {
    right: 20px;
    transform: scaleX(-1) rotate(45deg);
}


.click-helper {
    background: transparent;
    box-shadow: none;
    top: -60px;
}

.helper-left {
    left: -40px;
    transform: none;
}

.helper-right {
    right: -40px;
    transform: none;
}

.arrow-curve {
    display: block;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    position: relative;
    top: 0;
    left: 0;
    transform: none !important;
}

/* Re-implementing arrows with a better SVG path in HTML if needed, but CSS cleanup here */


/* Quote Section */
.quote-section {
    background-color: var(--text-dark-blue);
    /* border-bottom: 5px solid var(--accent-orange); */
    /* Just a guess, adds nice break */
}



.sanskrit-text {
    font-family: "Tillana", system-ui;
    font-weight: 400;
    /* font-style: italic; */
}

/* Meaning Section */
.meaning-section {
    background-color: var(--bg-peach);
    color: var(--text-dark-blue);
}

/* About Section */
.about-section {
    background-color: var(--bg-peach);
}

.service-card {
    background-color: #FAD7A0;
    /* Slightly different peach/light orange */
    /* Or use a gradient or just transparent with border? Image shows plain cards matching bg visually but distinct block */
    background: rgba(255, 255, 255, 0.3);
    /* Glassy feel? */
    border-radius: 15px;
    overflow: hidden;
}

.service-card .card-body {
    padding: 20px 28px !important;
}

.card-title {
    color: #3498db !important;
    /* Blue */
}

.card-footer {
    cursor: pointer;
    transition: background 0.3s;
}

.card-footer:hover {
    background-color: #00406b !important;
}

.bg-dark-blue {
    background-color: var(--text-dark-blue) !important;
}

/* Footer Section */
.footer-section {
    background-color: var(--footer-bg);
    color: white;
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo i {
    color: #3498db !important;
}

/* Landing Page Specific */
.landing-page {
    /* Ensure background image covers */
    min-height: 100vh;
}

.calendar-card {
    background: #FFF8E7;
    /* Light creamy background from image */
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.calendar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.card-image-wrapper {
    background: #FFD1A9;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    position: relative;
    /* Maintain aspect ratio if needed, or just standard 1:1 */
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-image-wrapper img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.card-footer-custom {
    color: var(--text-dark-blue);
    font-family: 'NeueMontreal', sans-serif;
}

.month-name {
    font-size: 1rem;
}

.arrow-icon {
    font-size: 0.8rem;
    color: #999;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Marquee Section */
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 15px 0;
}

.marquee-content {
    display: inline-block;
    animation: marquee 25s linear infinite;
    /* Slowed down slightly for readability */
    padding-left: 100%;
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.highlight-text {
    color: #fff;
    /* User preferred white text without background, respecting that choice but ensuring size */
    font-size: 2.2rem !important;
    padding: 0 20px;
    display: inline-block;
    letter-spacing: 0.5px;
}

.card-footer-custom i {
    color: #000;
    font-size: 1rem;
    background-color: #fff;
    border-radius: 50%;
    padding: 8px 10px;
}

.logo-placeholder img {
    width: 115px;
    height: 120px;
}

/* Translation Text Enhancement */
.meaning-section p.lead {
    font-size: 1.25rem;
    line-height: 1.8;
    /* Improved line height for readability */
    letter-spacing: 0.3px;
    /* margin-top: 1rem; */
}

.meaning-section p.lead:first-child {
    margin-top: 1rem;
}

.service-card p.small {
    font-size: 12px !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

    /* Hero Section */
    .hero-section {
        padding-top: 0.4rem !important;
        padding-bottom: 1rem !important;
    }

    .hero-section h1.display-5 {
        font-size: 2rem;
        /* Smaller month title */
        margin-bottom: 1.5rem !important;
    }

    .logo-placeholder {
        margin-top: 6px;
    }

    /* Video wrapper padding */
    .video-wrapper {
        margin-top: 0;
        width: 95%;
        /* More width on mobile */
    }

    /* Marquee Text */
    .highlight-text {
        font-size: 1.1rem;
        /* Smaller Sanskrit text */
        padding: 0 10px;
    }

    /* Translation Text */
    .meaning-section p.lead {
        font-size: 1.1rem;
        line-height: 1.6;
        padding: 0 5px;
        /* Prevent edge touching */
    }

    .about-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* About Section */
    .about-section h1 {
        font-size: 2rem;
        margin-bottom: 2rem !important;
    }

    .logo-container img {
        width: 90px !important;
        height: auto !important;
    }

    /* General Padding */
    .meaning-section,
    .about-section {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

   

    .quote-section {
        padding-top: 0rem !important;
        padding-bottom: 0rem !important;
    }

    .highlight-text {
        font-size: 1.5rem !important;
    }

    .footer-logo {
        width: 80px;
    }

    .about-section {
        padding-bottom: 2rem !important;
    }
    .service-card img{
        height: auto;
        width: 100px;
    }
}