body {
    width: 100%;
    height: 100%;
    background-image: url('images/Mette24:25.JPG');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    font-family: sans-serif;
    color: black;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    --bg-opacity: 0.3; 
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, var(--bg-opacity));
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/*------------HEADER----------------*/

#header {
    position: sticky;
    top: 0;
    background-color: transparent;
    color: black;
    transition: background-color 0.3s, color 0.3s;
    z-index: 2;
}

#header.scrolled {
    background-color: rgb(30, 30, 30);
    color: white;
}

#header.scrolled .header-button-container button,
#header.scrolled .instagramButton a,
#header.scrolled .facebookButton a {
    color: white;
    cursor: pointer;
}

.header-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    padding: 0 5%; /* Adjust padding as a percentage */
}

.metteIcon-container img {
    width: 5vw; /* Width relative to viewport width */
    height: auto; /* Maintain aspect ratio */
    margin-left: 1%;
    margin-right: 2%;
}

.title-container {
    font-size: 2vw; /* Responsive font size */
    margin: 0 2%; /* Margin around the title */
}

.header-button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: auto; /* Align to the right */
    gap: 1%; /* Space between buttons */
}

.header-button-container button {
    font-size: 1.5vw; /* Responsive font size */
    font-weight: bold;
    padding: 1% 2%; /* Padding as a percentage */
    position: relative; 
    background-color: transparent;
    border-radius: 5px;
    border: none;
    display: flex;
    cursor: pointer;
    white-space: nowrap;
    margin-right:2vw;
}

.instagramButton, .facebookButton {
    background-color: transparent;
    padding: 10% 1%; /* Padding as a percentage */
    position: relative; 
    border-radius: 5px;
    border: none;
    display: flex;
    gap: 1%; 
    margin-left:3vw;
}

/* Glitch-effect for buttons */
.header-button-container button:after,
.instagramButton button::after,
.facebookButton button::after {
    content: 'ALTERNATE TEXT';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, #FFFFFF 3%, #000000 5%, #FFA500 5%);
    text-shadow: -3px -3px 0px #000000, 3px 3px 0px #FFA500;
    clip-path: inset(50% 50% 50% 50%);
}

.header-button-container button:hover:after,
.instagramButton button:hover:after,
.facebookButton button:hover:after {
    animation: 1s glitch;
    animation-timing-function: steps(2, end);
}

@keyframes glitch {
    0% {
        clip-path: inset(80% -6px 0 0);
        transform: translate(-20px, -10px);
    }
    10% {
        clip-path: inset(10% -6px 85% 0);
        transform: translate(10px, 10px);
    }
    20% {
        clip-path: inset(80% -6px 0 0);
        transform: translate(-10px, 10px);
    }
    30% {
        clip-path: inset(10% -6px 85% 0);
        transform: translate(0px, 5px);
    }
    40% {
        clip-path: inset(50% -6px 30% 0);
        transform: translate(-5px, 0px);
    }
    50% {
        clip-path: inset(10% -6px 85% 0);
        transform: translate(5px, 0px);
    }
    60% {
        clip-path: inset(40% -6px 43% 0);
        transform: translate(5px, 10px);
    }
    70% {
        clip-path: inset(50% -6px 30% 0);
        transform: translate(-10px, 10px);
    }
    80% {
        clip-path: inset(80% -6px 5% 0);
        transform: translate(20px, -10px);
    }
    90% {
        clip-path: inset(80% -6px 0 0);
        transform: translate(-10px, 0px);
    }
    100% {
        clip-path: inset(80% -6px 0 0);
        transform: translate(0);
    }
}

.socialMedia-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 2%; 
    gap:2vw;
}

