/*Make the card look good*/

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



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

}



#topDiv {
  background-color: #f9f9f9;
  padding: 10px;
  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 */
  max-width: 80%;
}

.danger{
  margin-left: 10vw;
  max-width: 80%;
}

@media (max-width: 600px) {


  #topDiv {
    background-color: #f9f9f9;
    padding: 10px;
    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; /* Ensures it doesn't collapse too much */
    max-width: 100%; /* Makes it take up 90% of the screen width */
  }

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


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



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

@media (min-width: 600px) {

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

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

  }

  #recotitle_list_pop_mobile{
    display: none;
  }

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

  #litenexempeltextless_mobile
  {
    display: none;
  }
}

@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;
  }
}

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

.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);
  }
}

.overlay_reco {
  margin-top: 1vw;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */

}

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

    
}

#litenexempeltextless_desktop{
  display: none;

  
}
}

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

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


}





#ratingall{
  margin-top: 0px;
  display: flex;
  background-color: #f7f7f700;  
  width: 50%;
 }

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

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


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

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

}
#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%;

}

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



}

.overlay_reco:hover {
    transform: scale(1.01);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}