@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&family=Roboto:wght@300;400;500;700&display=swap');
:root{
  --green:#14BB86;
  --blue:#1F2E3E;
  --textColor:#8F9397;
  --light:#F6FFFC;
  --border:#e4e0e4;
}

body{font-family: 'Roboto', sans-serif; font-size: 14px; color:var(--textColor);}

.navbar{background-color:rgba(255,255,255,.9); box-shadow: 0 0 4px rgba(0,0,0,.1); padding-left: 2%; padding-right: 2%;}
.navbar .navbar-nav .nav-link{color:var(--blue); padding-left: 13px; padding-right: 13px; font-size: 16px; font-family: 'Roboto Condensed', sans-serif;  font-weight: 700; text-transform: uppercase;}
.navbar .navbar-nav .call{font-family: 'Roboto', sans-serif;}
.navbar .navbar-toggler img {max-width: 21px;}
.navbar .navbar-nav .call .icon {border:1px solid var(--border); background: #fff; border-radius: 100%; padding:4px;}
.navbar + *{margin-top: 72px;}

.banner{position: relative;}
.banner .caption{position: absolute; left: 0; right: 0; top:0; bottom: 0; margin: auto;
                 width: 640px; height: 240px; padding:40px 50px; background-color:rgba(255,255,255,.7);}
.banner .caption .title{font-size: 50px;}
.banner .caption .sub-title{font-size: 22px;}

.ser-type{padding: 40px 40px 32px 40px; border-radius: 15px;}
.service{display: block;}

.feed-back{background: var(--blue); position: relative; margin-bottom: 90px; padding: 40px; padding-bottom: 10px; border-radius: 10px; background:url('../images/left-quote.svg') no-repeat var(--green) top 10px left 20px;}
.feed-back p{margin-bottom: 28px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.feed-back p:hover{display: block;}
.author{ position: absolute; bottom:-30px; left: 40px; z-index: 1;}
.author::after{position: absolute; content: ''; bottom: -17px; left: 15px; width: 40px; height: 15px;
              background: radial-gradient(ellipse at center, rgb(195 199 202) 0%, rgb(255 255 255) 80%); border-radius: 100%;}
.author img{  max-width: 70px;}

.feed-back b{padding-left: 90px; display: block; font-weight:500; letter-spacing: .3px; text-transform: uppercase;}

.feedback{padding:60px; background: url('../images/feedback.png') no-repeat #14bb86bf bottom -10px right; border-radius: 15px;}
.feedback .title{font-size: 36px; font-weight: 600; text-transform: capitalize;}

.work-items .title{font-size:30px;}
.work-items .text-green{font-weight: 400;}
.plan{padding: 15px; background: #fff; width: 350px;}
.plan li{padding:20px; width: 50%; flex: 0 0 auto; text-align: center;}
.plan li img{max-width: 80px; margin-bottom: 15px;}
.plan li:nth-child(2n + 0){border-left: 1px solid var(--border);}
.plan li:nth-child(1),
.plan li:nth-child(2){border-bottom: 1px solid var(--border);}

.example-image-link{display: block;}

.accordion{padding: 20px; background: #fff; margin-bottom: 46px;}
.accordion .accordion-button:not(.collapsed),
.accordion .accordion-button{color:var(--blue); font-size: 14px; border-radius:5px 5px 0px 0px; font-weight: 500; background: none; box-shadow: none; background:var(--light);}
.accordion .accordion-item{border:none; margin-bottom: 15px; border-radius: 5px;}
.accordion-body { border: 1px solid #def7ef; margin: 0 1px; border-top: 0; border-radius: 0 0 5px 5px;}

.accordion .accordion-button::after{background-image:url(../images/angle-arrow-down.svg); background-size: 14px;  width: 14px;
  height: 14px;}
.accordion .accordion-button.collapsed {border-radius: 5px;}

.accordion > .card{border-color:var(--light); margin-bottom: 15px; border-radius: 5px;}
.accordion > .card:last-child{margin-bottom: 0;}
.accordion .card-header{background:none; border-bottom: none; padding:0; }
.accordion .card-header .card-link{display: block;  position: relative; padding: 14px 20px; color: var(--blur); font-size: 14px;
                                   background: var(--light); font-weight: 600; position: relative;}
.accordion .card-header .card-link:after{content: ''; width:14px; height: 14px;  transition:all ease-in-out .3s;  background:url('../images/angle-arrow-down.svg') ; background-size: 14px;
                                         position: absolute; z-index: 4; right:20px; top:50%; pointer-events: none;  transform-origin: 7px 0px;  transform:rotate(-180deg) translateY(-7px);}
                                        
.accordion>.card>.card-header{border-radius: 4px;}
.accordion>.card:not(:last-of-type){border-bottom: 1px solid var(--light);}
.accordion>.card:not(:first-of-type),.accordion>.card:not(:last-of-type){border-radius: 5px;}
.accordion .card-header .collapsed.card-link:after{transform:rotate(0deg) translateY(-7px);   transition:all ease-in-out .3s;}

/* -- start of contact us -- */
.address-item {padding: 30px 15px;text-align: center; background: #fff; border-radius: 10px; margin-bottom: 10px;}
.address-item  .icon{ background:var(--light); height: 70px; width: 70px; color: #fff; line-height: 70px;border-radius: 100%; position: relative;display:inline-block ;margin-bottom: 10px;}
.address-item  .icon img{max-width:50%;}

.address-item .address-text .contact-title{font-size: 20px; text-transform: uppercase; margin: 0 0 10px; font-weight: 700; color:var(--blue);}
.cont_info{margin-bottom: 60px;}
.address-item .address-text ul{min-height:52px;}
.address-item .address-text ul li { font-size: 14px; line-height: 26px; font-weight: 400;color: #505050;}
.address-item .address-text ul li a {color: var(--textColor);}
.address-item .address-text ul li .location{line-height: 20px; display: block;}

.project img{max-width: 100%;}

.partner{background: #fff; box-shadow: 0px 2px 4px rgba(209, 214, 218, 0.25); border-radius: 10px; height: 80px;}


.contact{border-radius: 10px;}
.chatbar h4{color: #FFF774; font-size: 20px;}
.chatbar h2{font-size: 30px; font-weight: 700;}

.map{background: #fff; border-radius: 10px;}
.map iframe {width: 100%; height: 500px;}

.ser-contain{max-width: 840px;}
.serve{background: #fff; padding:20px 20px 20px 20px; border-radius: 4px; box-shadow:0 0 5px rgba(91, 199, 163, 0.1);}
.serve .sub-title{font-size: 22px; font-weight: 500;}
.serve p{text-align: justify;}

.serve .info-serv{position: relative; padding-left: 48px;}
.serve .info-serv:before{content: ''; position: absolute; left:0px; top:50%; width:1px; height: 100px; background: var(--border); transform: translateY(-50%);}
.serve .info-serv:after{content: ''; position: absolute; top:50%; margin-top: -4px; width: 12px; height: 12px; border-right: 1px solid var(--border);
                        border-bottom: 1px solid var(--border); transform: rotate(-45deg); left: -5px; background: #fff;}

.team{background: #fff; padding: 14px; text-align: center;}
.team img{margin-bottom: 16px;}
.team b{display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px;}

.why-us{padding: 15px; background: #fff;}

.example-image-link{position: relative; overflow: hidden; }
.example-image-link:after{content:''; width: 57px; height: 43px; background: url(../images/logo-g.png)no-repeat bottom right;
  position: absolute; bottom: 10px; right: 10px; opacity: .5;}
.example-image-link .address{background-color: rgba(12,22,33,.9); transition: all ease-in-out .75s; opacity:0;  top:0; position: absolute; display:table; text-align: center; width: 100%; height: 100%;} 
.example-image-link:hover .address{ opacity: 1;}
.example-image-link .address span{display: table-cell; font-size: 16px; letter-spacing: .3px; font-family: 'Roboto Condensed', sans-serif; text-transform: uppercase; vertical-align: middle; transition: all ease-out .50s; padding-top: 100px; color: #fff;}
.example-image-link:hover .address span{padding-top: 0px;}

.work-part{background: linear-gradient( 270deg, #1DA1F2 -0.7%, #1BC8B1 100%);}
.fact li{border-right: 1px solid rgba(255,255,255,.7); text-align: center; max-width: 100%; flex:1 0 0%;}
.fact li .title{font-family: 'Roboto', sans-serif;}
.fact li:nth-child(4){border-right: none;}
.contact-form {border-radius: 10px;}
.form { background: #fff; padding: 30px;}
.form h3 {color: var(--blue);font-size: 20px;font-weight: 700;}
.form-group label { font-weight: 500; color: var(--blue); font-size: 13px; margin-bottom: 3px;}
form .form-group {margin-bottom: 20px;}
.form-group .form-control {height: 50px;border-color: #e0f9dc; border-radius: 4px;}
.form-group textarea {height: 120px!important;}
.form .line {width: 118px;height: 1px;background: #e0f9dc;}
/* -- end of contact us -- */

footer{background:var(--blue); padding-top: 30px;}
.footer{margin-bottom: 10px;}
.footer strong{color:var(--green); font-weight: 500; font-size: 18px; display: block; margin-bottom: 15px;}
.footer ul li{list-style:disc; margin-left: 18px;}
.footer ul li img{opacity: .7; max-width: 17px;}
.footer ul li a{color:#869cb7!important; display: block;  padding: 4px 0;}

.footer .address li, .footer .socialbar li{list-style: none; margin-left: 0;}
.footer .address li{margin-bottom: 10px;}
.email{word-break: break-all;}

.copy-right{border-color: rgba(255, 255, 255, 0.1)!important;}
.copy-right a{display: block; padding: 10px 0; color: #869cb7 !important;}
.copy-right .webmilky{text-align: right;}

.thanks-section{height: 100vh; padding: 0; position: relative; overflow: hidden;}
.thanks-section:before{content: ''; position: absolute;  left:10%; box-shadow: 0 0 300px rgba(0,0,0,.1);  bottom: -614px;width: 100vh; height: 100vh;background: #fff;transform: rotate(45deg);border-radius: 50px;}
.thanks-section .logo img{max-width:130px; margin-top: 10px;}
.thanks{min-height: 400px; padding-top: 70px;}
.thanks .icon img{max-width:80px;}
.thanks span{font-size: 18px;}
.thanks .btn{font-size: 15px; padding: 12px 28px; box-shadow: none;}

.lightbox .lb-data .lb-close{position: absolute; opacity: 1; right: 35px; top:-25px;}
.lb-data .lb-details{width: 100%!important; text-align: center!important;}

section{padding-top: 44px;}
.text-green{color:var(--green)!important;}
.text-green{color:var(--green)!important;}
.title,.sub-title{font-family: 'Roboto Condensed', sans-serif; font-size: 36px; text-transform: uppercase; font-weight: 700; color:var(--blue)}
.sub-title{font-size: 16px; font-weight: 700;}
.light-bg{background: var(--light);}
.off-white{background: #5bc7a31a;}
.slog{font-size: 16px;}
b,strong{font-weight: 700;}
ul{list-style: none; padding: 0; margin: 0;}
a{text-decoration: none;}
.btn {background: var(--green); padding: 10px 15px;font-size: 18px;text-align: center;
  min-width: 180px; color: #fff;border-radius: 4px; font-weight: 500;
  font-family: 'Roboto', sans-serif; text-transform: uppercase;
}
.btn:hover{background: var(--green);  color: #fff;}

input,button{font-family: 'Roboto', sans-serif;}

input:focus,button:focus{outline: 0; box-shadow:none!important;}

.icon{display: inline-block; margin-right: 7px;}

@media (max-width:768px){
  .banner .caption{width: 444px; height: 182px;}
  .banner .caption .title{font-size: 32px;}
  .banner .caption .sub-title{font-size: 16px;}
  .service.mb-2{margin-bottom: 16px!important;}
  .service img{max-width: 100px;}
  .project.mb-3{margin-bottom: 8px!important;}
  .slide-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .slide-scroll > [class^="col-"] {
    width: 47%;
    flex: 0 0 auto;
   }
   .title{font-size:24px;}
   .slog{font-size: 13px;}

   .brands > [class^="col-"]{width:173px;}
   
}


@media (max-width:576px){
  .slide-scroll > [class^="col-"] { width: 90%;flex: 0 0 auto;}
  .brands > [class^="col-"]{width:173px;}

  .serve{margin: 5px;}
  
   .ser-type{border-radius: 0; position: relative;}
   .ser-type::before{width: 0; height: 0; border-top: 15px solid #fff; content: ''; 
                    border-left: 15px solid transparent; border-right: 15px solid transparent;
                    position: absolute; top: 0; left: 50%; margin-left: -17px;
                    }
   .banner .caption { width: 68%; height: 90px; padding: 10px;}
   .banner .caption .title{font-size: 20px; margin-bottom: 5px;}
   .banner .caption .sub-title{font-size: 10px;}
   section{padding-top: 26px;}
   .title{margin-bottom: 2px;}
   .navbar{padding-left: 0; padding-right: 2%;}
   .navbar .navbar-brand img{max-width: 100px;}
   .navbar .container-fluid{padding-left: 0; padding-right: 0;}
   .navbar .navbar-nav .call{padding: 0;}
   .navbar + *{margin-top: 58px;}

   .navbar .navbar-collapse{position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color:rgba(35,38,37,.82);}
   .navbar .navbar-collapse.show{ z-index: 10; display: block!important;}
   .navbar .navbar-collapse .navbar-nav{position: absolute; animation: mymove .5s ; transition: all ease-out 0.4s; left: 0; top:0; padding: 5px 15px; width: 240px; height: 100%; background: #fff;} 
    
   @keyframes mymove {
    from {left: -100%;}
    to {left: 0;}
  }

   .copy-right{text-align: center; padding: 5px 0;}
   .copy-right a{padding: 5px 0;}
   .copy-right .webmilky{text-align: center;}

   .address-item{padding: 10px; margin-bottom: 16px!important;}
   .address-item .address-text .contact-title{font-size: 14px;}
   .address-item .icon{width: 44px; height: 44px; line-height: 44px;}
   .feedback{background-image: none; padding: 30px;}
   .feed-back{padding: 34px 20px 10px 20px;}

   .service{background: #fff; padding:15px 10px}
   .service.mb-5{margin-bottom:16px!important;}
   .service img{max-width: 64px;}
   .service .sub-title{margin-bottom:0; font-size: 14px;}
   
   .fact li{width: 50%; flex: 0 0 auto; margin-bottom: 16px!important;}
   .fact li:nth-child(2){border-right: none;}

   .product img{margin-bottom: 15px;}
   
   .serve .info-serv{padding-left:15px;}
   .serve .info-serv:before,.serve .info-serv:after{display: none;}
    .example-image-link:after{background-size: 30px; height: 25px; bottom: 5px; right: 5px; }

}