@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');


body {
  font-family: 'Lato', sans-serif !important;
  background-color: #f7f7f7;
  color: #2b2b2b !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.8 !important;

}


#linkunderline_small {
  text-decoration: none;
  color: #2b456c;
  font-weight: 400;
  position: relative;
  transition: color 0.3s ease;
  font-size: 1em;
}

#linkunderline_small:hover {
  color: #243a5c; /* Slightly darker shade on hover */
}


/* Dropdown content - modernized */
.dropdown-content {
  top:90px;
  position: fixed;
  display: none; /* Hidden by default */
  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 !important;
  overflow: scroll !important;
  max-height: 500px;
  text-align: left; /* Justera hela innehållet till vänster */

  


}


.dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: rgb(219, 13, 13);
    padding: 35px 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;
  
  }

/* 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: #2b456c;  /* 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;
  
  
  }







.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 */
}


  
  



/* Titel Styling */
.credit-info h3 {
  font-size: 2em;
  color: #e67e22;
  margin-bottom: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Text & List Styling */
.credit-info p {
  font-size: 1.2em;
  font-family: lato, sans-serif;
  font-weight: 200;
  color:#666;
  padding:10px;

  text-align: left;

}

.credit-info ul {
  list-style: none;
  padding-left: 0;
  font-size: 1.1em;
  margin-top: 15px;
}

.credit-info ul li {
  margin-bottom: 12px;
  color: #34495e;
  padding-left: 20px;
  position: relative;
}

.credit-info ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #2c456b;
  font-weight: bold;
}

/* Tips Box */
.tip-box {
  background-color: #ffffff; /* Clean white background */
  border-left: 6px solid #ff8c00; /* Slightly more vibrant accent color */
  padding: 20px 25px; /* More padding for better readability */
  margin-top: 25px;
  font-size: 1.1em;
  color: #2c3e50;
  border-radius: 10px; /* Rounded corners for a modern look */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Softer shadow for depth */
  text-align: left;
}

.tip-box h4 {
  font-size: 1.3em;
  margin-bottom: 10px;
  color: #e67e22;
  font-weight: 600;
}

.tip-box p {
  font-size: 1.1em;
  line-height: 1.7; /* Better spacing for readability */
  color: #555; /* Slightly softer text color */
  text-align: left;
}

/* Kreditkort Jämförelsetabell */
.credit-card-comparison {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: 25px;
  border: 1px solid #e0e0e0;
}

.credit-card-comparison table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.credit-card-comparison th, .credit-card-comparison td {
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.credit-card-comparison th {
  background-color: #f7f7f7;
  font-size: 1.2em;
  color: #2c3e50;
  font-weight: 600;
}

.credit-card-comparison tr:hover {
  background-color: #f9f9f9;
}

.credit-card-comparison td {
  font-size: 1.1em;
  color: #555;
}

/* Call-to-Action Box */
.cta-box {
  background: linear-gradient(135deg, #e67e22, #d35400);
  color: white;
  padding: 25px;
  border-radius: 10px;
  text-align: center;
  margin-top: 35px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cta-box h4 {
  font-size: 1.8em;
  margin-bottom: 12px;
  font-weight: 600;
}

.cta-box p {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 20px;
}

.cta-button {
  background-color: #2c3e50;
  color: white;
  padding: 15px 30px;
  font-size: 1.1em;
  text-decoration: none;
  border-radius: 6px;
  display: inline-block;
  transition: background-color 0.3s ease;
  font-weight: 600;
}

.cta-button:hover {
  background-color: #34495e;
}

/* Bildhantering */
.error-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 25px auto;
  border-radius: 8px;
}


/* Responsiv design för de nya sektionerna */
@media (max-width: 1024px) {
  /* Justera padding för mindre skärmar */
  .credit-info, .credit-card-comparison, .cta-box {
      padding: 20px;
  }

  .credit-card-comparison table {
      font-size: 1em; /* Gör texten något större för läsbarhet */
  }

  .cta-box h4 {
      font-size: 1.7em;
  }

  .cta-button {
      font-size: 1em;
      padding: 12px 25px;
  }

  /* Förbättrad bildhantering på mindre enheter */
  #error-img {
      width: 100%;
      height: auto;
      max-width: 100%;
      margin: 20px 0;
  }
}

@media (max-width: 768px) {
  /* Justera padding och fontstorlekar ytterligare för mobil */
  .credit-info, .credit-card-comparison, .cta-box {
      padding: 15px;
  }

  /* Förbättrar tabellen för mindre skärmar */
  .credit-card-comparison table {
      font-size: 0.9em;
      display: block; /* Gör tabellen mer mobilvänlig */
      overflow-x: auto; /* Möjliggör horisontell scrollning på små skärmar */
  }

  .credit-card-comparison th, .credit-card-comparison td {
      text-align: left;
      padding: 8px;
  }

  .cta-box h4 {
      font-size: 1.6em;
  }

  .cta-button {
      font-size: 1em;
      padding: 12px 25px;
  }

  /* Bildhantering för mobiler */
  #error-img {
      width: 100%;
      height: auto;
      display: block;
      margin: 20px 0;
  }

  /* Förbättra läsbarheten i text */
  .credit-info h3 {
      font-size: 1.8em; /* Mindre rubrikstorlek på mobil */
  }

  .credit-info p {
      font-size: 1.1em; /* Minska textstorlek på mobil */
  }

  .tip-box {
      font-size: 1.1em; /* Minska textstorlek för tips */
  }

  .tip-box h4 {
      font-size: 1.2em;
  }

  .credit-info ul {
      font-size: 1.1em;
  }

  .credit-info ul li {
      margin-bottom: 8px;
  }
}

