/* ---------------- For Animation on Scroll ---------------- */

.slideanim {

	visibility: hidden;

	visibility: visible\9; /*For old IE browsers IE6-8 */

}

.slideanim.slide {

	visibility: visible;

	animation: slide 1s;

}

.slideanim::after {

	/* useful when its child elements are float:left; */

	content: "";

	display: table;

	clear: both;

}



@keyframes slide {

	0% {

		opacity: 0;

		transform: translateY(50%);

	}

	100% {

		opacity: 1;

		transform: translateY(0);

	}

}



.color {

	color: var(--main-lightRed-color) !important;

}



.bgcolor {

	background-color: var(--main-lightRed-color) !important;

}

/*-------- Generic styles for the page ------------------*/



html {

	-webkit-box-sizing: border-box;

	box-sizing: border-box;

}



*,

*::before,

*::after {

	-webkit-box-sizing: inherit;

	box-sizing: inherit;

}



body {

	font: normal 15px Calibri, Helvetica, Verdana, sans-serif;

	line-height: 1.8;

	color: #818181;

	margin: 0;

}

footer {

	display: block;

	padding: 30px;

}



section {

	display: block;

	padding: 60px;

}



.row::after {

	content: "";

	display: table;

	clear: both;

}



/*.col-33, .col-40, or .col-60 should be immediate children of .row */

.col-33 {

	float: left;

	width: 33.3333%;

}

.col-40 {

	float: left;

	width: 40%;

}

.col-60 {

	float: left;

	width: 60%;

}

.col-30 {

	float: left;

	width: 30%;

}

.col-70 {

	float: left;

	width: 70%;

}

.row .fa {

	font-size: 14em;

	color: #679;

}

.col-33 .fa {

	font-size: 4em;

	color: #679;

}



@media (max-width: 768px) {

	section {

		padding: 20px 8px;

	}

	.col-33,

	.col-40,

	.col-60,

	.col-30,

	.col-70 {

		float: none;

		width: 100%;

	}

}



.bg-gray {

	background-color: #292929;

}

.text-center {

	text-align: center;

}

h2 {

	font-size: 24px;

	text-transform: uppercase;

	color: #303030;

	font-weight: 600;

	margin-bottom: 30px;

}



h4 {

	font-size: 19px;

	line-height: 1.375em;

	color: #303030;

	font-weight: 400;

	margin-bottom: 30px;

}



/* ---------------- For the Responsive Image Grid.---------------- */



#rig {

	max-width: 900px;

	margin: 0 auto; /*center aligned*/

	padding: 0;

	font-size: 0; /* Remember to change it back to normal font size if have captions */

	list-style: none;

	background-color: none;

}

#rig li {

	display: inline-block;

	*display: inline; /*for IE6 - IE7*/

	width: 25%;

	vertical-align: middle;

	box-sizing: border-box;

	margin: 0;

	padding: 0;

}



/* The wrapper for each item */

.rig-cell {

	margin: 12px;

	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);

	padding: 16px;

	border: none;

	color: #555;

	background-color: white;

	text-decoration: none;

	text-align: center;

	display: block;

	position: relative;

	overflow: hidden;

}



.rig-cell h3 {

	font-size: 18px;

	font-family: "Oswald", sans-serif;

	font-weight: normal;

}



/* If have the image layer */

.rig-img {

	display: block;

	border: none;

	width: 100%;

	height: 0;

	padding-top: 83.461538%;

	background-size: cover;

	background-color: white;

	background-image: url(imgs/web-ui.jpg);

	background-repeat: no-repeat;

	position: relative; /* Make its pseudo :after to be relative to it. */

}

.rig-img:after {

	position: absolute;

	top: 20px;

	right: 20px;

	bottom: 20px;

	left: 20px;

	border: 1px solid #fff;

	content: "+";

	color: white;

	padding-top: 14%;

	font-size: 30px;

	opacity: 0;

	filter: alpha(opacity=0);

	transition: all 0.3s;

	transform: scale(0);

}



#rig li:hover .rig-img:after {

	opacity: 1;

	transform: scale(1);

}



/* If have the overlay layer */

.rig-overlay {

	position: absolute;

	display: block;

	top: 0;

	left: 0;

	bottom: 0;

	right: 0;

	margin: auto;

	background: white;

	background-size: 50px 50px;

	opacity: 0;

	filter: alpha(opacity=0); /*For older IE*/

	transition: all 0.3s;

}

#rig li:hover .rig-overlay {

	opacity: 0.5;

}



@media (max-width: 9000px) {

	#rig li {

		width: 25%;

	}

}



