@charset "UTF-8";
/* --------------------       | import       -------------------- */
/* bootstrap framework */
/* @import url('https://swarnolata.org/style/bootstrap-v5.3.8.css'); */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css');

/* font google */ 
@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light|Abel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
/* --------------------       import |       -------------------- */

/*
https://materialpalettes.com/?primary=4c0082
primary
#4c0082 #6b058f #7b0997 #8e0f9e #9b11a4 #ab3cb1 #ba60be #ce8ed1 #e1bbe3 #f3e4f3
com
#006100 #368200 #4c960d #61a919 #70b921 #86c348 #9ccd6b #ce8ed1 #e1bbe3 #f3e4f3
ana
#0b0082 #2b0d8f #391496 #471c9f #5020a4 #6b42b1 #8563be #a78fd0 #cabce2 #eae4f3

tria

#4e1700 #5c2700 #683500 #774200 #824c00 #9c6425 #b57e43 #d89f69 #f7c38e #ffe5ad

*/

/* -------------------- -------------------- -------------------- */
/* | color palette framework (vibgyor indigo) */
:root,
[data-s-theme='framework'] {
  /* base */
  --s-base-100: oklch(0.739 0.17 301.685); /* P3 #bf8dff; near white */
  --s-base-95: oklch(0.672 0.218 301.685); /* P3 #b06bff; */
  --s-base-90: oklch(0.606 0.268 301.685); /* P3 #a33fff; lighter */
  --s-base-80: oklch(0.539 0.285 301.685); /* #9100f3; */
  --s-base-70: oklch(0.472 0.25 301.685); /* P3 #7900cc; light */
  --s-base-60: oklch(0.406 0.215 301.685); /* P3 #6200a7; */
  --s-base-50: oklch(0.339 0.1793 301.685); /* #4b0082; base */
  --s-base-40: oklch(0.291 0.154 301.685); /* P3 #3c0069; */
  --s-base-30: oklch(0.243 0.128 301.685); /* #2d0051; dark */
  --s-base-20: oklch(0.194 0.103 301.685); /* P3 #1e003a; */
  --s-base-10: oklch(0.146 0.077 301.685); /* #110024; darker */
  --s-base-05: oklch(0.098 0.052 301.685); /* #060011; */
  --s-base-0: oklch(0.05 0.026 301.685); /* #010002; near black */

  --s-base-100: oklch(0.895 0.093 325.232); /* P3 #bf8dff; near white */
  --s-base-95: oklch(0.828 0.156 325.232); /* P3 #b06bff; */
  --s-base-90: oklch(0.761 0.222 325.232); /* P3 #a33fff; lighter */
  --s-base-80: oklch(0.695 0.291 325.232); /* #9100f3; */
  --s-base-70: oklch(0.628 0.281 325.232); /* P3 #7900cc; light */
  --s-base-60: oklch(0.561 0.252 325.232); /* P3 ; */
  --s-base-50: oklch(0.495 0.222 325.232); /* #9b11a4; base */
  --s-base-40: oklch(0.428 0.192 325.232); /* P3 ; */
  --s-base-30: oklch(0.361 0.162 325.232); /* #2d0051; dark */
  --s-base-20: oklch(0.295 0.132 325.232); /* P3 #1e003a; */
  --s-base-10: oklch(0.228 0.102 325.232); /* #110024; darker */
  --s-base-05: oklch(0.161 0.072 325.232); /* #060011; */
  --s-base-0: oklch(0.095 0.042 325.232); /* #010002; near black */
  /* alternate */
  --s-alt-100: oklch(0.802 0.099 291.707); /* ; near white */
  --s-alt-95: oklch(0.735 0.135 291.707); /* ; */
  --s-alt-90: oklch(0.668 0.173 291.707); /* ; lighter */
  --s-alt-80: oklch(0.602 0.212 291.707); /* ; */
  --s-alt-70: oklch(0.535 0.253 291.707); /* ; light */
  --s-alt-60: oklch(0.468 0.224 291.707); /* ; */
  --s-alt-50: oklch(0.402 0.192 291.707); /* #5020a4; alternate */
  --s-alt-40: oklch(0.343 0.164 291.707); /* ; */
  --s-alt-30: oklch(0.284 0.136 291.707); /* ; dark */
  --s-alt-20: oklch(0.226 0.108 291.707); /* ; */
  --s-alt-10: oklch(0.167 0.08 291.707); /* ; darker */
  --s-alt-05: oklch(0.109 0.052 291.707); /* ; */
  --s-alt-0: oklch(0.05 0.024 291.707); /* ; near black */
  /* accent */
  --s-acc-100: oklch(0.869 0.103 65.119); /* ; near white */
  --s-acc-95: oklch(0.803 0.163 65.119); /* ; */
  --s-acc-90: oklch(0.736 0.165 65.119); /* ; lighter */
  --s-acc-80: oklch(0.669 0.15 65.119); /* ; */
  --s-acc-70: oklch(0.603 0.135 65.119); /* ; light */
  --s-acc-60: oklch(0.536 0.12 65.119); /* ; */
  --s-acc-50: oklch(0.469 0.105 65.119); /* #824c00; accent */
  --s-acc-40: oklch(0.403 0.09 65.119); /* ; */
  --s-acc-30: oklch(0.336 0.075 65.119); /* ; dark */
  --s-acc-20: oklch(0.269 0.06 65.119); /* ; */
  --s-acc-10: oklch(0.203 0.045 65.119); /* ; darker */
  --s-acc-05: oklch(0.136 0.03 65.119); /* ; */
  --s-acc-0: oklch(0.069 0.016 65.119); /* ; near black */
}
/* color palette framework (vibgyor indigo) | */
/* -------------------- -------------------- -------------------- */


/* -------------------- -------------------- -------------------- */
/* =========================================
   LAYOUT PRIMITIVES (FRAMEWORK PREVIEW)
   To be tested on trial-page1.htm
   ========================================= */
:root {
  --content-max-width: 1200px;
  --spacing-base: 1rem;
  --gap-md: 1.5rem;
}
/* 1. Container */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto; /* modern equivalent of margin: 0 auto */
  padding-inline: var(--spacing-base);
}

/* 2. Simple 12-Column Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap-md);
}

/* Column span utilities */
.col-12 { grid-column: span 12; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }

@media (max-width: 767px) {
  /* Force all columns to full width on mobile by default */
  .grid > [class*="col-"] {
    grid-column: span 12;
  }
}




/* -------------------- -------------------- -------------------- */

/* --- Basic Reset & Navbar Container --- */
.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #333;
  display: flex; /* Aligns the main links in a row */
}

/* --- Main Navigation Links --- */
.main-nav li {
  position: relative; /* Crucial: Keeps the absolute dropdown attached to this parent */
}

.main-nav a {
  display: block;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
  font-family: sans-serif;
}

.main-nav a:hover {
  background-color: #555;
}

/* --- The Dropdown Menu (Hidden by default) --- */
.dropdown-menu {
  display: none; /* Hides the menu */
  position: absolute; /* Takes it out of document flow */
  top: 100%; /* Positions it exactly right below the parent link */
  left: 0;
  background-color: #444;
  min-width: 180px;
  flex-direction: column; /* Stacks the dropdown links vertically */
  z-index: 1000; /* Ensures it stays on top of page content */
}

/* --- Show Dropdown on Hover --- */
.dropdown:hover .dropdown-menu {
  display: flex; /* Reveals the menu when the parent li is hovered */
}

/* Adjust dropdown link colors for slight contrast */
.dropdown-menu a:hover {
  background-color: #666;
}


/* -------------------- -------------------- -------------------- */