/* ==========================================
   SKI CONNECT v3.0
   Global Stylesheet
========================================== */

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ==========================================
   ROOT COLORS
========================================== */

:root{

    --primary:#B71C1C;
    --secondary:#E65100;
    --accent:#FFC107;

    --dark:#263238;
    --light:#F8F9FA;

    --white:#FFFFFF;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--light);

    color:var(--dark);

    overflow-x:hidden;

}

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

a{

    text-decoration:none;

    transition:.3s;

}

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

.navbar{

    background:linear-gradient(90deg,#8B0000,#B71C1C,#D84315);

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

    padding:15px 0;

    transition:.3s;

}

.navbar-brand{

    color:white !important;

    font-size:1.8rem;

    font-weight:700;

}

.nav-link{

    color:white !important;

    font-weight:600;

    margin-left:20px;

    position:relative;

    transition:.3s;

}

.nav-link:hover{

    color:#FFD54F !important;

}

.nav-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:3px;

    background:#FFC107;

    transition:.3s;

}

.nav-link:hover::after{

    width:100%;

}

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

main{

    padding-top:90px;

}

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

.btn{

    border-radius:12px;

    font-weight:600;

    padding:12px 26px;

    transition:.3s;

}

.btn-warning{

    background:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));

    border:none;

    color:white;

}

.btn-warning:hover{

    transform:translateY(-3px);

    color:white;

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

}

.btn-primary{

    background:var(--primary);

    border:none;

}

.btn-primary:hover{

    background:var(--secondary);

}

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

.glass-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:25px;

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

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

}

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

section{

    padding:80px 0;

}

/* ==========================================
   HEADINGS
========================================== */

.section-title{

    font-size:2.4rem;

    font-weight:700;

    color:var(--primary);

    margin-bottom:20px;

}

.section-subtitle{

    color:#666;

    font-size:1.05rem;

}

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

.card{

    border:none;

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,0,0,.15);

}

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

footer{

    background:linear-gradient(90deg,#B71C1C,#D84315,#F57C00,#FFC107);

    color:white;

    padding:18px 0 10px;

    border-top:3px solid rgba(255,255,255,.25);

}

.footer-title{

    color:white;

    font-size:1.15rem;

    font-weight:700;

    margin-bottom:8px;

}

.footer-text{

    color:#fff;

    font-size:.92rem;

    line-height:1.6;

    opacity:.95;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.25);

    margin-top:12px;

    padding-top:10px;

    text-align:center;

    font-size:.82rem;

    color:white;

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}

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

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:992px){

.nav-link {
    margin: 3px 0 !important;
    padding: 6px 0 !important;
}

.section-title{

    font-size:2rem;

}

}

@media(max-width:768px){

main{

    padding-top:80px;

}

.btn{

    width:100%;

    margin-top:10px;

}

.section-title{

    font-size:1.8rem;

}

}

/* ==========================================
   SHARE BUTTON - FIXED ROUND SHAPE
========================================== */

.share-button {
    width: 38px;
    height: 38px;

    padding: 0;
    margin: 0;

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

    border-radius: 50% !important;

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

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

    color: #FFFFFF !important;

    font-size: 17px;

    cursor: pointer;

    transition: 0.3s;
}

.share-button i {
    margin: 0;
}

.share-button:hover {
    color: #FFFFFF !important;

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

    border-color: rgba(255,255,255,0.25);

    transform: translateY(-3px);
}


/* ==========================================
   NAVBAR SOCIAL ICONS
========================================== */

/* ==========================================
   FOOTER LINKS & SOCIAL MEDIA
========================================== */

/* Quick Links */

.footer-links {
    margin: 0;
    padding: 0;
}

.footer-links a {
    display: block;
    color: #FFFFFF !important;
    font-size: 0.92rem;
    line-height: 1.8;
    margin-bottom: 6px;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a i {
    margin-right: 7px;
    color: #FFFFFF !important;
}

/* Quick Link TEXT hover only */

.footer-links a:hover {
    color: #000000 !important;
    transform: translateX(4px);
}

/* Keep Quick Link icons WHITE */

.footer-links a:hover i {
    color: #FFFFFF !important;
}


/* ==========================================
   SCHOOL LOCATION
========================================== */

.footer-location {
    color: #FFFFFF !important;
    text-decoration: none;
    transition: 0.3s;
}

.footer-location:hover {
    color: #000000 !important;
}


/* ==========================================
   SCHOOL WEBSITE / CONTACT LINKS
========================================== */

.footer-text a {
    color: #FFFFFF !important;
    text-decoration: none;
    transition: 0.3s;
}

/* Contact TEXT hover only */

.footer-text a:hover {
    color: #000000 !important;
}


/* ==========================================
   FOOTER SOCIAL ICONS
========================================== */

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-social a {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    color: #FFFFFF !important;

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

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

    font-size: 17px;

    transition: 0.3s;
}

/* Social icons stay WHITE on hover */

.footer-social a:hover {
    color: #FFFFFF !important;

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

    border-color: rgba(255,255,255,0.25);

    transform: translateY(-3px);
}

/* ==========================================
   UTILITIES
========================================== */

.gold-text{

    color:#FFC107;

}

.shadow-lg-custom{

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

}

.rounded-xl{

    border-radius:25px;

}
/* ===========================
   BACK TO HOME BUTTON
=========================== */

.back-home-btn {

    background: linear-gradient(
        90deg,
        #B71C1C,
        #E65100
    );

    color: #FFFFFF;

    padding: 10px 28px;

    border-radius: 12px;

    font-weight: 600;

    border: none;

    text-decoration: none;

    display: inline-block;

    transition: .3s;
}

.back-home-btn:hover {

    background: linear-gradient(
        90deg,
        #8B0000,
        #D84315
    );

    color: #FFFFFF;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0,0,0,.25);
}

/* =========================================
   FEEDBACK CHOICE MODAL
========================================= */

#feedbackChoiceModal .modal-dialog {
    max-width: 520px;
}

#feedbackChoiceModal .modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35);
}

#feedbackChoiceModal .modal-header {
    position: relative;
    background: linear-gradient(
        135deg,
        #b30000,
        #e52b18,
        #ff8a00
    );
    color: #ffffff;
    padding: 24px 28px;
    border: none;
}

#feedbackChoiceModal .modal-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    padding-right: 30px;
}

