/* Custom CSS for Impergo Theme */

/* Override Theme Primary Color */
:root {
    --tp-theme-primary: #eab228;
}

/* 5 Column Mega Menu */

/* Wider mega menu for 5 columns */
.tp-main-menu nav ul li .tp-megamenu {
    width: 1140px !important;
    max-width: 95vw;
    left: 50% !important;
    transform: translateX(-50%);
}

/* Ensure mega menu doesn't overflow on smaller screens */
@media only screen and (min-width: 1400px) {
    .tp-main-menu nav ul li .tp-megamenu {
        width: 1140px !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .tp-main-menu nav ul li .tp-megamenu {
        width: 1000px !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .tp-main-menu nav ul li .tp-megamenu {
        width: 900px !important;
        left: 50% !important;
        transform: translateX(-50%);
    }
}

/* Adjust mega menu title font size for better fit */
.tp-main-menu nav ul li .tp-megamenu-title {
    font-size: 16px;
}

/* Adjust spacing for mega menu items */
.tp-main-menu nav ul li .tp-megamenu li a {
    font-size: 14px;
    padding: 10px 14px;
}

/* Fix for mega menu positioning - center it relative to viewport */
.tp-main-menu nav ul li.has-dropdown:hover .tp-megamenu {
    left: 50% !important;
    transform: translateX(-50%);
}

/* Offcanvas/Sticky Menu - Stack mega menu columns vertically */
.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu {
    width: auto !important;
    left: 0 !important;
    transform: none !important;
}

.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu .row {
    flex-direction: column;
}

.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu .col-xl-2,
.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu .col-xl-3 {
    width: 100% !important;
    max-width: 100% !important;
}

.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu-box {
    margin-bottom: 20px;
}

/* Offcanvas menu mega menu title styling */
.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu-title {
    font-size: 24px;
    margin-bottom: 10px;
}

.tp-offcanvas-2-wrapper .tp-offcanvas-menu nav ul li .tp-megamenu li a {
    font-size: 18px;
    padding: 8px 0;
}

/* Slider Video Border Radius - Match Image Style */
.mg-hero-bg video.slider-video {
    border-radius: 60px;
    overflow: hidden;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
    .mg-hero-bg video.slider-video {
        border-radius: 30px;
        object-fit: contain !important;
        margin-top: -110px;
    }

    .mg-hero-text-slider-wrap {
        margin-bottom: -40px;
    }
}

/* Home Content 2 Video Border Radius - Match Slider Style */
#homeContentVideo {
    border-radius: 60px;
    overflow: hidden;
}

@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
    #homeContentVideo {
        border-radius: 30px;
    }
}

.pt-280 {
    padding-top: 280px;
}

/* Fix for Home Content 3 (Service) Visibility Issues */
#service .tp-service-sales-wrap,
#service .tp-service-img-wrapper {
    overflow: visible !important;
    padding-bottom: 180px; /* Eklenti: Absolute alanin asagiya tasmasini engellemek icin bosluk */
}

#service .tp-service-img-wrapper .hover-image {
    min-height: 100%;
}

/* Ensure description content is positioned correctly below the image */
#service .hover-image div.mt-20 {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: transparent;
    z-index: 10;
    padding-top: 20px;
}

/* Format highlight icons as 2 columns to save vertical space */
#service .hover-image div.mt-20 ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 20px;
    margin: 0;
    padding: 0;
}
#service .hover-image div.mt-20 ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 0 !important;
}
#service .hover-image div.mt-20 ul li i {
    margin-top: 4px;
    color: var(--tp-theme-primary, #eab228);
}

/* Header Logo Resize - Desktop Only */
@media (min-width: 1500px) {
    .tp-header-logo img {
        width: 314px !important;
        margin-left: 72px !important;
        margin-top: -25px;
    }
}

/* Mobile & Tablet Logo Optimization */
@media (max-width: 991px) {
    .tp-header-logo img {
        width: 150px !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        display: block;
    }

    .tp-header-logo {
        display: flex;
        align-items: center;
        min-height: 50px;
    }

    .tp-header-spacing {
        padding: 10px 0 !important;
    }
}

/* ═══════════════════════════════════════════════════
   MEGAMENU — HERO 1. KOLON + SUB KOLONLAR
   ═══════════════════════════════════════════════════ */

/* İç sarmalayıcı: hero sol + sub grid sağ */
.mm-inner-wrap {
    display: flex;
    gap: 0;
    align-items: stretch;
}

/* ── Hero Kolon (1. Ana Ürün) ── */
.mm-hero-col {
    flex: 0 0 230px;
    min-width: 210px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    margin-right: 22px;
    padding-right: 0;
}

.mm-hero-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    background: #111;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mm-hero-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

.mm-hero-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    z-index: 0;
}

.mm-hero-link:hover .mm-hero-img {
    transform: scale(1.06);
}

.mm-hero-img--no-img {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.mm-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.88) 0%,
            rgba(0, 0, 0, 0.4) 55%,
            rgba(0, 0, 0, 0.12) 100%);
    z-index: 1;
}

.mm-hero-body {
    position: relative;
    z-index: 2;
    padding: 20px 18px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 200px;
}

.mm-hero-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--tp-theme-primary, #eab228);
    margin-bottom: 6px;
    display: block;
}

.mm-hero-title {
    font-size: 19px;
    font-weight: 700;
    color: #fff !important;
    line-height: 1.2;
    margin: 0 0 8px;
}

.mm-hero-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0 0 12px;
}

.mm-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tp-theme-primary, #eab228) !important;
    letter-spacing: 1px;
    transition: gap 0.25s ease;
}

.mm-hero-link:hover .mm-hero-cta {
    gap: 10px;
}

/* Chip listesi */
.mm-hero-chips {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0;
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mm-hero-chips li a {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8) !important;
    padding: 3px 9px !important;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    display: inline-block;
    transition: background 0.25s ease, color 0.25s ease !important;
    text-decoration: none;
    line-height: 1.6;
}

.mm-hero-chips li a:hover {
    background: var(--tp-theme-primary, #eab228) !important;
    color: #000 !important;
}

/* ── Sub Kolonlar ── */
.mm-sub-cols {
    flex: 1;
    min-width: 0;
}

.mm-sub-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}

@media (max-width: 1350px) {
    .mm-sub-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 1150px) {
    .mm-sub-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .mm-hero-col {
        flex: 0 0 190px;
        min-width: 170px;
    }
}

/* ═══════════════════════════════════════════════════ */

/* 
 * Helper for 5-column equal width layout in mega menu 
 * Replaces the default Bootstrap grid which is 12 columns 
 */
.products-grid-menu {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}


@media (max-width: 1200px) {
    .products-grid-menu {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .products-grid-menu {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .products-grid-menu {
        grid-template-columns: 1fr;
    }
}

/* 3-column grid menu */
.products-grid-menu-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .products-grid-menu-3 {
        grid-template-columns: 1fr;
    }
}

/* Equal height for megamenu titles */
.tp-megamenu-title-wrap {
    min-height: 60px;
    /* Adjust based on font size/line height needs */
    display: flex;
    align-items: end;
    padding-bottom: 10px;
}

/* Megamenu Preview Section */
.product-preview-row {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: flex-start;
}

.product-preview-img {
    flex: 0 0 150px;
    /* Width of the image container */
    margin-right: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.product-preview-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.product-preview-content {
    flex: 1;
}

.product-preview-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--tp-common-black);
}

.product-preview-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* FIX: Customer Comments Layout Issue */
.shop-testimonial-slider-active .swiper-wrapper {
    display: flex;
}

/* Fix for Mega Menu Centering on 15" screens */
.tp-main-menu nav ul li.has-mega-menu {
    position: static !important;
}

.tp-main-menu nav ul li.has-mega-menu .tp-megamenu {
    margin-top: -25px;
}

/* Isolated Text Slider Styles */
#isolated-slider-container {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #e1eeb7;
    padding: 30px 0;
    margin-bottom: 60px;
    position: relative;
}

#isolated-swiper-wrapper {
    display: flex !important;
    align-items: center;
    width: 100%;
    height: 100%;
    transition-timing-function: linear !important;
}

.isolated-swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto !important;
    height: 100%;
    white-space: nowrap;
    padding-right: 50px;
}

.isolated-slide-text {
    font-weight: 500;
    font-size: 24px;
    color: #000;
    display: flex;
    align-items: center;
    text-transform: capitalize;
}

.isolated-slide-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #000;
    border-radius: 50%;
    margin-left: 20px;
}

/* Product Section 2 - Check Icon Lists */
.tp-service-details-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tp-service-details-content ul li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 20px;
}

.tp-service-details-content ul li i {
    font-size: 18px;
    color: #000;
    margin-top: 3px;
    flex-shrink: 0;
}

.tp-service-details-content ul li p {
    margin: 0;
    flex: 1;
}

/* --- CRAZY SECTION REDESIGN (Product Section 2) --- */

.crm-crazy-section {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
    background: linear-gradient(135deg, #f9f9f9 0%, #f0f2f5 100%);
}

/* Background Massive Text */
.crm-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    font-size: 18vw;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(0, 0, 0, 0.03);
    white-space: nowrap;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    font-family: var(--tp-ff-heading);
    /* Use theme font */
}

/* Layout Container */
.crm-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

.crm-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

/* Content Side (Left) */
.crm-content-col {
    position: relative;
    width: 50%;
    z-index: 5;
    padding-right: 20px;
}

.crm-info-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.crm-title-wrapper {
    margin-bottom: 40px;
}

.crm-title-wrapper h2 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.crm-divider {
    width: 80px;
    height: 6px;
    background: var(--tp-common-black, #333);
    border-radius: 3px;
}

/* List Styling */
.crm-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.crm-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.crm-list li:hover {
    transform: translateX(15px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.crm-list li i {
    font-size: 1.5rem;
    color: var(--tp-theme-primary, #fa2837);
    /* Fallback to red */
    min-width: 30px;
    margin-top: 2px;
}

.crm-list li p {
    margin: 0;
    font-size: 1.1rem;
    color: #444;
    line-height: 1.5;
}

/* Image Side (Right) */
.crm-image-col {
    width: 60%;
    /* Intentionally larger to overlap */
    margin-left: -10%;
    /* Creating Overlap */
    position: relative;
    z-index: 3;
}

.crm-image-inner {
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    /* Innovative Shape removed */
    box-shadow: 30px 30px 0px rgba(0, 0, 0, 0.05);
    /* Architectural shadow */
    transition: all 0.5s ease;
}

.crm-image-inner:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
    /* Soft, lifting shadow */
}

.crm-image-inner img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.1);
    /* Zoom in initially */
    transition: transform 0.5s ease;
}

.crm-image-inner:hover img {
    transform: scale(1.05);
}

/* Floating Badge */
.crm-floater {
    position: absolute;
    bottom: -30px;
    right: 50px;
    background: #333;
    color: #fff;
    padding: 20px 40px;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
    animation: crmFloat 4s ease-in-out infinite;
}

@keyframes crmFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Responsive */
@media (max-width: 1199px) {
    .crm-image-col {
        width: 50%;
        margin-left: 0;
    }

    .crm-content-col {
        width: 50%;
    }

    .crm-info-card {
        padding: 40px;
    }

    .crm-title-wrapper h2 {
        font-size: 3rem;
    }
}

@media (max-width: 991px) {
    .crm-crazy-section {
        padding: 80px 0;
    }

    .crm-bg-text {
        display: none;
    }

    .crm-row {
        flex-direction: column-reverse;
    }

    .crm-content-col {
        width: 100%;
        padding: 0;
        margin-top: 30px;
    }

    .crm-image-col {
        width: 100%;
        margin: 0;
    }

    .crm-image-inner {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        clip-path: none;
        border-radius: 0 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .crm-image-inner video,
    .crm-image-inner img {
        border-radius: 0 !important;
    }

    .crm-info-card {
        margin: 0 20px;
        background: #fff;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.1);
    }

    .crm-floater {
        right: 20px;
        bottom: 20px;
        padding: 10px 25px;
        font-size: 1rem;
    }
}

/* --- PREMIUM HIGHLIGHTS REDESIGN --- */

.ph-section {
    position: relative;
    padding: 100px 0;
    background: #fff;
}

/* Isolated Scroll Wrapper */
.ps3-pane-scroll-wrapper {
    display: block !important;
    height: 400px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: auto;
    padding-right: 15px;
    margin-top: 10px;
    position: relative;
    border-radius: 4px;
}

/* Custom Scrollbar for PS3 Wrapper */
.ps3-pane-scroll-wrapper::-webkit-scrollbar {
    width: 5px;
}

.ps3-pane-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
}

.ps3-pane-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.ps3-pane-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--tp-theme-primary);
}

.ps3-content-pane {
    display: none;
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Feature Cards (Usage Areas) */
.ph-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Force 3 columns */
    gap: 30px;
    margin-bottom: 80px;
}

@media (max-width: 991px) {
    .ph-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .ph-grid {
        grid-template-columns: 1fr;
    }
}

.ph-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.ph-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--tp-theme-primary);
    /* Uses theme color */
    z-index: -1;
    transition: all 0.4s ease;
    opacity: 0.03;
}

.ph-card:hover::before {
    height: 100%;
}

.ph-card:hover {
    transform: translateY(-10px);
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.ph-icon-wrapper {
    width: 80px;
    height: 80px;
    background: #f9f9f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    transition: all 0.4s ease;
}

.ph-card:hover .ph-icon-wrapper {
    background: var(--tp-theme-primary);
    transform: scale(1.1);
    /* Removed rotation */
}

.ph-icon-wrapper i {
    font-size: 32px;
    color: #333;
    transition: all 0.4s ease;
}

.ph-card:hover .ph-icon-wrapper i {
    color: #fff;
}

.ph-card:hover .ph-icon-wrapper img {
    filter: brightness(0) invert(1);
}

.ph-title {
    font-size: 1.1rem;
    /* Reduced from 1.25rem */
    font-weight: 700;
    margin-bottom: 15px;
    color: #1e1e1e;
    letter-spacing: -0.02em;
}

.ph-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

/* --- RESTORED LAYOUT OVERLAY STYLES --- */

.ph-overlay-container {
    position: relative;
    overflow: hidden;
    /* ensure overlay stays inside */
}

.ph-custom-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    z-index: 5;
    pointer-events: none;
    /* allow clicking through to the link */
}

/* Hover Effect on Parent Container (.tp-pd-2-thumb-item or .tp-pd-2-banner) */
.ph-overlay-container:hover .ph-custom-overlay {
    opacity: 1;
    transform: translateY(0);
}

.ph-overlay-container:hover img.scale-up {
    /* Slight zoom enhancement on the original image if not already there */
    transform: scale(1.1);
}

.ph-overlay-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Clear potentially conflicting older CSS if necessary */
.ph-masonry-wrapper,
.ph-masonry-item {
    display: none;
}

/* --- ARTISTIC SECTION 3 (PS3) STYLES --- */

.ps3-section {
    padding: 120px 0;
    background: #fcfcfc;
    position: relative;
    overflow: hidden;
}

/* Artistic Boxed Header */
.ps3-header-box {
    position: relative;
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    /* Architectural line */
    padding-bottom: 50px;
}

.ps3-box-title {
    font-size: 4rem;
    font-weight: 800;
    color: #111;
    line-height: 1.1;
    margin: 0;
    position: relative;
    z-index: 2;
}

.ps3-box-accent {
    color: var(--tp-theme-primary);
    font-weight: 300;
    margin-right: 15px;
}

.ps3-box-content p {
    font-size: 1.2rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
    padding-left: 30px;
}

.ps3-bg-typo {
    position: absolute;
    top: -40px;
    right: 0;
    font-size: 8rem;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.02);
    font-family: var(--tp-ff-heading);
    pointer-events: none;
    z-index: 1;
    line-height: 1;
}

@media (max-width: 991px) {
    .ps3-header-box {
        text-align: left;
        padding-bottom: 30px;
    }

    .ps3-box-title {
        font-size: 2.8rem;
        margin-bottom: 20px;
    }

    .ps3-bg-typo {
        display: none;
    }
}

/* Interactive Wrapper */
.ps3-interactive-wrapper {
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    /* For border radius */
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin-top: 40px;
}

/* Left Navigation */
.ps3-nav-container {
    background: #111;
    height: 100%;
    padding: 60px 0;
    justify-content: center;
}

.ps3-nav-item {
    padding: 25px 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
    position: relative;
}

.ps3-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.ps3-nav-item.active {
    background: #1a1a1a;
    /* slightly lighter than bg */
    border-left-color: var(--tp-theme-primary);
}

.ps3-nav-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ps3-nav-num {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
}

.ps3-nav-title {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0;
    transition: all 0.3s ease;
}

.ps3-nav-item.active .ps3-nav-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
}

