/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@100..800&display=swap');

:root {
    --white: #fff;
    --black: #000;
    --primary: #ff0000;
    --transition: all 0.3s ease-in-out;
}

*{ padding: 0; margin: 0; box-sizing: border-box; }

body { font-family: 'Anek Devanagari', sans-serif; font-size: 16px; color: var(--black); line-height: 1.8; background-color: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; text-decoration: none; color: var(--black); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--primary); }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.4; }
h2 { margin-bottom: 20px; font-size: 40px; }
h3 { font-size: 26px; }

/* global */
.centered { padding-right: calc((100% - 1160px)/ 2); padding-left: calc((100% - 1160px)/ 2); }
.btn { padding: 4px 30px 0 30px; min-width: 200px; min-height: 60px; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; font-weight: 700; cursor: pointer; color: var(--white); border-radius: 35px; background-color: var(--primary); }
.btn:hover { color: var(--white); background-color: var(--primary); }
.readBtn { padding: 8px 20px 0 20px; height: 40px; display: inline-flex; align-items: center; gap: 5px; justify-content: center; text-transform: uppercase; font-weight: 700; cursor: pointer; color: var(--white); border-radius: 35px; background-color: var(--primary); }
.readBtn svg { margin-top: -4px; width: 14px; height: 12px; fill: #fff; }
.readBtn:hover { color: var(--white); background-color: var(--primary); }

/* wrapper */
.wrapper { width: 100%; position: relative; }

/* header */
.headerSec { padding: 0 50px; position: absolute; left: 0; top: 0; z-index: 99; width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 80px; }
.headerSec .logo { display: block; height: 28px; }
.headerSec .logo svg { height: 28px; width: 163px; }
.headerSec .back { color: var(--white); position: relative; text-transform: uppercase; font-size: 14px; font-weight: 500; }
.headerSec .back:before { position: absolute; left: -12px; top: 5px; content: ''; width: 0; height: 0; border-width: 5px 6px 5px 0; border-color: transparent #e81616 transparent transparent; border-style: solid; }
.headerSec .back:hover { color: var(--primary); }

/* hero */
.heroSec { padding-top: 70px; padding-bottom: 50px; width: 100%; min-height: 720px; overflow: hidden; position: relative; }
.heroSec .block { margin: 0 auto; position: relative; width: 100%; max-width: 700px; }
.heroSec .frame { width: 55%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); opacity: 0.3; }
.heroSec .image { width: 100%; position: relative; z-index: 1; }
.heroSec .image img { width: 100%; height: auto; }
.heroSec .subh { position: absolute; right: 10%; top: 40%; z-index: 1; width: 180px; }
.heroSec .navratri { position: relative; left: 50%; margin-top: -120px; transform: translateX(-50%); z-index: 2; width: 70%; }
.heroSec .date { width: 100%; font-size: 22px; font-weight: 500; text-align: center; color: #fcff00; }
.heroSec .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.heroSec .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.heroSec .bg video { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; }
.heroSec .bottombg { position: absolute; left: 0; bottom: -1px; z-index: 2; width: 100%; height: 70px; }
.heroSec .bottombg img { width: 100%; height: 100%; object-fit: fill; object-position: center center; }

/* navratri Sec */
.navratriSec { padding-top: 100px; padding-bottom: 100px; width: 100%; overflow: hidden; }
.navratriSec h2 { padding-bottom: 10px; margin-bottom: 40px; color: var(--black); position: relative; }
.navratriSec h2:after { position: absolute; left: 30px; bottom: 0; content: ''; width: 150px; height: 17px; background: url(../images/heading-bg.png) no-repeat; background-size: contain; }
.navratriSec .block { width: 100%; display: flex; gap: 30px; justify-content: space-between; flex-wrap: wrap; }
.navratriSec .left { width: 50%; }
.navratriSec .left .cardStory .image { height: auto; }
.navratriSec .left .cardStory .sliderText { font-size: 36px; line-height: 1.4; }
.navratriSec .right { width: calc(50% - 30px); gap: 30px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.navratriSec .right .cardStory .image { height: 160px; }
.navratriSec .item { width: calc(50% - 15px); }

/* bhavani Sec */
.bhavaniSec { padding-top: 50px; padding-bottom: 50px; width: 100%; position: relative; overflow: hidden; }
.bhavaniSec .top { width: 100%; text-align: center; }
.bhavaniSec .heading { margin-bottom: 20px; width: 100%; }
.bhavaniSec .heading img { margin: 0 auto; max-width: 400px; width: 100%;  }
.bhavaniSec .text { margin: 0 auto; max-width: 700px; width: 100%; }
.bhavaniSec .text h3 { text-align: center; font-size: 30px; font-weight: 500; }
.bhavaniSec .text p { text-align: center; }
.bhavaniSec .swiper { overflow: visible; }
.bhavaniSec .swiper-slide { width: auto; }
.bhavaniSec .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.bhavaniSec .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.fancybox__footer { display: none; }

/* card Story */
.cardBhavani { padding: 70px; width: 385px; position: relative; height: 500px; z-index: 1; }
.cardBhavani .title { margin-bottom: 20px; width: 100%; display: flex; justify-content: center; }
.cardBhavani .title img { height: 60px; }
.cardBhavani p { text-align: center; }
.cardBhavani .image { width: 100%; height: auto; display: flex; justify-content: center; }
.cardBhavani .image img { height: 200px; }
.cardBhavani .linkBtn { position: absolute; right: 35px; bottom: 35px; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; transition: all 0.3s ease-in-out; background-color: #f65c00; transform: rotate(-45deg); }
.cardBhavani .linkBtn:hover { transform: rotate(0deg); }
.cardBhavani .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; }
.cardBhavani .bg img { width: 100%; height: 100%; object-fit: fill; object-position: center center; }

/* vrat Sec */
.vratSec { width: 100%; overflow: hidden; }
.vratSec .top { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; }
.vratSec h2 { margin-bottom: 0; color: var(--black); position: relative; }
.vratSec h2:after { position: absolute; left: 30px; bottom: -6px; content: ''; width: 150px; height: 17px; background: url(../images/heading-bg.png) no-repeat; background-size: contain; }
.vratSec .block { padding-top: 100px; padding-bottom: 100px; width: 100%; border-bottom: 1px solid #ebebeb; }

/* booklet Sec */
.bookletSec { width: 100%; overflow: hidden; }
.bookletSec h2 { margin-bottom: 0; color: var(--black); position: relative; }
.bookletSec h2:after { position: absolute; left: 30px; bottom: -6px; content: ''; width: 150px; height: 17px; background: url(../images/heading-bg.png) no-repeat; background-size: contain; }
.bookletSec .block { padding-top: 50px; padding-bottom: 50px;  display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); width: 100%; border-bottom: 1px solid #ebebeb; }
.bookletSec .block a { height: 100%; }
.bookletSec .block a img { height: 100%; }

/* news Sec */
.newsSec { width: 100%; overflow: hidden; }
.newsSec .newsBlock { padding-top: 100px; padding-bottom: 100px; width: 100%; border-bottom: 1px solid #ebebeb; }
.newsSec h2 { padding-bottom: 10px; color: var(--black); position: relative; }
.newsSec h2:after { position: absolute; left: 10px; bottom: 0; content: ''; width: 150px; height: 17px; background: url(../images/heading-bg.png) no-repeat; background-size: contain; }
.newsSec .block { width: 100%; display: grid; gap: 30px; grid-template-columns: repeat(3, 1fr); }
.newsSec .item { width: 100%; }
.newsSec .button { margin-top: 50px; width: 100%; display: flex; justify-content: center; }
.newsSec .cardStory a { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; }
.newsSec .cardStory .image { width: 140px; height: auto; }
.newsSec .cardStory .image img { object-fit: fill; }
.newsSec .cardStory .sliderText { padding-top: 0; width: calc(100% - 160px); }

/* card Story */
.cardStory { width: 100%; height: 100%; }
.cardStory .image { width: 100%; height: auto; }
.cardStory .image img { width: 100%; height: 100%; object-fit: fill; object-position: center center; }
.cardStory .sliderText { padding-top: 20px; width: 100%; font-weight: 500; color: var(--black); }

/* slider button */
.slideBtn { margin: 0; cursor: pointer; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; transition: var(--transition); border: 1px solid #c7c7c7; background-color: var(--white); }
.slideBtn svg { width: 24px; height: 14px; transition: var(--transition); height: auto; object-fit: unset; transform-origin: unset; fill: var(--black); }
.slideBtn:hover { border: 1px solid var(--black); background-color: var(--black); }
.slideBtn:hover svg { fill: var(--white); }
.slideBtn:after { display: none; }

/* footer */
.footerSec { padding-top: 50px; padding-bottom: 50px; width: 100%; background-color: var(--black); }
.footerSec .copyright { font-size: 12px; width: 100%; text-align: center; color: var(--white); }

@media screen and (max-width: 1200px)  {
    .centered { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 992px)  {
    .heroSec .block { max-width: 650px; }
    .newsSec .block { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 767px)  {
    h2 { font-size: 26px; }

    .headerSec { min-height: 46px; }
    .headerSec .logo { height: 20px; }
    .headerSec .logo svg { width: 120px; height: 20px; }
    .headerSec .back { font-size: 12px; }
    .headerSec .back:before { top: 5px; }

    .heroSec { padding-top: 80px; min-height: 600px; }
    .heroSec .subh { width: 110px; top: 47%; }
    .heroSec .navratri { margin-top: -47px; }
    .heroSec .date { margin-top: 20px; font-size: 16px; }
    .heroSec .bottombg img { object-fit: cover; }

    .navratriSec { padding-top: 60px; padding-bottom: 60px; }
    .navratriSec .left { width: 100%; }
    .navratriSec .left .cardStory .sliderText { font-size: 24px; }
    .navratriSec .right { width: 100%; }
    .navratriSec .item { width: 100%; }
    .navratriSec .right .cardStory a { align-items: flex-start; display: flex; flex-wrap: wrap; justify-content: space-between; }
    .navratriSec .right .cardStory .image { width: 140px; height: auto; }
    .navratriSec .right .cardStory .image img { object-fit: fill; }
    .navratriSec .right .cardStory .sliderText { padding-top: 0; width: calc(100% - 160px); }

    .bhavaniSec .heading img { max-width: 220px; }
    .bhavaniSec .text h3 { font-size: 24px; }

    .cardBhavani { padding: 45px; width: 300px; height: 390px; }
    .cardBhavani .title img { height: 50px; }
    .cardBhavani .image img { height: 150px; }
    .cardBhavani .linkBtn { right: 28px; bottom: 28px; width: 40px; height: 40px; }

    .vratSec .block { padding-top: 60px; padding-bottom: 60px; }
    .vratSec .swiper-slide { width: 270px; }

    .bookletSec .block { grid-template-columns: repeat(1, 1fr); }

    .newsSec .newsBlock { padding-top: 60px; padding-bottom: 60px; }
    .newsSec .block { grid-template-columns: repeat(1, 1fr); }

    .slideBtn { width: 40px!important; height: 40px!important; }
    .slideBtn svg { width: 18px!important; height: 11px!important; }
}

@media screen and (max-width: 480px)  {
    .heroSec { min-height: 550px; }
    .heroSec .block { max-width: 340px; }
    .heroSec .subh { top: 45%; width: 90px; }
    .heroSec .navratri { margin-top: -30px; }
}