@import url("../icons/icons.css");
@import url("fonts.css");



/* ===== GLOBAL & EXISTING STYLES ===== */
:root {
    --paper: #F2EDE0;
    --paper-warm: #E8E0CD;
    --paper-deep: #DDD2B8;
     --ink: #1A1611;
    --ink-soft: #4A4339;
    --ink-faint: #8A7F6E;
    --oxblood: #6B2A1F;
    --oxblood-deep: #4E1F17;
    --rule: #C5BBA0;
    --rule-soft: #D9CFB5;
  /* Warm Yellows & Creams */
  --color-cream-vanilla: #FFE5A8;
  --color-golden-saffron: #F4B860;
  --color-lemon-meringue: #F3E27B;
  --color-buttercup: #F4E9A2;

  /* Oranges & Reds */
  --color-burnt-orange: #ED6809;
  --color-oxblood: #C00000;
  --color-red-800:#A00000;
  --color-deep-wine:rgb(101, 0, 13);
  /* --color-signal-red: #E00000; */
  --color-signal-red:#520909;
  --color-primary-brand:#84000F;

  /* Greens & Mint */
  --color-spring-mint: #CCECBE;
  --color-sage-mist: #E9E0C0;

  /* Neutrals & Beiges */
  --color-sand-dune: #E4CDA6;
  --color-parchment: #E0D963;
  --color-blush-peach: #F5CFC1;
  --color-white-75:rgba(255, 255, 255, 0.75);
  --color-black-10:rgba(0, 0, 0, 0.10);
   --color-gray-dark:#535353;
   --color-charcoal: #322F2F;
   --color-charcoal-cool: #252525;
   --color-silver:#BCBCBC;
   --color-misted-sand:rgba(37, 37, 37, 0.5);
    --color-orange: 181, 109, 3;
    --color-olive: 92, 87, 10;
    --color-brown: 104, 81, 40;
    --color-khaki: 112, 101, 59;
    --color-green: 106, 158, 84;
    --color-terracotta: 174, 111, 87;
    --color-rose: 170, 78, 79;
    --color-olive-gold: 146, 130, 64;
   --bs-black:#000;
   --color-surface-dark:#282828;
   --bs-white:#fff;
    --color-antique-gold:#CCB540;
    --sponsor-gray: #727272;
    --color-dark-charcoal-gray: #3E3E3E;
    --color-charcoal-gray:#5A5A5A;
    --color-pale-gray: #E9E9E9;
    --medium-dark-gray: #676767;
    --color-neutral-100: #E6E6E6;
    --color-bg-dark: #181818;
    --color-surface-warm: #EDE0C7;
    --color-border-soft: #E6D6B4;
    --color-surface-nature: #EBF0EA;
    --color-text-placeholder: #909090;
    --color-scroll-bar: #E6D6B4;
    --color-bg-dark-surface:#292929;
    --color-bg-cream: #FFF2D3;
    --color-surface-soft: #FAF5EB;
    --color-pink-soft: #FFBCBD;
    --mx: 0;
    --my: 0;
    --sy: 0px;
    --font: "Poppins", "Li Shohid Tahmid Tamin Unicode", sans-serif;
    --font-onlybng:"Noto Serif Bengali", serif;
    --font-eng:"Poppins", sans-serif;
}

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 text-decoration: unset;
 text-decoration: unset;
}
body::selection {
  color: var(--color-bg-dark-surface);
  background-color: var(--color-border-soft);
}
html {
 font-size: 16px;
}
:focus{
    overflow: unset!important;
    box-shadow:unset!important;
}
:where(h1, h2, h3, h4, h5, h6,p) { font-family: var(--font); }

h2 {
font-size: clamp(1.56rem, calc(1.202rem + 1.804dvw), 2.83rem);
line-height: 140%;
}

body {
 background: var(--bs-white);
 color: var(--bs-black);
 font-optical-sizing: auto;
 font-weight: 400;
 line-height: 1.55;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
 text-rendering: optimizeLegibility;
text-box-trim: trim-both;
font-family: var(--font);
padding-bottom: unset!important;
}

.w-30{
    width: 100%;
    @media screen and (min-width:992px){
        width: 30%;
    }
}
.w-36{
    width: 100%;
    @media screen and (min-width:992px){
        width: 36%;
    }
}
.w-25{
    width: 100%!important;
    @media screen and (min-width:992px){
        width: 25%!important;
    }
}
.w-50{
    width: 100%!important;
    @media screen and (min-width:992px){
        width: 50%!important;
    }
}
.w-80{
    width: 100%;
    @media screen and (min-width:992px){
        width: 80%;
    }
}

/* --- Intro Fog --- */
.intro-fog {
 position: fixed;
 inset: 0;
 z-index: 9999;
 pointer-events: none;
 overflow: hidden;
}
.cloud {
 position: absolute;
 border-radius: 50%;
 filter: blur(80px);
 opacity: 1;
 transition:
  opacity 1.8s ease-out,
  transform 2.5s cubic-bezier(0.2, 0.8, 0.2, 1);

        &.cloud-1 {
        width: 150%;
        height: 80%;
        top: -20%;
        left: -25%;
        background: #ddd2b8;
        }
       &.cloud-2 {
        width: 120%;
        height: 60%;
        bottom: -10%;
        right: -20%;
        background: #e8e0cd;
        }
       &.cloud-3 {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #f1ebdd;
        transition-duration: 2s;
        }
}
body.loaded .cloud {
 opacity: 0;
}
body.loaded .cloud-1 {
 transform: translate(-10%, -15%);
}
body.loaded .cloud-2 {
 transform: translate(15%, 20%);
}
body.loaded .cloud-3 {
 transform: scale(1.4);
}


 /* ===== BASE – for ALL pages ===== */
