/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap');

/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  text-align: left; /* Align text to the left for better readability */
  background-color: #f9f9f9;
  font-family: 'Roboto', sans-serif; /* Body text font */
  font-size: 16px; /* Base font size */
  line-height: 1.6; /* Line height for readability */
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#pagewidth {
  max-width: 1000px;
  min-width: 500px;
  margin: 50px auto; /* Center the container, but contents left-aligned */
  background-image: url('../images/bg_image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  border: 3px solid #00125C;
  overflow: hidden;
  padding: 20px;
  position: relative; /* For child elements positioning */
  color: #333; /* Text color */
}

/* Navigation */
nav {
  margin: 20px 0;
  background-color: rgba(0, 18, 92, 0.8); /* Semi-transparent */
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
  margin: 0 15px;
}

/* Menu Links */
nav ul li a {
  color: white; /* Original text color */
  text-decoration: none;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif; /* Heading font */
  font-size: 1rem;
  padding: 10px; /* Add some padding for better click area */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
  border-radius: 5px; /* Add rounded corners */
}

nav ul li a:hover {
  color: #FFD700; /* Change to a contrasting color, like gold */
  background-color: rgba(255, 255, 255, 0.2); /* Light background on hover */
  border-radius: 5px; /* Ensure the hover state also has rounded corners */
}

/* Other Links */
a {
  color: #0056b3; /* Default link color */
  text-decoration: none;
  transition: color 0.3s ease; /* Smooth transition */
}

a:hover {
  background-color: #00125C; /* Dark blue background for contrast */
  color: #FFD700; /* Gold text on hover for better visibility */
  text-shadow: none; /* Remove shadow */
}

/* General reset for sections */
.content-section {
  margin: 0; /* Remove margins around sections */
  padding: 0; /* Remove padding for a cleaner look */
}

/* Parent container for logo and h1 */
.header {
  display: flex;
  align-items: flex-start; /* Align logo and first line at the top */
  flex-wrap: nowrap; /* Prevent wrapping so the first line stays next to the logo */
  margin-bottom: 20px; /* Space between content and sections below */
}

/* Logo styling */
.logo-image {
  margin-right: 20px; /* Space between logo and the heading */
  width: auto; /* Maintain logo aspect ratio */
  height: 100px; /* Adjust logo height to fit */
}

/* Container for text lines */
.header-text {
  display: flex; /* Create a flex container for lines */
  flex-direction: column; /* Stack lines vertically */
  justify-content: center;
  height: 100px; /* Set height to match logo for alignment */
}

/* First line of the h1 aligned with the logo */
.header .line-one {
  font-size: 2.5rem; /* Larger font size for first line */
  color: #00125C; /* Example color */
  font-weight: bold;
  margin: 0; /* No margin */
  line-height: 1; /* Adjust line-height for better alignment */
}

/* Second line aligned below the first line */
.header .line-two {
  font-size: 1.7rem; /* Smaller font size for second line */
  color: #C6A357; /* Example color */
  font-weight: normal;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  margin: 0; /* No margin */
  margin-top: 15px; /* Space between the first and second lines */
  line-height: 1; /* Adjust line-height for better alignment */
}

/* Adjust tagline */
.tagline {
    margin-top: 5px; /* Space above tagline */
    margin-left: -10px; /* Pull tagline slightly to the left */
}

.tagline .tagline-text {
    display: block; /* Ensure the lines stack normally */
    text-align: left; /* Align the text to the left */
}

.tagline .line-one {
    font-family: 'Montserrat', sans-serif; /* Match with h1 */
    font-size: 1.8rem; /* Increase font size for more visibility */
    font-style: italic; /* Keep it italic for emphasis */
    font-weight: bold; /* Keep it bold */
    color: #C6A357; /* Gold color for consistency */
    letter-spacing: 0.05em; /* Slightly increase letter spacing */
    margin-top: 10px; /* Add more space above */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    line-height: 1.4; /* Adjust line height for readability */
    padding: 10px; /* Add padding to give it breathing room */
}

.tagline .line-two {
    color: #00125C; /* Normal text color */
    font-weight: normal; /* Regular weight */
    margin-top: 5px; /* Space between first and second lines */
	padding-left: 12px; /* Adjust padding to move the second line to the right */
    text-align: left; /* Keep left-aligned */
}

