:root {
	--primary-color: #00eeff;
  --secondary-color: #001720;
  --accent1-color: rgb(227, 161, 15);
	--accent2-color: #144351;
	--accent3-color: #ffffff;
}

/*----------- BODY --------------*/

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

html, body {
    font-family: "Montserrat", Arial, sans-serif;
    background-color: var(--secondary-color);
    overflow-x: hidden;
}

header, main {
    margin: auto;
}

/*----------- HEADER --------------*/

header {
    background-color: rgb(0, 23, 32, 0.6);
    backdrop-filter: blur(10px);
    display: grid;
    grid-gap: .2rem;
    padding: 0 25px 0 25px;
    border-bottom: solid 1px rgba(57, 215, 255, 0.2);
    box-shadow: 0 0 10px #050505;
    color: var(--secondary-color);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure it is above other elements */
    font-size: 1rem;
}



.navigation-links {
    list-style-type: none;
}

/* Small view navigation and BUTTON hamburguer menu */

.image-logo {
    width: 50px;
    padding: 0;
    margin: 10px 0 0 0;
}




#menubutton {
	font-size: 2rem;
    font-family: "Montserrat";
    font-weight: 300;
	border: 0;
	background: none;
	color: white;
 	position: absolute;
    top: 1rem;
    right: 2rem;
    padding: 0;
    
}

#menubutton::before {
	content: "☰";
}

/* ▼ */

#menubutton.open::before {
	content: "X";
    color: var(--accent1-color);
    font-weight: 600;
}

/* when the button is clicked - the open class is toggled (added/removed) */
nav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-out;
}

nav ul {
    overflow: hidden;
}

nav.open {
    grid-template-rows: 1fr;
}


nav ul {
    list-style-type: none;
}

nav a {
    display: block;
    color: white;
    text-align: center;
    padding: 1rem;
    text-decoration: none;
}

.resume {
    position: relative;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: solid 1px var(--primary-color);
    border-radius: 8px;
    padding: 15px;
    font-weight: 600;
    font-size: .8rem;
    margin: 50px 0 50px 0;
}

.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 --------------*/

main {
    width: 100%;
    color: var(--accent3-color);
}

.thanks-page {
    font-size: 1.5rem;
    font-family: "Montserrat", sans-serif;
    max-width: 80%;
    margin-top: 220px;
    padding-bottom: 200px;
    margin-bottom: 100px;
    line-height: 60px;
    text-align: center;
    display: block;
    color: var(--accent3-color);
	box-sizing: border-box;
}

.thanks-page p {
    font-size: 1.2rem;
    margin-top: 2rem;
    line-height: 40px;
}


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




.hero-image1 {
    position: relative;
    width: 100%;
    margin: 120px 0 0 0;
    right: 5%;
}


.spaceman-hero {
    display: none;
}




@keyframes slideFade {
    0% {
        opacity: 0.5;
        transform: translateY(20px); /* Starts 20px lower */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Ends at the original position */
    }
}

@keyframes randomMove {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-4px, 4px);
    }
    50% {
        transform: translate(4px, -4px);
    }
    75% {
        transform: translate(-4px, -4px);
    }
    100% {
        transform: translate(0, 0);
    }
}

.hero-container {
    position: relative;
    width: 100%;
    height: auto;
    padding: 2em 0 10em 0;
    margin: 2em 0 0 0;
    background: radial-gradient(circle at top left, rgb(255, 245, 180, 0.9), rgb(74, 219, 255, 0.3), rgb(74, 219, 255, 0.1), 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;
}


.flexbox-content {
    margin: 5% 10% 0 10%;
}

.hero-container h1 {
    color: var(--accent3-color);
    margin: 2em 0 0 0;
    text-align: center;
    font-weight: 900;
    font-size: 4.4rem;
    line-height: 4rem;
    width: 100%;
    animation: fade 1s ease-in 0.1s forwards;
    opacity: 0;
}



.hero-container p span {
    background: linear-gradient(to right, rgb(255, 245, 180), rgb(227, 161, 15));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
    animation: fade 1s ease-in 0.1s forwards;
    opacity: 0;
}

@keyframes fade {
    0%{
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.hero-container p {
    font-weight: 400;
    font-size: 1.6rem;
    text-align: center;
    width: 100%;
    margin: 2em 0 0 0;
    line-height: 2rem;
}


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




.scroller {
    grid-row-start: 2;
    margin: 50px 0 50px 0;
    
}

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


.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));
    }
}


.intro-content {
    display: grid;
    grid-template-columns: 100%;
    max-width: 90%;
    height: auto;
    background: linear-gradient(to right, rgba(57, 215, 255, 0.15), rgb(0, 23, 32));
    border: solid 1px rgb(227, 161, 15, 0.5);
    border-radius: 20px;
    padding: 2em 2em 4em 2em;
    margin: 0 auto;
}

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

