@import url(bootstrap.min.css);
@import url(font-awesome.css);


/*:root {
  --yellow-: #FFCC00;
  --color-2: #4c6edb;
  --color-3: #24aad8;
  --color-4: #1ac7c2;
  --color-5: #1ddea3;
}*/

html,
body {
  background-color: #fff;
  color: #7a7878;;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

.heightapp {
  min-height: 100vh;
}

[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: 'Cairo', sans-serif !important;
}

[dir="rtl"] .nav {
  padding-right: 0;
}

header  {
  display: inline-block; width: 100%; background: #fff; height: 100px;
  
}

.banner  {
  display: inline-block; width: 100%; background: url(../../images/banner-bg.svg) center no-repeat;
  background-size: 100%; height: calc(100vh - 100px);
  overflow: hidden;
}

.banner h3  {
  font-weight: 900; font-size: 35px;
}

.title-sections   {
  font-weight: 900; font-size: 33px; color: #2aacb2; padding-top: 18px;
}

.title-sections span   {
  position: absolute; top:0; right:0; font-size: 15px; color: rgba(0, 0, 0, 0.25)
}

.banner h6  {
font-size: 25px; line-height: 40px;
}

.banner img  {
  left:-38px; position: relative; max-width: 98%;
  }


.w-bg  {
  display: inline-block; width: 100%; background: #fff;
  
}

.gray-bg  {
  display: inline-block; width: 100%; background: #fdfdfd;
  
}

footer  {
  display: inline-block; width: 100%; background: #fff; border-top:2px  #2aacb2 solid;
  
}

footer img {
  max-width: 180px;
  
}

ul.social-media   {
  display: inline-block; width: 100%; padding: 7px 0 0; margin: 0; text-align: left;
}

ul.social-media li  {
  display: inline-block; margin-right: 10px; list-style: none;
}

ul.social-media li a   {
  display: inline-block; text-align: center;  width: 52px; color: #666 !important; height: 52px; border-radius: 50%; border: 1px #ddd solid; text-decoration: none;
}

ul.social-media li a i  {
  display: inline-block; height: 52px; line-height: 52px;
}

ul.social-media li a:hover   {
   color: #fff !important; border: 1px #2aacb2 solid; background: #2aacb2;
}

.logo   { position: absolute; right:0; top:21px}
.logo img  { width: 190px;}


.nav-metal  {
  margin-top: 22px;

}
.navbar-expand-lg.nav-metal .navbar-nav .nav-item {
  padding-right: 1rem;
  padding-left: 1rem;
}

.navbar-expand-lg.nav-metal .navbar-nav li.nav-item:last-child {
  padding-right: 0;
  padding-left: 0;
}

.navbar-expand-lg.nav-metal .navbar-nav li.nav-item:last-child {
  position: absolute;
  left: 0;
}

.navbar-light.nav-metal .navbar-nav li:last-child .nav-link {
  color: #fff !important;
  border-radius: 8px;
  background:  #2aacb2;
  padding-left: 45px;
  padding-right: 45px;
}

.navbar-light.nav-metal .navbar-nav li .nav-link {
  color:  #1c1c1c; font-size: 17px; font-weight: 600;
}

a.whitelink    { display: inline-block; height: 40px; line-height: 37px; padding: 0 32px; background: #fff; text-decoration: none !important; border: 1px #fff solid; border-radius: 8px; color:#2aacb2 !important; font-weight: 600; font-size: 16px; 
  box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1); }

  a.bluelink    { display: inline-block; height: 40px; line-height: 37px; padding: 0 32px; background: #2aacb2; text-decoration: none !important; border: 1px #2aacb2 solid; border-radius: 8px; color:#fff !important; font-weight: 600; font-size: 16px; 
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1); }
    
