/* =========================================================
           ROOT
        ========================================================= */ 
:root {
          --viro-teal: #087F8C;
          --viro-teal-dark: #073B46;
          --viro-teal-deep: #042F38;
          --viro-orange: #F58220;
          --viro-orange-dark: #D9680B;
          --white: #FFFFFF;
          --off-white: #F8FAFA;
          --mint: #F4FAF9;
          --light-teal: #EEF7F8;
          --soft-green: #F3F8F7;
          --ivory: #F8F5EF;
          --light-blue: #EAF5F7;
          --text-dark: #173238;
          --text-muted: #66787D;
          --border-light: rgba(8, 127, 140, 0.12);
          --shadow-sm: 0 10px 30px rgba(7, 59, 70, 0.07);
          --shadow-md: 0 20px 50px rgba(7, 59, 70, 0.10);
          --radius: 18px;
        }
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        html {
          scroll-behavior: smooth;
        }
        body {
          font-family: "Acumin Pro", Arial, sans-serif;
          color: var(--text-dark);
          background: #fff;
          overflow-x: hidden;
        }
        a {
          text-decoration: none;
        }
        img {
          max-width: 100%;
          display: block;
        }
        /* =========================================================
           GENERAL
        ========================================================= */
        .section-padding {
          padding: 110px 0;
        }
        .section-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          color: var(--viro-teal);
          font-size: 13px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 2px;
          margin-bottom: 15px;
        }
        .section-eyebrow::before {
          content: "";
          width: 30px;
          height: 2px;
          background: var(--viro-orange);
        }
      
        .text-white-soft {
          color: rgba(255, 255, 255, .75);
        }
        /* =========================================================
           BUTTONS
        ========================================================= */
        .btn-viro-orange, .btn-viro-teal {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 14px 27px;
          border-radius: 9px;
          font-size: 15px;
          font-weight: 700;
          transition: all .3s ease;
        }
        .btn-viro-orange {
          color: #fff;
          background: var(--viro-orange);
          border: 2px solid var(--viro-orange);
          box-shadow: 0 12px 30px rgba(245, 130, 32, .20);
        }
        .btn-viro-orange:hover {
          color: #fff;
          background: var(--viro-orange-dark);
          border-color: var(--viro-orange-dark);
          transform: translateY(-3px);
          box-shadow: 0 16px 35px rgba(245, 130, 32, .28);
        }
        .btn-viro-teal {
          color: #fff;
          background: var(--viro-teal);
          border: 2px solid var(--viro-teal);
          box-shadow: 0 12px 30px rgba(8, 127, 140, .18);
        }
        .btn-viro-teal:hover {
          color: #fff;
          background: #05636D;
          border-color: #05636D;
          transform: translateY(-3px);
        }
        /* =========================================================
           NAVBAR
        ========================================================= */
        .navbar {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 9999;
          padding: 10px 0;
          background: rgba(255, 255, 255, .92);
          backdrop-filter: blur(18px);
          transition: all .35s ease;
        }
        .navbar.scrolled {
          padding: 11px 0;
          box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
        }
        .navbar-brand img {
          width: 219px;
          height: auto;
        }
        .navbar-nav {
          gap: 7px;
        }
        .navbar .nav-link {
          color: #24474D;
          font-size: 15px;
          font-weight: 600;
          padding: 10px 13px !important;
          transition: .25s ease;
        }
        .navbar .nav-link:hover, .navbar .nav-link.active {
          color: var(--viro-orange);
        }
        .navbar-toggler {
          border: none;
          box-shadow: none !important;
        }
        /* =========================================================
           HERO
        ========================================================= */
        .hero-section {
          position: relative;
          min-height: 100vh;
          overflow: hidden;
          background: radial-gradient(circle at 75% 45%, rgba(8, 127, 140, 0.28), transparent 32%), linear-gradient(135deg, #042f38 0%, #073b46 48%, #087f8c 100%);
          color: #ffffff;
        }
        /* GRID */
        .hero-grid {
          position: absolute;
          inset: 0;
          opacity: .12;
          background-image:
            linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
          background-size: 55px 55px;
          mask-image: linear-gradient(to right, transparent, black 25%, black 75%, transparent);
        }
        /* AMBIENT GLOWS */
        .hero-glow {
          position: absolute;
          border-radius: 50%;
          filter: blur(80px);
          pointer-events: none;
        }
        .hero-glow-1 {
          width: 350px;
          height: 350px;
          background: rgba(0, 210, 220, .18);
          top: 15%;
          right: 10%;
        }
        .hero-glow-2 {
          width: 250px;
          height: 250px;
          background: rgba(245, 130, 32, .12);
          bottom: 10%;
          left: 10%;
        }
        /* CONTENT */
        .hero-content {
          position: relative;
          z-index: 5;
        }
        .hero-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 24px;
          padding: 9px 16px;
          border: 1px solid rgba(255, 255, 255, .18);
          border-radius: 100px;
          background: rgba(255, 255, 255, .06);
          backdrop-filter: blur(10px);
          font-size: 13px;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          color: #d9ffff;
        }
        .eyebrow-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #8fe6ea;
          box-shadow: 0 0 15px #8fe6ea;
          animation: dotPulse 2s infinite;
        }
        .hero-title {
          max-width: 700px;
          margin: 0;
          font-size: clamp(48px, 5.5vw, 82px);
          line-height: .98;
          letter-spacing: -3px;
          font-weight: 700;
        }
        .hero-title span {
          display: block;
          color: #8fe6ea;
        }
        .hero-description {
          max-width: 620px;
          margin: 30px 0;
          color: rgba(255, 255, 255, .72);
          font-size: 18px;
          line-height: 1.7;
        }
        /* BUTTONS */
        .hero-buttons {
          display: flex;
          flex-wrap: wrap;
          gap: 14px;
        }
        .btn-viro-orange {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 14px 24px;
          border-radius: 8px;
          background: #f58220;
          color: #fff;
          border: 1px solid #f58220;
          font-weight: 600;
          transition: .3s ease;
        }
        .btn-viro-orange:hover {
          background: #d9680b;
          border-color: #d9680b;
          color: #fff;
          transform: translateY(-3px);
        }
        .btn-viro-outline {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 14px 24px;
          border-radius: 8px;
          color: #fff;
          border: 1px solid rgba(255, 255, 255, .35);
          background: rgba(255, 255, 255, .05);
          backdrop-filter: blur(8px);
          font-weight: 600;
          transition: .3s ease;
        }
        .btn-viro-outline:hover {
          background: #fff;
          color: #073b46;
          transform: translateY(-3px);
        }
        /* TRUST */
        .hero-trust {
          display: flex;
          flex-wrap: wrap;
          gap: 22px;
          margin-top: 45px;
        }
        .trust-item {
          display: flex;
          align-items: center;
          gap: 8px;
          color: rgba(255, 255, 255, .65);
          font-size: 13px;
        }
        .trust-item i {
          color: #8fe6ea;
          font-size: 17px;
        }
        /* NEURAL VISUAL */
        .neural-visual {
          position: relative;
          min-height: 620px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .neural-stage {
          position: relative;
          width: 560px;
          height: 560px;
        }
        /* CORE */
        .neural-core {
          position: absolute;
          width: 280px;
          height: 280px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          background:
            radial-gradient(circle at center, rgba(8, 127, 140, .7), rgba(4, 47, 56, .8) 55%, rgba(4, 47, 56, 0) 72%);
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow:
            0 0 50px rgba(82, 226, 232, .22), inset 0 0 60px rgba(143, 230, 234, .12);
        }
        /* BRAIN ICON */
        .neuro-brain-icon {
          position: relative;
          z-index: 5;
          width: 145px;
          height: 145px;
          animation:
            neuroIconPulse 3s ease-in-out infinite;
          filter:
            drop-shadow(0 0 10px rgba(143, 230, 234, .7)) drop-shadow(0 0 25px rgba(8, 200, 210, .35));
        }
        /* PULSE RINGS */
        .neuro-pulse {
          position: absolute;
          inset: 35px;
          border: 1px solid rgba(143, 230, 234, .25);
          border-radius: 50%;
          animation: neuroRing 3s ease-out infinite;
        }
        .pulse-2 {
          animation-delay: 1.5s;
        }
        /* ORBITS */
        .orbit {
          position: absolute;
          top: 50%;
          left: 50%;
          border: 1px solid rgba(143, 230, 234, .16);
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }
        .orbit-1 {
          width: 360px;
          height: 360px;
          animation: orbitRotate 18s linear infinite;
        }
        .orbit-2 {
          width: 455px;
          height: 455px;
          transform:
            translate(-50%, -50%) rotate(60deg);
          animation: orbitRotateReverse 25s linear infinite;
        }
        .orbit-3 {
          width: 550px;
          height: 550px;
          transform:
            translate(-50%, -50%) rotate(-35deg);
          border-style: dashed;
          opacity: .5;
          animation: orbitRotate 35s linear infinite;
        }
        /* PARTICLES */
        .particle {
          position: absolute;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #8fe6ea;
          box-shadow: 0 0 15px #8fe6ea;
          animation: particleFloat 4s ease-in-out infinite;
        }
        .particle-1 {
          top: 12%;
          left: 48%;
        }
        .particle-2 {
          top: 30%;
          right: 4%;
          animation-delay: .7s;
        }
        .particle-3 {
          bottom: 15%;
          right: 17%;
          animation-delay: 1.2s;
        }
        .particle-4 {
          bottom: 12%;
          left: 20%;
          animation-delay: 1.8s;
        }
        .particle-5 {
          top: 23%;
          left: 8%;
          animation-delay: 2.2s;
        }
        .particle-6 {
          bottom: 38%;
          right: 0;
          animation-delay: 2.8s;
        }
        /* FLOATING CARDS */
        .floating-info {
          position: absolute;
          z-index: 10;
          display: flex;
          align-items: center;
          gap: 11px;
          padding: 13px 17px;
          min-width: 185px;
          border: 1px solid rgba(255, 255, 255, .14);
          border-radius: 12px;
          background: rgba(4, 47, 56, .72);
          backdrop-filter: blur(16px);
          box-shadow:
            0 15px 40px rgba(0, 0, 0, .18);
          animation: floatingCard 5s ease-in-out infinite;
        }
        .floating-info strong {
          display: block;
          color: #fff;
          font-size: 13px;
        }
        .floating-info small {
          display: block;
          margin-top: 2px;
          color: rgba(255, 255, 255, .5);
          font-size: 10px;
        }
        .floating-icon {
          width: 38px;
          height: 38px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(143, 230, 234, .1);
          color: #8fe6ea;
          font-size: 17px;
        }
        .floating-info-1 {
          top: 17%;
          left: -2%;
        }
        .floating-info-2 {
          top: 63%;
          right: -4%;
          animation-delay: 1.2s;
        }
        .floating-info-3 {
          bottom: 7%;
          left: 8%;
          animation-delay: 2.1s;
        }
        /* CONNECTION LINES */
        .neural-connections {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
          opacity: .35;
        }
        .neural-connections path {
          fill: none;
          stroke: #8fe6ea;
          stroke-width: 1;
          stroke-dasharray: 5 8;
          animation: connectionFlow 4s linear infinite;
        }
        /* ANIMATIONS */
        @keyframes neuroIconPulse {
          0%, 100% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.06);
          }
        }
        @keyframes neuroRing {
          0% {
            transform: scale(.7);
            opacity: .7;
          }
          100% {
            transform: scale(1.7);
            opacity: 0;
          }
        }
        @keyframes orbitRotate {
          from {
            transform:
              translate(-50%, -50%) rotate(0deg);
          }
          to {
            transform:
              translate(-50%, -50%) rotate(360deg);
          }
        }
        @keyframes orbitRotateReverse {
          from {
            transform:
              translate(-50%, -50%) rotate(360deg);
          }
          to {
            transform:
              translate(-50%, -50%) rotate(0deg);
          }
        }
        @keyframes floatingCard {
          0%, 100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-10px);
          }
        }
        @keyframes particleFloat {
          0%, 100% {
            transform: translateY(0) scale(1);
            opacity: .6;
          }
          50% {
            transform: translateY(-18px) scale(1.3);
            opacity: 1;
          }
        }
        @keyframes connectionFlow {
          to {
            stroke-dashoffset: -50;
          }
        }
        @keyframes dotPulse {
          0%, 100% {
            opacity: .5;
            transform: scale(1);
          }
          50% {
            opacity: 1;
            transform: scale(1.4);
          }
        }
        /* RESPONSIVE */
        @media (max-width: 991px) {
          .hero-section {
            min-height: auto;
          }
          .hero-content {
            padding-top: 80px;
            text-align: center;
          }
          .hero-eyebrow {
            margin-left: auto;
            margin-right: auto;
          }
          .hero-title {
            margin-left: auto;
            margin-right: auto;
          }
          .hero-description {
            margin-left: auto;
            margin-right: auto;
          }
          .hero-buttons, .hero-trust {
            justify-content: center;
          }
          .neural-visual {
            min-height: 560px;
            margin-top: 30px;
          }
        }
        @media (max-width: 600px) {
          .hero-title {
            font-size: 45px;
            letter-spacing: -2px;
          }
          .hero-description {
            font-size: 16px;
          }
          .neural-stage {
            width: 350px;
            height: 350px;
          }
          .neural-core {
            width: 190px;
            height: 190px;
          }
          .neuro-brain-icon {
            width: 105px;
            height: 105px;
          }
          .orbit-1 {
            width: 245px;
            height: 245px;
          }
          .orbit-2 {
            width: 310px;
            height: 310px;
          }
          .orbit-3 {
            width: 370px;
            height: 370px;
          }
          .floating-info {
            transform: scale(.78);
          }
          .floating-info-1 {
            left: -18%;
          }
          .floating-info-2 {
            right: -18%;
          }
          .floating-info-3 {
            left: 0;
          }
        }
        @media (prefers-reduced-motion: reduce) {
          .neuro-brain-icon, .neuro-pulse, .orbit, .particle, .floating-info, .neural-connections path, .eyebrow-dot {
            animation: none !important;
          }
        }
        /* =========================================================
           HERO NEURAL VISUAL
        ========================================================= */
        .neural-stage {
          position: relative;
          width: 520px;
          height: 520px;
          margin: auto;
        }
        .neural-core {
          position: absolute;
          width: 260px;
          height: 260px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          background:
            radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .95), rgba(103, 239, 243, .75) 15%, rgba(8, 127, 140, .5) 42%, rgba(4, 47, 56, .9) 72%);
          box-shadow:
            0 0 40px rgba(120, 245, 245, .55), 0 0 100px rgba(8, 127, 140, .35);
          animation: corePulse 4s infinite ease-in-out;
        }
        .neural-core::after {
          content: "";
          position: absolute;
          inset: 28px;
          border: 1px solid rgba(255, 255, 255, .35);
          border-radius: 50%;
        }
        .orbit {
          position: absolute;
          border: 1px solid rgba(143, 230, 234, .25);
          border-radius: 50%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) rotate(-20deg);
        }
        .orbit-1 {
          width: 390px;
          height: 180px;
          animation: orbitOne 12s linear infinite;
        }
        .orbit-2 {
          width: 450px;
          height: 230px;
          animation: orbitTwo 15s linear infinite reverse;
        }
        .orbit-3 {
          width: 340px;
          height: 340px;
          border-style: dashed;
          animation: orbitThree 18s linear infinite;
        }
        .neuron {
          position: absolute;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          background: #A8F5F7;
          box-shadow: 0 0 20px #8FE6EA;
        }
        .n1 {
          top: 20%;
          left: 32%;
        }
        .n2 {
          top: 30%;
          right: 20%;
        }
        .n3 {
          bottom: 24%;
          left: 20%;
        }
        .n4 {
          bottom: 15%;
          right: 29%;
        }
        .n5 {
          top: 50%;
          left: 7%;
        }
        .floating-info {
          position: absolute;
          padding: 13px 17px;
          border-radius: 12px;
          background: rgba(255, 255, 255, .10);
          border: 1px solid rgba(255, 255, 255, .18);
          backdrop-filter: blur(15px);
          color: #fff;
          box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
          font-size: 13px;
          animation: floatCard 5s ease-in-out infinite;
        }
        .floating-info strong {
          display: block;
          font-size: 14px;
          margin-bottom: 3px;
        }
        .floating-info span {
          color: rgba(255, 255, 255, .65);
        }
        .info-1 {
          top: 10%;
          left: 2%;
        }
        .info-2 {
          right: 0;
          top: 34%;
          animation-delay: -2s;
        }
        .info-3 {
          bottom: 7%;
          left: 10%;
          animation-delay: -4s;
        }
        @keyframes corePulse {
          0%, 100% {
            transform: translate(-50%, -50%) scale(1);
          }
          50% {
            transform: translate(-50%, -50%) scale(1.05);
          }
        }
        @keyframes orbitOne {
          from {
            transform: translate(-50%, -50%) rotate(0deg);
          }
          to {
            transform: translate(-50%, -50%) rotate(360deg);
          }
        }
        @keyframes orbitTwo {
          from {
            transform: translate(-50%, -50%) rotate(0deg);
          }
          to {
            transform: translate(-50%, -50%) rotate(360deg);
          }
        }
        @keyframes orbitThree {
          from {
            transform: translate(-50%, -50%) rotate(0deg);
          }
          to {
            transform: translate(-50%, -50%) rotate(360deg);
          }
        }
        @keyframes floatCard {
          0%, 100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-12px);
          }
        }
        /* =========================================================
           FEATURES
        ========================================================= */
        .section-features {
          background: var(--mint);
        }
        .feature-card {
          height: 100%;
          padding: 34px;
          background: #fff;
          border: 1px solid var(--border-light);
          border-radius: var(--radius);
          transition: .35s ease;
        }
        .feature-card:hover {
          transform: translateY(-8px);
          box-shadow: var(--shadow-md);
        }
        .feature-icon {
          width: 58px;
          height: 58px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 15px;
          color: #fff;
          background: var(--viro-teal);
          font-size: 25px;
          margin-bottom: 25px;
        }
        .feature-card:nth-child(2) .feature-icon {
          background: var(--viro-orange);
        }
        .feature-card:nth-child(3) .feature-icon {
          background: var(--viro-teal-dark);
        }
        .feature-card h3 {
          font-size: 23px;
          margin-bottom: 13px;
        }
        .feature-card p {
          color: var(--text-muted);
          line-height: 1.7;
          margin-bottom: 0;
        }
        /* =========================================================
           ABOUT
        ========================================================= */
        .section-about {
          background: #fff;
        }
        .about-visual {
          position: relative;
        }
        .about-image {
          width: 100%;
          height: 520px;
          object-fit: cover;
          border-radius: 25px;
        }
        .about-badge {
          position: absolute;
          bottom: 25px;
          right: -25px;
          width: 190px;
          padding: 22px;
          background: var(--viro-teal-dark);
          color: #fff;
          border-radius: 17px;
          box-shadow: var(--shadow-md);
        }
        .about-badge strong {
          display: block;
          font-size: 28px;
        }
        .about-badge span {
          color: rgba(255, 255, 255, .65);
          font-size: 13px;
        }
        .about-points {
          list-style: none;
          padding: 0;
          margin: 30px 0;
        }
        .about-points li {
          display: flex;
          gap: 13px;
          margin-bottom: 16px;
          color: #51676C;
        }
        .about-points i {
          color: var(--viro-orange);
          font-size: 20px;
        }
        /* =========================================================
           PRODUCTS
        ========================================================= */
        .section-products {
          background: var(--light-teal);
        }
        .product-card {
          position: relative;
          height: 100%;
          padding: 28px;
          background: #fff;
          border: 1px solid rgba(8, 127, 140, .10);
          border-radius: 18px;
          transition: .35s ease;
          overflow: hidden;
        }
        .product-card::before {
          content: "";
          position: absolute;
          width: 100px;
          height: 100px;
          right: -40px;
          top: -40px;
          border-radius: 50%;
          background: rgba(8, 127, 140, .07);
        }
        .product-card:hover {
          transform: translateY(-8px);
          box-shadow: var(--shadow-md);
        }
        .product-number {
          color: var(--viro-orange);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 1px;
          margin-bottom: 35px;
        }
        .product-card h3 {
          font-size: 25px;
          margin-bottom: 12px;
        }
        .product-card p {
          color: var(--text-muted);
          line-height: 1.65;
          min-height: 80px;
        }
        .product-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          margin-top: 20px;
          color: var(--viro-teal);
          font-weight: 700;
        }
        .product-link:hover {
          color: var(--viro-orange);
        }
        /* =========================================================
           WHY VIROCARE
        ========================================================= */
        .section-why {
          background: var(--ivory);
        }
        .why-box {
          padding: 35px;
          height: 100%;
          border-radius: 18px;
          background: rgba(255, 255, 255, .65);
          border: 1px solid rgba(91, 67, 50, .08);
        }
        .why-number {
          font-size: 48px;
          line-height: 1;
          color: var(--viro-orange);
          font-weight: 700;
          margin-bottom: 20px;
        }
        .why-box h3 {
          font-size: 23px;
          margin-bottom: 12px;
        }
        .why-box p {
          color: #756F68;
          line-height: 1.7;
        }
        /* =========================================================
           DISTRIBUTORS
        ========================================================= */
        .section-distributors {
          background:
            radial-gradient(circle at 80% 20%, rgba(8, 127, 140, .35), transparent 35%), var(--viro-teal-dark);
          color: #fff;
          position: relative;
          overflow: hidden;
        }
        .distributor-card {
          padding: 30px;
          height: 100%;
          border-radius: 18px;
          background: rgba(255, 255, 255, .06);
          border: 1px solid rgba(255, 255, 255, .12);
          transition: .3s ease;
        }
        .distributor-card:hover {
          transform: translateY(-7px);
          background: rgba(255, 255, 255, .10);
        }
        .distributor-card i {
          font-size: 32px;
          color: #8FE6EA;
          margin-bottom: 22px;
        }
        .distributor-card h3 {
          font-size: 24px;
        }
        .distributor-card p {
          color: rgba(255, 255, 255, .63);
          line-height: 1.7;
        }
        /* =========================================================
           TEAM
        ========================================================= */
        .section-team {
          background: var(--soft-green);
        }
        .team-card {
          overflow: hidden;
          height: 100%;
          border-radius: 18px;
          background: #fff;
          border: 1px solid var(--border-light);
          transition: .35s ease;
        }
        .team-card:hover {
          transform: translateY(-7px);
          box-shadow: var(--shadow-md);
        }
        .team-photo {
          height: 280px;
          width: 100%;
          object-fit: cover;
          background: #DDEEEF;
        }
        .team-info {
          padding: 25px;
        }
        .team-info h3 {
          font-size: 21px;
          margin-bottom: 5px;
        }
        .team-info p {
          color: var(--viro-teal);
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 0;
        }
        /* =========================================================
           FAQ
        ========================================================= */
        .section-faq {
          background: #fff;
        }
        .faq-image-wrap {
          position: relative;
          padding-right: 35px;
        }
        .faq-image {
          width: 100%;
          height: 600px;
          object-fit: cover;
          border-radius: 25px;
          box-shadow: 0 25px 60px rgba(7, 59, 70, .14);
        }
        .faq-image-glow {
          position: absolute;
          width: 190px;
          height: 190px;
          border-radius: 50%;
          background: rgba(245, 130, 32, .13);
          filter: blur(35px);
          top: -45px;
          left: -35px;
          z-index: 0;
        }
        .faq-floating-card {
          position: absolute;
          left: -25px;
          bottom: 35px;
          padding: 22px;
          width: 230px;
          background: #fff;
          border-radius: 17px;
          box-shadow: 0 20px 50px rgba(7, 59, 70, .16);
          z-index: 3;
        }
        .faq-card-icon {
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--viro-teal);
          color: #fff;
          border-radius: 12px;
          margin-bottom: 15px;
        }
        .faq-floating-card strong {
          display: block;
          font-size: 17px;
        }
        .faq-floating-card span {
          color: var(--text-muted);
          font-size: 13px;
        }
        .faq-accordion {
          margin-top: 30px;
        }
        .faq-accordion .accordion-item {
          border: 0;
          border-bottom: 1px solid #DDE7E8;
          background: transparent;
        }
        .faq-accordion .accordion-button {
          padding: 23px 0;
          background: transparent;
          box-shadow: none;
          color: var(--text-dark);
          font-size: 17px;
          font-weight: 700;
        }
        .faq-accordion .accordion-button:not(.collapsed) {
          color: var(--viro-teal);
        }
        .faq-accordion .accordion-body {
          padding: 0 45px 23px 0;
          color: var(--text-muted);
          line-height: 1.7;
        }
        .faq-accordion .accordion-button::after {
          background-image: none;
          content: "+";
          width: auto;
          height: auto;
          font-size: 27px;
          font-weight: 300;
          color: var(--viro-orange);
        }
        .faq-accordion .accordion-button:not(.collapsed)::after {
          content: "−";
        }
        /* =========================================================
           CONTACT
        ========================================================= */
        .section-contact {
          background: var(--light-blue);
        }
        .contact-info {
          padding: 40px;
          height: 100%;
          border-radius: 20px;
          background: var(--viro-teal-dark);
          color: #fff;
        }
        .contact-info h3 {
          font-size: 30px;
          margin-bottom: 20px;
        }
        .contact-info p {
          color: rgba(255, 255, 255, .65);
          line-height: 1.7;
        }
        .contact-item {
          display: flex;
          gap: 15px;
          margin-top: 28px;
        }
        .contact-item i {
          width: 44px;
          height: 44px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          border-radius: 11px;
          background: rgba(255, 255, 255, .10);
          color: #8FE6EA;
        }
        .contact-item strong {
          display: block;
          margin-bottom: 3px;
        }
        .contact-item span {
          color: rgba(255, 255, 255, .62);
          font-size: 14px;
        }
        .contact-form {
          padding: 40px;
          border-radius: 20px;
          background: #fff;
          box-shadow: var(--shadow-sm);
        }
        .form-label {
          font-weight: 600;
          font-size: 14px;
          margin-bottom: 8px;
        }
        .form-control, .form-select {
          padding: 13px 15px;
          border-radius: 9px;
          border: 1px solid #D8E4E5;
          box-shadow: none !important;
        }
        .form-control:focus, .form-select:focus {
          border-color: var(--viro-teal);
        }
        /* =========================================================
           FINAL CTA
        ========================================================= */
        .section-cta {
          position: relative;
          overflow: hidden;
          padding: 95px 0;
          background:
            radial-gradient(circle at 85% 50%, rgba(143, 230, 234, .25), transparent 35%), linear-gradient(135deg, #073B46, #087F8C);
          color: #fff;
        }
        .cta-content {
          position: relative;
          z-index: 2;
        }
        .cta-description {
          color: rgba(255, 255, 255, .68);
          max-width: 650px;
          margin: 0 auto 30px;
          font-size: 18px;
          line-height: 1.7;
        }
        /* =========================================================
           FOOTER
        ========================================================= */
        footer {
          background: #03262E;
          color: #fff;
          padding: 70px 0 25px;
        }
        .footer-logo {
          width: 155px;
          margin-bottom: 20px;
          filter: brightness(0) invert(1);
        }
        .footer-description {
          max-width: 350px;
          color: rgba(255, 255, 255, .55);
          line-height: 1.7;
        }
        .footer-title {
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 20px;
        }
        .footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .footer-links li {
          margin-bottom: 11px;
        }
        .footer-links a {
          color: rgba(255, 255, 255, .55);
          transition: .2s ease;
        }
        .footer-links a:hover {
          color: var(--viro-orange);
        }
        .footer-bottom {
          border-top: 1px solid rgba(255, 255, 255, .08);
          margin-top: 50px;
          padding-top: 22px;
          color: rgba(255, 255, 255, .40);
          font-size: 13px;
        }
        /* =========================================================
           BACK TO TOP
        ========================================================= */
        .back-top {
          position: fixed;
          right: 25px;
          bottom: 25px;
          width: 45px;
          height: 45px;
          border: 0;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: var(--viro-orange);
          color: #fff;
          box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
          opacity: 0;
          visibility: hidden;
          transform: translateY(15px);
          transition: .3s ease;
          z-index: 999;
        }
        .back-top.show {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }
        /* =========================================================
           SCROLL REVEAL
        ========================================================= */
        .reveal {
          opacity: 0;
          transform: translateY(35px);
          transition:
            opacity .8s ease, transform .8s ease;
        }
        .reveal.active {
          opacity: 1;
          transform: translateY(0);
        }
        /* =========================================================

           RESPONSIVE
        ========================================================= */
        @media (max-width: 1199px) {
          .neural-stage {
            width: 440px;
            height: 440px;
          }
          .neural-core {
            width: 220px;
            height: 220px;
          }
          .orbit-1 {
            width: 330px;
          }
          .orbit-2 {
            width: 390px;
          }
          .orbit-3 {
            width: 290px;
            height: 290px;
          }
        }
        @media (max-width: 991px) {
          .navbar-collapse {
            margin-top: 15px;
            background: #fff;
            padding: 15px;
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
          }
          .hero {
            padding-top: 130px;
          }
          .hero-content {
            text-align: center;
          }
          .hero-title, .hero-description {
            margin-left: auto;
            margin-right: auto;
          }
          .hero-buttons {
            justify-content: center;
          }
          .hero-stats {
            justify-content: center;
          }
          .neural-stage {
            margin-top: 60px;
          }
          .about-badge {
            right: 15px;
          }
          .faq-image-wrap {
            padding-right: 0;
            margin-bottom: 60px;
          }
          .faq-image {
            height: 500px;
          }
          .faq-floating-card {
            left: 20px;
          }
        }
        @media (max-width: 767px) {
          .section-padding {
            padding: 75px 0;
          }
          .hero {
            min-height: auto;
          }
          .hero-title {
            font-size: 46px;
            letter-spacing: -2px;
          }
          .hero-description {
            font-size: 17px;
          }
          .hero-stats {
            gap: 25px;
          }
          .neural-stage {
            width: 340px;
            height: 340px;
          }
          .neural-core {
            width: 160px;
            height: 160px;
          }
          .orbit-1 {
            width: 250px;
            height: 120px;
          }
          .orbit-2 {
            width: 300px;
            height: 160px;
          }
          .orbit-3 {
            width: 230px;
            height: 230px;
          }
          .floating-info {
            transform: scale(.82);
          }
          .info-1 {
            left: -15px;
          }
          .info-2 {
            right: -15px;
          }
          .info-3 {
            left: 0;
          }
          .about-image {
            height: 400px;
          }
          .about-badge {
            bottom: 15px;
          }
          .contact-info, .contact-form {
            padding: 28px;
          }
          .faq-image {
            height: 400px;
          }
          .faq-floating-card {
            width: 205px;
            padding: 18px;
          }
        }
        @media (max-width: 480px) {
          .hero-title {
            font-size: 40px;
          }
          .hero-buttons .btn-viro-orange, .hero-buttons .btn-viro-teal {
            width: 100%;
          }
          .neural-stage {
            width: 290px;
            height: 290px;
          }
          .neural-core {
            width: 135px;
            height: 135px;
          }
          .orbit-1 {
            width: 215px;
          }
          .orbit-2 {
            width: 260px;
          }
          .orbit-3 {
            width: 195px;
            height: 195px;
          }
          .floating-info {
            display: none;
          }
        }
        /* =========================================================
           REDUCED MOTION
        ========================================================= */
        @media (prefers-reduced-motion: reduce) {
          html {
            scroll-behavior: auto;
          }
          *, *::before, *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
          }
          .reveal {
            opacity: 1;
            transform: none;
          }
        }
        /* =========================================================
       VIROCARE HEALTHCARE
       ABOUT US PAGE
    ========================================================= */
        * {
          box-sizing: border-box;
        }
        html {
          scroll-behavior: smooth;
        }
        body {
          margin: 0;
          font-family: "Acumin Pro", "Segoe UI", Arial, sans-serif;
          color: var(--text-dark);
          background: #fff;
          overflow-x: hidden;
        }
        a {
          text-decoration: none;
        }
        img {
          max-width: 100%;
          display: block;
        }
        /* =========================================================
       NAVBAR
    ========================================================= */
        .navbar {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 9999;
          padding: 10px 0;
          background: rgba(255, 255, 255, .92);
          backdrop-filter: blur(18px);
          transition: all .35s ease;
        }
        .navbar.scrolled {
          padding: 11px 0;
          box-shadow: 0 8px 30px rgba(0, 0, 0, .08);
        }
        .navbar-brand img {
          width: 219px;
          height: auto;
        }
        .navbar-nav {
          gap: 7px;
        }
        .navbar .nav-link {
          color: #24474D;
          font-size: 15px;
          font-weight: 600;
          padding: 10px 13px !important;
          transition: .25s ease;
        }
        .navbar .nav-link:hover, .navbar .nav-link.active {
          color: var(--viro-orange);
        }
        .navbar-toggler {
          border: none;
          box-shadow: none !important;
        }
        /* =========================================================
       PAGE HERO
    ========================================================= */
        .about-hero {
          position: relative;
          min-height: 720px;
          display: flex;
          align-items: center;
          overflow: hidden;
          background: radial-gradient(circle at 85% 25%, rgba(245, 130, 32, 0.18), transparent 25%), radial-gradient(circle at 70% 80%, rgba(8, 127, 140, 0.35), transparent 35%), linear-gradient(135deg, var(--viro-teal-deep), var(--viro-teal-dark));
          color: #fff;
        }
        .about-hero::before {
          content: "";
          position: absolute;
          inset: 0;
          opacity: 0.08;
          background-image:
            linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
          background-size: 50px 50px;
        }
        .hero-content {
          position: relative;
          z-index: 3;
        }
        .hero-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          color: #A9E9EC;
          text-transform: uppercase;
          letter-spacing: 2.5px;
          font-size: 13px;
          font-weight: 700;
          margin-bottom: 20px;
        }
        .hero-eyebrow span {
          width: 35px;
          height: 2px;
          background: var(--viro-orange);
          display: inline-block;
        }
        .about-hero h1 {
          font-size: clamp(48px, 6vw, 82px);
          line-height: 0.98;
          font-weight: 700;
          letter-spacing: -2px;
          margin-bottom: 25px;
          max-width: 750px;
        }
        .about-hero h1 em {
          color: #8FE6EA;
          font-style: normal;
        }
       
        /* Hero visual */
        .hero-visual {
          position: relative;
          min-height: 500px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .hero-orb {
          width: 360px;
          height: 360px;
          border-radius: 50%;
          position: relative;
          background:
            radial-gradient(circle, rgba(143, 230, 234, 0.22), rgba(8, 127, 140, 0.10) 45%, transparent 70%);
          border: 1px solid rgba(143, 230, 234, 0.25);
          box-shadow:
            0 0 80px rgba(143, 230, 234, 0.15), inset 0 0 50px rgba(143, 230, 234, 0.08);
          animation: heroFloat 6s ease-in-out infinite;
        }
        .hero-orb::before, .hero-orb::after {
          content: "";
          position: absolute;
          inset: -35px;
          border: 1px solid rgba(143, 230, 234, 0.15);
          border-radius: 50%;
          animation: orbitRotate 18s linear infinite;
        }
        .hero-orb::after {
          inset: -75px;
          border-style: dashed;
          animation-direction: reverse;
          animation-duration: 25s;
        }
        .hero-brain {
          position: absolute;
          inset: 50%;
          transform: translate(-50%, -50%);
          width: 190px;
          height: 190px;
        }
        .hero-brain svg {
          width: 100%;
          height: 100%;
          filter: drop-shadow(0 0 15px rgba(143, 230, 234, 0.6));
        }
        .hero-stat {
          position: absolute;
          background: rgba(255, 255, 255, 0.09);
          border: 1px solid rgba(255, 255, 255, 0.18);
          backdrop-filter: blur(15px);
          border-radius: 14px;
          padding: 15px 18px;
          color: #fff;
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }
        .hero-stat strong {
          display: block;
          font-size: 20px;
        }
        .hero-stat small {
          color: rgba(255, 255, 255, 0.65);
        }
        .stat-one {
          top: 20%;
          right: 0;
        }
        .stat-two {
          bottom: 20%;
          left: 0;
        }
        /* =========================================================
       INTRO
    ========================================================= */
        .section-intro {
          padding: 110px 0;
          background: #fff;
        }
        .eyebrow {
          
			display: inline-flex;
			align-items: center;
			gap:9px;
			color: var(--viro-teal);
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: 2px;
          font-weight: 700;
          margin-bottom: 15px;
				
        }
        .section-title {
          font-size: clamp(36px, 4vw, 56px);
          line-height: 1.05;
          letter-spacing: -1px;
          font-weight: 700;
          margin-bottom: 25px;
        }
      
        .intro-number {
          font-size: 100px;
          line-height: 1;
          font-weight: 800;
          color: var(--light-teal);
          letter-spacing: -7px;
        }
        .intro-highlight {
          border-left: 4px solid var(--viro-orange);
          padding-left: 25px;
          font-size: 21px;
          line-height: 1.5;
          font-weight: 700;
          color: var(--viro-teal-dark);
        }
        /* =========================================================
       MISSION / VISION
    ========================================================= */
        .mission-section {
          padding: 110px 0;
          background: var(--mint);
        }
        .mission-card {
          height: 100%;
          background: #fff;
          padding: 45px;
          border-radius: 18px;
          position: relative;
          overflow: hidden;
          box-shadow: var(--shadow-card);
          transition: 0.35s ease;
        }
        .mission-card:hover {
          transform: translateY(-8px);
        }
        .mission-card::after {
          content: "";
          position: absolute;
          width: 150px;
          height: 150px;
          right: -70px;
          bottom: -70px;
          border-radius: 50%;
          background: var(--light-teal);
        }
        .mission-icon {
          width: 64px;
          height: 64px;
          border-radius: 14px;
          background: var(--light-teal);
          color: var(--viro-teal);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          margin-bottom: 30px;
        }
        .mission-card:nth-child(2) .mission-icon {
          background: rgba(245, 130, 32, 0.12);
          color: var(--viro-orange);
        }
        .mission-card h3 {
          font-size: 30px;
          font-weight: 800;
          margin-bottom: 18px;
        }
        .mission-card p {
          color: var(--text-muted);
          font-size: 17px;
          line-height: 1.8;
          margin: 0;
          position: relative;
          z-index: 2;
        }
        /* =========================================================
       STRATEGY
    ========================================================= */
        .strategy-section {
          padding: 115px 0;
          background: var(--ivory);
        }
        .strategy-intro {
          margin-bottom: 65px;
        }
        .strategy-line {
          position: relative;
        }
        .strategy-line::before {
          content: "";
          position: absolute;
          left: 32px;
          top: 35px;
          bottom: 35px;
          width: 2px;
          background: rgba(8, 127, 140, 0.18);
        }
        .strategy-item {
          position: relative;
          display: flex;
          gap: 30px;
          margin-bottom: 40px;
        }
        .strategy-number {
          width: 65px;
          height: 65px;
          min-width: 65px;
          border-radius: 50%;
          background: var(--viro-teal);
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          font-weight: 800;
          position: relative;
          z-index: 2;
          box-shadow: 0 0 0 8px var(--ivory);
        }
        .strategy-item:nth-child(2) .strategy-number {
          background: var(--viro-orange);
        }
        .strategy-item:nth-child(3) .strategy-number {
          background: var(--viro-teal-dark);
        }
        .strategy-content {
          padding-top: 4px;
        }
        .strategy-content h3 {
          font-size: 25px;
          font-weight: 800;
          margin-bottom: 10px;
        }
        .strategy-content p {
          color: var(--text-muted);
          line-height: 1.7;
          margin: 0;
          max-width: 720px;
        }
        /* =========================================================
       VALUES
    ========================================================= */
        .values-section {
          padding: 110px 0;
          background: var(--light-blue);
        }
        .value-card {
          height: 100%;
          padding: 35px;
          background: #fff;
          border-radius: 16px;
          border: 1px solid rgba(8, 127, 140, 0.07);
          transition: 0.3s ease;
        }
        .value-card:hover {
          transform: translateY(-7px);
          box-shadow: var(--shadow-soft);
        }
        .value-icon {
          font-size: 30px;
          color: var(--viro-teal);
          margin-bottom: 20px;
        }
        .value-card:nth-child(even) .value-icon {
          color: var(--viro-orange);
        }
        .value-card h4 {
          font-size: 21px;
          font-weight: 800;
          margin-bottom: 10px;
        }
        .value-card p {
          color: var(--text-muted);
          line-height: 1.65;
          margin: 0;
        }
        /* =========================================================
       TEAM
    ========================================================= */
        .team-section {
          padding: 115px 0;
          background: var(--soft-green);
        }
        .team-card {
          background: #fff;
          border-radius: 18px;
          overflow: hidden;
          height: 100%;
          box-shadow: 0 12px 35px rgba(7, 59, 70, 0.07);
          transition: 0.35s ease;
        }
        .team-card:hover {
          transform: translateY(-8px);
          box-shadow: var(--shadow-card);
        }
        .team-image {
          height: 300px;
          background:
            linear-gradient(145deg, var(--light-teal), #fff);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
        }
        .team-image img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .team-placeholder {
          width: 110px;
          height: 110px;
          border-radius: 50%;
          background: rgba(8, 127, 140, 0.12);
          color: var(--viro-teal);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 55px;
        }
        .team-info {
          padding: 28px;
        }
        .team-info h4 {
          font-size: 21px;
          font-weight: 800;
          margin-bottom: 6px;
        }
        .team-role {
          color: var(--viro-orange);
          font-size: 13px;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 14px;
        }
        .team-info p {
          color: var(--text-muted);
          font-size: 14px;
          line-height: 1.65;
          margin: 0;
        }
        /* =========================================================
       TEAM INTRO STRIP
    ========================================================= */
        .leadership-strip {
          padding: 70px 0;
          background: var(--viro-teal-dark);
          color: #fff;
        }
        .leadership-strip h3 {
          font-size: 35px;
          font-weight: 800;
          margin-bottom: 12px;
        }
        .leadership-strip p {
          color: rgba(255, 255, 255, 0.7);
          margin: 0;
          line-height: 1.7;
        }
        /* =========================================================
       CTA
    ========================================================= */
        .about-cta {
          padding: 100px 0;
          background:
            radial-gradient(circle at 80% 30%, rgba(245, 130, 32, 0.20), transparent 25%), linear-gradient(135deg, var(--viro-teal), var(--viro-teal-dark));
          color: #fff;
          position: relative;
          overflow: hidden;
        }
        .about-cta::after {
          content: "";
          position: absolute;
          width: 500px;
          height: 500px;
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 50%;
          right: -200px;
          top: -200px;
        }
        .about-cta h2 {
          font-size: clamp(38px, 5vw, 60px);
          font-weight: 800;
          letter-spacing: -1px;
          margin-bottom: 20px;
        }
        .about-cta p {
          color: rgba(255, 255, 255, 0.75);
          font-size: 18px;
          line-height: 1.7;
          max-width: 700px;
          margin-bottom: 30px;
        }
        /* =========================================================
       ANIMATIONS
    ========================================================= */
        @keyframes heroFloat {
          0%, 100% {
            transform: translateY(0);
          }
          50% {
            transform: translateY(-15px);
          }
        }
        @keyframes orbitRotate {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }
        .reveal {
          opacity: 0;
          transform: translateY(30px);
          transition: 0.8s ease;
        }
        .reveal.visible {
          opacity: 1;
          transform: translateY(0);
        }
        /* =========================================================
       RESPONSIVE
    ========================================================= */
        @media (max-width: 991px) {
          .about-hero {
            min-height: auto;
            padding: 120px 0 80px;
          }
          .hero-visual {
            min-height: 450px;
            margin-top: 40px;
          }
          .section-intro, .mission-section, .strategy-section, .values-section, .team-section {
            padding: 80px 0;
          }
          .stat-one {
            right: 5%;
          }
          .stat-two {
            left: 5%;
          }
        }
        @media (max-width: 767px) {
          .navbar-brand img {
            height: 40px;
          }
          .about-hero h1 {
            font-size: 48px;
          }
          .hero-description {
            font-size: 16px;
          }
          .hero-orb {
            width: 260px;
            height: 260px;
          }
          .hero-brain {
            width: 140px;
            height: 140px;
          }
          .hero-stat {
            transform: scale(.85);
          }
          .mission-card {
            padding: 30px;
          }
          .strategy-item {
            gap: 18px;
          }
          .strategy-number {
            width: 52px;
            height: 52px;
            min-width: 52px;
          }
          .strategy-line::before {
            left: 25px;
          }
          .intro-number {
            font-size: 75px;
          }
          .team-image {
            height: 260px;
          }
        }
        @media (prefers-reduced-motion: reduce) {
          *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
          }
        }
        /* ========================================
       HERO
    ======================================== */
        .distributor-hero {
          position: relative;
          min-height: 72vh;
          overflow: hidden;
          color: #fff;
          background:
            radial-gradient(circle at 78% 45%, rgba(8, 127, 140, .45), transparent 30%), linear-gradient(135deg, #042F38, #073B46 55%, #087F8C);
        }
        .hero-grid {
          position: absolute;
          inset: 0;
          opacity: .1;
          background-image:
            linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
          background-size: 55px 55px;
        }
        .hero-content {
          position: relative;
          z-index: 3;
        }
        .hero-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          padding: 8px 15px;
          border: 1px solid rgba(255, 255, 255, .18);
          border-radius: 50px;
          background: rgba(255, 255, 255, .06);
          color: #D9FFFF;
          font-size: 13px;
          letter-spacing: 1.4px;
          text-transform: uppercase;
        }
        .hero-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #8FE6EA;
          box-shadow: 0 0 15px #8FE6EA;
        }
      
        .hero-title span {
          color: #8FE6EA;
        }
        
        /* ========================================
       NETWORK VISUAL
    ======================================== */
        .network-visual {
          position: relative;
          width: 500px;
          height: 500px;
          margin: auto;
        }
        .network-circle {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 280px;
          height: 280px;
          border-radius: 50%;
          background:
            radial-gradient(circle, rgba(143, 230, 234, .18), rgba(8, 127, 140, .05) 60%, transparent 72%);
          border: 1px solid rgba(143, 230, 234, .18);
          box-shadow:
            0 0 70px rgba(143, 230, 234, .18);
        }
        .network-core {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100px;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: var(--viro-orange);
          box-shadow:
            0 0 45px rgba(245, 130, 32, .4);
          z-index: 5;
        }
        .network-core i {
          font-size: 40px;
          color: #fff;
        }
        .network-node {
          position: absolute;
          width: 48px;
          height: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          background: rgba(255, 255, 255, .08);
          border: 1px solid rgba(143, 230, 234, .5);
          color: #8FE6EA;
          box-shadow:
            0 0 20px rgba(143, 230, 234, .15);
          animation: nodePulse 3s ease-in-out infinite;
        }
        .node-1 {
          top: 7%;
          left: 45%;
        }
        .node-2 {
          top: 25%;
          right: 9%;
        }
        .node-3 {
          top: 61%;
          right: 5%;
        }
        .node-4 {
          bottom: 8%;
          left: 43%;
        }
        .node-5 {
          bottom: 27%;
          left: 5%;
        }
        .node-6 {
          top: 27%;
          left: 8%;
        }
        .network-line {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 220px;
          height: 1px;
          transform-origin: left center;
          background:
            linear-gradient(90deg, rgba(143, 230, 234, .55), transparent);
          opacity: .5;
        }
        .line-1 {
          transform: rotate(-90deg);
        }
        .line-2 {
          transform: rotate(-35deg);
        }
        .line-3 {
          transform: rotate(35deg);
        }
        .line-4 {
          transform: rotate(90deg);
        }
        .line-5 {
          transform: rotate(145deg);
        }
        .line-6 {
          transform: rotate(215deg);
        }
        /* ========================================
       INTRO
    ======================================== */
        .intro-section {
          padding: 110px 0;
          background: #fff;
        }
        .section-description {
          max-width: 680px;
          margin-top: 20px;
          color: var(--text-muted);
          font-size: 17px;
          line-height: 1.75;
		
        }
        /* ========================================
       SEARCH
    ======================================== */
        .location-section {
          padding: 100px 0;
          background: var(--mint);
        }
        .search-box {
          position: relative;
          max-width: 620px;
          margin: 45px auto 65px;
        }
        .search-box input {
          width: 100%;
          padding: 17px 55px 17px 20px;
          border: 1px solid rgba(7, 59, 70, .12);
          border-radius: 10px;
          outline: none;
          background: #fff;
          color: var(--text-dark);
          box-shadow:
            0 10px 30px rgba(7, 59, 70, .05);
        }
        .search-box i {
          position: absolute;
          top: 50%;
          right: 20px;
          transform: translateY(-50%);
          color: var(--viro-teal);
          font-size: 20px;
        }
        /* ========================================
       CTA
    ======================================== */
        .network-cta {
          position: relative;
          padding: 100px 0;
          overflow: hidden;
          color: #fff;
          background:
            linear-gradient(135deg, var(--viro-teal-dark), var(--viro-teal));
        }
        .network-cta h2 {
          max-width: 700px;
          margin: auto;
          font-size: clamp(38px, 5vw, 62px);
          line-height: 1;
          letter-spacing: -2px;
        }
        .network-cta p {
          max-width: 620px;
          margin: 22px auto 32px;
          color: rgba(255, 255, 255, .7);
          line-height: 1.7;
        }
        /* ========================================
       LOCATION CARDS
    ======================================== */
        .location-card {
          height: 100%;
          padding: 28px;
          background: #fff;
          border: 1px solid rgba(7, 59, 70, .08);
          border-radius: 16px;
          transition: .35s ease;
          box-shadow:
            0 10px 30px rgba(7, 59, 70, .04);
        }
        .location-card:hover {
          transform: translateY(-7px);
          border-color: rgba(8, 127, 140, .25);
          box-shadow:
            0 20px 45px rgba(7, 59, 70, .1);
        }
        .location-icon {
          width: 52px;
          height: 52px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 22px;
          border-radius: 12px;
          background: var(--light-teal);
          color: var(--viro-teal);
          font-size: 22px;
        }
        .location-number {
          color: var(--viro-orange);
          font-size: 12px;
          font-weight: 700;
          letter-spacing: 1px;
        }
        .location-card h3 {
          margin: 7px 0 10px;
          color: var(--viro-teal-dark);
          font-size: 22px;
          font-weight: 700;
        }
        .location-card p {
          margin: 0;
          color: var(--text-muted);
          font-size: 14px;
          line-height: 1.6;
        }
        .location-link {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          margin-top: 20px;
          color: var(--viro-teal);
          font-size: 14px;
          font-weight: 600;
        }
        .location-link:hover {
          color: var(--viro-orange);
        }
        /* ========================================
       RESPONSIVE
    ======================================== */
        @media(max-width: 991px) {
          .hero-content {
            text-align: center;
            padding-top: 80px;
          }
          .hero-description {
            margin-left: auto;
            margin-right: auto;
          }
          .network-visual {
            margin-top: 50px;
            transform: scale(.85);
          }
        }
        @media(max-width: 575px) {
          .hero-title {
            font-size: 45px;
          }
          .network-visual {
            width: 360px;
            height: 360px;
            transform: scale(.78);
          }
          .location-section, .intro-section, .network-cta {
            padding: 75px 0;
          }
        }


        /* ========================================
       ANIMATION
    ======================================== */
        @keyframes nodePulse {
          0%, 100% {
            transform: scale(1);
            box-shadow:
              0 0 20px rgba(143, 230, 234, .15);
          }
          50% {
            transform: scale(1.12);
            box-shadow:
              0 0 30px rgba(143, 230, 234, .35);
          }
        }
        /* =========================================================
   HERO
========================================================= */
        .products-hero {
          position: relative;
          min-height: 68vh;
          display: flex;
          align-items: center;
          overflow: hidden;
          color: #fff;
          background:
            radial-gradient(circle at 80% 45%, rgba(8, 127, 140, .45), transparent 32%), linear-gradient(135deg, #042F38, #073B46 55%, #087F8C);
        }
        .hero-grid {
          position: absolute;
          inset: 0;
          opacity: .1;
          background-image:
            linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px);
          background-size: 55px 55px;
        }
        .hero-content {
          position: relative;
          z-index: 2;
        }
        .hero-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          padding: 8px 15px;
          border: 1px solid rgba(255, 255, 255, .18);
          border-radius: 50px;
          background: rgba(255, 255, 255, .06);
          color: #D9FFFF;
          font-size: 13px;
          letter-spacing: 1.5px;
          text-transform: uppercase;
        }
        .hero-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #8FE6EA;
          box-shadow: 0 0 15px #8FE6EA;
        }
       
        .hero-title span {
          color: #8FE6EA;
        }
    
        /* HERO VISUAL */
        .hero-product-visual {
          position: relative;
          width: 430px;
          height: 430px;
          margin: auto;
        }
        .hero-product-circle {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 320px;
          height: 320px;
          border-radius: 50%;
          background:
            radial-gradient(circle, rgba(143, 230, 234, .20), rgba(8, 127, 140, .04) 65%, transparent 70%);
          border: 1px solid rgba(143, 230, 234, .25);
          box-shadow: 0 0 80px rgba(143, 230, 234, .15);
        }
        .hero-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 130px;
          height: 130px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 35px;
          background: rgba(255, 255, 255, .09);
          border: 1px solid rgba(255, 255, 255, .2);
          backdrop-filter: blur(15px);
          box-shadow:
            0 25px 60px rgba(0, 0, 0, .2);
          color: #8FE6EA;
          font-size: 60px;
          animation: heroFloat 4s ease-in-out infinite;
        }
        .hero-ring {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 420px;
          height: 420px;
          transform: translate(-50%, -50%);
          border: 1px solid rgba(143, 230, 234, .15);
          border-radius: 50%;
          animation: rotateRing 25s linear infinite;
        }
        .hero-ring:before, .hero-ring:after {
          content: "";
          position: absolute;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          background: #8FE6EA;
          box-shadow: 0 0 18px #8FE6EA;
        }
        .hero-ring:before {
          top: 20px;
          left: 50%;
        }
        .hero-ring:after {
          bottom: 70px;
          right: 25px;
        }
        /* =========================================================
       FAQ HERO
    ========================================================= */
        .faq-hero {
          position: relative;
          min-height: 560px;
          display: flex;
          align-items: center;
          overflow: hidden;
          color: #fff;
          background:
            radial-gradient(circle at 85% 25%, rgba(245, 130, 32, 0.20), transparent 25%), radial-gradient(circle at 65% 85%, rgba(8, 127, 140, 0.35), transparent 35%), linear-gradient(135deg, var(--viro-teal-deep), var(--viro-teal-dark));
        }
        .faq-hero::before {
          content: "";
          position: absolute;
          inset: 0;
          opacity: 0.08;
          background-image:
            linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
          background-size: 50px 50px;
        }
        .faq-hero-content {
          position: relative;
          z-index: 2;
        }
        .hero-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          color: #A9E9EC;
          text-transform: uppercase;
          letter-spacing: 2.5px;
          font-size: 13px;
          font-weight: 700;
          margin-bottom: 20px;
        }
        .hero-eyebrow span {
          width: 35px;
          height: 2px;
          display: inline-block;
          background:
            var(--viro-orange);
        }
        .faq-hero h1 {
          font-size:
            clamp(48px, 6vw, 78px);
          line-height: 0.98;
          font-weight: 700;
          letter-spacing: -2px;
          margin-bottom: 25px;
        }
        .faq-hero h1 em {
          color: #8FE6EA;
          font-style: normal;
        }
        /* =========================================================
       HERO FAQ VISUAL
    ========================================================= */
        .faq-hero-visual {
          min-height: 430px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        }
        .faq-orb {
          width: 320px;
          height: 320px;
          border-radius: 50%;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          background:
            radial-gradient(circle, rgba(143, 230, 234, 0.20), rgba(8, 127, 140, 0.06) 50%, transparent 72%);
          border:
            1px solid rgba(143, 230, 234, 0.25);
          box-shadow:
            0 0 80px rgba(143, 230, 234, 0.13);
          animation:
            faqFloat 6s ease-in-out infinite;
        }
        .faq-orb::before, .faq-orb::after {
          content: "";
          position: absolute;
          border-radius: 50%;
          border:
            1px solid rgba(143, 230, 234, 0.18);
        }
        .faq-orb::before {
          inset: -35px;
          animation:
            faqRotate 18s linear infinite;
        }
        .faq-orb::after {
          inset: -70px;
          border-style: dashed;
          animation:
            faqRotate 25s linear infinite reverse;
        }
        .faq-visual-icon {
          width: 120px;
          height: 120px;
          border-radius: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          background:
            rgba(255, 255, 255, 0.08);
          border:
            1px solid rgba(255, 255, 255, 0.18);
          backdrop-filter:
            blur(15px);
          font-size: 58px;
          color: #A9E9EC;
          box-shadow:
            0 20px 50px rgba(0, 0, 0, 0.12);
        }
        .floating-question {
          position: absolute;
          background:
            rgba(255, 255, 255, 0.09);
          border:
            1px solid rgba(255, 255, 255, 0.18);
          backdrop-filter:
            blur(15px);
          border-radius: 14px;
          padding: 14px 18px;
          color: #fff;
          box-shadow:
            0 15px 35px rgba(0, 0, 0, 0.15);
        }
        .floating-question i {
          color: var(--viro-orange);
          margin-right: 8px;
        }
        .question-one {
          top: 16%;
          right: 0;
        }
        .question-two {
          bottom: 17%;
          left: 0;
        }
    
        /* =========================================================
       FAQ MAIN
    ========================================================= */
        .faq-main {
          padding:
            70px 0 110px;
          background:
            var(--mint);
        }
        .faq-layout {
          max-width: 1120px;
          margin:
            0 auto;
        }
        /* =========================================================
       CATEGORY
    ========================================================= */
        .faq-categories {
          position: sticky;
          top: 105px;
        }
        .category-title {
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: 1.8px;
          font-weight: 800;
          color:
            var(--text-muted);
          margin-bottom: 18px;
        }
        .category-list {
          background: #fff;
          border-radius: 14px;
          padding: 12px;
          box-shadow:
            var(--shadow-soft);
        }
        .category-btn {
          width: 100%;
          border: none;
          background: transparent;
          text-align: left;
          padding: 14px 16px;
          border-radius: 9px;
          color:
            var(--text-muted);
          font-weight: 700;
          transition: 0.3s ease;
        }
        .category-btn:hover {
          color:
            var(--viro-teal);
          background:
            var(--light-teal);
        }
        .category-btn.active {
          color: #fff;
          background:
            var(--viro-teal);
        }
        .category-btn i {
          margin-right: 10px;
        }
        /* =========================================================
       FAQ ACCORDION
    ========================================================= */
        .faq-heading {
          margin-bottom: 30px;
        }
        .faq-heading .eyebrow {
          color:
            var(--viro-teal);
          text-transform: uppercase;
          letter-spacing: 2px;
          font-size: 12px;
          font-weight: 800;
          margin-bottom: 10px;
        }
        .faq-heading h2 {
          font-size: 40px;
          font-weight: 800;
          letter-spacing: -1px;
          margin-bottom: 10px;
        }
        .faq-heading p {
          color:
            var(--text-muted);
          line-height: 1.7;
          margin: 0;
        }
        .faq-accordion {
          --bs-accordion-border-color:
            transparent;
        }
        .faq-accordion .accordion-item {
          border: none;
          background: #fff;
          border-radius: 14px !important;
          margin-bottom: 14px;
          overflow: hidden;
          box-shadow:
            0 8px 30px rgba(7, 59, 70, 0.06);
        }
        .faq-accordion .accordion-button {
          background: #fff;
          color:
            var(--text-dark);
          font-size: 17px;
          font-weight: 750;
          padding:
            22px 25px;
          box-shadow: none;
          line-height: 1.4;
        }
        .faq-accordion .accordion-button:not(.collapsed) {
          color:
            var(--viro-teal);
          background:
            #fff;
        }
        .faq-accordion .accordion-button::after {
          background-image: none;
          content: "+";
          font-size: 25px;
          font-weight: 400;
          color:
            var(--viro-teal);
          width: auto;
          height: auto;
          transition: 0.3s ease;
        }
        .faq-accordion .accordion-button:not(.collapsed)::after {
          content: "−";
          transform: none;
          color:
            var(--viro-orange);
        }
        .faq-accordion .accordion-body {
          color:
            var(--text-muted);
          font-size: 15px;
          line-height: 1.8;
          padding:
            0 25px 25px;
        }
        .faq-number {
          min-width: 38px;
          height: 38px;
          border-radius: 8px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          background:
            var(--light-teal);
          color:
            var(--viro-teal);
          font-size: 12px;
          font-weight: 800;
        }
        .accordion-button:not(.collapsed) .faq-number {
          background:
            rgba(245, 130, 32, 0.12);
          color:
            var(--viro-orange);
        }
        /* =========================================================
       NO RESULTS
    ========================================================= */
        .faq-no-results {
          display: none;
          padding: 50px 30px;
          background: #fff;
          border-radius: 15px;
          text-align: center;
          box-shadow:
            var(--shadow-soft);
        }
        .faq-no-results i {
          font-size: 45px;
          color:
            var(--viro-teal);
          margin-bottom: 15px;
        }
        /* =========================================================
       SUPPORT CTA
    ========================================================= */
        .support-section {
          padding: 90px 0;
          background:
            var(--ivory);
        }
        .support-card {
          background: #fff;
          border-radius: 20px;
          padding: 50px;
          box-shadow:
            var(--shadow-card);
          position: relative;
          overflow: hidden;
        }
        .support-card::after {
          content: "";
          position: absolute;
          width: 220px;
          height: 220px;
          right: -100px;
          bottom: -100px;
          border-radius: 50%;
          background:
            var(--light-teal);
        }
        .support-icon {
          width: 65px;
          height: 65px;
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          background:
            rgba(245, 130, 32, 0.12);
          color:
            var(--viro-orange);
          font-size: 28px;
          margin-bottom: 25px;
        }
        .support-card h2 {
          font-size: 38px;
          font-weight: 800;
          letter-spacing: -1px;
          margin-bottom: 15px;
        }
        .support-card p {
          color:
            var(--text-muted);
          font-size: 17px;
          line-height: 1.7;
          max-width: 650px;
          margin-bottom: 25px;
        }
        /* =========================================================
       FINAL CTA
    ========================================================= */
        .faq-cta {
          padding: 100px 0;
          color: #fff;
          position: relative;
          overflow: hidden;
          background:
            radial-gradient(circle at 80% 30%, rgba(245, 130, 32, 0.20), transparent 25%), linear-gradient(135deg, var(--viro-teal), var(--viro-teal-dark));
        }
        .faq-cta::after {
          content: "";
          position: absolute;
          width: 500px;
          height: 500px;
          border:
            1px solid rgba(255, 255, 255, 0.08);
          border-radius: 50%;
          right: -220px;
          top: -220px;
        }
        .faq-cta h2 {
          font-size:
            clamp(38px, 5vw, 60px);
          font-weight: 800;
          letter-spacing: -1px;
          margin-bottom: 20px;
        }
        .faq-cta p {
          max-width: 680px;
          color:
            rgba(255, 255, 255, 0.75);
          font-size: 18px;
          line-height: 1.7;
          margin-bottom: 30px;
        }
        /* =========================================================
       ANIMATIONS
    ========================================================= */
        @keyframes faqFloat {
          0%, 100% {
            transform:
              translateY(0);
          }
          50% {
            transform:
              translateY(-14px);
          }
        }
        @keyframes faqRotate {
          from {
            transform:
              rotate(0deg);
          }
          to {
            transform:
              rotate(360deg);
          }
        }
        .reveal {
          opacity: 0;
          transform:
            translateY(30px);
          transition:
            0.8s ease;
        }
        .reveal.visible {
          opacity: 1;
          transform:
            translateY(0);
        }
        /* =========================================================
       RESPONSIVE
    ========================================================= */
        @media (max-width: 991px) {
          .faq-hero {
            min-height: auto;
            padding:
              120px 0 80px;
          }
          .faq-hero-visual {
            min-height: 400px;
            margin-top: 30px;
          }
          .faq-categories {
            position: static;
            margin-bottom: 40px;
          }
        }
        @media (max-width: 767px) {
          .navbar-brand img {
            height: 40px;
          }
          .faq-hero h1 {
            font-size: 48px;
          }
          .hero-description {
            font-size: 16px;
          }
          .faq-orb {
            width: 250px;
            height: 250px;
          }
          .faq-visual-icon {
            width: 90px;
            height: 90px;
            font-size: 42px;
          }
          .floating-question {
            font-size: 12px;
          }
          .faq-heading h2 {
            font-size: 32px;
          }
          .faq-accordion .accordion-button {
            padding:
              18px;
          }
          .faq-number {
            min-width: 32px;
            height: 32px;
            margin-right: 10px;
          }
          .support-card {
            padding: 30px;
          }
          .support-card h2 {
            font-size: 31px;
          }
        }
        @media (prefers-reduced-motion: reduce) {
          *, *::before, *::after {
            animation-duration:
              0.01ms !important;
            animation-iteration-count:
              1 !important;
            transition-duration:
              0.01ms !important;
          }
        }

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

    .contact-hero {
      position: relative;

      min-height: 660px;

      display: flex;

      align-items: center;

      overflow: hidden;

      color: #fff;

      background:

        radial-gradient(
          circle at 82% 25%,
          rgba(245,130,32,0.20),
          transparent 26%
        ),

        radial-gradient(
          circle at 65% 85%,
          rgba(8,127,140,0.35),
          transparent 36%
        ),

        linear-gradient(
          135deg,
          var(--viro-teal-deep),
          var(--viro-teal-dark)
        );
    }


    .contact-hero::before {
      content: "";

      position: absolute;

      inset: 0;

      opacity: 0.08;

      background-image:

        linear-gradient(
          rgba(255,255,255,.5) 1px,
          transparent 1px
        ),

        linear-gradient(
          90deg,
          rgba(255,255,255,.5) 1px,
          transparent 1px
        );

      background-size:
        50px 50px;
    }


    .hero-content {
      position: relative;

      z-index: 2;
    }


    .hero-eyebrow {
      display: inline-flex;

      align-items: center;

      gap: 10px;

      color:
        #A9E9EC;

      text-transform:
        uppercase;

      letter-spacing:
        2.5px;

      font-size:
        13px;

      font-weight:
        700;

      margin-bottom:
        20px;
    }


    .hero-eyebrow span {
      width: 35px;

      height: 2px;

      display: inline-block;

      background:
        var(--viro-orange);
    }


    .contact-hero h1 {
      font-size:
        clamp(48px, 6vw, 78px);

      line-height:
        0.98;

      font-weight:
        700;

      letter-spacing:
        -2px;

      margin-bottom:
        25px;
    }


    .contact-hero h1 em {
      color:
        #8FE6EA;

      font-style:
        normal;
    }


    .hero-description {
      max-width:
        650px;

      color:
        rgba(255,255,255,0.76);

      font-size:
        18px;

      line-height:
        1.75;

      margin-bottom:
        30px;
    }

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

    .hero-visual {
      min-height:
        430px;

      display:
        flex;

      align-items:
        center;

      justify-content:
        center;

      position:
        relative;
    }


    .contact-orb {
      width:
        320px;

      height:
        320px;

      border-radius:
        50%;

      display:
        flex;

      align-items:
        center;

      justify-content:
        center;

      position:
        relative;

      background:

        radial-gradient(
          circle,
          rgba(143,230,234,0.20),
          rgba(8,127,140,0.06) 50%,
          transparent 72%
        );

      border:
        1px solid
        rgba(143,230,234,0.25);

      box-shadow:
        0 0 80px
        rgba(143,230,234,0.13);

      animation:
        orbFloat 6s ease-in-out infinite;
    }


    .contact-orb::before,
    .contact-orb::after {
      content:
        "";

      position:
        absolute;

      border-radius:
        50%;

      border:
        1px solid
        rgba(143,230,234,0.18);
    }


    .contact-orb::before {
      inset:
        -35px;

      animation:
        orbRotate 18s linear infinite;
    }


    .contact-orb::after {
      inset:
        -70px;

      border-style:
        dashed;

      animation:
        orbRotate 25s linear infinite reverse;
    }


    .contact-icon {
      width:
        125px;

      height:
        125px;

      border-radius:
        30px;

      display:
        flex;

      align-items:
        center;

      justify-content:
        center;

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

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

      backdrop-filter:
        blur(15px);

      color:
        #A9E9EC;

      font-size:
        58px;

      box-shadow:
        0 20px 50px
        rgba(0,0,0,0.12);
    }


    .floating-contact {
      position:
        absolute;

      padding:
        14px 18px;

      border-radius:
        13px;

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

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

      backdrop-filter:
        blur(15px);

      color:
        #fff;

      box-shadow:
        0 15px 35px
        rgba(0,0,0,0.15);

      font-size:
        14px;
    }


    .floating-contact i {
      color:
        var(--viro-orange);

      margin-right:
        8px;
    }


    .floating-one {
      top:
        16%;

      right:
        0;
    }


    .floating-two {
      bottom:
        16%;

      left:
        0;
    }


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

    .contact-main {
      padding:
        100px 0;

      background:
        var(--mint);
    }


    .section-eyebrow {
      color:
        var(--viro-teal);

      text-transform:
        uppercase;

      letter-spacing:
        2px;

      font-size:
        12px;

      font-weight:
        800;

      margin-bottom:
        12px;
    }


    .section-title {
      font-size:
        clamp(36px,4vw,54px);

      line-height:
        1.05;

      font-weight:
        800;

      letter-spacing:
        -1px;

      margin-bottom:
        20px;
    }


    .section-description {
      color:
        var(--text-muted);

      font-size:
        17px;

      line-height:
        1.8;
    }


    /* =========================================================
       CONTACT INFO CARDS
    ========================================================= */

    .contact-info-card {
      background:
        #fff;

      border-radius:
        16px;

      padding:
        28px;

      margin-bottom:
        18px;

      display:
        flex;

      gap:
        20px;

      align-items:
        flex-start;

      box-shadow:
        0 10px 35px
        rgba(7,59,70,0.06);

      transition:
        0.3s ease;
    }


    .contact-info-card:hover {
      transform:
        translateY(-5px);

      box-shadow:
        var(--shadow-card);
    }


    .contact-info-icon {
      width:
        55px;

      height:
        55px;

      min-width:
        55px;

      border-radius:
        12px;

      display:
        flex;

      align-items:
        center;

      justify-content:
        center;

      background:
        var(--light-teal);

      color:
        var(--viro-teal);

      font-size:
        23px;
    }


    .contact-info-card:nth-child(2)
    .contact-info-icon {
      background:
        rgba(245,130,32,0.12);

      color:
        var(--viro-orange);
    }


    .contact-info-card:nth-child(3)
    .contact-info-icon {
      background:
        var(--light-blue);

      color:
        var(--viro-teal-dark);
    }


    .contact-info-card h5 {
      font-size:
        17px;

      font-weight:
        800;

      margin-bottom:
        7px;
    }


    .contact-info-card p {
      margin:
        0;

      color:
        var(--text-muted);

      line-height:
        1.6;

      font-size:
        14px;
    }


    .contact-info-card a {
      color:
        var(--viro-teal);

      font-weight:
        700;
    }


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

    .contact-form-card {
      background:
        #fff;

      padding:
        45px;

      border-radius:
        20px;

      box-shadow:
        var(--shadow-card);
    }


    .contact-form-card h3 {
      font-size:
        30px;

      font-weight:
        800;

      margin-bottom:
        8px;
    }


    .form-intro {
      color:
        var(--text-muted);

      line-height:
        1.7;

      margin-bottom:
        30px;
    }


    .form-label {
      font-size:
        13px;

      font-weight:
        750;

      color:
        var(--text-dark);

      margin-bottom:
        8px;
    }


    .form-control,
    .form-select {
      border:
        1px solid #D9E7E9;

      border-radius:
        9px;

      padding:
        14px 15px;

      font-size:
        15px;

      color:
        var(--text-dark);

      box-shadow:
        none;

      transition:
        0.3s ease;
    }


    .form-control:focus,
    .form-select:focus {
      border-color:
        var(--viro-teal);

      box-shadow:
        0 0 0 3px
        rgba(8,127,140,0.08);
    }


    textarea.form-control {
      min-height:
        145px;

      resize:
        vertical;
    }


    .form-check-input:checked {
      background-color:
        var(--viro-teal);

      border-color:
        var(--viro-teal);
    }


    .form-note {
      color:
        var(--text-muted);

      font-size:
        12px;

      line-height:
        1.5;

      margin-top:
        12px;
    }


    .form-success {
      display:
        none;

      padding:
        15px 18px;

      background:
        var(--light-teal);

      border-radius:
        10px;

      color:
        var(--viro-teal-dark);

      font-weight:
        700;

      margin-bottom:
        20px;
    }


    /* =========================================================
       ENQUIRY TYPES
    ========================================================= */

    .enquiry-section {
      padding:
        100px 0;

      background:
        #fff;
    }


    .enquiry-card {
      height:
        100%;

      padding:
        35px;

      border-radius:
        16px;

      background:
        var(--light-teal);

      transition:
        0.3s ease;
    }


    .enquiry-card:hover {
      transform:
        translateY(-7px);

      box-shadow:
        var(--shadow-soft);
    }


    .enquiry-card:nth-child(2) {
      background:
        var(--ivory);
    }


    .enquiry-card:nth-child(3) {
      background:
        var(--light-blue);
    }


    .enquiry-card:nth-child(4) {
      background:
        var(--soft-green);
    }


    .enquiry-icon {
      font-size:
        30px;

      color:
        var(--viro-teal);

      margin-bottom:
        20px;
    }


    .enquiry-card:nth-child(2)
    .enquiry-icon {
      color:
        var(--viro-orange);
    }


    .enquiry-card h4 {
      font-size:
        21px;

      font-weight:
        800;

      margin-bottom:
        10px;
    }


    .enquiry-card p {
      color:
        var(--text-muted);

      line-height:
        1.65;

      margin:
        0;
    }


    /* =========================================================
       MAP / LOCATION
    ========================================================= */

    .location-section {
      padding:
        100px 0;

      background:
        var(--viro-teal-dark);

      color:
        #fff;
    }


    .location-section .section-eyebrow {
      color:
        #A9E9EC;
    }

   .location-section h2 {

      color:#fff;
    }


    .location-section .section-description {
      color:
        rgba(255,255,255,0.68);
    }


    .location-card {
      min-height:
        320px;

      border-radius:
        20px;

      position:
        relative;

      overflow:
        hidden;

      background:

        radial-gradient(
          circle at 25% 25%,
          rgba(143,230,234,0.15),
          transparent 30%
        ),

        linear-gradient(
          145deg,
          #0A5965,
          #042F38
        );

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

      display:
        flex;

      align-items:
        center;

      justify-content:
        center;
    }


    .map-grid {
      position:
        absolute;

      inset:
        0;

      opacity:
        0.15;

      background-image:

        linear-gradient(
          rgba(255,255,255,0.4) 1px,
          transparent 1px
        ),

        linear-gradient(
          90deg,
          rgba(255,255,255,0.4) 1px,
          transparent 1px
        );

      background-size:
        35px 35px;
    }


    .map-pin {
      position:
        relative;

      z-index:
        2;

      width:
        85px;

      height:
        85px;

      border-radius:
        50%;

      display:
        flex;

      align-items:
        center;

      justify-content:
        center;

      background:
        var(--viro-orange);

      color:
        #fff;

      font-size:
        35px;

      box-shadow:
        0 0 0 15px
        rgba(245,130,32,0.12),

        0 0 0 30px
        rgba(245,130,32,0.05);
    }


    .location-details {
      margin-top:
        25px;
    }


    .location-details h4 {
      font-size:
        23px;

      font-weight:
        800;

      margin-bottom:
        8px;
    }


    .location-details p {
      color:
        rgba(255,255,255,0.68);

      line-height:
        1.7;

      margin:
        0;
    }

  /* =========================================================
       FINAL CTA
    ========================================================= */

    .contact-cta {
      padding:
        100px 0;

      color:
        #fff;

      position:
        relative;

      overflow:
        hidden;

      background:

        radial-gradient(
          circle at 80% 30%,
          rgba(245,130,32,0.20),
          transparent 25%
        ),

        linear-gradient(
          135deg,
          var(--viro-teal),
          var(--viro-teal-dark)
        );
    }


    .contact-cta::after {
      content:
        "";

      position:
        absolute;

      width:
        500px;

      height:
        500px;

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

      border-radius:
        50%;

      right:
        -220px;

      top:
        -220px;
    }


    .contact-cta h2 {
      font-size:
        clamp(38px,5vw,60px);

      font-weight:
        800;

      letter-spacing:
        -1px;

      margin-bottom:
        20px;
    }


    .contact-cta p {
      max-width:
        680px;

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

      font-size:
        18px;

      line-height:
        1.7;

      margin-bottom:
        30px;
    }
 /* =========================================================
       ANIMATIONS
    ========================================================= */

    @keyframes orbFloat {

      0%, 100% {
        transform:
          translateY(0);
      }

      50% {
        transform:
          translateY(-14px);
      }
    }


    @keyframes orbRotate {

      from {
        transform:
          rotate(0deg);
      }

      to {
        transform:
          rotate(360deg);
      }
    }


    .reveal {
      opacity:
        0;

      transform:
        translateY(30px);

      transition:
        0.8s ease;
    }


    .reveal.visible {
      opacity:
        1;

      transform:
        translateY(0);
    }


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

    @media (max-width: 991px) {

      .contact-hero {
        min-height:
          auto;

        padding:
          120px 0 80px;
      }


      .hero-visual {
        min-height:
          400px;

        margin-top:
          30px;
      }


      .contact-main,
      .enquiry-section,
      .location-section {
        padding:
          80px 0;
      }

    }


    @media (max-width: 767px) {

      .navbar-brand img {
        height:
          40px;
      }


      .contact-hero h1 {
        font-size:
          48px;
      }


      .hero-description {
        font-size:
          16px;
      }


      .contact-orb {
        width:
          250px;

        height:
          250px;
      }


      .contact-icon {
        width:
          90px;

        height:
          90px;

        font-size:
          42px;
      }


      .floating-contact {
        font-size:
          12px;
      }


      .contact-form-card {
        padding:
          30px;
      }


      .contact-form-card h3 {
        font-size:
          26px;
      }

    }


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

      *,
      *::before {
        animation-duration:
          0.01ms !important;

        animation-iteration-count:
          1 !important;

        transition-duration:
          0.01ms !important;
      }

    }



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

