* {
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    margin: auto;
    text-align: center;
}

.coverPhoto {
    padding: 50px;
}

nav {
    width: 100%;
    border-bottom: 5px #33747a solid;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
}

    nav ul {
        width: 100%;
        list-style: none;
        display: flex;
        margin: auto;
        justify-content: center;
        gap: 30px;
        background-color: black;
        color: white;
        padding: 20px;
    }

        nav ul li a i {
            margin-right: 10px;
            color: gray;
        }

        nav ul li a {
            text-decoration: none;
            color: white;
            font-size: 14px;
            padding: 19px 16px;
            letter-spacing: 1px;
        }
            nav ul li a:hover {
                background-color: #FFA500;
                color: white;
            }

.coverPhoto button {
    display: none;
}

@media screen and (max-width:768px) {
    header {
        background-color: #27595d;
    }

    .coverPhoto {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        align-items: center;
    }

        .coverPhoto img {
            width: 150px;
        }

    nav {
        display: none;
    }

    .coverPhoto button {
        background-color: rgba(0, 0, 0, 0.4);
        border: none;
        border-radius: 5px;
        color: white;
        font-weight: 500;
        font-size: 18px;
        display: flex;
        gap: 10px;
        align-items: center;
        padding: 8px;
    }
}

main {
    width: 100%;
    padding: 100px 0;
    background-color: #ffa500;
    display: flex;
    justify-content: center;
    gap: 50px;
}

    main .editorial {
        width: 70%;
        background-color: #f4f4f4;
        border-radius: 5px;
    }

        main .editorial .head {
            padding: 20px;
            border-bottom: 1px solid #949494;
        }

            main .editorial .head p {
                color: #333333;
                font-size: 20px;
            }

        main .editorial .body {
            padding: 20px;
        }

            main .editorial .body ul {
                list-style: none;
                display: flex;
                flex-direction: column;
                gap: 15px;
                margin-top: 20px;
            }

                main .editorial .body ul li {
                    color: #656565;
                    font-size: 18px;
                }

                    main .editorial .body ul li a{
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction:column
                    }

                    main .editorial .body ul li b {
                        margin-top: 15px;
                        font-weight: 900;
                    }

            main .editorial .body .employees {
                margin-top: 100px;
            }

            main .editorial .body .boards {
                display: flex;
                justify-content: space-between;
                border: 1px solid #dddddd;
            }

                main .editorial .body .boards .employee {
                    width: 50%;
                    padding: 10px;
                    border-right: 1px solid #dddddd;
                }

                    main .editorial .body .boards .employee ul {
                        gap: 0;
                        margin-top: 0;
                    }

    main .indexing {
        height: fit-content;
        width: 24%;
        background-color: #f4f4f4;
        border-radius: 10px;
    }

        main .indexing .head {
            padding: 20px;
            border-bottom: 1px solid #949494;
        }

            main .indexing .head p {
                color: #333333;
                font-size: 20px;
            }

        main .indexing .body {
            text-align: center;
            padding: 20px;
            background-color: #fff;
        }

.indexing_imgs {
    width: 100%;
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

}

    .indexing_imgs .indexing_img {
        width: 130px;
        height: 90px;
        /*margin-bottom: 25px;*/
        margin: 15px ;
    }

        .indexing_imgs .indexing_img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

.homeBody {
    display: flex;
    gap: 20px;
    /*justify-content: space-between;*/
}

    .homeBody .img {
        text-align: center;
        padding: 10px 40px;
        width: 45%; 
    }
        .homeBody .img img{
            width: 100%;
        }

    .homeBody .about {
        text-align: center;
         width: 55%; 
    }

        .homeBody .about p {
            padding: 10px 40px;
            text-align: justify;
            line-height: 2;
            font-size: 17px;
            font-weight: 400;
            color: #656565;
        }

.authBody {
    color: #555555;
}

    .authBody h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .authBody p {
        font-size: 14px;
        line-height: 25px;
    }

        .authBody p a {
            color: #33747a;
            text-decoration: none;
        }

.archBody {
    padding: 20px;
}

    .archBody ul {
        list-style: disc !important;
        margin-left: 40px;
    }

        .archBody ul li a {
            text-decoration: none;
            color: #33747a;
        }

.publicBody p {
    font-size: 14px;
    color: #555555;
    line-height: 20px;
}


.publicBody a {
    color: #33747a;
    text-decoration: none;
}

@media screen and (max-width:767px) {
    main {
        gap: 20px;
        display: flex;
        flex-wrap: wrap !important;
    }

        main .indexing {
            padding: 20px 0;
            /* height: 110vh; */
        }

            main .indexing .body {
                text-align: center;
                padding: 5px;
            }

                main .indexing .body .second {
                    flex-direction: column;
                }

                main .indexing .body img {
                    width: 100%;
                }

    .homeBody {
        display: flex;
        flex-wrap: wrap;
    }
}

footer {
    display: flex;
    justify-content: space-between;
    background-color: black;
    padding: 30px 50px;
}

    footer .leftFoot ul {
        display: flex;
        list-style: none;
        gap: 15px;
    }

        footer .leftFoot ul li a {
            color: #656565;
            text-decoration: none;
            transition: .5s;
            font-size: 14px;
        }

            footer .leftFoot ul li a:hover {
                color: #33747a;
            }

    footer .rightFoot p {
        color: #656565;
        font-size: 14px;
    }

        footer .rightFoot p a {
            color: #33747a;
            text-decoration: none;
        }