@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Poppins:wght@300;400;500;600;700;800&family=Righteous&family=Syne:wght@700;800&family=Outfit:wght@300;400;600;800&display=swap');

@font-face {
    font-family: 'Grinched';
    src: url('../fonts/grinched.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/*
 * Liquid Glass Design Theme Overrides
 * Reference: Apple-style frosted glassmorphism with glowing depth, light refraction, and dynamic surfaces
 */

:root {
    --bg-dark: #050505;
    --primary-color: #ffffff; /* White font for clean contrast */
    --text-main: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-dark: #050505;

    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    --glass-border: rgba(212, 175, 55, 0.15); /* Refractive gold border outline */
    --glass-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    --glass-blur: blur(28px) saturate(160%);

    --accent-purple: #d4af37; /* Gold animate orb 1 */
    --accent-pink: #b89030;   /* Gold animate orb 2 */
    --accent-cyan: #f3e5ab;   /* Gold animate orb 3 */

    --font-primary: 'Poppins', sans-serif;
}

/* Global resets & typography */
body, h1, h2, h3, h4, h5, h6, .brand-title-font, a, p, span, li, button, input, textarea {
    font-family: var(--font-primary) !important;
}

body {
    background-color: var(--bg-dark) !important;
    color: var(--text-main);
    min-height: 100vh;
    position: relative;
    /* Static dot grid + gold background mesh */
    background-image:
        radial-gradient(circle at 85% 40%, rgba(212, 175, 55, 0.06) 0%, transparent 55%),
        radial-gradient(circle at 15% 75%, rgba(184, 144, 48, 0.04) 0%, transparent 55%),
        radial-gradient(rgba(255, 255, 255, 0.015) 1.5px, transparent 1.5px) !important;
    background-size: 100% 100%, 100% 100%, 32px 32px !important;
}

/* Floating animated background gradient meshes (orbs) */
body::before,
body::after {
    content: "";
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(140px);
    opacity: 0.22;
}

body::before {
    background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);
    top: -12%;
    right: -5%;
    animation: float-purple-orb 28s ease-in-out infinite alternate;
}

body::after {
    background: radial-gradient(circle, var(--accent-pink) 0%, transparent 70%);
    bottom: 5%;
    left: -12%;
    animation: float-pink-orb 32s ease-in-out infinite alternate;
}

@keyframes float-purple-orb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(80px, -40px) scale(1.1); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes float-pink-orb {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-60px, 60px) scale(1.15); }
    100% { transform: translate(0, 0) scale(1); }
}

body > * {
    position: relative;
    z-index: 1;
}

/* Preloader styling */
.preloader {
    background: var(--bg-dark);
}
.preloader svg path {
    fill: #090a0f;
}
.load-text span {
    color: var(--primary-color);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
    font-weight: 700;
}

/* Preloader Logo styling & premium glowing pulse animation */
.preloader-heading .load-logo {
    max-width: 280px;
    z-index: 20;
    position: relative;
    animation: preloader-pulse 1.8s infinite ease-in-out;
}

.preloader-heading .load-logo img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.45)); /* Premium gold drop shadow glow */
}

@keyframes preloader-pulse {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}


/* Header customization - blurred dock */
.main-header .header-upper {
    background: rgba(7, 8, 11, 0.58) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.38);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.main-header .logo {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.main-header .logo img {
    width: 165px !important;
    height: auto !important;
    transition: all 0.5s ease !important;
}

.main-header.fixed-header .logo img {
    width: 140px !important;
}

.main-menu .navbar-collapse li {
    padding: 6px 6px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.main-menu .navbar-collapse li a {
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 13px !important;
    font-weight: 500 !important; /* Medium weight, not bold */
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 8px 22px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-block !important;
    position: relative !important;
    overflow: hidden !important;
}

.main-menu .navbar-collapse li a:hover,
.main-menu .navbar-collapse li.active > a,
.main-menu .navbar-collapse li.current > a,
.main-menu .navbar-collapse li a:focus,
.main-menu .navbar-collapse li a:active {
    color: var(--primary-color) !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.04) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important; /* Gold refractive border */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(212, 175, 55, 0.12), /* Luminous gold outer glow */
        inset 0 3px 6px rgba(255, 255, 255, 0.45), /* Brighter top highlight */
        inset 0 -3px 6px rgba(0, 0, 0, 0.15) !important; /* Soft bottom thickness shadow */
    outline: none !important;
}

/* Specular highlight at the top of the capsule to simulate 3D glossy liquid glass */
.main-menu .navbar-collapse li a::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 8px;
    right: 8px;
    height: 35%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.05) 100%); /* Brighter specular reflection */
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