.socialMedia-container .fa-instagram,
.socialMedia-container .fa-facebook {
    font-size: 2vw; 
    text-align: center;
    text-decoration: none;
    color: black;
    margin-right: 2%;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

.sticky + .content {
    padding-top: 15vh; /* Responsive padding-top */
}

.header-container::before {
    content: "";
    position: absolute;
    top: 0;
}
/* Scroll down arrow */
.scroll-down-arrow {
    position: absolute;
    bottom: 5vh; /* Använd viewport height */
    left: 50%;
    transform: translateX(-50%);
}

.arrow {
    width: 0; 
    height: 0; 
    border-left: 2vw solid transparent; 
    border-right: 2vw solid transparent;
    border-top: 5.5vh solid white; 
    margin-bottom: 1vh;
    animation: arrow-bounce 1s infinite;
}

.arrow:nth-child(2) {
    animation-delay: 0.2s;
}

.arrow:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes arrow-bounce {
    0% {
        transform: translateY(0);
        border-top-color: white;
    }
    50% {
        transform: translateY(-1vh);
    }
    100% {
        transform: translateY(0);
        border-top-color: orange;
    }
}

/* Sticky header effect */
html {
    scroll-behavior: smooth;
}

.content-section {
    margin-top: 82vh;
    background-color: white;
    align-items: center;
}

/*---- CONTENT SECTION ----*/

.mette-content img {
    width: 30vw; 
    height: auto; 
    margin: 5vw;
}

.mette-content {
    background-color: white;
    padding: 2vw; /* Använd vw för padding */
    display: flex;
    flex-direction: row;
    align-items: center;
}

.titleContentSection {
    flex: 1;
    font-weight: bold;
    font-size: 3vw; /* Använd vw för font-size */
}

.infoMette1, .infoMette2 {
    font-size: 1.4vw; /* Använd vw för font-size */
    margin-right: 2vw; /* Använd vw för margin */
}

a {
    color: #ff7300;
    text-decoration: none;
}

.event-content {
    margin-top: 2vw;
    margin-right: 5vw;
    margin-left: 5vw;
    font-size: 1.4vw;
    background-color: white;
    text-align: center;
}

/*------CONTENT BUTTONS------*/

.button-container {
    margin-top: 5vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tjejfikaButton,
.ovveinvigningButton,
.rosaVeckanButton,
.enkvallButton,
.damsittningButton,
.sponsButton,
.markenButton,
.sokMetteButton,
.styrelsenButton {
    background-size: cover;
    flex: 1;
    width: 25vw; 
    height: 25vw; 
    border: none;
    border-radius: 10px;
    margin: 1vw; 
    position: relative;
}

.tjejfikaButton {
    background-image: url('images/button-container/Tjejfika.png');
}

button[label="TJEJFIKA"]::before {
    content: "TJEJFIKA";
}

.ovveinvigningButton {
    background-image: url('images/button-container/Ovveinvigning.jpg');
}

button[label="OVVEINVIGNING"]::before {
    content: "OVVEINVIGNING";
}

.rosaVeckanButton {
    background-image: url('images/button-container/RosaVeckan.png');
}

button[label="ROSA VECKAN"]::before {
    content: "ROSA VECKAN";
}

.enkvallButton {
    background-image: url('images/button-container/Gaia.jpg');
}

button[label="EN KVÄLL MED GAIA"]::before {
    content: "TJEJKVÄLL MED GAIA";
}

.damsittningButton {
    background-image: url('images/button-container/Damsittning.png');
}

button[label="DAMSITTNINGEN"]::before {
    content: "DAMSITTNINGEN";
}

.sponsButton {
    background-image: url('images/button-container/Spons.png');
}

button[label="SPONSORER"]::before {
    content: "SPONSORER";
}

.markenButton {
    background-image: url('images/button-container/OvveMarken.png');
}

button[label="METTES MÄRKEN"]::before {
    content: "METTES MÄRKEN";
}

.sokMetteButton {
    background-image: url('images/button-container/SokMette.jpg');
}

button[label="VILL DU SÖKA TILL METTE?"]::before {
    content: "VILL DU SÖKA TILL METTE?";
}

.styrelsenButton {
    background-image: url('images/button-container/Styrelsen.jpg');
}

button[label="STYRELSEN"]::before {
    content: "STYRELSEN";
}

.tjejfikaButton::before,
.ovveinvigningButton::before,
.rosaVeckanButton::before,
.enkvallButton::before,
.damsittningButton::before,
.sponsButton::before,
.markenButton::before,
.sokMetteButton::before,
.styrelsenButton::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 1vw 2vw; 
    font-size: 2vw; 
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
    border-radius: 10px;
    cursor: pointer;
}

.tjejfikaButton:hover::before,
.ovveinvigningButton:hover::before,
.rosaVeckanButton:hover::before,
.enkvallButton:hover::before,
.damsittningButton:hover::before,
.sponsButton:hover::before,
.markenButton:hover::before,
.sokMetteButton:hover::before,
.styrelsenButton:hover::before {
    opacity: 1;
    border-radius: 10px;
    cursor: pointer;
}

/* Media Queries */
@media (max-width: 768px) {
    .scroll-down-arrow {
        bottom: 3vh;
    }

    .arrow {
        border-left: 1.5vw solid transparent;
        border-right: 1.5vw solid transparent;
        border-top: 2vh solid white;
        margin-bottom: 1vh;
    }

    .mette-content img {
        width: 60vw;
        margin: 1.5vw;
    }

    .titleContentSection {
        font-size: 6vw;
    }

    .infoMette1, .infoMette2 {
        font-size: 2.5vw;
    }

    .event-content {
        margin-right: 2.5vw;
        margin-left: 2.5vw;
        font-size: 2.5vw;
    }

    .button-container {
        margin-top: 7vh;
    }

    .tjejfikaButton,
    .ovveinvigningButton,
    .rosaVeckanButton,
    .enkvallButton,
    .damsittningButton,
    .sponsButton,
    .markenButton,
    .sokMetteButton,
    .styrelsenButton {
        width: 30vw;
        height: 30vw;
    }

    .tjejfikaButton::before,
    .ovveinvigningButton::before,
    .rosaVeckanButton::before,
    .enkvallButton::before,
    .damsittningButton::before,
    .sponsButton::before,
    .markenButton::before,
    .sokMetteButton::before,
    .styrelsenButton::before {
        font-size: 5vw;
        padding: 1.5vw 3vw;
    }
}

@media (max-width: 480px) {
    .scroll-down-arrow {
        bottom: 2vh;
    }

    .arrow {
        border-left: 1vw solid transparent;
        border-right: 1vw solid transparent;
        border-top: 1.5vh solid white;
        margin-bottom: 1vh;
    }

    .mette-content img {
        width: 80vw;
        margin: 1vw;
    }

    .titleContentSection {
        font-size: 8vw;
    }

    .infoMette1, .infoMette2 {
        font-size: 3vw;
    }

    .event-content {
        margin-right: 2vw;
        margin-left: 2vw;
        font-size: 3vw;
    }

    .button-container {
        margin-top: 5vh;
    }

    .tjejfikaButton,
    .ovveinvigningButton,
    .rosaVeckanButton,
    .enkvallButton,
    .damsittningButton,
    .sponsButton,
    .markenButton,
    .sokMetteButton,
    .styrelsenButton {
        width: 35vw;
        height: 35vw;
    }

    .tjejfikaButton::before,
    .ovveinvigningButton::before,
    .rosaVeckanButton::before,
    .enkvallButton::before,
    .damsittningButton::before,
    .sponsButton::before,
    .markenButton::before,
    .sokMetteButton::before,
    .styrelsenButton::before {
        font-size: 6vw;
        padding: 2vw 4vw;
    }
}
/* Button overlay */
.tjejfikaButton::after,
.ovveinvigningButton::after,
.rosaVeckanButton::after,
.enkvallButton::after,
.damsittningButton::after,
.sponsButton::after,
.markenButton::after,
.sokMetteButton::after,
.styrelsenButton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0; 
    transition: opacity 0.3s ease;
    z-index: 0; 
    border-radius: 10px;
    cursor: pointer;
}

