/* =========================================================
   InfoRashtra — Modern Light UI
   Inspired by premium visual website builders.
   No external CSS framework required.
   ========================================================= */

:root {

  --ink: #171923;
  --muted: #6e7282;

  --white: #ffffff;
  --background: #f3f2ff;
  --soft: #f8f8fc;

  --orange: #ff7043;
  --orange-light: #fff0e9;

  --blue: #4c7dff;
  --blue-light: #edf2ff;

  --green: #23a56d;
  --green-light: #eaf8f1;

  --purple: #825ce6;
  --purple-light: #f1ecff;

  --pink: #e55a91;

  --border: rgba(35, 38, 54, 0.10);

  --shadow-small:
    0 8px 30px rgba(35, 38, 54, 0.08);

  --shadow-large:
    0 30px 80px rgba(55, 55, 100, 0.16);

  --container: 1180px;

}


/* =========================================================
   RESET
   ========================================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--ink);
  background: var(--white);

  line-height: 1.6;

  -webkit-font-smoothing: antialiased;

}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(
    calc(100% - 40px),
    var(--container)
  );

  margin-inline: auto;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.navbar {

  position: sticky;
  top: 0;

  z-index: 1000;

  background:
    rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(18px);

  border-bottom:
    1px solid rgba(35, 38, 54, 0.08);

}

.nav-container {

  width: min(
    calc(100% - 40px),
    var(--container)
  );

  min-height: 76px;

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

}


/* Logo */

.logo {

  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 1.45rem;

  font-weight: 850;

  letter-spacing: -0.05em;

}

.logo-orange {
  color: maroon;
  
}

.brand-logo {
  width: 154px;
  height: 58px;
  object-fit: contain;
  object-position: left center;
}

.logo-wordmark {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}

@media (max-width: 550px) {
  .logo-wordmark {
    font-size: 1.05rem;
  }
}


.logo-symbol {

  width: 50px;
  height: 50px;

  display: flex;
  align-items: flex-end;
  justify-content: center;

  gap: 3px;

  padding: 6px;

  border-radius: 10px;

  background:
    linear-gradient(
      145deg,
      #fff0e8,
      #ffffff
    );

  border: 1px solid #ffd9c9;

}

.logo-symbol span {

  width: 4px;

  border-radius: 10px;

  background: var(--orange);

}

.logo-symbol span:nth-child(1) {
  height: 9px;
}

.logo-symbol span:nth-child(2) {
  height: 16px;
  background: var(--blue);
}

.logo-symbol span:nth-child(3) {
  height: 11px;
  background: var(--green);
}


/* Desktop navigation */

.desktop-navigation {

  display: flex;
  align-items: center;

  gap: 30px;

  font-size: 0.9rem;

  font-weight: 650;

}

.desktop-navigation > a {

  color: #696d7b;

  transition:
    color 180ms ease;

}

.desktop-navigation > a:hover,
.desktop-navigation > a.active {

  color: var(--ink);

}

.nav-button {

  color: white !important;

  background: var(--ink);

  padding:
    11px 19px;

  border-radius: 999px;

  transition:
    transform 180ms ease,
    background 180ms ease;

}

.nav-button:hover {

  background: #2a3040;

  transform: translateY(-2px);

}


/* Mobile button */

.mobile-menu-button {

  display: none;

  width: 44px;
  height: 44px;

  border:
    1px solid var(--border);

  border-radius: 12px;

  background: white;

  padding: 10px;

}

.mobile-menu-button span {

  display: block;

  height: 2px;

  margin: 5px 0;

  background: var(--ink);

  border-radius: 99px;

}