.main-menu .navbar-collapse li a:hover::before,
.main-menu .navbar-collapse li.active > a::before,
.main-menu .navbar-collapse li.current > a::before {
    opacity: 1;
}

/* Liquid Glass Cards definitions */
.container-inner,
.about-image-part,
.about-content-part,
.about-content-part-bottom,
.single-project-page-left,
.single-project-page-left-1,
.single-project-page-right,
.call-to-action-part,
.team-single-item,
.single-contact,
.wa-contact-box {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-radius: 24px !important;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Glowing reflection pseudo-element inside standard cards */
.container-inner::before,
.about-image-part::before,
.about-content-part::before,
.about-content-part-bottom::before,
.single-project-page-left::before,
.single-project-page-left-1::before,
.single-project-page-right::before,
.call-to-action-part::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), transparent 35%);
    z-index: 0;
    opacity: 0.8;
}

.container-inner > *,
.about-image-part > *,
.about-content-part > *,
.about-content-part-bottom > *,
.single-project-page-left > *,
.single-project-page-left-1 > *,
.single-project-page-right > *,
.call-to-action-part > * {
    position: relative;
    z-index: 1;
}

/* Double-Bezel Concentric Card Architecture (Outer Shells) */
.service-item,
.project-item.style-two,
.story-box,
.contact-page-form,
.contact-form-area {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(212, 175, 55, 0.08) !important;
    border-radius: 32px !important; /* Exaggerated outer radius */
    padding: 8px !important; /* Concealed spacing cushion */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Double-Bezel Concentric Card Architecture (Inner Cores) */
.service-item-inner,
.project-item-inner,
.story-box-inner,
.contact-form-inner {
    background: var(--glass-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important; /* Concentric curve: 32px - 8px = 24px */
    padding: 24px 30px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 1 !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

/* Make project card inner core match vertical layout of styling */
.project-item-inner {
    padding: 0 !important; /* Image sits flush in the inner container, handled individually */
}

.project-item-inner .project-content {
    padding: 20px 24px !important;
}

.contact-form-inner {
    padding: 40px 35px !important;
}

.story-box-inner {
    padding: 24px !important;
}

/* Inner core glare reflections */
.service-item-inner::before,
.project-item-inner::before,
.story-box-inner::before,
.contact-form-inner::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.06), transparent 35%) !important;
    z-index: 0 !important;
    opacity: 0.8 !important;
}

.service-item-inner > *,
.project-item-inner > *,
.story-box-inner > *,
.contact-form-inner > * {
    position: relative !important;
    z-index: 1 !important;
}

/* Double-Bezel Hover Glow Transitions */
.service-item:hover,
.project-item.style-two:hover,
.story-box:hover {
    border-color: rgba(212, 175, 55, 0.22) !important;
    background: rgba(212, 175, 55, 0.03) !important;
    transform: translateY(-5px) scale(1.01) !important;
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.65),
        0 0 25px rgba(212, 175, 55, 0.08) !important;
}

.service-item:hover .service-item-inner,
.project-item.style-two:hover .project-item-inner,
.story-box:hover .story-box-inner {
    border-color: rgba(212, 175, 55, 0.35) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}

.team-single-item:hover {
    border-color: rgba(212, 175, 55, 0.35) !important;
    background: rgba(212, 175, 55, 0.03) !important;
    transform: translateY(-5px);
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.65),
        0 0 25px rgba(212, 175, 55, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Card inner image container adjustment */
.project-item.style-two .project-image,
.story-box .story-img,
.single-image,
.team-img {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
    position: relative !important;
    z-index: 1 !important;
}

.project-item.style-two .project-image::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.45));
}

/* Theme buttons & interactive elements - styled as 3D Glossy Liquid Glass bubbles */
.theme-btn,
.slick-arrow,
.wa-fab,
.details-btn,
.event-slider-nav,
.progress-wrap {
    color: var(--primary-color) !important;
    font-weight: 500 !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.12) 0%, rgba(212, 175, 55, 0.04) 100%) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-radius: 999px !important;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.35),
        inset 0 3px 6px rgba(255, 255, 255, 0.35),
        inset 0 -3px 6px rgba(0, 0, 0, 0.2) !important; /* 3D glass depth edge light */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; /* Premium spring curve transition */
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Main CTA buttons default sizing and structure */
.theme-btn {
    padding: 12px 32px !important;
    height: 48px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
}

/* Button-in-Button Asymmetric Padding Override */
.theme-btn:has(.btn-icon-wrap) {
    padding: 10px 10px 10px 24px !important; /* Icon wrapper sits flush on the right padding */
}

/* Button-in-Button Trailing Icon Capsule styling */
.btn-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
    color: var(--primary-color) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
}

