/* =========================
   Base Reset & Typography
   ========================= */

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

html, body {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #ffffff;
}

/* Simple utility container for inner width */
.container {
    max-width: 960px;
    margin: 0 auto;
}

/* =========================
   Layout
   ========================= */

.main-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =========================
   Cards Layout
   ========================= */

/* Desktop default */
.cards-wrapper {
    display: flex;
    justify-content: center;
    gap: 32px;

    max-width: 960px;
    margin: 0 auto;
}

/* Force equal width */
.cards-wrapper .card {
    width: 300px;       /* exact same width for all */
    max-width: 300px;
    flex: none;         /* disable flex growth */
    flex-direction: space-evenly;
}

/* =========================
   Language toggle button
   ========================= */

.lang-btn {
    display: inline-flex;          /* shrink to content */
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;               /* never stretch */

    margin-top: 25px;
    border: 1px solid rgb(195, 195, 195);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;

    background: #ffffff00;
    /*color: #ffffff; */

    transition: transform 0.1s ease,
                box-shadow 0.2s ease,
                opacity 0.2s ease;
}

.lang-btn:hover {
    /* background: #ecc2c2; */
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* Position it in the top-right corner of the spiritual section */
.spiritual-section .lang-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}

/* =========================
   Spiritual Top Section
   ========================= */

.spiritual-section {
    position: relative;           /* anchor for absolute-positioned lang button */
    background: #faf5f5;
    /* background: #fceeee; */
    padding: 10px 0 10px;
    text-align: center;
}

.bismillah-block {
    margin-bottom: 15px;
}

.bismillah-ar {
    font-size: 1.8rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
    color: #5a2a2a;
    letter-spacing: 1px;
}

.bismillah {
    font-size: 0.95rem;
    text-align: center;
    color: #777;
    font-style: italic;
}

/* Verses */

.verses {
    position: relative;
    max-width: 800px;
    margin: 10px auto 50px;
    min-height: 25px;   /* prevents height jumping */
}

.verse {
    position: absolute;
    inset: 0;

    opacity: 0;
    transform: translateY(15px);

    transition: opacity 1s ease-in-out,
                transform 1s ease-in-out;
}

.verse.active {
    opacity: 1;
    transform: translateY(0);
}

.verse-text {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 6px;
    position: relative;
    padding-left: 0;
}

/* Subtle centered highlighter line ABOVE text */
.verse-text::before {
    content: "";
    display: block;
    width: 150px;
    height: 2px;
    background: rgba(200, 107, 107, 0.6);
    margin: 0 auto 12px auto;
}

.verse-ref {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
}

/* =========================
   Sections & Hero
   ========================= */

.hero {
    /*background: #F6EAEA;*/
    padding: 64px 48px 56px;
    text-align: center;
}

.hero-intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.hero-intro h2 {
    margin-bottom: 4px;
    font-size: 3.5rem;
}

/* Degrees and experience – same strength, clean alignment */
.doctor-degrees,
.doctor-position {
    font-size: 1rem;
    color: #5a2a2a;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.doctor-title {
    font-size: 1.3rem;
    color: #000000;
    font-weight: 700;
    margin-bottom: 10px;
}

.section {
    padding: 20px 20px;
    text-align: center;     /* center all section content */
    width: 100%;
}

/* Headings & text */

h2 {
    font-size: 1.9rem;
    /* margin-bottom: 16px; */
    font-weight: 700;
}

.section p {
    font-size: 1.4rem;
    max-width: 720px;
    margin: 0 auto;         /* center paragraphs inside sections */
}

/* Services list */

.services-list {
    list-style: disc;
    margin: 20px auto;

    padding-left: 0;
    list-style-position: inside;
    display: inline-block;  /* center the whole list */
    text-align: left;       /* but keep bullets/text nicely aligned */
}

.services-list li {
    margin-bottom: 6px;
    font-size:1.3rem;
}

/* =========================
   Contact / Timetable Section Enhancements
   ========================= */

.hours-block {
    margin-top: 20px;   /* keep as you had it */
}

/* underline under the subheading stays the same */
.hours-block h3 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    font-weight: 600;
}

.hours-block h3::after {
    content: "";
    display: block;
    width: 150px;
    height: 2px;
    background: #654141;
    margin: 6px auto 0;
    opacity: 0.7;
}

/* give the text more horizontal room inside a 500px card */
.hours-list {
    max-width: 460px;        /* was 400px */
    margin: 20px 0 0 0;       /* keep it centered, moderate gap */
}

/* same flex layout as your original, just bigger font */
.hours-row,
.hours-row-second {
    display: flex;
    justify-content: space-around;   /* same visual style as your "before" */
    margin-top:20px;
    padding: 0 0;
    font-size: 1.25rem;              /* bigger text */
}

/* prevent the Bengali strings from breaking mid-line */
.hours-row span,
.hours-row-second span {
    white-space: nowrap;
}

.hours-row-second {
    margin-top:10px;
    font-weight: 600;
    color: #5a2a2a;
}

