@import "tailwindcss";
@import "tailwindcss/components";

/* :root {
    --primary-color: #1e3a8a;
    --secondary-color: #3b82f6;
    --accent-color: #06b6d4;
    --dark-color: #1f2937;
    --light-color: #f8fafc;
} */

:root {
    /* =======================
     PRIMARY BRAND COLORS
  ======================= */
    --primary-color: #1121f1;
    /* Primary Blue - for main elements, buttons, headers */
    --secondary-color: #d19f59;
    /* Secondary Orange - for accents, highlights, CTAs */

    /* =======================
     ACCENT & HIGHLIGHT COLORS
  ======================= */
    --accent-color: #1121f1;
    /* Primary Blue for links, hover effects, icons */
    --highlight-brown: #9a652d;
    /* Gray Brown - for subheadings, dividers */
    --highlight-orange: #d19f59;
    /* Gray Orange - for buttons, highlights */
    --highlight-yellow: #f5e79d;
    /* Pastel Yellow - for backgrounds, info blocks */

    /* =======================
     BASE COLORS
  ======================= */
    --dark-color: #1121f1;
    /* Primary Blue for text and dark elements */
    --light-color: #e6e5e4;
    /* Light Grey for section backgrounds */
    --white-color: #ffffff;
    /* Pure White for main background */

    /* =======================
     SUPPORT COLORS
  ======================= */
    --muted-bg: #ffffff;
    /* White background */
    --muted-text: #9a652d;
    /* Brown for muted text */
}

/* Client color utility classes (mapped from provided palette) */
.text-primary {
    color: var(--secondary-color);
}

.text-brown {
    color: var(--highlight-brown);
}

.text-orange {
    color: var(--highlight-orange);
}

.text-yellow {
    color: var(--highlight-yellow);
}

.bg-light-section {
    background-color: var(--light-color);
}

/* Who We Are specific styling - larger, eye-catching heading and multi-line vision copy */

.who-heading {
    color: var(--highlight-brown);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin-top: 0.5rem;
}

.who-vision {
    color: var(--dark-color);
    font-weight: 600;
    line-height: 1.35;
}

@media (min-width: 768px) {
    .who-vision {
        font-size: 1.25rem;
    }
}

.who-vision p {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
}

.who-vision span {
    display: inline-block;
}

/* Welcome small heading with only top solid border using client golden (#d19f59) */
.welcome-flag {
    display: inline-block;
    color: var(--highlight-orange);
    border-top: 4px solid var(--highlight-orange);
    /* only upper solid border */
    padding-top: 0.5rem;
    /* space between border and text */
    font-weight: 700;
    letter-spacing: 0.02em;
}

.welcome-flag.fade-up {
    /* ensure reveal uses same transform timing */
    transition: opacity 0.8s ease, transform 0.8s ease;
}


/* Navbar scroll effect */
#navbar {
    background: linear-gradient(135deg, rgba(17, 33, 241, 0.9), rgba(17, 33, 241, 0.9));
    backdrop-filter: blur(10px);
    transition: all 0.3s ease-in-out;
}

#navbar.scrolled {
    background: linear-gradient(135deg, rgba(17, 33, 241, 0.95), rgba(17, 33, 241, 0.95)) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Open Sans", sans-serif;
    line-height: 1.6;
    color: var(--dark-color);
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* Smooth scrolling setup */
html {
    scroll-behavior: auto;
}

/* Loading screen */
.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Splash Screen */
.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 1s ease-out;
}

.splash-logo {
    font-size: 4rem;
    color: white;
    margin-bottom: 2rem;
    animation: fadeInUp 1.5s ease-out;
}

.splash-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.5rem;
    font-weight: 300;
    text-align: center;
    animation: fadeInUp 1.5s ease-out 0.5s both;
}

