@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,500,500italic,600,600italic,700,700italic,200,200italic);

body{
font-family:"Open Sans";
font-size:14px;
}

body.de_light{
color:#777;
}

h1,h2,h3,h4,h5,
h1.big-font,.type-wrap.big-font,
#mainmenu,
.de_count h3,
.coming-soon-text h1{
font-family:"Montserrat";
font-weight:bold;
letter-spacing:0;
text-transform:none;
}

h1.big-font,.type-wrap.big-font{
font-size:84px;
text-transform:uppercase;
}

.testimonial-list, .testimonial-list li{
font-family:Open Sans;	
}

#mainmenu{
font-size:13px;
}

.testimonial-list, .testimonial-list li{
font-style:normal;
}

.testimonial-list.big-font li{
font-size:30px;
}

#explore-4{
background:#0b0b0c !important;
}

.gallery-col .item{
margin-bottom:30px;
}


footer{background:#0b0b0c;}
.subfooter{background:#171719;}


.absolute{position:absolute; z-index:1;}
.width100{width:100%;}

/* Home slider: dark semi-transparent backdrop behind the two caption
   lines (the big title and the subtitle underneath it) so white/light
   text stays readable on slider images that are light or white
   themselves. Applies at every screen size, not just mobile.
   inline-block keeps the backdrop hugging the text instead of
   stretching full-width, so it reads as a label/badge behind the
   words rather than a bar across the slide. */
#revolution-slider .slide-caption-stack .tp-caption.big-white,
#revolution-slider .slide-caption-stack .tp-caption.ultra-big-white {
    display: inline-block !important;
    background-color: rgba(0, 0, 0, 0.30) !important;
    /*padding: 14px 22px !important;*/
    padding:5px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}

/* Desktop only: the slider plugin writes line-height:0 onto the subtitle line,
   which made its backdrop collapse to just the padding when the padding was
   reduced. Give it a real line-height so the box always wraps the text.
   (Phones already get a line-height from the mobile rules below.) */
@media only screen and (min-width: 768px) {
    #revolution-slider .slide-caption-stack .tp-caption.big-white {
        line-height: 1.3 !important;
    }
}

/* Home slider: improve caption readability on mobile only.
   The slider plugin (Revolution Slider) positions every caption with
   absolute pixel coordinates and continuously rescales font-size,
   line-height and spacing together to fit its original 1170px design.
   Forcing a larger font-size alone (as before) broke that ratio: the
   plugin still shrank line-height and the vertical gap between
   captions, so the bigger text no longer fit and the lines overlapped.
   Fix: take the captions out of the plugin's absolute positioning on
   mobile and stack them normally inside a centered wrapper instead,
   so spacing is no longer computed by the plugin at all. */
@media only screen and (max-width: 767px) {
    #revolution-slider .slide-caption-stack {
        position: absolute !important;
        top: 70% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 88% !important;
        max-width: 480px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        z-index: 5;
    }

    #revolution-slider .slide-caption-stack .tp-caption {
        position: static !important;
        display: block !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 4px 0 !important;
        padding: 0 !important;
    }

    /* The two text lines get their own narrower, content-hugging box
       (instead of the full-width block above) so the dark backdrop
       wraps tightly around the words and the first line in
       particular doesn't stretch edge-to-edge. */
    #revolution-slider .slide-caption-stack .tp-caption.big-white,
    #revolution-slider .slide-caption-stack .tp-caption.ultra-big-white {
        display: inline-block !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 16px) !important;
        margin: 6px 0 !important;
        padding: 8px 12px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    #revolution-slider .tp-caption.small-white {
        font-size: 16px !important;
        line-height: 1.3 !important;
    }

    #revolution-slider .tp-caption.big-white {
        font-size: 20px !important;
        line-height: 1.35 !important;
        max-width: 92% !important;
    }

    #revolution-slider .tp-caption.ultra-big-white {
        font-size: 20px !important;
        line-height: 1.3 !important;
        letter-spacing: 2px !important;
        /* Narrower cap than the subtitle so the title wraps onto a
           couple of lines instead of spanning the full slide width. */
        max-width: 68% !important;
    }
}

