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

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


html {
    scroll-behavior: smooth;
}


body {

    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #ffffff;

    color: #222222;
}



/* ==========================================================
   CUSTOM FONT
========================================================== */

@font-face {

    font-family: greek;

    src:
        url("/assets/RELIGATH-Demo.otf");

}



/* ==========================================================
   NAVBAR
========================================================== */

.navbar {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    height: 120px;

    z-index: 10000;

    display: flex;

    align-items: center;

    background: transparent;

    transition:
        background 0.35s ease,
        height 0.35s ease,
        box-shadow 0.35s ease;

}


/* GRADIENT */

.navbar::before {

    content: "";

    position: absolute;

    inset: 0;

    height: 155px;

    background:
        linear-gradient(
            to bottom,

            rgba(0, 0, 0, 0.75),

            rgba(0, 0, 0, 0.40),

            rgba(0, 0, 0, 0.08),

            transparent
        );

    z-index: -1;

    pointer-events: none;

}


/* NAV AFTER SCROLL */

.navbar.scrolled {

    height: 90px;

    background:
        rgba(12, 12, 12, 0.94);

    backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px);

    box-shadow:
        0 4px 25px rgba(0, 0, 0, 0.25);

}


.navbar.scrolled::before {

    opacity: 0;

}



/* ==========================================================
   NAV CONTAINER
========================================================== */

.nav-container {

    width: 100%;
    height: 100%;

    max-width: 1600px;

    margin: auto;

    padding:
        0 4%;

    display: grid;

    grid-template-columns:
        1.65fr
        0.75fr
        0.75fr
        150px
        1.1fr
        0.8fr;

    align-items: center;

    gap: 20px;

}



/* ==========================================================
   ADDRESS
========================================================== */

.nav-address {

    color: white;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.6;

    letter-spacing: 0.25px;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5);

}


.nav-address span {

    display: block;

}


.nav-address a {

    color: #0d5eaf;

    text-decoration: none;

    transition:
        color 0.2s ease;

}


.nav-address a:hover {

    color: white;

}



/* ==========================================================
   NAV LINKS
========================================================== */

.nav-item {

    display: flex;

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

}


.nav-item a {

    position: relative;

    color: white;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;

    text-decoration: none;

    white-space: nowrap;

    padding:
        10px 3px;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.8);

    transition:
        color 0.25s ease,
        transform 0.25s ease;

}


.nav-item a::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 2px;

    transform:
        translateX(-50%);

    width: 0;

    height: 2px;

    background:
        #0d5eaf;

    transition:
        width 0.25s ease;

}


.nav-item a:hover {

    color:
        #0d5eaf;

    transform:
        translateY(-2px);

}


.nav-item a:hover::after {

    width: 100%;

}



/* ==========================================================
   LOGO
========================================================== */

.logo {

    display: flex;

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

}


.logo a {

    display: flex;

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

}


.logo img {

    width: 125px;

    height: 100px;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 4px 12px rgba(0, 0, 0, 0.5)
        );

    transition:
        transform 0.3s ease;

}


.logo img:hover {

    transform:
        scale(1.05);

}



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

.hero-slider {

    position: relative;

    width: 100%;

    height: 100vh;

    min-height: 720px;

    overflow: hidden;

    background:
        #000000;

}



/* ==========================================================
   SLIDES
========================================================== */

.slide {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background-size: contain;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    opacity: 0;

    transform:
        scale(1.0);

    transition:
        opacity 1.5s ease-in-out,
        transform 9s ease;

}


.slide.active {

    opacity: 1;

    transform:
        scale(1.09);

}



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

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 5;

    background:

        linear-gradient(
            to bottom,

            rgba(0, 0, 0, 0.20),

            rgba(0, 0, 0, 0.30),

            rgba(0, 0, 0, 0.58)
        );

}



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

.hero-content {

    position: absolute;

    top: 53%;
    left: 50%;

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

    width:
        min(1100px, 92%);

    z-index: 100;

    text-align: center;

    color:
        white;

    text-shadow:
        0 3px 16px rgba(0, 0, 0, 0.85);

}


.hero-eyebrow {

    display: block;

    margin-bottom:
        8px;

    color:
        white;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        6px;

}


.hero-content h1 {

    margin:
        0 0 5px;

    font-family:
        greek,
        Georgia,
        serif;

    font-size:
        clamp(60px, 7vw, 100px);

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        4px;

}


.hero-content h2 {

    margin-bottom:
        18px;

    font-family:
        greek,
        Georgia,
        serif;

    font-size:
        clamp(18px, 2vw, 30px);

    font-weight:
        400;

    letter-spacing:
        6px;

    text-transform:
        uppercase;

}


.hero-content p {

    max-width:
        650px;

    margin:
        0 auto 30px;

    font-size:
        18px;

    line-height:
        1.7;

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

}



