@media screen and (min-width: 767px) {

    :root {
        --primary-color: #00eeff;
        --secondary-color: #001720;
        --accent1-color: #e3a10f;
	    --accent2-color: #144351;
	    --accent3-color: #ffffff;
    }

    * {
        box-sizing: border-box;
    }
    
    html, body {
        max-width: 100%;
        font-family: "Montserrat", sans-serif;
        overflow-x: hidden;
    }


    /*----------- NAVIGATION --------------*/


    .nav {
        display: flex;
        justify-content: space-between;
        color: white;
        
        
        max-width: 1440px;
        margin: 0 auto;
        padding: .5em;
        overflow: hidden;
    }

    #menubutton {
		display: none; /* hide hamburger button */
	}

    nav {
        display: flex;
        margin: 0 0 0 20em;
    }

    .image-logo {
        margin: 0 20em 0 0;
    }


    .navigation-links {
        display: flex;
        align-items: center;
        padding: .2em 1em;
    }

    nav a {
        position: relative;
        width: 100%;
        font-size: .9rem;
        transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out; /* Smooth transition */
        border: none;
    }

    nav a:hover {
        color: var(--primary-color);
        font-weight: 400;
        text-shadow: 0 0 20px rgba(57, 215, 255, 0.7);
    }


    .resume {
        position: relative;
        background-color: var(--primary-color);
        color: var(--secondary-color);
        border-radius: 18px;
        padding: 10px 14px;
        margin: 0 0 0 1rem;
        font-weight: 600;
        font-size: .8rem;
        transition: box-shadow 0.3s ease-in-out, color 0.5s ease-in-out;
    }

    .resume:hover {
        color: var(--primary-color);
        background-color: var(--secondary-color);
        border: solid 1px var(--primary-color);
        font-weight: 600;
        box-shadow: 0 0 10px rgba(57, 215, 255, 0.4);
    }

    


    /*----------- MAIN --------------*/


    /*-------- HERO SECTION ----------*/


    .hero-image1 {
        animation: fade 1s ease-in 0.1s forwards;
        width: 45%;
        margin: 2% 0 0 0;
        left: 25%;
        -webkit-mask-image: linear-gradient(
            rgb(0, 23, 32, 0.8),
            rgb(0, 23, 32, 0.8) 80%,
            rgb(0, 23, 32, 0)
            );
        -webkit-mask-image: linear-gradient(
            rgb(0, 23, 32, 0.8),
            rgb(0, 23, 32, 0.8) 80%,
            rgb(0, 23, 32, 0)
            );
    }
    
    .spaceman-hero {
        display: inline;
        width: 35%; /* Maintain size */
        position: absolute; /* Ensure proper placement */
        top: 20%; /* Center vertically */
        right: 10%; /* Adjust position relative to container */
        transform: translateY(-50%); /* Center vertically */
        padding: 0; /* Remove unnecessary padding */
        margin: 0; /* Remove unnecessary margins */
        z-index: 1;
        animation: slideFade 1s ease-in-out 0.1s forwards, randomMove 6s ease-in-out 1.1s infinite;
        opacity: 0; /* Ensure animation handles visibility */
    }

    
    
    .hero-container {
        display: grid;
        grid-template-rows: 1fr 1fr;
        max-width: 1440px;
        padding: 0;
        margin: 2em auto;
        background: radial-gradient(circle at top left, rgb(255, 245, 180, 0.9), rgba(74, 219, 255, 0.3), rgba(74, 219, 255, 0.08), rgb(0, 23, 32), rgb(0, 23, 32), rgb(0, 23, 32), rgb(0, 23, 32), rgb(0, 23, 32), rgb(0, 23, 32));
        border-radius: 9999px;
        
    }

    

    .hero-content h1 {
        color: var(--accent3-color);
        text-align: left;
        font-weight: 900;
        font-size: 4.4rem;
        width: 100%;
        height: auto;
        margin: 3em 0 0 2em;
    }

    .hero-content {
        margin: 0 0 0 0;
        
    }


    .hero-content .subtitle {
        font-size: 1.6rem;
        line-height: 2.2rem;
        text-align: left;
        color: #ffffff;
        margin: .5em 0 0 5.4em;
        animation: fade 1s ease-in 0.1s forwards;
    }

    .hero-text {
        margin: 0;
        width: 50%;
    }

    .hero-text h2 {
        font-size: 2rem;
        margin: 1em 0 0 0;
    }


    .hero-text p {
        color: var(--accent1-color);
        text-align: left;
        font-weight: 400;
        font-size: 1rem;
        text-transform: uppercase;
        width: 100%;
        line-height: 2rem;
        letter-spacing: .1rem;
        
    }

    




    /*-------- INTRO SECTION ----------*/

    

    .scroller[data-animated="true"] {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(
            90deg, transparent, black 20%, black 80%, transparent
        );


        -webkit-mask-image: linear-gradient(
            90deg, transparent, black 20%, black 80%, transparent
        );
    }

    .scroller[data-animated="true"] .scroller-inner {
        width: max-content;
        flex-wrap: nowrap;
        animation: scroll 40s linear infinite;
    }


    @keyframes scroll {
        to {
            transform: translate(calc(-50% - .5rem));
        }
    }

    /* FADE-IN and FADE-OUT Scrool Animation */

    /* main > section {
        scale: .8; opacity: 0;
        animation: fade-in linear forwards;
        animation-timeline: view();
        animation-range: entry;
    }

    @keyframes fade-in {
        to {scale: 1; opacity: 1;}
    } */

    /* FADE-IN and FADE-OUT Scrool Animation */

    .scroller {
        margin: 140px 0 0 0;
        width: 100%;
        z-index: 5;
    }

    .scroller-inner img {
        width: 150px;
    }

    .intro-container {
        display: flex;
        justify-content: flex-end;
        max-width: 100%;
        height: auto;
        margin: 2em auto;
    }

    .intro-content {
        z-index: 5;
        margin: 4em 10% 4em 0;
    }

    .intro-content h2 {
        font-size: 2rem;
        font-weight: 900;
    }


    .intro-content p {
        padding-top: 1em;
        line-height: 2rem;
        text-align: left;
    }

    .intro-content span {
        font-weight: 800;
    }

    .button-1 {
        position: relative;
        width: 100%;
        background-color: var(--primary-color);
        color: var(--secondary-color);
        border-radius: 20px;
        padding: .8rem 1.6rem;
        font-weight: 600;
        font-size: .8rem;
        text-decoration: none;
        margin: 0 0 0 0;
        transition: box-shadow 0.3s ease-in-out;
    }

    .button-1:hover {
        color: var(--primary-color);
        background-color: var(--secondary-color);
        border: solid 1px var(--primary-color);
        font-weight: 600;
        box-shadow: 0 0 10px rgba(57, 215, 255, 0.4);
    }


    /* --------------- TIMELINE SECTION ----------------- */



    .timeline-container .title {
        margin: 0 0 0 0;
        font-size: 3rem;
        z-index: 2;
    }

    .timeline-container .subtitle {
        margin: 0 0 1em 0;
        font-size: 1.25rem;
        z-index: 4;
    }


    .timeline-container img {
        display: none;
        z-index: 0;
        width: 100%;
        height: auto;
    }
    
    .timeline-grid {
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        margin: 45px auto;
        margin-bottom: 20px;
        position: relative;
        z-index: 1;
        max-width: 1440px;
    }
    
    .tabs {
        width: 25%;
        background-color: rgb(57, 215, 255, 0);
        display: flex;
        flex-direction: column;
        padding: 10px;
        gap: 15px;
        margin: 0 0 0 20%;
    }
    
    .tab-btn {
        background-color: rgb(57, 215, 255, 0);
        border: 1px solid rgb(57, 215, 255, 0.2);
        padding: 20px;
        text-align: left;
        cursor: pointer;
        transition: background-color 0.3s;
        color: #00eeff;
        border-radius: 12px;
        font-size: 1rem;
    }
    
    .tab-btn:hover {
        background-color: rgb(57, 215, 255, 0.2);
    }
    
    .tab-btn.active {
        background-color: rgb(57, 215, 255, 0.1);
        border: 1px solid rgb(57, 215, 255, 0.6);
    }
    
    .tab-content {
        flex: 1;
        padding: 80px;
        border-left: 1px solid rgb(57, 215, 255, 1);
        margin: 0 5% 0 5%;
        background-color: rgb(227, 161, 15, 0.05);
        border-radius: 0 25px 25px 0;
        backdrop-filter: blur(15px);
    }
    
    .tab-pane {
        display: none;
        width: 100%;
        margin: 0 0 0 0;
    }
    
    .tab-pane.active {
        display: block;
    }

    .tab-pane h2 {
        font-size: 2rem;
        margin: 0 0 25px 0;
    }

    .tab-pane p {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .tab-pane li {
        font-size: 1rem;
        line-height: 1.5rem;
        padding-bottom: 10px;
    }


    /*-------- CARDS SECTION ----------*/



    .logo-3d {
        display: block;
        position: absolute;
        width: 20%;
        height: auto;
        top: 4000px;
        margin: 0 0 0 0;
        animation: slideFade 1s ease-in-out 0.1s forwards, randomMove-1 12s ease-in-out 1.1s infinite; /* Added 'randomMove' animation */
        opacity: 0;
        z-index: 10;
    }
    


    .title {
        position: relative;
        color: var(--accent3-color);
        text-align: center;
        font-size: 2.8rem;
        font-weight: 900;
        max-width: 100%;
        margin: 1em auto;
        }


        .title span, form span {
            background: linear-gradient(to right, rgb(255, 245, 180), rgb(227, 161, 15));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 4rem;
        }


        .card-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Three equal columns */
            align-items: start;
            padding: 0 100px 0 100px;
            grid-gap: 20px;
            max-width: 1440px;
            margin: 0 auto; /* Centers the grid within its parent container */
            margin-bottom: 48px;
        }
        
        .card-content {
            width: 100%;
            border-radius: 20px;
            padding: 30px;
            color: var(--accent3-color);
            background: linear-gradient(to right, rgba(57, 215, 255, 0.15), rgb(0, 23, 32));
            border: solid 1px rgba(57, 215, 255, 0.4);
            box-sizing: border-box;
            backdrop-filter: blur(15px);
        }


    .text {
        text-align: center;
        padding: 2em;
        line-height: 2rem;
        
    }

    .text .role-text {
        color: var(--accent1-color);
        margin: 1em 0 1em 0;
    }


    .card-grid h2 {
        text-align: center;
        width: 100%;
        margin: 15px 0 0 0;
        font-size: 1.8rem;
        font-weight: 900;
    }

    .card-grid p {
        width: 100%;
        margin: 0 0 0 0;
        line-height: 1.8rem;
        color: rgb(255, 255, 255);
        font-size: .8rem;
    }

    .line-container {
        text-align: center;
        margin: 0 0 10% 0;
    }

    .line-container::before {
        content: "";
        display: inline-block;
        width: 50%; /* Adjust the width to make it shorter or longer */
        border-top: 1px solid rgba(57, 215, 255, 1); /* Adjust the thickness and color */
        margin: 0 0 0 0;
    }

    .card-grid .button-1 {
        width: 100%;
        margin: 0 0 0 0;
        font-size: .8rem;
        transition: box-shadow 0.3s ease-in;
    }

    .image img {
        margin: 0 0 0 0;
    }

    .video video {
        position: relative;
        margin: 0 0 0 0;
        width: 100%;
        height: auto;
    }

    .video {
        margin: 0;
    }
    

    /*-------- TESTIMONIALS SECTION ----------*/


    .testimonials-container {
        max-width: 960px;
        margin: 5em auto 0 auto;
        text-align: center;
    }
    
    
    .carousel {
        display: flex;
        overflow: hidden;
        height: auto;
    }

    .testimonials-content p {
        font-size: 1rem;
        line-height: 2rem;
    }
    
    .carousel-btn {
        background-color: transparent;
        border: none;
        font-size: 4rem;
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(57, 215, 255, 0.8);
    }
    
    
    .carousel-btn.prev {
        left: 40px;
    }
    
    .carousel-btn.next {
        right: 40px;
    }

    .testimonial-image {
        width: 100px; /* Adjust as needed */
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 15px;
    }

    .testimonial-quote {
        font-style: italic;
        margin-bottom: 10px;
        color: white;
        font-size: 1rem;
        line-height: 1.8rem;
    }

    
    

    strong {
        background: linear-gradient(to right, rgb(255, 245, 180), rgb(227, 161, 15));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    


    /*----------- FORM STYLING --------------*/

    form {
        max-width: 720px;
        margin: 5rem auto;
        z-index: 10;
    }

    form h2 {
        font-size: 3rem;
        font-weight: 900;
        text-align: center;
        margin: 0 0 80px 0;
    }

    

    .wf1 input[type="date"],
    .wf1 select,
    .wf1 input[type="text"],
    .wf1 textarea,
    .wf1 input[type="tel"],
    .wf1 input[type="email"],
    .wf1 input[type="number"]
{
    margin-left: 5px;
}

.wf1 label {
    margin-left: 35px;
}

.wf1 input[type="date"],
.wf1 select
{
    background-color: #eee;
    display: block;
    border: solid 1px #e3a10f;
    border-radius: 6px;
    padding: .75rem;
    color: #001720;
    font-weight: 600;
    width: 100%;
    max-width: 200px;
    appearance: none;
    margin-top: 5px;
    margin-bottom: 10px;
}


.wf1 input[type="text"],
.wf1 input[type="email"]
{
    background-color: #eee;
    display: block;
    border: solid 1px #e3a10f;
    border-radius: 6px;
    padding: .75rem;
    color: #001720;
    font-weight: 600;
    width: 100%;
    max-width: 400px;
    appearance: none;
    margin-top: 5px;
    margin-bottom: 10px;
}


.wf1 textarea
{
    background-color: #eee;
    display: block;
    border: solid 1px #999;
    border-radius: 6px;
    padding: 1.75rem;
    color: #001720;
    font-weight: 600;
    width: 100%;
    max-width: 400px;
    appearance: none;
    margin-top: 5px;
    margin-bottom: 10px;
}


.wf1 input[type="submit"]
{
    border: none;
    border-radius: 20px;
    padding: .8rem;
    width: 300px;
    margin: 5% 0 2rem 6%;
}



/* Membership card animation */

    .card-content, .intro-container, .timeline-container {
        opacity: 0; /* Initially hidden */
        transform: translateY(50px); /* Start below the viewport */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition */
        
    }
    
    .card-content.in-view, .intro-container.in-view, .timeline-container.in-view {
        opacity: 1; /* Fully visible */
        transform: translateY(0); /* Move to the original position */
    }

    



    /* ------- FOOTER -------- */

    footer {
        margin-top: 80px;
    }



    /* ------- PROJECT ROWS -------- */


    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }
    
    .project-row {
        display: flex;
        justify-content: space-between; /* Space between items */
        align-items: center;
        padding: 1em;
        background: var(--secondary-color);
        border-top: .5px solid var(--accent1-color);
        border-left: none;
        border-right: none;
        margin-bottom: 0;
        cursor: pointer;
    }

    .project-row:hover {
        background-color: var(--accent2-color);
    }
    
    .project-details {
        display: flex;
        justify-content: space-between; /* Space out elements */
        width: 100%; /* Use full width */
    }
    
    .project-index {
        flex: 0 0 50px; /* Fixed width for index */
    }
    
    .project-company,
    .project-role,
    .project-year {
        flex: 1; /* Take equal space */
        text-align: left;
    }
    
    .live-project-button {
        background-color: transparent;
        color: var(--accent1-color);
        text-decoration: none;
        padding: 10px 15px;
        border: none;
        transition: background-color 0.3s;
        flex: 0 0 auto; /* Allow button to take only necessary space */
        cursor: pointer;
    }
    
    .live-project-button:hover {
        color: var(--primary-color);
    }
    
    .project-image {
        display: none; /* Start hidden */
        width: 100%; /* Make image responsive */
        margin-top: 10px; /* Add some space above the image */
        border-radius: 8px; /* Round image corners */
    }



}