.keyword-top{
top: 10% !important;
}
@media (max-width: 1024px) {
.large-hero-heading{
    font-size: 4.3rem !important;
}
.keyword-top{
    top: 43% !important;
}
}

.videoSide{
    width: 50%;
    object-fit: cover;
    height: 370px;

}

@media (min-width: 1536px) {
   
    .videoSide{
        width: 50%;
        padding-right: 20px;
        object-fit: contain;
        height: 450px !important;
    
    
    }
}
.keyword-bottom {
    bottom: 10% !important;
    right: 20% !important;
}
@media (max-width: 768px){
    .page-header-keywords {
        position: absolute;
        top: -10vw !important;
        width: 100%;
        height: 25rem
    }
    .keyword-bottom {
        bottom: 26% !important;
        right: 15% !important;
    }   
    .keyword-top{
        top: 10% !important;
    }
}
@media (max-width: 1024px){
    .keyword-bottom {
        bottom: 37% ;
        right: 20% ;
    }   
    .s-keyword-heading{
        font-size: 30px
    }
}
@media (min-width: 1920px){
    .keyword-bottom {
        bottom: 37% ;
        right: 20% ;
    }   
    .s-keyword-heading{
        font-size: 36px !important;
    }
}

.gridEight {
    width: 100%;
    padding: 0px 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important; /* 4 columns */
    gap: 20px; /* Equal gap between boxes */
}
@media (max-width: 1024px) {
    .gridEight {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on tablets */
    }
}

@media (max-width: 768px) {
    .gridEight {
        margin-top: 20px;
        padding: 0px 0px;
        grid-template-columns: repeat(1, 1fr) !important; /* 1 column on mobile */
    }
}
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 40px 20px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: white;
    border: 1px solid white;
    /* background-color: #6B05B4; */
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    justify-items: center;             
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s ease-in-out, 
                background-color 0.3s ease-in-out;
            
}
.box h1 {
    font-weight: bold;
    height: 30%;
    line-height: 1.5rem;
}
.box p {
    font-size: 0.9rem;
    line-height: 1.3rem;
    color: white;
    opacity: 0.9;
}
.box:hover h1, 
.box:hover p {
    text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.103);
}
.box:nth-child(1):hover {
    transform: scale(1.1) rotate(2deg); 
    box-shadow: 0px 15px 30px rgba(107, 5, 180, 0.5); 
    background-color: #892CDC; }
.box:nth-child(2):hover {
    transform: scale(1.1) rotate(-2deg); 
    box-shadow: 0px 15px 30px rgba(107, 5, 180, 0.5); 
    background-color: #892CDC; }
@media (max-width: 768px){
    .box:nth-child(9)
 {
    grid-column: 1 !important; 
    justify-self: end;
    width: 100%; 
}
.box:nth-child(10){
    grid-column: 1 !important;
    justify-self: start; 
    width: 100%; 
}
}