/* ========================================
   BRW BAR inc. - Makeup Theme Color Scheme
   Inspired by vibrant eyebrow makeup aesthetics
   Hot Pink, Orange, Yellow, Purple accents
   ======================================== */

/* ========================================
   Color Variables & Theme Override
   ======================================== */
:root {
    /* Primary Colors - Vibrant Makeup Theme */
    --primary-pink: #FF006E;        /* Hot Pink */
    --primary-magenta: #E91E8C;     /* Magenta Pink */
    --primary-orange: #FF8C42;      /* Vibrant Orange */
    --primary-yellow: #FFB627;      /* Golden Yellow */
    --primary-purple: #8B5CF6;      /* Purple accent */
    
    /* Secondary Colors */
    --secondary-coral: #FF6B9D;     /* Coral Pink */
    --secondary-peach: #FFAB91;     /* Soft Peach */
    --secondary-lavender: #DDD6FE;  /* Light Lavender */
    
    /* Neutral Colors */
    --neutral-white: #FFFFFF;
    --neutral-cream: #FFF9F5;       /* Warm Cream */
    --neutral-light: #FFF0F3;       /* Light Pink Tint */
    --neutral-gray: #4A4A4A;
    --neutral-dark: #2D2D2D;
    
    /* Gradient Combinations */
    --gradient-pink-orange: linear-gradient(135deg, #FF006E 0%, #FF8C42 100%);
    --gradient-pink-purple: linear-gradient(135deg, #E91E8C 0%, #8B5CF6 100%);
    --gradient-orange-yellow: linear-gradient(135deg, #FF8C42 0%, #FFB627 100%);
    --gradient-light: linear-gradient(135deg, #FFF0F3 0%, #DDD6FE 100%);
}

/* ========================================
   Navigation Bar - Makeup Theme
   ======================================== */
.navbar {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.98), rgba(255, 240, 243, 0.98));
    box-shadow: 0 2px 15px rgba(255, 0, 110, 0.1);
}

/* Logo with gradient effect */
.logo a {
    border: 3px solid var(--primary-pink);
    background: var(--gradient-pink-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.logo a:hover {
    background: var(--primary-magenta);
    border-color: var(--primary-orange);
    -webkit-text-fill-color: var(--neutral-white);
}

.logo-text,
.logo-subtitle {
    background: var(--gradient-pink-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation Links */
.nav-link {
    color: var(--neutral-dark);
}

.nav-link::after {
    background: var(--gradient-pink-orange);
    height: 3px;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-pink);
}

/* ========================================
   Hero Section - Vibrant Makeup Theme
   ======================================== */
.hero-section {
    background: var(--gradient-light);
}

/* Decorative Blocks - Colorful Accents */
.decor-block-1 {
    background: var(--gradient-pink-orange);
    opacity: 0.85;
}

.decor-block-2 {
    background: var(--gradient-orange-yellow);
    opacity: 0.8;
}

/* Hero Card with gradient border */
.hero-card {
    background: var(--neutral-white);
    border: 3px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.hero-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: var(--gradient-pink-purple);
    border-radius: inherit;
    z-index: -1;
    opacity: 0.3;
}

/* Hero Title with gradient text */
.hero-title {
    background: var(--gradient-pink-purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-title .highlight {
    background: var(--gradient-pink-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

/* Decorative Lines - Colorful pattern */
.decor-lines {
    background: repeating-linear-gradient(
        45deg,
        var(--primary-pink),
        var(--primary-pink) 2px,
        var(--primary-orange) 2px,
        var(--primary-orange) 4px,
        var(--primary-yellow) 4px,
        var(--primary-yellow) 6px,
        transparent 6px,
        transparent 12px
    );
}

/* ========================================
   CTA Buttons - Vibrant Style
   ======================================== */
.cta-button {
    background: var(--gradient-pink-orange);
    border: none;
    color: var(--neutral-white);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(255, 0, 110, 0.3);
    transition: all 0.3s ease;
}

.cta-button:hover {
    background: var(--gradient-pink-purple);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(255, 0, 110, 0.4);
    color: var(--neutral-white);
}

/* ========================================
   Services Section - Colorful Cards
   ======================================== */
.services-intro {
    background: var(--gradient-light);
}

.section-title {
    background: var(--gradient-pink-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-grid {
    background: var(--neutral-cream);
}

.service-card {
    background: var(--neutral-white);
    border: 2px solid var(--neutral-light);
    transition: all 0.3s ease;
}

.service-card:hover {
    border-color: var(--primary-pink);
    box-shadow: 0 15px 40px rgba(255, 0, 110, 0.15);
}

/* Service Icons with gradient backgrounds */
.service-icon {
    background: var(--gradient-pink-orange);
    color: var(--neutral-white);
}

.service-card:hover .service-icon {
    background: var(--gradient-pink-purple);
    transform: rotate(360deg);
}

.service-title {
    color: var(--primary-pink);
}

.service-link {
    color: var(--primary-magenta);
    background: linear-gradient(to right, var(--primary-pink), var(--primary-orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   Why Choose Us Section
   ======================================== */
.why-choose-us {
    background: var(--neutral-white);
}

.feature-item i {
    color: var(--primary-pink);
    font-size: 1.8rem;
}

.feature-item h4 {
    color: var(--primary-magenta);
}

/* Why Visual Image Frame */
.why-visual {
    border: 4px solid transparent;
    background: var(--gradient-pink-orange);
    padding: 4px;
    border-radius: 10px;
}

.why-visual img {
    border-radius: 6px;
}

/* ========================================
   Booking Section - Bold Gradient
   ======================================== */
.booking-section {
    background: var(--gradient-pink-purple);
}

.booking-title {
    color: var(--neutral-white);
}

.booking-subtitle {
    color: var(--neutral-cream);
}

.booking-section .cta-button {
    background: var(--neutral-white);
    color: var(--primary-pink);
    border: 3px solid var(--neutral-white);
}

.booking-section .cta-button:hover {
    background: var(--primary-yellow);
    color: var(--neutral-dark);
    border-color: var(--primary-yellow);
}

/* ========================================
   Footer - Dark with Colorful Accents
   ======================================== */
.footer {
    background: linear-gradient(135deg, #2D2D2D 0%, #1A1A1A 100%);
}

.footer .logo {
    border-color: var(--primary-pink);
    background: var(--gradient-pink-orange);
}

.footer .logo-text,
.footer .logo-subtitle {
    background: var(--gradient-pink-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-column h4 {
    color: var(--primary-pink);
}

.footer-links a:hover {
    color: var(--primary-orange);
}

.social-links a {
    border-color: var(--primary-pink);
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--gradient-pink-orange);
    border-color: var(--primary-orange);
    transform: translateY(-3px);
}

.contact-info i {
    color: var(--primary-orange);
}

/* ========================================
   Page Headers - Gradient Backgrounds
   ======================================== */
.page-header {
    background: var(--gradient-pink-purple);
}

.page-title {
    color: var(--neutral-white);
}

.page-subtitle {
    color: var(--neutral-cream);
}

/* ========================================
   Additional Page Elements
   ======================================== */

/* Values & Mission Cards */
.value-card {
    border: 2px solid var(--neutral-light);
    transition: all 0.3s ease;
}

.value-card:hover {
    border-color: var(--primary-pink);
    box-shadow: 0 15px 40px rgba(255, 0, 110, 0.15);
}

.value-icon {
    background: var(--gradient-orange-yellow);
    color: var(--neutral-white);
}

.value-card:hover .value-icon {
    background: var(--gradient-pink-purple);
}

.value-card h3 {
    color: var(--primary-magenta);
}

/* Team Members */
.member-image {
    border-color: var(--primary-pink);
}

.member-role {
    color: var(--primary-orange);
}

/* Service Detail Pages */
.service-category {
    color: var(--primary-magenta);
}

.service-detail-title {
    background: var(--gradient-pink-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.service-item {
    background-color: var(--neutral-light);
    border-left-color: transparent;
}

.service-item:hover {
    border-left-color: var(--primary-pink);
    background-color: var(--neutral-white);
}

.service-item h4 i {
    color: var(--primary-orange);
}

.price {
    color: var(--primary-pink);
}

.service-icon-large {
    background: var(--gradient-pink-orange);
}

/* Contact Form */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-pink);
    box-shadow: 0 0 0 3px rgba(255, 0, 110, 0.1);
}

.info-icon {
    background: var(--gradient-orange-yellow);
    color: var(--neutral-white);
}

.info-content a:hover {
    color: var(--primary-pink);
}

.social-links-large a {
    border-color: var(--primary-pink);
}

.social-links-large a:hover {
    background: var(--gradient-pink-orange);
    color: var(--neutral-white);
    border-color: var(--primary-orange);
}

/* FAQ Items */
.faq-item {
    background-color: var(--neutral-light);
    border-left: 4px solid var(--primary-pink);
}

.faq-item:hover {
    background: var(--gradient-light);
}

.faq-question i {
    color: var(--primary-orange);
}

/* Why Choose Numbers */
.why-number {
    background: var(--gradient-pink-orange);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Additional Services Cards */
.additional-card {
    background-color: var(--neutral-light);
}

.additional-card:hover {
    background: var(--gradient-light);
    border-left: 4px solid var(--primary-pink);
}

.additional-card i {
    color: var(--primary-magenta);
}

/* CTA Sections */
.cta-section {
    background: var(--gradient-pink-purple);
}

.cta-content h2 {
    color: var(--neutral-white);
}

.cta-content p {
    color: var(--neutral-cream);
}

/* ========================================
   Accent Elements & Decorations
   ======================================== */

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-light);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-pink-orange);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gradient-pink-purple);
}

/* Selection Color */
::selection {
    background: var(--primary-pink);
    color: var(--neutral-white);
}

::-moz-selection {
    background: var(--primary-pink);
    color: var(--neutral-white);
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 768px) {
    .hero-card::before {
        opacity: 0.2;
    }
    
    .service-icon {
        width: 70px;
        height: 70px;
    }
    
    .decor-block-1,
    .decor-block-2 {
        opacity: 0.6;
    }
}

/* ========================================
   Loading Animation (Optional)
   ======================================== */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animated-gradient {
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}