/* --------------------   edited jul 26   -------------------- */
/* -------------------- -------------------- --------------------
 * swarnolata.org/style/style-digital.css
 * Custom style for all pages of website | digital.swarnolata.org
 * (present - swarnolata.org/digital/)
 * Author:  Subrato Paul at Swarnolata Digital
 * Website: https://swarnolata.org/
 * CSS used here will be applied after swarnolata-ui.css
 * Basic layout: Header, Content, Footer
 * Description: One-column 992px responsive layout with fixed top nav bar, sticky footer, no sidebar.
 * Theme Color Scheme: #18adfe
 * -------------------- -------------------- -------------------- */
@charset 'UTF-8';
/* -------------------- -------------------- --------------------
   Table of Content

   | newadd

   | import
   | root
   | main root
   | nav bar
   
   | color theme
   
   | sectioning root
   | content sectioning
   | base
   | font
   | loader
   | header
   | nav-bar
   | nav-bar animation
   | nav-bar shadow
   | background image full
   | mouse icon

| content page

| typography

| component
| css tabs
| component - breadcrumb
| component - social share button
| component - jumbotron
| component - carousel
| component - advertise
   
| footer
| social icons
| form

| button

success

   
   | color theme
     | button
     | gradient
     | separator

   style-site |
 * -------------------- -------------------- -------------------- */
/* -------------------- -------------------- -------------------- */
/*                    |  digital color palette                    */
/* tool used - 
   https://m2.material.io/inline-tools/color/ 
   https://htmlcolorcodes.com/color-picker/
   https://oklch.com/
   https://oklch.net/
   https://oklch.fyi/create
 * base (brand) | alt (Analogous 1) | com (complementary)
 * base (brand) > primary | secondary | tertiary
 * use only 5 colors 90, 70, base/alt/com 50, 30, 10
 * -------------------- -------------------- -------------------- */
