/* =========================================
   SRTMUN YOUTH FESTIVAL
   PROFESSIONAL LOGIN UI
========================================= */

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

:root {

    --primary: #102a43;
    --primary-dark: #071c2c;

    --secondary: #f58220;
    --secondary-dark: #d96b0b;

    --text: #1f2937;
    --muted: #6b7280;

    --border: #d9dee5;

    --background: #f5f7fa;

    --white: #ffffff;

}


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

body {

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background: var(--background);

    color: var(--text);

}


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

.login-page {

    min-height: 100vh;

    display: flex;

    background:

        radial-gradient(
            circle at top left,
            rgba(245, 130, 32, 0.08),
            transparent 30%
        ),

        #f5f7fa;

}


/* =========================================
   LEFT UNIVERSITY PANEL
========================================= */

.university-panel {

    width: 52%;

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:

        linear-gradient(
            145deg,
            #071c2c 0%,
            #102a43 55%,
            #163c5a 100%
        );

}


/* decorative circles */

.university-panel::before {

    content: "";

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

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

    top: -220px;

    left: -180px;

}

.university-panel::after {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    border-radius: 50%;

    border: 1px solid
        rgba(245,130,32,0.15);

    bottom: -300px;

    right: -220px;

}


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

.university-content {

    width: 80%;

    max-width: 620px;

    position: relative;

    z-index: 2;

    color: white;

}


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

.logo-wrapper {

    width: 125px;

    height: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

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

    border-radius: 50%;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,0.25);

}

.university-logo {

    width: 105px;

    height: 105px;

    object-fit: contain;

}


/* =========================================
   UNIVERSITY NAME
========================================= */

.marathi-name {

    font-size: 25px;

    font-weight: 700;

    line-height: 1.5;

    letter-spacing: 0.3px;

}

.marathi-city {

    font-size: 21px;

    font-weight: 600;

    margin-top: 2px;

}

.english-name {

    margin-top: 14px;

    font-size: 28px;

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: 0.2px;

}

.location {

    margin-top: 8px;

    font-size: 15px;

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

}


/* =========================================
   SEPARATOR
========================================= */

.separator {

    width: 70px;

    height: 4px;

    margin: 30px 0 25px;

    border-radius: 10px;

    background: var(--secondary);

}


/* =========================================
   YOUTH FESTIVAL
========================================= */

.festival-title {

    font-size: 16px;

    font-weight: 700;

    letter-spacing: 4px;

    color: #ffad62;

}

.festival-year {

    font-size: 48px;

    line-height: 1;

    margin-top: 5px;

    font-weight: 800;

    letter-spacing: 2px;

}

.festival-description {

    margin-top: 12px;

    font-size: 18px;

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

}


/* =========================================
   FEATURES
========================================= */

.portal-features {

    margin-top: 35px;

    display: flex;

    flex-direction: column;

    gap: 13px;

}

.feature-item {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 14px;

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

}

.feature-item i {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 8px;

    color: #ff9a48;

    background:
        rgba(245,130,32,0.12);

}


/* =========================================
   RIGHT LOGIN SECTION
========================================= */

.login-section {

    width: 48%;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    background: #f8fafc;

}


/* =========================================
   LOGIN CONTAINER
========================================= */

.login-container {

    width: 100%;

    max-width: 470px;

}


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

.mobile-logo {

    display: none;

    text-align: center;

    margin-bottom: 20px;

}

.mobile-logo img {

    width: 85px;

    height: 85px;

    object-fit: contain;

}


/* =========================================
   LOGIN HEADING
========================================= */

.login-heading {

    margin-bottom: 30px;

}

.welcome-text {

    color: var(--secondary);

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1.5px;

}

.login-heading h1 {

    margin-top: 7px;

    margin-bottom: 5px;

    font-size: 38px;

    font-weight: 800;

    color: var(--primary);

}

.login-heading p {

    margin: 0;

    color: var(--muted);

    font-size: 15px;

}


/* =========================================
   ERROR
========================================= */