.masthead {
  padding: 1.75rem 3rem;
  background: var(--color-white-75);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid var(--border);
  /* position: sticky is handled by Bootstrap's .sticky-top class */
   & .navbar-toggler {
    border: unset;
    border-radius: unset;
  }
  @media screen and (max-width:700px){
    position: fixed;
  }
  & .navbar{
    color: var(--color-oxblood);
    *{
      margin: unset;
    }
    & .fs-5{
      font-size: clamp(0.75rem, calc(0.574rem + 0.751dvw), 1.25rem)!important;
      font-weight: normal;
    }
    & .fs-6{
      font-size: clamp(0.69rem, calc(0.577rem + 0.469dvw), 1.00rem)!important;
      font-weight: normal;
      white-space:nowrap;
    }
    @media screen and (max-width:640px){
      & .w-50{
        width: 50%!important;
        & .w-50{
          width: 100%!important;
        }
      }
    }
  }
}

/* ===== HOME PAGE OVERRIDES ===== */
.home{
  & .masthead {
  padding: 1.75rem 3rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transform: translateY(-100%);
  background: transparent;
  border-bottom: none;
   backdrop-filter:unset;
  -webkit-backdrop-filter: unset;
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.5s ease,
    padding 0.5s ease;

  /* ---- SLIDE DOWN when JS adds .header-visible ---- */
  &.header-visible {
    transform: translateY(0);
    background: var(--color-white-75);
    border-bottom: 1px solid var(--border);
  }
  & .logo{
    opacity: 0;
  }

  /* ---- SCROLLED state ---- */
  &.scrolled {
    background: var(--color-white-75);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-bottom: 1px solid var(--border);

    & .logo {
      opacity: 1;
    }
  }
}
& .footer{
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 0;
  transform: translateY(30px);

  &.footer-visible {
    opacity: 1;
    transform: translateY(0);
}

}
}
 a{
    text-decoration: none!important;
    color: inherit;
    &:hover{
      color: inherit;
    }
   }

body.header-visible .masthead {
  transform: translateY(0);
}

/* Top-level nav, logo, toggler, icon */
.nav {
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--fg);
  text-decoration: none;

}

.navbar-toggler {
  border-color: unset;
  background: unset;
}

.navbar-toggler-icon {
  background: unset;
  color: var(--color-oxblood);
  @media screen and (max-width:640px){
    display: flex;
    justify-content: center;
    align-items: center;
    height: max-content;
  }

}
.search-icon{
    & i{
        font-size: 30px;
        color: var(--color-oxblood);
    }
}

.offcanvas-end {
    width: 250px;
    border-left: 1px solid rgba(0, 0, 0, .2);
}
.btn-close{
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E00000'%3E%3Cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3E%3C/svg%3E")!important;
    opacity: 1!important;
    }
.nav-link {
    display: block;
    padding: .5rem 1rem;
    color: var(--color-oxblood);
    font-size: clamp(1.00rem, calc(0.912rem + 0.376dvw), 1.25rem);
     transition: background-color 0.3s, color 0.3s, padding-left 0.3s;
    &:hover{
        color: var(--color-oxblood);
        background-color: rgba(231, 76, 60, 0.1);
         padding-left: 25px; /* slight indent */
    }
}
.modal-backdrop.show {
    opacity: 0.8;
}

.footer{
 background:  var(--color-white-75);
 backdrop-filter: blur(24px) saturate(140%);
 -webkit-backdrop-filter: blur(24px) saturate(140%);
 border-top: 1px solid var(--border);

 & p{
    font-size: 0.7rem;
 }
}
/* ===== HERO ===== */
.hero {
 background: var(--bs-white);
 width: 100%;
 max-width: 1920px;
 top: 0;
 left: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden;
 perspective: 1200px;

 min-height: 100dvh;
 z-index: 1;

}

