/* ================================
   MT BioLabs Modern Integrated Stylesheet
   Glassmorphism, Responsive Nav, Alternating Sections
   Colors: Main Blue: rgb(46,88,166), Accent Orange: #ff8c19
   Fonts: Roboto Slab (headings), Inter (body)
=============================== */

/* -------------------------
   Google Fonts
-------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Roboto+Slab:wght@400;700&display=swap');

/* ================================
   Global Reset
================================ */

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-family: 'Inter', sans-serif;
}

body {
  line-height: 1.6;
  background-color: #f9fafd;
  color: #1a1a1a;
  height: 100%;          /* ensure full viewport height */
  margin: 0;             /* remove default margin */
}


/* Layout */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;     /* full viewport height */
}
main {
  flex: 1; /* take up remaining space */
}
/* ================================
   Sections
================================ */
section {
  padding: 1.75rem;
  position: relative;
}

section:nth-of-type(odd) {
  background-color: #f9fafd;
}

section:nth-of-type(even) {
  background-color: rgba(46,88,166,0.05);
}

/* ================================
   Typography
================================ */

/* Headings*/

h1, h2, h3, h4 {
  font-family: 'Roboto Slab', serif;
}

h1 {
  color: rgb(46,88,166);
  font-size: 3rem;
  margin-bottom: 1rem;
}

h2 {
  color: rgb(46,88,166);
  font-size: 2rem;
  margin-bottom: 1rem;
}

h3 {
  color: #e59a17;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

h4 {
  color: rgb(46,88,166);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

h5 {
  font-family: 'Inter', sans-serif;
  color: rgb(46,88,166);
  font-size: 1rem;
  margin-bottom: 0.5rem;
  padding-top: 1.5rem;
  padding-bottom: 0.75rem;
}

h4 + h5 {
  margin-top: -1.5rem;
}

/* General text*/

p, li, a {
  font-family: 'Inter', sans-serif;
  color: #1a1a1a;
  font-size: 1rem;
  line-height: 1.6;
  text-decoration: none;
  margin-bottom: 1.25rem;

}

.subtitle {
  font-family: 'Inter', sans-serif;
  font-size: smaller;
  line-height: 1.2;
  text-decoration: none;
  margin-bottom: 0.5rem;

}

strong {
  color: rgb(46,88,166);
  font-weight: 600;
}

/*Links*/

.link{
  color: rgb(46,88,166);
  padding-bottom: 5px;
}

main  a:hover {
  font-weight: 600;
  text-decoration: none;
}

/* ================================
   Images
================================ */
/*Inline icons*/
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.1em; /* tweak for baseline alignment */
  object-fit: contain;
  stroke: currentColor ;
}

.claim-icon {
  width: 80px;
  height: auto;
  margin-bottom: 1rem;
  margin-top:-2rem;
}

/* ================================
   Lists
================================ */
ul {
  list-style: none;
  padding-left: 1rem;
  margin: -0.75rem 0;
}

/* Target <ul> immediately after an <h2> or <h3> */
h2 + ul,
h3 + ul {
  margin-top: 0.25em; /* smaller space above list if no paragraph */
  padding-left: 1.25em; /* adjust indentation if needed */
  margin-bottom: 1em;
}

ul li {
  margin-bottom: 0.6rem;
  line-height: 1.2;
  position: relative;
  padding-left: 1.5rem;
}

ul li::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: rgb(46,88,166);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.4em;
}

/* ================================
   Header / Navigation
================================ */
#site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

header {
  display: flex;             /* Make header itself a flex container */
  align-items: center;       /* Vertically center everything */
  padding: 0 2rem;           /* horizontal padding */

  z-index: 1000;
  background-color: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  min-height: 80px;
}

header.scrolled {
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

nav {
  display: flex;
  justify-content: space-between; /* logo left, nav-right right */
  align-items: center;            /* vertical alignment */
  height: 100%;                   /* fill header height */
  width: 100%;
}

nav h2, nav h3, nav a {
  margin: 0;
}


/* Logo */
nav .logo img {
  max-height: 45px;
  width: auto;
}
.logo {
  display: flex;
  align-items: center;
}

/* Nav link styles */

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: rgb(46,88,166);
  transition: width 0.3s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Hamburger button (hidden by default) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: rgb(46,88,166);
  border-radius: 2px;
  transition: all 0.3s;
}

/* ================================
   Footer
================================ */
footer {
  background-color: rgb(46,88,166);
  padding: 1rem 1rem;
  text-align: center;
  max-height: 100px;
}

