img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

h1,h2 {
    font-family: 'suez one', Helvetica, sans-serif;
    color: #ebdac2;
}

h3,h4,h5,h6,a,p,button {
    font-family: 'poppins', Helvetica, sans-serif;
    color: #ebdac2;
}

/* Hero Section */

.hero-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.hero-section h2 {
    position: absolute;
    top: 3%;
    left: 32.5%;
    width: 35%;
    text-align: center;
    font-family: 'fredericka the great', serif;
    text-shadow: 0px 3px 40px rgb(0, 0, 0);
}  

.hero-section h5 {
    position: absolute;
    top: 3%;
    right: 3%;
    text-align: center;
    text-shadow: 0px 3px 15px rgb(0, 0, 0);
}

.hero-section .hero-logo {
    position: absolute;
    bottom: 20%;
    right: 10%;
    width: 25%;
}

.hero-section div {
    position: absolute;
    left: 3%;
    bottom: 10%;
    width: 50%;
    color: #ebdac2;
    text-shadow: 0px 3px 10px rgb(0, 0, 0);
}

.hero-section div p{
    font-size: 0.75rem;
    font-weight: 400;
}

.hero-section div h3 {
    font-size: 1rem;
    font-weight: 500;
}

.hero-section .hero-background {
    filter: brightness(0.95) contrast(90%);
}

/* Join the revolution Section */

.revolution {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.revolution .revolution-image {
    width: 60%;
    position: relative;
    background-size: cover;        /* Ensures the image covers the entire element */
    background-position: center;   /* Centers the background image */
    background-repeat: no-repeat;  /* Prevents the image from repeating */
}

.revolution .revolution-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./images/big steak slight zoom.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.7) contrast(90%);
    z-index: -1; /* Ensures the pseudo-element stays behind the text */
}


.revolution .revolution-image h2 {
    width: 60%;
    position: absolute;
    bottom: 25%;
    left: 20%;
    color: #fff;
    text-align: center;
    background-color: rgba(235, 218, 194, 0.5);
    border-radius: 1rem;
    text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.9);
    font-size: 2rem;
    font-family: "fredericka the great", serif;
}
.revolution .revolution-image h4 {
    width: 75%;
    position: absolute;
    bottom: 10%;
    left: 12.5%;
    color: #ffffff;
    text-align: center;
    background-color: rgba(235, 218, 194, 0.5);
    border-radius: 1rem;
    text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.9);
    font-size: 1rem;
}


.highlight {
    color: #dbae5a;
}

.revolution .revolution-text {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 7%;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0);
    background-color: #e9ddcdcb;
}

.revolution .revolution-text h3 {
    text-align: left;
    width: 100%;
    color: #191819be;
}

.revolution .revolution-text p {
    text-align: justify;
    color: #191819cc;
}



.unapologetically-beef {
    width: 100%;
    background-color: #e9ddcd;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 0.3rem 0rem 1.4rem;
}

.unapologetically-beef  img {
    width: 15%;
    align-self: center;
    justify-self: center;
}

.unapologetically-beef  h3 {
    width: 80%;
    text-align: center;
    color: #191819;
    align-self: center;
}

/* Sign up Section */ 

.sign-up {
    width: 100%;
    height: 40rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    filter: brightness(0.95);

    margin-top: 1.3rem;
}

.sign-up::before {
    content: "";
    position: absolute;
    background-image: url('./images/big\ red\ meat\ chunk.jpg');
    background-size: cover; /* Cover the entire area */
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.5) contrast(90%);
    z-index: -1;
}

.sign-up h2 {
    text-align: center;
    border: solid 3px #fff;
    height: 100%;
    width: 100%;
    font-size: 3rem;
    color: #fff;
    border-radius: 1rem;
    background-color: #191819;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'fredericka the great', Helvetica, sans-serif;
}

.sign-up a {
    align-self: center;
    justify-self: center;
    width: 40%;
    height: 20%;
    text-decoration: none;
}

/* PACKS SECTION */

.packs {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    gap: 2rem;
}

.packs div p {
    color: #b4a898;
}

.pack {
    padding: 1rem 2rem;
    border: solid 3px #77736b;
    border-radius: 1rem;
    width: 80%;
}

