/* 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: #f8f8f4!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.4; font-family: 'Teko', sans-serif; }
h1 { font-size: 80px; }
h2 { font-size: 45px; line-height: 1.3; }
h3 { font-size: 26px; }
h2 span { color: #ee0c3d; font-family: 'Teko', sans-serif; }

/* global */
.containerCenter { padding-right: calc((100% - 1280px)/ 2); padding-left: calc((100% - 1280px)/ 2); }
main { padding-top: 0!important; }

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

/* 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: 60px; background-color: rgba(0,0,0,0.5); }
.headerSection .logo { display: block; height: 28px; background-image: none; }
.headerSection .logo svg { height: 28px; width: 163px; }
.headerSection .back { color: #fff; position: relative; text-transform: uppercase; font-size: 14px; font-weight: 500; background-image: none; }
.headerSection .back:before { position: absolute; left: -12px; top: 7px; content: ''; width: 0; height: 0; border-width: 5px 6px 5px 0; border-color: transparent #e81616 transparent transparent; border-style: solid; }
.headerSection .back:hover { color: #ee0c3d; }
.headerSection .menu { display: flex; flex-wrap: wrap; }
.headerSection .menu li { margin: 0 15px; }
.headerSection .menu li a { color: #fff; font-size: 16px; text-decoration: none; }
.headerSection .menu li a:hover { color: #e11313; }
.headerSection .toggle { margin-right: 20px; position: relative; z-index: 9; display: none; align-items: center; width: 26px; height: 32px; background-image: none; }
.headerSection .toggle span { position: relative; display: block; width: 32px; height: 3px; text-indent: -9999px; border-radius: 2px; background: #fff; transition: .2s; }
.headerSection .toggle span:before, .headerSection .toggle span:after { position: absolute; left: 0; display: block; width: 100%; height: 3px; border-radius: 2px; background-color: #fff; transition-duration: .2s,.2s; content: ""; }
.headerSection .toggle span:before { top: -9px; }
.headerSection .toggle span:after { bottom: -9px; }
.headerSection .toggle.is-active span { background: none; }
.headerSection .toggle.is-active span:before { top: 0; transform: rotate(135deg); }
.headerSection .toggle.is-active span:after { bottom: 0; transform: rotate(-135deg); }
.headerSection .mobileMenu { padding: 40px 40px; position: absolute; left: 0; top: 0; z-index: 5; transition: all 0.3s ease-in-out; opacity: 0; visibility: hidden; width: 100%; height: 100svh; min-height: 100svh; background-image: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(237,221,209,1) 100%); }
.headerSection .mobileMenu.is-active { opacity: 1; visibility: visible; }
.headerSection .ramMandir { position: absolute; left: 0; bottom: 0; width: 40%; }
.headerSection .ramMandir img { width: 100%; height: auto; }
.headerSection .mobileMenu ul { list-style: none; width: 100%; height: calc(100svh - 80px); overflow-y: auto; }
.headerSection .mobileMenu li { padding: 10px 0; width: 100%; border-bottom: 1px solid #bdbdba; background: url(https://www.jagranimages.com/images/ayodhya/arrow.svg) right 17px no-repeat; background-size: 20px;  }
.headerSection .mobileMenu li a { font-size: 20px; font-weight: 700; color: #333; }
.headerSection .mobileMenu li a:hover { color: #e11313; }
.headerSection .mobileMenu li:last-child { border-bottom: 0; }
.headerSection .closeButton { position: absolute; right: 20px; top: 15px; display: inline-flex; align-items: center; font-size: 12px; }
.headerSection .closeButton svg { margin-left: 5px; width: 10px; height: 10px; }

/* hero */
.heroSection { width: 100%; min-height: 100svh; position: relative; overflow: hidden; }
.heroSection .block { padding-top: 70px; width: 100%; min-height: 100svh; position: relative; z-index: 1; }
.heroSection .title { margin: 0 auto; position: relative; z-index: 2; width: 45%; text-align: center; font-size: 100px; font-family: 'Teko', sans-serif; font-weight: 700; line-height: 1;/* -webkit-text-stroke: 3px rgba(255,255,255,1);*/ background: linear-gradient(45deg, rgba(255,110,2,1) 0%,rgba(243,20,46,1) 50%,rgba(255,109,0,1) 100%); -webkit-background-clip: text; color:transparent; }
.heroSection .mandir { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 1; width: 40%; }
.heroSection .ramNaam { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); width: 260px; z-index: -1; }
.heroSection .ramNaam img { width: 100%; height: auto; animation: animName 12s linear infinite; }
.heroSection .adLeft { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: none; }
.heroSection .adRight { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: none; }
.heroSection .adHeading { margin-bottom: 5px; width: 100%; text-transform: uppercase; color: #fff; font-size: 20px; font-weight: 700; font-family: 'Teko', sans-serif; text-align: center; }
.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 .bg:after { position: absolute; left: 0; bottom: -1px; content: ''; width: 100%; height: 200px; background: url(https://www.jagranimages.com/images/ayodhya/herobottom.png) center top repeat-x; }
.heroSection .masjidLeft { position: absolute; left: 0; bottom: 0; width: 32%; }
.heroSection .masjidLeft img { opacity: 0.6; mix-blend-mode: color-burn; }
.heroSection .masjidRight { position: absolute; right: 0; bottom: 0; width: 32%; }
.heroSection .masjidRight img { opacity: 0.6; mix-blend-mode: color-burn; }

/* content sec */
.contentSec { padding-top: 150px; padding-bottom: 150px; position: relative; width: 100%; }
.contentSec .content { margin-inline: auto; line-height: 2; max-width: 820px; text-align: center; width: 100%; }
.contentSec h1 { text-align: center; color: #ee0c3d; font-family: 'Teko', sans-serif; font-size: 80px; }
.contentSec p { text-align: center; font-weight: 700; font-size: 20px; }
.contentSec .verticleLine { position: absolute; left: 50%; top: 0; display: inline-block; width: 6px; height: 125px; background-color: #dd133f; -webkit-mask-image: url(../images/vertical-line-mask.png); mask-image: url(../images/vertical-line-mask.png); -webkit-mask-size: 6px 1500px; mask-size: 6px 1500px; mask-mode: alpha;-webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; -webkit-mask-position: top left; mask-position: top left; opacity: 1; transform: translateX(-50%) translateY(0); transition: transform .6s cubic-bezier(.165,.84,.44,1) 2.2s,opacity .8s ease-out 2.2s; }
.contentSec .verticleLine.bottom { top: unset; bottom: 0; }
.contentSec .block { display: flex; flex-wrap: wrap; justify-content: space-between; }
.contentSec .block .content { max-width: unset; width: calc(100% - 350px); text-align: left; }
.contentSec .block h1 { text-align: left; }
.contentSec .block p { text-align: left; font-weight: 400; }
.contentSec .contentAd { width: 320px; }

/* detail sec */
.detailSec { width: 100%; }
.detailSec .block { padding: 80px 20px 80px 130px; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.detailSec .text { line-height: 2; width: 53%; font-size: 18px; font-weight: 300; }
.detailSec h2 { margin-bottom: 10px; font-size: 45px; font-family: 'Teko', sans-serif; }
.detailSec .image { width: 38%; }
.detailSec .image img { width: 100%; height: auto; }
.detailSec .year { position: absolute; left: 0; top: 50%; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; align-content: center; transform: translateY(-50%); width: 84px; height: 260px; text-align: center; color: #ee0c3d; background: url(https://www.jagranimages.com/images/ayodhya/yearbg.png) no-repeat; background-size: cover; }
.detailSec .yeartitle { font-size: 30px; font-weight: 700; text-align: center; width: 100%; font-family: 'Teko', sans-serif; }
.detailSec .yearnumber { font-size: 36px; font-weight: 700; text-align: center; width: 100%; font-family: 'Teko', sans-serif; }
.detailSec .yearnumber span { width: 100%; text-align: center; display: block; line-height: 0.9; font-family: 'Teko', sans-serif; }
.detailSec .horizontalline { position: absolute; left: 40px; top: -2px; width: calc(100% - 80px); height: 6px; overflow: hidden; border-radius: 100px; }
.detailSec .horizontalline:after { content: ''; position: absolute; top: 0; left: 0; width: 4000px; height: 6px; background-color: #dd133f; mask-image: url(../images/horizontal-line-mask.png); mask-position: bottom right; mask-size: 1500px 6px; mask-mode: alpha; mask-repeat: repeat-x; }
.detailSec .horizontalline.bottom { top: unset; bottom: 0; }
.detailSec .verticleline { position: absolute; display: inline-block; top: -1px; left: 38px; height: 100%; width: 6px; transform-origin: top; border-radius: 100px; overflow: hidden; }
.detailSec .verticleline:after { content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 2000px; background-color: #dd133f; mask-image: url(../images/vertical-line-mask.png); mask-size: 6px 1500px; mask-mode: alpha; mask-repeat: repeat-y; mask-position: top left; }
.detailSec .block:nth-child(even) { padding-left: 20px; padding-right: 130px; flex-direction: row-reverse; }
/* .detailSec .block:nth-child(even) .text { align-self: flex-start; } */
.detailSec .block:nth-child(even) .year { left: unset; right: 0; }
.detailSec .block:nth-child(even) .verticleline { left: unset; right: 38px; }
.detailSec .block:nth-last-child(-n + 1) .horizontalline.bottom { width: calc(50% - 38px); }
.detailSec .block:nth-child(1) .horizontalline { width: calc(50% - 38px); }
.detailSec .block:nth-child(1) .horizontalline.bottom { width: calc(100% - 80px); }
.detailSec .webAds { margin: 0!important; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); }

/* timeline sec */
.timelineSec { margin-bottom: 60px; width: 100%; }
.timelineSec h2 { font-size: 45px; font-family: 'Teko', sans-serif; }
.timelineSec ul { list-style: none; }
.timelineSec li { padding: 80px 0; width: 100%; position: relative; display: none; font-size: 18px; }
.timelineSec li:before { position: absolute; left: 50%; top: -2px; content: ''; display: inline-block; width: 6px; height: 100%; background-color: #dd133f; mask-image: url(../images/vertical-line-mask.png); mask-size: 6px 1500px; mask-mode: alpha; mask-repeat: repeat-y; mask-position: top left; opacity: 1; transform: translateX(-50%) translateY(0); transition: transform .6s cubic-bezier(.165,.84,.44,1) 2.2s,opacity .8s ease-out 2.2s; }
.timelineSec .block { padding-left: 50px; margin-left: auto; position: relative; width: 50%; } 
.timelineSec .block:before,
.timelineSec .block:after { position: absolute; left: 0; top: 50%; transform: translateX(-50%) translateY(-50%); content: ''; border-radius: 50%; }
.timelineSec .block:before { width: 42px; height: 42px; box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.11); background-color: #fff; }
.timelineSec .block:after { width: 20px; height: 20px; background-color: #ee0c3d; }
.timelineSec .text { max-width: 450px; line-height: 2; font-weight: 300; width: 100%; } 
.timelineSec .year { position: absolute; left: -263px; top: 50%; transform: translateY(-50%); font-family: 'Teko', sans-serif; font-weight: 700; width: 213px; height: 84px; font-size: 34px; color: #ee0c3d; display: flex; align-items: center; justify-content: center; background: url(https://www.jagranimages.com/images/ayodhya/yearbg1.png) no-repeat; }
.timelineSec .year:after { position: absolute; right: -15px; top: 50%; transform: translateY(-50%); content: ''; width: 0; height: 0; border-style: solid; border-width: 16px 0 16px 17px; border-color: transparent transparent transparent #ee0c3d; }
.timelineSec li:nth-child(even) .block { padding-left: 0; padding-right: 50px; margin-left: unset; }
.timelineSec li:nth-child(even) .block:before,
.timelineSec li:nth-child(even) .block:after { left: unset; right: 0; transform: translateX(50%) translateY(-50%); }
.timelineSec li:nth-child(even) .text { margin-left: auto; text-align: right; }
.timelineSec li:nth-child(even) .year { left: unset; right: -263px; }
.timelineSec li:nth-child(even) .year:after { right: unset; left: -15px; border-width: 16px 17px 16px 0; border-color: transparent #ee0c3d transparent transparent; }
.timelineSec .button { margin-top: 50px; display: flex; justify-content: center; width: 100%; }
.timelineSec .loadmore { padding: 0 50px; font-size: 24px; font-weight: 700; color: #e11313; font-family: 'Teko', sans-serif; min-height: 70px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; border: 3px solid #e11313; border-radius: 40px; }
.timelineSec .loadmore:hover { color: #fff; background-color: #e11313; }
.timelineSec.dh li { display: block; }

/* mandir detail */
.mandirDetail { margin-bottom: 100px; width: 100%; }
.mandirDetail h2 { margin-bottom: 30px; text-align: center; width: 100%; color: #333; font-size: 45px; font-family: 'Teko', sans-serif; }
.mandirDetail .detail { margin-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: center; }
.mandirDetail .detail li { padding: 0 40px; margin-bottom: 15px; text-align: center; font-size: 16px; color: #929292; border-right: 1px solid #343433; font-weight: 600; }
.mandirDetail .detail li span { display: block; text-align: center; font-size: 20px; color: #000; }
.mandirDetail .detail li:last-child { padding-right: 0; border-right: 0; }
.mandirDetail .block { padding-top: 8%; width: 100%; position: relative; }
.mandirDetail .mandir { margin: 0 auto; position: relative; z-index: 1; width: 54.219%; }
.mandirDetail .mandir img { width: 100%; height: auto; }
.mandirDetail .circle { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 31%; }
.mandirDetail .circle img { width: 100%; height: auto; animation: animName 12s linear infinite; }
.mandirDetail .floorDetail { position: absolute; }
.mandirDetail .floorDetail img { width: 100%; height: auto; }
.mandirDetail .floorDetail.total { left: 15.5%; top: 8.4%; width: 19.063%; }
.mandirDetail .floorDetail.first { left: 14.4%; top: 20%; width: 15%; }
.mandirDetail .floorDetail.height { left: 6%; top: 35%; width: 19.375%; }
.mandirDetail .floorDetail.mandirheight { left: 64%; top: 8.4%; width: 18.047%; }
.mandirDetail .floorDetail.second { left: 68%; top: 20%; width: 15.313%; }
.mandirDetail .floorDetail.ground { left: 74%; top: 35%; width: 15.782%; }
.mandirDetail .list { margin-top: -140px; position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.mandirDetail .list li { width: 18%; font-weight: 500; font-family: 'Teko', sans-serif; }
.mandirDetail .number { margin-bottom: 20px; font-size: 35px; font-weight: 700; font-family: 'Teko', sans-serif; color: #e11313; border-bottom: 1px solid #000; }
.mandirDetail .content { font-size: 24px; line-height: 1.2; font-weight: 500; font-family: 'Teko', sans-serif; }

/* garbha sec */
.garbhaSec { padding-bottom: 80px; margin-bottom: 80px; width: 100%; position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.garbhaSec:before { position: absolute; left: 50%; bottom: 0; content: ''; width: 100%; height: 6px; background-color: #dd133f; mask-image: url(../images/horizontal-line-mask.png); mask-position: bottom right; mask-size: 1500px 6px; mask-mode: alpha; mask-repeat: repeat-x; display: inline-block; opacity: 1; transform: translateX(-50%) translateY(0); transition: transform .6s cubic-bezier(.165,.84,.44,1) 2.2s,opacity .8s ease-out 2.2s; }
.garbhaSec h2 { margin-bottom: 30px; width: 100%; color: #333; font-size: 45px; font-family: 'Teko', sans-serif; }
.garbhaSec .left { width: 60%; } 
.garbhaSec .right { width: 35%; }
.garbhaSec .list { list-style: none; }
.garbhaSec .list li { padding-left: 50px; margin-bottom: 15px; font-size: 20px; font-weight: 700; width: 100%; position: relative; }
.garbhaSec .list li span { color: #e11313; }
.garbhaSec .list li:before { position: absolute; left: 0; top: 5px; width: 25px; height: 25px; content: ''; background: url(https://www.jagranimages.com/images/ayodhya/icon.svg) no-repeat; background-size: cover; }
.garbhaSec .image { position: relative; max-width: 400px; width: 100%; }
.garbhaSec .image:before { position: absolute; left: 0; top: 0; content: ''; width: 100%; height: 100%; background-color: #dc6436; transform: rotate(-2deg); }
.garbhaSec .image img { transform: rotate(2deg); }

/* gallery sec */
.gallerySec { margin-bottom: 80px; width: 100%; }
.gallerySec h2 { margin-bottom: 20px; color: #333; font-size: 45px; 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; }

/* history sec */
.historySec { margin-bottom: 80px; width: 100%; position: relative; }
.historySec h2 { margin-bottom: 30px; width: 100%; color: #333; font-size: 45px; font-family: 'Teko', sans-serif; }
.historySec .list { list-style: none; }
.historySec .list li { padding: 15px 0 15px 50px; font-size: 20px; font-weight: 400; width: 100%; position: relative; border-bottom: 1px solid #333; }
.historySec .list li span { font-weight: 600; }
.historySec .list li:before { position: absolute; left: 0; top: 18px; width: 25px; height: 25px; content: ''; background: url(https://www.jagranimages.com/images/ayodhya/icon.svg) no-repeat; background-size: cover; }
.historySec .list li:last-child { border-bottom: 0; }

/* news sec */
.newsSec { margin-bottom: 80px; width: 100%; position: relative; }
.newsSec h2 { margin-bottom: 30px; width: 100%; color: #333; font-size: 45px; font-family: 'Teko', sans-serif; }
.newsSec .block { margin: 0 -10px; display: flex; flex-wrap: wrap; }
.newsSec .item { padding: 0 10px; margin-bottom: 20px; width: 20%; }
.newsSec .button { padding-top: 15px; display: flex; justify-content: center; }
.newsSec .btn { cursor: pointer; }

/* card news */
.cardNews { width: 100%; height: 100%; box-shadow: 0px 17px 24px 0px rgba(0,0,0,0.06); background-color: #fff; }
.cardNews .image { width: 100%; height: 135px; }
.cardNews .image img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.cardNews .text { padding: 15px; font-size: 14px; font-weight: 600; color: #000; width: 100%; }
.cardNews .text p { overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical; }
.cardNews .bottomLine { margin-top: 10px; width: 100%; font-size: 10px; font-weight: 400; text-transform: uppercase; display: flex; }
.cardNews .state { margin-right: 10px; color: #e11313; }
.cardNews .bottomLine .time { display: none;} 
.cardNews .date { color: #717171; }

/* footer */
.footerSection { width: 100%; }
.footerSection .ayodhya { margin: 0 auto; opacity: 0.3; width: 44.827%; }
.footerSection .footerImg { margin-top: -120px; width: 100%; }
.footerSection .footerImg img { width: 100%; height: 100%; object-fit: fill; }
.footerSection .copyright { padding: 10px 20px; font-size: 14px; color: rgba(255,255,255,0.5); width: 100%; text-align: center; background-color: #333; }

/* ads */
.webAd .ad { padding: 15px 0; margin-inline: auto; max-width: 728px; width: 100%; background-color: #fbfbf8; }
.topads { min-height: unset!important; background-color: #fbfbf8; }

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

@media screen and (max-width: 1320px)  {
   .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 .menu li { margin: 0 7px; }
   .headerSection .menu li a { font-size: 14px; }
   .headerSection .back { font-size: 12px; }
   .headerSection .back:before { top: 5px; }

   .heroSection .title { width: 55%; }
   .heroSection .mandir { width: 50%; }
   .heroSection .ramNaam { width: 210px; }
   .heroSection .adHeading { font-size: 16px; }
   .heroSection .adLeft,
   .heroSection .adRight { width: 150px; }

   .contentSec h1 { font-size: 60px; }

   .detailSec h2 { font-size: 35px; }
   .detailSec .year { width: 70px; height: 216px; }
   .detailSec .yeartitle { font-size: 24px; }
   .detailSec .yearnumber { font-size: 30px; }
   .detailSec .block { padding-left: 100px; }
   .detailSec .block:nth-child(even) { padding-right: 100px; }

   .timelineSec h2 { font-size: 35px; }
   .timelineSec li { padding-top: 60px; padding-bottom: 60px; }
   .timelineSec .year { left: -240px; font-size: 26px; width: 180px; height: 70px; background-size: cover; }
   .timelineSec li:nth-child(even) .year { right: -240px; }
      
   .mandirDetail h2 { font-size: 35px; }
   .mandirDetail .list { margin-top: -90px; }
   .mandirDetail .list li { width: 21%; }

   .garbhaSec h2 { font-size: 35px; }
   .garbhaSec .list li { font-size: 18px; }
   .garbhaSec .list li:before { top: 3px; }
   .gallerySec .swiper-button-next, .gallerySec .swiper-button-prev { top: -58px; width: 40px; height: 20px; }
   .gallerySec .swiper-button-prev { right: 60px; }

   .historySec h2 { font-size: 35px; }
   .historySec .list li { font-size: 18px; }

   .newsSec .item { width: 25%; }
   .newsSec h2 { font-size: 35px; }

   .footerSection .footerImg { margin-top: -60px; }
}

@media screen and (min-width: 767px)  {
   .headerSection .mobileMenu { display: none; }
}

@media screen and (max-width: 767px)  {
   h1 { font-size: 40px; }
   h2 { font-size: 30px; }
   body { font-size: 16px; }
   .hidden { overflow: hidden; }
   .tp-modal-close.hidden { overflow: hidden; }

   .headerSection { 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; }
   .headerSection .menu { display: none; }
   .headerSection .toggle { display: flex; }

   .heroSection .block { padding-top: 80px; }
   .heroSection .title { width: 70%; }
   .heroSection .mandir { width: 60%; }
   .heroSection .ramNaam { width: 180px; }
   .heroSection .adHeading { font-size: 12px; }
   .heroSection .adLeft, .heroSection .adRight { width: 100px; }
   .heroSection .masjidLeft,
   .heroSection .masjidRight { display: none; }
   .heroSection.dh { min-height: unset; height: 600px; }
   .heroSection.dh .block { min-height: unset; height: 600px; }


   .contentSec { padding-top: 120px; padding-bottom: 120px; }
   .contentSec h1 { font-size: 40px; }
   .contentSec p { font-size: 16px; }
   .contentSec .verticleLine { height: 95px; }
   .contentSec .block .content { width: 100%; }
   .contentSec .contentAd { margin-top: 20px; width: 100%; }

   .detailSec h2 { font-size: 30px; }
   .detailSec .text { margin-bottom: 30px; width: 100%; font-size: 16px; }
   .detailSec .image { width: 100%; }
   .detailSec .year { margin-bottom: 20px; position: relative; left: unset; top: unset; transform: unset; }
   .detailSec .block { padding: 50px 0; display: block; }
   .detailSec .block:nth-child(1) .horizontalline { display: none; width: 100%; }
   .detailSec .block:nth-child(1) .horizontalline.bottom { display: block; width: 100%; }
   .detailSec .block:nth-child(even) { padding-left: 0; padding-right: 0; flex-direction: unset; }
   .detailSec .block:nth-child(even) .year { left: unset; right: unset; }
   .detailSec .horizontalline { left: 0; width: 100%; }
   .detailSec .block:nth-last-child(-n + 1) .horizontalline.bottom { width: 100%; } 
   .detailSec .verticleline { display: none; }
   .detailSec .year { width: 170px; height: 66px; justify-content: center; background: url(https://www.jagranimages.com/images/ayodhya/yearbg1.png) no-repeat; background-size: cover; }
   .detailSec .yeartitle { width: auto; font-size: 28px; }
   .detailSec .yearnumber { margin-left: 10px; display: flex; width: auto; }

   .timelineSec h2 { font-size: 30px; }
   .timelineSec li { padding-top: 40px; padding-bottom: 20px; }
   .timelineSec li:before { left: 0; }
   .timelineSec .block { padding-left: 30px; width: 100%; }
   .timelineSec .block:before,
   .timelineSec .block:after { top: 106px; }
   .timelineSec .block:before { width: 30px; height: 30px; }
   .timelineSec .block:after { width: 15px; height: 15px; }
   .timelineSec .text { font-size: 16px; }
   .timelineSec .year { margin-bottom: 30px; width: 150px; height: 58px; font-size: 22px; position: relative; left: unset; top: unset; transform: unset; }
   .timelineSec .year:after { right: unset; left: 50%; top: 99%; transform: translateX(-50%); border-width: 10px 10px 0 10px ; border-color: #ee0c3d transparent transparent transparent; }
   .timelineSec li:nth-child(even) .block { padding-left: 30px; padding-right: 0; text-align: left; }
   .timelineSec li:nth-child(even) .year { right: unset; }
   .timelineSec li:nth-child(even) .year:after { right: unset; left: 50%; top: 99%; transform: translateX(-50%); border-width: 14px 12px 0 12px ; border-color: #ee0c3d transparent transparent transparent; }
   .timelineSec li:nth-child(even) .text { text-align: left; }
   .timelineSec li:nth-child(even) .block:before, .timelineSec li:nth-child(even) .block:after { right: unset; left: 0; transform: translateX(-50%) translateY(-50%); }
   .timelineSec .loadmore { padding: 0 40px; min-height: 60px; font-size: 20px; border-radius: 30px; }

   .mandirDetail { margin-bottom: 70px; }
   .mandirDetail h2 { font-size: 30px; }
   .mandirDetail .detail { justify-content: space-between; }
   .mandirDetail .detail:after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ''; width: 1px; height: 86%; background-color: #000; }
   .mandirDetail .detail li { padding: 10px 0; width: 46%; font-size: 14px; border-right: 0; border-bottom: 1px solid #000; }
   .mandirDetail .detail li span { font-size: 16px; }
   .mandirDetail .circle { width: 38%; }
   .mandirDetail .mandir { width: 75%; }
   .mandirDetail .floorDetail.total { width: 22%; left: 7.5%; }
   .mandirDetail .floorDetail.first { width: 20%; left: 3.4%; }
   .mandirDetail .floorDetail.height { left: -15px; width: 23%; }
   .mandirDetail .floorDetail.mandirheight { left: 68%; width: 25%; }
   .mandirDetail .floorDetail.second { left: 74%; width: 24%; }
   .mandirDetail .floorDetail.ground { left: 80%; width: 23%; }
   .mandirDetail .list { margin-top: -40px; }
   .mandirDetail .list li { width: 45%; }
   .mandirDetail .content { font-size: 20px; }
   .mandirDetail .number { font-size: 30px; }

   .garbhaSec { padding-bottom: 50px; margin-bottom: 60px; }
   .garbhaSec h2 { font-size: 30px; }
   .garbhaSec .left { width: 100%; order: 1; }
   .garbhaSec .right { margin-bottom: 40px; width: 100%; display: flex; justify-content: center; }
   .garbhaSec .list li { padding-left: 30px; font-size: 16px; }
   .garbhaSec .list li:before { top: 7px; width: 20px; height: 20px; }
   
   .gallerySec { margin-bottom: 50px; }
   .gallerySec h2 { font-size: 30px; }
   .gallerySec .swiper-button-next, .gallerySec .swiper-button-prev { top: -50px; width: 30px; height: 16px; }
   .gallerySec .swiper-button-prev { right: 42px; }

   .historySec { margin-bottom: 50px; }
   .historySec h2 { font-size: 30px; }
   .historySec .list li { padding-left: 30px; font-size: 16px; }
   .historySec .list li:before { top: 18px; width: 20px; height: 20px; }

   .newsSec { margin-bottom: 50px; }
   .newsSec h2 { font-size: 30px; }
   .newsSec .item { width: 50%; }

   .footerSection .footerImg { margin-top: -20px; }
   .footerSection .copyright { font-size: 12px; }
}

@media screen and (max-width: 479px)  {
   .heroSection .title { width: 100%; }
   .heroSection .mandir { width: 80%; }
   .newsSec .item { width: 50%; }
   .cardNews .image { height: auto; }
   .cardNews .text { font-size: 12px; }
}