/* Import Comfortaa font */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&family=Readex+Pro:wght@700&display=swap');

:root {
    --primary-color: #f6f5f1;
    --primary-light-color: #d7ff7b;
    --primary-accent-color: #4D61F4;

    --bg-color-light: #d1edf9;
    --bg-color-blue: #cc88ff;
    --post-color: #62EEA8;
    --delete-color: #FF9F9F;
    --light-color: #999999;
    --grey-color: #535755;
    --dark-color: #0a3e27;
    --dark-sub-color: #0a3e27a2;
    --btn-color: #007bff;
    --btn-shadow-color: rgba(85, 102, 255, 0.3);

    --primary-font: 'Poppins', sans-serif;
    --seconday-font: 'Poppins', sans-serif;

    /* Typography */
    --ff-base: 'Comfortaa', sans-serif;
    --ff-header: 'Readex Pro', sans-serif;
    --ff-accent: 'Staatliches', cursive;

    /* Main header */
    --hdr-size: 1.75rem;
    --hdr-weight: 700;
    --hdr-kerning: 0.05em;

    /* Body text */
    --body-size: 1rem;
    --body-weight: 400;
    --body-kerning: 0.05em;

    /* Small text */
    --sm-size: 0.75rem;
    --sm-weight: 300;
    --sm-kerning: 0.01em;

    --border-width: 3px;
    --element-border-radius: 0.85rem;

    --button-height: 5px;
    --small-button-height: 2px;

    --element-padding: 0.8em;

    --maximum-width: 320px;
    --main-margin-x: 7.5vw;
    --main-margin-y: 4vh;

    /* initial positions (percentage) */
    --p1x: 20%;
    --p1y: 30%;
    --p2x: 85%;
    --p2y: 10%;
    --p3x: 25%;
    --p3y: 70%;
    --p4x: 75%;
    --p4y: 80%;
}

html,
body {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

body {
    color: var(--dark-color);
    background-color: var(--light-color);
    /*font-family: var(--primary-font);*/
    font-family: var(--ff-base);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    letter-spacing: var(--body-kerning);
    line-height: 1.6;
    height: 100vh;
    background:
        radial-gradient(circle at var(--p1x) var(--p1y), #cc88ff 0%, transparent 65%),
        radial-gradient(circle at var(--p2x) var(--p2y), #d1edf9 0%, transparent 65%),
        radial-gradient(circle at var(--p3x) var(--p3y), #cc88ff 8%, transparent 60%),
        radial-gradient(circle at var(--p4x) var(--p4y), #d1edf9 3%, transparent 70%);
    background-blend-mode: screen;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
}

main {
    padding-top: 0%;
    /*padding-right: 2rem;
    padding-left: 2rem;
    height: 100vh;*/
    flex: 1
}

/* Main headers */
h1,
.main-header {
    font-family: var(--ff-header);
    font-size: var(--hdr-size);
    font-weight: var(--hdr-weight);
    letter-spacing: var(--hdr-kerning);
    text-transform: uppercase;
    color: var(--dark-color);
    /*margin: 1rem 0;*/
}

/* Small text */
.small-text {
    font-family: var(--ff-base);
    font-size: var(--sm-size);
    font-weight: var(--sm-weight);
    letter-spacing: var(--sm-kerning);
    color: var(--dark-sub-color);
}

.mobile-only {
    display: none;
}

/* Buttons */
button,
.login-btn,
.google-login-btn {
    font-family: var(--ff-base);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    letter-spacing: var(--body-kerning);
    text-transform: uppercase;
    cursor: pointer;
    padding: 1.2em 1.5em;
    border-radius: var(--element-border-radius);
    width: 100%;
}



button:hover,
.login-btn:hover,
.google-login-btn:hover {
    cursor: pointer;
}


/* === Structure === */

.container {
    max-width: var(--maximum-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}


/* === Navbar === */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    color: var(--dark-color);

    margin-top: var(--main-margin-y);
    margin-left: var(--main-margin-x);
    margin-right: var(--main-margin-x);
    /* Ensure it doesn't overflow horizontally */
    width: auto;

}

.navbar-center {
    display: flex;
    gap: 2rem;
    /* Spacing between center links */
    align-items: center;
    justify-content: center;
    flex: 1;
    /* Takes up available space to stay centered */
}


.logo-img {
    width: 80px;
    margin-left: 1rem;
}

.logo {
    font-size: 3rem;
    text-decoration: none;
    color: var(--primary-color);
}

.navbar a {
    font-family: var(--ff-header);
    /* Readex Pro */
    font-size: 0.75rem;
    /* small tier */
    letter-spacing: var(--hdr-kerning);
    text-transform: uppercase;
    text-decoration: none;
    align-items: center;
    transition: color 0.2s ease, font-size 0.2s ease;
    color: var(--dark-color);
}

.navbar-right {
    /*margin-left: auto;                shove this container to the right */
    display: flex;
    justify-content: flex-end;
    /* align its children to its right edge */
    align-items: center;
    background: transparent;
    gap: 2rem;
}

.navbar a:hover,
.dropdown .dropbtn:hover {
    color: var(--primary-light-color);
    /* your accent color */
    font-size: calc(0.75rem * 1.1);
}

/* Match the other nav items visually */
.home-link {
    display: flex;
    /* place icon & text in a row */
    align-items: center;
    font-family: var(--ff-header);
    font-size: 0.75rem;
    letter-spacing: var(--hdr-kerning);
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem 1.2rem;
    margin-top: 1rem;
    color: var(--primary-color);
    transition: color 0.2s ease, font-size 0.2s ease;
}

/* Space between icon and label */
.home-link .home-icon {
    width: 1rem;
    /* tweak size to match your text */
    height: auto;
    margin-right: 0.5rem;
    display: block;
}

.home-link:hover {
    color: var(--primary-light-color);
    font-size: calc(0.75rem * 1.1);
}

.home-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.2s ease, font-size 0.2s ease;
}


.nav-logo {
    height: 2.5rem;
    width: auto;
    /* Maintains aspect ratio */
    object-fit: contain;
    cursor: pointer;
}

/* Style the dropdown button */
.dropdown {
    position: relative;
    /* This makes the positioning of the dropdown content relative to this container */
    display: inline-block;
}

.dropdown .dropbtn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, font-size 0.2s ease;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--primary-color);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-top: 1.5rem;
    right: 0;
    left: auto;
    white-space: nowrap;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: var(--dark-color);
    padding: 1rem 1rem;
    text-decoration: none;
    display: block;
    text-align: left;
    /* Ensure text is aligned to the left */
}


/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* === Hamburger Menu === */
.hamburger {
    display: none;
    font-size: 15px;
    cursor: pointer;
    background: transparent;
    color: var(--dark-color);
}

.closebtn {
    display: none;
    background: transparent;
}

.hide {
    display: none;
}



/* === Forms === */
input,
button {
    padding: var(--element-padding);
    border-radius: var(--element-border-radius);
    width: 100%;
    font-size: 1.1em;
    text-align: center;
    box-sizing: border-box;
    background-color: var(--primary-color);
}


.idtoken-container {
    position: relative;
    width: 100%;
}

.idtoken-label {
    display: block;
    font-size: var(--sm-size);
    /* small text tier */
    font-weight: var(--sm-weight);
    color: var(--dark-sub-color);
    margin-bottom: 0.25rem;
    /* small gap to the field */
}

/* Reuse your token‐field layout */
.idtoken-field {
    position: relative;
    width: 100%;
}

/* Ensure your input has room on the right for both the button and the fade */
.idtoken-container .idtoken-input {
    width: 100%;
    padding-right: 2.5rem;
    /* make this ≥ button width */
    box-sizing: border-box;
    font-family: var(--ff-base);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    letter-spacing: var(--body-kerning);
}

/* Icon button inside the input */
.idtoken-container .copy-token-btn {
    position: absolute;
    right: 0;
    /* flush to the right edge */
    top: 0%;
    bottom: 0%;
    width: 3rem;
    /* matches input padding-right */
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    /* above the fade */
}

.idtoken-container .copy-token-btn img {
    display: block;
    width: 1.25rem;
    /* tweak to taste */
    height: 1.25rem;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* 4. Optional hover/focus styling */
.idtoken-container .copy-token-btn:hover img,
.idtoken-container .copy-token-btn:focus img {
    opacity: 1;
}

/* a subtle horizontal divider between fields */
.field-divider {
    border: none;
    /* remove default hr styling */
    height: 1px;
    /* thin line */
    background-color: var(--dark-sub-color);
    opacity: 0.3;
    /* soften the color */
    margin: 1.5rem 0;
    /* space above and below */
    width: 100%;
    /* span the full container */
}

.manage-subscription-container {
    position: relative;
    width: 100%;

}

.logo-loader,
.logo-title {
    /* 1. Force exact same height */
    height: 3.0rem;

    /* 2. Layout settings */
    width: 100%;
    max-width: 70%;
    margin: 0 auto 0.25rem;
    /* Same margins */

    /* 3. Centering */
    display: flex;
    /* Flex is critical for centering */
    align-items: center;
    justify-content: center;
}

.logo-title {
    display: none;
    /* Hidden initially (JS switches this to flex) */
    opacity: 0;
    font-size: var(--hdr-size);
    font-weight: var(--hdr-weight);
    color: var(--primary-color);
    transition: opacity 1s ease-in;
}

/* 4. CRITICAL: Make sure the image fits the height */
.logo-icon {
    max-height: 100%;
    /* Image will never be taller than 80px */
    width: auto;
    /* Maintain aspect ratio */
    object-fit: contain;
}

.fade-out {
    opacity: 0 !important;
}

.fade-in {
    opacity: 1 !important;
}


/*
.logo-title .logo-icon{
    height: 3.0rem;    2.5rem by default 
    width: auto;               
    display: block;
}

.logo-title .main-header{
    margin: 0;
    font-size : 1rem;
}
*/
/* Auth page styles - Login, Signup, Forgot Password */

.auth-page_container {
    display: flex;
    flex-direction: column;
    align-items: center;



}

.login-form-container {
    display: flex;
    justify-content: center;
    /* align-items: center;  */
    width: 100%;
    max-width: 600px;
    background: var(--primary-color);
    padding: 3rem 4.5rem;
    border-radius: var(--element-border-radius);
    box-shadow: 0 5px 20px var(--btn-shadow-color);
}

.login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.login-form h2 {
    text-align: center;

}

/* Dashboard “Welcome back” paragraph */
.login-form>a {
    width: 100%;
    /* match the .login-btn’s 100% width */
    text-align: center;
    /* center the text */
    margin-bottom: 1rem;
    /* give a bit of breathing room before the button */
    color: var(--dark-sub-color);
}

.input-group {
    margin-bottom: 1.5rem;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

.input-group input {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: var(--element-border-radius);
    font-family: var(--ff-base);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    letter-spacing: var(--body-kerning);
    width: 100%;
}

.input-group,
.login-btn,
.google-login-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-group {
    flex-direction: column;

}

.login-btn {
    background-color: var(--primary-accent-color);
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-weight: 500;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-btn:hover {
    transition: all 0.2s ease;
    transform: scale(1.05);
}

.google-login-btn {
    color: var(--dark-color);
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    border: 1px solid rgba(0, 0, 0, 0.25);
}

.google-login-btn:hover {
    transition: all 0.2s ease;
    transform: scale(1.05);
}

.google-btn-logo {
    width: 1.375em;
}

.alt-signin-divider {
    margin: 1em 0;
    text-align: center;
    font-size: 0.875em;
    color: var(--dark-color);
}

.signup-link-container {
    text-align: center;
    margin-top: 1em;
}

.error-msg {
    color: red;
    font-size: 1rem;
    margin-top: 0.5em;
    text-align: center;
}

.login-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-color);
    text-decoration: none;
    font-weight: 500;
    max-width: 10rem;
    margin-top: 1rem;
    height: 2.5rem;
    cursor: pointer;
    background-color: var(--primary-color);
    border: none;
}

.login-link-btn:hover {
    background-color: var(--dark-sub-color);
    border: none;
    color: var(--primary-color);
}

.plan-switcher {
    display: inline-flex;
    border: 1px solid var(--bg-color-blue);
    border-radius: 1rem;
    overflow: hidden;
    margin: 1rem auto;
}

.plan-switcher input {
    display: none;
    /* hide the raw radio */
}

.plan-switcher label {
    padding: 0.6rem 1.0rem;
    cursor: pointer;
    background: var(--primary-color);
    font-family: var(--ff-base);
    color: var(--dark-sub-color);
    font-size: 0.7rem;
    user-select: none;
    transition: background-color 0.2s, color 0.2s;
}

/* Highlight the selected label */
.plan-switcher input:checked+label {
    background-color: var(--btn-color);
    color: var(--primary-color);
}


.plan-cards {
    max-width: 400px;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Base card styling */
.plan-card {
    width: 100%;
    background: var(--primary-color);
    border: 1px solid var(--bg-color-blue);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    display: none;
    flex-direction: column;
    transform: scale(1.03);
    transition: transform 0.2s, box-shadow 0.2s;
}


/* Title */
.plan-card__title {

    font-size: 1.0rem;
    color: var(--dark-sub-color);
    margin: 0%;
    text-align: center;
}

.plan-card__image {
    width: 40%;
    /* fill the card’s width */
    height: auto;
    /* or your preferred height */
    display: block;
    margin: auto;
    /* space to the title */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    object-fit: cover;
    /* if you still want cropping behavior */
    object-position: center;
}



.plan-card__saving {
    font-size: var(--sm-size);
    color: var(--dark-sub-color);
    text-align: center;
    margin: 0;
}

.plan-card__saving-amount {
    color: var(--btn-color);
    font-weight: var(--hdr-weight);
}

/* Price */
.plan-card__price {
    text-align: center;
    margin: 0%;
}

.plan-card__price-number {
    font-family: var(--ff-header);
    font-weight: var(--hdr-weight);
    color: var(--dark-color);
    font-size: 2.5rem;
    display: inline-block;
}

/* Features list */
.plan-card__features {
    list-style: none;
    padding: 0;
    margin-left: 2rem;
    margin-right: 2rem;
}

.plan-card__features li {
    margin: 0.5rem 0;
    padding-left: 2.0rem;
    position: relative;
    color: var(--dark-sub-color);
    font-family: var(--ff-base);
    font-weight: var(--sm-weight);
    font-size: var(--sm-size);
    letter-spacing: var(--sm-kerning);
    background: url("/miwa-maroon/static/images/check.png") no-repeat left center;
    /* your check icon */
    background-size: 1rem 1rem;
    /* size it to match your text */
    list-style: none;
}

.plan-card__features li::before {
    content: none;
    position: absolute;
    left: 0;
    color: var(--post-color);
}

/* Subscribe button */
.plan-card__btn {
    background-color: var(--primary-accent-color);
    border: 1px solid rgba(0, 0, 0, 0.25);
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--ff-base);
    font-size: var(--body-size);
    font-weight: var(--body-weight);
    letter-spacing: var(--body-kerning);
    text-transform: uppercase;
    padding: 1.2em 1.5em;
    margin-top: 0.75rem;
    border-radius: var(--element-border-radius);
    width: 100%;
    border: none;
    text-align: center;
    transition: background-color 0.2s, transform 0.1s;
}

.plan-card__btn:hover {
    background-color: var(--primary-accent-color);
}

.plan-card__btn:active {
    transform: scale(0.98);
}

.username-group {
    margin-bottom: 0;
}

.username-error {
    color: #e74c3c;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    display: none;
    text-align: center;
}

/* Contents page grid */
.contents-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
    width: 90%;
    margin-top: 1.0rem;
    justify-content: center;
    max-width: 700px;
}


/* Individual content cards (clickable thumbnails) 
.content-card {
    display: block;
    background: #fff;

    border-radius: var(--element-border-radius);
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.15);
    --scroll-skew: 0deg;


    transform: skewY(var(--scroll-skew)) translate3d(0, 0, 0);

    transition: box-shadow 0.2s, transform 0.2s linear;
}*/

/* Hover lift effect 
.content-card:hover {
    transform: skewY(var(--scroll-skew)) translate3d(0, -4px, 0);
    box-shadow: 0 24px 32px rgba(0, 0, 0, 0.2);
}*/

/* Card image */
.content-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* enforce 16:9 */
    object-fit: cover;
    display: block;
}

/* Card title */
.content-card__title {
    font-family: var(--ff-base);
    font-size: 1.2rem;
    font-weight: var(--hdr-weight);
    margin: 0.75rem 0 0 0;
    color: var(--dark-color);
}

.content-card__shortdesc {
    font-family: var(--ff-base);
    font-size: var(--sm-size);
    font-weight: var(--sm-weight);
    color: var(--dark-sub-color);
    padding-bottom: 1rem;
}

/* Content page layout */
.content-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 1rem;
    text-align: center;
}