.hero-bg {
 position: absolute;
 inset: 0;
 z-index: 1;
 pointer-events: none;
 width: 100%;
 height: 100%;
 background-image: image-set(url("https://cdn.aajkaal.in/sarod/uploads/images/hero-bg-1.png?format=webp") type("image/webp"), url("https://cdn.aajkaal.in/sarod/uploads/images/hero-bg-1.png") type("image/png"));
 background-repeat: no-repeat;
 background-position: 0 0;
 background-size: cover;
 @media screen and (max-width:640px){
     background-image: image-set(url("https://cdn.aajkaal.in/sarod/uploads/images/mobile-bg-1.jpeg?format=webp") type("image/webp"), url("https://cdn.aajkaal.in/sarod/uploads/images/mobile-bg-1.jpeg") type("image/jpeg"));
     background-position-x: center;
   background-size: cover;
 }
}
.hero-bg svg {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.hero-content {
 position: relative;
 z-index: 3;
 width: 100%;
 max-width: 1280px;
 margin: 0 auto;
 color: var(--paper);
 transform-style: preserve-3d;
 transform: translate3d(calc(var(--mx) * 20px), calc(var(--my) * 10px), 60px) rotateY(calc(var(--mx) * 3deg))
  rotateX(calc(var(--my) * -3deg));
 transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-inner {
 width: 100%;
 padding: 0 2rem 5rem;
 @media screen and (max-width:640px){
   padding: 0 2rem 4rem;
 }
 transform: translateY(60%);
 opacity: 0;
 transition:
  transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
  opacity 0.8s ease-out;
& .fs-6{
    font-size: clamp(0.88rem, calc(0.831rem + 0.188dvw), 1.00rem)!important;
    color:var(--color-signal-red);
 }
 & .fs-5{
    font-size: clamp(1.00rem, calc(0.912rem + 0.376dvw), 1.25rem)!important;
    color:var(--color-signal-red);
     @media screen and (max-width:640px){
   z-index: 1;
 }
 }

}
body.loaded .hero-inner {
 transform: translateY(0);
 opacity: 1;
}
.hero-meta {
 max-width: 100%;
 opacity: 0;
 transform: translateY(30px);

}
body.loaded .hero-meta {
 animation: metaSlideUp 0.8s ease-out 2s forwards;
}
@keyframes metaSlideUp {
 0% {
  opacity: 0;
  transform: translateY(30px);
 }
 100% {
  opacity: 1;
  transform: translateY(0);
 }
}
.hero-logo-hidden {
 opacity: 0;
 transition: opacity 0.4s ease;
 pointer-events: none;
}


/* ===== ATF SECTION ===== */

.atf-section {
    position: relative;
  /* height: 100vh; */
  overflow: hidden;
  padding: 3rem 0;
  @media screen and (min-width:992px){
  background-image: url('../images/bg.jpg');
  }
  background-size: contain;
  background-color: #880100;
  background-position-x: center;
  background-repeat: no-repeat;
  background-clip: border-box;
  background-position-y: top;
  background-attachment: fixed;
  font-family: var(--font);
  &::before {
  content: "";
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

    @media (max-width: 768px) {
        background-attachment: scroll;
    }

  /* Content wrapper */
  & .atf-content {
    position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  transition: opacity 0.3s ease;
  & .row > .col-lg-6 .card .card-body .card-title{
            font-size: clamp(1.00rem, calc(0.758rem + 1.033dvw), 1.69rem);
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            overflow-wrap: break-word;
            display: -webkit-box;
            overflow: hidden;
            @media screen and (min-width:1300px){
                -webkit-line-clamp: 5;
            }
    }

  & .card{
    @media screen and (min-width:1200px){
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    &:hover{
    box-shadow: -10px 10px 20px rgba(0,0,0,0.2);
    }
    }


  & .card-body{
    & .card-title{
        font-size: clamp(1.00rem, calc(0.956rem + 0.188dvw), 1.13rem);
        font-family: var(--font-onlybng);
        line-height: 140%;
        color: var(--color-red-800);
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        overflow-wrap: break-word;
        display: -webkit-box;
        overflow: hidden;

    }
  }
  }


    /* Text group container */
    & .atf-text-group {
      position: relative;
      display: inline-block;
      font-size: clamp(3rem, 12vw, 8rem);
      font-weight: 900;
      line-height: 1.1;
      text-transform: uppercase;


      /* Top (ghost) text */
      & .atf-text-top {
        color: rgba(255, 255, 255, 0.15);
        position: relative;
        z-index: 1;
      }

      /* Bottom (gradient overlay) text */
      & .atf-text-bottom {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: var(--bs-white);
        clip-path: inset(0 100% 0 0);
        transition: clip-path 0.1s;
        background: linear-gradient(90deg, #f4b860, #e87a3e);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
    }
  }
}

/* ===== CATEGORY SECTION ===== */
.category-section {
 z-index: 2;
 position: relative;
 transition: background 0.4s ease;
 @media screen and (max-width:728px){
padding: unset!important;
 }
}
.category-container {
 max-width: 1920px;
 margin: 0 auto;
 & .category-content{
    & h2{
        font-size: clamp(2.25rem, calc(2.052rem + 0.845dvw), 2.81rem);
        line-height: 140%;

        &.petPujo, &.abroadPuja,&.pujorBerano,&.pujorFashion, &.districtPuja,&.kolkatapujo,&.artistsPuja,&.pujerSusthoThakun{
             color:var(--bs-black);
             @media screen and (max-width:640px){
                 font-size:1.6rem;
                 line-height: 1.2;
                 }
        }

        &.gallery{
            color: var(--bs-white);
             @media screen and (max-width:640px){
                 font-size:1.6rem;
                 line-height: 1.2;
                 margin-bottom: 1.2rem;
                 }
        }
    }
    & p{
        font-size: clamp(0.75rem, calc(0.714rem + 0.179dvw), 0.88rem);
        color:var(--color-red-800);
        &.card-text{
        font-family: var(--font-onlybng);
        font-size: clamp(1.00rem, calc(0.956rem + 0.188dvw), 1.13rem);
        line-height: 140%;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        overflow-wrap: break-word;
        display: -webkit-box;
        overflow: hidden;

    }
    }
    & #kolkatapujo{
      @media screen and (max-width:992px){
                 background: var(--color-cream-vanilla);
                 }
        & .card-img-overlay{
            & .card-text{
               background: linear-gradient(to bottom, rgba(85, 16, 16, 0) 0%, rgba(85, 16, 16, 1) 50%);
              @media screen and (min-width:1200px){
                 background: color-mix(in srgb, var(--color-deep-wine) 60%, transparent);
                 }


            }
        }
    }
 }
 & #petPujo{
    @media screen and (max-width:992px){
                 background: var(--color-lemon-meringue);
                 }
        & .card-img-overlay{
            & .card-text{
                 min-height: 20px;
                @media screen and (min-width:1024px){
                    height: 70px;
                    }
               background: linear-gradient(to bottom, rgba(135, 116, 0, 0) 0%, rgba(135, 116, 0, 1) 50%);
               @media screen and (min-width:1200px){
                background: linear-gradient(to bottom, rgba(135, 116, 0, 0) 0%, rgba(135, 116, 0, 1) 79%);
               }
            }
        }
    }
     & #districtPuja{
        @media screen and (max-width:992px){
                 background: var(--color-golden-saffron);
                 }
        & .card-img-overlay{
            & .card-text{
                 min-height: 20px;
                @media screen and (min-width:1024px){
                    height: 70px;
                    }

                 background: linear-gradient(to bottom, rgba(var(--color-orange), 0) 0%, rgba(var(--color-orange), 1) 50%);

                   @media (min-width: 992px) {
                    &.pt-lg-2 {
                        padding-top: 1.5rem !important;
                    }
                }

              /* @media screen and (min-width:1200px){
                 background: linear-gradient(to bottom, rgba(var(--color-orange), 0) 0%, rgba(var(--color-orange), 1) 79%);
                 } */
            }
        }
    }
       & #abroadPuja{
          @media screen and (max-width:992px){
                 background: var(--color-parchment);
                 }
        & .card-img-overlay{
            & .card-text{
              min-height: 20px;
                @media screen and (min-width:1024px){
                    height: 70px;
                    }
              background: linear-gradient(to bottom, rgba(var(--color-olive), 0) 0%, rgba(var(--color-olive), 1) 50%);
               @media screen and (min-width:1200px){
                background: linear-gradient(to bottom, rgba(var(--color-olive), 0) 0%, rgba(var(--color-olive), 1) 79%);
            }
        }
      }
    }
     & #artistsPuja{
        @media screen and (max-width:992px){
                 background: var(--color-sand-dune);
                 }
        & .card-img-overlay{
            & .card-text{
              min-height: 20px;
                @media screen and (min-width:1024px){
                    height: 70px;
                    }
              background: linear-gradient(to bottom, rgba(var(--color-brown), 0) 0%, rgba(var(--color-brown), 1) 50%);
               @media screen and (min-width:1200px){
                background: linear-gradient(to bottom, rgba(var(--color-brown), 0) 0%, rgba(var(--color-brown), 1) 79%);
            }
          }
        }
    }
    & #pujerSusthoThakun{
        @media screen and (max-width:992px){
                 background: var(--color-sage-mist);
                 }
        & .card-img-overlay{
            & .card-text{
              min-height: 20px;
                @media screen and (min-width:1024px){
                    height: 70px;
                    }
              background: linear-gradient(to bottom, rgba(var(--color-khaki), 0) 0%, rgba(var(--color-khaki), 1) 50%);
               @media screen and (min-width:1200px){
                background: linear-gradient(to bottom, rgba(var(--color-khaki), 0) 0%, rgba(var(--color-khaki), 1) 79%);
            }
        }
      }
    }
    & #pujorBerano{
        @media screen and (max-width:992px){
                 background: var(--color-spring-mint);
                 }
        & .card-img-overlay{
            & .card-text{
              min-height: 20px;
                @media screen and (min-width:1024px){
                    height: 70px;
                    }
              background: linear-gradient(to bottom, rgba(var(--color-green), 0) 0%, rgba(var(--color-green), 1) 50%);
               @media screen and (min-width:1200px){
                 background: linear-gradient(to bottom, rgba(var(--color-green), 0) 0%, rgba(var(--color-green), 1) 79%);
               }
            }
        }
    }
     & #pujorFashion{
        @media screen and (max-width:992px){
                 background: var(--color-blush-peach);
                 }
        & .card-img-overlay{
            & .card-text{
                 min-height: 20px;
                @media screen and (min-width:1024px){
                    height: 70px;
                    }
                 background: linear-gradient(to bottom, rgba(var(--color-terracotta), 0) 0%, rgba(var(--color-terracotta), 1) 50%);
            }
        }
    }
    & #pujeradda{
        @media screen and (max-width:992px){
                 background: var(--color-pink-soft);
                 }
        & .card-img-overlay{
            & .card-text{
                   min-height: 20px;
                @media screen and (min-width:1024px){
                    height: 70px;
                    }
                   background: linear-gradient(to bottom, rgba(var(--color-rose), 0) 0%, rgba(var(--color-rose), 1) 50%);
            }
        }
    }
    & #bengaluruSharadGourav{
        @media screen and (max-width:992px){
                 background:var(--color-buttercup);
                 }
        & .card-img-overlay{
            & .card-text{
                  min-height: 20px;
                @media screen and (min-width:1024px){
                    height: 70px;
                    }
                  background: linear-gradient(to bottom, rgba(var(--color-olive-gold), 0) 0%, rgba(var(--color-olive-gold), 1) 50%);
            }
        }
    }
}



