:root {
  --b-unit: 1vmin;
  --t-unit: 0.5rem;

  --rad1: 3vmin;
  --rad2: 7vmin;
  --border-color: #6c2e00;
  --border-base: 1px;
  --max-body: 1400px;
  --mar-unit: 1vmin;
  /* --primary-color: #ff9933;   /
      --secondary-color: #ffffff;
      --success-color: #138808;  
      --info-color: #cfdef2;   
      --dark-color: #00264d;    
      --light-color: #f5f5f5;   
      --accent-color: #000080;    

  --danger-color: red;
  --warning-color: #ffc107;
  --blue-color:   #1a73e8;
--baseback-antique: rgb(255, 249, 246); */


  --primary-color: #6c2e00;
  --secondary-color: antiquewhite;
  --success-color: #af4e05;
  --info-color: #F1E3C6;
  --dark-color: #1a252f;
  --light-color: #ddeaeb;
  --accent-color: #f0802a;

  --danger-color: red;
  --warning-color: #ffc107;
  --blue-color: #1a73e8;
  --green-color: rgb(11, 219, 11);
  --baseback-antique: rgb(255, 249, 246);


  --white-color: #ffffff;
  --black-color: #222;
  --bg-img-1: "/sa6ang2rha7lay9/1tas2wee1r4sang9/general/sunlight.webp";

  --text: #0f2a4a;
  --muted: #5a6f85;
  --primary: #1b74c9;
  --primary-deep: #0d4d90;
  --panel: #ffffff;
  --panel-2: #eef4ff;
  --accent: #6cb7ff;
  --accent-soft: #dbe9ff;
  --border: rgba(27, 116, 201, 0.12);
  --shadow: 0 18px 50px rgba(18, 53, 100, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  scrollbar-width: none;
  line-height: 1.25;

}


body {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;

  line-height: 1;
}

.bg-img-1 {
  background-image: url("/sa6ang2rha7lay9/1tas2wee1r4sang9/general/sunlight.webp");
}

a {
  color: unset;
}

.link {
  opacity: 0.8;
}

.link:hover {
    opacity: 0.9;
}

.bold {
  font-weight: bold;
}

.bolder {
  font-weight: bolder;
}

.text-italic {
  font-style: italic;
}

.text-oblique {
  font-style: oblique;
}


.hov-focus:hover {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

.ov-auto {
  overflow: auto;
}

.ov-unset {
  overflow: unset;
}

.ov-wrap-normal {
  overflow-wrap: normal;
}

.text1 {
  font-size: clamp(15px, calc(1 * var(--t-unit)), 40px);
}

.text2 {
  font-size: clamp(15px, calc(2 * var(--t-unit)), 40px);
}

.text3 {
  font-size: clamp(15px, calc(3 * var(--t-unit)), 40px);
}

.text4 {
  font-size: clamp(15px, calc(4 * var(--t-unit)), 40px);
}

.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.text-success {
  color: var(--success-color);
}

.text-danger {
  color: var(--danger-color);
}

.text-warning {
  color: var(--warning-color);
}

.text-info {
  color: var(--info-color);
}

.text-light {
  color: var(--light-color);
}

.text-dark {
  color: var(--dark-color);
}

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

.text-blue {
  color: var(--blue-color);
}

/* Background Colors */
.bg-primary {
  background-color: var(--primary-color);
}

.bg-secondary {
  background-color: var(--secondary-color);
}

.bg-success {
  background-color: var(--success-color);
}

.bg-danger {
  background-color: var(--danger-color);
}

.bg-warning {
  background-color: var(--warning-color);
}

.bg-info {
  background-color: var(--info-color);
}

.bg-light {
  background-color: var(--light-color);
}

.bg-dark {
  background-color: var(--dark-color);
}

.bg-blue {
  background-color: var(--blue-color);
}

.bg-accent {
  background-color: var(--accent-color);
}

.bg-white {
  background-color: var(--white-color);
}

.bg-black {
  background-color: var(--black-color);
}


.bg-gradient {
  background: linear-gradient(var(--grad-angle, 90deg),
      var(--grad-start),
      var(--grad-end));
}

/* Primary → */
.grad-ps {
  --grad-start: var(--primary-color);
  --grad-end: var(--secondary-color);
}

.grad-pi {
  --grad-start: var(--primary-color);
  --grad-end: var(--info-color);
}

.grad-pl {
  --grad-start: var(--primary-color);
  --grad-end: var(--light-color);
}

/* Secondary → */
.grad-sp {
  --grad-start: var(--secondary-color);
  --grad-end: var(--primary-color);
}

.grad-si {
  --grad-start: var(--secondary-color);
  --grad-end: var(--info-color);
}

.grad-sl {
  --grad-start: var(--secondary-color);
  --grad-end: var(--light-color);
}

/* Info → */
.grad-ip {
  --grad-start: var(--info-color);
  --grad-end: var(--primary-color);
}

.grad-is {
  --grad-start: var(--info-color);
  --grad-end: var(--secondary-color);
}

.grad-il {
  --grad-start: var(--info-color);
  --grad-end: var(--light-color);
}

/* Light → */
.grad-lp {
  --grad-start: var(--light-color);
  --grad-end: var(--primary-color);
}

.grad-ls {
  --grad-start: var(--light-color);
  --grad-end: var(--secondary-color);
}

.grad-li {
  --grad-start: var(--light-color);
  --grad-end: var(--info-color);
}

/* white → */
.grad-wp {
  --grad-start: var(--white-color);
  --grad-end: var(--primary-color);
}

.grad-ws {
  --grad-start: var(--white-color);
  --grad-end: var(--secondary-color);
}

.grad-wi {
  --grad-start: var(--white-color);
  --grad-end: var(--info-color);
}

.grad-wl {
  --grad-start: var(--white-color);
  --grad-end: var(--light-color);
}

/* black → */
.grad-bp {
  --grad-start: var(--black-color);
  --grad-end: var(--primary-color);
}

.grad-bs {
  --grad-start: var(--black-color);
  --grad-end: var(--secondary-color);
}

.grad-bi {
  --grad-start: var(--black-color);
  --grad-end: var(--info-color);
}

.grad-bl {
  --grad-start: var(--black-color);
  --grad-end: var(--light-color);
}




.grad-ang-0 {
  --grad-angle: 0deg;
}

.grad-ang-20 {
  --grad-angle: 20deg;
}

.grad-ang-45 {
  --grad-angle: 45deg;
}

.grad-ang-90 {
  --grad-angle: 90deg;
}

.grad-ang-135 {
  --grad-angle: 135deg;
}

.grad-ang-180 {
  --grad-angle: 180deg;
}

.grad-ang-225 {
  --grad-angle: 225deg;
}

.grad-ang-270 {
  --grad-angle: 270deg;
}

.grad-ang-315 {
  --grad-angle: 315deg;
}



.flex {
  display: flex;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
}

.flex-space-around {
  display: flex;
  justify-content: space-around;
}

.flex-start {
  display: flex;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.flex-align-top {
  display: flex;
  align-items: flex-start;
}

.flex-align-bottom {
  display: flex;
  align-items: flex-end;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex-align-stretch {
  display: flex;
  align-items: stretch;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-reverse {
  display: flex;
  flex-direction: row-reverse;
}

.flex-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

.gap1 {
  gap: clamp(2px, 1vmin, 10px);
}

.gap2 {
  gap: clamp(5px, 2vmin, 15px);
}

.gap3 {
  gap: clamp(10px, 4vmin, 30px);
}

.btn {
  width: max-content;
  cursor: pointer;
  transition: 0.3s;
}

.border-primary {
  --border-color: var(--primary-color);
}

.border-secondary {
  --border-color: var(--secondary-color);
}

.border-success {
  --border-color: var(--success-color);
}

.border-danger {
  --border-color: var(--danger-color);
}

.border-warning {
  --border-color: var(--warning-color);
}

.border-info {
  --border-color: var(--info-color);
}

.border-light {
  --border-color: var(--light-color);
}

.border-dark {
  --border-color: var(--dark-color);
}

.border1 {
  border: calc(1 * var(--border-base)) solid var(--border-color);
}

.border2 {
  border: calc(2 * var(--border-base)) solid var(--border-color);
}

.border3 {
  border: calc(3 * var(--border-base)) solid var(--border-color);
}

.border4 {
  border: calc(4 * var(--border-base)) solid var(--border-color);
}

.border5 {
  border: calc(5 * var(--border-base)) solid var(--border-color);
}

.border-solid {
  border-style: solid;
}

.border-dotted {
  border-style: dotted;
}

.border-dashed {
  border-style: dashed;
}

.border-double {
  border-style: double;
}

.border-none {
  border-style: none;
}

.btn:hover {
  opacity: 0.8;
}

.btn:active {
  transform: translate(1px, 1px);
  box-shadow: none;
}


.round1 {
  border-radius: 7vmin;
}

.round2 {
  border-radius: 3vmin;
}

.round3 {
  border-radius: 1vmin;
}

.container-full {
  width: 100%;
  height: 100%;
}

.container-max-x {
  max-width: var(--max-body);
  margin: auto;
}

.pad0-1 {
  padding: 0.5vmin;
}

.pad0-5 {
  padding: 2.5vmin;
}

.pad1 {
  padding: 5vmin;
}

.pad2 {
  padding: 3vmin;
}

.pad3 {
  padding: 1vmin;
}

.mar1 {
  margin: 3vmin auto;
}

.mar2 {
  margin: 1vmin auto;
}

.mar3 {
  margin: 0.5vmin auto;
}

.ml1 {
  margin-left: calc(1 * var(--b-unit));
}

.ml2 {
  margin-left: calc(2 * var(--b-unit));
}

.ml3 {
  margin-left: calc(3 * var(--b-unit));
}

.mr1 {
  margin-right: calc(1 * var(--b-unit));
}

.mr2 {
  margin-right: calc(2 * var(--b-unit));
}

.mr3 {
  margin-right: calc(3 * var(--b-unit));
}

.mt1 {
  margin-top: calc(1 * var(--b-unit));
}

.mt2 {
  margin-top: calc(2 * var(--b-unit));
}

.mt3 {
  margin-top: calc(3 * var(--b-unit));
}

.mb1 {
  margin-bottom: calc(1 * var(--b-unit));
}

.mb2 {
  margin-bottom: calc(2 * var(--b-unit));
}

.mb3 {
  margin-bottom: calc(3 * var(--b-unit));
}

.w-max-c {
  width: max-content;
}

/* Viewport Width */
.vw100 {
  width: 100vw;
}

.vw80 {
  width: 80vw;
}

.vw50 {
  width: 50vw;
}

.vw25 {
  width: 25vw;
}

/* Viewport Height */
.vh100 {
  height: 100vh;
}

.vh80 {
  height: 80vh;
}

.vh50 {
  height: 50vh;
}

.vh25 {
  height: 25vh;
}

/* Percentage Width */
.pw100 {
  width: 100%;
}

.pw80 {
  width: 80%;
}

.pw50 {
  width: 50%;
}

.pw45 {
  width: 45%;
}

.pw25 {
  width: 25%;
}

/* Percentage Height */
.ph100 {
  height: 100%;
}

.ph80 {
  height: 80%;
}

.ph50 {
  height: 50%;
}

.ph25 {
  height: 25%;
}


.line1 {
  line-height: 1;
}

.line1-5 {
  line-height: 1.5;
}

.line2 {
  line-height: 2;
}

.op1 {
  opacity: 0.2;
}

.op2 {
  opacity: 0.4;
}

.op3 {
  opacity: 0.6;
}

.op4 {
  opacity: 0.8;
}

.op5 {
  opacity: 1.0;
}

/* ========================= */
/* Block Display Utilities */
/* ========================= */
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none;
}

.ov-hidden {
  overflow: hidden;
}

.ov-scroll {
  overflow: scroll;
}

.ov-scrollx {
  overflow-x: scroll;
}

.ov-scrolly {
  overflow-y: scroll;
}

/* ========================= */
/* Block Alignment Utilities */
/* ========================= */
.abs {
  position: absolute;
}

.absolute {
  position: absolute;
}

/* abs is responsive, not this */
.fixed {
  position: fixed;
}

.rel {
  position: relative;
}

.center {
 margin-left: auto;
 margin-right: auto;
}
.abc {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.middle {
  margin: auto;
}

.min-h-content {
  min-height: max-content;
}

.radius1010 {
  border-radius: 7vmin 0 7vmin 0;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-rigth {
  text-align: right;
}

.left {
  float: left;
  margin-right: auto;
  left: 0;
}

.right {
  float: right;
  margin-left: auto;
  right: 0;
}

.top {
  top: 0;
  margin-top: 0;
}

.square {
  aspect-ratio: 1;
}

.circle {
  aspect-ratio: 1;
  border-radius: 50%;
}

/* Width classes */
.w1 {
  width: calc(100 * var(--b-unit) / 1);
}

.w2 {
  width: calc(100 * var(--b-unit) / 2);
}

.w3 {
  width: calc(100 * var(--b-unit) / 3);
}

.w4 {
  width: calc(100 * var(--b-unit) / 4);
}

.w5 {
  width: calc(100 * var(--b-unit) / 5);
}

.w6 {
  width: calc(100 * var(--b-unit) / 6);
}

.w7 {
  width: calc(100 * var(--b-unit) / 7);
}

.w8 {
  width: calc(100 * var(--b-unit) / 8);
}

.w9 {
  width: calc(100 * var(--b-unit) / 9);
}

.w10 {
  width: calc(100 * var(--b-unit) / 10);
}

.w11 {
  width: calc(100 * var(--b-unit) / 11);
}

.w12 {
  width: calc(100 * var(--b-unit) / 12);
}

/* Height classes */
.ht1 {
  height: calc(100 * var(--b-unit) / 1);
}

.ht2 {
  height: calc(100 * var(--b-unit) / 2);
}

.ht3 {
  height: calc(100 * var(--b-unit) / 3);
}

.ht4 {
  height: calc(100 * var(--b-unit) / 4);
}

.ht5 {
  height: calc(100 * var(--b-unit) / 5);
}

.ht6 {
  height: calc(100 * var(--b-unit) / 6);
}

.ht7 {
  height: calc(100 * var(--b-unit) / 7);
}

.ht8 {
  height: calc(100 * var(--b-unit) / 8);
}

.ht9 {
  height: calc(100 * var(--b-unit) / 9);
}

.ht10 {
  height: calc(100 * var(--b-unit) / 10);
}

.ht11 {
  height: calc(100 * var(--b-unit) / 11);
}

.ht12 {
  height: calc(100 * var(--b-unit) / 12);
}

.rad0000 {
  border-radius: 0 0 0 0;
}

.rad0001 {
  border-radius: 0 0 0 var(--rad1);
}

.rad0010 {
  border-radius: 0 0 var(--rad1) 0;
}

.rad0011 {
  border-radius: 0 0 var(--rad1) var(--rad1);
}

.rad0100 {
  border-radius: 0 var(--rad1) 0 0;
}

.rad0101 {
  border-radius: 0 var(--rad1) 0 var(--rad1);
}

.rad0110 {
  border-radius: 0 var(--rad1) var(--rad1) 0;
}

.rad0111 {
  border-radius: 0 var(--rad1) var(--rad1) var(--rad1);
}

.rad1000 {
  border-radius: var(--rad1) 0 0 0;
}

.rad1001 {
  border-radius: var(--rad1) 0 0 var(--rad1);
}

.rad1010 {
  border-radius: var(--rad1) 0 var(--rad1) 0;
}

.rad1011 {
  border-radius: var(--rad1) 0 var(--rad1) var(--rad1);
}

.rad1100 {
  border-radius: var(--rad1) var(--rad1) 0 0;
}

.rad1101 {
  border-radius: var(--rad1) var(--rad1) 0 var(--rad1);
}

.rad1110 {
  border-radius: var(--rad1) var(--rad1) var(--rad1) 0;
}

.rad1111 {
  border-radius: var(--rad1) var(--rad1) var(--rad1) var(--rad1);
}

.rad2000 {
  border-radius: 0 0 0 0;
}

.rad2001 {
  border-radius: 0 0 0 var(--rad2);
}

.rad2010 {
  border-radius: 0 0 var(--rad2) 0;
}

.rad2011 {
  border-radius: 0 0 var(--rad2) var(--rad2);
}

.rad2100 {
  border-radius: 0 var(--rad2) 0 0;
}

.rad2101 {
  border-radius: 0 var(--rad2) 0 var(--rad2);
}

.rad2110 {
  border-radius: 0 var(--rad2) var(--rad2) 0;
}

.rad2111 {
  border-radius: 0 var(--rad2) var(--rad2) var(--rad2);
}

.rad2200 {
  border-radius: var(--rad2) 0 0 0;
}

.rad2201 {
  border-radius: var(--rad2) 0 0 var(--rad2);
}

.rad2210 {
  border-radius: var(--rad2) 0 var(--rad2) 0;
}

.rad2211 {
  border-radius: var(--rad2) 0 var(--rad2) var(--rad2);
}

.rad2300 {
  border-radius: var(--rad2) var(--rad2) 0 0;
}

.rad2301 {
  border-radius: var(--rad2) var(--rad2) 0 var(--rad2);
}

.rad2310 {
  border-radius: var(--rad2) var(--rad2) var(--rad2) 0;
}

.rad2311 {
  border-radius: var(--rad2) var(--rad2) var(--rad2) var(--rad2);
}


.shadow1 {
  box-shadow: 1vmin 1vmin 5px black;
}

.shadow2 {
  box-shadow: 0.5vmin 0.5vmin 5px black;
}

.shadow3 {
  box-shadow: 0.25vmin 0.25vmin 5px black;
}

.full-width {
  width: 100%;
}

.auto-width {
  width: auto;
}

.max-w1200 {
  max-width: 1200px;
}

.max-w1400 {
  max-width: 1400px;
}

.max-w1600 {
  max-width: 1600px;
}

.height-full {
  height: 100vh;
}

.height-auto {
  height: auto;
}

.ratio1609 {
  aspect-ratio: calc(16 / 9);
}


.z-1 {
  z-index: -1;
}

.z0 {
  z-index: 0;
}

.z1 {
  z-index: 1;
}

.z10 {
  z-index: 10;
}

.z100 {
  z-index: 100;
}

/* ========================= */
/* 7. Animations */
/* ========================= */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* ========================= */
/* 8. Dark Mode Support */
/* ========================= */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-light: #222;
    --bg-dark: #fff;
    --text-light: #fff;
    --text-dark: #000;
  }

}

/* Defines the animation called 'blink' */

@keyframes blink01 {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.blink {
  animation: blink01 0.6s linear 6;
  /* 0.6s per blink × 6 = ~3.6 seconds total blinking */
}


/* 2️⃣ Hide after delay */
@keyframes hideEffect {
  to {
    opacity: 0;
    display: none;
  }
}

.hide-after {
  animation: hideEffect 0s linear 3.6s forwards;
  /* delay must match total blink duration */
}



/* Applies the animation to the .blinking-new class */
.blink01-1500-infinite {
  animation: blink01 1.5s infinite;
  /* Uses the blink animation, running for 1.5 seconds, and repeating forever */
}


@media (max-width: 512px) {
  .abs {
    position: relative;
  }

  :root {
    --t-unit: 2vmin;
  }
}


/* =====================================================
   FONT STACKS — CONSISTENT & SIMILAR FALLBACKS
   Class names MATCH the HTML preview
   ===================================================== */

/* ---------- SYSTEM / DEFAULT ---------- */
.font-system {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* ---------- MODERN UI / NEO-GROTESK ---------- */
.font-inter {
  font-family:
    Inter,
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.font-roboto {
  font-family:
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.font-open-sans {
  font-family:
    "Open Sans",
    Lato,
    "Segoe UI",
    Arial,
    sans-serif;
}

.font-source-sans {
  font-family:
    "Source Sans 3",
    "Open Sans",
    "Segoe UI",
    Arial,
    sans-serif;
}

.font-lato {
  font-family:
    Lato,
    "Open Sans",
    "Segoe UI",
    Arial,
    sans-serif;
}

/* ---------- FRIENDLY / ROUNDED ---------- */
.font-nunito {
  font-family:
    Nunito,
    "Segoe UI",
    Arial,
    sans-serif;
}

.font-poppins {
  font-family:
    Poppins,
    Montserrat,
    "Segoe UI",
    Arial,
    sans-serif;
}

/* ---------- PROFESSIONAL / CORPORATE ---------- */
.font-work-sans {
  font-family:
    "Work Sans",
    "Source Sans 3",
    "Segoe UI",
    Arial,
    sans-serif;
}

.font-montserrat {
  font-family:
    Montserrat,
    Poppins,
    "Segoe UI",
    Arial,
    sans-serif;
}

/* ---------- EDITORIAL / SERIF ---------- */
.font-merriweather {
  font-family:
    Merriweather,
    Georgia,
    "Times New Roman",
    serif;
}

.font-playfair {
  font-family:
    "Playfair Display",
    "Libre Baskerville",
    Georgia,
    serif;
}

.font-libre {
  font-family:
    "Libre Baskerville",
    Georgia,
    "Times New Roman",
    serif;
}

.font-crimson {
  font-family:
    "Crimson Pro",
    Georgia,
    "Times New Roman",
    serif;
}

.font-georgia {
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

/* ---------- MONOSPACE / CODE ---------- */
.font-mono {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

.font-jetbrains {
  font-family:
    "JetBrains Mono",
    "Fira Code",
    Consolas,
    monospace;
}

.font-fira {
  font-family:
    "Fira Code",
    "JetBrains Mono",
    Consolas,
    monospace;
}

/* ---------- LEGACY / MAX COMPATIBILITY ---------- */
.font-legacy-sans {
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

.font-legacy-serif {
  font-family:
    "Times New Roman",
    Times,
    serif;
}

/* =====================================================
   END OF FILE
   ===================================================== */