.elementor-1098 .elementor-element.elementor-element-ab8faac > .elementor-container{max-width:800px;}.elementor-1098 .elementor-element.elementor-element-7de2c0a > .elementor-container{max-width:800px;}.elementor-1098 .elementor-element.elementor-element-264058f{margin-top:-20px;margin-bottom:0px;}.elementor-1098 .elementor-element.elementor-element-821a04b > .elementor-container{max-width:900px;}.elementor-1098 .elementor-element.elementor-element-821a04b{margin-top:30px;margin-bottom:30px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1098 .elementor-element.elementor-element-21121fc4 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1098 .elementor-element.elementor-element-21121fc4 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:25px;font-weight:700;color:#424141;}.elementor-1098 .elementor-element.elementor-element-1c41e7f7 > .elementor-widget-container{padding:80px 0px 080px 0px;border-radius:10px 10px 10px 10px;}.elementor-1098 .elementor-element.elementor-element-1c41e7f7{text-align:center;}.elementor-1098 .elementor-element.elementor-element-1c41e7f7 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:27px;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1098 .elementor-element.elementor-element-1f6d6fcf > .elementor-widget-container{padding:80px 0px 080px 0px;border-radius:10px 10px 10px 10px;}.elementor-1098 .elementor-element.elementor-element-1f6d6fcf{text-align:center;}.elementor-1098 .elementor-element.elementor-element-1f6d6fcf .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:27px;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1098 .elementor-element.elementor-element-a1a2b53 > .elementor-widget-container{padding:80px 0px 080px 0px;border-radius:10px 10px 10px 10px;}.elementor-1098 .elementor-element.elementor-element-a1a2b53{text-align:center;}.elementor-1098 .elementor-element.elementor-element-a1a2b53 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:27px;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1098 .elementor-element.elementor-element-62f85029 > .elementor-widget-container{padding:80px 0px 080px 0px;border-radius:10px 10px 10px 10px;}.elementor-1098 .elementor-element.elementor-element-62f85029{text-align:center;}.elementor-1098 .elementor-element.elementor-element-62f85029 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:27px;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1098 .elementor-element.elementor-element-523ccfc7 > .elementor-background-overlay{background-color:var( --e-global-color-secondary );opacity:0.2;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1098 .elementor-element.elementor-element-523ccfc7{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:30px 0px 30px 0px;}.elementor-1098 .elementor-element.elementor-element-63340c78:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-1098 .elementor-element.elementor-element-63340c78 > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00000000;}.elementor-1098 .elementor-element.elementor-element-63340c78 > .elementor-element-populated, .elementor-1098 .elementor-element.elementor-element-63340c78 > .elementor-element-populated > .elementor-background-overlay, .elementor-1098 .elementor-element.elementor-element-63340c78 > .elementor-background-slideshow{border-radius:12px 12px 12px 12px;}.elementor-1098 .elementor-element.elementor-element-63340c78 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-1098 .elementor-element.elementor-element-63340c78 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-1098 .elementor-element.elementor-element-17db01b3 > .elementor-widget-container{padding:0px 0px 0px 0px;border-radius:10px 10px 10px 10px;}.elementor-1098 .elementor-element.elementor-element-17db01b3{text-align:center;}.elementor-1098 .elementor-element.elementor-element-17db01b3 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:40px;font-weight:700;text-shadow:4px 4px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1098 .elementor-element.elementor-element-78f0605f{text-align:center;}.elementor-1098 .elementor-element.elementor-element-78f0605f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:21px;font-weight:500;text-shadow:4px 4px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1098 .elementor-element.elementor-element-6bd09658{--spacer-size:10px;}.elementor-1098 .elementor-element.elementor-element-746317ab{margin-top:-50px;margin-bottom:0px;}.elementor-1098 .elementor-element.elementor-element-7e21d9fe > .elementor-container{max-width:900px;}.elementor-1098 .elementor-element.elementor-element-7e21d9fe{margin-top:30px;margin-bottom:30px;}.elementor-1098 .elementor-element.elementor-element-1e1f79bf > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1098 .elementor-element.elementor-element-1e1f79bf .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:25px;font-weight:700;color:#424141;}.elementor-1098 .elementor-element.elementor-element-6d2b24fb > .elementor-widget-container{padding:80px 0px 080px 0px;border-radius:10px 10px 10px 10px;}.elementor-1098 .elementor-element.elementor-element-6d2b24fb{text-align:center;}.elementor-1098 .elementor-element.elementor-element-6d2b24fb .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:27px;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1098 .elementor-element.elementor-element-5c6cc80f > .elementor-widget-container{padding:80px 0px 080px 0px;border-radius:10px 10px 10px 10px;}.elementor-1098 .elementor-element.elementor-element-5c6cc80f{text-align:center;}.elementor-1098 .elementor-element.elementor-element-5c6cc80f .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:27px;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1098 .elementor-element.elementor-element-2c80813b > .elementor-widget-container{padding:80px 0px 080px 0px;border-radius:10px 10px 10px 10px;}.elementor-1098 .elementor-element.elementor-element-2c80813b{text-align:center;}.elementor-1098 .elementor-element.elementor-element-2c80813b .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:27px;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}.elementor-1098 .elementor-element.elementor-element-38c8eed8 > .elementor-widget-container{padding:80px 0px 080px 0px;border-radius:10px 10px 10px 10px;}.elementor-1098 .elementor-element.elementor-element-38c8eed8{text-align:center;}.elementor-1098 .elementor-element.elementor-element-38c8eed8 .elementor-heading-title{font-family:"Lato", Sans-serif;font-size:27px;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#FFFFFF;}@media(max-width:767px){.elementor-1098 .elementor-element.elementor-element-21121fc4 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1098 .elementor-element.elementor-element-21121fc4 .elementor-heading-title{font-size:25px;}.elementor-1098 .elementor-element.elementor-element-1c41e7f7 > .elementor-widget-container{background-position:center center;}.elementor-1098 .elementor-element.elementor-element-1c41e7f7 .elementor-heading-title{font-size:25px;}.elementor-1098 .elementor-element.elementor-element-1f6d6fcf > .elementor-widget-container{background-position:center center;}.elementor-1098 .elementor-element.elementor-element-1f6d6fcf .elementor-heading-title{font-size:25px;}.elementor-1098 .elementor-element.elementor-element-a1a2b53 > .elementor-widget-container{background-position:center center;}.elementor-1098 .elementor-element.elementor-element-a1a2b53 .elementor-heading-title{font-size:25px;}.elementor-1098 .elementor-element.elementor-element-62f85029 > .elementor-widget-container{background-position:center center;}.elementor-1098 .elementor-element.elementor-element-62f85029 .elementor-heading-title{font-size:25px;}.elementor-1098 .elementor-element.elementor-element-1e1f79bf > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1098 .elementor-element.elementor-element-1e1f79bf .elementor-heading-title{font-size:25px;}.elementor-1098 .elementor-element.elementor-element-6d2b24fb > .elementor-widget-container{background-position:center center;}.elementor-1098 .elementor-element.elementor-element-6d2b24fb .elementor-heading-title{font-size:25px;}.elementor-1098 .elementor-element.elementor-element-5c6cc80f > .elementor-widget-container{background-position:center center;}.elementor-1098 .elementor-element.elementor-element-5c6cc80f .elementor-heading-title{font-size:25px;}.elementor-1098 .elementor-element.elementor-element-2c80813b > .elementor-widget-container{background-position:center center;}.elementor-1098 .elementor-element.elementor-element-2c80813b .elementor-heading-title{font-size:25px;}.elementor-1098 .elementor-element.elementor-element-38c8eed8 > .elementor-widget-container{background-position:center center;}.elementor-1098 .elementor-element.elementor-element-38c8eed8 .elementor-heading-title{font-size:25px;}}/* Start custom CSS for html, class: .elementor-element-ee3e382 *//* Progress Bar Styles */
.progress-bar {
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill {
  height: 20px;
  background-color: #02C0CE;
  border-radius: 10px;
  width: 49%; /* Adjust dynamically based on progress */
  transition: width 0.3s ease; /* Smooth transition */
}

.step-tracker {
  text-align: center;
  font-size: 14px;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #555;
}

.step-number {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #000000;
}

.step-description {
  font-size: 15px;
  font-weight: 400;
  color: #333;
}

/* Text Links Styles */
.text-links {
  text-align: center;
  margin-bottom: 10px;
}

.text-links a {
  font-size: 14px;
  text-decoration: none;
  color: #02C0CE;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.text-links a.destinations {
  font-weight: bold;
  color: #FFFFFF;
  background-color: #02C0CE;
  padding: 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.text-links a.destinations:hover {
  background-color: #007C8A;
  color: #FFF;
}

/* Mobile Styles */
@media (max-width: 600px) {
  .text-links a {
    display: block;
    margin-bottom: 10px;
  }
}

/* Media query for mobile devices */
@media (max-width: 600px) {
  .progress-bar-fill {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .progress-container {
    border-bottom: none; /* Remove border on mobile */
  }
  .rating-group {
    flex-basis: 100%; /* Full width for mobile */
    margin-right: 0; /* No margin on mobile */
    flex-direction: row; /* Keep elements side by side */
  }
  .key-rating {
    flex: 1 1 50%; /* Adjusts key-rating to take about 55% of the width */
    padding-right: 10px; /* Maintain padding for separation */
    min-width: 0; /* Helps in shrinking if needed */
    text-align: left; /* Align text to the left for better spacing */
  }

  .text-container {
    flex: 1 1 50%; /* Adjusts text container to take about 45% of the width */
    min-width: 0; /* Helps in shrinking if needed */
    padding: 10px 0; /* Padding for vertical alignment and spacing */
  }
}

@media (min-width: 1024px) {
  .progress-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create 4 equal columns */
    gap: 0px; /* Optional: adjust spacing between columns */
  }
  .rating-group {
    display: flex;
    align-items: center;
  }
}    
    
    
  
  
  
  /* Header Image Section Styles */
.workation-section {
    background-size: cover; /* Cover the area of the section */
    background-position: center center; /* Center the background image */
    background-attachment: scroll; /* The background scrolls with the page */
    background-repeat: no-repeat; /* Do not repeat the image */
    width: 100%;
    height: 250px; /* Adjusted for better image display */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative; /* Added for positioning */
    overflow: hidden; /* Ensure no overflow */
  }
  .workation-section h1, .workation-section p {
    z-index: 2; /* Ensure text is above any overlay */
    position: relative; /* Ensure proper stacking */
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for better text visibility */
    z-index: 1; /* Below the text */
  }
  .workation-section h1 {
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: 700;
    margin: 0;
    padding: 0 20px; /* Ensure text doesn't touch edges */
  }
  .workation-section p {
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF;
    font-size: 21px;
    font-weight: 500;
    margin: 10px 0 0 0;
    padding: 0 20px; /* Ensure text doesn't touch edges */
  }  


  
  



 /* Breadcrumb Styles */
 .breadcrumb {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
                  font-size: 16px;
            
              }

        .breadcrumb li {
            display: flex;
            align-items: center;
        }

        .breadcrumb li+li:before {
            content: ">";
            padding: 0 8px;
            color: #6c757d;
        }

        .breadcrumb a {
            text-decoration: none;
            color: #007bff;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

    
    
    
    
    
    
/* Main Content Styles */    
.title {
font-size: 20px;
font-weight: 700;
color: #000000;
margin-bottom: 5px;
}

.subtitle {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}

.features-first,
.features-second {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}

.features-first span {
display: inline-block;
margin-right: 5px;
}

.features-second span {
display: inline-block;
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 8px;
margin-bottom: 5px;
}

.cost {
font-size: 14px;
color: #333;
margin-bottom: 10px;
}

.description {
font-size: 14px;
color: #333;
margin-bottom: 10px;
border-top: 1.5px solid #DEDEDE;
padding-top: 10px;
}

.buttons.learnmore {
display: flex;
flex-direction: column;
gap: 10px;
}

.learnmore .btn {
text-align: center;
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #02C0CE;
color: #FFFFFF !important;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
width: 100%;
}

.learnmore .btn:hover {
background-color: #FFFFFF;
color: #02C0CE !important;
}

.learnmore .btn-secondary {
text-align: center;
border-color: #02C0CE;
background-color: #FFFFFF !important;
color: #02C0CE !important;
}

.learnmore .btn-secondary:hover {
background-color: #02C0CE !important;
color: #FFFFFF !important;
}

.section-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
border-bottom: 1px solid #ccc;
margin-bottom: 25px;
padding-bottom: 25px;
}

.ydestin .section-inner {
margin-bottom: 6px;
padding-bottom: 6px;
border: none;
}

.section-inner .rounded-corners {
width: 100%;
border-radius: 10px;
overflow: hidden;
position: relative;
margin-bottom: 0px;
}

/* Center the button */
.button-destinations-container {
text-align: center;
padding: 10px;
font-family: 'Poppins', sans-serif;
}

/* Button style */
.button-destinations-container .button-more-destinationss {
font-size: 16px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #02C0CE;
color: #FFFFFF;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
display: block;
width: 100%;
margin-bottom: 60px;
}

/* Hover effect */
.button-destinations-container .button-more-destinationss:hover {
background-color: #FFFFFF;
color: #02C0CE;
}

.wf-features-second {
display: flex;
/* Align feature spans in a row */
flex-wrap: wrap;
/* Allow wrapping if necessary */
align-items: center;
/* Center items vertically */
}

.wf-features-second span {
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 8px;
margin-bottom: 5px;
}

.wf-button-container {
display: flex;
align-items: center;
margin-left: 10px;
}

.wf-button {
padding: 5px 40px;
color: #4CAF50;
border: 2px solid #4CAF50;
/* Corrected syntax */
border-radius: 20px;
width: 40px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}

.progress-bar {
width: 100%;
background-color: #f2f2f2;
border-radius: 10px;
margin-bottom: 20px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill {
height: 20px;
background-color: #02C0CE;
border-radius: 10px;
width: 14%;
/* Adjust dynamically based on progress */
transition: width 0.3s ease;
/* Smooth transition */
}

.step-tracker {
text-align: center;
font-size: 14px;
margin-top: 40px;
margin-bottom: 20px;
color: #555;
}

.step-number {
font-family: 'Poppins', sans-serif;
font-size: 15px;
font-weight: 700;
color: #000000;
}

.step-description {
font-size: 15px;
font-weight: 400;
color: #333;
}

/* Desktop styles */
.text-links {
text-align: center;
margin-bottom: 10px;
}

.text-links a {
font-size: 14px;
text-decoration: none;
color: #02C0CE;
margin: 0 5px;
transition: all 0.3s ease;
}

.text-links a.destinations {
font-weight: bold;
color: #FFFFFF;
background-color: #02C0CE;
padding: 10px;
border-radius: 5px;
transition: all 0.3s ease;
}

.text-links a.destinations:hover {
background-color: #007C8A;
color: #FFF;
}

.gap-top {
margin-top: 40px;
}

.titel-section h2 {
  display: inline-block;
  width: 100%;
  margin-top: 70px; /* Add 30px to the existing top margin */
}


.looking-section {
margin-bottom: 20px;
}

/* .ydestin {
display: none;
} */

/* Styles for table */
.travel-tips-section table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
/* Add space between table and other content */
max-width: none;
/* Set maximum width */
border-radius: 10px;
/* Add rounded edges */
overflow: hidden;
/* Ensure rounded edges are applied */
}

.travel-tips-section th,
.travel-tips-section td {
text-align: left;
background-color: #ffffff;
padding: 10px;
line-height: 1.5;
}

.travel-tips-section th {
width: 50%;
/* Equal width for both columns */
font-weight: bold;
}

.travel-tips-section td {
width: 50%;
/* Equal width for both columns */
}

/* Alternative row background color */
.travel-tips-section tr:nth-child(even) {
background-color: #f9f9f9;
}

/* Remove table borders */
.travel-tips-section th,
.travel-tips-section td {
border: none;
}

.pros-cons-table {
width: 100%;
border-collapse: collapse;
background-color: #FFFFFF;
font-size: 16px;
border-radius: 10px;
overflow-x: auto;
border: none !important;
margin-bottom: 20px;
}

.pros-cons-table th {
background-color: #FFFFFF;
color: black;
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-size: 18px;
}

.pros-cons-table th,
.pros-cons-table td {
border: none !important;
padding: 8px;
text-align: left;
font-family: 'Poppins', sans-serif;
}

.hidden-rows {
display: none;
}

#showMoreBtn {
display: block;
margin: 0 auto;
}
#showMoreBtn1 {
display: block;
margin: 0 auto;
}

#showMoreBtn2 {
display: block;
margin: 0 auto;
}

