/* #3023e0 */
 @import url('http-s://fonts.googleapis.com/css2?family=Cairo:wght@300;500;700;900&display=swap');
 /* font-family: 'Saira Condensed', sans-serif; */
 @import url('http-s://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;300;500;700;900&display=swap');
 /* font-family: 'Saira Condensed', sans-serif; */
 @import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');
 /* font-family: 'Electrolize', sans-serif; */
 @import url('https://fonts.googleapis.com/css2?family=Electrolize&family=Oxanium:wght@200;400;600;800&display=swap');
 /*  */
 * {
    padding: 0px;
    margin: 0px;
    -box-sizing: border-box;
    -font-family: 'Saira Condensed', sans-serif;
    -font-family: 'Electrolize', sans-serif;
    font-family: 'Oxanium', cursive;
    -font-family: 'Nunito Sans', sans-serif;
    -font-family: 'IBM Plex Sans Arabic', sans-serif;
}

body{
    -background-color: rgb(243, 188, 136);
    -background-color: #eaeaea;
}

/*******/
.main-background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*position:static;
    max-width: 100%;
    margin: 0 auto;
    flex: 1;
    display: flex;
    align-items: center;
    /*transform: rotate(-90deg);*/
}

/* Utility Classes */
.container {
    max-width: 80%;
    margin: auto;
}

/* Responsive Navbar */
header ul{
    list-style: none;
}

header a{
    text-decoration: none;
}

.container2{
    max-width: 65rem;
    padding: 0 2rem;
    margin: 0 auto;
    display: flex;
    position: relative;
    
}

.logo-container{
    flex: 1;
    display: flex;
    align-items: center;
}

.-nav-btn1{
    flex: 3;
    display: flex;
}

.nav-links2{
    flex: 2;
}

.log-sign{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.logo{
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    -line-height: 3rem;
}

.logo:hover {
    opacity: 1;
    box-shadow: #fff;
}

.logo span{
    font-weight: 300;
}

.btn{
    display: inline-block;
    padding: .5rem .8rem;
    font-size: .8rem;
    border: 2px solid #fff;
    border-radius: 2rem;
    -line-height: 1;
    margin: 0 .2rem;
    transition: .3s;
    text-transform: uppercase;
}

.btn.solid, .btn.transparent:hover{
    background-color: #fff;
    color: #69bde7;
}

.btn.transparent, .btn.solid:hover{
    background-color: transparent;
    color: #fff;
}

.nav-links2 > ul{
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-link{
    position: relative;
    margin-top: 15px;
}

.nav-link > a{
    line-height: 3rem;
    color: #fff;
    padding: 0 .8rem;
    letter-spacing: 1px;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .5s;
}

.nav-link > a > i{
    margin-left: .2rem;
}

.nav-link:hover > a{
    transform: scale(1.1);
}

.dropdown{
    position: absolute;
    top: 100%;
    left: 0;
    width: 10rem;
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
    transition: .5s;
}

.dropdown ul{
    position: relative;
}

.dropdown-link > a{
    display: flex;
    background-color: #fff;
    color: #3498db;
    padding: .5rem 1rem;
    font-size: .9rem;
    align-items: center;
    justify-content: space-between;
    transition: .3s;
}

.dropdown-link:hover > a{
    background-color: #3498db;
    color: #fff;
}

.dropdown-link:not(:nth-last-child(2)){
    border-bottom: 1px solid #efefef;
}

.dropdown-link i{
    transform: rotate(-90deg);
}

.arrow {
    position: absolute;
    width: 11px;
    height: 11px;
    top: -5.5px;
    left: 32px;
    background-color: #fff;
    transform: rotate(45deg);
    cursor: pointer;
    transition: .3s;
    z-index: -1;
}

.dropdown-link:first-child:hover ~ .arrow{
    background-color: #3498db;
}

.dropdown-link{
    position: relative;
}

.dropdown.second{
    top: 0;
    left: 100%;
    padding-left: .8rem;
    cursor: pointer;
    transform: translateX(10px);
}

.dropdown.second .arrow{
    top: 10px;
    left: -5.5px;
}

.nav-link:hover > .dropdown,
.dropdown-link:hover > .dropdown{
    transform: translate(0, 0);
    opacity: 1;
    pointer-events: auto;
}

.hamburger-menu-container{
    flex: 1;
    display: none;
    align-items: center;
    justify-content: flex-end;
}

.hamburger-menu{
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hamburger-menu div{
    width: 1.6rem;
    height: 3px;
    border-radius: 3px;
    background-color: #fff;
    position: relative;
    z-index: 1001;
    transition: .5s;
}

.hamburger-menu div:before,
.hamburger-menu div:after{
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: #fff;
    border-radius: 3px;
    transition: .5s;
}

.hamburger-menu div:before{
    transform: translateY(-7px);
}

.hamburger-menu div:after{
    transform: translateY(7px);
}

#check{
    position: absolute;
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    z-index: 90000;
    cursor: pointer;
    opacity: 0;
    display: none;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div{
    background-color: transparent;
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:before{
    transform: translateY(0) rotate(-45deg);
}

#check:checked ~ .hamburger-menu-container .hamburger-menu div:after{
    transform: translateY(0) rotate(45deg);
}

@keyframes animation{
    from{
        opacity: 0;
        transform: translateY(15px);
    }
    to{
        opacity: 1;
        transform: translateY(0px);
    }
}

@media (max-width: 1080px){
    .hamburger-menu-container{
        display: flex;
    }

    #check{
        display: block;
    }

    .nav-btn{
        position: fixed;
        height: calc(100vh - 3rem);
        top: 4.9rem;
        left: 0;
        width: 100%;
        background-color: #69bde7;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(100%);
        transition: .65s;
    }

    #check:checked ~ .nav-btn{
        transform: translateX(0);
    }

    #check:checked ~ .nav-btn .nav-link,
    #check:checked ~ .nav-btn .log-sign{
        animation: animation .5s ease forwards var(--i);
    }

    .nav-links2{
        flex: initial;
        width: 100%;
    }

    .nav-links2 > ul{
        flex-direction: column;
    }

    .nav-link{
        width: 100%;
        opacity: 0;
        transform: translateY(15px);
    }

    .nav-link > a{
        line-height: 1;
        padding: 1.6rem 2rem;
    }

    .nav-link:hover > a{
        transform: scale(1);
        background-color: #50a9d6;
    }

    .dropdown, .dropdown.second{
        position: initial;
        top: initial;
        left: initial;
        transform: initial;
        opacity: 1;
        pointer-events: auto;
        width: 100%;
        padding: 0;
        background-color: #3183ac;
        display: none;
    }
    
    .nav-link:hover > .dropdown,
    .dropdown-link:hover > .dropdown{
        display: block;
    }

    .nav-link:hover > a > i,
    .dropdown-link:hover > a > i{
        transform: rotate(360deg);
    }

    .dropdown-link > a{
        background-color: transparent;
        color: #fff;
        padding: 1.2rem 2rem;
        line-height: 1;
    }

    .dropdown.second .dropdown-link > a{
        padding: 1.2rem 2rem 1.2rem 3rem;
    }

    .dropdown.second .dropdown.second .dropdown-link > a{
        padding: 1.2rem 2rem 1.2rem 4rem;
    }

    .dropdown-link:not(:nth-last-child(2)){
        border-bottom: none;
    }

    .arrow{
        z-index: 1;
        background-color: #69bde7;
        left: 10%;
        transform: scale(1.1) rotate(45deg);
        transition: .5s;
    }

    .nav-link:hover .arrow{
        background-color: #50a9d6;
    }

    .dropdown .dropdown .arrow{
        display: none;
    }

    .dropdown-link:hover > a{
        background-color: #3a91bd;
    }

    .dropdown-link:first-child:hover ~ .arrow{
        background-color: #50a9d6;
    }

    .nav-link > a > i{
        font-size: 1.1rem;
        transform: rotate(-90deg);
        transition: .7s;
    }

    .dropdown i{
        font-size: 1rem;
        transition: .7s;
    }

    .lo2g-sign{
        flex: initial;
        width: 100%;
        padding: 1.5rem 1.9rem;
        justify-content: flex-start;
        opacity: 0;
        transform: translateY(15px);
    }
}


