@media (max-width: 767px) {
    #hero_top .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        height: auto !important;
    }

    #hero_top .content {
        padding: 0 !important;
    }
    
    #hero_top {
        background: none !important;
    }
    
    #hero_top .flex_column {
        margin: 0 !important;
        border-radius: 0 !important;
        background: #000;
    }
    
    .mobile-hero {
        margin-bottom: -8px;
    }
}

@media (min-width: 768px) {
    .hero-button,
    .hero-title {
        text-align: left !important;
    }

    #hero_top .flex_column_table {
        width: 610px !important;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    #hero_top .container {
        height: 70vh;
    }
}

#hero_top {
    background-position: 50% 75% !important;
}

.puppies-col {
    text-align: center;
}

.reguler-button .avia-button {
    letter-spacing: 0.5px;
    border: none !important;
    padding: 15px 35px;
}

.puppy-box img {
    width: 300px;
    border-radius: 100%;
}

.puppy-box .team-member-name {
    font-size: 30px;
    margin-top: 25px;
}

.hero-button .avia-button {
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    padding: 16px 35px;
}

.hero-title .av-special-heading-tag {
    font-weight: bold !important;
}

@media (min-width: 990px) {
    .title-with-logo {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: 30px;
    }

    .title-with-logo .av-special-heading-tag {
        text-align: left;
        width: calc(100% - 150px);
    }

    .title-with-logo .av-subheading {
        margin: 0;
        width: 120px;
    }
}
.colored-border img {
    aspect-ratio: 3 / 2 !important;
    object-fit: cover;
    object-position: center center;
    border: 2px solid var(--secondary);
    padding: 5px;
}

.puppies-wrapper .flex_column_table {
    width: 1000px !important;
    max-width: 100%;
    margin: 0 auto;
}