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

.center {
align-items: center;
}
.uppercase {
    text-transform:uppercase;
}



main {
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    position: relative;
    background-image: url(../img/CR6_4168_web.jpg);
}

main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black overlay with 20% opacity */
    z-index: 1;
}

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    width: 60vw;
    height: 60vh;
    column-gap: 1rem;
    margin: 20vh;
    color: #f0f0f0;
    z-index: 2;
    /* row-gap: 20px; */
}

@media screen and (max-width: 600px)  {
    .container {
        width: 80vw;
        height: 100vh;
        column-gap: 1rem;
        margin: 10vh;
    }

    .item {
        justify-content: center;
        align-items: center;
    }
    
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    /* border: 1px solid #ccc; */
    font-size: 24px;
    /* background-color: #f0f0f0; */
}

.item4, .item5, .item6, .item7  {
    grid-column: 1 / 4;
    
}

.item7 {
    display: flex; flex-direction: column;
}
/* .item5 {
    grid-column: 1 / 4;
} */

img {
    max-width: 100%;
}

h1 {
    font-size: 5rem;
}

.gold {
    background: linear-gradient(to bottom, #cfc09f 27%, #ffecb3 40%, #3a2c0f 78%); 
    -webkit-background-clip: text;
    background-clip:text;
    -webkit-text-fill-color: transparent;
    color: #fff;
    
}

.red {
    color: red;
}

hr.gold {
    border: none;
    height: 6px; /* Adjust the thickness of the <hr> */
    /* border-radius: 4px; Rounded corners */
    margin: 20px 0; /* Adjust spacing */
    background: linear-gradient(to bottom, #cfc09f 27%, #ffecb3 40%, #3a2c0f 78%);
    background-clip: padding-box;
}

/* img.gold {
    background: linear-gradient(to bottom, #cfc09f 27%, #ffecb3 40%, #3a2c0f 78%);
    mix-blend-mode: multiply; /* Blend mode */

/* } */

/* .item4 img.gold {
    width: 100%; /* Adjust the size as needed 
    height: auto;
    mask-image: url('../img/LogoText2.png'); /* Apply the mask 
    mask-repeat: no-repeat;
    mask-size: contain;
    background: linear-gradient(to bottom, #cfc09f, #ffecb3, #3a2c0f);
    -webkit-mask-image: url('../img/LogoText2.png'); /* For WebKit-based browsers 
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mix-blend-mode: normal;
    display: block; /* Ensure the image is a block element 
} */

.goldoverlay {
    width: 100%; /* Adjust the size as needed */
    height: 20vh;
    mask-image: url('../img/LogoText2.png'); /* Apply the mask */
    mask-repeat: no-repeat;
    mask-size: contain;
    background: linear-gradient(to bottom, #cfc09f, #ffecb3, #3a2c0f);
    -webkit-mask-image: url('../img/LogoText2.png'); /* For WebKit-based browsers */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mix-blend-mode: normal;
    display: block; /* Ensure the image is a block element */
}

.item1, .item3, .Logo {
    visibility: hidden;
    display: none;
}