/*
 Theme Name:   Hai Child
 Theme URI:    https://wdtwpthemes.wpengine.com/hai/
 Description:  Hai Child Theme
 Author:       the WeDesignTech team
 Author URI:   https://wedesignthemes.com/
 Template:     hai
 Version:      1.0.0
 Text Domain:  hai-child
*/
.rtl-content .post-navigation__arrow-next svg{
	transform: scaleX(-1)!important;
}
.rtl-content .post-navigation__arrow-prev svg{
	transform: scaleX(-1)!important;
}
.single-page-wrap {
  direction: ltr;
  text-align: left;
}
.rtl.post-type-archive-videos.paged-7 .videos-grid .video-card:last-child .video-title, .rtl.post-type-archive-videos.paged-7 .videos-grid .video-card:nth-last-child(2) .video-title{
	opacity: 0;
}
.post-type-archive-videos.paged-7 .videos-grid .video-card:last-child .video-title, .post-type-archive-videos.paged-7 .videos-grid .video-card:nth-last-child(2) .video-title{
	opacity: 0;
}
.wdt-listings-container .wdt-listings-item-wrapper.type1 .wdt-listings-item-top-section .wdt-listings-item-title a {
	font-size: 28px;
	font-weight: 500;
	text-transform: capitalize;
	letter-spacing: 0;
}
#video-lightbox button.video-lightbox__nav {
    background: #99002E;
    color: #ffffff;
    line-height: 1;
    width: 35px;
    height: 35px;
    margin: 0;
    padding: 0;
}
.gallery { 
	gap: 22px !important; 
}

@media screen and (min-width: 768px) {
  #footer .wdt-footer-tpl .wdt-accordion-toggle-holder .wdt-accordion-toggle-wrapper {
    max-width: 100%;
  }
}
#footer .wdt-footer-tpl .wdt-accordion-toggle-holder .wdt-accordion-toggle-title-holder .wdt-accordion-toggle-title {
	font-size: 30px;
	text-transform: capitalize;
	-webkit-background-clip: text;
	background-clip: none;
	-webkit-text-fill-color: blanchedalmond;
	background-image: unset;
	color: #fff;
}

@media only screen and (min-width: 1281px) and (max-width: 1540px) {
	.wdt-header-menu .wdt-primary-nav > li > a {
		padding: 8px 11px !important;
	}
}
@media(max-width: 1540px){
	.wdt-listings-container .wdt-listings-item-wrapper.type1 .wdt-listings-item-top-section .wdt-listings-item-top-section-content {
		margin-bottom: 30px;
		padding: 10px 10px 0; 
		grid-gap: 15px;
	}
	.wdt-listings-container .wdt-listings-item-wrapper.type1 .wdt-listings-item-top-section .wdt-listings-item-title a {
		font-size: 20px; 
	}
	.wdt-custom-image-content .wdt-content-item .wdt-content-subtitle {  
		flex-basis: 35% !important;
	}
	.wdt-custom-image-content .wdt-content-item .wdt-content-detail-group {
		flex-basis: 70% !important; 
	}
	.wdt-custom-service-h3 .wdt-content-item > div[class*="group"] > .wdt-content-title {
		flex: 0 0 25% !important;
	}
	.wdt-custom-service-h3 .wdt-content-item .wdt-content-description {
		flex: 0 0 60% !important;
	}
	.wdt-custom-service-h3 .wdt-content-item .wdt-content-elements-group {
		flex: 0 0 15% !important;
	}
	.wdt-simple-style.wdt-post-entry .blog-entry .entry-title h4{
		font-size: 20px;
	}
	.wdt-simple-style.wdt-post-entry .blog-entry .entry-button a.wdt-button::before { 
		width: 50px !important;
		height: 50px !important;
	}
	.wdt-simple-style.wdt-post-entry.entry-grid-layout .blog-entry div:not(.entry-thumb) {
		padding: 0 20px !important;
	}
	.wdt-simple-style.wdt-post-entry.entry-grid-layout .blog-entry div.entry-date {
		padding-top: 20px !important;
	}
	.wdt-posts-list-wrapper.swiper-container div[class*="bullet-pagination"] { 
		margin-top: 30px !important;
	}
	.wdt-simple-style.wdt-post-entry .blog-entry .entry-button a.wdt-button::after { 
		width: 50px !important;
		height: 50px !important;
		mask-size: 20px !important;
	}
}
    #primary.videos-archive{
        width: 100%;
    }
