/**** Guido FALLENTHEYN @ CONFORMAR  ***/
/************ TABLE OF CONTENTS ***************
1. GLOBAL SETTINGS
2. HEADER
3. NAVIGATION
4. MAIN CONTENT
5. FOOTER
6. COUNTERS
7. Others
8. Others
**********************************************/

/*** GLOBAL SETTINGS ***/
body {
padding-top: 10px; /* Adjust top padding */
background: #fff;
color: #2E2E2E;
font-family: Trebuchet MS, Verdana, Arial;
font-size: 20px;
line-height: 1.5;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
}

h1 {
color: #222;
font-size: 5vw; /* Responsive size based on viewport width */
font-weight: bold;
line-height: 1.5;
}

h2 {
color: #222;
font-size: 1.6rem;
font-weight: bold;
line-height: 1.5;
}

h3 {
color: #222;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.5;
}

h4 {
color: #222;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.5;
}

p {
font-size: 1rem;
text-align: justify;
padding: 8px 0px;
line-height: 1.5;
margin: 0 auto;
}

ul {
margin-left: -20px;
}

ul li {
margin-bottom: 6px;
}

.clear {
clear: both;
}

.centered {
text-align: center;
}

/*** HEADER ***/
header {
width: 85%;
margin: 0 auto; /* Center the header */
}

/*** NAVIGATION ***/
header .logo {
width: 100px !important; /* Adjust logo size */
padding-right: 10px;
height: auto !important;
}

header .h1.h4 {
margin: 0px; /* Remove default margin for a cleaner look */
}

.navbar-nav {
padding: 10px; /* Add some padding to the menu */
}

.list-unstyled a {
padding: 5px 0; /* Add padding to links */
text-decoration: none; /* Remove underline */
}

.list-unstyled a:hover {
text-decoration: underline; /* Add underline on hover */
color: #007bff; /* Bootstrap primary color */
}

.navbar-dark .dropdown-menu {
background-color: #1c5f83; /* Same as the main menu */
}

/* Change the text color of dropdown items to white */
.navbar-dark .dropdown-menu .dropdown-item {
color: white; /* White text */
}

.navbar-dark .dropdown-menu .dropdown-item:hover {
background-color: white; /* white */
color: #1c5f83; /* Change text color to background color on hover */
}

/*** MAIN CONTENT ***/
main {
width: 85% !important; /* Match header width */
margin: 0 auto; /* Center main content */
padding: 0; /* Remove padding if not needed */
text-align: justify;
hyphens: auto;
}

.topbanner {
display: flex;
flex-wrap: wrap; /* Wraps elements to the next line if needed */
background-image: url('/images/top_banner1.jpg');
background-position: center; /* Center the background image */
background-size: cover;
align-items: center; /* Center content vertically */
justify-content: center; /* Center content horizontally */
position: relative;
width: 100%;
height: 150px;
text-align: center;
color: white;
font-size: 40px; /* Increased font size for better readability */
line-height: 1.5; /* Added line height for spacing */
padding: 20px; /* Added padding for breathing room */
margin: auto;
}

/* 3 columns on Home page */
/* Equal height columns using Flexbox */
.row.equal-height {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}

.row.equal-height > .col {
display: flex;
flex-direction: column;
align-items: stretch;
}

/* Style for the content inside each column */
.column-content {
flex-grow: 1;
border: 1px solid #ddd; /* Light gray border */
padding: 10px 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: justify;
height: 100%;
}

.column-content h1 {
font-size: 3vw; /* Responsive size for <h1> in column */
  }
  
  .column-content h3 {
  font-size: 1.4rem !important;
  }
  
  /* Custom background colors for each column */
  .column-1 .column-content {
  background-color: #f4b942; /* Light Orange */
  }
  
  .column-2 .column-content {
  background-color: #4fa3f5; /* Light Blue */
  }
  
  .column-3 .column-content {
  background-color: #71d36d; /* Light Green */
  }
  
  .column-4 .column-content {
  background-color: #F699CD; /* Pale Pink */
  }
  
  .column-5 .column-content {
  background-color: #90d5FF; /* Light Blue */
  }
  
  .column-6 .column-content {
  background-color: #A7BEAE; /* Teal */
  }
  
  .cta-button-wrapper {
  display: block;
  margin: 5px auto 0;
  text-align: center;
  }
  
  .cta-button {
  border: none;
  border-radius: 3em;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  display: inline-block;
  font-size: 1em;
  padding: 5px 20px;
  width: auto;
  background-color: #000;
  color: #fff !important;
  }
  
  /*** CONTACT FORM ***/
  .form-check-input {
  width: 20px;
  height: 20px;
  border: 2px solid black;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 3px;
  position: relative;
  }
  
  .form-check-input:checked {
  background-color: black;
  border-color: black;
  }
  
  .form-check-input::before {
  content: "✔";
  color: white;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  }
  
  .form-check-input:checked::before {
  display: block;
  }
  
  /*** COUNTERS ***/
  .counters {
  display: flex;
  justify-content: center;
  width: 100%;
  }
  
  .counter {
  background: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  flex: 1;
  margin: 10px;
  transition: transform 0.2s;
  }
  
  .counter:hover {
  transform: scale(1.05);
  }
  
  .count {
  font-size: 2em;
  color: #3498db;
  }
  
  .label {
  font-size: 1em;
  color: #555;
  }
  
  .tandc {
  font-size: 0.8em;
  text-align: justify;
  }
  
  
  /*** FOOTER  ***/
  .content-container {
  width: 85%;
  margin: 0 auto;
  font-size: 0.8em;
  }
  
  /*** RESIZING ON SMALL SCREENS ***/
  @media (max-width: 800px) {
  main {
  font-size: 16px;
  }
  
  .topbanner {
  font-size: 30px; /* Increased font size for better readability */
  }
  
  tandc {
  font-size: 0.6em;
  }
  
  header .h1 {
  font-size: 24px;
  }
  
  /* Adjust <h1> font size for small screens */
    h1 {
    font-size: 4rem; /* Fixed size for small screens */
    }
    }