@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body{
	font-family: 'Poppins', sans-serif;
}
a{
	text-decoration: none!important;
}
.header{
	position: relative;
	height: 87vh;
}
.header .banner{
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.header .bnr_img{
	height: auto;
}
.header nav .fa-bars{
	color: #fff;
	font-size: 30px;
}
.header nav{
	background-color: transparent;
	padding: 20px 150px;
}

.header nav .nav-link{
	color: #fff;
	margin: 0px 15px;
	font-size: 18px;
	font-weight: bold;
}
.navbar-collapse {
    background-color: transparent;
}



.about_us{
	padding: 100px 200px;
	text-align: center;
	background-color: #F5F5F5;
}

.about_us .sec_title{
	color: #000;
	font-size: 48px;
	font-weight: bold;
}
.about_us .desc{
	color: #6D7783;
	font-size: 18px;
	margin-bottom: 50px;
}
.about_us .learmore_btn{
	background-color: #015EDA;
	padding: 15px 40px;
	border-radius: 50px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	display: block;
	width: 250px;
	margin: 10px auto;
}

.about_us .circle{
	position: absolute;
	right: 50px;
	top: 14px;
	z-index: 1;
}
.about_us .arrow{
	position: absolute;
	right: 55px;
	top: 14px;
	z-index: 2;
	transition: .3s;
}
.about_us .learmore_btn:hover .arrow{
	right: 40px;
}



.tow_boxes{
	text-align: center;
	background-color: #F5F5F5;
}

.tow_boxes .sec_title{
	color: #000;
	font-size: 48px;
	font-weight: bold;
}
.tow_boxes .desc{
	color: #6D7783;
	font-size: 18px;
}

.tow_boxes .vision{
	background-image: url("../images/vision_bg.png");
	background-size: 100% 100%;
	background-position: center;
	padding: 50px 20px;
	height: 100%;
	background-color: #EBEBEB;
}
.tow_boxes .mission{
	background-image: url("../images/mission_bg.png");
	background-size: 100% 100%;
	background-position: center;
	padding: 50px 20px;
	height: 100%;
	background-color: #E2E2E2;
}




.products {
	padding: 100px 0px;
	position: relative;
}
.products .pro_deco1{
	position: absolute;
	right: 0;
	top: 0;
}
.products .pro_deco2{
	position: absolute;
	bottom: 0;
	left: 0;
}
.products .sec_title{
	color: #000;
	text-align: center;
	font-size: 48px;
	font-weight: bold;
}
.products .owl-stage-outer{
	padding: 0px 15px 0px 0px!important;
}
.products .slider{
	padding: 50px 200px;
}

.products .box{
	padding: 15px 20px 50px 20px;
	margin: 20px 10px;
	border-radius: 30px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);

}
.products .owl-carousel{

}
.products .owl-carousel .owl-dots.disabled{
    display: block;
}
.products .owl-theme .owl-dots .owl-dot span {
    margin: 5px;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #015EDA;
    
}
.products .box img{
	margin-bottom: 30px;
}
.products .box .pro_title{
	color: #000;
	font-size: 20px;
	font-weight: bolder;

}
.products .box .inquirenow_btn{
	color: #015EDA;
	font-weight: bold;
	position: relative;
	display: block;
	width: 150px;
}

.products .circle{
	position: absolute;
	right:25px;
	top: 7px;
	z-index: 1;
}
.products .arrow{
	position: absolute;
	right: 30px;
	top: 9.5px;
	z-index: 2;
	transition: .3s;
}
.products .box:hover .arrow{
	right: 18px;
}





footer{
	background-color: #00285A;
}
.footer{
	padding: 70px 200px 100px 200px;
}
.footer .logo{
	width: 200px;
}
.footer i{
	background-color: #EEEEEE;
	width: 40px;
	height: 40px;
	padding-top: 7px;
	text-align: center;
	border-radius: 100px;
	font-size: 25px;
	color : #000;
	
}
.footer .social_icons{
	margin-top: 30px;
}
.footer .title{
	color: #fff;
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 30px;
}
.footer ul{
	list-style: none;
	padding: 0!important;
	margin: 0!important;
}
.footer li{
	margin: 10px 0px;	
}
.footer img{
	margin-right: 10px;
}
.footer a{
	color: #fff;
	font-size: 20;
}
.footer a:hover
{
    color : #fff;
}