.products-hero{
position:relative;
min-height: 720px;

  display:flex;
  align-items:center;

  overflow:hidden;

  color:#fff;

  background:
    radial-gradient(
      circle at 80% 45%,
      rgba(8,127,140,.45),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #042F38,
      #073B46 55%,
      #087F8C
    );
}

.hero-grid{
  position:absolute;
  inset:0;

  opacity:.1;

  background-image:
    linear-gradient(
      rgba(255,255,255,.14) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.14) 1px,
      transparent 1px
    );

  background-size:55px 55px;
}

.hero-content{
  position:relative;
  z-index:2;
}

.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;

  padding:8px 15px;

  border:1px solid rgba(255,255,255,.18);
  border-radius:50px;

  background:rgba(255,255,255,.06);

  color:#D9FFFF;

  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.hero-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:#8FE6EA;
  box-shadow:0 0 15px #8FE6EA;
}

.hero-title{
  max-width:780px;

  margin:20px 0 0;

  font-size:clamp(48px,6vw,78px);

  line-height:.98;

  letter-spacing:-3px;

  font-weight:700;
}

.hero-title span{
  color:#8FE6EA;
}

.hero-description{
  max-width:680px;

  margin:28px 0;

  color:rgba(255,255,255,.72);

  font-size:18px;
  line-height:1.7;
}