#feedbackChoiceModal .modal-title::before {
    content: "💬";
    margin-right: 10px;
}

#feedbackChoiceModal .btn-close {
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: rgba(255,255,255,0.9);
    border-radius: 50%;
    padding: 10px;
    opacity: 1;
}

#feedbackChoiceModal .modal-body {
    padding: 30px;
    background: #ffffff;
}

#feedbackChoiceModal .modal-body > p {
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

#feedbackChoiceModal .modal-body .btn {
    position: relative;
    min-height: 68px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* Make both choice buttons narrower */

#feedbackChoiceModal .modal-body .btn {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

#feedbackChoiceModal
.modal-body
.btn-danger {
    background: linear-gradient(
        135deg,
        #d71920,
        #f04444
    );
    border: none;
    color: #ffffff;
    box-shadow:
        0 8px 20px rgba(215, 25, 32, 0.25);
}

#feedbackChoiceModal
.modal-body
.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 28px rgba(215, 25, 32, 0.35);
}

/* =========================================
   SUBMIT WITH MY DETAILS
========================================= */

#feedbackChoiceModal
.modal-body
.btn-outline-danger {

    background: linear-gradient(
        135deg,
        #1976d2,
        #42a5f5
    );

    color: #ffffff;

    border: none;

    box-shadow:
        0 8px 20px rgba(25, 118, 210, 0.25);
}

#feedbackChoiceModal
.modal-body
.btn-outline-danger:hover {

    background: linear-gradient(
        135deg,
        #1565c0,
        #2196f3
    );

    color: #ffffff;

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(25, 118, 210, 0.35);
}

#feedbackChoiceModal .btn i {
    font-size: 21px;
}

#feedbackChoiceModal .modal-body::after {
    content:
        " 🔒 Your feedback is handled confidentially.";
    display: block;
    text-align: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eeeeee;
    color: #777;
    font-size: 12px;
}


@media (max-width: 576px) {

    #feedbackChoiceModal .modal-body {
        padding: 22px;
    }

    #feedbackChoiceModal .modal-header {
        padding: 20px;
    }

    #feedbackChoiceModal .modal-title {
        font-size: 19px;
    }

    #feedbackChoiceModal .modal-body .btn {
        min-height: 62px;
        font-size: 15px;
    }
}
/* ==========================================
   FOOTER - ELEGANT SERIF FONT
========================================== */

/* All footer text */
footer,
footer p,
footer span,
footer li,
footer a,
.footer-text,
.footer-location,
.footer-links a {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1rem;
}

