h1.new-header {font-family:Poppins; text-transform:lowercase; font-size:24px; font-weight:600; text-align:left; color:#222; margin:0 0 10px 0px; letter-spacing:-.5px; line-height:120%;}

.new-section {float:left; padding:10px 1%; background:#fff; width:98%; margin:0px 0 5px 0; border-bottom:2px solid #eee; }


.basic-container-two {float:left; width:100%; }

.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  overflow: hidden;
  background-image: url("https://nashvilleguru.com/officialwebsite/wp-content/themes/nashvilleguru2015/images/bgloading.jpg");
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.overlay-div-two {
    position: absolute;
    bottom: 0%;
    left: 0%;
    /*transform: translate(-50%, -50%);*/
    width: auto;
    text-align: left;
    z-index: 900;
    color:#fff;
    background:rgba(0,0,0,.5);
    padding:20px 2%; 
    text-transform: uppercase;
    font-weight:300;
    line-height:120%;
    letter-spacing:-1px;
}

.overlay-div-two img {
    width: 70%;
    max-width: 70%;
    height: auto;

   animation: fadeInImg ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInImg {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}


h1.overlay-div-three {
    position: absolute;
    bottom: 0%;
    left: 0%;
    /*transform: translate(-50%, -50%);*/
    width: auto;
    text-align: left;
    z-index: 900;
    color:#fff;
    background:#108082; 
    font-family:'Poppins';
    padding:10px 2%; 
    margin:0;
    text-transform:none;
    font-weight:300;
    line-height:120%;
    font-size:28px;
    letter-spacing:-1px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
}

h1.overlay-div-three a {color:#fff; font-weight:400;}
h1.overlay-div-three:hover {background:#67dfe0; color:#000;}

.overlay-div-three img {
    width: 70%;
    max-width: 70%;
    height: auto;

   animation: fadeInImg ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInImg {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}


.intro {font-family:Poppins; font-size:18px; text-align:center; letter-spacing:-1px; background:#222; color:#fff; font-style:italic; }




/*********** NEIGHBORHOOD PAGE UPDATES *********************/



/*********** neighborhood page navigation  *********************/

.scroll-nav-container {
float:left; 
width:100%;
  background: #108082;
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-nav-container::-webkit-scrollbar {
  display: none;
}

.scroll-nav {
  display: flex;
  gap: 0.3rem;
  padding: 0.5rem 0.1rem;
  white-space: nowrap;
}

.scroll-nav a {
  flex: 0 0 auto;
  text-decoration: none;
  padding: 0.5rem 2em;
  border-radius: 20px;
  background: #000;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 400;

}

.scroll-nav a:hover,
.scroll-nav a.active {
  background: #67dfe0;
  color: #000;
}


.scroll-nav a.current, .scroll-nav a:hover.current {background:#444; color:#fff; }



/**** neighborhood description ************/

  .description {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* number of lines to show */
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    font-family: Poppins, sans-serif;
    font-size: 16px;
  }

  .read-more {
    font-size: 16px;
    color: #108082;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    margin-left: 0em;
  }

  /* Hide read more initially, show after expanded */
  input[type="checkbox"] {
    display: none;
  }

  input[type="checkbox"]:checked ~ .description {
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  /* Show read less when expanded */
  input[type="checkbox"]:checked ~ .read-more::after {
    content: " read less";
  }

  /* Show read more initially */
  .read-more::after {
    content: " read more";
  }


/**** horizontal scroll for articles and happy hours ****/


.scroll-articles-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  padding: 2px 0;
}

.scroll-articles-container::-webkit-scrollbar {
  display: none;
}

.scroll-articles {
  display: flex;
  gap: 1rem;
  padding-right: 1rem; /* Only right padding now */
}


.scroll-wrapper {
  position: relative;
}/* Hide on mobile by default */

.scroll-btn {
  display: none;
}

/* Desktop only (adjust breakpoint if needed) */
@media (min-width: 1024px) {
  .scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    display: flex; /* re-enable */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 10;

    /* Initially hidden */
    opacity: 0;
    pointer-events: none;

    transition: background 0.2s ease, opacity 0.3s ease;
  }

  .scroll-btn-left {
    left: 10px;
  }

  .scroll-btn-right {
    right: 10px;
  }

  .scroll-btn:hover {
    background: rgba(0, 0, 0, 0.7);
  }

  /* Show arrows when hovering the section */
  .scroll-wrapper:hover .scroll-btn {
    opacity: 1;
    pointer-events: auto;
  }

  /* JS hides arrows at edges */
  .scroll-btn[style*="display: none"] {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease;
  }
}






.article-box {
  flex: 0 0 auto;
  width: 280px;
  background: #fff;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

.article-box img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius:10px;

}

.article-content {
  padding: .5rem;
}

.article-content h2 {font-size:16px; margin:0 0 5px 0; line-height:18px; font-weight:600; font-family: 'Poppins', sans-serif;} 

.article-content {
  font-size: 14px;
  font-weight:400;
  color: #000;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.article-box-link {
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  width: 280px;
  font-family: 'Poppins', sans-serif;

}

.article-box-link:hover .article-box,
.article-box-link:focus .article-box {

    transform: scale(0.95);
  opacity: 0.8;
}

.article-box-link:hover .article-content h2, 
.article-box-link:focus .article-content h2 {color:#67dfe0;}

.article-box-link:hover img { transform: scale(0.97); opacity: 0.9; transition: transform 0.3s ease, opacity 0.3s ease;}

.article-box {
  background: #fff;
  overflow: hidden;
  border-radius: 10px;
  transition: inherit;
}



/*** new directory layout with circles ***/

.scroll-directory-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.3rem 0;
  position: relative;
}

.scroll-directory-container::-webkit-scrollbar {
  display: none;
}

.scroll-directory {
  display: flex;
  gap: 0.8rem;

}

.directory-item {
  flex: 0 0 calc(100% / 3.7); /* Default: 3.5 items on mobile */
  text-align: center;
  line-height: 100%; 
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}

@media (min-width: 768px) {
  .directory-item {
    flex: 0 0 calc(100% / 6.2); /* 6.5 items on desktop */
}

}

.directory-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid transparent; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0); 
}

.directory-item:hover img {  border: 3px solid #67dfe0; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }


.directory-item.left-align {text-align:left;}

.directory-item.square {
  flex: 0 0 calc(100% / 2.5); /* Default: 3.5 items on mobile */
  text-align: center;
  line-height: 100%; 
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}


.directory-item.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 5%;
  border: 3px solid transparent; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0); 
}


.directory-item.portrait {
  flex: 0 0 calc(100% / 3.5); /* Default: 3.5 items on mobile */
  text-align: center;
  line-height: 100%; 
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}


.directory-item.vertical img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 5%;
  border: 3px solid transparent; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0); 
}


.directory-item.vertical {
  flex: 0 0 calc(100% / 1.5); /* Default: 3.5 items on mobile */
  text-align: center;
  line-height: 100%; 
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}


@media (min-width: 768px) {
  .directory-item.vertical {
    flex: 0 0 calc(100% / 3.5); /* 6.5 items on desktop */

}
}


@media (min-width: 768px) {
  .directory-item.square {
    flex: 0 0 calc(100% / 4.5); /* 6.5 items on desktop */

}
}



.directory-item.widescreen img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 5%;
  border: 3px solid transparent; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0); 
}

.directory-item.widescreen {
  flex: 0 0 calc(100% / 2.5); /* Default: 3.5 items on mobile */
  text-align: center;
  line-height: 100%; 
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}


@media (min-width: 768px) {
  .directory-item.widescreen {
    flex: 0 0 calc(100% / 4.5); /* 6.5 items on desktop */
}

}



.directory-item.square img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 5%;
  border: 3px solid transparent; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0); 
}

