* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
   font-family: 'Alexandria', sans-serif;
  }
  
  :root {
    --main-color: #2764c3;
    --dark-color: #222222;
    --parg-color: #666666;
    --name-item: #2764c3;
    --drak-red: #d01418;
    --border-color: #6666662a;
    --border: 1px solid #6666662c;
  }
  .site-logo img{
    /* background-color: #ffffff; */
    width:70px ;
    height: 70px;
  }
   
  
  
  html {
    scroll-behavior: smooth;
    font-family: 'Alexandria', sans-serif;
  }
  h1,h2,h3,h4,h5,h6{
    color: var(--dark-color);
  }
  p {
    color: var(--parg-color);
  }
  
  /* btns */
  
  .ms-call-button,
  .ms-whats-button,
  .scrollUp {
  position: fixed;
  bottom: 14px;
  z-index: 9999;
  text-align: center;
  z-index: 9999;
  }
  
  
  /* arrowup */
  
  .arrowup{
    position: fixed;
    bottom: -100px;
    left: 20px;
    width: 45px;
    height: 45px;
    background: var(--main-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    z-index: 100;
  }
  .arrowup.showarro{
    bottom: 20px;
  }
  .arrowup svg{
    width: 25px;
    fill: #fff;
  }
  
  
  
  
  
  
  
  .container{
    width: 75%;
    margin: auto
  }
  /* section{
    padding: 50px 0;
  } */
  .btn{
    padding: 13px 40px;
    background: var(--main-color);
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
    font-weight: bold;
    border: 2px solid var(--main-color);
    transition: 0.3s ease;
    scale: 1;
  }
  .btn:hover{
    scale: 1.2;
  }
  
  
  /* Start Header */
  
  
  
  /* home section */
  .home{
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  .home svg{
    position: absolute;
    bottom: -2px;
    background-image: url(../img/svgHome.svg);
    width: 100%;
    background-repeat: no-repeat;
    height: 100%;
    background-size: 100%;
    background-position: bottom;
  }
  .home .upHero{
    background: linear-gradient(#043954c6,#043954c6),url(../img/serv3.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 350px 0px 300px;
    position: relative;
    overflow: hidden;
    text-align: center;
    top: -1px;
  }
  .home .container{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    padding: 100px 0;
    z-index: 100;
  }
  .home .upHero h1{
    color: var(--main-color);
    font-size: 40px;
    margin-bottom: 20px;
  }
  .home .upHero h2 {
    font-size: 35px;
    color: #fff;
    margin-bottom: 30px;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .home .upHero h2 img{
    width: 50px;
  }
  .home .upHero p{
    font-size: 20px;
    color: #e7e6e6;
    width: 60%;
    margin: auto;
    line-height: 1.5;
    margin-bottom: 35px;
  }
  .home .btns{
    display: flex;
    gap: 20px;
    justify-content: center;
  }
  .home .btn{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .home .btn img{
    width: 35px;
  }
  
  .top_sec{
    text-align: center;
    margin-bottom: 80px;
  }
  .top_sec h3{
    font-size: 40px;
    margin-bottom: 20px;
  }
  .top_sec p{
    font-size: 18px;
  }
  
  
  /* about section */ 
  
  .about .content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .about .content .div_text{
    width: 50%;
  }
  .about .content .div_text h1{
    font-size: 40px;
    color: var(--main-color);
    margin-bottom: 30px;
  }
  .about .content .div_text h2{
    font-size: 25px;
    margin-bottom: 20px;
  }
  .about .content .div_text p{
    font-size: 18px;
    margin-bottom: 30px;
  }
  .about .content .div_text ul li{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
  }
  
  .about .content .div_text ul li svg{
    width: 30px;
    fill: var(--main-color);
  }
  
  
  .about .content .div_img{
    width: 45%;
  }
  
  .about .content .div_img img{
    width: 100%;
    border-radius: 5px;
  }
  
  
  
  /* small section */ 
  
  .sm_sec{
    position: relative;
    padding: 100px 0;
    width: 100%;
    background: linear-gradient(#333b3edb, #333b3edb), url(../img/serv3.jpg), no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    text-align: center;
  }
  .sm_sec .container{
    display: flex;
    justify-content: space-between;
  }
  .sm_sec .container .box{
    width: 24%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .sm_sec .container .box img{
    width: 100px;
    margin-bottom: 20px;
  }
  .sm_sec .container .box span{
    color: var(--main-color);
    font-size: 50px;
    font-weight: bolder;
    margin-bottom: 10px;
  }
  
  .sm_sec .container .box h5{
    font-size: 30px;
    color: #FFF;
  }
  
  
  
  
  
  
  
  /* why_us Section */
  
  .why_us .boxs{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 100px;
  }
  
  .why_us .boxs .box{
    width: 24%;
    text-align: center;
  }
  .why_us .boxs .box img{
    width: 100px;
    margin-bottom: 20px;
  }
  
  .why_us .boxs .box h4{
    font-size: 22px;
  }
  
  
  /* blog section */
  
  .blog{
    background: #E0EFFB;
  }
  .blog .boxs{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .blog .boxs .box{
    width: 31%;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 5px 5px 12px #9191914b;
    transition: 0.3s ease-in-out;
  }
  .blog .boxs .box:hover{
    box-shadow: 5px 5px 22px #5d5d5db8;
  }
  
  .blog .boxs .box::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: var(--main-color);
  }
  .blog .boxs .box .div_img{
    position: relative;
  }
  .blog .boxs .box .div_img .icons{
    position: absolute;
    background: var(--main-color);
    z-index: 10;
    top: calc(100% - 45px);
    right: 10px;
    border-radius: 50%;
    overflow: hidden;
    padding: 10px;
    width: 80px;
    height: 80px;
    border: 1px dashed #fff ;
  }
  .blog .boxs .box .div_img .icons img{
    width: 100%;
  }
  
  .blog .boxs .box .div_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    scale: 1;
    transition: 0.3s ease;
    height: 200px;
  
  }
  .blog .boxs .box .div_img .img_serv{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 200px;
  }
  .blog .boxs .box:hover .div_img img{
    scale: 1.1;
  }
  
  .blog .boxs .box .content{
    padding: 40px 15px 40px;
  }
  .blog .boxs .box h2{
    font-size: 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .blog .boxs .box h2 svg{
    width: 45px;
    height: 45px;
    border-radius: 5px;
    border: 2px solid #c5c5c5;
    fill: var(--main-color);
  
  }
  .blog .boxs .box p{
    margin-bottom: 30px;
  }
  
  
  /* Start Footer */
  
  /* Start Footer */
  
  footer{
    background: #394150;
  }
  footer .container{
    display: flex;
    justify-content: space-between;
    padding: 30px 0 0px;
  }
  footer .container .big_row{
    width: 25%;
    position: relative;
    top: -px;
  }
  footer .container .big_row .hotline{
    display: flex;
    align-items: center;
    margin: 15px 0;
    gap: 10px;
  }
  footer .container .big_row .logo{
    width: 63%;
    background-color: aliceblue;
    border-radius: 15px;
  }
  footer .container .big_row .hotline i{
    font-size: 60px;
    color: var(--main-color);
  }
  footer .container .big_row .hotline h5{
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
  }
  footer .container .big_row .hotline h6{
    color: var(--main-color);
    font-size: 18px;
  }
  
  
  footer .container .big_row p{
    width: 90%;
    color: #b1b1b1;
    font-size: 14px;
    line-height: 1.5;
  }
  footer .container .row{
    width: 22%;
  }
  footer .container .row h4{
    color: #fff;
    margin-bottom: 20px;
    font-size: 18px;
  }
  footer .container .row .links{
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  footer .container .row .links a{
    color: #b1b1b1;
    font-size: 14px;
    position: relative;
    right: 0;
    transition: 0.3s ease-in-out;
    display: flex;
    align-items: center;
  }
  footer .container .row .links a svg{
    width: 17px;
    fill: #b1b1b1;
    transition: 0.3s ease-in-out;
  
  }
  footer .container .row .links a:hover{
    right: 8px;
    color: var(--main-color);
  }
  footer .container .row .links a:hover svg{
    fill: var(--main-color);
  }
  footer .container .row .icons{
    display: flex;
    gap: 20px;
  }
  footer .container .row .icons img{
    width: 40px;
    cursor: pointer;
    scale: 1;
    transition: 0.3s ease;
  }
  footer .container .row .icons img:hover{
    scale: 1.2;
  }
  
  footer .bottom_footer{
    background: #202935;
  }
  footer .bottom_footer .container{
    padding: 20px 0;
    justify-content: center;
    text-align: center;
  }
  footer .bottom_footer .container span{
    color: var(--main-color);
  }
  @media(max-width:1450px){
    .container{
        width: 93%;
    }
  }
  
  
  @media(max-width:1000px){
   
  
    /* about */ 
  
    .about .content{
        flex-direction: column;
        gap: 50px;
    }
    .about .content .div_text{
        width: 100%;
    }
    .about .content .div_img{
        width: 80%;
        margin: auto;
    }
  
  
    .sm_sec .container .box img{
        width: 80px;
    }
    .sm_sec .container .box span{
        color: var(--main-color);
        font-size: 30px;
        font-weight: bolder;
        margin-bottom: 10px;
    }
    
    .sm_sec .container .box h5{
        font-size: 20px;
        color: #FFF;
    }
  
  
  
  
  
  
  
  
  
  
  
    .services .boxs .box{
        width: 49%;
        margin-bottom: 30px;
    }
    .why_us .boxs .box{
        width: 48%;
        margin-bottom: 40px;
    }
  
  
    .blog .boxs .box{
        width: 49%;
        margin-bottom: 30px;
    }
    footer .container{
      flex-wrap: wrap;
      width: 90%;
  }
  footer .container .row{
      width: 40%;
      margin-bottom: 20px;
  }
  footer .container .big_row{
      width: 55%;
      margin-bottom: 20px;
  }
  }
  
  @media(max-width:500px){
    .top_sec h3{
        font-size: 30px;
    }
    .top_sec p{
        font-size: 15px;
    }
    .ms-call-icon{
        width: 50px;
        height: 50px;
    }
    .ms-call-icon svg{
        width: 30px;
        line-height: 50px;
        height: 50px;
    }
    .ms-call-button{
        left: auto;
        right: 5px;
        bottom: 20px;
    }
    body{
        margin-top: 90px;
    }
  
  
    .about .content .div_img{
        width: 95%;
        margin: auto;
    }
    .about .content{
        gap: 20px;
    }
    .about .content .div_text ul li{
        font-size: 14px;
    }
    .about .content .div_text p{
        font-size: 16px;
        line-height: 1.7;
    }
    .about .content .div_text h2{
        font-size: 20px;
    }
    .about .content .div_text h1{
        font-size: 35px;
    }
  
  
    .sm_sec .container{
        flex-wrap: wrap;
    }
    .sm_sec .container .box{
        width: 49%;
        margin-bottom: 40px;
    }
    .sm_sec .container .box img{
        width: 80px;
    }
    .sm_sec .container .box span{
        font-size: 28px;
    }
    .sm_sec .container .box h5{
        font-size: 18px;
    }
    .sm_sec{
        padding: 50px 0;
    }
  
    .home .upHero p{
        font-size: 16px;
        width: 90%;
    }
    .home .upHero h1{
        font-size: 35px;
    }
    .home .upHero h2{
        font-size: 30px;
        margin-bottom: 15px;
    }
    .home .upHero{
        padding: 220px 0 330px;
    }
    .home .btns{
        flex-direction: column;
        align-items: center;
    }
    .home .btn{
        font-size: 16px;
        padding: 13px 35px;
        width: max-content;
    }
    .home .btn img{
        width: 25px;
    }
  
  
  
  
  
    .services .boxs {
        justify-content: center;
    }
    .services .boxs .box{
        width: 90%;
        margin-bottom: 30px;
    }
    .services .boxs .box .div_img .img_serv{
        height: 170px;
    }
    .services .boxs .box p{
        font-size: 14px;
    }
    .services .boxs .box h2{
        font-size: 20px;
        margin-bottom: 12px;
    }
  
  
    .why_us .boxs{
        margin-top: 0;
    }
    .why_us .boxs .box{
        width: 49%;
    }
    .why_us .boxs .box img{
        width: 80px;
    }
    .why_us .boxs .box h4{
        font-size: 16px;
    }
  
  
  
    .blog .boxs {
        justify-content: center;
    }
    .blog .boxs .box{
        width: 90%;
        margin-bottom: 30px;
    }
    .blog .boxs .box .div_img .img_serv{
        height: 170px;
    }
    .blog .boxs .box p{
        font-size: 14px;
    }
    .blog .boxs .box h2{
        font-size: 20px;
        margin-bottom: 12px;
    }
  
  
  
  
    footer .container .row{
      width: 100%;
  }
  footer .container .big_row{
      width: 100%;
  }
  footer .container .row .icons{
    padding-bottom: 60px;
  }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  .sup-title-widget-defualt:before {
    position: absolute;
    content: '';
    height: 1px;
    width: 100%;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #036bb5;
  }
  
  
  .sup-title-widget-defualt {
    font-weight: 400;
    line-height: 1.4;
    position: relative;
    width: max-content;
    margin: auto;
    margin-bottom: 40px;
  }
  
  .sup-title-widget-defualt:after {
    position: absolute;
    content: '';
    height: 8px;
    width: 8px;
    border-radius: 50px;
    background-color: #fdb530;
    left: 0;
    bottom: -13px;
    animation: pula 5s ease infinite alternate;
  }
  
  @media only screen and (max-width: 1000px){
    .sup-title-widget-defualt {
        font-size: 20px;
    }
    }
    
    
    @media only screen and (max-width: 768px){
    .sup-title-widget-defualt {
        font-size: 19px;
    }
  }
  
  @media only screen and (max-width: 590px){
  .sup-title-widget-defualt {
        font-size: 19px;
    }
    
    .sup-title-widget-defualt {
      text-align: center;
    }
  }
  
  
  @keyframes pula {
    0% {
        transform: translateX(0)
    }
  
    100% {
        transform: translateX(-168px);
    }
  }
  
  @keyframes pula {
    0% {
        left:0;
    }
  
    100% {
        left:100%;
    }
  }
  
  /* معلومات الثيم */
  html{
    scroll-behavior: smooth;
  }
  *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
     font-family: 'Alexandria', sans-serif;
  
  }
  
  
  
  
  
  html {
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  table {
    background-color: transparent;
  }
  table {
    border: 1px solid #ddd;
    margin-bottom: 30px;
    width: 100%;
  }
  table.container{
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
  
  }
  
  /* .div-text a{
  
    display: contents;
  
  
  } */
  
  a {
    color: #4169e1;
    /* font-weight: bolder; */
    
  }
  table>tbody>tr>td, table>tbody>tr>th, table>tfoot>tr>td, table>tfoot>tr>th, table>thead>tr>td, table>thead>tr>th {
    border: 1px solid #ddd;
    padding: 7px 10px;
  }
  
  *,
  ::after,
  ::before {
    box-sizing: inherit
  }
  
  body {
     font-family: 'Alexandria', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #212121;
    background-color: #ffffff;
    margin: 0
  }
  
  
  button {
    background: 0 0;
    border: 0;
    cursor: pointer
  }
  
  svg:not(:root) {
    overflow: hidden
  }
  
  svg {
    vertical-align: middle
  }
  
  img {
    max-width: 100%;
    height: auto;
    /* vertical-align: middle */
  }
  
  p {
    margin: 0
  }
  iframe{
    max-width:100%
  }
  ::placeholder { 
    color: #6e6e6e;
    opacity: 1; 
       font-weight: 900;
  font-size: 21px;
  }
  
  :-ms-input-placeholder { 
   color: #2b2b2b;
    opacity: 1; 
       font-weight: 900;
  font-size: 21px;
  }
  
  ::-ms-input-placeholder { 
   color: #2b2b2b;
    opacity: 1; 
       font-weight: 900;
    font-size: 21px;
  }
  
  .screen-reader {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute!important;
    width: 1px;
    word-wrap: normal!important
  }
  
  .screen-reader:active,
  .screen-reader:focus {
    background-color: #f1f1f1;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    clip: auto!important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
  }
  
  .hideflow {
    overflow: hidden
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .txtcenter {
      text-align: center
    }
    
    header {
      display: block;
      /* position: relative;
      box-shadow: 0 0 50px 0 rgb(0 0 0 / 30%); */
    }
    header.sticky {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 9999;
      background-color: #fff;
    }
    
    .topbar-section {
      padding: 15px;
      background: transparent linear-gradient(272deg, #6a4797 0, #563a7a 100%);
      background: transparent linear-gradient(272deg, #6a4797 0, #563a7a 100%)
    }
    
    .site-branding {
      text-align: center
    }
    .topbar {
      background: #051d56;
      color: #fff;
    }
    
    
    .topbar-innr {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    
    .topbar-innr ul {
      list-style: none;
      margin: 0;
      padding: 0;
      width: 69%;
      font-size: 14px;
    }
    .topbar-innr ul li{display: inline-block;margin-right: 15px;}
    
    .topbar-innr ul li span{
    color: #d6d6d6;
    margin-left: 8px;
    font-size: 15px;
    }
    .topbar-innr .left {
      width: 66%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    
    .topbar-innr .right {
      width: 34%;
    }
    .call-us-wrap {
      width: 20%;
    }
    a.call-us {
      /* background: linear-gradient(90deg, rgba(235,100,64,1) 0%, rgba(255,179,68,1) 100%); */
      background-color:#051d56 ;
      text-decoration: none;
      padding: 6px 18px;
      display: inline-block;
      border-radius: 15px;
      color: #fff;
    }
    
    .site-title-inner {
      margin-right: 10px;
      line-height: 1.3
    }
    
    .site-title {
      font-size: 20px;
      font-weight: 900;
      text-decoration: none
    }
    
    .site-description {
      font-size: 14px;
      padding-top: 5px;
    }
    
    .topbar-inner {
      width: 100%
    }
    
    .search-wrap {
      /* margin: 0 41px 50px 28px; */
    }
    
    .search-wrap.open {
      display: block;
    }
    
    .search-form {
      position: relative;
      width: 100%;
    }
    
    .search-field {
      width: 100%;
      padding: 7px 17px 00 3px;
      line-height: 1;
      box-sizing: border-box;
      outline: 0;
      height: 50px;
      border: 1px solid #026873;
      background: #e8ebf2;
      border-radius: 15px;
      color: #000000;
      overflow: hidden;
    }
    
    .search-submit {
      position: absolute;
      left: 00;
      top: 0px;
      bottom: 0;
      border: 0;
      background: 0 0;
      outline: 0;
      margin: 0;
      padding: 0 14px;
      z-index: 2;
      color: #fff;
      background: #051d56;
      background: linear-gradient(90deg, #051d56 0%, #051d56 100%);
      border-radius: 15px 0 0 15px;
      font-size: 21px;
      font-weight: 900;
    }
    
    .menubar-section {
      background: #eaeffc;
    }
    
    .sidebar-close
    {
      border-radius: 10px;
      background: 0 0;
      border: 1px solid rgb(0 0 0 / 10%);
      padding: 8px 10px
    }
    
    .main-navigation ul {
      list-style: none;
      margin: 0
    }
    
    .menubar-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center
    }
    
    .menu-items li {
      position: relative
    }
    
    .menu-items li a {
      color: #102259;
      display: block;
      padding: 10px;
      text-decoration: none;
      font-weight: 900;
      font-size: 16px;
      margin: 2px 0;
    }
    
    button.search-toggle {
      padding: 21px 18px;
      background: rgba(0,0,0,.1);
    }
    
    
    .icon-dropdown {
      border: solid #3c474f;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transition-duration: .8s;
      transition: transform .3s, -webkit-transform .3s
    }
    
    .submenu-toggle {
      display: block;
      left: 0;
      padding: 18px 16px;
      position: absolute;
      top: 0;
      background: #ffffff;
    }
    
    .sub-menu {
      display: none
    }
    
    .sub-menu.active {
      display: block
    }
    
    .waves {
      position: relative;
      width: 100%;
      height: 15vh;
      margin-bottom: -7px;
      /*Fix for safari gap*/
      min-height: 100px;
      max-height: 150px;
    }
    
    .submenu-toggle.active .icon-dropdown {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg)
    }
    
    .book-now a {
      text-decoration: none;
      font-weight: 800;
      font-size: 18px;
      color: #3f51b5;
      margin-left: 8px
    }
    
    .book-now a span {
      margin-right: 10px
    }
    
    .bar-align {
      display: flex;
      position: relative;
      align-items: center;
      flex-wrap: wrap;
      
    }
    
    
    
    .wave {
      width: 120%;
      height: 50px;
      background: #eff5fe;
      margin-left: -10%;
    }
    
    
    .topbar .follow-us {
      display: inline-block;
      width: 30%;
    }
    
    .contact-menu {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      margin: 0;
      padding: 0;
      border-bottom: 1px solid #3d275a;
      padding: 15px 0;
      border-top: 1px solid #3d275a;
      margin-bottom: 25px
    }
    
    .contact-menu a {
      color: #fff;
      text-decoration: none
    }
    
    .contact-menu li {
      width: 50%;
      position: relative;
      margin-bottom: 18px;
      text-align: right
    }
    
    .contact-menu li::before {
      content: " ";
      display: inline-block;
      border: 6px solid transparent;
      border-right-color: #ebd67a;
      width: 0;
      height: 0;
      margin-left: 15px
    }
    
    .copyright {
      padding: 15px 0;
      font-weight: 700
    }
    
    .topbar .follow-us a {
      margin: 5px;
      display: inline-block;
    }
    
    .contact-info {
    }
    
    .contact-section {
      text-align: center;
      width: 100%;
      margin-bottom: 15px
    }
    
    .contact-txt span {
      display: block;
    }
    
    .contact-txt .bold {
      color: #ffd31e;
      font-weight: 700;
      font-size: 23px;
    }
    
    .contact-icon {
      margin-bottom: 10px;
      background: #ffffff;
      padding: 9px;
      border-radius: 50px;
      border: 6px solid #c6ddff;
      box-shadow: 0 5px 15px 0 rgb(0 0 0 / 8%);
    }
    
    .scrollUp {
      display: none;
      position: fixed;
      left: 7px;
      bottom: 8px;
      background: #006bb7;
      padding: 8px 5px;
      border-radius: 12%;
      z-index: 5447778;
      justify-content: center;
      align-items: center;
      border: 1px solid #000000;
      transition: 0.3s ease;
      /* background: linear-gradient(90deg, rgb(0 0 0) 0%, rgba(255, 179, 68, 1) 100%); */
    }
    .scrollUp:hover{
      background: transparent;
    }
    .scrollUp svg{
      fill: #fff;
    }
    .scrollUp:hover svg{
      fill:#006bb7;
      ;
    }
    .scrollUp.active {
      display: flex
    }
    
    .call-with-phone,
    .whatsapp-chat {
      position: fixed;
      bottom: 69px;
      bottom: 0px;
      text-decoration: none;
      animation: animate-waggle 5s infinite;
      z-index: 9999;
      right: 15px;
    }
    
    .call-with-phone {
      bottom: 78px;
    }
    
    .call-phone-icon,
    .whatsapp-chat-icon {
      background: #4caf50;
      display: inline-block;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      padding: 11px;
      box-shadow: 8px 8px 30px 0 rgb(64 82 185 / 30%)
    }
    
    .not-found {
      padding: 80px 0;
      text-align: center
    }
    
    .not-found h1 span {
      display: block
    }
    
    .not-found .number {
      color: #006bb7;
      position: relative;
      font: 839 133px Consolas;
      letter-spacing: 5vmin;
      display: block;
    }
    .title-line-right,
    .title-line {
      position: relative;
      padding-bottom: 13px;
      display: inline-block;
    }
    .title-line::after {
    content: '';
    height: 4px;
    width: 44%;
    position: absolute;
    bottom: 0;
    margin: 0 auto;
    left: 0;
    right: 0;
    background: #f0a589;
    background: linear-gradient(90deg, #051d56 0%, #051d56 100%);
    }
     
    .title-line-right::after{
      content: '';
      height: 4px;
      width: 28%;
      position: absolute;
      bottom: 0;
      right: 0;
      background: #f0a589;
      background: linear-gradient(90deg, #051d56 0%, #051d56 100%);
    }
    @-webkit-keyframes moving {
      to {
          background-position: 100vmin 20vmin, -100vmin -25vmin
      }
    }
    
    @keyframes moving {
      to {
          background-position: 100vmin 20vmin, -100vmin -25vmin
      }
    }
    
    @keyframes animate-waggle {
      0% {
          transform: none
      }
      10% {
          transform: rotateZ(-20deg) scale(1.2)
      }
      13% {
          transform: rotateZ(25deg) scale(1.2)
      }
      15% {
          transform: rotateZ(-15deg) scale(1.2)
      }
      17% {
          transform: rotateZ(15deg) scale(1.2)
      }
      20% {
          transform: rotateZ(-12deg) scale(1.2)
      }
      22% {
          transform: rotateZ(0) scale(1.2)
      }
      100%,
      24% {
          transform: rotateZ(0) scale(1)
      }
    }
    
    
    .call-us a {
      background: #006bb7;
      color: #fff;
      text-decoration: none;
      padding: 6px 15px;
      display: inline-block;
    }
    
    
    
    @media only screen and (max-width: 590px){
    .background {
      margin-inline-end: 0px;
      width: 45px;
      height: 45px;
    }}
    @media only screen and (max-width: 992px){
    .background {
      border-radius: 16px;
      background: #3065de;
      /* backdrop-filter: blur(15px); */
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-inline-end: 18px;
    }}
    @media (max-width: 992px) {
      .bar-align{
          justify-content: space-between;
          /* flex-direction: row-reverse; */
      }
      .waves {
          height: 40px;
          min-height: 40px;
      }
      .main-nav {
          background: #ffffff;
          position: fixed;
          height: 100%;
          top: 0;
          right: 0;
          overflow-x: hidden;
          padding-top: 60px;
          width: 0;
          transition: .5s;
          visibility: hidden;
          opacity: 0;
          z-index: 999;
          /* background: linear-gradient(186deg, #024959 0%, #026873 100%); */
      }
      .menu-items {
          padding: 0;
          margin: 0;
          padding: 60px 0 21px 0;
      }
      .menu-items li{
          border-top: 1px solid #051d5623;
      }
      .sidebar-close {
          background: #ffffff;
          position: absolute;
          top: 9px;
          left: 15px;
          padding: 4px 7px;
          z-index: 9999
      }
      .main-nav.active {
          width: 100%;
          visibility: visible;
          opacity: 1;
          padding: 25px;
      }
      .sidebar-open {
          /* background: #051d56;
          border: 0;
          margin-right: 13px;
          background: linear-gradient(90deg, rgba(235,100,64,1) 0%, rgba(255,179,68,1) 100%); */
          width: 32px;
          height: 32px;
          padding: 4px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
      }
    
     
    .sidebar-open span {
      width: 100%;
      height: 2px;
      border-radius: 0.125rem;
      background-color: #ffffff;
      transition: transform .4s, background-color .4s, opacity .4s;
    }
      /* .topbar,
      .call-us-wrap{
          display: none
      } */
     
    }
    
    
    
    @media (min-width: 992px) {
     
      .main-nav {
      width: 65%;
    }
      .sidebar-close,
      .sidebar-open,
      .submenu-toggle {
          display: none
      }
      .menu-items>li {
          display: inline-block
      }
      .menu-items li.current > a{
          /* border-bottom: 1px solid #051d56; */
          color: #051d56;
      }
      .menu-items li a {
          box-shadow: none;
          padding: 5px 17px;
      }
      .menu-items li a:hover {
          color: #006bb7;
      
      }
      .menu-items li.has-children>a:after {
          content: " ";
          border: solid #000000;
          border-width: 0 2px 2px 0;
          display: inline-block;
          padding: 2.5px;
          transform: rotate(45deg);
          position: relative;
          top: -1px;
          right: 7px
      }
    
       .menu-items .sub-menu li.has-children>a:after {
          border: solid #707070;
          border-width: 0 2px 2px 0;
      }
      
      .menu-items .sub-menu .has-children>a:after {
          position: absolute;
          top: 43%;
          left: 1em;
          right: auto;
          transform: rotate(137deg)
      }
      .menu-items .sub-menu {
          background-color: #fff;
          position: absolute;
          top: 100%;
          right: 0;
          min-width: 180px;
          padding: 0;
          z-index: 9999;
          box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
          border-radius: 0 0 10px 10px;
      }
       .menu-items .sub-menu a {
          color: #000;
          margin: 0;
          padding: 10px 16px;
          border-bottom: 1px solid #e5e5e5;
          font-size: 13px;
      }
      .menu-items .sub-menu a:hover{
          color: #fff;
          background-color: #006bc3;
      }
      .menu-items .sub-menu .has-children .sub-menu {
          right: 100%;
          top: 0
      }
      .menu-items .has-children:hover>.sub-menu {
          display: block
      }
      .topbar-inner {
          display: flex;
          align-items: center;
          flex-wrap: wrap
      }
      .site-branding {
          margin-left: 35px;
          width: 11%;
      }
      .col-md-6 {
          width: 100%;
          margin: 31px 0;
      }
      .contact-menu li {
          width: 33.3333%
      }
      .contact-section {
          width: 33.3333%;
          display: flex;
          text-align: right
      }
      .contact-icon {
          margin-left: 17px
      }
     
      .site-title-inner {
          text-align: right
      }
    
    }
    
    
    
    
    
    [class^="icon-"]:before,
    [class*=" icon-"]:before {
      font-family: "icons" !important;
      font-style: normal !important;
      font-weight: normal !important;
      font-variant: normal !important;
      text-transform: none !important;
      speak: none;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      vertical-align: middle;
    }
    .icon-minus-round:before {
      content: "\66";
    }
    .icon-question-circle:before {
      content: "\61";
    }
    .icon-plus:before {
      content: "\62";
    }
    .icon-phone:before {
      content: "\63";
    }
    .icon-envelope:before {
      content: "\64";
    }
    .icon-map-marker:before {
      content: "\65";
    }
    .icon-whatsapp:before {
      content: "\67";
    }
    .icon-linkedin-square:before {
      content: "\68";
    }
    .icon-facebook-alt:before {
      content: "\6a";
    }
    .icon-social-whatsapp:before {
      content: "\69";
    }
    .icon-social-instagram:before {
      content: "\6b";
    }
    .icon-twitter:before {
      content: "\6c";
    }
    .icon-angle-double-left:before {
      content: "\6d";
    }
    section.question {
      /* padding: 80px 0; */
    }
    
    .question-innr {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: flex-start;
    }
    
    .question-content {
      width: 100%;
    }
    
    .question-img {
      width: 100%;
    }
    
    .qustion-box {
      box-shadow: 0 0 25px 0 rgb(0 0 0 / 10%);
      border-radius: 15px;
      margin: 27px 0;
      padding: 20px 15px;
      color: #1b4a58;
    }
    
    .qustion-box p.answer {
      display: none;
    }
    
    .qustion-box.active .answer {
      display: block;
      padding: 17px;
      margin-top: 24px;
    }
    
    h2.question-title {
      position: relative;
      color: #1b4a58;
      display: block;
      width: 100%;
      text-align: right;
      font-size: 18px;
      font-weight: 900;
    }
    
    span.icon.icon-plus {
      position: absolute;
      left: 0;
    }
    
    .qustion-box.active .question-title {
      color: #e66949;
    }
    
    .qustion-box.active .question-title .icon-plus:before {
      content: "\66";
    }
    
    .question-other {
      margin: 10px 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-evenly;
      background: #e8ebf2;
      color: #154d5b;
      padding: 80px 43px;
      border-radius: 27px;
    }
    
    .question-other a {
      background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
      text-decoration: none;
      padding: 6px 18px;
      display: inline-block;
      border-radius: 15px;
      color: #000000;
    }
    
    .clients-first-innr {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
    
    
    
    section.clients-first {
      padding: 80px 0;
    }
    
    section.clients-second {
      padding: 80px 0;
    }
    
    .clients-box-innr {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
    
    .clients-box {
      width: 35%;
      margin: 20px;
    }
    
    @media (min-width: 992px) {
      .question-content {
          width: 100%;
      }
    
      .question-img {
          width: 30%;
      }
    
     h2.question-title {
          font-size: 24px;
      }
      .clients-content {
      width: 56%;
    }
    
    .clients-img {
      width: 31%;
    }
      .clients-box {
      width: 13%;
    }
    }
    
    section.business-first {
      /* padding: 80px 0; */
      text-align: center;
    }
    
    /* .business-first-innr {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    } */
    @media (min-width: 992px) {
      .business-content {
          width: 100%;
      }
    
      .business-img {
          width: 100%;
      }
    }
    
    /* سوشيال هيدر */
    
    .phone {
      margin: 0 8px;
    }
    
    .phone a {
      display: block;
      font-weight: 700;
      font-size: 18px;
      padding: 7px 10px;
      text-decoration: none;
      color: #006bb7;
    }
    
    .phone span svg {
      transform: rotate(261deg);
      vertical-align: middle
    }
    
    .social-follow a {
      margin: 0 1px;
      width: 40px;
      height: 40px;
      text-align: center;
      display: inline-block;
      border-radius: 6px;
      line-height: 35px
    }
    
    /* a.whatsapp {
      background: #34d367
    }
    
    a.facebook {
      background: #2c76f0
    }
    
    a.twitter {
      background: #32a0f0
    }
    
    a.instgram {
      background: #e14162
    } */
    
    
    
    
    
    
    
    
    @media only screen and (max-width: 600px) {
     
    
      .social-follow a {
          width: 30px;
          height: 30px;
          line-height: 25px;
          text-align: center;
      }
    
      .social-follow a svg {
          width: 20px;
          height: 20px
      }
    }
    
    
    /* blog */
    /*blog*/
    .p-block {
      display: flex;
      flex-wrap: wrap;
      margin: -20px -20px 20px;
      justify-content: center;
      overflow: hidden;
    }
    .p-block-box-v3 {
      margin: 20px;
      overflow: hidden;
      min-width: 340px;
      flex: 1 1 0%;
      max-width: 480px;
      background: #fff;
      box-shadow: #dae7f3 0 6px 7px;
      position: relative;
      transition: all .1s ease 0s;
      justify-content: center;
      border-radius: 8px;
      visibility: visible;
      /* animation-duration: 3s;
      animation-name: flipInY; */
    }
    
    .p-block-box-v3::before {
      content: "";
      position: absolute;
      top: 0;
      left: -83%;
      z-index: 2;
      display: block;
      width: 50%;
      height: 100%;
      background: #fff;
      transform: skewX(-25deg);
      transition: all .2s cubic-bezier(.19,1,.22,1) 0s;
      opacity: 0;
      pointer-events: none;
    }
    a {
      text-decoration: none;
      transition: color 50ms ease 0s;
      color: #4169e1;
    }
    .img-project-v3 {
      height: 100%;
      position: relative;
    }
    .img-project-v3 img {
      height: 215px;
      width: 100%;
      object-fit: cover;
    }
    .p-block-box-v3:hover .overlay-box {
      opacity: 1;
      transform: translate3d(0px, 0px, 0px);
    }
    
    .overlay-box {
      position: absolute;
      bottom: 0px;
      text-align: center;
      left: 0px;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(51, 51, 51, 0) 0px, rgba(5, 4, 116, 0.51) 75%);
      content: "";
      transform: translate3d(0px, 1%, 0px);
      transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
      opacity: 0;
    }
    .overlay-inner {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      display: table;
      vertical-align: middle;
      padding: 10px 0px;
    }
    .content {
      position: relative;
      display: table-cell;
      vertical-align: middle;
    }
    
    .content {
      padding: 16px;
    }
    .title_content_blog {
      padding: 25px 23px 20px;
      display: flex;
      flex-direction: column;
      text-align: right;
      justify-content: center;
      position: relative;
    }
    .contesaet_shap1 {
      text-align: right;
      display: flex;
      flex-direction: column;
      flex: 1 1 0%;
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 10px;
    }
    .contesaet_shap1 h3 {
      margin-bottom: 8px;
      font-size: 20px;
      position: relative;
      color: #1f2453;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 11px;
    }
    .contesaet_shap1 h3::before {
      content: "";
      width: 36px;
      height: 2px;
      bottom: -2px;
      right: 0;
      background-color: rgba(225,169,220,.13);
      position: absolute;
      transition: all .4s ease 0s;
    }
    .contesaet_shap1 h3 i {
      font-size: 29px;
      margin-left: 11px;
      color: #5d2b74;
      background: #eaf7ff;
      border-radius: 8px;
      font-weight: 400;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .1s ease 0s;
    }
    .contesaet_shap1 span .svg1 {
      font-size: 29px;
      margin-left: 11px;
      color: #5d2b74;
      background: #eaf7ff;
      border-radius: 8px;
      font-weight: 400;
      width: 31px;
      height: 27px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .1s ease 0s;
    }
    .fa-angle-left:before {
      content: "\f104";
    }
    .contesaet_shap1 p {
      font-size: 16px;
      margin-bottom: 5px;
      color: #000;
    }
    .linkes_blog2 {
      display: flex;
      text-align: center;
      align-items: center;
      flex: 1 1 0%;
    }
    .linkes_blog2 a {
      font-size: 16px;
      font-weight: 700;
      color: #ffffff;
      display: flex;
      text-align: center;
      justify-content: center;
      background: rgb(27 110 221 / 59%);
      transition: all .2s ease 0s;
      padding: 8px 22px;
      border-radius: 8px;
      align-items: center;
      margin-right: auto;
    }
    .linkes_blog2 a span {
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
    }
    .linkes_blog2 i {
      transition: all .2s ease 0s;
      margin-right: 11px;
    }
    .fa-chevron-double-left:before, .fa-chevrons-left:before {
      content: "\f323";
    }
    .p-block-box-v3:hover {
      background: #fdfafa;
    }
    .p-block-box-v3:hover {
      transform: scale(1.01) translate(0,-8px);
      box-shadow: 0 27px 52px #0003;
    }
    .p-block-box-v3:hover::before {
      left: 150%;
      transition: all 1.5s cubic-bezier(.19,1,.22,1) 0s;
      opacity: .2;
    }
    .p-block-box-v3:hover .contesaet_shap1 h3 {
      color: rgb(35 165 184);
    }
    .p-block-box-v3:hover .contesaet_shap1 h3::before {
      left: 430px;
      width: 100%;
    }
    .p-block-box-v3:hover .contesaet_shap1 h3 i {
      background: #eaf7ff;
      color: #0e59a5;
    }
    .p-block-box-v3:hover .contesaet_shap1 h3 i {
      background: #eaf7ff;
      color: #0e59a5;
    }
    .p-block-box-v3:hover .linkes_blog2 a {
      background: #26abbe;
      color: #fff;
    }
    .p-block-box-v3:hover .linkes_blog2 i {
      transform: scale(1);
      margin-right: 8px;
      opacity: 1;
      visibility: visible;
    }
    .foot-project {
      display: flex;
      text-align: right;
      width: 100%;
      align-items: center;
      margin-top: 8px;
      position: relative;
    }
    .foot-project>div {
      flex: 1 1 0%;
    }
    .admin_icon {
      display: flex;
      align-items: center;
    }
    .foot-project>div {
      flex: 1 1 0%;
    }
    .rating {
      align-self: center;
    }
    .rating {
      flex: 1 1 0%;
      justify-content: left;
      text-align: left;
    }
    .caption a {
      position: absolute;
      left: 0%;
      top: 0px;
      background: #e3edfb;
      color: #000;
      font-weight: bold;
      z-index: 999;
      padding: 10px;
      border-radius: 0 10px 10px 00;
      font-size: 12px;
    }
    
    .titlesconcept span {
      font-size: 36px;
      line-height: 50px;
      padding-bottom: 5px;
      font-weight: 700;
      margin-bottom: 2px;
      color: #3c3c3c;
      border-bottom: 2px solid #00000024;
    }
    .titles_concept {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-bottom: 30px;
      z-index: 1;
    }
    
    
    
    @media only screen and (max-width: 580px) {
    
    
      
      .owl-item {
          padding: 10px 10px;
      }
     
    }
    .all-info {
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      
    }
    @media only screen and (max-width: 993px){
    .all-info {
      flex-direction: column;
     
    }}
    
    
    @media only screen and (min-width: 768px) {
      .banner .content {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-top: 120px;
      }
      h1 {
          font-size: 35px;
      }
      .our-featurs .txt-justify {
          padding-left: 40px;
      }
      .sec-pad-80 {
          padding: 80px 0
      }
      .banner {
          padding: 0;
      }
      .hide-xs {
          display: block;
      }
      .col {
          float: right;
      }
      .col-2 {
          width: 16.666667%
      }
      .col-5 {
          width: 50%;
      }
      .col-6 {
          width: 44%;
      }
      .col-7 {
          width: 56%;
      }
      .featurs-card {
          margin: 15px;
      }
      .card-archive {
          width: 22%;
      }
      .card-archive:nth-child(2n+1) {
          clear: none;
      }
      .card-sm{
          width: 14%;
      }
    }
    /* فديو */
    video-slice {
      display: block;
      padding: 75px 0;
    }
    
    .video-box, video-slice {
      position: relative;
      z-index: 1;
      overflow: hidden;
    }
    
    video-slice:before {
      left: -10%;
      background: #f94b4b;
      border-radius: 0 150px 150px 0;
      transform: rotate(10deg);
    }
    
    video-slice:after, video-slice:before {
      content: '';
      bottom: 40px;
      width: 40%;
      height: 70%;
      border-bottom: 12px solid #0000002e;
      position: absolute;
    }
    .clearfix, .owl-stage, .owl-stage-outer, video-slice .container {
      overflow: hidden;
    }
    
    .container {
      max-width: 1440px;
      margin: 0 auto;
      /* padding: 0 20px; */
    }
    .video-box {
      background-size: cover;
      height: 510px;
      width: 1000px;
      padding: 50px;
      max-width: 100%;
      display: flex;
      justify-content: center;
      color: #fff;
      flex-direction: column;
      margin: auto;
      border-radius: 30px;
    }
    .video-box:before {
      content: '';
      position: absolute;
      left: 0;
      z-index: -1;
      background: linear-gradient(to right, #fff0, #000);
    }
    
    .overley-full, .video-box:before, video-holder {
      width: 100%;
      height: 100%;
      top: 0;
    }
    .video-box h2 {
      font-size: 25px;
      color: #ffe482;
    }
    .video-box h3 {
      margin: 30px 0 0;
      max-width: 460px;
      color: #e3e3e3;
      line-height: 21px;
      font-size: 14px;
    }
    .video-icon {
      margin-top: 30px;
      font-size: 22px;
      display: flex;
      align-items: center;
      line-height: 1.2;
    }
    .video-icon i {
      width: 90px;
      height: 90px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 50%;
      margin-left: 10px;
      cursor: pointer;
      color: #f94b4b;
      font-size: 50px;
    }
    video-slice:after {
      right: -10%;
      background: #133774;
      border-radius: 150px 0 0 150px;
      transform: rotate(-10deg);
    }
    
    video-slice:after, video-slice:before {
      content: '';
      bottom: 40px;
      width: 40%;
      height: 70%;
      border-bottom: 12px solid #0000002e;
      position: absolute;
    }
    /* سيرش */
    
    .screen-reader-text {
      clip: rect(1px,1px,1px,1px);
      height: 1px;
      overflow: hidden;
      position: absolute !important;
      width: 1px;
      word-wrap: normal !important
    }
    
    
    
    container {
      margin: 0 auto;
      padding: 0 10px;
      max-width: 700px
    }
    
    container:before,.clear:before,.clear:after {
      /* content: ""; */
      /* display: table; */
      /* table-layout: fixed; */
    }
    
    container:after {
      clear: both;
      content: "";
      display: block
    }
    
    
    
    
    .site-header {
      background: #006bb7;
      box-shadow: 0 0 10px 5px rgb(0 0 0/10%);
      position: relative
    }
    
    .site-header.fixed .menubar {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 9999;
      width: 100%;
      background-color: #f70514
    }
    
    .topbar {
      background: #2764c3;
      padding: 9px 0
    }
    
    .phone {
      margin: 0 0px;
    }
    
    .phone a {
      display: block;
      font-weight: 700;
      font-size: 18px;
      padding: 7px 10px;
      text-decoration: none;
      color: #ffffff;
    }
    
    .phone span svg {
      transform: rotate(261deg);
      vertical-align: middle
    }
    
    .social-follow a {
      margin: 0 1px;
      width: 40px;
      height: 40px;
      text-align: center;
      display: inline-block;
      border-radius: 6px;
      line-height: 35px
    }
    
    
    
    .site-header .container {
      padding: 0;
      display: flex;
      align-items: center;
      position: relative;
      justify-content: space-between
    }
    
    .menubar {
      padding: 14px 0
    }
    
    .topbar .container {
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
    /*
    .topbar container:after {
      content: '';
      position: absolute;
      top: -10px;
      left: 100%;
      width: 100vw;
      bottom: -10px;
      background: #236eb4;
      transform: skew(-22deg)
    }
    */
    
    .logo-link {
      display: block;
      height: 100%
    }
    
    .search-company  {
      display: none
    }
    
    
    a.info-text {
      display: block;
      color: #000
    }
    
    .search-company{
      padding: 5px;
      border-radius: 7px;
      border: 1px solid #c8d7e1
    }
    
    .search-wrapp {
      flex: 1;
      /* box-shadow: 0 1px 4px rgb(0 0 0/10%); */
      border-radius: 6px;
      margin: 0 17px
    }
    
    .search-form {
      display: flex;
      border-radius: 5px;
      background: #fff;
      border: 1px solid #d7d7d787
    }
    
    .search-inputt {
      padding: 10px;
      background: 0 0;
      flex: 1;
      border: none;
      height: 40px;
      font-family: ui-sans-serif;
    
    }
    
    .search-submitt {
      padding: 0 10px;
      width: 60px;
      font-size: 28px;
      height: 40px;
      background: 0 0;
      border-radius: 4px;
      color: #fff
    }
    
    
    
    
    
    
    @media only screen and (max-width: 600px) {
     
    
      .social-follow a {
          width: 30px;
          height: 30px;
          line-height: 27px;
          text-align: center;
      }
    
      .social-follow a svg {
          width: 20px;
          height: 20px
      }
    }
    
    @media only screen and (max-width: 1023px) {
      
    
      .search-wrapp {
          display: block
      }
    
      .search-wrapp.open {
          display: block
      }
    
      /* .search-wrapp {
          position: absolute;
          bottom: -131px;
          left: 0;
          right: 0;
          margin: 0
      } */
    
    
    
      .search-company {
          background: #fff
      }
    
      
    
    }
    
    @media only screen and (max-width: 982px) {
    .phone {
      display: none
    }
    .call-us-wrap {
      display: none;
    }
    }
    
    @media only screen and (min-width: 982px) {
      .container {
          max-width:1440px
      }
    
      .search-company.open .close {
          display: block
      }
    
      
    
      .search-wrapp.open {
          background-color: #fff;
          display: block;
          position: absolute;
          left: -30px;
          top: 59px;
          z-index: 9999;
          box-shadow: 0 0 9px 1px rgb(100 100 100/30%);
          padding: 15px;
          width: 100%
      }
    
      
      .search-company,.menu-items a {
          border: 0
      }
    
     
    }
    
    @media only screen and (min-width: 1480px) {
      container {
          max-width:1350px
      }
    }
    .topbar .container{
    
    display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
    /* Start about_doctor Section */
    section.about_doctor {
      padding: 80px 0;
    }
    
    .about_doctor .container{
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .about_doctor .div_text{
      width: 50%;
    }
    
    .about_doctor .div_text h3{
      margin-bottom: 20px;
      font-size: 25px;
    }
    .about_doctor .div_text h2{
      font-size: 30px;
      margin-bottom: 30px;
    }
    .about_doctor .div_text p{
      line-height: 1.6;
      margin-bottom: 30px;
    }
    .about_doctor .div_text .content{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
    }
    .about_doctor .div_text .content .box{
      display: flex;
      align-items: center;
      gap: 20px;
      width: 48%;
    }
    
    .about_doctor .div_text .content .box img{
      width: 60px;
    }
    
    .about_doctor .div_text .content .box h3{
      font-size: 20px;
      color: #222;
      margin-bottom: 0;
    }
    .about_doctor .div_img {
      width: 45%;
      position: relative;
    }
    
    .about_doctor .div_img img{
      border-bottom-right-radius: 50%;
      border-bottom-left-radius: 50%;
    
    }
    
    .about_doctor .div_img::after{
      content: '';
      position: absolute;
      top: 0;
      left: -10px;
      width: 100%;
      height: 100%;
      background: linear-gradient(#024aaf, #024aaf);
      rotate: -12deg;
      z-index: -1;
      border-bottom-right-radius: 50%;
      border-bottom-left-radius: 50%;
    }
    
    
    
    @media (max-width:1200px){
      .about_doctor .div_text h3{
          font-size: 22px;
      }
      .about_doctor .div_text h2{
          font-size: 26px;
      }
      .about_doctor .div_text p{
          font-size: 14px;
          line-height: 1.5;
      }
      .about_doctor .div_text .content .box h3{
          font-size: 18px;
      }
    }
    
    @media (max-width:900px){
      .about_doctor .container{
          flex-direction: column-reverse;
          gap: 100px;
      }
      .about_doctor .div_text{
          width: 100%;
      }
      .about_doctor .div_img{
          width: 60%;
      }
    }
    
    @media (max-width:500px){
      .about_doctor .div_text h3{
          font-size: 18px;
      }
      .about_doctor .div_text h2{
          font-size: 22px;
      }
      .about_doctor .div_text p{
          margin-bottom: 20px;
      }
      .about_doctor .div_text .content .box h3{
          font-size: 16px;
      }
      .about_doctor .div_text .content .box img{
          width: 45px;
      }
      .about_doctor .div_img{
          width: 80%;
      }
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* End about_doctor Section */
    /* سكشن الخدمات */
    
    div.services {
      position: relative;
      padding: 60px 0px;
      margin: auto;
      background: rgb(255, 255, 255);
    }
    .services .box-services {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0px -20px;
    }
    .info-services1 {
      justify-content: center;
      height: 100%;
      transition: all 0.3s ease-in-out 0s;
      min-width: 280px;
      flex: 1 1 0%;
      border-radius: 10px;
      max-width: 400px;
      margin: 20px;
      position: relative;
    }
    .info_top {
      text-align: center;
      position: relative;
    }
    .info-icon {
      width: 100%;
    }
    .info-icon img {
      height: 280px;
      border-radius: 7px;
      transition: all 0.2s ease 0s;
      border: 4px solid #024aaf63;
      /* border-radius: 8px 8px 250px; */
      border-radius: 8px 8px 80px 51px;
    }
    img {
      max-width: 100%;
      height: auto;
      object-fit: cover;
      max-height: 100%;
    }
    .data_cat {
      background: rgb(255, 255, 255);
      margin-left: 55px;
      transition: all 0.2s ease 0s;
      margin-right: 55px;
      padding: 19px 0px;
      box-shadow: rgba(211, 219, 227, 0.24) 0px 8px 12px 0px;
      position: relative;
      border-radius: 7px;
      margin-top: -60px;
    }
    .data_cat1 {
      display: flex;
      align-items: center;
      color: rgb(14, 49, 76);
      flex-direction: column;
      justify-content: center;
    }
    .data_cat1 i {
      position: absolute;
      width: 63px;
      height: 62px;
      background: url() 0% 0% / cover rgb(255, 255, 255);
      border-radius: 50%;
      display: flex;
      color: white;
      font-size: 24px;
      padding-top: 4px;
      align-items: center;
      justify-content: center;
      right: 26px;
      top: -40px;
      box-shadow: rgba(211, 219, 227, 0.24) 0px 8px 12px 0px;
    
    }
    .info-services1 h3 {
      font-size: 18px;
      text-align: center;
      margin: 10px 0px;
      font-weight: 500;
      transition: all 80ms ease 0s;
    }
    .link-ser {
      display: inline-block;
      border-radius: 30px;
      padding: 9px 25px;
      border: 1px solid rgb(230, 230, 230);
      background-color: #024aaf;
      position: absolute;
      transition: all 0.5s ease 0s;
      left: 50%;
      transform: translateX(-50%);
      bottom: -22px;
      opacity: 0;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
    }
    a.info-services1:hover .link-ser {
      opacity: 1;
      visibility: visible;
    }
    a.info-services1:hover .data_cat {
      transform: translateY(-20px);
    }
    /* كول */
    .ms-call-btn,.ms-whats-btn {
      display: flex;
      position: fixed;
      bottom: 4.5em;
      outline: 0;
      cursor: pointer;
      z-index: 9999;
      text-decoration: none;
    }
    
    .ms-whats-btn {
      left: 15px;
      bottom: 60px
    }
    
    .ms-call-btn {
      left: 15px;
      bottom: 160px;
    
    }
    
    .ms-call-icon,.ms-whats-icon {
      display: inline-block;
      position: relative;
      width: 65px;
      height: 65px;
      text-align: center;
      border-radius: 50%;
      line-height: 65px;
      -webkit-box-shadow: 0 0 30px rgba(0,0,0,.3);
      -moz-box-shadow: 0 0 30px rgba(0,0,0,.3);
      box-shadow: 0 0 30px rgba(0,0,0,.3)
    }
    
    
    .ms-call-icon {
      border: 1px solid #ddd;
      background-color: #024aaf;
      animation: 2s ease-in-out infinite call-rotate
    }
    
    .ms-whats-icon {
      background-color: rgb(42,181,64);
      animation: 2s ease-in-out infinite call-rotate
    }
    
    .ms-call-txt,.ms-whats-txt {
      font-size: 15px;
      font-weight: 600;
      display: inline-block;
      line-height: 32px;
      border-radius: 10px;
      height: 35px;
      margin-top: 15px;
      width: 115px;
      text-align: center;
      border: 1px solid #ddd;
      border-radius: 10px;
      box-shadow: 0 0 5px rgba(0,0,0,.1)
    }
    
    .ms-call-txt {
      background-color: #024aaf;
      color: #fff
    }
    
    .ms-whats-txt {
      background-color:rgb(42,181,64);
      color:#ffffff
    }
    
    .ms-left {
         padding: 0 3px 0 3px;
      margin-right: -15px;
      order: 1
    }
    
    @keyframes call-rotate {
      0%,100%,50% {
          -webkit-transform: rotate(0) scale(1) skew(1deg);
          transform: rotate(0) scale(1) skew(1deg)
      }
    
      10%,30% {
          -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
          transform: rotate(-25deg) scale(1) skew(1deg)
      }
    
      20%,40% {
          -webkit-transform: rotate(25deg) scale(1) skew(1deg);
          transform: rotate(25deg) scale(1) skew(1deg)
      }
    }
    
    .logo{
      background-color: #006bb7;
      width: 100px !important;
      margin-right: 20px;
    }
    .hotline span{
color: #006bb7;
      font-size: 50px;
    }