/* =========================================== */
/* === CORE SETUP & FONTS === */
/* =========================================== */
@font-face {
    font-family: 'TitanOne-Regular';
    src: url('./fonts/TitanOne-Regular.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Set Default Font once */
    font-family: 'Poppins', sans-serif;
}

html,
body {
    height: 100%;
    width: 100%;
}

/* Utility Classes for Fonts */
.titan-font {
    font-family: 'TitanOne-Regular', cursive;
}

.anton-font {
    font-family: 'Anton', sans-serif;
}

/* =========================================== */
/* === PAGE 1 (HOME) === */
/* =========================================== */
#page1 {
    height: 100vh;
    width: 100%;
    background-color: #dadada;
    position: relative;
}

/* Cursor fixed outside of locomotive scroll context */
#cursor {
    height: 7.5vw;
    width: 7.5vw;
    background-color: #FF5F38;
    border-radius: 50%;
    position: fixed;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

#cursor h5 {
    font-size: 1.15vw;
    font-weight: 500;
}

#page1 video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
}

#page1-content {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 10;
    color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 3vw 3vw;
}

nav h3,
nav h4 {
    font-size: 1.4vw;
    font-weight: 100;
    text-align: center;
    color: #fff;
}


.nav-group {
    display: flex;
    align-items: center;
    gap: 2vw;
}

.nav-blog-link {
    font-size: 1.4vw;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: color 0.2s;
}

.nav-blog-link:hover {
    color: #FF5F38;
}

#page1-content h1 {
    font-family: 'TitanOne-Regular';
    font-size: 25vw;
    letter-spacing: 5vw;
    font-weight: 600;
    line-height: 27vw;
}

#page1-content h1 span {
    display: inline-block;
    font-family: 'TitanOne-Regular';
}



/* --- SOLID SPACER SEPARATION --- */
.section-spacer {
    width: 100%;
    height: 10vh;
    background-color: #ffffff;
    position: relative;
    z-index: 10;
}


/* --- Creative Space Section Fix --- */
#page2.creative-section-wrapper {
    min-height: 100vh;
    width: 100%;
    background-color: #FAF8F3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}

.creative-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
}

/* Text Styling */
.creative-content {
    flex: 1;
    max-width: 50%;
    color: #1b1b1b;
    z-index: 5;
}

.creative-content h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 4.5vw;
    font-weight: 800;
    line-height: 1.;
    margin-bottom: 2vw;
}

.creative-content .gradient-text {
    background: linear-gradient(90deg, #DCB57B, #C7BEB5, #738090);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.creative-subtext {
    color: #a0a0a0;
    font-size: 1.1vw;
    margin-bottom: 3vw;
    max-width: 80%;
    line-height: 1.6;
}

.btn-pill {
    display: inline-block;
    background-color: #1b1b1b;
    color:  #DCB57B;
    padding: 1vw 2.0vw;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1vw;
    transition: transform 0.3s;
}

.btn-pill:hover {
    transform: translateY(-3px);
}

/* Gallery Styling */
.creative-gallery {
    flex: 1;
    position: relative;
    height: 60vh;
}

.creative-card {
    position: absolute;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: z-index 0.3s, transform 0.3s;
}

.creative-card:hover {
    z-index: 10;
    transform: scale(1.05);
}

.creative-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Positioning similar to image */
.img-courtyard {
    top: -10%;
    left: 0;
    width: 55%;
    height: 60%;
    z-index: 1;
}

.img-diagram {
    top: 35%;
    right: 0;
    width: 50%;
    height: 45%;
    z-index: 3;
    border: 5px solid #fff;
}

.img-render {
    bottom: -15%;
    left: 10%;
    width: 70%;
    height: 60%;
    z-index: 2;
    object-fit: contain;
}

/* Icon overlay */
.icon-box {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    font-size: 12px;
}

/* Mobile Fixes for Creative Section */
@media (max-width: 768px) {
    #page2.creative-section-wrapper {
        flex-direction: column;
        padding: 10vh 5vw;
        height: auto;
    }

    .creative-container {
        flex-direction: column;
    }

    .creative-content {
        max-width: 100%;
        text-align: center;
        margin-bottom: 50px;
        position: relative; 
        z-index: 10;
    }

    .creative-content h1 {
        font-size: 10vw;
    }

    .creative-subtext {
        font-size: 4vw;
        max-width: 100%;
    }

    .btn-pill {
        padding: 15px 30px;
        font-size: 16px;
    }

    /* FIXING THE DISAPPEARING IMAGES - HORIZONTAL SCROLL */
    .creative-gallery {
        width: 100% !important;
        height: auto !important; 
        display: flex !important;
        flex-direction: row !important; /* Horizontal */
        overflow-x: auto !important;    /* Enable Scroll */
        gap: 20px !important;
        margin-top: 20px;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
    }

    .creative-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        
        /* Make them cards */
        width: 80vw !important;
        height: 50vh !important;
        flex-shrink: 0 !important;
        
        transform: none !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .img-courtyard, .img-diagram, .img-render {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}


/* =========================================== */
/* === INVEST SECTION STYLES (DESKTOP) === */
/* =========================================== */
#invest-section {
    min-height: 80vh;
    width: 100%;
    background-color: #050505; /* Deep black to match image */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 5vw;
}

.invest-content h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 5.5vw;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    color: #fff;
    z-index: 2;
}

/* The Gradient Text Effect */
.future-gradient {
    background: linear-gradient(90deg, #DCB57B, #C7BEB5, #738090);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Floating Images Wrapper */
.invest-floating-img {
    position: absolute;
    z-index: 1;
    width: 18vw;
    height: 12vw;
}

.invest-floating-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    opacity: 0.8;
}

/* Positioning */
.invest-floating-img.top-left {
    top: 15%;
    left: 10%;
}

.invest-floating-img.bottom-right {
    bottom: 15%;
    right: 10%;
}

/* The Quote Mark */
.quote-mark {
    position: absolute;
    top: -3vw;
    left: -2vw;
    font-family: 'TitanOne-Regular', cursive;
    font-size: 8vw;
    color: #fff;
    line-height: 1;
}

/* =========================================== */
/* === MOBILE RESPONSIVENESS === */
/* =========================================== */
@media (max-width: 768px) {
    /* INVEST SECTION MOBILE */
    #invest-section {
        min-height: 50vh;
        flex-direction: column;
        padding: 10vw 5vw;
    }

    .invest-content h1 {
        font-size: 8vw;
    }

    .invest-floating-img {
        width: 30vw;
        height: 20vw;
        opacity: 0.4; /* Dim them more on mobile so text is readable */
    }

    .invest-floating-img.top-left {
        top: 5%;
        left: 5%;
    }

    .invest-floating-img.bottom-right {
        bottom: 5%;
        right: 5%;
    }
}



