html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
}

body {
  font-family: 'Roboto', sans-serif;
}

a.navbar-brand {
    display: inline-block;
    position: relative;
}

#mainNav .navbar-nav .nav-item .nav-link.active {
    color: black;
}

#mainNav .navbar-nav .nav-item .nav-link {
    color: #255c9f; font-weight: bolder; font-size: calc(0.9rem + 0.2vw);
    }
}

.bi {
    color: #255c9f; font-weight: bolder;
}

.footercolour {
    color: #255c9f; font-weight: bolder;
}


/* CSS to make all SVG icons blue */
svg {
    color:  #255c9f;
}

/* Media query to hide the logo when the viewport is below 768px */
@media (max-width: 1100px) {
    .brand-logo {
        display: none;
    }
}

/* Fixed blue bar at the top with custom color */
    .top-bar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100; /* Ensures it stays on top */
      background-color: #255c9f !important; /* Custom blue color */
      color: white; /* Ensure the text is white */
      display: flex;
      align-items: center; /* Vertically center the text */
      justify-content: center; /* Horizontally center the text */
      height: 50px; /* Increase the height of the bar */
      padding: 0; /* Remove any additional padding */
      font-size: calc(0.625rem + 0.2vw);
    }


  /* Set the default link color and remove underline */
.top-bar-link a {
  color: white !important;  /* Ensure the link is always white */
  text-decoration: none !important;  /* Remove underline */
}

/* Prevent color change and underline on hover */
.top-bar-link a:hover {
  color: white !important;  /* Keep it white on hover */
  text-decoration: none !important;  /* Keep no underline on hover */
}

/* Prevent color change and underline on active (click) */
.top-bar-link a:active {
  color: white !important;  /* Keep it white when clicked */
  text-decoration: none !important;  /* Keep no underline when clicked */
}



    /* Apply glass effect to navbar */
    .navbar-glass {
      backdrop-filter: blur(10px);
      background-color: rgba(255, 255, 255, 0.2); /* Adjust opacity for glass effect */
    }

    /* Ensure navbar is pushed down by the top bar */
    .navbar-container {
      margin-top: 50px; /* Match the height of the fixed top bar */
    }

    /* Prevent content from being covered by the fixed bar */
    body {
      padding-top: 60px; /* Match the height of the fixed top bar */
    }


    .display-1 {
    font-size: calc(2.625rem + 5.5vw);
    font-weight: 500;
    line-height: 1.2;
}

    .display-2 {
    font-size: calc(1.625rem + 3.5vw);
    font-weight: 300;
    line-height: 1.2;
}


 .hero-image {
            position: relative; /* Set relative positioning to position the dark overlay */
            background-color: #ccc; /* Placeholder color */
            background-image: url('../assets/img/hero_image.jpg'); /* Placeholder image URL */
            background-size: cover;
            background-position: center;
            height: 100vh; /* Full screen height */
            color: white; /* Text color */
        }
        
        /* Darken the hero image with a semi-transparent overlay */
        .hero-image::before {
            content: ''; /* Empty content for the pseudo-element */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.15); /* Dark overlay with slight transparency */
            z-index: 0; /* Place the overlay above the image */
        }

   /* Text positioning */
.hero-text {
    position: relative;  /* Change to relative for normal flow positioning */
    top: 0;
    left: 0;
    padding: 50px 0;  /* Adjust padding for spacing */
    text-align: left;  /* Center the text */
    color: white;  /* Set the text color to ensure visibility */
    z-index: 2;  /* Make sure text is above overlays */
}

/* Button styling */
.btn-custom {
    background-color: white; /* White background */
    color: #255c9f; /* Blue text */
    border-radius: 0; /* Rectangular edges */
    padding: 12px 24px; /* Adjust padding for rectangular shape */
    font-size: 1.25rem; /* Font size */
}

.btn-custom:hover {
    background-color: #255c9f; /* Blue background on hover */
    color: white; /* White text on hover */
    border-color: #255c9f; /* Blue border on hover */
}

/* Button styling */
.btn-custom-blue {
    background-color: #255c9f; /* White background */
    color: white; /* Blue text */
    border-radius: 0; /* Rectangular edges */
    padding: 12px 24px; /* Adjust padding for rectangular shape */
    font-size: 1.25rem; /* Font size */
}

