/*CSS*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,500;0,600;0,700;1,300;1,400&display=swap');

html{scroll-behavior: smooth;}
body{margin:0; padding:0px; font-family: 'Poppins', 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-image: linear-gradient(to bottom, rgba(6, 3, 21,0.5), rgba(6, 3, 21,0.5)),url('../images/map.png'); background-size:cover;} #footer a{text-decoration:none; color:#fff; transition:0.32s;}
#footer a:hover{color:#1bbbb4; padding-left:7px;}

/*==================== SLIDESHOW  ====================*/
#banner{display:block; width:100%; height:100vh; margin:auto;}
#bannerContainer{display:block; width:100%; height:100%;}
#prev{background-image: url('../images/left.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; left:0px; height:100%; width:100px; position:absolute; z-index: 9999; cursor: pointer; opacity:.9; transition:0.64s;}
#next{background-image: url('../images/right.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; right:0px; height:100%; width:100px; position:absolute; z-index: 9999; cursor: pointer; opacity:.9; transition:0.64s;}
#slider{display:block; height:100vh; width:100%; position:absolute; overflow:hidden;}
#slider .slides{background-size:cover; height:100vh; width:100%;}
#bannerContainer section{position:absolute; margin-left:15%; margin-top:10%; padding:0px; color:#fff; text-align:left; z-index:999;}
#slider section{position:absolute; width:350px; left:3%; top:8%; background:rgba(0,0,0,0.5); padding:24px; color:#fff; font-weight:bold; font-family:arial; z-index:99999;}
#bannerContainer section p{margin:0; padding:0px;}

/*============ 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:40%; height:100%; margin-left:5%; margin-top:0%; padding:0px 24px; background:rgba(0, 0, 0, 0.65); color:#fff; font-weight:bold; font-family:arial; z-index:9999;}
#banner-still section div{display:flex;}

.banner3{position:relative; height:200px; 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%; color:#fff;}

/*============== NAVIGATIONS ============*/
#contact{padding:10px 0px; background:#000c20; border-bottom:1px solid #2d2d2d; color:#6f828f;}
#navigation{width:100%; padding:0px; transition:0.75s;}
#logo{display:inline-block; width:20%; font-family:'Poppins', tahoma, arial; font-size:32px; color:#fff; cursor:pointer;} 
#logo img{height:84px; padding:6px 0px; transition:0.32s;}
#links{}
#links a{text-decoration:none; padding:7px; font-weight:400; border-top:2px transparent; color:#555; font-size:16px; transition:0.15s;}
#links a:hover{color:#1bbbb4; border-top:#1bbbb4 solid;}

.logo img{height:66px; padding-top:4px; transition:0.32s;}

/*=========== MOBILE NAV =========== */
#mbmenu{width:100%; height:100%; 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:12px 0px; border-bottom:1px solid #eee;}
#mbmenu li a{text-decoration:none; border:none; width:100%; color:#fff; text-transform:normal; font-family:inherit, arial; text-align:left; font-size:18px; transition:0.64s;}
#mbmenu li a:hover{color:#fff; background:teal;}

/*============= CLASSES =================*/
.content-1{width:100%; margin:auto;}
.content-2{margin:auto; width:80%;}
.content-3{margin:auto; width:70%;}
.content-4{width:90%; margin:auto;}

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

.perma-left{float:left;}
.perma-right{float:right;}

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

.perma-percent5{width:5%;}
.perma-percent10{width:10%;}
.perma-percent20{width:20%;}
.perma-percent25{width:25%;}
.perma-percent30{width:30%;}
.perma-percent35{width:35%;}
.perma-percent40{width:40%;}
.perma-percent48{width:48%;}
.perma-percent50{width:50%;}
.perma-percent60{width:60%;}
.perma-percent70{width:70%;}
.perma-percent80{width:80%;}
.perma-percent90{width:90%;}
.perma-percent95{width:95%;}

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

.border-top-bottom-2{border-top:2px solid #1bbbb4; border-bottom:1px solid #1bbbb4;}
.border-top-2{border-top:2px solid #1bbbb4;}
.border-bottom-2{border-bottom:2px solid #1bbbb4;}
.border-left-2{border-left:2x solid #1bbbb4;}
.border-right-2{border-right:2px solid #1bbbb4;}

/*============ PADDING ===========*/
.padd7{padding:7px 0px;}
.padd12{padding:12px 0px;}
.padd14{padding:14px 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;}

.space6{padding:0px 6px;}
.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:#1bbbb4;}

/*============ ALIGNMENT ===========*/
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.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:'Poppins', 'Teko', sans-serif;}
.head2{font-size:64px; font-family:'Poppins', 'Teko', sans-serif;}
.head3{font-size:42px; font-family:'Poppins', 'Teko', sans-serif;}
.head4{font-size:24px; font-family:'Poppins', 'Teko', sans-serif;}

/*============ FONT FAMILY ===============*/
.font-type-teko{font-family:'Poppins', '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:#1bbbb4; color:#fff;}
.btn-dark-blue{background:#000c20; color:#fff;}

/*=========== DROP DOWN ===========*/
.account-opt{background:#fff; width:100%; height:100vh; overflow-y:auto; 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;}
.theme{background:#1bbbb4;}
.dark-blue{background-color: #060315 !important;}

/* =========== 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:'Poppins', 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:'Poppins', arial !important; font-size:18px;}

.list-3 li{display:inline-block; width:33%; height:350px; 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%,
                                      #ff5f13 50%,
                                      #ff5f13);
    background-position: 100% 0;
    background-size: 200% 100%;
    transition: all .25s ease-in;
}
.list-3 li div p{vertical-align:top; padding:0px 16px; font-size:12px; font-family:'Poppins', 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:33%; height:auto; overflow:hidden; vertical-align:top;}
.list-4 li div{width:90%; height:auto; margin:auto; overflow:hidden; background:#fff;}
.list-4 li div img{width:100%; height:200px; 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;}

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

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

  .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, .list-4 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;}

  #bannerContainer section span[style]{font-size: 24px !important; text-transform:uppercase;}
}