.page {
   position: relative;
}

.main-cnt {
   max-width: 920px;
}

.main-cnt-half {
   max-width: 880px;
}

.meta-card {
   background-color: black;
   position: absolute;
   right: 0px;
   top: 0px;
   width: 17.8%;
   margin-top: 1.5rem;
   padding: 40px 50px;
}

.meta-head {
   text-transform: uppercase;
   color: grey;
   font-weight: bolder;
   font-family: var(--ivar-headline-regular);
   margin-top: 1rem;
}

.meta-value {
   color: grey;
   font-weight: bold;
   margin-top: 4px;
}

.meta-value-link {
   color: white;
   display: inline-block;
   padding-top: 4px;
}

@media(max-width: 991px) {

   .main-cnt,
   .main-cnt-half {
      max-width: 620px;
   }

   .page {
      display: flex;
      flex-direction: column;
   }

   .meta-card {
      position: static;
      width: 100%;
   }
}

/* ── Blog Sections ── */
.blog-center {
   margin-top: 1.5rem;
}
/* Button Styles */
.card-body .btn-dark {
   background-color: #212529 !important;
   color: #fff !important;
   border: 1px solid #212529 !important;
   margin-top: 12px !important;
   padding: 12px 42px !important;
   letter-spacing: 0.5px !important;
   border-radius: 6px !important;
   display: inline-block !important;
   text-decoration: none !important;
   transition: all 0.3s ease !important;
}

.card-body .btn-dark:hover {
   background-color: #000 !important;
   border-color: #000 !important;
   color: #fff !important;
}

.card-body .btn-dark:active {
   background-color: #1a1e21 !important;
   border-color: #1a1e21 !important;
}

.card-body .btn-dark:focus {
   outline: none !important;
   box-shadow: 0 0 0 0.2rem rgba(33, 37, 41, 0.4) !important;
}

.card-body .btn-dark:link,
.card-body .btn-dark:visited {
   text-decoration: none !important;
}

.card-body .blog-description,
.card-body .blog-description * {
   color: #000000 !important;
   font-family: inherit !important;
   line-height: 1.65 !important;
   font-size: inherit !important
}


.card-body .blog-description.blog-title,
.blog-title,
.blog-image-title,
.blog-header-title {
   font-family: var(--ivar-headline-regular) !important;
   font-size: 37px !important;
   font-weight: 400 !important;
   line-height: 1.1 !important;
   margin: 0 0 20px 0 !important;
   letter-spacing: 0.05em !important;
   text-transform: uppercase !important;
   color: #000000 !important;
}




.card-body .blog-description a:not(.btn):not(.btn-dark) {
   color: #000000 !important;
   text-decoration: underline !important;
   font-weight: bold !important;
}
.card-body .blog-description .btn,
.card-body .blog-description .btn-dark,
.card-body .btn-dark {
   color: #fff !important;
   text-decoration: none !important;
   font-weight: normal !important;
}

.card-body .blog-description p,.card-body .blog-description span,
.card-body .blog-description strong,
.card-body .blog-description b,.card-body .blog-description li {
   font-size: 16px !important;
   margin-bottom: 1.2em !important;
   line-height: 1.7 !important;
}

@media (min-width: 1200px) {
   .card-body .blog-description p,
      .card-body .blog-description span ,.card-body .blog-description strong,
         .card-body .blog-description b,.card-body .blog-description li {
      font-size: 17.5px !important;
   }
}


.card-body .blog-description h1 {
   font-size: 32px !important;
}

.card-body .blog-description h2 {
   font-size: 28px !important;
}

.card-body .blog-description h3 {
   font-size: 24px !important;
}

.card-body .blog-description h4 {
   font-size: 20px !important;
}

.card-body .blog-description h5,
.card-body .blog-description h6 {
   font-size: 18px !important;
}