@media (max-width: 480px) {
  /* Extra justering för små enheter som smartphones */
  .credit-info h3 {
      font-size: 1.6em;
  }

  .credit-info p {
      font-size: 1.0em;
  }

  .credit-info ul {
      font-size: 1.0em;
  }

  .cta-box h4 {
      font-size: 1.4em;
  }

  .cta-box p {
      font-size: 1.1em;
  }

  .cta-button {
      font-size: 1em;
      padding: 10px 20px;
  }

  .credit-card-comparison td, .credit-card-comparison th {
      padding: 10px;
  }
}


  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body:not(navbar) {
    margin-top: 15%;
  
  }
  
  /* navbar for computer */
  @media screen and (min-width: 1000px) {
  
    /* 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;
  }
  
  /* Image within the logo link */
  #logohem {
    width: auto;
    height: 40px; /* Adjust height as needed */
    padding: 0 10px; /* Adjust padding as needed */
  
  }
  
  
  /* Hover effect for navbar links, excluding the logo link */
#navbar a:hover:not(#logo-link) {
  color: #4681f4; /* Elegant deep blue */
}
  
  
  
/* Style the navbar */
#navbar {
  background-color:#f7f7f7;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
    display: flex;
    align-items: center; /* Vertically center items */
    font-size: 19px;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

  
    /* 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 */
  
  }
  
    
    /* Navbar links */
    #navbar a {
      float: left;
      display: block;
      color:#1a2d48;
      text-align: center;
      padding: 24px;
      text-decoration: none;
      overflow: hidden;
    }
  
  
    #navbar a:active {
      background-color: #f7f7f7;
      font-size: 100%;
      background-color: #bdceefab;
      border-radius: 3px;
    }
   
    }
    /* End of navbar for computer*/
  #logobild_vadarkreditkort
  
  {
  width: 25%;
  position: absolute;
  margin-top:-18%;
  margin-left:95%;
  z-index: 0;
  
  }
  
  #progress-container {
    width: 70%;
    background-color: #ddd;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 5%;
    margin-left: 15%;
  }
  
  #progress-bar {
    width: 0;
    height: 20px;
    background-color: #2c456b;
    text-align: center;
    line-height: 20px;
    color: white;
  }
  
  
  header {
      background: #007BFF;
      color: white;
      padding: 1rem;
      text-align: center;
  }
  
  main {
      padding: 20px;
      max-width: 810px;
      margin: auto;
      padding-top: 50px;
  }
  
  .question {
      margin-bottom: 20px;
      color: #2c456b;
      margin-left: 10%;
      height:200px;
      margin-top:3%;
      
  }
  
  
  #questions-container
  {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 8px;
    
  
  }
  
  button {
      display: block;
      margin: 10px 0;
      padding: 10px;
      font-size: 16px;
      border: solid #2c456b;
      border-radius: 5px;
      background:#f7f7f7;
      color: rgb(54, 62, 75);
      cursor: pointer;
      transition: background 0.3s ease;
  }
  
  #ratingall{
    display: block;
    width: 5%;
    background-color: red;
  }
  
  button:hover {
      background: #2c456b;
      color: #f7f7f7;
  }
  
  #recommendations {
      margin-top: 20px;
      color:#2c456b;
  }
  
  .card-recommendation {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      background: #fff;
      margin-bottom: 10px;
  }
  
  /* Card image styling */
  .card-recommendation img {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
    border-radius: 8px; /* Optional: rounded corners for the image */
  }
  
  /* Hover effect */
  .card-recommendation img:hover {
    transform: scale(1.05); /* Enlarge the image by 5% */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Slightly larger shadow on hover */
  }
  
  /* Specific styles for the logo link */
  #logo-link {
      display: flex;
      align-items: center;
  }
  
  /* Image within the logo link */
  #logohem {
      width: auto;
      height: 40px; /* Adjust height as needed */
      padding: 0 10px; /* Adjust padding as needed */
  }
  
  #square-container {
    display: flex;
    justify-content: space-between; /* Reduced space */
    margin: 20px 0;
    padding: 10px;
}

