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

/* ================= BODY ================= */
body {
    font-family: Arial, sans-serif;
    color: #0f172a;

    background:
        linear-gradient(rgba(219,234,254,0.9), rgba(191,219,254,0.95)),
        url("salem/Salem.jpeg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    animation: fadeIn 0.8s ease-in;
}

/* ================= SIDEBAR ================= */

/* PNG LOGO */

.sidebar-logo {
    width: 120px;
    height: auto;

    object-fit: contain;
}

.sidebar {
    width: 220px;
    height: 100vh;

    position: fixed;
    top: 0;
    left: 0;

    padding: 20px;

    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(12px);

    border-right: 1px solid rgba(59,130,246,0.3);
}

.sidebar a {
    display: block;
    color: #1e3a8a;
    text-decoration: none;
    margin: 12px 0;
    padding: 8px;
    border-radius: 6px;
    transition: 0.3s;
}

.sidebar a:hover,
.sidebar a.active {
    background: rgba(59,130,246,0.2);
    color: #2563eb;
    padding-left: 15px;
}

.sidebar hr {
    border: 0;
    height: 1px;
    background: rgba(0,0,0,0.1);
    margin: 15px 0;
}

/* ================= SECTIONS ================= */
.section {
    min-height: 100vh;
    padding: 80px 40px;
    margin-left: 220px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}



/* CENTER */
.center {

    display: flex;
    flex-direction: column;

    align-items: center;
}

/* ONLY HERO CONTENT CENTERED */

.center .hero {

    text-align: center;
}
/* ================= HERO DASHBOARD ================= */

.hero {
    width: 85%;
    max-width: 1000px;

    padding: 80px 60px;

    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(15px);

    border-radius: 25px;

    text-align: center;

    box-shadow: 0 20px 50px rgba(37,99,235,0.25);

    animation: fadeUp 1s ease;
}

/* TITLE */
.hero-title {
    font-size: 52px;
    color: #2563eb;
    margin-bottom: 20px;

    animation: neonGlow 2s infinite alternate;
}

/* SUBTITLE */
.hero-subtitle {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* BUTTON */
.explore-btn {
    padding: 14px 30px;
    font-size: 16px;

    border: none;
    border-radius: 30px;

    background: #2563eb;
    color: white;

    cursor: pointer;
    transition: 0.3s;
}

/* BUTTON HOVER */
.explore-btn:hover {
    background: #1d4ed8;
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(37,99,235,0.4);
}

/* ANIMATION */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================================= */
/*              HORIZONTAL FLOATING STATUS BAR               */
/* ========================================================= */

.salem-status-bar {

    position: absolute;

    top: 28px;
    right: 40px;

    display: flex;
    align-items: center;

    gap: 20px;

    padding: 16px 26px;

    border-radius: 60px;

    background:
        rgba(255,255,255,0.72);

    backdrop-filter: blur(16px);

    border: 1px solid rgba(37,99,235,0.12);

    box-shadow:
        0 14px 40px rgba(37,99,235,0.12);

    z-index: 100;
}

/* LIVE */

.status-live {

    display: flex;
    align-items: center;

    gap: 8px;

    padding-right: 16px;

    border-right:
        1px solid rgba(37,99,235,0.12);

    font-size: 13px;
    font-weight: 700;

    color: #2563eb;

    letter-spacing: 1px;
}

/* LIVE DOT */

.live-dot {

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #2563eb;

    animation: pulseLive 1.5s infinite;
}

/* ITEMS */

.status-item {

    font-size: 16px;
    font-weight: 600;

    color: #1e3a8a;
}

/* DETAILS */

.status-details {

    padding-left: 16px;

    border-left:
        1px solid rgba(37,99,235,0.12);

    font-size: 14px;

    color: #475569;
}

/* ANIMATION */

@keyframes pulseLive {

    0% {

        transform: scale(1);

        opacity: 1;
    }

    50% {

        transform: scale(1.4);

        opacity: 0.4;
    }

    100% {

        transform: scale(1);

        opacity: 1;
    }
}

/* RESPONSIVE */

@media (max-width: 1000px) {

    .salem-status-bar {

        position: relative;

        width: fit-content;

        margin: auto;
        margin-bottom: 30px;

        right: auto;
        top: auto;

        flex-wrap: wrap;

        border-radius: 28px;
    }
}

/* ================= ABOUT SECTION ================= */
.about-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;

    max-width: 1000px;
    margin: 30px auto;
}

.about-card {
    background: rgba(255,255,255,0.9);
    padding: 25px;
    border-radius: 15px;

    box-shadow: 0 10px 25px rgba(59,130,246,0.2);
    transition: 0.3s;
}

.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(37,99,235,0.3);
}

.about-card h2 {
    color: #2563eb;
    margin-bottom: 15px;
}

.about-card p,
.about-card li {
    line-height: 1.6;
    margin-bottom: 8px;
}

.about-card ul {
    padding-left: 18px;
}

/* CENTER LAST CARD */
.about-container .about-card:last-child {
    grid-column: span 2;
    max-width: 450px;
    justify-self: center;
}

/* ================= PLACES SECTION ================= */
.places-card {
    background: rgba(255,255,255,0.9);
    padding: 30px;
    border-radius: 15px;

    box-shadow: 0 10px 30px rgba(59,130,246,0.2);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;

    margin-top: 20px;
}

.place-item {
    text-decoration: none;
    text-align: center;
}

.place-item img {
    width: 100%;
    height: 160px;
    object-fit: cover;

    border-radius: 10px;
    transition: 0.3s;
}

.place-item:hover img {
    transform: scale(1.05);
}

.place-item p {
    margin-top: 8px;
    font-weight: bold;
    color: #1e3a8a;
}

/* IMAGE CONTAINER */
.img-box {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* IMAGE */
.img-box img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    transition: 0.4s ease;
}

/* OVERLAY */
.overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 10px;

    background: linear-gradient(
        to top,
        rgba(0,0,0,0.6),
        rgba(0,0,0,0)
    );

    opacity: 0;
    transition: 0.3s;
}

/* TEXT */
.overlay h3 {
    color: white;
    font-size: 16px;
    text-align: center;
}

/* HOVER EFFECT */
.place-item:hover img {
    transform: scale(1.1);
}

.place-item:hover .overlay {
    opacity: 1;
}

/* GLOW EFFECT */
.place-item:hover {
    box-shadow: 0 10px 25px rgba(37,99,235,0.4);
    border-radius: 12px;
}

/* ================= PLACE PAGE ================= */

.place-hero {
    position: relative;
    text-align: center;
}

.place-hero img {
    width: 80%;
    max-width: 1500px;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 30px;

    box-shadow: 0 10px 30px rgba(59,130,246,0.3);
}

.place-hero h1 {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);

    color: white;
    font-size: 48px;
    font-weight: bold;

    text-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

/* ================= MAIN CARD ================= */

.place-card {
    max-width: 1000px;
    margin: 50px auto;
    padding: 35px;

    background: rgba(255,255,255,0.95);
    border-radius: 20px;

    box-shadow: 0 20px 50px rgba(37,99,235,0.25);
}

.center-tour-card {

    grid-column: 1 / -1;

    max-width: 650px;

    width: 100%;

    margin: auto;
}

/* ================= INTRO ================= */

.place-intro {
    text-align: center;
    margin-bottom: 35px;

    font-size: 17px;
    line-height: 1.8;
}

/* ================= STORY SECTIONS ================= */

.story {
    display: flex;
    align-items: center;
    gap: 35px;

    margin: 45px 0;
}

/* ALTERNATE */
.story.reverse {
    flex-direction: row-reverse;
}

/* IMAGE */
.story img {
    width: 420px;
    height: 250px;
    object-fit: cover;

    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(59,130,246,0.25);

    transition: 0.3s;
}

.story img:hover {
    transform: scale(1.05);
}

