@import url(effect.css);

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
/* Fonts */

html { margin: 0; padding:0; overflow-x:hidden;}
body{
font-family: 'Bai Jamjuree', sans-serif; font-weight:normal; padding:0; color:var(--blue); font-weight:400; padding-right:0!important; overflow-x:hidden;
font-size:15px;
line-height:1.4;
}

/*	--------------------------------------------------
Global Reset & Standards
-------------------------------------------------- */

img{border:0;}

*{ box-sizing:border-box;
}
*:hover{
}

a{color:var(--brown); text-decoration:none;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-ms-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
}
a:hover{text-decoration:none; color:var(--blue);}

h1, h2, h3, h4, h5{margin:0 0 15px; padding:0; font-weight:400!important; font-family:'Marcellus';}

:root{--blue:#273656; --dark:#4674a4; --yellow:#4190d6;}

@keyframes wiggle {
0%{transform:rotate(0deg);}
80%{transform:rotate(0deg);}
85%{transform:rotate(5deg);}
95%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}


.container{width:1170px; max-width:95%;}


/* Header */
.header-area{position:static; display:block; float:left; width:100%; margin-top:0.5px; left:0; right:0; top:0; z-index:100; padding:0 15px; z-index:9999;}

#myHeader{margin:0; position:relative; z-index:100; float:left; width:100%; clear:both; z-index:9999; margin-bottom:0px;}
.logo{position:relative; display:block; text-align:center;}
/*.logo:before{ position:absolute; left:-50%; right:-10%; top:-5px; bottom:-20px; background:var(--dark); content:''; display:block; z-index:-1;  transform: skew(-45deg);
-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.2);
}*/
.logo img{height:65px; transition:all .2s ease-in-out; padding:0;}
#myHeader.sticky{position:fixed; left:0; right:0; top:0; margin-top:0; padding:0 2%; width:100%; background:#fff;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
}
#myHeader.sticky .logo img{height:55px;}