footer p {
  color: #cddef7;
  margin-bottom: 0rem;

}
footer a {
  color: #f1f3f6;

}


/* ================================
   CTA buttons
================================ */
/* nav */
nav .cta {
  background: linear-gradient(45deg, #2e58a6, #4a7ad0);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s;
  margin-left: 1rem;
}

nav .cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46,88,166,0.3);
}

/* main */
.cta-primary {
  display: inline-block;
  background: linear-gradient(45deg, #2e58a6, #4a7ad0);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s;
  margin-left: 1rem;
  min-width : 10rem;
}

.cta-primary:hover,
.cta-secondary:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(46,88,166,0.3);
  font-weight: normal;
}


.cta-secondary {
   background: linear-gradient(45deg, #ff8c19, #fb992a);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.3s;
  margin-left: 1rem;
  min-width : 10rem;

}


/* ================================
   Hero section
================================ */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4.5rem 1rem;
  /* Use a background image instead of gradient only */
  background: linear-gradient(rgba(46,88,166,0.5), rgba(46,88,166,0.1)), url(img/slide.jpg) center/cover no-repeat;
  color: #fff;
}

/* Hero title */
.hero h1 {
  font-family: 'Roboto Slab', serif;
  color:  #f9fafd;
  font-size: 3rem;
  text-shadow: 2px 2px 4px #000000;
  margin-bottom: 0.5rem;

}
/* subtitle / paragraph */
.hero p {
  font-size: 1.2rem;
  color:  #f9fafd;
  text-shadow: 2px 2px 4px #000000;
  margin-bottom: 2.5rem;
}

.hero .buttons {
  display: flex;
  text-shadow: 2px 2px 4px #e67600;

}