/* TEXT */
.story h2 {
    color: #2563eb;
    margin-bottom: 10px;
}

.story p {
    line-height: 1.7;
}

/* ================= HIGHLIGHTS ================= */

.highlights {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;

    margin: 50px 0;
}

.highlights div {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: white;

    padding: 12px 22px;
    border-radius: 25px;

    font-size: 14px;

    box-shadow: 0 10px 25px rgba(37,99,235,0.3);
    transition: 0.3s;
}

.highlights div:hover {
    transform: translateY(-5px) scale(1.05);
}

/* ================= BACK BUTTON ================= */

.back-btn {
    display: inline-block;
    margin-top: 40px;
    padding: 10px 22px;

    background: #2563eb;
    color: white;

    border-radius: 6px;
    text-decoration: none;

    transition: 0.3s;
}

.back-btn:hover {
    background: #1d4ed8;
}


/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {
    .story {
        flex-direction: column;
        text-align: center;
    }

    .story.reverse {
        flex-direction: column;
    }

    .story img {
        width: 100%;
        height: 220px;
    }
}

/*========== SMOOTH SCROLL ================= */
html {
    scroll-behavior: smooth;
}

/* ================= SPIRITUAL SECTION ================= */

#spiritual {
    padding-top: 60px;
    position: relative;
}

/* ================= TITLE ================= */

.sacred-title {
    margin-left: 20px;

    text-align: left;

    font-size: 40px;
    color: #000000;

    margin-bottom: 12px;
}

/* ================= SACRED PATH ================= */

.sacred-path {
    position: relative;

    width: calc(100% - 320px);
    max-width: 1100px;

    margin: auto;
}

/* CENTER DIVINE LINE */

.sacred-path::before {
    content: '';

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 4px;

    background: linear-gradient(
        to bottom,
        #60a5fa,
        #2563eb,
        #93c5fd
    );

    border-radius: 20px;

    box-shadow: 0 0 15px rgba(37,99,235,0.4);
}

/* ================= ITEM ================= */

.sacred-item {
    position: relative;

    width: 50%;

    margin-bottom: 90px;
}

/* LEFT */

.sacred-item.left {
    left: 0;

    padding-right: 55px;
}

/* RIGHT */

.sacred-item.right {
    left: 50%;

    padding-left: 55px;
}

/* ================= DIVINE DOT ================= */

.sacred-dot {
    position: absolute;

    top: 50%;
    width: 22px;
    height: 22px;

    background: white;

    border: 5px solid #2563eb;
    border-radius: 50%;

    box-shadow: 0 0 20px rgba(37,99,235,0.45);

    z-index: 5;
}

/* DOT POSITION */

.sacred-item.left .sacred-dot {
    right: -11px;
}

.sacred-item.right .sacred-dot {
    left: -11px;
}

/* ================= CARD ================= */

.sacred-card {
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(12px);

    border-radius: 28px;

    overflow: hidden;

    box-shadow: 0 18px 45px rgba(37,99,235,0.18);

    transition: 0.35s;
}

/* HOVER */

.sacred-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 25px 55px rgba(37,99,235,0.28);
}

/* ================= IMAGE ================= */

.sacred-image img {
    width: 100%;
    height: 260px;

    object-fit: cover;

    transition: 0.4s;
}

/* IMAGE HOVER */

.sacred-card:hover img {
    transform: scale(1.05);
}

/* ================= CONTENT ================= */

.sacred-content {
    padding: 28px;
}

/* TAG */

.sacred-tag {
    display: inline-block;

    padding: 8px 16px;

    border-radius: 30px;

    background: rgba(37,99,235,0.12);

    color: #2563eb;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 1px;

    margin-bottom: 18px;
}

/* TITLE */

.sacred-content h2 {
    color: #2563eb;

    font-size: 34px;

    margin-bottom: 18px;

    line-height: 1.2;
}

/* DESCRIPTION */

.sacred-content p {
    font-size: 15px;
    line-height: 1.9;

    margin-bottom: 25px;

    color: #334155;
}

/* ================= BUTTON ================= */

.sacred-btn {
    padding: 12px 22px;

    border: none;

    border-radius: 30px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color: white;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;

    transition: 0.3s;
}

/* BUTTON HOVER */

.sacred-btn:hover {
    transform: scale(1.05);

    box-shadow: 0 10px 25px rgba(37,99,235,0.35);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1000px) {

    .sacred-path::before {
        left: 20px;
    }

    .sacred-item {
        width: 100%;

        padding-left: 60px !important;
        padding-right: 0 !important;

        left: 0 !important;
    }

    .sacred-dot {
        left: 9px !important;
    }

    .sacred-title,
    .sacred-subtitle {
        margin-left: 0;
    }

    .sacred-path {
        width: calc(100% - 260px);
    }
}


/* ================= MANUSCRIPT OVERLAY ================= */

.manuscript-overlay {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.72);

    display: none;
    justify-content: center;
    align-items: center;

    z-index: 99999;

    padding: 30px;
}

/* ACTIVE */

.manuscript-overlay.active {
    display: flex;
}

/* ================= MANUSCRIPT CONTAINER ================= */

.manuscript-container {
    width: 1000px;
    max-width: 95%;

    max-height: 92vh;

    overflow-y: auto;

    background:
        linear-gradient(
            rgba(255,248,220,0.95),
            rgba(255,245,210,0.96)
        );

    border-radius: 30px;

    padding: 35px;

    position: relative;

    box-shadow:
        0 25px 60px rgba(0,0,0,0.4),
        0 0 40px rgba(255,215,0,0.15);

    animation: manuscriptOpen 0.4s ease;
}

/* ================= SCROLLBAR ================= */

.manuscript-container::-webkit-scrollbar {
    width: 10px;
}

.manuscript-container::-webkit-scrollbar-thumb {
    background: rgba(180,140,40,0.5);

    border-radius: 20px;
}

/* ================= CLOSE ================= */

.manuscript-close {
    position: absolute;

    top: 18px;
    right: 25px;

    font-size: 28px;

    cursor: pointer;

    color: #8b5e00;

    transition: 0.3s;
}

/* HOVER */

.manuscript-close:hover {
    transform: scale(1.1);
}

/* ================= HEADER ================= */

.manuscript-header {
    display: flex;
    gap: 35px;
    align-items: center;

    margin-bottom: 35px;
}

/* ================= IMAGE ================= */

.manuscript-header img {
    width: 360px;
    height: 260px;

    object-fit: cover;

    border-radius: 22px;

    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* ================= TITLE BOX ================= */

.manuscript-title-box {
    flex: 1;
}

/* TYPE */

.manuscript-type {
    display: inline-block;

    padding: 8px 18px;

    border-radius: 30px;

    background: rgba(180,140,40,0.15);

    color: #8b5e00;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 1px;

    margin-bottom: 18px;
}

/* TITLE */

.manuscript-title-box h1 {
    font-size: 48px;

    color: #6b4600;

    line-height: 1.2;

    margin-bottom: 18px;
}

/* YEAR */

.manuscript-year {
    font-size: 18px;

    color: #8b5e00;

    font-weight: bold;
}

/* ================= BODY ================= */

.manuscript-body {
    background: rgba(255,255,255,0.35);

    border-radius: 22px;

    padding: 30px;

    border: 1px solid rgba(180,140,40,0.15);
}

/* DESCRIPTION */

.manuscript-body p {
    font-size: 17px;

    line-height: 2;

    color: #4b3200;

    text-align: justify;
}

/* ================= ANIMATION ================= */

@keyframes manuscriptOpen {

    from {
        transform: scale(0.85);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {

    .manuscript-header {
        flex-direction: column;
    }

    .manuscript-header img {
        width: 100%;
        height: 240px;
    }

    .manuscript-title-box h1 {
        font-size: 36px;
    }

    .manuscript-body p {
        font-size: 15px;
        line-height: 1.9;
    }
}

/* ================= FOOD SECTION ================= */

#food {
    padding-top: 60px;
}

/* ================= TITLE ================= */

.food-title {
    margin-left: 20px;

    text-align: left;

    font-size: 40px;
    color: #000000;

    margin-bottom: 10px;
}

.food-subtitle {
    margin-left: 90px;

    text-align: left;

    font-size: 17px;
    color: #000000;

    margin-bottom: 50px;
}

/* ================= FOOD TRAY ================= */

.food-tray {
    position: relative;

    width: calc(100% - 360px);
    max-width: 1000px;

    height: 620px;

    margin: auto;

    border-radius: 40px;

    background:
        linear-gradient(rgba(255,255,255,0.12), rgba(255,255,255,0.08)),
        url("images/wood.jpg");

    background-size: cover;
    background-position: center;

    box-shadow: 0 20px 50px rgba(0,0,0,0.18);

    overflow: hidden;
}

/* ================= FOOD ITEM ================= */

.food-item {
    position: absolute;

    width: 210px;

    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);

    border-radius: 22px;

    padding: 15px;

    text-align: center;

    cursor: pointer;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);

    transition: 0.35s;
}