.directory-item.square:hover img, .directory-item.portrait:hover img, .directory-item.widescreen:hover img {  border: 3px solid #67dfe0; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }


.directory-item p {
  margin-top: 0.5rem;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}

.directory-item a {
  display: block;
  text-decoration: none;
  color: inherit;
  font-weight:600;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.directory-item:hover a,
.directory-item:focus-within a,
.directory-item:has(:hover) a,
.directory-item:has(:focus-visible) a {
  transform: scale(0.95);
  opacity: 0.8;
}

.directory-item {
  cursor: pointer;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.directory-item-title {font-size:16px; margin:0 0 3px 0; text-align:left; }

.directory-item-date {font-size:14px; font-weight:300; margin:0 0 3px 0;  text-align:left;}

.directory-item-venue {font-size:12px; font-weight:300; font-style:italic; margin:0 0 3px 0; text-align:left;}


/* Container wrapper */
.directory-grid-container {
  float:left;
  width: 100%;
  margin: 0 auto;
}

/* Grid layout for directory items */
.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 10px; /* spacing between items */
  width: 100%;
  margin: 0;
  align-items: stretch; /* equal height per row */
}

/* Each directory item spans full grid cell */
.directory-grid > .directory-item {
  width: 100%;
  box-sizing: border-box;
    background: #fff;
  display: flex; /* inner flex for stretching */
}

/* Link: image left, text right */
.directory-grid > .directory-item > a {
  display: grid;
  grid-template-columns: 140px 1fr; /* image 140px, text fills rest */
  column-gap: 16px;
  align-items: start;
  border-radius: 5px;
  padding: 10px;
  text-decoration: none;
  color: inherit;

  transform: none !important; /* remove hover shrink */
  transition: none !important;
  opacity: 1 !important;

  height: 100%; /* stretch link to match tallest item */
  box-sizing: border-box;
}

/* Wrap all text in container */
.directory-grid .directory-item-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Images: fixed height, uniform */
.directory-grid .directory-item img {
  border-radius: 8px;
  width: 140px;           /* matches grid column width */
  height: 100px;          /* fixed height for all images */
  object-fit: cover;      /* crop to fill box */
  display: block;
}

/* Text styling */
.directory-grid .directory-item-title { font-size: 16px; margin: 0 0 3px 0; text-align: left; }
.directory-grid .directory-item-date { font-size: 14px; font-weight: 300; margin: 0 0 3px 0; text-align: left; }
.directory-grid .directory-item-venue { font-size: 12px; font-weight: 300; font-style: italic; margin: 0 0 3px 0; text-align: left; }


/* Mobile: single column, keep image left */
@media (max-width: 768px) {
  .directory-grid {
    grid-template-columns: 1fr; /* each item spans full width */
  }

  .directory-grid > .directory-item > a {
    grid-template-columns: 100px 1fr; /* smaller image left, text right */
    column-gap: 12px;
    height: auto; /* let items expand naturally */
  }

  .directory-grid .directory-item img {
    width: 100px;   /* smaller fixed width for mobile */
    height: 80px;   /* proportional fixed height */
  }
}



/**** new section headers  ************/


.new-header-neighborhoods {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.new-header-neighborhoods a {
  font-size: 1rem;
  text-decoration: none;
  color: #108082; /* adjust to match your site */
  white-space: nowrap;
  font-weight:600;
}













.unique-event-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Reduced gap between rows */
}

/* Event Card Styles */
.custom-event-card {
    display: flex;
    flex: 0 0 calc(50% - 10px); /* Reduced space between columns */
    text-decoration: none;
    font-family:"Poppins";
    color: black;
    background: #f1f1f1; /* Card's background */
    border-radius: 6px;
    overflow: hidden;
    min-width: 280px;
    height: 80px; /* More compact height */
    transition: background 0.3s ease; /* Hover transition */
}

.custom-event-card:hover {
    background: #eee; /* Slight color change on hover */
}

/* Columns in Event Card */
.custom-event-card > div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 3px 5px; /* Reduced padding */
    font-size: 14px; /* Smaller text */
    font-weight: bold;
    line-height:110%;
}

/* Date Section - Column 1 */
.custom-event-schedule {
    background: black;
    color: white;
    flex: 0 0 60px; /* Reduced size */
    flex-direction: column;
    text-align: center;
    padding: 2px;
    text-transform:uppercase;
}

.custom-day-label {
    font-size: 10px; /* Smaller font size */
    text-transform: uppercase;
    color:#ddd;
}

.custom-day-month {
    font-size: 20px; /* Smaller font size */
    display: flex;
    flex-direction: column;
    font-weight: bold;
    line-height:110%;
}

.custom-day-number, 
.custom-month-label {
    font-size: 20px; /* Smaller size */
}

.custom-event-time {
    font-size: 10px; /* Smaller font size */
    margin-top: 0px; /* Reduced margin */
    color:#ddd;
}

/* Event Name - Column 2 */
.custom-event-name {
    flex: 1;
    font-size: 11px; /* Smaller font size */
    padding: 8px 12px; /* Reduced padding */
    color: black;
    text-align: left;
}

.custom-event-venue {font-style:italic; font-weight:300;}

/* Ticket Button - Column 3 */
.custom-ticket-button {
    background: #62dfe1; /* Button's background */
    flex: 0 0 100px; /* More compact width */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px; /* Smaller font size */
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: white; /* White text */
    padding: 8px 16px; /* Reduced padding */
    border-radius: 6px;
    margin: 5px; /* Reduced margin */
    transition: background 0.3s ease; /* Hover effect */
    cursor: pointer;
}

.custom-ticket-button:hover {
    background: #4ecdd2; /* Slight hover effect */
}



a:link.see-more-button {
    background: #62dfe1; /* Button's background */
    display: block;
    justify-content: center;
    align-items: center;
    font-size: 12px; /* Smaller font size */
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    color: white; /* White text */
    padding: 8px 16px; /* Reduced padding */
    border-radius: 6px;
    margin: 5px; /* Reduced margin */
    transition: background 0.3s ease; /* Hover effect */
    cursor: pointer;
    max-width:100px; 


}

/* Mobile View - One Column */
@media (max-width: 768px) {
    .unique-event-wrapper {
        flex-direction: column;
    }

    .custom-event-card {
        flex: 1 1 100%;
        height: auto;
    }
}




.tabs {
    margin:10px 0 10px 0;
    display: flex;
}

.tab-link {
    padding: 10px 10px;
    font-size:12px;
    border: none;
    background: #e0e0e0;
    cursor: pointer;
    border-radius: 25px;
    margin-right: 5px;
    transition: background 0.3s;
    color:#008083;
}

.tab-link.active {
    background: #008083;
    color: #fff;
}

.tab-link:hover {
    background: #008083;
    color:#fff;
}

.tab-content {
    display: none; /* Hide all tab content by default */
}

.tab-content.active {
    display: block; /* Show active tab content */
}







/* Floating container */
.floating-container {
    float: left;
    width: 100%; /* Adjust width as needed */
    margin: 0px 0%; /* Center the container within the page */
    padding: 0px 0% 0px 0%;
    border-radius: 0px;
    position: relative; /* Allows for absolute positioning of the arrows */
}

/* Adjust Swiper container */
.swiper-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 10px 0;
    font-family:Poppins;
}

