* {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 0;
}

header {
  width: 100%;
  background-color: #fff;
  padding: 20px 80px;
  position: fixed;
  z-index: 9999;
}

.head {
  font-family: 'satoshi';
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: flex;
  flex-direction: column; /* stack "Build with" above the logo */
  align-items: flex-end; /* align both to the right */
  text-align: right; /* make the text right-aligned */
}

.logo .build {
  color: #333;
  margin-bottom: 5px; /* little gap above the logo */
  font-size: 14px;
}

.logo img {
  width: 144px; /* adjust as you want */
  height: 24px;
}

.main-nav {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex: 1;
}

.main-nav-links-desktop {
  display: flex;
  gap: 30px;
  /* flex: 1; Remove this, it's not needed here and can cause issues if parent has flex:1 */
  justify-content: center; /* Centers the p elements within this div */
}

.main-nav a {
  cursor: pointer;
  color:  rgba(37, 43, 55, 1);
  font-weight: 500;
  transition: color 0.3s ease;
  text-decoration: none;
}

.main-nav p:hover {
  color: #007bff;
}

/* New styles for social icons container */
.social-icons {
   display: none;
}

.social-icons a img {
    width: 30px; /* Adjust icon size as needed */
    height: 30px;
    filter: brightness(0) invert(1); /* Makes black icons white for the deep blue background */
    transition: transform 0.2s ease;
}

.social-icons a img:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}

.ltt {
    background-color: rgba(0, 56, 230, 1);
    padding: 16px 32px;
    color: white;
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
}

.ltt:hover {
  color: rgba(254, 225, 52, 1);;
}

.build {
 background-color: rgba(254, 225, 52, 1);
 padding: 2px 8px;
 font-family: 'instrument sans';
 border-radius: 100px;
 border-bottom-left-radius: 0;
}

/* Hamburger menu styles */
.hamburger-menu {
    display: none; /* Hidden by default on desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 10000; /* Ensure it's above other elements */
    margin-left: 20px; /* Add some space between LTT and hamburger */
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: rgba(37, 43, 55, 1);
    border-radius: 5px;
    transition: all 0.3s ease;
}

.alal {
  background-color: rgba(231, 236, 253, 1);
}

.dps {
  padding-top: 200px;
  text-align: center;
}

.de-mar {
  font-family: 'satoshi';
  font-size: 96px;
  font-weight: 700;
  font-style: bold;
  color: rgba(37, 43, 55, 1);
}

.de-mar span {
  color: rgba(11, 67, 230, 1);
}

.line {
  font-family: 'satoshi';
}

.backback {
  width: 472px;
  height: 52px;
  opacity: 1;
  gap: 8px;
  background-color: rgba(179, 197, 247, 1);
  border-radius: 100px;
  padding: 4px;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: flex-start;
  margin: 0 auto;
  color: rgba(5, 28, 97, 1);
}

.mb {
    background-color: rgba(60, 105, 235, 1);
    color: white;
    width: 182px;
    height: 44px;
   opacity: 1;
   padding-top: 8px 24px;
   gap: 10px;
   border-radius: 100px;
   text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}

.pgs {
    font-size: 20px;
}

.pgs p { /* Added this to target individual paragraphs for mobile padding */
  margin-bottom: 10px; /* To prevent paragraphs from sticking together on mobile */
}

.pgs :first-child {
    color:  rgb(5, 0, 134);
}

.pricing-page-container{
  padding: 120px 80px;
}

.pricing-plans-wrapper {
  display: flex;
  justify-content: center; /* centers the 3 cards horizontally */
  align-items: stretch; /* aligns the top edges */
  gap: 40px; /* space between them */
  padding: 80px;
}

.pricing-plan {
  font-family: 'satoshi';
  background-color: white; /* white background for each card */
  color: #252b37;
  border-radius: 16px;
  padding: 24px 40px;
  width: 340px; /* fixed width ensures alignment */
  flex-shrink: 0; /* prevents them from shrinking */
  display: flex;
  flex-direction: column;
  align-items: left;
  text-align: left;
}

.pricing-plan h2 {
  font-family: 'satoshi';
}

.pricing-plan-most-popular {
  background-color: rgba(5, 28, 97, 1);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 24px 40px;
  width: 340px; /* fixed width ensures alignment */
  flex-shrink: 0; /* prevents them from shrinking */
  display: flex;
  flex-direction: column;
  align-items: left;
  text-align: left;
}

.pricing-plan:hover {
  box-shadow: 0 20px 30px rgba(0,0,0,0.15);
}

.pricing-plan-most-popular:hover {
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}

.pricing-plan-most-popular h2 {
  color: white;
}

.description {
  font-family: 'satoshi';
}

 .badge {
  background: linear-gradient(270deg, #FEEB77 0%, #0B43E6 100%);
  border-radius: 100px;
  padding: 4px 12px;
  color: #fff;
  font-size: 16px; 
}

.price {
  font-size: 40px;
  font-weight: 800;
  margin: 16px 0;
}

.price span {
  font-size: 14px;
  color: #666;
}

.price1 {
  font-size: 40px;
  font-weight: 800;
  margin: 16px 0;
  color: white;
}

.price1 span {
  font-size: 14px;
  color: #666;
}

.subscribe-button {
  font-family: 'satoshi';
  background-color: #0038E6;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  text-decoration: none;
  text-align: center;
}

.subscribe-button:hover {
  background-color: #001E80;
  color: rgba(254, 225, 52, 1);;
}

.features-list {
  list-style: none;
  padding: 0;
  margin-top: 24px;
  text-align: left;
}

.features-list li {
  color: rgba(5, 28, 97, 1);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.features-list li::before {
  content: "✓";
  color: #0038E6;
  font-weight: bold;
}

.features-list1 {
  list-style: none;
  padding: 0;
  margin-top: 24px;
  text-align: left;
}

.features-list1 li {
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.features-list1 li::before {
  content: "✓";
  color: #0038E6;
  font-weight: bold;
}

.pricing-plan-most-popular .features-list li::before {
  color: rgba(255, 255, 255, 1);
}

.footer-info {
  display: flex;
  font-family: 'satoshi';
  justify-content: space-between; /* spreads everything across the width */
  align-items: center;
  padding: 30px 60px;
  background: radial-gradient(
    50% 162.64% at 50% 50%,
    #0B43E6 0%,
    #0830A3 100%
  );
  color: white;
  border-radius: 24px;
}

/* Base style for the decorative images */
.footer-info > img:first-child,
.footer-info > img:last-child {
    max-width: 100px; /* Limit size on desktop if too large */
    height: auto;
}

.footer-info > div {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  /* Ensure text doesn't wrap awkwardly on small screens */
  white-space: nowrap;
}

.footer-info > div img {
  width: 24px;
  height: 24px;
}

/* add vertical line between the middle items */
.footer-info > div:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -30px; /* Increased space to account for original gap and line */
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.2); /* light line */
}

/* Styling for the entire Call-to-Action section */
.cta-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 80px; /* Vertical and horizontal padding */
    background-color: rgba(5, 28, 97, 1); /* Dark blue background as in the image */
    border-radius: 80px; /* Rounded corners for the entire section */
    margin: 50px auto; /* Center the section and give some vertical space */
    max-width: 1200px; /* Adjust max-width as needed */
    box-sizing: border-box; /* Include padding in element's total width */
    gap: 24px;
}