.viewAllBtn{
font-size: clamp(0.88rem, calc(0.839rem + 0.179dvw), 1.00rem);
line-height: 140%;
 position: relative;
    overflow: hidden;
    &::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}
&.bg-danger{
    background: var(--color-oxblood)!important;
    &:hover{
        background: var(--color-red-800)!important;
        &::after {
    left: 100%;
}
    }
}
}
.viewallgallery{
    border-radius: unset;
    font-size: clamp(0.88rem, calc(0.831rem + 0.188dvw), 1.00rem);
    &:hover{
        background: var(--color-red-800)!important;
        color: var(--bs-white);
    }


}

/* ---- TAB ---- */

/* ===== CATEGORY SIDEBAR ===== */
.category-sidebar {
  position: fixed;
  left: 24px;
  /* top: 22dvh; */
  top: 50%;
  z-index: 50;
  width: auto;
  max-width: 260px;
  padding: 12px 8px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: inherit;
  scrollbar-color: var(--color-oxblood) transparent;
  opacity: 0;
  transform: translateY(-50%) translateY(30px) scale(0.96);

  /* Nest scrollbar pseudo-elements */
  &::-webkit-scrollbar {
    width: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-oxblood);
    border-radius: 10px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}

.category-tabs {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  gap:0.8rem;

  /* Vertical line */
  &::after {
    content: "";
    width: 1px;
    height: 93%;
    border-left: 1px solid  var(--color-gray-dark);
    position: absolute;
    top: 4%;
    left: 0;
  }

  /* Tab item */
  & .tab-item {
    display: flex;
    align-items: center;
    padding: 0rem 0.9rem;
    font-size: 1.2rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--color-charcoal);
    letter-spacing: 0.02em;
    position: relative;
    &[data-target="pujeradda"],&[data-target="bengaluruSharadGourav"] {
         font-family: 'Li Alinur Subas Unicode';
         color: var(--color-oxblood);
        }

    /* Bullet/dot indicator */
    &::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background:  var(--color-gray-dark);
      transition: all 0.3s ease;
      flex-shrink: 0;
      left: -3px;
      position: absolute;
      z-index: 1;
    }

    /* Hover state */
    &:hover {
      color: var(--color-oxblood);
    }

    /* Active state */
    &.active {
      color: var(--sponsor-gray);
      background: transparent;

      /* Active dot */
      &::before {
        background: var(--color-oxblood);
        width: 7px;
        height: 7px;
        box-shadow: 0 0 0 2px rgba(107, 42, 31, 0.15);
      }
    }

  }
}