.hero .buttons a {
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.hero .buttons .primary {
  background: linear-gradient(45deg, #ff8c19, #ffb347);
  color: #fff;
}

.hero .buttons .primary:hover,
.hero .buttons .primary:focus {
  background: linear-gradient(45deg, #e67600, #ff9c3f);
}

.hero .buttons .secondary {
  background-color: rgba(255,255,255,0.85);
  color: rgb(46,88,166);
}
/* ================================
   Carousels
================================ */
/* Base Carousel*/
.carousel {
  display: flex;
  gap: 2rem;
  transition: transform 0.5s ease-in-out;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  padding-top: 1rem;
  scroll-behavior: smooth; 
}

.carousel-container {
  position: relative;
  overflow: visible;
  padding: 3rem 2rem;
}

.carousel::-webkit-scrollbar {
  display:none; /* Hide scrollbars for modern look */
}

/* Base Card*/
.carousel-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  flex: 0 0 28%;
  height: 350px;
  max-width: 350px;
  min-width: 300px;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  text-align: center;
  
  scroll-snap-align: center;
}

  .carousel-card img:not(.icon) {
  width: 100px;
  height: 100px;
  object-fit: fill;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.carousel-card img.services {
 border-radius: 500px 500px 500px 500px;
 display: block;
 position: relative;
 margin: 12px auto 24px;
 border: 2px solid #04498c;

}

.carousel-card.active-card {
  transform: scale(0.97);
  transition: transform 0.15s ease;
}

.carousel-card:hover,
.carousel-card-pub:hover, 
.carousel-card:focus,
.carousel-card-pub:focus {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.carousel-card:focus {
  outline: 3px solid #e59a17; /* your accent color */
  outline-offset: 4px;
}
.carousel-container:not(.no-scroll)::before,
.carousel-container:not(.no-scroll)::after {
  content: "";
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.carousel-container:not(.no-scroll)::before {
  left: 0;
  background: linear-gradient(to right, #f4f7fb, transparent);
}

.carousel-container:not(.no-scroll)::after {
  right: 0;
  background: linear-gradient(to left, #f4f7fb, transparent);
}

/* Center cards when no overflow */
.carousel.centered {
  justify-content: center;
}

/* Hide arrows when not needed */
.carousel-container.no-scroll .carousel-arrow {
  display: none;
}
/* Carousel arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(46,88,166,0.8);
  color: #fff;
  border: none;
  padding: 0.75rem 1.25rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}

.carousel-arrow.left {
  left: -20px;
}

.carousel-arrow.right {
  right: -20px;
}

.carousel-arrow:focus {
  outline: 2px solid #ff8c19;
}
/* Disabled arrows */
.carousel-arrow:disabled,
.mini-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Services Card variants*/
.services-carousel .carousel-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  flex: 0 0 28%;
  height: 350px;
  max-width: 350px;
  min-width:250px;
  padding: 1.5rem;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;     /* horizontal center */
  gap: 1.25rem;

}

.services-carousel .carousel-card img.services {
  width: 105px;
  height: 105px;
}

.services-carousel .carousel-card h3 {
  padding-top:1.5rem;
}

  .pharma-carousel .carousel-card,
  .cos-carousel .carousel-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  flex: 0 0 28%;
  height: 350px;
  max-width: 350px;
  min-width: 300px;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  text-align: center;
  scroll-snap-align: center;
  }

/* Pub Card variants*/
.carousel-card-pub {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  flex: 0 0 28%;
  height: 500px;
  max-width: 350px;
  min-width:300px;
  padding: 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center;     /* horizontal center */
  text-align: center;
  
  scroll-snap-align: center;
}

.carousel-card-pub h3 {
  font-family: 'Roboto Slab', serif;
  color:  #e59a17;
  font-size: 1.1rem;
  line-height: 1.2rem;
  margin-bottom: 1rem;

}

.carousel-card-pub p {
  font-size: 0.90rem;
  line-height: 1.2rem;
  margin-top: 0.5rem;

}
.carousel-card-pub .subtitle {
  font-size: small;
  line-height: 1.2rem;
  margin-top: -1.5rem;

}
.carousel-card-pub .link {
  line-height: 1.2rem;
  margin-bottom: 1.25rem;
  color: rgb(46,88,166);
}

.carousel-card-pub img:not(.icon) {
  height: 200px;
  max-width: 300px;
  object-fit:contain;
  border-radius: 12px;
  margin-bottom: 1rem;
}

/* Pagination dots container 
.carousel-pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  background-color: rgba(46,88,166,0.3);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.carousel-dot.active {
  background-color: rgb(46,88,166);
}
*/

/* Mini Carousel - related services*/
.related-services {
  margin: 1rem 0;
}

.mini-carousel {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.75rem 0;

  margin: 0 auto;
  scroll-snap-type: x mandatory;

}

.mini-card {
  flex: 0 0 auto;
  width: 140px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 1rem;
  border-radius: 12px;
  background: #f9f9f9;
    /* subtle border + shadow */
  border: 0.5px solid rgba(0, 0, 0, 0.08);  /* very light border */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); /* soft shadow */

  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  scroll-snap-align: start;
}

.mini-card img {
  width: 40px;
  height: 40px;
  margin-bottom: 0.5rem;
}

.mini-card h3 {
  font-size: 0.9rem;
  font-weight: 500;
}

.mini-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: rgba(0,0,0,0.12); /* slightly darker on hover */
}

.mini-card.active {
  border: 1.5px solid #04498c;
  background: #eef5ff;
}

.mini-carousel-wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  background: none; /* remove background */
}

.mini-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #666;
  cursor: pointer;
  z-index: 2;
  padding: 0.5rem;
  transition: opacity 0.2s ease;
}

.mini-arrow:hover {
  color: #000;
}

.mini-arrow.left {
  left: -40px;
}

.mini-arrow.right {
  right: -40px;
}

.mini-carousel-wrapper::before,
.mini-carousel-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 40px;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ================================
   Modals
================================ */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* Modal Header */
.modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.modal-header img{
height: 100px;
width:100px;
transform: translateY(-5px);
}

.modal-header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.modal-header h3 {
  margin: 0;
  line-height: 1.2;

}
.modal-tagline {
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.25rem;
}

/* Modal Content */
.modal-content {
  background-color: #fff;
  border-radius: 16px;
  max-width: 700px;
  width: 90%;
  padding: 2rem;
  position: relative;
  overflow-y: auto;
  max-height: 90vh;
}

.modal-content a {
  display: inline-block;
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-weight: 500;
}

.modal-content p {
  line-height: 1.6;
} 

.modal-body {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 2rem;
}

/* Close button */
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;

  width: 36px;
  height: 36px;
  border-radius: 50%;

  background: rgba(46,88,166,0.1);
  border: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: all 0.3s ease;
}

/* X icon using pseudo-elements */
.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: rgb(46,88,166);
}

.modal-close::before {
  transform: rotate(45deg);
}

.modal-close::after {
  transform: rotate(-45deg);
}

/* Hover effect */
.modal-close:hover {
  background: rgba(255,140,25,0.15);
}

.modal-close:hover::before,
.modal-close:hover::after {
  background-color: #ff8c19;
}

/* Focus accessibility */
.modal-close:focus {
  outline: 2px solid rgb(93, 119, 168);
}

/* ================================
   FAQ
================================ */


.faq-item {
  margin-bottom: 1rem;
}

/* Remove default arrow */
summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