/* HERO VISUAL */

.hero-product-visual{
  position:relative;

  width:430px;
  height:430px;

  margin:auto;
}

.hero-product-circle{
  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  width:320px;
  height:320px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(143,230,234,.20),
      rgba(8,127,140,.04) 65%,
      transparent 70%
    );

  border:1px solid rgba(143,230,234,.25);

  box-shadow:0 0 80px rgba(143,230,234,.15);
}

.hero-icon{
  position:absolute;

  top:50%;
  left:50%;

  transform:translate(-50%,-50%);

  width:130px;
  height:130px;

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

  border-radius:35px;

  background:rgba(255,255,255,.09);

  border:1px solid rgba(255,255,255,.2);

  backdrop-filter:blur(15px);

  box-shadow:
    0 25px 60px rgba(0,0,0,.2);

  color:#8FE6EA;

  font-size:60px;

  animation:heroFloat 4s ease-in-out infinite;
}

.hero-ring{
  position:absolute;

  top:50%;
  left:50%;

  width:420px;
  height:420px;

  transform:translate(-50%,-50%);

  border:1px solid rgba(143,230,234,.15);

  border-radius:50%;

  animation:rotateRing 25s linear infinite;
}

.hero-ring:before,
.hero-ring:after{
  content:"";

  position:absolute;

  width:9px;
  height:9px;

  border-radius:50%;

  background:#8FE6EA;

  box-shadow:0 0 18px #8FE6EA;
}

