/* ===== FONT IMPORTS ===== */
@font-face {
    font-family: 'POORICH';
    src: url('assets/fonts/POORICH.TTF') format('truetype');
}

@font-face {
    font-family: 'FTLTLT';
    src: url('assets/fonts/FTLTLT.TTF') format('truetype');
}

@font-face {
    font-family: 'BRLNSR';
    src: url('assets/fonts/BRLNSR.TTF') format('truetype');
}

@font-face {
    font-family: 'BRLNSDB';
    src: url('assets/fonts/BRLNSDB.TTF') format('truetype');
}

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

body {
    font-family: POORICH;
    background-color: #ffffff;
    overflow-x: hidden;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
}

/* ===== MARQUEE ===== */
.marquee-container {
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    padding: 10px 0;
    text-align: center;
}

.marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
    font-size: 1.2rem;
    color: #910c21;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

nav {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    padding: 12px 120px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    z-index: 1000;
}

/* MAIN FLEX CONTAINER */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 🔥 THIS spreads logo left & links right */
}

/* LOGO */
.nav-logo img {
    width: 50px;
    /* adjust size */
    height: auto;
    cursor: pointer;
}

/* LINKS */
.nav-links {
    list-style: none;
    display: flex;
    gap: 35px;
}

.nav-links li {
    font-size: 1.2rem;
}

.nav-links a {
    text-decoration: none;
    color: black;
    transition: 0.3s ease;
}

.nav-links a:hover {
    opacity: 0.6;
}

