html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}


body {
	background-color: white;
	font-family: 'Poppins', sans-serif;
	margin: 0;
	width: 100vw;
}

svg {
	position: relative;
	display: block;
	left: 50%;
	overflow: visible;
	transform: translateX(-50%);
	color: #000;
	z-index: -4;
}

path {
	fill: none;
	stroke: black;
	stroke-width: 20px;
	z-index: -1;
}

img {
	object-fit: contain;
}

inline {
	display: inline;
}

/* Navbar */

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 3rem;
	/* margin-right: 3rem; */
}

.navbar ul {
	list-style: none;
}

.navbar {
	font-weight: bold;

}

.navbar a {
	background-repeat: no-repeat;
	text-decoration: none;
	color: black;
	font-size: 20px;
}

.navbar li {
	display: inline;
	float: right;
	padding: 3rem;
}

.navbar .active {
	font-weight: bold;
	text-decoration: underline;
	text-decoration-thickness: 0.2rem;
	text-underline-offset: 0.3rem;
	color: #001974;
}


#hero {
	padding: 3rem 0 3rem 3rem;
	height: 60vh;
	width: 90%;
	display: flex;
	overflow: hidden;
	flex-wrap: wrap;
}

#hero>div {
	width: 50%;

}


img.heroimg {
	position: relative;
	top: -5rem;
	width: 48vw;
	padding-left: 3rem;
}

#herobg {
	background-image: url("/assets/images/hospital_background.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: #e8eef9;
	z-index: 1;
}

.ambulance {
	height: 11rem;
	z-index: 0;
	bottom: 21rem;
	top: 2 5%;
	left: 50%;
	transform: translate(-50%, 50%);
	/* left: calc(55% - 9.2rem); */
	position: fixed;
	z-index: 0;
	opacity: 0;
}

#ambulancedatastories {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	z-index: -3;
	justify-content: center;
}

#ambulancedatastories>div {
	padding: 3rem;
	width: 36%;
	display: flex;
	justify-content: center;
}

#ambulancedatastories img {
	object-fit: contain;
	width: 100%;
}

img.img-popout {
	cursor: zoom-in;
}

#section1 {
	background-image: url("/assets/images/bengaluru_bg_map.png");
	width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index: -100;

}

.fontpoppins {
	font-family: 'Poppins', sans-serif;
}

.fontdarkblue {
	color: #001974;
}

.fontred {
	color: #E9232D;
}

.font-bold {
	font-weight: 700;
}

.font-small {
	font-size: 0.8rem;
}

.font-smaller {
	font-size: 0.5rem;
}

.font-large {
	font-size: 1.5rem;
	font-weight: 800;
}

.font-larger {
	font-size: 2rem;
	font-weight: 800;
}

.font-larger4 {
	font-size: 2.5rem;
}

.storypopup {
	font-size: 1rem;
	font-weight: 600;
	box-sizing: border-box;
	background: url("/assets/images/Dialog.png"), #CEDBF0;
	background-blend-mode: soft-light, normal;
	background-position: center;
	opacity: 0.7;
	box-shadow: 0px 40px 80px rgba(0, 0, 0, 0.6), inset 0px -4px 2px rgba(0, 0, 0, 0.2), inset 0px 4px 2px rgba(255, 255, 255, 0.12), inset 4px 4px 26px rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(0px);
	/* Note: backdrop-filter has minimal browser support */
	background-color: #FFFFFF;
	border-radius: 16px;
	margin: 5rem;
	flex-wrap: wrap;
	z-index: 2;
	transition: width 1s;
}

.storypopup.aos-init.aos-animate {
	opacity: 0.8;
	transform: translateZ(0);
}

.storypopup.opacityfull.aos-init.aos-animate {
	opacity: 1;
	transform: translateZ(0);
}

.storypopup_heading {
	/* font-size:1rem; */
	width: 100%;
}

