*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
/*  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;*/
  --tw-scroll-snap-strictness: proximity;
/*  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;*/
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
/*  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;*/
/*  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;*/
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
/*  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;*/
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
/*  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;*/
}

/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
/*  -moz-tab-size: 4;*/
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.\!bottom-0 {
  bottom: 0px !important;
}

.-left-10 {
  left: -2.5rem;
}

.left-0 {
  left: 0px;
}

.left-3 {
  left: 0.75rem;
}

.top-0 {
  top: 0px;
}

.top-1\/2 {
  top: 50%;
}

.top-24 {
  top: 6rem;
}

.top-3 {
  top: 0.75rem;
}

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

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

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

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

.col-span-2 {
  grid-column: span 2 / span 2;
}

.m-2 {
  margin: 0.5rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.-mt-24 {
  margin-top: -6rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-14 {
  margin-top: 3.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.block {
  display: block;
}

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

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-14 {
  height: 3.5rem;
}

.h-20 {
  height: 5rem;
}

.h-28 {
  height: 7rem;
}

.h-48 {
  height: 12rem;
}

.h-64 {
  height: 16rem;
}

.h-\[14rem\] {
  height: 14rem;
}

.h-\[16rem\] {
  height: 16rem;
}

.h-\[18rem\] {
  height: 18rem;
}

.h-\[20rem\] {
  height: 20rem;
}

.h-\[220px\] {
  height: 220px;
}

.h-\[450px\] {
  height: 450px;
}

.h-\[480px\] {
  height: 480px;
}

.h-\[4px\] {
  height: 4px;
}

.h-\[7rem\] {
  height: 7rem;
}

.h-full {
  height: 100%;
}

.h-max {
/*  height: -moz-max-content;*/
  height: max-content;
}

.h-5 {
  height: 1.25rem;
}

.h-\[200px\] {
  height: 200px;
}

.h-\[6rem\] {
  height: 6rem;
}

.min-h-\[210px\] {
  min-height: 210px;
}

.min-h-\[260px\] {
  min-height: 260px;
}

.w-1\/2 {
  width: 50%;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-16 {
  width: 4rem;
}

.w-20 {
  width: 5rem;
}

.w-28 {
  width: 7rem;
}

.w-3\/4 {
  width: 75%;
}

.w-48 {
  width: 12rem;
}

.w-56 {
  width: 14rem;
}

.w-60 {
  width: 15rem;
}

.w-72 {
  width: 18rem;
}

.w-\[1px\] {
  width: 1px;
}

.w-\[380px\] {
  width: 380px;
}

.w-\[500px\] {
  width: 500px;
}

.w-full {
  width: 100%;
}

.w-5 {
  width: 1.25rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-6xl {
  max-width: 72rem;
}

.max-w-7xl {
  max-width: 80rem;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-2 {
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-4 {
  --tw-translate-y: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

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

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

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

.justify-center {
  justify-content: center;
}

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

.gap-1 {
  gap: 0.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-\[\#0c1b3a\] > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(12 27 58 / var(--tw-divide-opacity, 1));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-\[25px\] {
  border-radius: 25px;
}

.rounded-\[28px\] {
  border-radius: 28px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-4 {
  border-left-width: 4px;
}

.border-\[\#050d21\] {
  --tw-border-opacity: 1;
  border-color: rgb(5 13 33 / var(--tw-border-opacity, 1));
}

.border-\[\#577cb7\] {
  --tw-border-opacity: 1;
  border-color: rgb(87 124 183 / var(--tw-border-opacity, 1));
}

.border-\[\#cfd9f0\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 217 240 / var(--tw-border-opacity, 1));
}

.border-black {
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}

.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-blue-400 {
  --tw-border-opacity: 1;
  border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
}

.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-purple-400 {
  --tw-border-opacity: 1;
  border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
}

.bg-\[\#000d1f\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 13 31 / var(--tw-bg-opacity, 1));
}

.bg-\[\#001137\] {
  --tw-bg-opacity: 1;
  background-color: rgb(0 17 55 / var(--tw-bg-opacity, 1));
}

.bg-\[\#010F31\] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 15 49 / var(--tw-bg-opacity, 1));
}

.bg-\[\#010f31\] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 15 49 / var(--tw-bg-opacity, 1));
}

.bg-\[\#011133\] {
  --tw-bg-opacity: 1;
  background-color: rgb(1 17 51 / var(--tw-bg-opacity, 1));
}

.bg-\[\#06376F\] {
  --tw-bg-opacity: 1;
  background-color: rgb(6 55 111 / var(--tw-bg-opacity, 1));
}

.bg-\[\#071634\] {
  --tw-bg-opacity: 1;
  background-color: rgb(7 22 52 / var(--tw-bg-opacity, 1));
}

.bg-\[\#081841\] {
  --tw-bg-opacity: 1;
  background-color: rgb(8 24 65 / var(--tw-bg-opacity, 1));
}

.bg-\[\#2e2e2e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(46 46 46 / var(--tw-bg-opacity, 1));
}

.bg-\[\#333\] {
  --tw-bg-opacity: 1;
  background-color: rgb(51 51 51 / var(--tw-bg-opacity, 1));
}

.bg-\[\#3771BC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(55 113 188 / var(--tw-bg-opacity, 1));
}

.bg-\[\#3785BC\] {
  --tw-bg-opacity: 1;
  background-color: rgb(55 133 188 / var(--tw-bg-opacity, 1));
}

.bg-\[\#3C7CCF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(60 124 207 / var(--tw-bg-opacity, 1));
}

.bg-\[\#727af6\] {
  --tw-bg-opacity: 1;
  background-color: rgb(114 122 246 / var(--tw-bg-opacity, 1));
}

.bg-\[\#7C4DFF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(124 77 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#D35711\] {
  --tw-bg-opacity: 1;
  background-color: rgb(211 87 17 / var(--tw-bg-opacity, 1));
}

.bg-\[\#E7F0FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(231 240 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F59E0B\] {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F87171\] {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1));
}

.bg-\[\#FF66C4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 102 196 / var(--tw-bg-opacity, 1));
}

.bg-\[\#cfcfcf\] {
  --tw-bg-opacity: 1;
  background-color: rgb(207 207 207 / var(--tw-bg-opacity, 1));
}

.bg-\[\#e3e3e3a8\] {
  background-color: #e3e3e3a8;
}

.bg-\[\#e6f3ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(230 243 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#eaf6fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 246 251 / var(--tw-bg-opacity, 1));
}

.bg-\[\#eef4ff\] {
  --tw-bg-opacity: 1;
  background-color: rgb(238 244 255 / var(--tw-bg-opacity, 1));
}

.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}

.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}

.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.bg-blue-900\/40 {
  background-color: rgb(30 58 138 / 0.4);
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-yellow-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1));
}

.bg-\[\#0f4dcf\] {
  --tw-bg-opacity: 1;
  background-color: rgb(15 77 207 / var(--tw-bg-opacity, 1));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

/*.bg-\[url\(\'\~\/images\/header-bg-img\.png\'\)\] {
  background-image: url('~/images/header-bg-img.png');
}*/

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-500 {
  --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-700 {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.bg-center {
  background-position: center;
}

.bg-repeat {
  background-repeat: repeat;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fill {
  -o-object-fit: fill;
     object-fit: fill;
}

.p-0 {
  padding: 0px;
}

.p-10 {
  padding: 2.5rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.py-9 {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-28 {
  padding-top: 7rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

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

.font-\[\'Times_New_Roman\'\] {
  font-family: 'Times New Roman';
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.text-\[\#003366\] {
  --tw-text-opacity: 1;
  color: rgb(0 51 102 / var(--tw-text-opacity, 1));
}

.text-\[\#003B87\] {
  --tw-text-opacity: 1;
  color: rgb(0 59 135 / var(--tw-text-opacity, 1));
}

.text-\[\#004aad\] {
  --tw-text-opacity: 1;
  color: rgb(0 74 173 / var(--tw-text-opacity, 1));
}

.text-\[\#0056b3\] {
  --tw-text-opacity: 1;
  color: rgb(0 86 179 / var(--tw-text-opacity, 1));
}

.text-\[\#06376F\] {
  --tw-text-opacity: 1;
  color: rgb(6 55 111 / var(--tw-text-opacity, 1));
}

.text-\[\#086ad8\] {
  --tw-text-opacity: 1;
  color: rgb(8 106 216 / var(--tw-text-opacity, 1));
}

.text-\[\#2d80bf\] {
  --tw-text-opacity: 1;
  color: rgb(45 128 191 / var(--tw-text-opacity, 1));
}

.text-\[\#3771bc\] {
  --tw-text-opacity: 1;
  color: rgb(55 113 188 / var(--tw-text-opacity, 1));
}

.text-\[\#3785BC\] {
  --tw-text-opacity: 1;
  color: rgb(55 133 188 / var(--tw-text-opacity, 1));
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}

.text-blue-300 {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.text-blue-400 {
  --tw-text-opacity: 1;
  color: rgb(96 165 250 / var(--tw-text-opacity, 1));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}

.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}

.text-gray-200 {
  --tw-text-opacity: 1;
  color: rgb(229 231 235 / var(--tw-text-opacity, 1));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-\[\#0a2a66\] {
  --tw-text-opacity: 1;
  color: rgb(10 42 102 / var(--tw-text-opacity, 1));
}

.text-\[\#1da1f2\] {
  --tw-text-opacity: 1;
  color: rgb(29 161 242 / var(--tw-text-opacity, 1));
}

.text-\[\#314d8b\] {
  --tw-text-opacity: 1;
  color: rgb(49 77 139 / var(--tw-text-opacity, 1));
}

.text-\[\#3771BC\] {
  --tw-text-opacity: 1;
  color: rgb(55 113 188 / var(--tw-text-opacity, 1));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.accent-blue-600 {
  accent-color: #2563eb;
}

.opacity-0 {
  opacity: 0;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-90 {
  opacity: 0.9;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_25px_5px_rgba\(147\2c 51\2c 234\2c 0\.4\)\] {
  --tw-shadow: 0 0 25px 5px rgba(147,51,234,0.4);
  --tw-shadow-colored: 0 0 25px 5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_0_30px_rgba\(114\2c 122\2c 246\2c 0\.45\)\] {
  --tw-shadow: 0 0 30px rgba(114,122,246,0.45);
  --tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_12px_30px_rgba\(0\2c 0\2c 0\2c 0\.14\)\] {
  --tw-shadow: 0 12px 30px rgba(0,0,0,0.14);
  --tw-shadow-colored: 0 12px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_20px_35px_-10px_rgba\(114\2c 122\2c 246\2c 0\.55\)\2c -20px_0_35px_-10px_rgba\(114\2c 122\2c 246\2c 0\.55\)\] {
  --tw-shadow: 0 20px 35px -10px rgba(114,122,246,0.55),-20px 0 35px -10px rgba(114,122,246,0.55);
  --tw-shadow-colored: 0 20px 35px -10px var(--tw-shadow-color), -20px 0 35px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_20px_35px_-10px_rgba\(114\2c 122\2c 246\2c 0\.55\)\2c 20px_0_35px_-10px_rgba\(114\2c 122\2c 246\2c 0\.55\)\2c -20px_0_35px_-10px_rgba\(114\2c 122\2c 246\2c 0\.55\)\] {
  --tw-shadow: 0 20px 35px -10px rgba(114,122,246,0.55),20px 0 35px -10px rgba(114,122,246,0.55),-20px 0 35px -10px rgba(114,122,246,0.55);
  --tw-shadow-colored: 0 20px 35px -10px var(--tw-shadow-color), 20px 0 35px -10px var(--tw-shadow-color), -20px 0 35px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_20px_50px_rgba\(114\2c 122\2c 246\2c 0\.25\)\] {
  --tw-shadow: 0 20px 50px rgba(114,122,246,0.25);
  --tw-shadow-colored: 0 20px 50px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_4px_20px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  --tw-shadow: 0 4px 20px rgba(0,0,0,0.25);
  --tw-shadow-colored: 0 4px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[20px_0_35px_-10px_rgba\(114\2c 122\2c 246\2c 0\.55\)\] {
  --tw-shadow: 20px 0 35px -10px rgba(114,122,246,0.55);
  --tw-shadow-colored: 20px 0 35px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.brightness-75 {
  --tw-brightness: brightness(.75);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-none {
  transition-property: none;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:text-\[\#3785BC\]:hover {
  --tw-text-opacity: 1;
  color: rgb(55 133 188 / var(--tw-text-opacity, 1));
}

.hover\:text-blue-300:hover {
  --tw-text-opacity: 1;
  color: rgb(147 197 253 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-300:hover {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:shadow-\[0_6px_30px_rgba\(0\2c 0\2c 0\2c 0\.35\)\]:hover {
  --tw-shadow: 0 6px 30px rgba(0,0,0,0.35);
  --tw-shadow-colored: 0 6px 30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-xl:hover {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:ring:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity, 1));
}

.group:hover .group-hover\:visible {
  visibility: visible;
}

.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

@media (min-width: 640px) {
  .sm\:left-4 {
    left: 1rem;
  }

  .sm\:top-4 {
    top: 1rem;
  }

  .sm\:h-\[300px\] {
    height: 300px;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {
  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-\[37rem\] {
    height: 37rem;
  }

  .md\:h-\[400px\] {
    height: 400px;
  }

  .md\:h-\[420px\] {
    height: 420px;
  }

  .md\:h-\[520px\] {
    height: 520px;
  }

  .md\:h-\[460px\] {
    height: 460px;
  }

  .md\:h-\[560px\] {
    height: 560px;
  }

  .md\:h-\[250px\] {
    height: 250px;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:w-full {
    width: 100%;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .md\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .md\:rounded-2xl {
    border-radius: 1rem;
  }

  .md\:rounded-3xl {
    border-radius: 1.5rem;
  }

  .md\:rounded-\[40px\] {
    border-radius: 40px;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:px-12 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:px-20 {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .md\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:pl-12 {
    padding-left: 3rem;
  }

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

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .md\:text-\[2\.4rem\] {
    font-size: 2.4rem;
  }

  .md\:text-\[2\.5rem\] {
    font-size: 2.5rem;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .md\:text-\[2\.6rem\] {
    font-size: 2.6rem;
  }
}

@media (min-width: 1024px) {
  .lg\:h-\[500px\] {
    height: 500px;
  }

  .lg\:w-\[480px\] {
    width: 480px;
  }

  .lg\:w-\[620px\] {
    width: 620px;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1fr_1fr_1fr_1\.6fr_0\.4fr\] {
    grid-template-columns: 1fr 1fr 1fr 1.6fr 0.4fr;
  }

  .lg\:items-center {
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .xl\:w-\[320px\] {
    width: 320px;
  }

  .xl\:w-\[650px\] {
    width: 650px;
  }
}

/*Custom css classes  */

.bg-brandLight {
    background-color: #e8f3ff;
}

.text-brandDark {
    color: #00264d;
}

.blue-text-color {
    color: #143f8c;
}


.dark-blue-bg-colr {
    background-color: #3771BC;
}

.journey-text-colr {
    color: #000F43;
}

.values-section {
    padding: 10px 0;
    background: #f6f7ff;
    margin-left : 10px;
    margin-right: 10px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    max-width: 1400px;
    margin: auto;
}

.value-card {
    background: #ffffff;
    border-radius: 32px;
    padding: 40px 30px;
    text-align: center;
    border: 2px solid #5276ba;
    box-shadow: 0 20px 40px rgba(140, 146, 247, 0.45);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

    .value-card:hover {
        transform: translateY(-6px);
      box-shadow: 0 0 35px 10px rgba(140, 146, 247, 0.85);
       background-color: #f8f9ff;
    }

    .value-card i {
        font-size: 36px;
        color: #1554ff;
        margin-bottom: 20px;
    }

    .value-card h3 {
        font-size: 23px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #000;
    }

    .value-card p {
        font-size: 13px;
        line-height: 1.9;
        color: #555;
    }

/* Responsive */
@media(max-width: 1200px) {
    .values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(max-width: 768px) {
    .values-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* Section background */
.trust-section {
    background: #3e70c3;
    padding: 50px 0 70px;
/*    margin-left: 10px;
    margin-right : 10px;*/
}

/* Row container (each pair of cards + center icons) */
.trust-row {
    max-width: 1500px;
    margin: 40px 10px;
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    align-items: center;
    gap: 30px;
}

/* Card Styling */
.trust-card {
    background: #ffffff;
    padding: 45px 40px;
    border-radius: 35px;
    border: 2px solid #5276ba;
    box-shadow: 0 0 35px 8px rgba(140, 146, 247, 0.66);
    transition: 0.3s ease;
    text-align: center;
}

    .trust-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 0 45px 12px rgba(140, 146, 247, 0.92);
    }

    /* Top icon circle */
    .trust-card .icon {
        width: 60px;
        height: 60px;
        background: #eef3ff;
        border-radius: 50%;
        border: 2px solid #5276ba;
        margin: 0 auto 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 20px rgba(140, 146, 247, 0.5);
    }

        .trust-card .icon i {
            font-size: 25px;
            color: #2d4fbf;
        }

    .trust-card h3 {
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #303030;
    }

    .trust-card p {
        font-size: 15px;
        color: #535353;
        line-height: 1.6;
    }

/* Center vertical icons */
.trust-center-icons {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

    .trust-center-icons i {
        font-size: 42px;
        color: white;
    }

/* Responsive */
@media(max-width: 980px) {
    .trust-row {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .trust-center-icons {
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }
}


/* BIG TOP WHITE CARD */
.trust-top-card {
    max-width: 1400px;
    margin: 0 auto 0px auto;
    background: #fff;
    padding: 50px 40px;
    border-radius: 40px;
    border: 2px solid #5276ba;
    box-shadow: 0 0 50px rgba(140, 146, 247, 0.65);
    text-align: center;
}

    .trust-top-card p {
        font-size: 15px;
        color: #4d4d4d;
        line-height: 1.7;
    }


.trust-heading {
    text-align: center;
    font-size: 42px;
    font-weight: 800;
/*    margin-top: 10px;*/
    margin-bottom: 10px;
    color: #000;
    font-family: 'Barlow', sans-serif;
}

    .trust-heading span {
        color: #1e4ed8;
    }


/* Outer BLUE background */
.vm-section {
    background: #3e70c3;
    padding: 60px 0;
}

/* Heading */
.vm-heading {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    color: #0c1b36;
    margin-bottom: 40px;
}

/* Light BLUE inner background */
.vm-inner {
    background: #e6f0fb;
    max-width: 82rem;
    margin: 0 auto;
    padding: 50px 40px;
    border-radius: 6px;
}

/* White Cards */
.vm-card {
    background: #ffffff;
    padding: 35px 35px;
    border-radius: 15px;
    border: 2px solid #d0d7e6;
    box-shadow: 0px 3px 15px rgba(0,0,0,0.08);
    margin-bottom: 40px;
    transition: all 0.35s ease;
    transform: translateY(0);
}

    /* Hover animation: Up effect */
    .vm-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 28px rgba(0,0,0,0.15);
    }


/* Title inside cards */
.vm-title {
    font-size: 22px;
    font-weight: 700;
    color: #114b8a;
    margin-bottom: 15px;
    border-left: 4px solid #1e4ed8;
    padding-left: 10px;
}

/* Paragraph */
.vm-card p {
    font-size: 15px;
    color: #4e4e4e;
    line-height: 1.65;
}


/* Bullet list inside Mission */
.vm-list {
    margin: 20px 0;
    padding-left: 20px;
}

    .vm-list li {
        margin-bottom: 14px;
        line-height: 1.65;
        color: #4e4e4e;
        font-size: 15px;
        list-style-type: disc;
    }



/* Whole section spacing */
.looking-section {
    padding: 60px 20px;
}

/* White box */
.looking-box {
    background: #ffffff;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 40px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
}

/* Heading */
.looking-title {
    font-size: 28px;
    font-weight: 700;
    color: #1e4ed8;
    margin-bottom: 18px;
}

/* Text paragraphs */
.looking-text {
    color: #444;
    font-size: 16px;
    line-height: 1.7;
    max-width: 850px;
    margin: 0 auto 15px auto;
}

/* Button group */
.looking-btn-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 25px;
}

/* Blue Button */
.btn-blue {
    background: #005bbb;
    color: #fff;
    padding: 12px 40px;
    font-size: 16px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: 0.3s ease;
}

    .btn-blue:hover {
        background: #1e4ed8;
        transform: translateY(-3px);
    }

/* Green Button */
.btn-green {
    background: #28a745;
    color: #fff;
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: 0.3s ease;
}

    .btn-green:hover {
        background: #06a55f;
        transform: translateY(-3px);
    }

/* Responsive */
@media (max-width: 768px) {
    .looking-btn-group {
        flex-direction: column;
        gap: 15px;
    }
}

/* MAIN CARD */
.testimonial-card {
    background: #ffffff;
    padding: 35px 40px;
    margin-left : 10px;
    margin-right : 10px;
    border-radius: 20px;
    border: 2px solid #d6e1f5;
    box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

/* The small bottom pointer */
.pointer {
    width: 34px;
    height: 34px;
    background: white;
    border-left: 2px solid #d6e1f5;
    border-bottom: 2px solid #d6e1f5;
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

/* THUMB IMAGES */
.thumb {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border: 4px solid #7bdcb5;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

    .thumb:hover {
        transform: scale(1.12);
    }

/* ARROWS */
.arrow-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    background: #ffffff;
    border-radius: 50%;
    border: 2px solid #d8e3f7;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

@media (max-width: 767px) {
    .arrow-btn {
        display: none !important;
    }
}


.swiper-prev {
    left: -55px;
}

.swiper-next {
    right: -55px;
}


.blue-border-colr {
    border: 2px solid #0073e6 !important;
    border-radius: 20px; /* if you want rounded same as screenshot */
}


/* Background section */
.plans-section {
    /*background: #003a78;*/ /* dark navy blue */
    background: linear-gradient(135deg, #12062f, #0018e1);
    padding: 60px 20px;
    border-radius: 20px;
    margin: 40px auto;
    max-width: 1400px;
}

/* Title */
.plans-title {
    text-align: center;
    color: white;
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 50px;
}

/* Cards grid */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Individual card */
.plan-card {
    background: white;
    border-radius: 18px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* Color variations */
.plan-basic {
    background: #e6f3ff; /* light blue */
}

.plan-enterprise {
    background: #edfff6; /* light green */
}

.plan-flex {
    background: #fff0f7; /* light pink */
}

/* Heading inside card */
.plan-card h3 {
    font-size: 22px;
    color: #003a78;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Plan description text */
.plan-card p {
    color: #333;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Buttons */
.demo-btn {
    padding: 12px 28px;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

/* Button colors */
.demo-blue {
    background: #007bff;
}

.demo-green {
    background: #0daa41;
}

.demo-pink {
    background: #c60060;
}

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


/* MAIN GRADIENT BOX */
.gradient-box {
    background: linear-gradient(135deg, #0d1b2a, #1b365d);
    padding: 40px 15px;
    border-radius: 22px;
    max-width: 1400px;
    margin: 40px auto;
    color: #ffffff;
    line-height: 1.7;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

/* TITLE */
.gradient-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* Bullet List */
.gradient-list {
    margin: 20px 0 30px 0;
    padding-left: 20px;
}

    .gradient-list li {
        list-style: none;
        margin-bottom: 12px;
        padding-left: 25px;
        position: relative;
        font-size: 16px;
    }

        /* Blue bullet icon */
        .gradient-list li::before {
            content: "•";
            font-size: 20px;
            color: #4ba3ff;
            position: absolute;
            left: 0;
            top: -2px;
        }

/* QUOTE BOX */
/*.quote-box {
    background: #ffffff;
    padding: 35px 50px;
    margin: 40px auto;
    border-radius: 10px;
    max-width: 700px;
    color: #1b365d;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
}*/

    /* Quote icon on left */
    /*.quote-box::before {
        content: "?";
        font-size: 40px;
        color: #1b365d;
        position: absolute;
        margin-left: -60px;
        margin-top: -10px;
    }*/

.quote-section {
    /*background: #0d2952;*/ /* Same dark blue background */
    padding: 20px 2px;
}

/* White quote box */
.quote-box {
    position: relative;
    background: #f3f5fa;
    padding: 50px 60px;
    margin: 0 auto;
    border-radius: 4px;
    max-width: 900px; /* Same wide size as screenshot */
    text-align: center;
}

/* Left blue quote icon */
.quote-icon {
    position: absolute;
    left: 25px;
    top: 20px;
    font-size: 50px;
    color: #2872c4;
    opacity: 0.9;
    font-weight: bold;
}

/* Quote text */
.quote-text {
    color: #003d80;
    font-style: italic;
    font-size: 20px;
    line-height: 1.6;
    font-weight: 700;
}

/* Bottom paragraph */
.bottom-text {
    max-width: 1100px;
    margin: 30px auto 0 auto;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.7;
}



.learn-more-btn {
    background: #007bff;
    color: white;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    display: inline-block;
    margin-top: 25px;
}

    .learn-more-btn:hover {
        background: #0066d6;
    }


/*Header code with dropdown*/

.nav-link {
    color: white;
    position: relative;
    transition: color 0.2s;
}

    .nav-link.active-link {
        color: rgb(147, 197, 253);
    }

    .nav-link:hover {
        color: rgb(147, 197, 253);
    }
    .nav-link.active-link::after {
        content: "";
        display: block;
        height: 3px;
        background: rgb(147, 197, 253);
        border-radius: 2px;
        position: absolute;
        bottom: -6px;
        left: 0;
        right: 0;
    }


.header-dropdown {
    background: #010f31; /* Same as header */
    border-top: 4px solid #fff;
    border-bottom: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.4s, transform 0.4s;
    position: absolute;
    left: 0;
    width: 200px;
    z-index: 100;
    padding: 10px 0;
}

.group:hover .header-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-dropdown a {
    color: #fff;
    padding: 10px 30px;
    display: block;
    transition: background 0.2s;
}

    .header-dropdown a:hover {
        background: #2e2e2e;
    }


.service-card {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    height: 22rem;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease-in-out;
}

.service-card:hover .service-img {
    transform: scale(1.1);
}

/* TEXT over image */
.service-content {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
    color: white;
    text-align : center;
}

    .service-content h2 {
        font-size: 35px;
        font-weight: 700;
        margin-bottom: 10px;
      
        text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }

    .service-content p {
        font-size: 18px;
        font-weight: 600;
        text-shadow: 0 2px 10px rgba(0,0,0,0.4);
    }

/* Blue Overlay (Zoom-In Effect) */
.service-hover {
    position: absolute;
    inset: 0;
    background: rgba(55, 113, 188, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: white;
    transform: scale(0.3);
    opacity: 0;
    transition: all 0.45s ease-in-out;
    border-radius: inherit;
}

/* Hover ? show overlay */
.service-card:hover .service-hover {
    transform: scale(1);
    opacity: 1;
}

/* White triangle pointer */
.arrow-up {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 18px solid white;
}

/* Button */
.hover-btn {
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    color: white;
}


html, body {
    overflow-x: hidden !important;
}


/* Flip Card */
.card-outer {
    position: relative;
    width: 100%;
    height: 300px;
    perspective: 1200px;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(.2,.8,.2,1);
    transform-origin: center;
}

.card-outer:hover .card-inner {
    transform: rotateX(180deg);
}

.card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.card-front {
    transform: rotateX(0deg);
}

.card-back {
    transform: rotateX(180deg);
    background: #2f6fcc;
}

.card-front img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

@media(max-width:640px) {
    .card-outer {
        height: 300px;
    }
}


.counter-section {
    scroll-margin-top: 80px;
}


/*Loader css */

/* Wrapper */
.loader-wrapper {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s ease;
    /* smoother fade-out */
}

/* Ripple Animation */
.ripple-loader {
    position: relative;
    width: 90px;
    height: 90px;
}

    .ripple-loader div {
        position: absolute;
        border: 5px solid rgba(90, 150, 230, 0.45);
        border-radius: 50%;
        animation: ripple 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
        /* smooth ripples */
    }

        .ripple-loader div:nth-child(2) {
            animation-delay: -0.9s;
        }

/* SMOOTH ripple keyframes */
@keyframes ripple {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* Optional center logo */
.loader-logo {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

html,
body {
    overflow-x: hidden !important;
}

/* Styles required for flip*/
/* Container sizing */
.card-outer {
    position: relative;
    width: 100%;
    height: 300px;
    perspective: 1200px;
}

/* inner wrapper that flips */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
    transform-origin: center center;
}

/* flip on hover (top-to-bottom = rotateX) */
.card-outer:hover .card-inner {
    transform: rotateX(180deg);
}

/* both faces (front/back) */
.card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    /* hide backside when rotated away */
    -webkit-backface-visibility: hidden;
    display: block;
}

/* front stays normally */
.card-front {
    transform: rotateX(0deg);
}

/* back is rotated so it appears after flip */
.card-back {
    transform: rotateX(180deg);
    background: #2f6fcc;
    /* blue background */
}

/* make sure absolute children (like the overlay text) stack */
.card-front > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.card-front .absolute {
    position: absolute;
    inset: 0;
}

/* responsive tweak: reduce height on small screens */
@media (max-width: 640px) {
    .card-outer {
        height: 300px;
    }

    .card-front h2,
    .card-back h3 {
        font-size: 1.25rem;
    }
}


.footer-icon-round{
    height: 3rem;
    width : 3rem;
}


.custom-contact-section {
    width: 100%;
    background-color: white;
    padding-top: 1.5rem; /* py-6 */
    padding-bottom: 1.5rem;
    max-width: 112rem; /* max-w-7xl */
    margin-left: auto;
    margin-right: auto;
}

.custom-contact-card {
    border-width: 6px;
    margin: 1rem;
    border-style: solid;
    border-color: #050d21;
    box-shadow: 0 0 25px 8px #a1a6f9;
    background-color: white;
    color: black;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    border-radius: 0;
    /* For medium screens and above */
}

@media (min-width: 768px) {
    .custom-contact-card {
        grid-template-columns: repeat(3, 1fr);
        border-left: 0;
        border-right: 0;
        border-top: 0;
        border-bottom: 0;
        border-style: none;
        border-color: transparent;
        gap: 0;
    }

        .custom-contact-card > div {
            border-left: 1px solid #0c1b3a;
        }
}

/* Boxes inside the card */
.custom-contact-box {
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
    border-top: 1px solid #0c1b3a; /* for xs */
}

@media (min-width: 768px) {
    .custom-contact-box {
        border-top: 0;
        border-left: 1px solid #0c1b3a;
    }
}

.custom-contact-box h3 {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 600;
    margin-bottom: 1rem; /* mb-4 */
}

.custom-contact-box p {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem; /* text-lg */
    margin-bottom: 0.5rem; /* mb-2 except last p */
}

    .custom-contact-box p:last-child {
        margin-bottom: 0;
    }

.custom-contact-box i {
    font-size: 1.25rem; /* text-xl */
}

    .custom-contact-box i.fa-envelope {
        margin-top: 0.5rem;
    }

    .custom-contact-box i.fa-check {
        padding-top: 0.5rem;
    }


/*Header css*/

.fixed-buttons {
    position: fixed;
    bottom: 70px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.float-btn {
    width: 55px;
    height: 55px;
    background: #3771BC;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    transition: 0.3s;
}

    .float-btn:hover {
        transform: scale(1.1);
    }


/* Hide Home floating button on screens < 768px */
@media (max-width: 767px) {
    .home-float-btn {
        display: none !important;
    }
}


/* Social Floating Menu */
.social-menu {
    position: fixed;
    bottom: 72px;
    right: 80px;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 99999;
}

.social-item {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateX(20px);
    pointer-events: none;
    transition: 0.35s ease;
}

.social-menu.active .social-item {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}


.social-item {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.6rem;
    margin: 0 7px;
    box-shadow: 0 2px 10px rgba(49,56,72,0.14);
    transition: transform 0.18s, box-shadow 0.18s;
    border: none;
    outline: none;
}

    .social-item:hover {
        transform: scale(1.12);
        box-shadow: 0 4px 22px rgba(40,90,235,0.22);
    }


.social-menu {
    display: flex;
    flex-direction: row;
    gap: 0px;
}


.slider-margin-sides{
    margin-left : 2rem;
    margin-right : 1rem;
}

/* Increase map height + margin for small screens */
@media (max-width: 767px) {
    .map-responsive {
        height: 400px !important;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}


.bg-header-bg-img {
    background-image: url('/images/header-bg-img.png'); 
}

.bg-comparision-bg-img {
    background-image: url('/images/our-services/dimond-shape-design.png');
}

.banner-three-cards {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 2rem;
    background-color: #010f31;
    height: auto;
}

/* Desktop 768px+ — apply fixed height like screenshot */
@media (min-width: 768px) {
    .banner-three-cards {
        padding-left: 5rem;
        padding-right: 5rem;
        height: 11.5rem; 
        padding-top: 1rem;
    }
}

@media (min-width: 1600px) {
    .banner-three-cards {
        height: 24.5rem;
    }
}


.light-blue-text {
    color: #aad4ff;
}


@media (min-width: 1600px) {
    .main-heading {
        font-size: 4rem;
    }
}



.why-section {
    background: linear-gradient(135deg, #12062f, #0018e1);
    border-radius: 20px;
    margin: 10px;
    padding: 50px 20px;
}

/* GRID (3 columns like screenshot) */
.why-wrapper {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: 30px 40px;
}

    /* Center last item */
    .why-wrapper > .why-item:last-child {
        grid-column: 1 / -1;
        justify-self: center;
    }

/* Pills Style */
.why-item {
    background: #ffffff;
    padding: 18px 40px;
    border-radius: 40px;
    font-size: 18px;
    color: #003B87;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

    .why-item:hover {
        transform: scale(1.07);
        box-shadow: 0px 12px 28px rgba(0,0,0,0.18);
    }

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .why-wrapper {
        grid-template-columns: repeat(2, auto);
    }

        .why-wrapper > .why-item:last-child {
            grid-column: 1 / -1;
            justify-self: center;
        }
}


@media (max-width: 768px) {
    .why-item {
        max-width: 80%; 
        font-size : 17px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .why-wrapper {
        grid-template-columns: repeat(1, auto);
    }

        .why-wrapper > .why-item:last-child {
            grid-column: auto;
            justify-self: center;
        }

    .why-item {
        max-width: 90%; 
    }
}


/* MAIN BLUE BOX */
.pricing-blue-box {
    background: #1e88e5;
    padding: 40px 30px;
    border-radius: 20px;
    margin: 30px 20px;
    color: white;
    box-shadow: 0px 12px 40px rgba(0, 0, 0, 0.12);
}

.pricing-wrapper {
    max-width: 1000px;
    margin: auto;
}

/* HEADINGS */
.pricing-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 25px;
}

.pricing-desc {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 30px;
}

.pricing-subtitle {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* LIST */
.pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

    .pricing-list li {
/*        display: flex;*/
        align-items: flex-start;
        font-size: 18px;
        margin-bottom: 12px;
        line-height: 1.6;
    }

.tick {
    color: white;
    background: rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    border-radius: 50%;
    font-size: 18px;
    margin-right: 12px;
}

/* FORMULA */
.pricing-formula {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 35px;
}

/* BUTTONS AREA */
.pricing-buttons {
    display: flex;
    gap: 20px;
}

/* BUTTON 1 — BLUE SOLID */
.btn-primary {
    background: white;
    color: #1e88e5;
    padding: 14px 40px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

    .btn-primary:hover {
        background: #e3f1ff;
        transform: translateY(-3px);
    }

/* BUTTON 2 — OUTLINE */
.btn-outline {
    border: 2px solid white;
    color: white;
    padding: 12px 40px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

    .btn-outline:hover {
        background: white;
        color: #1e88e5;
        transform: translateY(-3px);
    }

/* RESPONSIVE */
@media (max-width: 650px) {
    .pricing-buttons {
        flex-direction: column;
        width: 100%;
    }

    .btn-primary,
    .btn-outline {
        width: 100%;
        text-align: center;
    }
}



.demo-form-wrapper {
    position: relative;
    margin-top: -180px;
    background: #ffffff;
    border-radius: 22px;
    border: 8px solid #000;
    box-shadow: 0px 25px 60px rgba(0, 0, 0, 0.35);
    overflow: visible;
    padding-bottom: 40px; /* ? FIX: Ensures submit button is visible */
}


/* White background fade behind form */
.demo-bg-shadow {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 300px;
    filter: blur(80px);
    background: rgba(0, 0, 255, 0.25); /* Light blue glow */
    z-index: -1;
}



/* outer section */
.lifecycle-section {
    position: relative;
    width: 100%;
    padding: 2rem 1.5rem; /* same as py-16 px-6 */
/*    background: #010F31;*/
    overflow: hidden;
    box-sizing: border-box;
}

    .lifecycle-section::before {
        /* background pattern layer (optional) */
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.12;
        background-repeat: repeat-x;
        /* You can set your background image here */
        background-image: url('path-to-your-bg.png');
        pointer-events: none;
    }

/* inner 2-column container (equal height columns) */
.lifecycle-inner {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 2.5rem;
    align-items: stretch; /* this makes both columns equal height */
    box-sizing: border-box;
}

/* left content column */
.lifecycle-left {
    flex: 1 1 50%;
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center; /* center vertically inside the full height */
    gap: 1rem;
    min-width: 260px;
}

    .lifecycle-left h2 {
        font-size: 2.25rem;
        margin: 0;
        line-height: 1.05;
    }

    .lifecycle-left p {
        opacity: 0.9;
        margin: 0;
    }

    .lifecycle-left h3 {
/*        font-size: 3rem;*/
        margin-top: 1rem;
    }

.lifecycle-list {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: 0.75rem;
    display: block;
}

    .lifecycle-list li {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        margin-bottom: 0.6rem;
    }

        .lifecycle-list li span {
            color: #3b82f6;
            font-size: 1.125rem;
            line-height: 1;
            margin-top: 0.12rem;
        }

        .lifecycle-list li p {
            margin: 0;
            line-height: 1.15;
        }


/* right video column */
.lifecycle-right {
    flex: 1 1 50%;
    display: flex;
    align-items: stretch; 
    justify-content: center;
    min-width: 260px;
}


.video-box {
    width: 100%;
    height: 100%; 
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    background: transparent !important; 
}

    
    .video-box > * {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.video-thumb {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
}


.video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.3);
}

.play-circle {
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(2,6,23,0.45);
}

    .play-circle svg {
        width: 36px;
        height: 36px;
        color: #ef4444;
    }


@media (max-width: 900px) {
    .lifecycle-inner {
        flex-direction: column;
        gap: 1.25rem;
    }

    .video-box {
        height: 280px; 
    }
}

/*benfits section*/

.benefits-wrapper {
    width: 100%;
    padding: 20px 20px;
    display: flex;
    justify-content: center;
}

.benefits-container {
    background: white;
    padding: 40px;
    border-radius: 20px;
    max-width: 1100px;
    width: 100%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.05);
}

.benefits-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #0B1B40;
    margin-bottom: 35px;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .benefits-list li {
        background: #F3F6FB;
        padding: 18px 20px;
        margin-bottom: 15px;
        border-radius: 10px;
        font-size: 16px;
        color: #333;
        line-height: 1.6;
        display: block;
    }


.header-dropdown,
.mega-dropdown {
    background: #071733;
    color: #fff;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scaleY(0.98);
    transform-origin: top center; /* feels like dropping down */
    transition: opacity 320ms cubic-bezier(.2,.9,.2,1), transform 320ms cubic-bezier(.2,.9,.2,1);
    z-index: 9999;
    pointer-events: none; /* prevents accidental hover while hidden */
}

/* show state (only change Y/scale + opacity) */
.group:hover .header-dropdown,
.group:focus-within .header-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scaleY(1);
    pointer-events: auto;
}

/* header (small) dropdown positioning */
.header-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    padding: 18px;
    margin-top: 6px;
}

    /* header-dropdown link styles (unchanged, kept for clarity) */
    .header-dropdown a {
        display: block;
        padding: 12px 6px;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
    }

        .header-dropdown a:hover {
            color: #4eb3ff;
        }

/* ---------- Mega dropdown: center and full-width behavior ---------- */
/* Center the mega dropdown under the nav, expand to full width while keeping content centered */
.mega-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px) scaleY(0.98); /* initial y + subtle scale */
    width: 100vw; /* full-width bar */
    max-width: 100%; /* ensure doesn't overflow parent */
    padding: calc(18px + 4px) 0 28px;
    margin-top: 0px;
    border-radius: 0 0 6px 6px;
    overflow: visible;
}

/* When hovered, only adjust Y/scale (no X movement) */
.group:hover .mega-dropdown,
.group:focus-within .mega-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scaleY(1); /* X kept at -50% to remain centered */
    pointer-events: auto;
}

/* layout inside mega */
.mega-dropdown-inner {
    max-width: 2000px;
    margin: 0 auto;
    padding: 20px 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
}

/* links */
.mega-col a {
    display: block;
    padding: 10px 0;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

    .mega-col a:hover {
        color: #4eb3ff;
    }

/* white top stripe (keeps earlier visual) */
.header-dropdown::before,
.mega-dropdown::before {
    content: "";
    display: block;
    height: 4px;
    background: #ffffff;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}


/* ensure the link itself shows active underline / spacing consistent */
.nav-item .nav-link {
    position: relative;
}

.objective-box-bg {
    background-color: #f9fbff;
}

.objective-heading-text {
    color: #003366;
}

.crm-table-wrapper {
    background: #f9fbff;
    border-radius: 18px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-width: 1280px;
    margin: 0 auto;
}

.crm-table-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.crm-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
}

    .crm-table thead tr {
        background: #0A2A66;
        color: #ffffff;
    }

    .crm-table th {
        padding: 14px 18px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .crm-table td {
        padding: 14px 18px;
        font-size: 15px;
        color: #333;
        vertical-align: top;
    }

    .crm-table tbody tr {
        border-bottom: 1px solid #e5e5e5;
    }

        .crm-table tbody tr:last-child {
            border-bottom: none;
        }

.crm-highlight-row {
    background: #F1F7FF !important;
}


.crm-feature-section {
    max-width: 1250px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 25px;
}

.crm-card {
    /*    background: #fff7f1;*/
    background: linear-gradient(180deg, #fff3ea, rgba(105 112 203 / 70%));
    /*    background: linear-gradient(180deg, #115bd4, #fff 102.83%);*/
    border-radius: 14px;
    padding: 45px 0px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0,0,0,0.08);
    margin : 10px;
}

    .crm-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    }

    .crm-card:nth-child(2) {
        background: linear-gradient(180deg, #fff3ea, rgba(105 112 203 / 70%))
    }

    .crm-card:nth-child(3) {
        background: linear-gradient(180deg, #fff3ea, rgba(105 112 203 / 70%))
    }

.crm-card-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 15px auto;
}

.crm-card-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: darkblue;
}

.crm-card-desc {
    font-size: 16px;
    color: #333;
    margin-bottom: 18px;
    line-height: 1.6;
}

.crm-card ul {
    text-align: left;
    margin: 0 auto;
    max-width: 400px;
}

    .crm-card ul li {
        margin-bottom: 10px;
        font-size: 15px;
        color: #333;
        position: relative;
        padding-left: 20px;
    }

        .crm-card ul li::before {
            /* content: "?";*/
            position: absolute;
            left: 0;
            top: 0;
            color: #0073ff;
            font-size: 15px;
        }


.walkin-section {
    background: #EAF4FF;
    padding: 50px 30px;
    border-radius: 22px;
    max-width: 1400px;
    margin: 20px auto;
}

.walkin-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #0A2A66;
    margin-bottom: 10px;
}

.walkin-subtext {
    text-align: center;
    font-size: 16px;
    color: #333;
    margin-bottom: 35px;
}

.walkin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
    gap: 25px;
}

.walkin-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 35px 0px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    transition: 0.25s ease-in-out;
}

    .walkin-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    }

.walkin-card-title {
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #0A2A66;
}

.walkin-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .walkin-card ul li {
        font-size: 15px;
        margin-bottom: 12px;
        padding-left: 25px;
        position: relative;
        color: #333;
        line-height: 1.5;
    }

        .walkin-card ul li::before {
       position: absolute;
            left: 0;
            color: #6C4DFF;
            font-size: 15px;
            font-weight: bold;
        }


.whycrm-section {
    max-width: 1300px;
    margin: 0px auto;
    background: white;
    border-radius: 22px;
    padding: 50px 50px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.whycrm-title {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 25px;
    color: #0A2A66;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.whycrm-text {
    text-align: center;
    font-size: 18px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 35px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.whycrm-tagline {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    color: #222;
}


.mission-container {
    display: flex;
    gap: 40px;
    padding: 40px;
    background: #f0f7ff;
    border-radius: 14px;
    max-width: 100rem;
    margin: 0px auto;
    align-items: stretch; /* Ensures equal height */
}

.mission-left {
    flex: 1;
    background: #eaf5ff;
    padding: 35px 30px;
    border-radius: 14px;
    line-height: 1.7;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mission-right {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mission-right img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        border-radius :  1rem;
    }

.mission-badge {
    position: absolute;
    top: 40px;
    right: 20px;
    background: #0144d0;
    color: white;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

.mission-title {
    font-size: 28px;
    font-weight: 700;
    color: #004aad;
    margin-bottom: 15px;
}

.mission-subtitle {
    font-weight: 600;
    margin-top: 10px;
}

.mission-core {
    font-weight: 700;
    font-size: 18px;
    color: #003c99;
    margin-bottom: 15px;
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .mission-container {
        flex-direction: column;
        padding: 25px;
    }

    .mission-right img {
        width: 80%;
    }

    .mission-badge {
        top: 20px;
    }
}

@media (max-width: 600px) {
    .mission-title {
        font-size: 22px;
    }
}



.vision-container {
    display: flex;
    gap: 40px;
    padding: 40px;
    max-width: 1550px;
    margin: 40px auto;
    align-items: stretch;
}

/* LEFT IMAGE */
.vision-left {
    flex: 1;
    position: relative;
    min-height: 700px; 
    border-radius: 14px;
    overflow: hidden;
}

.admission-left {
    flex: 1;
    position: relative;
    min-height: 700px;
    border-radius: 14px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .vision-left {
        min-height: 100px; /* apply smaller height on mobile */
    }
}

    .vision-left img {
        width: 100%;
        height: 100%;
        object-fit: fill; /* Fills container height perfectly */
        display: block;
    }

.vision-badge {
    position: absolute;
    bottom: 20px;
    background: #d9536f;
    color: white;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
}

.vision-right {
    flex: 1;
    background: #e8f3ff;
    padding: 10px 30px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vision-title {
    font-size: 28px;
    font-weight: 700;
    color: #004aad;
    margin-bottom: 18px;
}

.vision-list {
    margin: 20px 0;
    padding: 0;
}

    .vision-list li {
        list-style: none;
        margin: 8px 0;
        display: flex;
        gap: 10px;
    }

        .vision-list li span {
            color: #008cff;
            font-weight: bold;
        }

.vision-subheading {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 20px;
    color: #004aad;
    font-weight: 700;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .vision-container {
        flex-direction: column;
        min-height: auto;
    }

    .vision-left img {
        height: auto;
    }

    .vision-badge {
        bottom: 10px;
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .vision-title {
        font-size: 22px;
    }
}


.company-section {
    padding: 40px 20px;
}

.company-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
}

/* Title */
.company-title {
    font-size: 32px;
    font-weight: 600;
    color: #003B88;
    border-bottom: 4px solid #003B88;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* Paragraph */
.company-desc {
    color: #444;
    font-size: 17px;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* List wrapper */
.company-list {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Space between every line */
}

/* Each line box */
.company-item {
    background: #f2f2f2;
    padding: 15px 20px;
    border-radius: 10px;
    color: #333;
    font-size: 17px;
    
}


.services-section {
    padding: 40px 20px;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
}

/* Heading */
.services-title {
    font-size: 30px;
    font-weight: 600;
    color: #0053A0;
    border-bottom: 3px solid #0053A0;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 30px;
}

/* Service block spacing */
.service-block {
    margin-bottom: 25px;
}

/* Bold headings for each service */
.service-heading {
    font-size: 18px;
    font-weight: 600;
    color: #003B88;
    margin-bottom: 6px;
}

/* Descriptive text */
.service-text {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
}

/* Section Wrapper */
.core-section {
    padding: 40px 20px;
}

/* White Card Container */
.core-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
}

/* Title */
.core-title {
    font-size: 30px;
    font-weight: 600;
    color: #0053A0;
    border-bottom: 3px solid #0053A0;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 30px;
}

/* Value Section Title */
.core-heading {
    font-size: 20px;
    font-weight: 700;
    color: #003B88;
    margin-bottom: 10px;
}

/* Description Text */
.core-desc {
    color: #444;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* List container */
.core-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
}

/* Grey rounded box items */
.core-item {
    background: #f2f2f2;
    padding: 18px 20px;
    border-radius: 10px;
    color: #333;
    font-size: 16px;
   
}

/* Space between each major block */
.core-block {
    margin-bottom: 35px;
}


.threeE-section {
    max-width: 1500px;
    margin: 60px auto;
    text-align: center;
    padding: 20px 20px;
    position: relative;
    background-color: #e8f3ff;
}

/* TITLE */
.threeE-title {
    font-size: 3rem;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: Barlow;
}

    .threeE-title span {
        color: #1d5fc1;
    }

/* SUBTEXT */
.threeE-sub {
    font-size: 14px;
    color: black;
    margin-bottom: 20px;
}

/* SECTION HEADINGS */
.threeE-heading {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 15px;
    font-family: Barlow;
}

/* DESCRIPTION TEXT */
.threeE-description {
    font-size: 18px;
    line-height: 1.8;
    font-weight : 600;
    max-width: 900px;
    margin: 0 auto;
}

/* SPACING BETWEEN SECTIONS */
.mt-60 {
    margin-top: 60px;
}

/* LIST STYLE */
.threeE-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    font-size: 16px;
  line-height: 2;
}

    .threeE-list li::before {
        
        color: #1d5fc1;
        font-weight: bold;
    }

/* BACKGROUND LIGHT BLUE SHAPES */
.threeE-section::before,
.threeE-section::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 550px;
/*    background: url('/images/CyborgERP_ourjourney.jpg') no-repeat center/contain;*/
    opacity: 0.30;
    z-index: -1;
}

.threeE-section::before {
    top: 120px;
    left: -80px;
}

.threeE-section::after {
    bottom: 0;
    right: -80px;
/*    background: url('/images/CyborgERP_ourjourney.jpg') no-repeat center/contain;*/
}


.All-font-family {
    font-family: Barlow;
}


.team-section {
    padding: 60px 0;
    width: 100%;
}

.team-container {
    max-width: 1600px;
    margin-left : 10px;
    margin-right : 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}

.team-left img {
    width: 100%;
    height: 100%;
    object-fit: fill; 
    border-radius: 12px;
}

.team-right {
    background: #E5F2FF;
    padding: 35px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center; 
}

.team-heading {
    font-size: 30px;
    font-weight: 600;
    color: #005BAC;
    text-align: center;
    margin-bottom: 20px;
}

/* Paragraph styling */
.team-right p {
    font-size: 16px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 15px;
}

/* RESPONSIVE LAYOUT */
@media (max-width: 992px) {
    .team-container {
        grid-template-columns: 1fr;
    }

    .team-left img {
        height: 300px;
    }
}

@media (max-width: 576px) {
    .team-right {
        padding: 20px;
    }

    .team-heading {
        font-size: 22px;
    }

    .team-left img {
        height: 220px;
    }
}


.testimonial-section {
    padding: 60px 0;
}

.testimonial-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.testimonial-card {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    transition: all .3s ease-in-out;
}

    /* Hover border outside the box */
    .testimonial-card:hover {
        border-color: #4A90E2;
        box-shadow: 0 0 0 3px rgba(74,144,226,0.35);
    }

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

    .testimonial-header img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
    }

    .testimonial-header h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
    }

    .testimonial-header p {
        margin: 0;
        font-size: 14px;
        color: #666;
    }

.testimonial-text {
    font-size: 15px;
    line-height: 1.9;
    color: black;

}

/* Responsive */
@media (max-width: 992px) {
    .testimonial-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .testimonial-container {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* Background wrapper outside cards */
.expert-roles-wrapper {
    background: #e9f3ff; 
    padding: 50px 20px;
    border-radius: 14px;
    max-width: 1400px;
    margin: 40px auto;
}

/* Center title */
.roles-title {
    text-align: center;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 40px;
    color: #003366;
}

.roles-heading-color {
    color: #003366;
    font-size: 20px;
    font-weight: 600;
    text-align : center;
    padding-bottom : 20px;
}


.expert-roles-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 35px;
    justify-items: stretch;
}

.expert-roles-container > :last-child:nth-child(odd) {
        grid-column: 1 / -1; 
        justify-self: center;
        width: calc((100% - 35px) / 2); 
        max-width: 720px; 
    }

@media (max-width: 768px) {
    .expert-roles-container {
        grid-template-columns: 1fr;
        justify-items: center; 
    }

     .expert-roles-container > :last-child:nth-child(odd) {
            grid-column: auto; 
            width: 100%;
            max-width: none;
        }
}


.hr-line-color {
    background-color: #5463E5;
}


.information-box {
    background: #f7faff;
    max-width: 850px;
    margin: 0 auto;
    padding: 40px 40px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
}


.collaboration-section {
    padding: 60px 0;
}

.collaboration-container {
    max-width: 1350px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;
    gap: 40px;
}

/* LEFT BOX */
.collab-content-box {
    background: #e9f3ff;
    padding: 50px 40px;
    border-radius: 18px;
}

.collab-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #003366;
    margin-bottom: 30px;
}


.collab-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .collab-list li {
        font-size: 18px;
        margin: 18px 0;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        color: #003366;
        line-height: 1.5;
    }

        /* SVG right tick icon */
        .collab-list li::before {
            content: "";
            width: 20px;
            height: 20px;
            flex-shrink: 0;
            margin-top: 4px;
            background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230057b7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            background-size: 20px;
            background-repeat: no-repeat;
        }


.collab-image-box {
    text-align: center;
}

.collab-image {
    width: 100%;
    max-width: 550px;
    height: auto;
}

@media (max-width: 900px) {
    .collaboration-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .collab-content-box {
        padding: 40px 30px;
    }
}



.tick-points .testimonial-text {
    position: relative;
    padding-left: 28px;
    margin: 14px 0;
    font-size: 16px;
    line-height: 1.6;
}

    .tick-points .testimonial-text::before {
        content: "";
        width: 18px;
        height: 18px;
        position: absolute;
        left: 0;
        top: 4px;
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230057b7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
        background-size: 18px;
        background-repeat: no-repeat;
    }



@media (max-width: 768px) {
    .mobile-center-logo {
        justify-content: center !important;
        width: 150%;
    }

   
    header .flex.items-center.justify-between {
     
        position: relative;
    }

   
    #openDrawer {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
}


.footer-icon-round:hover {
    transform: scale(1.15);
    transition: transform 0.3s ease-in-out;
}

.footer-icon-round {
    transition: transform 0.3s ease-in-out; 
}


.clients-section {
    padding: 50px 0;
    /*    background: #F8F9FA;*/
/*    background: linear-gradient(0deg, #d5fefd, #e1fdff, #effdff, #fafdff, #fff);*/
}

.clients-container {
    max-width: 1400px;
    margin: auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 30px;
}

.client-card {
    /*    background: #fff;*/
    background: linear-gradient(0deg, #89a2eb7d, #a7bdf345, #effdff, #fafdff, #fff);
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 6px rgb(0 0 0 / 55%);
}

.client-logo {
    height: 200px;
    display: block;
    margin: 0 auto 15px auto;
}

.client-title {
    font-size: 24px;
    font-weight: 700;
    font-family: Oswald, Sans-serif;
    text-align: center;
    margin-bottom: 5px;
}

.client-subtitle {
    text-align: center;
    color: black;
    margin-bottom: 20px;
    font-weight : 600;
}

.client-content p {
    font-size: 17px;
    color: black;
    line-height: 1.7;
}

.client-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 15px;
}

    .client-content ul li {
        margin-bottom: 10px;
        font-size: 17px;
        color: black;
    }

@media(max-width: 600px) {
    .clients-container {
        grid-template-columns: 1fr;
    }

    .client-card {
        padding: 20px;
    }

    .client-logo {
        height: 100px;
    }

    .client-title {
        font-size: 20px;
    }
}




.clients-section {
    padding: 50px 20px;
}

.clients-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #1d4e89;
    margin-bottom: 40px;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.client-card {
    border: 2px solid #001f3f;
    border-radius: 12px;
    padding: 35px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.client-text {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
    margin-bottom: 30px;
}

.client-name {
    font-size: 20px;
    font-weight: 700;
    color: #0096d6; /* Blue name */
    margin-bottom: 4px;
}

.client-position {
    font-size: 16px;
    color: #444;
}

/* Responsive for tablets & mobiles */
@media(max-width: 992px) {
    .clients-grid {
        grid-template-columns: 1fr;
    }

    .client-card {
        padding: 25px;
    }
}


.client-info {
    text-align: right;
}


/* Outer section */
.security-section {
    background: #fff;
}

/* Two column layout */
.container-sec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}

.security-title {
    font-size: 32px;
    font-weight: 700;
    color: #1d4e89;
    line-height: 1.3;
    margin-bottom: 20px;
}

.security-underline {
    width: 180px;
    height: 4px;
    background-image: linear-gradient(90deg, #1d4e89 50%, transparent 50%);
    background-size: 20px 4px;
    background-repeat: repeat-x;
    margin-bottom: 25px;
}

.security-text {
    font-size: 17px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Right Image Styling */
.security-image-wrapper {
    width: 100%;
    height: 100%;
}

.security-image {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Responsive for mobile */
@media screen and (max-width: 768px) {
    .container-sec {
        grid-template-columns: 1fr;
    }

    .security-image {
        height: 300px;
        margin-top: 20px;
    }

    .security-title {
        font-size: 26px;
        text-align: center;
    }

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

    .security-underline {
        margin-left: auto;
        margin-right: auto;
    }
}


/* Heading */
.sec-dashboard-title {
    font-size: 32px;
    font-weight: 700;
    color: #1d4e89;
}

.sec-underline {
    width: 200px;
    height: 4px;
    background-image: linear-gradient(90deg, #1d4e89 50%, transparent 50%);
    background-size: 20px 4px;
    background-repeat: repeat-x;
    margin: 10px auto 20px;
}

.sec-dashboard-sub {
    font-size: 16px;
    color: #333;
    margin-top: 5px;
}

/* Grid layout */
.sec-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* Left Image */
.sec-dashboard-img-wrap {
    width: 100%;
}

.sec-dashboard-img {
    width: 100%;
    height: 490px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Right Content */
.sec-point-title {
    font-size: 20px;
    font-weight: 700;
    color: #1d4e89;
}

.sec-points {
    margin-top: 6px;
    margin-left: 0;
    padding-left: 20px;
    color: #444;
    line-height: 1.7;
}

    .sec-points li {
/*        list-style-type: "";*/
    }

.sec-points-info {
    margin-top: 6px;
    font-size: 15px;
    color: #333;
}

/* RESPONSIVE */
@media screen and (max-width: 768px) {
    .sec-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .sec-dashboard-img {
        height: 250px;
    }

    .sec-dashboard-title {
        font-size: 26px;
    }

    .sec-points li {
        font-size: 15px;
    }
}


.security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    padding: 20px 40px;
    background-color: #f5f7fa;
}

.security-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px;
    min-height: 330px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    border: 1px solid #ececec;
    transition: all 0.3s ease;
}

    .security-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .security-card h3 {
        font-size: 22px;
        font-weight: 700;
        color: #1d3557;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .security-card .icon {
        font-size: 24px;
        color: #1d4e89;
    }

    .security-card ul {
        padding-left: 18px;
    }

        .security-card ul li,
        .security-card p {
            color: #3b3b3b;
            line-height: 1.6;
            margin-bottom: 10px;
        }

@media (max-width: 600px) {
    .security-card {
        min-height: auto;
    }
}


/* Wrapper to center align both cards */
.two-security-wrapper {
    display: flex;
    justify-content: center;
    gap: 30px;
    background-color : #f5f7fa;
    padding: 20px 0;
    flex-wrap: wrap;
}

/* Card styling same as screenshot */
.security-card-two {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    width: 500px;
    min-height: 160px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    border: 1px solid #ececec;
    transition: all 0.3s ease;
}

    /* Hover effect (smooth lift) */
    .security-card-two:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    /* Heading + Icon */
    .security-card-two h3 {
        font-size: 22px;
        font-weight: 700;
        color: #1d3557;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .security-card-two .icon {
        font-size: 22px;
        color: #d9534f; /* red tone like screenshot */
    }

    /* Description text */
    .security-card-two p {
        font-size: 16px;
        color: #3b3b3b;
        line-height: 1.6;
        margin: 0;
    }

/* Mobile responsiveness */
@media (max-width: 600px) {
    .security-card-two {
        width: 100%;
        min-height: auto;
    }
}


/* Section Background */
.proactive-security-section {
    background: white;
    padding: 50px 20px 80px;
    text-align: center;
}

/* Heading */
.proactive-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #1d3557;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

    .proactive-title .icon {
        color: #3cb371;
        font-size: 30px;
    }

/* Main white card */
.proactive-card {
    background: #ffffff;
    width: 70%;
    margin: 0 auto;
    padding: 40px 50px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    text-align: left;
}

/* Intro text */
.proactive-intro {
    font-size: 18px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* List styling */
.proactive-list {
    list-style: none;
    padding: 0;
}

    .proactive-list li {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #333;
        margin-bottom: 14px;
    }

.icon-check {
    font-size: 20px;
    color: #3cb371;
    margin-right: 12px;
}

/* Responsive */
@media (max-width: 900px) {
    .proactive-card {
        width: 90%;
        padding: 30px;
    }

    .proactive-title {
        font-size: 26px;
    }
}



/* ---------- Proactive Security Section ---------- */

.proactive-security-section {
    background: #f6f8fc;
    padding: 50px 20px 80px;
    text-align: center;
}

.proactive-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #1d3557;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

    .proactive-title .icon {
        font-size: 30px;
        color: #3cb371;
    }

.proactive-card {
    background: #ffffff;
    width: 70%;
    margin: 0 auto;
    padding: 40px 50px;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.10);
    text-align: left;
}

.proactive-intro {
    font-size: 18px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 25px;
}

.proactive-list {
    list-style: none;
    padding: 0;
}

    .proactive-list li {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #333;
        margin-bottom: 14px;
    }

.icon-check {
    font-size: 20px;
    color: #3cb371;
    margin-right: 12px;
}


/* ---------- Trust Section ---------- */

.trust-section {
    text-align: center;
    padding: 50px 20px 80px;
}

.trust-title {
    font-size: 30px;
    font-weight: 700;
    color: #1d3557;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.trust-icon {
    color: #38b000;
    font-size: 30px;
}

.trust-desc {
    font-size: 18px;
    width: 75%;
    margin: 0 auto;
    line-height: 1.7;
    color: #444;
    text-align : center;
}

@media (max-width: 900px) {
    .proactive-card {
        width: 90%;
        padding: 30px;
    }

    .proactive-title,
    .trust-title {
        font-size: 26px;
    }
}


/* WRAPPER */
.privacy-wrapper {
    width: 100%;
    padding: 60px 20px;
}

/* FLEX CONTAINER */
.privacy-container {
    max-width: 1350px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* LEFT IMAGE */
.privacy-left img {
    width: 100%;
    max-width: 550px;
}

/* RIGHT AREA */
.privacy-right {
    flex: 1;
}

/* LIGHT BLUE ROUNDED BOX */
.privacy-box {
    background: #eaf4fe;
    border-radius: 20px;
    padding: 50px;
    border: 1px solid #dbe9fa;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* TITLE */
.privacy-title {
    font-size: 32px;
    font-weight: 700;
    color: #003c7d;
    text-align: center;
    margin-bottom: 30px;
}

/* PARAGRAPHS */
.privacy-box p {
    font-size: 17px;
    color: #333;
    line-height: 1.7;
    margin-bottom: 18px;
}


.privacy-policy-para {
    font-family: Arial, sans-serif;
}


/* Outer Section Background */
.info-collect-section {
    background: #e9f3ff;
    padding: 50px 20px;
    display: flex;
    justify-content: center;
}

/* White Card */
.info-card {
    background: #ffffff;
    width: 100%;
    max-width: 900px;
    padding: 40px 40px 50px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.10);
}

/* Title */
.info-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #0b3b75;
    margin-bottom: 10px;
}

/* Subtitle */
.info-subtitle {
    text-align: center;
    font-size: 16px;
    color: #1b3c6b;
    font-weight: 500;
    margin-bottom: 30px;
}

/* Section Headings */
.info-block h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0b3b75;
    margin-bottom: 10px;
}

/* List */
.info-block ul {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

    .info-block ul li {
        font-size: 18px;
        color: #333;
        margin-bottom: 15px;
        line-height: 1.6;
    }


/* Custom list tick style (same as screenshot) */
.custom-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

    .custom-list li {
        font-size: 16px;
/*        color: #333;*/
        margin-bottom: 12px;
        padding-left: 32px;
        position: relative;
        line-height: 1.7;
    }

        /* Blue circular tick icon */
        .custom-list li::before {
            content: "\2713";
            position: absolute;
            left: 0;
            top: 4px;
            color: #3b82f6;
            font-size: 17px;
            font-weight: 900;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

        }


/* MAIN FAQ SECTION */
.faq-section {
    width: 100%;
    padding: 80px 20px;
/*    background: url('/images/cyborg-blue.jpg') no-repeat center/cover;*/
   
}

/* CONTAINER */
.faq-container {
    max-width: 1350px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* LEFT SIDE */
.faq-left {
    width: 45%;
    position: relative;
}

.faq-badge {
    background: #3b82f6;
    color: white;
    padding: 6px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 16px;
}

.faq-title {
    font-size: 60px;
    line-height: 1.2;
    margin: 20px 0 10px;
    color: black;
    font-weight: 700;
}

    .faq-title span {
        color: #213b7d;
    }

.faq-subtext {
    font-size: 18px;
    margin-bottom: 30px;
    color: black;
}

    .faq-subtext a {
        color: #052370;
        text-decoration: underline;
    }

.faq-btn {
    padding: 14px 32px;
    border: 2px solid #7c4dff;
    border-radius: 40px;
    background: transparent;
    color: #7c4dff;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

    .faq-btn:hover {
        background: #7c4dff;
        color: white;
    }

/* Arrow Image */
.faq-arrow {
    position: absolute;
    bottom: -40px;
    left: 80px;
    width: 140px;
    opacity: 0.7;
}

/* RIGHT FAQ ACCORDION */
.faq-right {
    width: 55%;
}

.faq-item {
    background: white;
    border-radius: 12px;
    margin-bottom: 20px;
    margin-left : 10px;
    margin-right : 10px;
    padding: 18px 22px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    cursor: pointer;
    overflow: hidden;
    transition: 0.3s ease;
}

 

/* Question Row */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .faq-question h3 {
        font-size: 20px;
        font-weight: 700;
        color: #1d2342;
    }

.faq-icon i {
    font-size: 20px;
    color: #3771bc;
}

.faq-icon.rotate i {
    transform: rotate(90deg);
}

/* ANSWER BOX */
.faq-answer {
    margin-top: 15px;
    padding-right: 20px;
    animation: slideDown 0.3s ease;
}

    .faq-answer p {
        font-size: 16px;
        color: #4d4d6a;
        line-height: 1.6;
    }

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .faq-container {
        flex-direction: column;
        text-align: center;
    }

    .faq-left, .faq-right {
        width: 100%;
    }

    .faq-arrow {
        display: none;
    }
}


.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* When active ? expand */
.faq-item.active .faq-answer {
    max-height: 400px; /* Enough height for text */
}

/* Rotate icon when open */
.faq-item.active .faq-icon i {
    transform: rotate(90deg);
}


.leader-section {
    padding: 50px 20px;
    font-family: "Poppins", sans-serif;
}

.leader-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
}

.leader-left {
    width: 55%;
    background-color: #e6f3ff;
    padding: 2rem;
    border-radius: 10px;
}

.leader-badge {
    background: #3b82f6;
    color: white;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

.leader-name {
    font-size: 38px;
    font-weight: 700;
    margin: 20px 0 10px;
}

    .leader-name span {
        color: #143f8c;
    }

.leader-divider {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 10px 0 25px;
}

    .leader-divider span {
        height: 6px;
        width: 55px;
        background: #3b82f6;
        border-radius: 50px;
    }

.leader-socials {
    display: flex;
    gap: 15px;

}

    .leader-socials a {
        background: #3771bc;
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }

.leader-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

/* RIGHT IMAGE */
.leader-right {
    width: 45%;
}

    .leader-right img {
        width: 100%;
        border-radius: 18px;
        object-fit: cover;
    }

/* RESPONSIVE */
@media (max-width: 992px) {
    .leader-container {
        flex-direction: column;
    }

    .leader-left, .leader-right {
        width: 100%;
    }

    .leader-right {
        margin-top: 20px;
    }
}


.leader-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


@media (max-width: 767px) {
    .leader-name-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px; /* spacing between name and icons */
    }

    .leader-socials {
        margin-bottom: 10px;
    }

    .leader-name {
        font-size: 25px;
        font-weight: 700;
        margin: 20px 0 10px;
    }
}


/*.ceo-section {
    width: 100%;
    padding: 60px 40px;
    background: #f5f7fb;
}

.ceo-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    max-width: 1400px;
    margin: auto;
}*/

/* LEFT SIDE */
/*.ceo-left {
    text-align: center;
    width: 45%;
}

.ceo-img-box {
    overflow: hidden;
    border-radius: 40px;
    border: 1px solid #d4d4d4;
}

    .ceo-img-box img {
        width: 100%;
        display: block;
        border-radius: 40px;
        border: 3px solid black;
    }

.ceo-name {
    margin-top: 18px;
    font-size: 20px;
    font-weight: 700;
    color: #0a2a66;
}*/

/* RIGHT SIDE */
/*.ceo-right {
    width: 55%;
}

.ceo-heading {
    font-size: 35px;
    font-weight: 600;
    color: #0056b3;
    text-align: center;
    margin-bottom: 25px;
}

.ceo-message-box {
    background: #fff;
    padding: 40px 45px;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.quote-icon {
    font-size: 40px;
    color: #005bbb;
    margin-bottom: 10px;
    font-weight: bold;
}

.ceo-text {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 18px;
}

.ceo-sign {
    text-align: right;
    font-weight: 600;
    margin-top: 10px;
    font-size: 18px;
}

.ceo-role {
    text-align: right;
    font-size: 16px;
    margin-top: 5px;
    color: #005bbb;
    line-height: 1.6;
}*/

/* RESPONSIVE */
/*@media screen and (max-width: 992px) {
    .ceo-container {
        flex-direction: column;
        text-align: center;
    }

    .ceo-left, .ceo-right {
        width: 100%;
    }

    .ceo-message-box {
        text-align: left;
    }

    .ceo-role, .ceo-sign {
        text-align: right;
    }
}*/



.ceo-section {
    width: 100%;
    padding: 60px 40px;
    background: #f5f7fb;
}

.ceo-main-heading {
    font-size: 40px;
    font-weight: 600;
    color: #0056b3;
    text-align: center;
    margin-bottom: 25px;
}

/* Two column layout */
.ceo-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* Ensures equal height */
    gap: 50px;
    max-width: 1400px;
    margin: auto;
}

/* LEFT SIDE */
.ceo-left {
    width: 50%;
    text-align: center;
}

.ceo-img-equal {
    height: 91%;
}

    .ceo-img-equal img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 35px;
        border: 2px solid #d4d4d4;
    }

.ceo-name {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 700;
    color: #0a2a66;
}

/* RIGHT SIDE */
.ceo-right {
    width: 50%;
}

/* Content box same height as image */
.equal-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ceo-message-box {
    background: #fff;
    padding: 40px 45px;
    border-radius: 14px;
    height: 100%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.quote-icon {
    font-size: 40px;
    color: #005bbb;
    margin-bottom: 15px;
    font-weight: bold;
}

.ceo-text {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
}

.ceo-sign {
    text-align: right;
    font-weight: 600;
    margin-top: 20px;
    font-size: 18px;
}

.ceo-role {
    text-align: right;
    font-size: 16px;
    margin-top: 5px;
    color: #005bbb;
    line-height: 1.6;
}

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

    .ceo-container {
        flex-direction: column;
        align-items: center;
    }

    .ceo-left, .ceo-right {
        width: 100%;
    }

    .ceo-img-equal img {
        height: auto;
    }

    .equal-box {
        height: auto;
    }
}

.ceo-quote-box {
    background: #ffffff;
    padding: 40px 45px;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
    position: relative;
}

.quote-icon-box {
    position: absolute;
    top: 0px;
    left: 35px;
}

.quote-icon {
    font-size: 50px;
    font-weight: 700;
    color: #1b71c9; 
    font-family: Georgia, serif;
}

.ceo-quote-text {
    font-size: 20px; 
    line-height: 1.75;
    font-style: italic; 
    color: #333;
    margin-bottom: 20px;
    padding-left: 50px; 
}

/* WRAPPER */
.feature-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: span 2 / span 2;
}

/* MAIN BIG IMAGE */
.feature-main-image {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .feature-main-image {
        width: 620px;
    }
}

@media (min-width: 1280px) {
    .feature-main-image {
        width: 650px;
    }
}

/* CARD BOX */
.feature-card {
    position: relative;
    margin-top: 0.5rem;
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem 0.75rem;
    display: flex;
    align-items: center;
    width: 295px;
    height: 7rem;
    /* shadow-[0_20px_50px_rgba(114,122,246,0.25)] */
    box-shadow: 0 20px 50px rgba(114, 122, 246, 0.25);
}

@media (min-width: 1024px) {
    .feature-card {
        width: 365px;
    }
}

@media (min-width: 1280px) {
    .feature-card {
        width: 390px;
    }
}

/* BLUE CIRCLE */
.feature-icon-circle {
    position: absolute;
    left: -40px; /* -left-10 */
    top: 50%;
    transform: translateY(-50%);
    width: 80px; /* w-20 */
    height: 80px; /* h-20 */
    border-radius: 50%;
    background: #727af6;
    display: flex;
    align-items: center;
    justify-content: center;
    /* shadow-[0_0_30px_rgba(114,122,246,0.45)] */
    box-shadow: 0 0 30px rgba(114, 122, 246, 0.45);
}

/* ICON */
.feature-icon {
    width: 40px; /* w-10 */
}

/* TEXT */
.feature-text {
    padding-left: 2.5rem; /* pl-10 */
    font-size: 1.125rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}


/* VIDEO SECTION */
.video-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-left: 1rem;
    margin-right: 1rem;
    background-color : white;
}

/* WRAPPER TO KEEP VIDEO CENTERED */
.video-wrapper {
    width: 100%;
    max-width: 1200px; /* Increase video size on big screens */
    margin: 0 auto;
}

/* VIDEO PLAYER */
.video-player {
    width: 100%;
    height: auto;
    border-radius: 1rem;
/*    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);*/
    outline: none;
}

/* Tablet */
@media (min-width: 768px) {
    .video-player {
        border-radius: 1.2rem;
    }
}

/* Desktop (Large Screens) */
@media (min-width: 1280px) {
    .video-wrapper {
        max-width: 1400px; /* even bigger on XL screens */
    }
}

.hide-after {
    display: flex;
}

@media (max-width: 769px) {
    .hide-after {
        display: none !important;
    }
}


/* ================================
   CONTACT FLOAT WRAPPER
================================ */
.contact-float-wrapper {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    align-items: center;
}

/* ================================
   CONTACT TAB (PURPLE)
================================ */
.contact-tab {
    background: #6c5ce7;
    color: #fff;
    padding: 12px 14px;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 600;
    transition: background 0.3s ease;
}

    .contact-tab:hover {
        background: #5a4dd6;
    }

    .contact-tab i {
        transform: rotate(90deg);
    }

/* ================================
   CONTACT PANEL (SLIDE OUT)
================================ */
.contact-panel {
    margin-top: 0;
    width: 360px;
    background: #ffffff;
    border-radius: 16px 0 0 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: absolute;
    right: -360px;
    transition: right 0.4s ease;
}

/* SHOW ON HOVER (DESKTOP) */
.contact-float-wrapper:hover .contact-panel {
    right: 42px;
}

/* ================================
   HEADER
================================ */
.contact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

    .contact-header h3 {
        color: #6c5ce7;
        font-size: 18px;
        font-weight: 600;
    }

    .contact-header button {
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
    }

/* ================================
   FORM
================================ */
.contact-form {
    padding: 20px;
}

    .contact-form input,
    .contact-form textarea {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 30px;
        padding: 12px 16px;
        margin-bottom: 12px;
        font-size: 14px;
        outline: none;
    }

    .contact-form textarea {
        border-radius: 16px;
        resize: none;
    }

.submit-btn {
    width: 100%;
    background: #6c5ce7;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
}

    .submit-btn:hover {
        background: #5a4dd6;
    }

/* ================================
   WHATSAPP FLOAT
================================ */
.whatsapp-float {
    position: fixed;
    bottom: 200px;
    right: 25px;
    width: 56px;
    height: 56px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    z-index: 9999;
}

    .whatsapp-float:hover {
        transform: scale(1.1);
    }

/* ================================
   MOBILE FIX
================================ */
@media (max-width: 768px) {
    .contact-float-wrapper:hover .contact-panel {
        right: 50px;
        width : 300px;
    }

    .contact-panel.active {
        right: 50px;
    }

    .contact-tab {
        writing-mode: horizontal-tb;
        border-radius: 12px;
    }

    
}



/* CONTACT FLOAT WRAPPER */
.contact-float-wrapper {
    position: fixed;
    top: 37%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9;
    display: flex;
    align-items: stretch; /* IMPORTANT */
}

/* PURPLE TAB */
.contact-tab {
    background: #6c5ce7;
    color: #fff;
    padding: 12px 9px;
    border-radius: 10px 0 0 0px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: 600;
}

    .contact-tab i {
        transform: rotate(90deg);
    }

/* CONTACT PANEL (ATTACHED) */
.contact-panel {
    width: 450px;
    background: #ffffff;
    border-radius: 16px 0 0 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    /* start hidden */
    transform: translateX(100%);
    transition: transform 0.4s ease;
}

/* HOVER ? SLIDE OPEN (NO GAP) */
.contact-float-wrapper:hover .contact-panel {
    transform: translateX(0);
}


/* ================================
   WHATSAPP SLIDE TAB (LIKE SCREENSHOT)
================================ */

.whatsapp-tab {
    position: fixed;
    top: calc(30% + 110px); /* aligns under Contact Us */
    right: -10px;
    height: 45px;
    background: #25D366;
    color: #fff;
    border-radius: 0px 0 0 7px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transform: translateX(70%);
    transition: all 0.35s ease;
    z-index: 9998;
    width : 10.8rem;
}



    /* Icon */
    .whatsapp-tab i {
        font-size: 22px;
        min-width: 26px;
    }

    /* Text hidden initially */
    .whatsapp-tab span {
        white-space: nowrap;
        opacity: 0;
        transition: 0.3s ease;
    }

    /* Hover – slide out */
    .whatsapp-tab:hover {
        transform: translateX(0);
    }

        /* Show text */
        .whatsapp-tab:hover span {
            opacity: 1;
        }


.features {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
}

/* Card */
.card {
    position: relative;
    border-radius: 20px;
    padding: 15px;
    height: 52rem;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.35s ease;
}

    /* Hover blue slide */
    .card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #2563eb;
        transform: translateX(-100%);
        transition: transform 0.5s ease;
        z-index: 0;
    }

    .card:hover::before {
        transform: translateX(0);
    }

    .card:hover {
        transform: translateY(-10px);
    }

    /* Keep content above overlay */
    .card * {
        position: relative;
        z-index: 1;
    }

/* Background colors (same as screenshot style) */
.card-1 {
    background: #e8f3ff;
}

.card-2 {
    background: #e8f3ff;
}

.card-3 {
    background: #e8f3ff;
}

.card-4 {
    background: #e8f3ff;
}

/* Image styling */
.card img {
    width: 100%;
    height: 17rem;
    object-fit: fill;
    border-radius: 14px;
    margin-bottom: 20px;
}

/* Text */
.card h3 {
    font-size: 27px;
    margin-bottom: 12px;
    color: #003366;
    font-weight : 600;
    text-align : center;
}

.card p {
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}

/* Text color on hover */
.card:hover h3,
.card:hover p {
    color: #ffffff;
}


/* LIST STYLE */
.card-list {
    list-style: none;
    padding: 0;
    margin: 18px 0 20px;
}

    .card-list li {
        display: flex;
        gap: 10px;
        font-size: 15px;
        margin-bottom: 10px;
        color: #475569;
        line-height: 1.6;
    }

    .card-list i {
        color: #2563eb;
        font-size: 15px;
        margin-top: 4px;
    }

/* Hover list color */
.card:hover .card-list li,
.card:hover .card-desc {
    color: #ffffff;
}

.card:hover .card-list i {
    color: #ffffff;
}

/* BUTTON */
.card-btn-wrap {
    margin-top: auto;
}

.card-btn {
    display: block; /* make it block */
    width: 100%; /* full card width */
    text-align: center;
    background: #003366;
    color: #ffffff;
    padding: 14px 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.35s ease;
    margin-top : 20px;
}


/* Button hover when card hovered */
.card:hover .card-btn {
    background: #ffffff;
    color: #003366;
}



.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.cta-btn {
    background-color: #0a2a66;
    color: #fff;
    padding: 16px 36px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

    .cta-btn:hover {
        background-color: #123b8a; /* light color change */
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
        transform: translateY(-2px);
    }


/* FORM BASE */
.contact-form {
    display: flex;
    flex-direction: column;
/*    gap: 14px;*/
}

/* TWO COLUMN ROW */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* INPUT STYLING (consistent) */
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    outline: none;
}

/* TEXTAREA SHAPE */
.contact-form textarea {
    border-radius: 18px;
    resize: none;
}

/* SUBMIT BUTTON */
.submit-btn {
    background: #7c5ce6;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
}


.stu-management-heading {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333333;
    text-align: justify;
}

.stud-management-bg-colr {
    background-color: #003366;
}


/* Section Background */
.why-cyborg-section {
    padding: 60px 20px;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

/* Light Blue Card */
.why-cyborg-card {
    background: #eaf4ff;
    border-radius: 18px;
    padding: 50px 60px;
    max-width: 1100px;
    width: 100%;
}

/* Heading */
.why-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #0a2a66;
    margin-bottom: 40px;
    line-height: 1.3;
}

/* List */
.why-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    /* List Item */
    .why-list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        font-size: 18px;
        color: #1f2937;
        margin-bottom: 22px;
        line-height: 1.6;
    }

/* Diamond Icon */
.diamond {
    width: 10px;
    height: 10px;
    background: #4da3ff;
    transform: rotate(45deg);
    margin-top: 8px;
    flex-shrink: 0;
}

/* Bold text inside list */
.why-list strong {
    font-weight: 600;
    color: #0a2a66;
}

/* Responsive */
@media (max-width: 768px) {
    .why-cyborg-card {
        padding: 35px 25px;
    }

    .why-title {
        font-size: 26px;
    }

    .why-list li {
        font-size: 16px;
    }
}


.fee-info-box {
    background-color: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 25px;
    max-width: 1100px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    line-height: 1.7;
    color: #333;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


.fee-services-section {
    background: #eaf4ff;
    padding: 60px 20px;
    border-radius: 20px;
    max-width: 1400px;
    margin: 40px auto;
}

.section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #0a2a66;
    margin-bottom: 40px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.service-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

    .service-card h3 {
        text-align: center;
        font-size: 24px;
        font-weight: 700;
        color: #0a2a66;
        margin-bottom: 18px;
    }

    .service-card p {
        font-size: 20px;
        line-height: 1.7;
        color: #333;
        text-align: justify;
    }

/* Responsive */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 26px;
    }
}


/*.fee-features-section {
    padding: 90px 20px;
    background: #ffffff;
    position: relative;
}

 
    .fee-features-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient( 135deg, rgba(13, 45, 98, 0.05) 25%, transparent 25%, transparent 50%, rgba(13, 45, 98, 0.05) 50%, rgba(13, 45, 98, 0.05) 75%, transparent 75%, transparent );
        background-size: 120px 120px;
        pointer-events: none;
    }*/

.fee-features-section {
    padding: 90px 20px;
    background: url('/images/bg-img.png') no-repeat center center;
    background-size: cover;
    position: relative;
}


.fee-grid {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 60px;
    position: relative;
    z-index: 1;
}

/* Heading outside box */
.fee-heading {
    text-align: center;
    font-size: 45px;
    font-weight: 600;
    color: #1e4fa3;
    margin-bottom: 14px;
}

/* Blue card */
.fee-card {
    background: #eef6ff;
    border: 1.5px solid #bcd6ff;
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

    /* List styling */
    .fee-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .fee-card ul li {
            position: relative;
            padding-left: 28px;
            margin-bottom: 14px;
            font-size: 15.5px;
            line-height: 1.7;
            color: #333;
        }

            .fee-card ul li::before {
/*                content: "?";*/
                position: absolute;
                left: 0;
                top: 2px;
                color: #2563eb;
                font-size: 14px;
                font-weight: bold;
            }

/* Responsive */
@media (max-width: 991px) {
    .fee-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .fee-heading {
        font-size: 26px;
    }
}


.fee-management-section {
    background: #eaf4ff;
    padding: 80px 20px;
    font-family: 'Arial', sans-serif;
}

.fee-container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.fee-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.fee-subtitle {
    max-width: 900px;
    margin: 0 auto 60px;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

/* Cards Layout */
.fee-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* Card */
.fee-card {
    background: #e6f2ff;
    border: 2px solid #b3d1ff;
    border-radius: 18px;
    padding: 35px 30px;
    text-align: left;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.fee-icon {
    text-align: center;
    font-size: 36px;
    margin-bottom: 15px;
}

.fee-card h3 {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #0a2a66;
    margin-bottom: 15px;
}

.fee-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
}

/* List */
.fee-card ul {
    list-style: none;
    padding: 0;
}

.fee-card ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 12px;
    font-size: 17px;
    color: black;
}

.fee-card ul li::before {
    content: "?";
    position: absolute;
    left: 0;
    top: 0;
    color: #0a5bff;
    font-weight: bold;
}

/* Footer Text */
.fee-footer {
    max-width: 1000px;
    margin: auto;
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}


/* WRAPPER */
.mis-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Segoe UI', sans-serif;
}

/* TITLE */
.mis-title {
    text-align: center;
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 40px;
    font-family: Barlow
}

    .mis-title span {
        color: #1e40af;
    }

/* DARK BLUE BOX */
.mis-dark-box {
    background: linear-gradient(135deg, #0f2a44, #1e3a5f);
    color: #ffffff;
    border: 2px solid #1abc9c;
    padding: 35px 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    margin-bottom: 60px;
}

    .mis-dark-box p {
        font-size: 18px;
        line-height: 1.8;
        margin-bottom: 18px;
    }

/* BENEFITS OUTER */
.benefits-outer {
    background: #dbeafe;
    padding: 50px 20px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
}

/* WHITE CARD */
.benefits-card {
    background: #ffffff;
    max-width: 1070px;
    width: 100%;
    padding: 40px 45px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

    .benefits-card h3 {
        text-align: center;
        font-size: 32px;
        font-weight: 600;
        color: #00264d;
        margin-bottom: 25px;
    }

    /* LIST */
    .benefits-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .benefits-card li {
        position: relative;
        padding-left: 28px;
        margin-bottom: 16px;
        font-size: 16px;
        color: #374151;
        line-height: 1.6;
    }

        .benefits-card li::before {
            content: "?";
            position: absolute;
            left: 0;
            top: 0;
            color: #2563eb;
            font-weight: bold;
        }

.cyb-fee-wrap {
    position: relative;
    padding: 20px 0;
    background-image: linear-gradient( #010f31e3 ), url("/images/net-design.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.cyb-fee-grid {
    max-width: 1400px;
    margin: auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

/* LEFT TITLE */
.cyb-fee-title h2 {
    color: #ffffff;
    font-size: 48px;
    line-height: 1.3;
    font-weight: 700;
}

/* RIGHT GLASS CARD */
.cyb-fee-card {
    background: #2c3e50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 40px 45px;
    color: #ffffff;
}

    .cyb-fee-card p {
        font-size: 16px;
        line-height: 1.8;
        color: #e6ecf5;
    }

/* LIST */
.cyb-fee-list {
    margin: 25px 0 30px;
    padding-left: 0;
    list-style: none;
}

    .cyb-fee-list li {
        padding-left: 20px;
        margin-bottom: 12px;
        position: relative;
        font-size: 16px;
    }

        .cyb-fee-list li::before {
/*            content: "–";*/
            position: absolute;
            left: 0;
            color: #ffffff;
        }

/* BOTTOM NOTE */
.cyb-fee-note {
    margin-top: 20px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .cyb-fee-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cyb-fee-title h2 {
        text-align: center;
        font-size: 38px;
    }
}


/* === HARD RESET FOR THIS LIST ONLY === */
.erp-clean-tick-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

    /* kill browser marker */
    .erp-clean-tick-list li::marker {
        content: none !important;
    }

    /* kill any theme ::before */
    .erp-clean-tick-list li::before {
        content: none !important;
    }

    /* now build our own */
    .erp-clean-tick-list li {
        position: relative;
        padding-left: 36px;
        margin-bottom: 14px;
        line-height: 1.6;
        font-size: 16px;
        color: #333;
    }

        /* REAL tick (SVG – NO FONT USED) */
        .erp-clean-tick-list li::after {
            content: "";
            position: absolute;
            left: 0;
            top: 4px;
            width: 18px;
            height: 18px;
            background-repeat: no-repeat;
            background-size: contain;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230d6efd' d='M6.173 13.727L1.3 8.854l1.414-1.414 3.46 3.46 7.126-7.126 1.414 1.414z'/%3E%3C/svg%3E");
        }


.cyborg-fee-wrapper {
    background: #eaf4ff;
    padding: 50px 20px;
    border-radius: 20px;
}

.cyborg-fee-container {
    max-width: 1100px;
    margin: auto;
    background: #ffffff;
    padding: 45px 50px;
    border-radius: 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.cyborg-fee-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #003366;
    margin-bottom: 25px;
}

.cyborg-fee-text {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 18px;
}

.cyborg-fee-sub {
    margin-top: 20px;
    font-weight: 600;
}

.cyborg-fee-list {
    list-style: none;
    padding: 0;
    margin-top: 25px;
}

    .cyborg-fee-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 17px;
        color: #222;
        margin-bottom: 15px;
    }

.cyborg-check {
    min-width: 26px;
    height: 26px;
    background: #0a58ca;
    color: #fff;
    border-radius: 50%;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
    .cyborg-fee-container {
        padding: 30px 25px;
    }

    .cyborg-fee-title {
        font-size: 26px;
    }

    .cyborg-fee-text,
    .cyborg-fee-list li {
        font-size: 16px;
    }
}


/* ===== WHY CHOOSE CYBORG ERP – HOSTEL & MESS ===== */

.cyborg-hostel-why-section {
    padding: 60px 20px;
    background: #ffffff;
    font-family: 'Barlow', sans-serif;
}

.cyborg-hostel-why-card {
    max-width: 1100px;
    margin: auto;
    background: #f5f5f5;
    border: 2px solid #d4d4d4;
    border-radius: 18px;
    padding: 50px 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Heading */
.cyborg-hostel-why-heading {
    font-size: 32px;
    font-weight: 700;
    color: #0a2a66;
    margin-bottom: 35px;
}

/* List */
.cyborg-hostel-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .cyborg-hostel-why-list li {
        font-size: 18px;
        color: #1f2937;
        line-height: 1.7;
        margin-bottom: 18px;
        padding-left: 28px;
        position: relative;
    }

        /* Blue bullet dot */
        .cyborg-hostel-why-list li::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #2563eb;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 11px;
        }

    /* Bold text inside list */
    .cyborg-hostel-why-list strong {
        color: #0a2a66;
        font-weight: 600;
    }

/* Footer text */
.cyborg-hostel-why-footer {
    margin-top: 40px;
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    color: #0a2a66;
}

/* Responsive */
@media (max-width: 768px) {
    .cyborg-hostel-why-card {
        padding: 35px 25px;
    }

    .cyborg-hostel-why-heading {
        font-size: 26px;
        text-align: center;
    }

    .cyborg-hostel-why-footer {
        font-size: 18px;
    }
}


.cyborg-hostel-why-icon {
    color: #2563eb; 
    margin-right: 10px;
    font-size: 28px;
    vertical-align: middle;
}


.cyborg-hostel-footer-icon {
    color: #2563eb; 
    margin-right: 10px;
    font-size: 22px;
    vertical-align: middle;
}


.paragraph-text-colr {
    color: #333;
}

/* MAIN SECTION */
.acad-hero-section {
    padding: 70px 20px;
    background-image: url('/images/atms-bg-img.png');
    background-repeat: repeat;
}



/* CONTAINER */
.acad-hero-container {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
/*    gap: 50px;*/
}

/* LEFT IMAGE */
.acad-hero-image img {
    width: 100%;
    max-width: 600px;
    display: block;
    border-radius: 20px;
}

/* RIGHT CONTENT BOX */
.acad-hero-content {
    background: #eaf5ff;
    padding: 40px 45px;
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

    /* TEXT */
    .acad-hero-content p {
        font-size: 18px;
        line-height: 1.8;
        color: #0a2a66;
    }

    .acad-hero-content strong {
        font-weight: 700;
    }

/* RESPONSIVE */
@media (max-width: 992px) {
    .acad-hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .acad-hero-image img {
        margin: auto;
    }

    .acad-hero-content {
        padding: 30px;
    }
}


.academic-card-section {
    padding: 70px 20px;
    background: #ffffff;
}

.academic-card-container {
    max-width: 1600px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    justify-items: center;
}

/* Card Design */
.academic-card {
    background: #eaeaea;
    border-radius: 22px;
    padding: 20px 20px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
    width: 100%;
    max-width: 480px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

    /* Heading */
    .academic-card h2 {
        font-size: 30px;
        font-weight: 700;
        color: #0a2a66;
        margin-bottom: 28px;
        line-height: 1.3;
    }

    /* Text */
    .academic-card p {
        font-size: 17px;
        line-height: 1.9;
        color: #333;
        max-width: 520px;
        margin: 0 auto 40px;
    }

/* Button */
.academic-btn {
    display: inline-block;
    background: #0d6efd;
    color: #ffffff;
    padding: 14px 36px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .academic-btn:hover {
        background: #084fc7;
        transform: translateY(-2px);
    }

/* Responsive */
@media (max-width: 992px) {
    .academic-card-container {
        grid-template-columns: 1fr;
    }
}

 .academic-card:hover {
        transform: scale(1.05);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    }


/* SECTION */
.libcyb-hero-section {
    padding: 80px 20px;
    background: #ffffff;
}

/* CONTAINER */
.libcyb-hero-wrapper {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 10px;
    align-items: center;
}

/* LEFT IMAGE */
.libcyb-hero-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

/* RIGHT BLUE BOX */
.libcyb-hero-content {
    background: #eaf4ff;
    padding: 45px;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

    /* HEADING */
    .libcyb-hero-content h2 {
        font-size: 38px;
        font-weight: 700;
        color: #0a2a66;
        text-align: center;
        margin-bottom: 30px;
    }

/* WHITE CARD */
.libcyb-hero-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

    /* TEXT */
    .libcyb-hero-card p {
        font-size: 17px;
        line-height: 1.8;
        color: #444;
    }

/* RESPONSIVE */
@media (max-width: 992px) {
    .libcyb-hero-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .libcyb-hero-content h2 {
        font-size: 28px;
    }
}


/* FONT */
.libcyb-ops-section {
    font-family: 'Barlow', sans-serif;
    padding: 90px 20px;
    background: #ffffff;
}

/* CONTAINER */
.libcyb-ops-container {
    max-width: 1400px;
    margin: auto;
    text-align: center;
}

/* MAIN HEADING */
.libcyb-ops-heading {
    font-size: 44px;
    font-weight: 700;
    color: #000;
    margin-bottom: 60px;
}

    .libcyb-ops-heading span {
        color: #3b73c6;
    }

/* BLUE BACKGROUND BOX */
.libcyb-ops-bluebox {
    background: #eaf4ff;
    padding: 55px 50px;
    border-radius: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* WHITE CARDS */
.libcyb-ops-card {
    background: #ffffff;
    padding: 40px 35px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.35s ease;
}

    /* CARD HEADING */
    .libcyb-ops-card h3 {
        font-size: 26px;
        font-weight: 600;
        color: #0a2a66;
        margin-bottom: 18px;
        transition: transform 0.35s ease;
    }

    /* TEXT */
    .libcyb-ops-card p {
        font-size: 17px;
        line-height: 1.9;
        color: #333;
    }

    /* HOVER EFFECT (UP–DOWN + HEADING MOVE) */
    .libcyb-ops-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    }

        .libcyb-ops-card:hover h3 {
            transform: translateY(-6px);
        }

/* RESPONSIVE */
@media (max-width: 992px) {
    .libcyb-ops-bluebox {
        grid-template-columns: 1fr;
        padding: 40px 25px;
    }

    .libcyb-ops-heading {
        font-size: 34px;
    }
}


.libcyb-banner-section {
    width: 100%;
    height: 460px;
    position: relative;
    overflow: hidden;
    font-family: 'Barlow', sans-serif;
}

/* WRAPPER */
.libcyb-banner-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

/* IMAGE */
.libcyb-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* DARK OVERLAY */
.libcyb-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

/* CONTENT */
.libcyb-banner-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}

    /* HEADING */
    .libcyb-banner-content h1 {
        font-size: 46px;
        font-weight: 600;
        letter-spacing: 0.5px;
        margin-bottom: 16px;
    }

/* DIVIDER LINE */
.libcyb-banner-line {
    width: 80rem;
    height: 3px;
    background: #ffffff;
    opacity: 0.9;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .libcyb-banner-section {
        height: 300px;
    }

    .libcyb-banner-content h1 {
        font-size: 32px;
    }

    .libcyb-banner-line {
        width: 200px;
    }
}


.libcyb-features-section {
    padding: 40px 20px;
    background: #ffffff;
    font-family: 'Barlow', sans-serif;
}

.libcyb-features-container {
    max-width: 1500px;
    margin: auto;
}

/* HEADING */
.libcyb-features-heading {
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 60px;
    color: #000;
}

    .libcyb-features-heading span {
        color: #3b73c6;
    }

/* GRID */
.libcyb-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARD */
.libcyb-feature-card {
    background: #f7f7f7;
    padding: 30px 28px;
    border-radius: 14px;
    border: 1px solid #e1e1e1;
    transition: all 0.35s ease;
}

    /* CARD HOVER EFFECT */
    .libcyb-feature-card:hover {
        background: #ffffff;
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
        transform: translateY(-6px);
    }

    /* CARD TITLE */
    .libcyb-feature-card h3 {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 14px;
        color: #000;
    }

    /* TEXT */
    .libcyb-feature-card p {
        font-size: 15.5px;
        line-height: 1.8;
        color: #333;
    }


@media (max-width: 1100px) {
    .libcyb-features-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .libcyb-feature-wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .libcyb-features-grid {
        grid-template-columns: 1fr;
    }

    .libcyb-feature-wide {
        grid-column: span 1;
    }

    .libcyb-features-heading {
        font-size: 32px;
    }
}


.libcyb-feature-card h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.libcyb-icon {
    font-size: 18px;
    color: #3b73c6;
    min-width: 22px;
}


.heading-icon {
    color: #3b73c6;
    font-size: 38px;
    margin-right: 10px;
    vertical-align: middle;
}


.lib-contact-info {
    background-color: #e3e3e3;
}


/* SECTION */
.hrm-hero-section {
    padding: 50px 20px;
    background: #ffffff;
    font-family: 'Barlow', sans-serif;
}

/* MAIN GRID */
.hrm-hero-container {
    max-width: 1600px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 50px;
    align-items: center;
}

/* IMAGE */
.hrm-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* CONTENT BOX */
.hrm-hero-content-box {
    background: #eaf6ff;
    border-radius: 22px;
    padding: 35px 35px 40px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

/* HEADING CARD */
.hrm-hero-heading-box {
    background: #d7ebff;
    border-radius: 16px;
    padding: 22px 20px;
    margin-bottom: 25px;
    text-align: center;
}

    .hrm-hero-heading-box h2 {
        font-size: 32px;
        font-weight: 700;
        color: #0a2a66;
        line-height: 1.35;
        margin: 0;
    }

/* TEXT */
.hrm-hero-text p {
    font-size: 17px;
    line-height: 1.9;
    color: #333333;
    margin-bottom: 18px;
}

.hrm-hero-text strong {
    color: #0a2a66;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .hrm-hero-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hrm-hero-heading-box h2 {
        font-size: 26px;
    }
}

@media (max-width: 600px) {
    .hrm-hero-content-box {
        padding: 25px 22px;
    }

    .hrm-hero-heading-box h2 {
        font-size: 22px;
    }

    .hrm-hero-text p {
        font-size: 16px;
    }
}


/* SECTION BACKGROUND */
.hrms-feature-section {
    padding: 80px 20px;
    background-image: url('/images/atms-bg-img.png');
    background-repeat: repeat;
/*    background-size: contain;*/
}

/* GRID CONTAINER */
.hrms-feature-container {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px 80px;
    align-items: stretch;
}

/* ITEM */
.hrms-feature-item {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* HEADING ABOVE CARD */
.hrms-feature-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    text-align: center;
}

/* CARD */
.hrms-feature-card {
    background-color: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 14px;
    padding: 28px 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    height: 100%;
}

    /* TEXT */
    .hrms-feature-card p {
        font-size: 16px;
        line-height: 1.8;
        color: #333333;
    }

/* RESPONSIVE */
@media (max-width: 992px) {
    .hrms-feature-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}


.reports-section {
    padding: 40px 20px;
    background-color: #ffffff;
}

.reports-container {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

/* Heading */
.reports-heading {
    font-size: 34px;
    font-weight: 700;
    color: #000;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

    .reports-heading i {
/*        color: #e11d48;*/
        font-size: 30px;
    }

/* Card Box */
.reports-card {
    background-color: #f9f9f9;
    border: 2px solid #ddd;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    padding: 40px 50px;
    max-width: 1000px;
    margin: auto;
    text-align: left;
}

/* Intro Text */
.reports-intro {
    font-size: 18px;
    color: #333;
    margin-bottom: 24px;
}

/* List */
.reports-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}

    .reports-list li {
        position: relative;
        padding-left: 26px;
        font-size: 17px;
        line-height: 1.8;
        margin-bottom: 14px;
        color: #222;
    }

        /* Blue Diamond Bullet */
        .reports-list li::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #3b82f6;
            position: absolute;
            left: 0;
            top: 11px;
            transform: rotate(45deg);
        }

/* Footer Text */
.reports-footer {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}

/* Responsive */
@media (max-width: 768px) {
    .reports-card {
        padding: 28px 24px;
    }

    .reports-heading {
        font-size: 28px;
    }
}


/* Section Background */
.hrm-services-section {
    padding: 40px 20px;
    background: #ffffff;
}

/* Dark Container */
.hrm-services-wrapper {
    max-width: 1300px;
    margin: auto;
    background: linear-gradient(180deg, #071a33, #041226);
    border-radius: 22px;
    padding: 40px 50px;
}

/* Heading */
.hrm-services-heading {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #1e90ff;
    margin-bottom: 55px;
}

/* Card */
.hrm-service-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 26px 32px;
    margin-bottom: 26px;
    border-left: 6px solid #1e90ff;
    transition: all 0.35s ease;
    cursor: pointer;
}

    /* Title */
    .hrm-service-card h3 {
        font-size: 20px;
        font-weight: 600;
        color: #0056d2;
        margin-bottom: 10px;
        position: relative;
        padding-left: 18px;
    }

        /* Diamond Bullet */
        .hrm-service-card h3::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #4ea3ff;
            position: absolute;
            left: 0;
            top: 8px;
            transform: rotate(45deg);
        }

    /* Text */
    .hrm-service-card p {
        font-size: 16px;
        color: #333;
        line-height: 1.7;
    }


    .hrm-service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(30, 144, 255, 0.25);
        border-left-color: #0056d2;
    }

/* Responsive */
@media (max-width: 768px) {
    .hrm-services-wrapper {
        padding: 50px 24px;
    }

    .hrm-services-heading {
        font-size: 24px;
    }
}


/* Section */
.hrms-benefits-section {
    padding: 80px 20px;
    background: #ffffff;
}

/* Outer Wrapper */
.hrms-benefits-wrapper {
    max-width: 1200px;
    margin: auto;
    background: #eaf6ff;
    border-radius: 18px;
    padding: 45px 50px 55px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Heading Bar */
.hrms-benefits-heading {
    background: #d9edff;
    color: #003b73;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    padding: 18px 20px;
    border-radius: 12px;
    margin-bottom: 30px;
}

/* Intro Text */
.hrms-benefits-intro {
    font-size: 17px;
    color: #222;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* List Container */
.hrms-benefits-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Benefit Item */
.hrms-benefit-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 18px 22px 18px 44px;
    font-size: 16.5px;
    color: #333;
    line-height: 1.6;
    position: relative;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

    /* Diamond Bullet */
    .hrms-benefit-item::before {
        content: "";
        width: 9px;
        height: 9px;
        background: #3b82f6;
        position: absolute;
        left: 22px;
        top: 24px;
        transform: rotate(45deg);
    }

/* Footer Text */
.hrms-benefits-footer {
    margin-top: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #003b73;
}

/* Responsive */
@media (max-width: 768px) {
    .hrms-benefits-wrapper {
        padding: 35px 24px 45px;
    }

    .hrms-benefits-heading {
        font-size: 22px;
    }
}

/* Hover effect for benefit cards */
.hrms-benefit-item {
    transition: all 0.35s ease;
    cursor: pointer;
}

    .hrms-benefit-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(59, 130, 246, 0.25);
    }



/* Wrapper for both sections */
.hrms-info-section {
    max-width: 1200px;
    margin: 80px auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 0 20px;
}

/* Shared Box */
.hrms-info-box {
    background: #eaf6ff;
    border-radius: 18px;
    padding: 50px 60px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Headings */
.hrms-info-heading {
    font-size: 30px;
    font-weight: 700;
    color: #003b73;
    margin-bottom: 20px;
}

/* Text */
.hrms-info-text {
    font-size: 17px;
    color: #222;
    line-height: 1.8;
    margin-bottom: 16px;
}

/* Action lines */
.hrms-info-action {
    font-size: 16.5px;
    color: #222;
    margin: 14px 0;
}

    .hrms-info-action i {
        color: #0056d2;
        margin-right: 8px;
    }

/* Buttons */
.hrms-info-buttons {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.hrms-btn {
    padding: 14px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .hrms-btn.primary {
        background: #0056d2;
        color: #ffffff;
    }

    .hrms-btn.secondary {
        background: #0041a8;
        color: #ffffff;
    }

    /* Hover */
    .hrms-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(0, 86, 210, 0.25);
    }

/* Brand Highlight */
.brand-text {
    color: #0056d2;
}

/* Responsive */
@media (max-width: 768px) {
    .hrms-info-box {
        padding: 35px 25px;
    }

    .hrms-info-heading {
        font-size: 24px;
    }

    .hrms-info-buttons {
        flex-direction: column;
    }
}


.lms-category-section {
    padding: 10px 20px;
    background: #ffffff;
    text-align: center;
}

.lms-container {
    max-width: 1400px;
    margin: auto;
}

.lms-heading {
    font-size: 44px;
    font-weight: 700;
    color: #000;
    line-height: 1.3;
    margin-bottom: 60px;
}

    .lms-heading span {
        color: #3b6fc4;
    }

    .lms-heading small {
        font-size: 28px;
        font-weight: 600;
        color: #000;
    }

/* Grid */
.lms-card-grid {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex-wrap: wrap;
}

/* Card */
.lms-card {
    width: 320px; /* increased width */
    height: 180px; /* increased height */
    border-radius: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .lms-card i {
        font-size: 42px;
    }

    .lms-card h3 {
        font-size: 20px;
        margin: 0;
    }

/* Colors */
.lms-blue {
    background: #3b9bff;
}

.lms-indigo {
    background: #5569c8;
}

.lms-purple {
    background: #9b51e0;
}

/* Hover Effect */
.lms-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .lms-heading {
        font-size: 34px;
    }

    .lms-card {
        width: 100%;
        max-width: 360px;
    }
}



/* COMMON */
.cyborg-container {
    max-width: 1100px;
    margin: auto;
    padding: 0 20px;
}

/* ---------- SECTION 1 ---------- */
.cyborg-lms-benefits-section {
    padding: 10px 0 10px;
    background: #ffffff;
    text-align: center;
}

.cyborg-stars {
    margin-bottom: 15px;
}

    .cyborg-stars i {
        color: #f5a623;
        font-size: 18px;
        margin: 0 3px;
    }

.cyborg-main-heading {
    font-size: 34px;
    font-weight: 700;
    color: #2b5fb8;
    margin-bottom: 40px;
}

    .cyborg-main-heading span {
        font-weight: 600;
    }

.cyborg-white-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 35px 40px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);
    text-align: left;
}

    .cyborg-white-card h3 {
        text-align: center;
        font-size: 22px;
        font-weight: 700;
        margin-bottom: 25px;
    }

/* Checklist */
.cyborg-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .cyborg-check-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 14px;
    }

    .cyborg-check-list i {
        color: #1d6ff2;
        font-size: 18px;
        margin-top: 4px;
    }

/* ---------- SECTION 2 ---------- */
.cyborg-lms-users-section {
    padding: 70px 0;
    background: #ffffff;
}

.cyborg-blue-box {
    background: #eaf4ff;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

    .cyborg-blue-box h3 {
        font-size: 24px;
        font-weight: 700;
        color: #0b3a82;
        margin-bottom: 25px;
    }

.cyborg-inner-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px 30px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    text-align: left;
}

/* Dark ticks */
.cyborg-check-list.dark i {
    color: #1a1a1a;
}

/* Responsive */
@media (max-width: 768px) {
    .cyborg-main-heading {
        font-size: 26px;
    }

    .cyborg-white-card,
    .cyborg-blue-box {
        padding: 25px;
    }
}


.lms-key-features {
    background-color: #3b73b9;
    padding: 80px 20px;
}

.lms-container {
    max-width: 1400px;
    margin: auto;
}

/* Heading */
.lms-heading {
    text-align: center;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 60px;
}

    .lms-heading i {
        margin-right: 10px;
    }

/* Grid */
.lms-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Card */
.lms-feature-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 26px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .lms-feature-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0,0,0,0.18);
    }

    .lms-feature-card h3 {
        font-size: 18px;
        font-weight: 700;
        color: #1f2937;
        margin-bottom: 12px;
    }

        .lms-feature-card h3 i {
            margin-right: 8px;
            color: #2563eb;
        }

    .lms-feature-card p {
        font-size: 15px;
        line-height: 1.7;
        color: #4b5563;
    }

/* Responsive */
@media (max-width: 1024px) {
    .lms-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .lms-features-grid {
        grid-template-columns: 1fr;
    }

    .lms-heading {
        font-size: 24px;
    }
}


/* OUTER LIGHT BLUE BOX */
.cyborg-about-box {
    background: #eaf4ff;
    border-radius: 18px;
}

/* MAIN HEADING */
.cyborg-main-heading {
    text-align: center;
    font-size: 36px;
    font-weight: 700;
    color: #0a2a66;
    margin-bottom: 18px;
}

/* MAIN PARAGRAPHS */
.cyborg-main-text {
    text-align: center;
    font-size: 17px;
    line-height: 1.9;
    color: #003366;
    margin-bottom: 14px;
   
}

/* HIGHLIGHT LINE */
.cyborg-highlight-line {
    text-align: center;
    font-size: 14.5px;
    color: #0a2a66;
    margin-top: 18px;
    margin-bottom: 26px;
}

/* WHITE CARDS */
.cyborg-info-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 26px 28px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

/* CARD HEADINGS */
.cyborg-card-heading {
    font-size: 22px;
    font-weight: 700;
    color: #0a2a66;
    text-align: center;
    margin-bottom: 16px;
}

/* CUSTOM BULLET LIST */
.cyborg-custom-list {
    padding-left: 20px;
}

.cyborg-custom-list li {
    font-size: 14.5px;
    line-height: 1.85;
    color: #1f2937;
    margin-bottom: 10px;
}

/* FINAL CARD TEXT */
.cyborg-card-footer {
    margin-top: 18px;
    font-size: 14.5px;
    line-height: 1.9;
    text-align: center;
    color: #374151;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cyborg-main-heading {
        font-size: 22px;
    }

    .cyborg-card-heading {
        font-size: 20px;
    }
}


.listing-text-colr {
    color: #003366;
}


/* SECTION WRAPPER */
.modern-teaching-section {
    max-width: 1600px;
    margin: 50px 20px;
    padding: 20px 0px 20px;
    border: 2px solid red;
    border-radius: 30px;
    text-align: center;
    font-family: 'Barlow', sans-serif;
    background: #fff;
}

/* HEADING */
.modern-heading {
    font-size: 42px;
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 30px;
}

/* TYPING EFFECT WRAPPER */
.typing-wrapper {
    display: inline-block;
    margin-left: 8px;
    color: #2563eb;
}

/* TEXT THAT TYPES */
.typing-text::before {
    content: "Methods";
    animation: typingWords 12s steps(12) infinite;
    white-space: nowrap;
}

/* CURSOR */
.typing-text::after {
    content: "|";
    animation: blink 1s infinite;
    margin-left: 4px;
}

/* IMAGE BOX */
.modern-image-box {
    max-width: 100%;
    margin: auto;
}

    .modern-image-box img {
        width: 100%;
        max-width: 1300px;
        height: auto;
        display: block;
        margin: auto;
    }

.modern-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 42px;
    font-weight: 700;
    color: #1e3a8a;
    font-family: 'Barlow', sans-serif;
    text-align: center;
    white-space: nowrap;
}

/* Static text */
.heading-static {
    display: inline-block;
}

/* typing wrapper */
.typing-container {
    display: inline-flex;
}

/* typing word */
.typing-word {
    display: inline-block;
    color: black;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid #2563eb;
    width: 0;
    animation: typing 3s steps(9, end) infinite, blink 0.8s infinite;
}

/* typing animation */
@keyframes typing {
    0% {
        width: 0;
    }

    40% {
        width: 9ch; /* "Methods :" */
    }

    60% {
        width: 9ch;
    }

    100% {
        width: 0;
    }
}

/* cursor blink */
@keyframes blink {
    0%, 100% {
        border-color: transparent;
    }

    50% {
        border-color: #2563eb;
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .modern-heading {
        font-size: 30px;
        flex-wrap: wrap; /* allow wrap on small screens */
    }
}

@media (max-width: 480px) {
    .modern-heading {
        font-size: 24px;
    }
}



.modern-learning-cards-section {
    padding: 10px 20px;
/*    background: #ffffff;*/
    font-family: 'Barlow', sans-serif;
}

.modern-learning-cards-grid {
    max-width: 1600px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARD DESIGN */
.modern-learning-card {
    border: 1.5px solid #2f3a4a;
    border-radius: 10px;
    padding: 25px 30px;
    background: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.35s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}


    .modern-learning-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.18);
        border-color: #2563eb;
    }

    /* TITLE */
    .modern-learning-card h3 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 18px;
        color: #000;
    }

    /* TEXT */
    .modern-learning-card p {
        font-size: 15px;
        line-height: 1.9;
        color: #111;
    }

/* TABLET */
@media (max-width: 1024px) {
    .modern-learning-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .modern-learning-cards-grid {
        grid-template-columns: 1fr;
    }

    .modern-learning-card {
        padding: 22px 20px;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
    .modern-learning-card h3 {
        font-size: 18px;
    }

    .modern-learning-card p {
        font-size: 14px;
    }
}


.modern-learning-card h3,
.modern-learning-card p {
    transition: color 0.35s ease;
}

/* OPTIONAL: HEADING COLOR ON HOVER */
.modern-learning-card:hover h3 {
    color: #2563eb;
}


.lms-features-section {
    padding: 40px 20px;
/*    background: #ffffff;*/
    font-family: 'Barlow', sans-serif;
}

.lms-features-heading {
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 50px;
    color: #000;
}

    .lms-features-heading span {
        color: #2563eb;
    }

/* GRID */
.lms-features-grid {
    max-width: 1600px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

/* CARD */
.lms-feature-card {
    border: 1.5px solid #2f3a4a;
    border-radius: 10px;
    padding: 30px 25px;
    text-align: center;
    background: #fff;
    transition: all 0.35s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    height: 100%;
}

    /* IMAGE */
    .lms-feature-card img {
        max-width: 180px;
        margin: 0 auto 20px;
    }

    /* TITLE */
    .lms-feature-card h3 {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #000;
    }

    /* TEXT */
    .lms-feature-card p {
        font-size: 14.5px;
        line-height: 1.8;
        color: #111;
    }

    /* HOVER */
    .lms-feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
        border-color: #2563eb;
    }

        .lms-feature-card:hover h3 {
            color: #2563eb;
        }

/* TABLET */
@media (max-width: 1024px) {
    .lms-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .lms-features-grid {
        grid-template-columns: 1fr;
    }

    .lms-features-heading {
        font-size: 28px;
    }
}


.why-choose-lms {
    background-color: !important #e6f3ff;
}


.get-in-touch-bg {
    background-color: #4e4f72;
}


.future-learning-section {
    padding: 10px 20px;
/*    background: #ffffff;*/
    font-family: 'Barlow', sans-serif;
}

/* HEADING */
.future-learning-heading {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: #3b6fd8; /* blue from screenshot */
    margin-bottom: 40px;
}

/* CARD */
.future-learning-card {
    max-width: 1000px;
    margin: auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 40px 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    text-align: center;
}

    /* TEXT */
    .future-learning-card p {
        font-size: 18px;
        line-height: 1.9;
        color: #222;
    }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .future-learning-heading {
        font-size: 34px;
    }

    .future-learning-card {
        padding: 35px 30px;
    }
}

@media (max-width: 768px) {
    .future-learning-heading {
        font-size: 28px;
    }

    .future-learning-card p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .future-learning-heading {
        font-size: 24px;
    }

    .future-learning-card {
        padding: 28px 22px;
    }
}



/* SECTION BACKGROUND */
.exms-section {
    padding: 20px 20px;
    background: #ffffff;
    font-family: 'Barlow', sans-serif;
}

/* MAIN CONTAINER */
.exms-container {
    max-width: 1600px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
    align-items: center;
}

/* IMAGE */
.exms-image img {
    width: 100%;
    max-width: 770px;
    display: block;
    margin: auto;
}

/* RIGHT BOX */
.exms-content-box {
    background: #eaf4ff;
    border-radius: 22px;
    padding: 20px 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

    /* HEADING */
    .exms-content-box h2 {
        font-size: 32px;
        font-weight: 700;
        color: #0a2a66;
        margin-bottom: 10px;
        text-align: center;
    }

/* TEXT */
.exms-content p {
    font-size: 19px;
    line-height: 1.9;
    color: #333;
    margin-bottom: 8px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .exms-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .exms-content-box {
        padding: 35px 25px;
    }
}

@media (max-width: 600px) {
    .exms-content-box h2 {
        font-size: 26px;
    }

    .exms-content p {
        font-size: 16px;
    }
}


.exam-steps-section {
    padding: 80px 20px;
/*    background: #ffffff;*/
    font-family: 'Barlow', sans-serif;
}

/*.exam-steps-container {
    max-width: 1200px;
    margin: auto;
    position: relative;
}*/

    /* Vertical Line */
    /*.exam-steps-container::before {
        content: "";
        position: absolute;
        left: 38px;
        top: 0;
        width: 2px;
        height: 100%;
        background: #1e73be;
    }*/


.exam-steps-container {
    max-width: 1200px;
    margin: auto;
    position: relative;
}

    /* Vertical line */
    .exam-steps-container::before {
        content: "";
        position: absolute;
        left: 38px;
        top: 0;
        width: 2px;
        height: 100%;
        background: #1e73be;
    }


.last-step::after {
    content: "";
    position: absolute;
    left: 38px;
    top: 50%;
    width: 2px;
    height: 100%;
    background: #f9fafb; /* same as section background */
    z-index: 1;
}


/* Step Row */
.exam-step {
    display: flex;
    gap: 40px;
    margin-bottom: 55px;
    position: relative;
}

/* Diamond Icon */
.step-icon {
    width: 76px;
    height: 76px;
    background: #1e73be;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
}

    .step-icon i {
        color: #ffffff;
        font-size: 28px;
        transform: rotate(-45deg);
    }

/* Content */
.step-content h3 {
    color: #1e73be;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
}

.step-content p {
    font-size: 17px;
    color: #333;
    line-height: 1.8;
    max-width: 820px;
}

/* Responsive */
@media (max-width: 768px) {
    .exam-steps-container::before {
        left: 32px;
    }

    .exam-step {
        gap: 25px;
    }

    .step-icon {
        width: 60px;
        height: 60px;
    }

        .step-icon i {
            font-size: 22px;
        }

    .step-content h3 {
        font-size: 22px;
    }

    .step-content p {
        font-size: 16px;
    }
}


.core-modules-bg-color {
    background-color: #f2f2f2;
}


.exam-eval-section {
    padding: 20px 20px;
    background: #ffffff;
    font-family: 'Barlow', sans-serif;
}

.exam-eval-container {
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 40px;
    align-items: center;
}

/* LEFT CARD */
.exam-eval-content {
    background: #eaf6ff;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

    .exam-eval-content p {
        font-size: 17px;
        line-height: 1.9;
        color: #222;
    }

/* IMAGE WRAPPER */
.exam-eval-image {
/*    background: linear-gradient(135deg,#f9b6e5,#9dd9ff,#7f74d8);*/
    border-radius: 28px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .exam-eval-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 18px;
        box-shadow: 0 20px 45px rgba(0,0,0,0.2);
    }

/* RESPONSIVE */
@media (max-width: 1200px) {
    .exam-eval-container {
        grid-template-columns: 1fr;
    }

    .exam-eval-image {
        margin-top: 30px;
    }
}


.exam-steps-section {
    padding: 80px 20px;
/*    background: #ffffff;*/
    font-family: 'Barlow', sans-serif;
}

/* GRID */
.exam-steps-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
/*    gap: 40px;*/
}

/* CARD */
.exam-step-card {
    position: relative;
    background: #ffffff;
    border: 5px solid #2f6fd5;
    padding: 40px 30px;
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 1;
}

    /* SLIDE GRADIENT */
    .exam-step-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #2f6fd5, #0b1b3a);
        transform: translateX(-100%);
        transition: transform 0.45s ease-in-out;
        z-index: -1;
    }

    .exam-step-card:hover::before {
        transform: translateX(0);
    }

/* ICON */
.exam-step-icon {
    width: 42px;
    height: 42px;
    border: 3px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

    .exam-step-icon.blue {
        border-color: #2f6fd5;
        color: #2f6fd5;
    }

/* TEXT */
.exam-step-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 18px;
}

.exam-step-card p {
    font-size: 16px;
    line-height: 1.8;
}

/* HOVER TEXT COLOR */
.exam-step-card:hover {
    color: #ffffff;
}

    .exam-step-card:hover .exam-step-icon {
        border-color: #ffffff;
        color: #ffffff;
    }

/* RESPONSIVE */
@media (max-width: 1100px) {
    .exam-steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .exam-steps-grid {
        grid-template-columns: 1fr;
    }
}


.exam-process-section {
    padding: 80px 20px;
    background: #ffffff;
    font-family: 'Barlow', sans-serif;
}

.exam-process-grid {
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
/*    gap: 40px;*/
}

/* CARD */
.exam-process-card {
    position: relative;
/*    background: #ffffff;*/
    border: 5px solid #2f6fd5;
    padding: 40px 30px;
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 1;
}

    /* DARK CENTER CARD */
    .exam-process-card.dark {
        border-color: #0b1b3a;
    }

    /* GRADIENT SLIDE */
    .exam-process-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #2f6fd5, #0b1b3a);
        transform: translateX(-100%);
        transition: transform 0.45s ease-in-out;
        z-index: -1;
    }

    .exam-process-card:hover::before {
        transform: translateX(0);
    }

/* ICON */
.exam-process-icon {
    width: 42px;
    height: 42px;
    border: 3px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

    .exam-process-icon.blue {
        border-color: #2f6fd5;
        color: #2f6fd5;
    }

/* TEXT */
.exam-process-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.exam-process-card p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 14px;
}

/* LIST */
.exam-process-card ul {
    padding-left: 0;
    list-style: none;
}

    .exam-process-card ul li {
        position: relative;
        padding-left: 18px;
        margin-bottom: 10px;
        font-size: 15px;
        line-height: 1.6;
    }

        .exam-process-card ul li::before {
            content: "◆";
            position: absolute;
            left: 0;
            color: #2f6fd5;
            font-size: 12px;
        }

/* HOVER EFFECT */
.exam-process-card:hover {
    color: #ffffff;
}

    .exam-process-card:hover ul li::before {
        color: #ffffff;
    }

    .exam-process-card:hover .exam-process-icon {
        border-color: #ffffff;
        color: #ffffff;
    }

/* RESPONSIVE */
@media (max-width: 1100px) {
    .exam-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .exam-process-grid {
        grid-template-columns: 1fr;
    }
}



/* SECTION */
.obe-feature-section {
    padding: 40px 20px;
    background: #ffffff;
    font-family: 'Segoe UI', sans-serif;
}

/* GRID */
.obe-grid {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* CARD */
.obe-card {
    background: #3b6fb6;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    transition: all 0.35s ease;
    position: relative;
}


    .obe-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
    }


    .obe-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.18), transparent );
        transform: translateX(-100%);
        transition: transform 0.6s ease;
    }

    .obe-card:hover::before {
        transform: translateX(100%);
    }



/* HEADER */
.obe-card-header {
    background: linear-gradient(90deg, #0b1638, #07102a);
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 20px;
    text-align : center;
}

/* BODY */
.obe-card-body {
    padding: 22px 24px;
    color: #ffffff;
}

    .obe-card-body p {
        font-size: 14.5px;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    /* LIST */
    .obe-card-body ul {
        padding-left: 0;
        list-style: none;
    }

        .obe-card-body ul li {
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 10px;
            padding-left: 18px;
            position: relative;
        }

            .obe-card-body ul li::before {
                content: "◆";
                position: absolute;
                left: 0;
                color: #a9d6ff;
                font-size: 12px;
            }

/* RESPONSIVE */
@media (max-width: 992px) {
    .obe-grid {
        grid-template-columns: 1fr;
    }
}


/* Common highlight style */
.text-highlight {
    display: inline-block; /* IMPORTANT for center alignment */
    padding: 10px 18px;
    border-radius: 14px;
    background: linear-gradient( 90deg, #1856a9, #e0f2fe );
    box-shadow: 0 6px 18px rgba(59, 130, 246, 0.25), inset 0 0 12px rgba(255, 255, 255, 0.6);
}

    /* Softer highlight for paragraph */
    .text-highlight.light {
        padding: 10px 22px;
        box-shadow: 0 4px 14px rgba(59, 130, 246, 0.18), inset 0 0 10px rgba(255, 255, 255, 0.7);
    }



.lms-contact-cta {
    position: relative;
    background: url('/images/outcome-based-edu/get-in-touch.webp') center center / cover no-repeat;
    padding: 70px 20px;
    color: #fff;
    overflow: hidden;
}

/* Dark overlay */
.lms-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.20);
    z-index: 1;
}

.lms-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

/* LEFT BOX */
.lms-contact-box {
    border: 2px solid #ffffff;
    border-radius: 30px;
    padding: 45px 55px;
    min-width: 600px;
    border-radius: 60px 0 60px 0;
    background-color: #6d6d6d;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 30px;
}

    .contact-item:last-child {
        margin-bottom: 0;
    }

    .contact-item i {
        font-size: 26px;
    }

/* RIGHT CONTENT */
.lms-cta-content {
    max-width: 700px;
    text-align: center;
}

    .lms-cta-content h2 {
        font-size: 36px;
        font-weight: 700;
        margin-bottom: 25px;
        line-height: 1.4;
    }

.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #2f73d6;
    padding: 14px 28px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.3s ease;
}

    .cta-btn:hover {
        background: #1e5bb3;
    }



/* RESPONSIVE */
@media (max-width: 991px) {
    .lms-container {
        flex-direction: column;
        text-align: center;
    }

    .lms-contact-box {
        min-width: 100%;
    }

    .lms-cta-content h2 {
        font-size: 28px;
    }
}


/* SECTION */
.obe-adv-v2-section {
    padding: 20px 20px;
}

/* CONTAINER */
.obe-adv-v2-container {
    max-width: 1400px;
    margin: auto;
    background: linear-gradient(180deg, #0d2b52, #071a34);
    border-radius: 16px;
    padding: 60px 50px 70px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

/* TITLE */
.obe-adv-v2-title {
    text-align: center;
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
}

/* GRID */
.obe-adv-v2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

/* CARD */
.obe-adv-v2-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 26px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .obe-adv-v2-card h3 {
        font-size: 18px;
        font-weight: 700;
        color: #0b5ed7;
        margin-bottom: 14px;
        line-height: 1.4;
    }

    .obe-adv-v2-card p {
        font-size: 15px;
        line-height: 1.8;
        color: #333333;
    }

    /* HOVER */
    .obe-adv-v2-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .obe-adv-v2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .obe-adv-v2-container {
        padding: 40px 20px;
    }

    .obe-adv-v2-grid {
        grid-template-columns: 1fr;
    }

    .obe-adv-v2-title {
        font-size: 26px;
    }
}


/* SECTION BACKGROUND */
.obe-conclusion-section {
    padding: 40px 20px;
    background: linear-gradient(135deg, #2f6fbf, #3b82c4);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

/* CENTER BOX */
.obe-conclusion-box {
    max-width: 1200px;
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 50px 60px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* TITLE */
.obe-conclusion-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    position: relative;
}

    .obe-conclusion-title::after {
        content: "";
        width: 80px;
        height: 4px;
        background: #ffffff;
        display: block;
        margin: 14px auto 0;
        border-radius: 2px;
    }

/* TEXT */
.obe-conclusion-text {
    font-size: 17px;
    line-height: 1.9;
    color: #f1f5f9;
    max-width: 820px;
    margin: auto;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .obe-conclusion-box {
        padding: 35px 25px;
    }

    .obe-conclusion-title {
        font-size: 28px;
    }

    .obe-conclusion-text {
        font-size: 15px;
    }
}

/* SECTION */
.obe-info-cards-section {
    padding: 60px 20px;
    background: #f6f8fb;
}

/* GRID CONTAINER */
.obe-info-cards-container {
    max-width: 1400px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARD */
.obe-info-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 28px 30px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .obe-info-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    }

    /* MIDDLE CARD HIGHLIGHT */
    .obe-info-card.highlight {
        border-top: 5px solid #1d6fe3;
    }

/* TITLE */
.obe-info-title {
    font-size: 22px;
    font-weight: 700;
    color: #1d6fe3;
    text-align: center;
    margin-bottom: 20px;
}

/* LIST STYLE */
.obe-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .obe-info-list li {
        position: relative;
        padding-left: 26px;
        margin-bottom: 14px;
        font-size: 15px;
        line-height: 1.7;
        color: #333;
    }

        .obe-info-list li::before {
            content: "✔";
            position: absolute;
            left: 0;
            top: 2px;
            color: #1d6fe3;
            font-weight: bold;
        }

/* TEXT CARD */
.obe-info-text {
    font-size: 16px;
    line-height: 1.9;
    color: #333;
    text-align: center;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .obe-info-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .obe-info-cards-container {
        grid-template-columns: 1fr;
    }
}


.cyborg-advantage-section {
    padding: 40px 20px;
   
}

.cyborg-advantage-container {
    max-width: 1200px;
    margin: auto;
    background: linear-gradient(180deg, #072c55, #041b38);
    border-radius: 18px;
    padding: 50px 40px 60px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    color: #ffffff;
}

/* Title */
.cyborg-advantage-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.adv-icon {
    font-size: 30px;
}

/* Table Layout */
.cyborg-advantage-table {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.table-row {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.table-col {
    padding: 22px 25px;
    font-size: 17px;
    line-height: 1.7;
}

/* Header Row */
.table-head .table-col {
    font-size: 19px;
    font-weight: 600;
    color: #8ec9ff;
}

/* Left Column */
.table-col.bold {
    font-weight: 600;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .table-row {
        grid-template-columns: 1fr;
    }

    .table-head {
        display: none;
    }

    .table-col {
        padding: 18px 15px;
    }

        .table-col.bold {
            background: rgba(255, 255, 255, 0.05);
        }
}


/* SECTION */
.finance-features-section {
    background: #eaf4ff;
    padding: 40px 20px;
    font-family: 'Inter', sans-serif;
    max-width: 1400px;
    margin: auto;
    border-radius : 10px;
    margin-top : 3rem;
}

/* CONTAINER */
.finance-container {
/*    max-width: 1300px;*/
    margin: auto;
}

/* TITLE */
.finance-main-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    color: #143f8c;
    margin-bottom: 60px;
}

/* GRID */
.finance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

/* CARD */
.finance-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 32px 34px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .finance-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 22px 55px rgba(0, 0, 0, 0.12);
    }

    /* CARD HEADING */
    .finance-card h3 {
        font-size: 22px;
        font-weight: 700;
        color: #143f8c;
        margin-bottom: 18px;
    }

    /* LIST */
    .finance-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .finance-card ul li {
            position: relative;
            padding-left: 22px;
            font-size: 16px;
            line-height: 1.8;
            color: #333;
            margin-bottom: 10px;
        }

            /* DIAMOND BULLET */
            .finance-card ul li::before {
                content: "";
                position: absolute;
                left: 0;
                top: 9px;
                width: 8px;
                height: 8px;
                background: #2a7be4;
                transform: rotate(45deg);
            }

/* CENTER LAST CARD */
.finance-card-center {
    grid-column: span 2;
    max-width: 620px;
    margin: auto;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .finance-grid {
        grid-template-columns: 1fr;
    }

    .finance-card-center {
        grid-column: span 1;
        max-width: 100%;
    }

    .finance-main-title {
        font-size: 28px;
    }
}


/* SECTION BACKGROUND */
.erp-compare-section {
    padding: 30px 20px;
    background: #ffffff;
    font-family: 'Inter', sans-serif;
}

/* DARK WRAPPER */
.erp-compare-wrapper {
    max-width: 1200px;
    margin: auto;
    background: linear-gradient(180deg, #041a3a, #02142d);
    border-radius: 18px;
    padding: 70px 50px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

/* TITLE */
.erp-compare-title {
    text-align: center;
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* TABLE CONTAINER */
.erp-table-container {
    overflow-x: auto;
}

/* TABLE */
.erp-compare-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(42, 123, 228, 0.35);
}

    /* HEADER */
    .erp-compare-table thead th {
        background: #002b5c;
        color: #ffffff;
        font-size: 20px;
        font-weight: 600;
        padding: 22px 26px;
        text-align: left;
        border-right: 1px solid rgba(255, 255, 255, 0.25);
    }

        .erp-compare-table thead th:last-child {
            border-right: none;
        }

    /* BODY ROWS */
    .erp-compare-table tbody tr {
        border-top: 1px solid rgba(42, 123, 228, 0.25);
    }

    .erp-compare-table tbody td {
        padding: 22px 26px;
        font-size: 17px;
        color: #e6efff;
        line-height: 1.7;
        border-right: 1px solid rgba(42, 123, 228, 0.25);
    }

        .erp-compare-table tbody td:last-child {
            border-right: none;
        }

    /* HOVER EFFECT */
    .erp-compare-table tbody tr:hover {
        background: rgba(10, 93, 187, 0.15);
    }

/* RESPONSIVE */
@media (max-width: 900px) {
    .erp-compare-wrapper {
        padding: 50px 25px;
    }

    .erp-compare-title {
        font-size: 28px;
    }

    .erp-compare-table thead th,
    .erp-compare-table tbody td {
        padding: 18px;
        font-size: 15px;
    }
}


/* SECTION BACKGROUND */
.finance-report-section {
    background: #eaf4ff;
    padding: 10px 10px;
    max-width: 1200px;
    margin : auto;
    border-radius : 20px;
    font-family: 'Inter', sans-serif;
    margin-top : 2rem;
}

/* WRAPPER */
.finance-report-wrapper {
    max-width: 1200px;
    margin: auto;
    background: #eaf4ff;
    border-radius: 18px;
    padding: 20px 20px;
}

/* TITLE */
.finance-report-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    color: #003b8f;
    margin-bottom: 10px;
}

/* CARD */
.finance-report-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 20px 50px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
}

/* SUBTITLE */
.finance-report-subtitle {
    font-size: 20px;
    font-weight: 500;
    color: #003b8f;
    margin-bottom: 15px;
}

/* LIST */
.finance-report-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .finance-report-list li {
        position: relative;
        padding-left: 26px;
        font-size: 18px;
        color: #003b8f;
        line-height: 1.8;
        margin-bottom: 6px;
    }

        /* DIAMOND BULLET */
        .finance-report-list li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 11px;
            width: 8px;
            height: 8px;
            background: #4aa3ff;
            transform: rotate(45deg);
        }

/* RESPONSIVE */
@media (max-width: 768px) {
    .finance-report-wrapper {
        padding: 40px 20px;
    }

    .finance-report-card {
        padding: 30px 25px;
    }

    .finance-report-title {
        font-size: 28px;
    }

    .finance-report-subtitle {
        font-size: 18px;
    }

    .finance-report-list li {
        font-size: 16px;
    }
}


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


/* MAIN SECTION */
.cbe-shift-section {
    padding: 20px 20px;
/*    background: #ffffff;*/
    font-family: 'Inter', sans-serif;
}

/* HEADING BOX */
.cbe-heading-box {
    max-width: 1200px;
    margin: 0 auto 10px;
    background: #eaf4ff;
    border-radius: 14px;
    padding: 18px 20px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

    .cbe-heading-box h2 {
        font-size: 32px;
        font-weight: 700;
        color: #0a4fb3;
        margin: 0;
    }

/* CONTENT CARD */
.cbe-content-card {
    max-width: 1200px;
    margin: auto;
    background: #f4f9ff;
    border-radius: 18px;
    padding: 40px 50px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

    /* PARAGRAPHS */
    .cbe-content-card p {
        font-size: 17px;
        line-height: 1.8;
        color: #444;
        margin-bottom: 18px;
    }

    /* SUB HEADING */
    .cbe-content-card h4 {
        margin-top: 30px;
        font-size: 18px;
        font-weight: 700;
        color: #0a4fb3;
    }

/* BULLET LIST */
.cbe-points {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

    .cbe-points li {
        position: relative;
        padding-left: 28px;
        margin-bottom: 8px;
        font-size: 18px;
        color: #333;
    }

        /* BLUE DIAMOND BULLET */
        .cbe-points li::before {
            content: "◆";
            position: absolute;
            left: 0;
            top: 2px;
            color: #1f6fe5;
            font-size: 14px;
        }

/* RESPONSIVE */
@media (max-width: 768px) {
    .cbe-content-card {
        padding: 28px 22px;
    }

    .cbe-heading-box h2 {
        font-size: 26px;
    }
}


/* SECTION */
.cbe-hover-section {
    padding: 20px 20px;
/*    background: #ffffff;*/
    font-family: 'Inter', sans-serif;

}

/* OUTER CARD */
.cbe-hover-container {
    max-width: 1300px;
    margin: auto;
    background: #ffffff;
    border-radius: 26px;
    padding: 45px 40px;
    border: 2px solid #e6f3ff;
    /*    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);*/
}

/* ITEM CARD */
.cbe-hover-card {
    position: relative;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #f8fbff;
    padding: 20px 24px;
    border-radius: 16px;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transition: all 0.35s ease;
}

    /* LEFT GLOW ON HOVER */
    .cbe-hover-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, rgba(31, 111, 229, 0.18), transparent 60% );
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    /* HOVER EFFECT */
    .cbe-hover-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(31, 111, 229, 0.25);
    }

        .cbe-hover-card:hover::before {
            opacity: 1;
        }

/* DIAMOND BULLET */
.cbe-bullet {
    width: 9px;
    height: 9px;
    background: #1f6fe5;
    transform: rotate(45deg);
    margin-top: 8px;
    flex-shrink: 0;
}

/* TEXT */
.cbe-hover-card p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: #2f2f2f;
    z-index: 1;
}

/* BLUE TITLE */
.cbe-hover-card strong {
    color: #0a4fb3;
    font-weight: 700;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .cbe-hover-container {
        padding: 28px 20px;
    }

    .cbe-hover-card {
        padding: 18px 18px;
    }

        .cbe-hover-card p {
            font-size: 16px;
        }
}


/* SECTION */
.cbe-flow-section {
    padding: 40px 20px;
    background: linear-gradient(180deg, #0b1f3a, #06152b);
    max-width : 1200px;
    margin : auto;
    border-radius : 20px;
    margin-bottom : 1rem;
    margin-top : 1rem;
}

/* WRAPPER */
.cbe-flow-wrapper {
    max-width: 1100px;
    margin: auto;
}

/* INTRO TEXT */
.cbe-flow-intro {
    color: #e6ecf5;
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 60px;
}

/* ITEM */
.cbe-flow-item {
    position: relative;
    margin-bottom: 55px;
}

/* NUMBER CIRCLE */
.cbe-flow-number {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    background: #0d6efd;
    color: #ffffff;
    font-weight: 700;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(13, 110, 253, 0.5);
    z-index: 2;
}

/* CARD */
.cbe-flow-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 32px 40px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
    transition: all 0.35s ease;
}

    /* HOVER EFFECT */
    .cbe-flow-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 28px 55px rgba(0, 0, 0, 0.28);
    }

    /* HEADING */
    .cbe-flow-card h3 {
        color: #0d6efd;
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    /* TEXT */
    .cbe-flow-card p {
        color: #333333;
        font-size: 15px;
        line-height: 1.8;
    }

/* RESPONSIVE */
@media (max-width: 768px) {
    .cbe-flow-card {
        padding: 24px 22px;
    }

    .cbe-flow-intro {
        font-size: 14px;
    }
}


/* ========== COMMON BACKGROUND STYLE ========== */
.cbe-example-section,
.cbe-conclusion-section {
    padding: 40px 20px;
/*    background: #ffffff;*/
}

/* ========== BOX STYLES ========== */
.cbe-example-box,
.cbe-conclusion-box {
    max-width: 1200px;
    margin: auto;
    background: #eaf6ff;
    border-radius: 16px;
    padding: 45px 55px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* LEFT BLUE BORDER (ONLY FIRST BOX) */
.cbe-example-box {
    border-left: 6px solid #0d6efd;
}

/* ========== TITLES ========== */
.cbe-example-title {
    font-size: 24px;
    font-weight: 700;
    color: #0a58ca;
    margin-bottom: 18px;
}

.cbe-conclusion-title {
    font-size: 28px;
    font-weight: 600;
    color: #0a58ca;
    text-align: center;
    margin-bottom: 28px;
    font-family :  Barlow;
}

/* ========== TEXT ========== */
.cbe-example-text,
.cbe-conclusion-text {
    font-size: 16px;
    color: #1f2937;
    line-height: 1.8;
    margin-bottom: 18px;
}

/* ========== LIST ========== */
.cbe-example-list {
    list-style: none;
    padding-left: 0;
    margin: 25px 0;
}

    .cbe-example-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 16px;
        color: #1f2937;
        line-height: 1.8;
        margin-bottom: 14px;
    }

/* DIAMOND BULLET */
.cbe-example-dot {
    width: 8px;
    height: 8px;
    background: #0d6efd;
    transform: rotate(45deg);
    margin-top: 9px;
    flex-shrink: 0;
}

/* ========== HIGHLIGHT TEXT ========== */
.cbe-conclusion-highlight {
    margin-top: 22px;
    font-size: 16px;
    color: #1f2937;
    line-height: 1.8;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .cbe-example-box,
    .cbe-conclusion-box {
        padding: 30px 25px;
    }

    .cbe-conclusion-title {
        font-size: 24px;
    }
}


/* SECTION BACKGROUND */
.ir-highlights-section {
    padding: 40px 20px;
/*    background: #ffffff;*/
}

.ir-highlights-container {
    max-width: 1200px;
    margin: auto;
    background: #eaf5ff;
    border-radius: 20px;
    padding: 40px 30px 50px;
}

/* TITLE */
.ir-highlights-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #002d62;
    margin-bottom: 30px;
}

    .ir-highlights-title .diamond {
        color: #5aa9ff;
        margin-right: 10px;
    }

/* TABLE WRAPPER */
.ir-table-wrapper {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
}

/* TABLE */
.ir-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

    /* HEADER */
    .ir-table thead th {
        background: #002f63;
        color: #ffffff;
        text-align: left;
        padding: 18px 20px;
        font-weight: 600;
    }

    /* BODY */
    .ir-table tbody td {
        padding: 22px 20px;
        vertical-align: top;
        color: #1a1a1a;
        border-bottom: 1px solid #e0e0e0;
    }

    /* REMOVE LAST BORDER */
    .ir-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* FEATURE COLUMN WIDTH */
    .ir-table tbody td:first-child {
        width: 30%;
    }

    /* HOVER EFFECT */
    .ir-table tbody tr {
        transition: background 0.3s ease;
    }

        .ir-table tbody tr:hover {
            background: #f1f8ff;
        }

/* RESPONSIVE */
@media (max-width: 768px) {
    .ir-table thead {
        display: none;
    }

    .ir-table,
    .ir-table tbody,
    .ir-table tr,
    .ir-table td {
        display: block;
        width: 100%;
    }

        .ir-table tbody tr {
            margin-bottom: 20px;
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
        }

        .ir-table tbody td {
            border: none;
            padding: 14px 16px;
        }

            .ir-table tbody td:first-child {
                background: #002f63;
                color: #ffffff;
                font-weight: 600;
            }
}


/* VERTICAL DIVIDER LINE */
.ir-table thead th:first-child,
.ir-table tbody td:first-child {
    border-right: 1px solid #d6e6f7;
}

/* Stronger divider for header */
.ir-table thead th:first-child {
    border-right: 1px solid rgba(255, 255, 255, 0.35);
}

/* Maintain divider on hover */
.ir-table tbody tr:hover td:first-child {
    border-right-color: #c3ddf8;
}



/* Overlay */
.thankyou-overlay {
    position: fixed;
    inset: 0;
    background: rgba(208, 208, 208, 0.77);
  
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Hide by default */
/* Popup hidden state ONLY */
.thankyou-overlay.is-hidden {
    display: none;
}


/* Popup box */
.thankyou-popup {
    background: #ffffff;
    padding: 40px 35px;
    border: 2px solid blue;
    border-radius: 18px;
    text-align: center;
    max-width: 460px;
    width: 90%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    animation: popupZoom 0.35s ease;
}

    .thankyou-popup h2 {
        font-size: 32px;
        font-weight: 700;
        color: #0a2a66;
        margin-bottom: 15px;
    }

    .thankyou-popup p {
        font-size: 20px;
        color: #444;
        margin-bottom: 25px;
    }

    /* Button */
    .thankyou-popup button {
        background: #0a2a66;
        color: #fff;
        padding: 12px 28px;
        border-radius: 8px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

        .thankyou-popup button:hover {
            background: #08305f;
        }

/* Animation */
@keyframes popupZoom {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


.success-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 20px;
}

    /* SVG base */
    .success-icon svg {
        width: 100%;
        height: 100%;
    }

/* Blue circle */
.success-circle {
    fill: none;
    stroke: #0a2a66;
    stroke-width: 4;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: drawCircle 0.6s ease forwards;
}

/* White check */
.success-check {
    fill: none;
    stroke: #ffffff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: drawCheck 0.35s ease forwards;
    animation-delay: 0.6s;
}

/* Background circle fill */
.success-icon svg {
    background: #0a2a66;
    border-radius: 50%;
    animation: scaleIn 0.4s ease;
}

/* Animations */
@keyframes drawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawCheck {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.6);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


.error-state .success-icon svg {
    background: #d9534f;
}

.error-state .success-circle {
    stroke: #d9534f;
}

.error-state .success-check {
    stroke: #fff;
}

.InstitutionalRepository-bg-color {
    background-color: #010F31;
}

/* SECTION BACKGROUND */
.pbas-section {
    padding: 80px 20px;
    background: linear-gradient(to bottom, #0b1a2d, #020b17);
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

/* CONTAINER */
.pbas-container {
    max-width: 1200px;
    margin: auto;
}

/* MAIN CARD */
.pbas-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 60px 50px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* TITLE */
.pbas-title {
    text-align: center;
    font-size: 34px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
}

/* TEXT */
.pbas-text,
.pbas-subtext,
.pbas-footer {
    text-align: center;
    color: #cbd5e1;
    line-height: 1.8;
}

.pbas-text {
    max-width: 900px;
    margin: 0 auto 20px;
}

.pbas-subtext {
    margin-bottom: 50px;
}

/* CATEGORIES GRID */
.pbas-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

/* CATEGORY CARD */
.pbas-category {
    padding: 45px 30px;
    border-radius: 16px;
    text-align: center;
    color: #ffffff;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

/* CATEGORY COLORS */
.category-blue {
    background: #46a2dc;
}

.category-green {
    background: #67bb6a;
}

.category-yellow {
    background: #f6aa1c;
}

/* CATEGORY TEXT */
.pbas-category h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.pbas-category p {
    font-size: 18px;
    font-weight: 500;
}

/* FOOTER */
.pbas-footer {
    max-width: 1000px;
    margin: auto;
    color: #94a3b8;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .pbas-categories {
        grid-template-columns: 1fr;
    }

    .pbas-card {
        padding: 40px 25px;
    }

    .pbas-title {
        font-size: 26px;
    }
}


/* SECTION */
.faculty-growth-section {
    background: #eaf6ff;
    padding: 40px 20px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    max-width : 1200px;
    margin : auto;
}

/* CONTAINER */
.faculty-container {
    max-width: 1400px;
    margin: auto;
}

/* TITLE */
.faculty-title {
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    color: #003a8f;
    margin-bottom: 50px;
}

/* GRID */
.faculty-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* CARD */
.faculty-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 30px 28px;
    box-shadow: 0 10px 25px rgba(0, 80, 160, 0.15);
}

   
    .faculty-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .faculty-card li {
        position: relative;
        padding-left: 22px;
        margin-bottom: 14px;
        font-size: 17px;
        line-height: 1.7;
        color: #1f2937;
    }

        /* BLUE BULLET */
        .faculty-card li::before {
            content: "◆";
            position: absolute;
            left: 0;
            top: 4px;
            font-size: 17px;
            color: #2563eb;
        }

/* CENTER CARD WRAPPER */
.faculty-center {
    display: flex;
    justify-content: center;
}

/* CENTER CARD WIDTH */
.faculty-card-center {
    width: 40%;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .faculty-grid {
        grid-template-columns: 1fr;
    }

    .faculty-card-center {
        width: 100%;
    }
}


/* CONTAINER */
.flip-container {
    max-width: 1400px;
    margin: auto;
}

/* GRID */
.flip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

/* CARD WRAPPER (3D SPACE) */
.flip-card {
    perspective: 1200px;
    height: 260px;
}

/* INNER CARD */
.flip-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
}

/* FLIP ON HOVER */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* FRONT & BACK */
.flip-front,
.flip-back {
    position: absolute;
    inset: 0;
    background: #3771BC;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 80, 160, 0.15);
    padding: 30px;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* FRONT */
    .flip-front h3 {
        font-size: 30px;
        font-weight: 600;
        color: white;
        text-align: center;
    }

/* BACK */
.flip-back {
    transform: rotateY(180deg);
    align-items: flex-start;
}

    .flip-back p,
    .flip-back li {
        font-size: 18px;
        line-height: 1.6;
        color: white;
        font-weight : 600;
        text-align : center;
        padding-top : 4rem;
    }

    .flip-back ul {
        padding-left: 18px;
    }

/* CENTER ROW */
.flip-center {
    display: flex;
    justify-content: center;
    gap: 30px;
}

    .flip-center .flip-card {
        width: 40%;
    }

/* RESPONSIVE */
@media (max-width: 900px) {
    .flip-grid {
        grid-template-columns: 1fr;
    }

    .flip-center {
        flex-direction: column;
    }

        .flip-center .flip-card {
            width: 100%;
        }
}


.spa-section{
    padding:40px 20px;
   
}

.spa-container{
    max-width:1200px;
    margin:auto;
    background:linear-gradient(180deg,#043a70,#032c57);
    border-radius:16px;
    padding:50px 40px 60px;
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
}

/* Title */
.spa-title{
    color:#ffffff;
    font-size:32px;
    font-weight:700;
    margin-bottom:40px;
    text-align : center;
}

/* Table */
.spa-table{
    border:1px solid rgba(255,255,255,0.5);
    border-radius:10px;
    overflow:hidden;
}

/* Rows */
.spa-row{
    display:grid;
    grid-template-columns:35% 65%;
    border-bottom:1px solid rgba(255,255,255,0.5);
}

/* Remove last border */
.spa-row:last-child{
    border-bottom:none;
}

/* Cells */
.spa-row div{
    padding:22px 25px;
    color:#ffffff;
    font-size:16px;
    line-height:1.6;
}

/* Vertical Divider */
.spa-row div:first-child{
    border-right:1px solid rgba(255,255,255,0.5);
}

/* Header */
.spa-head{
    background:rgba(0,0,0,0.15);
    font-weight:700;
}

.spa-head div{
    font-size:17px;
}

/* Bold Left Column */
.spa-bold{
    font-weight:600;
}


.feedback-bg-colr {
    background: linear-gradient(145deg, #0d2345, #08315f);
}


.cyborg-blog-section {
    padding: 20px 20px;
    background: #f6f8fc;
}

.cyborg-blog-grid {
    max-width: 1500px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* Card */
.cyborg-blog-card {
    position: relative;
}

.cyborg-blog-img {
    position: relative;
    height: 270px;
    border-radius: 16px;
    overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

    .cyborg-blog-img img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        transition: 0.6s ease;
    }

.cyborg-blog-card:hover img {
    transform: scale(1.1);
}

/* Overlay */
.cyborg-blog-img::before {
    content: "";
    position: absolute;
    inset: 0;
/*    background: rgba(0, 0, 0, 0.26); */
    z-index: 1;
}

/* Date */
.cyborg-date {
    position: absolute;
    top: 30px;
    left: 15px;
    background: linear-gradient(195deg, #086AD8 0%, #42B9FF 100%);
    color: white;
    font-weight: 700;
    padding: 10px 15px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
    line-height: 19px;
    z-index: 2;
}

/* Floating White Box */
.cyborg-blog-box {
    background: white;
    width: 85%;
    margin: -40px auto 0;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
    position: relative;
    z-index: 3;
    transition: 0.4s ease;
    
}

.cyborg-blog-card:hover .cyborg-blog-box {
    transform: translateY(-10px);
}

/* Text */
.cyborg-author {
    font-size: 12px;
    color: #1b5cff;
    display: block;
    margin-bottom: 10px;
}

.cyborg-blog-box h3 {
    font-size: 1.2rem;
    line-height: 1.5;
    font-weight: 600;
    color: #0a2540;
    margin-bottom: 5px;
}

.cyborg-blog-box a {
    color: #1b5cff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;

}

/* Responsive */
@media (max-width: 992px) {
    .cyborg-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .cyborg-blog-grid {
        grid-template-columns: 1fr;
    }
}

.cyborg-author i {
    margin-right: 6px;
    color: #1b5cff;
}


.blog-detail-wrapper {
    max-width: 1520px;
/*    margin : auto;*/
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 30px;
    padding: 40px 20px;
}

/* LEFT */
.blog-tag {
    background: #ff4d79;
    color: white;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    display: inline-block;
    margin-bottom: 15px;
}

.blog-title {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 15px;
}

.blog-meta {
    display: flex;
    gap: 20px;
    color: #888;
    font-size: 14px;
    margin-bottom: 25px;
}

.blog-image img {
    width: 100%;
    border-radius: 14px;
    margin-bottom: 30px;
}

.blog-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.blog-quote {
    background: #f1f4ff;
    padding: 25px;
    border-left: 5px solid #4f6df5;
    border-radius: 10px;
    margin: 30px 0;
}

.blog-quote p {
    font-style: italic;
    font-size: 16px;
    color: #333;
}

.blog-subtitle {
    font-size: 24px;
    margin: 30px 0 15px;
}

/* SIDEBAR */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.sidebar-box {
    background: white;
    padding: 25px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.sidebar-box h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

/* SOCIAL */
.social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.social {
    padding: 10px;
    border-radius: 8px;
    color: white;
    font-size: 14px;
}

.instagram { background:#e4405f }
.twitter { background:#1da1f2 }
.facebook { background:#3b5998 }
.youtube { background:#ff0000 }
.pinterest { background:#bd081c }
.linkedin { background:#0077b5 }

/* CATEGORY */
.category-card {
    padding: 15px;
    color: white;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.pink { background:#ff4d79 }
.yellow { background:#fbbf24 }
.blue { background:#4f6df5 }
.orange { background:#fb923c }

/* POPULAR */
.tab-header {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.tab-header span {
    font-size: 14px;
    color: #777;
    cursor: pointer;
}

.tab-header .active {
    color: #4f6df5;
    font-weight: 600;
}

.popular-item {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.popular-item img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}

.popular-item h4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.popular-item span {
    font-size: 12px;
    color: #888;
}


.social-widget {
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}

.social-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
}

.social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.social-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f5f7fb;
    padding: 14px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .social-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }

/* ICON BOX */
.icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

/* Brand Colors */
.instagram {
    background: #E4405F;
}

.twitter {
    background: #1DA1F2;
}

.facebook {
    background: #1877F2;
}

.youtube {
    background: #FF0000;
}

.pinterest {
    background: #BD081C;
}

.linkedin {
    background: #0077B5;
}


.date-with-icon {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-icon {
    color: #2563eb; /* Blue color */
    font-size: 16px;
}


.related-posts-section {
    max-width: 1400px;
  
    padding: 0 20px;
}

.related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

    .related-header h2 {
        font-size: 28px;
        font-weight: 700;
    }

        .related-header h2 span {
            color: #ec4899;
        }

.nav-arrows {
    display: flex;
    gap: 15px;
}

.related-prev,
.related-next {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f4f6;
}

    .related-prev::after,
    .related-next::after {
        font-size: 14px;
        color: #333;
    }

/* CARD */
.related-card {
    background: white;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

    .related-card img {
        width: 100%;
        height: 220px;
        object-fit: fill;
        border-radius: 12px;
    }

.tag {
    display: inline-block;
    background: #ec4899;
    color: white;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 8px;
    margin: 15px 0 10px;
}

.related-card h4 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
}

.date {
    font-size: 13px;
    color: #888;
    font-weight : 500;
}


.comment-section {
    max-width: 1100px;
    background: white;
    padding: 50px;
    border-radius: 18px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.05);
    margin: 80px auto;
}

    .comment-section h2 {
        font-size: 28px;
        font-weight: 700;
        margin-bottom: 10px;
    }

.comment-subtitle {
    color: #777;
    margin-bottom: 35px;
}

/* Form layout */
.comment-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.full-input {
    width: 100%;
}

/* Inputs */
.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    font-size: 15px;
    outline: none;
    background: #fafafa;
    transition: 0.3s;
}

    .comment-form input:focus,
    .comment-form textarea:focus {
        border-color: #2563eb;
        background: white;
        box-shadow: 0 0 0 4px rgba(37,99,235,0.1);
    }

/* Button */
.comment-btn {
    width: fit-content;
    padding: 14px 30px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

    .comment-btn:hover {
        background: #1d4ed8;
        box-shadow: 0 10px 25px rgba(37,99,235,0.35);
    }

/* Mobile */
@media(max-width: 700px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .comment-section {
        padding: 30px;
    }
}


.para-text-colr {
    color: #003b8f;
}


.input-select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 14px;
    background: #fff;
    color: #aab0bb;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    margin-bottom : 15px;
}


.field-error {
    color: #e11d48;
    font-size: 12px;
    margin-bottom: 6px;
    display: block;
}


.error-text {
    color: #ff0000;
    font-size: 13px;
    margin-top: 5px;
    display: block;
}


.comparison-wrapper {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
    font-family: "Segoe UI", Arial, sans-serif;
}

.comparison-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #0b3b66;
    margin-bottom: 15px;
}

/* Main Table Box */
.comparison-table {
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

/* Header */
.table-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #eaf6ff;
    font-weight: 700;
    font-size: 18px;
    color: #2b2b2b;
}

    .table-header div {
        padding: 18px 25px;
        border-right: 1px solid #dcdcdc;
        text-align: center;
    }

        .table-header div:last-child {
            border-right: none;
        }

/* Rows */
.table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e0e0e0;
}

    .table-row div {
        padding: 18px 25px;
        font-size: 16px;
        color: #444;
        border-right: 1px solid #e0e0e0;
        line-height: 1.6;
    }

        .table-row div:last-child {
            border-right: none;
        }

/* Responsive */
@media (max-width: 768px) {
    .table-header, .table-row {
        grid-template-columns: 1fr;
    }

        .table-header div,
        .table-row div {
            border-right: none;
            border-bottom: 1px solid #e0e0e0;
            text-align: left;
        }

        .table-header div {
            text-align: center;
        }
}


.payment-section {
    padding: 40px 20px;
    
    text-align: center;
}

/* Title */
.payment-title {
    font-size: 44px;
    font-weight: 800;
    color: #000;
    margin-bottom: 10px;
}

.payment-subtitle {
    max-width: 900px;
    margin: 0 auto 60px;
    font-size: 19px;
    color: #555;
    line-height: 1.6;
}

/* Grid */
.payment-grid {
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 0px;
}

/* Card */
.payment-card {
    background: #fff;
    padding: 40px 35px;
    text-align: left;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    position: relative;
}

/* Blue Border */
.payment-card.blue {
    border: 5px solid #007bff;
}

/* Green Border */
.payment-card.green {
    border: 5px solid #c6f330;
}

/* Headings */
.payment-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

/* Paragraph */
.payment-card p {
    font-size: 18px;
    line-height: 1.7;
    color: black;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .payment-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .payment-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .payment-title {
        font-size: 32px;
    }

    .payment-card {
        padding: 30px 25px;
    }
}


.exit-pathways {
    padding: 10px 20px;
}

.container {
    max-width: 1200px;
    margin: auto;
}

/* TABLE */
.exit-table {
    background: #043a73;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.35);
}

/* HEADER */
.table-header {
    display: grid;
    grid-template-columns: 220px 1fr 320px;
    background: #054b92;
    color: #ffffff;
    font-weight: 700;
}

    .table-header div {
        padding: 20px;
        border-right: 1px solid rgba(255,255,255,0.35);
    }

        .table-header div:last-child {
            border-right: none;
        }

/* ROWS */
.table-row {
    display: grid;
    grid-template-columns: 220px 1fr 320px;
    color: #ffffff;
}

    .table-row .col {
        padding: 26px 20px;
        border-top: 1px solid rgba(255,255,255,0.35);
        border-right: 1px solid rgba(255,255,255,0.35);
    }

        .table-row .col:last-child {
            border-right: none;
        }

    /* TEXT */
    .table-row strong {
        color: #ffffff;
    }

/* BADGES */
.badge {
    display: inline-block;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 700;
    color: #ffffff;
    font-size: 15px;
}

    .badge.blue {
        background: #00aaff;
    }

    .badge.green {
        background: #2ecc71;
    }

    .badge.orange {
        background: #ffa144;
    }

    .badge.red {
        background: #ff5c5c;
    }

/* RESPONSIVE */
@media (max-width: 992px) {
    .table-header {
        display: none;
    }

    .table-row {
        grid-template-columns: 1fr;
    }

        .table-row .col {
            border-right: none;
        }
}


/* BULLET LIST */
.research-listing {
    list-style: none;
    padding-left: 0;
    margin-top: 20px;
}

    .research-listing li {
        position: relative;
        padding-left: 28px;
        margin-bottom: 8px;
        font-size: 18px;
        color: white;
    }

        /* BLUE DIAMOND BULLET */
        .research-listing li::before {
            content: "◆";
/*            position: absolute;*/
            left: 0;
            top: 2px;
            color: #1f6fe5;
            font-size: 14px;
            padding-right : 8px;
        }


        .university-erp-img{
            padding : 10px;
            border-radius : 10px;
       }


/* SECTION WRAPPER */
.partner-showcase-section {
    padding: 80px 20px;
}

/* CONTAINER */
.partner-showcase-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 40px;
    align-items: stretch;
}

/* LEFT COLUMN */
.partner-showcase-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* LOGO GRID */
.partner-showcase-logos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 1px solid #e6e6e6;
}

.partner-showcase-logo-item {
    border: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow: hidden;
}

    .partner-showcase-logo-item img {
        max-width: 150px;
        transition: transform 0.4s ease;
    }

    .partner-showcase-logo-item:hover img {
        transform: scale(1.15);
    }

/* SEE MORE */
.partner-showcase-more-wrap {
    text-align: center;
    margin-top: 25px;
}

.partner-showcase-more-btn {
    padding: 10px 32px;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    display: inline-block;
    background: #2f6fff;
    transform: perspective(0) translateZ(0);
    transition: all 0.3s ease;
}

    .partner-showcase-more-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(66, 185, 255, 0.35);
    }

/* RIGHT CONTENT */
.partner-showcase-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.partner-showcase-subtitle {
    display: inline-block;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    padding-left: 50px;
}

    .partner-showcase-subtitle::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 40px;
        height: 1px;
        background: #000;
    }

.partner-showcase-content h2 {
    font-size: 3.7rem;
    line-height: 1.3;
    margin-bottom: 20px;
    font-weight: 600;
}

    .partner-showcase-content h2 span {
        color: #2f6fff;
    }

.partner-showcase-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

/* PRIMARY BUTTON */
.partner-showcase-primary-btn {
    display: inline-block;
    background: #2f6fff;
    color: #fff;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 16px;
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s ease;
}

    .partner-showcase-primary-btn:hover {
        box-shadow: 0 8px 20px rgba(66, 185, 255, 0.35);
    }

/* RESPONSIVE */
@media (max-width: 992px) {
    .partner-showcase-container {
        flex-direction: column;
    }
}


.collab-slide {
    @apply relative overflow-hidden rounded-[26px] sm:rounded-[32px] md:rounded-[40px] border-4 border-gray-300 shadow-xl;
    height: 220px;
}


@media (min-width: 640px) {
    .collab-slide {
        height: 300px;
    }
}

@media (min-width: 768px) {
    .collab-slide {
        height: 420px;
    }
}

@media (min-width: 1024px) {
    .collab-slide {
        height: 750px;
    }
}



.collab-slide img {
    @apply w-full h-full object-cover;
    border-radius: 18px;
}


.school-erp-section {
    position: relative;
    padding: 80px 10px;
    background: url("/images/our-services/Features_bg_img.webp") center/cover no-repeat;
    overflow: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Overlay */
.school-erp-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(6, 20, 45, 0.57) 50%,
    rgba(0, 0, 0, 0.60) 100%
  );
  z-index: 1;
  }

/* Content */
.school-erp-content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  color: #e5e7eb;
}

.school-erp-title {
  font-size: 3.5rem;
  font-weight: 600;
  color: #3b82f6;
/*  margin-bottom: 10px;*/
}

.school-erp-subtitle {
  font-size: 2.5rem;
  font-weight: 600;
  color: #3b82f6;
  margin: 55px 0 28px;
}

.school-erp-desc {
  font-size: 18px;
  line-height: 1.9;
/*  margin-bottom: 10px;*/
}

.school-erp-desc strong {
  color: #ffffff;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .school-erp-section {
    padding: 80px 16px;
  }

  .school-erp-title {
    font-size: 28px;
  }

  .school-erp-subtitle {
    font-size: 26px;
  }

  .school-erp-desc {
    font-size: 15px;
  }
}


/*.erp-compare-section {
    padding: 60px 15px;*/
/*    background: #fff;*/
/*}

.erp-compare-wrapper {
    max-width: 1200px;
    margin: auto;
    overflow-x: auto;
}*/

/* TABLE BASE */
/*.erp-compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: inherit;
}*/

    /* HEADER */
    /*.erp-compare-table thead th {
        background: #1f4f7d;
        color: #fff;
        font-size: 26px;
        font-weight: 600;
        padding: 22px 20px;
        text-align: center;
        border-right: 4px solid #fff;
    }

        .erp-compare-table thead th:last-child {
            border-right: none;
        }*/

    /* BODY CELLS */
    /*.erp-compare-table tbody td {
        padding: 20px 18px;
        font-size: 20px;
        text-align: center;
        border-right: 4px solid #e6e6e6;
        border-bottom: 4px solid #e6e6e6;
        transition: all 0.3s ease;
    }*/

        /* FEATURE COLUMN */
        /*.erp-compare-table tbody td:first-child {
            font-weight: 600;
        }*/

    /* STRIPED ROWS (MATCH SCREENSHOT STYLE) */
    /*.erp-compare-table tbody tr:nth-child(odd) td {
        background: #0f3f66;
        color: #fff;
    }

    .erp-compare-table tbody tr:nth-child(even) td {
        background: #ffffff;
        color: #2f6fff;
    }*/

 
    /* REMOVE LAST BORDERS */
    /*.erp-compare-table tbody td:last-child {
        border-right: none;
    }*/

/* RESPONSIVE */
/*@media (max-width: 992px) {
    .erp-compare-table thead th {
        font-size: 20px;
    }

    .erp-compare-table tbody td {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .erp-compare-wrapper {
        overflow-x: auto;
    }

    .erp-compare-table {
        min-width: 800px;
    }
}


.comparision-table-font {
    font-family: Montserrat , sans-serif;
}*/

.empowering-education-bg-img {
    background-image: url('/images/atms-bg-img.png');
    background-repeat: repeat;
}


.mobile-nav-menu {
    max-height: 80vh; /* allows reaching last items */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


.training-desc-text {
    color: #ffffff !important;
}


.header-logo-width{
    width : 11rem;
}

/* Custom Blog Sidebar Layout */
.blog-detail-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}
.blog-detail-content {
    flex: 1 1 65%;
    max-width: 100%;
}
.blog-detail-sidebar {
    flex: 1 1 30%;
    max-width: 100%;
}
@media (max-width: 1024px) {
    .blog-detail-content, .blog-detail-sidebar {
        flex: 1 1 100%;
    }
}


.blog-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.blog-main {
    width: 60%;
}

.blog-sidebar {
    width: 40%;
}

/* Tablet */
@media (max-width:1024px) {
    .blog-layout {
        flex-direction: column;
    }

    .blog-main,
    .blog-sidebar {
        width: 100%;
    }
}

.blog-sidebar {
    width: 65%;
    position: sticky;
    top: 100px;
}


/* Footer Layout */
.blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-top: 1px solid #eee;
    background: #f9fafb;
    flex-wrap: wrap;
    gap: 15px;
}

/* Tags */
.blog-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tag-title {
    font-weight: 600;
    color: #444;
}

/* Share section */
.blog-share {
    display: flex;
    align-items: center;
    gap: 12px;
}

.share-title {
    font-weight: 600;
    color: #444;
}

/* Share Icons */
.share-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #ddd;
    color: #555;
    background: #fff;
    font-size: 16px;
    transition: all .3s ease;
}

    /* Hover Effects */
    .share-icon:hover {
        transform: translateY(-3px);
        color: #fff;
    }

    /* Brand Colors */
    .share-icon.linkedin:hover {
        background: #0A66C2;
        border-color: #0A66C2;
    }

    .share-icon.twitter:hover {
        background: #1DA1F2;
        border-color: #1DA1F2;
    }

    .share-icon.facebook:hover {
        background: #1877F2;
        border-color: #1877F2;
    }


/* Blog content base */
.blog-content {
    font-size: 16px;
    line-height: 1.7;
    color: #374151;
}

   

    /* Main section headings */
    .blog-content h2 {
        font-size: 28px;
        font-weight: 600;
        margin-top: 2px;
        margin-bottom: 20px;
        padding-bottom: 8px;
        border-bottom: 2px solid #2563eb;
        color: #003366;
        font-family: Barlow;
    }

    /* Sub headings */
    .blog-content h3 {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 12px;
    }

        /* Feature card style (like screenshot) */
        .blog-content h3 + p,
        .blog-content h3 + ul {
            background: #eef2f7;
            padding: 20px 24px;
            border-left: 4px solid #2563eb;
            border-radius: 10px;
/*            margin-bottom: 28px;*/
            transition: all .25s ease;
        }

            /* Hover animation */
            .blog-content h3 + p:hover,
            .blog-content h3 + ul:hover {
                transform: translateY(-4px);
                box-shadow: 0 10px 20px rgba(0,0,0,0.08);
            }

   
    /* Lists */
    .blog-content ul {
        padding-left: 22px;
    }

      

    /* Blue info section */
    .blog-content blockquote {
        background: #1e64b7;
        color: white;
        padding: 30px;
        border-radius: 12px;
        margin: 30px 0;
    }

    /* Center final section */
    .blog-content h4 {
        text-align: center;
        font-size: 26px;
        margin-top: 40px;
    }


    .blog-content ul {
        list-style: none;
        padding-left: 0;
        margin: 20px 0;
        background: #eef2f7;
        padding: 10px 15px;
        border-radius: 10px;
        box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    }

        .blog-content ul li {
            position: relative;
            padding-left: 28px;
            margin-bottom: 2px;
            font-size: 16px;
        }

            /* Arrow icon */
            .blog-content ul li::before {
                content: "→";
                position: absolute;
                left: 0;
                color: #2563eb;
                font-weight: bold;
            }

    .blog-content ol {
        list-style: decimal;
        padding-left: 25px;
        margin: 20px 0;
        background: #eef2f7;
        padding: 25px 30px 25px 45px;
        border-radius: 10px;
        box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    }

        .blog-content ol li {
            margin-bottom: 12px;
            font-size: 18px;
        }




/* CARD DESIGN (same shadow effect) */
.sidebar-card {
    background: #fff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

   

/* TITLE */
.sidebar-title {
    font-size: 24px;
    font-weight: 700;
    border-bottom: 3px solid #3b82f6;
    display: inline-block;
    padding-bottom: 6px;
    margin-bottom: 14px;
}

/* RECENT POST ITEM */
.recent-post-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

/* IMAGE */
.recent-post-img img {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    object-fit: cover;
}

/* CONTENT */
.recent-post-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 5px;
}

/* DATE */
.recent-post-date {
    font-size: 14px;
    color: #6b7280;
}

/* TAG DESIGN */
.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

    .tags-list span {
        padding: 6px 14px;
        border-radius: 20px;
        border: 1px solid #d1d5db;
        font-size: 15px;
/*        color: #2563eb;*/
        text-decoration: none;
        transition: 0.3s;
    }

       

/* MOBILE RESPONSIVE */
@media(max-width:768px) {

    .blog-sidebar {
        width: 100%;
        padding: 0 10px;
    }

    .sidebar-card {
        width: 100%;
        padding: 20px;
    }

    .recent-post-item {
        gap: 12px;
    }

    .recent-post-img img {
        width: 60px;
        height: 60px;
    }
}

/*Success popup Css */

.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.popup-hidden {
    display: none;
}

.popup-card {
    background: #fff;
    width: 440px;
    text-align: center;
    border-radius: 14px;
    padding: 15px 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    animation: popupScale .3s ease;
}

@keyframes popupScale {
    from {
        transform: scale(.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.popup-icon {
    font-size: 60px;
    margin-bottom: 0px;
}

.popup-success {
    color: #2ca24c;
}

.popup-error {
    color: #e53935;
}

.popup-card h2 {
    font-size: 25px;
    margin-bottom: 10px;
    font-weight : 700;
}

.popup-card p {
    color: black;
    font-size: 18px;
    margin-bottom: 20px;
}

.popup-card button {
    padding: 10px 25px;
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
}

.btn-success {
    background: #1b3b6f;
}

.btn-error {
    background: #e53935;
}


.core-card {
    @apply bg-[#F3F3F3] rounded-3xl p-6 cursor-pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    /* IMPORTANT for smoothness */
    transition: box-shadow 0.35s ease, transform 0.35s ease;
    will-change: transform, box-shadow;
    padding: 30px;
    border-radius: 20px;
    background-color : white;
}

    .core-card:hover {
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
        transform: translateY(-6px);
    }