.btn-custom-blue:hover {
    background-color: grey; /* Blue background on hover */
    color: black; /* White text on hover */
    border-color: #255c9f; /* Blue border on hover */
}


.h1370 {
  font-weight: 400; /* Normal weight (default font weight) */
}

.greybg {background-color: #dfe7f1;}


/* UL an LI customizations for bullets and arrow */
.liststyle{
  padding-left: 2rem;
  list-style-type: none;
  padding-top: 1rem;
}

.ulright .liright {


      margin-bottom: 15px; /* Space between items */
      padding-left: 30px;  /* Padding to make room for the custom bullet image */
      font-size: 18px;     /* Increase font size */
      line-height: 1.6;    /* Adjust line height to keep text well-spaced */
      background-image: url('../assets/img/rightbullet.png'); /* Replace with your bullet image */
      background-repeat: no-repeat;
      background-position: left center;
      background-size: 20px 20px; /* Adjust size of the custom bullet image */
}


/* Gallery Styles */

  .thumbnail-container {
      position: relative;
      width: 100%;
      aspect-ratio: 1; /* This ensures the container is always square */
      overflow: hidden;
    }

    .thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover; /* Ensure the image covers the entire square */
      cursor: pointer;
    }



   /* Form Styles */ 

 /* Apply uppercase to all form fields */
    .form-control {
      border: 3px solid #255c9f; /* Thicker border with color #255c9f */
      border-radius: 0px; /* Sharp edges */
      text-transform: none; /* Remove uppercase for user input */
    }

    .form-control:focus {
      border-color: #255c9f;
      box-shadow: 0 0 5px rgba(37, 92, 159, 0.5); /* Slight shadow effect */
    }

    /* Submit button */
    .btn-primary {
      background-color: #255c9f; /* Button color #255c9f */
      border-color: #255c9f; /* Button border color */
      border-radius: 0px; /* Sharp edges */
      text-transform: uppercase; /* Uppercase text in the button */
    }

    .btn-primary:hover {
      background-color: #1d4a7d; /* Slightly darker shade for hover effect */
      border-color: #1d4a7d;
    }

    /* Form container */
    .form-container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
      background-color: #dfe7f1; /* Background color */
      border-radius: 10px;
    }

    /* Floating label styles */
    .form-floating > .form-control:focus {
      z-index: 3;
      border-color: #255c9f;
      box-shadow: 0 0 5px rgba(37, 92, 159, 0.5);
    }

    .form-floating .form-label {
      color: #255c9f;
      text-align: center; /* Center the label inside the form fields */
      display: flex;
      align-items: center; /* Vertically center the label */
      text-transform: uppercase; /* Make the label text uppercase */
    }

    /* Row styling */
    .row > .col {
      padding-left: 0;
      padding-right: 0;
    }

    /* Adjust width of the button */
    .btn-primary {
      display: inline-block;
      padding: 10px 20px;
    }

    /* Message field alignment and style */
    .form-floating.textarea {
      width: 100%; /* Ensure message field spans the full width */
    }

    /* Add space between rows (increased by 20%) */
    .mb-3 {
      margin-bottom: 1.2rem !important; /* Increased spacing by 20% */
    }

    /* Fix the alignment issue with the message field */
    .form-floating .form-control {
      width: 100%; /* Ensure message field spans the full width and aligns with the above fields */
    }

    /* Remove default spacing for row columns to ensure better alignment */
    .row .col {
      padding: 0 8px;
    }

    /* Added vertical space between message field and submit button */
    .form-container .mb-3:last-child {
      margin-bottom: 2rem; /* Increase the space between message field and button */
    }

    /* Ensure 5 rows for message field */
    #message {
      height: auto;
      min-height: 120px; /* Ensure at least 5 rows are visible */
    }



    /* MAP STUFF  */


 /* Style for the map container to cover full width */
    #map {
      width: 100%;
      height: 500px; /* Adjust height as needed */
    }


.resize-svg {
  width: 75px;  /* Change this value to your preferred width */
  height: 75px; /* Change this value to your preferred height */
}