:root {
      --brand: #e60004;
      --brand-2: #ff6b15;
      --gradient-color: linear-gradient(90deg, var(--brand), var(--brand-2));
      --dark: #0c0c0c;
    }

    html, body {
      height: 100%;
    }

    body {
      font-family: 'Rubik', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      color: #222;
      background: #eff2f5;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--brand-2);
    }

    .orange-text {
      color: var(--brand-2);
    }


    .text-shadow {
      text-shadow: 0 2px 1px rgba(0, 0, 0, 0.747);
    }

    .text-shadow1 {
      text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
    }

    .about-quote {
      font-size: 25px;
    }


    /* =================carousel indicator============ */
    #custom-indicators [data-bs-target] {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0.5;
      margin: 0 5px;
      transition: all 0.3s ease;
    }

    #custom-indicators .active {
      opacity: 1;
      background-color: #fff;
      width: 15px;
    }

    .carousel-indicators {
      position: absolute;
      right: 0;
      bottom: -15%;
      left: 0;
      z-index: 2;
      display: flex;
      justify-content: center;
      padding: 0;
      margin-right: 15%;
      margin-bottom: 1rem;
      margin-left: 15%;
      transform: translateX(-65%);
    }

    /* ===== App Bar (rounded, floating) ===== */


    .appbar-wrap {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      width: min(1000px, calc(100% - 2rem));
      z-index: 1040;
    }

    .appbar {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
      padding: 0px;
    }

    .appbar1 {
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
      padding: .35rem .75rem;
      height: 40px;
      position: fixed;
      bottom: -10px;
      width: 100%;
    }

    .navbar-brand img {
      height: 64px;
      width: auto;
    }

    .navbar-login img {
      height: 44px;
      width: auto;
      margin-left: 10px;
    }

    .navbar-nav .nav-link {
      font-weight: 500;
      padding: .75rem 1rem;
      color: #222;
    }

    .navbar-nav .nav-link:hover {
      color: var(--brand);
    }


    /* ===== Mega Dropdown ===== */
    .mega-dropdown {
      position: absolute;
      left: 0;
      top: 100%;
      width: 100%;
      background: linear-gradient(120deg, var(--brand), var(--brand-2));
      border-radius: 0 0 10px 10px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
      color: #fff;
      display: none;
      z-index: 1030;
      overflow: hidden;
      transform: translateY(10px);
      opacity: 0;
      transition: all 0.35s ease;
    }

    /* Hover behavior */
    .nav-item.dropdown:hover .mega-dropdown {
      display: block;
      transform: translateY(0);
      opacity: 1;
    }

    /* Dropdown links */
    .mega-dropdown a {
      color: #fff;
      text-decoration: none;
      display: block;
      padding: 0.35rem 0;
      font-size: 0.95rem;
    }

    .mega-dropdown a:hover {
      text-decoration: underline;
    }

    /* Work behind navbar */
    .appbar-wrap {
      z-index: 1040;
    }

    .mega-dropdown {
      z-index: 1030;
      /* ensures it's behind navbar but above page */
    }

    /* Responsive */
    @media (max-width: 991px) {
      .mega-dropdown {
        position: static;
        background: linear-gradient(120deg, var(--brand), var(--brand-2));
        box-shadow: none;
        border-radius: 0;
        color: #222;
        width: 100%;
        transform: none;
        opacity: 1;
        padding: .25rem 0 .5rem;
        display: none;
        border-radius: 15px;
      }

      .mega-dropdown.show {
        display: block;
      }

      .mega-dropdown a {
        color: #ffffff;
        padding: .35rem 0;
      }

      .mega-dropdown .col-md-2,
      .mega-dropdown .col-md-4 {
        margin-bottom: .5rem;
      }

      .navbar-collapse {
        flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
        height: 100vh;
      }

      .navbar-nav {
        padding-top: 40px;
      }

      .donate-btn1 {
        border-radius: 0px 8px 8px 0px;
        font-weight: 700;
        padding: 20px 15px;
        border: none;
        background: var(--brand);
        color: #fff;
        box-shadow: 0 8px 12px rgba(224, 96, 45, 0.36);
        position: relative;
        right: 0px !important;
        width: 100%;
      }

    }


    .donate-btn1 {
      border-radius: 0px 8px 8px 0px;
      font-weight: 700;
      padding: 20px 15px;
      border: none;
      background: linear-gradient(360deg, var(--brand), var(--brand-2));
      color: #fff;
      box-shadow: 0 8px 12px rgba(224, 96, 45, 0.36);
      position: relative;
      right: -12px;
    }

    .donate-btn1:hover {
      border-radius: 0px 8px 8px 0px;
      font-weight: 700;
      padding: 20px 15px;
      border: none;
      background: var(--brand);
      color: #fff;
      box-shadow: 0 8px 12px rgba(224, 96, 45, 0.36);
      position: relative;
      right: -12px;
    }

    .donate-btn1 .icon {
      display: inline-grid;
      place-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #fff;
      color: var(--brand);
      margin-left: .6rem;
    }


    /* ===== Hero ===== */
    /* ===== Hero ===== */
    /* ===== Hero ===== */
    .hero {
      position: relative;
      min-height: 100vh;
      max-height: 70vh;
      display: grid;
      place-items: center;
      text-align: center;
      padding-top: 120px;
      overflow: hidden;
    }

    .hero .carousel,
    .hero .carousel-inner,
    .hero .carousel-item,
    .hero .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .hero .hero-bg {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-blend-mode: overlay;
    }

    .hero .container {
      position: relative;
      z-index: 1;
      color: #fff;
    }

    .hero h1 {
      letter-spacing: .5px;
      line-height: 1.08;
      font-size: 4.5rem;
    }

    .hero h6 {
      color: var(--brand);
    }

    .hero .lead {
      max-width: 1080px;
      margin-inline: auto;
      opacity: .95;
      font-size: clamp(1rem, .6vw + .9rem, 1.25rem);
    }

    .hero-text {
      text-align: start;
    }

    @media (max-width: 768px) {
      .hero-text h1 {
        font-size: 35px;
      }

      .hero-text {
        text-align: center;
        margin-top: 20%;
      }
    }

    /* ===== Custom Prev/Next Buttons ===== */
    .custom-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: var(--gradient-color);
      opacity: 0.6 !important;
      /* background: rgb(254, 102, 20); */
      backdrop-filter: blur(5px);
      border: none;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .custom-btn:hover {
      background: rgba(255, 255, 255, 0.5);
    }

    .carousel-control-prev.custom-btn {
      left: 20px;
    }

    .carousel-control-next.custom-btn {
      right: 20px;
    }

    .custom-btn i {
      font-size: 1.2rem;
      color: #fff;
    }




    /* ===== Right Floating Chat/WhatsApp ===== */
    .float-contact {
      position: fixed;
      right: 18px;
      bottom: 22px;
      display: flex;
      align-items: center;
      gap: .75rem;
      z-index: 1030;
    }

    .float-contact .msg-pill {
      background: #fff;
      color: #111;
      border-radius: 999px;
      padding: .55rem .95rem;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
      font-weight: 600;
    }

    .float-contact .wa {
      display: grid;
      place-content: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #25D366;
      color: #fff;
      box-shadow: 0 10px 24px rgba(37, 211, 102, .45);
      text-decoration: none;
    }

    @media (max-width: 768px) {
      .navbar-brand img {
        height: 46px
      }

      .appbar-wrap {
        width: calc(100% - 1rem)
      }

      .float-contact .msg-pill {
        display: none
      }
    }

    /* ===== about sec ===== */
    .mwidth {
      max-width: 1100px !important;
      position: relative;
      top: -40px;
      z-index: 100;
    }

    a, button {
      transition: all .5s ease-in-out;
    }

    .mwidth .box1 {
      background: #fff;
      padding: 20px;
      min-height: 250px;
      border-radius: 20px 0 0 20px;
      margin: 5px;
    }

    .box1, .box2, .box3 p {
      font-size: 13px;
    }

    .mwidth .work-icon {
      background: linear-gradient(320deg, var(--brand), var(--brand-2));
      padding: 10px;
      border-radius: 50%;
      height: 100px;
      width: 100px;
      margin: 0 auto;
      line-height: 70px;
    }

    .mwidth .more {
      font-size: 16px;
      color: #fff;
      font-weight: 500;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 30px;
      transition: 0.4s ease;
    }

    .mwidth .more:hover {
      font-size: 16px;
      color: #fff;
      font-weight: 500;
      background: linear-gradient(180deg, var(--brand), var(--brand-2));
      text-decoration: none;
      padding: 6px 10px;
      border-radius: 30px;
    }

    .mwidth h3 {
      text-align: center;
      margin: 10px 0px;
      font-size: 20px;
      color: var(--brand-2);
    }

    .mwidth .box2 {
      background: #fff;
      padding: 20px;
      min-height: 250px;
      border-radius: 0;
      margin: 5px;
    }

    .mwidth .box3 {
      background: #fff;
      padding: 20px;
      min-height: 250px;
      border-radius: 0 20px 20px 0;
      margin: 5px;
    }

    /* ===== Sections (global) ===== */
    .section {
      padding: 84px 0;
    }

    .section-doc {
      padding: 3% 0%;
    }

    .eyebrow {
      text-transform: uppercase;
      font-weight: 500;
      font-size: .9rem;
      color: var(--brand-2);
    }

    .eyebrow1 {
      letter-spacing: .22rem;
      text-transform: uppercase;
      font-weight: 800;
      font-size: .9rem;
      color: #ffffff;
    }

    /* ===== Introduction ===== */
    .intro {
      position: relative;
    }

    .intro .blob {
      position: absolute;
      left: 40%;
      top: 10px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: rgba(255, 83, 15, 0.13);
      z-index: -1;
      animation: fadeInOut 4s ease-in-out infinite;
    }

    /* Animation keyframes */
    @keyframes fadeInOut {
      0% {
        opacity: 0.3;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.05);
      }

      100% {
        opacity: 0.3;
        transform: scale(1);
      }
    }

    .intro .blob1 {
      position: absolute;
      left: 6%;
      bottom: 10px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(255, 83, 15, 0.13);
      animation: fadeInOut 4s ease-in-out infinite;
    }

    .img-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
    }

    .img-grid img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      border-radius: 26px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    }

    .btn-cta {
      border: none;
      border-radius: 999px;
      font-weight: 500;
      padding: 8px 14px;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      color: #fff;
      transition: 0.6s all ease;
      /* box-shadow:0 10px 24px rgba(11,182,139,.35); */
    }

    .btn-cta:hover {
      border: none;
      border-radius: 999px;
      font-weight: 500;
      padding: 8px 14px;
      background: linear-gradient(180deg, var(--brand), var(--brand-2));
      color: #fff;
      /* box-shadow:0 10px 24px rgba(11,182,139,.35); */
    }

    .btn-pill {
      border: none;
      border-radius: 999px;
      font-weight: 500;
      padding: 8px 14px;
      background: #fff;
      color: var(--brand);
      transition: 0.6s all ease;
      /* box-shadow:0 10px 24px rgba(11,182,139,.35); */
    }

    .btn-pill:hover {
      border: none;
      border-radius: 999px;
      font-weight: 500;
      padding: 8px 14px;
      background: #fff;
      color: var(--brand-2);
      /* box-shadow:0 10px 24px rgba(11,182,139,.35); */
    }

    /* ===== Vision & Mission ===== */
    #vision-mission {
      background: #e0602d url(../images/Bg-Karunashray.svg) no-repeat;
    }


    @media (max-width: 992px) {
      .section {
        padding: 64px 0;
      }

      .img-grid img {
        height: 200px
      }
    }

    /* ===== News ===== */
    .news {
      background: #ffffff;
    }

    .news-card {
      border-radius: 20px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
      height: 80%;
      display: flex;
      flex-direction: column;
    }

    .news-card .thumb {
      position: relative;
      overflow: hidden;
      height: 250px;
    }

    .news-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .45s ease;
    }

    .news-card:hover img {
      transform: scale(1.04);
    }

    .news-card .badge-date {
      position: absolute;
      left: 14px;
      top: 14px;
      background: #fff;
      color: #111;
      border-radius: 999px;
      padding: .35rem .75rem;
      font-weight: 700;
      box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
    }

    .news-card .body {
      padding: 22px 22px 24px;
    }

    .news-card .title {
      font-weight: 800;
      font-size: 1.15rem;
      margin-bottom: .35rem;
    }

    .news-card .excerpt {
      color: #6b7280;
      margin-bottom: 14px;
    }

    .btn-soft {
      border: none;
      border-radius: 999px;
      padding: 6px 12px;
      font-weight: 500;
      background: rgba(63, 82, 97, 0.21);
      color: var(--brand);
    }

    .btn-soft:hover {
      border: none;
      border-radius: 999px;
      padding: 6px 12px;
      font-weight: 500;
      background: rgba(255, 83, 15, 0.29);
      color: var(--brand-2);
    }

    @media (max-width: 992px) {
      .news-card .thumb {
        height: 200px
      }
    }


    /* ===== Doctors Crad ===== */

    .doctor-item {
      transition: all 0.4s ease;
    }

    .doctor-item h6 {
      color: var(--brand-2);
    }

    .doctor-img {
      width: 100%;
      height: 300px;
      border-radius: 15px;
      object-fit: cover;
      transition: transform 0.4s ease;
    }

    .doctor-item:hover .doctor-img {
      transform: scale(1.05);
    }

    .swiper-button-custom {
      position: absolute;
      top: 45%;
      transform: translateY(-50%);
      width: 38px;
      height: 34px;
      border-radius: 50px;
      background: var(--gradient-color);
      box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;
      z-index: 10;
    }

    .swiper-button-custom:hover {
      background: var(--brand-2);
      color: #fff;
    }

    .prevBtn {
      left: -20px;
    }

    .nextBtn {
      right: -20px;
    }

    @media (max-width: 768px) {
      .prevBtn {
        left: 0px;
      }

      .nextBtn {
        right: 0px;
      }

    }

    /* ===================Principal================ */

    #principal-sec {
      background: #e0602d url(../images/Bg-Karunashray.svg) no-repeat;
      padding: 3% 0%;
    }


    /* ===============Circular Section============== */

    .services {
      /* background: #f8fbfc; */
      position: relative;
      overflow: hidden;
      padding: 5% 0% 8% 0%;
    }

    .service-circle {
      width: 330px;
      height: 330px;
      border: 2px dashed #ccc;
      border-radius: 50%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .service-circle .main-img {
      width: 230px;
      height: 230px;
      border-radius: 50%;
      object-fit: cover;
      transition: all 0.5s ease;
    }

    .circle-point {
      position: absolute;
      width: 130px;
    }

    .circle-point h6 {
      font-size: 0.9rem;
      line-height: 1.2;
      color: #000;
    }

    .btn-round {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background-color: #f15a29;
      border: 3px solid #fff;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-round:hover {
      transform: scale(1.2);
      background-color: #d94b1f;
    }

    .circle-point.top {
      top: -70px;
      left: 50%;
      transform: translateX(-50%);
    }

    .circle-point.top1 {
      top: -10px;
      right: -110px;
      transform: translateX(-50%);
    }

    .circle-point.right {
      right: -90px;
      top: 50%;
      transform: translateY(-50%);
    }

    .circle-point.right1 {
      right: -50px;
      top: 92%;
      transform: translateY(-50%);
    }

    .circle-point.bottom {
      bottom: -75px;
      left: 50%;
      transform: translateX(-50%);
    }

    .circle-point.bottom1 {
      bottom: -10px;
      left: 3%;
      transform: translateX(-50%);
    }

    .circle-point.left {
      left: -90px;
      top: 50%;
      transform: translateY(-50%);
    }

    .circle-point.left1 {
      left: -50px;
      top: 5%;
      transform: translateY(-50%);
    }

    .service-info-card {
      background: #fff;
      border-radius: 20px;
      padding: 15px 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease;
    }

    .service-info-card:hover {
      transform: translateY(-5px);
    }

    .service-info-card .icon {
      width: 50px;
      height: 50px;
    }


    .image-card {
      aspect-ratio: 1/1;
      /* makes it square */
    }

    .overlay {
      background-color: rgba(244, 130, 36, 0.623);
      /* light orange overlay */
      transition: opacity 0.4s ease;
    }

    .image-card:hover .overlay {
      opacity: 0;
    }


    /*=====================Birthday====================*/

    .birthday-card-img {
      width: 160px;
      height: 160px;
      object-fit: cover;
      margin-top: 10px;
    }

    .overlap-left {
      position: absolute;
      bottom: 0;
      width: 45%;
      z-index: 9;
      left: -20px;
    }

    .overlap-right {
      top: 50%;
      right: 0;
      transform: translateY(-50%);
      width: 70%;
      position: absolute;
      z-index: 9;
    }


    /* Remove default swiper arrows */
    #birthdaySlider .swiper-button-prev,
    #birthdaySlider .swiper-button-next {
      display: none;
    }

    /* Birthday Slider Custom Nav Buttons */
    .birthday-slider-nav .birthday-prev,
    .birthday-slider-nav .birthday-next {
      background: var(--gradient-color);
      color: #fff;
      width: 38px;
      height: 32px;
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      transition: 0.3s ease-in-out;
    }

    .birthday-slider-nav .birthday-prev:hover,
    .birthday-slider-nav .birthday-next:hover {
      background: var(--brand-2);
      color: #ffffff;
    }


    /*==================Toppers======================*/

    .lightbrown-text {
      color: #000;
      font-size: 1.3rem;
    }


    /*==================gallery======================*/

    .gallery-img {
      width: 100%;
      height: 400px;
      object-fit: cover;
      object-position: center;
    }

    #Gallery {
      background: #e0602d url(../images/Bg-Karunashray.svg) no-repeat;
    }

    #Gallery .carousel-control-prev {
      left: 15px;
    }

    #Gallery .carousel-control-prev, #Gallery .carousel-control-next {
      background: var(--gradient-color);
      width: 38px;
      height: 34px;
      border-radius: 50px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 50%;
      transform: translateY(-50%);
      transition: 0.3s ease-in-out;
    }

    #Gallery .carousel-control-prev:hover, #Gallery .carousel-control-next:hover {
      background: var(--brand-2);
    }

    #Gallery .carousel-control-next {
      right: 15px;
    }

    .info-box {
      background: #e6000445;
      border-radius: 20px;
      padding: 2rem;
    }


    /* ------------------------------------ */

    .contact-icon {
      max-width: 100px;
      height: auto;
      width: 100%;
      border-radius: 50%;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }


    /* =========== Footer ================ */
    .footer {
      background: #0e1011c7 url(../images/Bg-Karunashray.svg) no-repeat;
      color: #cfd6d9;
      padding: 64px 0 28px;
    }

    .footer a {
      color: #cfd6d9;
      text-decoration: none;
    }

    .footer a:hover {
      color: #fff;
    }

    .mobile-manual a {
      color: var(--brand-2);
    }

    .mobile-manual a:hover {
      color: var(--brand);
    }

    .footer .brand {
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .footer .brand img {
      height: 68px;
      width: auto;
    }

    .footer h6 {
      font-weight: 800;
      letter-spacing: .02em;
      margin-bottom: 14px;
    }

    .footer .social a {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: inline-grid;
      place-content: center;
      background: #161a1a;
      margin-right: 8px;
    }

    .footer .social a:hover {
      background: var(--brand);
      color: #fff;
    }

    .newsletter input[type=email] {
      border-radius: 999px;
      padding: .65rem 1rem;
      border: 1px solid var(--brand);
      background: var(--brand);
      color: #e8f0f2;
    }

    .newsletter .btn {
      border-radius: 999px;
      margin-left: 8px;
      border: 1px solid #fff;
      color: #fff;
    }

    .footer .copy {
      border-top: 1px solid rgba(255, 255, 255, .08);
      margin-top: 28px;
      padding-top: 20px;
      font-size: .95rem;
    }



    #newsCarousel .carousel-control-prev,
    #newsCarousel .carousel-control-next {
      background: var(--gradient-color);
      width: 38px;
      height: 34px;
      border-radius: 50px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 50%;
      transform: translateY(-50%);
      transition: 0.3s ease-in-out;
    }

    #newsCarousel .carousel-control-prev:hover, #newsCarousel .carousel-control-next:hover {
      background: var(--brand-2);
    }

    #newsCarousel .carousel-control-next {
      right: -30px;
    }

    #newsCarousel .carousel-control-prev {
      left: -30px;
    }

    @media (max-width: 768px) {

      #newsCarousel .carousel-control-next {
        right: 10px;
      }

      #newsCarousel .carousel-control-prev {
        left: 10px;
      }
    }



    /* ======================page edit======================== */

    .Topper-student {
      width: 180px;
      height: 190px;
      object-fit: cover;
      border: 2px solid var(--primary-color);
    }

    .carousel-controls .custom-prev2, .carousel-controls .custom-next2 {
      background: var(--gradient-color);
      color: #fff;
      border: none;
      border-radius: 50px;
      padding: 6px 14px;
      /* width: 40px; */
      /* height: 40px; */
      margin: 0 8px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .carousel-controls .custom-prev2:hover, .carousel-controls .custom-next2:hover {
      background: var(--brand-2);
    }

    .Toppers-gif {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0.5;
      width: 100%;
      max-width: 400px;
      top: 0;
    }

    /* ----------Birthday------------ */

    .happy-birthday {
      width: 100%;
      max-width: 350px;
      padding-bottom: 30px;
      margin: 0px auto;
      display: flex;
    }


    /* ==========================PAGE DATA========================== */

    .hero-banner {
      background: linear-gradient(to right, #000000bd, #000000bd, #000000bd), url('../images/page-bg.jpg') center/cover no-repeat;
      height: 350px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .hero-title {
      z-index: 3;
      padding: 15px;
      border-radius: 100px;
      width: 95%;
      max-width: 1100px;
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translate(-50%);
      height: 100px;
    }

    .heading-shade1 {
      text-transform: uppercase;
      color: #fff;
      /* font-weight: 700;
	background: linear-gradient(180deg, #fff 0%, var(--theme-secondary) 75%, var(--theme-secondary) 100%) no-repeat;
	-webkit-background-clip: text; */
    }

    .list-group li {
      line-height: 28px;
      background: url(../images/icons/arrow-right.svg) no-repeat left 6px;
      padding: 0px 0px 0px 25px;
      list-style: none;
      margin: 8px 0px;
      vertical-align: middle;
    }



    /* ------------Table-------------- */

    thead th {
      background: var(--gradient-color) !important;
      color: #fff !important;
    }



    /* ---------------------------Accordian--------------------------------------- */

    .accordion {
      border: none;
    }

    .accordion-item {
      border: none;
      border-radius: 10px;
      margin-bottom: 15px;
    }

    .accordion-button {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      padding: 10px 18px;
      font-size: 1rem;
      color: #000;
      text-align: left;
      background: var(--gradient-color);
      border: 0;
      border-radius: 0;
      overflow-anchor: none;
      /* transition: var(--bs-accordion-transition); */
    }

    .accordion-body {
      /* padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x); */
      background: #fff;
      border-radius: 0px 0px 10px 10px;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.41);
    }

    .accordion-body img {
      border-radius: 10px;
      box-shadow: 1px 1px rgba(0, 0, 0, 0.41);
      margin-bottom: 10px;
    }

    .accordion-item:first-of-type,
    .accordion-item:first-of-type .accordion-button {
      border-radius: 10px;
    }

    .accordion-button .hero-about {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 1rem;
      font-weight: 600;
      color: #000;
      background-color: #967b7b;
      border: none;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease;
    }

    .accordion-button span {
      position: relative;
      z-index: 1;
      transition: transform 0.3s ease, text-shadow 0.3s ease;
    }

    .accordion-button:hover span {
      transform: translateX(5px);
      text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    }


    .accordion-button:not(.collapsed) {
      background: var(--brand-2);
      color: #fff;
      border-radius: 10px;
    }


    .accordion-header {
      margin-bottom: 5px;
    }


    .accordion-button:focus {
      outline: none;
      box-shadow: none;
    }

    .accordion-item:last-of-type .accordion-button.collapsed {
      border-radius: 10px;
    }

    .accordion-button:not(.collapsed)::after {
      --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    }