/*------------------------------------------------------------------
Lomboos Modern Theme - Light & Vibrant
Based on the new Lomboos logo color palette

Color Palette:
- Vibrant Purple (Primary): #9D22F5
- Creative Magenta (Secondary): #D936A1
- Energetic Orange (Accent): #FF8B3D
- Warm Gold (Accent): #FFC233
- Deep Plum (Body Text): #2A1B38
- Soft Lavender (Alt Background): #F7F4FA
- Clean White: #FFFFFF

Gradient: linear-gradient(135deg, #9D22F5 0%, #D936A1 50%, #FF8B3D 100%)
-------------------------------------------------------------------*/

/* =================================== */
/*  CSS Variables for easy theming
/* =================================== */
:root {
    --lomboos-purple: #9D22F5;
    --lomboos-magenta: #D936A1;
    --lomboos-orange: #FF8B3D;
    --lomboos-gold: #FFC233;
    --lomboos-plum: #2A1B38;
    --lomboos-lavender: #F7F4FA;
    --lomboos-white: #FFFFFF;
    --lomboos-gradient: linear-gradient(135deg, #9D22F5 0%, #D936A1 50%, #FF8B3D 100%);
    --lomboos-gradient-reverse: linear-gradient(135deg, #FF8B3D 0%, #D936A1 50%, #9D22F5 100%);
    --lomboos-soft-shadow: 0 10px 40px rgba(157, 34, 245, 0.15);
    --lomboos-hover-shadow: 0 15px 50px rgba(157, 34, 245, 0.25);
    --lomboos-max-width: 1400px;
}

/* =================================== */
/*  Page Container - Max Width Control
/* =================================== */
body {
    color: var(--lomboos-plum);
    background-color: var(--lomboos-white);
}

/* Main content wrapper for max-width on large screens */
.g1-gradient-color,
.g2-gradient-color,
.g3-gradient-color,
.g4-gradient-color {
    max-width: var(--lomboos-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Body background for areas outside the max-width container */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--lomboos-lavender);
    z-index: -1;
}

/* Ensure sections within containers don't overflow oddly */
.slider-area,
.feature-area,
.screens-area,
.info-area,
.call-to-action-area,
.home-contact-area {
    max-width: 100%;
}

/* =================================== */
/*  Fix text-white class for light theme
/*  Override white text to use plum (dark) text
/* =================================== */
.text-white {
    color: var(--lomboos-plum) !important;
}

/* =================================== */
/*  Base Typography & Body
/* =================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--lomboos-plum);
}

a {
    color: var(--lomboos-purple);
}

a:hover {
    color: var(--lomboos-magenta);
}

/* =================================== */
/*  Selection Colors
/* =================================== */
::-moz-selection {
    background-color: var(--lomboos-purple);
    color: var(--lomboos-white);
}

::selection {
    background-color: var(--lomboos-purple);
    color: var(--lomboos-white);
}

/* =================================== */
/*  Header & Navigation
/* =================================== */
#header {
    position: static !important;
    background: var(--lomboos-white);
    border-bottom: 1px solid rgba(157, 34, 245, 0.1);
    box-shadow: 0 2px 20px rgba(42, 27, 56, 0.05);
    max-width: var(--lomboos-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Logo image styling */
#header #logo a {
    display: flex;
    align-items: center;
}

#header #logo img {
    height: 50px;
    width: auto;
    transition: opacity 0.2s ease;
}

#header #logo img:hover {
    opacity: 0.85;
}

/* Remove scrolled state changes since header is no longer fixed */
#header.header-scrolled {
    background: var(--lomboos-white);
    box-shadow: 0 2px 20px rgba(42, 27, 56, 0.05);
}

#header.header-scrolled .nav-menu a {
    color: var(--lomboos-plum);
}

#header.header-scrolled .nav-menu a:hover {
    color: var(--lomboos-purple);
}

.nav-menu a {
    color: var(--lomboos-plum);
}

.nav-menu a:hover {
    color: var(--lomboos-purple);
}

.nav-menu li > .menu-active {
    color: var(--lomboos-purple) !important;
}

.parent-active > .sf-with-ul {
    color: var(--lomboos-purple);
}

/* =================================== */
/*  Dropdown Menu Styling
/* =================================== */
.nav-menu ul {
    background: var(--lomboos-white);
    box-shadow: 0 10px 40px rgba(42, 27, 56, 0.15);
    border-radius: 12px;
    padding: 10px 0;
    min-width: 220px;
    border: 1px solid rgba(157, 34, 245, 0.1);
}

.nav-menu ul li {
    border-bottom: none;
}