/* -------------------- -------------------- -------------------- */
/* | digital color palette */
/* cf style-blue.css */
:root,
[data-s-theme='digital'] {
  /* color conversion */
  --s-base-hex: #18adfe;
  --s-base-rgb: rgb(24, 173, 254);
  --s-base-hsl: hsl(201, 99%, 55%);
  --s-base-oklch: oklch(0.715 0.1623 241.18);
  --s-brand: oklch(0.715 0.1623 241.18);
  /* lch components as variables */
  --s-base-l: 0.715; /* lightness */
  --s-base-c: 0.1623; /* saturation */
  --s-base-h: 241.18; /* hue */
  /* combine lch into a color */
  --s-base-50: oklch(
                var(--s-base-l) 
                var(--s-base-c) 
                var(--s-base-h));
  --s-base-a: 1;  
  --s-base-a75: 0.75;
  --s-base-a50: 0.50;
  --s-base-a25: 0.25;
  --s-base-50-a: oklch(
               var(--s-base-l / var(--s-base-a)) 
               var(--s-base-c) 
               var(--s-base-h));
  --s-base-50-a75: oklch(
               var(--s-base-l / var(--s-base-a75)) 
               var(--s-base-c) 
               var(--s-base-h));
  --s-base-50-a50: oklch(
               var(--s-base-l / var(--s-base-a50)) 
               var(--s-base-c) 
               var(--s-base-h));
  --s-base-50-a25: oklch(
               var(--s-base-l / var(--s-base-a25)) 
               var(--s-base-c) 
               var(--s-base-h));                                       
  --s-base-web-safe: #3366ff; /* nearest */
/* -------------------- -------------------- */
  /* REVISED - PASSED */
  /* digital sub-palette 70% base
     lighter, light, base, dark, darker */
/* checkout
https://oklch.fyi/create
Number of Colors  - 13
Color Space - Display P3
X - P3 is unavailable on this monitor
Y - Rec2020 is unavailable on this monitor
oklch(0.852 0.08 264.052)
*/
  --s-base-100: ; /*  */    
  --s-base-95: oklch(0.95 0.026 241.177); /* #e0f1ff ~white */
  --s-base-90: oklch(0.9004 0.061 228.84); /* #b5e7ff lighter */
  /* 
  filter: invert(92%) sepia(47%) saturate(4193%) hue-rotate(171deg) brightness(101%) contrast(101%);
  Loss: 4.1. This is close enough.
  */
  --s-base-80: oklch(0.8403 0.099 230.11); /* #83d7ff */
  --s-base-70: oklch(0.7861 0.1308 232.77); /* #52c7ff light */
  --s-base-60: oklch(0.7483 0.1497 236.5); /* #2fbaff */
  /* ? not working */
  --s-base-50: oklch(0.715 0.1623 241.18); /* #18adfe base */
  --s-base-40: oklch(0.675 0.1576 243.03); /* #189fef */
  --s-base-30: oklch(0.6193 0.1509 245.54); /* #178cda dark */
  --s-base-20: oklch(0.5677 0.1438 247.58); /* #157bc6 */ 
  --s-base-10: oklch(0.468 0.1366 253.97); /* #135aa4 darker */      
  --s-base-05: oklch(0.315 0.073 241.177); /* #013553 */
  --s-base-0: ;
  /* very light (mostly white) base */
  --s-base-light: oklch(0.9031 0.0143 241.18); /* #d7e0e8 */
  /* oklch(0.9 0.03 241);  #cde1f0 */
  /* very dark (mostly black) base */
  --s-base-dark: oklch(0.2416 0.0244 241.18); /* #15212a */
  /* oklch(0.3 0.03 241); #20303c */
/* -------------------- -------------------- */
  --s-alt-95: oklch(0.9706 0.0411 183.41); /* #d8fff8 */
  --s-alt-90: oklch(0.9304 0.098 179.68); /* #9bfeea */
  --s-alt-80: oklch(0.8929 0.1625 177.66); /* alt 80 #18fedb  */
  --s-alt-70: oklch(0.872944 0.167364 173.1608); /* #00f8cb */
  --s-alt-60: oklch(0.8444 0.1665 170.36); /* #00eebc */
  --s-alt-50: oklch(0.821247 0.166865 167.7124); /* #00e6af */
  --s-alt-40: oklch(0.774446 0.159602 166.5499); /* #00d59f */
  --s-alt-30: oklch(0.720797 0.153171 164.2059); /* #00c28b */
  --s-alt-20: oklch(0.6727 0.1451 163.12); /* #00b17c */ 
  --s-alt-10: oklch(0.578398 0.135177 158.0517); /* #00915a */ 
  
  /* very light (mostly white) alt */
  --s-alt-light: oklch(0.9126 0.0221 167.7124); /* #d5e7df */
  /* very dark (mostly black) alt */
  --s-alt-dark: oklch(0.2202 0.0221 167.7124); /* #101e19 */
/* -------------------- -------------------- */
/* edit */
  --s-com-100: ; /* X #ffe9db */
  --s-com-95: oklch(0.976562 0.030054 90.3236); /* #fff7e1 */
  --s-com-90: oklch(0.9409 0.074 89.6); /* #ffeab3 */
  --s-com-80: oklch(0.9052 0.1161 88.79); /* #ffdc82 */
  --s-com-70: oklch(0.8763 0.1499 88.25); /* #ffd051 */
  --s-com-60: oklch(0.851 0.1637 84.84); /* #ffc42e */
  --s-com-50: oklch(0.8313 0.1679 80.85); /* #ffba18 com */
  --s-com-40: oklch(0.8055 0.1676 73.57); /* #ffac15 */
  --s-com-30: oklch(0.7741 0.1707 64.04); /* #ff9a16 */
  --s-com-20: oklch(0.7463 0.1779 55.65); /* #ff8917 */ 
  --s-com-10: oklch(0.6987 0.1988 43.03); /* #fe6918 */
  --s-com-05: ; /* #703500 */
  --s-com-0: ; /* #562700 */
  /* very light (mostly white) com */
  --s-com-light: oklch(0.9062 0.0433 80.85); /* #efdec0 */
  /* very dark (mostly black) com */
  --s-com-dark: oklch(0.2653 0.0266 80.85); /* #2c2416 */
}
/* -------------------- -------------------- */
.btn-com {
  color: oklch(var(--s-com-100));
  background-color: oklch(var(--s-com-50));
}
.btn-com:hover {
  color: oklch(var(--s-com-50));
  background-color: oklch(var(--s-com-100));
}
  /*
  --s-btn-color: #000;
  --s-btn-bg: #ffc107;
  --s-btn-border-color: #ffc107;
  --s-btn-hover-color: #000;
  --s-btn-hover-bg: #ffca2c;
  --s-btn-hover-border-color: #ffc720;
  --s-btn-focus-shadow-rgb: 217, 164, 6;
  --s-btn-active-color: #000;
  --s-btn-active-bg: #ffcd39;
  --s-btn-active-border-color: #ffc720;
  --s-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --s-btn-disabled-color: #000;
  --s-btn-disabled-bg: #ffc107;
  --s-btn-disabled-border-color: #ffc107;
*/
/* -------------------- -------------------- */
/* edit */
/* | alerts */
:root {
  --s-info-50: #d8fff8;
  --s-info-200: #18fedc; 
  --s-info: #00e6af;
  --s-info-700: #00c28b;
  --s-info-900: #00915a;

  --s-warning-50: #fff7e1;
  --s-warning-200: #ffdc82;
  --s-warning: #ffba18;
  --s-warning-700: #ff9a16;
  --s-warning-900: #fe6918; 

  --s-error-50: #ffebf0;
  --s-error-200: #fc989f;
  --s-error: #fe183a;
  --s-error-700: #eb0034;
  --s-error-900: #d1001e;

  --s-success-50: #f5ffe8;
  --s-success-200: #d6ff9c;
  --s-success: #adfe18;
  --s-success-700: #97d300;
  --s-success-900: #779200;
}
/* alerts | */
/* -------------------- -------------------- */
/* [data-s-theme='digital'] | */
/* -------------------- -------------------- */
/* [data-bs-theme='light'] | */
:root,
[data-bs-theme='light'] {

  --bs-emphasis-color: oklch(0 0 0); /*#000;*/
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-emphasis-color: oklch(var(--s-base-10));
  --bs-emphasis-color: oklch(var(--s-base-90));

  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;



  --bg-color: var(--s-base-light) !important; /* var(--s-white) */
  --text-color: var(--s-base-dark) !important;  /* var(--s-black) */
  --heading-color: var(--s-base-10) !important; 

  --switch-bg: lime !important; /* ? #ccc Light grey switch background */
  --slider-color: cyan; /* ? #fff White toggle circle */
}
/* [data-bs-theme='light'] | */
/* -------------------- -------------------- */
/* [data-bs-theme='dark'] | */
:root,
[data-bs-theme='dark'] {
  --bg-color: var(--s-base-dark) !important;  /* var(--s-black) */
  --text-color: var(--s-base-light) !important;  /* var(--s-white) */
  --heading-color: var(--s-base-90) !important; 
    
  --switch-bg: cyan !important;  /* ? #666 Darker switch background */
  --slider-color: #fff; /* Keep toggle circle white */
}
/* [data-bs-theme='dark'] | */
/* -------------------- -------------------- */
/* | analogous */
:root {
  --s-ana-50: #fff7e0;
    --s-ana2-50: #d9fffb;
}
/* analogous | */
/* -------------------- -------------------- */
/* | triadic */
:root {
  --s-tri-50: #fff7e0;
 --s-tri2-50: #fde3f1;  
}
/* triadic | */
/* -------------------- -------------------- */
/* |  */
:root {

}
/*  | */
/* -------------------- -------------------- */
:root {

}
/*  | */
/* -------------------- -------------------- */
/* |  */
:root {

}
/*  | */
/* -------------------- -------------------- */
:root {

}
/*  | */
/* -------------------- -------------------- */
/* |  */
:root {

}
/*  | */
/* -------------------- -------------------- */
/* | tints */
:root {
/* Color Variations */
  --s-tint1: oklch(0.97 0.01 252); /* */
  --s-tint2: oklch(0.95 0.03 248); /* */
  --s-tint3: oklch(0.92 0.04 249); /* */
  --s-tint4: oklch(0.90 0.05 248); /* */  
  --s-tint5: oklch(0.87 0.07 248); /* */
  --s-tint6: oklch(0.85 0.08 247); /* */
  --s-tint7: oklch(0.82 0.10 246); /* */
  --s-tint8: oklch(0.79 0.11 245); /* */  
  --s-tint9: oklch(0.77 0.13 245); /* */
  --s-tint10: oklch(0.74 0.14 243); /* */
  --s-base-50: oklch(0.715 0.1623 241.18); /* */
/* tints | */
/* | shades */  
  --s-base-50: oklch(0.715 0.1623 241.18); /* */
  --s-shade2: oklch(0.66 0.15 241); /* */
  --s-shade3: oklch(0.61 0.13 242); /* */
  --s-shade4: oklch(0.56 0.12 242); /* */  
  --s-shade5: oklch(0.50 0.10 243); /* */
  --s-shade6: oklch(0.45 0.09 243); /* */
  --s-shade7: oklch(0.40 0.07 243); /* */
  --s-shade8: oklch(0.35 0.06 244); /* */  
  --s-shade9: oklch(0.30 0.04 244); /* */
  --s-shade10: oklch(0.24 0.03 247); /* */
  --s-shade11: oklch(0.19 0.02 249); /* */
}
/* shades | */
/* -------------------- -------------------- */
html {
  scroll-behavior: smooth;
}
/* -------------------- -------------------- */ 
/* | conversion */
.s-base-hex {
  background-color: var(--s-hex); /* #18adfe */
}
.s-base-rgb {
  background-color: var(--s-rgb); /* rgb(24, 173, 254) */
}
.s-base-hsl {
  background-color: var(--s-hsl); /* hsl(201, 99%, 55%) */
}
.s-base-oklch {
  background-color: var(--s-brand); /* oklch(0.715 0.1623 241.18) */
}
.s-base-brand {
  background-color: var(--s-brand); /* oklch(0.715 0.1623 241.18) */
}
/* conversion | */
/* -------------------- -------------------- */

