/**
* Template Name: Siimple
* Template URL: https://bootstrapmade.com/free-bootstrap-landing-page/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Zilla slab",  serif;
  --heading-font: "Zilla slab",  serif;
  --nav-font: "Zilla slab",  serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #F6F7F4; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #462918; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #EF532B; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --mail-color: #424242; /* Color for headings, subheadings and title throughout the website */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #F6F7F4; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #3b3b3b; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #EF532B; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #B74226; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the same color scheme. */

.light-background {
  --background-color: rgb(246, 247, 244);
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #6f6f6f;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #898989;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--mail-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 0%);
  text-decoration: none;
}

.h1-adel {
  font-family: "Zilla Slab", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  text-align: center; /* Säkerställ att rubriken är centrerad */
  color: #E73B22
}

.h2-adel {
  font-family: "Zilla Slab", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 26px;
  color: rgb(66, 66, 66); /* Svart med 90% opacitet */
}

.h2-adel-citat {
  font-family: "Zilla Slab", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 34px;
  color: rgb(66, 66, 66); /* Svart med 90% opacitet */
}

.h3-adel {
  font-family: "Zilla Slab", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 26px;
  color: rgb(239,83,43); /* Accent orange */
}

h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.p-adel {
  font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 22px;
  color: color: rgba(0, 0, 0, 0.9); /* Svart med 90% opacitet */
  line-height: 1.5; /* Ökar radavståndet till 1.5x av standardhöjden */
}

.p-citat {
  font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  color: color: rgba(0, 0, 0, 0.9); /* Svart med 90% opacitet */
  line-height: 1.5; /* Ökar radavståndet till 1.5x av standardhöjden */
}

.p-citat-orange {
  font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  color: rgb(239,83,43)!important; /* Orange accent */
  line-height: 1.5; /* Ökar radavståndet till 1.5x av standardhöjden */
}

.space {
  letter-spacing: 6px; /* Ökar avståndet mellan bokstäver */
}

.word-space {
  margin-right: 22px; /* Justerar avståndet mellan hela ord */
  display: inline-block; /* Se till att orden hanteras individuellt */
}

@media (max-width: 768px) {
    .word-space {
        display: block; /* Gör att varje ord hamnar på en egen rad */
        margin-right: 0; /* Tar bort mellanrummet mellan orden */
        margin-bottom: 10px; /* Skapar lite avstånd mellan orden */
    }

    /* Minska textstorleken för mobilskärmar */
    .h1-adel {
        font-size: 30px; /* Gör rubriken mindre på mobil */
    }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 50px;  /* Ändra höjden utan att förlora proportionerna */
  width: auto; /* Anpassar bredden proportionellt */
  height: auto; /* Ser till att höjd-bredd-förhållandet bibehålls */
  margin-right: 12px;
  margin-left: 15px; /* Flyttar logon åt höger */
}

.header .logo h1 {
  font-size: 40px;
  margin: 0;
  font-weight: 300;
  color: var(--heading-color);
}

/*-----------------------------
/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(239, 83, 43, 0.80);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu */
.mobile-nav-toggle {
  color: var(--nav-color);
  position: fixed;
  top: 22px;
  right: 20px;
  font-size: 32px;
  line-height: 0;
  cursor: pointer;
  display: block !important;
  z-index: 998;
  transition: 0.3s;
}

.mobile-nav-toggle:hover {
  color: var(--nav-hover-color);
}

.navmenu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -300px;
  z-index: 997;
  transition: 0.3s;
  width: 200px;
  overflow: hidden;
}

.navmenu ul {
  display: block;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  overflow-y: auto;
  transition: 0.3s;
  z-index: 998;
}

.navmenu a,
.navmenu a:focus {
  color: var(--nav-dropdown-color);
  padding: 10px 20px;
  font-family: var(--nav-font);
  font-size: 17px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  transition: 0.3s;
}

.navmenu a i,
.navmenu a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.navmenu a i:hover,
.navmenu a:focus i:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
  color: var(--nav-dropdown-hover-color);
}

.navmenu .active i,
.navmenu .active:focus i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: rotate(180deg);
}