.hero-ring:before{
  top:20px;
  left:50%;
}

.hero-ring:after{
  bottom:70px;
  right:25px;
}


/* =========================================================
   PRODUCT SECTION
========================================================= */

.products-section{
  padding:110px 0;

  background:var(--mint);
}

.section-eyebrow{
  color:var(--viro-orange);

  font-size:13px;
  font-weight:700;

  letter-spacing:1.8px;

  text-transform:uppercase;
}

.section-title{
  margin-top:12px;

  color:var(--viro-teal-dark);

  font-size:clamp(36px,4vw,56px);

  line-height:1.05;

  letter-spacing:-1.8px;

  font-weight:700;
}

.section-description{
  max-width:700px;

  margin:20px auto 0;

  color:var(--muted);

  font-size:17px;

  line-height:1.75;
}


/* =========================================================
   PRODUCT CARDS
========================================================= */

.product-card{
  position:relative;

  height:100%;

  padding:30px;

  border-radius:18px;

  background:#fff;

  border:1px solid rgba(7,59,70,.08);

  box-shadow:
    0 12px 35px rgba(7,59,70,.05);

  transition:.4s ease;

  overflow:hidden;
}

.product-card:before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:4px;

  background:linear-gradient(
    90deg,
    var(--viro-teal),
    var(--viro-orange)
  );

  transform:scaleX(0);

  transform-origin:left;

  transition:.4s ease;
}

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

  box-shadow:
    0 25px 60px rgba(7,59,70,.12);

  border-color:rgba(8,127,140,.18);
}

