body {
            overflow: hidden;
            margin: 0;
            font-family: "Georgia", serif;
            display: flex;
            flex-direction: row; 
            height: 100%; 
            width: 100%;
            background-color:black;

        }
body img { width: 100%; }
        header {
            overflow: hidden;
            margin: 0;
            font-family: "Georgia", serif;
            display: flex;
            flex-direction: row; 
            height: 100%; 
            width: 100%;
            background-color:black;
            background: url("img/00.jpg");
            background: url("img/00.gif");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: top;
        }
        .menu {
            display: flex;
            justify-content: center;
            background-color: transparent;
            position: fixed;
            top:25px;
            width: 100%;
            z-index: 1000;
            box-shadow: none;
            color: aqua;
        }



        .container {
            text-align: center;
            margin-top: 100px;
            width: 100%;
        }

        .content-section {
            background: #ffffffcc;
            padding: 20px;
            margin-top: 80px auto;         
            text-align: center;
            height: 40%;

        }

        .content-section h2 {
            margin-bottom: 15px;
            font-size: 1.5em;
            color: #555;
        }

        .footer {
            text-align: center;
            padding: 10px;
            margin-right:0 ;
            background-color:transparent;
            position: fixed;
            bottom: 0;
            width: 100%;
            font-family: "Roboto", sans-serif;
            font-size: 1em;
            color: #555;
        }

        .footer a {
            text-decoration: none;
            color: #555;
             color: #dcf6f6;   
        }

        .footer a:hover {
            filter: invert(1);
        }


        .hero {
            padding-top: 0px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            color: #efefef;
            font: 1em sans-serif;
            font-family: 'Segoe UI';
        }
        .bl {
            margin: 0px;
            margin-top: 0px;
            padding-top: 0px;
            display: grid;
            grid-template-columns:repeat(4, 28%);
            justify-content: center;
            align-items: center;
            text-align: center;
            color: #efefef;
            font: 1em sans-serif;
            font-family: 'Segoe UI';
        }
 
        .hero-content { width: 800px;    }
        .container { padding-left: 100px; padding-right: 100px;}
        .product-card { 
            background: linear-gradient(#80b7fb, #131738);            
            font: 1em sans-serif;
            font-family: 'Segoe UI';
            color: #ededed;}
        .content-section {background: transparent; height: 450px; position:relative;            
        border-radius: 12px;  box-shadow: 0 4px 4px #8edfdf;
        margin: 4px;}
        .icard { background: transparent; width: 100%; border-radius: 12px; overflow: hidden;}
        .icard img {  border-radius: 12px; width: 90%; height: 200px; position:absolute; 
            left:5%; bottom: 10px;  }
        .bl a { text-decoration: none !important; color: #0de;}
        .bl a { color: #0de !important;}
        .product-title { color: #dcf6f6 !important;    
            border-bottom: #dcf6f6 solid 1px; }
        .product-title a {  color: #ededed;}
        

        .product-title #drywell { color: #c4c284 !important;
                border-bottom: #c4c284 solid 1px !important; 
                box-shadow: 0 3px 1px #c4c284; margin-top: 0; padding-top: 0;}
        .product-title #healwell { color: #12d22f !important;
                border-bottom: #12d22f solid 1px !important; 
                box-shadow: 0 3px 1px #12d22f;}
        .product-title #climawell { color: #87f0b6 !important;
                border-bottom: #87f0b6 solid 1px !important; 
                box-shadow: 0 3px 1px #87f0b6;}
        .product-title #mpm {  color: #f4f296 !important;
                border-bottom: #f4f296 solid 1px !important;
             box-shadow: 0 3px 1px #f4f296;}
        .product-title #amoq {  color: #98f7fa !important; 
                border-bottom: #98f7fa solid 1px !important;
            box-shadow: 0 3px 1px #98f7fa;}
        
        h3:hover { font-size:xx-large; margin-top: -12px !important;}
        #prods { background: #80b7fb; text-decoration: none !important;}
        .hero a { text-decoration: none !important; 
            background: linear-gradient(to right, #12d22f, #f4f296);
        ;
        }
        .product-description { word-wrap: break-word; text-align: left;}
        .content-section.drywell {background: linear-gradient(#515159,#212424,#515159); }
        .content-section.healwell {background: linear-gradient(#515159,#212424,#515159); }
        .content-section.climawell {background: linear-gradient(#515159,#212424,#1f1f23); }
        .content-section.amoq {background: linear-gradient(#515159,#212424,#515159); }
        .content-section.mpm {background: linear-gradient(#515159,#212424,#515159); }
        .hero h1 { font-size: 3em;}


        #container {
            position: absolute;
            width: 100%;
            height: 100vh;
            top:-200px;
            display: block;
        }
        .zix { z-index: 1000 !important;}
        .logo { text-align: center;}


        @media  only screen and   (max-width: 600px) {
        body {overflow-y: auto;}
        .content-section { padding: 5px;  width: 100%;          }
        .content-section h1 {  font-size: 3em;             }
        .content-section p {   font-size: 1em;        }
        #container { width: 100vw; padding: 0;}
        .container { width: 98vw; padding: 0;}
        .menu h1{ font-size: 2em;  text-align: center; width: 98vw; padding: 0; margin: 0; 
         text-shadow: 0px 0px 12px black !important;}
        .bl {   display: block;  width: 98%; }
        .hero-content { width: 100%;   color: #56bbf6; }            
    }
    
     .de-content {   text-shadow: 0px 0px 2px black !important;}