/* styles.css */


body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    color: #333;
    min-height: 100vh; /* Ensure full viewport height */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

header {
    position: fixed;
    height: 35px;
    width: 100%;
    z-index: 10;
    transition: background-color 0.1s ease;
    padding: 20px 0px; /* Adjust padding to center content */
    background-color: transparent; /* Replace this with your chosen color */
}

header.scrolled {
    transition: background-color 0.3s ease; /* Smooth transition */
    color: black; /* Adjust text color if needed */
    background-color: #152b3d; /* Replace this with your chosen color */
}

nav {
    display: flex;
    align-items: center; /* Aligns nav items properly */
    width: 100%; /* Allows space distribution */
}

.logo {
    display: flex;
    align-items: center;
    margin-top: -10px; /* Move nav links up (adjust value as needed) */
    margin-left: 10px;
}

/* Logo Styling */
.logo img {
    max-height: 60px;
    cursor: pointer; /* Shows pointer on hover */
    transition: transform 0.2s ease-in-out;
    width: auto;
    flex-shrink: 0; /* Prevents the logo from shrinking */
}

.logo:hover img {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Navigation Styling */
nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: auto; /* Pushes nav links to the right */
    margin-top: -40px; /* Move nav links up (adjust value as needed) */
}

nav ul li {
    margin: 0 20px; /* Space between each link */
}

nav ul li a {
    font-size: 20px;
    font-weight: 400; /* You can adjust the font weight */
    letter-spacing: 1px;
    color: rgb(255, 255, 255); /* Default link color */
    text-decoration: none; /* Remove underline */
}

nav ul li a:hover {
    color: #ff6600; /* Optional: hover effect */
}

/* Style the Contact link with a round brown background */
.contact-link {
    background-color: #152b3d; /* Brown background */
    color: white; /* Text color inside the background */
    padding: 10px 20px; /* Adds padding to make the background round */
    border-radius: 30px; /* Rounds the background */
    text-decoration: none; /* Removes underline */
    transition: color 0.3s ease; /* Optional for smoother transitions */
}

#contact-link:hover {
    background-color: rgb(245, 150, 50) !important; /* Hover color: Orange */
    color: white; /* Text color on hover */
}

.button-style {
    background-color: rgb(30, 63, 90); /* Initial color: Orange */
    color: white;
    padding: 10px 20px;
    border-radius: 30px; /* Makes the button round */
    text-decoration: none;
    transition: background-color 0.3s ease; /* Smooth transition for hover */
}

.insta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px; /* Adds space between the nav links and the button */
    background-color: transparent; /* No background */
    border-radius: 50%; /* Makes it round */
    width: 70px;
    height: 70px;
}

.insta-button img {
    width: 100%; /* Ensures it scales to the button size */
    height: auto;
    transition: transform 0.3s ease;
    margin-top: -40px; /* Move nav links up (adjust value as needed) */
}

.insta-button:hover img {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

.hero {
    background: url(images/HeaderDM6.png) no-repeat center center/cover;
    height: 85vh; /* Set the hero section height to 85% of the viewport height */
    background-size: cover; /* Ensure the background image covers the entire section */
    background-position: center center; /* Center the background image */
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    color: white;
    text-align: center;
    padding: 20px;
    position: relative;
    overflow: hidden; /* Ensures the background doesn't spill over the corners */
    width: 100%; /* Ensure the hero section spans the full width */
}


/* Dark overlay */
.hero::before {
    content: ''; /* Creates the overlay */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Adjust opacity (0.5 is 50% dark) */
    z-index: 1; /* Places the overlay above the background image */
}

.hero-content {
    position: relative; /* Moves the text above the overlay */
    z-index: 2; /* Ensures text stays above the overlay */
    color: white; /* Optional: Make text white for better contrast */
    max-width: 600px; /* Ensure the content width is manageable */
    text-align: left; /* Align text to the left */
    padding-left: 0; /* Remove extra padding on the left if present */
    margin-left: -100px; /* Negative margin to move content even further left */
    font-size: 16px; /* Ensure a consistent base font size */
    
    
}

/* Hero Section Text Styling */
.hero h1 {
    color: white; /* White text for visibility */
    letter-spacing: 3.5px; /* Corrected comma to a period for letter spacing */
    font-size: 4em;
    font-weight: 450;
    margin-bottom: -10px;
    white-space: nowrap; /* Prevents text from wrapping */
    text-align: left; /* Align text to the left */
    transform: translateX(0px); /* Move header further to the left */
}

.hero-text-container {
    text-align: left; /* Center-align both heading and subtext */
    margin: 0 auto; /* Centers the container horizontally */
    width: fit-content; /* Ensures the width of the container matches the text */
}


.hero-subtext {
    font-size: 26px; /* 2.5 times the root font size */
    font-weight: 400; /* Adjust font weight for better balance */
    color: #ffffff; /* Adjust color for visibility */
    letter-spacing: -1px; /* Reduce spacing between letters */
}

.hero p {
    font-size: 1,4rem;
    margin-top: 15px; /* Space above the main text */
    margin-bottom: 20px;
    letter-spacing: 1px; /* Adds space between the letters */
}

.hero .cta-button {
    color: white; /* Text color */
    padding: 15px 40px; /* Adds padding (top/bottom and left/right) */
    border-radius: 50px; /* Round shape */
    font-size: 1.2em; /* Text size */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Makes it inline but allows block properties */
    text-align: center; /* Centers the text */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effect */
    margin-top: 15px; /* Add space above the buttons */
}

.left-cta {
    background-color: #152b3d; /* Button background color */
}

.right-cta {
    margin-left: 10px; /* Adjust the value to move it further to the right */
    background-color: #f4a261; /* Button background color */
}

.cta-button:hover {
    background-color: #e67e22; /* Darker orange on hover */
    transform: scale(1.1); /* Slight zoom effect */
}

/* About Section */
.about {
    display: flex; /* Create a horizontal layout */
    flex-direction: row; /* Align text and images side by side */
    justify-content: space-between; /* Space between text and images */
    align-items: flex-start; /* Align items to the top */
    gap: 0px; /* Add space between the columns */
    padding: 20px; /* Add padding around the section */
    min-height: 100vh; /* Full height of the viewport */
    box-sizing: border-box; /* Ensure padding is included in the height calculation */
    position: relative;
}

.about-content {
    display: flex; /* Create a flex container for the text boxes */
    flex-direction: column; /* Stack text boxes vertically */
    gap: 0px; /* Reduce the spacing between the text boxes */
    max-width: 400px; /* Allocate 50% of the section for the text content */
    justify-content: flex-start; /* Align text boxes to the top of their container */
    align-items: center; /* Center the narrower boxes horizontally */
    margin-left: 20vh;
    margin-top: 4vh;
}

.text-box h3 {
    font-size: 1.8em; /* Increase heading size */
    font-weight: bold; /* Make headings stand out more */
    margin-bottom: 10px; /* Add some space below the heading */
}

.text-box p {
    font-size: 1.2em; /* Increase paragraph text size */
    line-height: 1.6; /* Improve readability with line height */
    margin-bottom: 0; /* Remove unnecessary bottom margin */
}

.about-box {
    background-color: #fff; /* White background for the text boxes */
    padding: 20px; /* Inner padding for text */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 80%; /* Make the boxes narrower relative to the container */
    max-width: 400px; /* Set a maximum width for the boxes */
    text-align: center; /* Optional: Center-align text inside the box */
    margin-bottom: -140px; /* Reduce the space between individual boxes */
    box-shadow: none; /* Remove the box shadow */
    border-radius: 0; /* Remove rounded corners */
}

.centered-text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(460px, -420px);
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 10px 20px;
    text-align: center;
    z-index: 1; /* Ensure it appears above other content */
    font-size: 1.3em;
    font-weight: 500;
}

