/* For ID selectors */
#buildtrust {
    cursor: pointer; /* Hand icon on hover */
}

/* For class selector */
.open-popup-freetrial,
.bookappointment,
.contactpopup,
.open-popup-pricing
{
    cursor: pointer; /* Hand icon on hofver */
}


.services-slider {
  width: 100%;
  padding: 20px 0;
}

.service-box {
  padding: 15px;
  text-align: left; /* align everything to left */
  color: #FFF; /* default text color */
}

.service-thumb img {
  max-width: 100%;
  border-radius: 6px;
  margin-bottom: 15px;
  display: block;
}

.service-thumb::after {
	content: "";
	display: block;
	width: 30%;
	height: 7px;
	background-color: #FFD84D;
	margin-top: 12px;
	margin-bottom: 10px;
	border-radius: 25px;
}

.service-rating img {
  max-width: 120px;
  margin: 10px 0;
}

.service-title {
  font-family: 'Ubuntu', sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  margin: 0px 0px;
  color: #FFF;
}

.service-points {
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: 0 !important;
}

.service-points li {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-family: 'Ubuntu', sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  color: #FFF;
}

.service-points img {
  width: 22px;
  margin-right: 10px;
}

/* Swiper Pagination Dots */
.services-slider .swiper-pagination {
  position: relative;
  margin-top: 25px;
  text-align: center;
}

.services-slider .swiper-pagination-bullet {
  background: #000; /* inactive black */
  opacity: 1; /* make sure it's fully visible */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
  margin: 0 6px !important;
}

.services-slider .swiper-pagination-bullet-active {
  background: #FFF; /* active white */
  width: 24px; /* wider */
  height: 10px; /* keep same height */
  border-radius: 12px; /* pill shape */
}


/* Responsive typography */
@media (max-width: 768px) {
  .service-title {
    font-size: 22px;
  }
  .service-points li {
    font-size: 16px;
  }
}


.custom-contact-form {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-family: 'Ubuntu', sans-serif;
    padding: 0px 38px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.full-width {
    width: 100%;
}

.half-width {
    width: calc(50% - 7.5px);
}

 .phone-group {
    display: flex;
    width: 100%;
    flex-direction: row; /* ADD THIS */
    gap: 10px; /* space between country & phone */
    align-items: center; /* vertically center them */
}

.country-select {
    flex: 0 0 auto;
    width: 20%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    cursor: pointer;
    background-color: #fff;
}

.phone-group input[type="tel"] {
    flex: 1 1 auto; 
    padding: 12px;
    border-radius: 8px;
    border: 0px solid #ccc;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
}

@media (max-width: 768px) {
    .phone-group {
        flex-direction: column;
    }
    .country-select, .phone-group input[type="tel"] {
        flex: 1 1 100%;
        width: 100%;
    }
}


.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form input[type="tel"] {
    padding: 12px 15px;
    border-radius: 8px;
    border: 0px solid #ccc;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #000;
}

.custom-contact-form input::placeholder {
    color: #000;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.checkbox-group {
    display: flex;
    align-items: center; /* vertically center checkbox and text */
    gap: 10px;           /* space between checkbox and label */
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px;
    flex-direction: row;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
    margin: 0; /* remove default margin */
}

.checkbox-group label {
    margin: 0; /* remove default margin */
}


.form-group.custmsubmit {
    display: flex;
    justify-content: center; /* centers the button horizontally */
    flex-direction: row;
}

.submit-btn {
    padding: 14px 34px; /* width based on content */
    background-color: #EF0000;
    color: #FFF;
    border: none;
    border-radius: 50px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
    width: auto; /* do not stretch full width */
}

.submit-btn:hover {
    background-color: #d40000;
}


.submit-btn:hover {
    background-color: #d40000;
}

/* Responsive */
@media(max-width: 768px){
    .half-width {
        width: 100%;
    }
}


.review-slider {
    width: 100%;
    padding: 20px 0;
}

.review-box {
    padding: 20px;
    background: transparent;
    color: #000;
}

.review-border {
    width: 40%;
    height: 7px;
    background-color: #EF0000;
    margin-bottom: 15px;
    border-radius: 4px;
}

.numbackup-border{
    width: 40%;
    height: 7px;
    background-color: #FFD84D;
    margin-bottom: 15px;
    border-radius: 4px;
}
.numbackup_counter{
    font-size: 40px;
  color: #FFF;
  font-weight: 700;
}
.review-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
}
.review-line-halfw {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    max-width: 100%;
	width: 75%;
}
.review-title {
    width: 70%;
    font-family: 'Ubuntu', sans-serif;
    font-size: 30px;
    font-weight: 500;
    margin: 0;
    color: #fff;
}

