:root {
  --blue: #02a5dc;
  --grey:#f5f3f3;
  --drgrey: #444;
  --orange: #e88729;
  --lightOrange: #ffeed9;
  --lightBlue:#DDF0F6 ;
}

body {
  background-color: white;
  color: black;
  margin:0;
}
html {
  scroll-behavior: smooth;
}

*{
  font-family: arial;
}

#waterCons{
  Text-align:center;
  Background-color:var(--orange);
  Margin: 0 auto; 
  Padding: 7px 0;
  Position:relative;
  Color:white;
}
#waterCons table{

max-width:950px;
}
#waterCons table tr td p{
Margin: 15px auto; 
Padding:0 6px;
Text-align:center;
}

#waterCons table tr td p a{
Color:white;
}

#waterConsBtn{
  Margin:0 5px 7px 5px;
  Color:var(--orange);
  cursor: pointer;
  border: none;
  Font-size:20px;
  Border-radius:9px;
  Padding:3px 7px;
grid-column: 2;
Width:27px;
}


/* ------------------header------------------ */
div.header {
  Height:5em;
  margin: 20px auto;
  display: flex; 
  /*justify-content: center;*/
  align-items: center;
  max-width:950px;
  Position:relative;
}

.homepageLogo, .homepageLogo img{
  height: 6em;
  position: absolute;
}

img.right{
  float:right;
  right:20px;
}

.contactUsBox{
  position:absolute;
  right:10px;
  Text-align:right;
  color: #aaa;
  font-weight: bold;
}

.contactUsBox a{
font-weight: normal;
}

.contactUsBox img{
Height:1em;
Position:relative;
Bottom:-0.2em;
}
/* ----------------header end---------------- */
.navBar{
background:var(--blue);
}
.navOptions{
margin: auto;
  max-width:950px;
}
.navBar a{
color:white;
Padding:20px;
Display:inline-block;
 text-decoration: none;
Font-size:20px;
}
.navBar a:hover{
background:var(--grey);
color:var(--blue);
}
/* ----------------navBar end---------------- */

div.bannerContainer{
transform-style: preserve-3d;
  position: relative;
  height: 200px;
}

div.banner{
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  Position:absolute;
background-image: linear-gradient(90deg, rgba(90, 135, 169, 0.5), rgba(90, 135, 169, 0.00)), url("banner-resized.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
    height: 200px;
}


div.banner div.bannerText{
  color:white;
  Padding:70px 0 0 20px;
display:block;
  Font-size:30px;
    margin: auto;
    max-width: 950px;
}

.clipped {
  Position:absolute;
  width: 100%;
  Bottom:0px;
  height: 20px;
  box-sizing: border-box;
  background-color: white;
  clip-path: shape(
    from bottom right,
    hline to 0%,
    vline to 0%,
    Curve to 25% 50% with 12% 130%,
    Curve to 50% 50% with 37% -30%,
    Curve to 75% 50% with 62% 130%,
    Curve to 100% 50% with 87% -30%,
  );
}


/* ---------------- sections ---------------- */
div.blue{
  background-color: var(--blue);
  color: white;
}
div.grey{
  background-color: var(--grey);
  color: var(--drgrey);
}

a{
  color: var(--blue);
}
.blue a{
  color: white;
}
a{
  color: var(--orange);
}

div.section{
  padding: 30px 0px 30px 0px;
  width : 100%;
}
div.section div{
  max-width: 800px;
  margin:auto;
  padding: 10px 10px 10px 10px;
}
div.section h1{
  font-size: 40px;
  margin: 0px;
  text-align: center;
  color:var(--blue);
  
}


div.blue h1{
  color: white;
}
div.notice h1{
  color: var(--orange);
}

div.notice{
  background-color: var(--lightOrange);
Position:relative;
}


div.notice div{
  border-style: dashed;
  border-color: var(--orange);
  background-color: white;

}
div.notice::before{
  Content:"";
  Position:absolute;
  width: 100%;
  Top:-20px;
  Left:0px;
  height: 20px;
  box-sizing: border-box;
  background-color: var(--lightOrange);
  clip-path: shape(
    from bottom right,
    hline to 0%,
    vline to 0%,
    Curve to 25% 50% with 12% 130%,
    Curve to 50% 50% with 37% -30%,
    Curve to 75% 50% with 62% 130%,
    Curve to 100% 50% with 87% -30%,
  );
}
div.appicons img{
  width: 100px;
  height: 100px;
}
/* ----------------header end---------------- */

@media only screen and (max-width: 860px) {
  /* resize notice for smaller screens */
  div.notice {
    margin:0px 0px 0px 0px;
    padding: 30px 20px 30px 20px;
    width:auto;
  }
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container div {
  text-align:center;
}


div.flex-photo{
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("outside-resized.jpg");
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  flex:47%;
  border-radius: 20px;
 
}
div.eating{
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("eating-resized.jpg");
}
div.flex-text{
  flex:47%;
}

/* ----------------table---------------- */
table{
  margin: auto;
}
td{
  padding: 10px;
  text-align:left;
}
td.right{
  text-align:right;
}

/* ----------------carousel---------------- */
.carousel-view {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 44px 0px;
  transition: all 0.25s ease-in;
}

.carousel-view .item-list {
  max-width: 1000px;
  width: 70vw;
  padding: 15px 10px;
  display: flex;
  gap: 78px;
  scroll-behavior: smooth;
  transition: all 0.25s ease-in;
  overflow: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.item-list::-webkit-scrollbar {
  display: none;
}



button img.btn-img{
  width:40px;
  Height:40px;
}




/* Our Services' flex-list */

.flex-list div{
  text-align:center;
Font-size:20px;
  
}
ul{
column-count: 2;
Column-gap:30px;
}

li::marker {
  color: var(--blue);
}

/*personCards for our team*/
.personCard{
  Display:flex;
  flex-direction: row;
  Background-color:white;
  Border-radius:25px;
}
.photoHolder{
  Width:40%;
Padding:0;
}

.photoHolder img{
  Width:90%;
  Margin:auto;
  Border-radius:50px;
  box-shadow: 8px 5px 0px 0px var(--orange),-8px -5px 0px 0px var(--blue);
}

.person-text{
  Padding:0;
}

.person-text .name{
Font-size:25px;
  color: var(--blue);
  font-weight: bold;
}


@media screen and (max-width: 800px) {
  flex-text, flex-photo {
    flex: 100%;
flex-shrink: 0;
  }
}

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

.personCard{
flex-direction: column;
Background:none;
}
.person-text {
Background:white;
Border-radius:25px;
}

.person-text .name{
Text-align:center;
}

}


@media screen and (max-width: 500px) {
div.appicons img{
  width: 100px;
  height: 100px;
}
}

@media screen and (max-width: 440px) {
.navOptions a{
  Padding:20px 10px;
  Font-size:17px;
}
.homepageLogo, .homepageLogo img{
Height:4em;
}
div.header{
Height:4em;
Font-size:13px;
}

}