.nav-menu ul li a {
    color: var(--lomboos-plum);
    padding: 10px 20px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.nav-menu ul li:hover > a {
    color: var(--lomboos-purple);
    background: var(--lomboos-lavender);
}

/* Dropdown Arrow - Using ::before to avoid conflict with underline ::after */
/* First, disable the original ::after arrow from main.css */
.sf-arrows .sf-with-ul:after {
    display: none !important;
}

/* Create new arrow using ::before */
.nav-menu > li.menu-has-children > a {
    padding-right: 22px !important;
}

.nav-menu > li.menu-has-children > a::before {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--lomboos-plum);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.nav-menu > li.menu-has-children > a:hover::before {
    border-top-color: var(--lomboos-purple);
}

/* Rotate arrow when dropdown is open */
.nav-menu > li.menu-has-children:hover > a::before {
    transform: translateY(-50%) rotate(180deg);
    border-top-color: var(--lomboos-purple);
}

/* Sub-menu arrows point right (using ::before as well) */
.nav-menu ul li.menu-has-children > a {
    padding-right: 30px !important;
}

.nav-menu ul li.menu-has-children > a::before {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid var(--lomboos-plum);
}

.nav-menu ul li.menu-has-children:hover > a::before {
    border-left-color: var(--lomboos-purple);
}

#mobile-nav-toggle i {
    color: var(--lomboos-purple);
}

#mobile-nav {
    background: rgba(42, 27, 56, 0.95);
}

/* =================================== */
/*  Gradient Backgrounds (Override dark blue)
/* =================================== */
.g1-gradient-bg,
.g1-gradient-color {
    background: var(--lomboos-white) !important;
    background-image: none !important;
}

.g2-gradient-bg,
.g2-gradient-color {
    background: var(--lomboos-lavender) !important;
    background-image: none !important;
}

.g3-gradient-bg,
.g3-gradient-color {
    background: var(--lomboos-white) !important;
    background-image: none !important;
}

.g4-gradient-bg,
.g4-gradient-color {
    background: var(--lomboos-lavender) !important;
    background-image: none !important;
}

/* Hero section with subtle gradient accent */
.slider-area {
    background: var(--lomboos-white) !important;
    position: relative;
}

.slider-area::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--lomboos-gradient);
}

/* =================================== */
/*  Primary Gradient Backgrounds
/* =================================== */
.p1-gradient-bg {
    background: var(--lomboos-gradient) !important;
    background-image: none !important;
}