.videos-archive .container { 
    max-width: 1600px; 
    margin: 0 auto; 
    padding: 24px; 
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.25rem;
    row-gap: 50px;
    align-self: stretch;
}
@media (max-width: 1024px) { 
    .videos-grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}
@media (max-width: 640px)  {
    .videos-grid {
        grid-template-columns: 1fr;
    }
}


.videos-grid .video-card {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .25);
    border-radius: 8px; 
}
.thumb-wrap { 
    position: relative; 
    aspect-ratio: 12 / 9; 
    background: #111; 
    border-radius: 8px; 
    overflow: hidden; 
}
.thumb { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}
.thumb--placeholder { 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(135deg,#333,#444); 
}

.play-badge {
    position: absolute;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-weight: 700;
    border-radius: 999px;
    padding: 0;
    width: 40px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.video-title {
  margin: 15px 0 15px;
  font-size: 1.05rem; 
  font-weight: 700; 
  color: #000000;
  text-align: center;
      padding-left: 8px;
    padding-bottom: 8px;
    padding-right: 8px;
}

/* Lightbox */
.video-lightbox[hidden] { display: none; }
.video-lightbox { position: fixed; inset: 0; z-index: 9999; }
.video-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.7); }
.video-lightbox__dialog {
  position: absolute; 
  inset: 5% 8%;
  background: #000; 
  border-radius: 10px; 
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  display: flex; 
  flex-direction: column;
}
.video-lightbox__close {
    align-self: flex-end;
    margin: 8px !important;
    width: 35px;
    height: 35px;
    padding: 0 !important;
    line-height: 35px !important;
    border-radius: 8px !important;
    border: 0;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 24px !important;
}
.video-lightbox__frame-wrap { position: relative; flex: 1; }
.video-lightbox__frame-wrap iframe {
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%; 
  border: 0;
}
.pagination{
    margin-top: 20px;
}
.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
    align-items: center;
    justify-content: center;
} 

.pagination .page-numbers {
	background-color: transparent;
	display: inline-block;
	font-family: var(--wdtFontTypo_Base);
	border-radius: 8px;
	color: #000;
	font-size: 16px;
	padding: 6px 12px;
	border: 1px solid #ccc;
}
.pagination .page-numbers.current{
    background-color: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
    color:white;
}
.pagination .page-numbers:hover{
     border-color: var(--e-global-color-primary);
    color:white;
    background-color: var(--e-global-color-primary);
}
.video-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
	padding: 8px 15px;
  background: rgba(255,255,255,0.9);
  color: #000;
  border: none;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
}

.video-lightbox__nav.prev {
  left: 10px;
}

.video-lightbox__nav.next {
  right: 10px;
}

/* =========================
   LIGHTBOX RESPONSIVE FIX
========================= */

/* Tablet */
@media (max-width: 1024px) {
  .video-lightbox__dialog {
    inset: 6% 5%;
  }

  .video-lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* Mobile */
@media (max-width: 640px) {

  .video-lightbox__dialog {
    inset: 10% 3%;
    border-radius: 6px;
  }

  /* Move arrows slightly inside */
  .video-lightbox__nav.prev {
    left: 5px;
  }

  .video-lightbox__nav.next {
    right: 5px;
  }

  .video-lightbox__nav {
    width: 30px;
    height: 30px;
	padding: 6px 10px;
    font-size: 18px;
  }

  /* Close button smaller */
  .video-lightbox__close {
    width: 30px;
    height: 30px;
    font-size: 20px !important;
    line-height: 30px !important;
  }
}

/* Extra small (phones like 360px–420px) */
@media (max-width: 420px) {

  .video-lightbox__dialog {
    inset: 12% 2%;
  }

  /* Arrows more compact */
  .video-lightbox__nav {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  /* Push arrows slightly lower so they don't block center play area */
  .video-lightbox__nav {
    top: 55%;
  }
}
@media (max-width: 640px) { .video-lightbox__dialog { inset: 8% 4%; } }