/*
 Theme Name:   Astra Child
 Template:     astra
 Version:      1.0
 
*/


.site-content .ast-container {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.hero-section {
    height: 400px;
    width: 100vw;
}

.hero-fade {
    height: 400px;
    width: 100vw;
    position: absolute;
    background: linear-gradient(to bottom, rgba(128, 130, 133, 1)
, rgba(0, 0, 0, 0));
    z-index: 2;
}

.hero-img {
    height: 400px;
    width: 100vw;
    background-image: url("https://loothaven.co.uk/wp-content/uploads/2025/09/AdobeStock_286101300-scaled.jpeg");
    background-repeat: repeat;
    background-size: 200px;
    border-top: 1px solid yellow;
    border-bottom: 1px solid yellow;
    z-index: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-box {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(28,28,30,255);
    height: 300px;
    width: 800px;
    z-index: 4;
    border-radius: 20px;
    box-shadow: 5px 5px 10px black;
}

.hero-info {
    padding: 20px;
}

.hero-info p {
    margin-bottom: 5px;
}

.hero-info-img-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
}

.hero-info-img-container img {
    object-fit: contain;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.live-section {
    height: 600px;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 10px;
    background: linear-gradient(to bottom, #2f2f2e 50%, #1c1c1e 85%);
    background-size: 300px;
    padding-bottom: 10px;
}

.live-comps {
    display: flex;
    justify-content: center;
}

.live-comps img {
    height: 400px;
    border-radius: 10px;
    border: 1px solid yellow;
}

.live-heading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.how-section {
    width: 100vw;
    padding: 20px;
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.how-box {
    width: 800px;
    background-color: linear-gradient(grey, #1c1c1e);
    background-size: 400px;
    color: black;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #FFD700
}


.how-info-heading {
    margin-bottom: 15px;
}

.how-one h5, .how-three h5 {
    color: black;
}

.how-info-details {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.how-one, .how-two, .how-three {
    padding: 20px;
    border-radius: 10px;
}

.how-one, .how-three {
    background-color: white;
}

.how-two {
    background-color: black;
    color: white;
}

.how-to h5 {
    color: white;
}