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

html{ direction: ltr; overflow-x: hidden; }
body {font-family: 'Roboto', sans-serif; width: 100%; overflow-x: hidden;   font-weight: 300;} 
h1,h2,h3,h4,h5,h6{font-family: 'Oswald', sans-serif;}
a{text-decoration: none;transition: .4s;}
.appjad-image{position: relative;width: 100%;padding-bottom: 100%;overflow: hidden;}
.appjad-image.re{padding-bottom: 60%; }
.appjad-image.ta{padding-bottom: 120%; }
.appjad-image.ro{ transform: translateY(-1px) rotate(0deg); }
.appjad-image img{position: absolute; left: 50%;top: 50%; min-height: 100%; width: 100%;
  -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);transition: all .5s;
  transform: translate(-50%,-50%);object-fit: cover;object-position: center;}

.text-justify{text-align: justify;}
.text-whatsapp{color: #25D366;}
.text-facebook{color: #1877f2;}
.text-youtube{color: #ff0000;}
.text-instagram{color: #c32aa3;}
.text-linkedin{color: #0072b1;}
.text-twitter{color: #00acee ;}

header .top-header .social a:hover{color: #00B5A3 !important;}


.text-appjad{color: #00B5A3;}
.btn-appjad{background-color: #00B5A3 !important;     --bs-btn-color: #fff;
  --bs-btn-bg: #00B5A3;
  --bs-btn-border-color: #00B5A3;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #00B5A3;
  --bs-btn-hover-border-color: #00B5A3;
  --bs-btn-focus-shadow-rgb: 60,153,110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #00B5A3;
  --bs-btn-active-border-color: #00B5A3;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #00B5A3;
  --bs-btn-disabled-border-color: #00B5A3;}
/* .text-facebook:hover,.text-youtube:hover,.text-instagram:hover{color: #FFF;} */

.bg-1{background-color: #00B5A3 !important; border-color: #00B5A3;}

.about-bg{border:15px solid #00B5A3 !important;border-top-width: 0 !important; border-left-width: 0 !important; 
  position: absolute;width: 100%; top: 45px; left: 30px;  padding-bottom: 90%;overflow: hidden;}

header{position: absolute;width: 100%; z-index: 9;}
header .top-header{background-color: rgba(255, 255, 255, .6);}
header .navbar{background-color: rgba(255, 255, 255, .8);}
header .lavalamp__object {background: #00B5A3; }

.carousel-item{margin: 0;overflow: hidden; }
.carousel-bg{height: 100vh;}
.carousel{margin: 0;height: 100vh; overflow: hidden;}
.carousel-caption{bottom: 20%; max-width: 30%; text-align: justify;}
.carousel-indicators{bottom: 10%; right: unset;  z-index: 9999;}
.carousel-indicators [data-bs-target]{background-color: #00B5A3; height: 10px;}


footer{background-color: #323946; position: relative; z-index: 3;}
footer .contacts,footer .pages{position: relative; z-index: 9;}
footer .footer{background-color: #282E3A;}
.reveal{position: relative;transform: translateY(150px);opacity: 0;  transition: 1s all ease;}
.reveal.active{  transform: translateY(0);opacity: 1;}

.services-items figure:nth-child(odd) .col-content {margin-left: -8.333333%;  z-index: 9;}
.services-items .align-self-start{   align-self: center !important;}
.services-items .align-self-end{   align-self: center !important;}
.service-bg{transition: .5 all; border:15px solid #00B5A3 !important;border-top-width: 0 !important; border-left-width: 0 !important; 
  position: absolute;width: 100%;height: 100%; bottom: -35px;left: 30px;  overflow: hidden; z-index: -1;}
.services-items figure .service-bg-2{transition: all .4s ease;-webkit-transition: all .4s ease;  }
.services-items figure:hover .service-bg-2{border:15px solid #00B5A3 !important;border-bottom-width: 0 !important; border-left-width: 0 !important; 
    position: absolute;width: 50px;height: 50px; top: -35px;right: -30px;  overflow: hidden;}
.services-items figure:nth-child(even) .col-content {margin-right: -8.333333%;z-index: 9;}
.services-items figure:nth-child(odd) .service-bg {border-left-width: 15px !important;    border-right-width: 0 !important;left: -30px;}

.services-items figure:nth-child(even):hover .service-bg-2{border:15px solid #00B5A3 !important;
  border-bottom-width: 0 !important; border-right-width: 0 !important; 
  position: absolute;width: 50px;height: 50px; top: -35px;left: -30px;  overflow: hidden;}

.numbers-bg{background-color: rgba(255, 255, 255, .9);}


.blog figcaption{width: 70%; margin-top: -50px; z-index: 999; align-items: center;}
.blog-bg{transition: .1 all; border:15px solid #00B5A3 !important;border-bottom-width: 0 !important; border-right-width: 0 !important; 
  position: absolute;width: 100%;height: 100%; top: -30px; left: -30px;  overflow: hidden; z-index: 999; z-index: -1;}
.blog figure:hover .blog-bg{ transform: rotate(180deg); top: 30px; left: 30px; }

.blog figure .blog-bg-2{transition: all 4s ease;-webkit-transition: all .4s ease;  }
.blog figure:hover .blog-bg-2{border:15px solid #00B5A3 !important;border-bottom-width: 0 !important; border-right-width: 0 !important; 
    position: absolute;width: 50px;height: 50px; top: -35px;left: -30px;  overflow: hidden;}
.blog.clients .bg-light{background-color: rgb(245, 245, 245) !important;}


.index.inside{padding-top: 160px;}
header.inside .top-header{background-color: #00B5A3; color: #fff;}
header.inside .top-header{background-color: #00B5A3; color: #fff;}
header.inside .top-header .social a{color: #FFF !important;}
header.inside .top-header .social .text-facebook:hover{color: #1877f2 !important;}
header.inside .top-header .social .text-youtube:hover{color: #ff0000 !important;}
header.inside .top-header .social .text-instagram:hover{color: #c32aa3 !important;}
header.inside .top-header .social .text-linkedin:hover{color: #0072b1 !important;}
header.inside .top-header .social .text-twitter:hover{color: #00acee !important;}


footer a:hover{color: #00B5A3 !important;}
footer .social a:hover{color: #FFF !important;}

@media (max-width:767px) {
  
header{position: relative;width: 100%; z-index: 9;}

.navbar .ms-5 {margin-left: 0 !important; width: 100% !important;}
.index.inside{padding-top: 0;}
.nav-item .d-block{display: inline-block !important;}
header .top-header {text-align: center; padding: 20px 0 0 0;}
header .top-header .social {text-align: center; padding: 20px 0 0 0;}
.carousel-bg{height: 60vh;}
.carousel{margin: 0;height: 60vh; overflow: hidden;}
.carousel-caption{bottom: 20%; max-width: 100%; text-align: justify;}
.about-us{padding: 0 10%;}


.services figcaption{width: 90%; margin-top: -50px; z-index: 999; align-items: center; margin: 0 0 0 0 !important;}
.service-bg{transition: .5 all; border:15px solid #00B5A3 !important;border-top-width: 0 !important; border-left-width: 0 !important; 
  position: absolute;width: 100%;height: 100%; bottom: -35px;left: 30px;  overflow: hidden; z-index: 1;}
.services-items figure:nth-child(odd) .service-bg{ top: -35px;   border-top-width: 15px !important;
  border-bottom-width: 0 !important; }
.services figure:hover .services-bg{ transform: rotate(180deg); top: -30px !important; left: 30px; }
.services-items figure:nth-child(odd) figcaption{ margin: 0 0 0 auto !important;}
.services-items figure:nth-child(odd) .service-bg-2{border:15px solid #00B5A3 !important;
  border-top-width: 0 !important; border-left-width: 0 !important; 
  position: absolute;width: 50px;height: 50px; top: 85%; right: 25px;  overflow: hidden;}
.services-items figure:nth-child(even) .service-bg-2{border:15px solid #00B5A3 !important;
    border-bottom-width: 0 !important; border-right-width: 0 !important; 
    position: absolute;width: 50px;height: 50px; top:10px;left: 20px;  overflow: hidden;}


.services figure{margin-bottom: 50px;}
.services .w-50{width: 100% !important;}
.numbers .col-md-2{margin: 20px 0; width: 50% !important;}
.blog .w-50{width: 100% !important;}
.blog figure {margin-bottom: 40px !important; display: block !important; }
.blog figcaption{margin: auto !important;}

footer .contacts-list{width: 50%;}
footer .contacts{margin-top: 50px;}
footer .item{width: 50%;}

}