/* Responsive Navbar */

.l-heading {
    font-size: 3rem;
    line-height: 1,2;
}

.mt-50 {
    margin-top: 90px;
    margin-bottom: 70px;
}

.bg-dark {
    -background-color:#f3e2b3 !important;
    -background:rgba(0,0,0,0.5);
    color: #000;
}
.bg-dark2 {
    -background-color: #f3e2b3 !important;
    background: rgba(111, 111, 111, 0.5);
    color: rgb(255, 255, 255);
    border-top-left-radius: 50px;
}

.bg-light {
    background-color: #EAEAEA;
    color: #252A34;
}

.primary-text {
    color: #3023e0 !important;
    text-shadow: #100296;
    -flex: size adjust 50px;
}

.py-1 {
    padding: 1.5rem 0;
}

.py-2 {
    padding: 2rem 0;
}

.py-3 {
    padding: 3rem 0;
}

.p-1 {
    padding: 1.5rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}

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

/* Section: Navbar */
header {
    position: sticky;
    top: 0px;
    background-color: #60b4df;
    background-image: linear-gradient(to bottom, rgba(14, 74, 126, 0.418) 20%, #57a9ccf4 80% );
    width: 100%;
    z-index: 1000;
}

/*
section{
    position: relative;
    height: calc(100vh - 3rem);
    width: 100%;
    background: url('bg.jpg') no-repeat top center / cover;
    overflow: hidden;
}
*/

.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgb(56, 165, 238, 0.5);
}

