:root{
  --gold:#f7b719;
  --gold-hot:#fff2b0;
  --gold-mid:#ffcd45;
  --ink:#02070d;
  --navy:#03131d;
  --white:#f5f7fa;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:#020509;
  color:var(--white);
  font-family:'Poppins',sans-serif;
}

body{overflow-x:hidden}

/* ==========================================================
   NEXABEE CINEMATIC INTRO
   ========================================================== */
#intro-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(8,31,44,.50) 0%, rgba(3,14,22,.36) 28%, rgba(1,6,10,.86) 68%, #010408 100%),
    linear-gradient(180deg,#03101a 0%,#02080e 58%,#010409 100%);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 850ms cubic-bezier(.22,.61,.36,1),
             visibility 0s linear 850ms;
}

#intro-screen.intro-complete{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.intro-stage{
  position:absolute;
  inset:0;
  isolation:isolate;
}

/* soft atmospheric depth */
.intro-ambient,
.intro-haze,
.floor-glow,
.bee-floor-light{
  position:absolute;
  pointer-events:none;
}

.intro-ambient-a{
  width:min(64vw,1100px);
  height:min(64vw,1100px);
  left:50%;
  top:45%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(8,42,59,.22) 0%,
    rgba(5,24,35,.10) 38%,
    transparent 72%);
  filter:blur(28px);
}

.intro-ambient-b{
  width:min(70vw,1200px);
  height:30vw;
  left:50%;
  bottom:-10vw;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,
    rgba(255,184,25,.11) 0%,
    rgba(160,90,0,.045) 32%,
    transparent 72%);
  filter:blur(48px);
}

.intro-haze{
  left:50%;
  top:80%;
  width:min(900px,70vw);
  height:90px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(255,188,32,.16),rgba(255,173,10,.035) 44%,transparent 76%);
  filter:blur(22px);
  opacity:0;
  transition:opacity 1000ms ease;
}

.intro-haze.visible{opacity:1}

.intro-noise{
  position:absolute;
  inset:-8%;
  opacity:.045;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.8) .45px,transparent .55px),
    radial-gradient(rgba(255,255,255,.45) .4px,transparent .5px);
  background-size:5px 5px,9px 9px;
  background-position:0 0,2px 3px;
  mix-blend-mode:screen;
}