@media only screen and (max-width: 480px) {
    #revolution-slider .slide-caption-stack {
        width: 92% !important;
    }

    #revolution-slider .tp-caption.small-white {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    #revolution-slider .tp-caption.big-white {
        font-size: 17px !important;
        line-height: 1.35 !important;
        max-width: 95% !important;
    }

    #revolution-slider .tp-caption.ultra-big-white {
        font-size: 17px !important;
        line-height: 1.3 !important;
        letter-spacing: 1px !important;
        max-width: 74% !important;
    }
}

/* Home slider: reduce overall slider height on mobile only.
   The slider (Revolution Slider) is initialized with fullScreen:"on"
   (see js/designesia.js), which uses JavaScript to set the slider's
   height equal to the full device window height on every screen size.
   That looks fine on desktop but makes the slider take up the whole
   screen on mobile, which feels too tall.
   Fix: force the slider's outer container to half of the full-screen
   height on mobile with !important, which overrides the pixel height
   the plugin sets via inline styles. Everything inside the slider
   (slides, background images, captions) is sized in percentages by
   the plugin, so it automatically scales down to fit the new height;
   the background images simply crop to the center instead of showing
   their full height, and clipping is handled by the container's
   existing overflow:hidden. Desktop is untouched. */
@media only screen and (max-width: 767px) {
    #section-slider.fullwidthbanner-container {
        height: 37.5vh !important;
        min-height: 37.5vh !important;
        max-height: 37.5vh !important;
        overflow: hidden !important;
    }
}

/* Homepage service category icons (Hair Service, Hair Color, etc.):
   style.css makes these black & white by default and only removes the
   grayscale for the currently active tab (.de_nav li.active img).
   Flip that: show them in color by default, and apply the grayscale
   filter on hover instead. */
.de_light .de_tab.tab_style_2 .de_nav li img {
    -webkit-filter: grayscale(0%) !important;
       -moz-filter: grayscale(0%) !important;
         -o-filter: grayscale(0%) !important;
        -ms-filter: grayscale(0%) !important;
            filter: grayscale(0%) !important;
    opacity: 1 !important;
    border-radius: 8px !important;
}

.de_light .de_tab.tab_style_2 .de_nav li:hover img {
    -webkit-filter: grayscale(100%) !important;
       -moz-filter: grayscale(100%) !important;
         -o-filter: grayscale(100%) !important;
        -ms-filter: grayscale(100%) !important;
            filter: grayscale(100%) !important;
}

/* Keep the active tab in color even while another item is hovered elsewhere. */
.de_light .de_tab.tab_style_2 .de_nav li.active img {
    -webkit-filter: grayscale(0%) !important;
       -moz-filter: grayscale(0%) !important;
         -o-filter: grayscale(0%) !important;
        -ms-filter: grayscale(0%) !important;
            filter: grayscale(0%) !important;
}

/* Final mobile navigation overrides: custom.css loads after the base theme,
   so these apply consistently on every page. */
@media only screen and (max-width: 992px) {
    header #mainmenu,
    header #mainmenu ul,
    header #mainmenu li,
    header #mainmenu li ul {
        background: #0b0b0c !important;
    }

    header #mainmenu li a,
    header #mainmenu li ul li a,
    header #mainmenu > li > ul > li > a {
        background: #0b0b0c !important;
        color: #bfc1c4 !important;
        font-weight: 700 !important;
    }

    header #mainmenu li a:hover,
    header #mainmenu li a:focus,
    header #mainmenu li a:active,
    header #mainmenu li ul li a:hover,
    header #mainmenu li ul li a:focus,
    header #mainmenu li ul li a:active {
        background: #bfc1c4 !important;
        color: #ffffff !important;
    }
}