/* Define keyframes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== CONTENT BLOCK ===== */
.content-block {
  @media screen and (min-width:1200px){
  transition:
    background 0.4s ease;
  }


    /* Show the block when it is active */
    &.active-block {
        opacity: 1;
    }

    & .card {
        position: relative;
        animation: fadeInUp 0.6s ease both;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;

        &:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
        }

    }



  /* Last of type */
  &:last-of-type {
    border-bottom: none;
  }

   & .fs-6{
            /* font-size: clamp(0.75rem, calc(0.706rem + 0.188dvw), 0.88rem)!important; */
             font-size: clamp(0.75rem, calc(0.506rem + 0.188dvw), 0.88rem)!important;
            color:var(--color-charcoal-gray);
        }

  /* Active state */
  &.active-block {
    opacity: 1;
  }


  /* Paragraphs */
  & p {
    font-size: 1.1rem;
    color: var(--ink-soft);
    line-height: 1.6;
  }

}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
 .category-container {
  flex-direction: column;
  gap: 1.5rem;
 }
 .category-sidebar {
  position: sticky;
  max-width: 768px;
  width: 100%;
 }
 .category-tabs {
  flex-direction: row;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
 }
 .category-tabs::-webkit-scrollbar {
  display: none;
 }
 .category-tabs .tab-item {
  flex: 0 0 auto;
  padding: 0.5rem 1.2rem;
  font-size: 0.85rem;
  border-radius: 30px;
  background: var(--bs-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  gap: 0.4rem;
 }
 .category-tabs .tab-item::before {
  display: none;
 }
 .category-tabs .tab-item.active {
  background: var(--paper-warm);
  color: var(--ink);
  font-weight: 500;
  border-bottom: 2px solid var(--color-oxblood);
 }
 .category-content {
  margin-top: 0;
 }
 .content-block {
  padding: 1.5rem 0.9375rem;
  overflow-x: hidden;
 }
 .hero-content {
  padding: 0 1rem;
 }
}

@media (max-width: 576px) {
 .atf-text-group {
  font-size: clamp(2.2rem, 10vw, 4rem);
 }
 .atf-meta {
  font-size: 1rem;
 }
 .category-sidebar {
  top: 70px;
 }
 .category-tabs .tab-item {
  font-size: 0.75rem;
  padding: 0.4rem 0.9rem;
 }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
 .intro-fog {
  display: none !important;
 }
 .hero,
 .hero-content,
 .masthead,
 .hero-inner,
 .hero-meta {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
 }
 .hero {
  align-items: center !important;
 }
 .hero-bg img,
 .hero-overlay,
 .hero-content {
  transform: none !important;
  transition: none !important;
 }
 .atf-text-bottom,
 .atf-meta {
  transition: none !important;
  opacity: 1 !important;
  clip-path: none !important;
 }
 .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
 }
 .sticky-left,
 .team-left {
  position: static !important;
 }
 .category-sidebar {
  opacity: 1 !important;
  transform: translateY(-50%) !important;
 }
 @media (max-width: 992px) {
  .category-sidebar {
   transform: none !important;
  }
 }
}
.offcanvas {
 height: 100vh !important;
}

/* ===== SWIPER (CO-SPONSORED) ===== */
.mySwipercoSponsored.swiper {
  width: 100%;
  height: 100%;

  /* Nest slide styles */
  & .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #444; */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Nest image styles inside slide */
    & img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      aspect-ratio: 16 / 9;
    }
  }
}


/* =========================================
   GALLERY SLIDER
========================================= */
.gallery-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  --gallery-bg-image: none;
  isolation: isolate;


  /* =========================================
     BLURRED BACKGROUND IMAGE
  ========================================= */
  &::before {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: -2;
    background-image: var(--gallery-bg-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(13px);
    transform: scale(1.12);
    opacity: 0;
    transition:
      opacity 0.5s ease,
      background-image 0.5s ease;
  }

  /* Show background after image is available */
  &.has-background::before {
    opacity: 1;
  }

  /* =========================================
     BACKGROUND OVERLAY
  ========================================= */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(254, 255, 255, 0.5));
  }
}