.intro-stars{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.star{
  position:absolute;
  width:1px;
  height:1px;
  border-radius:50%;
  background:rgba(255,211,108,.78);
  box-shadow:0 0 6px rgba(255,188,29,.45);
  opacity:var(--opacity);
  animation:starFloat var(--dur) ease-in-out infinite alternate;
}

@keyframes starFloat{
  from{transform:translate3d(0,0,0) scale(.7)}
  to{transform:translate3d(var(--dx),var(--dy),0) scale(1.5)}
}

/* ==========================================================
   LOGO — sized to closely match the supplied reference
   ========================================================== */
.intro-logo{
  position:absolute;
  z-index:10;
  left:50%;
  top:61%;
  width:min(36vw,600px);
  height:auto;
  transform:translate(-50%,-50%);
  user-select:none;
  pointer-events:none;
  object-fit:contain;
  will-change:opacity,filter;
}

/* The logo is revealed in two deliberate stages: NEXA first, then BEE. */
.intro-logo-part{
  opacity:0;
  filter:drop-shadow(0 0 4px rgba(255,189,33,.03));
  transition:opacity 650ms cubic-bezier(.22,.61,.36,1),filter 800ms ease;
}

/* Approximate exact wordmark divisions in the supplied 2048px logo canvas. */
.intro-logo-nexa{
  z-index:9;
  clip-path:inset(0 42.8% 0 0);
}

.intro-logo-nexa.nexa-visible{
  opacity:.82;
  filter:drop-shadow(0 0 14px rgba(255,183,26,.08));
}

.intro-logo-bee{
  z-index:10;
  clip-path:inset(0 0 0 56.4%);
  transition-delay:80ms;
}

.intro-logo-bee.bee-target-visible{
  opacity:.82;
  filter:drop-shadow(0 0 14px rgba(255,183,26,.09));
}

.intro-logo-dark{
  z-index:11;
  opacity:0;
  filter:drop-shadow(0 0 4px rgba(255,189,33,.04));
  transition:opacity 650ms ease,filter 800ms ease;
}

.intro-logo-dark.logo-emerging{
  opacity:.82;
  filter:drop-shadow(0 0 14px rgba(255,183,26,.10));
}

.intro-logo-final{
  z-index:12;
  opacity:0;
  filter:brightness(1) drop-shadow(0 0 0 rgba(255,190,24,0));
  transition:opacity 520ms cubic-bezier(.22,.61,.36,1),filter 700ms ease;
}

.intro-logo-final.logo-final-visible{
  opacity:1;
  filter:drop-shadow(0 0 12px rgba(255,192,31,.16))
    drop-shadow(0 0 28px rgba(255,182,18,.07));
}

/* ==========================================================
   INITIAL BEE
   ========================================================== */
.flying-bee{
  position:absolute;
  z-index:24;
  left:50%;
  top:30%;
  width:min(15vw,220px);
  height:auto;
  transform:translate(-50%,-50%) scale(.12) rotate(0deg);
  transform-origin:center center;
  opacity:0;
  pointer-events:none;
  user-select:none;
  filter:
    drop-shadow(0 0 4px rgba(255,196,41,.72))
    drop-shadow(0 0 16px rgba(255,175,16,.36));
  will-change:left,top,transform,opacity;
}

.flying-bee.bee-visible{
  opacity:1;
}

.bee-floor-light{
  z-index:4;
  left:50%;
  top:39%;
  width:170px;
  height:30px;
  transform:translate(-50%,-50%) scaleX(.15);
  border-radius:50%;
  background:radial-gradient(ellipse,
    rgba(255,225,139,.98) 0%,
    rgba(255,189,35,.58) 20%,
    rgba(255,174,20,.12) 52%,
    transparent 74%);
  filter:blur(4px);
  opacity:0;
  transition:opacity 700ms ease,transform 850ms cubic-bezier(.22,.61,.36,1);
}

.bee-floor-light.active{
  opacity:1;
  transform:translate(-50%,-50%) scaleX(1);
}

/* ==========================================================
   FLIGHT TRAIL
   ========================================================== */
.flight-svg{
  position:absolute;
  inset:0;
  z-index:18;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
}

.trail{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0;
}

.trail-blurred{
  stroke:rgba(255,172,18,.60);
  stroke-width:14;
  filter:url(#trail-blur);
}

.trail-main{
  stroke:url(#trail-gradient);
  stroke-width:2.4;
  filter:url(#trail-soft);
}

.trail.is-flying{opacity:1}

.trail-main.is-flying{
  filter:
    url(#trail-soft)
    drop-shadow(0 0 7px rgba(255,194,38,.46));
}

/* tiny particles along the trajectory */
.flight-particle{
  position:absolute;
  z-index:19;
  width:2px;
  height:2px;
  margin:-1px 0 0 -1px;
  border-radius:50%;
  background:#ffd56a;
  box-shadow:0 0 7px rgba(255,194,34,.72);
  pointer-events:none;
  opacity:0;
  will-change:transform,opacity;
}

@keyframes particlePop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(0)}
}

/* ==========================================================
   IMPACT
   ========================================================== */
.logo-impact{
  position:absolute;
  z-index:30;
  left:50%;
  top:61%;
  width:160px;
  height:160px;
  transform:translate(-50%,-50%) scale(.15);
  pointer-events:none;
  opacity:0;
}

.logo-impact.active{
  animation:impactFlash 850ms cubic-bezier(.18,.68,.28,1) forwards;
}

.impact-core,
.impact-ring{
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.impact-core{
  width:30px;
  height:30px;
  background:radial-gradient(circle,rgba(255,255,235,.95) 0%,rgba(255,210,72,.65) 28%,rgba(255,184,21,0) 72%);
  filter:blur(2px);
}

.impact-ring{
  border:1px solid rgba(255,205,78,.72);
  box-shadow:0 0 18px rgba(255,187,23,.20);
}

.impact-ring-1{width:70px;height:70px}
.impact-ring-2{width:112px;height:112px}

@keyframes impactFlash{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18)}
  12%{opacity:1}
  32%{opacity:1;transform:translate(-50%,-50%) scale(.95)}
  65%{opacity:.62}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.45)}
}

