#Website {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    #navbar {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 700px;
        padding: 20px 0px;

        #nav_menu {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 30px;

            #nav_text {
                color: grey;
                font-size: 20px;
            }

            #icons {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 10px;

                #icon {
                    height: 30px;
                    width: 30px;
                    border-radius: 50%;
                }
            }
        }
    }

    #top {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: aliceblue;
        gap: 30px;
        padding: 100px 330px;
        background: linear-gradient(rgba(248, 249, 249, 0.093)55%, rgba(3, 173, 246, 0.312)), url("./home-bg.png");
        background-attachment: fixed;

        #top_1 {
            font-weight: bold;
            text-align: center;
            font-size: 45px;
        }

        #top_2 {
            text-align: center;
            font-size: 20px;
        }

        #top_3 {
            display: flex;
            flex-direction: row;
            justify-content: center;
            background-color: black;
            align-items: center;
            gap: 15px;
            padding: 15px 15px;
            border-radius: 5px;


            #mail {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 10px;
                border-radius: 5px;
                color: rgb(0, 0, 0);
                padding: 8px 50px;
            }

            #subscribe {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                background-color: rgb(19, 187, 225);
                cursor: pointer;
                border-radius: 5px;
                padding: 10px 32px;
                border: none;
            }
        }
    }

    #middle {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: rgb(211, 208, 205);
        gap: 95px;
        padding: 30px 242px;
        border: 2px rgb(109, 104, 104) solid;

        #middle_1 {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 20px;

            #middle_11 {
                border: 2px rgb(108, 184, 228) solid;
                border-radius: 50px;
                padding: 20px 20px;

            }

            #middle_12 {
                /* font-size: 30px;
                padding: 80px 15px;
                border: 2px black solid; */
                text-align: left;
                font-size: 20px;
            }

        }

        #middle_2 {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 20px;

            #middle_21 {
                border: 2px rgb(108, 184, 228) solid;
                border-radius: 50px;
                padding: 20px 20px;

            }

            #middle_22 {
                text-align: left;
                font-size: 20px;
            }
        }

        #middle_3 {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 20px;

            #middle_31 {
                border: 2px rgb(108, 184, 228) solid;
                border-radius: 50px;
                padding: 20px 20px;

            }

            #middle_32 {
                text-align: left;
                font-size: 20px;
            }
        }
    }

    #body {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px 150px;
        gap: 30px;

        #body_1 {
            display: flex;
            flex-direction: column;
            justify-content: left;
            align-items: left;
            gap: 20px;

            #body_11 {
                font-size: 30px;
            }

            #body_12 {
                font-size: 20px;
                font-family: serif;
            }

            #body_13 {
                font-size: 20px;
                color: rgb(176, 171, 171);
            }
        }
    }

    #body_two {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px 150px;
        gap: 30px;

        #body_two2 {
            display: flex;
            flex-direction: column;
            justify-content: left;
            align-items: left;
            gap: 20px;

            #body_t21 {
                font-size: 30px;
            }

            #body_t22 {
                font-size: 20px;
                font-family: serif;
            }

            #body_t23 {
                font-size: 20px;
                color: rgb(176, 171, 171);
            }
        }
    }

    #body_tri {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 20px 150px;
        gap: 30px;

        #body_tri1 {
            display: flex;
            flex-direction: column;
            justify-content: left;
            align-items: left;
            gap: 20px;

            #body_tr1 {
                font-size: 30px;
            }

            #body_tr2 {
                font-size: 20px;
                font-family: serif;
            }

            #body_tr3 {
                font-size: 20px;
                color: rgb(176, 171, 171);
            }
        }
    }

    #below {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        #below_1 {
            font-size: 30px;
            color: gray;
            font-weight: bold;
        }

        #below_2 {
            font-size: 20px;
            color: gray;
        }
    }

    #bottom {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 30px 30px;
        gap: 80px;
    }

    #review {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        background-color: rgb(227, 224, 224);
        padding: 20px 130px;

        #c1 {
            font-size: 25px;
            font-weight: bold;
            font-family: sans-serif;
            color: rgb(93, 88, 88);
        }

        #c2 {
            font-size: 19px;
            color: rgb(171, 167, 167);
        }

        #customers {
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: left;
            gap: 20px;

            #customer1 {
                display: flex;
                flex-direction: row;
                justify-content: left;
                align-items: left;

                #logo {
                    border: 2px rgb(240, 235, 235);
                    padding: 12px 12px;
                    background-color: rgb(240, 235, 235);

                    img {
                        border-radius: 50%;
                    }
                }

                #descript {
                    display: flex;
                    flex-direction: column;
                    justify-content: left;
                    align-items: left;
                    border: 2px white solid;
                    background-color: white;
                    padding: 12px 12px;
                    width: 350px;

                    #about1 {
                        color: rgb(153, 148, 148)
                    }

                    #about2 {
                        display: flex;
                        flex-direction: row;
                        justify-content: left;
                        align-items: left;
                    }
                }
            }

        }


    }

    #end {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        #end1 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            border: 2px white solid;
            background-color: rgb(255, 255, 255) solid;

            #end2 {
                font-size: 30px;
                font-weight: bold;
                font-family: sans-serif;
            }

            #end3 {
                color: rgb(193, 186, 186);
                font-size: 20px;
                width: 350px;
            }

            #subscribe {
                border: 2px skyblue;
                font-size: 15px;
                font-weight: bold;
                color: white;
                background-color: skyblue;
                border-radius: 1px;
                padding: 20px 20px;
                border-radius: 2px;
            }
        }

    }

    #conclusion {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: left;
        background-color: whitesmoke;
        padding: 15px 30px;
        gap: 50px;

        #a1 {
            font-size: 17px;
            width: 450px;
        }

        #a2 {
            font-size: 18px;
            width: 500px;
        }

        #a3 {
            border: 2px rgb(174, 170, 170);
            width: 100px;
            background-color: rgb(184, 179, 179);
            padding: 10px 10px;
        }

    }

}