#container {
    position: relative;
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
}

.frame{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.75;
}

iframe {
    width: 100%;
    height: 100%;
    border: none; 
}

.hText{
    position: absolute;
    top: 56%;
    left: 54%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    pointer-events: none;
    z-index: 1;
}
.p1Header {
    top: 46%;
    position: relative;
    font-family: 'azonix';
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 4.5rem;
    text-shadow: 10px 10px 20px rgba(0, 0, 0, 2);
    z-index: 1;
    text-align: left;
}
.keywords {
    text-shadow: 10px 10px 20px rgba(1, 1, 1, 2);
    line-height: 1.5;
    font-family: 'telegraf';
    font-size: 1.6rem;
    color: white;
    text-align: left;
    padding-right: 20%;
    position: relative;
    max-width: 800px;
}

.logoCover {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 160px;
    height: 53px;
    background-color: rgb(0, 0, 0);
    z-index: 10;
}





/* -------------------------------------------------------Problem------------------------------------------------ */

/* -------------------------------------------------------overarall for ani---------------------------------------------- */

#overallContainer{
    position: relative;
    width: 100vw;
    height: 90vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 3fr 1.5fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.p2Ani1 {
    grid-area: 2 / 2 / 3 / 3;
    width: 88%;
    justify-self: center;
    align-self: center;
    cursor: pointer;
    opacity: 0.8;
}

.oText {
    grid-area: 2 / 2 / 3 / 3;
    width: 65%;
    pointer-events: none;
    color: #e0e0e0;
    text-align: left;
    min-width: 250px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    z-index: 10;
    justify-self: flex-end;
    align-self: center;
    padding-top: 28%;
    padding-right: 12%;
    
}
.oLine1{
    grid-area: 2 / 1 / 3 / 2;
    width: 50%;
    justify-self: flex-start;
    align-self: center;
    border: 0;
    height: 2px;
    background: white;
}
.oLine2{
    grid-area: 2 / 3 / 3 / 4;
    width: 50%;
    justify-self: flex-end;
    align-self: center;
    border: 0;
    height: 2px;
    background: white;
}

/* -------------------------------------------------horizontal--------------------------------------------- */

.horizontal-scroll {
    display: flex;
    width: 1000vw; /* Adjust based on the number of sections */
    overflow-y: hidden;
}
/* ---------------------------------------------------------------------------------------------- */

/* -------------------------------------------1------------------------------------------------- */
.unpack1{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.5fr 2fr 0.5fr 2fr 1fr;
    grid-template-rows: 1fr 2.5fr 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
 }

 .unpackImg1{
    width: 100%;
    align-self: center;
    justify-self: center;
    grid-area: 2 / 2 / 3 / 3;
    border-radius: 5%;
 }

 .unpackText1{
    grid-area: 2 / 4 / 3 / 5;
    width: 80%;
    align-self: center;
    justify-self: flex-start;
    text-align: left;
 }

 .scrollPrompt{
    color: #979797;
    align-self: center;
    justify-self:center;
    grid-area: 2 / 5 / 3 / 6;
    font-size: 1.2rem;
}

/* ----------------------------------------other---------------------------------------------- */

.unpack2{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: grid;
grid-template-columns: repeat(2, 1fr) 0.2fr repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr) 2fr repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
 }

.unpackImg2{
    width: 65%;
    align-self: center;
    justify-self: center;
    grid-area: 2 / 2 / 5 / 3;
    border-radius: 5%;
 }

 .unpackText2{
    grid-area: 3 / 4 / 4 / 5;
    width: 80%;
    align-self: center;
    justify-self: center;
    text-align: left;
 }

/* 
 ----------------------------------------vid and footer---------------------------------------------- */

 .unpack6 {
    position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 2.5fr 1fr;
grid-template-rows: 1.2fr 2fr 0.1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

.play{
grid-area: 1 / 2 / 2 / 3;
justify-self: center;
align-self: end;
margin-bottom: 8%;
}

#myVideo {
width: 100%;
height: auto;
border-radius: 24px;
/* border: 2px solid white; */
}

.videoContainer6 {
grid-area: 2 / 2 / 3 / 3;
width: 100%;
height: auto;
align-content: center;
justify-content: center;
}
/* -------------------footer--------------------- */

.footerContainer {
position: relative;
height: 30vh;
width: 100%;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows:  1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}

/* Image Container */
.image-container1 {
grid-area: 1 / 2 / 2 / 3;
width: 100%;
justify-self: center;
align-self: center;
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-direction: row;
gap: 20px;
padding: 10px;
flex-wrap: wrap;
z-index: 5;
}

.item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-transform: lowercase;
width: 30%;
transition: transform 0.3s ease;
}

.item:hover { transform: scale(1.1) translateY(-10px); }

.item img {
width: 25%;
height: auto;
border-radius: 8px;
margin-bottom: 16px;
}

.item p {
text-align: center;
font-size: 1.6rem;
margin: 0;
margin-top: 20px;
cursor: pointer;
}
/* -------------------other-------------------- */
.unpack4{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: grid;
grid-template-columns: 0.3fr 2fr 0.2fr repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr) 2fr repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
 }

.unpackImg3{
    width: 85%;
    align-self: center;
    justify-self: center;
    grid-area: 2 / 2 / 5 / 3;
    border-radius: 5%;
 }

 .unpackText4{
    grid-area: 3 / 4 / 3 / 5;
    width: 100%;
    align-self: center;
    justify-self: center;
    text-align: left;
 }

 .unpackImg4{
    width: 100%;
    align-self: center;
    justify-self: center;
    grid-area: 2 / 2 / 5 / 3;
    border-radius: 5%;
 }