@font-face {
    font-family: 'FontAwsome6Free';
    src: url(../Assets/fontawesome-free-6.6.0-web/webfonts/fa-solid-900.woff2);
}

@font-face {
    font-family: 'YanoneKaff';
    src: url(../fonts/Yanone_Kaffeesatz/YanoneKaffeesatz-Variable.woff2);
    font-weight: 200 700;
    font-display: swap;
}

/* @link https://utopia.fyi/type/calculator?c=320,280,1.2,992,485,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--2: clamp(12.1528rem, 8.7017rem + 17.2553vw, 19.4rem);
    --step--1: clamp(14.5833rem, 9.9802rem + 23.0159vw, 24.25rem);
    --step-0: clamp(17.5rem, 11.3988rem + 30.506vw, 30.3125rem);
    --step-1: clamp(21rem, 12.9568rem + 40.2158vw, 37.8906rem);
    --step-2: clamp(25.2rem, 14.6461rem + 52.7697vw, 47.3633rem);
    --step-3: clamp(30.24rem, 16.4476rem + 68.9621vw, 59.2041rem);
    --step-4: clamp(36.288rem, 18.3275rem + 89.8027vw, 74.0051rem);
    --step-5: clamp(43.5456rem, 20.2309rem + 116.5734vw, 92.5064rem);
}

:root {

    /* Screen Size Break Declarations for Media Query */
    --scr-width-1: 1910px;
    --scr-width-2: 1080px;
    --scr-width-3: 840px;
    --scr-width-4: 426px;


    /*Color Declarations  */
    --clr-white: #ffffff;
    --clr-white-2: #f9f9f9;
    --clr-black-1: #101010;
    --clr-black-2: #212121;
    --clr-grey70: #777777;
    --clr-med-grey: #D8D6D6;
    --clr-light-grey: #e4e4e4;
    --clr-mnbackground: rgb(250, 247, 247);
    --clr-blue1: #2294e3;
    --clr-wasablue: #0099ab;
    --clr-lightblue: #DAF8FC;
    --clr-lightblue-transp: #daf8fcbf;
    --clr-gold: #daa520;
    --clr-title-head: darkred;
    --clr-lgtransp: rgba(236 236 236 0.5);

    --clr-white90: rgba(255, 255, 255, 0.9);

    --clr-main-text: var(--clr-black-2);

    --selective: #F6ECA9;
    --open: #C3E2C2;
    --openMajor: #1B4242;
    --soleSelect: #A367B1;

    /************ Shadows *****************/
    --shadow1: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    --shadow-cardholder: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

    /*Font Declarations  */
    --ff-primary: "Poppins", sans-serif;

    /* Font Sizes */
    --ff-card-title: clamp(1.75rem, 1.663rem + 0.4348vw, 2rem);
    --ff-card-info: clamp(0.75rem, 0.5326rem + 1.087vw, 1.375rem);
    --ff-section-title: clamp(2.25rem, 1.6413rem + 3.0435vw, 4rem);
    --ff-section-header: clamp(1rem, 0.6522rem + 1.7391vw, 2rem);
    --ff-prog-title: clamp(6rem, 5.3043rem + 3.4783vw, 8rem);

    --ff-mobile-bodytxt: .95rem;
    --ff-mobile-tabletxt: clamp(0.8125rem, 1.094rem + -0.5486vw, 0.95rem);
    --ff-accordion-table: clamp(0.75rem, 0.5326rem + 1.087vw, 1rem);

    --ff-personnel-name: clamp(1.125rem, 0.9076rem + 1.087vw, 1.75rem);
    --ff-history-header: clamp(1.25rem, 0.9891rem + 1.3043vw, 2rem);
    --ff-herotxt: clamp(2rem, 0.2609rem + 8.6957vw, 7rem);
    --ff-photo-gallery-title: clamp(0.825rem, 0.7513rem + 0.3684vw, 1rem);

    /* Navigation Bar Dimensions */
    --size-1: 10px;
    --size-2: 20px;
    --nav-height: 50px;
    --footer-height: 50px;
    --used-height: calc(var(--nav-height) + var(--footer-height));
    --min-content-height: calc(100svh - var(--used-height));

    /* Genberal Declarations */
    --radius-2: 15px;
    --radius-2-top: 15px 15px 0px 0px;
    --radius-2-botRightSquare: 15px 15px 0px 15px;
    --radius-card: 20px;

    --table-pad: 5px 10px;
    --fluid-hero-height: clamp(20svh, 30svh, 50svh);
    --fluid-1-5-3: clamp(1.5rem, 1.667vw + 1rem, 3rem);
    --fluid-16-28: clamp(16.25rem, 13.194vw + 12.292rem, 28.125rem);

    --fluid-vacancy1: clamp(15rem, 13.2609rem + 8.6957vw, 20rem);

    --fluid-contactForm-width: clamp(17.5rem, 11.3988rem + 30.506vw, 30.3125rem);
    --fluid-padding-1: clamp(0.5rem, 0.2619rem + 1.1905vw, 1rem);

    --fluid-small-mobile: clamp(0.625rem, -0.091rem + 2.3866vw, 1.25rem);
    /* 1.25rem - .625rem  from widow size 899px - 480px */
    --fluid3-1-mobile: clamp(1rem, -1.2912rem + 7.6372vw, 3rem);
    /* 3rem - 1rem from widow size 899px - 480 px*/


    /*********** Background Images ***********/
    --bwCard-background: url("../Images/CarouselImgs/blackandwhitefillerimage.jpeg");
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overscroll-behavior: contain;
}

.topMargin__20 {
    margin-top: 20px;
}

.topMargin__3 {
    margin-top: 3rem;
}


/************************* SCROLL BAR ***************************************/
/* width */
*::-webkit-scrollbar {
    width: 5px;
}

/* Track */
*::-webkit-scrollbar-track {
    background: transparent;
}

/* Handle */
html::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
html::-webkit-scrollbar-thumb:hover {
    background: #555;
}


html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--scroll-top-pad, 91px);

}

body {
    isolation: isolate;
    color: var(--clr-main-text);
    font-family: var(--ff-primary);
    font-weight: 400;
    font-size: var(--ff-card-info);
    line-height: 1.6;
    overflow-x: clip;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: var(--scroll-top-pad);
    background-color: var(--clr-mnbackground);
}

/********************** NAVBAR ****************************/

/*********************** NAVBAR END ***********************/


/* UTILITY STYLES*/
.fixed__top {
    position: fixed;
    top: 0;
}

/* Image reset */
img{
    display: block;
    /* max-inline-size: 100%; */
}

.front {
    z-index: 100;
}

.no__scroll {
    overflow: hidden;
}

.bold {
    font-weight: bold;
}

.lrPadding1-5 {
    padding: 0 1.5rem;
}

/* backdrop Filter */
.bkgd-filter-blur5 {
    backdrop-filter: blur(5px);
}

/* Disable Cickable Elements*/
.disableclick {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    color: var(--clr-lightblue);
}