.p1-gradient-color {
    background: var(--lomboos-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =================================== */
/*  Slider Area
/* =================================== */
.slider-area .slider-left h1 {
    color: var(--lomboos-plum);
}

.slider-area .slider-left p {
    color: #666;
}

.slider-area .slider-left ul li {
    color: #666;
}

.slider-area .owl-dot {
    color: rgba(157, 34, 245, 0.4) !important;
}

.slider-area .owl-dot:after {
    background: rgba(157, 34, 245, 0.4) !important;
}

.slider-area .active.owl-dot:before {
    color: var(--lomboos-purple) !important;
}

.slider-area .active.owl-dot:after {
    background: var(--lomboos-purple) !important;
}

/* =================================== */
/*  Feature Area
/* =================================== */
.feature-area {
    background: var(--lomboos-white);
}

.feature-area .single-feature h4 {
    color: var(--lomboos-plum);
}

.feature-area .single-feature p {
    color: #666;
}

.feature-area .single-feature:hover img {
    filter: drop-shadow(0 5px 15px rgba(157, 34, 245, 0.3));
}

/* =================================== */
/*  Home Area Titles
/* =================================== */
.home-area-title h1 {
    color: var(--lomboos-plum) !important;
}

.home-area-title p {
    color: #666;
}

/* For sections that need white text on colored backgrounds */
.g2-gradient-color .home-area-title h1,
.g4-gradient-color .home-area-title h1,
.screens-area .home-area-title h1,
.info-area .home-area-title h1 {
    color: var(--lomboos-plum) !important;
}

.g2-gradient-color .home-area-title p,
.g4-gradient-color .home-area-title p,
.screens-area .home-area-title p,
.info-area .home-area-title p {
    color: #666;
}

/* =================================== */
/*  Screens Area
/* =================================== */
.screens-area {
    background: var(--lomboos-lavender);
}

.screens-area .single-feature h4 {
    color: var(--lomboos-plum);
}

.screens-area .single-feature p,
.screens-area .single-feature li {
    color: #666;
}

/* =================================== */
/*  Info Area
/* =================================== */
.info-area {
    background: var(--lomboos-lavender);
}

.info-area .subs {
    color: #666;
}

/* =================================== */
/*  Price Area
/* =================================== */
.price-area .single-price {
    background: var(--lomboos-white);
    border: 1px solid rgba(157, 34, 245, 0.1);
    box-shadow: var(--lomboos-soft-shadow);
    transition: all 0.3s ease;
}

.price-area .single-price:hover {
    background: var(--lomboos-gradient);
    border-color: transparent;
    transform: translateY(-5px);
    box-shadow: var(--lomboos-hover-shadow);
}

.price-area .single-price .price-middle h1 {
    color: var(--lomboos-plum);
}

.price-area .single-price:hover .price-middle h1 {
    color: var(--lomboos-white);
    text-shadow: none;
}

.price-area .single-price .price-bottom ul li {
    color: var(--lomboos-plum);
    background: var(--lomboos-lavender);
    border-color: rgba(157, 34, 245, 0.1);
}

.price-area .single-price:hover .price-bottom ul li {
    color: var(--lomboos-white);
    background: rgba(255, 255, 255, 0.15);
    border-color: transparent;
}

/* =================================== */
/*  Team Area
/* =================================== */
.team-area {
    background: var(--lomboos-lavender);
}

.team-area .single-team .details {
    background: var(--lomboos-white);
    box-shadow: var(--lomboos-soft-shadow);
}

.team-area .single-team .details h4 {
    color: var(--lomboos-plum);
}

.team-area .single-team .details p {
    color: #666;
}

.team-area .single-team:hover .details {
    background: var(--lomboos-gradient);
}

.team-area .single-team:hover .details h4,
.team-area .single-team:hover .details p {
    color: var(--lomboos-white);
}

/* =================================== */
/*  Game Review Area
/* =================================== */
.game-review-area .single-review {
    background: var(--lomboos-white);
    border: 1px solid rgba(157, 34, 245, 0.1);
    box-shadow: var(--lomboos-soft-shadow);
}

.game-review-area .single-review h4 {
    color: var(--lomboos-plum);
}

.game-review-area .single-review p {
    color: #666;
}

.game-review-area .single-review:hover {
    background: var(--lomboos-gradient);
    border-color: transparent;
}

.game-review-area .single-review:hover h4,
.game-review-area .single-review:hover p {
    color: var(--lomboos-white);
}

.game-review-area .ti-shift-left,
.game-review-area .ti-shift-right {
    color: var(--lomboos-purple);
}

.game-review-area .ti-shift-left:hover,
.game-review-area .ti-shift-right:hover {
    color: var(--lomboos-magenta);
}

/* =================================== */
/*  Call to Action Area
/* =================================== */
.call-to-action-wrap {
    background: var(--lomboos-gradient);
}

.call-to-action-wrap:before {
    display: none;
}

.call-to-action-area .home-area-title h1 {
    color: var(--lomboos-white) !important;
}

.buttons {
    background: var(--lomboos-white);
    color: var(--lomboos-plum);
    border-radius: 12px;
    box-shadow: var(--lomboos-soft-shadow);
}

.buttons i {
    background: var(--lomboos-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

.buttons a {
    color: var(--lomboos-plum);
}

.buttons p {
    color: #666;
}

.buttons:hover {
    background: transparent;
    border-color: var(--lomboos-white);
}

.buttons:hover i,
.buttons:hover a,
.buttons:hover p {
    color: var(--lomboos-white) !important;
}

/* =================================== */
/*  Home Contact Area
/* =================================== */
.home-contact-area {
    background: var(--lomboos-white);
    padding: 40px 0 !important;
}

.home-contact-area .section-gap {
    padding: 0 !important;
}

.home-contact-area .home-area-title {
    margin-bottom: 25px;
}

.home-contact-area .home-area-title h1 {
    font-size: 26px;
}

.home-contact-area .single-contact-address {
    margin-bottom: 15px;
}

.home-contact-area .single-contact-address h5 {
    color: var(--lomboos-plum) !important;
    font-size: 16px;
}

.home-contact-area .single-contact-address p {
    color: #666;
    font-size: 14px;
}

.home-contact-area .single-contact-address i {
    color: var(--lomboos-purple);
    background: var(--lomboos-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-contact-area .form-area input,
.home-contact-area .form-area textarea {
    background: var(--lomboos-lavender);
    border: 1px solid rgba(157, 34, 245, 0.15);
    color: var(--lomboos-plum);
    border-radius: 8px;
    padding: 12px 15px;
}

.home-contact-area .form-area input::placeholder,
.home-contact-area .form-area textarea::placeholder {
    color: #888 !important;
    opacity: 1;
}

.home-contact-area .form-area input::-webkit-input-placeholder,
.home-contact-area .form-area textarea::-webkit-input-placeholder {
    color: #888 !important;
}

.home-contact-area .form-area input::-moz-placeholder,
.home-contact-area .form-area textarea::-moz-placeholder {
    color: #888 !important;
    opacity: 1;
}

.home-contact-area .form-area textarea {
    height: 120px;
}

.home-contact-area .form-area input:focus,
.home-contact-area .form-area textarea:focus {
    border-color: var(--lomboos-purple);
    box-shadow: 0 0 0 3px rgba(157, 34, 245, 0.1);
}

.home-contact-area .contact-btns {
    color: var(--lomboos-plum);
    background: var(--lomboos-lavender);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
}

/* =================================== */
/*  Footer Area
/* =================================== */
.footer-area {
    background: var(--lomboos-plum);
    padding-top: 50px !important;
    padding-bottom: 30px !important;
    position: relative;
}

/* Hide the decorative pattern image */
.footer-area .pattern-right {
    display: none;
}

.footer-area h4 {
    color: var(--lomboos-white);
    font-size: 16px;
    margin-bottom: 15px;
}

.footer-area .single-footer-widget {
    margin-bottom: 20px;
}

.footer-area .single-footer-widget p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.6;
}

.single-footer-widget .menu-list li {
    margin-bottom: 8px;
}

.single-footer-widget .menu-list li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.single-footer-widget .menu-list li a:hover {
    color: var(--lomboos-magenta);
}

.footer-area .footer-bottom {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-area .footer-bottom p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.footer-area .footer-bottom a {
    color: var(--lomboos-magenta);
}

.footer-area .number {
    color: var(--lomboos-magenta);
}

.footer-area .genric-btn {
    background: var(--lomboos-gradient);
}

.footer-area .genric-btn:hover {
    box-shadow: 0 5px 20px rgba(217, 54, 161, 0.4);
}

.footer-area .footer-bottom .footer-social a {
    background: var(--lomboos-white);
}

.footer-area .footer-bottom .footer-social a:hover {
    background: var(--lomboos-gradient);
    box-shadow: 0 5px 20px rgba(157, 34, 245, 0.4);
}

.footer-area .footer-bottom .footer-social a:hover i {
    color: var(--lomboos-white);
}

.footer-area .footer-bottom .footer-social i {
    color: var(--lomboos-plum);
}

/* =================================== */
/*  Buttons - Primary
/* =================================== */
.genric-btn.primary {
    background: var(--lomboos-gradient);
    color: var(--lomboos-white);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(157, 34, 245, 0.3);
    transition: all 0.3s ease;
}

.genric-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(157, 34, 245, 0.4);
}

.genric-btn.primary-border {
    color: var(--lomboos-purple);
    border: 2px solid var(--lomboos-purple);
    background: transparent;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.genric-btn.primary-border:hover {
    background: var(--lomboos-purple);
    color: var(--lomboos-white);
    border: 2px solid var(--lomboos-purple);
}

/* Secondary button with magenta */
.genric-btn.secondary {
    background: var(--lomboos-magenta);
    color: var(--lomboos-white);
    border-radius: 8px;
}

.genric-btn.secondary:hover {
    background: var(--lomboos-purple);
}

/* Accent button with orange */
.genric-btn.accent,
.genric-btn.warning {
    background: var(--lomboos-orange);
    color: var(--lomboos-white);
    border-radius: 8px;
}

.genric-btn.accent:hover,
.genric-btn.warning:hover {
    background: var(--lomboos-gold);
    color: var(--lomboos-plum);
}

/* =================================== */
/*  Scroll Down Indicator
/* =================================== */
.scroll-down a span {
    border-color: rgba(157, 34, 245, 0.4);
}


.scroll-down a span::before {
    color: var(--lomboos-purple) !important;
}

/* =================================== */
/*  Accordion & Toggle
/* =================================== */
.accordion > dt > a {
    background: var(--lomboos-lavender);
    color: var(--lomboos-plum);
    border-radius: 8px;
}

.accordion > dt > a.active {
    background: var(--lomboos-gradient);
    color: var(--lomboos-white);
}

.toggle > dt > a.active {
    color: var(--lomboos-purple);
    border-color: var(--lomboos-purple);
}

.toggle > dt > a.active:after {
    color: var(--lomboos-purple);
}

/* =================================== */
/*  Tabs
/* =================================== */
.jq-tab-menu .jq-tab-title:hover,
.jq-tab-menu .jq-tab-title.active {
    color: var(--lomboos-purple);
    border-bottom-color: var(--lomboos-purple);
}

/* =================================== */
/*  Page Header (deprecated - using page-hero-title instead)
/* =================================== */
.page-header-area {
    background: var(--lomboos-gradient);
    max-width: var(--lomboos-max-width);
    margin: 0 auto;
    border-radius: 0 0 20px 20px;
}

/* =================================== */
/*  Contact Page
/* =================================== */
.contact-section {
    padding: 40px 0 60px;
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
}

.contact-section .container {
    width: 100%;
}

.contact-card {
    background: var(--lomboos-white);
    border-radius: 20px;
    box-shadow: var(--lomboos-soft-shadow);
    overflow: hidden;
}

.contact-info {
    background: var(--lomboos-lavender);
    padding: 40px 30px;
    height: 100%;
}

.contact-info h3 {
    font-size: 22px;
    color: var(--lomboos-plum);
    margin-bottom: 10px;
}

.contact-intro {
    color: #666;
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: var(--lomboos-white);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon span {
    font-size: 18px;
    background: var(--lomboos-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-details h5 {
    font-size: 14px;
    color: var(--lomboos-plum);
    margin: 0 0 3px 0;
}

.contact-details p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.contact-details a {
    color: var(--lomboos-purple);
    text-decoration: none;
}

.contact-details a:hover {
    color: var(--lomboos-magenta);
}

.contact-form-wrap {
    padding: 40px;
}

.contact-form-wrap h3 {
    font-size: 22px;
    color: var(--lomboos-plum);
    margin-bottom: 25px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form .form-control {
    background: var(--lomboos-lavender);
    border: 1px solid rgba(157, 34, 245, 0.1);
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 14px;
    color: var(--lomboos-plum);
    transition: all 0.2s ease;
}

.contact-form .form-control:focus {
    border-color: var(--lomboos-purple);
    box-shadow: 0 0 0 3px rgba(157, 34, 245, 0.1);
    outline: none;
}

.contact-form .form-control::placeholder {
    color: #888 !important;
    opacity: 1;
}

.contact-form .form-control::-webkit-input-placeholder {
    color: #888 !important;
}

.contact-form .form-control::-moz-placeholder {
    color: #888 !important;
    opacity: 1;
}

.contact-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.contact-form .genric-btn {
    padding: 14px 30px;
}

.contact-form .genric-btn span {
    margin-left: 8px;
}

@media (max-width: 991px) {
    .contact-info {
        padding: 30px 25px;
    }

    .contact-form-wrap {
        padding: 30px 25px;
    }
}

/* =================================== */
/*  Cards & Boxes with modern styling
/* =================================== */
.single-feature,
.single-price,
.single-team .details,
.single-review {
    border-radius: 16px;
}

/* =================================== */
/*  Star Ratings
/* =================================== */
.star .checked {
    color: var(--lomboos-gold) !important;
}

/* =================================== */
/*  Badges & Tags
/* =================================== */
.badge-new,
.tag-new {
    background: var(--lomboos-orange);
    color: var(--lomboos-white);
}

.badge-pro,
.tag-pro {
    background: var(--lomboos-gold);
    color: var(--lomboos-plum);
}

/* =================================== */
/*  Success States
/* =================================== */
.success-check,
.checkmark {
    color: var(--lomboos-gold);
}

/* =================================== */
/*  Links hover effect with underline
/*  Exclude dropdown parent items (menu-has-children)
/* =================================== */
.nav-menu a,
.single-footer-widget a {
    position: relative;
}

/* Underline effect - only for non-dropdown items */
.nav-menu > li:not(.menu-has-children) > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--lomboos-gradient);
    transition: width 0.3s ease;
}

.nav-menu > li:not(.menu-has-children) > a:hover::after,
.nav-menu > li:not(.menu-has-children) > .menu-active::after {
    width: 100%;
}

/* =================================== */
/*  Light version overrides
/* =================================== */
.light-version .slider-area {
    background: var(--lomboos-white);
}

.light-version .info-area {
    background: var(--lomboos-lavender);
}

.light-version .team-area {
    background: var(--lomboos-lavender);
}

.light-version .footer-area {
    background: var(--lomboos-plum);
}

.light-version .home-area-title h1 {
    color: var(--lomboos-plum) !important;
}

.light-version .home-area-title p {
    color: #666;
}

.light-version #header .nav-menu a {
    color: var(--lomboos-plum);
}

.light-version #header .nav-menu a:hover {
    color: var(--lomboos-purple);
}

.light-version #mobile-nav-toggle i {
    color: var(--lomboos-purple);
}

.light-version .parent-active > .sf-with-ul {
    color: var(--lomboos-purple) !important;
}

.light-version .scroll-down a span {
    border-color: rgba(157, 34, 245, 0.3);
}

.light-version .slider-area .owl-dot {
    color: rgba(157, 34, 245, 0.5) !important;
}

.light-version .slider-area .owl-dot:after {
    background: rgba(157, 34, 245, 0.5) !important;
}

.light-version .slider-area .active.owl-dot:before {
    color: var(--lomboos-purple) !important;
}

.light-version .slider-area .active.owl-dot:after {
    background: var(--lomboos-purple) !important;
}

.light-version .feature-area .single-feature h4 {
    color: var(--lomboos-plum);
}

.light-version .feature-area .single-feature p {
    color: #666;
}

.light-version .screens-area .screen-one .details-section a,
.light-version .screens-area .screen-two .details-section a {
    color: #666;
}

.light-version .screens-area .screen-one .details-section a:hover,
.light-version .screens-area .screen-two .details-section a:hover {
    color: var(--lomboos-purple);
}

.light-version .price-area .single-price:hover {
    background: var(--lomboos-gradient);
}

.light-version .price-area .single-price:hover .price-middle,
.light-version .price-area .single-price:hover .price-bottom {
    border-color: transparent;
}

.light-version .price-area .single-price:hover .price-middle h1 {
    color: var(--lomboos-white);
    text-shadow: none;
}

.light-version .team-area .single-team:hover .details {
    background: var(--lomboos-gradient);
    border-color: transparent;
}

.light-version .game-review-area .ti-shift-left,
.light-version .game-review-area .ti-shift-right {
    color: var(--lomboos-purple);
}

.light-version .game-review-area .ti-shift-left:hover,
.light-version .game-review-area .ti-shift-right:hover {
    color: var(--lomboos-magenta);
    text-shadow: none;
}

.light-version .game-review-area .single-review {
    background: var(--lomboos-white);
    border: 1px solid rgba(157, 34, 245, 0.1);
}

.light-version .game-review-area .single-review:hover {
    background: var(--lomboos-gradient);
    border-color: transparent;
}

.light-version .game-review-area .single-review p {
    color: #666;
}

.light-version .game-review-area .single-review:hover h4,
.light-version .game-review-area .single-review:hover p {
    color: var(--lomboos-white);
}

.light-version .home-contact-area .single-contact-address i {
    background: var(--lomboos-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.light-version .info-area .genric-btn:hover,
.light-version .home-contact-area .genric-btn:hover {
    box-shadow: 0 10px 30px rgba(157, 34, 245, 0.3);
}

.light-version .single-footer-widget .menu-list li a:hover {
    color: var(--lomboos-magenta);
}

/* =================================== */
/*  Page-specific overrides
/* =================================== */
.page-class #header {
    background: var(--lomboos-white);
    border-bottom: 1px solid rgba(157, 34, 245, 0.1) !important;
}

.page-class #header .nav-menu a {
    color: var(--lomboos-plum);
}

.page-class #header .nav-menu a:hover {
    color: var(--lomboos-purple);
}

.page-class #mobile-nav-toggle i {
    color: var(--lomboos-purple);
}

.page-class .parent-active > .sf-with-ul {
    color: var(--lomboos-purple) !important;
}

/* Blog class overrides */
.blog-class #header {
    background: var(--lomboos-white);
}

.blog-class .nav-menu a {
    color: var(--lomboos-plum);
}

.blog-class .nav-menu a:hover {
    color: var(--lomboos-purple);
}

.blog-class #mobile-nav-toggle i {
    color: var(--lomboos-purple);
}

.blog-class .parent-active > .sf-with-ul {
    color: var(--lomboos-purple) !important;
}

/* =================================== */
/*  Utility Classes
/* =================================== */
.text-purple {
    color: var(--lomboos-purple) !important;
}

.text-magenta {
    color: var(--lomboos-magenta) !important;
}

.text-orange {
    color: var(--lomboos-orange) !important;
}

.text-gold {
    color: var(--lomboos-gold) !important;
}

.text-plum {
    color: var(--lomboos-plum) !important;
}

.bg-purple {
    background-color: var(--lomboos-purple) !important;
}

.bg-magenta {
    background-color: var(--lomboos-magenta) !important;
}

.bg-orange {
    background-color: var(--lomboos-orange) !important;
}

.bg-gold {
    background-color: var(--lomboos-gold) !important;
}

.bg-lavender {
    background-color: var(--lomboos-lavender) !important;
}

.bg-gradient {
    background: var(--lomboos-gradient) !important;
}

/* Gradient text utility */
.gradient-text {
    background: var(--lomboos-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* =================================== */
/*  Hover Box Shadow Effect
/* =================================== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--lomboos-hover-shadow);
}

/* =================================== */
/*  Modern Card Style
/* =================================== */
.modern-card {
    background: var(--lomboos-white);
    border-radius: 16px;
    padding: 30px;
    box-shadow: var(--lomboos-soft-shadow);
    transition: all 0.3s ease;
}

.modern-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--lomboos-hover-shadow);
}

/* =================================== */
/*  Responsive adjustments
/* =================================== */
@media (max-width: 991px) {
    .slider-area::before {
        height: 3px;
    }
}

@media (max-width: 768px) {
    .genric-btn.primary {
        padding: 0 20px;
    }
}

/* =================================== */
/*  Footer max-width adjustment
/* =================================== */
.footer-area {
    max-width: var(--lomboos-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* =================================== */
/*  Screens Area - Artist titles fix
/*  Keep white text for gradient backgrounds in specific sections
/* =================================== */
.screen-one .title h2,
.screen-two .title h2,
.screens-area .screen-left h2,
.screens-area .screen-right h2 {
    color: var(--lomboos-plum) !important;
}

.screens-area .details-section a {
    color: var(--lomboos-purple);
}

.screens-area .details-section a:hover {
    color: var(--lomboos-magenta);
}

.screens-area .details-section i {
    color: var(--lomboos-purple);
}

/* =================================== */
/*  Call to Action Area
/* =================================== */
.call-to-action-wrap {
    background: var(--lomboos-gradient) !important;
    border-radius: 16px;
    padding: 60px 30px;
}

.call-to-action-wrap h1,
.call-to-action-wrap p,
.call-to-action-area .text-white {
    color: var(--lomboos-white) !important;
}

.call-to-action-wrap::before {
    display: none;
}

/* Buttons in call-to-action keep white styling */
.call-to-action-wrap .buttons {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--lomboos-white);
}

.call-to-action-wrap .buttons:hover {
    background: var(--lomboos-white);
    border-color: var(--lomboos-white);
}

.call-to-action-wrap .buttons:hover i,
.call-to-action-wrap .buttons:hover a,
.call-to-action-wrap .buttons:hover p {
    color: var(--lomboos-purple) !important;
    -webkit-text-fill-color: var(--lomboos-purple);
}

.call-to-action-wrap .buttons a,
.call-to-action-wrap .buttons p {
    color: var(--lomboos-white);
}

.call-to-action-wrap .buttons i {
    background: none;
    -webkit-text-fill-color: var(--lomboos-white);
    color: var(--lomboos-white);
}

/* =================================== */
/*  Simple Hero Section (replacing fullscreen)
/*  Normal content flow - takes only space needed
/* =================================== */

/* Override the JS fullscreen height forcing */
.fullscreen {
    height: auto !important;
    min-height: 0 !important;
}

/* Simple hero section */
.hero-section {
    padding: 60px 0;
    background: var(--lomboos-white);
}

.hero-section .container {
    max-width: 1200px;
}

.hero-section .hero-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
}

.hero-section .hero-text {
    flex: 1;
    min-width: 300px;
}

.hero-section .hero-text h1 {
    font-size: 42px;
    font-weight: 700;
    color: var(--lomboos-plum);
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-section .hero-text p {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 15px;
}

.hero-section .hero-image {
    flex: 0 0 400px;
    max-width: 100%;
}

.hero-section .hero-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--lomboos-soft-shadow);
}