.label {
position: absolute;
top: 30px;
left: 0px;
background-color: #02C0CE;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 500;
padding: 10px;
}

.label::after {
content: '';
position: absolute;
top: 0;
left: 100%;
width: 20px;
height: 100%;
background-color: #02C0CE;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

.dropdown-button, #showMoreBtn {
padding: 10px 20px;
margin: 0px 15px 20px;
background-color: #02C0CE;
color: #FFFFFF !important;
cursor: pointer;
border: 1px solid #02C0CE;
border-radius: 5px;
font-size: 16px;
display: inline-block;
}
.dropdown-button1, #showMoreBtn1 {
padding: 10px 20px;
margin: 0px 15px 20px;
background-color: #02C0CE;
color: #FFFFFF !important;
cursor: pointer;
border: 1px solid #02C0CE;
border-radius: 5px;
font-size: 16px;
display: inline-block;
}

.dropdown-button2, #showMoreBtn2 {
padding: 10px 20px;
margin: 0px 15px 20px;
background-color: #02C0CE;
color: #FFFFFF !important;
cursor: pointer;
border: 1px solid #02C0CE;
border-radius: 5px;
font-size: 16px;
display: inline-block;
}


.dropdown-section {
display: none;
}

.dropdown-section.show {
display: block;
}
.save-to-phone-table td {
width: 325px;
}
.dropdown-button:hover, #showMoreBtn:hover {
background-color: #FFFFFF;
border-color: #02C0CE;
color: #02C0CE !important;
}
.footer-heading h2 {
color: #fff;
}
.dropdown-button1:hover, #showMoreBtn1:hover {
background-color: #FFFFFF;
border-color: #02C0CE;
color: #02C0CE !important;
}
.dropdown-button:hover, #showMoreBtn2:hover {
background-color: #FFFFFF;
border-color: #02C0CE;
color: #02C0CE !important;

}

.section-inner .rounded-corners img {
border-radius: 10px;
}
.button-container .button-readyto {
position: relative;
text-align: left;
padding-left: 0;
border: none;
margin-top: 30px;
}
.dropdown-text {
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 700;
color: #54595F;
cursor: pointer;
user-select: none;
}
@media only screen and (min-width: 769px) {
.save-to-phone-table td {
width: 325px;
}
}
@media only screen and (min-width: 768px) {
.button-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
padding: 20px 10px 20px;
border-top: 1px solid #ccc;
z-index: 999;
text-align: center;
font-family: 'Poppins', sans-serif;
}
.pros-cons-table td {
width: 325px;
}

.hidden-rows {
width: 650px;
}
}

/* Styles for testimonial slider */
.testimonial-slider {
width: 100%;
overflow: hidden;
position: relative;
padding-top: 40px;
padding-bottom: 20px;
}

.testimonial-slider .testimonial-slide {
display: none;
position: relative;
text-align: left;
/* Center text within the slide */
}

.testimonial-slider .testimonial-slide.active {
display: flex;
flex-direction: column;
align-items: center;
/* Center align items vertically */
}

.testimonial-slider .testimonial-text {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #000;
font-weight: 400;
/* Normal font weight for paragraph */
margin-bottom: 10px;
}

.testimonial-slider .testimonial-text p {
color: #666;
line-height: 1.6;
}

.testimonial-slider .testimonial-author {
display: flex;
align-items: center;
/* Center align items horizontally */
margin-bottom: 10px;
}

.testimonial-slider .author-image {
border-radius: 50%;
width: 50px;
height: 50px;
margin-right: 10px;
/* Add space between the image and the name */
}

.testimonial-slider .author-name {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bold;
color: #333;
}

.testimonial-slider .testimonial-controls-bottom {
display: flex;
justify-content: center;
margin-top: 0px;
}

.testimonial-slider .testimonial-control {
cursor: pointer;
padding: 5px;
background-color: rgba(255, 255, 255, 0.5);
border: none;
outline: none;
transition: background-color 0.3s;
font-size: 50px;
line-height: 1;
color: #000;
}
.button-container .button-next-step {
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #02C0CE;
color: #FFFFFF;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
margin-right: 10px;
display: inline-block;
}
.button-container .button-skip-step {
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #FFFFFF;
color: #02C0CE;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
margin-right: 10px;
display: inline-block;
}
.button-container .button-next-step:hover {
background-color: #FFFFFF;
color: #02C0CE;
}
.button-container .button-skip-step:hover {
background-color: #02C0CE;
color: #FFFFFF;
}
.testimonial-slider .testimonial-control:hover {
background-color: #02C0CE;
}
.dropdown-content {
display: none;
}
.dropdown.active .dropdown-content {
display: block;
}
.weather-chart {
  display: flex;
  justify-content: center; /* Center align the items on larger screens */
  align-items: center;
  width: 100%;
  overflow-x: auto; /* Allows horizontal scrolling if needed */
  margin: 20px auto;
  background-color: #fff;
  padding: 0;
  border-radius: 0;
  position: relative;
}

.weather-chart::before {
  content: "";
  position: absolute;
  top: 15%; /* Position the line at the top 15% of the chart */
  left: 20px;
  right: 30px; /* Leave space for the emoji */
  border-top: 2px dashed #D3D3D3; /* Striped (dashed) line style */
  z-index: 1;
}

.weather-chart::after {
  content: "🥵"; /* Emoji as content */
  position: absolute;
  top: 15%;
  right: 10px; /* Position emoji to the right */
  font-size: 18px; /* Adjust size as needed */
  color: #FAFAFA; /* Adjust color to match your design */
  z-index: 2;
}

.month {
  width: 40px; /* Revert to the original width */
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 300px;
}

.bar {
  position: absolute;
  width: 100%;
  background: #FAFAFA; /* Existing background color, could be removed if entire bar uses new color */
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensures the pseudo-element does not extend outside the bar */
  z-index: 1; /* Establishes a new stacking context */
}

.bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45%; /* Height of the new color area */
  background-color: #ADD8E6; /* New color */
  border-radius: 0 0 5px 5px; /* Continue the bar's border-radius at the bottom */
  z-index: -1; /* Ensures this layer is behind the text and icons */
}

.temperature {
  color: #000000;
  text-align: center;
  font-family: 'Poppins', sans-serif; /* Set the font family to Poppins */
  font-size: 14px;
  font-weight: 500; /* Set the font weight to 500 */
  margin: 2px 0; /* Spacing for readability */
  z-index: 2; /* Ensures text and icons are on top */
}

.precipitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFFFFF;
  font-size: 14px;
  font-family: 'Poppins', sans-serif; /* Set the font family to Poppins */
  font-weight: 500; /* Set the font weight to 500 */
  z-index: 2; /* Ensures text and icons are on top */
}

.month-name {
  position: absolute;
  font-family: 'Poppins', sans-serif; /* Set the font family to Poppins */
  font-size: 12px;
  font-weight: 500; /* Set the font weight to 500 */
  bottom: 10px; /* Adjusted for visibility */
  width: 100%;
  text-align: center;
}

.rainy-days {
  padding-left: 20px; /* Adds 5px padding to the left */
  max-width: 800px;
}

.title-section {
  max-width: 800px;
}

.highlight {
  border: 2px solid #02C0CE; /* Teal border */
  padding: 2px 6px; /* Adds padding around the text */
  border-radius: 4px; /* Rounds the corners */
  display: inline-block; /* Ensures the border wraps the text correctly */
}

/* Toggle Switch Styling */
.toggle-switch {
  text-align: center;
  margin: 20px auto;
  display: flex;
  justify-content: center;
}

.toggle-switch button {
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  outline: none; /* Removes the focus outline to clean up the appearance */
}

/* General Toggle Buttons */
.toggle-switch button {
  border-radius: 20px; /* Rounded corners */
}

.toggle-switch button.active {
  background-color: #02C0CE;
  color: #FFFFFF;
}

.toggle-switch button:not(.active) {
  background-color: #FFFFFF;
  color: #02C0CE;
}

/* Section 5 Toggle Buttons Specific Styles */
#fahrenheitBtn {
  border-radius: 20px 0 0 20px; /* Rounded left corners, straight right corners */
}

#celsiusBtn {
  border-radius: 0 20px 20px 0; /* Rounded right corners, straight left corners */
}

/* Section 6 Toggle Buttons Specific Styles */
#fahrenheitBtn2 {
  border-radius: 20px 0 0 20px; /* Rounded left corners, straight right corners */
}

#celsiusBtn2 {
  border-radius: 0 20px 20px 0; /* Rounded right corners, straight left corners */
}

/* Mobile styles */
@media only screen and (max-width: 600px) {
  .text-links a {
    display: block;
    margin-bottom: 10px;
  }
}

/* Media query for mobile devices */
@media (max-width: 600px) {
  .weather-chart {
    justify-content: flex-start; /* Align items to start on smaller screens for horizontal scrolling */
  }

  .month {
    flex: 0 0 80px; /* Fixed width on mobile to ensure consistency and prevent shrinking */
  }
}


@media (max-width: 768px) {

/* Adjust button width for mobile */
.button-destinations-container .button-more-destinations {
width: 100%;
}
.button-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
padding: 0px;
border-top: 1px solid #ccc;
z-index: 999;
text-align: center;
font-family: 'Poppins', sans-serif;
}
.button-container .button-next-step, .button-container .button-skip-step {
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #02C0CE;
color: #FFFFFF;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
margin: 10px auto;
display: block;
width: calc(100% - 20px);
}
.button-container .button-skip-step {
background-color: #FFFFFF;
color: #02C0CE;
border: 2px solid #02C0CE;
}
}

@media (max-width: 767px) {
.section-inner {
grid-template-columns: 1fr;
gap: 20px;
}

.custom-container,
.second-section {
padding: 0px 10px;
}
}
@media only screen and (min-width: 769px) {
.save-to-phone-table td {
width: 325px;
}

div .btn-download.hide-on-desktop {
display: none !important;
}
}


.progress-container {
    display: flex;
    flex-wrap: wrap; /* Enable wrapping of items */
    width: 100%;
    align-items: center; /* Ensure items are aligned centrally vertically */
    border-bottom: 1px solid #F5F5F5; /* Light grey horizontal line */
    padding: 5px 0; /* Adjusted padding to add space above and below the progress bar */
  }
  .rating-group {
    display: flex;
    flex-basis: 49%; /* Each group takes 50% width, adjusted for margin */
    align-items: center;
    margin-right: 10px; /* Adds space between the two groups */
  }
  .rating-group:last-child {
    margin-right: 0; /* Removes margin from the last group to maintain alignment */
  }
  .key-rating, .progress-bar {
    flex: 1; /* Allow each child to grow */
    display: flex;
    align-items: center; /* Center the text vertically */
    justify-content: flex-start; /* Start alignment for content */
  }
  .key-rating {
    padding-right: 10px; /* Spacing before the progress bar */
    text-align: left; /* Align text to the left */
    font-size: 16px; /* Adjust font size */
    font-weight: bold; /* Make text bold */
  }
  .progress-bar {
    height: 30px;
    border-radius: 20px;
    background-color: #F5F5F5; /* Light grey background for the unfilled part */
    position: relative; /* Allows absolute positioning inside */
  }
  .fill {
    height: 100%;
    position: absolute;
    left: 0;
    text-align: left;
    padding-left: 10px;
    color: white;
    line-height: 30px;
    font-weight: bold;
  }
  .bad, .okay, .good, .great {
    border-radius: 20px 0 0 20px; /* Rounded left, sharp right */
  }
  .bad { 
    background-color: #FF4742;
    width: 30%;
  }
  .okay {
    background-color: #FFC924;
    color: black; /* Better contrast for readability */
    width: 50%;
  }
  .good {
    background-color: #3399ff;
    width: 75%;
  }
  .great {
    background-color: #2BDE73;
    border-radius: 20px; /* Fully rounded */
    width: 100%;
  }
  .text-link {
    flex: 1; /* Take full space within the rating group */
    text-align: left; /* Align text to the left */
    padding: 10px 0; /* Padding for better touch target on mobile */
    background-color: #F5F5F5; /* Background to distinguish area if desired */
    border-radius: 20px; /* Optional rounded corners */
    display: flex;
    align-items: center; /* Center text vertically */
    justify-content: flex-start; /* Align text to the start */
}
.text-link a {
    text-decoration: none; /* Remove underline from links */
    color: #000000; /* Set text color */
    font-weight: bold; /* Make text bold */
}
.text-container {
    flex: 1; /* Take full space within the rating group */
    padding: 10px; /* Padding for spacing around the text */
    background-color: #FFFFFF; /* Set background to white, or remove if you prefer no background */
    border-radius: 0px; /* Rounded corners for aesthetics */
    display: flex;
    align-items: center; /* Center text vertically */
    justify-content: Flex-end; /* Center text horizontally for better focus */
    margin-left: 0px; /* Space from the key-rating */
    text-align: right;
}

.text-container a {
    text-decoration: underline; /* Remove underline from links */
    color: #000000; /* Set text color */
    font-weight: bold; /* Make text bold */
}

.text-container .plain-text {
    color: #000000; /* Color for plain text, ensuring readability */
    padding: 0px 0; /* Consistent padding with links for alignment */
}


  @media (max-width: 768px) {
    .progress-container {
        border-bottom: none; /* Remove border on mobile */
    }
    .rating-group {
        flex-basis: 100%; /* Full width for mobile */
        margin-right: 0; /* No margin on mobile */
        flex-direction: row; /* Keep elements side by side */
    }
    .key-rating {
        flex: 1 1 50%; /* Adjusts key-rating to take about 55% of the width */
        padding-right: 10px; /* Maintain padding for separation */
        min-width: 0; /* Helps in shrinking if needed */
        text-align: left; /* Align text to the left for better spacing */
    }
 
    .text-container {
        flex: 1 1 50%; /* Adjusts text container to take about 45% of the width */
        min-width: 0; /* Helps in shrinking if needed */
        padding: 10px 0; /* Padding for vertical alignment and spacing */
            }
}

@media (min-width: 1024px) {
  .progress-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create 4 equal columns */
    gap: 0px; /* Optional: adjust spacing between columns */
  }
  .rating-group {
    display: flex;
    align-items: center;
  }
}

.budget-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}

.budget-category {
width: calc(33.33% - 10px);
background-color: #f2f2f2;
padding: 10px;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 10px;
}

.category-title {
font-weight: bold;
margin-bottom: 5px;
}

h2 {
font-family: 'Poppins', sans-serif;
font-size: 25px;
color: #424141;
font-weight: 700;
text-align: left;
padding-bottom: 0px;
margin-top: 40px;
}

.expense-item {
margin-bottom: 5px;
}

.total-budget {
width: 100%;
background-color: #02C0CE;
color: white;
padding: 10px;
border-radius: 5px;
box-sizing: border-box;
margin-top: 10px;
}
.travel-tips{
margin-top: 20px;
}
.travel-tips h3, .what-to-expect-section h3 {
font-family: 'Poppins', sans-serif;
font-size: 20px;
color: #424141;
font-weight: 700;
text-align: left;
padding-top: 15px;
}

.faq-section details {
padding: 10px 0;
border-bottom: 1px solid lightgrey;
}
.faq-section details:last-child {
border-bottom: none;
}
.faq-section summary {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: normal;
color: #333;
cursor: pointer;
list-style: none;
padding-left: 10px;
display: flex;
align-items: center;
transition: color 0.3s;
}

.faq-section summary:hover,
.faq-section details[open] summary {
color: #02C0CE;
}

.faq-section summary span {
padding-left: 10px;
}

.faq-section summary::-webkit-details-marker {
display: none;
}

.faq-section summary:before {
content: '+ ';
font-size: 18px;
vertical-align: top;
line-height: 28px;
}

.faq-section details[open] summary:before {
content: '- ';
}

.faq-section p {
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #333;
padding: 5px 0 0 0;
margin: 0;
}

.faq-section p a {
color: #02C0CE;
text-decoration: none;
transition: color 0.3s;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}

.faq-section p a:hover {
color: #02C0CE;
}

.save-to-phone-table th, .save-to-phone-table td {
border: none !important;
padding: 8px;
text-align: left;
}
@media (max-width: 768px) {
.budget-category {
width: calc(50% - 10px);
}
}