.header {
    min-height: 100vh;
    width: 100%;
    -border-end-end-radius: 4rem;
    -background-image: url(/img/top-view-building.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}
.ourworks-header {
    background-image: url(/img/riyadh-building.jpg);
}
.contactus-header {
    background-image: url(/img/contactus-bg1.jpg);
}
.aboutus-header {
    background-image: url(/img/top-view-building.jpg);
}
.vid-playback {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    -justify-content:center;
    -align-items: center;
    -justify-items: center;
    align-content: center;
}
@media (min-aspect-ratio: 16/9){
    .vid-playback{
        width: 100%;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9){
    .vid-playback{
        width: auto;
        height: 100%;
    }
}

nav {
    display: flex;
    padding: 2% 8%;
    justify-content: space-between;
    align-items: center;
}

.navbar .logo {
    width: 80px;
    z-index: 20;
}

.navbar .logo:hover {
    width: 100px;
}

.nav-links {
    flex: 1;
    text-align: right;
    z-index: 999;
}

.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 300;
}

.nav-links ul li::after {
    content: "links";
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-links ul li:hover::after {
    width: 100%;
}

.text-box {
    width: 90%;
    -color: #ffffff;
    color: #030569;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    z-index: 100;
}

.text-box2 {
    width: 90%;
    color: #030569;
    position: absolute;
    top: 450%;
    left: 50%;
    transform:translate(-50%,-50%);
    text-align: center;
    z-index: 2000;
}

.text-box h1 {
    font-size: 50px;
    font-weight: 200;
}

.text-box p {
    margin: 10px 0 30px;
    font-size: 18px;
    color: #fff;
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.hero-btn:hover {
    border: 1px solid #f44336;
    background: #f44336;
    transition: 0.75s;
}

.sub-btn {
    display: inline-block;
    text-decoration: none;
    color: rgb(102, 96, 96);
    border: 1px solid rgb(34, 33, 33);
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}

.sub-btn:hover {
    border: 1px solid #9e9e9e;
    background: #9e9e9e;
    transition: 0.75s;
}

.lang-btn {
    display: inline-block;
    margin-left: 15px;
    text-decoration: none;
    color: #fff;
    font-size: 10px;
    z-index: 20;
}

.lang-btn .lang-btn1 {
    color: #fff;
    background-color: unset;
    border: 1px solid #fff;
    padding: 4px;
}

.lang-btn .lang-btn2{
    color: #fff;
    background-color: unset;
    border: 1px solid #fff;
    padding: 4px;
}

.lang-btn .lang-btn1:hover {
    border: 1px solid #f44336;
    background: #f44336;
    transition: 0.5s;
}

.lang-btn .lang-btn2:hover {
    border: 1px solid #f44336;
    background: #f44336;
    transition: 0.5s;
}

.subtitle {
    font-size: 20px;
    text-decoration: none;
    font-stretch: ultra-expanded;
    font-style: initials;
    margin-bottom: 50px;
}

/*
#navbar {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  */

.t-ext {
    margin-top: 60px;
}

/*
#navbar img:hover {
    transform: translateX(-40px);
}
*/

/*
#navbar .logo h5 {
    display:flex;
    font-size: 30px;
    text-decoration: none;
    align-items:flex-start;
    color:rgb(94, 33, 3);
}
*/

/*
#navbar .logo h5:hover {
    display:flex;
    font-size: 30px;
    align-items:flex-start;
    color:rgb(94, 33, 3);
    transform: translateX(10px);
    border: 5px solid green;
}
*/

/*
#navbar ul {
    list-style: none;
	list-style-type: none;
    display: flex;
    align-items: center;
    z-index: 1000;
}
*/

/*
#navbar ul li a {
    padding: 1rem;
    color:rgb(168, 59, 8);
    text-decoration: none;
}
*/

/*
#navbar ul li a:hover {
    background-color: #f7cc58 !important;
    border-radius: 5px;
}
*/

/* WaveAnimation */
@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

.-mainwave {
    height: 300vh;
    margin-top: 4000px;
}
.waveWrapper {
    overflow: hidden;
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    background-image: linear-gradient(to top, rgba(2, 85, 167, 0) 20% , #57a9cc );
    background-attachment: scroll;
    z-index: -1;
}
.bgTop {
    z-index: 15;
    opacity: 0.5;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
    animation: move_wave 3s;
    -webkit-animation: move_wave 3s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
    opacity: 1;
}

 /* Our Programs */

 #programs .w-1 {
    margin-top: 40px;
    margin-bottom: 40px;
 }

 #programs .boxes {
    display:flex;
    justify-content: space-between;
    
  }
  
  #programs .boxes .box {
    flex: 1;
  }

  #programs .boxes .box .sector {
    width: 135px;
    margin-bottom: 20px;
  }
  
  #programs .boxes .box .ctp-1 {
    width: 100px;
    -background-color: #08D9D6;
    -padding: 0.5rem;
    -border-radius: 100%;
    -color: #252A34;
  }

  #programs .boxes .box .ctp-2 {
    width: 100px;
    -background-color: #08D9D6;
    -padding: 0.5rem;
    -border-radius: 100%;
    -color: #252A34;
    margin-top: 4px;
    margin-bottom: 30px;
  }

  #programs .boxes .plussign {
    width: 20px;
    -padding: 0.5rem;
    -border-radius: 100%;
    -color: #252A34;
    margin-top: 80px;
  }

  #programs .boxes .equalsign {
    width: 30px;
    -padding: 0.5rem;
    -border-radius: 100%;
    -color: #252A34;
    margin-top: 70px;;
  }

  #programs .boxes .box .person {
    width: 50px;
    background-color: #08D9D6;
    padding: 0.5rem;
    border-radius: 100%;
    -color: #252A34;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  
  #programs .boxes .box .person2 {
    width: 50px;
    background-color: #08D9D6;
    padding: 0.5rem;
    border-radius: 100%;
    -color: #252A34;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  /* Leaders section */

  #leaders .w-1 {
    margin-top: 40px;
    margin-bottom: 40px;
 }

  #leaders .boxes2 {
    display: flex;
    justify-content: space-between;
    
  }

  #leaders .boxes2 .box2 {
    flex: 1;
  }

  #leaders .boxes2 .box2 .person {
    width: 150px;
    background-color: #08D9D6;
    padding: 0.25rem;
    border-radius: 100%;
    -color: #252A34;
    margin-top: 20px;
    margin-bottom: 30px;
  }

  #leaders .boxes2 .box2 .person2 {
    width: 150px;
    background-color: #08D9D6;
    padding: 0.25rem;
    border-radius: 100%;
    -color: #252A34;
    margin-top: 20px;
    margin-bottom: 30px;
    -margin-left: 80px;
  }

  .shadow {
    width: 300px;
  }

  /* Our works */

  #Our-works img {
    width: 400px;
    border-radius: 10%;
    border-top-left-radius: 30%;
    border-bottom-right-radius: 30%;
    border-style: ridge;
    padding: 0.25rem;
    background-color: #5f5f60;
    background-image: linear-gradient(to bottom, rgba(14, 74, 126, 0.548) 20%, #57a9ccd7 80% );
  }

  #Our-works img:hover {
    background: linear-gradient(to bottom, rgba(77, 138, 195, 0.548) 20%,rgba(149, 217, 247, 0.843)7 80% );
    transition: 0.75s;
  }

  #Our-works .teleocom {
    display: flex;
  }

  #Our-works .boxes3 .box-telecom-1 {
    flex: 1;
  }

  #Our-works .boxes3 .box-telecom-2 {
    flex: 1;
    justify-content:flex-end;
  }

  .telecom2-text {
    text-align:center;
  }
  
  #telecom .boxes3 {
    justify-content: space-between;
  }

  .ourworks-btn {
    display: inline-flex;
    justify-content: center;
  }


  

  @media screen and (max-width: 1100px) {
    #Our-works .telecom{
        display: block;
    }
    .container {
        justify-items:auto;
    }
    #Our-works img {
        width: 100%;
        height: 250px;
        justify-items: center;
        align-items: center;
        justify-items: center;
    }
    #Our-works .telecom-text {
        text-align: center;
    }
    #Our-works .telecom-1 {
        margin-bottom: 50px;
    }
    #Our-works .telecom-2 {
        margin-top: 50px;
    }
    .ourworks-btn {
        margin: auto;
        display: flex;
        width: 19%;
    }
  }

  
  /* Our Partners */
  .w-body {
    padding: 0 35px;
    min-height: 50vh;
    align-items: center;
    justify-content: center;
    -background: #343F4F;
  }
  .wrapper{
    display: flex;
    max-width: 80%;
    margin: auto;
    position: relative;
    justify-content: center;
    align-items: center;
  }
  .wrapper i{
    top: 50%;
    height: 44px;
    width: 44px;
    color: #343F4F;
    cursor: pointer;
    font-size: 1.15rem;
    position: absolute;
    text-align: center;
    line-height: 44px;
    background: rgb(221, 221, 221);
    border-radius: 50%;
    transform: translateY(-50%);
    transition: transform 0.1s linear;
  }
  .wrapper i:active{
    transform: translateY(-50%) scale(0.9);
  }
  .wrapper i:hover{
    background: #f2f2f2;
  }
  .wrapper i:first-child{
    left: -32px;
    display: none;
  }
  .wrapper i:last-child{
    right: -32px;
  }
  .wrapper .carousel{
    font-size: 0px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
  }
  .carousel.dragging{
    cursor: grab;
    scroll-behavior: auto;
  }
  .carousel.dragging img{
    pointer-events: none;
  }
  .carousel img{
    -height: 200px;
    object-fit: cover;
    user-select: none;
    margin-left: 14px;
    margin: 40px;
    width: calc(100% / 3);
  }
  .wrapper .carousel .liebherr {
    width: 230px;
    margin-bottom: 110px;
    -margin-right: 30px;
  }
  .wrapper .carousel .potain {
    width: 210px;
    margin-bottom: 62px;
    -margin-right: 40px;
  }
  .wrapper .carousel .terex {
    width: 220px;
    margin-bottom: 80px;
    -margin-right: 30px;
  }
  .wrapper .carousel .agg {
    width: 180px;
    margin-bottom: 70px;
    mar2gin-right: 30px;
  }
  .wrapper .carousel .gjj {
    width: 200px;
    margin-bottom: 100px;
    -margin-right: 30px;
  }
  .wrapper .carousel .zoomlion {
    width: 180px;
    margin-bottom: 115px;
    -margin-right: 30px;
  }
  .wrapper .carousel .YongMao {
    width: 160px;
    margin-bottom: 100px;
    -margin-right: 30px;
  }
  .wrapper .carousel .xmt {
    width: 160px;
    margin-bottom: 100px;
    -margin-right: 30px;
  }

  /* logo Slider */
  
  @keyframes slide {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }
  
  .logos {
    overflow: hidden;
    /*padding: 50px 0;*/
    margin-top: 12%;
    margin-bottom: 12%;
    background: white;
    white-space: nowrap;
    position: relative;
  }
  
  .logos:before,
  .logos:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
  }
  
  .logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
  }
  
  .logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
  }
  
  .logos:hover .logos-slide {
    animation-play-state: paused;
  }
  
  .logos-slide {
    display: inline-block;
    animation: 30s slide infinite linear;
  }
  
  .logos-slide img {
    height: 60px;
    margin: 0 40px;
    transition: transform 0.5s;
  }

  .logos-slide img:hover {
    -height: 70px;
    -width: 380px;
    transform: translateX(30px);
  }
  

  /* logo slider */


  .carousel img:first-child{
    margin-left: 0px;
  }
  
  @media screen and (max-width: 900px) {
    .carousel img{
      width: calc(100% / 2);
    }
  }
  
  @media screen and (max-width: 550px) {
    .carousel img{
      width: 80%;
    }
  }