@media (max-width: 991px) {
    .hero-section {
        padding: 40px 0;
    }

    .hero-section .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero-section .hero-text h1 {
        font-size: 32px;
    }

    .hero-section .hero-image {
        flex: 0 0 auto;
        max-width: 350px;
    }
}

@media (max-width: 576px) {
    .hero-section .hero-text h1 {
        font-size: 26px;
    }
}

/* Page title styling for product pages */
.page-hero-title {
    text-align: center;
    padding: 40px 15px 0;
}

.page-hero-title h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    margin: 0;
}

.page-hero-title p {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: #666;
    margin: 10px 0 0 0;
}

/* Simplified slider area - normal flow (no extra padding for fixed header) */
.slider-area {
    padding-top: 40px;
    padding-bottom: 40px;
}

.slider-area .item {
    padding: 40px 0;
}

/* Remove scroll-down indicator since content flows naturally */
.scroll-down {
    display: none;
}

/* First hero after page title needs less top padding */
.page-hero-title + .hero-section {
    padding-top: 40px;
}

/* Alternating hero image placement on larger screens */
@media (min-width: 992px) {
    .hero-section.bg-lavender .hero-content {
        flex-direction: row-reverse;
    }
}

/* =================================== */
/*  Art Gallery - Daily Challenge Winners
/* =================================== */
.art-gallery-area {
    background: var(--lomboos-lavender);
}

