@import url('https://fonts.googleapis.com/css2?family=Croissant+One&family=Poppins:wght@300&display=swap');
/* Styling for the body */
body {
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Divides the page into three rows */
  -webkit-flex-direction: column; /* Arrange items in a column for WebKit browsers */
  flex-direction: column; /* Stacks the rows vertically */
  min-height: 100vh; /* Ensures the body takes up the full height of the viewport */
  font-family: 'Poppins', sans-serif; /* Sets the font family */
  margin: 0px; /* Removes default margin */
  padding: 0px; /* Removes default padding */
  box-sizing: border-box; /* Ensures padding and border are included in the element's total width and height */
  font-size: 21px; /* Sets the base font size */
  opacity: 0;
  animation: fadeIn 0.6s ease-in-out forwards;
}
/* Styling for the main content */
main {
  flex: 1; /* Allows main to take up the remaining space */
  margin-bottom: 20px; /* Adds a bottom margin of 20px */
}
/* Styling for the footer */
footer {
  background-color: #f0f0f0; /* Sets the background color of the footer */
  padding: 10px 0; /* Adds padding above and below the content */
  text-align: center; /* Centers the content horizontally */
  position: relative; /* Add position relative to establish a new positioning context */
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Styling for h4 elements */
h4 {
  font-family: 'Poppins', sans-serif; /* Sets the font family */
  font-size: 27px; /* Sets the font size */
}
/* Hide the scroll-to-top button by default */
.scroll-to-top-button {
  display: none;
  bottom: 102px; /* Adjust the position from the bottom */
  right: 60px; /* Adjust the position from the right */
  z-index: 1;
  color: #fff;
  background-color: #0c5b7d; /* Darker blue on hover */
  border: thin solid #0c5b7d;
  position: fixed;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  text-align: center;
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
}
/* CSS for showing the scroll-to-top button */
.scroll-to-top-button.show {
  display: block; /* Make the button visible */
  animation: fadeIn 0.3s ease-in-out forwards;
  transition: transform 0.1s ease; /* Applies a smooth transition */
}
/* Hover effect for the scroll-to-top button */
.scroll-to-top-button.show:hover {
  color: #0c5b7d;
  background-color: #fff; /* Darker blue on hover */
  border: thin solid #0c5b7d;
  cursor: pointer;
  -webkit-box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  transform: scale(1.1); /* Scales the icon on hover */
}
.scroll-to-top-button.show:active {
  /* Set the same styles as the default state */
  /* For example: */
  background-color: inherit;
  color: inherit;
  border: inherit;
  /* Add any other styles as needed */
}
/* Styling for the fixed header container */
#header-container {
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Arranges header content in a row */
  -webkit-flex-direction: column; /* Arrange items in a column for WebKit browsers */
  flex-direction: column; /* Stacks header content vertically */
  position: fixed; /* Fixes the header at the top of the viewport */
  top: 0; /* Aligns the header to the top */
  left: 0; /* Aligns the header to the left */
  height: auto; /* Allows the header height to adjust based on content */
  width: 100%; /* Makes the header span the entire width of the viewport */
  z-index: 2; /* Ensures the header appears above other elements */
  background-image: url(../images/Background.jpg?v0); /* Sets the background image */
  background-repeat: no-repeat; /* Prevents the background image from repeating */
  background-position: 50% 48%; /* Positions the background image */
  background-size: cover; /* Ensures the background image covers the entire header */
  -webkit-box-shadow: 0px 0px 15px 0px;
  box-shadow: 0px 0px 15px 0px; /* Adds a shadow to the header */
  background-color: #E39742; /* Sets the background color of the header */
}
/* Styling for the mobile header container */
#header-container-mobile {
  display: none; /* Hides the mobile header by default */
  -webkit-flex-direction: column; /* Arrange items in a column for WebKit browsers */
  flex-direction: column; /* Stacks mobile header content vertically */
  position: fixed; /* Fixes the mobile header at the top of the viewport */
  top: 0; /* Aligns the mobile header to the top */
  left: 0; /* Aligns the mobile header to the left */
  height: auto; /* Allows the mobile header height to adjust based on content */
  width: 100%; /* Makes the mobile header span the entire width of the viewport */
  z-index: 2; /* Sets the background image */
  background-repeat: no-repeat; /* Prevents the background image from repeating */
  background-position: 50% 48%; /* Positions the background image */
  background-size: cover; /* Ensures the background image covers the entire mobile header */
  -webkit-box-shadow: 0px 0px 15px 0px;
  box-shadow: 0px 0px 15px 0px; /* Adds a shadow to the mobile header */
  background-color: #0c5b7d; /* Sets the background color of the mobile header */
  /*background-image: url(../images/Background.jpeg);*/
}
/* Styling for the top row of the header */
.header-top-row {
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Arranges top row content in a row */
  align-items: center; /* Centers items vertically */
  -webkit-flex-direction: row; /* Arrange items in a row for WebKit browsers */
  flex-direction: row; /* Arranges items in a row */
  background: rgba(255, 255, 255, 0.5); /* Sets the background color with opacity */
  height: 39px; /* Initial height set to 0 */
  width: 100%; /* Makes the top row span the entire width of the header */
}
/* Styles for the search bar container */
#header-container .header-top-row .search-bar {
  width: 205px; /* Set width of the search bar */
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Use flexbox for layout */
  padding-left: 4px; /* Add left padding */
  align-items: center; /* Center align items vertically */
  justify-content: center; /* Center align items horizontally */
  position: relative;
  height: 35px;
  left: 50%;
  transform: translateX(-50%);
}
#header-container .header-top-row .search-bar img {
  width: auto;
  height: 30px;
  position: absolute;
  left: 5px;
}
/* Styles for the search text box */
#header-container .header-top-row .search-bar .search-text-box {
  width: 100%; /* Take up full width */
  font-family: inherit; /* Inherit font family from parent */
  border-radius: 5px; /* Apply border radius */
  border-color: #929292; /* Set border color to black */
  padding-left: 24px; /*Apply a left padding so that search box moves to the right*/
  -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); /* Inner shadow */
  display: block;
  height: 95%;
  font-size: 15px;
}
/* Styles for the search bar container */
#header-container-mobile .header-center-row .search-bar {
  display: none; /* Use flexbox for layout */
  padding-left: 4px; /* Add left padding */
  width: calc(100% - 288px);
  height: 60%;
  position: absolute;
  right: 55px;
}
/* Styles for the search text box */
#header-container-mobile .header-center-row .search-bar .search-text-box {
  height: 100%;
  width: 100%; /* Take up full width */
  font-family: inherit; /* Inherit font family from parent */
  border-radius: 5px; /* Apply border radius */
  border-color: #929292; /* Set border color to black */
  padding-left: 24px; /*Apply a left padding so that search box moves to the right*/
  -wbkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); /* Inner shadow */
  display: block;
}
#header-container-mobile .header-center-row .search-bar img {
  width: auto;
  height: 27px;
  position: absolute;
  left: 5px;
}
/* Styling for the icons div */
.icons {
  display: flex;
  flex-direction: row;
  float: right;
  position: absolute;
  right: 0.1%;
}
/* Styling for the Instagram icon in the header */
.insta-icon {
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Arranges icon content in a row */
  align-items: center; /* Centers items vertically */
  margin-left: auto; /* Pushes the icon to the right */
  margin-right: 1px; /* Adds a small margin to the right */
}
/* Styling for the Instagram icon image */
.insta-icon img {
  transition: transform 0.15s ease; /* Applies a smooth transition */
  height: 26px; /* Sets the height of the icon */
  width: auto; /* Allows the width to adjust based on the height */
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
}
/* Styling for the Facebook icon in the header */
.facebook-icon {
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Arranges icon content in a row */
  align-items: center; /* Centers items vertically */
  margin-left: auto; /* Pushes the icon to the right */
  margin-right: 1px; /* Adds a small margin to the right */
}
/* Styling for the Instagram icon image */
.facebook-icon img {
  transition: transform 0.15s ease; /* Applies a smooth transition */
  height: 24px; /* Sets the height of the icon */
  width: auto; /* Allows the width to adjust based on the height */
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
}
/* Hover effect for the Facebook icon image */
.facebook-icon img:hover {
  transform: scale(1.1); /* Scales the icon on hover */
}
/* Hover effect for the Instagram icon image */
.insta-icon img:hover {
  transform: scale(1.1); /* Scales the icon on hover */
}
/* Styling for the center row of the header */
.header-center-row {
  height: 100%; /* Makes the center row fill the height of the header */
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Arranges center row content in a row */
  -webkit-flex-direction: row; /* Arrange items in a row for WebKit browsers */
  flex-direction: row; /* Arranges items in a row */
  justify-content: space-evenly; /* Distributes items evenly along the main axis */
  align-items: center; /* Centers items vertically */
}
/* Styling for the header title in the center row */
.header-title.column-center {
  width: 346px; /* Sets the width of the title column */
  display: block;
  align-items: center;
}
/* Styling for the navigation button in the header title */
.header-title.column-center .nav-button {
  width: 100%; /* Sets the width of the navigation button */
  height: 100%;
}
/* Styling for the links in the navigation button */
.header-title.column-center .nav-button a {
  text-decoration: none; /* Removes default underline */
  color: inherit; /* Inherits the color from the parent */
  display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
  display: flex; /* Displays the link as a block-level element */
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  border-radius: 150px;
  margin-bottom: 10px;
  background-color: #0c5b7d;
  height: 55px;
}
/* Styling for the header title */
.header-title.column-center h1 {
  font-family: 'Croissant One', sans-serif; /* Sets the font family */
  color: #FFFFFF; /* Adds padding to the top */
  font-size: 32px; /* Sets the border radius */
  text-align: center; /* Centers the text horizontally */
  text-decoration: none; /* Removes default underline */
}
.header-title.column-center .nav-button a img {
  width: auto;
  height: 42px;
  margin-left: 5px;
}
/* Styling for the navigation columns */
.header-nav.column-left, .header-nav.column-right {
  width: 110px; /* Sets the width of the navigation columns */
}
/* Styling for the navigation buttons */
.header-nav.column-left .nav-button, .header-nav.column-right .nav-button {
  width: 100%; /* Sets the width of the navigation buttons */
  height: 100%; /* Sets the height of the navigation buttons */
}
/* Styling for the links in the navigation */
.header-nav a {
  display: block; /* Displays the links as block-level elements */
  font-family: 'Poppins', sans-serif; /* Sets the font family */
  color: rgba(255, 255, 255, 1.00); /* Sets the text color */
  background-color: #0c5b7d; /* Sets the background color */
  padding-bottom: 10px; /* Adds padding to the bottom */
  padding-top: 10px; /* Adds padding to the top */
  font-size: 17px; /* Sets the font size */
  border-radius: 50px; /* Sets the border radius */
  text-align: center; /* Centers the text horizontally */
  text-decoration: none; /* Removes default underline */
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
  transform: scale(1); /* Resets the scale */
  transition: transform 0.3s ease; /* Applies a smooth transition */
  width: 100px;
}
/* Hover effect for the navigation links */
.header-nav a:hover {
  color: #0c5b7d; /* Changes text color on hover */
  background-color: rgba(255, 255, 255, 1.00); /* Changes background color on hover */
  -webkit-box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  transform: scale(1.1); /* Resets the scale */
}
/* Styling for the bottom row of the header */
.header-bottom-row {
  height: 0px; /* Sets the height of the bottom row to 0 */
}
/* Hover effect for the navigation links */
.header-nav li a:hover {
  cursor: pointer; /* Changes cursor to pointer on hover */
  font-weight: 700; /* Applies bold font weight on hover */
}
/* Define CSS classes for different offset heights */
.desktop-offset {
  /*I checked these from the console and set them according to my needs*/
  margin-top: 110px;
}
/* Define CSS classes for different offset heights */
.mobile-offset {
  /*I checked these from the console and set them according to my needs*/
  margin-top: 55px;
}
/* Selector for the line under the footer */
.footer-line {
  width: 100%; /* Sets the width to 100% */
  height: 1px; /* Sets the height to 1px */
  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); /* Adds a linear gradient background */
}
/* Media query for smaller screens */
@media screen and (max-width:900px) { /* Hide the scroll-to-top button by default */
  .scroll-to-top-button {
    right: 40px; /* Adjust the position from the right */
  }
}
/* Media query for screens with a maximum width of 720px */
@media screen and (max-width: 720px) {
  /* Styling for the body */
  body {
    font-size: 19px; /*Set the base font size*/
  }
  /* Styling for h4 elements */
  h4 {
    font-size: 20px; /* Sets the font size */
  }
  .scroll-to-top-button {
    right: 26px; /* Adjust the position from the right */
    bottom: 96px; /* Adjust the position from the bottom */
  }
  /* Hide the old header */
  #header-container {
    display: none; /* Hides the desktop header */
  }
  /* Show the new header */
  #header-container-mobile {
    display: block; /* Shows the mobile header */
  }
  /* Center the header title */
  .header-center-row {
    height: 48px; /* Adjusts the height of the mobile header */
    display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
    display: flex; /* Arranges mobile header content in a row */
    align-items: center; /* Centers items vertically */
    position: relative; /* Allows positioning relative to the viewport */
  }
  #header-container .header-top-row .search-bar {
    display: none;
  }
  /* Styles for the search bar container */
  #header-container-mobile .header-center-row .search-bar {
    display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
    display: flex;
    align-items: center; /* Center align items vertically */
    justify-content: center; /* Center align items horizontally */
  }
  /* Styles for the search text box */
  #header-container-mobile .header-center-row .search-bar .search-text-box {
    width: 100%; /* Take up full width */
    height: 100%;
    border-color: unset; /* Set border color to black */
  }
  #header-container-mobile .header-center-row .search-bar img {
    width: auto; /* Take up full width */
  }
  .header-title {
    position: absolute; /* Positions the header title */
    /* Moves the header title to the center horizontally */
    left: 2%;
    padding: unset;
    margin-left: unset;
    height: 100%;
  }
  /* Adjust padding of the header title */
  .nav-button {
    width: auto; /* Allows the width to adjust based on content */
    height: 100%;
  }
  .nav-button a {
    display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
  }
  /* Adjust padding of the header title */
  .header-title .nav-button a h1 {
    font-family: 'Croissant One', sans-serif; /* Sets the font family */
    color: #FFFFFF; /* Sets the text color */
    font-size: 24px; /* Removes default underline */
    width: auto; /* Displays the header title as an inline block */
    white-space: nowrap; /* Prevents wrapping of text */
  }
  .nav-button a img {
    width: auto;
    height: 32px;
    margin-left: 6px;
  }
  /* Move burger menu icon to the start */
  .burger-menu {
    position: absolute;
    right: 2%;
    z-index: 2; /* Ensures the burger menu icon appears above other elements */
  }
  /* Styling for burger menu icon */
  .burger-icon {
    width: 23.5px; /* Sets the width of the burger menu icon */
    height: 20.5px; /* Sets the height of the burger menu icon */
    cursor: pointer; /* Changes cursor to pointer */
    padding-right: 2px; /* Adds padding to the right */
    padding-left: 2px; /* Adds padding to the left */
    padding-top: 2px; /* Adds padding to the top */
  }
  /* Hover effect for the burger menu icon */
  .burger-icon:hover {
    background-color: #fff; /* Changes background color on hover */
  }
  /* Styling for burger menu icon bars */
  .bar {
    width: 100%; /* Sets the width of the bars */
    height: 3px; /* Sets the height of the bars */
    background-color: #fff; /* Sets the background color of the bars */
    margin-bottom: 4px; /* Adds margin to the bottom of the bars */
  }
  /* Hover effect for the burger menu icon bars */
  .bar:hover, .burger-icon:hover .bar {
    background-color: #0c5b7d; /* Changes background color on hover */
  }
  /* Styling for the burger menu */
  .menu {
    background-color: #0c5b7d; /* Sets the background color */
    list-style-type: none; /* Removes bullet points */
    position: fixed; /* Fixes the menu position */
    top: 0; /* Aligns the menu to the top */
    left: 0; /* Aligns the menu to the left */
    width: 100%; /* Makes the menu span the entire width of the viewport */
    height: 100%; /* Makes the menu span the entire height of the viewport */
    margin: 0; /* Removes default margin */
    z-index: 3; /* Ensures the menu appears above other elements */
    padding: 0; /* Removes padding */
    opacity: 0; /* Initial opacity set to 0 */
    visibility: hidden;
    transition: all 0.2s ease;
  }
  /* Show menu when burger icon is clicked */
  .menu.active {
    display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
    display: flex; /* Shows the menu */
    -webkit-flex-direction: column; /* Arrange items in a column for WebKit browsers */
    flex-direction: column; /* Stacks menu items vertically */
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
    opacity: 0.97; /* Sets opacity to show the menu */
    transition: all 0.3s ease; /* Applies a smooth transition */
    visibility: visible;
  }
  /* Styling for burger unordered list */
  .menu ul {
    padding-inline-start: unset; /*BM had to set this as the unordered list had this 40px default left padding*/
  }
  /* Styling for burger menu items */
  .menu ul li {
    margin-bottom: 10px; /* Adds margin to the bottom of each item */
    margin-top: 25px; /* Adds margin to the top of each item */
    display: -webkit-flex; /* Use flexbox layout for WebKit browsers */
    display: flex; /* Arranges menu items in a row */
    -webkit-flex-direction: column; /* Arrange items in a column for WebKit browsers */
    flex-direction: column; /* Stacks menu items vertically */
    justify-content: center; /* Centers items horizontally */
    align-items: center; /* Centers items vertically */
    transform: scale(1); /* Resets the scale */
    transition: transform 0.3s ease; /* Applies a smooth transition */
  }
  /* Hover effect for menu items */
  .menu li:hover {
    transform: scale(1.2); /* Scales the item on hover */
  }
  /* Styling for burger menu links */
  .menu ul li a {
    color: #fff; /* Sets the text color */
    text-decoration: none; /* Removes default underline */
    display: flex; /* Arranges link content in a row */
    -webkit-flex-direction: row; /* Arrange items in a row for WebKit browsers */
    flex-direction: row; /* Arranges items in a row */
    align-items: center; /* Centers items vertically */
  }
  /* Styling for images within burger menu links */
  .menu ul li a img {
    margin-right: 9px; /* Adds margin to the right of the image */
  }
  /* Styling for the close button */
  .burger-menu .close-button {
    background-color: transparent; /* Sets the background color to transparent */
    border: none; /* Removes border */
    color: #fff; /* Sets the text color */
    font-size: 30px; /* Sets the font size */
    cursor: pointer; /* Changes cursor to pointer */
    position: fixed; /* Fixes the position of the button */
    top: 10px; /* Aligns the button to the top */
    right: 10px; /* Aligns the button to the right */
    z-index: 4; /* Ensures the button appears above other elements */
    transition: transform 0.1s ease; /* Applies a smooth transition */
  }
  /* Hover effect for the close button */
  .burger-menu .close-button:hover {
    transform: scale(1.15); /* Scales the button on hover */
  }
}
/* Media query for screens with a maximum width of 600px */
@media screen and (min-width: 400px) and (max-width: 600px) {
  /* Styling for the body */
  body {
    font-size: 16px; /*Set the base font size*/
  }
  /* Hide the scroll-to-top button by default */
  .scroll-to-top-button {
    right: 15px;
    width: 30px;
    height: 30px;
    bottom: 86px; /* Adjust the position from the bottom */
  }
}
/* Media query for screens with a maximum width of 400px */
@media screen and (max-width: 400px) {
  /* Styling for the body */
  body {
    font-size: 14px; /*Set the base font size*/
  }
  /* Hide the scroll-to-top button by default */
  .scroll-to-top-button {
    right: 9px;
    width: 22px;
    height: 22px;
    bottom: 80px; /* Adjust the position from the bottom */
  }
  /* Only disable the mobile header title located in the home page */
  .home-page .header-title .nav-button a h1 {
    display: none;
  }
  /* Styles for the search bar container */
  #header-container-mobile .header-center-row .search-bar {
    width: calc(100% - 110px);
  }
}