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

a {
text-decoration: none;
}

ul {
list-style: none;
}

body {
font-family: 'Arial';
background-color: #c6cbd1;
}

html {
scroll-behavior: smooth;
scroll-timeline: --page-scroll block;
}

@keyframes grow-progress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}

#progress {
position: fixed;
left: 0; top: 0;
width: 100%; height: 0.8em;
background: #006fa6;

transform-origin: 0 50%;
animation: grow-progress auto linear;
animation-timeline: --page-scroll;
}

:root {
--grey: #c6cbd1;
--grey1: #e4e0e1;
--darkgrey: #526271;
--baige: #a6a2a1;
--violet: #99c9d7;
--white: #ffffff;
--purple: #0193cf;
--lilac: #154573;
--darkblue: #003366;
--red: #0193cf;
}

.btn {
text-transform: uppercase;
}


.cawi {
max-width: 1200px;
background-color: var(--white);
margin: 0 auto;
padding: 0;
overflow: hidden; 
border: 0;
}

.cawi1 {
max-width: 1200px;
background-color: var(--white);
margin: 0 auto;
padding: 0;
overflow: hidden; 
border: 0;
text-align: center;
}

.cawi1 img {
max-width: 100%; 
height: auto;
}

.cawi-left {
width: 48%;
float: left;
border: 0;
}

.cawi-right {
width: 48%;
float: right;
border: 0;
padding-top: 10px;
text-align: right;
margin-bottom: 5px;
}

.cawi-left  img {max-width: 100%; }


@media screen and (max-width: 600px) {
.cawi-left, .cawi-right {
width: 100%;
height: 110px;
text-align: center;
vertical-align: middle;
}
}


a.cawi {color: var(--white); text-decoration: none;  font-size: 20pt; text-transform: uppercase; background-color: var(--darkblue); padding: 10px;}

a:hover.cawi {background-color: var(--grey);}


.hdr {
width: 100%;
height: 350px;
margin: 0 auto;
padding: 0;
overflow: hidden; 
background-color: var(--grey);
text-align: center;
position: relative; 
}


.hdr img {
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  }

@media screen and (max-width: 600px) {
  .hdr {
    height: 200px;
  }
  }



.container-hdr {
max-width: 1200px;
margin: 0 auto;
padding: 0;
overflow: hidden; 
}




