@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap');
 body {
     font-family: 'Open Sans', sans-serif;
     font-size: 1.2em;
     line-height: 1.6;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     background-color: #FFFFFF;
     /*scroll-padding-top: 200px; for the new home page to help links for the header*/
    /* Light gray background color */
}
 .header-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Ensures the header container stays on top of other content */
}
 header {
  background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
  color: white;
  padding: 1.2em;
  display: flex;
  justify-content: space-between;
  
 /* width: 100%*/
}
.logo {
  height: auto; /* Let the logo adjust its height automatically */
  width: 100%; /* Use full width by default */
  max-width: 400px; /* But don't get larger than this */
  max-height: 120px;
  margin-left: 80px;

}
nav {
  text-align: center;
  padding: 0.5em;
  font-size: 1.7vw;
  text-transform: uppercase;
  /*background-color: #14213d;*/
  display: flex;
  align-items: center;
  /*width: 100%;*/
   white-space: nowrap;
}

 h2 {
  font-size: 2em; /* Increase the font size */
  font-weight: 500; /* Set the font weight to lighter */
  color: #6EAFCC; /* Set the text color */
  text-transform: uppercase; /* Make the text uppercase */
  letter-spacing: 1.1px; /* Add some letter spacing */
  line-height: 1; /* Adjust the line height */
  margin-bottom: 0.25em; /* Reduce the margin below the h1 element */
}
 
 nav a {
     text-decoration: none;
     color: #3A3838;
     font-weight: bold;
    /* White for the nav links */
     margin: 0 0.8em;
 }
nav a:last-child {
  color: #3A3838;
  background-color: #Fca311;
  padding: 5px 10px; /* Adjust these values to change the size of the yellow box */
  border-radius: 3px;
  /*Margin-left: 60px;*/
  
}
 nav a:hover {
     color: #71B238;
    /* Green on hover for the nav links */
     font-size: 1.1em;
}
.welcome-section {
  display: flex;
  align-items: center;
}

.welcome-text-container {
  width: 70%;
  text-align: center;
  margin-right: -40px; /* Adjust this value to control the space between the text and the image */
}

.welcome-image {
  max-width: 27%; /* Adjust this value to resize the image */
  height: auto;
}
  .highlight-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    /*font-size: 1.2em;*/
    font-weight: 500;
    display: flex;
    flex-direction: column; 
    align-items: center;
  }

    .highlight-list li {
      /*pointer-events: initial;*/
      background-color: #3A3838;
      border: 1px solid #CCCCCC;
      padding: 0.5em 1em;
      margin-bottom: 0.5em;
      border-radius: 10px;
      box-shadow: 0 3px 6px #14213d;
      transition: all 0.3s ease;
      font-weight: Bold;
      width: 45%;
      text-transform: uppercase;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 1.2em;
    }
      .highlight-list li:nth-child(1) {
        box-shadow: 0 3px 6px #FCA311; /* Change the color for the first list item */
      }
      .highlight-list li:nth-child(2) {
        box-shadow: 0 3px 6px #71B238; /* Change the color for the second list item */
      }
      .highlight-list li:nth-child(3) {
        box-shadow: 0 3px 6px #ff0000; /* Change the color for the third list item */
      }
      .highlight-list li:nth-child(4) {
        box-shadow: 0 3px 6px #6EAFCC; /* Change the color for the third list item */
      }
      .highlight-list li:hover {
        background-color: #FFFFFF;
        box-shadow: 0 5px 8px #14213d;
        transform: translateY(-5px);
        color: #14213d;
      }

  .services-list {
    list-style-type: none; /* Remove default list bullets */
    padding: 0; /* Remove default padding */
    margin: 0 auto; /* Add auto margin for centering */
    display: flex; /* Create a flex container for list items */
    flex-wrap: wrap; /* Allow list items to wrap to the next row if needed */
    gap: 1em; /* Add spacing between tiles */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
  }

    .services-list li {
      font-size: 1vw;
      /*/font-size: 1.2em;*/
      font-weight: 500; /* Bold text for list items */
      text-transform: uppercase;
      padding: 1em; /* Padding around each list item */
      background-color: #3A3838; /* Background color of the list items */
      color: #ffffff; /* Text color of the list items */
      border-radius: 6px; /* Rounded corners for the list items */
      box-shadow: 0px 3px 6px #6EAFCC; /* Add shadow to the list items */
      flex: 0 0 17.5%; /* Allow items to flex within the container */
      min-width: 50px; /* Set a minimum width for the tiles */
      min-height: 75px;
      text-align: center; /* Center text within the tiles */
      transition: all 0.3s; /* Transition effect for hover */
      display: flex;
      justify-content: center;
      align-items: center;
    }
      .services-list li:nth-child(1) {
        background-color: #FCA311; /* Change the color for the first list item */
      }

      .services-list li:nth-child(2) {
        background-color: #71B238; /* Change the color for the second list item */
      }

      .services-list li:nth-child(3) {
        background-color: #6EAFCC; /* Change the color for the third list item */
      }
      .services-list li:nth-child(4) {
        background-color: #EE6C4D; /* Change the color for the third list item */
      }
      .services-list li:nth-child(5) {
        background-color: #71B238; /* Change the color for the first list item */
      }

      .services-list li:nth-child(6) {
        background-color: #Fca311; /* Change the color for the second list item */
      }

      .services-list li:nth-child(7) {
        background-color: #EE6C4D; /* Change the color for the third list item */
      }
      .services-list li:nth-child(8) {
        background-color: #6EAFCC; /* Change the color for the third list item */
      }
      .services-list li:hover {
        background-color: #3A3838; /* Change background color on hover */
        color: #6EAFCC; /* Change text color on hover */
        box-shadow: 0px 6px 12px #71B238; /* Increase shadow on hover */
        transform: translateX(10px);
      }

