/********************************************
 GLOBALA VARIABLER
********************************************/
:root {
    --main-color: #21334f; /* Konsoliderad färg för rubriker och text */
    --section-gradient-light: linear-gradient(to bottom, #f4f4f4, #e0e0e0);
    --section-gradient-medium: linear-gradient(to bottom, #d4d4d4, #b0b0b0);
    --section-gradient-dark: linear-gradient(to bottom, #c0c0c0, #a0a0a0);
    --highlight-color: #4169A6; /* Highlight-färg */
    --footer-bg-color: linear-gradient(to bottom, #21334f, #000000);
    --footer-text-color: #f4f4f4;
    --main-padding: 30px; /* Konsoliderad padding för sektioner */
    --main-border-radius: 15px; /* Standard avrundning */
    --shadow-light: 0px 10px 20px rgba(0, 0, 0, 0.1); /* Standard skugga */
    --primary-background: linear-gradient(to bottom, #ffffff, #fafafa);
}


/********************************************
    GLOBAL TOOLTIP STYLING - KONSTANT SYNLIGHET
********************************************/
/* Tooltip klass för alla element med hjälptext */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-hover-text);
    position: absolute;
    background-color: transparent;
    color: #ffffff;
    font-size: 0.9em;
    padding: 5px 10px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    top: 110%; /* Placera hjälptexten precis under ikonen */
    left: 50%;
    transform: translateX(-50%);
    opacity: 1; /* Alltid synlig */
}


/********************************************
    RESET OCH NORMALISERING
********************************************/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow-x: hidden; /* Förhindrar horisontell scrollning */
    margin: 0;
    padding: 0;
    overflow-y: auto; /* Se till att sidan kan scrollas om innehållet överstiger höjden */
}


body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    background: var(--section-gradient-light);
    background-size: cover;
    display: flex;
    flex-direction: column;
}

/********************************************
    LAYOUT OCH CONTAINER
********************************************/
.container {
    position: relative;
    z-index: 0;
    background: transparent;
    max-width: 100vw; /* Begränsa bredden till viewportens bredd */
}

/********************************************
    TYPOGRAFI
********************************************/
h2 {
    font-size: 2.2em; /* Storlek på texten */
    text-align: center; /* Centrera rubriken */
    color: #21334f; /* Djup blå färg för rubrikens färg */
    margin-bottom: 20px; /* Avstånd under rubriken */
    text-shadow: 
        -1px -1px 0 #ffffff,  /* Ljus skugga till vänster upp för att simulera ljus */
        1px 1px 2px rgba(0, 0, 0, 0.25); /* Mjukare, mörkare skugga för att skapa djup */
}


h3 {
    font-size: 1.5em;
    text-align: center;
    color: #2A6368; /* Nuvarande textfärg */
    margin-bottom: 20px;
    text-shadow: 
        -0.2px -0.2px 0 #21334f,  /* Vänster upp */
        0.2px -0.2px 0 #21334f,   /* Höger upp */
        -0.2px 0.2px 0 #21334f,   /* Vänster ner */
        0.2px 0.2px 0 #21334f;    /* Höger ner */
}



/********************************************
    RESPONSIV STYLING
********************************************/
@media (max-width: 768px) {
    h2 {
        font-size: 1.9em; /* Minska rubrikstorleken för mobil */
    }
    h3 {
        font-size: 1.4em; /* Minska rubrikstorleken för mobil */
    }
    .container {
        padding: 10px; /* Lägg till padding för bättre mobilupplevelse */
    }
}

/********************************************
    HEADER STYLING
********************************************/
header.parallax {
    min-height: 80vh; 
    background-image: url('/images/header-desktop.jpg');
    background-size: cover; 
    background-position: 40% 70%; 
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;
    margin: 0;
    padding-top: 50px; /* Skapa utrymme för navbarens höjd */
    z-index: 0; /* Lägg headern bakom navbaren */
    box-sizing: border-box;
}

/* Header-innehåll */
.header-content {
    position: relative;
    z-index: 2; 
    text-align: center;
    color: white;
    padding: 0; 
    box-sizing: border-box;
    margin-top: 50px; /* Lägg till marginal för att kompensera för navbarens höjd */
}

.header-content h1 {
    font-size: 2.5em; 
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    margin: 0; 
}

/********************************************
    HEADER MOBIL
********************************************/
  @media (max-width: 768px) {
  header.parallax {
    padding-top: 10px;
    height: 80vh;
    background-image: url('/images/header-mobil.jpg');
    background-size: contain;
    background-position: center 19%; 
  }

  .navbar {
    position: fixed;
    top: 0;
  }

    .header-content h1 {
        font-size: 2em; 
    }

 }
 
/********************************************
    LOGOTYP STYLING 
********************************************/
.logo img {
    max-height: 60px; /* Ändra storleken på loggan */
    height: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    background-color: rgba(0, 0, 0, 0); /* Helt transparent bakgrund */
    padding: 0; /* Ta bort padding om det inte behövs */
    border-radius: 0; /* Ta bort rundning om det inte behövs */
    box-shadow: none; /* Ingen skugga */
}

.logo img:hover {
    opacity: 1; /* Full synlighet vid hover */
}

/********************************************
    LOGOTYP MOBIL
********************************************/
@media (max-width: 768px) {
    .logo img {
        max-height: 40px; 
    }
}

/********************************************
    MENY STYLING 
********************************************/
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to right, rgba(26, 128, 150, 0.4), rgba(26, 128, 150, 0.9));
    z-index: 1000;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 5px 0;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    box-shadow: none;
}

