/* Only for debugging */
 
    /* {      
        border: 1px solid #ccc;
        }*/

    /* Custom styles */
    
    @font-face {
        font-family: 'Raleway';
        src: url('/fonts/Raleway-Regular.ttf') format('truetype');
        /* Add additional font variations (e.g., italic, bold) if necessary */
        }
        
    body {
        font-family: 'Raleway', sans-serif; /* Specify Raleway as the font-family */
        margin: 0;
        padding: 0;
        }
    
    h3 {
        margin-top: 48px; /* Adjust margin-top to achieve the desired line height */
        }
    
    .small_font {
        font-size: 0.75em;
        line-height: 0.8;
        }
    
    @media (min-width: 400px) {
        .row {
            display: inline
            }
        }
        
    @media (min-width: 550px) {
        .row {
            display: flex; /* to combine with align-items on wide screens*/
            }
        }

    .navbar, .text-block, .gallery, .footer {
      padding-top: 20px; /* Add padding to the top of each section */
      padding-bottom: 20px; /* Add padding to the bottom of each section */
      margin: 0;
    }
    .navbar {
      background-color: #669930; /* Change background color */
      color: #fff;
      display: flex;
      align-items: center; /* Vertically center the content */
    }
    .navbar .company-name {
      text-align: right;
      flex-grow: 1; /* Allow the company name to take up remaining space */
      font-size: 2.4rem;
    }
    .navbar .company-name div {
      display: inline-block;
      padding: 0 10px;
      line-height: 36px; /* Adjust line height for vertical alignment */
    }
    .navbar .button {
      margin-left: 10px; /* Add margin between language buttons */
      color: #fff; /* Set text color */
    }
    .navbar .button:hover {
      color: #fff; /* Set text color to white on hover */
      background-color: #555; /* Set background color on hover */
    }
    .text-block {
      background-color: #fff /*#f9f9f9*/;
      min-height: calc(100vh - 240px); /* Set minimum height to 100% viewport height minus navbar and footer heights */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .text-block .caption {
      margin-bottom: 24px; /* Add space below the caption */
    }

    .gallery {
      background-color: #eee;
    }
    .footer {
      background-color: #333;
      color: #fff;
    }
    .gallery-item {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 20px; /* Add padding at the bottom of image columns */
    }
    .gallery-item img {
      max-width: 100%;
      height: auto; /* Maintain aspect ratio */
      display: block;
    }
    .ti_green {
      color: #669930; /* Change text color */
    }
    .space-between {
      padding-top: 20px; /* Add padding to the top */
      padding-bottom: 20px; /* Add padding to the bottom */
    }
    
    /* Apply grayscale filter by default to elements with class 'bw-image' */
    .bw-image {
      filter: grayscale(100%);
      transition: filter 0.5s ease; /* Smooth transition for the filter */
    }

    /* Remove grayscale filter on hover or touch for elements with class 'bw-image' */
    .bw-image:hover,
    .bw-image:active {
      filter: none;
    }