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


/********************************** ALL PAGES **********************************/
/* product cards card size adjustment */


.c-card.slide_left{
  height: 200px !important;
}
/* sticky menu should not open in tablet/mobile */
@media (max-width: 768px){
  .sticky-menu.active{
      display: none;
    }
  .filter-layout-container{
      flex-wrap: wrap !important;
  }
  .filter-layout-container .filter-container:nth-child(2){
      margin-top: 10px;
  }
  .clean-base .c-2, .clean-base .c-3{
      margin-top: 0px !important;
  }
  #resources-products{
    margin-top: 20px;
  }
}
/* Move search bar down */
@media (min-width: 851px) {
    /* Ensuring the parent container is relative */
    .hhs-nav-grid__extras { /* Corrected class name */
        position: relative;
    }

    .hs-search-field__bar {
        position: absolute !important;
        top: 65px !important; /* Adjusted positioning to move it down */
        z-index: 1000 !important;
    }
}



/* Hide the line break on screens smaller than 457px */
  @media (max-width: 457px) {
    .break-992 {
      display: none;
    }
    .c-card.slide_left{
      height: 250px !important;
    }
    .hover-link{
      right: 15px !important;
    }
    .c-card .hover-overlay{
      top: 10px !important;
    }
    
  }



/* Applies the blue-purple gradient color to text */
.gradient-text {
    background: linear-gradient(45deg, #27A3E6, #00C9A7);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}


/* Change bullet points to white for lists */
.white-bullets li {
    color: #ffffff !important;
}


/* Add dark underline to text links */
.underline-link {
  position: relative;
  text-decoration: none;
  color: #1B2830;
  display: inline-block;
  line-height: 1.2; /* Optional: helps prevent shift on hover */
}

.underline-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: #1B2830;
  transition: width 0.3s ease;
}

.underline-link:hover::after {
  width: 100%;
}



/* Hero sections with rotating background images - Change background overlay on small screens */
@media screen and (max-width: 799px) {
#hero-section .s-overlay {
    background: rgba(27, 40, 48, 0.75) !important;
  }
}




/*** All Flexi Cards modules - Remove bottom padding ***/
.c-card-content p {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}



/*** PRODUCTS SECTION - HOVER CARDS MODULE ***/
/* Remove subtitle */
#product-hover-cards .hover-card-type-title {
  display: none !important;
}


/* Shrink background image and adjust position */
#product-hover-cards .hover-overlay {
  background-size: auto 58% !important;          /* Shrink image height more */
  background-repeat: no-repeat !important;
  background-position: center top 75px !important; 
}


/* Enable smooth transitions for background and text */
#product-hover-cards .c-card {
  transition: background-color 0.9s ease, color 1.5s ease;
  padding: 15px !important;
}


/* Change background color and text to white on hover */
#product-hover-cards .c-card:hover {
  background-color: #1B2830 !important;
  color: #ffffff !important;
}

/* Ensure specific inner elements also turn white */
#product-hover-cards .c-card:hover .hover-card-title,
#product-hover-cards .c-card:hover .hover-description,
#product-hover-cards .c-card:hover .hover-link {
  color: #ffffff !important;
  transition: color 0.4s ease;
}

/* Make the SVG arrow inside 'Learn More' white */
#product-hover-cards .c-card:hover .hover-link svg path {
  fill: #ffffff !important;
  transition: fill 0.4s ease;
}

/* Change layout from 5 cards to 2 cards per row on screen size 1276px and smaller */
@media (min-width: 600px) and (max-width: 1276px) {
 #product-hover-cards .filter-card {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}



/*** BELOW THE FOLD/FEATURE TILES SECTION - HOVER CARDS MODULE ***/
/* 3 cards per row on screen widths from 1267px down to 885px */
@media (max-width: 1267px) and (min-width: 885px) {
  #below-the-fold-new .c-hover-cards-row .card-col {
    width: 33.333% !important;
    max-width: 33.333% !important;
    flex: 0 0 33.333% !important;
  }
}

/* 2 cards per row on screen widths from 884px down to 768px */
@media (max-width: 884px) and (min-width: 768px) {
  #below-the-fold-new .c-hover-cards-row .card-col {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}

/* 1 card per row on screen widths 599px and smaller */
@media (max-width: 767px) {
  #below-the-fold-new .c-hover-cards-row .card-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}


/* Default: Move image down and resize height */
#below-the-fold-new .c-hover-card-container .c-hover-img {
  height: 70% !important;
  display: block;
  margin: 0 auto; /* centers horizontally */
  transform: translateY(70px);
}

/* Medium screens (between 767px and 1267px) */
@media (max-width: 1267px) and (min-width: 767px) {
  #below-the-fold-new .c-hover-card-container .c-hover-img {
    height: 100% !important;
    transform: translateY(60px);
  }
}

/* Small screens (766px and below) */
@media (max-width: 766px) {
  #below-the-fold-new .c-hover-card-container .c-hover-img {
    height: 100% !important;
    transform: translateY(55px);
  }
}


/* Align text to the center */
#below-the-fold-new .c-hover-card-front .inner-con,
#below-the-fold-new .c-hover-card-back .inner-con {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}


/********************************** END OF ALL PAGES **********************************/



/********************************** HOME PAGE **********************************/

/*** HERO SECTION - Change color of rotating text ***/
.rotating-text .animated {
  background: linear-gradient(45deg, #27A3E6, #00C9A7);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* Ensures compatibility on WebKit */
}



/* From brief to build section - Add rounded corners and border */
#next-steps-section .row {
  border-radius: 12px;         /* 12px rounded corners */
  overflow: hidden;            /* ensure child corners are clipped */
}

#next-steps-section {
  border-radius: 12px;            /* your rounded corners */
  overflow:      hidden;          /* clip both child content & shadows */
}