.review-description {
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin: 0;
    color: #fff;
}

.review-circle {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.review-circle .percent-text {
    position: absolute;
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color:#FFF;
}
.progress-ring__circle {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    stroke-dasharray: 194.78; /* 2πr, r=31 */
    stroke-dashoffset: 194.78;
    stroke-width: 8; /* increased thickness */
    stroke: #FFFFFF; /* white color */
    transition: stroke-dashoffset 1s ease;
}

/* Swiper Pagination Dots for review slider */
.review-slider .swiper-pagination {
  position: relative;
  margin-top: 25px;
  text-align: center;
}

.review-slider .swiper-pagination-bullet {
  background: #000; /* inactive black */
  opacity: 1; /* fully visible */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.3s ease;
  margin: 0 6px !important;
}

.review-slider .swiper-pagination-bullet-active {
  background: #FFF; /* active white */
  width: 24px; /* wider */
  height: 10px; /* keep same height */
  border-radius: 12px; /* pill shape */
}


.testimonial-slider {
    width: 100%;
    padding: 20px 0;
}

.testimonial-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
}

.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.testimonial-left {
    flex: 1;
}

.testimonial-name {
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #EF0000;
    margin: 0 0 5px 0;
}

.testimonial-designation {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #EF0000;
    margin-bottom: 0 !important;
}

.testimonial-icon img {
    width: 28px;
    height: 28px;
}

.testimonial-desc {
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #868686;
    margin: 10px 0;
    margin-bottom: 10px !important;
}

.testimonial-thumb img {
    border-radius: 5px;
}

/* Swiper Pagination for testimonial slider */
.testimonial-slider .swiper-pagination {
    position: relative;
    margin-top: 25px;
    text-align: center;
}

.testimonial-slider .swiper-pagination-bullet {
    background: #000;
    opacity: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    margin: 0 6px !important;
}

.testimonial-slider .swiper-pagination-bullet-active {
    background: #EF0000;
    width: 24px;
    height: 10px;
    border-radius: 12px;
}

/* Responsive */
@media(max-width: 768px){
    .testimonial-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .testimonial-icon img {
        width: 24px;
        height: 24px;
    }
   
}

/* =========================
   Feature Slider
========================= */
.features-slider {
    width: 100%;
    padding: 20px 0;
}

.feature-box {
    position: relative;
}

.feature-img {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.feature-img img {
    width: 100%;
    display: block;
}

/* Pill Title on Image */
.feature-title {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 6px 25px;       /* control pill width manually */
    border-radius: 25px;
    display: inline-flex;     /* shrink to text + arrow */
    align-items: center;
    gap: 10px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;      /* prevent line breaks */
    max-width: 90%;           /* safety: won’t overflow image */
    overflow: hidden;         /* if too long */
    text-overflow: ellipsis;  /* show … if text is too long */
    box-sizing: border-box;
    z-index: 2; /* <- Add this so it’s above overlay */
    cursor: pointer; /* Make clickable */
}

.feature-title .feature-arrow {
    width: 20px;
}

/* Swiper Pagination for features slider */
.features-slider .swiper-pagination {
    position: relative;
    margin-top: 25px;
    text-align: center;
}

.features-slider .swiper-pagination-bullet {
    background: #FFF;
    opacity: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    margin: 0 6px !important;
}

.features-slider .swiper-pagination-bullet-active {
    background: #EF0000;
    width: 24px;
    height: 10px;
    border-radius: 12px;
}

/* Hover Effect on Feature Boxes */
.feature-box:hover .feature-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(239,0,0,0.6), rgba(255,100,100,0.6));
    border-radius: 12px;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Make sure image stays behind overlay */