.navmenu .dropdown ul {
  position: static;
  display: none;
  z-index: 99;
  padding: 10px 0;
  margin: 10px 20px;
  box-shadow: none;
  transition: all 0.5s ease-in-out;
}

.navmenu .dropdown>.dropdown-active {
  display: block;
  background-color: var(--nav-dropdown-background-color);
  border: 1px solid color-mix(in srgb, var(--nav-dropdown-color), transparent 90%);
}

.mobile-nav-active {
  overflow: hidden;
}

.mobile-nav-active .mobile-nav-toggle {
  right: 203px; /* Justerar högerpositionen */
  top: 3px; /* Justerar positionen från toppen */
  bottom: auto; /* Tar bort eventuell tidigare inställning */
  font-size: 36px;
}

.mobile-nav-active .navmenu {
  position: fixed;
  overflow: hidden;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: var(--nav-mobile-background-color);
  transition: 0.3s;
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
  position: relative;
}

.footer h3 {
  font-size: 36px;
  font-weight: 300;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}

.footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 30px 0;
}

.footer .social-links {
  margin: 0 0 30px 0;
}

.footer .social-links a {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: var(--contrast-color);
  line-height: 1;
  margin: 0 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  text-decoration: none;
}

.footer .copyright {
  padding-top: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .credits {
  font-size: 13px;
  padding-top: 5px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid var(--accent-color);
  border-top-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: rgba(239, 83, 43, 0.80);
  width: 50px;
  height: 50px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 34px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 0%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 58px;
  overflow: clip;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 90px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 15px;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
/* Se till att .container är korrekt placerad */
.hero {
  width: 100%;
  height: 1017px; /* Sätter fast höjd lika med bildens höjd */
  position: relative;
  padding: 40px 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

#hero.section {
  padding-bottom: -80px; /* Tar bort extra padding */
}

/* Hanterar bakgrundsbilden i hero */
.hero img.hero-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%; /* Låt bilden fylla hero-sektionen */
  object-fit: cover;
  z-index: 1;
}

/* Se till att containern alltid håller sig inom en rimlig bredd */
.container-logo {
  position: absolute !important;
  top: 17%; /* Justera vid behov */
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  z-index: 10;

  display: flex !important;
  flex-direction: column;
  align-items: center !important; /* Centrera innehållet horisontellt */
  justify-content: center !important; /* Centrera innehållet vertikalt */

  width: 900px !important; /* Behåller den ursprungliga bredden */
  max-width: 900px !important;
  text-align: center !important;
  padding: 0 !important;
  
  transform: translate(-50%, 0) scale(0.9) !important; /* Skalar ner hela containern till 90% */
  transform-origin: center !important; /* Ser till att den skalas från mitten */
}

/* Se till att logotypen verkligen är centrerad i containern */
.hero-logo {
  display: block !important; /* Säkerställer att den inte påverkas av Bootstrap */
  max-width: 100% !important; /* Säkerställ att den anpassas inom sin container */
  height: auto !important;
  
  margin: 0 auto !important; /* Tvinga absolut centrering */
  padding: 0 !important;
}

.logo-wrapper {
  width: 100%; /* Säkerställer att div:en runt loggan tar hela bredden */
  text-align: center; /* Centrerar loggan */
}

/* Styling för hero-texter */
.hero h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 300;
}

.hero p {
  margin: 10px 0 0 0;
  font-size: 24px;
  color: var(--heading-color);
}

/* Styling för knappen */
.hero .btn-get-started {
  color: #462918;
  background: #FFCB2A;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 40px;
  margin: 30px 0 0 0;
  border-radius: 50px;
  transition: 0.3s;
}

.hero .btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

/* Anpassningar för mindre skärmar (max 768px, högläge) */
@media (max-width: 768px) and (orientation: portrait) {
  .hero h2 {
    font-size: 32px;
  }

  .hero-logo {
    max-width: 350px !important; /* Öka storleken i högläge */
    height: auto !important;
  }
}