.ps3-nav-arrow {
    color: var(--tp-theme-primary);
    font-size: 18px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.ps3-nav-item.active .ps3-nav-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Right Content Viewport */
.ps3-content-viewport {
    position: relative;
    height: 100%;
    min-height: 500px;
    background: #fff;
    padding: 60px 80px;
    display: flex;
    align-items: center;
    /* Vertical Center */
}

.ps3-content-pane {
    display: none;
    width: 100%;
    /* Animations handled by JS + CSS transitions */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ps3-content-pane.active {
    display: block;
    opacity: 1;
    animation: ps3FadeUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes ps3FadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ps3-pane-inner {
    position: relative;
    z-index: 2;
}

.ps3-watermark {
    position: absolute;
    top: -60px;
    left: -40px;
    font-size: 10rem;
    font-weight: 900;
    color: #f5f5f5;
    z-index: -1;
    line-height: 1;
    opacity: 0.8;
    pointer-events: none;
    font-family: var(--tp-ff-heading);
}

.ps3-pane-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000;
}

.ps3-pane-text {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.8;
}

.ps3-pane-text p {
    margin-bottom: 20px;
}

@media (max-width: 991px) {
    .ps3-interactive-wrapper {
        border-radius: 20px;
    }

    .ps3-nav-container {
        padding: 30px 0;
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: flex-start;
        height: auto;
        border-bottom: 1px solid #333;
    }

    .ps3-nav-item {
        padding: 15px 25px;
        border-left: none;
        border-bottom: 4px solid transparent;
        flex-shrink: 0;
    }

    .ps3-nav-item.active {
        border-left: none;
        border-bottom-color: var(--tp-theme-primary);
    }

    .ps3-content-viewport {
        padding: 40px 30px;
        min-height: auto;
    }

    .ps3-main-title {
        font-size: 2.5rem;
    }

    .ps3-nav-header {
        gap: 10px;
    }

    .ps3-nav-arrow {
        display: none;
    }

    .ps3-watermark {
        font-size: 6rem;
        top: -30px;
        left: -10px;
    }

    .ps3-pane-title {
        font-size: 2rem;
    }
}

/* --- PRODUCT SECTION 1 (PS1) - INTERACTIVE CATALOGUE --- */

.ps1-catalogue-section {
    padding: 120px 0;
    position: relative;
    background: #ececec;
    overflow: hidden;
}

.ps1-cat-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: #111;
}

.ps1-cat-desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 700px;
    margin: 0 auto;
}

/* Stage (Left Images) */
.ps1-stage-wrapper {
    position: relative;
    width: 450px;
    max-width: 100%;
    height: 450px;
    margin: 0 auto;
    border-radius: 30px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    overflow: hidden;
}

.ps1-stage-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1.1);
    z-index: 1;
}

.ps1-stage-image.active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.ps1-stage-image img,
.ps1-stage-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
}

/* Decorative Frame Overlay */
.ps1-stage-frame {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    z-index: 5;
    pointer-events: none;
}

/* List (Right Content) */
.ps1-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ps1-list-item {
    padding: 25px 30px;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.ps1-list-item:hover {
    background: #f9f9f9;
}

.ps1-list-item.active {
    background: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.05);
}

.ps1-item-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ps1-item-num {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: #aaa;
    font-weight: 600;
}

.ps1-list-item.active .ps1-item-num {
    color: var(--tp-theme-primary);
}

.ps1-item-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    color: #333;
    transition: color 0.3s;
}

.ps1-list-item.active .ps1-item-title {
    color: #000;
    font-weight: 700;
}

.ps1-item-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

.ps1-list-item.active .ps1-item-body {
    max-height: 300px;
    /* Adjust as needed */
    opacity: 1;
    margin-top: 15px;
}

.ps1-divider {
    width: 40px;
    height: 2px;
    background: var(--tp-theme-primary);
    margin-bottom: 15px;
}

.ps1-item-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .ps1-stage-wrapper {
        margin-bottom: 40px;
    }

    .ps1-list-wrapper {
        padding-left: 0 !important;
        /* Reset offset padding */
    }
}

/* ========================================
   2-COLUMN MEGA MENU STYLES
   ======================================== */

/* Specific width for 2-column mega menu - High specificity to override general rules (like the 1240px one) */
.tp-main-menu nav ul li.has-mega-menu-2col .tp-megamenu.tp-megamenu-2col {
    width: 700px !important;
    max-width: 90vw;
}

.tp-megamenu-2col .row {
    margin: 0;
}

.tp-megamenu-2col .col-md-6 {
    padding: 15px;
}

.tp-megamenu-2col .col-md-12 {
    padding: 20px 15px;
    margin-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* ========================================
   3-COLUMN MEGA MENU STYLES (matches 2-col look)
   ======================================== */
.tp-main-menu nav ul li.has-mega-menu-3col .tp-megamenu.tp-megamenu-3col {
    width: 1000px !important;
    max-width: 95vw;
}

.tp-megamenu-3col .row {
    margin: 0;
}

.tp-megamenu-3col .col-md-4 {
    padding: 15px;
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

/* 2-Column Preview Area */
.product-preview-area {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 12px;
}

.product-preview-area .product-preview-img {
    flex: 0 0 300px;
    border-radius: 8px;
    overflow: hidden;
}

.product-preview-area .product-preview-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.product-preview-area:hover .product-preview-img img {
    transform: scale(1.05);
}

.product-preview-area .product-preview-content {
    flex: 1;
}

.product-preview-area .product-preview-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--tp-common-black);
}

.product-preview-area .product-preview-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

@media (max-width: 767px) {
    .product-preview-area {
        flex-direction: column;
    }

    .product-preview-area .product-preview-img {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* ========================================
   🎨 MAGNIFICENT PROJECTS PAGE STYLES
   ULTRA PREMIUM DESIGN - ABSOLUTELY STUNNING
   ======================================== */

/* Header stays normal - no overrides */

/* === HERO SECTION === */
.projects-hero-section {
    position: relative;
    margin-top: 110px;
    padding: 100px 0 20px;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%);
}

.projects-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 50%, rgba(234, 178, 40, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(234, 178, 40, 0.03) 0%, transparent 50%);
    animation: heroGlow 8s ease-in-out infinite;
}

/* Large IMPERGO Watermark */
.projects-hero-bg::before {
    content: 'IMPERGO';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(8rem, 20vw, 18rem);
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    letter-spacing: 0.1em;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

@keyframes heroGlow {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.projects-hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    max-width: 1200px;
    padding: 40px 20px;
}

.projects-hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 30px;
    letter-spacing: -0.02em;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.projects-hero-desc {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    max-width: 800px;
    margin: 0 0 40px 0;
}

.projects-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

.projects-breadcrumb a {
    color: var(--tp-theme-primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

.projects-breadcrumb a:hover {
    color: #fff;
}

.projects-breadcrumb .separator {
    color: rgba(255, 255, 255, 0.3);
}

/* Animated Shapes */
.projects-hero-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.projects-hero-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--tp-theme-primary) 0%, transparent 70%);
    opacity: 0.1;
    animation: float 20s infinite ease-in-out;
}

.projects-hero-shapes .shape-1 {
    width: 400px;
    height: 400px;
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.projects-hero-shapes .shape-2 {
    width: 300px;
    height: 300px;
    bottom: -150px;
    right: -150px;
    animation-delay: 5s;
}

.projects-hero-shapes .shape-3 {
    width: 250px;
    height: 250px;
    top: 50%;
    right: 10%;
    animation-delay: 10s;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -30px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

/* === CATEGORIES SECTION === */
.projects-categories-section,
.projects-services-section {
    padding: 120px 0;
    background: #ffffff;
}

.projects-section-header {
    text-align: center;
    margin-bottom: 80px;
}

.projects-section-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    color: #0a0a0a;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.projects-section-line {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--tp-theme-primary), transparent);
    margin: 0 auto;
}

/* === ASYMMETRIC OVERLAPPING CATEGORIES === */
.projects-asymmetric-section {
    padding: 120px 0;
    background: #ffffff;
    overflow: hidden;
}

.projects-asymmetric-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
}

.projects-asym-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Left card - higher position, taller */
.projects-asym-left {
    margin-top: 0;
    margin-right: -80px;
    /* More overlap */
    z-index: 1;
    /* Behind right card */
    max-height: 460px;
    /* Control total height */
}

.projects-asym-left .projects-asym-media {
    height: 460px;
    /* Match max-height */
}

.projects-asym-left .projects-asym-content {
    top: 0;
    /* Title at TOP */
    bottom: auto;
}

/* Right card - lower position, shorter */
.projects-asym-right {
    margin-top: 150px;
    /* More offset */
    margin-left: -80px;
    z-index: 2;
    /* On top of left card */
    max-height: 400px;
    /* Control total height */
}

.projects-asym-right .projects-asym-media {
    height: 400px;
    /* Match max-height */
}

.projects-asym-right .projects-asym-content {
    bottom: 0;
    /* Title at BOTTOM */
    top: auto;
}

.projects-asym-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
    z-index: 10 !important;
}

.projects-asym-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.projects-asym-media {
    position: relative;
    overflow: hidden;
}

.projects-asym-media img,
.projects-asym-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
}

.projects-asym-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 1;
}

.projects-asym-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
}

.projects-asym-card:hover .projects-asym-media img {
    transform: scale(1.1);
}

.projects-asym-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
    z-index: 2;
}

.projects-asym-content {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 50px;
    z-index: 3;
    color: #fff;
}

.projects-asym-number {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: rgba(234, 178, 40, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.projects-asym-card:hover .projects-asym-number {
    transform: scale(1.15);
    background: var(--tp-theme-primary);
}

.projects-asym-title {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.projects-asym-card:hover .projects-asym-title {
    color: var(--tp-theme-primary);
    transform: translateX(10px);
}

.projects-asym-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.projects-asym-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--tp-theme-primary);
    transition: gap 0.3s ease;
}

.projects-asym-card:hover .projects-asym-arrow {
    gap: 15px;
}

.projects-asym-arrow svg {
    transition: transform 0.3s ease;
}

.projects-asym-card:hover .projects-asym-arrow svg {
    transform: translateX(5px);
}

/* Responsive */
@media (max-width: 991px) {
    .projects-asymmetric-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .projects-asym-left,
    .projects-asym-right {
        margin: 0;
        z-index: 1;
    }

    .projects-asym-left .projects-asym-media,
    .projects-asym-right .projects-asym-media {
        height: 400px;
    }

    .projects-asym-left .projects-asym-content,
    .projects-asym-right .projects-asym-content {
        bottom: 0;
        top: auto;
    }
}

@media (max-width: 767px) {
    .projects-asymmetric-section {
        padding: 80px 0;
    }

    .projects-asym-left .projects-asym-media,
    .projects-asym-right .projects-asym-media {
        height: 350px;
    }

    .projects-asym-content {
        padding: 30px;
    }

    .projects-asym-title {
        font-size: 2rem;
    }
}

/* === SERVICES GRID === */
.projects-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 35px;
}

.project-service-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.project-service-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.project-service-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.project-service-image-wrapper {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.project-service-image {
    width: 100%;
    height: 100%;
    position: relative;
}

.project-service-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-service-card:hover .project-service-image::before {
    opacity: 1;
}

.project-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.project-service-card:hover .project-service-image img {
    transform: scale(1.1) rotate(2deg);
}

.project-service-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 8px 20px;
    background: rgba(234, 178, 40, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    color: #0a0a0a;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(234, 178, 40, 0.3);
}

.project-service-content {
    padding: 30px 25px;
}

.project-service-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 12px;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.project-service-card:hover .project-service-title {
    color: var(--tp-theme-primary);
}

.project-service-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.project-service-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tp-theme-primary);
    transition: gap 0.3s ease;
}

.project-service-card:hover .project-service-cta {
    gap: 12px;
}

.project-service-cta svg {
    transition: transform 0.3s ease;
}

.project-service-card:hover .project-service-cta svg {
    transform: translateX(5px);
}

/* === EMPTY STATE === */
.projects-empty-section {
    padding: 120px 0;
    background: #f8f9fa;
}

.projects-empty-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.projects-empty-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    color: rgba(0, 0, 0, 0.1);
}

.projects-empty-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #0a0a0a;
    margin-bottom: 15px;
}

.projects-empty-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
}

.projects-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    background: var(--tp-theme-primary);
    color: #0a0a0a;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(234, 178, 40, 0.3);
}

.projects-back-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(234, 178, 40, 0.4);
    color: #0a0a0a;
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    .projects-hero-section {
        padding: 180px 0 60px;
    }

    .projects-hero-title {
        font-size: 3rem;
    }

    .projects-categories-grid,
    .projects-services-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 25px;
    }

    .projects-section-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 767px) {
    .projects-hero-content {
        padding: 40px 20px;
    }

    .projects-hero-title {
        font-size: 2.5rem;
    }

    .projects-hero-desc {
        font-size: 1rem;
    }

    .projects-categories-grid,
    .projects-services-grid {
        grid-template-columns: 1fr;
    }

    .projects-categories-section,
    .projects-services-section {
        padding: 80px 0;
    }

    .projects-section-header {
        margin-bottom: 50px;
    }
}

/* =========================================
   Consolidated Component Styles
   Moved from inline PHP files
   ========================================= */

/* Removed broken duplicate mps block from here */

/* --- Product Section 1-1 --- */
.ps1-1-wrapper {
    padding: 80px 0;
    background: #f8f9fa;
}

.ps1-1-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    padding: 50px;
    display: flex;
    align-items: flex-start;
    /* Align content to the top */
    gap: 50px;
    min-height: 500px;
}

.ps1-1-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Ensure content starts from the top */
}

.ps1-1-overline {
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    color: #999;
    margin-bottom: 20px;
    font-weight: 600;
}

.ps1-1-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}

.ps1-1-tag {
    background: #000;
    color: #fff;
    border: 1px solid #eee;
    font-size: 13px;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    user-select: none;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ps1-1-tag:hover {
    background: #fff;
    border-color: #111;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.ps1-1-tag.active {
    background: var(--tp-theme-primary, #eab228);
    color: #fff !important;
    border-color: var(--tp-theme-primary, #eab228);
    box-shadow: 0 10px 25px rgba(234, 178, 40, 0.3);
    transform: translateY(-3px);
}

.ps1-1-title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #111;
    margin-bottom: 20px;
}

.ps1-1-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 30px;
    min-height: 100px;
}

.ps1-1-btn {
    display: inline-flex;
    align-items: center;
    background: #000;
    color: #fff;
    padding: 14px 30px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    width: fit-content;
}

.ps1-1-btn:hover {
    background: #333;
    color: #fff;
    transform: translateY(-2px);
}

.ps1-1-image-box {
    flex: 0 0 450px;
    width: 450px;
    height: 450px;
    position: relative;
    border-radius: 30px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.ps1-1-image-box img,
.ps1-1-image-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
    transition: all 0.4s ease;
}

.ps1-fade-out {
    opacity: 0 !important;
}

@media (max-width: 991px) {
    .ps1-1-card {
        flex-direction: column;
        padding: 30px;
        height: auto;
    }

    .ps1-1-image-box {
        width: 100%;
        height: 300px;
        order: -1;
        margin-bottom: 30px;
    }

    .ps1-1-title {
        font-size: 2rem;
    }
}

/* --- Product Section 2-2 --- */
.mps-section {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background-color: #f9f9f9;
}

.mps-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
    position: relative;
    z-index: 2;
}

.mps-wrapper {
    display: grid;
    grid-template-columns: 42% 58%;
    /* FIXED percentage widths to prevent any movement */
    gap: 80px;
    align-items: flex-start;
    /* Stabilize top anchor to prevent shaking */
}

.mps-image-wrapper,
.mps-content-wrapper {
    min-width: 0;
    /* Prevents columns from being pushed wider by content */
}

.mps-image-wrapper {
    position: relative;
}

.mps-image-inner {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    transform: none !important;
    /* Removed tilt effect */
    transition: transform 0.5s ease;
    display: grid;
    grid-template-areas: "stack";
    background: #fff;
    max-width: 100%;
    /* Reduced display size */
    margin: 0 auto;
    /* Centered */
}

.mps-image-inner:hover {
    transform: scale(1.02) !important;
    /* Gentle hover instead of untilt */
}

.mps-image-inner img {
    grid-area: stack;
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.5s ease, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
    visibility: hidden;
}

.mps-image-inner img.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    position: relative;
}

.mps-image-inner:hover img {
    transform: scale(1.05);
}

/* Decorations removed via PHP, styles kept hidden just in case */
.mps-circle-decor,
.mps-dots-decor {
    display: none !important;
}

@keyframes rotateDecor {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.mps-content-wrapper {
    width: 100%;
    /* Force fill the 58% column */
    padding-right: 20px;
    box-sizing: border-box;
}

.mps-tabs-section {
    width: 100%;
    margin: 0;
}

.mps-subtitle {
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--tp-theme-primary, #fa2837);
    margin-bottom: 20px;
    display: inline-block;
}

.mps-title {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 40px;
    color: #1a1a1a;
    position: relative;
}

.mps-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 60px;
    height: 4px;
    background: currentColor;
    opacity: 0.1;
}

.mps-content-body {
    font-size: 18px;
    color: #555;
    line-height: 1.8;
}