/* Footer section headings */
footer h3,
footer h4,
footer h5,
.footer-title {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* Quick Links */
.footer-links a {
    font-size: 1rem;
    line-height: 1.9;
}

/* Footer contact/location text */
.footer-text,
.footer-location {
    font-size: 1rem;
    line-height: 1.8;
}

/* Footer bottom copyright */
.footer-bottom,
.footer-bottom p {
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 0.95rem;
}

/* Social icons - keep icon size unchanged */
.footer-social a {
    font-family: Arial, sans-serif !important;
} 
/* ==========================================
   FOOTER HEADINGS - BLACK
========================================== */

.footer h3,
.footer h4,
.footer h5,
footer h3,
footer h4,
footer h5 {
    color: #000000 !important;
}
/* ==========================================
   NAVBAR - PROFESSIONAL & READABLE FONT
========================================== */

.navbar,
.navbar a,
.navbar .nav-link,
.navbar-brand {
    font-family: "Poppins", sans-serif !important;
}

/* Navbar menu text */
.navbar .nav-link {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.1px;
}

/* Navbar brand */
.navbar-brand {
    font-weight: 600;
}

/* ==========================================
   NAVBAR SOCIAL ICON SPACING
========================================== */

.navbar .social-icons {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Keep Share button perfectly round */
.navbar .share-button {
    width: 38px;
    height: 38px;
    padding: 0;
    margin-left: 4px;

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

    border-radius: 50% !important;
}
/* ==========================================
   FOOTER PHONE NUMBER - PROFESSIONAL FONT
========================================== */

.footer-text a[href^="tel:"] {
    font-family: "Poppins", sans-serif !important;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.2px;
}

/* =========================================================
   MOBILE FOOTER - ALL CONTENT LEFT ALIGNED
========================================================= */

@media (max-width: 768px) {

    /* Footer row */
    footer .row {
        display: block !important;
        width: 100% !important;
    }

    /* All footer columns */
    footer .row > .col-lg-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 0 28px 0 !important;
        text-align: left !important;
    }

    /* School Information */
    footer .row > .col-lg-4:nth-child(1) {
        width: 100% !important;
        text-align: left !important;
    }

    /* Quick Links */
    footer .row > .col-lg-4:nth-child(2) {
        width: 100% !important;
        text-align: left !important;
    }

    /* Contact Us */
    footer .row > .col-lg-4:nth-child(3) {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 0 !important;
    }

    /* Keep footer headings left */
    footer h4,
    footer h5 {
        text-align: left !important;
    }

    /* Keep footer links/content left */
    footer a,
    footer p,
    footer li {
        text-align: left !important;
    }
}
/* ==========================================
   MOBILE NAVBAR SOCIAL ICONS - FIX SPACING
========================================== */

@media (max-width: 768px) {

    .navbar .social-icons {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        width: 100% !important;
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .navbar .social-icons > * {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .navbar .social-icons a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
    }

    .navbar .social-icons .share-button {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

}
/* ==========================================
   MOBILE SOCIAL ICONS - KEEP EXACT LOGOS
========================================== */

@media (max-width: 768px) {

    /* Social media container */
    .navbar .navbar-nav > .nav-item.d-flex.align-items-center {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-left: 0 !important;
    }

    /* Instagram, Facebook, YouTube */
    .navbar .navbar-nav > .nav-item.d-flex.align-items-center > .nav-link {
        margin: 0 !important;
        padding: 6px !important;
        width: auto !important;
        height: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Keep the actual Bootstrap logos exactly the same */
    .navbar .navbar-nav > .nav-item.d-flex.align-items-center > .nav-link i {
        font-size: inherit !important;
        line-height: 1 !important;
    }

    /* Share button - keep its existing round shape */
    .navbar .navbar-nav > .nav-item.d-flex.align-items-center > .share-button {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 0 0 38px !important;
        border-radius: 50% !important;
    }

}
/* =========================================
   CEO / ADMIN LOCK - FAR RIGHT
========================================= */

.navbar .ceo-login-icon {
    margin-left: 28px;
}
/* =========================================================
   SKI CONNECT - NEW ORANGE / YELLOW / RED NAVBAR
   PREMIUM WAVE DESIGN
========================================================= */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;

    padding: 12px 0;

    background:
        linear-gradient(
            110deg,
            #d50000 0%,
            #f4511e 25%,
            #ff6d00 50%,
            #f4511e 75%,
            #DF0000 100%
        );
    box-shadow:
        0 6px 22px rgba(0,0,0,.28);

    overflow: hidden;
}


/* ---------------------------------------------------------
   FLOWING WAVE PATTERN
--------------------------------------------------------- */

.navbar::before,
.navbar::after {
    content: "";
    position: absolute;
    left: -5%;
    width: 110%;
    height: 70px;

    pointer-events: none;

    border-radius: 50%;
    transform: rotate(-2deg);
}


/* Golden upper wave */

.navbar::before {
    top: -48px;

    border-bottom:
        3px solid rgba(255,255,255,.65);

    box-shadow:
        0 15px 0 rgba(255,193,7,.45),
        0 30px 0 rgba(255,255,255,.18);
}


/* Orange lower wave */

.navbar::after {
    bottom: -52px;

    border-top:
        3px solid rgba(255,193,7,.75);

    box-shadow:
        0 -15px 0 rgba(255,255,255,.18),
        0 -30px 0 rgba(255,193,7,.35);
    
    transform: rotate(0deg);    
}


/* Keep navbar content above waves */

.navbar > .container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   BRAND
========================================================= */

.navbar-brand {
    color: #ffffff !important;

    font-size: 1.8rem;
    font-weight: 700;

    letter-spacing: .2px;

    white-space: nowrap;

    text-shadow:
        0 2px 4px rgba(0,0,0,.25);
}


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

.navbar .nav-link {
    color: #ffffff !important;

    font-size: 1rem;
    font-weight: 600;

    margin-left: 12px;

    padding: 9px 13px !important;

    position: relative;

    display: inline-flex;
    align-items: center;

    white-space: nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}


/* Remove old underline */

.navbar .nav-link::after {
    display: none !important;
}


/* Hover */

.navbar .nav-link:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
}


/* =========================================================
   ACTIVE HOME BUTTON
========================================================= */

.navbar .nav-link[href="/"],
.navbar .nav-link.active {
    background: #ffffff;

    color: #c62828 !important;

    border-radius: 28px;

    padding:
        10px 18px !important;

    box-shadow:
        0 5px 14px rgba(0,0,0,.20);
}


/* Home icon */

.navbar .nav-link[href="/"] i,
.navbar .nav-link.active i {
    color: #c62828;
}


/* =========================================================
   SOCIAL GROUP
========================================================= */

.navbar .nav-social-group {
    display: flex;
    align-items: center;

    margin-left: 10px !important;

    padding-left: 14px;

    border-left:
        1px solid rgba(255,255,255,.55);

    gap: 2px;
}


/* Social icons */

.navbar .nav-social-group .nav-link {
    width: 38px;
    height: 38px;

    margin-left: 0;

    padding: 0 !important;

    display: inline-flex;

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

    border-radius: 50%;
}


/* Social hover */

.navbar .nav-social-group .nav-link:hover {
    background:
        rgba(255,255,255,.18);

    transform: translateY(-2px);
}


/* Share button */

.navbar .nav-social-group .share-button {
    border: 0;

    background: transparent;

    color: #ffffff !important;

    cursor: pointer;
}


/* =========================================================
   CEO LOGIN ICON — OUTER WHITE CIRCLE
========================================================= */

.ceo-login-icon {
    width: 54px;
    height: 54px;

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

    border: 4px solid #ffffff !important;

    border-radius: 50% !important;

    color: #ffffff !important;

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

    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.18);

    padding: 0 !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


/* CEO Login icon */
.ceo-login-icon i {
    font-size: 22px;
    color: #ffffff !important;
}


/* Hover */
.ceo-login-icon:hover {
    background: rgba(255, 255, 255, 0.16);

    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.25);

    transform: scale(1.04);
}


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

@media (max-width: 991.98px) {

    .navbar {
        padding: 10px 0;
    }


    .navbar-brand {
        font-size: 1.45rem;
    }


    /* Lock + hamburger */

    .ceo-login-icon {
        margin-left: auto;

        margin-right: 10px;

        width: 42px;
        height: 42px;
    }


    .navbar-toggler {
        border:
            1px solid rgba(255,255,255,.75);

        border-radius: 12px;

        padding: 7px 9px;

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


    .navbar-toggler:focus {
        box-shadow:
            0 0 0 3px rgba(255,255,255,.25);
    }


    /* =====================================================
       OPEN MOBILE MENU
    ===================================================== */

    .navbar-collapse {
        margin-top: 12px;

        padding: 12px;

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

        border-radius: 20px;

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

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


    .navbar .navbar-nav {
        width: 100%;

        align-items: stretch !important;
    }


    .navbar .navbar-nav .nav-item {
        width: 100%;
    }


    /* Mobile menu links */

    .navbar .navbar-nav .nav-link {
        width: 100%;

        margin: 3px 0;

        padding: 13px 15px !important;

        color: #2f2f2f !important;

        font-size: 1rem;

        border-radius: 13px;

        display: flex;

        align-items: center;
    }


    .navbar .navbar-nav .nav-link:hover {
        color: #b71c1c !important;

        background:
            rgba(255,112,67,.10);

        transform: none;
    }


    /* Active Home */

    .navbar .navbar-nav
    .nav-link[href="/"],
    .navbar .navbar-nav
    .nav-link.active {

        color: #b71c1c !important;

        background:
            linear-gradient(
                90deg,
                #fff1ef,
                #ffe3df
            );

        box-shadow: none;

        border-radius: 14px;
    }


    /* =====================================================
       MOBILE SOCIAL GROUP
    ===================================================== */

    .navbar .nav-social-group {

        width: 100%;

        margin: 12px 0 2px !important;

        padding:
            14px 4px 4px;

        border-left: 0;

        border-top:
            1px solid #dddddd;

        display: flex;

        justify-content: flex-start;

        gap: 8px;
    }


    .navbar .nav-social-group .nav-link {

        width: 44px !important;
        height: 44px !important;

        margin: 0 !important;

        padding: 0 !important;

        color: #333 !important;

        display: inline-flex !important;

        justify-content: center;

        align-items: center;

        border-radius: 50%;
    }


    .navbar .nav-social-group
    .nav-link:hover {

        background:
            #f5f5f5;

        color: #b71c1c !important;
    }


    /* Share */

    .navbar .nav-social-group
    .share-button {

        color: #333 !important;
    }

}


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

@media (max-width: 576px) {

    .navbar-brand {
        font-size: 1.25rem;
    }


    .navbar-brand i {
        font-size: 1rem;
    }


    .ceo-login-icon {
        width: 40px;
        height: 40px;

        margin-right: 7px;
    }


    .ceo-login-icon i {
        font-size: 1.1rem;
    }


    .navbar-toggler {
        padding: 6px 8px;
    }


    .navbar-collapse {
        margin-left: 2px;
        margin-right: 2px;

        border-radius: 18px;
    }

}
/* =========================================================
   SKI CONNECT - SOCIAL ICONS
   MATCH REFERENCE DESIGN
========================================================= */

/* Common social icon circle */

.navbar .nav-social-group .nav-link.social-instagram,
.navbar .nav-social-group .nav-link.social-facebook,
.navbar .nav-social-group .nav-link.social-youtube,
.navbar .nav-social-group .nav-link.social-share {

    width: 42px !important;
    height: 42px !important;

    padding: 0 !important;
    margin: 0 3px !important;

    display: inline-flex !important;

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

    border-radius: 50% !important;

    color: #ffffff !important;

    border: none;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* Instagram */

.navbar .social-instagram {
    background:
        linear-gradient(
            135deg,
            #833AB4 0%,
            #FD1D1D 55%,
            #FCAF45 100%
        ) !important;
}


/* Facebook */

.navbar .social-facebook {
    background:
        #1877F2 !important;
}


/* YouTube */

.navbar .social-youtube {
    background:
        #FF0000 !important;
}


/* Share */

.navbar .social-share {
    background:
        linear-gradient(
            135deg,
            #ff9800,
            #f4511e
        ) !important;
}


/* Icon size */

.navbar .nav-social-group .nav-link i {
    font-size: 1.15rem;

    color: #ffffff !important;
}


/* Hover */

.navbar .nav-social-group .nav-link:hover {

    color: #ffffff !important;

    transform:
        translateY(-2px)
        scale(1.05);

    box-shadow:
        0 5px 12px rgba(0,0,0,.25);
}


/* =========================================================
   MOBILE SOCIAL ICONS
========================================================= */

@media (max-width: 991.98px) {

    .navbar .nav-social-group {

        justify-content: flex-start !important;

        gap: 8px !important;
    }


    .navbar .nav-social-group
    .nav-link.social-instagram,
    .navbar .nav-social-group
    .nav-link.social-facebook,
    .navbar .nav-social-group
    .nav-link.social-youtube,
    .navbar .nav-social-group
    .nav-link.social-share {

        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 50% !important;
    }


    .navbar .nav-social-group
    .nav-link i {

        font-size: 1.2rem;
    }

}
/* =========================================================
   FIX MOBILE SOCIAL ICONS - PERFECT CIRCLES
========================================================= */

@media (max-width: 991.98px) {

    .navbar .nav-social-group .nav-link.social-instagram,
    .navbar .nav-social-group .nav-link.social-facebook,
    .navbar .nav-social-group .nav-link.social-youtube,
    .navbar .nav-social-group .nav-link.social-share {

        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;

        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;

        padding: 0 !important;
        margin: 0 !important;

        flex: 0 0 52px !important;

        border-radius: 50% !important;

        aspect-ratio: 1 / 1;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .navbar .nav-social-group {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }

    .navbar .nav-social-group .nav-link i {
        font-size: 1.25rem !important;
        line-height: 1 !important;
    }
}
/* =========================================================
   SUBMIT FEEDBACK - MOBILE ACTIVE / TOUCH STATE
========================================================= */

@media (max-width: 991.98px) {
    .navbar .nav-submit-feedback {
        transition:
            color 0.25s ease,
            background 0.25s ease,
            border-radius 0.25s ease,
            box-shadow 0.25s ease;
    }

    .navbar .nav-submit-feedback:active {
        color: #b71c1c !important;
        background: linear-gradient(
            90deg,
            #fff1ef,
            #ffe3df
        ) !important;
        border-radius: 14px !important;
        outline: none !important;
        box-shadow: none !important;
    }
}
/* ==========================================
   CEO NOTIFICATION DROPDOWN - DESKTOP FIX
========================================== */

@media (min-width: 992px) {

    .navbar {
        overflow: visible !important;
    }

    .navbar .dropdown-menu {
        z-index: 9999 !important;
    }

    .navbar .nav-item.dropdown {
        position: relative;
    }

}
/* =========================================================
   NAVBAR PAGE HIGHLIGHTS
   Home stays permanently highlighted.
   Current CEO/Admin page gets an additional highlight.
========================================================= */

.navbar .nav-home-always,
.navbar .nav-admin-active {
    background: #ffffff !important;
    color: #c62828 !important;
    border-radius: 24px !important;
    padding: 10px 18px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Keep icons the same color */
.navbar .nav-home-always i,
.navbar .nav-admin-active i {
    color: #c62828 !important;
}

/* Smooth transition */
.navbar .nav-home-always,
.navbar .nav-admin-active {
    transition:
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}
/* =========================================================
   PUBLIC NAVIGATION — COMMON WHITE BOX
   Home + Submit Feedback + Track
========================================================= */

.navbar .nav-public-group {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}


/* COMMON WHITE BOX */

.navbar .nav-public-box {
    display: flex;
    align-items: center;

    background: #ffffff;

    border-radius: 28px;

    padding: 3px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.12);

    gap: 2px;
}


/* INDIVIDUAL LINKS */

.navbar .nav-public-link {
    position: relative;

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

    background: transparent !important;

    color: #c62828 !important;

    border-radius: 22px !important;

    padding: 9px 15px !important;

    text-decoration: none;

    white-space: nowrap;

    box-shadow: none !important;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}


/* ICONS */

.navbar .nav-public-link i {
    color: #c62828 !important;
}


/* CONTENT */

.navbar .nav-public-content {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding-bottom: 5px;
}


/* ORANGE UNDERLINE */

.navbar .nav-public-content::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 0;

    height: 3px;

    background: #ff9800;

    border-radius: 10px;

    transform: translateX(-50%);

    transition:
        width 0.25s ease;
}


/* HOVER */

.navbar .nav-public-link:hover .nav-public-content::after {
    width: 100%;
}


/* HOVER TEXT */

.navbar .nav-public-link:hover {
    color: #b71c1c !important;
}

.navbar .nav-public-link:hover i {
    color: #b71c1c !important;
}


/* REMOVE BOOTSTRAP BUTTON FOCUS BACKGROUND */

.navbar .nav-public-link:focus,
.navbar .nav-public-link:active {
    outline: none !important;
    box-shadow: none !important;
}
/* =========================================================
   MOBILE NAVBAR
   PUBLIC NAVIGATION — RESPONSIVE
========================================================= */

@media (max-width: 991.98px) {

    /* Common white box */
    .navbar .nav-public-group {
        width: 100%;
        margin: 8px 0 12px;
    }

    .navbar .nav-public-box {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 2px;

        padding: 7px;

        border-radius: 24px;

        background: #ffffff;

        box-shadow:
            0 5px 16px rgba(0, 0, 0, 0.12);

        box-sizing: border-box;
    }


    /* Home / Submit / Track */
    .navbar .nav-public-link {
        width: 100%;

        min-height: 48px;

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

        padding: 10px 18px !important;

        border-radius: 16px !important;

        color: #c62828 !important;

        box-sizing: border-box;
    }


    /* Icon + text */
    .navbar .nav-public-content {
        width: 100%;

        display: flex;
        align-items: center;

        justify-content: flex-start;

        gap: 10px;

        padding-bottom: 5px;
    }


    /* Orange underline */
    .navbar .nav-public-content::after {
        left: 0;

        bottom: 0;

        width: 0;

        height: 3px;

        transform: none;

        background: #ff9800;

        border-radius: 10px;

        transition: width 0.25s ease;
    }


    /* Mobile hover */
    .navbar .nav-public-link:hover
    .nav-public-content::after {
        width: 100%;
    }


    /* Mobile active/tap effect */
    .navbar .nav-public-link:active
    .nav-public-content::after {
        width: 100%;
    }


    /* Keep Submit Feedback button clean */
    .navbar .nav-submit-feedback {
        text-align: left;
        background: transparent !important;
    }

}
/* =========================================================
   DESKTOP NAVBAR — USE FULL AVAILABLE WIDTH
   Prevent Logout from going outside the screen
========================================================= */

@media (min-width: 992px) {

    .navbar > .container {
        max-width: calc(100% - 30px) !important;
        width: 100% !important;
    }

}
/* =========================================================
   DESKTOP NAVBAR — BALANCED ALIGNMENT
========================================================= */

@media (min-width: 992px) {

    .navbar > .container {
        position: relative;

        max-width: 100% !important;
        width: 100% !important;

        padding-left: 24px !important;
        padding-right: 24px !important;
    }


    /* LEFT SIDE — BRAND + CEO LOGIN */

    .navbar-brand {
        margin-right: 18px !important;
    }

    .ceo-login-icon {
        flex-shrink: 0;
    }


    /* CENTER — HOME / SUBMIT / TRACK */

    .navbar .nav-public-group {
        position: absolute;

        left: 50%;

        transform: translateX(-50%);

        margin: 0 !important;

        z-index: 2;
    }


    /* RIGHT SIDE — SOCIAL ICONS */

    .navbar .nav-social-group {
        margin-left: auto !important;

        flex-shrink: 0;

        position: relative;

        z-index: 3;
    }


    /* Keep public white box compact */

    .navbar .nav-public-box {
        white-space: nowrap;
    }

}
/* =========================================================
   CEO LOGGED-IN NAVBAR
   Keep public navigation, social icons and admin navigation
   separated without overlap.
========================================================= */

@media (min-width: 992px) {

    /* CEO navbar uses normal flex layout */
    .navbar.ceo-logged-in > .container {
        max-width: 100% !important;
        width: 100% !important;

        padding-left: 20px !important;
        padding-right: 20px !important;
    }


    /* Main navigation */
    .navbar.ceo-logged-in .navbar-nav {
        display: flex;

        align-items: center;

        flex-wrap: nowrap;

        gap: 3px;

        margin-left: auto !important;
    }


    /* IMPORTANT:
       Remove the absolute positioning used
       for the public-user navbar.
    */
    .navbar.ceo-logged-in .nav-public-group {
        position: static !important;

        transform: none !important;

        left: auto !important;

        margin: 0 8px 0 0 !important;

        flex-shrink: 0;
    }


    /* White Home / Submit / Track box */
    .navbar.ceo-logged-in .nav-public-box {
        flex-shrink: 0;

        white-space: nowrap;
    }


    /* Social icons stay together */
    .navbar.ceo-logged-in .nav-social-group {
        position: static !important;

        margin: 0 8px 0 0 !important;

        flex-shrink: 0;

        display: flex;

        align-items: center;

        gap: 5px;
    }


    /* Admin menu items */
    .navbar.ceo-logged-in .nav-item:not(.nav-public-group):not(.nav-social-group) {
        flex-shrink: 0;
    }


    /* CEO navigation links */
    .navbar.ceo-logged-in .nav-link {
        white-space: nowrap;
    }


    /* Keep the admin active boxes compact */
    .navbar.ceo-logged-in .nav-admin-active {
        flex-shrink: 0;
    }

}



/* =========================================================
   SKI CONNECT — SEPARATED PUBLIC AND CEO NAVBARS
   Overrides for base.html with .public-navbar / .ceo-navbar
========================================================= */

/* Shared navbar foundations */
.public-navbar,
.ceo-navbar {
    z-index: 1030;
}

.public-navbar .navbar-brand,
.ceo-navbar .navbar-brand {
    flex-shrink: 0;
}

/* Public navbar only */
.public-navbar .nav-public-group {
    display: flex;
    align-items: center;
}

.public-navbar .nav-social-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (min-width: 992px) {
    .public-navbar > .container {
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .public-navbar .navbar-collapse {
        min-width: 0;
    }

    .public-navbar .nav-public-group {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0 !important;
        z-index: 2;
    }

    .public-navbar .nav-public-box {
        white-space: nowrap;
    }

    .public-navbar .nav-social-group {
        position: relative;
        z-index: 3;
        margin-left: auto !important;
        flex-shrink: 0;
    }

    /* CEO/admin navbar: keep all admin actions inside the viewport */
    .ceo-navbar > .container-fluid {
        width: 100%;
        min-width: 0;
        padding-left: 20px !important;
        padding-right: 20px !important;
        gap: 12px;
    }

    .ceo-navbar .navbar-collapse {
        min-width: 0;
        flex-grow: 1;
    }

    .ceo-navbar .navbar-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: clamp(0px, .25vw, 4px);
        margin-left: auto !important;
        min-width: 0;
    }

    .ceo-navbar .navbar-nav .nav-item {
        flex: 0 1 auto;
        min-width: 0;
    }

    .ceo-navbar .navbar-nav .nav-link {
        white-space: nowrap;
        padding-left: clamp(5px, .65vw, 10px);
        padding-right: clamp(5px, .65vw, 10px);
        font-size: clamp(.78rem, .9vw, .95rem);
    }

    .ceo-navbar .dropdown-menu {
        z-index: 1040;
    }
}

/* Mobile and tablet: collapse navigation into a tidy vertical menu */
@media (max-width: 991.98px) {
    .public-navbar > .container,
    .ceo-navbar > .container-fluid {
        width: 100%;
        max-width: 100%;
    }

    .public-navbar .navbar-collapse,
    .ceo-navbar .navbar-collapse {
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        padding: 10px 0 14px;
    }

    .public-navbar .nav-public-group,
    .public-navbar .nav-social-group,
    .ceo-navbar .navbar-nav {
        position: static !important;
        transform: none !important;
        width: 100%;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .public-navbar .nav-public-group {
        margin-bottom: 8px !important;
    }

    .public-navbar .nav-public-box {
        width: 100%;
        white-space: normal;
    }

    .public-navbar .nav-social-group {
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 8px !important;
        gap: 8px;
    }

    .public-navbar .nav-social-group .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .ceo-navbar .navbar-nav .nav-item,
    .ceo-navbar .navbar-nav .nav-link {
        width: 100%;
    }

    .ceo-navbar .navbar-nav .nav-link {
        white-space: normal;
        padding: 10px 12px;
    }

    .ceo-navbar .dropdown-menu {
        width: 100%;
        max-width: 100%;
    }
}



/* CEO navbar readability: keep menu text above the decorative wave layers */
.ceo-navbar {
    isolation: isolate;
}

.ceo-navbar::before,
.ceo-navbar::after {
    z-index: 0 !important;
    pointer-events: none;
}

.ceo-navbar > .container-fluid,
.ceo-navbar .navbar-brand,
.ceo-navbar .navbar-collapse,
.ceo-navbar .navbar-toggler {
    position: relative;
    z-index: 2;
}

.ceo-navbar .navbar-nav .nav-link,
.ceo-navbar .navbar-nav .nav-link:focus,
.ceo-navbar .navbar-nav .nav-link:hover,
.ceo-navbar .navbar-nav .nav-link.active {
    position: relative;
    z-index: 3;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(70, 20, 0, 0.85);
    font-weight: 700;
}

.ceo-navbar .navbar-nav .nav-link.active {
    color: #b83b00 !important;
    text-shadow: none;
}

.ceo-navbar .navbar-nav .nav-link .badge,
.ceo-navbar .navbar-nav .badge {
    position: relative;
    z-index: 4;
}

.ceo-navbar .dropdown-menu {
    z-index: 1050 !important;
}


/* Active CEO navigation link: base.html uses nav-admin-active, not .active */
.ceo-navbar .navbar-nav .nav-link.nav-admin-active,
.ceo-navbar .navbar-nav .nav-item .nav-link.nav-admin-active {
    color: #e84b00 !important;
    text-shadow: none !important;
    background-color: #fff !important;
    border-radius: 999px;
}

.ceo-navbar .navbar-nav .nav-link.nav-admin-active i {
    color: inherit !important;
}

/* SKI Connect developer credit */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-credit {
    font-size: 13px;
    color: #b8b8b8;
    text-align: right;
}

.footer-credit-name {
    color: #f28c28;
    font-weight: 600;
}

@media (max-width: 576px) {
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-credit {
        text-align: center;
    }
}


/* =========================================
   SKI CONNECT GRADIENT FOOTER
========================================= */

.ski-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 40px;
    color: #fff;
    background: linear-gradient(
        110deg,
        #bd0019 0%,
        #f02c00 40%,
        #ff7900 70%,
        #ffd900 100%
    );
}

.ski-footer .ski-footer-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.3fr .85fr 1fr;
    gap: 36px;
    width: min(100% - 48px, 1620px);
    margin: auto;
    padding: 48px 0 40px;
}

.ski-footer .ski-footer-school,
.ski-footer .ski-footer-column {
    min-width: 0;
}

.ski-footer .ski-footer-column {
    padding-left: 36px;
    border-left: 1px solid rgba(255,255,255,.4);
}

.ski-footer .ski-footer-school-name {
    margin: 0 0 16px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 3.4vw, 54px);
    font-weight: 700;
    line-height: 1.05;
}

.ski-footer .ski-footer-school-name span {
    display: block;
    margin-top: 5px;
    font-size: clamp(19px, 2vw, 31px);
    line-height: 1.2;
}

.ski-footer .ski-footer-accent,
.ski-footer .ski-footer-heading-line {
    width: 62px;
    height: 4px;
    margin: 15px 0 20px;
    background: #ffe600;
}

.ski-footer .ski-footer-address {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ski-footer .ski-footer-address i {
    color: #ffe600;
    font-size: 24px;
}

.ski-footer .ski-footer-address a,
.ski-footer .ski-footer-description {
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
    text-decoration: none;
}

.ski-footer .ski-footer-description {
    margin: 8px 0 20px;
}

.ski-footer .ski-footer-column h3 {
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(24px, 2.1vw, 31px);
    font-weight: 700;
}

.ski-footer .ski-footer-heading-line {
    width: 58px;
    margin: 12px 0 17px;
}

.ski-footer .ski-footer-link {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0;
    margin-bottom: 12px;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .2s ease, transform .2s ease;
}

.ski-footer .ski-footer-link:hover {
    color: #fff3a3;
    transform: translateX(3px);
}

.ski-footer .ski-footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(190,0,15,.8);
    color: #fff;
    font-size: 23px;
}

.ski-footer .ski-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
}

.ski-footer .ski-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(90,0,0,.16);
    transition: transform .2s ease, filter .2s ease;
}