.cta-content-wrapper {
    text-align: center; /* Center all content horizontally */
    max-width: 800px; /* Limit the width of the text content */
}

/* Styling for the main title */
.cta-title {
    font-size: 64px; /* Large font size */
    font-weight: 700;
    font-family: 'instrument sans';
    font-style: bold;
    color: rgba(255, 255, 255, 1); /* White text color */
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Styling for the description text */
.cta-description {
    font-size: 16px;
    font-weight: 400;
    font-family: 'satoshi';
    font-style: normal;
    color: rgba(255, 255, 255, 0.6); /* Lighter white/grey for description */
    line-height: 1.5;
    margin-bottom: 40px;
}

/* Container for the buttons */
.cta-buttons {
    display: flex;
    font-family: 'satoshi';
    justify-content: center; /* Center buttons horizontally */
    gap: 20px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* Base button styles */
.btn {
    display: inline-flex; /* Use flex to align text and arrow */
    align-items: center; /* Vertically center content */
    padding: 15px 30px;
    border-radius: 8px; /* Slightly rounded button corners */
    text-decoration: none; /* Remove underline from links */
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Primary outline button style (white border, transparent background) */
.btn-primary-outline {
    background-color: rgba(255, 255, 255, 1); /* White text */
    color: rgba(5, 28, 97, 1);
    border-radius: 100px;
    padding: 16px 24px;
    width: 201px;
    height: 56px;
    justify-content: center;
    text-align: center;
}

.btn-primary-outline:hover {
  color: blue;
}

/* Primary filled button style (blue background, white text) */
.btn-primary-filled {
    background-color: rgba(0, 56, 230, 1); /* White text */
    color: rgba(255, 255, 255, 1);
    border-radius: 100px;
    padding: 16px 24px;
    width: 224px;
    height: 56px;
    display: inline-flex; /* makes text + icon align in a row */
    align-items: center; /* vertically centers them */
    justify-content: center; /* horizontally centers everything */
    gap: 10px;
}

.btn-primary-filled:hover {
    color: black;
}

/* Style for the arrow in the "Schedule a Call" button */
.btn-primary-filled::after {
    content: ''; /* The actual arrow content is in the HTML, this is just for potential future use or consistency */
    margin-left: 8px; /* Space between text and arrow */
}

/* Overall Footer Styling */
.main-footer {
    display: flex; /* Arrange children in a row */
    justify-content: space-between; /* Space out items: left, center, right */
    align-items: center; /* Vertically center items */
    padding: 56px 80px; /* Padding inside the footer */
    background-color: #fff; 
}

/* Left Section: Social Media Icons */
.footer-left {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between icons */
}

.social-icon img {
    width: 24px; /* Size of your social media icons */
    height: 24px;
    vertical-align: middle; /* Align icons nicely */
    transition: transform 0.2s ease-in-out;
}

.social-icon:hover img {
    transform: scale(1.1); /* Slight zoom effect on hover */
}

/* Center Section: Copyright Text */
.footer-copyright {
    font-size: 16px;
    font-family: 'satoshi';
    font-weight: 500;
    color: rgba(5, 28, 97, 1); 
    margin: 0; 
}

.tba {
   font-family: 'instrument sans';
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
    font-size: 16px;
    color: rgba(37, 43, 55, 1);
    font-weight: 500;
}

.blueosm {
  background-color: rgba(1, 12, 42, 1);
  padding: 140px 80px;
}

.blueosm span {
    background: linear-gradient(270deg, #FEEB77 48.08%, #0B43E6 78.85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}

.blue-background {
  display: flex;
  justify-content: center;
  align-items: center;
}

.blue-background > div {
  display: flex;
  justify-content: center;
  align-items: stretch;
  position: relative;
}

.bo {
  font-family: 'instrument sans';
  font-size: 36px;
  font-weight: 700;
  font-style: bold;
  color: white;
  margin-top: 40px; /* Add top margin to push text down from the image */
  margin-bottom: 20px; /* Space between text and button */
  position: relative; /* Ensure text is above any potential background effect */
  z-index: 2;
}

.soa {
  font-family: 'satoshi';
    background-color: #0038E6;
    color: white;
    border-radius: 100px;
    padding: 12px 14px;
    width: 235px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    margin-bottom: 50px; /* Space at the bottom of the container */
    position: relative;
    z-index: 2;
}

/* Default styles for larger screens (no media query) */
.comparison-container {
  display: flex;
  flex-direction: row; /* Default: columns side-by-side */
  position: relative;
  overflow: visible;
  /* Removed gap here, as it was conflicting with default large screen layout */
}

.comparison-containerr {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: relative;
  overflow: visible; 
}

.osm {
  font-family: 'Instrument Sans';
  color: white;
  font-weight: 700;
  font-style: Bold;
  font-size: 48px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  text-transform: capitalize;
}

.mds-header p {
  font-family: 'Satoshi';
font-weight: 900;
font-style: Black;
font-size: 16px;
text-align: center;

}

.column1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(231, 236, 253, 0.1);
  width: 377px; /* Default width for large screens */
  border-bottom-left-radius: 24px;
  border-top-left-radius: 24px;
}

/* Ensure column2 and column3 have their default widths and margins for large screens */
.column2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(231, 236, 253, 0.1);
  width: 377px; /* Default width for large screens */
  border-bottom-right-radius: 24px;
  border-top-right-radius: 24px;
}

.column3 {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(231, 236, 253, 0.1);
  border-radius: 24px;
  margin-left: 10px; /* Default margin for large screens */
  position: relative;
  width: 500px; /* Default width for large screens from mdst-header */
}
/* Re-applying border-radius to column3 for consistency on large screens */
.column3 {
    border-radius: 24px;
}


.bwp-header {
  background-color: rgba(255, 241, 162, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 10px;
  gap: 10px;
  height: 240px;
  color: rgba(37, 43, 55, 1);
  font-weight: 900;
  font-family: 'satoshi';
  font-size: 24px;
  border-top-left-radius: 24px;
}

.mds-header {
  background: rgba(255, 252, 235, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 10px;
  gap: 10px;
  height: 240px;
  color: rgba(37, 43, 55, 1);
  font-weight: 900;
  font-size: 24px;
  border-top-right-radius: 24px;
}

.mdst-header {
  background: radial-gradient(
    circle at 50% 45%,
    #0B43E6 0%,
    #0830A3 50%,
    #3C69EB 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 10px;
  width: 500px; /* This width will now be explicitly overwritten in media query for small screens */
  height: 240px; /* Consistent height for headers */
  opacity: 1;
  gap: 10px;
  color: rgba(255, 255, 255, 1);
  font-weight: 900;
  font-size: 24px;
  border-top-right-radius: 24px;
  border-top-left-radius: 24px;
}

.pcolor,
.pcolorr,
.pcolorrr {
  font-family: 'satoshi';
  padding: 24px;
  font-size: 16px;
  flex-grow: 1;
}

.pcolor p,
.pcolorr p,
.pcolorrr p {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
}

.column1 .pcolor p {
  /* Styles for paragraphs in the first column */
  margin-bottom: 10px; 
}

.column2 .pcolorr p {
  /* Styles for paragraphs in the second column */
  margin-bottom: 10px;
}

/* To ensure alignment if content length varies, you might need more advanced techniques
   like using a grid for the paragraphs themselves within each .pcolor / .pcolorr */
.pcolor, .pcolorr {
  display: grid;
  grid-template-columns: 1fr; /* Each paragraph takes full width */
  /* You can add grid-auto-rows: 40px; for example, if you want fixed height rows */
}

.pcolor p::before {
  content: "\2713";
  background-color: rgba(255, 241, 162, 1);
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  color: black;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-right: 8px;
  flex-shrink: 0;
}

.pcolorr p::before {
  content: "\2713";
  background-color: rgba(255, 252, 235, 1);
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  color: black;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-right: 8px;
  flex-shrink: 0;
}

.pcolorrr p::before {
  content: "\2713";
  background-color: rgba(60, 105, 235, 1);
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  color: black;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-right: 8px;
  flex-shrink: 0;
}

.brands {
  width: 100%;
  display: flex;
  justify-content: center; /* centers the logos */
  align-items: center; /* vertically aligns them */
  gap: 80px; /* spacing between logos */
  flex-wrap: wrap; /* allows logos to move to the next line on smaller screens */
  padding-bottom: 80px;
}

.brands img {
    flex-shrink: 0;
}

.faq-section {
    padding: 80px 20px; /* Adjust padding as needed for your overall layout */
    background-color: rgba(231, 236, 253, 1); /* Light blue background as in your image */
    color: #333;
    font-family: Arial, sans-serif;
}

.faq-main-title {
    font-family: 'instrument sans';
    font-size: 48px;
    font-weight: bold;
    color: rgba(37, 43, 55, 1);
    margin-bottom: 50px;
    text-align: left; /* Align main title to the left */
    max-width: 1000px; /* Match max-width of grid below */
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px; /* Indent the title slightly */
    box-sizing: border-box;
}

/* Grid layout for FAQ items */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px; /* Space between grid items */
    max-width: 1000px; /* Max width for the grid */
    margin: 0 auto; /* Center the grid */
}

/* Style for individual FAQ item containers */
.faq-item-container {
    background-color: #fff; /* White background for each card */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Important for border-radius on expanded items */
}

/* Styling for the <details> element */
.faq-item {
    border: none; /* Remove default border */
    position: relative;
}

/* Styling for the <summary> element (the question) */
.faq-question {
    font-family: 'instrument sans';
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(37, 43, 55, 1); /* Dark blue for questions */
    cursor: pointer;
    background-color: transparent; /* Ensure no default summary background */
    user-select: none; /* Prevent text selection on click */
}

/* Custom icon for the summary */
.faq-question::after {
    content: '+'; /* Plus icon by default */
    font-size: 1.5em;
    font-weight: normal;
    color: #4a59bb; /* Blue color for icon */
    line-height: 1; /* Adjust vertical alignment */
    transition: transform 0.3s ease;
}

/* Change icon to 'X' when details is open */
.faq-item[open] > .faq-question::after {
    content: '×'; /* Times icon for 'X' */
    transform: rotate(180deg); /* Optional: Animate the plus to an X */
}

/* Styling for the answer content */
.faq-answer {
    padding: 0 25px 20px; /* Top padding is 0, rest is standard */
    font-size: 16px;
    font-family: 'satoshi';
    line-height: 1.6;
    color: rgba(5, 28, 97, 1);
    max-height: 0; /* Hidden by default */
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding-top 0.4s ease-out; /* For smooth slide effect */
}

/* When open, set max-height to allow content to show */
.faq-item[open] .faq-answer {
    max-height: 200px; /* A value larger than the max possible height of content */
    padding-top: 10px; /* Add some top padding when open */
    transition: max-height 0.6s ease-in, padding-top 0.6s ease-in;
}

/* Style paragraph within answer */
.faq-answer p {
    margin: 0; /* Remove default paragraph margins */
}

/* Styling for the entire Call-to-Action section */
.cta-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 100px 80px; /* Vertical and horizontal padding */
    background-color: rgba(5, 28, 97, 1); /* Dark blue background as in the image */
    border-radius: 80px; /* Rounded corners for the entire section */
    margin: 50px auto; /* Center the section and give some vertical space */
    max-width: 1200px; /* Adjust max-width as needed */
    box-sizing: border-box; /* Include padding in element's total width */
    gap: 24px;
}

.cta-content-wrapper {
    text-align: center; /* Center all content horizontally */
    max-width: 800px; /* Limit the width of the text content */
}

/* Styling for the main title */
.cta-title {
    font-size: 64px; /* Large font size */
    font-weight: 700;
    font-family: 'instrument sans';
    font-style: bold;
    color: rgba(255, 255, 255, 1); /* White text color */
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Styling for the description text */
.cta-description {
    font-size: 16px;
    font-weight: 400;
    font-family: 'satoshi';
    font-style: normal;
    color: rgba(255, 255, 255, 0.6); /* Lighter white/grey for description */
    line-height: 1.5;
    margin-bottom: 40px;
}

/* Container for the buttons */
.cta-buttons {
    display: flex;
    font-family: 'satoshi';
    justify-content: center; /* Center buttons horizontally */
    gap: 20px; /* Space between buttons */
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
}

/* Base button styles */
.btn {
    display: inline-flex; /* Use flex to align text and arrow */
    align-items: center; /* Vertically center content */
    padding: 15px 30px;
    border-radius: 8px; /* Slightly rounded button corners */
    text-decoration: none; /* Remove underline from links */
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Primary outline button style (white border, transparent background) */
.btn-primary-outline {
    background-color: rgba(255, 255, 255, 1); /* White text */
    color: rgba(5, 28, 97, 1);
    border-radius: 100px;
    padding: 16px 24px;
    width: 220px;
    height: 56px;
    justify-content: center;
    text-align: center;
}

.btn-primary-outline:hover {
  color: blue;
}

/* Primary filled button style (blue background, white text) */
.btn-primary-filled {
    background-color: rgba(0, 56, 230, 1); /* White text */
    color: rgba(255, 255, 255, 1);
    border-radius: 100px;
    padding: 16px 24px;
    width: 224px;
    height: 56px;
    display: inline-flex; /* makes text + icon align in a row */
    align-items: center; /* vertically centers them */
    justify-content: center; /* horizontally centers everything */
    gap: 10px;
}

.btn-primary-filled:hover {
    color: rgba(254, 225, 52, 1);;
}

/* Style for the arrow in the "Schedule a Call" button */
.btn-primary-filled::after {
    content: ''; /* The actual arrow content is in the HTML, this is just for potential future use or consistency */
    margin-left: 8px; /* Space between text and arrow */
}

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

/* Section Title */
.section-title {
    color: rgba(37, 43, 55, 1);
    text-align: left;
    font-weight: 700;
    font-style: Bold;
    font-size: 48px;
    margin-bottom: 40px;
    font-family: 'instrument sans';
}

/* Buttons */
.btn {
    font-family: 'Satoshi';
    text-decoration: none;
    cursor: pointer;
}

.btn-primary {
    background-color: rgba(0, 56, 230, 1);
    color: #ffffff;
    border-radius: 100px;
    font-size: 16px;
    padding: 16px 24px;
    width: 220px;
    height: 56px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.btn-primary:hover {
    background-color: rgb(1, 26, 100);
    color: rgba(254, 225, 52, 1);;
}

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

/* Pricing Header */
.pricing-header {
    display: grid; /* Change to grid for better control */
    grid-template-columns: 1fr repeat(3, minmax(200px, 1fr)); /* Empty first column + 3 pricing plans */
    gap: 20px;
    margin-bottom: 40px;
    font-family: 'instrument sans';
    align-items: end; /* Align items to the bottom */
}

.section-title {
    grid-column: 1 / 2; /* Span the first column */
    /* Other styles for section-title remain */
    padding-right: 100px;
}

.pricing-plan-header {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    position: relative;
    display: flex; /* Enable flexbox for vertical alignment */
    flex-direction: column; /* Stack contents vertically */
    justify-content: center; /* Align content to the bottom */
    height: 100%; 
}
 
.feature-item {
    display: grid;
    grid-template-columns: 1fr repeat(3, minmax(150px, 1fr)); /* Left text and 3 value/check columns */
    align-items: center;
    padding: 10px 25px;
    min-height: 50px; /* Ensure consistent height for rows */
    border-bottom: 1px solid #e2e8f0;
}

.feature-item p {
    margin: 0;
    font-size: 0.95em;
    color: #4a5568;
    font-weight: 500;
    text-align: left; /* Align feature name to the left */
}

.spanclass, .spanclasse {
    display: flex;
    align-items: center; /* Vertically align content */
    justify-content: center; /* Center content horizontally within their grid column */
    /* text-align: center; */ /* Not strictly needed due to justify-content for flex items */
    white-space: nowrap; /* Prevent their immediate children from wrapping */
    min-width: 0; /* Allow flex items to shrink if necessary */
}

.spanclass {
  gap: 300px; /* this now works perfectly */
  padding-left: 450px;
}

.spanclasse {
  gap: 200px; /* this now works perfectly */
  padding-left: 450px;
}

.spanclasse > div {
  white-space: nowrap; /* Prevents text from breaking */
}


/* Ensure the button is at the bottom of the pricing-plan-header */
.pricing-plan-header .btn-primary {
    margin-top: auto; /* Pushes the button to the bottom */
    margin-left: auto; /* Center button if it has a fixed width */
    margin-right: auto;
}

/* Adjust the .pricing-plan-header.popular to align its button similarly if it also uses btn-primary */
.pricing-plan-header.popular .btn-primary {
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

.pricing-plan-header h3 {
    font-size: 24px;
    font-style: bold;
    font-weight: 700;
    color: rgba(37, 43, 55, 1);
    margin-bottom: 10px;
}

.psb {
  display: flex;
}

.pricing-plan-header .price {
    font-size: 40px;
    font-weight: 900;
    font-style: normal;
    color: rgba(37, 43, 55, 1);
    margin: 15px 0;
}

.pricing-plan-header .price span {
    font-family: 'satoshi';
    font-size: 16px;
    font-weight: 400;
    color: rgba(5, 28, 97, 1);
}

/* Pricing Table */
.pricing-table {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Ensures borders/shadows are contained */
}

.responsive-button-container {
    display: none; /* Hidden by default on large screens */
    text-align: center; /* Centers the button horizontally */

    /* If you want the button to be absolutely positioned relative to this container,
       this container needs to be 'position: relative;'.
       Otherwise, 'position: absolute;' on .play-button will position it relative to
       the nearest *positioned* ancestor or the document body. */
    position: relative; /* Add this if you want absolute positioning *within* this container */
}

.play-button {
    background-color: #0B43E6; /* Blue background from your design */
    border: none; /* No border for your blue button */
    border-radius: 50%; /* Makes it a circle */
    width: 32px; /* Size */
    height: 32px;
    display: flex; /* Use flex to center the arrow inside */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 0.3s ease;

    /* --- Incorporating Carousel Arrow Positioning --- */
    position: absolute; /* The key change: position absolutely */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust for its own width to truly center */
    bottom: -30px; /* Adjust this value to place it below its container, like the original image implied */
                  /* A value of -30px will place half of the 60px button below the container */
    z-index: 10; /* Ensures it sits above other content if overlapping */
    /* You might remove 'top: 50%; transform: translateY(-50%);' from carousel-arrow
       because we're positioning it from the bottom. */
    /* --- END Carousel Arrow Positioning --- */
}

.play-button:hover {
    background-color: #0056b3;
}

.pricing-plan-column {
    position: relative;
}

.arrow {
    position: relative; /* Keep this for the internal arrow rotation */
    width: 10px;
    height: 10px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    margin-left: -2px; /* Fine-tune centering */
}

.price {
    font-family: 'satoshi';
}

.most-popular {
width: 122px;
height: 28px;
gap: 15px;
opacity: 1;
font-family: 'Instrument Sans';
font-weight: 700;
font-style: Bold;
font-size: 16px;
padding: 4px 12px;
background: linear-gradient(270deg, #FEEB77 0%, #0B43E6 100%);
color: white;
border-radius: 100px;
border-width: 0.5px;

}

.pricing-category {
    padding: 20px 0;
    border-bottom: 1px solid #e2e8f0;
}

.pricing-category:last-child {
    border-bottom: none;
}

/* Remove the border from the last feature item in each category */
.pricing-category .feature-item:last-child {
    border-bottom: none; /* <--- ADD THIS LINE */
}

.pricing-category h4 {
    font-size: 1.2em;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 15px 25px;
    padding-left: 10px;
    border-left: 4px solid #4c51bf;
}

.feature-item {
    display: grid;
    grid-template-columns: 1fr repeat(3, minmax(150px, 1fr)); /* Left text and 3 value/check columns */
    align-items: center;
    padding: 10px 25px;
    min-height: 40px; /* Ensure consistent height for rows */
    border-bottom: 1px solid #e2e8f0;
}

.feature-item:nth-child(even) {
    background-color: #f7fafc; /* Subtle striping */
}

.feature-item p {
    margin: 0;
    font-size: 0.95em;
    color: #4a5568;
    font-weight: 500;
}

.feature-item div {
    text-align: center;
    font-size: 0.95em;
    color: #4a5568;
}

/* Checkmark and Cross Icons */
/* Using SVG for better scalability and customization */
.feature-item span::before {
    content: ''; /* Default empty for non-check/cross items */
    display: inline-block;
    width: 20px; /* Base size, overridden by specific classes if needed */
    height: 20px; /* Base size, overridden by specific classes if needed */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* Apply checkmark to spans with the 'feature-check' class */
.feature-item span::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230B43E6" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>');
    width: 24px; /* Override base size if a larger icon is desired */
    height: 24px; /* Override base size if a larger icon is desired */
}

/* Apply an 'X' to spans with the 'feature-cross' class */
.feature-item .feature-cross::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23051C6199" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
    width: 24px; /* Override base size if a larger icon is desired */
    height: 24px; /* Override base size if a larger icon is desired */
}

.company-benefits-section {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
    max-width: 1200px;
    margin: auto;
}

.company-benefits-section h1 {
    font-family: 'Instrument Sans';
font-weight: 700;
font-style: Bold;
font-size: 40px;
text-align: center;
    color: #252B37;
    margin-bottom: 80px;
}

.benefits-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    justify-content: center;
}

.benefit-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.benefit-card h3 {
   font-family: 'Instrument Sans';
font-weight: 700;
font-style: Bold;
font-size: 20px;
    color: #252B37;
    margin-top: 20px;
    margin-bottom: 20px;
}

.benefit-card p {
    font-family: 'Satoshi';
    color: #252B37;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 24px;
}

/* Parent Wrapper for the entire carousel section */
.carousel-parent-wrapper {
    background-color: #f7f3ed; /* Your light background color */
    display: flex;
    flex-direction: column; /* Arrange title and carousel vertically */
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Takes full viewport height for centering, adjust if part of a larger page */
    overflow: hidden; /* Prevent scrollbar from rotated cards */
    padding: 20px 0; /* Add some vertical padding */
    box-sizing: border-box;
    width: 100%; /* Ensure it spans full width */
    padding-top: 50px;
    padding-bottom: 150px;
}

/* Carousel Container (renamed to carousel-content-area to avoid confusion with parent) */
.carousel-content-area {
    text-align: center;
    max-width: 900px; /* Adjust as needed */
    width: 100%;
    box-sizing: border-box;
}

.wcw {
  justify-content: center;
  align-items: center;
  font-size: 48px;
  font-family: 'instrument sans';
  font-weight: 700;
  font-style: bold;
  padding-bottom: 50px;
}

.wc {
  font-weight: 400;
  font-style: italic;
}

/* Carousel Wrapper for arrows and card stack */
.carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: 350px; /* To accommodate card height and rotation */
}

/* Carousel Arrows */
.carousel-arrow {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 2em;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10; /* Above cards */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.left-arrow {
    left: 100px;
}

.right-arrow {
    right: 100px;
}

/* Card Stack */
.card-stack {
    position: relative;
    width: 450px; /* Width of the main card */
    height: 280px; /* Height of the main card */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Base Testimonial Card Styling */
.testimonial-card {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 30px;
    border-radius: 20px; /* Adjust for rounded corners */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    border: 2px solid #000; /* Black border */
    transition: all 0.5s ease-in-out; /* Smooth transitions for properties */
    transform-origin: center center; /* Ensure rotation is from center */
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1); /* Subtle shadow */
    font-family: 'Instrument Sans';
    font-weight: 600;
    font-style: semi-bold;
}

/* Specific Card Styles - for the initial setup */
/* Front Card - Yellow */
.front-card {
    background-color: #fce205; /* Yellow */
    z-index: 3; /* Topmost */
    transform: rotate(0deg); /* No initial rotation for the front */
}

/* Back Card 1 - Yellow, slightly rotated */
.back-card-1 {
    background-color: #fce205; /* Yellow */
    z-index: 2; /* Middle */
    transform: translate(15px, 10px) rotate(-24.2deg); /* Slight offset and rotation */
    opacity: 1; /* Fully visible */
}

/* Back Card 2 - Yellow, more rotated */
.back-card-2 {
    background-color: #fce205; /* Yellow */
    z-index: 1; /* Bottom */
    transform: translate(30px, 20px) rotate(12.26deg); /* More offset and rotation */
    opacity: 1; /* Fully visible */
}

/* Content inside cards */
.testimonial-text {
    font-size: 1.1em;
    line-height: 1.5;
    color: #333;
    margin-bottom: 20px;
    flex-grow: 1; /* Allows text to take available space */
}

.client-info {
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-actual-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
    border: 1px solid #ccc;
}

.client-image-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ddd; /* Grey placeholder */
    margin-right: 10px;
}

.client-name {
    font-weight: bold;
    color: #333;
    margin: 0;
    text-align: center;
}

.client-role {
    font-size: 0.9em;
    color: #666;
    margin: 0;
    text-align: center;
}

/* Carousel Dots */
.carousel-dots {
    margin-top: 60px; /* Space between cards and dots */
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: #333; /* Darker dot for active slide */
}

/* --- JS will manipulate these classes to change the active card --- */

/* Example of what a 'blue' active card would look like */
/* You would likely have these classes defined and JS would add/remove them */
.active-blue {
    background-color: #000304; /* Light Blue */
    border-color: #000000; /* Dodger Blue */
    z-index: 3;
    transform: translate(15px, 10px) rotate(3deg); /* Example: inherits back-card-1's transform */
}

/* Example of what a 'green' active card would look like */
.active-green {
    background-color: #000000; /* Light Green */
    border-color: #000000; /* Lime Green */
    z-index: 3;
    transform: translate(30px, 20px) rotate(6deg); /* Example: inherits back-card-2's transform */
}

/* --- Responsive Adjustments --- */
@media (max-width: 600px) {

  body {
    overflow-x: hidden; /* Prevent horizontal scroll when sidebar is open */
  }

  header {
    padding: 8px 16px;
  }

  .head {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .logo {
    align-items: flex-start;
    text-align: left;
    flex-grow: 1;
  }

  .logo .build {
    margin-bottom: 2px;
    font-size: 12px;
  }

  .logo img {
    width: 120px;
    height: 20px;
  }

  .main-nav {
    /* Existing properties */
    display: flex; /* Kept for initial setup but overridden by transform for hidden state */
    flex-direction: column;
    width: 100%; /* Occupy 70% of the screen width */
    height: 100vh; /* Full viewport height */
    background-color: #fff;
    position: fixed; /* Fixed position for sidebar */
    top: 0;
    right: -100%; /* Start off-screen to the right (match width) */
    padding: 20px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1); /* Shadow for slide-in effect */
    z-index: 9998;
    transition: right 0.3s ease-in-out; /* Smooth transition for slide-in */
    justify-content: flex-start; /* Align items to top */
    padding-top: 100px; /* Space from the top for menu items */
    gap: 10px;
  }

   /* Hide desktop links on mobile */
  .main-nav-links-desktop {
    flex-direction: column;
  }

  .main-nav p {
    padding: 15px 0; /* Adjusted padding */
    text-align: left;
    padding: 20px 40px;
    border-bottom: 1px solid #eee;
  }

  .main-nav p:last-child {
    border-bottom: none;
  }

  .ltt {
    padding: 16px 22px;
    font-size: 14px;
    font-weight: 700;
    font-style: Bold;
  }

  .hamburger-menu {
    display: flex;
    margin-left: 15px;
  }

    /* Hamburger menu bars color when open */
  .hamburger-menu.active .bar {
    background-color: white; /* --- ADDED: Change hamburger bars to white when active --- */
  }

/* Social icons styling for mobile nav */
  .social-icons {
    display: flex; /* Show social icons on mobile */
    flex-direction: row; /* Keep them horizontal */
    justify-content: center; /* Center them within the sidebar */
    gap: 20px;
    padding: 20px 0;
    margin-top: auto;
  }

  .social-icons a img {
      filter: brightness(0) invert(1); /* Makes icons white for the deep blue background */
      width: 30px;
      height: 30px;
  }
  .social-icons a img:hover {
      transform: scale(1.1);
  }

  /* JavaScript will add this class to show the menu */
  .main-nav.active {
    right: 0; /* Slide into view */
  }

  /* Hamburger animation for open state */
  .hamburger-menu.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .hamburger-menu.active .bar:nth-child(2) {
    opacity: 0;
  }

  .hamburger-menu.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

.main-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background-color: #0038E6; /* deep blue for vibes */
  transition: right 0.3s ease;
}
  .main-nav.active {
    right: 0;
  }
  
  .main-nav p {
    color: white; /* white text for contrast */
    font-size: 18px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* light border */
  }

    .de-mar {
      font-size: 32px;
    }

  .backback {
    width: 296px;
    height: 40px;
    font-size: 12px;
  }

  .mb {
    width: 112px;
    height: 32px;
    font-size: 12px;
  }

    /* Stack pricing headers */
    .pricing-header {
        grid-template-columns: 1fr; /* Stack vertically */
        gap: 25px; /* More space between stacked cards */
    }

    .pricing-plan-header {
        margin: 0 auto; /* Center individual cards */
        max-width: 350px; /* Limit width for better appearance */
    }
    
    .company-benefits-section h1 {
        font-size: 2em;
    }

    .benefits-layout-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }

  .pricing-plans-wrapper {
    flex-direction: column; /* Stacks the cards vertically */
    align-items: center; /* Centers cards horizontally when stacked */
    padding: 40px 20px;
  }

  .pricing-plan,
  .pricing-plan-most-popular {
    width: 90%; /* Makes cards take up more width on small screens */
    max-width: 400px; /* Optional: Sets a maximum width for larger small screens */
    margin-bottom: 20px; /* Adds space between stacked cards */
  }

  .pricing-page-container {
    padding: 60px 20px;
  }

  .footer-info {
    flex-direction: row; /* Stack items vertically */
    padding: 24px; /* Adjust padding for mobile */
    border-radius: 16px; /* Slightly smaller border-radius */
    gap: 4px; /* Space between stacked items */
    text-align: center; /* Center text within the new column layout */
  }

  .footer-info > img:first-child,
.footer-info > img:last-child {
  display: block; /* Ensure the image is visible */
  width: 50%; /* Show half of its original width */
  overflow: hidden; /* Hide any overflowing parts */
}

  .footer-info > div {
    /* Reset flex properties if needed, or refine for vertical layout */
    justify-content: center; /* Center icon and text horizontally */
    white-space: normal; /* Allow text to wrap if necessary */
    flex-direction: column; /* Keep icon and text in a row for each item */
    gap: 8px; /* Slightly reduced gap between icon and text */
    font-size: 14px; /* Smaller font size for items */
    border: none;
  }

  /* Remove vertical lines and add horizontal ones */
  .footer-info > div:not(:last-child)::after {
    content: none; /* Remove vertical line */
  }


  .footer-info > div:last-child::before {
    /* No line after the last item */
    content: none;
  }

  .footer-info > div img {
    width: 20px; /* Slightly smaller icons */
    height: 20px;
  }


  .pricing-header {
    flex-direction: column;
    align-items: center;
  }

  .osm {
    font-size: 24px;
  }

  .cta-section {
    padding: 40px 24px;
    max-width: 343px;
  }

  .cta-title {
    font-size: 32px;
  }

  .cta-content-wrapper {
    border-radius: 40px;
    padding: 40px 24px;
  }

  .cta-description {
    font-size: 12px;
    word-wrap: normal;
    white-space: break-spaces;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn-primary-outline,
  .btn-primary-filled {
    width: 295px;
    height: 56px;
  }

  .main-footer {
    flex-direction: column;
    text-align: left;
    gap: 20px;
    padding-left: 0;
  }

.main-footer {
    align-items: flex-start;
    padding-left: 30px;
}

  .features-sectio {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .faq-section {
        padding: 40px 20px; /* Reduced vertical and horizontal padding */
        padding-bottom: 40px; /* Adjusted if needed */
    }

    .faq-main-title {
        font-size: 32px; /* Smaller font size for mobile */
        text-align: center; /* Often preferred on mobile */
        padding-left: 0; /* Remove specific left indent on mobile */
        margin-bottom: 30px; /* Adjust spacing */
    }

    .faq-grid {
        grid-template-columns: 1fr; /* Single column layout for mobile */
        gap: 15px; /* Slightly reduced gap */
        padding: 0 10px; /* Add some horizontal padding to the grid itself if needed */
    }

    /* Adjust padding for individual faq items on small screens */
    .faq-item-container {
        border-radius: 8px; /* Slightly less rounded corners */
    }

    .faq-question {
        padding: 15px 20px; /* Smaller padding inside the question */
        font-size: 18px; /* Smaller question font size */
    }

    .faq-answer {
        padding: 0 20px 15px; /* Smaller padding inside the answer */
        font-size: 15px; /* Smaller answer font size */
    }
    
    .carousel-parent-wrapper {
    /* Reduce top and bottom padding specifically for small screens */
    padding-top: 20px; /* Smaller top padding */
    padding-bottom: 50px; /* Smaller bottom padding */
    min-height: unset; /* If min-height: 100vh is causing issues on small screens, remove it */
    /* You might also want to adjust other things for smaller screens, like arrow positioning or card size */
  }

  /* Example: Adjust arrow positioning on small screens to be closer to the cards */
  .left-arrow {
    left: 20px; /* Move arrows closer to the edge */
  }

  .right-arrow {
    right: 20px; /* Move arrows closer to the edge */
  }

  /* Example: Make card stack and cards smaller if needed */
  .card-stack {
    width: 300px; /* Smaller width for cards */
    height: 200px; /* Smaller height for cards */
  }

  .testimonial-card {
    padding: 20px; /* Less padding inside the cards */
    font-size: 0.9em; /* Smaller font size for text */
  }

  .wcw {
    font-size: 36px; /* Smaller title font size */
    padding-bottom: 20px; /* Less padding below the title */
  }

  .carousel-dots {
    margin-top: 30px; /* Less space above dots */
  }

   .carousel-wrapper {
        min-height: 280px; /* Adjust min-height for smaller cards */
    }

    .card-stack {
        width: 236px; /* Smaller width for cards */
        height: 196px; /* Smaller height for cards */
    }

    .testimonial-card {
        padding: 20px; /* Reduce padding */
        border-radius: 15px; /* Slightly smaller border-radius */
    }

    .testimonial-text {
        font-size: 12px; /* Smaller font size for text */
        margin-bottom: 15px;
    }

    .client-actual-image,
    .client-image-placeholder {
        width: 25px; /* Smaller client image */
        height: 25px;
    }

    .client-name {
        font-size: 12px;
    }

    .client-role {
        font-size: 12px;
    }

    /* Adjust arrow positioning for smaller screens */
    .left-arrow {
        left: 20px; /* Move arrows closer to the edge */
    }

    .right-arrow {
        right: 20px; /* Move arrows closer to the edge */
    }

    .company-benefits-section {
        padding-top: 50px;
        padding-bottom: 0px;
    }

      .brands {
  width: 100%;
  display: flex;
  justify-content: center; /* centers the logos */
  align-items: center; /* vertically aligns them */
  gap: 30px; /* spacing between logos */
  flex-wrap: wrap; /* allows logos to move to the next line on smaller screens */
  padding-bottom: 40px;
}

.brands img {
    max-width: 90px;
  }


    .pricing-plan-header {
      padding: 10px;
        width: 100%;
        max-width: 350px; /* Limit width of individual plan headers */
    }

    .pricing-plan-header h3 {
      font-size: 16px;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      margin: 0 auto;
      align-items: center;
    }

    .most-popular {
      padding: 4px 12px;
      align-items: center;
      font-size: 12px;
      width: 107px;
      text-align: center;
      justify-content: center;
      margin: 0 auto;
    }

.pricing-plan-header .price {
    font-size: 20px;
    font-weight: 900;
    font-style: normal;
    color: rgba(37, 43, 55, 1);
    margin: 15px 0;
}

    .section-title {
      padding-right: 0px;
    }

    .price span {
      font-size: 12px;
      display: flex;
      flex-direction: column;
    }

      .responsive-button-container {
        display: block; /* Show the button container on smaller screens */
        flex-direction: column;
    }

     /* --- Initial State on Small Screens --- */
    /* Hide the h3 and p.price elements by default */
    .pricing-plan-column .pricing-plan-header h3,
    .pricing-plan-column .pricing-plan-header p.price {
        display: none;
    }
    /* Show the subscription button by default */
    .pricing-plan-column .submove {
        display: block; /* Or flex, depending on its internal layout */
    }

    /* --- State When .show-header-details is Active --- */
    /* When .show-header-details is present, show the h3 and p.price */
    .pricing-plan-column.show-header-details .pricing-plan-header h3,
    .pricing-plan-column.show-header-details .pricing-plan-header p.price {
        display: flex; /* Or initial, or flex etc. */
    }
    /* And hide the subscription button */
    .pricing-plan-column.show-header-details .submove {
        display: none;
    }

   .btn-primary {
  display: flex; /* activates gap */
  align-items: center; /* keeps them vertically aligned */
  justify-content: center; /* centers everything */
  font-size: 10px;
  padding: 8px 12px;
  width: 120px;
  gap: 4px; /* smaller gap */
  margin: 0 auto;
}

    /* Adjust category title margin for smaller screens */
    .pricing-category h4 {
       display: none;
    }

 .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center children horizontally */
    padding: 15px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.feature-item p {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 15px;
    font-size: 1em;
    color: #252b37;
    font-weight: 600;
}

.feature-item div.feature-values { /* A new container for the values */
    display: flex; /* Use flexbox for the values */
    flex-direction: row; /* Arrange values horizontally */
    justify-content: space-around; /* Distribute space evenly */
    width: 100%; /* Take full width */
}

.section-title {
  font-size: 32px;
  text-align: center;
  font-weight: 700;
  font-style: bold;
}

.spanclass {
  gap: 100px; /* this now works perfectly */
  padding-left: 0px;
}

.spanclasse {
  display: flex;
  justify-content: center; /* spread them evenly */
  align-items: center;
  margin: 0 auto;
  gap: 50px;
}


/* Ensure specific styling for checkmarks/crosses to display correctly */
.feature-item span::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin: 0;
}

/* Apply checkmark to empty spans that represent a feature being included */
.feature-item span.included::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230B43E6" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/></svg>');
}

/* Cross icon for specific scenarios (e.g., Brand Strategist in Studio plan) */
.feature-item span.not-included::before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FF0000" width="24px" height="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
    content: '';
}

/* Hide the default span text for checkmarks/crosses */
.feature-item span:empty {
    font-size: 0;
}

  .comparison-container {
    flex-direction: column; /* Stack all direct children vertically */
    align-items: center; /* Center them horizontally */
    gap: 15px; /* Add gap between the stacked items */
  }

  .comparison-containerr {
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: visible; 
}

 
  .column3 {
    width: 343px; /* Specific width for column3 on small screens */
    order: -1; /* Make column3 appear first */
    border-radius: 24px; /* Ensure full radius for standalone block */
  }
  
  .mdst-header {
    width: 343px; /* Match column3 width */
    height: 180px; /* Adjusted header height */
    font-size: 20px; /* Adjusted header font size */
    border-radius: 24px 24px 0 0; /* Top rounded, bottom sharp for stacking */
  }
  .mdst-header img {
      width: 40px; /* Adjust icon size */
      height: 40px;
  }
  .pcolorrr {
      padding: 20px 15px; /* Adjust padding for content */
  }
  .pcolorrr p {
    font-size: 12px;
    line-height: 1.2;
  }
  
  .pcolorrr p::before {
      min-width: 14px;
      height: 14px;
      font-size: 9px;
      margin-right: 5px;
  }

  /* Column1 and Column2 will now stack below column3 individually */
  .column1,
  .column2 {
    width: 171px; /* They will each take full width of the container now */
  }

  /* Resetting specific border radii for stacked columns to be fully rounded */
  .column1 {
      border-top-left-radius: 24px;
      border-bottom-left-radius: 24px;
  }
  .column2 {
      border-top-right-radius: 24px;
      border-bottom-right-radius: 24px;
  }


  /* Header adjustments for column1 and column2 on small screens */
  .bwp-header,
  .mds-header {
    font-size: 20px; /* Adjusted header font size */
    height: 180px; /* Adjusted header height */
    padding: 20px 10px; /* Adjust padding */
  }
  .bwp-header img,
  .mds-header img {
      width: 40px; /* Adjust icon size */
      height: 40px;
  }

  /* Content adjustments for column1 and column2 on small screens */
  .pcolor,
  .pcolorr {
    font-weight: 400;
    font-style: Regular;
    font-size: 12px;
    padding: 20px 15px; /* Consistent padding */
    letter-spacing: 0%;
  }

  .pcolor p::before,
  .pcolorr p::before {
    min-width: 14px;
    height: 14px;
    font-size: 9px;
    margin-right: 5px;
  }

  .pcolor p,
  .pcolorr p {
    line-height: 1.2;
    white-space: normal;
    word-wrap: break-word;
    text-align: left;
  }
}


@media (max-width: 1024px) {
  .pricing-plans-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .pricing-plan,
  .pricing-plan-most-popular {
    width: 90%;
    height: auto;
  }

  .pricing-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .comparison-container {
    flex-direction: column;
    align-items: center;
  }

  .column1,
  .column2 {
    margin-bottom: 20px;
  }

  .footer-info {
    flex-direction: row; /* Stack items vertically */
    padding: 24px; /* Adjust padding for mobile */
    border-radius: 16px; /* Slightly smaller border-radius */
    gap: 4px; /* Space between stacked items */
    text-align: center; /* Center text within the new column layout */
  }

/* Base style for the decorative images */
.footer-info > img:first-child,
.footer-info > img:last-child {
    width: 80%; /* Limit size on desktop if too large */
    height: auto;
}

.footer-info > div img {
  display: none;
}

.footer-info span {
    font-size: 12px;
  }
  
  
.spanclass {
  gap: 100px; /* this now works perfectly */
  padding-left: 0px;
}

.spanclasse {
  display: flex;
  justify-content: center; /* spread them evenly */
  align-items: center;
  margin: 0 auto;
  gap: 50px;
  padding-left: 0;
}
}

@media ( max-width: 360px) {
  .pricing-plan h3,
  .pricing-plan-most-popular {
    font-size: 10px;
  }

   .price {
    display: flex;
    flex-direction: column; /* stack vertically */
    align-items: center;    /* center horizontally */
  }

  .price span {
    display: block;         /* push to next line */
    font-size: 0.8em;
    margin-top: 4px;
  }

  .btn-primary {
    font-size: 10px;
    padding: 8px 12px;
    width: 100px;
    gap: 2px; /* smaller gap */
  }
}