.splash-tagline {
    color: var(--accent-color);
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1rem;
    animation: fadeInUp 1.5s ease-out 1s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.splash-progress {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
    overflow: hidden;
}

.splash-progress-bar {
    height: 100%;
    background: var(--accent-color);
    width: 0%;
    animation: loadProgress 3s ease-out forwards;
}

@keyframes loadProgress {
    to {
        width: 100%;
    }
}

.loader-ship {
    font-size: 4rem;
    color: var(--accent-color);
    animation: float 2s ease-in-out infinite;
}

@keyframes float {

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

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

.navbar {
    background: transparent;
    transition: all 0.4s ease;
    transform: translateY(0);
}

.navbar.scrolled {
    background: rgba(30, 58, 138, 0.95);
    /* backdrop-filter: blur(10px); */
    transform: translateY(0);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
    color: white !important;
    /* font-family: "Cinzel Decorative", serif; */
    font-style: italic;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: text-shadow 0.3s ease;
}

.navbar.scrolled .navbar-brand {
    text-shadow: none;
}

.nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 500;
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.navbar.scrolled .nav-link {
    text-shadow: none;
    color: rgba(255, 255, 255, 0.9) !important;
}

.nav-link:hover {
    color: var(--accent-color) !important;
    transform: translateY(-1px);
}

/* Dropdown Navigation Styles */
.dropdown-menu {
    background: linear-gradient(135deg, rgba(17, 33, 241, 0.95) 0%, rgba(209, 159, 89, 0.95) 100%);
    border: 1px solid rgba(245, 231, 157, 0.2);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(17, 33, 241, 0.3);
    backdrop-filter: blur(15px);
    padding: 10px 0;
    margin-top: 10px;
}

.dropdown-item {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 8px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    background: rgba(245, 231, 157, 0.2);
    color: var(--pastel-yellow) !important;
    transform: translateX(5px);
}

.dropdown-toggle::after {
    border-top-color: rgba(255, 255, 255, 0.9);
}

/* Cookie Preferences Styles */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dark-color);
    color: white;
    padding: 20px;
    z-index: 9998;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}

.cookie-banner.show {
    transform: translateY(0);
}