.noselect {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nodrag {
    -webkit-user-drag: none;
}

.columns__2{
    columns: 2;
    column-gap: 1rem;
    column-rule-style: 1px dashed var(--clr-med-grey);
}

/* General Style for Hero Images used in the site */
.hero-image {
    height: var(--fluid-hero-height);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

#heroheading {
    font-family: 'YanoneKaff', sans-serif;
    font-size: var(--ff-herotxt);
    color: var(--clr-white-2);
    text-align: center;
    text-shadow: 0 0 5px var(--clr-black-1);
}

.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 16px;
}
.radius-30{
    border-radius: 30px;
}
.bkgd-single-center {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.bkgd1 {
    background-image: url(../Images/Parallax/backdrop1.jpeg);

}

.bkgd2 {
    background-image: url(../Images/Parallax/backdrop2.jpeg);
}

.bkgd3 {
    background-image: url(../Images/Parallax/backdrop3.jpeg);
}

.bkgd-board {
    background-image: url(../Images/Parallax/boardroom.jpeg);
}

.bg1 {
    background-image: url(../Images/Parallax/backdrop1.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.imageholder {
    width: 230px;
    height: 350px;
}

.imageholder2 {
    width: 200px;
    height: 250px;
}

.bg2 {
    background: url("../Images/Parallax/WasaOrgChart.jpg");
    background-size: cover;
}

.bg3 {
    background-image: url("../Images/Parallax/waterbackground.jpg");
    overflow: hidden;
}

.bg4 {
    background-size: cover;
    background-image: linear-gradient(159deg, rgba(0, 71, 171, 0.7) 0%, rgba(28, 169, 201, 1) 100%), url("../Images/Parallax/hollisBkgd1.jpg");
    background-blend-mode: overlay;
    background-attachment: fixed;
    overflow: clip;
}

.bg5 {
    background-image: url("../Images/LatestUpdate/projects-HR.jpeg");
    background-size: cover;
    background-attachment: fixed;
    overflow: clip;

}

.bg6 {
    background-image: url("../Images/Procurement/procurementimage.jpg");
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden
}

.bg7 {
    background-image: url("../Images/tapbkgd-dark.jpg");
    background-size: cover;
    background-attachment: fixed;
    overflow: hidden
}

.bg8 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Images/Procurement/procurementHero1.jpg");
}

.bgWhite {
    background-color: var(--clr-white-2);
}

.push {
    padding: 20px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 464px);
}

.push2 {
    padding: 20px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 464px);
}

.push__serv {
    margin-top: 0px;
    padding: 0px var(--fluid-small-mobile) 20px var(--fluid-small-mobile);
}

.overlay__darken {
    border-image: linear-gradient(0deg, transparent 0%, #0099ab 100%) fill 1;
}

.bkgdPosition__topLeft{
    background-position: top left;
}

.body-spacer {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.gen-pad-3,
.serv__pad {
    padding: 3rem;
}

.gen-pad-2 {
    padding: 2rem;
}

.gen__pad__1 {
    padding: 1rem;
}

.gen-pad-3-2 {
    padding: 3rem 2rem;
}

.gen-pad-LR-2 {
    padding: 0rem 2rem;
}

.gen-pad-LR-3 {
    padding: 0rem 3rem;
}

.gen-pad-LR-responsive {
    padding: 0rem 3rem;
}

.top-pad-1 {
    padding-top: 1rem;
}

.top-pad-2 {
    padding-top: 2rem;
}
.top-pad-3 {
    padding-top: 3rem;
}

.bot-pad-1 {
    padding-bottom: 1rem;
}

.bot-pad-2 {
    padding-bottom: 2rem;
}

.bot-pad-3 {
    padding-bottom: 3rem;
}

.fluidPad-Horiz-3-1{
padding-right: var(--fluid3-1-mobile);
padding-left: var(--fluid3-1-mobile);
}

.cardBkgd-BW {
    background-image: var(--bwCard-background);
}

.pad1-25rem {
    padding: 1.25rem;
}

.margin__ft {
    margin-top: 3rem;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 3rem;
}

.margin__tb3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.margBott1-5rem {
    margin-bottom: 1.5rem;
}

.margBott2-5rem {
    margin-bottom: 2.5rem;
}

.white {
    background-color: var(--clr-white-2);
}

.light-blue {
    background-color: var(--clr-lightblue);
}

/* .list__centered{
    position: relative;
    transform: translateY(-50%);
} */

.responsive {
    inline-size: 100%;
    /* aspect-ratio: 16 / 9; */
    object-fit: cover;
    object-position: center;
}

.water-sticky {
    background-image: url("../Images/Homepage/waterbackground.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.section__title {
    padding: 2rem 1rem;
    font-size: var(--ff-section-title);
    text-align: center;
    color: var(--clr-white-2);
    text-shadow: 0 0 5px black;
}

.generic-grid {
    display: grid;
}

.generic-grid2 {
    display: grid;
    position: relative;
    margin: 0 auto;
}

.centered {
    justify-content: center;
    align-items: center;
}

.grid-gap-1 {
    gap: 1rem;
}

.grid-gap-2 {
    gap: 2rem;
}

.grid-gap-3 {
    gap: 3rem;
}

.centered-content {
    justify-content: center;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 2fr));
    grid-auto-flow: dense;
}

.cardholder {
    margin-top: 50px;
    position: relative;
    width: 100%;
    background-color: white;
    background-position: center;
    background-size: cover;
    border-radius: 40px;
    box-shadow: var(--shadow1);
}

.cardholder h1 {
    display: block;
    padding-top: 1rem;
    text-align: center;
    color: var(--clr-title-head);
}

.font__mobile {
    font-size: var(--ff-mobile-bodytxt);
}

.font__mobile__table {
    font-size: var(--ff-mobile-tabletxt);
}

.tableInstrctions {
    width: 100%;
    padding: .5rem;
    text-align: center;
    background-color: var(--clr-med-grey);
}

.width__max__content {
    width: max-content;
}

.width__full {
    width: 100%;
}

.wasa__select {
    padding-right: 4rem;
}

.select__container {
    position: relative;
    height: 100%;
    border-radius: .375rem;
    overflow: clip;
}

.select__arrow {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    background-color: #ced4da;
    height: 100%;
    width: 2.25rem;
    pointer-events: none;
}

.select__arrow::before,
.select__arrow::after {
    --arrow-size: 0.325em;
    content: '';
    position: absolute;
    width: 0;
    height: 0;

    left: 50%;
    transform: translate(-50%, -50%);
}

.select__arrow::before {
    border-left: var(--arrow-size) solid transparent;
    border-right: var(--arrow-size) solid transparent;
    border-bottom: var(--arrow-size) solid black;
    top: 35%;
}

.select__arrow::after {
    border-left: var(--arrow-size) solid transparent;
    border-right: var(--arrow-size) solid transparent;
    border-top: var(--arrow-size) solid black;
    top: 65%;
}

.page-wrap {
    width: 80%;
    margin: 0 auto;
}

.proheading {
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    color: var(--clr-wasablue);
}

.probody {
    font-size: var(--ff-card-info);
    font-weight: 400;
    text-align: center;
    line-height: 34px;
    color: black;
}

.page-wrap ul li {
    font-size: 18px;
}


/*--================CAROUSEL CONTAINTER   ====================== */
.carousel {
    padding-bottom: 20px;
    padding-top: 2px;
}

.carousel-item {
    height: 40rem;
    background: white;
    position: relative;
    color: var(--clr-black-2);
}

.carousel-inner {
    position: relative;
    border-radius: 40px;
    box-shadow: var(--shadow1);
}


.carousel-item>.container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 45rem;
    margin-left: 20%;
    padding-bottom: 50px;
}

.carousel-item div.container>p {
    font-size: 1rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.CarouselImgs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    object-fit: fill;
    background-position: bottom left;
    background-size: cover;
    background-repeat: no-repeat;

}

.centered__wrapper{
    display: flex;
    justify-content: center;
  }

  .centered__column{
    flex-direction: column;
    margin: auto;
  }
  .flex__column{
    flex-direction: column;
  }
  
  .full__box{
    height: 100%;
    width: 100%;
  }
  .place__bottom{
    margin-top: auto;
    margin-bottom: 30px;
  }

.ad__infoSize{
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    margin-right: auto;
    padding: var(--fluid-padding-1);
    /* width: 35rem; */
    transform: translateY(25%);
    border-radius: var(--radius-2);
    overflow: clip;
    background-color: rgba(255,255,255,0.5);
  }