.swiper-container h2 {font-size:16px; font-family:Poppins; color:#000; font-weight:600; line-height:120%; float:left; width:100%;  }

/* Swiper slide styles */
.swiper-slide {
    background: #fff;
    border-radius: 0px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}

.swiper-slide-date {font-size:14px; color:#000; font-weight:600;}


/* Hide navigation arrows by default */
.swiper-button-next,
.swiper-button-prev {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show arrows on hover */
.floating-container:hover .swiper-button-next,
.floating-container:hover .swiper-button-prev {
    opacity: 1;
}

/* Media query to ensure this behavior only applies on desktop */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none; /* Hide arrows on mobile */
    }
}

/* Swiper navigation styles */
.swiper-button-next, .swiper-button-prev {
    color: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 1.0); 
    border-radius: 0%;
    padding: 10px;
        z-index:1000;
}

.swiper-button-next { right: 0px; }
.swiper-button-prev { left: 0px; }

/* Media query to adjust for mobile - hide navigation arrows and pagination on mobile */
@media (max-width: 768px) {
    .swiper-slide {
        width: 100%;
    }

    .swiper-button-next, .swiper-button-prev,
    .swiper-pagination {
        display: none;
    }
    
    .swiper-button-next, .swiper-button-prev {
        padding: 5px;
    }
}