.square {
    width: 150px;
    height: 150px;
    background-image: linear-gradient(to bottom right, #f7f7f7,#f2f4f8);
    border: 1px solid #2c456b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-align: center;
    margin: 0 5px; /* Slight margin to control spacing */
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.3s; /* Smooth transition for hover effect */
    text-decoration: none; /* Remove underline from links */
    color: #2c456b;
    
}

/* Hover effect */
.square:hover {
    transform: translateY(-5px); /* Slightly lift the square on hover */
}

/* Reduce spacing further on large screens */
@media (min-width: 1200px) {
    #square-container {
        justify-content: center;
    }
    .square {
        margin: 0 10px; /* Decrease horizontal spacing between squares */
    }
}

  
        
        .dropdown {
          float: left;
          position: relative;
      }
      
      .dropdown .dropbtn {
          font-size: 17px;
          border: none;
          outline: none;
          color: rgb(219, 13, 13);
          padding: 32px 8px;
          background-color: inherit;
          font-family: inherit;
          margin: 0;
          cursor: pointer;
      }
      
     /* Rotate the button (and the hamburger inside it) */
.dropdown:hover .dropbtn {
  transform: rotate(-90deg);
}





  
      #propertytop {
        width: 7%;
        top: 13px;
        position: relative;
        margin-left: 23.3%;
        color: rgb(92, 90, 90);
    }
    
    #propertybottom {
        width: 7%;
        top: 13px;
        position: relative;
        margin-left: 20%;
    }
    
    #property_text {
        color: rgb(92, 90, 90);
        margin-left: 10%;
        margin-top: -4.5%;
    }
    
    /* Add a grey background color to dropdown links on hover */
    .dropdown-content a:hover {
      background-color: #dddddd00; /* Change to your desired hover color */
  
  
  
      
    }
    .dropdown:hover .dropdown-content {
        position: fixed !important;
        text-align: left;
    }
      
      .hamburger {
          width: 30px;
          height: 2px;
          background-color: black;
          margin: 4px 0;
          border-radius: 5px;
      }
  
  /* Footer styles */
  /* 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;
  }
  
  
  
  .card-recommendation {
    margin: 10px;
    text-align: center;
  }
  
  .card-recommendation p {
    margin: 5px 0 0;
    font-weight: bold;
  }
  
  #informationcredit{
    width: 70%;
    height: 30%;
    margin-left: 15%;
    border-radius: 10px;
    color: #FFFFEB;
    text-align: center;
    line-height: 27px;
        /* Flexbox centering */
        display: flex;
        justify-content: center;
        align-items: center;

  }

  #informationcredit img{
    width:100px;
    

  }
  
  #informationcredit2 {
    background-image: linear-gradient(to bottom right, #2c456b,#7693bf);
    width: 70%;
    margin-left: 0%;
    border-radius: 10px;
    box-shadow: 0 20px 20px 0 rgba(0,0,0,.2);
    color: #FFFFEB;
    line-height: 27px;
    margin-top: 10%;
    
    /* Flexbox properties for vertical centering */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Add some padding if needed */
    text-align: center; /* Center text horizontally */
  }

 
  
  #categorytitle_bottom
  {
    font-family: lato, sans-serif;
    color:  #FFFFEB;
    text-align: center;
    padding-bottom: 20px;
    
  
    
  }

  .introtext
  {
    font-size: 1.2em;
    font-family: lato, sans-serif;
    font-weight: 200;
    color:#666;
    padding:10px;
    text-align: left;
  
  
  }

