body {
    font-family: 'Poppins', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0px;
    padding: 0px;
    color: var(--primary-color);
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
  }

a {
    text-decoration: none;
    cursor: pointer;
}

:root {
    --primary-color: #175452;
    --primary-heading-color: #175452;
    --primary-text-color: #175452;
    --primary-accent-color: rgb(56, 175, 145);
    --primary-background-color: #dfefec;
    --primary-hover-color: #5eb79d;
}

.button-primary {
outline: 1.5px solid var(--primary-accent-color);
background-color: var(--primary-accent-color);
color: #ffffff;
padding: .6rem 1.5rem .6rem 1.5rem;
border-radius: .5rem;
font-size: 1.05rem;
font-weight: 400;
text-align: center;
display: inline-block;
transition: background-color 0.3s;
line-height: 1.4rem;
}

.button-primary:hover {
    background-color: var(--primary-hover-color); 
    outline: 1.5px solid var(--primary-hover-color);
}

.button-ghost {
outline: 1.5px solid var(--primary-accent-color);
color: var(--primary-color);
padding: .6rem 1.5rem .6rem 1.5rem;
border-radius: .5rem;
font-size: 1.05rem;
font-weight: 500;
text-align: center;
display: inline-block;
transition: background-color 0.3s;
line-height: 1.4rem;
}

.button-ghost:hover {
    background-color: var(--primary-hover-color); 
    outline: 1.5px solid var(--primary-hover-color);
    color: #ffffff;
}

.button-ghost-alternative {
  outline: 1.5px solid var(--primary-accent-color);
  color: var(--primary-color);
  padding: .6rem 1.5rem .6rem 1.5rem;
  border-radius: .5rem;
  font-size: 1.05rem;
  font-weight: 500;
  text-align: center;
  display: inline-block;
  transition: background-color 0.3s;
  line-height: 1.4rem;
  }
  
  .button-ghost-alternative:hover {
      background-color: var(--primary-accent-color); 
      outline: 1.5px solid var(--primary-accent-color);
      color: #FFFFFF;
  }

.icon-button {
    display: inline-flex;
    align-items: center;
    padding: .6rem 1.5rem .6rem 1.5rem;
    outline: 1.5px solid var(--primary-accent-color);
    background-color: var(--primary-color);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 500;
    border-radius: .5rem;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: background-color 0.3s;
    line-height: 1.4rem;
  }
  
  .icon-button .arrow {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: -1px;
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
  }
  
  .icon-button:hover {
      background-color: var(--primary-hover-color); 
  outline: 1.5px solid var(--primary-hover-color);
  }
  
  .icon-button:hover .arrow {
    transform: translateX(5px); /* Move arrow to the right */
  }

  .ghost-icon-button {
    display: inline-flex;
    align-items: center;
    padding: .6rem 2rem .6rem 2rem;
    outline: 1.5px solid var(--primary-accent-color);
    background-color: transparent;
    color: var(--primary-color);
    font-size: 1.05rem;
    font-weight: 500;
    border-radius: .5rem;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: background-color 0.3s;
    line-height: 1.4rem;
  }
  
  .ghost-icon-button .arrow-ghost {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: -1px;
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
  }
  
  .ghost-icon-button:hover { 
  outline: 1.5px solid var(--primary-hover-color);
  }
  
  .ghost-icon-button:hover .arrow-ghost {
    transform: translateX(5px); /* Move arrow to the right */
  }

.h1 {
    font-size: 4rem;
    line-height: 5.5rem;
    letter-spacing: -.01em;
    font-weight: 600;
    color: var(--primary-heading-color);
}

h1 {
    margin: 2rem 0rem 1.65rem 0rem;
}

.h2 {
    font-size: 3rem;
    line-height: 3.5rem;
    letter-spacing: -.01em;
    z-index: 1;
    color: var(--primary-heading-color);
}

h2 {
    margin: 0.5rem 0rem 2rem 0rem;
    font-weight: 600;
}

.h3 {
    line-height: 2rem;
    letter-spacing: -.01em;
    color: var(--primary-heading-color);
}

h3 {
    font-size: 1.5rem;
    margin-top: 0rem;
    font-weight: 600;
}

h4 {
    margin: 0px;
    color: var(--primary-heading-color);
}

.h4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
}

.p {
    font-size: 1.05rem;
    line-height: 1.625;
    font-weight: 500;
    margin: 0rem 0rem 0rem 0rem;
    color: var(--primary-text-color);
}

p {
    margin: 10px 0px 10px 0px;
    letter-spacing: 0.01em;
    line-height: 1.5;
    font-weight: 500;
}

