/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/* Subscription Preferences pages - Remove black overlay against hero section bg image */
.sub-pre-header .head-overlay {
  display: none !important;
}



/* Add green underline to text links*/ 
    .custom-link {
        position: relative;
        text-decoration: none;
        color: #31aa97;
        display: inline-block;
        overflow: hidden; /* Ensures the underline doesn't extend beyond the text */
    }

    .custom-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px !important; /* Thickness of the underline */
        background-color: #31aa97;
        transition: width 0.3s ease; /* Controls the speed and effect of the animation */
    }

    .custom-link:hover::after {
        width: 100%; /* Underline grows to the full width on hover */
    }


/* Add white underline to text links*/ 
    .custom-link-2 {
        position: relative;
        text-decoration: none;
        color: #ffffff;
        display: inline-block;
        overflow: hidden; /* Ensures the underline doesn't extend beyond the text */
    }

    .custom-link-2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1.5px;/* Thickness of the underline */
        background-color: #ffffff;
        transition: width 0.3s ease; /* Controls the speed and effect of the animation */
    }

    .custom-link-2:hover::after {
        width: 100%; /* Underline grows to the full width on hover */
    }

/* Add dark blue underline to text links*/ 
    .custom-link-3 {
        position: relative;
        text-decoration: none;
        color: #07293c;
        display: inline-block;
        overflow: hidden; /* Ensures the underline doesn't extend beyond the text */
    }

    .custom-link-3::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 1.5px; /* Thickness of the underline */
        background-color: #07293c;
        transition: width 0.3s ease; /* Controls the speed and effect of the animation */
    }

    .custom-link-3:hover::after {
        width: 100%; /* Underline grows to the full width on hover */
    }


/*****************************************/
/* 2025 All Hero Section - hide overflowing elements */
/*****************************************/
.hero-section {
  position: relative !important; /* Ensure it acts as a container */
  overflow: hidden !important;   /* Cut off anything overflowing */
  }



/*****************************************/
/* Break Class remove break code in smaller screens */
/*****************************************/
@media (max-width: 991px) {
  .line-break {
    display: none;
  }
}

/* Hide the line break on screens smaller than 992px */
  @media (max-width: 991px) {
    .break-992 {
      display: none;
    }
  }



/*****************************************/
/* 2025 Rounded Corner Background Sections - Pages Affected Hompepage, Why Smart, Solutions page*/
/*****************************************/
/*Add rounded corners to the section backgrounds - Bottom right corner */
.clean-base.round-corner-bottom-left {
  border-radius: 0px 0px 0px 80px;
  overflow: hidden;
}
/*Add rounded corners to the section backgrounds - Top right and bottom left corner */
.clean-base.round-corner-top-right-bottom-left {
  border-radius: 0px 50px 0px 50px;
  overflow: hidden;
 }

/*Add rounded corners to the section backgrounds - Top right corner */
.clean-base.round-corner-top-right {
  border-radius: 0px 60px 0px 0px;
  overflow: hidden;
 }

/* Add rounded corners to the section backgrounds - Bottom right corner */
.clean-base.round-corner-bottom-right {
  border-radius: 0px 0px 150px 0px;
  overflow: hidden;
}


/* Modify rounded corners for smaller screens */
@media screen and (max-width: 800px) {
  .clean-base.round-corner-bottom-right {
    border-radius: 0px 0px 60px 0px;
    overflow: hidden;
  }
}





/*****************************************/
/*Careers Page: Adjust Hover Cards Image on smaller screens*/
/*****************************************/
@media screen and (max-width: 380px) {
  .hover-card-img {
    width: 90px !important;
    height: auto !important;
  }
}  
  
@media screen and (max-width: 290px) {
  .hover-card-img {
    width: 50px !important;
    height: auto !important;
  }
}
  
  @media screen and (max-width: 250px) {
  .hover-card-img {
    width: 0px !important;
    height: auto !important;
  }
}


/*****************************************/
/* Education and Training page - Add bottom padding on the hover cards */
/*****************************************/
@media (max-width: 991px) and (min-width: 921px) {
  .hover-cards .card-col {
    margin-bottom: 30px; /* Adjust spacing as needed */
  }
}


/*****************************************/
/* Solution page - Add rounded corner:  */
/*****************************************/
/*Reduce image icon size on tablet */
@media (min-width: 401px) and (max-width: 899px) {
   .three-column-icons .c-img-1 {
    max-width: 280px !important;
  }
}


/*****************************************/
/* Education and Training Support */
/*****************************************/

/* Horizontal Cards section*/
.horizontal-cards .row {
  border-radius: 20px !important;
  overflow: hidden;
}

@media (min-width: 401px) and (max-width: 899px) {
.horizontal-cards .c-img-1 {
    max-width: 140px !important;
  }
}


/*****************************************/
/* 2025 All Listing Pages like Blogs, Case Studies- Custom Code to make hero section similar to other pages */
/*****************************************/
/* Stack layout and center content on tablets and smaller (≤991px) */
@media (max-width: 991px) {
  /* Stack the two columns vertically */
  .listing-page-smart-wfm .row {
    display: flex;
    flex-direction: column;
  }

/* Make each column take full width */
  .listing-page-smart-wfm .c-col {
    width: 100%;
    max-width: 100%;
  }

/* Center-align all content within column inner container */
  .listing-page-smart-wfm .c-col-inner {
    display: flex !important;
    flex-direction: column !important; /* Stack inner content vertically */
    align-items: center !important;    /* Center horizontally */
    justify-content: center !important;/* Center vertically (if container has height) */
    text-align: center !important;     /* Center inline text */
  }

/* Center content blocks like headings or paragraphs */
  .listing-page-smart-wfm .c-content-con {
    justify-content: center !important;
  }

/* Center-align CTA buttons */
  .listing-page-smart-wfm .c-cta-con {
    text-align: center !important;
  }
}


