:root {
    --at-primary:#0b4181;
    --at-primary-light:#1052a0;
    --at-secondary:#bed2fb;
    --at-secondary-1:#7a99d7;
  }

.lead {
    font-size: 1.15rem;
    color: #6c757d;
}
 

.text-md-start {
    text-align: left !important;
}
 

.text-primary-gradient {
    color: transparent;
    background: linear-gradient(to right, #007bff, #6610f2);
    -webkit-background-clip: text;
    background-clip: text;
}

.section-spacing {
    padding-top: 5rem; /* Equivalent to py-5 */
    padding-bottom: 5rem; /* Equivalent to py-5 */
}

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-2 { margin-left: 0.5rem !important; }

.d-flex { display: flex !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-md-start { justify-content: flex-start !important; }
.align-items-center { align-items: center !important; }
.rounded-pill { border-radius: 50rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.rounded { border-radius: 0.5rem !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; }
.shadow { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
 

.chat-bubbles {
    position: relative;
    width: 100%; /* Adjust as needed */
    height: 350px; /* Adjust as needed */
    background-image: url('../img/hero-chatbot.png'); /* Placeholder image for chat bubbles */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.chat-bubble {
    background-color: #fff;
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    word-wrap: break-word;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Example specific chat bubble positioning (adjust based on image) */
.chat-bubbles > div:nth-child(1) { /* Talkie button */
    position: absolute; top: 10%; right: 15%; background-color: #ff6f61; color: #fff; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 600;
}
.chat-bubbles > div:nth-child(2) { /* How can I help you? */
    position: absolute; top: 25%; right: 10%;
}
.chat-bubbles > div:nth-child(3) { /* How Are You? */
    position: absolute; top: 40%; right: 5%;
}
.chat-bubbles > div:nth-child(4) { /* Good */
    position: absolute; top: 55%; right: 10%;
}
.chat-bubbles .btn-light {
    position: absolute; bottom: 5%; right: 5%;
    background-color: #fff;
    border-color: #e9ecef;
    color: #6f42c1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Services Section (includes About Us and three cards) */
.card {
    border: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

.card-body {
    padding: 2rem;
}

.card img {
    max-width: 100px; /* Adjust for service/feature card images */
    height: auto;
}

 
/* Testimonial Section */
.testimonial-card {
    padding: 3rem 2rem;
    background-color: #fff;
    border-radius: 1rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.testimonial-card img.rounded-circle {
    border: 3px solid #6f42c1; /* Border for avatars */
    object-fit: cover;
}

.testimonial-card .text-warning {
    color: #ffc107 !important; /* Star color */
}

.logo-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem 0;
}

.logo-strip img {
    max-height: 40px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.logo-strip img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Pricing Section */
.pricing-card {
    border: 1px solid #e9ecef;
    transition: all 0.3s ease-in-out;
    background-color: #fff;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

.pricing-card.bg-primary {
    background-color: #6f42c1 !important;
    color: #fff;
}

.pricing-card.bg-primary .list-group-item {
    color: #fff; /* Ensure text is white */
}

.pricing-card .list-group-item {
    border: none;
    background-color: transparent;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
}

.pricing-card .list-group-item i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.pricing-card .list-group-item .fa-check {
    color: #28a745; /* Green for checkmark */
}

.pricing-card .list-group-item .fa-times {
    color: #dc3545; /* Red for cross */
}

.pricing-card .btn-outline-primary {
    border-color: #6f42c1;
    color: #6f42c1;
}

.pricing-card .btn-outline-primary:hover {
    background-color: #6f42c1;
    color: #fff;
}

.pricing-card .btn-outline-light {
    border-color: #fff;
    color: #fff;
}

.pricing-card .btn-outline-light:hover {
    background-color: #fff;
    color: #6f42c1;
}

/* FAQ Section */
 .faq-blue-card {
    /* background: linear-gradient(45deg, #007bff, #6610f2); */
    background-color: #0b4181;
    color: white;
    padding: 3rem 2rem;
    border-radius: 1rem;
    text-align: center;
     display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.faq-blue-card h2, .faq-blue-card h3, .faq-blue-card h4 {
    color: #fff;
}

.faq-blue-card p {
    color: rgba(255, 255, 255, 0.8);
}

.faq-blue-card .btn-outline-light {
    border-color: #fff;
    color: #fff;
    background-color: transparent;
}

.faq-blue-card .btn-outline-light:hover {
    background-color: #fff;
    color: #6f42c1;
}

.faq-blue-card img {
    max-width: 150px;
    margin-bottom: 1.5rem;
}

.accordion-item {
    border: 1px solid #e9ecef;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.accordion-button {
    font-weight: 600;
    color: #343a40;
    background-color: #ffff!important;
    border: none;
    box-shadow: none;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    padding: 1rem 1.25rem;
    font-size: 1.1rem;
}

 
.accordion-button:focus{
    box-shadow: none;
    border-color:none;   
}
.accordion-body {
    color: #6c757d;
    padding: 1rem 1.25rem;
}

/* Final Call to Action Section */
.call-to-action-section {
    background-color: #f8f9fa;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.call-to-action-section .btn-primary {
    background-color: #6f42c1;
    border-color: #6f42c1;
}

.call-to-action-section .btn-primary:hover {
    background-color: #5a35a1;
    border-color: #5a35a1;
}

.call-to-action-section .btn-secondary {
    background-color: #6c757d; /* Adjust as needed */
    border-color: #6c757d;
    color: #fff;
    border-radius: 50rem; /* For rounded-pill */
}

.call-to-action-section .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
/* Service Card Styles */
.service-card {
  background: #F0F5FF;
  border: 1.5px solid #e3e8f7;
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(44, 101, 244, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-card.active,
.service-card:hover {
  border-color: #377dff;
  box-shadow: 0 4px 24px 0 rgba(44, 101, 244, 0.10);
}
.service-img {
  max-width: 90%;
  border-radius: 12px;
  margin-bottom: 18px;
}
.service-title {
  color: #377dff;
  font-weight: 600;
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}
.service-desc {
  color: #6c757d;
  font-size: 1.05rem;
  margin-bottom: 0;
}
@media (max-width: 767px) {
  .service-card { margin-bottom: 1.5rem; }
}
 

/* Outlined pill label */
.special-label {
    padding: 0.5rem 2rem;
    border: 2px solid #8fb6ff;
    border-radius: 999px;
    color: #377dff;
    font-weight: 500;
    font-size: 1.1rem;
    background: #fff;
    letter-spacing: 1px;
}

/* Heading highlight */
.special-highlight {
    color: #377dff;
    font-weight: 700;
    display: inline-block;
}

/* Responsive adjustments */
@media (max-width: 991px) {
     
    .special-services-section {
        min-height: 220px;
    }
}
@media (max-width: 767px) {
   
    .special-services-section {
        min-height: 0;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}


/* Talkie Card */
.talkie-card {
  width: 320px;
  height: 380px;
  background: #f6f7fe;
  border-radius: 16px;
  box-shadow: 8px 16px 32px 0 rgba(44, 101, 244, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
  transform: rotate(3deg);
}
.talkie-card-header {
  background: #ff7e73;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  border-radius: 16px 16px 0 0;
  padding: 1rem 0;
  letter-spacing: 1px;
}
.talkie-card-body {
  flex: 1;
}
.talkie-card-footer {
  text-align: right;
  padding: 0.5rem 1rem 1rem 0;
  font-size: 1.2rem;
  color: #222;
}
 

/* Responsive */
@media (max-width: 991px) {
   .talkie-card { width: 240px; height: 260px; }
 
}
@media (max-width: 767px) {
   .talkie-card { width: 180px; height: 180px; }
 }
/* Label style */
.talkie-tools-label {
    color: #ff7e73;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 1.1rem;
}
 

/* Circular Network Layout */
.circle-network {
    position: relative;
    width: 340px;
    height: 340px;
    margin: 0 auto;
}
.circle-center {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 120px; height: 120px;
    background: #f6f7fe;
    border-radius: 50%;
    box-shadow: 0 4px 32px 0 rgba(44, 101, 244, 0.06);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
}
.circle-outline {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border: 1.5px dashed #eaeaf6;
    border-radius: 50%;
    z-index: 1;
}

/* Outer icons - position with trigonometry for 5 icons */
.circle-icon {
    position: absolute;
    width: 80px; height: 80px;
    display: flex; flex-direction: column; align-items: center;
    z-index: 3;
}
.circle-icon-inner {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 12px 0 rgba(44, 101, 244, 0.08);
    font-size: 2rem;
    margin-bottom: 6px;
}
.circle-icon span {
    font-size: 1rem;
    color: #384182;
    font-weight: 600;
    margin-top: 2px;
}
.circle-icon i {
    color: #fff; /* Icon color */
    transition: transform 0.2s;
}
.circle-icon:hover i {
    transform: scale(1.1); /* Slightly enlarge icon on hover */
    color: #fff; /* Change icon color on hover */
    transition: color 0.2s, transform 0.2s;
}

/* Position each icon around the circle */
.circle-facebook   { left: 50%; top: -7%;    transform: translate(-50%, 0); }
.circle-messenger  { left: 98%; top: 40%;   transform: translate(-50%, -50%); }
.circle-twitter    { left: 80%; top: 92%;   transform: translate(-50%, -50%); }
.circle-skype      { left: 15%; top: 90%;   transform: translate(-50%, -50%); }
.circle-linkedin   { left: 4%;  top: 40%;   transform: translate(-50%, -50%); }

/* Responsive */
@media (max-width: 991px) {
    .circle-network { width: 240px; height: 240px; }
    .circle-center { width: 80px; height: 80px; }
    .circle-icon { width: 56px; height: 56px; }
    .circle-icon-inner { width: 38px; height: 38px; font-size: 1.2rem; }
    .circle-icon span { font-size: 0.8rem; }
}
@media (max-width: 767px) {
    .circle-network { width: 180px; height: 180px; }
    .circle-center { width: 54px; height: 54px; }
    .circle-icon { width: 38px; height: 38px; }
    .circle-icon-inner { width: 28px; height: 28px; font-size: 1rem; }
    .circle-icon span { display: none; }
}

.about-img-wrapper {
    position: relative;
    display: inline-block;
}
.about-blur-circle {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #6a8afd 60%, #b3c6ff 100%);
    filter: blur(32px);
    opacity: 0.7;
    z-index: 2;
    pointer-events: none;
}
.about-label {
    background: #f6f7fe;
    color: #377dff;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 16px;
    padding: 6px 18px;
    letter-spacing: 1px;
}
.about-highlight {
    color: #377dff;
    font-weight: 700;
}
.about-feature {
    color: #377dff;
    font-weight: 500;
    font-size: 1rem;
}
.feature-card {
    background: #fff;
    border: 1.5px solid #e3e8f7;
    border-radius: 18px;
    box-shadow: 0 2px 12px 0 rgba(44, 101, 244, 0.04);
    min-height: 320px;
    overflow: hidden;
}
.feature-title {
    color: #377dff;
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.feature-desc {
    color: #a08be9;
    font-size: 1rem;
    font-weight: 500;
}
/* .feature-blur-circle {
    position: absolute;
    left: -40px;
    bottom: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, #a08be9 60%, #b3c6ff 100%);
    filter: blur(32px);
    opacity: 0.35;
    z-index: 1;
    pointer-events: none;
} */
.feature-card .card-body {
    position: relative;
    z-index: 2;
}
@media (max-width: 991px) {
    .about-img-wrapper { margin-bottom: 2rem; }
    .about-blur-circle { width: 80px; height: 80px; }
    .feature-blur-circle { width: 80px; height: 80px; }
}
@media (max-width: 767px) {
    .about-img-wrapper { margin-bottom: 1rem; }
    .about-blur-circle, .feature-blur-circle { display: none; }
    .feature-card { min-height: 220px; }
}
 
 
@media (max-width: 991px) {
    .testimonial-content { min-height: 180px; }
    .logo-strip img { height: 28px; }
}
@media (max-width: 767px) {
    .testimonial-content { padding: 1rem; }
    .logo-strip { gap: 1rem; }
}
   .section-title {
      text-align: center;
      margin-bottom: 40px;
    }
    .section-title span {
      display: inline-block;
      color: #f55;
      font-weight: 600;
      text-transform: uppercase;
      border-bottom: 2px solid #f55;
      margin-bottom: 8px;
    }
    .section-title h2 {
      font-size: 32px;
      margin: 0;
      color: #1e1e4f;
    }

    .swiper {
      width: 90%;
      max-width: 1000px;
      margin: auto;
    }

    .testimonial-slide {
      display: flex;
      gap: 30px;
      align-items: center;
      flex-wrap: wrap;
    }

    .testimonial-slide img.reviewer {
      border-radius: 50%;
      width: 80px;
      height: 80px;
      object-fit: cover;
      border: 3px solid #fff;
      box-shadow: 0 0 5px rgba(0,0,0,0.1);
    }

    .testimonial-content {
      flex: 1;
      font-size: 18px;
      color: #444;
      font-style: italic;
    }

    .testimonial-author {
      font-weight: bold;
      margin-top: 10px;
      color: #1e1e4f;
    }

    .testimonial-role {
      color: #666;
      font-size: 14px;
    }

    .stars {
      color: #ffc107;
      font-size: 20px;
      margin-top: 10px;
    }

    .swiper-button-next,
    .swiper-button-prev {
      color: #333;
    }

    .logo-strip {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 50px;
      gap: 40px;
      opacity: 0.6;
    }

    .logo-strip img {
      height: 30px;
    }
    .testimonial-label {
    color: #ff7e73;
    font-style: italic;
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: 1px;
}
.testimonial-slider {
    position: relative;
}
.testimonial-slide {
    padding: 30px;
    text-align: center;
}
.testimonial-content {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 2px 12px rgba(44, 101, 244, 0.06);
}
.testimonial-client img {
    border: 2px solid #fff;
}
.slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #2d2c5a;
}
.slick-prev { left: -40px; }
.slick-next { right: -40px; }
.slick-dots li button:before {
    font-size: 12px;
    color: #2d2c5a;
}
.text-primary-gradient {
    background: linear-gradient(90deg, #377dff, #6a8afd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.step-number {
    width: 70px;
    height: 90px;
    font-size: 1.2rem;
    font-weight: bold;
    background-color:#0b4181;
}
.steps-container .step-item {
    border: 1px solid #e3e8f7;
    border-radius: 12px;
    padding: 28px 28px 24px 24px;
    box-shadow: 0 2px 12px rgba(44, 101, 244, 0.06);
}