/* content-video-block.css */

.custom-content-video-block {

  display: flex;

  align-items: stretch; /* force columns to match height */

  min-height: 400px; /* or whatever suits your design */

  color: #fff; /* typical text color if background is dark */

  background-size: cover;

  background-position: center;

}

/* handle left vs right video */

.custom-content-video-block.video-position-left {

  flex-direction: row;

}

.custom-content-video-block.video-position-left {

  flex-direction: row-reverse;

}

/* Content column is 60% */

.custom-content-video-block .content-column {

    width: 60%;

    box-sizing: border-box;

    padding: 100px 0px; /* you can adjust the text padding as you like */

    display: flex;

    justify-content: center;

    align-items: center;

}

/* Video column is 40%, no padding, full height */

.custom-content-video-block .video-column {

  width: 40%;

  box-sizing: border-box;

  padding: 0; /* no padding around video */

  margin: 0; 

  overflow: hidden; /* ensures the video won't overflow */

  position: relative; /* needed for positioning the video and thumbnail */

}

/* Make the video fill the entire column */

.custom-content-video-block .video-column video {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover; /* fill the entire height without distorting aspect ratio */

}

/* Video wrapper to maintain aspect ratio */

.custom-content-video-block .video-wrapper {

  position: relative;

  height: 100%;

  width: 100%;

}

/* Optional: style the button */

.custom-content-video-block .content-video-button {

  display: inline-block;

  margin-top: 20px;

  padding: 8px 60px;

  background-color: transparent;

  border: 1px solid #fff;

  border-radius: 35px;

  color: #fff;

  text-decoration: none;

  font-size: 16px;

  font-weight: 500;

  transition: all 0.3s ease;

}

.content-div p {

    font-size: 26px;

    line-height: 40px;

}

.content-div h2 {

    font-size: 48px;

    color: white;

}

.custom-content-video-block .content-div {

    width: 70%;

    max-width: 520px;

}

.custom-content-video-block .content-div h2 {

    margin-bottom: 35px;

    line-height: 70px;

    font-weight: 500;

}

/* Video overlay (blue tint) */

.custom-content-video-block .video-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(0, 131, 213, 0.25); /* #0083D540 */

    pointer-events: none; /* Allow clicks to pass through */

}

/* Video thumbnail styling */

.custom-content-video-block .video-thumbnail {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    cursor: pointer;

    z-index: 2; /* Above the video but below play button */

    display: flex;

    justify-content: center;

    align-items: center;

}

.custom-play-button {

    width: 60px;

    height: 60px;

}

/* Play button styling */

.custom-content-video-block .play-button {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 80px;

    height: 80px;

    background-color: rgba(0, 0, 0, 0.6);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background-color 0.3s ease;

    z-index: 3; /* Above the thumbnail */

}

.custom-content-video-block .play-button:hover {

    background-color: rgba(0, 0, 0, 0.8);

}

.custom-content-video-block .play-button .dashicons {

    font-size: 40px;

    width: 40px;

    height: 40px;

    color: white;

}

/* For embedded videos */

.custom-content-video-block .embed-container {

    position: relative;

    width: 100%;

    height: 100%;

}

.custom-content-video-block .embed-container iframe,

.custom-content-video-block .embed-container object,

.custom-content-video-block .embed-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

}

.height721 {

  height: 721px;

}

/* Responsive styles */

@media (max-width: 980px) {

    .custom-content-video-block .video-column {

        width: 100%;

        height: 300px; /* Set a fixed height for mobile */

    }

    .custom-content-video-block .content-div {

        width: 100%;

    }

    .custom-content-video-block .content-column {

        width: 100%;

        padding: 60px 24px;

    }

    .custom-content-video-block.video-position-left, 

    .custom-content-video-block.video-position-right {

        flex-direction: column;

    }

    .content-div p {

        font-size: 17px;
        line-height: 32px;


    }

    .custom-content-video-block .content-div h2 {

        line-height: 40px;

        font-size: 28px;

    }

}

.height721 .content-column {

    padding: 0px;

}

.height721 .content-div h2 {

    margin-top: 0px;

}

@media (max-width: 1366px) {

    .height721 {

        height: auto;

    }

    .height721 .content-column {

        padding: 100px 0px;

    }

}

.wp-block-custom-content-video-block h2 {

    margin-top: 0px;

}

.wp-block-custom-content-image-block h2{

    margin-top: 0px;

}