/* =========================================== */
/* === PAGE 3 (SERVICES) === */
/* =========================================== */
#page3 {
    min-height: 100vh;
    width: 100%;
    position: relative;
    padding: 3vw;
    background-color: #FAF8F3;
}

#page3-top {
    text-align: center;
    justify-content: center;
}

#page3-top h4 {
    color: #000;
    font-size: 1vw;
    margin-bottom: 1vw;
}

#page3-top h4 span {
    font-size: 0.7vw;
    background-color: black;
    color: #fff;
    padding: 4px 10px;
    border-radius: 10px;
}

#page3-top h2 {
    font-size: 3vw;
    font-weight: 500;
    color: #000;
}

#page3-elements {
    height: 75vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8vw;
}

#page3-elements .box {
    height: 100%;
    width: 32.5%;
    position: relative;
    overflow: hidden;
}

#page3-elements .box img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all linear 0.7s;
    z-index: 2;
}

#page3-elements .box:hover img {
    opacity: 0;
}

#page3-elements .box video {
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: 1;
}



/* =========================================== */
/* === PAGE 4 (FLIP-UP GALLERY) === */
/* =========================================== */
#page4 {
    min-height: 400vh;
    width: 100%;
    position: relative;
    padding: 0;
}

#flip-up-section {
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.flip-bg-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: #fff;
    z-index: 0;
    text-align: left;
    padding-left: 5vw;
}

.flip-bg-content img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.flip-bg-text {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 3vw;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    max-width: 50%;
}

.flip-bg-text h2 {
    font-size: 5vw;
    font-family: 'TitanOne-Regular', 'Anton', sans-serif;
    line-height: 1.1;
    color: #FF5F38;
}

#flip-fg-panel {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.gallery-flip-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#panel-1 { z-index: 3; }
#panel-2 { z-index: 2; }
#panel-3 { z-index: 1; }

.gallery-flip-panel .flip-bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.gallery-content {
    color: #fff;
    text-align: left;
    padding: 3vw;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    backdrop-filter: blur(5px);
    max-width: 40%;
    margin-left: 5vw;
}

.gallery-content h2 {
    font-size: 4vw;
    font-family: 'TitanOne-Regular', 'Anton', sans-serif;
    margin-bottom: 1vw;
    color: #FF5F38;
}

.gallery-content p {
    font-size: 1.5vw;
    margin-bottom: 2vw;
    max-width: 600px;
}

.view-project-btn {
    display: inline-block;
    padding: 0.8vw 1.5vw;
    background-color: #FF5F38;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.view-project-btn:hover {
    background-color: #e04f2d;
}



/* =========================================== */
/* === INFINITE MARQUEE SECTION === */
/* =========================================== */
#scrolling-text-section {
    width: 100%;
    padding: 6vw 0;
    background-color: #FAF8F3;
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid #00000020;
    border-bottom: 1px solid #00000020;
    display: flex;
}

.scrolling-text {
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
}

.scrolling-text h1 {
    font-family: 'TitanOne-Regular', sans-serif;
    font-size: 7vw;
    text-transform: uppercase;
    font-weight: 400;
    color: transparent;
    -webkit-text-stroke: 1px #000;
    line-height: 1;
    margin: 0;
    flex-shrink: 0;
    padding-right: 0; 
}

.scrolling-text:hover h1 {
    color: #FF5F38;
    -webkit-text-stroke: 0px;
}


/* =========================================== */
/* === VERTICAL SCROLL ANIMATION === */
/* =========================================== */
#vertical-divider {
    width: 100%;
    height: 60vh;
    background-color: #FAF8F3;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.vertical-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1vw;
}

.v-text {
    font-family: 'TitanOne-Regular', sans-serif;
    font-size: 8vw;
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

.v-text.outline-mode {
    color: transparent;
    -webkit-text-stroke: 2px #434244;
}


/* === PAGE 5 (SLIDER & GET IN TOUCH) === */
/* =========================================== */

#page5 {
    height: 100vh;
    width: 100%;
    padding: 4vw 0;
    position: relative;
    background-color: #FAF8F3;
}

#page5 h1 {
    font-size: 5vw;
    font-family: 'titan-font';
    font-weight: 700;
    border-bottom: 1px solid #000000;
    width: 96%;
    margin-left: 2%;
    line-height: 1.2;
    margin-bottom: 2vh;
}

#swiperdiv {
    height: 60vh;
    width: 100%;
    position: relative;
    margin-top: -2%;
}

.swiper {
    width: 100%;
    padding-right: 20px;
}

.swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    cursor: pointer;
    gap: 2vw;
}

.swiper-slide img {
    display: block;
    width: 22%;
    height: 30vw;
    object-fit: cover;
    border-radius: 5px;
}


/* =========================================== */
/* === PAGE 6 (CONTACT) === */
/* =========================================== */
/*#page6 {*/
/*    min-height: 10vh;*/
/*    width: 100%;*/
/*    background-color: #000;*/
/*    color: #fff;*/
/*    padding: 1vw 6vw;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*}*/

/*#contact-left {*/
/*    flex-basis: 60%;*/
/*}*/

/*#contact-left h1 {*/
/*    font-size: 3vw;*/
/*    font-weight: 600;*/
/*    line-height: 1.1;*/
/*    color: #fff;*/
/*}*/

/*.highlight-orange { color: #FF5F38; }*/
/*.highlight-purple { color: #8C40B8; }*/

/*#contact-right {*/
/*    flex-basis: 30%;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    height: 100%;*/
/*    justify-content: space-between;*/
/*}*/

/*.contact-section h2 {*/
/*    font-size: 1.5vw;*/
/*    font-weight: 500;*/
/*    margin-bottom: 2vw;*/
/*    color: #fff;*/
/*    text-align: left;*/
/*}*/

/*.social-links {*/
/*    display: flex;*/
/*    gap: 0.8vw;*/
/*    margin-bottom: 2vw;*/
/*}*/

/*.social-icon {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    width: 3vw;*/
/*    height: 3vw;*/
/*    background-color: #fff;*/
/*    border-radius: 50%;*/
/*    text-decoration: none;*/
/*    color: #000;*/
/*    transition: 0.3s;*/
/*}*/

/*.social-icon i {*/
/*    font-size: 1.5vw;*/
/*}*/

/*.social-icon:hover {*/
/*    background-color: #FF5F38;*/
/*    color: #fff;*/
/*    transform: translateY(-5px);*/
/*}*/

/*.email-section {*/
/*    margin-top: 3vw;*/
/*    text-align: left;*/
/*}*/

/*.email-section h3 {*/
/*    font-size: 0.9vw;*/
/*    color: #ccc;*/
/*    margin-bottom: 0.5vw;*/
/*}*/

/*.email-section p {*/
/*    font-size: 1.2vw;*/
/*    color: #fff;*/
/*}*/