.tjejfikaButton:hover::after,
.ovveinvigningButton:hover::after,
.rosaVeckanButton:hover::after,
.enkvallButton:hover::after,
.damsittningButton:hover::after,
.sponsButton:hover::after,
.markenButton:hover::after,
.sokMetteButton:hover::after,
.styrelsenButton:hover::after {
    opacity: 1;
    border-radius: 10px;
    cursor: pointer;
}

/*--- CONTACT US & INFO ---*/
.bottom-section {
    width: 100%;
    background-color: rgb(30, 30, 30);
    color: white;
    padding: 2vw; 
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-evenly;
    margin-top: 5vh; 
    align-items: center;
    z-index: 1000;
}

.bottom-section img {
    width: 15vw; 
    height: auto; 
    margin-right:2vw;
    margin-left: 5vw;
}

.bottom-section .column {
    flex-grow: 2;
    min-width: 15vw;
    max-width: 30vw; 
}

.bottom-section p {
    text-align: left;
}

.bottom-section textarea {
    width: 90%;
    padding: 1vw;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 0.5vw; 
    margin-bottom: 1vw; 
    resize: vertical;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
}

/* Justera knappen */
.bottom-section button {
    width: 90%;
    padding: 1vw; 
    background-color: rgba(152, 152, 152, 0.3);
    color: black;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bottom-section button:hover {
    background-color: #ff7300;
}

/*---- metteNOW-content ----*/
#metteNOW-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 5vw;
    gap: 2vw; 
    width: 90vw; 
    box-sizing: border-box; 
}

