*{
	margin:0;
	padding:0;
}
body{
	background:#FFFFFF;
}
:root{
	--baseColor: #2D378C;
	--secondaryColor: #02A7E7;
	--lightColor: #FFFFFF;
	--grayColor: #F7F7F7;
	--darkColor: #232323;

	--baseFont: 'Poppins', sans-serif;
}


/* ===== CSS For "Common Cases" Starts Here ===== */
a{
	text-decoration: none;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
a:hover{
	text-decoration: none;
}
img{
	max-width: 100%;
}

/* ======================== */

.grid_item{
    display: -ms-grid;
    display: grid;
    -ms-flex-line-pack: center;
	align-content: center;
}

/* ======================== */

.cta_btn_wrap{
	margin-top: 20px;
}
.cta_btn{
	color: var(--lightColor);
	background: var(--baseColor);
	font-family: var(--baseFont);
	font-weight: 500;
	font-size: 18px;
	border-radius: 5px;
	min-width: 200px;
	text-align: center;
	display: inline-block;
	padding: 10px 25px;
	text-decoration: none;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;	
}
.cta_btn:hover{
	color: var(--lightColor);
	text-decoration: none;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}

/* ======================== */

.heading{
	margin-bottom: 30px;
}
.heading h2{
	color: var(--darkColor);
	font-family: var(--baseFont);
	font-weight: 700;
	font-size: 42px;
	margin-bottom: 0px;
}
.heading h3{
	color: var(--darkColor);
	font-family: var(--baseFont);
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 0px;
}

.sub_heading{
	margin-bottom: 15px;
}
.sub_heading h4{
	color: var(--lightColor);
	font-family: var(--baseFont);
	font-weight: 500;
	font-size: 22px;
	margin-bottom: 0px;
}

/* ======================== */

.para_texts p{
	color: var(--lightColor);
	font-family: var(--baseFont);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 10px;
}
.para_texts p:last-child{
	margin-bottom: 0px;
}
.para_texts p a{
	color: var(--secondaryColor);
	font-weight: 600;
}
.para_texts p a:hover{
	text-decoration: underline;
}
.para_texts p .bold_texts{
	font-weight: 600;
}
/* ===== CSS For "Common Cases" Ends Here ===== */


/* ============================== */
/* ============================== */
/* ============================== */


/* ===== CSS For "Header" Starts Here ===== */
.header_wrap{
	background: var(--lightColor);
	padding: 10px 0px;
}
.header{
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-grid-columns: 1fr 10px 1fr;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 10px;
}
.header .logo img{
	max-width: 175px;
}
.header ul{
	text-align: right;
	margin-bottom: 0px;
	font-size: 0px;
}
.header ul li{
	list-style: none;
	display: inline-block;
	margin-right: 15px;
}
.header ul li:last-child{
	margin-right: 0px;
}
.header ul li i{
	color: var(--baseColor);
	width: 40px;
	height: 40px;
	line-height: 38px;
	text-align: center;
	border: 1px solid var(--baseColor);
	border-radius: 50%;
	font-size: 18px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.header ul li:nth-child(2) i{
	font-size: 20px;
}
.header ul li:nth-child(3) i{
	font-size: 24px;
}
.header ul li i:hover{
	color: var(--lightColor);
	background: var(--baseColor);
}
/* ===== CSS For "Header" Ends Here ===== */


/* ============================== */
/* ============================== */
/* ============================== */


/* ===== CSS For "Hero Banner" Starts Here ===== */
.hero_banner{
	background: url('images/Hero_Banner_Bg.jpg') no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 75px 0px;
}
.hero_banner .contents{
	background: rgba(0,0,0, 0.6);
	max-width: 800px;
	margin: 0px auto;
	text-align: center;
	padding: 75px;
}
.hero_banner .contents h1{
	color: var(--secondaryColor);
	font-family: var(--baseFont);
	font-weight: 600;
	font-size: 56px;
	margin-bottom: 15px;
}
.hero_banner .contents h2{
	color: var(--lightColor);
	font-family: var(--baseFont);
	font-weight: 600;
	font-size: 36px;
	margin-bottom: 20px;
}
.hero_banner .contents h3{
	color: var(--lightColor);
	font-family: var(--baseFont);
	font-weight: 600;
	font-size: 30px;
	margin-bottom: 20px;
}

.hero_banner .contents h4{
	color: var(--secondaryColor);
	font-family: var(--baseFont);
	font-weight: 700;
	font-size: 25px;
	margin-bottom: 0px;
}
.hero_banner .contents h4 a{
	color: var(--lightColor);
}

.hero_banner .banner_wave{
	position: absolute;
	width: 100%;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
/* ===== CSS For "Hero Banner" Ends Here ===== */


/* ============================== */
/* ============================== */
/* ============================== */


/* ===== CSS For "Colored Banner" Starts Here ===== */
.colored_banner{
	background: var(--secondaryColor);
	position: relative;
	top: -1px;
	padding: 40px 0px;
	padding-top: 30px;
}
.colored_banner .contents{
	text-align: center;
}
.colored_banner .contents p{
	color: var(--lightColor);
	font-family: var(--baseFont);
	font-weight: 400;
	font-size: 20px;
	margin-bottom: 0px;
}
.colored_banner .contents h6{
	color: var(--lightColor);
	font-family: var(--baseFont);
	font-weight: 500;
	font-size: 24px;
	margin-bottom: 0px;
	margin-top: 15px;
}
/* ===== CSS For "Colored Banner" Ends Here ===== */


/* ============================== */
/* ============================== */
/* ============================== */


/* ===== CSS For "Company Logos" Starts Here ===== */
.related_companies{
	background: #F7F7F7;
	padding: 15px 0px;
}
.related_companies ul{
	margin-bottom: 0px;
	text-align: center;
	font-size: 0px;
}
.related_companies ul li{
	list-style: none;
	display: inline-block;
	margin: 0px 15px;
}
.related_companies ul li img{
	height: 100px;
}
/* ===== CSS For "Company Logos" Ends Here ===== */


/* ============================== */
/* ============================== */
/* ============================== */


/* ===== CSS For "Project Gallery" Starts Here ===== */
.project_gallery_wrap{
	background: var(--lightColor);
	padding: 50px 0px;
}
.project_gallery_wrap .heading{
	text-align: center;
}

.project_gallery{
	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 15px;
	-moz-column-gap: 15px;
	column-gap: 15px;
	-webkit-column-fill: balance;
	-moz-column-fill: balance;
	column-fill: balance;
}
.project_gallery .single_project{
	margin-top: 7.5px;
	margin-bottom: 7.5px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
	width: 100%;
	border-radius: 7.5px;
	box-shadow: 0 2px 4px #0000001a;
}

@media (max-width: 576px) {

	.project_gallery {
		-webkit-column-gap: 10px;
		-moz-column-gap: 10px;
		column-gap: 10px;
	}
	.project_gallery .single_project{
		margin-top: 5px;
		margin-bottom: 5px;
	}

}
@media (min-width: 576px) {

	.project_gallery {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}

}

@media (min-width: 768px) {
	.project_gallery {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}

@media (min-width: 992px) {
	.project_gallery {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}

@media (min-width: 1200px) {
	.project_gallery {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}
/* ===== CSS For "Project Gallery" Ends Here ===== */


/* ============================== */
/* ============================== */
/* ============================== */



/* ===== CSS For "Our Partners" Starts Here ===== */
.our_partners{
	background: #F7F7F7;
	padding: 30px 0px;
}
.our_partners .heading{
	margin-bottom: 15px;
	text-align: center;
}
.our_partners .partners_list{
	max-width: 300px;
	margin: 0px auto;
}
.our_partners .partners_list ul{
	margin-bottom: 0px;
}
.our_partners .partners_list ul li{
	list-style: none;
	color: var(--darkColor);
	font-family: var(--baseFont);
	font-weight: 500;
	font-size: 18px;
	margin-bottom: 5px;
	position: relative;
	padding-left: 25px;
}
.our_partners .partners_list ul li:last-child{
	margin-bottom: 0px;
}
.our_partners .partners_list ul li::before {
	content: "\f35a";
	color: var(--secondaryColor);
	font-family: "Font Awesome 5 Free";
	font-weight: 700;
	font-size: 16px;
	position: absolute;
	left: 0px;
	top: 1px;
}

/* ===== CSS For "Our Partners" Ends Here ===== */



/* ============================== */
/* ============================== */
/* ============================== */


/* ===== CSS For "Contact Us Banner" Starts Here ===== */
.contact_us_banner{
	background: #1F2229;
	padding: 40px 0px;
}
.contact_us_banner .sub_heading{
	text-align: center;
	margin-bottom: 35px;
}
.contact_us_banner ul{
	text-align: center;
	max-width: 560px;
	margin: 0px auto;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.contact_us_banner ul li{
	list-style: none;
}
.contact_us_banner ul li i{
	color: var(--secondaryColor);
	font-size: 36px;
	margin-bottom: 5px;
}
.contact_us_banner ul li span{
	color: var(--lightColor);
	font-family: var(--baseFont);
	font-weight: 500;
	font-size: 18px;
	display: block;
	text-transform: capitalize;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
.contact_us_banner ul li a:hover span{
	color: var(--secondaryColor);
}
/* ===== CSS For "Contact Us Banner" Ends Here ===== */


/* ============================== */
/* ============================== */
/* ============================== */


/* ===== CSS For "About Us" Starts Here ===== */
.about_us{
	background: #25292F;
	padding: 30px 0px;
	text-align: center;
}
/* ===== CSS For "About Us" Ends Here ===== */


/* ============================== */
/* ============================== */
/* ============================== */


/* ===== CSS For "Footer" Starts Here ===== */
.footer{
	background: #1A1C20;
	padding: 15px 0px;
	text-align: center;
}
.footer p{
	color: var(--lightColor);
	font-family: var(--baseFont);
	font-weight: 400;
	font-size: 16px;
	margin-bottom: 0px;
	text-align: center;
}
/* ===== CSS For "Footer" Ends Here ===== */


/* ============================== */
/* ============================== */
/* ============================== */