.about-images {
    display: grid; /* Use grid layout for images */
    grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
    grid-auto-rows: auto; /* Rows adjust based on content */
    gap: 20px; /* Space between grid items */
    width: 50%; /* Allocate 50% of the section for images */
    justify-content: center; /* Center the grid */
    align-items: start; /* Align grid items to the top */
}

.about-images img {
    width: 100%; /* Ensure images fill their grid cell */
    max-width: 4000px; /* Set a max width for the images */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.about-images img:nth-child(1) {
    width: 110%; /* Scale the width of Image 1 */
    height: auto; /* Maintain aspect ratio */
    border-radius: 40%; /* Makes the image round */
    object-fit: cover; /* Ensures the image fits properly inside the circular frame */
    transform: translate(-60px, 40px); /* Move the image 20px up */
    position: relative; /* Enable positioning for overlap */
    z-index: 3; /* Bring Image 1 above Image 2 */
}

.about-images img:nth-child(2) {
    width: 95%; /* Scale the width of Image 1 */
    height: auto; /* Maintain aspect ratio */
    border-radius: 40%; /* Makes the image round */
    object-fit: cover; /* Ensures the image fits properly inside the circular frame */
    transform: translate(-40px, 120px); 
    position: relative; /* Enable positioning */
    z-index: 1; /* Ensure Image 2 is below Image 1 */
}

.about-images img:nth-child(3) {
    width: 140%; /* 50% of 1056px */
    height: auto; /* Maintain aspect ratio */
    border-radius: 40%; /* Makes the image round */
    object-fit: cover; /* Ensures the image fits properly inside the circular frame */
    transform: translate(70px, 0px); /* Move the image 20px up */
    position: relative; /* Enable positioning */
    z-index: 2; /* Ensure Image 2 is below Image 1 */
}

.about-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-text {
    width: 50%;
}

.about-image img {
    width: 100%;
    border-radius: 10px;
}

/* Services Section */
.services {
    display: flex; /* Create a horizontal layout */
    flex-direction: row; /* Align left and right sections side by side */
    justify-content: space-between; /* Space between left and right sections */
    align-items: center; /* Vertically center content */
    gap: 40px; /* Space between left and right sections */
    padding: 20px; /* Padding around the section */
    background-color: #e7e7d9; /* Beige background */
    height: 100vh; /* Full viewport height */
    box-sizing: border-box; /* Include padding in dimensions */
    border-radius: 100px; /* Add rounded edges to the background */
    position: relative; /* Ensure proper layering for overlapping */
    z-index: 1; /* Keep it above the project's right background */
}

.services-left {
    display: flex; /* Flex container for the left section */
    flex-direction: column; /* Stack groups vertically */
    justify-content: flex-start; /* Align groups to the top */
    align-items: flex-start; /* Align items to the very left */
    gap: 40px; /* Space between the top and bottom groups */
    width: 50%; /* Allocate 50% of the section for the left column */
    padding-left: 0; /* Ensure content starts at the very left */
    transform: translateX(50px); /* Move the content 20px to the right */
}

a {
    text-decoration: none; /* Remove underline from all anchor tags */
}

a button {
    text-decoration: none; /* Ensure buttons inside anchors have no underline */
    background: none; /* Remove default button styling if needed */
    border: none; /* Remove default button border if needed */
    cursor: pointer; /* Ensure cursor is a pointer for buttons */
}


.services-left .bottom-group {
    display: flex; /* Flex container for the bottom group */
    flex-direction: row; /* Arrange items horizontally */
    justify-content: flex-start; /* Align items to the very left */
    gap: 50px; /* Increase space between buttons and the image */
}

.services-left .top-group {
    display: flex; /* Flex container for the bottom group */
    flex-direction: row; /* Arrange items horizontally */
    justify-content: flex-start; /* Align items to the very left */
    gap: 50px; /* Increase space between buttons and the image */
}

.services-left .top-group img,
.services-left .bottom-group img {
    width: 300px !important; /* Force consistent width */
    height: 300px !important; /* Force consistent height */
    object-fit: cover !important; /* Ensure consistent aspect ratio */
    width: 100%; /* Make the image responsive */
    max-width: 500px; /* Increase the maximum width of the image */
    height: auto; /* Maintain the aspect ratio */
    object-fit: cover; /* Ensure the image fills its container */
    border-radius: 10px; /* Keep rounded corners */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* Enhance shadow for depth */
}

.services-left img,
.services-left button {
    width: 300px; /* Set width */
    height: 300px; /* Set height */
    object-fit: cover; /* Ensure images fit within their container */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}
.services-left button {
    background-color: #ffffff; /* Dark background */
    color: #3a3535; /* White text */
    display: flex; /* Center-align text */
    justify-content: center; /* Horizontally center text */
    align-items: center; /* Vertically center text */
    border: none; /* Remove default border */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    font-size: 1.5em; /* Increase font size for button text */
    font-weight: bold; /* Optional: Make text bold */
}
.services-left button:hover {
    background-color: #c79761; /* Slightly lighter color on hover */
}
.services-right {
    display: flex; /* Flex container for text boxes */
    flex-direction: column; /* Stack text boxes vertically */
    justify-content: center; /* Center text boxes vertically */
    align-items: center; /* Center text boxes horizontally */
    gap: 0px; /* Reduce space between text boxes */
    width: 50%; /* Allocate 50% of the width */
    height: 100%; /* Ensure the container spans the full height */
}

/* Text Box Styling */
.services-right .text-box {
    padding: 0px; /* Add padding inside the box */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    max-width: 400px; /* Limit the maximum width of the text boxes */
    width: 100%; /* Make text boxes responsive */
    position: relative; /* Allow text boxes to be shifted */
    box-shadow: none; /* Remove the box shadow */
    border-radius: 0; /* Remove rounded corners */
    margin: 0; /* Ensure no margin is applied */
}

/* Offset the first and second text boxes */
.services-right .text-box:first-child {
    transform: translateX(80px); /* Shift the first text box slightly to the left */
    margin-top: -5vh; /* Add extra space before the second text box */
}

.services-right .text-box:nth-child(2) {
    transform: translateX(-40px); /* Shift the second text box slightly to the right */
    margin-top: 10vh; /* Add extra space before the second text box */
}

.services-right .text-box h3 {
    margin-bottom: 10px; /* Space below the heading */
    color: #333; /* Darker text for contrast */
}

.services-right .text-box p {
    color: #424242; /* Softer text color */
}

/* Projects Section */
/* Projects Section */
.projects {
    display: flex; /* Use Flexbox for layout */
    position: relative; /* Allow overlapping elements */
    padding: 20px;
    background-color: #f9f9f9; /* Light background for the section */
    height: 100vh; /* Full viewport height */
    box-sizing: border-box; /* Include padding in dimensions */
    z-index: 2; /* Layer above the services background */
}

/* Right Background Area */
.projects-right {
    background-color: #e7ccb0; /* Apply the specified background color */
    width: 1100px; /* Set the width of the background area */
    height: 900px; /* Make it full height */
    position: absolute; /* Position it relative to the projects section */
    right: 120px; /* Align it to the right */
    top: -70px; /* Overlap slightly above the top of the projects section */
    z-index: 1; /* Ensure it sits below the services section */
    border-radius: 15%; /* Add a rounded corner where it overlaps */
    padding: 0px; /* Add padding for the images */
    display: grid; /* Use Grid for layout */
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    grid-template-rows: repeat(3, 1fr); /* 3 equal rows */
    gap: 5px; /* Space between images */
    justify-content: center; /* Center grid within container */
    align-items: center; /* Center grid vertically within container */
}

/* Projects Content */
.text-box-projects {
    position: relative; /* Allow offsets */
    flex: 1; /* Allow content to take remaining space */
    z-index: 1; /* Ensure it sits above the background area */
    max-width: 450px;
    left:8vh;
    top: 10vh;
}

.text-box-projects h2 {
    font-size: 1.8em; /* Define the size of the header text */
    font-weight: bold; /* Make the header text bold */
    color: #333; /* Define the text color */
    margin-bottom: 0px;
}

.text-box-projects h3 {
    font-size: 1.8em; /* Define the size of the header text */
    font-weight: bold; /* Make the header text bold */
    color: #333; /* Define the text color */
    margin-top: 0px;
    margin-bottom: 12px;
}

.text-box-projects p {
    font-size: 1.2em; /* Define the size of the paragraph text */
    line-height: 1.6; /* Improve readability with line height */
    margin-top: 0;
    margin-bottom: 16px;
}

.projects-right img {
    width: 70%;
    height: 70%; /* Maintain aspect ratio */
    border-radius: 10px; /* Add rounded corners to images */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
    object-fit: cover; /* Ensure images fill their cell without distortion */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    transform: translateX(60px); /* Push images 10px to the right */
    gap: 5px; /* Reduce space between pictures */
}

.projects-right img:hover {
    transform: scale(2); /* Slightly enlarge the image on hover */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); /* Enhance the shadow on hover */
}