/* Section Styles */
.content-section {
  padding: 20px; /* Reduced padding for better flow */
  background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent for contrast */
  margin: 20px 0;
  border-radius: 8px; /* Rounded corners for sections */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Paragraph and List Styles */
p {
  margin-bottom: 1em; /* Adds space below each paragraph */
}

ul, ol {
  margin-bottom: 1.5em; /* Adds space below each list */
  padding-left: 20px; /* Indents the list for readability */
}

li {
  margin-bottom: 0.5em; /* Adds space between list items */
}

.flex-container {
  display: flex; /* Use flexbox for layout */
  align-items: flex-start; /* Align items at the start */
}

.text-content {
  flex: 1; /* Allow text content to take the remaining space */
}

/* Owner Image Container */
.owner-image {
  text-align: center; /* Center the image and caption */
  margin-top: 20px; /* Add space above the image */
  float: right; /* Keep the image floating to the right */
  margin-left: 30px; /* Add padding/space on the left side */
}

/* Owner Image Caption */
.image-caption {
  font-size: 1rem; /* Adjust font size */
  font-style: italic; /* Make it italic for distinction */
  color: #333; /* Dark gray text for contrast */
  margin-top: 5px; /* Space between image and caption */
  clear: both; /* Prevent text from wrapping beside the image */
  text-align: center; /* Center the caption text */
  line-height: 1.4; /* Improve readability */
  max-width: 250px; /* Set a maximum width for the caption */
  margin-left: auto; /* Center the caption under the image */
  margin-right: auto; /* Center the caption under the image */
}

/* Right-Aligned Image Styles */
.photoBorderRight {
  display: block; /* Make sure the image behaves as a block */
  margin: 20px 0; /* Add margin for spacing */
  float: right; /* Align the image to the right */
  border: 3px solid #C6A357; /* Gold border for the image */
  border-radius: 10px; /* Slightly rounded corners */
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  width: 300px; /* Fixed width */
  height: auto; /* Maintain aspect ratio */
}

.section {
  margin-bottom: 20px; /* Space between sections */
}

/* Section Title Style */
.section-title {
  font-size: 1.5rem; /* Slightly smaller than h2 */
  color: #00125C; /* Consistent with your color scheme */
  font-weight: bold; /* Make it bold for emphasis */
  margin: 1em 0 0.5em; /* Space above and below */
  border-bottom: 2px solid #C6A357; /* Optional underline for distinction */
}

/* General Paragraph Style */
.text-content p {
  font-size: 1rem; /* Regular font size */
  line-height: 1.6; /* Improve readability */
  margin-bottom: 1em; /* Space below paragraphs */
  color: #333; /* Default text color */
}

/* Adjusting h2 for better separation */
h2 {
  font-size: 2rem; /* Keep h2 larger for visibility */
  color: #00125C; /* Consistent with your color scheme */
  margin-bottom: 0.5em; /* Space below h2 */
}

/* Styling the Contact Section */
.contact-info {
  text-align: left; /* Align text to the left */
  font-size: 1.2rem; /* Adjust the font size for the contact details */
  line-height: 1.6; /* Line height for better readability */
  margin-top: 20px;
}

/* Styling for the company name */
.company-name {
  font-weight: bold;
  font-size: 1.4rem;
  color: #00125C; /* Company color */
  margin-bottom: 3px;
}

/* Styling for the address */
.address {
  margin-bottom: 10px;
  color: #333;
}

/* Spacer for adding space between address and contact details */
.spacer {
  margin-bottom: 15px;
}

/* Styling for phone and email */
.contact-details {
  font-size: 1.2rem;
  color: #00125C; /* Matching site theme */
  margin-bottom: 5px;
}

.contact-details a {
  color: #0056b3; /* Standard link color */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease, border-bottom 0.3s ease; /* Smooth transition for color and border */
  border-bottom: 2px solid transparent; /* Add underline on hover effect */
}

.contact-details a:hover {
  color: #C6A357; /* Elegant gold color on hover */
  border-bottom: 2px solid #C6A357; /* Gold underline on hover */
  background-color: transparent; /* No background change */
  text-shadow: none; /* Keep it simple without shadow */
}

/* Footer Styles */
footer {
  display: flex;
  justify-content: center;  /* Centers the content horizontally */
  align-items: flex-end;    /* Aligns content to the bottom vertically */
  height: 60px;             /* Reduced height for the footer */
  color: #666;
  padding: 5px;             /* Reduced padding for less height */
  text-align: center;
  font-family: 'Open Sans', Arial, sans-serif; /* Consistent font with the rest */
  font-size: 0.9rem;        /* Slightly smaller font for the copyright text */
  font-weight: 300;         /* Light font weight for subtle styling */
  letter-spacing: 0.05em;   /* Add some letter spacing for readability */
}

footer a {
  color: #0056b3;           /* Link color matching other links */
  text-decoration: none;    /* Remove underline */
}

footer a:hover {
  color: #FFD700;           /* Gold hover effect for consistency */
}