/* ===== HERO SECTION ===== */
.hero-section {
    height: 70vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Finisher canvas fix */
.finisher-header canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Logo positioning */
.logo-container {
    position: relative;
    z-index: 10;
}

.hero-logo {
    width: 250px;
    height: auto;
    margin-right: 85px;
    margin-bottom: 20px;
}

/* ===== SECTION TITLES ===== */
.services-intro,
.contact-intro {
    padding: 40px 10px;
    text-align: center;
    background-color: #ffffff;
    padding-top: 20px;
}

.services-intro img,
.contact-intro img {
    height: 70px;
}

.services-carousel {
    position: relative;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.carousel {
    width: 80%;
    text-align: center;
}



.slide.active {
    display: block;
    animation: fade 0.6s ease-in-out;
}

/* ===== SECTION TITLES (GLOBAL STYLE) ===== */

.section-title {
    font-family: inherit;
    font-size: 2.5rem;
    font-weight: 500;
    text-align: center;
    color: #910c21;
    margin: 40px 0 30px 0;
    letter-spacing: 0.5px;
    position: relative;

}

/* optional underline effect */
.section-title::after {
    content: "";
    display: block;
    width: 80px;
    height: 0.7px;
    background: grey;
    margin: 30px auto 0 auto;
    border-radius: 5px;
}

.slide h2 {
    font-size: 1.3rem;
    color: #000;
    font-weight: 500;


}

.slide p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: black;

}

.service-btn {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(145deg, #910c21);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.25s ease;
    margin-left: 20%;
    margin-right: 20%;
}

.service-btn:hover {
    background: #000;
}



@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================= */
/* SERVICES ICONS (FIXED) */
/* ============================= */

.services-icons {
    display: flex;
    justify-content: center;
    gap: 35px;
}

.services-icons .icon p {
    font-size: 0.9rem;
}

/* Icon container */
.icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Icon image */
.icon img {
    width: 33px;
    height: 33px;
    transition: 0.3s ease;
}

/* Active icon */

/* Hover */
.icon:hover {
    transform: translateY(-4px);
    transform: scale(1.3);
}



/* ============================= */
/* SERVICES TITLE + ICONS SPACING */
/* ============================= */

/* Add more space below the services title image */
.services-title {
    margin-bottom: 20px;
    /* increase space as needed */
}

/* Add some spacing above icons row if needed (optional) */
.services-icons {
    margin-top: 20px;
    /* adds extra gap from image */
    display: flex;
    justify-content: center;
    gap: 35px;
    /* your current horizontal spacing */
}

.icons-instruction {
    font-size: 0.9rem;
    /* tiny but readable */
    color: #555;
    /* burgundy accent to match your highlight */
    text-align: center;
    margin-top: 25px;
}

/* Mobile Background */





/* Make active slide visible */
.slide.active {
    display: block;
}

/* ========================= */
/* MOBILE FRAME (Tall Phone) */
/* ========================= */


/* ========================= */
/* WEBSITE / DESKTOP FRAME */
/* ========================= */


/* ========================= */
/* CV FRAME */
/* ========================= */
.slideC .slide-content {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 60%;
    height: 65%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.slide h2 {
    font-size: 1.3rem;
    color: #000;

}

.slide p {
    font-size: 1.2rem;
    font-weight: 500;

}

.slide-content {
    overflow: hidden;
}


.slide.active {
    display: block;
}

.slideC {
    aspect-ratio: auto;
}


.slide-content {
    overflow: hidden;
    padding: 12px;
}

.slide h2 {
    font-size: 1.3rem;
}

.slide p {
    font-size: 1.2rem;
}

.carousel {
    display: block;
    width: 100%;
    justify-content: center;
    /* horizontal center */
    align-items: center;
    /* vertical center (optional) */
    width: 100%;
    max-width: 1200px;
}

.slide {
    width: 600px;
    max-width: 90%;
    margin-top: 40px;
}

/* ========================= */
/* ASK SLIDE CUSTOM LAYOUT */
/* ========================= */

/* ========================= */
/* ASK SLIDE SIDE LAYOUT */
/* ========================= */

.slideA .slide-content {
    position: static;
    /* remove absolute positioning */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
}

/* Image (LEFT side) */
.slideA .ask-img {
    width: 50%;
    height: auto;
    border-radius: 15px;
}


/* Text + Button (RIGHT side) */
.slideA .ask-text {
    width: 55%;
    text-align: center;
}

@media (max-width: 768px) {

    .slideA .slide-content {
        flex-direction: column;
        text-align: center;
    }

    .slideA .ask-img,
    .slideA .ask-text {
        width: 100%;
    }
}

/* ========================= */
/* ASK SLIDE SIDE LAYOUT */
/* ========================= */

.slideA {
    aspect-ratio: auto;
    /* remove frame behavior */
}

.slideA .slide-content {
    position: static;
    /* remove absolute positioning */
    display: flex;
    /* THIS was missing */
    align-items: center;
    /* vertical center */
    justify-content: center;
    /* horizontal center */
    width: 100%;
    height: 100%;
    text-align: left;
}

.slideA .ask-form.teal-form .send-btn {
    width: 25%;
    background-color: #910c21;
}

.slideA .animation-container h2 {
    font-size: 1.3rem;
    color: #000;
    font-weight: 500;
}

.slide .animation-container .animation {
    width: 100%;
    height: 17;
}

/* Image (LEFT) */
.slideA .ask-img {
    width: 65%;
    height: auto;
    border-radius: 15px;
}

/* Text + Button (RIGHT) */
.slideA .ask-text {
    width: 45%;
}

/* Center the whole slide properly */
.slideA {
    align-items: center;
    justify-content: center;
}

/* =============================== */
/* MOBILE SERVICE SLIDE LAYOUT */
/* =============================== */





.slide {
    display: none;
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.mobile-service {
    display: flex;
    align-items: center;
    /* ✅ THIS FIXES YOUR PROBLEM */
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* LEFT SIDE: PHONE FRAME */
.mobile-left {
    flex: 1 1 400px;
    /* grow/shrink with min width */
    display: flex;
    justify-content: center;
    /* center phone horizontally */
}


/* RIGHT SIDE: TEXT CONTENT */
.mobile-right {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.mobile-right .heading {
    font-size: 1.3rem;
    color: #910c21;

}

.slideA .slide-content .heading {
    font-size: 1.3rem;
    color: #000;
    font-weight: 600;
}

.reviews-container {
    margin-top: 20px;
}

.mobile-service {
    display: flex;
    align-items: center;
    /* ✅ THIS FIXES YOUR PROBLEM */
    justify-content: center;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

/* LEFT SIDE: PHONE IMAGE */
.mobile-left {
    position: relative;
    /* needed for absolute form positioning */
    flex: 1 1 400px;
    display: flex;
    justify-content: center;
}

/* Phone image */
.mobile-left .mobile-img {
    width: 400px;
    height: 650px;
}

/* RIGHT SIDE: TEXT CONTENT */
.mobile-right {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
}

.mobile-right h2 {
    font-size: 1.3rem;
    color: black;

}

.mobile-right h2 {
    font-size: 1.3rem;
    color: #000;
    font-weight: 800px;
}


.reviews-container p {
    color: #333;

}

.mobile-screen-form {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* inputs and textarea */
.mobile-screen-form input,
.mobile-screen-form textarea {
    width: 70%;
    /* smaller width */
    padding: 12px 14px;
    /* increases height */
    font-size: 1rem;
    /* bigger text */
    border-radius: 8px;
    border: 1px solid #ccc;
    outline: none;
    font-family: inherit;
}

.mobile-screen-form p {
    width: 70%;
}

/* button */

.mobile-screen-form button {
    width: 25%;
    padding: 12px 10px;
    margin-top: 15px;

    background-color: #000;
    /* burgundy */
    color: white;

    border: none;
    border-radius: 30px;

    font-family: inherit;
    font-weight: 500;
    font-size: 1.2rem;

    cursor: pointer;
    transition: opacity 0.25s ease;
    /* only opacity */
}

.mobile-screen-form button:hover {
    opacity: 0.9;
}

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup-content {
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    width: 320px;
    animation: popupFade 0.3s ease;
}

.popup-content h3 {
    margin-bottom: 10px;
}

.popup-content button {
    margin-top: 15px;
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    background: #000;
    /* burgundy */
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 1.2rem;
}

.success h2 {
    color: #000;
    font-size: 1.3rem;
    padding-bottom: 10px;

}

.success p {
    font-size: 1.1rem;
    color: #333
}

.error h3 {
    color: #910c21;
}

@keyframes popupFade {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Hide default file input */
.file-upload input[type="file"] {
    display: none;
}

/* Custom file upload button */
.file-btn {
    width: 70%;
    padding: 12px 14px;
    font-size: 1.2rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: white;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s ease;
}

/* Hover effect */
.file-btn:hover {
    border-color: #910c21;
}

#fileName {
    font-size: 0.9rem;
    color: #555;
    margin-top: 5px;
}

.file-selected {
    color: #910c21;
    font-weight: 500;
}

/* Match width to other text inputs and add top margin */
.file-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* space between button and status text */
    margin-top: 2px;
    /* space between upper input and button */
    width: 100%;
}

/* Hide the real file input */
.file-upload input[type="file"] {
    display: none;
}

/* Custom upload button */
.file-btn {
    width: 70%;
    /* same width as upper text boxes */
    padding: 10px 10px;
    font-size: 1.2rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: white;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: 0.2s ease;
}

/* Hover effect */
.file-btn:hover {
    border-color: #910c21;
}

/* Status text below button */
#fileName {
    font-size: 0.9rem;
    color: #555;
    text-align: center;
}

/* Optional: change color when file is selected */
.file-selected {
    color: #910c21;
    font-weight: 500;
}

.mobile-right {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*  center text vertically */
    align-self: center;
    padding: 25px;
    text-align: center;
    /* optional but cleaner */
    padding-left: 50px;
}

.mobile-left,
.mobile-right {
    display: flex;
    align-items: center;
}



/* ===== Desktop Slide Vertical Layout ===== */


/* Text + form below */




/* Optional: make sure form inputs match width nicely */


/* Responsive stacking for services slides */
@media (max-width: 992px) {
    .mobile-service {
        flex-direction: column;
        /* stack left on top, right below */
        gap: 30px;
        /* spacing between image and text */
    }

    .mobile-left,
    .mobile-right {
        flex: 1 1 100%;
        /* full width */
        justify-content: center;
        /* center content horizontally */
        text-align: center;
        /* center text */
    }

    .mobile-left .mobile-img {
        width: 70%;
        /* shrink image for smaller screen */
        height: auto;
    }
}

/* ===== ASK SLIDE LEFT-RIGHT LAYOUT ===== */
.slideA .slide-content {
    display: flex;
    /* horizontal layout */
    flex-direction: row;
    /* left-right */
    align-items: center;
    /* vertically center content */
    justify-content: center;
    /* center the whole slide horizontally */
    gap: 50px;
    /* space between left and right */
    width: 100%;
    height: auto;
    text-align: center;
    font-weight: 400px;

}

/* LEFT SIDE: animation */
.slideA #girlAnimation {
    width: 45%;
    height: auto;
}

/* RIGHT SIDE: text + button */
.slideA .ask-text {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

/* Responsive: stack vertically on smaller screens */
@media (max-width: 768px) {
    .slideA .slide-content {
        flex-direction: column;
        text-align: center;
    }

    .slideA #girlAnimation,
    .slideA .ask-text {
        width: 100%;
    }
}

/* ASK SLIDE FIX */
.slideA {
    display: none;
    /* keep consistent with other slides */
}

.slideA.active {
    display: flex;
    /* show when active */
}

.slideA .slide-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
    width: 100%;
}

/* LEFT SIDE: animation */
#girlAnimation {
    width: 400px;
    /* set explicit width */
    height: 400px;
    /* set explicit height */
}

/* RIGHT SIDE: text + button */
.slideA .ask-text {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

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

    #girlAnimation,
    .slideA .ask-text {
        width: 100%;
        height: auto;
    }
}

/* ===== ASK SLIDE NEW DESIGN ===== */

.slideA.active {
    display: flex;
}

.slideA .slide-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    width: 100%;
}

/* LEFT SIDE (animation) */
#girlAnimation {
    width: 450px;
    height: 450px;
}

/* RIGHT SIDE (form) */
.ask-form {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: teal;

}

.ask-form h2 {
    color: #910c21;
    font-size: 1.3rem;
    margin-bottom: 20px;
}

/* Inputs */
.ask-form input,
.ask-form textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 13px;
}

/* Button */
.ask-form button {
    margin: 10px auto 0 auto;
    /* ✅ centers horizontally */
    border: none;
    border-radius: 30px;
    background: #000;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    font-family: inherit;
    display: block;
    /* important for margin auto */
}

/* File upload tweaks */
#askFileName {
    font-size: 0.9rem;
    color: #555;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .slideA .slide-content {
        flex-direction: column;
        text-align: center;
    }

    #girlAnimation,
    .ask-form {
        width: 100%;
    }
}