/* Solid bakgrund och starkare skugga när användaren skrollar */
.navbar.scrolled {
    background: rgba(26, 128, 150, 0.9); /* Starkare färg vid skrollning */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Lägg till skugga vid skroll */
}

.navbar .container {
    max-width: 1200px;
    width: 90%;
    height: 40px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/********************************************
    NAVIGATIONSLÄNKAR (Desktop)
********************************************/
.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 0;
    padding: 0;
    justify-content: center;
    background-color: transparent; /* Ingen bakgrund på länkarna */
}

.nav-links li a {
    color: white;
    background-color: transparent; /* Ingen bakgrundsfärg på länkarna */
    text-decoration: none;
    padding: 10px 15px;
    font-size: 1.4em;
    transition: all 0.3s ease;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Lägg till skuggeffekt likt headerns rubrik */
}

/* Effekter vid hover för att skapa dynamik */
.nav-links li a:hover {
    color: #21334f; /* Behåll mörkblå färg vid hover */
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(255, 255, 255, 0.9); /* Vit skugga vid hover för kontrast */
}

/********************************************
    HAMBURGEMENY OCH RESPONSIV MENY (MOBIL)
********************************************/
@media (max-width: 768px) {
    .navbar {
        height: 50px;
        display: flex;
        align-items: center; /* Centrerar loggan och hamburgaren vertikalt */
        justify-content: space-between; /* Säkerställ att loggan och hamburgaren är korrekt positionerade horisontellt */
        padding: 0 15px; /* Mindre padding för mobil */
        background: linear-gradient(to right, rgba(26, 128, 150, 0.4), rgba(26, 128, 150, 0.9));
        position: fixed; /* Fixera navbaren högst upp */
        top: 0;
        width: 100%;
        z-index: 1002;
    }

    .logo img {
        max-height: 40px; /* Minska loggans storlek för mobil */
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        z-index: 1003;
        width: 30px;
        height: 30px;
        justify-content: space-around;
        align-items: center; /* Centrera varje hamburgarlinje */
        background-color: transparent;
        border: none;
        position: relative;
        transition: transform 0.3s ease; /* Lägg till en transition för en mjukare förändring */
    }

    .hamburger div {
        background-color: #21334f; /* Ändra linjernas färg till mörkblå */
        color: #21334f; /* Behåller samma mörkblå färg */
        height: 3px;
        width: 100%;
        border-radius: 2px;
        transition: all 0.3s ease; /* Gör övergångarna smidiga */
        box-shadow: 0 0 4px 2px rgba(255, 255, 255, 0.8); /* Vit skuggning runt varje linje */
    }
    
    .hamburger.active::before {
        content: '×'; /* Använd ett Unicode-tecken för ett X */
        color: #ffffff; /* Gör "X":et vitt */
        font-size: 2em; /* Justera storleken för att göra "X":et mer proportionerligt */
        font-weight: 500; /* Gör "X":et lite kraftigare för att synas tydligare */
        font-family: Arial, sans-serif; /* Använd en stilren font */
        position: absolute;
        top: 50%; /* Sätt "X":et i mitten vertikalt */
        right: -20px; /* Justera placeringen horisontellt */
        transform: translateY(-50%); /* Centrera "X":et vertikalt */
        text-shadow: 
            0px 0px 4px #21334f,   /* Ljus blå kant runt "X":et */
            0px 0px 8px #21334f;   /* Ytterligare blå skugga för förstärkt effekt */
        transition: all 0.3s ease; /* Smidig övergångseffekt */
        cursor: pointer; /* Ändra muspekaren för bättre användarupplevelse */
        z-index: 2000; /* Se till att "X":et ligger över andra element */
    }
    
    

    .hamburger div {
        display: block; /* Se till att div:arna fortfarande är där för hamburgaren */
    }

    .hamburger.active div {
        display: none; /* Dölja de vanliga linjerna när "X" visas */
    }

    .nav-links {
        position: fixed;
        top: 50px; /* Justera till samma höjd som navbaren för att popup-menyn ska hamna direkt under */
        right: 0; /* Placera menyn hela vägen till höger */
        width: auto;
        max-width: 90%; /* Begränsa bredden för att undvika att den blir för stor */
        background: linear-gradient(to bottom, rgba(26, 128, 150, 0.9), rgba(26, 128, 150, 0.4));
        display: none;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .nav-links li a {
        color: #ffffff; /* Länkarna är vita */
        font-size: 1em;
        text-align: right; /* Justerar länkarna till höger */
        padding: 10px; /* Lägger till lite padding för bättre klickyta */
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Svart skugga för bättre läsbarhet */
        white-space: nowrap; /* Förhindrar att länktexten bryts till flera rader */
    }

    .nav-links.active {
        display: flex; /* Visa menyn när den är aktiv */
    }
}

/********************************************
    HAMBURGEMENY (Desktop)
********************************************/
@media (min-width: 769px) {
    .hamburger {
        display: none; /* Dölj hamburgarmenyn på större skärmar */
    }

    .nav-links {
        display: flex; /* Visa menyn alltid på desktop */
        position: static; /* Återställ positionen på desktop */
        flex-direction: row; /* Horisontell layout för menylänkar */
        width: auto;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        gap: 20px;
    }
}

/*********************************************
    TJÄNSTESEKTION GRUNDSTYLING
*********************************************/
#arbetsomraden {
    background: var(--section-gradient-light);
    text-align: left;
    padding: 40px 0;
    border-bottom: 3px solid #a0a0a0;
}

