@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');


* { padding: 0px;
    margin: 0px;
    box-sizing: border-box; }


body{ font-family: 'Cairo', sans-serif;
      line-height: 1.5;
      background-color: #333;
    }



#navbar{ display: flex;
        justify-content: space-between;
        position: sticky;
        top: 0px;
        background-color:rgb(51, 51, 51,0.5);
        color: #fff;
        z-index: 1;
        padding:0 1rem;
        height: 130px;}

#right-nav{ width:190px;  }

.logo { background-image:url("../images/logo.png");
        width:102px; height: 110px; float: right; margin-right: 60px; margin-top: 10px;} 

.text-color{ color: #0f8eb1; }

.text-primary{ height: 110px; width:120px; float: left;  
                }

#left-nav ul { display: flex;
             list-style: none;
             align-items: center;
             margin: 20px;
            margin-top: 50px;}

#left-nav ul li a { color: #fff;
                    font-size: 18px; 
                     padding:15px;
                     text-decoration: none;}

#left-nav ul li a:hover { background-color:#0f8eb1;
                          border-radius: 5px;}



#showcase{ background:url("../images/water1.jpg") no-repeat #333  center center/cover;
           height: 100vh; color: #fff;}


#showcase .showcase-content{ display: flex;
                             flex-direction: column;
                              text-align: center;
                              justify-content: center;
                              align-items: center;
                              height: 100%; 
               /*  over-lay */
                             position: absolute;
                              top:130px;
                              left:0px;
                              bottom: 0px;
                              right: 0px;
                             background:rgb( 0,0,0,0.3);
                            clear: both;}


.l-heading { font-size: 4rem;
            margin-bottom: .75rem;
            line-height: 1.1;}


.definition{ font-size: 1.3rem; 
             margin-bottom: 2rem;
            clear: both;}


#what{ background-color: #fff;
       color: #333;
    padding: 1.5rem;
clear: both;}

.text-center{ text-align: center;
              font-size: 2rem; }


.container{ display: flex;
            padding-top: 1rem;
            align-items: center;}



.item{ 
       display: inline-block;
       width: 33%;
       padding: 10px 40px;
       justify-content: space-around;
        }

.img{align-items: center; }


.article h3{ text-align: center;}


#who{ margin:20px; }

.who-img{ display: inline-block;
	     background: #333 url("../images/we.jpeg")no-repeat center center/cover;
          height: 440px; width:40%; border-radius: 25px; }

.who-text{ display: inline-block; color: #fff; font-size: 16px;
	       padding: 2rem; line-height: 1.8rem;  width:55%; }
.who-text p{  }
h2 .m-heading {}

.who-text ul {list-style: none; margin-top: 10px;}




#our-work{background-color: #dbd9da;  clear: both;
           padding-bottom: 20px;}




.offers{ padding-top: 2rem;
         align-items: center;
         flex-wrap: wrap-reverse;
         justify-content: space-around;
         display: flex;}

.item-offer{ 
       flex:2;
       width: 30%;
	margin:7px;
	align-content: space-between;
	flex-wrap: wrap-reverse;
	justify-content: space-between;
      flex-flow: row-reverse; 
        }

.img-offer{margin:10px 15px 0 0; }


.article h3{ text-align: center;}




#connect{ height: 500px; background-color:darkgray; 
         display:flex; justify-content: center; }

#connect-us{ flex:1.3; height: 500px; width: 30%;
            background-color:#0f8eb1; align-content: stretch; }

.connect-title{ color: #fff; margin: 20px 40px 0px 0px ;}

.connect-title2{ color: #fff; margin: 0px 40px 0px 0px ;}

.connect-info{ margin: 20px 60px 0px 0px ; }

.info-title{ color: #fff; margin: 20px 0 7px 0px;}

.info-text { width:70%; height: 35px; 
    border-radius: 5px; border: 1px solid #fff; margin-bottom: 10px; align-items: center; flex:1;}

.btn-3{ display: inline-block;
      background-color:#4f4e4e;
      padding: 0.5rem 2rem;
      border-radius: 5px;
      color: #fff;
    text-decoration: none;
    margin-top: 10px;
    margin-right: 80px;
    width: 50%; 
    height: 40px;
    text-align: center;
    }

.btn-3:hover { background-color: #333;}

#connect-photo{ background: url("../images/drinkwater.jpg")no-repeat center center/cover; flex:2; height: 500px; width:60%   }




#footer{ height: 130px; background-color: #333; clear: both;}


#footer-right{ width:33%;  
             display: inline-block;
            margin-top: 20px;}

#footer-left{width:33%;   
           display: inline-block;
            margin-top: 20px;}

#footer-center{width:33%;  
            display: inline-block;
            margin-top: 90px;}

.text-footer{ color:#cdcdcd; text-align: center; font-size: 14px;}