:root {
    /* colors */
    --eerie-black: hsl(0, 0%, 13%);
    --white: #ffffff;
    --cultured: #ebebeb;
    --gray: #A2A2A2;
    --silver-lines: #B9B9B9;
    --lovo-trans-blue: #0a203e;
    --lovo-dark-blue: #031E5E;
    --lovo-light-blue: #072B9D ;
    --lovo-background-light: #072144;
    --lovo-background-dark: #000000;


    /* typography */
    --fs-1: 1.563rem;
    --fs-2: 1.375rem;
    --fs-3: 1.25rem;
    --fs-4: 1.125rem;
    --fs-5: 1rem;
    --fs-6: 0.938rem;
    --fs-7: 0.875rem;
    --fs-8: 0.813rem;
    --fs-9: 0.75rem;
    --fs-10: 0.688rem;
    --fs-11: 0.625rem;

    --weight-300: 300;
    --weight-400: 400;
    --weight-500: 500;
    --weight-600: 600;
    --weight-700: 700;


    /* border-radius */
    --border-radius-lg: 15px;
    --border-radius-md: 10px;
    --border-radius-sm: 5px;


    /* transition */
    --transition-timing: 0.2s ease;    

}


* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

body {
    font-family: sans-serif;
    background: linear-gradient(var(--lovo-background-light), var(--lovo-background-dark));
    /* display: flex; */
    height: 100%;
    display: block;
    min-height: 100vh;
}

header {
    height: 7vh;
    width: 100%;
}