/* HOVER */
.food-item:hover {
    transform: translateY(-10px) scale(1.04);

    box-shadow: 0 20px 35px rgba(255,140,0,0.3);
}

.item3:hover,
.item6:hover {
    transform: translateX(-50%) translateY(-10px) scale(1.04);
}

/* IMAGE */
.food-item img {
    width: 100%;
    height: 130px;

    object-fit: cover;

    border-radius: 16px;

    margin-bottom: 12px;
}

/* TITLE */
.food-item h3 {
    color: #2563eb;

    font-size: 20px;

    margin-bottom: 8px;
}

/* SUBTEXT */
.food-item p {
    font-size: 14px;
    line-height: 1.5;

    color: #334155;
}
.food-item p {

    min-height: 55px;
}

/* ========================================================= */
/*                    FOOD EXPLORE TAG                        */
/* ========================================================= */

.food-explore-tag{

    margin-top:14px;

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:
    rgba(37,99,235,0.10);

    color:#2563eb;

    font-size:12px;

    font-weight:700;

    letter-spacing:0.5px;

    transition:0.3s ease;
}

/* HOVER */

.food-item:hover .food-explore-tag{

    background:#2563eb;

    color:white;

    transform:translateY(-2px);
}

/* ================= ITEM POSITIONS ================= */

/* ================= FOOD POSITIONS ================= */

.item1 {
    top: 50px;
    left: 80px;
}

.item2 {
    top: 50px;
    right: 80px;
}

.item3 {
    top: 250px;
    left: 50%;
    transform: translateX(-50%);
}

.item4 {
    bottom: 50px;
    left: 80px;
}

.item5 {
    bottom: 50px;
    right: 80px;
}

.item6 {
    bottom: 220px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    width: 240px;

line-height: 1.1;

min-height: 55px;

}
/* ================= POPUP ================= */

.food-popup {
    position: fixed;
    inset: 0;

    background: rgba(0,0,0,0.65);

    display: none;
    justify-content: center;
    align-items: center;

    z-index: 9999;
}

/* ACTIVE */
.food-popup.active {
    display: flex;
}

/* ================= POPUP BOX ================= */

.food-popup-box {
    width: 800px;
    max-width: 90%;

    background: white;

    border-radius: 30px;

    padding: 30px;

    position: relative;

    animation: popupShow 0.3s ease;
}

/* ================= CONTENT ================= */

.food-popup-content {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* IMAGE */
.food-popup-content img {
    width: 320px;
    height: 240px;

    object-fit: cover;

    border-radius: 20px;
}

/* TEXT */
.food-popup-text {
    flex: 1;
}

/* TITLE */
.food-popup-text h2 {
    color: #2563eb;

    font-size: 30px;

    margin-bottom: 20px;
}

/* DESCRIPTION */
.food-popup-text p {
    line-height: 1.9;

    font-size: 16px;
}

/* ================= CLOSE BUTTON ================= */

.close-food {
    position: absolute;

    top: 18px;
    right: 22px;

    font-size: 26px;

    cursor: pointer;

    color: #2563eb;
}

/* ================= ANIMATION ================= */

@keyframes popupShow {

    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1000px) {

    .food-tray {
        width: calc(100% - 260px);

        height: auto;

        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        gap: 20px;

        padding: 30px;
    }

    .food-item {
        position: relative;

        width: 240px;

        top: unset !important;
        left: unset !important;
        right: unset !important;
        bottom: unset !important;
    }

    .food-popup-content {
        flex-direction: column;
    }

    .food-popup-content img {
        width: 100%;
        height: 240px;
    }

    .food-popup-text h2 {
        font-size: 30px;
    }
}

/* ================= SPECIALS TITLE ================= */

.special-main-title {
    margin-left: 20px;
    margin-bottom: 40px;

    text-align: left;

    font-size: 40px;
    color: #000000;
}

/* ================= STORYBOOK SECTION ================= */

.storybook-section {
    display: flex;
    align-items: center;

    width: calc(100% - 80px);
    max-width: 850px;

    margin: 50px auto;

    padding: 22px;
    gap: 25px;

    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);

    border-radius: 25px;

    box-shadow: 0 15px 40px rgba(37,99,235,0.18);

    transition: 0.3s;
}

/* HOVER */
.storybook-section:hover {
    transform: translateY(-5px);
}

/* REVERSE */
.storybook-section.reverse {
    flex-direction: row-reverse;
}

/* ================= IMAGE ================= */

.storybook-image {
    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;
}

.storybook-image img {
    width: 100%;
    max-width: 320px;

    height: 300px;
    object-fit: cover;

    border-radius: 20px;

    box-shadow: 0 15px 35px rgba(37,99,235,0.2);

    transition: 0.4s;
}

.storybook-image img:hover {
    transform: scale(1.03);
}

/* ================= CONTENT ================= */

.storybook-content {
    flex: 1;
}

/* TAG */
.tag {
    display: inline-block;

    padding: 8px 18px;
    border-radius: 30px;

    background: rgba(37,99,235,0.12);
    color: #2563eb;

    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;

    margin-bottom: 18px;
}

/* TITLE */
.storybook-content h1 {
    font-size: 35px;
    line-height: 1.1;

    color: #2563eb;

    margin-bottom: 20px;
}

/* DESCRIPTION */
.storybook-content p {
    font-size: 15px;
    line-height: 1.8;

    margin-bottom: 22px;
}

/* ================= HIGHLIGHT BOX ================= */

.highlight-box {
    padding: 18px;

    background: rgba(37,99,235,0.08);

    border-left: 4px solid #2563eb;
    border-radius: 12px;

    margin-bottom: 25px;

    font-size: 15px;
    font-style: italic;
}

/* ================= MINI DETAILS ================= */

.mini-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 15px;
}

/* DETAIL CARD */
.mini-details div {
    background: rgba(37,99,235,0.08);

    padding: 16px;
    border-radius: 15px;

    transition: 0.3s;
}

/* HOVER */
.mini-details div:hover {
    transform: translateY(-5px);

    background: rgba(37,99,235,0.12);
}

/* MINI TITLE */
.mini-details h3 {
    color: #2563eb;

    margin-bottom: 10px;
    font-size: 22px;
}

/* MINI TEXT */
.mini-details p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1000px) {

    .storybook-section,
    .storybook-section.reverse {
        flex-direction: column;
    }

    .storybook-section {
        width: calc(100% - 260px);
    }

    .storybook-image img {
        max-width: 100%;
        height: 250px;
    }

    .storybook-content h1 {
        font-size: 34px;
    }

    .mini-details {
        grid-template-columns: 1fr;
    }
}

/* ================= INSTITUTIONS ================= */

#institutions {
    padding-top: 60px;
}

/* ================= TITLE ================= */

