/*====================================
        GOOGLE FONTS & RESET
=====================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#f5f7fb;
    color:#222;
    overflow-x:hidden;

}

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

body::before{

    content:"";
    position:fixed;
    inset:0;

    background:

    radial-gradient(circle at top right,
    rgba(244,196,66,.12),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(10,46,93,.10),
    transparent 40%),

    linear-gradient(#fafcff,#eef4fb);

    z-index:-2;

}

.background-pattern{

    position:fixed;
    inset:0;

    background-image:

    linear-gradient(rgba(10,46,93,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,46,93,.03) 1px,transparent 1px);

    background-size:45px 45px;

    z-index:-1;

}

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

.top-header{

    position:relative;

    background:linear-gradient(135deg,#041f4d,#0a2e5d,#183d8b);

    color:#fff;

    overflow:hidden;

    padding-bottom:90px;

}

.gold-line{

    height:7px;

    background:linear-gradient(to right,
    #d7a300,
    #ffef94,
    #d7a300);

}

/*====================================
        SCHOOL AREA
=====================================*/

.school{

    width:1200px;
    max-width:95%;
    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:35px 0;

}

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

.logo img{

    width:110px;
    height:110px;

    border-radius:50%;

    background:white;

    padding:6px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.35);

}

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

.school-text{

    flex:1;
    padding-left:25px;

}

.school-text h1{

    font-family:'Cinzel',serif;

    font-size:56px;

    font-weight:700;

    color:#FFD84D;

    letter-spacing:1px;

    margin-bottom:10px;

}

.school-text p{

    color:#ecf2ff;

    font-size:18px;

    margin-top:4px;

}

/*====================================
        QUOTE
=====================================*/

.quote{

    text-align:right;

}

.quote i{

    font-size:60px;

    color:#FFD84D;

    margin-bottom:10px;

}

.quote h2{

    font-size:34px;

    font-weight:700;

}

.quote span{

    display:block;

    font-size:28px;

    color:#FFD84D;

    font-family:"Cinzel";

}

/*====================================
            WAVE
=====================================*/

.wave{

    position:absolute;

    bottom:-2px;

    left:0;

    width:100%;
    height:120px;

    background:#fff;

    border-radius:

    100% 100% 0 0/

    90px;

}

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

.title-section{
    text-align:center;
    margin:40px 0 50px;
}

.menu-subtitle{
    font-size:14px;
    letter-spacing:5px;
    text-transform:uppercase;
    color:#c89b00;
    margin-bottom:8px;
    font-weight:600;
}

.menu-title{
    font-family:'Cinzel', serif;
    font-size:54px;
    color:#0A2E5D;
    margin:0;
    font-weight:700;
}

.menu-title i{
    color:#F4C542;
    margin-right:12px;
}

.menu-month{
    margin-top:10px;
    font-size:18px;
    color:#666;
    letter-spacing:2px;
}

/*====================================
        BADGES
=====================================*/

.badge{

    width:190px;

    background:white;

    border-radius:25px;

    padding:20px;

    text-align:center;

    box-shadow:

    0 15px 35px rgba(0,0,0,.12);

    border:3px solid #f4c542;

    font-weight:700;

    color:#0A2E5D;

}

.badge i{

    font-size:45px;

    color:#F4C542;

    display:block;

    margin-bottom:12px;

}

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

.heading{

    flex:1;

    margin:0 40px;

    background:white;

    border-radius:30px;

    text-align:center;

    padding:35px;

    box-shadow:

    0 25px 50px rgba(0,0,0,.12);

    position:relative;

    overflow:hidden;

}

/* Gold shine */

.heading::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;
    height:100%;

    background:

    linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.55),
    transparent);

    animation:shine 6s infinite;

}

@keyframes shine{

0%{

left:-100%;

}

100%{

left:150%;

}

}

.heading h1{

    font-family:"Cinzel";

    font-size:68px;

    color:#0A2E5D;

    margin-bottom:18px;

}

.month{

    display:inline-block;

    background:

    linear-gradient(135deg,#d39a00,#f4c542,#ffd85c);

    color:#0A2E5D;

    font-size:28px;

    font-weight:700;

    padding:14px 45px;

    border-radius:50px;

    box-shadow:

    0 10px 25px rgba(212,165,0,.35);

}

/*====================================
        MENU AREA
=====================================*/

.menu-area{

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

    margin:auto;

    padding-bottom:60px;

}

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

.menu-card{

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    border-radius:30px;

    overflow:hidden;

    border:3px solid #F4C542;

    box-shadow:

    0 30px 70px rgba(10,46,93,.15),

    0 10px 20px rgba(0,0,0,.08);

    position:relative;

}

/* Decorative gold strip */

.menu-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:linear-gradient(
        90deg,
        #b8860b,
        #FFD84D,
        #fff5b5,
        #FFD84D,
        #b8860b
    );

}

/*====================================
        TABLE
=====================================*/

table{

    width:100%;

    border-collapse:collapse;

}

thead{

    background:linear-gradient(
        135deg,
        #041f4d,
        #0A2E5D,
        #153b85
    );

}

thead th{

    color:white;

    padding:22px;

    font-size:22px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

    border-right:1px solid rgba(255,255,255,.15);

}

thead th:last-child{

    border-right:none;

}

thead i{

    color:#FFD84D;

    margin-right:10px;

}

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

