:root {
    --font-main: 'Outfit', sans-serif;
    --color-bg: #000000;
    /* Deep black background for better contrast */
    --color-text: #ffffff;
    --color-text-dim: rgba(255, 255, 255, 0.65);
    --color-accent: #c48b60;
    /* Copper/Orange tone */

    /* Liquid Glass Variables */
    --glass-bg: rgba(60, 60, 60, 0.35);
    /* Darker, more "Control Center" like */
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-blur: 35px;
    /* Heavy blur */
    --glass-radius: 32px;
    /* iOS Squircle-ish */
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);

    --padding-x: 5%;
    --max-width: 1400px;
}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-200px * 7));
        /* Move by half the total width */
    }
}

/* Social Media (Interactive Star) Widget */
.interactive-star {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.interactive-star img {
    width: 20px;
    height: auto;
    /* filter removed to show original colors */
}

.interactive-star:hover {
    transform: scale(1.1);
}

.social-links {
    position: absolute;
    bottom: 50px;
    /* Move up slightly above the X icon */
    right: 50%;
    transform: translateX(50%) translateY(20px);
    /* Center horizontally relative to star */
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    align-items: center;
}

.interactive-star:hover .social-links,
.interactive-star.active-social .social-links,
.social-links:hover {
    opacity: 1;
    transform: translateX(50%) translateY(0);
    pointer-events: auto;
}

.social-link {
    width: 32px;
    /* Reduced from 40px to be more proportional to the 20px icon */
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    font-size: 1rem;
    transition: transform 0.2s;
    backdrop-filter: blur(5px);
}

.social-link:hover {
    transform: scale(1.1);
}

.social-link.whatsapp {
    background: #25D366;
}

.social-link.phone {
    background: #007bff;
}

.social-link.instagram {
    background: #C13584;
}

/* Team Carousel Styles */
.team-carousel-section {
    padding: 60px 0;
    text-align: center;
    position: relative;
    z-index: 10;
}

.carousel-title {
    color: white;
    margin-bottom: 40px;
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 2px;
}

.team-carousel-container {
    width: 100%;
    height: 500px;
    /* Increased to prevent clipping */
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    /* Mask removed to prevent clipping/fading of edges */
    /* mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); */
    /* -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); */
}

.team-track {
    display: flex;
    gap: 40px;
    padding: 0 50%;
    /* Allow first and last items to center */
    /* Width will be dynamic or managed by JS scroll */
    transition: transform 0.1s linear;
    /* Changed to linear for smoother dragging/scrolling if needed, or controlled via JS */
    align-items: center;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    width: 100%;
}

.team-track::-webkit-scrollbar {
    display: none;
}

.team-carousel-card {
    flex: 0 0 200px;
    /* Fixed width cards */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.5s ease;
    opacity: 0.5;
    transform: scale(0.8);
    position: relative;
}

.team-carousel-card.active {
    opacity: 1;
    transform: scale(1.2);
    z-index: 2;
}

.carousel-photo-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.carousel-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-info {
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 200px;
}

.team-carousel-card.active .carousel-info {
    opacity: 1;
    transform: translateY(0);
}

.carousel-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 5px;
}

.carousel-role {
    font-size: 0.9rem;
    color: var(--color-accent);
}

/* Usage Areas Section (Bento Grid) */
.usage-areas-section {
    padding: 60px 0;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: 40px;
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.bento-grid {
    display: grid;
    /* 3 Columns: Grid template adjusted for better aspect ratios with text */
    grid-template-columns: 1.5fr 1fr 1fr;
    /* Rows auto to fit content */
    grid-template-rows: auto auto;
    gap: 20px;
    width: 100%;
}

.bento-card {
    position: relative;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 450px;
    /* Increased height for text */
    display: flex;
    flex-direction: column;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.bento-card.large-card {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    min-height: 920px;
    /* Spans 2 rows + gap */
}

/* Specific Card Positions based on grid order in HTML:
   A (Large) -> Row 1-2, Col 1
   B (Yacht) -> Row 1, Col 2
   C (RV)    -> Row 1, Col 3
   D (Pro)   -> Row 2, Col 2-3 (Span 2) OR 
   Wait, plan was:
   Row 1: Large (1), Yacht (2), RV (3) -> This makes 3 cols.
   Row 2: Large (continues), Pro (2), Outdoor (3) -> Logic check.
   
   Grid template: 2fr 1fr 1fr.
   Item 1 (Large): grid-row 1 / span 2.
   Item 2 (Yacht): auto placement -> Row 1, Col 2.
   Item 3 (RV): auto placement -> Row 1, Col 3.
   Item 4 (Pro): auto placement -> Row 2, Col 2.
   Item 5 (Outdoor): auto placement -> Row 2, Col 3.
*/
.bento-card.pro {
    grid-column: 2 / 4;
    /* Make pro wide like in reference image? 
                             Reference image: Large Left, 4 small/med on right.
                             Ref image: Left large. Right top 2 small. Right bottom 2 small.
                             Correct logic:
                             Col 1: Large
                             Col 2: Yacht (top left), Pro (bottom left)
                             Col 3: RV (top right), Outdoor (bottom right)
                             
                             Correction: 
                             Grid Comlumns: 2fr 1fr 1fr.
                             Rows: 1fr 1fr.
                             
                             Large: Col 1 / span 1, Row 1 / span 2.
                             Yacht: Col 2, Row 1.
                             RV: Col 3, Row 1.
                             Pro: Col 2 / span 2 (Wide bottom)? Or just Col 2 Row 2?
                             Ref image shows:
                             Row 1 Right: Yacht, RV (2 items side by side)
                             Row 2 Right: Pro (Wide), Outdoor (Wide)? No.
                             Ref image:
                             Left: Housing (Tall)
                             Right:
                               Top: Yacht | RV
                               Middle: Pro (Wide)
                               Bottom: Outdoor (Wide)
                             
                             Okay, so right side has 3 rows or specific height.
                             Let's assume standard Bento 3-col grid is easier:
                             Large Left (span 2 rows).
                             Right Top 1, Right Top 2.
                             Right Bottom 1, Right Bottom 2.
                             
                             Current CSS (2fr 1fr 1fr) is good for:
                             Large (Col 1, Row 1-2)
                             Yacht (Col 2, Row 1)
                             RV (Col 3, Row 1)
                             Pro (Col 2, Row 2) -> If I want Pro wide, I need to adjust.
                             Outdoor (Col 3, Row 2).
                             
                             Let's stick to standard 2x2 on the right for clean symmetry unless User specifically wants "Pro" wide.
                             The provided text has A, B, C, D, E.
                             Ref image has 5 items.
                             Let's stick to the 2fr 1fr 1fr plan. It works perfectly for 5 items.
                             */
}

/* Overlay Gradient - Make it darker for readability */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.1) 100%);
    padding: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Align content to bottom */
}

