body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

.login-top-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    padding: 1rem 1.5rem;
}

.top-nav-link {
    color: rgba(255,255,255,0.35);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    transition: color 0.25s;
}

.top-nav-link:hover {
    color: rgba(255,255,255,0.75);
}

.vh-100 {
    height: 100vh;
}

.login-logo {
    width: 100%;
    height: auto;
}

.logo-wrapper {
    display: block;
    background: #f9f9f9;
    border-radius: 1rem 1rem 0 0;
    padding: 16px 24px;
    margin: -3rem -3rem 1rem -3rem;
}

.gradient-custom {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 100% 35% at 50% -15%, rgba(6, 131, 148, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 50% 120%, rgba(70, 196, 123, 0.10) 0%, transparent 60%),
        linear-gradient(170deg, #0d0d0d 0%, #181818 50%, #111111 100%);
    background-color: #0a0a0a;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gradient-custom > .container {
    position: relative;
    z-index: 1;
}

.bg-road {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 28%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(15,18,15,0.85) 0%, rgba(20,22,20,0.4) 40%, transparent 100%);
    border-top: 1px solid rgba(255,255,255,0.03);
}

.bg-car {
    position: absolute;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.bg-car svg {
    display: block;
    width: 100%;
    height: auto;
}

.bg-car-1 {
    width: 300px;
    bottom: 22%;
    left: -320px;
    color: rgba(70, 196, 123, 0.08);
    animation: driveRight 14s linear infinite;
    animation-delay: 0s;
}

.bg-car-2 {
    width: 200px;
    bottom: 30%;
    right: -220px;
    color: rgba(6, 131, 148, 0.07);
    animation: driveLeft 17s linear infinite;
    animation-delay: -5s;
}

.bg-car-3 {
    width: 360px;
    bottom: 10%;
    left: -380px;
    color: rgba(70, 196, 123, 0.06);
    animation: driveRight 22s linear infinite;
    animation-delay: -12s;
}

.bg-car-4 {
    width: 160px;
    bottom: 18%;
    right: -180px;
    color: rgba(6, 131, 148, 0.05);
    animation: driveLeft 19s linear infinite;
    animation-delay: -9s;
}

@keyframes driveRight {
    from { transform: translateX(0); }
    to { transform: translateX(calc(100vw + 600px)); }
}

@keyframes driveLeft {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-100vw - 600px)); }
}

.box-body {
    z-index: 2;
    inset: 3px;
    margin: 0.5rem;
    border-radius: 1rem;
    background-color: #2f353a;
    overflow: hidden;

}
.animated-box {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    border: 0px solid transparent;
    animation: borderAnimation 6s linear infinite;
}

.animated-box::before 
{
	content: '';
	z-index: 1;
	position: absolute;
	top: -50%;
	left: -50%;
	width: 100%;
	height: 100%;
	transform-origin: bottom right;
	background: linear-gradient(0deg,transparent,#39724a,#f2ecda);
	animation: animate 6s linear infinite;
}

.animated-box::after 
{
	content: '';
	z-index: 1;
	position: absolute;
	top: -50%;
	left: -50%;
	width: 100%;
	height: 100%;
	transform-origin: bottom right;
	background: linear-gradient(0deg,transparent,#ccaf79,#d0d6cd);
	animation: animate 6s linear infinite;
	animation-delay: -3s;
}


@keyframes animate 
{
	0%
	{
		transform: rotate(0deg);
	}
	100%
	{
		transform: rotate(360deg);
	}
}

#registerModal .modal-content {
    border: 1px solid rgba(255,255,255,.15);
}

#registerModal .form-control:focus {
    border-color: #068394;
    box-shadow: 0 0 0 0.2rem rgba(6,131,148,.25);
}

.form-floating > .form-control::placeholder {
    color: transparent;
}

.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control:focus ~ label {
    color: #068394;
    opacity: 0.85;
}

.form-floating > label {
    color: rgba(255,255,255,.5);
}

.form-floating > .form-control:focus {
    border-color: #068394;
    box-shadow: 0 0 0 0.2rem rgba(6,131,148,.25);
    background-color: #212529;
    color: #fff;
}