/* Base styles */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 60px 0 0; /* Top padding for space */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: auto;
    min-height: 90vh;
    
}

/* Gør billedet fast i toppen af siden */
.fixed-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1000;
    background-color: white; /* Tilføjer en hvid baggrund */
    text-align: center; /* Centrerer billedet */
    padding: 15px 0; /* Tilføjer lidt padding over og under billedet */
}

/* Juster billedet til en mindre størrelse */
.fixed-image img {
    width: 100px; /* Sætter billedets bredde til 150px */
    height: auto; /* Bevarer billedets proportioner */
}

.pinterest-link {
    position: fixed; /* Fixed position so it stays on the screen */
    bottom: 5vw; /* Position above the footer */
    right: 2vw; /* Stick to the right side of the screen */
    z-index: 1000; /* Ensure it's above other content */
}

.pinterest-icon {
    width: 50px; /* Size of the Pinterest icon */
    height: 50px; /* Ensures the icon is square */
    border-radius: 50%; /* Optional: Makes the icon circular */
    transition: transform 0.3s ease; /* Smooth animation on hover */
}

.pinterest-icon:hover {
    transform: scale(1.1); /* Enlarges the icon slightly when hovered */
}

.container {
    width: 80%;
    max-width: 1000px;
      margin-top: 30px; /* Juster denne værdi afhængig af billedets højde og padding */
}

.intro-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
  
}

.intro-section p, .intro-section img {
    margin-right: 20px; /* Space between text and image */
  word-wrap: break-word; /* Tillader ord at brydes, hvis de er for lange */
  font-size: 1.4em;
}

.intro-section img {
    flex-shrink: 0; /* Prevents image from shrinking */
}
.intro-section, .when-to-use, .when-not-to-use, p {
    margin-bottom: 30px; /* Increase bottom margin for more space above h2 */
  
}


/* Styling for ordered lists in when-to-use and when-not-to-use sections */
.when-to-use ol, .when-not-to-use ol {
    list-style-type: decimal;
    padding-left: 20px;
  padding-left: 40px; /* Flyt listen 40px til højre */
  font-weight: bold;
}

/* Unified styling for list items */
.when-to-use li, .when-not-to-use li, p, li {
    text-align: left;
    line-height: 1.7;
    margin-bottom: 20px;
  
}

.right-aligned-image {
    float: right;
    margin-left: 20px; /* Space between the image and text */
    max-height: 100px; /* Example value, adjust based on your design needs */
    width: auto; /* Adjust width to maintain aspect ratio */
}


/* Heading and paragraph styling */
h1 {
    text-align: left;
    font-size: 3.8em;
    margin-top: 20px;
  
}

h2 {
    margin-top: 50px; /* Adds more space above each h2 heading */
	font-size: 2.2em;
}

h3 {
    font-size: 1.3em; /* Adjusts the font size of h3 headings to make them smaller */
}

p {
    margin-top: -15px; /* Adds more space above each h2 heading */
  font-size: 1.2em;
}

.footer {
    width: 100%;
	background-color: white;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between; /* Justerer til at fordele børneelementerne */
    align-items: center;
    padding: 10px;
}

a {
    text-decoration: none;
    display: flex; /* Sikrer, at flex egenskaber gælder for links */
    justify-content: center; /* Centrerer indholdet i linket */
    align-items: center; /* Centrerer indholdet vertikalt i linket */
}
.footer a {
    flex: 1; /* Giver alle links lige meget plads */
    margin: 0 10px; /* Justerer margin for at undgå overlap */
}

.footer a:nth-child(1) img, 
.footer a:nth-child(2) img, 
.footer a:nth-child(3) img {
    height: auto; /* Maintains the image's aspect ratio */
    max-width: calc(4vw); /* Dynamically adjusts the width based on the viewport's width */
}

.footer a:nth-child(4) img {
	height: auto; /* Maintains the image's aspect ratio */
    max-width: calc(10vw); /* Dynamically adjusts the width based on the viewport's width */
}