/* Stack vertically */
.slide-content {
    display: flex;
    flex-direction: column;
    /* Vertical stacking */
    align-items: center;
    /* Center horizontally */
    gap: 0px;
    /* Space between form, p, and animation */
}

/* Teal background for form + title */
.teal-form {
    background-color: #00CED1;
    /* Bright teal */
    border-radius: 20%;
    /* Rounded corners */
    padding: 30px;
    /* Space inside form */
    max-width: 500px;
    /* Optional: limit form width */
    width: 90%;
    /* Responsive width */
}

/* Optional: style form inputs nicely */
.teal-form input,
.teal-form textarea {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 10px;
    border: none;
    box-sizing: border-box;
}

/* Keep description centered */
.service-description {
    text-align: center;
    max-width: 600px;
    color: #000
}

.service-description strong {
    text-align: center;
    max-width: 600px;
    color: #910c21;
    font-weight: lighter;
}

/* Animation size */
#girlAnimation {
    width: 300px;
    height: 300px;
}

/* Make slide content stack vertically */
.slideA .slide-content {
    display: flex;
    flex-direction: column;
    /* vertical stack */
    align-items: center;
    /* center horizontally */
    gap: 30px;
    /* spacing between form, description, animation */
    width: 100%;
}

/* Teal form */
.teal-form {
    /* bright teal */
    border-radius: 20%;
    /* rounded corners */
    padding: 30px;
    /* inner spacing */
    max-width: 500px;
    /* limit width */
    width: 90%;
    /* responsive */
    box-sizing: border-box;
}

/* Center description */
.mobile-service .service-description {
    text-align: center;
    max-width: 600px;
    font-size: 1.2rem;
    color: black;
    padding-top: 13px;
}

/* Animation size */
#girlAnimation {
    width: 400px;
    /* adjust as needed */
    height: 400px;
}

/* Slide content: left-right layout */
.slideA .slide-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    width: 100%;
    padding: 20px;
}

/* LEFT SECTION */
.left-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

