/*
Theme Name: OH Block
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oh-block
Tags: 
*/


.youtube-playlist {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-item {
    padding-bottom: 15px;
    padding-left: 30px;
    padding-right:30px;
    max-width: 100%;
}

.video-content {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    padding-top:30px;
}

.video-iframe {
    position: relative;
    width: 50%;
    height: 0;
    padding-top: 28.125%; /* 16:9 aspect ratio (height = width * 9/16) */
    overflow: hidden;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow for a 3D effect */
}

.video-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px; /* Rounded corners for the iframe itself */
}

.video-info {
    width: 50%;
}

.video-info h3 {
    margin: 0 0 10px;
    font-size: 1.2em;
}

.video-info p {
    color: #fff;
}

@media (max-width: 768px) {
    .video-content {
        flex-direction: column;
    }

    .video-iframe,
    .video-info {
        width: 100%;
    }
}

/* View and breakpoint of Navigation Block */
.header-group {
    justify-content:space-between;
}

.wpem-main {
    color: #ffffff;
}

.wpem-main wpem-form-wrapper wpem-event-filter-wrapper event_filters { 
    visibility: hidden;
}

.wpem-event-listings .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-date .wpem-event-date-type .wpem-to-date {
    visibility: hidden;

}

:root {
    --wpem-dark-color: #ffffff;
    --wpem-gray-color: #ffffff;
}

.wpem-theme-button, a.wpem-theme-button, button.wpem-theme-button, input.wpem-theme-button {
    background-color: #565656;
    visibility: hidden;
    margin-top: -3rem;
}
/***Mobile Navigation Breakpoint Block Styling Start***/
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: block !important;
}

body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none !important;
}

@media (min-width: 1000px) {
	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;;
	}
	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
	}
}

/**Mobile Navigation Breakpoint Block Styling End***/

.wpem-main {
    color: #ffffff;
}
/***Contact Form 7 Styling Start***/

.contact-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: rgba(70, 70, 70, 0.9);
  font-weight: 700;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;    
}

.contact-text {
  background-color: rgba(70, 70, 70, 0.9);
  padding: 10px 10px;
  width: 100%;
  font-weight: 700;
  border-radius: 5px;
  color: white;
}

.contact-textarea {
  background-color: rgba(70, 70, 70, 0.9);
  padding: 10px 10px;
  width: 100%;
  font-weight: 700;
  border-radius: 5px;
  color: white;
}


.contact-dropdown {
  background-color: rgba(70, 70, 70, 0.9);
  padding: 10px 10px;
  width: 100%;
  font-weight: 700;
  color: white;
  border-radius: 5px;
}

.wpcf7-form {
  dislpay: flex;
  flex-direction: column;
  justify-content:center;
}

/***Contact Form 7 Styling End***/

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/wp-content/themes/oh-block/assets/fonts/static/RobotoCondensed-Regular.ttf') format('ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/wp-content/themes/oh-block/assets/fonts/static/RobotoCondensed-SemiBold.ttf') format('ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/wp-content/themes/oh-block/assets/fonts/static/RobotoCondensed-Bold.ttf') format('ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
}


body .wp-container-core-group-is-layout-3.wp-container-core-group-is-layout-3 {
    justify-content:space-between;
}

.wp-container-core-group-is-layout-3.wp-container-core-group-is-layout-3 {
    justify-content: space-around;
}


/* Navigation Styles Start */
.wp-block-navigation-item__label:hover {
    color: #ABB8C3;
    background-color: rgb(0, 0, 0, 0.7);
    border-radius: 5px;
    padding: 5px 10px 5px 10px;
}

span:hover {
    background-color: rgb(0, 0, 0, 0.7);
}

.wp-block-navigation-item__label.current-menu-item {
    background-color: rgb(0, 0, 0, 0.7);
}

.odd_navmenu {
    padding-right: 20px;
}

ul.product {
  margin:10px;
}
/***Navigation Styles End***/

/***Custom Slider Styling Start***/
.custom-slider {
  position: relative;
  max-width: 100%;
  margin: auto;
  width:auto;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  position: relative;
  min-width: 100%;
  box-sizing: border-box;
}

.slide img {
  width: 100%;
  display: block;
  margin: auto;
  height:auto;
}

