html {
  scroll-behavior: smooth;
  background-color: #f7f7f7;
  font-family: 'Lato', sans-serif;
  font-weight: 300; /* or 400 */
}

#fv-loading-icon {
  content-visibility: hidden !important;
}

.hero-video {
  display: none;
}

@media (min-width: 1024px) {
  .hero-image {
    display: none;
  }

  .hero-video {
    display: block;
  }
}


      
/* default: left-aligned */
td[data-label="Betalsätt"] .payway-icons {
  white-space: nowrap;
}

@media (min-width: 600px) {
.mobileonly {
    display: none;
}
}

@media (max-width: 768px) {
.mobileonly {
    margin-left: 24vw;
 
}
}
/* mobile: right-aligned */
@media (max-width: 768px) {
  td[data-label="Betalsätt"] .payway-icons {
    text-align: right;
  }
}



#mobile_video_title {
  position: relative;
  z-index: 3;
  text-align: center;

  padding: 0 1.25rem;
  margin-top: 20vh;

  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;

  color: #f7f7f7;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mobile_video_subtitle {
  position: relative;
  z-index: 3;
  text-align: center;

  margin-top: 0.75rem;
  padding: 0 1.25rem;

  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;

  color: #f7f7f7;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}


#litenexempeltext_title_mobile{
  position: relative;
  z-index: 3;

  margin-top: 0.75rem;
  padding: 0 1.25rem;

  font-family:lato, sans-serif;
  font-size: clamp(1.05rem, 4.5vw, 1.35rem);
  line-height: 1.45;
  font-weight: 900;
  letter-spacing: -0.01em;

  background: -webkit-linear-gradient(#4d6cac, #2c456b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-family: lato, sans-serif;
    text-align: center;

}


@media (min-width: 600px) {
  /* Reset default margin and padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
}


  @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2') format('woff2');
  }


  

  #articles-section {
    text-align: center;
    margin-top: 60px;
    padding: 70px 20px;
    background: linear-gradient(135deg, #f8fafc, #e7eff8);
    border-radius: 12px;

}

/* Title and description */
#articles-title {
    font-size: 2.3rem;
    font-weight: 700;
    color: #1d3557;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}

#articles-intro {
    font-size: 1.2rem;
    color: #444;
    max-width: 850px;
    margin: 0 auto 40px;
    line-height: 1.8;
    padding: 10px;
}

.article-date {
  display: block;
  font-size: 0.9rem;
  color: #777;
  margin-top: 10px;
  font-style: italic;
}


/* Grid Layout (Handles Single & Multiple Articles) */
#articles-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;  /* Centers the card if only one */
    gap: 35px;
    max-width: 1150px;
    margin: 0 auto;
    padding: 15px 15px;

}

/* Article Card Styling */
.article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer;
    position: relative;
    width: 320px; /* Ensures a good size for a single article */
}

/* Image Styling */
.article-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: transform 0.3s ease-in-out;
}

.article-card:hover img {
    transform: scale(1.05);
}

/* Article Content */
.article-content {
    padding: 22px;
    text-align: center;
}

.article-content h3 {
    font-size: 1.5rem;
    color: #1d3557;
    margin-bottom: 10px;
    font-weight: 700;
    transition: color 0.3s ease-in-out;
}

.article-content p {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
}

/* Hover Effects */
.article-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.18);
}

.article-card:hover h3 {
    color: #c98c00;
}

/* Single Article Centering */
#articles-grid:has(.article-card:only-child) {
    justify-content: center; /* Ensures the single article is centered */
}

/* Responsive Tweaks */
@media (max-width: 768px) {
    #articles-title {
        font-size: 2.1rem;
    }
    #articles-intro {
        font-size: 1.1rem;
        line-height: 1.6;
    }
    .article-content h3 {
        font-size: 1.4rem;
    }
    .article-content p {
        font-size: 0.95rem;
    }
    .article-card {
        width: 90%; /* Makes it wider on smaller screens */
    }
}



/* Ultra-Sleek Did You Know Box */
.tip-box {
  background: #ffffff; /* Crisp white background */
  border-left: 4px solid #f39c12; /* Sleek and refined left accent */
  padding: 20px 24px; /* Slightly reduced padding */
  margin: 24px auto; /* Centering with auto margin */
  font-size: 1.1rem;
  color: #2c3e50;
  border-radius: 12px; /* Smooth, modern curves */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  text-align: left;
  position: relative;
  max-width: 700px; /* Sets a comfortable max width */
  width: 100%; /* Ensures it scales well on mobile */
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}


.button:hover
{
 color:#ffffff !important;
}


.buttontravel:hover

{
  color:#ffffff !important;
 }
 




.tip-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Floating "Did You Know?" Label */
.tip-box::before {
  content: "Visste du?";
  display: inline-block;
  background: #f39c12;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  position: absolute;
  top: -10px;
  left: 18px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
  transition: top 0.25s ease-in-out;
}

.tip-box:hover::before {
  top: -14px; /* Slight movement for elegance */
}

/* Fact Text */
.tip-box p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #2c3e50;
  font-weight: 500;
  margin: 0;
}

/* Lightbulb Icon */
.tip-box::after {
  position: absolute;
  top: 20px;
  right: 22px;
  font-size: 1.4rem;
  color: #f39c12;
  opacity: 0.85;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.tip-box:hover::after {
  transform: scale(1.1);
  opacity: 1;
}

.styled-link {
  display: inline-block;
  color: #f39c12;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid rgba(243, 156, 18, 0.5);
  transition: all 0.3s ease-in-out;
}

.styled-link:hover {
  color: #d35400;
  border-bottom: 2px solid #d35400;
}
@media (max-width: 768px) {
  .styled-link {
    font-size: 1rem; /* Slightly larger font for readability */
    border-bottom: 2px solid rgba(243, 156, 18, 0.8); /* More visible underlining */
  }

  .styled-link:hover {
    color: #d35400;
    border-bottom: 2px solid #d35400;
  }
}

.styled-link2 {
  display: inline-block;
  color: #4a6c9f;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid #2c456b;
  transition: all 0.3s ease-in-out;
}

.styled-link2:hover {
  color: #21395c;
  border-bottom: 2px solid #21395c;
}
@media (max-width: 768px) {
  .styled-link2 {
    font-size: 1.1rem; /* Slightly larger font for readability */
    border-bottom: 2px solid #21395c; /* More visible underlining */
  }

  .styled-link2:hover {
    color: #21395c;
    border-bottom: 2px solid #21395c;
  }
}

@media (max-width: 480px) {
  .styled-link {
    font-size: 1.05rem; /* Make it slightly larger for small screens */
    border-bottom: 1.5px solid rgba(243, 156, 18, 0.9);
    padding-bottom: 2px; /* Increases clickability */
  }
}




    @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-display: swap; /* Ensures text is visible immediately */
    src: url('lato.woff2') format('woff2');
}





#linkunderline_small {
  text-decoration: none;
  color: #6694ef;
  font-weight: 400;
  font-size: 18px;
  position: relative;
  transition: color 0.3s ease;
}

#linkunderline_small:hover {
  color: #4a78d4; /* Slightly darker shade on hover */
}

#linkunderline_small::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background-color: #6694ef;
  left: 0;
  bottom: -5px; /* Distance between text and the underline */
  transition: width 0.3s ease;
}

#linkunderline_small:hover::after {
  width: 100%; /* Underline width expands on hover */
}

/* START KORTKATEGORIER */
/* Container Styles */
#categories-container {
  padding: 40px;
  max-width: 1050px;
}

/* Main Title Styling */
#categories-title {
  font-size: 38px;
  font-weight: 700;
  color: #2c456b; /* Primary color */
  margin-bottom: 30px;
  text-align: center; /* Center align title */
  line-height: 1.3;
}

/* Card Section Styling */
.card-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

/* Cards with 2 and 3 columns depending on screen size */
.card-row.two-columns {
  justify-content: space-between;
}

.card-row.three-columns {
  justify-content: space-between;
}

/* Card Item Styling */
.card-item {
  background-color: #fff;
  border-radius: 12px; /* Slightly more rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 25px;
  width: calc(33.33% - 30px); /* 3 cards per row with padding */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center; /* Center text content */
  overflow: hidden;
}

.card-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Card Title and Icon Styling */
.category-title {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  color: #2c456b; /* Primary color */
  margin-bottom: 20px;
}

.category-title img {
  margin-right: 12px;
  width: 40px;
  height: 40px;
}

/* Card Text and Description Styling */
.card-text {
  margin-top: 15px;
}

.description-text {
  color: #555;
  font-size: 16px;
  line-height: 1.8;
  padding: 0 15px; /* Padding for better spacing */
  margin-bottom: 20px;
}

/* Button or Action Link Styling */
.card-footer a {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: #c98c00; /* Third color for button */
  text-decoration: none;
  padding: 10px 20px;
  margin-top: 10px;
  border-radius: 30px;
  border: 2px solid #c98c00; /* Matching border to button color */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.card-footer a:hover {
  background-color: #2c456b; /* Primary color for hover */
  color: #fff;
}

/* Responsive Styles for Tablet and Small Screens */

/* Medium Devices (Tablets) */
@media (max-width: 1024px) {
  .card-item {
      width: calc(50% - 30px); /* 2 cards per row */
  }
}

/* Small Devices (Phones) */
@media (max-width: 768px) {
  .card-item {
      width: 100%; /* 1 card per row */
  }

  #categories-title {
      font-size: 32px; /* Title resize on smaller screens */
  }

  .category-title {
      font-size: 22px; /* Slightly smaller category titles */
  }
}

/* Extra Small Devices (Mobile Phones) */
@media (max-width: 480px) {
  #categories-title {
      font-size: 28px;
  }

  .category-title {
      font-size: 20px;
  }

  .description-text {
      font-size: 14px; /* Smaller description text */
  }
}

/* SLUT KORTKATEGORIER */

  /* Styling for the Choose Credit Card Section */
#chooseCreditCardSection {
  background-color: #f7f7f7;
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 40px; /* Added margin at the bottom for spacing */
  margin-top: -90px;
}

#chooseCreditCardHeader {
  margin-bottom: 40px;
}

#chooseCreditCardTitle {
  font-size: 2rem;
  margin-bottom: 15px;
  color: #2c456b;
}

#chooseCreditCardIntro {
  font-size: 1.1rem;
  color: #555;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Styling for each step block */
.chooseCardStep {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  background-color: #ffffff00;
  padding: 20px;
  border-radius: 8px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.chooseCardImage {
  width: 100%;
  max-width: 300px;
  margin-bottom: 20px;
  border-radius: 8px;
  height: auto;
}

.chooseCardStep h3 {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 10px;
}

.chooseCardStep p {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  max-width: 700px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .chooseCardStep {
      flex-direction: column;
  }

  .chooseCardImage {
      max-width: 60%;
  }
}






@media screen and (min-width: 600px) {


  .apply-now-buttom {
   display: block;
   text-align: center;
   margin: 20px auto;
   padding: 10px 20px;
   background-color: #43b775;
   color: #f7f7f7;
   border: 1px solid #43b775;
   border-radius: 5px;
   text-decoration: none;
   cursor: pointer;
   font-size: 12px;
   margin-left: -5px;
   cursor: pointer;
 
 
 }
 }
 
 
 
 @media screen and (max-width: 600px) {
 
 
   .apply-now-buttom {
     position: fixed;
     bottom: 10px;
     left: 10px;
     right: 10px;
     width: calc(100% - 20px); /* Ensures it fits within 10px margins */
     padding: 15px;
     font-size: 16px;
     text-align: center;
     background-color: #43b775; /* Adjust color as needed */
     color: white;
     border: none;
     border-radius: 8px;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
     cursor: pointer;
     transition: background-color 0.3s ease;
 }
 
 
  
  }

  .apply-now-buttom:hover {
    display: block;
    text-align: center;
    background-color: #379660;
    color: #f7f7f7;
    border: 1px solid #379660;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
  
  
  }


/* Ensure the container takes up the full width and stacks items in a column */
/* Ensure the container takes up the full width and stacks items in a column */
/* Styling for the container that holds the cards */
.creditcardlist {
  display: flex;
  flex-direction: column;  /* Aligns items in a single column */
  gap: 20px;               /* Adds space between cards */
  padding: 20px;           /* Adds padding around the container */
  width: 100%;              /* Ensure the container takes the full width */
  margin: 0 auto;          /* Centers the element horizontally */
  margin-bottom: 20px;     /* Add margin to the bottom */
  align-items: center;     /* Horizontally center cards within the container */
  
}

@media (min-width: 610px) { /* Adjust the max-width value as needed */
  .creditcardlist {
    display: flex;
    flex-direction: column;  /* Aligns items in a single column */
    gap: 20px;               /* Adds space between cards */
    padding: 20px;           /* Adds padding around the container */
    width: 80%;              /* Ensure the container takes the full width */
    margin: 0 auto;          /* Centers the element horizontally */
    margin-bottom: 20px;     /* Add margin to the bottom */
    align-items: center;     /* Horizontally center cards within the container */
  }
}



/* Styling for individual card */
.card {
  display: flex;
  flex-direction: row; /* Aligns items in a row (image + text) */
  width: 100%; /* Makes each card take up full width of container */
  max-width: 1200px; /* Limit the width of each card */
  height: auto; /* Controls the height of the card */
  border: 1px solid #ccc; /* Optional: Add border to cards */
  border-radius: 8px; /* Optional: Add rounded corners */
  padding: 15px; /* Padding inside the card */
  box-sizing: border-box;
  background-color: #fff; /* Card background color */
  overflow: hidden; /* Ensures content doesn't overflow the card */
  position: relative; /* For positioning rating at top-right corner */
}

/* Card image */
.card img {
  width: 80%; /* Makes the card image responsive */
  object-fit: cover; /* Ensures the image covers the space */
  border-radius: 8px; /* Optional: Rounded corners for image */
}

/* Card info container */
.card-info2 {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  justify-content: space-between; /* Spread content within the card */
  padding-left: 15px; /* Space between image and text */
  background-color: blue;
}

/* Card name styling */
.card-info h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Card description and details */
.card-info p {
  margin: 5px 0;
}

/* Perks section */
.card-info .perks-container {
  margin-top: 10px;
}

/* Styling for individual perk */
.card-info .perks-container .perks-inner {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 1rem;
  color: #333;
}

.card-info .perks-container .perks-inner img {
  width: 20px;
  height: auto;
  margin-right: 8px;
}

/* Styling for the Apply Now button */
.card-info .apply-now-btn {
  padding: 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  margin-top: 15px;
}

.card-info .apply-now-btn:hover {
  background-color: #0056b3;
}

/* Rating styling - positioned at top-right */
.card-info .rating {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  color: #FFD700; /* Gold color for rating */
}

/* Optional: Add styles for the rating stars if you want to adjust them */
#symbolerrating_info {
  width: 20px;
  height: auto;
}

