/* Prevents horizontal scrolling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Ensure footer sticks to the bottom */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* Prevents unwanted horizontal scroll */
}

main {
    flex: 1; /* Pushes the footer down */
    width: 100%;
}

/* Logo Styling */
.logo-container {
    text-align: center;
    margin: 1em 0;
}
.logo {
    max-width: 150px;
    height: auto;
}

/* Header Styling */
header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;
}

.header-container {
    display: flex;
    justify-content:space-between ;
    align-items: center;
    margin: auto;
    width: 100%;
    max-width: 800px;
}

.header-container a{
    align-items: start;
}

.logo-container {
    display: flex;
    align-items: start;
    margin-left: 0px;
}

.logo {
    max-width: 150px;
    height: auto;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    background-color: transparent; /* Remove background */
    color: #d32f2f; /* Red text */
    font-family: 'Oswald', sans-serif; /* Bold and modern font */
    font-size: 1.5rem;
    font-weight: bold; /* Make text bold */
    padding: 10px 15px;
    margin-bottom: 10px;
    margin-right: 20px;
    text-decoration: none; /* Remove underline */
    display: inline-block;
}

.dropdown-toggle:hover {
    color: #a82323; /* Slightly darker red on hover */
    text-decoration: underline; /* Add underline on hover */
}

.menu {
    display: none; 
    list-style: none;
    padding: 10px 0;
    margin: 0;
    position: absolute;
    top: 40px;
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none; /* Hidden by default */
    flex-direction: column;
    min-width: 150px;
}

.menu li {
    margin: 0;
}

.menu li a {
    text-decoration: none;
    color: #333;
    font-family: 'Lato', sans-serif;
    padding: 10px 15px;
    display: block;
}

.menu li a:hover {
    background-color: #f5f5f5;
}

/* Show dropdown on hover */
.dropdown:hover .menu {
    display: flex;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dropdown {
        width: 100%;
        text-align: left;
    }

    
    .content{
        padding: 0 10px;
    }

    .menu {
        position: absolute;
        width: 100%;
        right: 0;
        left: 0.2;
        top: calc(100% + 5px); /* Place below the toggle */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .dropdown-toggle {
        width: 100%;
        text-align: center;
        padding: 10px 0; /* Adjust padding */
    }

}



/* Navigation Menu */
.stefnur {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1.5em;
}
.stefnur li a {
    text-decoration: underline;
    font-family: 'Lato', sans-serif;
    color: #333;
    font-size: 1rem;
    transition: color 0.3s ease;

}
.stefnur li a:hover {
    color: #007acc;
}

/* General Section Styling */
section {
    width: 100%;
    padding: 50px 20px;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
}

.about, .content {
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    text-align: left;
}

/* About Section */
.about {
    background-color: #ffffff; /* White background for contrast */
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.about h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #d32f2f; /* Red for header text */
    margin-bottom: 20px;
}
.about ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #555;
}
.about ul li {
    margin-bottom: 10px;
    line-height: 1.4;
}
.about p {
    margin-top: 20px;
    font-size: 1rem;
}

.about a{
    color: #007acc; /* Link color matches theme */
}

/* Content2 Section */
.Content2 {
    background-color: #ffffff; /* White background for contrast */
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.Content2 h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #d32f2f; /* Red for header text */
    margin-bottom: 20px;
}
.Content2 ul {
    margin: 0;
    padding: 1px;
    list-style: none;
    color: #555;
}
.Content2 ul li {
    margin-bottom: 15px;
    line-height: 1.6;
}

.content li {
    margin-bottom: 10px;
}

.content p {
    margin-bottom: 10px;
}
.Content2 p {
    margin-top: 20px;
    font-size: 1rem;
}

/* Companies Section */
.companies {
    background-color: #f9f9f9; /* Light grey background */
    text-align: left;
    padding: 50px 0;
}
.companies .inner-container {
    max-width: 760px;
    margin: 0 auto;
}
.companies h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    color: #d32f2f;
    margin-bottom: 20px;
}
.companies p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.8;
}


/* Full-Width Background for Companies-Owned Section */
.companiesowned {
    padding: 50px 0;
}
.companiesowned .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.companiesowned img {
    max-width: 80%;
    height: auto;
    border: none;
    margin: 0 auto;
}

/* Footer Styling */
footer {
    background-color: #282A2B;
    padding: 20px 0;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9rem;
    color: #333;
}