.slide-content {
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7   ); /* semi-transparent background */
  color: white;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 0 5px rgba(0, 0, 0, 1);
  border-radius: 20px;
}

.slide-pstyle {
    font-size: inherit;
}

.slide-buttons {
  flex-direction: row;
  justify-content:space-evenly;
}

.cta-button {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.cta-button:hover {
  background-color: rgba(50, 50, 50, 0.7);
  border-color: rgba(255, 255, 255, 0.5);
}

.navigation {
  text-align: center;
  position: relative;
  bottom: 20px;
  width: 100%;
}

.navigation-bar {
  display: inline-block;
  width: 20px;
  height: 5px;
  background-color: rgba(66, 66, 66, 0.5);
  box-shadow: 0 0 5px rgba(255, 255, 255, .5);
  margin: 0 5px;
  cursor: pointer;
}

.navigation-bar.active {
  background-color: rgba(0, 0, 0, 0.9);
}
/***Custom Slider End***/

/***Flip Card Styling Start***/
.flipcard-row {
  flex-direction: row;
}

/*body .is-layout-flex > * {*/
/*  margin: 10px;*/
/*}*/

/*body .is-layout-grid   > * {*/
/*  margin: 10px;*/
/*}*/

.flip-card {
  background-color: transparent;
  width: 100%;
  position: relative;
  margin: 20px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-card-inner {
  position: absolute;
  width: 100%;
  height:auto;
  margin:auto;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}

.flip-card-front {
  background-size:100%;
  color: black;
}

.flip-card-front img {
  width:100%;
  color: black;
}

.flip-card-front-content{
    position: relative;
    width: 100%;
    top: 0;
}

.flip-card-front-content h3{
    color:#fff;
}

.flip-card-back {
  background-color: #232323;
  box-shadow: 0 0 10px rgba(255, 255, 255, .2);
  color: white;
  transform: rotateY(180deg);
}

.flip-card-back-content{
    position: relative;
    width: 90%;
    margin:auto;
    top: 25%;
}

/* Padding trick to maintain aspect ratio */
.flip-card::before {
  content: '';
  display: block;
  padding-bottom: 100%; /* This ensures the height is always equal to the width, making it a square */
}

.flip-card-inner {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/***Flip Card Styling End***/

/***Block Theme Lastest Post Star***/
.wp-block-latest-posts.wp-block-latest-posts__list {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    justify-content:center;
    padding: 20px;
}

.wp-block-latest-posts__post-title {
    position:relative;
    margin:auto;
    width:80%;
    left: 10%;
    font-size: 30px;
    text-decoration: none;
    color:white;
}
.wp-block-latest-posts__featured-image img {
    position: relative;
    left: 10%;
    width: 80%;
    height: auto;
    border-radius: 25px;
    margin-top: 40px;
}

.wp-block-latest-posts__post-excerpt {
    position: relative;
    margin: 0 auto 20px auto;
    width: 80%;
    
}

/***Block Theme Lastest Post End***/

/***Post Featured Image Start***/
.wp-block-post-featured-image img {
    margin-top: 20px;
}
/***Post Featured Image Start***/

/***Mobile Responsiveness Start***/
@media screen and (max-width: 1000px) {
   
  /***Custom Slider Responsiveness Start***/    
  .slide-content {
    position: relative;
    justify-content: flex-start;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  /***Custom Slider Responsiveness End***/
  
  /***Flip Card Styling End***/
  .flip-card {
    width: 80%;
    height: auto;
  }
  
  .flipcard-row {
    flex-direction: column;
  }

  .flip-card-inner {
    width: 100%;
    height: 100%;
    position: absolute;
    margin:auto;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flip-card-back-content{
    position: relative;
    width: 90%;
    height:auto;
    margin:auto;
    top: 0%;
    font-size: 4vw;
  }
  /***Flip Card Styling End***/

  /***Set Breakpoint for Block Navigation Start***/
  .wp-block-navigation__responsive-container-open:(.always-shown) {
    display: none !important;
  }
  
  .wp-block-navigation__responsive-container:(.hidden-by-default):(.is-menu-open) {
    display: block !important;
  }
  /***Set Breakpoint for Block Navigation Start***/

} 
/***Mobile Responsiveness End***/