.video {
    width: 100%;
}
.video video {
    width: 100%;
}
/*------- Projects Start-------*/
.featured-project img{
    width: 72em;
}
.featured-project, .projects, .design-projects{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto !important;
}
.featured-project h3,.projects h3,.design-projects h3,.fun-projects h3 {
    display: flex;
    align-self: flex-start;
    font-size: 2.4em;
}
.project-1, .project-2, .project-3, .project-4 {
    height: auto;
    width: 38em;
    box-shadow: 0 .8em 1.5em rgba(0, 0, 0, 0.15);
    border-radius: 2em;
    /* margin-top: 7.5em; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all .18s;
    opacity: 1;
}
.project-1:hover, .project-2:hover, .project-3:hover, .project-4:hover {
    background: rgb(24, 24, 24);
    color: white;
    cursor: pointer;
}
.project-1:hover button,.project-2:hover button,.project-3:hover button,.project-4:hover button {
    border: 1px solid white;
    box-shadow: 0 .8em 1.5em rgba(255, 255, 255, 0.15);
}
.case-study-s:hover{
    background: white;
    color: black;
    box-shadow: 0 .8em 1.5em rgba(255, 255, 255, 0.15);
}
.project-1 img, .project-2 img, .project-3 img, .project-4 img{
    width: 24em;
}
.projects p {
    font-size: 1.6em;
    width: 100%;
    margin-top: 0;
}
h4 {
    font-size: 2.2em;
}
.projects img{
    margin-top: 5em;
} 
.projects button {
    margin-bottom: 5em;
}
.case-study {
    background: black;
    color: white;
    cursor: pointer;
    padding: 1em 6em;
    border-radius: 2em;
    border: none;
    box-shadow: 0 .4em .8em rgba(0, 0, 0, 0.2);
    margin-top: 3.2em;
    font-size: 1.6em;
}
.case-study-s {
    margin-top: 1em;
    width: 120%;
}
.design-projects {
    width: 80%;
    height: 58em;
    position: relative;
    overflow: hidden;
}
.tab-content img {
    height: 50%;
}
.tab-content {
    width: 100%;
    height: 58em;
    transition: all 0.35s linear; /* Smooth transition for width */
    overflow: hidden; /* Keeps content hidden when width is 0 */
    position: absolute;
    top: 10%;
    right: -100%;
    height: 58em;
    flex-wrap: nowrap;
    background: white;
}
.tab-content.expanded {
    right: 0;
    height: 58em;
    display: flex; /* Only show the active panel */
    flex-direction: column;
    justify-content:flex-start;
    align-items: center;
    box-shadow: 0 .4em 1em rgba(0, 0, 0, 0.15);
    border-radius: 2em;
    z-index: 10;
}
.tabs button {
    cursor: pointer; 
    writing-mode: horizontal-tb;
    padding:.9em 2.2em;
    border: none;
    border-radius: 2em;
}
.tabs button:hover{
    background: black;
    color: white;
}
.tabs {
    display: flex;
    flex-direction: column;
    top: 10%;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.tab-button.move-left {
    left: 0;
}
/* Resets the position for non-active tabs */
.tab-button {
    position: relative;
    left: 0;
    transition: left 0.5s ease;
}
.slider-control {
    bottom: -6em !important;
    z-index: 999;
}
.slider-control img {
    width: 4.4em;
    height: 4.4em;
    z-index: 999;
}
.carousel {
    position: relative;
}
.slider-icons img{
    width: 2em;
    height: 2em;
}
.img-nav {
    top:35%;
    width: 90%;
}
.img-nav img {
    z-index: 999;
}
.project-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.project-right a{
    text-decoration: none;
    width: 80%;
}
/*------- Projects End-------*/
/*=====Destop View====== */
@media screen and (min-width:1200px){
    .project-1,.project-2,.project-3,.project-4{
        flex-direction: column;
        width: 80%;
        margin: 5em auto;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
    }
    .project-left{
        margin:0 auto;
        flex-wrap: nowrap;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }
    .project-right p{
        flex-wrap: nowrap;
        width: 90%;
    }
    .project-2 img {
        margin-left: 5em;
    }
    .project-right{
       width: 80%;
       display: flex;
       justify-content: center;
       margin: 0 auto;
       flex-wrap: nowrap;
       justify-content: center !important;
       align-items:center;
    }
    .project-left img{
        width: 35em;
        /* margin-right: 5em; */
    }
    .featured-project {
        margin: 0 auto;
    }
    .case-study-s {
        width: 100%;
    }
    .development-projects {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
        justify-items: center; /* Horizontally centers items in their cell */
        align-items: start; /* Aligns items to the start of each cell vertically */
        margin-top: 20px;
        width: 80%;
        margin-left: auto; /* Center the grid container horizontally */
        margin-right: auto; /* Center the grid container horizontally */
    }
    
}
@media Screen and (max-width:1200px){
    .projects p {
        width: 80% !important;
    }
    .case-study-1 {
        width: 100%;
    }
    .case-study-s {
        width: 80%;
    }
    .featured-project {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .development-projects {
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    .project-right a {
        width: 100%;
        align-self: center;
    }
}
@media screen and (max-width:768px) {
    body, html {
        overflow-x: hidden;
    }
    .case-study-s {
        margin-left: 2.3em !important;
    }
    .case-study-s-l{
        margin-left: 0 !important;
    }
    .fun-projects {
        display: none;
    }
    .featured-project img{
        width: 42em;
    }
    .project-1, .project-2, .project-3, .project-4 {
        margin: 5em auto;
    }
    .search-container {
        transform: translateY(-25vh) !important;
        background-color: rgba(255, 255, 255, 0.9);
    }
}
/* search-bar starts*/

.search-container {
    transform: translateY(-200%);
    text-align: center;
    z-index: 10;
    opacity: 1; /* Initially hidden */
    /* animation: fadeIn 1s ease-out 1.5s forwards;  */
    margin: -10% auto 10%;
    width: 100%;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}
.search-background {
    position: absolute;
    top: -5vh;
    left: 0;
    width: 100%;
    height: 35vh;
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
    padding: 20px 0; /* Padding above and below the search bar */
    box-sizing: border-box; /* Includes padding in height calculation */
    transform: translateY(0%); /* Start below the view */
    opacity: 1; /* Start fully transparent */
    /* animation: slideBackground 1s ease-out 1.5s forwards;  */
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}
#search-bar {
    padding: 1em;
    font-size: 1.6em;
    width: 45vw;
    max-width: 80em;
    border: 2px solid #ccc;
    border-radius: 1em;
    transform: scale(1.2);
    margin-bottom: 2em;
    text-align: center;
}

#matches-count {
    margin-top: 10px;
    font-size: 2em;
    color: #474747;
}

.projectcard.visible {
    display: flex; /* Show only visible project cards */
}

/* Keyframes for the fadeIn animation */
@keyframes fadeIn {
    from{
        transform: scale(2);
    }
    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}
/* Keyframes for the background and search bar sliding in */
@keyframes slideBackground {
    0% {
        transform: translateY(100%); /* Starts off-screen */
        opacity: 0;
    }
    100% {
        transform: translateY(0); /* Ends at its final position */
        opacity: 1; /* Fully visible */
    }
}

/* fun projects */
 .carousel{
    width: 100%; 
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.fun-projects {
    width: 90%;
    height: auto;
}
.big-image{
    width: 90%;
    height: 90vh;
    position: relative;
}
.iframe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 90%;
    z-index: 1;
    cursor: pointer !important;
}
 /* Tooltip styles */
 .tooltip {
    position: absolute;
    left: 10% !important;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 1em;
    border-radius: 2em;
    font-size: 2em;
    visibility: hidden;
    opacity: 1;
    transition: opacity 0.2s;
    z-index: 999; /* Higher z-index to be above everything else */
    pointer-events: none;
}
.iframe-overlay:hover + .tooltip {
    visibility: visible;
    opacity: 1;
}