/*********************************************
    TYPOGRAFI OCH INNEHÅLL
*********************************************/
#arbetsomraden h2 {
    margin: 20px 0;
}

#arbetsomraden p {
    padding: 5px 10px;
    text-align: center;
    margin: 0 auto;
    max-width: 800px;
}

.service p {
    flex-grow: 1;
    margin: 10px 0;
}

/*********************************************
    GRID OCH CONTAINER
*********************************************/
.service-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1600px;
    margin: 0 auto;
    align-items: stretch;
}

/*********************************************
    TJÄNSTEKORT
*********************************************/
.service {
    background: var(--primary-background);
    text-align: left;
    padding: 30px 30px;
    padding-bottom: 50px;
    border-top-left-radius: 55px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 55px;
  border-bottom-right-radius: 15px;
    box-shadow: var(--shadow-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.service:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/*********************************************
    IKONER
*********************************************/
.service-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease, filter 0.3s ease;
    animation: pulse 4s infinite ease-in-out;
}

.service-icon:hover {
    transform: scale(1.2);
    filter: brightness(1.2) drop-shadow(0px 10px 25px rgba(0, 0, 0, 0.3));
}

/*********************************************
    ANIMATIONER
*********************************************/
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/*********************************************
    CTA KNAPPAR
*********************************************/
.cta-banner-btn {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background: linear-gradient(to right, rgba(26, 130, 150, 0.9), rgba(33, 51, 79, 0.9));
color: white;
text-align: center;
text-decoration: none;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
font-size: 1.1em;
cursor: pointer;
border: none;
transition: all 0.3s ease;
border-bottom-left-radius: 55px;
border-bottom-right-radius: 0;
display: flex;
justify-content: center;
align-items: center;
box-shadow: var(--shadow-light);
background-color: transparent !important;
appearance: none;
}

.cta-banner-btn::after {
    content: " ▸";
    display: inline-block;
    margin-left: 8px;
    color: white;
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

.cta-banner-btn:hover {
    background: linear-gradient(to right, #21334f, #1a8296);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border-radius: var(--main-border-radius);
}

.cta-banner-btn:hover::after {
    transform: translateX(5px);
}

.cta-banner-btn:active {
    transform: translateY(2px);
    filter: brightness(0.9);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

/*********************************************
    MOBILA ANPASSNINGAR
*********************************************/
@media (max-width: 768px) {
    .service-container {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 10px;
        padding-bottom: 30px;
    }

    #arbetsomraden h2 {
        margin-top: 10px;
        padding-top: 10px;
    }

    .service {
        padding-top: var(--main-padding);
    }

    .service-icon {
        width: 100px;
        height: 100px;
        filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.2));
        margin: 0 auto;
    }

    .cta-banner-btn {
        font-size: 1em;
        padding: 8px;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        transform: none;
    }

    .cta-banner-btn:hover {
        transform: scale(1);
    }

    .cta-banner-btn:active {
        transform: translateY(2px);
    }

    .cta-banner-btn::after {
        font-size: 1em;
        margin-left: 5px;
    }
}

/********************************************
   OM MIG SEKTION STYLING (DESKTOP)
********************************************/
#about {
   background: var(--section-gradient-medium);
   padding: 20px 0 40px;
   margin-top: -10px;
   margin-bottom: 20px;
   text-align: center;

}