.ski-footer .ski-social:hover {
    color: #fff;
    transform: translateY(-4px);
    filter: brightness(1.12);
}

.ski-footer .ski-social.instagram {
    background: linear-gradient(45deg, #ffb900, #ff0069, #8b35ed);
}

.ski-footer .ski-social.facebook {
    background: #0866ff;
}

.ski-footer .ski-social.youtube {
    background: #ed0000;
}

.ski-footer .ski-social.share {
    background: #f47700;
}

/* Bottom copyright and credit */
.ski-footer .ski-footer-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    min-height: 76px;
    padding: 20px 24px;
    border-top: 2px solid #ffe600;
    text-align: center;
}

.ski-footer .ski-footer-bottom p {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.6;
}

.ski-footer .ski-footer-bottom strong {
    color: #ffe600;
    font-weight: 700;
}

.ski-footer .ski-footer-divider {
    width: 2px;
    height: 25px;
    background: rgba(255,255,255,.85);
}

/* Decorative curved bands */
.ski-footer .ski-footer-wave {
    position: absolute;
    z-index: 1;
    right: -3%;
    bottom: 52px;
    left: -3%;
    height: 80px;
    pointer-events: none;
}

.ski-footer .ski-footer-wave-one {
    background: #ffdf00;
    clip-path: polygon(
        0 20%, 12% 85%, 28% 100%, 65% 100%,
        82% 90%, 100% 5%, 100% 35%, 83% 100%,
        12% 100%, 0 48%
    );
}

