/* Custom Font Declaration */
@font-face {
    font-family: 'Refinest';
    src: url('../assets/Fonts/rowan-narrower4styled.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Smoothly';
    src: url('../assets/Fonts/Smoothly.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* CSS Reset and Base Styles */
:root {
    --primary-brown: #8B4B3B;
    --primary-peach: #F4B5A0;
    --primary-green: #7B9F7C;
    --light-peach: rgba(244, 181, 160, 0.2);
    --glass-white: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.2);
    --text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

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

body {
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Global background - only applies when NOT in mobile/tablet target modes (will be overridden by background-layer system) */
/* @media not screen and (max-width: 767px) and (orientation: portrait), 
       not screen and (orientation: landscape) and (max-height: 500px) and (max-width: 940px),
       not screen and (orientation: landscape) and (max-height: 430px) and (max-width: 820px),
       not screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait),
       not screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (min-height: 501px) {
    body {
        background-image: url('../assets/web_bloom_background_home.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }
} */

@media screen and (min-width: 1024px) {
  body {
    background-image: url('../assets/web_bloom_background_home.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
  
    /* Desktop: Make headers scroll with content instead of fixed */
    .privacy-page .page-header,
    .terms-page .page-header {
        position: relative !important;
        top: auto !important;
        margin-top: 110px; /* Push header down from the top */
    }
    
    /* Desktop: Adjust main content padding since header is no longer fixed */
    .privacy-page .main-content,
    .terms-page .main-content {
        padding-top: 40px; /* Reduced since header is now in flow */
    }
    
    /* Desktop: Make main containers wider for better desktop layout */
    .privacy-page .about-intro,
    .terms-page .about-intro {
        max-width: 1000px !important; /* Wider than the global 800px max-width */
        padding: 0 60px !important; /* More horizontal padding for desktop */
    }
}

/* @media screen and (min-width: 1025px) {
  body {
    background-image: url('../assets/web_bloom_background_home.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }
} */

/* Progress Page Background */
.progress-page,
body:has(.progress-container) {
    background-image: url('../assets/web_bloom_progress_background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Navigation Styles */
.navbar {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* Hamburger Menu */
.hamburger-menu {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(0px);
    gap: 4px;
}

.hamburger-menu:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background-color: #e7e7e773;
    border-radius: 1px;
    transition: all 0.3s ease;
}

/* Hamburger Animation */
.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Navigation Menu */
.nav-menu {
    position: fixed;
    top: 70px;
    right: -300px;
    width: 280px;
    background:  rgba(65, 65, 65, 0.247);
    backdrop-filter: blur(0px);
    transition: right 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.027);
    border-radius: 15px;
    box-shadow: -5px 0 20px rgba(139, 75, 59, 0.2);
}

.nav-menu.active {
    right: 0;
}

.nav-menu-content {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav-btn {
    background: rgba(22, 94, 40, 0.3);
    border: 0px solid rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 10px 25px;
    color: #444444;
    text-decoration: none;
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 18px;
    color: #c4c4c4;
    font-weight: 300;
    font-size: 16px;
    transition: all 0.3s ease;
    text-align: center;
    backdrop-filter: blur(10px);
}

.nav-btn:hover {
    background: rgba(112, 3, 201, 0.151);
    border-color: rgba(0, 0, 0, 0.5);
    transform: translateX(-5px);    box-shadow: 5px 5px 15px rgba(139, 75, 59, 0.2);
}

/* Main Content Layout */
.main-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    padding: 20px;
}

/* Hero Section */
.hero-section {
    text-align: center;
    z-index: 10;
    position: relative;
}

/* Logo Styles */
.logo-container {
    margin-bottom: 20px;
}

.logo {
    font-family: 'Smoothly', 'Dancing Script', cursive;
    font-size: 130px;
    font-weight: normal;
    color: #F4B5A0;
    text-shadow: 0 0 30px rgba(139, 75, 59, 0.6);
    padding: 60px 140px;
    display: inline-block;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
}

.logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px;
    right: -20px;
    bottom: 0;
    background-image: url('../assets/ELEMENT_27.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    z-index: -1;
}

/* Tagline Section */
.tagline-section {
    margin-bottom: 50px;
    margin-top: -70px;
}

.decorative-line {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.decorative-line-top {
    margin-bottom: 15px;
}

.decorative-line-bottom {
    margin-top: 15px;
}

.decorative-line img {
    width: 300px;
    height: auto;
    opacity: 0.7;
    filter: sepia(20%) saturate(1.2) hue-rotate(10deg);
}

.tagline {
    font-family: 'Dancing Script', cursive;
    font-size: 32px;
    font-weight: 500;
    color: #0000005e;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

.subtitle {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 400;
    color: #c4c4c4;
    opacity: 0.8;
    font-style: italic;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.1);
}

/* CTA Section */
.cta-section {
    margin-top: 60px;
}

.app-store-btn {
    display: inline-block;
    transition: transform 0.3s ease;
}

.app-store-btn:hover {
    transform: scale(1.05) translateY(-5px);
}

.app-store-btn img {
    height: 80px;
    filter: drop-shadow(0 8px 20px rgba(139, 75, 59, 0.3));
}

/* Botanical Elements */
.botanical-element {
    position: absolute;
    z-index: 5;
    opacity: 0.7;
}

.botanical-left {
    top: 10%;
    left: 5%;
    transform: rotate(-15deg);
}

.botanical-right {
    top: 15%;
    right: 8%;
    transform: rotate(20deg);
}

.botanical-bottom-left {
    bottom: 10%;
    left: 10%;
    transform: rotate(-10deg);
}

.botanical-element img {
    max-width: 200px;
    height: auto;
    filter: sepia(20%) saturate(1.2) hue-rotate(10deg);
}

/* Page-specific Styles */
.page-header {
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
}

.page-title {
    font-family: 'Dancing Script', cursive;
    font-size: 80px;
    font-weight: 700;
    color: #777777;
    text-shadow: 0 0 30px rgba(139, 75, 59, 0.6);
    text-align: center;
    margin-bottom: 20px;
}

.page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(139, 75, 59, 0.1);
}

.placeholder-text {
    font-size: 24px;
    color: #8B4B3B;
    text-align: center;
    font-style: italic;
}

/* Active navigation state */
.nav-btn.active {
    background: rgba(218, 165, 32, 0.35) !important; /* Slightly more transparent for consistency */
    border-color: rgba(218, 165, 32, 0.6) !important; /* More reliable border opacity */
    color: rgba(245, 245, 245, 0.85) !important; /* Convert hex+alpha to full RGBA for real device compatibility */
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 300;
}

/* Progress Page Styles */
.page-subtitle {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 20px;
    color: #eeeeeed3;
    text-align: center;
    margin-top: 10px;
    opacity: 0.8;
    font-style: italic;
}

.progress-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Upload Section */
.upload-section {
    margin-bottom: 40px;
}

.upload-area {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(0px);
    border: 2px dashed rgba(139, 75, 59, 0.3);
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    transition: all 0.3s ease;    cursor: pointer;
    max-width: 400px;
    margin: 0 auto;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-area:hover {
    border-color: rgba(139, 75, 59, 0.5);
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.upload-area.drag-over {
    border-color: rgba(139, 75, 59, 0.7);
    background: rgba(139, 75, 59, 0.1);
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(139, 75, 59, 0.2);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.upload-title {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 36px;
    color: #3b3b3b9c;
    margin-bottom: 15px;
    font-weight: 600;
}

.upload-description {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 18px;
    color: #1f1f1f;
    margin-bottom: 30px;
    line-height: 1.6;
}

.upload-btn, .process-btn {
    background: linear-gradient(135deg, rgba(61, 81, 136, 0.8), rgba(139, 75, 59, 0.6));
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.upload-btn:hover, .process-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 75, 59, 0.3);
}

.file-info {
    margin-top: 20px;
    padding: 20px;
    background: rgba(244, 181, 160, 0.2);
    border-radius: 15px;
    border: 1px solid rgba(244, 181, 160, 0.3);
}

.file-name {
    display: block;
    font-weight: 500;
    color: #8B4B3B;
    margin-bottom: 15px;
}

.process-btn {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.8), rgba(76, 175, 80, 0.6));
}

/* Visualization Section */
.visualization-section {
    animation: fadeInUp 0.6s ease-out;
}

.visualization-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 60px; /* Ensure consistent header height */
    width: 850px; /* Fixed width to prevent expansion when removing buttons */
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.viz-title {
    font-family: 'Refinest', cursive;
    font-size: 42px;
    color: #8B4B3B; 
    font-weight: 700;
}

.reset-btn {
    background: rgba(244, 181, 160, 0.3);
    color: #8B4B3B;
    border: 2px solid rgba(244, 181, 160, 0.5);
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reset-btn:hover {
    background: rgba(244, 181, 160, 0.5);
    transform: translateY(-2px);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(139, 75, 59, 0.1);
}

.stat-number {
    font-size: 48px;
    font-weight: 700;
    color: #8B4B3B;
    margin-bottom: 10px;
    font-family: 'Dancing Script', cursive;
}

.stat-label {
    font-size: 14px;
    color: #8B4B3B;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Charts Container */
.charts-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.chart-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.chart-title {
    font-family: 'Dancing Script', cursive;
    font-size: 28px;
    color: #8B4B3B;
    margin-bottom: 20px;
    text-align: center;
}

.chart-card canvas {
    max-height: 300px;
}

/* Insights Section */
.insights-section {
    margin-top: 40px;
}

.insights-title {
    font-family: 'Dancing Script', cursive;
    font-size: 36px;
    color: #8B4B3B;
    text-align: center;
    margin-bottom: 30px;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.insight-card {
    background: rgba(244, 181, 160, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(244, 181, 160, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.insight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(139, 75, 59, 0.1);
}

.insight-icon {
    font-size: 32px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.insight-text {
    flex: 1;
}

.insight-text h4 {
    color: #8B4B3B;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    font-family: 'Dancing Script', cursive;
}

.insight-text p {
    color: #8B4B3B;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.9;
}

/* About Page Styles */
.about-page {
    background-image: url('../assets/about_page/web_bloom_about_background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.about-page .main-content {
    padding-top: 140px; /* Account for fixed header */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.about-page .page-header {
    text-align: center;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    pointer-events: none;
}

.about-page .page-header * {
    pointer-events: auto;
}

.page-title {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 60px;
    font-weight: normal;
    color: var(--primary-brown);
    margin-bottom: 1px;
    text-shadow: 0px 0px 1px rgba(71, 71, 71, 0.8);
}

.line-decoration {
    display: flex;
    justify-content: center;
    margin: 1px 0 15px 0;
}

.line-decoration img {
    height: 11px;
    width: auto;
    opacity: 0.6;
    transform: scaleX(1.2); /* Make the brush stroke longer */
}

/* About Intro Section */
.about-intro {
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

.intro-text {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 30px 40px;
    text-align: center;
    backdrop-filter: blur(0px);
}

.intro-text p {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    margin: 0 0 20px 0;
}

.intro-text p:last-child {
    margin-bottom: 0;
}

/* About page hero section adjustments */
.about-page .hero-section {
    width: 100%;
}

.carousel-container {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    max-width: 1000px;
    padding: 30px 20px; /* Increased vertical padding to give space for effects */
    position: relative;
    overflow: hidden; /* Keep for carousel functionality */
    transition: transform 0.1s ease;
}

.carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: grab;
    user-select: none;
}

.carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    align-items: center;
}

.carousel-card {
    background: rgba(150, 87, 87, 0.5);
    border-radius: 20px;
    padding: 40px 30px 20px;
    width: 280px;
    text-align: center;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.1);
    opacity: 0.8;
    transform: scale(0.9);
    cursor: pointer;
    backdrop-filter: blur(5px);
    mix-blend-mode: darken;
}

.carousel-card.active {
    width: 380px;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 15px 40px rgba(139, 75, 59, 0.2);
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    mix-blend-mode: overlay;
}

.carousel-card:not(.active) {
    opacity: 0.4;
    transform: scale(0.85);
}

.carousel-card:hover {
    opacity: 0.8;
}

.card-flower {
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 210px;
    height: auto;
    opacity: 0.6;
    z-index: 10;
}

/* Individual flower customizations */
.card-flower.flower-1 {
    width: 40px;
    bottom: 0px;
    opacity: 0.7;
    mix-blend-mode: darken;
}

.card-flower.flower-2 {
    width: 40px;
    bottom: 0px;
    opacity: 0.7;
}

.card-flower.flower-3 {
    width: 45px;
    bottom: -1px;
    opacity: 0.7;
}

.card-title {
    font-family: 'Dancing Script', cursive;
    font-size: 28px;
    color: var(--primary-brown);
    margin-bottom: 18px;
    font-weight: 600;
}

.card-content {
    font-family: 'Refinest', 'Inter', sans-serif;
    color: var(--primary-brown);
    font-size: 20px;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 55px;
}

/* Privacy Policy Page Styles */
.privacy-page {
    background-image: url('../assets/web_bloom_background_rest.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.privacy-page .main-content {
    padding-top: 140px; /* Account for fixed header */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.privacy-page .page-header {
    text-align: center;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 20px;
    background: transparent !important; /* Remove glass background */
    backdrop-filter: none !important;    /* Remove blur */
    border-bottom: none !important;      /* Remove subtle border */
}

.privacy-page .page-header * {
    filter: none !important; /* Remove drop-shadow glow */
}

.privacy-page .about-intro {
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 0 40px;
    transform: translateY(-20px); /* Add subtle upward positioning */
}

.privacy-page .intro-text h2 {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 32px;
    font-weight: normal;
    color: #FFFFFF !important; /* White titles */
    margin: 40px 0 20px 0;
    text-shadow: none !important; /* No shadow */
}

.privacy-page .intro-text h3 {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #FFFFFF !important; /* White subtitles */
    margin: 30px 0 15px 0;
    text-shadow: none !important; /* No shadow */
}

/* Terms & Conditions Page Styles */
.terms-page {
    background-image: url('../assets/web_bloom_background_rest.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.terms-page .main-content {
    padding-top: 140px; /* Account for fixed header */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.terms-page .page-header {
    text-align: center;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 20px;
    background: transparent !important; /* Remove glass background */
    backdrop-filter: none !important;    /* Remove blur */
    border-bottom: none !important;      /* Remove subtle border */
}

.terms-page .page-header * {
    filter: none !important; /* Remove drop-shadow glow */
}

.terms-page .about-intro {
    max-width: 800px;
    margin: 0 auto 60px auto;
    padding: 0 40px;
    transform: translateY(-20px); /* Add subtle upward positioning */
}

.terms-page .intro-text h2 {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 32px;
    font-weight: normal;
    color: #FFFFFF !important; /* White titles */
    margin: 40px 0 20px 0;
    text-shadow: none !important; /* No shadow */
}

.terms-page .intro-text h3 {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #FFFFFF !important; /* White subtitles */
    margin: 30px 0 15px 0;
    text-shadow: none !important; /* No shadow */
}

/* Contact Page Styles */
.contact-section {
    max-width: 800px;
    margin: 0 auto;
    display: block;
    width: 100%;
}

.contact-intro {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    opacity: 0.5;
    margin-bottom: 50px;
}

.contact-intro p {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: normal;
    line-height: 1.6;
    color: #e0e0e0;
    opacity: 1;
    margin-top: 15px;
}

.contact-methods {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 40px auto 60px auto;
    max-width: 1000px;
    flex-wrap: wrap;
}

.contact-card {
    background: var(--light-peach);
    padding: 25px 20px;
    border-radius: 15px;
    text-align: center;
    border: 1px solid rgba(244, 181, 160, 0.4);
    transition: all 0.3s ease;
    flex: 1;
    min-width: 250px;
    max-width: 300px;
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(139, 75, 59, 0.1);
}

.contact-icon {
    font-size: 32px;
    margin-bottom: 15px;
}

.contact-card h3 {
    font-family: 'Dancing Script', cursive;
    font-size: 24px;
    color: var(--primary-brown);
    margin-bottom: 10px;
    font-weight: 600;
}

.contact-card p {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-weight: normal;
    font-size: 18px;
    font-weight: 400;
    color: var(--primary-brown);
    opacity: 0.8;
    margin-bottom: 15px;
}

.contact-link {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-brown);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.contact-link:hover {
    border-bottom-color: var(--primary-brown);
}

.contact-form-section {
    background: rgba(244, 181, 160, 0.3);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(244, 181, 160, 0.8);
    margin: 0 auto 40px auto;
    max-width: 700px;
    display: block;
}

.contact-form {
    max-width: 450px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 22px;
    display: block;
    font-weight: 500;
    color: var(--primary-brown);
    margin-bottom: 8px;
    font-size: 16px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(139, 75, 59, 0.2);
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Refinest', 'Inter', sans-serif;;
    background: rgba(255, 255, 255, 0.5);
    color: var(--primary-brown);
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-brown);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-weight: normal;
    background: linear-gradient(135deg, var(--primary-brown), rgba(139, 118, 59, 0.733));
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 75, 59, 0.3);
}

.contact-footer {
    text-align: center;
    padding: 30px;
    background: var(--light-peach);
    border-radius: 10px;
    border: 1px solid rgba(244, 181, 160, 0.1);
}

.contact-footer p {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #e0e0e0;
    margin: 0;
    font-style: italic;
}

/* Form Message Styles */
.form-message {
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center;
}

.form-message.success {
    background: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.form-message.error {
    background: rgba(244, 67, 54, 0.1);
    color: #F44336;
    border: 1px solid rgba(244, 67, 54, 0.3);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);    }
}

/* Infographic Styles */
.header-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    min-height: 44px; /* Ensure consistent button area height */
}

.download-btn {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.8), rgba(76, 175, 80, 0.6));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.infographic-container {
    position: relative;
    width: 850px; /* Fixed width to match header and prevent size changes */
    max-width: 850px;
    height: 750px; /* Fixed height to prevent size changes when buttons are removed */
    margin: 40px auto;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(139, 75, 59, 0.2);
    aspect-ratio: 850 / 750; /* Maintain proportions when scaling */
}

.infographic-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../assets/infographics_bloom_background_isolated.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Main Infographic Title */
.infographic-main-title {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-family: 'Refinest', 'Dancing Script', cursive;
    font-size: 32px;
    font-weight: normal;
    color: #4A6741;
    text-align: center;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9);
    margin: 0;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* Bottom Bloom Text */
.infographic-bottom-text {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-family: 'Refinest', 'Dancing Script', cursive;
    font-size: 24px;
    font-weight: normal;
    color: #4A6741;
    text-align: center;
    margin: 0;
    letter-spacing: 2px;
    padding: 8px 16px;
    border: 1px solid rgba(74, 103, 65, 0.3);
    border-radius: 2px;
    background: transparent;
}

/* Pencil Lines connecting center to containers */
.pencil-line {
    position: absolute;
    background-image: url('../assets/ELEMENT-25.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    z-index: 5;
    opacity: 1.0;
    /* border: 1px solid red; /* Temporary debug border - removing for cleaner look */
}

/* Line to Most Completed Habits (top-left) */
.line-to-habits {
    top: 44%;
    left: 22%;
    width: 130px;
    height: 16px;
    transform: rotate(35deg);
    transform-origin: right center;
}

/* Line to Days on the Bloom (bottom-left) */
.line-to-days {
    top: 62%;
    left: 27%;
    width: 90px;
    height: 16px;
    transform: rotate(15deg);
    transform-origin: right center;
}

/* Line to Streak Days (top-right) */
.line-to-streak {
    top: 24%;
    right: 27%;
    width: 125px;
    height: 16px;
    transform: rotate(-21deg);
    transform-origin: left center;
}

/* Line to Most Loved Habit (middle-right) */
.line-to-loved {
    top: 53%;
    right: 31%;
    width: 100px;
    height: 16px;
    transform: rotate(-16deg);
    transform-origin: left center;
}

/* Line to Habit Category Overview (bottom-right) */
.line-to-category {
    top: 73%;
    right: 40%;
    width: 80px;
    height: 16px;    transform: rotate(20deg);
    transform-origin: left center;
}

/* Field Notes Annotation Container */
.field-notes-container {
    position: absolute;
    bottom: 4%;
    left: 3%;
    width: 160px; /* compact default width */
    z-index: 6;
    background: rgba(236, 236, 236, 0.85);
    border: 1px solid #8B7355;
    border-radius: 3px;
    padding: 12px 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease; /* smooth transition */
    cursor: pointer; /* indicate interactivity */
    overflow: hidden; /* prevent content overflow during transition */
}

/* Expanded state on hover */
.field-notes-container:hover {
    width: 430px; /* expanded width */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* enhanced shadow on hover */
}

.field-notes-title {
    font-family: 'Refinest', 'Dancing Script', cursive;
    font-size: 14px;
    font-weight: normal;
    color: #5D4E37;
    margin: 0 0 8px 0;
    text-align: center;
    border-bottom: 1px solid #D4C4A8;
    padding-bottom: 4px;
}

.field-notes-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-note-item {
    font-family: 'Refinest', sans-serif;
    font-size: 10px;
    color: #5D4E37;
    line-height: 1.3;
    font-weight: 400;
}

.field-note-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.field-note-description {
    font-size: 10px;
    color: #6B5A42;
    line-height: 1.4;
    font-style: italic;
    padding-left: 4px;
    border-left: 1px solid #D4C4A8;
    margin-left: 2px;
    max-height: 0; /* hidden by default */
    opacity: 0; /* invisible by default */
    overflow: hidden;
    transition: all 0.4s ease; /* smooth transition for descriptions */
}

/* Show descriptions on hover */
.field-notes-container:hover .field-note-description {
    max-height: 100px; /* allow content to show */
    opacity: 1; /* make visible */
    margin-top: 2px; /* add spacing when visible */
}

/* Section Numbers for Scientific Journal Style */
.section-number {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 8px;
    font-weight: 700;
    color: #444444;
    background: rgba(219, 219, 219, 0.8);
    border: 1px solid #8b8b8b;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    line-height: 10px;
    text-align: center;
    margin-left: 5px; /* moved to left margin to position on right */
    vertical-align: middle;
}

/* Most Completed Habits Section */
.most-completed-habits {
    position: absolute;
    top: 10%;
    left: 1%;
    width: 33%;
    height: 23%;
    z-index: 2;
    border-radius: 15px;
    overflow: hidden;
    /* Enhanced visual effects */
    box-shadow: 
        0 4px 15px rgba(139, 75, 59, 0.15),           /* Soft outer shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.2),      /* Subtle top highlight */
        inset 0 -1px 3px rgba(139, 75, 59, 0.1);     /* Gentle inner shadow */
    backdrop-filter: blur(1px);                       /* Subtle blur for depth */
}

.most-habits-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    background-image: url('../assets/most_active_habits/most_active_habits_background_1.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    /* Enhanced blending for more natural look */
    mix-blend-mode: multiply;
    opacity: 0.95;
}

.most-completed-title {
    position: relative;
    z-index: 3;
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #4A6741;
    text-align: center;
    margin: 0;
    padding: 15px 0 10px 0;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.habits-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 5px 10px 10px 8px;
}

.habit-plant {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 29%;
    transition: all 0.3s ease;
    visibility: visible;
}

.habit-plant:hover {
    transform: translateY(-5px) scale(1.05) !important;
}

.plant-image {
    width: 100%;
    height: auto;
    max-height: 70px;
    object-fit: contain;
    margin-bottom: 5px;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

.habit-name {
    font-size: 10px;
    color: #2C3E2D;
    text-align: center;
    font-weight: 600;
    line-height: 1.1;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    padding: 2px 4px;
    height: 24px; /* Fixed height for consistent alignment */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    overflow: hidden; /* Prevent text overflow */
}

.habit-count {
    font-size: 8px;
    color: #2C3E2D;
    font-weight: 700;
    text-align: center;
    display: none;
    margin-top: 2px;
}

/* Days on the Bloom Section */
.days-bloom {
    position: absolute;
    bottom: 30%;
    left: 3%;
    width: 22%; /* smaller width */
    height: 23%;
    z-index: 2;
    border-radius: 15px;
    overflow: hidden;
    /* Enhanced visual effects */
    box-shadow: 
        0 6px 11px rgba(139, 75, 59, 0.15),           /* Soft outer shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.2),      /* Subtle top highlight */
        inset 0 -1px 3px rgba(139, 75, 59, 0.1);     /* Gentle inner shadow */
    backdrop-filter: blur(1px);                       /* Subtle blur for depth */
}

.days-bloom-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    background-image: url('../assets/days_in_the_bloom/days_in_bloom_background_1.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    /* Enhanced blending for more natural look */
    mix-blend-mode: multiply;
    opacity: 0.95;
}

.days-bloom-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.days-section-title {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #242424;
    margin-bottom: 16px; /* more space below title */
    text-align: center;
}

.days-counters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 75%;
    gap: 0; /* remove extra gap between counters */
}

.days-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 35%;
    margin-bottom: 0; /* remove extra space below label */
}

.counter-circle {
    position: relative;
    width: 86px;  /* larger circle */
    height: 86px; /* larger circle */
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.counter-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.days-number {
    font-family: 'Dancing Script', cursive;
    font-size: 28px; /* slightly smaller to fit new circle size */
    font-weight: 700;
    color: #242424;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.counter-label {
    margin-bottom: 0px; /* less space below label */
    font-size: 14px;
    font-weight: 600;
    color: rgb(0, 0, 0);
    text-align: center;
    background: none;
    padding: 0;
    border-radius: 0;
}

.days-divider {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.divider-plant {
    width: 100%;
    height: auto;
    max-height: 80px; /* make plant bigger */
    object-fit: contain;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
}

/* Streak Days Section */
.streak-days {
    position: absolute;
    top: 5%;
    right: 6%;
    width: 20%;
    height: 21%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    overflow: hidden;
    /* Enhanced visual effects */
    box-shadow: 
        0 4px 15px rgba(139, 75, 59, 0.15),           /* Soft outer shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.2),      /* Subtle top highlight */
        inset 0 -1px 3px rgba(139, 75, 59, 0.1);     /* Gentle inner shadow */
    backdrop-filter: blur(1px);                       /* Subtle blur for depth */
    border-radius: 15px;
}

/* Transparent background image for Streak Days */
.streak-background-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;    background-image: url('../assets/streak_days/streak_days_background_1.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6; /* Adjust this value: 0.5 = 50% transparent, 1.0 = fully opaque */
    border-radius: 15px;
    z-index: 1;
    /* Enhanced blending for more natural look */
    mix-blend-mode: multiply;
}

.streak-days-title {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: normal;
    color: #4A6741;
    text-align: center;
    margin-bottom: -4px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
    position: relative;
    z-index: 3;
}

.streak-wreath-container {
    position: relative;
    width: 85%;
    height: 70%;
    max-width: 200px;
    max-height: 200px;
    min-width: 120px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/streak_days/streak_days_wreath.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    z-index: 3;
}

.streak-number {
    font-family: 'Dancing Script', cursive;
    font-size: 36px;
    font-weight: 700;
    color: #242424;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.3);
    z-index: 3;
    line-height: 1;
    margin-bottom: -5px;
}

.streak-label {
    font-family: 'Dancing Script', cursive;
    font-size: 18px;
    color: #242424;
    font-weight: 500;
    font-style: italic;
    z-index: 3;
    line-height: 1;
}

/* Most Loved Habit Section */
.most-loved-habit {
    position: absolute;
    top: 36%; /* just below streak days */
    right: 3%;
    width: 27%;
    height: 21%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 18px 12px 18px;
    overflow: visible;
    border-radius: 15px;
    /* Enhanced visual effects */
    box-shadow: 
        0 4px 4px rgba(139, 75, 59, 0.15),           /* Soft outer shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.2),      /* Subtle top highlight */
        inset 0 -1px 3px rgba(139, 75, 59, 0.1);     /* Gentle inner shadow */
    backdrop-filter: blur(1px);                       /* Subtle blur for depth */
}

/* Transparent background image */
.most-loved-habit-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/most_loved_habit/most_loved_habits_background_1.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9; /* Adjust this value: 0.5 = 50% transparent, 1.0 = fully opaque */
    z-index: 1;
    border-radius: 15px;
    /* Enhanced blending for more natural look */
    mix-blend-mode: multiply;
}

.most-loved-habit::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 6px;
    width: 30px;
    height: 30px;
    background-image: url('../assets/most_loved_habit/most_loved_habit_heart.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 4;
}

.most-loved-habit::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 4px;
    width: 80px;
    height: 140px;
    background-image: url('../assets/most_loved_habit/most_loved_habit_plant.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 4;
}

.most-loved-title {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: normal;
    color: #4A6741;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 2px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    z-index: 5;
    position: relative;
}

.loved-habit-frame {
    position: relative;
    width: 110%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../assets/most_loved_habit/most_loved_habit_frame.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 10px;
    margin-left: -50px;
    z-index: 5;
}

.loved-habit-name {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #4A6741;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    z-index: 5;
    position: relative;
    max-width: 95%;
    line-height: 1.2;
    padding: 0 12px;
}

/* Habit Category Overview Section */
.habit-category-overview {
    position: absolute;
    bottom: 8%;
    right: 1%;
    width: 38%;
    height: 25%;
    z-index: 3;    background-image: url('../assets/habit_category_overview/habit_category_background_3.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 20px 15px 20px;
    border-radius: 15px;
    box-shadow: 
        0 4px 4px rgba(139, 75, 59, 0.15),           /* Soft outer shadow */
        inset 0 1px 0 rgba(255, 255, 255, 0.2),      /* Subtle top highlight */
        inset 0 -1px 3px rgba(139, 75, 59, 0.1);     /* Gentle inner shadow */
    backdrop-filter: blur(1px);                       /* Subtle blur for depth */
    overflow: hidden;
    position: absolute;
}

.category-chart-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    padding: 0;
}

.category-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 120px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.category-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 14%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.bar-visual {
    width: 28px;
    background-image: url('../assets/habit_category_overview/habit_category_bar.png');
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
    margin-bottom: 4px;
    border-radius: 2px 2px 0 0;
}

/* Dynamic bar heights - will be set by JavaScript */
.bar-visual.growth,
.bar-visual.self-care,
.bar-visual.health,
.bar-visual.social,
.bar-visual.productivity,
.bar-visual.purposeful {
    height: 50px; /* Default height when no data */
}

/* Use smaller brush stroke image for bars under 40px height */
.bar-visual.small {
    background-image: url('../assets/habit_category_overview/habit_category_bar_small.png') !important;
    background-size: 100% 100% !important;
    background-position: bottom !important;
}

.bar-visual {
    margin: 0;
    padding: 0;
    display: block;
}

.category-label {
    font-family: 'Refinest', sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #353535da;
    text-align: center;
    width: 100%;
    line-height: 1.1;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    margin-top: 2px;
    background: none;
}

.category-label.productivity-label {
    margin-right: 8px;
}

/* Responsive Design for Habit Category Overview */
@media (max-width: 1200px) {
    .habit-category-overview {
        bottom: 6%;
        right: 3%;
        width: 36%;
        height: 30%;
        padding: 18px 15px 12px 15px;
    }
    
    .habit-category-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .category-bars {
        height: 100px;
        margin-bottom: 8px;
    }
    
    .category-label {
        font-size: 10px;
    }
}

/* Enhanced visual effects for habit category overview */
.habit-category-overview {
    /* Keep the enhanced effects we added */
    border: none !important;
    background-color: transparent !important;
    /* Apply mix-blend-mode to the background image for better integration */
    background-blend-mode: multiply;
}

.habit-category-title {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 20px;
    font-weight: normal;
    color: #4A6741;
    text-align: center;
    margin-bottom: 15px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    z-index: 4;
    position: relative;
}

/* Disable backdrop filters during export to prevent blurring */
.exporting .most-completed-habits,
.exporting .days-bloom,
.exporting .streak-days,
.exporting .most-loved-habit,
.exporting .habit-category-overview,
.exporting .field-notes-container {
    backdrop-filter: none !important;
    /* Also disable complex box-shadows that can cause html2canvas issues */
    box-shadow: none !important;
}

/* Fix for pink squares during export - disable problematic blend modes */
.exporting .streak-background-layer,
.exporting .most-loved-habit-background,
.exporting .most-habits-background,
.exporting .days-bloom-background {
    mix-blend-mode: normal !important;
}

.exporting .habit-category-overview {
    background-blend-mode: normal !important;
}

/* Fix Field Notes container background during export */
.exporting .field-notes-container {
    background: rgba(236, 236, 236, 1.0) !important; /* Make background fully opaque during export */
    transition: none !important; /* Disable transitions during capture */
}

/* App Page Styles */
.app-page {
    background-image: url('../assets/app/web_bloom_app_background.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.app-page .page-title {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 80px;
    font-weight: normal;
    color: #8B4B3B;
    text-shadow: 0 0 30px rgba(139, 75, 59, 0.6);
    margin-bottom: 10px;
}

.app-page .page-subtitle {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: #dbdbdbe0;
    opacity: 0.8;
    font-style: italic;
    margin-bottom: 60px;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.3);
}

/* App Carousel Section */
.app-carousel-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
}

.carousel-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
}

.carousel-arrow {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(219, 219, 219, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(0px);
    color: #797979;
    opacity: 0.7;
}

.carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(29, 29, 29, 0.5);
    opacity: 1;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(139, 75, 59, 0.2);
}

.carousel-arrow:active {
    transform: scale(0.95);
}

.app-carousel-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    perspective: 1000px;
    display: flex;
    justify-content: center;
}

.app-carousel-track {
    display: flex;
    gap: 30px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    align-items: center;
    justify-content: flex-start;
}

/* App Card Styles with 3D Flip */
.app-card {
    width: 280px;
    height: 500px;
    perspective: 1000px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.4s ease;
}

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

.app-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(139, 75, 59, 0.2);
}

.app-card:hover .app-card-inner,
.app-card.flipped .app-card-inner,
.app-card.touch-flipped .app-card-inner {
    transform: rotateY(180deg);
}

.app-card-front,
.app-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 25px;
    overflow: hidden;
}

.app-card-front {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(0px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.app-card-back {
    background: linear-gradient(135deg, rgba(244, 181, 160, 0.1), rgba(139, 75, 59, 0.3));
    border: 1px solid rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(0px);
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 25px;
    top: 12px;
    bottom: 3px;
    left: 0;
    right: 0;
    height: calc(100% - 25px);
}

.app-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 15px;
    filter: drop-shadow(0 10px 20px rgba(139, 75, 59, 0.3));
}

.card-text-content {
    text-align: center;
    color: white;
}

.card-text-content h3 {
    font-family: 'Dancing Script', cursive;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    color: #2D1810;
}

.card-text-content p {
    font-family: 'Refinest', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 15px;
    color: #2D1810;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.card-text-content .card-subtitle {
    font-size: 16px;
    font-style: italic;
    opacity: 0.9;
    margin-bottom: 0;
    color: #3D2418;
}

/* Carousel Indicators */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.indicator.active {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.2);
}

.indicator:hover {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

/* Mobile Responsive Styles */

/* Mobile Background Images */
@media (max-width: 767px) and (orientation: portrait) {
    /* UNIFIED mobile background system - ALL pages get the same treatment */
    /* Using !important to override more specific desktop selectors */
    /* body,
    .progress-page,
    .about-page,
    .app-page,
    .contact-page,
    body:has(.progress-container),
    body:has(.app-container),
    body:has(.contact-section) {
        background-image: url('../assets/web_bloom_background_mobile_portrait_2.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important; */
        /* Remove any height constraints by default */
        /* height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        overflow-y: auto !important;
    } */
    
    /* ONLY the home page gets special treatment (different background + static background solution) */
    /* body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(:has(.progress-container)):not(:has(.app-container)):not(:has(.contact-section)) { */
        /* Remove background from body, use pseudo-element instead */
        /* background-image: none !important;
        min-height: 100vh !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: auto !important;
        position: relative;
    } */
    
    /* Create static background for home page using pseudo-element */
    /* body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(:has(.progress-container)):not(:has(.app-container)):not(:has(.contact-section))::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: url('../assets/web_bloom_background_mobile_portrait_1.jpg');
        background-size: 100vw 100vh;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: scroll;
        z-index: -1;
    } */
    
    /* CONTACT PAGE SPECIFIC - Mobile-compatible static background */
    /* .contact-page { */
        /* Create a pseudo-element for the background that stays fixed */
        /* position: relative;
    } */
    
    /* .contact-page::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: url('../assets/web_bloom_background_mobile_portrait_2.jpg');
        background-size: 100vw 100vh;
        background-position: center top;
        background-repeat: no-repeat;
        background-attachment: scroll;
        z-index: -1; 
    } */
    
    /* Remove background from body for contact page since pseudo-element handles it */
    /* .contact-page {
        background-image: none !important;
        min-height: 100vh !important;
        height: auto !important;
    } */
    
    /* Fallback for :has() selector */
    /* body:has(.contact-section) {
        background-image: none !important;
        position: relative;
    }
    
    body:has(.contact-section)::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-image: url('../assets/web_bloom_background_mobile_portrait_2.jpg');
        background-size: 100vw 100vh;
        background-position: center top;
        background-repeat: no-repeat;
        background-attachment: scroll;
        z-index: -1;
    } */
    
    /* Mobile Navigation Bar Fixes */
    .navbar {
        top: 15px;
        right: 15px;
        z-index: 1001; /* Higher z-index to ensure visibility */
    }
    
    .hamburger-menu {
        width: 40px !important;
        height: 40px !important;
        background: rgba(255, 255, 255, 0.15) !important; /* Slightly more opaque for real devices */
        border: 2px solid rgba(255, 255, 255, 0.4) !important; /* More visible border */
        backdrop-filter: blur(0px) !important;
        box-shadow: none !important;
    }
    
    .hamburger-menu:hover {
        background: rgba(255, 255, 255, 0.35) !important; /* More opaque for real devices */
        border-color: rgba(255, 255, 255, 0.6) !important; /* More visible border */
        transform: scale(1.05) !important;
    }
    
    .hamburger-line {
        background-color: rgba(231, 231, 231, 0.8) !important; /* More opaque lines for real devices */
        width: 20px !important;
        height: 2px !important;
        box-shadow: none !important;
    }
    
    .nav-menu {
        top: 70px !important;
        right: -300px !important;
        width: 280px !important;
        background: rgba(65, 65, 65, 0.4) !important; /* More opaque background for real devices */
        backdrop-filter: blur(0px) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important; /* More visible border */
        border-radius: 15px !important; /* Same as desktop */
        box-shadow: -5px 0 20px rgba(139, 75, 59, 0.2) !important; /* Same as desktop */
    }
    
    .nav-menu.active {
        right: 0 !important;
    }
    
    /* Override desktop nav-btn styles for mobile */
    .nav-btn {
        background: rgba(22, 94, 40, 0.3) !important; /* Same as desktop */
        border: 0px solid rgba(0, 0, 0, 0.3) !important; /* Same as desktop */
        border-radius: 15px !important; /* Same as desktop */
        padding: 10px 25px !important; /* Same as desktop */
        color: #c4c4c4 !important; /* Same as desktop */
        text-decoration: none !important;
        font-family: 'Refinest', 'Inter', sans-serif !important;
        font-size: 16px !important; /* Same as desktop */
        font-weight: 300 !important; /* Same as desktop */
        transition: all 0.3s ease !important;
        text-align: center !important;
        backdrop-filter: blur(0px) !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .nav-btn:hover {
        background: rgba(112, 3, 201, 0.151) !important; /* Same as desktop */
        border-color: rgba(0, 0, 0, 0.5) !important; /* Same as desktop */
        transform: translateX(-5px) !important; /* Same as desktop */
        box-shadow: 5px 5px 15px rgba(139, 75, 59, 0.2) !important; /* Same as desktop */
    }

    .nav-btn.active {
        background: rgba(218, 165, 32, 0.25) !important; /* Same as desktop active */
        border-color: rgba(218, 165, 32, 0.6) !important; /* Same as desktop active */
        color: rgba(245, 245, 245, 0.85) !important; /* Same as desktop active */
        font-family: 'Refinest', 'Inter', sans-serif !important;
        font-size: 16px !important; /* Adjusted for mobile but keeping desktop font-size pattern */
        font-weight: 300 !important; /* Same as desktop active */
    }
    
    /* Mobile layout adjustments */
    .logo {
        font-size: 150px; /* Smaller logo on mobile */
        padding: 40px 60px;
        margin-top: 90px;
    }
    
    .tagline-section {
        margin-top: -50px;
    }
    
    .tagline-text {
        font-size: 16px;
    }
    
    /* Navigation improvements */
    .nav-menu {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
    }
    
    /* Button improvements */
    .cta-button {
        padding: 12px 30px;
        font-size: 16px;
    }
    
    /* Progress page mobile optimizations */
    .progress-page .upload-area {
        max-width: 350px !important; /* Increased from 280px */
        padding: 30px 25px !important; /* Increased padding */
        min-height: 200px !important; /* Base minimum height */
        height: auto !important; /* Allow height to grow dynamically */
        aspect-ratio: none !important; /* Remove square constraint on mobile */
        justify-content: flex-start !important; /* Align content to top instead of center */
    }

    /* Mobile file-info section adjustments - ensure it fits within upload area */
    .progress-page .file-info {
        margin-top: 15px !important; /* Slightly reduced margin for better fit */
        padding: 15px !important; /* Reduced padding for mobile */
        font-size: 14px !important; /* Slightly smaller text for mobile */
        background: rgba(244, 181, 160, 0.15) !important; /* Slightly more transparent on mobile */
    }

    .progress-page .file-name {
        font-size: 14px !important; /* Smaller filename text */
        margin-bottom: 12px !important; /* Reduced margin */
    }

    .progress-page .process-btn {
        padding: 10px 20px !important; /* Smaller button padding */
        font-size: 14px !important; /* Smaller button text */
    }

    /* Reduce upload area text sizes slightly on mobile */
    .progress-page .upload-title {
        font-size: 28px !important;
        margin-bottom: 12px !important;
    }

    .progress-page .upload-description {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }

    .progress-page .upload-btn {
        padding: 12px 24px !important;
        font-size: 15px !important;
    }

    /* Mobile file-info section adjustments */
    .progress-page .file-info {
        margin-top: 15px !important;
        padding: 15px !important;
        font-size: 14px !important;
        background: rgba(244, 181, 160, 0.15) !important;
    }

    .progress-page .file-name {
        font-size: 14px !important;
        margin-bottom: 12px !important;
    }

    .progress-page .process-btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* When mobile success is shown, hide the visualization section */
    .mobile-success-container.active ~ .visualization-section {
        display: none !important;
    }
    
    /* Mobile Success UI - shown instead of infographic */
    .mobile-success-container {
        display: block;
        text-align: center;
        padding: 40px 20px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(139, 75, 59, 0.1);
        margin: 20px auto;
        max-width: 400px;
    }

    .mobile-success-icon {
        font-size: 60px;
        color: #7B9F7C;
        margin-bottom: 20px;
        display: block;
    }

    .mobile-success-title {
        font-family: 'Refinest', 'Inter', sans-serif;
        font-size: 24px;
        color: #8B4B3B;
        margin-bottom: 15px;
        font-weight: 500;
    }

    .mobile-success-description {
        font-size: 16px;
        color: #666;
        margin-bottom: 30px;
        line-height: 1.5;
    }

    .mobile-download-btn {
        background: linear-gradient(135deg, #7B9F7C, #8B4B3B);
        color: white;
        border: none;
        padding: 15px 30px;
        border-radius: 15px;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(139, 75, 59, 0.3);
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-download-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(139, 75, 59, 0.4);
    }

    .mobile-download-btn:active {
        transform: translateY(0);
    }

    /* Hide desktop visualization section on mobile */
    .visualization-section {
        display: none !important;
    }

    /* Ensure mobile success container is visible on mobile */
    .mobile-success-container {
        display: none; /* Hidden by default, shown by JavaScript */
    }
    
       
    /* Visualization section mobile adaptations */
    .visualization-header {
        width: 100%;
        max-width: 95%;
        padding: 0 10px;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .viz-title {
        font-size: 28px;
        margin-bottom: 0;
    }
    
    .header-buttons {
        width: 100%;
        justify-content: center;
        gap: 10px;
    }
    
    .download-btn,
    .reset-btn {
        font-size: 12px;
        padding: 10px 16px;
        flex: 1;
        max-width: 150px;
    }
    
    /* Typography adjustments for non-progress pages */
    body:not(.progress-page) .page-title {
        font-size: 42px;
        margin-bottom: 15px;
        margin-top: -20px; /* Move title higher */
    }
    
    body:not(.progress-page) .page-subtitle {
        font-size: 18px;
        margin-top: 5px;
    }
    
    /* Contact form mobile */
    .contact-form {
        padding: 20px;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* App Page Mobile Styles */
    /* .app-page {
        background-image: url('../assets/web_bloom_background_mobile_portrait_2.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat; */
        /* background-attachment: scroll; 
        min-height: 100vh; 
        width: 100%;
        overflow-x: hidden;
    } */
    
    /* Fix App page container issues on mobile */
    .app-page .main-content {
        min-height: 100vh;
        width: 100%;
        max-width: 100%;
        padding: 120px 10px 20px 10px; /* Increased top padding to prevent header cutoff */
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        position: relative; /* Ensure proper positioning context */
    }
    
    .app-page .hero-section {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        position: relative; /* Ensure proper positioning */
    }
    
    .app-page .page-header {
        margin-bottom: 30px; /* Reduce bottom margin to save space */
        padding-top: 20px; /* Add some top padding for breathing room */
    }
    
    .app-page .page-title {
        font-size: 40px;
        margin-bottom: 15px;
        line-height: 1.2; /* Ensure proper line height */
    }
    
    .app-page .page-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
        padding: 0 20px;
        line-height: 1.4; /* Ensure proper line height */
    }
    
    /* Mobile carousel styles */
    .app-carousel-section {
        padding: 0 5px;
        width: 100%;
        overflow: hidden;
    }
    
    .carousel-navigation {
        gap: 10px;
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%;
    }
    
    .carousel-arrow {
        width: 35px;
        height: 35px;
        flex-shrink: 0;
    }
    
    .app-carousel-container {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        display: flex;
        justify-content: flex-start !important; /* Override desktop centering */
    }
    
    .app-carousel-track {
        gap: 15px;
        will-change: transform;
        transition: transform 0.4s ease;
        display: flex;
        align-items: center;
        justify-content: flex-start !important; /* Start from the left, not center */
    }
    
    .app-card {
        width: 200px;
        height: 360px;
        flex-shrink: 0;
        min-width: 200px;
    }
    
    .app-card-front,
    .app-card-back {
        border-radius: 20px;
    }
    
    .app-card-front {
        padding: 15px;
    }
    
    .app-card-back {
        padding: 20px;
        top: 8px;
        height: calc(100% - 16px);
    }
    
    .app-card-front,
    .app-card-back {
        border-radius: 20px;
    }
    
    .app-card-front {
        padding: 15px;
    }
    
    .app-card-back {
        padding: 20px;
        top: 8px;
        height: calc(100% - 16px);
    }
    
    .card-text-content h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    .card-text-content p {
        font-size: 14px;
        line-height: 1.4;
    }
    
    /* Carousel indicators mobile */
    .carousel-indicators {
        margin-top: 20px;
    }
    
    .indicator {
        width: 8px;
        height: 8px;
        margin: 0 4px;
    }
}

/* Mobile Landscape Mode - Universal approach for all mobile devices */
@media screen and (orientation: landscape) and (max-height: 500px)  {
    /* Simple landscape detection - works for all mobile devices in landscape
       max-height: 600px ensures we don't affect tablets/desktop */
    
    /* Navigation fixes for small landscape screens */
    .nav-menu {
        top: 15px !important; /* Move higher up */
        width: 250px !important; /* Slightly narrower */
        max-height: calc(100vh - 30px) !important; /* Ensure it fits in viewport */
        overflow-y: auto !important; /* Make it scrollable */
    }
    
    .nav-menu-content {
        padding: 15px 20px !important; /* Reduce padding */
        gap: 12px !important; /* Reduce gap between items */
    }
    
    .nav-btn {
        padding: 8px 20px !important; /* Smaller padding */
        font-size: 14px !important; /* Smaller text */
    }
    
    /* App page specific adjustments */
    .app-page .page-title {
        font-size: 32px !important;
        margin-bottom: 8px !important;
    }
    
    .app-page .page-subtitle {
        font-size: 14px !important;
        margin-bottom: 15px !important;
    }
    
    .app-page .main-content {
        padding-top: 50px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .app-page .page-header {
        margin-bottom: 15px !important;
    }
    
    /* App Carousel Complete Definitions for Mobile Landscape */
    .app-carousel-section {
        padding: 0 5px !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .carousel-navigation {
        gap: 8px !important; /* Smaller gap for landscape */
        margin-bottom: 15px !important; /* Less margin for landscape */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .carousel-arrow {
        width: 30px !important; /* Smaller arrows for landscape */
        height: 30px !important;
        flex-shrink: 0 !important;
    }
    
    .app-carousel-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: flex-start !important; /* Override desktop centering */
    }
    
    .app-carousel-track {
        gap: 10px !important;
    }
    
    .app-card {
        width: 170px !important;
        height: 260px !important;
    }
    
    .app-carousel-track {
        gap: 10px !important;
    }
    
    .app-card-back {
        padding: 12px !important;
    }
    
    .app-card-front,
    .app-card-back {
        border-radius: 20px !important;
    }
    
    .app-card-front {
        padding: 12px !important; /* Smaller padding for landscape */
    }
    
    .card-text-content h3 {
        font-size: 18px !important;
        margin-bottom: 6px !important;
    }
    
    .card-text-content p {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    
    /* Carousel indicators for mobile landscape */
    .carousel-indicators {
        margin-top: 15px !important; /* Less margin for landscape */
    }
    
    .indicator {
        width: 6px !important; /* Smaller indicators for landscape */
        height: 6px !important;
        margin: 0 3px !important; /* Less spacing for landscape */
    }
    
    /* About page carousel cards - use same values as portrait mobile mode for consistency */
    .about-page .carousel-card {
        width: 200px !important; /* Smaller for landscape */
        padding: 20px 12px 12px !important; /* Same as portrait mobile */
        box-sizing: border-box;
    }
    
    .about-page .carousel-card.active {
        width: 200px !important;
        transform: scale(1.0) !important; /* Same as portrait mobile - no scaling */
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.2) !important; /* Same opacity as portrait */
        backdrop-filter: blur(0px) !important;
        box-shadow: 0 10px 30px rgba(139, 75, 59, 0.15) !important; /* Same shadow as portrait */
        mix-blend-mode: normal !important;
    }
    
    .about-page .carousel-track {
        gap: 10px !important; /* Smaller gap for landscape */
    }
    
    .about-page .card-title {
        font-size: 18px !important; /* Smaller title for landscape */
        margin-bottom: 8px !important;
    }
    
    .about-page .card-content {
        font-size: 14px !important; /* Smaller content text for landscape */
        margin-bottom: 20px !important;
        line-height: 1.4 !important;
    }
    
    /* About page flower decorations - smaller for landscape */
    .about-page .card-flower.flower-1 {
        width: 25px !important; /* Smaller than portrait mobile */
    }

    .about-page .card-flower.flower-2 {
        width: 30px !important; /* Smaller than portrait mobile */
    }

    .about-page .card-flower.flower-3 {
        width: 30px !important; /* Smaller than portrait mobile */
    }
    
    /* Navigation adjustments */
    .navbar {
        top: 8px !important;
        right: 12px !important;
    }
    
    .hamburger-menu {
        width: 35px !important;
        height: 35px !important;
    }
}

/* Medium Mobile Landscape (iPhone 11, iPhone 12, etc.) - Specific landscape treatment */
@media only screen and (orientation: landscape) and (min-width: 376px) and (max-width: 940px) and (max-height: 440px) {
    /* Specific styles for medium mobile devices in landscape mode */
    /* This targets iPhone 11 (414px height) but excludes iPhone 13 mini (375px height) */
    
    /* About Page Header & Intro Container - Medium Mobile Landscape (iPhone 11) */
    body.about-page .page-title {
        font-size: 46px !important; /* Smaller header for medium mobile landscape */
        margin-bottom: 8px !important; /* Reduced spacing */
    }
    
    
    body.about-page .page-header {
        position: static !important; /* Remove absolute positioning */
        top: auto !important;
        margin-top: 30px !important; /* Much less top margin for landscape */
        margin-bottom: 10px !important; /* Reduced bottom margin */
        transform: none !important; /* Remove transforms that push header down */
    }
    
    body.about-page .about-intro {
        margin: 0 auto 0px auto !important; /* Remove bottom margin */
        padding: 0 10px !important; /* Reduce horizontal padding */
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-120px) !important; /* Less negative transform for landscape */
        max-width: 500px !important; /* Wider max-width for landscape */
    }

   body.about-page .hero-section {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -90px !important; /* Pull carousel section closer to intro */
    }
    
    
    .intro-text {
        padding: 19px 20px !important; /* Reduced padding for landscape */
    }
    
    .intro-text p {
        font-size: 14px !important; /* Smaller font for landscape */
        line-height: 1.3 !important; /* Tighter line height for landscape */
    }

    .line-decoration {
    display: flex;
    justify-content: center;
    margin: 1px 0 15px 0;
}

.line-decoration img {
    height: 11px;
    width: auto;
    opacity: 0.5;
    transform: scaleX(1.2); /* Make the brush stroke longer */
}


    
    
    /* About page carousel - same treatment as extra small landscape but slightly larger */
    .about-page .carousel-card {
        width: 220px !important; /* Bigger for medium mobile landscape */
        padding: 18px 12px 12px !important; /* Slightly more padding than extra small */
        box-sizing: border-box;
    }
    
    .about-page .carousel-card.active {
        width: 220px !important;
        transform: scale(1.0) !important; /* No scaling to prevent overflow */
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.2) !important; /* Same opacity as portrait */
        backdrop-filter: blur(0px) !important;
        box-shadow: 0 10px 30px rgba(139, 75, 59, 0.15) !important;
        mix-blend-mode: normal !important;
    }
    
    .about-page .carousel-track {
        gap: 4px !important; /* Smaller gap for better fit on medium mobile landscape */
    }
    
    .about-page .card-title {
        font-size: 17px !important; /* Slightly larger than extra small */
        margin-bottom: 8px !important;
    }
    
    .about-page .card-content {
        font-size: 13px !important; /* Slightly larger than extra small */
        margin-bottom: 18px !important;
        line-height: 1.4 !important;
    }
    
    /* About page flower decorations - optimized for medium mobile landscape */
    body.about-page .card-flower.flower-1 {
        width: 18px !important; /* Smaller for landscape */
        bottom: -1px !important; /* Adjust positioning */
        opacity: 0.6 !important; /* Slightly more subtle */
        mix-blend-mode: darken !important;
    }

    body.about-page .card-flower.flower-2 {
        width: 20px !important; /* Smaller for landscape */
        bottom: -1px !important; /* Adjust positioning */
        opacity: 0.6 !important; /* Slightly more subtle */
    }

    body.about-page .card-flower.flower-3 {
        width: 18px !important; /* Smaller for landscape */
        bottom: -2px !important; /* Adjust positioning */
        opacity: 0.6 !important; /* Slightly more subtle */
    }
    
    /* Privacy Policy Page - Medium Mobile Landscape (iPhone 11) */
    body.privacy-page .page-title {
        font-size: 46px !important; /* Same as About page for consistency */
        margin-bottom: 8px !important; /* Reduced spacing for landscape */
    }
    
    body.privacy-page .page-header {
        position: static !important; /* Remove absolute positioning */
        top: auto !important;
        margin-top: 30px !important; /* Much less top margin for landscape */
        margin-bottom: 10px !important; /* Reduced bottom margin */
        transform: none !important; /* Remove transforms that push header down */
    }
    
    body.privacy-page .about-intro {
        margin: 0 auto 0px auto !important; /* Remove bottom margin */
        padding: 0 10px !important; /* Reduce horizontal padding */
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-40px) !important; /* Less negative transform for landscape */
        max-width: 500px !important; /* Wider max-width for landscape */
    }
    
    body.privacy-page .intro-text h2 {
        font-size: 24px !important; /* Smaller for mobile */
        margin: 30px 0 15px 0 !important;
    }
    
    body.privacy-page .intro-text h3 {
        font-size: 18px !important; /* Smaller for mobile */
        margin: 20px 0 10px 0 !important;
    }
    
    /* Terms & Conditions Page - Medium Mobile Landscape (iPhone 11) */
    body.terms-page .page-title {
        font-size: 46px !important; /* Same as About page for consistency */
        margin-bottom: 8px !important; /* Reduced spacing for landscape */
    }
    
    body.terms-page .page-header {
        position: static !important; /* Remove absolute positioning */
        top: auto !important;
        margin-top: 30px !important; /* Much less top margin for landscape */
        margin-bottom: 10px !important; /* Reduced bottom margin */
        transform: none !important; /* Remove transforms that push header down */
    }
    
    body.terms-page .about-intro {
        margin: 0 auto 0px auto !important; /* Remove bottom margin */
        padding: 0 10px !important; /* Reduce horizontal padding */
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-20px) !important; /* Less negative transform for landscape */
        max-width: 500px !important; /* Wider max-width for landscape */
    }
    
    body.terms-page .intro-text h2 {
        font-size: 24px !important; /* Smaller for mobile */
        margin: 30px 0 15px 0 !important;
    }
    
    body.terms-page .intro-text h3 {
        font-size: 18px !important; /* Smaller for mobile */
        margin: 20px 0 10px 0 !important;
    }
    
    /* Progress Page - Medium Mobile Landscape (iPhone 11) */
    body.progress-page .page-title {
        font-size: 46px !important; /* Same as About page for consistency */
        margin-bottom: 8px !important; /* Reduced spacing for landscape */
    }
    
    body.progress-page .page-subtitle {
        font-size: 16px !important; /* Smaller subtitle for landscape */
        margin-bottom: 15px !important; /* Reduced spacing */
    }
    
    body.progress-page .page-header {
        margin-top: 25px !important; /* Less top margin for landscape */
        margin-bottom: 15px !important; /* Reduced bottom margin */
    }
    
    body.progress-page .upload-area {
        max-width: 320px !important; /* Smaller upload area for landscape */
        padding: 20px 18px !important; /* Reduced padding */
        min-height: 180px !important; /* Shorter height for landscape */
    }
    
    body.progress-page .upload-title {
        font-size: 30px !important; /* Smaller title */
        margin-bottom: 8px !important;
    }
    
    body.progress-page .upload-description {
        font-size: 14px !important; /* Smaller description */
        margin-bottom: 15px !important;
    }
    
    body.progress-page .upload-btn {
        font-size: 14px !important; /* Smaller button text */
        padding: 10px 20px !important;
    }
    
    /* Progress page file-info section adjustments for landscape - ensure it fits within upload area */
    body.progress-page .file-info {
        margin: 15px 0 !important; /* Reduced margins for landscape */
        padding: 8px 0 !important; /* Reduced padding */
    }
    
    body.progress-page .file-name {
        font-size: 13px !important; /* Smaller text for landscape */
        margin-bottom: 8px !important; /* Reduced spacing */
    }
    
    body.progress-page .process-btn {
        font-size: 13px !important; /* Smaller button text for landscape */
        padding: 8px 16px !important; /* Reduced padding for landscape */
        margin-top: 8px !important; /* Reduced top margin */
    }
    
    /* App Page - Medium Mobile Landscape (iPhone 11) */
    body.app-page .page-title {
        font-size: 56px !important; /* Same as About and Progress for consistency */
        margin-bottom: 8px !important; /* Reduced spacing for landscape */
    }
    
    body.app-page .page-subtitle {
        font-size: 16px !important; /* Smaller subtitle for landscape */
        margin-bottom: 20px !important; /* Reduced spacing */
    }
    
    body.app-page .page-header {
        margin-top: -45px !important; /* Less top margin for landscape */
        margin-bottom: 15px !important; /* Reduced bottom margin */
    }
    
    body.app-page .main-content {
                padding-top: 50px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    /* App Carousel adjustments for medium mobile landscape */
    body.app-page .app-carousel-section {
        padding: 0 5px !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    body.app-page.carousel-navigation {
        gap: 8px !important; /* Smaller gap for landscape */
        margin-bottom: 15px !important; /* Less margin for landscape */
        width: 100% !important;
        max-width: 100% !important;
    }

    body.app-page .app-carousel-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: flex-start !important; /* Override desktop centering */
    }

    body.app-page .app-carousel-section {
         position: relative !important;
        padding: 0 8px !important; /* Reduced horizontal padding */
    }
    
    body.app-page .app-card {
        flex-shrink: 0;
        width: 200px !important; /* Smaller cards for landscape */
        height: 320px !important; /* Shorter height for landscape */
    }
    
    body.app-page .app-carousel-track {
        will-change: transform;
        transform: translate3d(0, 0, 0);
        contain: layout style;
    }
    
    body.app-page .carousel-arrow {
        
        width: 30px !important; /* Smaller navigation arrows */
        height: 30px !important;
        
    }
    
    body.app-page .app-card-front {
        padding: 12px !important; /* Reduced padding */
    }
    
    body.app-page .app-card-back {
        padding: 15px !important; /* Reduced padding */
    }
    
    body.app-page .card-text-content h3 {
        font-size: 15px !important; /* Smaller title text */
        margin-bottom: 10px !important;
    }
    
    body.app-page .card-text-content p {
        font-size: 14px !important; /* Smaller paragraph text */
        line-height: 1.3 !important; /* Tighter line height */
        margin-bottom: 8px !important;
    }
    
    /* Contact Page - Medium Mobile Landscape (iPhone 11) */
    body.contact-page .page-title {
        font-size: 66px !important; /* Same as other pages for consistency */
        margin-bottom: 8px !important; /* Reduced spacing for landscape */
    }
    
    body.contact-page .page-subtitle {
        font-size: 16px !important; /* Smaller subtitle for landscape */
        margin-bottom: 20px !important; /* Reduced spacing */
    }
    
    body.contact-page .page-header {
        margin-top: 25px !important; /* Less top margin for landscape */
        margin-bottom: 15px !important; /* Reduced bottom margin */
    }
    
    body.contact-page .main-content {
        padding-top: 40px !important; /* Reduced top padding for landscape */
        padding-left: 10px !important; /* Consistent horizontal padding */
        padding-right: 10px !important;
    }
    
    /* Contact form and cards adjustments for medium mobile landscape */
    body.contact-page .contact-methods {
        gap: 15px !important; /* Smaller gap between cards */
        margin-bottom: 20px !important; /* Reduced bottom margin */
    }
    
    body.contact-page .contact-card {
        padding: 15px !important; /* Reduced padding */
        min-height: 120px !important; /* Shorter height for landscape */
    }
    
    body.contact-page .contact-card h3 {
        font-size: 18px !important; /* Smaller title text */
        margin-bottom: 8px !important;
    }
    
    body.contact-page .contact-card p {
        font-size: 14px !important; /* Smaller paragraph text */
        line-height: 1.3 !important; /* Tighter line height */
        margin-bottom: 6px !important;
    }
    
    body.contact-page .contact-form-section {
        margin-top: 20px !important; /* Reduced top margin */
    }
    
    body.contact-page .contact-form {
        padding: 20px !important; /* Reduced padding */
        max-width: 500px !important; /* Smaller max-width for landscape */
    }
    
    body.contact-page .form-group {
        margin-bottom: 15px !important; /* Reduced spacing between form groups */
    }
    
    body.contact-page .form-group label {
        font-size: 14px !important; /* Smaller label text */
        margin-bottom: 5px !important;
    }
    
    body.contact-page .form-group input,
    body.contact-page .form-group select,
    body.contact-page .form-group textarea {
        font-size: 14px !important; /* Smaller input text */
        padding: 10px 12px !important; /* Reduced padding */
    }
    
    body.contact-page .form-group textarea {
        min-height: 80px !important; /* Shorter textarea for landscape */
    }
    
    body.contact-page .submit-btn {
        font-size: 14px !important; /* Smaller button text */
        padding: 10px 20px !important; /* Reduced padding */
    }
    
    /* Universal Navigation - Medium Mobile Landscape (iPhone 11) - ALL PAGES */
    .navbar {
        top: 18px !important; /* Move navbar higher for landscape - applies to all pages */
        right: 20px !important;
    }
    
    .hamburger-menu {
        width: 40px !important; /* Smaller hamburger menu for landscape - applies to all pages */
        height: 40px !important;
    }
    
    /* Home Page - Medium Mobile Landscape (iPhone 11) */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .logo {
        font-size: 200px !important; /* Smaller logo for landscape */
        padding: 20px 40px !important; /* Reduced padding */
        margin-top: 10px !important; /* Less top margin for landscape */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .tagline-section {
        margin-top: -30px !important; /* Reduced negative margin for landscape */
        margin-bottom: 15px !important; /* Reduced bottom margin */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .tagline-text {
        font-size: 14px !important; /* Smaller tagline text for landscape */
        padding: 0 20px !important; /* Horizontal padding for better spacing */
        line-height: 1.3 !important; /* Tighter line height */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .cta-section {
        margin-top: 20px !important; /* Reduced top margin for landscape */
        margin-bottom: 15px !important; /* Reduced bottom margin */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .cta-button {
        font-size: 14px !important; /* Smaller button text for landscape */
        padding: 10px 25px !important; /* Reduced padding */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .main-content {
        padding-top: 30px !important; /* Reduced top padding for landscape */
        padding-bottom: 20px !important; /* Reduced bottom padding */
        padding-left: 10px !important; /* Consistent horizontal padding */
        padding-right: 10px !important;
    }
    
    /* UNIVERSAL BACKGROUND LAYER SYSTEM - Medium Mobile Landscape */
    /* All pages use JavaScript-managed background-layer div instead of unreliable ::before */
    
    /* HOME PAGE */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* ABOUT PAGE */
    .about-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* PROGRESS PAGE */
    .progress-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* APP PAGE */
    .app-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* CONTACT PAGE */
    .contact-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* UNIVERSAL BACKGROUND LAYER - JavaScript creates and manages height */
    .background-layer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        background-size: 100vw 100vh !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    /* Home page gets different background image */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(.privacy-page):not(.terms-page) .background-layer {
        background-image: url('../assets/web_bloom_background_tablet_1.jpg') !important;
    }

    /* All other pages get standard tablet background */
    .app-page .background-layer,
    .progress-page .background-layer,
    .about-page .background-layer,
    .contact-page .background-layer,
    .privacy-page .background-layer,
    .terms-page .background-layer {
        background-image: url('../assets/web_bloom_background_tablet.jpg') !important;
    }
}

/* Extra Small Mobile Landscape (iPhone 13 mini, etc.) - Exclude iPhone 11 */
@media screen and (orientation: landscape) and (max-height: 410px) and (max-width: 820px) {
    /* Even more aggressive optimizations for very small landscape screens */
    
    .nav-menu {
        top: 10px !important;
        right: -200px !important; /* Slides in from closer */
        width: 180px !important; /* Much narrower */
        max-height: calc(100vh - 20px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        border-radius: 10px !important; /* Smaller radius for compact look */
    }
    
    .nav-menu.active {
        right: 5px !important; /* Small margin from edge */
    }
    
    .nav-menu-content {
        padding: 10px 15px !important;
        gap: 8px !important;
    }
    
    .nav-btn {
        padding: 6px 15px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }
    
    .hamburger-menu {
        width: 35px !important;
        height: 35px !important;
        top: 10px !important;
        right: 10px !important;
    }
    
    .hamburger-line {
        width: 18px !important;
        height: 2px !important;
    }
    
    /* About page carousel - even smaller for extra small landscape screens */
    .about-page .carousel-card {
        width: 180px !important; /* Even smaller for tiny landscape screens */
        padding: 15px 10px 10px !important; /* More compact padding */
        box-sizing: border-box;
    }
    
    .about-page .carousel-card.active {
        width: 180px !important;
        transform: scale(1.0) !important; /* No scaling to prevent overflow */
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.3) !important; /* Same opacity as portrait */
        backdrop-filter: blur(0px) !important;
        box-shadow: 0 10px 30px rgba(139, 75, 59, 0.15) !important;
        mix-blend-mode: normal !important;
    }
    
    .about-page .carousel-track {
        gap: 8px !important; /* Even smaller gap for tiny screens */
    }
    
    .about-page .card-title {
        font-size: 16px !important; /* Even smaller title */
        margin-bottom: 6px !important;
    }
    
    .about-page .card-content {
        font-size: 12px !important; /* Even smaller content text */
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }
    
    /* About page flower decorations - extra small for tiny landscape */
    .about-page .card-flower.flower-1 {
        width: 15px !important; /* Even smaller */
    }

    .about-page .card-flower.flower-2 {
        width: 15px !important; /* Even smaller */
    }

    .about-page .card-flower.flower-3 {
        width: 15px !important; /* Even smaller */
    }
    
    /* About Page Header & Intro Container - Extra Small Landscape (iPhone 13 mini) */
    .about-page .page-title {
        font-size: 43px !important; /* Smaller header for extra small landscape */
        margin-bottom: 5px !important;
    }
    
    /* Privacy/Terms Header - Extra Small Landscape (iPhone 13 mini) */
    body.privacy-page .page-title,
    body.terms-page .page-title {
        font-size: 36px !important;
        margin-bottom: 4px !important;
    }
    
    .about-intro {
        margin: 0 auto 0px auto !important;
        padding: 0 5px !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-130px) !important;
        max-width: 400px !important; /* Much smaller max-width for extra small landscape */
    }

    .line-decoration {
    display: flex;
    justify-content: center;
    margin: 1px 0 15px 0;
    }

    .line-decoration img {
    height: 8px;
    width: auto;
    opacity: 0.6;
    transform: scaleX(1.2); /* Make the brush stroke longer */
   }

    
    .intro-text {
        padding: 12px 16px !important; /* Smaller padding for extra small landscape */
    }
    
    .intro-text p {
        font-size: 12px !important; /* Smaller font for extra small landscape */
        line-height: 1.2 !important; /* Tighter line height for extra small landscape */
    }
    
    /* Progress Page - Extra Small Mobile Landscape (iPhone 13 mini) */
    body.progress-page .page-title {
        font-size: 40px !important; /* Even smaller header for extra small landscape */
        margin-bottom: 5px !important; /* Reduced spacing for landscape */
    }
    
    body.progress-page .page-subtitle {
        font-size: 14px !important; /* Even smaller subtitle for landscape */
        margin-bottom: 12px !important; /* Reduced spacing */
    }
    
    body.progress-page .page-header {
        margin-top: 20px !important; /* Less top margin for landscape */
        margin-bottom: 12px !important; /* Reduced bottom margin */
    }
    
    body.progress-page .upload-area {
        max-width: 280px !important; /* Even smaller upload area for extra small landscape */
        padding: 15px 15px !important; /* Reduced padding */
        min-height: 160px !important; /* Shorter height for landscape */
    }
    
    body.progress-page .upload-title {
        font-size: 26px !important; /* Even smaller title */
        margin-bottom: 6px !important;
    }
    
    body.progress-page .upload-description {
        font-size: 12px !important; /* Even smaller description */
        margin-bottom: 12px !important;
    }
    
    body.progress-page .upload-btn {
        font-size: 12px !important; /* Even smaller button text */
        padding: 8px 16px !important;
    }
    
    /* Progress page file-info section adjustments for extra small landscape */
    body.progress-page .file-info {
        margin: 12px 0 !important; /* Reduced margins for landscape */
        padding: 6px 0 !important; /* Reduced padding */
    }
    
    body.progress-page .file-name {
        font-size: 11px !important; /* Even smaller text for landscape */
        margin-bottom: 6px !important; /* Reduced spacing */
    }
    
    body.progress-page .process-btn {
        font-size: 11px !important; /* Even smaller button text for landscape */
        padding: 6px 12px !important; /* Reduced padding for landscape */
        margin-top: 6px !important; /* Reduced top margin */
    }
    
    /* App Page - Extra Small Mobile Landscape (iPhone 13 mini) */
    body.app-page .page-title {
        font-size: 48px !important; /* Even smaller header for extra small landscape */
        margin-bottom: 5px !important; /* Reduced spacing for landscape */
    }
    
    body.app-page .page-subtitle {
        font-size: 14px !important; /* Even smaller subtitle for landscape */
        margin-bottom: 15px !important; /* Reduced spacing */
    }
    
    body.app-page .page-header {
        margin-top: 20px !important; /* Less top margin for landscape */
        margin-bottom: 12px !important; /* Reduced bottom margin */
    }
    
    body.app-page .main-content {
        padding-top: 35px !important; /* Reduced top padding for landscape */
        padding-left: 8px !important; /* Consistent horizontal padding */
        padding-right: 8px !important;
    }
    
    /* App Carousel adjustments for extra small mobile landscape */
    body.app-page .app-carousel-section {
        padding: 0 5px !important; /* Reduced horizontal padding */
    }
    
    body.app-page .carousel-navigation {
        gap: 6px !important; /* Even smaller gap for extra small landscape */
        margin-bottom: 12px !important; /* Less margin for extra small landscape */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body.app-page .app-carousel-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: flex-start !important; /* Override desktop centering */
    }
    
    body.app-page .app-card {
        width: 170px !important; /* Even smaller cards for landscape */
        height: 280px !important; /* Shorter height for landscape */
    }
    
    body.app-page .app-carousel-track {
        gap: 8px !important; /* Even smaller gap between cards */
    }
    
    body.app-page .carousel-arrow {
        width: 25px !important; /* Even smaller navigation arrows */
        height: 25px !important;
    }
    
    body.app-page .app-card-front {
        padding: 10px !important; /* Reduced padding */
    }
    
    body.app-page .app-card-back {
        padding: 12px !important; /* Reduced padding */
    }
    
    body.app-page .card-text-content h3 {
        font-size: 16px !important; /* Even smaller title text */
        margin-bottom: 8px !important;
    }
    
    body.app-page .card-text-content p {
        font-size: 12px !important; /* Even smaller paragraph text */
        line-height: 1.2 !important; /* Tighter line height */
        margin-bottom: 6px !important;
    }
    
    /* Carousel indicators for extra small mobile landscape */
    body.app-page .carousel-indicators {
        margin-top: 12px !important; /* Less margin for extra small landscape */
    }
    
    body.app-page .indicator {
        width: 5px !important; /* Even smaller indicators for extra small landscape */
        height: 5px !important;
        margin: 0 2px !important; /* Less spacing for extra small landscape */
    }
    
    
    /* Contact Page - Extra Small Mobile Landscape (iPhone 13 mini) */
    body.contact-page .page-title {
        font-size: 56px !important; /* Even smaller header for extra small landscape */
        margin-bottom: 5px !important; /* Reduced spacing for landscape */
    }
    
    body.contact-page .page-subtitle {
        font-size: 14px !important; /* Even smaller subtitle for landscape */
        margin-bottom: 15px !important; /* Reduced spacing */
    }
    
    body.contact-page .page-header {
        margin-top: 20px !important; /* Less top margin for landscape */
        margin-bottom: 12px !important; /* Reduced bottom margin */
    }
    
    body.contact-page .main-content {
        padding-top: 35px !important; /* Reduced top padding for landscape */
        padding-left: 8px !important; /* Consistent horizontal padding */
        padding-right: 8px !important;
    }
    
    /* Contact form and cards adjustments for extra small mobile landscape */
    body.contact-page .contact-methods {
        gap: 10px !important; /* Even smaller gap between cards */
        margin-bottom: 15px !important; /* Reduced bottom margin */
    }
    
    body.contact-page .contact-card {
        padding: 12px !important; /* Reduced padding */
        min-height: 110px !important; /* Shorter height for landscape */
    }
    
    body.contact-page .contact-card h3 {
        font-size: 16px !important; /* Even smaller title text */
        margin-bottom: 6px !important;
    }
    
    body.contact-page .contact-card p {
        font-size: 12px !important; /* Even smaller paragraph text */
        line-height: 1.2 !important; /* Tighter line height */
        margin-bottom: 5px !important;
    }
    
    body.contact-page .contact-form-section {
        margin-top: 15px !important; /* Reduced top margin */
    }
    
    body.contact-page .contact-form {
        padding: 15px !important; /* Reduced padding */
        max-width: 400px !important; /* Even smaller max-width for landscape */
    }
    
    body.contact-page .form-group {
        margin-bottom: 12px !important; /* Reduced spacing between form groups */
    }
    
    body.contact-page .form-group label {
        font-size: 12px !important; /* Even smaller label text */
        margin-bottom: 4px !important;
    }
    
    body.contact-page .form-group input,
    body.contact-page .form-group select,
    body.contact-page .form-group textarea {
        font-size: 12px !important; /* Even smaller input text */
        padding: 8px 10px !important; /* Reduced padding */
    }
    
    body.contact-page .form-group textarea {
        min-height: 60px !important; /* Even shorter textarea for landscape */
    }
    
    body.contact-page .submit-btn {
        font-size: 12px !important; /* Even smaller button text */
        padding: 8px 16px !important; /* Reduced padding */
    }
    
    /* Home Page - Extra Small Mobile Landscape (iPhone 13 mini) */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .logo {
        font-size: 160px !important; /* Even smaller logo for landscape */
        padding: 15px 30px !important; /* Reduced padding */
        margin-top: 8px !important; /* Less top margin for landscape */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .tagline-section {
        margin-top: -25px !important; /* Reduced negative margin for landscape */
        margin-bottom: 12px !important; /* Reduced bottom margin */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .tagline-text {
        font-size: 12px !important; /* Even smaller tagline text for landscape */
        padding: 0 15px !important; /* Horizontal padding for better spacing */
        line-height: 1.2 !important; /* Tighter line height */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .cta-section {
        margin-top: 15px !important; /* Reduced top margin for landscape */
        margin-bottom: 12px !important; /* Reduced bottom margin */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .cta-button {
        font-size: 12px !important; /* Even smaller button text for landscape */
        padding: 8px 20px !important; /* Reduced padding */
    }
    
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .main-content {
        padding-top: 25px !important; /* Reduced top padding for landscape */
        padding-bottom: 15px !important; /* Reduced bottom padding */
        padding-left: 8px !important; /* Consistent horizontal padding */
        padding-right: 8px !important;
    }
    
    /* UNIVERSAL BACKGROUND LAYER SYSTEM - Extra Small Landscape */
    /* All pages use JavaScript-managed background-layer div instead of unreliable ::before */
    
    /* HOME PAGE */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* ABOUT PAGE */
    .about-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* PROGRESS PAGE */
    .progress-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* APP PAGE */
    .app-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* CONTACT PAGE */
    .contact-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* UNIVERSAL BACKGROUND LAYER - JavaScript creates and manages height */
    .background-layer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        background-size: 100vw 100vh !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    /* Home page gets different background image */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(.privacy-page):not(.terms-page) .background-layer {
        background-image: url('../assets/web_bloom_background_tablet_1.jpg') !important;
    }

    /* All other pages get standard tablet background */
    .app-page .background-layer,
    .progress-page .background-layer,
    .about-page .background-layer,
    .contact-page .background-layer,
    .privacy-page .background-layer,
    .terms-page .background-layer {
        background-image: url('../assets/web_bloom_background_tablet.jpg') !important;
    }
}

/* iPhone 11 and similar devices in landscape mode - Device-specific targeting */
@media only screen and (orientation: landscape) and (min-device-width: 375px) and (max-device-width: 812px) {
    /* About Page Header override for iPhone 11 landscape - fix middle positioning */
    .about-page .page-header {
        position: static !important; /* Remove fixed positioning that causes middle placement */
        top: auto !important;
        margin-top: 20px !important; /* Reduced top margin for landscape */
        margin-bottom: 10px !important;
        transform: none !important;
        z-index: 1 !important;
    }
    
    /* About intro container - prevent overlap with header */
    .about-intro {
        transform: translateY(-100px) !important; /* Less negative transform to reduce gap */
        margin: 0 auto 0px auto !important;
        padding: 0 15px !important;
        max-width: 500px !important; /* Wider for landscape */
    }
    
    /* About page carousel - bring closer to intro */
    .about-page .hero-section {
        margin-top: -80px !important; /* Less negative margin for landscape */
    }
}

/* Background fix - iOS Safari specific solution */
/* Apply to both portrait and landscape with appropriate backgrounds */

/* iOS Safari Portrait Mode Fix */
/* @media screen and (orientation: portrait) { */
/* Fix for real iOS devices - address viewport and safe area issues in portrait */
    /* html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow-x: hidden !important;
    } */
    
    /* Home page gets mobile portrait background in portrait mode */
    /* body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(:has(.progress-container)):not(:has(.app-container)):not(:has(.contact-section))::before {
        content: "";
        display: block;
        position: fixed; 
        top: 0;
        left: 0;
        width: 100vw; 
        height: 100lvh; 
        height: 100dvh; 
        height: -webkit-fill-available; 
        background-image: url('../assets/web_bloom_background_mobile_portrait_1.jpg');
        background-size: 100vw 100vh;
        background-size: 100vw 100lvh;
        background-size: 100vw 100dvh;
        background-size: 100vw -webkit-fill-available;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
        pointer-events: none;
    } */
    
    /* All other pages get mobile background in portrait mode */
    /* .app-page {
        background-image: url('../assets/web_bloom_background_mobile_1.jpg') !important;
        background-size: 100vw 100vh !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important; */
        
        /* New viewport units for iOS portrait */
        /* min-height: 100lvh !important;
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        width: 100% !important; */
        
        /* Clean layout - single position model */
        /* margin: 0 !important;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
        
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
     */
    /* .progress-page,
    body:has(.progress-container) {
        background-image: url('../assets/web_bloom_background_mobile_1.jpg') !important;
        background-size: 100vw 100vh !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        
        
        min-height: 100lvh !important;
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        width: 100% !important;
        
       
        margin: 0 !important;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
        
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        position: relative !important;
    } */
    
    /* .about-page {
        background-image: url('../assets/web_bloom_background_mobile_1.jpg') !important;
        background-size: 100vw 100vh !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        
        
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        width: 100% !important;
        
        
        margin: 0 !important;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
        
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        position: relative !important;
    } */
    
    /* CONTACT PAGE - iOS Safari portrait fix */
    /* .contact-page {
        
        min-height: 100lvh !important;
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        width: 100% !important;
        margin: 0 !important;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
        box-sizing: border-box !important;
        position: relative !important;
    } */
    
    /* .contact-page::before {
        content: "";
        display: block;
        position: fixed; 
        top: 0;
        left: 0;
        width: 100vw;
        height: 100lvh; 
        height: 100dvh; 
        height: -webkit-fill-available; 
        background-image: url('../assets/web_bloom_background_mobile_1.jpg');
        background-size: 100vw 100vh;
        background-size: 100vw 100lvh;
        background-size: 100vw 100dvh;
        background-size: 100vw -webkit-fill-available;
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
        pointer-events: none;
    } */
/* }  */

/* End portrait iOS Safari fix */

/* iOS Safari Landscape Mode Fix */
/* UPDATED: Only applies to larger landscape devices, not our target mobile landscape modes */
@media screen and (orientation: landscape) and (min-height: 501px), 
       screen and (orientation: landscape) and (min-width: 941px) {

/* Fix for real iOS devices - address viewport and safe area issues in landscape */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow-x: hidden !important;
    }
    
    .app-page {
        background-image: url('../assets/web_bloom_background_tablet.jpg') !important;
        background-size: 100vw 100vh !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        
        /* New viewport units for iOS landscape */
        min-height: 100lvh !important;
        /* min-height: 100dvh !important;
        min-height: -webkit-fill-available !important; */
        width: 100% !important;
        
        /* Clean layout - single position model */
        margin: 0 !important;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
        
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Additional body targeting for extra security */
    body.app-page {
        background-image: url('../assets/web_bloom_background_tablet.jpg') !important;
        background-size: 100vw 100vh !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* PROGRESS PAGE - Apply same white border fix as app page */
    .progress-page,
    body:has(.progress-container) {
        background-image: url('../assets/web_bloom_background_tablet.jpg') !important;
        background-size: 100vw 100vh !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        
        /* Same viewport units as app page */
        min-height: 100lvh !important;
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        width: 100% !important;
        
        /* Same layout fixes */
        margin: 0 !important;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
        
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* ABOUT PAGE - Apply same white border fix as app page */
    .about-page {
        background-image: url('../assets/web_bloom_background_tablet.jpg') !important;
        background-size: 100vw 100vh !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        
        /* Same viewport units as app page */
        min-height: 100lvh !important;
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        width: 100% !important;
        
        /* Same layout fixes */
        margin: 0 !important;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
        
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Fix About page header in landscape mode - make it scroll with content */
    .about-page .page-header {
        position: static !important;
        top: auto !important;
        margin-top: 40px !important;
        margin-bottom: 20px !important;
    }
    
    /* Fix About page intro spacing in landscape mode - same as mobile portrait */
    .about-intro {
        margin: 0 auto 0px auto !important;
        padding: 0 10px !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-130px) !important;
        max-width: 600px !important; /* Smaller max-width for compact landscape */
    }
    
    /* Fix About page carousel spacing in landscape mode - pull closer to intro */
    .about-page .hero-section {
        margin-top: -120px !important;
    }
    
    /* CONTACT PAGE - Apply same pseudo-element fix as home page */
    .contact-page {
        /* Same viewport fixes as app page */
        min-height: 100lvh !important;
        min-height: 100dvh !important;
        min-height: -webkit-fill-available !important;
        width: 100% !important;
        margin: 0 !important;
        padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0) !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    
    
    /* Fix carousel container to prevent overflow */
    .app-carousel-section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        padding: 0 5px !important;
    }
    
    .app-carousel-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Force all child elements to respect container width */
    .app-page * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
} /* End landscape iOS Safari fix */





/* Resume mobile portrait styles */
@media (max-width: 767px) and (orientation: portrait) {
    /* Contact page mobile styles */
    .contact-methods {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin: 30px auto 40px auto;
        padding: 0 20px;
    }
    
    .contact-card {
        width: 100%;
        max-width: 350px;
        min-width: auto;
    }
    
    .contact-form-section {
        margin: 0 auto;
        padding: 20px;
        max-width: calc(100% - 40px);
        width: 100%;
        box-sizing: border-box;
    }
    
    .contact-form {
        max-width: 100%;
    }
    
    /* Fix contact page positioning on mobile */
    body:has(.contact-section) .main-content {
        min-height: auto;
        align-items: flex-start;
        padding-top: 80px; /* Push content down from top */
    }
    
    body:has(.contact-section) .page-header {
        margin-top: 20px;
        margin-bottom: 30px;
    }
    
    body:has(.contact-section) .page-title {
        font-size: 48px;
    }
    
    body:has(.contact-section) .page-subtitle {
        font-size: 16px;
        margin-bottom: 20px;
    }

    /* About page mobile styles */
    /* .about-page {
        position: relative;
        -webkit-overflow-scrolling: touch; 
    } */

    /* .about-page::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh; 
        background-image: url('../assets/web_bloom_background_mobile_1.jpg');
        background-size: 100vw 100vh; 
        background-position: center top;
        background-repeat: no-repeat;
        background-attachment: scroll;
        z-index: -1;
    } */

    .about-page .page-header {
        position: static !important;
        top: auto !important;
        margin-top: 120px !important;
        margin-bottom: 0px !important;
    }

    .about-page .line-decoration {
        margin: 1px 0 5px 0 !important;
    }

    .about-page .page-title {
        font-size: 42px !important;
        margin-bottom: 1px !important;
    }

    .about-page .main-content {
        padding-top: 40px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 30px !important; /* Just enough bottom padding for smooth scrolling */
    }

    .about-intro {
        margin: 0 auto 0px auto !important; /* Removed bottom margin completely */
        padding: 0 10px !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-100px) !important;
    }

    .intro-text {
        padding: 20px 25px; /* Reduced from 25px 30px for smaller container */
    }

    .intro-text p {
        font-size: 15px; /* Slightly smaller font */
        line-height: 1.4; /* Tighter line height */
    }

    .carousel-container {
        padding: 30px 20px; /* Restored vertical padding for rounded corners */
        gap: 15px;
        max-width: 100%;
        margin: 0 auto;
        overflow: visible !important; /* Allow border-radius and effects to show */
    }

    .carousel-wrapper {
        height: auto !important;
  min-height: unset !important;
  overflow: visible;
    }

    .about-page .hero-section {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -60px !important; /* Pull carousel section closer to intro */
    }

    

    .carousel-track {
        display: flex;
        
        gap: 15px;
        transition: transform 0.5s ease;
    }

    .carousel-card {
        width: 240px;
        padding: 25px 15px 15px;
        box-sizing: border-box;
    }

    .carousel-card.active {
        width: 240px;
        transform: scale(1.0) !important; /* Reduced scale for better fit */
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(0px) !important;
        box-shadow: 0 10px 30px rgba(139, 75, 59, 0.15) !important;
        mix-blend-mode: normal !important;
    }

    /* Ensure mobile override with higher specificity */
    .about-page .carousel-card.active {
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: blur(0px) !important;
        box-shadow: 0 10px 30px rgba(139, 75, 59, 0.15) !important;
        mix-blend-mode: normal !important;
    }

    .card-title {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .card-content {
        font-size: 16px;
        margin-bottom: 35px;
    }
    
    /* Privacy Policy Page - Mobile Portrait */
    body.privacy-page .page-header {
        position: static !important;
        top: auto !important;
        margin-top: 120px !important;
        margin-bottom: 0px !important;
    }
    
    body.privacy-page .line-decoration {
        margin: 1px 0 5px 0 !important;
    }
    
    body.privacy-page .page-title {
        font-size: 42px !important;
        margin-bottom: 1px !important;
    }
    
    body.privacy-page .main-content {
        padding-top: 40px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 30px !important;
    }
    
    body.privacy-page .about-intro {
        margin: 0 auto 0px auto !important;
        padding: 0 10px !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-20px) !important;
    }
    
    body.privacy-page .intro-text {
        padding: 20px 25px;
    }
    
    body.privacy-page .intro-text p {
        font-size: 15px;
        line-height: 1.4;
    }
    
    body.privacy-page .intro-text h2 {
        font-size: 22px !important;
        margin: 25px 0 15px 0 !important;
    }
    
    body.privacy-page .intro-text h3 {
        font-size: 18px !important;
        margin: 20px 0 10px 0 !important;
    }
    
    /* Terms & Conditions Page - Mobile Portrait */
    body.terms-page .page-header {
        position: static !important;
        top: auto !important;
        margin-top: 120px !important;
        margin-bottom: 0px !important;
    }
    
    body.terms-page .line-decoration {
        margin: 1px 0 5px 0 !important;
    }
    
    body.terms-page .page-title {
        font-size: 38px !important;
        margin-bottom: 1px !important;
    }
    
    body.terms-page .main-content {
        padding-top: 40px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 30px !important;
    }
    
    body.terms-page .about-intro {
        margin: 0 auto 0px auto !important;
        padding: 0 10px !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-10px) !important;
    }
    
    body.terms-page .intro-text {
        padding: 20px 25px;
    }
    
    body.terms-page .intro-text p {
        font-size: 15px;
        line-height: 1.4;
    }
    
    body.terms-page .intro-text h2 {
        font-size: 22px !important;
        margin: 25px 0 15px 0 !important;
    }
    
    body.terms-page .intro-text h3 {
        font-size: 18px !important;
        margin: 20px 0 10px 0 !important;
    }
}

/* Extra small mobile devices (iPhone 13 mini, iPhone SE, etc.) - LANDSCAPE ONLY */
@media (max-width: 389px) and (orientation: landscape) {
    /* App page carousel cards - make them smaller for extra small landscape screens */
    .carousel-card {
        width: 200px !important; /* Smaller width for tiny screens */
        padding: 20px 12px 12px !important; /* Reduced padding */
        box-sizing: border-box;
    }

    .carousel-card.active {
        width: 200px !important; /* Keep same size for active card on small screens */
        transform: scale(1.0) !important; /* No scaling to prevent overflow */
    }

    /* Adjust carousel container for extra small screens */
    .app-carousel-container,
    .carousel-container {
        padding: 20px 10px !important; /* Less horizontal padding */
        max-width: 100% !important;
        overflow: visible !important;
    }

    .carousel-wrapper {
        width: 100% !important;
        margin: 0 auto;
        overflow: hidden !important;
    }

    .carousel-track {
        display: flex;
        gap: 10px !important; /* Smaller gap between cards */
        transition: transform 0.5s ease;
    }

    /* Also make card content smaller */
    .card-title {
        font-size: 22px !important; /* Smaller title */
        margin-bottom: 12px !important;
    }

    .card-content {
        font-size: 14px !important; /* Smaller content text */
        margin-bottom: 20px !important;
        line-height: 1.5 !important;
    }

    /* Ensure card flowers don't overflow */
    .card-flower {
        width: 35px !important; /* Smaller flower decorations */
        height: 35px !important;
    }
}

/* Medium mobile devices (iPhone 11, iPhone 12, etc.) - between extra small phones and small tablets */
@media (max-width: 767px) and (min-width: 390px) and (orientation: portrait) {
    /* Direct class targeting for iPhone 11 and similar sized devices */
    .progress-page .page-title {
        font-size: 52px !important; /* Bigger title for iPhone 11 - force override */
        margin-bottom: 15px !important;
        margin-top: -20px !important;
    }
    
    .progress-page .page-subtitle {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }
    
    .progress-page .upload-area {
        max-width: 350px !important;
        padding: 30px 25px !important;
        min-height: 200px !important;
    }
    
    .progress-page .page-header {
        margin-bottom: 40px !important; /* Keep original spacing for iPhone 11 */
    }
    
    /* Final mobile carousel override - highest priority */
    .about-page .carousel-card.active {
        transform: scale(1.1) !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.1) !important; /* Higher opacity for real devices */
        backdrop-filter: blur(0px) !important;
        /* Fallback for devices that don't support backdrop-filter well */
        background-image: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.05) 0%, 
            rgba(255, 255, 255, 0.05) 100%) !important;
        box-shadow: 0 10px 30px rgba(139, 75, 59, 0.2) !important; /* Only main shadow */
        mix-blend-mode: normal !important;
        width: 240px !important;
        position: relative !important;
        z-index: 5 !important;
    }
    
    /* Mobile flower size adjustments - iPhone 11 */
    .card-flower.flower-1 {
        width: 30px !important; /* Smaller size for mobile */
    }

    .card-flower.flower-2 {
        width: 35px !important; /* Smaller size for mobile */
    }

    .card-flower.flower-3 {
        width: 35px !important; /* Smaller size for mobile */
    }
    
    /* iPhone 11 specific active navigation button override */
    .nav-btn.active {
        background: rgba(218, 165, 32, 0.3) !important; /* Higher opacity to override green base */
        background-image: none !important; /* Remove any background gradients */
        border-color: rgba(218, 165, 32, 0.8) !important; /* Stronger border */
        color: rgba(245, 245, 245, 0.95) !important; /* Higher text opacity */
        font-family: 'Refinest', 'Inter', sans-serif !important;
        font-size: 18px !important;
        font-weight: 300 !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        /* Force override the base green background */
        box-shadow: inset 0 0 0 1000px rgba(218, 165, 32, 0.3) !important; /* Overlay technique to completely cover green */
    }
}

/* Medium devices (iPhone 11, iPhone 12, etc.) - Unified background solution for all pages */
/* @media (max-width: 767px) and (min-width: 390px) and (orientation: portrait) { */
  
  /* html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100dvh; 
    height: 100lvh;
    height: -webkit-fill-available;
    height: 100vh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  } */

  /* Apply background to body ONLY on home page using pseudo-element */
  /* body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(:has(.progress-container)):not(:has(.app-container)):not(:has(.contact-section)) {
    background-image: none !important;
    position: relative !important;
    min-height: 100dvh;
    min-height: 100lvh;
    min-height: -webkit-fill-available;
    min-height: 100vh;
  }

  body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(:has(.progress-container)):not(:has(.app-container)):not(:has(.contact-section))::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    height: 100lvh;
    height: -webkit-fill-available;
    height: 100vh;
    background-image: url('../assets/web_bloom_background_mobile_portrait_1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
  } */
  

  /* Other pages (e.g. About, App, Contact) get a unified mobile background */
  /* .progress-page,
  .app-page,
  .about-page,
  .contact-page,
  body:has(.progress-container),
  body:has(.app-container),
  body:has(.contact-section) {
    background-image: url('../assets/web_bloom_background_mobile_1.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;

    min-height: 100dvh !important;
    min-height: 100lvh !important;
    min-height: -webkit-fill-available !important;
    min-height: 100vh !important;
    width: 100% !important;
    position: relative !important;
    overflow-y: auto !important;
  }
}    */


@media (max-width: 767px) and (min-width: 390px) and (orientation: portrait) {
  
  /* iOS Safari viewport fix - reset html and body properly */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
    box-sizing: border-box;
    background-color: transparent !important;
  }

  /* UNIVERSAL FIXED BACKGROUND SOLUTION - All pages use background-layer div with JavaScript height control */
  
  /* HOME PAGE - Fixed background div with scrollable content */
  body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) {
    background-image: none !important;
    background-color: transparent !important;
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow-y: auto !important;
  }

  /* ABOUT PAGE - Browser UI collapse friendly (body scrolling) */
  .about-page {
    background-image: none !important;
    background-color: transparent !important;
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow-y: auto !important; /* Allow body scrolling for browser UI collapse */
    overflow-x: hidden !important;
  }

  .about-page .main-content {
    position: relative !important;
    min-height: 100vh !important; /* Use min-height instead of fixed height */
    width: 100% !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    /* Remove scrolling container - let body handle scrolling */
  }

  /* PROGRESS PAGE - Fixed background with scrollable content container */
  .progress-page {
    background-image: none !important;
    background-color: transparent !important;
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important; /* Prevent body scrolling */
  }

  .progress-page .main-content {
    position: relative !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: 100lvh !important;
    height: -webkit-fill-available !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1 !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateZ(0) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* APP PAGE - Fixed background with scrollable content container */
  .app-page {
    background-image: none !important;
    background-color: transparent !important;
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow: hidden !important; /* Prevent body scrolling */
  }

  .app-page .main-content {
    position: relative !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: 100lvh !important;
    height: -webkit-fill-available !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 1 !important;
    -webkit-overflow-scrolling: touch !important;
    transform: translateZ(0) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* CONTACT PAGE - Browser UI collapse friendly (body scrolling) */
  .contact-page {
    background-image: none !important;
    background-color: transparent !important;
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    overflow-y: auto !important; /* Allow body scrolling for browser UI collapse */
    overflow-x: hidden !important;
  }

  .contact-page .main-content {
    position: relative !important;
    min-height: 100vh !important; /* Use min-height instead of fixed height */
    width: 100% !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    /* Remove scrolling container - let body handle scrolling */
  }

  /* UNIVERSAL FIXED BACKGROUND LAYER - JavaScript will handle dynamic height */
  .background-layer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  /* Home page gets different background image */
  body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(.privacy-page):not(.terms-page) .background-layer {
    background-image: url('../assets/web_bloom_background_mobile_portrait_1.jpg') !important;
  }

  /* All other pages get standard mobile background */
  .app-page .background-layer,
  .progress-page .background-layer,
  .about-page .background-layer,
  .contact-page .background-layer,
  .privacy-page .background-layer,
  .terms-page .background-layer {
    background-image: url('../assets/web_bloom_background_mobile_portrait_2.jpg') !important;
  }

  /* HOME PAGE - CTA section bottom spacing for medium phone portrait */
  body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .cta-section {
    margin-bottom: 80px !important; /* Add space below CTA section */
  }

}


/* Tablet devices (iPad Mini, iPad Air, iPad Pro, Surface Pro) - 768px to 1023px */
/* UPDATED: Target portrait mode OR landscape with sufficient height (avoids phone landscape conflict) */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait){
       /* (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) and (min-height: 501px) { */
    
    /* UNIVERSAL BACKGROUND LAYER SYSTEM - Standard Tablets */
    /* All pages use JavaScript-managed background-layer div instead of unreliable ::before */
    
    /* HOME PAGE */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* ABOUT PAGE */
    .about-page {
        background-image: none !important;
        background-color: transparent !important;
        background-size: auto !important; /* Override global background-size: cover */
        background-position: initial !important; /* Override global background-position */
        background-attachment: scroll !important; /* Override global background-attachment: fixed */
        background-repeat: no-repeat !important; /* Override any global background-repeat */
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* PROGRESS PAGE */
    .progress-page {
        background-image: none !important;
        background-color: transparent !important;
        background-size: auto !important; /* Override global background-size: cover */
        background-position: initial !important; /* Override global background-position */
        background-attachment: scroll !important; /* Override global background-attachment: fixed */
        background-repeat: no-repeat !important; /* Override any global background-repeat */
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* APP PAGE */
    .app-page {
        background-image: none !important;
        background-color: transparent !important;
        background-size: auto !important; /* Override global background-size: cover */
        background-position: initial !important; /* Override global background-position */
        background-attachment: scroll !important; /* Override global background-attachment: fixed */
        background-repeat: no-repeat !important; /* Override any global background-repeat */
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* CONTACT PAGE */
    .contact-page {
        background-image: none !important;
        background-color: transparent !important;
        background-size: auto !important; /* Override global background-size: cover */
        background-position: initial !important; /* Override global background-position */
        background-attachment: scroll !important; /* Override global background-attachment: fixed */
        background-repeat: no-repeat !important; /* Override any global background-repeat */
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* UNIVERSAL BACKGROUND LAYER - JavaScript creates and manages height */
    .background-layer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
         min-height: 100lvh !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    /* Home page gets different background image */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(.privacy-page):not(.terms-page) .background-layer {
        background-image: url('../assets/web_bloom_background_tablet_portrait.jpg') !important;
    }

    /* All other pages get standard tablet background */
    .app-page .background-layer,
    .progress-page .background-layer,
    .about-page .background-layer,
    .contact-page .background-layer,
    .privacy-page .background-layer,
    .terms-page .background-layer {
        background-image: url('../assets/web_bloom_background_tablet_portrait_1.jpg') !important;
    }

    /* MAIN CONTENT CONTAINER ADJUSTMENTS FOR STANDARD TABLETS */
    /* Ensure Privacy/Terms content clears the fixed header on tablets (portrait) */
    .privacy-page .main-content,
    .terms-page .main-content {
        padding-top: 160px !important; /* Prevent overlay beneath header */
    }
    
    /* About page - body scrolling for browser UI collapse */
    .about-page .main-content {
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
    }

    /* Progress page - scrollable content container */
    .progress-page .main-content {
        position: relative !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* App page - scrollable content container */
    .app-page .main-content {
        position: relative !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Contact page - body scrolling for browser UI collapse */
    .contact-page .main-content {
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
    }
    
    /* Tablet-optimized carousel sizing */
    .carousel-card {
        width: 280px !important; 
        padding: 30px 20px 20px !important;
        margin: 0 15px !important;
    }
    
    .carousel-card.active {
        transform: scale(1.05) !important; /* Subtle scaling for tablets */
    }
    
    /* Adjust carousel container for tablets */
    /* .app-carousel-container,
    .carousel-container {
        padding: 40px 30px !important;
        max-width: 90% !important;
    }
    
    .carousel-track {
        gap: 20px !important; 
    } */
    
    /* Tablet typography */
    .card-title {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }
    
    .card-content {
        font-size: 16px !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
    }
    
    /* Page header adjustments for tablets */
    .app-page .page-header {
        margin-bottom: 50px !important;
        padding-top: 30px !important;
    }
    
    .app-page .page-title {
        font-size: 64px !important; 
        margin-bottom: 20px !important;
    }
    
    .app-page .page-subtitle {
        font-size: 30px !important;
        margin-bottom: 30px !important;
    }
    
    /* About Page Header adjustments for tablets */
    .about-page .page-header {
        top: 30px !important; /* Lower the header position */
        transform: translateY(80px) !important; /* Move header down from top */
    }
    
    /* About Intro Container - reduce gap from header for tablets */
    .about-intro {
        margin-top: 40px !important; /* Pull intro container up to reduce gap */
        transform: translateY(100px) !important; /* Adjust upward positioning */
    }
    
    /* About page flower decorations - tablet size adjustments */
    .about-page .card-flower.flower-1 {
        width: 25px !important; /* Smaller than desktop, larger than mobile landscape */
    }

    .about-page .card-flower.flower-2 {
        width: 30px !important; /* Smaller than desktop, larger than mobile landscape */
    }

    .about-page .card-flower.flower-3 {
        width: 30px !important; /* Smaller than desktop, larger than mobile landscape */
    }

     .navbar {
        top: 20px;
        right: 20px;
        z-index: 1001; /* Higher z-index to ensure visibility */
    }
    
    .hamburger-menu {
        width: 60px !important;
        height: 60px !important;
        background: rgba(255, 255, 255, 0.15) !important; /* Slightly more opaque for real devices */
        border: 2px solid rgba(255, 255, 255, 0.4) !important; /* More visible border */
        backdrop-filter: blur(0px) !important;
        box-shadow: none !important;
    }
    
    .hamburger-menu:hover {
        background: rgba(255, 255, 255, 0.35) !important; /* More opaque for real devices */
        border-color: rgba(255, 255, 255, 0.6) !important; /* More visible border */
        transform: scale(1.05) !important;
    }
    
    .hamburger-line {
        background-color: rgba(231, 231, 231, 0.8) !important; /* More opaque lines for real devices */
        width: 40px !important;
        height: 2px !important;
        box-shadow: none !important;
    }
    
    .nav-menu {
        top: 70px !important;
        right: -300px !important;
        width: 280px !important;
        background: rgba(65, 65, 65, 0.4) !important; /* More opaque background for real devices */
        backdrop-filter: blur(0px) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important; /* More visible border */
        border-radius: 15px !important; /* Same as desktop */
        box-shadow: -5px 0 20px rgba(139, 75, 59, 0.2) !important; /* Same as desktop */
    }
    
    .nav-menu.active {
        right: 0 !important;
    }
    
    /* Override desktop nav-btn styles for mobile */
    .nav-btn {
        background: rgba(22, 94, 40, 0.3) !important; /* Same as desktop */
        border: 0px solid rgba(0, 0, 0, 0.3) !important; /* Same as desktop */
        border-radius: 15px !important; /* Same as desktop */
        padding: 10px 25px !important; /* Same as desktop */
        color: #c4c4c4 !important; /* Same as desktop */
        text-decoration: none !important;
        font-family: 'Refinest', 'Inter', sans-serif !important;
        font-size: 16px !important; /* Same as desktop */
        font-weight: 300 !important; /* Same as desktop */
        transition: all 0.3s ease !important;
        text-align: center !important;
        backdrop-filter: blur(0px) !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .nav-btn:hover {
        background: rgba(112, 3, 201, 0.151) !important; /* Same as desktop */
        border-color: rgba(0, 0, 0, 0.5) !important; /* Same as desktop */
        transform: translateX(-5px) !important; /* Same as desktop */
        box-shadow: 5px 5px 15px rgba(139, 75, 59, 0.2) !important; /* Same as desktop */
    }

    .nav-btn.active {
        background: rgba(218, 165, 32, 0.25) !important; /* Same as desktop active */
        border-color: rgba(218, 165, 32, 0.6) !important; /* Same as desktop active */
        color: rgba(245, 245, 245, 0.85) !important; /* Same as desktop active */
        font-family: 'Refinest', 'Inter', sans-serif !important;
        font-size: 16px !important; /* Adjusted for mobile but keeping desktop font-size pattern */
        font-weight: 300 !important; /* Same as desktop active */
    }

     body.contact-page .page-title {
        font-size: 76px !important; /* Even smaller header for extra small landscape */
        margin-bottom: 5px !important; /* Reduced spacing for landscape */
    }
    
    body.contact-page .page-subtitle {
        font-size: 14px !important; /* Even smaller subtitle for landscape */
        margin-bottom: 15px !important; /* Reduced spacing */
    }
    
    body.contact-page .page-header {
        margin-top: 180px !important; /* Less top margin for landscape */
        margin-bottom: 12px !important; /* Reduced bottom margin */
    }
    
    body.contact-page .main-content {
        padding-top: 35px !important; /* Reduced top padding for landscape */
        padding-left: 8px !important; /* Consistent horizontal padding */
        padding-right: 8px !important;
    }
    
    /* Privacy & Terms Pages - Tablet Portrait */
    body.privacy-page .page-header,
    body.terms-page .page-header {
        position: relative !important;
        top: auto !important;
        margin-top: 160px !important; /* Push header down more from top */
    }
    
    body.privacy-page .main-content,
    body.terms-page .main-content {
        padding-top: 20px !important; /* Reduce since header is in flow */
    }
    
    body.privacy-page .about-intro,
    body.terms-page .about-intro {
        transform: translateY(-10px) !important; /* Pull content up to reduce gap */
        margin: 0 auto 60px auto !important; /* Override global margin */
        padding: 0 20px !important; /* Override global padding */
    }
    
    /* About page flower decorations - tablet portrait size adjustments */
    .about-page .card-flower.flower-1 {
        width: 26px !important; /* Slightly smaller for portrait orientation */
    }

    .about-page .card-flower.flower-2 {
        width: 29px !important; /* Slightly smaller for portrait orientation */
    }

    .about-page .card-flower.flower-3 {
        width: 28px !important; /* Slightly smaller for portrait orientation */
    }

    
}

/* Large tablet devices in portrait mode (iPad Pro 12.9", Surface Pro, etc.) - 1024px to 1279px */
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: portrait) {
    
    /* UNIVERSAL BACKGROUND LAYER SYSTEM - Large Tablet Portrait */
    /* All pages use JavaScript-managed background-layer div instead of unreliable ::before */
    
    /* HOME PAGE */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* ABOUT PAGE */
    .about-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100vw !important;
        overflow-y: auto !important;
    }

    /* PROGRESS PAGE */
    .progress-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* APP PAGE */
    .app-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* CONTACT PAGE */
    .contact-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* UNIVERSAL BACKGROUND LAYER - JavaScript creates and manages height */
    .background-layer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    /* Home page gets different background image */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(.privacy-page):not(.terms-page) .background-layer {
        background-image: url('../assets/web_bloom_background_tablet_portrait.jpg') !important;
    }

    /* All other pages get standard tablet background */
    .app-page .background-layer,
    .progress-page .background-layer,
    .about-page .background-layer,
    .contact-page .background-layer,
    .privacy-page .background-layer,
    .terms-page .background-layer {
        background-image: url('../assets/web_bloom_background_tablet_portrait_1.jpg') !important;
    }
    
    /* About Page Header adjustments for large tablet portrait - similar to tablet portrait but slightly larger */
    .about-page .page-header {
        top: 50px !important; /* Lower positioning for large portrait tablets */
        transform: translateY(130px) !important; /* Move header down from top */
        
    }
    
    /* About Intro Container - reduce gap from header for large tablet portrait */
    .about-intro {
        margin-top: -20px !important; /* Pull intro container up to reduce gap */
        transform: translateY(-220px) !important; /* Adjust upward positioning */
        max-width: 800px !important; /* Bigger container for large tablet portrait */
        padding: 0 30px !important; /* More horizontal padding for larger screen */
    }
    
    /* About Intro Text styling for large tablet portrait */
    .about-intro .intro-text {
        padding: 30px 40px !important; /* More generous padding for large tablet */
    }
    
    .about-intro .intro-text p {
        font-size: 26px !important; /* Larger text for large tablet portrait */
        line-height: 1.5 !important; /* More comfortable line height */
    }
    
    /* About page title size adjustment for large tablets */
    .about-page .page-title {
        font-size: 78px !important; /* Between tablet and desktop size */
        margin-bottom: 15px !important;
    }

    /* About Page Header adjustments for tablet portrait - bring header down significantly */
    .about-page .page-header {
        top: 80px !important; /* Much lower positioning for portrait tablets */
        transform: translateY(100px) !important; /* Additional downward movement */
    }
    
    /* About Intro Container - reduce gap from header for tablet portrait */
    .about-intro {
        margin-top: 10px !important; /* Pull intro container up more to reduce large gap */
        transform: translateY(-10px) !important; /* Less upward positioning than landscape */
    }
    
    
    /* About page flower decorations - large tablet portrait size adjustments */
    .about-page .card-flower.flower-1 {
        width: 30px !important; /* Between tablet and desktop size */
    }

    .about-page .card-flower.flower-2 {
        width: 35px !important; /* Between tablet and desktop size */
    }

    .about-page .card-flower.flower-3 {
        width: 35px !important; /* Between tablet and desktop size */
    }

     .app-page .page-header {
        margin-bottom: 50px !important;
        padding-top: 30px !important;
        margin-top: 20px !important;
    }
    
    .app-page .page-title {
        font-size: 84px !important; 
        margin-bottom: 20px !important;
    }
    
    .app-page .page-subtitle {
        font-size: 30px !important;
        margin-bottom: 30px !important;
    }
    
    /* Privacy & Terms Pages - Large Tablet Portrait */
    body.privacy-page .page-header,
    body.terms-page .page-header {
        position: relative !important;
        top: auto !important;
        margin-top: 240px !important; /* Push header down from top */
    }
    
    body.privacy-page .main-content,
    body.terms-page .main-content {
        padding-top: 20px !important; /* Reduced since header is in flow */
    }
    
    body.privacy-page .about-intro,
    body.terms-page .about-intro {
        transform: translateY(-20px) !important; /* Pull content up to reduce gap - same as regular tablet portrait */
        margin: 0 auto 60px auto !important; /* Override global margin */
        padding: 0 20px !important; /* Override global padding */
    }
}

/* Tablet devices in landscape mode - BACKGROUND-LAYER SYSTEM */
/* Uses JavaScript-managed background-layer div instead of conflicting ::before approach */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) and (min-height: 501px) {
    
    /* UNIVERSAL BACKGROUND LAYER SYSTEM - Tablet Landscape */
    /* All pages use JavaScript-managed background-layer div instead of unreliable ::before */
    
    /* HOME PAGE */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* ABOUT PAGE */
    .about-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* PROGRESS PAGE */
    .progress-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* APP PAGE */
    .app-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* CONTACT PAGE */
    .contact-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* UNIVERSAL BACKGROUND LAYER - JavaScript creates and manages height */
    .background-layer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    /* Home page gets different background image */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(.privacy-page):not(.terms-page) .background-layer {
        background-image: url('../assets/web_bloom_background_tablet_1.jpg') !important;
    }

    /* All other pages get standard tablet background */
    .app-page .background-layer,
    .progress-page .background-layer,
    .about-page .background-layer,
    .contact-page .background-layer,
    .privacy-page .background-layer,
    .terms-page .background-layer {
        background-image: url('../assets/web_bloom_background_tablet.jpg') !important;
    }
    
    /* Fix carousel overflow in landscape mode */
    .app-carousel-container {
        overflow: hidden !important;
        width: 100% !important;
    }
    
    .app-carousel-track {
        gap: 15px !important;
    }


    .card-title {
        font-size: 28px !important;
        margin-bottom: 15px !important;
    }
    
    .card-content {
        font-size: 16px !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
    }
    
    /* Page header adjustments for tablets */
    .app-page .page-header {
        margin-bottom: 50px !important;
        padding-top: 30px !important;
    }
    
    .app-page .page-title {
        font-size: 64px !important; 
        margin-bottom: 20px !important;
    }
    
    .app-page .page-subtitle {
        font-size: 30px !important;
        margin-bottom: 30px !important;
    }
    
    /* About Page Header adjustments for tablets */
    .about-page .page-header {
        top: 30px !important; /* Lower the header position */
        transform: translateY(80px) !important; /* Move header down from top */
    }
    
    /* Privacy & Terms Pages - Tablet Landscape */
    body.privacy-page .page-header,
    body.terms-page .page-header {
        position: relative !important;
        top: auto !important;
        margin-top: 60px !important; /* Push header down from top */
    }
    
    body.privacy-page .main-content,
    body.terms-page .main-content {
        padding-top: 20px !important; /* Reduced since header is in flow */
    }
    
    body.privacy-page .about-intro,
    body.terms-page .about-intro {
        transform: translateY(-40px) !important; /* Pull content up to reduce gap - slightly more than portrait */
        margin: 0 auto 60px auto !important; /* Override global margin */
        padding: 0 20px !important; /* Override global padding */
    }
    
    /* About Intro Container - reduce gap from header for tablets */
    .about-intro {
        margin-top: 40px !important; /* Pull intro container up to reduce gap */
        transform: translateY(-120px) !important; /* Adjust upward positioning */
    }
    
    /* About page flower decorations - tablet size adjustments */
    .about-page .card-flower.flower-1 {
        width: 25px !important; /* Smaller than desktop, larger than mobile landscape */
    }

    .about-page .card-flower.flower-2 {
        width: 30px !important; /* Smaller than desktop, larger than mobile landscape */
    }

    .about-page .card-flower.flower-3 {
        width: 30px !important; /* Smaller than desktop, larger than mobile landscape */
    }

    /*Contact Page Header adjustments for tablets */

    body.contact-page .page-title {
        font-size: 76px !important; /* Even smaller header for extra small landscape */
        margin-bottom: 5px !important; /* Reduced spacing for landscape */
    }
    
    body.contact-page .page-subtitle {
        font-size: 14px !important; /* Even smaller subtitle for landscape */
        margin-bottom: 15px !important; /* Reduced spacing */
    }
    
    body.contact-page .page-header {
        margin-top: 80px !important; /* Less top margin for landscape */
        margin-bottom: 12px !important; /* Reduced bottom margin */
    }
    
    body.contact-page .main-content {
        padding-top: 35px !important; /* Reduced top padding for landscape */
        padding-left: 8px !important; /* Consistent horizontal padding */
        padding-right: 8px !important;
    }

    /* Progress Page Header adjustments for tablets */

     body.progress-page .page-title {
        font-size: 60px !important; /* Even smaller header for extra small landscape */
        margin-bottom: 5px !important; /* Reduced spacing for landscape */
    }
    
    body.progress-page .page-subtitle {
        font-size: 18px !important; /* Even smaller subtitle for landscape */
        margin-bottom: 12px !important; /* Reduced spacing */
    }
    
    body.progress-page .page-header {
        margin-top: 50px !important; /* Less top margin for landscape */
        margin-bottom: 12px !important; /* Reduced bottom margin */
    }

    /* App Page Header adjustments for tablets */

     body.app-page .page-header {
        margin-bottom: 50px !important;
        padding-top: 30px !important;
        margin-top: -30px !important;
    }

    body.app-page .page-title {
        font-size: 68px !important; /* Even smaller header for extra small landscape */
        margin-bottom: 5px !important; /* Reduced spacing for landscape */
    }
    
    body.app-page .page-subtitle {
        font-size: 18px !important; /* Even smaller subtitle for landscape */
        margin-bottom: 15px !important; /* Reduced spacing */
    }
    
    
    
    body.app-page .main-content {
        padding-top: 35px !important; /* Reduced top padding for landscape */
        padding-left: 8px !important; /* Consistent horizontal padding */
        padding-right: 8px !important;
    }

    /* Carousel adjustments for extra small landscape */

    body.app-page .app-carousel-section {
        padding: 0 5px !important; /* Reduced horizontal padding */
    }
    
    body.app-page .carousel-navigation {
        gap: 6px !important; /* Even smaller gap for extra small landscape */
        margin-bottom: 12px !important; /* Less margin for extra small landscape */
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body.app-page .app-carousel-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        display: flex !important;
        justify-content: flex-start !important; /* Override desktop centering */
    }
    
    body.app-page .app-card {
        width: 220px !important; /* Even smaller cards for landscape */
        height: 320px !important; /* Shorter height for landscape */
    }
    
    body.app-page .app-carousel-track {
        gap: 8px !important; /* Even smaller gap between cards */
    }
    
    body.app-page .carousel-arrow {
        width: 25px !important; /* Even smaller navigation arrows */
        height: 25px !important;
    }
    
    body.app-page .app-card-front {
        padding: 10px !important; /* Reduced padding */
    }
    
    body.app-page .app-card-back {
        padding: 12px !important; /* Reduced padding */
    }
    
    body.app-page .card-text-content h3 {
        font-size: 16px !important; /* Even smaller title text */
        margin-bottom: 8px !important;
    }
    
    body.app-page .card-text-content p {
        font-size: 12px !important; /* Even smaller paragraph text */
        line-height: 1.2 !important; /* Tighter line height */
        margin-bottom: 6px !important;
    }

    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .logo {
        font-size: clamp(240px, 60vw, 170px) !important;   /* Bigger logo for home page */
        padding: clamp(15px, 5vw, 28px) clamp(22px, 7vw, 35px) !important; /* Adjusted padding */
        margin-top: 90px !important; /* More space from top on home page */
    }

    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) .cta-section {
    margin-bottom: 80px !important; /* Add space below CTA section */
  }
    
    
}

/* Extra small devices (iPhone 13 mini and smaller) - PORTRAIT ONLY */
@media (max-width: 389px) and (orientation: portrait) {
    
    /* iOS Safari viewport fix - reset html and body properly */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
        position: relative;
        box-sizing: border-box;
    }

    /* UNIVERSAL FIXED BACKGROUND SOLUTION - All pages use background-layer div with JavaScript height control */
    
    /* HOME PAGE - Fixed background div with scrollable content */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page) {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important;
    }

    /* ABOUT PAGE - Browser UI collapse friendly (body scrolling) */
    .about-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important; /* Allow body scrolling for browser UI collapse */
        overflow-x: hidden !important;
    }

    .about-page .main-content {
        position: relative !important;
        min-height: 100vh !important; /* Use min-height instead of fixed height */
        width: 100% !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        /* Remove scrolling container - let body handle scrolling */
    }

    /* PROGRESS PAGE - Browser UI collapse friendly (body scrolling) */
    .progress-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important; /* Allow body scrolling for browser UI collapse */
        overflow-x: hidden !important;
    }

    .progress-page .main-content {
        position: relative !important;
        min-height: 100vh !important; /* Use min-height instead of fixed height */
        width: 100% !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        /* Remove scrolling container - let body handle scrolling */
    }

    /* APP PAGE - Browser UI collapse friendly (body scrolling) */
    .app-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important; /* Allow body scrolling for browser UI collapse */
        overflow-x: hidden !important;
    }

    .app-page .main-content {
        position: relative !important;
        min-height: 100vh !important; /* Use min-height instead of fixed height */
        width: 100% !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        /* Remove scrolling container - let body handle scrolling */
    }

    /* CONTACT PAGE - Browser UI collapse friendly (body scrolling) */
    .contact-page {
        background-image: none !important;
        background-color: transparent !important;
        position: relative !important;
        min-height: 100vh !important;
        width: 100% !important;
        overflow-y: auto !important; /* Allow body scrolling for browser UI collapse */
        overflow-x: hidden !important;
    }

    .contact-page .main-content {
        position: relative !important;
        min-height: 100vh !important; /* Use min-height instead of fixed height */
        width: 100% !important;
        z-index: 1 !important;
        box-sizing: border-box !important;
        /* Remove scrolling container - let body handle scrolling */
    }

    /* UNIVERSAL FIXED BACKGROUND LAYER - JavaScript will handle dynamic height */
    .background-layer {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        z-index: -1 !important;
        pointer-events: none !important;
    }

    /* Home page gets different background image */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(.privacy-page):not(.terms-page) .background-layer {
        background-image: url('../assets/web_bloom_background_mobile_portrait_1.jpg') !important;
    }

    /* All other pages get standard mobile background */
    .app-page .background-layer,
    .progress-page .background-layer,
    .about-page .background-layer,
    .contact-page .background-layer,
    .privacy-page .background-layer,
    .terms-page .background-layer {
        background-image: url('../assets/web_bloom_background_mobile_portrait_2.jpg') !important;
    }
    
    /* Home page specific styling for extra small portrait screens */
    body:not(.progress-page):not(.app-page):not(.about-page):not(.contact-page):not(.privacy-page):not(.terms-page) .logo {
        font-size: clamp(100px, 40vw, 130px) !important;   /* Bigger logo for home page */
        padding: clamp(15px, 5vw, 28px) clamp(22px, 7vw, 35px) !important; /* Adjusted padding */
        margin-top: 90px !important; /* More space from top on home page */
    }
    
    .logo {
        font-size: clamp(60px, 15vw, 70px) !important;   /* Smaller logo for extra small screens */
        padding: clamp(15px, 4vw, 25px) clamp(20px, 6vw, 30px) !important; /* Reduced padding */
        margin: 0 !important;                /* Remove margins that might cause overflow */
        margin-top: 20px !important; /* Push logo down from very top */
    }
    
    /* CTA button styling for extra small portrait screens */
    .cta-button {
        padding: 8px 20px !important; /* Even smaller padding */
        font-size: 12px !important; /* Smaller font size */
        margin-top: 20px !important; /* Add some space above button */
    }
    
    .progress-page .page-header {
        margin-bottom: 20px !important; /* Reduced spacing for extra small screens */
        margin-top: 60px !important; /* Push header down from top to reduce cramping */
    }
    
    /* Specific progress page content fixes for iPhone 13 mini - reduce excessive padding */
    .progress-container {
        min-height: auto !important; /* Only expand when infographic is actually present */
        padding-bottom: 40px !important; /* Reduced padding to prevent unnecessary scrolling */
    }
    
    /* Ensure main content has appropriate spacing when infographic is present */
    .progress-page .main-content {
        padding-top: 20px !important; /* Reduce top padding to bring content up */
        padding-bottom: 40px !important; /* Reduced bottom padding */
    }
    
    /* Progress page header styling for extra small screens - better spacing */
    .progress-page .page-title {
        font-size: 36px !important;
        margin-top: 20px !important; /* Reduced margin to bring title closer to header */
        margin-bottom: 15px !important; /* More space below title */
    }
    
    .progress-page .page-subtitle {
        font-size: 16px !important;
        margin-top: 0px !important;
        margin-bottom: 25px !important; /* More space below subtitle */
    }
    
    .progress-page .upload-area {
        max-width: 300px !important; /* Slightly smaller width for very small screens */
        padding: 25px 15px !important; /* Reduced padding for better fit */
        min-height: 200px !important; /* Reduced height to fit better */
        aspect-ratio: unset !important; /* Remove square aspect ratio for flexibility */
        margin-top: 15px !important; /* Add space above upload area */
    }
    
    
    
    /* Visualization section extra small screens */
    .viz-title {
        font-size: 24px;
    }
    
    .download-btn,
    .reset-btn {
        font-size: 11px;
        padding: 8px 12px;
    }
    
    .header-buttons {
        flex-direction: column;
        width: 100%;
        gap: 8px;
    }
    
    .download-btn,
    .reset-btn {
        max-width: 200px;
        width: 100%;
    }
    
    /* App page extra small screens */
    .app-page .page-header {
        margin-top: 50px !important; /* Small positive margin to avoid clipping */
        margin-bottom: 15px !important; /* Reduce gap below header */
        padding-top: 60px !important; /* Minimal top padding */
    }
    
    .app-page .main-content {
        padding-top: 10px !important; /* Reduce main content top padding to bring header up */
    }
    
    .app-page .page-title {
        font-size: 32px;
        margin-bottom: 10px;
        margin-top: 0px !important; /* Remove any top margin from title */
        
    }
    
    .app-page .page-subtitle {
        font-size: 14px;
        margin-bottom: 25px;
    }
    
    .app-carousel-section {
        padding: 0 5px;
        position: relative; /* Make this a positioning context */
        min-height: 450px; /* Ensure enough height for arrows below */
        overflow: visible !important; /* Don't cut off arrows */
    }
    
    /* Modify carousel navigation layout for extra small screens */
    .carousel-navigation {
        /* Keep the container but change to relative positioning */
        position: relative;
        gap: 0 !important;
        margin-bottom: 15px;
        justify-content: center;
        overflow: visible !important; /* Don't cut off arrows */
    }
    
    /* Reposition the actual functional arrows */
    .carousel-navigation #prevBtn {
        position: absolute;
        left: -5px;
        top: 365px; /* Reduced from 375px to bring arrows up */
        width: 35px !important;
        height: 35px !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        z-index: 10;
    }
    
    .carousel-navigation #nextBtn {
        position: absolute;
        right: -5px;
        top: 365px; /* Reduced from 375px to bring arrows up */
        width: 35px !important;
        height: 35px !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: 2px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 50% !important;
        z-index: 10;
    }
    
    /* Hover effects for repositioned arrows */
    .carousel-navigation #prevBtn:hover,
    .carousel-navigation #nextBtn:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
        transform: scale(1.1) !important;
    }
    
    /* Keep the carousel container in its normal flow */
    .app-carousel-container {
        position: relative;
    }
    
    .app-card {
        width: 200px;
        height: 360px;
    }
    
    .app-card-back {
        padding: 15px;
    }
    
    .card-text-content h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .card-text-content p {
        font-size: 12px;
        line-height: 1.3;
    }
    
    /* Contact page extra small screen styles */
    .contact-methods {
        padding: 0 15px;
        gap: 15px;
        margin: 20px auto 30px auto;
    }
    
    .contact-card {
        padding: 20px 15px;
    }
    
    .contact-card h3 {
        font-size: 20px;
    }
    
    .contact-card p {
        font-size: 14px;
    }
    
    /* Fix contact page positioning on extra small screens */
    body:has(.contact-section) .main-content {
        padding-top: 60px;
    }
    
    body:has(.contact-section) .page-title {
        font-size: 36px;
        margin-bottom: 10px;
    }
    
    body:has(.contact-section) .page-subtitle {
        font-size: 14px;
        margin-bottom: 15px;
    }

    

    .about-page .page-header {
        position: static !important;
        top: auto !important;
        margin-top: 120px !important;
        margin-bottom: 5px !important; /* Increased spacing below header */
    }

    .about-page .line-decoration {
        margin: 1px 0 3px 0 !important;
    }

    .about-page .page-title {
        font-size: 42px !important;
        margin-bottom: 1px !important;
    }

    .about-page .main-content {
        padding-top: 30px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .about-intro {
        margin: 0 auto 0px auto !important; /* Removed bottom margin completely */
        padding: 0 5px !important;
        position: relative !important;
        z-index: 1 !important;
        transform: translateY(-70px) !important; /* Reduced negative transform for more space */
        max-width: 400px !important; /* Much smaller max-width for extra small screens */
    }

    .intro-text {
        padding: 12px 18px; /* Much smaller padding for extra small screens */
    }

    .intro-text p {
        font-size: 14px; /* Much smaller font for extra small screens */
        line-height: 1.2; /* Very tight line height for extra small screens */
    }

    .carousel-container {
        padding: 30px 10px !important; /* Consistent horizontal padding, let JavaScript handle centering */
        gap: 10px;
        max-width: 100%;
        margin: 0 auto;
        overflow: visible; /* Allow carousel effects to show */
        display: flex;
        justify-content: center; /* Center the carousel wrapper */
    }

    .carousel-wrapper {
        width: 100%;
        margin: 0;
        overflow: hidden;
    }

    .carousel-track {
        display: flex;
        gap: 10px; /* Match JavaScript gap value */
        transition: transform 0.5s ease;
        flex-wrap: nowrap;
        
    }

    .carousel-card {
        width: 220px; /* Match JavaScript cardWidth value */
        padding: 20px 12px 12px;
        box-sizing: border-box;
    }

    .carousel-card.active {
        width: 220px; /* Match JavaScript cardWidth value */
        transform: scale(1.05) !important; /* Slightly larger for visibility */
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.4) !important; /* More visible background */
        backdrop-filter: blur(5px) !important;
        box-shadow: 0 15px 40px rgba(139, 75, 59, 0.3) !important; /* Stronger shadow */
        mix-blend-mode: normal !important;
        border: 2px solid rgba(139, 75, 59, 0.4) !important; /* Add border for visibility */
    }

    /* Ensure mobile override with higher specificity */
    .about-page .carousel-card.active {
        transform: scale(1.05) !important; /* Slightly larger for visibility */
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.4) !important; /* More visible background */
        backdrop-filter: blur(5px) !important;
        box-shadow: 0 15px 40px rgba(139, 75, 59, 0.3) !important; /* Stronger shadow */
        mix-blend-mode: normal !important;
        width: 220px !important; /* Match JavaScript cardWidth value */
        position: relative !important;
        z-index: 5 !important;
        opacity: 0.6 !important; /* Ensure active card is visible on extra small screens */
        border: 2px solid rgba(139, 75, 59, 0.4) !important; /* Add border for visibility */
    }

    /* Make non-active cards more dimmed for contrast */
    .carousel-card:not(.active) {
        opacity: 0.3 !important; /* More dimmed for better contrast */
        transform: scale(0.9) !important;
    }

    .card-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .card-content {
        font-size: 14px;
        margin-bottom: 30px;
    }
    
    /* Extra small mobile flower size adjustments - iPhone 13 mini */
    .card-flower.flower-1 {
        width: 25px !important; /* Even smaller size for extra small screens */
    }

    .card-flower.flower-2 {
        width: 25px !important; /* Even smaller size for extra small screens */
    }

    .card-flower.flower-3 {
        width: 30px !important; /* Even smaller size for extra small screens */
    }
    
    body.contact-page .page-title {
        font-size: 56px !important; /* Even smaller header for extra small landscape */
        margin-bottom: 5px !important; /* Reduced spacing for landscape */
    }
    
    body.contact-page .page-subtitle {
        font-size: 14px !important; /* Even smaller subtitle for landscape */
        margin-bottom: 15px !important; /* Reduced spacing */
    }
    
    body.contact-page .page-header {
        margin-top: 80px !important; /* Less top margin for landscape */
        margin-bottom: 12px !important; /* Reduced bottom margin */
    }
    
    body.contact-page .main-content {
        padding-top: 35px !important; /* Reduced top padding for landscape */
        padding-left: 8px !important; /* Consistent horizontal padding */
        padding-right: 8px !important;
    }
    
}

.contact-form-section {
    margin: 0 15px 30px 15px;
    padding: 15px;
}

.form-group label {
    font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 12px;
    font-size: 14px;
}

/* FINAL OVERRIDE - iPhone 13 mini landscape mode - Progress page specific fixes */
@media (max-width: 389px) and (orientation: landscape) {
    /* PROGRESS PAGE SPECIFIC - iPhone 13 mini landscape mode - FINAL OVERRIDE */
    .progress-page .page-header {
        margin-bottom: 15px !important; /* Reduced spacing for landscape */
        margin-top: 20px !important; /* Less top margin in landscape */
        padding-top: 10px !important; /* Reduced padding */
    }
    
    .progress-page .page-title {
        font-size: 28px !important; /* Smaller title for landscape */
        margin-top: 10px !important; /* Reduced margin */
        margin-bottom: 8px !important; /* Reduced margin */
    }
    
    .progress-page .page-subtitle {
        font-size: 14px !important; /* Smaller subtitle for landscape */
        margin-top: 0px !important;
        margin-bottom: 15px !important; /* Reduced margin */
    }
    
    .progress-page .upload-area {
        max-width: 280px !important; /* Smaller width for landscape */
        padding: 20px 15px !important; /* Reduced padding */
        min-height: 160px !important; /* Reduced height for landscape */
        margin-top: 10px !important; /* Reduced top margin */
    }
    
    /* Ensure progress container doesn't take too much space in landscape */
    .progress-container {
        min-height: auto !important; /* Don't force height in landscape */
        padding-bottom: 20px !important; /* Reduced bottom padding */
    }
    
    .progress-page .main-content {
        padding-top: 10px !important; /* Reduced top padding */
        padding-bottom: 20px !important; /* Reduced bottom padding */
    }
}

/* Desktop styles for screens 1280px and larger */
@media (min-width: 1280px) {
    /* About Page Header adjustments for desktop */
    .about-page .page-header {
        top: 20px !important; /* Reduce top positioning */
        transform: translateY(70px) !important; /* Move header up slightly */
    }
    
    /* About Intro Container - reduce gap from header */
    .about-intro {
        margin-top: -50px !important; /* Pull intro container up to reduce gap */
        transform: translateY(-110px) !important; /* Additional upward adjustment */
    }
    
    /* Contact Page Header adjustments for desktop */
    .contact-page .page-header {
        top: 20px !important; /* Reduce top positioning */
        transform: translateY(30px) !important; /* Move header up slightly */
    }

    
}