body.no-scroll{overflow: hidden;}

.cais-suggestions {
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    max-width: 420px;
    z-index: 9999;
    display: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.cais-suggest-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cais-suggest-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
}

.cais-suggest-item:hover {
    background: #f7f7f7;
}

.cais-overview-box {
    background: #fbfbfb;
    border: 1px solid #e1e1e1;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: 6px;
}

.cais-related-links {
    list-style: disc;
    padding-left: 20px;
}

.cais-no-results {
    padding: 12px;
    margin-bottom: 12px;
}


 .chatBox{
    margin-top: 20px;
}

.AISearchInput{
    flex-grow: 1;
}

.toggleAIBox{
    margin-left: 30px;
}

.chatView::-webkit-scrollbar {
width: 6px;
height: 6px;
}

.chatView::-webkit-scrollbar-track {
background: #e6f1ff;
border-radius: 5px;
}

.chatView::-webkit-scrollbar-thumb {
background: #007bff;
border-radius: 5px;
}

.chatView::-webkit-scrollbar-thumb:hover {
width: 8px
}

.chatView::-webkit-scrollbar:vertical {
width: 6px;
}

.chatView::-webkit-scrollbar:horizontal {
height: 6px;
}
.chatView{
    max-height: 60vh;
    overflow-y: auto;
    /* max-width: 90%; */
}
.chatQueryTitle{
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: nowrap;
}
.chatQueryTitle h4{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 8px;
}
.chatQueryTitle svg{
    min-width: 32px
}
.noSpacing{
    margin: 0px;
    padding: 0px;
}
.chatQueryContent ul {
padding: 0 0 20px 10px;
}
.chatQueryContent ul li {
    ul li {
    position: relative;
    padding: 5px 0 5px 5px;
    list-style-type: disc;
    text-align: left;
    color: #5b5b5b;
}
}
.chatRelated .wp-6{
    padding: 16px;
}
.chatRelated .wp-6 a{
    display: block;
    height: 100%;
    color: #290029;
    border-bottom: none;
}
.relatedCard{
    height: 100%;
    box-shadow: 4px 4px 18px 0 rgba(0, 0, 0, .15);
    border-radius: 12px;
    padding: 20px;
    position: relative;
}
.relatedCard .content{
    margin-top: 24px;
}
.relatedCard h5{
    color: #007BFF;
    display: inline;
    border-bottom: 2px solid transparent;
    transition: all .3s ease;
}
.relatedCard p{
    margin-top: 8px;
}
.relatedType{
    position: absolute;
    background: #000;
    color: #fff;
    padding: 3px 9px;
    top: 0;
    left: 0;
    margin-left: 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 14px;
}
.chatRelated .wp-6 a:hover .relatedCard h5{
    border-bottom: 2px solid #007BFF;
}
.chatAction{
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #d6d5dd;
    border-bottom: 1px solid #d6d5dd;
    padding: 8px 8px 0px 8px;
    margin: 20px 0px;
}
.chatInput{ 
    background: #eee;
    align-items: center;
    border-radius: 8px;
    padding: 8px;
    margin: 20px 0px;
    flex-wrap: nowrap;
}
/* .chatInput textarea{
    width: auto;
    flex-grow: 1;
    border: none;
    background: transparent;
    padding: 0px 16px;
    height: auto;
} */
.chatInput button {
    min-width: fit-content;
    padding: 4px;
    width: 40px;
    height: 40px;
}
.chatInput button::before {
    background: url(../magnifireSearch.svg) no-repeat center;
    width: 100%;
    right: 0px;
    height: 100%;
    top: 0;
}
.chatInput button:hover::before {
    background: #0071ea url(../magnifireSearch.svg) no-repeat center !important;
    right: 0;
    top: 0;
    opacity: 0.5;
}
.cais-ai-header h4 {
    padding-left: 40px;
    background: url(../magicImg.svg) no-repeat left;
}