.ski-footer .ski-footer-wave-two {
    bottom: 45px;
    background: rgba(210,0,20,.6);
    clip-path: polygon(
        0 0, 15% 85%, 32% 100%, 68% 100%,
        86% 90%, 100% 0, 100% 25%, 86% 100%,
        15% 100%, 0 30%
    );
}

/* Tablet */
@media (max-width: 900px) {
    .ski-footer .ski-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        width: calc(100% - 40px);
    }

    .ski-footer .ski-footer-school {
        grid-column: 1 / -1;
    }

    .ski-footer .ski-footer-column {
        padding-left: 22px;
    }

    .ski-footer .ski-footer-column:nth-child(2) {
        padding-left: 0;
        border-left: 0;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .ski-footer .ski-footer-main {
        grid-template-columns: 1fr;
        gap: 24px;
        width: calc(100% - 36px);
        padding: 32px 0 28px;
    }

    .ski-footer .ski-footer-school {
        grid-column: auto;
    }

    .ski-footer .ski-footer-school-name {
        font-size: 36px;
    }

    .ski-footer .ski-footer-school-name span {
        font-size: 21px;
    }

    .ski-footer .ski-footer-column {
        padding: 22px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.4);
    }

    .ski-footer .ski-footer-column h3 {
        font-size: 25px;
    }

    .ski-footer .ski-footer-link {
        font-size: 15px;
        gap: 12px;
    }

    .ski-footer .ski-footer-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .ski-footer .ski-footer-socials {
        gap: 12px;
    }

    .ski-footer .ski-social {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        font-size: 21px;
    }

    .ski-footer .ski-footer-bottom {
        flex-direction: column;
        gap: 8px;
        padding: 18px 18px 22px;
    }

    .ski-footer .ski-footer-divider {
        width: 65px;
        height: 1px;
    }

    .ski-footer .ski-footer-bottom p {
        font-size: 12px;
    }

    .ski-footer .ski-footer-wave {
        bottom: 78px;
        height: 45px;
    }

    .ski-footer .ski-footer-wave-two {
        bottom: 72px;
    }
}