/* Base Link Styles */
.link {
  color: #2b456c; /* Elegant golden color, adjust to match your theme */
  text-decoration: none;
  font-weight: 500;
  border-bottom: 2px solid transparent; /* To maintain layout */
  padding-bottom: 2px; /* Adds space between text and border */
  transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
  display: inline-block; /* Allow for padding and margin manipulations */
}

/* Hover Effect */
.link:hover {
  color: #ac7a06; /* Slightly darker golden color on hover */
  border-bottom: 2px solid #ac7a06; /* Adds underline on hover */
  text-decoration: none; /* Ensures no default underline */
}

/* Responsive Design */
@media screen and (max-width: 768px) {
  .link {
      font-size: 20px; /* Slightly smaller font on mobile for better readability */
  }
}

@media screen and (max-width: 480px) {
  .link {
      font-size: 28px; /* Further reduce font size for very small screens */
      padding-bottom: 1px; /* Reduce padding for compact view */
  }
}

  

  #blue
  {
    color: #2b456c;    
    font-weight: 400;
  
    
  }


  #pointlist
  {
    margin-top: 50px;
    color: #4681f4;    
  
    
  }
  
  #categorytitle2
  {
    color: #666;
    text-align: left;
    font-weight: 200;
  
  
  }

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

    #categorytitle
    {
    
    padding-bottom: 20px;
    color: #2c456b;
    font-size: 46px;
    
    }
  }

  
  #categorytitle
  {
  
  padding-bottom: 20px;
  color: #2c456b;
  
  }
  
  #categorytitle3
  {
    font-family: lato, sans-serif;
    color:  #FFFFEB;
    text-align: center;
    margin-top: 4%;
    font-size: 20px;
    font-weight: bold;
    font-weight: 200;
  
  }
  
  
  /* Footer for computer */
  @media screen and (min-width: 1000px) {
    .footer {
      width: 100%;
  }
    }
  
  /* Mobile-specific styles */
  @media screen and (max-width: 600px) {
    #categorytitle3 {
      font-family: lato, sans-serif;
    color:  #FFFFEB;
    text-align: center;
    margin-top: 4%;
    font-size: 24px;
    font-weight: bold;
     
    }
  
    #quote_top
  {
      width:150px;
      margin-top:0.5%;
      margin-left: 2%;
      position: absolute;
      transform: rotate(180deg);
      display: none;
   }
  
  
   
  
  
   #quote_bottom
  {
      width:150px;  
      margin-top:5%;
      position: absolute;
      margin-left:95%;
      display: none;
  
     
   
   }
  
   #menuname
   {
    color:#1b3153;
    font-size: 18px;
    font-family: lato, sans-serif;
    background-color: #f7f7f7;
    font-weight: 400;
    border-radius: 4px;
    margin-top:5px;
   
  
  
   
  
  }
  
  
   #logobild_vadarkreditkort
  
  {
  width: 25%;
  position: absolute;
  margin-top:-18%;
  margin-left:95%;
  display: none;
  
  }
  }
  
  #whatiscredit{
    width: 10%;
    position: absolute;
    margin-left: 2.5%;
  
  }
  
  #creditname{
    font-family:lato, sans-serif;
    font-size: 20px;
    position: absolute;
    margin-left: 5.5%;
    margin-top:1.8%;
    color:#1b355b;
  
  }
  
  /* 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: 34px 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 */
  }
  
  
  .dropdown:hover .dropdown-content {
    display: block;
    overflow: hidden; /* Ensures content does not overflow */
  }
  
  /* New Container for Pyramid Layout */
  .container {
    display: flex;
    justify-content: center; /* Center align the divs horizontally */
    flex-direction: column;
    align-items: center;
    margin-top: 20px; /* Add space between the blue div and the white divs */
  }
  
  .white-div {
    background-color: white;
    border: 1px solid #ccc;
    width: 80%; /* Adjust width as needed */
    height: 300px; /* Adjust height as needed */
    margin: 10px;
    border-radius: 8px;
  }
  
  .left-div {
    width: 101%;
    margin-right: 5px;
    margin-top:10%;
    border-radius: 0px;
    border:none;
    margin-left: -1px;
    background-image: linear-gradient(to bottom right, #2c456b,#1a2b43);
    height: 200px;
  }
  
  #quote_top
  {
      width:3%;
      margin-top:0.5%;
      margin-left: 2%;
      position: absolute;
      transform: rotate(180deg);
   }
  
   #quote_bottom
  {
      width:3%;
      margin-top:11%;
      position: absolute;
      margin-left:95%;
  
      
   
   }
  
  .right-div {
    margin-left: 10px;
    margin-top:10%;
    margin-bottom: 10%;
  }
  
  #vadarkreditkortbild
  {
    margin-top: -2%;
    margin-left: -37%;
    width: 6%;
    position: absolute;
  }
  
  #litentext_info{
    position: relative;
    font-size: 20px;
    font-family: lato, sans-serif;
    color: rgb(83, 98, 122);
    text-decoration: none;
  
  
  }
  
  #litentext_card{
    position: relative;
    font-size: 16px;
    font-family: lato, sans-serif;
    color: rgb(83, 98, 122);
    text-decoration: none;
    margin-top: 15%;
    margin-left: 1%;
  
  
  }
  
  .benefits-list {
    display: flex;
    justify-content: space-around;
    margin-top: -23.5%;
    margin-left: 10%;
  }
  
  .benefits-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .benefits-list li {
    margin-bottom: 10px;
    font-family: lato, sans-serif;
    font-size: 20px;
    color: rgb(41, 65, 101);
    font-weight: bold;
  } 


  .error-img {
    max-width: 30%;
    height: auto;
    margin: 50px 0;

}

