/* Reset some default styles */
body, h1, h2, h3, p, ul, li {
  margin: 0;
  padding: 0;
 }
 
 body.menu-open .topnav {
   display: none;
 }
 
 body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333333; /* Dark Gray for main text */
  background-color: #f8f8f8; /* Off-White for background */
  transition: margin-left .5s;
 } 

/* Header styles */
header {
  background-color: #003366; /* Deep Blue for header */
  padding: 20px;
  text-align: center;
  border-bottom: 5px solid #ff704d; /* Coral border at the bottom */
 }
 
 .logo img {
  max-width: 100%;
  height: auto;
  float: auto; /* Aligns the logo image to the right */
 }
 
 .slogan h1 {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
  color: #f8f8f8; /* Off-White for slogan text for contrast */
  margin-top: 20px;
  margin-bottom: 20px;
 }
 /* Section styles with border */
 section {
  border: 2px solid #003366; /* Deep Blue border for sections */
  margin: 20px;
  padding: 20px;
  background-color: #ffffff; /* White background for contrast */
 }
  

/* Navigation styles */
.off-canvas {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #333333; /* Dark Gray for off-canvas menu */
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.off-canvas a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #d9d9d9; /* Light Gray for off-canvas links */
  display: block;
  transition: 0.3s;
}

.off-canvas a:hover {
  color: #ff704d; /* Coral for hover effect */
}

.off-canvas .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.topnav {
  display: flex;
  align-items: center;
  background-color: #003366; /* Deep Blue for top navigation */
  position: sticky;
  top: 0;
  z-index: 1000;
  justify-content: flex-start; /* Align items to the start */
}
.topnav .logo {
  flex-grow: 1; /* Allows the logo to take up available space */
  text-align: center; /* Centers the logo */
}
.topnav a, .topnav span {
  color: #f8f8f8; /* Off-White for topnav text */
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav span {
  cursor: pointer;
  margin-right: auto;
}

.topnav a:hover {
  background-color: #ff704d; /* Coral for hover effect */
  color: #f8f8f8; /* Off-White for text on hover */
}

.topnav a.split {
  margin-left: auto;
  background-color: #d9d9d9; /* Light Gray for split buttons */
  color: #333333; /* Dark Gray for split button text */
}

/* Home section styles */
#home {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 80vh;
 background: url('./assets/banner.jpg') center/cover no-repeat;
}

.welcome {
 text-align: center;
 color: #003366; /* Deep Blue for welcome section text */
}

.banner,
.welcome {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

.banner img {
 max-width: 100%;
 height: auto;
}

.welcome h2 {
 line-height: 2.5;
 color: #333333; /* Dark Gray for h2 in welcome section */
 animation: scrollText 10s linear infinite;
}

.read-more-link {
 color: #ff704d; /* Coral for read more links */
 cursor: pointer;
}

.hidden {
 display: none;
}

.button {
 display: inline-block;
 padding: 10px 20px;
 background-color: #ff704d; /* Coral for buttons */
 color: #f8f8f8; /* Off-White for button text */
 text-decoration: none;
 font-weight: bold;
 border-radius: 5px;
 cursor: pointer;
 margin-top: 20px;
}

@keyframes scrollText {
 0% {
  transform: translateY(0);
 }
 10% {
  transform: translateY(-50%);
 }
}

/* About section styles */
#about {
 padding: 50px 0;
 text-align: center;
 background-color: #d9d9d9; /* Light Gray for services section */
}

.team,
.mission {
 margin-top: 30px;
}

/* Services section styles */
.section {
  background-color: #d9d9d9; /* Light Gray for services section */
  padding: 80px 0;
  text-align: center;
}

.w-container {
  max-width: 960px;
  margin: 0 auto;
}

.divider {
  width: 60px;
  height: 3px;
  background-color: #003366; /* Deep Blue for divider */
  margin: 20px auto;
}

.service-wrapper {
  margin-bottom: 30px;
}

.service-wrapper img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.service-info {
  margin-top: 15px;
}

.service-title {
  font-size: 1.2em;
  color: #333333; /* Dark Gray for service title */
  margin-bottom: 8px;
}

/* Work section styles */
.section {
  background-color: #d9d9d9; /* Light Gray for the work section */
  padding: 80px 0;
  text-align: center;
}

.w-container {
  max-width: 960px;
  margin: 0 auto;
}

.divider {
  width: 60px;
  height: 3px;
  background-color: #003366; /* Deep Blue for divider */
  margin: 20px auto;
}

.project {
  margin-bottom: 30px;
}