/* =========================================
   SKI CONNECT FOOTER — FINAL POLISH
========================================= */

/* Quick Links and Contact: black text on hover */
.ski-footer .ski-footer-link:hover,
.ski-footer .ski-footer-link:focus-visible,
.ski-footer .ski-footer-address a:hover {
    color: #111111 !important;
    text-decoration: none;
}

/* Keep icons clearly visible during hover */
.ski-footer .ski-footer-link:hover .ski-footer-icon {
    color: #ffffff;
    background-color: #a90016;
}

/* Professional contact typography */
.ski-footer .ski-footer-contact .ski-footer-link {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

/* Phone number: clean, readable formatting */
.ski-footer .ski-footer-contact a[href^="tel:"] {
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.35px;
    white-space: nowrap;
}

/* Developer name in black */
.ski-footer .ski-footer-bottom strong {
    color: #111111 !important;
    font-weight: 700;
}

/* Mobile readability */
@media (max-width: 576px) {
    .ski-footer .ski-footer-contact a[href^="tel:"] {
        font-size: 16px;
        letter-spacing: 0.2px;
    }

    .ski-footer .ski-footer-bottom strong {
        font-size: 13px;
    }
}

/* SKI Connect brand heading */
.ski-footer .ski-footer-school-name {
    margin: 0 0 8px;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 3.4vw, 54px);
    font-weight: 700;
    line-height: 1.1;
}

