/* =========================================================
   COREVAC
   MAIN WEBSITE STYLES
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

  --navy: #071a2d;
  --navy2: #0d2a45;

  --blue: #123e67;

  --red: #e51b23;

  --light: #f4f7fa;

  --text: #182431;

  --muted: #607080;

  --white: #ffffff;

  --line: #dfe6ec;

}


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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: var(--text);

  background: var(--white);

  line-height: 1.6;

  overflow-x: hidden;

}


img {
  max-width: 100%;
}


a {
  color: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

  width: min(
    1180px,
    calc(100% - 48px)
  );

  margin: 0 auto;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  height: 86px;

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

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

  backdrop-filter: blur(10px);

}


.nav-wrap {

  height: 86px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

}


.brand {

  display: flex;

  align-items: center;

  flex-shrink: 0;

}


.brand img {

  width: 102px;

  height: 68px;

  object-fit: contain;

}


.nav {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 28px;

  margin-left: auto;

}


.nav a {

  text-decoration: none;

  font-size: 15px;

  font-weight: 700;

  color: var(--text);

  transition:
    color 0.2s ease;

}


.nav a:hover {
  color: var(--red);
}


.nav-cta {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 96px;

  height: 48px;

  padding: 0 20px;

  border-radius: 7px;

  background: var(--navy);

  color: white;

  text-decoration: none;

  font-weight: 700;

}


.nav-cta:hover {
  background: var(--red);
}


.menu-btn {

  display: none;

  border: 0;

  background: transparent;

  font-size: 28px;

  cursor: pointer;

  color: var(--navy);

}


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

.hero {

  position: relative;

  min-height: 650px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 82% 42%,
      rgba(229, 27, 35, 0.10),
      transparent 35%
    ),

    radial-gradient(
      circle at 70% 60%,
      rgba(42, 96, 160, 0.12),
      transparent 38%
    ),

    var(--navy);

}


.hero::after {

  content: "";

  position: absolute;

  width: 650px;

  height: 650px;

  right: -250px;

  top: -250px;

  border-radius: 50%;

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

  box-shadow:

    0 0 0 80px rgba(
      255,
      255,
      255,
      0.012
    ),

    0 0 0 160px rgba(
      255,
      255,
      255,
      0.008
    );

}


.hero-overlay {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      90deg,
      rgba(7, 26, 45, 0.98) 0%,
      rgba(7, 26, 45, 0.88) 40%,
      rgba(7, 26, 45, 0.38) 70%,
      rgba(7, 26, 45, 0.20) 100%
    );

  z-index: 1;

}


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

.hero-product-showcase {

  position: absolute;

  z-index: 2;

  right: 3%;

  top: 50%;

  width: 48%;

  height: 88%;

  transform: translateY(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

}


.hero-product-showcase img {

  width: 100%;

  max-width: 650px;

  max-height: 520px;

  object-fit: contain;

  display: block;

  opacity: 0.50;

  filter:
    drop-shadow(
      0 25px 35px
      rgba(0, 0, 0, 0.25)
    );

  transform: scale(1);

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;

}


.hero-product-showcase img.product-changing {

  opacity: 0;

  transform: scale(0.92);

}


.hero-product-label {

  position: absolute;

  right: 8%;

  bottom: 8%;

  padding: 8px 18px;

  border-radius: 30px;

  background: rgba(
    7,
    26,
    45,
    0.60
  );

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

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

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 2px;

  backdrop-filter: blur(8px);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;

}


.hero-product-label.product-changing {

  opacity: 0;

  transform: translateY(8px);

}


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

.hero-content {

  position: relative;

  z-index: 5;

  padding-top: 40px;

  padding-bottom: 40px;

  max-width: 1180px;

}


.eyebrow {

  margin-bottom: 20px;

  color: #dbe8f4;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 3px;

}


.hero h1 {

  max-width: 700px;

  margin: 0 0 22px;

  color: white;

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

  line-height: 0.99;

  letter-spacing: -2.5px;

  font-weight: 800;

}


.hero h1 span {
  color: #e4edf6;
}


.hero p {

  max-width: 700px;

  margin: 0 0 32px;

  color: #d9e5f0;

  font-size: 18px;

  line-height: 1.7;

}


.hero-actions {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 48px;

  padding: 0 22px;

  border-radius: 6px;

  text-decoration: none;

  font-weight: 800;

  border: 1px solid transparent;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;

}


.btn:hover {

  transform: translateY(-2px);

}


.btn.primary {

  background: var(--red);

  color: white;

}


.btn.primary:hover {

  background: #c9161d;

}


.btn.ghost {

  background: transparent;

  color: white;

  border-color: rgba(
    255,
    255,
    255,
    0.55
  );

}


.btn.ghost:hover {

  background: white;

  color: var(--navy);

}


.btn.light {

  background: white;

  color: var(--navy);

}


.btn.light:hover {

  background: #eaf0f5;

}


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

.trust-strip {

  display: flex;

  gap: 35px;

  margin-top: 50px;

  flex-wrap: wrap;

}


.trust-strip > div {

  display: flex;

  flex-direction: column;

  gap: 2px;

}


.trust-strip strong {

  color: white;

  font-size: 17px;

}


.trust-strip span {

  color: #b7c8d8;

  font-size: 12px;

}


/* =========================================================
   SECTIONS
========================================================= */

