/* Panel Top 05 */
.panel.top ul.menu li {
  position: relative;
}

.panel.top ul.menu li a::after,
.sidebar ul.mainMenu li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  background-color: #fa6400;
  bottom: -5px;
  left: 50%;
  /* Adjust to control starting point */
  transform: translateX(-50%);
  /* Center the line under the link */
  transition: width 0.3s ease-in-out;
}

.panel.top ul.menu li a:hover::after,
.sidebar ul.mainMenu li a:hover::after {
  width: 100%;
}

/* Select the sidebar element by its class and data-sidebar-id attribute */
nav.sidebar[data-sidebar-id="1"] {
  background-color: #fa6400;
}

/* Apply styles to the menu items within the mainMenu class */
ul.mainMenu li {
  position: relative;
}

/* Add the orange line (bottom border) to the menu items */
ul.mainMenu li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  background-color: #fa6400;
  /* Orange color */
  bottom: -5px;
  left: 0;
  /* Adjusted to 0 for left alignment */
  transition: width 0.3s ease-in-out;
}

/* Expand the orange line (bottom border) on hover */
ul.mainMenu li a:hover::after {
  width: 25%;
}

/* Home (#1) */
.slide.background3d {
  -webkit-perspective: 100vw;
  perspective: 100vw;
  background: #111;
}

.slide.background3d .background {
  -webkit-transition: transform, opacity;
  transition: transform, opacity;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.1, 1) !important;
  transition-timing-function: cubic-bezier(0, 0, 0.1, 1) !important;
}

.safari .slide.background3d .background {
  -webkit-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-timing-function: cubic-bezier(0, 0.5, 0.1, 1) !important;
  transition-timing-function: cubic-bezier(0, 0.5, 0.1, 1) !important;
}

.slide.background3d:not(.selected) .background {
  -webkit-transform: scale(0.7) !important;
  transform: scale(0.7) !important;
  opacity: 0.5;
}

.slide.background3d.selected .background {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.superscript {
  font-size: 70%;
  /* You can adjust the size as needed */
  vertical-align: super;
}

/* Mission (#2) */
/* To restrict styles to the current slide, panel, or example use .slide[data-cid="slide-48-ce7cc70b"] */
.slide[data-cid=slide-48-ce7cc70b] {
  /* Add a min-width property to the image to prevent shrinking */
}
.slide[data-cid=slide-48-ce7cc70b] .statistic-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  position: relative;
}
.slide[data-cid=slide-48-ce7cc70b] .orange-line {
  width: 60px;
  /* Adjust width as needed */
  height: 8px;
  background-color: #fa6400;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.slide[data-cid=slide-48-ce7cc70b] .statistic-content .ae-8 p {
  margin-top: 10px;
  /* Adjust margin-top as needed */
  font-size: 14px;
  /* Adjust font size as needed */
}
.slide[data-cid=slide-48-ce7cc70b] .ae-1 {
  min-width: 200px;
  /* Adjust the minimum width as needed */
  height: auto;
}

/* PerPlant (#3) */
/* To restrict styles to the current slide, panel, or example use .slide[data-cid="slide-67-e6044779"] */
.slide[data-cid=slide-67-e6044779] .box-67 {
  color: #202020;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1);
  display: block;
  outline: none;
  margin-bottom: 35px;
  -webkit-backface-visibility: hidden;
}
.slide[data-cid=slide-67-e6044779] .box-67 .thumbnail-67 {
  font-size: 0;
  overflow: hidden;
  height: 180px;
  /* Adjust the height to make the images taller */
}
.slide[data-cid=slide-67-e6044779] .box-67 .thumbnail-67 img {
  border-radius: 6px 6px 0 0;
  backface-visibility: hidden;
  transition: 0.35s;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* This ensures the image fills the container while maintaining aspect ratio */
}
.slide[data-cid=slide-67-e6044779] .box-67:hover {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  opacity: 0.95;
}
.slide[data-cid=slide-67-e6044779] .box-67:hover .thumbnail-67 img {
  transform: scale(1.0225);
}
.slide[data-cid=slide-67-e6044779] .box-67 .name-67 {
  padding: 19px 5px 5px;
  background: #f9f9fa;
}

/* Impact (#4) */
/* To restrict styles to the current slide, panel, or example use .slide[data-cid="slide-159-e1429339"] */
.slide[data-cid=slide-159-e1429339] .box-159 {
  border-left: 8px solid #fa6400;
}

/* Tom (#5) */
/* To restrict styles to the current slide, panel, or example use .slide[data-cid="slide-62-f1b17b35"] */
.slide[data-cid=slide-62-f1b17b35] .flex-62 .material-icons {
  margin-bottom: 10px;
  margin-top: 15px;
  font-size: 36px;
}

/* CSS for the Tom logo */
h1.smaller.margin-bottom-2.ae-2 .tom-logo {
  max-width: 34%;
  /* Set the maximum width to 100% of the parent container */
  height: auto;
  /* Allow the height to scale proportionally */
}

/* CSS for the Tom Robot image */
li.col-6-12.left.ae-1 .Tomrobot {
  max-width: 80%;
  /* Set the maximum width to 80% of the parent container */
  height: auto;
  /* Allow the height to scale proportionally */
  padding-left: 30px;
  /* Add more padding on the left */
  margin-top: 60px;
  /* Bring the image down by adjusting the top margin */
}

/* grassweeds (#6) */
.twentytwenty-before-label:before {
  content: "Before";
}

.twentytwenty-after-label:before {
  content: "After";
}

html:not(.page-loaded) .twentytwenty img:nth-child(1) {
  display: none;
}

/* Default style for larger screens (desktops) */
.twentytwenty {
  /* You can set a default max-width here if necessary, e.g., 80% */
  max-width: 70%;
  margin: 0 auto;
  /* Center the slider */
}

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
  .twentytwenty {
    max-width: 100%;
    /* Full width on mobile devices */
  }
}
/* Register (#7) */
/* To restrict styles to the current slide, panel, or example use .slide[data-cid="slide-94-08a4c341"] */
.slide[data-cid=slide-94-08a4c341] .flex-68 a {
  display: inline-block;
  margin-top: 14px;
  margin-bottom: 14px;
  opacity: 0.9;
  transition: opacity 0.1s ease-in, transform 0.15s cubic-bezier(0.5, 0, 0.25, 2.5);
}
.slide[data-cid=slide-94-08a4c341] .flex-68 a:hover {
  opacity: 1;
  transform: scale(1.05);
}
.slide[data-cid=slide-94-08a4c341].whiteSlide .tintLogos {
  filter: brightness(0.2);
}
.slide[data-cid=slide-94-08a4c341]:not(.whiteSlide) .tintLogos {
  filter: brightness(1.3);
}

.bold-text {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.margin-top-3 {
  margin-top: 3rem;
  /* You can adjust this value for the desired vertical spacing */
}

/* Panel Bottom 02 */
.panel.bottom ul.menu li {
  position: relative;
}

.panel.bottom ul.menu li a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  background-color: #fa6400;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.3s ease-in-out;
}

.panel.bottom ul.menu li a:hover::after {
  width: 100%;
}