@media (max-width: 480px) {
.budget-category {
width: 100%;
}
}

        .tab-container {
            width: 100%;
            position: relative;
        }

        .tabs {
            display: flex;
            overflow-x: auto;
            background-color: #f1f1f1;
            padding: 0;
            white-space: nowrap;
            border-bottom: 1px solid #ccc;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
        }

        .tabs::-webkit-scrollbar {
            display: none; /* Safari and Chrome */
        }

        .tab-links {
            background-color: #ddd;
            border: none;
            outline: none;
            padding: 14px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            flex: 1;
            text-align: center;
            color: black;
            font-size: 16px;
            position: relative;
            border-radius: 0;
            font-family: 'Poppins', sans-serif;
        }

        .tab-links:not(:last-child) {
            border-right: 1px solid white;
        }

        .tab-links:hover {
            background-color: #ccc;
        }

        .tab-links.active {
            background-color: white;
            color: #02C0CE;
            border-bottom: none;
        }

        .tab-links.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background-color: #02C0CE;
            width: 100%;
        }

        .tab-content {
            padding: 20px;
            background-color: white;
            display: none;
        }

        .tab-content h2 {
            font-family: 'Poppins', sans-serif;
            font-size: 30px;
            font-weight: 700;
            color: #000000;
            margin-top: 40px;
            line-height: 1.2;
        }

        .tab-content h3 {
            font-family: 'Poppins', sans-serif;
            font-size: 25px;
            font-weight: 700;
            color: #000000;
            margin-top: 30px;
            line-height: 1.2;
        }

        .tab-content p {
            font-family: 'Lato', sans-serif;
            font-size: 18px;
            color: #000000;
            line-height: 1.6;
        }

        @media (max-width: 600px) {
            .tabs {
                flex-wrap: nowrap;
            }

            .tab-links {
                flex: 0 0 auto;
            }

            .scroll-indicator {
                display: block;
            }
        }

        .scroll-indicator {
            display: none;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: #ccc;
        }

        .header {
            text-align: left;
            margin: 20px 0;
            max-width: 800px; /* Set max-width for the header */
            margin: 20px auto; /* Center the header */
        }

        .header h2 {
            font-size: 28px;
            font-weight: bold;
            line-height: 1.2;
        }

        .header p {
            font-size: 18px;
            text-align: left;
            margin: 10px auto;
            line-height: 1.5;
            max-width: 800px;
        }

        .toggle-container {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .toggle-button {
            background-color: #02C0CE;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            margin: 0 5px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .toggle-button.active {
            background-color: #0074fc;
        }

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

        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
            overflow: hidden;
            position: relative;
        }

        .card img {
            width: 100%;
            height: auto;
            border-bottom: 1px solid #ddd;
            max-height: 300px;
            object-fit: cover;
        }

        .type-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #FFFFFF;
            color: black;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: bold;
        }

        .card-content {
            padding: 10px;
            line-height: 1.0;
        }

        .stars-rating {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        .stars {
            color: #ffb400;
            font-size: 14px;
        }

        .rating {
            background-color: #0074fc;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: bold;
        }

        .title {
            font-size: 16px;
            font-weight: bold;
            margin: 5px 0;
        }

        .location {
            font-style: italic;
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }

        .price-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin: 10px 0;
        }

        .price {
            font-size: 24px;
            font-weight: bold;
            margin-left: 5px;
        }

        .price-note {
            font-size: 14px;
            color: #666;
        }

        .button {
            display: block;
            width: 100%;
            text-align: center;
            padding: 10px;
            background-color: #02C0CE;
            color: white !important;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
        }

        .footer-button {
            text-align: center;
            margin: 30px 0;
        }

        .footer-button a {
            display: inline-block;
            padding: 10px 20px;
            background-color: #0074fc;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
        }

        /* Mobile styles */
        @media (max-width: 768px) {
            .cards-container {
                flex-direction: column;
                align-items: center;
            }

            .card {
                width: 90%;
                margin-bottom: 20px;
            }
        }

        .content {
            text-align: left;
            margin: 20px 0;
        }

        .content h2 {
            font-size: 24px;
            font-weight: bold;
            line-height: 1.2;
        }

        .content p {
            font-size: 18px;
            text-align: left;
            margin: 10px auto;
            line-height: 1.6;
            max-width: 800px;
        }

        .map-container {
            text-align: left;
            margin: 20px 0;
        }

        .places-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .places-list div {
            width: 48%;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-top: 20px;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 2px solid #0074fc;
        }

        .places-list ul {
            list-style: none;
            padding-left: 0;
        }

        .places-list ul li {
            margin-bottom: 15px;
        }

        .place-title {
            font-weight: bold;
            color: #0074fc;
            display: block;
        }

        .place-description {
            margin-top: 5px;
            font-style: italic;
            color: #666;
        }

        @media (max-width: 768px) {
            .places-list {
                flex-direction: column;
                align-items: center;
            }

            .places-list div {
                width: 100%;
            }
        }

        .content {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.3;
            text-align: left;
            margin-bottom: 40px;
        }

        .timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: #0074fc;
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
        }

        .timeline-item {
            padding: 20px 40px;
            position: relative;
            background-color: inherit;
            width: 50%;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            background-color: #fff;
            border: 4px solid #0074fc;
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }

        .timeline-item.left {
            left: 0;
        }

        .timeline-item.right {
            left: 50%;
        }

        .timeline-item.left::after {
            right: -13px;
        }

        .timeline-item.right::after {
            left: -13px;
        }

        .timeline-item.left .date {
            padding: 5px 10px;
            background-color: #0074fc;
            color: #fff;
            position: absolute;
            top: 15px;
            right: -110px;
            z-index: 1;
        }

        .timeline-item.right .date {
            padding: 5px 10px;
            background-color: #0074fc;
            color: #fff;
            position: absolute;
            top: 15px;
            left: -110px;
            z-index: 1;
        }

        .timeline-item .title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #0074fc;
        }

        .timeline-item .description {
            margin-top: 5px;
            font-style: italic;
            color: #666;
            word-wrap: break-word;
        }

        .image-container img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            border: 2px solid #0074fc;
        }

        .image-container a {
            display: block;
        }

        @media (max-width: 768px) {
            .timeline::after {
                left: 10px;
            }

            .timeline-item {
                width: calc(100% - 40px); /* Ensures it fits within the viewport */
                padding-left: 20px;
                padding-right: 20px;
            }

            .timeline-item.left, .timeline-item.right {
                left: 0;
                padding-left: 30px;
                margin-top: 40px; /* Adjusted to add space between items */
            }

            .timeline-item.left .date, .timeline-item.right .date {
                left: 35px;
                right: auto;
            }

            .timeline-item::after {
                left: 10px;
            }

            .timeline-item.left::after {
                right: auto;
                left: -2px; /* Adjust circle position */
            }

            .timeline-item.right::after {
                left: -2px; /* Adjust circle position */
            }

            .timeline-item .title {
                margin-top: 50px; /* Add margin above title */
            }
        }

        .content {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 20px;
            color: #000000;
        }

        .section {
            margin-bottom: 40px;
        }

        .section h3 {
            font-size: 24px;
            font-weight: bold;
            color: #0074fc;
            margin-bottom: 15px;
        }

        .section p {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

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

        .section ul li {
            font-size: 18px;
            margin-bottom: 10px;
            line-height: 1.6;
            position: relative;
            padding-left: 25px;
        }

        .section ul li::before {
            content: "•";
            color: #02C0CE;
            font-size: 20px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .section a {
            color: #0074fc;
            text-decoration: none;
        }

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

        .map-container {
            text-align: center;
            margin: 40px 0;
        }

        .map-container iframe {
            width: 100%;
            max-width: 800px;
            height: 480px;
            border: none;
            border-radius: 10px;
        }

        .map-description {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
            text-align: center;
        }

        .content {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 40px;
        }

        .section {
            margin-bottom: 40px;
            padding: 20px;
            border-radius: 5px;
        }

        .section h3 {
            font-size: 24px;
            font-weight: bold;
            color: #0074fc;
            margin-bottom: 15px;
        }

        .section p {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

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

        .section ul li {
            font-size: 16px;
            margin-bottom: 10px;
            line-height: 1.5;
            position: relative;
            padding-left: 25px;
        }

        .section ul li::before {
            content: "•";
            color: #0074fc;
            font-size: 20px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .section a {
            color: #0074fc;
            text-decoration: none;
        }

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

        .section img {
            width: 100%;
            height: auto;
            max-height: 300px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .content {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 20px;
            color: #02C0CE;
        }

        .section {
            margin-bottom: 40px;
        }

        .section h3 {
            font-size: 24px;
            font-weight: bold;
            color: #0074fc;
            margin-bottom: 15px;
        }

        .section p {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

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

        .section ul li {
            font-size: 16px;
            margin-bottom: 10px;
            line-height: 1.5;
            position: relative;
            padding-left: 25px;
        }

        .section ul li::before {
            content: "•";
            color: #02C0CE;
            font-size: 20px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .section a {
            color: #0074fc;
            text-decoration: none;
        }

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

        .map-container {
            text-align: center;
            margin: 40px 0;
        }

        .map-container iframe {
            width: 100%;
            max-width: 800px;
            height: 480px;
            border: none;
            border-radius: 10px;
        }

        .map-description {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
            text-align: center;
        }

        .content {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 20px;
            color: #000000;
            text-align: left;
        }

        .section {
            margin-bottom: 40px;
        }

        .section h3 {
            font-size: 24px;
            font-weight: bold;
            color: #0074fc;
            margin-bottom: 15px;
        }

        .section p {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .section-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }

        .section-content {
            flex: 1 1 calc(50% - 20px);
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .section-content h4 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #02C0CE;
        }

        .section-content p {
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .section-content a {
            color: #0074fc;
            text-decoration: none;
        }

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

        hr {
            border: none;
            border-top: 1px solid #ddd;
            margin: 20px 0;
        }

        @media (max-width: 768px) {
            .section-content {
                flex: 1 1 100%;
            }

            .section-content h4 {
                font-size: 18px;
            }

            .section-content p {
                font-size: 14px;
            }

            .section p {
                font-size: 16px;
            }
        }

        .carousel {
            position: relative;
            width: 50%; /* Make the carousel fit the width of the screen */
            max-height: 400px; /* Max height for the carousel */
            overflow: hidden;
            border: 2px solid #ddd;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .carousel img {
            width: 100%;
            height: 100%;
            max-height: 400px; /* Ensure images don't exceed the max height */
            object-fit: cover; /* Ensure images cover the container while maintaining aspect ratio */
            display: none;
        }

        .carousel img.active {
            display: block;
        }

        .carousel .nav {
            position: absolute;
            top: 50%;
            width: 40px;
            height: 40px;
            margin-top: -20px; /* Center the nav buttons */
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 30px;
            cursor: pointer;
            outline: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .carousel .prev {
            left: 10px;
        }

        .carousel .next {
            right: 10px;
        }

        .carousel .nav:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* Media queries for mobile optimization */
        @media (max-width: 768px) {
            .carousel {
                max-height: 300px; /* Reduce max height for smaller screens */
                 width: 100%;
            }

            .carousel img {
                max-height: 300px; /* Ensure images don't exceed the max height on smaller screens */
            }

            .carousel .nav {
                width: 30px;
                height: 30px;
                font-size: 20px;
            }
        }

        @media (max-width: 480px) {
            .carousel {
                max-height: 150px; /* Further reduce max height for very small screens */
            }

            .carousel img {
                max-height: 150px; /* Ensure images don't exceed the max height on very small screens */
            }

            .carousel .nav {
                width: 25px;
                height: 25px;
                font-size: 18px;
            }
        }
    /* Button Styles */
.footer-button {
    text-align: center;
    margin: 30px 0;
}

.footer-button button,
.footer-button a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0074fc;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 5px; /* Add margin to separate the buttons */
}

.footer-button button.view-map {
    background-color: white;
    color: #0074fc;
    border: 2px solid #0074fc;
}

.footer-button button.view-map:hover {
    background-color: #0074fc;
    color: white;
}

.footer-button button:hover,
.footer-button a:hover {
    background-color: #005bb5;
}

.footer-button button {
    border: none; /* Remove border from button */
    cursor: pointer; /* Add cursor pointer for button */
}
.wf-features-second {
display: flex;
/* Align feature spans in a row */
flex-wrap: wrap;
/* Allow wrapping if necessary */
align-items: center;
/* Center items vertically */
}

.wf-features-second span {
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 8px;
margin-bottom: 5px;
}

/* Arrow styles */
.tab-nav {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8); /* Faded white background */
    color: black; /* Change icon color to black for better visibility */
    border: none;
    border-radius: 0; /* Remove border-radius to make it a rectangle */
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    width: 40px; /* Adjust width to fit the icon */
    justify-content: center;
    align-items: center;
}

.tab-nav.left {
    left: 0;
}

.tab-nav.right {
    right: 0;
}

@media (min-width: 1024px) {
    .tab-nav.show {
        display: flex;
    }
}
.guarantee-container {
            max-width: 800px;
            padding: 0px;
            border: 0px solid #02C;
            border-radius: 10px;
            background-color: #ffffff;
            text-align: left;
                  }
        .guarantee-header {
            font-size: 26px;
            font-weight: bold;
            color: #2980b9;
            margin-bottom: 20px;
        }
        .guarantee-subheader {
            font-size: 20px;
            color: #555;
            margin-bottom: 20px;
        }
        .guarantee-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .guarantee-list li {
            font-size: 18px;
            margin: 15px 0;
            padding-left: 30px;
            position: relative;
        }
        .guarantee-list li:before {
            content: '✓';
            color: #27ae60;
            font-size: 24px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
      .neighborhood-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 100%;
            max-width: 1200px;
        }
      .neighborhood {
            position: relative;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
            width: 30%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin: 10px 0;
        }
        .neighborhood img {
            width: 100%;
            height: auto;
        }
        .neighborhood-content {
            padding: 20px;
        }
        .neighborhood h2 {
            font-size: 24px;
            margin-top: 0;
            color: #333;
        }
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tags span {
            background-color: #eee;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
        }
        .discover-button {
            display: inline-block;
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #0275d8;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            width: 100%;
            text-align: center;
            padding: 10px;
            background-color: #02C0CE;
            color: white !important;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
        }
        }
        .discover-button:hover {
            background-color: #025aa5;
        }
        @media (max-width: 768px) {
            .neighborhood {
                width: 48%;
            }
        }
        @media (max-width: 480px) {
            .neighborhood {
                width: 100%;
            }
        }
.tab-content .cta-container {
    text-align: center; /* Centers the button container */
    margin-top: 30px;
    margin-bottom: 30px;
}

.tab-content .cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #FFFFFF;
     font-family: 'Poppins', sans-serif;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.tab-content .cta-button:hover {
    background-color: #02C0CE;
    color: #FFFFFF; /* Ensures the font color stays white on hover */
}
.tab-navigation {
    display: flex;
    justify-content: center;
    gap: 10px; /* Adds space between the buttons */
    margin-top: 20px;
}

.nav-button {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 10px 15px;
    background-color: #FFFFFF;
    color: #000000 !important; /* Text color set to black */
    text-align: center;
    border-radius: 5px;
    text-decoration: underline !important; /* Underline the text */
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2) !important; /* Clearer shadow */
    transition: background-color 0.3s, color 0.3s;
    width: 150px; /* Fixed width to ensure equal sizes */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

.nav-button:hover {
    background-color: #F0F0F0; /* Slightly darker shade on hover */
    color: #000000; /* Ensure text color stays black on hover */
}

.nav-button:active {
    background-color: #E0E0E0; /* Slightly darker shade on active */
    color: #000000; /* Ensure text color stays black on active */
}

@media (max-width: 768px) {
    /* Existing mobile-specific styles */
    
    /* New mobile-specific styles for the tab arrows */
    .tab-nav {
        display: none;
    }

    .tab-nav.show {
        display: flex;
    }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-ab8faac *//* Progress Bar Styles */
.progress-bar {
  width: 100%;
  background-color: #f2f2f2;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill {
  height: 20px;
  background-color: #02C0CE;
  border-radius: 10px;
  width: 49%; /* Adjust dynamically based on progress */
  transition: width 0.3s ease; /* Smooth transition */
}

.step-tracker {
  text-align: center;
  font-size: 14px;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #555;
}

.step-number {
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #000000;
}

.step-description {
  font-size: 15px;
  font-weight: 400;
  color: #333;
}

/* Text Links Styles */
.text-links {
  text-align: center;
  margin-bottom: 10px;
}

.text-links a {
  font-size: 14px;
  text-decoration: none;
  color: #02C0CE;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.text-links a.destinations {
  font-weight: bold;
  color: #FFFFFF;
  background-color: #02C0CE;
  padding: 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.text-links a.destinations:hover {
  background-color: #007C8A;
  color: #FFF;
}

/* Mobile Styles */
@media (max-width: 600px) {
  .text-links a {
    display: block;
    margin-bottom: 10px;
  }
}

/* Media query for mobile devices */
@media (max-width: 600px) {
  .progress-bar-fill {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .progress-container {
    border-bottom: none; /* Remove border on mobile */
  }
  .rating-group {
    flex-basis: 100%; /* Full width for mobile */
    margin-right: 0; /* No margin on mobile */
    flex-direction: row; /* Keep elements side by side */
  }
  .key-rating {
    flex: 1 1 50%; /* Adjusts key-rating to take about 55% of the width */
    padding-right: 10px; /* Maintain padding for separation */
    min-width: 0; /* Helps in shrinking if needed */
    text-align: left; /* Align text to the left for better spacing */
  }

  .text-container {
    flex: 1 1 50%; /* Adjusts text container to take about 45% of the width */
    min-width: 0; /* Helps in shrinking if needed */
    padding: 10px 0; /* Padding for vertical alignment and spacing */
  }
}

@media (min-width: 1024px) {
  .progress-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create 4 equal columns */
    gap: 0px; /* Optional: adjust spacing between columns */
  }
  .rating-group {
    display: flex;
    align-items: center;
  }
}    
    
    
  
  
  
  /* Header Image Section Styles */
.workation-section {
    background-size: cover; /* Cover the area of the section */
    background-position: center center; /* Center the background image */
    background-attachment: scroll; /* The background scrolls with the page */
    background-repeat: no-repeat; /* Do not repeat the image */
    width: 100%;
    height: 250px; /* Adjusted for better image display */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative; /* Added for positioning */
    overflow: hidden; /* Ensure no overflow */
  }
  .workation-section h1, .workation-section p {
    z-index: 2; /* Ensure text is above any overlay */
    position: relative; /* Ensure proper stacking */
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for better text visibility */
    z-index: 1; /* Below the text */
  }
  .workation-section h1 {
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: 700;
    margin: 0;
    padding: 0 20px; /* Ensure text doesn't touch edges */
  }
  .workation-section p {
    font-family: 'Poppins', sans-serif;
    color: #FFFFFF;
    font-size: 21px;
    font-weight: 500;
    margin: 10px 0 0 0;
    padding: 0 20px; /* Ensure text doesn't touch edges */
  }  


  
  



 /* Breadcrumb Styles */
 .breadcrumb {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
                  font-size: 16px;
            
              }

        .breadcrumb li {
            display: flex;
            align-items: center;
        }

        .breadcrumb li+li:before {
            content: ">";
            padding: 0 8px;
            color: #6c757d;
        }

        .breadcrumb a {
            text-decoration: none;
            color: #007bff;
        }

        .breadcrumb a:hover {
            text-decoration: underline;
        }

    
    
    
    
    
    
/* Main Content Styles */    
.title {
font-size: 20px;
font-weight: 700;
color: #000000;
margin-bottom: 5px;
}

.subtitle {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}

.features-first,
.features-second {
font-size: 14px;
color: #666;
margin-bottom: 10px;
}

.features-first span {
display: inline-block;
margin-right: 5px;
}

.features-second span {
display: inline-block;
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 8px;
margin-bottom: 5px;
}

.cost {
font-size: 14px;
color: #333;
margin-bottom: 10px;
}

.description {
font-size: 14px;
color: #333;
margin-bottom: 10px;
border-top: 1.5px solid #DEDEDE;
padding-top: 10px;
}

.buttons.learnmore {
display: flex;
flex-direction: column;
gap: 10px;
}

.learnmore .btn {
text-align: center;
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #02C0CE;
color: #FFFFFF !important;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
width: 100%;
}

.learnmore .btn:hover {
background-color: #FFFFFF;
color: #02C0CE !important;
}

.learnmore .btn-secondary {
text-align: center;
border-color: #02C0CE;
background-color: #FFFFFF !important;
color: #02C0CE !important;
}

.learnmore .btn-secondary:hover {
background-color: #02C0CE !important;
color: #FFFFFF !important;
}

.section-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
border-bottom: 1px solid #ccc;
margin-bottom: 25px;
padding-bottom: 25px;
}

.ydestin .section-inner {
margin-bottom: 6px;
padding-bottom: 6px;
border: none;
}

.section-inner .rounded-corners {
width: 100%;
border-radius: 10px;
overflow: hidden;
position: relative;
margin-bottom: 0px;
}

/* Center the button */
.button-destinations-container {
text-align: center;
padding: 10px;
font-family: 'Poppins', sans-serif;
}

/* Button style */
.button-destinations-container .button-more-destinationss {
font-size: 16px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #02C0CE;
color: #FFFFFF;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
display: block;
width: 100%;
margin-bottom: 60px;
}

/* Hover effect */
.button-destinations-container .button-more-destinationss:hover {
background-color: #FFFFFF;
color: #02C0CE;
}

.wf-features-second {
display: flex;
/* Align feature spans in a row */
flex-wrap: wrap;
/* Allow wrapping if necessary */
align-items: center;
/* Center items vertically */
}

.wf-features-second span {
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 8px;
margin-bottom: 5px;
}

.wf-button-container {
display: flex;
align-items: center;
margin-left: 10px;
}

.wf-button {
padding: 5px 40px;
color: #4CAF50;
border: 2px solid #4CAF50;
/* Corrected syntax */
border-radius: 20px;
width: 40px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}

.progress-bar {
width: 100%;
background-color: #f2f2f2;
border-radius: 10px;
margin-bottom: 20px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill {
height: 20px;
background-color: #02C0CE;
border-radius: 10px;
width: 14%;
/* Adjust dynamically based on progress */
transition: width 0.3s ease;
/* Smooth transition */
}

.step-tracker {
text-align: center;
font-size: 14px;
margin-top: 40px;
margin-bottom: 20px;
color: #555;
}

.step-number {
font-family: 'Poppins', sans-serif;
font-size: 15px;
font-weight: 700;
color: #000000;
}

.step-description {
font-size: 15px;
font-weight: 400;
color: #333;
}

/* Desktop styles */
.text-links {
text-align: center;
margin-bottom: 10px;
}

.text-links a {
font-size: 14px;
text-decoration: none;
color: #02C0CE;
margin: 0 5px;
transition: all 0.3s ease;
}

.text-links a.destinations {
font-weight: bold;
color: #FFFFFF;
background-color: #02C0CE;
padding: 10px;
border-radius: 5px;
transition: all 0.3s ease;
}

.text-links a.destinations:hover {
background-color: #007C8A;
color: #FFF;
}

.gap-top {
margin-top: 40px;
}

.titel-section h2 {
  display: inline-block;
  width: 100%;
  margin-top: 70px; /* Add 30px to the existing top margin */
}


.looking-section {
margin-bottom: 20px;
}

/* .ydestin {
display: none;
} */

/* Styles for table */
.travel-tips-section table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
/* Add space between table and other content */
max-width: none;
/* Set maximum width */
border-radius: 10px;
/* Add rounded edges */
overflow: hidden;
/* Ensure rounded edges are applied */
}

.travel-tips-section th,
.travel-tips-section td {
text-align: left;
background-color: #ffffff;
padding: 10px;
line-height: 1.5;
}

.travel-tips-section th {
width: 50%;
/* Equal width for both columns */
font-weight: bold;
}

.travel-tips-section td {
width: 50%;
/* Equal width for both columns */
}

/* Alternative row background color */
.travel-tips-section tr:nth-child(even) {
background-color: #f9f9f9;
}

/* Remove table borders */
.travel-tips-section th,
.travel-tips-section td {
border: none;
}

.pros-cons-table {
width: 100%;
border-collapse: collapse;
background-color: #FFFFFF;
font-size: 16px;
border-radius: 10px;
overflow-x: auto;
border: none !important;
margin-bottom: 20px;
}

.pros-cons-table th {
background-color: #FFFFFF;
color: black;
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-size: 18px;
}

.pros-cons-table th,
.pros-cons-table td {
border: none !important;
padding: 8px;
text-align: left;
font-family: 'Poppins', sans-serif;
}

.hidden-rows {
display: none;
}

#showMoreBtn {
display: block;
margin: 0 auto;
}
#showMoreBtn1 {
display: block;
margin: 0 auto;
}

#showMoreBtn2 {
display: block;
margin: 0 auto;
}

.label {
position: absolute;
top: 30px;
left: 0px;
background-color: #02C0CE;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 500;
padding: 10px;
}

.label::after {
content: '';
position: absolute;
top: 0;
left: 100%;
width: 20px;
height: 100%;
background-color: #02C0CE;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

.dropdown-button, #showMoreBtn {
padding: 10px 20px;
margin: 0px 15px 20px;
background-color: #02C0CE;
color: #FFFFFF !important;
cursor: pointer;
border: 1px solid #02C0CE;
border-radius: 5px;
font-size: 16px;
display: inline-block;
}
.dropdown-button1, #showMoreBtn1 {
padding: 10px 20px;
margin: 0px 15px 20px;
background-color: #02C0CE;
color: #FFFFFF !important;
cursor: pointer;
border: 1px solid #02C0CE;
border-radius: 5px;
font-size: 16px;
display: inline-block;
}

.dropdown-button2, #showMoreBtn2 {
padding: 10px 20px;
margin: 0px 15px 20px;
background-color: #02C0CE;
color: #FFFFFF !important;
cursor: pointer;
border: 1px solid #02C0CE;
border-radius: 5px;
font-size: 16px;
display: inline-block;
}


.dropdown-section {
display: none;
}

.dropdown-section.show {
display: block;
}
.save-to-phone-table td {
width: 325px;
}
.dropdown-button:hover, #showMoreBtn:hover {
background-color: #FFFFFF;
border-color: #02C0CE;
color: #02C0CE !important;
}
.footer-heading h2 {
color: #fff;
}
.dropdown-button1:hover, #showMoreBtn1:hover {
background-color: #FFFFFF;
border-color: #02C0CE;
color: #02C0CE !important;
}
.dropdown-button:hover, #showMoreBtn2:hover {
background-color: #FFFFFF;
border-color: #02C0CE;
color: #02C0CE !important;

}

