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

body {
    background-color: #e6f4ff;
    font-family: "Noto Sans Kannada", Arial, sans-serif;
    margin: 0;
    padding: 20px;
    color: #222;
}


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

header {
    text-align:center;
    padding:20px;
}


header h1:first-child {

    font-size:30px;

    color:#003366;

    font-weight:bold;

    line-height:1.4;

    margin:5px;

}


header h1:nth-child(2) {

    font-size:22px;

    color:#003366;

    font-weight:bold;

    line-height:1.5;

    margin:5px;

}



/* ==========================
   NAVIGATION
========================== */


nav {

    display:flex;

    flex-direction:row;

    justify-content:center;

    align-items:flex-start;

    flex-wrap:nowrap;

    gap:0;

    margin-top:30px;

}



/* Each menu item */

.menu-item {

    width:140px;

    text-align:center;

    padding:0 10px;

    border-right:2px solid #cfcfcf;

}


/* Register wider */

.menu-item.register {

    width:230px;

}


.menu-item:last-child {

    border-right:none;

}



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


.kannada {

    display:block;

    font-size:18px;

    font-weight:bold;

    margin-bottom:6px;

}


.english {

    display:block;

    font-size:15px;

    font-weight:bold;

}



/* ==========================
   MENU COLORS
========================== */


.home {
    color:#0056b3;
}


.about {
    color:#228B22;
}


.gallery-link {
    color:#7B1FA2;
}


.events-link {
    color:#E67E22;
}


.batches-link {
    color:#8B4513;
}


.students-link {
    color:#008080;
}


.committee-link {
    color:#4B0082;
}


.contact-link {
    color:#444444;
}



/* ==========================
   REGISTER ALUMNI HIGHLIGHT
========================== */


.register-box {

    display:block;

    background:transparent !important;

    color:#d60000 !important;

    border:2px solid #d60000;

    padding:8px 12px;

    margin:4px;

    border-radius:8px;

    font-weight:bold;

    text-decoration:none;

    box-shadow:0 3px 8px rgba(0,0,0,0.20);

    transition:0.3s;

}



.register-box:hover {

    background:#fff5f5 !important;

    color:#b30000 !important;

    border-color:#b30000;

}



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


.menu-item a {

    text-decoration:none;

}


.menu-item a:hover {

    text-decoration:underline;

}



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


h2 {

    color:#003366;

    font-size:28px;

    margin-top:35px;

}


.hero {

    padding:20px;

}


.hero h2 {

    font-size:32px;

}


p {

    font-size:18px;

    line-height:1.8;

}



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


.gallery {

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}


.gallery img {

    width:300px;

    height:200px;

    object-fit:cover;

    border-radius:10px;

}



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


footer {

    background:#0b6fa4;

    color:white;

    padding:20px;

    text-align:center;

    margin-top:40px;

}



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


@media(max-width:900px){


    nav {

        flex-wrap:wrap;

    }


    .menu-item {

        width:45%;

        border-right:none;

        margin-bottom:20px;

    }


    .menu-item.register {

        width:90%;

    }


    header h1:first-child {

        font-size:24px;

    }


    header h1:nth-child(2) {

        font-size:20px;

    }


    .gallery img {

        width:100%;

        height:auto;

    }

}
/* FORCE HORIZONTAL MENU */

nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}


.menu-item {
    display: inline-block !important;
    width: 140px !important;
    text-align: center !important;
}


.menu-item a {
    display: block !important;
}
/* Donation Menu Highlight */

.donation-link {

    color:#008000;

    font-weight:bold;

}