/* Green Crude Display Fix + Custom Styling
   This file provides the required styling locally so the website works even if Tailwind CDN or icon CDN is not loaded. */

:root{
  --navy:#0a0f1c;
  --navy2:#0f172a;
  --navy3:#111c2f;
  --green:#2E7D32;
  --green2:#1f6b2b;
  --gold:#D4AF37;
  --white:#ffffff;
  --gray200:#e5e7eb;
  --gray300:#d1d5db;
  --gray400:#9ca3af;
  --gray500:#6b7280;
  --border:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--gray200);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}section{scroll-margin-top:80px}

/* Local utility replacements */
.fixed{position:fixed}.relative{position:relative}.absolute{position:absolute}.inset-0{inset:0}.top-0{top:0}.left-0{left:0}.z-10{z-index:10}.z-50{z-index:50}
.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none!important}
.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.text-center{text-align:center}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.w-full{width:100%}.w-auto{width:auto}.min-h-screen{min-height:100vh}.h-10{height:2.5rem}.h-16{height:4rem}.h-48{height:12rem}
.object-cover{object-fit:cover}.overflow-hidden{overflow:hidden}.mx-auto{margin-left:auto;margin-right:auto}.mx-4{margin-left:1rem;margin-right:1rem}
.max-w-lg{max-width:32rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-7xl{max-width:80rem}
.p-6{padding:1.5rem}.p-8{padding:2rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-20{padding-top:5rem;padding-bottom:5rem}.pb-4{padding-bottom:1rem}.pt-6{padding-top:1.5rem}
.mt-8{margin-top:2rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mb-12{margin-bottom:3rem}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-12{gap:3rem}.space-y-2>*+*{margin-top:.5rem}.space-y-4>*+*{margin-top:1rem}.space-y-5>*+*{margin-top:1.25rem}.space-x-2>*+*{margin-left:.5rem}.space-x-6>*+*{margin-left:1.5rem}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rounded{border-radius:.375rem}.rounded-lg{border-radius:.75rem}.rounded-xl{border-radius:1rem}
.border{border:1px solid}.border-b{border-bottom:1px solid}.border-t{border-top:1px solid}.border-gold{border-color:var(--gold)}.border-white\/5{border-color:rgba(255,255,255,.05)}.border-white\/10{border-color:rgba(255,255,255,.10)}.border-white\/20{border-color:rgba(255,255,255,.20)}
.shadow-lg{box-shadow:0 10px 25px rgba(0,0,0,.25)}.shadow-2xl{box-shadow:0 25px 60px rgba(0,0,0,.35)}
.bg-navy{background:var(--navy)}.bg-navy\/70{background:rgba(10,15,28,.70)}.bg-navy\/80{background:rgba(10,15,28,.80)}.bg-navy\/90{background:rgba(10,15,28,.90)}.bg-navy\/95{background:rgba(10,15,28,.95)}.bg-crude-green{background:var(--green)}.bg-green-700{background:#15803d}.bg-gold{background:var(--gold)}.bg-black\/70{background:rgba(0,0,0,.70)}.bg-white\/5{background:rgba(255,255,255,.05)}.bg-white\/10{background:rgba(255,255,255,.10)}
.bg-cover{background-size:cover}.bg-center{background-position:center}.bg-no-repeat{background-repeat:no-repeat}.bg-fixed{background-attachment:fixed}
.text-white{color:#fff}.text-gray-200{color:var(--gray200)}.text-gray-300{color:var(--gray300)}.text-gray-400{color:var(--gray400)}.text-gray-500{color:var(--gray500)}.text-crude-green{color:var(--green)}.text-gold{color:var(--gold)}.text-navy{color:var(--navy)}.text-red-400{color:#f87171}.text-green-400{color:#4ade80}
.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}
.font-sans{font-family:Inter,Segoe UI,Arial,sans-serif}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.uppercase{text-transform:uppercase}.tracking-wider{letter-spacing:.08em}.leading-tight{line-height:1.1}.leading-relaxed{line-height:1.75}.leading-none{line-height:1}
.backdrop-blur-sm{backdrop-filter:blur(6px)}.backdrop-blur-md{backdrop-filter:blur(12px)}.transition{transition:all .28s ease}.transition-opacity{transition:opacity .28s ease}.transform{transform:translateZ(0)}
.placeholder-gray-400::placeholder{color:var(--gray400)}.focus\:outline-none:focus{outline:none}.focus\:border-crude-green:focus{border-color:var(--green)}

/* Responsive utilities */
@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:inline{display:inline!important}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}
@media (min-width:768px){.md\:flex{display:flex!important}.md\:hidden{display:none!important}.md\:flex-row{flex-direction:row}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:w-1\/2{width:50%}.md\:text-4xl{font-size:2.25rem}.md\:text-5xl{font-size:3rem}.md\:text-xl{font-size:1.25rem}}
@media (min-width:1024px){.lg\:flex-row{flex-direction:row}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:w-1\/2{width:50%}.lg\:text-6xl{font-size:3.75rem}}

/* Page design */
header{background:rgba(10,15,28,.84)!important;border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.30)}
.nav-link{position:relative;color:rgba(255,255,255,.78);font-size:.82rem;font-weight:700;letter-spacing:.08em;padding:.35rem 0;transition:.25s ease}
.nav-link:hover,.nav-link.active{color:var(--gold)}
.nav-link:after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:linear-gradient(90deg,var(--green),var(--gold));transition:.25s ease}.nav-link:hover:after,.nav-link.active:after{width:100%}
#mobile-menu{background:rgba(10,15,28,.95);border-top:1px solid rgba(255,255,255,.08)}
#mobile-menu .nav-link{padding:.75rem 0}
#mobile-menu-toggle{background:transparent;border:0;cursor:pointer}

#home{padding-top:4rem;background-color:var(--navy);isolation:isolate}
#home:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(46,125,50,.38),transparent 32%),radial-gradient(circle at 80% 60%,rgba(212,175,55,.18),transparent 35%),linear-gradient(135deg,rgba(10,15,28,.65),rgba(10,15,28,.95));z-index:0}
#home>div{position:relative;z-index:1}
#home h1{max-width:960px;margin-left:auto;margin-right:auto;text-shadow:0 10px 35px rgba(0,0,0,.45)}
#home p{font-size:1.15rem;color:rgba(229,231,235,.9)}

section:not(#home):not(#contact){background:linear-gradient(180deg,var(--navy),#08111f)}
#about img,.project-card img{width:100%;background:linear-gradient(135deg,rgba(46,125,50,.20),rgba(212,175,55,.12)),#111827;border:1px solid rgba(255,255,255,.08);min-height:260px;object-fit:cover}
#about h2,#services h2,#industries h2,#projects h2,#training h2,section h2{letter-spacing:-.03em}
#about h2:after,#services h2:after,#industries h2:after,#projects h2:after,#training h2:after,section h2:after{content:"";display:block;width:72px;height:3px;background:linear-gradient(90deg,var(--green),var(--gold));margin-top:14px;border-radius:999px}
.text-center h2:after,h2.text-center:after{margin-left:auto;margin-right:auto}

.service-card,.industry-card,.project-card,.choose-card{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.18);transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease}
.service-card:hover,.industry-card:hover,.project-card:hover,.choose-card:hover{transform:translateY(-7px);border-color:rgba(212,175,55,.55);box-shadow:0 25px 70px rgba(0,0,0,.33);background:linear-gradient(180deg,rgba(46,125,50,.14),rgba(255,255,255,.045))}
.service-card h4,.project-card h4,.choose-card h4,.industry-card h4{line-height:1.35}
.service-card .read-more{background:transparent;color:var(--gold);border:1px solid var(--gold);cursor:pointer}
.service-card .read-more:hover{background:var(--gold);color:var(--navy)}

#training{background-size:cover;background-position:center;background-color:#0a0f1c;position:relative;isolation:isolate}
#training:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,15,28,.92),rgba(10,15,28,.70)),radial-gradient(circle at 80% 20%,rgba(46,125,50,.22),transparent 40%);z-index:0}
#training>*{position:relative;z-index:1}

#contact{background-color:#09111f;isolation:isolate}
#contact:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(10,15,28,.94),rgba(10,15,28,.75)),radial-gradient(circle at 85% 20%,rgba(212,175,55,.20),transparent 35%);z-index:0}
#contact>div{position:relative;z-index:1}
input,select,textarea{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:.55rem;padding:.85rem 1rem;transition:.25s ease;outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.10);background:rgba(255,255,255,.12)}
select option{background:var(--navy);color:#fff}textarea{resize:vertical;min-height:120px}
button[type="submit"],.bg-crude-green{background:linear-gradient(135deg,var(--green),#1e6d37)!important;border:0;box-shadow:0 10px 28px rgba(46,125,50,.28)}
button[type="submit"]{cursor:pointer}.bg-crude-green:hover,button[type="submit"]:hover{background:linear-gradient(135deg,#1e6d37,#14532d)!important;transform:translateY(-2px)}
.border.border-gold:hover,.hover\:bg-gold:hover{background:var(--gold);color:var(--navy)}

footer{background:#070c16!important}footer ul{list-style:none;padding:0;margin:0}footer a:hover{color:var(--gold)}

/* Icon fallback if Font Awesome CDN is unavailable */
.fas{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:1.1em}.fas:before{content:"◆"}.fa-bars:before{content:"☰"}.fa-envelope:before{content:"✉"}.fa-phone:before{content:"☎"}.fa-map-marker-alt:before{content:"⌖"}.fa-spinner:before{content:"⟳"}.fa-oil-can:before,.fa-tint:before{content:"◈"}.fa-industry:before{content:"▰"}.fa-flask:before{content:"⚗"}.fa-warehouse:before{content:"▣"}.fa-ship:before{content:"⚓"}.fa-bolt:before{content:"⚡"}.fa-cogs:before{content:"⚙"}.fa-building-shield:before,.fa-shield-alt:before,.fa-shield-virus:before{content:"盾"}.fa-gauge-high:before{content:"◴"}.fa-microchip:before{content:"▦"}.fa-valve:before{content:"◉"}.fa-oil-well:before{content:"▥"}.fa-fire-extinguisher:before{content:"🔥"}.fa-chart-line:before{content:"↗"}.fa-truck-loading:before{content:"▤"}.fa-tools:before{content:"🛠"}.fa-chalkboard-teacher:before{content:"▧"}.fa-hard-hat:before{content:"⛑"}.fa-handshake:before{content:"◇"}.fa-spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}

/* Effects */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.animate-fadeInUp{animation:fadeInUp 1s ease-out}
@keyframes modalIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.animate-modalIn{animation:modalIn .25s ease-out}
.reveal{opacity:1;transform:none;transition:opacity .8s ease,transform .8s ease}.reveal:not(.visible){opacity:1;transform:none}.reveal.visible{opacity:1;transform:translateY(0)}
#serviceModal{padding:1rem}.transition-opacity{transition:opacity .25s ease}
::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#0a0f1c}::-webkit-scrollbar-thumb{background:var(--green);border-radius:4px}

@media(max-width:767px){
  .text-4xl{font-size:2.1rem}.text-3xl{font-size:1.75rem}.py-20{padding-top:4rem;padding-bottom:4rem}
  header .h-16{height:4rem}#home{min-height:90vh;text-align:center}.grid-cols-2{grid-template-columns:1fr}.p-8{padding:1.25rem}
  #about img,.project-card img{min-height:210px}.flex-wrap{justify-content:center}
}


/* Extra bundled fixes */
.hover\:bg-green-700:hover{background:#15803d!important}
.hover\:bg-white\/10:hover{background:rgba(255,255,255,.10)!important}
.hover\:border-crude-green:hover{border-color:var(--green)!important}
.hover\:scale-105:hover{transform:scale(1.05)}
.hover\:shadow-2xl:hover{box-shadow:0 25px 60px rgba(0,0,0,.35)}
.hover\:text-crude-green:hover{color:var(--green)!important}
.hover\:text-navy:hover{color:var(--navy)!important}
.hover\:text-white:hover{color:#fff!important}
#mobile-menu.hidden,#btnSpinner.hidden,#serviceModal.hidden{display:none!important}
.service-card i,.industry-card i,.choose-card i{font-size:1.8rem;color:var(--gold)}
@media (max-width: 520px){
  .text-4xl,.md\:text-5xl,.lg\:text-6xl{font-size:2rem!important}
  #home p{font-size:1rem}
}


/* =========================================================
   Green Crude Responsive Animations, Scroll & Hover Effects
   Content-safe enhancement layer - no content/data changed
   ========================================================= */

:root{
  --heroShift: 0px;
  --mouseGlowX: 50%;
  --mouseGlowY: 35%;
}

/* Smooth premium page movement */
body{
  background:
    radial-gradient(circle at var(--mouseGlowX) var(--mouseGlowY), rgba(46,125,50,.16), transparent 28rem),
    linear-gradient(180deg, #0a0f1c 0%, #08111f 55%, #070c16 100%);
}

/* Header polish */
header{
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
header.scrolled{
  background: rgba(7,12,22,.94)!important;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  border-bottom-color: rgba(212,175,55,.18);
}
.logo-pop, header img{
  transition: transform .35s ease, filter .35s ease;
}
header a:hover img{
  transform: scale(1.05);
  filter: drop-shadow(0 0 14px rgba(212,175,55,.25));
}

/* Hero scroll depth */
#home{
  overflow: hidden;
}
#home:before{
  transform: translate3d(0, var(--heroShift), 0) scale(1.06);
  transition: transform .08s linear;
}
#home .relative.z-10{
  animation: heroEntrance 1.15s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes heroEntrance{
  from{opacity:0; transform: translateY(34px) scale(.98)}
  to{opacity:1; transform: translateY(0) scale(1)}
}
#home h1{
  background: linear-gradient(90deg, #ffffff 0%, #eaf7ed 42%, #d4af37 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
#home .bg-crude-green,
#home .border-gold{
  position:relative;
  overflow:hidden;
}
#home .bg-crude-green:after,
#home .border-gold:after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-110%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transition:transform .7s ease;
}
#home .bg-crude-green:hover:after,
#home .border-gold:hover:after{
  transform:translateX(110%);
}

/* Reveal animations */
.js-loaded .reveal,
.js-loaded .service-card,
.js-loaded .industry-card,
.js-loaded .project-card,
.js-loaded .choose-card{
  opacity:0;
  transform: translateY(34px) scale(.985);
  transition:
    opacity .75s cubic-bezier(.2,.8,.2,1),
    transform .75s cubic-bezier(.2,.8,.2,1),
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.js-loaded .reveal.visible,
.js-loaded .service-card.visible,
.js-loaded .industry-card.visible,
.js-loaded .project-card.visible,
.js-loaded .choose-card.visible{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Card hover and glow */
.service-card,
.industry-card,
.project-card,
.choose-card{
  position:relative;
  overflow:hidden;
  will-change: transform;
}
.service-card:before,
.industry-card:before,
.project-card:before,
.choose-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  opacity:0;
  pointer-events:none;
  background: radial-gradient(circle at 22% 15%, rgba(212,175,55,.20), transparent 32%),
              linear-gradient(135deg, rgba(46,125,50,.16), transparent 55%);
  transition: opacity .35s ease;
}
.service-card:hover:before,
.industry-card:hover:before,
.project-card:hover:before,
.choose-card:hover:before{
  opacity:1;
}
.service-card:hover,
.industry-card:hover,
.project-card:hover,
.choose-card:hover{
  transform: translateY(-9px) scale(1.015);
}
.service-card i,
.industry-card i,
.choose-card i{
  transition: transform .35s ease, color .35s ease, text-shadow .35s ease;
}
.service-card:hover i,
.industry-card:hover i,
.choose-card:hover i{
  transform: translateY(-4px) scale(1.12) rotate(-3deg);
  color: var(--gold)!important;
  text-shadow: 0 0 22px rgba(212,175,55,.28);
}

/* Project image animation */
.project-card img,
#about img{
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.project-card:hover img,
#about img:hover{
  transform: scale(1.065);
  filter: saturate(1.12) contrast(1.08);
}

/* Buttons and links */
a, button{
  -webkit-tap-highlight-color: transparent;
}
.bg-crude-green,
button[type="submit"],
.read-more,
.border-gold{
  transition: transform .28s ease, box-shadow .28s ease, background .28s ease, color .28s ease, border-color .28s ease;
}
.bg-crude-green:hover,
button[type="submit"]:hover,
.read-more:hover,
.border-gold:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(46,125,50,.28);
}
.hover\:-translate-y-1:hover{
  transform: translateY(-.25rem);
}

/* Form hover/focus polish */
input:hover, select:hover, textarea:hover{
  border-color: rgba(212,175,55,.45);
}
input:focus, select:focus, textarea:focus{
  transform: translateY(-1px);
}

/* Modal smoothness */
#serviceModal{
  opacity:0;
  pointer-events:none;
}
#serviceModal:not(.hidden){
  opacity:1;
  pointer-events:auto;
}
#serviceModal:not(.hidden) > div{
  animation: modalIn .28s cubic-bezier(.2,.8,.2,1) both;
}

/* Back to top button injected by JS */
.gc-back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:46px;
  height:46px;
  border:1px solid rgba(212,175,55,.45);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(46,125,50,.95), rgba(10,15,28,.95));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:60;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(18px);
  transition:opacity .28s ease, visibility .28s ease, transform .28s ease, background .28s ease;
}
.gc-back-to-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.gc-back-to-top:hover{
  background:linear-gradient(135deg, var(--gold), var(--green));
  transform:translateY(-4px);
}