/* =========================================
   GALLERY SWIPER
========================================= */
.gallerySwiper {
  position: relative;
  z-index: 3;
  max-width: 100%;
  @media screen and (min-width:1200px){
    max-width: 80%;
  }
  overflow: visible;

  /* =========================================
     SLIDE
  ========================================= */
  & .gallery-slide {
    width: min(360px, 70vw);
    border: 1px solid var(--color-antique-gold);

    @media (max-width: 991px) {
      width: 78vw;
    }

    @media (max-width: 575px) {
      width: 88vw;
    }
  }

  /* =========================================
     IMAGE
  ========================================= */
  & .gallery-slide__image {
    width: 100%;
    overflow: hidden;
  }

  /* =========================================
     CONTENT
  ========================================= */
  & .gallery-slide__content {
    @media screen and (max-width:640px){
        min-height: 106px;
    }
    & p{
        font-size: clamp(1.00rem, calc(0.956rem + 0.188dvw), 1.13rem);
        font-family: var(--font-onlybng);
        color: var(--bs-black);
        line-height: 140%;
    }
  }

  /* =========================================
     NAVIGATION
  ========================================= */
  & .gallery-swiper-button {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 53px;
    height: 53px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    transform: translateY(-50%);
    cursor: pointer;
    & img{
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    @media screen and (min-width:1200px){
    &.gallery-swiper-button-prev {
      left: 38px;
    }

    &.gallery-swiper-button-next {
      right: 38px;
    }
  }

     @media screen and (max-width: 575px) {
      width: 36px;
      height: 36px;
      & img{
        width: 100%;
      }
    }
  }

  /* =========================================
     PAGINATION
  ========================================= */
  & .gallery-swiper-pagination {
    z-index: 20;
    bottom: 25px !important;
  }

  /* =========================================
     NAVIGATION POSITION (Mobile)
  ========================================= */
   @media screen and (max-width: 575px) {
    & .gallery-swiper-button-prev {
      left: 0px;
    }
    & .gallery-swiper-button-next {
      right: 0px;
    }
  }
}



/* Ad */
.ad{
    background: var(--color-white-75);
    & p{
        /* color: var(--color-silver)!important; */
         color: var(--bs-black)!important;
        font-size: 0.7rem!important;
        font-family: var(--font-eng);
    }
}

  /* <!-- ============================================================ --> */
        /*Footer */
 /* <!-- ============================================================ --> */

     .co-sponsor-logos,.sponsor-logos {
    position: relative;
    width: 100px;
    height: 50px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
      @media screen and (max-width:640px){
        width: 70px;
    }
}

.sponsor-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.sponsor-img.active {
    opacity: 1;
}

.category-section.gallery-active .tab-item {
    color:var(--bs-white);
}

.category-section.gallery-active .tab-item.active {
    color: var(--sponsor-gray);
}
.category-section.gallery-active [data-target="bengaluruSharadGourav"],.category-section.gallery-active [data-target="pujeradda"]{
color: #de0404;
}

.SharadGouravContain{
    & .SharadGouravContain_left{
        & .sg_logo{
            width: 32%;
              @media screen and (min-width:990px){
            width:70%;
            }
        }
    }
}
.category .SharadGouravContain{
    max-width: 33%;
    @media screen and (min-width:1024px){
         max-width: 20%;
    }
    img{
        max-width: 80%;
        @media screen and (min-width:1024px){
         max-width: 50%;
    }
    }
}

.category .PujorAddalogo{
    max-width: 33%;
    @media screen and (min-width:1024px){
         max-width: 20%;
    }
    img{
        max-width: 80%;
        @media screen and (min-width:1024px){
         max-width: 50%;
    }
    }
}

.PujorAddalogo{
   width: 38%;
  @media screen and (min-width:990px){
  width: 100%;
  }
}
.amaderShraddhanjali{
     background: var(--bs-black);
     @media screen and (max-width:992px){
      padding: 1.5rem 0.9375rem;
        overflow-x: hidden;
     }
     & h2{
        font-family: var(--font-onlybng);
        color: var(--color-antique-gold);
     }
}
    .category-section.black-bg-no-sidebar {
        background: var(--bs-black) !important;
    }
    .category-section.black-bg-no-sidebar .category-sidebar {
        display: none !important;
    }
.nativeAd{
    position: absolute;
    top: 5px;
    left: 5px;
    padding:0 0.2rem;
    font-size: 0.69rem;
    z-index: 99;
    display: inline-block;
    width: auto!important;
    height: auto!important;
    background: var(--color-pale-gray);
    color: var( --medium-dark-gray);
}
/* -----------grid-style----------- */
.grid-style-1 {
  display: grid;
  grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  grid-template-areas:
    "left-top"
    "right"
    "left-bottom";
    gap: 1rem;
   height: auto;
  @media screen and (min-width:1200px){
    grid-template-columns: 0.349fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "left-top right"
    "left-bottom right";
    column-gap: 1rem;
    row-gap: 0px;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
    }
    & .right {
  grid-area: right;
  width: 100%;
}

& .left-top {
  grid-area: left-top;
}

& .left-bottom {
  grid-area: left-bottom;
}
}

.grid-style-2 {
  display: grid;
  grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  grid-template-areas:
    " mid-top"
    "left" "right"
    "mid-bottom ";
    gap: 1rem;
   height: auto;
  @media screen and (min-width:1200px){
    grid-template-columns: 1fr 0.7fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "left mid-top right"
    "left mid-bottom right";
    column-gap: 1rem;
    row-gap: 0px;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
    }

  & .left {
  grid-area: left;
}

& .mid-top {
  grid-area: mid-top;
}

& .mid-bottom {
  grid-area: mid-bottom;
}

& .right {
  grid-area: right;
}
}

.grid-style-3 {
  display: grid;
  grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  grid-template-areas:
    "right-top"
    "left"
    "right-bottom";
    gap: 1rem;
   height: auto;
  @media screen and (min-width:1200px){
    grid-template-columns:1fr 0.349fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "left right-top"
    "left right-bottom";
    column-gap: 1rem;
    row-gap: 0px;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
    }
    & .left {
  grid-area: left;
  width: 100%;
}

& .right-top {
  grid-area: right-top;
}

& .right-bottom {
  grid-area: right-bottom;
}
}

/* article */

.author-details  {
    ul{
        list-style: none;
        padding: unset;
        margin: unset;
    }
    *{
  color: var(--color-charcoal);
  }
  a{
    &:hover{
        color: var(--color-burnt-orange);
    }
  }

  & i, & p {
   font-size: 1.00rem;
}

& .date-time {
  font-size: 1.00rem;
}
& .social i {
  font-size: 1.00rem;
  line-height: 1.5;
}
}


/* ============================================================
   BREADCRUMB –
   ============================================================ */

.article {
  .top-article,
  .bottom-article,
  .aside {
    min-width: 0;
    overflow: hidden;
  }
}

nav[aria-label="breadcrumb"] {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}


.breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow: hidden;
  padding: 0;

  * {
    font-family: var(--font) !important;
  }


  .breadcrumb-item {
    flex: 0 0 auto;
    white-space: nowrap;
    position: relative;
    font-size: clamp(0.69rem, calc(0.665rem + 0.094dvw), 0.75rem);
    color: var(--bs-oslogrey);
    line-height: 2;


    & .breadcrumb-item {
      padding-left: 12px;

      &::before {
        content: "/";
        position: absolute;
        left: 4px;
        top: 0;
        z-index: 1;
        float: unset;
        padding: unset;
        color: var(--color-bg-dark-surface);
      }
    }

    a {
      text-decoration: none;
      color: var(--color-bg-dark-surface);

      @media screen and (max-width: 640px) {
        line-height: 2;
        white-space: nowrap;
      }
    }

    &.active {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      color: var(--color-text-placeholder);
      white-space: nowrap;


      .breadcrumb-text {
        display: inline-block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: inherit;
        &::-webkit-scrollbar {
          height: 4px;
        }
        &::-webkit-scrollbar-thumb {
          background: var(--color-scroll-bar, #909090);
          border-radius: 4px;
        }
        &::-webkit-scrollbar-track {
          background: transparent;
        }
      }
    }
  }
}
/* tag */
.tag{
    &.border-bottom {
    border-bottom: 1px solid var(--color-border-soft) !important;
    }
    &.border-top {
    border-top: 1px solid var(--color-border-soft) !important;
    }
& .badge {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-100);
  padding: 0.5rem 1rem;
  color: var( --color-bg-dark);
  font-family: var(--font-eng);
  font-weight: 500;
  font-size: clamp(0.69rem, calc(0.665rem + 0.094dvw), 0.75rem);
}
}
.author{
  & *{
  font-family: var(--font-onlybng);
  }
    & .card-title{
        font-size: 1.00rem;
        line-height: 140%;
        color:var(--bs-black);
    }
    & .card-text{
        font-size: 0.94rem;
        line-height: 140%;
        color: var(--color-surface-dark);
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        overflow-wrap: break-word;
        display: -webkit-box;
        overflow: hidden;
    }
}
.nextstory{
    background: var(--color-primary-brand);
    font-size: clamp(1.00rem, calc(0.868rem + 0.563dvw), 1.38rem);
    line-height:normal;
    text-box-trim: trim-both;
}