/* ==========================================================
   HERO BUTTON GROUPS
========================================================== */

.primary-actions {

    margin-bottom:
        14px;

}


.menu-actions,
.special-actions {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap:
        10px;

}


.menu-actions {

    margin-bottom:
        15px;

}



/* ==========================================================
   STANDARD HERO BUTTON
========================================================== */

.hero-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        13px 22px;

    min-width:
        140px;

    border:
        1px solid rgba(255, 255, 255, 0.85);

    border-radius:
        4px;

    color:
        white;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

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

    backdrop-filter:
        blur(3px);

    transition:
        all 0.25s ease;

}


.hero-button:hover {

    background:
        #0d5eaf;

    border-color:
        #0d5eaf;

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25);

}


.hero-button-gold {

    padding:
        15px 35px;

    background:
        #0d5eaf;

    border-color:
        #0d5eaf;

    font-size:
        13px;

}


.hero-button-gold:hover {

    background:
        #0d5eaf;

    border-color:
        #0d5eaf;

}



/* ==========================================================
   SPECIAL BUTTONS
========================================================== */

.special-button {

    display:
        inline-flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        13px 22px;

    border-radius:
        4px;

    color:
        white;

    text-decoration:
        none;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    transition:
        all 0.25s ease;

}


.special-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.3);

}


.holiday-button {

    background:
        linear-gradient(
            135deg,
            #8f1818,
            #ba2828
        );

}


.holiday-button:hover {

    background:
        #19732b;

}


.catering-button {

    background:
        #c99a32;

}


.catering-button:hover {

    background:
        #e0b247;

}


.private-button {

    background:
        #284f9f;

}


.private-button:hover {

    background:
        #3866c1;

}



/* ==========================================================
   SLIDER DOTS
========================================================== */

.slider-dots {

    position:
        absolute;

    bottom:
        33px;

    left:
        50%;

    transform:
        translateX(-50%);

    z-index:
        200;

    display:
        flex;

    gap:
        12px;

}


.dot {

    width:
        10px;

    height:
        10px;

    padding:
        0;

    border-radius:
        50%;

    border:
        1px solid rgba(255, 255, 255, 0.95);

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

    cursor:
        pointer;

    transition:
        all 0.3s ease;

}


.dot:hover {

    transform:
        scale(1.25);

}


.dot.active {

    background:
        white;

    transform:
        scale(1.2);

}



/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator {

    position:
        absolute;

    bottom:
        28px;

    right:
        4%;

    z-index:
        200;

    width:
        26px;

    height:
        42px;

    border:
        1px solid rgba(255, 255, 255, 0.6);

    border-radius:
        20px;

}


.scroll-indicator span {

    position:
        absolute;

    top:
        8px;

    left:
        50%;

    width:
        4px;

    height:
        7px;

    transform:
        translateX(-50%);

    background:
        white;

    border-radius:
        50%;

    animation:
        scrollMove 1.8s infinite;

}


@keyframes scrollMove {

    0% {

        opacity:
            0;

        transform:
            translate(-50%, 0);

    }


    40% {

        opacity:
            1;

    }


    100% {

        opacity:
            0;

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

    }

}



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

.content-section {

    padding:
        110px 25px;

    text-align:
        center;

    background:
        white;

}


.content-container {

    max-width:
        900px;

    margin:
        0 auto;

}


.section-label {

    display:
        block;

    margin-bottom:
        12px;

    color:
        #0d5eaf;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        4px;

}


.content-container h2,
.contact-wrapper h2 {

    font-family:
       greek;

    font-size:
        clamp(38px, 4vw, 52px);

    font-weight:
        700;

    line-height:
        1.1;

}


.content-container p {

    max-width:
        650px;

    margin:
        0 auto;

    color:
        #666;

    font-size:
        18px;

    line-height:
        1.8;

}


.section-divider {

    width:
        50px;

    height:
        2px;

    margin:
        20px auto 30px;

    background:
        #0d5eaf;

}



/* ==========================================================
   DARK SECTION
========================================================== */

.dark-section {

    background:
        #171717;

    color:
        white;

}


.dark-section p {

    color:
        #d4d4d4;

}


.dark-section .section-divider {

    background:
        #0d5eaf;

}


.section-button {

    display:
        inline-block;

    margin-top:
        30px;

    padding:
        14px 28px;

    border:
        1px solid #0d5eaf;

    border-radius:
        3px;

    color:
        white;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    text-decoration:
        none;

    transition:
        all 0.25s ease;

}


.section-button:hover {

    background:
        #0d5eaf;

    transform:
        translateY(-2px);

}



/* ==========================================================
   CONTACT SECTION
========================================================== */

.contact-section {

    padding:
        110px 25px;

    background:
        #f8f6f1;

}