footer p{
    color: #f9f9f9;
}

.about, .companies, .content, .inner-container {
    padding: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .menu {
        flex-direction: column;
        align-items: center;
    }
    .menu li {
        margin-bottom: 0.5em;
    }
    .about, .companies, .content {
        padding: 40px;
    }
    .companiesowned img {
        max-width: 100%;
    }
}

/* Page Title Styling */
h1, h2 {
    font-family: 'Oswald', sans-serif;
    text-align: start;
    margin-bottom: 0.5em;
    font-size: 2rem;
    margin-top: 1rem;
}

h3 {
    font-family: 'Oswald', sans-serif;
    text-align: start;
    margin-bottom: 0.5em;
    font-size: 1.3rem;
    margin-top: 0.5rem;
    color: #d32f2f;
}

article li{
    margin-left: 20px;
}

/* Strongest Section */
.strongest-section {
    background-color: #f9f9f9; /* Light grey background */
    padding: 50px 20px;
    width: 100%;
    text-align: center;
    justify-content: center;
}

.strongest-section .inner-container {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Allows responsiveness */
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.strongest-section .strongest-text {
    flex: 1;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    
}

.strongest-section .strongest-text h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    text-align: center;
    color: #d32f2f; /* Red header text */
    margin-bottom: 15px;
}

.strongest-section .strongest-text p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
}

.strongest-section .strongest-image {
    flex: 1;
    text-align: center;
}

.strongest-section .strongest-image img {
    max-width: 300px;
    height: auto;
    display: inline-block;
    pointer-events: none; /* Disables pointer interaction on images */
}


/* Links Styling */
.about a,
.companies a {
    color: #007acc;
    text-decoration: none;
    font-weight: bold;
}
.about a:hover,
.companies a:hover {
    text-decoration: underline;
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {
    .about h1, .companies h1 {
        font-size: 1.8rem;
    }
    .strongest-header {
        text-align: center;
        font-size: clamp(1.5rem, 2.5vw + 1rem, 2rem);
        font-family: 'Oswald', sans-serif; /* Example styling */
        color: #d32f2f;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .strongest-section .inner-container {
        flex-direction: column; /* Stack items vertically */
        text-align: center;
    }
    .strongest-section .strongest-text {
        text-align: center;
    }
}

.page-title{
    padding-bottom: 0px;
}

.content .stefnulinks {
    max-width: 400px;
}

.content h2{
    color: #d32f2f; /* Red header text */
}

/* Container to ensure proper alignment */
#image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    max-width: 800px; /* Optional max-width for better layout */
    margin: auto;
}

#image-container img {
    display: block;
    width: 100%; /* Ensure the image scales responsively */
    height: auto;
    cursor: pointer; /* Indicate clickable areas */
    pointer-events: none; /* Disables pointer interaction on images */
}

/* Hover zones */
#image-container .hover-zone {
    position: absolute;
    top: 0;
    background: rgba(0, 0, 0, 0); /* Transparent by default */
    transition: background 0.3s ease;
    cursor: pointer;
    pointer-events: auto; /* Allow hover effects */
}

/* Left hover zone */
#image-container .left-hover {
    background: rgba(255, 0, 0, 0); /* Red overlay on hover */
}

#image-container .left-hover:hover {
    background: rgba(255, 0, 0, 0.3); /* Slightly transparent red */
}

/* Middle hover zone */
#image-container .middle-hover {
    background: rgba(0, 255, 0, 0); /* Green overlay on hover */
}

#image-container .middle-hover:hover {
    background:rgba(132, 117, 77, 0.4); /* Slightly transparent green */
}

/* Right hover zone */
#image-container .right-hover {
    background: #0000ff00; /* Blue overlay on hover */
}

#image-container .right-hover:hover {
    background: #0000ff4d; /* Slightly transparent blue */
}

/* Language switch layout */
.lang-switch {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto;
    padding-right: 20px;
    font-family: 'Oswald', sans-serif;
}

.lang-switch a {
    text-decoration: none;
    color: #b22222;
    font-weight: bold;
    font-size: 1.3rem;
    margin-left: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 6px 6px;
    margin-bottom: 4px;
}

.lang-switch a.active {
    background-color: #b22222;
    color: white;
    padding: 6px 6px;
    border-radius: 8px;
}

.lang-switch a:hover {
    background-color: #eee;
}