/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}





    :root {

      --airbnb-pink: #ff385c;

      --airbnb-gray: #717171;

      --airbnb-light: #f7f7f7;

      --airbnb-dark: #222222;

      --max-width: 1100px;

    }

 

    * {

      box-sizing: border-box;

      scroll-behavior: smooth;

    }

 

    body {

      font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

      margin: 0;

      background-color: var(--airbnb-light);

      color: var(--airbnb-dark);

    }

 

    /* Sticky Navbar */

    nav {

      position: sticky;

      top: 0;

      background-color: white;

      z-index: 1000;

      display: flex;

      justify-content: center;

      border-bottom: 1px solid #eaeaea;

      padding: 12px 0;

      box-shadow: 0 2px 8px rgba(0,0,0,0.05);

    }

 

    nav a {

      text-decoration: none;

      color: var(--airbnb-dark);

      margin: 0 20px;

      font-weight: 500;

      padding: 8px 12px;

      border-radius: 8px;

      transition: background 0.3s, color 0.3s;

    }

 

    nav a:hover {

      background-color: var(--airbnb-pink);

      color: white;

    }

 

    header {

      background-color: white;

      text-align: center;

      padding: 40px 20px;

    }

 

    header h1 {

      font-size: 2.4rem;

      color: var(--airbnb-dark);

      margin-bottom: 10px;

    }

 

    header p {

      color: var(--airbnb-gray);

      font-size: 1rem;

    }

 

    .btn {

      background-color: var(--airbnb-pink);

      color: white;

      padding: 12px 30px;

      border: none;

      border-radius: 30px;

      font-size: 1rem;

      cursor: pointer;

      transition: background 0.3s ease;

      margin-top: 15px;

    }

 

    .btn:hover {

      background-color: #e03153;

    }

 

    /* Slideshow */

    .slideshow-container {

      position: relative;

      max-width: var(--max-width);

      margin: 40px auto;

      border-radius: 16px;

      overflow: hidden;

      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);

    }

 

    .slides {

      display: none;

      width: 100%;

      height: 550px;

      object-fit: cover;

    }

 

    .prev, .next {

      cursor: pointer;

      position: absolute;

      top: 50%;

      width: auto;

      padding: 12px;

      margin-top: -22px;

      color: white;

      font-weight: bold;

      font-size: 22px;

      transition: 0.3s ease;

      border-radius: 50%;

      background-color: rgba(0, 0, 0, 0.4);

      user-select: none;

    }

 

    .next {

      right: 15px;

    }

 

    .prev {

      left: 15px;

    }

 

    .prev:hover, .next:hover {

      background-color: rgba(0, 0, 0, 0.6);

    }

 

    .dots {

      text-align: center;

      margin-top: 15px;

    }

 

    .dot {

      cursor: pointer;

      height: 12px;

      width: 12px;

      margin: 0 5px;

      background-color: #d3d3d3;

      border-radius: 50%;

      display: inline-block;

      transition: background-color 0.3s ease;

    }

 

    .active, .dot:hover {

      background-color: var(--airbnb-pink);

    }

 

    /* Content Container */

    .container {

      max-width: var(--max-width);

      margin: 40px auto;

      background-color: white;

      border-radius: 16px;

      padding: 40px;

      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);

    }

 

    h2 {

      font-size: 1.6rem;

      color: var(--airbnb-dark);

      margin-top: 40px;

      border-bottom: 2px solid #f0f0f0;

      padding-bottom: 8px;

    }

 

    h3 {

      color: var(--airbnb-pink);

      margin-top: 25px;

    }

 

    ul {

      list-style: none;

      padding: 0;

      margin: 15px 0;

    }

 

    ul li {

      margin: 8px 0;

      color: var(--airbnb-gray);

    }

 

    ul li::before {

      content: "• ";

      color: var(--airbnb-pink);

      font-weight: bold;

    }

 

    p {

      color: var(--airbnb-gray);

      line-height: 1.7;

    }

 

    a {

      color: var(--airbnb-pink);

      text-decoration: none;

      font-weight: 500;

    }

 

    a:hover {

      text-decoration: underline;

    }

 

    iframe {

      width: 100%;

      height: 400px;

      border: none;

      border-radius: 16px;

      margin-top: 20px;

    }

 

    footer {

      background-color: white;

      border-top: 1px solid #eaeaea;

      color: var(--airbnb-gray);

      text-align: center;

      padding: 20px;

      font-size: 0.9rem;

      margin-top: 60px;

    }

 

    @media (max-width: 768px) {

      header h1 {

        font-size: 1.8rem;

      }

 

      .slides {

        height: 300px;

      }

 

      .container {

        padding: 25px;

      }

 

      nav a {

        margin: 0 10px;

      }

    }

   

    :root {

  --airbnb-pink: #ff385c;

  --airbnb-gray: #717171;

  --airbnb-light: #f7f7f7;

  --airbnb-dark: #222222;

  --golden-bg: #FFD700; /* Golden background */

  --max-width: 1100px;

}

 

