/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

#logo{
    cursor: pointer;
}
.logo-default img{
    height: 60px;
}
.logo-dark img{
    padding: 20px 7px;
}
a{color: #dea309;}

#header .header-inner #logo, #header #header-wrap #logo { padding: 0px;}

.parallax-container{background-position: center !important;}

ul.list-icon li{
    color: #999;
}
/* For FAQS page */
.ac-item.portfolio-item {
    height: auto !important;
    position: relative !important;
    top: 0 !important;
}

#portfolio {
    height: auto !important;
}

ul.faqspage{
            list-style: none;
            padding: 0;
            position: relative;
            height: auto;
        }
ul.faqspage li{
    position: relative;
    margin-right: 6px;
    border: 0;
    margin-bottom: -1px;
    display: inline-block;
}
ul.faqspage li a{
    font-weight: 600;
    display: block;
    position: relative;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 15px;
    color: #484848;
    border-radius: 50px;
    transition: all .3s ease;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
}
 ul.faqspage li.active a{
    border-color: #dea309;
    color: #dea309;
    background-color: transparent;
 }
/* ---------- */

.panel-danger>.panel-heading {
    color: #e73d4a;
    background-color: #fbe1e3;
    border-color: #fbe1e3;
    text-align: center;
}
.panel-danger>.panel-heading h4{color: #e73d4a;}

.fhead{
    color: white;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 24px;
    margin-bottom: 10px;
}

.booking-embed{ width: 100%; }

.booking-iframe{
  display:block;
  width:100%;
  height: 800px; /* fallback until first resize message arrives */
  border:0;
}

#scrollTop { display: none !important; }
html { scroll-behavior: auto !important; }

/* Homepage facilities masonry */
.facilities-masonry {
    column-count: 3 !important;
    column-gap: 30px !important;
    width: 100%;
}

.facilities-masonry .facility-item {
    display: inline-block !important;
    width: 100% !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    vertical-align: top;
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
}

.facilities-masonry .facility-item > div {
    display: block;
    width: 100%;
}

/* Tablet */
@media (max-width: 991px) {
    .facilities-masonry {
        column-count: 2 !important;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .facilities-masonry {
        column-count: 1 !important;
    }
}

@media (max-width: 1280px) {

    /* Open menu wrapper stays white */
    .mainMenu-open #header .header-inner {
        background-color: #ffffff !important;
        position: relative;
    }

    /* Create pink bar only at the top */
    .mainMenu-open #header .header-inner:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background-color: #e9406a;
        z-index: 0;
    }

    /* Keep logo/burger above pink bar */
    .mainMenu-open #header .header-inner > .container {
        position: relative;
        z-index: 1;
    }

    /* Push menu links below pink bar */
    .mainMenu-open #header #mainMenu {
        background-color: #ffffff !important;
        padding-top: 20px;
    }

    #mainMenu:not(.menu-overlay) nav > ul > li > a {
        color: #000000 !important;
    }

    #mainMenu nav > ul > li.current > a,
    #mainMenu nav > ul > li:hover > a,
    #mainMenu nav > ul > li:focus > a {
        color: #e9406a !important;
        background-color: #ffffff !important;
    }
}