.feature-img img {
    display: block;
    width: 100%;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

/* Optional: Slight zoom on hover for effect */
.feature-box:hover .feature-img img {
    transform: scale(1.05);
}

/* Title hover effect */
.feature-box:hover .feature-title {
    background-color: #EF0000;
    color: #fff;
}

/* Ensure arrow icon stays white on hover */
.feature-box:hover .feature-title .feature-arrow {
    filter: brightness(0) invert(1); /* turns arrow white */
    transition: all 0.3s ease;
}

/* Smooth transition for the title */
.feature-title {
    transition: all 0.3s ease;
}

/* Responsive */
@media(max-width: 768px){
    .feature-title {
        font-size: 16px;
        padding: 8px 20px; /* slightly smaller pill */
        max-width: 95%;   /* allow more room on small screens */
    }

    .feature-title .feature-arrow {
        width: 16px;
    }
}



/* Overlay */
.feature-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
#feature-popup {
    display: none;
    opacity: 0;
    transition: all 0.3s ease;
}

/* Show when active */
#feature-popup.active {
    display: flex;
    opacity: 1;
}
/* Popup content */
.feature-popup-content {
    position: relative;
    width: 60%;
    max-width: 1000px;
    /*background: linear-gradient(305deg, rgba(0, 0, 0, 0.00) 2.49%, rgba(0, 0, 0, 0.48) 34.9%, rgba(0, 0, 0, 0.80) 74.19%), url('https://shyamglobalconnect.com/demo/wp-content/uploads/2025/09/Rectangle-1107.png') lightgray 50% / cover no-repeat;*/
    border-radius: 12px;
    padding: 40px 30px;
    color: #fff;
    font-family: 'Ubuntu', sans-serif;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Top right button */
.popup-top-btn {
    position: absolute;
    top: 20px;
    right: 0px;
    background-color: #EF0000;
    color: #fff;
    border: none;
    padding: 12px 50px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 20px 0 0 20px;
}

/* Title & Description */
.popup-text-section {
    max-width: 600px;
    margin-top:30px;
}
.popup-title {
    font-family: 'Ubuntu', sans-serif;
    font-size: 28px;
    margin: 0 0 20px;
    line-height: 1.2;
}
.popup-title-white { color: #fff; font-weight: 500; }
.popup-title-red { color: #EF0000; font-weight: 500; }

.popup-desc {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0px !important;
}

/* Horizontal Lists */
.popup-lists {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}
.popup-list {
    flex: 1;
}
.popup-list-heading {
    font-size: 18px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 500;
}
/* Horizontal Lists */
.popup-list-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.popup-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin: 2px 0;
}

.popup-go-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	color: #EF0000;
	border-radius: 25px;
	padding: 12px 15px;
	font-family: 'Ubuntu', sans-serif;
	font-size: 18px;
	font-weight: 400;
	cursor: pointer;
	border-radius: 6px;
	width: 130px;
	border-radius: 30px;
}

.popup-btn-icon { width: 20px; height: auto; }

.popup-go-back:hover {
    background: #fff;
    color: #EF0000;
}

/* Responsive */
@media(max-width: 768px) {
    .feature-popup-content {
        padding: 30px 20px;
    }
    .popup-lists { flex-direction: column; gap: 20px; }
}

.blog-slider {
  width: 100%;
  padding: 40px 0;
}

.blog-thumb img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 15px;
}

.blog-title {
  color: #515050;
  font-family: 'Ubuntu', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3em;
  margin-bottom: 10px;
}

.blog-desc {
	color: #1A1A18;
	font-family: 'Ubuntu', sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	margin-bottom: 0;
}


.blog-slider .swiper-pagination-bullet {
    background: #EF0000;
    opacity: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: all 0.3s ease;
    margin: 0 6px !important;
}

.blog-slider .swiper-pagination-bullet-active {
    background: #000;
    width: 24px;
    height: 10px;
    border-radius: 12px;
}

.secbold{
font-weight:bold;
}
.myred{
color: #E90C10;
}

