/* Override Elementor container styles */
.elementor-widget-genius-clean-hero-section .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

.elementor-widget-genius-clean-hero-section .e-con-inner {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Hero Section - EXACT copy from index.html with genius- prefix */
.genius-hero-section {
    background-color: #ffffff !important;
    padding: 80px 20px !important;
    min-height: 600px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
}

.genius-hero-container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1.2fr !important;
    /* gap: 60px; */
    align-items: center !important;
    width: 100% !important;
}

.genius-hero-content {
    /* padding-left: 65px; */
    z-index: 2 !important;
    text-align: left !important;
}

.genius-hero-title {
    font-family: 'Dosis', sans-serif !important;
    font-size: clamp(2rem, 5vw, 4.5rem) !important;
    font-weight: 300 !important;
    line-height: 1.1 !important;
    letter-spacing: -2px !important;
    color: #000000 !important;
    margin: 0 0 30px 0 !important;
}

.genius-hero-subtitle {
    font-family: 'DM Sans', sans-serif !important;
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    font-weight: 400 !important;
    color: #333333 !important;
    margin: 0 0 40px 0 !important;
}

.genius-cta-button {
    background-color: #f4ca3d !important;
    color: #000000 !important;
    border: none !important;
    padding: 12px 40px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-size: clamp(0.875rem, 1.5vw, 1.125rem) !important;
    font-weight: 600 !important;
    border-radius: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.genius-cta-button:hover {
    background-color: #e6b82f !important;
    transform: translateY(-2px) !important;
}

.genius-hero-image {
    position: relative !important;
    height: clamp(300px, 50vw, 500px) !important;
    width: 100% !important;
}

.genius-hero-main-image {
    position: absolute !important;
    top: calc(-112px * var(--scale, 1)) !important;
    left: calc(-41px * var(--scale, 1)) !important;
    width: calc(900px * var(--scale, 1)) !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    z-index: 1 !important;
}

.genius-hero-dog-image {
    position: absolute !important;
    bottom: calc(124px * var(--scale, 1)) !important;
    left: calc(-309px * var(--scale, 1)) !important;
    width: calc(110px * var(--scale, 1)) !important;
    height: auto !important;
    z-index: 10 !important;
}

/* Calculate scale based on viewport */
@media (max-width: 1600px) {
    :root {
        --hero-scale: calc(0.5 + (100vw - 320px) / 2560) !important;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .genius-hero-image {
        --scale: 1.1 !important;
    }
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) {
    .genius-hero-image {
        --scale: 1 !important;
    }
}

/* Small Desktop (1024px - 1199px) */
@media (max-width: 1199px) {
    .genius-hero-image {
        --scale: 0.85 !important;
    }
    
    .genius-hero-container {
        gap: 40px !important;
    }
    
    .genius-hero-content {
        padding-right: 20px !important;
    }
}

/* Tablet (below 1024px) */
@media (max-width: 1023px) {
    .genius-hero-section {
        padding: 60px 20px !important;
    }
    
    .genius-hero-container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        max-width: 800px !important;
    }
    
    .genius-hero-content {
        text-align: left !important;
        padding-right: 0 !important;
        order: 2 !important;
    }
    
    .genius-hero-image {
        order: 1 !important;
        height: 400px !important;
        overflow: visible !important;
        --scale: 0.7 !important;
    }
    
    .genius-cta-button {
        padding: 10px 30px !important;
    }
}

/* Mobile (480px - 767px) */
@media (max-width: 767px) {
    .genius-hero-section {
        padding: 40px 15px !important;
    }
    
    .genius-hero-image {
        height: 350px !important;
        --scale: 0.6 !important;
    }
    
    .genius-hero-main-image {
        width: calc(700px * var(--scale, 1)) !important;
    }
}

/* Small Mobile (below 480px) */
@media (max-width: 479px) {
    .genius-hero-section {
        padding: 30px 10px !important;
        min-height: auto !important;
    }
    
    .genius-hero-container {
        gap: 30px !important;
    }
    
    .genius-hero-image {
        height: 300px !important;
        --scale: 0.5 !important;
    }
    
    .genius-hero-main-image {
        width: calc(600px * var(--scale, 1)) !important;
        top: calc(-80px * var(--scale, 1)) !important;
        left: calc(-20px * var(--scale, 1)) !important;
    }
    
    .genius-hero-dog-image {
        width: calc(100px * var(--scale, 1)) !important;
        bottom: calc(50px * var(--scale, 1)) !important;
        left: calc(-150px * var(--scale, 1)) !important;
    }
    
    .genius-cta-button {
        padding: 8px 20px !important;
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* Extra Small Mobile (320px) - EXACT from index.html */
@media (max-width: 320px) {
    .genius-hero-section {
        padding: 30px 10px !important;
        min-height: auto !important;
    }
    
    .genius-hero-container {
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    .genius-hero-content {
        order: 2 !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    .genius-hero-title {
        font-size: 1.5rem !important;
        text-align: center !important;
        letter-spacing: -1px !important;
    }
    
    .genius-hero-title br {
        display: none !important;
    }
    
    .genius-hero-subtitle {
        font-size: 0.8rem !important;
        margin: 0 0 18px 0 !important;
    }
    
    .genius-cta-button {
        font-size: 0.75rem !important;
        padding: 8px 18px !important;
        width: 100% !important;
    }
    
    .genius-hero-image {
        order: 1 !important;
        height: auto !important;
        position: relative !important;
    }
    
    .genius-hero-main-image {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 10px !important;
    }
    
    .genius-hero-dog-image {
        display: none !important;
    }
}

/* Small Mobile Styles (375px - 424px) - EXACT from index.html */
@media (min-width: 375px) and (max-width: 424px) {
    .genius-hero-section {
        padding: 35px 12px !important;
        min-height: auto !important;
    }
    
    .genius-hero-container {
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }
    
    .genius-hero-content {
        order: 2 !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    .genius-hero-title {
        font-size: 1.75rem !important;
        text-align: center !important;
    }
    
    .genius-hero-title br {
        display: none !important;
    }
    
    .genius-hero-subtitle {
        font-size: 0.9rem !important;
        margin: 0 0 20px 0 !important;
    }
    
    .genius-cta-button {
        font-size: 0.8rem !important;
        padding: 9px 20px !important;
        width: 100% !important;
    }
    
    .genius-hero-image {
        order: 1 !important;
        height: auto !important;
        position: relative !important;
    }
    
    .genius-hero-main-image {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 12px !important;
    }
    
    .genius-hero-dog-image {
        display: none !important;
    }
}

/* Medium Mobile Styles (425px - 767px) - EXACT from index.html */
@media (min-width: 425px) and (max-width: 767px) {
    .genius-hero-section {
        padding: 40px 15px !important;
        min-height: auto !important;
    }
    
    .genius-hero-container {
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    .genius-hero-content {
        order: 2 !important;
        text-align: center !important;
        padding: 0 !important;
    }
    
    .genius-hero-title {
        font-size: 2rem !important;
        text-align: center !important;
    }
    
    .genius-hero-title br {
        display: none !important;
    }
    
    .genius-hero-subtitle {
        font-size: 1rem !important;
        margin: 0 0 25px 0 !important;
    }
    
    .genius-cta-button {
        font-size: 0.875rem !important;
        padding: 10px 25px !important;
        width: 100% !important;
    }
    
    .genius-hero-image {
        order: 1 !important;
        height: auto !important;
        position: relative !important;
    }
    
    .genius-hero-main-image {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 15px !important;
    }
    
    .genius-hero-dog-image {
        display: none !important;
    }
}

/* Tablet 768px - 1023px - EXACT from index.html */
@media (min-width: 768px) and (max-width: 1023px) {
    .genius-hero-container {
        max-width: 700px !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center !important;
    }
    
    .genius-hero-content {
        order: 2 !important;
        text-align: center !important;
    }
    
    .genius-hero-title {
        font-size: 3rem !important;
        text-align: center !important;
    }
    
    .genius-hero-title br {
        display: none !important;
    }
    
    .genius-hero-subtitle {
        font-size: 1.25rem !important;
        margin: 0 0 30px 0 !important;
    }
    
    .genius-cta-button {
        font-size: 1.5rem !important;
        padding: 12px 35px !important;
    }
    
    .genius-hero-image {
        order: 1 !important;
        height: auto !important;
        position: relative !important;
    }
    
    .genius-hero-main-image {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        z-index: 1 !important;
    }
    
    .genius-hero-dog-image {
        display: none !important;
    }
}

/* Medium Desktop Styles (1024px) - EXACT from index.html */
@media (min-width: 1024px) and (max-width: 1439px) {
    .genius-hero-container {
        max-width: 900px !important;
        gap: 40px !important;
    }
    
    .genius-hero-title {
        font-size: 4rem !important;
    }
    
    .genius-hero-subtitle {
        font-size: 1.5rem !important;
        margin: 0 0 40px 0 !important;
    }
    
    .genius-cta-button {
        font-size: 1.125rem !important;
        padding: 14px 40px !important;
    }
    
    .genius-hero-image {
        --scale: 0.75 !important;
    }
    
    .genius-hero-main-image {
        position: absolute !important;
        top: calc(-150px * var(--scale, 1)) !important;
        left: calc(-20px * var(--scale, 1)) !important;
        width: calc(1000px * var(--scale, 1)) !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        z-index: 1 !important;
    }
    
    .genius-hero-dog-image {
        position: absolute !important;
        bottom: calc(243px * var(--scale, 1)) !important;
        left: calc(-303px * var(--scale, 1)) !important;
        width: calc(150px * var(--scale, 1)) !important;
    }
}

/* Desktop 1920px and up - EXACT from index.html */
@media (min-width: 1920px) {
    .genius-hero-section {
        padding: 120px 20px !important;
        min-height: 800px !important;
    }
    
    .genius-hero-container {
        max-width: 1800px !important;
        gap: 100px !important;
    }
    
    .genius-hero-title {
        font-size: 8rem !important;
    }
    
    .genius-hero-subtitle {
        font-size: 2.75rem !important;
        margin: 0 0 60px 0 !important;
    }
    
    .genius-cta-button {
        font-size: 2.375rem !important;
        padding: 18px 60px !important;
    }
    
    .genius-hero-image {
        --scale: 1.3 !important;
    }
    
    .genius-hero-main-image {
        position: absolute !important;
        top: calc(-284px * var(--scale, 1)) !important;
        left: calc(-45px * var(--scale, 1)) !important;
        width: calc(1350px * var(--scale, 1)) !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        z-index: 1 !important;
    }
    
    .genius-hero-dog-image {
        position: absolute !important;
        bottom: calc(67px * var(--scale, 1)) !important;
        left: calc(-306px * var(--scale, 1)) !important;
        width: calc(168px * var(--scale, 1)) !important;
        height: auto !important;
        z-index: 10 !important;
    }
}

/* Large Desktop Styles (2560px and above) - EXACT from index.html */
@media (min-width: 2560px) {
    .genius-hero-section {
        padding: 120px 20px !important;
        min-height: 800px !important;
    }
    
    .genius-hero-container {
        max-width: 1800px !important;
        gap: 100px !important;
    }
    
    .genius-hero-title {
        font-size: 8rem !important;
    }
    
    .genius-hero-subtitle {
        font-size: 2.75rem !important;
        margin: 0 0 60px 0 !important;
    }
    
    .genius-cta-button {
        font-size: 2.375rem !important;
        padding: 18px 60px !important;
    }
    
    .genius-hero-image {
        --scale: 1.3 !important;
    }
    
    .genius-hero-main-image {
        position: absolute !important;
        top: calc(-284px * var(--scale, 1)) !important;
        left: calc(-45px * var(--scale, 1)) !important;
        width: calc(1350px * var(--scale, 1)) !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 20px !important;
        z-index: 1 !important;
    }
    
    .genius-hero-dog-image {
        position: absolute !important;
        bottom: calc(67px * var(--scale, 1)) !important;
        left: calc(-306px * var(--scale, 1)) !important;
        width: calc(168px * var(--scale, 1)) !important;
        height: auto !important;
        z-index: 10 !important;
    }
}