/**,:after,:before{--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:rgba(59,130,246,.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:rgba(59,130,246,.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*//**,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[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}}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.bottom-6{bottom:1.5rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.right-6{right:1.5rem}.top-0{top:0}.top-1\/2{top:50%}.top-24{top:6rem}.top-4{top:1rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[9998\]{z-index:9998}.z-\[9999\]{z-index:9999}.m-0{margin:0}.m-2{margin:.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:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-20{margin-bottom:5rem}.mb-3{margin-bottom:.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:.25rem}.mt-10{margin-top:2.5rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-60{margin-top:15rem}.mt-8{margin-top:2rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.table-row{display:table-row}.grid{display:grid}.hidden{display:none}.h-12{height:3rem}.h-14{height:3.5rem}.h-20{height:5rem}.h-28{height:7rem}.h-3{height:.75rem}.h-4{height:1rem}.h-48{height:12rem}.h-64{height:16rem}.h-8{height:2rem}.h-\[14rem\]{height:14rem}.h-\[16rem\]{height:16rem}.h-\[18rem\]{height:18rem}.h-\[200px\]{height:200px}.h-\[20rem\]{height:20rem}.h-\[250px\]{height:250px}.h-\[450px\]{height:450px}.h-\[4px\]{height:4px}.h-\[6rem\]{height:6rem}.h-full{height:100%}.h-max{height:-moz-max-content;height:max-content}.max-h-\[520px\]{max-height:520px}.min-h-\[210px\]{min-height:210px}.min-h-\[260px\]{min-height:260px}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-2\/3{width:66.666667%}.w-20{width:5rem}.w-28{width:7rem}.w-3\/4{width:75%}.w-48{width:12rem}.w-5\/6{width:83.333333%}.w-60{width:15rem}.w-72{width:18rem}.w-8{width:2rem}.w-\[1px\]{width:1px}.w-\[320px\]{width:320px}.w-full{width:100%}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-7xl{max-width:80rem}.max-w-md{max-width:28rem}.max-w-none{max-width:none}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{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%}.translate-y-2{--tw-translate-y:0.5rem}.translate-y-2,.translate-y-4{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{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))}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overscroll-contain{overscroll-behavior:contain}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\[28px\]{border-radius:28px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-l-xl{border-top-left-radius:.75rem;border-bottom-left-radius:.75rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-none{border-style:none}.border-\[\#577cb7\]{--tw-border-opacity:1;border-color:rgb(87 124 183/var(--tw-border-opacity,1))}.border-\[\#7bdcb5\]{--tw-border-opacity:1;border-color:rgb(123 220 181/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-100{--tw-border-opacity:1;border-color:rgb(219 234 254/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-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-blue-500{--tw-border-opacity:1;border-color:rgb(59 130 246/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-100{--tw-border-opacity:1;border-color:rgb(243 244 246/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-purple-400{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.border-white\/20{border-color:hsla(0,0%,100%,.2)}.border-white\/60{border-color:hsla(0,0%,100%,.6)}.border-white\/70{border-color:hsla(0,0%,100%,.7)}.bg-\[\#001137\]{--tw-bg-opacity:1;background-color:rgb(0 17 55/var(--tw-bg-opacity,1))}.bg-\[\#010F31\],.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-\[\#020E2A\]{--tw-bg-opacity:1;background-color:rgb(2 14 42/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-\[\#0f4dcf\]{--tw-bg-opacity:1;background-color:rgb(15 77 207/var(--tw-bg-opacity,1))}.bg-\[\#25D366\]{--tw-bg-opacity:1;background-color:rgb(37 211 102/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-\[\#6C5CE7\]{--tw-bg-opacity:1;background-color:rgb(108 92 231/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-\[\#EEF5FB\]{--tw-bg-opacity:1;background-color:rgb(238 245 251/var(--tw-bg-opacity,1))}.bg-\[\#F2F7FF\]{--tw-bg-opacity:1;background-color:rgb(242 247 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-\[\#e6f0ff\]{--tw-bg-opacity:1;background-color:rgb(230 240 255/var(--tw-bg-opacity,1))}.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-\[\#f5f7ff\]{--tw-bg-opacity:1;background-color:rgb(245 247 255/var(--tw-bg-opacity,1))}.bg-\[\#f5f8ff\]{--tw-bg-opacity:1;background-color:rgb(245 248 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:rgba(0,0,0,.2)}.bg-black\/40{background-color:rgba(0,0,0,.4)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-blue-900\/40{background-color:rgba(30,58,138,.4)}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/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-\[url\(\'\~\/images\/header-bg-img\.png\'\)\]{background-image:url(~/images/header-bg-img.png)}.bg-\[url\(\'\~\/images\/pattern\.png\'\)\]{background-image:url(~/images/pattern.png)}.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.from-black\/40{--tw-gradient-from:rgba(0,0,0,.4) var(--tw-gradient-from-position);--tw-gradient-to:transparent var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.bg-center{background-position:50%}.bg-repeat{background-repeat:repeat}.bg-repeat-x{background-repeat:repeat-x}.object-cover{-o-object-fit:cover;object-fit:cover}.object-fill{-o-object-fit:fill;object-fit:fill}.p-0{padding:0}.p-10{padding:2.5rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.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:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.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:.25rem;padding-bottom:.25rem}.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:.5rem;padding-bottom:.5rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-3{padding-top:.75rem;padding-bottom:.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}.pb-10{padding-bottom:2.5rem}.pb-12{padding-bottom:3rem}.pb-2{padding-bottom:.5rem}.pb-20{padding-bottom:5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-1{padding-left:.25rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-6{padding-left:1.5rem}.pt-1{padding-top:.25rem}.pt-10{padding-top:2.5rem}.pt-12{padding-top:3rem}.pt-2{padding-top:.5rem}.pt-20{padding-top:5rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.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-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[26px\]{font-size:26px}.text-\[28px\]{font-size:28px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.italic{font-style:italic}.leading-6{line-height:1.5rem}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.text-\[\#00264d\]{--tw-text-opacity:1;color:rgb(0 38 77/var(--tw-text-opacity,1))}.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-\[\#0057FF\]{--tw-text-opacity:1;color:rgb(0 87 255/var(--tw-text-opacity,1))}.text-\[\#010F31\]{--tw-text-opacity:1;color:rgb(1 15 49/var(--tw-text-opacity,1))}.text-\[\#06376F\]{--tw-text-opacity:1;color:rgb(6 55 111/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-\[\#2d80bf\]{--tw-text-opacity:1;color:rgb(45 128 191/var(--tw-text-opacity,1))}.text-\[\#314d8b\]{--tw-text-opacity:1;color:rgb(49 77 139/var(--tw-text-opacity,1))}.text-\[\#3771BC\],.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-\[\#6C5CE7\]{--tw-text-opacity:1;color:rgb(108 92 231/var(--tw-text-opacity,1))}.text-\[\#e63946\]{--tw-text-opacity:1;color:rgb(230 57 70/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-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/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-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-purple-500{--tw-text-opacity:1;color:rgb(168 85 247/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-80{opacity:.8}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[0_12px_30px_rgba\(0\2c 0\2c 0\2c 0\.14\)\]{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,.14);--tw-shadow-colored:0 12px 30px var(--tw-shadow-color)}.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,.55),-20px 0 35px -10px rgba(114,122,246,.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,.55),20px 0 35px -10px rgba(114,122,246,.55),-20px 0 35px -10px rgba(114,122,246,.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_5px_25px_rgba\(0\2c 0\2c 0\2c 0\.08\)\]{--tw-shadow:0 5px 25px rgba(0,0,0,.08);--tw-shadow-colored:0 5px 25px 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,.55);--tw-shadow-colored:20px 0 35px -10px var(--tw-shadow-color)}.shadow-\[20px_0_35px_-10px_rgba\(114\2c 122\2c 246\2c 0\.55\)\],.shadow-lg{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 rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{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 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(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{outline-style:solid}.brightness-75{--tw-brightness:brightness(.75)}.brightness-75,.drop-shadow-lg{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)}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgba(0,0,0,.04)) drop-shadow(0 4px 3px rgba(0,0,0,.1))}.drop-shadow-md{--tw-drop-shadow:drop-shadow(0 4px 3px rgba(0,0,0,.07)) drop-shadow(0 2px 2px rgba(0,0,0,.06))}.drop-shadow-md,.drop-shadow-xl{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)}.drop-shadow-xl{--tw-drop-shadow:drop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08))}.filter{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-blur-lg,.backdrop-blur-sm{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)}.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(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-none{transition-property:none}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\:-translate-y-1:hover{--tw-translate-y:-0.25rem}.hover\:-translate-y-1:hover,.hover\:scale-105:hover{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\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-110:hover{--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))}.hover\:border-blue-50:hover{--tw-border-opacity:1;border-color:rgb(239 246 255/var(--tw-border-opacity,1))}.hover\:bg-\[\#061b4f\]:hover{--tw-bg-opacity:1;background-color:rgb(6 27 79/var(--tw-bg-opacity,1))}.hover\:bg-\[\#5a4dd6\]:hover{--tw-bg-opacity:1;background-color:rgb(90 77 214/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/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\: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\:text-\[\#3785BC\]:hover{--tw-text-opacity:1;color:rgb(55 133 188/var(--tw-text-opacity,1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/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-blue-700:hover{--tw-text-opacity:1;color:rgb(29 78 216/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\:underline:hover{text-decoration-line:underline}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.hover\:shadow-2xl:hover,.hover\:shadow-\[0_10px_45px_rgba\(0\2c 0\2c 0\2c 0\.20\)\]:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-\[0_10px_45px_rgba\(0\2c 0\2c 0\2c 0\.20\)\]:hover{--tw-shadow:0 10px 45px rgba(0,0,0,.2);--tw-shadow-colored:0 10px 45px var(--tw-shadow-color)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:shadow-lg:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(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\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.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\:translate-y-0{--tw-translate-y:0px}.group:hover .group-hover\:scale-105,.group:hover .group-hover\:translate-y-0{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-105{--tw-scale-x:1.05;--tw-scale-y:1.05}.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:rgba(0,0,0,.7)}.group:hover .group-hover\:text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:mb-8{margin-bottom:2rem}.sm\:h-10{height:2.5rem}.sm\:h-\[350px\]{height:350px}.sm\:w-10{width:2.5rem}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:gap-6{gap:1.5rem}.sm\:space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:pb-6{padding-bottom:1.5rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:768px){.md\:mt-0{margin-top:0}.md\:inline{display:inline}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-\[250px\]{height:250px}.md\:h-\[37rem\]{height:37rem}.md\:h-\[420px\]{height:420px}.md\:h-\[450px\]{height:450px}.md\:w-1\/2{width:50%}.md\:w-\[420px\]{width:420px}.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\:justify-end{justify-content:flex-end}.md\:gap-10{gap:2.5rem}.md\:rounded-2xl{border-radius:1rem}.md\:rounded-3xl{border-radius:1.5rem}.md\:p-10{padding:2.5rem}.md\:p-12{padding:3rem}.md\:p-14{padding:3.5rem}.md\:p-4{padding:1rem}.md\:p-6{padding:1.5rem}.md\:p-8{padding:2rem}.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-2{padding-top:.5rem;padding-bottom:.5rem}.md\:py-20{padding-top:5rem;padding-bottom:5rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:py-5{padding-top:1.25rem;padding-bottom:1.25rem}.md\:pl-12{padding-left:3rem}.md\:text-left{text-align:left}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.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-\[18px\]{font-size:18px}.md\:text-\[2\.4rem\]{font-size:2.4rem}.md\:text-\[2\.5rem\]{font-size:2.5rem}.md\:text-\[2\.6rem\]{font-size:2.6rem}.md\:text-\[20px\]{font-size:20px}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-lg{font-size:1.125rem;line-height:1.75rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:text-xs{font-size:.75rem;line-height:1rem}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-24{top:6rem}.lg\:col-span-8{grid-column:span 8/span 8}.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 .4fr}.lg\:gap-16{gap:4rem}.lg\:px-20{padding-left:5rem;padding-right:5rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-left{text-align:left}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-sm{font-size:.875rem;line-height:1.25rem}}@media (min-width:1280px){.xl\:col-span-9{grid-column:span 9/span 9}.xl\:h-\[500px\]{height:500px}.xl\:text-4xl{font-size:2.25rem;line-height:2.5rem}}*/