#metteNOW-content1,
#metteNOW-content2 {
    display: flex;
    flex-direction: row; 
    justify-content: center;
    gap: 5vw;
    margin-left: 5vw;
    margin-right:5vw;
}

.image-container {
    position: relative;
    width: calc(22.5% - 2vw); 
    margin-bottom: 3vw;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden; 
}

#metteNOW-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    transition: transform 0.3s ease; 
    margin-top:10vh;

}

#metteNOW-content img:hover {
    transform: scale(1.05); 
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    color: #fff; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 1.5vw; 
    text-align: center;
    padding: 1vw;
    box-sizing: border-box;
    border-radius: 10px; 
    margin-top:10vh;
}

.image-container:hover .image-overlay {
    opacity: 1; 
}

#whoAreWe,
#pleaseContactUs {
    font-size: 4vw; 
    display: none;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.1s ease;
}

.marit2324Button,
.marit2223Button,
.marit2122Button,
.marit2021Button,
.marit1920Button,
.marit1819Button,
.marit1718Button,
.marit1617Button,
.marit1516Button,
.marit1415Button,
.marit1314Button {
    font-size: 1.5vw; /* Använd vw för font-size */
    font-weight: bold;
    width: 80vw; /* Använd vw för width */
    height: 6vh; /* Använd vh för height */
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.marit-title {
    font-size: 3vw; /* Använd vw för font-size */
    font-weight: bold;
    color: #ff7300;
    display: flex;
    justify-content: center; /* Centrera horisontellt */
    align-items: center; /* Centrera vertikalt */
}

.marit-text {
    font-size: 1.3vw; /* Använd vw för font-size */
    color: black;
    text-align: center; /* Centrera texten horisontellt */
    margin-bottom: 2vw; /* Använd vw för margin-bottom */
    margin-top: 1vw; /* Använd vw för margin-top */
}

.marit-content {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    justify-content: center;
    align-items: center;
}

.marit-content img {
    display: none;
}

#marit-image2324,
#marit-image2223,
#marit-image2122,
#marit-image2021,
#marit-image1920,
#marit-image1819,
#marit-image1718,
#marit-image1617,
#marit-image1516,
#marit-image1415,
#marit-image1314 {
    width: 60vw; /* Använd vw för width */
    height: auto; /* Bibehåll proportioner */
}

/* Media Queries */
@media (max-width: 768px) {
    .bottom-section {
        padding: 1.5vw;
        margin-top: 4vh;
    }

    .bottom-section img {
        width: 20vw;
    }

    .bottom-section .column {
        max-width: 45vw;
    }

    .bottom-section textarea {
        padding: 1vw;
        margin-top: 0.5vw;
        margin-bottom: 1vw;
    }

    .bottom-section button {
        padding: 1vw;
    }

    #metteNOW-content {
        margin-left: 3vw;
        margin-top: 3vh;
    }

    .image-container {
        width: calc(47% - 2vw); /* Två bilder per rad på mindre skärmar */
    }

    #metteNOW-content img {
        width: 100%;
        margin: 0;
    }

    #whoAreWe,
    #pleaseContactUs {
        font-size: 10vw;
    }

    .marit2324Button,
    .marit2223Button,
    .marit2122Button,
    .marit2021Button,
    .marit1920Button,
    .marit1819Button,
    .marit1718Button,
    .marit1617Button,
    .marit1516Button,
    .marit1415Button,
    .marit1314Button {
        font-size: 5vw;
        width: 90vw;
        height: 6vh;
    }

    .marit-title {
        font-size: 10vw;
    }

    .marit-text {
        font-size: 5vw;
        margin-bottom: 3vw;
        margin-top: 1.5vw;
    }

    .marit-content {
        gap: 3vw;
    }

    #marit-image2324,
    #marit-image2223,
    #marit-image2122,
    #marit-image2021,
    #marit-image1920,
    #marit-image1819,
    #marit-image1718,
    #marit-image1617,
    #marit-image1516,
    #marit-image1415,
    #marit-image1314 {
        width: 75vw;
    }
}