/* Anpassningar för mellan-stora skärmar (upp till 1024px) */
@media (max-width: 1024px) {
  .hero {
    height: auto; /* Gör sektionen dynamisk på mindre skärmar */
    min-height: 70vh; /* Sätter en minimihöjd istället */
  }

  .hero-logo {
    width: 100% !important; /* Anpassa till skärmbredden */
    max-width: 350px !important;  /* Begränsa maxbredden */
    height: auto !important; /* Bevara proportionerna */
  }
}

/* Separat regel för liggande läge på 1024px och mindre */
@media (max-width: 1024px) and (orientation: landscape) {
  .hero-logo {
    max-width: 450px !important; /* Anpassad storlek för landskapsläge */
  }
}

/* Anpassningar för stora skärmar (från 1200px och uppåt) */
@media (min-width: 1200px) {
  .hero-logo {
    max-width: 900px !important; /* Se till att den aldrig blir bredare än 900px */
  }
}

.hero p {
    font-size: 18px;
  }

/* Anpassa logotypens storlek för mindre skärmar */
.hero .container img {
    width: 280px !important;  /* Minska storlek för mindre skärmar */
    height: auto !important;  /* Bevara proportioner */
  }


.text-overlay {
    background-color: rgb(255, 255, 255, 0.5); /* Vit bakgrund med 50% opacitet */
    padding: 20px; /* Ger utrymme runt texten */
    border-radius: 10px; /* Rundar hörnen med 10px */
    display: inline-block; /* Anpassar storleken efter innehållet */
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h2 {
  font-size: 26px;
  font-weight:500;
}

.about .content .fst-italic {
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding: 10px 0 0 0;
  display: flex;
}

.about .content ul i {
  color: var(--accent-color);
  margin-right: 0.5rem;
  line-height: 1.2;
  font-size: 30px !important;
}

/* Ta bort standardlist-stil (punkterna) */
.ikon-list {
    list-style: none; /* Tar bort listpunkterna */
    padding-left: 0; /* Tar bort indrag */
}

/* Styling för listobjekten */
.ikon-list li {
    display: flex;
    align-items: flex-start; /* Se till att text börjar vid ikonen */
    gap: 8px; /* Skapa avstånd mellan ikon och text */
}

/* Se till att ikonen ligger kvar i början av första raden och höjs lite */
.ikon-list i {
    color: var(--accent-color); /* Sätt rätt färg */
    font-size: 4rem; /* Storlek på ikonen */
    margin-top: 3px; /* Flyttar upp ikonen lite */
    margin-left: -22px; /* Flyttar ikonen längre till vänster */
    flex-shrink: 0; /* Förhindra att ikonen flyttas vid radbrytning */
    line-height: 1; /* Håll ikonen kompakt */
}

.about .content p:last-child {
  margin-bottom: 0;
}
#about {
    padding-bottom: 10px !important; /* Minskar avståndet efter "About" */
}

#about .content {
    margin-bottom: 20px; /* Ger mer avstånd under textinnehållet */
}

#about img {
    margin-bottom: 30px; /* Skapar utrymme under bilden */
}

#about + .section-title {
    margin-top: 60px; /* Skapar mellanrum före "Upplevelsebaserat lärande" */
}

#about .section-title:last-of-type {
    margin-top: 10px; /* Justerar "Ökad medvetenhet" */
    margin-bottom: 10px; /* Minskar avståndet före nästa sektion */
}

.rounded-image {
    border-radius: 10px; /* Rundar hörnen på just denna bild */
}

.first-section {
  padding-top: 40px; /* Mindre avstånd från hero */
}

/* Gör layouten till en ren flexbox */
.about-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; /* Lägg avstånd mellan bild och text */
    align-items: flex-start; /* Se till att båda kolumnerna startar i toppen */
    justify-content: center;
}

/* Bild och text tar lika mycket plats */
.image-container {
    flex: 1; /* Gör att den tar upp lika mycket plats som texten */
    max-width: 50%;
}

/* Texten håller sig alltid bredvid bilden */
.text-container {
    flex: 1; /* Gör att den tar upp lika mycket plats som bilden */
    max-width: 50%;
}