.mps-list-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mps-list-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.mps-icon-box {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: #fff1f2;
    color: var(--tp-theme-primary, #fa2837);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 20px;
    margin-top: 2px;
}

.mps-text {
    flex: 1;
}

.mps-text p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.mps-tab-nav {
    display: flex;
    flex-direction: column;
    /* Buttons stacked vertically */
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 30px;
    width: 100%;
    /* Lock width */
}

.mps-tab-btn {
    padding: 15px 25px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eaeaea;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600 !important;
    color: #333;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    /* Spans full content width */
}

.mps-tab-btn:hover {
    background: #f8f9fa;
    border-color: #ddd;
}

.mps-tab-btn.active {
    background: var(--tp-theme-primary, #fa2837);
    color: #fff !important;
    border-color: var(--tp-theme-primary, #fa2837);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.mps-tab-contents {
    min-height: 150px;
    position: relative;
    padding: 20px 0;
    width: 100%;
    /* Lock width to column */
    overflow: hidden;
    /* Prevent text from pushing expansion */
}

.mps-tab-content-item {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.mps-tab-content-item.active {
    display: block !important;
    /* Ensure visibility */
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 991px) {
    .mps-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .mps-content-wrapper {
        padding-right: 0;
        order: 2;
    }

    .mps-image-wrapper {
        order: 1;
    }

    .mps-title {
        font-size: 36px;
    }
}

/* --- Product Section 3-3 --- */
.sec33-section {
    padding: 120px 0;
    position: relative;
    background: #fff;
}

.sec33-header {
    margin-bottom: 60px;
    text-align: center;
}

.sec33-subtitle {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--tp-theme-primary);
    margin-bottom: 10px;
    display: block;
}

.sec33-title {
    margin-bottom: 25px;
    color: var(--tp-common-black);
    font-family: var(--tp-ff-heading);
    font-size: 48px;
    font-weight: 700;
}

.sec33-desc {
    font-size: 18px;
    color: var(--tp-grey-1);
    max-width: 800px;
    margin: 0 auto;
    font-family: var(--tp-ff-p);
}

.sec33-tabs-wrapper {
    margin-top: 50px;
}

.sec33-nav-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 50px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.sec33-nav-item {
    cursor: pointer;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    color: rgb(0 0 0);
    background: #c9c9c9;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.sec33-nav-item:hover {
    background: #eee;
    color: #333;
}

.sec33-nav-item.active {
    background: var(--tp-theme-primary);
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.sec33-tab-content-area {
    position: relative;
    min-height: 400px;
}

.sec33-tab-pane {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}

.sec33-tab-pane.active {
    display: grid;
    gap: 60px;
    opacity: 1;
    transform: translateY(0);
    align-items: center;
}

.sec33-pane-text {
    padding-right: 20px;
}

.sec33-pane-num {
    font-size: 8rem;
    font-weight: 900;
    color: #eee;
    line-height: 0.8;
    margin-bottom: -20px;
    margin-left: -5px;
}

.sec33-pane-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--tp-common-black);
    margin-bottom: 25px;
    position: relative;
}

.sec33-pane-desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--tp-grey-1);
}

.sec33-pane-visual {
    position: relative;
}

.sec33-visual-box {
    background: #f9f9f9;
    border-radius: 20px;
    padding: 60px;
    text-align: center;
    border: 1px solid #eaeaea;
    transition: transform 0.3s;
}

.sec33-visual-box:hover {
    transform: translateY(-5px);
}

.sec33-visual-icon {
    font-size: 5rem;
    color: var(--tp-theme-primary);
    margin-bottom: 30px;
    display: inline-block;
}

.sec33-visual-label {
    display: block;
    font-size: 14px;
    color: #999;
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    .sec33-tab-pane.active {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sec33-pane-text {
        padding-right: 0;
        text-align: center;
    }

    .sec33-pane-num {
        font-size: 6rem;
    }
}

/* --- Product Section 4 --- */
.pg-mag-section {
    padding: 120px 0;
    background: #fff;
    overflow: hidden;
}

.pg-mag-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 40px;
    z-index: 5;
    position: relative;
}

.pg-mag-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--tp-theme-primary, #bfa378);
    display: block;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.pg-mag-title {
    font-size: 50px;
    line-height: 1.1;
    margin-bottom: 30px;
    color: var(--tp-common-black);
    font-family: var(--tp-ff-heading);
}

.pg-mag-desc {
    font-size: 18px;
    color: var(--tp-grey-1);
    margin-bottom: 50px;
    line-height: 1.6;
    font-family: var(--tp-ff-p);
    max-width: 450px;
}

.pg-mag-btn {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    group: transition;
}

.pg-mag-btn-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.4s ease;
}

.pg-mag-btn-circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--tp-common-black);
    transform: scale(0);
    transition: transform 0.4s ease;
    z-index: 0;
}

.pg-mag-icon {
    font-size: 24px;
    color: var(--tp-common-black);
    z-index: 2;
    transition: color 0.4s;
}

.pg-mag-btn:hover .pg-mag-btn-circle {
    border-color: var(--tp-common-black);
}

.pg-mag-btn:hover .pg-mag-btn-circle::after {
    transform: scale(1);
}

.pg-mag-btn:hover .pg-mag-icon {
    color: var(--tp-common-white);
}

.pg-mag-btn-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--tp-common-black);
    letter-spacing: 1px;
    font-family: var(--tp-ff-heading);
}

.pg-collage-wrapper {
    position: relative;
    height: 700px;
    width: 100%;
    cursor: pointer;
}

.pg-col-img-1 {
    position: absolute;
    top: 0;
    left: 50px;
    width: 70%;
    height: 85%;
    object-fit: cover;
    z-index: 1;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease;
}

.pg-col-img-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
    height: 50%;
    object-fit: cover;
    z-index: 2;
    border: 15px solid #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transition: transform 0.6s ease;
}

.pg-collage-wrapper:hover .pg-col-img-1 {
    transform: translateX(-20px) scale(0.98);
}

.pg-collage-wrapper:hover .pg-col-img-2 {
    transform: translateX(10px) translateY(-10px);
}

@media (max-width: 991px) {
    .pg-mag-title {
        font-size: 36px;
    }

    .pg-collage-wrapper {
        height: 500px;
        margin-bottom: 50px;
    }

    .pg-col-img-1 {
        width: 80%;
        left: 0;
    }

    .pg-col-img-2 {
        width: 60%;
    }

    .pg-mag-content {
        padding-left: 0;
        text-align: left;
    }
}

/* --- Product Section 4-4 --- */
.mosaic-section {
    padding: 100px 0;
    position: relative;
    background: #000;
}

.mosaic-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.mosaic-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--tp-theme-primary, #fa2837);
    margin-bottom: 15px;
    background: rgba(250, 40, 55, 0.08);
    padding: 8px 16px;
    border-radius: 30px;
}

.mosaic-title {
    color: #fff !important;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.mosaic-desc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 300px);
    gap: 30px;
    margin-bottom: 50px;
}

.mosaic-item {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mosaic-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mosaic-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.mosaic-item:hover img {
    transform: scale(1.1);
}

.mosaic-item:hover .mosaic-overlay {
    opacity: 1;
}

.mosaic-item:hover .mosaic-icon {
    transform: scale(1);
}

.mosaic-item:nth-child(1) {
    grid-column: span 7;
    grid-row: span 2;
}

.mosaic-item:nth-child(2) {
    grid-column: span 5;
    grid-row: span 1;
}

.mosaic-item:nth-child(3) {
    grid-column: span 2;
    grid-row: span 1;
}

.mosaic-item:nth-child(4) {
    grid-column: span 3;
    grid-row: span 1;
    position: relative;
}

.mosaic-more-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 5;
    transition: background 0.3s;
}

.mosaic-more-count {
    font-size: 3rem;
    font-weight: 700;
}

.mosaic-more-text {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
}

.mosaic-item:nth-child(4):hover .mosaic-more-overlay {
    background: rgba(0, 0, 0, 0.7);
}

.mosaic-action {
    text-align: center;
}

.mosaic-btn {
    display: inline-flex;
    align-items: center;
    padding: 18px 45px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.mosaic-btn:hover {
    background: var(--tp-theme-primary, #fa2837);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(250, 40, 55, 0.3);
    color: #fff;
}

.mosaic-btn i {
    margin-left: 10px;
    transition: transform 0.3s;
}

.mosaic-btn:hover i {
    transform: translateX(5px);
}

@media (max-width: 991px) {
    .mosaic-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .mosaic-item {
        height: 250px;
    }

    .mosaic-title {
        color: #fff !important;
        font-size: 2.5rem;
    }
}

/* --- PRODUCT HIGHLIGHTS COMPONENT --- */
.ph-section-corrected {
    padding: 60px 0;
    background: #fff;
    position: relative;
    z-index: 5;
}

.ph-section-corrected .pm-title,
.ph-section-corrected h2 {
    color: #111 !important;
}

.ph-grid-clean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.ph-tile {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    z-index: 1;
}

/* Left-to-Right Sweep Effect */
.ph-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #1a1a1a;
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: -1;
}

.ph-tile:hover {
    transform: translateY(-5px);
    border-color: #1a1a1a;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.ph-tile:hover::before {
    width: 100%;
}

.ph-tile-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
    transition: color 0.4s ease;
}

/* Icon turns Yellow on Hover */
.ph-tile:hover .ph-tile-icon {
    color: var(--tp-theme-primary);
}

.ph-tile-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #222;
    transition: color 0.4s ease;
    margin-bottom: 10px;
}

.ph-tile:hover .ph-tile-title {
    color: #fff;
}

.ph-tile-desc {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.4s ease;
    line-height: 1.5;
}

.ph-tile:hover .ph-tile-desc {
    color: rgba(255, 255, 255, 0.7);
}

.ph-tile-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: none;
    transition: filter 0.4s ease;
}

/*.ph-tile:hover .ph-tile-icon img { filter: brightness(0) invert(1); }  Optional: make jpg/png icons white? keeping it simple for now */

/* Gallery Styles (Transferred) */
.ph-gallery-flex {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

.ph-gallery-flex .ph-stage-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}

.ph-thumbs-column {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    height: clamp(380px, 58vh, 520px);
}

.ph-thumbs-column .ph-swiper-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.ph-thumbs-column .swiper,
.ph-thumbs-column .swiper-wrapper {
    height: 100%;
    width: 100%;
}

.ph-thumbs-column .swiper-slide {
    height: calc((100% - 24px) / 3) !important;
    width: 100% !important;
    display: block;
}

.ph-thumbs-column .ph-thumb-item {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.ph-thumbs-column .ph-nav-arrow {
    position: static;
    transform: none;
    width: 100%;
    height: 36px;
    border-radius: 10px;
    background: #f3f3f3;
    box-shadow: none;
    flex-shrink: 0;
}

.ph-thumbs-column .ph-nav-arrow:hover {
    background: #000;
    color: #fff;
}

.ph-thumbs-column .swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.ph-stage-wrapper {
    position: relative;
    width: 100%;
    height: clamp(380px, 58vh, 520px);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    background: #f0f0f0;
}

.ph-stage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.ph-stage-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    color: #fff;
    opacity: 1;
    /* Always visible */
    transform: translateY(0);
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.ph-stage-wrapper:hover .ph-stage-caption {
    padding-bottom: 50px;
    /* Light bounce on hover */
}

.ph-stage-caption h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.ph-stage-caption p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.ph-swiper-wrapper .swiper-wrapper {
    display: flex;
    transition-property: transform;
}

.ph-swiper-wrapper .swiper-slide {
    flex-shrink: 0;
    height: auto;
}

.ph-thumb-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.ph-thumb-item.isActive {
    border-color: var(--tp-theme-primary);
}

.ph-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.ph-thumb-item:hover .ph-thumb-img {
    transform: scale(1.1);
}

.ph-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    z-index: 10;
    cursor: pointer;
    transition: all 0.3s;
}

.ph-nav-arrow:hover {
    background: #000;
    color: #fff;
}

.ph-prev-btn {
    left: -25px;
}

.ph-next-btn {
    right: -25px;
}

@media (max-width: 991px) {
    .ph-grid-clean {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .ph-stage-wrapper {
        height: 320px;
    }

    .ph-gallery-flex {
        flex-direction: column;
    }

    .ph-thumbs-column {
        flex: 0 0 auto;
        width: 100%;
        height: 300px;
    }

    .ph-tile {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .ph-grid-clean {
        grid-template-columns: 1fr;
    }
}

/* 
   Special Enhanced List Styles
   Can be used anywhere. Default utility class: .enhanced-list 
   Or specifically applied to section 4 via: .pg-mag-desc ul 
   Or section 5 via: .tp-service-details-dec ul
*/

/* Reset & Container */
.enhanced-list ul,
.pg-mag-desc ul,
.tp-service-details-dec ul {
    list-style: none;
    padding: 0;
    margin: 25px 0;
}

/* List Item Styling */
.enhanced-list li,
.pg-mag-desc li,
.tp-service-details-dec li {
    position: relative;
    padding: 18px 20px 18px 50px;
    /* Space for icon */
    margin-bottom: 15px;
    /* Spacing between items */
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.04);
    /* Subtle border */
    background: transparent;
    overflow: hidden;
    /* For wipe effect */
}

/* Hover Wipe Effect (Left to Right) */
.enhanced-list li::before,
.pg-mag-desc li::before,
.tp-service-details-dec li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #f8f9fa;
    /* Light grey wipe */
    z-index: -1;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover State */
.enhanced-list li:hover,
.pg-mag-desc li:hover,
.tp-service-details-dec li:hover {
    transform: translateX(10px);
    border-color: rgba(0, 0, 0, 0.08);
}

.enhanced-list li:hover::before,
.pg-mag-desc li:hover::before,
.tp-service-details-dec li:hover::before {
    width: 100%;
}

.pp-media-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.pp-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Mobile Adjustments */
.mobile-process-card {
    padding: 20px;
    background: #fff;
    border-radius: 20px;
}

.mobile-process-text {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

/* Custom Icon (Centered Vertically) */
.enhanced-list li::after,
.pg-mag-desc li::after,
.tp-service-details-dec li::after {
    content: '\f058';
    /* fa-circle-check */
    font-family: 'Font Awesome 6 Pro';
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tp-theme-primary);
    font-size: 1.2rem;
    font-weight: 300;
    transition: all 0.3s ease;
}

/* Icon Hover Effect */
.enhanced-list li:hover::after,
.pg-mag-desc li:hover::after,
.tp-service-details-dec li:hover::after {
    transform: translateY(-50%) scale(1.15);
    font-weight: 900;
    filter: drop-shadow(0 4px 6px rgba(var(--tp-theme-primary-rgb, 234, 178, 40), 0.3));
}

/* 
   Compact Interactive List for Narrow Sections (Section 3) 
   More text-like, less padding, subtle wipe effect.
*/
/* 
   Compact Interactive List Utility Class
   Usage: Add class="compact-list" to any container div or ul.
*/
.compact-list ul {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.compact-list li {
    position: relative;
    padding: 6px 0 6px 18px;
    /* Small left padding for bullet */
    margin-bottom: 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
    z-index: 1;
    overflow: hidden;
    /* For wipe */
    line-height: 1.6;
    color: var(--tp-grey-1);
}

/* Subtler Wipe Effect Background */
.compact-list li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--tp-theme-primary);
    opacity: 0.1;
    /* Very subtle tint */
    z-index: -1;
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Small Custom Bullet (Vertical Line) */
.compact-list li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 2.5px;
    height: 14px;
    background-color: var(--tp-theme-primary);
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Hover Actions */
.compact-list li:hover {
    padding-left: 22px;
    /* Slight shift */
}

.compact-list li:hover::before {
    width: 100%;
}

.compact-list li:hover::after {
    height: 18px;
    top: 7px;
    background-color: #000;
}

/* Product Section 5 Custom Boxes */
.ps5-box {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    /* Stronger shadow */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #f0f0f0;
    /* Visible border */
    height: 100%;
    position: relative;
    overflow: hidden;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ps5-box:hover {
    transform: translateY(-7px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: var(--tp-theme-primary);
    /* Strong highlight */
}

.ps5-box-icon {
    width: 70px;
    height: 70px;
    background: rgba(var(--tp-theme-primary-rgb, 234, 178, 40), 0.1);
    color: var(--tp-theme-primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 25px;
    transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Fast Orange Strip Wipe Effect */
.ps5-box-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--tp-theme-primary);
    z-index: -1;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* Fast slide */
}

.ps5-box:hover .ps5-box-icon {
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(var(--tp-theme-primary-rgb, 234, 178, 40), 0.3);
}

.ps5-box:hover .ps5-box-icon::before {
    width: 100%;
}

.ps5-box-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #0e0e0e;
    transition: color 0.3s;
}

.ps5-box:hover .ps5-box-title {
    color: var(--tp-theme-primary);
}

.ps5-box-desc {
    color: #555;
    line-height: 1.7;
    font-size: 15px;
}

/* Home Content List Styling (Professional Modern) */
.home-content-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 0;
    margin: 35px 0;
    list-style: none;
}

.home-content-list ul li {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 12px 20px 12px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--tp-common-black);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* Custom Check Icon */
.home-content-list ul li::before {
    content: '\f00c';
    /* FontAwesome Check */
    font-family: var(--tp-ff-fontawesome);
    font-weight: 300;
    margin-right: 12px;
    color: var(--tp-theme-primary);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: rgba(var(--tp-theme-primary-rgb, 234, 178, 40), 0.08);
    border-radius: 50%;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* Hover Effects - Premium Feel */
.home-content-list ul li:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--tp-theme-primary-rgb, 234, 178, 40), 0.4);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.home-content-list ul li:hover::before {
    background: var(--tp-theme-primary);
    color: #ffffff;
    transform: scale(1.1);
}