.archive-title {

    margin-left: 20px;
    margin-bottom: 50px;
    text-align: left;
    font-size: 40px;
    color: 000000;
}


/* ================= CLICK BANNER ================= */

.institution-click-banner {

    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 335px;
    margin-top: -5px;
    margin-bottom: 55px;
    width: fit-content;
}

/* SIDE LINES */

.banner-line {

    width: 90px;
    height: 2px;
    border-radius: 20px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(37,99,235,0.7),
        transparent
    );
}

/* TEXT */

.banner-text {

    position: relative;
    padding: 14px 28px;
    border-radius: 40px;
    background:
        linear-gradient(
            rgba(255,255,255,0.92),
            rgba(240,247,255,0.95)
        );
    border: 1px solid rgba(37,99,235,0.14);
    color: #0818A8;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    backdrop-filter: blur(12px);
    box-shadow:
        0 12px 28px rgba(37,99,235,0.08);
    overflow: hidden;
}

/* SHIMMER EFFECT */

.banner-text::before {

    content: '';

    position: absolute;

    top: 0;
    left: -120%;

    width: 100%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.8),
        transparent
    );

    animation: shimmerMove 3.5s infinite;
}

/* EMOJI */

.banner-text span {
    margin-right: 8px;
}

/* ANIMATION */

@keyframes shimmerMove {

    0% {
        left: -120%;
    }

    100% {
        left: 120%;
    }
}

/* RESPONSIVE */

@media (max-width: 1000px) {

    .institution-click-banner {
        margin-left: 0;

        justify-content: center;
    }

    .banner-line {
        width: 50px;
    }
}
/* ================= CONTAINER ================= */

.archive-container {
    width: calc(100% - 320px);
    max-width: 1000px;

    margin: auto;
}

/* ================= ITEM ================= */

.archive-item {
    margin-bottom: 35px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(37,99,235,0.15);
    transition: 0.3s;
}

/* ACTIVE */
.archive-item.active {
    box-shadow: 0 20px 45px rgba(37,99,235,0.22);
}

/* ================= HEADER ================= */

.archive-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border: none;
    outline: none;
    cursor: pointer;
    background: transparent;
    font-size: 20px;
    font-weight: bold;
    color: #2563eb;
    transition: 0.3s;
}

/* HOVER */
.archive-header:hover {
    background: rgba(37,99,235,0.06);
}

/* TYPE BADGE */
.archive-type {
    padding: 8px 14px;

    border-radius: 30px;

    background: rgba(37,99,235,0.12);

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 1px;
}

/* ================= CONTENT ================= */

.archive-content {
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.5s ease;

    display: flex;
    gap: 30px;

    padding-left: 28px;
    padding-right: 28px;
}

/* ACTIVE CONTENT PADDING */
.archive-item.active .archive-content {
    padding-bottom: 28px;
}

/* ================= IMAGE ================= */

.archive-content img {
    width: 320px;
    height: 220px;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 10px 25px rgba(37,99,235,0.18);
    transition: 0.3s;
}

/* IMAGE HOVER */
.archive-content img:hover {
    transform: scale(1.03);
}

/* ================= TEXT ================= */

.archive-text {
    flex: 1;
}

/* DESCRIPTION */
.archive-text p {
    font-size: 15px;
    line-height: 1.8;

    margin-bottom: 20px;
}

/* ================= DETAILS ================= */

.archive-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 15px;
}

/* DETAIL CARD */
.archive-details div {
    background: rgba(37,99,235,0.08);

    padding: 20px;
    border-radius: 15px;

    font-size: 14px;
    line-height: 1.6;

    transition: 0.3s;
}

/* HOVER */
.archive-details div:hover {
    transform: translateY(-5px);

    background: rgba(37,99,235,0.12);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1000px) {

    .archive-container {
        width: calc(100% - 230px);
    }

    .archive-content {
        flex-direction: column;
    }

    .archive-content img {
        width: 100%;
        height: 600px;
    }

    .archive-details {
        grid-template-columns: 1fr;
    }

    .archive-header {
        flex-direction: column;
        gap: 12px;

        align-items: flex-start;
    }
}

/* ========================================================= */
/*                     HOSPITALS SECTION                     */
/* ========================================================= */

#hospitals {
    padding-top: 70px;
}

/* ================= TITLE ================= */

.health-grid-title {

    text-align: left;

    font-size: 40px;

    color: #000000;

    margin-left: 20px;
    margin-bottom: 18px;

    letter-spacing: -1px;
}

/* ========================================================= */
/*                      GMKMCH CORE                          */
/* ========================================================= */

.medical-core {

    width: calc(100% - 320px);

    max-width: 1300px;

    margin: auto;
    margin-bottom: 65px;

    display: flex;
    justify-content: space-between;

    gap: 45px;

    padding: 50px;

    border-radius: 38px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.97),
            rgba(240,247,255,0.98)
        );

    border: 2px solid rgba(37,99,235,0.12);

    position: relative;

    overflow: hidden;

    box-shadow:
        0 20px 50px rgba(37,99,235,0.08);
}

/* BLUEPRINT GRID */

.medical-core::before {

    content: '';

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);

    background-size: 35px 35px;
}

/* TOP ACCENT */

.medical-core::after {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa,
            #38bdf8
        );
}

/* LEFT */

.core-left {

    flex: 1;

    position: relative;
    z-index: 2;
}

/* TAG */

.core-tag {

    display: inline-block;

    padding: 10px 20px;

    border-radius: 30px;

    background: rgba(37,99,235,0.08);

    color: #2563eb;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 28px;
}

/* TITLE */

.core-left h2 {

    font-size: 46px;

    line-height: 1.3;

    color: #2563eb;

    margin-bottom: 24px;
}

/* TEXT */

.core-left p {

    font-size: 16px;

    line-height: 2;

    color: #475569;
}

/* RIGHT */

.core-right {

    width: 300px;

    display: flex;
    flex-direction: column;

    gap: 22px;

    position: relative;
    z-index: 2;
}

/* STATS */

.core-stat {

    padding: 24px;

    border-radius: 24px;

    background: rgba(255,255,255,0.78);

    border: 1px solid rgba(37,99,235,0.1);

    transition: 0.3s;
}

/* HOVER */

.core-stat:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(37,99,235,0.08);
}

/* NUMBER */

.core-stat h3 {

    font-size: 34px;

    color: #2563eb;

    margin-bottom: 8px;
}

/* TEXT */

.core-stat span {

    color: #475569;

    font-size: 14px;
}

/* ========================================================= */
/*                         GRID                              */
/* ========================================================= */

.healthcare-grid {

    width: calc(100% - 320px);

    max-width: 1300px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 35px;
}

/* ========================================================= */
/*                        MODULE                             */
/* ========================================================= */

.health-module {

    position: relative;

    padding: 38px;

    border-radius: 34px;

    background:
        linear-gradient(
            rgba(255,255,255,0.98),
            rgba(245,250,255,0.98)
        );

    border: 2px solid rgba(37,99,235,0.1);

    overflow: hidden;

    transition: 0.35s;

    box-shadow:
        0 15px 40px rgba(37,99,235,0.06);
}

/* BLUEPRINT GRID */

.health-module::before {

    content: '';

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);

    background-size: 32px 32px;
}

/* TOP LINE */

.health-module::after {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );
}

/* HOVER */

.health-module:hover {

    transform: translateY(-10px);

    box-shadow:
        0 25px 55px rgba(37,99,235,0.12);
}

/* MODULE CODE */

.module-code {

    position: relative;
    z-index: 2;

    color: #2563eb;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.8px;

    margin-bottom: 18px;
}

/* TITLE */

.health-module h2 {

    position: relative;
    z-index: 2;

    font-size: 34px;

    line-height: 1.4;

    color: #2563eb;

    margin-bottom: 22px;
}

/* LINE */

.module-line {

    width: 110px;
    height: 4px;

    border-radius: 30px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    margin-bottom: 32px;

    position: relative;
    z-index: 2;
}

