body{margin: 0; padding: 0; font-family: 'Poppins', sans-serif;}
html {scroll-behavior: smooth; box-sizing: border-box;}
*{margin: 0; padding: 0;}
p{font-size: 16px;  letter-spacing: 0.5px;  text-align: justify; color: #565252; font-weight: 300; line-height: 25px; padding: 0; margin: 0;}

.tnb{padding: 70px 0;}
.pnm{padding: 0; margin: 0;}
.small-title {color: #0098da; font-size: 20px; font-weight: 600; position: relative; padding: 10px 0 0; letter-spacing: 0.5px; margin: 0; padding: 0;}
.big-title {color: #1a0b33; font-size: 40px; font-weight: 700; position: relative; padding: 10px 0; } 
.more_btn{background: linear-gradient(to right, #6c218c , #cc136a); color: #fff;  font-size: 18px; letter-spacing: 0.5px;  padding: 18px 60px; display: inline-block; margin: 30px 0 0; text-decoration: none; transition: 0.5s; animation-delay: 1s; animation-duration: 1s; font-weight: 600; border-radius: 30px; overflow: hidden; z-index: 1; text-decoration: none; box-shadow: 3px 4px 25px #c63a9580;}
.more_btn:before{content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, #05577b , #c12f7d); transition: 0.5s;z-index: -1;}
.more_btn:hover{color: #fff; text-decoration: none; transition: 0.5s;}
.more_btn:hover:before{left: 0; color: #fff; text-decoration: none; background: linear-gradient(to right, #c12f7d, #05577b)}

/*nav*/
.new-nav{padding: 0; margin: 0;}
.new-nav a{text-decoration: none; padding: 5px 0;}
.logo h2{font-size: 35px; font-weight: 700; color: #ec268f;}
.logo span{color: #0098da;}
.logo label{font-size: 18px; display: block; font-weight: 700; letter-spacing: 3.5px; text-align: right; margin: 0 0; text-transform: uppercase; color: #0098da;}
.new-nav ul li a{color: #fff; font-size: 16px; font-weight: 400; margin: 0px; letter-spacing: 0.5px; position: relative; line-height: 70px; padding: 10px 20px; transition: 0.5s;}
.new-nav ul li a:hover{text-decoration: none; color: #fff; background:linear-gradient(to right, #0098da , #094966, #0098da); border-radius: 10px; }
.app_btn{background: #441980; padding: 10px 20px; border-radius: 5px; border: 0; color: #fff; letter-spacing: 0.5px;
    font-weight: 500; font-size: 14px; margin: 0 0 0 15px; position: relative; z-index: 1; overflow: hidden;}
.app_btn:before{position: absolute; content: ''; width: 100%; height: 100%; background: #923d8d; bottom: -41px; left: 0; border-radius: 5px; z-index: -1; transition: 0.2s;  }   
.app_btn:hover:before{bottom: 0;} 
.logo img{width: 25%; max-width: 130px; padding: 0; position: relative; z-index: 1; margin: 0 10px 0 0;}

/*main-slider*/
.main-slider{position: relative; margin-top: -86px;} 
.bx-viewport{height: auto;}
.main-slider img{width: 100%;}
.slider-img{position: relative;}
.slider-img:before{position: absolute; content: ''; width: 100%; height: 100%; background: linear-gradient(to right, #051923e3 , #440627b8); left: 0; top: 0;}
.slider-text { position: absolute; top: 130px; left: 0; right: 0;  color: #fff;}
.slider-text h2 { margin: 10px 0; padding: 0; font-size: 50px; font-weight: 600; animation-delay: 1s; animation-duration: 1s; color: #ffffff;}
.slider-text h2 label{color: #34befb;}
.slider-text p { font-size: 14px; color: #545252; font-weight: 400; letter-spacing: 0.5px; padding: 0 50% 0 0; margin: 0; animation-delay: 1s; animation-duration: 1s;}
.slider-text .slider-btn { color: #fff; font-size: 16px; letter-spacing: 0.5px; padding: 13px 70px;
    display: inline-block; margin: 30px 0 0; text-decoration: none; border-radius: 35px; box-shadow: 0px 0px 18px #ffffff9e;transition: 0.5s; animation-delay: 1s; animation-duration: 1s; background: linear-gradient(to right, #3fb0e2 , #f32b96);}
.slider-text .slider-btn:hover{background: linear-gradient(to right, #c12f7d, #05577b );}
.slider-text .slider-btn a{text-decoration: none; color: #fff; font-size: 18px; font-weight: 400; letter-spacing: 0.5px;}
.slider-text span { letter-spacing: 0.5px; color: #e0e0e0; font-size: 14px; font-weight: 500; animation-delay: 1s; animation-duration: 1s;}    

/*top-three-text*/
.top-three{background: #add5f8 url(../images/bg-img.png) no-repeat top center; background-size: 100%;}
.top-three-text{padding: 15px; border: 2px solid #0949668a; position: relative; z-index: 2; background: #084865; border-radius: 22px;}
.top-three-text:hover .slider-btn-o{position: relative; box-shadow: 0px 20px 10px #00000047;transform: translateY(-3px); display: table; border-radius: 30px; transition: 0.5s;}
.top-three-text:before{position: absolute; content: ''; background: #ffffffeb; height:0%; width: 100%; top: 0; left: 0; border-radius: 20px;}
.top-three-text:hover:before{height: 100%; z-index: -1; transition: 0.5s;}
.top-three-text label{font-size: 16px; font-weight: 400; letter-spacing: 0.5px; color: #ffead7; position: relative; padding: 0 0px 0px 65px; transition: 0.5s;}
.top-three-text label:before{position: absolute; left: 0; top: 10px; background: #ffcb9e; content: ''; width: 50px; height: 2px;}
.top-three-text h3{font-size: 30px; display: table; font-weight: 600; color: #fff; margin: 0 0 20px;}

.top-three-text:hover label{background: #000;}
.top-three-text:hover h3{color: #000;}
.top-three-text:hover p{color: #000;}
.top-three-text p{color: #fff;}
.top-three-text .slider-btn-o{margin: 30px 0 0;}
.top-three-text .slider-btn-o a{padding: 10px 30px;}
.slider-btn-o a {text-decoration: none; color: #fff; font-size: 18px; padding: 10px 30px; display: inline-block; background: linear-gradient(to right, #05577b , #c12f7d); border-radius: 30px; transition: 0.5s;}
.slider-btn-o:hover a{background: linear-gradient(to right, #c12f7d, #05577b )}

/*process*/
.process{background: url(../images/bg-dotted.png) repeat; background-size: auto;}
.process p{text-align: center; font-size: 24px; margin: 0 0 44px; line-height: 35px; font-weight: 400;}
.process p span{color: #0098da; font-weight: 500;}
.process p label{color: #d6147a; font-weight: 500;}
.process-img{text-align: center; }
.process-img img{width: 100%; max-width: 600px;}
.process-heading{text-align: center;}
.process-heading h1{text-align: center; display: inherit; color: #414648; margin: 10px 0 30px; font-size: 40px; font-weight: 600;}
.process-heading label{font-size: 16px; font-weight: 400; letter-spacing: 0.5px; color: #292929; position: relative; padding: 0 65px; transition: 0.5s; text-transform: uppercase;}
.process-heading label:before{position: absolute; left: 0; top: 10px; background: #0098da; content: ''; width: 50px; height: 2px;}
.process-heading label:after{position: absolute; right: 0; top: 10px; background: #0098da; content: ''; width: 50px; height: 2px;}
.process-heading h1 span { color: #0098da;}

/*about-comapny*/
.about-comapny{background: url(../images/bg-img-2.png) no-repeat right center;}
.about-comapny-right .blod{color: #077caf; font-weight: 400;}
.about-comapny-left img{width: 100%;}
.about-comapny-right{padding: 0;}
.about-comapny-right label{font-size: 16px; font-weight: 400; letter-spacing: 0.5px; color: #292929; position: relative; padding: 0 0px 0px 65px; transition: 0.5s;}
.about-comapny-right label:before{position: absolute; left: 0; top: 10px; background: #0098da; content: ''; width: 50px; height: 2px;}
.about-comapny-right h1{font-size: 40px; display: table; font-weight: 600; color: #414648; line-height: 45px; margin: 0 0 35px;}
.about-comapny-right h1 span { color: #0098da;}
.about-comapny-right p{margin: 0 0 30px; padding: 0 100px 0 0; text-align: left;}

.team label{font-size: 16px; font-weight: 400; letter-spacing: 0.5px; color: #292929; position: relative; padding: 0 0px 0px 65px; transition: 0.5s;text-transform: uppercase;}
.team label:before{position: absolute; left: 0; top: 10px; background: #0098da; content: ''; width: 50px; height: 2px;}
.team h2{color: #0098da; font-size: 23px; font-weight: 500; letter-spacing: 0.5px;}
.team b{font-size: 20px; font-weight: 500;color: #0098da;}
.team i{font-size: 16px; font-weight: 400; color: #c78282; font-style: normal; letter-spacing: 0.5px; margin: 0 0 5px; display: block;}
.com-info{text-align: center; padding: 100px 0;  border-radius: 20px; background: url(../images/info-bg.png) no-repeat center; background-size: contain;}
.com-info h2{color: #36687d; font-weight: 600; font-size: 30px; }
.com-info span{font-size: 30px; color: #ff0088; font-weight: 600; border-bottom: 3px solid #36687d;}
.com-center{text-align: center;}
.com-center h2 { color: #36687d; font-weight: 600; font-size: 30px;}
.com-center span { font-size: 30px; color: #ff0088; font-weight: 600; border-bottom: 3px solid #36687d;}

/*services-text*/
.services{background: #fff url(../images/bg-img.png) no-repeat right center; background-size: contain;}
.topser .services-heading{text-align: center;}
.services .services-heading h1{text-align: center; display: inherit;}
.services .services-heading label{font-size: 16px; font-weight: 400; letter-spacing: 0.5px; color: #292929; position: relative; padding: 0 65px; transition: 0.5s; text-transform: uppercase;}
.services .services-heading label:before{position: absolute; left: 0; top: 10px; background: #0098da; content: ''; width: 50px; height: 2px;}
.services .services-heading label:after{position: absolute; right: 0; top: 10px; background: #0098da; content: ''; width: 50px; height: 2px;}
.services .services-heading p{text-align: center; font-size: 18px; margin: 0 0 35px; padding: 0 230px; line-height: 27px; font-weight: 300;}
.services-text{padding: 0 0 0 10px;}
.services-text h6{font-size: 24px;  font-weight: 600; color: #1b4962; font-family: 'Sarabun', sans-serif; margin: 20px 0;}
.ser-main-div{margin: 0 0 20px; border: 1px solid #d4d4d4; padding: 0 0 20px; display: flex; padding: 5px; border-radius: 10px;}
.services .icon .fa{color: #e94d65;  font-size: 30px; transition: 0.5s; margin: 12px 15px 0 12px;}
.services .icon-name{ width: 100%;}
.services .icon-name h6{color: #444141; font-size: 18px; line-height: 60px; margin: 0;}
.services .icon{line-height: 20px;}

.services-heading label{font-size: 16px; font-weight: 400; letter-spacing: 0.5px; color: #292929; position: relative; padding: 0 0px 0px 65px; transition: 0.5s;}
.services-heading label:before{position: absolute; left: 0; top: 10px; background: #0098da; content: ''; width: 50px; height: 2px;}
.services-heading h1{font-size: 40px; display: table; font-weight: 600; color: #424749; line-height: 60px; margin: 15px 0 15px;}
.services-heading h1 span { color: #0098da;}
.services .slider-btn-o{margin: 30px 0 0; display: inline-block;}
.ser-main-div{transition: 0.5s;}
.ser-main-div:hover{background: #dc044a;}
.ser-main-div:hover .fa{color: #fff;}
.ser-main-div:hover h6{color: #fff;}
.ser-main-div:hover {border: 1px solid #dc054b99; box-shadow: 0px 0px 10px #dc054b99;}

/*status*/
.status{background: url(../images/bg-img-7.png) no-repeat top right; background-size: 100% 100%;}
.status-left img{width: 100%;}
.status-text{border: 1px solid #f3f3f3; border-radius: 15px; padding: 20px; position: relative; z-index: 2;}
.status-text:before{position: absolute; left: 0; top: 0; width: 100%; height: 0%; background: linear-gradient(to bottom, #d6e5ff , #f5eded); content: ''; border-radius: 15px; z-index: -1; transition: 0.5s;}
.status-text:hover:before{height: 100%;}
.status-text h4{color:#1b4962; font-size: 20px; font-family: 'Sarabun', sans-serif; font-weight: 700; letter-spacing: 0.5px;}
.status-text span{color: #e94d65; font-size: 60px; font-weight: 600;}
.status .col-md-6:nth-child(3) .status-text{margin: 25px 0 0;}
.status .col-md-6:nth-child(4) .status-text{margin: 25px 0 0;}
#card-number {text-align: center;color: #FFFFFF;}

/*main-footer*/
.main-footer{background: url(../images/footer-bg.jpg) no-repeat center bottom fixed; background-size: cover; background-position-y: -50px; position: relative; text-align: center;}
.main-footer:before{content: ''; top: 0; left: 0; width: 100%; height: 100%; background: #000000eb; position: absolute;}
.footer-text img{width: 15%; margin: 0 0 40px;}
.footer-text h5 {
   color: #fff;
    letter-spacing: 0.5px;
    margin: 0px 0 5px;
    font-size: 24px;
    font-weight: 400;
}

.footer-text p{padding: 0 40px 0 0px;
    color: #a2a2a2;
    font-size: 14px;}

.footer-text .fa {
   color: #0098da;
    font-size: 20px;
}
.footer-text ul {
    padding: 0;
    margin: 0;
}
.footer-text li {
    padding: 10px 0;
    margin: 0;
    display: list-item;
    list-style-type: none;
}
.footer-text li a {
    color: #6f6969;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5px;
    transition: 0.5s;
    text-decoration: none;
}

.footer-social ul {
    padding: 0;
    margin: 0;
    padding: 0;
}
.footer-social li {
    list-style-type: none;
    display: inline-block;
}

.footer-social li a {
    padding: 10px;
    margin: 0 3px;
    font-size: 20px;
    color: #fff;
    width: 50px;
    height: 50px;
    background: #0098da;
    border-radius: 50%;
    display: block;
    transition: 0.5s;
    text-align: center;
    transition: 0.5s;
}

.footer-social li a:hover{background: #0098da; transform: scale(1.1);}

.footer-social .fa{color: #fff;}

.copy-right {
    border-top: 1px solid #add5f8;
    padding: 20px 0;
    background: #075f86;
}

.copy-right .copy-l p {
    color: #dcdada;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0.5px;
}


/*contact us*/
.main-contact{background:#f1f1f13b url(../images/bg-img-6.png) no-repeat right center; background-size: 100%;}
.contact-address{margin: 30px 0 0;}
.contact-address ul { padding: 0; margin: 0;}
.contact-address ul li { padding: 0; margin: 0; list-style-type: none; display: list-item; line-height: 35px; color: #676565;
    font-size: 14px;  font-weight: 400; font-family: 'Poppins', sans-serif; letter-spacing: 0.5px;}
.contact-address .fa{color: #0098da; margin: 0 10px 0px 0px; font-size: 20px;}
.contact_form{box-shadow: 1px 1px 10px #0000003b; width: 100%; padding: 40px; position: relative;}
.contact_form input{height: 53px;border-radius: 10px; border-color: #ddd;}
.contact_form textarea.form-control{border-radius: 10px; border-color: #ddd;}
.contact_form a{background:linear-gradient(to right, #05577b , #c12f7d);  padding: 15px 30px;  border-radius: 5px; border: 0; color: #fff; letter-spacing: 0.5px; font-weight: 500; font-size: 16px; margin: 0 ; position: relative; z-index: 1; overflow: hidden; text-decoration: none; display: inline-block;}
.contact_form a:hover{background:linear-gradient(to right, #c12f7d, #05577b)}
.contact_form .form-control:focus{border-color: #800d79a6 !important; box-shadow: none;}





header{
            // set animation
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
            position: relative;
          /*  background: #00000017;*/
            z-index: 500;
        }
        
        header.sticky {
            position: fixed;
              width: 100%;
              background: #0098da;
              margin: 0;
              top: 0;
              box-shadow: 0px 0px 8px #dddddd8c;
        }
        header.sticky .new-nav ul li a{color: #fff;}
        header.sticky .new-nav ul li a:hover{color: #fff;}
        header.sticky .logo h2{color: #fff;} 
        header.sticky .logo h2 span{color: #fff;}
        header.sticky .logo h2 label{color: #fff;}
        header .new-nav ul li a:hover{color: #fff;}

.round-shape-four {
    position: absolute;
    right: 22%;
    top: 28%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border: 1px solid #5c595a;
    animation: rotated 10s infinite linear;
    z-index: 99;
}

.round-shape-four:before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: -5px;
    background: #98fbbd;
    border-radius: 50%;
}

@-webkit-keyframes rotated {
    from {  -webkit-transform: rotate(0deg) translateX(150px) rotate(0deg); }
    to   {  -webkit-transform: rotate(0deg) translateX(150px) rotate(-360deg); }
}

/*fiexdcss*/

/*loader*/
#preloader { position: fixed;top: 0;left: 0; right: 0; bottom: 0; background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 9999;
  /* makes sure it stays on top */
}

#status {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(../images/loader.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
  /*margin: -100px 0 0 -100px;*/
  /* is width and height divided by two */
}
/*loader*/

.bx-wrapper{border: 0; margin-bottom: 0; box-shadow: none; background: none;}
.mnp{margin: 0; padding: 0;}
.bx-wrapper .bx-pager.bx-default-pager a{background: #d8d8d8cf;}
.bx-wrapper .bx-pager.bx-default-pager a.active{background: #ed2d93;}
.main-slider .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto{bottom: 20px;}
#back-to-top-btn { display: none;position: fixed;bottom: 20px;right: 35px;font-size: 26px; width: 50px;
  height: 50px; background-color:#0098da;color: #333; cursor: pointer;outline: none; border-radius: 50%;
  transition-duration: 0.2s; transition-timing-function: ease-in-out; transition-property: background-color, color; border: 1px solid white; z-index: 2;  }
#back-to-top-btn img{margin: 0 auto; position: absolute; left: 50%; right: 50%; transform: translate(-50%, -50%);}
#back-to-top-btn:hover {background-color: #075f86;}