/* Adjust image size on smaller devices (421px–767px) */
@media (max-width: 991px) and (min-width: 576px) {
  .listing-page-smart-wfm .c-img-1 {
    max-width: 450px !important;
    width: 100%;
    height: auto;
  }
}

/* Adjust image size on smaller devices (371px–575px) */
@media (max-width: 575px) and (min-width: 371px) {
  .listing-page-smart-wfm .c-img-1 {
    max-width: 320px !important;
    width: 100%;
    height: auto;
  }
}

/* Adjust image size on smaller devices (200px–370px) */
@media (max-width: 370px) and (min-width: 200px) {
  .listing-page-smart-wfm .c-img-1 {
    max-width: 230px !important;
    width: 100%;
    height: auto;
  }
}

/* Adjust image positioning on large desktops (≥1140px) */
@media (min-width: 1150px) {
  .listing-page-smart-wfm .c-img-1 {
    position: relative !important;
    right: -130px !important; /* Shift image 130px to the right */
  }
}



/*****************************************/
/* 2025 All Contact Us Section 1 - UKG no body text - Center text and elements on smaller screens */
/*****************************************/
@media (max-width: 991px) {
  .contact-smart-wfm .c-col-inner {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .contact-smart-wfm .c-content-con {
    justify-content: center !important;
  }

  .contact-smart-wfm .c-cta-con {
    text-align: center !important;
  }
}


/*Make image smaller on tablet screens */
@media (max-width: 767px) and (min-width: 421px) {
   .contact-smart-wfm .c-img-1 {
    max-width: 400px !important;
    width: 100%;
    height: auto;
  }
}


/*****************************************/
/* 2025 All Contact Us Section 2 - SmartWFM */
/* Center text and elements on smaller screens */
/*****************************************/
@media (max-width: 991px) {
  .contact-smart-wfm-2 .c-col-inner {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .contact-smart-wfm-2 .c-content-con {
    justify-content: center !important;
  }

  .contact-smart-wfm-2 .c-cta-con {
    text-align: center !important;
  }
}

/* Make image smaller on tablet screens */
@media (max-width: 920px) and (min-width: 421px) {
  .contact-smart-wfm-2 .c-img-1 {
    max-width: 360px !important;
    width: 100%;
    height: auto;
  }
}

/* Stack 2 columns above each other */
@media (max-width: 920px) {
  .contact-smart-wfm-2 .row {
    flex-direction: column !important;
    display: flex; /* Optional if not using Bootstrap */
    flex-wrap: wrap;
  }

  .contact-smart-wfm-2 .c-col {
    width: 100% !important;
    max-width: 100% !important;
  }
}




/* Support and Managed Services page - Add rounded borders */

#technical-support-module .row, 
#quarterly-release-support-module .row, 
#project-support-module .row, 
#advisory-support-module .row {
  border: 2px solid #006771; /* Add 2px border */
  border-radius: 20px !important; /* Add 20px border radius */
  overflow: hidden; /* Ensure child elements respect the border radius */
}

/* Specific borders for other modules */
#quarterly-release-support-module .row {
  border-color: #31aa97 !important;
}

#project-support-module .row {
  border-color: #0161a3 !important;
}

#advisory-support-module .row {
  border-color: #4c4285 !important;
}


/*****************************************/
/* REPLIT TOOL in PRIVATE TOOLS*/
/*****************************************/
/* Replit Tool — combined stylesheet */

#replit-tool {
  --bg: #f3f7f5;
  --panel: #ffffff;
  --ink: #18302c;
  --muted: #5f736f;
  --line: #d8e2df;
  --accent: #0d7b63;
  --accent-strong: #0a5b49;
  --accent-2: #e3f2ed;
  --warn: #8a5a1f;
  --shadow: 0 14px 34px rgba(18, 56, 48, 0.08);
  font-family: "Avenir Next", "Segoe UI", Arial, sans-serif !important;
  background:
    radial-gradient(circle at top left, rgba(13, 123, 99, 0.08), transparent 34%),
    linear-gradient(180deg, #f8fbfa 0%, var(--bg) 100%);
  color: var(--ink);
  line-height: 1.4;
  isolation: isolate;
}

#replit-tool *,
#replit-tool *::before,
#replit-tool *::after {
  box-sizing: border-box;
}

#replit-tool .wrap {
  margin: 0 auto;
  padding: 24px;
}

#replit-tool .topbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding: 22px 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f2faf7 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

#replit-tool .brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

#replit-tool .brand-logo {
  width: 160px;
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}

#replit-tool .brand-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
}

#replit-tool h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.03em !important;
  font-weight: 800 !important;
  text-align: left !important;
}

#replit-tool .subtitle {
  margin: 0;
  color: var(--muted);
  text-align: left;
}

#replit-tool .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#replit-tool button {
  all: unset;
  display: inline-block;
  box-sizing: border-box;
  font-family: "Avenir Next", "Segoe UI", Arial, sans-serif;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
/* END OF REPLIT TOOL CODE*/