.projects-gallery {
    display: flex;
    justify-content: space-around;
}

.project-item {
    width: 30%;
}

.project-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

/* Contact Section */
.contact {
    background-color: #152b3d; /* Set background color */
    color: #fff; /* White text color for contrast */
    text-align: center; /* Center-align text */
    display: flex; /* Flex layout for centering */
    justify-content: center; /* Center horizontally */
    flex-direction: row; /* Stack items vertically */
    height: 20vh;
}

/* Contact Wrapper */
.contact-wrapper {
    width: 100%; /* Full width container */
    max-width: 1200px; /* Limit the width */
    display: flex; /* Flex layout for text boxes */
    justify-content: center; /* Center-align the text boxes */
    align-items: center; /* Vertically align items */
}

/* Contact Section Paragraph */
.contact p {
    font-size: 1em; /* Adjust paragraph font size */
    line-height: 1.6; /* Improve readability */
    margin: 5px 0; /* Add minimal margin between paragraphs */
    margin-bottom: 20px; /* Add space below the paragraph */
}

/* Contact Section Heading */
.contact h2 {
    font-size: 1.8em; /* Adjust heading font size */
    margin-bottom: 10px; /* Add space below the heading */
}

.contact-text-boxes {
    display: flex; /* Arrange text boxes side by side */
    margin-left: 0px;
    color: white; /* Set the text color to white */
    text-decoration: none; /* Remove the underline */
}