#ambulancedatastories>div.storypopup:hover {
	position: relative;
	/* width: 40vw; */
	/* scale: 1.3; */
	/* scale:1.1;
	/* transition: all .5s; */
	/* transform: scale(1.1); */
	transform: scale(1.1);
	-moz-transform: scale(1);
	transition-duration: 1s;
}

.numberpopup {
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin: auto;
	padding: 0;
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-size: 60px;
	line-height: 90px;
	/* identical to box height */

	text-align: center;

	color: #FFFFFF;

	backdrop-filter: blur(1px);
	/* Note: backdrop-filter has minimal browser support */

	color: white;
	font-size: 130px;
	/* -webkit-text-stroke-width: 0.5px; */
	-webkit-text-stroke-color: black;
	width: 3rem;
	height: 3rem;
}

.numberpopup>.hoverimg {
	display: none;
}

.numberpopup:hover>.hoverimg {
	display: inline;
	position: absolute;
	opacity: 1;
	transition: opacity 10s;
}

.hoverimg {
	height: 16vw;
}

.roundimg {
	height: 16vw;
}

.cardfooter {
	font-size: 0.8rem;
	padding: 0;
	width: 100%;
}

.cardfooter a {
	text-decoration: none;
	color: black;
}

.cardfooter ul {
	padding: 0;
	list-style-type: square;
}

.cardfooter li {
	padding: 0;
	list-style-type: square;
}

.cardfooter h3 {
	font-size: 1rem;
	color: #0000FF;
}

.cardfooter .cardfooterlink {
	color: #0000FF;
	justify-content: right;
	display: flex;
}

.footer {
	display: flex;
	background-color: #42424a;
	color: white;
	padding: 0.5rem;
	text-align: justify;
	justify-content: space-between;
	align-items: center;
	font-size: 1.2rem;
}

.hidden {
	display: none;
	opacity: 0.3;
	transition: opacity 3s;
}

.footer>div {
	width: 32%;
	margin: 3rem 2rem;
}

.ambul {
	position: absolute;
	left: 45%;
}

#road {
	background-image: url("/assets/images/road_Property1_Default.svg");
	background-repeat: no-repeat;
	height: 234rem;
	width: 15rem;
	position: absolute;
	top: 62rem;
	left: 48vw;
	z-index: -2;
}

#hero {
	/* flex justify-between h-full */
	display: flex;
	justify-content: space-between;
	height: 100%;
	margin-left: 3rem;
}

.hero-button {
	padding: 0.65rem 4rem;
	border-radius: 9999px;
	border: 1px solid #eb394a;
	box-shadow: 1px 1px 10px;
	color: #eb394a;
	font-size: 1.3rem;
	height: 3rem;
	font-weight: 600;
	background-color: #FFFFFF;
	margin-top: 4rem;
}

.hero-button:hover {
	background-color: #EB394A;
	/* red */
	color: rgb(255, 255, 255);
}

#aboutus_herobg {
	/* background-image: url("/assets/images/about_us_top_illust.png"); */
	/* background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain; */
	height: 25vh;
}

.aboutus_wellPanel1 {
	display: flex;
	flex-wrap: wrap;
	background-image: url("/assets/images/group362.png");
	height: 35rem;
	box-shadow: 0 0 5px 5px #fff;
	width: 40vw;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	border-radius: 80px;
	margin: 0 0 5rem 3rem;
}

.aboutus_wellPanel1>div {
	margin: 5px auto;
}

.relative {
	position: relative;
}

/* Flexcards custom */
.flexcard2 {
	display: flex;
	margin-top: 2rem;
	text-align: center;
}

.flexcard2>div {
	padding: 0.3rem;
	line-height: 1;
}


/* .heroheader {
	
} */

.herocontent {

	color: #050039;
	font-size: max(2vw, 8px);
}

.footerhospitaltopview {
	padding-left: calc(55% - 15rem);
}

.fa {
	margin-top: auto;
	margin-bottom: auto;
	margin-left: 10px;
}

.fa-white {
	color: white;
}