.art-card {
    background: var(--lomboos-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--lomboos-soft-shadow);
    transition: all 0.3s ease;
}

.art-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--lomboos-hover-shadow);
}

.art-card .art-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--lomboos-lavender);
}

.art-card .art-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.art-card:hover .art-image img {
    transform: scale(1.05);
}

.art-card .art-info {
    padding: 20px;
    text-align: center;
}

.art-card .art-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--lomboos-plum);
    margin: 0 0 5px 0;
    text-transform: capitalize;
}

.art-card .art-artist {
    font-size: 14px;
    color: #666;
    margin: 0 0 15px 0;
}

.art-card .art-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--lomboos-purple);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid var(--lomboos-purple);
    border-radius: 20px;
    transition: all 0.2s ease;
}

.art-card .art-download:hover {
    background: var(--lomboos-purple);
    color: var(--lomboos-white);
}

.art-card .art-download i {
    font-size: 12px;
}

/* Responsive adjustments for art gallery */
@media (max-width: 767px) {
    .art-card .art-info {
        padding: 15px;
    }

    .art-card .art-title {
        font-size: 16px;
    }
}

/* =================================== */
/*  Featured Product Section (Homepage)
/* =================================== */
.featured-product-section {
    padding: 40px 0 60px;
}

.featured-product-card {
    background: var(--lomboos-white);
    border-radius: 20px;
    box-shadow: var(--lomboos-hover-shadow);
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(157, 34, 245, 0.15);
}

