:root {
    --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --heading-font: "Nunito", sans-serif;
    --nav-font: "Inter", sans-serif;
}

:root {
    --default-color: #212529;
    /* Default color used for the majority of the text content across the entire website */
    --heading-color: #2d465e;
    /* Color for headings, subheadings and title throughout the website */
    --accent-color: #281845;
    /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --contrast-color: #ffffff;
    /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
}

a {
    color: var(--heading-color);
    font-family: var(--nav-font);
}

.default-font {
    font-family: var(--default-font);
}

button {
    font-family: var(--default-font);
}

.hero-bg {
    background: linear-gradient(135deg,
            color-mix(in srgb, #281845, transparent 90%) 50%,
            color-mix(in srgb, #281845, transparent 98%) 100%,
            transparent 90%);
}

.tabs-bg {
    background-color: color-mix(in srgb,
            var(--default-color),
            transparent 96%);
}

.badge-bg {
    background-color: color-mix(in srgb,
            var(--accent-color),
            transparent 92%);
}

.icon-bg {
    background-color: color-mix(in srgb,
            var(--contrast-color),
            transparent 70%);
}

.text {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.box-shadow {
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.bg-main {
    background: #a588c2;
    background-color: #a588c2;
}

.main-color {
    color: #a588c2;
}

.secondary-color {
    color: #2d465e;
}

.bg-default {
    background-color: #212529;
    background: #212529;
}

.bg-secondary {
    background-color: #fff3e2 !important;
    background: #fff3e2 !important;
}

.text-default {
    color: #212529;
}

.nav-a:hover {
    color: #a588c2;
}

#videoModal {
    backdrop-filter: blur(5px);
    /* Optional: Blurred background */
}
.border-radus-16 {
    border-radius: 16px !important;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes myAnim {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.main-animation {
    animation: zoomOut 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0s 1 normal forwards;
}

.embla {
    overflow: hidden;
    position: relative;
}

.embla__container {
    display: flex;
    gap: 10px;
}

.embla__slide {
    flex: 0 0 auto;
    width: 18%;
    /* Adjust based on how many slides to show */
}

/* === Bootstrap helpers to mirror your Tailwind spacings === */
.pt-120 { padding-top: 120px !important; }
.pb-60 { padding-bottom: 60px !important; }
@media (min-width: 992px) { .pt-lg-160 { padding-top: 160px !important; } }

/* === CTA button consistent with your palette === */
.btn-main {
  background: var(--accent-color, #281845);
  color: var(--contrast-color, #fff);
  border: none;
}
.btn-main:hover, .btn-main:focus {
  filter: brightness(0.92);
  color: var(--contrast-color, #fff);
}

/* Keep your existing .bg-main/.main-color usage intact */
.btn-main.bg-main { background: #a588c2; }          /* if you apply both classes */
.btn-main.bg-main:hover { filter: brightness(0.92); }

/* === Nav links look like your design === */
.navbar .nav-link.nav-a {
  color: var(--heading-color);
  font-family: var(--nav-font);
  font-size: 1rem;
  padding: 1rem;
}
.navbar .nav-link.nav-a:hover,
.navbar .nav-link.nav-a:focus { color: #a588c2; }

/* === Rounded container shadow for header === */
.box-shadow { box-shadow: 0px 2px 15px rgba(0,0,0,0.1); } /* you already had this; keep it */

/* === Hero illustration sizing === */
.hero-illustration {
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  height: 256px;   /* ~h-64 */
}
@media (min-width: 768px) { .hero-illustration { height: 400px; } }
@media (min-width: 992px) { .hero-illustration { height: 500px; } }

/* === Bootstrap toggler icon visibility (since header is light) === */
.navbar.navbar-light .navbar-toggler {
  border: 0;
}
.navbar.navbar-light .navbar-toggler-icon {
  /* Default Bootstrap light icon (ensures it renders even if variables differ) */
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%232d465e' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* === Optional: fallback if color-mix() isn’t supported === */
@supports not (background: color-mix(in srgb, #000, #fff)) {
  .hero-bg { background: linear-gradient(135deg, rgba(40,24,69,0.10) 0%, rgba(40,24,69,0.02) 100%); }
  .tabs-bg { background-color: rgba(33,37,41,0.04); }
  .badge-bg { background-color: rgba(165,136,194,0.08); }
  .icon-bg { background-color: rgba(255,255,255,0.30); }
}


/* Hero Section Stats Icon */
/* 64x64 circular icon pill — exact Tailwind match */
.icon-pill{
  width: 64px;
  height: 64px;
  border-radius: 9999px;            /* rounded-full */
  display: flex;
  align-items: center;              /* items-center */
  justify-content: center;          /* justify-center */
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
  /* background comes from .badge-bg, color from .main-color */
}

/* Icon sizing/vertical centering like Tailwind text-2xl (24px) */
.icon-pill i{
  font-size: 1.5rem;                /* text-2xl */
  line-height: 1;                   /* avoids vertical misalignment */
  pointer-events: none;
}

/* Hover states: force text white + bg #A588C2 (Tailwind hover:!bg-[#A588C2] hover:!text-white) */
.icon-pill:hover,
.icon-pill:focus-visible{
  background-color: #A588C2 !important;
  color: #ffffff !important;
}

/* Ensure the icon inherits the hover color even if FA sets its own */
.icon-pill:hover i,
.icon-pill:focus-visible i{
  color: inherit !important;
}

/* Optional: subtle lift like Tailwind hover feel */
.icon-pill:hover{ transform: translateY(-1px); }

/* about */
/* Container width mimic of your Tailwind max-w-[1140px] */
.container-1140 { max-width: 1140px; }

/* Bullets */
.check-item {
  display: flex;
  align-items: center;
  gap: 1rem; /* ~gap-5 */
}

/* Avatar */
.avatar-60 { width: 60px; height: 60px; object-fit: cover; }

/* Right images: main + overlay (matches your absolute layout) */
#about-us .img-main {
  width: 80%;
  height: auto;
}
#about-us .img-overlay {
  width: 80%;
  height: auto;
  position: relative;
  margin: 1.25rem auto 0; /* stacked on mobile with a bit of spacing */
  top: 0; left: 0;
}

/* md+ overlay positioning */
@media (min-width: 768px) {
  #about-us .img-main { width: 90%; margin-left: auto; margin-right: 0; }
  #about-us .img-overlay {
    position: absolute;
    top: 15%;
    left: 0;
    width: 40%;
    margin: 0;
  }
}

/* Optional: make the first column text block breathe like your original */
.about-section { padding-top: 2.5rem; } /* ~pt-10 */

/* Features */
/* Tabs container: exact Tailwind look */
.feature-tabs{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; border-radius:50px;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  width:100%; max-width:432px; list-style:none; margin:0;
}
.feature-tabs > li{ margin:0; }
.feature-tabs .tab-link{
  display:inline-block; padding:10px 30px; border-radius:20px;
  text-decoration:none; background:transparent; color:#000;
  font-family:var(--nav-font); font-size:.875rem; font-weight:600; line-height:1;
  transition:background-color .25s ease,color .25s ease;
}
.feature-tabs .tab-link h4{ margin:0; font-size:.875rem; font-weight:600; color:inherit; }
.feature-tabs .tab-link.active{ background:#A588C2; color:#fff !important; }
.feature-tabs .tab-link:not(.active):hover{ background:rgba(165,136,194,.15); color:var(--heading-color); text-decoration:none; }

/* Heading underline & spacing */
.tab-pane { margin-top:2.5rem; margin-bottom:2.5rem; } /* my-10 */
.lead-text { font-size:1rem; margin-bottom:2.5rem !important; }
.tab-heading{
  font-size:1.75rem; font-weight:700; color:var(--heading-color);
  display:inline-block; position:relative; margin-bottom:1.25rem;
  text-align:center;
}
.tab-heading::after{
  content:""; display:block; width:20%; border-bottom:4px solid #A588C2;
  margin-top:1.25rem; margin-left:auto; margin-right:auto;
}
@media (min-width:768px){ .tab-heading{ text-align:left; } .tab-heading::after{ margin-left:0; margin-right:0; } }

/* Checks */
.check-list{ display:flex; flex-direction:column; gap:1.25rem; }
.check-item{ display:flex; gap:.5rem; align-items:flex-start; }
.check-item i{ font-size:1.125rem; }

/* Illustrations */
.tab-illustration,
.feature-illustration{
  width:100%; border-radius:12px; background-size:cover; background-position:center;
  height:256px;
}
@media (min-width:768px){ .tab-illustration, .feature-illustration{ height:400px; } }
@media (min-width:992px){ .tab-illustration, .feature-illustration{ height:500px; } }

/* Cards */
.cards-row{ --bs-gutter-x:40px; --bs-gutter-y:40px; }
.feature-card{ border-radius:20px; padding:40px 30px; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.feature-card h4{ font-size:1.125rem; color:#333; font-weight:500; margin-top:.5rem; }
.feature-card p{ margin-bottom:0; }

/* Overview */
.overview-item{ position:relative; padding:1rem; }
.overview-icon{ width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--badge, #F2EEFF); margin:.5rem auto; }
.phone-img{ max-width:280px; }

/* Partners logos */
.partner-logo{ max-width:160px; filter:grayscale(1); transition:filter .3s; }
.partner-logo:hover{ filter:none; }
/* Container: rounded [50px], very light bg (your tabs-bg), width like Tailwind (432px) */
.feature-tabs{
  display:flex;
  align-items:center;
  justify-content: space-between;          /* spreads items like your screenshot */
  gap: 0;                                  /* no extra gaps */
  padding: 8px 12px;                       /* Tailwind's cozy inner padding */
  border-radius: 50px;                     /* rounded-[50px] */
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  width: 100%;
  max-width: 432px;                        /* md:w-[432px] */
  list-style: none;
  margin: 0;
}

/* Items: no bullets, minimal side margin so the active can hug the left nicely */
.feature-tabs > li{ margin: 0; }

/* Links: inline pill (px-[30px] py-[10px] rounded-[20px]) + text-sm + medium */
.feature-tabs .tab-link{
  display: inline-block;
  padding: 10px 30px;                      /* py-[10px] px-[30px] */
  border-radius: 20px;                     /* rounded-[20px] */
  text-decoration: none;
  background: transparent;
  color: #000;                             /* matches your !text-black for inactive */
  font-family: var(--nav-font);
  font-size: 0.875rem;                     /* text-sm */
  font-weight: 600;                        /* medium */
  line-height: 1;                          /* tight, like Tailwind buttons */
  transition: background-color .25s ease, color .25s ease;
}

/* Keep h4 purely for semantics; force it to look like text-sm */
.feature-tabs .tab-link h4{
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: inherit;
}

/* Active state = bg-main + white text (exact Tailwind look) */
.feature-tabs .tab-link.active{
  background-color: #A588C2;               /* bg-main */
  color: #fff !important;                  /* !text-white */
}

/* Hover for inactive tabs: subtle tint, no underline */
.feature-tabs .tab-link:not(.active):hover{
  background-color: rgba(165,136,194,0.15);
  color: var(--heading-color);
  text-decoration: none;
}

/* Kill Bootstrap’s default nav-pills styles if they sneak in anywhere */
.feature-tabs .tab-link.nav-link{ border: 0; }
.feature-tabs .tab-link.nav-link.active{ background-color:#A588C2; color:#fff; }

/* Testimonial */
.hero-bg {
  background: #f8f9fb; /* light bg like Tailwind section */
}

.section-title::after {
  content: "";
  display: block;
  width: 50%;
  border-bottom: 3px solid #A588C2;
  margin: 0.75rem auto 0;
}

.avatar-img {
  width: 60px;
  height: 60px;
}
@media (min-width: 576px) {
  .avatar-img {
    width: 90px;
    height: 90px;
  }
}

.testimonial-card {
  transition: box-shadow 0.3s ease;
}
.testimonial-card:hover {
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}
/* Counter */
.counter-line {
  width: 30px;
  height: 3px;
  background-color: #A588C2; /* your accent color */
  margin: 6px auto;
}
/* Services */
/* Card look: soft shadow, generous padding like screenshot */
.service-card{
  padding: 24px;                /* ~p-5 */
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* Icon square: light background, rounded, centered icon */
.icon-box{
  width: 48px; height: 48px;
  border-radius: 12px;          /* matches the soft rounded square in your shot */
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 48px;
  /* badge-bg already provides the faint tint via your color-mix */
}
.icon-box i{ font-size: 1.125rem; } /* ~18px */

/* Section heading underline (reuse if you already have) */
.section-title::after{
  content:"";
  display:block;
  width:50%;
  border-bottom:3px solid #A588C2;
  margin:.75rem auto 0;
}
/* Pricing */
/* Section underline (reuse if already present) */
.section-title::after{
  content:""; display:block; width:50%;
  border-bottom:3px solid #A588C2; margin:.75rem auto 0;
}

/* Card shell */
.pricing-card{
  display:flex; flex-direction:column;
  gap: .5rem;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-card:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.09); }

/* Featured middle card */
.pricing-card.featured{
  background: #A588C2; /* your main color */
  color: #fff;
  box-shadow: 0 10px 28px rgba(165,136,194,.35);
  border-radius: 12px;
}
.text-white-80{ color: rgba(255,255,255,.80)!important; }
.text-white-90{ color: rgba(255,255,255,.90)!important; }

/* Title */
.pricing-card .plan-title{
  color: var(--heading-color);
  font-weight: 600;
  margin-bottom: .25rem;
}
.pricing-card.featured .plan-title{ color:#fff; }

/* Price */
.price-wrap{ display:flex; align-items:baseline; gap:.4rem; }
.currency{ font-weight:700; color: var(--heading-color); }
.price{ font-size: 2.75rem; font-weight: 800; color: var(--heading-color); line-height:1; }
.period{ color: #6c757d; font-weight:600; }
.pricing-card.featured .currency,
.pricing-card.featured .price{ color:#fff; }
.pricing-card.featured .period{ color: rgba(255,255,255,.8); }

/* Subheading */
.included{ font-weight:700; color: var(--heading-color); margin: .25rem 0; }
.pricing-card.featured .included{ color:#fff; }

/* Features list */
.pricing-features{ margin: 0 0 1rem 0; }
.pricing-features li{
  display:flex; gap:.6rem; align-items:flex-start;
  padding: .35rem 0;
  color: var(--default-color);
}
.pricing-features i{
  color:#A588C2; font-size:.9rem; margin-top:.2rem;
}
.pricing-card.featured .pricing-features li{ color: rgba(255,255,255,.9); }
.pricing-card.featured .pricing-features i{ color:#fff; opacity:.95; }

/* Buttons */
.btn-main{
  background:#A588C2; color:#fff; border: none;
}
.btn-main:hover{ filter:brightness(.92); color:#fff; }
/* FAQ */
/* Accordion card look */
.accordion-faq .accordion-item {
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  overflow: hidden;
  margin-bottom: 1rem; /* space between cards */
}

/* Make the header area taller */
.accordion-faq .accordion-button {
  padding: 1.75rem 1.5rem; /* more vertical padding */
  min-height: 80px;        /* ensure good height */
  background: #fff;
  color: var(--heading-color, #2b2b2b);
  font-weight: 500;
  font-size: 1rem;
  box-shadow: none !important;
  align-items: center;
}

/* Chevron rotation */
.accordion-faq .accordion-button::after { display: none; }
.accordion-faq .rotate-icon { transition: transform .25s ease; }
.accordion-faq .accordion-button:not(.collapsed) .rotate-icon { transform: rotate(180deg); }

/* Body spacing */
.accordion-faq .accordion-body {
  padding: 1rem 1.5rem 1.75rem;
  line-height: 1.6;
  font-size: 0.95rem;
}
/* Contact us */
/* Left panel */
.contact-info{
  background:#A588C2;             /* your main color */
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.text-white-80{ color: rgba(255,255,255,.8)!important; }
.text-white-90{ color: rgba(255,255,255,.9)!important; }

.info-item{ margin-bottom: 1.25rem; }
.icon-pill-sm{
  width: 44px; height: 44px; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 44px;
}
.icon-pill-sm i{ font-size: 1rem; }

/* Right card */
.contact-form-card{
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.contact-form-card .form-control{
  border-radius: .6rem;
  padding:.8rem 1rem;
}

/* Section underline (reuse if you already have it) */
.section-title::after{
  content:""; display:block; width:50%;
  border-bottom:3px solid #A588C2; margin:.6rem auto 0;
}

/* Main button color */
.btn-main{ background:#A588C2; color:#fff; border:none; }
.btn-main:hover{ filter:brightness(.93); color:#fff; }
/* Footer */
/* Footer links: spacing + subtle hover underline */
.footer-links li { margin-bottom: .6rem; }
.footer-links a{
  text-decoration: none;
  color: var(--heading-color);
  font-family: var(--nav-font);
  font-size: .95rem;              /* ~text-sm */
}
.footer-links a:hover{ color: #A588C2; text-decoration: underline; }

/* Tweak hr to match your light divider */
footer hr { border-color: rgba(0,0,0,.15); opacity: 1; }