/* Highlighted card: hours + note + phone */

.card {
    display: block;
    min-width: 500px;
    min-height: 300px;
    margin: 8px auto;   /* reduced vertical spacing */
    padding: 18px 22px 20px;
    background: #fceeee;
    border-radius: 16px;
    box-shadow: 12px 12px 22px rgba(0, 0, 0, 0.06);
    border-top: 3px solid #C86B6B;
    text-align: center;
    font-weight: 700;
}

/* Card pop animation */
.card-pop {
    animation: cardPop 1.8s ease;
}

@keyframes cardPop {
    0% {
        transform: scale(1);
        box-shadow: 12px 12px 22px rgba(0, 0, 0, 0.06);
    }
    40% {
        transform: scale(1.04);
        box-shadow: 0 18px 40px rgba(200, 107, 107, 0.25);
    }
    100% {
        transform: scale(1);
        box-shadow: 12px 12px 22px rgba(0, 0, 0, 0.06);
    }
}

.contact-note {
    margin-top: 16px;
}

.contact-block {
    margin-top: 20px;
    font-weight: 700;
    color: #000000;
}

/* phone line inside the card – highlight it */
.contact-phone {
    padding-top: 6%;
    font-size: 1.8rem !important;
    font-weight: 700;
    margin-top:10px;
    color: #5a2a2a;
}

/* =========================
   Footer
   ========================= */

.footer {
    background: transparent;
    color: #333;
    text-align: center;
    padding: 16px 24px;
    font-size: 0.85rem;
    /* border-top: 1px solid #eee; */
    margin-top: auto;
}

.section h2 {
    position: relative;
    display: inline-block;  /* so underline matches text width */
    padding-bottom: 8px;
}

.section h2::after {
    content: "";
    display: block;
    width: auto;                 /* short subtle line */
    height: 2px;
    background: #C86B6B;         /* soft red accent */
    margin: 6px auto 0;          /* center under text */
    opacity: 0.7;
}

/* =========================
   Responsive (Mobile / Tablet)
   ========================= */

@media (max-width: 868px) {

    /* No extra offset now that sidebar/sticky nav is gone */
    .main-content {
        padding-top: 0;
    }

    .verses {
        position: relative;
        max-width: 800px;
        margin: 10px auto 50px;
        min-height: 45px;   /* prevents height jumping */
    }

    .hero-intro h2 {
        font-size: 2.4rem;      /* slightly smaller on phones */
        line-height: 1.2;
        max-width: 14ch;        /* ~14 characters wide text box */
        margin: 0 auto 6px;     /* center the name */
    }

    /* Keep sections comfy on mobile */
    .hero,
    .section {
        padding: 20px 20px;
        scroll-margin-top: 130px;
    }

    /* Better padding for verse text and contact note */
    .verse-text,
    .contact-note {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* Slightly tuck the language button closer in on small screens */
    .spiritual-section .lang-btn {
        top: 12px;
        right: 12px;
        padding-inline: 12px;
        white-space: nowrap;
    }

    /* Hard reset for cards on mobile */
    .cards-wrapper {
        display: block;          /* no flex at all -> avoids flex overflow quirks */
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 16px;         /* nice breathing room on left/right */
        box-sizing: border-box;
    }

    .cards-wrapper .card {
        display: block;
        width: 100%;
        max-width: 100%;         /* absolutely no wider than viewport */
        margin: 0 0 16px 0;      /* stack with a small gap at the bottom */
        box-sizing: border-box;  /* include padding/border in width */
    }

    /* In case desktop styles used flex/min-width on cards */
    .cards-wrapper .card {
        flex: 0 1 auto;
        min-width: 0;
    }

    
       .hours-block {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
        box-sizing: border-box;
    }

    /* The list inside: vertical, centered */
    .hours-block .hours-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Each row: stacked & centered */
    .hours-block .hours-row,
    .hours-block .hours-row-second {
        display: flex !important;
        flex-direction: column !important;   /* day on one line, time on next */
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 4px;
        width: 100% !important;
        margin-top: 20px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        font-size: 1.2rem;                   /* tweak if you want bigger/smaller */
        font-weight: 500;
        box-sizing: border-box;
    }

    .hours-block .hours-row span,
    .hours-block .hours-row-second span {
        display: block;
        width: 100%;
        white-space: normal !important;
        word-break: break-word;
    }


    /* First line (day range) */
    .hours-block .hours-row span:first-child {
        font-weight: 600;          
        font-size: 1.2rem;         
        letter-spacing: 0.5px;     
    }
    

    /* Closed row styling */
    .hours-block .hours-row-second {
        color: #5a2a2a;
    }

    .hours-block .hours-row-second span:first-child {
        font-weight: 600;
    }

    .hours-block .hours-row-second span:last-child {
        font-weight: 600;
    }

    .contact-phone {
        padding-top: 8px;           
        margin-top: 8px;
        font-size: clamp(1.4rem, 4vw, 1.8rem) !important;        
        text-align: center;
    }
}