:root {

	--c1: #6700EE;
	--c1-light : #f6eefc;

	--gradient: linear-gradient(139deg, rgba(177,118,255,1) 0%, rgba(103,0,238,1) 100%);
	--footer-gradient: linear-gradient(45deg, rgb(53, 27, 88) 0%, rgb(35, 20, 54) 100%);

	--shadow: 0 4px 30px #33333333!important;;

	--whatsapp: #01E675;

	--c2: #F0E6FD;

	--cbg: #fcfaff;

    --font-color: #2c3847;
}

.c1-text {
	color: var(--c1);
}

.c2 {
	background-color: var(--c2);
}

.cbg {
	background-color: var(--cbg);
}

.btn-bg {
	background: var(--gradient); 
	color: #fff;
	padding: 1em 2em!important;
}

body {
	font-family:"Calibri, sans-serif";
	color: var(--font-color);
}

.vh-100 {
	min-height: 100vh;
}

header {
	padding: .7em 2.5em!important;
	font-weight: 500;
}

.header {
	min-height: 100vh;
}

.banner {
    min-height: 85vh;
    background-size: cover;
    
}

.service-content {
	/* padding-top: 2em; */
	padding-bottom: 3em;

	background-color: var(--c2);	
	min-height: 50vh;
	display: grid;
	align-items: center;
}

.story-content {
	/* background-color: var(--c1-light);	 */
	min-height: 60vh;
	display: grid;
	align-items: center;
	align-content: center;
}

.question-content {
	/* background-color: var(--c1-light);	 */
	padding: 5em 0;
	display: grid;
	align-items: center;
	align-content: center;
}

.banner-img img{
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.section_img img{
	width: 40vw!important;
}

.header_button {
	display: grid;
    grid-auto-flow: column;
    justify-content: left ;
    align-items: center;
    grid-gap: 1em;
}



.about {
	height: 50vh!important;
	/* background-color: grey; */
	align-items: center;
}

.services {
height:80vh;
align-items: center;
align-content: center;
}

.faq {
	min-height: 50vh;
	align-items: center;
	/* background-color: #ddd; */
}

.faq_img {
	max-height: 40vh;
	width: auto;
	margin:auto;
	
}

/* price list cards*/
.price-list {
	justify-items: center;
}

.card {
	box-shadow: var(--shadow);
	border: none!important;
	min-height: 100%;

	border-radius: 1em!important;
	-webkit-border-radius: 1em!important;
	-moz-border-radius: 1em!important;
	-ms-border-radius: 1em!important;
	-o-border-radius: 1em!important;
}

.logo-price {
	padding: 1em;
	
}

.card ul {
	list-style: none;
}

footer {
	background-color: rgb(32, 32, 32);
	min-height: 7vh;
	display: grid;
	align-items: center;
}

.whatsapp_button {
	border: none;
	cursor: pointer;
	position: fixed;
	bottom: 27px;
	right: 30px;
	z-index: 1;
    transition: all 1s;
	animation: floating infinite 2s;
	-webkit-animation: floating infinite 2s;
	animation-delay:1s;
}

.whatsapp_button:hover { animation-play-state: paused; }

@keyframes floating {
	0% {
		opacity: 1;
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

.footer {
	background: var(--footer-gradient);
}

.footer .container {
	justify-items: center;
}

.footer .contacts {
	color: #dec2ff;
}

.footer_logo img {
	max-width: 150px;
	height: auto;
	
}

.service-content .card {
	position: relative;
	cursor: pointer;
}

.service-content .card .over-btn {
	  display: none;
	  color: #fff;
}

.service-content .card .over-btn a {
	position: relative;
}

.service-content .card .over-btn a::before {
	font-size:2em;
	position: absolute;
    top: 2px;
    left: 20px;
}

@-moz-document url-prefix() { 
  .service-content .card .over-btn a::before {
     margin-top:30px;
  }
}

.service-content .card:hover .over-btn {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: .75em;
	width: 150px;
	height: 150px;
	background: var(--whatsapp);
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%;
	-o-border-radius: 100%;
	transform: translateX(25%) translateY(25%);
	-webkit-transform: translateX(25%) translateY(25%);
	-moz-transform: translateX(25%) translateY(25%);
	-ms-transform: translateX(25%) translateY(25%);
	-o-transform: translateX(25%) translateY(25%);
	animation:rotax .5s ease-in-out;
	-webkit-animation:rotax .5s ease-in-out;
	display: block;
}

@keyframes rotax {
	0% {
		transform: translateX(100%) translateY(0%) rotateZ(180deg) ;
		-webkit-transform: translateX(100%) translateY(0%) rotateZ(180deg) ;
		-moz-transform: translateX(100%) translateY(0%) rotateZ(180deg) ;
		-ms-transform: translateX(100%) translateY(0%) rotateZ(180deg) ;
		-o-transform: translateX(100%) translateY(0%) rotateZ(180deg) ;
		background: rgb(255, 255, 255);
}
	100% {
		transform: translateX(25%) translateY(25%) rotateZ(0deg) ;
		-webkit-transform: translateX(25%) translateY(25%) rotateZ(0deg) ;
		-moz-transform: translateX(25%) translateY(25%) rotateZ(0deg) ;
		-ms-transform: translateX(25%) translateY(25%) rotateZ(0deg) ;
		-o-transform: translateX(25%) translateY(25%) rotateZ(0deg) ;
		background: var(--whatsapp);
}
}

@media (max-width: 812px) {
    
    .service-content .card .over-btn a::before {
        top: 3px;
        left: 23px;
    }
    
	.process_img2{
		order: 1;
	}
	main section {
		padding-bottom: 3em;
		padding-top: 3em;
		min-height: 100vh;
	}

	.header_button {
		justify-content: center;
		
	}

	.header_button .btn-bg:hover {
		box-shadow: var(--shadow);
		white-space: nowrap;
	}

	.banner {
		padding-top: 3em;
	}

	#services h4 {
		margin-bottom: -1em;
		padding-top: 1em;
	}

	#contact h4 {
		margin-top: -2em;	
		/* padding-top: -2em; */
	}

	.header_button a {
		margin-top: 2em;
	}

	nav.active:not(.social) { background: var(--c1)!important; }
	nav.active:not(.social)::before { color:rgba(255, 255, 255, 1)!important; }

	.banner h1 {
		font-size: 2.5em;
	}

	
  }