.btn-icon-wrap i {
    font-size: 14px !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* Specific position rules to prevent relative position breaking absolute/fixed elements */
.theme-btn,
.slick-arrow,
.wa-fab {
    position: relative !important;
}



.progress-wrap {
    position: fixed !important;
}

/* Specular reflection highlights for all 3D liquid glass buttons */
.theme-btn::before,
.slick-arrow::before,
.wa-fab::before,
.details-btn::before,
.event-slider-nav::before,
.progress-wrap::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 8px;
    right: 8px;
    height: 35%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 999px;
    pointer-events: none;
    opacity: 1; /* Always visible to maintain glossy glass appearance */
    transition: opacity 0.3s ease !important;
}

/* Interactive Hover States */
.theme-btn:hover,
.slick-arrow:hover,
.wa-fab:hover,
.details-btn:hover,
.event-slider-nav:hover,
.progress-wrap:hover {
    color: #ffffff !important;
    border-color: rgba(212, 175, 55, 0.6) !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0.08) 100%) !important;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(212, 175, 55, 0.2), /* Luminous gold outer glow */
        inset 0 3px 6px rgba(255, 255, 255, 0.5),
        inset 0 -3px 6px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) scale(0.985) !important; /* Scale down slightly on hover for mechanical compression feedback */
}

.theme-btn:hover .btn-icon-wrap {
    background: rgba(212, 175, 55, 0.95) !important; /* Solid gold bubble inside button */
    border-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow:
        0 4px 10px rgba(212, 175, 55, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.theme-btn:hover .btn-icon-wrap i {
    transform: translate(2px, -2px) scale(1.05) !important; /* Diagonal shift + scale icon */
    color: #050505 !important; /* Black icon on gold bubble */
}

.theme-btn:hover::before,
.slick-arrow:hover::before,
.wa-fab:hover::before,
.details-btn:hover::before,
.event-slider-nav:hover::before,
.progress-wrap:hover::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.1) 100%);
}

/* Secondary header button adjustments (layout sizing only) */
.menu-btns a.theme-btn {
    padding: 10px 24px !important;
}

/* Specific override for project image details button (restores absolute centering) */
.project-item.style-two .project-image .details-btn {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 65px !important;
    font-size: 20px !important;
    width: 65px !important;
    height: 65px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.project-item.style-two .project-image .details-btn:hover {
    transform: translate(-50%, -53%) !important; /* Center-preserving hover lift */
}

/* Typography, subtitles and filters */
.hero-content p,
.about-image-part p,
.section-title p,
.footer-desc,
.story-box small,
.single-info p {
    color: var(--text-muted);
}

.hero-content .brand-title-font,
.about-image-part .brand-title-font,
.project-item.style-two .project-content h3,
.story-box h3,
.story-box h4,
.single-info h3,
.service-item h3,
.service-item h4,
.call-to-action-part h2,
.section-title h2,
.single-project-page-right h2,
.footer-title {
    color: var(--primary-color);
}

.project-content .sub-title {
    color: #d4af37 !important; /* Premium gold accent for category titles */
    font-weight: 600;
}

/* Filter buttons styling */
.filter-btns-one li {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 6px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: var(--text-muted) !important;
    transition: all 0.3s ease;
}

.filter-btns-one li:hover,
.filter-btns-one li.current {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    background: rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.filter-btns-one li::after {
    display: none !important;
}

/* Inputs & Form controls - Luminous Liquid Glass Capsule Styling */
input,
select,
.nice-select,
.form-control:not(textarea),
.contact-page-form .form-group .form-control:not(textarea),
.contact-form-area .form-group .form-control:not(textarea) {
    color: #ffffff !important;
    font-size: 15px !important;
    font-family: "Poppins", sans-serif !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important; /* Premium glossy glass border */
    border-radius: 999px !important; /* Fully rounded capsule bubble */
    padding: 16px 30px !important; /* Increased horizontal padding for curves */
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.22) !important; /* Glossy top edge highlight */
    outline: none !important;
}

textarea,
.contact-page-form .form-group textarea,
.contact-form-area .form-group textarea {
    color: #ffffff !important;
    font-size: 15px !important;
    font-family: "Poppins", sans-serif !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 24px !important; /* Classy rounded rectangle for multiline box */
    padding: 20px 30px !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.2),
        inset 0 2px 4px rgba(255, 255, 255, 0.22) !important;
    outline: none !important;
}

/* Specific styling for the icons inside the contact form */
.contact-form-area .form-group .for-icon {
    color: rgba(255, 255, 255, 0.55) !important;
    margin-top: -38px !important; /* Vertically centered inside the capsule input */
    right: 28px !important; /* Inset slightly inside the curve */
    pointer-events: none;
    z-index: 3 !important;
}

