@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Varela+Round&display=swap');

:root {
	--c1:#fecf59;
	--c2:rgb(191, 10, 48);
	--c3:rgb(1, 38, 101);
	--c4:rgba(0,0,0,.3);
	--c5:rgba(0,0,0,.1);
	--c6:#ffffff;
	--c7:#000000;
/*	--radius : em !important;*/
	--zshadow : 0px 5px 50px 0px rgba(122,122,122,0.33);
	--maxwidth:1400px;

	--btn-color:var(--c7)!important;
	--input-border-color:var(--c1)!important;
}

.c1 { background-color:var(--c1); }
.c2 { background-color:var(--c2); }
.c3 { background-color:var(--c3); }
.c4 { background-color:var(--c4); }
.c5 { background-color:var(--c5); }
.c6 { background-color:var(--c6); }

.c1-text { color:var(--c1); }
.c2-text { color:var(--c2); }
.c3-text { color:var(--c3); }
.c4-text { color:var(--c4); }
.c5-text { color:var(--c5); }
.c6-text { color:var(--c6); }


body { font-family: 'Poppins'!important; font-weight:500!important; height:100vh; }

.bgimg[bgsrc] {
  background: url(attr(bgsrc));
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


.herosection { min-height:calc(100vh); background-position: right top; transition:10s all ease-in-out; }
.herosection:hover { background-position: left bottom; }
.herosection .heading { font-weight:700; color:var(--c7); text-shadow:0px 2px 3px var(--c6); }

header { background:rgba(255,255,255,.1); position:fixed; top:0; left:0; right:0; overflow: visible; font-weight:600; text-shadow:0px 1px 2px var(--c6); z-index:3; }


.glassstyle { /* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
/*border-radius: 0px 0px 16px 16px;*/
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3); }

header.glassstyle.fixed { background: }

.actionbtn.mdi::before { content:"\F11AC"; animation:ringanim 3s infinite; color:var(--c1);  }
.actionbtn:hover.mdi::before { content:"\F1182";  color:var(--c1); }

@keyframes ringanim {
	0% { transform:rotate(-12deg) scale(1.1); }
	10% { transform:rotate(12deg); }
	40% { transform:rotate(-12deg) scale(1) ;  }
	80% { transform:rotate(12deg); }
	90% { transform:rotate(-12deg) scale(1.1)  ; }
	100% { transform:rotate(12deg) scale(1); }
}



.quotebox .content { border-left:5px solid var(--c1); font-weight:500; padding:1em; margin:2em auto; }
.quotebox .content * { display:inline-grid; gap:.5em; }

.service-item { box-shadow:0px 10px 10px 0px var(--c5); position:relative; overflow:hidden; margin-top:20px;  border-radius:var(--radius); }
.service-item { display:grid; grid-template-columns:1fr 2fr; gap:1em; }
.service-item .imgbox { position:relative; overflow: visible; }
.service-item .imgbox img { width:100%; height:100%; object-fit:cover; min-width:200px; }
.service-item .imgbox::before { content:""; width:100%; height:100%; background:var(--c1); position:absolute; z-index:-1; transform:scale(1.09) rotate(3deg); }
.service-item .textbox { padding:1em; display:grid; gap:1em; }

.service-item .abtn { font-size:1.7em; text-align:right; display:block; }
.service-item:hover .abtn { animation:arrowgo 2s infinite  ease-in-out; }
.service-item strong { color:var(--c7); font-weight:800; font-size:1.2em; }
.service-item p { color:var(--c4); }
.sec-title  > * { padding-top:2em; padding-bottom:2em; }
.sec-title { border-top:3px solid var(--c1); }


@keyframes arrowgo {
	0% { transform:scale(.8) translateX(-20px) ; }
	50% { transform:scale(1.2) translateX(-10px); color:var(--c1); }
	100% { transform:scale(.8) translateX(0px) ; }
}



@media (max-width:820px){
	.service-item { display:grid; grid-template-columns:1fr; gap:1em; }
	.service-item .imgbox img { max-height:200px; object-fit:contain; }
}