/* --- Premium Process Area (Section 6 - Native Pinning) --- */
.premium-process-area {
    background: #fff;
    padding: 100px 0;
}

.pp-steps-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pp-step-item {
    padding: 25px 30px;
    border-radius: 20px;
    background: #f8f9fa;
    border: 1px solid #eee;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    align-items: flex-start;
    gap: 25px;
    position: relative;
    overflow: hidden;
}

.pp-step-item::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 0%;
    background: var(--tp-theme-primary, #fa2837);
    transition: height 0.4s ease;
}

.pp-step-item:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border-color: #ddd;
}

.pp-step-item.active-step {
    background: #fff;
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    transform: translateX(10px);
}

.pp-step-item.active-step::after {
    height: 60%;
}

.pp-step-number {
    font-size: 22px;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.1);
    margin-top: 2px;
    transition: all 0.3s ease;
}

.pp-step-item.active-step .pp-step-number {
    color: var(--tp-theme-primary, #fa2837);
}

.pp-step-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111;
}

.pp-step-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    /* Standard property */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.4s ease;
}

.pp-step-item.active-step .pp-step-desc {
    -webkit-line-clamp: 12;
    line-clamp: 12;
}

/* Using Library's Pinned Structure */
.pinned-scroll {
    position: relative;
}

.pp-media-frame {
    aspect-ratio: 16 / 9;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.12);
    background: #111;
    width: 100%;
}

.pp-media-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.pp-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pp-media-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.1));
    pointer-events: none;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .pp-step-item {
        padding: 20px;
        flex-direction: column;
        gap: 15px;
    }

    .pp-media-frame {
        position: relative !important;
        top: 0 !important;
    }
}

/* --- PREMIUM SERVICES GRID (Dark High-End Edition - Split Layout) --- */

.premium-services-section {
    background-color: #0e0e0e;
    /* Deep Black Background */
    color: #fff;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
}

/* Subtle background accent */
.premium-services-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

/* Grid Wrapper - Inside Col-8 */
.ps-grid-wrapper {
    display: grid;
    /* Since it's inside a col-8, let's use 2 columns mostly */
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.ps-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3/4;
    /* Cinematic Portrait */
    transform: translateZ(0);
    background: #1a1a1a;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.ps-item-inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

/* Media Area */
.ps-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ps-item-inner:hover .ps-media {
    transform: scale(1.1);
}

.ps-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    /* Slight dim for elegance */
    transition: opacity 0.5s ease;
}

.ps-item-inner:hover .ps-img {
    opacity: 1;
}

.ps-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 2;
    pointer-events: none;
}

/* Gradient Overlay */
.ps-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 3;
    transition: opacity 0.5s ease;
}

.ps-item-inner:hover .ps-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
}

/* Content Area */
.ps-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    z-index: 4;
    transition: transform 0.5s ease;
}

.ps-title {
    font-size: 2.2rem;
    color: #fff;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.1;
    transform: translateY(0);
    transition: all 0.5s ease;
}