.Img__responsive{
    object-fit: cover;
}

#pic1 {
    background-image: url(../Images/CarouselImgs/WASA-Conservation-2025-website-.jpg);
}

#pic2 {
    background-image: url(../Images/CarouselImgs/WASA-CSISBkgd-HD.jpg);
}

#pic3 {
    background-image: url(../Images/CarouselImgs/WASA-Ebill-Banner-HD.jpg);
}

#picdefault {
    background-image: url(../Images/CarouselImgs/fillerimage.jpg);
}

/*--================ CAROUSEL CONTAINTER END  ====================== */


/*--================ Horizontal Media Scroller ====================== */
.wrapper {
    display: flex;
    grid-gap: 1rem;
    max-width: 768px;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x;
    cursor: grab;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* for firefox */
}


.slide-container {
    --_spacer: var(--size-2);
    display: grid;
    gap: var(--_spacer);
    grid-auto-flow: column;
    grid-auto-columns: 29%;
    padding: 2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    scroll-snap-type: x;
    cursor: grab;
    scroll-behavior: smooth;
}

/* .slide-container:hover{
    overflow-x: auto;
  } */

.slide-container .slide-content {
    display: grid;
    grid-template-rows: min-content;
    gap: var(--_spacer);
    overflow: clip;
    background-color: var(--clr-white-2);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow1);
    transition: scale 0.3s ease-in-out;
}

.slide-container>.slide-content:hover {
    z-index: 10;
    background-color: var(--clr-wasablue);
    /*     scale: 1.1;
 */
}

.slide-container>.slide-content:hover>.card-image {
    background-color: var(--clr-white-2);
}

.slide-container>.slide-content:hover>.card-image::before {
    background-color: var(--clr-white-2);
}

.slide-container>.slide-content:hover>.card-image::after {
    background-color: var(--clr-wasablue);
}

.slide-container>.slide-content:hover>.card-image>img {
    border: solid 2px var(--clr-wasablue);
}

.slide-container>.slide-content:hover .card-title {
    color: var(--clr-white-2);
}

.card-image {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: var(--radius-2-botRightSquare);
    background: var(--clr-wasablue);
    padding: 8px;
}

.card-image::before,
.card-image::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -40px;
    width: 40px;
    height: 40px;
    background-color: var(--clr-wasablue);
}

.card-image::after {
    border-radius: 0 25px 0 0;
    background-color: var(--clr-white-2);
}

.card-image>img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: solid 2px var(--clr-white-2);
    border-radius: var(--radius-2-botRightSquare);
}

.card-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 14px;
    text-align: center;
    z-index: 2;
}

/* .card-content > h5{
    position: relative;
    transform: translateY(-50%);
} */

.card-title {
    font-size: 1rem;
}

.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: var(--_spacer, 1rem);
}

.snaps-inline>* {
    scroll-snap-align: start;
}


/*--================VIDEO CONTAINTER   ====================== */
#video1 {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 40px;
}

#video2 {
    margin: 0 auto;
    display: block;
    width: 800px;
    height: auto;

}

/*--================ END VIDEO CONTAINTER   ====================== */

/*--================ BILL PAY ADVERTISEMENT - PAYMENT OPTIONS  ====================== */
.grid4 {
    --_spacer: var(--size-2);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 4fr));
    gap: var(--_spacer);
    width: 100%;
    margin: 2rem 0 2rem 0;
    /* grid-auto-flow: column; */
    /* grid-auto-columns: 23.5%; */

}

.paycard {
    border-radius: 15px;
    box-shadow: var(--shadow1);
}

.paycard a {
    color: var(--clr-main-text);
    text-decoration: none;
}

.paycard img {
    border-radius: var(--radius-2-top);
}

.card-body {
    padding: 1rem;
    text-align: center;
    height: auto;
}

.card-body .card-title {
    display: block;
    padding-bottom: 1rem;
}

.card-body .card-text {
    font-size: var(--ff-card-info);
    /* font-size: .8rem; */
}

.paycard:hover {
    cursor: pointer;

    & .card-body {
        color: var(--clr-white);
        background-color: var(--clr-wasablue);
        border-radius: 2rem;
        scale: 1.1;
    }

    & .card-text {
        color: var(--clr-white-2);
    }
}

.payLogo-container {
    display: grid;
    justify-items: center;
    align-content: center;
    text-align: center;
}

.payLogo-container>img {
    width: auto;
    height: 100px;
}

img.paylogo-landscape {
    width: 190px;
    height: auto;
}

.payLogo-container:has(img.paylogo-landscape) {
    grid-column: span 2;
}

.payCaption {
    display: inline-block;
    padding: .5rem;
    font-size: .95rem;
    text-align: center;
}


/* PHOTO GALLERY */

.imageGrid {
    --gal-gap: 1rem;
    --gal-num-cols: 3;
    --gal-row-height: 300px;

    box-sizing: border-box;
    padding: var(--gal-gap);

    display: grid;
    grid-template-columns: repeat(var(--gal-num-cols), 1fr);
    grid-auto-rows: var(--gal-row-height);
    grid-auto-flow: dense;
    gap: var(--gal-gap);

    /* background-color: #0000005b; 
    border-radius: 10px;*/
}

.galImg-card {
    position: relative;
    isolation: isolate;
    border-radius: 10px;
    overflow: clip;
    transition: transform 300ms ease;
}



.imageGrid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    overflow: clip;
}

.gal-img-content {
    position: absolute;
    bottom: 0;
    z-index: 2;
    --padding: 1rem;
    width: 100%;
    height: fit-content;
    padding: var(--padding);
    color: var(--clr-white-2);
    background-color: #0000007b;
}

.galTitle {
    position: relative;
    width: max-content;
    font-size: var( --ff-photo-gallery-title);
    font-weight: 700;

}

.galTitle::after {
    content: " ";
    position: absolute;
    height: 3px;
    left: calc(var(--padding) * -1);
    bottom: -1px;
    width: 100%;
    background-color: var(--clr-lightblue);
    transform-origin: left;
    transition: transform 500ms ease;
}


.galCaption {
    display: inline-block;
    margin: 1rem 0rem;
    font-size: 0.8rem;
}

.galImg-card:focus-within .gal-img-content {
    transition-duration: 0ms;
}

@media (hover) {

    .gal-img-content {
        transform: translateY(60%);
        transition: transform 300ms ease;
    }

    .galTitle::after {
        transform: scaleX(0);
    }

    .galImg-card:hover,
    .galImg-card:focus-within {
        box-shadow: var(--shadow1);
        transform: scale(1.04);
    }

    .galImg-card:hover .gal-img-content,
    .galImg-card:focus-within .gal-img-content {
        z-index: 100;
        transform: translateY(0%);

    }

    .galImg-card:focus-within .gal-img-content {
        transition-duration: 0ms;
    }

    .gal-img-content>*:not(.galTitle) {
        opacity: 0;
        transition: opacity 400ms linear;
    }

    .galImg-card:hover .gal-img-content>*:not(.galTitle),
    .galImg-card:focus-within .gal-img-content>*:not(.galTitle) {
        opacity: 1;
        transition-delay: 400ms;
    }

    .galImg-card:hover .galTitle::after,
    .galImg-card:focus-within .galTitle::after {
        transform: scaleX(1);
        transition-delay: 500ms;
    }

}

.imageGrid-col-2 {
    grid-column: span 2;
}

.imageGrid-row-2 {
    grid-row: span 2;
}

.grid-col-start-2 {
    grid-column-start: 2;
}

/* WASA APP ADVERTISEMENT ON HOME PAGE */
.adWrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    align-content: center;
    justify-items: center;
    row-gap: 2rem;
    padding: 2rem;
}