/* Compare button styling */
.compare-btn_list {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px 10px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.compare-btn_list:hover {
  background-color: #0056b3;
}


 /* Wrapper to position filter button */
.filter-wrapper {
  display: flex;
  justify-content: flex-end; /* Aligns button to the right */
  align-items: center;
  flex-wrap: wrap;
  margin: 5px 15px;
}

/* Square, subtle filter button */
.filter-button {
  background-color: #f5f5f5;
  color: #444;
  width: 36px;  /* Square size */
  height: 36px; /* Square size */
  border: 1px solid #ccc;
  border-radius: 4px; /* Slight rounding */
  cursor: pointer;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  padding: 0; /* Remove extra padding */
  margin-left: auto; /* Pushes button to the right */
  margin-right: 10px; /* Adds margin to the right */
}




.show-cards-filter {
  background: #ffffff;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ced4da;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 250px;
  text-align: center;
  font-size: 16px;
  color: #495057;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  appearance: none; /* Removes default dropdown styling */
}



/* Add hover and focus effects for better UX */
.show-cards-filter:hover {
  background: #f1f3f5;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.show-cards-filter:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
}

/* Add a custom dropdown arrow */
.show-cards-filter {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23495057'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 32px; /* Space for the custom arrow */
}


/* Hover and focus effects */
.filter-button:hover,
.filter-button:focus {
  background-color: #e9e9e9;
  border-color: #aaa;
}

/* Active state (when clicked) */
.filter-button:active {
  background-color: #ddd;
}

/* Style for the filter container */
.filter-container {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 250px; 
  margin: 8px auto;
  text-align: center;
}

/* Style for the filter dropdowns */
.filter-container select {
  width: 100%;
  padding: 10px 12px; /* Increased padding for better spacing */
  margin: 8px 0; /* Slightly larger margin to separate elements */
  border: 1px solid #ddd; /* Softer border color for a cleaner look */
  border-radius: 8px; /* Rounded corners for a more modern look */
  font-size: 15px; /* Slightly larger text for better readability */
  color: #333; /* Dark text color for better contrast */
  background-color: #f7f7f7; /* Light background for the dropdown */
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease; /* Smooth transition effects */
}

/* Hover and focus state */
.filter-container select:hover,
.filter-container select:focus {
  border-color: #e9be7d; /* Highlight border on hover or focus */
  background-color: #fff; /* Slightly brighter background when focused */
  outline: none; /* Remove the default outline for a cleaner look */
}

/* Optional: Add a subtle shadow to make the dropdowns pop */
.filter-container select:focus {
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.4); /* Light blue shadow on focus */
}

/* Focus effect for dropdowns */
.filter-container select:focus {
  border-color: #888;
  outline: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  .filter-wrapper {
    justify-content: flex-end; /* Keep it right-aligned */
    margin: 5px;
  }

  .filter-button {
    width: 34px;
    height: 34px;
    font-size: 13px;
    margin-right: 8px; /* Adjusted margin on smaller screens */
  }

  .filter-container {
    max-width: 100%;
    width: 90%;
  }
}

@media (max-width: 480px) {
  .filter-wrapper {
    justify-content: flex-end; /* Ensures it's still on the right */
  }

  .filter-button {
    width: 32px;
    height: 32px;
    font-size: 12px;
    margin-right: 5px; /* Adjusted margin on extra small screens */
  }

  .filter-container {
    width: 100%;
    padding: 10px;
  }
}


/* General section styling */
#bestBenefitsSection {
  background-color: #f9f9f900;
  padding: 40px 20px;
}

/* Title and description */
#KreditkortBastFormaner {
  font-size: 24px;
  color: #2c456b;
  font-weight: bold;
}

#bestBenefitsList {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  flex-wrap: wrap;
}



/* Credit card styling */
.credit-card {
  background-color: #f7f7f7d5;
  padding: 20px;
  width: 30%;
  box-sizing: border-box;
  margin: 10px 0;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s ease;
}

.credit-card:hover {
  transform: scale(1.05);
}

.credit-card img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.credit-card h3 {
  color: #2c456b;
  font-size: 20px;
  margin: 10px 0;
}

.credit-card p {
  color: #555;
  font-size: 14px;
}

.credit-card a {
  color: #c98c00;
  text-decoration: none;
  font-size: 14px;
}

.credit-card a:hover {
  color:#a77502;
}

/* Responsive Styles */

/* For medium screens (tablets) */
@media (max-width: 768px) {
  #KreditkortBastFormaner {
      font-size: 20px;
  }

  .credit-card {
      width: 45%; /* Adjust for tablet-sized screens */
  }

  #bestBenefitsList {
      justify-content: center; /* Center cards on smaller screens */
  }

  .credit-card h3 {
      font-size: 18px;
  }

  .credit-card p {
      font-size: 13px;
  }
}

/* For small screens (phones) */
@media (max-width: 480px) {
  #KreditkortBastFormaner {
      font-size: 18px; /* Smaller font size for small screens */
  }

  .credit-card {
      width: 90%; /* Stack the cards vertically on mobile */
      margin: 10px auto; /* Center the cards */
  }

  .credit-card h3 {
      font-size: 16px;
  }

  .credit-card p {
      font-size: 12px;
  }

  .credit-card a {
      font-size: 12px;
  }
}



 

  #litenexempeltext
  {
    font-family: lato, sans-serif;
    font-size: 12px;
    color: #666;
  }

  footer a img {
    margin: 0 10px; /* Adjust spacing */
    transition: transform 0.2s; /* Add a hover effect */
}

footer a img:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}


/* Card item style */
.top10-card {
  display:inline;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  padding: 10px;
  border-radius: 8px; /* Rounded corners */
  background-color: #f7f7f700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


#top10ListContainer {
  list-style-type: none; /* Remove default list styling */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction:column; /* Stack the cards vertically */
  gap: 10px; /* Space between each card */
}


/* Card item style */
.top10-card {
  display:block;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  padding: 10px;
  border-radius: 8px; /* Rounded corners */
  background-color: #f7f7f731;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

}
.compare-btn2 {
  background-color: #5dbea3; /* Primary button color */
  color: white; /* Text color */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  padding: 0px 7px; /* Padding for size */
  font-size: 12px; /* Font size */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
  margin-top: 2px; /* Space above the button */
  position: relative;
}

.compare-btn2:hover {
  background-color: #4aa68b; /* Darker green for hover effect */
  transform: scale(1.05); /* Slight zoom effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow for depth */
  filter: brightness(1.1); /* Slight brightness increase */
}


/* Rank number styling */
.rank-number {
  font-size: 15px; /* Large number */
  font-weight: bold;
  color: white; /* White color for the number */
  margin-right: 0px; /* Space between the number and the image */
  width: 25px; /* Fixed width for the number container */
  height: 25px; /* Make the circle a perfect circle */
  border-radius: 50%; /* This makes it a circle */
  background-color: #4681f4; /* Blue background color for the circle */
  display: flex; /* Use flex to center the number */
  justify-content: center; /* Horizontally center the number */
  align-items: center; /* Vertically center the number */
  text-align: center; /* Center the text inside the circle */
}

/* Image styling */
.card-image {
  width: 200px; /* Narrow image size */
  object-fit: cover; /* Ensures the image doesn't stretch */
  margin-right: 0px; /* Space between image and text */
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  cursor: pointer; /* Changes pointer to hand */

}

.card-image:hover {
  transform: scale(1.05) rotate(1deg); /* Slightly more intense zoom and rotation */
  filter: brightness(1.03); /* Slightly increases the brightness for a glowing effect */
}

/* Card details (name and rating) */
.card-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; /* Center the text horizontally */
}

/* Card name styling */
.card-name {
  font-size: 20px;
  font-weight: 200;
  margin: 0;
  color:#2c456b; /* Dark color for better readability */
  text-align: center; /* Center the card name */
}

/* Card rating (optional for future expansion) */
.card-rating {
  font-size: 14px;
  color: #ff9900; /* Gold/yellow color for the rating stars */
  margin-top: 5px;
}

/* Optional small info under the name (if needed) */
.card-info {
  font-size: 12px;
  color: #2c456b; /* Light gray color */
  margin-top: 5px;
}


@media screen and (min-width: 600px) and (max-width: 800px) {
  .stars-row {
    display: none;
  } 
  /* Basic Styles */

}


@media screen and (min-width: 800px) and (max-width: 1024px) {
  .stars-row {
    display: none;
  } 
  /* Basic Styles */

}

@media (max-width: 600px) {
  .stars-row  {
  /* Basic Styles */
  display: flex;
  gap: 2px;
  margin-left: 25vw;
  margin-top: 5px;
  align-items: center;
}
}

@media (min-width: 1024px) {
  .stars-row {
    display: none;
  } 
  /* Basic Styles */

}


.stars-row img {
  width: 30px;
  height: 30px;
  z-index: 9;
}


  .icon {
    position: absolute;
    top: -13px; /* Aligns the icon to the top of the container */
    left: -13px; /* Aligns the icon to the left of the container */
    width: 35px; /* Set desired size for the icon */
    height: 35px;
}


  #litenexempeltext_title
  {
    font-family: lato, sans-serif;
    font-size: 14px;
    text-align: center;
    margin-top: 3.5vw;
  }

  @media (min-width: 1000px) {
    #litenexempeltext_mobil {
       display: none;
    }
  }

  @media (max-width: 1000px) {
    #litenexempeltext {
       display: none;
    }
  }

  @media (max-width: 1000px) {
    #litenexempeltext_mobil {
      font-family: lato, sans-serif;
      font-size: 12px;
      text-align: center;
      color: #666;
    }
  }


/* Styles for devices with a width of up to 600px */
@media (max-width: 600px) {
  body {
      font-size: 14px;
  }

.trustpilot-widget{
  display: none;
}

  .container {
      padding: 10px;
  }
  /* Other mobile-specific styles */
  div#textunderbild {
    margin-top: -20px;
    background-image: linear-gradient(to bottom right, #f7f7f7,#c5d4ed);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    color:#084760;
    border: 1px solid #ccc;
    border-radius: 20px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
  padding-top: 15px;

    
  }
  #symboler_cat_small_trav {
    width: 15%;
    position: absolute;
    opacity: 0.9;
    margin-left: 30.5vh;
    margin-top: -3vh;
  }

  div#companycard {
    position: absolute;
    font-size: 16px;
    font-weight: 100;
    opacity: 0.7;

   
    
  }


 
    div#recocont_trav {
    

       margin-left:-10px;
       margin-top: 50px;
       padding:10px;
       width: max-content;
      }

#Kortkategorier

{
  color:#2c456b;
  font-family: lato, sans-serif;
  font-size: 43px;
  text-align: left;
  margin-top: -30px;
 
  }


  


  div#litentext_blue_trav{
    position: relative;
    font-size: 20px;
    font-family: lato, sans-serif;
    color: rgb(64, 85, 119);
    text-decoration: none;
    font-weight: 100;
    margin-left: -10px;
    margin-top:200px;
    


  }

  #symboler_cat_small {
    width: 10%;
    position: absolute;
    opacity: 0.9;
    margin-left: 32vh;
    margin-top: -2.5vh;
  }

  div#recommended {
    width: 100%;
    height: 100%;
     color: rgb(70, 69, 69);
     margin-top:-100px;
     padding:20px;
    background-color:#f7f7f700;
     
    }

 div#recocont {
    

       height: fit-content;
       margin-top: -20px;
       
      }



  #litentextreco{