@media (max-width: 480px) {
    .bottom-section {
        padding: 1vw;
        margin-top: 3vh;
    }

    .bottom-section img {
        width: 25vw;
    }

    .bottom-section .column {
        max-width: 50vw;
    }

    .bottom-section textarea {
        padding: 1vw;
        margin-top: 0.5vw;
        margin-bottom: 1vw;
    }

    .bottom-section button {
        padding: 1vw;
    }

    #metteNOW-content {
        margin-left: 2vw;
        margin-top: 2vh;
    }

    .image-container {
        width: calc(100% - 2vw); /* En bild per rad på mobiler */
    }

    #metteNOW-content img {
        width: 100%;
        margin: 0;
    }

    #whoAreWe,
    #pleaseContactUs {
        font-size: 12vw;
    }

    .marit2324Button,
    .marit2223Button,
    .marit2122Button,
    .marit2021Button,
    .marit1920Button,
    .marit1819Button,
    .marit1718Button,
    .marit1617Button,
    .marit1516Button,
    .marit1415Button,
    .marit1314Button {
        font-size: 6vw;
        width: 95vw;
        height: 7vh;
    }

    .marit-title {
        font-size: 12vw;
    }

    .marit-text {
        font-size: 6vw;
        margin-bottom: 4vw;
        margin-top: 2vw;
    }

    .marit-content {
        gap: 4vw;
    }

    #marit-image2324,
    #marit-image2223,
    #marit-image2122,
    #marit-image2021,
    #marit-image1920,
    #marit-image1819,
    #marit-image1718,
    #marit-image1617,
    #marit-image1516,
    #marit-image1415,
    #marit-image1314 {
        width: 90vw;
    }
}

/*--------------KONTAKT--------------------------------*/

#kontaktUppgifter {
    color: #ff7300;
    text-align: center;
    margin-top: 5vh; /* Ändrat till vh för att bättre anpassa till olika skärmstorlekar */
    font-size: 3vw; /* Använd vw för responsiv font-size */
    font-weight: bold;
}

#kontaktText1, #kontaktText2 {
    font-size: 1.5vw; /* Använd vw för responsiv font-size */
    text-align: center;
}

#kontaktText2 {
    margin-bottom: 5vh; /* Ändrat till vh för att bättre anpassa till olika skärmstorlekar */
}



.first-contact-row,
.second-contact-row {
    display: flex;
    flex-direction: row; /* Justera till kolumnlayout för mindre skärmar */
    justify-content: center;
    gap: 20px;
    margin-top: 5vh; /* Ändrat till vh för att bättre anpassa till olika skärmstorlekar */
    margin-left: 5vw;
    margin-right:5vw;
}

.person-info {
    background-color: black;
    padding: 2vw; /* Använd vw för padding */
    border-radius: 10px;
    width: 80vw; /* Använd vw för width */
    max-width: 300px; /* Max-width för större skärmar */
    color: white;
    text-align: left;
}

.person-info h2 {
    border-bottom: 1px solid white;
    text-align: left;
}

.person-info p#mail {
    color: #d7d7d7;
}

textarea, input[type="email"] {
    width: 90%;
    padding: 1vw; /* Använd vw för padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 1vw; /* Använd vw för margin-top */
    margin-bottom: 1vw; /* Använd vw för margin-bottom */
    resize: vertical;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
}

.contact-us-information {
    text-align: center; /* Centrera innehållet horisontellt */
    margin-top: 82vh;
}

.contact-us-information button {
    background-color: black;
    padding: 1.5vw 4vw; /* Använd vw för padding */
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 1.4vw; /* Använd vw för font-size */
    cursor: pointer;
    margin-top: 2vw; /* Använd vw för margin-top */
}

.contact-us-information button:hover {
    background-color: #ff7300;
}

.orange-kontaktformular {
    color: #ff7300;
    cursor: pointer;
}

/*-------------------TJEJFIKA--------------------------*/
#tjejfikaContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    overflow-y: auto;
}