/* cta */

  #cta {
    background: #252A34 url(/img/riyadh2.jpg) fixed no-repeat center center/cover;
    color: #fff;
   }
  #cta .cta-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 350px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
   }
   .lead2 {
    font-size: 1.5rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
   }
  .ourworks-btn {
    -background-color: #9c9c9c;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    border-radius: 5px;
    color: rgb(113, 113, 113);
    text-decoration: none;
    border: 1px solid rgb(113, 113, 113);
   }
  .ourworks-btn:hover {
    background-color: #3023e0;
    transition: .75s;
    color: #fff;
    border: #3023e0;
   }
   .aboutus-btn {
    -background-color: #9c9c9c;
    padding: 0.5rem 1.25rem;
    cursor: pointer;
    border-radius: 5px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    border: 1px solid rgb(255, 255, 255);
   }
  .aboutus-btn:hover {
    background-color: #3023e0;
    transition: .75s;
    color: #fff;
    border: #3023e0;
   }
  @media screen and (min-width:653px) {
  
    .AU-l-heading {
      font-size: 2rem;
    }
  
    .AU-m-heading {
      font-size: 1.75rem;
      line-height: 1.2;
    }
    #cta .cta-content {
      min-height: 400px;
     }
  }
  

/* About */

#about {
    background: url(/img/gray-background.png) no-repeat center/cover;
    size: 20px;
    z-index: -100;
}