display: none;
  }

  #rubrikpopulartext
{
  text-align: center;
  color: #b17700;
  font-family: lato, sans-serif;
  font-weight: 200;
  margin-top: 100px;
  
  
 
}


  div#pointcollector_fullscreen{
    display:none;
    
}

div#shopparen_fullscreen{
  display: none;
  
}

div#delbetalaren_fullscreen{
  display: none;
  
}


div#spararen_fullscreen{
  display: none;
  
}




.tablinksreco {
  position: relative;
  width: 100%;
  height: auto; /* Allow height to adjust based on content */
  border-radius: 20px;
  background-color: rgba(240, 245, 250, 0.902);
  margin-bottom: 20px;
  cursor: pointer; /* Indicate that the div is clickable */
  transition: height 0.5s ease; /* Smooth transition for height */
}

.tabcontentreco {
  max-height: 0; /* Initially collapsed */
  overflow: hidden; /* Hide overflowing content */
  transition: max-height 0.5s ease; /* Smooth expand/collapse */
  background-color: rgba(240, 245, 250, 0.902); /* Same background for consistency */
  padding: 0 20px; /* Add some padding for better readability */
  border-radius: 20px;
}



.tablinksreco.active .tabcontentreco {
  max-height: 1000px; /* Set to desired expanded height */
  
}

/* Optional Flexbox for layout */
#recinfo2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 1000px;
  border-radius: 20px;
}


 

  

  div#Traveller {
    position: relative; /* Set relative positioning to enable absolutely positioned children */
    width: 100%;
    height: 500px;
    border-radius: 20px;
    margin-left: 0;
    overflow: block; /* Ensure that any overflowing content is hidden */


}

div#traveller {
  position: relative; /* Set relative positioning to enable absolutely positioned children */
  width: 100%;
  height: 25%;
  margin-left: 0px;
  border-radius: 20px;
  overflow: hidden; /* Ensure that any overflowing content is hidden */
  background-color: rgba(240, 245, 250, 0.902); /* Fallback background color */
  margin-bottom: 20px;

}

  /* Background overlay */
  div#traveller::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%; /* Cover only the top half */
    background-image: 
        linear-gradient(to bottom, rgba(176, 196, 251, 0) 50%, rgb(0, 128, 255) 100%), /* Gradient fading from transparent to background color */
        url("Skärmavbild\ 2024-09-01\ kl.\ 18.51.12.webp"); /* Background image */
    background-size: cover; /* Ensure the image covers the container without stretching */
    background-repeat: no-repeat; /* Prevent repeating */
    background-position: center top; /* Align the background at the top */
    -webkit-filter: grayscale(100%); /* Apply greyscale filter to the background image */
    filter: grayscale(50%); /* Apply greyscale filter to the background image */
    opacity: 0.5; /* Apply opacity to the background image */
    z-index: 1; /* Place the background behind the content */
    border-radius: 20px 20px 0 0; /* Match the top border-radius of the main container */
}







div#Pointcollector {
  position: relative; /* Set relative positioning to enable absolutely positioned children */
  width: 100%;
  height: min-content;
  border-radius: 20px;
  margin-left: 0;
  overflow: block; /* Ensure that any overflowing content is hidden */
  padding-bottom: 15px;

  


}

div#Shopparen {
  position: relative; /* Set relative positioning to enable absolutely positioned children */
  width: 100%;
  height: auto;
  border-radius: 20px;
  margin-left: 0;
  overflow: block; /* Ensure that any overflowing content is hidden */



}

div#Delbetalaren {
  position: relative; /* Set relative positioning to enable absolutely positioned children */
  width: 100%;
  height: max-content;
  border-radius: 20px;
  margin-left: 0;
  overflow: block; /* Ensure that any overflowing content is hidden */


}

div#pointcollector {
position: relative; /* Set relative positioning to enable absolutely positioned children */
width: 100%;
height: min-content;
margin-left: 0px;
border-radius: 20px;
overflow:hidden; /* Ensure that any overflowing content is hidden */
background-color: rgba(240, 245, 250, 0.902); /* Fallback background color */
margin-top: 5px;
padding-bottom: 35px;


}

div#shopparen {
  position: relative; /* Set relative positioning to enable absolutely positioned children */
  width: 100%;
  height: min-content;
  margin-left: 0px;
  border-radius: 20px;
  overflow:hidden; /* Ensure that any overflowing content is hidden */
  background-color: rgba(240, 245, 250, 0.902); /* Fallback background color */
  margin-top: 5px;
  padding-bottom: 35px;
  
  
  }
 



  #logobild2
{
  display: none;
  
}
  
  div#textunderrubrik {
    line-height: 40px;
 
    
   }



}


/* Specific styles for the logo link */
#logo-link {
    display: flex;
    align-items: center;
    margin-left: 0;
}

/* Image within the logo link */
#logohem {
    width: auto;
    height: 40px; /* Adjust height as needed */
    padding: 0 10px; /* Adjust padding as needed */

}

/* Image within the logo link */
#logohem_white {
  width: auto;
  height: 40px; /* Adjust height as needed */
  filter: brightness(0) invert(1); /* Makes the logo white */
}


/* Image within the logo link */
#navbaricon {
  width: auto;
  height: 20px; /* Adjust height as needed */
  padding: 0 10px; /* Adjust padding as needed */
  margin-left: -30px;
  margin-top: 0px;
  position: absolute;
}

#navbaricon:hover {
 color:blue;
}


/* Modern hover effect for navbar links (excluding logo link) */
#navbar a:hover:not(#logo-link) {
  color: #4681f4; /* Elegant deep blue */
}






#trustpilot {
  /* Basic Styles */
   margin-left: -18vw;
}
@media (min-width: 601px) {
#trustpilotimg {
  /* Basic Styles */
display: none;
}
}
@media (max-width: 600px) {
#trustpilotimg {
  /* Basic Styles */
width: 40%;
position: relative;
border: solid 1px green;  
border-radius: 2px;
margin-left: 27vw;
margin-top: 10px;
}


}

/* Mobile Styles */
@media (max-width: 600px) {
  #trustpilot {
    margin-left: 0;
  }



    /* Style the navbar */
#navbar {
  background-color: #2c456b;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    z-index:2; /*Add this*/
    overflow: hidden;
    display: flex;
    align-items: center; /* Vertically center items */
    font-size: 19px;
    z-index: 9999;
  


  }
}

/* Tablet Styles */
@media (min-width: 601px) and (max-width: 1024px) {
  #trustpilot {
      
  }
}

/* Desktop Styles */
@media (min-width: 1025px) {
  #trustpilot {
     
  }
}


@media (min-width: 600px) {
  /* Style the navbar */
#navbar {
  background-color: #f7f7f7;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
    z-index:2; /*Add this*/
    overflow: hidden;
    display: flex;
    align-items: center; /* Vertically center items */
    font-size: 19px;
    z-index: 9999;
    text-align: left;
  
  }


  }
  
  /* Navbar links */
  #navbar a {
    float: left;
    display: block;
    color:#1a2d48;
    text-align: center;
    padding: 24px;
    text-decoration: none;
    overflow: hidden;
  }




  form {
    margin-top: 12px;
    margin-left: 75%;
    background-color: #f7f7f7;
    width: 300px;
    height: 44px;
    border-radius: 3px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    border-style: solid;
    border-color: #d3d3d3;
    background-image: url('searchicon.webp');
  background-repeat: no-repeat;
  overflow: scroll;

  }

  #form:hover {
  transform: scale(0.99); 
}



  ::placeholder {
    color:#1a2d48;
    opacity: 0.6; 
  }
/* --- Sökfält UTAN ikon --- */
.article-search-wrapper input#articleSearch {
  width: 100%;
  padding: 0.6rem 1rem; /* vanlig padding utan ikon */
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  outline: none;
  background-color: #fff;
  transition: border 0.2s, box-shadow 0.2s;
  background-image: none; /* ingen ikon */
}

.article-search-wrapper input#articleSearch:focus {
  border-color: #888;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
}


/* --- Sökfält MED ikon --- */
#myInput {
  all: unset;
  font: 16px ca, arial;
  color: #2d2c2f;
  height: 100%;
  width: 100%;
  padding: 6px 10px;
  padding-left: 35px; /* Adjust padding to make room for the icon */
  border-radius: 20px;
  background-image: url('search-icon.svg');
  background-repeat: no-repeat;
  background-size: 30px 30px; /* Size of the search icon */
  background-position: 10px center; /* Position the icon inside the input */
  background-position-x: 24vw;
  background-color: #2c456b;
}

#myInput::placeholder {
  color: #1a2d48;
  opacity: 0.6;
}

  button {
    all: unset;
    cursor: pointer;
    width: 44px;
    height: 44px;
    
    
  }



  /* The overlay effect - lays on top of the container and over the image */
.overlay {
    position: absolute;
    bottom: 50%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.186); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
    
  }
  
  /* When you mouse over the container, fade in the overlay title */
  .mySlides:hover .overlay {
    opacity: 1;
  }

.overlay_reco:hover .overlay {
    opacity: 1;
    
    
  }

  #litentextapply{
    position: relative;
    font-size: 12px;
    font-family: lato, sans-serif;
    color: rgb(84, 96, 115);
    text-decoration: none;
    text-align: center;


  }

  

  .amex-link {
    color: #2c456b;
    text-decoration: none; /* Removes underline */
  }
  .amex-link:hover {
    text-decoration: underline; /* Adds underline on hover */
  }
  
.overlay_reco {
  margin-top: 1vw;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
}


.overlay_reco:hover {
transform: scale(1.05) rotate(1deg); /* Slightly more intense zoom and rotation */
filter: brightness(1.03); /* Slightly increases the brightness for a glowing effect */
border-radius: 12px;
}



.subheading {
  font-size: 24px; /* Slightly smaller for better readability */
  font-weight: 600;
  color: #3d578b;
  text-align: left; /* Centers for a cleaner look */
  max-width: 90%; /* Prevents unnecessary line breaks */
  font-family: Arial, sans-serif; /* Uses a fast-loading system font */
}




.buttontravel {
  background: #43b775; /* Professional solid green */
  border: none;
  color: #ffffff;
  padding: 18px 55px;
  margin-top: 5%;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  font-weight: 600; /* Slightly increased font weight */
  border-radius: 30px; /* More pronounced rounded edges for modern look */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 10px 35px rgba(67, 183, 117, 0.1), 0px 6px 12px rgba(67, 183, 117, 0.2), 0px 2px 4px rgba(67, 183, 117, 0.3); /* Softer, more natural multi-layer shadows */
  animation: pulseTravel 2s infinite alternate; /* Gentle attention grabber */
  outline: none; /* Remove outline when clicked */
}

/* Button Hover */
.buttontravel:hover {
  background: #369a60; /* Slightly darker green on hover */
  transform: translateY(-1px); /* Slight lift for depth */
  box-shadow: 0px 15px 40px rgba(67, 183, 117, 0.25), 0px 6px 12px rgba(67, 183, 117, 0.3); /* Softer, more organic hover shadow */
}

/* Active Click Effect */
.buttontravel:active {
  transform: scale(0.98); /* Shrinks slightly for click feedback */
  box-shadow: 0px 6px 15px rgba(67, 183, 117, 0.2), 0px 2px 4px rgba(67, 183, 117, 0.3); /* Softened shadow when active */
}

/* Soft Glow Effect */
.buttontravel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350%;
  height: 350%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 10%, transparent 60%); /* Subtle glow */
  transition: all 0.4s ease-in-out;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

.buttontravel:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Pulsing Animation */
@keyframes pulseTravel {
  0% {
      box-shadow: 0px 10px 25px rgba(67, 183, 117, 0.15), 0px 4px 8px rgba(67, 183, 117, 0.2);
  }
  100% {
      box-shadow: 0px 15px 40px rgba(67, 183, 117, 0.25), 0px 6px 12px rgba(67, 183, 117, 0.3);
  }
}












  
  
  svg {
    color: #f7f7f7;
    fill: currentColor;
    width: 24px;
    height: 24px;
    padding: 10px;
  }

  /* Page content */
  .content {
    padding: 16px;

  }
  
  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
    padding-top: 60px;
  }

  #menuname
  {
   color:#1b3153;
   font-size: 18px;
   font-family: lato, sans-serif;
   background-color: #f7f7f7;
   font-weight: 400;
   border-radius: 4px;
   margin-top:5px;
  
 
 
  
 
 }
  

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
    float: right;
    padding: 6px;
    border: none;
    margin-top: 8px;
    margin-right: 16px;
    font-size: 17px;
  }
  
  /* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
  @media screen and (max-width: 600px) {
    .topnav a, .topnav input[type=text] {
      float: none;
      display: block;
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 14px;
    }
    .topnav input[type=text] {
      border: 1px solid #ccc;
    }
  }
  #maindiv {
    background-color: #f7f7f700;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    min-height: 100vh;  /* Makes sure the div takes at least the full height of the viewport */
    padding: 50px;
    position: relative;  /* Position relative instead of absolute for stability */
    font-family: lato, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
    align-items: center;  /* Center content horizontally */
  }
  
  #höger {
    background-color: #f7f7f700;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-top: 4%;
    padding: 50px;
    font-family: lato, sans-serif;

   
    
  }


  #slideshowtext{
    float:left;
    margin-top: -0%;
}