/*** INDUSTRIES SECTION - HOVER CARDS MODULE ***/
/* Remove subtitle */
#industry-hover-cards .hover-card-type-title {
  display: none !important;
}


/* Fit background image width to card width (default) */
#industry-hover-cards .hover-overlay {
  background-size: 130% auto !important;
  background-repeat: no-repeat !important;
  background-position: center top 65px !important;
}

/* Override for screens 600px and below */
@media screen and (max-width: 600px) {
  #industry-hover-cards .hover-overlay {
    background-size: 100% auto !important;
    background-position: center top 50px !important;
  }
}



/* Enable smooth transitions for background and text and adjust inner padding */
#industry-hover-cards .c-card {
  transition: background-color 0.9s ease, color 1.5s ease;
  padding: 20px !important;
}

/* Change background color and text to white on hover */
#industry-hover-cards .c-card:hover {
  background-color: #1B2830 !important;
  color: #ffffff !important;
}

/* Ensure specific inner elements also turn white */
#industry-hover-cards .c-card:hover .hover-card-title,
#industry-hover-cards .c-card:hover .hover-description,
#industry-hover-cards .c-card:hover .hover-link {
  color: #ffffff !important;
  transition: color 0.4s ease;
}

/* Make the SVG arrow inside 'Learn More' white */
#industry-hover-cards .c-card:hover .hover-link svg path {
  fill: #ffffff !important;
  transition: fill 0.4s ease;
}

@media (min-width: 885px) and (max-width: 1276px) {
  #industry-hover-cards .filter-card {
    width: 33.33% !important;
    max-width: 33.33% !important;
    flex: 0 0 33.33% !important;
  }
}





/*** REMKO HIRE SECTION - CONTENT SLIDER MODULE ***/

@media (min-width: 992px) {
  /* 70% width for the left (fixed text) column */
  #remko-slider .c-fixed-text-container-3 {
    width: 60% !important;
    max-width: 60% !important;
    flex: 0 0 60% !important;
  }

  /* 30% width for the right (slider) column */
  #remko-slider .c-slider-inner-container-3 {
    width: 40% !important;
    max-width: 40% !important;
    flex: 0 0 40% !important;
  }
}

}


/* Fix and center the slick dots properly */
#remko-slider .c-slider-inner-container-3 .slick-dots {
  width: 100% !important;
  text-align: center !important;
  padding-top: 16px;
  margin: 0 auto !important;
  display: block !important;
  position: relative !important;
  bottom: 0;
}

#remko-slider .c-slider-inner-container-3 .slick-dots li {
  display: inline-block !important;
  float: none !important;
}

#remko-slider .c-slider-inner-container-3 .slick-dots li button {
  margin: 0 6px !important;
}



/********************************** END OF HOME PAGE **********************************/



/********************************** CATEGORY LEVEL PAGES **********************************/

/*** PRODUCTS SECTION - HOVER CARDS MODULE ***/
/* Remove subtitle */
#other-series-product-hover-cards .hover-card-type-title {
  display: none !important;
}


/* Shrink background image and adjust position */
#other-series-product-hover-cards .hover-overlay {
  background-size: auto 65% !important;          /* Shrink image height more */
  background-repeat: no-repeat !important;
  background-position: center top 55px !important; 
}


/* Enable smooth transitions for background and text */
#other-series-product-hover-cards .c-card {
  transition: background-color 0.9s ease, color 1.5s ease;
  padding: 15px !important;
}


/* Change background color and text to white on hover */
#other-series-product-hover-cards .c-card:hover {
  background-color: #1B2830 !important;
  color: #ffffff !important;
}

/* Ensure specific inner elements also turn white */
#other-series-product-hover-cards .c-card:hover .hover-card-title,
#other-series-product-hover-cards .c-card:hover .hover-description,
#other-series-product-hover-cards .c-card:hover .hover-link {
  color: #ffffff !important;
  transition: color 0.4s ease;
}

/* Make the SVG arrow inside 'Learn More' white */
#other-series-product-hover-cards .c-card:hover .hover-link svg path {
  fill: #ffffff !important;
  transition: fill 0.4s ease;
}

/* Change layout from 5 cards to 2 cards per row on screen size 1276px and smaller */
@media (min-width: 600px) and (max-width: 1276px) {
#other-series-product-hover-cards .filter-card {
    width: 50% !important;
    max-width: 50% !important;
    flex: 0 0 50% !important;
  }
}
/********************************** END OF CATEGORY LEVEL PAGES **********************************/



/********************************** SUB-CATEGORY LEVEL PAGES **********************************/

/* Reduce top and bottom padding of the entire section */
#product-rows .c-content-con.c-in-3 {
  margin-top: -20px !important;
  margin-bottom: -10px !important;
}

/* Reduce line spacing between bullet points */
#product-rows .c-custom-bullets-con li {
  margin-bottom: 4px; /* adjust as needed */
  line-height: 1.4;   /* tighter line height */
}

/********************************** END OF SUB-CATEGORY LEVEL PAGES **********************************/




/********************************** PRODUCT LEVEL PAGES **********************************/


/*** PRODUCT DETAIL MODULE ***/
/* Hide the price section */
.product-description-col .price-row {
  display: none !important;
}

/* Hide the line divider */
.product-description-col .line-divider {
  display: none !important;
}


/*** MAGIC MODULE WITH ACCORDIONS ***/

/* Between 1155px and 993px: pull up less (only 120px) */
@media (max-width: 1155px) and (min-width: 993px) {
  #magic-module-accordions .c-col.c-2 {
    top: 180px;
    margin-bottom: 200px;
  }
}


/********************************** END OF PRODUCT LEVEL PAGES **********************************/