:root {
    --primary-green: #002f21;
    --secondary-orange: #f93;
    --logo-height: 50px;
}

body { font-family: 'Exo', sans-serif; overflow-x: hidden; color: #333; }

/* --- Navbar Tweak --- */
.logo-img { height: var(--logo-height); width: auto; display: block; }
.navbar-nav .nav-link:hover { color: var(--secondary-orange); }

/* --- Base Hero Setup --- */
.hero-video-wrapper {
    position: relative;
    background-color: var(--primary-green);
    min-height: 100vh; /* Set to 100% of viewport height to fit both columns nicely */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Slightly darker for better text contrast */
    z-index: 1;
}

.hero-content { position: relative; z-index: 2; }

/* --- Left Column & Buttons --- */
.fw-black { font-weight: 900; }

.btn-hero { 
    padding: 15px 35px; 
    border-radius: 5px; 
    font-size: 1.1rem;
    text-transform: none; /* Forces standard casing */
}

/* Ensure the heading doesn't inherit any uppercase transformation */
h1.display-3 {
    text-transform: none;
    letter-spacing: -1px; /* Optional: tightens up the heading since it's now lowercase */
}


.btn-green { background-color: var(--primary-green); color: white; border: 2px solid var(--primary-green); }
.btn-green:hover { background-color: transparent; border-color: white; }
.btn-orange { background-color: var(--secondary-orange); color: #052421; }
.btn-orange:hover { background-color: #e0822d; color: white; }
.opacity-90 { opacity: 0.9; }

/* --- Right Column & Form --- */
.bg-green { background-color: var(--primary-green) !important; }
.contact-box { border: 1px solid rgba(255,255,255,0.1); }


/* --- Form Field Styling --- */
.contact-box .form-control {
    background-color: #ffffff; /* Pure white background */
    border: 2px solid transparent;
    color: #333333;           /* Dark text for readability on white */
    padding: 12px;
    border-radius: 6px;
}

/* Focus state: when the user clicks into the field */
.contact-box .form-control:focus {
    background-color: #ffffff;
    border-color: var(--secondary-orange); /* Orange border on click */
    color: #000000;
    box-shadow: 0 0 0 0.25rem rgba(249, 153, 0, 0.25); /* Subtle orange glow */
}

/* Adjust labels to be pure white for better contrast against the green bg */
.contact-box .form-label {
    color: #ffffff !important;
    font-weight: 500;
    margin-bottom: 0.3rem;
}

/* Placeholder text color */
.contact-box .form-control::placeholder {
    color: #999999;
}

.contact-box .mb-3 {
    margin-bottom: 1.5rem !important; /* Adds a bit more breathing room between white boxes */
}

/* Make sure the text inside the white box is dark and clear */
.contact-box .form-control {
    height: 50px; /* Makes the inputs feel more "premium" and touch-friendly */
}

.contact-box textarea.form-control {
    height: auto; /* Keeps the message box flexible */
}


/* Custom Dropdown Styling */
.dropdown-menu {
    border-radius: 12px;
    padding: 10px;
    margin-top: 15px !important; /* Gap between link and menu */
    display: block; 
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
}

/* Show on hover (Optional, but feels premium on desktop) */
.nav-item.dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Or use the standard Bootstrap click - this handles both */
.dropdown-menu.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-item {
    border-radius: 8px;
    transition: background 0.2s;
    font-weight: 500;
}

.dropdown-item:hover {
    background-color: #fff4e6; /* Very light orange tint */
    color: var(--secondary-orange);
}

.text-orange {
    color: var(--secondary-orange);
}

/* Remove the little arrow if you want it cleaner */
.dropdown-toggle::after {
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}


/* Custom Content Styles */
.lead-text {
    font-size: 1.15rem;
    line-height: 1.7;
}

/* Ensure images maintain a nice aspect ratio if they aren't perfectly sized */
.main-side-img {
    height: 350px;
    object-fit: cover;
}

.sub-side-img {
    height: 180px;
    object-fit: cover;
}

/* Mobile Tweak: Reduce height on small screens */
@media (max-width: 768px) {
    .main-side-img { height: 250px; }
    .sub-side-img { height: 130px; }
}

/* Helper for the muted text color if Bootstrap default is too light */
.text-muted {
    color: #555 !important;
}


/* Parallax Background Section */
.services-parallax {
    position: relative;
    background: linear-gradient(rgba(0, 47, 33, 0.8), rgba(0, 47, 33, 0.8)), 
                url('../images/20-TVinspektion-1.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Creates the parallax effect */
    min-height: 600px;
}

.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.header-line {
    width: 80px;
    height: 4px;
    background-color: var(--secondary-orange);
    margin-top: 15px;
}

/* Service Card Logic */

.service-card {
    position: relative;
    display: block;
    height: 300px; /* Fixed height for all service boxes */
    overflow: hidden;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* On mobile, we might want them slightly shorter so the user doesn't have to scroll as much */
@media (max-width: 768px) {
    .service-card {
        height: 200px;
    }
}



.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
    filter: brightness(0.8); /* Slightly dimmed by default */
}

.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.2); /* Subtle overlay */
    transition: background 0.4s ease;
    z-index: 2;
}

.service-title {
    color: white;
    font-weight: 700;
    text-transform: none;
    font-size: 1.5rem;
    text-align: center;
    padding: 0 15px;
}

/* --- MOUSE OVER EFFECTS --- */
.service-card:hover img {
    transform: scale(1.1); /* Zoom effect */
    filter: brightness(1.1); /* Fades the color "up" (brightens) */
}

.service-card:hover .service-overlay {
    background: rgba(0,0,0,0.1); /* Lightens the overlay on hover */
}

/* Responsive adjustment for Mobile (Fixed backgrounds can be laggy on iOS) */
@media (max-width: 991px) {
    .services-parallax {
        background-attachment: scroll;
    }
    .service-title {
        font-size: 1.25rem;
    }
}

/* Tjekliste styling */
.list-unstyled li {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    color: #333;
}

.text-success {
    color: var(--primary-green) !important; /* Vi bruger din mørkegrønne til tjekmærkerne */
}

/* Gør billedet flush med toppen af overskriften */


.map-img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

@media (min-width: 992px) {
    .map-img {
        /* Dette trækker billedet op, så det flugter perfekt eller starter lidt højere */
        margin-top: -10px; 
        height: 550px; /* Juster højden så det passer til tekstmængden til højre */
    }
}



/* Testimonial Sektion */
.bg-green {
    background-color: var(--primary-green) !important;
}

.bg-orange {
    background-color: var(--secondary-orange) !important;
}

.ls-2 {
    letter-spacing: 2px;
}

.testimonial-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2) !important;
}