.ps-item-inner:hover .ps-title {
    transform: translateY(-10px);
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.ps-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ps-item-inner:hover .ps-desc {
    height: auto;
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
}

/* Arrow Icon */
.ps-arrow {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transform: rotate(-45deg);
    transition: all 0.4s ease;
    z-index: 5;
}

.ps-item-inner:hover .ps-arrow {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: rotate(0deg) scale(1.1);
}

/* Header & Sidebar Content */
.ps-header-sticky {
    padding-left: 40px;
    /* Spacing from grid */
    text-align: left;
}

.ps-main-title {
    font-size: 5rem;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
}

.ps-main-desc {
    color: #ccc;
    /* Ensure description is visible white/grey */
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.7;
}

/* Button Custom */
.tp-btn-white-sm {
    display: inline-flex;
    align-items: center;
    padding: 15px 35px;
    background: #fff;
    color: #000;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.tp-btn-white-sm:hover {
    background: var(--tp-theme-primary);
    color: #fff;
    padding-right: 45px;
}

/* Responsive */
@media (max-width: 991px) {
    .ps-grid-wrapper {
        grid-template-columns: 1fr;
    }

    .ps-header-sticky {
        padding-left: 0;
        margin-bottom: 50px;
        position: static !important;
        text-align: center;
    }

    .ps-main-title {
        font-size: 2.4rem;
    }
}


/* Next Slide Preview Styles */
.slider-next-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.slider-next-preview:hover {
    transform: scale(1.05);
}

.preview-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.next-slide-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.slider-next-preview:hover .next-slide-thumb {
    transform: scale(1.1);
}

.play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.slider-next-preview:hover .play-overlay {
    background: rgba(0, 0, 0, 0.2);
}

.play-overlay i {
    color: #fff;
    font-size: 24px;
    opacity: 0.9;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.next-label {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    background: rgba(0, 0, 0, 0.5);
    padding: 3px 10px;
    border-radius: 20px;
}

/* Slider Video Icon Blinking Effect */
.slider-video-icon-wrap {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    /* Glassy background */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.slider-next-trigger:hover .slider-video-icon-wrap {
    background: var(--tp-theme-primary);
    border-color: var(--tp-theme-primary);
    transform: scale(1.1);
}

.video-blink-icon {
    font-size: 40px;
    color: #fff;
    animation: videoBlink 2s infinite ease-in-out;
}

@keyframes videoBlink {
    0% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.9);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    }
}

/* Season Toggle Icons */
.pp-season-toggle {
    position: absolute;
    bottom: -40px;
    right: 30%;
    display: flex;
    gap: 15px;
    z-index: 10;
    padding: 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.season-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    font-size: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.season-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.season-icon.active {
    background: var(--tp-theme-primary);
    color: #fff;
    transform: scale(1.1);
}

/* Adjust main image transition for smooth switching */
#pp-dynamic-image {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Slider Custom Navigation Buttons */
.slider-nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.slider-nav-btn:hover {
    background: #fff;
    color: var(--tp-theme-primary);
    transform: translateY(-3px);
    border-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Slider Custom Nav Container Styling */
.slider-custom-nav {
    background: rgb(232 176 9);
    backdrop-filter: blur(10px);
    padding: 8px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* --- PREMIUM CONTACT DESIGN UTILS --- */
.ct-hero-wrap:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

@keyframes ctFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.ct-card-icon {
    animation: ctFloat 4s ease-in-out infinite;
}

.slider-custom-nav .slider-nav-btn {
    border: none;
    background: transparent;
    width: 45px;
    /* Slightly smaller to fit container */
    height: 45px;
}


/* --- Home Content 4 (Premium Process) Revised Styles --- */

.pp-image-wrapper.has-toggles {
    overflow: hidden;
    position: relative;
}

.pp-season-overlay {
    position: absolute;
    top: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    /* Center vertically */
    background: #eab228;
    backdrop-filter: blur(10px);
    padding: 10px 20px;
    border-radius: 50px;
    /* Fully rounded pill shape */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateY(0);
    transition: all 0.3s ease;
}

.pp-season-overlay:hover {
    background: rgba(0, 0, 0, 0.6);
}

.season-label {
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.8;
}

.season-icon-round {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.season-icon-round:hover,
.season-icon-round.active {
    background: #fff;
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.pp-card-side {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 12px;
    transition: all 0.3s;
    background: #fff;
    aspect-ratio: 1 / 1;
    /* Make squares */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pp-card-side.pp-card-wide {
    aspect-ratio: 2.05 / 1;
    /* Rectangular when col-12 */
}

.pp-card-side:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-color: transparent;
}

.pp-card-desc {
    font-size: 13px !important;
    line-height: 1.4;
}

/* --- Cinematic Slider Styles --- */

/* Layout */
.cinematic-hero-area {
    position: relative;
    width: 100%;
    height: calc(100vh - 100px);
    min-height: 600px;
    margin-top: 100px;
    background-color: #000;
    overflow: hidden;
}

.cinematic-slider-unique,
.cinematic-slider-unique .swiper-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Swiper Slide - Let Swiper's fade manage opacity, don't override */
.cinematic-slider-unique .swiper-slide {
    width: 100%;
    height: 100%;
}

.cinematic-slider-unique .swiper-slide-active .hero-bg-media {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Media Elements */
.hero-bg-media {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hero-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    animation: zoomEffect 20s infinite alternate;
}

@keyframes zoomEffect {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

/* Overlay */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Content */
.hero-content-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    padding: 0 5%;
    pointer-events: none;
}

.hero-main-content {
    position: absolute;
    bottom: 12%;
    left: 5%;
    max-width: 800px;
    pointer-events: auto;
}

.hero-subtitle {
    font-size: 16px;

    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 10px;
    font-weight: 500;
    border-left: 3px solid #eab228;
    padding-left: 15px;
    display: inline-block;
}

.hero-title {
    font-family: 'Sequel Sans', sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 6vw, 100px);
    line-height: 0.9;
    letter-spacing: -3px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991px) {
    .hero-title {
        font-size: clamp(32px, 10vw, 56px);
        letter-spacing: -1px;
    }

    .hero-main-content {
        bottom: 15%;
        width: 90%;
    }
}

/* Buttons */
.hero-btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #fff;
    font-size: 14px;

    letter-spacing: 2px;
    font-weight: 600;
    transition: all 0.4s ease;
    text-decoration: none;
}

.hero-btn-explore:hover {
    background: #fff;
    color: #000;
    padding-right: 50px;
}

.hero-btn-explore .btn-icon {
    width: 30px;
    height: 30px;
    background: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.hero-btn-explore:hover .btn-icon {
    background: #000;
    color: #fff;
    transform: rotate(-45deg);
}

/* Nav */
.hero-nav-wrapper {
    position: absolute;
    bottom: 12%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
    pointer-events: auto;
    z-index: 12;
}

.hero-counter {
    font-size: 24px;
    color: #fff;
    font-weight: 300;
    font-family: monospace;
}

.hero-progress-bar {
    width: 2px;
    height: 150px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    border-radius: 2px;
}

.hero-progress-bar .progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: #fff;
    transition: height 0.3s linear;
}

.hero-nav-arrows {
    display: flex;
    gap: 10px;
}

.hero-arrow-btn {
    width: 60px;
    height: 60px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 20px;
}

.hero-arrow-btn:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

/* Mobile Responsive Overrides */
@media (max-width: 991px) {
    .cinematic-hero-area {
        height: 75vh !important;
        min-height: 480px !important;
        margin-top: 80px !important;
    }

    .hero-content-layer {
        display: block !important;
        position: absolute !important;
        bottom: 40px !important;
        top: auto !important;
        height: auto !important;
        padding: 0 15px !important;
        z-index: 20 !important;
    }

    .hero-main-content {
        position: relative !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
    }

    /* Subtitle Wrapper */
    .hero-main-content>div:nth-child(1) {
        margin-bottom: 8px !important;
    }

    /* Title Wrapper */
    .hero-main-content>div:nth-child(2) {
        margin-bottom: 20px !important;
    }

    /* Button Wrapper */
    .hero-main-content>div:nth-child(3) {
        margin-bottom: 0 !important;
    }

    /* Nav Wrapper - Row 3 (Bottom) */
    .hero-nav-wrapper {
        position: static !important;
        order: 20 !important;
        width: 100% !important;
        flex-direction: row !important;
        margin: 25px 0 0 0 !important;
        padding: 0 !important;
        gap: 10px !important;
        justify-content: flex-start !important;
        pointer-events: auto;
    }

    .hero-counter,
    .hero-progress-bar {
        display: none !important;
    }

    .hero-nav-arrows {
        gap: 10px !important;
    }

    .hero-title {
        font-size: clamp(32px, 10vw, 56px) !important;
        line-height: 0.9 !important;
        letter-spacing: -1px !important;
        white-space: normal !important;
        overflow: visible !important;
        display: block !important;
    }

    .hero-subtitle {
        font-size: 14px !important;
        padding-left: 10px !important;
        border-left: 2px solid #eab228 !important;
        letter-spacing: 2px !important;
        margin-bottom: 0 !important;
        display: block !important;
    }

    /* Discover Button - Normal */
    .hero-btn-explore {
        padding: 10px 25px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        width: auto !important;
        height: auto !important;
        min-height: 44px !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: none !important;
        font-size: 12px !important;
    }

    .hero-btn-explore .btn-text {
        display: inline-block !important;
    }

    .hero-btn-explore .btn-icon {
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        background: #eab228 !important;
        color: #000 !important;
        border-radius: 50% !important;
    }

    .hero-arrow-btn {
        width: 44px !important;
        height: 44px !important;
        font-size: 16px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
}

/* Mobile Config Button Styling */
.mobile-menu-config-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 30px 0 !important;
    padding: 12px 25px !important;
    background: #eab228 !important;
    color: #000 !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    height: auto !important;
    line-height: normal !important;
    border: none !important;
}

.mobile-menu-config-btn .cube-wrapper {
    margin-right: 15px !important;
    width: 22px !important;
    height: 22px !important;
}

.mobile-menu-config-btn .face {
    width: 22px !important;
    height: 22px !important;
    background: #000 !important;
    border: 1px solid #eab228 !important;
}

.mobile-menu-config-btn span {
    color: #000 !important;
}

/* Home Features (Content 1) Mobile Overrides — Marquee */
@media (max-width: 991px) {
    .hp-marquee-wrapper {
        margin-left: -15px !important;
        margin-right: -15px !important;
        mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
    }

    .hp-marquee-track {
        gap: 15px !important;
        animation-duration: 18s !important;
    }

    .hp-marquee-item {
        min-width: 240px !important;
        max-width: 280px !important;
    }

    .hp-feature-clean {
        display: flex !important;
        align-items: center !important;
        text-align: left !important;
        background: #f8f8f8 !important;
        padding: 20px 18px !important;
        border-radius: 14px !important;
        min-height: 100px;
        border-color: rgba(0, 0, 0, 0.04) !important;
    }

    .hp-icon-box {
        margin-bottom: 0 !important;
        margin-right: 15px !important;
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;
    }

    .hp-icon-box i {
        font-size: 24px !important;
        color: #000 !important;
    }

    .hp-icon-box img {
        width: 28px !important;
        height: 28px !important;
    }

    .hp-content-box {
        flex: 1;
    }

    .hp-title-clean {
        margin-bottom: 4px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em;
    }

    .hp-content-box p {
        font-size: 12px !important;
        line-height: 1.4 !important;
        opacity: 0.7;
    }
}

/* ============================================
   MOBILE HORIZONTAL SCROLL — applies only <992px.
   Desktop untouched.
   ============================================ */
@media (max-width: 991px) {

    /* Shared scroller visual */
    .mobile-hscroll-base,
    .ps-grid-wrapper,
    .pc1-grid,
    .h4-horizontal-container,
    .shop-scroll-row {
        -webkit-overflow-scrolling: touch;
    }

    .mobile-hscroll-base::-webkit-scrollbar,
    .ps-grid-wrapper::-webkit-scrollbar,
    .pc1-grid::-webkit-scrollbar,
    .h4-horizontal-container::-webkit-scrollbar,
    .shop-scroll-row::-webkit-scrollbar {
        display: none !important;
    }

    /* 1) HOME SERVICES — .ps-grid-wrapper : mobilde 2 kategori yanyana */
    .ps-grid-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        flex-wrap: initial !important;
        overflow-x: visible !important;
        gap: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 0 20px 0 !important;
        scroll-snap-type: none !important;
    }

    .ps-grid-wrapper>.ps-item {
        flex: initial !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* yarım genişlikteki kartlarda içerik/başlığı küçült */
    .ps-grid-wrapper .ps-content {
        padding: 16px 14px !important;
    }

    .ps-grid-wrapper .ps-title {
        font-size: 1.05rem !important;
        line-height: 1.15 !important;
    }

    .ps-grid-wrapper .ps-desc {
        display: none !important;
    }

    /* 2) PAGE CONTENT 1 — .pc1-grid */
    .pc1-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        gap: 15px !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding: 0 15px 20px 15px !important;
        scroll-snap-type: x mandatory;
    }

    .pc1-grid>.pc1-item {
        flex: 0 0 82% !important;
        max-width: 82% !important;
        width: 82% !important;
        scroll-snap-align: start;
        margin-bottom: 0 !important;
    }

    /* 3) HOME CONTENT 4 — .h4-horizontal-container (mobile) */
    .h4-horizontal-container {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding: 0 15px 20px 15px !important;
        width: 100% !important;
        gap: 15px !important;
        scroll-snap-type: x mandatory;
    }

    .h4-horizontal-container>.h4-card {
        width: 82% !important;
        flex: 0 0 82% !important;
        margin-bottom: 0 !important;
        scroll-snap-align: start;
    }

    /* 4) PRODUCT SECTION 9/10 — related products (.shop-scroll-row wrapper added in PHP) */
    .shop-scroll-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding: 0 15px 20px 15px !important;
        scroll-snap-type: x mandatory;
    }

    .shop-scroll-row>[class*="col-"] {
        flex: 0 0 75% !important;
        max-width: 75% !important;
        width: 75% !important;
        scroll-snap-align: start;
    }

    .shop-scroll-row>[class*="col-"] .shop-product-item {
        margin-bottom: 15px !important;
    }
}

@media (max-width: 991px) {
    .pp-porfolio-area.mobile-dark-bg {
        background-color: #0b0c10 !important;
        background-image: none !important;
    }

    .pp-porfolio-content {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .portfolio-swiper-mobile .swiper-wrapper {
        display: flex !important;
        /* Ensure they are flexed for sliding */
        flex-direction: row !important;
    }

    .pp-porfolio-subtitle {
        font-size: 2.4rem !important;
        letter-spacing: 2px !important;
        margin-bottom: 10px !important;
    }

    .pp-portfolio-description {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 30px !important;
    }
}

/* Mobile Portfolio Slider (Content 2) */
.portfolio-mobile-slider-wrap .swiper-pagination {
    position: relative !important;
    bottom: 0 !important;
    text-align: left !important;
}

.portfolio-mobile-slider-wrap .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.3) !important;
    opacity: 1 !important;
    width: 8px;
    height: 8px;
    transition: all 0.3s ease;
}

.portfolio-mobile-slider-wrap .swiper-pagination-bullet-active {
    background: var(--tp-theme-primary, #eab228) !important;
    width: 24px !important;
    border-radius: 4px !important;
}

.mobile-portfolio-card {
    background: rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.mobile-portfolio-card h3 {
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 12px !important;
}

.mobile-portfolio-text p {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.mobile-portfolio-img img {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
}

/* Mobile Service Slider (Content 3) */
.tp-service-area.mobile-light-bg {
    background-color: #f6f6f6 !important;
}

.service-swiper-mobile .swiper-pagination-bullet,
.h4-mobile-swiper .swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.15) !important;
}

.service-swiper-mobile .swiper-pagination-bullet-active,
.h4-mobile-swiper .swiper-pagination-bullet-active {
    background: var(--tp-theme-primary, #eab228) !important;
}

.mobile-service-card {
    background: #ffffff;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* Home Content 3 — Scrollable content inside mobile cards */
.hc3-scroll-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.hc3-scroll-content::-webkit-scrollbar {
    width: 3px;
}

.hc3-scroll-content::-webkit-scrollbar-track {
    background: transparent;
}

.hc3-scroll-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.hc3-scroll-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

.mobile-service-card h3 {
    color: #000 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

.mobile-service-text p {
    color: #444 !important;
    line-height: 1.6 !important;
}

.mobile-service-img img {
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

/* Mobile PS5-5 Slider (Product Section 5-5) */
@media (max-width: 991px) {
    .mobile-ps5-card {
        background: rgba(255, 255, 255, 0.05);
        /* Glass effect for dark theme */
        padding: 24px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
    }

    .ps5-5-swiper-mobile .swiper-slide {
        width: 88% !important;
        padding-right: 15px !important;
    }

    .ps5-main-content-mobile {
        padding: 0 15px;
    }
}

/* Mobile PS1-1 Slider (Product Section 1-1) */
@media (max-width: 991px) {
    .mobile-ps1-card {
        background: #ffffff;
        padding: 24px;
        border-radius: 24px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .ps1-1-swiper-mobile .swiper-slide {
        width: 88% !important;
        padding-right: 15px !important;
    }
}

/* Mobile MPS / CRM Slider (Product Section 2-2) */
@media (max-width: 991px) {
    .mobile-mps-card {
        background: #ffffff;
        padding: 24px;
        border-radius: 24px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .mps-swiper-mobile .swiper-slide {
        width: 88% !important;
        padding-right: 15px !important;
    }

    .mps-main-content-mobile {
        padding: 0 10px;
    }

    .container-mps {
        max-width: 100% !important;
        overflow: hidden;
    }
}

/* Mobile Process Slider (Product Section 6) */
@media (max-width: 991px) {
    .pp-main-title {
        font-size: 26px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: -1px !important;
        margin-bottom: 20px !important;
        font-weight: 800 !important;
    }

    .mobile-title-wrap {
        margin-bottom: 30px !important;
    }

    .mobile-process-card {
        background: #ffffff;
        padding: 24px;
        border-radius: 24px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .process-swiper-mobile .swiper-slide {
        width: 88% !important;
        padding-right: 15px !important;
    }

    .process-swiper-mobile .swiper-pagination-bullet-active {
        background: var(--tp-theme-primary, #eab228) !important;
    }
}

/* Product Main Features Mobile Slider (Content 6) */
@media (max-width: 991px) {
    .pm-features-list {
        flex-direction: row !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 15px !important;
        display: flex !important;
    }

    .pm-features-list::-webkit-scrollbar {
        display: none !important;
    }

    .feature-list-item {
        flex: 0 0 78% !important;
        max-width: 78% !important;
        scroll-snap-align: start;
        margin-right: 15px !important;
        padding: 24px !important;
        background: #ffffff !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        border-radius: 20px !important;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.03) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        height: auto !important;
    }

    .feature-list-item .flex-grow-1 {
        margin-left: 16px !important;
        margin-top: 0 !important;
    }

    .feature-list-item .feature-title {
        font-size: 14px !important;
        /* Reduced for mobile */
    }

    .feature-list-item .text-muted {
        font-size: 11px !important;
        /* Reduced for mobile */
        margin-top: 5px !important;
    }

    .feature-list-item .feature-icon-box {
        background: #f8f8f8 !important;
    }
}

/* Mobile Testimonial Slider Adjustments (Content 5) */
@media (max-width: 991px) {
    .shop-testimonial-navigation {
        position: static !important;
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
        margin-top: 12px !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }

    /* yorum ile butonlar arasındaki boşluğu daralt */
    .shop-testimonial-slider-wrap.mb-30 {
        margin-bottom: 0 !important;
    }

    .shop-testimonial-comment {
        margin-bottom: 10px !important;
    }

    .shop-testimonial-navigation span {
        position: static !important;
        width: 48px !important;
        height: 48px !important;
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        cursor: pointer !important;
    }

    .shop-testimonial-comment {
        font-size: 18px !important;
        margin-bottom: 20px !important;
        line-height: 1.5 !important;
        padding: 0 20px !important;
    }

    .shop-testimonial-name {
        margin-bottom: 0 !important;
    }
}

/* Mobile Gallery Slider (Content 4) */
@media (max-width: 991px) {
    .mg-portfolio-pin {
        position: static !important;
        margin-bottom: 30px !important;
    }

    .hp-gallery-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 15px !important;
    }

    .hp-gallery-row::-webkit-scrollbar {
        display: none !important;
    }

    .hp-gallery-row>div {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        scroll-snap-align: start;
        padding-right: 15px !important;
        margin-bottom: 0 !important;
    }

    .tp-portfolio-inner-tab-wrap .nav-link {
        font-size: 13px !important;
        padding: 8px 10px !important;

        border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }
}

/* Global Mobile Swiper Fix to Prevent Stacking */
@media (max-width: 991px) {
    .swiper:not(.cinematic-hero-slider) .swiper-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
    }

    .swiper-slide {
        flex-shrink: 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Override width for partial visibility sliders */
    .portfolio-swiper-mobile .swiper-slide,
    .service-swiper-mobile .swiper-slide {
        width: 85% !important;
        max-width: 85% !important;
    }
}


/* --- Home Services Light Theme Override --- */
.premium-services-section {
    background-color: #ffffff !important;
    color: #121212 !important;
}

.ps-main-title {
    color: #121212 !important;
}

.ps-main-desc {
    color: #555 !important;
}

.ps-main-desc p,
.ps-main-desc span {
    color: #555 !important;
}

/* Light Theme Button Override */
.ps-btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px !important;
    background: #121212 !important;
    color: #fff !important;
    border-radius: 50px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid #121212;
}

.ps-btn-dark:hover {
    background: #fff !important;
    color: #121212 !important;
}

/* --- COMPACT LIST & NESTED FIX --- */
/* Fix for nested lists breaking layout in descriptions */

.compact-list ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

/* Top Level Items */
.compact-list>ul>li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    /* Ensure flex doesn't break wrapping of nested UL */
    display: block !important;
}

/* Top Level Icon (Check) - DISABLED for vertical line design */
.compact-list>ul>li::before {
    display: none;
}

/* Handle p tags inside li to sit nicely with the icon */
.compact-list>ul>li>p {
    display: inline-block;
    margin: 0;
}

/* NESTED LISTS (The Fix) */
.compact-list li ul {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-left: 20px !important;
    display: block !important;
    width: 100%;
}

.compact-list li ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    font-size: 0.95em;
    color: #555;
    display: block !important;
    /* No flex for nested */
}

/* Nested List Marker (Dot or Dash) */
.compact-list li ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #ccc;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 9px;
    font-family: inherit;
    /* Reset font */
}

/* Remove check icon from nested items if it was inherited */
.compact-list li ul li::after {
    display: none;
}



.guillotine-table {
    display: flex;
    flex-direction: column;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.table-row {
    display: flex;
    border-bottom: 1px solid #efefef;
}

.table-row:last-child {
    border-bottom: none;
}

.table-header {
    flex: 1;
    background-color: #f4f4f4;
    padding: 15px;
    font-weight: 700;
    color: #2c3e50;
    border-right: 1px solid #dcdcdc;
}

.table-content {
    flex: 2;
    padding: 15px;
    color: #444;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .table-row {
        flex-direction: column;
    }

    .table-header {
        border-right: none;
        border-bottom: 1px solid #dcdcdc;
    }
}

/* --- Highlights Stage Caption Overlay --- */
.ph-stage-wrapper {
    position: relative;
    overflow: hidden;
    /* Ensure border radius matches if needed */
}

.ph-stage-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    opacity: 1;
    /* Changed from 0 to make it always visible */
    transform: translateY(0);
    /* Changed from 20px to make it always visible */
    transition: all 0.4s ease;
    z-index: 10;
    pointer-events: none;
    /* Let clicks pass through to the lightbox link */
    text-align: left;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* Show on hover of the wrapper OR when forced by JS */
.ph-stage-wrapper:hover .ph-stage-caption,
.ph-stage-caption.force-visible {
    opacity: 1;
    transform: translateY(0);
}

.ph-stage-caption h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.ph-stage-caption p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- Product Section 5 (Redesigned) --- */

/* --- Product Section 5 (Ultra-Premium Redesign) --- */

/* Main Section Wrapper */
.ps5-section {
    background: #ffffff;
    overflow: hidden;
    position: relative;
    /* Subtle background texture or gradient can be added here if desired */
}

/* 1. Main Title - Heroic Style */
.ps5-main-title {
    color: var(--tp-common-black);
    font-weight: 800;
    /* Extra bold */
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
    letter-spacing: -0.5px;
}

/* 2. Navigation Tabs - Modern Floating Pills */
.ps5-nav-wrapper {
    padding: 10px;
    background: rgba(244, 246, 248, 0.5);
    border-radius: 60px;
    backdrop-filter: blur(5px);
    display: inline-flex;
    flex-wrap: wrap;
    /* Allow wrapping */
    gap: 10px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ps5-tab-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 14px 35px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    z-index: 1;

    /* Layout logic for side-by-side */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    /* Grow to fill space but allow wrap */
    text-align: center;
    white-space: normal;
    /* Allow text to wrap if really long */
    min-width: max-content;
    /* Try to fit content */
    max-width: 100%;
}

@media (min-width: 992px) {
    .ps5-tab-btn {
        flex: 0 1 auto;
        /* On desktop, don't stretch too much if not needed */
        min-width: auto;
    }
}

.ps5-tab-btn:hover {
    color: var(--tp-theme-primary);
    background: rgba(255, 255, 255, 0.8);
}

.ps5-tab-btn.active {
    background: var(--tp-theme-primary);
    color: #fff;
    box-shadow: 0 10px 30px rgba(var(--tp-theme-primary-rgb), 0.4);
    transform: translateY(-2px);
}

/* 3. Content Layout */
.ps5-content-stage {
    min-height: 500px;
    /* Taller stage */
    perspective: 1000px;
}

/* Tab Pane Transitions - Cinematic Fade/Slide */
.ps5-tab-pane {
    display: none;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ps5-tab-pane.active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

/* Left Content Area */
.ps5-content-box {
    position: relative;
    z-index: 2;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
}

.ps5-content-decor {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 60px;
    height: 60px;
    border-top: 4px solid var(--tp-theme-primary);
    border-left: 4px solid var(--tp-theme-primary);
    opacity: 0.2;
    border-radius: 10px 0 0 0;
}

.ps5-content-inner {
    font-size: 19px;
    /* Slightly larger reading text */
    line-height: 1.8;
    color: #555;
    font-weight: 400;
}

.ps5-content-inner h3 {
    font-size: 32px;
    margin-bottom: 25px;
    color: #1a1a1a;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #1a1a1a, #555);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ps5-content-inner p {
    margin-bottom: 25px;
}

/* Custom list styling inside content */
.ps5-content-inner ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 15px;
}

.ps5-content-inner li {
    padding-left: 35px;
    position: relative;
    font-weight: 500;
    color: #333;
}

.ps5-content-inner li::before {
    content: '\f058';
    /* Solid circle check */
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--tp-theme-primary);
    font-size: 20px;
    filter: drop-shadow(0 4px 6px rgba(var(--tp-theme-primary-rgb), 0.3));
}

/* --- Visual Feast Media Composition --- */
.ps5-visual-composition {
    position: relative;
    padding: 20px;
    z-index: 1;
}

/* 1. Abstract Decor Plate (Back Layer) */
.ps5-decor-plate-back {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 80%;
    background: var(--tp-theme-primary);
    border-radius: 40px;
    transform: rotate(5deg);
    opacity: 0.1;
    z-index: -2;
    transition: all 0.5s ease;
}

/* 2. Decor Grid Pattern */
.ps5-decor-grid {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 150px;
    height: 150px;
    background-image: radial-gradient(#1a1a1a 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    opacity: 0.15;
    z-index: -2;
}

/* 3. Main Media Frame (The Portal) */
.ps5-media-frame {
    position: relative;
    border-radius: 30px;
    aspect-ratio: 16/9;
    background: #000;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
    /* Sit above decor */
    transform: none;
    /* No rotation */
}

/* Hover Effect - Subtle Scale Only */
.ps5-visual-composition:hover .ps5-media-frame {
    transform: scale(1.02);
    box-shadow: 0 50px 100px rgba(var(--tp-theme-primary-rgb), 0.15);
}

/* Animated Gradient Border */
.ps5-media-frame::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 32px;
    background: conic-gradient(from 0deg,
            transparent 0%,
            var(--tp-theme-primary) 10%,
            transparent 20%,
            transparent 50%,
            var(--tp-theme-primary) 60%,
            transparent 70%);
    z-index: -1;
    animation: ps5BorderRotate 6s linear infinite;
    opacity: 0.8;
}

@keyframes ps5BorderRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Reflective Glare Effect */
.ps5-frame-glare {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 50%);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: overlay;
    animation: ps5GlareMove 8s ease-in-out infinite alternate;
}

@keyframes ps5GlareMove {
    0% {
        transform: translate(-10%, -10%) rotate(45deg);
        opacity: 0.5;
    }

    100% {
        transform: translate(10%, 10%) rotate(45deg);
        opacity: 0.8;
    }
}

/* Inner container to clip the content cleanly inside the border */
.ps5-video-container,
.ps5-image-container {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    /* Slightly smaller for internal radius */
    overflow: hidden;
    position: relative;
    background: #000;
    z-index: 1;
    /* Sits above the gradient border background */
}

/* Media Scaling */
.ps5-video,
.ps5-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01);
    transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
}

.ps5-media-frame:hover .ps5-img,
.ps5-media-frame:hover .ps5-video {
    transform: scale(1.08);
    filter: brightness(1.1);
    /* Subtle brightness boost on hover */
}

/* Responsive */
@media (max-width: 991px) {
    .ps5-content-stage {
        min-height: auto;
    }

    .ps5-nav-wrapper {
        display: flex;
        overflow-x: auto;
        border-radius: 10px;
        background: transparent;
        box-shadow: none;
        padding-bottom: 20px;
    }

    .ps5-tab-btn {
        flex-shrink: 0;
        background: #000;
    }

    .ps5-content-box {
        padding: 0;
        text-align: left;
        margin-bottom: 30px;
    }

    .ps5-media-frame {
        aspect-ratio: 16/9;
        margin-top: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
}

/* 5. Separator Line */
.ps5-section-separator {
    width: 100%;
    margin-top: 80px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ps5-sep-line {
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%,
            var(--tp-theme-primary) 50%,
            rgba(0, 0, 0, 0) 100%);
    position: relative;
    opacity: 0.6;
}

.ps5-sep-line::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0) 0%,
            #000 50%,
            rgba(0, 0, 0, 0) 100%);
    opacity: 0.4;
    filter: blur(2px);
}

