/*
Theme Name: Florya Child
Theme URL: https://1.envato.market/Ao94VD
Description: Child theme of Florya
Author: webRedox WordPress Team
Author URI: http://webredox.net/
Template: florya
Version: 1.0
Text Domain: florya-child
*/ 
/*******Add Your Css Below This Line*********/

/* Homepage Slider - Gradient Overlay for Better Nav Readability */
body > header > div {
    position: relative;
}

body > header > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 250px; /* Covers the navigation area */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6) 0%,      /* Darker at top for nav visibility */
        rgba(0, 0, 0, 0.4) 30%,     /* Gradual fade */
        rgba(0, 0, 0, 0.2) 60%,     /* More transparent */
        rgba(0, 0, 0, 0) 100%       /* Completely transparent at bottom */
    );
    z-index: 1;
    pointer-events: none; /* Allow clicks through overlay */
}

/* Ensure navigation stays above the overlay */
.navbar,
.navbar .logo-wrapper,
.navbar .navbar-nav {
    position: relative;
    z-index: 2;
}

/* White Navigation Menu Text - ONLY for non-sticky transparent header */
.navbar:not(.nav-scroll) .navbar-nav .nav-link.nav-color,
.navbar:not(.nav-scroll) .navbar-nav .nav-link,
.navbar:not(.nav-scroll) .navbar-nav .nav-link:hover,
.navbar:not(.nav-scroll) .navbar-nav .current-menu-item > a.nav-link,
.navbar:not(.nav-scroll) .navbar-nav .current-menu-parent > a.nav-link,
.navbar:not(.nav-scroll) .logo-wrapper .logo h2,
.navbar:not(.nav-scroll) .logo-wrapper .logo h2 a {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Sticky menu keeps black text (remove white override when scrolled) */
.nav-scroll .navbar-nav .nav-link.nav-color,
.nav-scroll .navbar-nav .nav-link {
    color: #0a0a0a !important;
    text-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body > header > div::before {
        height: 180px; /* Slightly shorter on mobile */
    }
}

/* ============================================
   PARTY ATMOSPHERE OVERLAY - PINK/PURPLE GRADIENT
   Add "party-overlay" to your Elementor section CSS Classes
   ============================================ */

/* Ensure section allows overlay positioning */
.elementor-section.party-overlay {
    position: relative;
    overflow: visible !important;
}

/* Vibrant pink/purple party gradient - DARKER at top for nav visibility */
.elementor-section.party-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.65) 0%,           /* Very dark at top for nav */
            rgba(139, 69, 139, 0.45) 20%,     /* Dark purple transition */
            rgba(199, 21, 133, 0.4) 40%,      /* Hot pink/magenta */
            rgba(147, 51, 234, 0.35) 60%,     /* Purple */
            rgba(219, 39, 119, 0.3) 80%,      /* Pink */
            rgba(168, 85, 247, 0.25) 100%     /* Light purple at bottom */
        ),
        radial-gradient(
            circle at 30% 40%,
            rgba(236, 72, 153, 0.4) 0%,       /* Pink spotlight */
            transparent 60%
        ),
        radial-gradient(
            circle at 70% 60%,
            rgba(167, 139, 250, 0.35) 0%,     /* Purple spotlight */
            transparent 60%
        );
    z-index: 0;
    pointer-events: none;
}

/* Ensure container and content stay above the overlay */
.elementor-section.party-overlay > .elementor-container {
    position: relative;
    z-index: 1;
}

/* Subtle party glow animation */
.elementor-section.party-overlay::after {
    animation: partyGlow 6s ease-in-out infinite alternate;
}

@keyframes partyGlow {
    0% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
    }
}

/* Alternative: More Intense Party - use "party-overlay-dramatic" */
.elementor-section.party-overlay-dramatic {
    position: relative;
    overflow: visible !important;
}

.elementor-section.party-overlay-dramatic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.7) 0%,            /* Even darker at top */
            rgba(139, 0, 139, 0.5) 25%,       /* Deep magenta */
            rgba(219, 39, 119, 0.45) 50%,     /* Hot pink */
            rgba(147, 51, 234, 0.4) 75%,      /* Purple */
            rgba(236, 72, 153, 0.35) 100%     /* Pink bottom */
        ),
        radial-gradient(
            ellipse at 20% 30%,
            rgba(236, 72, 153, 0.6) 0%,       /* Bright pink glow */
            transparent 50%
        ),
        radial-gradient(
            ellipse at 80% 70%,
            rgba(147, 51, 234, 0.5) 0%,       /* Bright purple glow */
            transparent 50%
        );
    z-index: 0;
    pointer-events: none;
    animation: partyPulse 4s ease-in-out infinite alternate;
}

@keyframes partyPulse {
    0% {
        opacity: 0.85;
    }
    100% {
        opacity: 1;
    }
}

.elementor-section.party-overlay-dramatic > .elementor-container {
    position: relative;
    z-index: 1;
}

/* Alternative: Subtle Pink/Purple - use "party-overlay-elegant" */
.elementor-section.party-overlay-elegant {
    position: relative;
    overflow: visible !important;
}