.login-error {

    border: none;

    border-left: 4px solid #dc3545;

    border-radius: 8px;

    font-size: 14px;

    display: flex;

    gap: 10px;

    align-items: center;

}


/* =========================================
   FORM
========================================= */

.form-group {

    margin-bottom: 22px;

}

.form-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 14px;

    font-weight: 600;

    color: #263746;

}

.form-group label i {

    color: var(--secondary);

    margin-right: 5px;

}


/* =========================================
   INPUT
========================================= */

.input-wrapper {

    position: relative;

}

.input-wrapper input {

    width: 100%;

    height: 54px;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding:
        0 48px;

    font-size: 15px;

    color: #1f2937;

    background: white;

    outline: none;

    transition: all 0.2s ease;

}

.input-wrapper input::placeholder {

    color: #9aa4af;

}

.input-wrapper input:focus {

    border-color: var(--secondary);

    box-shadow:
        0 0 0 4px
        rgba(245,130,32,0.10);

}


/* =========================================
   INPUT ICON
========================================= */

.input-icon {

    position: absolute;

    left: 17px;

    top: 50%;

    transform: translateY(-50%);

    color: #8a96a3;

    font-size: 17px;

    z-index: 2;

}


/* =========================================
   PASSWORD BUTTON
========================================= */

.password-toggle {

    position: absolute;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    border: none;

    background: transparent;

    color: #7b8794;

    font-size: 18px;

    cursor: pointer;

}

.password-toggle:hover {

    color: var(--secondary);

}


/* =========================================
   LOGIN BUTTON
========================================= */

.login-button {

    width: 100%;

    height: 54px;

    border: none;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color: white;

    background:

        linear-gradient(
            90deg,
            #102a43,
            #16476b
        );

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

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

}

.login-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(16,42,67,0.20);

}

.login-button i {

    font-size: 17px;

    transition: transform 0.2s ease;

}

.login-button:hover i {

    transform: translateX(4px);

}


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

.security-note {

    margin-top: 25px;

    padding: 15px;

    display: flex;

    align-items: center;

    gap: 13px;

    border: 1px solid #e2e7ec;

    border-radius: 10px;

    background: white;

}

.security-note > i {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: #eef6ff;

    color: #1769aa;

    font-size: 18px;

}

.security-note strong {

    display: block;

    font-size: 13px;

    color: #263746;

}

.security-note small {

    display: block;

    margin-top: 2px;

    color: #8994a0;

    font-size: 11px;

}


/* =========================================
   HELP
========================================= */

.login-help {

    margin-top: 22px;

    text-align: center;

    font-size: 12px;

    color: #8a949e;

}

.contact-text {

    display: block;

    margin-top: 3px;

    color: var(--primary);

    font-weight: 600;

}


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

.login-footer {

    margin-top: 28px;

    padding-top: 18px;

    border-top: 1px solid #e1e5ea;

    text-align: center;

    color: #9aa3ad;

    font-size: 10px;

    line-height: 1.5;

}


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

@media (max-width: 1000px) {

    .login-page {

        flex-direction: column;

    }

    .university-panel {

        width: 100%;

        min-height: auto;

        padding: 60px 30px;

    }

    .university-content {

        text-align: center;

    }

    .logo-wrapper {

        margin-left: auto;

        margin-right: auto;

    }

    .separator {

        margin-left: auto;

        margin-right: auto;

    }

    .portal-features {

        align-items: center;

    }

    .login-section {

        width: 100%;

        min-height: auto;

    }

}


@media (max-width: 600px) {

    .university-panel {

        padding: 40px 20px;

    }

    .university-logo {

        width: 85px;

        height: 85px;

    }

    .logo-wrapper {

        width: 105px;

        height: 105px;

    }

    .marathi-name {

        font-size: 19px;

    }

    .marathi-city {

        font-size: 17px;

    }

    .english-name {

        font-size: 21px;

    }

    .festival-year {

        font-size: 38px;

    }

    .festival-description {

        font-size: 15px;

    }

    .login-section {

        padding: 30px 20px;

    }

    .login-heading h1 {

        font-size: 32px;

    }

}


