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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #F2F2F2;
    color: #174D38;
}


/* =====================================================
   SECTION 1 : HERO SLIDESHOW
   YOUR ORIGINAL SLIDESHOW
===================================================== */

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #174D38;
}


/* SLIDES */

.slides {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;

    transition:
        opacity 1.2s ease,
        transform 6s ease;

    transform: scale(1.05);
}

.slide.active {
    opacity: 1;
    transform: scale(1);
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* DARK OVERLAY */

.hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background:
        linear-gradient(
            90deg,
            rgba(23, 77, 56, 0.88),
            rgba(23, 77, 56, 0.35),
            rgba(77, 23, 23, 0.35)
        );
}


/* HERO CONTENT */

.hero-content {
    position: absolute;
    top: 50%;
    left: 9%;

    transform: translateY(-50%);

    max-width: 650px;

    color: #F2F2F2;
}

.small-title {
    font-size: 17px;
    letter-spacing: 5px;
    font-weight: bold;
    margin-bottom: 20px;
}

.hero-content h1 {
    font-size: clamp(45px, 6vw, 85px);
    line-height: 1.05;
    margin-bottom: 25px;
    font-weight: 700;
}

.hero-description {
    font-size: 19px;
    line-height: 1.6;
    max-width: 520px;
    color: #F2F2F2;
    margin-bottom: 35px;
}


/* LOGIN BUTTON */

.scroll-button {
    display: inline-block;

    padding: 15px 40px;

    background: #4D1717;

    color: #F2F2F2;

    text-decoration: none;

    font-weight: bold;

    letter-spacing: 2px;

    border: 2px solid #F2F2F2;

    transition: 0.3s;
}

.scroll-button:hover {
    background: #174D38;
    transform: translateY(-3px);
}


/* =====================================================
   SLIDER DOTS
===================================================== */

.slider-dots {
    position: absolute;

    bottom: 80px;
    right: 8%;

    display: flex;
    gap: 12px;
}

.dot {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: #CBCBCB;

    cursor: pointer;

    transition: 0.3s;
}

.dot.active {
    background: #4D1717;
    transform: scale(1.4);
}


/* =====================================================
   SCROLL INDICATOR
===================================================== */

.scroll-indicator {
    position: absolute;

    bottom: 30px;
    left: 50%;

    transform: translateX(-50%);

    text-align: center;

    color: #F2F2F2;
}

.scroll-indicator span {
    display: block;

    width: 2px;
    height: 35px;

    background: #F2F2F2;

    margin: auto;

    animation: scrollMove 1.5s infinite;
}

.scroll-indicator p {
    font-size: 10px;
    letter-spacing: 3px;
    margin-top: 8px;
}

@keyframes scrollMove {

    0% {
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(12px);
        opacity: 0;
    }
}


/* =====================================================
   SECTION 2 : LOGIN / REGISTER
===================================================== */

.login-section {

    min-height: 100vh;

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

    padding: 80px 5%;

    background: #CBCBCB;

}


/* =====================================================
   MAIN CONTAINER
===================================================== */

.login-container {

    position: relative;

    width: min(1100px, 100%);

    height: 650px;

    overflow: hidden;

    background: #F2F2F2;

    border: 2px solid #4D1717;

    box-shadow:
        0 0 15px rgba(77, 23, 23, .9),
        0 0 45px rgba(77, 23, 23, .35);

}

/* =====================================================
   FORGOT PASSWORD BOX
===================================================== */

.forgot-box {
    display: none;
}

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

.login-form-side {

    position: absolute;

    top: 0;
    left: 0;

    width: 50%;
    height: 100%;

    padding: 45px 65px;

    background: #F2F2F2;

    z-index: 5;

    overflow-y: auto;

    display: flex;
    align-items: center;

    transition:
        transform .9s cubic-bezier(.77, 0, .18, 1);

}


/*
   LOGIN:
   form side stays on LEFT

   REGISTER:
   form side moves to RIGHT
*/

.login-container.register-mode
.login-form-side {

    transform: translateX(100%);

}


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

