/* @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    */
/*****************************************/

/* Keyframes stay exactly the same */
@keyframes dropIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dropOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Make this a shared class instead of a single ID */
.rotating-word {
  display: inline-block;
  position: relative;
}

/* Class to trigger the dropIn animation */
.drop-in {
  animation: dropIn 0.5s ease-out forwards;
}

/* Class to trigger the dropOut animation */
.drop-out {
  animation: dropOut 0.5s ease-out forwards;
}

.footer-gradient {
    position: relative;
    z-index: 0; /* This prevents it from overlapping the floating box */
}

/* Underline active nav item using text-decoration */
li.header__menu-link--active-link > a.header__menu-link {
  color: #eda63b !important;
  text-decoration: underline !important;
  text-decoration-color: #eda63b !important;
  text-underline-offset: 5px;
}

.footer-box {
    margin-left: auto;  /* Centers the box */
    margin-right: auto; /* Centers the box */
    display: block;
    background-color: #233050;
    position: relative; /* Ensures it stacks correctly above the footer */
    margin-bottom: -60px; /* Now correctly overlaps the footer */
    width: 90%; /* Ensures it fits within the content area */
    padding-top: 60px; /* Adds space inside the box */
    padding-bottom: 60px; /* Adds space inside the box */
    padding-left: 30px; /* Adds space inside the box */
    padding-right: 30px; /* Adds space inside the box */
    text-align: center; /* Centers text and elements */
    color: #ffffff; /* Text color */
    /* box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2); Adds slight shadow for separation */
    z-index: 9999; /* Ensures it's on top of the footer */
}

.content-blue-box {
    margin-left: auto;  /* Centers the box */
    margin-right: auto; /* Centers the box */
    display: block;
    background-color: #233050;
    margin-bottom: 10px; /* Now correctly overlaps the footer */
    width: 92%; /* Ensures it fits within the content area */
    padding-top: 60px; /* Adds space inside the box */
    padding-bottom: 60px; /* Adds space inside the box */
    padding-left: 30px; /* Adds space inside the box */
    padding-right: 30px; /* Adds space inside the box */
    text-align: center; /* Centers text and elements */
    color: #ffffff; /* Text color */
}

.icon-img {
    max-width: 90px;
    max-height: 90px;
    width: 90px !important;
    height: 90px !important;
    padding-left:6px;
    padding-right:6px;
    padding-bottom:12px;
}

/* Styling for DIVs on Approach page with icons on left */
.approach-img-with-text {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-left: 3%;
  margin-bottom: 20px;
}

/* MOBILE / TABLET VIEW: stack image on top of text */
@media (max-width: 767px) {
  .approach-img-with-text {
    flex-direction: column;
    align-items: center; /* optional if you want the image centered on mobile */
  }
}


/* Create space to the left of the header logo */
.header__logo img {
 margin-left:4.5vw; !important
}

/* Create space to the right of the main nav button */
#hs_cos_wrapper_module_0 .header__container[data-topbar-fixed=true] .header__bottom {
  padding-right:5%; !important
}

/* Center the FAQ title text */
.accordion-plus-dw-widget_1741390484238-title {
 text-align:center; !important
}

/* Default: No forced line break */
.responsive-break::before {
    content: " ";
}

/* Large screens: Force a line break */
@media (min-width: 1024px) { 
    .responsive-break::before {
        content: "\A"; /* Forces line break */
        white-space: pre; /* Preserves the break */
    }
}

.white-body-text {
    font-size: 18px;
    color: #ffffff;
    line-height: 130%;
    font-weight: 400;
    word-wrap: break-word; /* Prevents overflow issues */
}

.gold-bold-body-text {
    font-size: 18px;
    color: #EDC742;
    line-height: 130%;
    font-weight: 600;
    word-wrap: break-word;
}

.white-body-text-smaller {
    font-size: 15px;
    color: #ffffff;
    line-height: 130%;
    font-weight: 400;
    word-wrap: break-word; /* Prevents overflow issues */
}

.white-body-text-smaller-bold {
    font-size: 15px;
    color: #ffffff;
    line-height: 100%;
    font-weight: 600;
    word-wrap: break-word; /* Prevents overflow issues */
}

