:root {

    --wmnl-orange: #ff6a00;
    --wmnl-orange-hover: #ff8533;

    --wmnl-navy: #0d1832;
    --wmnl-navy-light: #172547;

    --wmnl-white: #ffffff;
    --wmnl-light: #f4f6f8;

    --bg-color: #081220;
    --text-color: #ffffff;

    --card-bg: #12203d;

    --transition: 0.35s ease;

    --shadow-small:
        0 4px 12px rgba(0,0,0,.10);

    --shadow-medium:
        0 10px 28px rgba(0,0,0,.16);

    --shadow-large:
        0 18px 45px rgba(0,0,0,.24);
}

/* Light Theme */

body.light-mode {

    --bg-color: #f5f7fa;
    --text-color: #111111;

    --card-bg: #ffffff;
}

/* General */

body {

    background: var(--bg-color);
    color: var(--text-color);

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

    transition: var(--transition);

    overflow-x: hidden;
}

a {
    text-decoration: none;
}

/* Navbar */

.wmnl-navbar {

    background: rgba(8,18,32,0.9);

    backdrop-filter: blur(10px);

    position: sticky;
    top: 0;

    z-index: 1000;
}

.nav-link {

    color: white !important;

    margin-left: 10px;

    transition: var(--transition);
}

.nav-link:hover {

    color: var(--wmnl-orange) !important;
}

/* Language Buttons */

.language-dropdown {

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

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

    color: white;

    border-radius: 12px;

    padding: 10px 14px;

    transition: .3s ease;

    box-shadow: var(--shadow-small);
}

.language-dropdown:hover {

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

    color: white;
}

.dropdown-menu {

    background: rgba(15,25,45,.98);

    border: none;

    border-radius: 16px;

    padding: 8px;

    box-shadow: var(--shadow-large);

    backdrop-filter: blur(12px);
}

.dropdown-item {

    color: white;

    border-radius: 10px;

    padding: 10px 15px;

    transition: .2s ease;
}

.dropdown-item:hover {

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

    color: var(--wmnl-orange);
}

/* Theme Button */

.theme-toggle {

    background: transparent;

    color: white;

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

    padding: 5px 10px;

    border-radius: 8px;
}

/* Hero */

.hero {

    background:
    linear-gradient(
        rgba(8,18,32,.75),
        rgba(8,18,32,.75)
    ),
    url('../images/hero/hero-main.jpg');

    background-size: cover;
    background-position: center;

    min-height: 100vh;
}

.hero h1 {

    font-size: 4rem;

    font-weight: 800;

    text-transform: uppercase;

    color: beige;
}

.hero h2 {

    color: var(--wmnl-orange);

    font-size: 1.5rem;

    margin-bottom: 20px;

    color: beige;
}

.hero p {

    font-size: 1.15rem;

    max-width: 700px;

    color: beige;
}

/* Buttons */

.btn-wmnl {

    background: var(--wmnl-orange);

    color: white;

    box-shadow:

        0 6px 18px rgba(255,106,0,.18);

    transition: .3s ease;
}

.btn-wmnl:hover {

    transform: translateY(-2px);

    box-shadow:

        0 12px 28px rgba(255,106,0,.30);
}

/* Sections */

.section {

    padding: 100px 0;
}

.section-title {

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 50px;

    text-align: center;
}

/* Cards */

.wmnl-card {

    background: var(--card-bg);

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

    border-radius: 18px;

    overflow: hidden;

    transition: .3s ease;

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

.wmnl-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.22);
}

.wmnl-card img {

    width: 100%;
    height: 260px;

    object-fit: cover;
}

.wmnl-card-body {

    padding: 25px;
}

/* Division Cards */

.division-card {

    border-radius: 20px;

    padding: 40px;

    min-height: 250px;

    transition: .5s ease;

    cursor: pointer;

    border-radius: 20px;

    box-shadow:

        0 10px 30px rgba(0,0,0,.18);

    transition: .35s ease;
}

.division-wmnl {

    background: linear-gradient(
        135deg,
        #ff6a00,
        #ff8d33
    );
    color: var(--wmnl-white);
}

.division-nordclean {

    background: linear-gradient(
        135deg,
        #00a86b,
        #00784e
    );
    color: var(--wmnl-white);
}

.division-card:hover {

    transform:

        translateY(-8px)

        scale(1.01);

    box-shadow:

        0 18px 45px rgba(0,0,0,.28);
}

/* Footer */

.footer {

    /*
    background: #050d18;
    */

    background: var(--card-bg);

    padding: 60px 0;

    margin-top: 100px;

    box-shadow: 0 4px 8px 0 #11111191, 0 6px 20px 0 #11111191;
}

.footer-links {

    list-style: none;

    padding: 0;
}

.footer-links li {

    margin-bottom: 8px;
}

.footer-links a {

    color: var(--text-color);
}

/* NordClean Theme */

body.nordclean {

    --wmnl-orange: #00a86b;
    --wmnl-orange-hover: #00c77f;

    --wmnl-navy: #004d35;
    --wmnl-navy-light: #006847;

    transition: all .6s ease;
}

/* Mobile */

@media (max-width: 768px) {

    .hero h1 {

        font-size: 2.6rem;
    }

    .hero h2 {

        font-size: 1.2rem;
    }
}