@media only screen and (min-width: 700px) {
	#ambulancedatastories :nth-child(1) {
		order: 1;
	}

	#ambulancedatastories :nth-child(2) {
		order: 2;
	}

	#ambulancedatastories :nth-child(3) {
		order: 4;
	}

	#ambulancedatastories :nth-child(4) {
		order: 3;
	}

	#ambulancedatastories :nth-child(5) {
		order: 5;
	}

	#ambulancedatastories :nth-child(6) {
		order: 6;
	}

	#ambulancedatastories :nth-child(7) {
		order: 8;
	}

	#ambulancedatastories :nth-child(8) {
		order: 7;
	}

	#ambulancedatastories :nth-child(9) {
		order: 9;
	}

	#ambulancedatastories :nth-child(10) {
		order: 10;
	}

	#ambulancedatastories :nth-child(11) {
		order: 12;
	}

	#ambulancedatastories :nth-child(12) {
		order: 11;
	}

	#ambulancedatastories :nth-child(13) {
		order: 13;
	}

	#ambulancedatastories :nth-child(14) {
		order: 14;
	}

	#ambulancedatastories :nth-child(15) {
		order: 16;
	}

	#ambulancedatastories :nth-child(16) {
		order: 15;
	}

	#ambulancedatastories :nth-child(17) {
		order: 17;
	}

	#ambulancedatastories :nth-child(18) {
		order: 18;
	}

	#ambulancedatastories :nth-child(19) {
		order: 20;
	}

	#ambulancedatastories :nth-child(20) {
		order: 19;
	}

	#ambulancedatastories :nth-child(21) {
		order: 21;
	}

	#ambulancedatastories :nth-child(22) {
		order: 22;
	}

	#ambulancedatastories :nth-child(23) {
		order: 24;
	}

	#ambulancedatastories :nth-child(24) {
		order: 23;
	}

	#ambulancedatastories :nth-child(25) {
		order: 25;
	}

	#ambulancedatastories :nth-child(26) {
		order: 26;
	}
	#ambulancedatastories :nth-child(27) {
		order: 28;
	}

	#ambulancedatastories :nth-child(28) {
		order: 27;
	}
}

@media only screen and (max-width: 700px) {

	.footer>div {
		width: 30%;
		margin: 0.3rem;
	}

	#ambulancedatastories>div {
		width: 80vw;
		margin: 3rem 1rem;
	}

	#hero {
		flex-direction: column;
		padding: 1rem 0 0 0;
		margin-left: 1rem;
	}

	#hero>div {
		width: 100%;
	}

	.hero-button {
		padding: 0.5rem 2rem;
		border-radius: 30px;
		font-size: 0.7rem;
		height: 2rem;
		background-color: transparent;
		margin-top: 0.5rem;
	}

	img.heroimg {
		position: relative;
		top: 1rem;
		width: 110vw;
		margin-bottom: 2rem;
		padding-left: 0rem;
		margin-left: -2rem;
	}

	.footerhospitaltopview {
		width: 25vw;
	}

	#ambulancedatastories>div {
		padding: 1rem;
	}

	.navbar {
		margin-left: 1rem;
	}

	.cardfooter li {
		margin-left: 1rem;
	}

	.navlogofooter {
		width: 5rem;
		padding-left: 0.5rem;
	}

	.ambulance {
		height: 8rem;
	}

	.roundimg {
		height: 29vw;
	}

	.hoverimg {
		height: 29vw;
	}

	.footerhospitaltopview {
		display: none;
	}

	.footer {
		flex-wrap: wrap;
		font-size: 1rem;
		z-index: 1;
	}

	.footer>div {
		width: 100%;
		/* padding: auto; */
		/* margin: auto; */
		/* padding-left: 3rem;
		padding-right: 3rem; */
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	.footer>div>div {
		width: 100%;
		/* padding: auto; */
		/* margin: auto; */
		/* padding-left: 3rem;
		padding-right: 3rem; */
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
 #map {
    height: 100%;
  }