.product-card:hover:before{
  transform:scaleX(1);
}


.product-icon{
  width:70px;
  height:70px;

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

  margin-bottom:25px;

  border-radius:18px;

  background:var(--light-teal);

  color:var(--viro-teal);

  font-size:30px;

  transition:.3s ease;
}

.product-card:hover .product-icon{
  background:var(--viro-teal);

  color:#fff;

  transform:scale(1.05);
}


.product-code{
  color:var(--viro-orange);

  font-size:11px;

  font-weight:700;

  letter-spacing:1.5px;
}


.product-card h3{
  margin:8px 0 12px;

  color:var(--viro-teal-dark);

  font-size:28px;

  font-weight:700;
}


.product-category{
  display:inline-block;

  padding:6px 11px;

  border-radius:50px;

  background:var(--soft-green);

  color:var(--viro-teal);

  font-size:11px;

  font-weight:700;

  margin-bottom:15px;
}


.product-card p{
  min-height:70px;

  margin:0;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}


.product-button{
  display:flex;

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

  margin-top:25px;

  padding-top:20px;

  border-top:1px solid rgba(7,59,70,.08);

  color:var(--viro-teal);

  font-size:14px;

  font-weight:700;

  cursor:pointer;
}

.product-button i{
  transition:.3s ease;
}