h1 {font-size: 27pt; color: #99c9d7; text-align: center; padding-left: 10px; line-height: 1.3em; margin-top: 20px; margin-bottom: 20px;}

h1.rec {font-size: 25pt; background-color: var(--grey); color: var(--white); text-align: center; padding: 10px; line-height: 1.3em; margin-top: 20px; margin-bottom: 10px;}

h1.m1 {font-size: 25pt; background-color: #7cc40e; color: var(--white); text-align: center; padding: 20px; line-height: 1.3em; margin-top: 10px; margin-bottom: 20px;}

h1.m2 {font-size: 25pt; background-color: #ffa200; color: var(--white); text-align: center; padding: 20px; line-height: 1.3em; margin-top: 10px; margin-bottom: 20px;}

h1.m3 {font-size: 25pt; background-color: #ffcc00; color: var(--white); text-align: center; padding: 20px; line-height: 1.3em; margin-top: 10px; margin-bottom: 20px;}

h1.m4 {font-size: 25pt; background-color: #59b4eb; color: var(--white); text-align: center; padding: 20px; line-height: 1.3em; margin-top: 10px; margin-bottom: 20px;}

h1.m5 {font-size: 25pt; background-color: #d10000; color: var(--white); text-align: center; padding: 20px; line-height: 1.3em; margin-top: 10px; margin-bottom: 20px;}


h2 {font-size: 20pt; color: var(--darkblue); text-align: center; font-weight: bold; padding-left: 10px; padding-right: 10px;  line-height: 1.3em; margin-top: 25px; margin-bottom: 15px; display:block; border-bottom: 1px var(--tide) solid;}

h3 {font-size: 18pt; color: var(--baige); text-align: center; font-weight: bold; padding-left: 10px; padding-right: 10px; line-height: 1.3em; margin-top: 20px; margin-bottom: 20px;}

main {
max-width: 1200px;
margin: 0 auto;
padding: 0;
overflow: hidden; 
background-color: var(--white);
}


.text {max-width: 1200px; text-align: left; overflow:hidden; background: transparent; margin-top: 10px; margin-bottom: 10px; }

.text p {font-size: 15pt; color: #000; text-align: left; padding-left: 20px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text ul {font-size: 15pt; color: #000; text-align: left; list-style-type: disc; padding-left: 50px; line-height: 1.3em; margin-bottom: 7px;}

.text ol {font-size: 15pt; color: #000; text-align: left; padding-left: 50px; line-height: 1.3em; margin-bottom: 7px;}


.text p.txt1 {font-size: 15pt; color: #000; text-align: left; padding-left: 50px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.txt2 {font-size: 15pt; color: #000; text-align: left; padding-left: 70px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.txt3 {font-size: 15pt; color: #000; text-align: left; padding-left: 90px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}

.text p.center {font-size: 15pt; color: #000; text-align: center; line-height: 3em; margin-bottom: 15px;}

.text p.cite {font-size: 15pt; color: #000; text-align: left; padding: 50px; line-height: 1.4em; margin-bottom: 15px; display: block; background-color: var(--grey1); }

.text img {max-width: 100%; }

.text p.txt-s {font-size: 13pt; color: #000; text-align: left; padding-left: 50px; padding-right: 20px; line-height: 1.4em; margin-bottom: 15px;}


a.ll {color: var(--darkblue); text-decoration: underline;  font-size: 15pt;}
a:hover.ll {color: #000; text-decoration: none;}

a.tt2 {color: var(--darkblue); text-decoration: none;  font-size: 17pt;}
a:hover.tt2 {text-decoration: underline;}


a.m {color: #000; text-decoration: underline; font-family: arial; font-size: 15pt;}
a:hover.m {text-decoration: none;}


a.l-center {color: #4c362a; text-decoration: underline; font-family: arial; font-size: 13pt;}
a:hover.l-center {color: var(--brown); text-decoration: none;}

a.alv {
font-size: 19px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: var(--lilac);
margin: 0;
transition: 0.5s;
}

a:hover.alv {
background-color: var(--purple);
}


.raw {max-width: 1200px; overflow: hidden; background: transparent; margin-bottom: 5px; }

.raw1 {max-width: 1200px; overflow: hidden; background: transparent; margin-bottom: 10px; padding-left: 10px; padding-right: 10px;}


.cell-l { 
float: left;
width: 50%;
height: 300px;
background: url('../i/womwat.png') center no-repeat; 
border-radius: 15px;
}

.cell-r {
float: right;
width: 49%;
height: 300px;
background: url('../i/chigir.png') center no-repeat; 
border-radius: 15px;
}


.cell-l1 { 
float: left;
width: 48%;
height: 300px;
background: url('../i/womwat1.jpg') center no-repeat; 
border-radius: 15px;
}

.cell-r1 {
float: right;
width: 48%;
height: 300px;
background: url('../i/womwat.png') center no-repeat; 
border-radius: 15px;
}

.cell-l2 { 
float: left;
width: 48%;
height: 300px;
background: url('../i/womwat2.jpg') center no-repeat; 
border-radius: 15px;
}

.cell-r2 {
float: right;
width: 48%;
height: 300px;
background: url('../i/glos-water.jpg') center no-repeat; 
border-radius: 15px;
}


@media screen and (max-width: 600px) {
.cell-l,.cell-l1, .cell-r, .cell-r1, .cell-l2, .cell-r2 { 
width: 100%;
text-align: center;
margin-bottom: 10px;
}
}


.celltext {max-width: 580px; overflow:hidden; text-align: center; vertical-text-align: middle; margin-top: 100px; z-index: 100;}

.celltext p {
font-size: 30pt; 
font-style: normal; 
color: var(--white); 
font-weight: bold; 
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}


/* Footer */


footer {
max-width: 100%;
background-color: var(--red);
margin-top: 5px;
overflow: hidden; 
border-top: 10px  var(--darkgrey) solid;
}

.container-ft {
max-width: 1200px;
margin: 0 auto;
padding: 15px 0;
overflow: hidden; 
 }
 
.f-left { 
float: left;
width: 50%;
text-align: right;
padding-left: 20px;
padding-right: 50px;
}

.f-left p {
font-size: 15px;
font-style: normal;
color: var(--white);
margin-top: 10px;
}

.f-left p span {
font-size: 15px;
font-style: normal;
color: var(--white);
line-height: 1.3em; 
margin-bottom: 7px;
}

.f-left a {
font-size: 15px;
font-style: normal;
color: var(--white);
margin-bottom: 7px;
text-decoration: none;
padding-left: 10px;
}

.f-left a:hover {
text-decoration: underline;
}

.f-left a span {
font-size: 10px;
font-style: normal;
color: var(--white);
line-height: 1.3em; 
margin-bottom: 7px;
}

.f-right {
float: right;
width: 50%;
text-align: left;
}

.f-right p {
font-size: 16px;
font-style: normal;
color: var(--white);
line-height: 1.4em; 
margin-bottom: 7px;
}

.f-right a {
font-size: 16px;
font-style: normal;
color: var(--white);
text-decoration: none;
}

.f-right a:hover {
 text-decoration: underline;
}

@media screen and (max-width: 600px) {
.f-left, .f-right { 
width: 100%;
padding-left: 20px;
padding-right: 20px;
text-align: center;
margin-bottom: 50px;
}
.f-left p {
font-size: 13px;
}
.f-left a {
font-size: 13px;
}
}

.footer_h4 {
font-size: 20px;
font-style: normal;
font-weight: bold;
color: var(--white);
margin-bottom: 7px;
margin-top: 10px;
}





.column33 {   
float: left;
width: 33.3%;
height: 250px;
padding: 10px;
background-color: var(--lilac);
border: 2px solid var(--white);
display: flex;
justify-content: center;
text-align: center;
align-items: center;
border-radius: 10px;
}

.column33:hover {
background-color: var(--darkgrey);
transition: background-color 0.5s;
}

.text2 {
 display: none;
}

.column33:hover .text1 {
 display: none;
}

.column33:hover .text2 {
display: block;
}



.column33-1 {   
float: left;
width: 33%;
padding: 10px;
text-align: center;
}

.column33 img { 
max-width: 100%;
height: auto;
}


@media screen and (max-width: 600px) {
.column33, .column33-1 {
width: 100%;
padding: 20px;
}
}



a.c33  {
font-size: 20pt; 
color: var(--white); 
font-weight: bold; 
}

a.c33 span {
font-size: 18pt; 
color: var(--white); 
}


a.c32 {
font-size: 18pt; 
color: var(--white); 
text-decoration: none;
}


a:hover.c32 {
text-decoration: underline;
}



.pub-left { 
float: left;
width: 30%;
padding: 5px;
text-align: center;
}

.pub-right {
float: left;
width: 65%;
padding: 5px;
}


.pub-left img { 
max-width: 100%;
height: auto;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
}

.pub-right img { 
max-width: 100%;
height: auto;
}


.pub-right p {font-size: 15pt; color: #000; line-height: 1.4em; margin-bottom: 15px; text-align: left;}

@media screen and (max-width: 600px) {
.pub-left, .pub-right {
width: 100%;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}

.pub-right p {text-align: center;}
}
}




.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-timeline: --scroll-timeline x;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}

.table-container tr,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}




.column-mtng {   
width: 96%;
padding: 20px;
margin: 10px auto;
text-align: center;
box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
background-color: var(--violet);
border-radius: 10px;
}

.column-mtng:hover {   
background-color: var(--lilac);
}


.column-mtng p {   
font-size: 17pt; 
font-weight: bold;
text-align: center;
color: var(--white);
}

.column-mtng p span {   
font-size: 14pt; 
text-align: center;
color: var(--white);
}


table.table11 {border: 1px solid #000; border-collapse: collapse; }

td.gg {border: 1px solid #000; text-align:left; padding: 4px; }

td.hh {border: 1px solid #000; text-align: center; vertical-align: middle; padding: 4px;}


#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 140px;
    right: 200px;
    z-index: 99;
    font-size: 30px;
    background-color: #154573;
    color: #fff;
    padding: 12px 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-align: center;
}



@media screen and (max-width: 600px) {
#scrollTopBtn {
  bottom: 40px;
  right: 20px;
}
}