a.whiteborder   { display: inline-block; height: 40px; line-height: 37px; padding: 0 32px; background: transparent; text-decoration: none !important; border: 1px #fff solid; border-radius: 8px; color:#fff !important; font-weight: 600; font-size: 16px; }


.text-left    { text-align: left; }

.servic-block  {
  display: inline-block; width: 100%; background: #fff; border-radius: 15px; 
  box-shadow: 0 4px 35px 0 rgba(0, 0, 0, 0.03); padding: 30px;
}

.servic-block img {
  max-height: 85px; margin-bottom:20px;
}

.servic-block h4 {
  display: inline-block; width: 100%; color: #000; font-weight: 700; font-size: 20px; margin-bottom: 12px;
}

.servic-block p {
  display: inline-block; width: 100%; margin-bottom: 0;
}

a.whiteapp   {
  display: inline-block; box-shadow: 0 4px 25px 0 rgb(0 0 0 / 10%); 
  border: 1px #fff solid; border-radius: 8px;
  color: #000 !important; text-decoration: none !important;
  font-weight: 600; height: 48px;
  line-height: 45px;
  padding: 0 20px;
}

a.whiteapp svg   {
  transform: scale(1.2); color: #2aacb2 !important; margin-left: 5px;
  -webkit-transform: scale(1.2);
}

a.whiteapp:hover   {
  background: #2aacb2; color: #fff !important; border: 1px #2aacb2 solid;
}

a.whiteapp:hover svg   {
color: #fff !important;
}

ul.checklist  {
  display: inline-block; width: 100%; padding: 0; margin: 0 0 40px;
}

ul.checklist li  {
  display: inline-block; width: 100%; padding: 0 48px 10px 0; margin: 0 0 12px; position: relative;
}

ul.checklist li i {
  position: absolute; top:-5px; background: #eef8f9; width: 36px; height: 36px; border-radius: 50%; right:0; text-align: center;
}

ul.checklist li i svg {
  color: #2aacb2; transform: scale(1.4); position: relative; top:5px;
  -webkit-transform: scale(1.4);
}


@media (min-width: 1920px) {
  
}

@media (min-width: 1800px) {
  
}

@media (min-width: 1600px) {
 
}

@media (min-width: 1400px) {
 
}

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

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

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

@media (max-width: 991px) {

  header  { height: unset; min-height: 100px; }
  .banner  {

    background-size: cover
  }

  .nav-metal  {
    text-align: left; max-width: 300px; float: left;
  }

  .navbar-expand-lg.nav-metal .navbar-nav li.nav-item:last-child {
    padding-right: 1rem;
    padding-left: 1rem;
  }
  
  .navbar-expand-lg.nav-metal .navbar-nav li.nav-item:last-child {
    position: unset;
    left: auto;
  }

  .banner img {
    left: -19px;
    max-width: 100%;
}

.navbar-light.nav-metal .navbar-nav li .nav-link {

  text-align: center;
}

ul.social-media li   {
  margin-right: 5px;
  }

ul.social-media li a   {
width: 40px; height: 40px; 
}

ul.social-media li a i  {
height: 40px; line-height: 40px;
}

}

@media (max-width: 768px) {

}

@media (max-width: 767px) {

  .logo {
    right: 15px;
}

header {
  padding: 0 5px;
}

.w-bg, .gray-bg {
  padding: 0 10px;
}
  .banner  {
    height: unset; overflow: unset; text-align: center; padding: 0 5px;
  }

  .banner img  {
    margin-top:20px; left:0
  }

  .banner h3 {
    font-weight: 700;
    font-size: 28px;
}

.banner h6 {
  font-size: 20px;
  line-height: 28px;
}

footer  {
  text-align: center;
}

ul.social-media  {
  text-align: center;
}

a.whiteapp {
  padding: 0 6px;
}

a.bluelink {

  padding: 0 28px;
}
}

@media (max-width: 622px) {

}

@media (min-width: 576px) {
 
}
@media (max-width: 571px) {
  

}

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

@media (max-height: 480px) {
 
}