.adWrapper .imageWrapper {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.adWrapper .imageWrapper img {
    max-width: 400px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.adWrapper .appInfoWrapper {
    display: grid;
    align-content: center;
    justify-items: center;
    width: 100%;
}


.adWrapper .appInfoWrapper h2 {
    padding-bottom: 1.5rem;
    font-size: clamp(1.5rem, 7vw, 3.5rem);
    text-align: center;
}

.adWrapper .appInfoWrapper .mnAppInfo>p {
    display: block;
    margin: auto;
    padding: 0rem 2rem;
    font-size: clamp(.95rem, 3vw, 1.5rem);
    text-align: justify;
}

.adWrapper .appInfoWrapper .storeIcons {
    display: grid;
    grid-template-columns: auto;
    justify-items: center;
    align-content: center;
    text-align: center;
}

.adWrapper .appInfoWrapper .storeIcons img {
    width: 100%;
    height: auto;
}


.adWrapper .appInfoWrapper .storeIcons a:hover {
    cursor: pointer;
    text-decoration: none;
}


.adWrapper .appInfoWrapper .storeIcons a:hover img {
    filter: drop-shadow(0 0px 5px rgba(0, 0, 0, 1));
}



/*** PERSONNEL CARD STYLES ***/
.comseperator {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    width: 100%;
    background-color: var(--clr-lgtransp);
    border-radius: 10px;
    box-shadow: var(--shadow1);
}

.personnel__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.leadBorder,
.viceleadBorder,
.personBorder {
    position: relative;
}

.leadBorder::before,
.viceleadBorder::before,
.personBorder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;

}

.leadBorder::before {
    background-color: var(--clr-grey70);
}

.viceleadBorder::before {
    background-color: var(--clr-wasablue);
}

.personBorder::before {
    background-color: var(--clr-gold);
}

.clr__grey {
    color: var(--clr-grey70);
}

.clr__wasablue {
    color: var(--clr-wasablue);
}

.clr__gold {
    color: var(--clr-gold);
}

.personnelCard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    padding: 1rem;
    width: 310px;
    overflow: clip;
    background-color: var(--clr-white-2);
    border: solid 1px;
    border-radius: var(--radius-2);
    border-color: var(--clr-grey70);
}

.perspic__container {
    text-align: center;
    margin-top: 1rem;
}

.personPic>i {
    padding-top: 0.5rem;
    font-size: 4rem;
    border: solid 1px;
    border-radius: 10px;
}

.viceleadBorder .personPic>i {
    padding-top: 0.5rem;
    font-size: 4rem;
    border: solid 1px;
    border-radius: 10px;
}

.personBorder .personPic>i {
    padding-top: 0.5rem;
    font-size: 4rem;
    border: solid 1px;
    border-radius: 10px;
}

.personName {
    font-weight: normal;
    font-size: var(--ff-personnel-name);
}

.personTitle {
    font-size: var(--ff-mobile-bodytxt);
}

.facts-bkgd {
  width: 100%;
  margin-bottom: 2rem;
  padding: 1rem 2rem;
  color: black;
}
@media screen and (width <=460px){
    .personnelCard {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    padding: 1rem;
    width: 250px;
    overflow: clip;
    background-color: var(--clr-white-2);
    border: solid 1px;
    border-radius: var(--radius-2);
    border-color: var(--clr-grey70);
}

  .facts-bkgd {
    margin-bottom: 0rem;
    padding: 1rem .25rem;
  }
}

/*** SERVICES PAGE STYLING ***/

.service-container {
    width: 100%;
    margin: 1rem 0rem 4rem 0rem;
    padding-bottom: 3rem;
    font-size: 1rem;
    background-color: rgba(240, 248, 255, 0.89);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0px 2px 8px 0px #888;
}

.service-container h4 {
    width: 100%;
    margin-bottom: 2rem;
    padding: 2rem 3rem;
    color: aliceblue;
    background-color: var(--clr-wasablue);
}

.service-info,
.aForm-info {
    margin: 0;
    padding: 0 var(--fluid3-1-mobile);
}

.add-requirement {
    width: 100%;
    margin-bottom: 1rem;
    border: 1px solid var(--clr-wasablue);
    border-radius: 10px 10px 0px 0px;
    overflow: hidden;
}

.add-requirement .req-header {
    width: 100%;
    margin: 0px;
    padding: 1rem;
    color: aliceblue;
    font-size: 1rem;
    background-color: var(--clr-wasablue);
}

.add-requirement p {
    padding: 1rem;
    margin: 0;
}


.service-exp {
    width: 100%;
    margin-top: var(--fluid-1-5-3);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--clr-wasablue);
    background-color: #009aab1f;

}

.service-exp1 {
    width: 100%;
    margin-top: var(--fluid-1-5-3);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--clr-wasablue);
    background-color: #009aab1f;

}

.service-container ul,
.add-requirement ul {
    list-style-type: disc;
}

.servList__pad {
    padding-left: clamp(1rem, -0.1456rem + 3.8186vw, 2rem);
}

.service-container li,
.add-requirement li {
    margin: 0;
    width: 100%;
    padding: 0rem 1.2rem 1.2rem 1.2rem;
}

.bold li span {
    display: inline-block;
    margin: 0;
    padding-left: 2rem;
    font-weight: normal;
}

section#sanitary-constructor {
    counter-reset: service-maincat;
}

p.service-maincat {
    position: relative;
    z-index: 2;
    margin-left: 25px;
    padding-left: 1.5rem;
    display: list-item;
    list-style-type: upper-alpha;
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--clr-wasablue);
    counter-increment: service-maincat;
}

p.service-maincat::marker {
    z-index: 3;
    color: aliceblue;

}

p.service-maincat::before {
    z-index: -1;
    position: absolute;
    left: -45px;

    content: '';
    width: 40px;
    height: 100%;
    background-color: var(--clr-wasablue);
    border-radius: 3rem;
}

p.service-maincat::after {
    z-index: 1;
    position: absolute;
    bottom: 0rem;
    left: 5%;

    content: '';
    margin-left: 20px;
    width: 60%;
    height: 5%;

    background-color: var(--clr-wasablue);
}

p.service-maincat-0,
.corp-info h3 {
    position: relative;
    z-index: 2;
    padding-left: 1.5rem;
    display: list-item;
    list-style-type: none;
    font-weight: normal;
    font-size: var(--ff-section-header);
    color: var(--clr-wasablue);
}


p.service-maincat-0::before,
.corp-info h3::before {
    display: block;
    position: absolute;
    font-family: 'FontAwsome6Free';
    content: '\f0da';
    top: 0;
    left: 0;
    color: var(--clr-wasablue);
}

.box-head {
    margin: 0;
    background-color: #faefe4a2;
    padding: 2rem 3rem;
}

.bullet-lvl1 {
    list-style-type: decimal;
}

.bullet-lvl1>li::marker {
    font-family: FontAwsome6Free;
    font-size: 175%;
    font-weight: 900;
    content: '\f058';
    color: var(--clr-wasablue);
}

.bulletlvl2-numbered1 {
    counter-increment: li;
}

ul.bulletlvl2-numbered1 li::marker {
    content: '' counter(li);
}

.wasa__price__table {
    border-radius: 10px;
    overflow: clip;
}

.wasa__price__table tr {
    background-color: var(--clr-white);
    border-top: solid 1px var(--clr-med-grey);
}

.wasa__price__table tr:first-of-type {
    border-top: none;
}

.wasa__price__table tr td {
    padding: 1rem;
}

table [data-cost] {
    padding-left: 1.5rem;
}


/* STYLING APPLICATION FORMS PAGE*/