/* Deleted duplicate high-line block */

/* --- Extracted from product-section-6.php --- */
/* Local scoped styles for this component hover effect */
.pp-card.active-hover {
    border-color: var(--tp-theme-primary);
    /* Varsa tema rengi */
    transform: translateX(10px);
}

/* --- Extracted from product-section-5.php --- */
:root {
    --ps5-primary: #121212;
    --ps5-secondary: #666;
    --ps5-accent: var(--tp-theme-primary);
    /* Uses theme color */
    --ps5-border: #e5e5e5;
    --ps5-bg-hover: #f8f9fa;
}

.ps5-wrapper {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.ps5-feature-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Added gap between items */
    border-right: none;
}

.ps5-feature-item {
    position: relative;
    padding: 30px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #f0f0f0;
    /* Subtle border around each item */
    border-radius: 12px;
    /* Rounded corners */
    background: #fff;
    overflow: hidden;
}

.ps5-feature-item:first-child {
    border-top: 1px solid #f0f0f0;
}

.ps5-feature-item:hover {
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Hover shadow */
    transform: translateY(-2px);
}

.ps5-feature-item.active {
    background-color: #f8f9fa;
    /* Lighter active background */
    border-color: var(--ps5-accent);
    /* Accent border */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* Active Indicator Line - Removed in favor of border color */
.ps5-feature-item::before {
    display: none;
}

/* Content Layout */
.ps5-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ps5-item-index {
    font-family: var(--tp-ff-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: #e0e0e0;
    margin-right: 20px;
    transition: color 0.3s;
}

.ps5-feature-item.active .ps5-item-index,
.ps5-feature-item:hover .ps5-item-index {
    color: var(--ps5-accent);
}

.ps5-item-title {
    flex: 1;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ps5-primary);
    margin: 0;
    transition: color 0.3s;
}

/* Accordion Body */
.ps5-item-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    padding-left: 50px;
    /* Align with text */
}

.ps5-feature-item.active .ps5-item-body {
    max-height: 500px;
    /* Arbitrary large height */
    opacity: 1;
    margin-top: 20px;
}

.ps5-desc {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--ps5-secondary);
}

/* Right Side: Sticky Visuals */
.ps5-visual-col {
    position: relative;
    height: 600px;
    /* Fixed height container */
}

.ps5-sticky-wrapper {
    position: sticky;
    top: 100px;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.ps5-visual-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

.ps5-visual-item.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}

.ps5-visual-item img,
.ps5-visual-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay for text readability on images if needed, mostly stylistic here */
.ps5-visual-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
    z-index: 3;
}

/* Arrow Icon Rotation */
.ps5-arrow-icon {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
    color: #ccc;
}

.ps5-feature-item.active .ps5-arrow-icon {
    transform: rotate(90deg);
    color: var(--ps5-accent);
}

@media (max-width: 991px) {
    .ps5-visual-col {
        height: 400px;
        margin-bottom: 40px;
    }

    .ps5-feature-item {
        padding: 20px;
    }
}

/* --- Extracted from product-section-5-5.php --- */
.ps5-5-wrapper {
    position: relative;
    width: 100%;
    background-color: #0f0f0f;
    /* Premium Dark Background */
    padding: 80px 0;
    overflow: hidden;
}

.ps5-5-header {
    position: relative;
    margin-bottom: 50px;
    z-index: 2;
    color: #fff;
}

.ps5-5-title {
    font-size: 3rem;
    font-weight: 300;
    letter-spacing: -1px;
    margin-bottom: 20px;
    color: #fff;
}

.ps5-5-wrapper .ps5-main-content-mobile,
.ps5-5-wrapper .ps5-main-content-mobile p {
    color: #fff !important;
}

/* THE DECK (Desktop) */
.ps5-5-deck {
    display: flex;
    width: 100%;
    height: 600px;
    /* Fixed height for the gallery */
    gap: 0;
    padding: 0 5vw;
    /* Breathing room */
}

.ps5-5-card {
    position: relative;
    flex: 1;
    /* All items start equal (or small) */
    height: 100%;
    margin: 0 2px;
    /* Tiny gap */
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s ease;
    background: #1a1a1a;
}

/* Active State Expansion */
.ps5-5-card.active {
    flex: 4;
    /* Grow significantly */
}

/* Inactive items dimming */
.ps5-5-deck:hover .ps5-5-card:not(:hover):not(.active) {
    opacity: 0.7;
}

/* MEDIA LAYER */
.ps5-5-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ps5-5-media::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 2;
    transition: opacity 0.5s;
    opacity: 0.6;
}

.ps5-5-card.active .ps5-5-media::after {
    opacity: 0.3;
    /* Brighten up when active */
}

.ps5-5-media img,
.ps5-5-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    filter: grayscale(100%);
    transform: scale(1.1);
}

.ps5-5-card.active .ps5-5-media img,
.ps5-5-card.active .ps5-5-media video {
    filter: grayscale(0%);
    transform: scale(1);
}

/* CONTENT LAYERS */
.ps5-5-content {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 10;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-delay: 0.1s;
    background: #00000069;
    padding: 50px;
}

.ps5-5-card.active .ps5-5-content {
    opacity: 1;
    transform: translateY(0);
}

.ps5-5-num {
    font-family: var(--tp-ff-heading);
    font-size: 4rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 5;
    line-height: 1;
    transition: all 0.5s;
}

.ps5-5-card.active .ps5-5-num {
    color: rgba(255, 255, 255, 0.8);
    font-size: 2rem;
}

/* Vertical Title for Inactive State */
.ps5-5-vertical-title {
    position: absolute;
    left: 50%;
    bottom: 50px;
    /* Sabit başlangıç noktası: Alttan 50px yukarıda başla */

    /* Metnin solundan (başından) döndür, böylece uzunluk etkilemez */
    transform-origin: left center;

    /* -90 derece döndür ve kendi yüksekliğinin yarısı kadar sola kaydır (ortalamak için) */
    transform: rotate(-90deg) translateY(-50%);

    white-space: nowrap;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 2px;
    z-index: 5;
    opacity: 1;
    transition: opacity 0.3s;
    text-align: left;
    margin: 0;
    padding: 0;
}

.ps5-5-card.active .ps5-5-vertical-title {
    opacity: 0;
    /* Hide vertical title when active */
}

.ps5-5-card-title {
    font-size: 2.5rem;
    font-weight: 400;
    color: #fff !important;
    /* Force white */
    margin-bottom: 15px;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    /* Add shadow for readability */
}

.mm5-left-chevron {
    font-size: 9px;
    opacity: 0.2;
    transition: transform 0.2s, opacity 0.2s;
}

.mm5-left-item:hover .mm5-left-chevron {
    opacity: 0.8;
    transform: translateX(3px);
}

/* ── SAĞ ALAN: Grid ── */
.mm5-right {
    flex: 1;
    display: grid;
    gap: 20px 24px;
    padding: 24px 28px;
    align-content: start;
    background: #fff;
}

.mm5-right--1col {
    grid-template-columns: repeat(1, 1fr);
}

.mm5-right--2col {
    grid-template-columns: repeat(2, 1fr);
}

.mm5-right--3col {
    grid-template-columns: repeat(3, 1fr);
}

.mm5-right--4col {
    grid-template-columns: repeat(4, 1fr);
}

.mm5-right-col {
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    padding-right: 18px;
}

.mm5-right-col:last-child {
    border-right: none;
    padding-right: 0;
}

/* ── PREMIUM MEGA MENU TOOLTIP ── */
.tp-mega-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.3s;
    will-change: transform;
}

.tp-mega-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.tp-mega-tooltip-inner {
    width: 320px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[data-theme="dark"] .tp-mega-tooltip-inner {
    background: rgba(20, 22, 26, 0.85);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.tp-mega-tooltip-img-wrap {
    width: 100%;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
}

.tp-mega-tooltip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tp-mega-tooltip-content {
    padding: 2px 4px;
}

.tp-mega-tooltip-title {
    font-size: 16px;
    font-weight: 700;
    color: #111;
    margin-bottom: 6px;
    line-height: 1.2;
}

[data-theme="dark"] .tp-mega-tooltip-title {
    color: #fff;
}

.tp-mega-tooltip-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[data-theme="dark"] .tp-mega-tooltip-desc {
    color: rgba(255, 255, 255, 0.6);
}

.ps5-5-card-desc {
    font-size: 1rem;
    color: #fff !important;
    /* Force white */
    max-width: 500px;
    line-height: 1.6;
    /* Removed line-clamp restriction */
    overflow: visible;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.ps5-5-card-desc * {
    color: #fff !important;
}

/* MOBILE RESPONSIVE: Stack them */
@media (max-width: 991px) {
    .ps5-5-deck {
        flex-direction: column;
        height: auto;
        padding: 0 20px;
        gap: 20px;
    }

    .ps5-5-card {
        height: 400px;
        width: 100%;
        border-radius: 12px;
        flex: none;
        /* Disable flex scaling on mobile */
    }

    .ps5-5-card.active {
        flex: none;
        height: 500px;
    }

    .ps5-5-vertical-title {
        display: none;
    }

    .ps5-5-content {
        opacity: 1;
        transform: translateY(0);
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .ps5-5-card-title {
        font-size: 1.8rem;
    }
}

/* --- Extracted from product-section-1.php --- */
/* Stage Wrapper: Maintain aspect ratio or height */
.ps1-stage-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 420px;
    margin: 0 auto;
    border-radius: 30px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    overflow: hidden;
}

.ps1-stage-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 1;
}

.ps1-stage-image.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.ps1-stage-image img,
.ps1-stage-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
}

.ps1-stage-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.ps1-stage-wrapper:hover .ps1-stage-image video {
    transform: scale(1.02);
}

.ps1-row {
    transition: all 0.4s ease;
}

.ps1-visual-col {
    transition: all 0.4s ease;
    opacity: 1;
    visibility: visible;
}

.ps1-list-col {
    transition: all 0.4s ease;
}

/* Full Width Mode Styles */
.ps1-row.ps1-full-mode .ps1-visual-col {
    display: none;
}

.ps1-row.ps1-full-mode .ps1-list-col {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0 !important;
}

/* --- Extracted from product-section-1-1.php --- */
/* Dynamic Layout Styles for Media Toggling */
.ps1-1-card {
    display: flex;
    gap: 40px;
    transition: all 0.3s ease;
}

.ps1-1-content {
    flex: 1;
    transition: all 0.3s ease;
}

.ps1-1-image-box {
    flex: 0 0 600px;
    width: 600px;
    height: 500px;
    position: relative;
    border-radius: 30px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

/* Full Width State */
.ps1-1-card.full-width .ps1-1-image-box {
    display: none !important;
}

.ps1-1-card.full-width .ps1-1-content {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Media Elements */
#ps1-1-main-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 22px;
    border: 2px solid rgba(0, 0, 0, 0.03);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ps1-1-image-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

.ps1-1-image-box:hover #ps1-1-main-video {
    transform: scale(1.02);
}

/* --- Extracted from product-main.php --- */
/* --- MAIN HERO WRAPPER --- */
.pm-hero-wrapper {
    position: relative;
    padding-top: 140px;
    padding-bottom: 80px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #f8f9fa 0%, #fff 60%);
    overflow: hidden;
}

/* Background Typography */
.pm-bg-text {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.02);
    line-height: 0.8;
    font-family: var(--tp-ff-heading);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
}

/* FULLSCREEN OVERLAY */
.pm-fs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 99999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.pm-fs-overlay.active {
    display: block;
    opacity: 1;
}

.pm-fs-close {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 100;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    color: #111;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.pm-fs-close:hover {
    background: #111;
    color: #fff;
    transform: rotate(90deg);
}

/* Content (Text) */
.pm-content-box {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-bottom: 50px;
}

.pm-subtitle {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(234, 178, 40, 0.1);
    color: var(--tp-theme-primary);
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.pm-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #111;
    letter-spacing: -1px;
}


/* ═══════════════════════════════════════════════════════════
   PREMIUM MEGA MENU & TOOLTIP SYSTEM (CLEAN VERSION)
   ═══════════════════════════════════════════════════════════ */

/* 1. Positioning & Structure */
.tp-main-menu nav ul li.has-mega-menu .tp-megamenu {
    width: 1240px !important;
    max-width: 95vw;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 0 !important;
    border-radius: 12px;
    overflow: hidden;
}

.mm5-body {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    min-height: 280px;
    background: #fff;
    align-items: stretch;
}

.mm5-left {
    width: 260px;
    background: #17191d;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.mm5-left-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 700;
    color: #eab228 !important;
    text-decoration: none;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mm5-left-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mm5-left-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff !important;
    transition: all 0.2s ease;
}

.mm5-left-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff !important;
    padding-left: 14px;
}

.mm5-right {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 28px 32px;
    align-items: flex-start;
    justify-content: space-between;
}

.mm5-right-col {
    flex: 1;
    min-width: 200px;
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    padding-right: 15px;
}

.mm5-right-col:last-child {
    border-right: none;
    padding-right: 0;
}

/* 2. Premium Vertical Tooltip (Floating) */
.tp-mega-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
    will-change: transform;
}

.tp-mega-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
}

.tp-mega-tooltip-inner {
    width: 340px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 12px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.2);
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
    overflow: hidden;
}

.tp-mega-tooltip-img-wrap {
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #f0f0f0;
}

.tp-mega-tooltip-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp-mega-tooltip-content {
    flex: 1;
    padding: 5px;
}

.tp-mega-tooltip-title {
    font-size: 19px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.tp-mega-tooltip-desc {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 3. Smart Header (Hide on Scroll Down / Show on Scroll Up) */
.tp-header-area.header-sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), background 0.3s ease !important;
    padding: 15px 0;
    animation: none !important;
}

.tp-header-area.header-sticky.header-is-hidden {
    transform: translateY(-110%);
}

.tp-header-area.header-sticky .tp-main-menu ul li a {
    color: #000;
}

/* Dropdown hover-bridge: nav ile dropdown arasında render farkı olsa bile hover kopmasın */
.tp-main-menu nav ul li .submenu {
    margin-top: 0;
    top: 100% !important;
    border-top: 12px solid transparent;
    background-clip: padding-box;
    padding-top: 12px !important;
}

.tp-main-menu nav ul li .submenu::before {
    display: none;
}

/* Header translateY animasyonu sırasında dropdown açılmasın (yanlış konumda render'ı önler) */
.tp-header-area.header-sticky.header-is-hidden .submenu,
.tp-header-area.header-sticky.header-is-hidden .tp-megamenu {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: scale(1, 0) !important;
}

/* Adjacent mega menus can overlap while the cursor moves fast between top items. */
.tp-main-menu nav > ul > li.has-mega-menu.is-mega-active > .tp-megamenu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) scale(1) !important;
}

.tp-main-menu nav > ul > li.has-mega-menu.is-mega-suppressed > .tp-megamenu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) scale(1, 0.98) !important;
    transition: none !important;
}

.tp-header-area.header-sticky.header-is-hidden .tp-main-menu nav > ul > li.has-mega-menu.is-mega-active > .tp-megamenu,
.tp-header-area.header-sticky.header-is-hidden .tp-main-menu nav > ul > li.has-mega-menu.is-mega-suppressed > .tp-megamenu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(-50%) scale(1, 0) !important;
}

@media (max-width: 1199px) {
    .mm5-right {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .mm5-left {
        width: 220px;
    }
}

@media (max-width: 991px) {
    .mm5-body {
        flex-direction: column;
    }

    .mm5-left {
        width: 100%;
    }

    .mm5-right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .tp-mega-tooltip {
        display: none !important;
    }
}


/* 6. Laptop & Small Desktop Optimization (Notebook Rescue) */
@media only screen and (max-width: 1499px) {

    /* Menü elemanlarını küçült ve sıkıştır */
    .tp-main-menu nav ul li a {
        font-size: 14px !important;
        padding: 5px 10px !important;
    }

    .tp-header-logo img {
        width: 220px !important;
        margin-left: 30px !important;
        margin-top: 0 !important;
    }

    /* Mega menüyü ekrana sığdır */
    .tp-main-menu nav ul li.has-mega-menu .tp-megamenu {
        width: 95vw !important;
        max-width: 1200px !important;
    }

    /* Genel konteyner genişliğini daraltarak taşmaları engelle */
    .container {
        max-width: 1140px !important;
    }

    /* Tooltip boyutunu biraz küçült (Notebook için) */
    .tp-mega-tooltip-inner {
        width: 330px;
    }

    .tp-mega-tooltip-img-wrap {
        height: 180px;
    }
}


/* ═══════════════════════════════════════════════════════════
   3D VIEWER & PRODUCT HERO STYLES (RESTORED & CLEAN)
   ═══════════════════════════════════════════════════════════ */

.pm-hero-wrapper {
    position: relative;
    padding: 60px 0 100px;
    background: #fff;
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    align-items: center;
}

.pm-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25vw;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.02);
    z-index: 0;
    pointer-events: none;
    letter-spacing: -0.05em;
    line-height: 1;
}