#Smartsheet-Apps-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.smartsheet-header-container {
  display: flex;
  align-items: center; /* Vertically center the items */
}

  .smartsheet-apps-container {
    margin-left: 30px; /* Add some space between the logo and the text */
  }
  .Smartsheet-logo-container {
      width: 300%; /* Adjust this value to control the container's width */
  }
  .Smartsheet-logo {
    max-width: 300%; /* Adjust this value to resize the image */
    height: auto;
  }
  .Smartsheet-Apps {
    list-style-type: none; /* Remove default list bullets */
    padding: 0; /* Remove default padding */
    margin: 0 auto; /* Remove default margin */
    display: flex; /* Create a flex container for list items */
    flex-wrap: wrap; /* Allow list items to wrap to the next row if needed */
    gap: 1em; /* Add spacing between tiles */
    justify-content: center;
    align-items: center;  
  /* width: 50%;*/
  }

    .Smartsheet-Apps li {
      font-size: 1vw;
      /*font-size: 1.4em;*/
      /*width: calc(33% - 1em);*/
      font-weight: 500; /* Bold text for list items */
      text-transform: uppercase;
      padding: 1em; /* Padding around each list item */
      background-color: #71B238; /* Background color of the list items */
      color: #ffffff; /* Text color of the list items */
      border-radius: 3px; /* Rounded corners for the list items */
      box-shadow: 0px 3px 6px #14213d; /* Add shadow to the list items */
      flex: 0 0 17.5%; /* Allow items to flex within the container */
      min-width: 100px; /* Set a minimum width for the tiles */
      /*max-width: 300px;*/
      min-height: 75px;
      text-align: center; /* Center text within the tiles */
      transition: all 0.3s; /* Transition effect for hover */
      display: flex;
      justify-content: center;
      align-items: center;
    }

      .Smartsheet-Apps li:hover {
        background-color: #FCA311; /* Change background color on hover */
        color: #14213d; /* Change text color on hover */
        box-shadow: 0px 6px 12px #71B238; /* Increase shadow on hover */
        transform: translateX(10px);
      }


/*This Begins the Hover Contact Us Box*/
a[href^="mailto:"] {
  color: inherit;
  text-decoration: none;
}
a[href^="mailto:"]:hover {
  color: #ff0000;
  text-decoration: underline;
}

.email-link {
  position: relative;
  display: inline-block;
}

.normal-text,
.hover-text {
  transition: opacity 0.3s;
}

.hover-text {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.email-link:hover .normal-text {
  opacity: 0;
}

.email-link:hover .hover-text {
  opacity: 1;
}


/*This Ends the hover contact us box*/

#section-home {
   margin-top:  200px; /* Adjust this value based on your header and nav combined height 
  /* Add your existing styles for the first section here */
}

#section-testimonials {

  display: none;
}


 section {
     padding: 1em 3em;
     flex-grow: 1;
}
 footer {
     background-color: #14213d;
    /* Light blue */
     color: white;
     text-align: center;
     padding: 1em;
    /*margin-top: 2em;
    */
}
 .Footer-logo {
  margin: 0 auto;
  padding: 0.5em 0em; 
  max-width: 150px;

  display: flex;
  align-items: center;

}
 .testimonial {
     border: 1.5px solid #CCCCCC;
     padding: 1em;
     margin-bottom: 1em;
}
 .testimonial-author {
     font-weight: bold;
}
 .iframe-container {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 0 auto;
     max-width: 100%;
     overflow: auto;
     width: 100%;
     height: 100%;
    /*flex-grow: 1;
    */
}
 iframe {
     width: 100%;
     max-width: 100%;
     align-items: center;
     height: 1000px;
     margin: 0 auto;
}
 .image-container {
     display: flex;
     justify-content: center;
}
 .responsive-image {
     max-width: 100%;
     height: auto;
}

 .homepage-content {
     width: 70%;
     text-align: left;
     margin: 0 auto;
     padding: 1em;
  }

 .homepage-header {
     margin: 0 auto;
     width: 75%;
     text-align: left;
}
 .homepage-header-home {
     margin: 0 auto;
     width: 100%;
     text-align: left;
}