/* ========================================================= */
/*                     HOSPITAL NODE                         */
/* ========================================================= */

.hospital-node {

    position: relative;
    z-index: 2;

    padding: 20px 24px;

    margin-bottom: 18px;

    border-radius: 20px;

    background: rgba(255,255,255,0.78);

    border: 1px solid rgba(37,99,235,0.08);

    color: #1e3a8a;

    font-size: 17px;
    font-weight: 600;

    transition: 0.3s;

    cursor: pointer;

    overflow: hidden;
}

/* LEFT ACCENT */

.hospital-node::before {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            #2563eb,
            #60a5fa
        );
}

/* HOVER */

.hospital-node:hover {

    transform: translateX(10px);

    background: rgba(37,99,235,0.06);

    box-shadow:
        0 12px 25px rgba(37,99,235,0.08);
}

/* ========================================================= */
/*                     BLOOD BANK CARD                       */
/* ========================================================= */

.bloodbank-module {

    grid-column: 1 / -1;

    max-width: 700px;

    width: 100%;

    margin: auto;
}

/* ========================================================= */
/*                       POPUP                               */
/* ========================================================= */

.hospital-popup-overlay {

    position: fixed;
    inset: 0;

    background: rgba(15,23,42,0.58);

    display: none;
    justify-content: center;
    align-items: center;

    z-index: 99999;

    padding: 30px;
}

/* ACTIVE */

.hospital-popup-overlay.active {
    display: flex;
}

/* POPUP */

.hospital-popup {

    width: 1100px;
    max-width: 95%;

    max-height: 92vh;

    overflow-y: auto;

    padding: 42px;

    border-radius: 38px;

    background:
        linear-gradient(
            rgba(255,255,255,0.98),
            rgba(240,247,255,0.99)
        );

    border: 2px solid rgba(37,99,235,0.12);

    position: relative;

    overflow-x: hidden;

    animation: popupReveal 0.35s ease;
}

/* GRID */

.hospital-popup::before {

    content: '';

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);

    background-size: 35px 35px;
}

/* TOP ACCENT */

.hospital-popup::after {

    content: '';

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa,
            #38bdf8
        );
}

/* CLOSE */

.hospital-close {

    position: absolute;

    top: 18px;
    right: 25px;

    font-size: 30px;

    color: #2563eb;

    cursor: pointer;

    z-index: 5;

    transition: 0.3s;
}

/* HOVER */

.hospital-close:hover {

    transform: rotate(90deg);
}

/* HEADER */

.hospital-popup-header {

    margin-bottom: 35px;

    position: relative;
    z-index: 2;
}

/* TAG */

.popup-medical-tag {

    display: inline-block;

    padding: 10px 20px;

    border-radius: 30px;

    background: rgba(37,99,235,0.08);

    color: #2563eb;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 20px;
}

/* TITLE */

.hospital-popup-header h1 {

    font-size: 50px;

    color: #2563eb;

    line-height: 1.3;
}

/* MAP */

.hospital-map-box {

    margin-bottom: 35px;

    border-radius: 30px;

    overflow: hidden;

    position: relative;
    z-index: 2;

    box-shadow:
        0 15px 35px rgba(37,99,235,0.08);
}

/* IFRAME */

.hospital-map-box iframe {

    width: 100%;
    height: 350px;

    border: none;
}

/* INFO GRID */

.hospital-info-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 25px;

    position: relative;
    z-index: 2;
}

/* CARD */

.hospital-info-card {

    padding: 30px;

    border-radius: 26px;

    background: rgba(255,255,255,0.82);

    border: 1px solid rgba(37,99,235,0.08);

    transition: 0.3s;
}

/* HOVER */

.hospital-info-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 15px 30px rgba(37,99,235,0.08);
}

/* TITLE */

.hospital-info-card h3 {

    color: #2563eb;

    font-size: 24px;

    margin-bottom: 15px;
}

/* TEXT */

.hospital-info-card p {

    color: #475569;

    line-height: 1.9;

    font-size: 15px;
}

/* ========================================================= */
/*                 HEALTHCARE EXPLORE TAG                     */
/* ========================================================= */

.hospital-explore-tag{

    margin-top:18px;

    width:fit-content;

    padding:10px 18px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        rgba(59,130,246,0.12),
        rgba(37,99,235,0.08)
    );

    color:#1d4ed8;

    font-size:13px;

    font-weight:700;

    border:
    1px solid rgba(37,99,235,0.12);

    transition:0.3s ease;
}

/* HOVER */

.hospital-card:hover .hospital-explore-tag{

    background:#2563eb;

    color:white;

    transform:translateX(5px);
}

/* ========================================================= */
/*                      ANIMATION                            */
/* ========================================================= */

@keyframes popupReveal {

    from {

        opacity: 0;

        transform: scale(0.9);
    }

    to {

        opacity: 1;

        transform: scale(1);
    }
}

/* ========================================================= */
/*                      RESPONSIVE                           */
/* ========================================================= */

@media (max-width: 1000px) {

    .health-grid-title,
    .health-grid-subtitle {
        margin-left: 0;
    }

    .medical-core,
    .healthcare-grid {
        width: calc(100% - 40px);
    }

    .medical-core {
        flex-direction: column;
    }

    .core-right {
        width: 100%;
    }

    .healthcare-grid {
        grid-template-columns: 1fr;
    }

    .core-left h2 {
        font-size: 36px;
    }

    .health-module h2 {
        font-size: 28px;
    }

    .hospital-popup-header h1 {
        font-size: 34px;
    }

    .hospital-info-grid {
        grid-template-columns: 1fr;
    }

    .hospital-popup {
        padding: 28px;
    }
}

/* ====================================================== */
/*                    ICONS OF SALEM                       */
/* ====================================================== */

.icons-section{

    margin-top:140px;
}

/* HEADER */

.section-header{

    text-align:left;

    max-width:1000px;

    margin:auto auto 70px auto;
}

.section-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:999px;

    background:
    rgba(37,99,235,0.10);

    color:#2563eb;

    font-size:13px;

    letter-spacing:1px;

    margin-bottom:22px;
}

.section-header h1{

    font-size:40px;

    margin-bottom:24px;
}

/* MAIN CONTAINER */

.icons-container{

    max-width:1000px;

    margin-left: 380px;

    padding:50px;

    border-radius:40px;

    background:
    rgba(255,255,255,0.72);

    backdrop-filter:blur(18px);

    box-shadow:
    0 20px 60px rgba(15,23,42,0.08);

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:35px;
}

/* FRAME */

.icon-frame{

    position:relative;

    border-radius:26px;

    cursor:pointer;

    background:white;

    transition:0.4s ease;

    box-shadow:
    0 10px 30px rgba(15,23,42,0.08);
}

.icon-frame img{

    width:100%;

    height:200px;

    object-fit:cover;

    filter:grayscale(20%);

    transition:0.5s ease;
}

.icon-frame h3{

    padding:20px;

    text-align:center;

    font-size:20px;

    font-weight:700;
}

/* HOVER */

.icon-frame:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 45px rgba(37,99,235,0.18);
}

.icon-frame:hover img{

    transform:scale(1.05);

    filter:grayscale(0%);
}

/* ====================================================== */
/*                       POPUP                              */
/* ====================================================== */

.icon-popup{

    position:fixed;

    inset:0;

    background:
    rgba(15,23,42,0.75);

    backdrop-filter:blur(10px);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:99999;
}

.icon-popup-card{

    position:relative;

    width:min(700px,90%);

    background:white;

    border-radius:35px;

    padding:40px;

    text-align:center;

}

.icon-popup-card img{

    width:220px;

    height:220px;

    border-radius:50%;

    object-fit:cover;

    margin-bottom:25px;
}

.icon-popup-card h2{

    font-size:38px;

    margin-bottom:12px;
}