.content-page__gif {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* enforce 16:9 */

    border-radius: var(--element-border-radius);
}

/* Video embed responsive wrapper */
.content-page__video-container {
    position: relative;
    width: 100%;

}

.content-page__video-container .content-page__video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* enforce 16:9 */

    border-radius: var(--element-border-radius);
}

.content-page__title {
    font-family: var(--ff-header);
    font-size: 1.75rem;
    letter-spacing: var(--body-kerning);
    font-weight: var(--hdr-weight);
    margin: 0.75rem 0 0 0;
    color: var(--dark-color);
    text-align: left !important;
}

.content-page__shortdesc {
    font-family: var(--ff-base);
    font-size: 0.75rem;
    font-weight: var(--sm-weight);
    color: var(--dark-sub-color);
    padding-bottom: 0.75rem;
    margin: 0%;
    text-align: left;
}

/* Tech info */
.content-page__techinfo {
    text-align: left;
    margin-bottom: 1.5rem;
    font-family: var(--ff-base);
    font-size: var(--sm-size);
    font-weight: var(--sm-weight);
    color: var(--light-color);
    margin: 0.25rem 0;
}

.content-page__techinfo h4 {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    font-family: var(--ff-header);
    font-size: var(--body-size);
    color: var(--light-color);
}

/* Paragraphs inside techinfo */
.content-page__techinfo p {
    margin: 0.75rem 0;
}

/* Lists inside techinfo */
.content-page__techinfo ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.content-page__techinfo li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

.content-page__techinfo li::before {
    content: '✅';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1rem;
    line-height: 1;
}

.toggle-btn {
    background: none;
    border: none;
    color: var(--dark-sub-color);
    cursor: pointer;
    font-size: 0.75rem;
    text-decoration: underline;
}

/* Buttons row */
.content-page__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.content-page__buttons .btn {
    flex: 1 1 45%;
    max-width: 200px;
}

.download-btn {
    flex: 1 1 45% !important;
    background-color: var(--btn-color);
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-weight: 500;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.download-btn:hover {
    transition: all 0.2s ease;
    transform: scale(1.05);
}

.tutorial-btn {
    flex: 1 1 45% !important;
    background-color: red;
    border: 1px solid rgba(0, 0, 0, 0.25);
    font-weight: 500;
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.tutorial-btn:hover {
    transition: all 0.2s ease;
    transform: scale(1.05);
}

/* Error message under download */
#download-error {
    margin-top: 0.5rem;
    color: var(--delete-color);
}

/* Return link under the buttons */
.return-link {
    margin-top: 1rem;
    display: flex;
    /* place icon & text in a row */
    align-items: center;
    font-size: var(--sm-size);
    justify-content: center;
    text-decoration: none;
    color: var(--light-color);
}

.return-link:hover {
    text-decoration: underline;
}

.login-link {
    text-decoration: none;
}

.login-link:hover {
    text-decoration: underline;
}

/* Footer Styles */

footer {
    background-color: transparent;
    /* Light grey background */
    color: var(--dark-sub-color);
    /* Dark grey text */
    font-family: var(--primary-font);
    text-align: center;
    /* Centering the content */
    /*padding: 3rem 1rem 0.5rem;  Padding above and below */
    font-size: .5rem;
    /* Standard font size */
    position: static !important;
    clear: both;
    margin-bottom: var(--main-margin-y);
    margin-left: var(--main-margin-x);
    margin-right: var(--main-margin-x);
}

.simple-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding: 0 1rem;  Padding on the sides */
}

