/* Mobile Menu Integration for Tailwind compatibility */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Ensure navbar doesn't cover content when sticky */
body {
    padding-top: 80px; /* Adjust based on your header height */
}

/* Mobile Menu Visibility Fix */
@media (max-width: 991px) {
    #navbar {
        background: #ffffff !important;
        border-bottom: 1px solid #eee;
    }
    
    #mobile-menu.hidden {
        display: none;
    }
   
    /* Force all text inside content areas to justify */
    .content-area p, 
    .content-area div, 
    .faq-answer, 
    .article-body {
        text-align: justify !important;
        text-justify: inter-word; /* Improves spacing between words */
        line-height: 1.75;       /* Essential for readability when justified */
    }

    /* Force all text inside content areas to justify */
    .content-area p, 
    .content-area div, 
    .faq-answer, 
    .article-body {
        text-align: justify !important;
        text-justify: inter-word; /* Improves spacing between words */
        line-height: 1.75;       /* Essential for readability when justified */
    }
    /* The container window */
.portfolio-image-container {
    height: 300px; /* Adjust this to your desired preview height */
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

/* The long image inside */
.portfolio-screenshot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: top 5s linear; /* Adjust speed by changing 5s */
}

    #mobile-menu {
        display: block;
        background: white;
        padding: 20px;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    }
/* Mobile Menu Integration for Tailwind compatibility */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Ensure navbar doesn't cover content when sticky */
body {
    padding-top: 80px; /* Adjust based on your header height */
}