.testimonial-card h4 {
    color: var(--primary-green);
    font-size: 1.25rem;
}

.testimonial-card p {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Sørger for at kortene er lige høje i hver række */
.card.h-100 {
    display: flex;
    flex-direction: column;
}


/* Footer Grundlæggende */
.footer-section {
    background-color: #333333 !important;
    color: #ffffff;
}

/* Overskrifter i footeren */
.footer-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    text-transform: none; /* Ingen tvungen blokbogstaver */
}

/* Standard links (Hvide, orange ved hover) */
.footer-links a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--secondary-orange) !important;
    transform: translateX(5px);
}

/* Kontakt-links (Telefon og Email - altid orange) */
.contact-link {
    color: var(--secondary-orange) !important;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.contact-link:hover {
    opacity: 0.8;
    color: var(--secondary-orange) !important;
}

/* Ikon farve */
.text-orange {
    color: var(--secondary-orange) !important;
}

/* Hjælpeklasse til dæmpet hvid tekst */
.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}


/* Sikrer at billedet i denne sektion ikke bliver for dominerende på store skærme */
@media (min-width: 992px) {
    .img-fluid {
        max-height: 500px;
        object-fit: cover;
    }
}


/* Panorama Sektion Setup */

.panorama-section {
    /* Vi lægger en 60% sort farve over billedet (0.6) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                      url('/assets/images/61-sandfangsbroend.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
}



/* Ikon Cirkler */
.icon-box {
    background-color: var(--primary-green);
    color: white;
    min-width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

/* Den nye orange ikon-boks */
.icon-box-orange {
    background-color: var(--secondary-orange); /* Din orange farve #f93 */
    color: white;
    min-width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

/* Hover effekt: Ikonet bliver hvidt med orange kant eller tekst */
.advantage-list .d-flex:hover .icon-box-orange {
    transform: scale(1.1);
    background-color: white;
    color: var(--secondary-orange);
}

/* Tekst-skygge for maksimal læsbarhed over billedet */
.panorama-section h2, 
.panorama-section h4 {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.panorama-section p {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.opacity-90 {
    opacity: 0.9;
}


.advantage-list .d-flex:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
    background-color: var(--secondary-orange);
}



/* Responsiv tilpasning */
@media (max-width: 991px) {
    .panorama-section {
        background-attachment: scroll;
        padding-top: 50px;
        padding-bottom: 50px;
    }
}


/* --- Mobile Responsiveness Adjustments --- */
@media (max-width: 991px) {
    .hero-video-wrapper { min-height: auto; padding: 80px 0; }
    .hero-content { text-align: center; }
    .display-3 { font-size: calc(1.525rem + 3.3vw); }
    .logo-img { height: 40px; }
}