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

@import url('global.css');

body{font-family: 'Roboto', sans-serif; font-weight:400; color:#07556d; background:url(../images/bg.svg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

.wrapper{min-height:100vh;}
.header{background-color:#026994; z-index: 1000;}
.contents{padding:30px 0; /*background:-moz-radial-gradient(center, ellipse cover, #ebebeb 0%, #bcbcbc 100%); background:-webkit-radial-gradient(center, ellipse cover, #ebebeb 0%,#bcbcbc 100%);
background:radial-gradient(ellipse at center, #ebebeb 0%,#bcbcbc 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebebeb', endColorstr='#bcbcbc',GradientType=1 );*/}
.footer{background-color:#026994; color:#a9b7bd; min-height:60px; padding:10px 0; z-index: 1000;}
nav.menu ul li a{display:block; padding:10px; line-height:40px; color:#fff; text-transform:uppercase; text-align:center; font-size:15px;}
.headding{font-weight:900; line-height:1.2; padding-bottom:30px; border-bottom:4px solid #07556d; position:relative; margin-bottom:30px;animation: lineAnimation 1000ms 1 0s ease-in-out;}
.headding:before, .headding:after{width:20px; height:20px; background-color:#07556d; border-radius:100%; position:absolute; content:""; bottom:-10px;} 
.headding:before{left:-10px;}
.headding:after{right:-10px;}

.heading-home{font-weight:900; line-height:1.2; padding-bottom:15px; border-bottom:2px solid #07556d; position:relative; margin-bottom:15px;animation: lineAnimation 1000ms 1 0s ease-in-out;}
.heading-home:before, .heading-home:after{width:10px; height:10px; background-color:#07556d; border-radius:100%; position:absolute; content:""; bottom:-5px;} 
.heading-home:before{left:-10px;}
.heading-home:after{right:-10px;}

.article{padding:0 35px;}
.article p{margin-bottom:10px;}
.article p:last-child{margin-bottom:0;}
.aboutus .article p{line-height:2;}
.logo{position:relative;}
.logo:after{position:absolute; left:0; bottom:-30px; width:100%; height:16px; content:""; background:url(../images/shadow.png) center center no-repeat; background-size:100% auto;}
.logo img{max-width:160px;max-height: 220px;}
.content-block{padding:0 50px;}
.products .row.rows{margin:-8px;}
.products .row.rows .columns{padding:8px;}
.product-item{border-radius:15px; border:1px solid #07556d; overflow:hidden; box-shadow:0 5px 10px rgba(0,0,0,0.2);}
.product-item img{width:100%;}

.nav-icon-wrap{padding:5px 15px; display:none;}
.nav-icon{width:36px; height:36px; cursor:pointer; position:relative;}
.hamburger{position:absolute; left:50%; top:50%; width:60%; height:2px; background:rgba(255,255,255,1); transform:translate(-50%,-50%); transition:.5s; box-shadow:0 0 2px rgba(0,0,0,0.2);}
.hamburger:before, .hamburger:after{content:""; position:absolute; left:0; width:100%; height:2px; background-color:#fff; transition:.5s; box-shadow:0 0 2px rgba(0,0,0,0.2);}
.hamburger:before{top:-7px;}
.hamburger:after{top:7px;}
.nav-icon.nav-icon-active .hamburger{background:rgba(255,255,255,0);} 
.nav-icon.nav-icon-active .hamburger:before{top:0; transform:rotate(45deg);}
.nav-icon.nav-icon-active .hamburger:after{top:0; transform:rotate(135deg);}
.nav-icon.nav-icon-inverse .hamburger{background:rgba(123,113,103,1);}
.nav-icon.nav-icon-inverse .hamburger:before, .nav-icon.nav-icon-inverse .hamburger:after{background:rgba(123,113,103,1);}
.nav-icon.nav-icon-active .hamburger{background:rgba(123,113,103,0) !important; box-shadow:none !important;}
.nav-icon.nav-icon-active .hamburger:before, .nav-icon.nav-icon-active .hamburger:after{background:rgba(255,255,255,1) !important;}

/*--Fading animation to background overlay--*/
.mfp-with-zoom .mfp-container,.mfp-with-zoom.mfp-bg{
	opacity:0; -webkit-backface-visibility:hidden; -webkit-transition:all 0.3s ease-out;  -moz-transition:all 0.3s ease-out;  -o-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
	.mfp-with-zoom.mfp-ready .mfp-container{opacity:1;}
	.mfp-with-zoom.mfp-ready.mfp-bg{opacity:0.8;}
	.mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg{opacity:0;}
	
	.dropdown-toggle{position:relative;}
	.dropdown-menu{border:0; border-radius:0; margin:0; padding:0; background-color:#7db1c6;}
	.dropdown-menu .dropdown-item{text-align:left; padding:5px 15px; color:#07556d; line-height:26px;}
	.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus{background:none;}
	
	@media(max-width:1199px){
		.container{max-width:100%;}
		.article{padding:0 20px;}
	}
	@media(max-width:991px){
		.content-block{padding:0 30px;}
	.logo{margin-bottom:20px;}
	.logo img{max-width:140px;}
	.logo:after{bottom:-20px;}
	}
	@media(min-width:768px){
		nav.menu{display:block !important;}
	.dropdown:hover>.dropdown-menu{display:block !important;}
	.dropdown>.dropdown-toggle:active{pointer-events:none;}
	.dropdown-toggle:after{position:absolute; right:10px; top:50%; transform:translateY(-50%); border-top:.3em solid transparent; border-right:0; border-bottom:.3em solid transparent; border-left:.3em solid;}
	.dropdown-submenu{position:relative;}
	.dropdown-submenu .dropdown-menu{top:0; left:100%;}
	.dropdown-submenu:hover{background-color:#51a4c7 !important;}
	.primary-dropdown-toggle:after{display:none;}	
	.dropdown.show a{background-color:#7db1c6;}
	}
	@media(max-width:767px){
		nav.menu ul li a{font-size:14px;}
	.headding{padding-bottom:20px; border-bottom-width:2px; margin-bottom:20px;}
	.headding:before, .headding:after{width:16px; height:16px; bottom:-8px;} 
	.headding:before{left:-8px;}
	.headding:after{right:-8px;}
	.header .container{padding:0;}
	.nav-icon-wrap{display:block !important;}
	nav.menu{display:none;}
	nav.menu ul li{border-top:1px solid #7db1c6;}
	nav.menu ul li a{text-align:left; padding:8px 15px; line-height:26px; font-size:14px;}
	.dropdown-menu, .dropdown-menu.show{position:static !important; transform:none !important; float:none !important;}
	.dropdown-toggle:after{position:absolute; right:15px; top:50%;}
	.dropdown-submenu ul{padding-left:10px; padding-right:10px;}	
	.dropdown-submenu.active{background-color:#51a4c7 !important;}
	}
	.header{position:relative;}
.menu ul li{position:relative;}
.menu ul li:hover > ul{display:block;}
.menu ul li:hover ul li a:hover{color:#fff;}
.dropdown-anchor{position:relative;}
.dropdown-anchor:after{position:absolute; right:10px; top:50%; transform:translateY(-50%); border-top:.3em solid transparent; border-right:0; border-bottom:.3em solid transparent; border-left:.3em solid; content:"";}
.search{position:absolute; right:15px; top:50%; transform:translateY(-50%); max-width:200px;}
.search .form-control{border:0; border-radius:4px; height:30px; padding:0 40px 0 10px; background-color:#7db1c6;font-size:12px;}
.search .form-control:focus{box-shadow:none; background-color:#fff;}
.search-sbmit-btn{width:30px; height:30px; border:0; border-radius:0; position:absolute; right:0; top:0; background:url(../images/search-icon.png) center center no-repeat; background-size:50% auto;}

@media(max-width:1199px){
	.container{max-width:100%;}
	.article{padding:0 20px;}
}
@media(max-width:767px){
	.search{right:auto; left:15px; top:8px; transform:none;}
	img.d-block.w-100 {
    height: 220px;
}
video.videobg {
    height: 220px;
}
}



	@keyframes lineAnimation{
		0%{
			transform: rotate(0);
			width: 0%;
			margin: 0 auto 30px auto;
        }
		100%{
			transform: rotate(0);
			width: 100%;
			margin: 0 auto 30px auto;
        }
	}
	
	@keyframes fadeIn{
		100%{
			opacity: 1;
		}
	}
	
	.fadeIn{
		opacity: 0;
		animation: fadeIn 500ms forwards 500ms ease;
	}
	
	.animateLine{
		animation: lineAnimation 500ms 1 0s ease-in-out;
	}
	
	.breadcrumb li a {
		color: #006b98;
	}
	
	.mt-10{
		margin-top: 10px !important;
	}
	
	.center-all a img, .center-all a h6{
		margin: 0 auto;
	}
	
	article .article{
		max-height: 300px;
		overflow-y: scroll;
	}
	
	.element .element-textarea, 
	.element .element-textarea h1, 
	.element .element-textarea h2, 
	.element .element-textarea h3, 
	.element .element-textarea h4, 
	.element .element-textarea h5, 
	.element .element-textarea h6{
		margin-bottom:15px;
	}
	
	.nav-link .active{
		color: #61c5f1 !important;
	}
	
	.btn:hover{
		cursor: pointer;
	}
	
	.cat-thumbnail a h6{
		text-align: center;
		margin: 10px auto;
	}
	
	.cat-thumbnail a{
		color: #218dad;
	}
	.cat-thumbnail a:hover{
		color: #004458;
	}
	
	.cat-thumbnail a img {border-radius:15px; border:1px solid #07556d; overflow:hidden; box-shadow:0 5px 10px rgba(0,0,0,0.2);}
	
	.logo-line{
	opacity: 0;
	animation-name: logoline;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	}

	.logo-name{
		opacity: 0;
		animation-name: logoname;
		animation-delay: 3s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
	}

	.logo-original{
		opacity: 0;
		animation-name: logoname;
		animation-delay: 2s;
		animation-duration: 1s;
		animation-fill-mode: forwards;
	}

	@keyframes logoline{
		from{
			opacity: 1;
			stroke-dasharray: 80;
		}
		to{
			stroke-dasharray: 480;
		}
	}

	@keyframes logoname{
		to{
			opacity: 1;
		}
	}

	@keyframes fadeOut{
		to{
			opacity: 0;
			z-index: 0;
		}
	}

	.section{
		height: 100vh;
	}

	.home-logo{
		height: 30vh;
		margin: 0 auto;
		/* background: #01699478;
		padding: 20px;
		border-radius: 0 0 15px 15px;
		position: absolute;
		top: 0;
		left: auto;
		right: auto;
		z-index: 1000; */
	}

	.home-section{
		z-index: 900;
		background: #cecece;
		position: fixed;
		top:0;left:0;
		width: 100vw;
		/* animation */
		animation-name: fadeOut;
		animation-delay: 5s;
		animation-duration: 500ms;
		animation-fill-mode: forwards;
	}

	.n-middle{
		display: flex;
    	align-items: center;
	}

	.radius-2{
		border-radius: 8px;
	}







	/* home logo animation */


	.home-logo-line{
		/* opacity: 0;
		animation-name: logoline;
		animation-duration: 3s;
		animation-fill-mode: forwards; */
		display:none;
	}

	.home-logo-name{
		opacity: 0;
		animation-name: logonameHome;
		animation-delay: 500ms;
		animation-duration: 1500ms;
		animation-fill-mode: forwards;
	}

	.home-logo-original{
		opacity: 0;
		animation-name: logonameHome;
		animation-delay: 0;
		animation-duration: 1000ms;
		animation-fill-mode: forwards;
	}

	@keyframes logolineHome{
		from{
			opacity: 0;
			/* stroke-dasharray: 80; */
		}
		to{
			/* stroke-dasharray: 480; */
			opacity:1;
		}
	}

	@keyframes logonameHome{
		to{
			opacity: 1;
		}
	}

	@keyframes fadeOutHome{
		to{
			opacity: 0;
			z-index: 0;
		}
	}

	.section{
		height: 100vh;
	}

	.home-logo{
		height: 30vh;
		margin: 0 auto;
		/* background: #01699478;
		padding: 20px;
		border-radius: 0 0 15px 15px;
		position: absolute;
		top: 0;
		left: auto;
		right: auto;
		z-index: 1000; */
	}

	.home-section{
		z-index: 900;
		background: #032442f6;
		position: fixed;
		top:0;left:0;
		width: 100vw;
		/* animation */
		animation-name: fadeOutHome;
		animation-delay: 2000ms;
		animation-duration: 2000ms;
		animation-fill-mode: forwards;
	}


	.carousel-inner > .item {
		position: relative;
		display: none;
		-webkit-transition: 0.1s ease-in-out left;
		-moz-transition: 0.1s ease-in-out left;
		-o-transition: 0.1s ease-in-out left;
		transition: 0.1s ease-in-out left;
	}
.download_card {
    padding: 20px;
    width: 200px;
    min-height: 200px;
    display: grid;
    grid-template-rows: 20px 50px 1fr 50px;
    border-radius: 10px;
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
    transition: all 0.5s;
}

.card_title {
    grid-row: 3/4;
    font-weight: 400;
    color: #07556d;
    text-align: center;
}
.card-1 {
    background:#bad6e2;
}
#circle {
    background: #bad6e2;
    border-radius: 50%;
    width: 200px;
    height: 200px;
}