.nordclean-hero {

    background:
    linear-gradient(
        rgba(0,40,25,.75),
        rgba(0,40,25,.75)
    ),
    url('../images/hero/hero-nordclean.jpg');

    background-size: cover;
    background-position: center;
}

body.nordclean .wmnl-navbar {

    background:
    rgba(0,80,50,.92);
}

body.nordclean .hero h2 {

    color: #8cffc6;
}

#divisionBadge {

    position: fixed;

    right: 20px;
    bottom: 20px;

    background: #00a86b;

    color: white;

    padding: 12px 20px;

    border-radius: 12px;

    font-weight: bold;

    z-index: 9999;
}

#wmnl-transition {

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 99999;
}

#wmnl-transition .stripe {

    position: absolute;

    width: 150%;

    height: 40%;

    left: -170%;

    background: var(--wmnl-orange);

    transform: skewX(-25deg);

    transition: left .8s ease;
}

#wmnl-transition .stripe:nth-child(1) {

    top: -10%;
}

#wmnl-transition .stripe:nth-child(2) {

    top: 30%;

    transition-delay: .1s;
}

#wmnl-transition .stripe:nth-child(3) {

    top: 70%;

    transition-delay: .2s;
}

.nav-link.active {

    color: var(--wmnl-orange) !important;

    font-weight: 700;
}

.addon-hero{

background:

linear-gradient(
rgba(8,18,32,.8),
rgba(8,18,32,.8)
),

url('../images/addon/addon-banner.jpg');

background-size:cover;
background-position:center;

min-height:100vh;

}

.addon-hero h1{

font-size:4rem;

font-weight:800;

text-transform:uppercase;

}

.addon-hero h2{

color:var(--wmnl-orange);

max-width:700px;

margin-bottom:40px;

}

.gallery img{

transition:.3s ease;

}

.gallery img:hover{

transform:scale(1.02);

}

.gallery-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.gallery-track {
    display: flex;
    width: 100%;
    transition: transform .7s ease-in-out;
}

.gallery-slide {
    flex: 0 0 100%;
    width: 100%;
}

.gallery-slide img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.gallery-prev,
.gallery-next {

    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background: rgba(0,0,0,.45);
    color: white;

    cursor: pointer;
    z-index: 20;

    transition: .2s;
}

.gallery-prev:hover,
.gallery-next:hover {

    background: #ff6a00;
}

.gallery-prev {
    left: 20px;
}

.gallery-next {
    right: 20px;
}

.media-hero{

background:

linear-gradient(
rgba(8,18,32,.75),
rgba(8,18,32,.75)
),

url('../images/media/media-hero.jpg');

background-size:cover;
background-position:center;

min-height:100vh;

}

.media-hero h1{

font-size:4rem;

font-weight:800;

}

.media-hero h2{

color:var(--wmnl-orange);

margin-bottom:40px;

}

.fleet-hero{

background:

linear-gradient(
rgba(8,18,32,.75),
rgba(8,18,32,.75)
),

url('../images/fleet/fleet-banner.jpg');

background-size:cover;

background-position:center;

min-height:100vh;

}

.form-select{

background:#12203d;

color:white;

border:none;

padding:15px;

}

body.light-mode .form-select{

background:white;

color:#111;

}

.wmnl-card .badge{

font-size:.9rem;

padding:8px 12px;

}

.contact-hero {

    background:

    linear-gradient(
        rgba(8,18,32,.80),
        rgba(8,18,32,.80)
    ),

    url('../images/contact/contact-hero.jpg');

    background-size: cover;
    background-position: center;

    min-height: 70vh;
}

.contact-hero h1 {

    font-size: 4rem;

    font-weight: 800;
}

.contact-hero h2 {

    color: var(--wmnl-orange);

    max-width: 700px;
}

.form-control {

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

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

    color: var(--text-color);

    border-radius: 12px;

    padding: 14px;

    box-shadow:

        inset 0 1px 2px rgba(255,255,255,.03),

        0 4px 10px rgba(0,0,0,.08);
}

.form-control:focus {

    border-color: var(--wmnl-orange);

    box-shadow: 0 0 0 .2rem rgba(255,106,0,.15);

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

    color: var(--text-color);
}

.error-page{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:

linear-gradient(
rgba(8,18,32,.82),
rgba(8,18,32,.82)
),

url("../images/errors/404.jpg");

background-size:cover;

background-position:center;

}

.error-code{

font-size:10rem;

font-weight:900;

color:var(--wmnl-orange);

text-shadow:

0 10px 30px rgba(0,0,0,.4);

}

.error-page h2{

font-size:2.5rem;

margin-bottom:20px;

}

.wmnl-error-info{

display:inline-block;

padding:12px 24px;

border-radius:12px;

background:

rgba(255,255,255,.06);

box-shadow:

var(--shadow-medium);

font-weight:bold;

letter-spacing:1px;

}

.download-card{

    border-radius:24px;
    overflow:hidden;
    position:relative;

}

.download-card::before{

    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(255,140,0,.15),
    transparent 70%);

    pointer-events:none;

}

.download-card h2{

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

}

.download-card p{

    max-width:700px;
    margin:auto;
    line-height:1.8;

}