/* Bakgrundsbild */
.background-tjejfika-image {
    background-image: url('images/button-container/Tjejfika.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Vit box för innehållet */
.white-box {
    position: relative;
    margin-top: 10vh; /* Använd vh för margin-top */
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 5vw; /* Använd vw för padding */
    width: 90vw; /* Använd vw för width */
    max-width: 900px; /* Max-width för större skärmar */
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-bottom: 10vh; /* Använd vh för margin-bottom */
}

/* Bildslideshow container */
.slideshow-container {
    position: relative;
    max-width: 90vw; /* Använd vw för max-width */
    margin: 5vw; /* Använd vw för margin */
}

/* Slideshow bilder */
.slideshow-container img {
    width: 100%;
}

/* Föregående och nästa knappar */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 1.5vw; /* Använd vw för padding */
    margin-top: -2vw; /* Använd vw för margin-top */
    color: white;
    font-weight: bold;
    font-size: 4vw; /* Använd vw för font-size */
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.prev {
    left: 0;
}

.next {
    right: 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Textinnehåll */
.text-content {
    margin-top: 5vh; /* Använd vh för margin-top */
    text-align: center;
    margin-left: 5vw; /* Använd vw för margin-left */
    margin-right: 5vw; /* Använd vw för margin-right */
    margin-bottom: 5vh; /* Använd vh för margin-bottom */
}

.text-content h3 {
    font-size: 2vw; /* Använd vw för font-size */
    margin-bottom: 2vw; /* Använd vw för margin-bottom */
    margin-top: 5vh; /* Använd vh för margin-top */
    text-align: center;
}

.text-content p {
    font-size: 1.2vw; /* Använd vw för font-size */
    line-height: 1.6;
    margin-left: 5vw; /* Använd vw för margin-left */
    margin-right: 5vw; /* Använd vw för margin-right */
}

.hidden {
    display: none;
}

.backButton {
    margin-left: 5vw; /* Använd vw för margin-left */
    margin-top: 2vh; /* Använd vh för margin-top */
    appearance: none;
    background-color: #FFFFFF;
    border-width: 0;
    box-sizing: border-box;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    font-family: Clarkson, Helvetica, sans-serif;
    font-size: 1vw; /* Använd vw för font-size */
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1em;
    margin: 0;
    opacity: 1;
    outline: 0;
    padding: 1.5em 2.2em;
    position: relative;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    text-rendering: geometricprecision;
    text-transform: uppercase;
    transition: opacity 300ms cubic-bezier(.694, 0, 0.335, 1), background-color 100ms cubic-bezier(.694, 0, 0.335, 1), color 100ms cubic-bezier(.694, 0, 0.335, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: baseline;
    white-space: nowrap;
    border-radius: 5px;
}

.backButton:hover {
    background-color: #EBEBEB;
    color: white;
}

.backButton:before {
    animation: opacityFallbackOut .5s step-end forwards;
    backface-visibility: hidden;
    background-color: black;
    clip-path: polygon(-1% 0, 0 0, -25% 100%, -1% 100%);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateZ(0);
    transition: clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1), -webkit-clip-path .5s cubic-bezier(.165, 0.84, 0.44, 1);
    width: 100%;
    border-radius: 5px;
}

.backButton:hover:before {
    animation: opacityFallbackIn 0s step-start forwards;
    clip-path: polygon(0 0, 101% 0, 101% 101%, 0 101%);
}

.backButton:after {
    background-color: #FFFFFF;
}

.backButton span {
    z-index: 1;
    position: relative;
}

/* Media Queries */
@media (max-width: 768px) {
    #kontaktUppgifter {
        font-size: 8vw;
        margin-top: 5vh;
    }

    #kontaktText1, #kontaktText2 {
        font-size: 5vw;
    }

    #kontaktText2 {
        margin-bottom: 5vh;
    }

    .first-contact-row,
    .second-contact-row {
        flex-direction: column;
        gap: 10px;
    }

    .person-info {
        width: 90vw;
        max-width: none; /* Ta bort max-width för mindre skärmar */
        padding: 4vw;
    }

    .contact-us-information button {
        font-size: 5vw;
        padding: 2vw 5vw;
    }

    .white-box {
        margin-top: 10vh;
        padding: 5vw;
        width: 90vw;
        max-width: none; /* Ta bort max-width för mindre skärmar */
        margin-bottom: 10vh;
    }

    .slideshow-container {
        margin: 5vw;
    }

    .prev, .next {
        font-size: 5vw;
        padding: 1.5vw;
        margin-top: -2vw;
    }

    .text-content {
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .text-content h3 {
        font-size: 6vw;
        margin-bottom: 2vw;
        margin-top: 5vh;
    }

    .text-content p {
        font-size: 4vw;
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .backButton {
        font-size: 6vw;
        padding: 1.5em 2.2em;
        margin-left: 5vw;
        margin-top: 2vh;
    }
}

@media (max-width: 480px) {
    #kontaktUppgifter {
        font-size: 10vw;
        margin-top: 5vh;
    }

    #kontaktText1, #kontaktText2 {
        font-size: 6vw;
    }

    #kontaktText2 {
        margin-bottom: 5vh;
    }

    .person-info {
        width: 95vw;
        padding: 6vw;
    }

    .contact-us-information button {
        font-size: 6vw;
        padding: 3vw 6vw;
    }

    .white-box {
        margin-top: 10vh;
        padding: 6vw;
        width: 95vw;
        max-width: none;
        margin-bottom: 10vh;
    }

    .slideshow-container {
        margin: 5vw;
    }

    .prev, .next {
        font-size: 6vw;
        padding: 2vw;
        margin-top: -2vw;
    }

    .text-content {
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .text-content h3 {
        font-size: 8vw;
        margin-bottom: 2vw;
        margin-top: 5vh;
    }

    .text-content p {
        font-size: 5vw;
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .backButton {
        font-size: 8vw;
        padding: 2em 3em;
        margin-left: 5vw;
        margin-top: 2vh;
    }
}
/*-------------------OVVEINVIGNING--------------------------*/
#ovveContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    overflow-y: auto;
}