#slideshowtextliten{
float: left;
margin-top: -2%;
}




  #litenhöger {

    width: 100%;
    height: 100%;
    position: relative;
    font-size: 25px;
    font-family: lato, sans-serif;
    left:40px;
    float: left;
    color: #2c456bda;
   

   
  }
  @media screen and (max-width: 600px) {


    #litenhöger {
display: none;
     
  
     
    }
  }
/* För över 24 tums display */
  @media screen and (min-width: 1920px) {

   
  
  

  #rubrik {
    font-family: lato, sans-serif;
    font-size: 94px;
    background: -webkit-linear-gradient(#2e4e8d, #2c456b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #2e4e8d; /* Fallback color to ensure text is visible while the font is loading */
    font-weight: bold; /* Optional: Add font-weight for better clarity */
    margin-top: 5vw;
    margin-bottom: 2vw;
  }

  .subheading {
    font-size: 74px; /* Slightly smaller for better readability */
    font-weight: 600;
    color: #3d578b;
    text-align: left; /* Centers for a cleaner look */
    max-width: 90%; /* Prevents unnecessary line breaks */
    font-family: Arial, sans-serif; /* Uses a fast-loading system font */
    margin-bottom: 2vw;

  }

  #symboler_main {
    width: 10%;
    height: 10%;
    top: 0px;
    position: relative;
    color: #1b7a9f;
  
  
  }

  #textunderrubrik {
    margin-top: 5%;
    font-size: 50px;
    line-height: 120px; /* Increase spacing between lines */
}

#trustpilot {
  /* Basic Styles */
   margin-left: -32vw;
   margin-top: 3vw;
}


    
  }


  


  #textunderrubrik {
   margin-top: 5%;
   line-height: 60px;

   
  }

  #litentext_home {
    background-color: #2c456b;
    width: 90%;
    height: 22%;
    padding:10px;
    border-radius: 8px;
    position: relative;
    font-size: 18px;
    font-family: lato, sans-serif;
    box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
    left:40px;
    color:#FFFFEB;
    margin-left: -7%;
    text-align: center;
   display: none;


   
  }

  #litentext_top {
  
    color:#FFFFEB;
    position: relative;
   

   
  }

  #symbolernav {
    width: 1%;
    top: 18px;
    position: relative;

}

  #symboler {
    width: 10%;
    top: 18px;
    position: relative;
    color: #1b7a9f;

}


#symboler_main {
  width: 25px;
  height: auto;
  top: 0px;
  position: relative;
  color: #1b7a9f;


}

#symboler_cat {
  width: 7%;
  top: 18px;
  position: relative;
  color: #1b7a9f;

}



#symboler_small{
  width: 7%;
  top: 15px;
  position: relative;
  color: rgb(70, 69, 69);

}

#perks {
  background-color: #f7f7f7;
  margin-top: -4%;
  height: 80%;
  width: 83%;
  color: #212427;
}







.perk-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Adjust spacing between dots */
}

.perk-item {
  display: flex;
  align-items: center;
  flex: 0 0 48%; /* Two items per row with some margin */
  margin-bottom: 20px; /* Space below each row */
}

.perk-icon {
  width: 24px; /* Adjust size as needed */
  margin-right: 10px; /* Space between icon and text */
}

#litentext_white{
  position: relative;
  font-size: 16px;
  font-family: lato, sans-serif;
  color: #ffffeba5;
  text-decoration: none;


}


  #litentext{
    position: relative;
    font-size: 20px;
    font-family: lato, sans-serif;
    color: rgb(84, 96, 115);
    text-decoration: none;



  }


  #litentext_blue{
    position: relative;
    font-size: 20px;
    font-family: lato, sans-serif;
    color: rgb(64, 85, 119);
    text-decoration: none;
    font-weight: 100;
    margin-left: -10px;
    
    


  }

  #litentext_blue_trav{
    position: relative;
    font-size: 20px;
    font-family: lato, sans-serif;
    color: rgb(64, 85, 119);
    text-decoration: none;
    font-weight: 100;
    margin-left: -10px;
    margin-top: -20px;
    


  }


  #litentext_blue2{
    position: relative;
    font-size: 20px;
    font-family: lato, sans-serif;
    color: rgb(64, 85, 119);
    text-decoration: none;
    font-weight: 100;
    margin-left: 30px;
    margin-top:80px;
    


  }



  #litentextfooter{
    position: relative;
    font-size: 15px;
    font-family: lato, sans-serif;
    color: rgb(84, 96, 115);
    text-decoration: none;


  }

  #smalltextwhite{
    max-width: 800px;
    position: relative;
    font-size: 16px;
    font-family: lato, sans-serif;
    color:#ffffeb9d;
    text-decoration: none;
    margin-left: 15%;


  }

  #litentextreco{
    position: relative;
    font-size: 20px;
    font-family: lato, sans-serif;
    color: rgb(92, 90, 90);
    text-decoration: none;
    margin-left:5%;


  }

  #topdiv {
    background-color: #f7f7f700;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
    height: 100%;
    
  }

  #textunderbild {
    margin-top: -20px;
    background-image: linear-gradient(to bottom right, #f7f7f7,#c5d4ed);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 200px;
    color:#084760;
    border: 1px solid #ccc;
    border-radius: 20px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
  padding-top: 15px;

    
  }







  .button {
    background: #43b775; /* Fresh professional green */
    border: none;
    color: #ffffff;
    padding: 16px 50px; /* Slightly more balanced padding */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px; /* Slightly smaller for more refinement */
    font-weight: 600; /* Increased font weight for better visibility */
    border-radius: 30px; /* More pronounced rounded edges for modern look */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 10px 20px rgba(67, 183, 117, 0.25); /* Softer shadow */
    animation: pulse 2s infinite alternate; /* Subtle pulse effect */
    outline: none; /* Remove outline when clicked */
}

/* Button Hover */
.button:hover {
    background: #369a60; /* Slightly darker green on hover */
    transform: translateY(-1px); /* Slight lift on hover for depth */
    box-shadow: 0px 15px 35px rgba(67, 183, 117, 0.4); /* Stronger shadow on hover */
}

/* Active Click Effect */
.button:active {
    transform: scale(0.98); /* Shrinks slightly for click feedback */
    box-shadow: 0px 6px 18px rgba(67, 183, 117, 0.2); /* Softened shadow when active */
}

/* Soft Glow Effect */
.button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 350%;
    height: 350%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 10%, transparent 60%); /* Subtle glow */
    transition: all 0.4s ease-in-out;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

.button:hover::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Pulsing Animation */
@keyframes pulse {
    0% {
        box-shadow: 0px 10px 25px rgba(67, 183, 117, 0.3);
    }
    100% {
        box-shadow: 0px 15px 35px rgba(67, 183, 117, 0.5);
    }
}


  * {box-sizing:border-box}

  /* Slideshow container */
  .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    
    
  }
  
  /* Hide the images by default */
  .mySlides {
    display: none;
    
  }
  
  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    width: auto;
    margin-top: -90px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    text-decoration: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a black background color with a little bit see-through */
  .prev:hover, .next:hover {
    background-color: #2c456bb9;
  }
  
  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }
  
  
  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }
  
  .active, .dot:hover {
    background-color: #717171;
  }
  
 /* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 0.5s; /* Smooth transition duration */
  animation-timing-function: ease-in-out; /* Adds a smooth acceleration and deceleration */
  animation-iteration-count: 1; /* Play the animation once per slide */
  animation-fill-mode: both; /* Keeps the final state after the animation ends */
}

/* Keyframes for fade animation */
@keyframes fade {
  0% {
    opacity: 0;
    transform: scale(0.99); /* Slight zoom-in effect */
  }
  50% {
    opacity: 0.8; /* Gradual appearance */
    transform: scale(1.01); /* Slight overshoot */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* Reset to normal size */
  }
}



  #recommended {
  width: 100%;
  height: 100%;
   color: rgb(70, 69, 69);
   margin-top:-100px;
   
  }




  #Kortkategorier

  {
    background: -webkit-linear-gradient(#4d6cac, #2c456b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-family: lato, sans-serif;
    font-size: 43px;
    text-align: center;
    }


  #Kortkategorier2

  {
    color:#2c456b;
    font-family: lato, sans-serif;
    font-size: 47px;

   
    }

    #Kortkategorier3

  {
    background: -webkit-linear-gradient(#f7f7f7, #FFFFEB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-family: lato, sans-serif;
    font-size: 47px;

   
    }

 

    #traveller {
      position: relative; /* Set relative positioning to enable absolutely positioned children */
      width: 60%;
      height: 300px;
      border-radius: 20px;
      overflow: auto; /* Ensure that any overflowing content is hidden */
      background-color: rgba(240, 245, 250, 0.902); /* Fallback background color */
      margin-left: 60px;
      
  }
  
    /* Background overlay */
    #traveller::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 100%; /* Cover only the top half */
      background-image: 
      linear-gradient(to bottom, rgba(176, 196, 251, 0) 50%, rgb(0, 128, 255) 100%), /* Gradient fading from transparent to background color */
      url("Skärmavbild\ 2024-09-01\ kl.\ 18.51.12.webp"); /* Background image */
      background-size: cover; /* Ensure the image covers the container without stretching */
      background-repeat: no-repeat; /* Prevent repeating */
      background-position: center top; /* Align the background at the top */
      -webkit-filter: grayscale(100%); /* Apply greyscale filter to the background image */
      filter: grayscale(50%); /* Apply greyscale filter to the background image */
      opacity: 0.5; /* Apply opacity to the background image */
      z-index: 1; /* Place the background behind the content */
      border-radius: 20px 20px 0 0; /* Match the top border-radius of the main container */
  }


  #pointcollector_fullscreen{
    position: relative; /* Set relative positioning to enable absolutely positioned children */
    width: 30%;
    height: 300px;
    border-radius: 20px;
    overflow: auto; /* Ensure that any overflowing content is hidden */
    background-color: rgba(240, 245, 250, 0.902); /* Fallback background color */
    margin-left: 910px;
    margin-top: -320px;
    
}

/* Background overlay */
div#shopparen_fullscreen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%; /* Cover only the top half */
  background-image: 
      linear-gradient(to bottom, rgba(176, 196, 251, 0) 50%, rgb(0, 128, 255)  100%), /* Gradient fading from transparent to background color */
      url("apparel-1850804_1280.webp"); /* Background image */
  background-size: cover; /* Ensure the image covers the container without stretching */
  background-repeat: no-repeat; /* Prevent repeating */
  background-position: center top; /* Align the background at the top */
  -webkit-filter: grayscale(100%); /* Apply greyscale filter to the background image */
  filter: grayscale(50%); /* Apply greyscale filter to the background image */
  opacity: 0.3; /* Apply opacity to the background image */
  z-index: 1; /* Place the background behind the content */
  border-radius: 20px 20px 0 0; /* Match the top border-radius of the main container */
}

/* Background overlay */
div#delbetalaren_fullscreen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%; /* Cover only the top half */
  background-image: 
      linear-gradient(to bottom, rgba(176, 196, 251, 0) 50%, rgb(0, 128, 255)  100%), /* Gradient fading from transparent to background color */
      url("accounting-761599_1280.webp"); /* Background image */
  background-size: cover; /* Ensure the image covers the container without stretching */
  background-repeat: no-repeat; /* Prevent repeating */
  background-position: center top; /* Align the background at the top */
  -webkit-filter: grayscale(100%); /* Apply greyscale filter to the background image */
  filter: grayscale(50%); /* Apply greyscale filter to the background image */
  opacity: 0.3; /* Apply opacity to the background image */
  z-index: 1; /* Place the background behind the content */
  border-radius: 20px 20px 0 0; /* Match the top border-radius of the main container */
}

/* Background overlay */
div#spararen_fullscreen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%; /* Cover only the top half */
  background-image: 
      linear-gradient(to bottom, rgba(176, 196, 251, 0) 50%, rgb(0, 128, 255)  100%), /* Gradient fading from transparent to background color */
      url("moneybackground.webp"); /* Background image */
  background-size: cover; /* Ensure the image covers the container without stretching */
  background-repeat: no-repeat; /* Prevent repeating */
  background-position: center top; /* Align the background at the top */
  -webkit-filter: grayscale(100%); /* Apply greyscale filter to the background image */
  filter: grayscale(50%); /* Apply greyscale filter to the background image */
  opacity: 0.3; /* Apply opacity to the background image */
  z-index: 1; /* Place the background behind the content */
  border-radius: 20px 20px 0 0; /* Match the top border-radius of the main container */
}


