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

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

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

body { font-family: 'Poppins', Arial, sans-serif; font-size: 16px; color: var(--black); line-height: 2; background-color: var(--white); }
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); }
p { margin-bottom: 20px; }
p:last-child { margin-bottom: 0; }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; }
h2 { margin-bottom: 20px; font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }

/* global */
.centered { padding-right: calc((100% - 820px)/ 2); padding-left: calc((100% - 820px)/ 2); }
.scale { margin-top: 8px; text-align: center; width: 100%; font-size: 11px; }
.desktopHide { display: none; }

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

/* header */
.header { padding-top: 20px; padding-bottom: 20px; position: relative; width: 100%; display: flex; justify-content: center; align-items: center; } 
.header .logo { width: 150px; height: 25px; display: block; }
.header .logo svg { width: 150px; height: 25px; }

/* hero */
.hero { padding-top: 20px; margin-bottom: 40px; width: 100%; overflow: hidden; position: relative; z-index: 1; }
.hero .image { margin: 0 auto 30px auto; max-width: 200px; width: 100%; position: relative; display: flex; justify-content: center; }
.hero .flag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; }
.hero .stamp { position: relative; z-index: 1; max-width: 230px; width: 100%; }
.hero h1 { padding-bottom: 35px; position: relative; text-align: center; font-family: "Eczar", sans-serif; font-size: 50px; font-weight: 600; }
.hero h1:before { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); content: ''; width: 421px; height: 31px; background: url(../images/hero-line.png) center center no-repeat; background-size: contain; }
.hero h1 span { display: block; text-align: center; font-size: 35px; }
.hero .subtitle { margin: 20px 0; text-align: center; text-transform: capitalize; font-size: 22px; font-weight: 500; line-height: 1.6; }
.hero .byline { text-align: center; width: 100%; font-size: 14px; font-weight: 400; text-transform: uppercase; line-height: 1.6; }

