.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */html, body {
    overflow-x: hidden !important;
}

/* --- PREMIUM CINEMATIC HERO SECTION --- */

/* 1. The Main Container - Animated Dark Slate Gradient */
/* This replaces the harsh flat black with a slow-moving, luxurious dark gradient */
.tg-hero-container {
    background: linear-gradient(-45deg, #0f171e, #1a2630, #101a24, #1c2b36) !important;
    background-size: 400% 400% !important;
    animation: luxuriousBreathe 15s ease infinite;
    position: relative;
    z-index: 1;
}

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

/* 2. "TREAT & GLOW" (Top Kicker Text) */
.tg-hero-kicker .elementor-heading-title {
    color: #82c3d8; /* Brand blue */
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* 3. Main Title ("The Skincare Translator") */
.tg-hero-title .elementor-heading-title {
    color: #ffffff;
    font-size: 4rem; /* Makes it look like a magazine cover */
    font-weight: 800;
    letter-spacing: -1.5px;
    text-shadow: 0 10px 40px rgba(130, 195, 216, 0.2); /* Soft blue glow behind the white text */
    line-height: 1.1;
}

/* 4. "Fix Your skin, Not hide it." (The Script Line) */
.tg-hero-script .elementor-heading-title {
    background: linear-gradient(90deg, #e6c875 0%, #ffd97d 100%); /* Elegant champagne gold */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.5px;
    margin-top: -10px;
}

/* 5. The Paragraph Text */
.tg-hero-desc .elementor-widget-container {
    color: #b0c4de; /* Soft, readable silver-blue instead of harsh white */
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto; /* Centers the paragraph neatly */
}

/* --- THE BUTTONS --- */

/* Primary Button ("Get Your Routine") */
.tg-hero-btn-primary .elementor-button {
    background: linear-gradient(135deg, #82c3d8 0%, #5b9db5 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 50px;
    padding: 16px 40px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 30px rgba(91, 157, 181, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.tg-hero-btn-primary .elementor-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(91, 157, 181, 0.6);
}

/* Secondary Button ("Explore Glow Situations") */
.tg-hero-btn-secondary .elementor-button {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 50px;
    padding: 14px 38px; /* Compensates for the 2px border */
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.4s ease !important;
}

.tg-hero-btn-secondary .elementor-button:hover {
    background: #ffffff !important;
    color: #1a2630 !important; /* Dark text when filled with white */
    border-color: #ffffff !important;
    transform: translateY(-4px);
}

/* --- TREAT & GLOW SEPARATE HEADINGS CSS --- */

/* 1. "Ever felt like this?" (The Hook) - Breathing effect & hover underline */
.tg-hook-heading .elementor-heading-title {
    color: #82c3d8; 
    font-weight: 700;
    position: relative;
    display: inline-block;
    animation: softPulse 3s infinite alternate ease-in-out;
}
.tg-hook-heading .elementor-heading-title::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -4px;
    left: 0;
    background-color: #82c3d8;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.tg-hook-heading:hover .elementor-heading-title::after {
    width: 100%;
}
@keyframes softPulse {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.02); opacity: 1; text-shadow: 0 4px 15px rgba(130, 195, 216, 0.4); }
}

/* 2. "Welcome to Treat & Glow" (Main Title) - Elegant letter spacing reveal */
.tg-welcome-heading .elementor-heading-title {
    color: #333333; /* Strong, dark, premium text */
    transition: all 0.4s ease;
}
.tg-welcome-heading:hover .elementor-heading-title {
    letter-spacing: 1.5px; /* Expands slightly for a premium feel */
    color: #5b9db5; /* Changes to your brand blue */
}

/* 3. "We translate what your skin is telling you" (Value Prop) - Marker highlight effect */
.tg-value-heading .elementor-heading-title {
    position: relative;
    display: inline-block;
    z-index: 1;
}
.tg-value-heading .elementor-heading-title::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 30%; /* Creates a marker-style highlight behind text */
    background-color: rgba(130, 195, 216, 0.25);
    z-index: -1;
    transition: width 0.5s ease-in-out;
}
.tg-value-heading:hover .elementor-heading-title::before {
    width: 100%;
}

/* 4. "No fluff. No complicated routines." (Reassurance) - Shimmering gradient */
.tg-gradient-heading .elementor-heading-title {
    background: linear-gradient(90deg, #5b9db5 0%, #9dd6eb 50%, #5b9db5 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    transition: all 0.3s ease;
}
.tg-gradient-heading:hover .elementor-heading-title {
    animation: shine 2s linear infinite;
}
@keyframes shine {
    to { background-position: 200% center; }
}

/* --- PREVIOUS ELEMENTS (Quote & Cards) --- */

/* 5. Interactive Quote Box */
.tg-intro-quote {
    background-color: #f4f9fc; 
    border-left: 6px solid #82c3d8; 
    padding: 30px 40px;
    border-radius: 0 15px 15px 0;
    font-style: italic;
    color: #555555;
    transition: all 0.4s ease;
}
.tg-intro-quote:hover {
    transform: translateX(8px);
    border-left-color: #5b9db5;
    background-color: #ffffff;
    box-shadow: 0 12px 30px rgba(130, 195, 216, 0.15);
}

/* 6. Hover Lift Cards */
.tg-hover-card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    padding: 20px;
    border: 1px solid transparent;
}
.tg-hover-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(130, 195, 216, 0.2); 
    border: 1px solid rgba(130, 195, 216, 0.3);
}/* End custom CSS */