@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap');
img, object, iframe {max-width: 100%}
a, a:hover {text-decoration: none; outline: 0; color: #041B2D}
a {}
a:hover {}
/*:focus {outline: 0 !important}*/

p {margin-bottom: 18px;}

img, iframe, object {max-width: 100%}

html {font-size: 62.5%;}
body {font-size: 14px; line-height: 1.6; overflow-x: hidden; color: #041B2D; font-family: 'Open Sans', sans-serif; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600}
h1, .h1 { font-size: 4.8rem; font-weight: 600; line-height: 1.1; margin-bottom: 3rem; font-weight: 600}
h2, .h2 { font-size: 3.2rem}
h3, .h3 { font-size: 2.5rem}
h4, .h4 { font-size: 1.8rem}

.wrap {width: 100%; max-width: 1400px; margin: 0 auto;}
.container { width:100%; max-width: 1440px !important}

.homeHeader { position: relative; padding-top: 15px; padding-bottom: 15px}
.greyBack {position: relative}
.greyBack::before { content: ""; display: block; height: 100%; background-color: rgba(250,250,250,1.00); left: 25%; top: 0; right: 0; bottom: 0; position: absolute; z-index: -1}
.dotBack { background: url("../images/back-dot.png");}

.navbar-light .navbar-nav .nav-link {color:#041B2D; font-weight: 600 }
.Btn-new { background-color: #4ADEDE; padding: 7px 9px; color: #fff; font-weight: 600; border-radius: 3px;}

.headerDivB { padding:20px 10px; position: relative }
.whiteBlnk {background-color: #fff; padding: 25px; position: absolute; bottom: 0; left: 0; width: 100%; z-index: 10}
.whiteBack { background-color: #fff;}

.myTopLine {position: relative}
.myTopLine::before { content: ""; position: absolute; top:0; left:0; width: 46px; background-color: #4ADEDE; height: 2px; overflow: hidden;}
.moreClass {font-weight: 600}

.SliderImgStyle {background: linear-gradient(to right, #1CA7EC, #4ADEDE); padding: 3rem; padding-right: 0; border-top-left-radius: 50%; border-bottom-left-radius: 50%;}
.SliderImgStyle img { width: 100%; height: 100%; object-fit: cover;  border-top-left-radius: 50%; border-bottom-left-radius: 50%;}
/*.SliderImgStyle div::after {content: ""; background-color: rgba(4,27,45,0.40); width: 99%; height: 100%; position: absolute; top: 0; left: 1%; border-top-left-radius: 50%; border-bottom-left-radius: 50%;}*/

.carousel-indicators li {width: 7px; height: 7px; border-radius: 50%; border: 1px solid #fff; box-shadow: 0px 0px 1px rgba(0,0,0,0.40); opacity: 1.0 }
.carousel-indicators li.active {border: 1px solid #4ADEDE; background-color: transparent}

.headerDivB .carousel-inner {z-index: 15}
.headerDivB .carousel-indicators { bottom: auto; left: auto; right: 20px; top: 50%; -ms-flex-direction: column!important; flex-direction: column!important; margin: 0 !important;  transform: translateY(-50%); z-index: 20}
.headerDivB .carousel-indicators li {margin-bottom: 12px; margin-top: 0; }

.OIconBackWht { background: url("../images/orange-icon-back.png") no-repeat 0 0 /*#fff*/; background-size: contain}
.prdHDiv {padding-top: 50px; padding-bottom: 50px;}

.PrdListBx, .srvListBx {padding: 20px 0; margin: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "."; grid-gap: 20px}
.PrdListBx li{padding: 12px; margin: 0; list-style-type: none; box-shadow: 0 0 3px rgba(0,0,0,0.20); border-radius: 5px; background-color: #fff; border: 4px solid transparent;}
.PrdListBx li:hover {border: 4px solid #4adede; transition: 0.5s ease;}

.PrdListBx-2 {padding: 20px 0; margin: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "."; grid-gap: 3.5rem}
.PrdListBx-2 li{padding: 30px; margin: 0; list-style-type: none; box-shadow: 0 0 3px rgba(0,0,0,0.20); border-radius: 3px; background-color: #fff; border: 5px solid transparent;}
.PrdListBx-2 li:hover {border: 5px solid #4adede; transition: 0.5s ease;}
.PrdListBx-2 .col-12 img {width: 100%; object-fit: cover;}

.listPort li{padding: 0; margin: 0; list-style-type: none;  box-shadow: unset;background-color: unset;  border-radius: 3px; border: 5px solid transparent; position: relative;}
.listPort li:hover {border: 5px solid #4adede; transition: 0.5s ease;}
.listPort img {border-radius: 3px; filter: brightness(0.60); box-shadow: 0 0 3px rgba(0,0,0,0.20);}
.absPort {position: absolute; left: 4rem; right: 4rem; bottom: 4rem; color: white; display: block;}
.absPort-1 {position: absolute; left: 2rem; bottom: 2rem; color: white; display: block;}
.listPort .newsDesc p.small {margin-bottom: 10px;}
.listPort .newsDesc p.readMore {font-size: 13px; margin-bottom: 0}
.listPort .absPort h4 {font-size: 14px; line-height: 22px; margin-bottom: 10px;}
.listPort .absPort-1 h4 {font-size: 14px; line-height: 22px; margin-bottom: 0;}
.listPort .newsDesc p.readMore img {margin-left: 15px;}
.PortfolioPage .main-icon {/*margin-bottom: 0;*/ margin-top: 5.5rem}

.srvListBx li{padding: 12px; margin: 0; list-style-type: none; /* box-shadow: 0 0 3px rgba(0,0,0,0.20);background-color: #fff;*/  border-radius: 3px; border: 5px solid transparent;}
.srvListBx li:hover {border: 5px solid #4adede; transition: 0.5s ease;}
/*.srvListBx li:hover {border: 3px solid #4adede; padding: 14px 17px; border-radius: 3px;}*/
.srvListBx img {border-radius: 3px;}

.CrtListBx li{/*padding: 12px;*/ margin: 0; list-style-type: none; /* box-shadow: 0 0 3px rgba(0,0,0,0.20);background-color: #fff;*/  border-radius: 3px; border: 5px solid transparent;}
.CrtListBx li:hover {border: 5px solid #4adede; transition: 0.5s ease;}
.CrtListBx .crtTitle {padding-top: 2rem; padding-left: 4rem}
.CrtListBx .crtTitle h4 {font-size: 1.5rem; font-weight: 400; line-height: 22px;}
.CrtListBx .crtBxImg {height: 200px; min-height: 200px}
.CrtListBx .crtBxImg img {height: 100%; min-height: 100%; object-fit: cover; width: 100%;}

.modal-service .modal-body {padding: 0rem 3rem 3rem 3rem}
.modal-service .modal-body p,
.modal-service .modal-body span {font-size: 12px;}
/*.modal-service .modal-body img:nth-child(1) {height: 150px; min-height: 150px; width: 100%; object-fit: cover;}*/
.modal-service .close {font-size: 2.5rem !important; font-weight: 400 !important;}
.modal-service p {font-size: 14px !important; line-height: 24px}
.modal-dialog {max-width: 750px !important;}
.custom-scrollbar-js, .custom-scrollbar-css {height: 600px !important;}

.srvListBx .relativeBox {position: relative;}
.relativeBox img.cvrService {width: 100%; object-fit: cover;}
.srvListBx .absoluteBox {position: absolute; top: -90px; left: 0px; padding: 25px; width: auto;}

.shadow1 { box-shadow: 0 0 3px rgba(0,0,0,0.20);}
.PortFolioDivH { padding-bottom: 25px}
.PortFolioDivH .carousel-indicators{bottom: 20px;}
.PortFolioDivH .carousel-indicators li{margin-left: 5px; margin-right: 5px;}
.PortFolioDivH  .carousel-inner{box-shadow: 1px 1px 3px rgba(0,0,0,0.30); border-radius: 3px}
.portHomeImg {}
.padd-1 {padding-top: 50px; padding-bottom: 50px;}

.FootDiv { padding: 3rem 0}
.botLogoNav, .copyright { padding-bottom:3rem; text-align: center }
.bot-menu-icon {}

.copyright { color: #B9B9B9; font-size: 12px; border-top: 2px dashed rgba(185,185,185,0.15); padding-top: 25px;}

.scroll-top {width: 45px; height: 45px; position: fixed; bottom: 20px; right: 20px; display: none; background-color: transparent; padding: 0; border: 0; cursor: pointer}
.scroll-top:hover, .scroll-top:active {}
.scroll-top:not(:disabled):not(.disabled).active, .scroll-top:not(:disabled):not(.disabled):active, .show>.scroll-top.dropdown-toggle {}
.scroll-top:not(:disabled):not(.disabled).active:focus, .scroll-top:not(:disabled):not(.disabled):active:focus, .show>.scroll-top.dropdown-toggle:focus, .scroll-top.focus, .scroll-top:focus {}

.drpmenuBot {padding: 14px 8px;  font-size: 11px; max-width: 265px;  box-shadow: 1px 1px 3px rgba(0,0,0,0.35); background-color: #fff}
.drpmenuBot a { display: inline-block; max-width: 25%; padding: 3px}

.bot-menu-icon .dropdown-menu {margin-bottom: 20px; border: 0; background-color: transparent}
.ardiv {position: relative; width: 100%; text-align: right}
.arrow-down { position: absolute; bottom: -10px; right: 25px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; 
  border-top: 10px solid rgba(0,0,0,0.15);}

.InnerPage .HeaderInn .dotBack{ background: none}
.InnerPage .HeaderInn .homeHeader {padding-bottom: 15px !important;}
.InnerPage .HeaderInn .greyBack::before {background-color: #fff}
.AbouPage {}

.HeaderImage {position: relative;}
.HeaderImage img {min-height: 180px; width: 100%; object-fit: cover}
.HeaderImage::after {content: ""; width: 100%; height: 100%; left: 0; top: 0; position: absolute; z-index: 10; background: rgb(4,27,45);
background: linear-gradient(180deg, rgba(4,27,45,0) 0%, rgba(4,27,45,1) 100%);}
.ImgTextHead {position: absolute; width: 100%; bottom: 0; left: 0; color: #fff; z-index: 15; font-weight: 700}

.wrapInn ul { margin-bottom: 25px;}
.wrapInn ul li {margin-bottom: 8px;}
.wrapInn ul.NoBul {padding: 0; margin: 0 0 25px}
.wrapInn ul.NoBul li{padding: 0; margin: 0 0 3px; list-style-type: none}

.otheimageB {background: url("../images/inner-right-orange.png") no-repeat right top; background-size: auto 100%;}

.imageDiv { height: 100%; position: relative}
.imageDiv img {width: 100%; height: 100%; object-fit: cover}
.imgBkHover::after { content: ""; width: 100%; height: 100%; left: 0; top: 0; position: absolute; background-color: rgba(4,27,45,0.40)}

.pt-6 {padding-top: 3rem !important}

.shadow2 {box-shadow: 0 3px 6px rgba(0,0,0,0.16)}

/*== FORM CONTACT ==*/
.btn-SendMsg {background: #4adede; font-weight: bold; color: white}
.btn-SendMsg:hover {color: white}
.btn-SendMsg:focus {box-shadow: 0 0 0 .2rem #c8f5f5;}

.form-contact .form-control {border: none; border-bottom: 1px solid #e2e2e2; border-radius: 0; padding: 1.8rem 0; font-size: 12px;}
.form-contact .form-control:focus {box-shadow: none;}
.form-contact .form-control::placeholder {font-weight: lighter; color: #aaaaaa; font-size: 12px;}
.modal-formContact h5{font-weight: 600}
.modal-formContact .modal-header {border-bottom: none; padding: 3rem 3rem 0 3rem}
.modal-formContact .close {font-size: 2.5rem}
.p-3r {padding: 3rem}
.mt-25r {margin-top: 2.5rem}

.infoContact ul {padding: 8rem 4rem; margin-bottom: 0;}
.infoContact li {list-style: none;}
.infoContact .btn-SendMsg {padding: 10px; font-size: 14px}
.infoContact .col-md-4 {box-shadow: -1px 0px 3px 1px rgba(227,227,227,1);}
.infoContact .col-md-7 {box-shadow: 1px 0px 3px 1px rgba(227,227,227,1);}

/*ICON WA, MORE*/
.main-icon {position: relative; display: block}
.main-icon, .minTop {margin-bottom: 5.5rem; left: 7px}
.bg-pulse,
.box-icon {position: absolute; width: 35px; height: 35px; border-radius: 100%;}
.bg-pulse {animation: pulse 1.2s ease infinite; background: #4adede;}
.box-icon {display: flex; justify-content: center; align-items: center; position: absolute; z-index: 99; border: none; background: #4adede; background-size: 18px; cursor: pointer; outline: none;}
.box-icon i {position: absolute; color: #FFF; font-size: 20px;}

@keyframes pulse {
  0% {transform: scale(1, 1);}
  50% {opacity: 0.3;}
  100% {transform: scale(1.5); opacity: 0;}
}
.main-icon p {position: absolute; top: 7px; left: 45px;}

@media (max-width: 1199px) { 
	.wrap section, .wrap footer{padding: 0 15px}
	.Wrap75 {padding-left: 15px; padding-right: 15px;}
	.Wrap150 {padding-left: 30px; padding-right: 30px;}
	.wrap .WrapPad{padding-left: 15px; padding-right: 15px;}
	.WrapPadOther{padding-left: 15px; padding-right: 15px;}
}
@media (max-width: 767px) {
	.greyBack::before {left: 35%;}
	.otheimageB {background-size: 50% auto; background-position: right 10%}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { 
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.PrdListBx, .srvListBx {grid-template-columns: 1fr 1fr 1fr; grid-template-areas: ". . ."; grid-gap: 25px}
	.PrdListBx-2 {grid-template-columns: repeat(2, 1fr); grid-gap: 3.5rem}
	.fnt-size26 {font-size: 2.2rem}
	.pt-6 {padding-top: 6rem !important}
	.pb-6{padding-bottom: 100px;}
	.infoContact {padding-left: 15px}
}
/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) { 
	.botLogoNav .col-lg-6:first-child, .copyright .col-lg-6:first-child { text-align: left}
	.botLogoNav .col-lg-6:last-child, .copyright .col-lg-6:last-child { text-align: right}	
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
	.navbar-expand-lg .navbar-nav .nav-link {padding-right: 1.25rem; padding-left: 1.25rem;}
	.wrap .WrapPad{padding-left: 75px; padding-right: 75px;}
	.wrap .WrapPad2 {padding-left: 150px; padding-right: 0}
	.WrapPadOther {padding-left: 150px; padding-right: 0}
	.wrap .WrapPad3{padding-left: 100px; padding-right: 100px;}
	.headerDivB {/*padding-left: 75px; padding-right: 75px;*/}
	
	.Wrap75 {padding-left: 75px; padding-right: 75px;}
	.Wrap150 {padding-left: 150px; padding-right: 150px;}
	.prdHDiv {padding-top: 150px; padding-bottom: 150px;}
	
	.SliderImgStyle {padding: 11rem; padding-left: 13rem; padding-right: 0;}
	.whiteBlnk { padding: 40px 25px; left: -150px; width: calc(100% + 150px);}
	
	.PrdListBx li,  .srvListBx li {padding: 17px 20px;}
	.PrdListBx-2 li {padding: 35px;}
	.listPort li {padding: unset;}
	.CrtListBx li {padding: unset;}
	.OIconBackWht {margin-left: -75px; margin-right: -75px;}
	
	.more-padd { padding-bottom: 250px;}
	.more-padd-mrg-less { margin-top: -220px;}
	
	.padd-1 {padding-top: 150px; padding-bottom: 150px;}
	.bot-menu-icon .dropdown-menu {margin-left: -36%;}

	.pt-150 {padding-top: 100px;}
	.py-150 {padding: 100px 0px;}
	.px-75 {}
	.posiAbs {position: absolute; top: -180px; left: 15px;}

}

@media all and (-ms-high-contrast:none) {
  .PrdListBx, .srvListBx {display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; -ms-grid-rows: 1fr;}
  .PrdListBx-2 {display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr; -ms-grid-rows: 1fr;}
}