.video-module__content {

    border: 1px solid #e3e3e8;

    box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

    border-radius: 16px;

    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);

    --tw-shadow-colored: 0 20px 25px -5px 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a, 0 8px 10px -6px 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;

    aspect-ratio: 16 / 9;

    height: 396px;

    max-width: 768px;

    display: block;

    object-fit: cover;

}



.video-module__wrapper {

    position: relative;

    width: 100%;

    max-width: 768px;

    margin: 0 auto;

}



.video-module__container {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 16px;

    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    background: #000;

}
.video-module__embed{
	height:100%;
}


.video-module__overlay {

    position: absolute;

    inset: 0;

       background: #ffffffc7;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    z-index: 10;

    cursor: pointer;

    transition: opacity 0.3s ease, background 0.3s ease;

}



.video-module__overlay:hover .video-module__play-btn,

button.video-module__play-btn,

button.video-module__play-btn:active{

    border: none;

}




.video-module__overlay:hover .video-module__play-btn.orange-icon {

    background: #ed731d4d;

}



.video-module__overlay:hover .video-module__play-btn.slate-icon {

    background: rgba(108, 108, 161, 0.22);

}



.video-module__overlay:hover {

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

}



.video-module__text {

    color: #666666;

    font-size: 14px;

    margin-top: 16px;

    text-align: center;

    max-width: 80%;

    z-index: 11;

    font-weight: 500;

    line-height: 143%;

    transition: opacity 0.3s ease;

}



.video-module__play-btn {

    width: 80px;

    height: 80px;

    border: none;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    cursor: pointer;



    overflow: visible;

    position: relative;

}



.video-module__play-btn::before,

.video-module__play-btn::after {

    content: '';

    position: absolute;

    height: 100%;

    width: 100%;

    inset: 0;

    border-radius: 50%;

    opacity: 0.2;



}





.video-module__play-btn::before {

    opacity: 0.2;   /* зовнішній шар */

    animation-delay: 0s;

    animation: pulse-big 2s infinite ease-in-out;

}



.video-module__play-btn::after {

    opacity: 0.15;

    animation-delay: 0.5s;

    animation: pulse 2s infinite ease-in-out;

}



/* Анімація пульсації */

@keyframes pulse {

    0% {

        transform: scale(1);

        opacity: inherit; /* кожен шар бере свій opacity */

    }

    50% {

        transform: scale(1.25);

        opacity: 0;

    }

    100% {

        transform: scale(1);

        opacity: inherit;

    }

}

@keyframes pulse-big {

    0% {

        transform: scale(1);

        opacity: inherit; /* кожен шар бере свій opacity */

    }

    50% {

        transform: scale(1.5);

        opacity: 0;

    }

    100% {

        transform: scale(1);

        opacity: inherit;

    }

}









.video-module__play-btn.orange-icon,

.video-module__play-btn.orange-icon::before{

    background: #ed731d33;

}



.video-module__play-btn.slate-icon,

.video-module__play-btn.slate-icon::after{

    background: #69699b1a;

}



.video-module__play-btn > svg {

    display: flex;

    width: 22px;

    height: auto;

    margin-right: -3px;



    transition: transform 0.3s ease;

}



.video-module__play-btn:hover > svg {

    transform: scale(1.1); /* трохи збільшуємо трикутник */

}



button.video-module__play-btn.slate-icon {

    color: #69699b;

}



button.video-module__play-btn.orange-icon {

    color: #ed731d;

}



/* Після кліку: граючий стан */

.video-module__container.playing .video-module__overlay {

    opacity: 0;

    pointer-events: none;

    background: transparent;

}



.video-module__container.playing .video-module__text {

    opacity: 0;

}



/* Ховер під час відтворення */

.video-module__container.playing:hover .video-module__overlay {

    opacity: 1;

    pointer-events: auto;

    z-index: 10;

    background: rgba(0, 0, 0, 0.1);

}



.video-module__container.playing:hover .video-module__play-btn {

    transform: scale(1.1);

    opacity: 1;

}



/* Стан паузи: фон та текст видно */

.video-module__container.paused .video-module__overlay {

    opacity: 1;

    pointer-events: auto;

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

}



.video-module__container.paused .video-module__text {

    opacity: 1;

}



.video-module__container.paused .video-module__play-btn {

    opacity: 1;

    transform: scale(1);

}



.video-module__container.paused:hover .video-module__play-btn {

    transform: scale(1.1);

    opacity: 1;

}



/* Відео та embed завжди на всю площу */

.video-module__content,

.video-module__embed iframe {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}





/*Colored text*/

.video-module__group {

    display: flex;

    align-items: center;

    gap: 4px;

}



p.video-module__colored-text {

    margin-bottom: 0;

    margin-top: 8px;

    font-size: 12px;

    line-height: 16px

}



.orange-icon .video-module__group-decor path {

    fill: #ed731d;

}



.orange-icon p.video-module__colored-text {

    color: #ed731d;

}



.slate-icon .video-module__group-decor path {

    fill: #69699b;

}



.slate-icon p.video-module__colored-text {

    color: #69699b;

}





.video-module__group-decor {

    /* початкове положення на рівні тексту */

    transform: translateY(0);

    animation: floatUpDown 3s ease-in-out infinite;

}



@keyframes floatUpDown {

    0%   { transform: translateY(3px); }   /* трохи нижче тексту */

    25%  { transform: translateY(1px); }   /* трохи вниз */

    50%  { transform: translateY(-2px); }  /* трохи вище тексту */

    75%  { transform: translateY(1px); }   /* назад вниз */

    100% { transform: translateY(3px); }   /* повертається трохи нижче тексту */

}



/*End Colored text*/

@media screen and (max-width: 767.98px) {

    .video-module__content {

        height: 300px;

        max-width: 100%;

        margin-left: auto;

        margin-right: auto;

    }

}