.section-inner .rounded-corners img {
border-radius: 10px;
}
.button-container .button-readyto {
position: relative;
text-align: left;
padding-left: 0;
border: none;
margin-top: 30px;
}
.dropdown-text {
font-family: 'Lato', sans-serif;
font-size: 15px;
font-weight: 700;
color: #54595F;
cursor: pointer;
user-select: none;
}
@media only screen and (min-width: 769px) {
.save-to-phone-table td {
width: 325px;
}
}
@media only screen and (min-width: 768px) {
.button-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
padding: 20px 10px 20px;
border-top: 1px solid #ccc;
z-index: 999;
text-align: center;
font-family: 'Poppins', sans-serif;
}
.pros-cons-table td {
width: 325px;
}

.hidden-rows {
width: 650px;
}
}

/* Styles for testimonial slider */
.testimonial-slider {
width: 100%;
overflow: hidden;
position: relative;
padding-top: 40px;
padding-bottom: 20px;
}

.testimonial-slider .testimonial-slide {
display: none;
position: relative;
text-align: left;
/* Center text within the slide */
}

.testimonial-slider .testimonial-slide.active {
display: flex;
flex-direction: column;
align-items: center;
/* Center align items vertically */
}

.testimonial-slider .testimonial-text {
font-family: 'Poppins', sans-serif;
font-size: 16px;
color: #000;
font-weight: 400;
/* Normal font weight for paragraph */
margin-bottom: 10px;
}

