body {
	font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	background-color: #fff;
	height: 200vh;
	position: relative; 
	}
	body:before {
	  content: "";
	  position: absolute;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  -webkit-transition: .3s all ease;
	  -o-transition: .3s all ease;
	  transition: .3s all ease;
	  opacity: 0;
	  visibility: hidden;
	  z-index: 1; }
	body.offcanvas-menu:before {
	  opacity: 1;	
	  z-index: 1002;
	  visibility: visible; }
  
  p {
	color: #b3b3b3;
	font-weight: 300; }
  
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
  
  a {
	-webkit-transition: .3s all ease;
	-o-transition: .3s all ease;
	transition: .3s all ease; }
	a, a:hover {
	  text-decoration: none !important; 
	color: #fff;}
  
.hero {
	height: max-content !important;
	width: 100%;
	background: transparent url('../images/bg-11.png') center calc(50% + 100px) no-repeat !important;
	background-size: cover;
	background-attachment: fixed;
	background-blend-mode: overlay;
	/* This is the new line */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: right;
	padding-bottom: 30px;
}

.hero-container {
	background: linear-gradient(to right, #00acbe, #4b0082);
	border-radius: 0 0 50px 50px;
}

@media (max-width: 767px) {
	.hero {
		background-position: center center;
		display: flex;
		justify-content: center;
		height: max-content;
	}
}
  /* Header */
  header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 5;
	padding: 0px 0; 
    }
	@media (min-width: 768px) {
	  header {
		padding: 30px 0; 
	    }
	}
	.container {
		max-width: 100%;
	}
	
	header .navbar-brand {
	  text-transform: uppercase;
	  letter-spacing: .2em;
	  font-weight: 800;
	  font-size: 2rem;
	 }
	header .navbar-brand span {
		color: #fff; 
	 }
	header .navbar-brand.absolute {
		position: absolute; 
	}
	@media (max-width: 991.98px) {
		  header .navbar-brand.absolute {
			position: relative; } 
	}
	  
	@media (min-width: 768px) {
			  header .navbar-brand span {
				color: #ced4da; } 
	}

	.navbar-toggler, .navbar-toggler:focus {
	    border: none !important;
	    outline: none !important;
	    fill: white;
	}


	@media (max-width: 991.98px) {
		header .navbar-toggler {
			padding: .5rem .25rem;
			  line-height: 1;
			  border: none !important; 
			  margin-top: 10px;
		} 
	}
	  
	@media (min-width: 768px) {
		header .navbar-toggler {
			padding: .25rem .75rem;
			  line-height: 1;
			  border:none !important;		} 
	}
	/* By default, setting the navbar color to #00acbe for mobiles */
	header .navbar {
      background: linear-gradient(to right, #00acbe, #4b0082);
 	  padding-top: 0rem;
	  padding-bottom: 0rem;
	  text-align: center;
	  border-radius: 0px 0px 24px 24px;
	}

	/* For tablets in landscape (768px to 1024px) and desktops, setting the color to transparent */
	@media screen and (min-width: 768px) and (orientation: landscape) {
	    header .navbar {
	        background: transparent !important;
	    }
	}

	/* For desktops bigger than 1199.98px, background is transparent */
	@media screen and (min-width: 1199.98px){
	    header .navbar {
	        background: transparent !important;
	    }
	}

	.navbar .navbar-expand-lg .navbar-dark .bg-dark {
		padding: 0;
	}

	  header .navbar-expand-md .navbar-nav .nav-link {
		padding-right: 1.5rem;
		padding-left: 1.0rem;
	  }
	  header .navbar .nav-link {
		padding: 1.7rem 1rem;
		margin: 0px 10px;
		font-size: 20px;
		display: inline-block;
	    position: relative;
		font-weight: bold;
		color: #fff !important;
	    }
		header .navbar .nav-link::after {
			content: "";
			display: block;
			margin: auto;
			height: 5px;
			width: 0;
			top: 5px;
			transition: all 0.3s;
			background: linear-gradient(to right, #00ff7b, #ff2e97, #4b0082);
			box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38);
			border-radius: 30px;
		}
		  header .navbar .nav-link:hover::after, header .navbar .nav-link.active-nav::after {
			width: 100%;
			background: linear-gradient(to right, #00ff7b, #ff2e97, #4b0082);
			box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38); 
		}
			@media (max-width: 991px) {
		  header .navbar .nav-link {
			padding: .8rem 0rem;
		    width: 60%;
			font-size: 16px !important;
		 }
		 header .navbar .nav-link:hover::after, header .navbar .nav-link.active-nav::after {
			width: 50%;
		  }
		header .navbar .nav-link.active {
		  	color: #fff !important;
			  font-size: 16px;
		  }
		}

		header .navbar .cta-btn a{ 
	        background: #ff2e97;
			color: #fff !important;
			text-transform: uppercase;
			text-shadow: none;
			font-size: 18px;
			padding: 15px 20px !important;
			margin-bottom: 15px !important;
			border: 1px solid #ff2e97;
		    border-radius: 2px 15px 2px 2px;
			line-height: 1;
			font-weight: bold;
			-webkit-transition: .3s all ease;
			-o-transition: .3s all ease;
			transition: .5s all ease; 
		}
		header .navbar .cta-btn a:hover {
			color: #fff;
			text-shadow: none;
			background: linear-gradient(to right, #ff2e97, #00ff7b);
			border: 1px solid #fff;
			-webkit-box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
			box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
	    }
	    @media (min-width: 768px) {
			header .navbar .cta-btn a {
			background: #ff2e97;
			color: #fff !important;
			text-transform: uppercase;
			text-shadow: none;
			font-size: 18px;
			padding: 10px 15px !important;
			border: 1px solid #ff2e97;
			line-height: 1;
			font-weight: bold;
			-webkit-transition: .3s all ease;
			-o-transition: .3s all ease;
			transition: .5s all ease; }
			header .navbar .cta-btn a:hover {
				color: #fff;
				text-shadow: none;
				background: linear-gradient(to right, #ff2e97, #00ff7b);
				border: 1px solid #fff;
				-webkit-box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
				box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
			}
		}
		@media (max-width: 991px) {
			header .navbar .cta-btn a{
			padding: 8px !important;
			margin-top: 40px !important;
			font-size: 16px;
			background: #ff2e97;
			width: 50%;
			align-self: center;
			font-weight: bold;
		  }
		  header .navbar .cta-btn a:hover, header .navbar .cta-btn a:active {
			background: linear-gradient(to left, #00ff7b, #ff2e97);
			border: 1px solid white;
		  }
		 }


	  header .navbar .dropdown-menu {
		font-size: 15px;
		border-radius: 4px;
		border: none;
		background: #00abbe9f;
		-webkit-box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
		min-width: 13em;
		margin-top: -10px; }
		header .navbar .dropdown-menu:before {
		  bottom: 100%;
		  left: 10%;
		  border: solid transparent;
		  content: " ";
		  height: 0;
		  width: 0;
		  position: absolute;
		  pointer-events: none;
		  border-bottom-color: #fff;
		  border-width: 7px; }
		  @media (max-width: 991.98px) {
			header .navbar .dropdown-menu {
			  background: #000 !important;
			  margin-left: 15%;
			  width: 40%;
			}
			header .navbar .dropdown-menu:before {
			  display: none; }
			header .navbar .dropdown-menu a {
			  background: #000;
			  padding-top: 7px;
			  padding-bottom: 7px; } }
		header .navbar .dropdown-menu .dropdown-item {
		  color: #fff;
		  font-weight: bold; }
		header .navbar .dropdown-menu .dropdown-item:hover {
		  background: #fff;
		  color: #00acbe; 
		  border-radius: 5px;}
		header .navbar .dropdown-menu .dropdown-item.active {
		  background: #fff;
		  color: #00acbe;
		  border-radius: 5px;}
		header .navbar .dropdown-menu a {
		  padding-top: 7px;
		  padding-bottom: 7px; }
		  @media (max-width: 991.98px) {
			header .navbar .dropdown-menu .dropdown-item:hover {
				background:#00acbe; 
				color: #fff; 
				border-radius: 5px;}
			  header .navbar .dropdown-menu .dropdown-item.active {
				background: #fff;
				color: #00acbe;
				border-radius: 5px;} 
		  }

@media (min-width: 768px){
	.navbar .container {
		-ms-flex-wrap: nowrap;
		flex-wrap: wrap;
	}
	.sticky {
		position: fixed;
		top: 0;
		width: 100%;
		padding: 0;
		background: linear-gradient(to right, #00acbe, #4b0082);
		border-radius: 0 0 24px 24px;
	  }	
}
@media (max-width: 991px){
	.sticky {
		position: fixed;
		top: 0;
		width: 100%;
		padding: 0;
		
	  }	
}


* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

.black {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/*----------bootstrap-navbar-css------------*/


.logo img{
	width: 200px;
}
@media (max-width: 991px){
	.logo img{
		max-width: 35vw;
	}
}

hr {
    margin: 0 auto;
    margin-top: 40px;
    width: 80%;
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 100, 171, 0), rgba(0, 100, 171, 0.75), rgba(0, 100, 171, 0));
}

.counter{
    color: #f7b205;
    font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    text-align: center;
    height: 200px;
    width: 200px;
    padding: 30px 25px 25px;
    margin: 0 auto;
    border: 3px solid #f7b205;
    border-radius: 20px 20px;
    position: relative;
    z-index: 1;
}
.counter:before,
.counter:after{
    content: "";
    background: #f3f3f3;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -3px 3px 0px inset, rgba(0, 0, 0, 0.1) 0px -3px 3px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,rgba(0, 0, 0, 0.09) 0px 3px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px inset;
    position: absolute;
    left: 15px;
    top: 15px;
    bottom: 15px;
    right: 15px;
    z-index: -1;
}
.counter:after{
    background: transparent;
    width: 100px;
    height: 100px;
    border: 15px solid #f7b205;
    border-top: none;
    border-right: none;
    border-radius: 0 0 0 20px;
    box-shadow: none;
    top: auto;
    left: -10px;
    bottom: -10px;
    right: auto;
}
.counter .counter-icon{
    font-size: 35px;
    line-height: 35px;
    margin: 0 0 15px;
    transition: all 0.3s ease 0s;
}
.counter:hover .counter-icon{ transform: rotateY(360deg); }
.counter .counter-value{
    color: #555;
    font-size: 30px;
    font-weight: 600;
    line-height: 20px;
    margin: 0 0 20px;
    display: block;
    transition: all 0.3s ease 0s;
}
.counter:hover .counter-value{ text-shadow: 2px 2px 0 #d1d8e0; }
.counter h3{
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 15px;
}
.counter.blue{
    color: #00acbe;
    border-color: #00acbe;
}
.counter.blue:after{
    border-bottom-color: #00acbe;
    border-left-color: #00acbe;
}
.counter.green{
    color: #01c15e;
    border-color: #00ff7b;
}
.counter.green:after{
    border-bottom-color: #00ff7b;
    border-left-color: #00ff7b;
}
.counter.pk{
    color: #ff2e97;
    border-color: #ff2e97;
}
.counter.pk:after{
    border-bottom-color: #ff2e97;
    border-left-color: #ff2e97;
}
.counter.purp{
    color: #4b0082;
    border-color: #4b0082;
}
.counter.purp:after{
    border-bottom-color: #4b0082;
    border-left-color: #4b0082;
}
@media screen and (max-width:990px){
    .counter{ margin-bottom: 40px; }
}


.head-container {
	margin-top: 5%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-evenly;

}
@media (max-width: 991px){
	.head-container {
		margin-top: 20px;
		display: flex;
		flex-wrap: wrap; /* Reverses wrapping order for proper placement */
		justify-content:center; /* Centers horizontally */
		padding-left:auto; 
		padding-right:auto;
	}
}
.quote {
  background: #4b008282;
  border-radius: 24px;
  width: 400px; /* default width for desktop */
  height: max-content;
  padding: 25px;
  position: relative;
  -webkit-box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
  margin-top: 350px;
  margin-right: 20px;
}
.quote h5 {
  color: #fff;
  line-height: 30px;
  font-size: 1.1rem;
  font-weight: 600;
}
.quote p {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.quote:hover{
	box-shadow: inset 0px 0px 10px #ff2e978c,
			1px 1px 40px #ff2e978c;
}

/* Media queries for tablet */
@media only screen and (max-width: 768px) {
  .quote {
	background: #4b008282;
    margin-top: 450px;
	margin-bottom: 10px;
  }
  .quote p {
  	font-size: 28px;
  	line-height: 28px;
  }
  .quote h5 {
    font-size: 20px;
    line-height: 24px;
  }
}

.quote .play {
	padding-top: 30px;
	display: flex;
	justify-content: center;
}
.quote .play img {
	width: 45px;
	cursor: pointer;
	filter: drop-shadow(0 0 10px #0002);
}
.quote .play span a{
	margin-left: 10px;
	font-size: 20px;
	font-weight: 900;
	color: rgba(0, 0, 0, 0.8);
	cursor: pointer;
}

/* Media queries for smaller screens */
@media only screen and (max-width: 480px) {
.quote {
		background: #4b008282;
		width: 80%;
		height: auto;
		padding: 12px;
		font-size: 17px;
		margin-right: unset;
	}
  .quote p {
  	font-size: 24px;
  	line-height: 28px;
  }
  .quote h5 {
    font-size: 18px;
    line-height: 24px;
  }
  .quote .play {
  	padding-top: 15px;
  }
}


.btn-home{
	border-radius: 10px;
	border: 1px solid #fff;
	padding: 20px;
	color: #fff;
	font-size: 20px;
	letter-spacing: 2px;
	font-weight: 400;
	-webkit-text-stroke: 1px #F8F8F8;
	background: linear-gradient(to right, #ff2e97, #00ff7b);

	 /* Preserve-3d allows elements inside to have their own transformations */
	 transform-style: preserve-3d;

	 /* Set initial transition properties */
	 transition: transform .5s ease-out;
	 
}
@media only screen and (max-width: 768px) {
	.btn-home {
		font-size: 28px;
	}
}
@media only screen and (max-width: 480px) {
	.btn-home {
		font-size: 17px;
	}
}
/* Add a pseudo-element for the back of the card */
.btn-home::before {
	content: "";
	position:absolute;
	top:0;left:-1px;right:-1px;bottom:-1px;z-index:-1;
 
	/* Apply different background or styles for the back of the card if needed */
 
 }
 
 /* Add hover style with transformed perspective */
 .btn-home:hover {
	 transform-origin:center center;
	 color: #fff;
	 background: linear-gradient(to right, #00ff7b, #ff2e97);
	 -webkit-box-shadow: 0 2px 15px 0px #00ff7b;
				box-shadow: 0 2px 15px 0px #00ff7b;
 
	 /*
		Adjust these values as per your desired perspective shift.
		The mouseX and mouseY variables are used to calculate 
		how much to shift based on mouse position.
	  */
	 transform:
		 rotateX(calc(var(--mouseY) * -0.2deg))
		 rotateY(calc(var(--mouseX) * -0.2deg))
		 translateZ(20px)
		 scale(1.1);
 }

 .diffSection .totalcard .card {
    display: flex;
    align-items: center;
    padding-bottom: 50px;
    padding-top: 30px;
}

 .btn-course{
	border-radius: 15px;
	padding: 20px;
	width: fit-content;
	color: #fff;
	font-size: 17px;
	font-weight: 400;
	-webkit-text-stroke: 1px #F8F8F8;
	background: linear-gradient(to right, #00ff7b, #4b0082);

	 /* Preserve-3d allows elements inside to have their own transformations */
	 transform-style: preserve-3d;

	 /* Set initial transition properties */
	 transition: transform .5s ease-out;
	 
}
/* Add a pseudo-element for the back of the card */
.btn-course::before {
	content: "";
	position:absolute;
	top:0;left:-1px;right:-1px;bottom:-1px;z-index:-1;
 
	/* Apply different background or styles for the back of the card if needed */
 
 }
 
 /* Add hover style with transformed perspective */
 .btn-course:hover {
	 transform-origin:center center;
	 color: #fff;
	 background: linear-gradient(to right, #4b0082, #00ff7b);
	 -webkit-box-shadow: 0 2px 15px 0px #00ff7b;
				box-shadow: 0 2px 15px 0px #00ff7b;
 
	 /*
		Adjust these values as per your desired perspective shift.
		The mouseX and mouseY variables are used to calculate 
		how much to shift based on mouse position.
	  */
	 transform:
		 rotateX(calc(var(--mouseY) * -0.14deg))
		 rotateY(calc(var(--mouseX) * -0.14deg))
		 translateZ(10px)
		 scale(1.06);
 }

 .btn-courses {
 	border-radius: 15px;
 	padding: 20px;
 	color: #fff;
 	font-size: 17px;
 	font-weight: 400;
 	-webkit-text-stroke: 1px #F8F8F8;
 	background: linear-gradient(to right, #ff2e97, #4b0082);

 	/* Preserve-3d allows elements inside to have their own transformations */
 	transform-style: preserve-3d;

 	/* Set initial transition properties */
 	transition: transform .5s ease-out;

 }

 /* Add a pseudo-element for the back of the card */
 .btn-courses::before {
 	content: "";
 	position: absolute;
 	top: 0;
 	left: -1px;
 	right: -1px;
 	bottom: -1px;
 	z-index: -1;

 	/* Apply different background or styles for the back of the card if needed */

 }

 /* Add hover style with transformed perspective */
 .btn-courses:hover {
 	transform-origin: center center;
 	color: #fff;
 	background: linear-gradient(to right, #4b0082, #ff2e97);
 	-webkit-box-shadow: 0 2px 15px 0px #ff2e97;
 	box-shadow: 0 2px 15px 0px #ff2e97;

 	/*
		Adjust these values as per your desired perspective shift.
		The mouseX and mouseY variables are used to calculate 
		how much to shift based on mouse position.
	  */
 	transform:
 		rotateX(calc(var(--mouseY) * -0.14deg)) rotateY(calc(var(--mouseX) * -0.14deg)) translateZ(10px) scale(1.06) !important;
 }

.svg-image img{
	height: auto;
}
@media (min-width: 992px){
	.svg-image img {
		content: url(../images/extra/nurse.png); /* Add playmob.png as background image using pseudo-element */      
		max-width: 600px;
	}
	p .diff {
		padding-top: 50px;
	}
	.service-swipe .s-card {
		width: 560px;
		margin-left: 30px;
		justify-content: left;
		padding: 50px;
		margin-left: 70px;
	}
}

@media (max-width: 991px){
	.svg-image img {
		content: url(../images/extra/nurse-mob.png); /* Add playmob.png as background image using pseudo-element */      
		max-width: 200px;
	}
	p .diff {
		padding-top: 0px;
	}
	.service-swipe .s-card {
		width: auto;
		margin: 20px;
		padding: 20px;
	}
}


/*Common things in all sections*/
#about_us_section, #how_it_works, #portfolio_section, #team_section, #services_section, #contactus_section {
		font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	color: #000;
	position: relative;
}
.diffSection {
	width: 100%;
	/*position: relative;*/
	justify-content: center;
	align-items: center;
}
.diffSection .content {
	margin: 10px;
	text-align: center;
	padding: 10px 20px;
	font-size: 1.1em;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*PORTFOLIO*/
.extra {
	width: 100%;
}

.extra p {
	padding: 70px;
	padding-bottom: 150px;
	font-size: 30px;
	text-align: center;
	color: #272529;
	font-family: cursive;
	z-index: -9;
}
.smbox {
	display: flex;
	flex-wrap: wrap;
	transform: translateY(-100px);
	justify-content: center;
}
.smbox span {
	margin: 1%;
	background: #fff;
	border-radius: 10px;
	padding: 30px 50px;
	cursor: pointer;
}

.module-border-wrap {
	padding: 0.5rem;
	border-radius: 10px;
	background: linear-gradient(to right, #00ff7b, #ff2e97, #2b8bd9);
	padding: 3px;
  }
  
  .module {
	background: white;
	color: #272529;
	border-radius: 10px;
	padding: 1rem;
	text-align: center;
	font-weight: 600;
	font-size: 17px;
  }
.module:hover {
	-webkit-box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
}
.smbox .data {
	font-size: 80px;
	color: #FA6146;	
}

/*Social*/
.ext {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 30px;
	background-image: url('/images/v-pat.png');
	background-repeat: repeat-x;
	box-sizing: border-box;
	height: 200px;

}

.ext img {
	width: 30%;
	height: 200px;
	object-fit: cover;
}

.ext .middle {
	padding-left: 80px;
	padding-right: 80px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-right: 100px;
	border-radius: 5px;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	text-align: center;
	background-image: url('/images/fb-part.png');
	background-repeat: repeat-y;
  box-shadow: 0 20px 20px -4px #ff2e97;
}

.ext .middle:hover {
	box-shadow: 0 20px 20px -4px #00ff7b;
}

.ext .middle p {
	margin: 0;
	padding: 0;
	font-size: 25px;
	color: #272529;
	font-family: cursive;
	cursor: pointer;
}

@media (max-width: 768px) {
	.ext {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 30px;
	background-image: url('/images/v-pat.png');
	background-repeat: repeat-x;
	box-sizing: border-box;
	height: 200px;

}

.ext img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.ext .middle {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-radius: 5px;
	margin-right: 0 !important;
	box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
	text-align: center;
	background-image: url('/images/fb-part.png');
	background-repeat: repeat-y;
  box-shadow: 0 20px 20px -4px #ff2e97;
}

.ext .middle:hover {
	box-shadow: 0 20px 20px -4px #00ff7b;
}

.ext .middle p {
	margin: 0;
	padding: 0;
	font-size: 25px;
	color: #272529;
	font-family: cursive;
	cursor: pointer;
}
}


/*Title*/
.title {
	margin-top: 20px; 
		font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	font-size: 30px;
	text-align: center;
	color: #2E3D49;
}

/*ABOUT*/
.about-content {
	width: 100%;
	position: relative;
	justify-content: center;
	flex-wrap: wrap;
	display: flex;
	align-items: center;
}
.about-content .side-text {
	width: 550px;
	padding: 50px 40px;
	background: #fff;
	box-shadow: 2px 0 100px rgba(0,0,0,0.3);
	border-radius: 5px;
	text-align: justify;
	line-height: 22px;
	opacity: 0;
	transform: translateX(-100px);
	transition: 1s ease-in-out;
}
.about-content .side-text-appear {
	opacity: 1;
	transform: translateX(0px);
}
.about-content .side-text h2 {
	padding: 10px;
}
.about-content .side-text p {
	padding: 10px;
}
.about-content .side-image img {
	width: 90%;
	border-radius: 5px;
}
.sideImage {
	transform: translateX(100px);
	opacity: 0;
	transition: .8s ease-in-out;
}
.sideImage-appear {
	opacity: 1;
	transform: translateX(0px);
}

/*POPULAR SUBJECTS*/
.cbox {
	position: relative;
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
}
.cbox .det {
	width: 250px;
	height: 80px;
	margin: 10px;
	background: #fff;
	cursor: pointer;
}
.cbox .det a{
	justify-content: space-around;
	width: 250px;
	padding: 28px;
	border-radius: 10px;
	border: 1px solid #ff2e97;
	font-size: 15px;
	color: #272529;
	font-family: cursive;
	text-decoration: none;
}
.cbox .det a:hover {
	background: linear-gradient(to right, #ff2e97, #00acbe);
	color: white;
}
.cbox .det a:hover img{
	filter: brightness(100);
}
.cbox img {
	width: 20px;
	margin-right: 20px;
}

/* HOW IT WWORKS*/
	.how-it-works {
		color: #000; 
		text-align: left; 
		line-height: 35px;
	}	

.swal2-popup {
    font-size: 16px !important;
    border-radius: 20px;
    background: #00acbe;
    color: white;
}

.swal2-styled {
    padding: 10px 32px 10px 32px !important;
    margin: 20px 10px 0px 10px !important;
    width: 170px;
    height: 45px;
}

/*TEAM SECTION*/
.totalcard {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.totalcard .card {
	margin: 50px;
	width: 450px;
	border-radius: 24px;
	background: #fff;
}
.totalcard .card{
	box-shadow: inset 0 0 10px rgba(0,0,0,0.4),
					0 0 10px rgba(0,0,0,0.3);
}
.card:nth-child(1){
	border-top: 5px solid #00ff7b;
}
.card:nth-child(2){
	border-top: 5px solid  #ff2e97;
}
.card:nth-child(1):hover {
	box-shadow: inset 0px 0px 10px #00ff7b8c,
				1px 1px 40px #00ff7b8c;
	transform: scale(1.01);
}
.card:nth-child(2):hover {
	box-shadow: inset 0px 0px 10px  #ff2e978c,
				1px 1px 40px  #ff2e978c;
	transform: scale(1.01);

}
.totalcard .card img {
	width: 100px;
	height: 100px;
	margin-top: 5px;
	cursor: pointer;
	border-radius: 50px;
	transition-duration: .8s;
}
.totalcard .card img:hover {
	transform: scale(3.5);
	border-radius: 0;
	box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
#detail p{
	font-size: 1.1rem;
	font-weight: 400;
	line-height: 25px;
	color: #343A40;
	padding-bottom: 30px;
	text-align: center;
	margin: 25px;
	margin-bottom: 0px;
	margin-top: 0px;
}
#detail button {
	outline: none;
	border-radius: 10px;
	border-style: none;
	border: 1px solid black;
	padding: 9px 25px;
	cursor: pointer;
	transition-duration: .4s;
}
#detail a {
	bottom: 80px;
	text-decoration: none;
	margin-bottom: 30px;
	margin-top: 20px;
	margin-left: 90px;
	align-self: center;
}
.btn-roshan:hover {
	background: rgba(0,255,0,0.7);
	color: #fff;
}
.btn-roshan2:hover {
	background: rgba(0,0,255,0.5);
	color: #fff;
}
.card-title {
	font-size: 20px;
	color: #343A40;
	padding: 20px;
	font-weight: 700;
}

/*Service Section*/
/*Service Section*/
.service-swipe {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	align-items: center;
	background-size: cover;
	width: 100%;
	height: auto;
	transform: translateY(-50px);
}
.service-swipe .s-card img {
	width: 100px;
}
.service-swipe a {
	padding: 0;
	margin: 40px 10px;
}

.service-swipe .s-card {
	display: flex;
	font-weight: 700;
	height: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background: linear-gradient(to bottom, #eb2d82cb, #029ba4);
	border-radius: 5px 30px 5px 5px;
	cursor: pointer;
	transition-duration: .5s;
}
.service-swipe .s-card p {
	color: #f2f2f2;
	font-size: 1.1rem;
	font-weight: 400;
}
.service-swipe .s-card:hover {
	box-shadow: 0 0 35px #ff2e97;
	border-radius: 30px;
	transform: translateY(-10px);
}

/*Contact Us Section*/
.csec {
	background: linear-gradient(to right, #ff2e97, #00acbe);
	background-attachment: fixed; 
	position: absolute;
	width: 100%;
	height: 250px;
	top: 200px;
	content: '';
	transform-origin: top right;
	transform: skewY(-10deg);
	z-index: -1;
}
.back-contact {
	margin-top: 0px;
	transform: translateY(-50px);
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.cc {
	height: 100%;
	width: 400px;
	padding: 15px;
	border-radius: 24px;
	border: 2px solid #ff2e97;
	justify-content: center;
	box-shadow: 1px 1px 20px rgba(0,0,0,0.4);
	background: #fff;
}
.cc form {
	margin: 5%;
	width: 90%;
	height: 100%;
}
.cc form label {
	position: absolute;
	color: #2E3D49;
	font-size: 10px;
	font-weight: 800;
}
.cc form input {
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 5px;
	box-shadow: inset 0 0 5px lightgray;
	border: 1px solid rgba(0,0,0,0.2);
	outline: none;
	color: #2E3D49;
	font-weight: 600;
}
.imp {
	color: red;
}
form textarea {
	width: 100%;
	height: 100px;
	box-shadow: inset 0 0 5px lightgray;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 5px;
	outline: none;
	color: #2E3D49;
	font-weight: 600;
	margin-bottom: 35px;
}
#csubmit {
	background: linear-gradient(to right, #ff2e97, #00acbe);
	border-radius: 5px;
	border-style: none;
	outline: none;
	width: 100%;
	padding: 15px 25px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	padding: 15px;
	cursor: pointer;
	-webkit-box-shadow: 0 7.5px 5px #777;
  -moz-box-shadow: 0 7.5px 5px #777;
  box-shadow: 0 7.5px 5px #777;
}
#csubmit:hover {
	background: linear-gradient(to right, #00ff7b, #ff2e97);
}

/*REVIEW SECTION*/
#makeitfull {
	display: flex;
	justify-content: center;
	transform: translateY(35px);
}
#makeitfull img {
	width: 50px;
}
.review {
	background: #F8F8F8;
	width: 100%;
}
.rev-container {
	padding: 10px 10%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
    justify-items: center;
	
}
.rev-container .rev-card {
	/*overflow: hidden;*/
	width: 500px;
	height: 240px;
	margin-bottom: 40px;
	background: #fff;
	display: flex;
	border-radius: 24px;
	padding: 10px;
	box-shadow: 2px 2px 20px rgba(0,0,0,0.2);
}
.rev-card:hover {
	box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}
.identity {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 10px;
}
.identity img {
	width: 120px;
	height: 120px;
	transition-duration: .8s;
	border-radius: 50%;
}
.identity img:hover {
	transform: scale(1.7);
	border-radius: 15px;
	box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.identity p {
	width: 150px;
	font-weight: bold;
	color: #2E3D49;
	text-align: center;
}
.identity h6 {
	width: 150px;
	text-align: center;
}
.identity .rating img {
	width: 12px;
	height: 12px;
	margin-right: 5px;
}
.rev-cont {
	overflow: hidden;
}
.rev-cont #title {
	padding: 10px;
	color: #2E3D49;
	font-weight: bold;
}
.rev-cont #content {
	padding: 10px;
	font-size: 1rem;
	color: #2E3D49;
	line-height: 22px;
	text-align: justify;
}


/*FEEDBACK*/
.title2 {
	position: relative;
	margin-top: 150px;
	margin-left: 100px;
}
.title2 span{
	font-weight: 700;
		font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	font-size: 30px;
	color: #2E3D49;
}
.title2 .shortdesc2 {
	padding: 10px;
		font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	font-size: 15px;
	color: #2E3D49;
	margin-bottom: 10px;
}
.feedbox {
	margin-top: 50px;
	width: 100%;
	display: flex;
	background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)),url("images/extra/b4.jpg");
	background-size: cover;
	padding: 50px 80px;
	background-attachment: fixed;
}
.feed {
	width: 800px;
	height: 400px;
	position: relative;
	border-radius: 10px;
	justify-content: center;
	box-shadow: inset 0 0 90px rgba(0,0,0,0.6),
					0 0 80px rgba(0,0,0,0.2);
	background: rgba(0,0,0,0.4);
}
.feed form {
	width: 100%;
	height: 100%;
	padding: 20px;
}

.feed form label {
	position: absolute;
	color: #f2f2f2;
	font-size: 10px;
	font-weight: 800;
}
.feed form input, .feed textarea {
	padding: 15px;
	border-radius: 5px;
	box-shadow: inset 0 0 5px lightgray;
	border: 1px solid rgba(0,0,0,0.2);
	outline: none;
	color: #2E3D49;
	background: #fff9;
	font-weight: 600;
}
.feed form input {
	margin-bottom: 15px;
	width: 50%;
}
.feed form .fname {
	width: 25%;
}
.feed form textarea {
	width: 100%;
	height: 100px;
}
.feed #csubmit {
	margin-top: 25px; 
	background: linear-gradient(to right, #ff2e97, #00acbe);
	border-radius: 5px;
	border-style: none;
	outline: none;
	width: 100%;
	padding: 15px 25px;
	color: #fff;
	font-size: 12px;
	cursor: pointer;
}

/*SCROLLING TEXT*/
.marqu {
	text-align: center;
	justify-content: center;
	color: #fff;
	font-size: 20px;
	padding: 10px;
}

/*FOOTER*/
footer {
	color: #E5E8EF;
	background: #000D;
	padding: 50px 0; 
}
footer .footer-container {
	max-width: 1300px;
	margin: auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
}
footer .social-media img{
	width: 22px;
}
footer .logo {
	width: 180px;
	color: #fff;
	padding-bottom: 15px;
}
footer .social-media a{
	margin-right: 10px;
	font-size: 22px;
	text-decoration: none;
}
footer .right-col h1{
	font-size: 26px;
}
footer .border{
	width: 100px;
	height: 4px;
	background: linear-gradient(to right, #ff2e97, #00acbe);
	margin: 2px;
}
footer .newsletter-form {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
footer input::placeholder {
  color: white !important;
}
footer .txtb {
	flex: 1;
	padding: 18px 40px;
	font-size: 16px;
	background: #343A40;
	border: none;
	font-weight: 700;
	outline: none;
	border-radius: 5px;
	min-width: 260px;
	margin-top: 20px;
	color: white;
}
footer .btn {
	margin-top: 20px;
	padding: 18px 40px;
	font-size: 16px;
	color: #f1f1f1;
	background: linear-gradient(to right, #ff2e97, #00acbe);
	border: none;
	font-weight: 700;
	outline: none;
	border-radius: 5px;
	margin-left: 20px;
	cursor: pointer;
	transition: opacity .3s linear;	
}
footer .btn:hover {
	opacity: .7;
}

.pushable {
	position: relative;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 2px;
	outline-offset: 4px;
	transition: filter 250ms;
}

.shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: hsl(0deg 0% 0% / 0.25);
	will-change: transform;
	transform: translateY(2px);
	transition:
		transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: linear-gradient(to left,
			hsl(340deg 100% 16%) 0%,
			#a30036 8%,
			#ff2e97 92%,
			hsl(340deg 100% 16%) 100%);
}

.front {
	display: block;
	position: relative;
	padding: 12px 42px;
	border-radius: 12px;
	font-size: 20px;
	font-weight: 800;
	color: white;
	background: linear-gradient(to right, #ff2e97, #00ff7b);
	will-change: transform;
	transform: translateY(-4px);
	transition:
		transform 600ms cubic-bezier(.3, .7, .4, 1);
	box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(22, 17, 17, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(22, 17, 17, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
}

.pushable:hover {
	filter: brightness(110%);
}

.pushable:hover .front {
	transform: translateY(-6px);
	transition:
		transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .front {
	transform: translateY(-2px);
	transition: transform 34ms;
}

.pushable:hover .shadow {
	transform: translateY(4px);
	transition:
		transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.pushable:active .shadow {
	transform: translateY(1px);
	transition: transform 34ms;
}

.pushable:focus:not(:focus-visible) {
	outline: none;
}

.topdiv {
	display: flex;
	justify-content: center;
}

/*PROPERTIES FOR MAKING WEBSITE RESPONSIVE*/

@media screen and (max-width: 960px) {
	footer .footer-container {
		max-width: 600px;
		flex-direction: column-reverse;
	}
	.right-col {
		width: 100%;
		margin-bottom: 60px;
	}
	.left-col {
		width: 100%;
		text-align: center;
	}
	.social-media {
		display: flex;
		justify-content: center;
	}
	.logo {
		transition: 1s;
		margin-left: 30%;
	}

	.identity {
		padding: 0;
		box-sizing: none;
	}

	.identity img {
		width: 100px;
		height: 100px;
	}

	.rev-container {
		padding: 10px;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		justify-items: center;
		
		.rev-card{
			width: 80%;
			height: auto;
		}

		.rev-cont #content {
			padding: none;
			font-size: 0.8rem;
			color: #2E3D49;
			line-height: 22px;
			text-align: left;
		}
	}

	.service-container .right-side img {
		width: 90%;
	}
	.title {
		margin-top: 0px;
	}
	
}
@media screen and (min-width: 700px) {
	footer .btn{
		margin: 0;
		width: 100%;
		margin-top: 20px;
	}
	.logo {
		transition: 1s;
		margin-left: 35%;
	}
}

@media screen and (min-width: 900px) {	
	.feedbox form input, .feedbox form .fname{
		width: 100%;
	}

	.logo {
		transition: 1s;
		margin-left: 0;
		padding-bottom: 20px;
	}

	.logo img {
		width: 155px;
	}

	header .navbar .nav-link {
		padding: 1.7rem 1rem;
		margin: 0px 5px;
		font-size: 20px;
		display: inline-block;
		position: relative;
		font-weight: bold;
		color: #fff !important;
	}
	
	.pl-lg-5, .px-lg-5 {
		padding-left: 0px !important;
	}

	.identity {
		padding: 0;
		box-sizing: none;
	}

	.identity img {
		width: 150px;
		height: 150px;
	}

	.rev-container {
		padding: 10px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		
		.rev-card{
			width: 70%;
			height: auto;
		}

		.rev-cont #content {
			padding: none;
			font-size: 0.8rem;
			color: #2E3D49;
			line-height: 22px;
			text-align: left;
		}
	}
}

@media screen and (width: 1024px) {	
	.feedbox form input, .feedbox form .fname{
		width: 100%;
	}

	.logo {
		transition: 1s;
		margin-left: 0;
		padding-bottom: 20px;
	}

	.logo img {
		width: 126px;
	}

	header .navbar .nav-link {
		padding: 1.7rem 1rem;
		margin: 0px 5px;
		font-size: 16px;
		display: inline-block;
		position: relative;
		font-weight: bold;
		color: #fff !important;
	}
	
	.pl-lg-5, .px-lg-5 {
		padding-left: 0px !important;
	}

	.identity {
		padding: 0;
		box-sizing: none;
	}

	.identity img {
		width: 150px;
		height: 150px;
	}

	.rev-container {
		padding: 10px;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		
		.rev-card{
			width: 70%;
			height: auto;
		}

		.rev-cont #content {
			padding: none;
			font-size: 0.8rem;
			color: #2E3D49;
			line-height: 22px;
			text-align: left;
		}
	}
}


/* END CONTENT */



/* TIMELINE- ROADMAP*/

h1 {
	font-size: 2em;
	margin: 0 0 3rem;
	padding-top: 1.5rem;
	text-align: center;
}

.btn.toolbtn {
	border-radius: 24px;
	color: #ff2e97;
	font-weight: 700;
	font-size: 18px;
	cursor: pointer;
	padding: 10px 20px;
	background: linear-gradient(to right, rgba(74, 0, 224, 0.75), rgba(142, 45, 226, 0.75));
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.btn.toolbtn:hover {
	background-color: #4b0082;
	color: #fff;
}


.btn-group {
	display: flex;
	gap: 0.375em;
	margin-bottom: 1.5em;
}

.timeline {
	margin: 50px;
	width: 100%;
	max-width: 55em;
}

.timeline__arrow {
	background-color: transparent;
	border-radius: 0.25em;
	cursor: pointer;
	flex-shrink: 0;
	margin-inline-end: 0.25em;
	outline: transparent;
	width: 2em;
	height: 2em;
	transition:
		background-color calc(var(--trans-dur) / 2) linear,
		color var(--trans-dur);
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.timeline__item-p {
	font-weight: 600;
	color: #4b0082;
	font-size: 19px;
}

.timeline__arrow:focus-visible,
.timeline__arrow:hover {
	background-color: hsl(var(--hue), 10%, 50%, 0.4);
}

.timeline__arrow-icon {
	display: block;
	pointer-events: none;
	transform: rotate(-90deg);
	transition: transform var(--trans-dur) var(--trans-timing);
	width: 100%;
	height: auto;
}

.timeline__date {
	font-size: 0.833em;
	line-height: 2.4;
	display: none;
}

.timeline__dot {
	background-color: #ff2e97;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
	margin: 0.625em 0;
	margin-inline-end: 1em;
	position: relative;
	width: 0.75em;
	height: 0.75em;
}

.timeline__item {
	position: relative;
	padding-bottom: 2.25em;
}

.timeline__item:not(:last-child):before {
	background-color: #ff2e97;
	content: "";
	display: block;
	position: absolute;
	top: 1em;
	left: 2.625em;
	width: 0.125em;
	height: 100%;
	transform: translateX(-50%);
}

[dir="rtl"] .timeline__arrow-icon {
	transform: rotate(90deg);
}

[dir="rtl"] .timeline__item:not(:last-child):before {
	right: 2.625em;
	left: auto;
	transform: translateX(50%);
}

.timeline__item-header {
	display: flex;
}

.timeline__item-body {
	border-radius: 0.375em;
	overflow: hidden;
	margin-top: 0.5em;
	margin-inline-start: 4em;
	height: 0;
}

.timeline__item-body-content {
	background-color: hsl(var(--hue), 10%, 50%, 0.2);
	opacity: 0;
	padding: 0.5em 0.75em;
	visibility: hidden;
	transition:
		opacity var(--trans-dur) var(--trans-timing),
		visibility var(--trans-dur) steps(1, end);
}

.timeline__meta {
	width: 100%;
}

.timeline__title {
	font-size: 22px;
	line-height: 1.333;
}

/* Expanded state */
.timeline__item-body--expanded {
	height: auto;
}

.timeline__item-body--expanded .timeline__item-body-content {
	opacity: 1;
	visibility: visible;
	transition-delay: var(--trans-dur), 0s;
}

.timeline__arrow[aria-expanded="true"] .timeline__arrow-icon {
	transform: rotate(0);
}




/* SOCIAL BUTTONS */

.social {
	position: relative;
	width: 100%;
	text-align: center;
}

.social .link {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 2px dashed #ff2e97;
	background-clip: content-box;
	padding: 10px;
	transition: .5s;
	color: #D7D0BE;
	margin-left: 15px;
	margin-right: 15px;
	font-size: 70px;
}

.social .link img {
	display: block;
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.social .link:hover {
	padding: 20px;
	color: white;
	margin-left: -5px;
	transform: translateX(10px) rotate(360deg);
}

.social .link.tiktok {
	background-color: #FFFF00;
	color: white;
}

.social .link.twitter {
	background-color: #00ACEE;
	color: white;
}

.social .link.phone {
	background-color: #aa00ff;
	color: white;
}

.social .link.whatsapp {
	background-color: #ff0065;
	color: white;
}

.social .link.facebook {
	background-color: #0bfbdb;
	color: white;
}

.social .link.instagram {
	background-color: #7fff00;
	color: white;
}