/* Question styling */
.faq-question {
  background-color: rgb(46,88,166);
  color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 400;
  transition: background-color 0.3s ease;
}
.faq-item details {
  margin-bottom: 1rem;
  background: rgba(230, 245, 255, 0.7); /* Subtle glass effect */
  border-radius: 10px;
}

.faq-question:hover {
  background-color: rgb(36,70,140);
}

/* Answer */
.faq-answer {
  background-color: rgba(240,244,250,0.8);
  border-radius: 0 0 8px 8px;

  max-height: 0;
  overflow: hidden;

  opacity: 0;
  transform: translateY(-10px);

  padding: 0 1.5rem;

  transition: 
    max-height 0.5s ease,
    opacity 0.4s ease,
    transform 0.4s ease,
    padding 0.4s ease;
}

.faq-answer img {
  width: 100%;      /* preserves aspect ratio */
  height: auto;
  max-width: 700px;  /* optional: limit how big it can get on large screens */
  display: block;    /* removes small inline spacing */
  border-radius: 8px; /* optional: rounded corners */
  margin: 0 auto;     /* centers horizontally */
  object-fit: contain; /* ensures the whole image is visible without cropping */}

  /* Open state */
details[open] .faq-answer {
  max-height: 1000px; /* adjust if needed */
  opacity: 1;
  transform: translateY(0);

  padding: 0.75rem 1.5rem;
}

/* Plus icon animation */
.faq-question .icon {
  transition: transform 0.3s ease;
}

details[open] .faq-question .icon {
  transform: rotate(45deg);
}

.faq-question::after {
  content: "+";
  transition: transform 0.3s ease;
}

details[open] .faq-question::after {
  transform: rotate(45deg);
}

/* ================================
   Contact Page
================================ */
.grid {
  display: flex;
  gap: 2rem;       /* spacing between columns */
  flex-wrap: wrap;  /* allows wrapping if space is constrained */
  margin-top: 2rem;
  padding-bottom: 30px;
  justify-content: space-between;

}
.contact-grid .column {
  display: flex;          /* turn column into flex container */
  flex-direction: column; /* stack children vertically */
  align-items: center;    /* center content horizontally */
  text-align: center;     /* center text inside p, h2, etc. */
  gap: 0.5rem;            /* spacing between elements */
  max-width: 400px;
}

.contact-grid {
  display: flex;
  gap: 1.5rem;           /* space between columns */
  justify-content: center;
  flex-wrap: wrap;      /* allows columns to wrap on smaller screens */
}
.contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.contact-block + .contact-block {
  padding-top: 2rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* Columns */
.column {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  flex: 1 1 45%;   /* grow, shrink, base width ~45% */
  min-width: 280px; /* prevents columns from being too small */
}

.events {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  flex: 1 1 45%;   /* grow, shrink, base width ~45% */
  min-width: 280px; /* prevents columns from being too small */
  margin-left: auto; /* ✅ THIS pushes it to the right */
  max-width: 400px;
  justify-content: space-between;

}

.column h2{
  text-align: center;
}
.column h3{
  text-align: center;
  padding-bottom: 1rem;
}
.column h4{
  text-align: center;
  padding-bottom: 1rem;
}

.column p{
  text-align: justify;
}
.column ul li::before {
   background-color: #e59a17 ;
}
.contact-grid .column p {
  text-align: center;
}
/* CTA spacing */
.column a {
  display: inline-block;
  margin-top: 1.25rem;
}

.contact-grid .column a {
  margin-top: 0.75rem;
}

.contact-grid .column .contact-detail {
  margin-top: 0;     /* small space between button and text */
  font-size: 0.9rem;
  color: #555;
  text-align: center;
}
/* Contact CTA buttons */
.contact-grid .column a.cta-primary,
.contact-grid .column a.cta-secondary {
  display: block;         /* make buttons full width (optional) */
  margin: 0 auto;         /* center them */
  min-width: 10rem;
  
}

/* ================================
   Claim Page
================================ */
/* Intro and back link */
.intro {
    font-size: 1.1rem;
    margin-bottom :-2.5rem;   
     margin-top :1rem;

}

.back-link {
    display: inline-block;
    padding-top: 1.5rem;
     padding-left: 1.5rem;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.back-link-bottom {
    display: inline-block;
    padding-top: 1.5rem;
    margin-bottom: 0rem;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* Grid layouts */
.tech-grid, .model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 450px));
  gap: 2rem;
  margin-top: 1.5rem;
  justify-content: start;
}

.tech-card, .model-column {
  justify-self: start;
  background-color: #f9f9f9;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-width: 450px;
}

