@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

:root {
  --gradient-primary: linear-gradient(135deg, #727272 0%, #ffffff 100%);
}

body {
    
    /* background: linear-gradient(135deg, #000000 0%, #070a10 50%, #112b45 100%) fixed; */
    background: #000;
    font-family: 'Switzer-Regular';
}
.hero {
  position: relative;
  width: 100%;
  height: 100vh;     /* force full viewport */
  min-height: 100vh;
  overflow: hidden;
  background: #000;
  color: #fff;
}




.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
    radial-gradient(1200px 600px at 25% 15%, rgba(0, 0, 0, 0.06), transparent 60%),
    radial-gradient(900px 500px at 75% 65%, rgba(0, 0, 0, 0.05), transparent 65%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.15));
    pointer-events:none;
}
.hero-content{ position:relative; z-index:2; }
.navbar-glass{
    background: rgba(0,0,0,1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    z-index: 3;
    padding-top:0;
    padding-bottom:0;
    border-bottom: 1px solid #151515;
}

.hover-underline {
  position: relative;
  display: inline-block;
}

.hover-underline::after,
.hover-underline::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background: #be4226;
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

.hover-underline::before {
  top: -5px;
  transform-origin: left;
}

.hover-underline:hover::after,
.hover-underline:hover::before {
  transform: scaleX(1);
}

.rsg-button:hover {
  background:#be4226;
  border-color:#be4226;
  color:#fff;
}

.rsg-outline-button:hover {
  border-color:#be4226;
  color:#fff;
  background:transparent;
}


.rsg-logo img, footer img {
  max-height:6rem;
  padding: 14px;
}
.carattere-regular {
  font-family: "Roboto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.switzer-regular {
  font-family: 'Switzer-Regular';
  font-optical-sizing: auto;
  font-weight: 400;
}
.switzer-semibold {
  font-family: 'Switzer-Semibold';
  font-optical-sizing: auto;
  font-weight: 400;
}
.subheading {
  color:#404040;
}
.bg-layer {
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.bg-stripes {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.05) 0px,
      rgba(255,255,255,.05) 10px,
      rgba(255,255,255,0) 10px,
      rgba(255,255,255,0) 26px
    );
  opacity: .30;
  mask-image: radial-gradient(circle at 30% 20%, #ffffff 0%, #ffffff 65%);
  pointer-events: none;
}

.blueprint-bg {
  position: relative;
  overflow: hidden;
}

/* GRID */
.blueprint-bg::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    /* small grid */
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),

    /* large grid */
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);

  background-size:
    22px 22px,
    22px 22px,
    110px 110px,
    110px 110px;

  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.blueprint-bg::before {
  filter: blur(0.2px);
}

/* LIGHT DEPTH (very subtle glow pockets) */
.blueprint-bg::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), transparent 65%);

  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}

.blueprint-bg::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    /* 🔥 TOP FADE (this is the key part) */
    linear-gradient(
      to bottom,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,0.95) 15%,
      rgba(0,0,0,0.8) 30%,
      rgba(0,0,0,0.4) 55%,
      rgba(0,0,0,0) 75%
    ),

    /* subtle depth glow (keep this under it) */
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.05), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), transparent 65%);

  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

/* content above */
.blueprint-bg > * {
  position: relative;
  z-index: 2;
}


.blueprint-bg .tech-lines {
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg, transparent 48%, rgba(255,255,255,0.04) 50%, transparent 52%),
    linear-gradient(60deg, transparent 48%, rgba(255,255,255,0.03) 50%, transparent 52%);
  opacity: .4;
  pointer-events:none;
}

.blueprint-bg::before {
  animation: gridDrift 20s linear infinite;
}

@keyframes gridDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 40px 40px, 40px 40px, 0 0, 0 0; }
}










.glass {
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 1);
}