.featured-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--lomboos-gradient);
    color: var(--lomboos-white);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

.featured-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.featured-text {
    flex: 1;
    min-width: 300px;
    padding: 50px 40px;
}

.featured-text h2 {
    font-size: 36px;
    margin-bottom: 10px;
    margin-top: 15px;
}

.featured-tagline {
    font-size: 18px;
    color: var(--lomboos-purple);
    font-weight: 500;
    margin-bottom: 20px;
}

.featured-text p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 15px;
}

.featured-highlights {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.featured-highlights li {
    padding: 8px 0;
    color: var(--lomboos-plum);
    font-size: 15px;
}

.featured-highlights li i {
    margin-right: 10px;
}

.featured-image {
    flex: 0 0 42%;
    max-width: 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    margin: 15px;
    background: var(--lomboos-lavender);
    border-radius: 16px;
}

.featured-image img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    border-radius: 12px;
}

/* Button wrapper to isolate hover movements */
.btn-wrapper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 25px;
    align-items: stretch;
}

/* Ensure buttons are same height and don't cause layout shift */
.btn-wrapper .genric-btn {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
}

@media (max-width: 991px) {
    .featured-content {
        flex-direction: column-reverse;
    }

    .featured-text {
        padding: 30px 25px;
        text-align: center;
    }

    .featured-text h2 {
        font-size: 28px;
    }

    .featured-image {
        flex: 0 0 100%;
        max-width: 100%;
        margin: 15px;
        padding: 15px;
    }

    .featured-image img {
        max-height: 280px;
    }

    .featured-highlights {
        text-align: left;
        max-width: 350px;
        margin: 20px auto;
    }

    .btn-wrapper {
        justify-content: center;
    }
}