.services-slider-wrapper,
.features-slider-wrapper{
  position: relative;
  min-height: 250px; /* keeps height stable while loading */
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-loader {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ccc;
  animation: pulseLoader 1.2s ease-in-out infinite;
}

@keyframes pulseLoader {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}

.fade-in-img {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.fade-in-img.lazyloaded,
.fade-in-img[data-loaded="true"],
.fade-in-img[src] {
  opacity: 1;
}

.boxreds{
    color: #EF0000 !important;
    font-weight: 700;
}

.boxlinks{
    color: #0057FF !important;
    font-weight: 700;
    text-decoration: none !important;
}

.elementor-1532 .elementor-element.elementor-element-ea73e60 .elementskit-section-title-wraper .elementskit-section-title:hover > span,
.elementor-1532 .elementor-element.elementor-element-77ce97e .elementskit-section-title-wraper .elementskit-section-title:hover > span,
.elementor-1532 .elementor-element.elementor-element-03a9ef1 .elementskit-section-title-wraper .elementskit-section-title:hover > span,
.elementor-1532 .elementor-element.elementor-element-e964168 .elementskit-section-title-wraper .elementskit-section-title:hover > span,
.elementor-1532 .elementor-element.elementor-element-7ebf26f .elementskit-section-title-wraper .elementskit-section-title:hover > span,
.elementor-980  .elementor-element.elementor-element-d701eed .elementskit-section-title-wraper .elementskit-section-title:hover > span {
	color: #EF0000;
}

/*pricing table */

.pricing-table-wrapper,
.pricing-table-wrapper * {
  box-sizing: border-box;
}

/* Wrapper */
.pricing-table-wrapper {
  font-family: Lexend, sans-serif;
  max-width: 90%;
  margin: 20px auto;
  background: #fff;
  overflow-x: auto; 
  overflow-y: hidden;
}

.pricing-toggle {
  position: sticky;
  top: 0;          
  left: 0;         
  z-index: 10;    
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 0; 
  margin-bottom: 5%;
}

.toggle-label {
  font-weight: 500;
  color: #333;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 30px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.switch input:checked + .slider {
  background-color: #EF0000;
}
.switch input:checked + .slider:before {
  transform: translateX(30px);
}

.pricing-table-grid {
  display: grid;
  grid-template-columns: 260px repeat(5, minmax(0, 1fr));
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}

.header-cell {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #F9DFDF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 120px;
  padding: 0 12px;
  border-right: 1px solid #ccc;
}
.most-popular {
  position: absolute;
  top: -27%;
  left: 0;
  width: 100%;                
  text-align: center;         
  font-size: 14px;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 5px 0;              
  z-index: 10;
  border-radius: 9px 9px 0 0; 
  box-sizing: border-box;
}

.plan-title {
  font-size: 14px;
  background: #EF0000;
  color: white;
  padding: 3px 30px;
  border-radius: 5px;
  margin-bottom: 8px;
}
.plan-price {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: #1C1C1C;
}
.billing-label {
  font-size: 16px;
  font-weight: 400;
  margin-top: 4px;
  color: #000;
}
.price.yearly,
.billing-label .yearly {
  display: none;
}
.plan-price.call-us {
  font-weight: 700;
  font-size: 18px;
  color: #1C1C1C;
  margin-top: 0;
}

.pricing-features-scroll {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 260px repeat(5, minmax(0, 1fr));
}

.pricing-features-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none; 
}
.pricing-features-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.feature-cell,
.value-cell {
  border-bottom: 1px solid #eee;
  border-right: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 14px;
}
.feature-cell {
  background: #fff;
  justify-content: flex-start;
}

.pricing-table-grid > .feature-cell:last-child,
.pricing-table-grid > .value-cell:last-child {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 2;
}

button {
  padding: 10px 40px;
  background: #EF0000;
  color: #fff;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 300;
  font-size: 14px;
}
button:hover {
  background: #d00000;
}

.empty-cell {
  border: none;
  background: transparent;
}

/* === BORDER ALIGN FIX === */
.pricing-table-grid > * {
  min-width: 0; /* prevent grid expansion */
}
.feature-cell,
.value-cell,
.header-cell {
  border-right: 1px solid #ccc;
}

@media (max-width: 900px) {
  .pricing-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .pricing-table-wrapper {
    scrollbar-width: none; 
    -ms-overflow-style: none; 
  }
  .pricing-table-wrapper::-webkit-scrollbar {
    display: none;
  }

  .pricing-table-grid {
    min-width: 1100px; 
  }

  .pricing-toggle {
      margin-bottom: 15%;
  }
  .plan-title {
    font-size: 13px;
    padding: 4px 18px;
  }

  .plan-price {
    font-size: 20px;
  }

  .billing-label {
    font-size: 14px;
  }

  .feature-cell {
    font-size: 13px;
    padding: 8px 10px;
  }

  .most-popular {
    top: -27%;
    width: 100%;
    text-align: center;
    left: 0;
    transform: none;
    padding: 4px 0;
  }

  button {
    padding: 12px 35px;
    font-size: 13px;
  }
}
/*pricing table */