.white-body-text a {
    text-decoration: underline;
    text-decoration-color: #fff;
    color: #fff;
}

h2 {
  line-height: 130%;
}

.white-h2-text {
    color: #ffffff;
}

.body-text {
    font-size: 18px;
    color: #223050;
    line-height: 130%;
    font-weight: 400;
    word-wrap: break-word; /* Prevents overflow issues */
}

.body-text-bold {
    font-size: 18px;
    color: #223050;
    line-height: 130%;
    font-weight: 600;
    word-wrap: break-word; /* Prevents overflow issues */
}

.body-text-smaller {
    font-size: 15px;
    color: #223050;
    line-height: 130%;
    font-weight: 400;
    word-wrap: break-word; /* Prevents overflow issues */
}

.body-text a {
    text-decoration: underline;
    text-decoration-color: #367d63;
}

.body-text a:hover {
    text-decoration: underline;
    text-decoration-color: #eda63b;
}

.body-text-green {
  font-size: 18px; 
  color: #367d63;
  font-weight: 600;
  line-height:200%;
  word-wrap: break-word; /* Prevents overflow issues */
}

.body-text-green a {
    text-decoration: underline;
    text-decoration-color: #367d63;
}

.training-line-items {
  padding-bottom:10px;
  font-size: 18px;
  color: #223050;
  line-height: 130%;
  font-weight: 400;
}

.small-text {
    font-size: 14px; 
    color: #223050;
    line-height: 130%;
    font-weight: 400;
}

.small-text-strong {
    font-size: 14px; 
    color: #223050;
    line-height: 130%;
    font-weight: 600;
}

.icons-single-row {
     padding-left: 5%;
     padding-right: 5%;
     margin-top: 0px;
     margin-bottom: 45px;
     text-align: center;
}

/* Backstory page main container for the layout */
.backstory-container {
    display: flex;
    align-items: flex-start; /* Aligns content to the top */
    gap: 20px; /* Creates space between columns */
    padding: 20px;
    margin: 0 auto; /* Centers the section */
}

/* Image column styling */
.backstory-icon-column {
    flex: 0 0 150px; /* Ensures the column does not shrink */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
}

/* Image inside the column */
.backstory-icon-column img {
    width: 150px;
    height: 150px;
    object-fit: contain; /* Ensures the image fits without distortion */
}

/* Text column styling */
.backstory-text-column {
    flex: 1; /* Takes up remaining space */
    text-align: left;
}

/* Responsive Design */
@media (max-width: 768px) {
    .backstory-container {
        flex-direction: column; /* Stacks columns on mobile */
        align-items: center;
        text-align: center;
    }

    .backstory-icon-column {
        margin-bottom: 15px; /* Adds space below the image */
    }

    .backstory-text-column {
        text-align: left; /* Ensures text stays left-aligned on smaller screens */
    }
}

/* Backstory Page Founding Partners Icons */
.founding-partners-row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centers images vertically */
    padding-left: 5%;
    padding-right: 5%;
    margin-top: 0;
    margin-bottom: 45px;
    flex-wrap: wrap; /* Allows items to wrap for mobile */
}

.founding-partners-column {
    width: 14%;
    text-align: center;
    padding: 5px;
    display: flex;
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
}

/* Mobile Layout: Stack all images in a column */
@media (max-width: 768px) {
    .founding-partners-row {
        flex-direction: column; /* Stacks all images */
        align-items: center; /* Centers content */
        padding-left: 5%;
        padding-right: 5%;
    }

    .founding-partners-column {
        width: 80%; /* Full width for each image */
        margin-bottom: 25px; /* Adds spacing between images */
    }
}

/* TESTIMONIALS MODULE STYLING */
.room120_tstmnls__text {
  padding-top: 15px;
  text-align:center !important;
}

.room120_tstmnls__author-name {
  text-align: center !important;
  font-weight: 500 !important;
  padding-bottom: 15px !important;
}

.room120_tstmnls__author-inner {
  display: block;
  width: 100%;
}

.room120_tstmnls_testimonial {
  border-top: 20px solid #eda63b !important;
  padding-top: 20px;
  border-bottom: 20px solid #eda63b !important;
  padding-bottom: 20px;
}

#hs_cos_wrapper_widget_1743013127889 .room120_tstmnls_testimonial:after {
  display:none !important;
}