.testimonial-slider .testimonial-text p {
color: #666;
line-height: 1.6;
}

.testimonial-slider .testimonial-author {
display: flex;
align-items: center;
/* Center align items horizontally */
margin-bottom: 10px;
}

.testimonial-slider .author-image {
border-radius: 50%;
width: 50px;
height: 50px;
margin-right: 10px;
/* Add space between the image and the name */
}

.testimonial-slider .author-name {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: bold;
color: #333;
}

.testimonial-slider .testimonial-controls-bottom {
display: flex;
justify-content: center;
margin-top: 0px;
}

.testimonial-slider .testimonial-control {
cursor: pointer;
padding: 5px;
background-color: rgba(255, 255, 255, 0.5);
border: none;
outline: none;
transition: background-color 0.3s;
font-size: 50px;
line-height: 1;
color: #000;
}
.button-container .button-next-step {
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #02C0CE;
color: #FFFFFF;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
margin-right: 10px;
display: inline-block;
}
.button-container .button-skip-step {
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #FFFFFF;
color: #02C0CE;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
margin-right: 10px;
display: inline-block;
}
.button-container .button-next-step:hover {
background-color: #FFFFFF;
color: #02C0CE;
}
.button-container .button-skip-step:hover {
background-color: #02C0CE;
color: #FFFFFF;
}
.testimonial-slider .testimonial-control:hover {
background-color: #02C0CE;
}
.dropdown-content {
display: none;
}
.dropdown.active .dropdown-content {
display: block;
}
.weather-chart {
  display: flex;
  justify-content: center; /* Center align the items on larger screens */
  align-items: center;
  width: 100%;
  overflow-x: auto; /* Allows horizontal scrolling if needed */
  margin: 20px auto;
  background-color: #fff;
  padding: 0;
  border-radius: 0;
  position: relative;
}

.weather-chart::before {
  content: "";
  position: absolute;
  top: 15%; /* Position the line at the top 15% of the chart */
  left: 20px;
  right: 30px; /* Leave space for the emoji */
  border-top: 2px dashed #D3D3D3; /* Striped (dashed) line style */
  z-index: 1;
}

.weather-chart::after {
  content: "🥵"; /* Emoji as content */
  position: absolute;
  top: 15%;
  right: 10px; /* Position emoji to the right */
  font-size: 18px; /* Adjust size as needed */
  color: #FAFAFA; /* Adjust color to match your design */
  z-index: 2;
}

.month {
  width: 40px; /* Revert to the original width */
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 300px;
}

.bar {
  position: absolute;
  width: 100%;
  background: #FAFAFA; /* Existing background color, could be removed if entire bar uses new color */
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Ensures the pseudo-element does not extend outside the bar */
  z-index: 1; /* Establishes a new stacking context */
}

.bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45%; /* Height of the new color area */
  background-color: #ADD8E6; /* New color */
  border-radius: 0 0 5px 5px; /* Continue the bar's border-radius at the bottom */
  z-index: -1; /* Ensures this layer is behind the text and icons */
}

.temperature {
  color: #000000;
  text-align: center;
  font-family: 'Poppins', sans-serif; /* Set the font family to Poppins */
  font-size: 14px;
  font-weight: 500; /* Set the font weight to 500 */
  margin: 2px 0; /* Spacing for readability */
  z-index: 2; /* Ensures text and icons are on top */
}

.precipitation {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFFFFF;
  font-size: 14px;
  font-family: 'Poppins', sans-serif; /* Set the font family to Poppins */
  font-weight: 500; /* Set the font weight to 500 */
  z-index: 2; /* Ensures text and icons are on top */
}

.month-name {
  position: absolute;
  font-family: 'Poppins', sans-serif; /* Set the font family to Poppins */
  font-size: 12px;
  font-weight: 500; /* Set the font weight to 500 */
  bottom: 10px; /* Adjusted for visibility */
  width: 100%;
  text-align: center;
}

.rainy-days {
  padding-left: 20px; /* Adds 5px padding to the left */
  max-width: 800px;
}

.title-section {
  max-width: 800px;
}

.highlight {
  border: 2px solid #02C0CE; /* Teal border */
  padding: 2px 6px; /* Adds padding around the text */
  border-radius: 4px; /* Rounds the corners */
  display: inline-block; /* Ensures the border wraps the text correctly */
}

/* Toggle Switch Styling */
.toggle-switch {
  text-align: center;
  margin: 20px auto;
  display: flex;
  justify-content: center;
}

.toggle-switch button {
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  outline: none; /* Removes the focus outline to clean up the appearance */
}

/* General Toggle Buttons */
.toggle-switch button {
  border-radius: 20px; /* Rounded corners */
}

.toggle-switch button.active {
  background-color: #02C0CE;
  color: #FFFFFF;
}

.toggle-switch button:not(.active) {
  background-color: #FFFFFF;
  color: #02C0CE;
}

/* Section 5 Toggle Buttons Specific Styles */
#fahrenheitBtn {
  border-radius: 20px 0 0 20px; /* Rounded left corners, straight right corners */
}

#celsiusBtn {
  border-radius: 0 20px 20px 0; /* Rounded right corners, straight left corners */
}

/* Section 6 Toggle Buttons Specific Styles */
#fahrenheitBtn2 {
  border-radius: 20px 0 0 20px; /* Rounded left corners, straight right corners */
}

#celsiusBtn2 {
  border-radius: 0 20px 20px 0; /* Rounded right corners, straight left corners */
}

/* Mobile styles */
@media only screen and (max-width: 600px) {
  .text-links a {
    display: block;
    margin-bottom: 10px;
  }
}

/* Media query for mobile devices */
@media (max-width: 600px) {
  .weather-chart {
    justify-content: flex-start; /* Align items to start on smaller screens for horizontal scrolling */
  }

  .month {
    flex: 0 0 80px; /* Fixed width on mobile to ensure consistency and prevent shrinking */
  }
}


@media (max-width: 768px) {

/* Adjust button width for mobile */
.button-destinations-container .button-more-destinations {
width: 100%;
}
.button-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
padding: 0px;
border-top: 1px solid #ccc;
z-index: 999;
text-align: center;
font-family: 'Poppins', sans-serif;
}
.button-container .button-next-step, .button-container .button-skip-step {
font-size: 14px;
font-weight: 600;
padding: 10px 20px;
border: 2px solid #02C0CE;
background-color: #02C0CE;
color: #FFFFFF;
border-radius: 5px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
margin: 10px auto;
display: block;
width: calc(100% - 20px);
}
.button-container .button-skip-step {
background-color: #FFFFFF;
color: #02C0CE;
border: 2px solid #02C0CE;
}
}

@media (max-width: 767px) {
.section-inner {
grid-template-columns: 1fr;
gap: 20px;
}

.custom-container,
.second-section {
padding: 0px 10px;
}
}
@media only screen and (min-width: 769px) {
.save-to-phone-table td {
width: 325px;
}

div .btn-download.hide-on-desktop {
display: none !important;
}
}