/* Rubrikstil för sektionen */
.about-h2 {
   color: var(--section-header-color, #21334f);
   margin: 5px 0 30px 0;
}

/* Layout för innehållet i Om mig-sektionen */
.about-container {
   display: flex;
   flex-direction: row;
   gap: 20px;
   max-width: 1000px;
   margin: 0 auto;
   align-items: stretch;
   justify-content: center;
   padding: 0 20px;
   text-align: center;
   
}

/* Stil för textrutan */
.about-text {
   position: relative;
   display: flex;
   flex-direction: column;
   background: var(--primary-background);
   padding: 30px;
   padding-bottom: 60px;
   border-radius: 15px;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
   color: #333;
   text-align: center;
   width: 100%;
   max-width: 700px;
   margin: 0 auto;
}

.signature {
   font-family: 'Dancing Script', cursive;
   font-size: 2em;
   text-align: center;
   margin-top: 20px;
   color: var(--main-color);
}

/* Bild och sociala ikoner */
.about-photo-icons {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   justify-content: flex-start;
   margin-top: 30px;
}

/* Fotot */
.about-photo {
   width: 200px;
   height: 200px;
   object-fit: cover;
   border-radius: 50%;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hovereffekt för fotot */
.about-photo:hover {
   transform: scale(1.05);
   box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}

/* Sociala ikoner */
.social-icons {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 10px;
}

.social-icons a {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
}

.social-icons img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.3));
}

.help-text {
   font-size: 1em;
   text-align: center;
   color: white;
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
   text-decoration: none;
}

/* Hover-effekt för ikonerna */
.social-icons a:hover img {
   transform: scale(1.1);
   filter: brightness(1.3);
}

/* Styling för banner-knappen */
#read-more-btn, #close-btn {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 15px;
  background: linear-gradient(to right, rgba(26, 130, 150, 0.9), rgba(33, 51, 79, 0.9));
   color: white;
   text-align: center;
   text-decoration: none;
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
   font-size: 1.2em;
   cursor: pointer;
   border: none;
   transition: background 0.3s ease, transform 0.3s ease, filter 0.2s ease;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
}