.intro-content .text {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0 0 0 0;
    margin: 10px 0 40px 0;
}

.intro-content p {
    padding-top: 20px;
    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: 18px;
    padding: 10px 30px 10px 30px;
    font-weight: 600;
    font-size: .8rem;
    text-decoration: none;
}

.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 EXPERIENCE SECTION --------------*/


.timeline-container {
    margin: 0 0 5em 0;
}


.timeline-container .title {
    text-align: center;
    padding-top: 15px;
    font-size: 2rem;
    margin: 0 0 0 0;
    z-index: 2;
}

.timeline-container .subtitle {
    text-align: center;
    padding-top: 15px;
    font-size: 1.25rem;
    margin: 0 0 60px 0;
    z-index: 2;
}


.timeline-container img {
    display: none;
    position: absolute;
    top: 640%;
    z-index: 0;
    width: 120%;
    height: auto;
}

.timeline-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 40px;
    position: relative;
    z-index: 1;
}

.tabs {
    width: 30%;
    background-color: rgb(57, 215, 255, 0);
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 15px;
    margin: 0 0 0 0;
}

.tab-btn {
    background-color: rgb(57, 215, 255, 0);
    border: 1px solid rgb(57, 215, 255, 0.2);
    padding: 10px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s;
    color: #00eeff;
    border-radius: 12px;
    font-size: .8rem;
}

.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, 1);
}

.tab-content {
    flex: 1;
    margin: 0 10px 0 0;
    padding: 20px;
    border-left: 1px solid rgb(57, 215, 255, 1);
    background-color: rgb(227, 161, 15, 0.05);
    backdrop-filter: blur(15px);
    border-radius: 0 25px 25px 0;
}

.tab-pane {
    display: none;
    width: 100%;
}

.tab-pane.active {
    display: block;
}

.tab-pane h2 {
    font-size: 1.4rem;
    margin: 0 0 20px 0;
}

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

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

.tab-pane span {
    font-weight: 700;
}



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



.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: 3rem;
}

.logo-3d {
    display: none;
    position: absolute;
    width: 50%;
    height: auto;
    top: 2200px;
    margin: 0 0 0 60%;
    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;
}

@keyframes slideFade {
    0% {
        opacity: 0.5;
        transform: translateY(20px); /* Starts 20px lower */
    }
    100% {
        opacity: 1;
        transform: translateY(0); /* Ends at the original position */
    }
}

@keyframes randomMove-1 {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-4px, 4px);
    }
    50% {
        transform: translate(0, -65px);
    }
    75% {
        transform: translate(-4px, 4px);
    }
    100% {
        transform: translate(0, 0);
    }
}



.card-grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: 45px 15px 15% 15px;
    gap: 20px;
}

.title {
    position: relative;
    color: var(--accent3-color);
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
    max-width: 100%;
    margin: 20% 0 0 0;
    }


.card-content {
    width: 100%;
    border-radius: 20px;
    padding: 40px;
    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);
    transition: transform 0.2s ease-in-out; /* Smooth transition */
    position: relative;
}




.text {
    text-align: center;
    padding: 20px;
}


.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.6rem;
    font-weight: 900;
}

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

.line-container {
    text-align: center;
    margin: 0 0 20% 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%;
    font-size: .8rem;
}


.image img {
    display: block;
    position: relative;
    margin: 5px 0 0 0;
    width: 100%;
    height: auto;
    border-radius: 20px;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition */
}

.image img:hover {
    box-shadow: 0 2px 40px rgba(57, 215, 255, 0.3);
}


.video {
    position: relative;
    padding-bottom: 66.67%; /* 3:2 aspect ratio */
    height: 0;
    overflow: hidden;
    width: 100%;
    border-radius: 20px;
    margin: 5px 0 0 0;
    transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition */
}

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

.video:hover {
    box-shadow: 0 2px 40px rgb(57, 215, 255, 0.3);
}



/*----------- TESTIMONIALS STYLING --------------*/

.testimonials-container {
    padding: 0 20px 20px 20px; /* Reduce padding for smaller screens */
}

.testimonials-content {
    width: 100%;
    border-radius: 20px;
    padding: 40px;
    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);
    transition: transform 0.2s ease-in-out; /* Smooth transition */
}

.carousel {
    display: flex;
    flex-direction: column; /* Stack the cards vertically */
    align-items: center; /* Center cards */
    position: relative; /* Allow positioning of buttons */
}

