* {
     box-sizing: border-box;
     margin: 0px;
     padding: 0px;
}
 ::selection {
     background: rgba(243, 147, 83, 0.357);
     color: inherit;
}
 h1 {
     font-size: 30px;
}
 h2 {
     font-size: 25px;
}
 body, * {
     user-select:text !important;
}
 h1, h2, h3, h4, h5, h6 {
     color: var(--beige-dual);
}
 ::-moz-selection {
     background: rgba(243, 147, 83, 0.357);
     color: inherit;
}
 ::-webkit-scrollbar {
     width: 0px;
     height: 0px;
}
 ::-webkit-scrollbar-track {
     background: transparent;
}
 ::-webkit-scrollbar-thumb {
     background-color: rgba(120, 120, 120, 0.2);
     border-radius: 50px;
     transition: background-color 0.2s;
}
 ::-webkit-scrollbar-thumb:hover {
     background-color: rgba(120, 120, 120, 0.4);
}
 :root {
     --header-bg: rgba(255, 255, 255, 0.3);
     --svg-stroke-color: #323232;
     --svg-fill-color: #cccccc00;
     --solid-fill: #424242;
     --border: 1px solid #cecece;
     --border-color:#cecece;
     --Mainbg: rgb(255, 255, 255);
     --sideBG: linear-gradient(to bottom, rgb(255, 255, 255), rgb(255 255 255), rgb(253, 237, 218));
     --color: rgb(65, 65, 65);
     --bgIMG: linear-gradient(to right, rgba(94, 94, 94, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(92, 92, 92, 0.04) 1px, transparent 1px);
     --accordionbg: rgb(247 247 247);
     --evenchildtable: #eeeeee;
     --tablestriphover: #9191913f;
     --blockqcolor: #636363;
     --footerbg: #ffffff;
     --blogcardbg: #ffffff;
     --blogcardesc: #4d4d4d;
     --blogcardtag: rgb(233, 233, 233);
     --labletag: #e9e9e9;
     --infoheading: #004080;
     --alertheading: #614700;
     --errorheading: #820014;
     --successheading: #135200;
     --image-wrapper: rgba(255, 255, 255, 0);
     --border-submenu:2px solid rgb(87, 87, 87);
     --search-header-x:#eeeeee;
     --bookmark-bg:rgba(255, 255, 255, 0.8);
     --postmetaicons:#f1f1f1;
     --bookmark-shimmer:linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
     --postmeta-border:none;
     --avail:#f7a3ab;
     --beige:#f5f5dc;
     --beige-dual: rgb(65, 65, 65);
}
 body.dark-mode {
     --beige-dual:#f5f5dc;
     --beige:#f5f5dc;
     --header-bg: rgba(65, 65, 65, 0.3);
     --border: 1px solid #636363;
     --svg-stroke-color: #e0e0e0;
     --svg-fill-color: #cccccc00;
     --solid-fill: #e0e0e0;
     --Mainbg: rgb(24, 24, 24);
     --sideBG: linear-gradient(to bottom, rgb(37, 37, 37), rgb(37, 37, 37), rgb(22, 22, 22));
     --color: rgba(238, 238, 238, 0.884);
     --bgIMG: linear-gradient(to right, rgba(106, 106, 106, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(99, 99, 99, 0.04) 1px, transparent 1px);
     --accordionbg: rgb(40 40 40);
     --evenchildtable: #1f1f1f;
     --tablestriphover: #25252549;
     --blockqcolor: #ccc;
     --footerbg: #0000004d;
     --blogcardbg: #232323;
     --blogcardesc: #c3c3c3;
     --blogcardtag: rgb(24, 24, 24);
     --labletag: #252525;
     --infowhite: #dbdbdb;
     --infoheading: #529ce6;
     --alertheading: #d1aa3f;
     --errorheading: #f7697e;
     --successheading: #6bc250;
     --btndownload: white;
     --image-wrapper: white;
     --border-submenu:2px solid rgb(122, 122, 122);
     --search-header-x:#353535;
     --bookmark-bg:rgb(21 21 21 / 74%);
     --postmetaicons:#252525;
     --bookmark-shimmer:linear-gradient(90deg, #2a2a2a 25%, #3c3c3c 50%, #2a2a2a 75%);
     --postmeta-border:1px solid #636363;
     --border-color:#636363;
     --avail:#f47783;
}
 svg path, svg circle, svg rect, svg line {
     stroke: var(--svg-stroke-color);
     fill: var(--svg-fill-color);
}
 .prev svg path {
     fill: var(--solid-fill);
}
 html {
     scroll-behavior: smooth;
}
 body {
     font-family: Outfit-Regular;
     position: relative;
     min-height: 100vh;
     margin: 0px;
     background-color: var(--Mainbg);
     background-image: var(--bgIMG);
     background-size: 14px 24px;
     background-attachment: fixed;
     color: var(--color);
     line-height: 1.5;
}
 body.dark-mode .appearance-dropdown {
     background-color: rgb(45, 45, 45);
     color: rgb(255, 255, 255);
     box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 10px;
}
 body.dark-mode .dropdown-option:hover {
     background-color: rgb(61, 61, 61);
}
 header {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     z-index: 1200;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background: var(--header-bg);
     padding: 0.75rem 1rem;
     border-bottom: var(--border);
     backdrop-filter: blur(10px);
}
 .left-section {
     display: flex;
     align-items: center;
     gap: 1rem;
}
 .hamburger {
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 8px 7px;
     background: var(--search-header-x);
     border-radius: 8px;
     transition: background 0.3s ease;
}
 .hamburger-pill {
     position: relative;
     width: 24px;
     height: 18px;
}
 .hamburger-pill span {
     display: block;
     position: absolute;
     height: 2px;
     width: 100%;
     background: currentColor;
     border-radius: 2px;
     opacity: 1;
     left: 0;
     transform: rotate(0deg);
     transition: 0.25s ease-in-out;
}
 .hamburger-pill span:nth-child(1) {
     top: 0;
}
 .hamburger-pill span:nth-child(2), .hamburger-pill span:nth-child(3) {
     top: 8px;
}
 .hamburger-pill span:nth-child(4) {
     top: 16px;
}
 .hamburger.active .hamburger-pill span:nth-child(1), .hamburger.active .hamburger-pill span:nth-child(4) {
     width: 0%;
     left: 50%;
     top: 8px;
}
 .hamburger.active .hamburger-pill span:nth-child(2) {
     transform: rotate(45deg);
}
 .hamburger.active .hamburger-pill span:nth-child(3) {
     transform: rotate(-45deg);
}
 .logo {
     font-size: 20px;
     font-weight: 400;
     color: var(--beige-dual);
}
.right-icons {
  display: flex;
  align-items: center; /* vertical alignment */
  justify-content: flex-end; /* align to right if needed */
  gap: 15px; /* space between icons */
}

@media (max-width: 600px) {
  .right-icons {
    gap: 10px; /* smaller gap for mobile */
  }
}

.right-icons svg {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: fill 0.3s;
  display: block; /* removes baseline whitespace issues */
}

.right-icons > * {
  display: flex; /* ensure clickable area matches SVG */
  align-items: center;
  justify-content: center;
}

 #sidebar {
     position: fixed;
     top: 50px;
     left: -250px;
     width: 250px;
     height: calc(-50px + 100vh);
     background: var(--sideBG);
     border-right: var(--border);
     transition: left 0.3s;
     z-index: 11;
     padding: 1rem;
     box-sizing: border-box;
     overflow-y: auto;
     scrollbar-width: none;
}
 #sidebar::-webkit-scrollbar {
     display: none;
}
 #sidebar.active {
     left: -35px;
}
 #sidebar h2 {
     margin-bottom: 1rem;
     font-size: 1.25rem;
}
 #sidebar ul {
     list-style: none;
     padding-left: 20px;
     margin: 0px;
}
 #sidebar ul li {
     margin-bottom: 10px;
}
 #sidebar ul li a {
     text-decoration: none;
     color: var(--color);
}
 #main-content {
     transition: margin-left 0.3s;
}
 @media (min-width: 601px) {
     #main-content.shifted {
         margin-left: 220px;
    }
}
 @media (min-width: 769px) {
     .main-content {
         margin-right: 270px;
    }
}
 @media (max-width: 768px) {
     .main-content {
         margin-right: 0px;
    }
}
 main {
     padding: 80px 1rem 1rem;
}
 .submenu {
     list-style: none;
     padding-left: 0;
     margin-left: 0;
     max-height: 0px;
     overflow: hidden;
     transition: max-height 0.5s;
}
 .submenu.open {
     max-height: 500px;
}
 .submenu li {
     margin: 0.4rem 0;
}
 .submenu li a {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
     color: rgb(68, 68, 68);
     background-color:rgba(243, 147, 83, 0.15);
     border-radius: 6px;
     padding: 8px 12px;
     font-size: 0.95rem;
     font-weight: 500;
     transition: background 0.2s, color 0.2s;
}
 .submenu li a span {
     line-height: 1.3;
     flex-grow: 1;
}
 .submenu li a:hover {
     background-color: rgba(243, 147, 83, 0.15);
     color: rgb(0, 0, 0);
}
 .submenu-toggle {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 8px 10px;
     font-weight: 600;
     font-size: 1rem;
     color: rgb(51, 51, 51);
     cursor: pointer;
     border-radius: 6px;
     transition: background 0.2s, color 0.2s;
}
 .submenu-toggle:hover {
     color: rgb(34, 34, 34);
}
 .menu-text{
     margin-left: 10px;
}
 .arrow-icon {
     margin-left: auto;
     transition: transform 0.3s;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .submenu-toggle.active .arrow-icon {
     transform: rotate(180deg);
}
 .sidebar-menu hr {
     display: none;
}
 .sidebar-menu img {
     width: 25px;
     height: 25px;
     object-fit: contain;
     display: block;
     flex-shrink: 0;
}
 sup {
     font-size: 0.6em;
     vertical-align: super;
     line-height: 1;
}
 sub {
     font-size: 0.6em;
     vertical-align: sub;
     line-height: 1;
}
 .carousel {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     width: 100%;
     height: 300px;
}
 .carousel-slide {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 0.8s ease-in-out;
     z-index: 1;
}
 @media (max-width: 768px) {
     .carousel-slide {
         height: 45%;
    }
}
 .carousel-slide.active {
     opacity: 1;
     z-index: 2;
}
 .carousel-slide.next-active {
     opacity: 0;
     z-index: 3;
}
 .carousel-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 10px;
}
 .carousel-caption {
     position: absolute;
     bottom: 10px;
     left: 10px;
     max-width: 80%;
     background: rgba(0, 0, 0, 0.5);
     color: white;
     padding: 0.5rem 0.75rem;
     border-radius: 5px;
     font-size: 0.95rem;
     z-index: 4;
     transition: opacity 0.8s ease-in-out;
     white-space: normal;
     line-height: 1.3;
}
 @media (max-width: 768px) {
     .carousel-caption {
         display: none;
    }
}
 .carousel-dots {
     display: flex;
     justify-content: right;
     gap: 5px;
     position: absolute;
     bottom: 20px;
     left: 0px;
     right: 10px;
     z-index: 5;
}
 .carousel-dots button {
     width: 10px;
     height: 10px;
     background: rgba(255, 255, 255, 0.5);
     border-radius: 50%;
     border: none;
     cursor: pointer;
     transition: background 0.3s;
}
 .carousel-dots button.active {
     background: white;
}
 .carousel-wrapper {
     width: 100%;
     max-width: 100%;
}
 @media (min-width: 768px) {
     .carousel-wrapper {
         max-width: 50%;
         float: left;
    }
     .carousel {
         height: 400px;
    }
}
 .table-container {
     width: 100%;
     max-height: 500px;
     overflow: auto;
     border-radius: 12px;
     border: var(--border);
     background-color: var(--Mainbg);
     margin: 15px 0;
}
 .style1-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0px;
     font-family: Outfit-Regular;
     font-size: 0.95em;
     background-color: var(--Mainbg);
}
 .style1-table thead tr {
     background-color: rgb(61, 61, 61);
     color: rgb(255, 255, 255);
}
 .style1-table th {
     padding: 14px 16px;
     text-align: left;
     font-weight: 600;
     border: none;
}
 .style1-table tbody tr:nth-child(2n) {
     background-color: var(--evenchildtable);
}
 .style1-table tbody tr:nth-child(2n+1) {
     background-color: var(--Mainbg);
}
 .style1-table td {
     padding: 12px 16px;
     border: none;
}
 .style1-table tbody tr:hover td {
     background-color: var(--tablestriphover);
}
 .blog-image-container {
     margin: 2rem 0px;
     text-align: left;
     width: 100%;
}
 .blog-image {
     width: auto;
     max-width: 60%;
     height: auto;
     border-radius: 8px;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
     transition: transform 0.3s, box-shadow 0.3s;
     display: block;
     margin: 0px;
}
 .blog-image:hover {
     transform: scale(1.01);
     box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 16px;
}
 .blog-image-caption {
     display: block;
     margin: 0.8rem 0px 0px;
     font-family: Outfit-Regular;
     font-size: 0.9rem;
     color: rgb(164, 164, 164);
     line-height: 1.5;
     max-width: 60%;
     text-align: left;
}
 @media (max-width: 768px) {
     .blog-image {
         max-width: 100%;
         border-radius: 6px;
    }
     .blog-image-caption {
         max-width: 100%;
         font-size: 0.85rem;
         padding: 0px;
         text-align: left;
    }
     .blog-image-container {
         margin: 1.5rem 0px;
    }
}
 @media (max-width: 480px) {
     .blog-image-caption {
         font-size: 0.8rem;
    }
}
 .blog-title-wrapper {
     margin: 2rem 0px;
     padding: 25px 15px 15px;
     width: 100%;
     background: rgba(245, 245, 220, 0);
     border-radius: 10px;
     border: var(--border);
     position: relative;
}
 .blog-title {
     display: block;
     font-family: Outfit-Medium;
     font-weight: 600;
     color: var(--color);
     line-height: 1;
     margin: 0px;
     padding-top: 8px;
}
 .blog-title span {
     display: block;
     margin: 0.25rem 0px;
}
 .blog-tag {
     position: absolute;
     top: 10px;
     right: 10px;
     background: rgb(48, 48, 48);
     color: white;
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}
 .blog-title-wrapper.left-align {
     text-align: left;
}
 .blog-title-wrapper.left-align .blog-title {
     text-align: left;
}
 .blog-title-wrapper.center-align {
     text-align: center;
}
 .blog-title-wrapper.center-align .blog-title {
     text-align: center;
}
 @media (max-width: 768px) {
     .blog-title-wrapper {
         margin: 1.5rem 0px;
    }
     .blog-title span {
         margin: 0.2rem 0px;
    }
     .blog-tag {
         font-size: 0.65rem;
         padding: 3px 10px;
    }
}
 .accordion {
     font-family: Outfit-Regular;
     margin: 2rem 0px;
     border-radius: 10px;
     overflow: hidden;
     border: var(--border);
}
 .accordion-item {
     border-bottom: var(--border);
}
 .accordion-item:last-child {
     border-bottom: none;
}
 .accordion-header {
     background-color: var(--accordionbg);
     padding: 1rem 1.5rem;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: background-color 0.3s;
}
 .accordion-header:hover {
     background-color: rgba(90, 90, 90, 0.137);
}
 .accordion-title {
     font-weight: 600;
     color: var(--color);
     margin: 0px;
}
 .accordion-icon {
     transition: transform 0.4s;
     font-weight: bold;
     color: var(--color);
}
 .accordion-content-wrapper {
     overflow: hidden;
}
 .accordion-content {
     padding: 0px 25px;
     opacity: 0;
     transform: translateY(-10px);
     transition: opacity 0.3s, transform 0.3s, padding 0.3s;
     background-color: var(--Mainbg);
}
 .accordion-item.active .accordion-icon {
     transform: rotate(45deg);
}
 .accordion-item.active .accordion-content {
     padding: 0px 25px;
     opacity: 1;
     transform: translateY(0px);
}
 .accordion-item .accordion-content-wrapper {
     max-height: 0px;
     transition: max-height 0.4s;
}
 .accordion-item.active .accordion-content-wrapper {
     max-height: 1000px;
}
 @media (max-width: 768px) {
     .accordion-header {
         padding: 0.75rem 1rem;
    }
     .accordion-content {
         padding: 0px 1rem;
    }
     .accordion-item.active .accordion-content {
         padding: 0px 20px;
    }
}
 .pref {
     line-height: 20px;
     color: rgb(164, 164, 164);
}
 p {
     margin-top: 1rem;
     margin-bottom: 1rem;
     line-height: 1.6;
}
 ul, ol {
     padding-left: 1.5rem;
     margin-top: 0.5rem;
     margin-bottom: 1rem;
}
 li {
     margin-bottom: 0.4rem;
}
 dl {
     margin: 1rem 0px;
}
 dt {
     font-weight: bold;
     margin-top: 0.75rem;
     color: rgb(34, 34, 34);
}
 dd {
     margin-left: 1rem;
     color: rgb(85, 85, 85);
}
 blockquote {
     border-left: 2px solid rgb(204, 204, 204);
     padding-left: 1rem;
     margin: 1.5rem 0px;
     color: var(--blockqcolor);
}
 hr {
     border-right: none;
     border-bottom: none;
     border-left: none;
     border-image: initial;
     border-top: 1.5px solid rgb(204, 204, 204);
     margin: 2rem 0px;
     width: 100%;
     opacity: 0.6;
     position: relative;
     z-index: -1;
}
 #eye-comfort-overlay {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100vw;
     height: 100vh;
     pointer-events: none;
     background-color: rgb(255 203 35 / 10%);
     opacity: 0;
     visibility: hidden;
     transition: opacity 5s;
     z-index: 1000;
}
 #eye-comfort-overlay.active {
     opacity: 1;
     visibility: visible;
}
 #eye-toggle {
     cursor: pointer;
}
 .mode-switcher-container {
     position: relative;
     display: inline-block;
}
 .appearance-dropdown {
     position: absolute;
     top: 200%;
     right: clamp(4px, 1vw, 8px);
     background-color: rgb(255, 255, 255);
     border: var(--border);
     border-radius: 12px;
     padding: 6px 0px;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 12px;
     display: none;
     z-index: 999;
     min-width: 160px;
     max-width: calc(-8px + 100vw);
}
 .check-icon {
     visibility: hidden;
     display: inline-flex;
     align-items: center;
}
.dropdown-option.active-option.dark {
  border-radius: 9px;
  background: #555555;
  margin: 5px;
}

