/* html, body */
html, body{
  overflow-x: hidden;
}
/* svg */
.icon {
  display: inline-block;
  vertical-align: middle;
}

.search-icon {
  color: #333;
}

.btn-icon {
  margin-left: 6px;
}

/* normal css */
.overflow_hidden {
  overflow: hidden !important;
}
.overflow_x_hidden {
  overflow-x: hidden;
}

/* search page customizer css */
.default_search_form{
  margin-bottom: 20px;
}
.search__form {
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  justify-content: space-between;
  gap: 20px;
  margin-top:20px;
}
.search__form_detail {
  /* display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */ 
  /* justify-content: space-between; */
  /* justify-content: center; */
  margin-top: 20px;
  /* align-items: center; */
}
.search__form_detail .form__sortby {
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  justify-content: space-between;
  gap: 10px;
  max-width: 200px;
  align-items: center;
}
.search__form_detail .form__sortby span {
  width: fit-content;
  min-width: 55px;
}
.search__form_detail .form__sortby select {
  outline: none;
  padding: 0;
  height: 30px;
}
.custom-pagination {
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  gap: 10px;
  justify-content: center;
}
.custom-pagination a,
.custom-pagination span,
.custom-pagination .swiper-pagination-bullet {
  width: fit-content;
  height: 30px;
  background-color: #000000 !important;
  opacity: 1;
  min-width: 30px;
  color: #ffffff;
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  border: 1px solid #000000 !important;
  border-radius: 0px;
  margin: 0px !important;
}
.custom-pagination a.current,
.custom-pagination span.current,
.custom-pagination .swiper-pagination-bullet-active {
  background-color: #ffffff !important;
  color: #000000 !important;
}
.custom-pagination a.current svg,
.custom-pagination span.current svg {
  fill: #000000;
}
.search_article_list {
  /* display: -webkit-box;     
  display: -ms-flexbox;      
  display: flex;            
  align-items: flex-start;
  gap: 15px; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.search_article_list article a {
  text-decoration: none;
  color: #000000;
}
.search_article_list article {
  /* flex: 0 0 24%;
  max-width: 0 0 24%; */
  /* background: #eee; */
  padding: 10px;
  /* text-align: center; */
  /* border-radius: 6px; */
}
.article_list .article_item .thumb-hover,
.search_article_list .thumb-hover{
  min-height: 240px;
  max-height: 240px;
}
.article_list .article_item .thumb-hover a,
.search_article_list .thumb-hover a {
  display: block;
  min-height: inherit;
}
.article_list .article_item .thumb-hover img,
.search_article_list .thumb-hover img {
  width: 100%;
  min-height: inherit;
  object-fit: cover;
}

@media (max-width:767px){
  .article_list .article_item .thumb-hover,
  .search_article_list .thumb-hover{
    min-height: 215px;
    /* max-height: 215px; */
  }
}

/* search page */

.search__form input{
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 0px;
	border: 2px solid #000000;
	text-transform:uppercase;
	font-family:inherit;
}
.search__form button{
	flex: 0 0 10%;
}
.search-content{
	display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
	gap:20px;
}
.sidebar{
	flex: 0 0 320px;
  max-width: 320px;
}


/* NewsLetter */
.sticky-inner{
  padding:10px;
  padding-top:0px;
}
.newsletter_section{
  padding: 30px;
  background: #cd1719;
  text-align: center;
  color: #ffffff;
  /* margin-top: 20px; */

  /* additional for form and title gap */
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  flex-direction: column;
  gap: 30px;
}
#mlb2-6125511.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary{
	margin-top:40px;
}

@media (max-width:767px){
  .sticky-inner{
      padding: 0px;
  }
  .newsletter_section{
    padding:50px;
  }
}
/* .sticky-layout{
	display: -webkit-box;      
  display: -ms-flexbox;    
  display: flex;     
	gap:30px;
	align-items:flex-start;
} */

/* .sticky-content{
	flex: 0 0 68%;
} */

.sticky-sidebar{
	position:relative;
}

/* .sticky-inner{
	width:100%;
}

@media(max-width:1024px){

	.sticky-layout{
		flex-direction:column;
	}

	.sticky-sidebar{
		width:100%;
	}

} */



/* tooltip css */
/* author */

.tooltip-name {
  color: var(--color-glam-red);
  text-decoration: underline;
}
.tooltip-name {
  cursor: pointer;
}

/* tooltip */
.tooltip-wrapper {
  position: absolute;
  max-width: 400px;
  width: auto;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: 0.25s ease;
  z-index: 999;
}
.tooltip-wrapper a{
    margin-top:20px;
  }

.tooltip-wrapper.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width:767px){
	.search-content{
		flex-wrap:wrap;
	}
	.sidebar{
		flex: 0 0 100%;
		max-width:100%;
	}
  /* tooltip */
  .tooltip-wrapper {
    max-width: 300px;
  }
  
}

/* Article Design */



/* Mobile */
@media (max-width: 768px){
  .search_article_list{
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
  }
}



