* {

    box-sizing: border-box;
    /* border: 1px solid black; */
    text-align: center;
    overflow: inherit;
}

.logo-image {
    width: 50%;
    max-width: 90%;
    height: auto;
    display: block;
    /* removes small whitespace under the image in some cases */

}

html {
    height: 100%;
    background-color: blueviolet;
    padding: 0%;
    margin: 0%;
}

/* a:hover{border-style:solid ; border-color: #ffffff;} */

a{color: #ffffff; text-decoration: none;}

/* GRID-START */
#Grid {

    height: 100%;
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: 15% 20% 20% 20% 20% 5%;

    margin: 0%;
    padding: 0%;

}


header {
    grid-row: 1 / 2;
    grid-column: 1 / 7;
    z-index: 1;
}

.logo {
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    grid-row: 1 / 1;
    grid-column: 1 / 1;
    background-color: rgb(0, 0, 0);
    z-index: 2;
    margin-top: -10%;
}

main {
    grid-row: 2 / 5;
    grid-column: 1 / 7;
}

footer {
    grid-row: 5 / 6;
    grid-column: 1 / 7;
}

/* GRID-END */





/* HEADER-START */
header {


    background-color: black;
    color: aliceblue;
}
nav{margin: 5%;}

nav li {
    display: inline-block;
    
    margin: 5px;
    background-color: rgb(38, 38, 38);
    color: rgb(255, 255, 255);
    width: 15%;
    text-align: center;

}
 nav a{color: white; text-decoration: none; width: 100%; display: block;}

nav li:hover {background-color: grey; border-style: solid; border-color: white;  padding: 1px;}

.current-link {
    border-color: white;
    border-style: solid;
    padding: 1px;
}

/* HEADER-END */





/* BODY-STARTS */
body {
    height: 100%;
    background-color: rgb(0, 255, 145);
    padding: 0%;
    margin: 0%;
}

/* BODY-ENDS */





/* MAIN-START */
main {
    color: #ffffff;
    background-image: url('Images/Stripes.jpg');
    /* Replace with your image path */
    background-size: cover;
    /* Scale the image to cover the entire area */
    background-position: center;
    /* Center the image */
    background-repeat: no-repeat;
    /* Prevent the image from repeating */

    /* background-color: red; */
    margin: 0%;
    padding: 0%;
    height: auto;
    padding-bottom: 2rem;


}

hr {margin: 0;
    
}

.intro {
    padding-left: 13%;
    padding-right: 13%;
    font-style: italic
}

#main-content {
    display: flex;
    /* Use flexbox for layout */
    flex-wrap: wrap;
    /* Allow items to wrap to the next line */
    justify-content: center;
    /* Center the items horizontally */





}

#main-content div {

    display: inline-block;
    justify-content: center;
    width: 26%;
    padding: 1%;

    max-height: fit-content;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center items horizontally */
    justify-content: center;
    /* Center items vertically */

}




#main-content img {
    width: 50%;
    height: auto;




}

#main-content p {
    align-self: flex-start;
    /* Align text to the top (left in LTR languages) */


}

/* MAIN-END */





/* FOOTER_STARTS */
footer {

    background-color: rgb(0, 0, 0);
    color: #ffffff;

}

footer nav li {
    display: inline-block;
    margin: 5px;
    background-color: rgb(38, 38, 38);
    color: rgb(255, 255, 255);
    width: 10%;
    text-align: center;


}

hr {
  margin: 0;
}

/* FOOTER_ENDS */