/* =========================================== */
/* === NEW MERGED FOOTER STYLES === */
/* =========================================== */
#page6 {
    min-height: 40vh; /* Compact height */
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 4vw 6vw;
    
    /* Flexbox for 3 Columns */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4vw;
    border-top: 1px solid #222;
}

/* --- Common Column Styles --- */
.footer-col {
    flex: 1; /* All columns take equal width initially */
}

/* --- LEFT COLUMN: Headline --- */
.footer-left h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5vw;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.highlight-orange { color: #FF5F38; }
.highlight-purple { color: #8C40B8; }


/* --- CENTER COLUMN: Newsletter --- */
.footer-center {
    display: flex;
    justify-content: center;
}

.newsletter-box {
    background-color: #0a0a0a; 
    padding: 2vw;
    border-radius: 20px;
    text-align: center;
    width: 100%;
    max-width: 500px;
    border: 1px solid #222;
}

.newsletter-box p {
    font-size: 0.9vw;
    color: #777;
    margin-bottom: 1.5vw;
    font-weight: 400;
}

.newsletter-form-pill {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #555;
    border-radius: 50px;
    padding: 5px;
    transition: border-color 0.3s;
}

.newsletter-form-pill:focus-within {
    border-color: #fff;
}

.newsletter-form-pill input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 1vw;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

.newsletter-form-pill button {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 5px;
}

/* The Gradient Circle Button */
.btn-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    /* Gradient from Orange to Purple */
    background: linear-gradient(135deg, #FF5F38, #8C40B8);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.newsletter-form-pill button:hover .btn-circle {
    transform: scale(1.1);
}

.btn-circle i {
    font-size: 14px;
    color: #fff;
}


/* --- RIGHT COLUMN: Contact Info --- */
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 4vw; /* Push slightly right */
    gap: 3vw;
}

.contact-group h3 {
    font-size: 1.2vw;
    font-weight: 500;
    margin-bottom: 1vw;
    color: #fff;
}

.social-row {
    display: flex;
    gap: 1vw;
}

.social-row a {
    width: 3vw;
    height: 3vw;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-size: 1.4vw;
    transition: transform 0.3s, background-color 0.3s;
}

.social-row a:hover {
    background-color: #FF5F38;
    color: #fff;
    transform: translateY(-5px);
}

.email-link {
    font-size: 1.1vw;
    color: #fff;
    font-weight: 400;
}


/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    #page6 {
        flex-direction: column; /* Stack items vertically */
        padding: 60px 20px;
        text-align: center;
        gap: 50px;
    }

    /* Left Column */
    .footer-left h1 {
        font-size: 40px; /* Bigger font on mobile */
    }

    /* Center Newsletter */
    .newsletter-box p {
        font-size: 14px;
    }

    .newsletter-form-pill input {
        font-size: 16px;
        padding: 15px;
    }

    .newsletter-form-pill button {
        font-size: 14px;
    }

    .btn-circle {
        width: 40px;
        height: 40px;
    }

    /* Right Contact */
    .footer-right {
        padding-left: 0;
        align-items: center; /* Center align on mobile */
        width: 100%;
    }

    .contact-group h3 {
        font-size: 18px;
    }

    .social-row a {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .email-link {
        font-size: 18px;
    }
}

#my-form-status {
    width: 100%;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    margin-top: 10px;
    font-weight: 500;
    border-radius: 10px;
    display: none; /* Hidden by default */
}

/* Style for success state */
#my-form-status.success {
    display: block;
    color: #4BB543; /* Success Green */
    background-color: rgba(75, 181, 67, 0.1);
    padding: 10px;
}

/* Style for error state */
#my-form-status.error {
    display: block;
    color: #FF0000; /* Error Red */
    background-color: rgba(255, 0, 0, 0.1);
    padding: 10px;
}







/* =========================================== */
/* === LOADER === */
/* =========================================== */
#loader {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    gap: 10px;
}

#loader h3 {
    font-size: 2vw;
}


/* =========================================== */
/* === BLOG PAGE SPECIFIC STYLES === */
/* =========================================== */
.blog-page-body {
    background-color: #FAF8F3;
    color: #000;
}

.blog-nav {
    background-color: #FAF8F3;
    padding: 3vw 6vw;
    border-bottom: 1px solid #00000033;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 50;
}

.blog-nav h3,
.blog-nav h4,
.blog-nav .nav-blog-link {
    color: #000;
}

.blog-nav .active-blog-link {
    color: #FF5F38;
    font-weight: 600;
}

.blog-main {
    padding: 3vw 6vw;
    min-height: 100vh;
}

.blog-header {
    margin-bottom: 4vw;
    border-bottom: 1px solid #00000033;
    padding-bottom: 2vw;
}

.blog-header h1 {
    font-family: 'TitanOne-Regular';
    font-size: 8vw;
    margin-bottom: 1vw;
    line-height: 1;
}

.blog-header p {
    font-size: 1.5vw;
    color: #444;
    max-width: 70%;
}

.blog-content {
    display: flex;
    gap: 4vw;
}

.blog-categories {
    flex-basis: 25%;
    min-width: 200px;
    padding-top: 2vw;
}

.blog-categories h3 {
    font-size: 1.6vw;
    font-weight: 600;
    margin-bottom: 1.5vw;
}

.blog-categories a {
    display: block;
    font-size: 1.2vw;
    color: #444;
    text-decoration: none;
    padding: 0.5vw 0;
    margin-left: 0.5vw;
    border-left: 3px solid transparent;
    transition: 0.2s;
}

.blog-categories a:hover,
.blog-categories a.active-blog-link {
    color: #FF5F38;
    border-left: 3px solid #FF5F38;
    font-weight: 500;
}

.blog-posts {
    flex-basis: 75%;
}

.post-card {
    display: flex;
    align-items: flex-start;
    padding: 3vw 0;
    border-bottom: 1px solid #00000033;
    text-decoration: none;
    color: inherit;
    transition: 0.2s;
}

.post-card:hover {
    background-color: #f0f0f0;
}

.post-image {
    width: 30%;
    height: 15vw;
    overflow: hidden;
    margin-right: 2.5vw;
    border-radius: 5px;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

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

.post-content {
    width: 65%;
}

.post-meta {
    display: flex;
    gap: 1vw;
    margin-bottom: 0.8vw;
}

.post-meta span {
    font-size: 0.9vw;
    font-weight: 500;
    color: #FF5F38;
    text-transform: uppercase;
}

.post-content h2 {
    font-size: 2.5vw;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.5vw;
}

.post-content p {
    font-size: 1.1vw;
    color: #666;
    line-height: 1.4;
}

.post-read-more {
    font-size: 1.1vw;
    font-weight: 600;
    color: #000;
    margin-top: 1vw;
    display: inline-block;
}

/* =========================================== */
/* === SINGLE POST DETAIL STYLES === */
/* =========================================== */
.post-detail-main {
    padding: 4vw 6vw;
    max-width: 1200px;
    margin: 0 auto;
}

.post-header-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3vw;
}