@media (max-width: 480px) {

    .university-panel {

        display: none;

    }

    .mobile-logo {

        display: block;

    }

    .login-section {

        min-height: 100vh;

        background: #f8fafc;

    }

}

/* =========================================================
   SRTMUN - SUBTLE PREMIUM HOVER & LOGO ANIMATIONS
   Add this below your existing CSS
========================================================= */


/* =========================================================
   1. UNIVERSITY LOGO - SOFT FLOATING ANIMATION
========================================================= */

.logo-wrapper {

    position: relative;

    animation:
        srtmunLogoFloat 4s ease-in-out infinite;

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

}


/* Soft orange glow behind logo */

.logo-wrapper::before {

    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    background:
        rgba(245, 130, 32, 0.16);

    filter: blur(20px);

    z-index: -1;

    opacity: 0.65;

    animation:
        srtmunLogoGlow 3s ease-in-out infinite;

}


/* Logo itself */

.university-logo {

    transition:
        transform 0.5s ease,
        filter 0.5s ease;

}


/* Logo hover */

.logo-wrapper:hover {

    animation-play-state: paused;

    transform:
        translateY(-6px)
        scale(1.04);

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

        0 0 25px
        rgba(245, 130, 32, 0.20);

}


.logo-wrapper:hover .university-logo {

    transform:
        scale(1.07)
        rotate(2deg);

    filter:
        drop-shadow(
            0 5px 8px
            rgba(0, 0, 0, 0.20)
        );

}


/* Floating animation */

@keyframes srtmunLogoFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}


/* Glow animation */

@keyframes srtmunLogoGlow {

    0%,
    100% {

        transform: scale(0.85);

        opacity: 0.45;

    }

    50% {

        transform: scale(1.15);

        opacity: 0.75;

    }

}


/* =========================================================
   2. MARATHI UNIVERSITY NAME
========================================================= */

.marathi-name {

    cursor: default;

    position: relative;

    display: inline-block;

    transition:
        color 0.35s ease,
        transform 0.35s ease,
        text-shadow 0.35s ease;

}


/* Small orange line */

.marathi-name::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -6px;

    width: 0;

    height: 2px;

    border-radius: 10px;

    background:
        var(--secondary);

    transition:
        width 0.4s ease;

}


/* Hover */

.marathi-name:hover {

    color:
        #ffad62;

    transform:
        translateY(-3px);

    text-shadow:
        0 5px 18px
        rgba(245, 130, 32, 0.25);

}


.marathi-name:hover::after {

    width: 100%;

}


/* =========================================================
   3. MARATHI CITY - SMALL HOVER EFFECT
========================================================= */

.marathi-city {

    cursor: default;

    display: inline-block;

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

}


.marathi-city:hover {

    color:
        #ffad62;

    transform:
        translateX(5px);

}


/* =========================================================
   4. ENGLISH UNIVERSITY NAME
========================================================= */

.english-name {

    cursor: default;

    position: relative;

    display: inline-block;

    transition:
        color 0.35s ease,
        transform 0.35s ease,
        letter-spacing 0.35s ease,
        text-shadow 0.35s ease;

}


/* Elegant orange underline */

.english-name::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--secondary),
            #ffb56f
        );

    transition:
        width 0.45s ease;

}


/* Hover effect */

.english-name:hover {

    color:
        #ffffff;

    transform:
        translateY(-3px);

    letter-spacing:
        0.5px;

    text-shadow:
        0 5px 20px
        rgba(255,255,255,0.16);

}


.english-name:hover::after {

    width: 100%;

}


/* =========================================================
   5. LOCATION HOVER
========================================================= */

.location {

    cursor: default;

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

}


.location:hover {

    color:
        #ffffff;

    transform:
        translateX(4px);

}


/* =========================================================
   6. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .logo-wrapper,
    .logo-wrapper::before {

        animation: none;

    }

    .marathi-name,
    .marathi-city,
    .english-name,
    .location {

        transition: none;

    }

}