/* RIGHT SECTION */
.right-section {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container for overlapping text + animation */
.animation-container {
    position: relative;
    width: 400px;
    height: 400px;
}

/* Description on top of animation */
.animation-container .service-description {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    font-size: 1.2rem;
    color: black;
    background: rgba(255, 255, 255, 0.6);
    /* optional semi-transparent background for readability */
    padding: 10px 15px;
    border-radius: 10px;
}

/* Animation behind text */
.animation-container #girlAnimation {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Teal Form */
.teal-form {
    background-color: #F2EAE0;
    border-radius: 20%;
    padding: 30px;
    width: 100%;
    box-sizing: border-box;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .slideA .slide-content {
        flex-direction: column;
        align-items: center;
    }

    .animation-container {
        width: 300px;
        height: 300px;
    }
}

/* === ASK SLIDE CLEAN LAYOUT === */
.slideA {
    display: none;
    /* keep hidden by default */
}

.slideA.active {
    display: flex;
}

.slideA .slide-content {
    display: flex;
    flex-direction: row;
    /* side-by-side on desktop */
    align-items: flex-start;
    justify-content: center;
    gap: 60px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

/* LEFT: Animation + description */
.animation-container {
    position: relative;
    flex: 1;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.animation-container .service-description {
    text-align: center;
    font-size: 1.2rem;
    color: black;
    z-index: 2;
    background: rgba(255, 255, 255, 0.6);
    padding: 8px 12px;
    border-radius: 10px;
}

#girlAnimation {
    width: 100%;
    height: 600px;
    z-index: 1;
}

/* RIGHT: Teal Form */
.ask-form.teal-form {
    flex: 1;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #F8F8F8;
    border-radius: 2px;
    padding: 25px;
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(145, 12, 33, 0.15), 0 2px 6px rgba(145, 12, 33, 0.1);

}

.ask-form .service-description strong {
    color: #910c21;
    font-size: 1.4rem;
    margin-bottom: 10px;
    text-align: center;


}

/* Inputs and button */
.ask-form input,
.ask-form textarea,
.ask-form button {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 12px;
    gap: 12px;
}

.ask-form button {
    background-color: #000;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 100;

}

.ask-form button:hover {
    opacity: 0.9;
}

/* Responsive: Stack vertically on mobile */
@media (max-width: 768px) {
    .slideA .slide-content {
        flex-direction: column;
        align-items: center;
    }

    .animation-container,
    .ask-form {
        max-width: 80%;
    }

    #girlAnimation {
        height: 500px;
    }
}

/* Adjust for Ask Slide */
.slideA .slide-content {
    display: flex;
    flex-direction: row;
    /* left-right layout */
    justify-content: center;
    align-items: flex-start;
    /* top-align content */
    gap: 60px;
    width: 100%;
    padding: 20px;
}

/* LEFT SIDE: animation container */
.animation-container {
    position: relative;
    width: 400px;
    height: 400px;
    margin-top: 50px;
    /* push animation down */
}

/* Animation itself */
#girlAnimation {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 1;
}

#girlAnimation {
    width: 300px;
    /* or 100% */
    height: 300px;
    /* must be non-zero */
    margin: 0 auto;
    /* optional: center */
}

/* Paragraph on top of animation */
.animation-container .service-description {
    position: absolute;
    top: -60px;
    /* pull description higher */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    font-size: 1.2rem;
    color: black;
    background: rgba(255, 255, 255, 0.6);
    padding: 10px 15px;
    border-radius: 10px;
}

/* Button spacing */
.ask-form button {
    margin-top: 25px;
    /* increase top margin */
}

/* Add spacing between h2 and Lottie animation */
.animation-container h2 {
    margin-bottom: 40px;
    /* increase this value as needed */

}

/* Space between h2 and animation */
#girlAnimation {
    margin-top: 30px;
    /* increase this value for more gap */
    width: 400px;
}

section {
    width: 100%;
    display: block;
    clear: both;
}

/* ===== CONTACT SECTION ===== */

.contact-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    margin-top: 25px;
}

/* LEFT: animation */
.contact-left {
    flex: 1;
    display: flex;
    justify-content: center;
}

#contactAnimation {
    width: 400px;
    height: 400px;
}

/* RIGHT: form */
.contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.contact-right h2 {
    color: #910c21;
    font-size: 1.3rem;
    text-align: center;
}

/* Inputs */
.contact-right input,
.contact-right textarea {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: 1rem;
}

/* Button */
.contact-right button {
    padding: 12px;
    border-radius: 30px;
    border: none;
    background: #000;
    color: white;
    font-size: 1.2rem;
    font-weight: 500;
    cursor: pointer;
}

.contact-right button:hover {
    opacity: 0.9;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        gap: 40px;
    }

    #contactAnimation {
        width: 300px;
        height: 300px;
    }
}

/* ===== CONTACT SECTION ===== */

.services-title {
    height: 100px;
    margin-bottom: 30px;
    align-content: center;
}

/* ROW: animation + text */
.contact-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    max-width: 1100px;
    margin: 0 auto 20px auto;
}

/* LEFT */
.contact-animation {
    flex: 1;
    display: flex;
    justify-content: center;
}

#contactAnimation {
    width: 480px;
    height: 480px;
}

/* RIGHT */
.contact-text {
    flex: 1;
    text-align: center;
    margin-left: 115px;
}

.contact-text h2 {
    color: #000;
    font-size: 1.3rem;
    margin-bottom: 15px;
    margin-top: 22px;
}

.contact-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
}

/* FORM */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* MATCH spacing with your other forms */
.contact-form input,
.contact-form textarea {
    width: 70%;
    /* SAME as your other forms */
    padding: 12px 14px;
    font-size: 1rem;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: inherit;
    margin-bottom: 15px;
    /* 🔥 THIS is the spacing you wanted */
}

/* BUTTON */
.contact-form button {
    width: 20%;
    /* SAME style as others */
    padding: 12px 16px;
    margin-top: 15px;
    background-color: #910c21;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1.2rem;
    cursor: pointer;
}

.contact-form button:hover {
    opacity: 0.9;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
        text-align: center;
    }

    .contact-text {
        text-align: center;
    }

    #contactAnimation {
        width: 380px;
        height: 380px;
    }
}

