/* ////////// General rules for all modules \\\\\\\\\\ */
.space-200 {
    margin-top: 8%;
}
.space-100 {
    margin-top: 3%;
}
.space-40 {
    margin-top: 2%;
}
.hrani {
    animation-name: hranimation;
    animation-duration: 2s;
}
@keyframes hranimation {
    from {width: 0%;}
    to {width: 100%;}
}

/* ////////// Navigation animation \\\\\\\\\\ */
.navitem-01 {
    animation-name: navitem-ani;
}
.navitem-02 {
    opacity: 0;
    animation-name: navitem-ani;
    animation-delay: 0.25s;
}
.navitem-03 {
    opacity: 0;
    animation-name: navitem-ani;
    animation-delay: 0.5s;
}
.navitem-04 {
    opacity: 0;
    animation-name: navitem-ani;
    animation-delay: 0.75s;
}
.navitem-05 {
    opacity: 0;
    animation-name: navitem-ani;
    animation-delay: 1s;
}
.navitem-06 {
    opacity: 0;
    animation-name: navitem-ani;
    animation-delay: 1.25s;
}
.navitem-07 {
    opacity: 0;
    animation-name: navitem-ani;
    animation-delay: 1.5s;
}
.navitem-08 {
    opacity: 0;
    animation-name: navitem-ani;
    animation-delay: 1.75s;
}
@keyframes navitem-ani {
    from {transform: translatey(30%); opacity: 0;}
    to {transform: translatey(0px); opacity: 100;}
}


/* ////////// Intro module animation \\\\\\\\\\ */
    /* Styling for the news banner container */
    .news-banner {
        overflow: hidden;
        height: auto; /* Adjust the height as needed */
        display: flex;
    }

    /* Styling for individual news items */
    .news-item {
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    /* Keyframes for scrolling animation */
    @keyframes scroll {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }
/* ////////// Intro module animation [end] \\\\\\\\\\ */

/* ========== DESKTOP ========== */
@media only screen and (min-width: 769px) {
    /* ////////// Navigation \\\\\\\\\\ */
    .navbackground {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        background-color: white;
        overflow-x: hidden;
        animation-name: navopacity;
        animation-duration: 0.5s;
      }
    @keyframes navopacity {
        from {opacity: 0;}
        to {opacity: 100;}        
    }
    .navigation {
        position: relative;
        width: 100%;
        padding-bottom: 6%;
    }
    .nav-item {
        text-align: center;
        margin-top: 6%;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
    }
    @keyframes navitemani {
        from {transform: translatey(30%); opacity: 0;}
        to {transform: translatey(0px); opacity: 100;}
    }
    .nav-item-link {
        text-decoration: none;
        transition: color 0.5s ease;
        padding-left: 1%;
        padding-right: 1%;
    }
    /* ////////// Navigation [end] \\\\\\\\\\ */
    /* ////////// Intro module \\\\\\\\\\ */
    .intro {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }
    .intro-desktop {
        display: initial;
    }
    .intro-mobile {
        display: none;
    }
    .intro-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .intro-btm {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    /* ////////// Intro module [end] \\\\\\\\\\ */
    /* ////////// Client image module \\\\\\\\\\ */
    .client-image {
        width: 100%;
        padding-top: 42.85%; /* 3:7 Aspect Ratio (divide 3 by 7 = 0.4285)  */
        background-color: grey;
    }
    /* ////////// Client image module [end] \\\\\\\\\\ */
    /* ////////// My process module \\\\\\\\\\ */
    .process-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 1vw;
        align-self: stretch;
    }
    .process-content {
        display: flex;
        height: 20vw;
        padding: 2%;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        flex: 1 0 0;
        border-radius: 20px;
    }
    /* ////////// My process module [end] \\\\\\\\\\ */
    .cv-center {
        text-align: center;
    }
    /* ////////// Workplace module \\\\\\\\\\ */
    .workplace-title {
        margin: 2% 0% 0% 0%;
    }
}

/* ========== MOBILE ========== */
@media only screen and (max-width: 768px) {
    /* ////////// Intro module \\\\\\\\\\ */
    /* ////////// Navigation \\\\\\\\\\ */
    .navbackground {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 999;
        background-color: white; /* Content background color */
        animation-name: navopacity;
        animation-duration: 0.5s;
    }
    @keyframes navopacity {
        from {opacity: 0;}
        to {opacity: 100;}        
    }
    .navigation {
        width: 100vw; /* Set a fixed or percentage width as needed */
        height: 100vh; /* Set a maximum height as needed */
        margin: auto;
        overflow: auto; /* Allow content to be scrollable */
    }
    .nav-item {
        text-align: center;
        margin-top: 6%;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        opacity: 0;
    }
    .nav-item-link {
        text-decoration: none;
        transition: color 0.5s ease;
    }
    /* ////////// Navigation [end] \\\\\\\\\\ */
    .intro {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }
    .intro-desktop {
        display: none;
    }
    .intro-mobile {
        display: initial;
    }
    .about-desktop {
        display: none;
    }
    .about-mobile {
        display: initial;
    }
    .intro-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .intro-btm {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    /* ////////// Intro module [end] \\\\\\\\\\ */
    /* ////////// Client image module \\\\\\\\\\ */
    .client-image {
        width: 100%;
        padding-top: 42.85%; /* 3:7 Aspect Ratio (divide 3 by 7 = 0.4285)  */
        background-color: grey;
    }
    /* ////////// Client image module [end] \\\\\\\\\\ */
    /* ////////// My process module \\\\\\\\\\ */
    .process-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        align-self: stretch;
    }
    .process-content {
        display: flex;
        height: 36vw;
        padding: 4%;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        flex: none;
        border-radius: 14px;
    }
    /* ////////// My process module [end] \\\\\\\\\\ */
    .cv-center {
        text-align: center;
    }
    /* ////////// Workplace module \\\\\\\\\\ */
    .workplace-title {
        margin: 4% 0% 0% 0%;
    }
    .xtra-space-mobile {
        margin: 8% 0% 0% 0%;
    }
}