/*
Theme Name: Beauty - Beauty and Nail Salon Website Template
Theme URI: https://templatesjungle.com/
Author: TemplatesJungle
Author URI: https://templatesjungle.com/
Description: Beauty is specially designed product packaged for Beauty and Nail Salon by TemplatesJungle.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Background Color
  2.3 Section
    - Section Paddings
    - Section Margins
    - Section Title
    - Content width
  2.4 Buttons
    - Primary Buttons
    - Outline Buttons

3. CONTENT ELEMENTS
  - Dropdown
  - Breadcrumbs
  - Form
  - Svg Color
  - Swiper
  - Zoom Effect
  - Pagination

4. SITE STRUCTURE
  4.1 Header
  4.2 Slider Section
  4.3 Our Services
  4.4 About Section
  4.5 Popular Products Section
  4.6 Footer Section

5. OTHER PAGES STYLE
  5.1 Faqs Page
  5.2 Price Plan page
  5.3 Team page
  5.4 Reviews page
  5.5 Single Product page

    
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --accent-color: rgb(6, 56, 53);
  --secondary-color: #e3f9f2;
  --black-color: #3C3C3C;
  --light-black-color: #343536;
  --dark-color: #797876;
  --primary-color: rgb(6, 56, 53);
  --primary-color-200: #E8F0F1;
  --primary-color-400: #c4e9ed;
  --gray-color: #777F81;
  --light-color: #FFFFFF;

  --bs-dark-rgb: 87, 87, 87;
  --bs-gray-100: #EEEFEF;
  --bs-gray-300: #DCDCDC;
  --bs-primary-text-emphasis: var(--primary-color);
  --bs-primary: rgb(6, 56, 53);
  --bs-light-rgb: 255, 255, 255;
  --bs-primary-rgb: 6, 56, 53;
  --bs-secondary-rgb: 11, 107, 101;
  --swiper-theme-color: #111 !important;
  --cadet-blue-color: #9AB4B7;
}

/* Fonts */
:root {
  --heading-font: "Cormorant Upright", serif;
  --body-font: "Jost", sans-serif;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  background-color: #FAFAFA;
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 300;
  line-height: 164%;
  letter-spacing: 0.40px;
  color: var(--dark-color);
  margin: 0;
}

p {
  color: var(--dark-color);
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: var(--primary-color);
}


/*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
  padding-top: 8.125em;
  padding-bottom: 8.125em;
}

.padding-medium {
  padding-top: 10em;
  padding-bottom: 10em;
}

.padding-large {
  padding-top: 12em;
  padding-bottom: 12em;
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 8.125em;
  margin-bottom: 8.125em;
}

.margin-medium {
  margin-top: 10em;
  margin-bottom: 10em;
}

.margin-large {
  margin-top: 12em;
  margin-bottom: 12em;
}


/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--black-color);
  font-family: var(--heading-font);
  text-transform: capitalize;
  font-weight: 500;
  letter-spacing: 0.0675rem;
}

.textline h2 {
  color: var(--secondary-color);
  font-family: var(--heading-font);
  font-weight: 500;
  letter-spacing: 0.0675rem;
  text-transform: none !important;
}

/* - Content width
--------------------------------------------------------------*/
.container-md {
  max-width: 1465px;
}

.container-lg {
  max-width: 1750px;
}


/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/

.btn {
  padding: 15px 35px;
  text-transform: uppercase;
  transition: 0.4s ease-in-out;
  font-weight: 500;
  letter-spacing: 0.0675rem;
  border-radius: 0;
}

/* Primary Buttons */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #38756b;
  --bs-btn-hover-border-color: #38756b;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #38756b;
  --bs-btn-active-border-color: #38756b;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #38756b;
  --bs-btn-disabled-border-color: #38756b;
}

.btn-outline-primary {
  --bs-btn-color: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent-color);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent-color);
  --bs-btn-active-border-color: var(--accent-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--accent-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--accent-color);
  --bs-gradient: none;
}

.btn-check:active+.btn-primary:focus,
.btn-check:checked+.btn-primary:focus,
.btn-primary.active:focus,
.btn-primary:active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  box-shadow: none;
}

/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
  color: var(--bs-black);
  font-family: var(--heading-font);
  font-weight: 600;
  /* padding: 0px 18px; */
  font-size: 18px;
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--bs-dropdown-link-hover-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-hover-bg);
}

/* Breadcrumb
------------------------------------------------------------- */
.breadcrumb-item+.breadcrumb-item::before {
  color: var(--light-color);
}

/* Form
------------------------------------------------------------- */
.form-check-input:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: none;
}