/* other-post */

.other-post{
    background: var(--color-surface-warm);
    & a{
        color: var(--bs-shark);
    }

& .other-post__heading {
  font-size: clamp(1.375rem, 1.3214rem + 0.2679vw, 1.5625rem);
  background: var(--color-oxblood);
}
 & .other-post__post-excerpt {
  background: var(--bs-softpeach);
}
 & .other-post__post-excerpt p {
  font-size: clamp(1rem, 1rem + 0vw, 1rem);
  color: var(--bs-shark);
  line-height: 1.35;
  font-weight: normal;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  margin: unset;
  @media screen and (min-width:1200px){
     /* -webkit-line-clamp: 3;
  line-clamp: 3; */
  line-height: 1.35;
  }

}
}

.article {
  display: grid;
   grid-template-columns: 1fr;
  grid-template-rows: 1fr;

  grid-template-areas:"top-article" "aside" "bottom-article";
  gap: 1rem;
  font-size: clamp(1.13rem, calc(1.081rem + 0.188dvw), 1.25rem);
  @media screen and (min-width:1200px){
  /* grid-template-columns:  7fr 3fr; */
  grid-template-columns:  70% 30%;
  grid-template-rows: auto auto;
  grid-template-areas:
   "top-article aside"
  "bottom-article aside";
  gap:1rem;
  margin: 0 -0.9rem;
  }

    *{
    font-family: var(--font-onlybng);
  }
  /* img{
    width: 100%;
  } */
  h1{
    font-size: clamp(1.44rem, calc(1.173rem + 1.127dvw), 2.19rem);
  }
  & .caption{
    font-size: clamp(0.88rem, calc(0.787rem + 0.376dvw), 1.13rem);
    background: var(--color-surface-nature);
  }
  & .top-article {
  grid-area: top-article;
   @media screen and (min-width:1200px){
   padding: 0 0.9rem;
   }

}
& .bottom-article {
  grid-area: bottom-article;
   @media screen and (min-width:1200px){
   padding: 0 0.9rem;
   }
}

& .aside {
  grid-area: aside;
   /* @media screen and (min-width:1200px){
  padding: 0 0.9rem;
  position: sticky;
    top: 100px;
    align-self: start;
   } */
}
}

.sponsored-cosponsored{
   & .fs-6{
        font-size: clamp(0.75rem, calc(0.706rem + 0.188dvw), 0.88rem)!important;
        font-family: var(--font)!important;
    }
}

.autoNews{
& p {
  font-size: 1.13rem;
  color: var(--color-bg-dark);
  line-height: 1.3;
  font-weight: 400;
  -webkit-line-clamp: 2;
  line-clamp:2;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}
& .swiper-pagination {
  height: 23px!important;
  bottom: 0 !important;
}
& .swiper-pagination-bullet-active {
  background: var(--color-oxblood) !important;
}
& .swiper-pagination-bullet {
  background: var(--color-charcoal-gray) !important;
}
& .heading {
  font-size: clamp(1.56rem, calc(1.449rem + 0.568vw), 1.88rem);
  font-family: var(--font);
  color: var(--color-bg-dark);
  line-height: 1.5;
  font-weight: 500;
}
}


