.nx-projects{
    background:#F5932F;
    padding:41px ;
    position: relative;
    overflow: hidden;
}

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

.nx-title-wrap h2{
    font-size:44px;
    font-weight:800;
    color:#fff;
}

.nx-tag{
    /* color:#00f7ff; */
    font-size:13px;
    letter-spacing:3px;
    display:block;
    margin-bottom:8px;
}

/* NAV BUTTONS */
.nx-nav button{
    width:46px;
    height:46px;
    border-radius:12px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    transition:.3s;
}
.nx-nav button:hover{
    background:#00f7ff;
    color:#000;
}

/* FILTERS */
.nx-filters{
    display:flex;
    gap:12px;
    margin-bottom:25px;
}

.filter-btn{
    padding:7px 20px;
    border-radius:20px;
    background:none;
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
    font-size:14px;
    cursor:pointer;
    transition:.3s;
}
.filter-btn.active,
.filter-btn:hover{
    background:#ffffff;
    color:#000;
}

/* PROGRESS BAR */
.nx-progress{
    width:100%;
    height:4px;
    background:rgba(255,255,255,.1);
    border-radius:4px;
    overflow:hidden;
    margin-bottom:20px;
}
.nx-progress-bar{
    width:0%;
    height:100%;
    background:#00f7ff;
    transition:width .2s linear;
}

/* SKELETON */
.nx-skeleton{
    display:flex;
    gap:20px;
}
.nx-skeleton-card{
    width:33.33%;
    height:380px;
    border-radius:20px;
    background:linear-gradient(90deg,#1b1f29 0%,#242934 50%,#1b1f29 100%);
    background-size:200%;
    animation:shimmer 1.4s infinite linear;
}
@keyframes shimmer{
    0%{background-position:200% 0;}
    100%{background-position:-200% 0;}
}

/* CARDS */
.nx-card{
    border-radius:22px;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(10px);
}
.nx-card img{
    width:100%;
    height:420px;
    object-fit:cover;
    transition:.5s;
}
.nx-card:hover img{
    transform:scale(1.15);
}

/* OVERLAY */
.nx-overlay{
    position:absolute;
    inset:0;
    padding:25px;
    background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    opacity:0;
    transition:.4s;
}
.nx-card:hover .nx-overlay{
    opacity:1;
}

.nx-overlay span{
    font-size:14px;
    color:#00000;
    font-weight:600;
}
.nx-overlay h4{
    color:#fff;
    font-size:22px;
    margin:8px 0 14px;
}
.nx-overlay a{
    width:42px;
    height:42px;
    border-radius:50%;
    background:#F5932F;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#000;
}


    /* Styles for the project image container to make it responsive.
*/
.project-items.style-2 .project-image {
    position: relative;
    overflow: hidden;
    width: 100%; /* Makes the container take the full width of the slider item */

    /* This creates a responsive box that maintains a near-square shape. 
       As the width changes, the height will adjust automatically. */
    aspect-ratio: 46 / 45; 
}

/* Styles for the image itself to ensure it fills the container.
*/
.project-items.style-2 .project-image img {
    width: 100%;
    height: 100%;
    display: block; /* Removes any extra space below the image */

    /* This is the key: it scales the image to fill the entire container 
       without stretching or squishing it. It will crop the image if necessary. */
    object-fit: cover; 
}

        /* Custom Styles */
        .PH {
            font-family: 'Poppins', sans-serif;
            background-color: #f0f8ff; /* A very light blue background */
        }

        .team-section {
            padding: 80px 0;
            overflow: hidden;
        }

        .section-title {
            text-align: center;
            margin-bottom: 60px;
            color: #052c65;
        }
        
        .section-title h2 {
            font-weight: 600;
        }

        /* The main capsule for each team member - UPDATED DIMENSIONS */
        .team-capsule {
            position: relative;
            width: 200px; /* UPDATED */
            height: 500px; /* UPDATED */
            margin: 0 auto;
            background-color: #e0f0ff; /* Light blue capsule background */
            border-radius: 100px; /* UPDATED - This makes it a capsule shape */
            overflow: hidden; /* Crucial for the hover effect */
            /*box-shadow: 0 10px 30px rgba(5, 44, 101, 0.1);*/
            transition: all 0.4s ease-in-out;
            cursor: pointer;
        }

        .team-capsule:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(5, 44, 101, 0.2);
        }

        /* Styling for the image container and the image itself - UPDATED DIMENSIONS */
        .team-capsule .image-container {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 180px; /* UPDATED */
            height: 300px; /* UPDATED */
            border-radius: 90px; /* UPDATED - Makes the image container a capsule */
            background-color: #ffffff;
            /*box-shadow: 0 0 20px rgba(0,0,0,0.05);*/
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Smooth transition with bounce */
        }

   .team-capsule .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 90px;
    border: 1px dotted #ccc; /* FIXED */
}


        /* Text content displayed initially */
        .initial-content {
            padding-top: 50px;
            text-align: center;
            color: #052c65;
        }
        
        .initial-content h4 {
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .initial-content p {
            font-size: 0.9rem;
            color: #4a6c9b;
        }

        /* The overlay that appears on hover */
        .hover-details {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #0073EF;
            padding: 20px;
            /* Blue gradient */
            transform: translateY(-100%); /* Initially hidden above the capsule */
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Smooth transition with bounce */
        }
        
        .hover-details h4 {
            font-weight: 600;
            margin-bottom: 10px;
        }

        /* The hover logic */
        .team-capsule:hover .image-container {
            transform: translate(-50%, 150%); /* Moves the image down and out of view */
            opacity: 0;
        }
        
        .team-capsule:hover .initial-content {
             opacity: 0;
             transition: opacity 0.3s ease;
        }

        .team-capsule:hover .hover-details {
            transform: translateY(0); /* Brings the details overlay into view */
        }

        /* Zigzag layout for medium screens and up */
        @media (min-width: 992px) { /* Adjusted breakpoint for narrower cards */
            .team-member-col:nth-child(even) {
                margin-top: 80px;
            }
               .PH{
                border-radius:50PX
            }
        }
        
        /* On small screens, stack them vertically without zigzag */
        @media (max-width: 991.98px) {
            .team-member-col {
                margin-bottom: 30px;
            }
            .PH{
                border-radius:50PX
            }
        }