/* Background overlay */
div#pointcollector_fullscreen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%; /* Cover only the top half */
  background-image: 
      linear-gradient(to bottom, rgba(176, 196, 251, 0) 50%, rgb(0, 128, 255)  100%), /* Gradient fading from transparent to background color */
      url("money-256315_1280.webp"); /* Background image */
  background-size: cover; /* Ensure the image covers the container without stretching */
  background-repeat: no-repeat; /* Prevent repeating */
  background-position: center top; /* Align the background at the top */
  -webkit-filter: grayscale(100%); /* Apply greyscale filter to the background image */
  filter: grayscale(50%); /* Apply greyscale filter to the background image */
  opacity: 0.3; /* Apply opacity to the background image */
  z-index: 1; /* Place the background behind the content */
  border-radius: 20px 20px 0 0; /* Match the top border-radius of the main container */
}



#shopparen_fullscreen{
  position: relative; /* Set relative positioning to enable absolutely positioned children */
  width: 29.7%;
  height: 300px;
  border-radius: 20px;
  overflow: auto; /* Ensure that any overflowing content is hidden */
  background-color: rgba(240, 245, 250, 0.902); /* Fallback background color */
  margin-left:60px;
  margin-top: 10px;
  
  
}

#delbetalaren_fullscreen{
  position: relative; /* Set relative positioning to enable absolutely positioned children */
  width: 29.7%;
  height: 300px;
  border-radius: 20px;
  overflow: auto; /* Ensure that any overflowing content is hidden */
  background-color: rgba(240, 245, 250, 0.902); /* Fallback background color */
  margin-left:485px;
  margin-top: -300px;
  
}

#spararen_fullscreen{
  position: relative; /* Set relative positioning to enable absolutely positioned children */
  width: 30%;
  height: 300px;
  border-radius: 20px;
  overflow: auto; /* Ensure that any overflowing content is hidden */
  background-color: rgba(240, 245, 250, 0.902); /* Fallback background color */
  margin-left:910px;
  margin-top: -300px;
  
}

    /* Styles for larger screens (e.g., mobile) */
@media (min-width: 610px) { /* Adjust the max-width value as needed */
 
  #pointcollector{
    display: none;
    
    
}

#symboler_cat_small {
  width: 10%;
  position: absolute;
  opacity: 0.9;
  margin-left: 41vh;
  margin-top: -6vh;
}


#symboler_cat_small_trav {
  width: 10%;
  position: absolute;
  opacity: 0.9;
  margin-left: 85vh;
  margin-top: -10vh;
}

#Kortkategorier2

{
  background: -webkit-linear-gradient(#4d6cac, #2c456b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  font-family: lato, sans-serif;
  font-size: 47px;
  margin-left: 450px;

 
  }

  #Kortkategorier3

  {
    background: -webkit-linear-gradient(#f7f7f7, #FFFFEB);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-family: lato, sans-serif;
    font-size: 47px;

margin-left: 0px;
   
    }
  }


  
  /* Content styling */
  #rubrikcategory {
      position: relative; /* Ensure the content is above the background */
      z-index: 2; /* Place content above the background */
      color: #3e434a; /* Set the desired text color */
      padding: 20px; /* Add padding for spacing */
      margin-top: 5px;
      margin-left: 5px;
      font-weight: 200;
      
  }

  
  #rubrikcategory2 {
    color: #3e434a; /* Set the desired text color */
    margin-top: 50px;
    margin-left: 30px;
    font-weight: 200;
}


  /* Styles for larger screens (e.g., mobile) */
@media (min-width: 1000px) { /* Adjust the max-width value as needed */
  #rubrikcategory {
      color: #3e434a; /* Set the desired text color */
      margin-top: 50px;
      margin-left: 50px;
  }

  #rubrikcategory2 {
    color: #3e434a; /* Set the desired text color */
    margin-top: 50px;
    margin-left: 30px;
    font-weight: 200;
}
  #Traveller {
    position: absolute; /* Set relative positioning to enable absolutely positioned children */
    width: 100%;
    height: max-content;
    border-radius: 20px;
    margin-left: 0;
    overflow: visible; /* Ensure that any overflowing content is hidden */


}
}


   /* Content styling */
   #rubrikcategory_pointcollector {
    position: relative; /* Ensure the content is above the background */
    z-index: 2; /* Place content above the background */
    color: #3e434a; /* Set the desired text color */
    padding: 20px; /* Add padding for spacing */
    margin-top: 50px;
    margin-left: 25px;

}











/* Media Query for Responsive Design */
@media (max-width: 767px) {
  
}

  
  

  #pointcollector {
    position: relative; /* Set relative positioning to enable absolutely positioned children */
    width: 25%;
    height: 20%;
    border-radius: 20px;
    margin-left: 950px;
    margin-top: -205px;
    overflow: hidden; /* Ensure that any overflowing content is hidden */
    background-color: rgb(240, 245, 250); /* Fallback background color */
}



  #informationaboutsite{
    width: 100%;
    height: 100%;
    background-color: #df7a3f;
    padding-bottom: 40px;
    font-weight: 100;
    }

 #one{
  width: 30%;
  height: 40%;
   background-color: #f7f7f700;
   margin-top: 5%;
   position: absolute;
   margin-left: 2.5%;
   border-radius: 10px;
   box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
   padding-right: 10px;
   padding-right: 10px;
   border: 3px solid #333;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   
  }


 #two{
  width: 30%;
  height: 40%;
  background-color: #f7f7f700;
   position: absolute;
   margin-left: 35%;
   border-radius: 10px;
   box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
   padding-right: 10px;
   border: 3px solid #333;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   

  }

  #one:hover{
    transform: scale(1.05) rotate(1deg);
    }

  #two:hover{
    transform: scale(1.05) rotate(0deg);
    }

    #three:hover{
      transform: scale(1.05) rotate(-1deg);
      }

 #three{
  width: 30%;
  height: 40%;
  background-color: #f7f7f700;
   margin-top: 5%;
   position: absolute;
   margin-left: 67.5%;
   border-radius: 10px;
   box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
   padding-right: 10px;
   border: 3px solid #333;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  #litentextthreee, #litentextone, #litentexttwo
  {
     color:#FFFFEB;
     font-size: 15px;
     margin-left: 30px;
    }

    #linkunderline {
      text-decoration: none;
      color: #c98c00; /* Initial color */
      font-weight: 600;
      position: relative;
      transition: color 0.3s ease;
    }
    
    #linkunderline:hover {
      color: #b27d00; /* Slightly darker shade on hover */
    }
    
    #linkunderline::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      background-color: #c98c00;
      left: 0;
      bottom: -5px; /* Distance between text and the underline */
      transition: width 0.3s ease;
    }
    
    #linkunderline:hover::after {
      width: 100%; /* Underline width expands on hover */
    }
    

  #site_symbol{
    width:15%;
    margin-left:25px;
    margin-top: 10px;
    }

    #litentextrubrik
    {
      margin-left: 7%;
      color:#FFFFEB;
      font-size: 30px;
      font-family: lato, sans-serif;
      }

      #litentextthree
      {
        margin-left: 7%;
        color: #777f86;
        font-size: 15px;
        font-family: lato, sans-serif;
        }
  




  #categorytitle
  {
    font-family: lato, sans-serif;
    color:  #FFFFEB;
    text-align: left;
    margin-top: 10%;
    padding-top: 3%;
    position: relative;
    font-size: 48px;
    font-weight: 200;
    
    
  }

  #categorytitle2
  {
    font-family: lato, sans-serif;
    color:  #FFFFEB;
    text-align: left;
    line-height: 20px;
    font-weight: 100;
 
  }

  #recinfo {
    width: 100%;
    margin-left: 10%;
    position: absolute;
    color:#FFFFEB !important;
    padding:1px;
    padding-bottom: 20px;
    border-radius: 8px;
    background-color: #f7f7f7;
    box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
    height: 310px;
    text-align: center;
    font-weight: 100;
}

@media (min-width: 600px) {
#recinfo2 {
    height:100%;
    position: relative;
    background-color: #f7f7f7;
    margin-left: 20%;
    padding:20px;
    padding-top: 50px;
    padding-bottom: 50px;
    font-weight: 100;
  }
}


@media (max-width: 600px) {
  #recinfo2 {
      height:100%;
      position: relative;
      background-color: #f7f7f700;
      margin-left: 20%;
      padding:20px;
      padding-top: 50px;
      padding-bottom: 50px;
      font-weight: 100;
    }
  }



#rekommenderadekort {
    overflow:hidden;
    width: auto;
    height: 375%;
    background-image: linear-gradient(to bottom right, #edf1f7,#c3d3f2);
     position: relative;
     
    }

    #titlediv {
      width: 80%;
      height: 30%;
       background-color:#2c456b;
       position: relative;
       margin-left: 10%;
       border-radius: 8px;
       top:15%;
       z-index: 999;
      }

      #darkblue {
         color:#FFFFEB;
        }

      

#ratingall{
  margin-top: 0px;
  
 }


 #ratingall_list{
  margin-top: -70px;
  
 }


    #symbolerrating {
        width: 3%;
        position: relative;
        float:right;
    }

    #symbolerrating_top {
      width: 4%;
      position: relative;
      top:-230px;
      left: 210px;
      height: auto;
  }

  #symbolerrating_top_betyg
  {
    width: 5%;
    position: relative;
    margin-top: 0px;
    margin-bottom: 50px;
    height: auto;
}

#symbolercategory_list {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 10vw;  /* Adjust size relative to viewport width */
  height: 10vw;  /* Keep aspect ratio by using the same value for height */
  max-width: 50px;  /* Set a max size to avoid it becoming too large */
  max-height: 50px; /* Set a max size to avoid it becoming too large */
  min-width: 30px;  /* Set a min size to avoid it becoming too small */
  min-height: 30px; /* Set a min size to avoid it becoming too small */
  object-fit: contain;  /* Ensure the image fits within the container while maintaining aspect ratio */
}

/* Make further adjustments with media queries if needed */
@media (max-width: 768px) {
  #symbolercategory_list {
      width: 15vw;  /* Adjust for smaller screens */
      height: 15vw;
  }
}

@media (max-width: 480px) {
  #symbolercategory_list {
      width: 20vw;  /* Further adjustment for mobile */
      height: 20vw;
  }
}



    #symbolercategory {
        width: 5%;
        position: relative;
        float:left;
        margin-top: -3.5%;
        margin-left: -3.5%;
    }

    #symbolercategorytitle {
      width: 3%;
      position: absolute;
      margin-top: -0.5%;
      margin-left: 1%;
      
  }

    #symbolerallcards {
        width: 12%;
        position: relative;
        margin-top:-2.5%;
        margin-left: 6%;
        float:left;
        z-index: 0;
    }

    #symbolerallcards_white {
      width: 12%;
      position: relative;
      margin-top: -2.5%;
      margin-left: 6%;
      float: left;
      z-index: 0;
      filter: brightness(500%);
  }

    #allcardscaption
    {
       font-size: 15px;
       color:#FFFFEB;
       position: relative;
      text-align: center;
      font-weight: 400;
    }

    #allcardsbottom
    {
        font-size: 20px;
        color:#FFFFEB;
       margin-top: 0%;
     }

     #symbolerratingbottom {
        width: 10%;
        position: relative;
        
    }

    #travelcard {
        margin-top: 5%;
        margin-left: 5%;
        width:90%;
        background-color: #f7f7f7;
        position: absolute;
        border-radius: 10px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);

  

    }

    /* Style the tab */

    /* Style the close button */
.topright {
  float: right;
  cursor: pointer;
  font-size: 28px;
}

.topright:hover {color: #4681f4;}

.tab {
  overflow:auto;
  background-color: #f7f7f7;
  margin-top:3%;
  margin-left: 60%;
  vertical-align: middle;

}

.tablinks {
  line-height: 0px;
  vertical-align: middle;
  text-align: center;
  

}

#topDiv {
  background-color: #f9f9f9;
  padding: 10px;
  margin-top: 5%;
  margin-left: 5%;
  width: 90%;
  max-width: 100%; /* Ensures the box doesn't exceed the width of its container */
  border-radius: 10px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  color: #555;
  box-sizing: border-box; /* Prevents content from overflowing */
  height: auto; /* Makes sure the container grows with the content */
  min-height: 150px; /* Adjust this value to ensure it doesn't collapse too much */
}





#informationcredit{
  background-color: #5dbea200;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  color: #FFFFEB;
  font-weight: 200;
}

#informationcreditrecension{
  background-color: #1a2d48;
  width: 100%;
  height: 40%;
  border-radius: 10px;
  box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
  color: #FFFFEB;
  
 
}



#topDiv2 {
  background-color: #f7f7f700;
  padding: 10px;
  margin-bottom: -70px; /* Adjust this value to maintain consistent spacing */
  margin-top: 2%;
  margin-left: 5%;
  width:90%;
  border-radius: 10px;

}

#travelcardperks {
  margin-top: 0px;
}


#bottomDiv {
  background-color: lightgreen;
  padding: 10px;
}