#about h1 {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 70px;
    padding-bottom: 30px;
    font-size: 36px;
    font: weight 2px;
    -background: rgb(255, 253, 253);
    font-weight: 400;
}

#about .color-box {
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    margin: 4rem;

}

#about .color-box img {
    width: 30%;
    display: block;
    -border: 2px solid #fff;
    margin-right: 6.5rem;
    
}

.main-content{
    position: absolute;
    align-items: center;
    justify-content: center;
    color: #f3e2b3;
}

.main-img img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    display:flex;
    align-items:stretch;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -10;
    -background-position-x: 600px 40px;
}

.main-img .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 550px;
    left: 550px;
    padding: 1rem;
    text-align: center;
    font-size: 40px;
}

.main-img p {
    position: absolute;
    color: black;
    font-size: 25px;
    text-align: right;
    z-index: 1000;
}

/* About */


/*@media only screen and (max-width: 768){
    .main-img .main-content h3 {
        position: absolute;
        justify-content: center;
        padding:20px;
        text-align: center;
        display: block;
    }        
}*/

/* Slider */
/*.slider {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: #be842b;
}

.slider .imgbx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
    transition-delay: 0.1s;
    z-index: 1;
    clip-path: circle(0px at left)
}

.slider input[type="radio"]:checked + .imgbx {
    z-index: 10;
    clip-path: circle(10000px at left);
    transition-delay: 1.5s;
}

.slider .imgbx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.slider .imgbx .content {
    position: absolute;
    text-align: center;
    max-width: 800px;
}

.slider .imgbx .content h2 {
    font-size: 6em;
    line-height: 1em;
    color: #fff;
}

.slider .imgbx .content p {
    font-size: 1.1em;
    color: #fff;
}

.slider .imgbx .content a {
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 10px 30px;
    color: #111;
    font-weight: 500;
    margin-top: 20px;
    text-decoration: none;
}

.slider input[type="radio"]{
    position: relative;
    z-index: 10000;
    margin: 5px;
    margin-bottom: 40px;
    outline: none;
    cursor: pointer;

}*/