.form-check-input:focus {
  border-color: var(--accent-color);
  outline: 0;
  box-shadow: none;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

input,
select,
textarea {
  border-color: var(--dark-color);
  outline: 0;
  box-shadow: none;
}

select:focus {
  box-shadow: none;
}


/* Svg Color
------------------------------------------------------------- */
svg.light-color {
  color: var(--light-color);
}

svg.dark-color {
  color: var(--dark-color);
}

svg.light-blue-color {
  color: #5BC4F1;
}

svg.primary-color {
  color: var(--primary-color);
}

svg.accent-color {
  color: var(--accent-color);
}

svg.primary-color-500 {
  color: var(--bs-primary-rgb);
}

/* Swiper
------------------------------------------------------------- */
/* Swiper */
.swiper-pagination {
  position: unset !important;
  padding-top: 45px;
}

.swiper-pagination span.swiper-pagination-bullet {
  width: 18px;
  height: 18px;
  background-color: var(--accent-color);
  opacity: 0.2;

}

.swiper-pagination span.swiper-pagination-bullet:hover,
.swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--accent-color);
  opacity: 1;
}

/* -Zoom Effect
------------------------------------------*/
.zoom-effect {
  position: relative;
  overflow: hidden;
}

.zoom-effect img {
  max-width: 100%;
  -webkit-transition: 0.6s ease-out;
  -moz-transition: 0.6s ease-out;
  transition: 0.6s ease-out;
}

.zoom-effect:hover img {
  -webkit-transform: scale(1.1, 1.1);
  -moz-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
}

.zoom-effect:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 2;
  opacity: 0;
  -moz-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

.zoom-effect:hover:before {
  opacity: 1;
  cursor: pointer;
}


/* ------ Pagination ------*/
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 1rem;
  --bs-pagination-color: var(--bs-body-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: 0;
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: 0;
  --bs-pagination-hover-color: var(--bs-light);
  --bs-pagination-hover-bg: var(--bs-primary);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-light);
  --bs-pagination-focus-bg: var(--bs-primary);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--bs-light);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-disabled-color: var(--bs-primary-color);
  --bs-pagination-disabled-bg: var(--bs-primary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}


/*----------------------------------------------*/
/* 4 SITE STRUCTURE */
/*----------------------------------------------*/

/* 4.1 Header
/*----------------------------------------------*/

a.nav-link {
  font-family: var(--heading-font);
  text-transform: capitalize;
  color: var(--light-color);
  font-size: 20px;
}

a.nav-link:focus {
  color: var(--accent-color);
}

a.nav-link.active,
a.nav-link:hover {
  color: var(--primary-color) !important;
  outline: none;
}

#primary-header .dropdown .search::after {
  content: none;
}

#primary-header .search-dropdown .dropdown-menu {
  width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
  min-width: 100%;
}

#primary-header .search-dropdown .dropdown-menu button {
  padding: 0 12px;
  min-height: -webkit-fill-available;
  border-radius: 0.25rem;
}



/* 4.2 Slider Section
/*----------------------------------------------*/
section#slider .banner-content {
  width: 50%;
}

section#slider .main-slider-button-next,
.main-slider-button-prev {
  z-index: 111111;
  height: fit-content;
  opacity: 0.9;
}

section#slider .main-slider-button-next.swiper-button-disabled,
.main-slider-button-prev.swiper-button-disabled {
  opacity: 0.6;
}

.banner-title {
  color: #FFF;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.27);
}

@media only screen and (max-width: 999px) {
  section#slider .banner-content {
    width: 66%;
  }
}



/* 4.3 Services Section
/*----------------------------------------------*/

a.hover-color h4 {
  transition: all 0.5s ease-in-out;
}

a.hover-color h4:hover {
  color: var(--accent-color);
}

#services .row {
  justify-content: center;
  /* Centers the columns */
}

#services .col-lg-3 {
  flex: 0 0 auto;
  /* Ensures the columns don’t shrink unnecessarily */
}

/* 
 4.4 About style
--------------------------------------------------------------*/

/*---- video section style start ----*/
/* color box style */
div#cboxOverlay {
  opacity: 0.8 !important;
}