/* Bakgrundsbild */
.background-ovve-image {
    background-image: url('images/button-container/Ovveinvigning.jpg');
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Textinnehåll */
.text-content-ovve {
    margin-top: 20px;
    text-align: center;
    margin-left: 0px;
    margin-right: 50px;
    margin-bottom: 50px;
}

.text-content-ovve h3 {
    font-size: 2vw;
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: center;
}

.text-content-ovve p {
    font-size: 1.2vw;
    line-height: 1.6;
    margin-left: 100px;
    margin-right: 100px;
}

#ovve2023,
#ovveTillbakablick,
#rosaVeckan2023,
#gaiaEvent2023,
#gaiaTillbakablick {
    text-align: center;
}
/*-------------------ROSA VECKAN--------------------------*/
#rosaVeckanContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    overflow-y: auto;
}

.background-rosaVeckan-image {
    background-image: url('images/button-container/RosaVeckan.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.text-content-rosaVeckan {
    margin-top: 20px;
    text-align: center;
    margin-left: 0px;
    margin-right: 50px;
    margin-bottom: 50px;
}

.text-content-rosaVeckan h3 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: center;
}

.text-content-rosaVeckan p {
    font-size: 16px;
    line-height: 1.6;
    margin-left: 100px;
    margin-right: 100px;
}

.text-content-rosaVeckan a {
    color: palevioletred;
}

/*-------------------EN KVÄLL MED GAIA--------------------------*/
#gaiaContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    overflow-y: auto;
}

/* Bakgrundsbild */
.background-gaia-image {
    background-image: url('images/button-container/Gaia.jpg');
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Textinnehåll */
.text-content-gaiaEvent {
    margin-top: 20px;
    text-align: center;
    margin-left: 0px;
    margin-right: 50px;
    margin-bottom: 50px;
}

.text-content-gaiaEvent h3 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: center;
}

.text-content-gaiaEvent p {
    font-size: 16px;
    line-height: 1.6;
    margin-left: 100px;
    margin-right: 100px;
}

/*-------------------DAMSITTNINGEN--------------------------*/
#damsittningenTitle {
    text-align: center;
    color: #ff7300;
}

#damsittningContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    overflow-y: auto;
}

/* Bakgrundsbild */
.background-damsittning-image {
    background-image: url('images/button-container/Damsittning.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Textinnehåll */
.text-content-damsittningen {
    margin-top: 20px;
    text-align: center;
    margin-left: 0px;
    margin-right: 50px;
    margin-bottom: 50px;
}

.text-content-damsittningen h3 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: center;
}

.text-content-damsittningen p {
    font-size: 16px;
    line-height: 1.6;
    margin-left: 100px;
    margin-right: 100px;
}

/*-------------------SPONSOR--------------------------*/
#sponsor2425 {
    text-align: center;
    color: #ff7300;
}

#sponsorContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    overflow-y: auto;
    display: none; /* Starta som dold */
}

.background-sponsor-image {
    background-image: url('images/button-container/Spons.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.text-content-sponsor {
    margin-top: 20px;
    text-align: center;
    margin-left: 0;
    margin-right: 50px;
    margin-bottom: 50px;
}

.text-content-sponsor h3 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: center;
}

