.App {
    text-align: center;
  }
  html{
    scroll-behavior: smooth;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  }
  /* width */
  ::-webkit-scrollbar {
    width: 0vw;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  body{
    background-image: linear-gradient(180deg,whitesmoke 0%,#89d6fb 100%);  
    margin: 0;
  }
  button{
    color: #d4f0fc;
    background-color: #01303f;
    font-size: 0.617vw;
    padding: 0.694vw  ;
    padding-top: 0.578vw  ;
    padding-bottom: 0.578vw  ;
    border: 0;
    border-radius: 0.193vw;
    cursor: pointer;
    transition: background-color ease-in-out .25s;
  }
  .a-button{
    color: #d4f0fc;
    background-color: #01303f;
    font-size: 0.70vw;
    padding: 0.60vw  ;
    padding-top: 0.5vw  ;
    padding-bottom: 0.5vw  ;
    border: 0;
    border-radius: 0.193vw;
    cursor: pointer;
    transition: background-color ease-in-out .25s;
  }
  button:hover{
    background-color: #282c34;
    color: #d4f0fc;
  }
  
  .App-header {
    min-height: 100vh;
    margin-left: 25%;
    margin-right: 25%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.42vw;
    color: #01303f;
  
  }
  .line{
    background-color: white;
    margin-top: 1.928vw;
    margin-bottom: 1.928vw;
    display: block;
    width: 100%;
    height: 0.077vw;
    top: 100%;
  }
  a:link {
    color: #01303f;
    text-decoration: none;
  }
  
  /* visited link */
  a:visited {
    color: #01303f;
    text-decoration: none;
  }
  
  /* mouse over link */
  a:hover {
    color: #01303f;
    text-decoration: none;
  }
  
  /* selected link */
  a:active {
    color: #01303f;
    text-decoration: none;
  }
  
  /* ----------------------------------------------------------------------------------------- */
  
  .App-logo {
    width: 1.928vw;
    height: 1.928vw;
    object-fit: contain;
    left: 0;
    position: relative;
    transition: background-color ease-in-out .20s, left ease-in-out .20s;
  }
  .App-logo-active{
    filter: invert(87%) sepia(100%) saturate(0%) hue-rotate(244deg) brightness(105%) contrast(104%);
    left: 35px;
  }
  .App-logo-name{
    transition: color ease-in-out .20, left ease-in-out .20s;
    left: 0;
  }
  .App-logo-name-active{
    color: white !important;
    position: relative;
    left: 35px;
  }
  .nav-bar-active{
    background-color: #01303f  !important;
    box-shadow: unset !important;
  }
  .nav-contact-active{
    background-color: whitesmoke;
    color: #01303f;
    font-weight: bold;
  }
  .nav-line-active{
    display: none !important;
  }
  .logo-wrap{
    display: flex;
    align-items: center;
    margin-left: 2%;
  }
  .logo-wrap > p{
    margin: 0;
    margin-left: 0.578vw;
    font-weight: bold;
    font-size: 0.964vw;
    transition: background-color ease-in-out .20s;
  }
  .nav-bar-wrap{
    position: fixed;
    width: 50%;
    top: 0;
    z-index: 105;
  
  }
  .nav-bar{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 2.5vw;
    top: 0;
    background-color: whitesmoke;
    transition: background-color ease-in-out .20s;
    box-shadow: rgba(100, 100, 111, 0.2) 0vw 0.27vw 1.118vw 0vw;
  
  }
  
  .nav-contact{
    margin-right: 2%;
    display: flex;
    align-items: center;
  }
  
  .arabic-wrap{
    display: flex;
    background-color: #89d6fb;
    height: 1.78vw;
    border-radius: 0.193vw;
    padding: 0.08vw;
    margin-left: 0.578vw;
    aspect-ratio: 1/1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color ease-in-out .20s;
  }
  .arabic-wrap:hover{
    background-color: #282c34;
  }
  .arabic-wrap:hover .arabic{
    filter: invert(100%) sepia(61%) saturate(5%) hue-rotate(176deg) brightness(116%) contrast(92%);
  }
  .arabic{
    width: 1.5vw;
    object-fit: contain;
  }
  
  
  .nav-line{
    background-color: #01303f;
    position: absolute;
    /* display: flex; */
    transition: background-color ease-in-out .20s;
    width: 100%;
    height: 0.193vw;
    top: 100%;
    border-bottom-left-radius: 0.193vw;
    border-bottom-right-radius: 0.193vw;
  }
  
  /* ----------------------------------------------------------------------------------------- */
  
  .SectionOne{
    display: flex;
    margin-top: 3.856vw;
    text-align: right;
    justify-content: space-between;
    /* align-items: end; */
  }
  .SectionOne-text{
    width: 26.994vw;
  
  }
  .SectionOne-text > h1{
    text-transform: none;
    font-style: normal;
    line-height: 1.1em;
    letter-spacing: 0vw;
    word-spacing: 0;
    margin-top: 0;
  }
  .SectionOne-text > p{
    width: 28.138vw;
    text-transform: none;
    font-style: normal;
    letter-spacing: -0.039vw;
    word-spacing: 0;
  }
  .SectionOne-img{
    position: relative;
    left: 14%;
    width: 30vw;
    /* height: 21.8vw; */
    -webkit-mask-image: url("./imgs/img1-mask.webp");
    -webkit-mask-size: cover;
    -webkit-mask-position: center left;
    transform: scaleX(-1);
    border-radius: 0.193vw;
  }
  .SectionOne-button2{
    margin-right: 0.578vw;
    background-color: #89d6fb;
    color: #01303f;
  }
  
  /* ----------------------------------------------------------------------------------------- */
  .SectionTwo-slid {
    position: relative;
  }
  .SectionTwo-slid > svg{
    position: absolute;
    top: 15%;
    left: 70%;
  }
  
  .SectionTwo-slid{
    /* background-color: #282c34; */
    background-image: url("./imgs/unsplash.jpg");
    background-size: cover;
    width: 100%;
    height: 15.425vw;
    border-radius: 0.193vw;
    transform: scaleX(-1);
  }
  .what-we-do{
    width: 100%;
    text-align: right;
    display: flex;
    justify-content: flex-end;
  }
  .what-we-do > p{
    color: #d4f0fc;
    font-size: 0.617vw;
    font-weight: bold;
    padding: 0.386vw;
    background-color: #15171b;
    margin-left: 0.578vw;
    border-radius: 0.193vw;
    transform: scaleX(-1);
  }
  .simplifying-it{
    display: flex;
    position: relative;
    height: inherit;
    align-items: center;
    transform: scaleX(-1);
  }
  .simplifying-it > h1{
    margin: 0;
    margin-top: 0.771vw;
    margin-right: 0.578vw;
    color: #d4f0fc;
    width: 30.85vw;
    text-align: right;
  
  }
  
  .SectionTwo-contant{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: space-between;
    text-align: right;
    margin-top: 1.928vw;
  }
  
  .SectionTwo-contant > div > img{
    width: 2.892vw;
    height: 2.892vw;
  }
  .SectionTwo-contant > div > h6{
    margin: 0;
  }
  .SectionTwo-contant > div > p{
    margin: 0;
    margin-top: 0.578vw;
    font-size: 0.617vw;
    width: 90%;
  }
  
  /* ----------------------------------------------------------------------------------------- */
  
  .learn-more{
    position: fixed;
    overflow-y: scroll;
    width: 100%;
    height: 100vh;
    background-color: whitesmoke;
    top: 110%;
    left: 0;
    z-index: 101;
    scroll-behavior: smooth;
    transition: top  ease-in-out 0.75s;
  }
  
  .learn-more-active{
    top: 0 !important;
  }
  
  .learn-more-header{
    background-color: #01303f;
    width: 100%;
    position: fixed;
    text-align: right;
    height: 2.892vw;
  }
  .SectionThree-main-wrap{
    height: 31.814vw;
  }
  .SectionThree{
    position: absolute;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .SectionThree-wrap{
    text-align: right;
    width: 50%;
    height: 30.85vw;
  }
  .what-we-do-ar{
    justify-content: unset;
    margin-right: 0.578vw;
  
  }
  .SectionThree-wrap > div > p{
    transform: unset;
  }
  .SectionThree-wrap > h2{
    margin: 0;
    margin-left: 0.578vw;
  }
  
  .SectionThree-box-wrap{
    margin-top: 0.964vw;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.543vw;
    row-gap: 1.928vw;
    justify-content: center;
  }
  
  .SectionThree-box{
    background-color: #d4f0fc;
    height: 11.569vw;
    width: 15.425vw;
    border-radius: 0.193vw;
    box-shadow: rgba(100, 100, 111, 0.2) 0vw 0.27vw 1.118vw 0vw;
    transition: box-shadow ease-in-out 0.3s;
  
  }
  .SectionThree-box button{
    padding: unset;
    background-color: unset;
    color: #01303f;
    position: relative;
    font-weight: bold;
    vertical-align: middle;
  }
  .learn-more-close{
    font-size: 1.465vw;
    background-color: #d4f0fc;
    color: #01303f;
    border-radius: 0;
  }
  .learn-more-close:hover{
    background-color: #d4f0fc;
  }
  .learn-more-close-mobile{
    display: block;
    position: absolute;
    left: -50px;
    background-color: whitesmoke;
    color: #01303f;
    font-size: 1vw;
    transition: left ease-in-out .20s;
    padding: .5vh;
    padding-left: 1vh;
    padding-right: 1vh;
    border-radius: 0.193vw;
    /* padding-bottom: 8px; */
  }
  .learn-more-close-mobile > b{
      position: relative;
      top: -2px;
  }
  .learnMoreCloseMobile-active{
    /* display: block; */
    left: 15px;
  }
  .learn-more-underline{
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #89d6fb;
    height: 0.116vw;
    width: 100%;
    border-radius: 0.193vw;
    transition: all ease-in-out 0.3s;
  }
  .learn-more-line{
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #01303f;
    height: 0.116vw;
    width: 100%;
    border-radius: 0.193vw;
    transition: all ease-in-out 0.3s;
    transform: scaleX(0);
  }
  
  .SectionThree-box:hover{
    box-shadow: #282c3454 0vw 0.27vw 2.237vw 0vw;
  }
  .SectionThree-box:hover .learn-more-line{
    width: 100% !important;
    transform: scaleX(-1);
  }
  
  .SectionThree-box > div{
    margin-left: 0.771vw;
    margin-right: 0.771vw;
    margin-top: 0.771vw;
    vertical-align: bottom;
    text-align: center;
  }
  .SectionThree-box > div > a{
    position: absolute;
    text-align: right;
    display: block;
    margin-top: .5%;
    /* top: 110%; */
  }
  
  .SectionThree-box > div > img{
    width: 3.856vw;
    height: 3.856vw;
  }
  .SectionThree-box > div > h6{
    margin: 0;
    text-align: right;
  
  }
  .SectionThree-box > div > p{
    margin: 0;
    margin-top: 0.578vw;
    font-size: 0.617vw;
    width: 13.497vw; 
    text-align: right;
  }
  
  /* ----------------------------------------------------------------------------------------- */
  
  .SectionContactUs{
    position: relative;
    height: 34.706vw;
  }
  
  .SectionContactUs-slid{
    background-color: #282c34;
    /* background-image: url("./imgs/unsplash.jpg"); */
    background-size: cover;
    width: 100%;
    height: 11.569vw;
    border-top-right-radius: 0.193vw;
    border-top-left-radius: 0.193vw;
  
  }
  .what-we-do-ar{
    justify-content: unset;
    margin-right: 0.578vw;
  
  }
  .SectionContactUs-slid > div > p{
    transform: unset;
  }
  .contact-info{
    position: absolute;
    top: 11.569vw;
    background-image: linear-gradient(90deg,#E9E6EF 0%,#AFC6E6 100%);
    width: 100%;
    height: 23.138vw;
    border-bottom-right-radius: 0.193vw;
    border-bottom-left-radius: 0.193vw;
    align-items: center;
    text-align: right;
  }
  
  .contact-info > div{
    margin-right: 0.964vw;
    width: 50%;
  }
  .contact-info > div > p{
    font-size: 0.848vw;
  }
  
  .call-us{
    position: relative;
    margin-top: 1.928vw;
    margin-bottom: 1.928vw;
    width: fit-content;
  }
  .call-us-line{
    position: absolute;
    left: 0;
    top: 100%;
    background-color: #01303f;
    height: 0.116vw;
    width: 0%;
    border-radius: 0.193vw;
    transition: all ease-in-out 0.3s;
  }
  
  .call-us:hover .call-us-line{
    width: 100% !important;
  }
  
  .contact-info-benefits{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.157vw;
    width: fit-content;
    margin-bottom: 1.928vw;
  }
  .contact-info-benefits > div > div{
    display: flex;
    align-items: center;
  }
  .contact-info-benefits > div > div > span{
    background-color: #01303f;
    color: #d4f0fc;
    border-radius: 100%;
    font-size: 0.54vw;
    text-align: center;
    vertical-align: middle;
    width: 0.848vw;
    height: 0.848vw;
    margin-left: 0.578vw;
  
  }
  .contact-info-benefits > div > div > p{
    font-size: 0.694vw;
    margin-top: 0.386vw;
    margin-bottom: 0.386vw;
  }
  
  .contact-info-next{
    display: flex;
    align-items: center;
  }
  .contact-info-next > h4{
    margin: 0;
  }
  .contact-info-next > p{
    margin: 0;
    margin-right: 0.771vw;
    font-size: 0.54vw;
    width: 7.713vw;
  }
  .contact-info-next > svg{
    margin: 0;
    margin-left: 0.771vw;
    margin-right: 0.771vw;
    width: 0.463vw;
    height: 2.391vw;
    transform: rotate(180deg);
  }
  
  .Partner-with-Us{
    display: flex;
    height: 8.291vw;
    align-items: flex-end;
  }
  .Partner-with-Us > h3{
    margin: 0;
    margin-right: 0.964vw;
    color: #d4f0fc;
    width: 30.85vw;
    text-align: right;
  
  }
  
  .consultation p {
    margin: 0;
    font-size: 0.771vw;
  }
  .consultation input, textarea{
    margin: 0;
    vertical-align: top;
    border-radius: 0.096vw;
    height: 1.157vw;
    width: 100%;
    border: 0.039vw solid #282c34;
    background-color: whitesmoke;
  }
  .consultation select{
    width: 101%;
    height: 1.4vw;
    margin: 0;
    vertical-align: top;
    border-radius: 0.096vw;
    border: 0.039vw solid #282c34;
    background-color: whitesmoke;
    color: black;
  }
  .consultation button{
    margin-top: 2%;
  }
  .consultation{
    background-color: whitesmoke;
    box-shadow: rgba(100, 100, 111, 0.2) 0vw 0.27vw 1.118vw 0vw;
    position: absolute;
    top: 13%;
    left: 3%;
    height: 28.922vw;
    width: 19.281vw;
    border-radius: 0.193vw;
    text-align: right;
  }
  .consultation > div {
    display: flex;
    margin-top: 0.964vw;
    justify-content: center;
    align-items: center;
  }
  .consultation > div > p{
    font-size: 0.964vw;
    font-weight: bold;
    color: #282c34;
  }
  .consultation > form{
    margin: 0.964vw;
    margin-top: 0;
    color: #282c34;
  }
  
  .consultation-row1{
    display: grid;
    gap: 1.35vw;
    grid-template-columns: 1fr 1fr;
  }
  
  
  /* ----------------------------------------------------------------------------------------- */
  
  .ManagedServices{
    color: black;
    margin: 0;
  }
  
  @keyframes animatedBackground {
    from { background-position: -25% 0%; }
    to { background-position: 0% 100%; }
  }
  .ManagedServices-slid{
    background-image: url("./imgs/GettyImages.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: -25% 0%;
    background-size: 50% 100%;
    background-color: #110d95;
    box-shadow: 0vw 0 1.928vw 1.928vw #110d95 inset;
    width: 100%;
    height: 35vh;
    display: flex;
    align-items: flex-end;
  }
  .ManagedServices-slid-active{
    background-size: 50% 100%;
    animation: animatedBackground 10s forwards;
  }
  
  .ManagedServices-slid > div{
    margin-left: 15%;
    margin-right: 15%;
    min-width: 75%;
    color: white;
    text-align: right;
  }
  
  .ManagedServices-slid > div > h4{
    opacity: 0%;
    transition: opacity ease-in-out 1s;
  }
  .ManagedServices-slid > div > h1{
    margin: 0;
    margin-bottom: 0.964vw;
    margin-left: -1.928vw;
    opacity: 0%;
    transition: margin-left ease-in-out 1s, opacity ease-in-out 1s;
    font-size: 3.2rem;
  }
  .ManagedServices-slid-div-h1-active{
    margin-left: 0 !important;
    opacity: 100% !important;
  }
  .ManagedServices-slid-div-h4-active{
    opacity: 100% !important;
  }
  .ManagedServices-slid > div > h4{
    opacity: 0%;
    margin: 0;
    font-weight: normal;
    font-size: 1.25rem;
    margin-bottom: 0.964vw;
    width: 50%;
    transition: opacity ease-in-out 1s;
  }
  .ManagedServices-slid > div > button{
    margin-bottom: 2.892vw;
    color: #110d95;
    background-color: white;
    font-weight: bold;
    transition: background-color ease-in-out .25s, color ease-in-out .25s, opacity ease-in-out 1s;
    opacity: 0%;
  }
  
  .ManagedServices-contant{
    background-color: whitesmoke;
    padding-bottom: 100px;
  }

  .ManagedServices-slid > div > button:hover{
    background-color: #15171b;
    color: #d4f0fc;
  }
  
  .ManagedServices-row1{
    margin-left: 15%;
    margin-right: 15%;
    display: flex;
    margin-top: 3.856vw;
    align-items: center;
  }
  .ManagedServices-row1 > div{
    width: 75%;
  }
  .ManagedServices-row1 > div > div{
    width: 90%;
  }
  .ManagedServices-row1 > div > h5{
    font-size: 1.5rem;
    width: 20vw;
    text-align: right;
    font-weight: bold;
    margin: 0;
    opacity: 0%;
    position: relative;
    right: -2.892vw;
    transition: opacity ease-in-out .75s, right ease-in-out .75s;
  }
  .ManagedServices-row1-div-h5-avtive{
    opacity: 100% !important;
    right: 0 !important;
  }
  
  .ManagedServices p,li {
    font-size: 1.2rem;
    text-align: right;
    position: relative;
    top: 0.964vw;
    opacity: 0;
    transition: opacity ease-in-out .75s, top ease-in-out .75s;
  }
  
  .ManagedServices-row1-div-div-pLi-avtive{
    top: 0 !important;
    opacity: 100% !important;
  }
  .ManagedServices-row1-img{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 25.066vw!important;
    height: 30.85vw;
    border-radius: 0.193vw;
    position: relative;
    opacity: 0%;
    right: 2.892vw;
    transition: opacity ease-in-out .75s, right ease-in-out .75s;
  }
  .ITConsultingAdvisory-img{
    background-image: url("imgs/ITConsultingAdvisory.jpg");
  }
  .ManagedServices-img{
    background-image: url("imgs/pexels-thisisengineering.webp");
  }
  .WebDevelopment-img{
    background-image: url("imgs/WebDevelopment.png");
  }
  .StreamlineOperations-img{
    background-image: url("imgs/StreamlineOperations.png");
    background-position: 45% center;
  }
  .StorageSolutions-img{
    background-image: url("imgs/StorageSolutions.png");
  }
  .ITMaintenance-img{
    background-image: url("imgs/ITMaintenance.png");
  }
  .ManagedServices-row1-img-active{
    opacity: 100%;
    right: 0;
  }
  
  .ManagedServices-row1-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1.928vw;
    gap: 0.386vw;
    row-gap: 0.964vw;
  }
  .ManagedServices-row1-grid > div{
    /* background-color: red; */
  }
  
  .ManagedServices-row1-grid > div > div{
    display: flex;
    align-items: center;
    position: relative;
    right: -0.964vw;
    opacity: 0;
    transition: opacity ease-in-out .75s, right ease-in-out .75s;
  }
  
  .ManagedServices-row1-grid-div-div-active{
    right: 0 !important;
    opacity: 100% !important;
  }
  
  .ManagedServices-row1-grid > div > div > span{
    background-color: #110d95;
    color: #d4f0fc;
    border-radius: 100%;
    font-size: 1.13rem;
    text-align: center;
    vertical-align: middle;
    width: 1.76rem;
    height: 1.76rem;
    margin-left: 0.578vw;
    aspect-ratio: 1 / 1 !important;
  }
  .ManagedServices-row1-grid > div > div > h6{
    margin: 0;
    font-size: 1.25rem;
  }
  .ManagedServices-row1-grid > div > p{
    margin-right: 1.735vw;
    text-align: right;
  }
  
  
  
  
  
  @media screen and (max-width: 800px) {
    .App {
      text-align: center;
    }
    html{
      scroll-behavior: smooth;
    }
    /* width */
    ::-webkit-scrollbar {
      width: 0vw;
    }
    
    /* Track */
    ::-webkit-scrollbar-track {
      background: #f1f1f1;
    }
    
    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #888;
    }
    
    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #555;
    }
    body{
      background-image: linear-gradient(180deg,whitesmoke 0%,#89d6fb 100%);  
    }
    button{
      color: #d4f0fc;
      background-color: #01303f;
      cursor: pointer;
      transition: background-color ease-in-out .25s;
      /* ----------------- */
      font-size: 3.025vw;
      padding: 2.278vw  ;
      padding-top: 1.897vw  ;
      padding-bottom: 1.897vw  ;
      border-radius: 0.633vw;
    }
    button:hover{
      background-color: #282c34;
      color: #d4f0fc;
    }
    
    .App-header {
      min-height: 100vh;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 1.42vw;
      color: #01303f;
      /* ----------------- */
      margin-left: 5%;
      margin-right: 5%;
      overflow-x: hidden;
    }
    .line{
      display: block;
      width: 100%;
      top: 100%;
      /* ----------------- */
      /* background-color: unset; */
      display: none;
      height: 0.253vw;
      margin-top: 6.328vw;
      margin-bottom: 6.328vw;
    }

    .a-button{
      color: #d4f0fc;
      background-color: #01303f;
      font-size: 1.70vw;
      padding: 1.60vw  ;
      padding-top: 1.5vw  ;
      padding-bottom: 1.5vw  ;
      border: 0;
      border-radius: 0.193vw;
      cursor: pointer;
      transition: background-color ease-in-out .25s;
      font-size: 3.025vw;
    padding: 2.278vw  ;
    padding-top: 1.897vw  ;
    padding-bottom: 1.897vw  ;
    border-radius: 0.633vw;
    }
    
    /* ----------------------------------------------------------------------------------------- */
    
    .App-logo {
      object-fit: contain;
      transition: background-color ease-in-out .20s, left ease-in-out .20s;
      /* ----------------- */
      width: 7.328vw;
      height: 7.328vw;
      position: relative;
      left: 0;
    }
    .App-logo-active{
      filter: invert(87%) sepia(100%) saturate(0%) hue-rotate(244deg) brightness(105%) contrast(104%);
      left: 6vh;
    }
    .App-logo-name{
      position: relative;
      left: 0;
      transition: color ease-in-out .20s, left ease-in-out .20s;
    }
    .App-logo-name-active{
      color: white !important;
      left: 6vh;
    }
    .nav-bar-active{
      background-color: #01303f  !important;
      box-shadow: unset !important;
    }
    .nav-contact-active{
      background-color: whitesmoke;
      color: #01303f;
      font-weight: normal;
    }
    .nav-contact-wrap-active{
      left: 0vh !important;
    }
  
    .arabic-wrap{
      position: relative;
      left: 0vh;
      display: flex;
      background-color: #89d6fb;
      height: 7vw;
      border-radius: 0.633vw;
      padding: 0.4vw;
      margin-left: 2.578vw;
      aspect-ratio: 1.25/1;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color ease-in-out .20s, left ease-in-out .20s;
    }
    .arabic-wrap-active{
      left: 6vh !important;
    }
    .arabic-wrap:hover{
      background-color: #282c34;
    }
    .arabic-wrap:hover .arabic{
      filter: invert(100%) sepia(61%) saturate(5%) hue-rotate(176deg) brightness(116%) contrast(92%);
    }
    .arabic{
      width: 6.5vw;
      object-fit: contain;
    }
    .nav-line-active{
      display: none !important;
    }
    .logo-wrap{
      display: flex;
      align-items: center;
      margin-left: 2%;
    }
    .logo-wrap > p{
      margin: 0;
      margin-left: 1.897vw;
      font-weight: bold;
      transition: background-color ease-in-out .20s;
      /* ----------------- */
      font-size: 4.164vw;
    }
    .nav-bar-wrap{
      position: fixed;
      top: 0;
      z-index: 105;
      /* ----------------- */
      width: 100%;
      margin-right: -5%;
      
    }
    .nav-bar{
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      top: 0;
      background-color: whitesmoke;
      transition: background-color ease-in-out .20s;
      box-shadow: rgba(100, 100, 111, 0.2) 0vw 0.27vw 1.118vw 0vw;
      /* ----------------- */
      height: 12.205vw;
    }
    
    .nav-contact{
      margin-right: 2%;
      display: flex;
      align-items: center;
      /* ----------------- */
      position: relative;
      left: 0;
      transition: left ease-in-out .20s;;
    }
    
    .nav-line{
      background-color: #01303f;
      position: absolute;
      /* display: flex; */
      transition: background-color ease-in-out .20s;
      width: 100%;
      top: 100%;
      /* ----------------- */
      height: 0.733vw;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    
    /* ----------------------------------------------------------------------------------------- */
    
    .SectionOne{
      display: flex;
      text-align: right;
      justify-content: space-between;
      /* ----------------- */
      margin-top: 13.656vw;
    }
    .SectionOne-text{
      position: relative;
      text-align: right;
      /* ----------------- */
      width: 90vw;
    
    }
    .SectionOne-text > h1{
      text-transform: none;
      font-style: normal;
      line-height: 1em;
      letter-spacing: -0.039vw;
      word-spacing: 0;
      /* ----------------- */
      font-size: 7vw;
      margin-top: 3.545vw;
      margin-bottom: 0;
    } 
    .SectionOne-text > p{
      text-transform: none;
      font-style: normal;
      letter-spacing: -0.039vw;
      word-spacing: 0;
      /* ----------------- */
      margin-top: 2vw;
      width: unset;
      font-size: 5vw;
    }
    .SectionOne-img{
      width: 60%;
      margin-left: 40%;
      -webkit-mask-image: url("./imgs/img1-mask.webp");
      -webkit-mask-size: cover;
      -webkit-mask-position: bottom right;
      /* ----------------- */
      display: none;
    }
    .SectionOne-button2{
      margin-right: 2.578vw;
      background-color: #89d6fb;
      color: #01303f;
    }
    
    /* ----------------------------------------------------------------------------------------- */
    .SectionTwo{
      margin-top: 6vw;
    }
    .SectionTwo-slid {
      position: relative;
    }
    .SectionTwo-slid > svg{
      position: absolute;
      top: 15%;
      left: 70%;
    }
    
    .SectionTwo-slid{
      /* background-color: #282c34; */
      background-image: url("./imgs/unsplash.jpg");
      background-size: cover;
      width: 100%;
      /* ----------------- */
      height: 35vw;
      border-radius: 1.633vw;
    
    }
    .what-we-do{
      width: 100%;
      text-align: right;
      display: flex;
    }
    .what-we-do > p{
      color: #d4f0fc;
      font-weight: bold;
      background-color: #15171b;
      /* ----------------- */
      font-size: 3.025vw;
      border-radius: 0.633vw;
      margin-left: 2.897vw;
      padding: 1.267vw;
    }
    .simplifying-it{
      display: flex;
      position: relative;
      height: inherit;
      align-items: center;
      /* ----------------- */
      top: -5vw;
    }
    .simplifying-it > h1{
      margin: 0;
      /* margin-top: 5.53vw; */
      color: #d4f0fc;
      text-align: right;
      /* ----------------- */
      width: 102.251vw;
      font-size: 7vw;
      margin-right: 2.897vw;
      margin-bottom: 3vw;
    }
    
    .SectionTwo-contant{
      display: grid;
      justify-content: space-between;
      text-align: right;
      margin-top: 1.928vw;
      /* ----------------- */
      grid-template-columns: 1fr;
      margin-top: 8vw;
    }
    
    .SectionTwo-contant > div > img{
      /* ----------------- */
      width: 17vw;
      height: 17vw;
    }
    .SectionTwo-contant > div > h6{
      margin: 0;
      /* ----------------- */
      font-size: 4.5vw;
      margin-top: 4vw;
    }
    .SectionTwo-contant > div > p{
      margin: 0;
      margin-top: 0.578vw;
      font-size: 0.617vw;
      width: 95%;
      /* ----------------- */
      margin-top: 4vw;
      font-size: 4vw;
    }
    .SectionTwo-contant > div > span{
      background-color: white;
      display: block;
      width: 100%;    
      /* ----------------- */
      height: 0.253vw;
      margin-top: 6.328vw;
      margin-bottom: 6.328vw;
    }
    
    /* ----------------------------------------------------------------------------------------- */
    
    .learn-more{
      position: fixed;
      overflow-y: scroll;
      width: 100%;
      height: 100vh;
      background-color: whitesmoke;
      top: 110%;
      left: 0;
      z-index: 104;
      scroll-behavior: smooth;
      transition: top ease-in-out 0.75s;
      /* ----------------- */
      
    }
    
    .learn-more-active{
      /* ----------------- */
      top: 12vw !important;
    }
    
    .learn-more-header{
      width: 100%;
      text-align: right;
      height: 2.892vw;
      /* ----------------- */
      background-color: unset;
      position: unset;
      display: none;
    }
    .SectionThree-main-wrap{
      height: 513vw;
    }
    .SectionThree{
      position: absolute;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .SectionThree-wrap{
      text-align: right;
      height: 30.85vw;
      /* ----------------- */
      width: 90%;
      margin: 0;
    }
    .SectionThree-wrap > h2{
      margin: 0;
      /* ----------------- */
      margin-left: 0vw;
      font-size: 7vw;
    }
    
    .SectionThree-box-wrap{
      margin-top: 0.964vw;
      display: grid;
      row-gap: 1.928vw;
      justify-content: center;
      /* ----------------- */
      grid-template-columns: 1fr;
      gap: 5.064vw;
    }
    
    .SectionThree-box{
      background-color: #d4f0fc;
      border-radius: 1.633vw;
      box-shadow: rgba(100, 100, 111, 0.2) 0vw 0.27vw 1.118vw 0vw;
      transition: box-shadow ease-in-out 0.3s;
      /* ----------------- */
      height: 77.94vw;
      width: 100%;
    }
    .SectionThree-box button{
      padding: unset;
      background-color: unset;
      color: #01303f;
      position: relative;
      font-weight: bold;
      vertical-align: middle;
      /* ----------------- */
      font-size: 4vw;
    }
    
    .learn-more-close{
      border-radius: 0;
      /* ----------------- */
      font-size: 5.808vw;
      position: relative;
    }
    .learn-more-close:hover{
    }
    .learn-more-close-mobile{
      display: block;
      position: absolute;
      left: -5vh;
      background-color: whitesmoke;
      color: #01303f;
      font-size: 5vw;
      transition: left ease-in-out .20s;
      padding: .5vh;
      padding-left: 1vh;
      padding-right: 1vh;
      border-radius: 0.5vw;
      /* padding-bottom: 8px; */
    }
    .learn-more-close-mobile > b{
        position: relative;
        top: -2px;
    }
    .learnMoreCloseMobile-active{
      /* display: block; */
      left: 1.5vh;
    }
    .learn-more-underline{
      position: absolute;
      left: 0;
      top: 100%;
      background-color: #89d6fb;
      width: 100%;
      transition: all ease-in-out 0.3s;
      /* ----------------- */
      height: 1.381vw;
      border-radius: 0.633vw;
    }
    .learn-more-line{
      position: absolute;
      left: 0;
      top: 100%;
      background-color: #01303f;
      width: 100%;
      transition: all ease-in-out 0.3s;
      /* ----------------- */
      height: 1.381vw;
      border-radius: 0.633vw;
      transform: scaleX(0);
    }
    
    .SectionThree-box:hover{
      /* ----------------- */
      box-shadow: #282c3454 0vw 1.886vw 8.342vw 0vw;
    }
    .SectionThree-box:hover .learn-more-line{
      width: 100% !important;
      transform: scaleX(-1);
    }
    
    .SectionThree-box > div{
      margin-top: unset;
      vertical-align: bottom;
      text-align: center;
      /* ----------------- */
      margin-left: 8%;
      margin-right: 8%;
      height: 100%;
      position: relative;
    }
    .SectionThree-box > div > a{
        position: absolute;
        text-align: right;
        display: block;
        top: 89%;
      }
    
    .SectionThree-box > div > img{
      /* ----------------- */
      width: 27.312vw;
      height: 27.312vw;
      margin-top: 5vw;
    }
    .SectionThree-box > div > h6{
      margin: 0;
      text-align: right;
      /* ----------------- */
      margin-top: 2.897vw;
      font-size: 5.5vw;
    }
    .SectionThree-box > div > p{
      margin: 0;
      text-align: right;
      /* ----------------- */
      margin-top: 2.897vw;
      width: 100%; 
      font-size: 4vw;
    }
    
    /* ----------------------------------------------------------------------------------------- */
    
    .SectionContactUs{
      position: relative;
      /* ----------------- */
      height: 300vw;
      margin-top: 7.328vw;
    }
    
    .SectionContactUs-slid{
      background-color: #282c34;
      background-size: cover;
      width: 100%;
      /* ----------------- */
      height: 30vw;
      border-top-right-radius: 1.633vw;
      border-top-left-radius: 1.633vw;
      position: relative;
    }
    .SectionContactUs-slid .what-we-do-ar{
    justify-content: unset;
    margin-right: 2.897vw;
  
  }
  .SectionContactUs-slid > div > p{
    transform: unset;
  }
    .contact-info{
      position: relative;
      background-image: linear-gradient(90deg,#E9E6EF 0%,#AFC6E6 100%);
      width: 100%;
      text-align: right;
      /* ----------------- */
      border-radius: 0vw;
      top: 0;
      height: 125vw;
    }
    
    .contact-info > div{
      /* ----------------- */
      margin-right: 3.164vw;
      padding-top: 1%;
      width: 90%;
    }
    .contact-info > div > p{
      /* ----------------- */
      font-size: 4vw;
    }
    
    .call-us{
      position: relative;
      margin-top: 7.328vw;
      margin-bottom: 7.328vw;
      width: fit-content;
    }
    .call-us-line{
      position: absolute;
      left: 0;
      top: 100%;
      background-color: #01303f;
      width: 100%;
      transition: all ease-in-out 0.3s;
      /* ----------------- */
      height: 0.3vw;
      border-radius: 1.633vw;
    }
    
    .call-us:hover .call-us-line{
      width: 100% !important;
    }
    
    .contact-info-benefits{
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: fit-content;
      margin-bottom: 1.928vw;
      /* ----------------- */
      gap: 4.797vw;
    }
    .contact-info-benefits > div > div{
      display: flex;
      align-items: center;
    }
    .contact-info-benefits > div > div > span{
      background-color: #01303f;
      color: #d4f0fc;
      border-radius: 100%;
      text-align: center;
      vertical-align: middle;
      /* ----------------- */
      margin-right: 2.897vw;
      font-size: 2.5vw;
      width: 3.5vw; 
      height: 3.5vw;
    
    }
    .contact-info-benefits > div > div > p{
      /* ----------------- */
      font-size: 3.278vw;
      margin-top: 1.267vw;
      margin-bottom: 1.267vw;
    }
    
    .contact-info-next{
      display: unset;
      align-items: center;
    }
    .contact-info-next > h4{
      margin: 0;
      /* ----------------- */
      font-size: 5vw;
      display: inline;
      margin-left: 5%;
      margin-right: 5%;
    }
    .contact-info-next > p{
      margin: 0;
      /* ----------------- */
      margin-left: 0;
      font-size: 2.5vw;
      width: 90%;
      display: inline;
      font-size: 3vw;
    }
    .contact-info-next > svg{
      margin: 0;
      /* ----------------- */
      margin-right: 0;
      width: 2.52vw;
      height: 7.847vw;
      display: block;
      transform: rotate(90deg);
      margin-right: 5%;
    }
    
    .Partner-with-Us{
      display: flex;
      height: 8.291vw;
      align-items: flex-end;
      /* ----------------- */
      position: absolute;
      top: 65%;
    }
    .Partner-with-Us > h3{
      margin: 0;
      margin-right: 3.164vw;
      color: #d4f0fc;
      width: 100%;
      text-align: right;
      /* ----------------- */
      font-size: 5vw;
    
    }
    
    .consultation p {
      margin: 0;
      /* ----------------- */
      font-size: 3.278vw;
      text-align: right;
      margin-right: 0.2vh;
      margin-top: 2vw;
    }
    .consultation input, textarea{
      margin: 0;
      vertical-align: top;
      background-color: whitesmoke;
      /* ----------------- */
      margin-left: 10vw;
      border-radius: 0.315vw;
      border: 0.128vw solid #282c34;
      font-size: 3.278vw;
      height: unset;
      text-align: right;
      width: 95%;
    }
  
    .consultation select{
      margin: 0;
      vertical-align: top;
      background-color: whitesmoke;
      /* ----------------- */
      width: 99.5%;
      height: 6.6vw;
      margin: 0vw;
      border-radius: 0.315vw;
      border: 0.128vw solid #282c34;
    }
    
    .consultation{
      background-color: whitesmoke;
      box-shadow: rgba(100, 100, 111, 0.2) 0vw 0.27vw 1.118vw 0vw;
      /* ----------------- */
      border-radius: 0vw;
      text-align: center;
      height: fit-content;
      top: 0;
      left: 0;
      width: 100%;
      position: unset;
      border-bottom-right-radius: 1.633vw;
      border-bottom-left-radius: 1.633vw;
    }
    .consultation > div {
      display: flex;
      justify-content: center;
      align-items: center;
      /* ----------------- */
      margin-top: 0vw;
    }
    .consultation > div > span{
      display: block;
      top: 100%;
      /* ----------------- */
      /* background-color: unset; */
      height: 0.253vw;
      margin-top: 0vw;
      margin-bottom: 7.328vw;
      font-size: 6vw;
    }
    .consultation > div > p{
      font-weight: bold;
      color: #282c34;
      /* ----------------- */
      font-size: 4.164vw;
      margin-top: 5vw;
      margin-bottom: 2vw;
    }
    .consultation > form{
      margin: 4.164vw;
      margin-top: 0;
      color: #282c34;
      /* ----------------- */
      margin-top: 4vw;
    }
    
    .consultation > form > div > button{
      /* ----------------- */
      width: 100%;
      margin-top: 2.5vh;
    }
  
    .consultation-row1{
      display: grid;
      gap: 5.431vw;
      margin-left: 2vw;
      margin-top: -2vw;
      grid-template-columns: 1fr 1fr;
    }
    
    
    /* ----------------------------------------------------------------------------------------- */
    
    .ManagedServices{
      color: black;
      margin-bottom: 0vw;
      /* ----------------- */
      margin-top: 0;
    }
    
    @keyframes animatedBackground {
      from { background-position: 125% 0%; }
      to { background-position: 100% 100%; }
    }
    .ManagedServices-slid{
      background-image: url("./imgs/GettyImages-mobile.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 125% 0%;
      background-color: #110d95;
      width: 100%;
      display: flex;
      align-items: flex-end;
      /* ----------------- */
      height: 50vw;
      background-size: 100% !important;
      box-shadow: 6.328vw 0 6.328vw 6.328vw #110d95 inset;
    }
    .ManagedServices-slid-active{
      animation: animatedBackground 10s forwards;
      /* ----------------- */
      background-size: 100%;
    }
    
    .ManagedServices-slid > div{
      color: white;
      text-align: right;
      /* ----------------- */
      width: 100%;
      margin-left: 5%;
      margin-right: 5%;
    }
    
    .ManagedServices-slid > div > h4{
      opacity: 0%;
      transition: opacity ease-in-out 1s;
      /* ----------------- */
      width: 100% !important;
      font-size: 3vw !important;
      text-shadow: 0px 0px 25px rgba(0, 0, 0, 1);
    }
    .ManagedServices-slid > div > h1{
      margin: 0;
      margin-left: -1.928vw;
      opacity: 0%;
      transition: margin-left ease-in-out 1s, opacity ease-in-out 1s;
      /* ----------------- */
      margin-bottom: 3.164vw;
      font-size: 5.5vw !important;
  
    }
    .ManagedServices-slid-div-h1-active{
      margin-left: 0 !important;
      opacity: 100% !important;
    }
    .ManagedServices-slid-div-h4-active{
      opacity: 100% !important;
    }
    .ManagedServices-slid > div > h4{
      opacity: 0%;
      margin: 0;
      font-weight: normal;
      font-size: 0.964vw;
      margin-bottom: 0.964vw;
      width: 50%;
      transition: opacity ease-in-out 1s;
    }
    .ManagedServices-slid > div > button{
      color: #110d95;
      background-color: white;
      font-weight: bold;
      transition: background-color ease-in-out .25s, color ease-in-out .25s, opacity ease-in-out 1s;
      opacity: 0%;
      /* ----------------- */
      margin-top: 2vw;
      margin-bottom: 5.5vw;
      font-size: 3vw;
    }
    
    .ManagedServices-slid > div > button:hover{
      background-color: #15171b;
      color: #d4f0fc;
    }
    
    .ManagedServices-row1{
      margin-top: 3.856vw;
      align-items: center;
      /* ----------------- */
      display: unset;
      margin-left: 5%;
      margin-right: 5%;
    }
    .ManagedServices-row1 > div{
      /* ----------------- */
      margin-left: 5%;
      margin-right: 5%;
      width: 90%;
      height: 100%;
      margin-bottom: 15vh;
    }
    .ManagedServices-row1 > div > div{
      /* ----------------- */
      width: 100%;
    }
    .ManagedServices-row1 > div > div > ul{
      /* ----------------- */
      margin-left: -1vh;
      margin-top: 5vw;
  
    }
    .ManagedServices-row1 > div > h5{
      text-align: right;
      font-weight: bold;
      margin: 0;
      opacity: 0%;
      position: relative;
      left: -2.892vw;
      transition: opacity ease-in-out .75s, left ease-in-out .75s;
      /* ----------------- */
      width: 100%;
      font-size: 2.5vh;
    }
    .ManagedServices-row1-div-h5-avtive{
      opacity: 100% !important;
      left: 0 !important;
    }
    
    .ManagedServices p,li {
      text-align: right;
      position: relative;
      top: 0.964vw;
      opacity: 0;
      transition: opacity ease-in-out .75s, top ease-in-out .75s;
      /* ----------------- */
      font-size: 3vw;
    }
    
    .ManagedServices-row1-div-div-pLi-avtive{
      top: 0 !important;
      opacity: 100% !important;
    }
    .ManagedServices-row1-img{
      background-image: url("./imgs/pexels-thisisengineering.webp");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      width: 25.066vw!important;
      height: 30.85vw;
      border-radius: 0.193vw;
      position: relative;
      opacity: 0%;
      left: 2.892vw;
      transition: opacity ease-in-out .75s, left ease-in-out .75s;
      /* ----------------- */
      display: none;
    }
    .ManagedServices-row1-img-active{
      opacity: 100%;
      left: 0;
    }
    
    .ManagedServices-row1-grid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.386vw;
      row-gap: 0.964vw;
      /* ----------------- */
      margin-top: 7.328vw;
    }
    .ManagedServices-row1-grid > div{
      /* background-color: red; */
    }
    
    .ManagedServices-row1-grid > div > div{
      display: flex;
      align-items: center;
      position: relative;
      left: -0.964vw;
      opacity: 0;
      transition: opacity ease-in-out .75s, left ease-in-out .75s;
    }
    
    .ManagedServices-row1-grid-div-div-active{
      left: 0 !important;
      opacity: 100% !important;
    }
    
    .ManagedServices-row1-grid > div > div > span{
      background-color: #110d95;
      color: #d4f0fc;
      border-radius: 100%;
      text-align: center;
      vertical-align: middle;
      /* ----------------- */
      width: 5vw;
      height: 5vw;
      aspect-ratio: 1 / 1 !important;
      font-size: 3.278vw;
      margin-right: 2.897vw;
    }
    .ManagedServices-row1-grid > div > div > h6{
      margin: 0;
      /* ----------------- */
      font-weight: n;
      font-size: 2vh;
      text-align: right;
    }
    .ManagedServices-row1-grid > div > p{
      text-align: right;
      /* ----------------- */
      margin-left: 8vw;
    }
  }