/* -------------------- -------------------- */
/* | base */
.s-base-95-fg {
  color: var(--s-base-95);
}
.s-base-95-bg {
  background-color: var(--s-base-95); 
}
.s-base-95 {
  background-color: var(--s-base-95); /* oklch() */
}
.s-base-90-fg {
  color: var(--s-base-90);
}
.s-base-90-bg {
  background-color: var(--s-base-90); 
}
.s-base-90 {
  background-color: var(--s-base-90); /* #b5e7ff */
}
.s-base-80-fg {
  color: var(--s-base-80);
}
.s-base-80-bg {
  background-color: var(--s-base-80); 
}
.s-base-80 {
  background-color: var(--s-base-80); /* oklch() */
}
.s-base-70-fg {
  color: var(--s-base-70);
}
.s-base-70-bg {
  background-color: var(--s-base-70); 
}
.s-base-70 {
  background-color: var(--s-base-70); /* oklch() */
}
.s-base-60-fg {
  color: var(--s-base-60);
}
.s-base-60-bg {
  background-color: var(--s-base-60); 
}
.s-base-60 {
  background-color: var(--s-base-60); /* oklch() */
}
.s-base-50-fg {
  color: var(--s-base-50);
}
.s-base-50-bg {
  background-color: var(--s-base-50); 
}
.s-base-50 {
  background-color: var(--s-brand); /* #18adfe */
}
.s-base-50-fg {
  color: var(--s-base-50); /* #fdf7e1; 50 */
}
.s-base-50-bg {
  background-color: var(--s-base-50); /* #fdf7e1; 50 */
}
.s-base-40-fg {
  color: var(--s-base-40);
}
.s-base-40-bg {
  background-color: var(--s-base-40); 
}
.s-base-40 {
  background-color: var(--s-base-40); /* oklch() */
}
.s-base-30-fg {
  color: var(--s-base-30);
}
.s-base-30-bg {
  background-color: var(--s-base-30); 
}
.s-base-30 {
  background-color: var(--s-base-30); /* oklch() */
}
.s-base-20-fg {
  color: var(--s-base-20);
}
.s-base-20-bg {
  background-color: var(--s-base-20); 
}
.s-base-20 {
  background-color: var(--s-base-20); /* oklch() */
}
.s-base-10-fg {
  color: var(--s-base-10);
}
.s-base-10-bg {
  background-color: var(--s-base-10); 
}
.s-base-10 {
  background-color: var(--s-base-10); /* oklch() */
}
.s-base-05-fg {
  color: var(--s-base-05);
}
.s-base-05-bg {
  background-color: var(--s-base-05); 
}
.s-base-05 {
  background-color: var(--s-base-05); /* oklch() */
}
/* base | */
/* -------------------- -------------------- */
/* | alt */
.s-alt-95 {
  background-color: var(--s-alt-95); /* oklch() */
}
.s-alt-90 {
  background-color: var(--s-alt-90); /* oklch() */
}
.s-alt-80 {
  background-color: var(--s-alt-80); /* oklch() */
}
.s-alt-70 {
  background-color: var(--s-alt-70); /* oklch() */
}
.s-alt-60 {
  background-color: var(--s-alt-60); /* oklch() */
}
.s-alt-50-fg {
  color: var(--s-alt-50);
}
.s-alt-50-bg {
  background-color: var(--s-alt-50); 
}
.s-alt-50 {
  background-color: var(--s-alt-50); /* oklch() */
}
.s-alt-40 {
  background-color: var(--s-alt-40); /* oklch() */
}
.s-alt-30 {
  background-color: var(--s-alt-30); /* oklch() */
}
.s-alt-20 {
  background-color: var(--s-alt-20); /* oklch() */
}
.s-alt-10-fg {
  color: var(--s-alt-10);
}
.s-alt-10-bg {
  background-color: var(--s-alt-10); 
}
.s-alt-10 {
  background-color: var(--s-alt-10); /* oklch() */
}
.s-alt-05 {
  background-color: var(--s-alt-05); /* oklch() */
}
/* alt | */
/* -------------------- -------------------- */
/* |  */
.s-com-0 {
  background-color: var(--s-com-0); /* ? */
}