.glass-hover:hover {
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}
.learn-more {
  background: linear-gradient(142deg, #370000 0%, #001b8e96 100%);
  border: #000;
}
.learn-more:hover {
  background: linear-gradient(155deg, #6f0000 0%, #001983 100%);
  border: #fff;
}

/* Top border animation for cards */
.card-animated::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.card-animated:hover::before {
  transform: translateX(0);
}

.carousel-item {
    height: 32rem;
}

/* === Learn More Card (Pure CSS) === */
.learn-card{
  position:relative;
  border-radius:18px;
  padding:22px;
  overflow:hidden;
  /* background: rgba(255,255,255,.04); */
  background: #192a531a;
  /* border: 1px solid rgba(255,255,255,.10); */
  border: 0px solid #2d3069;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  max-width: 100%;
  min-height: 170px;
  isolation:isolate; /* keeps blend/blur contained */
}

/* soft vignette + subtle texture */
.learn-card::before{
  content:"";
  position:absolute; inset:-1px;
  /* background:
    radial-gradient(700px 220px at 15% 25%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(500px 220px at 80% 75%, rgba(255,255,255,.06), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0)); */
  opacity:.9;
  z-index:0;
  pointer-events:none;
}

/* content above triangles */
.learn-card__content{
  position:relative;
  z-index:3;
  max-width: 70%;
}

/* type */
.learn-card__eyebrow{
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom:.35rem;
}
.learn-card__title{
  margin:0 0 .5rem 0;
  color:#fff;
  font-weight:700;
  
}
.learn-card__text{
  margin:0 0 .9rem 0;
  color: rgba(255,255,255,.78);
  font-size:.98rem;
  line-height:1.35;
}
.learn-card__link{
  display:inline-flex;
  gap:.5rem;
  align-items:center;
  text-decoration:none;
  color:#fff;
  font-weight:600;
  padding:.55rem .8rem;
  border-radius:12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
}
.learn-card__link:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
}

/* === Triangles (3 layers, point right) === */
.learn-card__tri{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
  z-index:1;
  pointer-events:none;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.55));
}

/* Triangle shape using clip-path */
.learn-card__tri{
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  border-radius: 10px; /* softens corners slightly */
}

/* back layer */
.tri--back{
  width: 210px;
  height: 150px;
  right: 12px;
  transform: translateY(-50%) rotate(-2deg);
  /* background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); */
  background: linear-gradient(135deg, rgb(92 92 97 / 32%), rgb(7 0 165 / 22%));
  z-index:1;
  opacity:.85;
}

/* middle layer */
.tri--mid{
  width: 160px;
  height: 118px;
  right: 38px;
  transform: translateY(-50%) rotate(3deg);
  /* background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); */
  background: linear-gradient(135deg, rgb(1 1 1 / 70%), rgb(75 33 33 / 36%));
  z-index:2;
  opacity:.92;
}

/* front layer */
.tri--front{
  width: 118px;
  height: 88px;
  right: 64px;
  transform: translateY(-50%) rotate(-4deg);
  /* background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); */
  background: linear-gradient(135deg, rgb(0 0 0), rgb(1 221 255 / 23%));
  z-index:3;
  opacity:1;
}

/* optional: add subtle “edge” highlight on each triangle */
.learn-card__tri::after{
  content:"";
  position:absolute; inset:0;
  clip-path: inherit;
  border: 0px solid rgba(255,255,255,.12);
  border-left-color: rgba(255,255,255,.22);
  border-right-color: rgba(255,255,255,.06);
  border-top-color: rgba(255,255,255,.14);
  border-bottom-color: rgba(255,255,255,.08);
}

.flag-hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #000;
}

.flag-image {
  position: absolute;
  inset: 0;
  background: url("../img/r-2.jpg") center / cover no-repeat;
  filter: url(#flagWave);
}

/* Left edge attached, right freer */
.flag-image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(
    to right,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,.25) 70%,
    rgba(0,0,0,.15) 100%
  ); */
}

