@charset "utf-8";
/* CSS Document */

/* ==========================================================================
   THE AMARA METHOD™ - COMPLETE INTEGRATED MASTER STYLESHEET
   ========================================================================== */

/* --- SECTION 1: GLOBAL BRAND LAYOUTS & CONTAINERS --- */
.container {
    width: 80% !important;
}
.container6 {
    width: 60% !important;
    margin: 0 auto;
}
#page-one {
    background-color: #f0f0f0;
}
#page-one .container {
    background-color: #f4f4f4 !important;
    padding: 50px !important;
    padding-top: 30px !important;
    margin: 0 auto;
}
#gris-mouse {
    background-color: #f4f4f4;
}
.encore {
    background-color: #f4f4f4 !important;
}
#contact {
    min-height: 600px;
}

/* Anchor Target Offset Helper */
#rules::before { 
    content: ''; 
    display: block; 
    height: 120px; 
    margin-top: -120px; 
    visibility: hidden; 
}
/* column border */
.brd {
    border:1px solid #f4f2f2;
    height:400px;padding:20px;
}
.brd23 {
    border:1px solid #f4f2f2;
    height:900px;padding:20px;
}

/* Global Link Variations */
a {
    color: #ceb650 !important;
}
a:hover {
    color: #a6923b !important; 
    text-decoration: none !important;
}
.active {
    color: darkgoldenrod !important;
}

/* Custom Gradient Rule Splitters (hr) & Design Lines */
hr { 
    background-image: -webkit-linear-gradient(left, transparent, #F7EED9, transparent); 
    background-image: linear-gradient(to right, transparent, #F7EED9, transparent); 
    border: 0; 
    height: 1px; 
    margin: 22px 0; 
}
.small-line { 
    width: 80px; 
    height: 2px; 
    background-color: #f88278; 
    border: none; 
    margin-top: -10px; 
    margin-bottom: 20px; 
}

/* Image & Media Component Helpers */
.bg-image_left { padding-right: 20px; padding-top: 20px; }
.bg-image_right { padding-left: 20px; padding-top: 20px; }
.bg1-slider { width: 100% !important; }
.img-thumbnail { border: none !important; }
.bg1-middle { margin-top: -25px; }
iframe, object, embed { max-width: 100%; }
a:hover .bouge { display: none; }


/* --- SECTION 2: TOP-LEVEL NAVIGATION & HEADERS --- */
.nav {
    letter-spacing: 2px !important;
}

/* Main menu item lists: Creates identical horizontal containers */
#mainNav > li { 
    position: relative !important; 
    margin-right: 7px !important; /* Clears old uneven right offsets */
    margin-left: 7px !important;
    padding: 0 !important;
}

/* Force equal left and right spacing padding inside the top-level links */
#header .header-nav-main nav > ul > li > a,
#header .header-nav-main nav > ul #mainNav > li > a {
    display: block !important;
    padding-left: 15px !important;  /* Equalized left buffer */
    padding-right: 15px !important; /* Equalized right buffer */
    background: transparent !important;
    background-color: transparent !important;
    color: #cfb45a !important; /* Signature Brand Gold */
    text-decoration: none !important;
}

/* Persistent Vertical Gold Dividers: Stays centered and layer-lifted on hovers */
#mainNav > li:not(:last-child)::after { 
    content: "" !important; 
    position: absolute !important; 
    right: -9px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important; 
    width: 2px !important; 
    height: 18px !important; 
    background: #d4a32b !important; 
    display: block !important;
    z-index: 20 !important; /* Forces divider to float safely above pink highlight blocks */
}

/* Dynamic Nav Interaction Overrides: Removes highlights when hovering alternate selections */
#header .header-nav-main nav > ul:hover > li.active > a { 
    background-color: transparent !important; 
}
#header .header-nav-main nav > ul > li.active:hover > a { 
    background-color: #f0e1d8 !important; 
}
#header .header-nav-main nav > ul > li:hover > a { 
    background-color: #f0e1d8 !important; 
}

/* Active Page Highlight Block Styling */
#header .header-nav-main nav > ul > li.active > a, 
#header .header-nav-main nav > ul > li.active > a:hover, 
#header .header-nav-main nav > ul > li.active > a:focus,
#header .header-nav-main nav > ul > li.active > a:link,
#header .header-nav-main nav > ul > li.active > a:visited,
#mainNav > li.active > a { 
    background-color: #f0e1d8 !important; 
    color: #b89a3a !important; 
    text-decoration: none !important; 
}