/* footer section */
footer {
    width: 100%;
    -position: absolute;
    -bottom: 0;
    background: linear-gradient(to bottom, #57a9ccd7 , rgba(14, 74, 126, 0.548));
    color: #fff;
    padding: 100px 0 30px;
    border-top-left-radius: 125px;
    font-size: 13px;
    line-height: 20px;
}
.footer-row {
    width: 85%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
.footer-col {
    flex-basis: 25%;
    padding: 10px;
    box-sizing: border-box;
}
.footer-col:nth-child(2), col:nth-child(3){
    flex-basis: 15%;
}

.footer-logo {
    width: 100px;
    margin-bottom: 0px;
}
.footer-col h3{
    width: fit-content;
    margin-bottom: 40px;
    position: relative;
}
.email-id {
    width: fit-content;
    border-bottom: 1px solid #ccc;
    margin: 20px 0;
    text-decoration: none;
    color: #fff;

}
.mf-list .f-list {
    list-style: none;
    margin-bottom: 12px;
}
.mf-list .f-list a {
    text-decoration: none;
    color: #fff;
}
form {
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
}
.footer-col .subscribe {
    margin-bottom: 25px;
}
form .fa-regular {
    font-size: 18px;
    margin-right: 10px;
}
form input {
    width: 100%;
    background: transparent;
    color: #ccc;
    border: 0;
    outline: none;
}
form button {
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
}
form button .fas {
    font-size: 16px;
    color: #ccc;
}
.social-icons .fab {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    color: #000;
    background: #fff;
    margin-right: 15px;
    cursor: pointer;
    margin-bottom: 10px;
}
hr {
    width: 90%;
    border: 0;
    border-bottom: 1px solid #ccc;
    margin: 20px auto;
}
.copyright {
    text-align: center;
}
.f-underline {
    width: 100%;
    height: 5px;
    background: #767676;
    border-radius: 3px;
    position: absolute;
    top: 25px;
    left: 0;
    overflow: hidden;
}
.f-underline span{
    width: 15px;
    height: 100%;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 10px;
    animation: moving 2s linear infinite;
}
@keyframes moving{
    0%{
        left: -20px;
    }
    100%{
        left: 100%
    }
}

@media (max-width:700px){
    footer{
        bottom: unset;
    }
    .footer-col {
        flex-basis: 100%;
    }
    .footer-col:nth-child(2), col:nth-child(3){
        flex-basis: 100%;
    }
}


/* Profile Section */
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

.profile-body{
  display: flex;
  min-height: 30vh;
  align-items: center;
  justify-content: center;
  -background: #E3F2FD;
}
.download-btn{
  outline: none;
  border: none;
  color: #fff;
  display: flex;
  cursor: pointer;
  padding: 16px 25px;
  border-radius: 6px;
  align-items: center;
  white-space: nowrap;
  background: #4A98F7;
  transition: all 0.2s ease;
}
.download-btn:hover{
  background: #2382f6;
}
.download-btn.timer{
  color: #000;
  background: none;
  transition: none;
  font-size: 1.6rem;
  pointer-events: none;
}
.download-btn.timer b{
  color: #4A98F7;
  padding: 0 8px;
}
.download-btn .icon{
  font-size: 2rem;
}
.download-btn .text{
  font-size: 1.5rem;
  padding-left: 10px;
}

/* aboutus section */

/* introduce */
#introduce .introduce-title{
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    margin-top: 140px;
    margin-bottom: 40px;
    color: #3023e0;
}
#introduce .introduce {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #767676;
}
#introduce .introduce2 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 250px;
    color: #767676;
}
#introduce .introduce-bg {
    background: url(/img/bg-decor\(1\).png) no-repeat center center/cover;
    background-size: 400px;
    opacity: 100%;
}
#introduce .i-c {
    display: inline-block;
    flex: 1;
}
/*
#V2030 .background,
.introduce-bg {
    background: url(/img/bg-decor\(2\).png) fixed no-repeat center center/cover;
    background-size: 500px;
    background-clip: content-box;
    background-origin: border-box;
}
*/

/* V2030 */

#V2030 .background {
    background: url(/img/bg-decor6.png) no-repeat center center/cover;
    background-size: 550px;
    background-clip: cont-ent-box;
    background-origin: bor-der-box;
}

#V2030 .v-sa {
    display: flex;
    flex: 1;
    -height: 200px;
    -width: 80%;
}

#V2030 .v-sa p {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    text-align: center;
    justify-items: center;
    justify-content: center;
    align-items: center;
    margin-top: 150px;
    margin-left: 100px;
    margin-right: 100px;
    color: #767676;
    margin-bottom: 150px;
}

#V2030 .v-sa img {
    width: 250px;
    margin-top: 100px;
    margin-bottom: 150px;
}

@media screen and (max-width:1100px) {
    #V2030 .v-sa {
        display: block;
        margin-bottom: -20px;
    }
    
    #V2030 .v-sa img {
        width: 150px;
        just-ify-content: center;
        just-ify-items: center;
        alig-n-items: center;
        margin-bottom: 20px;
    }
    
    #V2030 .v-sa p {
        margin-top: 10px;
        margin-bottom: 60px;
    }
}