tbody td{

    padding:18px 20px;

    font-size:17px;

    border-bottom:1px solid #edf1f7;

    transition:.35s;

}

/* Zebra Rows */

tbody tr:nth-child(even){

    background:#fbfcff;

}

tbody tr:nth-child(odd){

    background:#ffffff;

}

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

tbody tr{

    transition:.35s;

}

tbody tr:hover{

    background:#fff9e7;

    transform:scale(1.005);

    box-shadow:

    inset 5px 0 0 #F4C542;

}

/*====================================
        DATE COLUMN
=====================================*/

tbody td:first-child{

    width:150px;

    font-weight:700;

    color:#0A2E5D;

}

/*====================================
        DAY COLUMN
=====================================*/

tbody td:nth-child(2){

    width:90px;

    text-align:center;

    font-weight:700;

    color:#d39a00;

}

/*====================================
        BREAKFAST
=====================================*/

tbody td:nth-child(3){

    color:#1b2b52;

    font-weight:500;

}

/*====================================
        LUNCH
=====================================*/

tbody td:last-child{

    color:#444;

}

/*====================================
        HEALTHY ROW
=====================================*/

.healthy{

    background:linear-gradient(
        90deg,
        #f6ffe7,
        #ffffff
    ) !important;

}

.healthy td{

    font-weight:600;

}

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

.healthy-tag{

    float:right;

    padding:7px 18px;

    border-radius:30px;

    background:linear-gradient(
        135deg,
        #2ca44f,
        #42c56c
    );

    color:white;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:

    0 8px 18px rgba(44,164,79,.35);

}

/*====================================
        BORDER
=====================================*/

tbody td{

    border-right:1px solid #f0f0f0;

}

tbody td:last-child{

    border-right:none;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#d4a514;

    border-radius:30px;

}

::-webkit-scrollbar-track{

    background:#eef2f9;

}

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

.menu-card{

    animation:cardUp .8s ease;

}

@keyframes cardUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

footer{

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

    margin:60px auto;

    background:linear-gradient(135deg,#0A2E5D,#163d7d);

    border-radius:30px;

    color:#fff;

    padding:50px;

    text-align:center;

    position:relative;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(10,46,93,.25);

}

/* Decorative circles */

footer::before{

    content:"";

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    top:-120px;
    left:-100px;

}

footer::after{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    background:rgba(255,215,0,.08);

    right:-80px;
    bottom:-80px;

}

/*====================================
        ICONS
=====================================*/

.icons{

    display:flex;

    justify-content:space-between;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:45px;

}

.icons div{

    flex:1;

    min-width:170px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    border-radius:25px;

    padding:25px;

    transition:.35s;

}

.icons div:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.14);

}

.icons i{

    width:80px;
    height:80px;

    line-height:80px;

    border-radius:50%;

    background:linear-gradient(135deg,#FFD84D,#F4C542);

    color:#0A2E5D;

    font-size:34px;

    margin-bottom:18px;

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

}

.icons h3{

    font-size:18px;

    font-weight:600;

}

/*====================================
        NOTE
=====================================*/

.note{

    display:inline-block;

    margin:20px auto 35px;

    padding:15px 35px;

    border-radius:50px;

    background:#ffffff;

    color:#0A2E5D;

    font-weight:600;

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

}

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

footer h2{

    font-family:"Cinzel",serif;

    color:#FFD84D;

    font-size:36px;

    letter-spacing:1px;

}

/*====================================
        FLOATING GOLD DOTS
=====================================*/

body::after{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    background-image:

    radial-gradient(circle,#F4C542 2px,transparent 2px);

    background-size:120px 120px;

    opacity:.18;

    animation:moveDots 40s linear infinite;

}

@keyframes moveDots{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120px);

    }

}

/*====================================
        A4 PRINT
=====================================*/

@media print{

body{

background:white;

}

.top-header{

padding-bottom:40px;

}

.title-section{

margin-top:20px;

}

footer{

page-break-inside:avoid;

}

}

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

@media(max-width:992px){

.school{

flex-direction:column;

text-align:center;

gap:25px;

}

.school-text{

padding:0;

}

.quote{

text-align:center;

}

.title-section{

flex-direction:column;

gap:25px;

}

.heading{

margin:0;

}

.icons{

justify-content:center;

}

}

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

@media(max-width:768px){

.school-text h1{

font-size:38px;

}

.heading h1{

font-size:42px;

}

.month{

font-size:20px;

padding:10px 30px;

}

.badge{

width:100%;

max-width:320px;

}

.menu-card{

overflow-x:auto;

}

table{

min-width:900px;

}

thead th{

font-size:17px;

padding:15px;

}

tbody td{

font-size:15px;

padding:14px;

}

footer{

padding:35px 20px;

}

footer h2{

font-size:24px;

}

.icons div{

min-width:140px;

}

}

/*====================================
        EXTRA PREMIUM EFFECTS
=====================================*/

.logo img{

transition:.5s;

}

.logo img:hover{

transform:rotate(8deg) scale(1.08);

}

.heading{

transition:.4s;

}

.heading:hover{

transform:translateY(-5px);

box-shadow:0 30px 70px rgba(0,0,0,.18);

}

.menu-card:hover{

box-shadow:

0 40px 90px rgba(10,46,93,.22),

0 15px 25px rgba(0,0,0,.08);

}