#main-container{
    height:auto;
}

.home-section{
    height:78vh;
}

#who-are-we{
    display:flex;
    align-items: center;
    background-image: url("https://images.pexels.com/photos/356036/pexels-photo-356036.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
    background-repeat:no-repeat;
    background-size: 100%;
    background-position: 20px;
    height:95%;
}

#who-are-we-container{
    display:flex;
    align-items:center;
    margin-left:2%;
    background-color: var(--accent);
    width:60%;
    height:90%;
}

#who-are-we-text{
    display:flex;
    flex-direction: column;
    margin-left:2%;
    width:70%;
    height:95%;
}

#who-are-we-title{
    font-size:40px;
    color:var(--primary);
}

#who-are-we-hr{
    margin:4px 0 20px 0;
    border-style:none;
    border-top:2px solid var(--primary);
    width:60%;
}

#who-are-we-content{
    color:var(--primary);
    margin-left:20px;
}

#utilities{
    display:flex;
    height:90%;
    justify-content:space-around;
}

#utilities-articles{
    display:flex;
    flex-direction: column;
    width:50%;
    height:80%;
    background-color: var(--primary);
}

#articles-title{
    display:flex;
    align-items:center;
    justify-content: space-between;
    margin-left:4%;
    height:10%;
    width:35%;
    font-size:25px;
    color:var(--accent);
}

#articles-icon{
    height:70%;
    aspect-ratio: 1/1;
    background-image: url('../../assets/icons/articles-w-contrast.svg');
}

#articles-hr{
    margin:0 0 0 1%;
    width:40%;
    border:none;
    border-top:2px solid var(--accent)
}

#articles-content{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
p#articles-text{
    margin: 5% 10% 5% 10%;
    color:var(--accent);
}

a#articles-link{
    width:18%;
    height:40px;
    margin-top:15%;
}

button#articles-btn{
    background-color: var(--secondary);
    color:var(--primary);
    border-radius: 10px;
    border: 2px solid var(--accent);
    width:100%;
    height:100%;
}

#utilities-calculator{
    display:flex;
    align-items: center;
    flex-direction: column;
    width:30%;
    height:80%;
    background-color: var(--secondary);
}

#calculator-title{
    display:flex;
    align-items:center;
    justify-content: space-between;
    height:15%;
    width:80%;
    font-size:25px;
    color:var(--primary);
}

#calculator-icon{
    height:70%;
    aspect-ratio: 1/1;
    background-image: url('../../assets/icons/calculator.svg');
    background-repeat: no-repeat;
}

#calculator-hr{
    width:90%;
    margin:0;
    border:none;
    border-top:2px solid var(--primary)
}

#calculator-text{
    width:70%;
    margin-top:10%;
    color:var(--primary);
}

#calculator-link{
    width:25%;
    height:7%;
    margin-top:20%;
}

#calculator-btn{
    background-color: var(--primary);
    color:var(--accent);
    border-radius: 10px;
    width:100%;
    height:100%;
}

#bookings{
    border:2px solid var(--primary);
    height:90%;
    background-color: var(--accent);
}

#bookings-container{
    display:flex;
    width:100%;
    height:80%;
    justify-content: center;
    align-items:center;
}

.bookings-section{
    display:flex;
    align-items: center;
    flex-direction: column;
    width:45%;
    height:70%;
}

#bookings-seperator{
    margin-left:2%;
    border-left:2px solid var(--primary);
    width:2%;
    height:90%;
}

.bookings-section-title{
    display:flex;
    align-items:center;
    justify-content: center;
    height:30%;
    font-size: 25px;
    color:var(--primary);
}

.bookings-section-text{
    font-size: 17px;
    width:60%;
    color:var(--primary);
}

#bookings-link-container{
    display:flex;
    justify-content: center;
    width:100%;
    height:20%;
}

#bookings-link{
    width:8%;
    height:30%;
}

#bookings-btn{
    width:100%;
    height:100%;
    color:var(--primary);
    background-color: var(--secondary);
    border-color:var(--primary)
}