.contact-text-boxes .text-box:nth-child(1) {
    position: relative; /* Ensure positioning is relative */
    left: -45vh; /* Move the first text box 20px to the right */
    top: 0vh; /* Move the first text box 10px down */
}

.contact-text-boxes .text-box:nth-child(2) {
    position: relative; /* Ensure positioning is relative */
    left: 68vh; /* Move the second text box 10px to the left */
    top: 0vh; /* Move the second text box 30px down */
}

/* Individual Text Box */
.contact-text-boxes .text-box {
    background-color: #f7bd8f; /* Light orange background */
    color: #363638; /* Dark blue text for contrast */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 400px; /* Make text boxes smaller */
    height: 150px;
    text-align: center; /* Center-align text */
    font-size: 1.2em; /* Increase font size for better readability */
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack text vertically */
}


.contact .contact-button {
    background-color: #214a6b;
    color: white;
    padding: 40px; /* Adjust padding to match header button */
    border: none;
    border-radius: 40px; /* Match the round shape of the header button */
    cursor: pointer;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s ease;
    transform: translate(-65vh, 6vh);
    height: 0px;
    font-size: 24px;
    line-height: 5px;
}

.contact .contact-button:hover {
    background-color: #1e3f5a; /* Optional hover effect */
}

@media (min-width: 769px) {
    .text-box.mobile-only {
        display: none; /* Hide the text box on screens wider than 1026px */
    }
}

/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 5px;
    margin-top: 0px;
    max-height: 5vh;
    line-height: 3px;
}

/* Hero section styles for services page */
.services-page .hero_tjenester {
    height: 35vh; /* Set height to half of the viewport */
    background-color: #152b3d; /* Set a solid background color */
    width: 100%;
    position: relative;
    margin: 0;
    padding-top: 60px; /* Account for header height */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: none; /* Ensure no background image is applied */
    border-bottom-right-radius: 150px;
    border-bottom-left-radius: 50px;
}  

.services-page .hero-content_tjenester {
    position: relative;
    color: white;
    z-index: 2;
    padding: 20px;
    max-width: 100%; /* Allow full width for positioning */
    display: flex;
    justify-content: space-between; /* Space out the h1 and p */
    align-items: center; /* Center vertically */
    margin-top: -100px;
}

.services-page .hero-content_tjenester h1 {
    font-size: 4em;
    margin-bottom: 20px;
    color: #ffffff;
    text-align: left; /* Align text to the left */
    flex: 1; /* Allow it to take up available space */
    margin-left: -200px; /* Move h1 further to the left */
}

.services-page .hero-content_tjenester p {
    font-size: 1.5em;
    margin-bottom: 30px;
    color: #ffffff;
    text-align: right; /* Align text to the right */
    flex: 1; /* Allow it to take up available space */
    margin-right: -200px; /* Move p further to the right */
}

.services-page .hero-content_tjenester > *:not(:last-child) {
    margin-right: 400px; /* Add space between h1 and p */
}

.services_tjenester {
    padding: 20px;
    background-color: #f9f9f9;
    z-index: 1; /* Base z-index for service items */
    min-height: 80vh;
}

.services-container_tjenester {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create a 2x2 grid */
    gap: 0px 0px; /* Space between grid items */
    justify-items: center; /* Center items horizontally */
    align-items: start; /* Align items to the top */
    z-index: 1; /* Base z-index for service items */
}

.service-item_tjenester {
    padding: 0px; /* Reduce padding to make boxes smaller */
    border-radius: 8px;
    width: 90%; /* Adjust width to fit within grid */
    max-width: 700px; /* Set a maximum width for the boxes */
    text-align: center; /* Center-align text inside the box */
    z-index: 1; /* Base z-index for service items */
    margin-top: 40px;
    text-align: left;
    font-size: 1.2em;

}

.dropdown-btn {
    background-color: #152b3d;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 30px;
    transition: 0.3s;
}

.dropdown-btn:hover {
    background-color: #2e5474;
}

/* Hidden content */
.dropdown-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 15px;
    transition: max-height 0.4s ease-out;
    display: none; /* Hide by default */
}

/* When active, expand content */
.dropdown-content.active {
    max-height: 200px;
    padding: 15px;
    display: block; /* Show when active */
}


.faq-section {
    padding: 20px;
    margin-top: 20px; /* Add top margin to create space above the FAQ section */
    margin-left: 50px;
}

.faq-container {
    max-width: 1300px; /* Increase max-width for longer width */
    margin: 0; /* Align container to the left */
}

.faq-item {
    margin-bottom: 35px;
}

