:root {
    --orange: #ff6b35;
    --dark: #1a1a1a;
    --gray: #666;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; overflow-x: hidden; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

/* HEADER BASE */
.main-header {
    background: #fff;
    padding: 15px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* FLEX FIX */
.header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LOGO */
.logo a { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    text-decoration: none; 
}
.logo-text { 
    font-size: 24px; 
    font-weight: 700; 
    color: var(--dark); 
}

/* DESKTOP NAV */
.navbar ul { 
    display: flex; 
    list-style: none; 
    gap: 25px; 
}
.navbar ul li a { 
    text-decoration: none; 
    color: var(--dark); 
    font-weight: 500; 
    font-size: 15px;
    transition: 0.3s;
}
.navbar ul li a:hover { color: var(--orange); }
.navbar i { font-size: 10px; margin-left: 3px; }

/* RIGHT SECTION */
.header-right { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
}

.contact-info { font-size: 14px; color: var(--gray); }
.contact-info strong { color: var(--dark); }

.cart-btn { 
    color: var(--dark); 
    font-size: 18px; 
    text-decoration: none; 
}

/* BUTTON */
.btn-quote { 
    background: var(--orange); 
    color: #fff; 
    padding: 12px 25px; 
    border-radius: 4px; 
    font-size: 14px; 
    font-weight: 600; 
    text-decoration: none;
}

/* MOBILE TOGGLE */
.mobile-toggle {
    display: none;
    width: 42px;
    height: 42px;
    background: #000;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.mobile-toggle span {
    width: 22px;
    height: 2px;
    background: #fff;
    transition: 0.3s;
}

/* ========================= */
/* 🔥 MOBILE OPTIMIZATION */
/* ========================= */

@media (max-width: 1024px) {

    /* Hide desktop extras */
    .desktop-only { display: none; }

    /* HEADER LAYOUT FIX */
    .header-flex {
        justify-content: space-between;
    }

    /* RIGHT SIDE STRICT ALIGN */
    .header-right {
        margin-left: auto;   /* 🔥 pushes to extreme right */
        gap: 12px;
    }

    /* SHOW MOBILE BTN */
    .mobile-toggle { 
        display: flex; 
    }

    /* CART SIZE CLEAN */
    .cart-btn {
        font-size: 20px;
    }

    /* NAVBAR DROPDOWN */
    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;

        max-height: 0;
        overflow: hidden;

        transition: max-height 0.4s ease;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        border-top: 1px solid #eee;
    }

    .navbar.active {
        max-height: 400px;
        padding: 20px 0;
    }

    .navbar ul {
        flex-direction: column;
        align-items: center;
        gap: 18px;
    }

    .navbar ul li a {
        font-size: 16px;
        font-weight: 600;
    }

    /* SMOOTH X ANIMATION */
    .mobile-toggle.active span:nth-child(1) { 
        transform: translateY(7px) rotate(45deg); 
    }
    .mobile-toggle.active span:nth-child(2) { 
        opacity: 0; 
    }
    .mobile-toggle.active span:nth-child(3) { 
        transform: translateY(-7px) rotate(-45deg); 
    }
}

/* ========================= */
/* 📱 EXTRA SMALL DEVICES */
/* ========================= */

@media (max-width: 480px) {

    .logo-text {
        font-size: 18px;
    }

    .mobile-toggle {
        width: 38px;
        height: 38px;
    }

    .cart-btn {
        font-size: 18px;
    }
}

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    background: url('../images/dark-marble-bg.jpg') no-repeat center center;
    background-size: cover;
    min-height: 85vh;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    padding: 80px 0;
}

/* Overlay */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.hero-section .container {
    position: relative;
    z-index: 10;
}

.hero-content {
    max-width: 700px;
}

/* Badge */
.hero-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-badge span {
    width: 35px;
    height: 2px;
    background: var(--orange);
}

/* Heading */
.hero-content h1 {
    font-size: 72px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 25px;
}

.hero-content p {
    font-size: 16px;
    color: #e0e0e0;
    line-height: 1.6;
    margin-bottom: 40px;
}

/* Button */
.btn-hero-orange {
    background: var(--orange);
    color: #fff;
    text-decoration: none;
    padding: 18px 35px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    border-radius: 4px;
    transition: 0.3s;
}

.btn-hero-orange:hover {
    background: #e55a2b;
    transform: translateY(-2px);
}