/* Link Hover Highlight Block Triggering */
#header .header-nav-main nav > ul > li > a:hover, 
#header .header-nav-main nav > ul > li > a:focus,
#mainNav > li > a:hover { 
    background-color: #f0e1d8 !important; 
    color: #b89a3a !important; 
    text-decoration: none !important; 
}

/* Dropdown Sub-Menu Layout Containers */
#header .header-nav-main .dropdown-menu { 
    background-color: #fdfbf6 !important; 
    border-color: rgba(0,0,0,0.06) !important; 
}
#header .header-nav-main .dropdown-menu a, 
#header .header-nav-main .dropdown-menu a:link, 
#header .header-nav-main .dropdown-menu a:visited { 
    background: transparent !important; 
    color: #cfb45a !important; 
    text-decoration: none !important; 
}
#header .header-nav-main .dropdown-menu a:hover, 
#header .header-nav-main .dropdown-menu a:focus { 
    background-color: transparent !important; 
    color: #b89a3a !important; 
    font-weight: bold !important; 
    text-decoration: none !important; 
}

/* Remove Porto Theme Default Underline Indicators */
#header .header-nav-main nav > ul > li > a::after, 
#header .header-nav-main nav > ul > li > a:after { 
    display: none !important; 
}
/* ==========================================================================
   ADDED HOVER FIX: FORCES ACTIVE HOVER HIGHLIGHT COLLAPSE
   ========================================================================== */
#header .header-nav-main nav > ul#mainNav:hover > li.active > a,
#header .header-nav-main nav > ul:hover > li.active > a,
#mainNav:hover > li.active > a { 
    background-color: transparent !important; 
    color: #cfb45a !important; /* Returns the text color to signature brand gold */
}

#header .header-nav-main nav > ul > li.active:hover > a,
#mainNav > li.active:hover > a { 
    background-color: #f0e1d8 !important; /* Re-applies the pink when hovering back over it */
    color: #b89a3a !important;            
}

