/*CSS*/

html{scroll-behavior: smooth;}
body{margin:0; padding:0px; font-family: tahoma,arial; font-size:14px;}

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], textarea, select{
	display: block;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid #e6e6e6;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0;
    color: #666;
    padding: 1rem;
    outline:none;
}

input[type="checkbox"]{max-height:16px !important; max-width:16px !important; height:16px !important; width:16px !important; display:inline !important;}

/*============ IDS ==============*/
#container{width:100%; overflow:hidden;}

#header{background:transparent; position:absolute; z-index:9999999; width:100%;}
#footer{background:#121212;} #footer a{text-decoration:none; color:#fff; transition:0.32s;}
#footer a:hover{color:#ff5f13; padding-left:7px;}

/*============ BANNERS =======*/
#banner-still{background-image:url('../images/slider.jpg'); background-size:cover; background-position:center; height:100vh; width:100%;}
#banner-still section{position:absolute; width:100%; margin-left:0%; margin-top:3%; padding:12px 0px; color:#fff; text-align:center; font-weight:bold; font-family:tahoma; z-index:9999;}

.banner3{position:relative; height:250px; width:100%; background: linear-gradient(to bottom, rgba(0, 12, 32, 0.75), rgba(0, 12, 32, 0.75)), url('../images/banner-2.jpg'); background-size:cover; background-repeat:no-repeat;}
.banner3 div{position:absolute; left:5%; top:20%; padding:24px; color:#fff;}

/*============== NAVIGATIONS ============*/
#contact{padding:10px 0px; background:#fff; border-bottom:1px solid #bbb; color:#6f828f;}
#navigation{width:100%; background:#fff; padding:7px 0px; transition:0.75s;}
#logo{display:inline-block; width:20%; font-family:tahoma, arial; font-size:32px; color:#fff; cursor:pointer;} 
#logo img{height:84px; padding:6px 0px; transition:0.32s;}
#links{display:inline-block; width:75%; text-align:right; padding:40px 0px; vertical-align:top;}
#links a{vertical-align:middle; text-decoration:none; padding:40px 12px; color:#7D7E81; font-weight:600; font-size:16px; font-family:sans-serif; transition:0.24s;}
#links a:hover{color:#35c5af;}

/*=========== MOBILE NAV =========== */
#mbmenu{width:100%; height:100%; background:#121212; z-index:999999999; position:fixed; top:0px; left:-100%; display:block;}
#mbmenu ul{list-style:none; margin:0px; padding:0px;} 
#mbmenu li{display:block; padding:24px 0px; border-bottom:1px solid #eee;}
#mbmenu li a{text-decoration:none; border:none; width:100%; color:#fff; text-transform:uppercase; font-family:tahoma; text-align:center; font-size:18px; transition:0.64s;}
#mbmenu li a:hover{color:#fff; background:teal;}

/*============= CLASSES =================*/
/*========= FRONT SCREEN ========== */
.action-btn{width:180px; height:180px; opacity:.9; cursor:pointer; display:flex; align-items: center; justify-content:center; border-radius:50%; border:2px solid rgba(255, 255, 255, 1); transition:0.24s;}
.action-btn:hover{border:24px solid rgba(255, 255, 255, 0); background:rgba(255,255,255,0.90); width:150px; height:150px; background-clip: padding-box; transition:0.24s;}


.content-1{width:100%; margin:auto;}
.content-2{margin:auto; width:80%;}
.content-3{margin:auto; width:70%;}
.content-4{width:90%; margin:auto;}
.content-5{margin:auto; width:55%;}

/*============ FLOATERS ===========*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}

/*============ WIDTH ===========*/
.half{width:50%;}
.quart{width:33%;}
.percent2{width:2%;}
.percent5{width:5%;}
.percent10{width:10%;}
.percent20{width:20%;}
.percent25{width:25%;}
.percent30{width:30%;}
.percent35{width:35%;}
.percent40{width:40%;}
.percent45{width:45%;}
.percent48{width:48%;}
.percent50{width:50%;}
.percent60{width:60%;}
.percent70{width:70%;}
.percent80{width:80%;}
.percent90{width:90%;}
.percent95{width:95%;}

/*============ BORDER ===========*/
.border-top-bottom{border-top:1px solid #40cfd3; border-bottom:1px solid #40cfd3;}
.border-top{border-top:1px solid #40cfd3;}
.border-bottom{border-bottom:1px solid #40cfd3;}
.border-left{border-left:1px solid #40cfd3;}
.border-right{border-right:1px solid #40cfd3;}

/*============ PADDING ===========*/
.padd7{padding:7px 0px;}
.padd12{padding:12px 0px;}
.padd18{padding:18px 0px;}
.padd24{padding:24px 0px;}
.padd30{padding:30px 0px;}
.padd42{padding:42px 0px;}
.padd64{padding:64px 0px;}
.padd72{padding:72px 0px;}

.space12{padding:0px 12px;}
.space24{padding:0px 24px;}
.space42{padding:0px 42px;}
.space64{padding:0px 64px;}

.padding12{padding:12px;}
.padding14{padding:14px;}
.padding18{padding:18px;}
.padding24{padding:24px;}
.padding32{padding:32px;}
.padding42{padding:42px;}

/*============ LINE HEIGHT ===============*/
.line12{line-height:12px;}
.line14{line-height:14px;}
.line16{line-height:16px;}
.line18{line-height:18px;}
.line20{line-height:20px;}
.line24{line-height:24px;}
.line30{line-height:30px;}
.line34{line-height:34px;}
.line40{line-height:40px;}

/*============ COLOR ===============*/
.color-white{color:#fff !important;}
.color-black{color:#000;}
.color-grey{color:grey;}
.color-blue{color:#16bacf;}
.color-red{color:#f7665f;}
.color-orange{color:#ee8031;}
.color-dark-blue{color:#000c20;}
.color-mid-blue{color:#1c165c;}
.color-theme{color:#17354f;}
.color-theme-2{color:#ef425a;}

/*============ ALIGNMENT ===========*/
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.align-justify{text-align:justify;}
.block{display:block;}
.inline{display:inline-block;}

/*============ WEIGHT ===========*/
.bold{font-weight:bold;}
.normal{font-weight:normal !important;}
.italic{font-weight:italic;}

/*============ FONT SIZE ===========*/
.font14{font-size:14px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font21{font-size:21px;}
.font28{font-size:28px;}
.font32{font-size:32px;}
.font42{font-size:42px;}
.font72{font-size:72px;}
.font92{font-size:92px;}
.font112{font-size:112px;}

/*============ HEADERS ===========*/
.head1{font-size:72px; font-family:arial, sans-serif;}
.head2{font-size:64px; font-family:arial, sans-serif;}
.head3{font-size:42px; font-family:arial, sans-serif;}
.head4{font-size:24px; font-family:arial, sans-serif;}

/*============ FONT FAMILY ===============*/
.font-type-teko{font-family:'Teko', sans-serif;}

/*============ TEXT TRANSFORM ===========*/
.upper{text-transform:uppercase;}
.capital{text-transform:capitalize;}

.overlay-text{height:100vh; position:relative; z-index:99999;}

/*============ BUTTONS ===========*/
.btn{padding:12px 24px; text-decoration:none; border:none; text-transform:uppercase; cursor:pointer; transition:0.42s;} .btn:hover{background:#000c20; color:#fff;}
.btn-error{background:#fc4438; color:#fff;}
.btn-info{background:#009ddc; color:#fff;}
.btn-orange{background:#ee8031; color:#fff;}
.btn-green{background:#22975e; color:#fff;}
.btn-white{background:#fff; color:#000;}
.btn-theme{background:#17354f; color: #fff;}

/*=========== DROP DOWN ===========*/
.account-opt{background:#fff; width:100%; height:100vh; position:fixed; z-index:9999999; display:none;}
.close-acc{float:right; font-size:32px; color:#222; cursor:pointer; padding:24px;}

/*================ SOCIAL MEDIA ===============*/
.social-link{padding:14px 0px !important;} .social-link a{font-size:24px; padding:7px;}

.floater{position:fixed; z-index:99999; top:40%; right:-40px; color:#fff; transition:0.32s;} .floater:hover{right:0px;}
.floater div{position:absolute; right:0px; transition:0.32s;}
.floater a{color:#fff; padding:0px;}
.wp{background:#075e54; padding:12px; top:96px;} .ig{background:#ed8128; padding:12px;} .fb{background:#395693; padding:12px 10.5px; top:48px;} .ph{background:#222; padding:12px 10.5px; top:142px;}
.wp:hover{padding-right:24px;} .ig:hover{padding-right:24px;} .fb:hover{padding-right:24px;} .ph:hover{padding-right:24px;}

/*=========== GRAIDENT ===========*/
.overlay{background-image: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)); position:absolute; top:0px; left:0px; width:100%; height:100vh; z-index:99;} /*rgba(7,65,102,1), rgba(7,65,102,0)*/
.overlay-1{background-image: linear-gradient(to bottom, rgba(7,65,102,1), rgba(0,157,220,0.2)); position:absolute; width:100%; height:100vh; z-index:20;}

/*=========== BACKGROUND ===========*/
.teal{background:teal;}
.blue{background:#009ddc;}
.gray{background:#222222;}
.lightgrey{background:#f9f9f9;}
.white{background:#fff;}
.red{background:#f7665f;}
.green{background:#22975e;}
.orange{background:orange;}

/* =========== CONTACT ==============*/
.form-field{width:100%; padding:2px 0px;} .form-field div{padding:4px 0px;} .form-field input, .form-field select, .form-field textarea{width:100%; max-width:100%; min-width:100%;}
.form-field input[type="checkbox"]{max-height:16px !important; max-width:16px !important; height:16px !important; width:16px !important; display:inline !important;}

.quotation{background:#f5f5f5; margin-right:8%; width:45%; border-radius:12px;}

/*=========== LIST STYLES ============*/
.list{}
.list ul{list-style:none; padding:0px; margin:0px; width:100%;}

.list-1 li{display:inline-block; width:33.33%; overflow:hidden; text-align:center; padding:0px; float:left;}
.list-1 li div{width:100%; padding:0px;} .list-1 li div div{height: auto;}
.list-1 i{color:#0f1b1c;}
/*.list-1 li img{width:100%; height:100%; transform:scale(4); opacity:0; transition:4s;}*/

.list-2 li{display:block; width:100%; height:190px; font-family:arial !important; padding:12px 0px; border-bottom:1px solid #222222;}
.list-2 li div{width:100%; height:100%; padding:12px 0px;}
.list-2 li div section img{height:150px;} .list-2 p{font-family:arial !important; font-size:18px;}

.list-3 li{display:inline-block; width:25%; height:420px; overflow:hidden;}
.list-3 li div{width:95%; height:95%; border:1px solid #ddd; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; transition:0.32s;  
	background-image: linear-gradient(to left,
                                      transparent,
                                      transparent 50%,
                                      #11203d 50%,
                                      #11203d);
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
}
.list-3 li div img{width:100%;}
.list-3 li div p{vertical-align:top; padding:0px 16px; font-size:12px; font-family:arial; text-transform:uppercase;}
.list-3 li div section, .list-3 li div i{transition:0.42s;}
.list-3 li div:hover{background-position: 0 0;}
.list-3 li div:hover section, .list-3 li div:hover i{color:#fff !important;}

.list-4 li{display:inline-block; width:240px; height:auto; overflow:hidden; vertical-align:top;}
.list-4 li div{width:98%; height:auto; margin:auto; overflow:hidden; text-align:center; background:#fff;}
.list-4 li div img{width:100%; height:210px; transition:0.32s;}
.list-4 li article{text-align:center; width:240px; margin:auto; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.list-4 li a{text-decoration:none; color:#000; font-size:18px; padding:18px 0px; width:350px;}
.list-4 li a:hover img{transform:scale(1.05); opacity:0.7;}

.list-5 li{display:inline-block; width:240px; height:310px; overflow:hidden; vertical-align:top;}
.list-5 li div{width:98%; height:300px; margin:auto; overflow:hidden; text-align:center; background:#fff; transition:.32s;}
.list-5 li div img{width:100%; height:210px;}
.list-5 li article{text-align:center; width:240px; margin:auto; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
.list-5 li a{text-decoration:none; color:#000; font-size:18px; padding:18px 0px; width:350px;}
.list-5 li div div{opacity:0; position:relative; margin-top:-305px; z-index:9999; width:100%; height:100%; background:#fe4e3f; color:#fff; transition:0.32s;}
.list-5 li div div section{padding:7px;}
.list-5 li:hover div div{opacity:1; transform: rotateY(180deg);}
.list-5 li:hover div{transform: rotateY(180deg);}

.list-6{padding:12px 0px; width:100%;}
.list-6 ul{list-style:none; margin:0px; padding:0px;}
.list-6 li{display:inline-block; padding:12px; width:22%;}
.list-6 li div{width:100%; height:250px; border:1px solid #ddd; overflow:hidden !important; transition:0.64s;}
.list-6 li section{background:#ddd; width:100%; padding:12px 1px; font-size:14px; letter-spacing:1px; text-transform:uppercase; text-align:left;}
.list-6 li section article{margin:auto; width:80%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;}
.list-6 li img{width:100%; height:250px; transition:0.75s;}
.list-6 a{width:100%; text-decoration:none; color:#333333;}

.list-7{width:100%; height:auto;}
.list-7 div{display:inline-block; width:260px; height:260px; vertical-align:top;}
.list-7 div div{margin:auto; height:250px; width:250px; color:#fff; text-align:center;}

.list-6 a:hover>div img{transform: scale(1.5);}

.desktop{display:block;} .mobile{display:none;}
.home-img{height:550px;}

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

  #contact{display:none;}
  #footer div{width:100%; text-align:center;}

  .home-img{height:450px;}
  .desktop{display:none;} .mobile{display:block;}
  .content-2{width:90% !important; margin:auto;}
  .banner3{height:250px;}

  .left, .right{clear:both; width:100%;}
  .left img, .right img{width:100%; height:auto;}

  .list-1 li, .list-3 li{display:block; width:100%;}

  /*============ WIDTH ===========*/
  .half, .quart, .percent5, .percent10, .percent20, .percent25, .percent30, .percent35, .percent40, .percent48, .percent50, .percent60, .percent70, .percent80, .percent90, .percent95{width:100%;}

  .quotation{margin:auto; clear:both; width:85%; padding:24px;}
}