@media screen and (max-width: 959px) {
  .h1 {
    font-size: 2.5rem;
    line-height: 3.5rem;
  }

  h1 {
    margin: 1.5rem 0 1rem 0;
  }

  .h2 {
    font-size: 1.75rem;
    line-height: 2.25rem;
  }

  h2 {
    margin: 0.5rem 0 1.25rem 0;
  }

  .h3 {
    line-height: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
    margin-top: 0.5rem;
  }

  .h4 {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  p {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 8px 0;
  }

  .button-primary {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: .4rem 1rem .4rem 1rem;
    }
    
    .button-ghost {
      font-size: 0.95rem;
      line-height: 1.5;
      padding: .4rem 1rem .4rem 1rem;
    }
    
    .button-ghost-alternative {
      font-size: 0.95rem;
      line-height: 1.5;
      padding: .4rem 1rem .4rem 1rem;
      }
    
    .icon-button {
      font-size: 0.95rem;
      line-height: 1.5;
      padding: .4rem 1rem .4rem 1rem;
      }

      .ghost-icon-button {
        font-size: 0.95rem;
        line-height: 1.5;
        padding: .4rem 1rem .4rem 1rem;
      }

      .highlight {
        margin-left: 0px;
        padding: 0px;
    }

    .rotating-container {
      margin: 0rem 0.25rem;
    }
      
}

/* Wrapper around rotating words */
.rotating-container {
  white-space: nowrap;
  position: absolute;
  width: max-content;
  height: 1em; /* or line-height to reserve space */
  margin: 0rem 1rem;
}

/* Rotating words */
.highlight {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 1rem;
  border-radius: 8px;
  background-color: var(--primary-accent-color);
  color: #FFFFFF;
  white-space: nowrap;
  opacity: 0;
  animation: rotateWords 12s infinite;
  transform: translateY(20px);
}

/* Keyframes */
@keyframes rotateWords {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0px);
  }
  33% {
    opacity: 1;
    transform: translateY(0px);
  }
  40% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Animation delays for cycling */
.highlight:nth-child(1) {
  animation-delay: 0s;
}

.highlight:nth-child(2) {
  animation-delay: 4s;
}

.highlight:nth-child(3) {
  animation-delay: 8s;
}

