/*
Theme Name: Pulukisi Residences
Theme URI: https://mokshastudio.com/
Author: Moksha Design Studio
Author URI: https://mokshastudio.com/
Description: Pulukisi Residences is specially designed product by Moksha.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pulukisi
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/
body {
    --swiper-theme-color: var(--bs-primary);
    --custom-easing: cubic-bezier(.17, .67, .83, .67);

    /* bootstrap */
    --bs-body-font-family: "Source Sans 3", sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.7;
    --bs-body-color: #555555;
    --bs-body-color-rgb: 85, 85, 85;

    --bs-primary: #EF6969;
    --bs-primary-dark: #a83737;
    --bs-secondary: #4F506B;
    --bs-secondary-subtle: #a4a5c0;
    --bs-black: #111;
    --bs-light: #F9EEE8;
    --bs-dark: #304248;
    
    --bs-primary-rgb: 239, 105, 105;
    --bs-primary-dark-rgb: 168, 55, 55;
    --bs-secondary-rgb: 79, 80, 107;
    --bs-black-rgb: 17, 17, 17;
    --bs-light-rgb: 249, 238, 232;
    --bs-dark-rgb: 48, 66, 72;

    --bs-link-color: var(--bs-dark);
    --bs-link-color-rgb: 17, 17, 17;
    --bs-link-decoration: underline;
    --bs-link-hover-color: var(--bs-primary);
    --bs-link-hover-color-rgb: 17, 17, 17;

    --bs-heading-color: var(--bs-black);

  }

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    --bs-nav-pills-link-active-bg: var(--bs-secondary);
}
.btn-primary {
    border-radius: 0.625rem;
    text-transform: uppercase;
    transition: 0.3s ease-in;
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-dark);
    --bs-btn-hover-border-color: var(--bs-primary-dark);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ddd;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.bg-secondary-subtle {
    background-color: #f4e6da !important;
}
/* nav */

#main-menu a {
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}

/*-------------------- Single Room Photo Gallery -------------------*/
.swiper.image-gallery .swiper-wrapper {
  max-height: 750px;
}
.swiper.image-gallery .swiper-slide {
  width: auto;
  text-align: center;
  font-size: 18px;
  background: transparent;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

@media only screen and (max-width: 768px) {
  .swiper.image-gallery .swiper-slide img {
    max-height: 400px;
    object-fit: contain;
  }
}

.swiper-button-next, .swiper-button-prev {
  width: auto;
}
.swiper-button-prev:after, .swiper-button-next:after {
  content: '';
}

/* gravity forms */
#gform_wrapper_1.gform_wrapper .top_label input.medium.datepicker,
#gform_wrapper_2.gform_wrapper .top_label input.medium.datepicker {
  width: 100%;
}
#gform_wrapper_1.gform_wrapper .top_label .gfield_label,
#gform_wrapper_2.gform_wrapper .top_label .gfield_label {
  display: none;
}
#gform_wrapper_1.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
#gform_wrapper_2.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]),
#gform_wrapper_1.gform_wrapper textarea,
#gform_wrapper_2.gform_wrapper textarea {
  padding: 8px 12px;
  border: none;
  border-radius: 10px;
}
#gform_wrapper_1.gform_wrapper .gform_footer input.button, 
#gform_wrapper_2.gform_wrapper .gform_footer input.button, 
#gform_wrapper_1.gform_wrapper .gform_footer input[type=submit],
#gform_wrapper_2.gform_wrapper .gform_footer input[type=submit] {
  width: 100%;
  padding: 10px;
  background: #111;
  color: #fff;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 700;
}
#gform_wrapper_2.gform_wrapper textarea,
#gform_wrapper_2.gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {
  border: 1px solid #aaa;
}
/* icon-box */
.icon-box svg {
  flex-basis: 40%;
}

ol.wp-block-latest-comments {
  padding-left: 0;
}

/* attractions */
#filters a.is-checked {
  background: var(--bs-primary);
  border-radius: 10px;
  padding: 0 7px;
  color: #fff;
}

/* banner */
.banner-heading {
  font-family: 'Source Sans 3', serif;
  weight: 900;
  font-size:98px;
  letter-spacing:-0.06em;
  line-height:1em;
}
.banner-image {
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .banner-heading {
    font-size:48px;
  }
  .banner-image {
    width: 220%;
  }
}