/* Show arrows and pagination only on desktop */
@media (min-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination {
        display: block;
    }
}

/* Pagination style - make it float at the bottom */
.swiper-pagination {
    padding:20px 0 0 0;
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
}

/* Customize Swiper pagination dots */
.swiper-pagination-bullet {
    background-color: #000 !important; /* Set pagination dots to black */
    opacity: 0.5; /* Slightly transparent for inactive dots */
}

.swiper-pagination-bullet-active {
    background-color: #000 !important; /* Set active dot color to black */
    opacity: 1; /* Full opacity for active dot */
}


.swiper-thumbnail {float:left; margin:0 0 10px 0; }
.swiper-thumbnail img {float:left; width:100%; height:auto; border-radius:5px;}

.swiper-thumbnail.circle img {border-radius:50%;}

.swiper-thumbnail.rounded-corners img {border-radius:20px;}


/* Hide navigation arrows by default */
.swiper-button-next,
.swiper-button-prev {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Show arrows on hover for desktop */
@media (min-width: 768px) {
    .floating-container:hover .swiper-button-next,
    .floating-container:hover .swiper-button-prev {
        opacity: 1;
        pointer-events: auto; /* Enable interaction when visible */
    }
}

/* Hide arrows completely on mobile */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important; /* Make sure arrows are hidden */
        pointer-events: none; /* Disable any interaction */
    }
}







/*====================================== 2025 STYLE UPDATES  ======================================*/

.basic-container-two {float:left; width:100%; }