/* Set placeholder text color for all browser engines to ensure high contrast visibility */
input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important; /* Firefox override */
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
    opacity: 1 !important;
}

/* Ensure contact form labels are pure white and highly legible */
.contact-form-area .form-group label {
    color: #ffffff !important;
}

input:focus,
textarea:focus,
select:focus,
.nice-select:focus,
.form-control:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.04) 100%) !important;
    border-color: var(--primary-color) !important; /* Brighter gold highlight border on focus */
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.35),
        0 0 20px rgba(212, 175, 55, 0.15),
        inset 0 2px 4px rgba(255, 255, 255, 0.25) !important;
    outline: none !important;
}

/* Contact Page Left-Side Cards Overrides (fixes nested layouts & text touching borders) */
.contact-content-part {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.single-contact {
    padding: 30px 35px !important; /* Spacious padding to avoid text touching borders on left/right */
    margin-bottom: 24px !important; /* Spacing between contact info boxes */
    display: block !important;
}

.single-contact:last-child {
    margin-bottom: 0 !important;
}

/* Ensure contact card titles and addresses are high-contrast and readable */
.single-contact h2 {
    color: var(--primary-color) !important;
}

.single-contact p {
    color: rgba(255, 255, 255, 0.78) !important;
}

/* Contact Page Form Container Override for visibility */
.contact-page-form,
.contact-form-area {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

/* Contact Page Info Title and Icon inline alignment */
.contact-title-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.contact-title-wrap .contact-icon {
    padding-bottom: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.contact-title-wrap h2 {
    margin: 0 !important;
    padding: 0 !important;
}

/* Works Page & Homepage Projects Grid Row Spacing Override */
.project-masonry-active .item {
    margin-bottom: 50px !important; /* Ensures healthy vertical space between rows */
}

.project-masonry-active .project-item.style-two {
    margin-bottom: 0 !important; /* Overrides style.css margin-bottom to prevent shrinking the gap inside flex columns */
}

#project-container {
    row-gap: 0 !important; /* Removes duplicate row-gap on the homepage grid to unify spacing with the works page */
}

/* Services page grid spacing override */
.services-area .service-item {
    margin-bottom: 40px !important; /* Spacing between vertical rows of service cards */
}

/* WhatsApp float widget overrides */
.wa-float-wrap {
    bottom: 40px;
    right: 30px;
    z-index: 999;
}

.wa-fab {
    background: #25d366 !important;
    border-color: #25d366 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.3) !important;
}

.wa-fab:hover {
    transform: scale(1.05) translateY(-3px);
}

.wa-contact-box {
    background: rgba(10, 11, 15, 0.72) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: var(--glass-shadow) !important;
}

.wa-contact-box a {
    color: var(--primary-color) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 8px;
    padding: 8px 16px;
    display: block;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.wa-contact-box a:hover {
    background: var(--primary-color) !important;
    color: var(--text-dark) !important;
    border-color: var(--primary-color) !important;
}

/* Scroll up widget position */
.progress-wrap {
    bottom: 110px;
    right: 30px;
    border-color: rgba(255, 255, 255, 0.08) !important;
    background: rgba(10, 11, 15, 0.5) !important;
}

.progress-wrap::after {
    color: var(--primary-color) !important;
}

.progress-wrap svg.progress-circle path {
    stroke: var(--primary-color) !important;
}

/* Portfolio Filter Buttons override - Luminous 3D Glossy Liquid Glass Capsules */
.filter-btns-one {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 8px !important; /* Space between filter capsules */
}

.filter-btns-one li {
    line-height: 1 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding: 10px 22px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.45) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-block !important;
}

/* Remove default orange bottom underline indicators */
.filter-btns-one li::after {
    display: none !important;
}

.filter-btns-one li:hover,
.filter-btns-one li.current {
    color: var(--primary-color) !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.06) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 15px rgba(212, 175, 55, 0.12),
        inset 0 3px 6px rgba(255, 255, 255, 0.55),
        inset 0 -3px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Specular overhead light reflection for filter buttons */
.filter-btns-one li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 8px;
    right: 8px;
    height: 35%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

.filter-btns-one li:hover::before,
.filter-btns-one li.current::before {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .container-inner,
    .about-image-part,
    .about-content-part,
    .about-content-part-bottom,
    .service-item,
    .project-item.style-two,
    .story-box,
    .single-project-page-left,
    .single-project-page-right,
    .call-to-action-part {
        border-radius: 18px !important;
    }

    /* Reduce card padding on mobile to save horizontal space and avoid text crowding */
    .about-image-part,
    .about-content-part,
    .about-content-part-bottom {
        padding: 24px 20px !important;
    }

    /* Force social media links to align horizontally side-by-side without wrapping */
    .about-social ul {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        padding-left: 0 !important;
        margin: 15px 0 0 0 !important;
    }

    .about-social ul li {
        margin: 0 !important;
        display: inline-block !important;
    }

    .about-social ul li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 12px !important;
        font-size: 18px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* Adjust company profile iframe height to prevent scrolling traps on mobile */
    .testimonials-area iframe {
        height: 350px !important;
    }
}

/* Clean horizontal scrolling filter row on tablet/mobile viewports (<= 991px) */
@media (max-width: 991px) {
    .filter-btns-one {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 12px !important;
        padding-top: 4px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        gap: 8px !important;
        justify-content: flex-start !important;
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE 10+ */
    }

    .filter-btns-one::-webkit-scrollbar {
        display: none !important; /* Chrome, Safari, Opera */
    }

    .filter-btns-one li {
        flex: 0 0 auto !important;
        margin: 0 !important;
        white-space: nowrap !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        padding: 8px 18px !important; /* Slightly more compact padding on mobile */
    }

    .filter-btns-one li.current,
    .filter-btns-one li:active {
        color: var(--primary-color) !important;
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.06) 100%) !important;
        border: 1px solid rgba(212, 175, 55, 0.55) !important;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
    }
}

