/* Hero Section Typography Enhancement */
/* Responsive styling for BTC MANAGEMENT hero text */
/* Text stays stacked vertically at ALL screen sizes */
/* Using !important to ensure these rules override any other CSS */

/* Base styling - Always stacked vertically */
#hero h1 {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    line-height: 1.1 !important;
}

/* BTC text - always prominent and full size */
#hero h1 .btc-text {
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    display: block !important;
    font-size: 1em !important;
}

/* MANAGEMENT text - always smaller, acts as subtitle */
#hero h1 .management-text {
    font-weight: 500 !important;
    display: block !important;
}

/* Extra Small Mobile (up to 375px) */
@media (max-width: 375px) {
    #hero h1 {
        gap: 0.6rem !important;
    }
    
    #hero h1 .management-text {
        font-size: 0.5em !important;
        letter-spacing: 0.35em !important;
        margin-top: 0.3rem !important;
    }
}

/* Small Mobile (376px - 575px) */
@media (min-width: 376px) and (max-width: 575px) {
    #hero h1 {
        gap: 0.5rem !important;
    }
    
    #hero h1 .management-text {
        font-size: 0.55em !important;
        letter-spacing: 0.3em !important;
        margin-top: 0.2rem !important;
    }
}

/* Large Mobile (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    #hero h1 {
        gap: 0.4rem !important;
    }
    
    #hero h1 .management-text {
        font-size: 0.6em !important;
        letter-spacing: 0.28em !important;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #hero h1 {
        gap: 0.4rem !important;
    }
    
    #hero h1 .management-text {
        font-size: 0.62em !important;
        letter-spacing: 0.26em !important;
    }
}

/* Small Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    #hero h1 {
        gap: 0.45rem !important;
    }
    
    #hero h1 .management-text {
        font-size: 0.65em !important;
        letter-spacing: 0.25em !important;
    }
}

/* Medium Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    #hero h1 {
        gap: 0.5rem !important;
        flex-direction: column !important;
    }
    
    #hero h1 .management-text {
        font-size: 0.65em !important;
        letter-spacing: 0.24em !important;
    }
}

/* Large Desktop (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
    #hero h1 {
        gap: 0.5rem !important;
        flex-direction: column !important;
    }
    
    #hero h1 .management-text {
        font-size: 0.65em !important;
        letter-spacing: 0.23em !important;
    }
}

/* Extra Large Desktop (1600px+) */
@media (min-width: 1600px) {
    #hero h1 {
        gap: 0.55rem !important;
        flex-direction: column !important;
    }
    
    #hero h1 .management-text {
        font-size: 0.65em !important;
        letter-spacing: 0.22em !important;
    }
}

/* Ensure gradient applies to both spans */
#hero h1 .btc-text,
#hero h1 .management-text {
    background: linear-gradient(135deg, var(--primary-dark-blue), var(--secondary-blue)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
}

/* Add subtle shadow to the h1 container */
#hero h1 {
    filter: drop-shadow(2px 2px 2px rgba(15, 25, 60, 0.15)) !important;
}