.simple-footer a {
    color: var(--dark-sub-color);
    /* Standard link color */
    text-decoration: none;
    /* No underlines on links */
    margin: 0 5px;
    /* Margins for spacing */
}

.simple-footer a:hover {
    text-decoration: underline;
    /* Underline on hover for better user interaction */
}


/* === Password‐toggle icon styling === */
.password-container {
    position: relative;
}

.password-container .toggle-password-icon {
    position: absolute;
    top: 50%;
    /* align at halfway down the input */
    right: 0.8rem;
    /* same horizontal offset as before */
    transform: translateY(-50%);
    /* pull it up by half its own height */
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* remove width/height if you want the image itself to size it */
}

.password-container .toggle-password-icon img {
    display: block;
    width: 1.25rem;
    /* tweak to taste */
    height: 1.25rem;
}

/* A. New wrapper around input + icon */
.password-field {
    position: relative;
    width: 100%;
}

/* B. Make room for the icon inside the input */
.password-field input {
    width: 100%;
    /* make this ≥ button width */
    box-sizing: border-box;
}

/* C. Absolutely position the icon inside that wrapper */
.password-field .toggle-password-icon {
    position: absolute;
    right: 0;
    /* flush to the right edge */
    bottom: 0;
    /* flush to the bottom */
    width: 3rem;
    /* matches input padding-right */
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

/* D. Size your eye images */
.password-field .toggle-password-icon img {
    width: 1.25rem;
    /* tweak as needed */
    height: 1.25rem;
    display: block;
}

#plan-options {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.plan-option label {
    display: block;
    padding: 1rem;
    border: 1px solid var(--dark-sub-color);
    /* light border */
    border-radius: var(--element-border-radius);
    background-color: var(--light-color);
    /* white-ish background */
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.plan-option label:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-light-color);
}

.plan-option input[type="radio"] {
    margin-right: 0.75rem;
    accent-color: var(--primary-light-color);
}

.plan-option strong {
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

.plan-desc {
    display: block;
    color: var(--dark-sub-color);
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* Highlight the checked plan card */
.plan-option input[type="radio"]:checked+strong,
.plan-option input[type="radio"]:checked~.plan-desc {
    color: var(--dark-color);
}

#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    /* Blur the background slightly for a modern look (optional) */
    backdrop-filter: blur(5px);
    z-index: 99999;
    /* Always on top */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s;
}

.logo-loader {
    color: var(--primary-color);
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.0rem;
    font-weight: bold;
    letter-spacing: 2px;

    /* Transition for fading out */
    opacity: 1;
    transition: opacity 0.8s ease-out;
}

.loader-text {
    color: var(--primary-color);
    font-family: 'Comfortaa', sans-serif;
    /* Your site font */
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px;
    position: relative;
    animation: pulse 1.5s infinite;
    /* Gentle breathing effect */
}

/* Optional: Make the text pulse */
@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}


/* The class to hide it */
.loader-hidden {
    opacity: 0;
    visibility: hidden;
}


/* --- SCROLL CONTAINER (The Magic) --- */

#portfolio-page {
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* We handle scrolling in .scroll-container */
}

/* --- 2. HEADER & FOOTER WRAPPERS --- */
/* We maintain your margins but force them to float on top */

#portfolio-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    pointer-events: none;
    /* Allows clicks to pass through empty areas */
}

/* Re-enable clicks on the actual navbar content */
#portfolio-header-wrapper .navbar {
    pointer-events: auto;
}

#portfolio-footer-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    pointer-events: none;
}

#portfolio-footer-wrapper footer {
    pointer-events: auto;
}

.scroll-container {
    height: 100vh;
    width: 100vw;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    position: relative;
    padding: 0%;
    z-index: 1;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
    display: none;
}

.section {
    /* 1. Set height to exactly the viewport height */
    height: 100vh;
    /* Fallback for older browsers */
    height: 100dvh;
    /* "Dynamic Viewport Height" - fixes jumpiness on mobile URL bars */

    /* 2. Set width to fill the container */
    width: 100%;

    /* 3. CRITICAL: Include padding in the height calculation */
    /* This allows you to keep your specific padding values without breaking the 100vh limit */
    box-sizing: border-box;

    /* Snap alignment */
    scroll-snap-align: start;

    /* Layout Logic */
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;

    /* YOUR EXISTING PADDING (Unchanged) */
    padding-left: calc(var(--main-margin-x, 8.5rem) * 1.0);
    padding-right: calc(var(--main-margin-x, 8.5rem) * 1.0);
    padding-top: calc(var(--main-margin-y, 3.5rem) + 40px);
    padding-bottom: calc(var(--main-margin-y, 3.5rem) + 40px);
}

/* --- COMMON UTILS --- */
.btn-primary {
    font-family: var(--ff-header);
    display: inline-block;
    background-color: var(--primary-accent-color);
    color: var(--primary-color);
    padding: clamp(0.6rem, 1.2vh, 0.8rem) clamp(1.2rem, 2vw, 1.6rem);
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 1vh;
    box-shadow: 0 0.35rem 0.75rem var(--btn-shadow-color);
    align-self: flex-start;
    font-size: clamp(0.7rem, 0.9vw, 0.9rem);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-light-color);
    color: var(--primary-accent-color);
    transform: scale(1.05);
}



/* --- RIGHT SIDEBAR NAV --- */
.right-sidebar {
    position: fixed;
    /* Move left by half the main margin */
    right: calc(var(--main-margin-x, 8.5rem) / 1.75);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2000;
    width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* This centers Arrows and Dots vertically */
    gap: 15px;
}

.nav-arrow {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: var(--dark-sub-color);
    padding: 7.5px;

    /* Ensure arrow center aligns with box center */
    display: flex;
    justify-content: center;
    width: 100%;
    transition: color 0.2s;
}

.nav-arrow:hover {
    color: var(--primary-accent-color);
}

.nav-dots {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    align-items: center;
    /* Forces dots to center of the 40px column */
}

.nav-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    /* Standard hit area */
    cursor: pointer;

    /* Icon Style */
    font-size: auto;
    color: var(--dark-sub-color);
    /* Inactive color (Light Grey/Blue) */
    transition: all 0.3s ease;
}

.nav-item:hover {
    color: var(--primary-accent-color);
    transform: scale(1.1);
}

.nav-item.active {
    color: var(--primary-accent-color);
    /* Royal Blue */
    font-size: 18px;
    /* Slightly larger */
    background: rgba(85, 102, 255, 0.1);
    /* Subtle glowing background circle */
    border-radius: 50%;
}


.highlight-text {
    /* 1. The visual style: Yellow at the bottom 40%, Transparent top */
    background-image: linear-gradient(to top, var(--primary-light-color) 40%, transparent 40%);

    /* 2. Initial State: Width is 0% (Hidden) */
    background-size: 0% 100%;

    background-repeat: no-repeat;
    background-position: left bottom;

    /* 3. The Animation: Ease the width change */
    transition: background-size 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;
    /* 0.3s delay */

    /* Ensure text sits on top */
    text-decoration: none;
    display: inline;
}

/* The Active State (Added by JS) */
.highlight-text.in-view {
    background-size: 100% 100%;
    /* Expands from left to right */
}


/* --- HERO SECTION --- */
.hero-section {
    /* Ensure content flows vertically so Stats bar is relative, not absolute */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Distribute space: Content Top, Stats Bottom */

    /* 2. Remove fixed gaps that force overflow */
    gap: 2vh;

    /* Ensure no scrollbars appear */
    overflow: hidden;
    padding-left: calc(var(--main-margin-x, 8.5rem) * 1.25);
    padding-right: calc(var(--main-margin-x, 8.5rem) * 1.25);
}

.split-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 0 1 auto;
    /* Take up remaining height, but allow shrinking */
    min-height: 0;
    /* Allows this flex child to shrink smaller than its content if needed */
    height: auto;
    /* Let flexbox handle height */
    margin-top: auto;

}

.hero-text-col {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Prevent text from fighting for space */
    flex-shrink: 0;
}

.hero-title-container {
    width: 100%;
}

.hero-top-line {
    font-size: 3rem;
    font-family: var(--ff-accent);
    font-weight: 900;
    color: var(--dark-color);
    letter-spacing: 2.0;
    margin-bottom: 5px;
    transform-origin: left;
}

.hero-fit-text {
    font-weight: 900;
    font-family: var(--ff-accent);
    color: var(--dark-color);
    letter-spacing: 2.0;
    white-space: nowrap;
    /* Prevent wrapping so it fits width */
    text-transform: uppercase;
}

.hero-fit-text .highlight-text {
    background-position: left bottom 10px;
}


.hero-subtext {
    font-size: clamp(0.1rem, 0.8vw + 0.8vh, 1.15rem);
    /* Scale text based on viewport height */
    color: var(--dark-sub-color);
    margin-top: clamp(1rem, 2vh, 2rem);
    /* Use vh for margins so they shrink on short screens */
    max-width: 90%;
    font-weight: 500;
    flex-shrink: 0;
}

.hero-visual-col {
    width: 50%;
    height: auto;
    /* Fill the split-layout height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Center image vertically */

    min-height: 0;
    /* Allow shrinking */
}

.mascot-img {
    width: 90%;

    /* Height Limit  */
    max-height: 45vh;

    /* 1. Force the image pixels to sit at the BOTTOM of the container */
    object-fit: contain;
    object-position: bottom center;

    /* 2. Reduce the physical margin between image box and icons */
    margin-bottom: 2rem;
}