.mobile-navigation {
  display: none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {

  position: relative;

  overflow: hidden;

  min-height: 900px;

  padding:
    76px 0 45px;

  background:

    radial-gradient(
      circle at 8% 18%,
      rgba(255, 153, 92, 0.18),
      transparent 27%
    ),

    radial-gradient(
      circle at 90% 72%,
      rgba(54, 174, 116, 0.14),
      transparent 28%
    ),

    radial-gradient(
      circle at 50% 48%,
      rgba(255, 255, 255, 0.95),
      transparent 45%
    ),

    linear-gradient(
      135deg,
      #fffaf6 0%,
      #f5f3ff 42%,
      #eef8f3 100%
    );

}


/* Background blobs */

.hero-blob {

  position: absolute;

  border-radius: 50%;

  filter: blur(3px);

  pointer-events: none;

}

.blob-one {

  width: 320px;
  height: 320px;

  background:
    rgba(255, 126, 84, 0.12);

  top: 220px;
  left: -160px;

}

.blob-two {

  width: 260px;
  height: 260px;

  background:
    rgba(80, 115, 255, 0.13);

  right: -100px;
  top: 100px;

}

.blob-three {

  width: 180px;
  height: 180px;

  background:
    rgba(40, 177, 117, 0.09);

  bottom: 100px;
  left: 45%;

}


/* Hero content */

.hero-content {

  position: relative;

  z-index: 2;

  width: min(
    calc(100% - 40px),
    1320px
  );

  margin: auto;

}


/* Introduction */

.hero-introduction {

  text-align: center;

  max-width: 720px;

  margin:
    0 auto 54px;

}

.eyebrow,
.section-label {

  color: rgb(3, 166, 166);

  font-size: 1.5rem;

  font-weight: 1000;

  letter-spacing: 0.15em;

  text-transform: uppercase;

}

.hero h1 {

  margin-top: 12px;

  font-size:60px;

  line-height: 0.98;

  letter-spacing: -0.065em;

}


.hero h1 span {

  display: block;

  color: var(--blue);

}

.hero-description {

  max-width: 600px;

  margin:
    25px auto 0;

  color: #6d7180;

  font-size: 1.06rem;

}


/* =========================================================
   SHOWCASE
   ========================================================= */

/* Base wrapper — still used by #imageShowcase below, which relies on
   this rule for its flex centering (it doesn't redeclare display/align). */
.showcase-area {

  position: relative;

  width: 100%;

  height: 485px;

  display: flex;

  align-items: center;

  justify-content: center;

}


/* =========================================================
   CATEGORY SWITCHER
   ========================================================= */

.category-switcher {

  position: relative;

  z-index: 20;

  width: min(
    980px,
    100%
  );

  margin:
    12px auto 0;

  padding: 7px;

  display: flex;

  justify-content: space-between;

  gap: 3px;

  border-radius: 999px;

  background:
    rgba(255,255,255,0.82);

  box-shadow:
    0 10px 35px rgba(55,55,90,0.08);

  border:
    1px solid rgba(255,255,255,0.85);

    transform: translateX(-14px);

}

.category-button {

  flex: 1;

  min-width: 120px;
  min-height: 54px;

  border: 0;

  border-radius: 999px;

  background: transparent;

  color: var(--ink);

  font-weight: 750;

  font-size: 0.92rem;

  transition:
    background 250ms ease,
    color 250ms ease,
    box-shadow 250ms ease;

}

.category-button:hover {

  background:
    rgba(240,240,248,0.9);

}

.category-button.active {

  color: white;

  background: #202020;

  box-shadow:
    0 0 0 3px #61a0ff;

}


/* Showcase controls */

.showcase-controls {

  width: 150px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  margin:
    16px auto 0;
   
    transform: translateX(-50%);
    transform: translateY(-10%);

}

.showcase-controls button {

  width: 32px;
  height: 32px;

  border:
    1px solid rgba(30,30,50,0.1);

  border-radius: 50%;

  background: rgba(255,255,255,0.75);

}

.showcase-controls button:hover {

  background: white;

}

.showcase-counter {

  color: #858998;

  font-size: 0.66rem;

  font-weight: 750;

}


/* =========================================================
   TRUST STRIP
   ========================================================= */

.trust-strip {

  background: white;

  border-bottom:
    1px solid var(--border);

}

.trust-container {

  min-height: 88px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  color: #9a9eaa;

  font-size: 0.68rem;

}

.trust-container strong {

  color: #7a7e8a;

  font-size: 0.68rem;

  letter-spacing: 0.05em;

}


/* =========================================================
   ABOUT
   ========================================================= */

.about-section {

  padding:
    125px 0;

  background: white;

}

.about-grid {

  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap: 100px;

}

.about-heading h2 {

  margin-top: 12px;

  max-width: 500px;

  font-size:
    clamp(2.4rem, 4vw, 4rem);

  line-height: 1.02;

  letter-spacing: -0.06em;

}

.about-heading h2 span {

  color: var(--blue);

}

.about-content {

  max-width: 580px;

}

.about-content p {

  color: var(--muted);

  font-size: 1rem;

}

.about-content .large-text {

  margin-bottom: 20px;

  color: var(--ink);

  font-size: 1.25rem;

  line-height: 1.45;

}

.text-button {

  display: inline-flex;

  gap: 10px;

  margin-top: 25px;

  color: var(--blue);

  font-weight: 800;

}


/* =========================================================
   INDUSTRIES
   ========================================================= */

.industries-section {

  padding:
    120px 0;

  background:
    var(--ink);

  color: white;

}
.industries-section {
    margin-top: 50px;
}

.industry-header {

  max-width: 750px;

}

.industry-header .section-label {

  color: #ff946d;

}

.industry-header h2 {

  margin-top: 13px;

  font-size:
    clamp(2.5rem, 5vw, 4.7rem);

  line-height: 1;

  letter-spacing: -0.065em;

}

.industry-header h2 span {

  color: #8da8ff;

}

.industry-list {

  margin-top: 70px;

  border-top:
    1px solid rgba(255,255,255,0.12);

}

.industry-item {

  display: grid;

  grid-template-columns:
    70px 1fr 1fr 40px;

  align-items: center;

  gap: 20px;

  padding:
    24px 5px;

  border-bottom:
    1px solid rgba(255,255,255,0.12);

}

.industry-item > span {

  color: #777f94;

  font-size: 0.72rem;

}

.industry-item strong {

  font-size: 1rem;

}

.industry-item p {

  color: #9299aa;

  font-size: 0.8rem;

}

.industry-item a {

  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(255,255,255,0.08);

  transition:
    background 180ms ease,
    transform 180ms ease;

}

.industry-item:hover a {

  background: var(--orange);

  transform:
    translateX(4px);

}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-section {

  padding:
    120px 0;

  background:
    linear-gradient(
      135deg,
      #fff,
      #f2f5ff
    );

}

.contact-wrapper {

  display: grid;

  grid-template-columns:
    1fr 0.9fr;

  gap: 100px;

  align-items: center;

}

.contact-intro h2 {

  margin-top: 13px;

  max-width: 650px;

  font-size:
    clamp(2.7rem, 5vw, 4.8rem);

  line-height: 0.99;

  letter-spacing: -0.065em;

}

.contact-intro h2 span {

  color: var(--orange);
  font-size: 85px;

}

.contact-intro > p:not(.section-label) {

  max-width: 530px;

  margin-top: 24px;

  color: var(--muted);

  font-size: 1rem;

}


/* Email */

.email-link {

  width: min(100%, 480px);

  display: flex;

  align-items: center;

  gap: 13px;

  margin-top: 32px;

  padding: 14px;

  border:
    1px solid var(--border);

  border-radius: 17px;

  background: white;

  box-shadow:
    var(--shadow-small);

}

.email-icon {

  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  /* color: var(--orange);

  background:
    var(--orange-light); */

  font-weight: 900;

}
.phone-icon {

  width: 40px;
  height: 45px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  /* color: var(--orange);

  background:
    var(--orange-light); */

  font-weight: 900;

}

.email-link small,
.email-link strong {

  display: block;

}

.email-link small {

  color: #898e9d;

  font-size: 0.65rem;

}

.email-link strong {

  font-size: 0.88rem;

}

.email-link > span:last-child {

  margin-left: auto;

  color: var(--blue);

}






/* Contact form */

.contact-card {

  padding: 32px;

  border-radius: 27px;

  border:
    1px solid rgba(30,30,50,0.08);

  background:
    rgba(255,255,255,0.88);

  box-shadow:
    var(--shadow-large);

}

.form-field {

  position: relative;

  margin-bottom: 16px;

}

.form-field label {

  display: block;

  margin-bottom: 6px;

  font-size: 0.73rem;

  font-weight: 800;

}

.form-field input,
.form-field select,
.form-field textarea {

  width: 100%;

  border:
    1px solid #dfe3eb;

  border-radius: 12px;

  background: #fbfcfe;

  color: var(--ink);

  outline: none;

  padding:
    12px 13px;

  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;

}

.form-field input,
.form-field select {

  height: 46px;

}

.form-field textarea {

  resize: vertical;

  min-height: 110px;

}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {

  border-color: #86a4ff;

  box-shadow:
    0 0 0 4px
    rgba(76,125,255,0.09);

}

.form-field small {

  display: block;

  min-height: 15px;

  margin-top: 3px;

  color: #d74355;

  font-size: 0.66rem;

}

.character-counter {

  position: absolute;

  right: 10px;
  bottom: 8px;

  color: #8d92a0;

  font-size: 0.62rem;

}

.submit-button {

  width: 100%;

  min-height: 52px;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  border: 0;

  border-radius: 13px;

  background: var(--orange);

  color: white;

  font-weight: 800;

  box-shadow:
    0 12px 25px rgba(255,112,67,0.22);

  transition:
    transform 180ms ease,
    background 180ms ease;

}

.submit-button:hover {

  background: #e85e34;

  transform:
    translateY(-2px);

}

.submit-button:disabled {

  opacity: 0.6;

  cursor: wait;

}

.form-status {

  min-height: 20px;

  margin-top: 10px;

  text-align: center;

  font-size: 0.76rem;

  font-weight: 750;

}

.form-status.success {
  color: var(--green);
}

.form-status.error {
  color: #d74355;
}

.privacy-note {

  margin-top: 8px;

  text-align: center;

  color: #9297a5;

  font-size: 0.62rem;

}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {

  background:
    #181d2c;

  color: #c7ccda;

}

.footer-grid {

  display: grid;

  grid-template-columns:
    1.7fr 1fr 1fr 1.3fr;

  gap: 50px;

  padding:
    65px 0 50px;

}

.footer-logo {

  color: white;

}

.footer-brand p {

  max-width: 320px;

  margin-top: 17px;

  color: #858da0;

  font-size: 0.78rem;

}

.footer-column {

  display: flex;

  flex-direction: column;

  gap: 9px;

}

.footer-column h3 {

  margin-bottom: 8px;

  color: white;

  font-size: 0.77rem;

}

.footer-column a {

  color: #858da0;

  font-size: 0.75rem;

}

.footer-column a:hover {

  color: white;

}

.footer-bottom {

  display: flex;

  justify-content: center;

  gap: 20px;

  padding:
    18px 0;

  border-top:
    1px solid rgba(255,255,255,0.08);

  color: #70798c;

  font-size: 0.66rem;

}



/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 850px) {

  .desktop-navigation {
    display: none;
  }

  .mobile-menu-button {
    display: block;
  }

  .mobile-navigation {

    padding:
      12px 20px 20px;

    border-top:
      1px solid var(--border);

    background:
      rgba(255,255,255,0.97);

  }

  .mobile-navigation.open {
    display: grid;
  }

  .mobile-navigation a {

    padding:
      11px;

    border-radius: 9px;

    color: var(--muted);

    font-weight: 700;

  }

  .mobile-navigation a:hover {

    color: var(--ink);

    background:
      var(--soft);

  }


  .hero {

    min-height: auto;

    padding-top: 60px;

  }

  .about-grid,
  .contact-wrapper {

    grid-template-columns:
      1fr;

    gap: 45px;

  }

  .footer-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

}