.callBox{ position:relative; padding-left:50px; color:#fff;}
.callBox i{position:absolute; left:0; font-size:42px; color:var(--blue);}
.callBox a{display:block;  font-weight:700; margin-bottom:0; line-height:1.1; color:#fff;}

ul.topBox{ margin:0; padding:0; list-style-type:none; background:var(--blue); overflow:hidden; /*padding:5px;*/ margin-bottom:5px; float:right;}
ul.topBox li{display:inline-block; padding: 0; margin:0 5px; position:relative;}
ul.topBox li a{ color:#fff; font-weight:600; position:relative; z-index:2; line-height:1;}
ul.topBox li:first-child a{background:var(--green); position:relative; top: 0; left: -5px; width:30px; line-height: 30px; display: block; text-align: center; height: 30px;  }
ul.topBox li i{color:#fff;}
ul.topBox li a:hover{color:var(--yellow);}
ul.topBox li:last-child:before{position:absolute; right:-100%; left:-10px; top:-30px; bottom:-30px; content:''; display:block; background:var(--yellow);}
ul.topBox li:last-child a:hover{color:var(--blue);}

.project-slider{position:relative; float:left; clear:both; width:100%; background:#fff; display:block; overflow:hidden;}
.project-slider h2{font-size:30px; margin-bottom:30px; font-weight:700; color:var(--blue);}
.project-slider .container{position:relative; bottom:0px;}
.project-slider .container .content{position:absolute; left:0; bottom:0;background:#fff; width:50%; padding:40px 50px 40px 0;}
.project-slider .container .content:before{position:absolute; left:-100%; right:100%; top:0; bottom:0; background:#fff; content:''; display:block;}
.project-slider .content a{display:inline-block; color:var(--blue); padding:12px; border:2px var(--blue) solid;font-weight:700; width:230px; text-align:center;}
.project-slider .content a:hover{background:var(--blue); color:#fff;}


.welcomeArea{display:block; overflow:hidden; clear:both; padding:60px 0; position:relative;}
.welcomeArea h3{ font-size:40px; font-weight:600; color:var(--dark); margin-bottom:0px;}
.welcomeArea h2{display:block; overflow:hidden; font-size:40px; color:var(--blue);}
.welcomeArea p{margin:0 auto 25px; font-size:16px; line-height:1.5;}
.welcomeArea a{display:inline-block; color:var(--blue); padding:12px; border:2px var(--blue) solid;font-weight:700; width:230px; text-align:center;}
.welcomeArea a:hover{background:var(--blue); color:#fff;}
.welcomeArea img{border-radius:50%; filter: drop-shadow(12px 11px 0px var(--yellow));}

.projectsArea{padding:0 0 60px; background:var(--dark) no-repeat center bottom url('../images/serviceBg.jpg') fixed; background-size:cover; background-blend-mode:overlay; display:block; overflow:hidden; clear:both; z-index:100; position:relative;}
.projectsArea:before{position:absolute; left:0; right:0; top:0; height:50%; content:''; display:block; background:#fff;}
.projectsArea h1{font-size:42px; text-align:center; margin-bottom:10px; font-weight:700;}
.projectsArea h1 + p{text-align:center; font-size:24px; margin-bottom:30px;}
.projectsArea > div{position:relative; z-index:5;}
.projectsArea .item{background:#fff; padding:20px;}
.projectsArea .owl-carousel .owl-nav button.owl-next, .projectsArea .owl-carousel .owl-nav button.owl-prev{padding:8px 14px!important; border-radius:50%; background:#fff;color:var(--dark);}
.projectsArea .owl-carousel .owl-nav button.owl-next:hover, .projectsArea .owl-carousel .owl-nav button.owl-prev:hover{background:var(--yellow)!important;}
.projectsArea img{width:100%; margin-bottom:15px;}
.projectsArea .item h4{font-size:18px; margin-bottom:10px;}
.projectsArea .item p{font-size:14px;}

.maintananceArea{padding:60px 0; display:block; overflow:hidden;}
.maintananceArea p{font-size:20px; margin-bottom:50px;}
.maintananceArea [class^="col"]{margin-bottom:30px;}
.maintananceArea [class^="col"] a img{max-width:100%; width:150px; border-radius:50%; margin-bottom:20px; outline:2px var(--yellow) dotted; outline-offset:5px; transition:all .2s ease-in-out;}
.maintananceArea [class^="col"] a:hover img{outline-offset:10px;}
.maintananceArea [class^="col"] span{display:block; overflow:hidden; clear:both; font-weight:700; margin-bottom:16px;}
.maintananceArea > div > a{display:inline-block; color:var(--blue); padding:12px; border:2px var(--blue) solid;font-weight:700; width:230px;}
.maintananceArea > div > a:hover{background:var(--blue); color:#fff;}


.testimonialsArea{ background:#333 url('../images/parallax-img-01.jpg') no-repeat center center fixed; background-size:cover; background-blend-mode:overlay; padding:100px 0 80px; position:relative;}
.testimonialsArea h2{color:#fff; margin-bottom:40px; font-size:48px; text-align:center;}

.newsBox [class^="col-"]{ position: relative; margin-bottom: 20px;}
.newsBox [class^="col-"] img{max-width:100%; width:120px; height: 120px; display: inline-block; position: absolute; top:25px; left:30px; border-radius:50%; margin-bottom:20px; outline:2px var(--yellow) dotted; outline-offset:5px; }
.newsBox [class^="col-"] > div{ display: inline-block; overflow:hidden; padding:0 20px 10px 160px; min-height:140px;  background:#fff;}
.newsBox [class^="col-"] > div h3{font-size:18px; margin:5px 0 15px; min-height:80px;}
.newsBox [class^="col-"] > div small{font-weight:600; font-size:12px; padding-top: 20px; display: block; color:var(--dark);}
.newsBox [class^="col-"] > div small i{margin-right:3px; position:relative; top:-1px;}
/*.owl-theme .owl-nav.disabled + .owl-dots {margin-top: 50px!important;}*/

.highlightArea{background:#fff;clear:both; overflow:hidden; padding:60px 0; position:relative; text-align:center;}
.highlightArea > div{position:relative; z-index:100;}
.highlightArea h4{display:block; clear:both; font-size:42px; color:var(--blue); margin-bottom:10px;}
.highlightArea h4 + p{font-size:20px; margin-bottom:30px;}
.highlightArea > div > a{display:inline-block; color:var(--blue); padding:12px; border:2px var(--blue) solid;font-weight:700; width:230px;}
.highlightArea > div > a:hover{background:var(--blue); color:#fff;}
.highlightArea > svg{position:absolute; bottom:-1px; left:0;right:0; width:100%; fill:var(--blue); z-index:5;}
.highlightArea .row{margin-bottom:30px;}
.highlightArea .row [class^="col-"]{position:relative; margin-bottom:20px;}
.highlightArea .row [class^="col-"] > div{text-align:left; border:1px #ddd solid; padding:25px 25px 10px; background:#fff; color:#222; border-radius:10px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;}
.highlightArea .row [class^="col-"] > div h5{margin-bottom:10px; color:#fff;}

.highlightArea [class^="col-"] > div > div{display:block; margin-bottom:5px; font-weight:700; color:#222;}
.highlightArea [class^="col-"] > div > strong{display:block; margin-bottom:15px; overflow:hidden; font-size:22px; font-weight:500;}
.highlightArea [class^="col-"] > div > strong i{font-size:15px; position:relative; top:-3px; margin-right:5px; color:var(--dark);}
.highlightArea [class^="col-"] > div span{width:80px; height:16px; display:inline-block; margin-left:5px; top:3px; position:relative; background:transparent url('../images/stars.png') no-repeat left top;}
.highlightArea [class^="col-"] > div span.star-4{background-position:left top -16px;}
.highlightArea [class^="col-"] > div span.star-3{background-position:left top -32px;}
.highlightArea [class^="col-"] > div span.star-2{background-position:left top -48px;}
.highlightArea [class^="col-"] > div span.star-1{background-position:left top -64px;}
.highlightArea [class^="col-"] > div > small{font-size:14px; color:#666; display:block; clear:both; margin-bottom:15px;}
.highlightArea [class^="col-"] > div > big{ display:flex; align-items: center; justify-content: space-between; width: 100%; overflow: hidden; padding:10px 0 0; border-top:1px #ddd solid; vertical-align:top;}
.highlightArea [class^="col-"] > div > big img{float:right;}


.referandearn{display:block; overflow:hidden; padding:30px 0 0; background:#eee; font-size:18px;}
.referandearn h3{font-size:36px;}
.referandearn p{margin-bottom:20px;}
.referandearn a{display:inline-block; color:#fff; padding:8px 30px; border:2px var(--blue) solid; background:var(--dark);}
.referandearn a:hover{background:var(--blue);}

.footerArea{background:var(--blue); padding:40px 0; display:block; color:#fff; overflow:hidden; clear:both;}
.footer-logo img{height:55px;}
.footerArea ul{margin:0; padding:0; list-style-type:none; text-transform:uppercase;}
.footerArea ul li{margin-bottom:8px;}
.footerArea ul li a{color:#fff; font-size:14px;}
.footerArea ul li a:hover{color:var(--light);}
.footerArea [class^="col-"]{position:relative;}
.footerArea [class^="col-"]:before{position:absolute; left:-30px; width:40px; top:0; bottom:0; border-left:2px #fff dotted; content:'';display:block;}
.footerArea [class^="col-"]:first-child:before{border:none;}
.footerArea [class^="col-"] h4{font-size:18px;  margin-bottom:15px; position:relative;}
.footerArea [class^="col-"] h4 i{position:absolute; left:-25px;}
.footerArea [class^="col-"] > a{display:block; clear:both; color:#fff; padding:3px 0; font-size:16px;}
.footerArea [class^="col-"] > a i{margin-right:5px;}
.footerArea [class^="col-"] > a:hover{color:var(--yellow);}

ul.social-links{margin:0; padding:5px 0; list-style-type:none; display:block; overflow:hidden; clear:both;}
ul.social-links li{display:inline-block; margin:0 2px;}
ul.social-links li a{text-align:center; color:var(--dark); display:block; border:1px var(--dark) solid; width:30px; height:30px; text-align:center; border-radius:5px;}
ul.social-links li a i{font-size:15px; line-height:30px;}
ul.social-links li a:hover{background:var(--yellow); color:#fff;}

.footerArea ul.social-links li a{color:#fff; border:1px #fff solid;}
.footerArea ul.social-links li a:hover{background:var(--yellow); color:#fff;}

.footerBottom{background:#fff; padding:15px; display:block; font-size:16px; position:relative;}
.footerBottom ul{ float:right; margin:0; padding:0; list-style-type:none;}
.footerBottom ul li{ display:inline-block;}
.footerBottom ul li a{ display:block; padding:0 8px; color:var(--dark); border-left:1px var(--dark) solid; line-height:1;}
.footerBottom ul li:first-child a{border:none;}
.footerBottom ul li a:hover{color:var(--blue);}




#scroll-icon {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:30px;
    height:30px;
    background-color:var(--blue);
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    z-index:99999;
}
#scroll-icon span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:7px solid transparent;
    border-bottom-color:#ffffff
}
#scroll-icon:hover {
    background-color:var(--dark);
    opacity:1;
    filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
}








/*------------------------------------*\
    Media Queries
\*------------------------------------*/

@media screen and (max-width: 1920px) and (min-width: 1600px){}


@media (max-width: 991px){
.logo img{margin-bottom:0; max-width:100%; transition:.5s ease-in-out;padding:10px 0;}
ul.topBox{padding:10px; border-radius:0; text-align:center; margin-bottom:-10px; position:relative; z-index:100;}
ul.topBox li:first-child{display:none;}
ul.topBox li{margin:0!important; width:50%; float:left;}
.header-area{margin:0; padding:0 0px;}
#myHeader.sticky{position:fixed; padding:0 15px 15px;}
#myHeader, .topBox{width:100%;}
#myHeader.sticky #menu-button{top:-45px!important;}

#main-nav{ background:var(--dark); padding: 0;}

.footerArea:before{top:50%; left:0%; }
.footerArea [class^="col-"] > div{display:block; overflow:hidden;}

.scheduleLesson h3{text-align:center; font-size:30px; margin-bottom:100px;}
.scheduleLesson .row [class^="col-"]:first-child{padding-right:15px;}
.scheduleLesson:before{bottom:50%; right:0;}
.scheduleLesson .row [class^="col-"]:last-child{padding-left: 15px; padding-top:80px; text-align:center;}
.scheduleLesson > img{top: 45%;}

.welcomeArea h2 {font-size: 36px;}

.serviceArea h2{font-size:36px;}
.serviceArea ul li{display:inline-block; margin:10px 5px;}

.footerArea [class^="col-"] h4 i{position:static;}
}

@media (max-width: 767px){
.header-area{margin-top:0.5px; background:#fff;}

.project-slider img{height:250px; object-fit:cover;}
.project-slider .container .content{ width:100%; padding:20px; position:relative; top:-80px; margin-bottom:-80px; text-align:center;}
.project-slider .container .content:before{display:none;}
.project-slider h2{font-size:18px; margin-bottom:15px;}

.welcomeArea{padding:30px 0; text-align:center;}
.welcomeArea h2{font-size:30px;}
.welcomeArea [class^="col-"]{margin-bottom:30px;}

.serviceArea h2 img{ display:none;}
.serviceArea [class^="col-"]:first-child{margin-bottom:25px;}
.serviceArea [class^="col-"] > div h4{font-size:22px;}
.serviceArea .row{margin-bottom:20px;}
.serviceArea .row:last-child{margin-bottom:0;}

.maintananceArea h2{font-size:28px;}

.testimonialsArea > div{text-align:center;}
.testimonialsArea h3{font-size:32px;}
.testimonialsArea .carousel-item{padding:30px;}
.testimonialsArea .carousel-item p{font-size:16px;}

.highlightArea h4, .highlightArea h4 strong{font-size: 30px; line-height:1.2; padding:5px 0 10px}
.highlightArea [class^="col-"]{margin-bottom:30px;}

.referandearn{text-align:center;}


.footerArea{ text-align:center;}
.footerArea [class^="col-"]{margin-bottom:20px;}
.footerArea ul{margin:10px 0;}

.footerBottom{text-align:center;}
.footerBottom ul{ text-align:center; display:block; float:none; padding-top:10px;}
}

@media (max-width: 500px){
}

@media (max-width: 360px){
}