/* Liquid Glass Magnific Popup Close Button Overrides (Top-Left Bubble) */
.mfp-iframe-scaler {
    overflow: visible !important;
}

.mfp-close,
.mfp-iframe-holder .mfp-close,
.mfp-image-holder .mfp-close,
.mfp-close-btn-in .mfp-close,
button.mfp-close {
    width: 36px !important;
    height: 36px !important;
    line-height: 34px !important;
    text-align: center !important;
    position: absolute !important;
    top: -46px !important; /* Floats perfectly above the video/image content */
    left: 0 !important;    /* Aligned to the top-left */
    right: auto !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.04) 100%) !important;
    border: 1px solid rgba(212, 175, 55, 0.45) !important;
    border-radius: 50% !important;
    color: #d4af37 !important; /* Gold cross */
    font-size: 24px !important;
    font-family: Arial, Baskerville, monospace !important; /* Clean cross font */
    opacity: 1 !important;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.45),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 0 !important;
    padding-right: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

/* Ensure the glare pseudo-element is styled like other liquid glass elements */
.mfp-close::before,
.mfp-iframe-holder .mfp-close::before,
.mfp-image-holder .mfp-close::before,
button.mfp-close::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.02)) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 50% 50% 0 0 !important;
    transition: all 0.4s ease !important;
}

/* Make sure text is positioned correctly relative to glare */
.mfp-close * {
    position: relative !important;
    z-index: 2 !important;
}

.mfp-close:hover,
.mfp-iframe-holder .mfp-close:hover,
.mfp-image-holder .mfp-close:hover,
.mfp-close-btn-in .mfp-close:hover,
button.mfp-close:hover {
    color: #050505 !important; /* Pure black text on gold bubble */
    border-color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(212, 175, 55, 0.95) !important; /* Gold bubble */
    transform: scale(1.05) translateY(-1px) !important;
    box-shadow:
        0 15px 35px rgba(212, 175, 55, 0.35), /* Gold glow */
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 3px 6px rgba(255, 255, 255, 0.8), /* Specular reflection */
        inset 0 -3px 8px rgba(0, 0, 0, 0.08) !important;
}

.mfp-close:hover::before,
.mfp-iframe-holder .mfp-close:hover::before,
.mfp-image-holder .mfp-close:hover::before,
button.mfp-close:hover::before {
    height: 45% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

/* Liquid Glass Magnific Popup Gallery Arrows */
.mfp-arrow {
    width: 44px !important;
    height: 44px !important;
    line-height: 42px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.35) 0%, rgba(212, 175, 55, 0.15) 100%) !important; /* Brighter background opacity for contrast */
    border: 1px solid rgba(212, 175, 55, 0.6) !important; /* Clearer gold outline */
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.55),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1046 !important;
}

/* Reset default border-based arrow styles */
.mfp-arrow::before,
.mfp-arrow::after {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 1 !important;
}

/* Glass Glare Overlay */
.mfp-arrow::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.02)) !important;
    border-radius: 50% 50% 0 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    transition: all 0.4s ease !important;
}

