/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* CSS to center the button inside the container */
.button-container {
    display: flex;
    justify-content: center; /* This centers the button horizontally */
    align-items: center; /* This centers the button vertically if needed */
}

.darkblue {
    background-color: hsla(211.81, 95.4%, 17.06%, 1);
	padding-top: 20px; /* Adjust the value as needed for the top padding */
    padding-bottom: 20px; /* Adjust the value as needed for the bottom padding */
}
 
/* Adding padding around the logo */
#logo {
    padding: 10px; /* Adjust the value as needed */
}

/* Setting maximum height for logo images */
#logo img {
    max-height: 40px; /* Default max-height for larger screens */
    width: auto; /* Maintains the aspect ratio of the image */
}

/* Mobile screens adjustment */
@media (max-width: 767px) {
  #logo img {
    max-height: 30px; /* Smaller max-height for mobile screens */
  }
}


/* Change the color of navigation links to white */
.primary-menu .menu-link {
    color: white;
}

/* Optionally, change the color on hover if needed */
.primary-menu .menu-link:hover {
    color: #ddd; /* Lighter shade of white for hover effect, adjust as needed */
}

/* Adding padding to each navigation item */
.primary-menu .menu-container .menu-item {
    padding: 0 10px; /* Adjust the value as needed */
}

/* Targeting the last menu item for button styling */
.primary-menu .menu-container .menu-item:last-child a.menu-link {
    background-color: orange; /* Button background color */
    color: white; /* Text color */
    padding: 20px 25px; /* Adjust padding as needed */
    border-radius: 5px; /* Rounded corners for the button */
    text-decoration: none; /* Optional: Removes underline from the link */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Hover effect for the button */
.primary-menu .menu-container .menu-item:last-child a.menu-link:hover {
    background-color: darkorange; /* Darker shade of orange on hover */
}

/* Assuming .header-row is the direct parent container of both the logo and the navigation */
.header-row {
    display: flex;
    justify-content: space-between; /* This will push the title to the left and the navigation to the right */
    align-items: center; /* This will vertically center-align the items, adjust as needed */
}

#logo {
    /* Additional styles for the logo if needed */
}

.primary-menu {
    /* Additional styles for the navigation if needed */
}

.footer.darkblue {
    background-color: hsla(211.81, 95.4%, 17.06%, 1); /* Dark blue background */
    padding: 20px 0; /* Adjust padding as needed */
}

.footer-logo {
    max-width: 350px; /* Smaller logo size, adjust as needed */
}

/* Optional: Style for footer navigation and social icons */
.footer-nav a, 
.social-icons a {
    color: white; /* Adjust link color as needed */
    margin: 0 10px; /* Spacing between items */
}

/* Optional: Add hover effects for links */
.footer-nav a:hover,
.social-icons a:hover {
    color: #ddd; /* Lighter color on hover */
}

.footer .social-icons .social-icon {
    margin: 0 5px; /* Adjust horizontal margin */
}


.header-row {
    display: flex;
    align-items: center; /* Vertically centers items in the flex container */
    justify-content: space-between; /* Spreads out the children elements */
}

#logo {
    flex-shrink: 0; /* Prevents the logo from shrinking */
}

.primary-menu {
    flex-grow: 1; /* Allows the navigation to grow and use available space */
    display: flex;
    justify-content: flex-end; /* Aligns the menu to the right */
}



/* Specificity increased to ensure the text color is applied */
#fullwidthhero .content-container, 
#fullwidthhero .content-container h1, 
#fullwidthhero .content-container h4,
#fullwidthhero .content-container a {
  color: white; /* This will make all text and links inside the container white */
}

#fullwidthhero .full-width-image-section {
  position: relative;
  width: 100%;
  padding-top: 100px;
  height: 700px;
  background-size: cover;
  background-position: center;
}

#fullwidthhero .content-container {
  padding-top: 100px; /* Adjust to avoid nav bar overlap */
  padding-bottom: 50px;
}

#fullwidthhero h1 {
  font-size: 2.5em; /* Adjust h1 size as needed */
}

#fullwidthhero h4 {
  font-size: 1.5em; /* Adjust h4 size to be smaller than h1 */
  margin-bottom: 20px;
  font-weight: normal;
}

/* Responsive widths */
@media (min-width: 768px) {
  #fullwidthhero .content-container {
    width: 66.6666%;
    margin-left: calc((100% - 66.6666%) / 2); /* Adjust this to set your desired position */
    margin-right: auto;
    padding-left: 1%; /* Adjust this value to move the text to the left */
  }
}


/* Mobile-specific adjustments */
@media (max-width: 767px) {
  #fullwidthhero .content-container {
    position: relative;
    top: 0; /* Aligns near the top, adjust as needed */
    transform: translateY(0); /* Resets any transform applied */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px; /* Add some padding at the top if needed */
    padding-left: 5%; /* Left padding to not have the text stick to the edge */
    padding-right: 5%; /* Right padding to not have the text stick to the edge */
  }
}

@media (min-width: 1300px) {
  #fullwidthhero .content-container {
    width: 50%; /* Adjust this value to control the width of the container */
    
    margin-right: auto;
  }
}

/* Button Styles */
.btn {
  display: inline-block;
  background-color: orange;
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: darkorange;
}

#myModal1 .modal-content {
  background-color: white; /* Sets the modal content background to white */
}

#myModal1 .modal-content,
#myModal1 .modal-content .modal-title,
#myModal1 .modal-content .modal-body h3,
#myModal1 .modal-content .modal-body p {
  color: orange; /* Sets the text color to orange */
}

#myModal1 .modal-header .close {
  color: orange; /* Sets the close button color to orange */
}

#myModal1 .modal-header .close:hover,
#myModal1 .modal-header .close:focus {
  color: darkorange; /* Darker orange color for hover and focus states */
  opacity: 1; /* Removes the fade effect on hover and focus */
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
}

#fullwidthhero h4 a {
    text-decoration: underline !important;
}