@charset "utf-8";
/* CSS Document */

/*
Thin 		100
Light 		300
Regular 	400
Bold 		700
Black 		900

font-family: 'Lato', sans-serif;
*/

body 				{color: #333333; background-color: white; font-size: 1.125rem; font-family: 'Barlow', sans-serif;}

h1, h2, h3, h4, h5	{font-weight: 700; color: #1365ab;}
h1					{}
h2					{}
h3					{}
h4					{}
h5					{}
h6					{font-size: 1.1rem; color: #333333;}

strong				{font-weight: 500;}

a					{text-decoration:none; color: #666666;}
a:hover				{text-decoration:none; color: #333333;}
a:visited			{text-decoration:none;}
a:focus,a:hover		{text-decoration:none;}

.top-area img{background-color: #fafafac2;padding: 15px;}
.top-area .col-auto{background-color: #fafafac2;padding: 15px;border-radius: 100px;}

.top-area			{padding: 1rem 0; /*background-color: rgba(255,255,255,.40);*/ position: fixed; z-index: 6; width: 100%; color: #FFFFFF; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;}
.top-area.sticky	{padding: .5rem 0; background-color: rgba(255,255,255,.99); box-shadow: 0 3px 12px 0 rgba(0,0,0,.05);}

.banner-area			{position: relative;}
.banner-area .circle	{position: absolute; left: 10%; top: 25%; z-index: 4; width: 500px; height: 500px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background-color: rgba(0,194,255,0.50);}
.banner-area .caption	{position: absolute; left: 16%; top: 30%; z-index: 5; font-size: 140px; line-height: 130px; font-weight: 900; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); -webkit-text-stroke: 1px #ffffff;}

.banner-area .button	{position: absolute; left: 50%; top: 70%; z-index: 7; margin-left: -32px; margin-top: -32px;}
.banner-area .button a	{display: inline-block; width: 64px; height: 64px; line-height: 64px; background-color: #00aeef; text-align: center; color: #FFFFFF; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}

.banner-area .banner	{overflow: hidden;}

.banner-area .banner .swiper-slide img	{transition: all 1s ease-out; transform: scale(1.1);}
.banner-area .banner .swiper-slide-active img 	{transform:scale(1);}




.banner-area .caption-banner	{position: absolute; top: 35%; left: 0; right: 0; z-index: 9; margin: 0 auto; width: 100%; max-width: 1296px; padding: 0 1rem;}
.banner-area .caption-banner	{font-size: 72px; line-height: 72px; font-weight: 900; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); -webkit-text-stroke: 1px #ffffff;}


.who-we-are				{padding-top: 4rem; padding-bottom: 4rem; background-color: #005ea0; color: #FFFFFF; background-image: url("../images/who-we-are-bg.jpg"); background-position: center bottom; background-repeat: no-repeat; background-size: cover;}
.who-we-are h1			{color: #00c2ff; text-transform: uppercase;}
.who-we-are a			{color: #FFFFFF; display: inline-block;}
.who-we-are a:hover		{color: #00c2ff;}
.who-we-are a::after		{content: ''; display: block; width: 0; height: 1px; background: #00c2ff; transition: width .3s;}
.who-we-are a:hover::after	{width: 100%;}

.footer-above				{padding-top: 4rem; padding-bottom: 4rem; background-color: #005ea0; color: #FFFFFF; background-image: url("../images/footer-bg.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover;}
.footer-above h1			{color: #00c2ff;}
.footer-above .mid-text		{font-size: 110%; color: #FFFFFF;}


.footer-mid					{padding-top: 2rem; padding-bottom: 2rem; background-color: #0064a8; color: #FFFFFF;  font-size: 0.938rem;}
.footer-mid a 				{color: #FFFFFF;}
.footer-mid a:hover			{color: #00aae9;} 

.footer-mid .footer-head		{position: relative; display: inline-block; color: #FFFFFF; font-weight: 500; margin-bottom: 1.25rem;  font-size: 1rem;}
.footer-mid .footer-head:after 	{content:''; position: absolute; left: 0; top:100%; margin:5px auto; width:100%; height:1px; background:#00c2ff;}




.footer					{background-color: #003b65; padding-top: 1rem; padding-bottom: 1rem; color: #FFFFFF; font-size: 90%;}
.footer a 				{color: #FFFFFF;}
.footer a:hover			{text-decoration: underline;}


.who-we-are-in							{position: relative;}
.who-we-are-in .line-a					{position: relative; z-index: 2;}
.who-we-are-in .line-a .line-a-a		{position: relative; z-index: 2; width: auto; display: inline-block;}
.who-we-are-in .line-a .line-a-a::after	{content: ""; position: absolute; border: 2px solid #00c2ff; left: -20px; top: -20px; width: 100%; height: 100%; z-index: -1;}




.products-home				{padding-top: 4rem; padding-bottom: 4rem; background-color: #0064a8;}
.products-home h1			{color: #00c2ff;}

.products-home a			{color: #FFFFFF; text-decoration: underline;}
.products-home a:hover		{color: #00c2ff;}

.home-products-block								{}
.home-products-block .home-products-img				{margin-bottom: 1rem; overflow: hidden;}
.home-products-block .home-products-img img			{-moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s;}
.home-products-block:hover .home-products-img img	{-moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}

.home-products-block .home-products-desc			{}
.home-products-block .home-products-desc .line-a	{margin-bottom: 1rem; color: #FFFFFF; font-weight: 700; font-size: 150%; padding-left: 1rem; border-left: 2px solid #00c2ff; line-height: normal;}
.home-products-block .home-products-desc .line-b	{color: #FFFFFF;}



.our-projects-home			{padding-top: 4rem; padding-bottom: 4rem; background-color: #003b65;}
.our-projects-home h1		{color: #00c2ff;}
.our-projects-home .swiper-wrapper	{margin-bottom: 2rem;}

.our-projects-home a 		{color: #FFFFFF;}
.our-projects-home a:hover 	{color: #00c2ff;}


.projects-swiper				{ text-align: center;}
.projects-swiper .line-a		{margin-bottom: 1rem; overflow: hidden; -webkit-border-radius: 10rem; -moz-border-radius: 10rem; border-radius: 10rem;}
.projects-swiper .line-b		{font-size: 1.25rem; color: #FFFFFF;}
.projects-swiper .line-a img		{-webkit-border-radius: 10rem; -moz-border-radius: 10rem; border-radius: 10rem; position: relative; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s;}
.projects-swiper:hover .line-a img	{-moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); opacity: 0.3;}


.our-projects-home .swiper-scrollbar-drag	{background: rgba(0,194,255,1);}
.our-projects-home .swiper-scrollbar		{background: rgba(255,255,255,.2);}

.top-area-in		{}


.mid-inside			{padding-top: 4rem; padding-bottom: 4rem; background-color: #FFFFFF;}

.certificates				{}
.certificates .line-a		{margin-bottom: .5rem;}
.certificates .line-a img	{border: 1px solid #1b1463;}
.certificates .line-b		{font-size: 85%;}


.features					{}
.features .line-a			{margin-bottom: 1rem;}
.features .line-b			{position: relative; padding: 0 1rem;}
.features .line-b::after	{content: ''; width: 3px; height: 50px;  background: #00b0eb; position: absolute; left: 0; top: .25rem;}


.cont-icon					{color: #1b1463; font-size: 125%;}
.form-control 				{background-color: #f7fdfe; border: 1px solid #00b0eb; border-radius: 0rem;}


.projects-block					{position: relative; overflow: hidden; background-color: #000000;}
.projects-block .block-shadow	{position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 80%;
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
.projects-block .line-a img			{-moz-transition: all 0.5s; -webkit-transition: all 0.5s; transition: all 0.5s; opacity: 1;}
.projects-block:hover .line-a img	{-moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.5;}
.projects-block .line-b				{position: absolute; top: 50%;  left: 0; transform: translateY(-50%); padding: 0 5%; width: 100%; color: #FFFFFF; font-size: 150%; font-weight: 600; z-index: 1; text-align: center; display: flex;   justify-content: center;}
.projects-block .line-c				{position: absolute; bottom: 10%; left: 0; padding: 0 2rem; width: 100%; color: #FFFFFF; z-index: 1; text-align: center;}

.projects-block .line-b,
.projects-block .line-c				{-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s;}
.projects-block .line-c				{opacity: 0;}
.projects-block .line-c a 			{color: #FFFFFF; display: inline-block;}
.projects-block .line-c a::after 		{display:block; content: ''; border-bottom: solid 1px #00b0eb; transform: scaleX(0);  transition: transform 250ms ease-in-out;}
.projects-block .line-c a:hover			{color: #00b0eb;}
.projects-block .line-c a:hover::after	{transform: scaleX(1);}

.projects-block:hover .line-b,		
.projects-block:hover .line-c		{-webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0); opacity: 1;}


.projects-in .line-a	{}	
.projects-in .line-b	{margin-top: .5rem;}





.products-block img.image-hover {position: absolute; top: 0; right: 0; left: 0; bottom: 0; object-fit: contain; opacity: 0; transition: opacity .8s;}
.products-block:hover img.image-hover {opacity: 1;}



.products-block							{border: 1px solid #e5e5e5; position: relative; height: 100%;}
.products-block .product-img			{border-bottom: 1px solid #e5e5e5; position: relative;}
.products-block .product-desc			{margin-top: .5rem; text-align: center;}
.products-block .product-desc .line-a	{font-weight: 500; margin-bottom: .75rem;}
.products-block .product-desc .line-b a	{display: inline-block; background-color: #808080; color: #ffffff; padding: .25rem 1rem; font-size: 80%; border-radius: .25rem;}
.products-block .product-desc .line-b a:hover {background-color: #1b1464; color: #FFFFFF;}




.about-us-big-fonts			{font-size: 125%; font-weight: 300;}


.about-gcg					{padding-bottom: 3rem;}
.mission-vision				{padding-top: 3rem; padding-bottom: 3rem; background-color: #fafafa;}
.mission-vision .mv-block	{background-color: #f5f5f5; padding: 2rem; height: 100%;}

.company-corporate-values		{padding-top: 4rem; padding-bottom: 4rem; background-color: #0064a8; color: #FFFFFF;}
.company-corporate-values h1	{color: #00c2ff;}

.company-corporate-values .ccv-block	{padding: 2rem; background-color: #1a74b1; height: 100%;}
.company-corporate-values .ccv-block h4	{font-weight: 700; color: #00c2ff;}
.company-corporate-values .ccv-block p	{font-size: 87.5%;}



.company-corporate-values-in		{padding-top: 3rem; padding-bottom: 3rem;}
.company-corporate-values-in h1		{}

.company-corporate-values-in .ccv-block		{padding: 2rem; background-color: #fafafa; height: 100%;}
.company-corporate-values-in .ccv-block h4	{font-weight: 700;}
.company-corporate-values-in .ccv-block p	{font-size: 87.5%;}


.about-certificates-wrap	{padding-top: 3rem; padding-bottom: 3rem;}


.pod-wrap					{padding-top: 3rem; padding-bottom: 3rem; background-color: #fafafa;}

.pod-block					{padding: 1rem; height: 100%; background-color: #f2f2f2; font-size: 87.5%;}

.pod-block-new				{padding: .5rem; height: 100%; background-color: #fafafa;}
.pod-block-new .line-a		{margin-bottom: 1rem;}
.pod-block-new .line-b		{}


.quality-control-workflow		{padding-top: 3rem; padding-bottom: 3rem;}
.quality-control-workflow-block	{padding: 1rem; height: 100%; background-color: #f2f2f2; font-size: 87.5%;}


.about-services				{padding-top: 3rem; padding-bottom: 3rem;}
.about-services-block		{padding: 1rem; background-color: #fafafa; height: 100%; font-size: 87.5%;}




.projectsin-row					{margin-bottom: 2rem;}
.projectsin-row:last-child		{margin-bottom: 0rem;}
.projectsin-row .line-b			{font-size: 125%;}
.projectsin-row .line-b small	{font-size: 75%;}

.projectsin-row-right .line-b	{text-align: right;}


.data-stats					{padding-top: 4rem; padding-bottom: 4rem; background-color: #003b65;}
.data-stats h1 				{color: #00c2ff;}
.data-stats-block			{background-color: #1a4f75; text-align: center; padding: 2rem;}
.data-stats-block .line-a	{margin-bottom: 1rem; font-size: 300%; font-weight: 700; line-height: normal; color: #FFFFFF;}
.data-stats-block .line-b	{font-size: 80%; color: #FFFFFF;}


.our-expertise				{padding-top: 4rem; padding-bottom: 4rem; background-color: #003b65; color: #FFFFFF;}
.our-expertise h1 			{color: #00c2ff;}
.our-expertise-in			{padding-top: 3rem; padding-bottom: 3rem; background-color: #fafafa;}


.abt-gcg-block			{text-align: center;}
.abt-gcg-block .line-a	{margin-bottom: .5rem;}
.abt-gcg-block .line-b	{font-weight: 500; color: #1365ab;}



.prod-detail-desc-row	{padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px dashed #e5e5e5;}
.prod-detail-desc-row:last-child	{padding-bottom: 0; margin-bottom: 0; border-bottom: none;}


.partnerships-block				{text-align: center;}
.partnerships-block .line-a		{margin-bottom: 1rem;}
.partnerships-block .line-b		{}


























/* Sweep To Top */
.hvr-sweep-to-top	{background-color: #00c2ff; padding: 1rem; color: #FFFFFF;}
.hvr-sweep-to-top {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #333333;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active {color: #FFFFFF;}
.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {-webkit-transform: scaleY(1); transform: scaleY(1);}



/* ===== PRELOADER ===== */
#preloader	{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 9999;}
#status		{width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; background-image: url(../images/loading.gif); background-repeat:no-repeat; background-position: center center; margin: -50px 0 0 -50px;}	
/* ===== PRELOADER ===== */




/* Desktop */
@media only screen
and (min-width: 1370px)
and (max-width: 1605px)
{

	
}


/* Laptop - For 1366 Resolution */
@media only screen
and (min-width: 1030px)
and (max-width: 1366px)
{
	
	
	
}


/* Laptop  - For 1024 Resolution */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
{
	

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad Landscape */
@media only screen   
and (orientation : landscape)   
and (-webkit-min-device-pixel-ratio: 2)  
and (min-width : 768px)   
and (max-width : 1024px)   
{
	
body 				{font-size: 0.875rem;}
	

	
.top-area			{padding: 1rem 0;}
.top-area.sticky	{padding: .75rem 0;}
	
.top-area .logo		{max-height: 75px;}	
	
.banner-area .circle	{left: 5%; top: 30%; width: 325px; height: 325px;}
.banner-area .caption	{left: 10%; top: 33%; font-size: 100px; line-height: 100px;}
	
.banner-area .caption-banner	{top: 40%;}
.banner-area .caption-banner	{font-size: 60px; line-height: 60px;}	
	
	
}  

/* iPad Portrait */
/* Orientation : Portrait */  
@media only screen   
and (orientation : portrait)   
and (-webkit-min-device-pixel-ratio: 2)   
and (min-width : 768px)   
and (max-width : 1024px)  
{

body 				{font-size: 1rem;}
	

	
.top-area			{padding: 1rem 0;}
.top-area.sticky	{padding: .75rem 0;}
	
.top-area .logo		{max-height: 75px;}	
	


.banner-area .circle	{left: 5%; top: 30%; width: 225px; height: 225px;}
.banner-area .caption	{left: 10%; top: 33%; font-size: 72px; line-height: 65px;}
	
.banner-area .caption-banner	{top: 40%;}
.banner-area .caption-banner	{font-size: 60px; line-height: 60px;}

	
}

/* Generally, this dimension is recommended for mobile: - For 640 Resolution */  
@media only screen   
and (min-width : 360px)   
and (max-width : 640px)  
{
	
body 				{font-size: 0.875rem;}
	

	
.top-area			{padding: 1rem 0;}
.top-area.sticky	{padding: .75rem 0;}
	
.top-area .logo		{max-height: 60px;}
	

.banner-area .circle	{left: 7%; top: 30%; width: 100px; height: 100px;}
.banner-area .caption	{left: 7%; top: 35%; font-size: 40px; line-height: 38px; font-weight: 700;}
	
.banner-area .caption-banner	{top: 45%;}
.banner-area .caption-banner	{font-size: 30px; line-height: 28px; font-weight: 700;}	
	

.who-we-are-in			{width: 90%; margin: 0 auto; padding-top: 2rem;}
.who-we-are-in .line-a .line-a-a::after	{left: -15px; top: -15px;}
.who-we-are-in .line-b					{right: -5%;}
	
.projectsin-row-right .line-b	{text-align: left;}
	
.home-products-block .home-products-desc .line-a	{font-size: 125%; padding-left: .5rem; border-left: 1px solid #00c2ff; line-height: normal;}	
	


	
}


/* Mobile - For 480 Resolution */  
@media only screen   
and (min-width : 320px)   
and (max-width : 480px)
{
	
body 				{font-size: 0.875rem;}
	

	
.top-area			{padding: .5rem 0;}
.top-area.sticky	{padding: .25rem 0; }	

	
.top-area .logo		{max-height: 60px;}
	

.banner-area .circle	{left: 7%; top: 30%; width: 100px; height: 100px;}
.banner-area .caption	{left: 7%; top: 35%; font-size: 40px; line-height: 38px; font-weight: 700;}
	
.banner-area .caption-banner	{top: 45%;}
.banner-area .caption-banner	{font-size: 30px; line-height: 28px; font-weight: 700;}
	

.who-we-are-in			{width: 90%; margin: 0 auto; padding-top: 2rem;}
.who-we-are-in .line-a .line-a-a::after	{left: -15px; top: -15px;}
.who-we-are-in .line-b					{right: -5%;}
	
	
.projectsin-row-right .line-b	{text-align: left;}
	

.home-products-block .home-products-desc .line-a	{font-size: 125%; padding-left: .5rem; border-left: 1px solid #00c2ff; line-height: normal;}
	
	
	
}