.form-box {

    position: absolute;

    top: 50%;
    left: 65px;
    right: 65px;

    width: auto;

    max-width: 450px;

    margin: 0 auto;

    transform:
        translateY(-50%)
        translateX(0);

    opacity: 1;

    visibility: visible;

    transition:
        opacity .45s ease,
        transform .65s cubic-bezier(.22, 1, .36, 1),
        visibility .45s;

}


/* LOGIN DEFAULT */

.login-box {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);

}


/* REGISTER DEFAULT */

.register-box {

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-50%)
        translateX(50px);

}


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

.login-container.register-mode
.login-box {

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-50%)
        translateX(-50px);

}


.login-container.register-mode
.register-box {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%)
        translateX(0);

}


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

.logo-circle {

    width: 60px;
    height: 60px;

    border-radius: 50%;

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

    background: #174D38;

    color: #F2F2F2;

    font-size: 18px;
    font-weight: 800;

    margin-bottom: 17px;

    box-shadow:
        0 0 15px rgba(23, 77, 56, .5),
        0 0 35px rgba(23, 77, 56, .2);

    transition:
        transform .6s cubic-bezier(.22, 1, .36, 1);

}


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

.login-small-title {

    font-size: 11px;

    letter-spacing: 4px;

    color: #4D1717;

    font-weight: 700;

    margin-bottom: 12px;

}


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

.form-box h2 {

    font-size: 48px;

    line-height: .95;

    text-transform: uppercase;

    color: #174D38;

    margin-bottom: 18px;

}


.form-box h2 span {

    color: #4D1717;

}


/* =====================================================
   DESCRIPTION
===================================================== */

.login-description {

    color: #174D38;

    font-size: 13px;

    line-height: 1.6;

    max-width: 420px;

    margin-bottom: 28px;

}


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

.input-group {

    margin-bottom: 17px;

}


.input-group label {

    display: block;

    margin-bottom: 7px;

    color: #4D1717;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;

}


.input-group input {

    width: 100%;

    padding: 12px 5px;

    border: none;

    border-bottom: 1px solid #CBCBCB;

    outline: none;

    background: transparent;

    color: #174D38;

    font-size: 14px;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;

}


.input-group input:focus {

    border-bottom:
        2px solid #174D38;

    box-shadow:
        0 5px 15px rgba(23, 77, 56, .08);

}


.input-group input::placeholder {

    color: #CBCBCB;

}


/* =====================================================
   OPTIONS
===================================================== */

.options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 18px 0 24px;

    font-size: 11px;

}


.remember {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #174D38;

}


.remember input {

    accent-color: #174D38;

}


.options a {

    color: #4D1717;

    text-decoration: none;

    font-weight: 700;

}


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

.form-box button {

    position: relative;

    width: 100%;

    padding: 15px;

    border: none;

    border-radius: 30px;

    background: #174D38;

    color: #F2F2F2;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    cursor: pointer;

    overflow: hidden;

    box-shadow:
        0 0 15px rgba(23, 77, 56, .35);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.form-box button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(242,242,242,.25),
            transparent
        );

    transform: skewX(-25deg);

    transition: left .7s ease;

}


.form-box button:hover::before {

    left: 140%;

}


.form-box button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 8px 30px rgba(23, 77, 56, .55);

}


/* =====================================================
   REGISTER TEXT
===================================================== */

.register {

    text-align: center;

    color: #174D38;

    font-size: 11px;

    margin-top: 18px;

}


.register a {

    color: #4D1717;

    font-weight: 700;

    text-decoration: none;

    margin-left: 5px;

}


/* =====================================================
   PURPLE WELCOME PANEL
===================================================== */

.welcome-panel {

    position: absolute;

    top: 0;
    right: 0;

    width: 50%;
    height: 100%;

    z-index: 20;

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

    overflow: hidden;

    background: #174D38;

    transition:
        transform .9s cubic-bezier(.77, 0, .18, 1);

}


/*
   GREEN PANEL MOVES
   RIGHT -> LEFT
*/

.login-container.register-mode
.welcome-panel {

    transform: translateX(-100%);

}





