/* ------------------------------------------------------ */
/* Index page/home */
/* ------------------------------------------------------ */

.acess .container { position: absolute; left: 20px; }
.acess .large-text { font-size: 1.5em; }
.acess .high-contrast { background: #000; color: #fff; }


.jumbotron{
    margin: 150px;
}
   

.ParentContainer{
    display: flex;
    justify-content: space-between; /* Adjusts spacing between child elements */
    align-items: center; /* Aligns all items vertically on the same row */
    height: 100px; /* Set height of the row */
    width: 100%; /* Ensures the parent container spans the full width */

}


.AboutUs .offer .values{
    flex: 1; /* Distribute space evenly among the sections */
    text-align: center; /* Center the text within each section */
    border: 1px solid black; /* Optional: adds a border to visualize */
    padding: 10px; /* Optional: adds some space inside the boxes */


}
/* 
.offer{
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
}

.values{
   
    display: flex;
    justify-content: right;
    align-items: right; 
    height: 100px; 
   
}
 */






/* ------------------------------------------------------ */
/* background  */
/* ------------------------------------------------------ */

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}
.container {
    display: flex;
    justify-content: right; /* Aligns all items vertically on the same row */
    align-items: right; 
}

.bg_img {
    position: absolute;
    bottom: 60px; /* Positions the image at the bottom */
    left: 0; /* Positions the image in the bottom-left corner */
    width: 50%;
}

.bg_img_2 {
    position: absolute;
    bottom: 60px; /* Positions the image at the bottom */
    right: 0; /* Positions the image in the bottom-right corner */
    width: 55%;
}

/* ------------------------------------------------------ */
/* Navigation bar */
/* ------------------------------------------------------ */
.Logo img {
    width: 275px;
    height: 135px;
    position: absolute;
    top: 2px;
    right: 2px;
    
}

nav a.nav-link {
    margin-right: 35px; /* Adds space to the right of each link */
    margin-bottom: 20px;
    margin-top: 20px;

    font-size: 22px; /* changes font size */
    text-align: center;
}

.navbar {
    box-shadow: 0 4px 2px -2px grey; /* Creates a shadow effect */
  }

/* ------------------------------------------------------ */
/* Register and login */
/* ------------------------------------------------------ */
.Register-header {
    text-align: center; /* Moves header to the center */

}

.Login-header {
    text-align: center; /* Moves header to the center */
}

/* ------------------------------------------------------ */
/* Bookings page */
/* ------------------------------------------------------ */
.BookingForm{
    width: 20%;
    padding-left: 2%;
    padding-top: 5%;
  
    
}
.service_booking{
    text-align: center;
    padding-top: 5px;
}

.mb-3 {
    padding-left: 30px;
    padding-right: 30px;
}
.inputFields input {
    margin: 10px;
}

.inputFields label{
    align-items: center;

}
#bookBtn {
    align-content: center;
}

table {
    width: 100%;
    border-collapse: collapse;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 8px;
    text-align: left;

}

.book_form{
    width: 20%;
    margin-left: 2%;
    margin-top: 5%;  
    background-color: #d0f2d0; 
    border-radius: 20px;
    align-content: center;
}

.bookBtn{
    display: flex;
    justify-content: center;
    align-items: center; 
    margin-left: 150px;
    margin-bottom: 30px;
}

.squareBooking{
    background-color: #d0f2d0;
    width: 1000px;
    height: 650px;
    position: fixed;
    right: 200px;
    top: 225px;
    border-radius: 10px;
    
}

.squareBooking h2{
    
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
}

.squareBooking p{
    margin: 30px;
    font-size: large;
}

.squareBooking h3{

    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
}
.SquareTextBooking {
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
}

.squareHeaderBooking h2{
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
}

.informationLinkBooking{
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
}
/* ------------------------------------------------------ */
/* Carbon calculator page */
/* ------------------------------------------------------ */
.CarbonCalc{
    width: 20%;
    margin-left: 2%;
    margin-top: 5%;  
    background-color: #d0f2d0; 
    border-radius: 20px;
    align-content: center;
}

.CarbonCalc legend{
    margin: 30px;
    margin-left: 14%;
}

.square {
    background-color: #d0f2d0;
    width: 1000px;
    height: 700px;
    position: absolute;
    right: 50px; /* positions the div on the right edge of the page */
    top: 200px;
    border-radius: 10px;
  }

.square h2{
    
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px;
}

.square p{
    margin: 30px;
    font-size: large;
    position:relative;
}

.carbonResult{
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
    border: 1px solid black;
    position:relative;
}

.square h3{

    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
    position:relative;
}

.informationLink{
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
    position:relative;;
}

.calcBtn{
    display: flex;
    justify-content: center;
    align-items: center; 
    height: 100px; 
    position:relative;
}