.tab button {
  background-color: #f7f7f7;
  border: none;
  cursor: pointer;
  padding: 2.5px 40px;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  border: solid #c2c0c0;
  border-width: thin;
  border-radius: 8px;
  margin-top: 10px; /* Adjusted margin */
  position: relative;
  z-index: 1; /* Ensure buttons are on top */
  color: #000; /* Default text color */
}

.tab button.active {
  background-color: #c98c00; /* Active state background color */
  color: #f7f7f7; /* Active state text color */
}

.tab button:hover {
  background-color: #c98c00; /* Hover state background color */
  color: #f7f7f7 !important;
}

/* Ensure the text color inside the <p> tags also changes */
.tab button p {
  color: #000; /* Default text color */
}

/* Add this rule to change text color inside <p> tags on hover */
.tab button:hover p {
  color: #f7f7f7 !important;
}


.tab button.active p {
  color: #f7f7f7; /* Ensure active text color inside <p> tags remains the same */
  background-color: #4681f4;
}


.tabtext0  {
  margin: 0; /* Remove default margin from paragraph */
  padding: 0; /* Remove default padding from paragraph */
  margin-left: -20%;

  
}

.tabtext  {
  margin: 0; /* Remove default margin from paragraph */
  padding: 0; /* Remove default padding from paragraph */
  margin-left: -40%;

  
}

.tabtext2  {
  margin: 0; /* Remove default margin from paragraph */
  padding: 0; /* Remove default padding from paragraph */
  margin-left: -0%;

  
}

.tablinksreco {
  position: relative;
  width: 100%;
  height: auto; /* Allow height to adjust based on content */
  border-radius: 20px;
  background-color: rgba(240, 245, 250, 0.902);
  margin-bottom: 20px;
  cursor: pointer; /* Indicate that the div is clickable */
  transition: height 1.5s ease; /* Smooth transition for height */
}

.tabcontentreco {
  max-height: 0; /* Initially collapsed */
  overflow: hidden; /* Hide overflowing content */
  transition: max-height 0.5s ease; /* Smooth expand/collapse */
  background-color: rgba(240, 245, 250, 0.902); /* Same background for consistency */
  padding: 0 20px; /* Add some padding for better readability */
}

.tablinksreco.active .tabcontentreco {
  
    max-height: 1000px; /* Set to desired expanded height */
  
}








/* Optional: Ensure buttons have consistent width */
.tab {
  display: flex; /* Align buttons in a row */
  justify-content: center; /* Center the buttons horizontally */
  gap: 10px; /* Space between buttons */
}




/* Style for tab content */
.tabcontent {
  display: none;
  padding: 10px;
  color:#2c456b;
}

.tabcontent.active {
  display: block;
}

.spacer {
  height: 20px; /* Adjust this to the desired space between collapsible and next element */
}

.tabbottom {
  margin-top: 10px;
}



    #travelcard2 {
        margin-left: 5%;
        width:90%;
        height:40%;
        background-color: #f7f7f7;
        border-radius: 10px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
        margin-top:30%;
        position:relative;

    }

  

    #perks{
      background-color: #f7f7f7;
        margin-top: -4%;
        height: 80%;
        width: 83%;
        color:#2c456b;
    }

    #travelperk{
       margin-top: -8%;
       margin-left: 15%;
       color:#555;
    }


    #travelperkbottom{
        margin-top: 4%;
        margin-left: 15%;
        color:#555;
     }

    #cons{
        background-color: #d70b0b;
        margin-top: 5%;
        height:100%;
        width: 30%;
        margin-left:30%;
        color:#212427;
    }

    #recommendedcaption {
        display: inline-block;
        position: absolute;
        font-size: 20px;
        text-align: center;
        margin-top: 1%;
        margin-left: -3%;
        
    }

    #recommendedcaption_2 {
      display: inline-block;
      position: absolute;
      font-size: 20px;
      text-align: center;
      margin-top: 1%;
      margin-left: -9%;

      
  }


  @media (max-width: 600px) {
  #recommendedcaption_3 {
    display: inline-block;
    position: absolute;
    font-size: 20px;
    text-align: center;
    margin-top: 1%;
    margin-left: -21%;

    
}
}

#recommendedcaption_3 {
  background-color: #f0f0f000; /* Add a background color if you want */
  padding: 10px; /* Padding for internal spacing */
  border-radius: 10px; /* Rounded corners */
  box-sizing: border-box; /* Ensures padding is included in width/height calculations */
  overflow: hidden; /* Prevents content from overflowing */
  width: 100%; /* Ensures the div takes up the full width available */
}

#recommendedcaption_3 p#litenexempeltext {
  word-wrap: break-word; /* Ensures long text breaks properly and doesn't overflow */
  overflow-wrap: break-word; /* Adds support for overflow on long words */
}

        
    #travelcardperks_list{
        background-color: #f7f7f7;
        width: 60%;
        height: 70%;
        margin-left:35%;
        margin-top:5%;

         
    }


    #travelcardperks_list{
      background-color: #ee1a1a;
      margin-top: -250px;
     

       
  }


  @media (min-width: 600px) {
  .topDiv--rating {
    position: absolute; /* This will allow it to be positioned relative to the parent */
    top:10px; /* Distance from the top */
    right: 70px; /* Distance from the right */
    background-color: rgba(0, 128, 0, 0); /* Optional: For visibility */
    padding: 5px; /* Optional: Add padding to your rating box */
    border-radius: 5px; /* Optional: So the box has rounded corners */
    color: white; /* Optional: Makes the text visible if background is dark */

  }
  }
  
  
  


  #allakort {
    font-family: lato, sans-serif;
    font-size: 12px;
    height: 100%;
    width: 100%;
    position:relative;
    padding:10px;
    overflow: scroll;
    background-color: #dfe5f2;
    
  }

  #allakortcaption{
    width: 80%;
    height: 25%;
    background-color: #2c456b00;
    border-radius: 8px;
    margin-left: 10%;
    color: #2c456b;
  }


  #allakort2 {
    display: none;
    font-family: lato, sans-serif;
    font-size: large;
    height: 100%;
    width: 100%;
    position:relative;
    padding:10px;
    overflow: scroll;
    background-color: #dfe5f2;
  }

  /*change the number below to scale to the appropriate size*/ 
#kortliten:hover { 
    transform: scale(1.01); 
    filter: brightness(95%); 
    
    }

    #rabbit:hover { 
        transform: scale(1.0); 
        filter: brightness(95%); 
        border: solid #f7f7f7;
        border-width:medium;
        overflow: hidden; /* Make sure the shadow conforms to the rounded corners */

        }           
        
            #rabbit_nor:hover { 
        transform: scale(1.0); 
        filter: brightness(95%); 
        border: solid #f7f7f7;
        border-width:medium;
        overflow: hidden; /* Make sure the shadow conforms to the rounded corners */

        }           
       

        #rabbit{
          box-shadow: 0 5px 5px 0 rgba(0,0,0,.2);
          overflow: hidden; /* Make sure the shadow conforms to the rounded corners */
          border-radius: 20px;
          cursor: pointer;
        }  

        #rabbit_nor {
          box-shadow: 0 5px 5px 0 rgba(0,0,0,.2);
          overflow: hidden; /* Make sure the shadow conforms to the rounded corners */
          border-radius: 20px;
          cursor: pointer;
        }
        

          /* navbar for computer */
  @media screen and (min-width: 1000px) {

    #rabbit_nor {
      box-shadow: 0 5px 5px 0 rgba(0,0,0,.2); 
           overflow: hidden; /* Ensures shadow stays within rounded corners */
      border-radius: 26px;
      cursor: pointer;
    }
    
 

  

      

      #rabbit{
        box-shadow: 0 5px 5px 0 rgba(0,0,0,.2);
        overflow: hidden; /* Make sure the shadow conforms to the rounded corners */
        border-radius: 28px;
        cursor: pointer;

       
      }  
    }  


                /* navbar for computer */
  @media screen and (min-width: 1500px) {

    #rabbit_nor {
      box-shadow: 0 5px 5px 0 rgba(0,0,0,.2); 
           overflow: hidden; /* Ensures shadow stays within rounded corners */
      border-radius: 40px;
    }
  }

    
  .container {
    overflow: hidden;
    margin-top: 10px;
    
    

    
  }
  
  .filterDiv {
    float: left;
    background-color: #f7f7f700;
    color: #2d2c2f;
    width: 250px;
    height: 250px;
    text-align: center;
    margin: 15px;
    display: none; /* Hidden by default */
    
  }

  .hovercard:hover
  {
    box-shadow: 0 10px 10px 0 rgba(0,0,0,.2);
    transform: scale(1.02); 
    border: solid #f7f7f7;
    filter: brightness(105%); 
    border-width:medium;
    border-radius: 13px;
    cursor: pointer;

    
  }

.hovercard

{
  box-shadow: 0 10px 5px 0 rgba(0,0,0,.2);
  border-radius: 13px;
 
}

#rubrikpopular
{
  text-align: center;
  color:#2c456b7b;
  font-size: 22px;
  margin-top: -60px;

  
  
 
}

#rubrikpopulartext {
  display: none;
  text-align: center;
  color: #b17700; 
  font-family: 'Lato', sans-serif;
  font-weight: 400;
}




.orange {

  color: #c98c00; 
 
  
  
 
}

  .filterDivSearch {
    float: left;
    background-color: #f31313;
    color: #2d2c2f;
    width: 250px;
    height: 250px;
    text-align: center;
    margin: 15px;
    display: none; /* Hidden by default */
    
  }


  
  .filterDiv2 {
    float: left;
    background-color: #f7f7f700;
    color: #2d2c2f;
    width: 200px;
    height: 150px;
    text-align: center;
    margin: 15px;
    display: none; /* Hidden by default */
  }
  
  .filterDiv3 {
    float: left;
    background-color: #f7f7f700;
    color: #2d2c2f;
    width: 200px;
    height: 150px;
    text-align: center;
    margin: 15px;
    display: none; /* Hidden by default */
  }
  

  /* The "show" class is added to the filtered elements */
  .show {
    display: block;
    
  }
  
  /* Style the buttons */
  .btn {
    margin-top: 10px;
    border: none;
    outline: none;
    padding: 5px 10px;
    background-color: #f7f7f7;
    cursor: pointer;
    text-align: center;
    margin-left: 22px;
    font-size: 10px;
    
  }
  
  /* Add a light grey background on mouse-over */
  .btn:hover {
    border-bottom: 5px solid #4681f4;
    background-color: #e1dede;
  }
  
  /* Add a dark background to the active button */
  .btn.active {
    border-bottom: 5px solid #4681f4;
  }

  #welcomeDiv {
    background-color: #d2dbecf4;
    margin-left: auto;
    margin-right: auto;
    width: 32%;
    height: 35%;
    position: absolute;
    box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
    top: 305%;   
    border-radius: 2px;
    resize:both;
    overflow:auto;
    display: none;
    visibility: hidden;
    
  } 

  .compare-navbar {
    display: none; /* Initially hidden; adjust as needed */
    position: fixed;
    bottom: 0;
    left: 0; /* Ensure alignment from the left edge */
    width: 100%; /* Full width of the viewport */
    background-color: #1a2d48;
    color: white;
    padding: 10px;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    justify-content: space-between;
    align-items: center;
    height: 140px;
    


}




  
  .compare-content {
    display: flex;
    align-items: center;
    display: inline;
  }

  
  .compare-now-btn {
    background-color: #5dbea3;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    padding: 5px 25px;
    text-align: center; /* Center the text */
    position: absolute;
    margin-left: 91%;
    margin-top: -6%;
    font-size: 14px;
}

/* Container for each card */
.card-info {
  display: flex;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.compare-btn_list {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 50px; /* Increase width slightly */
  height: 50px; /* Increase height slightly */
  padding: 1px; /* Add padding for the text */
  background-color: #5dbea3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px; /* Adjust font size to fit the new button size */
  text-align: center;
}

.compare-btn_list:hover {
  background-color: #41957e;
}



  .compare-btn {
    background-color: #5dbea3; /* Primary button color */
    color: white; /* Text color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    padding: 0px 7px; /* Padding for size */
    font-size: 12px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    margin-top: 2px; /* Space above the button */
    position: relative;
    margin-left: 10%;
  }

  .compare-btn_search{
    background-color: #5dbea3; /* Primary button color */
    color: white; /* Text color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    padding-left: 7px; /* Padding for size */
    padding-right: 7px; /* Padding for size */
    padding-bottom: 4px; /* Padding for size */
    padding-top: 0px;
    font-size: 12px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
    margin-top: -49px; /* Space above the button */
    position: absolute;
    margin-left: 40%;
  }

  .compare-btn_search:hover {
    background-color: #41957e; /* Darker blue on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
  }
  
  .compare-btn_search:active {
    background-color:  #225547; /* Even darker blue on active */
    transform: scale(1); /* Reset scale on active */
  }
  
  .compare-btn_search:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(70, 129, 244, 0.5); /* Custom focus outline */
  }

  .compare-btn:hover {
    background-color: #41957e; /* Darker blue on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
  }
  
  .compare-btn:active {
    background-color:  #225547; /* Even darker blue on active */
    transform: scale(1); /* Reset scale on active */
  }
  
  .compare-btn:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(70, 129, 244, 0.5); /* Custom focus outline */
  }


  .compare-now-btn {
    background-color: #5dbea3; /* Default color when not enough cards are selected */
    color: white; /* Text color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Padding for size */
    font-size: 14px; /* Font size */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

.compare-now-btn.enabled {
    background-color: #5dbea3; /* Enabled color */
    cursor: pointer; /* Pointer cursor when enabled */
}

.compare-now-btn:hover.enabled {
    background-color: #41957e; /* Darker color on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

.compare-now-btn:active.enabled {
    background-color: #225547; /* Even darker color on active */
    transform: scale(1); /* Reset scale on active */
}

.compare-now-btn:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(70, 129, 244, 0.5); /* Custom focus outline */
}


  
  #blur
  {
    backdrop-filter: blur(2px);
    }



  #infoombild
{
 margin-left: 25%;
 background-color: #d2dbecc7;
 
  }

  #infoomkort {
    background-color: #1cbb2900;
    width: 100%;
    height: 50%;
    vertical-align: middle;
    font-size: 30px;
    
  }