/* Se till att texten "Teater som metod" hamnar under allt */
.teater-text {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Se till att bilden fyller sin kolumn */
.kursbild {
    width: 100%; /* Låt bilden fylla sin container */
    height: auto;
    display: block;
}

/* Anpassning för mobil */
@media (max-width: 992px) {
    .about-flex {
        flex-direction: column; /* Lägger allt i en kolumn */
    }

    .image-container,
    .text-container {
        flex: 0 0 100%; /* Bild och text blir fullbredd */
        max-width: 100%;
    }
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us .card {
  background-color: var(--surface-color);
  color: var(--default-color);
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 0px; /* Ger en mjuk kant om så önskas */
  margin-bottom: 20px;
  border: 0;
  height: 100%;
  position: relative;
}

.why-us .card .img {
  position: relative;
  border-radius: 0px; /* Ger en mjuk kant om så önskas */
  padding: 0;
}

.why-us .card .icon {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), white 92%);
  border: 4px solid var(--background-color);
  width: 72px;
  height: 72px;
  text-align: center;
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 32px);
  bottom: -36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 0;
  transition: 0.3s;
}

.why-us .card:hover .icon {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.why-us .card h3 {
  text-align: left;
  font-weight: 500;
  font-size: 24px;
  padding: 0 30px 0px 30px;
  margin: 50px 0 12px 0;
}

.why-us .h2-adel-citat {
  font-family: "Zilla Slab", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 34px;
  color: rgb(66,66,66);
}

.why-us .card p {
  font-size: 22px;
  line-height: 1.5; /* Ökar radavståndet till 1.5x av standardhöjden */
  margin-bottom: 0;
  padding: 0 30px 30px 30px;
}

.why-us .p-adel i {
  margin-right: 8px; /* Justera detta värde efter behov */
  vertical-align: middle; /* Säkerställer att ikonerna justeras vertikalt med texten */
  font-size: 1.2rem; /* Justera ikonstorleken om nödvändigt */
}

#why-us.section {
    padding-top: 0px !important;
    padding-bottom: 40px !important;
}

/* Anpassning för mobiler i landskapsläge */
@media (max-width: 1024px) and (orientation: landscape) {
    .why-us .col-md-4 {
        flex: 0 0 48%;  /* Justera bredden till ca 48% av raden */
        max-width: 48%; /* Se till att de inte blir större än 48% */
    }

    .why-us .container {
        max-width: 90%; /* Gör så att hela sektionen breddas */
    }

    .why-us .row {
        justify-content: center; /* Håller korten centrerade */
    }
}

/* Anpassning för större mobila skärmar i porträttläge (768x1024, 820x1180, 912x1368, 1024x1366) */
@media (max-width: 1024px) and (min-height: 1024px) {
    .why-us .col-md-4 {
        flex: 0 0 48%;  /* Justera bredden till ca 48% av raden */
        max-width: 48%; /* Se till att de inte blir större än 48% */
    }

    .why-us .container {
        max-width: 90%; /* Gör så att hela sektionen breddas */
    }

    .why-us .row {
        justify-content: center; /* Håller korten centrerade */
    }
}

/*--------------------------------------------------------------
# Citat Section
--------------------------------------------------------------*/

#citat {
  background-color: var(--background-color); /* Matcha sidans färgschema */
  padding: 40px 20px 5px 20px; /* 60px top, 20px right, 30px bottom, 20px left */
  margin-top: 20px; /* Justera avståndet ovanför sektionen */
  margin-bottom: 0px; /* Justera avståndet under sektionen */
  text-align: center;
}


/* Stil för citatrutan */
#citat blockquote {
  color: var(--heading-color); /* Anpassa till sidans textfärg */
  max-width: 900px; /* Begränsar bredden för bättre läsbarhet */
  margin: 0 auto 20px auto; /* Centrerar blockquoten */
  padding: 20px;
  border-left: 0px solid var(--accent-color); /* Elegant sidolinje */
  background-color: var(--background-color); /* Lätt bakgrundsfärg */
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.0);
  border-radius: 0px; /* Mjukar upp kanterna */
}