.dropdown-option.active-option.light {
  border-radius: 9px;
  background: #f0f0f0; /* subtle white */
  margin: 5px;
}

.dropdown-option.active-option.eye {
  border-radius: 9px;
  background: #8686861d; /* subtle warm */
  margin:  5px;
}


 .dropdown-option {
     padding: 6px 11px;
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 10px;
     transition: background 0.2s;margin: 5px;
}
.dropdown-option:hover {
  background-color: rgb(243, 243, 243);
  border-radius: 9px; /* keep same radius */
}
 .dropdown-option span {
     font-size: 18px;
}
 .cursor-follower {
     position: fixed;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.796);
     pointer-events: none;
     transform: translate(-50%, -50%);
     z-index: 9999;
     mix-blend-mode: difference;
     transition: transform 0.15s ease-out, width 0.2s, height 0.2s, background 0.2s;
     will-change: transform;
}
 @media (max-width: 767px) {
     #cursorFollower {
         display: none !important;
    }
}
 .cursor-follower.active {
     transform: translate(-50%, -50%) scale(0.8);
     background: rgba(255, 255, 255, 0.9);
}
 .cursor-follower.hover {
     transform: translate(-50%, -50%) scale(1.5);
     background: rgba(255, 255, 255, 0.6);
}
 .blgcontainer {
     position: relative;
     width: calc(-40px + 100vw);
     height: calc(-40px + 100vh);
     max-height: 600px;
     margin: 0px;
     border-radius: 12px;
     background-color: rgb(167, 167, 167);
     overflow: hidden;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px;
}
 .blgpostcontainer {
     position: relative;
     height: calc(-40px + 100vh);
     max-height: 600px;
     margin: 0px 0px 15px;
     border-radius: 12px;
     background-color: rgb(167, 167, 167);
     overflow: hidden;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px;
}
 .carousel {
     position: relative;
     width: 100%;
     height: 100%;
}
 .carousel-item {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease-in-out;
}
 .carousel-item.active {
     opacity: 1;
}
 .blgimg {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .blgoverlay {
     position: absolute;
     bottom: 0px;
     left: 0px;
     right: 0px;
     padding: 40px 40px 60px;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
     color: white;
     border-bottom-left-radius: 12px;
     border-bottom-right-radius: 12px;
}
 .blgtags {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 16px;
     color: var(--beige);
}
 .blgtag {
     background: rgba(255, 255, 255, 0.2);
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
}
 .blgtitle {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 16px;
     text-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px;
     color: var(--beige);
}
 .blgdesc {
     font-size: 1.1rem;
     line-height: 1.6;
     max-width: 600px;
     opacity: 0.9;
     text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
}
 .carousel-nav {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     z-index: 10;
     width: 80%;
     max-width: 400px;
}
 .progress-bar {
     flex: 1 1 0%;
     height: 4px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 2px;
     overflow: hidden;
     cursor: pointer;
}
 .progress-fill {
     height: 100%;
     width: 0%;
     background: beige;
     transition: width linear;
}
 .progress-bar.active .progress-fill {
     width: 100%;
     transition-duration: 6s;
}
 @media (max-width: 768px) {
     .blgcontainer {
         height: 70vh;
         width: auto;
         margin: 0px;
    }
     .blgoverlay {
         padding: 20px 20px 40px;
    }
     .blgtitle {
         font-size: 1.8rem;
         margin-bottom: 12px;
    }
     .blgdesc {
         font-size: 1rem;
    }
     .carousel-nav {
         bottom: 10px;
         width: 90%;
    }
}
 @media (max-width: 480px) {
     .blgcontainer {
         height: 60vh;
         border-radius: 8px;
    }
     .blgoverlay {
         padding: 15px 15px 30px;
         border-bottom-left-radius: 8px;
         border-bottom-right-radius: 8px;
    }
     .blgtitle {
         font-size: 1.5rem;
    }
     .blgtag {
         font-size: 10px;
         padding: 3px 8px;
    }
     .progress-bar {
         height: 3px;
    }
}
 .info-block-outline {
     border-radius: 12px;
     padding: 15px;
     margin: 20px 0px;
     display: flex;
     align-items: center;
     gap: 20px;
     border: 1px solid;
     background-color: transparent;
}
 .info-icon-outline {
     font-size: 28px;
     flex-shrink: 0;
}
 .info-text-outline {
     display: flex;
     flex-direction: column;
     justify-content: center;
     border-left: 3px solid;
     padding-left: 15px;
}
 .info-content-outline {
     font-size: 15px;
     color: var(--infowhite);
}
 @media (min-width: 768px) {
     .info-content-outline {
         font-size: 16.5px;
    }
}
 .info-outline {
     border-color: rgb(24, 144, 255);
     color: var(--infoheading);
}
 .info-outline .info-icon-outline {
     color: rgb(24, 144, 255);
}
 .info-outline .info-text-outline {
     border-color: rgb(24, 144, 255);
}
 .alert-outline {
     border-color: rgb(250, 173, 20);
     color: var(--alertheading);
}
 .alert-outline .info-icon-outline {
     color: rgb(250, 173, 20);
}
 .alert-outline .info-text-outline {
     border-color: rgb(250, 173, 20);
}
 .success-outline {
     border-color: rgb(82, 196, 26);
     color: var(--successheading);
}
 .success-outline .info-icon-outline {
     color: rgb(82, 196, 26);
}
 .success-outline .info-text-outline {
     border-color: rgb(82, 196, 26);
}
 .error-outline {
     border-color: rgb(255, 77, 79);
     color: var(--errorheading);
}
 .error-outline .info-icon-outline {
     color: rgb(255, 77, 79);
}
 .error-outline .info-text-outline {
     border-color: rgb(255, 77, 79);
}
 .info-block {
     border-radius: 12px;
     padding: 15px;
     margin: 20px 0px;
     display: flex;
     align-items: center;
     gap: 20px;
     background-color: rgb(249, 249, 249);
}
 .info-icon {
     font-size: 28px;
     flex-shrink: 0;
}
 .info-text {
     display: flex;
     flex-direction: column;
     justify-content: center;
     border-left: 3px solid;
     padding-left: 15px;
}
 .info-title {
     font-weight: bold;
     font-size: 18px;
     margin-bottom: 5px;
}
 .info-content {
     font-size: 15px;
}
 @media (min-width: 768px) {
     .info-content {
         font-size: 16.5px;
    }
}
 .info {
     background-color: rgb(230, 247, 255);
     color: rgb(0, 64, 128);
}
 .info .info-icon {
     color: rgb(24, 144, 255);
}
 .info .info-text {
     border-color: rgb(24, 144, 255);
}
 .alert {
     background-color: rgb(255, 251, 230);
     color: rgb(97, 71, 0);
}
 .alert .info-icon {
     color: rgb(250, 173, 20);
}
 .alert .info-text {
     border-color: rgb(250, 173, 20);
}
 .success {
     background-color: rgb(246, 255, 237);
     color: rgb(19, 82, 0);
}
 .success .info-icon {
     color: rgb(82, 196, 26);
}
 .success .info-text {
     border-color: rgb(82, 196, 26);
}
 .error {
     background-color: rgb(254, 240, 240);
     color: rgb(130, 0, 20);
}
 .error .info-icon {
     color: rgb(255, 77, 79);
}
 .error .info-text {
     border-color: rgb(255, 77, 79);
}
 .externalink {
     text-decoration: none;
     color: rgb(0, 151, 226);
     font-weight: 500;
     display: inline-flex;
     align-items: center;
}
 .externalink::after {
     content: "";
     display: inline-block;
     width: 1em;
     height: 1em;
     margin-left: 0.3em;
     background: url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 3C4.5885 3 3 4.5885 3 12C3 19.4115 4.5885 21 12 21C19.4115 21 21 19.4115 21 12\" stroke=\"%230097e2\" stroke-width=\"2\" stroke-linecap=\"round\"/><path d=\"M20.5 3.5L15 9\" stroke=\"%230097e2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M16 3H20.6717C20.853 3 21 3.14703 21 3.32837V8\" stroke=\"%230097e2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>") center center / contain no-repeat;
}
 .alt-link {
     text-decoration: none;
     color: rgb(0, 151, 226);
     font-weight: 500;
     display: inline-flex;
     align-items: center;
}
 .alt-link::after {
     content: "";
     display: inline-block;
     width: 1em;
     height: 1em;
     margin-left: 0.3em;
     background: url("data:image/svg+xml;utf8,<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M14 12C14 14.7614 11.7614 17 9 17H7C4.23858 17 2 14.7614 2 12C2 9.23858 4.23858 7 7 7H7.5M10 12C10 9.23858 12.2386 7 15 7H17C19.7614 7 22 9.23858 22 12C22 14.7614 19.7614 17 17 17H16.5\" stroke=\"%230097e2\" stroke-width=\"2\" stroke-linecap=\"round\"/></svg>") center center / contain no-repeat;
}
 .btnst1 {
     background-color: rgb(153, 105, 251);
     color: white;
     border: 2px solid rgb(153, 105, 251);
     padding: 10px 18px;
     font-size: 15px;
     border-radius: 36px;
     cursor: pointer;
     transition: background-color 0.3s;
     font-weight: 600;
     font-family: inherit;
     margin-top: 20px;
     margin-bottom: 20px;
}
 .btnst1:hover {
     background-color: transparent;
     color: rgb(153, 105, 251);
     border: 2px solid rgb(153, 105, 251);
}
 .btnst2 {
     background-color: transparent;
     color: rgb(153, 105, 251);
     border: 2px solid rgb(153, 105, 251);
     padding: 10px 18px;
     font-size: 15px;
     border-radius: 36px;
     cursor: pointer;
     transition: background-color 0.3s, color 0.3s;
     font-weight: 600;
     font-family: inherit;
     margin-top: 20px;
     margin-bottom: 20px;
}
 .btnst2:hover {
     background-color: rgb(153, 105, 251);
     color: white;
}
 .btndownload {
     background-color: var(--Mainbg);
     color: var(--color);
     border: var(--border);
     padding: 10px 40px 10px 20px;
     font-size: 15px;
     border-radius: 36px;
     cursor: pointer;
     font-weight: 600;
     font-family: inherit;
     position: relative;
     transition: background-color 0.3s, color 0.3s;
     margin-top: 20px;
     margin-bottom: 20px;
     background-image: url("data:image/svg+xml;utf8,<svg fill=\"none\" stroke=\"%23464455\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 12V19M12 19L9.75 16.6667M12 19L14.25 16.6667M6.6 17.8333C4.61178 17.8333 3 16.1917 3 14.1667C3 12.498 4.09438 11.0897 5.59198 10.6457C5.65562 10.6268 5.7 10.5675 5.7 10.5C5.7 7.46243 8.11766 5 11.1 5C14.0823 5 16.5 7.46243 16.5 10.5C16.5 10.5582 16.5536 10.6014 16.6094 10.5887C16.8638 10.5306 17.1284 10.5 17.4 10.5C19.3882 10.5 21 12.1416 21 14.1667C21 16.1917 19.3882 17.8333 17.4 17.8333\"/></svg>");
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 18px 18px;
}
 .btndownload:hover {
     background-color: rgb(70, 68, 85);
     color: white;
     border: var(--border);
     background-image: url("data:image/svg+xml;utf8,<svg fill=\"none\" stroke=\"%23ffffff\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12 12V19M12 19L9.75 16.6667M12 19L14.25 16.6667M6.6 17.8333C4.61178 17.8333 3 16.1917 3 14.1667C3 12.498 4.09438 11.0897 5.59198 10.6457C5.65562 10.6268 5.7 10.5675 5.7 10.5C5.7 7.46243 8.11766 5 11.1 5C14.0823 5 16.5 7.46243 16.5 10.5C16.5 10.5582 16.5536 10.6014 16.6094 10.5887C16.8638 10.5306 17.1284 10.5 17.4 10.5C19.3882 10.5 21 12.1416 21 14.1667C21 16.1917 19.3882 17.8333 17.4 17.8333\"/></svg>");
}
 .herohead {
     display: block;
     font-size: 70px;
     line-height: 65px;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.87);
}
 @media (max-width: 600px) {
     .herohead {
         font-size: 1.5rem;
         line-height: 25px;
    }
}
 .heropara {
     line-height: 35px;
     margin-top: 20px;
     font-weight: 500;
     font-size: 33px;
     color: rgba(255, 255, 255, 0.93);
}
 @media (max-width: 600px) {
     .heropara {
         line-height: 25px;
         margin-top: 10px;
         font-size: 20px;
    }
}
 .image-wrapper {
     text-align: center;
}
 .image-wrapper img {
     max-width: 100%;
     height: auto;
     display: block;
     margin: 0px auto;
     background-color: var(--image-wrapper);
     padding: 10px;
     border-radius: 12px;
}
 .image-wrapper figcaption {
     margin-top: 0.5em;
     font-size: 0.95em;
     color: rgb(164, 164, 164);
     margin-bottom: 15px;
}
 mark {
     background-color: rgba(243, 147, 83, 0.357);
     color: var(--color);
     padding: 0 2px;
     border-radius: 5px;
}
 .mimic-title{
     font-size: 21.6px;
     font-weight: bold;
}
 .imgrid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 1.2rem;
     margin: 1.5rem 0;
}
 .imgrid figure {
     margin: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
}
 .imgrid img {
     width: 100%;
     height: auto;
     border-radius: 12px;
     object-fit: cover;
     display: block;
     background-color: var(--image-wrapper);
}
 .imgrid figcaption {
     margin-top: 0.5em;
     font-size: 0.95em;
     color: rgb(164, 164, 164);
     margin-bottom: 15px;
}
 .hero-section-slim {
     width: 100%;
     min-height: 200px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     color: white;
     padding: 20px;
     border-radius: 12px;
}
 .hero-content-slim h1 {
     font-size: 2rem;
     margin: 0;
}
 .hero-content-slim p {
     font-size: 1rem;
     margin-top: 10px;
}
 @media (max-width: 600px) {
     .hero-content-slim h1 {
         font-size: 1.5rem;
    }
     .hero-content-slim p {
         font-size: 0.9rem;
    }
}
 .breadcrumb {
     margin-top: 12px;
     font-size: 0.9rem;
     color: #ccc;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 6px;
     justify-content: center;
}
 .breadcrumb a {
     color: #979797;
     text-decoration: none;
     transition: color 0.2s ease;
}
 .breadcrumb a:hover {
     color: #ff6e39b3;
}
 .breadcrumb span {
     color: #888;
}
 .breadcrumb .current {
     font-weight: bold;
     color: #ff6e39;
}
 .tile-container {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     justify-content: center;
     padding-top: 10px;
}
 .simple-tile {
     position: relative;
     flex: 1 1 calc(33.33% - 20px);
     background-color: var(--Mainbg);
     border: var(--border);
     border-radius: 16px;
     padding: 20px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
     min-width: 220px;
     max-width: 100%;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .simple-tile:hover {
     transform: translateY(-6px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
 .tile-content h3 {
     margin-top: 0;
     margin-bottom: 10px;
     font-size: 1.2rem;
     color: var(--beige-dual);
}
 .tile-content p {
     margin: 0;
     font-size: 1rem;
     color: var(--blogcardesc);
     line-height: 1.5;
}
 .status-dot {
     position: absolute;
     top: 10px;
     right: 10px;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background-color: gray;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
     z-index: 1;
}
 .status-dot.green {
     background-color: #28a745;
}
 .status-dot.red {
     background-color: var(--avail);
}
 .clsnotavail .tile-content {
     filter: grayscale(100%);
     opacity: 0.4;
     pointer-events: none;
     user-select: none;
}
 @media (max-width: 768px) {
     .simple-tile {
         flex: 1 1 calc(50% - 20px);
    }
}
 @media (max-width: 480px) {
     .simple-tile {
         flex: 1 1 100%;
    }
}
 .latest-blog-post {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: center;
     background-color: #0d1117;
     color: #f0f6fc;
     border-radius: 16px;
     overflow: hidden;
     margin: 0 auto;
     max-width: 1000px;
     padding: 40px 24px;
     text-align: left;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     margin-bottom: 20px;
     border: var(--border);
}
 .text-content {
     z-index: 2;
     position: relative;
     max-width: 800px;
}
 .post-category {
     font-size: 0.9rem;
     color: rgb(255 183 204);
     font-weight: 600;
     text-transform: uppercase;
     display: inline-block;
     margin-bottom: 8px;
}
 .post-title {
     font-size: 1.8rem;
     margin-bottom: 12px;
     color: var(--beige);
     font-weight: 700;
     line-height: 1.4;
}
 .post-excerpt {
     font-size: 1rem;
     color: #c9d1d9;
     margin-bottom: 16px;
     line-height: 1.6;
}
 .post-author-date {
     display: flex;
     align-items: center;
     font-size: 0.9rem;
     color: #8b949e;
     gap: 10px;
}
 .post-author-date img {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     object-fit: cover;
}
 @media (max-width: 768px) {
     .latest-blog-post {
         padding: 24px 16px;
         background-position: top;
    }
     .post-title {
         font-size: 20px;
    }
     .post-excerpt {
         font-size: 0.95rem;
    }
}