@media (max-width: 768px) {
  .error-img {
    max-width: 60%; /* Larger image for mobile devices */
}

}
  @media (max-width: 480px) {

    .error-img {
      max-width: 80%; /* Ensure the image isn't too big on smaller screens */
  }

}



/* Card styling */
.card-item {
    background-color: #f7f7f7f7; /* Background color for the card */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    margin: 10px; /* Margin around each card */
    width: calc(25% - 20px); /* Width of each card: 25% of container minus margins */
    min-width: 300px; /* Minimum width to ensure readability */
    max-width: 400px; /* Maximum width to avoid oversized cards */
    transition: transform 0.3s; /* Smooth transformation */
    box-sizing: border-box; /* Include padding and border in width */
}

.card-item:hover {
    transform: translateY(-5px); /* Slightly lift the card on hover */
}

/* Top section of the card */
#topDiv {
    padding: 20px; /* Padding inside the top section */
}

/* Image styling */
.overlay_reco {
    border-radius: 8px; /* Rounded corners for the image */
    max-width: 100%; /* Ensure the image fits the card */
    height: auto; /* Maintain aspect ratio */
}
.orange {

  color: #c98c00; 
 
  
  
 
}

/* Text captions */
#litentext {
    font-size: 20px; /* Font size for the caption */
    font-weight: bold; /* Bold caption text */
    margin: 10px 0; /* Margin above and below the caption */
}

p {
    margin: 10px 0; /* Margin above and below paragraphs */
}



/* Collapsible content */
.collapsible-content {
    max-height: 0; /* Initially hide the content */
    overflow: hidden; /* Hide overflow content */
    transition: max-height 0.3s ease-out; /* Smooth transition for expanding */
}

.collapsible-content.active {
    max-height: 200px; /* Adjust this value based on your content */
}

/* Table styling */
table {
    width: 100%; /* Full width for the table */
    border-collapse: collapse; /* Collapse table borders */
    margin-top: 20px; /* Margin above the table */
}

table th,
table td {
    padding: 10px; /* Padding inside table cells */
    text-align: left; /* Align text to the left */
    border-bottom: 1px solid #dddddd; /* Bottom border for table cells */
}

table th {
    background-color: #f7f7f7; /* Light gray background for header */
    color:#2c456b;
    font-weight: bold; /* Bold header text */
    
}