@import 'https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Jost:wght@100;200;300;400;500;600;700;800;900&display=swap';

:root {
    --base-color: #fb7d61;
    --very-light-gray: #EEE8E6;
    --dark-gray: #36332e;
    --medium-gray: #858181;
    --light-medium-gray: #f8f3f0;
    --alt-font: 'Rufina', serif;
    --primary-font: 'Jost', sans-serif
}
.nav-bottom
{
    display: none;    
}
body, html {
    overflow-x: hidden
}

body {
    font-size: 18px;
    line-height: 30px
}
.background-about {
    background: #2d2d2d;
    padding-bottom: 0px;
}
.navbar .navbar-nav .nav-link {
    font-size: 13pt;
    padding: 10px 15px;
    font-weight: 400;
    letter-spacing: .5px;
    text-transform: uppercase;
}

header .navbar-brand img {
    max-height: 80px;
}

.header-icon .header-social-icon a {
    padding-left: 10px
}

.swiper-number-pagination-style-01 .swiper-number .swiper-pagination-bullet:after {
    height: 1px;
    background-color: #fff;
}

.magic-drag-cursor #ball-cursor:before {
    content: "DRAG";
    font-size: 14px;
    font-weight: 500;
    font-family: var(--primary-font) !important
}

.slider-navigation-style-01.swiper-button-next {
    right: 30px
}

.slider-navigation-style-01.swiper-button-prev {
    left: 30px
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 25px
}

h3 {
    line-height: 1.2;
}

h4 {
    line-height: 2.375rem
}

.btn {
    font-family: var(--primary-font);
    letter-spacing: 1px;
    font-weight: 400
}

    .btn.btn-double-border.btn-border-base-color {
        color: #fff;
        background: #b57f35;
    }

        .btn.btn-double-border.btn-border-base-color:after {
            border-color: #fff;
            transition: .3s ease
        }