.tech-stack {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.tech-stack img {
    height: 2rem;
    /* Scale icons with screen height */
    opacity: 0.8;
    transform: scale(1.0);
    transition: all 0.3s ease;
}

.tech-stack img:hover {
    transform: scale(1.05);
}

.lang-badges {
    display: flex;
    gap: 15px;
}

.badge {
    border: 1px solid var(--dark-sub-color);
    border-radius: 50px;
    /* Round rectangle */
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-family: var(--ff-header);
    color: var(--dark-sub-color);
    letter-spacing: 0.05em;
    font-weight: 700;
    white-space: nowrap;
    background: var(--bg-color-light);
    opacity: 1.0;
    transform: scale(1.0);
    transition: all 0.3s ease;
}

.badge:hover {
    border-color: var(--primary-accent-color);
    opacity: 1.0;
    color: var(--primary-accent-color);
    transform: scale(1.05);
}

.stats-bar {
    display: flex;
    width: auto;
    justify-content: space-between;
    padding: 1rem 5rem;
    margin-top: 0;
    flex-shrink: 0;
    margin-bottom: auto;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 20%;
    border-right: 1px solid;
    border-color: var(--primary-accent-color);
}

.stat-item:last-child {
    border: none;
}

.stat-item strong {
    font-size: 1.5rem;
    font-family: var(--ff-accent);
    color: var(--dark-color);
}

.stat-item span {
    font-size: 0.9rem;
    color: var(--dark-sub-color);
    margin-top: 5px;
}

/* --- PROJECT SECTION (Split) --- */
.project-layout {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    position: relative;
}

.project-details {
    width: 25%;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-title-wrapper {
    margin-right: -15vw;
    /* Overlap logic */
    position: relative;
    z-index: 10;

    /* FLEXBOX ALIGNMENT MAGIC */
    display: flex;
    flex-direction: column;
    /* This aligns the right edge (end) of Main and Sub titles */
    align-items: flex-end;

    /* Ensure the wrapper fits the content tightly */
    width: fit-content;
}

.proj-main-title {
    font-size: 4.5rem;
    font-family: var(--ff-accent);
    font-weight: 900;
    color: var(--dark-color);
    line-height: 1;
    text-transform: uppercase;
    text-align: right;
    /* Ensure multi-word titles align right */

    /* White stroke to separate from image overlap */
    text-shadow: 3px 3px 2px var(--bg-color-light);
    white-space: nowrap;
}

.proj-sub-title {
    font-size: 1rem;
    font-family: var(--ff-accent);
    letter-spacing: 0.25rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--dark-sub-color);
    margin-top: -10px;
    /* Tight stacking */
    margin-bottom: 20px;
    text-align: right;

    text-shadow: 1px 1px 1px var(--bg-color-light);
    white-space: nowrap;
}

.project-desc {
    color: var(--dark-sub-color);

    max-width: 300px;
    font-size: 0.75rem;
}

.link-text {
    color: var(--dark-sub-color);
    font-size: 0.75rem;
    text-decoration: none;
    /* Remove the old underline */
    /* Display inline-block is required for 'transform' to work */
    display: inline;

    /* --- HIGHLIGHT LOGIC --- 
    background-image: linear-gradient(to top, var(--primary-light-color) 20%, transparent 20%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left bottom 4px;

    transition:
        background-size 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
        transform 0.2s ease;*/
}

/* SCROLL STATE: Expands the yellow line 
.link-text.in-view {
    background-size: 100% 100%;
}*/

/* HOVER STATE: Scales up ("Gets bit bigger") 
.link-text:hover {
    transform: scale(1.025);
    background-size: 100% 100%;
}*/

.mini-gallery {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

/* Thumbnail Button */
.thumb-btn {
    width: 2.5rem;
    /* Fixed size */
    height: 2.5rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    background: var(--primary-accent-color);
    border: 3px solid transparent;
    /* Reserve space for border to prevent jumping */
    transition: all 0.2s ease;

    /* Reset default button styles */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.thumb-btn:hover {
    border-color: var(--primary-light-color);
    /* Yellow */
    transform: scale(1.05);
}

/* Active State - Blue (Overrides Hover if needed, or stacks) */
.thumb-btn.active {
    border-color: var(--primary-light-color);
    /* Royal Blue */
    transform: scale(1.1);
    box-shadow: 0 2px 5px var(--btn-shadow-color);
    z-index: 2;
}

.thumb-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    /* Let click pass to button */
}

.mini-gallery img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border: 2px solid transparent;
    cursor: pointer;
}

.mini-gallery img.active {
    border-color: var(--primary-accent-color);
}

.play-overlay {

    position: absolute;
    /*
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);*/
    justify-content: center;
    color: var(--primary-color);
    font-size: 14px;
    opacity: 0.8;
    text-shadow: 0 1px 3px var(--btn-shadow-color);
}


.gallery-nav-btn {
    width: 40px;
    height: 40px;
    /* Smaller than thumbs (60px) for hierarchy */
    border-radius: 50%;
    /* Perfect Circle */
    border-color: var(--primary-accent-color);
    background: var(--primary-accent-color);
    box-shadow: 0 0.35rem 0.75rem var(--btn-shadow-color);
    color: var(--primary-color);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: all 0.2s ease;

    /* Align it vertically with the 60px thumbnails */
    align-self: center;
    margin-left: 5px;
}

.gallery-nav-btn i {
    font-size: 16px;
    /* Optical adjustment for the icon center */
    margin-left: 2px;
}

/* Hover State */
.gallery-nav-btn:hover {

    background-color: var(--primary-light-color);
    color: var(--primary-accent-color);
    transform: scale(1.05);
    box-shadow: 0 0.35rem 0.85rem var(--btn-shadow-color);
}

/* Active/Click Effect */
.gallery-nav-btn:active {
    transform: scale(0.95);
}

.project-media {
    width: 75%;
    /* Instead of fixed height, we can rely on aspect-ratio if supported */
    /* or keep height constraint for layout safety */
    height: auto;
    display: flex;
    align-items: center;
}

.media-container {
    width: 100%;
    /* FORCE 16:9 ASPECT RATIO */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
}

/* 1. Generic Image/Video Styling */
.generic-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensure full image is seen, use 'cover' to crop */
    display: block;
}

/* 2. YouTube Iframe Styling (Specific Class) */
.content-page__video {
    width: 100%;
    height: 100%;
    border: none;
}

/* --- EXPERIENCE SECTION (Grid) --- */
.custom-header-group {
    text-align: center;
    margin-bottom: 1rem;
}

.header-main-title {
    font-size: 2.5rem;
    font-family: var(--ff-accent);
    font-weight: 900;
    color: var(--primary-accent-color);
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: 2px;
}

.header-sub-title {
    font-family: var(--ff-accent);
    font-size: 1rem;
    color: var(--dark-color);
    letter-spacing: 2px;
    margin-top: 5px;
}

.experience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    /* Updated Gap */
    gap: 20px;
    width: 100%;
    height: auto;
    /* Ensure it tries to fit container */
    align-items: stretch;
    /* Prevent grid itself from causing scroll if possible */
    min-height: 0;
}

.exp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    justify-content: flex-start;

    /* Ensure card content doesn't overflow horizontally */
    width: 100%;
    min-width: 0;
}

.exp-img-wrapper {
    flex: 0 0 18vh;
    max-height: 160px;
    /* Cap it at 160px */
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 10px;
}

.exp-img {
    width: 60%;
    max-width: 140px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    overflow: hidden;
    /* Ensures shadow doesn't spill out */
}

.icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    /* Ensure it sits below the shadow */
    position: relative;
    z-index: 0;
}

.exp-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 0;
    /* Sits at the bottom */
}

/* CENTER: The Label (The Anchor) */
.card-label {
    white-space: normal;
    line-height: 1.1;
    font-family: var(--ff-accent);
    flex: 0 0 auto;
    font-size: 1.7rem;
    letter-spacing: 1.5px;
    font-weight: 900;
    color: var(--dark-color);
    margin: 10px 0;
    text-transform: uppercase;

    /* Ensure it doesn't overflow horizontally */
    max-width: 100%;
    word-wrap: break-word;
}

.exp-bottom-wrapper {
    flex: 1 1 auto;
    /* Takes available space below label */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Pushes text to top, link to bottom */
    width: 100%;
}

.card-text {
    color: var(--dark-sub-color);
    font-size: 0.9rem;
    padding: 0 10px;
    margin-bottom: 20px;
    text-align: center;
    overflow: hidden;
}

.exp-link {
    margin-top: auto;
    display: flex;
    justify-content: center;
    /* Centers the icon horizontally */
}

/* Style the Anchor Tag */
.exp-link a {
    color: var(--primary-accent-color);
    /* Royal Blue */
    font-size: 1.5rem;
    text-decoration: none;
    /* Removes default underline */

    /* Display inline-block is required for transform to work */
    display: inline-block;
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Hover Effect on the Anchor */
.exp-link a:hover {
    transform: scale(1.2);
    /* Pop effect */

}

@media (max-width: 1024px) {
    :root {
        --main-margin-x: 3rem;
        /* Reduce side margins */
    }

    .right-sidebar {
        right: 10px;
        /* Move dots closer to edge */
        transform: translateY(-50%) scale(0.8);
        /* Shrink dots */
    }

    .hero-section {
        justify-content: center;
    }

    .project-layout {
        flex-direction: column;
        /* Stack vertically */
        justify-content: center;
        gap: 20px;
    }

    .project-media {
        width: 90%;
        /* Much Bigger! */
        height: auto;
        order: 1;
        /* Media on Top */
        flex: 0 0 auto;
    }

    .project-details {
        width: 90%;
        order: 2;
        /* Text Bottom */
        padding-right: 0;
        align-items: center;
        /* Center align */
        flex: 0 1 auto;
        /* Allow shrinking if needed */
    }

    /* Reset Title positioning for stack */
    .project-title-wrapper {
        margin-right: 0;
        align-items: center;
        width: 100%;
    }

    .proj-main-title {
        text-align: center;
        font-size: 4rem;
        letter-spacing: 0.15rem;
    }

    .proj-sub-title {
        text-align: center;
        font-size: 1rem;
        padding-top: 0.35rem;
    }

    .project-desc {
        text-align: center;
        max-width: 100%;
    }

    .mini-gallery {
        justify-content: center;
    }

    .project-media{
        height: clamp(5rem, 50vh, 48vw);
        width: auto;

        aspect-ratio: 16/9;
    }

    .media-container{
        height: clamp(5rem, 50vh, 48vw);
        width: auto;


    }

    .custom-header-group {
        margin-top: 15px;
        margin-bottom: 5px;
        flex-shrink: 0;
        text-align: center;
    }

    /* Experience: 2 Columns */
    .experience-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Ensure it fits on one screen without scrolling the page */
        overflow: auto;
    }

    /* Shrink elements to fit beautifully in 2 rows */
    .exp-img-wrapper {
        flex: 0 0 12vh;
        /* Smaller image area */
        margin-bottom: 5px;
    }

    .exp-img {
        width: 60%;
        /* Smaller icons */
        max-width: 125px;
    }

    .card-label {
        font-size: 1.5rem;
        margin: 5px 0;
        white-space: nowrap;
    }

    .card-text {
        font-size: 0.65rem;
        /* Clamp text aggressively to fit 2 rows */
    }

    /* Stats Bar can stay or hide depending on height */
    .stats-bar {
        display: flex;
        justify-content: space-evenly;
        /* Even spacing */
        padding-top: 2rem;
    }

    .stats-bar span {
        font-size: 0.6rem;
    }
}