/* Darken for hero readability */
.flag-overlay {
  position: absolute;
  inset: 0;
  /* background:
    linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.35)),
    radial-gradient(circle at 60% 40%, rgba(0,0,0,.3), rgba(0,0,0,.7)); */
  background: linear-gradient(to right, rgb(0 0 0 / 22%), rgba(0, 0, 0, .35)), radial-gradient(circle at 60% 40%, rgb(188 211 254 / 57%), rgb(16 16 16 / 92%));;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Ultra-soft grain */
/* .flag-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/grain.png"); /* small 256px noise tile */
  /*background-size:256px 256px;
  opacity:.08;
  pointer-events:none;
} */

/* .flag-hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #000;
} */

/* Background layers */
.flag-image,
.flag-overlay {
  position: absolute;
  inset: 0;
}

.flag-image { z-index: 1; }
.flag-overlay { z-index: 2; }

/* 🔥 Content layer */
.flag-content {
  position: relative;
  z-index: 3;  /* ABOVE overlays */
  height: 100%;
  display: flex;
  align-items: center;   /* vertical center */
  color: #fff;
}

/* Typography */
.flag-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  max-width: 700px;
}

.flag-subtitle {
  opacity: .8;
  font-size: 1.1rem;
}





.rsg-email {
  color:#be4226;
}






.about-hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #000;
}

.about-image {
  position: absolute;
  inset: 0;
  background: url("../img/r-5.jpg") center / cover no-repeat;
  filter: url(#flagWave);
}

/* Left edge attached, right freer */
.about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(
    to right,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,.25) 70%,
    rgba(0,0,0,.15) 100%
  ); */
}

/* Darken for hero readability */
.about-overlay {
  position: absolute;
  inset: 0;
  /* background:
    linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.35)),
    radial-gradient(circle at 60% 40%, rgba(0,0,0,.3), rgba(0,0,0,.7)); */
  background: linear-gradient(to right, rgb(0 0 0 / 22%), rgba(0, 0, 0, .35)), radial-gradient(circle at 60% 40%, rgb(188 211 254 / 57%), rgb(0 21 44));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Ultra-soft grain */
.about-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/grain.png"); /* small 256px noise tile */
  background-size:256px 256px;
  opacity:.08;
  pointer-events:none;
}

.about-hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #000;
}

/* Background layers */
.about-image,
.about-overlay {
  position: absolute;
  inset: 0;
}

.about-image { z-index: 1; }
.about-overlay { z-index: 2; }

/* 🔥 Content layer */
.about-content {
  position: relative;
  z-index: 3;  /* ABOVE overlays */
  height: 100%;
  display: flex;
  align-items: center;   /* vertical center */
  color: #fff;
}

/* Typography */
.about-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  max-width: 700px;
}

.about-subtitle {
  opacity: .8;
  font-size: 1.1rem;
}







.services-hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #000;
}

.services-image {
  position: absolute;
  inset: 0;
  background: url("../img/r-6.jpg") center / cover no-repeat;
  
}

/* Left edge attached, right freer */
.services-image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(
    to right,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,.25) 70%,
    rgba(0,0,0,.15) 100%
  ); */
}

/* Darken for hero readability */
.services-overlay {
  position: absolute;
  inset: 0;
  /* background:
    linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.35)),
    radial-gradient(circle at 60% 40%, rgba(0,0,0,.3), rgba(0,0,0,.7)); */
  background: linear-gradient(to right, rgb(0 0 0 / 22%), rgba(0, 0, 0, .35)), radial-gradient(circle at 60% 40%, rgb(188 211 254 / 57%), rgb(0 21 44));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Ultra-soft grain */
.services-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/grain.png"); /* small 256px noise tile */
  background-size:256px 256px;
  opacity:.08;
  pointer-events:none;
}

.services-hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #000;
}

/* Background layers */
.services-image,
.services-overlay {
  position: absolute;
  inset: 0;
}

.services-image { z-index: 1; }
.services-overlay { z-index: 2; }

/* 🔥 Content layer */
.services-content {
  position: relative;
  z-index: 3;  /* ABOVE overlays */
  height: 100%;
  display: flex;
  align-items: center;   /* vertical center */
  color: #fff;
}

/* Typography */
.services-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  max-width: 700px;
}

.services-subtitle {
  opacity: .8;
  font-size: 1.1rem;
}








.contact-hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #000;
}