.faq-question {
    width: 100%;
    padding: 30px; /* Maintain padding for consistent height */
    background-color: #bcc4d3;
    color: rgb(37, 35, 35);
    font-size: 22px;
    border: none;
    border-radius: 5px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.faq-question:hover {
    background-color: #456783;
}

.faq-answer {
    display: none;
    padding: 10px;
    background-color: #e7e7d9;
    border-radius: 10px;
    margin-top: 5px;
    font-weight: 500;
}

.faq-intro {
    margin-bottom: 50px; /* Space between the intro text and FAQ items */
    text-align: left; /* Align text to the left */
    max-width: 800px; /* Limit the width of the text box */
    margin-left: 0; /* Align the text box to the left */
}

.faq-intro h2 {
    font-size: 40px; /* Larger font size for the heading */
    margin-bottom: 10px; /* Space below the heading */
}

.faq-intro p {
    font-size: 24px; /* Standard font size for the paragraph */
    line-height: 1.5; /* Improve readability */
    font-weight: 500;
}


.info-section {
    padding: 40px;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
    min-height: 80vh; /* Increase the minimum height of the section */
    overflow: hidden;
}

.info-container {
    display: flex;
    justify-content: space-between; /* Space out text and images */
    align-items: center; /* Center items vertically */
    width: 100%; /* Ensure full width for centering */
    max-width: 1200px; /* Optional: Limit the maximum width */
}

.info-text {
    max-width: 800px; /* Adjust as needed */
    margin-right: 20px; /* Space between text and images */
    flex: 1; /* Allow the text box to take up available space */
    transform: translate(-200px, -50px); /* Move text up and to the left */
    margin-bottom: 40px; /* Add space below the paragraph */    
    margin-top: 100px;
}

.info-text h2 {
    font-size: 2em;
    margin-bottom: 10px;
}

.info-text p {
    font-size: 1.2em; /* Increase paragraph font size */
    line-height: 1.6; /* Maintain line height for readability */
    margin-bottom: 0px; /* Maintain space below the paragraph */
}

.info-images {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between top and bottom images */
    flex: 1; /* Allow the images to take up available space */
    transform: translate(280px, -200px); /* Move text up and to the left */
}

.top-images {
    display: flex;
    gap: 10px; /* Space between the two top images */
}

.top-images img,
.bottom-image img {
    width: 100%;
    border-radius: 45%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.bottom-image img {
    max-width: 420px; /* Adjust as needed for larger image */
}

.top-images img:first-child {
    transform: translate(-300px, 220px); /* Move the first top image slightly right */
    max-width: 450px;
}

.top-images img:last-child {
    transform: translate(-350px, 280px); /* Move the second top image slightly left */
    max-width: 400px;
}

.bottom-image img {
    transform: translate(-250px, 160px); /* Move the bottom image slightly down */
    max-width: 550px;
}

.details-section {
    padding: 40px;
    margin-top: 40px; /* Add space above the section */
    height: 70vh;
}

.details-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px; /* Increase max-width to allow more space */
    margin: 0 auto;
    text-align: left;
    width: 100%; /* Ensure full width usage */
}

.info-text-boxes {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Increase space between text boxes */
    max-width: 600px; /* Increase width of text boxes */
    margin-top: 150px; /* Move text boxes further down */
}

.text-box-details {
    color: #292727;
    padding: 20px;
    background-color: #f7bd8f;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%; /* Ensure full width within container */
    text-align: center;
    font-weight: 400; /* Use normal weight */
    font-family: 'Poppins', sans-serif; /* Ensure correct font family */
}

.info-text-boxes .text-box-details:nth-child(2) {
    background-color: #152b3d; /* Change to your desired background color */
    color: #ffffff;
    margin-top: 20px;
    text-decoration: none; /* Remove the underline */
}

.info-text-boxes .text-box-details a {
    color: #ffffff; /* Set the text color to white */
    text-decoration: none; /* Remove the underline */
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between form elements */
    max-width: 700px; /* Ensure this is set to the desired width */
    width: 100%; /* Allow the form to take full width of its container */
    transform: translateX(100px); /* Move form slightly to the left */
    margin-top: 0px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    padding: 15px; /* Increase padding for more height */
    border: 1px solid #152b3d;
    border-radius: 15px;
    font-size: 1em;
    height: 20px; /* Set a specific height for input fields */
}

.form-group textarea {
    height: auto; /* Allow textarea to adjust based on content */
    min-height: 100px; /* Set a minimum height for textarea */
}

.submit-button {
    padding: 10px 20px;
    max-width: 200px;
    background-color: #f7bd8f;
    color: rgb(43, 40, 40);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600; /* Make the font bolder */
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #1e3f5a;
}

/* Thank You Section */
.thank-you-section {
    height: 50vh; /* Set height to 50% of the viewport */
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    background-color: #f0f0f0; /* Light background color */
    text-align: center; /* Center-align text */
    padding: 20px; /* Add padding around the section */
}

.thank-you-section .text-box {
    background-color: #ffffff; /* White background for the text box */
    padding: 20px; /* Inner padding for text */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    max-width: 600px; /* Limit the maximum width of the text box */
    width: 100%; /* Make text box responsive */
    margin-bottom: 20px; /* Space below the text box */
}

.thank-you-section .button {
    background-color: #152b3d; /* Button background color */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding for the button */
    border-radius: 30px; /* Rounded button */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s ease; /* Smooth transition for hover */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 1em; /* Button text size */
}

.thank-you-section .button:hover {
    background-color: #1e3f5a; /* Darker color on hover */
}

/* Hide Mobile Header by Default on Wide Screens */
#mobile-header {
    display: none;
}

/* Show Mobile Header Only on Small Screens */
@media (max-width: 1026px) and (orientation: portrait) {
    #mobile-header {
        display: flex;
        flex-direction: column;
        align-items: left;
        padding: 10px;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 1000;
        height: 50px;
    }

    .menu-toggle {
        border: none;
        font-size: 24px;
        color: white;
        cursor: pointer;
        padding: 10px;
        position: absolute;
        top: 10px;
        z-index: 1001;
        border-radius: 20%;
        background-color: #152b3d;
        width: 70px;
    }

    .menu-toggle-side {
        border: none;
        font-size: 24px;
        color: white;
        cursor: pointer;
        padding: 10px;
        position: absolute;
        top: 10px;
        z-index: 1001;
        border-radius: 20%;
        background-color: #152b3d;
        width: 70px;
    }

    /* Dropdown Menu (Initially Hidden) */
    .nav-links {
        display: none; /* Hide menu by default */
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 26%;
        width: 65%;
        z-index: 1000;
        padding: 10px 0;
        background-color: #1e405c; /* Set background color to blue */
        border-radius: 20%; /* Remove rounded corners for a square look */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for depth */
    }
    
    .nav-links.active {
        display: flex; /* Show menu when active */
    }

    .nav-links li {
        margin: 10px 0;
        text-align: center; /* Center-align text */
    }

    .nav-links a {
        color: rgb(255, 255, 255);
        text-decoration: none;
        font-size: 18px;
        padding: 10px;
        display: block;
    }

    .nav-links a:hover {
        background-color: #ff6600;
    }

    /* Remove background color for "Kontakt oss" button on mobile */
    .nav-links a.button-style {
        background-color: transparent; /* Remove background color */
    }

}