/* result */
.resultSec { margin-bottom: 80px; width: 100%; } 
.resultSec .tab { margin-bottom: 30px; display: flex; flex-wrap: wrap; justify-content: center; }
.resultSec .tab ul { list-style: none; display: flex; border-radius: 10px; border: 1px solid #646464; overflow: hidden; }
.resultSec .tab li a { padding: 0 35px; min-height: 60px; display: flex; align-items: center; font-size: 22px; color: #646464; font-weight: 600; }
.resultSec .tab li.is-active a { color: var(--white); background-color: #646464; }
.resultSec h2 { margin-bottom: 80px; text-align: center; }
.resultSec .block { position: relative; width: 100%; }
.resultSec .img { position: absolute; left: 0; bottom: 40px; width: 120px; }
.resultSec .img.rahul { left: unset; right: 0; width: 80px; }
.resultSec .img img { width: 100%; height: auto; }
.resultSec .party { margin-inline: auto; width: calc(100% - 260px); position: relative; transform: translateX(15px); }
.resultSec .graph { margin-bottom: 40px; position: relative; height: 26px; background-color: #ccc; }
.resultSec .graph:before { position: absolute; left: 50%; top: 60%; z-index: 1; transform: translate(-50%, -50%); content: ''; width: 14px; height: 45px; background: url(../images/graph-mid.png) center bottom no-repeat; }
.resultSec .nda { position: absolute; left: 0; top: 0; height: 100%; }
.resultSec .nda:before { position: absolute; left: 0; top: 0; transition: all .5s ease-in; width: 0; height: 100%; content: ''; background-color: #ffa500; }
.resultSec .india { position: absolute; right: 0; top: 0; height: 100%; }
.resultSec .india:before { position: absolute; right: 0; top: 0; content: ''; transition: all .25s ease-in; width: 0; height: 100%; background-color: #5badd6; }
.resultSec .result-content.active .nda:before,
.resultSec .result-content.active .india:before { width: 100%; transition: all .5s ease-in; }
.resultSec .labelLeft,
.resultSec .labelRight { position: absolute; top: -30px; font-weight: 500; color: #363636; }
.resultSec .labelLeft { left: 0; }
.resultSec .labelRight { right: 0; }
.resultSec .partyDetail { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.resultSec .partyDetail li { padding-left: 20px; position: relative; }
.resultSec .partyDetail li:before { position: absolute; left: 0; top: 10px; width: 10px; height: 10px; border-radius: 50%; content: ''; background-color: #5c5b5b; }
.resultSec .partyDetail li.ndaIcon:before { background-color: #f88214; }
.resultSec .partyDetail li.indiaIcon:before { background-color: #5badd6; }

/* election map */
.electionmapSec { margin-bottom: 80px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; overflow: hidden; } 
.electionmapSec .text { width: 40%; }
.electionmapSec .map { width: 60%; }
.electionmapSec .scale { text-align: right; }
.electionmapSec h2 { font-size: 38px; font-weight: 700; font-family: "Eczar", sans-serif; }
.electionmapSec h2 span { padding: 0 5px; margin-bottom: 5px; display: inline-block; background-color: #deeff7; }
.electionmapSec h2 span.nda { background-color: #fee6d0; }
.electionmapSec .party { max-width: 250px; width: 100%; }
.electionmapSec .party li { margin-bottom: 10px; display: flex; width: 100%; align-items: center; }
.electionmapSec .partyName { padding-right: 10px; line-height: 1.2; font-size: 16px; width: 100px; }
.electionmapSec .partyColor { width: 80px; height: 24px; border: 1px solid #e8e8e8; background-color: #ccc; }
.electionmapSec .partyColor.bjp { background-color: #f3a93a; }
.electionmapSec .partyColor.indi { background-color: #5aadd7; }

/* performance */
.performanceSec { margin-bottom: 80px; width: 100%; /*background: url(../images/bg.png) center top no-repeat;*/ } 
.performanceSec .top { padding-top: 10px; padding-bottom: 10px; margin-bottom: 30px; position: sticky; top: 0; z-index: 3; width: 100%; background-color: var(--white); }
.performanceSec h2 { text-align: center; }
.performanceSec .topTab { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.performanceSec .topTab ul { list-style: none; display: flex; border-radius: 10px; border: 1px solid #646464; overflow: hidden; }
.performanceSec .topTab li a { padding: 0 35px; min-height: 50px; display: flex; align-items: center; font-size: 22px; color: #646464; font-weight: 600; }
.performanceSec .topTab li.is-active a { color: var(--white); background-color: #ffa500; }
.performanceSec .topTab li.cong.is-active a { background-color: #5badd6; }
.performanceSec .swiper { width: 100%; height: auto; }
.performanceSec .block { padding-top: 30px; padding-bottom: 50px; position: relative; /*top: 120px;*/ width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; background: #fff url(../images/bg.png) center top no-repeat; }
.performanceSec .block:last-child { margin-bottom: 0; }
.performanceSec .left { width: 49%; }
.performanceSec .right { width: 49%; }
.performanceSec h3 { padding-bottom: 10px; margin-bottom: 20px; position: relative; text-align: center; font-size: 40px; font-family: "Eczar", sans-serif; }
.performanceSec h3:before { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); content: ''; width: 160px; height: 7px; background: url(../images/heading-line.png) no-repeat; background-size: contain; }
.performanceSec .block p { text-align: center; }
.performanceSec .stateTab { margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 15px; justify-content: center; }
.performanceSec .stateTab li a { padding: 5px 20px; font-size: 16px; border: 1px solid #8c8c8c; border-radius: 25px; }
.performanceSec .stateTab li.is-active a { color: var(--white); background-color: var(--black); } 
.performanceSec .seat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.performanceSec .party { width: 80px; }
.performanceSec .party ul { list-style: none; }
.performanceSec .party li { padding: 10px 0; text-align: center; line-height: 1.4; width: 100%; border-bottom: 1px solid #cbcbcb; }
.performanceSec .party li strong { display: block; font-size: 30px; line-height: 1; }
.performanceSec .party li:last-child { border-bottom: 0; }
.performanceSec .totalSeat { padding: 20px; width: calc(100% - 180px); min-height: 222px; border-radius: 50%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background-color: #ffeed0; }
.performanceSec .seatIcon { margin-bottom: 10px; width: 100%; display: flex; justify-content: center; }
.performanceSec .partyName { width: 100%; text-align: center; font-size: 20px; text-transform: uppercase; }
.performanceSec .total { width: 100%; text-align: center; font-size: 25px; }
.performanceSec .total strong { font-size: 45px; display: block; line-height: 0.7; }
.performanceSec .congteam .totalSeat { background-color: #d5edfa; }
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { background-color: var(--black); }

/* manifesto */
.manifestoSec { padding-top: 10px; margin-bottom: 80px; width: 100%; overflow: hidden; }
.manifestoSec h2 { font-size: 38px; text-align: center; font-family: "Eczar", sans-serif; }
.manifestoSec .manifestoBlock { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; }
.manifestoSec .manifestoBlock:before { position: absolute; left: 50%; top: 0; transform: translateX(-50%); content: ''; width: 1px; height: 100%; background-color: #e5e5e5; }
.manifestoSec .manifestoBlock h3 { padding: 10px 0; text-align: center; width: 100%; background-color: var(--white); }
.manifestoSec .block { width: 48%; }
.manifestoSec .image { margin: 0 auto 30px auto; max-width: 250px; width: 100%; }
.manifestoSec .chartBarsWrap { margin-bottom: 20px; width: 100%; }
.manifestoSec .chartBars { width: 100%; }
.manifestoSec .chartBars ul { width: 100%; }
.manifestoSec .chartBars ul li { margin-bottom: 15px; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.manifestoSec .chartBars ul li.heading { font-weight: 700; font-size: 18px; }
.manifestoSec .chartBars .name { width: 120px; font-size: 18px; }
.manifestoSec .chartBars .number { width: calc(100% - 125px); display: flex; justify-content: flex-end; }
.manifestoSec .chartBars .bar { width: 0; padding: 0 10px; height: 100% !important; display: flex; align-items: center; font-weight: 400; font-size: 14px; color: var(--black); transition: 2s width cubic-bezier(0.6, 0.4, 0.4, 1.1); background-color: #f3a93a; }
.manifestoSec .chartBars ul.rotate li { flex-direction: row-reverse; }
.manifestoSec .chartBars ul.rotate li .name { text-align: right; }
.manifestoSec .chartBars ul.rotate li .number { justify-content: flex-start; }
.manifestoSec .chartBars ul.rotate li .bar { justify-content: flex-end; background-color: #5aadd7; }
.manifestoSec .note { margin-bottom: 30px; width: 100%; font-size: 10px; text-align: right; }
.manifestoSec h3 { margin-bottom: 40px; font-size: 22px; }
.manifestoSec .list { width: 100%; }
.manifestoSec .list li { margin-bottom: 30px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.manifestoSec .icon { padding: 7px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background-color: #f9e6c9; }
.manifestoSec .content { width: calc(100% - 70px); }
.manifestoSec h4 { margin-bottom: 10px; }
.manifestoSec .list.cong .icon { background-color: #d5edfa; }

/* timeline */
.timelineSec { width: 100%; display: flex; flex-wrap: wrap; overflow: hidden; justify-content: space-between; }
.timelineSec .block { width: 48%; }
.timelineSec .block +  .block { margin-top: 120px; }
.timelineSec .top { margin-bottom: 30px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
.timelineSec .img { width: 100px; }
.timelineSec .top h2 { margin-bottom: 0; width: calc(100% - 120px); font-family: "Eczar", sans-serif; font-size: 35px; }
.timelineSec .list { padding: 80px 0; width: 100%; height: 100%; position: relative; border-top: 10px solid #ffa500; border-right: 10px solid #ffa500; border-top-right-radius: 70px; }
.timelineSec .list:before { position: absolute; right: 70px; top: -10px; content: ''; height: 10px; width: 100vw; background-color: #ffa500; }
.timelineSec .list li { padding-right: 30px; margin-bottom: 25px; width: 100%; font-size: 18px; font-weight: 600; text-align: right; position: relative; }
.timelineSec .list li:after { position: absolute; right: -12px; top: 9px; content: ''; width: 16px; height: 16px; border-radius: 50%; background-color: var(--white); box-shadow: 0px 0px 0px 4px rgba(255,165,0,1); }
.timelineSec .block +  .block .list { border: 0; border-top: 10px solid #5badd6; border-left: 10px solid #5badd6; border-radius: 0; border-top-left-radius: 70px; }
.timelineSec .block +  .block .list:before { right: unset; left: 70px; background-color: #5badd6; }
.timelineSec .block +  .block .list li { padding-left: 30px; padding-right: 0; text-align: left; }
.timelineSec .block +  .block .list li:after { left: -12px; right: 0; box-shadow: 0px 0px 0px 4px rgba(91,173,214,1); }

/* entrypoint */
.entrypointSec { padding-top: 80px; padding-bottom: 80px; width: 100%; background-color: #f9f9f9; }
.entrypointSec .block { margin: 0 -15px; display: flex; flex-wrap: wrap; }
.entrypointSec .item { padding: 0 15px 30px 15px; width: 50%; }
.entrypointSec .item:last-child { padding-bottom: 0; }

/* card entrypoint */
.cardEntry { display: block; width: 100%; }
.cardEntry img { margin-bottom: 20px; display: block; }
.cardEntry h4 { font-family: "Eczar", sans-serif; font-size: 20px; transition: var(--transition); }
.cardEntry:hover h4 { color: #dc131b; }


/* credit */
.credit { padding-top: 50px; padding-bottom: 50px; color: var(--white); width: 100%; background-color: var(--black); }
.credit h2 { margin-bottom: 20px; color: var(--white); }

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

/* share btn */
.share-btn { position: fixed; right: 20px; bottom: 20px; z-index: 99; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #404040; cursor: pointer; border: 0; transition: var(--transition); opacity: 0; visibility: hidden; }
.share-btn.show { opacity: 1; visibility: visible; }
.share-btn svg { width: 25px; height: 25px; fill: var(--white); }

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

  .performanceSec .seatIcon { margin: 0 auto 10px auto; width: 45px; }
  .performanceSec .totalSeat { width: 174px; height: 174px; min-height: unset; }
  .performanceSec .total { font-size: 20px; }

  .timelineSec .top h2 { font-size: 30px; }
}

@media screen and (max-width: 767px)  {
  h2 { font-size: 20px; }
  h3 { font-size: 18px; line-height: 1.6; }
  .mobileHide { display: none; }
  .desktopHide { display: block; }

  .hero .image { max-width: 150px; }
  .hero h1 { font-size: 30px; }
  .hero h1:before { width: 250px; }
  .hero h1 span { font-size: 20px; line-height: 1.5; }
  .hero .subtitle { font-size: 18px; }

  .resultSec { margin-bottom: 50px; }
  .resultSec .tab li a { min-height: 50px; font-size: 18px; }
  .resultSec .img { display: none; }
  .resultSec .party { width: 100%; transform: translateX(0); }
  .resultSec h2 { margin-bottom: 50px; }
  .resultSec .labelLeft, .resultSec .labelRight { font-size: 14px; }
  .resultSec .graph { margin-bottom: 25px; }
  .resultSec .partyDetail { gap: 14px; }
  .resultSec .partyDetail li { padding-left: 15px; font-size: 14px; }
  .resultSec .partyDetail li:before { top: 8px; }
  .performanceSec .stateTab { gap: 10px; }
  .performanceSec .stateTab li a { font-size: 14px; }

  .electionmapSec .text { padding-top: 10px; width: 100%; }
  .electionmapSec .map { width: 100%; }
  .electionmapSec h2 { font-size: 30px; }

  .performanceSec .top { margin-bottom: 20px; }
  .performanceSec .topTab li a { font-size: 18px; }
  .performanceSec .left { display: none; }
  .performanceSec .right { width: 100%; }
  .performanceSec h3 { font-size: 30px; }
  .performanceSec h3:before { width: 120px; }

  .performanceSec .party { width: 50%; }
  .performanceSec .party ul { display: flex; flex-wrap: wrap; justify-content: center; }
  .performanceSec .party li { padding: 0 10px; width: auto; border-bottom: 0; border-right: 1px solid #cbcbcb; }
  .performanceSec .party li:last-child { border: none; }
  .performanceSec .totalSeat { margin: 20px auto 0 auto; width: 220px; height: 220px; order: 1; }

  .manifestoSec { margin-bottom: 50px; }
  .manifestoSec .manifestoBlock { align-items: flex-start; }
  .manifestoSec .manifestoBlock:before { display: none; }
  .manifestoSec .manifestoBlock h3 { margin-bottom: 20px; text-align: left; }
  .manifestoSec .image { max-width: 200px; }
  .manifestoSec .block { margin-bottom: 40px; }
  .manifestoSec h2 { font-size: 30px; }
  .manifestoSec .block { width: 100%; }
  .manifestoSec .note { margin-bottom: 10px; }

  .timelineSec { overflow: hidden; }
  .timelineSec .block { padding-top: 10px; width: 100%; }
  .timelineSec .block + .block { margin-top: 60px; }
  .timelineSec .list { height: auto; }

  .entrypointSec .item { width: 100%; }
}