.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.cookie-text {
    flex: 1;
    min-width: 300px;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cookie-btn.accept {
    background: var(--accent-color);
    color: white;
}

.cookie-btn.accept:hover {
    background: #0891b2;
}

.cookie-btn.settings {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cookie-btn.settings:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><path d="M0 300L50 280C100 260 200 220 300 200C400 180 500 180 600 200C700 220 800 260 900 280C1000 300 1100 300 1150 300L1200 300V600H1150C1100 600 1000 600 900 600C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V300Z" fill="rgba(255,255,255,0.1)"/></svg>') center bottom/cover no-repeat;
}

/* Parallax elements */
.parallax-bg {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -10%;
    left: -10%;
    background: url('../assets/iStock-1335890727.jpg') center center/cover no-repeat;
    opacity: 0.15;
    /* Make the image subtle */
    background-blend-mode: overlay;
    mix-blend-mode: overlay;
}

.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.floating-ship {
    position: absolute;
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.floating-ship:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.floating-ship:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.floating-ship:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 4s;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    opacity: 1;
    transform: translateY(0);
    animation: heroTitleFadeIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Reduced from 2.5s */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    line-height: 1.8;
    opacity: 1;
    transform: translateY(0);
    animation: heroSubtitleFadeIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
    /* Reduced from 2.8s and 0.5s */
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
}

.hero-buttons {
    opacity: 1;
    transform: translateY(0);
    animation: heroButtonsFadeIn 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
    /* Reduced from 2.2s and 1s */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Keyframes for hero animations */
@keyframes heroTitleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(120px) scale(0.95);
    }

    50% {
        opacity: 0.8;
        transform: translateY(20px) scale(1.02);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes heroSubtitleFadeIn {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.98);
        filter: blur(4px);
    }

    60% {
        opacity: 0.7;
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroButtonsFadeIn {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

    70% {
        opacity: 0.8;
        transform: translateY(-5px) scale(1.05);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.hero-ship-icon {
    opacity: 0;
    transform: scale(0.8) rotate(-10deg);
}

.btn-primary-custom {
    background: var(--accent-color);
    border: none;
    padding: 15px 30px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-primary-custom:hover {
    background: #0891b2;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(6, 182, 212, 0.3);
}

.section-title {
    font-size: 4.5rem;
    font-weight: 700;
    color: #3d3d3d;
    margin-top: 5vw;
    margin-bottom: 4vw;
    text-align: center;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 4px;
    background: var(--accent-color);
    border-radius: 2px;
}

.service-card {
    background: white;
    border-radius: 15px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: none;
    height: 100%;
    opacity: 0;
    transform: translateY(100px) scale(0.9);
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

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

.service-icon {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.service-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.about-section {
    background: var(--light-color);
}

.stats-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

.stats-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--accent-color);
    display: block;
}

.stats-label {
    font-size: 1rem;
    color: var(--dark-color);
    font-weight: 500;
}

.contact-section {
    background: var(--primary-color);
    color: white;
}

.contact-info {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.contact-icon {
    font-size: 1.5rem;
    color: var(--accent-color);
    margin-right: 15px;
}

.footer {
    background: linear-gradient(180deg, #0e3c91 0%, var(--primary-color) 100%);
    color: rgba(255, 255, 255, 0.95);
}

.footer-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--accent-color);
}

.footer-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-link:hover {
    color: var(--accent-color);
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    color: var(--accent-color);
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary-color);
    transform: translateY(-4px) scale(1.02);
}

/* Footer extra utilities */
.logo-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.footer-link {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.2s ease, transform 0.15s ease;
}

.footer-link:hover {
    color: var(--accent-color);
    transform: translateX(4px);
}

.footer-cta {
    display: inline-block;
    margin-top: 8px;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
    color: white;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(6, 139, 174, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.footer-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(6, 139, 174, 0.16);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 28px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom-links {
    display: flex;
    gap: 18px;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }

    .footer {
        padding: 64px 0 40px;
    }
}

/* Additional Footer Responsive Styles */
@media (max-width: 768px) {
    .footer {
        padding: 40px 0 20px 0 !important;
    }

    .footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    .footer-title {
        text-align: center !important;
        margin-bottom: 1rem !important;
    }

    .footer ul {
        text-align: center !important;
    }

    .footer ul li {
        margin-bottom: 0.5rem !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }

    .footer-bottom-links {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    .social-icon {
        margin: 0 0.5rem !important;
    }

    .footer .px-12 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .section-padding {
        padding: 60px 0;
    }
}

/* GSAP Animation Classes */
.gsap-fade-up {
    opacity: 0;
    transform: translateY(60px);
}

.gsap-fade-left {
    opacity: 0;
    transform: translateX(-60px);
}

.gsap-fade-right {
    opacity: 0;
    transform: translateX(60px);
}

.gsap-scale {
    opacity: 0;
    transform: scale(0.8);
}

.gsap-rotate {
    opacity: 0;
    transform: rotate(10deg) scale(0.9);
}

/* Magnetic hover effect */
.magnetic {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Smooth reveal sections */
.reveal-section {
    opacity: 0;
}

/* Premium text reveal */
.text-reveal {
    overflow: visible;
    perspective: 1000px;
}

.text-reveal span,
.animated-text {
    display: inline-block;
    transform: translateY(0);
    opacity: 1;
    animation: textReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
    /* Reduced from 1.6s */
    transform-origin: center bottom;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.animated-text:nth-child(1) {
    animation: textReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.05s forwards,
        /* Reduced timings */
        subtleFloat 4s ease-in-out infinite 2s;
}

.animated-text:nth-child(2) {
    animation: textReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.1s forwards,
        subtleFloat 4s ease-in-out infinite 2.1s;
}

.animated-text:nth-child(3) {
    animation: textReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.15s forwards,
        subtleFloat 4s ease-in-out infinite 2.2s;
}

.animated-text:nth-child(4) {
    animation: textReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.2s forwards,
        subtleFloat 4s ease-in-out infinite 2.3s;
}

.animated-text:nth-child(5) {
    animation: textReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.25s forwards,
        subtleFloat 4s ease-in-out infinite 2.4s;
}

.animated-text:nth-child(6) {
    animation: textReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards,
        subtleFloat 4s ease-in-out infinite 2.5s;
}

.animated-text:nth-child(7) {
    animation: textReveal 0.8s cubic-bezier(0.23, 1, 0.32, 1) 0.35s forwards,
        subtleFloat 4s ease-in-out infinite 2.6s;
}

@keyframes textReveal {
    0% {
        transform: translateY(120%) rotateX(90deg);
        opacity: 0;
        filter: blur(8px);
    }

    20% {
        transform: translateY(60%) rotateX(45deg);
        opacity: 0.3;
        filter: blur(4px);
    }

    60% {
        transform: translateY(10%) rotateX(10deg);
        opacity: 0.8;
        filter: blur(1px);
    }

    100% {
        transform: translateY(0) rotateX(0deg);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes subtleFloat {

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

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

/* Add subtle floating animation after text reveal */
.animated-text {
    animation: textReveal 1.6s cubic-bezier(0.23, 1, 0.32, 1) forwards,
        subtleFloat 4s ease-in-out infinite 3s;
}

/* Advanced gradient backgrounds */
.gradient-move {
    background: linear-gradient(-45deg, var(--primary-color), var(--secondary-color), var(--accent-color), var(--primary-color));
    background-size: 400% 400%;
    animation: gradientMove 15s ease infinite;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Scroll progress indicator */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
    z-index: 9999;
    border-radius: 0 2px 2px 0;
}

/* Parallax container */
.parallax-container {
    overflow: hidden;
    will-change: transform;
}

/* Dynamic Services Section */
.dynamic-services {
    min-height: 120vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Visual feedback when section is pinned */
body.services-pinned .dynamic-services {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

body.services-pinned .scroll-progress {
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.3);
}

.service-stack-container {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-stack-item {
    position: absolute;
    width: 100%;
    max-width: 800px;
    background: white;
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-stack-item.active {
    transform: translateY(0);
    opacity: 1;
    z-index: 5;
}

.service-stack-item.previous {
    transform: translateY(-100px);
    opacity: 0;
    z-index: 1;
}

.service-stack-number {
    display: inline-block;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--accent-color), var(--secondary-color));
    color: white;
    border-radius: 50%;
    line-height: 80px;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(6, 182, 212, 0.3);
}

.service-stack-icon {
    font-size: 4rem;
    color: var(--primary-color);
    margin-bottom: 30px;
    display: block;
}

.service-stack-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.2;
}

.service-stack-description {
    font-size: 1.2rem;
    color: var(--dark-color);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 30px;
}

.service-stack-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.service-feature {
    display: flex;
    align-items: center;
    color: var(--accent-color);
    font-weight: 500;
}

.service-feature i {
    margin-right: 8px;
    font-size: 1.2rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--primary-color);
}

.scroll-arrow {
    font-size: 2rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

@media (max-width: 768px) {
    .service-stack-item {
        padding: 40px 20px;
    }

    .service-stack-title {
        font-size: 2rem;
    }

    .service-stack-features {
        flex-direction: column;
        gap: 20px;
    }
}

/* Small height screens optimization */
@media (max-height: 700px) {
    .service-stack-container {
        height: 400px;
    }

    .service-stack-item {
        padding: 30px 20px;
        max-width: 700px;
    }

    .service-stack-number {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .service-stack-icon {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .service-stack-title {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .service-stack-description {
        font-size: 1rem;
        margin-bottom: 20px;
    }

    .service-stack-features {
        gap: 20px;
        margin-top: 20px;
    }

    .scroll-indicator {
        bottom: 20px;
        font-size: 0.9rem;
    }

    .scroll-arrow {
        font-size: 1.5rem;
    }
}

/* Very small height screens */
@media (max-height: 500px) {
    .dynamic-services {
        min-height: 100vh;
    }

    .service-stack-container {
        height: 300px;
    }

    .service-stack-item {
        padding: 20px 15px;
    }

    .service-stack-number {
        width: 50px;
        height: 50px;
        line-height: 50px;
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .service-stack-icon {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }

    .service-stack-title {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .service-stack-description {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .service-stack-features {
        gap: 15px;
        margin-top: 15px;
        flex-direction: column;
        align-items: center;
    }

    .service-feature {
        font-size: 0.9rem;
    }

    .scroll-indicator {
        bottom: 10px;
        font-size: 0.8rem;
    }

    .scroll-arrow {
        font-size: 1.2rem;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {

    .hero-title,
    .hero-subtitle,
    .hero-buttons,
    .animated-text {
        animation-duration: 0.3s !important;
        animation-iteration-count: 1 !important;
    }

    .subtleFloat {
        animation: none !important;
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-up {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.fade-in-buttons {
    opacity: 1 !important;
    transform: translateY(0) !important;
}