/* Style the close button (span) */
.button-3 {
    float: right;
    background-color: #4681f4; /* blue */
    color: #f7f7f7;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    border-radius: 2px;
    margin-top: 10px;
    margin-right: 10px;
}

.button-3:focus:not(:focus-visible):not(.focus-visible) {
  box-shadow: none;
  outline: none;
}

.button-3:hover {
  background-color: #2f6ae0;
}

.button-3:focus {
  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
  outline: none;
}

.button-3:disabled {
  background-color: #2f6ae0;
  border-color: rgba(27, 31, 35, .1);
  color: rgba(255, 255, 255, .8);
  cursor: default;
}

.button-3:active {
  background-color: #2f6ae0;
  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: #4680f4b9;
    color: #444;
    cursor: pointer;
    padding: 12px;  
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 20px;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible:hover {
    background-color: #92afe7bb;
  }
  
  /* Style the collapsible content. Note: hidden by default */
  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f7f7f7;
  }

  .collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
  }
  

  /* (FOR CATEGORIES) Style the button that is used to open and close the collapsible content */
.collapsible2 {
    background-color: #92aee7;
    color: #444;
    cursor: pointer;
    padding: 10px;  
    width: 100%;
    height:5%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 20px;
    margin-left: 2%;
    margin-top: 2.6%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 9999;

  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible2:hover {
    background-color: #bdcdeebb;
  }


  /* Style the collapsible content. Note: hidden by default */
  .content3 {
    padding: 0 18px;
    display: none;
    overflow: scroll;
    background-color:#8eb2f8;
    position: absolute;
    z-index:1; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 5px;
    margin-left: -2%;
    margin-top: -1%;
    opacity: 0.9;
    height:80px;
  }


  /* (FOR ALL CARDS) Style the button that is used to open and close the collapsible content */
  .collapsible3 {
    background-color: #f7f7f7;
    color: #444;
    cursor: pointer;  
    text-align: center;
    font-size: 15px;
    padding-left: 10px;
  padding-right: 30px;
  height: 30px;
    width: 100px;
    padding-top: 2px;
    margin-left: -25.5%;
    color:black;
position: absolute;
border-radius: 3px;

  }


  .button2_filter {
    all: unset;
    cursor: pointer;
  }

  #filterimg {
   width: 13px;
   top:-16px;
   margin-left: 35px;
   position: relative;
  }
  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
  .active, .collapsible3:hover {
    background-color: #4681f4;
    color: #FFFFEB;
  }

  .collapsible3:after {
    font-size: 20px;
    color: white;
    float: left;
    margin-top: -8%;
  }



  
  /* Style the collapsible content. Note: hidden by default */
  .content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f7f7f7;
    position: absolute;
    z-index:1;
  }





  .collapsible2:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
  }
  
  #recotitle
  {
    color:#084760;
    margin-top:8%;
    margin-left: 5%;

  }

   
  #recotitle_list
  {
    color:#084760;
    font-size: 16px;
  

  }

  @media (min-width: 600px) {

  #recotitle_list_pop_desktop {
    font-size: 24px;
    text-align: center;
    color:#084760;
    
  }

  #recotitle_list_pop_mobile{
    display: none;
  }

  #litenexempeltextless_desktop
  {
    font-family: lato, sans-serif;
    font-size: 8px;
    color: #666;
  }

  #litenexempeltextless_mobile
  {
    display: none;
  }
}


  @media (max-width: 600px) {
    #recotitle_list_pop_desktop {
      display: none;
      
    }

    #recotitle_list_pop_mobile{
      font-size: 24px;
    text-align: center;
    color:#084760;
    }

    #litenexempeltextless_desktop
    {
      display: none;
    }
  
    #litenexempeltextless_mobile
    {
      font-family: lato, sans-serif;
      font-size: 12px;
      color: #666;
    }
  }
    
  #infobotten {
    font-family: lato, sans-serif;
    font-size: large;
    height: 70%;
    width: 100%;
    background-color: #131927;
    color: #FFFFEB;
    position:relative;
    margin-top: 0px;
  }

  #infobottenstor
  {
    font-family: lato, sans-serif;
    font-size: large;
    color:white;
    margin-left: 10px;
  }

  
  @media (max-width: 600px) {
    .arrow {
      margin-left:-70px;
      margin-top: 600px;
      position: absolute;
      visibility: hidden;
  
    }

    #topdiv {
      background-color: #d2030300;
      margin-left: auto;
      margin-right: auto;
      width: 90%;
      height: 100%;
      
    }

    html {
  background-color: #f7f7f700;
  background-image: none;
    }

    .row_wrapper{
      background-color: #f7f7f700;
      
      
    }

    #maindiv {
      background-color:#f7f7f700;
      margin-left: 50%;
      margin-right: auto;
      width: 50%;
      height: 100%;
      padding: 50px;
      margin-top: -56.45%;
      position:absolute;
      font-family: lato, sans-serif;
      
    }

    
#rekommenderadekort {
  overflow:hidden;
  width: auto;
  height: 375%;
   position: relative;
   background-color: #f7f7f700;
   background-image: none;
   
  }

    

  }

  .arrow {
    margin-left:-70px;
    margin-top: 600px;
    position: absolute;

  }
  


.bounce {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.compare-navbar img {
  width: 100px;  /* Adjust width as needed */
  height: auto; /* Maintain aspect ratio */
  margin: 0 10px; /* Adjust spacing between images */
  cursor: pointer; /* Show pointer cursor on hover */
  border-radius: 4px; /* Optional: Rounded corners */
  transition: transform 0.3s; /* Optional: Smooth scale transition on hover */
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  margin-right: 15px;
}

.close-btn:hover {
  color: #4681f4;
}

.compare-navbar img:hover {
  transform: scale(1.1); /* Optional: Slightly enlarge the image on hover */
  border: 2px solid red; /* Optional: Add border for better visibility */
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.75) 50%, transparent 50%);
  transition: opacity 0.3s ease-in-out;
  opacity: 0.5;

}


/* Customize the label (the container) */
.container {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-right: 10px;
    font-family: lato, sans-serif;
    
  }
 

  /* Hide the browser's default checkbox */
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #f7f7f7;
    border-radius: 1px;
  }
  
  /* On mouse-over, add a grey background color */
  .container:hover input ~ .checkmark {
    background-color: #acc3f1;
    filter: brightness(95%); 
    
  }
  
  /* When the checkbox is checked, add a blue background */
  .container input:checked ~ .checkmark {
    background-color: #f7f7f7;
  }
  
  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    
  }
  
  /* Show the checkmark when checked */
  .container input:checked ~ .checkmark:after {
    display: block;
    
  }
  
  /* Style the checkmark/indicator */
  .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid blue;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}




#scrolla {
    position: absolute;
    margin-top: 50px;
    float:left;
}

#allakortliten {
    position: absolute;
    width: 100%;
    margin-top: -10px;
    margin-left: -10px;
    height: 100%;
    background-image: linear-gradient(to bottom right, #4b5b7b,#1e3454);
}


/* Search Input - Modern & Professional */
#myInput {
  width: 25%;
  font-size: 16px;
  padding: 10px 16px;
  border: 2px solid #2c456b;
  background-color: #f7f7f7;
  font-family: "Lato", sans-serif;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* Focus Effect - Subtle Highlight */
#myInput:focus {
  border-color: #345587;
  background-color: #f7f7f7;
}


  #companycard {
    position: absolute;
    font-size: 16px;
    margin-left: 222px;
    margin-top: 83px;
    font-weight: 100;
    opacity: 0.7;

   
    
  }

 
  
  #myUL {
    border: 2px solid #ddd;
    margin-left: 71.60%;
    list-style-type: none;
    background-color: #f7f7f7;
    position: relative;
    z-index: 9999!important;
    width: 27.37%;
    margin-top: 0.85%;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-right: 15px;
    border-top: 0px;
    position: fixed;
    border-radius: 8px;
    overflow: scroll;
    max-height: 400px;

    
  }
  
  .hide {
    display: none;
    z-index: 9999!important;
  }
  
 
  #myUL li a {
    margin-top: -3px; /* Prevent double borders */
    background-color: #f7f7f7;
    text-decoration: none;
    font-size: 20px;
    color: #666;
    background-size: 40px;
    display: block;
    position: inherit;
    width: 375px;
    margin-left: -30px;
    margin-top: 0.2%;
    text-align: left; /* Align text to the left */
    
    

  }

  #myUL li a:hover {
  color: #2c456b;
font-weight: 400;
}

  #searchcard{
    float: left;
    margin-left: 1px;
    background-color: #f7f7f7;
    height: 50px;
    width: 250px;
    text-align: center;
    line-height: 50px;
    color: #2d2c2f;
    
  }

  #kortliten2 {
    float: left;
    
  }

  #kortliten2:hover {
    border: solid #1b7a9f;
    border-width:0.5px;
    border-radius: 4px;
    filter:brightness(1.02);
    
  }


  #kortguiden {
    font-family: lato, sans-serif;
    width: 100%;
    height: 100%;
    background-color: #b3c6efe2;
    text-align: center;
  
  }

  #kortguidenliten {
    font-family: lato, sans-serif;
    width: 100%;
    height: 100%;
    background-color: #dfe5f2e2;
    text-align: center;
    margin-top: -30px;
  }

  #val {
    font-family: lato, sans-serif;
    padding: 10px;
    margin-top: 1%;
    width: 50%;
    height: 100%;
    background-color: #dfe5f2e2;
    text-align: left;
  }

  #guidehöger {
    font-family: lato, sans-serif;
    width: 50%;
    height: 100%;
    background-color: #a8bbe5e2;
    margin-top: -56.46%;
    margin-left: 50%;
    position: absolute;
  }
   
  #allakortrubrik {
    font-family: lato, sans-serif;
    text-align: center;
    color:#FFFFEB;
  }

  #myBtnContainer {
    margin-left: 30%;
    color: #FFFFEB;
    margin-top: -3%;

  }

 
 /* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  
  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #7499e4;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
  }
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }

/* Slider */
  .slider {
    
    width: 75%;
    height: 15px;
    border-radius: 5px;  
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4681f4;
    cursor: pointer;
  }

  #logosearch
  {
    width: 2.5%;
    position: absolute;
    margin-left:94%;
  }

  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4681f4;
    cursor: pointer;
  }

/* Navbar and menu styles */
.dropdown {
  float: left; /* Float left to align it properly */
  position: relative; /* Ensure relative positioning for absolute children */
}




.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: rgb(219, 13, 13);
  padding: 25px 8px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  cursor: pointer; /* Add cursor pointer to indicate it's clickable */
  transition: transform 0.3s ease-in-out;

}



/* Rotate the button (and the hamburger inside it) */
.dropdown:hover .dropbtn {
  transform: rotate(-90deg);
}

/* Dropdown content - modernized */
.dropdown-content {
  display: none; /* Hidden by default */
  position: absolute;
  background: #f7f7f7; /* Clean white background */
  min-width: 180px; /* Slightly wider for a more premium look */
  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.15); /* Softer shadow */
  z-index: 999;
  padding: 8px 0; /* Added slight padding for spacing */
  opacity: 0;
  max-width: 270px;
  transform: translateY(10px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  margin-top:0vw;
  overflow: scroll;
  max-height: 500px;
  text-align: left; /* Justera hela innehållet till vänster */

  


}

/* Dropdown links - ultra-slim, modern, and left-aligned */
.dropdown-content a {
  color: #333; /* Dark gray for readability */
  padding: 4px 8px; /* Minimal padding for a compact look */
  text-decoration: none;
  display: block; /* Changed from flex to block for proper left alignment */
  text-align: left; /* Ensures text is aligned left */
  font-size: 18px; /* Readable font size */
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  border-bottom: 1px solid #2b456c22; /* Thin but noticeable separator */
  line-height: 0.5; /* Reduce line height for a more compact appearance */
  border-radius: 0px;
  background-color: #f7f7f7;



  
}




/* Remove border for last item to keep it clean */
.dropdown-content a:last-child {
  border-bottom: none;
}