.card-body .blog-description h1,
.card-body .blog-description h2,
.card-body .blog-description h3,
.card-body .blog-description h4,
.card-body .blog-description h5,
.card-body .blog-description h6 {
   font-family: var(--ivar-headline-regular) !important;
   font-weight: bolder !important;
   line-height: 1.1 !important;
   letter-spacing: 0.05em !important;
   text-transform: uppercase !important;
   margin: 1.5em 0 0.8em 0 !important;
   color: #000000 !important;
}


.card-body .blog-description ul {
   list-style-type: disc !important;
   padding-left: 1.8em;
}

.card-body .blog-description ul li {
   list-style: disc !important;
}
.card-body .blog-description ol {
   counter-reset: item;
   list-style: none;
   padding-left: 1.8em;
}

.card-body .blog-description ol li {
   counter-increment: item;
   position: relative;
}

.card-body .blog-description ol li::before {
   content: counter(item) ") ";
   position: absolute;
   left: -1.8em;
}
.card-body .blog-description table,
.card-body .blog-description th,
.card-body .blog-description td {
   font-size: 16px !important;
   line-height: 1.7 !important;
}

@media (min-width: 1200px) {
   .card-body .blog-description table,
   .card-body .blog-description th,
   .card-body .blog-description td {
      font-size: 17.5px !important;
   }
}

@media (max-width: 575px) {
   .card-body .blog-description table,
   .card-body .blog-description th,
   .card-body .blog-description td {
      font-size: 15.5px !important;
   }
}
.card-body .blog-description li {
   margin-bottom: 0.6em;
}

.card-body .blog-description blockquote {
   border-left: 5px solid #ddd;
   padding-left: 1.5em;
   margin: 1.8em 0;
   font-style: italic;
}

.card-body .blog-description table {
   width: 100%;
   border-collapse: collapse;
   margin: 1.5em 0;
}

.card-body .blog-description th,
.card-body .blog-description td {
   border: 1px solid #ccc;
   padding: 10px;
   text-align: left;
}

.card-body .blog-description img {
   max-width: 100% !important;
   height: auto !important;
   display: block;
   margin: 1.5em auto;
   border-radius: 8px;
}

@media (max-width: 991px) {

   .card-body .blog-description.blog-title,
   .blog-title,
   .blog-image-title,
   .blog-header-title {
      font-size: 32px !important;
   }

  .card-body .blog-description p,
     .card-body .blog-description span, .card-body .blog-description strong,
   .card-body .blog-description b {
      font-size: 16px !important;
   }
}

@media (max-width: 575px) {

   .card-body .blog-description.blog-title,
   .blog-title,
   .blog-image-title,
   .blog-header-title {
      font-size: 28px !important;
   }

   .card-body .blog-description p ,
   .card-body .blog-description span, .card-body .blog-description strong,
   .card-body .blog-description b,.card-body .blog-description li{
      font-size: 15.5px !important;
   }
}

/* ── Center Layout Image ── */
.blog-main-img {
   width: 100%;
   height: 500px;
   object-fit: cover;
   margin-top: 1rem;
   margin-bottom: 20px;
}

/* ── Left / Right Layout Side Image ── */
.blog-side-img {
   height: 500px;
   background-size: cover;
   background-position: center;
   border-radius: 8px;
   width: 100%;
}

@media(max-width: 991px) {

   .blog-main-img,
   .blog-side-img {
      height: 320px;
   }
}

@media(max-width: 575px) {

   .blog-main-img,
   .blog-side-img {
      height: 200px;
   }
}

/* ── YouTube Video ── */
.youtube-video {
   width: 100%;
   aspect-ratio: 16/9;
   height: 550px;
   margin-top: 40px;
}

.youtube-video iframe {
   width: 100%;
   height: 100%;
   border: 0;
}

@media(max-width: 991px) {
   .youtube-video {
      height: 320px;
   }
}

@media(max-width: 575px) {
   .youtube-video {
      height: 200px;
   }
}

/* ── YouTube Video Side ── */
.youtube-video-side {
   width: 100%;
   height: 500px;
   overflow: hidden;
   border-radius: 8px;
}