/* Main Table */

.main-table{
	margin:0;
	padding: 100px 100px 100px 100px;
	font-family: sans-serif;
}

.table{
	width: 100%;
	border-collapse: collapse;
}

.table td,.table th{
  padding: 12px 5px;
  border: 0px solid #ddd;
  text-align: center;
  font-size:16px;
  box-sizing: border-box;
}

.table th{
	background-color: #3023e0;
	color:#ffffff;
}

.table tbody tr:nth-child(even){
	background-color: #f5f5f5;
}

/*responsive*/

@media(max-width: 650px){
	.table thead{
		display: none;
	}

    .table td,.table th{
        border: 1px solid #ddd;
    }
	.table, .table tbody, .table tr, .table td{
		display: block;
		width: 100%;
	}
	.table tr{
		margin-bottom:15px;
	}
	.table td{
		text-align: right;
		padding-left: 50%;
		text-align: right;
		position: relative;
	}
	.table td::before{
		content: attr(data-label);
		position: absolute;
		left:0;
		width: 50%;
		padding-left:15px;
		font-size:15px;
		font-weight: bold;
		text-align: left;
	}
}

/* Success Stories */
#ss .ss-title {
    text-align: center;
    font-size: 30px;
    font-weight: 300;
    margin-top: 60px;
    margin-bottom: 70px;
}
#ss .ss {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 30px;
}
#ss .ss2 {
    font-weight: 300;
    margin-left: 50px;
    margin-bottom: 15px;
}

#ss .ss-bg {
    background: url(/img/bg-decor5.png) no-repeat right center/cover;
    background-size: 800px;
}

/* ourLocation section */

.map-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align--items: center;
    justify-content: center;
    flex-direction: column;
}
.map {
    display: inline-block;
    justify-content: center;
    align-items: center;
}
.map p {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 30px;
    font-weight: 200;
    text-align: center;
    margin-bottom: 40px;
}
.map iframe {
    width: 100%;
}

/* location */








