style.css

/* CSS RESET */
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* UTILITY CLASSES */
:root{
    --ff-serif: "Bellefair", serif;
    --ff-sans-cond: "Barlow Condensed", sans-serif;
    --ff-sans-normal: "Barlow", sans-serif;
}
.ff-serif { font-family: var(--ff-serif); } 
.ff-sans-cond { font-family: var(--ff-sans-cond); } 
.ff-sans-normal { font-family: var(--ff-sans-normal); } 
h1{
    font-family: var(--ff-sans-normal);
    font-size: 2rem;
}
p{
    font-family: var(--ff-sans-cond);
    font-size: 1.5rem;
}


/* EVERYTHING ABOUT NAVBAR */
#navbar{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    /* background-color: #d8d8d8;; */
    position: relative;
}

#navbar::before{
    content: "";
   position: absolute;
   background-color: rgb(241, 240, 237);
   height: 100%;
   width: 100%;
   z-index: -1;
   top: 0px;
   left: 0px;
   
}
#navbar ul li a{
    text-decoration: none;
    padding: 15px;
    color:black;
}
#navbar ul li a:hover{
    border-radius: 8px;
    background-color: black;
    color: white;

}
ul{
    display: flex;
    list-style: none;
}

/* LOGO IMAGE */
#logo img{
    height: 50px;
}


/* SECTION HOME */
#home{
    display:flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 400px;
justify-content: center;
text-align: center;
}
#home::before{
    content: "";
    position: absolute;
   background: url("images/bg1.jpg") no-repeat center center/cover;
   opacity: 0.8;
    height: 96%;
    width: 100%;
    z-index: -1;
    top: 0px;
    left: 0px;
}

#services{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* text-align: center; */
}
/* SERVICES SECTION */
.container{
  display: flex;
  align-items: center;
}

.items{
    text-align: center;
    margin: 4px 4px;
    margin: 2px 35px;
    border-radius: 12px;
    border: 2px solid #b76565;
    /* margin: 2px; */
    margin: 17px 16px;
    background-color: #ececec;
}
#services .items img{
    height: 130px;
}

/* OUR SPONSORS */
#sponsors{
    text-align: center;
    position: relative;
    /* height: 11rem; */
}
.sponsor-section{
    display: flex;
    justify-content: center;
}
.sponsor-section div{
    margin: 13px 45px;
}
.sponsor-section img{
    height: 100px;
}

#sponsors::before{
    content: "";
    position: absolute;
    background: url("images/bg2.PNG") no-repeat center center/cover;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: -1;
    opacity: 0.8;

}

#home h1{
    padding-bottom: 5rem;
}