.footer .form-control{
	background-color: transparent;
	border-bottom: 1px solid gray!important;
	margin-bottom: 20px;
	border: none;
	padding-bottom: 5px!important;
	padding: 0px;
	border-radius: 0px;	
	color : #fff;
}
#mail-status .success
{
    background: green;
    color: #fff;
    padding: 6px;
}

#mail-status2 .success
{
    background: green;
    color: #fff;
    padding: 6px;
}
.footer .form-control::placeholder{
	color: #ffff;
	font-size: 16px;
}
.footer .send_btn{
	background-color: #015EDA;
	padding: 10px 50px;
	border-radius: 50px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	display: block;
	width: 150px;
}
.footer .circle{
	position: absolute;
	right: 20px;
	top: 7px;
	z-index: 1;
}
.footer .arrow{
	position: absolute;
	right: 25px;
	top: 7px;
	z-index: 2;
	transition: .3s;
}
.footer .send_btn:hover .arrow{
	right: 10px;
}
footer .copyright_div{
	border-top: 1px solid gray;
	text-align: center;
	padding: 20px 10px;
}
footer .copyright_div p{
	color: #fff;
	font-size: 16px;
}


.modal .modal-dialog{
	max-width: 722px;
}
.modal-header {
    padding: 3rem 3rem 1rem 3rem!important ;
    border-bottom: none!important;
}
.modal .btn-close{
	border-radius: 100px;
	padding: 10px;
	background-color: #000!important;
	color: #fff!important;
}
.btn-close {
    box-sizing: content-box;
    width: 20px!important;
    height: 20px!important;
    text-align: center!important;
    padding: 4px 5px 6px 5px!important;
    color: #000;
    background: black!important;
    border: 0;
    border-radius: 100px!important;
    opacity: 1!important;
}

.modal-footer {
    padding: 1rem 1rem 3rem 1rem!important ;
    border-top: none!important;
}
.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 40px!important;
    outline: 0;
}
.modal input{
	border-radius: 50px;
	border: 1px solid gray!important;
}
.modal textarea{
	border-radius: 20px;
	border: 1px solid gray!important;
}

.modal .height{
	height: 100px;
}

.modal .modal-body{
	border: none!important;
	padding: 1rem 2rem 0rem 2rem!important;
}
.modal .send_btn{
	background-color: #015EDA;
	padding: 10px 50px;
	border-radius: 50px;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	display: block;
	margin: 0px auto;
	width: 150px;
}
.modal .circle{
	position: absolute;
	right: 20px;
	top: 7px;
	z-index: 1;
}
.modal .arrow{
	position: absolute;
	right: 25px;
	top: 7px;
	z-index: 2;
	transition: .3s;
}
.modal .send_btn:hover .arrow{
	right: 10px;
}

.modal .form-control
{
     color: #000; 
}




@media (min-width: 300px) and (max-width: 767.98px) { 

.header nav {
    padding: 20px;
}
.header{
	height: 50vh;
}
.logo{
	width: 200px;
}
.about_us {
    padding: 50px 20px;
}
.products .slider {
    padding: 50px 20px;
}
.footer {
    padding: 100px 20px;
}
.logo{
	width: 200px;
}
.footer .box{
	margin: 30px 0px;
}
.navbar-collapse {
    background-color: #00285a;
}
}

@media (min-width: 768px) and (max-width: 991.98px) {

.header nav {
    padding: 20px 50px;
}
.header{
	height: 50vh;
}
.about_us {
    padding: 100px 50px;
}
.products .slider {
    padding: 50px 50px;
}
.footer {
    padding: 100px 50px;
}
.logo{
	width: 200px;
}
.navbar-collapse {
    background-color: #00285a;
}
}

@media (min-width: 992px) and (max-width: 1199.98px) {

.header nav {
    padding: 20px 100px;
}
.header{
	height: 50vh;
}
.about_us {
    padding: 100px 100px;
}
.products .slider {
    padding: 50px 100px;
}
.footer {
    padding: 100px 100px;
}
.logo{
	width: 200px;
}
}

.form-control:focus {
    color: #fff !important;
    background-color: transparent !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}


.modal .form-control:focus
{
    color : #000 !important;
    background-color: #fff !important;
}

