:root{
    /* ===== Colors ===== */
    --primary-color: #0A192F;
    --highlight-color: #4FCAB3;
    --highlight-color_2: rgba(79, 202, 179, 0.1);
    --text-color: #f8f8ff;

    /* ====== Transition ====== */
    --easing: cubic-bezier(0.645,0.045,0.355,1);
    --transition: all 0.25s cubic-bezier(0.645,0.045,0.355,1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Bitter', serif;
}

/* BTNS & CMPNTS */

button.btn.btn-outline-primary {
    background-color: transparent;
    color: var(--highlight-color);
    border: 2px solid var(--highlight-color);
}

button.btn.btn-outline-primary a {
    color: var(--highlight-color);
    text-decoration: none;
    padding-right: 6rem;
    padding-left: 6rem;
}

button.btn.btn-outline-primary:hover {
    background-color: var(--highlight-color);
    border: 2px solid var(--highlight-color);
    opacity: 0.6;
}

button.btn.btn-outline-primary:hover a {
    color: var(--text-color);
}

.icons {
    color: var(--highlight-color);
}


.icons:hover {
    opacity: 0.5;
    transition: 0.2;
}

span {
    color: var(--highlight-color);
    font-family: Arial, sans-serif; /* Set the font family */
    font-weight: bold; /* Set the font weight */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

span:hover {
    text-decoration: underline;
    transition: var(--transition);
}

.heading-line {
    border: none; /* Remove the default line */
    border-top: 2px solid var(--highlight-color); /* Add a custom border on top */
    margin-top: 20px; /* Adjust the margin as needed */
    width: 350px; /* Adjust the width of the line as needed */
    opacity: 1;
}

/* NAVBAR */

nav {
    background-color: var(--primary-color);
}

nav .navbar-brand {
    display: inline-block;
    color: var(--highlight-color);
    padding: 10px 10px; 
    border: 2px solid var(--highlight-color);
    border-radius: 50%;
    transition: transform 0.5s ease, border-color 0.3s ease; 
}

nav .navbar-brand:hover {
    color: var(--highlight-color);
    transform: rotate(360deg);
}

.navbar .nav-link {
    color: var(--text-color);
}

.navbar .nav-link:hover {
    color: var(--highlight-color);
    text-decoration: underline;
    transition: all 0.7s ease;  
}

#nav-icon i {
    color: var(--highlight-color);
}

.navbar .navbar-toggler-icon {
    background-color: #4FCAB3;
}

/* INTRO */
.container-animation {
    color: #e5e5e5;
    font-size: 3rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    flex-direction: row; 
    justify-content: flex-start; 
}

#intro-welcome {
    margin-right: 20px;
    align-self: center; /* vertically center the text in the flex container */
}

.animation {
    height: 2.9rem; /* adjust this according to your need */
    overflow: hidden;
    display: inline-block; 
    vertical-align: middle; /* aligns the animation with the middle of adjacent texts */
}

.animation > div {
    line-height: 2.81rem; /* give a line height instead of height */
    margin-bottom: 2.81rem;
    padding-left: 25px;
    vertical-align: middle; /* aligns the text in the middle of its line height */
}

.animation div:first-child {
    animation: text-animation 8s infinite;
}

  @keyframes text-animation {
    0% {margin-top: 0;}
    10% {margin-top: 0;}
    20% {margin-top: -5.62rem;}
    30% {margin-top: -5.62rem;}
    40% {margin-top: -11.24rem;}
    60% {margin-top: -11.24rem;}
    70% {margin-top: -5.62rem;}
    80% {margin-top: -5.62rem;}
    90% {margin-top: 0;}
    100% {margin-top: 0;}
  }

/* Basic setup for the animation */
@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply the animation to the container's direct text children */
.container-fluid.intro > .container > *:not(.container-animation) {
    opacity: 0; /* Set initial opacity to 0 to hide the elements */
    animation-name: textReveal;
    animation-duration: 1s; /* Animation duration can be adjusted */
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 0.5s; /* A slight delay for better effect */
}

/* Stagger the animation for different child elements */
.container-fluid.intro #intro-welcome {
    animation-delay: 0.6s;
}