.navbar {
    position: absolute;
    padding: 5px;
    /* padding-left: 80px; */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    background: var(--lovo-trans-blue);
    backdrop-filter: blur(6px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    z-index: 100;
}

.navbar a {
    color: var(--cultured);
    font-size: var(--fs-6);
}

.navbar span {
    font-size: var(--fs-11);
    position: absolute;
    top: 5px;
    right: -3px;
    background: red;
    border-radius: var(--border-radius-sm);
    padding: 1px 2px;
    font-style: italic;
    box-shadow: 0 0 5px rgb(255, 69, 69);
    color: white;
}

.navbar a img {
    margin-top: 3px;
    margin-right: 30px;
}

.navbar .nav-links {
    display: flex;
    align-items: center;
}

.navbar .nav-links ul li {
    position: relative;
    float: left;
    margin: 0 20px;
}

.navbar .nav-links ul li a{
    display: block;
    padding: 15px;
    border-radius: var(--border-radius-sm);
}

.navbar .nav-links a:hover {
    background: var(--cultured);
    color: var(--lovo-dark-blue);
}

.nav-links ul li ul {
    position: absolute;
    left: 0;
    width: 175px;
    background: var(--lovo-trans-blue);
    border-radius: var(--border-radius-sm);
    /* z-index:99; */
    display: none;    
}

.nav-links ul li ul li {
    /* width: 100%; */
    padding: 10px 0;
}

.nav-links ul li:focus-within > ul,
.nav-links ul li:hover > ul {
    display: initial;
    /* visibility: visible; */
}



.mobile-menu {
    visibility: hidden;
}

.open-mobile-menu-btn {
    visibility: hidden;
}



/* Social Media Badges */
.social-media-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    background: #c2c2c2eb;
    backdrop-filter: blur(16px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    top: 175px;
    border-top-right-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
    z-index: 999;
}

.social-media-group button {
    font-size: var(--fs-2);
    background: transparent;
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
}






/* Hero */

main {
    /* position: absolute; */
    /* top: 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    height: 150%;
}

.hero {
    margin: 50px auto;
    display: flex;
    /* flex-direction: row; */
    /* align-items: center; */
    /* align-content: center; */
    top: 50%;
    left: 50%;
}

.brief {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    background: #14171E;
    border-radius: var(--border-radius-md);
    margin: 0 20px;
    width: 525px;
    height: 475px;
}

.top-left {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -5px;
}

.top-left h5 {
    margin-top: 10px;
    font-size: var(--fs-6);
    color: var(--cultured);
    text-align: center;
}

.top-left h6 {
    /* margin-top: 10px; */
    margin: 10px 0px 0 30px;
    font-size: var(--fs-8);
    /* width: 100%; */
    font-display: left;
    text-align: left;
    /* text-align: justify; */
}



.top-right {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -5px;
}

.top-right h5 {
    margin-top: 10px;
    font-size: var(--fs-6);
    color: var(--cultured);
    text-align: center;
}

.top-right h6 {
    /* margin-top: 10px; */
    margin: 10px 0px 0 30px;
    font-size: var(--fs-8);
    /* width: 100%; */
    font-display: left;
    text-align: left;
    /* text-align: justify; */
}



.bottom-left {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -5px;
}

.bottom-left h5 {
    margin-top: 10px;
    font-size: var(--fs-6);
    color: var(--cultured);
    text-align: center;
}

.bottom-left h6 {
    /* margin-top: 10px; */
    margin: 10px 0px 0 30px;
    font-size: var(--fs-8);
    /* width: 100%; */
    font-display: left;
    text-align: left;
    /* text-align: justify; */
}



.bottom-right {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: -5px;
}

.bottom-right h5 {
    margin-top: 10px;
    font-size: var(--fs-6);
    color: var(--cultured);
    text-align: center;
}

.bottom-right h6 {
    /* margin-top: 10px; */
    margin: 10px 0px 0 30px;
    font-size: var(--fs-8);
    /* width: 100%; */
    font-display: left;
    text-align: left;
    /* text-align: justify; */
}



/* .slideshow {
    margin: 20px 50px;
    background: white;
    border-radius: var(--border-radius-md);
    margin: 20px;
    height: 90%;
} */

.welcome {
    margin: 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* .welcome-text {
    width: 450px;
} */

h1 {
    font-size: 1.75em;
    font-weight: 500;
    text-align: center;
    color: #eeeeee;
    font-family: 'Calibri', sans-serif;
    margin: 20px 0px 10px;
}

h6 {
    font-size: 0.8em;
    text-align: center;
    color: #a0a0a0;
    font-weight: 400;
    margin-bottom: 10px;
    width: 225px;
}




/* "Register Your Interest" Button */


.subtitle {
    margin-top: -10px;
    width: 250px;
}

p {
    margin-top: -10px;
}

.center {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    padding-top: 8px;
    align-items: center;
    height: 50vh;
    z-index: 0;
}

.big_logo_img {
    padding: 25px 0px 10px 0px;
    width: 200px;
    height: 400px;
}

.register-interest {
    background-color: #072B9D;
    font-size: var(--fs-7);
    color: #eeeeee;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
    /* width: 200px; */
    /* height: 45px; */
}

.wrapper {
    position: fixed;
    width: 400px;
    height: 510px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    backdrop-filter: blur(32px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transform: scale(0);
    transition: transform .5s ease, height .2s ease, width .2s ease;
    margin-top: -15px;
}

.wrapper.active-popup {
    transform: scale(1);
}

.wrapper.active {
    width: 550px;
}

.wrapper .form-box {
    width: 100%;
    padding: 40px;
}

.wrapper .form-box.login {
    transition: transform .18s ease;
    transform: translateX(0);
}

.wrapper.active .form-box.login {
    transition: none;
    transform: translateX(-900px);
}

.wrapper .form-box.register {
    width: 85%;
    position: absolute;
    transition: none;
    transform: translateX(900px);
}

.wrapper.active .form-box.register {
    transition: transform .18s ease;
    transform: translateX(0);
}

.wrapper .icon-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background: #072B9D;
    font-size: 2em;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    z-index: 1;

}

.form-box h2 {
    font-size: 2em;
    font-weight: 300;
    color: #ffffff;
    text-align: center;
    margin-bottom: 20px;
}

.input-box {
    position: flex;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #ffffff;
    margin: 30px 0;
    justify-content: space-between;
}

.input-box label {
    position: relative;
    top: -35px;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #b9b9b9;
    font-weight: 500;
    pointer-events: none;
    transition: .5s;
}

.input-box input:focus~label, 
.input-box input:valid~label {
    top: -65px;
}

.input-box input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #ffffff;
    font-weight: 600;
    padding: 0 35px 0 5px;
}

.input-box .icon {
    position: absolute;
    right: 50px;
    font-size: 1.2em;
    color: #b9b9b9;
    line-height: 57px;
}

.name-group {
    display: flex;
    margin-bottom: -28px;
}

.first-name {
    margin-right: 10px;
}

.last-name {
    margin-left: 10px;
}

/* .number-group {
    display: flex;
    margin-top: -28px;
}

.area-code {
    margin-right: 10px;
    width: 30%;
}

.phone-number {
    margin-left: 10px;
} */

.remember-forgot {
    font-size: .9em;
    color: #ffffff;
    font-weight: 500;
    margin: 10px 0 15px;
    display: flex;
    justify-content: space-between;
}

.remember-forgot label input {
    accent-color: #ffffff;
    margin-right: 3px;
}

.remember-forgot a {
    color: #e3e9ff;
    text-decoration: none;
}

.remember-forgot a:hover {
    text-decoration: underline;
}

.btn {
    width: 100%;
    height: 45px;
    background: #072B9D;
    border: none;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    color: #fff;
    font-weight: 500;
    margin-top: 15px;
}

.login-register {
    font-size: .9em;
    color: #ffffff;
    text-align: center;
    font-weight: 500;
    margin: 25px 0 10px;
}

.login-register a{
    color: #2354f5;
    text-decoration: none;
    font-weight: 600;
}

.login-register a:hover {
    text-decoration: underline;
}














/* Footer */

footer {
    height: 25vh;
    /* width: 100%; */
    /* bottom: 0; */
    background: var(--lovo-background-dark);
    display: flex;
    flex-direction: column;
    position: relative;
    /* padding-bottom: 5px;
    padding-top: 10px; */
    height: auto;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.footer-left-side {
    display: flex;
    /* flex-wrap: nowrap; */
    align-content: center;
    /* padding: 10px 0; */
    /* padding: 0 250px; */
    /* max-width: 980px; */
    margin: 30px auto;
    /* padding-left: max(22px,env(safe-area-inset-left));
    padding-right: max(22px,env(safe-area-inset-right)); */
    
}

.site-links {
    margin: 0 40px;
    display: flex;
}

.footer-socials {
    margin-top: 5px;
}

.footer-socials a {
    color: var(--cultured);
    font-size: var(--fs-5);
    /* margin: ; */
}


.site-link-sub {
    margin-right: 30px;
}

.site-link-title {
    color: var(--gray);
    font-size: var(--fs-11);
    font-weight: 300;
    margin-bottom: 5px;
}

.site-link-item {
    color: var(--cultured);
    font-weight: 300;
    font-size: var(--fs-9);
    margin-bottom: 3px;
}


.newsletter-title-group {
    display: flex;
    color: var(--cultured);
}

.newsletter-icon {
    /* margin: 2px 2px 0 0; */
    font-size: var(--fs-7);
}

.newsletter-title {
    font-size: var(--fs-8);
    margin-left: 5px;
    font-weight: 200;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
}

.newsletter-input-box {
    display: flex;
    flex-direction: column;
}

.newsletter-input-box input {
    background: transparent;
    position: flex;
    width: 250px;
    height: 20px;
    border: none;
    border-bottom: 0.25px solid var(--cultured);
    margin: 20px 0 0 0;
    justify-content: space-between;
    color: var(--cultured);
}

.newsletter-input-box label {
    position: absolute;
    top: 65px;
    /* left: 5px; */
    /* transform: translateY(-50%); */
    font-size: var(--fs-9);
    color: #b9b9b9;
    font-weight: 500;
    pointer-events: none;
    transition: 0.5s;
}

.newsletter-input-box input:focus~label, 
.newsletter-input-box input:valid~label {
    top: 50px;
    /* transition: .5s; */
}

.newsletter-btn button {
    background-color: #072B9D;
    font-size: var(--fs-9);
    font-weight: 200;
    color: #eeeeee;
    border: none;
    /* border-radius: var(--border-radius-sm); */
    padding: 5px 25px;
    cursor: pointer;
    margin-top: 10px;
}







.footer-right-side {
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    /* max-width: 980px; */
    margin: 0 auto;
    /* padding-left: max(22px,env(safe-area-inset-left));
    padding-right: max(22px,env(safe-area-inset-right)); */
}

.footer-right-side hr {
    width: 850px;
    border: 1px solid var(--cultured);
    border-radius: var(--border-radius-sm);
    /* left: -100px; */
}

.footer-right-side p {
    padding-bottom: 20px;
    margin: 10px 0 0 15px;
    color: var(--cultured);
    font-size: var(--fs-9);
}



/* Responsivity */

/* Tablets */
@media screen and (min-width:768px) and (max-width:1023px) {

}

/* Mobile Phones */
@media screen and (max-width:940px) {
    /* header {
        padding: 20px;
    } */

    header .navbar {
        position: absolute;
    }


    .social-media-group {
        visibility: hidden;
    }

    .nav-links {
        visibility: hidden;
    }




    /* Navbar */

    .navbar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 10vh;
        z-index: 10000;
    }
    
    .navbar a img {
        margin-top: 10px;
        margin-right: 0px;
        margin-left: 20px;
        width: 110px;
    }
    
    .navbar .nav-links {
        display: flex;
        align-items: center;
    }
    
    .navbar .nav-links ul li {
        position: relative;
        float: left;
        margin: 0 20px;
    }
    
    .navbar .nav-links ul li a{
        display: block;
        padding: 15px;
        border-radius: var(--border-radius-sm);
    }
    
    .navbar .nav-links a:hover {
        background: var(--cultured);
        color: var(--lovo-dark-blue);
    }
    
    .nav-links ul li ul {
        position: absolute;
        left: 0;
        width: 175px;
        background: var(--lovo-trans-blue);
        border-radius: var(--border-radius-sm);
        /* z-index:99; */
        display: none;    
    }
    
    .nav-links ul li ul li {
        /* width: 100%; */
        padding: 10px 0;
    }
    
    .nav-links ul li:focus-within > ul,
    .nav-links ul li:hover > ul {
        display: initial;
        /* visibility: visible; */
    }



    /* Navbar Mobile */

    .open-mobile-menu-btn {
        visibility: visible;
        position: relative;
        background: transparent;
        color: var(--cultured);
        font-size: var(--fs-1);
        z-index: 999;
        right: 20px;
        top: 6px;
        padding: 5px;
        border: none;
        cursor: pointer;
        /* bottom: 20px; */
        z-index: 9999;

    }

    .open-mobile-menu-btn.active {
        visibility: hidden;
        color: red;
        z-index: 9998;
    }

    header {
        z-index: 9999;
    }

    .mobile-menu {
        /* display: flex; */
        /* flex-direction: column; */
        visibility: hidden;
        position: relative;
        background: rgba(10, 32, 62, 0.667);
        backdrop-filter: blur(6px);
        box-shadow: 0 0 10px rgba(0, 0, 0, .5);
        width: 100%;
        /* height: auto; */
        /* top: -100px; */
        padding-top: 12vh;
        align-items: center;
        transform: translateY(-200%);
        transition: 0.5s ease-in-out;
        z-index: 999;
    }

    .mobile-menu.active {
        visibility: visible;
        transform: translateY(0);
        z-index: 1000;
    }

    .nav-links-mobile a {
        color: var(--cultured);
        z-index: 1000;

    }

    .nav-links-mobile li {
        /* margin-bottom: 40px; */
        margin-left: 20px;
        margin-top: 20px;
        /* border-bottom: 2px solid rgba(3, 20, 44, 0.8); */
        padding-bottom: 25px;
        /* text-align: center; */
        font-size: var(--fs-5);
        z-index: 1000;

    }

    .nav-links-mobile span {
        font-size: var(--fs-11);
        position: absolute;
        /* bottom: 0.005px; */
        /* right: -3px; */
        margin-top: -5px;
        margin-left: -2px;
        background: red;
        border-radius: var(--border-radius-sm);
        padding: 1px 2px;
        font-style: italic;
        box-shadow: 0 0 5px rgb(255, 69, 69);
        color: white;
        z-index: 1000;

    }

    /* .nav-links-mobile ul li ul {
        display: flex;
        margin-left: -10px;
        align-content: center;
    } */

    /* .nav-links-mobile ul li ul li {
        padding-top: 10px;
        margin-bottom: -30px;
        align-items: center;
    } */



    body {
        font-family: sans-serif;
        background: linear-gradient(var(--lovo-background-light), var(--lovo-background-dark));
        /* display: flex; */
        height: 100%;
        display: block;
        min-height: 100vh;
        /* width: 50vw; */
        /* overflow: hidden; */
    }

    header {
        height: 1vh;
    }

    /* Hide Scrollbar */

    *::-webkit-scrollbar {
        display: none;
    }

    * {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    
    /* Hero */

    main {
        /* position: absolute; */
        /* top: 0; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        height: 150%;
    }

    .hero {
        margin: 50px auto;
        display: flex;
        flex-direction: column-reverse;
        /* flex-direction: row; */
        /* align-items: center; */
        /* align-content: center; */
        /* bottom: 50%; */
        /* right: 50%; */
        top: 0;
        left: 0;
    }



    .welcome {
        margin: 50px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    /* .welcome-text {
        width: 450px;
    } */
    
    h1 {
        font-size: var(--fs-2);
        font-weight: 500;
        text-align: center;
        color: #eeeeee;
        font-family: 'Calibri', sans-serif;
        margin: 20px 0px 10px;
    }
    
    h6 {
        font-size: 0.8em;
        text-align: center;
        color: #a0a0a0;
        font-weight: 400;
        margin-bottom: 10px;
        width: 225px;
    }
    
    
    
    
    /* "Register Your Interest" Button */
    
    
    .subtitle {
        margin-top: -10px;
        width: 250px;
    }
    
    p {
        margin-top: -10px;
    }
    
    .center {
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
        padding-top: 8px;
        align-items: center;
        height: 50vh;
        z-index: 0;
    }
    
    .big_logo_img {
        padding: 25px 0px 10px 0px;
        width: 200px;
        height: 50px;
    }
    
    .register-interest {
        background-color: #072B9D;
        font-size: var(--fs-7);
        color: #eeeeee;
        border: none;
        border-radius: 5px;
        padding: 10px 20px;
        margin: 10px;
        cursor: pointer;
        /* width: 200px; */
        /* height: 45px; */
    }

    .wrapper {
        position: absolute;
        /* width: 50%; */
        height: 400px;
        background: transparent;
        border: 2px solid rgba(255, 255, 255, .5);
        border-radius: 20px;
        backdrop-filter: blur(32px);
        box-shadow: 0 0 30px rgba(0, 0, 0, .5);
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        transform: scale(0);
        transition: transform .5s ease, height .2s ease, width .2s ease;
        margin-top: -150px;
        top: 260px;
    }
    
    .wrapper.active-popup {
        transform: scale(1);
    }
    
    .wrapper.active {
        width: 90%;
    }
    
    .wrapper .form-box {
        width: 100%;
        padding: 40px;
    }
    
    .wrapper .form-box.login {
        transition: transform .18s ease;
        transform: translateX(0);
    }
    
    .wrapper.active .form-box.login {
        transition: none;
        transform: translateX(-900px);
    }
    
    .wrapper .form-box.register {
        width: 85%;
        position: absolute;
        transition: none;
        transform: translateX(900px);
    }
    
    .wrapper.active .form-box.register {
        transition: transform .18s ease;
        transform: translateX(0);
    }
    
    .wrapper .icon-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 35px;
        height: 35px;
        background: #072B9D;
        font-size: 1.25em;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom-left-radius: 20px;
        cursor: pointer;
        z-index: 1;
    
    }
    
    .form-box h2 {
        font-size: 1.15em;
        font-weight: 300;
        color: #ffffff;
        text-align: center;
        margin-bottom: 0px;
        margin-top: 20px;
    }
    
    .input-box {
        position: flex;
        width: 100%;
        height: 50px;
        border-bottom: 2px solid #ffffff;
        margin: 18px 0;
        justify-content: space-between;
    }
    
    .input-box label {
        position: relative;
        top: -30px;
        left: 5px;
        transform: translateY(-50%);
        font-size: 0.75em;
        color: #b9b9b9;
        font-weight: 500;
        pointer-events: none;
        transition: .5s;
    }
    
    .input-box input:focus~label, 
    .input-box input:valid~label {
        top: -60px;
    }
    
    .input-box input {
        width: 100%;
        height: 100%;
        background: transparent;
        border: none;
        outline: none;
        font-size: 0.9em;
        color: #ffffff;
        font-weight: 600;
        padding: 0 35px 0 5px;
    }
    
    .input-box .icon {
        position: absolute;
        right: 50px;
        font-size: 1.2em;
        color: #b9b9b9;
        line-height: 57px;
    }
    
    .name-group {
        display: flex;
        margin-bottom: -10px;
    }
    
    .first-name {
        margin-right: 10px;
    }
    
    .last-name {
        margin-left: 10px;
    }
    
    /* .number-group {
        display: flex;
        margin-top: -28px;
    }
    
    .area-code {
        margin-right: 10px;
        width: 30%;
    }
    
    .phone-number {
        margin-left: 10px;
    } */
    
    .remember-forgot {
        font-size: .7em;
        color: #ffffff;
        font-weight: 500;
        margin: 25px 0 15px;
        display: flex;
        justify-content: space-between;
    }
    
    .remember-forgot label input {
        accent-color: #ffffff;
        margin-right: 3px;
    }
    
    .remember-forgot a {
        color: #e3e9ff;
        text-decoration: none;
    }
    
    .remember-forgot a:hover {
        text-decoration: underline;
    }
    
    .btn {
        width: 100%;
        height: 45px;
        background: #072B9D;
        border: none;
        outline: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1em;
        color: #fff;
        font-weight: 500;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .login-register {
        font-size: .9em;
        color: #ffffff;
        text-align: center;
        font-weight: 500;
        margin: 25px 0 10px;
    }
    
    .login-register a{
        color: #2354f5;
        text-decoration: none;
        font-weight: 600;
    }
    
    .login-register a:hover {
        text-decoration: underline;
    }
    
    






    .brief {
        display: grid;
        align-self: center;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 1fr);
        background: #14171E;
        border-radius: var(--border-radius-md);
        /* margin: 35px 0px; */
        width: 230px;
        height: 950px;
    }

    .top-left {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -5px;
    }

    .top-left h5 {
        margin-top: 10px;
        font-size: var(--fs-7);
        color: var(--cultured);
        text-align: center;
    }

    .top-left h6 {
        /* margin-top: 10px; */
        margin: 10px 0px 0 30px;
        font-size: var(--fs-9);
        width: 75%;
        font-display: left;
        text-align: center;
        /* text-align: justify; */
    }



    .top-right {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -5px;
    }

    .top-right h5 {
        margin-top: 10px;
        font-size: var(--fs-7);
        color: var(--cultured);
        text-align: center;
    }

    .top-right h6 {
        /* margin-top: 10px; */
        margin: 10px 0px 0 30px;
        font-size: var(--fs-9);
        width: 75%;
        font-display: left;
        text-align: center;
        /* text-align: justify; */
    }



    .bottom-left {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -5px;
    }

    .bottom-left h5 {
        margin-top: 10px;
        font-size: var(--fs-7);
        color: var(--cultured);
        text-align: center;
    }

    .bottom-left h6 {
        /* margin-top: 10px; */
        margin: 10px 0px 0 30px;
        font-size: var(--fs-9);
        width: 75%;
        font-display: left;
        text-align: center;
        /* text-align: justify; */
    }



    .bottom-right {
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -5px;
    }

    .bottom-right h5 {
        margin-top: 10px;
        font-size: var(--fs-7);
        color: var(--cultured);
        text-align: center;
    }

    .bottom-right h6 {
        /* margin-top: 10px; */
        margin: 10px 0px 0 30px;
        font-size: var(--fs-9);
        width: 75%;
        font-display: left;
        text-align: center;
        /* text-align: justify; */
    }
    




    /* Footer */

    footer {
        /* height: 10vh; */
        width: 100vw;
        background: var(--lovo-background-dark);
        display: flex;
        flex-direction: column;
        position: relative;
        height: auto;
    }

    .container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .footer-left-side {
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        /* margin: 30px auto; */
    }

    .logo-and-socials {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-logo img {
        width: 105px;
        margin-bottom: 10px;
    }

    .site-links {
        margin: 40px 0;
        display: flex;
        flex-direction: column;
    }

    .footer-socials {
        margin: 0;
        margin-top: 0px;
        padding: 0;
        align-items: center;
        align-content: center;
    }

    .footer-socials a {
        color: var(--cultured);
        font-size: var(--fs-4);
        margin: 0 4px;
    }


    .site-link-sub {
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .site-link-title {
        color: var(--gray);
        font-size: var(--fs-9);
        font-weight: 100;
        margin-bottom: 5px;
        text-align: center;
    }

    .site-link-item {
        color: var(--cultured);
        font-weight: 100;
        font-size: var(--fs-7);
        margin-bottom: 3px;
        text-align: center;
    }

    .newsletter {
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .newsletter-title-group {
        display: flex;
        color: var(--cultured);
        margin-bottom: 5px;
    }

    .newsletter-icon {
        font-size: var(--fs-8);
    }

    .newsletter-title {
        font-size: var(--fs-9);
        margin-left: 5px;
        font-weight: 200;
    }

    .newsletter-form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .newsletter-input-box {
        display: flex;
        flex-direction: column;
    }

    .newsletter-input-box input {
        background: transparent;
        position: flex;
        width: 250px;
        height: 20px;
        border: none;
        border-bottom: 0.25px solid var(--cultured);
        margin: 20px 0 0 0;
        justify-content: space-between;
        color: var(--cultured);
    }

    .newsletter-input-box label {
        position: absolute;
        top: 500px;
        font-size: var(--fs-9);
        color: #b9b9b9;
        font-weight: 500;
        pointer-events: none;
        transition: 0.5s;
    }

    .newsletter-input-box input:focus~label, 
    .newsletter-input-box input:valid~label {
        top: 480px;
    }

    .newsletter-btn button {
        background-color: #072B9D;
        font-size: var(--fs-9);
        font-weight: 200;
        color: #eeeeee;
        border: none;
        padding: 5px 100px;
        cursor: pointer;
        margin-top: 10px;
    }



    
    .footer-right-side {
        display: flex;
        align-items: center;
        align-content: center;
        flex-direction: column;
        /* max-width: 980px; */
        margin: 0 auto;
        /* padding-left: max(22px,env(safe-area-inset-left));
        padding-right: max(22px,env(safe-area-inset-right)); */
    }

    .copyright {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-right-side hr {
        width: 80vw;
        border: 1px solid var(--cultured);
        color: var(--cultured);
        border-radius: var(--border-radius-sm);
        /* left: -100px; */
    }

    .footer-right-side p {
        padding-bottom: 20px;
        margin: 15px 0 0;
        color: var(--cultured);
        font-size: var(--fs-11);
        text-align: center;
    }


}