.pm-content-box {
    position: relative;
    z-index: 2;
    margin-bottom: 50px;
    text-align: center;
}

.pm-desc {
    font-size: 18px;
    line-height: 1.7;
    color: #555;
    max-width: 800px;
    margin: 0 auto 30px;
}

/* 3D Viewer Container */
.pm-viewer-container {
    position: relative;
    z-index: 2;
    height: 550px;
    background: #f8f8f82e;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.pm-viewer-container model-viewer {
    width: 100%;
    height: 100%;
    outline: none;
    --poster-color: transparent;
}

/* Control UI */
.pm-controls-wrapper {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 8px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pm-view-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
}

.pm-view-btn:hover {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: translateY(-3px);
}

.pm-config-btn {
    background: var(--tp-theme-primary, #eab228);
    color: #000 !important;
    border-radius: 5px !important;
    padding: 0 15px;
    height: 38px;
    width: max-content;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border: 1px solid var(--tp-theme-primary, #eab228);
}

.pm-config-btn:hover {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    transform: translateY(-3px);
}

.pm-ar-btn {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 10;
    background: #111;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.pm-ar-btn:hover {
    background: var(--tp-theme-primary);
    color: #000;
    transform: translateY(-3px);
}

/* Glass Proposal Form */
.pm-form-wrapper {
    position: relative;
    z-index: 2;
}

.pm-glass-form {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 32px;
    padding: 40px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
}

.pm-form-title {
    font-size: 24px;
    font-weight: 800;
    color: #111;
    margin-bottom: 8px;
}

.pm-form-subtitle {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
}

.pm-input-group {
    position: relative;
    margin-bottom: 18px;
}

.pm-input {
    width: 100%;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #eee;
    border-radius: 14px;
    font-size: 15px;
    transition: all 0.3s;
}

.pm-input:focus {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03);
}

.pm-input-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
}

.pm-submit-btn {
    width: 100%;
    padding: 16px;
    background: #111;
    color: #fff;
    font-weight: 700;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.pm-submit-btn:hover {
    background: var(--tp-theme-primary);
    color: #000;
    transform: translateY(-3px);
}

/* Fullscreen Overlay */
.pm-fs-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pm-fs-overlay.active {
    display: block;
}

.pm-fs-close {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10001;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.pm-fs-close:hover {
    background: #000;
    color: #fff;
    transform: rotate(90deg);
}


/* ═══════════════════════════════════════════════════════════
   PRODUCT CTA SECTION (RESTORED)
   ═══════════════════════════════════════════════════════════ */
.prod-cta-section {
    position: relative;
    padding: 120px 0;
    background: #000;
    overflow: hidden;
    margin-top: 80px;
}

.prod-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.4;
    pointer-events: none;
}

.prod-cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prod-cta-content-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 850px;
    margin: 0 auto;
}

.prod-cta-title {
    font-size: clamp(35px, 5vw, 65px);
    font-weight: 800;
    color: #fff !important;
    margin-bottom: 20px;
    line-height: 1.1;
    letter-spacing: -2px;
}

.prod-cta-desc {
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 40px;
}

.prod-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 50px;
    background: var(--tp-theme-primary, #eab228);
    color: #000 !important;
    border-radius: 50px;
    font-weight: 700;

    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    text-decoration: none;
}

.prod-cta-btn:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    color: #000 !important;
}

/* --- REFINED MOBILE NAVIGATION SYSTEM --- */

/* Parent Toggle behavior adjustments */
.tp-offcanvas-menu nav ul li.has-dropdown>a,
.tp-offcanvas-menu nav ul li.menu-item-has-children>a {
    position: relative;
    display: block;
    padding-right: 50px !important;
    /* Make room for the button */
}

