* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      /* font-family: 'Poppins', sans-serif; */
      font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
    }

    body {
      color: #fff;
         background: radial-gradient(circle at center, #20405d, #000);
      /* background-color: #0b1c2b; */
      overflow-x: hidden;
    }
      :root{
    --bg-1: #071219;
    --bg-2: #0f2630;
    --accent: #f49454;
    --primary: #14648c;
    --muted: #9fb6c2;
    --card: rgba(255,255,255,0.04);
    --glass: rgba(255,255,255,0.03);
    --max-width: 1200px;
    --card-bg: #ffffff;
    --card-text: #111111;
  }


   /* ---------- Header ---------- */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 25px;
      background: transparent;
      z-index: 10000;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    header.scrolled {
      background: #fff;
      box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
    }

    .logo {
      width: 160px;
    }

    /* ---------- Desktop Nav ---------- */
    nav.desktop-nav {
      display: flex;
      gap: 35px;
      align-items: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    header.scrolled nav.desktop-nav {
      opacity: 1;
      visibility: visible;
    }

    nav.desktop-nav a {
      text-decoration: none;
      color: #f49454;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    nav.desktop-nav a.active {
      color: #77b6ca;
    }

    nav.desktop-nav a:hover {
      color: #77b6ca;
    }

    /* ---------- Toggle Icon ---------- */
    #navToggle {
      display: none;
      font-size: 34px;
      color: #20405d;
      cursor: pointer;
      z-index: 10001;
      background: none;
      border: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    header.scrolled #navToggle {
      opacity: 1;
      visibility: visible;
    }

    /* ---------- Overlay Menu ---------- */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      display: none;
      align-items: flex-start;
      justify-content: center;
      z-index: 10000;
    }

    .overlay.active {
      display: flex;
      animation: fadeIn 0.3s ease forwards;
    }

    .overlay nav {
      background: #fff;
      color: #000;
      border-radius: 12px;
      width: 85%;
      max-width: 400px;
      padding: 15px 25px 25px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 20px;
      position: relative;
      animation: slideIn 0.3s ease forwards;
      margin-top: 93px;
    }

    .overlay nav a {
      color: #f49454;
      font-size: 18px;
      text-decoration: none;
    }

    .overlay nav a.active {
      color: #77b6ca;
      font-weight: bold;
    }

    .overlay nav a:hover {
      color: #77b6ca;
    }

    .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 28px;
      color: #333;
      cursor: pointer;
    }

    /* ---------- Animations ---------- */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideIn {
      from { transform: translateY(-20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 992px) {
      nav.desktop-nav {
        display: none;
      }

      #navToggle {
        display: block;
      }
    }


    /* service */

      .service-section {
      max-width: 1200px;
      margin: auto;
      /* padding: 80px 20px; */
    }

    .section-header {
      text-align: center;
      margin-bottom: 50px;
    }

    .section-header h2 {
      font-size: 72px;
      color: #f49454;
      margin-bottom: 10px;
    }

    .section-header p {
      color: #a3a3a3;
      font-size: 1rem;
    }

    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
    }

    /* Left: Service list */
    .services {
      flex: 1;
      min-width: 260px;
    }

    .service-btn {
      display: block;
      width: 100%;
      padding: 15px 20px;
      /* background-color: #11251f; */
      background-color: rgba(0, 0, 0, 0.3);
      border: none;
      color: white;
      font-size: 1.05rem;
      text-align: left;
      margin-bottom: 10px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .service-btn:hover {
      background-color: #f49454;
    }

    .service-btn.active {
      background-color: #f49454;
      color: #fff;
    }

    /* Right: Image and text */
    .service-display {
      flex: 1.3;
      text-align: center;
      min-width: 280px;
    }

    .service-display img {
      width: 100%;
      max-width: 400px;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
      transition: opacity 0.4s ease;
    }

    .service-desc {
      color: #cfcfcf;
      margin-top: 20px;
      font-size: 1rem;
      max-width: 450px;
      margin-inline: auto;
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      .content {
        flex-direction: column;
        text-align: center;
      }

      .services {
        width: 100%;
      }

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

      .service-display img {
        max-width: 320px;
      }
    }
/* end of service */



/* .service{
     padding:110px 205px;
}



    .section-heading {
      text-align: center;
      margin-bottom: 50px;
    }

    .section-heading h2 {
      font-size: 40px;
      color: #b6f3c2;
      margin-bottom: 10px;
    } */

    /* .section-heading p {
      color: #aaa;
      font-size: 16px;
    }

    .services-container {
      display: flex;
      flex-wrap: wrap;
      gap: 50px;
      align-items: center;
      justify-content: center;
    }

    .services-list {
      flex: 1;
      min-width: 280px;
    } */


    /* .service-btn:hover {
      background:#d1966c;
    }

    .service-btn.active {
      background: #d1966c;
      color: #20405d;
    }

    .service-content {
      flex: 1;
      min-width: 300px;
      text-align: center;
    } */

    /* .service-content img {
      width: 100%;
      max-width: 700px;
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
      transition: opacity 0.5s ease;
    } */

    /* .service-desc {
      margin-top: 20px;
      font-size: 16px;
      color: #ccc;
      max-width: 450px;
      margin-left: auto;
      margin-right: auto;
    } */

    /* Responsive */
    /* @media (max-width: 768px) {
      .services-container {
        flex-direction: column;
      }
      .service-content {
        order: -1;
      }
    } */

    .hero {
      height: 100vh;
      /* background: radial-gradient(circle at center, #20405d, #000); */
      /* background: linear-gradient(160deg, #14648c 0%, #0b1c2b 80%); */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 20px;
    }

    .hero h1 {
      font-size: 56px;
      font-weight: 700;
      line-height: 1.2;
      color: #fff;
    }

    .hero h1 span {
      color: #f49454;
    }
     .hero h2 span {
      color: #f49454;
    }
     .hero h3 span {
      color: #f49454;
    }
      .hero h2 {
      font-size: 46px;
      font-weight: 700;
      line-height: 1.2;
      color: #fff;
    }
       .hero h3 {
      font-size: 36px;
      font-weight: 700;
      line-height: 1.2;
      color: #fff;
    }

    

    .hero p {
      margin-top: 15px;
      font-size: 16px;
      max-width: 650px;
      color: #cdd9e3;
    }

    .cta-buttons {
      margin-top: 30px;
      display: flex;
      gap: 20px;
    }

    .cta-buttons a {
      text-decoration: none;
      padding: 12px 28px;
      border-radius: 30px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .cta-buttons .primary {
      background-color: #f49454;
      color: #0b1c2b;
    }
    
    .cta-buttons .access {
     background: #f49454;
    text-align: center;
    padding: 14px 32px;
    color: #0b1c2b;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s 
ease;
    margin-right: 10px;
    border: 2px solid #f49454;
    }

    .cta-buttons .primary:hover {
      background-color: #d97d3d;
    }

    .cta-buttons .secondary {
      border: 2px solid #f49454;
      color: #f49454;
      background-color: #0b1c2b;
    }

    .cta .secondary{
      border: 2px solid #f49454;
      color: #f49454;
      background-color: #0b1c2b;
    }

    .demo-button{
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s 
ease;

    }

    .cta-buttons .secondary:hover {
      background-color: #f49454;
      color: #0b1c2b;
    }

     .cta .secondary:hover {
      background-color: #f49454;
      color: #0b1c2b;
    }

    section {
      padding: 70px 80px;
    }
   

    .about {
      /* background: #f8f8f8; */
      /* color: #0b1c2b; */
      text-align: center;
      
    }

    .about h2 {
      font-size: 72px;
      margin-bottom: 20px;
    }

    .about p {
      font-size: 1.1rem;
      max-width: 800px;
      margin: 0 auto;
    }

    /* .features {
      background: #0b1c2b;
      text-align: center;
    } */

    .features h2 {
      color: #f49454;
      font-size: 46px;
      margin-bottom: 40px;
      text-align: center;
    }

    .features .cards {
      /* display: grid; */
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      max-width: 1100px;
      margin: 0 auto;
      margin-top: 15px;
    }
  .features .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; /* sets space between all cards */
}

.features .card {
  
  border-radius: 16px;
  padding: 25px;
  color: #fff;
  flex: 1 1 45%; /* makes them responsive */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
    .features .card {
      
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    border-radius: 20px;
    padding: 60px 45px;
    transition: 0.4s ease-in-out;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.2);
    border-image: initial;
    }

    .features .card:hover {
      transform: translateY(-8px);
    }

    .features .card h3 {
      color: #f49454;
      margin-bottom: 10px;
      font-size: 1.3rem;
      text-align: center;
    }

    .features .card p {
      color: #cdd9e3;
       text-align: center;
    }


    .steps {
      margin-top: 45px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
    }

    .step {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      padding: 30px;
      max-width: 370px;
    }

    .step h3 {
      color: #f49454;
      margin-bottom: 10px;
    }

    .cta {
      background: linear-gradient(120deg, #14648c, #0b1c2b);
      text-align: center;
      color: #fff;
    }

    .cta h2 {
      font-size: 2rem;
      margin-bottom: 30px;
      color: #d97d3d;
    }

    .cta a {
      background: #f49454;
      text-align: center;
      padding: 14px 32px;
      color: #0b1c2b;
      border-radius: 30px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.3s ease;
      margin-right: 10px;
    }

    .cta a:hover {
      background: #d97d3d;
    }

    footer {
      background: #07121f;
      text-align: center;
      padding: 40px 20px;
      color: #cdd9e3;
      font-size: 0.9rem;
    }

    .chat-icon {
      position: fixed;
      bottom: 25px;
      right: 25px;
      background: #14648c;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
      z-index: 20;
    }

    .chat-icon:hover {
      transform: scale(1.1);
    }

    .chat-icon svg {
      fill: #fff;
      width: 30px;
      height: 30px;
    }

    @media (max-width: 768px) {
      header {
        padding: 15px 30px;
      }
      .hero h1 {
        font-size: 36px;
      }
       .hero h2 {
        font-size: 34px;
      }
       .hero h3 {
        font-size: 32px;
      }
      section {
        padding: 30px 30px;
      }
      .plan-title{
        font-size: 30px!important;
      }
    }

      @media (max-width: 480px) {
      header {
        padding: 15px 30px;
      }
      .hero h1 {
        font-size: 26px;
      }
       .hero h2 {
        font-size: 24px;
      }
       .hero h3 {
        font-size: 22px;
      }
      section {
        padding: 30px 30px;
      }
       .plan-title{
        font-size: 26px!important;
      }
    }

.floating {
    width: 250px;
    margin-bottom: 10px;
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px); /* move up */
    }
  }
  .icon-color{
  font-size: 2rem;
    color:#d97d3d;
  }

 
    .service h2{
      font-size: 72px;
      color:#d97d3d
    }

