/* -----------------------
   CSS RESET & NORMALIZE
-------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}
body {
  line-height: 1.5;
  background: #121f28;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
ul,ol {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
button {
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  outline: none;
}
input,button,select,textarea {
  font-family: inherit;
}

/* -----------------------
   VARIABLES (Fallbacks)
-------------------------*/
:root {
  --color-primary: #17618a;
  --color-secondary: #fff;
  --color-bg: #121f28;
  --color-accent: #2e8b57;
  --color-hover: #2af598;
  --color-fg: #101b26;
  --color-border: #1f3240;
  --color-card-bg: #18293a;
  --color-shadow: rgba(30,200,220,0.18);
  --color-heading: #eaf9ff;
  --color-text: #e3e9ef;
  --color-link: #33e3ff;
  --color-focus: #1ed6d6;
  --color-danger: #d72660;
  --color-table-bg: #182938;
  --color-neon-shadow: 0 0 12px #2af598, 0 0 40px #17618a;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-md: 0 2px 16px 0 var(--color-shadow);
  --transition: 0.22s cubic-bezier(.73,.16,.3,.89);
}

/* ----------
  FONTS
---------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;700&family=Hind+Siliguri:wght@400;700&display=swap');
html {
  font-family: 'Hind Siliguri', 'Noto Sans Bengali', Arial, sans-serif;
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg);
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6 {
  color: var(--color-heading);
  font-family: 'Noto Sans Bengali', 'Hind Siliguri', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}
h1 {
  font-size: 2.25rem;
  margin-bottom: 18px;
  line-height: 1.15;
}
h2 {
  font-size: 1.7rem;
  margin-bottom: 15px;
}
h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
}
h4,h5,h6 {
  font-size: 1.1rem;
}
p,ul,ol {
  color: var(--color-text);
  font-size: 1rem;
  margin-bottom: 12px;
  line-height: 1.6;
}
a {
  color: var(--color-link);
  transition: color var(--transition);
}
a:hover,a:focus {
  color: var(--color-hover);
}
strong { font-weight: bold; color: var(--color-heading); }

/* Typography scale for hierarchy */
.text-section p,
.text-section li,
.content-wrapper p,
.content-wrapper li { font-size: 1.09rem; }

