/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Teko:wght@300;400;500;600;700&display=swap');

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

body { font-family: 'Poppins', sans-serif; font-size: 18px; color: #000; line-height: 1.6; background-color: #f0f8fd!important; }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; text-decoration: none; color: #000; text-decoration: none; transition: all 0.3s ease-in-out; }
a:hover { color: #ee0c3d; }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; font-family: 'Teko', sans-serif; }
h1 { font-size: 80px; }
h2 { font-size: 50px; }
h3 { font-size: 26px; }

/* global */
.containerCenter { padding-right: calc((100% - 1260px)/ 2); padding-left: calc((100% - 1260px)/ 2); }
.centeredSm { padding-right: calc((100% - 850px)/ 2); padding-left: calc((100% - 850px)/ 2); }
main { padding-top: 0!important; width: 100%; position: relative; overflow: hidden; }
.readmore { padding: 0 30px; display: inline-flex; align-items: center; min-height: 40px; border: 1px solid #2e2e2e; border-radius: 20px; font-size: 16px; font-weight: 600; background-image: none; }
.hr { margin: 80px 0; width: 100%; }
.hr .strokeanimation { stroke: #000000; stroke-width: 2; stroke-miterlimit: 2; }
.hr .strokeanimation.active { animation: animate-svg-stroke-1 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both; }

/* header */
.headerSection { 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; }
.headerSection .logo { display: block; height: 28px; background-image: none; }
.headerSection .logo svg { height: 28px; width: 163px; }
.headerSection .back { color: #000; position: relative; text-transform: uppercase; font-size: 14px; font-weight: 500; background-image: none; }
.headerSection .back:before { position: absolute; left: -12px; top: 7px; transition: all 0.3s ease-in-out; content: ''; width: 0; height: 0; border-width: 5px 6px 5px 0; border-color: transparent #000 transparent transparent; border-style: solid; }
.headerSection .back:hover { color: #ee0c3d; }
.headerSection .back:hover:before { border-color: transparent #ee0c3d transparent transparent; }

/* hero */
.heroSection { width: 100%; min-height: 100svh; position: relative; overflow: hidden; }
.heroSection:after { position: absolute; left: 0; bottom: -50px; content: ''; z-index: 1; width: 100%; height: 200px; background: url(https://www.jagranimages.com/images/ayodhya/herobottom.png) center top repeat-x; }
.heroSection .block { padding-top: 70px; width: 100%; display: flex; flex-wrap: wrap; align-content: space-between; align-items: stretch; min-height: 100svh; position: relative; z-index: 1; }
.heroSection .title { position: relative; z-index: 2; width: 100%; }
.heroSection .title img { margin: 0 auto; width: 38%; }
.heroSection .mandir { position: relative; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1; width: 40%; }
.heroSection .ramNaam { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); width: 400px; z-index: -1; }
.heroSection .ramNaam img { width: 100%; height: auto; animation: animName 12s linear infinite; }
.heroSection .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.heroSection .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.heroSection .left { position: absolute; left: 0; bottom: 0; width: 9%; }
.heroSection .right { position: absolute; right: 0; bottom: 0; width: 9%; }

/* intro sec */
.introSec { padding-top: 50px; padding-bottom: 50px; position: relative; width: 100%; background-color: #f8f8f4; }
.introSec .block { margin: 0 auto; max-width: 850px; width: 100%; }
.introSec p { margin-bottom: 40px; text-align: center; font-size: 25px; font-weight: 600; color: #000; }
.introSec .video { z-index: 1; position: relative; margin-bottom: 20px; width: 100%; padding-top: 56.25%; }
.introSec .video:before { position: absolute; left: -20px; top: 15px; z-index: -1; content: ''; width: calc(100% + 30px); height: 100%; background-color: #c3d3e4; }
.introSec .video iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }

/* content sec */
.contentSec { padding-top: 50px; padding-bottom: 50px; position: relative; width: 100%; background-color: #f8f8f4; }
.contentSec .block { margin-bottom: 100px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.contentSec .heading { width: 420px; display: flex; align-items: center; gap: 20px; }
.contentSec .heading img { width: 25%; }
.contentSec .text { width: calc(100% - 440px); }
.contentSec h2 { font-size: 58px; font-weight: 500; font-family: 'Teko', sans-serif; }
.contentSec p { font-size: 22px; font-weight: 600; color: #000; }
.contentSec .block:nth-child(even) { flex-direction: row-reverse; }
.contentSec .block:nth-child(even) .heading { flex-direction: row-reverse; }
.contentSec .block:nth-child(even) h2 { text-align: right; }
.contentSec .block:last-child { margin-bottom: 0; }

/* shotvideos sec */
.Shortvideos { padding-top: 80px; width: 100%; }
.Shortvideos h2 { margin-bottom: 20px; font-size: 50px; color: #000; font-weight: 700; font-family: 'Teko', sans-serif; }
.Shortvideos .short { margin-left: -10px; margin-right: -10px; display: flex; }
.Shortvideos .short li { padding-left: 10px; padding-right: 10px; width: 20%; }
.Shortvideos .short figure { overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,.2); }
.Shortvideos .videoIcon,
.Shortvideos .videoIcon:before { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.Shortvideos .videoIcon { z-index: 2; }
.Shortvideos .videoIcon:before { content: ""; width: 18px; height: 18px; background-color: #fff; z-index: -1; }
.Shortvideos .videoIcon svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 50px; height: 40px; display: block; fill: #da251d; }

/* Latestnews sec */
.Latestnews { margin-top: 80px; margin-bottom: 80px; width: 100%; }
.Latestnews .top { margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; }
.Latestnews h2 { font-size: 50px; color: #000; font-weight: 700; font-family: 'Teko', sans-serif; }
.Latestnews ul{ display: flex; flex-wrap: wrap; }
.Latestnews ul li{ width:33.33%; padding-right: 30px; margin-bottom: 20px; display: flex; }
.Latestnews ul li figure{ width: 150px; }
.Latestnews ul li aside{ width: calc(100% - 150px); padding-left: 20px; }
.Latestnews ul li aside span{ text-transform: uppercase; color: #ee0c3d; }
.Latestnews ul li aside p{ font-size: 14px; font-weight: 600; }

/* Video sec */
.Videosec { margin-top: 80px; width: 100%; }
.Videosec .top { margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: space-between; }
.Videosec h2 { font-size: 50px; color: #000; font-weight: 700; font-family: 'Teko', sans-serif; }
.Videosec ul { display: flex; flex-wrap: wrap; }
.Videosec ul li { width: calc(25% - 23px); margin-right: 30px; background-color: white; box-shadow: 0 0 20px rgb(0 0 0 / 10%); }
.Videosec ul li:last-child{ margin-right: 0; }
.Videosec ul li figure { position: relative; }
.Videosec ul li figure i { position: absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px; width: 40px; height: 30px; background-color: white; border-radius: 10px; display: flex; align-items: center; }
.Videosec ul li figure i svg { width: 40px; height: 40px; fill: #e81616;}
.Videosec .text { padding: 15px; }
.Videosec .text span { font-size: 11px; color: #e51b1b; display: block; }
.Videosec ul li p a { font-size: 14px; }

/* gallery sec */
.gallerySec { margin-bottom: 80px; width: 100%; }
.gallerySec h2 { margin-bottom: 20px; font-size: 50px; color: #000; font-family: 'Teko', sans-serif; }
.gallerySec .slider { position: relative; width: 100%; }
.gallerySec .swiper { overflow: visible; }
.gallerySec .swiper-button-next,
.gallerySec .swiper-button-prev { top: -65px; margin: 0; width: 56px; height: 30px; }
.gallerySec .swiper-button-next:after,
.gallerySec .swiper-button-prev:after { display: none; }
.gallerySec .swiper-button-prev { left: unset; right: 70px; background: url(https://www.jagranimages.com/images/ayodhya/prev.png) no-repeat; background-size: cover; }
.gallerySec .swiper-button-next { right: 0; background: url(https://www.jagranimages.com/images/ayodhya/next.png) no-repeat; background-size: cover; }

/* footer */
.footerSection { padding-top: 10px; padding-bottom: 10px; width: 100%; text-align: center; font-weight: 600; font-size: 14px; color: rgba(255,255,255,0.5); background-color: #000; }

@keyframes animName {
   0%{
      transform: rotate(0deg);
     }
  100%{
      transform: rotate(360deg);
     }
}

@keyframes animate-svg-stroke-1 {
   0% {
       stroke-dasharray: 2230px;
       stroke-dashoffset: 2230px;
   }

   1% {
       stroke-dashoffset: 2230px;
   }

   100% {
       stroke-dashoffset: 0;
       stroke-dasharray: 2230px;
   }
}

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

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

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

   .heroSection .mandir { width: 50%; }
   .heroSection .ramNaam { width: 210px; }

   .introSec p { font-size: 20px; }

   .contentSec .heading { width: 320px; }
   .contentSec h2 { font-size: 50px; }
   .contentSec .text { width: calc(100% - 340px); }
   .contentSec p { font-size: 18px; } 

   .scrollbar { overflow-x: scroll; overflow-y: hidden; justify-content: flex-start; display: flex; flex-wrap: wrap; margin-left: -30px; margin-right: -30px; padding-left: 30px; }
   .Latestnews ul,
   .Videosec ul { flex-wrap: nowrap; padding-bottom: 20px; }
   .Latestnews ul li,
   .Videosec ul li { margin-bottom: 0; width: 240px; white-space: normal; display: inline-block; }
   .Latestnews ul li figure{ width: 100%; margin-bottom: 10px; }
   .Latestnews ul li aside{ width: 100%; padding-left: 0; }


}

@media screen and (max-width: 767px)  {
   h1 { font-size: 40px; }
   h2 { font-size: 35px; }
   body { font-size: 16px; }
   .hidden { overflow: hidden; }
   .tp-modal-close.hidden { overflow: hidden; }
   .readmore { padding: 0 20px; min-height: 36px; font-size: 12px; }
   .hr { margin: 50px 0; }

   .headerSection { min-height: 60px; justify-content: unset; }
   .headerSection .logo { height: 20px; }
   .headerSection .logo svg { width: 120px; height: 20px; }
   .headerSection .back { margin-left: auto; font-size: 12px; }
   .headerSection .back:before { top: 5px; }

   .heroSection .block { padding-top: 80px; }
   .heroSection .title img { width: 60%; }
   .heroSection .mandir { width: 70%; }
   .heroSection .ramNaam { width: 280px; }
   .heroSection .left,
   .heroSection .right { width: 15%; }

   .introSec p { font-size: 18px; }

   .contentSec { padding-top: 0; }
   .contentSec .heading { margin-bottom: 20px; justify-content: flex-start; width: 100%; }
   .contentSec .heading img { width: 50px; }
   .contentSec h2 { font-size: 35px; }
   .contentSec .text { width: 100%; }
   .contentSec p { font-size: 16px; }
   .contentSec .block { margin-bottom: 50px; }
   .contentSec .block:nth-child(even) .heading { flex-direction: unset; }

   .Latestnews h2,
   .Videosec h2 { font-size: 35px; }
   
   .gallerySec { margin-bottom: 50px; }
   .gallerySec h2 { font-size: 35px; }
   .gallerySec .swiper-button-next, .gallerySec .swiper-button-prev { top: -50px; width: 30px; height: 16px; }
   .gallerySec .swiper-button-prev { right: 42px; }

   .footerSection { font-size: 12px; }
}

@media screen and (max-width: 479px)  {
   .heroSection .title img { width: 80%; }
   .heroSection .mandir { width: 100%; }
}