@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

body {font-family: "Roboto", sans-serif; color: #000; font-size: 16px; line-height: 24px;}
* {margin: 0; padding: 0; box-sizing: border-box;}

img {max-width: 100%;}
a {text-decoration: none;}

.container {width: 90%; margin: 0 auto;}
.container::after {content: ''; display: block; clear: both;}

/* BX Slider */
.bx-controls {text-align: right;}
.bx-controls a {display: inline-block; width: 50px; height: 50px; background-color: #04517d; color: #fff; margin: 0 4px; text-indent: 100px; overflow: hidden; background-position: center; background-size: 40% 40%; background-repeat: no-repeat;}
.bx-controls a.bx-prev {background-image: url(../images/Prev.png);}
.bx-controls a.bx-next {background-image: url(../images/Next.png);}
.bx-viewport {margin-bottom: 20px;}

.accordion .item .content {display: none;}

header {padding: 12px 0;}
header .logo {width: calc(300px - 4px); display: inline-block; vertical-align: top;}
header nav {width: calc(100% - 300px - 4px); display: inline-block; vertical-align: top; text-align: right; margin-top: 8px;}
header nav ul {display: block;}
header nav ul li {display: inline-block; position: relative;}
header nav ul li a {display: block; padding: 12px 20px; font-size: 16px; color: #38393a; border-bottom: 2px solid #fff;}
header nav ul li.active > a {border-bottom: 2px solid #000;}
header nav ul li a.call {background: #dd4753; color: #fff; border-radius: 6px;}

header nav ul li ul {position: absolute; top: 100%; /*left: 0;*/left: 50%; transform: translateX(-50%); text-align: left; min-width: 200px; background: #fff; border-radius: 12px; box-shadow: 0 0 4px rgba(0,0,0,.1); display: none;}
header nav ul li.active ul {display: block;}
header nav ul li ul li {display: block;}
header nav ul li ul li a {border-bottom: 0; font-size: 14px;}

.sec {padding: 100px 0;}
.sec h2 {font-size: 42px; font-weight: 600; margin-bottom: 42px; line-height: normal;}
.sec h3 {font-size: 32px; font-weight: 600; margin-bottom: 32px; line-height: normal;}
.sec h4 {font-size: 24px; font-weight: 600; margin-bottom: 24px; line-height: normal;}
.sec p, .sec ul, .sec ol {margin-bottom: 20px;}

.col2 .col {display: inline-block; width: calc(50% - 4px); vertical-align: top;}

.banner.sec {padding: 50px 0;}
.banner {text-align: left; background: url(../images/BannerBg.jpg) center no-repeat; background-size: cover; color: #fff;}
.banner .col2 .col {vertical-align: middle;}
.banner .col2 .col:nth-child(2) {text-align: right;}
.banner h1 {font-size: 50px; line-height: normal; font-weight: 600;}
.banner h2 {font-size: 32px; line-height: normal; margin: 20px 0 32px; font-weight: 600;}
.banner a {display: inline-block; padding: 12px 32px; border: 1px solid #fff; border-radius: 5px; color: #fff; }

.appAreas {text-align: center; background: #fafafa;}
.appAreas .appAreaSlider {padding-top: 32px;}
.appAreaSlider ul li {display: inline-block; width: 60px; text-align: center; font-weight: 600;}
.appAreaSlider ul li img {width: 100%; border-radius: 12px;}

.safeGaurd {background: #009b84; color: #fff; text-align: center; line-height: normal;}

.steps .head {text-align: center; margin-bottom: 40px;}
.steps .head h4 {color: #ff7900;}
.steps .stepsWrap h4 {color: #04517d;}
.stepsWrap .item {display: block; padding: 20px; background: #f9f9f9; border-radius: 12px; margin-bottom: 32px; transition: all ease-in-out .2s;}
.stepsWrap .item:hover {transform: scale(1.05,1.05); box-shadow: 0 0 8px rgba(0,0,0,.1);}
.stepsWrap .item .img {display: inline-block; vertical-align: middle; width: calc(40% - 4px);}
.stepsWrap .item .img img {width: 100%;}
.stepsWrap .item .txt {display: inline-block; vertical-align: middle; width: calc(100% - 40% - 4px - 32px); margin-left: 32px;}
.stepsWrap .item .txt .no {font-size: 14px; color: #009b84; font-weight: 600;}
.stepsWrap .item.item7 .txt {text-align: center; width: 100%;}
.stepsWrap .item7 .inneritem h5 {font-size: 20px; font-weight: 400;}

.interested.sec {padding: 60px 0;}
.interested {background: #70c7ba;}
.interested .head {text-align: center;}
.interested .head h2 {margin-bottom: 0;}
.interested .head h4 {color: #ff7900; margin-bottom: 0;}

.org {color: #ff7900;}
.green {color: #009b84;}

.txtr {text-align: right;}

.map iframe {width: 100%; height: 400px;}

footer {background: #2c2c2c; color: #c2c2c2; font-size: 14px;}
footer .nav {padding: 32px 0;}
footer nav {padding: 20px 0 0;}
footer nav h5 {font-size: 14px; padding: 6px 0;}
footer nav ul {display: block;}
footer nav ul li {display: inline-block; margin-right: 12px;}
footer a {color: inherit; padding: 4px 0; display: inline-block;}
footer .address a {font-size: 20px; display: inline-block; margin: 0 4px;}
footer .address p {margin-bottom: 20px;}
footer .copy {padding: 12px 0; text-align: center; font-size: 12px; background: #1e1e1e;}

.galPics ul {display: block;}
.galPics ul li {display: inline-block; width: calc(33.33% - 4px); vertical-align: top;}

.mediaLinks {position: fixed; top: 50%; right: 0; transform: translateY(-50%); width: 32px; padding: 4px; background: #fff; text-align: center; font-size: 24px; line-height: normal; color: #04517d; border-top-left-radius: 4px; border-bottom-left-radius: 4px; box-shadow: 0 0 8px rgba(0,0,0,.4);}
.mediaLinks a {color: #04517d; display: block; margin: 4px 0;}

@media only screen and (max-width: 1220px) {
    body {font-size: 14px;}
    .sec {padding: 60px 0;}
    .sec h2 {font-size: 32px; margin-bottom: 32px;}
    header nav ul li a {font-size: 14px;}
    .banner h1 {font-size: 42px;}
}
@media only screen and (max-width: 960px) {
    .col2 .col {width: 100%;}
    header nav {width: 100%; text-align: left; display: none;}
    header.open nav {display: block;}
    header nav ul li {display: block; margin-bottom: 2px;}
    header nav ul li a {background: #f1f1f1; border-radius: 6px;}
    .menuBtn {float: right; width: 30px; cursor: pointer; margin-top: 16px;}
    .menuBtn i, .menuBtn::before, .menuBtn::after {content: ''; display: block; height: 2px; background: #17b9a4;}
    .menuBtn i {margin: 8px 0;}
    header nav ul li ul {position: static; transform: none; margin: 4px 0 12px; background: #e7f8f6;}
    header nav ul li ul li a {background: #e7f8f6;}
    header nav ul li ul li a::before {content: '> '}
}
@media only screen and (max-width: 760px) {
    
}
@media only screen and (max-width: 620px) {
    
}