/* New Plus/Minus button styling for all levels */
.tp-offcanvas-menu nav ul li button.tp-menu-close {
    position: absolute;
    right: 0;
    top: 5px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: transparent;
    border: none;
    color: inherit;
    z-index: 10;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tp-offcanvas-menu nav ul li button.tp-menu-close i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.tp-offcanvas-menu nav ul li.active>button.tp-menu-close i {
    transform: rotate(45deg);
    /* Plus to X/Minus */
}

/* Indent nested levels */
.tp-offcanvas-menu nav ul li .tp-submenu {
    display: none;
    padding-left: 20px;
    margin-bottom: 5px;
}

.tp-offcanvas-menu nav ul li .tp-submenu .tp-submenu {
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/* Link Styles within Submenu */
.tp-offcanvas-menu nav ul li .tp-submenu li a {
    font-size: 16px !important;
    padding: 10px 0 !important;
    text-transform: none !important;
    opacity: 0.85;
}

.tp-offcanvas-menu nav ul li .tp-submenu li a:hover {
    opacity: 1;
    color: var(--tp-theme-primary, #eab228) !important;
}

/* Hide desktop-specific elements in mobile menu */
.tp-offcanvas-menu nav ul li .mm5-left-chevron,
.tp-offcanvas-menu nav ul li i.fa-arrow-up-right,
.tp-offcanvas-menu nav ul li .mm5-left-item-name+i,
.tp-offcanvas-menu nav ul li i.fa-chevron-right {
    display: none !important;
}

/* Ensure no images/descriptions leak in */
.tp-offcanvas-menu nav ul li [data-img],
.tp-offcanvas-menu nav ul li [data-desc] {
    background-image: none !important;
}

@media (max-width: 768px) {
    .tp-offcanvas-menu nav ul li a {
        font-size: 18px !important;
        font-weight: 600 !important;
    }
}

/* Home Content 2 - Portfolio Item Layout Fix */
.pp-porfolio-content ul li.js-portfolio-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
}

.pp-porfolio-content ul li.js-portfolio-item .portfolio-content-inline {
    width: 50% !important;
    max-width: 50% !important;
}

.pp-porfolio-content ul li .portfolio-faux-link {
    font-family: var(--tp-ff-sequel-semi-bold);
    font-size: 30px;
    line-height: 1;
    letter-spacing: -0.05em;
    color: rgba(255, 255, 255, 0.3);
    cursor: default;
    display: inline-block;
    transition: color 0.3s ease;
}

.pp-porfolio-content ul li.active .portfolio-faux-link,
.pp-porfolio-content ul li .portfolio-faux-link:hover {
    color: var(--tp-common-white);
}

.tp-service-title .service-faux-link {
    opacity: 0.3;
    color: inherit;
    display: inline-block;
}

.tp-service-title:hover .service-faux-link {
    opacity: 1;
}

.text-uppercase {
    text-transform: inherit !important;
}

/* ================================================================
   MOBILE FIXES — consolidated, applies only below 768px.
   Desktop (>= 768px) untouched.
   ================================================================ */
@media (max-width: 767px) {

    /* --- A. Oversized utility paddings shrink on phones --- */
    .pt-100,
    .pt-110,
    .pt-115,
    .pt-120,
    .pt-130,
    .pt-140,
    .pt-145,
    .pt-150,
    .pt-160,
    .pt-175 {
        padding-top: 60px !important;
    }

    .pb-100,
    .pb-110,
    .pb-115,
    .pb-120,
    .pb-130,
    .pb-140,
    .pb-145,
    .pb-150,
    .pb-160 {
        padding-bottom: 50px !important;
    }

    .pb-75,
    .pb-80,
    .pb-85,
    .pb-90,
    .pb-95 {
        padding-bottom: 40px !important;
    }

    .pt-60,
    .pt-65,
    .pt-70,
    .pt-75,
    .pt-80,
    .pt-85,
    .pt-90,
    .pt-95 {
        padding-top: 40px !important;
    }

    /* --- B. Oversized directional margins would overflow small viewports --- */
    .ml-130,
    .ml-120,
    .ml-110,
    .ml-100,
    .ml-90,
    .ml-80,
    .ml-70,
    .ml-60,
    .mr-130,
    .mr-120,
    .mr-110,
    .mr-100,
    .mr-90,
    .mr-80,
    .mr-70,
    .mr-60,
    .pl-130,
    .pl-120,
    .pl-110,
    .pl-100,
    .pl-90,
    .pl-80,
    .pl-70,
    .pl-60,
    .pr-130,
    .pr-120,
    .pr-110,
    .pr-100,
    .pr-90,
    .pr-80,
    .pr-70,
    .pr-60 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .ml-50,
    .mr-50,
    .pl-50,
    .pr-50 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* --- C. Oversized bottom margins --- */
    .mb-80,
    .mb-75,
    .mb-70,
    .mb-65,
    .mb-60,
    .mb-55,
    .mb-50 {
        margin-bottom: 30px !important;
    }

    .mb-45,
    .mb-40,
    .mb-35 {
        margin-bottom: 25px !important;
    }

    /* --- D. Oversized utility font-sizes cap on mobile --- */
    .fs-100 {
        font-size: 44px !important;
        line-height: 1.1 !important;
    }

    .fs-80,
    .fs-90 {
        font-size: 40px !important;
        line-height: 1.1 !important;
    }

    .fs-72,
    .fs-75 {
        font-size: 36px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.5px !important;
    }

    .fs-60,
    .fs-65 {
        font-size: 32px !important;
        line-height: 1.15 !important;
    }

    .fs-50,
    .fs-55 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    /* --- E. Large Bootstrap gutters --- */
    .gx-60,
    .gx-50,
    .gx-40 {
        --bs-gutter-x: 1.5rem;
    }

    /* --- F. Component-specific adjustments --- */

    /* Blog detail title */
    .tp-blog-details-ptb.pt-110 {
        padding-top: 40px !important;
    }

    .tp-blog-grid-area.pt-175 {
        padding-top: 80px !important;
    }

    /* home-faq / product-faq — remove large left margin on accordion wrapper */
    .tp-service-details-faq-two.ml-130,
    .tp-service-details-faq.ml-130 {
        margin-left: 0 !important;
    }

    /* home-gallery — tab nav two-column layout becomes single column */
    .tp-portfolio-inner-tab-wrap .row.w-100>[class*="col-6"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 !important;
    }

    .tp-portfolio-inner-tab-wrap .nav-link.text-end {
        text-align: left !important;
    }

    /* home-products — card thumb slightly shorter */
    .mp-portfolio-thumb {
        height: 280px !important;
    }

    /* product-main hero padding */
    .pm-hero-wrapper {
        padding-top: 80px !important;
        padding-bottom: 60px !important;
    }

    .pm-bg-text {
        font-size: 18vw !important;
        opacity: 0.05 !important;
    }

    /* page-content-2/3 — force mobile section padding */
    .pc2-section {
        padding: 60px 0 !important;
    }

    .pc3-section {
        padding: 60px 0 !important;
    }

    .pc3-visual-stage {
        padding: 0 !important;
    }

    .pc3-img-wrap {
        height: 300px !important;
    }

    /* page-main hero */
    .pm-hero-section .container {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* product-cover — model-viewer responsive */
    .viewer-container {
        height: 420px !important;
    }

    .viewer-container model-viewer {
        height: 100% !important;
    }

    .config-panel {
        padding: 15px !important;
    }

    .camera-controls,
    .view-presets {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .view-presets .preset-btn {
        font-size: 11px !important;
        padding: 8px 10px !important;
    }

    /* product-header — prevent extra-tall hero on small phones */
    .ih-media-frame {
        height: 520px !important;
    }

    .ih-premium-hero {
        padding: 105px 0 40px !important;
    }

    .ih-title {
        font-size: clamp(28px, 9vw, 44px) !important;
    }

    .ih-action-btn {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* crm-section (product-section-2) title */
    .crm-title-wrapper.fs-60,
    .crm-crazy-section .fs-60 {
        font-size: 28px !important;
    }

    /* testimonials / faq areas — tighter padding */
    .tp-testimonial-area.pb-130 {
        padding-bottom: 50px !important;
    }

    .home-testimonial-section {
        padding-top: 45px !important;
    }

    .tp-faq-area.pb-130 {
        padding-bottom: 50px !important;
    }

    /* Generic container — smaller side gutter for breathing room */
    .container,
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Prevent any raw <img> from overflowing viewport */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Prevent horizontal scroll caused by negative margins or oversized absolutes */
    body {
        overflow-x: hidden;
    }

    /* Clamp very large hero titles set via inline style */
    .pm-title[style*="clamp(40px"] {
        font-size: clamp(24px, 8vw, 36px) !important;
    }

    /* home-gallery item margins */
    .mg-portfolio-item.mb-55 {
        margin-bottom: 25px !important;
    }

    /* Shop testimonial comment text shrinks */
    .shop-testimonial-comment {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .shop-testimonial-slider-wrap {
        padding: 0 !important;
    }

    /* Blog detail content */
    .blog-detail-content,
    .postbox-area .tp-pd-2-step-title {
        font-size: 24px !important;
    }

    /* ih-scroll-indicator */
    .ih-scroll-indicator {
        margin-top: 20px !important;
    }

    .scroll-dot {
        height: 30px !important;
    }
}

/* Very small phones (<=420px) — extra tightening */
@media (max-width: 420px) {

    .fs-72,
    .fs-75 {
        font-size: 30px !important;
    }

    .fs-60,
    .fs-65 {
        font-size: 26px !important;
    }

    .ih-media-frame {
        height: 440px !important;
    }

    .ih-action-row {
        gap: 10px !important;
    }

    .pc3-img-wrap {
        height: 240px !important;
    }

    .mp-portfolio-thumb {
        height: 240px !important;
    }

    .viewer-container {
        height: 340px !important;
    }
}

/* Home Content 3 - Service Title Font Size */
.tp-service-title {
    font-size: 47px !important;
    line-height: 1.1;
    display: inline-block;
}

@media (max-width: 1200px) {
    .tp-service-title {
        font-size: 35px !important;
    }
}

@media (max-width: 768px) {
    .tp-service-title {
        font-size: 22px !important;
    }
}


/* Gallery Dropdown Styles */
.tp-gallery-dropdown-wrap {
    margin-bottom: 20px;
}

.tp-gallery-dropdown {
    position: relative;
    margin-bottom: 15px;
}

.gallery-drop-btn {
    background: #fff;
    border: 1px solid #eee;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #111;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.gallery-drop-btn:hover,
.gallery-drop-btn:focus {
    border-color: #ddd;
    background: #f9f9f9;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.tp-gallery-dropdown .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    padding: 8px;
    margin-top: 8px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
}

.tp-gallery-dropdown .dropdown-item {
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 14px;
    color: #444;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.tp-gallery-dropdown .dropdown-item:hover,
.tp-gallery-dropdown .dropdown-item.active {
    background: #f5f5f5;
    color: #000;
}

.tp-gallery-dropdown .dropdown-item.active {
    font-weight: 600;
}

.gallery-reset-btn {
    border-radius: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px !important;
    padding: 15px !important;
}


/* Fix for Gallery Dropdown Double Arrow and Opening */
.gallery-drop-btn.dropdown-toggle::after {
    display: none !important;
    /* Bootstrap'in kendi okunu gizle */
}

.tp-gallery-dropdown .dropdown-menu {
    z-index: 9999 !important;
    /* Menü her zaman üstte kalsın */
    display: none;
}

.tp-gallery-dropdown .dropdown-menu.show {
    display: block;
    animation: fadeInDrop 0.3s ease-out;
}

@keyframes fadeInDrop {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Gallery Title Mobile Fix - Mobilde basliklari 16px yapar */
@media (max-width: 991px) {
    .cs-portfolio-title {
        font-size: 27px !important;
    }
}

/* ==========================================================================
   Premium Pro Swipe Indicator (Mobile)
   ========================================================================== */
.premium-swipe-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    position: relative;
    z-index: 100;
}

/* Base Rail */
.premium-swipe-indicator {
    position: relative;
    width: 60px;
    height: 1px;
}

/* Sliding Marker & Hand */
.premium-swipe-marker {
    width: 25px;
    height: 3px;
    position: absolute;
    top: -1px;
    left: 0;
    animation: premiumSwipeSlide 1.5s ease-in-out infinite;
    will-change: transform;
}

.premium-swipe-marker i {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%) rotate(-15deg);
    font-size: 18px;
}

/* Themes */
/* Light Theme: For light backgrounds (Uses Primary/Dark colors) */
.swipe-light .premium-swipe-indicator {
    background: rgba(0, 0, 0, 0.15);
}

.swipe-light .premium-swipe-marker {
    background: #000;
}

.swipe-light .premium-swipe-marker i {
    color: #000;
}

/* Dark Theme: For dark backgrounds (Uses White colors) */
.swipe-dark .premium-swipe-indicator {
    background: rgba(255, 255, 255, 0.2);
}

.swipe-dark .premium-swipe-marker {
    background: #fff;
}

.swipe-dark .premium-swipe-marker i {
    color: #fff;
}

/* Animation: Right to Left */
@keyframes premiumSwipeSlide {
    0% {
        transform: translateX(60px);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateX(-20px);
        opacity: 0;
    }
}

/* Positioning Helper for Product Sections */
@media (max-width: 991px) {
    .is-product-swipe {
        position: absolute !important;
        top: -90px !important;
        right: 20px !important;
        width: auto !important;
    }
}

/* Global Mobile H2 Optimization for All Components (Matching product-section-3.php) */
@media (max-width: 991px) {

    h2.ca-section-title,
    h2.h5-main-title,
    h2.ih-section-title,
    h2.mosaic-title,
    h2.pc1-title,
    h2.pc2-title,
    h2.pc3-title,
    h2.pcta-title,
    h2.pg-mag-title,
    h2.pm-title,
    h2.prod-cta-title,
    h2.ps1-1-title,
    h2.ps1-cat-title,
    h2.ps3-box-title,
    h2.ps5-5-title,
    h2.sec33-title,
    h2.tp-section-title,
    h2.pp-main-title,
    h2.crm-title-wrapper,
    .mobile-title-wrap h2,
    .mobile-title-wrap .pp-main-title,
    .mobile-title-wrap .tp-section-title {
        font-size: 2.4rem !important;
        line-height: 1.2 !important;
    }
}

/* ==========================================================================
   PREMIUM CORPORATE FLOATING WIDGETS
   Accessibility, Cookie Settings, Back to Top - Unified Vertical Stack
   ========================================================================== */

:root {
    --f-widget-size: 54px;
    --f-widget-gap: 12px;
    --f-widget-right: 30px;
    --f-btt-bottom: 30px;
    /* Dynamic offsets managed via JS or default inheritance */
    --f-cookie-bottom: 30px;
    --f-access-bottom: 96px;
}

/* Base Widget Transitions & Style */
.back-to-top-wrapper,
.cc-change-btn,
.tp-access-widget {
    position: fixed !important;
    right: var(--f-widget-right) !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 99999 !important;
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--f-widget-size) !important;
    height: var(--f-widget-size) !important;
}

/* 1. Back to Top */
.back-to-top-wrapper {
    bottom: -80px !important;
    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
}

.back-to-top-wrapper.back-to-top-btn-show {
    bottom: var(--f-btt-bottom) !important;
    opacity: 1;
    visibility: visible;
}

.back-to-top-btn {
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
    color: var(--tp-theme-primary, #eab228) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.back-to-top-btn svg {
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.3s ease;
}

.back-to-top-btn:hover {
    background: var(--tp-theme-primary, #eab228) !important;
    color: #000 !important;
    border-color: var(--tp-theme-primary, #eab228) !important;
}

.back-to-top-btn:hover svg {
    transform: translateY(-3px);
}

/* 2. Cookie Preferences (Corporate Shield) */
.cc-change-btn {
    bottom: var(--f-cookie-bottom) !important;
    background: #000 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    font-size: 0 !important;
    cursor: pointer;
}

.cc-change-btn::before {
    content: '\f3ed' !important;
    /* fa-shield-check (Corporate Security) */
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    color: var(--tp-theme-primary, #eab228) !important;
}

.cc-change-btn:hover {
    background: var(--tp-theme-primary, #eab228) !important;
    border-color: var(--tp-theme-primary, #eab228) !important;
}

.cc-change-btn:hover::before {
    color: #000 !important;
}

/* 3. Accessibility Widget (Universal Access) */
.tp-access-widget {
    bottom: var(--f-access-bottom) !important;
}

.tp-access-toggle {
    width: 100% !important;
    height: 100% !important;
    background: #000 !important;
    color: var(--tp-theme-primary, #eab228) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.tp-access-toggle i {
    font-size: 22px !important;
    color: var(--tp-theme-primary, #eab228) !important;
}

.tp-access-toggle:hover {
    background: var(--tp-theme-primary, #eab228) !important;
    color: #000 !important;
    border-color: var(--tp-theme-primary, #eab228) !important;
    transform: scale(1.05) !important;
}

.tp-access-toggle:hover i {
    color: #000 !important;
}

/* Accessibility Panel Fix */
.tp-access-panel {
    right: 0 !important;
    left: auto !important;
    bottom: 70px !important;
    width: 300px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2) !important;
    transform-origin: bottom right;
}

/* Common Hover Lifting Animation */
.cc-change-btn:hover,
.tp-access-widget:hover,
.back-to-top-wrapper:hover {
    transform: translateY(-5px) !important;
}

.cc-change-btn span {
    display: none !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    :root {
        --f-widget-size: 46px;
        --f-widget-gap: 10px;
        --f-widget-right: 20px;
        --f-btt-bottom: 20px;
    }

    .tp-access-panel {
        width: calc(100vw - 40px) !important;
        right: 0 !important;
        bottom: 60px !important;
    }
}

/* Mobile Header 3D Button */
.tp-header-3d-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: transparent !important;
    transition: transform 0.3s ease;
}

.tp-header-3d-mobile .cube-wrapper {
    width: 20px;
    height: 20px;
    perspective: 1000px;
}

.tp-header-3d-mobile .face {
    background: transparent !important;
    border: 1.2px solid #000 !important;
    width: 20px;
    height: 20px;
}

.tp-header-3d-mobile .front {
    transform: translateZ(10px);
}

.tp-header-3d-mobile .back {
    transform: rotateY(180deg) translateZ(10px);
}

.tp-header-3d-mobile .left {
    transform: rotateY(-90deg) translateZ(10px);
}

.tp-header-3d-mobile .right {
    transform: rotateY(90deg) translateZ(10px);
}

.tp-header-3d-mobile .top {
    transform: rotateX(90deg) translateZ(10px);
}

.tp-header-3d-mobile .bottom {
    transform: rotateX(-90deg) translateZ(10px);
}

.tp-header-3d-mobile:hover {
    transform: scale(1.1);
}

.tp-header-3d-mobile:hover .face {
    border-color: var(--tp-theme-primary, #eab228) !important;
}

/* Page section dark hero header: only before sticky state */
.tp-header-area.section-dark-header:not(.header-sticky) .tp-header-logo .logo-1 {
    display: none;
}

.tp-header-area.section-dark-header:not(.header-sticky) .tp-header-logo .logo-2 {
    display: block;
}

.tp-header-area.section-dark-header:not(.header-sticky) .tp-main-menu nav > ul > li > a,
.tp-header-area.section-dark-header:not(.header-sticky) .tp-header-search-btn,
.tp-header-area.section-dark-header:not(.header-sticky) .tp-menu-bar span {
    color: #fff;
}

.tp-header-area.section-dark-header:not(.header-sticky) .tp-menu-bar span {
    background: #fff;
}

.tp-header-area.section-dark-header:not(.header-sticky) .tp-main-menu nav > ul > li:hover > a {
    color: #000;
    background: #fff;
}

/* Home inline component styles moved out of PHP */
.hp-features-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.feature-card-item {
    min-height: 190px;
    padding: 28px 22px 24px;
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-card-item:hover {
    transform: translateY(-6px);
}

.feature-card-item .feature-icon-box {
    width: 68px;
    height: 68px;
    margin: 0 auto 22px;
    background: #f4f4f4;
    border-radius: 16px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.feature-card-item .feature-i {
    font-size: 2rem;
    color: #111;
    transition: color 0.3s ease, transform 0.3s ease;
}

.feature-card-item .feature-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.feature-card-item .feature-title {
    margin: 0 0 9px;
    font-size: 1.08rem;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: #111;
}

.feature-card-item .feature-description {
    font-size: 14px;
    line-height: 1.45;
    color: #6d6d6d;
}

.feature-card-item:hover .feature-icon-box {
    background: #000;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
}

.feature-card-item:hover .feature-i {
    color: #fff;
    transform: scale(1.08);
}

.feature-card-item:hover .feature-img {
    filter: brightness(0) invert(1);
    transform: scale(1.08);
}

.feature-card-item:hover .feature-title {
    color: var(--tp-theme-primary, #000) !important;
}

@media (max-width: 1199px) {
    .hp-features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .feature-card-item {
        padding: 24px 18px 22px;
    }
}

@media (max-width: 991px) {
    .hp-features-mask {
        overflow: hidden;
    }

    .hp-features-grid {
        width: max-content;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(230px, 72vw);
        gap: 18px;
        animation: hpMobileMarquee 20s linear infinite;
        will-change: transform;
    }

    .hp-features-grid:hover {
        animation-play-state: paused;
    }

    .feature-card-item {
        min-height: 170px;
        padding: 24px 18px 20px;
    }

    @keyframes hpMobileMarquee {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-100% + 92vw)); }
    }
}

@media (min-width: 992px) {
    #service .tp-service-img-wrapper {
        position: relative;
        top: -42px;
    }
}

@media (max-width: 991px) {
    #service {
        padding-bottom: 55px;
    }

    .service-swiper-mobile .hc3-mobile-pagination {
        position: static;
        margin-top: 14px;
        line-height: 1;
    }

    .service-swiper-mobile,
    .service-swiper-mobile .swiper-wrapper,
    .service-swiper-mobile .swiper-slide {
        height: auto !important;
    }

    .service-swiper-mobile .swiper-wrapper {
        align-items: flex-start;
    }

    .service-swiper-mobile .hc3-scroll-content {
        min-height: 0;
        max-height: 190px;
        overflow-y: auto;
        padding-right: 8px;
        -webkit-overflow-scrolling: touch;
    }

    .service-swiper-mobile .mobile-service-img {
        flex-shrink: 0;
    }
}

.h4-horizontal-scroll-area {
    width: 100%;
    background: #fff;
}

.h4-horizontal-wrap {
    overflow: hidden;
    position: relative;
    padding: 100px 0;
}

.h4-horizontal-container {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: 40px;
    padding: 0 5vw;
    will-change: transform;
}

.h4-card {
    width: 450px;
    flex-shrink: 0;
}

.h4-process-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 40px;
    overflow: hidden;
    height: 100%;
    transition: all 0.4s ease;
}

.h4-process-item:hover {
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}

.h4-hover-scale {
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.h4-process-item:hover .h4-hover-scale {
    transform: scale(1.08);
}

@media (max-width: 991px) {
    .h4-horizontal-container {
        flex-wrap: wrap;
        width: 100%;
        padding: 0 15px;
    }

    .h4-card {
        width: 100%;
        margin-bottom: 30px;
    }

    .h4-horizontal-wrap {
        padding: 40px 0;
    }

    .h4-root-section {
        padding-bottom: 55px;
    }

    .h4-mobile-swiper .h4-mobile-pagination {
        position: static;
        margin-top: 14px;
        line-height: 1;
    }

    .h4-mobile-swiper,
    .h4-mobile-swiper .swiper-wrapper,
    .h4-mobile-swiper .swiper-slide {
        height: auto !important;
    }

    .h4-mobile-swiper .swiper-wrapper {
        align-items: flex-start;
    }

    .h4-mobile-swiper .swiper-slide > div {
        height: auto !important;
    }
}

.mp-portfolio-item:hover .secondary-cat-img {
    opacity: 1 !important;
}

.mp-portfolio-item:hover .primary-cat-img {
    opacity: 0;
}

.transition-500 { transition: opacity 0.5s ease; }
.object-fit-cover { object-fit: cover; }
.p-relative { position: relative; }
.p-absolute { position: absolute; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.h-100 { height: 100%; }

.hp-products-row {
    display: flex;
    flex-wrap: wrap;
}

.hp-product-col {
    min-width: 20% !important;
    max-width: 20% !important;
    flex: 0 0 20% !important;
}

@media (max-width: 1200px) {
    .hp-product-col {
        min-width: 33.333% !important;
        max-width: 33.333% !important;
        flex: 0 0 33.333% !important;
    }
}

@media (max-width: 991px) {
    .hp-products-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px;
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 15px !important;
    }

    .hp-products-row::-webkit-scrollbar {
        display: none !important;
    }

    .hp-product-col {
        min-width: 75% !important;
        max-width: 75% !important;
        flex: 0 0 75% !important;
        scroll-snap-align: start;
        padding-right: 15px !important;
    }

    .mp-portfolio-thumb {
        height: 320px !important;
    }

    .mp-portfolio-title {
        font-size: 14px !important;
    }
}

.hp-products-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
}

.hp-products-pagination .hp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    cursor: pointer;
}

.hp-products-pagination .hp-dot.active {
    background: var(--tp-theme-primary, #eab228);
    width: 24px;
    border-radius: 4px;
}

.home-gallery-title {
    margin-bottom: 30px;
    color: #121212;
    font-size: clamp(38px, 4.8vw, 66px);
    line-height: 1.02;
    letter-spacing: 0;
    font-family: var(--tp-ff-sequel-bold-head);
}

.mg-portfolio-area .cs-portfolio-title {
    font-size: clamp(20px, 1.7vw, 28px);
    line-height: 1.18;
    letter-spacing: 0;
}

.mg-portfolio-area .cs-portfolio-title .tp-title-text {
    font-size: inherit;
    line-height: inherit;
}

.premium-services-section .ps-grid-wrapper {
    padding-top: 34px;
}

@media (max-width: 767px) {
    .premium-services-section .ps-grid-wrapper {
        padding-top: 22px;
    }

    .premium-services-section .ps-title {
        font-size: 1.35rem;
        line-height: 1.15;
    }
}

/* Home content 5 styles moved out of PHP */
.h5-art-section {
        position: relative;
        padding: 135px 0;
        background:
            linear-gradient(90deg, rgba(15, 15, 15, 0.035) 1px, transparent 1px),
            linear-gradient(180deg, #ffffff 0%, #f7f3ec 100%);
        background-size: 80px 80px, 100% 100%;
        overflow: hidden;
        --h5-accent: #ff5b00;
        --h5-ink: #121212;
        --h5-muted: #626262;
    }

    .h5-stage-container {
        position: relative;
        z-index: 1;
    }

    .h5-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
        gap: clamp(42px, 5vw, 76px);
        align-items: center;
    }

    .h5-media-shell {
        position: relative;
        width: 100%;
        max-width: 780px;
        margin: 0;
        padding: 10px;
        border: 1px solid rgba(18, 18, 18, 0.1);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 24px 60px rgba(18, 18, 18, 0.08);
    }

    .h5-media-shell::before {
        display: none;
    }

    .h5-media-shell::after {
        display: none;
    }

    .h5-media-shell-video {
        max-width: 820px;
    }

    .h5-media-frame {
        position: relative;
        z-index: 1;
        aspect-ratio: 4 / 3;
        min-height: 0;
        border-radius: 8px;
        overflow: hidden;
        background: #151515;
        box-shadow: none;
        isolation: isolate;
    }

    .h5-media-shell-video .h5-media-frame {
        aspect-ratio: 4 / 3;
    }

    .h5-media-frame::before,
    .h5-media-frame::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 2;
    }

    .h5-media-frame::before {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, transparent 34%);
        mix-blend-mode: screen;
    }

    .h5-media-frame::after {
        border: 1px solid rgba(255, 255, 255, 0.26);
        border-radius: 8px;
        box-shadow: inset 0 -120px 120px rgba(0, 0, 0, 0.2);
    }

    .h5-media-content {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.045);
        filter: saturate(0.96) contrast(1.02);
        transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 900ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    .h5-media-shell:hover .h5-media-content {
        transform: scale(1);
        filter: saturate(1.04) contrast(1.05);
    }

    .h5-media-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: rgba(255, 255, 255, 0.92);
        font-size: clamp(42px, 7vw, 82px);
        font-weight: 800;
        letter-spacing: 0;
        font-family: var(--tp-ff-sequel-bold-head);
        background:
            linear-gradient(135deg, rgba(255, 91, 0, 0.32), transparent 48%),
            #141414;
    }

    .h5-content-box {
        max-width: 560px;
    }

    .h5-pre-title {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
        color: var(--h5-accent);
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 2.4px;
        text-transform: uppercase;
    }

    .h5-pre-title::before {
        content: '';
        width: 46px;
        height: 2px;
        background: currentColor;
    }

    .h5-main-title {
        margin-bottom: 30px;
        color: var(--h5-ink);
        font-size: clamp(38px, 4.8vw, 66px);
        line-height: 1.02;
        letter-spacing: 0;
        font-family: var(--tp-ff-sequel-bold-head);
    }

    .h5-description {
        max-width: 510px;
        color: var(--h5-muted);
        font-size: 18px;
        line-height: 1.75;
    }

    .h5-description :last-child {
        margin-bottom: 0;
    }

    @media (max-width: 991px) {
        .h5-art-section {
            padding: 90px 0;
        }

        .h5-grid {
            grid-template-columns: 1fr;
            gap: 45px;
        }

        .h5-media-shell {
            max-width: 100%;
            margin: 0 auto;
        }

        .h5-media-frame {
            min-height: 360px;
        }

        .h5-media-shell-video {
            max-width: 100%;
        }

        .h5-media-shell-video .h5-media-frame {
            min-height: 0;
            aspect-ratio: 4 / 3;
        }

        .h5-content-box {
            max-width: none;
        }
    }

    @media (max-width: 575px) {
        .h5-art-section {
            padding: 70px 0;
        }

        .h5-media-shell {
            padding: 10px;
        }

        .h5-media-frame {
            min-height: 300px;
        }

        .h5-media-shell-video .h5-media-frame {
            min-height: 0;
        }

    }

    @media (prefers-reduced-motion: reduce) {
        .h5-media-content {
            transition: none;
            transform: none;
        }
    }