.video .video-player {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

iconify-icon.video-icon {
  color: var(--bs-light);
  border-radius: 6.25rem;
  background: rgba(255, 255, 255, 0.35);
  transition: all 0.4s ease-in-out;
  animation: playAnimation 2s infinite alternate;
}


@keyframes playAnimation {
  0% {
    font-size: 35px;
  }

  100% {
    font-size: 60px;
  }
}



/* 4.5 Popular Products
------------------------------------------------------------- */
.product-item .btn-wishlist {
  display: block;
  z-index: 111;
  position: absolute;
  top: 10px;
  padding: 6px 10px;
  color: var(--bs-black);
  background: var(--bs-white);
  right: 10px;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.product-item .btn-cart {
  display: block;
  z-index: 111;
  position: absolute;
  top: 60px;
  padding: 6px 10px;
  color: var(--bs-black);
  background: var(--bs-white);
  right: 10px;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.product-item:hover .btn-wishlist,
.product-item:hover .btn-cart {
  opacity: 1;
}



/* 4.6 Footer Section
/*----------------------------------------------*/

iconify-icon.social-icon {
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  border: 1px solid #FFF;
  color: #FFF;
  /* border: 1px solid var(--accent-color);
  color: var(--accent-color); */
  transition: all 0.5s ease;
}

iconify-icon.social-icon:hover {
  color: var(--accent-color);
  border: 1px solid #FFF;
  background: #FFF;
}



/*----------------------------------------------*/
/* 5 OTHER PAGES STYLE */
/*----------------------------------------------*/


/* --------------------------------------------------------------
5.1 Faqs Page
/*----------------------------------------------*/
.accordion-button {
  font-size: inherit;
}

.accordion .accordion-button::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.6rem;
  width: 1.5rem;
  height: 1.5rem;
}

.accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='minus' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
  transform: rotate(0deg);
}


/*--------------------------------------------------------------
 5.2 Price Plan page style
  --------------------------------------------------------------*/
.plan-post {
  border: 1px solid var(--accent-color);

}

span.price-tick {
  color: var(--accent-color);
}

.price-option {
  height: 320px;
}


/* --------------------------------------------------------------
5.3  Team page style
------------------------------------------------------------- */
.team-member ul.social-links {
  top: 0;
}

.team-member ul li {
  padding: 5px;
  transform: rotatey(-90deg) perspective(100px);
  transform-origin: left;
  cursor: pointer;
  transition: .5s ease-in-out;
  background-color: var(--accent-color);
}

.team-member ul li:first-of-type {
  transition-delay: .3s;
}

.team-member ul li:nth-of-type(2) {
  transition-delay: 0.6s;
}

.team-member ul li:nth-of-type(3) {
  transition-delay: 0.9s;
}

.team-member ul li:last-of-type {
  transition-delay: 1.3s;
}

.team-member:hover ul li {
  transform: rotatey(0deg);
}


/*--------------------------------------------------------------
5.4 Reviews page style
--------------------------------------------------------------*/
.reviews-components {
  border: 1px solid var(--light-text-color);
  box-shadow: 0px 12px 90px rgba(12, 12, 12, 0.06);
  border-radius: 9px;
}

iconify-icon.quote {
  font-size: 60px;
  color: var(--accent-color);
}

.rate {
  color: var(--accent-color);
}




/*--------------------------------------------------------------
5.5 Single Product page style
--------------------------------------------------------------*/

.nav-tabs .nav-link {
  transition: all 0.1s ease-in;
  border-radius: 0px;
  color: var(--black-color);
}

.nav-tabs .nav-link.show .nav-link,
.nav-tabs .nav-link.active {
  background-color: transparent;
  border-color: transparent;
  transition: all 0.1s ease-in;
  color: var(--bs-primary);
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  color: var(--bs-primary);
  isolation: isolate;
  border-color: transparent;
  transition: all 0.1s ease-in;
}

/* product-thumbnail-slider */
.product-thumbnail-slider {
  height: 600px;
}

.product-box {
  width: 25%;
}

.product-info .color-product-options .color-item {
  display: inline-block;
  vertical-align: top;
  width: 25px;
  height: 25px;
  cursor: pointer;
  border: 1px solid var(--bs-gray);
  padding: 1px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin: 0 3px;
}

.product-info .color-product-options .color-item span {
  border: 1px solid var(--bs-dark);
  display: block;
  width: 100%;
  height: 100%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

@media screen and (max-width: 800px) {
  .product-box {
    width: 50%;
  }
}


.whatsapp-link {
  position: fixed;
  bottom: 20px;
  /* Adjust as per your preference */
  right: 20px;
  /* Adjust as per your preference */
  z-index: 9999;
  /* Make sure it stays on top */
}

.whatsapp-link img {
  width: 50px;
  /* Adjust the size of the icon */
  height: auto;
  /* To maintain aspect ratio */
}


.sticky-top {
  position: -webkit-sticky;
  /* For Safari */
  position: fixed;
  top: 0;
  left: 0;
  /* Ensure it starts from the left edge */
  width: 100%;
  /* Make it span the full width */
  z-index: 1000;
  /* Ensure the navbar is above other content */
  background-color: white;
  /* Ensure the background is not transparent */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Optional: add a shadow for better visibility */
}


.google-map-container {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.google-map-box {
  width: 100%;
  /* Adjust the width as needed */
  max-width: 1750px;
  /* Optional: Set a max width */
  height: 400px;
  /* Fixed height for the map */
  border: 2px solid var(--accent-color);
  /* Optional: Add border */
  border-radius: 8px;
  /* Optional: Rounded corners */
  overflow: hidden;
  /* Ensures the iframe fits inside */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Optional: Add a shadow */
}

.rating {
  display: flex;
  gap: 5px;
}

.rating .star {
  color: gold;
  /* Gold-colored stars */
  font-size: 1.2rem;
  /* Adjust size as needed */
}



.about-section {
  display: flex;
  max-width: 1700px;
  height: 800px;
  margin: 50px auto;
  background-color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  gap: 20px;
  /* Added gap between text and image */
}

.about-content {
  flex: 1;
  padding: 60px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Center the content vertically */
}

.about-content h2 {
  font-size: 35px;
  font-weight: bold;
  margin-bottom: 20px;
}

.about-content p {
  font-size: 26px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.about-content li {
  font-size: 23px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}

.about-contact-btn {
  padding: 8px 20px;
  text-transform: uppercase;
  transition: 0.4s ease-in-out;
  font-weight: 500;
  letter-spacing: 0.0675rem;
  border-radius: 0;
}



.about-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
  .about-section {
    flex-direction: column;
    height: auto;
  }

  .about-content {
    padding: 30px;
    text-align: center;
  }

  .about-image img {
    object-fit: contain;
  }
}

@media (max-width: 768px) {
  .about-content h2 {
    font-size: 28px;
  }

  .about-content p {
    font-size: 22px;
  }

  .about-content li {
    font-size: 20px;
  }

  .about-contact-btn {
    font-size: 18px;
  }
}

/* Gallery Container (for Horizontal Scrolling) */
.gallery-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  white-space: nowrap;
}


.gallery-items {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.gallery-items img {
  width: 270px;
  height: 280px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 10px;
  cursor: pointer;
}

/* Buttons */
button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  transition: transform 0.2s ease-in-out;
}

button:hover {
  transform: scale(1.1);
}

/* Align Buttons Properly */
button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

button:hover {
  background-color: rgba(255, 255, 255, 1);
}

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  text-align: center;
  padding-top: 50px;
}

/* Modal image styling */
.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* Close button styling */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Modal Navigation Buttons */
.modal-prev, .modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border: none;
  cursor: pointer;
  padding: 10px;
  transition: transform 0.2s ease-in-out;
}

