/*
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: #11120D;
  --secondary-color: #796d4c;
  --black-color: #3C3C3C;
  --light-black-color: #343536;
  --dark-color: #797876;
  --primary-color: #11120D;
  --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: #11120D;
  --bs-light-rgb: 255, 255, 255;
  --bs-primary-rgb: 17, 18, 13;
  --bs-secondary-rgb: 121, 109, 76;
  --swiper-theme-color: #111 !important;
  --cadet-blue-color: #9AB4B7;
}

/* Fonts */
:root {
  --heading-font: "Oswald", sans-serif;
  --body-font: "Source Sans 3", 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: #ffffff;
  font-family: var(--body-font);
  font-size: 18px;
  font-weight: 400;
  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: 6em;
  padding-bottom: 6em;
}

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

.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;
}


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

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


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

.btn {
  padding: 15px 35px;
  text-transform: uppercase;
  transition: all 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: var(--secondary-color);
  --bs-btn-hover-border-color: var(--secondary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--secondary-color);
  --bs-btn-active-border-color: var(--secondary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--secondary-color);
  --bs-btn-disabled-border-color: #df808f;
}

.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(--black-color);
  font-family: var(--heading-font);
  font-weight: 300;
  /* padding: 0px 18px; */
  font-size: 16px;
}

.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
/*----------------------------------------------*/

.navbar {
  width: 99%;
  margin: 0 auto;
  border-radius: 0.5em;
  box-shadow: 0px 40px 40px rgba(0, 0, 0, 0.33);
  z-index: 3;
}

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

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

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

.dropdown-menu {
  box-shadow: 0 6px 20px rgba(0,0,0,0.7) !important;
}

/* .slide1,
.slide2 {
  position: absolute;
  display: inline-block;
  height: 30px;
  border-radius: 0.5em;
}

.slide1 {
  background-color: rgb(170, 190, 255);
  z-index: 2;
}

.slide2 {
  opacity: 0;
  background-color: rgba(170, 190, 255, 0.5);
  z-index: 1;
  box-shadow: 0 0 20px #ffffffaa inset;
}

.squeeze {
  transform: scale(0.9);
} */

#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;
}


@media (max-width: 768px) {
  .location,
  .social-icon {
      font-size: 0.8rem; /* Adjust this value as needed. 0.8rem is about 13px. */
  }
}

@media (max-width: 992px) {

  /* 1. 减小导航栏的垂直内边距 */
  #primary-header {
      padding-top: 0.5rem !important;
      padding-bottom: 0.5rem !important;
  }

  /* 2. 减小左侧品牌文字的字体大小 */
  #primary-header .navbar-brand {
      font-size: 1.5rem; /* 从 fs-3 (1.75rem) 减小到 fs-4 (1.5rem) 的大小 */
  }
  
  /* 3. (可选但推荐) 适当减小汉堡菜单图标的大小 */
  #primary-header .navbar-toggler svg {
      width: 45px;
      height: 45px;
  }
}

@media (max-width: 992px) {  /* 只在移动端有效 */
  .offcanvas-end {
    width: 50% !important;     /* 改这里控制宽度，比如75%，你可以调成60%也行 */
    max-width: 320px;          /* 限制最大宽度，避免太宽 */
  }

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

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

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%;
  }
}

#slider .swiper-slide {
  height: 90vh; /* 默认高度 */
  min-height: 500px; /* 防止在极端屏幕比例下过小 */
}

#slider .banner-title {
  font-size: 45px; /* 默认字体大小 */
}

/* 2. 平板设备 (小于 992px) */
@media (max-width: 992px) {
  #slider .swiper-slide {
      height: 80vh; /* 减小高度 */
  }
  #slider .banner-title {
      font-size: 38px; /* 减小字体 */
  }

  .content-text {
    font-size: 1.1rem;
    text-align: left;
  }
}

/* 3. 移动设备 (小于 768px) */
@media (max-width: 768px) {
  #slider .swiper-slide {
      height: 75vh; /* 进一步减小高度 */
  }
  #slider .banner-title {
      font-size: 28px; /* 进一步减小字体 */
      line-height: 1.3; /* 调整行高，防止文字挤在一起 */
  }
  
  #slider .main-slider-button-next svg,
  #slider .main-slider-button-prev svg {
      width: 40px;
      height: 40px;
  }
}

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

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

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

/* 4.3 categories Section
/*----------------------------------------------*/
@media (max-width: 768px) {
  .blog-paragraph {
    font-size: 16px;
  }
}

/* 
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;
}

.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
/*----------------------------------------------*/
svg.social-icon {
  font-size: 1.125rem;
  padding: 0.75rem;
  border-radius: 4.375rem;
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
  background-color: #fff;
  transition: all 0.5s ease;
}

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

.menu-item {
  margin-bottom: 0.3rem;
}

/* .footer-link{
  color: #8b8f8f;
} */

.footer-link:hover{
  color: var(--light-color);
}

.navbar-brand {
  white-space: normal !important;  /* 允许文字换行 */
  word-break: break-word;          /* 必要时在词中间断行 */
}

/*----------------------------------------------*/
/* 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;
}

.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%;
  }
}
/* Inline SVG replacements preserve the original icon boxes without network requests. */
svg.social-icon { width: 2.75rem; height: 2.75rem; vertical-align: middle; }
svg.video-icon { width: calc(1em + 3rem); height: calc(1em + 3rem); }