/* Subtle section separators */
section{
  position:relative;
}
section:not(#home)::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(88%, 980px);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.22), transparent);
  pointer-events:none;
}

/* Mobile friendly tuning */
@media(max-width:767px){
  .js-loaded .reveal,
  .js-loaded .service-card,
  .js-loaded .industry-card,
  .js-loaded .project-card,
  .js-loaded .choose-card{
    transform: translateY(22px);
    transition-delay: 0ms!important;
  }
  .service-card:hover,
  .industry-card:hover,
  .project-card:hover,
  .choose-card:hover{
    transform: translateY(-4px);
  }
  #home:before{
    transform:none!important;
  }
  .gc-back-to-top{
    width:42px;
    height:42px;
    right:14px;
    bottom:14px;
  }
}

/* Accessibility: no motion preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
  .js-loaded .reveal,
  .js-loaded .service-card,
  .js-loaded .industry-card,
  .js-loaded .project-card,
  .js-loaded .choose-card{
    opacity:1!important;
    transform:none!important;
  }
}


/* Training section readability fix only */
#training .absolute.inset-0{
  background: rgba(3, 8, 18, 0.78) !important;
  backdrop-filter: blur(3px) brightness(0.72) !important;
}

#training:before{
  background:
    linear-gradient(90deg, rgba(3,8,18,.95), rgba(3,8,18,.82)),
    radial-gradient(circle at 80% 20%, rgba(46,125,50,.18), transparent 40%) !important;
}

#training h2,
#training p{
  text-shadow: 0 4px 22px rgba(0,0,0,.95);
}

#training .relative.z-10{
  background: rgba(3,8,18,.28);
  border-radius: 18px;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media(max-width:767px){
  #training .absolute.inset-0{
    background: rgba(3, 8, 18, 0.86) !important;
  }

  #training .relative.z-10{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}