.s-com-95 {
  background-color: var(--s-com-95); /* oklch() */
}
.s-com-90 {
  background-color: var(--s-com-90); /* oklch() */
}
.s-com-80 {
  background-color: var(--s-com-80); /* oklch() */
}
.s-com-70 {
  background-color: var(--s-com-70); /* oklch() */
}
.s-com-60 {
  background-color: var(--s-com-60); /* oklch() */
}
.s-com-50 {
  background-color: var(--s-com-50); /* oklch() */
}
.s-com-40 {
  background-color: var(--s-com-40); /* oklch() */
}
.s-com-30 {
  background-color: var(--s-com-30); /* oklch() */
}
.s-com-20 {
  background-color: var(--s-com-20); /* oklch() */
}
.s-com-10 {
  background-color: var(--s-com-10); /* oklch() */
}
.s-com-05 {
  background-color: var(--s-com-05); /* oklch() */
}
/*  | */
/* -------------------- -------------------- */
/* |  */

.s-base-light {
  color: var(--s-base-dark);
  background-color: var(--s-base-light); 
  border: 1px solid var(--s-base-dark);  
}
.s-base-light-fg {
  color: var(--s-base-light);
}
.s-base-light-bg {
  background-color: var(--s-base-light); 
}
.s-base-light-b {
  border: 1px solid var(--s-base-light);
}
.s-base-dark {
  color: var(--s-base-light);
  background-color: var(--s-base-dark); 
  border: 1px solid var(--s-base-light);
}
.s-base-dark-fg {
  color: var(--s-base-dark);
}
.s-base-dark-bg {
  background-color: var(--s-base-dark); 
}
.s-base-dark-b {
  border: 1px solid var(--s-base-dark);
}