/* Specifikke justeringer for hvert billede */
.footer .first-image, .footer .image:nth-child(2), .footer .second-image, .footer .image:nth-child() {
    flex: 0 1 33%; /* Gør at de fylder præcis 1/3 af footeren og kan tilpasse sig */
}

.footer .image:nth-child(4) {
    flex: 0 1 33%; /* Gør at billedet fylder den sidste tredjedel */

}

img {
    max-width: 100%; /* Tillader billeder at udvide op til deres max bredde */
}

.first-image, .second-image, .third-image, .fourth-image {
    flex: 0; /* Nulstiller flex-værdien */
}

.container p:last-of-type {
  margin-bottom: 20px; /* Adjust this value to match or exceed the height of your footer */
}

.footer-content {
    display: flex;
    justify-content: left;
    align-items: left; /* Aligns the content vertically */
    width: 100%;
    padding-bottom: 40px; /* Move content up within the footer */
   gap: 20px;
}

/* Style for the anchor and image */
.second-image img {
    width: 5vw; /* Use viewport-relative units to adjust size based on screen width */
    max-width: 25px; /* Maximum size limit to prevent it from getting too large */
    height: auto;
    transform: rotate(0deg); /* Rotate image 45 degrees */
    transition: transform 0.3s ease;
   margin-bottom: 0; /* Ensure no extra margin at the bottom */ 	
}

/* Set the button background to black and text to white */
.iubenda-tp-btn.iubenda-cs-preferences-link {
    background-color: black !important; /* Set background color to black */
    color: white !important; /* Set text color to white */
    border: none !important; /* Remove any border */
}
/* Ensure the Iubenda consent banner is positioned at the bottom left */
#iubenda-cs-banner, 
#iubenda-cs-banner .iubenda-cs-container {
    bottom: 0 !important; 
    left: 0 !important; 
    right: auto !important; 
    margin: 0 !important; 
    text-align: left !important;
}

/* Ensure the floating preferences button is positioned at the bottom left */
#iubenda-cs-floating-button {
    bottom: 10px !important; 
    left: 10px !important; 
    right: auto !important;
}

/* Customize button styles */
.iubenda-cs-customize-button, 
.iubenda-cs-reject-button,
.iubenda-cs-close-link {
    bottom: 1px !important;
    left: 1px !important;
    right: auto !important;
}

/* Override any inline styles set by Iubenda */
.iubenda-banner-content {
    text-align: left !important;
}

.iubenda-banner .iubenda-cs-btn-primary,
.iubenda-banner .iubenda-cs-btn-secondary {
    margin-left: 1px !important;
}

/* Ensure all Iubenda elements are styled properly */
.iubenda-cs-preferences-link, 
.iubenda-cs-accept-btn, 
.iubenda-cs-reject-btn { 
    float: left !important;
    margin-left: 10px !important;
}

/* Targeting dynamically generated Iubenda elements */
.iub__us-widget {
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: auto;
}

.iub__us-widget__wrapper {
    display: flex;
    flex-direction: column; /* Stack the buttons vertically */
    align-items: flex-start; /* Align the buttons to the left */
  border: none !important; /* Remove any borders */
  display: none;
}

.iub__us-widget__link {
    margin-bottom: 1px; /* Add some space between the buttons */
    background: white !important; /* Set background to black */
    color: black !important; /* Set text color to white */
    border: none !important; /* Remove any borders */
    padding: 5px 10px !important; /* Add some padding */
    text-decoration: none !important; /* Remove underline */
    display: inline-block; /* Ensure links are inline-block */
  font-size: 0.4em; /* Smaller font size than h2 */
    font-weight: bold; /* Lighter font weight */
  display: none;
}

/* Remove hover effects */
.iub__us-widget__link:hover {
    background: white !important;
    color: white !important;
}

/* Hide the specific Iubenda element */
.iub__us-widget__link--privacy-choices {
    display: none !important;
}

.iub__us-widget {
    display: none !important;
}