@media (max-width: 650px) {

  .container,
  .nav-container {

    width:
      calc(100% - 28px);

  }

  .hero-content {

    width:
      calc(100% - 28px);

  }

  .hero {

    padding:
      50px 0 35px;

  }

  .hero h1 {

    font-size:
      clamp(2.7rem, 13vw, 4rem);

  }

  .hero-description {

    font-size: 0.9rem;

  }

  .category-switcher {

    overflow-x:auto;

    justify-content:
      flex-start;

    border-radius: 18px;

    transform: translateX(4px);


  }

  .category-button {

    flex:
      0 0 auto;

    min-width:
      110px;

    min-height: 48px;

    font-size: 0.75rem;

  }

  .trust-container {

    overflow-x: auto;

    justify-content:
      flex-start;

    min-height: 75px;

  }

  .trust-container strong {

    white-space:
      nowrap;

  }

  .about-section,
  .industries-section,
  .contact-section {

    padding:
      80px 0;

  }

  .industry-item {

    grid-template-columns:
      35px 1fr 35px;

  }

  .industry-item p {

    display:
      none;

  }

  .footer-grid {

    grid-template-columns:
      1fr 1fr;

    gap:
      35px;

  }

  .footer-bottom {

    display:
      grid;

    gap:
      5px;

  }

}