.card-header {
    margin-bottom: 15px;
}

.card-cat {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--color-text-dim);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.card-content {
    margin-top: auto;
}

.card-desc {
    font-size: 0.95rem;
    color: #ddd;
    line-height: 1.5;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* Limit lines if too long */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hide footer icons/text as requested "remove English terms" and focus on text */
.card-footer {
    display: none;
}

.card-footer i {
    font-size: 1.1rem;
}

/* Advantage Box (Only for Large Card usually, or all if needed) */
.advantage-box {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-top: 15px;
}

.adv-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.advantage-box p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

/* Specific sizing overrides if needed */


/* If Pro is wide, Outdoor needs a place. Row 3? 
   No, let's stick to 2x2 on right side.
   D and E on bottom.
*/
.bento-card.pro {
    grid-column: auto;
}

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

    .bento-card.large-card {
        grid-column: 1 / 3;
        /* Top full width */
        grid-row: 1;
        min-height: 500px;
    }

    .bento-card {
        min-height: 500px;
    }
}

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

    .bento-card.large-card {
        grid-column: 1;
        min-height: 500px;
    }
}

/* Company Page Specific Styles */
.company-container {
    padding: 120px 10%;
    max-width: var(--max-width, 1400px);
    margin: 0 auto;
    color: white;
}

.page-title {
    text-align: center;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    letter-spacing: -1px;
    line-height: 1.2;
}

.company-sections {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.glass-panel-text {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 50px;
    color: var(--color-text-dim);
    line-height: 1.8;
    text-align: left;
    transition: transform 0.3s;
}

.glass-panel-text:hover {
    background: rgba(80, 80, 80, 0.45);
    transform: translateY(-5px);
}

.glass-panel-text h3 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.company-intro {
    font-size: 1.25rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    /* Subtle difference */
    margin-bottom: 40px;
    color: #fff;
}

.company-slogan {
    margin-top: 60px;
    text-align: center;
}

.company-slogan h2 {
    font-size: 2.5rem;
    font-weight: 300;
    color: #fff;
    letter-spacing: 3px;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .page-title {
        font-size: 2.5rem;
    }

    .glass-panel-text {
        padding: 30px;
    }

    .company-slogan h2 {
        font-size: 1.8rem;
    }
}

/* Porcelain Section */
.porcelain-section {
    padding: 60px 0;
    width: 100%;
    /* Allow wider content for large items */
    max-width: 1400px;
    margin: 0 auto;
}

.porcelain-container {
    display: grid;
    /* Fixed width columns to match request */
    grid-template-columns: repeat(4, 220px);
    justify-content: center;
    gap: 20px;
}

.porcelain-item {
    width: 220px;
    height: 640px;
    /* Exact requested 640px */
    overflow: hidden;
    border-radius: 12px;
    position: relative;
}

.porcelain-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.porcelain-item:hover img {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1200px) {
    .porcelain-container {
        grid-template-columns: repeat(2, 220px);
    }
}

@media (max-width: 768px) {
    .porcelain-grid {
        grid-template-columns: 1fr;
        /* Single column on generic large screens if needed */
        width: 551px;
        /* Center single stack */
        margin: 0 auto;
    }

    .porcelain-item {
        /* Maintain size on mobile if strictly requested, or scale? User said "Dimensions ... 551*1600" implies strictness */
        /* If I scale, I violate strict request. I will keep size but single col */
    }
}

@media (max-width: 600px) {

    /* Mobile handling */
    .porcelain-section {
        width: 100%;
        overflow-x: auto;
    }

    .porcelain-container {
        width: fit-content;
        padding: 0 20px;
        grid-template-columns: repeat(2, 160px);
        gap: 10px;
    }

    .porcelain-item {
        width: 160px;
        height: 465px;
    }
}