/* GREEN LIGHT */

.welcome-panel::after {

    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(242,242,242,.12),
            transparent 65%
        );

    pointer-events: none;

    animation:
        welcomeGlow 5s ease-in-out infinite alternate;

}


@keyframes welcomeGlow {

    from {
        transform:
            translate(-50%, -50%)
            scale(.9);

        opacity: .5;
    }

    to {
        transform:
            translate(-50%, -50%)
            scale(1.15);

        opacity: .9;
    }

}


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

.welcome-content {

    position: absolute;

    z-index: 10;

    width: 70%;

    text-align: center;

    color: #F2F2F2;

    transition:
        opacity .45s ease,
        transform .65s cubic-bezier(.22, 1, .36, 1);

}


/* LOGIN CONTENT */

.welcome-login {

    opacity: 1;

    transform:
        translateX(0);

}


/* REGISTER CONTENT */

.welcome-register {

    opacity: 0;

    transform:
        translateX(60px);

    pointer-events: none;

}


/* =====================================================
   WELCOME REGISTER STATE
===================================================== */

.login-container.register-mode
.welcome-login {

    opacity: 0;

    transform:
        translateX(-60px);

    pointer-events: none;

}


.login-container.register-mode
.welcome-register {

    opacity: 1;

    transform:
        translateX(0);

    pointer-events: auto;

}


/* =====================================================
   WELCOME TEXT
===================================================== */

.welcome-label {

    font-size: 12px;

    letter-spacing: 5px;

    font-weight: 800;

    margin-bottom: 12px;

}


.welcome-content h2 {

    font-size: 58px;

    line-height: 1;

    margin-bottom: 22px;

}


.welcome-content span {

    display: block;

    width: 65px;
    height: 2px;

    background: #F2F2F2;

    margin: 0 auto 22px;

}


.welcome-description {

    max-width: 290px;

    margin: auto;

    color: #F2F2F2;

    font-size: 13px;

    line-height: 1.7;

}


/* =====================================================
   GREEN PANEL BUTTON
===================================================== */

.panel-button {

    margin-top: 28px;

    padding: 12px 28px;

    border: 1px solid #F2F2F2;

    border-radius: 30px;

    background: transparent;

    color: #F2F2F2;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition:
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


.panel-button:hover {

    background: rgba(242,242,242,.15);

    transform: translateY(-3px);

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

}


/* =====================================================
   REGISTER FORM SMALLER SPACING
===================================================== */

.register-box .input-group {

    margin-bottom: 10px;

}


.register-box .login-description {

    margin-bottom: 16px;

}


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

@media (max-width: 900px) {

    .login-container {

        height: 720px;

    }

    .login-form-side {

        padding: 40px;

    }

    .form-box {

        left: 40px;
        right: 40px;

    }

    .welcome-content h2 {

        font-size: 45px;

    }

}


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

@media (max-width: 700px) {

    .login-section {

        padding: 30px 15px;

    }


    .login-container {

        height: auto;

        min-height: 900px;

    }


    /*
       Disable desktop swapping on mobile.
    */

    .login-form-side {

        position: relative;

        width: 100%;

        height: 650px;

        padding: 40px 25px;

        transform: none !important;

    }


    .welcome-panel {

        position: relative;

        width: 100%;

        height: 250px;

        transform: none !important;

    }


    .welcome-panel::before {

        display: none;

    }


    .welcome-content {

        width: 85%;

    }


    .welcome-content h2 {

        font-size: 40px;

    }


    .form-box {

        position: absolute;

        left: 25px;
        right: 25px;

        max-width: none;

    }


    /*
       On mobile only one form is visible.
    */

    .register-box {

        opacity: 0;
        visibility: hidden;

    }


    .login-container.register-mode
    .login-box {

        opacity: 0;
        visibility: hidden;

    }


    .login-container.register-mode
    .register-box {

        opacity: 1;
        visibility: visible;

    }


    .login-container.register-mode
    .welcome-login {

        display: none;

    }


    .login-container.register-mode
    .welcome-register {

        opacity: 1;

    }


    .options {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

}