/* Our Works */
.df-1{
    display: block;
    -justify-content: center;
    -margin: 100px;
}
.df-2 {
    display: flex;
    margin-bottom: 60px;
    
}
.df-1 .box-list-r {
    display: inline-block;
    -align-items: center;
    -justify-items: center;
    -justify-content: center;
    margin-left: 100px;
    place-items: center;
    -text-align: left;
}
.df-1 .box-list-l {
    margin-left: 200px;
}
.df-2 img,
.df-2 .box-list {
    flex: 1;
}
.ow-1 .df-1 img {
    width: 500px;
    margin-bottom: 30px;
    display: flex;
    border: 2px solid rgb(127, 127, 127);
    border-radius: 1000px;
}
.ow-1 .df-1 h6 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
}
.ow-1 .df-1 p {
    font-size: 20px;
    font-weight: 300;
    margin-left: 20px;
    margin-bottom: 5px;
}
.ow-1 .df-1 .box-list {
    padding: 20px;
}
.ow-1 .TelecomS {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    width: 100%;
    background: linear-gradient(to bottom, #6c79f163, #223daa67), url(/img/large-telecom.jpg) no-repeat center center/cover;
    height: 40vh;
    margin-top: 100px;
}
.ow-1 .df-1 .dcrpp{
    display: flex;
    margin-left: 50px;
}
@media screen and (max-width: 1200px){
    .df-2 {
        display: block;
        text--align: center;
    }
    .ow-1 .df-1 img {
        margin:auto;
    }
    .ow-2 .df-1 img {
        margin:auto;
    }
    .df-1 .box-list-l {
        margin-left: 0px;
    }
    .df-1 .box-list-r {
        margin-left: 0px;
    }
    .ow-4 .dc-img {
        margin: auto;
        margin-left: 0px;
    }
}
.ow-2 .TelecomS {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    width: 100%;
    background: linear-gradient(to bottom, #6c79f163, #223daa67), url(/img/cybersecurity-top.jpg) no-repeat center center/cover;
    height: 40vh;
    margin-top: 100px;
}
.ow-1 .TelecomS2 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    width: 100%;
    background: linear-gradient(to bottom, #6c79f163, #223daa67), url(/img/power-energy-1.jpg) no-repeat center center/cover;
    height: 40vh;
    margin-top: 100px;
}
.ow-1 .sub-telecommunication {
    font-family: 'Saira Condensed', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    font-size: 40px;
    font-weight: 300;
}
.ow-2 {
    display: block;
}
.ow-2 .df-1 img {
    width: 500px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 2px solid rgb(127, 127, 127);
    border-radius: 40px;
}
.ow-2 .df-1 h6 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
}
.ow-2 .df-1 p {
    font-size: 20px;
    font-weight: 300;
    margin-left: 20px;
    margin-bottom: 5px;
}
.ow-2 .df-1 .box-list {
    padding: 40px;
}

.ow-2 .sub-TS {
    font-family: 'Saira Condensed', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    font-size: 40px;
    font-weight: 300;
}
.ow-2 .df-1 .dcrpp{
    display: flex;
    margin-left: 50px;
}
.ow-3 .TelecomS {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
    width: 100%;
    height: 10vh;
    margin-top: 100px;
}
.ow-3 .s-cabling {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    -margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/liebherr-ourworks.jpg) no-repeat center center/cover;
    width: 220px;
    height: 30vh;
}
.ow-3 .dcim {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/agg.jpg) no-repeat center center/cover;
    width: 220px;
    height: 30vh;
}
.ow-3 .noc {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/noc.jpg) no-repeat center center/cover;
    width: 220px;
    height: 30vh;
}
.ow-3 .raisedf {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/raised-floor.jpg) no-repeat center center/cover;
    width: 220px;
    height: 30vh;
}
.ow-3 .blades {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/blade\ servers.jpg) no-repeat center center/cover;
    width: 220px;
    height: 30vh;
}
.ow-3 .switching {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/switching.jpg) no-repeat center center/cover;
    width: 250px;
    height: 30vh;
}
.ow-3 .dcc {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/datacenter\ cleaning.webp) no-repeat center center/cover;
    width: 250px;
    height: 30vh;
}
.ow-3 .analytics {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/analytics.jpg) no-repeat center center/cover;
    width: 250px;
    height: 30vh;
}
.ow-3 .accessC {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/access-control.jpg) no-repeat center center/cover;
    width: 250px;
    height: 30vh;
}
.ow-3 .cctv {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/cctv.webp) no-repeat center center/cover;
    width: 250px;
    height: 30vh;
}
.ow-3 .turnstile {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/turnstile.jpg) no-repeat center center/cover;
    width: 250px;
    height: 30vh;
}
.ow-3 .roadB {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/road\ blocker.jpg) no-repeat center center/cover;
    width: 250px;
    height: 30vh;
}
.ow-3 .risingB {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/rising\ bollards.jpg) no-repeat center center/cover;
    width: 250px;
    height: 30vh;
}
.ow-3 .integration {
    font-family: 'Saira Condensed', sans-serif;
    color: rgb(255, 255, 255);
    font-size: 30px;
    font-weight: 300;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    justify-items: center;
    border: 4px solid #343F4F;
    border-radius: 20px;
    margin: 20px;
    background: linear-gradient(to bottom, #d6c5e619, #00000082), url(/img/integration.jpg) no-repeat center center/cover;
    width: 250px;
    height: 30vh;
}
.ow-3 .pic-list {
    width: 100%;
    display: flex;
    align-items: center
}
.ow-4 .TelecomS {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
    width: 100%;
    height: 10vh;
    margin-top: 100px;
}
.-ow-4 .cd-list {
    display: block;
}
.ow-4 .dc-list p {
    font-family: 'Saira Condensed', sans-serif;
    margin-left: 50px;
    font-size: 20px;
    font-weight: 300;
}
.ow-4 .dc-list h3 {
    font-family: 'Saira Condensed', sans-serif;
    margin-bottom: 40px;
    font-size: 20px;
    margin-top: 20px;
}
.ow-4 .dc-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ow-4 .dc-list p,
.ow-4 .dc-img {
    flex: 1;
}
.ow-4 .dc-img {
    width: 50%;
    -height: 80vh;
    border: 5px solid #fff;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    box-shadow: 0 0 8px #252A34;
    margin-top: 40px;
    margin--left: 100px;
    -margin-left: 1rem;
}

@media screen and (max-width: 1400px) {
    .ow-3 .TelecomS {
        margin-left: 25px;
        margin-bottom: 100px;
    }
    .ow-3 .pic-list {
        display: block;
    }
    .ow-3 .pic-list h1 {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        justify-items: center;
        margin-right: 200px;
    }
}
@media screen and (max-width: 950px) {
    .df-1 {
        display: block;
    }
    .ow-1 .df-1 img {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }
    .ow-2 .df-1 img {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        justify-items: center;
    }
}

/* Contact Us section */
.cu2-container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cu2-form {
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 2vw 4vw;
    width: 90%;
    max-width: 600px;
    border-radius: 10px;
    box-sizing: border-box;
}
.cu2-form textarea {
    width: 100%;
}
.cu2-form .cu-git {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 40px;
    font-weight:200;
}
.cu-git2 {
    font-family: 'Saira Condensed', sans-serif;
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 30px;
}
.cu2-form h3 {
    color: #555;
    font-weight: 800;
    margin-bottom: 20px;
}

.cu2-form input, .cu2-form textarea {
    border: 0;
    margin: 10px 0;
    padding: 20px;
    outline: none;
    background: #f5f5f5;
    font-size: 16px;
}
.cu2-form button {
    padding: 15px;
    background: #ff5361;
    color: #fff;
    font-size: 18px;
    border: 0;
    outline: none;
    cursor: pointer;
    width: 150px;
    margin: 20px auto 0;
    border-radius: 30px;
}