.project img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.project-info {
  margin-top: 15px;
}

.project-title {
  font-size: 1.2em;
  color: #333333; /* Dark Gray for project title */
  margin-bottom: 8px;
}

/* Blog section styles */
#blog {
 padding: 50px 0;
 text-align: center;
 background-color: #d9d9d9; /* Light Gray for blog section */
}

/* Contact and Footer Sections */
.contact {
  background-color: #d9d9d9; /* Light Gray for contact section */
  padding: 80px 0;
}

.footer {
  background-color: #333333; /* Dark Gray for footer */
  color: #f8f8f8; /* Off-White for footer text */
  padding: 60px 0;
  text-align: center;
}

.form-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 1em;
  color: #f8f8f8; /* Off-White for form labels */
  margin-bottom: 5px;
}

.form-input {
  width: 100%;
  padding: 10px;
  font-size: 1em;
  border: 1px solid #f8f8f8; /* Off-White for form input borders */
  border-radius: 5px;
  color: #333333; /* Dark Gray for form input text */
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #ff704d; /* Coral for buttons */
  color: #f8f8f8; /* Off-White for button text */
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

.submit-button {
  background-color: #ff704d; /* Coral for submit buttons */
  color: #f8f8f8; /* Off-White for submit button text */
}

.success-message,
.w-form-fail {
  display: none;
  margin-top: 20px;
}

.success-message h1,
.w-form-fail p {
  color: #f8f8f8; /* Off-White for messages */
}

.footer-logo {
  margin-top: 30px;
}

.footer-text {
  font-size: 0.8em;
  margin-top: 10px;
}
/* Footer styles with border */
footer {
  background-color: #333333; /* Dark Gray for footer */
  color: #f8f8f8; /* Off-White for footer text */
  padding: 60px 0;
  text-align: center;
  border-top: 5px solid #ff704d; /* Coral border at the top */
 }
 /* Tablet devices (portrait and landscape) - From 768px to 1024px */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  header, .topnav, .w-container, .section {
      padding-left: 20px;
      padding-right: 20px;
  }
  .topnav a, .topnav span {
      font-size: 15px;
  }
  .slogan h1, .welcome h2, .service-title, .project-title {
      font-size: 1.2rem;
  }
  .service-wrapper img, .project-wrapper img {
      width: 100%;
  }
}

/* Mobile devices - Up to 767px */

  @media screen and (max-width: 767px) {
    /* Adjusts the padding for the sections to reduce the side border width */
    section {
      padding: 20px 10px; /* Reduced side padding */
      margin: 10px; /* Reduced margin to match the new padding */
      border-width: 1px; /* Reduced border-width for a thinner border */
    }
  
    .topnav {
      justify-content: space-between; /* Ensures the menu and logo are on opposite ends */
      align-items: center; /* Centers items vertically */
      padding: 10px; /* Provides padding around the navigation bar */
    }
  
    .topnav .logo {
      flex-grow: 0; /* Prevent the logo from taking unnecessary space */
      padding: 0; /* Reset padding if needed */
    }
  
    .topnav .logo img {
      max-width: 100px; /* Adjust the logo size as necessary */
      height: auto; /* Maintains the aspect ratio of the logo */
    }
  
  
    .topnav a, .topnav span {
      font-size: 14px; /* Smaller font size for nav items */
      padding: 10px; /* Less padding for nav items */
    }
  
    .topnav a.split {
      display: none; /* Hides the 'Contact Us' button in the mobile view */
    }
  
    .service-title, .project-title, .read-more-link, .button, .form-label, .footer-text {
      font-size: smaller;
    }
  
    .welcome p, .team p, .mission p, .service-info div, .project-info div {
      font-size: smaller;
    }
  
    .read-more, .welcome, .service-info, .project-info, .contact-text {
      padding: 10px;
    }
  
    .button, .form-input, .submit-button {
      width: 100%;
      box-sizing: border-box;
    }
  
    /* Ensure the "Our Work" section is displayed correctly */
    #work .w-container {
      max-width: 100%; /* Allows the container to fit the width of the screen */
      padding: 0; /* Resets any padding that might be causing layout issues */
    }
  
    #work .project {
      margin-bottom: 20px; /* Adjusts the margin for mobile layout */
    }
  
    #work .project img {
      width: 100%; /* Ensures the image is fully responsive */
      height: auto; /* Maintains the aspect ratio */
      margin-bottom: 10px; /* Adds some space below the image */
    }
  
    .off-canvas a {
      font-size: 20px; /* Adjust menu link size for better touch */
    }
  }