<%- include("partials/navbar.ejs") %>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Fawater</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

        <style>
            html,
            body {

                background: #252735;
                font-family: 'Akshar-Variable';

            }

            .container-fluid {
                height: 60px;

                background-color: #36394C;


            }

            .navbar {

                padding: 0 !important;
            }

            #navo {
                color: #36394C;
                opacity: 50%;
                transition: background-color 0.9s ease;
            }

            #navo:hover {
                opacity: 100%;
                transition: background-color 0.9s ease;

            }

            #log {
                color: rgb(47, 49, 12);
            }

            .inc {
                color: #ffffff;
                font-size: 40px;
                position: absolute;
                left: 1%;
                font-family: "Montserrat", "Helvetica", Arial, sans-serif;
                top: 6px;
                user-select: none !important;
                font-weight: bolder;
            }

            a {
                font-family: Oswald;
                font-size: 20px !important;
                user-select: none !important;
                color: white !important;
                margin-left: 10px;
                margin-right: 10px;

            }

            .navbar-collapse {
                left: 200px !important;
            }

            .logDiv {
                position: relative;
                left: 9px;
                background-color: #16676B;
                align-items: center;
                justify-content: center;
                padding: 9px;
                border-radius: 20px;
            }

            .head {
                color: white;
                margin-top: 40px;
                text-align: center;
            }

            .intro {
                color: white;
                font-family: 'Akshar-Variable';
                font-size: 20px;
                margin-top: 30px;
                text-align: center;
            }

            @font-face {
                font-family: 'Akshar-Variable';
                src: url('/fonts/Akshar-VariableFont_wght.ttf') format('truetype');
                font-weight: normal;
                font-style: normal;
            }

            .logo {
                width: 250px;
                margin: 0px auto;
                border-radius: 20px;
            }

            .imgcon {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 130px;


            }

            .btn-our {
                display: block;
                margin: 0 auto;
                margin-top: 30px;
                padding: 13px;
                width: 200px;
                height: 70px;
                border-radius: 10px;
                background-color: #00C4CC;
            }

            .btns {
                font-family: 'Akshar-Variable';
                font-size: 25px;
                font-weight: bold;
                color: white;
            }

            .about {

                color: white;
                font-family: 'Akshar-Variable';
                font-size: 90px;
                margin-top: 190px;

            }

            .container-flex {
                display: flex;
                flex-wrap: wrap;
                gap: 127px;
                justify-content: center;
                margin-top: 70px
            }

            .small {
                height: 599px;
                width: 318px;
                border-radius: 5px;
                background-color: #2A3142;



            }

            .newaccount {
                font-size: 20px;
                color: #8B88FC;
                font-family: 'Akshar-Variable';
                text-align: center;
                position: relative;
                left: 720px;
                top: 15px;


            }

            .label1 {
                color: white;
                position: relative;
                left: 200px;
                top: 60px;
                font-size: 20px;

            }

            .label2 {
                color: white;
                position: relative;
                left: 455px;
                top: 60px;
                font-size: 20px;

            }

            .label3 {
                color: white;
                position: relative;
                left: 780px;
                top: 60px;
                font-size: 20px;

            }

            .inputs {
                width: 290px;
                height: 36px;
                flex-shrink: 0;
                border-radius: 10px;
                background: #D9D9D9;
                margin: 13px;
            }

            .labels {
                color: aliceblue;
                font-size: 15px;
                position: relative;
                top: 10px;
                left: 12px;
            }

            .labelsi {
                color: aliceblue;
                font-size: 15px;
                position: relative;
                top: 10px;
                left: 12px;
            }

            .labelsi:after {
                content: " *";
                color: red;
            }

            .registerbtn {
                width: 150px;
                height: 53px;
                flex-shrink: 0;
                border-radius: 20px;
                background: #08A2A8;
                margin-top: 25px;

            }

            .container-log {
                width: 420px;
                height: 280px;
                flex-shrink: 0;
                border-radius: 10px;
                background: #2A3142;

                position: relative;
                margin: 0 auto;
                margin-top: 22px;
            }

            .labels {
                color: aliceblue;
                font-size: 15px;
                position: relative;
                top: 10px;
                left: 12px;
            }

            .labelsi {
                color: aliceblue;
                font-size: 18px;
                position: relative;
                top: 10px;
                left: 20px;
                margin-top: 20px;
            }

            .inputs {
                width: 370px;
                height: 40px;
                flex-shrink: 0;
                border-radius: 10px;
                background: #D9D9D9;
                margin: 13px;
            }

            .forgot {
                color: #08A1A8;

                text-align: center;

                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 55px;
                /* 250% */
                text-decoration-line: underline;
            }

            .logolog {
                width: 125px;
                height: 125px;
                flex-shrink: 0;
                margin-top: 120px;
            }

            .instructions {
                width: 1350px;
                height: 620px;
                flex-shrink: 0;
                top: 70px;
                border-radius: 29px;
                background: #2A3142;
                position: relative;
                align-items: center;
                color: white;
                font-size: 27px;
            }

            .account {
                width: 420px;
                height: 55px;
                flex-shrink: 0;
                border-radius: 10px;
                background: #2A3142;
                position: relative;
                top: -390px;
            }

            .logbtn {
                width: 150px;
                height: 53px;
                flex-shrink: 0;
                border-radius: 20px;
                background: #08A2A8;
                margin-top: 25px;
                position: relative;
                top: -390px;

            }

            #theflash {
                width: 250px !important;
                margin-top: 10px;
                background-color: #00C4CC;
                color: white;
                border: 0px;
            }
        </style>
    </head>

    <body>  
        <center><h1 style="color: white; margin-top: 60px;">Tips and Advices</h1></center>
        <center>
            <div class="instructions" style="line-height: 1.6; font-size: 20px;">
                <h3 style="margin-bottom: 10px; ">Conserve Resources</h3>
                <h4 style="margin-bottom: 30px; ">Here are ten practical tips to help you reduce your water and
                    electricity consumption:</h4>
                <ul style="list-style-type: disc; padding-left: 20px;">
                    <li style="margin-bottom: 10px;"><strong>Switch to LED Bulbs:</strong> LED bulbs consume significantly less
                        electricity than traditional incandescent bulbs and last longer, reducing both energy usage and replacement
                        costs.</li>
                    <li style="margin-bottom: 20px;"><strong>Install a Programmable Thermostat:</strong> This allows you to set
                        temperature schedules, reducing heating and cooling when you're not home, which lowers electricity usage.
                    </li>
                    <li style="margin-bottom: 20px;"><strong>Take Shorter Showers:</strong> Reducing shower time conserves water and
                        the energy used to heat that water.</li>
                    <li style="margin-bottom: 20px;"><strong>Full Loads in Dishwashers and Washing Machines:</strong> Running these
                        appliances only with full loads maximizes efficiency and reduces both water and electricity usage.</li>
                    <li style="margin-bottom: 20px;"><strong>Use Cold Water for Laundry:</strong> Washing clothes in cold water
                        reduces the electricity used to heat the water, without compromising cleaning quality.</li>
                    <li style="margin-bottom: 20px;"><strong>Fix Leaks Promptly:</strong> Leaky faucets and pipes can waste a
                        significant amount of water over time, so fixing them promptly saves water.</li>
                    <li style="margin-bottom: 20px;"><strong>Unplug Unused Electronics:</strong> Many electronics consume power even
                        when off. Unplugging them can reduce unnecessary electricity use.</li>
                    <li style="margin-bottom: 20px;"><strong>Water Plants in the Early Morning or Late Evening:</strong> Watering at
                        these times reduces evaporation and makes your watering more efficient.</li>
                    <li style="margin-bottom: 20px;"><strong>Insulate Your Home:</strong> Proper insulation reduces the need for
                        heating and cooling, thereby saving on electricity.</li>
                    <li style="margin-bottom: 20px;"><strong>Regularly Maintain Appliances:</strong> Well-maintained appliances
                        operate more efficiently, using less electricity and water.</li>
                </ul>
            </div>

        </center>
    </body>

    </html>