/* - Responsive Tour Tabs Navigation
--------------------------------------------------------------*/
/*
SCSS variables and mixins
*/
/*
Some styles to make this demo look pretty (or at least decent)
If you want to style everything yourself, you shouldn't need these
*/
.tabbed-content {
  /*background: #fff;
  box-shadow: 1px 1px 6px #ccc;
  max-width: 600px;
  padding: 1em;*/
  margin: 1em auto;
}

.tabbed-content .tabs ul {
  margin: 0;
  padding: 0 0 1em 0;
}

.tabbed-content .tabs ul li a {
  padding: .5em 1em;
  border-radius: 0.375rem;
  background-color: var(--bs-secondary-subtle);
  color: #fff;
  text-decoration: none;
}

.tabbed-content .tabs ul li a:hover {
  background-color: var(--bs-secondary);
}
.tabbed-content .tabs ul li a.active {
  background-color: var(--bs-primary);
}

.tabbed-content .item {
  position: relative;
  margin-bottom: 2px;
}

.tabbed-content .item::before {
  cursor: pointer;
  font-weight: bold;
  background: #eee;
  padding: .5em;
  display: block;
  margin-bottom: 20px;
  padding: 1em;
  background: none;
  border-bottom: 3px solid #d5d5d5;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #999;
}

.tabbed-content .item.active::before {
  color: #111;
}

.tabbed-content .item.active .item-content {
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

@media all and (max-width: 800px) {
  .tabbed-content .item.active .item-content {
    padding-top: 0;
  }

  .tabbed-content .tabs-side .tabs li {
    margin-bottom: 2px;
  }

  .tabbed-content .item::after {
    font-family: 'icomoon';
    position: absolute;
    top: 20px;
    right: 20px;
    color: #d5d5d5;
  }

  .tabbed-content .item::after {
    content: "\f078";
  }

  .tabbed-content .item.active::after {
    content: "\f077";
  }
}

/* 
The project specific CSS starts here
This is the minimum CSS that you will need in order for this to work
*/
.tabbed-content .tabs {
  display: none;
}

.tabbed-content .item {
  min-height: 2em;
}

.tabbed-content .item::before {
  content: attr(data-title);
}

.tabbed-content .item .item-content {
  opacity: 0;
  visibility: hidden;
  height: 0;
}

.tabbed-content .item.active .item-content {
  opacity: 1;
  visibility: visible;
  height: auto;
}

@media all and (max-width: 800px) {
  .tabbed-content.open-in-mobile .item .item-content {
    opacity: 1;
    visibility: visible;
    height: auto;
  }

}

@media all and (min-width: 800px) {
  .tabbed-content .tabs {
    display: block;
  }

  .tabbed-content .tabs li {
    display: inline-block;
  }

  .tabbed-content .tabs li a {
    display: block;
  }

  .tabbed-content .item {
    min-height: 0;
  }

  .tabbed-content .item::before {
    display: none;
  }

  .tabbed-content.tabs-side .tabs {
    width: 150px;
    float: left;
  }

  .tabbed-content.tabs-side .tabs li {
    display: block;
  }

  .tabbed-content.tabs-side .item {
    margin-left: 150px;
  }

}

/* vertical tabs */
.tabbed-content.v-tabs {
  display: flex;
}

.tabbed-content.v-tabs .tabs {
  width: 30%;
  border-right: 1px solid #d9d9d9;
}

.tabbed-content.v-tabs .tab-contents {
  padding: 10px 0 10px 40px;
  width: 80%;
}

.tabbed-content.v-tabs .tabs li {
  margin: 0;
}

.tabbed-content.v-tabs .tabs ul li a {
  padding: 15px;
  background: none;
  border-bottom: 1px solid #d9d9d9;
  border-radius: 8px 0 0 8px;
}

.tabbed-content.v-tabs .tabs ul li a.active {
  background-color: #5e966d;
  background: linear-gradient(90deg, rgba(94, 150, 109, 1) 0%, rgba(154, 187, 20, 1) 50%);
  color: white;
}

.tabbed-content.v-tabs .tabs ul li:last-child a {
  border: none;
}

.tabbed-content.v-tabs .tour-package-list {
  column-count: 3;
  margin: 0;
}

.tabbed-content.v-tabs .tour-package-list a {
  font-size: 14px;
  display: block;
}