/* FONT VARIABLES */
        :root {
            --font-heading: 'Poppins', sans-serif;
            --font-paragraph: 'Poppins', sans-serif;
            --font-button: 'Inter', sans-serif;
            --color-light-green: #e8eede; /* Hero background */
            --color-primary-green: #1e8f52; /* Main CTA/Action Green */
            --color-dark-green: #0C1C13DE; /* Dark background sections */
            --color-text-dark: #212529; /* Standard dark text */
            --color-text-light: #f7f7f7; /* Text on dark backgrounds */
            --color-light-gray: #f0f0f0; /* Section divider */
        }

        body.contact-us {
            font-family: var(--font-paragraph);
            color: var(--color-text-dark);
            background-color: white; /* Default page background */
        }

        /* Reusable Heading Style for secondary headings (e.g., in the Contact section) */
        .page-heading-main {
            font-family: var(--font-heading);
            font-weight: 800; 
            font-size: 38px;
            text-align: center;
            margin-bottom: 50px;
        }

        /* --- BUTTON STYLES (Used across all sections) --- */
        .custom-btn {
            font-family: var(--font-button);
            font-weight: 600; 
            font-size: 18px;
            line-height: 26px;
            padding: 12px 25px;
            border-radius: .25rem; 
            text-decoration: none;
            transition: all 0.2s ease;
        }
        .btn-primary-custom {
            background-color: var(--color-primary-green);
            color: white;
            border: 1px solid var(--color-primary-green);
            border-radius: 50px;
        }
        .btn-primary-custom:hover {
            background-color: #1a7c45;
            border-color: #1a7c45;
            color: white;
        }
        .btn-outline-custom {
            background-color: transparent;
            color: var(--color-text-dark);
            border: 1px solid var(--color-text-dark);
        }
        .btn-outline-custom:hover {
            background-color: var(--color-light-gray);
            border-color: var(--color-text-dark);
            color: var(--color-text-dark);
        }
        
        /* --- TRACKING SECTION STYLES (image_36887f.jpg - Top Half) --- */
        .tracking-section {
            background-color: var(--color-dark-green);
            color: var(--color-text-light);
            padding: 60px;
            border-radius: 24px;
        }
        .tracking-heading {
            font-size: 40px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .tracking-input {
            background-color: transparent;
            border: 1px solid transparent;
            color: var(--color-text-light);
            padding: 10px 15px;
            font-size: 18px;
        }
        .order-finder {
            padding: 8px 8px 8px 24px;
            background-color: #FFFFFF1F;
            border-radius: 50px;
            overflow: hidden;
        }
        .tracking-input::placeholder {
            color: rgba(255, 255, 255, 0.6);
        }
        .tracking-btn {
            background-color: var(--color-primary-green);
            color: white;
            font-weight: 600;
            padding: 10px 20px;
            border: none;
            border-radius: 50px!important;
        }

        /* --- TIPS SECTION STYLES (image_36887f.jpg - Bottom Half) --- */
        .tips-section {
            padding: 50px 0;
        }
        .tips-image-box {
            background-image: url('../images/Til-at-sikre-dit-batteri.jpg');
            background-size: cover;
            background-position: center;
            height: 500px; 
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-bottom: 50px;
            text-align: center;
        }
        .tips-image-box h3 {
            font-family: var(--font-heading);
            font-size: 30px;
        }
        .tips-image-box h2 {
            font-family: var(--font-heading);
            font-size: 45px;
            font-weight: 500;
            max-width: 310px;
        }
        .tips-text-content ul {
            list-style: none;
            padding-left: 0;
        }
        .tips-text-content li {
            margin-bottom: 20px;
            padding-left: 20px;
            position: relative;
        }
        .tips-text-content li::before {
            content: '';
            position: absolute;
            left: -45px;
            top: -2px;
            background: url("../images/Idea.png") no-repeat center center / contain;
            width: 45px;
            height: 45px;
            border-radius: 50px;
        }
        
        /* --- CONTACT SECTION STYLES (image_3688bf.png) --- */
        .contact-section {
            padding: 80px 0;
        }
        .contact-card-dark {
            background-color: var(--color-dark-green);
            color: var(--color-text-light);
            padding: 40px;
            border-radius: 10px;
            height: 90%;
        }
        .contact-card-dark h3 {
            font-size: 36px;
            font-weight: 500;
            margin-bottom: 20px;
        }
        .contact-form .form-control, .contact-form .form-select {
            background-color: #FFFFFF1F;
            border: 1px solid #FFFFFF1F;
            color: var(--color-text-light);
            padding: 12px 30px;
            margin-bottom: 15px;
            border-radius: 5rem;
        }
        .contact-form textarea.form-control {
            border-radius: 10px!important;
        }
        select.form-select option {
            background-color: #45514b;
            padding: 10px!important;
        }
        .contact-form .form-control::placeholder, .contact-form .form-select {
            color: rgba(255, 255, 255, 0.7);
        }
        .contact-form .form-select {
            /* Fix for default select arrow visibility on dark backgrounds */
            appearance: none; 
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f7f7f7' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right .75rem center;
            background-size: 16px 12px;
        }
        .map-placeholder {
            /* Placeholder for the map image */
            background-image: url('https://via.placeholder.com/600x300/AAAAAA/FFFFFF?text=Map+Placeholder');
            background-size: cover;
            height: 300px;
            border-radius: 5px;
            margin-top: 20px;
        }
        .contact-info h4 {
            font-size: 30px;
            font-weight: 500;
            color: var(--color-text-dark);
            font-family: var(--font-paragraph);
        }

        /* Responsive Adjustments */
        @media (max-width: 992px) {           
            
            .tips-image-box {
                height: 300px;
                margin-bottom: 30px;
            }
            .contact-card-dark {
                height: 100%;
                padding: 40px 25px;
            }
            .contact-section {
                padding-bottom: 0px;
            }
            .time-table table.table.table-borderless {
                margin: auto;
            }
            .time-table h5.fw-bold {
                text-align: center;
            }
            .time-table table.table.table-borderless tr {
                display: flex;
                justify-content: space-between;
            }
        }