/* RIGHT SIDE STACK */
.contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

/* TEXT */
.contact-text p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333;
}

/* FORM */
.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* INPUT SPACING (important) */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 15px;
    /* spacing between boxes */
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 1rem;
}

/* BUTTON */
.contact-form button {
    width: 40%;
    padding: 12px;
    background: #A2CB8B;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 1.2rem;
}

.contact-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 29px;
}

/* FORCE SAME START LINE */
.contact-text {
    width: 80%;
}

.contact-form button {
    width: 20%;
    padding: 12px;
    background: #910c21;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font: inherit;
    /* 🔥 this is the key */
    font-size: 1.2rem;
    font-weight: 500;

}

/* Jump animation */
@keyframes jumpText {
    0% {
        transform: translateY(0);
    }

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

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

html {
    font-size: 1.2rem;
}

@media (max-width: 1024px) {
    html {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 1.2rem;
    }
}

/* =========================
   TABLET + MOBILE FIX
========================= */

@media (max-width: 1024px) {

    /* HERO */
    .hero-section {
        height: 50vh;
        justify-content: center;
    }

    .hero-logo {
        width: 199px;
        margin-right: 0;
    }

    /* NAV */
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    nav li {
        font-size: 1.2rem;
        margin-right: 0;
    }

    /* SERVICES LAYOUT */
    .mobile-service {
        flex-direction: column;
    }

    .mobile-left,
    .mobile-right {
        flex: 1 1 100%;
        text-align: center;
    }

    .mobile-left .mobile-img {
        width: 80%;
        height: auto;
    }

    /* DESKTOP SLIDE FIX */


    /* ASK SECTION */
    .slideA .slide-content {
        flex-direction: column;
        align-items: center;
    }

    .animation-container {
        width: 300px;
        height: 300px;
    }

    .ask-form.teal-form {
        width: 90%;
    }

    /* CONTACT */
    .contact-content {
        flex-direction: column;
        gap: 10px;
    }

    .contact-right,
    .contact-animation {
        width: 3000px;
        align-items: center;
    }

    .contact-form input,
    .contact-form textarea {
        width: 600px;
    }
}

@media (max-width: 480px) {

    .marquee-text {
        font-size: 1.2rem;
    }

    .slide h2 {
        font-size: 1.3rem;
    }

    .mobile-screen-form input,
    .mobile-screen-form textarea {
        width: 90%;
        font-size: 1rem;
    }

    .service-btn {
        width: 80%;
        margin: 0 auto;
        display: block;
    }

    .hero-logo {
        width: 180px;
    }
}

.fotter {
    align-items: center;
    align-self: center;
    align-content: center;
    background-color: #910c21;
    font-family: inherit;
    height: 8vh;

}

.fotter p {
    margin-left: 40%;
    color: #fff;
    font-size: 1.2rem;
}

.mobile-left p {
    color: #000;
}

.mobile-right p {
    color: #000
}

/* =========================
   PROJECTS SECTION
========================= */

.projects-section {
    padding: 80px 0;
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
}


/* PROJECT CARD */
.project-card {
    width: 90%;
    margin: 0 auto 80px auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;

    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.project-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* LEFT TEXT SIDE */
.project-info {
    flex: 1;
    text-align: left;
    font-family: inherit;
}

.project-title {
    font-size: 1.3rem;
    color: #000;
    margin-bottom: 15px;
    font-weight: lighter;
    font-family: inherit;
}

.project-desc {
    font-size: 1.2rem;
    color: black;
    font-family: inherit;

}

/* TECH STACK */
.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.tech-stack img {
    width: 45px;
    height: 45px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e0e0e0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tech-stack img:hover {
    transform: scale(1.15);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* SLIDER */
.slider-container {
    flex: 1;
    position: relative;

    width: 320px;
    height: 280px;

    border-radius: 12px;
    overflow: hidden;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.slider-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;

    transition: opacity 0.4s ease;
}

.slider-container img.active {
    opacity: 1;
}

/* SLIDER BUTTONS */
.slider-container .prev,
.slider-container .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    background: rgba(96, 7, 7, 0.7);
    color: #fff;
    border: none;

    width: 38px;
    height: 38px;
    border-radius: 50%;

    cursor: pointer;
    z-index: 5;
}

.slider-container .prev {
    left: 10px;
}

.slider-container .next {
    right: 10px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .project-card {
        flex-direction: column;
        text-align: center;
    }

    .project-info {
        text-align: center;
    }

    .slider-container {
        width: 100%;
        max-width: 320px;
    }
}

/* ===== UNIFIED SECTION TITLES ===== */
/* ===== UNIFIED SECTION TITLES ===== */
.services-title,
.contact-title,
.books-title {
    height: 70px;
    display: block;
    margin: 0 auto 30px auto;
    object-fit: contain;
}

/* ===== UNIFIED SECTION TITLES ===== */

.projects-title {
    height: 60px;
    display: block;
    margin: 0 auto 30px auto;
    object-fit: contain;
}

/* ==============================
   MOBILE APPS MINI CAROUSEL
   ============================== */

.mobile-carousel {
    position: relative;
    margin-top: 5px;
    width: 100%;
    max-width: 500px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mobile-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 5px;
}

/* Items */
.mobile-item {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: all 0.4s ease;
}

.mobile-item img {
    width: 200px;
    height: auto;
    border-radius: 15px;
}

/* States */
.mobile-item.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    z-index: 2;
}

/* Buttons */
.mobile-carousel-btn {
    background: #000;
    color: #fff;
    border: none;
    font-size: 1.2rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    opacity: 0.8;

}

.mobile-carousel-btn.left {
    position: absolute;
    left: 0;
}

.mobile-carousel-btn.right {
    position: absolute;
    right: 0;
}

.mobile-carousel-btn:hover {
    transform: scale(1.1);
}

.mobile-right .icons-instruction {
    font-size: 1.2rem;
    color: #910c21
}

.services-icons .icon {
    flex-direction: column;
    gap: 3px;
}

.services-icons .icon p {
    font-size: 1.2remx;
    color: #910c21
}


.mobile-screen-form .form-intro {
    line-height: 1.2;
    /* reduce space between lines */
}

.mobile-screen-form .form-intro strong {
    color: #910c21;
    font-weight: lighter;
    display: inline-block;
    padding-top: 45px;
}

.projects-content {
    padding-top: 50px;
}

.lightbox {
    display: none;
    position: fixed;
    top: 0;

    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: #fff;

    cursor: pointer;
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #fff;
    background: #3A5880;
    border: none;
    padding: 10px 16px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s, transform 0.3s;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    transform: scale(1.1);
}

.lightbox-prev {
    left: 30px;
}

.lightbox-next {
    right: 30px;
}

.slider-container img {
    opacity: 0;
}

.slider-container img.active {
    opacity: 1;
}

.lightbox {
    z-index: 99999;
    /* higher than nav */
}

.lightbox-prev,
.lightbox-next,
.lightbox-close {
    z-index: 100000;
}

.books-intro {
    display: flex;
    /* THIS is missing */
    flex-direction: column;
    /* stack vertically */
    align-items: center;
}


.books-intro .cover {
    width: 135px;
    height: auto;
    align-items: left;
    align-self: left;
    align-content: left;
    box-shadow: #000;
}

.books-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* THIS pushes items to the left */
    width: 100%;
}

.cover {
    align-self: flex-start;
}

.books-content {
    display: flex;
    flex-direction: row;
    /* SIDE BY SIDE */
    align-items: flex-start;
    gap: 40px;
    justify-content: center;
    border-radius: 12px;
    /* optional but looks nicer */
    width: 100%;
}

.cover {
    width: 135px;
    height: auto;
}

.book-info {
    max-width: 400px;
    align-items: left;
    align-self: left;
}

.book-title {
    margin-bottom: 10px;
}

.book-caption {
    margin-bottom: 20px;
    line-height: 1.6;
}

#bookPopup .popup-content {
    text-align: center;
    padding: 30px;
}