.container-fluid.intro #intro-heading2 {
    animation-delay: 0.8s;
}

.container-fluid.intro #intro-text {
    animation-delay: 1s;
}

.container-fluid.intro .btn, .container-fluid.intro .icons {
    animation-delay: 1.2s;
}

.intro {
    background-color: var(--primary-color);
    color: #F6F5FF;
}

.intro-text {
    padding: 70px 0 200px 0;
}

#intro-welcome {
    color: var(--highlight-color)
}

#intro-heading {
    color: #838383;
    font-size: 80px;
    font-family: 'Alfa Slab One', cursive;
}

#intro-text {
    line-height: 45px;
}
 
/* ABOUT ME */

.about-me {
    background-color: var(--primary-color);
    color: #F6F5FF;
    padding-bottom: 200px;
}

.about-me p {
    line-height: 30px;
}

.profile-picture-container img {
    border-radius: 50%; /* Use 50% to make it a perfect circle */
    border: 2px solid var(--highlight-color);
    transition: cirlc 0.3s ease-in-out;
}

.profile-picture-container:hover #profile-picture {
    border-width: 5px; /* Adjust the border width as desired */
    border-color: var(--highlight-color); /* Adjust the border color as desired */
  }

  @media (max-width: 767px) {
    #profile-picture {
        width: 70%; /* or whatever size you prefer for smaller screens */
        height: auto;
        display: block;
        margin: 0 auto; /* centers the image when its width is reduced */
    }
}

.techstack li {
    list-style-type: none;
}

.techstack li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* for solid icons */
    content: "\f121"; 
    margin-right: 12px;
    color: var(--highlight-color);
}

/* CV Section */
.cv-section {
    background-color: var(--primary-color);
    color: #F6F5FF;
    padding-bottom: 200px;
}

.stations-li {
    list-style-type: none;
    padding-left: 0; 
}

.stations-li li {
    margin-bottom: 15px;
    color: var(--highlight-color);
}

.stations-li li:hover{
    background-color: var(--highlight-color_2);
}

.education-li {
    list-style-type: none;
    padding-left: 0; 
}

.education-li li {
    margin-bottom: 15px;
    color: var(--highlight-color);
}

.education-li li:hover{
    background-color: var(--highlight-color_2);
}

/* PORTFOLIO */

.portfolio-section {
    background-color: var(--primary-color);
    color: var(--text-color);
}

.carousel .card {
    border: 2px solid var(--highlight-color);
    background-color: var(--primary-color);
    color: var(--text-color);
}

.card-img {
    position: relative;
    overflow: hidden;
    transition: all 0.s ease;
}

.card-img-top {
    transition: transform 0.2s;
  }

  .card-img:hover img {
    filter: grayscale(50%);
  }

.card-img-top {
    transition: transform 0.2s;
}

.card-img:hover img {
    filter: grayscale(20%);
}
  
  .card-img:hover .download-btn {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.carousel .card .card-title {
    color: var(--highlight-color);
}

#card-btn {
    background-color: var(--text-color-lightbg);
    border: none;
    align-self: center;
}

#card-btn a {
    padding: 12px;
}

#card-btn a:hover {
    border: 2px solid var(--highlight-color);
    border-radius: 15%;
}

#card-btn a i {
    color: var(--highlight-color);
}

/* Custom CSS to style the carousel controls */
#carouselExample .carousel-control-prev,
#carouselExample .carousel-control-next {
    position: relative;
    /* top: 50%; */
    color: var(--highlight-color);
    transform: translateY(-50%);
    background-color: transparent;
    font-size: 24px; /* Control font size */
}

#carouselExample .carousel-control-prev-icon,
#carouselExample .carousel-control-next-icon {
    height: 80px;
    width: 100px;
    background-size: 40px;
    background-color: var(--highlight-color);
    border: 2px solid var(--highlight-color);
}

/* CONTACT */

.contact-form {
    background-color: var(--primary-color);
    color: var(--text-color);
    padding-top: 10rem;
    padding-bottom: 10rem;
    line-height: 40px;
}

/* FOOTER */

footer {
    background-color: var(--primary-color);
    color: var(--highlight-color);
    padding-bottom: 5px;
}