/* Lägg till Bootstrap-ikon med extra avstånd */
#citat blockquote::before {
  content: ""; /* Bootstrap-ikonens Unicode-kod */
  font-family: "bootstrap-icons"; /* Använd Bootstrap-icons som typsnitt */
  font-size: 50px;
  font-style: normal;
  font-weight: normal;
  color: var(--accent-color);
  position: relative;
  top: 10px;
  left: -5px;
  display: block; /* Tvingar ikonen att hamna på en egen rad */
  margin-bottom: 12px; /* Lägg till avstånd under ikonen */
}

/* Stängande citattecken */
#citat blockquote::after {
  content: ""; /* Samma ikon för avslutning om önskat */
  font-family: "bootstrap-icons";
  font-size: 50px;
  font-style: normal;
  font-weight: normal;
  color: var(--accent-color);
  position: relative;
  top: 10px;
  right: -5px;
}

#citat .h2-adel-citat {
  font-family: "Zilla Slab", serif;
  font-weight: 500;
  font-style: normal;
  font-size: 34px;
  color: rgb(66, 66, 66);
}

#citat .p-citat-orange {
  font-family: "Zilla Slab", serif;
  font-weight: 300;
  font-style: italic;
  font-size: 22px;
  color: rgb(239,83,43)!important; /* Orange accent */
  line-height: 1.5; /* Ökar radavståndet till 1.5x av standardhöjden */
}

/* Separera citaten genom avstånd */
#citat blockquote p {
  margin-bottom: 15px;
}

.avskiljare {
    display: block;  /* Gör att ikonen hamnar på en egen rad */
    text-align: center; /* Centrera ikonen */
    font-size: 26px; /* Justera storleken */
    color: var(--accent-color); /* Anpassa färgen till din webbplats */
    margin: 10px 0; /* Skapa utrymme mellan citaten */
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Cookie consent panel
--------------------------------------------------------------*/
    #cookieConsent {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(239, 83, 43, 0.80); /* Röd accent bakgrundsfärg */
    color: white;
    text-align: center;
    padding: 15px;
    z-index: 1000;
    display: none;
}

    /* Cookie consent container */
    .cookie-consent-container {
    max-width: 800px;
    color: white; /* Textfärg */
    margin: 0 auto;
    background-color: rgba(205, 208, 202, 0.75); /* Bakgrundsfärg */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px; /* Skapar utrymme från kanten */
    border-radius: 0px; /* Rundade hörn (valfritt) */
    gap: 10px; /* Avstånd mellan knapparna */
}

    /* CSS för knappen "Acceptera alla" */
    #acceptCookies {
    background-color: #667026; /* Grön bakgrundsfärg */
    color: white; /* Textfärg */
    border: none; /* Ingen gräns */
    padding: 10px 20px; /* Justera storleken */
    font-size: 16px; /* Textstorlek */
    cursor: pointer; /* Visar att knappen är klickbar */
    border-radius: 0px; /* Rundade hörn */
    transition: background-color 0.3s ease; /* Smooth övergång för bakgrundsfärg */
}

    #acceptCookies:hover {
    background-color: #35803B; /* Färgen vid hover */
}

    /* CSS för knappen "Neka icke-nödvändiga" */
    #rejectCookies {
    background-color: #EF532B; /* Röd bakgrundsfärg */
    color: white; /* Textfärg */
    border: none; /* Ingen gräns */
    padding: 10px 20px; /* Justera storleken */
    font-size: 16px; /* Textstorlek */
    cursor: pointer; /* Visar att knappen är klickbar */
    border-radius: 0px; /* Rundade hörn */
    transition: background-color 0.3s ease; /* Smooth övergång för bakgrundsfärg */
}

    #rejectCookies:hover {
    background-color: #A53C23; /* Färgen vid hover */
}

@media (max-width: 768px) {
    .cookie-consent-container {
        flex-direction: column; /* Ändrar layouten till en vertikal stack */
        text-align: center; /* Säkerställer att texten centreras */
        gap: 15px; /* Ökar avståndet mellan elementen */
        padding: 15px; /* Mindre padding för att passa små skärmar */
    }

    .p-cookie {
        margin-bottom: 10px; /* Lägger till utrymme mellan text och knappar */
    }

    #acceptCookies, #rejectCookies {
        width: 100%; /* Gör knapparna lika breda som containern */
        max-width: 300px; /* Begränsar bredden för bättre utseende */
    }
}