@font-face {
  font-family: "Poppins";
  src: url("https://nexcurity.com/fonts/poppins-v23-latin-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-ink: #0a0a0a;
  --c-ink-soft: #2a2a2a;
  --c-ink-darkbg: #eaeaea;
  --c-ink-comp: #e9b400;
  --c-bg: #ffffff;
  --c-bg-weak: #fafafa;
  --c-bg-darkbg: #442461;
  --c-hero: #c1acd3;     
  --c-accent: #442461;   
  --c-ok: #442461;       

  --space-0: 0;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;

  --r-xs: 7.5px;
  --r-md: 15px;

  --fs-sm: 0.95rem;
  --fs-md: 1.125rem;
  --fs-mdlg: 1.5rem;
  --fs-lg: 1.75rem;
  --fs-xl: 2.5rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
}

h1 {
  font-size: var(--fs-xl);
  margin: var(--space-3) 0;
  color: var(--c-ink);
}
h2 {
  font-size: var(--fs-mdlg);
  margin: var(--space-2) 0;
  color: var(--c-ink);
}
h3 {
  font-size: var(--fs-md);
  margin: var(--space-2) 0;
  color: var(--c-ink);
}
p, dd { font-size: var(--fs-sm); margin: var(--space-1); }
dt { font-size: var(--fs-md); margin: var(--space-1); }

ul { list-style: none; margin: 0; padding: 0; }
ul li { display: inline-block; margin-right: 20px; }
a { color: inherit; text-decoration: none; }

.grid-container {
  display: grid;
  width: 100%;
  min-height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px auto auto auto auto auto;
  grid-template-areas:
    "logo logo"
    "header header"
    "cta  cta"
    "main main"
    "ins  ins"
    "foot foot";
}

@media (min-width: 760px) {
  .grid-container {
    grid-template-columns: 0.5fr 0.5fr 2fr 2fr;
    grid-template-rows: minmax(100px, auto) auto auto auto auto;
    grid-template-areas:
      "logo logo header header"
      "cta  cta  cta   cta"
      "main main main  main"
      "ins  ins  ins   ins"
      "foot foot foot  foot";
  }
}

.logo, .header {
  background: var(--c-bg-darkbg);
  color: var(--c-ink-darkbg);
  display: flex;
  align-items: center;
}

.logo { grid-area: logo; justify-content: center; padding: 3%; }
.logo img { width: 100%; height: auto; display: block; }

.header { grid-area: header; justify-content: flex-end; padding-right: 1%; }
.header a { color: var(--c-ink-darkbg); font-size: 20px; }

.section { padding: 0 }
.section .container {
  width: min(80%, 1300px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.section .container-bg-str {
  width: min(80%, 1300px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.section .container-bg-tec {
  width: min(80%, 1300px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.section .container-bg-res {
  width: min(80%, 1300px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.section .container-bg-det {
  width: min(80%, 1300px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.section .container-bg-thr{
  width: min(80%, 1300px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.section .container-bg-cst{
  width: min(80%, 1300px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.card {
  flex: 1 1 40%;
  border-radius: var(--r-xs);
  padding: var(--space-1);
}

.card p { margin: var(--space-1) 0; }

.cta { 
  margin: 0;
  grid-area: cta;
  background-color: var(--c-bg-weak); 
  background-image: url("https://nexcurity.com/images/nexcurity-sign-part-bright.svg");
  background-repeat: no-repeat;
  background-size: 15%;
  background-position: right top;
}

.cta .container { 
  margin: 1% auto;
  padding: 1% 0; 
  width: min(80%, 1200px);
 
  display: flex;
  justify-content: right;
  align-items: end;
}

.cta .card { 
margin: 0 0 4% 0;

}

.cta h2 { font-size: var(--fs-mdlg);color: var(--c-accent); margin: var(--space-2) var(--space-0); }
.cta h3 { font-size: var(--fs-md); color: var(--c-ink); margin: var(--space-2) var(--space-0) var(--space-1) var(--space-0); }
.cta p { font-size: var(--fs-md); margin: var(--space-0) var(--space-0); }

.cta .card .box-image { display: flex; justify-content: center; align-items: center; }
.cta img { 
  width: auto; 
  height: 400px;  
  margin: var(--space-0);
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

.cta .actions {
  width: min(80%, 1200px);
  padding: 0;
  margin: 0 auto 2%;
  display: flex; 
  justify-content: center;
}

.button {
  display: inline-block;
  padding: 0.5% 4%;
  background: var(--c-ok);
  color: var(--c-ink-comp);
  font-size: var(--fs-mdlg);
  border-radius: var(--r-md);
  text-decoration: none;
}

.main { grid-area: main; background: var(--c-bg); margin-top: 1%; }
.main .container { margin-block: 2%; }
.main .container-bg-str { margin-block: 2%; padding-block: 2%; background: url("https://nexcurity.com/images/str-dark.svg") no-repeat center top / contain; }
.main .container-bg-tec { margin-block: 2%; padding-block: 2%; background: url("https://nexcurity.com/images/tec-dark.svg") no-repeat center top / contain; }
.main .container-bg-res { margin-block: 2%; padding-block: 2%; background: url("https://nexcurity.com/images/res-dark.svg") no-repeat center top / contain; }
.main .container-bg-det { margin-block: 2%; padding-block: 2%; background: url("https://nexcurity.com/images/death-dark.svg") no-repeat center top / contain; }
.main .container-bg-thr { margin-block: 2%; padding-block: 2%; background: url("https://nexcurity.com/images/thr-dark.svg") no-repeat center top / contain; }
.main .container-bg-cst { margin-block: 2%; padding-block: 2%; background: url("https://nexcurity.com/images/cst-dark.svg") no-repeat center top / contain; }

.main a { display: flex; }
.main .card {
  display: flex; 
  justify-content: space-around;
  align-items: center; 
  border: 1px groove var(--c-accent);
  background: var(--c-bg-weak);
}
.main .card .box-image { display: flex; justify-content: center; align-items: center; }
.main img { 
  width: auto; 
  height: 75%; 
  max-height: 150px; 
  margin: var(--space-2);
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.main h1 { color: var(--c-accent); display: flex; justify-content: center; }
.main h2 { color: var(--c-accent); display: flex; justify-content: center; margin: var(--space-2);}
.main h3 { color: var(--c-ink); display: flex; justify-content: center; margin: var(--space-2);}
.main p { color: var(--c-ink);  margin: var(--space-2); }

.insights { grid-area: ins; background: var(--c-bg); padding-top: var(--space-2); }
.insights .container { margin-block: 2%; }
.insights a { display: flex; }
.insights .card {
  display: flex; 
  justify-content: space-around;
  border: 1px groove var(--c-accent);
  background: var(--c-bg-weak);
}
.insights .card .box-image { display: flex; justify-content: center; align-items: center; }
.insights img { width: auto; height: 75%; max-height: 150px; display: flex; justify-content: center; margin: var(--space-2);}
.insights h2 { color: var(--c-accent); display: flex; justify-content: center; margin: var(--space-2);}
.insights h3 { color: var(--c-ink); display: flex; justify-content: center; margin: var(--space-2);}
.insights p { color: var(--c-ink); display: flex; justify-content: center; margin: var(--space-2); }

.footer {
  grid-area: foot;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background: var(--c-bg);
  color: var(--c-ink);
  padding: 1%;
  margin-top: 1%;
}
.footer p { margin: 0; font-size: var(--fs-sm); }
.footer a { color: var(--c-ink); font-size: var(--fs-sm); }

@media (max-width: 759.98px) {
  .logo img { width: auto; height: 95px; display: block; }
  .main .container,
  .insights .container,
  .cta .container { display: flex; }
  .card { margin-bottom: var(--space-2); }
  .main a,
  .insights a {
    flex-wrap: wrap;
    flex-direction: column;   
    align-items: center;      
    text-align: center;       
  }
  .cta img { 
    width: auto; 
    height: 150px;  
  }
  .cta .container { 
    flex-flow: column ;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}