/* --- SECTION 3: CLIENT FRAMING CONTAINERS & EQUAL-HEIGHT WAXING GRID --- */
.bg-cadre { background-color: #f4f4f4; border: 1px solid #c0c0c0; margin: 10px; width: 31.84%; }
.bg-cadre2 { background-color: #f4f4f4; border: 1px solid #c0c0c0; margin: 10px; width: 48%; }
.bg-cadre3 { background-color: #f4f4f4; border: 1px solid #c0c0c0; margin: 10px; width: 31%; min-height: 339px; }
.bg-cadre4 { border: solid 1px #f4f4f4; background-color: #fffdf7; text-align: center; }
.bg-desc { min-height: 190px !important; }
.greyCadre { background: #f4f4f4; border: 1px solid #fff; outline: 1px solid #c0c0c0; outline-offset: -5px; }
.roseCadre { background: #fcf3f3; }
.cadre-long { min-height: 370px !important; }
.cadreGold { border: solid 1px #F7EED9; }
.cadrepink { background-color: #f6e5da; min-height: 100%; }
.cadrepink2 { background-color: #f6e5da; min-height: 420px; min-height:100%; }
.cadre-light { background-color: #f8f4f2; padding: 20px 0; min-height: 150px; }
.cadrepink3 { background-color: #f6e5da; padding: 10px 0; }
img.pull-left {
    margin-right: 15px;margin-top:15px;
}

/* Custom Equal Height Flex Grid for Waxing Layout Sections */
.row.waxing-row { 
    display: flex !important; 
    flex-wrap: wrap !important; 
}

/* On desktop viewports, force the precise side-by-side 3-column structural layout */
@media (min-width: 992px) {
    .row.waxing-row > .col-md-4 { 
        float: none !important;
        display: flex !important;
        flex-direction: column !important; /* Locks titles safely on top of lists */
        width: 33.3333% !important; 
    }
}

/* Insulates background coloring properties to create clean layout gaps naturally */
.row.waxing-row > .cadrepink { 
    background-color: #f6e5da !important; 
    background-clip: padding-box !important;
    border: 12px solid transparent !important; /* Beautiful transparent alley separators */
    padding: 25px !important;
    min-height: 100% !important;
}

/* Clear inside text padding boundaries inside the waxing flex cards */
.row.waxing-row .cadrepink ul {
    margin-left: 0 !important;
    padding-left: 20px !important;
    display: block !important;
}
.row.waxing-row .cadrepink h4 {
    margin-left: 0 !important;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    display: block !important;
    width: 100% !important;
}


/* --- SECTION 4: CORE TYPOGRAPHY & BRAND FONTS --- */
h2 { color: #2d2828 !important; }
#page-one h2 { color: #afa261; font-size: 38px; font-family: 'Satisfy', cursive; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; }
#page-one h4 { color: #333; font-size: 36px; font-family: "Playfair Display", serif; letter-spacing: -1px; line-height: 36px; }
#page-one .bg-center { text-align: center !important; padding: 30px; }
.bg1-title { color: #afa261; font-family: 'Satisfy', cursive; font-size: 40px; text-transform: uppercase; }
.bg-pink-title { color: #f88278 !important; font-family: "Open Sans", arial, sans-serif !important; font-weight: 200 !important; text-align: center !important; letter-spacing: 2px !important; line-height: 12px !important; }
.bg-light-title { font-weight: 400 !important; }

/* Elegant Cursive Hurricane Accent Font Rules */
.hurricane-regular { 
    font-family: "Hurricane", cursive; 
    font-weight: 400; 
    font-style: normal; 
}
.bg-vent { 
    font-family: "Hurricane", cursive; 
    color: #8D4D37; 
    font-size: 52px; 
    text-align: center; 
}
.bg-vent2 { 
    font-family: "Hurricane", cursive; 
    color: #8D4D37; 
    font-size: 52px; 
    text-align: left; 
}
/* Desktop Sizing Content Configurations */
p { 
    font-size: 18px; 
    font-weight: 300; 
    font-family: "Open Sans", Arial, sans-serif; 
    line-height: 1.6; 
    color: #333232; 
}

/* Targets body container lists while protecting header links */
.main ul li,
.container ul li,
.container6 ul li,
.left ul li,
.pricing-table ul li { 
    font-size: 18px !important; 
    list-style: circle !important; 
    line-height: 1.6 !important; 
    font-weight: 300 !important; 
    font-family: "Open Sans", Arial, sans-serif !important; 
    color: #333232 !important; 
}

/* Inline Typography Sizing Layout Variables */
.semi-bold { font-weight: 500 !important; line-height: 1.5; }
.signature-font { font-family: "Open Sans", Arial, sans-serif; font-weight: 200; font-size: 22px; line-height: 1.4; letter-spacing: 0.03em; color: #C6C6C6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.pink { color: #f88278 !important; letter-spacing: 2px; font-weight: 300 !important; }
.pistache { color: #dff0d8; }
.red { color: #afa261; }
.chance { color: #fff; font-weight: 600; }
.noire { color: #000 !important; font-weight: 700; }
.gold { color: #afa261 !important; }
.text-primary { color: #afa261; letter-spacing: 2px; }
.off-white { color:#faf6f5 !important;}

/* Small Typography Shorthands */
.bg-sml-font { font-size: 60%; }
.pack-bb { font-size: 20px !important; font-weight: 600; }
.lead2 { color: #f88278; font-weight: 600; letter-spacing: 1px; margin-bottom: 30px !important; }
.lead3 { font-size: 16px; line-height: 1.5; }
.lead4 { color: #f88278; font-weight: 600; letter-spacing: 2px; font-style: italic; margin-top: -20px; font-size: 22px; }
.condensed { letter-spacing: 1px; text-transform: none !important; line-height: 35px !important; }
li .condensed { list-style: disc; color: #afa261; }

/* --- SECTION 5: BUTTONS, TABLES & STRUCTURAL SPACING --- */
.btn-primary { background-color: #e09787 !important; border-color: #fff; color: #fff !important; padding: 15px 30px; border-radius: 5px; text-shadow: none !important; letter-spacing: 2px; }
a:hover.btn-primary { text-decoration: none !important; color: #afa261 !important; background-color: #e5cbbe !important; }
#page-one .btn-primary { background-color: #cfb5a4 !important; border-color: #F90; color: #333; }
.bg-button { line-height: 38px; }
.btn-space { letter-spacing: 2px; }

/* Grid Margin Offsets */
.bg-down { padding-bottom: 10px !important; }
.airtop { margin-top: 25px; }
.airtop-btn { margin-top: 15px; }
.separate { padding-top: 25px !important; }
.room { margin-top: 30px; margin-bottom: 50px; }
.pad-t-30 { padding-top: 30px; }
.pad-t-20 { padding-top: 20px; }
.m-t-100 { margin-top: 100px; }
.m-t-30 { margin-top: 30px; }
.tb-fix { min-height: 172px; }
a:link.call-bri {text-decoration: none;color:#000 !important;}
/* Pricing Elements Configuration */
.pricing-table h3 { background-color: #e5cbbe !important; }
.pricing-table .plan { border: 1px solid #afa261; min-height: 680px; }


/* --- SECTION 6: FOOTER SYSTEM DESIGN --- */
#footer { background: #f0e1d8 !important; border-top: 4px solid #f0e1d8; font-size: 0.9em; margin-top: 0px; padding: 70px 0 0; position: relative; clear: both; }
#footer .footer-ribbon { background: #afa261; }
#footer .footer-ribbon:before { border-right-color: #c0ae5b; border-left-color: #c0ae5b; }
#footer .footer-copyright { background: #f0e1d8; border-top: 4px solid #f0e1d8; margin-top: 40px; padding: 30px 0 10px; }

/* Lavender System Block Overrides */
.border-lavender { background-color: #cdd2e5; padding: 10px; max-width: 900px; margin: 0 auto; }
.border-lavender h1 { color: #fff; font-weight: bold; }
#bg1-lavender { background-color: #cdd2e5; padding: 40px; text-align: center; }
#bg1-lavender p { color: #000; }
#bg1-lavender h1 { color: #fff; font-weight: bold; }
.font-small {font-size:24px !important; }
/* ==========================================================================
   --- SECTION 7: CONSOLIDATED MOBILE QUERIES (max-width: 767px & 991px) ---
   ========================================================================== */

/* Tablet & Mobile Dropdown Overlay Toggles */
@media (max-width: 991px) { 
    #header .header-nav-main nav > ul > li.active > a, 
    #header .header-nav-main nav > ul > li.active > a:hover, 
    #header .header-nav-main nav > ul > li.active > a:focus { 
        background-color: #f0e1d8 !important; 
        color: #b89a3a !important; 
        text-decoration: none !important; 
    } 
    .row.waxing-row > .col-md-4 {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Smartphone Portrait and Landscape Responsive Layout Frameworks */
@media (max-width: 767px) {
    .container { width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; }
    .container6 { width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; }
    .bg-cadre, .bg-cadre2, .bg-cadre3 { width: 100% !important; }
    .intake { text-align: center !important; }
    .intake ul { padding-left: 0; margin-left: 0; list-style-position: inside; display: inline-block; text-align: left; }
    a.btn-primary.intake, .intake a.btn-primary { display: inline-block !important; margin: 12px auto 0 !important; float: none !important; }
    .cadrepink2 { min-height: 10px !important; padding-top: 20px !important; margin-bottom: 10px !important; }    
    .separate, .room { margin-top: 15px !important; margin-bottom: 15px !important; }
    h1, .container6 h1, .left h1 { font-size: 24px !important; margin-bottom: 10px !important; line-height: 1.3 !important; }
    h2, .container6 h2 { font-size: 16px !important; white-space: normal !important; display: inline-block !important; width: 100% !important; line-height: 1.4 !important; }
    h4 { font-size: 14px !important; }
    h3 {font-size:14px !important;}
    p, .left p, .main ul li, .container ul li, .container6 ul li, .left ul li, .pricing-table ul li { font-size: 14px !important; line-height: 1.6 !important; }
    li { font-size: 14px !important; line-height: 1.6 !important; }
    ul { margin-top: 5px !important; padding-top: 0 !important; }
   .rond {width:50% !important;}
   .bg-vent {font-size:34px !important;}
   .bg-vent2 {font-size:34px !important;}
    .icon-bri {max-width:48px !important; text-align:center;}
    .font-small {font-size:14px !important; }
    .bri-reverse {color:#333232 !important;}
    .small-line {margin-top:-6px !important;}
    .brd {border:none !important;height:auto;}
    .brd23 {border:none !important;height:auto;}
    .btn-primary {
    padding: 10px !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
  }
}
@media (max-width: 767px) {
    #header .header-body {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}
/* Target mobile devices up to 767px (Bootstrap 3 standard xs breakpoint) */
@media (max-width: 767px) {
    #header .header-logo {
        width: 114px !important;
        height: 56px !important;
    }
    
    #header .header-logo img {
        width: 100% !important;
        height: auto !important;
    }
}
/* Target mobile and tablet screens below the Bootstrap 3 desktop breakpoint */
/* Target mobile and tablet screens below the Bootstrap 3 desktop breakpoint */
@media (max-width: 991px) {
    .footer-copyright .logo img.bg1-middle {
        width: 70px !important;        /* Reduced from 140px to match desktop scale */
        max-width: 100% !important;     
        height: auto !important;       
        margin: 0 auto 15px auto !important; 
        display: block !important;
    }
}
/* Target mobile and tablet screens below the Bootstrap 3 desktop breakpoint */
@media (max-width: 991px) {
    /* ... keep your existing .bg1-middle logo sizing rule here ... */

    /* Collapse the vertical padding on the footer container rows */
    .footer-copyright .row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Target the column wrapping the logo to pull it upward */
    .footer-copyright .col-md-1 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: -30px !important; /* Pulls the logo up closer to the text above */
    }
}
/* 1. Center the Lotus icon perfectly without breaking Bootstrap grid columns */
.cadreP .row > div:nth-child(2) {
    position: relative;
    min-height: 180px; /* Gives the column height to match the text blocks */
}

.cadreP .row > div:nth-child(2) center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/* 2. Add separation padding to columns 2 and 3 */
.cadreP .row > div:nth-child(3),
.cadreP .row > div:nth-child(4) {
    padding-right: 35px;
    position: relative; /* Setup container for our custom borders */
}

/* 3. Add clean vertical borders that perfectly align to the bottom of the section */
.cadreP .row > div:nth-child(3),
.cadreP .row > div:nth-child(4) {
    border-right:1px solid #afa261;
}
.cadreP .row > div:nth-child(2),
.cadreP .row > div:nth-child(3),
.cadreP .row > div:nth-child(4) {
height:200px;
}
/* Responsive control: safely hides lines on smaller screen heights and mobiles */
@media (max-width: 991px) {
    .cadreP .row > div:nth-child(2) {
        position: static;
        min-height: auto;
    }
    .cadreP .row > div:nth-child(2) center {
        position: static;
        transform: none;
    }
    .cadreP .row > div:nth-child(3),
    .cadreP .row > div:nth-child(4) {
        border-right: none;
    }
    .cadreP .row > div:nth-child(2),
.cadreP .row > div:nth-child(3),
.cadreP .row > div:nth-child(4) {
height:auto;
}
}
/* shorter columns */
.tint-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.tint-box {
    width: 160px;
    flex: 0 0 320px;
    padding: 20px 10px;
    margin: 0;
    text-align: center;
}
/* contact icons */
#Cf .fa {
    font-size: 40px !important;
    color: #c49e5e !important;
    line-height: 1;
    /* Anti-aliasing fixes for crisp vector rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
.goldText {color: #c49e5e !important;}
/* Base class for the direct underline */
.bg-line {
    position: relative;
    padding-bottom: 8px !important; /* Adjust this to tighten/loosen the gap */
    margin-bottom: 20px !important;  /* Space between the line and content below */
}

/* Small line under left-aligned text */
.bg-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;                 
    height: 2px;                 
    background-color: #f88278;   
}

/* Small line under centered text */
.bg-line-center {
    position: relative;
    padding-bottom: 8px !important; 
    margin-bottom: 20px !important;
}
.bg-line-center::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* Centers the line */
    width: 80px;                 
    height: 2px;                 
    background-color: #f88278;   
}
.display-flex {
  display: flex;
  flex-wrap: wrap;
}
input[type="radio"] {
  accent-color: #000; /* Replace with your choice of color */
}
label {accent-color: #000;}