.post-detail-meta {
    display: flex;
    justify-content: center;
    gap: 1.5vw;
    margin-bottom: 1.5vw;
}

.post-detail-meta span {
    font-size: 1vw;
    font-weight: 500;
    color: #FF5F38;
    text-transform: uppercase;
}

.post-header-content h1 {
    font-family: 'TitanOne-Regular';
    font-size: 4vw;
    margin-bottom: 2vw;
}

.post-intro-text {
    font-size: 1.4vw;
    color: #444;
    line-height: 1.5;
}

.post-featured-image {
    width: 100%;
    height: 40vw;
    margin-bottom: 4vw;
    overflow: hidden;
    border-radius: 10px;
}

.post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-article-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1vw;
    color: #222;
    line-height: 1.7;
}

.post-article-content h2 {
    font-size: 2.2vw;
    color: #FF5F38;
    margin: 3vw 0 1vw;
}

.post-article-content h3 {
    font-size: 1.5vw;
    color: #000;
    margin: 2vw 0 0.5vw;
}

.post-article-content p {
    margin-bottom: 1.5vw;
}



/* =========================================== */
/* === PACKS PAGE STYLES === */
/* =========================================== */

.packs-main-container {
    padding: 4vw 6vw;
    min-height: 100vh;
    background-color: #FAF8F3;
}

.packs-header {
    margin-bottom: 4vw;
    padding-bottom: 2vw;
    border-bottom: 1px solid #e0e0e0;
}

.packs-header h1 {
    font-family: 'TitanOne-Regular';
    font-size: 6vw;
    margin-bottom: 1vw;
}

.packs-header p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2vw;
    color: #666;
    max-width: 50%;
}

/* --- GRID LAYOUT --- */
.packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 3vw;
}

/* --- CARD DESIGN --- */
.pack-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
}

.pack-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.pack-image {
    width: 100%;
    height: 20vw;
    overflow: hidden;
    background-color: #f0f0f0;
}

.pack-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.pack-details {
    padding: 1.5vw;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pack-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5vw;
}

.pack-title-row h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.3vw;
    font-weight: 600;
    color: #000;
    width: 80%;
}

.pack-title-row .price {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2vw;
    font-weight: 600;
    color: #FF5F38;
}

.pack-details p {
    font-family: 'Poppins', sans-serif;
    font-size: 1vw;
    color: #777;
    margin-bottom: 1.5vw;
    flex-grow: 1;
}

.buy-btn {
    display: block;
    width: 100%;
    padding: 1vw 0;
    background-color: #000;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1vw;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.buy-btn:hover {
    background-color: #FF5F38;
}

/* --- MOBILE RESPONSIVENESS FOR PACKS --- */
@media (max-width: 768px) {
    .packs-header h1 {
        font-size: 12vw;
    }

    .packs-header p {
        font-size: 16px;
        max-width: 100%;
    }

    .packs-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .pack-image {
        height: 60vw;
    }

    .pack-title-row h3 {
        font-size: 20px;
    }

    .pack-title-row .price {
        font-size: 18px;
    }

    .pack-details p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .buy-btn {
        padding: 15px 0;
        font-size: 16px;
    }
}

/* =========================================== */
/* === TUTORIAL VIDEO GRID STYLES === */
/* =========================================== */

.video-grid-container {
    padding: 6vw 4vw;
    min-height: 50vh;
    background-color: #FAF8F3;
}

.video-grid-header {
    margin-bottom: 4vw;
    text-align: center;
}

.video-grid-header h1 {
    font-family: 'TitanOne-Regular';
    font-size: 5vw;
    margin-bottom: 1vw;
    color: #000;
}

.video-grid-header p {
    font-size: 1.2vw;
    color: #666;
    max-width: 70%;
    margin: 0 auto;
}

/* --- GRID LAYOUT --- */
.tutorial-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3vw;
}