#bookPopup input {
    width: 80%;
    padding: 10px;
    margin: 15px 0;
}

#bookPopup button {
    padding: 10px 20px;
    cursor: pointer;
}

.success-msg {
    margin-top: 15px;
    color: green;
    font-size: 14px;
}

.popup h2 {
    font-size: 1.3rem;
    font-weight: lighter;
}

#bookEmailForm input {
    font-family: inherit;
    font-size: 1rem;
}

#bookEmailForm button {
    font-family: inherit;
    font-size: 1rem;
}

#bookEmailForm .success-msg {
    font-size: 0.9rem;
}

#bookEmailForm p {
    color: #2F6B3F;
}

.buy-btn {
    display: inline-block;
    width: 200px;
    /* wider */
    padding: 14px 20px;
    background: linear-gradient(145deg, #000);
    color: #fff;

    border: none;
    border-radius: 40px;
    /* more rounded */

    font-size: 1rem;
    font-family: inherit;

    cursor: pointer;
    transition: all 0.3s ease;

    text-align: center;
}

.buy-btn:hover {
    background: #000;
    transform: scale(1.05);
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    cursor: pointer;
    color: #333;
    transition: 0.2s;
}

.popup-close:hover {
    color: #910c21;
    transform: scale(1.2);
}

.popup-content {
    position: relative;
    border-radius: 20px;
    /* smoother popup */
    padding: 30px;
}

/* WHITE X BUTTON */
.popup-close {
    position: absolute;

    font-size: 28px;
    color: #910c21;
    /* always visible */
    cursor: pointer;
    font-weight: bold;
    z-index: 100000;
    /* stay above everything */
    opacity: 1;
    /* ALWAYS visible */
    display: block;
    /* ensure it never disappears */
    transition: 0.2s ease;
}

.popup-close:hover {
    opacity: 0.7;
}

@media (max-width: 430px) {

    /* GENERAL */


    /* NAV */
    nav {
        padding: 10px 20px;
    }

    .nav-links {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    /* HERO */
    .hero-section {
        height: 40vh;
        justify-content: center;
    }

    .hero-logo {
        width: 160px;
        margin: 0;
    }

    /* SERVICES LAYOUT */
    .mobile-service {
        flex-direction: column;
        gap: 20px;
    }

    .mobile-left .mobile-img {
        width: 90%;
        height: auto;
    }

    /* FORM INSIDE PHONE */
    .mobile-screen-form {
        top: 8%;
        left: 5%;
        width: 90%;
    }

    .mobile-screen-form input,
    .mobile-screen-form textarea {
        width: 95%;
        font-size: 0.9rem;
    }

    .mobile-screen-form button {
        width: 60%;
        font-size: 1rem;
    }

    /* ASK SECTION */
    .slideA .slide-content {
        flex-direction: column;
        gap: 25px;
    }

    #girlAnimation {
        width: 250px;
        height: 250px;
    }

    .ask-form {
        width: 95%;
    }

    /* CONTACT */
    .contact-content {
        flex-direction: column;
        gap: 20px;
    }

    #contactAnimation {
        width: 250px;
        height: 250px;
    }

    .contact-form input,
    .contact-form textarea {
        width: 95%;
    }

    .contact-form button {
        width: 60%;
    }

    /* PROJECTS */
    .project-card {
        flex-direction: column;
        gap: 20px;
    }

    .slider-container {
        width: 100%;
        height: 220px;
    }

    /* BOOK */
    .books-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    /* FOOTER */
    .footer p {
        margin-left: 0;
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    /* NAV */
    nav {
        padding: 10px 40px;
    }

    .nav-links {
        gap: 20px;
    }

    /* HERO */
    .hero-section {
        height: 55vh;
        justify-content: center;
    }

    .hero-logo {
        width: 200px;
        margin: 0;
    }

    /* SERVICES */
    .mobile-service {
        flex-direction: column;
        gap: 30px;
    }

    .mobile-left .mobile-img {
        width: 60%;
    }

    .mobile-right {
        text-align: center;
        padding: 0 40px;
    }

    /* FORMS */
    .mobile-screen-form input,
    .mobile-screen-form textarea {
        width: 85%;
    }

    .mobile-screen-form button {
        width: 40%;
    }

    /* ASK */
    .slideA .slide-content {
        flex-direction: column;
        gap: 40px;
    }

    #girlAnimation {
        width: 300px;
        height: 300px;
    }

    .ask-form {
        width: 80%;
    }

    /* CONTACT */
    .contact-content {
        flex-direction: column;
        gap: 30px;
    }

    #contactAnimation {
        width: 300px;
        height: 300px;
    }

    .contact-form input,
    .contact-form textarea {
        width: 85%;
    }

    /* PROJECTS */
    .project-card {
        flex-direction: column;
        text-align: center;
    }

    .slider-container {
        width: 80%;
        height: 260px;
    }

    /* BOOK */
    .books-content {
        flex-direction: column;
        align-items: center;
    }
}