.chatInput button svg{
    max-width: 32px;
    width: 32px;
}
.chatInput button:hover svg .cls-2{
    stroke: #007BFF;
}
.relatedContent h4{
    margin-bottom: 8px;
}
.relatedContent ul{
    padding: 0px;
}
.relatedContent li{
    list-style-type: none;
}
.relatedContent a{
    color: #5b5b5b;
    border-bottom: none;
     position: relative;
     display: inline-block;
}

.cais-copy-btn {
    min-width: fit-content;
    padding: 7px 18px !important;
    font-size: 0 !important;
    margin-right: 5px;
  }
  .cais-copy-btn::before {
    min-width: fit-content;
    padding: 0 !important;
    left: 10px;
    top: 0;
  }

#cais-search-page-answer .learnMoreBtn::after {transform: rotate(360deg) !important; background: unset !important;}
li.cais-result-count a svg {height: 100%; fill: #007bff; margin-top: 6px; line-height: .9; gap: 8px; max-width: fit-content; transition: transform 0.3s ease;}
.cais-result-count a {border-bottom: unset; display: flex; gap: 12px;}
li.cais-result-count a svg:hover {fill: #99c9ff;}
.cais-result-count a:hover {border-bottom: unset;}
.cais-result-count svg path {fill: currentColor; transition: fill 0.3s ease;}
#resultsList li:last-child {border-bottom: none;padding: 10px 22px; background-color: unset !important; left: 16px;}
li.cais-result-count:hover a svg {transform: translateX(7px);}
/* .cais-no-results span.learnMoreBtn:hover:after {filter: brightness(0.7) !important; opacity: 0.4; right: -8px;}
.cais-no-results span.learnMoreBtn {transition: all .5s cubic-bezier(.16, .84, .44, 1);}
.cais-no-results .learnMoreBtn::after {top: 6px !important;} */

.cais-no-results span.learnMoreBtn a:hover:after{filter: brightness(0.7) !important; opacity: 0.4; right: -8px;}
span.talk-ai a {transition: all .5s cubic-bezier(.16, .84, .44, 1); position: relative; padding-right: 25px; border: unset;}
.talk-ai a::after{content: ""; position: absolute; right: 0px; top: 3px; width: 15px; height: 15px; background: url(https://eclerx.com/wp-content/themes/eclerx-digital-Gulp/assets/images/learnMoreArrow.svg) no-repeat; transition: all .5s cubic-bezier(.16, .84, .44, 1)}
.cais-no-results span.learnMoreBtn {transition: all .5s cubic-bezier(.16, .84, .44, 1);}

.cais-related-section {position: relative; margin-bottom: 30px; padding-bottom: 35px;}
.cais-related-section::after {content: ""; position: absolute; left: 0; bottom: 0; width: 99%; height: 1px; background: #e5e7eb;}

section.relatedContent.TB-Space a:hover {color: #007bfe; transition: transform .4s ease-in-out; border-bottom: unset;}
a.popular-search-item a {transition: transform .4s ease-in-out;}
section.relatedContent.TB-Space a::after {content: ""; position: absolute; left: 0;bottom: -2px; width: 100%; height: 1px; background-color: #007bff; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;}
section.relatedContent.TB-Space a:hover::after {transform: scaleX(1);}
.header .searchItems { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;}
.header .searchItems svg {margin-right: -20px; margin-left: 5px;}


@media (max-width: 640px){

  
  .cais-copy-btn {
    min-width: fit-content;
    padding: 7px 18px !important;
    font-size: 0 !important;
    margin-right: 5px;
  }
  .cais-copy-btn::before {
    min-width: fit-content;
    padding: 0 !important;
    left: 10px;
    top: 0;
  }

    .chatRelated .wp-6{
        width: 100%;
    }
    .relatedContent .wp-4{
        width: 50%;
    }
.cais-no-results .learnMoreBtn::after{top: 2px !important;}
div#aiBoxHighlight {display: flex;flex-direction: column;}
  .AISearchInput {width: 100%;}
  .toggleAIBox {margin-top: 15px !important; margin-bottom: 10px !important;}
  .toggleAIBox span.ai-label {margin-left: 0px;}
  .switchAI input:checked + .toggleSlider::before{top: 0px !important; left: 10px !important; height: 18px !important; width: 16px !important;}
  .toggleBackground{width: 25px !important; height: 23px !important; top: -1.5px !important;} 
  .toggleAIBox {margin-left: auto !important;}
  .Aioverlay-header{padding: 10px 0px !important;}  
  .toggleSlider{width: 56px !important; height: 24px !important;}
  .toggleSlider:before{top: 1px !important;}
  .search-icon span {display: none;}
  .activeSearch .search-icon svg {display: none;}
  .activeSearch span {display: block;}
  .search-icon svg {fill: #fff;}
  body.search-results .search-icon svg {fill: #000;}
  .sticky .search-icon svg {fill: #1f1259;}
  .search-icon{margin: 0 !important; height: 28px !important;} 
  .tagsBtn .each-search{flex: 0 0 40%;}
  span.talk-ai a {  z-index: 9;  position: absolute;  font-size: 0;  top: 5px; }
  /* .left-results, .right-info{max-height: 600px !important;} */
  #resultsList li .cias-inner-item{ margin: 6px 15px 8px 15px !important; padding: 4px 12px 4px 12px !important;}
  #resultsList li.cais-result-item::after{left: 20px !important;}
  #resultsList li:last-child{left: -2px !important;}
  .searchAIData {  position: relative;  height: 100%;}
  .searchAIData .innerContainer { height: 75%;}
  div#resultSection, .left-results { height: 100% !important;}

  .navActive .search-icon svg {fill: #000;}

}


/* Search Ai css start here */

.Aioverlay-header { padding: 15px 0;}
#openSearch img { width: 30px; height: 30px;}
div#openSearch { cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; color: #ffffff;  -webkit-box-align: center;  -ms-flex-align: center;  align-items: center; width: fit-content; transition: all .5s ease-in-out;}
.singleDesc div#openSearch, .header.sticky div#openSearch { color: #1e1919;}
.singleDesc div#openSearch img, .header.sticky div#openSearch img {filter: invert(1);}
#openSearch:hover {color: #99c9ff !important;}
.sticky #openSearch:hover {color: #007bff !important;}
.Aioverlay-header .logo_wrapper {width: 11% !important;}
.Aioverlay-header .logo_wrapper img {
    height: 30px !important;
}

.Aioverlay { position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(10,10,10,0.95); padding: 0 10px 20px; display: none; 
        -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 99999;
}
@media (max-width: 1180px) {
  .Aioverlay {
    top: 65px;
  }
  .search-icon span {
      display: none;
  }
 .activeSearch span {display: block;}
  .search-icon svg {fill: #fff;}
  body.search-results .search-icon svg {fill: #000;}
  .sticky .search-icon svg {fill: #1f1259;}
  .activeSearch .search-icon svg {display: none;}
  span#closeSearch {
      display: none;
  }
}



@media (max-width: 1180px) {
  .Aioverlay-header .logo_wrapper {
    display: none !important;
  }
}

@media only screen and (max-width: 475px) {
   .cais-related-card {
      min-width: 300px !important;
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }

    .cais-related-track {
      gap: 16px; /* optional smaller gap */
    }

}

.Aioverlay-header, .searchAIData {  max-width: 1440px;  margin: 0 auto; 
    padding-left: max(30px, min(30px + 70 * (100vw - 1024px) / 416, 100px)) !important;  padding-right: max(30px, min(30px + 70 * (100vw - 1024px) / 416, 100px)) !important;  
}
.searchAIData .innerContainer { margin-top: 40px; background-color: #ffffff; color: black; border-radius:0px 0px 12px 12px; padding: 0; max-height: 85vh;  overflow-y: auto; border:none; border: 4px solid #FFF; border-top: 0;
}

#searchOverlay:has(#aiToggle:checked) .searchAIData .innerContainer {
    border: 4px solid #99C9FF;
    border-top: 0;
}
.singleDesc .Aioverlay .eclerxHeadLogo img, .Aioverlay-header .Aioverlay .eclerxHeadLogo img {  
    height: auto; -webkit-filter: invert(1) grayscale(1) !important; filter: invert(1) grayscale(1) !important;
}
.Aioverlay-header input[type=text] { min-width: 500px; height: auto; padding: 10px 15px; border-radius: 6px;  border: 1px solid #555; background: #111; color: white; font-size: 16px; }
.switchAI { position: relative; width: 45px; height: 25px; margin-right: 20px;}
.switchAI input { display: none; }
span#closeSearch { color: #fff;  margin-left: 20px; font-size: 25px;cursor: pointer;}

.toggleSlider { position: absolute; background: #444; width: 60px; height: 30px; border-radius: 25px; cursor: pointer; }
.toggleSlider:before {
  content: "";
  position: absolute;
  width: 21px;
  height: 21px;
  left: 26px;
  top: 2px;
  border-radius: 50%;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
.toggleSlider:before { content: ""; position: absolute; width: 21px; height: 21px; background: white; border-radius: 25%; left: 32px; 
    top: 3px; -webkit-transition: 0.3s; -o-transition: 0.3s; -moz-transition: all 0.5s ease-in-out; 
  -webkit-transition: all 0.5s ease-in-out; 
  transition: all 0.5s ease-in-out; 
}
.switchAI input:checked + .toggleSlider::before {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  -moz-transition: all 0.5s ease-in-out; 
  -webkit-transition: all 0.5s ease-in-out; 
  transition: all 0.5s ease-in-out; 
}

.ai-label { color: #FFF; margin-left:5px;}
.switchAI input:checked ~ .toggleBackground {
    background-color: #007BFF;
 transform: translateX(24px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;

}
input:checked + .toggleSlider:before { -webkit-transform: translateX(25px); -ms-transform: translateX(25px); transform: translateX(25px); }

.tagsBtn .each-search { background-color: #e6f1ff; color: #007bff !important; padding: 8px 14px; border-radius: 6px; margin-right: 10px; cursor: pointer;}
.unorderlist li.each-search:hover {background: #fff; color: #007bff; border-radius: 5px; outline: none; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3);}
.popular-list{cursor: default;}
ul.popular-list, .singleDesc ul.popular-list { padding: 0;}
li.popular-search-item:hover { transition: border, color, .3s ease-in-out; cursor: pointer; color: #007bff; text-decoration: underline;text-decoration-color: #007bff;text-underline-offset: 6px;}
li.each-search a:hover {color: unset;}
.popular-list li { margin: 0; list-style: none; text-transform:capitalize; cursor: pointer; width: fit-content;}
.left-results ul { list-style: none; padding: 30px 0px 30px 30px; padding: 16px 0; font-size: 16px; overflow-x: hidden;}
.right-info { padding:30px; background-color:gray; }
.right-info h2 { margin-bottom: 15px; }
.hidden { display: none;}

div#defaultSection { padding: 20px 50px;}

/* loader section */
.ai-loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px; /* controls vertical spacing */
  width: 100%;
}

.ai-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.spinner {
  width: 32px;              /* 🔥 bigger size */
  height: 32px;
  border: 4px solid #007BFF;
  border-top: 4px solid #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loader-text {
  font-size: 16px;          /* 🔥 bigger text */
  font-weight: 500;
  color: #555;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* loader section */

@media (max-width: 900px) {
div#defaultSection { padding: 20px 20px; !important}
}

.default-section h4 { margin: 10px 0 20px;}
.default-section .tagsBtn { padding-bottom: 30px;}

div#resultSection{align-items: flex-start;}

.left-results.wp-8 { padding: 0 50px;}
#resultsList li { list-style: none;}
#resultsList li .cias-inner-item:hover { background-color: #E6F1FF;}
#resultsList li .cias-inner-item {margin: 6px 16px 8px 35px; padding: 4px 12px; cursor: pointer;}
#resultsList li.cais-result-item::after {content: ""; position: absolute; bottom: 0; left: 40px; right: 15px; height: 1px; background: #ccc;}

#resultsList li .cais-result-meta{ color: #007BFF; }
#resultSection .right-info.wp-4{display: none;}
.right-info.wp-4 { background: #f7f5f2;}
.right-info .tagsBtn span { display: inline-block; margin: 5px;}
.left-results.wp-8 ul#resultsList { padding: 0; border: 0;}


/* Search Ai css End here */

/* Left results scroll area */
.left-results { max-height: 66vh; overflow-y: auto; padding-right: 8px; width: 100%;}

/* Ensure right column is visible and sticky */
.right-info { min-height: 66vh; overflow-y: auto; padding-left: 20px; }


/* Style for result items & excerpt */
.cais-excerpt { margin-top: 6px; color: #555; font-size: 14px; }
/* .cais-result-item:hover { background: #f8fbff; } */

/* AI summary block inside left column */
.cais-ai-block { background: #fff; }

/* Make sure resultSection is full width of container columns */
#resultSection { display:flex; align-items:flex-start; }

/* Search Result Page */
.cais-search-heading{display: flex;align-items: center;justify-content: space-between;}
.cais-search-heading p{padding-bottom: 0px;}
.cais-search-heading h2{font-size: 16px; font-weight: 400;}
.searchCard{border-radius: 12px; box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.10); padding: 0 20px 20px; margin-bottom: 20px;}
.searchBadge{color: #fff; border-radius: 0 0 4px 4px; background: #1E1919; padding: 6px 12px; display: inline-block; width: fit-content;}
.searchCard a{border-bottom: none;}
.searchCard a:hover{color: #007bff; border-color: #007bff;}
.searchCard h4 {color: #007bff;}
.searchCard p {color: #000;}
article.searchCard:hover h4 {transition: border, color, 0.3s ease-in-out; cursor: pointer; color: rgb(0, 123, 255); text-decoration: underline rgb(0, 123, 255); text-underline-offset: 6px; }

.hide-btn-view{display: none;}
.unorderlist li.each-search a {border-bottom: unset;}

@media (max-width: 640px) {
    .cais-search-heading{flex-direction: column; align-items: start;}
    .cais-search-heading p{padding-bottom: 20px;}
    .cais-search-heading h2{margin-bottom: 0px}
}


/* Responsive: stack on small screens */
@media (max-width: 900px) {
  /* #resultSection { flex-direction: column-reverse; } */
  .left-results, .right-info { max-height: none; width:100% !important; }
.right-info { min-height: 45vh; overflow-y: auto; padding-left: 20px; }

}
@media (max-width: 900px) {
 left-results { width: 100%; }
  right-info{ width:100%; }
}

.cais-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  
  .cais-copy-btn {
    border: 1px solid #ddd;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
  }
.cais-copy-btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;

background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z'/%3E%3C/svg%3E")
  no-repeat 80% 50%;


  background-size: 16px;
}

  
  .cais-copy-btn:hover {
    background: #e9ecef;
  }

  .cais-ai-header .cais-copy-btn:hover:before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23007bff' fill-rule='evenodd' d='M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z'/%3E%3C/svg%3E")
  no-repeat 80% 50%;
  } 
  
  .cais-ai-header .cais-copy-btn.copied {
    /* background: #d1fae5; */
    /* border-color: #10b981; */
    /* color: #065f46; */
    background: url(https://staging20.one.eclerx-staging.com/wp-content/themes/eclerx-digital-Gulp/assets/images/tabler_checkbox.svg);
    background-repeat: no-repeat;
    background-position: center;
  }

  .cais-ai-header button.cais-copy-btn.copied:hover:before {
      opacity: 0;
      background: none !important;
  }
  
  .relatedType.service-categories {
    background: #eef5ff;
  }

  .search-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 16px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    z-index: 999;
  }

  #cais-followup-input {
    width: 100%;
    height: 44px;          /* 👈 important */
    padding: 10px 14px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    resize: none;          /* harmless for input, important if CSS reused */
    line-height: 1.4;
    box-sizing: border-box;
  }
  
  .cais-followup-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #f7f5f2;
    width: 100%;
    max-width: 100%;
  }
  
  .cais-ai-icon {
    font-size: 20px;
    color: #3b82f6;
    flex-shrink: 0;
  }
  
  #cais-followup-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    outline: none;
    color: #111;
  }
  
  #cais-followup-input::placeholder {
    color: #777;
  }
  
  .cais-followup-btn {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    border: none;
    background: #2563eb;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .cais-followup-btn:hover {
    background: #1d4ed8;
  }

  .related-content-section {
    margin-top: 48px;
  }
  
  .related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .related-header h3 {
    font-size: 22px;
    font-weight: 600;
  }
  
  .related-header h3 span {
    color: #1a73e8;
  }
  
  .related-nav {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .nav-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
  }
  
  .related-carousel {
    overflow: hidden;
  }
  
  .related-track {
    display: flex;
    gap: 24px;
    transition: transform 0.35s ease;
  }
  
  .related-card {
    min-width: 360px;
    max-width: 360px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    position: relative;
  }
  
  .related-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #000;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
  }
  
  .related-title {
    display: block;
    margin-top: 24px;
    font-size: 18px;
    font-weight: 600;
    color: #1a73e8;
    text-decoration: none;
  }
  
  .related-excerpt {
    margin-top: 12px;
    font-size: 14px;
  }

  .cais-related-section {
    margin-top: 40px;
  }
  
  .cais-related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    margin-right: 16px;
  }
  
  .cais-related-header h3 {
    font-size: 22px;
    font-weight: 600;
  }
  
  .cais-related-header h3 span {
    color: #1a73e8;
  }
  
  .cais-related-nav {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .cais-related-nav button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid #d0d7e2;
    background: #fff;
    cursor: pointer;
  }
  
  .cais-related-carousel {
    overflow: hidden;
  }
  
  .cais-related-track {
    display: flex;
    gap: 24px;
    transition: transform 0.35s ease;
    margin-top: 10px;
  }
  
  .cais-related-card {
    min-width: 510px;
    max-width: 510px;
    background: #fff;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    border-radius: 12px;
  }

  .cais-related-card.active {
    border: 2px solid #99C9FF; /* eClerx blue */
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-4px);
  }

  .cais-related-card h6{
    font-size: 20px !important;
    margin-top:25px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 400;
    position: relative;
     padding-right: 0;
     line-height: 1.8;
    width: fit-content;
    color: #007bff;
  }
  .cais-related-card p {
      color: #5b5b5b;
  }
  
  .relatedType {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #000;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
  }

  .cais-related-card.active h6 {
      transition: color .5s cubic-bezier(.16, .84, .44, 1);
      -webkit-transition: color .5s cubic-bezier(.16, .84, .44, 1);
      color: #007BFF;
  }
  
  .cais-related-card:hover {
      cursor: pointer;
  }

  .cais-related-card:hover h6 {
      color: #006adc;
  }

  .cais-related-card h6::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    background-color: #007bfe;
    bottom: 0;
    left: 0;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .4s ease-in-out;
  }

  .cais-related-card:hover h6::after{
  transform-origin: left;
      transform: scaleX(1);
  }

  .cais-related-card:hover h6 {
      border: 0;
      background-image: none;
      color: #007bfe;
      transition: transform .4s ease-in-out;
  }

  /* .cais-related-card h6::after {
    content: "";
    position: absolute;
    transform: translateX(-100% -100%);
    right: 0;
  top: 50%;
  transform: translateY(-50%);
    width: 15px;
    height: 28px;
    background: url(https://staging20.one.eclerx-staging.com/wp-content/themes/eclerx-digital-Gulp/assets/images/learnMoreArrow.svg) no-repeat;
    -webkit-transition: all .2s cubic-bezier(.16, .84, .44, 1);
    -o-transition: all .2s cubic-bezier(.16,.84,.44,1);
    transition: all .2s cubic-bezier(.16, .84, .44, 1);
    background-size: 15px;
    background-position: center;
  } */


  .cais-related-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
  
    padding: 16px 8px 24px 8px;
    margin: 0 -8px; /* fixes left cut issue */
  
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .cais-related-card {
    flex: 0 0 320px;   /* 👈 FIXED WIDTH */
    max-width: 320px;
  
    background: #fff;
    border-radius: 16px;
    padding: 20px 20px 40px 20px;
  
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    scroll-snap-align: start;
    margin-bottom: 20px;
  }

  .cais-related-card p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4em;
    max-height: calc(1.4em * 2);
  }

  .cais-related-card .relatedType {
    position: absolute;
    top: 0px;
    left: 8px;
    background: #000;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 0px 0px 8px 8px;
    /* text-transform: capitalize; */
 }
  

  /* ================================
   CAIS RELATED SLIDER – FINAL FIX
================================ */

/* 1️⃣ Kill native scrollbar arrows */
.cais-related-grid::-webkit-scrollbar {
    height: 6px;
  }
  
  .cais-related-grid::-webkit-scrollbar-button {
    display: none;
  }
  
  .cais-related-grid {
    scrollbar-width: none; /* Firefox */
  }
  
  /* 2️⃣ Reset all arrow buttons */
  .cais-related-nav button,
  .nav-btn {
    all: unset;            /* 🔥 THIS removes weird double arrows */
    cursor: pointer;
  }
  
  /* 3️⃣ Unified arrow button */
  .cais-related-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    /* box-shadow: 0 6px 20px rgba(0,0,0,0.12); */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .cais-related-nav span.arrowCircle{
    width: 32px;
    height: 32px;
  }
  /* 4️⃣ Draw arrow icon (CSS only, no SVG, no font) */
  .cais-related-nav button::before {
    content: '';
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
  background:none !important;
  }
  
  /* Left arrow */
  .cais-related-nav .prev::before {
    transform: rotate(-135deg);
  }
  
  /* Hover */
  .cais-related-nav button:hover {
    background: #f5f7fa;
  }
  
  /* Disabled */
  .cais-related-nav button.disabled {
    opacity: 0.35;
    pointer-events: none;
  }
  .cais-chat-answer {
    margin-top: 15px;
}

.cais-inline-search {
    position: relative;
  }
  
  .cais-inline-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 999;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  .cais-inline-results li {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    list-style-type: none;
}
  
  .cais-inline-results li:hover,
  .cais-inline-results li.active {
    background: #f5f7fa;
  }
  
  .cais-inline-results .meta {
    font-size: 12px;
    color: #666;
  }
  
  .cais-inline-results .title {
    font-weight: 600;
  }
/* HEADER AI TOGGLE */
#cais-header-ai-toggle {
    display: none;
    top: 18px;
    right: 90px;
    z-index: 9999;
    align-items: center;
    gap: 8px;
    font-family: inherit;
  }
  
  .switchAI {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
	
  }
  
  .switchAI input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
 .toggleSlider {
    position: absolute;
    background-color: transparent; /* ← semicolon was missing */
    border-radius: 12px !important;
    transition: 0.3s ease;
border:1px solid #E6F1FF;}
.toggleBackground{
     z-index: -1;
    position: absolute;
    width: 30px;
    height: 30px;
    background: #E6F1FF;
    left: 0px;
    border-radius: 12px;
    margin: auto;
    top: 4.5px;
    bottom: 0.5px;

}
  
  .toggleSlider::before {
    background: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M13 7L9.00001 5.49999L13 3.99849L14.5 0L16.0014 3.99849L20 5.49999L16.0014 7L14.5 11L13 7ZM4.99998 15L0 13L4.99998 11L7 6.00001L9.00001 11L14 13L9.00001 15L7 20L4.99998 15Z' fill='%23E6F1FF'/%3E%3C/svg%3E");
	
  }

  
.switchAI input:checked ~ .toggleBackground {
    background-color: #007BFF;
    left: 7px;
}
  
.switchAI input:checked + .toggleSlider {
    border-color: #007BFF;
}
  .switchAI input:checked + .toggleSlider::before {
	content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    bottom: 0px;
	top:0px;
left:6px;
border-radius: 25%;
color:#FFF;


      }
  
  .ai-label {
    font-size: 14px;
    font-weight: 500;
  }
    
.normal-search-icon{

position: absolute;
top:18px;
left:auto;
right:20px;
bottom:0px;
}
.unorderlist{
list-style-type: none;
list-style: none;
display: flex;
flex-wrap: wrap;
gap:16px;
padding:0px !important;
}
.each-search{
list-style-type: none;
list-style: none;
}
.searchHolder{
width:auto
}
cais-result-meta{
 background-color: #e6f1ff; color: #007bff !important; padding: 8px 14px; border-radius: 6px; margin-right: 10px;
}

@media (max-width: 640px) {
  .contactCTASection .toggleHubspotForm div {flex-grow: 1;}
  .contactCTASection.withForm .learnMoreBtn{min-width: 32px}
  .chatView {max-height: 65vh;}
}

.cais-ai-summary h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}

.cais-ai-summary h3 {
  font-size: 18px;
  font-weight: 500;
  margin-top: 0px;
  margin-bottom: 0px;
}

.cais-ai-summary p {
  font-size: 16px;
  line-height: 1.6;
}

.cais-ai-summary ul {
  padding-left: 20px;
}



.AISearchInput {
  position: relative;
}

.AISearchInput input {
  width: 100%;
  padding-right: 50px; /* space for icon */
}

#cais-search-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: #ffffff; /* adjust if needed */
}

#cais-search-button svg {
  display: block;
}

#cais-search-button {
  display: flex !important;
  min-width: 0px;
}
#cais-search-button::before {
  content: none !important;
  display: none !important;
}

/* Default state
#aiBoxHighlight {
  border: 1px solid transparent;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

/* AI Active state */
/* #aiBoxHighlight.ai-active {
  border-radius: 0 0 12px 12px;
  /* border-right: 4px solid var(--Primary-Color-Blue---03, #99C9FF); */
  /* border-bottom: 4px solid var(--Primary-Color-Blue---03, #99C9FF); */
  /* border: 4px solid var(--Primary-Color-Blue---03, #99C9FF);
  background: var(--Neutral-Color-White, #FFF);
  box-shadow: 0 0 34.2px 4px rgba(153, 201, 255, 0.70); */
/* } */ 

@media (max-width: 576px) {
  .switchAI {
    margin-right: 0px;
  }
   .toggleAIBox span.ai-label {margin-left: 18px;}
}

@media (max-width: 576px) {
  span#closeSearch {
    display:none;
  }
}

@media (max-width: 576px) {
.Aioverlay-header, .searchAIData{
    padding-left:0px !important;
	padding-right:0px !important;

  }
}
@media (max-width: 380px) {
.toggleAIBox{
    margin-left:25px;
	margin-top:0px;
  }
}

@media (max-width: 350px) {
.toggleAIBox{
    margin-left:0px;
	margin-top:15px;
  }
}
@media (max-width: 576px) {
.switchAI{
width:50px;
height:25px;
  }
.toggleBackground{
width:25px;
height:23px;
}
.switchAI input:checked + .toggleSlider::before {
    
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    bottom: 0px;
    top: 2px;
    left: 0px;
    margin: auto;
    border-radius: 25%;
    color: #FFF;
}
}

@media(max-width:1180px){
	div#openSearch{
    display:none;
  }
}



/* .hubspotform{
  display:none;
} */

.hubspotform.open{
  display:block;
}

.contactCTASection.withForm .learnMoreBtn::after{
  webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);

}
.popular-search-item{
text-transform:capitalize;
}