/* --- VIDEO CARD DESIGN --- */
.video-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.video-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.video-thumbnail-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Play icon overlay */
.video-thumbnail-container .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: rgba(255, 95, 56, 0.9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.video-card:hover .play-overlay {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.video-details {
    padding: 1.5vw;
}

.video-details h3 {
    font-size: 1.5vw;
    font-weight: 600;
    margin-bottom: 0.5vw;
    color: #000;
    font-family: 'Poppins', sans-serif;
}

.video-details p {
    font-size: 1vw;
    color: #777;
    margin-bottom: 0.5vw;
}

.video-details .duration {
    display: block;
    font-size: 0.9vw;
    font-weight: 500;
    color: #FF5F38;
    margin-top: 1vw;
}


/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    .video-grid-container {
        padding: 40px 20px;
    }

    .video-grid-header h1 {
        font-size: 10vw;
    }

    .video-grid-header p {
        font-size: 16px;
        max-width: 100%;
    }

    .tutorial-video-grid {
        gap: 30px;
    }

    .video-details {
        padding: 20px;
    }

    .video-details h3 {
        font-size: 20px;
    }

    .video-details p {
        font-size: 14px;
    }

    .video-details .duration {
        font-size: 12px;
    }

    .video-thumbnail-container .play-overlay {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* =========================================== */
/* === COURSE INTRODUCTION SECTION STYLES === */
/* =========================================== */

.course-intro-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* !!! MAKE SURE THIS PATH IS CORRECT IN YOUR FOLDER !!! */
    background: url('./path/to/your/rhino_background_image.jpg') no-repeat center center/cover;
    
    background-color: #333;
    position: relative;
    padding-top: var(--nav-height, 0);
}

.course-intro-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.course-info-box {
    position: relative;
    z-index: 2;
    background-color: rgba(40, 40, 40, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 3vw 4vw;
    width: 80vw;
    max-width: 900px;
    color: #f0f0f0;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.course-info-box h1 {
    font-family: 'Anton', sans-serif;
    font-size: 3.8vw;
    line-height: 1.1;
    margin-bottom: 1.5vw;
    color: #fff;
    text-transform: uppercase;
}

.course-info-box .instructor-info {
    font-size: 1.2vw;
    font-weight: 500;
    color: #bbb;
    margin-bottom: 2.5vw;
    display: block;
}

.course-info-box p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1vw;
    line-height: 1.6;
    margin-bottom: 2.5vw;
    color: #ccc;
}

.course-info-box ul {
    list-style: none;
    padding: 0;
    margin-bottom: 3vw;
    color: #ccc;
}

.course-info-box ul li {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1vw;
    margin-bottom: 1vw;
    position: relative;
    padding-left: 2.5vw;
    line-height: 1.3;
}

.course-info-box ul li i {
    color: #61DAFB;
    position: absolute;
    left: 0;
    top: 0.1vw;
    font-size: 1.5vw;
}


.course-actions {
    display: flex;
    gap: 1.5vw;
    margin-top: 3vw;
}

.enroll-btn,
.trailer-btn {
    display: inline-block;
    padding: 1.2vw 2.5vw;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2vw;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.enroll-btn {
    background-color: #61DAFB;
    color: #000;
}

.enroll-btn:hover {
    background-color: #4ac0e0;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 200, 255, 0.2);
}

.trailer-btn {
    background-color: #555;
    color: #f0f0f0;
    border: 1px solid #777;
}

.trailer-btn:hover {
    background-color: #777;
    border-color: #aaa;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}


/* =========================================== */
/* === TUTORIAL/GUIDE PAGE STYLES === */
/* =========================================== */

#guide-container {
    padding: 0 4vw;
    padding-top: 5vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4vw;
    min-height: 100vh;
    background-color: var(--secondary-color, #f7f7f7);
}

.guide-toc {
    flex-shrink: 0;
    width: 20%;
    position: sticky;
    top: 10vw;
    padding-top: 2vw;
    font-family: 'Poppins', sans-serif;
}

.guide-toc h2 {
    font-family: 'Anton', sans-serif;
    font-size: 2.5vw;
    font-weight: 400;
    margin-bottom: 1.5vw;
    color: var(--highlight-color, #FF5F38);
    text-transform: uppercase;
    letter-spacing: 0.1vw;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-list li {
    margin-bottom: 0.5vw;
}

.toc-list a {
    text-decoration: none;
    color: var(--text-color, #333);
    font-size: 1.1vw;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
    display: block;
    padding: 0.3vw 0;
    border-left: 2px solid transparent;
    padding-left: 10px;
}

.toc-list a:hover {
    color: var(--highlight-color, #FF5F38);
    transform: translateX(2px);
}

.toc-list a.active {
    color: var(--highlight-color, #FF5F38);
    font-weight: 600;
    border-left: 2px solid var(--highlight-color, #FF5F38);
    padding-left: 10px;
}

.guide-content {
    flex-grow: 1;
    width: 76%;
    padding: 3vw;
    background-color: var(--content-bg, #ffffff);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    line-height: 1.6;
}

.guide-content h1 {
    font-family: 'Anton', sans-serif;
    font-size: 4vw;
    font-weight: 400;
    color: var(--primary-site-color, #000);
    margin-bottom: 2vw;
    text-transform: uppercase;
}

.guide-content h2 {
    font-family: 'Anton', sans-serif;
    font-size: 2.5vw;
    font-weight: 400;
    color: var(--primary-site-color, #000);
    margin-top: 3vw;
    margin-bottom: 1.5vw;
    border-bottom: 2px solid var(--border-color, #e0e0e0);
    padding-bottom: 0.5vw;
    text-transform: uppercase;
}

.guide-content h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8vw;
    font-weight: 600;
    color: var(--highlight-color, #FF5F38);
    margin-top: 2vw;
    margin-bottom: 1vw;
}

.guide-content p {
    font-size: 1.1vw;
    margin-bottom: 1.5vw;
    color: var(--text-color, #333);
}

.guide-content ul,
.guide-content ol {
    margin-left: 2vw;
    margin-bottom: 1.5vw;
    font-size: 1.1vw;
    color: var(--text-color, #333);
}

.guide-content li {
    margin-bottom: 0.5vw;
}

.guide-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2vw 0;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.guide-content .example-box {
    background-color: rgba(255, 95, 56, 0.1);
    border-left: 5px solid var(--highlight-color, #FF5F38);
    padding: 1.5vw;
    margin: 2vw 0;
    border-radius: 4px;
}

.guide-content .example-box p {
    margin-bottom: 0;
    font-style: italic;
    color: var(--primary-site-color, #000);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #guide-container {
        flex-direction: column;
        padding: 3vw;
        gap: 2vw;
    }

    .guide-toc {
        position: static;
        width: 100%;
        padding-top: 0;
        margin-bottom: 3vw;
    }

    .guide-toc h2 {
        font-size: 6vw;
        margin-bottom: 3vw;
    }

    .toc-list a {
        font-size: 4vw;
        padding: 1.5vw 0;
    }

    .guide-content {
        width: 100%;
        padding: 5vw;
    }

    .guide-content h1 {
        font-size: 8vw;
    }

    .guide-content h2 {
        font-size: 6vw;
        margin-top: 5vw;
        margin-bottom: 3vw;
    }

    .guide-content h3 {
        font-size: 4.5vw;
    }

    .guide-content p,
    .guide-content ul,
    .guide-content ol {
        font-size: 3.5vw;
    }
}

.charge-text-col .gradient-text {
    background: linear-gradient(to right, #FC466B, #3F5EFB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}



/* =========================================== */
/* === FLIP-UP SECTION STYLES === */
/* =========================================== */

#flip-up-section {
    height: 100vh;
    width: 100%;
    position: relative;
    background-color: #000;
}

.flip-bg-content {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.flip-bg-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.flip-bg-text {
    position: absolute;
    z-index: 10;
    color: #fff;
    text-align: center;
}

.flip-bg-text h2 {
    font-family: 'Anton', sans-serif;
    font-size: 8vw;
    line-height: 1.5;
    text-transform: uppercase;
}

#flip-fg-panel {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: #FAF8F3;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}

#flip-fg-panel p {
    font-size: 2vw;
    color: #333;
}

/* =========================================== */
/* === NEW SECTION: COURSE SLIDER STYLES === */
/* =========================================== */

#course-slider-section {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1500px;
    overflow: hidden;
    background-color:  #FAF8F3;
}

.cs-visual-wrapper {
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%; 
    top: 10%;  
    transform-origin: bottom center;
    opacity: 0;
    transform: rotateX(25deg) translateY(100px) scale(0.95);
    transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1), opacity 1.2s ease-out;
    will-change: transform, opacity;
    z-index: 1;
    border-radius: 20px; 
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
}

.cs-visual-wrapper.in-view {
    opacity: 1;
    transform: rotateX(0deg) translateY(0) scale(1);
}

.cs-slider-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 20%;
}

.cs-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.cs-slide.active {
    opacity: 1;
}

.cs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 2;
}

.cs-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1200px;
    padding: 0 5vw;
    color: #fff;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
    transition-delay: 0.5s;
}

.cs-visual-wrapper.in-view~.cs-content {
    opacity: 1;
    transform: translateY(0);
}

.cs-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cs-title {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    max-width: 700px;
}

.cs-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
    margin-bottom: 40px;
    font-weight: 300;
    max-width: 600px;
}

.cs-button {
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    color: #000;
    padding: 14px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s ease;
}

.cs-button:hover {
    transform: translateY(-3px);
}

.cs-button svg {
    margin-left: 10px;
    transition: 0.3s;
}

.cs-button:hover svg {
    transform: translateX(4px);
}

.cs-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 4;
}

.cs-dot {
    width: 8px;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cs-dot.active {
    background-color: #fff;
    width: 24px;
    border-radius: 10px;
}

/* MOBILE TWEAKS */
@media (max-width: 768px) {
    .cs-content {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cs-title {
        font-size: 8vw;
    }
}

/* =========================================== */
/* === MERGED FOOTER SECTION (EQUAL COLUMNS) === */
/* =========================================== */
#page6 {
    min-height: 40vh;
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 4vw 6vw;
    
    /* USE GRID FOR EXACT EQUAL COLUMNS */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 4vw;
    align-items: center;
    border-top: 1px solid #222;
}

/* Headline */
.footer-left h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5vw;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.highlight-orange { color: #FF5F38; }
.highlight-purple { color: #8C40B8; }

/* Newsletter */
.footer-center {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* CHANGED: Removed background and border */
.newsletter-box {
    background-color: transparent;
    padding: 2vw;
    border-radius: 20px;
    text-align: center;
    width: 100%;
    border: none;
}

.newsletter-box p {
    font-size: 0.9vw;
    color: #777;
    margin-bottom: 1.5vw;
    font-weight: 400;
}

.newsletter-form-pill {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #555;
    border-radius: 50px;
    padding: 5px;
    transition: border-color 0.3s;
}

.newsletter-form-pill:focus-within { border-color: #fff; }

.newsletter-form-pill input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 20px;
    font-size: 1vw;
    outline: none;
    font-family: 'Poppins', sans-serif;
}

.newsletter-form-pill button {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9vw;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 5px;
}

.btn-circle {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF5F38, #8C40B8);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.newsletter-form-pill button:hover .btn-circle { transform: scale(1.1); }
.btn-circle i { font-size: 14px; color: #fff; }

/* Contact Info */
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 2vw; /* Center alignment within its 1/3rd space */
    gap: 3vw;
}

.contact-group h3 {
    font-size: 1.2vw;
    font-weight: 500;
    margin-bottom: 1vw;
    color: #fff;
}

.social-row { display: flex; gap: 1vw; }

.social-row a {
    width: 3vw;
    height: 3vw;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #000;
    font-size: 1.4vw;
    transition: transform 0.3s, background-color 0.3s;
}

.social-row a:hover { background-color: #FF5F38; color: #fff; transform: translateY(-5px); }
.email-link { font-size: 1.1vw; color: #fff; font-weight: 400; }

@media (max-width: 768px) {
    #page6 {
        display: flex !important; /* Switch back to Flex for stacking */
        flex-direction: column !important;
        padding: 60px 20px;
        gap: 50px;
        height: auto;
    }

    /* Left Column */
    .footer-left h1 { font-size: 40px; text-align: center; }

    /* Center Newsletter */
    .newsletter-box { max-width: 100%; }
    .newsletter-box p { font-size: 14px; }
    .newsletter-form-pill input { font-size: 16px; padding: 15px; }
    .newsletter-form-pill button { font-size: 14px; }
    .btn-circle { width: 40px; height: 40px; }

    /* Right Contact */
    .footer-right {
        align-items: center; /* Center align on mobile */
        padding-left: 0;
        width: 100%;
    }
    .contact-group h3 { font-size: 18px; }
    .social-row a { width: 50px; height: 50px; font-size: 24px; }
    .email-link { font-size: 18px; }
}

/* =========================================== */
/* === WORK PAGE GALLERY STYLES === */
/* =========================================== */

/* Dark Theme specific for Work Page */
.work-page-body {
    background-color: #111;
    color: #fff;
}

.work-nav nav {
    padding: 3vw 6vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.work-nav .nav-blog-link {
    color: #bbb;
}

.work-nav .nav-blog-link:hover, 
.work-nav .active-link {
    color: #FF5F38;
}

/* Header */
.work-header {
    padding: 8vw 6vw 4vw 6vw;
    border-bottom: 1px solid #333;
}

.work-header h1 {
    font-family: 'TitanOne-Regular';
    font-size: 7vw;
    color: #fff;
    margin-bottom: 1vw;
}

.work-header p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2vw;
    color: #888;
    max-width: 50%;
}

/* Grid Layout */
.work-gallery-container {
    padding: 4vw 6vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 2vw; 
    min-height: 100vh;
}

/* The Card */
.work-item {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3; 
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.work-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.work-item:hover img {
    transform: scale(1.05);
}

.work-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2vw;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.work-item:hover .work-overlay {
    opacity: 1;
}

.work-overlay h3 {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    font-size: 1.2vw;
    font-weight: 500;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .work-header h1 {
        font-size: 12vw;
    }
    .work-header p {
        font-size: 4vw;
        max-width: 100%;
    }
    
    .work-gallery-container {
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    .work-item {
        border-radius: 8px;
    }

    .work-overlay h3 {
        font-size: 4vw;
    }
}

/* =========================================== */
/* === UNIFIED MODAL STYLES === */
/* =========================================== */

div#imageModal.modal {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(5px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
}

div#imageModal img#img01 {
    display: block;
    margin: auto;
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    min-width: 0;
    min-height: 0;
    flex-shrink: 0;
    object-fit: contain !important;
    border-radius: 4px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    animation: zoom 0.4s;
}

div#imageModal #caption {
    margin-top: 20px;
    width: 100%;
    text-align: center;
    color: #ccc;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    flex-shrink: 0;
}

.close-modal {
    position: absolute;
    top: 30px;
    right: 30px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10002;
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.close-modal:hover {
    color: #FF5F38;
    background: rgba(255, 255, 255, 0.2);
}

@keyframes zoom {
    from {transform: scale(0.9); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}


/* =========================================== */
/* === WORK PAGE GALLERY MODAL STYLES === */
/* =========================================== */

#workGalleryModal {
    display: none;
    position: fixed;
    z-index: 10001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
}

.modal-gallery-container {
    width: 100vw;   
    height: 100vh;  
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.workSwiper {
    width: 100%;
    height: 100%;
}

.workSwiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    width: 100%;
    height: 100%;
}

.workSwiper .swiper-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    border-radius: 0;
    box-shadow: none;
    user-select: none;
}

#workGalleryModal .close-modal {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10005;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}

#workGalleryModal .close-modal:hover {
    background-color: #FF5F38;
    color: #fff;
}

.workSwiper .swiper-button-next,
.workSwiper .swiper-button-prev {
    color: #FF5F38;
    background: rgba(0, 0, 0, 0.3);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
}

@media (max-width: 768px) {
    #workGalleryModal .close-modal {
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        font-size: 24px;
    }
    
    #workGalleryModal .swiper-slide img {
        max-height: 100vh !important;
        width: 100% !important;
    }
}


/* =========================================== */
/* === PAGINATION STYLES === */
/* =========================================== */

.pagination-area {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 2vw;  
    margin-bottom: 6vw;
}

.pagination-wrapper {
    background-color: #262626;
    padding: 0.6vw 0.8vw;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 0.8vw;
}

.pagination-wrapper a {
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    color: #888;
    font-size: 1vw;
    transition: all 0.3s ease;
}

.page-btn.prev {
    border: 1px solid #444;
    padding: 0.6vw 1.8vw;
    border-radius: 50px;
    color: #fff;
    font-weight: 500;
}

.page-btn.prev:hover {
    border-color: #fff;
}

.page-btn.next {
    background-color: #FFC800;
    color: #000;
    padding: 0.6vw 1.8vw;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid #FFC800;
}

.page-btn.next:hover {
    background-color: #e5b400;
    border-color: #e5b400;
}

.page-num {
    width: 2.5vw;
    height: 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 500;
}

.page-num.active {
    background-color: #FFC800;
    color: #000;
    font-weight: 600;
}

.page-num:not(.active):hover {
    color: #fff;
}

@media (max-width: 768px) {
    .pagination-wrapper {
        padding: 10px 15px;
        gap: 15px;
    }

    .pagination-wrapper a {
        font-size: 14px;
    }

    .page-btn.prev, 
    .page-btn.next {
        padding: 10px 24px;
    }

    .page-num {
        width: 35px;
        height: 35px;
    }
}



/* =========================================== */
/* === NEW FOOTER SECTION STYLES === */
/* =========================================== */

#new-footer-section {
    width: 100%;
    background-color: #111;
    padding: 6vw 4vw 2vw 4vw;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.footer-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 2vw;
    margin-bottom: 6vw;
}

.footer-card {
    border-radius: 20px;
    padding: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 25vw;
    box-sizing: border-box;
}

.footer-card h2 {
    font-family: 'TitanOne-Regular', sans-serif;
    font-size: 2vw;
    line-height: 1.1;
    margin-bottom: 1vw;
}

/* Card 1: White */
.card-white {
    background-color: #F9F9F9;
    color: #111;
}

.card-white p {
    font-size: 1.1vw;
    margin-bottom: 2vw;
    color: #555;
}

.card-white strong {
    color: #000;
}

.footer-btn {
    display: inline-block;
    padding: 1vw 2vw;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1vw;
    width: fit-content;
    transition: transform 0.2s;
}

.btn-yellow {
    background-color: #FFC800;
    color: #000;
}

.footer-btn:hover {
    transform: scale(1.05);
}

/* Card 2: Yellow */
.card-yellow {
    background-color: #DCB57B;
    color: #000;
}

.footer-social-icons {
    display: flex;
    gap: 1vw;
    margin-top: auto;
}

.footer-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5vw;
    height: 3.5vw;
    background-color: #fff;
    border-radius: 10px;
    color: #000;
    font-size: 1.5vw;
    transition: transform 0.2s;
}

.footer-social-icons a:hover {
    transform: translateY(-5px);
}

/* Card 3: Black */
.card-black {
    background-color: #000;
    border: 1px solid #333;
    color: #fff;
}

.card-black p {
    color: #ccc;
    font-size: 1vw;
    margin-bottom: 1.5vw;
}

.checkbox-group {
    display: flex;
    gap: 1vw;
    margin-bottom: 2vw;
    flex-wrap: wrap;
}

.checkbox-group label {
    font-size: 0.9vw;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 0.5vw;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    accent-color: #fff;
    width: 1vw;
    height: 1vw;
}

.input-group {
    display: flex;
    gap: 0.5vw;
}

.input-group input {
    flex-grow: 1;
    background: transparent;
    border: 1px solid #444;
    border-radius: 50px;
    padding: 1vw 1.5vw;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9vw;
}

.input-group button {
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 50px;
    padding: 1vw 1.5vw;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.9vw;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.input-group button:hover {
    background-color: #ddd;
}


/* --- MIDDLE LINKS ROW --- */
.footer-links-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #333;
    padding-bottom: 3vw;
    margin-bottom: 2vw;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.brand-col {
    flex-basis: 30%;
}

.brand-logo {
    font-family: 'TitanOne-Regular';
    font-size: 1.5vw;
    margin-bottom: 1vw;
}

.brand-col p {
    font-size: 1vw;
    color: #888;
    line-height: 1.5;
}

.footer-col h4 {
    color: #fff;
    margin-bottom: 1.5vw;
    font-size: 1.2vw;
    font-weight: 600;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.8vw;
}

.footer-col ul li a {
    color: #888;
    text-decoration: none;
    font-size: 1vw;
    transition: color 0.2s;
}

.footer-col ul li a:hover {
    color: #fff;
}


/* --- BOTTOM COPYRIGHT --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    color: #555;
    font-size: 0.9vw;
}


/* =========================================== */
/* === MAIN MOBILE RESPONSIVE BLOCK === */
/* =========================================== */
@media (max-width: 768px) {

    /* --- Global Unit Resets --- */
    nav {
        padding: 20px;
    }

    nav h3,
    nav h4,
    .nav-blog-link,
    .blog-nav h3,
    .blog-nav h4 {
        font-size: 16px;
    }

    /* --- Page 1 (MANO Fix) --- */
    #page1-content h1 {
        /* Changed from 18vh to 23vw so it fits the width of the phone */
        font-size: 23vw !important; 
        line-height: 23vw !important;
        letter-spacing: -1vw !important;
    }

    #cursor {
        display: none;
    }

    /* --- Page 2 (Creative Section - Horizontal Scroll Fix) --- */
    #page2 {
        padding: 40px 20px;
    }

    #page2-top {
        align-items: flex-start;
    }

    #page2-top h3,
    #page2-top h4 {
        width: 100%;
        font-size: 18px;
        margin-bottom: 20px;
        text-align: left;
    }

    .elem h1 {
        font-size: 24px;
        text-align: left;
    }

    /* Fix the gallery to scroll horizontally instead of stacking vertically */
    .creative-gallery {
        width: 100% !important;
        height: auto !important; 
        display: flex !important;
        flex-direction: row !important; /* Force Side-by-side */
        overflow-x: auto !important;    /* Enable Scrolling */
        gap: 20px !important;
        margin-top: 20px;
        padding-bottom: 20px; /* Space for scrollbar */
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    }

    .creative-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        
        /* Make them card-sized (80% of screen width) */
        width: 80vw !important;
        height: 50vh !important;
        flex-shrink: 0 !important; /* Prevent shrinking */
        
        transform: none !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

    .img-courtyard, .img-diagram, .img-render {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* --- Page 3 --- */
    #page3-elements {
        flex-direction: column;
        height: auto;
        margin-top: 40px;
    }

    #page3-elements .box {
        width: 100%;
        height: 50vh;
        margin-bottom: 20px;
    }

    #page3-top h2 {
        font-size: 32px;
    }

    #page3-top h4 {
        font-size: 14px;
    }

    /* --- Page 5 (Slider - Horizontal Scroll Fix) --- */
    #page5 {
        height: auto !important; /* Allow section to fit content */
        min-height: 60vh; /* Give it some minimum height */
        overflow: hidden; /* Prevent page-level horizontal scroll */
    }

    #page5 h1 {
        font-size: 14vw;
    }

    #swiperdiv {
        height: auto !important;
        margin-top: 20px !important;
        width: 100%;
        overflow: hidden;
    }

    /* The container for the images */
    #page5 .swiper-slide {
        display: flex !important;
        flex-direction: row !important; /* Force a single row */
        flex-wrap: nowrap !important;   /* Do not wrap to next line */
        gap: 20px !important;           /* Space between images */
        
        /* Enable horizontal scrolling */
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
        
        /* Padding */
        padding-bottom: 20px; 
        padding-left: 5vw; 
        padding-right: 5vw; 
        
        width: 100%; 
        height: auto !important;
    }

    /* The images themselves */
    #page5 .swiper-slide img {
        /* Set a fixed width that is less than the screen width to encourage scrolling */
        width: 80vw !important; 
        height: 50vh !important; 
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0 !important; 
    }

    /* FIX: Force Popup Gallery images to be full size on mobile */
    #myModal .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        max-height: 80vh;
        object-fit: contain;
        flex-shrink: 1 !important;
    }

    /* --- Page 6 (Contact) --- */
    #page6 {
        flex-direction: column;
        padding: 40px 20px;
        justify-content: center;
    }

    #contact-left {
        flex-basis: auto;
        margin-bottom: 40px;
        width: 100%;
    }

    #contact-left h1 {
        font-size: 48px;
    }

    #contact-right {
        flex-basis: auto;
        width: 100%;
        gap: 40px;
    }

    .social-icon {
        width: 50px;
        height: 50px;
    }

    .social-icon i {
        font-size: 24px;
    }

    .email-section h3 {
        font-size: 14px;
    }

    .email-section p {
        font-size: 18px;
    }

    /* --- Blog Page --- */
    .blog-nav {
        padding: 20px;
    }

    .blog-main {
        padding: 20px;
    }

    .blog-header h1 {
        font-size: 48px;
    }

    .blog-header p {
        font-size: 16px;
        max-width: 100%;
    }

    .blog-content {
        flex-direction: column;
    }

    .blog-categories {
        margin-bottom: 30px;
    }

    .blog-categories h3 {
        font-size: 20px;
    }

    .blog-categories a {
        font-size: 16px;
        padding: 10px 0;
    }

    .post-card {
        flex-direction: column;
    }

    .post-image {
        width: 100%;
        height: 60vw;
        margin-right: 0;
        margin-bottom: 20px;
    }

    .post-content {
        width: 100%;
    }

    .post-meta span {
        font-size: 12px;
    }

    .post-content h2 {
        font-size: 22px;
    }

    .post-content p {
        font-size: 14px;
    }

    .post-read-more {
        font-size: 14px;
    }

    /* --- Single Post Page --- */
    .post-detail-main {
        padding: 20px;
    }

    .post-detail-meta span {
        font-size: 12px;
    }

    .post-header-content h1 {
        font-size: 32px;
    }

    .post-intro-text {
        font-size: 16px;
    }

    .post-featured-image {
        height: 60vw;
    }

    .post-article-content {
        font-size: 16px;
    }

    .post-article-content h2 {
        font-size: 24px;
    }

    .post-article-content h3 {
        font-size: 20px;
    }

    /* --- Footer (Stacked) --- */
    #new-footer-section {
        padding: 10vw 5vw;
    }

    .footer-cards-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-card {
        padding: 30px;
        min-height: auto;
    }
    
    .footer-card h2 {
        font-size: 24px;
    }
    
    .card-white p, .card-black p {
        font-size: 14px;
    }

    .input-group input, 
    .input-group button {
        font-size: 14px;
        padding: 15px;
    }
    
    .footer-links-row {
        flex-direction: column;
        gap: 40px;
    }
    
    .brand-logo {
        font-size: 24px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    /* --- FIX FOR IN PRACTICE COURSE SECTION --- */
    /* Pushes text to the bottom and reveals image at the top */
    .course-intro-section {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: center !important;
        
        /* Image Position: Center Horizontal, 20% from Top */
        background-position: 50% 20% !important; 
        
        /* Image Size: Zoomed in slightly so it fills width */
        background-size: 120% auto !important; 
        background-repeat: no-repeat !important;
        
        /* Create empty space at the top for the image */
        padding-top: 80vw !important; 
        padding-bottom: 0 !important;
        
        height: auto !important;
        min-height: 100vh !important;
    }

    /* Style the text box to look like a card sliding up */
    .course-info-box {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        background-color: #1b1b1b !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
        padding: 40px 30px 60px 30px !important;
        z-index: 5;
    }

    /* Remove Dark Overlay on Mobile so image is bright */
    .course-intro-section::before {
        display: none !important;
    }
}