/*  | */
/* -------------------- -------------------- */
/* |  */

/*  | */
/* -------------------- -------------------- */



/* -------------------- -------------------- -------------------- */
/* -------------------- -------------------- */
/* -------------------- */
/* from swarnolata-preserve.css */
/* | Navbar */
/* X? --bs-emphasis-color */
.navbar {
  --bs-navbar-color: oklch(from var(--s-base-90) l c h / 0.65);
  --bs-navbar-hover-color: oklch(from var(--s-base-90) l c h / 0.8);
  --bs-navbar-disabled-color: oklch(from var(--s-base-90) l c h / 0.3);
  --bs-navbar-active-color: oklch(from var(--s-base-90) l c h / 1);
  --bs-navbar-brand-color: oklch(from var(--s-base-90) l c h / 1);
  --bs-navbar-brand-hover-color: oklch(from var(--s-base-90) l c h / 0.8);

  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: oklch(from var(--s-base-90) l c h / 0.15);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
/* -------------------- */
.navbar-nav {
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--bs-navbar-active-color);
}
.navbar-nav .dropdown-menu {
  position: static;
}
.dropdown-menu {
  --bs-dropdown-zindex: 9999;
}
.navbar-text {
  color: var(--bs-navbar-color);
}
.navbar-text a,
.navbar-text a:hover,
.navbar-text a:focus {
  color: var(--bs-navbar-active-color);
}
/* -------------------- */
.nav-bar-toggler {
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
/* -------------------- -------------------- */

/* -------------------- -------------------- -------------------- */
/* | s-nav-bar-light */
/* not in bs5 */
.s-nav-bar-light .s-nav-bar-brand {
  color: rgba(11, 67, 170, 0.9);
}
.s-nav-bar-light .s-nav-bar-brand:hover,
.s-nav-bar-light .s-nav-bar-brand:focus {
  color: rgba(11, 67, 170, 0.9);
}
.s-nav-bar-light .s-nav-bar-nav .nav-link {
  color: rgba(11, 67, 170, 0.55);
}
.s-nav-bar-light .s-nav-bar-nav .nav-link:hover,
.s-nav-bar-light .s-nav-bar-nav .nav-link:focus {
  color: rgba(11, 67, 170, 0.7);
}
.s-nav-bar-light .s-nav-bar-nav .nav-link.disabled {
  color: rgba(11, 67, 170, 0.3);
}
.s-nav-bar-light .s-nav-bar-nav .show > .nav-link,
.s-nav-bar-light .s-nav-bar-nav .nav-link.active {
  color: rgba(11, 67, 170, 0.9);
}
.s-nav-bar-light .s-nav-bar-toggler {
  color: rgba(11, 67, 170, 0.55);
  border-color: rgba(11, 67, 170, 0.1);
}
.s-nav-bar-light .s-nav-bar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.s-nav-bar-light .s-nav-bar-text {
  color: rgba(11, 67, 170, 0.55);
}
.s-nav-bar-light .s-nav-bar-text a,
.s-nav-bar-light .s-nav-bar-text a:hover,
.s-nav-bar-light .s-nav-bar-text a:focus {
  color: rgba(11, 67, 170, 0.9);
}
/* s-nav-bar-light | */
/* -------------------- -------------------- -------------------- */
/* | s-nav-bar-dark */
.navbar-dark,
.navbar[data-bs-theme=dark] {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


[data-bs-theme=dark] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.s-nav-bar-dark .s-nav-bar-brand {
  color: #e2f2fe; /* 50 */
}
.s-nav-bar-dark .s-nav-bar-brand:hover, 
.s-nav-bar-dark .s-nav-bar-brand:focus {
  color: #e2f2fe;
}
.s-nav-bar-dark .s-nav-bar-nav .nav-link {
  color: rgba(226, 242, 254, 0.5);
}
.s-nav-bar-dark .s-nav-bar-nav .nav-link:hover, 
.s-nav-bar-dark .s-nav-bar-nav .nav-link:focus {
  color: rgba(226, 242, 254, 0.75);
}
.s-nav-bar-dark .s-nav-bar-nav .nav-link.disabled {
  color: rgba(226, 242, 254, 0.25);
}
.s-nav-bar-dark .s-nav-bar-nav .show > .nav-link,
.s-nav-bar-dark .s-nav-bar-nav .nav-link.active {
  color: #e2f2fe;
}
.s-nav-bar-dark .s-nav-bar-toggler {
  color: rgba(226, 242, 254, 0.5);
  border-color: rgba(226, 242, 254, 0.1);
}
.s-nav-bar-dark .s-nav-bar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.s-nav-bar-dark .s-nav-bar-text {
  color: rgba(226, 242, 254, 0.5);
}
.s-nav-bar-dark .s-nav-bar-text a,
.s-nav-bar-dark .s-nav-bar-text a:hover,
.s-nav-bar-dark .s-nav-bar-text a:focus {
  color: #e2f2fe;
}
/* s-nav-bar-dark | */
/* Navbar | */

/* -------------------- -------------------- -------------------- */
/* -------------------- */
/* 
Remove 'dropdown-toggle' class. Dropdown will still work if you have 'data-toggle' attribute.
or Use css as below.
*/
.navbar-nav .dropdown-toggle.no-caret::after {
  display: none;
}
.navbar-nav .rotate-caret {
  transform: scale(1.0);
}
.navbar-nav .dropdown-toggle[aria-expanded=false] > .rotate-caret {
  transform: scale(1.0) rotate(180deg);
  transition: 0.5s; 
} 
.navbar-nav .dropdown-toggle[aria-expanded=true] > .rotate-caret {
  transition: 0.5s; 
}

/* testing */
.navbar-nav .rotate-caret:hover,
.navbar-nav .rotate-caret:focus {
  color: rgba(226, 246, 255, 0.75) !important;
}

#nav-dig .card-dropdown {
  text-align: inherit;
  font-weight:400;
  font-size: 0.875rem;
  padding: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  margin: 0;
  z-index: 99; /* ? */
}
#nav-dig .card-dropdown {
  color: var(--s-base-50); /* #e2f6ff; 50 */
  background-color: rgba(131, 215, 255, 0.85); /* 200 */
  background-clip: padding-box; /* ? */
  border: 1px solid rgba(19, 90, 164, 0.15); /* 900 */
  -webkit-box-shadow: 4px 0 4px -4px #e2f6ff, 0 4px 4px -4px #e2f6ff, -4px 0 4px -4px #e2f6ff;
  box-shadow: 4px 0 4px -4px #e2f6ff, 0 4px 4px -4px #e2f6ff, -4px 0 4px -4px #e2f6ff; /* right bottom left */
}
#nav-dig .card-dropdown {
  width: 100%;
}
@media (min-width: 992px) {
  #nav-dig .card-dropdown {
    width: 15rem;
  }
}
/* -------------------- */
.dropdown-item {
  color: var(--s-base-10); /* #135aa4; 900 */
  background-color: transparent;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--s-base-10); /* #135aa4; 900 */
  background-color: rgba(131, 215, 255, 0.75); /* 200 */
}
.dropdown-item.active, .dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: var(--s-base-10); /* #135aa4; 900 */
}
.s-header,
.s-footer {
  color: var(--s-base-10); /* #135aa4; 900 */
  background-color: rgba(131, 215, 255, 1); /* 200 */
}
.s-divider {
  border-top: 1px solid rgba(226, 246, 255, 0.25); /* 50 */
}
/* verify s-link ? */

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