.aForm-info>li {
    display: flex;
    align-content: center;
    margin: 0.5rem 0 0 0;
    padding: 0rem;
    list-style: none;
    color: var(--clr-wasablue);
    border: solid 1px var(--clr-wasablue);
    border-radius: 10px;
}

.aForm-info>li a {
    width: 100%;
    text-decoration: none;
    padding: 1rem 0rem 1rem 1rem;
}

.aForm-info>li a:link,
.aForm-info>li a:visited {
    color: var(--clr-wasablue);
}

.aForm-info>li i {
    margin: 0.4rem;
    padding: 0;
}

.aForm-info>li:hover {
    border: none;
    color: var(--clr-white);
    background-color: var(--clr-wasablue);
    cursor: pointer;
    transform: scale(1.05);
}

.aForm-info>li a:hover {
    color: var(--clr-white-2);
}

/* PROCUREMENT STYLES */
.flex {
    display: flex;
}

.flex__center {
    justify-content: center;
}

.flex__even {
    justify-content: space-evenly;
}

.flex__wraped {
    flex-wrap: wrap;
    gap: 2rem;
}

.centered__container {
    max-width: 70%;
    min-width: 250px;
}

.procurement__listStyle {
    list-style: none;
}

.procurement__listStyle li::marker {
    font-family: FontAwsome6Free;
    font-size: 90%;
    font-weight: 900;
    content: '\f058';
}

.marginTop__fluid1-3 {
    margin-top: var(--fluid-1-5-3);
}

.process__card {
    width: var(--fluid-16-28);
    border-radius: 10px;
    background-color: var(--clr-white-2);
    overflow: clip;

}

.processCard__head {
    height: 180px;
    background-color: var(--clr-blue1);
}

.processCard__head p {
    padding: 1rem;
    font-size: var(--ff-card-info);
    font-weight: bold;
    color: var(--clr-lightblue);
    text-align: center;
    margin: 0px;

}


.processCard__head p.pp__stage {
    padding-bottom: 0rem;
    font-size: var(--fluid-1-5-3);
}

.procurement__body {
    font-size: var(--ff-card-info);
    font-weight: 400;
    text-align: left;
    line-height: 34px;
    color: black;
}

.process__card ul {
    margin-top: 1.5rem;
}

@media screen and (max-width: 480px){
.process__card {
  width: 100%;
  border-radius: 10px;
  background-color: var(--clr-white-2);
  overflow: clip;
}
}


/*** OPR PAGE STYLE  ****/
.font__size__1 {
    font-size: var(--ff-mobile-bodytxt);
}

table {
    border-collapse: collapse;
}

#prevaluetable table {
    border-radius: 10px;
    overflow: clip;
}

#prevaluetable th {

    padding: var(--table-pad);
    text-align: left;
    background-color: var(--clr-wasablue);
    color: var(--clr-white-2);
    font-weight: 400;
    border: 1px solid var(--clr-med-grey);

}

#prevaluetable table td {
    border: 1px solid var(--clr-med-grey);
    padding: var(--table-pad);
}

.records__found {
    padding: .5rem;
    width: fit-content;
    border: solid 1px var(--clr-light-grey);
    border-radius: 5px;
    overflow: clip;
}

/* ACCORDION STYLE */
.accordion-wrapper {
    width: 100%;
    padding: 40px 20px;
}

.accordion-item {
    border-radius: 10px;
    margin-bottom: 1.3rem;
    background-color: var(--white);
    border: solid 1px var(--clr-bluehover);
    overflow: hidden;
}

.accordion-title {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: .3rem 1.3rem;
    background-color: var(--clr-lightblue);
}

.accord-titleText {
    font-size: 1rem;
    font-weight: 550;
}

.accordion-title::after {
    content: "+";
    font-size: 2rem;
    font-weight: 400;
    margin-left: auto;
}

.accordion-activeTitle::after {
    content: "-";
}

.accordion-info {
/* padding-bottom: 1rem; */
    max-height: 0;
    overflow: hidden;
    transition: 1000ms ease max-height;
}

.show {
    display: block;
}

.hidden {
    display: none;
}

/* WASA TABLE STYLES */

.table__container {
    width: 100%;
    max-height: 60svh;
    overflow: scroll;
    border-radius: 5px 5px 0px 0px;
}

.table__container table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0px;
}

.sticky__head {
    position: relative;
    isolation: isolate;
}

.sticky__head>table>thead>tr {
    position: sticky;
    top: 0;
    z-index: 2;
}

.table__container>table>thead>tr {
    background-color: var(--clr-wasablue);
}

.table__container table th,
.table__container table td {
    padding: .5rem;
}

.table__container>table>thead>tr>th {
    color: var(--clr-white-2);
    font-weight: 550;
}

.table__container>table>tbody>tr {
    border-bottom-width: 1px;
    border-bottom-color: var(--clr-wasablue);
    border-bottom-style: solid;
    background-color: var(--clr-white-2);
}

.table__container>table>tbody>tr:nth-child(even) {
    background-color: var(--clr-lightblue-transp);
}

table#procurementSchedule td span[data-procMethod] {
    display: inline-block;
    text-align: center;
    padding: 0.5rem;
    width: fit-content;
    border-radius: 7px;
    overflow: clip;
}

table#procurementSchedule td span[data-procMethod="Limited Bidding"] {
    background-color: var(--selective);

}

table#procurementSchedule td span[data-procMethod="Open Bidding"] {
    background-color: var(--open);
}

table#procurementSchedule td span[data-procMethod="Sole-Source Selection"] {
    color: var(--clr-white-2);
    background-color: var(--openMajor);
}

table#procurementSchedule td span[data-procMethod="Single-Source Selection"] {
    color: var(--clr-white-2);
    background-color: var(--soleSelect);
}

.awardRecord {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 1rem;
    width: 100%;
    line-height: normal;
    margin: .7rem 0rem;
}

.table__borderBottom {
    border-bottom: solid 6px var(--clr-wasablue);
}

@media (hover) {
    .table__container>table>tbody>tr:hover {
        background-color: #009aab73;
    }
}

/* DATA-TABLE ROW IMAGE  */
.med__rowImage {
    width: 80px;
    height: 50px;
    border-radius: 5px;
    overflow: clip;
}

[data-pressType="water supply"]>div {
    background-image: url("../Images/MediaPost/supply.jpg");
}

[data-pressType="traffic"]>div {
    background-image: url("../Images/MediaPost/traffic.jpg");
}

[data-pressType="general"]>div {
    background-image: url("../Images/MediaPost/news.jpg");
}

[data-pressType="water supply"]>div,
[data-pressType="traffic"]>div,
[data-pressType="general"]>div {
    background-size: contain;
    background-repeat: no-repeat;
}


/* VACANCY [CAREER OPPORTUNITIES] SYTLES */

.novacancy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.vacancy__sorry img,
.vacancy__statement img {
    width: var(--fluid-vacancy1);
}

.vacancy__sorry img {
    margin-top: 4rem;
}

.vacancy__statement img {
    margin-top: 2rem;
}

/* FOOTER STYLES */

.container3 {
    max-width: 1170px;
    margin: auto;
}