/* --------------
 CONTAINERS
-------------- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 18px;
  box-sizing: border-box;
}
.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.text-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* ---------------
 SITE LAYOUT
---------------- */
body {
  background: linear-gradient(145deg, #101b26 65%, #1b3143 100%);
  min-height: 100vh;
}

header {
  width: 100%;
  padding: 0;
  background: #151f36;
  box-shadow: 0 3px 15px 0 rgba(37,200,255,.04);
  position: relative;
  z-index: 101;
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  gap: 18px;
  position: relative;
}
header img {
  height: 44px;
}
/* Desktop nav */
header nav {
  display: flex;
  gap: 18px;
  align-items: center;
}
header nav a {
  color: var(--color-secondary);
  font-weight: 400;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 9px #1119;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
  position: relative;
}
header nav a:hover, header nav a:focus {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 8px 0 #2af59877;
}
.btn-primary {
  background: linear-gradient(90deg, #17618a 65%, #2e8b57 100%);
  color: #fff;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: 28px;
  font-size: 1.13rem;
  letter-spacing: 0.015em;
  box-shadow: 0 0 12px #2af59899, 0 1px 6px #17618a26;
  border: 0;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
  outline: 0;
  margin-left: 12px;
  display: inline-block;
  text-align: center;
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(90deg, #2af598 65%, #17618a 100%);
  box-shadow: 0 0 14px #2af598, 0 3px 16px #1fb4c9dd;
  color: #181f2d;
  transform: translateY(-1px) scale(1.05);
}

/* Burger Menu button */
.mobile-menu-toggle {
  display: none;
  position: absolute;
  right: 16px;
  top: 18px;
  z-index: 202;
  background: var(--color-primary);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-size: 1.8rem;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 0 0 8px #17618a55;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.mobile-menu-toggle:focus {
  outline: 2px solid var(--color-hover);
  background: var(--color-hover);
}
/* MOBILE MENU STYLES */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(111deg,#12223A 85%,#17618a 100%);
  box-shadow: 0 9px 40px #0008;
  transform: translateX(-105vw);
  transition: transform .33s cubic-bezier(.77,.08,.36,1.11);
  z-index: 4000;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
}
.mobile-menu.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-close {
  align-self: flex-end;
  margin: 20px 22px 6px 0;
  background: var(--color-danger);
  color: #fff;
  font-size: 2.2rem;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px #d7266059;
  transition: background var(--transition);
}
.mobile-menu-close:hover, .mobile-menu-close:focus {
  background: #f33d6b;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 30px 30px 40px;
}
.mobile-nav a {
  color: #fff;
  font-size: 1.24rem;
  font-weight: 600;
  padding: 11px 0 11px 12px;
  border-radius: 8px;
  transition: background .2s, color .22s;
  width: 100%;
  display: block;
}
.mobile-nav a:hover, .mobile-nav a:focus {
  background: var(--color-hover);
  color: var(--color-fg);
}
@media (max-width: 1024px) {
  header .container nav, header .container .btn-primary {
    display: none;
  }
  .mobile-menu-toggle {
    display: flex;
  }
}
@media (min-width: 1025px) {
  .mobile-menu {
    display: none !important;
  }
}

/* -------------
  MAIN/SECTIONS
-------------- */
main {
  margin: 0;
  width: 100%;
  min-height: 40vh;
  z-index: 1;
}
section {
  margin-bottom: 60px;
  padding: 40px 20px;
  width: 100%;
}
/* Section BG NEON ACCENTS */
section {
  background: linear-gradient(90deg,#141d2a 85%,#182f43 100%);
  box-shadow: 0 4px 48px 0 #1fb7ff08, 0 2px 12px 0 #17618a13;
  border-radius: var(--radius-lg);
  position: relative;
}

/* For sections that don't need background (compact), add .no-bg if necessary in HTML */
section.no-bg {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding-bottom: 0;
}

/* 'card-container', 'card', grid styles */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card {
  background: var(--color-card-bg);
  border-radius: var(--radius);
  margin-bottom: 20px;
  box-shadow: var(--shadow-md), var(--color-neon-shadow);
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition);
  min-width: 240px;
  max-width: 100%;
  flex: 1 1 330px;
}
.card:hover, .card:focus-within {
  box-shadow: 0 0 24px 0 #2af59877, 0 0 16px #17618a66, 0 1px 18px #2e8b5777;
  transform: translateY(-3px) scale(1.02);
}
.content-grid, .feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
}
.feature-grid > div {
  flex: 1 1 210px;
  min-width: 215px;
  max-width: 100%;
  padding: 28px 22px;
  background: #172a35;
  border-radius: 18px;
  box-shadow: 0 1px 5px #13475822, 0 0 16px #2af59821;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  border: 1.5px solid #182d39;
  transition: box-shadow var(--transition), border var(--transition);
}
.feature-grid > div:hover {
  border: 1.5px solid #2af598cc;
  box-shadow: 0 1px 18px #2af59899, 0 0 26px #17618a66;
}
.feature-grid img {
  width: 54px;
  margin-bottom: 4px;
}
.text-image-section {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Spacing for text-image section on mobile */
@media (max-width: 768px) {
  .text-image-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

/* List/ul marker accent (for neat neon look) */
ul, .faq-list, .blog-list {
  list-style: none;
  padding-left: 0;
}
ul li, .faq-list li, .blog-list li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 25px;
}
ul li::before, .faq-list li::before, .blog-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.77em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(90deg,#2af598 60%,#17618a 100%);
  box-shadow: 0 0 8px #2af59855;
}

/* Table styling - Futuristic look */
table {
  width: 100%;
  background: var(--color-table-bg);
  color: var(--color-heading);
  border-radius: 9px;
  margin-bottom: 18px;
  overflow: hidden;
  box-shadow: 0 1px 13px #1fb7ff05;
}
thead {
  background: #162334;
}
th,td {
  padding: 13px 18px;
  text-align: left;
  border-bottom: 1px solid #223755;
  font-size: 1.01rem;
}
th {
  color: var(--color-hover);
  font-weight: 700;
  text-shadow: 0px 1px 8px #25fffa22;
}
tbr:last-child td, tbody tr:last-child td {
  border-bottom: none;
}

/* Testimonials */
.testimonial-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  margin-bottom: 16px;
}
.testimonial-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: #fcfcfc;
  color: #101b26;
  border-radius: 18px;
  box-shadow: 0 1px 18px #2e8b5735, 0 0 16px #23e3b658;
  min-width: 230px;
  max-width: 360px;
  flex: 1 1 260px;
  position: relative;
  margin-bottom: 20px;
}
.testimonial-card p{
  color:#172a35;
}
.testimonial-card strong {
  color: #17618a;
}
.testimonial-card img {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
}
@media (max-width:820px) {
  .testimonial-list {
    flex-direction: column;
    gap: 18px;
  }
  .testimonial-card {
    max-width: 100%;
  }
}

/* .feature-item for About page, and lists */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

/* FAQ Styling */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}
.faq-list strong {
  color: var(--color-primary);
  font-size: 1.06em;
}
.faq-list p { color: var(--color-text); font-size: 1rem; }

