/* North Style Salon Theme Color Palette */
/* 🖤 Black + 💛 Gold + 🤍 White Luxury Theme */

:root {
    --color-main-bg: #050505;
    --color-secondary-bg: #111111;
    --color-card-bg: #161616;
    --color-border: #2A2A2A;

    --color-primary-gold: #F4B400;
    --color-hover-gold: #D89A00;
    --color-soft-gold: #C89B3C;
    --color-gold-glow: #FFD369;

    --color-main-text: #FFFFFF;
    --color-secondary-text: #BDBDBD;
    --color-muted-text: #8A8A8A;
}

/* Base Body and Text */
body, .theme--dark body, .page {
    background-color: var(--color-main-bg) !important;
    color: var(--color-secondary-text) !important;
}

h1, h2, h3, h4, h5, h6, 
.theme--dark h1, .theme--dark h2, .theme--dark h3, 
.theme--dark h4, .theme--dark h5, .theme--dark h6 {
    color: var(--color-main-text) !important;
}

.highlight-text,
.tra-title,
span.section-id  {
    color: var(--color-primary-gold) !important;
}

p, .table td, .table th, .txt-table .table > tbody > tr > td {
    color: var(--color-secondary-text) !important;
}

/* Header & Menu Override */
.wsmainfull.scroll,
.wsmenucontainer,
.wsmainwp,
.tra-menu.white-scroll .wsmainfull.scroll,
header,
.wsmobileheader {
    background-color: var(--color-secondary-bg) !important;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) !important;
}

.tra-menu .wsmainfull {
    background-color: transparent !important;
}
.tra-menu .wsmainfull.scroll {
    background-color: var(--color-secondary-bg) !important;
}

/* Navigation links */
.wsmenu > .wsmenu-list > li > a,
.tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link,
.wsmenu > .wsmenu-list > li > a.h-link {
    color: var(--color-primary-gold) !important;
}

.wsmenu > .wsmenu-list > li > a:hover,
.navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover,
.wsmenu > .wsmenu-list > li > a.h-link:hover {
    color: var(--color-main-text) !important;
}

.wsmenu > .wsmenu-list > li > a.btn {
    color: var(--color-main-bg) !important;
}
.wsmenu > .wsmenu-list > li > a.btn:hover {
    color: var(--color-main-bg) !important;
}

/* Backgrounds Classes */
.bg--black { background-color: var(--color-main-bg) !important; }
.bg--ivory, .bg--smoke, .bg--stone { background-color: var(--color-card-bg) !important; }
.bg--blush, .bg--poudre { background-color: var(--color-secondary-bg) !important; }

/* Primary Button Override */
.btn--magenta, .btn--red, .btn--gold, 
.btn, .btn-primary {
    background-color: var(--color-primary-gold) !important;
    color: var(--color-main-bg) !important;
    border-color: var(--color-primary-gold) !important;
}
.btn:hover, .btn--magenta:hover, .btn--red:hover, .btn--gold:hover, .btn-primary:hover {
    background-color: var(--color-hover-gold) !important;
    border-color: var(--color-hover-gold) !important;
    color: var(--color-main-bg) !important;
}

/* Secondary Button Override (specifically topbar btn--tra-white) */
.btn--tra-white, .btn-outline-primary, .btn--secondary,
.white-scroll .scroll .btn--tra-white {
    background-color: transparent !important;
    border-color: var(--color-primary-gold) !important;
    color: var(--color-main-text) !important;
}

.btn--tra-white:hover, .btn-outline-primary:hover, .btn--secondary:hover,
.white-scroll .scroll .btn--tra-white:hover,
.hover--white:hover {
    background-color: var(--color-primary-gold) !important;
    color: var(--color-main-bg) !important;
    border-color: var(--color-primary-gold) !important;
}

/* Sections Background */
#hero-1, .hero-section { background-color: var(--color-main-bg) !important; }
#services-3, .services-section { background-color: var(--color-secondary-bg) !important; }
#reviews-1, .reviews-section { background-color: #0D0D0D !important; }
#footer-1, .footer-section, footer { background-color: #000000 !important; }