.row3 {
    /* display: flex;
	flex-wrap: wrap; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    width: 100%;
}


ul {
    list-style: none;
}

.footer3 {
    z-index: 2;
    background-image: url("../Images/footer-img.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 80px 0 0;
}

.footer-col3 {
    width: 100%;
    padding: 0 15px;
}

.footer-col3 h4 {
    font-size: clamp(.95rem, 2vw, 1.125rem);
    color: var(--clr-white-2);
    text-transform: capitalize;
    margin-bottom: 35px;
    font-weight: 500;
    position: relative;
}

.footer-col3 h4::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    background-color: black;
    height: 2px;
    width: 50px;
}

.footer-col3 ul li:not(:last-child) {
    margin-bottom: 10px;
}

.footer-col3 ul li a {
    font-size: clamp(.9rem, 1vw, 1rem);
    ;
    text-transform: capitalize;
    color: var(--clr-white-2);
    text-decoration: none;
    font-weight: 300;
    display: block;
    transition: all 0.3s ease;
}

.footer-col3 ul li a:hover {
    color: var(--clr-main-text);
    padding-left: 8px;
}

/* SOCIALS */
.social-container img {
    height: 50px;
    width: 50px;
}

.socials-container {
    color: var(--clr-white-2);
    max-width: max-content;
    padding-left: 1.5rem;
}

.socials-container p {
    font-size: 1.25rem;
}

.socialcard {
    color: var(--clr-white-2);
}

.socialcard li {
    margin-bottom: 1rem;
    padding: 0rem 3rem;
}

.socialcard li a {
    color: var(--clr-white-2);
    text-decoration: none;
    font-size: 1rem;
    cursor: pointer;
}

.socialcard li.fbLogo {
    cursor: pointer;
    list-style: none;
    background-image: url(../Images/Logos/facebookLogo.svg);
    background-repeat: no-repeat;
}

.socialcard li.twitLogo {
    list-style: none;
    background-image: url(../Images/Logos/icons8-twitter.svg);
    background-repeat: no-repeat;
}

.socialcard li.igLogo {
    list-style: none;
    background-image: url(../Images/Logos/instagramLogo.svg);
    background-repeat: no-repeat;
}

.socialcard li.ytLogo {
    list-style: none;
    background-image: url(../Images/Logos/youtubeLogo.svg);
    background-repeat: no-repeat;
}

.socialcard li.waLogo {
    list-style: none;
    background-image: url(../Images/Logos/whatsappLogo.svg);
    background-repeat: no-repeat;
}


/* Copyright */
.copyright {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--clr-lightblue);
    width: 100vw;
    background-color: black;
    height: 3rem;
}

/* MODAL STYLING */
.modal {
    padding-top: var(--scroll-top-pad);
    overflow: hidden !important;
}

dialog[data-modal-template] {
    margin: auto;
    width: max-content;
    border-radius: 0.675rem;
    border-color: var(--clr-wasablue);
    border-width: 1px;

}

dialog[data-modal-template]::backdrop {
    background-color: var(--clr-lightblue-transp);
}

.modal-header {
    padding: .5rem 1rem;
    border-bottom: solid 1px;
    border-bottom-color: var(--clr-med-grey);

}

dialog[data-modal-template] iframe {
    height: 80svh;
    aspect-ratio: 1 / 1.6;
    width: auto;
    background-color: transparent;
}


/* CONTACT US STYLING  */

.csc-title {
    position: relative;
    margin: 0;
    padding: 5rem 3rem;
    font-weight: bold;
    text-align: center;
    font-size: 2.2em;
}

.csc-title::after {
    content: "";
    display: block;
    position: absolute;
    left: 150px;
    width: 50%;
    height: 4px;
    background-color: var(--clr-wasablue);
}

.ctent-wrapper-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 20rem);
    justify-content: center;

}

.card-container {
    overflow: hidden;
    position: relative;
    margin: 0.5rem;
    text-align: center;
    box-shadow: 0px 2px 8px 0px #888;
    background-color: white;
    border-radius: 2rem;
    border-bottom: 0.5rem solid var(--clr-wasablue);
}

.banner-img {
    position: absolute;
    height: 10rem;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.banner-img-ho {
    background-image: url("../Images/ServiceCentre/stjosephcsc.jpg");
    background-size: 110%;
}

.banner-img-chaguanas {
    background-image: url("../Images/ServiceCentre/Chaguanascsc.jpg");
    background-size: 110%;
}

.banner-img-sanfernando {
    background-image: url("../Images/ServiceCentre/sanfernandocsc.jpg");
    background-size: 110%;
}

.banner-img-pos {
    background-image: url("../Images/ServiceCentre/kewPlace.jpg");
    background-size: 110%;
}

.banner-img-arima {
    background-image: url("../Images/ServiceCentre/Arimacsc.jpg");
    background-size: 110%;
}

.banner-img-ptfortin {
    background-image: url("../Images/ServiceCentre/ptfortincsc.jpg");
    background-size: 110%;
}

.banner-img-trincity {
    background-image: url("../Images/ServiceCentre/trincitycsc.jpg");
    background-size: 110%;
}

.banner-img-ptown {
    background-image: url("../Images/ServiceCentre/princestowncsc.jpg");
    background-size: 110%;
}

.banner-img-tobago {
    background-image: url("../Images/ServiceCentre/Tobagocsc.jpg");
    background-size: 110%;
}


.csc-info {
    padding-top: 12rem;
}

.csc-info a {
    display: inline-block;
    padding: 1rem;
}

.csc-info img {
    width: 40px;
}

/* CAREER OPPORTUNITIES STYLING */
.hero__careerImg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../Images/Misc/resume.jpg");
}

/* MEDIA HERO */
.hero__pubadsNotices {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../Images/MediaPost/mediaHD.jpg');
}

.hero__docLibrary {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../Images/Misc/documentLibHD.jpg');
}

.hero__socialMedia {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../Images/Misc/socialMediaHD.jpg');
}

.hero__customerService {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../Images/Misc/CustomerServiceHD.jpg');
}

/* PROGRAMMES & INITIATIVES STYLING */
.hero__progIn {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../Images/Misc/projectsimage.jpg');
}

Images article {
    --img-scale: 1.001;
    --title-color: black;
    --link-icon-translate: -20px;
    --link-icon-opacity: 0;
    position: relative;
    border-radius: 16px;
    box-shadow: none;
    background: #fff;
    transform-origin: center;
    transition: all 0.4s ease-in-out;
    overflow: clip;
}

article a::after {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    cursor: pointer;
    content: "";
}

/* basic article elements styling */
article h2 {
    margin: 0 0 18px 0;
    font-family: "Bebas Neue", cursive;
    font-size: 1.9rem;
    letter-spacing: 0.06em;
    color: var(--title-color);
    transition: color 0.3s ease-out;
}

figure {
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: clip;
}

article img {
    max-width: 100%;
    transform-origin: center;
    transform: scale(var(--img-scale));
    transition: transform 0.4s ease-in-out;
}

.article-body {
    padding: 24px;
}

article a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #28666e;
}

article a:focus {
    outline: 1px dotted #28666e;
}

article a .icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    transform: translateX(var(--link-icon-translate));
    opacity: var(--link-icon-opacity);
    transition: all 0.3s;
}

/* using the has() relational pseudo selector to update our custom properties */
article:has(:hover, :focus) {
    --img-scale: 1.1;
    --title-color: #28666e;
    --link-icon-translate: 0;
    --link-icon-opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.articles {
    display: grid;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 24px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.prog__title {
    text-align: center;
    color: var(--clr-wasablue);
    font-family: "Bebas Neue", cursive;
    font-size: var(--ff-prog-title);
}

.prog__title span {
    display: block;
    margin-bottom: 3rem;
    font-family: var(--ff-primary);
    color: var(--clr-main-text);
    font-size: 2rem;
}

@media screen and (max-width: 960px) {
    article {
        container: card/inline-size;
    }

    .article-body p {
        display: none;
    }
}

@container card (min-width: 360px) {
    .article-wrapper {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 16px;
    }

    .article-body {
        padding-left: 0;
    }

    figure {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    figure img {
        height: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }

    .prog__title {
        text-align: center;
        color: var(--clr-wasablue);
        font-family: "Bebas Neue", cursive;
        font-size: 6rem;
    }

}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}


/*--================NEWS & NOTICES====================== */
/* Media Advisories & Notices Styles */
.media__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--fluid-padding-1);
    margin-bottom: 4rem;
    width: 100%;
    text-align: center;
}