/* -------------------- -------------------- -------------------- */
/* from style-theme-dig.css */
/* | Navbar */
/* #nav-dig .s-nav-bar .s-nav-bar-expand-lg .s-fixed-top .nav-bar-gradient .nav-scroll .nav-bar-transparent */
/* -------------------- */

/* -------------------- -------------------- */
/* | delete */
.navbar-dig-10,
.footer-dig-10 {
  color: var(--s-base-90);
  background-color: var(--s-base-10);
}
.navbar-dig-10-alpha,
.footer-dig-10-alpha {
  color: var(--s-base-90);
  /* applying alpha on top of variable */
  background-color: oklch(from var(--s-base-10) l c h / 0.94);

}
.navbar-dig-30,
.footer-dig-30 {
  color: var(--s-base-90);
  background-color: var(--s-base-30);
}
.navbar-dig-50,
.footer-dig-50 {
  color: var(--s-base-90);
  background-color: var(--s-base-50);
}
.navbar-dig-70,
.footer-dig-70 {
  color: var(--s-base-90);
  background-color: var(--s-base-70);
}
/* delete | */
.navbar-10,
.footer-10 {
  color: var(--s-base-90);
  background-color: var(--s-base-10);
}
.navbar-10-alpha,
.footer-10-alpha {
  color: var(--s-base-90);
  /* applying alpha on top of variable */
  background-color: oklch(from var(--s-base-10) l c h / 0.94);

}
.navbar-30,
.footer-30 {
  color: var(--s-base-90);
  background-color: var(--s-base-30);
}
.navbar-50,
.footer-50 {
  color: var(--s-base-90);
  background-color: var(--s-base-50);
}
.navbar-70,
.footer-70 {
  color: var(--s-base-90);
  background-color: var(--s-base-70);
}