/* main css to here */

.article_list {
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 50px;
}
.article_list .article_item {
  flex: 0 0 24%;
  max-width: 24%;
}
.custom-pagination {
  margin-top: 50px;
}

@media (max-width: 1024px) {
  .article_list .article_item {
    flex: 0 0 32%;
    max-width: 32%;
  }
}

@media (max-width: 800px) {
  .article_list {
    justify-content: space-between;
  }
  .article_list .article_item {
    flex: 0 0 47%;
    max-width: 47%;
  }
}

/* header.css */
.header-nav-mb {
  background: #ffffff;
}

@media (max-width: 767px) {
  .header-nav-mb ul {
    padding: 5px !important;
  }
}

/* Home Page */

/* cover section */
.cover_section a:hover,
.cover_section h3:hover {
  color: #ffffff !important;
}
.cover_section.bg_black .post-title{
  color: #ffffff;
}
.slider_nav:after{
  content:unset !important;
}
/* .slider_nav.cover_next {
  top: unset;
  bottom:0px;
  right: unset;
  left: 54.5%;
  transform:translateX(-54.5%);
}
.slider_nav.cover_prev {
  top: unset;
  bottom: 0px !important;
  left: 50% !important;
  transform: translateX(-50%);
} */
.slider_nav.cover_next,
.slider_nav.cover_prev {
  position: static;
  transform: unset;
  margin-top: 0px;
}

.cover_slider .swiper-wrapper {
  padding-bottom: 50px;
}
.slider_nav.swiper-button-prev,
.slider_nav.swiper-button-next {
  width: 40px;
  height: 40px;
  background: #7b0e0f;
  border-radius: 50%;
  padding: 12px;
  z-index: 5;
}
.cover_wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    min-height: 40px;
}


@media (max-width: 767px) {
  .cover_slider .swiper-wrapper {
    padding-bottom: 0px;
  }
  .cover_slider {
    margin-top: 50px;
  }
  .slider_nav.cover_prev {
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    left: 5px !important;
  }
  .slider_nav.cover_next {
    position: absolute;
    left: unset;
    top: 50% !important;
    transform: translateY(-50%);
    right: 5px !important;
  }
  .cover_wrapper{
    min-height: auto;
  }
}


/* COMMON LAYOUT */
.post-layout {
  display: grid;
  gap: 20px;
}

.post-layout .post-grid {
  display: grid;
  grid-auto-flow: row;
  gap: 20px;
}

.post-layout .featured-post img {
  height: 100%;
  aspect-ratio: 4/2.93;
  object-fit: cover;
  width: 100%;
}


.post-grid .post-item .thumb-hover:not(.portrait){
  min-height: 240px;
  max-height: 240px;
}
.post-grid .post-item .thumb-hover a{
  min-height: inherit;
  display: block;
}
.post-grid .post-item .thumb-hover img{
  width: 100%;
  display: block;
  min-height: inherit;
  object-fit: cover;
}
.author_meta{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  height: 16.375px;
}
.design1 .author_meta,
.design3 .author_meta{
  justify-content: flex-start;
}
.author_meta span.separator{
  font-size: 9px;
  line-height: 1;
}
/* DESIGN 1 */
.post-layout.design1 {
  grid-template-columns: 1.5fr 1fr;
}

.post-layout.design1 .post-grid {
  grid-template-columns: 1fr 1fr;
}

.post-layout.design1 .featured-post img {
  min-height: 470px;
}

/* DESIGN 2 */
.post-layout.design2 {
  grid-template-columns: 1fr;
}

.post-layout.design2 .post-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

.post-layout.design2 .featured-post img {
  min-height: 400px;
  aspect-ratio: 4/2;
}

/* DESIGN 3 */
.post-layout.design3 {
  grid-template-columns: 2fr 1fr;
}

.post-layout.design3 .post-grid {
  grid-template-columns: 1fr;
}

.post-layout.design3 .featured-post img {
  min-height: 400px;
}

/* DESIGN 4 */
.post-layout.design4 {
  grid-template-columns: 1fr;
}

.post-layout.design4 .post-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* DESIGN 5 */
.post-layout.design5 {
  grid-template-columns: 1fr;
}

.post-layout.design5 .post-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

.size-portrait{
  width: 100%;
}
.featured_article_center .featured-post{
  text-align: center;
}



