html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }

    /* =====================================
   SIMPLE MOBILE STACKED LAYOUT
===================================== */


    @media (max-width: 768px) {

        /* Stack layout */
        .project-section {
            display: block;
        }

        .project-content,
        .project-scroll {
            width: 100%;
            padding: 25px 20px;
            border-right: none;
        }

        /* Remove sticky */
        .project-content,
        .sticky-box {
            position: relative !important;
            top: 0 !important;
        }

        /* Remove full height slider */
        .slider {
            height: auto;
        }

        .slides {
            animation: none;
            display: block;
        }

        .slides img {
            width: 100%;
            height: auto;
            margin-bottom: 15px;
            border-radius: 10px;
        }

        /* Section spacing */
        .section {
            padding: 40px 20px;
        }

        /* Clean typography */
        .project-content h1 {
            font-size: 24px;
            margin-bottom: 15px;
        }

        .project-content p {
            font-size: 15px;
            line-height: 1.7;
        }
        
        

    }

    .breadcrumb-area {
        position: relative;
        background-image: url("images/projects/Mr. Anurag Mishra Andheri/DSC02954+.jpg");
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        color: white;
        min-height: 400px;
        display: flex;
        align-items: center;
    }

    .breadcrumb-area::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* background: rgba(0, 0, 0, 0.3); */
        /* dark overlay */
        z-index: 1;
    }

    .breadcrumb-area .container {
        position: relative;
        z-index: 2;
        /* place content above overlay */
    }

    /* Reset */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Helvetica Neue", Arial, sans-serif;
        background: #f8f8f8;
        color: #222;
        line-height: 1.7;
    }

    /* Layout */
    .project-section {
        display: flex;
        width: 100%;
    }

    /* ================= LEFT STICKY CONTENT ================= */

    .project-content {
        width: 40%;
        padding: 30px 80px 50px 80px;
        background: #ffffff;
        border-right: 1px solid #eee;
    }

    .sticky-box {
        position: sticky;
        top: 50px;

    }

    .project-content h1 {
        font-size: 36px;
        font-weight: 500;
        margin-bottom: 30px;
        letter-spacing: 0.5px;
    }

    .project-content p {
        font-size: 18px;
        color: #666;
        margin-bottom: 25px;
    }

    .info-box {
        margin-top: 30px;
    }

    .info-box div {
        font-size: 17px;
        margin-bottom: 12px;
        color: #444;
    }

    .info-box strong {
        font-weight: 600;
    }

    /* ================= RIGHT SCROLL SECTION ================= */

    .project-scroll {
        width: 60%;
        background: #fafafa;
    }

    .slider {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    .slides {
        display: flex;
        height: 100%;
        animation: slide 18s infinite;
    }

    .slides img {
        min-width: 100%;
        height: 100vh;
        object-fit: cover;
    }

    /* Smooth one-by-one slide */
    @keyframes slide {

        0% {
            transform: translateX(0);
        }

        30% {
            transform: translateX(0);
        }

        33% {
            transform: translateX(-100%);
        }

        63% {
            transform: translateX(-100%);
        }

        66% {
            transform: translateX(-200%);
        }

        96% {
            transform: translateX(-200%);
        }

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

    /* ================= CONTENT SECTIONS ================= */

    .section {
        padding: 60px 80px;
        background: #ffffff;
        border-bottom: 1px solid #eee;
    }

    .boxed_wrapper .section h2 {
        font-size: 26px;
        font-weight: 500;
        margin-bottom: 25px;
        position: relative;
    }

    .section h2::after {
        content: "";
        width: 40px;
        height: 2px;
        background: #111;
        display: block;
        margin-top: 12px;
    }

    .section p {
        font-size: 16px;
        color: #555;
    }

    /* ================= TABLE STYLING ================= */

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 25px;
        font-size: 17px;
    }

    table th {
        text-align: left;
        font-weight: 600;
        padding: 15px 0;
        border-bottom: 2px solid #222;
    }

    table td {
        padding: 18px 0;
        border-bottom: 1px solid #eee;
        vertical-align: top;
        color: #555;
    }

    /* ================= LIST STYLING ================= */

    .section ul {
        margin-top: 20px;
        padding-left: 18px;
    }

    .section li {
        margin-bottom: 5px;
        color: #555;
        font-size: 18px;
    }

    /* ================= HOVER SUBTLE EFFECT ================= */

    .section:hover {
        background: #fcfcfc;
        transition: 0.3s ease;
    }

    /* ================= RESPONSIVE ================= */

    @media (max-width: 1200px) {

        .project-content {
            padding: 60px 40px;
        }

        .section {
            padding: 60px 40px;
        }
    }

    @media (max-width: 992px) {

        .project-section {
            flex-direction: column;
        }

        .project-content,
        .project-scroll {
            width: 100%;
        }

        .sticky-box {
            position: relative;
            top: 0;
        }

        .slider {
            height: 70vh;
        }

        .slides img {
            height: 70vh;
        }
    }

   
    .more-projects {
        padding: 50px 0px 0px 0px;
       margin: 100px 0;
        background: #f7f7f7;
    }

    .section-title {
        text-align: center;
        margin-bottom: 40px;
        font-size: 26px;
    }

    .slider-container {
        overflow: hidden;
        width: 100%;
    }

    .slider-track {
        display: flex;
        animation: scroll 20s linear infinite;
    }

    .project-card {
        min-width: 25%;
        padding: 0 20px;
        text-align: center;
        text-decoration: none;
        color: #000;
        transition: 0.4s ease;
    }

    .project-card img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        transition: 0.4s ease;
    }

    .project-card h3 {
        margin-top: 15px;
        font-size: 16px;
    }

    /* Hover Effect */
    .project-card:hover img {
        transform: scale(1.05);
    }

    .project-card:hover h3 {
        color: #bc5e5e;
    }

    /* Auto slide animation */
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    .project-section {
        display: flex;
    }

    .project-content {
        width: 40%;
        position: sticky;
        top: 120px;
        align-self: flex-start;
    }

    .project-scroll {
        width: 60%;
    }


    .project-scroll {
        width: 60%;
    }

    .boxed_wrapper {
        overflow: visible !important;
    }

    .project-section {
        overflow: visible !important;
    }

    /* =========================================
   FINAL CLEAN MOBILE VERSION
   (No Sticky, No Columns, One-by-One)
========================================= */

    @media (max-width: 768px) {

        /* Remove flex layout completely */
        .project-section {
            display: block !important;
        }

        /* Full width content */
        .project-content,
        .project-scroll {
            width: 100% !important;
            padding: 25px 20px !important;
            position: relative !important;
            border-right: none !important;
        }

        /* Remove sticky */
        .sticky-box {
            position: relative !important;
            top: 0 !important;
        }

        /* Remove 100vh slider */
      .slider {
        height: auto !important;
    }

    .slides {
        display: flex !important;   /* Keep flex */
        animation: slide 9s infinite !important; /* Keep animation */
    }

    .slides img {
        width: 100%;
        height: 250px;   /* Adjust for mobile */
        object-fit: cover;
        border-radius: 10px;
    }
        /* Clean section spacing */
        .section {
            padding: 40px 20px !important;
        }

        /* Smaller typography */
        .project-content h1 {
            font-size: 24px !important;
            margin-bottom: 15px;
        }

        .project-content p {
            font-size: 15px !important;
            line-height: 1.7;
        }

        .section h2 {
            font-size: 18px;
        }

        /* Table stack */
        table,
        table tr,
        table td {
            display: block;
            width: 100%;
        }
         .slider-container {
        overflow: hidden;
        width: 100%;
    }

        table th {
            display: none;
        }

        table tr {
            background: #f8f8f8;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 15px;
        }

        table td {
            padding: 5px 0;
            font-size: 14px;
        }

        /* Gallery images full width */
        .col-xl-4,
        .col-lg-4,
        .col-md-6,
        .col-sm-12 {
            width: 100% !important;
            max-width: 100% !important;
            flex: 100% !important;
            margin-bottom: 15px;
        }

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

    100% {
        transform: translateX(-50%);
    }
}

/* Mobile View Styles (one card auto slides at a time) */
@media (max-width: 768px) {
    .slider-track {
        animation: scrollMobile 15s linear infinite; /* Adjust time for sliding one card at a time */
        display: flex;
        flex-wrap: nowrap;
    }

    .project-card {
        min-width: 100%; /* Each project card takes full width on mobile */
        margin: 10px 0; /* Add some margin between cards */
    }

    /* Optional: Adjust the image size for mobile */
    .project-card img {
        height: 200px; /* Adjust image height for mobile */
    }

    .slider-container {
        overflow-x: hidden; /* Hide overflow to prevent multiple cards from showing at once */
    }
}

/* Mobile specific scroll animation for one card at a time */
@keyframes scrollMobile {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-100%); /* Move one card to the left */
    }
    50% {
        transform: translateX(-200%); /* Move two cards to the left */
    }
    75% {
        transform: translateX(-300%); /* Move three cards to the left */
    }
    100% {
        transform: translateX(-400%); /* Move four cards to the left (full slide) */
    }
}
.masonary-layout {
    display: flex;
    flex-wrap: wrap;
}

.filter-item {
    margin-bottom: 30px;
}

.single-project-style5 .img-holder,
.single-project-style5 .inner {
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.single-project-style5 .inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}