.icon-popup-card span{

    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:
    rgba(37,99,235,0.10);

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    margin-bottom:25px;
}

.icon-popup-card p{

    font-size:18px;

    line-height:1.8;

    color:#475569;
}

.back-btn{

    border:none;

    background:rgba(37,99,235,0.08);

    color:#2563eb;

    padding:10px 18px;

    border-radius:999px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    margin-bottom:20px;

    transition:0.3s;
}

.back-btn:hover{

    background:rgba(37,99,235,0.15);
}

/* ====================================================== */
/*        ICONS OF SALEM - EXACT MOBILE MINIATURE          */
/* ====================================================== */

@media(max-width:768px){

    #icons-of-salem{

        position:relative;

        height:700px;

        margin-bottom:40px;
    }

    .icons-container{

        display:grid !important;

        grid-template-columns:
        repeat(4,1fr) !important;

        gap:22px;

        width:1000px;

        position:relative;

        top:20px;

        left:-20%;

        transform:
        translateX(-50%)
        scale(0.36);

        transform-origin:top left;
    }

    .icon-frame{

        border-radius:24px;

    }

    .icon-frame img{

        width:100%;

        height:240px;

        object-fit:cover;

        display:block;
    }

    .icon-frame h3{

        font-size:22px;

        padding:18px;
    }
}

/* ========================================================= */
/*                    SALEM CITY FRAMES                      */
/* ========================================================= */

#gallery {
    padding-top: 80px;
}

/* ================= TITLE ================= */

.cityframes-title {

    text-align: left;

    font-size: 40px;

    color: #000000;

    margin-left: 20px;
    margin-bottom: 18px;

    letter-spacing: -1px;
}

/* ========================================================= */
/*                         GRID                              */
/* ========================================================= */

.cityframes-grid {

    width: calc(100% - 320px);

    max-width: 1400px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-auto-rows: 260px;

    gap: 28px;
}

/* ========================================================= */
/*                         FRAME                             */
/* ========================================================= */

.city-frame {

    position: relative;

    border-radius: 32px;

    overflow: hidden;

    cursor: pointer;

    transition: 0.45s ease;

    box-shadow:
        0 18px 45px rgba(15,23,42,0.08);
}

/* LARGE FRAME */

.large-frame {

    grid-column: span 2;

    grid-row: span 2;
}

/* WIDE FRAME */

.wide-frame {

    grid-column: span 2;
}

/* IMAGE */

.city-frame img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: 0.6s ease;
}

/* OVERLAY */

.frame-overlay {

    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 30px;

    background:
        linear-gradient(
            to top,
            rgba(15,23,42,0.88),
            rgba(15,23,42,0.2),
            transparent
        );
}

/* TAG */

.frame-overlay span {

    width: fit-content;

    padding: 10px 18px;

    border-radius: 30px;

    background: rgba(255,255,255,0.15);

    backdrop-filter: blur(10px);

    color: white;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 18px;
}

/* TITLE */

.frame-overlay h2 {

    color: white;

    font-size: 34px;
    font-weight: 700;

    line-height: 1.3;
}

/* HOVER */

.city-frame:hover {

    transform: translateY(-12px);

    box-shadow:
        0 30px 60px rgba(15,23,42,0.16);
}

/* IMAGE ZOOM */

.city-frame:hover img {

    transform: scale(1.08);
}

/* ========================================================= */
/*                        POPUP                              */
/* ========================================================= */

.city-popup-overlay {

    position: fixed;
    inset: 0;

    background: rgba(15,23,42,0.7);

    display: none;
    justify-content: center;
    align-items: center;

    z-index: 99999;

    padding: 35px;
}

/* ACTIVE */

.city-popup-overlay.active {
    display: flex;
}

/* POPUP */

.city-popup {

    width: 1150px;
    max-width: 95%;

    border-radius: 38px;

    overflow: hidden;

    background: white;

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    animation: cityPopupReveal 0.35s ease;

    box-shadow:
        0 35px 80px rgba(15,23,42,0.28);
}

/* ========================================================= */
/*                         IMAGE                             */
/* ========================================================= */

.city-popup-image {

    height: 700px;
}

/* IMAGE */

.city-popup-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ========================================================= */
/*                        CONTENT                            */
/* ========================================================= */

.city-popup-content {

    padding: 60px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* TAG */

.city-popup-content span {

    width: fit-content;

    padding: 12px 20px;

    border-radius: 30px;

    background: rgba(37,99,235,0.08);

    color: #2563eb;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 25px;
}

/* TITLE */

.city-popup-content h1 {

    font-size: 52px;
    font-weight: 800;

    color: #2563eb;

    line-height: 1.2;

    margin-bottom: 28px;
}

/* DESCRIPTION */

.city-popup-content p {

    font-size: 17px;

    line-height: 2;

    color: #475569;
}

/* ========================================================= */
/*                        CLOSE                              */
/* ========================================================= */

.city-popup-close {

    position: absolute;

    top: 22px;
    right: 28px;

    font-size: 32px;

    color: white;

    z-index: 1000;

    cursor: pointer;

    transition: 0.3s;
}

/* HOVER */

.city-popup-close:hover {

    transform: rotate(90deg);
}


/* ========================================================= */
/*                      ANIMATION                            */
/* ========================================================= */

@keyframes cityPopupReveal {

    from {

        opacity: 0;

        transform: scale(0.9);
    }

    to {

        opacity: 1;

        transform: scale(1);
    }
}

/* ========================================================= */
/*                      RESPONSIVE                           */
/* ========================================================= */

@media (max-width: 1100px) {

    .cityframes-title,
    .cityframes-subtitle {
        margin-left: 0;
    }

    .cityframes-grid {

        width: calc(100% - 40px);

        grid-template-columns: 1fr;
    }

    .large-frame,
    .wide-frame {

        grid-column: span 1;
        grid-row: span 1;
    }

    .city-popup {

        grid-template-columns: 1fr;
    }

    .city-popup-image {

        height: 350px;
    }

    .city-popup-content {

        padding: 35px;
    }

    .city-popup-content h1 {

        font-size: 38px;
    }
}

/* ========================================================= */
/*                    SALEM VIDEO SECTION                     */
/* ========================================================= */

.video-section{

    width:100%;

    padding:

    40px   /* top */

    40px   /* right */

    40px   /* bottom */

    290px; /* LEFT */

    box-sizing:border-box;

    margin-top:100px;

    margin-bottom:120px;

    display:flex;

    justify-content:center;
}

/* ========================================================= */
/*                 CINEMATIC VIDEO CONTAINER                  */
/* ========================================================= */

.cinematic-video-preview{

    position:relative;

    width:min(1500px, 100%);

    height:650px;

    border-radius:40px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:60px;

    box-sizing:border-box;

    box-shadow:
    0 25px 60px rgba(15,23,42,0.18);

    isolation:isolate;
}

/* ========================================================= */
/*                    BACKGROUND THUMBNAIL                    */
/* ========================================================= */

.cinematic-thumbnail{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:-2;

    transition:0.7s ease;
}

/* ========================================================= */
/*                        DARK OVERLAY                        */
/* ========================================================= */

.video-overlay{

    position:absolute;

    inset:0;

    z-index:-1;

    background:
    linear-gradient(
        90deg,
        rgba(15,23,42,0.92) 0%,
        rgba(30,41,59,0.75) 40%,
        rgba(59,130,246,0.18) 100%
    );
}

/* ========================================================= */
/*                         CONTENT                            */
/* ========================================================= */

.video-content{

    position:relative;

    z-index:3;

    width:100%;

    max-width:780px;

    margin:auto;

    text-align:center;

    color:white;
}

/* ========================================================= */
/*                           TAG                              */
/* ========================================================= */

.video-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:999px;

    background:
    rgba(255,255,255,0.12);

    backdrop-filter:blur(12px);

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:30px;
}

/* ========================================================= */
/*                          TITLE                             */
/* ========================================================= */