/* =========================================== */
/* === HAMBURGER MENU STYLES === */
/* =========================================== */

/* 1. DESKTOP DEFAULT: Hide the icon, show the text */
.mobile-menu-icon {
    display: none; /* Hide icon by default */
    cursor: pointer;
}

/* Optional: Make the lines thicker/rounder */
.mobile-menu-icon svg path {
    transition: stroke 0.3s ease;
}
.mobile-menu-icon:hover svg path {
    stroke: #FF5F38; /* Turns orange on hover */
}

/* 2. MOBILE RESPONSIVE RULES */
@media (max-width: 768px) {
    
    /* Hide the text links ("WORK BLOG TUTORIALS") */
    .nav-group.desktop-only {
        display: none !important;
    }

    /* Show the Hamburger Icon */
    .mobile-menu-icon {
        display: block !important;
    }
    
    /* Ensure the nav bar aligns properly */
    nav {
        justify-content: space-between !important;
        align-items: center !important;
        padding: 20px !important;
    }
}

/* =========================================== */
/* === MOBILE MENU OVERLAY STYLES === */
/* =========================================== */
#mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #111; /* Dark background */
    z-index: 20000; /* Sit on top of everything */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Animation State: Start hidden above the screen */
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

/* This class is added by JS to show the menu */
#mobile-menu-overlay.active {
    transform: translateY(0);
}

.mobile-links a {
    display: block;
    font-family: 'TitanOne-Regular', sans-serif; /* Your fancy font */
    font-size: 10vw; /* Big text for mobile */
    color: #fff;
    text-decoration: none;
    margin-bottom: 4vh;
    text-align: center;
    transition: color 0.3s;
}

.mobile-links a:hover {
    color: #FF5F38; /* Orange on hover */
}

.close-menu-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 50px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
}


@media (max-width: 768px) {
    #loader h3 {
        font-size: 5vw !important; 
    }
}