/* Mobile Menu Visibility Fix */
@media (max-width: 991px) {
    #navbar {
        background: #ffffff !important;
        border-bottom: 1px solid #eee;
    }
    
    #mobile-menu.hidden {
        display: none;
    }
    
    #mobile-menu {
        display: block;
        background: white;
        padding: 20px;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    }
}
.liquid-flow {
    /* Existing styles */
    background: linear-gradient(-45deg, #ffffff, #e0f2fe, #ffffff, #bae6fd);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    backdrop-filter: blur(8px);
    
    /* ADD THESE TWO LINES */
    display: block;
    min-height: 80px; /* Or whatever your header height is */
}

    .water-flow {
        background: linear-gradient(-45deg, #ffffff, #e0f2fe, #ffffff, #bae6fd);
        background-size: 400% 400%;
        animation: gradient 10s ease infinite;
    }
    @keyframes gradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .ocean-wave {
        /* This creates a light blue/white wave-like gradient */
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 25%, #80deea 50%, #b2ebf2 75%, #e0f7fa 100%);
        background-size: 400% 400%;
        animation: wave-move 15s ease infinite;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
.whatsapp-float {
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4);
}

.whatsapp-float:hover {
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.6);
}
/* This creates the smooth scrolling effect on hover/click */
.portfolio-image-container img {
    object-position: top;
    transition: object-position 4s ease-in-out; /* Adjust '4s' to change speed */
}

.portfolio-image-container:hover img, 
.portfolio-image-container.active img {
    object-position: bottom;
}

/* Subtle bounce animation for the button */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.whatsapp-float {
    animation: bounce-slow 3s infinite ease-in-out;
}
    @keyframes wave-move {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }
.portfolio-image-container {
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.portfolio-screenshot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* This transition is what makes it 'slide' instead of jumping */
    transition: top 5s linear; 
}.portfolio-image-container {
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.portfolio-screenshot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* This transition is what makes it 'slide' instead of jumping */
    transition: top 5s linear; 
}.portfolio-image-container {
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.portfolio-screenshot {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* This transition is what makes it 'slide' instead of jumping */
    transition: top 5s linear; 
}
.portfolio-image-container {
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.portfolio-screenshot {
    width: 100%;
    /* We use transform instead of top for smoother performance */
    transition: transform 5s linear;
    transform: translateY(0); 
    display: block;
}
.portfolio-image-container {
    height: 300px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.portfolio-screenshot {
    width: 100%;
    /* We use transform instead of top for smoother performance */
    transition: transform 5s linear;
    transform: translateY(0); 
    display: block;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  min-height: 100vh;

  /* Background */
  background: linear-gradient(135deg, #1e3c72, #2a5298);
}

/* Glass effect */
.glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

  padding: 20px;
  margin: 20px;

  color: #fff;
}.glass,
.group,
.portfolio-item,
article {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

  transition: all 0.3s ease;
}
/* 1. Ensure the container hides the overflow of the long screenshot */
.portfolio-image-container {
    position: relative;
    overflow: hidden;
}

/* 2. Style the image to be at the top initially */
.portfolio-screenshot {
    display: block;
    width: 100%;
    height: auto; /* Allow full height to exist */
    transition: transform 5s ease-in-out !important; /* Smooth 5-second scroll */
    transform: translateY(0);
}

/* 3. On Hover: Move the image up so the bottom shows */
.portfolio-image-container:hover .portfolio-screenshot {
    transform: translateY(calc(-100% + 400px)); /* 400px matches the approx height of the container */
}

/* 4. On Click (Mobile): Add the 'active' class via JS to trigger the same scroll */
.portfolio-image-container.active .portfolio-screenshot {
    transform: translateY(calc(-100% + 400px));
}
/* Ensure the container has a fixed height/aspect ratio */
.portfolio-image-container {
    position: relative;
    overflow: hidden;
    height: 400px; /* Or keep your aspect-[3/4] class */
}

.portfolio-screenshot {
    display: block;
    width: 100%;
    height: auto !important; /* Allow the image to be long */
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 5s ease-in-out !important; /* 5 seconds for a smooth long scroll */
    transform: translateY(0);
}

/* Scroll when Hovered (Desktop) */
.portfolio-image-container:hover .portfolio-screenshot {
    transform: translateY(calc(-100% + 100%)); 
    /* If the above line doesn't scroll enough, use the one below: */
    transform: translateY(calc(-100% + 400px)); 
}

/* Scroll when Clicked (Mobile/Active) */
.portfolio-image-container.active .portfolio-screenshot {
    transform: translateY(calc(-100% + 400px));
}
/* 1. Ensure the window is a fixed ratio */
.portfolio-image-container {
    position: relative;
    overflow: hidden;
    /* This ensures the 'window' stays the same size even if the image is long */
}

/* 2. Set the 'Film Strip' (The Image) */
.portfolio-screenshot {
    height: auto !important; /* Allow the image to be long */
    transition: transform 6s ease-in-out !important; /* Smooth 6-second scroll */
    transform: translateY(0);
    will-change: transform;
}

/* 3. The Action: Slide up on hover or click */
/* We move the image up by its height (-100%) and add back the container height (+100%) */
.portfolio-image-container:hover .portfolio-screenshot,
.portfolio-image-container.active .portfolio-screenshot {
    transform: translateY(calc(-100% + 100%));
}
/* 1. Ensure the container hides the long image */
.portfolio-image-container {
    position: relative;
    overflow: hidden;
    background-color: #f3f4f6; /* Fallback for clean appearance while loading */
}

/* 2. Style the long screenshot */
.portfolio-screenshot {
    height: auto !important; /* Vital: image must be allowed its natural length */
    transition: transform 6s ease-in-out !important; /* Smooth professional scroll */
    transform: translateY(0);
    will-change: transform; /* Boosts performance on Mobile/Pad */
}

/* 3. The Scroll Math: Move it up exactly far enough to see the bottom */
.portfolio-image-container:hover .portfolio-screenshot,
.portfolio-image-container.active .portfolio-screenshot {
    transform: translateY(calc(-100% + 100%));
}

/* 4. Fix for Mobile Colors/Gradients */
@media (max-width: 1024px) {
    .portfolio-item {
        -webkit-backface-visibility: hidden; /* Fixes mobile color flickering */
        backface-visibility: hidden;
    }

@media only screen and (max-width: 767px) {
  /* Remove space from the top of your main content area */
  main, .hero-section, #body-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Ensure the body doesn't have an accidental top margin */
  body {
    margin-top: 0 !important;
  }
}
/* Force the Hero Colors if Tailwind Fails */
.bg-red-600, .bg-\[\#dc2626\] { background-color: #dc2626 !important; }
.bg-green-500, .bg-\[\#22c55e\] { background-color: #22c55e !important; }
.text-white { color: #ffffff !important; }

/* Ensure the Hero stays dark and professional */
#home {
    background: linear-gradient(to bottom right, #111827, #1e293b, #000000) !important;
}

/* Fix the scattered text alignment */
@media (max-width: 768px) {
    .hero .text-center { text-align: center !important; }
    .hero .flex-col { flex-direction: column !important; }
    .hero .w-full { width: 100% !important; }
}
    /* Makes every H2 have a nice dark blue-gray color and a red accent */
    section h2 {
        color: #1e293b; /* Slate-800 - much more premium than pure black */
        letter-spacing: -0.025em;
    }
    
    /* Targets the first word of your headings to be Red */
    section h2::first-line {
        color: #dc2626; /* Your brand red */
    }
    /* Premium typography settings */
    section h2 {
        letter-spacing: -0.025em;
        line-height: 1.2;
    }
    
    /* Adds a subtle text shadow to make white text pop on dark backgrounds */
    .text-white {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    <style>
    /* Premium Agency Typography & Dividers */
    .section-title {
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 40px;
    }

    /* The Decorative Gradient Divider */
    .section-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 5px;
        background: linear-gradient(to right, #dc2626, #f97316);
        border-radius: 50px;
    }

    /* Centered version for Portfolio/Blog/FAQ */
    .text-center .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .section-tag {
        display: block;
        color: #dc2626;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    /* Portfolio Scroll Animation */
    .portfolio-image-container:hover .portfolio-screenshot {
        transform: translateY(calc(-100% + 350px));
    }

    /* Logo Gentle Bounce */
    @keyframes gentle-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    .animate-logo {
        animation: gentle-bounce 3s infinite ease-in-out;
    }
    .animate-logo:hover {
        animation-play-state: paused;
    }
</style>