@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration:
      0.01ms !important;
  }

}   

/* =========================================================
   BRAND LOGO
   ========================================================= */

.brand-logo {
  flex: 0 0 auto;
}

/* Project examples */
.examples-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin: 90px 0 35px;
}

.examples-heading h3 {
  margin-top: 10px;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.055em;
}

.examples-heading > p {
  max-width: 390px;
  color: var(--muted);
  font-size: 0.82rem;
}

.project-examples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.project-example {
  overflow: hidden;
  border: 1px solid rgba(30,30,50,0.08);
  border-radius: 25px;
  background: white;
  box-shadow: 0 10px 35px rgba(40,45,70,0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.project-example:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 55px rgba(40,45,70,0.13);
}

.project-visual {
  height: 280px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cafe-visual { background: linear-gradient(135deg,#fff1e8,#ffe1ce); }
.legal-visual { background: linear-gradient(135deg,#edf2ff,#e1e9ff); }
.school-visual { background: linear-gradient(135deg,#eaf8f2,#dff2e9); }
.property-visual { background: linear-gradient(135deg,#fff8e9,#ffefd1); }
.clinic-visual { background: linear-gradient(135deg,#eef8ff,#e4f3ff); }
.hotel-visual { background: linear-gradient(135deg,#f1edff,#e7e0ff); }
.retail-visual { background: linear-gradient(135deg,#fff0f5,#ffe5ed); }
.learning-visual { background: linear-gradient(135deg,#eef1ff,#e4e9ff); }

.software-window {
  width: 80%; max-width: 500px; height: 205px; overflow: hidden; border-radius: 14px;
  background: white; box-shadow: 0 25px 45px rgba(80,50,35,0.15);
}
.software-header { height: 34px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; border-bottom:1px solid #eee; font-size:.58rem; }
.software-header span { color:#999; }
.software-body { height:calc(100% - 34px); display:flex; }
.software-sidebar { width:95px; display:flex; flex-direction:column; gap:10px; padding:15px 10px; color:#858b99; font-size:.48rem; background:#fafafa; }
.software-sidebar span:first-child { color:var(--orange); font-weight:800; }
.software-content { flex:1; padding:17px; }
.software-content>small { color:#8c91a0; font-size:.46rem; }
.big-number { display:block; margin-top:4px; font-size:1.4rem; }
.mini-stats { display:flex; gap:30px; margin-top:13px; }
.mini-stats small,.mini-stats strong { display:block; }
.mini-stats small { color:#999; font-size:.43rem; }
.mini-stats strong { font-size:.7rem; }
.mini-bars { height:48px; display:flex; align-items:end; gap:6px; margin-top:13px; }
.mini-bars span { flex:1; border-radius:4px 4px 0 0; background:linear-gradient(#ff936c,#ffd1bf); }
.mini-bars span:nth-child(1){height:40%}.mini-bars span:nth-child(2){height:70%}.mini-bars span:nth-child(3){height:55%}.mini-bars span:nth-child(4){height:85%}.mini-bars span:nth-child(5){height:68%}.mini-bars span:nth-child(6){height:96%}

.legal-document { width:62%; max-width:360px; min-height:205px; padding:20px; border-radius:13px; background:white; box-shadow:0 25px 50px rgba(50,65,120,.15); }
.legal-top { display:flex; align-items:center; justify-content:space-between; color:#323b58; font-size:.62rem; }
.legal-top b { width:25px;height:25px;display:grid;place-items:center;border-radius:7px;color:white;background:#526fe1;font-size:.55rem; }
.legal-line { width:65%;height:5px;margin-top:16px;border-radius:99px;background:#e9ecf4; }
.legal-line.long { width:90%; margin-top:22px; }
.case-row { display:flex;justify-content:space-between;align-items:center;margin-top:13px;padding-top:8px;border-top:1px solid #eef0f4;color:#73798b;font-size:.48rem; }
.case-row strong { padding:3px 7px;border-radius:99px;color:#4965d4;background:#edf1ff;font-size:.42rem; }

.school-dashboard { width:80%;max-width:500px;min-height:205px;padding:20px;border-radius:14px;background:white;box-shadow:0 25px 50px rgba(40,100,70,.13); }
.school-brand strong,.school-brand small { display:block; }.school-brand strong{color:#24845e;font-size:.9rem}.school-brand small{color:#999;font-size:.45rem}
.school-cards { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:15px; }.school-cards div{padding:11px;border-radius:9px;background:#f1faf6}.school-cards small,.school-cards strong{display:block}.school-cards small{color:#8b978f;font-size:.42rem}.school-cards strong{margin-top:3px;color:#267d5b;font-size:.85rem}
.school-table{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;margin-top:15px;color:#727a7a;font-size:.43rem}.school-table b{color:#27966a}

.property-app { width:70%;max-width:390px;overflow:hidden;border-radius:15px;background:white;box-shadow:0 25px 50px rgba(120,90,40,.15); }.property-image{height:135px;padding:13px;display:flex;align-items:flex-end;background:linear-gradient(145deg,#a6b7c8,#dce2df)}.property-image span{padding:5px 8px;border-radius:99px;color:white;background:rgba(20,30,35,.6);font-size:.43rem;font-weight:800}.property-details{padding:13px}.property-details small{color:#858a93;font-size:.45rem}.property-details strong{display:block;margin-top:3px;font-size:1.1rem}.property-details div{margin-top:3px;color:#8a8e96;font-size:.46rem}

.clinic-dashboard { width:78%;max-width:460px;padding:20px;border-radius:14px;background:white;box-shadow:0 25px 50px rgba(50,120,160,.13); }.clinic-heading strong,.clinic-heading span{display:block}.clinic-heading strong{color:#267eaa;font-size:.9rem}.clinic-heading span{color:#999;font-size:.45rem}.appointment-card{display:flex;align-items:center;gap:10px;margin-top:16px;padding:10px;border-radius:10px;background:#f0f8fc}.patient-avatar{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:white;background:#5ca9d0;font-size:.55rem;font-weight:800}.appointment-card div:nth-child(2){flex:1}.appointment-card strong,.appointment-card small{display:block}.appointment-card strong{font-size:.55rem}.appointment-card small{color:#8a9198;font-size:.43rem}.appointment-card b{color:#2990bb;font-size:.45rem}.clinic-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:13px}.clinic-metrics div{padding:8px;border-radius:8px;background:#f8fafc}.clinic-metrics small,.clinic-metrics strong{display:block}.clinic-metrics small{color:#9298a0;font-size:.4rem}.clinic-metrics strong{margin-top:2px;font-size:.75rem}

.hotel-dashboard { width:80%;max-width:450px;padding:20px;border-radius:14px;background:white;box-shadow:0 25px 50px rgba(75,50,130,.13); }.hotel-top strong,.hotel-top span{display:block}.hotel-top strong{color:#7454b9;font-size:.9rem}.hotel-top span{color:#999;font-size:.45rem}.hotel-room-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:17px}.room{min-height:65px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:9px;font-size:.65rem;font-weight:800}.room small{margin-top:3px;font-size:.39rem;font-weight:500}.room.available{color:#398567;background:#eaf8f1}.room.occupied{color:#865b7b;background:#f7eaf2}

.retail-dashboard { width:80%;max-width:450px;padding:20px;border-radius:14px;background:white;box-shadow:0 25px 50px rgba(120,55,80,.12); }.retail-heading strong,.retail-heading small{display:block}.retail-heading strong{color:#c05a83;font-size:.9rem}.retail-heading small{color:#999;font-size:.45rem}.inventory-row{display:grid;grid-template-columns:1.6fr .5fr .8fr;align-items:center;margin-top:11px;padding:9px;border-radius:8px;background:#fcf8fa;color:#737982;font-size:.45rem}.inventory-row b{color:#363b46}.inventory-row i{font-style:normal;color:#3d966f;text-align:right}.inventory-row:nth-child(3) i{color:#d18742}

.learning-platform { width:80%;max-width:460px;padding:20px;border-radius:14px;background:white;box-shadow:0 25px 50px rgba(60,70,150,.13); }.learning-top{display:flex;justify-content:space-between;align-items:center}.learning-top strong{color:#536ed2;font-size:.85rem}.learning-top span{color:#8d92a0;font-size:.48rem}.course-card{display:flex;align-items:center;gap:10px;margin-top:13px}.course-thumbnail{width:48px;height:42px;display:grid;place-items:center;flex-shrink:0;border-radius:9px;color:white;background:linear-gradient(135deg,#5d82ed,#a8baff);font-size:.6rem;font-weight:900}.course-thumbnail.purple{background:linear-gradient(135deg,#8d63d9,#c0a8ef)}.course-card>div:last-child{flex:1}.course-card strong,.course-card small{display:block}.course-card strong{font-size:.53rem}.course-card small{margin-top:2px;color:#9095a2;font-size:.42rem}.progress-bar{height:4px;margin-top:5px;overflow:hidden;border-radius:99px;background:#edf0f5}.progress-bar span{display:block;width:68%;height:100%;border-radius:inherit;background:#6684e5}

.project-info{padding:21px 23px 25px}.project-info>span{color:#9b9fab;font-size:.63rem;font-weight:800}.project-info h3{margin-top:7px;font-size:1.15rem;letter-spacing:-.035em}.project-info p{margin-top:7px;max-width:540px;color:#747987;font-size:.76rem;line-height:1.55}

@media (max-width: 900px){
  .project-examples{grid-template-columns:1fr;}
  .examples-heading{display:block;}
  .examples-heading>p{margin-top:15px;}
}

@media (max-width: 850px){
  .brand-logo{width:140px;height:54px;}
  .category-switcher{overflow-x:auto;justify-content:flex-start;border-radius:18px;}
}

@media (max-width: 550px){
  .brand-logo{width:125px;height:50px;}
  .project-visual{height:245px;}
  .software-window,.school-dashboard,.clinic-dashboard,.retail-dashboard,.learning-platform{width:90%;}
  .legal-document{width:75%;}
  .property-app{width:82%;}
  .hotel-dashboard{width:90%;}
  .software-sidebar{width:72px;}
  .software-content{padding:12px;}
  .hotel-room-grid{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================
   3D IMAGE CAROUSEL
   ========================================================= */

.showcase-area#imageShowcase {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    perspective: 1600px;
}

/* Main carousel viewport */
.image-carousel {
    position: relative;
    width: 100%;
    height: 470px;
    overflow:visible;
    perspective: 2000px;
}

/* Track */
.image-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* Every image is its own separate card */
.image-carousel-card {
    position: absolute;

    top: 50%;
    left: 50%;

    width: min(780px, 62vw);
    aspect-ratio: 16 / 9;

    transform-style: preserve-3d;

    border-radius: 26px;

    overflow: hidden;

    background: #ffffff;

    border: 7px solid rgba(255, 255, 255, 0.78);

    box-shadow:
        0 35px 80px rgba(40, 45, 80, 0.20);

    /* ===========================================================
       CAROUSEL SLIDE SPEED — edit the duration values below to
       change how fast a slide animates into place (center/prev/
       next/hidden). Lower ms = faster, higher ms = slower.
       Also see script.js -> restartCarouselTimer() -> the 4500
       value passed to setInterval(), which controls how long each
       slide is shown before it auto-advances (the "autoplay" speed,
       separate from this transition speed).
       =========================================================== */
    transition:
        transform 750ms cubic-bezier(.22,.61,.36,1),
        opacity 550ms ease,
        filter 550ms ease,
        z-index 0ms linear;

    will-change: transform, opacity;

    backface-visibility: hidden;
}

/* Actual image */
.image-carousel-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    filter: none;

    user-select: none;
    -webkit-user-drag: none;
}

/* =========================================================
   CENTER IMAGE
   ========================================================= */

.image-carousel-card.is-center {
    transform:
        translate(-50%, -50%)
        translate3d(0, 0, 180px)
        rotateY(0deg)
        scale(1);

    opacity: 1;

    filter: none;

    z-index: 10;
}


/* =========================================================
   PREVIOUS IMAGE
   ========================================================= */

.image-carousel-card.is-prev {
    transform:
        translate(-50%, -50%)
        translate3d(-850px, 30px, -100px)
        rotateY(8deg)
        scale(0.78);



    opacity: 1;

    filter: none;

    z-index: 5;
}


/* =========================================================
   NEXT IMAGE
   ========================================================= */

.image-carousel-card.is-next {
    transform:
        translate(-50%, -50%)
        translate3d(850px, 30px, -100px)
        rotateY(-8deg)
        scale(0.78);

    opacity: 1;

    filter: none;

    z-index: 5;
}


/* =========================================================
   HIDDEN IMAGES
   ========================================================= */

.image-carousel-card.is-hidden {
    transform:
        translate(-50%, -50%)
        translate3d(0, 0, -500px)
        scale(0.55);

    opacity: 0;

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   3D MOVEMENT
   ========================================================= */

/* Speed used specifically while a card is actively repositioning
   (the .is-moving class script.js toggles during a transition).
   Adjust these ms values together with the ones above if you
   want the "in-motion" phase to feel faster/slower than the rest. */
.image-carousel-card.is-moving {
    transition:
        transform 1000ms cubic-bezier(.22,.61,.36,1),
        opacity 500ms ease;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .image-carousel-card {
        width: min(700px, 66vw);
    }

    .image-carousel-card.is-prev {
        transform:
            translate(-50%, -50%)
            translate3d(-440px, 20px, -100px)
            rotateY(8deg)
            scale(0.74);
    }

    .image-carousel-card.is-next {
        transform:
            translate(-50%, -50%)
            translate3d(440px, 20px, -100px)
            rotateY(-8deg)
            scale(0.74);
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .showcase-area#imageShowcase {
        height: 370px;
    }

    .image-carousel {
        height: 340px;
    }

    .image-carousel-card {
        width: 82vw;
        border-radius: 18px;
        border-width: 5px;
    }

    .image-carousel-card.is-center {
        transform:
            translate(-50%, -50%)
            translate3d(0, 0, 100px)
            rotateY(0deg)
            scale(1);
    }

    .image-carousel-card.is-prev {
        transform:
            translate(-50%, -50%)
            translate3d(-245px, 15px, -80px)
            rotateY(7deg)
            scale(0.68);
    }

    .image-carousel-card.is-next {
        transform:
            translate(-50%, -50%)
            translate3d(245px, 15px, -80px)
            rotateY(-7deg)
            scale(0.68);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .image-carousel-card {
        transition: none;
    }

}