/* ==========================================================
   LOWER GLOW / TAGLINE / LOADING
   ========================================================== */
.floor-glow{
  z-index:2;
  left:50%;
  top:80.5%;
  width:min(900px,72vw);
  height:72px;
  transform:translate(-50%,-50%) scaleX(.42);
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255,237,163,.96) 0%,
      rgba(255,198,43,.60) 5%,
      rgba(255,176,17,.20) 18%,
      rgba(255,160,0,.05) 42%,
      transparent 75%);
  filter:blur(4px);
  opacity:0;
  transition:opacity 1000ms ease,transform 1200ms cubic-bezier(.22,.61,.36,1);
}

.floor-glow::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(255,193,40,.08) 17%,
    rgba(255,211,88,.64) 44%,
    rgba(255,245,186,.95) 50%,
    rgba(255,211,88,.64) 56%,
    rgba(255,193,40,.08) 83%,
    transparent 100%);
  box-shadow:0 0 12px rgba(255,188,30,.32);
}

.floor-glow.visible{
  opacity:1;
  transform:translate(-50%,-50%) scaleX(1);
}

.intro-tagline{
  position:absolute;
  z-index:34;
  left:50%;
  top:72.1%;
  transform:translate(-50%,10px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  width:max-content;
  max-width:90vw;
  color:rgba(239,243,247,.86);
  font-size:clamp(10px,.78vw,13px);
  font-weight:500;
  letter-spacing:.48em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  transition:opacity 800ms ease,transform 800ms cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

.intro-tagline i{
  font-style:normal;
  opacity:.56;
}

.intro-tagline.visible{
  opacity:1;
  transform:translate(-50%,0);
}

.loading-area{
  position:absolute;
  z-index:35;
  left:50%;
  top:85.35%;
  width:min(420px,42vw);
  transform:translate(-50%,12px);
  opacity:0;
  transition:opacity 750ms ease,transform 750ms cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

.loading-area.visible{
  opacity:1;
  transform:translate(-50%,0);
}

.loading-bar-shell{
  width:100%;
  padding:2px;
  border:1px solid rgba(132,155,173,.68);
  border-radius:999px;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.34),
    0 0 5px rgba(183,206,220,.06);
}

.loading-bar-track{
  position:relative;
  width:100%;
  height:7px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(7,18,28,.78);
}

.loading-progress{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg,#f1a600 0%,#ffca26 58%,#ffe790 100%);
  box-shadow:
    0 0 7px rgba(255,191,29,.80),
    0 0 18px rgba(255,174,16,.36);
}

.loading-text{
  margin-top:17px;
  text-align:center;
  color:rgba(246,248,250,.92);
  font-size:clamp(9px,.72vw,12px);
  font-weight:500;
  letter-spacing:.52em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* ==========================================================
   DEMO PAGE ONLY
   ========================================================== */
#website-home{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% 18%,rgba(13,43,58,.36),transparent 52%),
    #07101a;
}

.demo-hero{
  min-height:100vh;
  display:grid;
  place-items:center;
  align-content:center;
  gap:18px;
  text-align:center;
  padding:60px 20px;
}

.demo-logo{width:min(420px,80vw);height:auto}
.demo-hero h1{margin:0;font-size:clamp(32px,5vw,72px)}
.demo-hero p{margin:0;color:#aebcc7}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:900px){
  .intro-logo{width:min(72vw,560px);top:56%}
  .intro-tagline{top:68%;font-size:9px;letter-spacing:.34em;gap:12px}
  .floor-glow{top:77%}
  .loading-area{top:82%;width:min(360px,70vw)}
  .bee-floor-light{top:34%;width:130px}
  .flying-bee{width:min(25vw,190px);top:30%}
}

@media (max-width:560px){
  .intro-logo{width:86vw;top:51%}
  .intro-tagline{top:62%;font-size:8px;letter-spacing:.25em}
  .floor-glow{top:71%;width:100vw}
  .loading-area{top:77%;width:76vw}
  .loading-track{height:6px}
}

/* keep motion usable for accessibility */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:1ms !important;
  }
}