/* Blog Styling */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-bottom: 34px;
}
.blog-list li {
  background: rgba(29,42,56,0.92);
  border-radius: 13px;
  box-shadow: 0 1px 6px #25fffa16;
  padding: 22px 20px;
  margin-bottom: 0;
  position: relative;
}
.blog-list h3 {
  color: var(--color-hover);
}
.blog-list span {
  display: inline-block;
  color: #2af598;
  font-size: .95em;
  margin-top: 5px;
}

/* Address and contact block */
address {
  font-style: normal;
  color: var(--color-text);
  font-size: 1.06rem;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 10px;
}
address div {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 2px;
  color: #eaf9ff;
}
address img {
  width: 18px;
  height: 18px;
  opacity: .88;
}
address a {
  color: var(--color-link);
  font-weight: 600;
}

/* Footer */
footer {
  background: linear-gradient(90deg,#141d2a 90%,#182f43 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 40px 0 0 0;
  width: 100%;
  z-index: 100;
}
footer .container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  padding-bottom: 20px;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.footer-nav a {
  color: var(--color-link);
  font-size: 1.05em;
  letter-spacing: 0.03em;
  padding: 5px 7px;
  border-radius: 7px;
  transition: background var(--transition), color var(--transition);
}
.footer-nav a:hover, .footer-nav a:focus {
  color: #fff;
  background: var(--color-accent);
}
.footer-info {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: flex-start;
  width: 100%;
  margin-top: 16px;
}
.footer-info>div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 210px;
}
.footer-info img {
  height: 38px;
}
@media (max-width: 840px) {
  .footer-info {
    flex-direction: column;
    gap: 12px;
  }
}