.elementor-section.party-overlay-elegant::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.6) 0%,                /* Dark top for nav */
        rgba(156, 81, 182, 0.3) 30%,          /* Soft purple */
        rgba(219, 112, 147, 0.25) 60%,        /* Pale violet red */
        rgba(186, 85, 211, 0.2) 100%          /* Medium orchid */
    );
    z-index: 0;
    pointer-events: none;
}

.elementor-section.party-overlay-elegant > .elementor-container {
    position: relative;
    z-index: 1;
}

/* Ensure text is readable with better shadow */
.party-overlay .elementor-heading-title,
.party-overlay-dramatic .elementor-heading-title,
.party-overlay-elegant .elementor-heading-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.party-overlay .elementor-widget-wrap,
.party-overlay-dramatic .elementor-widget-wrap,
.party-overlay-elegant .elementor-widget-wrap {
    position: relative;
    z-index: 1;
}

/* ============================================
   CARD HOVER EFFECT
   Add "card-hover" to your Elementor container CSS Classes
   ============================================ */

/* Base card styling with smooth transitions */
.card-hover {
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Hover effect: Lift up and increase shadow */
.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Alternative: Subtle card hover - use "card-hover-subtle" */
.card-hover-subtle {
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-hover-subtle:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Alternative: Dramatic card hover - use "card-hover-dramatic" */
.card-hover-dramatic {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.card-hover-dramatic:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

/* Ensure icons/images inside cards don't get distorted */
.card-hover img,
.card-hover-subtle img,
.card-hover-dramatic img {
    transition: transform 0.3s ease;
}

/* Optional: Icons can scale slightly on hover for extra effect */
.card-hover:hover img,
.card-hover-subtle:hover img,
.card-hover-dramatic:hover img {
    transform: scale(1.05);
}

/* ============================================
   DEFAULT BUTTON STYLES - Gold Pill Design
   Automatically styles all buttons to match brand
   ============================================ */

/* Elementor Button Widget - Primary Style */
/* Default green - Elementor inline styles will override this */
.elementor-button-wrapper .elementor-button,
.elementor-button {
    background-color: #748173;
    box-shadow: 0 4px 15px rgba(116, 129, 115, 0.3);
}

/* Button styling that always applies (regardless of color) */
.elementor-button-wrapper .elementor-button,
.elementor-button {
    background-image: none !important;
    border: none !important;
    border-radius: 50px !important; /* Pill shape */
    padding: 15px 40px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

/* Default hover effect - only for buttons without Elementor custom colors */
.elementor-button-wrapper .elementor-button:not([style*="background"]):hover,
.elementor-button:not([style*="background"]):hover {
    background-color: #647163; /* Darker green on hover */
    box-shadow: 0 6px 20px rgba(116, 129, 115, 0.4);
}

/* Hover effects that apply to all buttons */
.elementor-button-wrapper .elementor-button:hover,
.elementor-button:hover {
    transform: translateY(-2px) !important;
}

/* Button Active/Pressed State */
.elementor-button-wrapper .elementor-button:active,
.elementor-button:active {
    transform: translateY(0) !important;
}

/* General HTML Buttons */
button,
input[type="submit"],
input[type="button"],
.btn,
.button {
    background-color: #748173;
    border: none;
    border-radius: 50px;
    padding: 15px 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(116, 129, 115, 0.3);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover {
    background-color: #647163;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(116, 129, 115, 0.4);
}

/* Secondary Button Style - Sage Green (use class "btn-secondary") */
/* Note: These can still be overridden by Elementor inline styles */
.elementor-button.btn-secondary:not([style*="background"]),
.btn-secondary:not([style*="background"]),
.button-secondary:not([style*="background"]) {
    background-color: #7A8B7D;
    box-shadow: 0 4px 15px rgba(122, 139, 125, 0.3);
}

.elementor-button.btn-secondary:not([style*="background"]):hover,
.btn-secondary:not([style*="background"]):hover,
.button-secondary:not([style*="background"]):hover {
    background-color: #6A7B6D;
    box-shadow: 0 6px 20px rgba(122, 139, 125, 0.4);
}

/* Outline Button Style (use class "btn-outline") */
/* Note: These can still be overridden by Elementor inline styles */
.elementor-button.btn-outline:not([style*="background"]),
.btn-outline:not([style*="background"]),
.button-outline:not([style*="background"]) {
    background-color: transparent;
    border: 2px solid #748173;
    color: #748173;
    box-shadow: none;
}

.elementor-button.btn-outline:not([style*="background"]):hover,
.btn-outline:not([style*="background"]):hover,
.button-outline:not([style*="background"]):hover {
    background-color: #748173;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(116, 129, 115, 0.3);
}

/* Small Button Size (use class "btn-small") */
.elementor-button.btn-small,
.btn-small {
    padding: 10px 30px !important;
    font-size: 0.75rem !important;
}

/* Large Button Size (use class "btn-large") */
.elementor-button.btn-large,
.btn-large {
    padding: 18px 50px !important;
    font-size: 1rem !important;
}

/* Fix for buttons with icons */
.elementor-button .elementor-button-icon {
    margin-right: 8px;
}

/* Default button text color - applied to parent so Elementor inline styles can override */
.elementor-button-wrapper .elementor-button,
.elementor-button {
    color: #ffffff;
}

/* Font weight always applies to button text */
.elementor-button-text {
    font-weight: 600 !important;
}