/* =================================== */
/*  Products Section (Homepage)
/* =================================== */
.products-section {
    background: var(--lomboos-lavender);
}

.product-card {
    background: var(--lomboos-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--lomboos-soft-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card .product-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: var(--lomboos-lavender);
}

.product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.05);
}

.product-card .product-info {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-card h3 {
    font-size: 20px;
    color: var(--lomboos-plum);
    margin: 0 0 5px 0;
}

.product-card .product-tagline {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
}

.product-card .product-info > p:last-of-type {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
}

.product-card .product-links {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.product-card .btn-sm {
    padding: 8px 20px;
    font-size: 13px;
}

.product-card .product-learn-more {
    font-size: 13px;
    color: var(--lomboos-purple);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.product-card .product-learn-more:hover {
    color: var(--lomboos-magenta);
}

.product-card .product-learn-more i {
    font-size: 11px;
    transition: transform 0.2s ease;
}

.product-card .product-learn-more:hover i {
    transform: translateX(3px);
}

/* =================================== */
/*  About Section (Homepage)
/* =================================== */
.about-section {
    background: var(--lomboos-white);
    padding: 40px 0 !important;
}

.about-section h2 {
    font-size: 26px;
    color: var(--lomboos-plum);
    margin-bottom: 15px;
}

.about-section p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 14px;
}

.about-section .about-logo {
    max-width: 220px;
    opacity: 0.9;
}

@media (max-width: 991px) {
    .about-section {
        text-align: center;
    }

    .about-section .about-logo {
        margin-top: 25px;
        max-width: 160px;
    }
}

/* Button margin helper */
.ml-10 {
    margin-left: 10px;
}

/* =================================== */
/*  Form Alert Messages
/* =================================== */
.alert-msg {
    font-size: 14px;
    padding: 10px 0;
}

.alert-msg.text-success {
    color: #28a745 !important;
}

.alert-msg.text-danger {
    color: #dc3545 !important;
}

/* =================================== */
/*  Modern Card (What We Are/Not boxes)
/* =================================== */
.modern-card {
    background: var(--lomboos-white);
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    box-shadow: var(--lomboos-soft-shadow);
}

.modern-card h4 {
    margin-bottom: 20px;
    font-size: 20px;
}

.modern-card ul li {
    border-bottom: 1px solid rgba(157, 34, 245, 0.1);
}

.modern-card ul li:last-child {
    border-bottom: none;
}

/* Mobile spacing for side-by-side cards */
@media (max-width: 991px) {
    .screens-area .col-lg-6 {
        margin-bottom: 20px;
    }

    .screens-area .col-lg-6:last-child {
        margin-bottom: 0;
    }

    .screens-area .col-lg-6 .modern-card {
        height: auto;
    }
}