.youtube-video-side iframe {
   width: 100%;
   height: 100%;
   border: 0;
}

@media(max-width: 991px) {
   .youtube-video-side {
      height: 320px;
   }
}

@media(max-width: 575px) {
   .youtube-video-side {
      height: 200px;
   }
}

/* ── YouTube Short Center ── */
.youtube-short-con {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 30px 0;
}

.youtube-short {
   width: 410px;
   height: 729px;
   overflow: hidden;
   border-radius: 12px;
   flex-shrink: 0;
}

.youtube-short iframe {
   width: 100%;
   height: 100%;
   border: 0;
}

@media(max-width: 991px) {
   .youtube-short {
      width: 320px;
      height: 569px;
   }
}

@media(max-width: 575px) {
   .youtube-short {
      width: 240px;
      height: 427px;
   }
}

/* ── YouTube Short Side ── */
.youtube-short-side-con {
   width: 100%;
}

.youtube-short-side {
   width: 100%;
   height: 729px;
   overflow: hidden;
   border-radius: 12px;
   flex-shrink: 0;
}

.youtube-short-side iframe {
   width: 100%;
   height: 100%;
   border: 0;
}

@media(max-width: 991px) {
   .youtube-short-side {
      width: 320px;
      height: 569px;
      margin: 0 auto;
   }
}

@media(max-width: 575px) {
   .youtube-short-side {
      width: 240px;
      height: 427px;
      margin: 0 auto;
   }
}

/* ── Uploaded Video Center ── */
.video-center {
   width: 100%;
   height: 500px;
   overflow: hidden;
   border-radius: 8px;
   margin-top: 40px;
   margin-bottom: 12px;
}

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

/* ── Uploaded Video Side ── */
.video-side {
   width: 100%;
   height: 600px;
   overflow: hidden;
   border-radius: 8px;
}

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

@media(max-width: 991px) {

   .video-center,
   .video-side {
      height: 320px;
   }
}

@media(max-width: 575px) {

   .video-center,
   .video-side {
      height: 200px;
   }
}

/* ── Image Gallery ── */
.gallery-con {
   width: 100%;
   height: 320px;
   overflow: hidden;
   position: relative;
}

.gallery-con img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

@media(max-width: 991px) {
   .gallery-con {
      height: 320px;
   }
}

@media(max-width: 575px) {
   .gallery-con {
      height: 200px;
   }
}

.gallery-caption {
   position: absolute;
   bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   padding: 10px 15px;
   color: #fff;
   font-size: 14px;
   text-align: center;
   border-radius: 4px;
}

/* ── Blog Carousel ── */
.blog-carousel {
   width: 100%;
   position: relative;
}

.blog-carousel .media-slider {
   width: 100%;
   position: relative;
}

.blog-carousel .media-slider .slick-list,
.blog-carousel .media-slider .slick-track {
   height: 100%;
}

.blog-carousel .blog-slide-item {
   width: 100%;
   position: relative;
   overflow: hidden;
   border-radius: 10px;
}

.blog-carousel .blog-slide-item img {
   width: 100%;
   height: 550px;
   object-fit: cover;
   border-radius: 10px;
   display: block;
}

.blog-carousel .blog-slide-item a {
   display: block;
   cursor: zoom-in;
}

/* Carousel Arrows */
.blog-carousel .media-slider .slick-prev,
.blog-carousel .media-slider .slick-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 20;
   width: 45px;
   height: 45px;
   display: flex !important;
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.35);
   border-radius: 50%;
   cursor: pointer;
   border: none;
   color: #fff;
   font-size: 16px;
}

.blog-carousel .media-slider .slick-prev {
   left: 20px;
}

.blog-carousel .media-slider .slick-next {
   right: 20px;
}

.blog-carousel .media-slider .slick-prev:before,
.blog-carousel .media-slider .slick-next:before {
   display: none;
}