/* Hover-effekter för knapparna */
#read-more-btn:hover, #close-btn:hover {
   background: linear-gradient(to right, #21334f, #1a8296);
   border-radius: 15px;
   filter: brightness(1.1) drop-shadow(0px 10px 25px rgba(0, 0, 0, 0.3));
}

/* Aktivt tillstånd (klicka) */
#read-more-btn:active, #close-btn:active {
   transform: translateY(2px);
   filter: brightness(0.9);
   box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

/********************************************
  OM MIG STYLING MOBIL
********************************************/
@media (max-width: 768px) {
   .about-container {
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
   }

   .about-text {
       width: 100%;
       margin-bottom: 20px;
   }

   .about-photo {
       width: 200px;
       height: 200px;
   }
   
   .social-icons img {
  margin-bottom: 3px;
 
}

 .social-icons a {
       flex-direction: column;
       text-align: center;
       gap: 5px;
   }
   
   .help-text {
       font-size: 1em;
       margin-top: 5px;
       display: block;
   }
}

   #read-more-btn, #close-btn {
       font-size: 1.1em;
       padding: 10px;
   }


/********************************************
   KUNDSAMARBETEN SEKTION
********************************************/
.client-section {
   background: var(--section-gradient-light);
   padding: 40px 20px 40px;  
   text-align: center;
   color: #21334f;
   margin-top: -20px;
}

/********************************************
   LAYOUT & CONTAINERS
********************************************/
.client-logos-container {
   max-width: 70%;
   margin: 0 auto;
   padding: 30px;
}

.client-logos {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
}

/********************************************
   TYPOGRAFI & TEXT
********************************************/
.client-section h2 {
   font-size: 2.2em;
   text-align: center;
   color: #21334f;
   margin: 0;
   padding-bottom: 20px;
   text-shadow: 
       -1px -1px 0 #ffffff,
       1px 1px 2px rgba(0, 0, 0, 0.25);
}

.client-text {
   margin-bottom: 40px;
   padding: 0 20px;
   text-align: center;
   font-size: 1.1em;
   color: #333;
}

/********************************************
   LOGOTYP STYLING
********************************************/
.client-logo {
   width: 140px;
   height: 140px;
   border-radius: 50%;
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   position: relative;
}

.client-logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 50%;
   box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
   animation: pulse 6s infinite ease-in-out;
   image-rendering: -webkit-optimize-contrast;
   image-rendering: crisp-edges;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   transform: translateZ(0);
}

/********************************************
   HOVER & ANIMATIONER
********************************************/
.client-logo:hover {
   padding: 10px;
   transition: all 0.3s ease-in-out;
}