.navbar-text {
  color: var(--s-base-90);
}
.navbar-text a,
.navbar-text a:hover,
.navbar-text a:focus {
  color: oklch(from var(--s-base-90) l c h / 0.5);
}

.navbar-brand,
.navbar-nav .nav-link {
  color: var(--s-base-90);
}
.navbar-brand:hover, .navbar-brand:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active, 
.navbar-nav .nav-link.show {
  color: oklch(from var(--s-base-90) l c h / 0.5);
}
/* -------------------- -------------------- */
.navbar-toggler {
  color: var(--s-base-90) !important;
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
border: 0 !important;
  border-radius: var(--bs-navbar-toggler-border-radius);
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}
.navbar-toggler-icon {
   background-image: var(--bs-navbar-toggler-icon-bg);
}
.navbar-nav-scroll { 
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}
/* -------------------- -------------------- */

.dropdown-menu {
  color: var(--s-base-70);
background-color: var(--s-base-90);
border: var(--bs-dropdown-border-width) solid var(--s-base-70);
}

.dropdown-divider {
  border-top: 1px solid var(--s-base-70);
}
.dropdown-item {
  color: var(--s-base-70);
  background-color: transparent;
}
.dropdown-item:hover, .dropdown-item:focus {
  color: oklch(from var(--s-base-70) l c h / 0.5);
  /* var(--s-base-70 / 0.5); */
  background-color: var(--s-base-90 / 0.5);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}