/* hide evenlabs title */
#voiceOverlay {
  position: fixed; /* <== This keeps it in place */
  background-color: #03111e;
  z-index: 10000;
  pointer-events: none;
  width: 150%;
  height: 25px;
  bottom: 0px;
  left: 70%;
  transform: translateX(-50%);
  border-radius: 20px;

  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: black;
}

/* modal css */
.modal-content {
      border-radius: 20px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
      overflow: hidden;
    }

    .modal-header {
      background-color:#f99d5c;
      color: #fff;
    }

    .modal-body {
      /* background-color: #f9f9f9; */
      /* background: radial-gradient(circle at center,#000, #20405d); */
      padding: 2rem;
    }

    .btn-close {
      filter: invert(1);
    }


    /* contact */

    .bottom_section{
background: radial-gradient(circle at center, #20405d, #000);
    }



  .contact_us h2{
  
     font-size: 46px;   
      color: #d97d3d;
  }

  /* Grid container - two equal height columns */
  .contact {
    
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:28px;
    align-items:stretch; /* make both columns match height */
  }

  /* Left info card */
  .contact-info{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:14px;
    padding:34px;
    box-shadow:0 12px 40px rgba(0,0,0,0.45);
    position:relative;
    overflow:hidden;
  }
  .badge{ width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg,var(--primary), #1f7aa0); display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
  .title{display:flex;gap:14px;align-items:center;margin-bottom:18px}
  .contact-info h3{margin:0;color:var(--accent);font-size:22px}
  .contact-info p.lead{margin:12px 0 22px;color:var(--muted)}

  .info-list{display:flex;flex-direction:column;gap:16px}
  .info-item{display:flex;gap:14px;align-items:flex-start}
  .info-item .icon{width:44px;height:44px;border-radius:10px;background:var(--glass);display:flex;align-items:center;justify-content:center;color:var(--primary)}
  .info-item .meta{color:#d7eef4;font-size:15px}
  .info-item .meta small{display:block;color:var(--muted);font-size:13px;margin-top:4px}

  /* Right form card */
  .contact-form{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border-radius:14px;
    padding:28px;
    box-shadow:0 12px 40px rgba(0,0,0,0.45);
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* form layout: controlled grid so things don't wrap unexpectedly */
  form { display:grid; grid-template-columns: 1fr; gap:12px; width:100%; }
  .row-2 { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
  label{ display:block; margin-bottom:6px; color:var(--muted); font-size:13px; }
  .input, textarea, select {
    width:100%;
    background:#0d2a36;
    border:1px solid rgba(255,255,255,0.03);
    color:#e6f7fb;
    padding:12px 14px;
    border-radius:8px;
    font-size:15px;
    outline:none;
    transition: box-shadow .18s, border-color .18s;
  }
  textarea{ min-height:110px; resize:vertical; }

  input:focus, textarea:focus, select:focus{
    border-color: rgba(244,148,84,0.95);
    box-shadow:0 6px 18px rgba(244,148,84,0.06);
  }

  /* Custom select wrapper */
  .select-wrap{ position:relative; }
  .select-wrap select{
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    padding-right:44px; cursor:pointer;
  }
  .select-arrow{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; pointer-events:none;
    background: rgba(20,100,140,0.12); color:var(--accent);
    font-weight:700;
  }

  /* Submit row */
  .btn-row{ display:flex; align-items:center; gap:12px; margin-top:6px; flex-wrap:wrap; }
  button[type="submit"]{
    background:  #f49454;
    color:#08181b; padding:12px 20px; border-radius:999px; border:0; font-weight:700; cursor:pointer;
    box-shadow:0 12px 30px rgba(244,148,84,0.14);
  }
  button[type="submit"]:hover{background:  #d97d3d; transform:translateY(-2px); }

  .note{ color:var(--muted); font-size:13px; }

  /* small screens: stack columns */
  @media (max-width:980px){
    .contact { grid-template-columns: 1fr; gap:18px; }
    .row-2 { grid-template-columns: 1fr; }
  }

  /* accessibility focus style */
  :focus { outline: 3px solid rgba(20,100,140,0.12); outline-offset:2px; }


/* no code section */


.nocode-section {
  /* background: radial-gradient(circle at top right, #0b142d, #05071e); */
  color: #fff;
  /* padding: 100px 5%; */
  position: relative;
  overflow: hidden;
}

/* Glow effect */
.nocode-section::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(20,100,140,0.35), transparent);
  top: 0;
  right: 10%;
  filter: blur(100px);
  animation: floatGlow 8s ease-in-out infinite alternate;
}
@keyframes floatGlow {
  from { transform: translateY(0); opacity: 0.7; }
  to { transform: translateY(25px); opacity: 0.4; }
}

/* Layout */
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* Text area */
.nocode-text {
  flex: 1 1 500px;
}

.section-tag {
  color: var(--accent, #f49454);
  /* font-weight: 600; */
  letter-spacing: 1px;
  margin-bottom: 10px;
  font-size: 46px;
 
}

/* .nocode-section h2 {
  font-size: 16 px;
  margin-bottom: 1rem;
 color: var(--accent, #f49454);
  text-align: center;
} */

.nocode-section p {
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.features_no_code {
  list-style: none;
  margin: 1rem 0 1.5rem 0;
  padding: 0;
}

.features_no_code li {
  background: rgba(20,100,140,0.15);
  border-left: 4px solid #f49454;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  color: #e8e7f7;
}

.note span {
  color: #f49454;
  font-weight: 600;
}

.nocode-visual {
  flex: 1 1 400px;
  text-align: center;
}

.nocode-visual img {
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 0 25px rgba(20,100,140,0.3);
}

/* Responsive */
@media (max-width: 900px) {
  .container {
    flex-direction: column;
    text-align: center;
  }
  .nocode-text h2 {
    font-size: 1.8rem;
  }
  .features li {
    text-align: left;
  }
}


/* why aiarid */

 :root{
  --accent: #f49454;
  --blue-1: #0b142d;
  --blue-2: #05071e;
  --glass: rgba(255,255,255,0.06);
  --glass-strong: rgba(255,255,255,0.10);
}

/* base layout */
.why-aiarid {
  position: relative;
  background: radial-gradient(circle at center, var(--blue-1), var(--blue-2));
  color: #fff;
  padding: clamp(48px, 6vw, 120px) 20px 80px;
  text-align: center;
  overflow: visible;
}

.why-aiarid .container{
  max-width: 1200px;
  margin: 0 auto;
}

/* title */
.why-aiarid h2 {
  font-size: 46px;
  margin: 0;
}
.why-aiarid h2 span { color: var(--accent); }

.subhead {
  color: #cde5f2;
  font-size: clamp(0.95rem, 1.2vw, 1.2rem);
  margin: 12px 0 40px;
}

/* Orbit area: controls the height where items float */
.orbit-area{
  position: relative;
  width: 100%;
  /* height adapts but gives room for orbiting features on large screens */
  min-height: clamp(420px, 50vh, 620px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* centered illustration */
.center-illustration{
  position: relative;
  z-index: 5;
  width: clamp(200px, 20vw, 320px);
  height: clamp(200px, 20vw, 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,100,140,0.30), rgba(20,100,140,0.08));
  animation: pulse 6s ease-in-out infinite alternate;
}

.center-illustration img{
  width: 56%;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(244,148,84,0.40));
}

@keyframes pulse {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(1.03); opacity: 0.92; }
}

/* features wrapper - absolute positioned on large screens, static on small */
.features-wrapper{
  position: absolute;
  inset: 0; /* allow absolute children to reference this area */
  z-index: 3;
  pointer-events: none; /* visual elements don't block clicks on other controls; features themselves will allow pointer-events */
}

/* floating cards style */
.feature{
  position: absolute;
  width: clamp(200px, 20vw, 260px);
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.09);
  padding: 14px 16px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  transition: transform .28s ease, background .28s ease;
  box-shadow: 0 6px 18px rgba(2,6,12,0.45);
  pointer-events: auto; /* enable hover/click on cards */
}

/* hover */
.feature:hover{
  transform: translateY(-8px);
  background: var(--glass-strong);
}

/* text inside cards */
.feature h4{
  color: var(--accent);
  margin: 0 0 6px;
  font-size: 0.98rem;
  line-height: 1.1;
  font-weight: 600;
}
.feature p{
  margin: 0;
  color: #e6f1fb;
  font-size: 0.88rem;
  line-height: 1.4;
}

/* RESPONSIVE POSITIONS - desktop/tablet */
@media (min-width: 1000px) {
  /* positioned around the center circle symmetrically */
  .f1 { top: 16%; left: 8%; transform: translateY(-10%); }   /* top-left */
  .f2 { top: 16%; right: 8%; transform: translateY(-10%); }  /* top-right */
  .f3 { left: 8%; top: 60%; transform: translateY(-50%); }   /* middle-left */
  .f4 { right: 8%; top: 60%; transform: translateY(-50%); }  /* middle-right */
  .f5 { bottom: -16%; left: 50%; transform: translate(-50%, 0); } /* bottom center */
}

/* MEDIUM SCREENS - slightly closer */
@media (min-width: 700px) and (max-width: 999px) {
  .f1 { top: 12%; left: 6%; }
  .f2 { top: 12%; right: 6%; }
  .f3 { left: 6%; top: 55%; transform: translateY(-45%); }
  .f4 { right: 6%; top: 55%; transform: translateY(-45%); }
  .f5 { bottom: -14%; left: 50%; transform: translate(-50%, 0); }
}

/* SMALL SCREENS: stack the features below the orbit area (no absolute positioning) */
@media (max-width: 699px) {
  .orbit-area { min-height: auto; padding-bottom: 0; }

  .features-wrapper{
    position: static;
    display: block;
    margin-top: 20px;
  }

  .feature {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 12px auto;
    left: auto;
    right: auto;
    transform: none !important;
  }

  /* increase center illustration scale on small screens */
  .center-illustration { width: clamp(290px, 10vw, 240px); height: clamp(173px, 10vw, 240px);}
}

/* bottom text - always below the orbit area and features */
.bottom-text{
  max-width: 880px;
  margin: clamp(36px, 6vw, 96px) auto 0;
  color: rgba(255,255,255,0.88);
  line-height: 1.6;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  z-index: 1;
}

/* small tweak so nothing overlaps when using long content */
.why-aiarid .container,
.orbit-area,
.features-wrapper,
.feature,
.center-illustration {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* end of why aiarid */

/* intelligent section */
.wrap {
      max-width:1200px;
      margin:0 auto;
      
    }

    /* TOP: heading + body + 4 highlights in one row */

    .head_color{
      color:#d97d3d !important;
    }
    .top {
      text-align:left;
      padding-bottom:44px;
    }

    .top .heading {
      font-size:46px;
      margin:0 0 10px 10px;
      color:#d97d3d;
      align-items: center;
    }

    .top .heading .accent { color: var(--accent-orange); }

    .top .lead {
      /* color: var(--muted); */
      font-size:16px;
      /* max-width:600px; */
      margin:6px 0 36px 0;
    }

    .highlights {
      display:flex;
      gap:28px;
      justify-content:space-between;
      align-items:flex-start;
      margin-top:18px;
      flex-wrap:nowrap; /* keep all four in a single row on wide screens */
    }

    .hl {
      flex:1 1 0;
      min-width: 0;
      display:flex;
      gap:18px;
      align-items:flex-start;
    }

    .hl .icon {
      width:58px;
      height:58px;
      border-radius:10px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: transparent;
      color:var(--accent-orange);
      font-size:28px;
      flex:0 0 58px;
    }

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

    .hl .text p {
      margin:0;
      /* color:var(--muted); */
      font-size:15px;
    }

    /* BOTTOM: left-right partition (subsection + illustration) */
    .bottom {
      display:flex;
      gap:40px;
      align-items:center;
      margin-top:60px;
      flex-wrap:wrap;
    }

    .bottom .left {
      flex:1 1 520px;
      min-width:300px;
    }

    .bottom .left h3 {
      margin:0;
      color:var(--accent-orange);
      font-size:22px;
      font-weight:500;
      line-height:1.05;
    }

    .bottom .left p {
      margin:12px 0 18px 0;
      /* color:var(--muted); */
      font-size:15px;
      max-width:620px;
    }

    .btn {
      display:inline-flex;
      gap:12px;
      align-items:center;
      background:var(--card);
      color:#fff;
      padding:12px 20px;
      border-radius:12px;
      text-decoration:none;
      box-shadow: 0 6px 18px rgba(2,8,12,0.45);
      font-weight:600;
    }

    .btn .dot {
      width:36px;
      height:36px;
      display:inline-grid;
      place-items:center;
      border-radius:50%;
      background:#d97d3d;
      color:#081016;
      font-size:18px;
      padding-left: 3px;
    }

    .bottom .right {
      flex:0 1 420px;
      min-width:260px;
      display:flex;
      justify-content:center;
      align-items:center;
    }

    .illustration {
      width:100%;
      max-width:420px;
      transform: translateY(6px);
      animation: float 4s ease-in-out infinite;
    }

    .illustration img { width:100%; height:auto; display:block; }

    @keyframes float {
      0%,100%{ transform: translateY(6px) }
      50% { transform: translateY(-10px) }
    }

    /* Responsive rules */
    @media (max-width:1100px){
      .wrap{ padding:56px 20px; }
      .highlights{ gap:18px; }
    }

    @media (max-width:900px){
      .top { text-align:center; }
      .top .heading { font-size:32px; }
      .top .lead { margin-left:auto; margin-right:auto; }
      /* Highlights -> 2 rows of 2 columns */
      .highlights{
        flex-wrap:wrap;
        justify-content:center;
      }
      .hl{ width:45%; justify-content:center; text-align:center; }
      .hl .text p { text-align:left; }
      .hl .icon { margin:0 auto 6px auto; }
      .bottom { text-align:center; }
      .bottom .left { flex: none;  }
      /* .bottom .right {  margin-bottom:18px; } */
      .btn { justify-content:center; }
      .industries {padding:3px 30px 80px 30px!important}
    }

    @media (max-width:480px){
      .hl{ width:100%; }
      .hl .text p { font-size:14px; }
      .top .heading { font-size:22px; }
    }

    /* small visual tweaks for icon/text to match reference look */
    .hl .text p { font-weight:400; }
    .hl .text p small { color:var(--muted); display:block; margin-top:6px; font-size:13px; }
/* Responsive rules */
@media (max-width:1100px){
  .wrap{ padding:56px 20px; }
  .highlights{ gap:18px; }
}

/* Medium and smaller screens */
@media (max-width:900px){
  .top { text-align:center; }
  .top .heading { font-size:32px; }
  .section-tag { font-size:32px; }
  .industries h2 {font-size:32px!important; }
  .section-header h2 {font-size:32px; }
  .why-aiarid h2 {font-size:32px; }
  .pricing-section h2 {font-size:32px; }
  .contact_us h2 {font-size:32px; }
  .testimonial-section h3  {font-size:32px!important; }
  .top .lead { margin-left:auto; margin-right:auto; }

  /* ✅ Each highlight now takes full width (1 per row) */
  .highlights{
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    text-align: left;
  }

  .hl{
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .hl .icon {
    margin: 0;
  }

  .bottom {
    flex-direction: column;
    text-align: center;
  }

  /* .bottom .left { order:2; }
  .bottom .right { order:1; margin-bottom:18px; } */
  .btn { justify-content:center; }
}

@media (max-width:480px){
  .hl .text p { font-size:14px; }
  .top .heading { font-size:32px; }
}
@media (max-width: 768px) {
  .hl {
    display: flex;
    align-items: center;       /* centers icon + text vertically */
    gap: 16px;
    justify-content: flex-start;
  }

  .hl .icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: var(--accent-orange);
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0;
  }

  .hl .text {
    flex: 1;
  }

  .hl .text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    text-align: left;
  }
}
.no-code-section {
  background-color: #000;
  color: #fff;
  text-align: center;
  font-family: "Poppins", sans-serif;
  /* padding: 80px 20px; */
  overflow: hidden;
}

/* Top heading + subheading */
.section-header h2 {
  font-size: 46px;
  margin-bottom: 10px;
}

.section-header h2 span {
  color: #ffd000;
}

.section-header p {
  color: #ddd;
  font-size: 1.2rem;
  margin-bottom: 40px;
}

/* Slider container */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 420px;
  margin: 0 auto 40px auto;
  border-radius: 12px;
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide.active {
  opacity: 1;
}

/* Text overlay inside slider */
.slide-overlay-text {
  position: absolute;
  bottom: 40px;
  left: 40px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 15px 25px;
  border-radius: 8px;
}

.slide-overlay-text h3 {
  font-size: 1.8rem;
  font-weight: 700;
}

/* Slider controls */
.slider-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 3;
}

.slider-controls button {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 50%;
  transition: background 0.3s;
}

.slider-controls button:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Footer text below slider */
.section-footer p {
  color: #ccc;
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
  .section-header h2 {
    font-size: 32px;
  }

  .slide-overlay-text h3 {
    font-size: 1.2rem;
  }

  .slider-container {
    height: 280px;
  }
}


/* testimonial */


    .testimonial-section {
    max-width: 1100px;
    margin: 80px auto;
    /* padding: 60px 40px; */
    background: linear-gradient(135deg, rgba(20,100,140,0.15), rgba(244,148,84,0.1));
    border-radius: 20px;
    text-align: center;
    color: #fff;
    font-family: 'Poppins', sans-serif;
  }

  .testimonial-section h2 {
    
    font-size: 1rem;
    margin-bottom: 40px;
  
    font-weight: 600;
  }

  .testimonial-section h3 {
    color: var(--accent);
    font-size: 2rem;
    font-weight: 700;
      margin-bottom: 10px;
    
  }

  .testimonial-carousel {
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 50px;
  }

  .testimonial-track {
    display: flex;
    transition: transform 0.6s ease;
  }

  .testimonial-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
  }

  .testimonial-card {
    background: #fff;
    color: #000;
    border-radius: 18px;
    padding: 40px;
    max-width: 700px;
    position: relative;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  }

  .testimonial-card::before {
    content: "“";
    font-size: 60px;
    color: var(--accent);
    position: absolute;
    top: 5px;
    left: 20px;
  }

  .testimonial-text {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .testimonial-author {
    color: var(--primary);
    font-weight: 600;
  }

  .testimonial-btn {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .testimonial-btn:hover {
    background: var(--accent);
    color: #fff;
  }

  .testimonial-prev { left: 0; }
  .testimonial-next { right: 0; }

  .testimonial-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
  }

  .testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
  }

  .testimonial-dot.active {
    background: var(--accent);
  }

  @media (max-width: 768px) {
    .testimonial-section {
      margin: 60px 20px;
      padding: 40px 20px;
    }
    .testimonial-carousel { padding: 0 20px; }
    .testimonial-card { padding: 30px 20px; }
    .testimonial-btn { display: none; }
  }


/* end of testimonial */

/* pricing */



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

  .pricing-section h2 {
    font-size: 46px;
    color: #f49454;
    margin-bottom: 10px;
  }

  .pricing-section p {
    color: #dcdcdc;
    font-size: 1.1rem;
    margin-bottom: 70px;
  }

  .pricing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 40px;
    justify-items: center;
    align-items: stretch;
  }

  .pricing-card {
    background: rgba(10, 20, 30, 0.85);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    padding: 60px 40px;
    max-width: 520px;
    box-shadow: 0 0 25px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(20,100,140,0.4);
  }

  .plan-title {
    font-size: 2rem;
    color: #f49454;
    margin-bottom: 12px;
    font-weight: 600;
  }

  .plan-sub {
    color: #9bb5c7;
    font-size: 1.1rem;
    margin-bottom: 25px;
  }

  .price {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 25px;
    font-weight: 700;
  }

  /* .features {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #dcdcdc;
    font-size: 1rem;
    line-height: 1.8;
  } */

  /* Equal height alignment fix */
  .pricing-card > * {
    flex-grow: 1;
  }

  @media (max-width: 768px) {
    .pricing-section {
      padding: 70px 6%;
    }

    .pricing-section h2 {
      font-size: 32px;
    }

    .pricing-card {
      padding: 50px 30px;
    }
  }


/* end of pricing */

/* audio voice */


    .audio-container {
      position: relative;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(100,0,255,0.15), rgba(0,0,0,0.8));
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 40px rgba(130, 0, 255, 0.4);
    }

    .audio-container::before {
      content: '';
      position: absolute;
      width: 240px;
      height: 240px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.05);
      animation: pulse 3s infinite;
    }

    @keyframes pulse {
      0% { transform: scale(0.95); opacity: 0.7; }
      70% { transform: scale(1.05); opacity: 0.2; }
      100% { transform: scale(0.95); opacity: 0.7; }
    }

    .play-btn {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #f49454;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 25px #f49454;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.3s;
      z-index: 5;
    }

    .play-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 0 35px #f49454;
    }

    .play-btn svg {
      width: 32px;
      height: 32px;
      fill: white;
    }

    .languages {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .lang {
      position: absolute;
      font-size: 14px;
      color: #aaa;
      cursor: pointer;
      pointer-events: all;
      transition: color 0.3s;
    }

    .lang:hover, .lang.active {
      color: #f49454;
      font-weight: 600;
    }

 .lang:nth-child(1) { transform: translateY(-145px); } /* English */
.lang:nth-child(2) { transform: translateX(145px); }  /* Hindi */
.lang:nth-child(3) { transform: translateY(145px); }  /* Spanish */
.lang:nth-child(4) { transform: translateX(-145px); } /* Vietnamese */

/* end of audio voice */

.illustration-border{
  border-radius: 20px ;
}

/* features */

  .industries {
  padding: 80px 6%;
  text-align: center;
  color: #fff;
}

.industries h2 {
  font-size: 46px;
  margin-bottom: 10px;
  color: #ff914d;
  text-align: center;
}

.industries .tagline {
  max-width: 800px;
  margin: 0 auto 50px;
  font-size: 1.1rem;
  color: #cfd8e5;
  line-height: 1.6;
}

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

.industry-card {
  background: #122236;
  border-radius: 16px;
  padding: 30px 25px;
  transition: 0.25s ease;
  border: 1px solid transparent;
}

.industry-card:hover {
  transform: translateY(-6px);
  border-color: #ff914d50;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}

.icon img {
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
}

.industry-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #ff914d;
}

.industry-card p {
  font-size: 1rem;
  color: #cfd8e5;
  line-height: 1.5;
}


/* svg */

  .column_card{
    border:2px solid #615f5f;
    background-color: black;
    border-radius: 10px;
  }
      svg {
      width: 90%;
      max-width: 900px;
    }

    /* Glowing flowing lines */
    .glow-line {
      stroke: #00e0ff;
      stroke-width: 3;
      fill: none;
      stroke-linecap: round;
      stroke-dasharray: 10 30;
      filter: drop-shadow(0 0 8px #00e0ff);
      animation: flow 10s linear infinite;
    }

    @keyframes flow {
      to {
        stroke-dashoffset: -400;
      }
    }

    /* Workflow blocks */
    .block {
      fill: url(#blockGradient);
      stroke: #1c3d5c;
      stroke-width: 2;
      rx: 12;
      ry: 12;
      filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
    }

    /* Text labels */
    .label {
      fill: #ffffff;
      font-size: 16px;
      text-anchor: middle;
      font-weight: 500;
    }

    /* Icons */
    .icon {
      fill: #f49454;
    }

    /* Characters */
    .robot, .person {
      stroke: none;
    }

    /* Fade-in */
    svg * {
      animation: fadeIn 1s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    /*new pricing section*/
     .pricing-section  span {
  line-height:1.5em
}

  .pricing-section ul {
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}
  .pricing-section ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing-section ul li:last-child {
  padding-bottom: 0;
}

.pricing-section ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 9px;
}

.pricing-section ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing-section ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing-section ul .na span {
  text-decoration: line-through;
}

.pricing-section .featured {
  position: relative;
}

  .pricing-item{
   text-align:justify

  }
    /**/