.bg-gradient-nero-grey-brown {
    background-image: linear-gradient(to right,#000000,#000000)
}

.bg-base-color-transparent {
    background-color: rgba(244,134,110,.9)
}

.bg-base-color-transparent-light {
    background-color: rgba(244,134,110,.2)
}

.bg-gradient-dark-transparent {
    background: -webkit-gradient(linear,left bottom,left top,color-stop(7%,#36332e),to(transparent));
    background: linear-gradient(to top,#36332e 7%,transparent 100%)
}

.border-color-light-gray {
    border-color: #fff!important;
}

.swiper-button-prev.slider-custom-text-prev, .swiper-button-next.slider-custom-text-next {
    border-color: #ccc;
}

.hover-box.dark-hover:hover .text-light-opacity {
    opacity: .5
}

.services-box-style-02:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}
.logo-bottom{
    width: 320px;
}
.large-icon li {
    margin: 0 3px
}

.social-icon-style-04 ul li a span {
    background: #fff;
}

.team-style-05 .social-icon a {
    margin: 0 10px
}

.page-title-extra-large h1 {
    font-size: 4.375rem;
    line-height: 4.375rem
}

.tab-style-04 .nav-tabs .nav-item .nav-link, .tab-style-04 .nav-tabs .nav-item .nav-link.active, .tab-style-04 .nav-tabs .nav-item .nav-link.show, .tab-style-04 .nav-tabs .nav-item .nav-link:hover {
    color: #77d3d5;
}

.tab-style-04 .nav-tabs .nav-item {
    padding: 0 16px
}

    .tab-style-04 .nav-tabs .nav-item:first-child {
        padding-left: 0
    }
.bg-gold
{
    background-image: linear-gradient(120deg, #bb8636, #e3b566, #fedd9b, #bb8636);
    width: 250px;
    padding: 30px 0px;
    border-radius: 60px;
    font-weight: 400;
    font-family: "Work Sans", sans-serif;
}
.tab-style-08 ul .nav-item {
    border-color: #dcd7d4
}

    .tab-style-08 ul .nav-item .nav-link, .tab-style-08 ul .nav-item .nav-link.active, .tab-style-08 ul .nav-item .nav-link:hover {
        color: var(--dark-gray)
    }

.arrow_box.marker02:after {
    width: 65px;
    height: 80px;
    background: url(../../images/demo-spa-salon-contact-map-icon.png) left center no-repeat;
    left: -22px;
    top: -60px
}

footer .elements-social .medium-icon li a {
    width: 50px;
    height: 50px
}

footer.half-footer {
    padding: 20px 0
}
.default-logo2 {
    display: none;
}
@media(max-width:1700px) {
    .navbar .navbar-nav .nav-link {
        font-size: 15px;
    }
}
@media(max-width:1500px) {
    .navbar .navbar-nav .nav-link {
        padding: 0px 5px;
    }
    .header-mb {
        display: none !important;
    }

    .menu-mb {
        width: 100%;
    }

    .default-logo2 {
        display: block;
        width: 200px;
        margin-top: 10px;
    }
}
@media(max-width:1399px) {
    .center-logo .navbar-nav, header.sticky .center-logo .navbar-nav .nav-link {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media(max-width:1199px) {
    .navbar.center-logo .navbar-nav .nav-link, header.sticky .center-logo .navbar-nav .nav-link {
        padding: 50px 2px
    }
    .default-logo2 {
        display: block;
        width: 300px;
    }
    .lg-me-2px {
        margin-right: 2px !important
    }
    .navbar .navbar-nav .nav-link {
        font-size: 15px;
    }
}
@media (max-width:1024px) {
    .navbar .navbar-nav .nav-link {
        font-size: 14px;
    }
}
@media(max-width:1020px) {
    .navbar-full-screen-menu-inner.bg-transparent, .navbar-modern-inner.bg-transparent, .navbar.bg-transparent {
        background-color: #fff!important;
    }
    .navbar.center-logo .navbar-nav .nav-link, header.sticky .center-logo .navbar-nav .nav-link {
        color: #000;
    }
}

@media(max-width:991px) {
    .navbar.center-logo .navbar-nav .nav-link, header.sticky .center-logo .navbar-nav .nav-link {
        padding: 50px 10px;
    }

    .menu-mb {
        width: 50px;
    }

    .default-logo2 {
        display: none;
    }

    .default-logo {
        display: block;
    }

    .navbar .navbar-nav .nav-link {
        font-size: 16px;
    }

    .header-mb {
        display: block !important;
    }

    .navbar-full-screen-menu-inner.bg-transparent, .navbar-modern-inner.bg-transparent, .navbar.bg-transparent {
        background-color: #808080!important;
    }
    header .navbar-brand, header.sticky .fixed-header .navbar-brand, header.sticky .disable-fixed .navbar-brand {
        padding: 15px 0
    }

    .tab-style-08 ul .nav-item .nav-link {
        padding: 15px 10px
    }

    footer.half-footer {
        padding: 20px 0px 70px 0px;
    }
    .groupfbye {
        display: none;
    }
    
    header .navbar-brand img {
        margin-top: 0px;
    }
    

    .groupfbye {
        display: none;
    }

    #book_online {
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        right: -62px;
        top: 55%;
    }
}
@media(max-width:768px) 
{
    .Copyright{
        margin-bottom: 50px;
    }
    #subbar {
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        right: -44px;
        top: 25%;
        border-radius: 5px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        z-index:9;
       
    }
    #book_online, #book_online1, #booking
    {
        transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        right: -44px;
        top: 39%;
        border-radius: 5px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        z-index:9;
    }
    .header-mb {
        display: block !important;
    }
    .nav-bottom
    {
        position: fixed;
        bottom: 10px;
        left: 0;
        width: 100%;
        background: none;
        z-index: 997;
        display: block;
        background: #77d3d5;
        padding: 2px;
        border-radius: 50px;
        padding: 10px 10px;
        display:block;
    }
    .nav-bottom ul
    {
        overflow: hidden;
        width: 100%;
        padding: 0 !important;
        margin-top: 0;
        margin-bottom: 0;
        border-radius: 120px;
    }
    .nav-bottom ul li
    {
        width: 48%;
        float: left;
        padding: 1px 0;
        text-align: center;
        display: block;
        margin: 0px 2px;
    }
    #direction_m
	{
		cursor:pointer;	
		color:#fff;
	}
	#direction_m span
	{
		display:block;
		color:#fff;
	}
    .nav-bottom ul li a
    {
        display: block;
        font-size: 15pt;
        text-decoration: none;  
        line-height: 22px;
        color: #fff;      
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        text-transform: uppercase;
    }
   
    .nav-bottom ul li a span
    {
        color: #fff;       
         
    }
    .nav-bottom ul li:hover
    {
       opacity:0,5;
    }
    .rung {
    animation: code-pro-rung-lac 2s ease infinite;
}
@-webkit-keyframes code-pro-rung-lac {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    10% {
        -webkit-transform: rotate(-10deg) scale(1) skew(1deg);
        }
    20% {
        -webkit-transform: rotate(10deg) scale(1) skew(1deg);
    }
    30% {
        -webkit-transform: rotate(-10deg) scale(1) skew(1deg);
    }
    40% {
        -webkit-transform: rotate(10deg) scale(1) skew(1deg);
    }
    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
}
.button3 {
    animation: glowing 1300ms infinite;
}
        
.button3 {
    margin: 15px auto;
    color: #ffffff;
    cursor: pointer;
    border-radius: 10px !;
    border: 0px solid #626262;
}
    .button3.pulse-button {
        animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in;
        font-size:10pt;
    }

    /* Initiate color change for pulse-on-hover */
    .button3.pulse-button-hover {
        animation: colorShift 10000ms infinite ease-in;
    }

    /* Continue animation and add shine on hover */
    .button3:hover,
    .button3:focus {
        animation: borderPulse 1000ms infinite ease-out, colorShift 10000ms infinite ease-in, hoverShine 200ms;
    }
/* Declate color shifting animation */
    @keyframes colorShift {
    0%, 100% {
        background: linear-gradient(321deg, #77d3d5, #77d3d5, #77d3d5, #77d3d5);
    }

    33% {
        background: #059093;
    }

    66% {
        background: #77d3d5;
    }
}

        /* Declare border pulse animation */
@keyframes borderPulse {
    0% {
        box-shadow: inset 0px 0px 0px 5px rgba(140, 140, 140,.4), 0px 0px 0px 0px rgba(140,140,140,0.7);
    }

    100% {
        box-shadow: inset 0px 0px 0px 3px rgba(140, 140, 140,.2), 0px 0px 0px 10px rgba(140,140,140,0);
    }
}
    
    
    
    @keyframes glowing2 {
    0% {
        background-color: #e3af42;
        box-shadow: 0 0 5px #fff;
    }

    50% {
        background-color: #be8a1c;
        box-shadow: 0 0 30px #e0b83d;
    }

    100% {
        background-color: #e3af42;
        box-shadow: 0 0 5px #fff;
    }
}
        
 .button5 {
    -webkit-border-radius: 60px;
    border-radius: 60px;
    border: none;
    color: #626262;
    cursor: pointer;
    display: inline-block;
    font-family: sans-serif;
    text-align: center;
    text-decoration: none;
}

@keyframes glowing2 {
    0% {
        background:linear-gradient(321deg, #77d3d5, #77d3d5, #77d3d5, #77d3d5);
        box-shadow: 0 0 5px #fff;
    }

    50% {
        background-color: #77d3d5;
        box-shadow: 0 0 30px #77d3d5;
    }

    100% {
        background:linear-gradient(to bottom right, #77d3d5, #77d3d5, #77d3d5);
        box-shadow: 0 0 5px #fff;
    }
}

.button5 {
    animation: glowing2 1300ms infinite;
}
.bt3 {
position: relative;
display: inline-block;
transition: 0.5s;
overflow: hidden;
}
.bt3:hover {
background: #fff;
color: #050801;
box-shadow: 0 0 5px #77d3d5, 0 0 25px #77d3d5, 0 0 50px #77d3d5, 0 0 200px #77d3d5;
-webkit-box-reflect: below 1px linear-gradient(transparent, #77d3d5);
}
.bt3:nth-child(1) {
/*filter: hue-rotate(270deg);*/
}

.bt3:nth-child(2) {
/*filter: hue-rotate(110deg);*/
}

.bt3 span {
position: absolute;
display: block;
}
.bt3 span:nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,#fff);
animation: animate1 2s linear infinite;
}
@keyframes animate1 {
    0% {
        left: -100%;
    }

    50%,100% {
        left: 100%;
    }
}
.bt3 span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#fff);
    animation: animate2 2s linear infinite;
    animation-delay: 0.25s;
}
.bt3 span:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#fff);
    animation: animate3 2s linear infinite;
    animation-delay: 0.50s;
}
.bt3 span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#fff);
    animation: animate4 2s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4 {
    0% {
        bottom: -100%;
    }

    50%,100% {
        bottom: 100%;
    }
}

@-webkit-keyframes anime {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes anime {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}
        
@keyframes animate2 {
    0% {
        top: -100%;
    }

    50%,100% {
        top: 100%;
    }
}
@keyframes animate3 {
    0% {
        right: -100%;
    }

    50%,100% {
        right: 100%;
    }
}	
}
@media(max-width:767px) {
    footer.half-footer {
        padding: 50px 0
    }

    footer .large-icon li {
        margin: 0
    }

    #map {
        height: 400px !important
    }

    .tab-style-04 .nav-tabs .nav-item, .tab-style-04 .nav-tabs .nav-item:first-child {
        padding: 0 16px
    }

    .slider-navigation-style-01.swiper-button-next {
        right: 15px
    }

    .slider-navigation-style-01.swiper-button-prev {
        left: 15px
    }
    .navbar.bg-header-mb{
        background: #808080!important;
    }
}
@media(max-width:600px) {
    .contact-title {
        font-size: 20pt;
    }
    .img-none{
        display: none;
    }
    .bg-products {
        padding: 20px;
    }
    .swiper-button-next, .swiper-button-prev{
        margin-top: -200px;
    }
    header .navbar-brand, header.sticky .fixed-header .navbar-brand, header.sticky .disable-fixed .navbar-brand {
        padding: 5px 10px;
    }
    header .navbar-brand img {
        max-height: 80px;
    }
    #subbar, #booking {
        right: -41px;
        font-size: 10.5pt;
        padding: 5px 15px 2px 15px;
        line-height: 28px;
        top: 20%;
    }
    #booking {
        right: -43px;
        font-size: 10.5pt;
        padding: 5px 15px 2px 15px;
        line-height: 28px;
        top: 40%;
    }
    .party-img img{
        width: 100px;
    }
    .bg-gold {
        padding: 14px 0px;
    }
    .page-title-parallax-background{
        padding: 0px;
    }
    .page-title {
        margin: 30px 0px !important;
    }
    .page-title2 {
        margin: 0px 0px !important;
    }
    .page-title-extra-large h1 {
        font-size: 3.375rem;
    }
}
@media(max-width: 415px) {
    .fs-text {
        letter-spacing: 2px!important;
    }
     .btn-link.text-dark-gray, a.text-dark-gray-hover:hover
    {
        font-size: 11pt;
    }
    .title_sv
    {
        font-size:22pt;
    }
    header .navbar-brand img {
        max-height: 50px;
    }
}
@media(max-width: 400px) {
    .fs-text {
        letter-spacing: 0px!important;
    }
        /*.section-sv1-group ul li, .row-name, .row-group-sv li sub {
        font-size: 9pt;
        font-weight: 600;
    }*/
    .btn-link.text-dark-gray, .text-dark-gray, a.text-dark-gray-hover:hover
    {
    }
    .title_sv
    {
        font-size:20pt;
    }
}
@media(max-width: 320px) {
  
        .section-sv1-group ul li, .row-name, .row-group-sv li sub {
        font-size: 11pt;
        font-weight: 600;
    }
    .price-sv
     {
        font-size: 11pt;
    }
    .btn-link.text-dark-gray, .text-dark-gray, a.text-dark-gray-hover:hover
    {
    }
    .title_sv
    {
        font-size:15pt;
    }
}