.dropdown-header {
 color: var(--bs-dropdown-header-color);
} 
.dropdown-header {
color: #fd9b00; /*#6c757d;*/  
background-color: white;  
  }

.dropdown-footer {
color: #fd9b00; /*#6c757d;*/  
background-color: white;  
  }
.dropdown-item-text {
  color: var(--bs-dropdown-link-color);
}
/* -------------------- -------------------- */
/* Social Media Colors Bluesky	#0a7aff */
.btn-twitter-x {
  background-color: #000000;
}
.btn-twitter-x:hover {
  background-color: #000000;
}
.btn-facebook {
  /*color: oklch(0.976562 0.030054 90.3236);*/
  background-color: #1877f2;
}
.btn-facebook:hover {
  /*color: oklch(0.976562 0.030054 90.3236);*/
  background-color: #3b5998;
}
.btn-instagram {
  background-color: #c32aa3;
}
.btn-instagram:hover {
  background-color: #e4405f;
}
.btn-linkedin {
  background-color: #0a66c2;
}
.btn-linkedin:hover {
  background-color: #0a66c2;
}
.btn-pinterest {
  background-color: #bd081c;
}
.btn-pinterest:hover {
  background-color: #bd081c;
}
.btn-youtube {
  background-color: #ff0000;
}
.btn-youtube:hover {
  background-color: #cd201f;
}
.btn-whatsapp {
  background-color: #25d366;
}
.btn-whatsapp:hover {
  background-color: #25d366;
}
.btn-wordpress {
  background-color: #21759b;
}
.btn-ordpress:hover {
  background-color: #21759b;
}
/* -------------------- -------------------- */
.custom-tooltip {
  --bs-tooltip-bg: var(--bd-violet-bg);
  --bs-tooltip-color: var(--bs-white);
  color: #fff;
  background-color: #000;
}
/* -------------------- -------------------- */
.icon-white {
  filter: invert(100%);
}
/*
https://codepen.io/sosuke/pen/Pjoqqp
CSS filter generator to convert from black to target hex color
#b5e7ff | oklch(0.9004 0.061 228.84) | s-base-90
Loss: 4.1. This is close enough.
*/
.icon-custom {
  filter: 
  invert(92%) 
  sepia(47%) 
  saturate(4193%) 
  hue-rotate(171deg) 
  brightness(101%) 
  contrast(101%);
}
/* -------------------- -------------------- -------------------- */
/* | newadd */
.border-bottom {
  border-bottom: 1px solid var(--s-base-30) !important;
}
.navbar-toggler {
  color: var(--s-base-90);
  border: 1px solid transparent;
  border-radius: 0.25rem;
}
.navbar-toggler:hover {
  color: oklch(from var(--s-base-90) l c h / 0.5);
}
.navbar-toggler:focus {
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}
.dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
}
@media (max-width: 576px) {
  #navbar-container {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
}
@media (max-width: 992px) {
  #themeDropdownContainer {
    margin-bottom: 8rem !important;
  }
  .dropdown-menu-end {
    left: 0 !important;
    right: auto !important;
  }
}
/* newadd | */
/* -------------------- -------------------- -------------------- */




/*                    digital color palette  |                    */
/* -------------------- -------------------- -------------------- */
/* style-digital.css | */