.tech-card h3, .model-column h3 {
text-align: center;
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(0,0,0,0.08);

}
.tech-card h3+p,
.model-column h3+p {
padding-top: 1rem;
}


.tech-card ul, .model-column ul {
  padding-left: 1.2rem;
  list-style: none;
  margin-bottom: 1rem;

}

.key-benefits .tech-card {
  width: auto;   /* natural width */
  max-width: 400px; /* optional limit */
}

.key-benefits {
    position: sticky;
    top:100px;
}
/*--------------------------
 Literature section layout 
 --------------------------*/

.literature {
  margin: 3rem 0;
}

.literature-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Superscript styling */
.literature sup {
  font-size: 0.7em;
  vertical-align: super;
  margin-left: 2px;
  color: #666;
}

/* Main text */
.literature-main p {
  margin-bottom: 1.2rem;
  line-height: 1.6;
  max-width: 85ch;
}

/* Highlighted conclusion */
.literature-highlight {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 3px solid #ffb347;
  font-weight: 500;
}

/* Sidebar */
.literature-sidebar {
  font-size: 0.9rem;
  color: #555;
/* Sticky behavior */
  position: sticky;
  top: 100px; /* adjust based on header height */
}

/* Sidebar title */
.literature-sidebar h3 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

/* Reference list */
.literature-sidebar ol {
  padding-left: 1rem;
}

.literature-sidebar li {
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

/* ================================
   Accessibility: visually hidden elements
================================ */

/* Hides content visually but keeps it accessible to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; /* legacy for older browsers */
  clip-path: inset(50%) !important;   /* modern equivalent */
  white-space: nowrap !important;     /* prevent line breaks */
  border: 0 !important;
}

/* ==========================
   Mobile Responsive
   ========================== */

/* Hamburger active animation */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Max width 1024px */
@media (max-width: 1024px) {
  .carousel-card {
    flex: 0 0 45%;
  }
}

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

  .literature-layout {
    grid-template-columns: 1fr;
  }

  .literature-sidebar {
    position: static;
    margin-top: 2rem;
    border-top: 1px solid #ddd;
    padding-top: 1rem;
  }
}


/* Max width 768px */

@media (max-width: 768px) {
  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin-top: 0.5rem;
    background-color: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 1rem 0;
  }

  .nav-links.show {
    display: flex;
  }

  nav .cta {
    width: 100%;
    margin: 0.5rem 0 0 0;
    text-align: center;
  }

  nav {
    flex-wrap: wrap;
  }

  .carousel-card {
    flex: 0 0 75%;
  }
  .hero h1 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1.05rem;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .column {
    flex: 1 1 100%; /* full width */
  }

 /* Stack cards vertically for services carousels */
  .pharma-carousel,
  .cos-carousel {
    overflow: visible; /* remove horizontal scroll */
    padding: 0 1rem;   /* optional: give some horizontal padding */

  }

  .pharma-carousel .carousel, 
   .cos-carousel .carousel{
    display: flex;
    flex-direction: column; /* stack vertically */
    gap: 1rem;
    scroll-snap-type: none; /* remove any horizontal snap */
    margin: 0;               /* remove any extra margin */

  }

  .pharma-carousel .carousel-card,
  .cos-carousel .carousel-card {
    flex: 1 1 auto;
    width: 100%;             /* full width of the carousel */
    max-width: 100%;         /* prevent overflow beyond parent */
    box-sizing: border-box;  /* include padding/border in width */
    margin: 0;               /* remove any extra margins */
    padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  .pharma-carousel .carousel-arrow,
  .cos-carousel .carousel-arrow {
    display: none; /* hide arrows */
  }
}

/* Max width 450px */

@media (max-width: 450px) {
  /* Stack cards vertically for services carousels */
  .services-carousel {
    overflow: visible; /* remove horizontal scroll */
    padding: 0 1rem;   /* optional: give some horizontal padding */

  }

  .services-carousel .carousel{
    display: flex;
    flex-direction: column; /* stack vertically */
    gap: 1rem;
    scroll-snap-type: none; /* remove any horizontal snap */
    margin: 0;               /* remove any extra margin */

  }

  .services-carousel .carousel-card {
    flex: 1 1 auto;
    width: 100%;             /* full width of the carousel */
    max-width: 100%;         /* prevent overflow beyond parent */
    box-sizing: border-box;  /* include padding/border in width */
    margin: 0;               /* remove any extra margins */
    padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  .services-carousel .carousel-arrow {
    display: none; /* hide arrows */
  }
}