/* gallery video page css */

/*====================================*/
/*        GALLERY VIDEO PAGE CSS      */
/*====================================*/

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

/*====================================*/
/*          MAIN SECTION              */
/*====================================*/

.gallery-vid{
    width: 100%;
    min-height: 100vh;

    padding: 70px 5%;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 45%,
            #fff8f3 100%
        );

    position: relative;
    overflow: hidden;
}

/* Soft Floating Background Effects */

.gallery-vid::before{
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    top: -120px;
    left: -120px;

    border-radius: 50%;

    background: rgba(59,130,246,0.07);

    filter: blur(85px);
}

.gallery-vid::after{
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    bottom: -120px;
    right: -120px;

    border-radius: 50%;

    background: rgba(249,115,22,0.06);

    filter: blur(85px);
}

/*====================================*/
/*           SECTION TITLE            */
/*====================================*/

/* H2 Main Heading */

.gallery-vid h2{
    position: relative;
    z-index: 2;

    text-align: center;

    font-size: 2.4rem;
    font-weight: 800;

    color: #0f172a;

    margin-bottom: 18px;

    letter-spacing: 0.5px;

    line-height: 1.3;
}

/* Gradient Highlight */

.gallery-vid h2 span{
    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #06b6d4,
            #f97316
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Decorative Line */

.gallery-vid h2::after{
    content: "";

    display: block;

    width: 95px;
    height: 5px;

    margin: 18px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #f97316
        );
}

/* Optional Subtitle */

.gallery-subtitle{
    position: relative;
    z-index: 2;

    text-align: center;

    max-width: 750px;

    margin:
        0 auto 50px auto;

    color: #64748b;

    font-size: 1rem;

    line-height: 1.8;
}

/*====================================*/
/*            GRID SYSTEM             */
/*====================================*/

.gallery-grid{
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 32px;

    align-items: start;
}

/*====================================*/
/*             VIDEO CARD             */
/*====================================*/

.gallery-tem{
    background: rgba(255,255,255,0.96);

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid rgba(226,232,240,0.9);

    box-shadow:
        0 10px 25px rgba(15,23,42,0.05);

    position: relative;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border 0.35s ease;

    display: flex;
    flex-direction: column;

    height: 100%;
}

/* Premium Top Border */

.gallery-tem::before{
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #06b6d4,
            #f97316,
            #8b5cf6
        );
}

/* Hover Effect */

.gallery-tem:hover{
    transform: translateY(-8px);

    border-color: rgba(59,130,246,0.18);

    box-shadow:
        0 18px 40px rgba(59,130,246,0.10),
        0 10px 25px rgba(249,115,22,0.08);
}

/*====================================*/
/*          VIDEO / IMAGE             */
/*====================================*/

.gallery-tem video,
.gallery-tem iframe,
.gallery-tem img{
    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    display: block;

    background: #e2e8f0;

    transition: transform 0.45s ease;
}

/* Zoom Hover */

.gallery-tem:hover video,
.gallery-tem:hover iframe,
.gallery-tem:hover img{
    transform: scale(1.03);
}

/*====================================*/
/*           CONTENT AREA             */
/*====================================*/

.gallery-tem .content{
    padding: 22px;

    display: flex;
    flex-direction: column;

    flex-grow: 1;
}

/*====================================*/
/*         VIDEO TITLE H5             */
/*====================================*/

.gallery-tem h5{
    color: #0f172a;

    font-size: 1.08rem;
    font-weight: 700;

    line-height: 1.5;

    margin-bottom: 12px;

    position: relative;

    padding-left: 14px;
}

/* Left Accent Bar */

.gallery-tem h5::before{
    content: "";

    position: absolute;

    left: 0;
    top: 5px;

    width: 5px;
    height: 70%;

    border-radius: 20px;

    background:
        linear-gradient(
            180deg,
            #3b82f6,
            #f97316
        );
}

/* Paragraph */

.gallery-tem p{
    color: #475569;

    font-size: 0.95rem;

    line-height: 1.7;

    margin-bottom: 18px;

    flex-grow: 1;
}

/*====================================*/
/*             BUTTONS                */
/*====================================*/

.gallery-tem a,
.gallery-tem button{
    width: fit-content;

    padding: 12px 22px;

    border: none;
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #06b6d4
        );

    color: white;

    font-size: 0.92rem;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Button Hover */

.gallery-tem a:hover,
.gallery-tem button:hover{
    transform: translateY(-2px);

    box-shadow:
        0 10px 20px rgba(59,130,246,0.18);
}

/*====================================*/
/*              TAGS                  */
/*====================================*/

.gallery-tem .tag{
    position: absolute;

    top: 14px;
    left: 14px;

    background: rgba(255,255,255,0.92);

    color: #2563eb;

    padding: 7px 14px;

    border-radius: 50px;

    font-size: 0.75rem;
    font-weight: 700;

    border: 1px solid rgba(59,130,246,0.12);

    backdrop-filter: blur(10px);

    box-shadow:
        0 4px 12px rgba(15,23,42,0.05);
}

/*====================================*/
/*            EMPTY STATE             */
/*====================================*/

.gallery-grid:empty::after{
    content: "No Videos Available";

    width: 100%;

    padding: 60px 20px;

    text-align: center;

    color: #64748b;

    font-size: 1.1rem;
    font-weight: 600;

    border-radius: 20px;

    background: rgba(255,255,255,0.75);

    border: 2px dashed #cbd5e1;
}

/*====================================*/
/*          CUSTOM SCROLLBAR          */
/*====================================*/

.gallery-vid::-webkit-scrollbar{
    width: 10px;
}

.gallery-vid::-webkit-scrollbar-track{
    background: #f1f5f9;
}

.gallery-vid::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #60a5fa,
            #fb923c
        );

    border-radius: 20px;
}

/*====================================*/
/*         RESPONSIVE DESIGN          */
/*====================================*/

/* Tablet */

@media (max-width: 992px){

    .gallery-grid{
        grid-template-columns:
            repeat(auto-fit, minmax(280px, 1fr));
    }

    .gallery-vid h2{
        font-size: 2rem;
    }
}

/* Mobile */

@media (max-width: 768px){

    .gallery-vid{
        padding: 45px 20px;
    }

    .gallery-grid{
        gap: 24px;

        grid-template-columns: 1fr;
    }

    .gallery-vid h2{
        font-size: 1.7rem;
    }

    .gallery-subtitle{
        font-size: 0.92rem;

        margin-bottom: 38px;
    }

    .gallery-tem .content{
        padding: 18px;
    }

    .gallery-tem h5{
        font-size: 1rem;
    }

    .gallery-tem p{
        font-size: 0.9rem;
    }
}