.video-content h1{

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:28px;

    text-shadow:
    0 8px 22px rgba(0,0,0,0.30);
}

/* ========================================================= */
/*                       DESCRIPTION                          */
/* ========================================================= */

.video-content p{

    font-size:20px;

    line-height:1.8;

    color:
    rgba(255,255,255,0.88);

    margin:
    0 auto 40px auto;

    max-width:780px;
}

/* ========================================================= */
/*                        WATCH BUTTON                        */
/* ========================================================= */

.watch-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:18px 34px;

    border-radius:999px;

    background:white;

    color:#2563eb;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

    transition:0.35s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.22);

    margin:auto;
}

/* HOVER */

.watch-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.28);
}

/* ========================================================= */
/*                        CREDIT BOX                          */
/* ========================================================= */

.video-credit-box{

    margin:
    40px auto 0 auto;

    width:fit-content;

    padding:18px 28px;

    border-radius:22px;

    background:
    rgba(255,255,255,0.10);

    backdrop-filter:blur(12px);

    color:white;

    border:
    1px solid rgba(255,255,255,0.08);
}

.video-credit-box span{

    font-size:13px;

    opacity:0.8;
}

.video-credit-box h3{

    margin-top:8px;

    font-size:22px;

    font-weight:700;
}

/* ========================================================= */
/*                           HOVER                            */
/* ========================================================= */

.cinematic-video-preview:hover
.cinematic-thumbnail{

    transform:scale(1.05);
}

/* ========================================================= */
/*                    MOBILE RESPONSIVE                       */
/* ========================================================= */

@media(max-width:1000px){

    .video-section{

        padding:0 15px;
    }

    .cinematic-video-preview{

        height:auto;

        padding:50px 25px;
    }

    .video-content h1{

        font-size:52px;
    }

    .video-content p{

        font-size:18px;

        max-width:100%;
    }

    .watch-btn{

        padding:16px 28px;

        font-size:16px;
    }

    .video-credit-box h3{

        font-size:18px;
    }
}

/* ========================================================= */
/*                    SMALL MOBILE DEVICES                    */
/* ========================================================= */

@media(max-width:600px){

    .cinematic-video-preview{

        border-radius:28px;

        padding:40px 20px;
    }

    .video-tag{

        font-size:11px;

        padding:10px 18px;
    }

    .video-content h1{

        font-size:38px;

        line-height:1.1;
    }

    .video-content p{

        font-size:16px;

        line-height:1.7;
    }

    .watch-btn{

        width:100%;

        max-width:280px;
    }

    .video-credit-box{

        width:100%;
    }

    .video-credit-box h3{

        font-size:16px;
    }
}

/* ========================================================= */
/*                  SALEM BIRTHDAY CAPSULE                   */
/* ========================================================= */

.salem-capsule {

    position: relative;

    bottom: 25px;
    right: 25px;
    left: 42%;
    width: 130px;
    height: 130px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 9999;
}

/* GLOW */

.capsule-glow {

    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    background:
        radial-gradient(
            rgba(37,99,235,0.28),
            transparent 70%
        );

    animation: capsulePulse 3s infinite;
}

/* RING */

.capsule-ring {

    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    border: 2px dashed rgba(37,99,235,0.45);

    animation: rotateRing 12s linear infinite;
}

/* CONTENT */

.capsule-content {

    width: 92px;
    height: 92px;

    border-radius: 50%;

    background: white;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 18px 45px rgba(37,99,235,0.18);

    position: relative;

    z-index: 3;
}

/* ICON */

.capsule-content span {

    font-size: 24px;

    margin-bottom: 3px;
}

/* TITLE */

.capsule-content h3 {

    font-size: 16px;

    color: #2563eb;

    margin-bottom: 3px;
}

/* DATE */

.capsule-content p {

    font-size: 12px;

    color: #64748b;
}

/* ========================================================= */
/*                        POPUP                              */
/* ========================================================= */

.birthday-popup-overlay {

    position: fixed;
    inset: 0;

    background: rgba(15,23,42,0.72);

    display: none;
    justify-content: center;
    align-items: center;

    z-index: 99999;

    padding: 30px;
}

/* ACTIVE */

.birthday-popup-overlay.active {

    display: flex;
}

/* POPUP */

.birthday-popup {

    width: 850px;
    max-width: 65%;

    border-radius: 40px;

    padding: 60px;

    background:
        linear-gradient(
            rgba(255,255,255,0.98),
            rgba(240,247,255,0.99)
        );

    position: relative;

    animation: popupReveal 0.35s ease;
}

/* GRID */

.birthday-popup::before {

    content: '';

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);

    background-size: 35px 35px;
}

/* CLOSE */

.birthday-close {

    position: absolute;

    top: 25px;
    right: 28px;

    font-size: 30px;

    color: #2563eb;

    cursor: pointer;

    z-index: 5;
}

/* TOP */

.birthday-top {

    position: relative;

    width: 180px;
    height: 50px;

    margin: auto;
    margin-bottom: 45px;
}

/* ORBITS */

.birthday-orbit {

    position: absolute;

    border-radius: 50%;

    border: 1px dashed rgba(37,99,235,0.25);
}

.orbit1 {

    width: 140px;
    height: 140px;

    top: 20px;
    left: 20px;

    animation: rotateRing 12s linear infinite;
}

.orbit2 {

    width: 180px;
    height: 180px;

    animation: rotateReverse 18s linear infinite;
}

/* CORE */

.birthday-core {

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background: #2563eb;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 40px;

    box-shadow:
        0 0 35px rgba(37,99,235,0.4);
}

/* CONTENT */

.birthday-content {

    text-align: center;

    position: relative;
    z-index: 2;
}

/* TAG */

.birthday-tag {

    display: inline-block;

    padding: 12px 22px;

    border-radius: 30px;

    background: rgba(37,99,235,0.08);

    color: #2563eb;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    margin-bottom: 25px;
}

/* TITLE */

.birthday-content h1 {

    font-size: 64px;

    color: #2563eb;

    margin-bottom: 12px;
}

/* DATE */

.birthday-content h2 {

    font-size: 28px;

    color: #64748b;

    margin-bottom: 30px;
}

/* DESCRIPTION */

.birthday-content p {

    font-size: 17px;

    line-height: 2;

    color: #475569;

    max-width: 760px;

    margin: auto;
    margin-bottom: 45px;
}

/* GRID */

.birthday-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 22px;
}

/* CARD */

.birthday-card {

    padding: 28px;

    border-radius: 24px;

    background: white;

    box-shadow:
        0 12px 30px rgba(37,99,235,0.08);
}

/* ICON */

.birthday-card h3 {

    font-size: 34px;

    margin-bottom: 14px;
}

/* TEXT */

.birthday-card span {

    color: #2563eb;

    font-weight: 700;
}

/* ========================================================= */
/*                      ANIMATIONS                           */
/* ========================================================= */

@keyframes capsulePulse {

    0% {

        transform: scale(1);

        opacity: 0.6;
    }

    50% {

        transform: scale(1.15);

        opacity: 1;
    }

    100% {

        transform: scale(1);

        opacity: 0.6;
    }
}

@keyframes rotateRing {

    from {

        transform: rotate(0deg);
    }

    to {

        transform: rotate(360deg);
    }
}

@keyframes rotateReverse {

    from {

        transform: rotate(360deg);
    }

    to {

        transform: rotate(0deg);
    }
}

@keyframes popupReveal {

    from {

        opacity: 0;

        transform: scale(0.9);
    }

    to {

        opacity: 1;

        transform: scale(1);
    }
}

/* ========================================================= */
/*                      RESPONSIVE                           */
/* ========================================================= */

@media (max-width: 1000px) {

    .birthday-grid {

        grid-template-columns: repeat(2, 1fr);
    }

    .birthday-content h1 {

        font-size: 42px;
    }

    .birthday-popup {

        padding: 35px;
    }
}

