/* All the CSS from your provided text, with the background removed */


.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper-slide {
  /* Increased size */
  width: 350px;
  height: 450px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  filter: blur(1px);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Use flex-end for better control */
  align-items: self-start;
}

.swiper-slide-active {
  filter: blur(0px);
}

.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
  background: #fff;
}

.swiper-slide span {
  text-transform: uppercase;
  color: #fff;
  background: #1b7402;
  padding: 7px 18px 7px 25px;
  display: inline-block;
  border-radius: 0 20px 20px 0px;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-family: "Open Sans", sans-serif;
}

.swiper-slide--one span {
  background: #62667f;
}

.swiper-slide--two span {
  background: #087ac4;
}

.swiper-slide--three span {
  background: #b45205;
}

.swiper-slide--four span {
  background: #087ac4;
}

.swiper-slide--five span,
.swiper-slide--six span,
.swiper-slide--seven span,
.swiper-slide--eight span,
.swiper-slide--nine span,
.swiper-slide--ten span {
  background: #b45205;
  /* Unified color for the rest */
}

.swiper-slide h2 {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: 15px;
  padding: 25px 45px 0 25px;
}

.swiper-slide p {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  display: flex;
  align-items: center;
  padding: 0 25px 35px 25px;
}

.swiper-slide svg {
  color: #fff;
  width: 22px;
  height: 22px;
  margin-right: 7px;
}

.swiper-slide--one {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://images.unsplash.com/photo-1556206079-747a7a424d3d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80") no-repeat 50% 50% / cover;
}

.swiper-slide--two {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://images.unsplash.com/photo-1571900670723-a317a66e3fb7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=423&q=80") no-repeat 50% 50% / cover;
}

.swiper-slide--three {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://images.unsplash.com/photo-1549144511-f099e773c147?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80") no-repeat 50% 50% / cover;
}

.swiper-slide--four {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://images.unsplash.com/photo-1650367310179-e1b5b8e453c3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80") no-repeat 50% 50% / cover;
}

.swiper-slide--five {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://images.unsplash.com/photo-1596521864207-13d46b1a0c78?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80") no-repeat 50% 50% / cover;
}

/* I will use the same image URL for the rest of the slides, as specified in your code */
.swiper-slide--six,
.swiper-slide--seven,
.swiper-slide--eight,
.swiper-slide--nine,
.swiper-slide--ten {
  background: linear-gradient(to top, #0f2027, #203a4300, #2c536400),
    url("https://images.unsplash.com/photo-1596521864207-13d46b1a0c78?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80") no-repeat 50% 50% / cover;
}

.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right {
  background-image: none;
}

.scroll-gallery {
  gap: 10px;
  /* space between dest */
  padding-bottom: 10px;
}

.single-gallery {
  position: relative;
  width: 300px;
  height: 400px;
  overflow: hidden;
  border-radius: 10px;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.single-gallery:hover .gallery-img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.single-gallery:hover .overlay {
  opacity: 1;
}

#top-header {
  background-color: #e9c039dc;
  /* A dark charcoal color for the background */
  padding: 10px 0;
  /* Add some vertical padding */
  color: #c9cdd2;
  /* A light grey for the text */
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  /* A standard font size for header links */
}

/* Container to center the content */
#top-header .container-top {
  width: 90%;
  /* Adjust container width for better responsiveness */
  margin: 0 auto;
  /* Center the container horizontally */
  display: flex;
  /* Use flexbox for layout */
  justify-content: space-between;
  /* Space out the left and right link lists */
  align-items: center;
  /* Vertically align items in the center */
}

/* Styling for the list of links */
#top-header .header-links {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Remove default list bullet points */
  display: flex;
  gap: 20px;
  /* Add space between the list items */
}

/* Styling for each individual link */
#top-header .header-links li {
  display: inline-block;
  /* Display list items on a single line */
}

#top-header .header-links a {
  color: #000;
  /* Link color */
  font-weight: bold;
  text-decoration: none;
  /* Remove underline from links */
  transition: color 0.3s ease;
  /* Smooth color transition on hover */
}

/* Styling for link icons */
#top-header .header-links a i {
  margin-right: 5px;
  /* Add some space between the icon and the text */
}

/* Hover effect for the links */
#top-header .header-links a:hover {
  color: #fff;
  /* White color on hover */
}

/* Additional styling for the pull-left and pull-right classes for clarity, though flexbox handles the main layout */
#top-header .pull-left {
  justify-content: flex-start;
  /* Align to the left */
}

#top-header .pull-right {
  justify-content: flex-end;
  /* Align to the right */
}


.weather-card {
  margin: 30px auto 40px auto;
  /* bottom margin added */
  height: 520px;
  width: 95%;
  /* make card wider */
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.weather-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* top image container */
.weather-card .top {
  position: relative;
  height: 65%;
  width: 100%;
  overflow: hidden;
  /* hide overflow for zoom effect */
}

.weather-card .top::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
  z-index: 1;
}

/* image zoom effect */
.weather-card .top .bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.weather-card:hover .top .bg-img {
  transform: scale(1.1);
}

.weather-card .top .wrapper {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  z-index: 2;
  text-align: center;
}

.weather-card .top h1 {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
}

.weather-card .bottom {
  padding: 20px;
  text-align: center;
}

.weather-card .bottom h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.weather-card .bottom p {
  font-size: 14px;
  color: #555;
  margin-bottom: 15px;
}

.weather-card .btn {
  border-radius: 25px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.weather-card .btn:hover {
  background: #0056b3;
}

.h2-heading {
        font-size: 50px;
        margin-bottom: 10px;
        line-height: 1.5;
        font-weight: 300;
        color: #000;
        position: relative;
    }

    .p-heading {
        font-size: 20px;
        line-height: 1.5;
        color: gray;
    }

    .object-fit-cover {
        width: 100%;
        height: auto;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .zoom-img {
        transition: transform 0.4s ease;
    }

    .zoom-img:hover {
        transform: scale(1.08);
    }

    .about-hero {
        height: 600px;
        /* fixed height */
        object-fit: cover;
        /* keeps proportions and covers entire space */
        object-position: center;
        /* keeps focus at center */
        display: block;
        /* removes bottom inline gap */
    }

    .about-hero .overlay {
        background: rgba(0, 0, 0, 0.3);
        /* optional dark overlay */
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .about-hero h1 {
        color: #fff;
        font-size: 4rem;
        font-weight: 800;
        text-transform: uppercase;
    }
    .con-img-wrap {
        position: relative;
        overflow: hidden;
        border-radius: 12px;
    }

    .zoom-img {
        height: 250px;
        width: 100%;
        object-fit: cover;
        transform: scale(1.15);
        /* zoomed out look */
        transition: transform 0.5s ease;
        display: block;
    }

    .card-wrap:hover .zoom-img {
        transform: scale(1);
        /* zoom in on hover */
    }

    /* Overlay */
    .overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.4s ease;
    }

    .card-wrap:hover .overlay {
        opacity: 1;
    }

    .overlay a {
        background: #040008ff;
        color: #fff;
        padding: 10px 20px;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.3s ease;
    }