.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  overflow: hidden;
  background-image: url("https://nashvilleguru.com/officialwebsite/wp-content/themes/nashvilleguru2015/images/bgloading.jpg");
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.overlay-div-two {
    position: absolute;
    bottom: 0%;
    left: 0%;
    /*transform: translate(-50%, -50%);*/
    width: auto;
    text-align: left;
    z-index: 900;
    color:#fff;
    background:#108082;
    /*background:rgba(0,0,0,.5);*/
    padding:20px 2%; 
    text-transform: uppercase;
    font-weight:300;
    line-height:120%;
    letter-spacing:-1px;
    border-radius: 10px 10px 0 0;
}

.overlay-div-two img {
    width: 70%;
    max-width: 70%;
    height: auto;

   animation: fadeInImg ease 4s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInImg {
    0% {
        opacity: 0.2;
    }
    100% {
        opacity: 1;
    }
}



* Floating container */
.floating-container {
    float: left;
    width: 100%; /* Adjust width as needed */
    margin: 0px 0%; /* Center the container within the page */
    padding: 0px 0% 0px 0%;
    border-radius: 0px;
    position: relative; /* Allows for absolute positioning of the arrows */
}

/* Adjust Swiper container */
.swiper-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 10px 0;
    font-family:Poppins;
}


.swiper-container h2 {font-size:16px; font-family:Poppins; color:#000; font-weight:600; line-height:120%; float:left; width:100%;  }
.swiper-container h2.listing {font-size:14px;   }

/* Swiper slide styles */
.swiper-slide {
    background: #fff;
    border-radius: 0px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

}

.swiper-slide-date {font-size:14px; color:#000; font-weight:600;}


/* Hide navigation arrows by default */
.swiper-button-next,
.swiper-button-prev {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show arrows on hover */
.floating-container:hover .swiper-button-next,
.floating-container:hover .swiper-button-prev {
    opacity: 1;
}

/* Media query to ensure this behavior only applies on desktop */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none; /* Hide arrows on mobile */
    }
}

/* Swiper navigation styles */
.swiper-button-next, .swiper-button-prev {
    color: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 1.0); 
    border-radius: 0%;
    padding: 10px;
        z-index:1000;
}

.swiper-button-next { right: 0px; }
.swiper-button-prev { left: 0px; }

/* Media query to adjust for mobile - hide navigation arrows and pagination on mobile */
@media (max-width: 768px) {
    .swiper-slide {
        width: 100%;
    }

    .swiper-button-next, .swiper-button-prev,
    .swiper-pagination {
        display: none;
    }
    
    .swiper-button-next, .swiper-button-prev {
        padding: 5px;
    }
}

/* Show arrows and pagination only on desktop */
@media (min-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination {
        display: block;
    }
}

/* Pagination style - make it float at the bottom */
.swiper-pagination {
    padding:20px 0 0 0;
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 5;
}

/* Customize Swiper pagination dots */
.swiper-pagination-bullet {
    background-color: #000 !important; /* Set pagination dots to black */
    opacity: 0.5; /* Slightly transparent for inactive dots */
}

.swiper-pagination-bullet-active {
    background-color: #000 !important; /* Set active dot color to black */
    opacity: 1; /* Full opacity for active dot */
}


.swiper-thumbnail {float:left; margin:0 0 10px 0; }
.swiper-thumbnail img {float:left; width:100%; height:auto; border-radius:5px;}

.swiper-thumbnail.circle img {border-radius:50%;}

.swiper-thumbnail.rounded-corners img {border-radius:20px;}


/* Hide navigation arrows by default */
.swiper-button-next,
.swiper-button-prev {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Show arrows on hover for desktop */
@media (min-width: 768px) {
    .floating-container:hover .swiper-button-next,
    .floating-container:hover .swiper-button-prev {
        opacity: 1;
        pointer-events: auto; /* Enable interaction when visible */
    }
}

/* Hide arrows completely on mobile */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none !important; /* Make sure arrows are hidden */
        pointer-events: none; /* Disable any interaction */
    }
}

.fade-in {
    opacity: 0.4;
    transform: translateY(5px);
    transition: opacity .2s ease-out, transform .2s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}




.ad-item {
    display: block;
    margin-bottom: 10px;
}


.desktop-ad {
    display: block;
}

.mobile-ad {
    display: none;
}

@media only screen and (max-width: 767px) {
    .desktop-ad {
        display: none;
    }

    .mobile-ad {
        display: block;
    }
}




.mobile-only-ad {
    width: 100%;
    height: auto;
    display: block;
}

.mobile-ad-pair {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
}

.mobile-ad-item {
    flex: 1;
    text-align: center;
}

@media (max-width: 767px) {
    .mobile-ad-pair {
        flex-direction: column;
    }
}