/* Carousel Thumbnail Dots */
.blog-carousel .slick-dots {
   display: flex !important;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 14px;
   padding: 0;
   list-style: none;
   position: relative;
}

.blog-carousel .slick-dots li {
   width: auto;
   height: auto;
   margin: 0;
}

.blog-carousel .slick-dots li button {
   padding: 0;
   border: none;
   background: transparent;
   cursor: pointer;
}

.blog-carousel .slick-dots li button:before {
   display: none;
}

.blog-carousel .slick-dots .thumb img {
   width: 80px;
   height: 80px;
   object-fit: cover;
   border-radius: 6px;
   opacity: 0.5;
   transition: opacity 0.3s ease, border 0.3s ease;
   display: block;
}

.blog-carousel .slick-dots li.slick-active .thumb img {
   opacity: 1;
   border: 2px solid #000;
}

@media(max-width: 991px) {
   .blog-carousel .blog-slide-item img {
      height: 380px;
   }

   .blog-carousel .slick-dots .thumb img {
      width: 60px;
      height: 60px;
   }
}

@media(max-width: 575px) {
   .blog-carousel .blog-slide-item img {
      height: 260px;
   }

   .blog-carousel .slick-dots .thumb img {
      width: 50px;
      height: 50px;
   }

   .blog-carousel .media-slider .slick-prev,
   .blog-carousel .media-slider .slick-next {
      width: 38px;
      height: 38px;
      left: 10px;
      right: 10px;
   }
}

/* ── Video Gallery Base ── */
.gallery-con-yt-video iframe,
.gallery-con-yt-short iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
}

.gallery-con-video video {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
   object-fit: contain;
}

/* YT Video Gallery */
.gallery-con-yt-video {
   width: 100%;
   height: 320px;
   overflow: hidden;
   position: relative;
   border-radius: 8px;
}

@media(max-width: 991px) {
   .gallery-con-yt-video {
      height: 280px;
   }
}

@media(max-width: 575px) {
   .gallery-con-yt-video {
      height: 200px;
   }
}

/* Uploaded Video Gallery */
.gallery-con-video {
   width: 100%;
   height: 320px;
   overflow: hidden;
   position: relative;
   border-radius: 8px;
   background: #000;
}

@media(max-width: 991px) {
   .gallery-con-video {
      height: 280px;
   }
}

@media(max-width: 575px) {
   .gallery-con-video {
      height: 200px;
   }
}

/* YT Short Gallery */
.gallery-con-yt-short {
   width: 100%;
   aspect-ratio: 9/16;
   overflow: hidden;
   position: relative;
   border-radius: 8px;
   max-width: 300px;
   margin: 0 auto;
}

@media(max-width: 991px) {
   .gallery-con-yt-short {
      max-width: 240px;
   }
}

@media(max-width: 575px) {
   .gallery-con-yt-short {
      max-width: 180px;
   }
}

/* Card Styles */
.card {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   height: auto;
   color: inherit;
   word-wrap: break-word;
   background-color: transparent;
   background-clip: border-box;
   border: 0px solid transparent;
   border-radius: 0px;
}

.card-header {
   padding: 0;
   margin-bottom: 0;
   color: inherit;
   background-color: transparent;
   border-bottom: 0px solid transparent;
}

.card-body {
   padding: 0;
}

@media (max-width: 767px) {
   .card-body .row {
      row-gap: 24px;
   }
}



/* Image Center Styles */
.blog-image-center-con {
   width: 100%;
   text-align: center;
}

.blog-image-center {
   width: 100%;
   height: 500px;
   object-fit: cover;
   display: block;
   border-radius: 8px;
   margin-top: 1rem;
}

.blog-image-caption {
   margin-top: 10px;
   font-size: 14px;
   color: grey;
   text-align: center;
}

@media (max-width: 991px) {
   .blog-image-center {
      height: 320px;
   }
}

@media (max-width: 575px) {
   .blog-image-center {
      height: 200px;
   }
}