/* ========================================================= */
/*                         FOOTER                             */
/* ========================================================= */

.salem-footer {

    margin-left: 220px;

    padding: 60px 40px;

    text-align: center;

    position: relative;
}

/* LINE */

.footer-line {

    width: 100%;

    height: 1px;

    margin-bottom: 30px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(37,99,235,0.28),
            transparent
        );
}

/* TEXT */

.salem-footer p {

    color: #64748b;

    font-size: 15px;

    letter-spacing: 0.5px;
}

/* NAME */

.salem-footer span {

    color: #2563eb;

    font-weight: 700;
}

/* RESPONSIVE */

@media (max-width: 1000px) {

    .salem-footer {

        margin-left: 0;
    }
}

/* ========================================================= */
/*                    SCROLL ANIMATIONS                       */
/* ========================================================= */

.reveal {

    opacity: 0;

    transform:
        translateY(80px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}

/* ACTIVE */

.reveal.active {

    opacity: 1;

    transform:
        translateY(0);
}

/* LEFT */

.reveal-left {

    opacity: 0;

    transform:
        translateX(-100px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}

.reveal-left.active {

    opacity: 1;

    transform:
        translateX(0);
}

/* RIGHT */

.reveal-right {

    opacity: 0;

    transform:
        translateX(100px);

    transition:
        opacity 1s ease,
        transform 1s ease;
}

.reveal-right.active {

    opacity: 1;

    transform:
        translateX(0);
}

/* ZOOM */

.reveal-zoom {

    opacity: 0;

    transform:
        scale(0.85);

    transition:
        opacity 1s ease,
        transform 1s ease;
}

.reveal-zoom.active {

    opacity: 1;

    transform:
        scale(1);
}

/* ========================================================= */
/*                 MOBILE RESPONSIVENESS                      */
/* ========================================================= */

@media (max-width: 1000px) {


/* ========================================================= */
/*                     GLOBAL RESET                           */
/* ========================================================= */

body {

    overflow-x: hidden;
}

/* ========================================================= */
/*                        SIDEBAR                             */
/* ========================================================= */

.sidebar {

    position: fixed;

    bottom: 0;
    left: 0;

    width: 100%;

    height: 80px;

    display: flex;

    flex-direction: row;

    justify-content: space-around;
    align-items: center;

    padding: 0 10px;

    border-radius: 25px 25px 0 0;

    z-index: 9999;

    backdrop-filter: blur(18px);

    background:
        rgba(255,255,255,0.82);

    box-shadow:
        0 -8px 30px rgba(0,0,0,0.08);
}

/* LOGO */

.logo {

    display: none;
}

/* NAV */

.sidebar ul {

    display: flex;

    gap: 14px;

    overflow-x: auto;

    scrollbar-width: none;

    width: 100%;

    padding: 0 10px;
}

.sidebar ul::-webkit-scrollbar {

    display: none;
}

/* LIST */

.sidebar ul li {

    margin: 0;

    list-style: none;
}

/* LINKS */

.sidebar ul li a {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    gap: 4px;

    padding: 10px;

    border-radius: 16px;
}

/* ========================================================= */
/*                        SECTIONS                            */
/* ========================================================= */

.section {

    margin-left: 0 !important;

    padding:
        90px 20px 120px 20px;

    min-height: auto;
}

/* ========================================================= */
/*                         TITLES                             */
/* ========================================================= */

h1 {

    font-size: 38px !important;

    line-height: 1.2;
}

h2 {

    font-size: 28px !important;
}

p {

    font-size: 15px !important;

    line-height: 1.8;
}

/* ========================================================= */
/*                        HERO                                */
/* ========================================================= */

.hero {

    width: 100%;

    text-align: center;
}

.hero {

    min-height: auto !important;

    padding: 40px 20px;
}

/* WEATHER CARD */

.weather-card {

    width: 100%;

    max-width: 380px;

    margin: auto;
}

.weather-card {

    transform: scale(0.9);

    margin-bottom: 20px;
}

/* STATUS BAR */

.salem-status-bar {

    position: relative;

    top: auto;
    right: auto;

    width: 100%;

    flex-wrap: wrap;

    justify-content: center;

    margin-bottom: 25px;
}

/* ========================================================= */
/*                    STORYBOOK SECTION                       */
/* ========================================================= */

.storybook-section {

    flex-direction: column !important;

    gap: 30px;
}

.storybook-image,
.storybook-content {

    width: 100% !important;
}

/* ========================================================= */
/*                    TOURIST PLACES                          */
/* ========================================================= */

.places-card {

    grid-template-columns: 1fr !important;
}

.img-box {

    height: auto;
aspect-ratio: 16/10;
}

/* ========================================================= */
/*                    SACRED LOCATIONS                        */
/* ========================================================= */

.manuscript-card {

    flex-direction: column !important;
}

.manuscript-image,
.manuscript-content {

    width: 100% !important;
}

/* ========================================================= */
/*                         FOODS                              */
/* ========================================================= */

.food-grid {

    grid-template-columns: 1fr !important;
}

/* ========================================================= */
/*                      INSTITUTIONS                          */
/* ========================================================= */

.institutions-grid {

    grid-template-columns: 1fr !important;
}

/* ========================================================= */
/*                        HOSPITALS                           */
/* ========================================================= */

.health-module {

    padding: 20px;
}

.hospital-popup {

    width: 95% !important;

    padding: 20px;
}

/* ========================================================= */
/*                       GALLERY                              */
/* ========================================================= */

.cityframes-grid {

    grid-template-columns: 1fr !important;
}

/* ========================================================= */
/*                      VIDEO REEL                            */
/* ========================================================= */

.cinematic-video-preview {

    height: auto;

    min-height: 500px;
}

.video-content {

    position: relative;

    left: auto;
    top: auto;

    transform: none;

    max-width: 100%;

    padding: 40px 25px;
}

.video-content h1 {

    font-size: 42px !important;
}

.video-side-image {

    display: none;
}

/* ========================================================= */
/*                       FOOTER                               */
/* ========================================================= */

.salem-footer {

    margin-left: 0;

    padding-bottom: 130px;
}

}

/* ========================================================= */
/*                       CAPSULE                               */
/* ========================================================= */


.salem-day-badge,
.salem-capsule {

    position: relative !important;

    bottom: auto !important;
    right: auto !important;

    margin: 30px auto;

    display: flex;

    justify-content: center;
}

/* ========================================================= */
/*                  DESKTOP VIEWPORT MODE                     */
/* ========================================================= */

@media (max-width: 1000px) {

    body {

        overflow-x: auto;
        overflow-y: auto;

        min-width: 1280px;

        background: #dbeafe;
    }

    html {

        overflow-x: auto;
    }

    .section {

        min-width: 1200px;
    }
}

@media (max-width: 1000px) {

    .food-tray {

        transform:
            scale(0.78);

        transform-origin: top center;

        margin-left: 130px;

        margin-top: -40px;
    }
}

/* ========================================================= */
/*          TOURIST PLACES - EXACT 3x3 MOBILE VIEW            */
/* ========================================================= */

@media(max-width:768px){

    /* TOURIST SECTION CONTAINER */

    #places{

        position:relative;

        height:630px;

        margin-bottom:60px;
    }

    #places h1{

    position:relative;

    top:-270px;
}

    /* GRID */

   .places-card{

    display:grid !important;

    grid-template-columns:
    repeat(3,1fr) !important;

    gap:16px;

    width:900px;

    position:absolute;

    top:60px;

    left:15%;

    transform:
    translateX(-50%)
    scale(0.36);

    transform-origin:top left;
}

    /* IMAGES */

    .places-card img{

        width:100% !important;

        height:120px !important;

        object-fit:cover;

        border-radius:18px;

        display:block;
    }

    /* SACRED SECTION SPACING */

    #sacred-locations{

        margin-top:0;
    }
}