.media__cardholder {
    margin-top: 20px;
    padding: .5rem;
    position: relative;
    width: 260px;
    height: 100%;
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow1);
}

.media__cardholder .card__btn {
    margin-top: auto;
    text-decoration: none;
}

.mediaPost__img {
    width: 100%;
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
}

.media__title {
    font-size: 1rem;
}

.mediapost__info {
    font-size: var(--ff-mobile-tabletxt);
}

.mediapost__date {
    font-weight: bold;
}

.row {
    position: relative;
    text-align: center;
    margin: 0;
    padding: 20px;
}

.col-sm-6 {
    max-width: 33%;
}

.card-body {
    transition: transform .2s;
    position: relative;
}

.card-body:hover {
    background-color: var(--clr-wasablue);
    border-radius: 40px;
    transform: scale(1.1);
    z-index: 100;

}



/*--================NEWS & NOTICES====================== */

/* MOBILE VIEW */
@media screen and (width > 1920px){
    #pic1 {
        background-image: url(../Images/CarouselImgs/WASA-Conservation-2025-website-UHD.jpg);
    }
    #pic2 {
        background-image: url(../Images/CarouselImgs/WASA-CSISBkgd-UHD.jpg);
    }
}

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

    .Mnlogo {
        position: absolute;
        top: 0;
    }

    .wasaNav {
        border-radius: 0px 0px 30px 0px;
    }

    /*Hamburger Menu Button*/

    .hamburgerContainer {
        position: absolute;
        left: 5px;
        margin: 30px;
        padding: 5px;
        width: max-content;
        border-radius: 5px;
    }

    .hamburgerContainer:hover,
    .hamburgerContainer:focus-within {
        background-color: var(--clr-light-grey);
        cursor: pointer;
    }

    #hamburger {
        display: grid;
        align-content: center;
        width: 35px;
        height: 30px;
    }

    .bar {
        height: 3px;
        width: 100%;
        background-color: var(--clr-wasablue);
        display: block;
        border-radius: 5px;
        cursor: pointer;
        transition: .2s ease;
    }

    #bar1 {
        transform: translateY(-4px);
    }

    #bar3 {
        transform: translateY(4px);
    }

    .change .bar {
        background-color: black;
    }

    .change #bar1 {
        transform: translateY(4px) rotateZ(-45deg);
    }

    .change #bar3 {
        transform: translateY(-2px) rotate(45deg);
    }

    .change #bar2 {
        opacity: 0;
    }

    .wasaNavmobile {
        display: none;

    }

    .wasaNav ul {
        border-radius: 15px;
    }


    .change {
        display: list-item;
        list-style: none;
    }

    .mobMenu {
        display: list-item;
        list-style: none;
        position: absolute;
        top: 50px;
        left: 0px;


    }

    .menuSliderHide {
        transform: translateX(-50px);
        transition: transform 3s ease-in-out;
    }

    .menuSliderShow {
        transform: translateX(0px);
        transition: transform 2s ease-in-out;
    }

    .wasaNavmobile ul {
        display: list-item;
        width: 100%;
        background-color: var(--clr-white90);
        box-shadow: var(--shadow1);
        margin-top: 40px;
        border-radius: 0px 0px 15px 15px;
        padding-top: 20px;
        padding-bottom: 30px;

    }

    .wasaNavmobile ul li {
        position: relative;
    }

    .wasaNavmobile ul li a {
        position: relative;
        isolation: isolate;
        width: 100%;
        height: max-content;
        font-size: 0.9rem;
        padding: 10px 40px;
    }

    .wasaNavmobile ul li:hover .subnav {
        display: block;
        position: absolute;
        width: max-content;
        z-index: 20;
        margin-top: -50px;
        margin-left: 166px;
        border-radius: 15px;

    }

    .wasaNavmobile ul li a::after {
        position: absolute;
        bottom: 0px;
        content: "";
        width: 100%;
        height: 2px;
        background-color: var(--clr-light-grey);
        transform: translateX(-40px);
    }

    .wasaNavmobile ul li .subnav ul {

        margin-top: 0;
        width: 100%;
        border-radius: 15px;
        overflow: hidden;
    }

    .subnav ul li a {
        padding: 10px 1rem;

    }

    /* CAROUSEL  STYLES */
    #pic1 {
        background-image: url(../Images/CarouselImgs/WASA-Conservation-2025-website-Med.jpg);
    }
    #pic2 {
        background-image: url(../Images/CarouselImgs/WASA-CSISBkgd-Med.jpg);
    }

    #pic3 {
        background-image: url(../Images/CarouselImgs/WASA-Ebill-Banner-MED.jpg);
    }

    .col-sm-6 {
        min-width: 100%;
    }

    #disruptimgholder {
        margin-top: 10px;
    }

    #video1 {
        border-radius: 20px;
    }

    #video2 {
        width: 100%;
    }

    /*--================ LATEST UPDATES ======================-*/

    .slide-container {
        grid-auto-columns: 65%;
        overflow-x: auto;
        cursor: grab;
        scrollbar-width: none;
    }


    #cscentre {
        width: 100%;
        margin-top: 0px;
    }


    .cfspan-2 {
        grid-column: auto / span2;
    }

    #waterschedule {
        width: 100%;

    }


    .timeline {
        margin: 50px auto;
    }

    .timeline::after {
        left: 31px;
    }

    .jar {
        width: 90%;
        padding-left: 2px;
        padding-right: 2px;
    }

    .text-box {
        font-size: 13px;
    }

    .text-box small {
        margin-bottom: 10px;
    }

    .left-jar {
        left: 0;
        margin: 60px;
    }

    .right-jar {
        left: 0;
        margin: 60px;

    }

    .left-jar-arrow,
    .right-jar-arrow {
        border-right: 15px solid lightblue;
        border-left: 0px;
        left: -15px
    }

    .page-wrap {
        width: fit-content;
    }

    /* PAYMENT METHODS - Home Page  */

    .grid4 {
        --_spacer: var(--size-2);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 2fr));
        gap: var(--_spacer);
        width: 100%;
    }

    /* SERVICES PAGES LAYOUT */
    .serv__pad {
        padding: var(--fluid3-1-mobile);
    }



}

/* ANIMATED INPUT FIELDS STYLING */

.filterEntries .entries {
    color: var(--dark7);
}

/* .filterEntries .entries select,
  .filterEntries .filter input {
    padding: 7px 10px;
    border: 1px solid var(--dark7);
    color: var(--dark6);
    font-size: 1rem;
    background: transparent;
    border-radius: 5px;
    outline: none;
    transition: 0.3s;
    cursor: pointer;
  } */

/*  .filterEntries .entries select {
    padding: 5px 10px;
  } */

/* .filterEntries .filter {
    display: flex;
    align-items: center;
    width: 40%;
  } */

/* .filter label {
    color: var(--dark7);
    margin-right: 5px;
    font-size: 1rem;
  } */

/* .filter input[type="search"] {
    position: relative;
    isolation: isolate;
    width: 100%;
    font-size: 0.85rem;
    padding-left: 2rem;
    cursor: text;
  } */


/*   .filter input:focus {
    border-color: var(--dark7);
  } */


.input {
    position: relative;
    width: 40%;
    min-width: 20%;
}

.input span {
    position: absolute;
    top: 25%;
    margin: 0px;
    right: 15px;
    cursor: pointer;
}

.input span i {
    scale: 0.7;
}

/* Input field animation */
.inputGroup {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column-reverse;
    margin: 0rem 0;
}

.inputGroup select {
    margin: 2em 0 0;
}