/* Start of creating an about me section on the homepage */
 .homepage-content-home {
     margin-top: 2em;
     padding: 1em;
}
 .main-content {
     width: 45%;
     display: Inline-block;
     text-align: justify;
     vertical-align: top;
     margin-left: 2em;
     color: #3A3838;
     Padding: 40px; 
} 
.Innovation {
  max-width: 775px; /* Adjust this value to resize your logo */
  height: auto;
  padding-right: 20px;
  display: inline-block;
  /*float: top-right;*/
  margin-top: 0.5em;   
}
.about-me {
     color: #3A3838;
     /*width: 40%;*/
     display: inline-block;
     /*Float: Center;*/
     margin-left: 10em;
     margin-top: 9em;
     text-align: justify;
     vertical-align: top;
     background-color: #CCCCCC;
     border: 9px solid #Fca311;
     border-radius: 25px;
     Padding: 20px;
}
.Items { 
    max-width: 375px; /* Adjust this value to resize your logo */
    height: auto;
    /*float: left;*/
    margin-left: 4em;
    display: inline-block;
    /*float: bottom-center;*/
    margin-top: 4em;
}
/* End of creating a homepage section on the homepage */

.nav-dropdown {
    display: none;
    padding: 0.5em;
    font-size: 1em;
    width: 100%; /* Adjust width as needed */
    box-sizing: border-box;
    border: 2px solid #6EAFCC; /* Border color same as links */
    border-radius: 4px; /* Rounded corners */
    color: #6EAFCC; /* Text color same as links */
    background-color: #fff; /* White background */
    appearance: none; /* Remove default appearance */
    /* Add a custom arrow */
    /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6"><path d="M5 5L0 0h10z" fill="#008CBA"/></svg>');*/
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: 12px; /* Size of the custom arrow */
    /* Add some hover effect */
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.nav-dropdown:hover {
    color: #fff; /* On hover, text becomes white */
    background-color: #6EAFCC; /* On hover, background becomes same as link color */
    border-color: #6EAFCC; /* On hover, border becomes same as link color */
}

.nav-dropdown:focus {
    outline: none; /* Remove outline on focus */
}




/* ------------------------------------------------------------Media Screen ------------------------------------------ */

 @media screen and (max-width: 1200px) {

  .services-list li {
    flex: 0 0 65%; /* Increase the size of items for smaller desktop and tablet screens */
    font-size: 3vw;
    min-height: 0px;
  }

  .Smartsheet-Apps li {
    flex: 0 0 65%; /* Increase the size of items for smaller desktop and tablet screens */
    font-size: 3vw;
    min-height: 0px;
  }

  .highlight-list li{

  width: 65%;
  font-size: 3vw;
}

.services-list  li:hover {
  pointer-events: none;
}

.highlight-list li:hover {
   pointer-events: none;
}

.Smartsheet-Apps li:hover {
    pointer-events: none;
}


    iframe {
       
        width: 100%;
    }

    /* target the iframe container and set its width and height */
    .iframe-container {
        
        width: 100%;
    }

  .homepage-content {
    width: 85%; /* Increase the width for smaller desktop and tablet screens */
   
  }

  .homepage-header {
    width: 85%; /* Increase the width for smaller desktop and tablet screens */
    
  }

}

@media screen and (max-width: 1000px) {
      .logo {
        width: 75vw;
        margin: 0 auto;
      }

     /* nav {
        display: none;
      }*/

      header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
      }

   
     /* .nav-dropdown {
        display: flex;
        text-align: center;
      }*/

        iframe {
            
            width: 100%;
        }

        /* target the iframe container and set its width and height */
        .iframe-container {
            
            width: 100%;
        }

      .homepage-header {
        width: 100%; /* Full width for mobile screens */
      }
      section {
          padding: 1em 1.5em;
          flex-grow: 1;
      }
      .homepage-content {
        /*padding: 0.5em; /* Reduce padding for very small screens */
        /*width: calc(100% - 1em); /* Reduce width for very small screens */
        font-size: 4vw;
        margin: 0 auto;
        padding: 0em;
        width: 95%;
      }

      .welcome-image {
          display: none;
      }

      .welcome-text-container {
        width: 90%;
        text-align: center;
        margin-right: 0; /* Adjust this value to control the space between the text and the image */
      }

}

@media screen and (max-width: 480px) {

      .homepage-header {
        font-size: 3vw;
      }

      .homepage-content {
        /*padding: 0.5em; /* Reduce padding for very small screens */
        /*width: calc(100% - 1em); /* Reduce width for very small screens */
        font-size: 4vw;
        margin: 0 auto;
        padding: 0em;
        width: 98%;
      }

      iframe {
          
          width: 100%;
      }

      /* target the iframe container and set its width and height */
      .iframe-container {
          width: 100%;
      }

      .welcome-image {
      display: none;
      }
      /*.highlight-list li{

        width: 95%;
      font-size: 3vw;
      }*/
      section {
          padding: 1em 1em;
          flex-grow: 1;
      }

      .Footer-logo {
        width: 25vw;
      }

}