/* Import Source Sans Pro font */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap');

/* Apply the font to a specific h1 with class 'custom-h1' */
.custom-h1 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400; /* Explicitly set the font weight to 400 */
}


@font-face {
  font-family: 'Degular Bold';
  src: url('https://47521382.fs1.hubspotusercontent-na1.net/hubfs/47521382/assets/files/fonts/Degular-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.hhs-blog-card-inner .card_post_title {
  font-family: 'Degular Bold', sans-serif !important;
}


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

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



/* Global header */
.hs-menu-children-wrapper {
  border-radius: 12px !important;  /* Adds rounded corners */
}

.hs-menu-children-wrapper > li {
  padding: 4px 15px 4px 15px; /* Adds space around each menu item */
}



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



/* Solutions pages - Set max width for the R graphic on screen sizes 991px and smaller */
@media (max-width: 991px) {
    #r-graphic-section .c-col.c-3 {
        display: flex !important;
        justify-content: flex-end !important; /* Align the image to the right */
    }

    #r-graphic-section .c-col.c-3 img {
        max-width: 40% !important;
        height: auto !important; /* Ensures the width adjusts automatically */
    }
}




/* All pages - Applies the gradient color to text */
.gradient-text {
    background: linear-gradient(to right, #B4DDFF, #ffb5c4);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}



/* Form - Apply gradient background to all form fields */
.hs-form .hs-form-field input,
.hs-form .hs-form-field textarea {
    background: linear-gradient(to right, #B4DDFF, #E1C5DB);
}

/* Form - Apply gradient background to select fields and retain the default arrow */
.hs-form .hs-form-field select {
    background: linear-gradient(to right, #B4DDFF, #E1C5DB);
    appearance: auto; /* Ensures the default arrow is retained */
}



/* Pop-up Form - Gradient background for input, textarea, and select fields */
/* Apply gradient background to all form fields inside the popup */
#hs_form_target_dnd_area-module-3 input,
#hs_form_target_dnd_area-module-3 textarea,
#hs_form_target_dnd_area-module-3 select {
  background: linear-gradient(to right, #B4DDFF, #E1C5DB) !important;
}



/* Flexi tabs on Move & Policy Types page - Move tabs to the left for screen sizes 576px and above */
@media (min-width: 576px) {
    /* Ensure the tab list is aligned to the left within the container */
    .tabs-container {
        display: flex;
        justify-content: flex-start; /* Aligns the tabs to the left */
    }

    /* Set the width of each tab */
    .c-tabs .c-tab {
        width: 180px; /* Set width of each tab */
        text-align: center; /* Ensure text inside each tab is centered */
    }

    /* Remove default margin/padding from the tabs */
    .c-tabs {
        padding: 0;
        margin: 0;
        list-style: none; /* Removes default list styling */
    }
}






/* Text links - Add light underline */
    .underline-link {
        position: relative;
        text-decoration: none;
        color: #FFF5F0;
        display: inline-block;
        overflow: hidden; /* Ensures the underline doesn't extend beyond the text */
    }

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

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



/* Text links - Set the default color to pink and add pink underline */
.underline-link-2 {
    position: relative;
    text-decoration: none;
    color: #FF3A5C; /* Set the default text color */
    display: inline-block;
    overflow: hidden; /* Ensures the underline doesn't extend beyond the text */
}

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

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

/* Ensure the color remains #FF3A5C during hover as well */
.underline-link-2:hover {
    color: #FF3A5C; /* Text color remains the same when hovering */
  
}



/* Solutions Level 1 page - Stack 2nd column images above the 1st column in tablet view*/
@media (max-width: 767px) {
  .solutions-text-image .row {
    display: flex;
    flex-direction: column;
  }

  .solutions-text-image .c-2 {
    order: -1; /* Moves c2 above c1 */
  }

  .solutions-text-image .c-1 {
    order: 1; /* Moves c1 below c2 */
  }
}



/* About Us Page */
@media (max-width: 480px) {
    /* Ensure Leadership Cards Stack */
    .leadership-cards > div {
        display: flex !important;
        flex-direction: column !important;  /* Stack image above text */
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 5px !important;
    }

    /* Remove Absolute Positioning & Ensure Proper Image Alignment */
    .image-container {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
      height: 50% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* Resize Image for Smaller Screens */
    .image-container img {
        width: 100px !important;
        height: 100px !important;
        object-fit: cover !important;
    }

    /* Ensure Text is Properly Positioned Below Image */
    .text-container {
        margin-left: 0 !important;
        padding: 10px !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* Global Reach Number Count Up Module */
/* Medium Screens: Adjust font size for screens between 576px and 1235px */
@media (max-width: 1235px){
    .number-counter-counter_module_17423838908319,
    .number-counter-right-text,
    .number-counter-right-text div {
        font-size: 100px !important; /* Adjusted size for medium screens */
    }
}
/* Mobile Screens: Adjust font size for screens between 576px and 1235px */
@media (max-width: 285px) {
    .number-counter-counter_module_17423838908319,
    .number-counter-right-text,
    .number-counter-right-text div {
        font-size: 60px !important; /* Ensure the override */
    }

    .responsive-hr {
        width: 100px !important; /* Shrinks to 200px on small screens */
    }
}


/* BLOG LISTING PAGE - Change style of the filter by tag dropdown menu */
div.post__filter .post__category-selector {
    color: #FFF5F0 !important;
}


  /* BLOG LISTING AND BLOG POST PAGES - Add rounded corners to cards in blog posts grid cards module */   
.hhs-blog-card-inner {
    border-radius: 12px !important;
    overflow: hidden; /* Ensures content inside the card respects the rounded corners */
}


/* BLOG LISTING AND BLOG POST PAGES - Adjust post title styling */
.hhs-blog-card-inner .card_post_title {
    font-family: 'Degular Bold', sans-serif !important;
    line-height: 1.3 !important; 
}

 

  /* BLOG POST PAGE - Add rounded corners to blog featured images and blog content images */
  .blog-header-full .col-lg-5 img {
    border-radius: 12px;
  }

  .blog-post__body img {
    border-radius: 12px;
  }



/* THANK YOU PAGE - Add rounded corners to entire blog post card */
.hhs-blog-post-card {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* THANK YOU PAGE - Apply font styling to h5 title inside card */
.hhs-blog-post-card h5 {
  font-family: 'Degular Bold', sans-serif !important;
  line-height: 1.3 !important;
}

/* /* THANK YOU PAGE - Change font size of publish date */
.hhs-blog-post-card .hhs-post-meta p {
  font-size: 16px !important;
}

/* /* THANK YOU PAGE - Adjust styling of post summary */
.hhs-blog-post-card .hhs-post-summary {
  color: #FFF5F0 !important;
  line-height: 1.6 !important;
}



/* FORM SUBMIT BUTTON - Add margin to the top of submit buttons in all forms */
.hs-button.primary.large {
  margin-top: 24px; /* Adjust the value as needed */
}



/*HOME PAGE - Content Tab - Align image at the bottom of the section*/

/* Remove link bottom padding for mobile screens */
  @media (max-width:620px) {
  .home-tab-responsive-margin {
    margin-bottom: 0 !important;
  }
}
/* Remove image bottom padding */
/* Remove margin and padding for .img-slide-con and its child images */
.homepage-tabs .img-slide-con {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.homepage-tabs .img-slide-con .img-item {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}


/* Default styles for mobile (below 580px) */
.homepage-tabs .img-slide-con .img-item {
  position: static;
  height: auto;
  bottom: 0;
}

/* Apply bottom alignment only for 580px and up */
@media (min-width: 580px)  {
  .homepage-tabs .img-slide-con {
    position: relative;
  }
  .homepage-tabs .img-slide-con .img-item {
    position: absolute;
    right: 0;
  }
}

  .homepage-tabs .img-slide-con {
    position: relative; /* Ensure the container is still positioned */
  }
}