.modal-prev {
  left: 20px;
}

.modal-next {
  right: 20px;
}

.modal-prev:hover, .modal-next:hover {
  transform: scale(1.1);
}




/* Background overlay */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  z-index: 9999;
}

/* Popup Box */
.popup {
  background: linear-gradient(135deg, #008080, #004d4d);
  padding: 30px;
  border-radius: 15px;
  width: 500px;
  text-align: center;
  position: relative;
  color: #fff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: scale(0.8);
  transition: transform 0.4s ease-in-out;
}

/* Show animation */
.popup-show {
  visibility: visible;
  opacity: 1;
}

.popup-show .popup {
  transform: scale(1);
}

/* Close Button */
.popup-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-weight: bold;
  color: #008080;
  transition: 0.3s;
}

.popup-close:hover {
  background: #ff5555;
  color: white;
}

/* Heading */
.popup h2 {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #FFD700;
}

/* Text */
.popup p {
  font-size: 18px;
  margin-bottom: 15px;
  color: #f1f1f1;
}

.popup span {
  display: block;
  font-size: 16px;
  margin-bottom: 10px;
  opacity: 0.9;
}

/* Button Container */
.button-container {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

/* Book Now Button */
.book-now-btn {
  background: linear-gradient(135deg, #00A896, #00747C);
  padding: 15px 35px;
  text-transform: uppercase;
  transition: 0.4s ease-in-out;
  font-weight: 500;
  letter-spacing: 0.0675rem;
  border-radius: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  white-space: nowrap;
  text-align: center;
}

.book-now-btn a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  display: block;
}

.book-now-btn:hover {
  background: linear-gradient(135deg, #00747C, #005A5E);
  transform: translateY(-3px);
}
/* Ensures all nav links in the navbar are black */
.offcanvas .nav-link {
color: black !important;
}