@import url(bootstrap.min.css);
@import url(font-awesome.css);
@import url(feather.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: linear-gradient(135deg, #7b1246, #1a7b9f);;
  background-size: 100%; height: 100vh;
  overflow: hidden;
}

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

.title-sections   {
  font-weight: 900; font-size: 33px; color: #002E44; padding-top: 30px;
}

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

[dir="rtl"] .title-sections span   {
 left:auto; right:0;
}

.title-sections span.middel   {
  left:50%; 
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

[dir="rtl"] .title-sections span.middel   {
  right:auto; left:50%; 
}

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

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

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

.yellow-bg  {
  display: inline-block; width: 100%; background: #fdfaf9;
}

.blue-bg  {
  display: inline-block; width: 100%; background: #002E44;
}

footer  {
  display: inline-block; width: 100%; background: #F9F9F9; 
  
}

footer img {
  max-width: 180px;
  
}

ul.social-media   {
  display: inline-block; width: 100%; padding: 7px 0 0; margin: 20px 0 40px; 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 #197ca0 solid; background: #197ca0;
}

.logo  { margin-top: 10px;}


.logo img  { width: 110px;}


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

}

[dir="rtl"] .navbar-expand-lg.nav-metal .navbar-nav {
 padding: 0;
}
.navbar-expand-lg.nav-metal .navbar-nav .nav-item {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
}

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

a.whitelink    { display: inline-block; height: 52px; line-height: 50px; padding: 0 32px; background: #fff; text-decoration: none !important; border: 1px #A7A7A7 solid; border-radius: 26px; color:#A7A7A7 !important; font-weight: 600; font-size: 16px;  }

  a.bluelink    { display: inline-block; height: 52px; line-height: 50px; padding: 0 32px; background: #197CA0; text-decoration: none !important; border: 1px #197CA0 solid; border-radius: 26px; color:#fff !important; font-weight: 600; font-size: 16px; 
    box-shadow: 0px 2px 25px #00000040; }
    
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 0 10px 26px; margin: 0 0 3px; position: relative;
}

[dir='rtl'] ul.checklist li  {
 padding: 0 26px 10px 0;
}

ul.checklist li i {
  position: absolute; top:3px; background: #fff; border-radius: 50%; width: 18px; height: 18px; left:0; text-align: center; border: 7px #139DB8 solid;
}

[dir='rtl'] ul.checklist li i {
  left:auto; right:0
}

.package-col  {
  display: inline-block; width: 100%; background: #fff; border-radius: 10px; padding: 15px;
  box-shadow: 15px 15px 35px #00000008;
}

.package-col img  {
  display: inline-block; width: 60px; margin: 10px 0 20px;
}

.package-col h3  {
  display: inline-block; width: 100%; margin: 0 0 10px; font-size: 24px; font-weight: 700;
}

.package-col.free h3  {
  color: #1FBE69;
}

.package-col.personal h3  {
  color: #F5AA3A;
}

.package-col.group h3  {
  color: #e7563a;
}

.package-col.companies h3  {
  color: #197CA0;
}

.package-col h2  {
  display: inline-block; width: 100%; margin: 0 0 10px; font-size: 20px; color: #002E44; line-height: 24px; font-weight: 700;
}

.package-col h2 span  {
  display: inline-block; font-size: 15px; color: #A7A7A7; line-height: 24px;
}

.package-capacity  {
  display: inline-block; width: 100%; color: #A7A7A7; font-size: 15px; line-height: 24px; margin: 10px 0;
}

.package-capacity b {
  display: inline-block; color: #002E44; font-size: 36px; line-height: 24px; 
}

.package-col button {
  display: inline-block; width: 100%; background: transparent; padding: 0; margin: 10px 0; border:1px #A7A7A7 solid ; height: 38px; line-height: 36px; border-radius: 18px;
}

.package-col.free button {
  color: #1FBE69;
}

.package-col.free button:hover  {
  color: #fff; background: #1FBE69; border:1px #1FBE69 solid ;
}

.package-col.personal button  {
  color: #F5AA3A;
}

.package-col.personal button:hover  {
  color: #fff; background: #F5AA3A; border:1px #F5AA3A solid ;
}

.package-col.group button  {
  color: #e7563a;
}

.package-col.group button:hover  {
  color: #fff; background: #e7563a; border:1px #e7563a solid ;
}

.package-col.companies button  {
  color: #197CA0;
}

.package-col.companies button:hover  {
  color: #fff; background: #197CA0; border:1px #197CA0 solid ;
}

.package-col button:disabled {
  color: #A7A7A7;
}

.package-col ul {
  display: inline-block; width: 100%; padding: 0; margin: 10px 0;
}

.package-col ul li {
  display: inline-block; width: 100%; margin: 0 0 12px; list-style: none; position: relative; border-bottom: 1px #ddd solid; padding-bottom: 10px;
}


.package-col.free ul li::before {
  color: #1FBE69;
}

.package-col.personal ul li::before   {
  color: #F5AA3A;
}

.package-col.group ul li::before   {
  color: #e7563a;
}

.package-col.companies ul li::before   {
  color: #197CA0;
}


.nav-pills .nav-link  {
  background-color: #fff !important; color: #002E44 !important; box-shadow: 0px 8px 35px #3a3de71a; font-weight: 600; text-align: left;
}


.nav-pills .nav-link.active  {
   background-color: #002E44 !important; color: #fff !important; 
}

.nav-pills li   {
  margin: 0 15px;
}

.frameblock  {
  display: inline-block; width: 100%; margin-bottom: 24px; line-height: 20px; min-height: 84px; border-radius: 15px; padding: 22px 15px 22px 70px; position: relative; text-align: left; color: #fff;
  box-shadow: inset 8px 8px 15px #00344D, 12px 12px 35px #00000021;
}

[dir="rtl"] .frameblock  {
  padding: 22px 70px 22px 15px; text-align: right; 
}

.frameblock::before  {
  position: absolute; content: "\e83e"; font-family:feather ; font-size: 30px; color: #197CA0;
  top:32px; left:22px; font-weight: 900; stroke: #197CA0;
}

[dir="rtl"] .frameblock::before  {
 right:15px; left:auto

}

.subtitle   {
  font-size: 13px;
}

a.login  {
  margin-right: 10px; margin-left: 10px; text-decoration: none; height: 40px; line-height: 40px; vertical-align: top;
}

a.started  {
  display: inline-block; padding: 0 15px 0 25px; border-radius:21px; text-decoration: none !important; height: 42px; line-height: 40px; border: 1px #fff solid; color: #fff !important;
}

[dir="rtl"] a.started  {
  padding: 0 25px 0 15px;
 }

.additinallinks  {
  text-align: right; padding-top: 25px;
}

[dir="rtl"] .additinallinks  {
  text-align: left; 
}

.subgray  {
  font-size: 15px; color: #A7A7A7; text-transform: uppercase;
}

.serverissu  {
  padding: 0 50px
}

.formhome .form-control {

  color: #fff;
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid #1d4659;

}
.btn-submit
{
  display: inline-block;
 height: 40px; background: #197CA0 !important; border: none; color: #fff !important; font-size: 16px; padding: 0 15px 0 25px; font-weight: 600; width: auto; text-align: center; border-radius: 20px;
}

[dir="rtl"] .btn-submit
{
  display: unset; float: left; padding: 0 25px 0 15px;
}

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

.imgfooter  {
   margin-top: 20px; margin-bottom: 40px
}

.imgfooter img  {
  width: 110px;
}

.contactdata  {
  text-align: right; margin-top: 35px; margin-bottom: 40px; color: #002E44;
}

[dir="rtl"] .contactdata  {
  text-align: left; 
}

.contactdata a {
  color: #002E44 !important;
}

.contactdata p {
 display: inline-block;
}

.contactdata img  {
  width: 32px; display: inline-block; 
}

.copyright  {
  margin: 17px 0 15px 0; color: #A7A7A7;
}

.copyright a  {
  color: #E7563A !important; text-decoration: none;
}

.power  {
  text-align: right; margin: 17px 0 15px 0; color: #A7A7A7;
}

[dir="rtl"] .power  {
  text-align: left;
}

.power a  {
  color: #E7563A !important; text-decoration: none;
}

.sliderimg   {
  max-width: 100%;
}

.shaperight::before   {
  background: url(../../images/makeit.svg) center no-repeat; z-index: 0; right:-220px; content: '';
  background-size: 400px; position: absolute; width: 400px; height: 400px;
}


.shapecenter::before   {
  background: url(../../images/makeit.svg) center no-repeat; z-index: 0; left:50%; top:50%; content: '';
  background-size: 320px; position: absolute; width: 320px; height: 320px;
  transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
}

.shapecenter img   {
  position: relative; z-index: 1;
}

.shapeleft::before   {
  background: url(../../images/makeit.svg) center no-repeat; z-index: 0; left:-220px; content: '';
  background-size: 500px; position: absolute; width: 500px; height: 500px;
}

.ar-side  { display: none !important; }

[dir="rtl"] .ar-side  { display: inline-block !important; }
[dir="rtl"] .en-side  { display: none !important; }

.langar  {
  display: inline-block; border: none; margin-right: 10px; background: url(../../images/eg.png) center no-repeat; 
  width: 26px; height: 26px; border-radius: 50%; position: relative; top:7px; vertical-align:top;
  background-size: 100%;
}

.langen   {
  display: none; border: none; margin-right: unset; margin-left: 10px; background: url(../../images/gb.png) center no-repeat;
  width: 26px; height: 26px; border-radius: 50%; position: relative; top:7px; vertical-align: top;
  background-size: 100%;
}

[dir="rtl"] .langar  {
  display: none;
}

[dir="rtl"] .langen   {
  display: inline-block;
}

.srvice-block  {
  display: inline-block; width: 100%; margin: 0 0 30px; text-align: center; position: relative;
}

.srvice-block img  {
  display: inline-block; max-width: 100px; max-height: 97px; margin-bottom: 20px;
}

.srvice-block h4  {
  display: inline-block; width: 100%; margin: 0 0 10px; color: #002E44; font-size: 20px; font-weight: 700;
}

.srvice-block span  {
  display: inline-block; width: 100%; margin: 0 0 15px; padding: 0 20px;
}

.srvice-block a  {
  display: inline-block; text-decoration: none !important;
}

a.morebanner   {
  display: inline-block; padding: 0 20px; height: 44px; line-height: 40px; border-radius: 22px;
  border: 2px #fff solid; color: #fff !important; text-decoration: none !important; 
}

ul.breadcramp  {
  display: inline-block; width: 100%; padding: 0; margin: 0 0 40px; text-align: center;
}

ul.breadcramp li {
  display: inline-block; padding: 0 18px 0 0; position: relative;
}

[dir="rtl"] ul.breadcramp li {
   padding: 0 0 0 18px;
}

ul.breadcramp li::before {
  position: absolute; right:4px; font-size: 18px; color: #fff; content: '/'
}

[dir="rtl"] ul.breadcramp li::before {
  position: absolute; right:auto; left:4px; font-size: 18px; color: #fff; content: '/'
}

ul.breadcramp li:last-child {
  padding: 0;
}

ul.breadcramp li:last-child:before {
  display: none;
}

ul.breadcramp li a  {
  display: inline-block; color: #fff !important; text-decoration: none !important;
}

.servs-img  {
  display: inline-block; width: 100px; margin: 0 15px 20px 0;
}

[dir="rtl"] .servs-img  {
  margin: 0 0 20px 15px;
}

.subservices   {
  display: inline-block; font-size: 24px; font-weight: 700; margin-bottom: 20px; color: #002E44;
  vertical-align: bottom;
}

@media (min-width: 1600px) {
  .sliderimg   {
   width: 1170px !important;
  }
}

@media (min-width: 1800px) {
  .sliderimg   {
    width: 1265px !important;
   }
}

@media (min-width: 1920px) {
  .sliderimg   {
    width: 1460px !important;
   }
}

@media (min-width: 2100px) {
  .sliderimg   {
    width: 2050px !important;
   }
}

@media (min-width: 1400px) {
  .sliderimg   {
    top:37vh; width: 1007px;
  }
}

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

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

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

@media (max-width: 991px) {


  .nav-metal .navbar-toggler  {
    border:var(--bs-border-width) solid rgba(255, 0255, 255, 0.1)

  }
  .nav-metal .navbar-toggler-icon   {
    background-image: none; position: relative;
  }

  .nav-metal .navbar-toggler-icon::before   {
   position: absolute; font-family: feather; top:50%; left:50%; color: #fff; font-size: 26px; content: "\e88f";
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
  }

  .navbar-toggler  {
    color: #fff;
  }

  a.bluelink {
    height: 44px;
    line-height: 42px;
    padding: 0 20px;
    border-radius: 22px;
    font-size: 15px;
}

a.whitelink {
  height: 44px;
  line-height: 42px;
  padding: 0 20px;
  border-radius: 22px;
  font-size: 15px;
}

  .imgfooter {
    margin-top: 0;
    margin-bottom: 10px;
}

.contactdata {
  margin-top: 10px;
  margin-bottom: 15px;
}

  ul.social-media  {
    text-align: right; margin:5px 0 0 10px;
  }

  a.started   {
    display: none;
  }

  header  { height: unset; min-height: 100px; }
  .banner  {
    height: unset; min-height: 500px;
    background-size: cover
  }

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

  [dir="rtl"] .nav-metal  {
    text-align: right; float: right;
  }

  .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 {
   
    max-width: 100%;
}

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


}

ul.social-media li   {
  margin-right: 0; margin-left: 8px;
  }

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) {

  .subservices   {
   width: 100%;
  }

  .nav-pills .nav-link  {
    min-width: 130px
  }

  .additinallinks {

    position: relative; margin-top: -70px; max-width: calc(100% - 80px);
    left: 80px;
}

[dir="rtl"] .additinallinks {

  right: 80px; left:auto
}

  .imgfooter, .contactdata {
    text-align: center;
}

[dir="rtl"] .imgfooter,[dir="rtl"] .contactdata {
  text-align: center;
}

  .nav-pills li {
    margin: 0 5px 10px;
}
  .frameblock    {
    padding: 32px 15px 22px 70px;
  }

  .power   {
    text-align: center;
  }

header {
  padding: 0 5px;
}

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

  .banner img.sliderimg  {
    display: none;
  }

  .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) {
 
}