@import url('https://fonts.googleapis.com/css2?family=GFS+Neohellenic:ital,wght@0,400;0,700;1,400;1,700&display=swap');
    
    body {
      font-family: 'GFS Neohellenic', 'Times New Roman', Times, serif;
      font-weight: 700;
    }
    
  

    /* Basic navbar styles */
    .navbar {
      background-color: #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 25px;
      border-bottom: 2px solid #ccc;
      border-left: 2px solid #ccc;
      border-right: 2px solid #ccc;
      position: sticky;
      top: 0;
      margin-bottom: -2px;
      height: 30px;
      
    }
article {
  display: flex;
  width: 100%;
  flex-wrap: wrap; /* Ensures elements wrap on smaller screens */
}
.grid-container, aside {
  flex: 1 1 50%; /* Each takes up 50% of the available width */
  box-sizing: border-box; /* Includes padding and border in the element's total width */
  padding: 0px; /* Adjust padding as needed */
}
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal-width columns */
  grid-template-rows: auto; /* Single row, height based on content */
  gap: 0px; /* Adjust gap between columns if needed */
  align-items: center;

}

.grid-item {
  padding: 0px; /* Adjust padding as needed */
  border: 1px solid #ffffff; /* Optional: adds a border around grid items */
}

/* Optional: additional styling for individual items */
.item1 {
  background-color: #ffffff; /* Light gray background for the first item */
  padding-left: 5px;
}

.item2 {
  background-color: #ffffff; /* Slightly darker gray for the second item */
  padding-left: 5px;
}
    .logo {
      display: block;
      text-decoration: none;
      color: #333;
      padding-top: 0px;
    }
    #title_big {
      text-align: left;
      font-size: 3vw;
      
    }
    #title_top {
      text-align: left;
      font-size: 12pt;
      
    }
    .containerh1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 268px;
}
#pic_center{
  text-align: center;
  padding-left: 0px;
  width: 100%;
}
    .menu {
      display: flex;
      font-size: 16pt;
        font-weight: 700;
    }

    .menu a {
      margin-right: 1rem;
      text-decoration: none;
      color: #333;
    }

    .menu a:hover {
      color: #000;
    }

    /* Hamburger menu button styles */
    .menu-toggle {
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      display: none;
      flex-direction: column;
      justify-content: space-around;
      height: 35px; /* Adjust height to increase clickable area */
  width: 35px; /* Adjust width to increase clickable area */
  align-items: center; /* Center the bars */
  outline: none; /* Remove the default outline */
  -webkit-tap-highlight-color: transparent;
    }

    .menu-toggle .bar  {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    border: 1px solid #000000; /* Add a white border */
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: #101010;
}

    /* Styles for the X transition */
    .menu-toggle.toggle .bar1 {
      transform: translateY(11px) rotate(45deg);
      transition: transform 0.3s ease-in-out;
      transform-origin: 47%;
      
    }

    .menu-toggle.toggle .bar2 {
      opacity: 0;
      transition: opacity 0.2s ease-in-out;
    }

    .menu-toggle.toggle .bar3 {
      transform: translateY(-11px) rotate(-45deg);
      transition: transform 0.3s ease-in-out;
     
    }
  


   

    .text-content {
      line-height: 0px;
      margin-left: -15px;
      padding-left: 0px;
    }

    .container {
      display: flex;
      align-items: center;
    }

    

    .spacing_row {
      margin-top: 0;
      margin-bottom: 15px;
      padding: 0;
      border: 0;
    }

    #footer_center {
      text-align: center;
      font-size: 18pt;
      line-height: .75;
    }

  .font_size {
    font-size: 16pt;
    font-weight: 700;
    line-height: 1.2;
  }
  h3 {
    font-size: 16pt;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0px;
    margin-top: 0px;
  }
  
    .grid-container {
            display: grid;
            grid-template-columns: 1fr 1fr; /* Two columns, equal width */
            gap: 20px; /* Gap between columns */
            
            padding-left: 0px;
            padding-right: 0px;
            align-items: start; /* Align items to the start of the row */
        }
        .image-container {
    grid-column: 1 / span 2; /* Span across both columns */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%; /* Ensure it takes up full width of the grid column */
}
        .image-container img {
            width: 100%;
            height: auto;
            max-width: 500px; /* Limit the maximum width of the image */
        }
        .styled-btn {
  background-color: #1450AA; /* Green background color */
  color: white; /* White text color */
  padding: 10px 20px; /* Add some padding */
  border: none; /* Remove default border */
  border-radius: 5px; /* Add rounded corners */
  font-size: 16pt; /* Adjust font size */
  cursor: pointer; /* Indicate clickable behavior */
  transition: background-color 0.3s ease-in-out; /* Smooth hover effect */
  text-decoration: none;
      font-weight: 700;
      line-height: 20px;
      font-style: normal;
      font-family:'GFS Neohellenic','Times New Roman', Times, serif;
}