.progress-container {
    display: flex;
    flex-wrap: wrap; /* Enable wrapping of items */
    width: 100%;
    align-items: center; /* Ensure items are aligned centrally vertically */
    border-bottom: 1px solid #F5F5F5; /* Light grey horizontal line */
    padding: 5px 0; /* Adjusted padding to add space above and below the progress bar */
  }
  .rating-group {
    display: flex;
    flex-basis: 49%; /* Each group takes 50% width, adjusted for margin */
    align-items: center;
    margin-right: 10px; /* Adds space between the two groups */
  }
  .rating-group:last-child {
    margin-right: 0; /* Removes margin from the last group to maintain alignment */
  }
  .key-rating, .progress-bar {
    flex: 1; /* Allow each child to grow */
    display: flex;
    align-items: center; /* Center the text vertically */
    justify-content: flex-start; /* Start alignment for content */
  }
  .key-rating {
    padding-right: 10px; /* Spacing before the progress bar */
    text-align: left; /* Align text to the left */
    font-size: 16px; /* Adjust font size */
    font-weight: bold; /* Make text bold */
  }
  .progress-bar {
    height: 30px;
    border-radius: 20px;
    background-color: #F5F5F5; /* Light grey background for the unfilled part */
    position: relative; /* Allows absolute positioning inside */
  }
  .fill {
    height: 100%;
    position: absolute;
    left: 0;
    text-align: left;
    padding-left: 10px;
    color: white;
    line-height: 30px;
    font-weight: bold;
  }
  .bad, .okay, .good, .great {
    border-radius: 20px 0 0 20px; /* Rounded left, sharp right */
  }
  .bad { 
    background-color: #FF4742;
    width: 30%;
  }
  .okay {
    background-color: #FFC924;
    color: black; /* Better contrast for readability */
    width: 50%;
  }
  .good {
    background-color: #3399ff;
    width: 75%;
  }
  .great {
    background-color: #2BDE73;
    border-radius: 20px; /* Fully rounded */
    width: 100%;
  }
  .text-link {
    flex: 1; /* Take full space within the rating group */
    text-align: left; /* Align text to the left */
    padding: 10px 0; /* Padding for better touch target on mobile */
    background-color: #F5F5F5; /* Background to distinguish area if desired */
    border-radius: 20px; /* Optional rounded corners */
    display: flex;
    align-items: center; /* Center text vertically */
    justify-content: flex-start; /* Align text to the start */
}
.text-link a {
    text-decoration: none; /* Remove underline from links */
    color: #000000; /* Set text color */
    font-weight: bold; /* Make text bold */
}
.text-container {
    flex: 1; /* Take full space within the rating group */
    padding: 10px; /* Padding for spacing around the text */
    background-color: #FFFFFF; /* Set background to white, or remove if you prefer no background */
    border-radius: 0px; /* Rounded corners for aesthetics */
    display: flex;
    align-items: center; /* Center text vertically */
    justify-content: Flex-end; /* Center text horizontally for better focus */
    margin-left: 0px; /* Space from the key-rating */
    text-align: right;
}

.text-container a {
    text-decoration: underline; /* Remove underline from links */
    color: #000000; /* Set text color */
    font-weight: bold; /* Make text bold */
}

.text-container .plain-text {
    color: #000000; /* Color for plain text, ensuring readability */
    padding: 0px 0; /* Consistent padding with links for alignment */
}


  @media (max-width: 768px) {
    .progress-container {
        border-bottom: none; /* Remove border on mobile */
    }
    .rating-group {
        flex-basis: 100%; /* Full width for mobile */
        margin-right: 0; /* No margin on mobile */
        flex-direction: row; /* Keep elements side by side */
    }
    .key-rating {
        flex: 1 1 50%; /* Adjusts key-rating to take about 55% of the width */
        padding-right: 10px; /* Maintain padding for separation */
        min-width: 0; /* Helps in shrinking if needed */
        text-align: left; /* Align text to the left for better spacing */
    }
 
    .text-container {
        flex: 1 1 50%; /* Adjusts text container to take about 45% of the width */
        min-width: 0; /* Helps in shrinking if needed */
        padding: 10px 0; /* Padding for vertical alignment and spacing */
            }
}

@media (min-width: 1024px) {
  .progress-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create 4 equal columns */
    gap: 0px; /* Optional: adjust spacing between columns */
  }
  .rating-group {
    display: flex;
    align-items: center;
  }
}

.budget-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
}

.budget-category {
width: calc(33.33% - 10px);
background-color: #f2f2f2;
padding: 10px;
border-radius: 5px;
box-sizing: border-box;
margin-bottom: 10px;
}

.category-title {
font-weight: bold;
margin-bottom: 5px;
}

h2 {
font-family: 'Poppins', sans-serif;
font-size: 25px;
color: #424141;
font-weight: 700;
text-align: left;
padding-bottom: 0px;
margin-top: 40px;
}

.expense-item {
margin-bottom: 5px;
}

.total-budget {
width: 100%;
background-color: #02C0CE;
color: white;
padding: 10px;
border-radius: 5px;
box-sizing: border-box;
margin-top: 10px;
}
.travel-tips{
margin-top: 20px;
}
.travel-tips h3, .what-to-expect-section h3 {
font-family: 'Poppins', sans-serif;
font-size: 20px;
color: #424141;
font-weight: 700;
text-align: left;
padding-top: 15px;
}

.faq-section details {
padding: 10px 0;
border-bottom: 1px solid lightgrey;
}
.faq-section details:last-child {
border-bottom: none;
}
.faq-section summary {
font-family: 'Poppins', sans-serif;
font-size: 18px;
font-weight: normal;
color: #333;
cursor: pointer;
list-style: none;
padding-left: 10px;
display: flex;
align-items: center;
transition: color 0.3s;
}

.faq-section summary:hover,
.faq-section details[open] summary {
color: #02C0CE;
}

.faq-section summary span {
padding-left: 10px;
}

.faq-section summary::-webkit-details-marker {
display: none;
}

.faq-section summary:before {
content: '+ ';
font-size: 18px;
vertical-align: top;
line-height: 28px;
}

.faq-section details[open] summary:before {
content: '- ';
}

.faq-section p {
font-family: 'Lato', sans-serif;
font-size: 18px;
color: #333;
padding: 5px 0 0 0;
margin: 0;
}

.faq-section p a {
color: #02C0CE;
text-decoration: none;
transition: color 0.3s;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}

.faq-section p a:hover {
color: #02C0CE;
}

.save-to-phone-table th, .save-to-phone-table td {
border: none !important;
padding: 8px;
text-align: left;
}
@media (max-width: 768px) {
.budget-category {
width: calc(50% - 10px);
}
}

