html,body {
    margin:0px;
    padding:0px;
    overflow-x: hidden;
}
/* navbar with main page */
.page{
    width: 100%;
    height: 500px;
    /*background: linear-gradient(to bottom, #00ccff 0%, #99ffcc 100%);*/
    background-image:url(../images/banner1.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    animation:change 20s infinite ease-in-out;
}
@keyframes change{
    0%{
        background-image:url(../images/banner1.jpg);
    }
    25%{
        background-image:url(../images/banner2.jpg);
    }
    50%{
        background-image:url(../images/banner3.jpg);
    }
    75%{
        background-image:url(../images/banner4.jpg);
    }
    100%{
        background-image:url(../images/banner1.jpg);
    }
}
.container-fluid {
    background:transparent;
}
.logo{
    width: 130px;
    height: 70px;
    margin-left: 5%;
}
#contact{
    border-radius: 20px;
    padding: 10px 30px;
    margin-right: 10px;
}
.title{
    margin: 4% 5%;
    font-family: 'Raleway', sans-serif;
}
.about{
    margin: 4% 5%;
    color: white;
}

/* page 2 */

.page2{
    text-align: center;
    margin: 4% 5%;
    font-size: 1rem;
}
.who-we{
    font-family: 'Raleway', sans-serif;
    padding-bottom: 10px;
}
.choose-us{
    font-size: 2rem;
}
.problems{
    margin: 3% 3% 0% 3%;
    width: 220px;
    height: 180px;
}
.problem{
    border-radius: 50%;
    width: 100px;
    height: 100px;
}
hr{
    align-content: center;
    margin-left: 5%;
    margin-right: 5%;
}
/* page 3 */

.clients{
    width: 100%;
    margin-left: 8%;
}
.client{
    width: 130px;
    height: auto;
}

/* our services */

.services{
    padding: 2% 0%;
    text-align: center;
}
.branch{
    margin: 2% 4%;
}
.our{
    color: #00ccff;
    font-size: 2rem;
}
.service{
    font-size: 2rem;
}
.serve{
    width: 272px;
    height: 170px;
    margin: 1% 1%;
}
.service-{
    width: 200px;
    height: 105px;
}
#read{
    border-radius: 20px;
    padding: 10px 30px;
}

/* why us */

.why-us{
    text-align: center;
    margin-top: 2%;
    color: white;
    padding: 2% 0%;
}
.content {
    margin: auto;
    width: 50%;
    border: 3px solid white;
    padding: 40px;
    border-radius: 25px;
  }

.wrapper{
    width:1000px;
    margin:25px auto;
    display:flex;
    overflow:hidden;
    border-radius:180px;
    /*padding:2.5rem;*/
    background:#fff;
    box-shadow:rgba(0,0,0,0.35) 0 5px 15px;
}
.item{
    animation:animate 25s alternate linear infinite;
}
.wrapper:hover .item{
    animation-play-state: paused;
}
@keyframes animate{
    0%{
        transform:translate3d(0,0,0);
    }
    100%{
        transform:translate3d(-1100px,0,0);
    }
}

/*for mobiles*/
@media only screen and (max-width: 500px) {
    .services{
    padding: 2% 15%;
    text-align: center;
    }
  .why-us{
      width:100%;
      height:auto;
      text-align: center;
      margin-top: 2%;
      color: white;
      padding: 2% 0%;
  }
  .content {
    margin: auto;
    width: 95%;
    border: 3px solid white;
    padding: 40px;
    border-radius: 25px;
  }
  .wrapper{
      width:95%;
      border-radius:0;
  }
}


/*for tablet*/

@media only screen and (min-width: 500px) {
    .services{
    padding: 2% 11%;
    text-align: center;
    }
  .why-us{
      width:100%;
      height:auto;
      text-align: center;
      margin-top: 2%;
      color: white;
      padding: 2% 0%;
  }
  .content {
    margin: auto;
    width: 70%;
    border: 3px solid white;
    padding: 40px;
    border-radius: 25px;
  }
}

/*for laptop*/

@media only screen and (min-width: 1000px) {
    .services{
    padding: 2% 21%;
    text-align: center;
    }
    .clients{
    width: 100%;
    margin-left: 4%;
    }
}
@media only screen and (min-width: 1200px) {
    .services{
    padding: 2% 0%;
    text-align: center;
    }
    #contact-us{
    background-color: #0081B4;
    margin-bottom: 0%;
    padding: 0% 10%;
    color: white;
    }
    .clients{
    width: 100%;
    margin-left: 8%;
    }
}
@media only screen and (min-width: 1300px) {
    .services{
    padding: 2% 5%;
    text-align: center;
    }
    #contact-us{
    background-color: #0081B4;
    margin-bottom: 0%;
    padding: 0% 10%;
    color: white;
    }
    .clients{
    width: 100%;
    margin-left: 12%;
    }
}
/*for pc*/
@media only screen and (min-width: 2000px) {
    .services{
    padding: 2% 25%;
    text-align: center;
    }
    #contact-us{
    background-color: #0081B4;
    margin-bottom: 0%;
    padding: 0% 15%;
    color: white;
    }
    .clients{
    width: 100%;
    margin-left: 30%;
    }
}

#call{
    margin-top: 3%;
    border-radius: 20px;
    padding: 10px 30px;
    margin-right: 10px;
}
/* contact */

#contact-us{
    background-color: #0081B4;
    margin-bottom: 0%;
    padding: 0% 5%;
    color: white;
}
.main{
    text-align: center;
    padding-top: 2%;
}