.product-card:hover .product-button i{
  transform:translateX(5px);
}


/* =========================================================
   MODAL / LIGHTBOX
========================================================= */

.product-modal .modal-dialog{
  max-width:1050px;
}

.product-modal .modal-content{
  border:0;

  border-radius:20px;

  overflow:hidden;

  box-shadow:
    0 40px 100px rgba(0,0,0,.25);
}


.product-modal .modal-header{
  padding:22px 28px;

  border:0;

  background:var(--viro-teal-dark);

  color:#fff;
}


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

  opacity:.8;
}


.modal-product-image{
  min-height:100%;

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

  padding:45px;

  background:
    radial-gradient(
      circle at center,
      #ffffff,
      var(--light-teal)
    );
}


.product-placeholder{
  width:260px;
  height:330px;

  display:flex;
  flex-direction:column;

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

  border-radius:18px;

  background:#fff;

  border:1px solid rgba(7,59,70,.08);


  box-shadow:
    0 25px 60px rgba(7,59,70,.12);
}


.product-placeholder i{
  margin-bottom:20px;

  color:var(--viro-teal);

  font-size:75px;
}


.product-placeholder strong{
  color:var(--viro-teal-dark);

  font-size:30px;
}


.modal-product-content{
  padding:45px;
}


.modal-product-code{
  color:var(--viro-orange);

  font-size:12px;

  font-weight:700;

  letter-spacing:1.5px;

  text-transform:uppercase;
}