/* MOBILE (Max Width 768px) */
@media (max-width: 768px) {
    :root {
        --main-margin-x: 1.5rem;
        --main-margin-y: 0.25rem;
    }

    /* --- HERO --- */
    .hero-section {
        padding-top: 45px;
        padding-bottom: 20px;
        justify-content: center;
    }

    .split-layout {
        flex-direction: column;
        gap: 0;
        height: 100%;
        width: 100%;
    }

    .hero-visual-col {
        width: 100%;
        height: 55%;
        order: 1;
        flex: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .mascot-img {
        flex: 0 0 80%;
        /* Fixed 80% slot */
        height: 76%;
        width: auto;
        max-width: 95%;
        max-height: 76%;
        /* Fill the slot */
        margin-bottom: auto;
        object-fit: contain;
        object-position: bottom center;
    }

    .tech-stack {
        flex: 0 0 10%;
        /* Fixed 10% slot */
        height: 10%;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tech-stack img {
        height: auto;
        max-height: 70%;
        /* Fit comfortably inside the 10% strip */
        width: auto;
        transition: none;
        /* remove hover scale for performance/stability */
    }

    /* 3. Badges: 10% of Visual Col */
    .lang-badges {
        flex: 0 0 10%;
        /* Fixed 10% slot */
        height: 10%;
        width: 100%;
        margin: 0;
        padding: 0;
        gap: 6px;
        display: flex;
        align-items: center;
        /* Center vertically in slot */
        justify-content: center;
        align-content: center;
    }

    .badge {
        /* Dynamic font size relative to viewport height to ensure fit */
        font-size: 1.85vh;
        padding: 0.4em 0.55em;
        border-width: 1px;
        line-height: 0.9;
    }



    .hero-text-col {
        width: 100%;
        height: 45%;
        order: 2;
        align-items: center;
        text-align: center;
        flex: none;
        /* Disable flex scaling */
        justify-content: flex-start;
        /* Align text to top of this block */
        padding-top: 2.5px;
        display: flex;
        flex-direction: column;
    }

    .hero-title-container {
        flex: 0 0 40%;
        height: 40%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* Center vertical */
        align-items: center;
        text-align: center !important;
        width: 90%;
        /* prevent horizontal touch */
        margin: 0 auto;
    }

    .hero-top-line {
        font-size: 7vh !important;
        margin-bottom: 0;
        line-height: 0.9 !important;
        flex: 0 0 auto;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }

    .hero-fit-text {
        font-size: 7vh !important;
        line-height: 0.9 !important;
        white-space: nowrap;
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero-subtext {
        height: auto;
        margin: 0;
        padding-top: 1vh;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        /* Dynamic font size */
        font-size: clamp(0.5rem, 1.4vh, 0.9rem);
        line-height: 1.15;

    }

    .stats-bar {
        flex: 0 0 20%;
        height: 20%;
        padding: 0%;
        padding-top: 1vh;
        margin: 0%;

        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: 90%;
    }

    /* STAT ITEMS (Center Text) */
    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

        /* Spread width equally */
        flex: 1;

        /* RESTORED: The slight vertical border */
        border-right: 1px solid rgba(13, 43, 38, 0.15);
    }

    .stat-item:last-child {
        border-right: none;
    }

    .stat-item strong {
        font-size: 2.5vh;
    }

    .stat-item span {
        font-size: 1.0vh;
    }

    .btn-primary {
        display: none !important;
    }

    /* --- PROJECTS --- */
    /* Reuse the Tablet Logic (Stacked) but adjust fonts */
    .proj-main-title {
        font-size: 8vw;
        letter-spacing: 0.1rem;
    }

    .proj-sub-title {
        font-size: 1rem;
        padding-top: 0.5rem;
    }

    .project-media {
        width: 100%;
    }

    /* Full width on mobile */
    .project-details {
        width: 100%;
    }

    /* --- EXPERIENCE --- */
    .experience-section {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 45px;
        padding-bottom: 20px;
        flex-direction: column;
        justify-content: flex-start;
        /* Ensure it fills screen but allows flex growth */
        height: 100dvh;
        overflow: hidden;
    }

    .custom-header-group {
        flex: 0 0 10%;
        height: 10%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .header-main-title {
        font-size: 3.5vh;
        /* Dynamic fit */
        line-height: 1;
    }

    .header-sub-title {
        font-size: 1.5vh;
        margin-top: 5px;
    }


    /* GRID CONTAINER */
    .experience-grid {
        flex: 0 0 90%;
        height: 90%;
        display: flex;
        flex-direction: column;
        gap: 1.5vh;
        /* Small gap using viewport height */
        padding-bottom: 1vh;
        padding-left: 3vw;
        padding-right: 3vw;
        width: auto;
    }

    /* --- THE CARD (Base / Inactive State) --- */
    .exp-card {
        width: auto;
        display: grid;
        /* Image fixed, text flexible */
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            "image label"
            "image text";
        column-gap: 15px;
        /* Space between image and text */

        padding: 1.5vh;
        /* Padding relative to height */
        border-radius: 2vh;
        background: var(--primary-color);
        box-shadow: 0 0.2rem 0.7rem var(--btn-shadow-color);
        border: none;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);

        /* INACTIVE STATE: Weighted to 23 parts */
        flex: 23;
        align-items: center;
        /* Vertical Center */
    }

    /* --- ACTIVE CARD STYLE (Flying Carpet Look) --- */
    .exp-card.active {
        background: var(--primary-accent-color);
        flex: 31;
        align-items: flex-start;
        grid-template-rows: auto 1fr;
    }

    /* 1. IMAGE WRAPPER */
    .exp-img-wrapper {
        grid-area: image;
        /* Square based on height available in the grid row/flex item */
        height: 100%;
        max-height: 15vh;
        aspect-ratio: 1/1;

        /* Remove padding and margin logic from before */
        padding: 0;
        margin: 0;

        border-radius: 1.5vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        /* Ensure image crop */
    }

    /* WIREFRAME STYLE: Active Image = White Background */
    .exp-card.active .exp-img-wrapper {
        background: var(--primary-color);
        align-self: start;
        /* Move to top */
    }

    .exp-img {
        width: 100%;
        height: 100%;
    }

    .exp-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .card-label {
        grid-area: label;
        font-size: 2.2vh;
        /* Fits 23% card */
        line-height: 1.1;
        margin: 0 0 0.5vh 0;
        color: var(--dark-color);
        text-align: left;
        align-self: flex-end;
        /* Push to bottom of label area */
    }

    .exp-card.active .card-label {
        color: var(--primary-light-color);
        font-size: 2.5vh;
        /* Slightly larger in active */
        margin-top: 0.5vh;
        align-self: start;
        /* Top align in active */
    }

    .card-text {
        grid-area: text;
        font-size: clamp(0.4rem, 1.3vh, 0.7rem);
        color: var(--dark-sub-color);
        line-height: 1.2;
        text-align: left;
        padding-left: 0;
        /* Inactive: Clamp 1 line */
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        align-self: center;
        /* Top of text area */
    }

    .exp-card.active .card-text {
        color: var(--primary-color);
        /* Active: Show all */
        -webkit-line-clamp: unset;
        display: block;
        overflow-y: auto;
        /* Scroll if absolutely needed */
        height: auto;
        /* Fill remaining space */
        align-self: start;
    }

    /* Content Wrapper (Removed as we switched to Grid layout inside card) */
    .exp-bottom-wrapper {
        display: contents;
        /* Let children participate in parent grid */
    }

    /* 4. HIDE LINK */
    .exp-link {
        display: none !important;
    }

    .right-sidebar {
        display: none;
    }
}

/* === LANDSCAPE MOBILE FIX (Short Height) === */
@media (max-height: 600px) and (orientation: landscape) {
    :root {
        --main-margin-y: 0.25rem;
        /* Reduced margin */
    }

    /* General reset for section padding */
    .section {
        padding-top: 40px;
        /* Just enough for top nav */
        padding-bottom: 5px;
        justify-content: center;
        align-items: center;
    }

    /* Force side-by-side for Hero */
    .split-layout {
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: auto;
        padding-top: 0;
    }

    .hero-section {
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    /* LEFT SIDE: Visuals */
    .hero-visual-col {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0;
        order: 2;
        /* Second */
    }

    .mascot-img {
        max-height: 65%;
        /* Reduced to fit tech stack below */
        width: auto;
        object-fit: contain;
        margin: 0;
        flex: 0 1 auto;
    }

    /* RESTORE stack/badges (Tablet style, scaled for height) */
    .tech-stack {
        display: flex;
        gap: 10px;
        margin-top: 2vh;
        margin-bottom: 1vh;
        justify-content: center;
        flex-wrap: wrap;
    }

    .tech-stack img {
        height: 5vh;
        /* Responsive small icons */
        width: auto;
        opacity: 0.9;
    }

    .lang-badges {
        display: flex;
        gap: 6px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .badge {
        font-size: 2.5vh;
        /* Readable small text */
        padding: 0.3vh 0.8vh;
        border-width: 1px;
    }

    /* RIGHT SIDE: Text */
    .hero-text-col {
        width: 50%;
        height: auto;
        justify-content: center;
        align-items: flex-start;
        /* Align left */
        padding: 0 1rem;
        order: 1;
        /* First */
    }

    .hero-title-container {
        height: auto;
        flex: 0 1 auto;
        margin-bottom: 1vh;
    }

    /* Use vh for responsive text in landscape 
    .hero-top-line {
        font-size: 10vh !important; 
        text-align: left !important; 
    }
    
    .hero-fit-text {
        font-size: 10vh !important;
        text-align: left !important;
    }*/

    .hero-subtext {
        font-size: 2.25vh;
        margin-top: 1vh;
        margin-bottom: 0.25vh;
        text-align: left;
        max-height: none;
        flex: 0 1 auto;
    }

    .stats-bar {
        margin-top: 0;
        border-top: none;
        align-self: center;
        justify-content: space-evenly;
        gap: 1rem;
        padding: 0;
        padding-bottom: 7vh;
        width: 90%;
    }

    .stat-item {
        border-right: none;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        padding-left: 10px;
        align-items: flex-start;
    }

    .stat-item:first-child {
        border-left: none;
        padding-left: 0;
    }

    .stat-item strong {
        font-size: 4vh;
        line-height: 0.8;
    }

    .stat-item span {
        font-size: 2vh;
    }

    .experience-section {
        padding-top: 40px;
        /* Standard column flex for header + grid */
        flex-direction: column;
    }

    .custom-header-group {
        /* Keep header small at top */
        height: auto;
    }

    .header-main-title {
        font-size: 4vh;
        /* Dynamic fit */
        line-height: 1;
    }

    .header-sub-title {
        font-size: 2.0vh;
        margin-top: 0.0vh;
        line-height: 0.75;
    }


    .experience-grid {
        flex: 0 0 90%;
        height: 90%;
        /* Switch back to Grid for 4 cols */
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1vh;
        width: 100%;
        padding: 0 10px;
        overflow: hidden;
        /* No scroll needed if fits */
        align-items: stretch;
        /* Stretch cards to full height */
    }

    /* Override Mobile Card Styles for Grid Layout */
    .exp-card {
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        /* Revert to Column Flex inside card (Image Top, Text Bottom) */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 0;

        /* Reset flex basis from mobile accordion */
        flex: 1 !important;

        /* Reset internal grid layout */
        grid-template-columns: none;
        grid-template-rows: none;
        grid-template-areas: none;
    }

    /* Active State reset - no expansion in grid mode */
    .exp-card.active {
        flex: 1 !important;
        background: var(--primary-color);
        /* Keep uniform or highlight if desired */
        align-items: center;
        /* Keep center */
        box-shadow: 0 0.2rem 0.7rem var(--btn-shadow-color);
        /* If you want active highlight, keep blue bg, but layout stays same */
    }

    /* Image Wrapper for Grid */
    .exp-img-wrapper {
        width: 100%;
        height: auto;
        /* Constrain height tightly */
        max-height: 35%;
        aspect-ratio: 1/1;
        margin: 0 0 1vh 0;
        align-self: center;
        background: transparent;
    }

    .exp-img img {
        object-fit: contain;
    }

    /* Labels & Text for Grid - Tight Fit */
    .card-label {
        font-size: 4vh;
        /* Responsive text */
        line-height: 1.1;
        margin: 0.5vh 0;
        text-align: center;
        align-self: center;
        white-space: normal;
        /* Wrap text */
    }

    .card-text {
        font-size: clamp(0.1rem, 2vh, 0.5rem);
        text-align: center;
        align-self: center;
        margin-top: 1vh;
        margin-bottom: 1vh;
        display: block;
        /* Show minimal text or hide if too small */
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .exp-bottom-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        width: 100%;
        height: 100%;
    }

    /* Ensure active text doesn't break layout */
    .exp-card.active .card-text {
        display: block;
        color: var(--dark-sub-color);
        /* Reset color */
    }

    .exp-card.active .card-label {
        color: var(--dark-color);
        /* Reset color */
        align-self: center;
    }

    .exp-link {
        margin-top: 1vh;
    }

    .project-layout {
        flex-direction: row;
        display: flex;
        width: 100%;
        height: auto;
        align-items: center;
        justify-content: center;
    }

    .project-details {
        width: 25%;
        padding-right: 1vw !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        order: 1; 
    }

    .project-title-wrapper {
        margin-right: 0;
        /* Overlap logic */
        position: relative;
        z-index: 10;

        /* FLEXBOX ALIGNMENT MAGIC */
        display: flex;
        flex-direction: column;
        /* This aligns the right edge (end) of Main and Sub titles */
        align-items: flex-end;

        /* Ensure the wrapper fits the content tightly */
        width: fit-content;
    }

    .proj-main-title {
        font-size: 12vh;
        font-family: var(--ff-accent);
        font-weight: 900;
        color: var(--dark-color);
        line-height: 1;
        text-transform: uppercase;
        text-align: left;
        /* Ensure multi-word titles align right */

        /* White stroke to separate from image overlap */
        text-shadow: 3px 3px 2px var(--bg-color-light);
        white-space: nowrap;
    }

    .proj-sub-title {
        font-size: 3vh;
        letter-spacing: 0.25rem;
        line-height: 1.25;
        margin-top: -1vh;
        /* Tight stacking */
        margin-bottom: 2vh;
        text-align: right;

        text-shadow: 1px 1px 1px var(--bg-color-light);
        white-space: nowrap;
    }

    .project-desc {
        color: var(--dark-sub-color);
        text-align: left;
        font-size: clamp(0.1rem, 2.2vh, 0.75rem); /* Compact readable text */
        max-width: 100%;
        line-height: 1.3;
        margin-top: 1vh;
    }

    .link-text {
        color: var(--dark-sub-color);
        font-size: clamp(0.1rem, 2.2vh, 0.75rem);
        text-decoration: none;
        display: inline;
    }

    /* SCROLL STATE: Expands the yellow line 
.link-text.in-view {
    background-size: 100% 100%;
}*/

    /* HOVER STATE: Scales up ("Gets bit bigger") 
.link-text:hover {
    transform: scale(1.025);
    background-size: 100% 100%;
}*/

    .mini-gallery {
        display: flex;
        gap: 5px;
        margin-top: 2vh;
    }

    /* Thumbnail Button */
    .thumb-btn {
        width: 7vh;
        /* Fixed size */
        height: 7vh;
        border: 2px solid transparent;
    }

    .play-overlay {

        position: absolute;
        justify-content: center;
        color: var(--primary-color);
        font-size: 3.5vh;
        opacity: 0.8;
    }


    .gallery-nav-btn {
        width: 5vh;
        height: 5vh;
    }

    .gallery-nav-btn i {
        font-size: 3.5vh;
        /* Optical adjustment for the icon center */
    }


    .project-media {
        width: 67%;
        /* Instead of fixed height, we can rely on aspect-ratio if supported */
        /* or keep height constraint for layout safety */
        height: auto;
        aspect-ratio: 16 / 9;
        display: flex;
        align-items: center;
        order: 2;
        margin-right: 2.5vw;
    }

    .media-container {
        width: 100%;
        height: 100%;
        
        overflow: hidden;
        position: relative;
    }
}

/* === CONTACT PAGE STYLES === */

.contact-split {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 5rem;
    /* Optional specific padding for contact page */
    box-sizing: border-box;
    align-items: center;
}

/* Left Section: Icons (60%) */
.contact-icons-container {
    flex: 0.6;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Right Section: Text (40%) */
.contact-text-container {
    flex: 0.4;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    /* Align left */
    padding-left: 2rem;
}

/* Floating Icon Buttons */
.contact-icon-btn {
    position: absolute;
    /* Allows random placement */
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: white;
    color: var(--dark-color);
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* Slightly stronger shadow */
    transition: transform 0.3s ease, background-color 0.3s, color 0.3s;

    /* Animation defaults */
    animation: float-anim 6s ease-in-out infinite;
}

.icon-large {
    width: 6rem;
    /* Approx 96px */
    height: 6rem;
    font-size: 2.5rem;
    z-index: 3;
}

.icon-medium {
    width: 4.5rem;
    /* Approx 72px */
    height: 4.5rem;
    font-size: 1.8rem;
    z-index: 2;
}

.icon-small {
    width: 3.5rem;
    /* Approx 56px */
    height: 3.5rem;
    font-size: 1.4rem;
    z-index: 1;
}

.contact-icon-btn:hover {
    transform: scale(1.2) !important;
    /* Override inline styles if needed */
    background-color: var(--primary-light-color);
    color: var(--dark-color);
    z-index: 10;
}

/* Keyframes for Floating Animation */
@keyframes float-anim {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Contact Text Styling */
.contact-title {
    font-family: 'Staatliches', cursive;
    font-size: 5rem;
    line-height: 0.9;
    color: var(--dark-color);
    /* Assuming dark text on light bg or white on dark */
    margin: 0;
    /* If background is dark (portfolio-body default), use white text */
    color: var(--dark-color);
}

.contact-subtitle {
    font-family: var(--ff-base);
    font-size: 1.2rem;
    font-weight: 300;
    color: var(--dark-color);
    opacity: 0.8;
    margin-top: 1.5rem;
    line-height: 1.6;
}

/* Responsive adjust */
@media screen and (max-width: 1024px) {
    .contact-split {
        flex-direction: column;
        /* Stacks vertically: Icons Top, Text Bottom */
        padding: 2rem 1rem;
    }

    /* 1. Icons Area: Top 55% of screen */
    .contact-icons-container {
        flex: none;
        /* Disable flex scaling, use fixed height logic */
        width: 100%;
        height: 55vh;
        /* Takes up top half */
        margin-bottom: 0;
    }

    /* 2. Text Area: Bottom portion */
    .contact-text-container {
        flex: none;
        width: 100%;
        height: auto;
        align-items: center;
        justify-content: flex-start;
        /* Align text near the top of this section */
        text-align: center;
        padding: 1rem 0 4rem 0;
        /* Add bottom padding for scrolling */
    }

    .contact-title {
        font-size: 3.5rem;
        /* Smaller title for tablet/mobile */
    }

    .contact-subtitle {
        font-size: 1rem;
        max-width: 80%;
        /* Prevent text hitting edges */
    }
}

/* Mobile Specific Adjustments (Small screens) */
@media screen and (max-width: 768px) {
    .contact-icons-container {
        height: 50vh;
        /* Slightly smaller height on phones */
    }

    /* 3. Scale down the floating icons so they fit in the circle */
    .icon-large {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 1.8rem;
    }

    .icon-medium {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.4rem;
    }

    .icon-small {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }

    .contact-title {
        font-size: 2.8rem;
        /* Even smaller for phones */
    }
}

/* Responsive */
@media screen and (max-width: 768px) {




    .navbar-right {
        position: fixed;
        top: 0;
        left: -100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        background-color: var(--primary-color);
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        overflow-y: auto;
        transition: 0.5s;
        /* Smooth transition for sliding in/out */
        padding: 0;
        padding-bottom: 40rem;
        margin: 0;
        z-index: 4;
    }

    .navbar-right a {
        color: black;
        padding: 15px;
        text-decoration: none;
        font-size: 2rem;
        display: block;
        /* Ensure links take full width */
        transition: 0.3s;
        /* Smooth transition for hover effect */
    }

    .navbar a:hover {

        background-color: inherit;
    }

    .dropdown {
        width: 100%;
    }

    .dropdown-content {
        position: relative;
        width: 100%;
        right: auto;
        text-align: center;
        padding: 0;
        margin-top: 0;
        box-shadow: none;
        overflow-y: auto;

    }

    .dropdown-content a {
        padding: auto;
        text-align: center;
        font-size: 1.6rem;
        color: gray;
    }


    .hamburger {
        display: block;
        position: absolute;
        right: var(--main-margin-x);
        top: var(--main-margin-y);
        font-size: 1.5rem;
    }

    .closebtn {
        display: block;
        position: absolute;
        top: 0;
        right: 1rem;
        font-size: 3rem;
        cursor: pointer;
        color: black
    }

    .navbar-center {
        display: none;
    }

    /* 2. SHOW THE MOBILE LINKS INSIDE HAMBURGER MENU */
    /* We override the global 'display: none' */
    .navbar-right .mobile-only {
        display: block;
    }

    .simple-footer {
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .simple-footer p {
        margin: 0;
    }

    .login-form-container {
        display: flex;
        justify-content: center;
        /* align-items: center;  */
        width: 100%;
        max-width: 400px;
        background: var(--primary-color);
        padding: 1.5rem 2.5rem;
        border-radius: var(--element-border-radius);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
}

.section-title {
    font-family: var(--ff-accent);
    font-size: 2.5rem;;
    color: var(--dark-color);
    margin-top: 2.0rem;
    margin-bottom: 1.2rem;
    /* Increased margin below title */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    padding-bottom: 0rem;
    /* More space between text and underline */
}

/* Updated container for better spacing */
.base-page_container {
    margin: 0 calc(var(--main-margin-x, 1.5rem) * 1.05);
    width: auto;
}

/* === CAROUSEL STYLES === */
.highlights-section {
    margin: calc(var(--main-margin-y, 1.5rem) * 0.0) 0;
    /* Increased separation between sections */
    width: 100%;
    overflow: hidden;
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    /* Softer rounded corners */
    overflow: hidden;
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    /* Smoother easing */
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
}


/* Wrapper for the 16:9 Image inside the card */
.highlight-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    /* STRICT 16:9 */
    overflow: hidden;
    position: relative;
}

.highlight-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

.highlight-card:hover .highlight-image {
    transform: scale(1.05);
}

.highlight-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4rem 3rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 45%, transparent 70%);
    color: var(--primary-color);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.highlight-overlay h3 {
    margin: 0;
    font-family: var(--ff-header);
    font-size: 2.5rem;
    /* Much Larger Title */
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.highlight-overlay p {
    margin: 0;
    font-family: var(--ff-base);
    font-size: 1.1rem;
    opacity: 0.9;
    max-width: 70%;
    line-height: 1.6;
}

.highlight-overlay-home {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%; /* Cover full height */
        background: var(--btn-shadow-color);  /*Black overlay */
        backdrop-filter: blur(8px); /* Blur the image behind */
        -webkit-backdrop-filter: blur(8px); /* Safari support */
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        justify-content: center; /* Center Vertically */
        align-items: center; /* Center Horizontally */
        text-align: center;
        padding: 1rem;
        pointer-events: none; /* Let clicks pass through if needed */
      }

      .hero-welcome-text {
        font-family: var(--ff-accent);
        font-size: clamp(1rem, 7vw, 5.5rem);
        line-height: 1.15;

        color: var(--primary-color);
        text-shadow: 0 4px 8px rgba(0,0,0,0.6);
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }

.carousel-nav {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    background: var(--dark-sub-color);
    border: 1px solid var(--primary-color);
    cursor: pointer;
    transition: all 0.3s;
}

.carousel-dot.active {
    background: var(--primary-light-color);
    transform: scale(1.4);
    border-color: transparent;
    box-shadow: 0 0 10px var(--primary-light-color);
}

/* === MIXED GRID LAYOUT (7-Item Block) === */
.products-section {
    width: 100%;
    padding-bottom: 6rem;
    /* Extra bottom padding */
}

.mixed-grid-container {
    display: grid;
    /* 6 columns allows us to split:
       Long Card = 4 cols (2/3 width)
       Small Card = 2 cols (1/3 width)
    */
    grid-template-columns: repeat(6, 1fr);

    /* MOCKUP MATCHING: Tighter vertical gap, wider horizontal gap */
    column-gap: 2.5vw;
    row-gap: 2.5vh;

    width: 100%;
}

/* --- CARD BASE STYLES --- */
.content-card {
    background: var(--primary-color);
    border-radius: 1.5rem;
    /* Rounded styling
    overflow: hidden; */
    text-decoration: none;
    box-shadow: 0 4px 20px var(--btn-shadow-color);
    /* Very subtle shadow base */
    transition: all 0.25s;
    display: flex;
    /* Default to vertical, overrided by modifier */
    flex-direction: column;
    height: 100%;
    /* Ensure cards fill grid height */
    padding: 0.75rem;
    /* Space between card edge and inner content */
    box-sizing: border-box;
}

.content-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    background-color: var(--primary-accent-color);
}

.content-card:hover .content-card__title {
    color: var(--primary-color);
}

.content-card:hover .content-card__shortdesc {
    color: var(--bg-color-blue);
}

.content-card:hover .btn-primary {
    background-color: var(--primary-light-color);
    color: var(--primary-accent-color);
}

.content-card:hover .gallery-nav-btn {
    background-color: var(--primary-light-color);
    color: var(--primary-accent-color);
}

.content-card .card-image-wrapper {
    overflow: hidden;
    position: relative;
    /* Removing flex-shrink here ensures image respects size */
    border-radius: 1.175rem;
    width: 100%;
}

.content-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}



.content-card .card-info {
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.card-text-group {
    flex: 1;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-card__title {
    font-family: var(--ff-header);
    font-size: 2rem;
    /* Larger font */
    margin: 0 0 0.8rem 0;
    color: var(--dark-color);
    line-height: 1.1;
}

.content-card__shortdesc {
    font-family: var(--ff-base);
    font-size: 0.9rem;
    color: var(--dark-sub-color);
    line-height: 1.25;
    font-weight: 400;
}


/* --- LONG CARD MODIFIER --- */
/* Horizontal Layout: Image Left, Text Right */
.content-card--long {
    flex-direction: row;
    /* Horizontal */
    align-items: center;
    /* Center content vertically */
}

.content-card--long .card-image-wrapper {
    width: 60%;
    flex-shrink: 0;
    height: 100%;
}

.content-card--long .card-info {
    /* Text takes remaining ~40% */
    width: 40%;
    padding: 1rem 2rem;
    /* More horizontal padding */
    align-items: flex-start;
    text-align: left;
    /* Stack Vertical for Desktop Long Card */
    flex-direction: column; 
    justify-content: center;
}

.content-card--long .card-text-group {
    width: 100%;
    padding-right: 0;
    margin-bottom: 0.5rem;
}

/* Show/Hide Logic for Long Card Buttons on Desktop */
.content-card--long .btn-primary {
    display: inline-block; /* Show Rect Button */
}

.content-card--long .gallery-nav-btn {
    display: none; /* Hide Circle Button on Desktop */
}


/* --- SMALL CARD MODIFIER --- */
/* Vertical Layout: Image Top, Text Bottom */
.content-card--small {
    flex-direction: column;
    /* Vertical */
    align-items: center;
}

.content-card--small .card-image-wrapper {
    width: 100%;

}

.content-card--small .card-info {
    padding-top: 1.0rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    text-align: left;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    /* Left align text */
    /* MOCKUP MATCHING: Flex layout for Title+Desc (Left) vs Button (Right) 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;*/
}

.content-card--small .card-text-group {
    flex: 1;
    /* Take available space */
    padding-right: 1rem;
    /* Space between text and button */
}

.content-card--small .content-card__title {
    font-size: 1.5rem;
    /* Slightly smaller title for small cards */
}

.content-card--small .gallery-nav-btn {
    text-decoration: none;
    margin: 0;
    font-size: 1.5rem;
    padding: 0.25rem;
}

/* --- GRID POSITIONING LOGIC (The 7-Item Pattern) --- */

/* ROW 1: Left Long (4), Right Small (2) */
.grid-item-0 {
    grid-column: span 4;
}

.grid-item-1 {
    grid-column: span 2;
}

/* ROW 2: Left Small (2), Right Long (4) */
.grid-item-2 {
    grid-column: span 2;
}

.grid-item-3 {
    grid-column: span 4;
}

/* ROW 3: Three Small Cards (2 each) */
.grid-item-4 {
    grid-column: span 2;
}

.grid-item-5 {
    grid-column: span 2;
}

.grid-item-6 {
    grid-column: span 2;
}

/* Hiding Logic for "Show More" */
.hidden-block-item {
    display: none !important;
}

/* --- LOAD MORE ARROW --- */
.show-more-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 4rem;
    /* More space above button */
    padding-bottom: 2rem;
}

.nav-arrow-down {
    background: transparent;
    /* MOCKUP: Minimalist/Transparent or Solid Accent */
    color: var(--primary-accent-color);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 2px solid var(--primary-accent-color);
    /* Outlined style */
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.nav-arrow-down:hover {
    background: var(--primary-accent-color);
    color: var(--primary-color);
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--btn-shadow-color);
}

/* --- RESPONSIVE ADJUSTMENTS --- */

@media (max-width: 900px) {

    .highlight-overlay .btn-primary{
        display: inline-block !important;
    }

    .section-title{
        margin-top: 2rem;
        margin-bottom: 0.5rem;
    }

   .mixed-grid-container {
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem;
    }

    /* 2. RESET SPANS: All cards take 1 cell */
    .grid-item-0, .grid-item-1, .grid-item-2, 
    .grid-item-3, .grid-item-4, .grid-item-5, .grid-item-6,
    .content-card {
        grid-column: span 1 !important; 
    }

    /* 3. CARD DESIGN: Force "Long" cards to look like "Small" (Vertical) */
    .content-card--long {
        flex-direction: column !important; /* Vertical */
        padding: 0.75rem !important; /* Match base card padding */
    }

    .content-card--long .card-image-wrapper {
        width: 100% !important; 
        flex-shrink: 1.0 !important;
        height: auto !important;
    }

    /* EXACT MATCH of Small Card Info Style */
    .content-card--long .card-info {
        width: auto !important; 
        padding-top: 1.0rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        padding-bottom: 0.0rem !important;
        
        text-align: left !important;
        
        /* Restore Flex Row logic from base .card-info */
        flex-direction: row !important; 
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    /* Restore Text Group Logic */
    .content-card--long .card-text-group {
        flex: 1 !important;
        padding-right: 1rem !important;
        margin-bottom: 0 !important;
        width: auto !important; /* Reset width override */
    }
    
    /* Reset Title Size if it was changed for long card */
    .content-card--long .content-card__title {
        font-size: 1.5rem !important; /* Match small card size */
    }

    /* BUTTON SWITCHING for Tablet */
    .content-card--long .btn-primary {
        display: none !important; /* Hide Rect Button */
    }

    .content-card--long .gallery-nav-btn {
        display: flex !important; /* Show Circle Button */
        text-decoration: none;
        margin: 0;
        font-size: 1.5rem; /* Match your provided style */
        padding: 0.25rem; /* Match your provided style */
        width: 40px; /* Reset width to ensure circle shape */
        height: 40px;
    }

    

    .carousel-container {
        aspect-ratio: 16/9; /* Standard ratio for tablet */
    }
}

@media (max-width: 600px) {

    .highlight-overlay .btn-primary{
        display: inline-block !important;
        font-size: 2vw !important;
        margin-top: 0.5vw;
        padding: 0.6rem 0.9rem;
    }
    .mixed-grid-container {
        grid-template-columns: 1fr; /* 1 Column stack */
        gap: 2rem;
    }

    
    .highlight-overlay {
        padding: 1.5rem 1.5rem; /* Smaller padding on mobile */
    }

    .highlight-overlay h3 {
        font-size: 5vw;
    }
    .highlight-overlay p {
        display: none;
    }

    .section-title{
        margin-top: 1rem;
        margin-bottom: 0.25rem;
    }
}

.content-detail-container {
    box-sizing: border-box;
    margin: 0.2rem var(--main-margin-x);
    padding: 0;
    width: auto;
}

/* 1. Hero Video */
.content-hero-video-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--element-border-radius);
    overflow: hidden;
    margin-bottom: 2.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.content-hero-video {
    width: 100%;
    height: 100%;
    display: block;
}

/* 2. Header Group */
.content-header-group {
    text-align: left;
    margin-bottom: 3rem;
}

.content-main-title {
    font-family: var(--ff-header); /* Staatliches */
    font-size: 4rem;
    line-height: 0.9;
    color: var(--dark-color);
    margin: 0;
    letter-spacing: -0.025em;
}

.content-sub-title {
    font-family: var(--ff-base);
    font-size: 1.25rem;
    color: var(--dark-sub-color);
    margin: 0.5rem 0 0 0;
    font-weight: 400;
}

/* 3. Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.feature-card {
    background-color: var(--primary-color); /* Cream/Off-white */
    border-radius: 1.5rem; /* Squircle */
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s ease;
}

.feature-icon-circle {
    width: 2.0rem;
    height: 2.0rem;
    background-color: var(--primary-accent-color); /* Blue */
    padding: 0.5rem;
    border-radius: 50%;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.feature-card-title {
    font-family: var(--ff-header);
    font-size: 1.2rem;
    color: var(--dark-color);
    margin: 0 0 0.5rem 0;
}

.feature-card-desc {
    font-family: var(--ff-base);
    font-size: 0.9rem;
    color: var(--dark-sub-color);
    margin: 0;
    line-height: 1.4;
}

/* 4. Action Split Section */
.action-split-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 40% / 60% approx */
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.action-card {
    border-radius: 1.5rem; /* Squircle */
    overflow: hidden;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

/* Left: Tutorial Card */
.tutorial-card {
    background-color: var(--primary-color); /* Cream */
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.tutorial-thumb-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    background: var(--primary-color);
}

.tutorial-video-iframe {
    width: 100%;
    height: 100%;
    display: block;
}


/* Right: Download Card */
.download-card {
    background-color: var(--primary-accent-color); /* Royal Blue */
    color: var(--primary-color);
    justify-content: space-between;
}

.req-content {
    margin-bottom: 2rem;
}

.req-title {
    font-family: var(--ff-accent);
    font-size: 2rem;
    margin: 0 0 0.35rem 0;
    text-align: center;
    color: var(--primary-color);
    letter-spacing: 0.05rem;
}

.req-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    font-family: var(--ff-base);
    font-size: 0.95rem;
    opacity: 0.9;
    line-height: 0.8;
}

.req-list li {
    margin-bottom: 0.5rem;
}

.limitations-section {
    margin-top: 2rem;
}



.card-action-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* No margin top needed as cards are space-between */
}

.price-note {
    font-family: var(--ff-base);
    font-size: 0.6rem;
    opacity: 0.7;
    margin-top: 0.1rem;
    margin-bottom: 0;
}

/* Pill Buttons */
.pill-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 1rem 2rem;
    border-radius: 3rem; /* Full pill shape */
    text-align: center;
    text-decoration: none;
    font-family: var(--ff-header);
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.pill-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.blue-pill-btn {
    background-color: var(--primary-accent-color);
    color: white;
}

.green-pill-btn {
    background-color: var(--primary-light-color); /* Lime Green */
    color: var(--dark-color);
}

.return-link-wrapper {
    text-align: center;
    margin-top: 2rem;
}

.download-buttons-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    width: 100%;
    justify-content: space-between;
}

/* Individual wrapper for button + text note */
.download-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1; /* Equal width */
}

/* Smaller note text specifically for the dual-button layout */
.small-note {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    margin-top: 0.5rem;
}

/* Free Button Style (Hollow/Outline or Different Color) */
.free-pill-btn {
    background-color: transparent;
    border: 2px solid var(--primary-light-color); /* Lime Green Outline */
    color: var(--primary-color); /* Text on blue bg */
    font-size: 0.9rem; /* Slightly smaller to fit text */
    padding: 0.8rem 1rem;
}

.free-pill-btn:hover {
    background-color: var(--primary-light-color);
    color: var(--dark-color);
}

/* Adjustments for the Official button in the row context */
.download-buttons-row .green-pill-btn {
    font-size: 0.9rem;
    padding: 0.8rem 1rem;
    /* border: 2px solid transparent; match height of outline btn */
}

/* Responsive */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: 1fr; /* Stack vertically on mobile/tablet */
    }

    .action-split-section {
        grid-template-columns: 1fr; /* Stack vertically */
    }
    
    .content-main-title {
        font-size: 3rem;
    }
}

@media (max-width: 600px) {
    .content-main-title {
        font-size: 2.5rem;
    }
    
    .content-sub-title {
        font-size: 1rem;
    }

    .download-buttons-row {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .download-btn-wrapper {
        width: 100%;
    }
}

.want-to-learn-banner {
    width: 100%;
    border-radius: var(--element-border-radius);
    overflow: hidden;
    position: relative;
    margin: 4rem 0; /* Vertical spacing */
    aspect-ratio: 16 / 9; /* Wide banner look */
    background-image: url('https://firebasestorage.googleapis.com/v0/b/miwamaroon-studio-subscription.firebasestorage.app/o/public%2Fimg%2Fportfolio%2Ftutorial.jpg?alt=media');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end; /* Align content to bottom */
}

.wtl-overlay {
    padding: 3rem;
    width: 100%;
    background: linear-gradient(to top, rgba(250, 250, 250, 1) 0%, rgba(250, 250, 250, 0.8) 80%,transparent 100%);
    color: var(--dark-color);
}

.wtl-title {
    font-family: var(--ff-accent); /* Staatliches */
    font-size: 3.5rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

.wtl-subtitle {
    font-family: var(--ff-base);
    font-size: 1rem;
    margin: 0.5rem 0 0.5rem 0;
    font-weight: 600;
    max-width: 600px;
}

.products-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.tutorial-card .req-title{
    color: var(--dark-color);
}

.base-page_container .action-split-section .action-card {
    /* Critical for aligning Header (top) and Button (bottom) */
    justify-content: space-between; 
    align-items: center;
    text-align: center;
    padding: 3rem 2rem; /* Increased padding for breathing room */
}

/* Ensure Titles have consistent spacing */
.base-page_container .action-card h4,
.base-page_container .action-card .req-title_home {
    margin-top: 0;
    margin-bottom: 0rem;
    font-family: var(--ff-accent);
    font-size: 2.5rem; /* Standardize font size */
    line-height: 1;
}

/* Specific color for Portfolio Title */
.base-page_container .tutorial-card h3 {
    color: var(--primary-accent-color);
}


/* Responsive adjustments for Home Page */
@media (max-width: 900px) {
    .products-row {
        grid-template-columns: 1fr;
    }
    .want-to-learn-banner {
        aspect-ratio: 16/9;
    }
    .wtl-title {
        font-size: 2.5rem;
    }
}