/* Arrow Chevrons */
.mfp-arrow-left::after {
    content: "‹" !important;
    font-size: 36px !important;
    font-family: Arial, sans-serif !important;
    color: #d4af37 !important;
    z-index: 2 !important;
    position: relative !important;
    margin-right: 2px !important;
    margin-top: -4px !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.6) !important; /* Soft glow for visibility */
    transition: color 0.3s ease !important;
}

.mfp-arrow-right::after {
    content: "›" !important;
    font-size: 36px !important;
    font-family: Arial, sans-serif !important;
    color: #d4af37 !important;
    z-index: 2 !important;
    position: relative !important;
    margin-left: 2px !important;
    margin-top: -4px !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.6) !important; /* Soft glow for visibility */
    transition: color 0.3s ease !important;
}

/* Hover States */
.mfp-arrow:hover,
.mfp-container .mfp-arrow:hover,
button.mfp-arrow:hover {
    background: rgba(212, 175, 55, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
    transform: scale(1.08) !important;
    box-shadow:
        0 15px 35px rgba(212, 175, 55, 0.35),
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 3px 6px rgba(255, 255, 255, 0.8),
        inset 0 -3px 8px rgba(0, 0, 0, 0.08) !important;
}

.mfp-arrow:hover::after {
    color: #050505 !important;
}

.mfp-arrow:hover::before {
    height: 45% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 100%) !important;
}

/* Positioning - Flex flow next to image on Desktop/Tablet */
@media (min-width: 768px) {
    .mfp-container {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
    }
    .mfp-container::before {
        display: none !important;
    }
    .mfp-arrow {
        position: relative !important;
        top: auto !important;
        margin-top: 0 !important;
    }
    .mfp-arrow-left {
        order: 1 !important;
        left: auto !important;
        right: auto !important;
        margin-right: 20px !important; /* Position outside the photo with a neat gap */
        z-index: 1047 !important;
    }
    .mfp-content {
        order: 2 !important;
        position: relative !important;
        margin: 0 !important; /* Resets default margin auto to allow symmetric flexbox alignment */
    }
    .mfp-arrow-right {
        order: 3 !important;
        right: auto !important;
        left: auto !important;
        margin-left: 20px !important; /* Position outside the photo with a neat gap */
        z-index: 1047 !important;
    }
}

/* Positioning - Overlay on edges for Mobile viewports */
@media (max-width: 767px) {
    .mfp-arrow {
        position: absolute !important;
        top: 50% !important;
        margin-top: -22px !important;
    }
    .mfp-arrow-left {
        left: 10px !important;
        right: auto !important;
    }
    .mfp-arrow-right {
        right: 10px !important;
        left: auto !important;
    }
}