/* Photogallery page */
.Photogallery {
  display: grid;
   grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:"left" "right";
  gap: 1rem;
  background: var(--color-primary-brand);
  color: var(--bs-white);
  @media screen and (min-width:1200px){
 grid-template-columns: 0.5fr 7fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "left right";
  gap:1rem;
  }

& .left {
  grid-area: left;
  *{
  font-size: 0.88rem;
  font-family: var(--font-eng)!important;
  color: var(--bs-black);
  }
  span{
    color: var(--color-dark-charcoal-gray);
  }
}

& .right {
  grid-area: right;
  & p{
    /* font-size: clamp(1.44rem, calc(1.173rem + 1.127dvw), 2.19rem); */
    font-size:1.2rem;
    margin: 0;
    font-family: var(--font-onlybng);
  }
}
}


/* related posts */
.related_posts{
    background: rgba(0, 0, 0, 0.05);
    & .card-title{
        /* font-size: 1.13rem; */
        font-size:1rem;
        color:var(--color-red-800);
        line-height: 140%;
        text-align: left!important;
    }
}
.gallerypage{
  background: var( --color-bg-cream);
  @media screen and (max-width:640px){
  padding-top: var(--header-height);
}
}
.postdetails{
  background: var(--color-surface-soft);
  @media screen and (max-width:640px){
  padding-top: var(--header-height);
}
}
.backbtn{

  & p{
  font-size: 0.69rem;
  color: var(--bs-black);
  }
}
.sponsoredLogo{
  width: 100px;
  @media screen and (min-width:1200px){
    width: 150px;
  }
}
.aajkaal-sharod-logo{
  width: 165px;
   aspect-ratio: unset !important;
  @media screen and (min-width:1200px){
    width: 280px;

  }
}
.BengaluruSharod{
  width: 112px;
  @media screen and (min-width:1200px){
    width: 130px;
  }
}
.PujorAdda{
   width: 115px;
  @media screen and (min-width:1200px){
    width: 145px;
  }
}
.PujorAdda,.BengaluruSharod,.aajkaal-sharod-logo{
  /* @media screen and (min-width:1200px){ */
  filter:
    drop-shadow(0 0 10px #f5efe6)
    drop-shadow(0 0 30px #f5efe6)
    drop-shadow(0 0 60px #e8dccc);
  /* } */

}
.mainSponsored{
  width: 100px;
   @media screen and (min-width:1200px){
width: 150px;
   }
}
.back_btn,.navbar-mobile{
    @media screen and (max-width:640px){
  width:25%!important;
   }
}

/* category */
.category{
  background: var(--color-cream-vanilla);
@media screen and (max-width:640px){
  padding-top: var(--header-height);
  /* main{
  margin-top: 60%;
} */
}
  & .category-head{
    font-size: clamp(2.25rem, calc(2.052rem + 0.845vw), 2.81rem);

    /* @media screen and (max-width:640px){
       display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "top top"
    "bottom-left bottom-right";
  gap: 16px;
    } */

  }
  & .fs-6{
    font-size: clamp(0.75rem, calc(0.706rem + 0.188vw), 0.88rem)!important;
  }
  @media screen and (max-width:640px){
.top {
  grid-area: top;
}

.bottom-left {
  grid-area: bottom-left;
}

.bottom-right {
  grid-area: bottom-right;
}
}

}
.category-body{
        & p {
            &.card-text {
              background: linear-gradient(to bottom, rgba(85, 16, 16, 0) 0%, rgba(85, 16, 16, 1) 50%);
                font-family: var(--font-onlybng);
                font-size: clamp(1.00rem, calc(0.956rem + 0.188dvw), 1.13rem);
                line-height: 150%;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                overflow-wrap: break-word;
                display: -webkit-box;
                overflow: hidden;
            }
        }
 & .ad {
    background: var(--color-black-10);
}
}


 .pagination {
  font-family: var(--font-eng);
  list-style: none;
    & .page-item{
      display: inline-block;
    }
    & .page-link{
      display: inline-block;
      padding: 0.375rem 0.75rem;
      font-size: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
      color:var(--color-oxblood);
      font-weight: 700;
      border: 1px solid var(--color-primary-brand);
      text-decoration: none;
      &:hover{
        color: var(--bs-white);
      background-color: var(--color-primary-brand);
      border-color: var(--color-primary-brand);
      }
    }
    .active>.page-link, .page-link.active {
      color: var(--bs-white);
      background-color: var(--color-primary-brand);
      border-color: var(--color-primary-brand);
  }
  .disabled>.page-link {
      opacity: 0.5;
      pointer-events: none;
  }
  }
  .other{
    background: var( --color-surface-soft);
    @media screen and (max-width:640px){
  padding-top: var(--header-height);
}
& h1{
  font-size: clamp(1.38rem, calc(1.199rem + 0.751vw), 1.88rem);
  font-weight: normal;
}
  }

  .gsc-wrapper{
    min-height: 3px;
    height: auto;
}
.gsc-wrapper .gsc-resultsbox-visible{
overflow-y: scroll;
height: 300px;
font-family: var(--font-onlybng)!important;
}
.gsib_b {
    height: 18px!important;
    width: 30px!important;
}
.gsc-tabsArea{
margin-top: unset!important;
}

.gs-result .gs-title, .gs-result .gs-title * {
    color: #B10214 !important;
    text-decoration: none !important;
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
}
.gsc-cursor-current-page {
    background-color: #B10214 !important;
    color: white !important;
    border-color: #B10214 !important;
}
.gsc-cursor-page {
    padding: 8px 16px !important;
    margin: 0 4px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    text-decoration: none !important;
}
.gs-result .gs-snippet {
    color: #4d5156 !important;
    line-height: 1.5 !important;
}
.media-icon{
    width: auto;
    height: auto;
    top: 3%!important;
    left: 2% !important;
    z-index: 2;
    color:var(--color-red-800);
}

/* Post content responsive images */
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
}