/* Decorative */
.decor-img {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.decor-left {
    top: 10%;
    left: 20px;
    width: 140px;
}

.decor-right {
    top: 50%;
    right: -50px;
    transform: translateY(-50%);
    width: 45%;
}

/* --- TABLET --- */
@media (max-width: 992px) {
    .hero-content h1 { font-size: 50px; }
    .decor-right { width: 50%; right: -100px; opacity: 0.4; }
}

/* --- MOBILE FIX (UPDATED PROPER LEFT ALIGN) --- */
@media (max-width: 768px) {

    /* Remove center alignment */
    .hero-section {
        text-align: left; /* FIXED */
        padding: 80px 20px; /* side padding added */
        min-height: auto;
    }

    /* Hide decor */
    .decor-img {
        display: none !important;
    }

    /* Badge alignment */
    .hero-badge {
        justify-content: flex-start; /* FIXED */
    }

    /* Content width control */
    .hero-content {
        margin: 0;
        max-width: 100%;
    }

    /* Heading */
    .hero-content h1 {
        font-size: 32px;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    /* Paragraph */
    .hero-content p {
        font-size: 14px;
        padding: 0;
        margin-bottom: 25px;
    }

    /* Button */
    .btn-hero-orange {
        width: 100%;
        justify-content: center; /* button center hi rahe (UX better) */
    }
}


/* --- SERVICE SECTION --- */
.service-section {
    padding: 80px 0;
    background: #fff;
}

/* HEADER */
.service-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.pill-badge {
    display: inline-block;
    padding: 5px 18px;
    border: 1px solid #e8a88a;
    color: #e8a88a;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.service-header h2 {
    font-size: 40px;
    font-weight: 600;
    color: #2d2d2d;
}

/* BUTTON */
.btn-read-more {
    background: #e8a88a;
    color: #fff;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    transition: 0.3s;
}
.btn-read-more:hover {
    background: #d99073;
}

/* --- CARD --- */
.service-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transition: 0.3s;
}
.service-card:hover {
    transform: translateY(-6px);
}

/* --- IMAGE FIX (NO STRETCH / NO CROP) --- */
.card-img {
    width: 100%;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.card-img img {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain; /* IMPORTANT */
}

/* --- TITLE --- */
.card-title {
    padding: 18px;
    text-align: center;
    background: #fafafa;
}
.card-title h3 {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

/* --- DESKTOP: SLIDER STYLE (NO GRID) --- */
@media (min-width: 769px) {

    .swiper-wrapper {
        display: flex;
        gap: 20px;
    }

    .swiper-slide {
        width: 250px !important; /* CONTROL CARD SIZE */
    }

    .swiper-pagination {
        display: none;
    }
}

/* --- MOBILE --- */
@media (max-width: 768px) {

    .desktop-only {
        display: none !important;
    }

    .service-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .service-header h2 {
        font-size: 26px;
        line-height: 1.3;
    }

    .header-right {
        width: 100%;
    }

    .btn-read-more {
        width: 100%;
        text-align: center;
    }

    /* Swiper spacing */
    .service-swiper {
        padding-bottom: 45px;
    }

    /* CARD */
    .service-card {
        border-radius: 15px;
    }

    /* IMAGE */
    .card-img img {
        max-height: 220px;
    }

    /* CTA HIDE */
    .floating-ctas {
        display: none !important;
    }
}

/* --- ABOUT SECTION --- */
.about-section {
    position: relative;
    padding: 100px 0;
    background-color: #fbf9f4; /* Light creamy background */
    overflow: hidden;
}

/* Floating Custom Decor PNG */
.decor-text-png {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 250px; /* Adjust based on your PNG size */
    z-index: 1;
}

.about-flex {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 2;
}

/* --- LEFT IMAGES --- */
.about-images {
    flex: 1;
    position: relative;
}

/* Main Image - Exact Custom Cut */
.img-main {
    width: 90%;
    height: 500px;
    object-fit: cover;
    border-radius: 15px 130px 15px 15px; /* Perfect curve on top right */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Small Overlapping Image */
.img-small-wrapper {
    position: absolute;
    bottom: -30px;
    right: 0;
    width: 250px;
    height: 250px;
    background: #fff; /* Border color */
    padding: 8px; /* Thickness of white border */
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}
.img-small {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* --- RIGHT CONTENT --- */
.about-content {
    flex: 1;
}

.badge-outline {
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid #dca082;
    color: #dca082;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.about-content h2 {
    font-size: 40px;
    font-weight: 600;
    color: #222;
    line-height: 1.2;
    margin-bottom: 20px;
}

.about-content p {
    font-size: 15px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 35px;
}

/* Feature Cards Grid */
.feature-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 40px;
}

.f-card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    flex: 1;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.relative-card {
    position: relative;
}

.card-head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

/* Icons */
.icon-circle {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-circle img { width: 20px; }
.orange-bg { background: #e09975; }
.green-bg { background: #82a87d; }

.card-head h4 { font-size: 16px; font-weight: 600; color: #222; }

/* Lists */
.card-list { list-style: none; }
.card-list li {
    font-size: 13px;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.card-list i { color: #dca082; font-size: 12px; }
.card-list i.green-check { color: #dca082; }

/* Sticking out Green Arrow */
.green-arrow-btn {
    position: absolute;
    right: -15px; /* Sticks out exactly like design */
    top: 50px;
    width: 35px;
    height: 35px;
    background: #82a87d;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(130, 168, 125, 0.3);
}

/* Read More Button (Pill + Gradient) */
.btn-gradient-orange {
    display: inline-block;
    background: linear-gradient(90deg, #dca082, #e8b196);
    color: #fff;
    padding: 14px 35px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 6px 15px rgba(220, 160, 130, 0.3);
    transition: 0.3s;
}
.btn-gradient-orange:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(220, 160, 130, 0.4);
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .about-flex {
        flex-direction: column;
    }
    .about-images {
        width: 100%;
        margin-bottom: 40px;
    }
    .img-main { width: 100%; }
    
    .feature-cards {
        flex-direction: column;
    }
    
    .green-arrow-btn {
        right: 20px; /* Bring it inside on mobile so it doesn't break screen */
    }
    
    .decor-text-png {
        width: 150px;
        top: 10px;
    }
}


/* --- GALLERY SECTION --- */
.gallery-section {
    position: relative;
    /* Dark green background with fallback color */
    background-color: #2c3329; 
    /* Pattern Image - Save a subtle dark pattern in your images folder */
    background-image: url('../images/dark-pattern-bg.png'); 
    background-size: cover;
    background-position: center;
    padding: 80px 0 0 0; /* Padding top, 0 padding bottom so images touch the edge */
    margin-top: 50px;
}

/* Overlapping Decorative PNG (Marble Gallery) */
.decor-gallery-text {
    position: absolute;
    top: -40px; /* Pulls it up to overlap the section above slightly */
    right: 5%;
    width: 280px; /* Adjust size based on your PNG */
    z-index: 10;
    pointer-events: none;
}

/* Header Layout */
.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.g-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Badge specific for dark background */
.badge-dark-outline {
    display: inline-block;
    padding: 4px 18px;
    border: 1px solid #dca082;
    color: #dca082;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.gallery-header h2 {
    font-size: 32px;
    font-weight: 600;
    color: #fff; /* White text for dark background */
    margin: 0;
}

/* --- GALLERY GRID / SLIDER --- */
.gallery-wrapper {
    width: 100%;
    /* Little bit of padding on sides so it doesn't touch screen edges entirely if preferred, 
       but screenshot looks flush with a tiny gap. */
    padding: 0 10px; 
}

.gallery-item {
    width: 100%;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 450px; /* Fixed height to keep uniform */
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* Hover Effect for Desktop */
.gallery-item:hover img {
    transform: scale(1.05);
}

/* --- DESKTOP GRID LAYOUT --- */
@media (min-width: 769px) {
    .gallery-swiper .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columns exactly like screenshot */
        gap: 10px; /* Small gap between images */
    }
    .gallery-swiper .swiper-pagination {
        display: none; /* Hide pagination on desktop */
    }
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .gallery-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .g-header-right, 
    .g-header-right .btn-gradient-orange {
        width: 100%;
        text-align: center;
    }

    .gallery-header h2 {
        font-size: 26px;
    }

    .decor-gallery-text {
        width: 180px;
        top: -25px;
    }

    /* Mobile Height adjustment */
    .gallery-item img {
        height: 350px;
    }
    
    .gallery-section {
        padding-bottom: 40px; /* Add padding at bottom for mobile pagination */
    }
}


/* --- TEAM SECTION --- */
.team-section {
    padding: 100px 0;
    background: #fff;
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}
.team-header h2 {
    font-size: 38px;
    font-weight: 600;
    color: #222;
    margin-top: 15px;
}

/* Flexbox for Left/Right Columns */
.team-flex {
    display: flex;
    gap: 40px;
    align-items: stretch;
}

/* Left: Team List */
.team-list {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Team Card (Inactive Default State) */
.team-card {
    background: #f6f4f0; /* Light creamy gray */
    padding: 25px 35px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.team-info h3 {
    font-size: 22px;
    font-weight: 500;
    color: #222;
    margin-bottom: 5px;
    transition: 0.3s;
}
.team-info p {
    font-size: 13px;
    font-weight: 500;
    color: #dca082;
    letter-spacing: 0.5px;
    transition: 0.3s;
}

/* Arrow default */
.team-arrow {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Arrow on right side of container */
    color: #444;
    transition: 0.3s;
    font-size: 18px;
}

/* --- ACTIVE STATE (Orange Card) --- */
.team-card.active {
    background: #d2926f; /* Muted orange/brown */
    transform: scale(1.02); /* Slight pop out effect */
    box-shadow: 0 10px 25px rgba(210, 146, 111, 0.3);
}
.team-card.active .team-info h3,
.team-card.active .team-info p {
    color: #fff;
}
.team-card.active .team-arrow {
    background: #fff;
    border-radius: 50%; /* White circle */
    justify-content: center;
    color: #222;
}

/* Right: Team Image */
.team-image-box {
    flex: 1;
}
.team-image-box img {
    width: 100%;
    height: 100%;
    max-height: 450px;
    object-fit: cover;
    border-radius: 12px;
    background: #f6f4f0; /* Default background while loading */
    transition: opacity 0.3s ease;
}

/* Fade animation class for smooth image transition */
.fade-in {
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0.5; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .team-flex {
        flex-direction: column-reverse; /* Put list at bottom, image on top */
    }
    
    .team-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .header-right { width: 100%; }
    .header-right .btn-gradient-orange { display: block; text-align: center; }
    
    .team-image-box img {
        height: 350px; /* Shorter image on mobile */
    }

    .team-card {
        padding: 20px;
    }
    .team-info h3 { font-size: 18px; }
}

/* --- CONTACT SECTION --- */
.contact-section {
    padding: 100px 0;
    background-color: #fbf9f4; /* Same light creamy background */
}

.contact-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}
.contact-header h2 {
    font-size: 38px;
    font-weight: 600;
    color: #222;
    margin-top: 15px;
}

.contact-flex {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

/* --- Left Image --- */
.contact-image-box {
    flex: 1;
}
.contact-image-box img {
    width: 100%;
    height: 100%;
    min-height: 550px;
    object-fit: cover;
    /* Custom cut on the top-right corner exactly like screenshot */
    border-radius: 15px 120px 15px 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* --- Right Content (Form + Info) --- */
.contact-content-box {
    flex: 1.2;
}

/* Success/Error Alerts */
.alert-success { background: #d4edda; color: #155724; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 14px;}
.alert-error { background: #f8d7da; color: #721c24; padding: 15px; border-radius: 8px; margin-bottom: 20px; font-size: 14px;}

/* Form Styling */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 8px;
    background: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #555;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    outline: none;
    transition: 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus {
    box-shadow: 0 4px 15px rgba(220, 160, 130, 0.2);
}

.contact-form textarea {
    resize: vertical;
    margin-bottom: 20px;
}

.btn-submit-orange {
    background: #dca082; /* Muted orange from screenshot */
    color: #fff;
    border: none;
    padding: 14px 40px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s;
}
.btn-submit-orange:hover {
    background: #c68c6e;
    transform: translateY(-2px);
}

/* Divider */
.contact-divider {
    border: none;
    border-top: 1px solid #e8e5df;
    margin: 40px 0;
}

/* Contact Info Details */
.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.info-icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dca082; /* Orange icon */
    font-size: 22px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    flex-shrink: 0;
}

.info-text span {
    font-size: 12px;
    font-weight: 600;
    color: #dca082;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

.info-text h4 {
    font-size: 16px;
    font-weight: 600;
    color: #222;
    margin-bottom: 5px;
}

.info-text p {
    font-size: 14px;
    color: #555;
    font-weight: 500;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .contact-flex {
        flex-direction: column;
        gap: 40px;
    }
    
    .contact-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .header-right { width: 100%; }
    .header-right .btn-gradient-orange { display: block; text-align: center; }

    .contact-image-box img {
        min-height: 350px;
    }

    /* Stack form inputs on mobile */
    .form-grid {
        grid-template-columns: 1fr;
    }
    
    .btn-submit-orange {
        width: 100%; /* Full width button on mobile */
    }
}

/* ========================================= */
/* --- TESTIMONIAL SECTION --- */
/* ========================================= */
.testimonial-section { padding: 100px 0; background: #fff; }

.testi-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 70px; /* Space for the floating icons */
}
.testi-header h2 { font-size: 38px; font-weight: 600; color: #222; margin-top: 15px; }

/* Speech Bubble Card */
.testi-card {
    background: #fbf9f4;
    border-radius: 12px;
    padding: 40px 30px;
    text-align: center;
    position: relative;
    margin-bottom: 25px; /* Space for arrow and user */
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}

/* The Bubble Arrow (Triangle) pointing down to user */
.testi-card::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 40px; /* aligned to left over avatar */
    border-width: 15px 15px 0 0;
    border-style: solid;
    border-color: #fbf9f4 transparent transparent transparent;
}

/* The Bracket floating on top */
.quote-bracket {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 25px;
    border: 2px solid;
    border-bottom: none;
}
.theme-orange .quote-bracket { border-color: #dca082; }
.theme-green .quote-bracket { border-color: #8fa986; }

/* The Quote Icon Box */
.quote-icon {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 45px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}
.theme-orange .quote-icon { background: #dca082; }
.theme-green .quote-icon { background: #8fa986; }

/* Card Content */
.testi-name { font-size: 20px; font-weight: 600; color: #333; margin-bottom: 10px; }
.stars { color: #ffb800; font-size: 12px; margin-bottom: 15px; gap: 4px; display: flex; justify-content: center; }
.testi-text { font-size: 14px; color: #666; line-height: 1.7; }

/* User Info Below Bubble */
.testi-user {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 20px;
}
.testi-user img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; }
.user-meta h5 { font-size: 16px; font-weight: 600; color: #222; margin-bottom: 3px; }
.user-meta span { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.theme-orange-text { color: #dca082; }
.theme-green-text { color: #8fa986; }

/* Desktop Grid for Testimonials (3 Columns) */
@media (min-width: 993px) {
    .testi-swiper .swiper-wrapper {
        display: grid !important; /* Forces CSS grid instead of Swiper Flex layout on desktop */
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px;
        transform: none !important; /* Stops the Swiper sliding logic on desktop */
    }
    .testi-swiper .swiper-pagination { display: none; }
}

/* ========================================= */
/* --- FOOTER SECTION --- */
/* ========================================= */
.main-footer {
    background-color: #2c3329; /* Dark green base */
    background-image: url('../images/dark-pattern-bg.png'); /* Pattern overlay */
    background-size: cover;
    background-position: center;
    padding: 80px 0 40px 0;
    color: #fff;
    position: relative;
    border-top: 5px solid #dca082; /* Orange top border */
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr; /* Layout: Large Left, Small Middle, Medium Right */
    gap: 50px;
}

.footer-col h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #fff;
}

/* Column 1: Help & Newsletter */
.col-help p {
    font-size: 15px;
    color: #d1d1d1;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 90%;
}

.newsletter-form {
    position: relative;
    max-width: 400px;
}
.newsletter-form input {
    width: 100%;
    padding: 18px 25px;
    border-radius: 40px;
    border: none;
    outline: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #333;
}
.newsletter-form button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #dca082; /* Orange */
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
}
.newsletter-form button:hover {
    background: #c68c6e;
}

/* Column 2: Quick Links */
.col-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.col-links ul li {
    margin-bottom: 15px;
}
.col-links ul li a {
    color: #d1d1d1;
    text-decoration: none;
    font-size: 15px;
    transition: 0.3s;
    display: block;
}
.col-links ul li a:hover {
    color: #dca082;
    padding-left: 5px; /* Nice slide effect on hover */
}

/* Column 3: Contact & Showroom */
.contact-list {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}
.contact-list li {
    font-size: 15px;
    color: #d1d1d1;
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Social Icons */
.social-links {
    display: flex;
    gap: 15px;
}
.social-links a {
    color: #fff;
    font-size: 18px;
    transition: 0.3s;
}
.social-links a:hover {
    color: #dca082;
}

/* Back To Top Button */
.back-to-top {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 45px;
    height: 45px;
    background: #8fa986; /* Green */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 4px;
    transition: 0.3s;
}
.back-to-top:hover {
    background: #7a9471;
    transform: translateY(-5px);
}

/* ========================================= */
/* --- MOBILE RESPONSIVENESS (Testi & Footer)--- */
/* ========================================= */
@media (max-width: 992px) {
    /* Footer Grid becomes vertical */
    .footer-grid {
        grid-template-columns: 1fr; 
        gap: 40px;
    }
    
    .col-help p { max-width: 100%; }

    /* Back to top button position for mobile */
    .back-to-top {
        bottom: 20px;
        right: 20px;
    }
}

/* ========================================= */
/* --- INNER PAGE HERO BANNER --- */
/* ========================================= */
.page-banner {
    position: relative;
    height: 350px;
    background: url('../images/dark-marble-bg.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 60px; /* Space for the overlapping PNG */
}

/* Dark Overlay */
.page-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust darkness */
    z-index: 1;
}

.page-banner h1 {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 48px;
    font-weight: 600;
}

/* Floating Decorative PNG Text */
.banner-decor-text {
    position: absolute;
    bottom: -40px; /* Pulls it down to overlap the next section */
    left: 5%;
    width: 350px; /* Adjust based on your PNG size */
    z-index: 10;
    pointer-events: none;
}

/* ========================================= */
/* --- ABOUT PAGE CONTENT SECTION --- */
/* ========================================= */
.about-page-content {
    background-color: #fbf9f4; /* Match the cream background */
    padding: 60px 0 100px 0;
}

.about-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start; /* Ensures both columns start at the very top */
}

/* Left Column */
.about-col-left h2 {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    color: #222;
    margin-bottom: 30px;
}

/* Right Column */
.about-col-right p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-top: 25px;
}

/* Shared Image Style */
.rounded-img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Height adjustments so they look proportional like the screenshot */
.about-col-left .rounded-img {
    height: 380px; 
}
.about-col-right .rounded-img {
    height: 480px; /* Right image is slightly taller in the design */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .page-banner {
        height: 250px;
    }
    .page-banner h1 {
        font-size: 36px;
    }
    .banner-decor-text {
        width: 250px;
        bottom: -20px;
    }

    .about-grid-2 {
        grid-template-columns: 1fr; /* Stack columns vertically on mobile */
        gap: 30px;
    }

    .about-col-left .rounded-img,
    .about-col-right .rounded-img {
        height: auto; /* Let image scale naturally on mobile */
        max-height: 350px;
    }
}

/* ========================================= */
/* --- RANDOM PRODUCTS GRID --- */
/* ========================================= */
.random-products-section {
    padding: 80px 0;
    background-color: #fff;
}

.section-title-center {
    text-align: center;
    margin-bottom: 50px;
}
.section-title-center h2 {
    font-size: 32px;
    font-weight: 600;
    margin-top: 15px;
    color: #222;
}

/* Grid Layout (6 Columns) */
.products-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

/* Individual Card Style */
.product-item-card {
    background: #fff;
    transition: 0.3s;
}

.p-card-img {
    position: relative;
    background: #f9f9f9;
    padding: 15px; /* Spacing inside card */
    border: 1px solid #eee;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.p-card-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Keeps product shape perfect */
    transition: 0.4s;
}

/* White Label Overlapping bottom of image */
.p-card-label {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    background: #fff;
    padding: 6px 10px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #f1f1f1;
}

.p-card-label span {
    font-size: 10px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* See Products Link */
.p-card-action {
    padding: 10px 0;
    text-align: right;
}
.p-card-action a {
    text-decoration: none;
    color: #666;
    font-size: 11px;
    font-weight: 600;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.p-card-action a:hover {
    color: var(--primary-orange);
}
.p-card-action i {
    font-size: 10px;
}

/* Hover Effect */
.product-item-card:hover .p-card-img img {
    transform: scale(1.08);
}

/* --- MOBILE RESPONSIVENESS (Grid Scaling) --- */
@media (max-width: 1200px) {
    .products-grid-6 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 992px) {
    .products-grid-6 { grid-template-columns: repeat(3, 1fr); }
    .p-card-img { height: 200px; }
}

@media (max-width: 768px) {
    .products-grid-6 { 
        grid-template-columns: repeat(2, 1fr); /* 2 items per row on mobile */
        gap: 15px;
    }
    .p-card-img { height: 180px; }
    .section-title-center h2 { font-size: 24px; }
}

/* --- GALLERY SLIDER SECTION --- */
.gallery-slider-section {
    padding: 80px 0;
    background: #fff;
    position: relative;
}

.gallery-title-wrapper {
    text-align: center;
    margin-bottom: 50px;
}

.gallery-badge {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}

.gallery-main-title {
    font-size: 42px;
    font-weight: 700;
    color: #222;
    margin-top: 10px;
}

/* Orange underline only for "Gallery" word */
.gallery-main-title span {
    position: relative;
    display: inline-block;
}
.gallery-main-title span::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-orange);
}

/* Slider Layout */
.gallery-slider-container {
    position: relative;
    padding: 0 50px; /* Space for arrows */
}

.gallery-slide-img {
    height: 450px;
    overflow: hidden;
    background: #f9f9f9;
}

.gallery-slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}

/* Custom Arrows Style (Greenish/Lime Color) */
.custom-arrow {
    color: #4ade80 !important; /* Bright green color like screenshot */
    background: none;
    font-size: 24px;
    font-weight: bold;
}
.custom-arrow::after {
    display: none; /* Hide default Swiper font icon */
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 992px) {
    .gallery-slide-img { height: 350px; }
    .gallery-main-title { font-size: 32px; }
}

@media (max-width: 768px) {
    .gallery-slider-container { padding: 0; }
    .gallery-slide-img { height: 300px; }
    .custom-arrow { display: none; } /* Hide arrows on small mobile for touch swipe */
}
/* --- SHOP PAGE STYLES --- */
.shop-section { padding: 60px 0; background: #fff; }
.shop-flex { display: flex; gap: 40px; }

/* Sidebar */
.shop-sidebar { flex: 0 0 200px; }
.shop-sidebar ul { list-style: none; border-top: 1px solid #eee; }
.shop-sidebar li { border-bottom: 1px solid #eee; padding: 15px 0; }
.shop-sidebar li a { color: #666; font-size: 13px; font-weight: 600; text-decoration: none; transition: 0.3s; }
.shop-sidebar li.active { position: relative; }
.shop-sidebar li.active::before { content: ''; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); width: 25px; height: 1px; background: var(--primary-orange); }
.shop-sidebar li.active a { color: var(--primary-orange); }

/* Main Grid */
.shop-main { flex: 1; }
.shop-title { font-size: 28px; margin-bottom: 30px; color: #222; }
.products-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }

/* Product Card */
.shop-product-card { background: #fff; }
.shop-p-img { height: 320px; border-radius: 15px; overflow: hidden; background: #f0f0f0; margin-bottom: 15px; }
.shop-p-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-p-info h4 { font-size: 17px; font-weight: 600; color: #222; margin-bottom: 8px; }
.shop-p-price { display: flex; gap: 15px; align-items: center; }
.new-price { font-size: 14px; color: #666; font-weight: 500; }
.old-price { font-size: 14px; color: #dca082; text-decoration: line-through; }

/* --- 4 INFO BOXES CONTACT --- */
.contact-info-grid-4 { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; 
    margin-top: 60px;
    border-top: 1px solid #eee;
    padding-top: 50px;
}
.info-item-box { display: flex; gap: 20px; align-items: flex-start; }
.info-item-box i { font-size: 24px; color: #dca082; background: #fff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.info-details span { font-size: 11px; font-weight: 700; color: #dca082; display: block; margin-bottom: 5px; }
.info-details h5 { font-size: 15px; font-weight: 600; color: #333; margin-bottom: 5px; line-height: 1.4; }
.info-details p { font-size: 14px; color: #666; }

/* --- MOBILE SHOP --- */
@media (max-width: 992px) {
    .shop-flex { flex-direction: column; }
    .shop-sidebar ul { display: flex; overflow-x: auto; gap: 20px; border: none; padding-bottom: 10px; }
    .shop-sidebar li { border: none; padding: 0; white-space: nowrap; }
    .shop-sidebar li.active::before { display: none; }
    .products-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .contact-info-grid-4 { grid-template-columns: 1fr; }
    .products-grid-3 { grid-template-columns: 1fr; }
}
/* --- CONTACT PAGE NEW SECTIONS --- */
.contact-info-section { padding: 80px 0; background: #fff; position: relative; }
.info-flex-grid { display: flex; gap: 40px; align-items: flex-start; }

/* Column Borders */
.contact-col { flex: 1; padding-right: 40px; border-right: 1px solid #eee; }
.hours-col { flex: 1; padding-right: 40px; }
.img-col { flex: 1.5; }

.info-row { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; }
.info-row i { font-size: 24px; color: #dca082; }
.info-row span { font-size: 11px; color: #888; display: block; }
.info-row h4 { font-size: 15px; color: #333; margin-top: 3px; }

.hour-item { margin-bottom: 20px; }
.hour-item h5 { font-size: 14px; color: #888; font-weight: 500; margin-bottom: 5px; }
.hour-item p { font-size: 16px; font-weight: 600; color: #222; display: flex; align-items: center; gap: 10px; }
.hour-item i { color: #dca082; font-size: 18px; }

.side-img-rounded { width: 100%; border-radius: 15px; height: 280px; object-fit: cover; }
.decor-bottom-right { position: absolute; bottom: 20px; right: 5%; width: 250px; opacity: 0.6; }

/* Booking Section */
.booking-section { padding: 100px 0; background-color: #fbf9f4; background-image: url('../images/wavy-pattern.png'); }
.booking-flex { display: flex; gap: 60px; align-items: center; }
.booking-img { flex: 1; }
.booking-img img { width: 100%; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.booking-form-content { flex: 1.2; }
.booking-form-content h2 { font-size: 36px; margin: 15px 0; }

/* Map Section */
.map-section { padding: 60px 0; }
.map-frame { border-radius: 20px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.05); }

/* --- MOBILE --- */
@media (max-width: 992px) {
    .info-flex-grid, .booking-flex { flex-direction: column; }
    .contact-col { border-right: none; border-bottom: 1px solid #eee; padding-bottom: 30px; }
    .decor-bottom-right { display: none; }
}
/* --- PRODUCT DETAIL PAGE --- */
.product-detail-section { padding: 60px 0; background: #fff; }
.detail-flex { display: flex; gap: 50px; margin-bottom: 60px; }

/* Left Gallery */
.detail-gallery { flex: 1; }
.main-img-box { width: 100%; height: 500px; border-radius: 12px; overflow: hidden; background: #f9f9f9; margin-bottom: 15px; }
.main-img-box img { width: 100%; height: 100%; object-fit: contain; }
.thumb-list { display: flex; gap: 10px; }
.thumb-list img { width: 80px; height: 80px; border-radius: 8px; cursor: pointer; border: 1px solid #eee; }

/* Right Info */
.detail-info { flex: 1; }
.p-title { font-size: 32px; font-weight: 600; margin-bottom: 15px; color: #222; }
.p-price-row { margin-bottom: 20px; }
.p-new-price { font-size: 20px; font-weight: 600; color: #222; margin-right: 15px; }
.p-old-price { font-size: 16px; color: #dca082; text-decoration: line-through; }
.p-short-desc { font-size: 14px; color: #666; line-height: 1.6; margin-bottom: 30px; }

.p-action-row { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 40px; }
.quantity-box label { display: block; font-size: 12px; margin-bottom: 5px; color: #888; }
.quantity-box input { width: 60px; padding: 10px; border: 1px solid #eee; border-radius: 6px; text-align: center; }
.btn-add-cart { background: #dca082; color: #fff; border: none; padding: 12px 40px; border-radius: 30px; font-weight: 600; cursor: pointer; }

.trust-list { border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 20px 0; margin-bottom: 20px; }
.trust-list p { font-size: 13px; color: #666; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.trust-list i { color: #555; }
.p-meta p { font-size: 14px; margin-bottom: 5px; }
.orange-text { color: #dca082; font-weight: 600; }

/* TABS */
.detail-tabs { border-top: 1px solid #eee; padding-top: 40px; }
.tabs-header { display: flex; gap: 30px; border-bottom: 1px solid #eee; margin-bottom: 30px; }
.tab-btn { background: none; border: none; padding: 15px 0; font-size: 16px; color: #888; cursor: pointer; position: relative; }
.tab-btn.active { color: #222; font-weight: 600; }
.tab-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #222; }
.tab-content { display: none; padding-bottom: 60px; }
.tab-content.active { display: block; }
.tab-content h4 { margin-bottom: 15px; font-size: 18px; }

/* RELATED */
.related-products { border-top: 1px solid #eee; padding-top: 60px; }
.products-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; }
.rel-card img { width: 100%; height: 250px; border-radius: 12px; object-fit: cover; margin-bottom: 10px; }
.rel-card h4 { font-size: 15px; color: #333; margin-bottom: 5px; }
.rel-meta { display: flex; justify-content: space-between; font-size: 12px; color: #888; }

/* MOBILE */
@media (max-width: 768px) {
    .detail-flex { flex-direction: column; }
    .main-img-box { height: 350px; }
    .products-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .header-flex {
        padding: 10px 0;
        gap: 142px;
    }
    .logo-text {
        font-size: 18px; /* Font chota kiya taaki space bane */
        white-space: nowrap;
    }
    .header-right {
        gap: 10px; /* Cart aur Menu ke beech gap kam kiya */
    }
    .logo-icon {
        width: 24px;
        height: 24px;
    }
}

.auth-section { background: #f8f9fa; padding: 80px 0; min-height: 80vh; display: flex; align-items: center; justify-content: center; }
.auth-container { width: 100%; max-width: 450px; }
.auth-box { background: #fff; padding: 40px; border-radius: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); text-align: center; }
.auth-box h2 { color: #333; margin-bottom: 30px; font-size: 24px; }

.input-with-icon { position: relative; margin-bottom: 15px; }
.input-with-icon i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #aaa; font-size: 14px; }
.input-with-icon input { width: 100%; padding: 12px 15px 12px 45px; border: 1px solid #eee; background: #f1f3f6; border-radius: 8px; outline: none; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.btn-auth-red { background: #e31e24; color: #fff; border: none; width: 100%; padding: 14px; border-radius: 30px; font-weight: 700; cursor: pointer; margin-top: 10px; }
.btn-auth-outline { display: block; border: 2px solid #a3b928; color: #444; padding: 12px; border-radius: 30px; font-weight: 700; text-decoration: none; margin-top: 15px; }
.auth-sep { margin: 20px 0; position: relative; }
.auth-sep::before { content: ''; position: absolute; width: 100%; height: 1px; background: #eee; left: 0; top: 50%; }
.auth-sep span { background: #fff; padding: 0 10px; position: relative; color: #aaa; font-size: 12px; }
.auth-meta { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin: 15px 0; }
.cart-section { padding: 60px 0; }
/* --- CART PAGE STYLES --- */
.cart-section { padding: 80px 0; background-color: #f8f9fa; }

.cart-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    overflow: hidden;
}

.cart-table thead th {
    background-color: #f5f8fa;
    color: #a1a5b7;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #eff2f5;
}

.cart-table tbody td {
    padding: 20px;
    border-bottom: 1px solid #eff2f5;
    vertical-align: middle;
    font-size: 15px;
}

.cart-table tbody tr:last-child td {
    border-bottom: none;
}

.cart-product-info { display: flex; align-items: center; gap: 20px; }
.cart-product-info img { width: 70px; height: 70px; object-fit: cover; border-radius: 8px; }
.cart-product-info span { font-weight: 600; color: #333; }

.remove-btn {
    color: #f1416c;
    font-size: 24px;
    text-decoration: none;
    transition: 0.3s;
}
.remove-btn:hover { color: #d9214e; transform: scale(1.1); }

/* Cart Summary Box */
.cart-summary {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    margin-top: 30px;
    text-align: right;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.cart-summary h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
}
.cart-summary h3 span {
    font-weight: 700;
    margin-left: 10px;
}
.cart-product-info { display: flex; align-items: center; gap: 15px; }
.cart-product-info img { width: 60px; height: 60px; object-fit: cover; }
.remove-btn { color: red; font-size: 20px; text-decoration: none; }
.cart-summary { text-align: right; margin-top: 30px; }
.dashboard-flex { display: flex; gap: 30px; }
.dash-nav { flex: 0 0 200px; }
.dash-nav a { display: block; padding: 10px; margin-bottom: 5px; background: #eee; }
.dash-nav a.active { background: var(--primary); color: #fff; }
.dash-content { flex: 1; }


/* --- PREMIUM CHECKOUT UI --- */
.checkout-wrapper { background: #f4f7f9; padding: 60px 0; min-height: 100vh; }
.checkout-grid { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }

/* Cards Styling */
.checkout-card, .summary-card { background: #fff; padding: 30px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.04); margin-bottom: 25px; }
.checkout-card h3 { font-size: 18px; margin-bottom: 25px; display: flex; align-items: center; gap: 12px; color: #1a1a1a; }
.checkout-card h3 i { color: #ff6b35; }

/* Form Elements */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #555; margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 14px 18px; border: 1px solid #e1e3ea; border-radius: 10px; font-size: 14px; outline: none; transition: 0.3s; background: #f9fafb;
}
.form-group input:focus { border-color: #ff6b35; background: #fff; box-shadow: 0 0 0 4px rgba(255,107,53,0.1); }

/* Progress Indicator */
.progress-bar { display: flex; gap: 20px; margin-bottom: 30px; }
.step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #aaa; font-weight: 500; }
.step span { width: 24px; height: 24px; background: #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.step.active { color: #1a1a1a; }
.step.active span { background: #ff6b35; color: #fff; }

/* Payment Methods */
.payment-options { display: flex; flex-direction: column; gap: 15px; }
.pay-item { border: 1px solid #e1e3ea; padding: 15px 20px; border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 15px; transition: 0.3s; }
.pay-item:has(input:checked) { border-color: #ff6b35; background: rgba(255,107,53,0.02); }
.pay-info { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.pay-title { font-size: 14px; font-weight: 600; }
.pay-icons { color: #888; font-size: 20px; display: flex; gap: 10px; }

/* Sticky Order Summary */
.checkout-right { position: sticky; top: 100px; }
.summary-card h3 { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 15px; }
.s-item { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
.s-img img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; }
.s-name { font-size: 14px; font-weight: 500; color: #333; margin: 0; }
.s-qty { font-size: 12px; color: #888; }
.s-price { margin-left: auto; font-weight: 600; font-size: 14px; }

.price-breakdown { margin-top: 20px; }
.price-row { display: flex; justify-content: space-between; font-size: 14px; color: #666; margin-bottom: 10px; }
.price-row.total { font-size: 18px; font-weight: 700; color: #1a1a1a; margin-top: 15px; }
.free { color: #50cd89; font-weight: 700; }

.coupon-section { display: flex; gap: 10px; margin: 20px 0; }
.coupon-section input { flex: 1; padding: 10px 15px; border: 1px dashed #ccc; border-radius: 8px; font-size: 13px; }
.coupon-section button { background: #333; color: #fff; border: none; padding: 0 15px; border-radius: 8px; cursor: pointer; font-size: 12px; }

.btn-place-order {
    width: 100%; background: #e31e24; color: #fff; border: none; padding: 18px; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; transition: 0.3s; margin-top: 10px;
}
.btn-place-order:hover { background: #c51a1f; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(227,30,36,0.2); }
.secure-text { text-align: center; font-size: 12px; color: #aaa; margin-top: 15px; }

.trust-badges { display: flex; justify-content: space-between; margin-top: 20px; }
.badge { font-size: 10px; color: #777; display: flex; align-items: center; gap: 5px; }

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 992px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-right { position: relative; top: 0; order: -1; } /* Summary shows first on mobile */
    .form-row { grid-template-columns: 1fr; }
}


/* --- USER DASHBOARD PREMIUM UI --- */
.dashboard-wrapper { background: #f8f9fa; padding: 60px 0; min-height: 90vh; }
.dashboard-flex { display: flex; gap: 30px; align-items: flex-start; }

/* Sidebar */
.dash-sidebar { flex: 0 0 280px; background: #fff; border-radius: 16px; padding: 25px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); }
.user-brief { display: flex; align-items: center; gap: 15px; padding-bottom: 25px; border-bottom: 1px solid #eee; margin-bottom: 25px; }
.user-brief img { width: 50px; height: 50px; border-radius: 50%; }
.user-brief span { font-size: 12px; color: #888; }
.user-brief h5 { font-size: 16px; font-weight: 700; color: #333; margin: 0; }

.dash-menu { display: flex; flex-direction: column; gap: 5px; }
.dash-menu a { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 8px; color: #555; text-decoration: none; font-size: 14px; font-weight: 500; transition: 0.3s; }
.dash-menu a i { font-size: 16px; width: 20px; color: #aaa; }
.dash-menu a:hover, .dash-menu a.active { background: rgba(255, 107, 53, 0.08); color: #ff6b35; }
.dash-menu a.active i { color: #ff6b35; }
.logout-link:hover { background: #fff5f5 !important; color: #e31e24 !important; }

/* Main Area */
.dash-main { flex: 1; }
.dash-card { background: #fff; padding: 30px; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); margin-bottom: 30px; }
.welcome-banner { background: linear-gradient(135deg, #1e1e2d, #2b2b40); color: #fff; display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
.welcome-banner img { width: 180px; margin-right: -20px; }

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.stat-item { background: #fff; padding: 25px; border-radius: 16px; border: 1px solid #eee; text-align: center; }
.stat-item span { font-size: 12px; color: #888; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.stat-item h3 { font-size: 28px; font-weight: 700; color: #1a1a1a; margin-top: 5px; }

/* Table & Status */
.dash-table { width: 100%; border-collapse: collapse; background: #fff; }
.dash-table th { text-align: left; padding: 15px; border-bottom: 2px solid #f4f7f9; font-size: 13px; color: #888; }
.dash-table td { padding: 15px; border-bottom: 1px solid #f4f7f9; font-size: 14px; }
.status-badge { padding: 5px 12px; border-radius: 30px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.status-badge.pending { background: #fff4de; color: #ffa800; }
.status-badge.delivered { background: #c9f7f5; color: #1bc5bd; }
.status-badge.shipped { background: #e1f0ff; color: #3699ff; }

/* Address Grid */
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.address-card { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #eee; position: relative; }
.addr-type { background: #eee; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; margin-bottom: 10px; display: inline-block; }
.addr-actions { margin-top: 15px; font-size: 12px; }

/* --- MOBILE --- */
@media (max-width: 992px) {
    .dashboard-flex { flex-direction: column; }
    .dash-sidebar { width: 100%; flex: none; }
    .dash-menu { flex-direction: row; overflow-x: auto; padding-bottom: 10px; }
    .dash-menu a { white-space: nowrap; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* --- CIRCULAR LOGO FRAME --- */
.logo-circle-frame {
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Perfect Circle */
    overflow: hidden;
    border: 2px solid var(--orange); /* Optional: Orange border around logo */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.logo-circle-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Image circle ke andar stretch nahi hogi */
}

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .logo-circle-frame {
        width: 35px;
        height: 35px;
    }
}