/* Ensure macro-whitespace spacing between sections to let the design breathe heavily */
.about-area,
.projects-area,
.stories-section,
.media-showcase-area,
.call-to-action-area,
.services-area,
.contact-area,
.blog-area {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

/* Push subpage content cards down from the fixed header bar for proper breathing room */
.innerpage-single-area {
    padding-top: 160px !important;
}

/* Tighten section spacing on mobile viewports for better phone usability */
@media (max-width: 767px) {
    .about-area,
    .projects-area,
    .stories-section,
    .media-showcase-area,
    .call-to-action-area,
    .services-area,
    .contact-area,
    .blog-area {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
}

/* Adjust subpage top padding on mobile/tablet viewports to fit the header bar */
@media (max-width: 991px) {
    .innerpage-single-area {
        padding-top: 120px !important;
    }
}

/* ==========================================================================
   UX/UI Responsive Overrides (Mobile & Tablet Standards)
   ========================================================================== */

/* 1. Global Viewport Safety Shield */
html, body {
    overflow-x: hidden !important; /* Block unintentional side-swiping/horizontal page wobble */
}

/* 2. Double-Bezel Scaling (Mobile viewports) */
@media (max-width: 767px) {
    .service-item,
    .project-item.style-two,
    .story-box,
    .contact-page-form,
    .contact-form-area {
        border-radius: 20px !important;
        padding: 6px !important; /* Tighten spacer cushion to conserve space */
    }
    .service-item-inner,
    .project-item-inner,
    .story-box-inner,
    .contact-form-inner {
        border-radius: 14px !important; /* concentric math: 20px - 6px = 14px */
        padding: 20px 18px !important; /* Space-efficient interior gutters */
    }
    .contact-form-inner {
        padding: 24px 20px !important;
    }
    .project-item-inner {
        padding: 0 !important; /* Image remains flush */
    }
}

/* 3. Button-in-Button CTA Compact Sizing (Mobile viewports) */
@media (max-width: 767px) {
    .theme-btn {
        padding: 10px 24px !important;
        height: 42px !important;
        font-size: 13px !important;
    }
    .theme-btn:has(.btn-icon-wrap) {
        padding: 8px 8px 8px 18px !important;
        height: 42px !important;
    }
    .btn-icon-wrap {
        width: 24px !important;
        height: 24px !important;
    }
    .btn-icon-wrap i {
        font-size: 12px !important;
    }
}

.hero-content h2 {
    font-size: clamp(28px, 5vw, 65px) !important;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.15) !important;
    line-height: 1.1 !important;
}

.brand-title-font {
    font-family: "Grinched", sans-serif !important;
    letter-spacing: 0.05em !important;
    text-transform: none !important;
}

.brand-subtitle-font {
    font-family: "Poppins", sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    text-transform: lowercase !important;
    letter-spacing: 3px !important;
    display: block !important;
    color: rgba(255, 255, 255, 0.75) !important;
    margin-top: 2px !important;
    line-height: 1 !important;
}

/* 5. Gutter gaps for vertically stacked grids */
@media (max-width: 991px) {
    .about-image-part {
        margin-bottom: 30px !important; /* Create gutter spacing when About cards stack */
    }
    .single-contact {
        margin-bottom: 20px !important;
    }
}

/* 6. Premium Mobile Navigation & Toggle (Glassmorphism Dropdown Drawer) */
@media (max-width: 991px) {
    /* Header layout alignment */
    .navbar-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 10px 0 !important;
    }

    .mobile-logo {
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .mobile-logo img {
        max-height: 52px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* Toggle hamburger button override - premium glass capsule */
    .navbar-toggle {
        border: 1px solid rgba(212, 175, 55, 0.35) !important;
        background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.04) 100%) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-radius: 8px !important;
        padding: 8px 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        justify-content: center !important;
        align-items: center !important;
        width: 40px !important;
        height: 36px !important;
        box-shadow:
            0 4px 10px rgba(0, 0, 0, 0.25),
            inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
        cursor: pointer !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        border-style: solid !important;
        margin: 0 !important;
    }

    .navbar-toggle .icon-bar {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #d4af37 !important; /* Force override background shorthand with solid gold color */
        margin: 0 !important; /* Reset style.css margin to prevent flex layout breakage */
        border-radius: 1px !important;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    .navbar-toggle:hover,
    .navbar-toggle:focus {
        border-color: rgba(255, 255, 255, 0.8) !important;
        background: rgba(212, 175, 55, 0.25) !important;
        box-shadow:
            0 6px 15px rgba(212, 175, 55, 0.2),
            inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
    }

    /* Collapsible menu container - glass drawer */
    .main-menu .navbar-collapse {
        position: absolute !important;
        left: 15px !important;
        right: 15px !important;
        width: auto !important;
        top: calc(100% + 10px) !important; /* Hangs slightly below the header upper bar */
        background: rgba(7, 8, 11, 0.95) !important;
        backdrop-filter: blur(25px) !important;
        -webkit-backdrop-filter: blur(25px) !important;
        border: 1px solid rgba(212, 175, 55, 0.15) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8) !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        z-index: 9999 !important;
    }

    .main-menu .navbar-collapse>ul {
        background: transparent !important;
        padding: 10px 0 !important;
        display: block !important;
    }

    .main-menu .navbar-collapse li {
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        padding: 0 !important;
        text-align: center !important;
        display: block !important;
    }

    .main-menu .navbar-collapse li:first-child {
        border-top: none !important;
    }

    /* Touch target padding set to 50px total height, meeting Fitts' Law target sizing */
    .main-menu .navbar-collapse li a {
        padding: 14px 20px !important;
        display: block !important;
        width: 100% !important;
        color: rgba(255, 255, 255, 0.75) !important;
        border-radius: 0 !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        line-height: 22px !important;
        text-transform: uppercase !important;
        letter-spacing: 1.5px !important;
        transition: all 0.3s ease !important;
    }

    .main-menu .navbar-collapse li.current a,
    .main-menu .navbar-collapse li.active a,
    .main-menu .navbar-collapse li a:hover {
        color: #ffffff !important;
        background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.15), transparent) !important;
    }

    .main-menu .navbar-collapse li a::before {
        display: none !important;
    }
}

/* 7. Center-aligned slider navigation absolute position bounds */
@media (min-width: 768px) {
    .event-slider-nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
    }
    .event-slider-nav:hover {
        transform: translateY(-52%) !important;
    }
}

/* 8. Mobile Background Orb Performance Scaling & Viewport Protection */
@media (max-width: 767px) {
    body::before,
    body::after {
        width: 300px !important; /* Scale down to save drawing overhead and prevent mobile repaints */
        height: 300px !important;
        filter: blur(80px) !important;
    }
}