*, ::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;
    border-radius: 15px;
}

.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.webp');
}

.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);
    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;
}

/* For screens >= 1440px */
@media (min-width: 1930px) {
    .whatsapp-tab {
        top: calc(30% + 136px);
    }
}

/* 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: 15px;
    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);
    }
/* ========================================= */
/* CYBORG PREMIUM CONTACT CSS EXTENSION      */
/* ========================================= */
.cyborg-premium-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    position: fixed;
    right: 0;
    top: 28%;
    z-index: 9999;
}

.cyborg-premium-enquiry {
    background: linear-gradient(to bottom, #6b47ed, #5130c9);
    color: white;
    width: 46px;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    box-shadow: -4px 0px 20px rgba(107, 71, 237, 0.35);
    transition: all 0.3s ease;
    z-index: 10;
    position: relative;
}

    .cyborg-premium-enquiry:hover {
        box-shadow: -8px 0px 25px rgba(107, 71, 237, 0.5);
        transform: translateX(-4px);
    }

.cyborg-premium-vertical-text {
    transform: rotate(180deg);
    white-space: nowrap;
    margin-bottom: 1.25rem;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f5f3ff;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transition: color 0.3s ease;
}

.cyborg-premium-enquiry:hover .cyborg-premium-vertical-text {
    color: white;
}

.cyborg-premium-wa-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cyborg-premium-wa-link {
    background: linear-gradient(to right, #25d366, #1ebe5a);
    color: white;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-top-left-radius: 0.75rem;
    border-bottom-left-radius: 0.75rem;
    box-shadow: -4px 0 20px rgba(37, 211, 102, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 46px;
    height: 46px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

    .cyborg-premium-wa-link:hover {
        width: 145px;
        transform: translateX(-4px);
        box-shadow: -8px 0 25px rgba(37, 211, 102, 0.5);
    }

.cyborg-premium-wa-text {
    position: absolute;
    left: 1rem;
    white-space: nowrap;
    font-weight: 700;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
    letter-spacing: 0.025em;
    color: #f0fdf4;
}

.cyborg-premium-wa-link:hover .cyborg-premium-wa-text {
    opacity: 1;
}

.cyborg-premium-wa-icon {
    position: absolute;
    right: 10px;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
    transition: transform 0.3s ease;
}

.cyborg-premium-wa-link:hover .cyborg-premium-wa-icon {
    transform: scale(1.1);
}

.cyborg-premium-panel {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 1rem;
    box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(243, 244, 246, 0.6);
    padding: 1.75rem;
    width: 360px;
    right: calc(100% + 2px);
    position: absolute;
    top: -30px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

    .cyborg-premium-enquiry:hover ~ .cyborg-premium-panel,
    .cyborg-premium-panel:hover,
    .cyborg-premium-panel.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

.cyborg-premium-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.cyborg-premium-title {
    color: #1a1a1a;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
}

.cyborg-premium-subtitle {
    color: #6b7280;
    font-size: 0.875rem;
    margin-top: 0.375rem;
    font-weight: 500;
    margin-bottom: 0;
}

.cyborg-premium-close {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgba(243, 244, 246, 0.8);
    color: #6b7280;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .cyborg-premium-close:hover {
        background-color: #e5e7eb;
        color: #111827;
    }

.cyborg-premium-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cyborg-premium-input {
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    outline: none;
    font-size: 14.5px;
    color: #1f2937;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

    .cyborg-premium-input::placeholder {
        color: #9ca3af;
    }

    .cyborg-premium-input:focus {
        border-color: #795ceb;
        box-shadow: 0 0 0 4px rgba(121, 92, 235, 0.15);
    }

.cyborg-premium-textarea {
    resize: none;
    font-family: inherit;
}

.cyborg-premium-submit {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: linear-gradient(to right, #6b47ed, #8c67ef);
    color: white;
    font-weight: 700;
    border-radius: 0.75rem;
    padding: 0.875rem;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
    transition: all 0.3s ease;
}

    .cyborg-premium-submit:hover {
        box-shadow: 0 8px 20px rgba(107, 71, 237, 0.35);
    }

.cyborg-premium-submit-text {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.3s ease;
}

.cyborg-premium-submit:hover .cyborg-premium-submit-text {
    transform: scale(1.05);
}

.cyborg-premium-submit-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}

.cyborg-premium-submit:hover .cyborg-premium-submit-overlay {
    transform: translateY(0);
}

.cyborg-premium-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cyborg-premium-footer-text {
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.cyborg-premium-footer-wa {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: rgba(37, 211, 102, 0.1);
    color: #1bae4e;
    font-weight: 700;
    padding: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(37, 211, 102, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

    .cyborg-premium-footer-wa:hover {
        background-color: #25d366;
        color: white;
        border-color: transparent;
    }


.core-module-color {
    color: white;
}



/* SECTION BASE */
.rb-section {
    /*    background: linear-gradient(135deg, #eef2ff, #f8fbff);*/
    padding: 0px 20px;
    font-family: 'Segoe UI', sans-serif;
}

.rb-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

/* CARD */
.rb-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 35px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}

    /* Gradient border glow */
    .rb-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        padding: 1px;
        background: linear-gradient(120deg, #4f7cff, #00c6ff, #7b61ff);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: 0.4s;
    }

    .rb-card:hover::before {
        opacity: 1;
    }

    /* Hover effect */
    .rb-card:hover {
        transform: translateY(-8px) scale(1.01);
        box-shadow: 0 20px 40px rgba(79, 124, 255, 0.15);
    }

/* TITLE */
.rb-title {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    background: linear-gradient(90deg, #2c5aa0, #4f7cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TEXT */
.rb-text {
    text-align: center;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.7;
    font-size: 15px;
}

/* LIST */
.rb-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 12px;
}

    .rb-list li {
        position: relative;
        padding-left: 28px;
        color: #333;
        transition: 0.3s;
    }

        /* Custom bullet */
        .rb-list li::before {
            content: "✔";
            position: absolute;
            left: 0;
            top: 0;
            color: #4f7cff;
            font-weight: bold;
        }

        /* Hover */
        .rb-list li:hover {
            transform: translateX(6px);
            color: #2c5aa0;
        }

/* GRID (SECTION 2) */
.rb-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    padding: 0;
}

    .rb-grid li {
        background: linear-gradient(135deg, #f1f5ff, #e6edff);
        padding: 18px;
        border-radius: 12px;
        text-align: center;
        font-weight: 500;
        transition: all 0.3s ease;
        border: 1px solid transparent;
    }

        .rb-grid li:hover {
            background: white;
            border: 1px solid #4f7cff;
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(79, 124, 255, 0.2);
        }

/* HIGHLIGHT SECTION */
.rb-highlight {
    background: linear-gradient(135deg, #2c5aa0, #4f7cff, #00c6ff);
    color: white;
    position: relative;
    overflow: hidden;
}

    /* Glow animation */
    .rb-highlight::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        top: -50%;
        left: -50%;
        background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
        animation: glowMove 6s linear infinite;
    }

@keyframes glowMove {
    0% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(25%,25%);
    }

    100% {
        transform: translate(0,0);
    }
}

/* WHITE TEXT */
.white {
    color: white !important;
    -webkit-text-fill-color: white !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .rb-title {
        font-size: 22px;
    }

    .rb-card {
        padding: 22px;
    }
}


/* SECTION BACKGROUND */
.contact-section {
    background: #f4f7fb;
}

/* CARD BASE */
.card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
}

    .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

/* IMAGE CARD */
.image-card {
    position: relative;
    background: #000;
}

    .image-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.5s;
    }

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

.image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.2));
}

.image-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
}

/* MAP CARD */
.map-card iframe {
    width: 100%;
    height: 100%;
    min-height: 350px;
    border: none;
}

/* CONTACT CARD */
.contact-card {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* EMAIL CARD */
.email-card {
    background: linear-gradient(135deg, #7c3aed, #1e3a8a);
    color: #fff;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ICON STYLE */
.icon-box {
    background: rgba(255,255,255,0.2);
    padding: 15px;
    border-radius: 50%;
    font-size: 22px;
}

/* TEXT */
.card h2 {
    margin-bottom: 8px;
    font-size: 20px;
}

.card p {
    margin: 2px 0;
    opacity: 0.9;
}



/* ===========================
   logo-story.css
   Cyborg ERP – Logo Story Page
   =========================== */

/* ---- CSS VARIABLES ---- */
/*:root {
  --blue-dark:   #0d1f3c;
  --blue-mid:    #1a3a6e;
  --blue-bright: #0d5db5;
  --cyan:        #00c9c9;
  --cyan-light:  #00eaff;
  --green:       #00b057;
  --green-light: #00e07a;
  --white:       #ffffff;
  --off-white:   #f0f6ff;
  --text-body:   #cbd8f0;
  --text-muted:  #7ba7e0;
  --bg-deep:     #060f1e;
  --bg-card:     #0d1e3a;
  --border-card: rgba(0, 201, 201, 0.12);
  --font-display: 'Rajdhani', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --radius:       14px;
  --shadow-card:  0 4px 32px rgba(0,0,0,0.45);
}*/

/* ---- RESET ---- */
/**, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-deep);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; }*/

/* ---- UTILITY ---- */
/*.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.c-blue  { color: var(--blue-bright); }
.c-cyan  { color: var(--cyan); }
.c-green { color: var(--green-light); }*/

/* ============================================================
   NAVBAR
   ============================================================ */
/*.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 15, 30, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,201,201,0.10);
}
.nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-logo-img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid var(--cyan);
}
.nav-brand-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
}
.nav-brand-accent { color: var(--cyan); }
.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s;
  letter-spacing: 0.02em;
}
.nav-links a:hover { color: var(--cyan); }
.btn-demo {
  margin-left: 12px;
  padding: 8px 20px;
  border-radius: 30px;
  border: 1.5px solid var(--cyan);
  color: var(--cyan);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn-demo:hover { background: var(--cyan); color: var(--bg-deep); }*/

/* ============================================================
   HERO
   ============================================================ */
/*.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 80px 60px 60px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 75% 50%, rgba(0,201,201,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 70% at 15% 40%, rgba(26,58,110,0.35) 0%, transparent 70%),
    var(--bg-deep);
}
.hero-bg-lines {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,201,201,0.025) 0px, transparent 1px, transparent 60px),
    repeating-linear-gradient(90deg, rgba(0,201,201,0.025) 0px, transparent 1px, transparent 60px);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 580px;
}
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(0,201,201,0.08);
  border: 1px solid rgba(0,201,201,0.25);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 22px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--white);
  letter-spacing: 0.01em;
}
.hero-title-italic {
  font-style: italic;
  background: linear-gradient(90deg, var(--cyan), var(--green-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  margin-top: 20px;
  font-size: 1.1rem;
  color: var(--text-muted);
  font-weight: 300;
  letter-spacing: 0.01em;
}
.hero-logo-wrap {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.hero-logo-glow {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,201,201,0.18) 0%, transparent 70%);
  animation: pulseGlow 3.5s ease-in-out infinite;
  pointer-events: none;
}
.hero-logo-img {
  width: 300px;
  height: 300px;
  border-radius: 24px;
  border: 2px solid rgba(0,201,201,0.25);
  box-shadow: 0 0 60px rgba(0,201,201,0.12);
  object-fit: cover;
}
@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.06); }
}*/

/* ============================================================
   INTRO QUOTE SECTION
   ============================================================ */
/*.intro-quote-section {
  padding: 80px 0 60px;
  border-top: 1px solid rgba(0,201,201,0.08);
}
.intro-lead {
  text-align: center;
  font-size: 1.1rem;
  color: var(--text-body);
  max-width: 720px;
  margin: 0 auto 40px;
  line-height: 1.8;
}
.main-quote {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 36px 48px;
  background: linear-gradient(135deg, rgba(13,31,60,0.9), rgba(13,30,58,0.6));
  border: 1px solid rgba(0,201,201,0.18);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1.18rem;
  font-weight: 300;
  font-style: italic;
  color: var(--white);
  line-height: 1.9;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.main-quote em {
  font-style: normal;
  font-weight: 600;
  color: var(--cyan);
}
.quote-mark {
  font-family: Georgia, serif;
  font-size: 4rem;
  color: var(--cyan);
  opacity: 0.35;
  line-height: 0;
  vertical-align: -0.45em;
}
.quote-mark.close { margin-left: 4px; }*/

/* ============================================================
   COLOURS SECTION
   ============================================================ */
/*.colours-section {
  padding: 70px 0 80px;
}
.section-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 52px;
  letter-spacing: 0.02em;
}
.section-title span {
  background: linear-gradient(90deg, var(--cyan), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.colour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}*/

/* Colour Card */
/*.colour-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.colour-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
}
.card-stripe {
  height: 5px;
  width: 100%;
}
.blue-card  .card-stripe { background: linear-gradient(90deg, var(--blue-mid), var(--blue-bright)); }
.cyan-card  .card-stripe { background: linear-gradient(90deg, var(--cyan), var(--cyan-light)); }
.green-card .card-stripe { background: linear-gradient(90deg, var(--green), var(--green-light)); }

.card-body { padding: 28px 28px 32px; }

.card-icon-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.colour-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}
.blue-dot  { background: var(--blue-bright); box-shadow: 0 0 10px rgba(13,93,181,0.7); }
.cyan-dot  { background: var(--cyan);        box-shadow: 0 0 10px rgba(0,201,201,0.7); }
.green-dot { background: var(--green);       box-shadow: 0 0 10px rgba(0,176,87,0.7); }

.colour-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.03em;
}
.colour-tag {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-muted);
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 18px;
  letter-spacing: 0.01em;
}
.blue-card  .card-title { color: #7fc0ff; }
.cyan-card  .card-title { color: var(--cyan); }
.green-card .card-title { color: var(--green-light); }

.card-points { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
.card-points li {
  font-size: 0.9rem;
  color: var(--text-body);
  padding-left: 18px;
  position: relative;
}
.card-points li::before {
  content: '›';
  position: absolute;
  left: 0;
  font-size: 1rem;
  line-height: 1.5;
}
.blue-card  .card-points li::before { color: var(--blue-bright); }
.cyan-card  .card-points li::before { color: var(--cyan); }
.green-card .card-points li::before { color: var(--green); }

.card-quote {
  font-style: italic;
  font-size: 0.88rem;
  color: var(--text-muted);
  border-left: 3px solid;
  padding-left: 14px;
  line-height: 1.65;
}
.blue-card  .card-quote { border-color: var(--blue-bright); }
.cyan-card  .card-quote { border-color: var(--cyan); }
.green-card .card-quote { border-color: var(--green); }*/

/* ============================================================
   TRIANGLE / SHAPE SECTION
   ============================================================ */
/*.shape-section {
  padding: 80px 0;
  background: linear-gradient(180deg, rgba(0,201,201,0.04) 0%, transparent 100%);
  border-top: 1px solid rgba(0,201,201,0.08);
  border-bottom: 1px solid rgba(0,201,201,0.08);
}
.shape-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}
.shape-visual { display: flex; justify-content: center; }
.triangle-svg {
  width: 100%;
  max-width: 360px;
  filter: drop-shadow(0 0 30px rgba(0,201,201,0.15));
}*/

/* SVG animation */
/*.tri-side { stroke-dasharray: 500; stroke-dashoffset: 500; animation: drawLine 2s ease forwards; }
.side-cyan  { animation-delay: 0.1s; }
.side-green { animation-delay: 0.5s; }
.side-blue  { animation-delay: 0.9s; }
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
.tri-dot { animation: popIn 0.5s ease forwards; opacity: 0; }
.tri-dot:nth-child(4) { animation-delay: 0.4s; }
.tri-dot:nth-child(5) { animation-delay: 0.8s; }
.tri-dot:nth-child(6) { animation-delay: 1.2s; }
@keyframes popIn { to { opacity: 1; } }
.tri-label { opacity: 0; animation: fadeIn 0.5s ease 1.5s forwards; }
@keyframes fadeIn { to { opacity: 1; } }

.shape-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 16px;
}
.shape-icon { font-size: 1.2rem; }
.shape-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.shape-points { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
.shape-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 0.95rem;
  color: var(--text-body);
  line-height: 1.6;
}
.sp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.sp-blue  { background: var(--blue-bright); }
.sp-cyan  { background: var(--cyan); }
.sp-green { background: var(--green); }

.shape-quote-box {
  background: linear-gradient(135deg, rgba(0,201,201,0.07), rgba(0,176,87,0.07));
  border: 1px solid rgba(0,201,201,0.2);
  border-radius: 10px;
  padding: 20px 24px;
}
.shape-quote {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
}*/

/* ============================================================
   SUMMARY BANNER
   ============================================================ */
/*.summary-banner {
  padding: 80px 0;
}
.summary-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 60px;
  align-items: center;
  background: linear-gradient(135deg, rgba(26,58,110,0.4) 0%, rgba(13,30,58,0.9) 100%);
  border: 1px solid rgba(0,201,201,0.15);
  border-radius: 20px;
  padding: 50px 56px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.4);
}
.summary-logo-img {
  width: 200px;
  height: 200px;
  border-radius: 18px;
  border: 2px solid rgba(0,201,201,0.3);
  box-shadow: 0 0 40px rgba(0,201,201,0.1);
  object-fit: cover;
}
.summary-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 16px;
  letter-spacing: 0.01em;
}
.summary-desc {
  font-size: 1rem;
  color: var(--text-body);
  margin-bottom: 28px;
  line-height: 1.75;
}
.summary-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.pill {
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid;
}
.blue-pill  { color: #7fc0ff; border-color: rgba(13,93,181,0.5); background: rgba(13,93,181,0.12); }
.cyan-pill  { color: var(--cyan);        border-color: rgba(0,201,201,0.4); background: rgba(0,201,201,0.08); }
.green-pill { color: var(--green-light); border-color: rgba(0,176,87,0.4);  background: rgba(0,176,87,0.08); }
.tri-pill   { color: var(--white);       border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.04); }*/

/* ============================================================
   FOOTER
   ============================================================ */
/*.footer {
  border-top: 1px solid rgba(0,201,201,0.08);
  padding: 36px 0;
  background: rgba(6,15,30,0.9);
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--white);
}
.footer-logo { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--cyan); }
.footer-address, .footer-copy {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}*/

/* ============================================================
   RESPONSIVE
   ============================================================ */
/*@media (max-width: 900px) {
  .hero          { flex-direction: column; padding: 60px 24px 50px; min-height: auto; text-align: center; }
  .hero-logo-img { width: 220px; height: 220px; }
  .shape-container { grid-template-columns: 1fr; }
  .summary-inner { grid-template-columns: 1fr; text-align: center; padding: 36px 28px; }
  .summary-logo-img { margin: 0 auto; }
  .summary-pills { justify-content: center; }
  .nav-links     { display: none; }
}
@media (max-width: 600px) {
  .main-quote    { padding: 24px 22px; font-size: 1rem; }
  .hero-title    { font-size: 2.5rem; }
  .colour-grid   { grid-template-columns: 1fr; }
  .shape-title   { font-size: 1.5rem; }
  .summary-title { font-size: 1.5rem; }
}



.eco-hero {
    background: #ffffff;
    padding: 80px 0;
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.hero-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 60px;
}*/

/* LEFT */
/*.hero-badge {
    display: inline-block;
    background: #eef4ff;
    color: #1a3a6e;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 52px;
    font-weight: 700;
    color: #0d1f3c;
    line-height: 1.2;
}

    .hero-title span {
        color: #16a34a;
    }

.hero-desc {
    margin: 20px 0;
    font-size: 18px;
    color: #5b6b82;
    line-height: 1.6;
}

.hero-btn {
    display: inline-block;
    background: linear-gradient(90deg, #0d5db5, #16a34a);
    color: #fff;
    padding: 14px 28px;
    border-radius: 40px;
    font-weight: 600;
    margin-top: 20px;
    transition: 0.3s;
}

    .hero-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }*/

/* RIGHT */
/*.circle-wrapper {
    position: relative;
    width: 420px;
    height: 420px;
    margin: auto;
}

.main-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 20px 60px rgba(38, 73, 246,0.40);
   
}*/

/* FLOATING CARDS */
/*.floating-card {
    position: absolute;
    background: #fff;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    width: 180px;
    font-size: 14px;
}

    .floating-card h4 {
        font-size: 15px;
        color: #0d1f3c;
        margin-bottom: 4px;
    }

    .floating-card p {
        font-size: 12px;
        color: #0d1f3c;
    }*/

    /* positions */
    /*.floating-card.top {
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .floating-card.left {
        left: -60px;
        top: 50%;
        transform: translateY(-50%);
    }

    .floating-card.right {
        right: -60px;
        top: 50%;
        transform: translateY(-50%);
    }

    .floating-card.bottom {
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }*/

/* RESPONSIVE */
/*@media(max-width: 900px) {
    .hero-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .circle-wrapper {
        width: 300px;
        height: 300px;
    }

    .floating-card {
        display: none;
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #eef4ff;
    color: #1a3a6e;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
}

    .hero-badge img {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }


.hero {
    padding: 70px 6% 50px;
    background: linear-gradient(180deg,#ffffff 0%,#eef7ff 100%);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center;
}*/

/* LEFT */
/*.hero-left h1 {
    font-size: 42px;
    font-weight: 700;
    color: #0d1f3c;
    line-height: 1.2;
}

    .hero-left h1 span {
        color: #16a34a;
    }

.lead {
    margin-top: 15px;
    font-size: 17px;
    color: #5b6b82;
}*/

/* BADGE WITH IMAGE */
/*.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f4ff;
    color: #1a3a6e;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 18px;
}

    .badge img {
        width: 18px;
        height: 18px;
    }*/

/* BUTTON */
/*.btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 26px;
    border-radius: 30px;
    background: linear-gradient(90deg,#0d5db5,#16a34a);
    color: white;
    font-weight: 600;
}*/

/* RIGHT */
/*.hero-right {
    display: flex;
    justify-content: center;
}*/

/* ECOSYSTEM */
/*.ecosystem {
    position: relative;
    width: 380px;
    height: 380px;
}

.center-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%,-50%);
    background: white;
    border-radius: 50%;
    text-align: center;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

    .center-circle img {
        width: 50px;
    }

    .center-circle span {
        color: #16a34a;
    }*/

/* RING */
/*.eco-ring {
    position: absolute;
    inset: 0;
}

.ring-bg {
    fill: none;
    stroke: #e5edf5;
    stroke-width: 4;
}

.ring-gradient {
    fill: none;
    stroke: url(#gradientStroke);
    stroke-width: 5;
    stroke-dasharray: 6 10;
}*/

/* ITEMS */
/*.eco-item {
    position: absolute;
    text-align: center;
}

    .eco-item.top {
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
    }

    .eco-item.left {
        left: -20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .eco-item.right {
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
    }*/

/* ICON COLORS */
/*.icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    margin: auto;
    margin-bottom: 8px;
    font-size: 22px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

    .icon.blue {
        border: 2px solid #0d5db5;
        color: #0d5db5;
    }

    .icon.cyan {
        border: 2px solid #00c9c9;
        color: #00c9c9;
    }

    .icon.green {
        border: 2px solid #16a34a;
        color: #16a34a;
    }


.circle-wrapper {
    position: relative;
    width: 520px;*/ /* increased */
    /*height: 520px;*/ /* increased */
    /*display: flex;
    align-items: center;
    justify-content: center;
}*/

    /* main circle glow */
    /*.circle-wrapper::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0, 200, 255, 0.15), transparent 70%);
        animation: pulseGlow 4s infinite ease-in-out;
        z-index: 0;
    }*/

/* glow animation */
/*@keyframes pulseGlow {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}*/

/* main image */
/*.main-img {
    width: 550px;*/ /* increased */
    /*z-index: 2;
    position: relative;
}


.floating-card {
    position: absolute;
    width: 220px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    z-index: 3;*/
    /* animation */
    /*animation: zoomInOut 2s infinite ease-in-out;
}*/

    /* individual soft colors */
    /*.floating-card.left {
        top: 120px;
        left: -60px;
        background: linear-gradient(135deg, rgba(13,93,181,0.35), #ffffff);
    }

    .floating-card.right {
        top: 120px;
        right: -60px;
        background: linear-gradient(135deg, rgba(0,201,201,0.35), #ffffff);
    }

    .floating-card.bottom {
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, rgba(22,163,74,0.70), #ffffff);
    }

@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}



.floating-card.bottom {
    position: absolute;
    left: 50%;
    bottom: 3px;*/ /* controls how much goes outside */

    /*transform: translateX(-50%);
    width: 240px;
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(22,163,74,0.2), #ffffff);
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    z-index: 3;*/
    /* smooth zoom animation */
    /*animation: zoomBottom 2s infinite ease-in-out;
}

@keyframes zoomBottom {
    0% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.05);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}*/


/* RESET */
/**,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}*/

/*body {
    font-family: 'DM Sans', sans-serif;
}*/

/* CONTAINER */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* HERO */
.hero {
    padding: 20px 6% 50px;
    background: linear-gradient(180deg,#ffffff 0%,#eef7ff 100%);
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 40px;
    align-items: center;
}

/* LEFT */
.hero-left h1 {
    font-size: 42px;
    font-weight: 700;
    color: #0d1f3c;
    line-height: 1.2;
}

    .hero-left h1 span {
        color: #16a34a;
    }

.lead {
    margin-top: 15px;
    font-size: 17px;
    color: #5b6b82;
}

/* BADGE */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #e8f4ff;
    color: #1a3a6e;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 700;
    margin-bottom: 18px;
}

    .badge img {
        width: 18px;
        height: 18px;
    }

/* RIGHT */
.hero-right {
    display: flex;
    justify-content: center;
}

/* CIRCLE */
.circle-wrapper {
    position: relative;
    width: 520px;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*    .circle-wrapper::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0, 200, 255, 0.15), transparent 70%);
        animation: pulseGlow 4s infinite ease-in-out;
        z-index: 0;
    }*/

    .circle-wrapper::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #0b5ed7 0%, #00c8ff 40%, #22c55e 75%, transparent 85%);
        filter: blur(40px);
        opacity: 0.6;
        z-index: 0;
        transition: 0.5s ease;
    }


    .circle-wrapper:hover::before {
        transform: scale(1.15);
        opacity: 0.9;
    }

/* IMAGE */
.main-img {
    width: 80%;
    max-width: 420px;
    z-index: 2;
    position: relative;
    transition: 0.4s ease;
}

.circle-wrapper:hover .main-img {
    transform: scale(1.08);
}

/* FLOATING CARDS */
.floating-card {
    position: absolute;
    width: 220px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    z-index: 3;
    transition: all 0.4s ease;
}

    .floating-card h4 {
        font-size: 15px;
        color: #0d1f3c;
        margin-bottom: 4px;
    }

    .floating-card p {
        font-size: 12px;
        color: #0d1f3c;
    }

    /* CARD POSITIONS */
    .floating-card.left {
        top: 120px;
        left: -60px;
        background: linear-gradient(135deg, rgba(13,93,181,0.35), #ffffff);
    }

    .floating-card.right {
        top: 120px;
        right: -60px;
        background: linear-gradient(135deg, rgba(0,201,201,0.35), #ffffff);
    }

    /* SPECIAL BOTTOM CARD */
    .floating-card.bottom {
        left: 50%;
        bottom: 3px;
        transform: translateX(-50%);
        width: 240px;
        background: linear-gradient(135deg, rgba(22,163,74,0.2), #ffffff);
        transition: all 0.4s ease;
    }

/* ANIMATIONS */
@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes zoomBottom {
    0% {
        transform: translateX(-50%) scale(1);
    }

    50% {
        transform: translateX(-50%) scale(1.05);
    }

    100% {
        transform: translateX(-50%) scale(1);
    }
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

/* RESPONSIVE */
@media(max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .circle-wrapper {
        width: 300px;
        height: 300px;
    }

    .floating-card {
        display: none;
    }
}


.circle-wrapper:hover .floating-card {
    transform: scale(1.08);
}

    .circle-wrapper:hover .floating-card.bottom {
        transform: translateX(-50%) scale(1.08);
    }


.circle-wrapper::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #ffffff 40%, #e6f4ff 100%);
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
}


/* SECTION */
.color-story-section {
    padding: 50px 6%;
    background: linear-gradient(180deg, #ffffff 0%, #eef7ff 100%);
}

/* HEADER */
.color-header {
    text-align: center;
    margin-bottom: 50px;
}

    .color-header .tag {
        font-size: 12px;
        letter-spacing: 2px;
        color: #2563eb;
        font-weight: 700;
        margin-bottom: 10px;
    }

    .color-header h2 {
        font-size: 3.3rem;
        color: #051e54;
        margin-bottom: 10px;
    }

    .color-header .sub-text {
        color: #5b6b82;
        font-size: 16px;
    }

/* GRID */
.color-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* CARD BASE */
.color-card {
    background: #ffffff;
    padding: 28px;
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    transition: all 0.35s ease;
}

    /* HOVER EFFECT */
    .color-card:hover {
        transform: translateY(-10px) scale(1.02);
    }

    /* GLOW EFFECT */
    .color-card::before {
        content: "";
        position: absolute;
        width: 150%;
        height: 150%;
        top: -50%;
        left: -50%;
        background: radial-gradient(circle, rgba(0,0,0,0.05), transparent 60%);
        opacity: 0;
        transition: 0.4s;
    }

    .color-card:hover::before {
        opacity: 1;
    }

    /* HEADINGS */
    .color-card h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    /* MEANING */
    .color-card .meaning {
        font-weight: 600;
        margin-bottom: 15px;
    }

    /* LIST */
    .color-card ul {
        padding-left: 18px;
        margin-bottom: 15px;
    }

    .color-card li {
        margin-bottom: 8px;
        color: #334155;
    }

    /* QUOTE */
    .color-card blockquote {
        font-style: italic;
        font-size: 14px;
        color: #1e293b;
    }

/* COLOR TOP BORDER */
.blue-card {
    border-top: 5px solid #1d4ed8;
}

.cyan-card {
    border-top: 5px solid #06b6d4;
}

.green-card {
    border-top: 5px solid #22c55e;
}

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

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

    .color-header h2 {
        font-size: 26px;
    }
}


/* TOP TAG */
.ux-tag {
    font-size: 12px;
    letter-spacing: 2px;
    color: #1d4ed8; /* clean blue */
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* MAIN HEADING */
.ux-heading {
    font-size: 48px;
    font-weight: 800;
    color: #051e54; /* deep navy */
    line-height: 1.2;
    margin-bottom: 15px;
}

/* SUBTEXT */
.ux-subtext {
    font-size: 18px;
    color: #051e54;
    max-width: 700px;
    margin: 0 auto;
}

/* RESPONSIVE */
@media(max-width: 768px) {
    .ux-heading {
        font-size: 30px;
    }

    .ux-subtext {
        font-size: 15px;
    }
}