.client-logo:hover img {
   transform: scale(1.1) rotate(2deg);
   filter: brightness(1.2);
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

@keyframes pulse {
   0% { transform: scale(1); }
   50% { transform: scale(1.05); }
   100% { transform: scale(1); }
}

/********************************************
   HJÄLPTEXT
********************************************/
.client-logo a[data-hover-text]::after {
   content: attr(data-hover-text);
   position: absolute;
   bottom: -40px;
   left: 50%;
   transform: translateX(-50%);
   background-color: transparent;
   color: #21334f;
   font-size: 1.2em;
   padding: 5px 0;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
   text-shadow: 
       -1px -1px 0 #ffffff,
       1px 1px 2px rgba(0, 0, 0, 0.25);
}

.client-logo a[data-hover-text]:hover::after {
   opacity: 1;
}

/********************************************
   MOBILANPASSNINGAR
********************************************/
@media (max-width: 768px) {
   .client-section h2 {
       font-size: 1.9em;
   }

   .client-text {
       font-size: 1em;
       padding: 0 20px;
   }

   .client-logos {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 30px;
       justify-items: center;
   }

   .client-logo {
       width: 100px;
       height: 100px;
   }

   .client-logo img {
       box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
   }

   .client-logos-container {
       max-width: 95%;
       padding: 10px;
   }
}


/********************************************
    KONTAKTSEKTION STYLING
********************************************/

/* Kontakta-sektion */
#contact {
    padding: 0;
    text-align: center;
    position: relative;
    background: linear-gradient(to bottom, #21334f, #000000); /* Gradient för sektionens bakgrund */
}

/* Toppsektionen av kontaktsektionen */
.contact-top {
    background: linear-gradient(to top, #21334f, #000000);
    padding: 20px 0; /* Minska vertikal padding för att ta bort extra utrymme */
}

/* Wrapper för kontaktens rubrik */
.contact-heading-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Styling för rubriken i kontaktdelen */
.contact-heading {
    color: white; /* Vit text för god kontrast mot den mörkblå bakgrunden */
    background-color:linear-gradient(to bottom, #21334f, #000000); /* Gradient för bakgrundsfärg för rubriken */
    font-size: 2em;
    margin: 0; /* Ingen yttre marginal */
    text-align: center;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5); /* Lätt skugga för djup och kontrast */
    transition: transform 0.3s ease, text-shadow 0.3s ease; /* Animation för dynamik */
}

/* Effekt när man hovrar över rubriken */
.contact-heading:hover {
    transform: scale(1.05); /* Lätt zoom-effekt */
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7); /* Starkare skugga vid hover */
}

/* Wrapper för Jotform-iframe */
.jotform-wrapper {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden; /* För att dölja reklambannern om den är längre än wrapperns höjd */
}

/* Iframe-styling */
.jotform-wrapper iframe {
    width: 100%;
    height: 600px; /* Fast höjd som passar ditt kortare formulär */
    border: none;
    position: relative;
    z-index: 1; /* Sätter iframen bakom täckaren */
}

/* Täcka över reklambannern med contact-bottom */
.contact-bottom {
    position: absolute;
    bottom: 0; /* Placera täckaren längst ner över bannern */
    left: 0;
    width: 100%;
    height: 80px; /* Justera höjden för att täcka bannern exakt */
    background: #21334f; /* Bakgrundsfärg som matchar sektionen */
    z-index: 2; /* Sätter täckaren ovanpå iframen */
}

/* Anpassning för mobil */
@media (max-width: 768px) {
    .jotform-wrapper {
        width: 100%;
    }

    .contact-heading {
        font-size: 1.5em;
        margin: 20px 0;
    }
    .contact-bottom {
        height: 30px; /* Mindre höjd för täckaren på mobil */
    }
} 


/********************************************
FOOTER STYLING
********************************************/

.footer-container {
    background: var(--footer-bg-color);
    padding: 40px; /* Balans för både mobil och desktop */
    color: var(--footer-text-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    overflow: visible;
    margin-top: 0; /* Ändra från auto till 0 */
    position: relative; /* Alternativt, prova sticky */
    bottom: 0;
}

.footer-icons-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Avstånd mellan ikoner */
    flex-wrap: wrap; /* Tillåt ikoner att radbrytas på mobil */
    margin-bottom: 15px;
    width: 100%;
}

/* Styling för ikonerna */
.footer-icon-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;

}


.footer-icon-link img {
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

/* Texten under ikonerna (alltid synlig) */
.footer-hover-text::after {
    content: attr(data-hover-text);
    position: static;
    margin-top: 5px;
    font-size: 0.8em;
    color: var(--footer-text-color);
    white-space: nowrap;
    opacity: 1; /* Alltid synlig */
    text-align: center;
}
/* Styling för text */
.footer-left {
    font-size: 0.8em; /* Gör copyright-texten samma storlek som hjälptexterna */
}

.footer-left a {
    color: white; /* Gör alla länkar i footer-left vita */
    text-decoration: none;
}

.footer-left a:hover {
    text-decoration: underline; /* Lägg till en underline vid hover för bättre synlighet */
}
/********************************************
    MEDIA QUERY FÖR MOBILANPASSNING
********************************************/
@media (max-width: 768px) {
    .footer-icons-wrapper {
        gap: 10px; /* Mindre gap på mobil */
        justify-content: space-evenly; /* Fördelar ikoner jämnt på mobil */
    }

    .footer-icon-link img {
        width: 40px; /* Mindre storlek på mobil */
        height: 40px;
    }

    .footer-left {
        margin-top: 10px;
        font-size: 0.8em;
    }
}