.contact-wrapper {

    max-width:
        1250px;

    margin:
        0 auto;

    text-align:
        center;

}


.contact-wrapper h2 {

    color:
        #181818;

}



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

.contact-grid {

    display:
        grid;

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

    align-items:
        stretch;

    gap:
        28px;

    margin-top:
        50px;

}



/* ==========================================================
   CONTACT CARDS
========================================================== */

.contact-card {

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    min-height:
        410px;

    padding:
        45px 32px;

    background:
        white;

    border:
        1px solid rgba(0, 0, 0, 0.05);

    border-radius:
        16px;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.contact-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        100%;

    height:
        3px;

    background:
        linear-gradient(
            to right,
            #0d5eaf,
            #0c559e,
            #08417b
        );

}


.contact-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.11);

}



/* ==========================================================
   CONTACT ICON
========================================================== */

.contact-icon {

    width:
        58px;

    height:
        58px;

    margin-bottom:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #0d5eaf,
            #05498d
        );

    color:
        white;

    font-size:
        25px;

    box-shadow:
        0 7px 20px rgba(185, 135, 40, 0.25);

}


.contact-card h3 {

    margin-bottom:
        22px;

    color:
        #191919;

    font-family:
        greek;
    font-size:
        25px;

}


.contact-main-text {

    margin:
        15px 0 20px;

    color:
        #616161;

    font-size:
        17px;

    line-height:
        1.8;

}



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

.contact-link {

    display:
        inline-block;

    margin-top:
        auto;

    padding:
        11px 22px;

    border:
        1px solid #0d5eaf;

    border-radius:
        30px;

    color:
        #0d5eaf;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-decoration:
        none;

    transition:
        all 0.25s ease;

}


.contact-link:hover {

    background:
        #0d5eaf;

    color:
        white;

}



/* ==========================================================
   HOURS
========================================================== */

.hours-list {

    width:
        100%;

}


.hours-list div {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    width:
        100%;

    padding:
        9px 0;

    border-bottom:
        1px solid #ece7dd;

    color:
        #676767;

    font-size:
        14px;

}


.hours-list span:first-child {

    color:
        #292929;

    font-weight:
        700;

    text-align:
        left;

}


.hours-list span:last-child {

    text-align:
        right;

}


.hours-list .closed-day span:last-child {

    color:
        #a13a31;

    font-weight:
        700;

}


.small-note {

    margin-top:
        18px;

    color:
        #999;

    font-size:
        12px;

    line-height:
        1.6;

}



/* ==========================================================
   SOCIAL CONTACT
========================================================== */

.social-contact {

    width:
        100%;

}


.social-row {

    padding:
        15px 0;

    border-bottom:
        1px solid #ece7dd;

}


.social-row:last-child {

    border-bottom:
        0;

}


.social-label {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #999;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.social-row a {

    color:
        #0d5eaf;

    font-size:
        15px;

    font-weight:
        600;

    text-decoration:
        none;

    transition:
        color 0.2s ease;

}


.social-row a:hover {

    color:
        #4f3710;

}



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

.footer {

    padding:
        35px 25px;

    background:
        #101010;

    color:
        #999;

}


.footer-inner {

    max-width:
        1200px;

    margin:
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

}


.footer-brand img {

    width:
        70px;

    height:
        55px;

    object-fit:
        contain;

}


.footer p {

    font-size:
        12px;

    text-align:
        center;

}


.footer a {

    color:
        #0d5eaf;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1px;

    text-decoration:
        none;

}



/* ==========================================================
   TABLET
========================================================== */

@media screen and (max-width: 1100px) {

    .navbar {

        height:
            105px;

    }


    .nav-container {

        padding:
            0 2%;

        grid-template-columns:
            1.3fr
            0.65fr
            0.65fr
            120px
            1fr
            0.7fr;

        gap:
            10px;

    }


    .nav-address {

        font-size:
            12px;

    }


    .nav-item a {

        font-size:
            12px;

    }


    .logo img {

        width:
            100px;

        height:
            82px;

    }


    .contact-grid {

        gap:
            18px;

    }


    .contact-card {

        padding:
            38px 22px;

    }

}



/* ==========================================================
   MOBILE NAV / TABLET PORTRAIT
========================================================== */