@media (max-width: 1026px) and (orientation: portrait) {
    .hero {
        height: 60vh; /* Adjust height for smaller screens */
        padding: 10px; /* Adjust padding for mobile */
        background-size: cover; /* Ensure the image covers the section */
        background-position: center; /* Center the image */
        width: 100%; /* Ensure the hero section spans the full width */
    }

    .hero-content {
        margin-left: 30px;
    }

    .hero h1 {
        font-size: 2em; /* Adjust font size for mobile */
        letter-spacing: 1px; /* Adjust letter spacing for mobile */
    }

    .hero p {
        font-size: 1em; /* Adjust font size for mobile */
        letter-spacing: 0.5px; /* Adjust letter spacing for mobile */
        max-width: 350px;
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .centered-text-box {
        position: absolute; /* Position the text box absolutely */
        z-index: 10; /* Ensure it stays above other elements */
        transform: translate(-50%, 0); /* Center the text box horizontally */
        left: 50%; /* Center the text box horizontally */
        top: 75vh; /* Position it above the images */
        background-color: transparent;
        width: 100%; /* Increase the width of the text box */
        max-width: 400px; /* Set a maximum width */
        text-align: center; /* Center the text within the box */
    }

    .about {
        padding: 10px; /* Adjust padding for smaller screens */
        min-height: auto; /* Allow height to adjust based on content */
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .about-content {
        width: 100%; /* Ensure full width of the content container */
        max-width: 800px; /* Set a maximum width for larger screens */
        margin-left: auto; /* Center the content horizontally */
        margin-right: auto; /* Center the content horizontally */
        min-height: 1500px; /* Increase the minimum height of the section */
    }

    .about-box {
        width: 100%; /* Ensure full width within the container */
        transform: translateY(-20px); /* Move each text box 20px up */
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .about-images {
        order: 2; /* Ensure images are displayed after text */
        width: 100%; /* Ensure full width of the container */
        display: flex;
        flex-direction: column; /* Stack images vertically */
        align-items: center; /* Center images horizontally */
        margin-top: 5vh; /* Use viewport height for vertical spacing */
        transform: translate(-37vh, 70vh); /* Move images further to the left and down */
        padding: 10px;
        gap: 10px;
    }

    .about-images img:nth-child(1),
    .about-images img:nth-child(2),
    .about-images img:nth-child(3) {
        width: 90vw; /* Use viewport width for image width */
        height: auto; /* Maintain aspect ratio */
    }

    .about-images img:nth-child(1) {
        transform: translateY(12vh); /* Use viewport height for vertical translation */
    }

    .about-images img:nth-child(2) {
        transform: translateY(8vh); /* Use viewport height for vertical translation */
    }

    .about-images img:nth-child(3) {
        transform: translateY(4vh); /* Use viewport height for vertical translation */
    }

}

@media (max-width: 1026px) and (orientation: portrait) {
    .services-section {
        clear: both; /* Ensure no floating elements affect this section */
        padding-top: 5vh; /* Add space above the services section */
        margin-top: 5vh; /* Add margin to ensure separation from the about images */
    }

    .services-left {
        display: none; /* Hide the services-left section */
    }
}

@media (max-width: 1026px) and (orientation: portrait) { 
    .services {
        transform: translate(0px, -160px);
        height: 80vh;
        width: 100%;
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .services-right .text-box {
        width: 170%; /* Increase the width of the text boxes */
        max-width: 600px; /* Set a maximum width for larger screens */
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .services-right .text-box:nth-child(2) {
        margin-top: -20px;
        transform: translate(90px, 0px);
    }

    .faq-section {
        margin-left: 0px;
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .projects {
        height: 60vh; /* Increase the height of the projects section */
        margin-bottom: 20px; /* Add space below the projects section */
        transform: translate(0px, -100px);
        
    }

    .text-box-projects {
        display: none; /* Hide the projects-left section */
    }

    .projects-right {
        transform: translate(100px, -50px);
        gap: 0px; /* Reduce space between images */
        grid-template-columns: repeat(2, 1fr); /* Create two equal columns */
        width: 95%; /* Reduce the width of the images */
        max-width: none; /* Remove any maximum width constraints */
        height: auto; /* Ensure the height is 100% of the container */
        min-height: 600px;
        left: -95px;
        margin-top: 10px;
        margin-bottom: 40px; /* Increase space below the projects-right section */
        clear: both; /* Ensure no floating elements affect this section */
    }

    .projects-right img {
        transform: translateX(30px); /* Move images 20px to the left */
    }

    .contact-section {
        padding-top: 40px; /* Add space above the contact section */
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .contact-text-boxes {
        display: none;
    }

    .text-box.mobile-only {
        width: 200px;
        height: 100px;
        transform: translate(0px, 0px);
        background-color: #152b3d;
        color: rgb(255, 255, 255);
        border-radius: 20px;
        font-weight: 400;
        font-size: 1em;
        text-align: center;
        display: flex; /* Use flexbox for layout */
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        flex-direction: column; /* Stack text vertically */
        padding: 0px; /* Optional: Add padding for better appearance */
        margin: 0px;
        line-height: 1.2; /* Adjust line height to reduce space between lines */
    }

    .text-box.mobile-only a {
        color: #ffffff; /* Set the text color to white */
        text-decoration: none; /* Remove the underline */
    }

    .contact .contact-button {
        width: auto; /* Allow the button to size based on its content */
        padding: 10px 20px; /* Add padding to ensure text fits well */
        height: 45px; /* Allow height to adjust based on content */
        line-height: normal; /* Ensure line height is normal */
        font-size: 1em; /* Adjust font size if needed */
        margin: 0 10px; /* Add margin to separate the button from text boxes */
        transform: translate(0px, 20px);
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    #header {
        background-color: transparent !important; /* Ensure the header remains transparent */
    }

    header.scrolled {
        background-color: transparent !important; /* Ensure the header remains transparent */
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .services-page .hero-content_tjenester {
        margin-left: auto; /* Center horizontally */
        margin-right: auto; /* Center horizontally */
        text-align: center; /* Center text within the container */
        max-width: 100%; /* Optional: Limit the width for better centering */
        transform: translateX(0); /* Reset any previous horizontal translation */
        padding: 0px;
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .services-page .hero-content_tjenester h1 {
        transform: translateX(250px);
        font-size: 40px;
        margin-top: 210px;
    }

    .services-page .hero-content_tjenester p {
        transform: translateX(-250px);
        margin-top: 20px;
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .insta-button {
        display: none; /* Hide the Instagram button */
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .service-item_tjenester {
        width: 100%; /* Ensure full width of the container */
        max-width: 800px; /* Set a maximum width for larger screens */
        display: flex !important; /* Use flexbox for layout */
        flex-direction: column !important; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        justify-content: flex-start; /* Align items to the top */
    }

    .services-container_tjenester {
        display: flex !important; /* Override grid layout */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        justify-content: flex-start; /* Align items to the top */
        width: 100%; /* Ensure full width */
    }

    .dropdown-content {
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        justify-content: flex-start; /* Align items to the top */
        width: 100%; /* Ensure full width */
        max-height: 0; /* Initially hidden */
        overflow: hidden; /* Hide overflow */
        transition: max-height 0.4s ease-out; /* Smooth transition */
    }

    .dropdown-content.active {
        max-height: 1000px; /* Large enough to show all content */
        overflow: visible; /* Allow content to be fully visible */
    }

}

@media (max-width: 1026px) and (orientation: portrait) {
    .info-container {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align items to the left */
    }

    .info-text {
        order: 1; /* Ensure text comes first */
        width: 100%; /* Full width for text */
        margin-bottom: 20px; /* Space between text and images */
        margin-left: 200px;
    }

    .info-images {
        order: 2; /* Ensure images come after text */
        width: 67%; /* Full width for images */
        display: flex;
        flex-direction: column; /* Stack images vertically */
        align-items: center; /* Center images horizontally */
        transform: translate(260px, -200px);
    }

    .top-images img,
    .bottom-image img {
        width: 100%; /* Ensure images take full width of their container */
        max-width: none; /* Remove any maximum width constraints */
        margin-bottom: 10px; /* Space between images */
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .details-container {
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
    }

    .info-text-boxes {
        order: 1; /* Ensure text boxes are at the top */
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Stack text boxes vertically */
        align-items: center; /* Center text boxes horizontally */
        width: 100%; /* Ensure full width usage */
        margin-bottom: 20px; /* Space between text boxes and contact form */
        margin-top: -20px;
    }

    .info-text-boxes .text-box-details {
        flex: none; /* Remove flex growth */
        width: 100%; /* Ensure full width of each text box */
        max-width: 600px; /* Set a maximum width to prevent overflow */
        text-align: center; /* Center text within each box */
        margin-bottom: 10px; /* Space between text boxes */
    }

    .contact-form {
        order: 2; /* Ensure the contact form is below the text boxes */
        width: 80%; /* Ensure the form takes full width */
        margin-left: -200px;
        margin-top: 20px;
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .info-text-boxes .text-box-details:nth-child(2) {
        margin-top: 0px;
        max-width: 600px; /* Ensure consistent max-width */
    }
}

@media (max-width: 1026px) and (orientation: portrait) {
    .details-section {
        min-height: 950px; /* Adjust height for mobile screens */
    }
}

@media (min-width: 822px) and (max-width: 1025px) and (min-height: 1025px) {

    .hero-text-container {
        font-size: 1.75em;
        margin-left: -5vh;
        transform: scale(1.2);
    }  
    
    .hero-content_tjenester {
        font-size: 1.55em;
    }

    .left-cta {
        transform: scale(1.4) translate(-4vh, 2vh);
    }

    .right-cta {
        transform: scale(1.4) translate(0vh, 2vh);
    }
    
        .text-box {
            font-size: 1.6em; /* Slightly smaller font size */
            text-align: center; /* Centers the text horizontally */
            width: 55vh;
            margin-left: 5vh;
        }
    
        .text-box h3 {
            font-size: 1.6em; /* Adjust heading size */
        }
    
        .text-box p {
            font-size: 1.4em; /* Adjust paragraph size */
        }

        .logo {
            transform: scale(1.8) translate(1vh, 1vh);
        }
    
        .menu-toggle {
            transform: scale(1.8) translate(36vh, 1vh);
        }
    
        .menu-toggle-side {
            transform: scale(1.8) translate(36vh, 1vh);
        }

        .nav-links {
            transform: scale(1.3) translate(4vh, 4vh);
        }
    
        .centered-text-box {
            margin-top: 15vh;
            margin-left: -2vh;
            font-size: 2.5em;
        }
    
        .about {
            margin-top: -5vh;
            height: 265vh;
            margin-left: 5vh;
        }
    
        .about-images {
            margin-left: -25vh;
            margin-top: 22vh;
        }
    
        .services {
            height: 100vh;
        }
    
        .services-right .text-box:nth-child(1) {
            margin-left: 17vh;
        }
        
        .services-right .text-box:nth-child(2) {
            margin-left: 17vh;
        }
    
        .projects {
            height: 90vh;
            margin-left: 2vh;
        }
    
        .projects-right {
            height: 100vh;
        }

        .text-box.mobile-only {
            margin-left: -20vh;
            font-size: 1.3em;
        }

        .contact .contact-button {
            transform: scale(1.9) translate(-5vh, 4vh);
        }

        .services_tjenester {
            font-size: 1.5em;
        }

        .dropdown-btn {
            transform: scale(1.6);
        }

        footer {
            font-size: 1.4em;
        }

        .faq-question {
            font-size: 1.7em;
        }

        .faq-answer {
            font-size: 1.7em;
        }

        .faq-intro h2 {
            font-size: 2.4em;
        }

        .faq-intro p {
            font-size: 2.1em;
        }

        .info-container {
            margin-left: 5vh;
        }

        .info-text h2 {
            font-size: 2.4em;
        }

        .info-text p {
            font-size: 2.1em;
        }

        .info-images {
            transform: scale(1.2) translate(20vh, -14vh);
        }

        .details-section {
            height: 85vh;
        }

        .info-text-boxes {
            font-size: 1.5em;
        }

        .contact-form {
            font-size: 1.7em;
        }

        .submit-button {
            font-size: 1.2em;
        }

    }

    

@media (min-width: 771px) and (max-width: 821px) {

    .hero-text-container {
        font-size: 1.65em;
        margin-left: -5vh;
    }  

    .left-cta {
        transform: scale(1.2) translate(-3vh, 0vh);
    }

    .right-cta {
        transform: scale(1.2);
    }
    
        .text-box {
            font-size: 1.4em; /* Slightly smaller font size */
            text-align: center; /* Centers the text horizontally */
            width: 55vh;
            margin-left: 0px;
        }
    
        .text-box h3 {
            font-size: 1.4em; /* Adjust heading size */
        }
    
        .text-box p {
            font-size: 1.2em; /* Adjust paragraph size */
        }

        .nav-links {
            transform: scale(1.2);
        }
    
        .menu-toggle {
            right: 50px; /* Increase this value to move the button further left */
        }
    
        .menu-toggle-side {
            right: 30px; /* Increase this value to move the button further left */
        }
    
        .centered-text-box {
            margin-top: -0vh;
            margin-left: -2vh;
            font-size: 1.8em;
        }
    
        .about {
            margin-top: -5vh;
            height: 240vh;
            margin-left: 5vh;
        }
    
        .about-images {
            margin-left: -21vh;
            margin-top: 5vh;
        }
    
        .services {
            height: 80vh;
        }
    
        .services-right .text-box:nth-child(1) {
            margin-left: 17vh;
        }
        
        .services-right .text-box:nth-child(2) {
            margin-left: 17vh;
        }
    
        .projects {
            height: 85vh;
            margin-left: 2vh;
        }
    
        .projects-right {
            height: 100vh;
        }

        .text-box.mobile-only {
            margin-left: -20vh;
            font-size: 1.2em;
        }

        .contact .contact-button {
            transform: scale(1.5) translate(-5vh, 5vh);
        }
    }

@media (min-width: 440px) and (max-width: 770px) {

.hero-text-container {
    font-size: 1.4em;
    margin-left: -5vh;
}   

.left-cta {
    transform: scale(1.2) translate(-3vh, 0vh);
}

.right-cta {
    transform: scale(1.2);
}

    .text-box {
        font-size: 1.4em; /* Slightly smaller font size */
        width: 55vh;
        text-align: center; /* Centers the text horizontally */
        margin-left: 35px;
    }

    .text-box h3 {
        font-size: 1.4em; /* Adjust heading size */
    }

    .text-box p {
        font-size: 1.2em; /* Adjust paragraph size */
    }

    .menu-toggle {
        right: 50px; /* Increase this value to move the button further left */
    }

    .menu-toggle-side {
        right: 30px; /* Increase this value to move the button further left */
    }

    .centered-text-box {
        margin-top: 20vh;
        margin-left: -2vh;
        font-size: 1.4em;
    }

    .about {
        height: 270vh;
        margin-left: 5vh;
    }

    .about-images {
        margin-left: -25vh;
        margin-top: 20vh;
    }

    .services {
        height: 80vh;
    }

    .services-right .text-box:nth-child(1) {
        margin-left: 17vh;
    }
    
    .services-right .text-box:nth-child(2) {
        margin-left: 17vh;
    }

    .projects {
        height: 85vh;
    }

    .projects-right {
        height: 100vh;
    }

    .contact .contact-button {
        transform: scale(1.5) translate(-5vh, 5vh);
    }

    .text-box.mobile-only {
        margin-left: -20vh;
        font-size: 1.1em;
    }
}

@media (max-width: 433px) {
    .text-box {
        font-size: 1.2em; /* Slightly smaller font size */
        width: 35vh;
    }

    .text-box h3 {
        font-size: 1.2em; /* Adjust heading size */
    }

    .text-box p {
        font-size: 1em; /* Adjust paragraph size */
    }

    .menu-toggle {
        right: 50px; /* Increase this value to move the button further left */
    }

    .menu-toggle-side {
        right: 30px; /* Increase this value to move the button further left */
    }

    .about {
        height: 195vh;
        margin-left: 3vh;
    }

    .services {
        height: 80vh;
    }

    .projects {
        height: 45vh;
    }

    .projects-right {
        height: 55vh;
    }
}

/* For screens 375px and smaller */
@media (max-width: 392px) {
    .text-box {
        font-size: 1.2em; /* Smaller font size */
        width: 38vh;
    }

    .text-box h3 {
        font-size: 1.1em; /* Adjust heading size */
    }

    .text-box p {
        font-size: 1em; /* Adjust paragraph size */
    }

    .menu-toggle-side {
        right: 40px; /* Increase this value to move the button further left */
    }

    .about {
        height: 240vh;
        margin-left: 2vh;
    }

    .centered-text-box {
        margin-top: 28vh;
    }

    .about-images {
        margin-left: -2vh;
        margin-top: 28vh;
    }

    .services {
        height: 110vh;
    }

    .projects {
        height: 52vh;
    }

    .projects-right {
        height: 58vh;
    }
}

/* For screens 320px and smaller */
@media (max-width: 376px) {


    .text-box {
        font-size: 1.1em; /* Even smaller font size */
        width: 45vh;
    }

    .text-box h3 {
        font-size: 1em; /* Adjust heading size */
    }

    .text-box p {
        font-size: 0.90em; /* Adjust paragraph size */
    }

    .hero_tjenester {
        height: 45vh !important;
    }

    .menu-toggle-side {
        right: 60px; /* Increase this value to move the button further left */
    }

    .about {
        height: 250vh;
    }

    .about-images {
        margin-left: -9vh;
    }

    .services {
        height: 100vh;
    }

    .projects {
        height: 57vh;
    }

    .projects-right {
        height: 65vh;
    }
}

@media (max-width: 350px) {


    .hero-content_tjenester {
        left: -30px;
    }

    .text-box {
        font-size: 1.2em; /* Even smaller font size */
        width: 35vh;
    }

    .text-box h3 {
        font-size: 1.1em; /* Adjust heading size */
    }

    .text-box p {
        font-size: 1em; /* Adjust paragraph size */
    }

    .hero_tjenester {
        height: 45vh !important;
    }

    .menu-toggle-side {
        right: 55px; /* Increase this value to move the button further left */
    }

    .about {
        height: 200vh;
    }

    .about-images {
        margin-left: 0vh;
    }

    .centered-text-box {
        margin-top: 11vh;
    }

    .services {
        height: 100vh;
    }

    .projects {
        height: 57vh;
    }

    .projects-right {
        height: 65vh;
    }
}