/* Ensure hero-section background image is visible */
.hero-section {
    background: url('pictures/branding.jpg') center center/cover no-repeat;
    min-height: 60vh;
    position: relative;
    z-index: 1;
}
/* Hero Section Animations and Styles */

/* Typewriter Effect */
.typewriter-text {
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: 4px solid #FFD700;
    animation: typing 3s steps(40, end) 0.5s forwards,
               blink-caret 0.75s step-end infinite;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.02em;
}

/* Hero text animations */
.hero-text {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    padding-right: 4rem;
}

.relationships-text {
    text-shadow: 0 0 8px rgba(255,215,0,0.2);
}

.hero-line {
    position: relative;
    padding-right: 0.5em;
    transform: translateX(50px);
    opacity: 0;
    animation: slideInFromRight 0.5s ease forwards;
}

@keyframes slideInFromRight {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Stagger the animations */
.hero-line:nth-child(1) { animation-delay: 0.2s; }
.hero-line:nth-child(2) { animation-delay: 0.4s; }
.hero-line:nth-child(3) { animation-delay: 0.6s; }
.hero-line:nth-child(4) { animation-delay: 0.8s; }

/* Right alignment adjustments */
.hero-text > div {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
}

/* Add vertical spacing consistency */
.hero-text > div > div > div {
    padding: 0.25em 0;
    display: inline-block;
}

/* Hover effect */
.hero-line {
    transition: transform 0.3s ease;
}

.hero-line:hover {
    transform: translateX(-10px);
}

/* Enhanced Typography */
#hero h1 {
    font-feature-settings: "salt" on, "ss01" on;
    letter-spacing: -0.03em;
}

/* Neon Text Effect */
.neon-text {
    opacity: 0;
    color: #FFD700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5),
                 0 0 10px rgba(255, 215, 0, 0.5),
                 0 0 20px rgba(255, 215, 0, 0.5);
    animation: neon-glow 2s ease-in-out 2.5s forwards;
}

@keyframes neon-glow {
    0% {
        opacity: 0;
        text-shadow: none;
    }
    100% {
        opacity: 1;
        text-shadow: 0 0 5px rgba(255, 215, 0, 0.5),
                     0 0 10px rgba(255, 215, 0, 0.5),
                     0 0 20px rgba(255, 215, 0, 0.5),
                     0 0 40px rgba(255, 215, 0, 0.3);
    }
}


/* Mobile responsiveness: clean and simple */
@media (max-width: 640px) {
  .hero-text {
    width: 100vw;
    box-sizing: border-box;
    text-align: right !important;
    padding: 2rem 0 2rem 0 !important;
    margin: 0 !important;
  }
  .hero-text > div,
  .hero-text > div > div {
    width: 100%;
    text-align: right !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }
  .hero-line {
    text-align: right !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    display: block !important;
  }
}


@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(184, 134, 11, 0.1), rgba(184, 134, 11, 0.05));
    animation: float 20s ease-in-out infinite;
}

.shape-1 {
    width: 300px;
        .hero-text {
            padding: 2rem 0 2rem 0;
            width: 100vw;
            box-sizing: border-box;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end !important;
            justify-content: flex-end !important;
        }
        .hero-text > div {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .hero-text > div > div {
            font-size: 2rem;
            line-height: 1.2;
            letter-spacing: 0.05em;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        .hero-line {
            padding-right: 0;
            margin-right: 0.5rem;
            align-self: flex-end;
            text-align: right;
        }
        /* Remove left margin/padding from parent containers if any */
        .w-full {
            margin-left: 0 !important;
            padding-left: 0 !important;
        }
        @media (max-width: 768px) {
  .hero-text {
    text-align: right;
    padding-right: 20px; /* Optional: adds spacing from edge */
  }
}

        transform: translateY(0);
   

.animate-bounce {
    animation: bounce 2s infinite;
}

/* Background Image Parallax Effect */
.bg-fixed {
    background-attachment: fixed;
}