.inputGroup input {
    padding: 5px 5px;
    border: 1px solid var(--dark7);
    color: var(--dark6);
    font-size: 1rem;
    background: transparent;
    border-radius: 5px;
    outline: none;
}

.inputGroup input::placeholder {
    opacity: 0;
}

.inputGroup label {
    position: absolute;
    padding-left: 10px;
    margin-bottom: 2px;
    font-size: 1rem;
    color: var(--dark7);
    cursor: pointer;
    /* transform: translate(50%, 50%); */
    transform-origin: left top;
}

.inputGroup input,
.inputGroup label {
    transition: 0.4s all ease;
}

.inputGroup input:focus~label,
.inputGroup input:not(:placeholder-shown)~label {
    transform: translate(10px, -35px) scale(0.9);
    padding: 0;
}




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



    /* PHOTOGALLERY - Home Page  */
    .imageGrid {
        --gal-gap: 1rem;
        --gal-num-cols: 2;
        --gal-row-height: 300px;

        padding: var(--gal-gap);

        display: grid;
        grid-template-columns: repeat(var(--gal-num-cols), 1fr);
        grid-auto-rows: var(--gal-row-height);
        grid-auto-flow: dense;
        gap: var(--gal-gap);

    }


}

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



    /* RESPONSIVE TABLE */
    table.responsive {
        border: 0;
    }

    table.responsive caption {
        font-size: 1.3em;
    }

    table.responsive thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table.responsive tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: 1rem;
        box-shadow: 10px 10px 17px -6px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 10px 10px 17px -6px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 10px 10px 17px -6px rgba(0, 0, 0, 0.3);
    }

    table.responsive td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
    }

    [data-label="Reference Number"],
    [data-label="UNSPSC Code"] {
        font-weight: bold;
    }

    table.responsive td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    table.responsive td:last-child {
        border-bottom: 0;
    }

    .width__max__content {
        width: 100%;
    }

    [data-label="Download"] img.dloadIco {
        width: 20px;
        height: 20px;
    }

    .table__border1 {
        border-top: solid 2px var(--clr-wasablue)
    }



}

@container card (min-width: 380px) {
    .article-wrapper {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 16px;
    }

    .article-body {
        padding-left: 0;
    }

    figure {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    figure img {
        height: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }
}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media screen and (max-width:480px) {
    /*--================ CAROUSEL CONTAINTER ====================== */
    /* Optimezed Image Size - 460px X 480px */

    :root {
        --nav-height: 70px;
        --ff-card-info: clamp(1rem, 1.5vw, 1.175rem);
    }

    .wasaNav {
        height: var(--nav-height);
        border-radius: 0px;
    }

    .mobMenu {
        display: list-item;
        list-style: none;
        position: absolute;
        top: 30px;
        left: 0px;
    }

    .imglogo {
        scale: 50%;
    }

    .carousel {
        padding-top: 0.25rem;
    }

    .carousel-item {
        height: 30rem;
    }

    .carousel-inner {
        border-radius: 0px 0px 20px 20px;
    }

    .carousel-item > div.container {
        width: 75%;
        margin: 0% auto;
        padding: 20px;
        border-radius: 10px;
        background-color: var(--clr-lightblue-transp);
    }

    .carousel-item div.container>p {
        font-size: 1rem;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }



    #pic1 {
        background-image: url(../Images/CarouselImgs/WASA-Conservation-2025-website-Sm.jpg);
    } 
    #pic2 {
        background-image: url(../Images/CarouselImgs/WASA-CSISBkgd-Sm.jpg);
    } 
    #pic3 {
        background-image: url(../Images/CarouselImgs/WASA-Ebill-Banner-SM.jpg);
    }

    #picdefault {
        background-image: url(../Images/CarouselImgs/fillerimage.jpg);
    }

    /*--================ CAROUSEL CONTAINTER END  ====================== */


    /* Cards */
    .push {
        padding: 0px;
        display: flex;
        position: relative;
        flex-direction: column;
        justify-content: space-between;
        min-height: calc(100svh - 464px);
    }

    .cardholder {
        margin-top: 20px;
        padding: .5rem;
        /* display: block; */
        position: relative;
        width: 100%;
        background-position: center;
        background-size: cover;
        border-radius: 20px;
        box-shadow: var(--shadow1);
    }

    .cardholder h1 {
        padding-top: .5rem;
    }

    /*--================ LATEST UPDATES ======================-*/

    .slide-container {
        grid-auto-columns: 75%;
    }

    .card-title {
        font-size: var(--ff-mobile-bodytxt);
    }

    /*--================ PAYMENT OPTIONS ======================-*/

    .grid4 {
        --_spacer: var(--size-2);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 2fr));
        gap: var(--_spacer);
        width: 100%;
    }

    .pad1-25rem {
        padding: 2rem;
    }

    .payCaption {
        display: inline-block;
        padding: .5rem;
        font-size: .5rem;
        text-align: center;
    }


    /* PHOTOGALLERY - Home Page  */
    .imageGrid {
        --gal-gap: 1rem;
        --gal-num-cols: 1;
        --gal-row-height: 300px;
    }

    /* WASA App Info */
    .adWrapper {
        padding: 0rem;
    }

    .adWrapper .imageWrapper {
        width: 60%;
        padding-top: 2rem;
        text-align: center;
        overflow: clip;
    }

    .adWrapper .appInfoWrapper .storeIcons img {
        width: 60%;
        object-fit: contain;
    }

    /* History */
    .jar {
        width: 80%;
        padding-left: 2px;
        padding-right: 2px;
    }

    /* PAYMENT METHODS - Home Page  */


    /*** SERVICES PAGE STYLING ***/

    .service-container {
        margin: 1rem 0rem 2rem 0rem;
        padding-bottom: 3rem;
        font-size: var(--ff-card-info);
    }

    .service-info,
    .aForm-info {
        margin: 0;
        padding: 0 1rem;
    }

    .service-container li,
    .add-requirement li {
        margin: 0;
        width: 100%;
        padding: 0rem .5rem 1.5rem .5rem;
    }

    .bullet-lvl1 ol,
    .bullet-lvl1 ol ul {
        padding-left: .5rem;
    }

    .bullet-lvl1>li::marker {
        font-family: FontAwsome6Free;
        font-size: 140%;
        font-weight: 900;
        content: '\f058';
        color: var(--clr-wasablue);
    }

    /* MODAL STYLING */
    .payLogo-container>img {
        width: auto;
        height: 50px;
    }

    /* RESPONSIVE TABLE */
    .hero-image {
        height: 20svh;
    }


    .gen-pad-3 {
        padding: 2rem;
    }

    #prevaluetable {
        font-size: .8rem;
    }


    table.responsive {
        border: 0;
    }

    table.responsive caption {
        font-size: 1.3em;
    }

    table.responsive thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table.responsive tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: 1rem;
        box-shadow: 10px 10px 17px -6px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 10px 10px 17px -6px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 10px 10px 17px -6px rgba(0, 0, 0, 0.3);
    }

    table.responsive td {
        border-bottom: 1px solid #ddd;
        display: block;
        font-size: .8em;
        text-align: right;
    }

    [data-label="Reference Number"],
    [data-label="UNSPSC Code"] {
        font-weight: bold;
    }

    table.responsive td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    table.responsive td:last-child {
        border-bottom: 0;
    }

    .width__max__content {
        width: 100%;
    }

    /* HERO IMAGES */
    /* .hero__pubadsNotices{
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../Images/MediaPost/media480.jpg');
    } */

    /* MOBILE DATA-TABLE HEADER IMAGE */
    .med__rowImage {
        width: 100%;
    }

    .med__rowImage>image {
        object-fit: cover;
    }

}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;

    }
}