body, html{
    font-family: sans-serif;
    margin: 0 auto;
    height: 100%;
}
*{margin: 0px auto;padding: 0px auto;box-sizing: border-box;font-family: 'Dosis', sans-serif;}
.hidden{display: none;}
.shadow{
    -moz-box-shadow:    0 4px 8px #D0D3D4;
    -webkit-box-shadow: 0 4px 8px #D0D3D4;
    box-shadow:         0 4px 8px #D0D3D4;
}
/* width */
::-webkit-scrollbar {width: 12px;}
/* Track */
::-webkit-scrollbar-track {background: white;border-left: 1px solid #eee;}
/* Handle */
::-webkit-scrollbar-thumb {background: #A9CCE3;border-radius: 10px;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {background: #aaa;}

#line{border: 2px solid #666;width: 60px;margin: 0 auto;}
#line-two{float: left;clear: both;border: 0.5px solid #666;width: 100px;margin: 10px 0px;}
/*------------------------------------------------------------------------------------------*/
/*MENU------------------------------------------------------------------------------*/
.menuDesktop{float: left;position: fixed;
    width: 100%;z-index: 1;top: 0;left: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 1;
    line-height: 60px;background-color: white;
    text-align: center;transition-duration: 2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 0px 50px;
}
.menuDesktop li{display: inline-block;margin: 0px;text-decoration: none;list-style: none;padding: 0px;}
.menuDesktop a{float: left;text-decoration: none;font-size: 16px;color: #444;transition-duration: 0.2s;padding: 0px 10px;transition-duration: 1s;}
.menuDesktop p{float: left;text-align: center;text-decoration: none;font-size: 16px;color: #444;font-weight: bold;transition-duration: 0.2s;padding: 0px 20px;border-right: 2px solid #eee;}
.menuDesktop ul{float: right;height: 60px;}
.activeA{color: #A9CCE3 !important;
    -webkit-box-shadow:inset 0px -4px 0px #A9CCE3;
    -moz-box-shadow:inset 0px -4px 0px #A9CCE3;
    box-shadow:inset 0px -4px 0px #A9CCE3;
}
.menuDesktop a:Hover{color: #A9CCE3;cursor: pointer;}
/*MENU------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/
.menuMobile-parent{
    display: none;
    float: left;position: fixed;
    width: 100%;
    height: 60px;
    background-color: white;
    z-index: 2;box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.menuMobile-parent p{float: left;text-align: center;text-decoration: none;font-size: 16px;color: #444;font-weight: bold;transition-duration: 0.2s;padding: 0px 20px;line-height: 60px;}
.menuMobile{
    float: right;
    font-weight: bold;
    width: 60px;padding: 10px 0px;
    height: 60px;
}
.hamburger{
    width: 36px;height: 3px;
    background: #444;
    position: absolute;
    margin: 17px 10px;
    transition: .2s;
}
.hamburger:before,
.hamburger:after{
    content: '';
    width: 36px;height: 3px;
    background: #444;
    position: absolute;
    transition: .2s;
}
.hamburger:before{top: -8px;}
.hamburger:after{top: 8px;}

.menuMobile.active .hamburger{
    background: rgba(0,0,0,0);
    box-shadow: 0 2px 5px rgba(0,0,0,0);
}
.menuMobile.active .hamburger:before{
    top: 0;
    transform: rotate(45deg);
}
.menuMobile.active .hamburger:after{
    top: 0;
    transform: rotate(135deg);
}
.activeMobile{color: #A9CCE3 !important;}
@media screen and (max-width: 650px){
    .menuDesktop{display: none;}
    .menuMobile-parent{display: block;}
}
/*MOBILE-------------------------------------------*/
.sidenav{float: left;clear: both;display: none;overflow-x: hidden;transition: 0.5s;text-align: center;width: 100%;border-bottom: 1px solid #ddd;}
.sidenav a{text-decoration: none;color: #444;display: block;font-weight: bold;transition-duration: 0.5s;background-color: #eee;padding: 10px 0px;}
.sidenav a:Hover{color: #A9CCE3;}
.sidenav p{
    text-decoration: none;
    font-size: 16px;
    color: black;
    display: block;
}





/*------------------------------------------------------------------------------------------*/
/*HEADER------------------------------------------------------------------------------*/
.header{padding-top: 60px;float: left;width: 100%;height: 60%;}
.header #insideHeader{
    position: absolute;
    text-align: center;
    margin: 0px auto;
    width: 100%;height: 60%;
    background-image: url("../images/Back1.jpg");background-position: center;background-size: cover;
    background-color: #F7F9F9;
}
.header #insideHeader #hOne{font-size: 24px;width: 100%;padding: 5px 0px;
}
#hOne p{float: left;width: 33.33%;font-weight: bold;}
#logoDesign{width: 250px;height: 250px;}

.header #insideHeader #hOne {
    animation:myfirst 5s;
    -moz-animation:myfirst 10s infinite; /* Firefox */
    -webkit-animation:myfirst 10s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst /* Firefox */ {
    0% {color:#A9CCE3;}
    50% {color:#444;}
    100% {color:#A9CCE3;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
    0% {color:#A9CCE3;}
    50% {color:#444;}
    100% {color:#A9CCE3;}
}

@media screen and (max-width: 400px){
    #logoDesign{width: 200px;height: 200px;}
    .header #insideHeader{width: 100%:}
}
@media screen and (max-width: 800px){
    .header{text-align: center;}
    .header #insideHeader #hOne{background-color: transparent;}
}
/*HEADER------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/
.cta{
    width: 100%;
    font-size: 24px;
    float: left;
    background-color: #F7F9F9;
    padding: 60px 10px;
    -webkit-clip-path:polygon(0 0,100% 0,100% 50%,0% 100%);
    clip-path:polygon(0 0,100% 0,100% 50%,0% 100%);
}
.cta-content{width: 60%;margin: 0px auto;}
.cta p{float: left;}
.cta a{float: left;font-size: 24px;border: none;background-color: transparent;color: #A9CCE3;cursor: pointer;}
.cta a:Hover{text-decoration: underline;}
@media screen and (max-width: 400px){
    .cta{
        -webkit-clip-path:polygon(0 0,100% 0,100% 80%,0% 100%);
        clip-path:polygon(0 0,100% 0,100% 80%,0% 100%);
    }
}



.below-header{
    float: left;width: 100%;
}
.below-header span{float: left;width: 33.33%;text-align: center;}
.below-header span img{padding: 10px;width: 64px;height: 64px;}
.below-header span p{padding: 10px 0px;font-size: 24px;}

/*------------------------------------------------------------------------------------------*/
/*EXPERTISE------------------------------------------------------------------------------*/
.expertise{float: left;width: 100%;}
.expertiseHeader{text-align: center;width: 25%;padding: 20px 10px;color: #444;}


#three_side_by_side_boxes{float: left;width: 100%;padding: 60px 0px;position: relative;}
#three_side_by_side_boxes #image{position: absolute;bottom: 0px;right: 0px;z-index: -1;}
#three_side_by_side_boxes #box{float: left;width: 33.33%;}
#box-content{background-color: white;height: 250px;width: 250px;text-align: center;
display:table;}
        
#box h1{color: #444;width: 100%;padding: 5px 0px;}
#box-content p{color: #444;padding: 2px;}

@media screen and (max-width: 800px){
    #three_side_by_side_boxes #box{width: 100%;padding: 10px 0px;}
    .expertiseHeader{width: 100%;}
}
/*EXPERTISE------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------*/
/*EMAIL------------------------------------------------------------------------------*/
.email-us{padding: 60px 0px;float: left;width: 100%;background-color: #F7F9F9;position: relative;}

.email-us button:Hover{cursor: pointer;
    -moz-box-shadow:    0 0 8px #666;
    -webkit-box-shadow: 0 0 8px #666;
    box-shadow:         0 0 8px #666;
}
.twoside{float: left;width: 50%;}
.twoside-box-1{float: left;margin: 20px;padding: 0px 20px;}
.twoside-box-1 h1{float: left;padding: 10px 0px;}
.twoside-box-1 p{float: left;;clear: both;padding: 5px 0px}
.twoside-box-2{float: left;background-color: white;margin: 20px;padding: 20px;border-radius: 10px;}
.twoside-box-2 h2{float: left;padding: 10px 0px;}
.twoside-box-2 p{float: left;padding: 10px 0px;}
.email-us button{float: left;clear: both;padding: 10px;font-size: 16px;margin: 10px 0px;border: none;background-color: #A9CCE3;color: white;border-radius: 50px;}
.mailBox-img{position: absolute;bottom: 0px;left: 100px;}
@media screen and (max-width: 800px){.twoside{width: 100%;padding: 10px 0px;}}
/*EMAIL------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------*/
/*CONTACT------------------------------------------------------------------------------*/
.contact{display: none;z-index: 2;float: left;width: 100%;background-color: #888;
    position: fixed;top: 0;left: 0;background-color: rgba(1, 0, 0, 0.7);;width: 100%;height: 100%;
}
.contact-form{
    width: 360px;margin: auto;margin-top: 5%;;text-align: left;
    -moz-box-shadow:    0 0 8px #666;
    -webkit-box-shadow: 0 0 8px #666;
    box-shadow:         0 0 8px #666;
    padding: 10px;
    background-color: white;
    position: relative;
}
.cancel_Btn{font-size: 24px;color: #444;}
cancel:Hover{cursor: pointer;color: red;}
.contact-form p{padding: 10px 0px;color: #444;font-weight: bold;}
#contact-content input{padding: 10px;margin: 10px 0px;width: 100%;border: none;display: inline-block;outline: none;background-color: #F7F9F9;}
#contact-content button{padding: 10px;margin: 10px 0px;width: 100%;border: none;
    display: inline-block;color: white;border-radius: 50px;cursor: pointer;background-color: #A9CCE3;outline: none;}
@media screen and (max-width: 400px){
    .contact-form{width: 90%;}
}
/*EMAIL------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------*/
/*MISSION------------------------------------------------------------------------------*/
.ourMission{padding: 60px 0px;float: left;width: 100%;background-color: #666;position: relative;text-align: center;
    background-image: url("../images/image2.jpeg");background-position: center;background-size: cover;
}
.ourMission #mission-img{background-color: #F7F9F9;width: 100px;height: 100px;border-radius: 50px;position: relative;}
#mission-img img{width: 50px;height: 50px;position: absolute;transform: translate(-50% , 50%);}
.ourMission h2{padding: 10px;color: white;
    text-shadow: 0px 2px 2px #aaa,
                 0px 10px 10px rgba(0,0,0,0.15),
                 0px 4px 8px rgba(0,0,0,0.1),
                 0px 20px 20px rgba(0,0,0,0.1);
}
.ourMission p{padding: 10px;color: #444;font-size: 16px;background-color: white;width: 60%;opacity: 0.9;border-radius: 50px;}
.ourMission-box{
    float: left;width: 50%;
}
.cloudImg{position: absolute;top: -60px;right: 0px;}
@media screen and (max-width: 800px){.ourMission-box{width: 100%;padding: 10px 0px;}}
/*MISSION------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

/*SUBSCRIBE------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/
.subscribe{float: left;width: 100%;padding: 60px 0px;}
.subscribe-content{width: 50%;margin: 0px auto;}

.subscribe h1{float: left;clear: both;}
.subscribe hr{float: left;clear: both;}
.subscribe p{float: left;clear: both;padding: 10px 0px;}
.subscribe input{float: left;clear: both;padding: 10px 10px;border: 1px solid #ddd;}
.subscribe button{float: left;clear: both;padding: 10px;border: 1px solid #A9CCE3;background-color: #A9CCE3;color: white;border-radius: 50px;margin: 10px 0px;}
@media screen and (max-width: 800px){
    .subscribe-content{width: 80%;}
    .subscribe input{margin: 10px 0px;}
    .subscribe button{width: 100%;}
}
/*SUBSCRIBE------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

/*OUR WORK------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/
.ourWork{float: left;width: 100%;padding: 60px 0px;color: #A9CCE3;letter-spacing: 5px;}
.ourWork-box{float: left;width: 25%;text-align: center;}
.ourWork-box img{background-color: white;padding: 10px;}
@media screen and (max-width: 800px){
    .ourWork-box{width: 100%;}
}
/*OUR WORK------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

/*ABOUT------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/
.about{float: left;width: 100%;padding: 60px 0px;background-color: #F7F9F9;color: #444;position: relative;
    background-image: url("../images/Back2.jpg");background-position: center;background-size: cover;
}
.top-boxes{float: left;height: 50%;
    background-image: url("../images/image1.jpeg");background-position: center;background-size: cover;
}
.about-box{float: left;width: 50%;}
.about-box-content-one{margin: 20px 10px 5px 20px;padding: 20px 10px;}
#about-small-design{padding: 10px;border: 1px solid white;color: white;}
.about-box-content-one p{padding: 10px 0px;}
.about-box-content-two{margin: 20px 10px 5px 20px;background-color: white;padding: 10px 10px;}
.about-box p{margin: 2px 0px;}
#about-img{position: absolute;bottom: 0px;left: 100px;}
.about-box-2{float: left;width: 100%;}
.about span{float: left;padding: 20px 10px;text-align: center;width: 50%;height: 20%;}
.about span p{padding: 10px 0px;}
@media screen and (max-width: 600px){
    .top-boxes{height: auto;}
    .about{height: auto;}
    .about-box{width: 100%;}
    .about span{width: 100%}
}
/*ABOUT------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

/*SERVICES------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/
.services{float: left;width: 100%;padding: 60px 0px;background-color: #F7F9F9;position: relative;}
.services-box{float: left;width: 25%;}
.services-box-content{margin: 20px;padding: 20px 10px;
    color: #444;
}
.services-lists{float: left;clear: both;width: 100%;}
.services-lists-box{float: left;width: 25%;text-align: center;font-size: 16px;color: #444;}
.services-lists-box-content{background-color: white;margin: 20px;padding: 20px;height: 400px;}
.services-lists-box-content img{background-color: #666;padding: 10px;border-radius: 5px;}
@media screen and (max-width: 800px){
    .services-lists-box{width: 50%;}
    .services-box{width: 100%;}
}
@media screen and (max-width: 600px){
    .services-lists-box{width: 100%;}
    .services-lists-box-content{height: auto;}
    #box{display: none;}
}
/*SERVICES------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

/*FOOTER------------------------------------------------------------------------------*/
.footer{float: left;width: 100%;background-color: #444;padding: 60px 0px;}
.footer-content{width: 80%;}

.footer-box{float: left;width: 33.33%;padding: 20px 10px;}
.footer-box h3{float: left;clear: both;color: white;padding: 10px 0px;}
.footer-box p{float: left;clear: both;color: #aaa;}

@media screen and (max-width: 600px){
    .footer-box{width: 100%;}
}
/*FOOTER------------------------------------------------------------------------------*/

/*BOTTOM------------------------------------------------------------------------------*/
.bottom{background-color: #222;font-size: 16px;color: #666;float: left;width: 100%;border-top: 1px solid #666;}
.bottom-content{width:80%;}
.bottom p{padding: 20px 10px;float: right;}

@media only screen and (max-width: 600px){
    .bottom p{float: none;}
    .bottom{text-align: center;}
}
/*BOTTOM------------------------------------------------------------------------------*/

.success{display: block;z-index: 10;float: left;width: 100%;background-color: #888;position: fixed;top: 0;left: 0;background-color: rgba(1, 0, 0, 0.7);;width: 100%;height: 100%;}
.success-conent{width: 360px;margin: auto;margin-top: 10%;text-align: left;padding: 10px;background-color: white;position: relative;}

#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99;float: left;text-align: center;background-color: white;}
#loading-image {margin-top: 200px;;width: 140px;height: 140px;}

.move_top_div{padding: 5px;position: fixed;bottom: 0;left: 10px;display: none;background-color: #A9CCE3;
    border-top: 1px solid white;border-right: 1px solid white;border-left: 1px solid white;
    border-radius: 20px 20px 0px 0px;}
#move_top{width:30px;height: 30px;;color: #1B4F72;}
#move_top:Hover{cursor: pointer;transition: all 0.8s ease;}