/* Layout Properties */
body { 
    top:0%;
    margin: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden; /* Prevents horizontal scrolling */
}
.message-1 {
    display: flex;
    position: fixed;
    top:1%;
    left:10px;
    margin:auto;
    width: 80%;
    font-size:12px;
    z-index: 30;

}
.background-container-1{
    position: fixed;
    width: 100%; /* Full width */
    height: 100%;
    /*height: 50vh; /* Set the visible height (adjust as needed) */
    /*overflow: hidden;  Hide parts of the image outside the container */
    overflow-x: hidden;
    overflow: hidden;
    /*background: url('/img/180719_PowerAg_002-2x.png') repeat;*/
    background-size: auto; /* Keep the original size of the image */
    /*background-position: 50% 50%; /* Adjust this to crop the top or show specific parts */
    opacity: 0.74;
}
/*.background-1 {
    position: relative;
    width: 100%; /* Keep it full width 
    height: 100%; /* Set the visible height *//*
    background: url('/img/180719_PowerAg_002-2x.png') no-repeat;
    background-size: auto; /* Keeps the image size intact *//*
    background-position: 0 -2px; /* Adjust the view by moving the image's position *//*
    opacity: 0.74;
} */
.logo-1 { 
    /* Layout Properties */
    position:absolute;
    top: 5%;
    width: 25%;
    left: 18%;
    /*width: 481px;
    height: 257px;
    /* UI Properties */
    background-position: 50% 50%;
    background: transparent url('/img/COCH_AG_LOGO_HD-NB-white.png');
    background-size: contain;
    opacity: 1;
    z-index: 20;
}
#navbar {
    /* Layout Properties */
    position: -webkit-sticky;
    position: sticky;
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-size: 24px;
    top:2%;
    right:2%;
    float:right;
    z-index: 1;
    /*width: 401px;
    top: 133px;
    height: 29px;*/
}
/*.top-block {
    top:600px;bottom: 0px;/*left:0px;right:0px;*/ /*
    position:relative;
    max-width: 100%;
} */

.top-block {
    position: absolute;
    top: calc(100% - 50vh);
    margin:auto;
    overflow-x:hidden;
    overflow-y:hidden;
    width: 100%; /* Set to viewport width for full screen width */
    left: 0; /*Start from the very left of the screen */
    background:linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.8));
    right: 0; /* Extend to the very right of the screen */
    /*box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.container {
    display: flex;
    position:relative;
    left:0px;
    margin:auto;
    width:70%;
    flex-direction: column;
    align-items: center; /* Centers each div horizontally */
}

.top-div, .bottom-div {
    text-align: center; /* Centers text inside each div */
    font-size: 24px;
    font-family: "Montserrat";
    font-weight: bold;
    padding:50px;
    width: 100%; /* Ensures div spans full width */
    max-width: 800px; /* Optional: controls width for a more focused alignment */
}

.text-box-1 {
    text-align: center;
    margin: auto;
    width: 90%;
    font-size: 36px;
    font-family: "Montserrat";
    font-weight: bold;
    /*border: 15px;*/
    /*background: linear-gradient(#00000029,#404033F7);*/
    padding: 10px;
    /*margin: 20px;*/
  }
  .text-box-2 {
    text-align: center;
    margin: auto;
    width: 90%;
    font-size: 36px;
    font-family: "Montserrat";
    font-weight: bold;
    /*border: 15px;*/
    /*background: linear-gradient(#00000029,#404033F7);*/
    padding: 10px;
    /*margin: 20px;*/
  }
.lower-block {
    position: relative;
    bottom: 0;
    width: 90%;
    padding:5%;
    margin:auto;
   /*background:linear-gradient(rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.8));*/
    opacity: 100%;
}
.box {
    position: relative;
    top: 160px;
    left: 8%;
    width:100%;
    /*height:817px;*/
    display: flex;
    flex-direction: column;
    vertical-align: left;
    z-index: 20; /*ensure text in this box is on top*/
}
.box div {
    font-family: "Montserrat",sans-serif;
    font-size: 36px;
    font-weight: bold;
    margin: 12px;
}
.image-container {
    display: grid; /* Use grid layout for alignment */
    grid-template-columns: repeat(3, 1fr); /* Three columns, equally sized */
    grid-auto-rows: auto; /* Rows adjust to image size */
    gap: 20px; /* Add space between grid items */
    justify-content: center; /* Center the grid horizontally */
    margin: 20px;
}

.responsive-image {
    width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    max-width: 521px; /* Limit image size to original dimensions */
}

.rounded-image {
    border-radius: 5%; /* Creates a perfect circle */
    overflow: hidden;
    width: 100%;
    max-width: 521px; /* Ensure width and height are equal */
    height: auto; /* Ensure width and height are equal */
}
.image-item {
    display: flex;
    flex-direction: column; /* Stack image and caption vertically */
    align-items: center; /* Center-align content */
    text-align: center; /* Center-align the caption text */
}
.image-caption {
    margin-top: 10px; /* Space between image and text */
    color: #333; /* Text color */
    font-size: 24px;
    font-family: "Montserrat";
    font-weight: bold;
}
/* Media query for smaller screens */

.vertical-image {
    width: 521px; /* Set fixed width for the images */
    height: 358px; /* Maintain the specified height */
    margin-bottom: 20px; /* Add spacing between the images */
}
.position-absolute {
    position: absolute;
}
.position-fixed {
    position: fixed;
}
.footer-item {
    display: grid;
    width:100%;
    margin: 0; /* Remove unwanted margin */
    padding: 0; /* Remove unwanted padding */
    flex-direction: column; /* Stack image and caption vertically */
    align-items: center; /* Center-align content */
    text-align: center; /* Center-align the caption text */
}

.footer {
    position:relative;
    bottom: 0;
    width:100%;
    padding:5%;
    display: grid; /* Use grid layout for alignment */
    grid-template-columns: repeat(4, 1fr); /* Three columns for larger screens */
    gap: 10px; /* Add spacing between grid items */
    background-color: #f4f4f4; /* Light gray background */
    color: #333; /* Text color */
    text-align: center; /* Center-align the text */
    font-family: Montserrat;
}

.social-icon {
    width: 20px; /* Adjusted size for better alignment */
    height: 20px; /* Matches the size of the text */
    vertical-align: center; /* Ensures the icon aligns with the text baseline */
}

@media screen and (max-width: 768px) {
    .image-container {
        grid-template-columns: 1fr; /* Switch to single-column layout */
        gap: 10px; /* Reduce spacing for smaller sreens */
        left:0;
        right:0;
    }
    .footer {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        text-align: center; /* Keep text centered */
        padding:0%;
        padding-top:5%;
        padding-bottom:5%;
    }

}