.text-content-sponsor p {
    font-size: 16px;
    line-height: 1.6;
    margin-left: 100px;
    margin-right: 100px;
}

/*-------------------MÄRKEN--------------------------*/
#marken2425 {
    text-align: center;
    color: #ff7300;
}

#markenContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    overflow-y: auto;
    display: none; /* Starta som dold */
}

.background-marken-image {
    background-image: url('images/button-container/OvveMarken.png');
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.text-content-marken {
    margin-top: 20px;
    text-align: center;
    margin-left: 0;
    margin-right: 50px;
    margin-bottom: 50px;
}

.text-content-marken h3 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 50px;
    margin-left: 3%;
}

.text-content-marken p {
    font-size: 16px;
    line-height: 1.6;
    margin-left: 19%;
    margin-right: 17%;
    text-align: center;
}

.markenSlides img {
    width: 50%;
    height: 50%;
    margin-left: 23%;
}

/*-------------------SÖK METTE--------------------------*/
#sokMette {
    text-align: center;
    color: black;
    text-decoration: underline;
}

#sokMetteContent {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
    overflow-y: auto;
}

.background-sokMette-image {
    background-image: url('images/button-container/SokMette.jpg');
    background-size: cover;
    background-position: center;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.text-content-sokMette {
    margin-top: 20px;
    margin-bottom: 50px;
}

.text-content-sokMette h3 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: left;
    margin-left: 11%;
    color: #ff7300;
}

.text-content-sokMette h2 {
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 50px;
    text-align: center;
}

.text-content-sokMette p {
    font-size: 16px;
    line-height: 1.6;
    margin-left: 100px;
    margin-right: 100px;
}

/*BOTTOM SECTION REFERENSER*/
/* Grundstil för p-taggarna som fungerar som knappar */
#metteLink,
#contactLink {
    cursor: pointer; 
    transition: color 0.3s ease;
}

#metteLink:hover,
#contactLink:hover {
    color: #ff7300;
}

#documentLink {
    cursor: pointer; 
    text-decoration: none;
    color: inherit; 
    transition: color 0.3s ease;
}
  
#documentLink:hover {
    color: #ff7300;
}

/*-------------------RESPONSIVT TILLÄGG--------------------------*/

/* Mobil och små surfplattor */
@media (max-width: 768px) {
    .text-content-ovve, 
    .text-content-rosaVeckan, 
    .text-content-gaiaEvent, 
    .text-content-damsittningen,
    .text-content-sponsor,
    .text-content-marken,
    .text-content-sokMette {
        margin-left: 10px;
        margin-right: 10px;
    }

    .text-content-ovve p,
    .text-content-rosaVeckan p,
    .text-content-gaiaEvent p,
    .text-content-damsittningen p,
    .text-content-sponsor p,
    .text-content-marken p,
    .text-content-sokMette p {
        font-size: 14px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .text-content-ovve h3,
    .text-content-rosaVeckan h3,
    .text-content-gaiaEvent h3,
    .text-content-damsittningen h3,
    .text-content-sponsor h3,
    .text-content-marken h3,
    .text-content-sokMette h3 {
        font-size: 20px;
        margin-top: 30px;
    }

    .markenSlides img {
        width: 80%;
        height: auto;
        margin-left: 10%;
    }
}

@media (max-width: 480px) {
    .text-content-ovve,
    .text-content-rosaVeckan,
    .text-content-gaiaEvent,
    .text-content-damsittningen,
    .text-content-sponsor,
    .text-content-marken,
    .text-content-sokMette {
        margin-left: 5px;
        margin-right: 5px;
    }

    .text-content-ovve p,
    .text-content-rosaVeckan p,
    .text-content-gaiaEvent p,
    .text-content-damsittningen p,
    .text-content-sponsor p,
    .text-content-marken p,
    .text-content-sokMette p {
        font-size: 12px;
        margin-left: 5px;
        margin-right: 5px;
    }

    .text-content-ovve h3,
    .text-content-rosaVeckan h3,
    .text-content-gaiaEvent h3,
    .text-content-damsittningen h3,
    .text-content-sponsor h3,
    .text-content-marken h3,
    .text-content-sokMette h3 {
        font-size: 18px;
        margin-top: 20px;
    }

    .markenSlides img {
        width: 100%;
        height: auto;
        margin-left: 0;
    }
}