/* Reset default style */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* main */
body {

    
    background-color: rgb(0, 0, 0);
    color: #fff; 
    line-height: 1.6;
    padding: 20px;
}

header {
    text-align: center;
    margin-bottom: 40px; /* space gazrda */
    
}

.main-header {
    font-family: 'Poppins-black';
    
    font-size: 2.5rem; 
    margin-bottom: 10px; 
    cursor: pointer; 
    transition: color 0.3s ease; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
}

.main-header:hover {
    color: #FF5733; /* hoover color*/
}

.sub-header {
    font-family: 'Poppins-regular';
    font-size: 1.2rem; 
    color: #ccc; 
    margin-bottom: 20px; 
}

.container {
    max-width: 1200px; 
    margin: 0 auto;
    display: grid; /* layout */
    grid-template-columns: repeat(3, 1fr); /* Three columns */
    gap: 20px; /* Gap between  items */
}

.frame {
    position: relative;
    overflow: hidden; 
    width: 100%; 
    aspect-ratio: 3 / 4; 
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease;
}

.frame:hover {
    transform: scale(1.05); 
}

.key-frame {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    background-color: red; 
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.text-animation {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7); 
    color: #fff;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.frame:hover .text-animation {
    transform: translateY(0); 
}

.text-animation p {
    font-family: 'Poppins-regular';
    margin: 0;
    font-size: 1rem;
    color: #fff;
    text-align: center;
    opacity: 0.9;
}

/* Animation for each frame */
#frame1 {
    animation: frameAnimation1 4s ease infinite;
}

#frame2 {
    animation: frameAnimation2 4s ease infinite;
}

#frame3 {
    animation: frameAnimation3 4s ease infinite;
}

#frame4 {
    animation: frameAnimation4 4s ease infinite;
}

#frame5 {
    animation: frameAnimation5 4s ease infinite;
}

#frame6 {
    animation: frameAnimation6 4s ease infinite;
}

@keyframes frameAnimation1 {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0);
    }
}

@keyframes frameAnimation2 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes frameAnimation3 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes frameAnimation4 {
    0% {
        transform: rotate(0);
    }
    50% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}

@keyframes frameAnimation5 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes frameAnimation6 {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}