/* ======================================================
   🔥 DESIGN SYSTEM - HALOFORT (PREMIUM DARK UI)
   Includes: Colors, Typography, Spacing, Layout
====================================================== */

/* ===============================
   GOOGLE FONTS
================================= */
@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');


/* ===============================
   ROOT VARIABLES (COLORS)
================================= */
:root {
  --bg-dark: #0a0a0f;
  --bg-dark-2: #0f1115;
  --bg-gradient: linear-gradient(180deg, #0a0a0f, #111827);

  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.75);
  --text-muted: rgba(255,255,255,0.5);

  --accent: #2dd4d4;
  --accent-2: #4f46e5;
  --accent-gradient: linear-gradient(90deg, #2dd4d4, #4f46e5);

  --border: rgba(255,255,255,0.08);
}

/* ===============================
   GLOBAL RESET
================================= */
body {
  background: var(--bg-dark);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}
h1, h2, h3, h4, h5,h6 {
  font-family: 'Space Grotesk', sans-serif;
}
/* ===============================
   CONTAINER
================================= */
.container-custom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===============================
   TYPOGRAPHY
================================= */

/* Headings */
.heading-xl {
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 56px;
  line-height: 1.2;
  font-weight: 500;
}

.heading-lg {
  font-family: 'Darker Grotesque';
  font-size: 42px;
  font-weight: 500;
}

.heading-md {
  font-family: 'Darker Grotesque';
  font-size: 28px;
  font-weight: 500;
}

/* Body */
.text-body {
  font-size: 18px;
  color: var(--text-secondary);
}

/* Small text */
.text-small {
  font-size: 14px;
  color: var(--text-muted);
}

/* Highlight */
.text-accent {
  color: var(--accent);
}

/* ===============================
   HERO TEXT (LIKE YOUR DESIGN)
================================= */
.hero-text {
  font-family: 'Darker Grotesque';
  font-size: 48px;
  line-height: 1.3;
  font-weight: 500;
  max-width: 700px;
}

.hero-text span {
  color: var(--accent);
}

/* ===============================
   SECTION BACKGROUND
================================= */
.section-dark {
  background: var(--bg-gradient);
}

/* ===============================
   SPACING SYSTEM (TAILWIND STYLE)
================================= */

/* Margin */
.mt-0{margin-top:0}.mt-5{margin-top:5px}.mt-10{margin-top:10px}.mt-15{margin-top:15px}.mt-20{margin-top:20px}.mt-25{margin-top:25px}.mt-30{margin-top:30px}.mt-40{margin-top:40px}.mt-50{margin-top:50px}.mt-60{margin-top:60px}.mt-80{margin-top:80px}
.mb-10{margin-bottom:10px}.mb-20{margin-bottom:20px}.mb-30{margin-bottom:30px}.mb-40{margin-bottom:40px}.mb-50{margin-bottom:50px}

/* Padding */
/* Top */
.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-30 { padding-top: 30px; }
.pt-40 { padding-top: 40px; }
.pt-50 { padding-top: 50px; }
.pt-60 { padding-top: 60px; }
.pt-70 { padding-top: 70px; }
.pt-80 { padding-top: 80px; }
.pt-90 { padding-top: 90px; }
.pt-100 { padding-top: 100px; }
.pt-110 { padding-top: 110px; }
.pt-120 { padding-top: 120px; }
.pt-130 { padding-top: 130px; }
.pt-140 { padding-top: 140px; }
.pt-150 { padding-top: 150px; }

/* Bottom */
.pb-10 { padding-bottom: 10px; }
.pb-20 { padding-bottom: 20px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pb-50 { padding-bottom: 50px; }
.pb-60 { padding-bottom: 60px; }
.pb-70 { padding-bottom: 70px; }
.pb-80 { padding-bottom: 80px; }
.pb-90 { padding-bottom: 90px; }
.pb-100 { padding-bottom: 100px; }
.pb-110 { padding-bottom: 110px; }
.pb-120 { padding-bottom: 120px; }
.pb-130 { padding-bottom: 130px; }
.pb-140 { padding-bottom: 140px; }
.pb-150 { padding-bottom: 150px; }

/* Left */
.pl-10 { padding-left: 10px; }
.pl-20 { padding-left: 20px; }
.pl-30 { padding-left: 30px; }
.pl-40 { padding-left: 40px; }
.pl-50 { padding-left: 50px; }
.pl-60 { padding-left: 60px; }
.pl-70 { padding-left: 70px; }
.pl-80 { padding-left: 80px; }
.pl-90 { padding-left: 90px; }
.pl-100 { padding-left: 100px; }
.pl-110 { padding-left: 110px; }
.pl-120 { padding-left: 120px; }
.pl-130 { padding-left: 130px; }
.pl-140 { padding-left: 140px; }
.pl-150 { padding-left: 150px; }

/* Right */
.pr-10 { padding-right: 10px; }
.pr-20 { padding-right: 20px; }
.pr-30 { padding-right: 30px; }
.pr-40 { padding-right: 40px; }
.pr-50 { padding-right: 50px; }
.pr-60 { padding-right: 60px; }
.pr-70 { padding-right: 70px; }
.pr-80 { padding-right: 80px; }
.pr-90 { padding-right: 90px; }
.pr-100 { padding-right: 100px; }
.pr-110 { padding-right: 110px; }
.pr-120 { padding-right: 120px; }
.pr-130 { padding-right: 130px; }
.pr-140 { padding-right: 140px; }
.pr-150 { padding-right: 150px; }
.pt-10{padding-top:10px}.pt-20{padding-top:20px}.pt-30{padding-top:30px}.pt-40{padding-top:40px}.pt-50{padding-top:50px}
.pb-10{padding-bottom:10px}.pb-20{padding-bottom:20px}.pb-30{padding-bottom:30px}.pb-40{padding-bottom:40px}.pb-50{padding-bottom:50px}

.p-20{padding:20px}.p-30{padding:30px}.p-40{padding:40px}

/* Combined */
.ptb-40{padding:40px 0}.ptb-80{padding:80px 0}.ptb-120{padding:120px 0}
.plr-20{padding:0 20px}.plr-40{padding:0 40px}

/* Negative */
.mt-neg-20{margin-top:-20px}
.mb-neg-50{margin-bottom:-50px}

/* ===============================
   BUTTONS
================================= */
.btn-primary {
  background: var(--accent-gradient);
  border: none;
  padding: 10px 25px;
  color: #fff;
  border-radius: 50px;
  transition: 0.3s;
}

.btn-primary:hover {
  opacity: 0.9;
}

/* ===============================
   CARD
================================= */
.card-dark {
  background: var(--bg-dark-2);
  border: 1px solid var(--border);
  padding: 30px;
  border-radius: 12px;
}

/* ===============================
   RESPONSIVE
================================= */
@media (max-width: 991px) {

  .heading-xl { font-size: 40px; }
  .heading-lg { font-size: 32px; }

  .hero-text { font-size: 32px; }

  .ptb-120 { padding: 80px 0; }
}

@media (max-width: 576px) {

  .hero-text { font-size: 26px; }

  .ptb-120 { padding: 60px 0; }
}


Nutton-2
/* From Uiverse.io by css.learn-mores-io */ 
.learn-more {
 position: relative;
 display: inline-block;
 cursor: pointer;
 outline: none;
 border: 0;
 vertical-align: middle;
 text-decoration: none;
 background: transparent;
 padding: 0;
 font-size: inherit;
 font-family: inherit;
}

.learn-more.learn-more {
 width: 12rem;
 height: auto;
}

.learn-more.learn-more .circle {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: relative;
 display: block;
 margin: 0;
 width: 3rem;
 height: 3rem;
 background: #282936;
 border-radius: 1.625rem;
}

.learn-more.learn-more .circle .icon {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto;
 background: #fff;
}

.learn-more.learn-more .circle .icon.arrow {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 left: 0.625rem;
 width: 1.125rem;
 height: 0.125rem;
 background: none;
}

.learn-more.learn-more .circle .icon.arrow::before {
 position: absolute;
 content: "";
 top: -0.29rem;
 right: 0.0625rem;
 width: 0.625rem;
 height: 0.625rem;
 border-top: 0.125rem solid #fff;
 border-right: 0.125rem solid #fff;
 transform: rotate(45deg);
}

.learn-more.learn-more ..learn-more-text {
 transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 0.75rem 0;
 margin: 0 0 0 1.85rem;
 color: #282936;
 font-weight: 700;
 line-height: 1.6;
 text-align: center;
 text-transform: uppercase;
}

.learn-more:hover .circle {
 width: 100%;
}

.learn-more:hover .circle .icon.arrow {
 background: #fff;
 transform: translate(1rem, 0);
}

.learn-more:hover ..learn-more-text {
 color: #fff;
}