body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background: #F9FAFB;
  color: #0D1B2A;
}

body h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.container {
  max-width: 1200px;
  margin: auto;
  padding: 0px 20px;
}

/* NAV */
nav {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px 0px 0px;
  border-bottom: 2px solid #575345; 
  background-color: #34D399;
  position: sticky;
  top: 0;
  z-index: 2000;
  align-items: center;
  height: 55px;
  position: sticky;
}

nav a {
  color: #134E4A;
  text-decoration: none;
  margin-left: 20px;
  white-space: nowrap;
}

nav a:hover {
  color: #181818;
  text-decoration: none;
}

.bg-white {
    background-color: #ffffff;
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
  transition-duration: 150ms; /* default duration */
}

.antialiased-text {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
}

.full {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.full-flex {
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.flex{ 
  display: flex;
}

.flex-grow {
  flex-grow: 0; /* Equivalent to Tailwind's 'grow-0' */
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-header-container {
    /* flex */
    display: flex;
    /* items-center */
    align-items: center;
    /* flex-shrink-0 */
    flex-shrink: 0;
    /* gap-x-3 (default mobile spacing: 12px) */
    column-gap: 0.75rem; 
}

.flex-col{
flex-direction: column;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.items-center{
 align-items: center;
}

.justify-center{
 justify-content: center;
}

.justify-between{
 justify-content: space-between;
}

.px-2 {
  padding-left: 0.5rem;  /* 8px */
  padding-right: 0.5rem; /* 8px */
}

.transparent{
   background: transparent; 
}

.box {
  /* Transitions from blue on the left to red on the right */
  background: linear-gradient(to right, #7affcf, #34D399);
}

.info-image {
  border: 1px solid #659486; /* width, style, and color */
  border-radius: 1px;      /* Optional: rounds the corners */
}

.nav-logo {
  flex: 1; /* Forces the links into the middle zone */
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-links-active {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav-user-info {
  flex: 1;
  text-align: right;
  margin-right: 20px;
  align-items: center;
}

.premium-border {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
  linear-gradient(to right, #6366f1, #a855f7) border-box;
}

.padding-header {
padding-top: 3rem;
padding-left: 4rem;
}

.card2-link {
  color: #575345;
  /*margin-left: 20px;
  margin-top: auto; */
}

.mb-1{
    margin-bottom: 0.25rem;
}


.mb-2{
    margin-bottom: 0.5rem;
}

 .mb-4 {/* mb-4 (1rem or 16px) */
    margin-bottom: 1rem;
}

.mb-6 {/*(1.5rem or 24px) */
    margin-bottom: 1.5rem;
}

.mb-12{/*} (3rem or 48px) */
    margin-bottom: 3rem;
  }

.mr-3 {
  margin-right: 0.75rem; /* Equivalent to 8px in typical browsers */
}

.pl-7 {
  padding-left: 1.75rem; /* Equivalent to 28px */
}
/* HERO */
.hero {
  display: flex;
  align-items: center;
  padding: 10px 0;
  gap: 5px;
}

.hero h1 {
  font-size: 48px;
  margin-bottom: 10px;
}

.hero-heading {
    /* Color & Typography */
    color: #0D1B2A;
    font-weight: 800; /* font-extrabold */
    /* Spacing & Leading */
    letter-spacing: -0.025em; /* tracking-tight */
    line-height: 1.25; /* leading-tight */
    /* Mobile Font Size (Default) */
    font-size: 3rem; /* text-4xl (36px) */
}

.hero p {
  color: #134E4A;/*#A0AEC0;*/
  margin-bottom: 10px;
}

.btn {
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}

.btn:active {
  transform: scale(0.95);
}

.btn-primary {
  background: #19a2fc;/*#5B8CFF;*/
  font-size: 18px; /* text-[12px] */
  color: white;
  padding: 12px 36px;
}

.btn-primary:hover { background: #3872fc}

.btn-secondary {
  background: transparent;
  border: 1px solid #134E4A;
  color: #134E4A;
}

.btn-try-old {
  background: #134E4A;/* #10B981;/*#F59E0B;/*#F97316;/*#68fcf7;*/  
  color:  #ffffff;
  border: 1px solid #134E4A;
  font-size: 14px; /* text-[12px] */
  font-weight: 550;
  line-height: 1; /*leading-none */
  white-space: nowrap; /* whitespace-nowrap */
 /* Layout & Animation */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out; /* transition-all */
}


.btn-try-old:hover {
  background: #059669;
  border-color: #ffffff;
  }

  .btn-try{
   background:#111827;/*#065F46; /*#0D1B2A;/*  #F97316;*/
   color:#ffffff;

    font-size: 0.75rem;
    line-height: 1rem;
    /* font-bold */
    font-weight: 700;
  /*border: 1px solid #134E4A;*/
    padding: 6px  10px;
    white-space: nowrap; /* whitespace-nowrap */
 /* Layout & Animation */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out; /* transition-all */

    letter-spacing:1px;

    border-radius: 5px;
    border: 1px solid rgba(19,78,74,0.5);/*rgba(255, 255, 255, 0.7);*/
    cursor: pointer;
}

.btn-try:hover {
  background: #ffffff;
  color:#0D1B2A; 
  }

.btn-nav-action {
    /* Base Colors & Typography */
    background-color: #134E4A;
    color: #ffffff;
    font-weight: 600; /* font-semibold */
    font-size: 12px; /* text-[12px] */
    text-decoration: none; /* no-underline */
    line-height: 1; /*leading-none */
    white-space: nowrap; /* whitespace-nowrap */
    
    /* Sizing & Shape */
    height: 24px; /* h-[32px] */
    border: 1px solid #000000; /* border border-black */
    border-radius: 8px; /* rounded-[12px] */
    cursor: pointer;
    
    /* Padding (Mobile Default) */
    padding-left: 80px; /* px-20 = 5rem or 80px */
    padding-right: 80px;
    padding-top: 24px; /* py-6 = 1.5rem or 24px */
    padding-bottom: 24px;
    
    /* Layout & Animation */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out; /* transition-all */
}

/* Responsive Adjustments (sm: 640px and up) */
@media (min-width: 640px) {
    .btn-nav-action {
        height: 24px; /* sm:h-[36px] */
        font-size: 14px; /* sm:text-[14px] */
        
        /* Smaller padding for desktop-style nav buttons */
        padding-left: 16px; /* sm:px-4 = 1rem or 16px */
        padding-right: 16px;
        padding-top: 6px; /* sm:py-1.5 = 6px */
        padding-bottom: 6px;
    }
}

/* Interaction States */
.btn-nav-action: hover {
    background-color: #3872fc; /* hover:bg-[#3872fc] */
    border-color: #059669; /* hover:border-[#059669] */
    color: #ffffff; /* hover:no-underline (ensures text stays white) */
    text-decoration: none;
}


.btn-call-action {
    /* Base Colors & Typography */
    background-color: #19a2fc;
    color: #ffffff;
    font-weight: 600; /* font-semibold */
    font-size: 12px; /* text-[12px] */
    text-decoration: none; /* no-underline */
    line-height: 1; /*leading-none */
    white-space: nowrap; /* whitespace-nowrap */
    
    /* Sizing & Shape */
    height: 24px; /* h-[32px] */
    border: 1px solid #19a2fc; /* border border-black */

    border-radius: 8px; /* rounded-[12px] */
    cursor: pointer;
    
    /* Padding (Mobile Default) */
    padding-left: 80px; /* px-20 = 5rem or 80px */
    padding-right: 80px;
    padding-top: 24px; /* py-6 = 1.5rem or 24px */
    padding-bottom: 24px;
    
    /* Layout & Animation */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out; /* transition-all */
}

/* Responsive Adjustments (sm: 640px and up) */
@media (min-width: 640px) {
    .btn-call-action {
        height: 24px; /* sm:h-[36px] */
        font-size: 14px; /* sm:text-[14px] */
        
        /* Smaller padding for desktop-style nav buttons */
        padding-left: 16px; /* sm:px-4 = 1rem or 16px */
        padding-right: 16px;
        padding-top: 6px; /* sm:py-1.5 = 6px */
        padding-bottom: 6px;
    }
}

/* Interaction States */
.btn-call-action: hover {
    background-color: #134E4A; /* hover:bg-[#3872fc] */
    color: #ffffff; /* hover:no-underline (ensures text stays white) */
    text-decoration: none;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 
              0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.video-box {
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #575345;
  object-fit: cover;
}

.stick{
  margin-right: -5px;
  height:250px;
}

.border-radius-1{
border-radius: 1rem;
}

  .border-gray-100 {
    border: 1px solid #f3f4f6;
  }

  .border-b {
  border-bottom-width: 1px;
  /* Tailwind usually sets border-style to solid by default */
  border-bottom-style: solid;
}

/* VALUE BAR */
.value-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  margin: 10px 0; 
  background: transparent;
  color: #134E4A;/*#085c40;*/
  white-space: nowrap; 
  font-weight: 500;
  gap: 0.5rem;
}

/* SECTION */
.section {
  padding: 15px  10px ;
}

.section2 {
  padding: 0px 0;
}

.section3{
   padding: 0px 48px;
}

.section-white {
   padding: 15px  10px ;
   background: #fff;
   box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.section-white-no-shadow {
   padding: 15px  10px ;
   background: #fff;
}

.feature-title {
  width: 250px;     /* Can use px, %, or rem */
  min-width: 250px;
  margin: 0 auto; /* Centers the block itself */
  text-align: left; /* Centers the text inside the block */
  color:#1a3c34;
}

.text-xl {
  font-size: 1.25rem; /* 20px */
  line-height: 1.75rem; /* 28px */
}

.text-2xl {/*(1.5rem or 24px) */
    font-size: 1.5rem;
    line-height: 1.75rem;
  }

.text-3xl {
  font-size: 1.875rem; /* 30px */
  line-height: 2.25rem; /* 36px */
}


.font-extrabold{
   font-weight: 800;
}

.font-bold{
  font-weight: 700;
}

.font-medium{
 font-weight: 500;
}

.font-black{
  font-weight: 900;
}

.italic{
   font-style: italic;
}

/* CARDS */
.cards {
  display: flex;
  gap: 0px;
  justify-content: center;
  margin: 0; 
  border: none;
}

.card {
  background:transparent;
  padding: 20px;
  border-radius: 14px;
  color: #575345;
  flex: 1;
}

.card2 {
  /* This creates the vertical stack */
  display: flex;
  flex-direction: column;
  /* This centers everything horizontally */
  align-items: center;
  /* Optional: Adds some spacing and styling */
  padding: 10px;
  /*border: 1px solid #757373;*/
  border-radius: 8px;
  max-width: 250px;
  min-height: 200px;

  text-align: center; 
  background: transparent;/* #A19f97;*/
  flex: 1;
  font-weight: normal
}

.card3 {
  /* This creates the vertical stack */
  display: flex;
  flex-direction: column;
  /* This centers everything horizontally */
  align-items: center;
  /* Optional: Adds some spacing and styling */
  padding: 10px;
  /*border: 1px solid #757373;*/
  border-radius: 8px;
  /*max-width: 250px;*/
  min-height: 200px;
  text-align: center; /* Centers the text itself */
  color: #4F4F4F;
  background: transparent;/* #A19f97;*/
  flex: 1;
  font-weight: normal

}


.card4 {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    /*transition: transform 0.3s ease;*/
    border: 1px solid #e0eee0;
}


.card5 {
  /* This creates the vertical stack */
  display: flex;
  flex-direction: column;
  /* This centers everything horizontally */
  align-items: center;
  padding: -10px;
  min-height: 200px;
  text-align: center; /* Centers the text itself */
  background: transparent;/* #A19f97;*/
  flex: 1.7;
  margin:0;
}

.card5 img {
  display: block; /* Removes the bottom "ghost" space */
  width: 100%;    /* Optional: Makes image fill width */
}

.card img {
  max-width: 100%; /* Keeps image from overflowing */
  height: auto;
  margin: 15px 0; /* Adds space above and below the image */
}

/* DEMO */
.demo {
  display: flex;
  gap: 40px;
}

.input-box, .preview-box {
  background: #121821;
  padding: 20px;
  border-radius: 16px;
  flex: 1;
}

.header-color{
  color:#fff;/*#085c40;*/
}

.big-text {
    font-size: 20px;
  }

.text-059669{
  color: #059669;/*#085c40;*/
}

.text-4b5563 {
    /* mt-4 (16px margin-top) */
    margin-top: 1rem;
    /* px-2 (8px horizontal padding) */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    /* text-lg (18px font size) */
    font-size: 1.125rem;
    line-height: 1.75rem;
    /* text-gray-600 */
    color: #4b5563;
}
.text-111827/*text-gray-900*/
  {
  color: #111827;
}

.text-134E4A{
   color: #134E4A
}
.mt-4{
    /* mt-4 (16px margin-top) */
  margin-top: 1rem;
}

.p-5{
   padding: 1rem; 
}

.p-6{
   padding: 1.5rem; 
}

.pb-6 {
  padding-bottom: 1.5rem; /* Equivalent to 24px by default */
}

.py-5 {/*(1.5rem or 24px) */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-6 {/*(1.5rem or 24px) */
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.py-8 {/*(1.5rem or 24px) */
    padding-top: 2rem;
    padding-bottom: 2rem;
 }


.py-12 {/*(3rem or 48px) */
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.py-16 {
  padding-top: 4rem;    /* 64px */
  padding-bottom: 4rem; /* 64px */
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-12 {
  gap: 3rem;
}

.feature-color{
   color:#575345
}

.feature-title-color{
   color:#134E4A;
   font-weight: bold;
   font-size: 1.5rem;   /* 24px */
   line-height: 2rem;
   margin-bottom: 0.25rem;
}

.show-container {
    /* w-[100%] */
    width: 100%;   
    /* mx-auto */
    margin-left: auto;
    margin-right: auto;    
    /* relative */
    position: relative;    
    /* overflow-hidden */
    overflow: hidden;   
    /* rounded-[10px] */
    border-radius: 10px;   
    /* bg-white */
    background-color: #ffffff;    
    /* min-h-[350px] */
    min-height: 350px;   
    /* py-0 */
    padding-top: 0;
    padding-bottom: 0;   
    /* shadow-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -4px rgba(0, 0, 0, 0.1);   
    /* Standard practice for containers */
    box-sizing: border-box;
}
/*
input {
  width: 100%;
  padding: 12px;
  margin: 10px 0;
  border-radius: 8px;
  border: none;
}
*/

 input[type="radio"]:checked+label {
            border-color: #059669;
            background-color: #f0fdf4;
            box-shadow: 0 10px 15px -3px rgba(5, 150, 105, 0.1);
        }

/* FEATURES GRID */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.grid-cols-1{ 
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 1024px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* =========  FOOTER ============ */
footer {
  padding: 40px 0px;

  border-top: 2px solid #575345; 
}

footer a {
  color: #134E4A;
  text-decoration: none;
  margin-left: 20px;
  text-align: right;
  margin-top: 20px;;
}

.footer-label {
    /* text-sm (0.875rem or 14px) */
    font-size: 0.875rem;
    line-height: 1.25rem;
    /* opacity-80 */
    opacity: 0.8;
    /* order-2 (Default Mobile) */
    /* order: 1;*/
    /* Required for 'order' to function */
    display: block; 
}

/* md:order-1 (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .metadata-label {
        order: 1;
    }
}
/* ========= ==================?/    
 /* 1. The Container */


  /* 2. The Slides (Hidden by default) */
  .slide {
    display: none;
    height: 350px;
    text-align: center;
  }

  /* 3. Navigation Buttons */
  .controls {
    text-align: center;
    margin-top: 15px;
  }

  .footer-metadata {
    /* text-[#575345] (A muted, earthy tone) */
    color: #575345;
    /* text-sm (0.875rem or 14px) */
    font-size: 0.875rem;
    line-height: 1.25rem;
    /* opacity-80 */
    opacity: 0.8;
    /* order-2 (Default Mobile) */
    order: 2;
    /* Standard practice for metadata */
    display: block;
}

.footer-list-horizontal {
    /* grid or flex is required for gap to work */
    display: flex; 
    /* gap-x-8 (2rem or 32px horizontal spacing) */
    column-gap: 2rem;
    /* list-none */
    list-style-type: none;
    /* p-0 */
    padding: 0;
    /* m-0 */
    margin: 0;
}

/* md:order-1 (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .footer-metadata {
        order: 1;
    }
}
.footer-list{
 list-style-type: none;
 border:none;
}

.footer-nav-link {
    /* text-[#134E4A] */
    color: #134E4A;
    /* text-sm (0.875rem or 14px) */
    font-size: 0.875rem;
    line-height: 1.25rem;
    /* no-underline & font-medium */
    text-decoration: none;
    font-weight: 500;
    /* bg-transparent & border-none */
    background-color: transparent;
    border: none;
    /* transition-colors (150ms default) */
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* Interactive hygiene */
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

/* hover:text-black */
.footer-nav-link:hover {
    color: #000000;
    text-decoration: none; /* ensures no-underline persists on hover */
}

/* Optional: Focus state for accessibility */
.footer-nav-link:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/*=========================*/

  button {
    padding: 10px 20px;
    cursor: pointer;
    background: transparent;
    color: #575345;
    /*border: none;*/
    border: 1px solid #575345; 
    border-radius: 5px;
    margin: 0 5px;
  }

  button:hover { background: #d1e6e0 }

  table {
    width: 90%;
    border-collapse: collapse; /* Optional: cleans up borders */
    table-layout: fixed; 
    background: #fff;
  }

   th, td {
    border-collapse: collapse
    padding: 10px;
    text-align: left;
    height: 3rem;
    /*border: 1px solid #ddd;*/
  }

  .col-1 { width: 20%; }
  .col-2 { width: 80%; }

    @media (min-width: 1024px) {
    .col-span-8 {
      grid-column: span 8 / span 8;
    }
  }

/*  GEMINI CODE */
.why-choose-vivified {
    padding: 20px 20px;
    background-color: transparent;
    text-align: center;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}

.content-container {
  display: flex;
  flex-direction: column; /* Default for mobile */
}

/* Medium screens and larger (768px+) */
@media (min-width: 768px) {
  .content-container {
    flex-direction: row; /* Overrides to row */
  }
}

.section-header {
    /* text-center */
    text-align: center;
    /* mb-16 (4rem or 64px) */
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    color: #1a3c34; /* Dark Green */
    margin-bottom: 10px;
}


/* md:text-4xl (2.25rem or 36px) - Tablet/Desktop 768px+ */
@media (min-width: 768px) {
    .section-title {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

.section-subtitle {
    font-size: 1.1rem;
    color: #556b65;
    margin-bottom: 50px;
}

.title-color{
color:#1a3c34;
}

.lead-description {
    /* text-gray-600 */
    color: #4b5563;
    /* text-lg (1.125rem or 18px) */
    font-size: 1.125rem;
    line-height: 1.75rem;
    /* max-w-2xl (42rem or 672px) */
    max-width: 42rem;
    /* mx-auto */
    margin-left: auto;
    margin-right: auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* ============== FEATURES PAGE ===============*/

.features-page-layout-grid {
    /* grid */
    display: grid;
    /* grid-cols-1 (Default Mobile) */
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* gap-12 (3rem or 48px) */
    gap: 3rem;
    /* pt-6 (1.5rem or 24px) */
    padding-top: 1.5rem;
    /* items-start */
    align-items: start;
}

/* md:grid-cols-12 (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .features-page-layout-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

.features-page-grid-container {
    /* grid */
    display: grid;
    /* grid-cols-1 (Default Mobile) */
    grid-template-columns: repeat(1, minmax(0, 1fr));

    /* gap-6 (1.5rem or 24px) */
    gap: 1.5rem;
    /* pt-4 (1rem or 16px) */
    padding-top: 1rem;
    /* text-base (1rem or 16px) */
    font-size: 1rem;
    line-height: 1.5rem;
}

/* sm:grid-cols-2 (Small Screens/Tablets 640px+) */
@media (min-width: 640px) {
    .features-page-grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.features-page-sidebar-sticky {
    /* sticky & top-24 (6rem or 96px) */
    position: -webkit-sticky; /* Support for Safari */
    position: sticky;
    top: 6rem;

    /* Base behavior (Mobile) */
    grid-column: auto;
}

.features-page-heading-medium {
    /* text-2xl (1.5rem or 24px) */
    font-size: 1.5rem;
    line-height: 2rem;
    /* font-bold */
    font-weight: 700;
    /* text-[#134E4A] */
    color: #134E4A;
    /* mb-4 (1rem or 16px) */
    margin-bottom: 1rem;
    /* Recommended for heading elements */
    display: block;
}

/* md:col-span-4 (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .features-page-sidebar-sticky {
        grid-column: span 4 / span 4;
    }
}

.features-page-media-frame {
    /* w-full */
    width: 100%;
    /* rounded-2xl (1rem or 16px) */
    border-radius: 1rem;
    /* border border-gray-100 */
    border: 1px solid #f3f4f6;
    /* shadow-md */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Best practice for images/videos with border-radius */
    display: block;
    overflow: hidden;
}

.object-cove{
    /* object-cover */
    object-fit: cover;
}

.featurs-page-badge {
    /* bg-[#7affcf]/20 (Hex + 20% Alpha) */
    background-color: rgba(122, 255, 207, 0.2);
    /* text-[#134E4A] */
    color: #134E4A;
    /* px-3 (0.75rem or 12px) & py-1 (0.25rem or 4px) */
    padding: 0.25rem 0.75rem;
    /* rounded-full */
    border-radius: 9999px;
    /* text-xs (0.75rem or 12px) */
    font-size: 0.75rem;
    line-height: 1rem;
    /* font-bold */
    font-weight: 700;
    /* Proper alignment for badges */
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.features-page-content-main-area {
    /* text-gray-700 */
    color: #374151;
    /* leading-relaxed (1.625 line height) */
    line-height: 1.625;
    /* text-lg (1.125rem or 18px) */
    font-size: 1.125rem;
    /* Base behavior (Mobile) */
    grid-column: auto;
}

/* md:col-span-8 (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .features-page-content-main-area {
        grid-column: span 8 / span 8;
    }
}

@media (min-width: 768px) {
  .custom-order-last {
    order: 9999;
  }
}

.features-page-order-logic {
    /* Default behavior (Mobile/Small Screens) */
    order: 0; 
}

/* md:order-last (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .features-page-order-logic {
        /* Set to a high value to ensure it appears after other flex/grid items */
        order: 9999; 
    }
}

.features-page-accent-card {
    /* p-6 (1.5rem or 24px) */
    padding: 0.5rem 1.5rem;
    /* bg-white */
    background-color: #ffffff;
    /* rounded-2xl (1rem or 16px) */
    border-radius: 1rem;
    /* border-l-4 border-[#34D399] */
    border-left: 4px solid #34D399;
    /* shadow-[0_4px_10px_rgba(0,0,0,0.2)] */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Ensures the left border doesn't clash with rounded corners */
    overflow: hidden;  
    /* Standard card layout behavior */
    display: block;
}

.features-page-label-overline {
    /* font-bold */
    font-weight: 700;
    /* text-[#0D1B2A] (Deep Navy/Black) */
    color: #0d1b2a;
    /* text-sm (0.875rem or 14px) */
    font-size: 0.875rem;
    line-height: 1rem;
    /* mb-2 (0.5rem or 8px) */
    margin-bottom: 0.5rem;
    /* uppercase */
    text-transform: uppercase;
    /* tracking-wider (0.05em) */
    letter-spacing: 0.05em;
    /* Best practice for block-level margins */
    display: block;
}

.features-page-context-text {
    /* text-base (1rem or 16px) */
    font-size: 1rem;
    line-height: 1.5rem;
    /* text-gray-600 */
    color: #4b5563;
    /* italic */
    font-style: italic;
    /* Standard block behavior for readability */
    display: block;
}

.features-page-hero-banner {
    /* bg-[#134E4A] */
    background-color: #134E4A;
    /* text-white & text-center */
    color: #ffffff;
    text-align: center;
    /* py-6 (1.5rem or 24px) */
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    /* rounded-[32px] (2rem) */
    border-radius: 2rem;
    /* px-8 (Mobile Padding: 2rem or 32px) */
    padding-left: 2rem;
    padding-right: 2rem;
    /* Standard layout behavior */
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* md:px-16 (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .features-page-hero-banner {
        padding-left: 4rem; /* 64px */
        padding-right: 4rem; /* 64px */
    }
}

.max-w-2xl{
    /* max-w-2xl (42rem or 672px) */
    max-width: 42rem;

    /* mx-auto */
    margin-left: auto;
    margin-right: auto;
}

.max-w-4xl {/*(56rem or 896px) */
    max-width: 56rem;
  }

  .max-w-6xl {
    max-width: 72rem;
  }

.mx-auto{
 margin-right: auto; /* mx-auto */
  margin-left: auto;  /* mx-auto */
}

.features-page-lead-text {
    /* text-lg (1.125rem or 18px) */
    font-size: 1.125rem;
    line-height: 1.75rem;
    /* opacity-90 */
    opacity: 0.9;
    /* mb-8 (2rem or 32px) */
    margin-bottom: 2rem;
    /* Ensures vertical spacing applies correctly */
    display: block;
}

.green-label{
    /* inline-flex & items-center */
    display: inline-flex;
    align-items: center;
    /* gap-4 (1rem or 16px) */
    gap: 1rem;
    /* px-6 (1.5rem or 24px) & py-3 (0.75rem or 12px) */
    padding: 0.75rem 1.5rem;
    /* rounded-full */
    border-radius: 18px;
    /* bg-[#196963] */
    background-color: #196963;
    /* border border-white/20 (20% Opacity) */
    border: 1px solid rgba(255, 255, 255, 0.2);
   
}

.features-page-card-elevated {
    /* bg-white */
    background-color: #ffffff;
    /* p-4 (1rem or 16px) */
    padding: 1rem;
    /* rounded-xl (0.75rem or 12px) */
    border-radius: 0.75rem;
    /* border border-gray-100 */
    border: 1px solid #f3f4f6;
    /* shadow-[0_4px_10px_rgba(0,0,0,0.2)] */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    /* Standard block behavior */
    display: block;
}

.block {
  display: block;
}

.w-full {
    width: 100%;
  }

.bg-gray-50 {
  background-color: #F9FAFB;
}

.features-page-gradient-card {
    /* py-12 (3rem or 48px) */
    padding-top: 3rem;
    padding-bottom: 3rem;
    /* text-center */
    text-align: center;
    /* bg-gradient-to-r from-[#7affcf]/20 to-[#34D399]/20 */
    background: linear-gradient(
        to right, 
        rgba(122, 255, 207, 0.2), 
        rgba(52, 211, 153, 0.2)
    );
    /* rounded-[40px] (2.5rem) */
    border-radius: 2.5rem;
    /* border border-[#34D399]/30 (30% Opacity) */
    border: 1px solid rgba(52, 211, 153, 0.3);
    /* Standard block behavior */
    display: block;
    width: 100%;
}


/* =====================   PRICING ================ */
.pricing-main-container {
    /* container */
    width: 100%;
    margin-right: auto; /* mx-auto */
    margin-left: auto;  /* mx-auto */

    /* px-6 (1.5rem or 24px) */
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    /* text-center */
    text-align: center;
}

/* Responsive Max-Widths (Tailwind's 'container' behavior) */
@media (min-width: 640px) {
    .pricing-main-container { max-width: 640px; }
}
@media (min-width: 768px) {
    .pricing-main-container { max-width: 768px; }
}
@media (min-width: 1024px) {
    .pricing-main-container { max-width: 1024px; }
}
@media (min-width: 1280px) {
    .pricing-main-container { max-width: 1280px; }
}
@media (min-width: 1536px) {
    .pricing-main-container { max-width: 1536px; }
}

.pricing-heading-hero {
    /* text-4xl (2.25rem or 36px) */
    font-size: 2.25rem;
    line-height: 2.5rem;
    /* font-extrabold (800) */
    font-weight: 800;
    /* text-[#0D1B2A] (Deep Navy) */
    color: #0d1b2a;
    /* mb-2 (0.5rem or 8px) */
    margin-bottom: 0.5rem;
    /* Best practice for main titles */
    display: block;
    letter-spacing: -0.025em; /* Optional: standard for extrabold headers */
}

.pricing-heading-section-teal {
    /* text-xl (1.25rem or 20px) */
    font-size: 1.25rem;
    line-height: 1.75rem;pricing
    /* text-[#134E4A] (Brand Teal) */
    color: #134e4a;
    /* font-medium (500) */
    font-weight: 500;
    /* mb-4 (1rem or 16px) */
    margin-bottom: 1rem;
    /* Standard block behavior for headings */
    display: block;
}

.pricing-lead-centered {
    /* text-gray-600 */
    color: #4b5563;
    /* max-w-2xl (42rem or 672px) */
    max-width: 42rem;
    /* mx-auto */
    margin-left: auto;
    margin-right: auto;
    /* mb-12 (3rem or 48px) */
    margin-bottom: 3rem;
    /* Standard block behavior for centering */
    display: block;
   
    /* Recommended for centered lead text */
    text-align: center; 
}


.pricing-feature-grid {
    /* grid */
    display: grid;
    /* grid-cols-1 (Default Mobile) */
    grid-template-columns: repeat(1, minmax(0, 1fr));
    /* gap-8 (2rem or 32px) */
    gap: 2rem;
    /* mb-8 (2rem or 32px) */
    margin-bottom: 2rem;
    /* px-6 (1.5rem or 24px) */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* md:grid-cols-3 (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .pricing-feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .md-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pricing-card-interactive-feature {
    /* bg-white */
    background-color: #ffffff;
    /* p-8 (2rem or 32px) */
    padding: 2rem;
    /* rounded-2xl (1rem or 16px) */
    border-radius: 1rem;
    /* shadow-sm */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* border border-gray-100 */
    border: 1px solid #f3f4f6;
    /* flex flex-col items-center */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transition-transform (Default 150ms) */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.coin-icon-brand {
    /* h-10 (2.5rem or 40px) */
    height: 2.5rem;
    /* mb-4 (1rem or 16px) */
    margin-bottom: 1rem;
    /* object-contain */
    object-fit: contain;
    /* Recommended for consistent layout behavior */
    display: block;
    width: auto;
}

.pricing-card-heading-primary {
    /* text-3xl (1.875rem or 30px) */
    font-size: 1.875rem;
    line-height: 2.25rem;
    /* font-bold (700) */
    font-weight: 700;
    /* text-gray-900 */
    color: #111827;
    /* Best practice for headings */
    display: block;
    letter-spacing: -0.01em; /* Optional: adds a slightly tighter, modern feel */
}

.pricing-metadata-label {
    /* text-gray-500 */
    color: #6b7280;
    /* uppercase */
    text-transform: uppercase;
    /* tracking-wider (0.05em) */
    letter-spacing: 0.05em;
    /* text-sm (0.875rem or 14px) */
    font-size: 0.875rem;
    line-height: 1.25rem;
    /* mb-2 (0.5rem or 8px) */
    margin-bottom: 0.5rem;
    /* Standard block behavior for labels */
    display: block;
    font-weight: 600; /* Recommended to keep uppercase readable at small sizes */
}

.pricing-floating-tag {
    /* absolute -top-4 */
    position: absolute;
    top: -1rem; /* -16px */
    /* bg-[#34D399] & text-white */
    background-color: #34D399;
    color: #ffffff;
    /* px-4 (1rem or 16px) & py-1 (0.25rem or 4px) */
    padding: 0.25rem 1rem;
    /* rounded-full */
    border-radius: 9999px;
    /* text-xs (0.75rem or 12px) */
    font-size: 0.75rem;
    line-height: 1rem;
    /* font-bold & uppercase */
    font-weight: 700;
    text-transform: uppercase;
    /* Required for absolute elements to prevent squishing */
    white-space: nowrap;
    z-index: 10;
}

.pricing-card-featured {
    /* relative (Anchor for any floating badges) */
    position: relative;
    /* bg-white */
    background-color: #ffffff;
    /* p-8 (2rem or 32px) */
    padding: 2rem;
    /* rounded-2xl (1rem or 16px) */
    border-radius: 1rem;
    /* shadow-md */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    /* border-2 border-[#34D399] */
    border: 2px solid #34D399;
    /* flex flex-col items-center */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transition-transform (Standard 150ms) */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover:scale-105 */
.pricing-card-featured:hover {
    transform: scale(1.05);
}

.pricing-btn-vivified-outline {
    /* border border-[#134E4A] */
    border: 1px solid #134E4A;
    /* text-[#134E4A] */
    color: #134E4A;
    /* px-6 (1.5rem or 24px) & py-2 (0.5rem or 8px) */
    padding: 0.5rem 1.5rem;
    /* rounded-xl (0.75rem or 12px) */
    border-radius: 0.75rem;
    /* font-bold */
    font-weight: 700;
    /* transition-all (Standard 150ms) */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* Essential button hygiene */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
}

/* hover:bg-[#134E4A] & hover:text-white */
.pricing-btn-vivified-outline:hover {
    background-color: #134E4A;
    color: #ffffff;
}

.pricing-helper-text {
    /* text-gray-600 */
    color: #4b5563;
    /* text-sm (0.875rem or 14px) */
    font-size: 0.875rem;
    line-height: 1.25rem;
    /* pt-2 (0.5rem or 8px) */
    padding-top: 0.5rem;
    /* Standard block behavior for vertical spacing */
    display: block;
}

.pricing-layout-split {
    /* flex (implicit for flex-row) */
    display: flex;
    /* Default behavior (Mobile): Stack vertically */
    flex-direction: column;
    /* gap-8 (2rem or 32px) */
    gap: 2rem;
    /* max-w-4xl (56rem or 896px) */
    max-width: 56rem;
    /* mx-auto */
    margin-left: auto;
    margin-right: auto;

    /* Ensures the container fills available space up to the max-width */
    width: 100%;
}

/* md:flex-row (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .pricing-layout-split {
        flex-direction: row;
        align-items: center; /* Common addition for balanced side-by-side content */
    }
}

.pricing-feature-item {
    /* flex-1 */
    flex: 1 1 0%;

    /* p-8 (2rem or 32px) */
    padding: 2rem;
    /* rounded-2xl (1rem or 16px) */
    border-radius: 1rem;
    /* shadow-sm */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* border border-gray-100 */
    border: 1px solid #f3f4f6;
    /* flex flex-col items-center */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transition-transform (150ms) */
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* Base behavior (Mobile): No background */
    background-color: transparent;
}

/* md:bg-white (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .pricing-feature-item {
        background-color: #ffffff;
    }
}

/* hover:scale-105 */
.pricing-feature-item:hover {
    transform: scale(1.05);
}


.pricing-premium-container {
    /* bg-white */
    background-color: #ffffff;
    /* rounded-3xl (1.5rem or 24px) */
    border-radius: 1.5rem;
    /* shadow-lg */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* border border-gray-100 */
    border: 1px solid #f3f4f6;
    /* overflow-hidden */
    overflow: hidden;
    /* max-w-2xl (42rem or 672px) */
    max-width: 42rem;
    /* mx-auto */
    margin-left: auto;
    margin-right: auto;
    /* Standard block behavior */
    display: block;
    width: 100%;
}

.pricing-tab-label {
    /* px-8 (2rem or 32px) & py-4 (1rem or 16px) */
    padding: 0rem 2rem;
    /* text-gray-400 */
    color: #9ca3af;
    /* font-bold */
    font-weight: 700;
    /* uppercase */
    text-transform: uppercase;
    /* text-xs (0.75rem or 12px) */
    font-size: 0.75rem;
    line-height: 1rem;
}

.pricing-tile-interactive {
    /* p-6 (1.5rem or 24px) */
    padding: 0.5rem;
    /* rounded-2xl (1rem or 16px) */
    border-radius: 1rem;
    /* border border-gray-100 */
    border: 1px solid #f3f4f6;
    /* bg-[#F9FAFB] (gray-50) */
    background-color: #f9fafb;
    /* transition-colors (Standard 150ms) */
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* group (This enables styling children based on parent hover) */
    position: relative;
    cursor: pointer;
}

/* hover:border-[#34D399] */
.pricing-tile-interactive:hover {
    border-color: #34d399;
}
/* ====================  TRANSACTION ================*/

.transaction-card-standard {
    /* bg-white */
    background-color: #ffffff;
    /* p-6 (1.5rem or 24px) */
    padding: 0rem 1.5rem;
    /* rounded-2xl (1rem or 16px) */
    border-radius: 1rem;
    /* border border-gray-100 */
    border: 1px solid #f3f4f6;
    /* shadow-sm */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* Best practice: ensure it behaves as a block */
    display: block;
}

@media (min-width: 640px) {
    .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.transaction-peer-trigger {
    /* absolute */
    position: absolute;
    /* opacity-0 */
    opacity: 0;
    /* Recommended: Ensure it still covers the area for clicks/taps */
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 10;
}

/* Example of how 'peer' logic works in Traditional CSS */
/* When the hidden input is checked, change the sibling's style */
.transaction-peer-trigger:checked + .vivified-peer-visual {
    background-color: #34D399; /* Brand Green */
    border-color: #34D399;
}

.transaction-selectable-tile {
    /* block */
    display: block;
    /* p-6 (1.5rem or 24px) */
    padding: 0rem  1rem;
    /* bg-white */
    background-color: #ffffff;
    /* border-2 border-gray-100 */
    border: 2px solid #f3f4f6;
    /* rounded-2xl (1rem or 16px) */
    border-radius: 1rem;
    /* cursor-pointer */
    cursor: pointer;
    /* transition-all (Standard 150ms) */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* Best practice: ensure no text decoration if used on an <a> tag */
    text-decoration: none;
}

/* hover:border-gray-200 */
.transaction-selectable-tile:hover {
    border-color: #e5e7eb;
}

@media (min-width: 1024px) {
  .col-span-4 {
    grid-column: span 4 / span 4;
  }
}

.transaction-panel-sticky {
    /* sticky */
    position: -webkit-sticky; /* Support for older Safari */
    position: sticky;
    /* top-24 (6rem or 96px) */
    top: 6rem;
    /* bg-white */
    background-color: #ffffff;
    /* rounded-[32px] (2rem) */
    border-radius: 2rem;
    /* p-8 (2rem or 32px) */
    padding: 2rem;
    /* shadow-xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    /* border border-gray-100 */
    border: 1px solid #f3f4f6;
    /* Standard block behavior */
    display: block;
  
    /* Recommended to ensure the panel doesn't collapse */
    height: fit-content;
}

.transaction-btn-card {
    /* w-full */
    width: 100%;
    /* flex items-center justify-center */
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap-3 (0.75rem or 12px) */
    gap: 0.75rem;

    /* bg-[#0D1B2A] & text-white */
    background-color: #0d1b2a;
    color: #ffffff;
    /* py-4 (1rem or 16px) */
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* rounded-xl (0.75rem or 12px) */
    border-radius: 0.75rem;
    /* font-bold */
    font-weight: 700;

    /* transition-all (Standard 150ms) */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* Essential button hygiene */
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem; /* Adjust based on your base text size */
}

/* hover:bg-black */
.transaction-btn-card:hover {
    background-color: #000000;
}

.transaction-btn-vivified-paypal {
    /* w-full */
    width: 100%;
    /* flex items-center justify-center */
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap-3 (0.75rem or 12px) */
    gap: 0.75rem;
    /* bg-[#FFC439] (Golden Yellow) */
    background-color: #ffc439;
    /* text-[#003087] (Royal Blue) */
    color: #003087;
    /* py-4 (1rem or 16px) */
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* rounded-xl (0.75rem or 12px) */
    border-radius: 0.75rem;
    /* font-bold */
    font-weight: 700;
    /* transition-all (Standard 150ms) */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* Essential button hygiene */
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 1rem;
}

/* hover:bg-[#F2BA36] (Slightly Darker Gold) */
.transaction-btn-vivified-paypal :hover {
    background-color: #f2ba36;
}

/*======================   HOOME PAGE ===============*/

.feature-card {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border: 1px solid #e0eee0;
}


.feature-card:hover {
    transform: translateY(-10px);
}

.feature-card .icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.4rem;
    color: #2d5a27; /* Vivified Green */
    margin-bottom: 15px;
}

.feature-card p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
}

.cta-wrapper {
    margin-top: 50px;
}
/*
.btn-primary {
    background-color: #2d5a27;
    color: white;
    padding: 15px 35px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background 0.3s ease;
}

.btn-primary:hover {
    background-color: #1e3d1a;
}
*/
/* Responsive adjustments */
@media (max-width: 768px) {
    .section-title { font-size: 2rem; }
    .features-grid { grid-template-columns: 1fr; }
}

/* ===========   TESTIMONIALS ============= */

.section-title-testimonials {
    /* font-extrabold */
    font-weight: 800;

    /* mb-4 (1rem or 16px) */
    margin-bottom: 1rem;
   
    /* text-3xl (1.875rem or 30px) - Mobile Default */
    font-size: 2rem;
    line-height: 2.5rem;
    color: #134E4A;
}

.vivified-grid {
    /* grid */
    display: grid;

    /* gap-8 (2rem or 32px) */
    gap: 2rem;

    /* grid-cols-1 (Default Mobile) */
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* md:grid-cols-3 (Tablet/Desktop 768px+) */
@media (min-width: 768px) {
    .vivified-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.feature-item-testimonials {
    /* bg-[#F9FAFB] */
    background-color: #f9fafb;

    /* p-8 (2rem or 32px) */
    padding: 2rem;

    /* rounded-3xl (1.5rem or 24px) */
    border-radius: 1.5rem;

    /* border border-gray-100 */
    border: 1px solid #f3f4f6;

    /* flex flex-col h-full */
    display: flex;
    flex-direction: column;
    height: 80%;

    /* transition-shadow (150ms default) */
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* hover:shadow-lg */
.feature-item-testimonials:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 
                0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.accent-title-testimonials {
    /* text-[#34D399] */
    color: #34D399;
    /* text-2xl (1.5rem or 24px) */
    font-size: 1.5rem;
    line-height: 2rem;
    /* mb-4 (1rem or 16px) */
    margin-bottom: 1rem; 
    /* Ensuring it behaves as a block for the margin to apply */
    display: block; 
}

.testimonial-text {
    /* text-gray-700 */
    color: #374151;
    /* leading-relaxed (1.625 line height) */
    line-height: 1.625;
    /* mb-6 (1.5rem or 24px) */
    margin-bottom: 1.5rem;
    /* flex-grow */
    flex-grow: 1;
    /* italic */
    font-style: italic;
    /* Best practice for text display */
    display: block;
}

.flex-header-testimonials{
    /* flex */
    display: flex;
    /* items-center */
    align-items: center;
    /* gap-4 */
    gap: 1rem;
}

.testimonials-icon-circle {
    /* w-12 & h-12 (3rem or 48px) */
    width: 48px;
    height: 48px;
    /* bg-[#059669] & text-white */
    background-color: #059669;
    color: #ffffff;
    /* rounded-full */
    border-radius: 9999px;
    /* flex items-center justify-center */
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-bold */
    font-weight: 700;
    /* Ensures the circle doesn't distort in a flex container */
    flex-shrink: 0;
}

.bg-059669{
   background-color: #059669;
}

.bg-134E4A{
   background-color: #134E4A;
}

.bg-19a2fc{
 background-color: #19a2fc;
}

.text-0D1B2A{
color:#0D1B2A;
}

.text-34D399{
  color:#34D399;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500{ 
  color: #6b7280;
}

.text-gray-600 {
    color: #4b5563;
}

 .text-gray-700 {
    color: #374151;
}

.text-gray-900 {
    color: #111827;  
}

.text-green-600 {
  color: #16a34a;
}

.text-white{
  color: #ffffff;
}

.text-xs{/* (0.75rem or 12px) */
    font-size: 0.75rem; /* 12px */
  line-height: 1rem;  /* 16px */
}

.text-sm {/* (0.875rem or 14px) */
    font-size: 0.875rem;
    line-height: 1rem;
}

.text-lg {/*(1.125rem or 18px) */
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

.text-3xl{
  font-size: 2rem; 
  margin-bottom:1.5rem; 
}

.text-4xl{
  font-size: 3rem; 
  margin-bottom:1.5rem; 
}

.text-left{
  text-align: left;
}

.text-right{
text-align: right;
}

.text-center{
    text-align: center;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.uppercase {
  text-transform: uppercase;
}

.leading-relaxed{
  line-height: 1.625;}

.testimonials-label-small {
    /* text-xs (0.75rem or 12px) */
    font-size: 0.75rem;
    line-height: 1rem;

    /* text-gray-500 */
    color: #6b7280;

    /* uppercase */
    text-transform: uppercase;

    /* tracking-widest (0.1em) */
    letter-spacing: 0.1em;

    /* Best practice for labels */
    font-weight: 600; 
    display: block;
}

.note-italic {
    /* text-xs (0.75rem or 12px) */
    font-size: 1rem;
    line-height: 1rem;
    /* text-gray-400 */
    color: #9ca3af;
    /* text-center */
    text-align: center;
    /* italic */
    font-style: italic;
    /* Standard block behavior for centering and margins */
    display: block;
}

/* =========Q & A SECTION =========*/
.faq-content-container {
    /* max-w-[800px] */
    max-width: 800px;

    /* mx-auto */
    margin-left: auto;
    margin-right: auto;

    /* px-6 (1.5rem or 24px) */
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    /* Recommended for layout containers */
    width: 100%;
    box-sizing: border-box;
}

.px-6 {/*(1.5rem or 24px) */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

.px-8 {   
    padding-left: 2rem;
    padding-right: 2rem;
  }

.space-y-3 > * + * {
  margin-top: 0.75rem; /*1rem;  16px  space-y-4*/
  margin-bottom: 0.75rem;
}  

.space-y-4 > * + * {
  margin-top: 1rem; /*1rem;  16px  space-y-4*/
  margin-bottom: 1rem;
}

.space-y-6 > * + * {
  margin-top: 1.5rem; /* 24px */
}

.space-y-12 > * + * {
  margin-top: 3rem; /* 24px */
}

.faq-card-light {
    /* bg-white */
    background-color: #ffffff;
    /* rounded-2xl (1rem or 16px) */
    border-radius: 1rem;
    /* border border-gray-100 */
    border: 1px solid #f3f4f6;
    /* p-6 (1.5rem or 24px) */
    padding: 0.5rem 1.5rem;
    /* shadow-sm */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* Ensures internal elements don't spill over rounded corners */
    overflow: hidden;
}

.faq-heading-small {
    /* text-lg (1.125rem or 18px) */
    font-size: 1.125rem;
    line-height: 1.75rem;

    /* font-bold */
    font-weight: 700;

    /* text-[#134E4A] */
    color: #134E4A;

    /* mb-2 (0.5rem or 8px) */
    margin-bottom: 0.5rem;

    /* Ensures the margin applies correctly to text elements */
    display: block;
}

.faq-body-relaxed {
    /* text-gray-600 */
    color: #4b5563;

    /* leading-relaxed (1.625 line height) */
    line-height: 1.625;
}

/* =========  CYCLING TEXT =========*/

/* Hero Layout */
.hero-section {
    padding: 10px 20px;
    text-align: center;
    background: transparent;
    font-family: 'Inter', sans-serif;
}

.hero-container h1 {
    font-size: 2.5rem;
    color: #1a3c34;
    margin-bottom: 0;
    display: inline-block;
}

/* The Cycling Container */
.cycling-wrapper {
    display: block;
    height: 2.5em; /* Match line height */
    overflow: hidden;
    margin-top: 5px;
}

.cycling-text {
    display: block;
    position: relative;
    color: #1a3c34; /* Vivified Green */
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2em;
    animation: cycle-text 12s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Animation Logic */
@keyframes cycle-text {
    0%, 8%   { top: 0; }
    10%, 18%  { top: -1.2em; }
    20%, 28%  { top: -2.4em; }
    30%, 38%  { top: -3.6em; }
    40%, 48%  { top: -4.8em; }
    50%, 58%  { top: -6.0em; }
    60%, 68%  { top: -7.2em; }
    70%, 78%  { top: -8.4em; }
    80%, 88%  { top: -9.6em; }
    90%, 98%  { top: -10.8em; }
    100%      { top: 0; }
}

.hero-subtitle {
    margin-top: 30px;
    font-size: 1.2rem;
    color: #556b65;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-container h1 { font-size: 1.8rem; }
    .cycling-text { font-size: 2rem; }
    .cycling-wrapper { height: 1.2em; }
}

/*====== NEW SLIDESHOW==*/
        /* Navigation Arrows */
        .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            font-size: 24px;
            transition: 0.3s ease;
            user-select: none;
            background-color: rgba(0,0,0,0.4);
            text-decoration: none;
            z-index: 2;
        }

        .next { right: 0; border-radius: 3px 0 0 3px; }
        .prev { left: 0; border-radius: 0 3px 3px 0; }

        .prev:hover, .next:hover {
            background-color: rgba(0,0,0,0.8);
        }

        /* Smooth Fade Transition */
        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @keyframes fade {
            from { opacity: .4; } 
            to { opacity: 1; }
        }

/* Restore basic browser defaults that Tailwind CSS Preflight strips out */
h1 { font-size: 2em; font-weight: bold; margin: 0.67em 0; }
h2 { font-size: 1.5em; font-weight: bold; margin: 0.83em 0; }
h3 { font-size: 1.17em; font-weight: bold; margin: 1em 0; }
h4 { font-size: 1em; font-weight: bold; margin: 1.33em 0; }
h5 { font-size: 0.83em; font-weight: bold; margin: 1.67em 0; }
h6 { font-size: 0.67em; font-weight: bold; margin: 2.33em 0; }
p { margin-top: 1em; margin-bottom: 1em; }
ul:not(.nav-links) { list-style-type: disc; padding-inline-start: 40px; margin-top: 1em; margin-bottom: 1em; }
ol { list-style-type: decimal; padding-inline-start: 40px; margin-top: 1em; margin-bottom: 1em; }
strong, b { font-weight: bold; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }
/* End Restore */