body {

  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  margin: 0;

  /* background-color: var(--golden-bg);  Changed to golden */

  color: var(--airbnb-dark);

}

   /* Sticky Navbar */

nav {

  position: sticky;

  top: 0;

  background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent */

  backdrop-filter: blur(10px); /* Slight blur for glass effect */

  z-index: 1000;

  display: flex;

  justify-content: center;

  border-bottom: 1px solid rgba(0,0,0,0.1);

  padding: 12px 0;

  box-shadow: 0 2px 8px rgba(0,0,0,0.05);

}

 

/* Navbar Links */

nav a {

  text-decoration: none;

  color: var(--airbnb-dark);

  margin: 0 20px;

  font-weight: 500;

  padding: 8px 12px;

  border-radius: 8px;

  transition: background 0.3s, color 0.3s;

}

 

nav a:hover {

  background-color: var(--airbnb-pink);

  color: white;

}

 

/* Footer */

footer {

  background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent */

  backdrop-filter: blur(10px);

  border-top: 1px solid rgba(0,0,0,0.1);

  color: var(--airbnb-gray);

  text-align: center;

  padding: 20px;

  font-size: 0.9rem;

  margin-top: 60px;

}

 

 

/* Buttons hover animation */

.btn {

  background-color: var(--airbnb-pink);

  color: white;

  padding: 12px 30px;

  border: none;

  border-radius: 30px;

  font-size: 1rem;

  cursor: pointer;

  transition: all 0.3s ease;

  margin-top: 15px;

  box-shadow: 0 4px 15px rgba(0,0,0,0.1);

}

 

.btn:hover {

  transform: translateY(-3px) scale(1.05);

  background-color: #e03153;

  box-shadow: 0 6px 20px rgba(0,0,0,0.2);

}

 

/* Container hover effect */

.container {

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

 

.container:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 25px rgba(0,0,0,0.15);

}

 

/* Section headings with golden accent animation */

h2 {

  font-size: 1.6rem;

  color: var(--airbnb-dark);

  margin-top: 40px;

  border-bottom: 2px solid #f0f0f0;

  padding-bottom: 8px;

  position: relative;

 overflow: hidden;

}

 

h2::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 3px;

  background: linear-gradient(90deg, #FFD700, var(--airbnb-pink));

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.5s ease;

}

 

h2:hover::after {

  transform: scaleX(1);

}

 

/* Slide-up fade-in animation for sections */

.fade-up {

  transform: translateY(20px);

  transition: opacity 0.6s ease-out, transform 0.6s ease-out;

}

 

.fade-up.visible {

  transform: translateY(0);

}

 

/* Slideshow zoom on hover */

.slides {

  transition: transform 0.4s ease, box-shadow 0.3s ease;

  cursor: pointer;

}

 

.slides:hover {

  transform: scale(1.05);

  box-shadow: 0 10px 30px rgba(0,0,0,0.3);

}

  /* Feature cards layout */

.feature-cards {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 25px;

  margin-top: 25px;

}

 

.feature-card {

  background-color: white;

  padding: 20px;

  border-radius: 16px;

  text-align: center;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  box-shadow: 0 4px 15px rgba(0,0,0,0.1);

}

 

.feature-card img {

  width: 50px;

  height: 50px;

  margin-bottom: 15px;

  transition: transform 0.4s ease, filter 0.4s ease;

}

 

.feature-card h3 {

  color: var(--airbnb-pink);

  margin-bottom: 10px;

}

 

.feature-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 12px 30px rgba(0,0,0,0.25);

}

 

.feature-card:hover img {

  transform: scale(1.2) rotate(10deg);

  filter: drop-shadow(0 0 10px gold);

}

 

/* Parallax for slideshow */

.slideshow-container {

  perspective: 1000px; /* depth effect */

}

 

.slides {

  transition: transform 0.5s ease, box-shadow 0.4s ease;

}

 

body::before {

  content: "";

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: -1;

  pointer-events: none;

}

 

/* Scroll-based parallax effect */

.parallax {

  transform: translateY(0px);

  transition: transform 0.2s ease-out;

} 

 

/* Modal Styles */

.modal {

  display: none;

  position: fixed;

  z-index: 2000;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgba(0,0,0,0.6);

}

 

.modal-content {

  background-color: white;

  margin: 10% auto;

  padding: 30px;

  border-radius: 16px;

  width: 90%;

  max-width: 500px;

  position: relative;

  text-align: left;

  animation: fadeIn 0.4s ease;

}

 

.close {

  color: #aaa;

  position: absolute;

  right: 20px;

  top: 20px;

  font-size: 28px;

  font-weight: bold;

  cursor: pointer;

}

 

.close:hover {

  color: var(--airbnb-pink);

}

 

/* Modal Form */

#bookingForm input {

  width: 100%;

  padding: 10px;

  margin: 10px 0 20px 0;

  border-radius: 8px;

  border: 1px solid #ccc;

  box-sizing: border-box;

}

 

#bookingForm label {

  font-weight: 500;

}

 

@keyframes fadeIn {

 

}