/* ===== RESET ===== */
html, body {
    height:100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", Verdana, sans-serif;
    font-size: 14px;
}
a {
    text-decoration: underline;
    color: #562a77;
}

a:hover {
    color: #562a77;
    text-decoration: none;
    background: none;
}

/* Wrapper pushes footer down */
.page-wrapper {
    min-height: 100%;
    margin-bottom: -125px; /* same as footer height */
}

/* Space for footer */
#body {
    padding-bottom: 125px;
}

/* Footer */
footer {
    height: 105px;
    background-color: #562a77;
    color: #fff;
    text-align: center;
}

/* ===== WRAPPER ===== */
.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

/* ===== HEADER ===== */
header {
    background-color: #562a77;
}

/* ===== TOP HEADER (3 COLUMNS - FLOAT) ===== */

/* ===== TOP HEADER (TABLE LAYOUT - CLEAN) ===== */
.header-top {
    display: table;
    width: 100%;
}

/* Columns */
.col {
    display: table-cell;
    vertical-align: middle;   /* vertical center */
    box-sizing: border-box;
}

/* Widths */
.col-left {
    width: 25%;
    text-align: left;
}

.col-center {
    width: 50%;
    text-align: center;
    color: #FBE34B;
    font-weight: bold;
}

.col-right {
    width: 25%;
    text-align: right;
}

/* Title ellipsis */
.col-center div {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size:2.5rem;
    font-weight:bold;
}

.site-title{
    color:#fff;
    font-size:1rem;
    font-weight:600;
}

/* ===== LOGO ===== */
.logo-img {
    max-width: 150px;
    height: auto;
    padding:5px;
}

/* ===== MENU (FULL WIDTH BAR) ===== */
.header-menu {
    width: 100%;
    background-color: #FBE34B;
}

/* Keep menu centered */
.header-menu .content-wrapper {
    text-align: center;
    padding: 0;
}

/* Menu list */
#menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Menu items */
#menu li {
    display: inline-block;
}

/* Links (full height clickable) */
#menu a {
    display: inline-block;
    padding: 15px 20px;
    text-decoration: none;
    color: #562a77;
    font-weight: 600;
    font-size:16px;
}

/* Hover + Active */
#menu a:hover,
#menu a.active {
    background-color: #562a77;
    color: #FBE34B;
}

/* ===== LOGIN ===== */
#login {
    margin-top: 10px;
}

#login a {
    color: #FBE34B;
    text-decoration: none;
    margin-left: 10px;
}

/* ===== MOBILE MENU BUTTON ===== */
.menu-toggle {
    display: none;
    font-size: 24px;
    background: none;
    border: none;
    color: #562a77;
    cursor: pointer;
}

/* ===== MAIN CONTENT ===== */
#body {
    background-color: #fff;
}

/* ===== FOOTER ===== */
footer {
    background-color: #562a77;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

   .header-top {
        display: block;
    }

    .col {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .col-center div {
        white-space: normal;
    }

    /* Smaller logo */
    .logo-img {
        max-width: 100px;
    }

    /* Show hamburger */
    .menu-toggle {
        display: block;
        margin: 10px auto;
    }

    /* Hide menu */
    #menu {
        display: none;
        width: 100%;
        background-color: #FBE34B;
    }

    /* Show when active */
    #menu.active {
        display: block;
    }

    /* Stack menu */
    #menu li {
        display: block;
    }

    #menu a {
        display: block;
        padding: 12px;
    }
     .home-banner {
        height: 220px;
        background-size: cover;
    }

     .table-3col {
        display: block;
    }

    .col-table {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* FULL WIDTH BANNER */
.home-banner {
    width: 100vw;
    height: 500px; /* desktop height */

    /* Image */
    background-image: url('../Images/banner.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;  /* works like object-fit but for background */

    /* Break out of wrapper if needed */
    margin-left: calc(-50vw + 50%);
}

hr.gradient {
    border: none;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        #562a77 15%,
        #FBE34B 50%,
        #562a77 85%,
        transparent
    );
}

.label{
    font-weight:600;
}

.table-3col {
    display: table;
    width: 100%;
    table-layout: fixed; /* equal widths */
}

/* Columns behave like table cells */
.col-table {
    display: table-cell;
    width: 33.3333%;
    padding: 15px;
    box-sizing: border-box;
     text-align: center;      /* ✅ horizontal center */
    vertical-align: middle;  /* ✅ vertical center */
}

/* Column (table layout already set) */
.col-table {
    text-align: center;
    padding:15px;
}

/* Circle fills column width */
.circle-btn {
    display: block;
    width: 60%;
    
    /* 🔥 makes height = width */
    padding-top: 60%;

    position: relative;
    border-radius: 50%;

    background-color: #562a77;
    color: #FBE34B;
    text-decoration: none;
}

/* Center text inside circle */
.circle-btn span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:75%;
    font-size:16px;
    font-weight:600;
}

.circle-btn:hover {
    background-color: #FBE34B;
    color: #562a77;
}