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

body {font-family: "Poppins", sans-serif; color: #605d77; 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 .bx-controls-direction a {display: inline-block; width: 50px; height: 50px; background-color: #0f4f99; color: #fff; margin: 0 4px; text-indent: 100px; overflow: hidden; background-position: center; background-size: 40% 40%; background-repeat: no-repeat; border-radius: 5px;}
.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;}

.callno {padding: 6px 0; background: #0f4f99; color: #e0e9f4; font-size: 14px;}
.callno a, .callno span {color: inherit; display: inline-block;}
.callno span {margin-left: 100px;}
.callno .contactInfo {display: inline-block; width: calc(100% - 120px - 4px); vertical-align: middle;}
.callno .contactInfo i {display: inline-block; margin-right: 6px;}
.callno .sociallnks {display: inline-block; width: calc(120px - 4px); vertical-align: middle; text-align: right;}
.callno .sociallnks a {display: inline-block; margin: 0 4px;}
.callno i {font-size: 18px; display: inline-block;;}

header {padding: 12px 0;}
header .logo {width: calc(300px - 4px); display: inline-block; vertical-align: top;}
header .logo a {display: inline-block;}
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.book > a {background: #0f4f99; color: #fff; border-radius: 5px;}
/*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: 40px; font-weight: 600; margin-bottom: 42px; color: #2e266d; line-height: normal;}
.sec h3 {font-size: 32px; font-weight: 600; margin-bottom: 32px; color: #2e266d; line-height: normal;}
.sec h4 {font-size: 28px; font-weight: 600; margin-bottom: 24px; color: #2e266d; line-height: normal;}
.sec h5 {font-size: 20px; font-weight: 600; margin-bottom: 20px; color: #2e266d; line-height: normal;}
.sec p, .sec ul, .sec ol {margin-bottom: 20px;}
.sec h2 p {font-size: 16px; color: #605d77; font-weight: 400;}

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

.sec.banner {padding: 0; position: relative;}
.banner {text-align: left; background: url(../images/Banner.jpg) center no-repeat; background-size: cover;}
.banner .txt {width: 50%; max-width: 500px;}
.banner .txt .cta {display: inline-block; background: #df0000; color: #fff; padding: 12px 32px; border-radius: 4px;}
.banner h1 {font-size: 42px; margin-bottom: 32px; font-weight: 700; line-height: normal; color: #0f4f99;}
.banner p {max-width: 900px; margin: 0 auto 32px;}
.banner ul li {position: relative;}
.banner ul li .container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.banner ul li .container .txt {max-width: 600px;}
.banner .bx-has-pager {position: absolute; bottom: 64px; width: 100%; text-align: center; z-index: 51;}
.banner .bx-has-pager .bx-pager-item {display: inline-block; margin: 0 4px;}
.banner .bx-has-pager .bx-pager-item a {display: block; width: 8px; height: 8px; background: #989ea5; text-indent: 100px; overflow: hidden; border-radius: 5px; transition: all ease-in-out .2s;}
.banner .bx-has-pager .bx-pager-item a.active {width: 28px; background: #0f4f99;}
.banner .bx-viewport {margin: 0;}

.ibanner {background: url(../images/Banner-1.jpg) center no-repeat; background-size: cover;}
.ibanner h1 {font-size: 42px; margin-bottom: 32px; font-weight: 700; line-height: normal; color: #0f4f99;}
.ibanner p {max-width: 900px; margin: 0 auto 32px;}
.ibanner .txt {width: 50%; max-width: 500px;}

.threebox .infotbl {display: table; width: 100%; margin-top: -50px; position: relative; z-index: 52;}
.threebox .infotbl .col {display: table-cell; width: 33.33%; color: #e0e9f4; padding: 32px; background: #0f4f99;}
.threebox .infotbl .col:nth-child(1) {background: #0172f4;}
.threebox .infotbl .col:nth-child(2) {background: #055fc7;}
.threebox .infotbl .col .icon {display: inline-block; width: calc(74px - 4px); vertical-align: top; font-size: 40px;}
.threebox .infotbl .col .txt {display: inline-block; width: calc(100% - 74px - 4px); vertical-align: top; font-size: 14px; font-weight: 400; margin-bottom: 12px; line-height: normal;}
.threebox .infotbl .col .txt h2 {font-size: 24px; font-weight: 400; margin-bottom: 12px;}
.threebox .infotbl .col .txt p {margin-bottom: 12px;}
.threebox .infotbl .emergency a {color: inherit; font-size: 24px; font-weight: 700;}
.threebox .infotbl .timetable a {color: inherit; font-size: 15px; font-weight: 700; text-decoration: underline;}

.welcome a { display: inline-block; background: #df0000; color: #fff; padding: 12px 32px; border-radius: 4px;}
.welcome p {margin-bottom: 40px;}

.team.about ul {display: block;}
.team.about ul li {display: block; margin-bottom: 32px;}
.team.about ul li .desig { margin-bottom: 20px;}
.team.about ul li p { margin-bottom: 12px;}
/*.team.about ul li {display: inline-block; width: calc(50% - 4px - 15px); margin-left: 30px;}
.team.about ul li:nth-child(2n+1) {margin-left: 0;}*/
.team ul li span {text-align: left; display: block;}
/*.team ul li img {margin-bottom: 12px;}*/
.team ul li span.name {font-size: 20px; font-weight: 600; color: #000;}
.team ul li span.desig {color: #2a13cd; font-size: 14px;}
.team ul li span.quali {color: #565656; font-size: 14px;}
.team ul li img {display: inline-block; width: calc(280px - 4px); vertical-align: middle;}
.team ul li .txt {display: inline-block; width: calc(100% - 280px - 4px); vertical-align: middle; padding-left: 20px;}
.teamSlider .bx-viewport {margin-bottom: 40px;}
.team p {margin-bottom: 40px; /*max-width: 600px;*/}
.teamSlider .bx-viewport a, .team ul li .item {display: block; padding: 12px; border: 2px solid #fff; transition: all ease-in-out .5s;}
.teamSlider .bx-viewport a {border: 2px solid #0f4f99; border-radius: 12px; box-shadow: 0 0 10px rgba(0,0,0,.4);}
.teamSlider .bx-controls .bx-controls-direction a.disabled {display: none;}

.peopleSays {/*text-align: center; background: #fafafa;*/}
.peopleSays .peopleSaySlider {padding-top: 32px;}
.peopleSaySlider ul li .intial {display: inline-block; width: 60px; line-height: 60px; text-align: center; background: #646464; color: #fff; font-size: 24px; border-radius: 32px;}
.peopleSaySlider ul li .txt {display: inline-block; width: calc(100% - 60px - 8px); vertical-align: top; text-align: left; padding-left: 20px;}
.peopleSaySlider ul li .txt h5 {font-size: 20px; margin-bottom: 4px;}
.peopleSaySlider ul li .txt p {margin-bottom: 4px;}
.peopleSaySlider ul li .txt .by {font-size: 14px; font-weight: 600; display: block;}

.txtr {text-align: right;}
.reachUs .col2 .col:nth-child(2) {padding-left: 5%;}
.reachUs p {margin-bottom: 20px;}
.reachUs .time {text-align: left;}
.reachUs .time p {margin-bottom: 0;}

.map.sec {padding-bottom: 0;}
.map iframe {width: 100%; height: 400px;}

footer {background: #0f4f99; color: #e8e8e8; font-size: 14px;}
footer a {color: #e8e8e8;}
footer nav {padding: 32px 0;}
footer nav h5 {font-size: 14px; padding: 6px 0;}
footer nav ul {display: block;}
footer nav ul li {display: block;}
footer nav ul li a {color: #93a3c1; padding: 4px 0; display: inline-block; font-weight: 500;}
footer nav ul li a:hover {color: #fff;}
footer .copy {padding: 12px 0; text-align: center; font-size: 12px; background: #012f65;}

.map iframe {width: 100%; height: 300px;}
.map.sec {padding-top: 0;}
.contact .ph {color: #2e266d; font-size: 24px;}
.contact .ph:hover {text-decoration: underline;}
.galSlider {width: 60%; margin: 0 auto;}
.galSlider ul li {background: #000;}
.galSlider ul li img {opacity: .5; transition: all ease-in-out .2s; float: left;}
.galSlider ul li::after {content: ''; display: block; clear: both;}
.galSlider ul li.active img {opacity: 1;}
.galSlider .bx-viewport {overflow: visible !important;}

.servicesTiles ul {display: block;}
.servicesTiles ul li {display: inline-block; width: calc(33.33% - 4px); vertical-align: top; margin-bottom: 20px; padding: 20px;}
.servicesTiles ul li a {display: block;}
.servicesTiles ul li img {width: 100%; border-radius: 12px;}
.servicesTiles ul li a span {color: #000; background: #f3f3f3; display: block; padding: 4px 12px; text-align: center; border-radius: 12px;}

@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: 32px; margin-bottom: 20px;}
    .ibanner h1 {font-size: 32px; margin-bottom: 20px;}
    .banner .icons li img {height: 80px;}
    .banner .txt {width: 100%;}
    .threebox .infotbl .col {padding: 24px;}
    .threebox .infotbl .col .icon {font-size: 32px; width: calc(54px - 4px);}
    .threebox .infotbl .col .txt {width: calc(100% - 54px - 4px);}
    .threebox .infotbl .col .txt h2 {font-size: 20px; margin-bottom: 8px;}
    .threebox .infotbl .emergency a {font-size: 18px;}
}
@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;}
    .whyus .col2 .col:nth-child(1) {padding-right: 0; margin-bottom: 20px;}
    .reachUs .col2 .col:nth-child(2) {padding-left: 0;}
    .reachUs .txtr {text-align: center;}
    .reachUs .time {margin-bottom: 32px;}
    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: '> '}

    .banner ul li .container {position: relative; padding: 100px 0; transform: none; top: auto; left: auto;}
    .banner ul li img {position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; width: auto; max-width: none;}
    .banner .txt {min-height: 222px;}

    .threebox .infotbl {display: block;}
    .threebox .infotbl .col {display: block; width: 100%;}
}
@media only screen and (max-width: 760px) {
    .banner h1 {font-size: 28px;}
    .ibanner h1 {font-size: 28px;}
    .banner .txt .cta {padding: 6px 12px;}
    .callno .contactInfo {width: 100%;}
    .callno .sociallnks {width: 100%;}
    .callno span {margin-left: 32px;}
}
@media only screen and (max-width: 620px) {
    .callno span {margin-left: 0; width: 100%;}
    
}