/* Cookie Consent Banner */
.cookie-consent-banner {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  background: linear-gradient(90deg,#141d2a 80%,#17618a 100%);
  color: var(--color-heading);
  padding: 24px 18px 20px 28px;
  box-shadow: 0 -6px 20px #2af59824;
  z-index: 5000;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  transition: transform .3s;
  border-radius: 18px 18px 0 0;
  opacity: 1;
  font-size: 1.04rem;
}
.cookie-consent-banner.hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.cookie-consent-banner .cookie-text {
  flex: 1;
  min-width: 80px;
}
.cookie-consent-banner .cookie-btns {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.cookie-consent-banner button {
  padding: 10px 20px;
  border-radius: 9px;
  border: none;
  margin: 0 4px;
  font-weight: 600;
  font-size: 1.01em;
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 5px #2af59833;
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}
.cookie-consent-banner .btn-settings {
  background: #182a26;
  color: #2af598;
}
.cookie-consent-banner .btn-accept {
  background: linear-gradient(90deg,#2af598 70%,#17618a 100%);
  color: #181f2d;
}
.cookie-consent-banner .btn-reject {
  background: linear-gradient(90deg,#d72660 60%, #101b26 100%);
  color: #fff;
}
.cookie-consent-banner button:hover, .cookie-consent-banner button:focus {
  box-shadow: 0 0 12px #2af598dd, 0 1px 8px #17618a44;
}

@media (max-width: 660px) {
  .cookie-consent-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 22px 8px 18px 12px;
    font-size: .98rem;
  }
  .cookie-consent-banner .cookie-btns {
    gap: 9px;
    width: 100%;
  }
}

/* Cookie Pref Modal (simple modal for categories/toggles) */
.cookie-modal-overlay {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(4,12,25,0.83);
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: all;
  transition: opacity .24s;
}
.cookie-modal-overlay.hidden {
  opacity: 0; pointer-events: none;
}
.cookie-modal {
  background: linear-gradient(101deg,#141d2a 80%,#23e3b6 140%);
  color: #eaf9ff;
  border-radius: 22px;
  box-shadow: 0 0 42px #2af59822, 0 1px 8px #17618a22;
  max-width: 98vw;
  width: 440px;
  min-width: 260px;
  padding: 38px 28px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}
.cookie-modal h2 { margin-bottom: 7px; color: #2af598; font-size: 1.24rem; text-shadow:0 1px 8px #2af59827; }
.cookie-modal .close-cookie-modal {
  position: absolute; right: 18px; top: 13px;
  background: #d72660;
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  box-shadow: 0 0 10px #d7266025;
  transition: background var(--transition);
}
.cookie-modal .close-cookie-modal:hover { background: #f7537d; }
.cookie-category {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  padding: 8px 0;
  font-size: 1.03em;
}
.cookie-category input[type=checkbox] {
  width: 22px;
  height: 22px;
  accent-color: #2af598;
  margin-right: 4px;
}
.cookie-category .always-on {
  color: #50ffbe;
  font-weight: 700;
  font-size: .94em;
  background: #14392a;
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 7px;
}

/* -----------------------
   RESPONSIVE LAYOUT
-------------------------*/
@media (max-width: 900px) {
  .container {
    max-width: 96vw;
  }
  .footer-info {
    flex-direction: column;
    gap: 20px;
  }
  .feature-grid {
    flex-direction: column;
  }
  .content-grid {
    flex-direction: column;
    gap: 18px;
  }
}
@media (max-width: 768px) {
  section {
    padding: 30px 6px;
    margin-bottom: 36px;
  }
  header .container {
    height: auto;
    padding: 9px 9px 9px 16px;
  }
  .footer-nav {
    gap: 13px;
    flex-wrap: wrap;
  }
  .feature-grid>div {
    width: 100%;
    padding: 18px 10px;
  }
}
@media (max-width: 600px) {
  h1 { font-size: 1.32rem; }
  h2 { font-size: 1rem; }
  .btn-primary {
    padding: 10px 17px;
    font-size: .99em;
    margin-left: 0;
  }
  .feature-grid>div, .testimonial-card {
    min-width: 90vw;
    padding: 14px 6px;
    box-sizing: border-box;
  }
  .testimonial-card {
    min-width: unset;
  }
  .card {
    min-width: 90vw;
    padding: 10px;
    margin-bottom: 16px;
  }
  .content-wrapper {
    gap: 14px;
  }
}

/* --------------
  MISC
-------------- */
::-webkit-scrollbar {
  width: 9px;
  background: #141d2a;
}
::-webkit-scrollbar-thumb {
  background: #17618a55;
  border-radius: 13px;
}

/* Focus states */
a:focus, .btn-primary:focus, button:focus, input:focus {
  outline: 2px solid var(--color-hover);
  outline-offset: 2px;
  z-index: 10;
}

/* Subtle transitions */
*, *::before, *::after {
  box-sizing: inherit;
  transition-property: background, color, box-shadow, border, outline, transform;
  transition-duration: .21s;
}

/* Animate hover on cards, buttons, accent blocks */
.card, .btn-primary, .feature-grid>div, .testimonial-card, .blog-list li, .footer-nav a {
  transition: box-shadow var(--transition), transform var(--transition), color var(--transition), background var(--transition);
}

/* Prevent overlap & z-index stacking for interactive areas */
header, .mobile-menu, .cookie-consent-banner, .cookie-modal-overlay, .cookie-modal {
  z-index: 300;
}

/* Utility (optional, if content uses) */
.mt-2 { margin-top: 8px !important; }
.mt-4 { margin-top: 16px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-5 { margin-bottom: 20px !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* Ensure minimum margin on all cards */
.card, .testimonial-card, .feature-grid>div, .blog-list li {
  margin-bottom: 20px;
}

/* Animations */
@keyframes neonPulse {
  0%,100% { box-shadow: 0 0 14px #2af59855; }
  50% { box-shadow: 0 0 22px #2af598cc, 0 1px 13px #17618a44; }
}

.btn-primary:hover {
  animation: neonPulse .8s linear 1;
}

/*--- END DIAL ESTIMO FUTURISTIC TECH THEME CSS ---*/