.carousel-wrapper {
    display: flex; /* Align buttons and cards in a row */
    align-items: center; /* Center buttons vertically */
    justify-content: space-between; /* Space buttons on either side of the card */
    position: relative;
}



.testimonial-image {
    width: 80px; /* Smaller image for mobile */
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
}

.carousel-btn {
    font-size: 2.5rem; /* Smaller button size */
    width: 40px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: rgba(57, 215, 255, 0.8);
    z-index: 1; /* Ensure buttons appear above cards */
}

/* Position buttons relative to the card */
.carousel-btn.prev {
    margin-right: auto; /* Push prev button to the left */
}

.carousel-btn.next {
    margin-left: auto; /* Push next button to the right */
}

.testimonial-quote {
    font-size: 0.85rem; /* Smaller font size for quotes */
}

.testimonial-card p {
    font-size: 0.9rem; /* Smaller font size for additional text */
    margin-top: 20px;
}

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 --------------*/



.wf1 fieldset {
    background-color: var(--secondary-color);
    margin: 2rem 10px 40px 10px;
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 2rem 5%;
}

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


.wf1 label {
    display: block;
    padding-top: 1rem;
    color: var(--primary-color);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.5rem;
}


.wf1 select
{
    background-color: #eee;
    display: block;
    border: solid 1px #999;
    border-radius: 6px;
    padding: .75rem;
    color: #555;
    width: 100%;
    max-width: 200px;
    appearance: none;
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: "Montserrat", sans-serif;
}


.wf1 input[type="text"],
.wf1 input[type="email"]
{
    background-color: #eee;
    display: block;
    border: solid 1px #999;
    border-radius: 6px;
    padding: .75rem;
    color: #555;
    width: 100%;
    max-width: 300px;
    appearance: none;
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: "Montserrat", sans-serif;
}


.wf1 textarea
{
    background-color: #eee;
    display: block;
    border: solid 1px #999;
    border-radius: 6px;
    padding: .75rem;
    color: #555;
    width: 100%;
    max-width: 300px;
    appearance: none;
    margin-top: 5px;
    margin-bottom: 10px;
    font-family: "Montserrat", sans-serif;
}

.wf1 input[type="radio"],
.wf1 input[type="checkbox"]{
    margin-right: 6px;
}

.wf1 input[type="submit"]{
    position: relative;
    border: none;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 20px;
    padding: 15px;
    font-weight: 500;
    font-size: .9rem;
    width: 100%;
    margin: 10px 0 0 0;
    transition: transform 0.1s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition */
}

.wf1 input[type="submit"]:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    box-shadow: 0 0 20px rgba(57, 215, 255, 0.5);
}

.wf1 label input:required {
    border-left: solid 6px #e3a10f;
}

.wf1 label input:required:valid {
    border-left: solid 6px #00eeff;
}

.wf1 select:required {
    border-left: solid 6px #e3a10f;
}

.wf1 select:required:valid {
    border-left: solid 6px #00eeff;
}



.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 styles */
.footer {
    background-color: #000000;
    color: white;
    padding: 40px 0 0 0;
}

.footer-container {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.footer-links {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 70%;
}

.footer-section {
    margin: 0 40px 0 80px;
    
}

.footer-section h4 {
    font-size: .8rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-weight: 500;
}

.footer-section ul {
    list-style: none;
    padding: 0 0 20px 0;
}

/* Vertical Links for Other Sections */
.footer-section ul li {
    
    font-size: .8rem;
    color: #ccc;
    line-height: 1.2rem;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #00eeff;
    text-decoration: underline;
}

/* Social Media Links Styling */
.social-links {
    display: flex;
    gap: 2em; /* Space between icons */
    padding: 0;
    list-style: none;
}

.social-links li {
    display: inline-block; /* Align social links horizontally */
}

.social-links li a {
    font-size: 1.4rem;
    color: #ccc;
    transition: color 0.3s;
}

.social-links li a:hover {
    color: #00eeff;
}

/* Separator Line */
.footer-separator {
    width: 100%;
    border: 0;
    border-top: 1px solid rgba(57, 215, 255, 0.3);
    margin: 0 0 10px 0;
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    justify-content: left;
    align-items: left;
    gap: 2em;
    
    margin-top: 0;
    font-size: .8rem;
    color: #989898;
    letter-spacing: 1px;
}

.footer-bottom p {
    margin-top: .8rem;
}

/* Logo Position */
.footer-logo img {
    max-width: 40px;
    margin-bottom: .2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-section {
        flex-basis: 100%;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-logo img {
        margin-bottom: 0;
        margin-top: .8rem;
    }

    .footer-bottom p {
        margin: 0 0 2rem 0;
    }
    
    
}



.highlight {
    font-weight: 600;
    font-size: .8rem;
    color: #989898;
}