@media (max-width: 800px) {

	#rig li {

		width: 33.33%;

	}

}



@media (max-width: 500px) {

	#rig li {

		width: 50%;

	}

}



@media (max-width: 350px) {

	#rig li {

		width: 100%;

	}

}



.h-100vh {

	height: 100vh;

	object-fit: cover;

	opacity: 0.5;

}



.carousel-caption h3 {

	font-size: xxx-large;

	top: 15%;

	position: absolute;

	left: 42%;

}



.carousel-caption p {

	position: absolute;

	top: 45%;

	font-size: xx-large;

	text-align: center;

	width: 100%;

}



.carousel-caption {

	height: 100%;

	width: 100%;

	left: 0px;

	right: 0px;

}



h2,

p {

	color: white;

}



.bg-gray h2 {

	color: var(--main-lightRed-color);

	font-size: xx-large;

}



.teamHeadingLeft {

	color: white !important;

	font-size: x-large !important;

	text-align: left;

	margin-left: 5%;

}



.teamHeadingRight {

	color: white !important;

	font-size: x-large !important;

	text-align: left;

	margin-right: 5%;

}



.teamDescriptionRight {

	text-align: justify;

	color: white;

	margin-right: 5%;

}



.teamDescriptionLeft {

	text-align: justify;

	color: white;

	margin-left: 5%;

}



.drpDownbtn,.drpDownbtn:hover,.drpDownbtn:focus,.drpDownbtn:active{

	background-color: transparent!important;

	border-color:var(--main-lightRed-color)!important;

	box-shadow: 0 0 0 0 transparent!important;

}



.drpDownbtn:active{

	background-color:var(--main-lightRed-color)!important;

}





/* CIRCLE About us css */



.our-teamc{

    text-align: center;

}

.our-teamc .picc{

    position: relative;

}

.our-teamc .picc img{

    width: 100%;

    height: auto;

    border-radius: 50%;

}

.social_media_teamc{

    background: rgba(59, 61, 66, 0.6);

    border-radius: 50%;

    transform: scale(0);

    transition: all 0.35s ease-in-out 0s;

    visibility: hidden;

    position: absolute;

    top:0;

    left:0;

    width: 100%;

    height: 100%;

    text-align: center;

}

.our-teamc:hover .social_media_teamc{

    transform: scale(1);

    visibility: visible;

}

.team_socialc{

    padding: 0;

    list-style: none;

    margin-bottom: 0;

    position: relative;

    top:43%;

    left:0;

}

.team_socialc > li{

    display: inline-block;

}

.team_socialc > li > a{

    width: 35px;

    height: 35px;

    display: block;

    background: #5d5d5d;

    line-height: 35px;

    color:#fff;

    transition: all 0.35s ease-in-out 0s;

    border-radius: 3px;

    font-size: 15px;

}

.team_socialc > li > a:hover{

	background: var(--main-lightRed-color);

	color: white;

}



.team_socialc >li>a>i{

	font-size: 1em!important;

	color: var(--main-lightRed-color)!important;

}



.team_socialc >li>a>i:hover{

	/* font-size: 1em!important; */

	color: white!important;

}



.post-titlec > a{

    color:#fff;

    font-size: 15px;

    font-style: normal;

    font-weight: 700;

    line-height: 18px;

    text-transform: capitalize;

}

.post-titlec > a:after{

    content:"";

    color: var(--main-lightRed-color);

    display: inline-block;

    /* padding: 0 5px 0 10px; */

}

.post-titlec small{

    color:#999;

    font-size: 12px;

}

.descriptionc{

    color:#fff;

}

.readc{

    font-size: 13px;

    font-style: italic;

    font-weight: 400;

    color:var(--main-lightRed-color);

}

.readc:hover{

    color:#fff;

}

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

    .our-teamc{

        margin-bottom: 30px;

    }

}





.Details {

	height: auto;

	position: absolute;

	width: 70%;

	top: 23%;

	left: 15%;

    overflow-y: auto;

    overflow-x: hidden;

    background-color: #fffefe61;

    background-size: cover;

    background-blend-mode: color;

}



.detailsTitle{

	font-family: "Cormorant Garamond", serif;

    font-size: xx-large;

    text-align: center;

    color: var(--main-lightRed-color);

    font-weight: 900;

}



.detailsDesc{

	padding-left: 2%;

    margin-left: 5%;

    margin-right: 5%;

    color: var(--main-forground-color);

    font-size: medium;

    /* text-align: justify; */

    text-align: justify;

}



small{

	font-size: 100%;

}