/* Ensure the button background is black, text color is white, and remove border */
.iubenda-tp-btn.iubenda-cs-preferences-link {
    background-color: black !important; /* Set background color to black */
    color: white !important; /* Set text color to white */
    border: none !important; /* Remove any border */
    padding: 10px 20px; /* Add padding for better appearance */
    border-radius: 5px; /* Optional: Add border-radius for rounded corners */
    cursor: pointer; /* Change cursor to pointer */
    display: flex; /* Use flex to properly align any content inside the button */
    align-items: center; /* Center align items vertically */
    justify-content: center; /* Center align items horizontally */
}

/* Ensure any image inside the button is styled correctly */
.iubenda-tp-btn.iubenda-cs-preferences-link img {
    filter: invert(1); /* Invert colors to make a white image appear black */
    width: 10px; /* Adjust width as necessary */
    height: 10px; /* Adjust height as necessary */
    margin-right: 10px; /* Add space between image and text */
  background-color: black !important; /* Slightly lighter black for hover effect */
}

/* Additional customization for hover effect */
.iubenda-tp-btn.iubenda-cs-preferences-link:hover {
    background-color: #333 !important; /* Slightly lighter black for hover effect */
    color: #fff !important; /* Ensure text color remains white */
}

/* Responsive design adjustments */
@media (min-width: 1024px) {
    .footer a:nth-child(1) img, 
    .footer a:nth-child(2) img, 
    .footer a:nth-child(3) img {
        max-width: calc(2vw); /* Smaller max-width for larger screens */
    }

    .footer a:nth-child(4) img {
        max-width: calc(3.5vw); /* Adjusted to be larger than the first three but still smaller on larger screens */
    }
    .container {
        width: 90%;
        padding: 0 50px; /* Uniform padding */
    }


}

@media (max-width: 480px) {
    .footer {
        padding: 5px; /* Adjusts padding in the footer */
        justify-content: space-around; /* Evenly distributes content in the footer */
    }

    .footer a, .footer img {
        margin: 0 10px; /* Adjusts margin for links and images */
        max-width: calc(20vw); /* Larger max-width for images, adjusted for small screens */
        height: auto; /* Maintains the image's aspect ratio */
    }

    /* Specific margin adjustments for the second and fourth images, if needed */
    .footer a:nth-child(2) img {
        margin-right: -20px; /* Adjusts right margin for the second image */
  }


    .container {
        padding: 0px 5px; /* Reducerer padding på containeren */
        width: 90%;
        max-width: 100%; /* Tillader containeren at strække sig helt ud til kanterne */
    }
      body {
        margin: 0;
        padding: 0;
    }
	
    .intro-section {
        flex-direction: column;
      font-size: 0.7em;
    }

    .intro-image {
        max-width: 100%;
        order: 2; /* Moves the image below the text */
    }

h1 {
        font-size: 1.9em; /* Typically between 1.5em to 2em */
        margin-top: 60px;
        margin-bottom: 10px;
        line-height: 1.2; /* Increase for better readability */
    }

    h2 {
        font-size: 1.5em; /* Slightly smaller than h1 */
        margin-top: 18px;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    h3 {
        font-size: 1.2em; /* Headings lower than h2 can be smaller */
        margin-top: 15px;
        margin-bottom: 8px;
    }

    /* Paragraph text */
   p, li {
        font-size: 1em; /* Around 16px is the standard size for mobile */
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 1.6; /* Increase line-height for readability */
    }
  
  .pinterest-link {
    position: fixed; /* Fixed position so it stays on the screen */
    bottom: 18vw; /* Position above the footer */
    right: 7.5vw; /* Stick to the right side of the screen */
    z-index: 1000; /* Ensure it's above other content */
}

.pinterest-icon {
    width: 45px; /* Size of the Pinterest icon */
    height: 45px; /* Ensures the icon is square */
    border-radius: 50%; /* Optional: Makes the icon circular */
    transition: transform 0.3s ease; /* Smooth animation on hover */
}
  
}