/* Show dropdown with a smooth animation */
.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  transform: translateY(0);
}


.submenu a {
  margin: 5px;
  background-color: #f7f7f7;
  display: block;  /* Ensures each <a> takes up a new line */
  padding: 12px 16px;  /* Adds some padding for spacing inside the links */
  margin-bottom: 10px;  /* Adds space between each link, like <br> */
  color: white;  /* Text color */
  border-radius: 0px;  /* Rounded corners (optional) */
  text-align: center;
  font-weight: 200;
  font-size: 18px;
  border-bottom: 0.8px solid #2b456c22; /* Thin but noticeable separator */
  border-radius: 8px;
  width: 300px;
  text-align: left; /* Säkerställer att texten är vänsterjusterad */


}


.mobnav a{

  color: #2b456c;  /* Text color */
  font-weight: 200;
  font-size: 18px;


}





a:hover {
  color: #007bff; /* Gold color for trophy */
}


.submenu a:last-child {
  margin-bottom: 0;  /* No margin for the last item to avoid unnecessary space */
}
.menu-link {
  font-family: lato, sans-serif;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  background: #f9f9f9;
  border: none;
  font-size: 18px;
  font-weight: 200;
  color: #2b456c;
  border-radius: 6px;
  transition: background 0.3s ease;
  text-align: left; /* Säkerställer att texten är vänsterjusterad */

  
}



.menu-link_no {
  font-family: lato, sans-serif;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  background: #f9f9f9;
  border: none;
  font-size: 20px;
  font-weight: 200;
  color: #2b456c;
  border-radius: 6px;
  transition: background 0.3s ease;
  
}



.menu-link_no_arrow i  {  
  color:#2b456c;
}

.menu-link_no_arrow {  
  width: 100%
}

.menu-link_no_arrow span{  
  display: block;
  text-align: left;
}


/* Links WITHOUT an arrow */
.menu-link_no_arrow span::after {
  content: none; /* Removes the arrow */
}



/* Use an SVG as the arrow */
.menu-link span::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>'); /* Inline SVG */
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
  flex-shrink: 0; /* Prevents shrinking if container size changes */
    vertical-align: middle; /* Aligns it with text */

}


.menu-link.active span::after {
  transform: rotate(180deg);
}

.menu-link i {
  margin-right: 8px; /* Ger lite mellanrum mellan ikonen och texten */
  color: #2b456c; /* Färg på ikonen (blå) */
  font-size: 18px; /* Gör ikonen lite större */
  transition: color 0.3s ease-in-out;
}

/* Ensure text inside <span> aligns properly */
.menu-link span {
  display: block;
  text-align: left;
}

.submenu span{
  display: block;
  text-align: left;
}

/* Ändrar färg vid hover */
.menu-link:hover {
  color: #2b456c; /* Mörkare blå vid hover */
}

.menu-link:hover i {
  color: #0056b3; /* Ändrar ikonfärgen vid hover */
}




#colorcard
{
  margin-top: -3%;
  margin-left: -3%;
  width: 7%;
  position: absolute;
}

#logobild
{
  margin-top: -2.6%;
  width:7%;
  position: absolute;
  margin-left:77%;
}

#logobild2
{
  margin-top: -7%;
  width:7%;
  position: absolute;
  margin-left:99%;
}
  
  /* Additional styles for specific elements */
  
  #propertytop {
    width: 7%;
    top: 13px;
    position: relative;
    margin-left: 27%;
    color: rgb(92, 90, 90);
  }
  

  #propertybottom {
    width: 7%;
    top: 13px;
    position: relative;
    margin-left: 25.5%;

}

#propertybottom_r {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 21.7%;

}

#propertybottom_p {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 33.7%;

}

#propertybottom_sp {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 16.0%;

}






#propertybottom_main {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 23.7%;
  

}


#propertybottom_main_n {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 22.5%;
  

}

#propertybottom2 {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 22.1%;
  



}

#propertybottom2_r {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 30.6%;
  



}

#propertybottom2_sp {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 19.6%;
  



}


#propertybottom2_p {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 17%;
  



}

#propertybottom_shopparen {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 23.7%;
  

}

#propertybottom_shopparen_nor {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 6.9%;
  

}

#propertybottom2_shopparen {
width: 7%;
top: 13px;
position: relative;
margin-left: 30%;

}

#propertybottom2_shopparen_nor {
  width: 7%;
  top: 13px;
  position: relative;
  margin-left: 21.5%;
  
  }


#property_text {
  color: rgb(92, 90, 90);
  margin-left: 10%;
  margin-top: -4.5%;

}
  

  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    position: fixed !important;
    text-align: left;
    
  }
/* Style the hamburger lines */
.hamburger {
  width: 30px;
  height: 2px;
  background-color: black;
  margin: 4px 0;
  border-radius: 5px;
  transition: background-color 0.3s ease-in-out;
}

/* Footer Styles */
.footer {
  background-color: #1a2d48;
  color: white;
  padding: 20px 0;
  position: relative;
  bottom: 0;
  width: 100%;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.footer-section {
  flex: 1;
  margin: 10px 20px;
}

.footer-section h2 {
  margin-bottom: 20px;
  font-size: 20px;
}

.footer-section p,
.footer-section ul,
.footer-section a {
  font-size: 16px;
  line-height: 1.6;
}

.footer-section a {
  color: white;
  text-decoration: none;
}

.footer-section a:hover {
  text-decoration: underline;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section .social a {
  font-size: 20px;
  margin: 0 10px;
  display: inline-block;
}

.footer-section .social a:hover {
  color: #4681f4;
}

.footer-bottom {
  background-color: #0d1a2b;
  color: white;
  text-align: center;
  padding: 10px 0;
  margin-top: 20px;
  font-size: 14px;
}

/* Base table styles for larger screens */

/* Base table styles for larger screens */
/* Base table styles for larger screens */
#comparisonTable {
  width: 60%; /* Adjust as needed */
  margin: 10px auto; /* Center the table horizontally */
  border-collapse: collapse;
  background-color: #f7f7f7;
  color:#2c456b;
  font-weight: bold;

  
  /* Move the table up and to the right on larger screens */
  margin-top: -20px; /* Adjust this value to move the table up */
  margin-left: 30%; /* Adjust this value to move the table to the right */
}

#comparisonTable th, #comparisonTable td {
  border: 1px solid #ddd; /* Adds a border to table cells */
  padding: 10px; /* Space inside the cells */
  text-align: center; /* Center text in cells */
  
}

#comparisonTable th {
  background-color: #2c456b; /* Header background color */
  color: white; /* Header text color */
}

#comparisonTable tr:nth-child(even) {
  background-color: #e1e1e1; /* Alternate row background color */
}

#comparisonTable tr:hover {
  background-color: #ddd; /* Row hover effect */
}

/* Mobile-specific styles */
@media screen and (max-width: 600px) {
  #comparisonTable {
    display: block; /* Allows for horizontal scrolling */
    overflow-x: auto; /* Enables horizontal scroll */
    white-space: nowrap; /* Prevents wrapping of table content */
    width: 100%; /* Ensures the table fits within the viewport */
    margin: 0; /* Remove margin for mobile view */
  }
  
  #comparisonTable thead {
    display: none; /* Hides the header row on small screens */
  }

  input {
    all: unset;
    font: 16px ca, lato;
    color: #2d2c2f;
    height: 100%;
    width: 100%;
    padding: 6px 10px;
    padding-left: 35px; /* Adjust padding to make room for the icon */
    border-radius: 20px;
    background-image: none;
   
    
  }
  
  #comparisonTable tbody, #comparisonTable tr {
    display: block; /* Makes each row a block element */
    margin-bottom: 8px; /* Adds space between rows */
    border-bottom: 1px solid #f7f7f7; /* Adds a border for clarity */
    position: relative; /* Allows positioning of pseudo-elements */
  }
  
  #comparisonTable td {
    display: block; /* Makes each cell a block element */
    position: relative; /* Allows positioning of pseudo-elements */
    padding: 10px; /* Adjust padding for readability */
    font-size: 14px; /* Smaller font size for better fit */
    text-align: right; /* Aligns text to the right for readability */
    background-color: #fff; /* Ensures cells have a white background */
    border-bottom: 1px solid #ddd; /* Adds border to the bottom of each cell */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
  }

  #comparisonTable td::before {
    content: attr(data-label); /* Uses data-label for header text */
    position: absolute;
    left: 0;
    width: 45%; /* Adjust width to fit label */
    padding: 10px; /* Padding for the label */
    font-weight: bold;
    background-color: #2c456b; /* Match header background color */
    color: white; /* Label text color */
    white-space: nowrap; /* Prevents wrapping */
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center; /* Vertically centers the label */
    z-index: 1; /* Ensures the label is above the content */
    text-align: left; /* Aligns label text to the left */
  }

  #comparisonTable td {
    padding-left: 50%; /* Ensure space for the label */
    position: relative; /* Keeps the label positioning relative to cell */
    text-align: right; /* Aligns text to the right */
    font-size: 16px; /* Larger font size for better readability */
    color: #1a2d48; /* Blue text color */
    font-weight: bold;
  }
}

#faq-section {
  max-width: 800px;
  margin: 50px auto;
  padding: 25px;
  background: #f7f7f7;
  border-radius: 16px;
  transition: all 0.3s ease-in-out;
}

#faq-section h2 {
  text-align: center;
  font-size: 28px;
  color: #2b456c;
  margin-bottom: 25px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.faq-item {
  background: #f7f7f7;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.faq-question {
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: none;
  font-size: 18px;
  font-weight: bold;
  padding: 18px 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #2b456c;
  transition: all 0.3s ease-in-out;
  border-radius: 10px;
  position: relative; /* Important for positioning ::after */
}

.faq-question:hover {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb); 
  box-shadow: 0px 4px 12px rgba(201, 140, 0, 0.3);
}

.faq-question::after {
  content: "\002B" !important; /* Plus icon */
  font-size: 22px;
  font-weight: bold;
  color: #333; /* Visible color */
  display: inline-block;
  width: 22px; /* Set width */
  text-align: center; /* Align the icon */
  transition: transform 0.3s ease-in-out;
  position: absolute;
  right: 20px; /* Moves the icon to the right */
}

.faq-item.active .faq-question::after {
  content: "\2212"; /* Minus icon */
}


.faq-answer {
  display: none;
  padding: 18px 22px;
  font-size: 17px;
  color: #2b456c;
  background: #f7f7f7;
  border-top: 2px solid #c98c00;
  line-height: 1.7;
}

.faq-item.active .faq-answer {
  display: block;
  animation: fadeIn 0.4s ease-in-out;
}

/* Fade-in effect */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive tweaks */
@media (max-width: 768px) {
  #faq-section {
      padding: 20px;
  }
  .faq-question {
      font-size: 16px;
      padding: 14px 18px;
  }
  .faq-answer {
      font-size: 15px;
  }
}

#howtochoose {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 20px 40px;
  text-align: center;
}

#howtochoose h2 {
  color: #333;
}

#howtochoose h3 {
  text-align: left;
  color: #444;
  margin: 10px 0 5px 0;
  font-size: 1.5em;
}

#howtochoose p {
  text-align: left;
  color: #444;
  font-size: 1.2em;
  font-weight: 200;
}

/* Grid layout */
.matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}

/* Each item stacked vertically */
.matrix-item {
  border-radius: 10px;
padding: 20px;
text-align: left;
display: flex;
flex-direction: column; /* stack image, h3, p vertically */
align-items: flex-start; /* left-align everything */
background: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.matrix-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 10px;
}

.matrix-item p {
  color: #333;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}

/* Responsive: stack in one column on mobile */
@media (max-width: 700px) {
  .matrix {
    grid-template-columns: 1fr;
  }
}

#howtochoose {
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 20px 40px;
  text-align: center;
}

#howtochoose h2 {
  color: #333;
}

#howtochoose h3 {
  text-align: left;
  color: #444;
  margin: 10px 0 5px 0;
  font-size: 1.5em;
}

#howtochoose p {
  text-align: left;
  color: #444;
  font-size: 1.2em;
  font-weight: 200;
}

/* Grid layout */
.matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 30px;
}

/* Clickable link wrapper */
.matrix-item-link {
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%; /* full height for equal boxes */
}

.matrix-item-link:hover .matrix-item {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Each item stacked vertically */
.matrix-item {
  border-radius: 10px;
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column; /* stack image, h3, p vertically */
  align-items: flex-start; /* left-align everything */
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  height: 100%; /* ensures all boxes in a row have same height */
}

.matrix-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 10px;
}

.matrix-item p {
  color: #333;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
}

.read-more {
  color: #1b7a9f;
  font-weight: 600;
}

/* Responsive: stack in one column on mobile */
@media (max-width: 700px) {
  .matrix {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 700px) {
  #Kortkategorier_mobile 
    {
      background: -webkit-linear-gradient(#4d6cac, #2c456b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
      font-family: lato, sans-serif;
      text-align: center;
      }
}

@media (min-width: 700px) {
  #Kortkategorier_mobile
{
  display: none;
  
}

}