@media (max-width: 480px) {
.budget-category {
width: 100%;
}
}

        .tab-container {
            width: 100%;
            position: relative;
        }

        .tabs {
            display: flex;
            overflow-x: auto;
            background-color: #f1f1f1;
            padding: 0;
            white-space: nowrap;
            border-bottom: 1px solid #ccc;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* Internet Explorer 10+ */
        }

        .tabs::-webkit-scrollbar {
            display: none; /* Safari and Chrome */
        }

        .tab-links {
            background-color: #ddd;
            border: none;
            outline: none;
            padding: 14px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            flex: 1;
            text-align: center;
            color: black;
            font-size: 16px;
            position: relative;
            border-radius: 0;
            font-family: 'Poppins', sans-serif;
        }

        .tab-links:not(:last-child) {
            border-right: 1px solid white;
        }

        .tab-links:hover {
            background-color: #ccc;
        }

        .tab-links.active {
            background-color: white;
            color: #02C0CE;
            border-bottom: none;
        }

        .tab-links.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background-color: #02C0CE;
            width: 100%;
        }

        .tab-content {
            padding: 20px;
            background-color: white;
            display: none;
        }

        .tab-content h2 {
            font-family: 'Poppins', sans-serif;
            font-size: 30px;
            font-weight: 700;
            color: #000000;
            margin-top: 40px;
            line-height: 1.2;
        }

        .tab-content h3 {
            font-family: 'Poppins', sans-serif;
            font-size: 25px;
            font-weight: 700;
            color: #000000;
            margin-top: 30px;
            line-height: 1.2;
        }

        .tab-content p {
            font-family: 'Lato', sans-serif;
            font-size: 18px;
            color: #000000;
            line-height: 1.6;
        }

        @media (max-width: 600px) {
            .tabs {
                flex-wrap: nowrap;
            }

            .tab-links {
                flex: 0 0 auto;
            }

            .scroll-indicator {
                display: block;
            }
        }

        .scroll-indicator {
            display: none;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: #ccc;
        }

        .header {
            text-align: left;
            margin: 20px 0;
            max-width: 800px; /* Set max-width for the header */
            margin: 20px auto; /* Center the header */
        }

        .header h2 {
            font-size: 28px;
            font-weight: bold;
            line-height: 1.2;
        }

        .header p {
            font-size: 18px;
            text-align: left;
            margin: 10px auto;
            line-height: 1.5;
            max-width: 800px;
        }

        .toggle-container {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .toggle-button {
            background-color: #02C0CE;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 16px;
            margin: 0 5px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .toggle-button.active {
            background-color: #0074fc;
        }

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

        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 300px;
            overflow: hidden;
            position: relative;
        }

        .card img {
            width: 100%;
            height: auto;
            border-bottom: 1px solid #ddd;
            max-height: 300px;
            object-fit: cover;
        }

        .type-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: #FFFFFF;
            color: black;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: bold;
        }

        .card-content {
            padding: 10px;
            line-height: 1.0;
        }

        .stars-rating {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 5px;
        }

        .stars {
            color: #ffb400;
            font-size: 14px;
        }

        .rating {
            background-color: #0074fc;
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 14px;
            font-weight: bold;
        }

        .title {
            font-size: 16px;
            font-weight: bold;
            margin: 5px 0;
        }

        .location {
            font-style: italic;
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }

        .price-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin: 10px 0;
        }

        .price {
            font-size: 24px;
            font-weight: bold;
            margin-left: 5px;
        }

        .price-note {
            font-size: 14px;
            color: #666;
        }

        .button {
            display: block;
            width: 100%;
            text-align: center;
            padding: 10px;
            background-color: #02C0CE;
            color: white !important;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
        }

        .footer-button {
            text-align: center;
            margin: 30px 0;
        }

        .footer-button a {
            display: inline-block;
            padding: 10px 20px;
            background-color: #0074fc;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
        }

        /* Mobile styles */
        @media (max-width: 768px) {
            .cards-container {
                flex-direction: column;
                align-items: center;
            }

            .card {
                width: 90%;
                margin-bottom: 20px;
            }
        }

        .content {
            text-align: left;
            margin: 20px 0;
        }

        .content h2 {
            font-size: 24px;
            font-weight: bold;
            line-height: 1.2;
        }

        .content p {
            font-size: 18px;
            text-align: left;
            margin: 10px auto;
            line-height: 1.6;
            max-width: 800px;
        }

        .map-container {
            text-align: left;
            margin: 20px 0;
        }

        .places-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .places-list div {
            width: 48%;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin-top: 20px;
            margin-bottom: 10px;
            padding-bottom: 5px;
            border-bottom: 2px solid #0074fc;
        }

        .places-list ul {
            list-style: none;
            padding-left: 0;
        }

        .places-list ul li {
            margin-bottom: 15px;
        }

        .place-title {
            font-weight: bold;
            color: #0074fc;
            display: block;
        }

        .place-description {
            margin-top: 5px;
            font-style: italic;
            color: #666;
        }

        @media (max-width: 768px) {
            .places-list {
                flex-direction: column;
                align-items: center;
            }

            .places-list div {
                width: 100%;
            }
        }

        .content {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.3;
            text-align: left;
            margin-bottom: 40px;
        }

        .timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .timeline::after {
            content: '';
            position: absolute;
            width: 6px;
            background-color: #0074fc;
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -3px;
        }

        .timeline-item {
            padding: 20px 40px;
            position: relative;
            background-color: inherit;
            width: 50%;
        }

        .timeline-item::after {
            content: '';
            position: absolute;
            width: 25px;
            height: 25px;
            background-color: #fff;
            border: 4px solid #0074fc;
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }

        .timeline-item.left {
            left: 0;
        }

        .timeline-item.right {
            left: 50%;
        }

        .timeline-item.left::after {
            right: -13px;
        }

        .timeline-item.right::after {
            left: -13px;
        }

        .timeline-item.left .date {
            padding: 5px 10px;
            background-color: #0074fc;
            color: #fff;
            position: absolute;
            top: 15px;
            right: -110px;
            z-index: 1;
        }

        .timeline-item.right .date {
            padding: 5px 10px;
            background-color: #0074fc;
            color: #fff;
            position: absolute;
            top: 15px;
            left: -110px;
            z-index: 1;
        }

        .timeline-item .title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #0074fc;
        }

        .timeline-item .description {
            margin-top: 5px;
            font-style: italic;
            color: #666;
            word-wrap: break-word;
        }

        .image-container img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            border: 2px solid #0074fc;
        }

        .image-container a {
            display: block;
        }

        @media (max-width: 768px) {
            .timeline::after {
                left: 10px;
            }

            .timeline-item {
                width: calc(100% - 40px); /* Ensures it fits within the viewport */
                padding-left: 20px;
                padding-right: 20px;
            }

            .timeline-item.left, .timeline-item.right {
                left: 0;
                padding-left: 30px;
                margin-top: 40px; /* Adjusted to add space between items */
            }

            .timeline-item.left .date, .timeline-item.right .date {
                left: 35px;
                right: auto;
            }

            .timeline-item::after {
                left: 10px;
            }

            .timeline-item.left::after {
                right: auto;
                left: -2px; /* Adjust circle position */
            }

            .timeline-item.right::after {
                left: -2px; /* Adjust circle position */
            }

            .timeline-item .title {
                margin-top: 50px; /* Add margin above title */
            }
        }

        .content {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 20px;
            color: #000000;
        }

        .section {
            margin-bottom: 40px;
        }

        .section h3 {
            font-size: 24px;
            font-weight: bold;
            color: #0074fc;
            margin-bottom: 15px;
        }

        .section p {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

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

        .section ul li {
            font-size: 18px;
            margin-bottom: 10px;
            line-height: 1.6;
            position: relative;
            padding-left: 25px;
        }

        .section ul li::before {
            content: "•";
            color: #02C0CE;
            font-size: 20px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .section a {
            color: #0074fc;
            text-decoration: none;
        }

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

        .map-container {
            text-align: center;
            margin: 40px 0;
        }

        .map-container iframe {
            width: 100%;
            max-width: 800px;
            height: 480px;
            border: none;
            border-radius: 10px;
        }

        .map-description {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
            text-align: center;
        }

        .content {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 40px;
        }

        .section {
            margin-bottom: 40px;
            padding: 20px;
            border-radius: 5px;
        }

        .section h3 {
            font-size: 24px;
            font-weight: bold;
            color: #0074fc;
            margin-bottom: 15px;
        }

        .section p {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

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

        .section ul li {
            font-size: 16px;
            margin-bottom: 10px;
            line-height: 1.5;
            position: relative;
            padding-left: 25px;
        }

        .section ul li::before {
            content: "•";
            color: #0074fc;
            font-size: 20px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .section a {
            color: #0074fc;
            text-decoration: none;
        }

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

        .section img {
            width: 100%;
            height: auto;
            max-height: 300px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .content {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 20px;
            color: #02C0CE;
        }

        .section {
            margin-bottom: 40px;
        }

        .section h3 {
            font-size: 24px;
            font-weight: bold;
            color: #0074fc;
            margin-bottom: 15px;
        }

        .section p {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

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

        .section ul li {
            font-size: 16px;
            margin-bottom: 10px;
            line-height: 1.5;
            position: relative;
            padding-left: 25px;
        }

        .section ul li::before {
            content: "•";
            color: #02C0CE;
            font-size: 20px;
            position: absolute;
            left: 0;
            top: 0;
        }

        .section a {
            color: #0074fc;
            text-decoration: none;
        }

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

        .map-container {
            text-align: center;
            margin: 40px 0;
        }

        .map-container iframe {
            width: 100%;
            max-width: 800px;
            height: 480px;
            border: none;
            border-radius: 10px;
        }

        .map-description {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
            text-align: center;
        }

        .content {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 10px;
        }

        .content h2 {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 20px;
            color: #000000;
            text-align: left;
        }

        .section {
            margin-bottom: 40px;
        }

        .section h3 {
            font-size: 24px;
            font-weight: bold;
            color: #0074fc;
            margin-bottom: 15px;
        }

        .section p {
            font-size: 18px;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .section-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }

        .section-content {
            flex: 1 1 calc(50% - 20px);
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .section-content h4 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #02C0CE;
        }

        .section-content p {
            font-size: 16px;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .section-content a {
            color: #0074fc;
            text-decoration: none;
        }

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

        hr {
            border: none;
            border-top: 1px solid #ddd;
            margin: 20px 0;
        }

        @media (max-width: 768px) {
            .section-content {
                flex: 1 1 100%;
            }

            .section-content h4 {
                font-size: 18px;
            }

            .section-content p {
                font-size: 14px;
            }

            .section p {
                font-size: 16px;
            }
        }

        .carousel {
            position: relative;
            width: 50%; /* Make the carousel fit the width of the screen */
            max-height: 400px; /* Max height for the carousel */
            overflow: hidden;
            border: 2px solid #ddd;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .carousel img {
            width: 100%;
            height: 100%;
            max-height: 400px; /* Ensure images don't exceed the max height */
            object-fit: cover; /* Ensure images cover the container while maintaining aspect ratio */
            display: none;
        }

        .carousel img.active {
            display: block;
        }

        .carousel .nav {
            position: absolute;
            top: 50%;
            width: 40px;
            height: 40px;
            margin-top: -20px; /* Center the nav buttons */
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 30px;
            cursor: pointer;
            outline: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .carousel .prev {
            left: 10px;
        }

        .carousel .next {
            right: 10px;
        }

        .carousel .nav:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }

        /* Media queries for mobile optimization */
        @media (max-width: 768px) {
            .carousel {
                max-height: 300px; /* Reduce max height for smaller screens */
                 width: 100%;
            }

            .carousel img {
                max-height: 300px; /* Ensure images don't exceed the max height on smaller screens */
            }

            .carousel .nav {
                width: 30px;
                height: 30px;
                font-size: 20px;
            }
        }

        @media (max-width: 480px) {
            .carousel {
                max-height: 150px; /* Further reduce max height for very small screens */
            }

            .carousel img {
                max-height: 150px; /* Ensure images don't exceed the max height on very small screens */
            }

            .carousel .nav {
                width: 25px;
                height: 25px;
                font-size: 18px;
            }
        }
    /* Button Styles */
.footer-button {
    text-align: center;
    margin: 30px 0;
}

.footer-button button,
.footer-button a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0074fc;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin: 5px; /* Add margin to separate the buttons */
}

.footer-button button.view-map {
    background-color: white;
    color: #0074fc;
    border: 2px solid #0074fc;
}

.footer-button button.view-map:hover {
    background-color: #0074fc;
    color: white;
}

.footer-button button:hover,
.footer-button a:hover {
    background-color: #005bb5;
}

.footer-button button {
    border: none; /* Remove border from button */
    cursor: pointer; /* Add cursor pointer for button */
}
.wf-features-second {
display: flex;
/* Align feature spans in a row */
flex-wrap: wrap;
/* Allow wrapping if necessary */
align-items: center;
/* Center items vertically */
}

.wf-features-second span {
margin-right: 5px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px 8px;
margin-bottom: 5px;
}

/* Arrow styles */
.tab-nav {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8); /* Faded white background */
    color: black; /* Change icon color to black for better visibility */
    border: none;
    border-radius: 0; /* Remove border-radius to make it a rectangle */
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    width: 40px; /* Adjust width to fit the icon */
    justify-content: center;
    align-items: center;
}

.tab-nav.left {
    left: 0;
}

.tab-nav.right {
    right: 0;
}

@media (min-width: 1024px) {
    .tab-nav.show {
        display: flex;
    }
}
.guarantee-container {
            max-width: 800px;
            padding: 0px;
            border: 0px solid #02C;
            border-radius: 10px;
            background-color: #ffffff;
            text-align: left;
                  }
        .guarantee-header {
            font-size: 26px;
            font-weight: bold;
            color: #2980b9;
            margin-bottom: 20px;
        }
        .guarantee-subheader {
            font-size: 20px;
            color: #555;
            margin-bottom: 20px;
        }
        .guarantee-list {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .guarantee-list li {
            font-size: 18px;
            margin: 15px 0;
            padding-left: 30px;
            position: relative;
        }
        .guarantee-list li:before {
            content: '✓';
            color: #27ae60;
            font-size: 24px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
      .neighborhood-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 100%;
            max-width: 1200px;
        }
      .neighborhood {
            position: relative;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
            width: 30%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin: 10px 0;
        }
        .neighborhood img {
            width: 100%;
            height: auto;
        }
        .neighborhood-content {
            padding: 20px;
        }
        .neighborhood h2 {
            font-size: 24px;
            margin-top: 0;
            color: #333;
        }
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tags span {
            background-color: #eee;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
        }
        .discover-button {
            display: inline-block;
            margin-top: 10px;
            padding: 10px 20px;
            background-color: #0275d8;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            text-decoration: none;
            font-size: 16px;
            width: 100%;
            text-align: center;
            padding: 10px;
            background-color: #02C0CE;
            color: white !important;
            text-decoration: none;
            border-radius: 4px;
            font-weight: bold;
        }
        }
        .discover-button:hover {
            background-color: #025aa5;
        }
        @media (max-width: 768px) {
            .neighborhood {
                width: 48%;
            }
        }
        @media (max-width: 480px) {
            .neighborhood {
                width: 100%;
            }
        }
.tab-content .cta-container {
    text-align: center; /* Centers the button container */
    margin-top: 30px;
    margin-bottom: 30px;
}

.tab-content .cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #FFFFFF;
     font-family: 'Poppins', sans-serif;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.tab-content .cta-button:hover {
    background-color: #02C0CE;
    color: #FFFFFF; /* Ensures the font color stays white on hover */
}
.tab-navigation {
    display: flex;
    justify-content: center;
    gap: 10px; /* Adds space between the buttons */
    margin-top: 20px;
}

.nav-button {
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 60px;
    padding: 10px 15px;
    background-color: #FFFFFF;
    color: #000000 !important; /* Text color set to black */
    text-align: center;
    border-radius: 5px;
    text-decoration: underline !important; /* Underline the text */
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2) !important; /* Clearer shadow */
    transition: background-color 0.3s, color 0.3s;
    width: 150px; /* Fixed width to ensure equal sizes */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

.nav-button:hover {
    background-color: #F0F0F0; /* Slightly darker shade on hover */
    color: #000000; /* Ensure text color stays black on hover */
}

.nav-button:active {
    background-color: #E0E0E0; /* Slightly darker shade on active */
    color: #000000; /* Ensure text color stays black on active */
}

@media (max-width: 768px) {
    /* Existing mobile-specific styles */
    
    /* New mobile-specific styles for the tab arrows */
    .tab-nav {
        display: none;
    }

    .tab-nav.show {
        display: flex;
    }
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-523ccfc7 */#content{
    padding: 0 !important;
}/* End custom CSS */