#hs_cos_wrapper_widget_1743020082190 .room120_tstmnls_testimonial:after {
  display:none !important;
}

#hs_cos_wrapper_widget_1743048334724 .room120_tstmnls_testimonial:after {
  display:none !important;
}

/* --- GLOBAL FOOTER LAYOUT --- */
.sr-footer-01 .container {
  max-width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}

/* Main row should not wrap */
.sr-footer-01 .sr-footer-nav .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Lock logo and nav columns */
.sr-footer-01 .col-md-3 {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin-right: 40px;
}

.sr-footer-01 .col-md-9 {
  flex: 1 1 auto;
  width: 100%;
}

/* --- FONT SIZES --- */
.sr-footer-01 .sr-footer-nav li a {
  font-size: 14px !important;
  color: #223050 !important;
}

.sr-footer-01 .sr-footer-nav .hs-menu-depth-2 > a {
  font-size: 13px !important;
  color:#223050 !important;
}

/* --- NAV SPACING DESKTOP --- */
.sr-footer-01 .hs-menu-wrapper > ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 60px !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sr-footer-01 .hs-menu-wrapper > ul > li.hs-menu-depth-1 {
  margin-right: 0 !important;
  padding-right: 0 !important;
  flex-shrink: 0;
}


/* --- MOBILE LAYOUT FIXES --- */
@media (max-width: 767px) {
  .sr-footer-01 .sr-footer-nav .row {
    flex-direction: column !important;
  }

  .sr-footer-01 .col-md-3,
  .sr-footer-01 .col-md-9 {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding-left: 5%;
    padding-right: 5%;
  }

  .sr-footer-01 .hs-menu-wrapper > ul {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: flex-start !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .sr-footer-01 .hs-menu-wrapper > ul > li.hs-menu-depth-1 {
    margin-bottom: 4px !important;
  }

  .sr-footer-01 .footer-logo img {
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
  }
}

/* Footer: Copyright and Legal Links */

.footer-logo-social {
  padding-top: 0 !important; /* Remove extra space above */
  padding-bottom: 20px !important; /* Add spacing below */
  margin-top: 0 !important; /* Prevent any top margin from modules */
}

.footer-logo-social .container {
  max-width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}

.footer-logo-social .footer-copyright {
  text-align: left !important;
}

.footer-logo-social p.small {
  font-size: 13px;
  margin: 0;
  line-height: 1.6;
}

.footer-logo-social a {
  color: #223050;
  text-decoration: underline;
}

.footer-logo-social a:hover {
  color: #eda63b;
  text-decoration: underline;
}

/* Blog Styling */

.blogs-cards.post_items.box.all.clients {
    background-color: #F5F5F5 !important;
}

.blogs-cards.post_items.box.all.professionals {
    background-color: #F5F5F5 !important;
}

.blogs-cards.post_items.box.all.caregivers {
    background-color: #F5F5F5 !important;
}

.blogs-cards.post_items {
    background-color: #fff !important;
}

/* Pop-in images base state: hidden + slightly translated */
.pop-in-col {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Pop-in images Active state: fully visible, no translation */
.pop-in-col.pop-in-active {
  opacity: 1;
  transform: translateY(0);
}

/* green backdrop */
.card-section{padding:3rem 1.5rem;}

/* three‑column grid that collapses fluidly */
.card-grid{
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(3,1fr);   /* <- max 3 columns */
  width:100%;
}

/* two‑up on medium screens */
@media (max-width: 992px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
}

/* single column on phones */
@media (max-width: 600px){
  .card-grid{grid-template-columns:1fr;}
}




/* CARD */
.card{
  background:#fff;
  border-top:16px solid #0f3543;      /* accent bars */
  border-bottom:16px solid #0f3543;
  box-shadow:0 2px 4px rgba(0,0,0,.04);
  display:flex;            /* lets body stretch */
  flex-direction:column;
}

/* inner padding / typography — tweak as you like */
.card__body{
  padding:2rem 1.5rem;
  text-align:center;
}
.card__body small{
  display:block;
  margin-top:.75rem;
}

/* (optional) bigger gap on widescreens */
@media(min-width:768px){.card-grid{gap:2.5rem}}