@media (max-width:1023px){
  .tablet_layout_fix_1 .post-layout.design3{
    grid-template-columns: 1fr;
  }
  .tablet_layout_fix_1 .post-layout.design3 .post-grid{
    grid-template-columns: 1fr 1fr;
  }
  .tablet_layout_fix_1 .post-layout.design2 .post-grid{
    grid-template-columns: 1fr 1fr;
  }
  .post-layout.design4 .post-grid{
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* TABLET */
@media (max-width: 900px) {
  .post-layout.design1,
  .post-layout.design1 .post-grid {
    grid-template-columns: 1fr 1fr;
  }

  .post-layout.design2 .post-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
}

/* MOBILE */
@media (max-width: 767px) {
  .post-layout.design1,
  .post-layout.design3 {
    grid-template-columns: 1fr;
  }

  .post-layout.design1 .post-grid,
  .post-layout.design2 .post-grid,
  .post-layout.design3 .post-grid,
  .post-layout.design4 .post-grid,
  .post-layout.design5 .post-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fesyen .post-layout.design2 .post-grid,
  .cantik .post-layout.design2 .post-grid{
    grid-template-columns: 1fr;
  }

  .post-layout .featured-post img {
    min-height: 350px !important;
    width:100%;
  }
  .post-grid .post-item .thumb-hover:not(.portrait){
    min-height: 190px;
    max-height: 190px;
  }
  /* .fesyen .post-layout.design2 .featured-post img,
  .cantik .post-layout.design2 .featured-post img {
    min-height: 530px !important;
  } */
}

/* video slider */
.video_poster {
  overflow: hidden;
  position: relative;
}

.video_poster a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: var(--transition-default);
}
.video_poster a svg {
  width: 40px;
  height: 40px;
}

/* banner section */
.video-section {
  position: relative;
  /* height: 600px; */
  overflow: hidden;
  min-height: 100vh;
}

.video-poster {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 10;
}
.video-section iframe.bg-video{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 ratio */
  min-height: 100%;
  min-width: 177.77vh; /* ensures coverage on wide screens */
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@media(max-width:1023px){
  .video-section iframe.bg-video{
    min-width: 100vh;
  }
  .video-section{
    min-height:50vh;
  }
}

@media (max-width:800px){
  .video-section{
    min-height:85vh;
  }
}

@media(max-width:767px){
  .video-section iframe.bg-video{
      min-width: 120vh;
  }
  .video-section{
      min-height:400px !important;
  }
}

@media(max-width:320px){
  .video-section iframe.bg-video{
      min-width: 140vh;
  }
}

.video-content {
  position: absolute;
  color: #fff;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 100%;
  height: 100%;
  background: #0000004d;
}
.video_content{
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
  padding-bottom: 50px;
  gap:10px;
}
.video_content{
  max-width: 800px;
  margin: auto;
}
@media (max-width:767px){
  .video-section {
    height: 400px;
  }
  .video_content{
    max-width: 400px;
    justify-content: center;
    padding: 10px;
  }
}

/* left right sections */
.custom_section{
    display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
    justify-content: space-between;
    gap: 30px;
}
.left_section{
    flex:1 1 auto;
}
.right_section{
    flex: 0 0 320px;
    max-width: 320px;
}
.e-magazine .right_section{
    flex: 0 0 290px;
    max-width: 290px;
}
.fesyen .featured-post,
.cantik .featured-post{
    text-align:center;
}
.featured-post.text-left{
    text-align:left;
}
@media (max-width:767px){
   .custom_section{
        flex-wrap:wrap;
   }
   .right_section,
   .e-magazine .right_section{
        flex: 0 0 100%;
        max-width: 100%;
    } 
    .text-mb-center{
      text-align:center;
    }
}

/* modal */
/* .media-modal */
/* LIGHTBOX CONTAINER */

.slb {
  position: fixed;
  inset: 0;
  background: rgb(110 110 110);
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.35s;
  z-index: 99999;
  padding: 20px;
}
body.modal_open {
  overflow: hidden;
}
.slb.active {
  opacity: 1;
  visibility: visible;
}

.slb-inner {
  width: 100%;
  max-width: 1000px;
  max-height: 80vh;
  position: relative;
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  align-items: center;
  justify-content: center;
}

.slb-content {
  display: none;
  width: 100%;
  max-height: 80vh;
  animation: fadeIn 0.35s ease;
}

.slb-content img,
.slb-content video,
.slb-content iframe {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}

.slb-content iframe {
  aspect-ratio: 16/9;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.slb-close {
  position: absolute;
  top: -45px;
  right: 0;
  color: #fff;
  background: #000000;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: -webkit-box;      /* Old iOS, Safari */
  display: -ms-flexbox;      /* IE 10 */
  display: flex;             /* Modern browsers */
  align-items: center;
  justify-content: center;
}

.slb-counter {
  position: absolute;
  top: -45px;
  left: 0;
  color: #fff;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 12px;
  border-radius: 20px;
}

.slb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 12px;
}

.slb-prev {
  left: -60px;
}
.slb-next {
  right: -60px;
}

.slb-loader {
  text-align: center;
  color: #fff;
}

.slb-spinner {
  width: 45px;
  height: 45px;
  border: 4px solid rgba(255, 255, 255, 0.2);
  border-top: 4px solid #fff;
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.slb-error {
  display: none;
  text-align: center;
  color: #ff6b6b;
  font-size: 18px;
}

@media (max-width: 768px) {
  .slb-prev {
    left: 0px;
  }
  .slb-next {
    right: 0px;
  }

  .slb-nav {
    font-size: 34px;
  }

  .slb-close {
    top: -40px;
  }

  .slb-counter {
    top: -40px;
  }
}