.ski-footer .ski-brand-highlight {
    display: inline;
    color: #ffe000;
    font-size: inherit;
}

/* School name below the brand */
.ski-footer .ski-footer-school-subtitle {
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(19px, 2vw, 31px);
    font-weight: 700;
    line-height: 1.25;
}

/* Clickable school address */
.ski-footer .ski-footer-address {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 8px;
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .2s ease;
}

.ski-footer .ski-footer-address-icon {
    display: inline-flex;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 180, 0, .2);
    color: #ffe000;
    font-size: 27px;
}

/* Black hover for address and footer links */
.ski-footer .ski-footer-address:hover,
.ski-footer .ski-footer-address:focus-visible,
.ski-footer .ski-footer-link:hover,
.ski-footer .ski-footer-link:focus-visible {
    color: #111 !important;
    text-decoration: none;
}

/* Keep footer icons readable on hover */
.ski-footer .ski-footer-link:hover .ski-footer-icon {
    color: #fff;
    background: #a90016;
}

/* Developer name in black */
.ski-footer .ski-footer-bottom strong {
    color: #111 !important;
}

/* Mobile layout */
@media (max-width: 576px) {
    .ski-footer .ski-footer-school-name {
        font-size: 36px;
    }

    .ski-footer .ski-footer-school-subtitle {
        font-size: 21px;
    }

    .ski-footer .ski-footer-address {
        align-items: flex-start;
        font-size: 15px;
    }

    .ski-footer .ski-footer-address-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 23px;
    }
}