/* 9. Event Highlights Slider Mobile Navigation Alignment */
@media (max-width: 767px) {
    .event-slider-nav {
        position: absolute !important;
        top: auto !important;
        bottom: 0px !important;
        transform: none !important;
        z-index: 10 !important;
        width: 44px !important;
        height: 44px !important;
    }
    .event-slider-prev {
        left: calc(50% - 52px) !important;
    }
    .event-slider-next {
        right: calc(50% - 52px) !important;
    }
}

/* 10. WCAG 2.2 AA Heading Order Styles Mapping */
.story-box h3,
.service-item h3 {
    font-family: inherit !important;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
}

.story-box h3 {
    font-size: 19px !important;
    margin-bottom: 22px !important;
}

.service-item h3 {
    font-size: 20px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

/* ==========================================
   Mobile Responsive Typography & Layout Overrides
   ========================================== */
@media screen and (max-width: 768px) {
    /* Headings overrides for mobile viewports */
    .hero-content h2 {
        font-size: clamp(32px, 8vw, 42px) !important;
        line-height: 1.2 !important;
    }

    .home-about-brand-title {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    .section-title h2,
    .about-content-part-bottom h2,
    .call-to-action-part h2,
    .single-project-page-right h2 {
        font-size: 24px !important;
        line-height: 1.25 !important;
    }

    .story-box h3,
    .story-box h4,
    .service-item h3,
    .project-content h3 {
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    /* Body text, paragraphs, and span tags readability scaling */
    body, p, span, .hero-content p, .about-image-part p {
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    /* Make brand subtitle event partner text size match paragraph size (15px) */
    .brand-subtitle-font {
        font-size: 15px !important;
        letter-spacing: 2px !important;
        margin-top: 4px !important;
    }

    /* Adjust navigation link font size for mobile view collapse menu */
    .main-menu .navbar-collapse li a {
        font-size: 15px !important;
        line-height: 22px !important;
    }

    /* Spacing adjustments for mobile sections */
    .main-hero-area {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }

    .about-area,
    .services-area,
    .projects-area,
    .cta-area,
    .contact-area {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Horizontal overflow protection */
    body, html {
        overflow-x: clip !important;
    }
}

/* WhatsApp Float Widget Redesign (Glossy Glass Sphere Style) */
.wa-float-wrap {
    bottom: 40px !important;
    right: 30px !important;
    z-index: 9999 !important;
}

.wa-fab {
    width: 66px !important;
    height: 66px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.65)) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 2px 5px rgba(255, 255, 255, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Glass sphere reflection overlay specifically for the FAB button */
.wa-fab::before {
    content: "" !important;
    position: absolute !important;
    top: 3px !important;
    left: 8px !important;
    right: 8px !important;
    height: 40% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-radius: 50% 50% 45% 45% / 80% 80% 20% 20% !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

/* The circular green WhatsApp badge inside */
.wa-fab i {
    background: #25d366 !important;
    color: #ffffff !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wa-fab:hover {
    transform: scale(1.06) translateY(-4px) !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), inset 0 2px 5px rgba(255, 255, 255, 0.5) !important;
}

/* Contacts Box styling overlay */
.wa-contact-box {
    background: rgba(10, 11, 15, 0.85) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 20px !important;
    padding: 15px !important;
    min-width: 240px !important;
    bottom: 82px !important;
}

/* Contacts button styles */
.wa-contact-box a {
    display: block !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    margin-bottom: 10px !important;
    border-radius: 999px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
}

.wa-contact-box a:last-child {
    margin-bottom: 0 !important;
}

/* Alex's button: Gold glass style */
.wa-contact-box a:nth-child(1) {
    background: linear-gradient(135deg, #e5c158 0%, #c59b27 100%) !important;
    color: #0b0b0e !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 15px rgba(229, 193, 88, 0.3), inset 0 2px 4px rgba(255, 255, 255, 0.4) !important;
    position: relative !important;
}

.wa-contact-box a:nth-child(1)::before {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 10px !important;
    right: 10px !important;
    height: 35% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}

.wa-contact-box a:nth-child(1):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(229, 193, 88, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
}

/* Cahyo's button: Dark Glass style with gold border/text */
.wa-contact-box a:nth-child(2) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    color: #e5c158 !important;
    border: 1px solid rgba(229, 193, 88, 0.45) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    position: relative !important;
}

.wa-contact-box a:nth-child(2)::before {
    content: "" !important;
    position: absolute !important;
    top: 2px !important;
    left: 10px !important;
    right: 10px !important;
    height: 35% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}

.wa-contact-box a:nth-child(2):hover {
    background: rgba(229, 193, 88, 0.1) !important;
    border-color: #e5c158 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(229, 193, 88, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}