.section {

  padding: 95px 0;

}


.section.dark {

  background: var(--navy);

  color: white;

}


.section-kicker {

  margin-bottom: 12px;

  color: var(--red);

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 3px;

}


.section h2 {

  max-width: 850px;

  margin: 0 0 22px;

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

  line-height: 1.05;

  letter-spacing: -1.5px;

}


.section-intro {

  max-width: 720px;

  color: var(--muted);

  margin-bottom: 45px;

}


.dark .section-intro {

  color: #b9c9d8;

}


/* =========================================================
   TWO COLUMN
========================================================= */

.two-col {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 70px;

  align-items: center;

}


.two-col > div > p {

  max-width: 700px;

  color: var(--muted);

}


.text-link {

  display: inline-block;

  margin-top: 10px;

  color: var(--red);

  font-weight: 800;

  text-decoration: none;

}


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

.about-card {

  padding: 40px;

  background: var(--light);

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

  border-radius: 12px;

}


.about-icon {

  width: 64px;

  height: 64px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 25px;

  border-radius: 12px;

  background: var(--navy);

  color: white;

  font-size: 22px;

  font-weight: 900;

}


.about-card h3 {

  margin: 0 0 12px;

  font-size: 25px;

}


.about-card p {

  color: var(--muted);

}


.about-card ul {

  padding-left: 20px;

  color: var(--muted);

}


.about-card li {

  margin: 8px 0;

}


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

.product-grid {

  display: grid;

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

  gap: 25px;

  margin-top: 40px;

}


.product-card {

  padding: 38px;

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

  border-radius: 12px;

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

}


.product-card.featured {

  background:
    linear-gradient(
      145deg,
      rgba(
        229,
        27,
        35,
        0.12
      ),
      rgba(
        255,
        255,
        255,
        0.035
      )
    );

}


.product-badge {

  display: inline-block;

  margin-bottom: 20px;

  padding: 5px 10px;

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

  border-radius: 20px;

  color: #dbe7f1;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.5px;

}


.product-card h3 {

  margin: 0;

  font-size: 32px;

}


.product-card .range {

  margin-top: 3px;

  color: #d2dfeb;

  font-weight: 700;

}


.product-card > p:not(.range) {

  color: #b8c8d7;

}


.range-value {

  margin: 22px 0;

  color: white;

  font-size: 26px;

  font-weight: 800;

}


.product-card ul {

  padding-left: 20px;

  color: #c6d3df;

  margin-bottom: 28px;

}


.product-card li {

  margin: 7px 0;

}


/* =========================================================
   PRODUCT TABLE
========================================================= */

.spec-section {

  margin-top: 65px;

}


.spec-section h3 {

  margin: 45px 0 18px;

  font-size: 24px;

}


.table-wrap {

  width: 100%;

  overflow-x: auto;

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

  border-radius: 8px;

}


table {

  width: 100%;

  min-width: 750px;

  border-collapse: collapse;

}


th,
td {

  padding: 13px 15px;

  text-align: left;

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

}


th {

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

  color: white;

  font-size: 13px;

}


td {

  color: #c5d2de;

  font-size: 14px;

}


tr:last-child td {

  border-bottom: 0;

}


/* =========================================================
   APPLICATIONS
========================================================= */

.industry-grid {

  display: grid;

  grid-template-columns:
    repeat(5, minmax(0, 1fr));

  gap: 12px;

}


.industry {

  min-height: 80px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 15px;

  text-align: center;

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

  border-radius: 8px;

  background: white;

  font-weight: 700;

  transition:
    transform 0.2s ease,
    border-color 0.2s ease;

}


.industry:hover {

  transform: translateY(-3px);

  border-color: var(--red);

}


/* =========================================================
   SERVICES
========================================================= */

.service-section {

  background: var(--light);

}


.service-list {

  display: flex;

  flex-direction: column;

  gap: 20px;

}


.service-list > div {

  display: grid;

  grid-template-columns: 45px 1fr;

  gap: 18px;

  padding-bottom: 20px;

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

}