/* Keep Sri Krish Connect on one line */
.ski-footer .ski-footer-school-name {
    white-space: nowrap;
    font-size: clamp(30px, 3.2vw, 54px);
    line-height: 1.1;
    margin-bottom: 8px;
}

.ski-footer .ski-brand-highlight {
    display: inline;
    color: #ffe000;
    white-space: nowrap;
}

/* School name in white, positioned with the address section */
.ski-footer .ski-footer-school-subtitle {
    color: #ffffff !important;
    font-size: clamp(17px, 1.7vw, 25px);
    line-height: 1.4;
    margin: 0 0 12px;
}

/* Address remains clickable and white */
.ski-footer .ski-footer-address {
    color: #ffffff !important;
    text-decoration: none;
}

/* Black hover only */
.ski-footer .ski-footer-address:hover,
.ski-footer .ski-footer-address:focus-visible {
    color: #111111 !important;
}

@media (max-width: 576px) {
    .ski-footer .ski-footer-school-name {
        font-size: clamp(27px, 7vw, 36px);
    }

    .ski-footer .ski-footer-school-subtitle {
        font-size: 17px;
    }
}

/* FIX: Keep "Sri Krish Connect" on the same line */
.ski-footer .ski-footer-school {
    min-width: 0;
}

.ski-footer .ski-footer-school-name {
    display: block !important;
    width: 100%;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: clamp(27px, 3.1vw, 54px) !important;
    line-height: 1.15;
    margin: 0 0 8px;
}

.ski-footer .ski-footer-school-name .ski-brand-highlight {
    display: inline !important;
    white-space: nowrap !important;
    font-size: inherit !important;
    color: #ffe000;
}

/* Keep the school name white */
.ski-footer .ski-footer-school-subtitle {
    color: #ffffff !important;
}

/* Give the school column more room on desktop */
@media (min-width: 901px) {
    .ski-footer .ski-footer-main {
        grid-template-columns: 1.4fr 0.8fr 1fr !important;
    }
}

/* Fit the heading on smaller screens */
@media (max-width: 576px) {
    .ski-footer .ski-footer-school-name {
        font-size: clamp(25px, 7vw, 36px) !important;
    }
}

/* School name and clickable address together */
.ski-footer .ski-footer-school-address {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0;
    color: #ffffff;
    font-family: Georgia, "Times New Roman", serif;
    text-decoration: none;
}

.ski-footer .ski-footer-school-address-name {
    color: #ffffff;
    font-size: clamp(17px, 1.7vw, 25px);
    font-weight: 700;
    line-height: 1.4;
}

.ski-footer .ski-footer-school-address-location {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
}

.ski-footer .ski-footer-school-address-location i {
    color: #ffe000;
    font-size: 24px;
    flex-shrink: 0;
}

/* Black hover for both school name and address */
.ski-footer .ski-footer-school-address:hover,
.ski-footer .ski-footer-school-address:hover span {
    color: #111111 !important;
}

.ski-footer .ski-footer-school-address:hover i {
    color: #111111 !important;
}

@media (max-width: 576px) {
    .ski-footer .ski-footer-school-address-name {
        font-size: 18px;
    }

    .ski-footer .ski-footer-school-address-location {
        font-size: 14px;
    }
}


/* Make only Pavithra N white */
.ski-footer .ski-footer-bottom strong {
    color: #ffffff !important;
}

/* =========================================
   FIX CEO MOBILE MENU — READABLE TEXT
========================================= */

@media (max-width: 991.98px) {

    /* White dropdown panel */
    .ceo-navbar .navbar-collapse {
        background: #ffffff !important;
        border-radius: 22px;
        margin: 12px 0;
        padding: 16px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    /* Make all CEO menu links dark */
    .ceo-navbar .navbar-collapse .nav-link,
    .ceo-navbar .navbar-collapse .dropdown-toggle,
    .ceo-navbar .navbar-collapse a,
    .ceo-navbar .navbar-collapse button {
        color: #333333 !important;
        text-shadow: none !important;
        font-weight: 600;
    }

    /* Icons should also be dark */
    .ceo-navbar .navbar-collapse .nav-link i,
    .ceo-navbar .navbar-collapse a i,
    .ceo-navbar .navbar-collapse button i {
        color: #333333 !important;
        text-shadow: none !important;
    }

    /* Hover and active links */
    .ceo-navbar .navbar-collapse .nav-link:hover,
    .ceo-navbar .navbar-collapse .nav-link:focus,
    .ceo-navbar .navbar-collapse .nav-link.active {
        color: #e65100 !important;
        background: #fff3e0;
        border-radius: 10px;
    }

    /* Alerts badge remains visible */
    .ceo-navbar .navbar-collapse .badge {
        color: #ffffff !important;
        background: #dc3545 !important;
        text-shadow: none !important;
    }

    /* Dropdown items */
    .ceo-navbar .navbar-collapse .dropdown-menu {
        background: #ffffff !important;
    }

    .ceo-navbar .navbar-collapse .dropdown-item {
        color: #333333 !important;
        text-shadow: none !important;
    }

    .ceo-navbar .navbar-collapse .dropdown-item:hover {
        color: #e65100 !important;
        background: #fff3e0 !important;
    }
}

/* Final mobile copyright and wave alignment */
@media (max-width: 576px) {

    .ski-footer .ski-footer-bottom {
        position: relative;
        z-index: 5;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 24px 20px 28px;
        border-top: 2px solid #ffe000;
        text-align: center;
    }

    /* Keep the copyright on one line where possible */
    .ski-footer .ski-footer-bottom p:first-child {
        max-width: 100%;
        font-size: 12px;
        line-height: 1.7;
        text-align: center;
        text-wrap: balance;
    }

    .ski-footer .ski-footer-bottom p:last-child {
        font-size: 13px;
        line-height: 1.7;
        text-align: center;
    }

    /* Move waves away from copyright text */
    .ski-footer .ski-footer-wave {
        z-index: 0 !important;
        height: 20px !important;
        bottom: 125px !important;
        pointer-events: none;
    }

    .ski-footer .ski-footer-wave-one {
        bottom: 120px !important;
    }

    .ski-footer .ski-footer-wave-two {
        bottom: 115px !important;
    }
}