/* ===== MERGED NEXABEE WEBSITE STYLES ===== */
/* ==============================
   BASIC RESET
============================== */

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

body {
    font-family:'Poppins',sans-serif;
    color: #17202a;
    background: #ffffff;
    line-height: 1.6;
}
/* ==============================
   HEADER
============================== */

header {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 22px 30px;

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

.logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #123b5d;
}

.nav-links {
    display: flex;
    gap: 35px;
    list-style: none;
}

.nav-links a {
    color: #34495e;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;

    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #0b6e99;
}
/* ==============================
   HERO SECTION
============================== */

.hero {
    min-height: 650px;

    display: flex;
    align-items: center;

    background: #0b1f2c;
    color: #ffffff;
}

.hero-content {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;

    padding: 100px 30px;
}

.hero .eyebrow {
    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #6bb6d6;
}

.hero h1 {
    max-width: 800px;

    margin-bottom: 30px;

    font-size: clamp(45px, 6vw, 76px);
    line-height: 1.05;
    letter-spacing: -2px;
}

.hero h1 span {
    display: block;
    color: #8cc7df;
}

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

    margin-bottom: 40px;

    font-size: 19px;
    color: #d5e0e7;
}/* ==============================
   HERO BUTTONS
============================== */

.hero-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 14px 26px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 700;

    transition: all 0.25s ease;
}

.btn.primary {
    background: #ffffff;
    color: #123b5d;
}

.btn.primary:hover {
    background: #8cc7df;
    color: #0b1f2c;
}

.btn.secondary {
    border: 1px solid #8cc7df;
    color: #ffffff;
}

.btn.secondary:hover {
    background: #8cc7df;
    color: #0b1f2c;
}
/* ==============================
   SERVICES SECTION
============================== */

.services {
    max-width: 1200px;
    margin: 0 auto;
    padding: 110px 30px;
}

.section-heading {
    max-width: 700px;
    margin-bottom: 60px;
}

.section-heading h2 {
    font-size: 44px;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #17202a;
}

.section-heading > p:last-child {
    color: #64748b;
    font-size: 17px;
}


/* ==============================
   SERVICE CARDS
============================== */

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.service-card {
    padding: 40px 32px;

    border: 1px solid #e1e7eb;
    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.service-card:hover {
    transform: translateY(-6px);

    border-color: #b9d7e5;

    box-shadow: 0 15px 40px rgba(20, 50, 70, 0.10);
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 22px;
    color: #123b5d;
}

.service-card p {
    margin-bottom: 25px;
    color: #64748b;
}

.service-card a {
    color: #0b6e99;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}

.service-card a:hover {
    text-decoration: underline;
}
/* ==============================
   HERO LAYOUT
============================== */

.hero-content {
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;

    padding: 100px 30px;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 80px;

    align-items: center;
}

.hero-text {
    max-width: 750px;
}


/* ==============================
   ENGINEERING VISUAL
============================== */

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.engineering-frame {
    width: 100%;
    max-width: 430px;
    min-height: 430px;

    padding: 40px;

    border: 1px solid #42677a;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.04),
            rgba(255,255,255,0)
        );

    position: relative;
}

.frame-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #6bb6d6;
}

.frame-title {
    margin-top: 100px;

    font-size: 48px;
    line-height: 1.05;
    font-weight: 800;

    color: #ffffff;
}