/* Center the appointment button within its mobile background wrapper. */
@media only screen and (max-width: 767px) {
    #homepage #section-top-reason .appointment-cta {
        text-align: center !important;
    }

    #homepage #section-top-reason .appointment-cta .padding40 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 260px !important;
    }

    #homepage #section-top-reason .appointment-cta .btn {
        display: inline-block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================================
   Homepage "Our Services & Prices" tabs (#section-services-tab)
   Compact tab bar so the price list sits right under the tabs. On phones the
   tabs become one swipeable row instead of 13 stacked photo tiles.
   ========================================================================== */
#section-services-tab .services-tabs-heading {
    margin-bottom: 4px;
}

#section-services-tab .services-tabs-hint {
    margin: 14px 0 26px;
    font-size: 14px;
    color: #777;
}

#section-services-tab .de_tab .de_nav {
    position: relative;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 10px;
    max-width: 860px;
    margin: 0 auto !important;
    padding: 0 0 24px !important;
    overflow: visible !important;
}

#section-services-tab .de_tab .de_nav li {
    float: none !important;
    display: block !important;
    flex: 0 0 auto;
    width: 104px !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    background: none !important;
    text-align: center;
    cursor: pointer;
}

#section-services-tab .de_tab .de_nav li img {
    display: block;
    width: 76px !important;
    height: 76px !important;
    margin: 0 auto 9px !important;
    object-fit: cover;
    border-radius: 50% !important;
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow .25s ease;
}

#section-services-tab .de_tab .de_nav li.active img {
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0b0b0c;
}

#section-services-tab .de_tab .de_nav li span {
    display: block;
    padding: 3px 2px 4px !important;
    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 700;
    color: #6b6d70 !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    white-space: normal;
}

#section-services-tab .de_tab .de_nav li.active span {
    color: #0b0b0c !important;
    border-bottom-color: #0b0b0c !important;
}

#section-services-tab .de_tab .de_tab_content {
    padding: 30px 40px 10px !important;
}

#section-services-tab .price-note {
    margin: 0 0 18px;
    font-size: 13px;
    font-style: italic;
    color: #777;
}

@media only screen and (max-width: 767px) {
    #section-services-tab .de_tab .de_nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        max-width: none;
        margin: 0 -30px !important;
        padding: 10px 30px 18px !important;
    }

    #section-services-tab .de_tab .de_nav::-webkit-scrollbar {
        display: none;
    }

    #section-services-tab .de_tab .de_nav li {
        width: 88px !important;
        scroll-snap-align: center;
    }

    #section-services-tab .de_tab .de_nav li img {
        width: 68px !important;
        height: 68px !important;
    }

    #section-services-tab .de_tab .de_tab_content {
        padding: 22px 0 0 !important;
    }

    /* let long service names wrap instead of overflowing the screen */
    #section-services-tab .sub-item-service .c1 {
        white-space: normal;
        width: auto;
        padding-right: 8px;
    }
}

#section-services-tab .price-list-title {
    margin: 0 0 16px;
    padding-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #0b0b0c;
    border-bottom: 2px solid #0b0b0c;
    display: inline-block;
}

#section-services-tab .price-note {
    margin-top: -4px;
}

/* ==========================================================================
   Homepage gallery makeover (#section-gallery): gaps between photos and
   rounded corners. The gap is padding on each item (not margin) so the
   Isotope layout keeps working; the negative margin on #gallery keeps the
   outer edges lined up with the rest of the page.
   ========================================================================== */
#homepage #section-gallery #gallery {
    margin-left: -8px;
    margin-right: -8px;
}

#homepage #section-gallery #gallery .item {
    padding: 8px !important;
}

#homepage #section-gallery #gallery .picframe {
    border-radius: 16px;
    overflow: hidden;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

#homepage #section-gallery #gallery .picframe img {
    display: block;
    width: 100%;
    height: auto;
}

@media only screen and (max-width: 767px) {
    #homepage #section-gallery #gallery {
        margin-left: -5px;
        margin-right: -5px;
    }

    #homepage #section-gallery #gallery .item {
        padding: 5px !important;
    }

    #homepage #section-gallery #gallery .picframe {
        border-radius: 12px;
    }
}