/* Gradients */
.gold-gradient {
    background: linear-gradient(135deg, #F4B400, #D89A00) !important;
}
.dark-luxury-gradient {
    background: linear-gradient(180deg, #050505, #111111) !important;
}

/* Shadows */
.gold-glow {
    box-shadow: 0 0 20px rgba(244, 180, 0, 0.25) !important;
}
.soft-card-shadow, .card, .pricing-card, .service-box, .pricing-1-box {
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    background-color: var(--color-card-bg) !important;
    border: 1px solid var(--color-border) !important;
}
/* icons */
.sbox-ico span,.star-rating span {
    color: var(--color-primary-gold) !important;
}

.sbox-ico .svg-icon {
    width: 65px;
    height: 65px;
    fill: var(--color-primary-gold) !important;
      color:#ffb400;
}

.service-title{
  font-weight: bold;
}
.service-from{
  font-size: 14px;
  /* color: #555; */
}
.service-price{
  font-size: 18px;
  /* font-weight: bold; */
  color: var(--color-primary-gold) !important;
}

.gold-stat {
    /* color: var(--color-primary-gold) !important; */
    color: var(--color-main-text) !important;
    font-weight: 600;
}

/* Services Section Header */
.services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2.5rem;
    /* border-bottom: 1px solid var(--color-border); */
    /* padding-bottom: 1.25rem; */
}

.services-header .section-id {
    margin-bottom: 0 !important;
}

.view-all-services {
    color: #b2b2b2 !important;
    /* font-family: 'Jost', sans-serif;
    font-weight: 600; */
    text-transform: uppercase;
    font-size:0.85rem;
    letter-spacing: 1px;
    text-decoration: none !important;
    border-bottom: 2px solid #b2b2b2;
    padding-bottom: 4px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.view-all-services i {
    transition: transform 0.3s ease-in-out;
}

.view-all-services:hover {
    color: var(--color-hover-gold) !important;
    border-color: var(--color-hover-gold) !important;
}

.view-all-services:hover i {
    transform: translateX(5px);
}
.flaticon-facebook::before,
.flaticon-twitter::before,
.flaticon-instagram::before{
    color: var(--color-primary-gold) !important;
}
.flatpickr-mobile::-webkit-calendar-picker-indicator {

    filter: invert(1);

    opacity: 1;

    cursor: pointer;

}
/* WhatsApp Floating Button */
.whatsapp-float{

    position:fixed;

    right:20px;

    bottom:20px;

    z-index:9999;

    text-decoration:none;

    display:flex;

    flex-direction:column;

    align-items:center;

}

/* WhatsApp Circle */

.whatsapp-float i{

    width:58px;

    height:58px;

    background:#25D366;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:30px;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    transition:.3s ease;

}

/* Text */

.whatsapp-float span{

    margin-top:8px;

    font-size:13px;

    font-weight:600;

    color:#fff;

    letter-spacing:.4px;

}

/* Hover */

.whatsapp-float:hover i{

    transform:scale(1.08);

}

/* Mobile */

@media(max-width:767px){

    .whatsapp-float{

        right:15px;

        bottom:15px;

    }

    .whatsapp-float i{

        width:54px;

        height:54px;

        font-size:28px;

    }

    .whatsapp-float span{

        font-size:12px;

    }

}
#scrollUp{

    right:auto !important;

    left:20px !important;

}

.price-plus{
    font-size: 0.65em;
    vertical-align: super;
    font-weight: 400;
}

.seo-heading{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

@media(max-width:767px){

    #scrollUp{

        left:15px !important;

    }

}
/* Mobile */

/*@media(max-width:767px){*/

/*    .text-end{*/

/*        text-align:center !important;*/

/*    }*/

/*    .services-header {*/
/*        justify-content: center !important;*/
/*        text-align: center !important;*/
/*    }*/

/*}*/

/*@media only screen and (max-width: 576px) {*/
/*    .services-header {*/
/*        flex-direction: column;*/
/*        align-items: center !important;*/
/*        gap: 1rem;*/
/*    }*/
/*    .view-all-services {*/
/*        font-size: 0.8rem;*/
/*    }*/
/*}*/
/* Mobile + Tablet */

@media (max-width: 991px){

    .text-end{

        text-align:center !important;

    }

    .services-header{

        justify-content:center !important;

        text-align:center !important;

        flex-direction:column;

        align-items:center !important;

        gap:1rem;

    }

    .view-all-services{

        font-size:0.9rem;

    }

}

/* Small Mobile */

@media (max-width: 576px){

    .view-all-services{

        font-size:0.8rem;

    }

}
/* Mobile Menu Fix */
@media only screen and (max-width: 991px) {
    .wsmenu > .wsmenu-list {
        background-color: var(--color-secondary-bg) !important;
    }
    .wsmobileheader {
        background-color: var(--color-main-bg) !important;
    }
    .wsmenu > .wsmenu-list > li > a {
        color: var(--color-main-text) !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
}