.frame-line {
    width: 70px;
    height: 3px;

    margin: 35px 0;

    background: #8cc7df;
}

.frame-small {
    font-size: 11px;
    letter-spacing: 2px;
    color: #9fb5c2;
}/* ==============================
   SMOOTH SCROLLING
============================== */

html {
    scroll-behavior: smooth;
}
/* ================================
   PROJECTS SECTION
================================ */

.projects {
    padding: 110px 0;
    background: #f7f9fb;
}

.projects .section-heading {
    margin-bottom: 50px;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.project-card {
    background: #ffffff;
    border: 1px solid #dbe3e8;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}


/* Project image area */

.project-image {
    height: 220px;
    background: #0b2433;

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

    position: relative;
    overflow: hidden;
}

.project-image::before {
    content: "";
    position: absolute;

    width: 160px;
    height: 160px;

    border: 1px solid #78c4e5;
    transform: rotate(45deg);

    opacity: 0.25;
}

.project-image span {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;

    position: relative;
    z-index: 1;
}


/* Project text */

.project-content {
    padding: 28px;
}

.project-category {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #1685b5;
    margin-bottom: 12px;
}

.project-content h3 {
    font-size: 21px;
    color: #0b2433;
    margin-bottom: 12px;
}

.project-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #64727c;
}
/* ================================
   PROJECTS CONTENT WIDTH
================================ */

.projects .section-heading,
.projects .project-grid {
    width: min(1100px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;
}

.projects .section-heading {
    margin-bottom: 50px;
}
/* ==============================
   COMPANY LOGO
============================== */

.logo img {
    width: 260px;
    height: auto;
    display: block;
}
/* ==============================
   ABOUT SECTION
============================== */

.about {
    padding: 120px 30px;
    background: #ffffff;
}

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

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;

    align-items: start;
}


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

.about-intro .eyebrow {
    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #1685b5;
}

.about-intro h2 {
    max-width: 500px;

    margin-bottom: 30px;

    font-size: 46px;
    line-height: 1.1;

    color: #17202a;
}

.about-intro p:not(.eyebrow) {
    max-width: 520px;

    margin-bottom: 20px;

    font-size: 16px;
    line-height: 1.8;

    color: #64727c;
}


/* ==============================
   CAPABILITIES
============================== */

.about-capabilities {
    border-top: 1px solid #dbe3e8;
}

.capability {
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;

    padding: 25px 0;

    border-bottom: 1px solid #dbe3e8;
}

.capability > span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #1685b5;
}

.capability h3 {
    margin-bottom: 8px;

    font-size: 20px;

    color: #123b5d;
}

.capability p {
    font-size: 14px;
    line-height: 1.6;

    color: #64727c;
}
/* ==============================
   WHY CHOOSE US
============================== */

.why-us {
    padding: 120px 30px;
    background: #0b1f2c;
    color: #ffffff;
}

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


/* ==============================
   WHY US HEADING
============================== */

.why-us-heading {
    max-width: 700px;
    margin-bottom: 70px;
}

.why-us-heading .eyebrow {
    margin-bottom: 18px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;

    color: #6bb6d6;
}

.why-us-heading h2 {
    max-width: 650px;

    margin-bottom: 25px;

    font-size: 50px;
    line-height: 1.1;

    color: #ffffff;
}

.why-us-heading > p:last-child {
    max-width: 650px;

    font-size: 17px;
    line-height: 1.8;

    color: #b9cbd5;
}


/* ==============================
   WHY US CARDS
============================== */

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;

    background: #315163;

    border: 1px solid #315163;
}

.why-card {
    min-height: 220px;

    padding: 35px;

    background: #0b1f2c;
}

.why-number {
    display: block;

    margin-bottom: 35px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;

    color: #6bb6d6;
}

.why-card h3 {
    margin-bottom: 15px;

    font-size: 23px;

    color: #ffffff;
}

.why-card p {
    max-width: 420px;

    font-size: 15px;
    line-height: 1.7;

    color: #aebfc8;
}