.service-list > div:last-child {

  border-bottom: 0;

}


.service-list > div > span {

  color: var(--red);

  font-weight: 900;

  font-size: 15px;

}


.service-list strong {

  font-size: 18px;

}


.service-list p {

  margin: 5px 0 0;

  color: var(--muted);

}


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

.contact-section {

  background: var(--navy);

  color: white;

}


.contact-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 70px;

  align-items: start;

}


.contact-section h2 {

  color: white;

}


.contact-section > .container > div > p {

  max-width: 600px;

  color: #bdd0df;

}


.contact-item {

  margin-top: 30px;

}


.contact-item strong {

  display: block;

  font-size: 18px;

}


.contact-item small {

  display: block;

  margin: 3px 0 5px;

  color: #b8cad9;

}


.contact-item a {

  display: inline-block;

  color: white;

  font-weight: 700;

  text-decoration: none;

}


.contact-item a:hover {

  color: var(--red);

}


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

.contact-form {

  display: grid;

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

  gap: 12px;

}


.contact-form input,
.contact-form textarea {

  width: 100%;

  padding: 14px 15px;

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

  border-radius: 5px;

  background: white;

  color: var(--text);

  font: inherit;

  outline: none;

}


.contact-form input:focus,
.contact-form textarea:focus {

  border-color: var(--red);

}


.contact-form textarea {

  grid-column: 1 / -1;

  resize: vertical;

  min-height: 125px;

}


.contact-form button {

  justify-self: start;

}


.whatsapp {

  align-self: center;

  color: #25d366;

  font-weight: 700;

  text-decoration: none;

}


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

.footer {

  padding: 35px 0;

  background: white;

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

}


.footer-wrap {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  flex-wrap: wrap;

}


.footer img {

  width: 105px;

}


.footer p {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

}


.footer a {

  color: var(--blue);

}


/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {

  position: fixed;

  z-index: 999;

  right: 22px;

  bottom: 20px;

  width: 58px;

  height: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #19a85b;

  color: white;

  text-decoration: none;

  font-weight: 900;

  box-shadow:
    0 8px 25px
    rgba(0, 0, 0, 0.20);

}


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

@media (max-width: 1000px) {

  .nav {
    gap: 17px;
  }


  .nav a {
    font-size: 14px;
  }


  .hero-product-showcase {

    right: 0;

    width: 48%;

  }


  .hero-product-showcase img {

    max-width: 500px;

  }


  .industry-grid {

    grid-template-columns:
      repeat(3, minmax(0, 1fr));

  }

}


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

@media (max-width: 768px) {

  .container {

    width: min(
      100% - 32px,
      600px
    );

  }


  .site-header,
  .nav-wrap {

    height: 76px;

  }


  .brand img {

    width: 90px;

    height: 60px;

  }


  .menu-btn {

    display: block;

    margin-left: auto;

  }


  .nav {

    position: absolute;

    left: 16px;

    right: 16px;

    top: 76px;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 10px;

    background: white;

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

    border-radius: 8px;

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

  }


  .nav.active {

    display: flex;

  }


  .nav a {

    padding: 13px;

  }


  .nav-cta {

    display: none;

  }


  /* HERO */

  .hero {

    min-height: auto;

    padding: 70px 0 80px;

    display: block;

  }


  .hero-product-showcase {

    position: absolute;

    right: -10%;

    top: auto;

    bottom: 20px;

    width: 70%;

    height: 280px;

    transform: none;

    opacity: 0.75;

  }


  .hero-product-showcase img {

    width: 100%;

    max-height: 280px;

    opacity: 0.35;

  }


  .hero-product-label {

    display: none;

  }


  .hero-content {

    position: relative;

    z-index: 5;

  }


  .hero h1 {

    font-size: 48px;

    letter-spacing: -1.5px;

  }


  .hero p {

    font-size: 16px;

  }


  .trust-strip {

    display: none;

  }


  /* SECTIONS */

  .section {

    padding: 70px 0;

  }


  .two-col,
  .product-grid,
  .contact-grid {

    grid-template-columns: 1fr;

    gap: 40px;

  }


  .industry-grid {

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

  }


  .contact-form {

    grid-template-columns: 1fr;

  }


  .contact-form textarea {

    grid-column: auto;

  }


  .footer-wrap {

    flex-direction: column;

    align-items: flex-start;

  }

}


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

@media (max-width: 480px) {

  .hero h1 {

    font-size: 40px;

  }


  .hero-actions {

    flex-direction: column;

    align-items: stretch;

  }


  .btn {

    width: 100%;

  }


  .industry-grid {

    grid-template-columns: 1fr;

  }


  .product-card {

    padding: 28px;

  }

}