.pack h2 {
    font-size: 2rem;
    color: #635c4d;
}
.pack h3 {
    color: #635c4d;
    font-size: 1.3rem;
}
.pack h4 {
    color: #635c4d;
    font-size: 1.5rem;
    text-align: right;
}

.packs h3 {
    width: 100%;
    margin-bottom: 0.5rem;
}

.pack-details {
    padding: 1rem 2rem 2rem 2rem;
}



.hardtoread {
    color: #8a8379;
}

.revolution .revolution-image div {
    display: none !important;
}


#short-about {
    display: none;
}
#very-short-about {
    display: none;
}


/* FRESH NOT FROZEN SECTION */

#freshnotfrozen {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#freshnotfrozen div {
    border-top: #191819 solid 1px;
    border-bottom: #191819 solid 1px;
    width: 80%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 3rem;
}

#freshnotfrozen div img {
    width: 15%;
}

#freshnotfrozen div h3 {
    color: #191819;
    font-size: 3rem;
    text-align: center;
}






/* Media Statements */
@media only screen and (max-width: 780px) {
    #short-about {
        display: block;
    }
    #long-about {
        display: none;
    }
    #freshnotfrozen div h3 {
        font-size: 2rem;
    }
}

@media only screen and (max-width: 695px) {

    .revolution .revolution-text h3 {
        font-size: 1.5rem;
    }
    .revolution .revolution-text p {
        font-size: 1rem;
    }
    .revolution .revolution-image h2 {
        font-size: 1.5rem;
    }
    .revolution .revolution-image h4 {
        font-size: 0.9rem;
    }

    .packs {
        flex-direction: column;
    }


}

@media only screen and (max-width: 600px) {

    .hero-section {
        height: 100vh;
        justify-content: center;
        background-color: #191819;
    }
    .hero-background {
        height: 100%;
        object-fit: cover;
    }
    .hero-section .hero-logo {
        width: 60%;
        bottom: 0%;
        right: -5%;
    }
    .hero-section h2 {
        left: 5%;
        width: 73%;
        top: 7.5%;
    }
    #about-us-container {
        bottom: 5.2%;
        left: 6%;
    }
    #long-about {
        display: none;
    }
    #short-about {
        display: block;
    }
    #very-short-about {
        display: none;
    }

    #freshnotfrozen div h3 {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 520px) {
    #about-us-container {
        display: none;
    }
    .hero-section h2 {
        left: 15%;
        top: 10%;
    }
    .hero-section .hero-logo {
        right: 20%;
    }
    .sign-up a {
        width: 160%;
    }

    .revolution {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 60rem;
    }
    .revolution .revolution-text {
        height: 50%;
        width: 100%;
    }
    .revolution .revolution-image {
        height: 50%;
        width: 100%;
    }

    .revolution .revolution-image h2 {
        padding: 1rem;
        width: 90%;
        left: 5%;
        bottom: 50%;
    }
    .revolution .revolution-image h4 {
        padding: 0.6rem;
    }

    .pack-details {
        padding: 0rem;
    }
    .pack-details h3{
        padding: 1rem;
    }

    #freshnotfrozen div img {
        width: 30%;
    }
    #freshnotfrozen div {
        gap: 1rem;
    }
}

@media only screen and (max-width : 400px) {
    .pack-details .pack h2 {
        font-size: 1.5rem;
    }
    .revolution .revolution-text {
        height: 39rem;
    }
    #freshnotfrozen div img {
        width: 40%;
    }
}

@media only screen and (max-width: 300px) {

    .pack-details .pack div p {
        font-size: 0.8rem;
    }
    .hero-section .hero-logo {
        width: 90%;
        right: 5%;
    }
    .sign-up h2 {
        font-size: 2rem;
    }
    .sign-up a {
        height: 6rem;
    }

    .revolution .revolution-text p {
        font-size: 0.9rem;
    }
    .revolution .revolution-text h3 {
        font-size: 1.3rem;
    }
    #freshnotfrozen div img {
        width: 40%;
    }
    #freshnotfrozen div {
        gap: 2rem;
        padding: 2rem 1rem;
    }
    #freshnotfrozen div h3 {
        font-size: 1rem;
    }
}