/* Add hover effect to change background color slightly */
.styled-btn:hover {
  background-color: #ffffc1;
  color: rgb(0, 0, 0); /* black text color */
}
       
#button {
 display: block;
  margin-top: 15px;
  margin-left: 20px; /* Align to the left */
}
#text_big {
  font-size: 22pt;
  font-weight: 700;
  padding-top: 5px;
  padding-left: 20px;
  padding-right: 20px;
  
}    
.text_main {
  padding-left: 20px;
  padding-right: 20px;
  font-size: 16pt;
}

.text_main h2 {
  font-size: 16pt; /* Ensure this matches .text_main's font size */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  
}

h2 {
  font-size: 24pt; /* Ensure this is consistent across your site */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  
}
#header_text {
    padding-top: 10px;
    padding-bottom: 10px;
}
    .spacing_row3 {
        margin-top: 0;
      margin-bottom: 1px;
      padding: 0;
      border: 0;

    }

  #web_design {
    text-align: center;  
    margin-top: -10px;
   }
   #bottom_text {
        font-size:24pt;
        padding-left: 0PX;
       
      }
     
    /* Responsive Styles (for screens below 768px) */
    @media only screen and (max-width: 768px) {
      body {
margin: 5px;
      }
        .navbar {
        flex-direction: row;
        height: 30px;
      }
.grid2 {
  max-width: 500px;
}

      .menu {
        position: absolute;
        right: -2px;
        top: calc(100%);
        flex-direction: column;
        text-align: right;
        width: fit-content;
        box-sizing: border-box;
        margin: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.3s ease-out;
        opacity: 0;
        background-color: #eee;
        background-color: #eee; /* Match navbar background color */
        border: 0px solid #ccc; /* Add border to match navbar */
        border-top: none; /* Remove top border to connect with navbar */
        cursor: auto;
        user-select: none;
        border-left: 2px solid #ccc;
        border-right: 2px solid #ccc;
        border-bottom: 2px solid #ccc;
        font-size: 16pt;
        font-weight: 700;
        
      }

      .menu a {
        margin-right: 0;
        margin-bottom: 1rem;
      }

      .menu-toggle {
        display: flex;
        padding: 15px;
        justify-content: center;
        align-items: center;
        user-select: none;
      }

      .show-menu .menu {
        max-height: 200px;
        opacity: 1;
      }

      .grid-container {
                grid-template-columns: 1fr; /* One column */
                grid-template-rows: auto; /* Auto rows */
            }

    }
    
    @media only screen and (max-width: 480px) {
      #bottom_text {
        font-size: 20pt;
        padding-left: 0PX;
       
      }
      #title_top {
      text-align: left;
      font-size: 3vw;
      
    }
    h2 {
  font-size: 8vw; /* Ensure this is consistent across your site */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  
}
    }
      @media only screen and (max-width: 319px) {
        .flex-container {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100%; /* Full width of the screen */
}

#bottom_text {
  font-size: 20pt;
  
  padding-left: 0px;
  flex-grow: 1; /* Allow #bottom_text to grow and fill available space */
  text-align: center; /* Center text horizontally */
}
@media only screen and (min-width: 0px) and (max-width: 319px) {
.navbar 
{width: 100vw; /* Full viewport width */
    
}
   article {
    width: 100%;
    min-width: 319px;
   }
#bottom_text {
    font-size: 10vw; 
}
    }
  }