@media screen and (max-width: 800px) {

    .navbar {

        height:
            auto;

        padding:
            8px 0;

        background:
            rgba(10, 10, 10, 0.92);

        backdrop-filter:
            blur(12px);

    }


    .navbar::before {

        display:
            none;

    }


    .nav-container {

        display:
            flex;

        flex-wrap:
            wrap;

        justify-content:
            center;

        gap:
            5px 17px;

        padding:
            5px 15px;

    }


    .logo {

        order:
            -3;

        width:
            100%;

    }


    .logo img {

        width:
            90px;

        height:
            65px;

    }


    .nav-address {

        order:
            -2;

        width:
            100%;

        text-align:
            center;

        margin-bottom:
            5px;

        font-size:
            11px;

    }


    .nav-address span {

        display:
            inline;

    }


    .nav-address span::after {

        content:
            " • ";

    }


    .nav-item a {

        font-size:
            11px;

        padding:
            6px 2px;

    }


    .hero-slider {

        min-height:
            800px;

    }


    .hero-content {

        top:
            57%;

        width:
            94%;

    }


    .hero-content h1 {

        font-size:
            55px;

    }


    .hero-content h2 {

        font-size:
            17px;

        letter-spacing:
            3px;

    }


    .hero-content p {

        font-size:
            15px;

        margin-bottom:
            22px;

    }


    .menu-actions,
    .special-actions {

        gap:
            8px;

    }


    .hero-button,
    .special-button {

        padding:
            11px 15px;

        min-width:
            auto;

        font-size:
            10px;

    }


    .contact-grid {

        grid-template-columns:
            1fr;

        max-width:
            600px;

        margin:
            45px auto 0;

    }


    .contact-card {

        min-height:
            auto;

    }


    .content-section,
    .contact-section {

        padding:
            80px 20px;

    }


    .scroll-indicator {

        display:
            none;

    }


    .footer-inner {

        flex-direction:
            column;

    }

}



/* ==========================================================
   SMALL PHONES
========================================================== */

@media screen and (max-width: 480px) {

    .nav-container {

        gap:
            2px 12px;

    }


    .nav-item a {

        font-size:
            10px;

    }


    .hero-slider {

        min-height:
            850px;

    }


    .hero-content {

        top:
            58%;

    }


    .hero-eyebrow {

        font-size:
            10px;

        letter-spacing:
            4px;

    }


    .hero-content h1 {

        font-size:
            47px;

    }


    .hero-content h2 {

        font-size:
            14px;

        letter-spacing:
            2px;

    }


    .hero-content p {

        max-width:
            90%;

        font-size:
            14px;

    }


    .menu-actions,
    .special-actions {

        width:
            100%;

    }


    .hero-button,
    .special-button {

        padding:
            10px 12px;

        font-size:
            9px;

        letter-spacing:
            0.8px;

    }


    .hero-button-gold {

        padding:
            13px 27px;

        font-size:
            11px;

    }


    .content-container h2,
    .contact-wrapper h2 {

        font-size:
            36px;

    }


    .contact-card {

        padding:
            36px 20px;

    }


    .hours-list div {

        font-size:
            12px;

        gap:
            10px;

    }


    .contact-section {

        padding:
            70px 15px;

    }

}

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

.specials-card {

    max-width: 950px;

    margin: 45px auto 60px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #faf8f3
        );

    border: 1px solid rgba(0, 0, 0, 0.06);

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.08);

    text-align: left;

}


/* TOP */

.specials-header {

    position: relative;

    padding:
        38px 40px 28px;

    background:
        #171717;

    color:
        white;

}


.specials-header::after {

    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            to right,
            #9f7422,
            #e2b855,
            #9f7422
        );

}


.specials-badge {

    display: inline-block;

    margin-bottom: 10px;

    color:
        #dcb052;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        3px;

}


.specials-header h3 {

    margin-bottom: 8px;

    font-family:
      greek;

    font-size:
        30px;

    font-weight:
        600;

}


.specials-header p {

    color:
        #d7d7d7;

    font-size:
        15px;

}



/* SPECIAL ITEMS */

.specials-list {

    padding:
        10px 40px 20px;

}


.special-item {

    padding:
        24px 0;

    border-bottom:
        1px solid #e7e1d6;

}


.special-item:last-child {

    border-bottom:
        none;

}


.special-title {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        8px;

}


.special-title span {

    color:
        #1e1e1e;

    font-size:
        18px;

    font-weight:
        800;

}


.special-title strong {

    color:
        #b17f27;

    font-family:
      greek;

    font-size:
        20px;

    white-space:
        nowrap;

}


.special-item p {

    color:
        #666666;

    font-size:
        15px;

    line-height:
        1.7;

}



/* MOBILE */

@media screen and (max-width: 600px) {

    .specials-card {

        margin:
            35px auto 45px;

        border-radius:
            14px;

    }


    .specials-header {

        padding:
            28px 22px 24px;

    }


    .specials-header h3 {

        font-size:
            24px;

    }


    .specials-list {

        padding:
            5px 22px 15px;

    }


    .special-title {

        align-items:
            flex-start;

    }


    .special-title span {

        font-size:
            16px;

    }


    .special-title strong {

        font-size:
            17px;

    }


    .special-item p {

        font-size:
            14px;

    }

}