.books-content {
    max-width: 1000px;
    margin: auto;
}

.books-content .book .book-action button {
    background-color: #000;
}

.book {
    display: grid;
    align-items: center;
    gap: 20px;

    padding: 20px;
    border-radius: 16px;
    background: #fff;

    box-shadow: 0 8px 20px rgba(134, 3, 3, 0.266),
        0 2px 6px rgba(0, 0, 0, 0);

    transition: 0.3s;
}

.book:hover {
    transform: translateY(-5px);
}

/* Cover */
.book-cover img {
    width: 20%;
    border-radius: 10px;
    align-items: center;
}

/* Info */
.book-title {
    margin: 0 0 8px;
    font-size: 1.3rem;
}

.book-caption {
    margin: 0;
    color: #555;
}

/* Button */
.book-action {
    display: flex;
    justify-content: flex-end;
}

.buy-btn {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    background: #910c21;
    color: white;
    cursor: pointer;
}


.book-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.book-text {
    display: flex;
    flex-direction: column;
    width: 70%;
    gap: 10px;
}

.book-right {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.books-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centers everything horizontally */
    text-align: center;
    /* centers text */
}

/* keeps your title image centered */
.books-title {
    display: block;
    margin: 0 auto 30px auto;
}

/* center the content block */
.books-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

/* ===== CENTER BOOK SECTION بالكامل ===== */

.books-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* DO NOT affect the first image directly */
.books-intro>img {
    display: block;
    margin: 0 auto 30px auto;
}

/* Center the whole content block */
.books-content {
    display: flex;
    flex-direction: column;
    /* stack items vertically */
    align-items: center;
    /* center horizontally */
    justify-content: center;
    width: 100%;
    text-align: center;
}

.hamburger {
    display: none;
}