.contact-image {
  position: absolute;
  inset: 0;
  background: url("../img/r-3.jpg") center / cover no-repeat;
  
}

/* Left edge attached, right freer */
.contact-image::after {
  content: "";
  position: absolute;
  inset: 0;
  /* background: linear-gradient(
    to right,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.45) 35%,
    rgba(0,0,0,.25) 70%,
    rgba(0,0,0,.15) 100%
  ); */
}

/* Darken for hero readability */
.contact-overlay {
  position: absolute;
  inset: 0;
  /* background:
    linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.35)),
    radial-gradient(circle at 60% 40%, rgba(0,0,0,.3), rgba(0,0,0,.7)); */
  background: linear-gradient(to right, rgb(0 0 0 / 22%), rgba(0, 0, 0, .35)), radial-gradient(circle at 60% 40%, rgb(188 211 254 / 57%), rgb(0 21 44));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Ultra-soft grain */
.contact-hero::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../img/grain.png"); /* small 256px noise tile */
  background-size:256px 256px;
  opacity:.08;
  pointer-events:none;
}

.contact-hero {
  position: relative;
  height: 600px;
  overflow: hidden;
  background: #000;
}

/* Background layers */
.contact-image,
.contact-overlay {
  position: absolute;
  inset: 0;
}

.contact-image { z-index: 1; }
.contact-overlay { z-index: 2; }

/* 🔥 Content layer */
.contact-content {
  position: relative;
  z-index: 3;  /* ABOVE overlays */
  height: 100%;
  display: flex;
  align-items: center;   /* vertical center */
  color: #fff;
}

/* Typography */
.contact-title {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  max-width: 700px;
}

.contact-subtitle {
  opacity: .8;
  font-size: 1.1rem;
}

.contact-card {
  background: #111216;
    /* border: 1px solid rgba(255, 255, 255, .10); */
    border: 1px solid #11141e;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.contact-card .card-body i {
  font-size:3rem;
  color:#fff;
  padding-right:1rem;
}

.contact-form {
  position: relative;
  height: 100%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.contact-form-overlay {
  position: absolute;
  inset: 0;
  /* background: linear-gradient(to right, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35)), radial-gradient(circle at 60% 40%, rgba(0, 0, 0, .3), rgba(0, 0, 0, .7)); */
  background: #0b0b0e;
  height: 100px;
  top: 95%;
}



.bio {
  background: #0b0b0ebf;
    /* border: 1px solid rgba(255, 255, 255, .10); */
    border: 1px solid #000000;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.hover-image .scale, .hover-image .scale-up {
    transform: scale3d(1, 1, 1);
    transform-style: preserve-3d;
    transition: transform .5s;
}

.hover-image:hover .hover-scale, .hover-image:hover .hover-scale-up {
    transform: scale3d(1.2, 1.2, 1.2);
}

.accordion-item {
  background: #192a531a;
}
.accordion-button {
  min-height: 5rem;
  background: #192a531a;
  /* border: 1px solid rgba(255, 255, 255, .10); */
  border-bottom:2px solid rgb(172 172 172 / 13%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  font-size:1.5rem;
}


.accordion-button:not(.collapsed),
.accordion-button:focus {
  outline: none;
  /* border-color: transparent; */
  box-shadow: none;
  background-color: transparent;
}
.accordion-button::after {
  width: 11px;
  height: 11px;
  border-radius: 100%;
  background-color: #00ff47;
  background-image: none !important;
}
.accordion-button.collapsed::after {
  background-color: var(--bs-gray-300);
}



.footer-divider {


    margin-top: 6rem;
    width: 100%;
    height: 1rem;
    background-color: #0b0b0ebf;
    border: solid rgb(35 35 35 / 15%);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em #2222221a, inset 0 .125em .5em #07070726;
}

@media (max-width:976px) {
  .rsg-logo img {
    max-height:4rem;
    padding: 5px;
  }
  .hover-underline:hover::after,
.hover-underline:hover::before {
  transform: scaleX(0);
}
.hover-underline {
    position: relative;
    display: inline-block;
      border-top: 1px solid #1a1a1a;
}

}