.hero-wrapper {
    padding: 110px 0px 0px 0px;
}
    

        /* Floating Navbar styles */
    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: transparent; /* Start with transparent background */
        box-shadow: none; /* No shadow by default */
        z-index: 1000;
        transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
        }
    
        /* Navbar container to center content */
        .container-flex {
          max-width: 1280px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: left;
          padding: 18px 20px;
          line-height: 0px;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            justify-content: center;
            padding: 0px 20px;
            line-height: 0px;
          }
      
    
        /* Sections within the navbar */
        .navbar-logo {
          flex-shrink: 0;
          width: 235px;
        }
    
        .navbar-links {
          flex-grow: 1;
          display: flex;
          justify-content: center;
          gap: 20px;
          margin-left: 2rem;
          margin-right: 2rem;
        }
    
        .navbar-links a {
          text-decoration: none;
          color: var(--primary-text-color);
          font-weight: 500;
        }

        .wrapper-burger {
          display: none;
        }

        .burger {
          width: 25px;
        }

        /* Maintain existing desktop layout */
        @media screen and (min-width: 961px) {
          .dropdown-menu {
            display: none !important;
          }
        }

        /* Mobile responsiveness */
        @media screen and (max-width: 960px) {
          .navbar-links,
          .wrapper-button-nav {
            display: none !important;
          }

          .wrapper-burger {
            display: block;
            cursor: pointer;
            text-align: right;
            width: 100%;
          }

          .dropdown-menu {
            display: none;
            flex-direction: column;
            background-color: #dfefec;
            padding: 1rem;
            animation: slideDown 0.3s ease;
          }

          .dropdown-menu.show {
            display: flex;
          }

          .dropdown-menu .navbar-links,
          .dropdown-menu .wrapper-button-nav {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 1rem;
          }

          .dropdown-menu .navbar-links {
            flex-direction: column;
            gap: 1rem;
            width: 100%;
          }

          .dropdown-menu .wrapper-button-nav {
            flex-direction: column;
            gap: 1rem;
            margin-top: 1rem;
            width: 100%;
          }

          .dropdown-buttons {
            margin-top: 1rem;
            gap: 0.75rem;
          }

          .dropdown-buttons #ghost-button,
          .dropdown-buttons #primary-button {
            width: 100%;
          }

          .dropdown-buttons .button-ghost,
          .dropdown-buttons .button-primary {
            width: 100%;
            text-align: center;
          }

          @keyframes slideDown {
            from {
              opacity: 0;
              transform: translateY(-10px);
            }
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }
        }

    
        .wrapper-button {
          flex-shrink: 0;
          display: flex;
        }
        
        .wrapper-button-nav {
          flex-shrink: 0;
          display: flex;
        }

        .cta-wrapper {
            padding: 2rem 0rem 2rem 0rem;
        }

        .link-wrapper {
            background-color: transparent;
            padding: 1rem 0rem 1rem 0rem;
            margin: 0rem 1.2rem 0rem 1.2rem;
            border-top: 2px solid transparent;
            border-bottom: 2px solid transparent;
            transition: border-color 0.3s; 
        }

        .link-wrapper:hover {
            border-bottom: 2px solid var(--primary-accent-color);
        }

        .link-list {
            align-items: flex-start;
            display: flex;
            flex-direction: column;
            width: 26%;
            padding: 1rem;
        }

        .link-list-logo {
            align-items: flex-start;
            display: flex;
            flex-direction: column;
            width: 48%;
            padding: 1rem;
        }

        .awards-wrapper {
            display: flex;
            padding: 0.6rem 0rem 0rem 0rem;
            align-items: center;
        }

        .certification {
            width: 100px;
            margin-right: 2rem;
        }

        .certification-bacp {
          width: 40px;
          margin-right: 2rem;
        }

        #footer-section {
            background-color: var(--primary-color);
            margin-top: -4px;
            padding: 0rem 0rem 10rem 0rem;
            color: #FFFFFF;
        }
        .button-wrapper {
            display: flex;
        }

        .curve-divider {
            width: 100vw;
            height: 120px;
            overflow: hidden;
            display: block;
            line-height: 0;
            padding: 0;
            margin: 0;
          }
          
          .curve-divider svg {
            width: 100%;
            height: 100%;
            display: block;
            z-index: 0;
          }     
          
          .flipped {
            transform: scaleX(-1) rotate(180deg);
            margin-top: -8px;
          }

        .section-green {
            background-color: var(--primary-background-color);
            padding: 3rem 0rem 3rem 0rem;
        }

        .grid-wrapper {
            display: grid;
            padding: 20px 0px 20px;
        }

        .text-wrapper {
            padding: 20px;
        }

        .tag-text {
            color: var(--primary-accent-color);
        }

        .list-wrapper {
            display: flex;
            align-items: center;
            justify-content: left;
            padding: 10px 0px 10px 0px;
        }

        .list-collection {
            padding: 0px 0px 20px 0px;
        }

        .icon-wrapper {
            width: 16px;
            margin-right: 20px;
        }

        .text-wrapper {
            width: 50%;
            padding: 3rem 0rem 3rem 0rem;
            display: flex;            
            flex-direction: column;    
            justify-content: center;   
            height: 100%;              
          }
          @media (max-width: 959px) {
            .text-wrapper {
              width: 100%;
            }
          }

        .img-wrapper {
            display: flex;
            width: 50%;          
            align-items: flex-end;
            position: relative;      
        }

        .img-block {
          margin: auto;
          width: 100%;
          padding: 1rem 6rem 1rem 3rem;
        }

        @media (max-width: 959px) {
          .img-wrapper {
            width: auto;
          }
          .img-block {
            padding: 1rem 1rem 1rem 1rem;
          }
        }
        

        .flex-wrapper {
            display: flex;
            flex-direction: row;       
            justify-content: center;   
            align-items: center;       
            height: 100%;             
          }

          @media (max-width: 959px) {
            .flex-wrapper {
              display: block;
            }

            .large-block {
              max-width: auto;
          }

          .curve-divider {
            display: none;
            width: 0px;
            height: 0px;
          }
          
          .curve-divider svg {
            display: none;
            width: 0px;
            height: 0px;
          }

          .flipped {
            display: none;
          }

          .certification {
            width: 75px;
          }

          .certification-bacp {
            width: 35px;
          }

          .hero-wrapper {
            padding: 80px 0px 60px 0px;
        }

        .headshot {
          width: 100px;
        }

        .headshot-image {
          padding: 0rem 0rem 1rem 0rem;
        }

          }

        .pricing-title {
          padding: 1rem 0rem 0rem 0rem;
        }

        .pricing.text {
            padding: 3rem 0rem 3rem 0rem;
            display: flex;            
            flex-direction: column;    
            justify-content: center;   
            height: 100%;
        }

        .pricing-card {
            position: relative; 
            width: 50%;
            background-color: var(--primary-background-color);
            padding: 2rem;
            margin: 2rem 6rem 2rem 0rem;
            border-radius: 1.5rem;
            text-align: center;
            outline: 1.5px solid var(--primary-accent-color);
            z-index: 2;
        }

        @media (max-width: 959px) {
          .pricing-card {
            margin: 3rem 0rem 3rem 0rem;
            width: auto;
          }
        }

        .pricing-content {
            padding: 0rem 1rem 0rem 1rem;
        }

        .pill-box {
            position: absolute;
            top: -23px; 
            left: 50%;
            transform: translateX(-50%);
            z-index: 3; 
            background-color: var(--primary-accent-color);
            color: #FFFFFF;
            font-weight: 500;
            padding: 0rem 2.5rem 0rem 2.5rem;
            line-height: 0px;
            border-radius: 2rem;
            display: flex;
        }

        .price {
            font-size: 4rem;
            padding: 40px 0px 40px 0px;
        }

        .feature-wrapper {
            display: flex;
            padding: 2.5rem 0rem 2rem 0rem;
        }

        @media (max-width: 959px) {
          .feature-wrapper {
            display: block;
          }
        }

        .feature {
            background-color: var(--primary-background-color);
            padding: 1rem 2rem 1rem 2rem;
            margin-right: 2rem;
            border-radius: 5px;
        }

        @media (max-width: 959px) {
          .feature {
            text-align: center;
            margin-right: 0px;
            margin-bottom: 1rem;
          }
          .small-block {
            display: none;
          }
        }

        .carousel-wrapper {
            max-width: 100%;
            overflow: hidden;
            margin: 3rem 0rem 5rem 0rem;
          }
          
          .carousel {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-behavior: smooth;
            cursor: grab;
            padding-bottom: 20px;
            scroll-snap-type: x mandatory;
          }
          
          .carousel.active {
            cursor: grabbing;
          }
          
          .card {
            flex: 0 0 calc(25% - 12px); /* 4 cards per view with gap accounted for */
            background-color: white;
            border-radius: 10px;
            text-align: center;
            padding: 0px;
            font-size: 1.2rem;
            text-decoration: none;
            color: var(--primary-text-color);
            transition: transform 0.2s ease;
            scroll-snap-align: start;
          }
          
          .card:hover {
            transform: scale(1.05);
          }

          .centered-wrapper {
            text-align: center;
            max-width: 800px;
            margin: auto;
            padding-top: 3rem;
          }

          .section-white {
            padding: 3rem 0rem 3rem 0rem;
          }

          .section-footer {
            background-color: var(--primary-background-color);
            padding: 4rem 0rem 4rem 0rem;
            text-align: left;
            margin: auto;
          }

          .footer-logo {
            max-width: 200px;
            margin: auto;
          }

          .three-column-section {
            display: flex;
            justify-content: space-between;
            gap: 2rem;
            padding: 4rem;
          }

          @media (max-width: 959px) {
            .three-column-section {
              display: block;
              padding: 4rem 0rem;
            }
          }
          
          .column {
            flex: 1;
          }
          
          .column ul {
            list-style-type: disc;
            padding: 1rem;

          }
          
          .column li {
            margin-bottom: 3rem;
          }

          .template-image {
            width: 100%;
            
            border-radius: 10px;
          }

          .faq-card {
            background-color: #FFFFFF;
            padding: 1rem;
            border-radius: 10px;
            color: var(--primary-text-color);
            margin-bottom: 1rem;
          }

          .faq-title {
            display: flex;
            justify-content: space-between;
            align-items: center; 
        }

          .faq-icon {
            width: 18px;
            display: block;
            cursor: pointer;
          }

          .faq-text {
            padding: 2rem 0rem 0rem 0rem;
          }

          .faq-wrapper {
            width: 60%;
            padding: 2rem;
          }

          @media (max-width: 959px) {
            .faq-wrapper {
              width: 100%;
              padding: 0px;
            }
          }

          .promotion-card {
            padding: 2rem;
            color: var(--primary-color);
          }

          .promotion-text {
            padding: 0.75rem 1rem;
          }

          .promotion-wrapper {
            padding: 0rem 1rem 0rem 1rem;
            border-radius: 5px;
            transition: background-color 0.3s;
          }

          .promotion-wrapper:hover {
            background-color: var(--primary-background-color);
          }

          .promotion-title {
            display: flex;
            align-items: center;
          }

          .promotion-icon {
            width: 30px;
            margin-left: 0.5rem;
          }

          .headshot {
            max-width: 150px;
            border-radius: 200px;
          }

          .headshot-image {
            padding-right: 3rem;
          }