.fullscreen{height:100vh; position: relative; padding:110px 0 0 !important; background-color:#fff;z-index: 9;}

p, .font-oxygen{font-family: 'Oxygen', sans-serif;}
.font-playfair{font-family: 'Playfair Display', serif;}
.font-poppins{font-family: 'Poppins', sans-serif;}
body{ font-size:18px; line-height: 28px; background: #91B4BA;}

p{ font-size:18px !important; line-height:28px !important;font-family: 'Oxygen', sans-serif; margin-bottom: 30px; color:#121212;}
p:last-child{ margin-bottom:0;}

.height100{ height: 100%;}
.ps-4{ padding-left:4rem;}

.title-red{ color: #a01414 !important;}
.title-white{ color: #fff !important;}
.title-black{ color: #212121 !important;}

.heading-h2{ font-size:70px; line-height:70px; font-family: 'Oxygen', sans-serif; font-weight:700; margin-bottom:0px;}
.intro-title{font-size:22px; line-height:26px; font-weight:400; margin-bottom:50px;}
.section-title{ text-align: center;}

footer{ position: relative; z-index:100;}
footer .menu p{ font-size:12px !important;}

.section-outer{ position: relative;}
.section-outer:before{ content: ''; position: absolute; border-radius:50%; background: rgba(255, 255, 255, 0.90); filter: blur(377px); top:50%; left: 50%; transform: translate(-50%, -50%); height:120vh; width:150vh; z-index: 10;}

.section-outer .container{ position:relative; z-index:100;}

/**ANIMATION**/
.animation-element{opacity: 0;position: relative;}
.animation-element.slide-up {opacity: 0;-moz-transition: all 500ms;	-webkit-transition: all 500ms ;	-o-transition: all 500ms ;	transition: all 500ms ;	-moz-transform: translate3d(0,200px,0);	-webkit-transform: translate3d(0,200px,0);	-o-transform: translate3d(0,200px,0);	-ms-transform: translate3d(0,200px,0);	transform: translate3d(0,200px,0);  }
.animation-element.slide-up.in-view {opacity: 1;-moz-transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);	-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}

.animation-element.slide-right {opacity: 0;-moz-transition: all 500ms;	-webkit-transition: all 500ms ;	-o-transition: all 500ms ;	transition: all 500ms ;	-moz-transform: translate3d(200px,0,0);	-webkit-transform: translate3d(200px,0px,0);	-o-transform: translate3d(200px,0,0);	-ms-transform: translate3d(200px,0,0);	transform: translate3d(200px,0,0);  }
.animation-element.slide-right.in-view {opacity: 1;-moz-transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);	-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}

.animation-element.slide-left {opacity: 0;-moz-transition: all 500ms;	-webkit-transition: all 500ms ;	-o-transition: all 500ms ;	transition: all 500ms ;	-moz-transform: translate3d(-200px,0,0); -webkit-transform: translate3d(-200px,0px,0);-o-transform: translate3d(-200px,0,0);-ms-transform:  translate3d(-200px,0,0);transform:  translate3d(-200px,0,0);  }
.animation-element.slide-left.in-view {opacity: 1;-moz-transform: translate3d(0,0,0);-webkit-transform: translate3d(0,0,0);-o-transform: translate3d(0,0,0);	-ms-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}

.hero{ transition:top 0.6s;}
.hero.nav-up{ top:-100px}
.hero.nav-down{ top:0px}

h2{ font-size:5vh; line-height: 1; font-weight: 400; margin-bottom:40px;}
h3{ font-size:28px; line-height: 1; font-weight: 400; color: #121212;}

.common-btn{ background-color: #fff; color: #a01414; font-size: 16px; font-weight:600; line-height:20px;width:120px; text-align: center; display:inline-block; padding:10px;}
.common-padding-top{ padding:120px 0 0;}
.common-padding-bottom{ padding:0 0 120px 0;}
.common-padding{padding:120px 0;}
.common-padding-md{ padding:80px 0;}
.common-padding-md-bottom{ padding:0 0 80px 0;}
.common-padding-sm{ padding:60px 0;}
.common-padding-xs{ padding:30px 0;}
.common-padding-none{ padding:0;}
.text-center{ text-align: center;}
.position-relative{ position: relative;}

@media all and (min-width:1024px){
.container{ max-width:90%; width:1320px;}
p{ font-size:18px !important; line-height:26px !important;}
}

.d-flex{ display: flex !important;}
.align-items-center{ align-items: center !important;}




/**========================
WATER PAGE START
========================**/

/**water banner**/
#banner-image{ position: absolute; top:0; bottom:0; width: 100%; overflow: hidden;}
#banner-image img{  max-width: 100%; height: 100vh;    object-fit: cover;}

.banner-outer-section{ max-height:100vh; position: relative;}
.banner-caption{ position:absolute; top:50%;max-width:660px; transform: translateY(-50%);}

.banner-caption h1{ font-size:85px; line-height:1; color: #fff; font-family: 'Oxygen', sans-serif; font-weight:700;}
.banner-caption p{ margin-bottom: 20px;}

#water-resilience{ margin-bottom:-60px;}
.swan-position{ margin-top:-5vw;}

/****/
#water-usage{ position: relative; padding: 60px 0 165px;}
.wave-box1{ position: ABSOLUTE; width: 100%; top:-40%; height: inherit; bottom: -24px; background-size: 100% 51.8vw  !important;}
.wave-box img{ width: 100%;}

.circle-list{ display: flex; flex-wrap: wrap; align-items:start;}
.circle-list figure{ text-align: center;}
.circle-list .img-box{ margin:0 auto 20px; max-height:300px;}
.circle-list .img-box img{ margin: 0 auto;}

/** water-related-risks**/
.water-related-risks-list figure{ border-radius: 10px 10px 20px 20px;}
.water-related-risks-list figure .img-box img{ width: 100%; }
.water-related-risks-list figure figcaption{border-radius: 20px; height: 82px; background: linear-gradient(180deg, rgba(169, 217, 255, 0.00) 0%, #A9D9FF 100%); padding:15px 25px; text-align: center;}
.water-related-risks-list figure figcaption p{ margin-bottom:0; font-weight: 700; font-size:16px !important;}
.water-related-risks-list{ margin-top: 75px; display: flex; flex-wrap: wrap;}
.water-related-risks-list li{ height: 100%;}

.water-related-risks-img1{ position: absolute; left: 0; top:50%; transform: translateY(-50%);}
.water-related-risks-img2{ position: absolute; right: 0; top:50%;  transform: translateY(-50%);}

.water-type-list li .img-box{ margin-bottom:25px;}
.water-type-list li h4{ font-size:22px; font-weight: 700;}
.water-type-list li p{ margin-bottom: 0;}

/**progress-made**/
#progress-made{ position: relative;}
.wave-box2{ position: ABSOLUTE; width: 100%; top:-45%; height: inherit; bottom:-10vw; background-size: 100% 70vw !important; background-repeat: no-repeat;}
.wave-box img{ width: 100%;}

.infogrphic-list li{ margin-bottom: 30px;}
.infogrphic-list li .img-box{ margin-bottom:25px;}
.infogrphic-list li h6{ font-size:19px; font-weight: 700;}
.infogrphic-list li p{ font-size:19px; margin-bottom: 0;}

.p-0{ padding: 0 !important }
.number-infographics{ 
    width: 490px;
    margin: 0 auto 30px;
    display: flex;
    flex-wrap: nowrap;
    position: relative; min-height: 145px;
}
.bubble-img{ position: absolute; right: 0; z-index: -1; top: calc(50% - 15px); transform: translate(-50%, -50%); left: calc(50%);}
.number{ font-size:88px; font-weight:700; line-height:88px; display: block;}
.left-icon{ margin-right:10px; position:relative; z-index: 9}
.right-text{ text-align: center; max-width: 230px;}


.delay-1{ transition-delay: 0.1s !important;}
.delay-2{ transition-delay: 0.2s !important;}
.delay-3{ transition-delay: 0.3s !important;}

.viewport-animate-element.in-view{}

#infogrphic-section1 .row{ margin: 0 -40px;}
#infogrphic-section1 .row .col-md-6{ padding: 0 40px;}


/* #banner-image video{ height:auto; width:  100% } */
#banner-image video {
    height: auto;
    width: 100%;
}


.water-related-risks-outer4 .row{ flex-direction: row-reverse;}

.infogrphic-section1 .row {
    flex-direction: row-reverse;
    flex-wrap: wrap;
    display: flex;
}