* {
   padding: 0;
   margin: 0;
   font-family: 'Cairo', sans-serif;
}


*:focus {outline: none}


a {
   text-decoration: none
}


::-webkit-scrollbar{width: 10px;}

/* Track */
::-webkit-scrollbar-track{border-radius: 10px;}

/* Handle */
::-webkit-scrollbar-thumb{background: #1374c1;}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover{background: #3f3d56;}


body{overflow: hidden}


.loading{
   position: fixed;
   top: 0;
   height: 100%;
   width: 100%;
   z-index: 999;
   background-color: #ffffff;
   text-align: center;overflow: hidden;
}


.load-image{
   height: 170px;
   padding-top: 38vh;
}


.head {
   position: relative;
   height: 100vh;
}


.navbar, .fixed-nav {
   position: absolute;
   top: 0;
   width: 100%;
   height: 110px;
   background-color: #fffffff6;
   transition: all 1s;
   z-index: 99;
}


.fixed-nav {
   box-shadow: 0 0 10px #00000059;
   position: fixed;
   height: 80px;
   -webkit-animation: slide-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
   animation: slide-bottom 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


 @keyframes slide-bottom {
   0% {
     -webkit-transform: translateY(-100px);
             transform: translateY(-100px);
   }
   100% {
     -webkit-transform: translateY(0px);
             transform: translateY(0px);
   }
 }
 


.head-logo{
   height: 60px;
   position: relative;
   top: 15%;
   left: 20px;
   transition: all .7s;
}
.head-logo:hover{padding-left: 20px}


.tog{
   font-size: 45px;
   position: absolute;
   top: 26%;
   right: 10%;
   color: #1374c1;
   border-radius: 50%;
   opacity: 0;
   transition: all .7s;
}


.tog-rot{transform: rotate(90deg);}




.bar, .bar-f {
   position: absolute;
   bottom: 0;
   right: 0px;
   transition: all .7s;
   width: 70%;
   height: 100%;
   text-align: right;
   padding-right: 90px;
}


.bar-title, .bar-title-f {
   color: #3f3d56;
   font-size: 18px;
   padding: 40px 25px 11px 25px;
   transition: all .7s;
}


.bar-title-f {
   padding: 30px 20px 22px 25px;
   font-size: 17px;
}


.head-image-min{
   padding-right: 100px;
   width: 50%;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
   display: flex;
   justify-content: center;
}


.head-image {width: 100%}


.head-text {
   width: 50%;
   position: relative;
   top: 35vh;
   text-align: center;
}


.head-title {
   color: #3f3d56;
   font-size: 65px;
   letter-spacing: 4px;
}


.head-disc {
   margin-top: -10px;
   font-size: 17px;
}

.head-button {
   height: 55px;
   width: 110px;
   margin: 20px 5px;
   border-radius: 30px;
   font-size: 17px;
   color: #1374c1;
   border: 3px solid #1374c1;
   background-color: #ffffff00;
   transition: all .7s;
   cursor: pointer;
}


.head-button2 {
   color: #fff;
   background-color: #1374c1;
}


.head-button2:hover{
   color: #1374c1;
}


.down{
   margin-top: 50px;
   height: 50px;
   width: 35px;
   align-items: center;
   border: 2px solid #3f3d56;
   border-radius: 20px;
   transition: all .5s ease-in;
   color: #3f3d56;
   -webkit-animation: mover 1s infinite alternate;
   animation: mover 1s infinite alternate;
   -webkit-animation: mover 1s infinite alternate;
   animation: mover 1s infinite alternate;
}


.fa-angle-double-down {font-size: 20px}


.down:hover{background-color: #3f3d56;margin-top: 60px;}


.down:hover .fa-angle-double-down{color: #fff;}


.fa-angle-double-down {
   -webkit-animation: mover 1s infinite alternate;
   animation: mover 1s infinite alternate;
   -webkit-animation: mover 1s infinite alternate;
   animation: mover 1s infinite alternate;
}


@-webkit-keyframes mover {
   0% {
      transform: translateY(25px);
   }

   100% {
      transform: translateY(5px);
   }
}

@keyframes mover {
   0% {
      transform: translateY(25px);
   }

   100% {
      transform: translateY(5px);
   }
}


.about {
   padding: 0px 50px;
   position: relative;
   height: 100vh;
}


.about-image-min{
   float: left;
   width: 45%;
   height: 100%;
   display: flex;
   justify-content: center;
}


.about-image{width: 100%}


.about-text {
   float: right;
   width: 50%;
   text-align: center;
   margin-top: 250px;

}


.about-title {
   font-size: 50px;
   color: #1374c1;
   cursor: pointer;
}


.about-disc {
   padding-top: 10px;
   font-size: 19px;
}


.services-min{
   padding: 0px 30px 0 120px;
   position: relative;
   height: 105vh;
   background-color: #f8f9fa;
}


.serv-image-min{
   width: 50%;
   height: 100%;
   float: right;
   display: flex;
   justify-content: center;
}


.serv-image{width: 80%}


.services{
   float: left;
   width: 50%;
   padding: 50px 0;
}


.services-title{
   font-size: 40px;
   color: #3f3d56;
   cursor: pointer;
}


.serv{
   width: 90%;
   height: 100px;
   margin: 30px 30px;
   position: relative;
   border-left: 5px solid #f8f9fa;
   transition: all 1s;
   cursor: pointer;
}


.serv:hover{
   border-color: #1374c1;
   background-color: #2f2e41;
   margin-left: 50px;
   box-shadow: 0px 0px 17px #d0c6c6;
   -webkit-animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
   animation: swing-top-fwd 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


.serv:hover .serv-text ,.serv:hover .serv-title{
   color: #fff;
}


.serv-icon{
   position: absolute;
   top: 40%;
   left: 5%;
   font-size: 32px;
   color: #1374c1;
}


.serv-text{
   position: absolute;
   top: 9%;
   left: 18%;
}


.serv-title{
   font-size: 20px;
   color: #3f3d56;
   font-weight: bold;
   letter-spacing: 3px;
}


.work{
   text-align: center;
   padding: 80px 10px;
   padding-bottom: 50px;
   height: auto;
}


.works-title{
   font-size: 40px;
   color: #1374c1;
   cursor: pointer;
}


.works{margin-top: 20px}


.work-box{
   position: relative;
   height: 420px;
   width: 300px;
   overflow: hidden;
   display: inline-block;
   margin: 50px 20px;
   box-shadow: 0px 0px 13px 0px #e6e6e6;
}


.work-image{
   height: 50%;
   margin-top: 15px
}


.work-text{
   text-align: left;
   padding: 15px 20px;
}


.work-title{
   font-size: 22px;
   color: #3f3d56;
   letter-spacing: 3px;
}


.work-disc{line-height: 25px}


.work-hover{
   position: absolute;
   top: 0;right: 0;left: 0;
   height: 100%;
   width: 100%;
   transition: all 1s;
   opacity: 0;
}


.work-icon{
   font-size: 30px;
   color: #fff;
   margin-top: 200px;
}


.work-box:hover .work-hover{opacity: 1;}


.team-min{
   padding: 80px 0px 80px 0;
   background-color: #f8f9fa;
}


.team-text{
   padding: 0px 100px;
   text-align: left;
   width: 40%;
}


.team-title{
   color: #1374c1;
   font-size: 40px;
   cursor: pointer;
}


.team-disc{
   color: #3f3d56;
   font-size: 19px;
}


.members{
   margin-top: 20px;
   text-align: center;
}


.member{
   display: inline-block;
   height: 350px;
   width: 240px;
   transition: all .6s;
   cursor: pointer;
}


.member-image{
   height: 140px;
   border-radius: 50%;
   margin-top: 40px;
   padding: 4px;
   border: 4px solid #1374c1;
   transition: all .5s ease-in;
}


.member:hover{background-color: #f2f2f2;}
.member:hover .member-image{border-color: #3f3d56;transform: rotate(10deg);}


.member-name{
   color: #3f3d56;
   font-size: 19px;
   letter-spacing: 2px;
}


.member-skill{
   font-weight: bold;
   color: #3f3d56;
   margin-top: -4px;
}


.member-social{margin-top: 15px}


.member-icon{
   padding: 7px;
   font-size: 27px;
   transition: all .7s;
}


.member-icon:hover{opacity: .8;}


.fa-facebook-square{color: #3b5998;}


.fa-linkedin{color: #007bb5;}


.fa-twitter-square{color: #1da1f2;}


.contact-min{
   height: 110vh;
   position: relative;
}


.contact-map-min{
   float: right;
   width: 40%;
   height: 100%;
   padding-right: 100px;
}


.contact-map{
   width: 100%;
   height: 100%;
   border: none;
}


.contact{
   width: 60%;
   height: 100%;
   text-align: center;
   padding-top: 50px;
}


.contact-title{
   font-size: 40px;
   color: #3f3d56;
   cursor: pointer;
}


.form{margin-top: 40px;}


.contact-small-input,.contact-large-input{
   width: 55%;height: 45px;
   margin-top: 30px;
   border-bottom: 3px solid #1374c1;
   border-radius: 10px;
   overflow: hidden;
   transition: all .6s;
   align-items: center;
   background-color: rgba(240, 240, 240, 0.116);
}


#contact-small-input,#contact-large-input{
   float: right;
   width: 85%;height: 45px;
   border: none;
   font-size: 15px;
   background-color: rgba(240, 240, 240, 0.027);
}


.contact-large-input{height: 200px}


#contact-large-input{
   height: 200px;
   padding-top: 10px;
}


.contact-small-input:hover,.contact-large-input:hover{
   box-shadow: 0px 0px 7px 2px #1374c1;
   border-bottom-color: #fff;
}


.input-icon{
   margin: 14px 0px;
   padding: 3px 10px;
   font-size: 15px;
   color: #3f3d56;
   border-right: 1px solid #3f3d56;
   transition: all .6s;
}


.sumbit{
   height: 45px;width: 55%;
   margin-top: 30px;
   background-color: #1374c1;
   border:none;
   color: #fff;
   font-size: 20px;
   -webkit-border-top-right-radius: 30px;
   -webkit-border-bottom-left-radius: 30px;
   border-top-right-radius: 30px;
   border-bottom-left-radius: 30px;
   transition: all .6s;
   cursor: pointer;
}


.sumbit:hover{
   border-top-right-radius: 0px;
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 30px;
   border-top-left-radius: 30px;
   background-color: #3f3d56;
}


.info{margin-top: 20px}


.contact-info{
   display: inline-block;
   padding: 0 5px;
   font-size: 17px;
   color: #3f3d56;
}


.info-icon{
   padding: 0 7px;
   color: #3f3d56;
}


.footer{
   height: auto;
   text-align: center;
   padding: 120px 0 50px;
}


.footer-text{
   font-size: 17px;
   text-decoration: none;
}


.footer-span{
   font-size: 18px;
   color: #1374c1;
   padding: 0 7px;
   transition: all .6s;
}


.footer-span:hover{opacity: .5;}


@media only screen and (max-width:950px){


.navbar {
   position: fixed;
   height: 90px;
   background-color: #fff;
}


.tog{opacity: 1}


.head-logo{left: 0px;top: 18%;}


.bar, .bar-f{
   float: none;
   position: fixed;
   top: 90px;
   text-align: center;
   padding: 40px 0px 40px 0px;
   background-color: #fffffffb;
   height: 300px;
   width: 100%;
   display: none;
}


.bar-m{

   display: block;
   -webkit-animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
   animation: slide-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-left {
   0% {
     -webkit-transform: translateX(0);
             transform: translateX(0);
   }
   100% {
     -webkit-transform: translateX(-100px);
             transform: translateX(-100px);
   }
 }
 @keyframes slide-left {
   0% {
     -webkit-transform: translateX(100px);
             transform: translateX(100px);
   }
   100% {
     -webkit-transform: translateX(0px);
             transform: translateX(0px);
   }
 }


.bar-title, .bar-title-f {
   font-size: 20px;
   padding: 0px 0px 30px 0px;
   display: block;
}


.head-image-min {display: none}


.head-text {
   top: 27vh;
   width: 100%;
}


.head-title {font-size: 65px}


.head-button {
   height: 65px;
   width: 125px;
   font-size: 20px;
}


.down {margin-top: 50px}

 
.about {
   padding: 50px 30px;
   height: 105vh;
   text-align: center;
}


.about-image-min {
   float: none;
   padding-top: 30px;
   width: 100%;
   height: 300px;
}


.about-text {
   float: none;
   width: 100%;
   margin-top: 50px;
}


.about-title {font-size: 50px}


.services-min{
   padding: 0;
   height: auto;
   text-align: center;
}


.serv-image-min{display: none}


.services{
   float: none;
   width: 100%;
   padding: 50px 0;
}


.services-title{font-size: 50px;margin-bottom: 50px;}


.serv{
   width: 100%;
   height: 130px;
   margin: 0px 0px;
   padding: 5px 0px;
   text-align: left;
   border: none;
}


.serv:hover{margin-left: 0px}


.serv-icon{font-size: 35px;left: 25px;}


.serv-text{left: 25%}


.works-title{font-size: 40px}


.team-min{padding: 50px 30px}


.team-text{
   padding: 0px 0px;
   width: 100%;
   text-align: center;
}


.member-icon{font-size: 35px}


.contact-min{
   padding: 50px 0px;
   text-align: center;
   height: 1150px;
}


.contact-map-min{
   position: absolute;
   bottom: 0;
   height: 400px;
   width: 100%;
   padding-right: 0;
}


.contact{
   width: 100%;
   padding: 0px;
}


.contact-title{font-size: 45px}


.contact-small-input,.contact-large-input{
   width: 85%;
   height: 60px;
   position: relative; 
   margin-top: 10px;
}


.contact-large-input{height: 220px}


#contact-small-input,#contact-large-input{
   width: 80%;
   height: 60px;
}


#contact-large-input{padding-top: 30px;}


.input-icon{
   position: absolute;
   top: 10%;
   left: 15px;
   font-size: 19px;
}


.sumbit{
   height: 50px;
   width: 85%;
}


.info{margin-top: 40px}


.contact-info{
   display:block;
   padding: 10px 0px;
   font-size: 20px;
}


.info-icon{
   padding: 0px 10px;
   color: #1374c1;
}


.wow{
   animation-name: none !important;
   visibility: visible !important;
}


}