.modal-product-title{
  margin:8px 0 12px;

  color:var(--viro-teal-dark);

  font-size:42px;

  font-weight:700;

  letter-spacing:-1px;
}


.modal-category{
  display:inline-block;

  padding:7px 12px;

  margin-bottom:25px;

  border-radius:50px;

  background:var(--light-teal);

  color:var(--viro-teal);

  font-size:12px;

  font-weight:700;
}


.detail-heading{
  margin:25px 0 8px;

  color:var(--viro-teal-dark);

  font-size:16px;

  font-weight:700;
}


.detail-text{
  margin:0;

  color:var(--muted);

  font-size:14px;

  line-height:1.7;
}


.detail-list{
  margin:0;
  padding-left:20px;

  color:var(--muted);

  font-size:14px;

  line-height:1.8;
}


.product-meta{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:12px;

  margin-top:25px;
}


.meta-box{
  padding:15px;

  border-radius:10px;

  background:var(--mint);
}


.meta-box small{
  display:block;

  color:var(--muted);

  font-size:11px;

  margin-bottom:4px;
}


.meta-box strong{
  color:var(--viro-teal-dark);

  font-size:14px;
}


/* =========================================================
   CTA
========================================================= */

.product-cta{
  padding:100px 0;

  background:
    linear-gradient(
      135deg,
      var(--viro-teal-dark),
      var(--viro-teal)
    );

  color:#fff;
}

.product-cta h2{
  max-width:720px;

  margin:auto;

  font-size:clamp(38px,5vw,60px);

  line-height:1;

  letter-spacing:-2px;
}

.product-cta p{
  max-width:650px;

  margin:22px auto 32px;

  color:rgba(255,255,255,.7);

  line-height:1.7;
}


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

@media(max-width:991px){

  .hero-content{
    text-align:center;
    padding-top:80px;
  }

  .hero-description{
    margin-left:auto;
    margin-right:auto;
  }

  .hero-product-visual{
    margin-top:50px;

    transform:scale(.8);
  }

}

@media(max-width:575px){

  .products-section{
    padding:75px 0;
  }

  .hero-title{
    font-size:45px;
  }

  .hero-product-visual{
    width:350px;
    height:350px;
  }

  .modal-product-content{
    padding:28px;
  }

  .modal-product-title{
    font-size:34px;
  }

  .product-meta{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroFloat{
  0%,100%{
    transform:translate(-50%,-50%);
  }

  50%{
    transform:translate(-50%,-58%);
  }
}

@keyframes rotateRing{
  from{
    transform:translate(-50%,-50%) rotate(0);
  }

  to{
    transform:translate(-50%,-50%) rotate(360deg);
  }
}