/* shades */
.sh1 { background-color: #0093E9; background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); }
.sh2 { background-color: #4158D0; background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); }
.sh3 { background-color: #21D4FD; background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%); }
.sh4 { background-color: #FFE53B; background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%); }




/* Parallax */
/* ParlX  */
.parlx { height:100vh; background:url('../parlx/bgz.jpg'); background-size:cover; background-attachment:fixed; }

.parallax-container {
  position: sticky;
  top: 0;
  left: 0;
  right:0;
  width: 100%;
  height: 100%;
/*  max-height: 100vh;*/
  perspective: 1px;
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
/*  font-size: 1rem;*/
  color: white;
/*  background-color: rgba(0, 0, 0, 0.5);*/
  opacity:1;
  transition: opacity 0.3s;
}

.parallax-layer img { object-fit:contain; object-position:bottom; }

.parallax-layer.visible {
  opacity: 1;
}


/* .//.  */
.bghands { position: fixed; bottom: -55px; width:100%; animation:slideInUp 2s;  }
.greenhands  { position: fixed; bottom:-55px; width:100%; animation:slideInUp 3s; }
.voterhand { position: absolute; right: -181px; top: -150px; animation:comedown 1s ease-in-out; }
.voterbox { position: absolute;right: 136px;bottom: -58px; animation:fadeInUp 1s; }


@keyframes comedown { 
	0% { transform:rotate(90deg);  }
	100% { transform:rotate(0deg);  }
}

/* para1 */
.sec3 { height:100vh; min-height: 400px; overflow-y:auto; position:sticky; top:0px; }
.sec3 .parallax-container { border-top:3px solid var(--c6); position: relative;  background-repeat: no-repeat; background-size:100% 100%; background-position: bottom;    overflow: hidden;}

.sec3 .parallax-container,.sec3 .parallax-layer { position:relative; }

.sec3 img { position:absolute; bottom:0px; right:4em; z-index:1; border-radius:0px 0px 0em 1em; }
.sec3 img.photos {  height:90%; animation:fadeInUp 1s; }
.sec3 img.photo {  }
.sec3 .content { position:absolute; bottom:0px; left:4em; display:grid; align-content: center; gap:1em; padding:1em; }
.sec3 .tcircle { position: absolute; left: -34px; top: calc(50% - 68px); opacity: .8; }
.sec3 .photo{ position:fixed;  left:0px; bottom:0px; max-height: 100%;  width:100%; opacity:0.1; }
.sec3 .content h5 { animation:slideInLeft 1s; width:calc(100% - 1.2em); font-size:5em; font-weight:bold; white-space:nowrap; text-transform: uppercase; position:fixed; top: 2em; left: 1em; }
.sec3 .content h5 > strong { display: grid;  justify-content:left; align-content: center; }
.sec3 .content h5 > span { font-size:inherit!important; text-align:right; }
.sec3 .content h5 span { font-size:.3em; padding-left:.2em; }
.sec3 .content small {  animation:zoomIn 1s; font-size:2.2em;  color:var(--c4); font-weight:bold; z-index:0; text-align:left; position:fixed;  bottom:3em; left:2.5em;  }


.wabtn { position:fixed; bottom:.5em; right:.8em; font-size:4em; mix-blend-mode: multiply;  }


.pheading { min-height:400px; display:grid; align-content:center; font-weight:bold; background:url('../img/bgimg.jpg'); background-size:cover;  }
.cmh { min-height:70vh; align-content:start; text-align:left; }
.cmh p > strong { color:var(--c2); }
.cmh > ul { padding-left:1em; text-indent:1em; }

.subheading { grid-column:1/3; padding-top:3em; margin-top: 1em; border-top:1px solid rgba(0,0,0,.1); color:var(--c2); }

.splcmh .subheading { border-top:none; }

/* = Loading =  */

body.loading::after {  content:""; background-color:rgba(255,255,255,.99); 
  animation:loadingpage 3s infinite ease-in-out; background-image:url('../img/logo.png'); background-size:150px; background-repeat:no-repeat; background-position: center;
  color:rgba(0,0,0,.7); position:fixed; top:0; left:0; right:0; bottom:0; z-index:99; width:100%; height:100%; }


@keyframes loadingpage {
  0%  { background-size:80px;  opacity:1; }
  90% { background-size:150px;  opacity:1; }
  100% { background-size:180px;  opacity:.9; }
}

/* ==  */

@media	(max-width:820px){

	header { position:fixed!important; }
	nav.active:not(.social) { height:100vh!important; }

	.voterbox { right:37px!important; }
	.voterhand { top: 49px!important; }
	.parallax-layer h3 { text-align:center; }
	.herosection .heading { text-align:center; }
	.quotebox .content {  font-size:1.2em; }

/* //Parallax	*/
	
	.sec3 img  { right:unset; }
	.sec3 .parallax-layer .content * { all:unset; }
	.sec3 .parallax-layer .content { position:fixed; top:100px; left:0; right:0; display: grid; align-content: start;   font-size: 1.5em; font-weight: 600; }

	.sec3 .parallax-layer .content h5 { font-size:1em; font-weight:800; }
	.sec3 .parallax-layer .content small { font-size:.8em;  }

	.subheading { grid-column:unset; }

}