/* Center book card */
.book {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Center text inside */
.book-info,
.book-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Center button */
.book-action {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* MOBILE NAVIGATION */
@media screen and (max-width: 430px) {

    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: #ffffff;
    }

    .nav-links {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: auto;
        background: #910c21;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
        padding: 20px 0;
        transform: translateY(-150%);
        transition: transform 0.3s ease;
        z-index: 999;
    }

    .nav-links.active {
        transform: translateY(0);
    }

    .nav-links li {
        color: #fff;
    }

    .hamburger {
        display: block;
        font-size: 28px;
        cursor: pointer;
        z-index: 1000;
        color: #000;
    }

    #navLinks.active li a,
    #navLinks.active li,
    #navLinks.active a {
        color: white !important;
    }

    .marquee-wrapper {
        margin-top: 75px;
    }

    .hero-section img {
        width: 46%;
        max-width: 700px;
        /* increase this */
        height: auto;
        transform: scale(1.1);
        align-items: right;
        align-self: right;
        align-content: right;
    }

    .hero-section {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header .icons-instruction {
        align-items: center;
        font-size: 18px;
        color: grey;
    }

    .hero-section {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .mobile-screen-form input,
    .mobile-screen-form textarea {
        width: 75%;
        margin: 0 auto;
        display: block;
    }

    .mobile-service .mobile-frame img {
        width: 400px;
        height: 700px;
    }

    .mobile-service .mobile-frame .service-btn {
        font-size: 18px;
    }








    .slideA .animation {
        display: none;

    }


    .slideC .file-btn {
        font-size: 20px;
    }


    .mobile-service .mobile-right p {
        display: none;
    }



    .mobile-screen-form p {
        font-size: 20px;
        margin-bottom: 20px;

    }

    .mobile-screen-form p strong {
        margin-bottom: 20px;
        font-size: 22px;
        font-weight: 600;
    }

    .mobile-frame .mobile-screen-form .service-btn {
        font-size: 20px;
        width: 30%;
    }


    .slideA .slide-content p {
        font-size: 25px;
    }

    .slideA .slide-content .ask-form input,
    .slideA .slide-content .ask-form textarea {
        font-size: 18px;
    }

    .slideA .slide-content .ask-form .file-upload .file-btn {
        font-size: 20px;
    }

    .slideA .slide-content .ask-form .send-btn {
        font-size: 20px;
        background-color: #910c21;
    }

    .mobile-left .mobile-frame .mobile-img {
        height: 660px;
    }

    .fotter {
        align-items: center;
        align-self: center;
        align-content: center;


    }

    .fotter p {
        margin-right: 20%;
        font-size: 20px;
        margin-left: 30%;

    }

    .book .book-title {
        font-size: 20px;
    }

    .book .book-action .buy-btn {
        font-size: 18px;

    }

    .mobile-screen-form .form-intro strong {
        color: #910c21;
        font-weight: lighter;
        display: inline-block;
        padding-top: 15px;
    }

    .books-intro .books-title {
        width: 100px;
    }

    .ask-form input,
    .ask-form textarea,
    .ask-form button {

        width: 100%;
        margin: 0 auto;
        display: block;
        font-size: 20px;
    }

    .ask-form .service-description {
        padding-top: 20px;
    }

    .ask-form {
        width: fit-content !important;

    }

    .slideA .ask-form .service-description {
        font-size: 20px;
    }

    .slideA .ask-form .service-description strong {
        font-size: 22px;
    }

    .mobile-left .mobile-screen-form {
        padding-top: 30px;
    }

    .ask-form.teal-form {
        max-width: 700px;
        width: 100%;
        gap: 20px;
    }

    .contact-intro .contact-animation {
        display: none;
    }

    .contact-intro .contact-text p {
        font-size: 20px;
        margin-right: 100px;
    }

    .contact-intro .contact-form button {
        font-size: 20px;
        width: 20%;
        background-color: #910c21;
    }

    .contact-intro .contact-form textarea,
    .contact-intro .contact-form input {
        width: 400px;
        font-size: 18px;
    }

    .contact-intro .contact-title,
    .services-intro .services-title,
    .projects-intro .projects-title,
    .books-intro .books-title {
        width: 250px;
    }

    /* ================= PROJECTS MOBILE FIX ================= */

    .project-card {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .project-card {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        display: flex !important;
    }

    /* make sure slider is visible */
    .slider-container {
        position: relative;
        width: 100%;
        height: 260px;
        overflow: hidden;
    }

    .slider-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;

        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .slider-container img.active {
        opacity: 1;
        z-index: 2;
    }

    /* ================= TEXT SIZE ================= */

    .project-card h2,
    .project-card h3 {
        font-size: 20px;
    }

    .project-card p {
        font-size: 20px;
    }

    /* ================= ICON ALIGNMENT ================= */

    .tech-stack {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 15px;
    }

    /* ================= FIX PROJECT SLIDER (MOBILE) ================= */

    .slider-container {
        position: relative;
        width: 100%;
        height: 260px;
        /* IMPORTANT: gives it space */
        overflow: hidden;
    }

    /* override absolute stacking system */
    .slider-container img {
        position: relative;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: none;
    }

    /* ONLY active image shows */
    .slider-container img.active {
        display: block !important;
    }

    .slideA .slide-content {
        gap: 30px !important;
    }

    /* ===== REDUCE GAP: SERVICES → ASK SLIDE ===== */
    .mobile-screen-form {
        padding-top: 10px;
    }






    /* remove extra space inside slide */
    .slideA .slide-content {
        margin-top: 0 !important;
        gap: 25px !important;
        /* was 60px */
    }

    .services-icons {
        margin-bottom: 0px !important;
    }

    /* ===== ASK FORM SPACING FIX ===== */

    .ask-form.teal-form form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* consistent spacing between ALL elements */
    }

    /* Inputs + textarea */
    .ask-form input,
    .ask-form textarea {
        margin-bottom: 0 !important;
        /* remove old conflicting spacing */
    }



    .contact-intro {
        padding-top: 20px;
    }

    .project-desc {
        padding-right: 15px;
        padding-left: 15px;
    }

    .books-content .book {
        padding-right: 15px;
        padding-left: 15px;
        width: 90%;
    }

    .slideA {
        margin-top: 35px;
        align-items: flex-start;
    }

    .slideA .slide-content {
        align-items: flex-start;
    }

    .slideM,
    .slideC,
    .slideW {
        margin-top: -16px;
    }

    .services-intro>div {
        display: block;
    }

    .services-carousel {
        display: block !important;
        width: 100%;
        margin-top: 30px;
    }

}

@media (min-width: 768px) and (max-width: 1024px) {

    .mobile-right .service-description {
        padding-left: 50px;
        padding-right: 50px;
    }

    .mobile-left .mobile-frame .mobile-img {
        width: 450px;
        height: 700px;
    }

    .mobile-left .mobile-frame .mobile-screen-form p strong {
        padding-bottom: 20px;
    }

    .contact-content .contact-right .contact-text {
        padding-right: 100px;
    }

    .project-desc {
        padding-right: 60px;
        padding-left: 60px;
    }

    .tech-stack {
        align-items: center;
        align-self: center;
        align-content: center;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 15px;
    }

    .hero-section {
        justify-content: center !important;
        padding: 0 20px !important;
    }

    .logo-container {
        width: 100%;
        display: flex;
        justify-content: center !important;
    }

    .hero-logo {
        margin: 0 !important;
        width: 45%;
    }

    section,
    nav,
    footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #root,
    body>div {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none !important;
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    /* Kill any accidental horizontal shift */
    body {
        transform: none !important;
        position: relative !important;
        left: 0 !important;
    }

    .fotter {
        width: 100%;
        text-align: center;
    }

    .fotter p {
        margin: 0;
        font-size: 20px; 
    }
      .slider-container {
        position: relative;
        width: 100%;
        min-height: 100px;
        overflow: hidden;
    }

    .slider-container img {
        display: none;
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 100%;
    }

    .slider-container img.active {
        display: block;
    }


}