/* =====================================================
   GOOGLE FONT (BODY)
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap');


/* =====================================================
   CHRONICLE DISPLAY
===================================================== */
@font-face {
  font-family: 'Chronicle Display';
  src: url('../fonts/ChronicleDisplay-LightItalic.woff2') format('woff2'),
       url('../fonts/ChronicleDisplay-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Chronicle Display';
  src: url('../fonts/ChronicleDisplay-Roman.woff2') format('woff2'),
       url('../fonts/ChronicleDisplay-Roman.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chronicle Display';
  src: url('../fonts/ChronicleDisplay-Semi.woff2') format('woff2'),
       url('../fonts/ChronicleDisplay-Semi.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chronicle Display';
  src: url('../fonts/ChronicleDisplay-Black.woff2') format('woff2'),
       url('../fonts/ChronicleDisplay-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


/* =====================================================
   MAGISTRAL (PRIMARY HEADING FONT)
===================================================== */
@font-face {
  font-family: 'Magistral';
  src: url('../fonts/Magistral-Light.woff2') format('woff2'),
       url('../fonts/Magistral-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Magistral';
  src: url('../fonts/Magistral-Book.woff2') format('woff2'),
       url('../fonts/Magistral-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Magistral';
  src: url('../fonts/Magistral-Medium.woff2') format('woff2'),
       url('../fonts/Magistral-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Magistral';
  src: url('../fonts/Magistral-Bold.woff2') format('woff2'),
       url('../fonts/Magistral-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Magistral';
  src: url('../fonts/Magistral-ExtraBold.woff2') format('woff2'),
       url('../fonts/Magistral-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* =====================================================
   ROOT THEME SYSTEM
===================================================== */
:root {
  --theme-color: #00263E;
  --theme-color-light: #36576b;
  --accent-color: #F5A800;
  --support-color: #007DB4;
  --text-dark: #0B1F2A;
  --text-light: #FFFFFF;
  --text-muted: #6C7A86;
  --bg-page: #0B1F2A;
  --bg-light: #F7F9FB;
  --hover-theme: #001B2D;
  --hover-accent: #D89400;
  
}


/* =====================================================
   BASE / RESET
===================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: 'DM Sans', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-dark);
  background: #fff;
}

p {
  font-family: 'DM Sans', Arial, sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: 'Magistral', sans-serif;
  font-weight: 700;
}

img {
  max-width: 100%;
  display: block;
}
.container-wide{
  padding-left: clamp(15px, 10vw, 200px);
  padding-right: clamp(15px, 10vw, 200px);
}


/* =====================================================
   BACKGROUND COLOURS
===================================================== */

.bg-theme {
  background: var(--theme-color); 
}
.bg-theme-light {
  background: var(--theme-color-light);   
}
.bg-accent {
  background: var(--accent-color);  
}

.bg-support {
  background: var(--support-color);  
}

/* =====================================================
   TEXT COLOURS
===================================================== */

.text-theme {
  color: var(--theme-color); 
}

.text-accent {
  color: var(--accent-color);  
}

.text-support {
  color: var(--support-color);  
}


/* =====================================================
   BUTTONS
===================================================== */
.btn{
  transition: all ease-in-out 0.6s;
}
.btn-theme {
  background: var(--theme-color);
  color: #fff;
  border: none;
}

.btn-theme:hover {
  background: var(--hover-theme);
  color: #fff;
}

.btn-accent {
  background: var(--accent-color);
  color: #000;
  border: none;
}

.btn-accent:hover {
  background: var(--hover-accent);
}



/* =====================================================
   HEADER
===================================================== */
.logo{
  height: 50px;
}
.header-inside {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 10;
}

.nav-pill {
 background: linear-gradient(265.92deg, #9f9d97 0%, #F5ECDD 100%);
  padding: 12px 24px;
}

.nav-link {
  color: var(--text-dark);
  font-weight: 500;
  text-transform: uppercase;
}

.nav-link:hover {
  color: var(--theme-color);
}




.fixed-top .nav-pill {
  background: #fff;
}
/* =====================================================
   MOBILE FULL-SCREEN MENU
===================================================== */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--theme-color);
  z-index: 9999;
  padding: 24px;
  transform: translateY(-100%);
  transition: transform 0.45s ease-in-out;
}

.mobile-menu.show {
  transform: translateY(0);
}

.mobile-menu .menu-item {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
}

.mobile-menu .menu-item:hover {
  color: var(--accent-color);
}

.mobile-menu-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
}


/* =====================================================
   BOOTSTRAP SAFETY
===================================================== */
.btn:focus,
.nav-link:focus {
  box-shadow: none;
}

/* =====================================================
   HERO WRAPPER (ROUNDED)
===================================================== */
.hero-wrapper { 
  overflow: hidden;
  position: relative;
  background: #000;
}

/* =====================================================
   HERO SECTION
===================================================== */
.hero {
  min-height: calc(100vh - 2rem);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* hero image from HTML */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* overlay */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}

/* hero content */
.hero-content {
  position: relative;
  z-index: 3;
  color: var(--text-light);
  text-align: center;
}

.hero-text {
  max-width: 840px;
  margin: 0 auto;
  color: rgba(255,255,255,0.9);
}

/* =====================================
   TESTIMONIAL SECTION
===================================== */
/* Card */
.testimonial-card {
  background: #00263E;  
  position: relative;
  color: #fff;
  overflow: hidden;
  min-height: 520px;
}

/* =====================================
   CAROUSEL STRUCTURE
===================================== */
.carousel-inner,
.carousel-item {
  height: 100%;
}

.testimonial-inner {
  min-height: 520px;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* =====================================
   DECORATIVE WAVES (FIXED CUT ISSUE)
===================================== */
.testimonial-card::before,
.testimonial-card::after {
  content: "";
  position: absolute;   
  opacity: 0.15;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  top: 0;
  bottom: 0;
}

/* Left wave */
.testimonial-card::before { 
  left: 0;
  background: url('../images/wave-left.png') bottom no-repeat;
  width: 391px; 
}

/* Right wave */
.testimonial-card::after { 
  right: 0;
  background: url('../images/wave-right.png') top no-repeat;
  width: 239px; 
}

/* =====================================
   TEXT STYLES
===================================== */
.testimonial-text {   
  margin-bottom: 40px;
  color: rgba(255,255,255,0.95);
}

.testimonial-card h3 {
  font-family: 'Chronicle Display', serif; 
  margin-bottom: 4px; 
}


/* =====================================
   PREV / NEXT CONTROLS (CLOSE TO TEXT)
===================================== */
.carousel-control-prev,
.carousel-control-next {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  opacity: 1;
  width: auto;
}

/* Move arrows closer to content */
.carousel-control-prev {
  left: 15%;
}

.carousel-control-next {
  right: 15%;
}

/* Arrow buttons */
.carousel-control-prev i,
.carousel-control-next i {
  background: rgba(255,255,255,0.18);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}

/* =====================================
   MOBILE OPTIMIZATION
===================================== */
@media (max-width: 992px) {
  .carousel-control-prev {
    left: 12%;
  }

  .carousel-control-next {
    right: 12%;
  }
}

@media (max-width: 768px) {
  .testimonial-inner {
    padding: 60px 24px;
    min-height: 460px;
  }

  .testimonial-text {
    font-size: 1.1rem;
  }

  /* Hide arrows on small screens (swipe instead) */
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
}


/* =====================================
   ABOUT SECTION
===================================== */

/* Left side */

.section-about{
	min-height: calc(100vh - 2rem);
	 display: flex;
  align-items: center;
}
.about-title {
  font-family: 'Magistral', sans-serif;  
  line-height: 1.15;
  margin-bottom: 24px;
  color: var(--theme-color);
}

.about-text { 
  line-height: 1.7;
  color: var(--text-dark);
  margin-bottom: 16px;  
}

/* Highlight quote */
.about-quote {
  margin-top: 28px;
  padding: 18px 22px;
  background: var(--accent-color);
  color: #000;
  font-weight: 500;
  border-radius: 6px;
  display: inline-block;
  line-height: 1.2;
}

/* =====================================
   RIGHT CARDS
===================================== */
.about-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* CARD BASE */
.about-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: all 0.6s ease-in-out;
}


.about-card-default h3{
  font-family: 'Magistral', sans-serif; 
  color: var(--support-color);
}
/* HOVER FEATURE CONTENT */
.about-card-feature {
  position: absolute;
  inset: 0;
  padding: 28px 32px;
  background: url('../images/card-pattern.png') center/contain no-repeat, linear-gradient(135deg, #00263e, #003A5C);
  overflow: hidden;
  isolation: isolate; 
  mix-blend-mode: multiply; /* hides white */
  opacity: 0;
  visibility: hidden;
}

.about-card-feature::after {
  content: "";
  position: absolute;
  inset: 0;  
  opacity: 0.4;
  pointer-events: none;
}


/* HOVER STATE */
.about-card-hover:hover .about-card-default {
  opacity: 0;
}

.about-card-hover:hover .about-card-feature {
  opacity: 1;
  visibility: visible;
}
.about-card-feature img{
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.about-card-number{
  font-family: 'Magistral', sans-serif; 
  font-weight: 500;
  color: var(--support-color);
  opacity: 0.15;
}
/* OPTIONAL POLISH */
.about-card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.2);
}

/* TOUCH DEVICES */
@media (hover: none) {
  .about-card-feature {
    position: static;
    opacity: 1;
    visibility: visible;
    margin-top: 16px;
  }
}


/* =====================================
   SOLUTIONS SECTION
===================================== */
.section-solutions {
 min-height: calc(100vh - 2rem);
	 display: flex;
  align-items: center;
  background:url("../images/bg.webp") no-repeat;
  background-size: cover;
}

.solutions-intro {
  max-width: 720px;
  opacity: 0.9;
}

/* =====================================
   TOP TABS
===================================== */
.solution-tab {
  background: rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center; 
  font-weight: 500;
  cursor: pointer;
  transition: all 0.6s ease-in-out;
  border: 1px solid #ccc;
  font-size: 1.2rem;
}

.solution-tab img {
 height: 23px;
}

.solution-tab:hover,
.solution-tab.active {
  background: rgba(255,255,255,0.35);
}

/* =====================================
   PILLS
===================================== */
.solution-pill {
  background: rgba(0,0,0,0.25);
  padding: 10px 12px;
  border-radius: 6px;  
  transition: all ease-in-out 0.6s;
}
.solution-pill:hover{
  background: var(--accent-color);
}
/* =====================================
   RESPONSIVE
===================================== */
@media (max-width: 768px) {
  .section-solutions {
    padding: 70px 0;
  }
 
}


/* =====================================
   TECHNOLOGY SECTION
===================================== */
.section-technology {
  background: #ffffff;
}

/* LEFT CARDS */
.tech-card {
  background: linear-gradient(135deg, #00263E, #003A5C);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* Icon box */
.tech-icon {
  padding: 16px; 
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;  
}
.tech-icon img {
  width: 48px;
}
/* List */
.tech-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;  
  opacity: 0.5;
}

.tech-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #fff;
}

/* RIGHT QUOTE */
.tech-quote {
  background: var(--accent-color);
  color: #000;	
}



/* =====================================
   IMPACT / CTA SECTION
===================================== */
.section-impact {
  position: relative;
}

/* Card */
.impact-card { 
  position: relative;
}

/* Background image */
.impact-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Dark overlay */
.impact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.45) 55%,
    rgba(0,0,0,0.2) 100%
  );
  z-index: 2;
}

/* Content layer */
.impact-content {
  position: relative;	
  z-index: 2;
	 display: flex;
  align-items: center;
}


/* =====================================
   TEAM SECTION
===================================== */
.section-team {
  background: #b9ced9;
  position: relative;
}

/* Intro */
.team-intro {
  max-width: 720px;
  color: #12344d;
}

/* =====================================
   CARD
===================================== */
.team-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  padding: 0;
  text-align:start;
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.15);
}

/* Image block */
.team-img {
  background: #007DB4;
  padding: 20px 20px 0 20px;
  width: 100%;
  aspect-ratio:1 / 1 ;
  position: relative;    
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.team-img img {
  width: 100%;
  border-radius: 10px; 
  position: absolute;
  bottom: 0;
  max-height: 100%;
  object-fit: cover;
transform: translateY(15px);
}

/* Body */
.team-body {
  padding: 18px 20px;
}

/* Button */
.btn-outline-theme {
  border: 1px solid var(--theme-color);
  color: var(--theme-color);
}

.btn-outline-theme:hover {
  background: var(--theme-color);
  color: #fff;
}

/* LinkedIn */
.team-linkedin {
  width: 32px;
  height: 32px;
  background: var(--theme-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}


.section-team{
  position: relative;
}

.section-team::before{
  content: "";
  position: absolute;
  width: 281px;
  height: 259px;
  right: 0;
  top: 0;
  background: url(../images/team-bg-side.png) no-repeat;  
  opacity: 1;  
}
.section-team::after {
  content: "";
  position: absolute;
  width: 281px;
  height: 259px;
  left: -100px;
  bottom: 0;
  background: url(../images/team-bg-side.png) no-repeat;  
  opacity: 0.5;
}

/* ================================
   INSIGHTS HERO
================================ */
.section-insights {
  min-height: 90vh;
  position: relative;
  overflow: hidden;
}

/* background */
.insights-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* overlay */
.section-insights::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.35)
  );
  z-index: 2;
}

/* ================================
   GLASS CARD
================================ */
.insight-card {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  color: #fff;
}



.insight-indicators {
  position: absolute;
  margin-top: 24px;
  justify-content: center;
  bottom: 0;
}

.insight-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: 0;
  margin-right: 6px;
}

.insight-indicators .active {
  background: #fff;
}

/* smooth slide */
.carousel-item {
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}



/* =====================================
   CTA SECTION
===================================== */
.section-cta {
  position: relative;
  min-height: 720px;
  display: flex;
  align-items: center;
  background: url("../images/bg.webp") no-repeat center;
  background-size: cover;
}

/* content above everything */
.section-cta .container {
  z-index: 2;
}

/* side decorative images */
.section-cta::before {
  content: "";
  position: absolute;
  width: 303px;
  height: 585px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../images/cta-bg-left.png") no-repeat left center;
  pointer-events: none;
}

.section-cta::after {
  content: "";
  position: absolute;
  width: 447px;
  height: 585px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url("../images/cta-bg-right.png") no-repeat right center;
  pointer-events: none;
}

/* buttons */
.section-cta .btn-outline-light {
  border-width: 1.5px;
}

.section-cta .btn-outline-light:hover {
  background: #fff;
  color: var(--theme-color);
}


/* =====================================
   CONTACT SECTION
===================================== */

.icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255, 255, 255);
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-color);
  font-size: 1.2rem;
}

/* RIGHT SIDE */
.contact-form-wrapper {
  position: relative;
  min-height: 100%;
}

/* background image */
.contact-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 24px; 
}

/* form card */
.contact-form {
  background: rgba(255,255,255);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  margin: auto;
}

/* inputs */
.contact-form .form-control,
.contact-form .form-select {
  background: #eef3f7;
  border: 1px solid #d6e0ea;
  border-radius: 8px;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
  border-color: var(--support-color);
  box-shadow: none;
}
/* ===============================
   Team Member Modal
=============================== */
/* Modal shell */
.team-modal .modal-content {
  border-radius: 28px;
  overflow: hidden;
  border: none;
}

/* Layout */
.team-modal-layout {
  display: flex;
  height: 85vh;
}

/* LEFT DARK PANEL */
.team-modal-left {
  width: 38%;
  background-color: #24485d;
}

/* RIGHT WHITE PANEL */
.team-modal-right {
  width: 62%;
  background: #ffffff;
  padding: 60px 60px 40px;
  overflow: hidden;
  position: relative;
}

/* Close button */
.team-modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 10;
}

/* HEADER */
.team-modal-header {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 30px;
}

/* IMAGE */
.team-modal-image {
  width: 140px;
  height: auto;
  object-fit: cover;
  margin-left: -80px; /* 🔥 pulls image into white panel */
}

/* NAME */
.team-modal-title h2 {
  font-size: 34px;
  font-weight: 600;
  margin-bottom: 6px;
}

.team-modal-title p {
  font-size: 16px;
  color: #6c757d;
}

/* CONTENT */
.team-modal-body {
  max-height: calc(85vh - 220px);
  overflow-y: auto;
  padding-right: 20px;
}

.team-modal-body p {
  font-size: 17px;
  line-height: 1.85;
  margin-bottom: 22px;
  color: #243746;
}

/* MOBILE */
@media (max-width: 991px) {
  .team-modal-layout {
    flex-direction: column;
    height: auto;
  }

  .team-modal-left {
    display: none;
  }

  .team-modal-right {
    width: 100%;
    padding: 30px 24px;
  }

  .team-modal-image {
    margin-left: 0;
    width: 96px;
  }
}
/* ===============================
   Blog Inner Page
=============================== */
/* =====================================================
   BLOG INNER PAGE – CLEAN LAYOUT
===================================================== */

/* Page background */
.single-post,
.single-post body,
.single-post .site-main {
  background: #f8f9fa !important;
}

/* Remove any inherited dark overlays */
.single-post section::before,
.single-post section::after {
  background: none !important;
}

/* =====================================================
   HERO SECTION
===================================================== */

.blog-hero-clean {
  position: relative;
  height: 60vh;
  min-height: 380px;
  overflow: hidden;
  background: #000;
}

.blog-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.blog-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.55)
  );
}

.blog-hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 70px;
  color: #fff;
}

.blog-hero-meta {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 10px;
}

.blog-hero-title {
  font-size: 40px;
  font-weight: 700;
  max-width: 900px;
  line-height: 1.2;
}

/* =====================================================
   ARTICLE CARD
===================================================== */

.single-post-content {
  max-width: 960px;
  margin: -100px auto 0;
  background: #ffffff;
  border-radius: 18px;
  padding: 80px 80px 60px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
  position: relative;
  z-index: 3;
}

/* =====================================================
   CONTENT TYPOGRAPHY
===================================================== */

.single-post-content p {
  font-size: 17px;
  line-height: 1.85;
  margin-bottom: 22px;
  color: #243746;
}

.single-post-content h2,
.single-post-content h3 {
  margin: 42px 0 18px;
  font-weight: 600;
  color: var(--theme-color);
}

/* Lists */
.single-post-content ul {
  margin: 20px 0 30px 20px;
}

.single-post-content ul li {
  margin-bottom: 10px;
}

/* =====================================================
   POST NAVIGATION
===================================================== */

.post-navigation {
  max-width: 960px;
  margin: 60px auto 0;
  padding: 30px 20px 0;
  border-top: 1px solid #e3e7ec;
}

.post-navigation a {
  color: var(--support-color);
  font-weight: 500;
  text-decoration: none;
}

.post-navigation .nav-subtitle {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* =====================================================
   COMMENTS – CLEAN CARD
===================================================== */

.comments-area {
  max-width: 960px;
  margin: 50px auto 80px;
  background: #ffffff;
  padding: 50px;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}

.comments-title {
  font-size: 22px;
  margin-bottom: 20px;
}

/* Inputs */
.comments-area input,
.comments-area textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ccd6dd;
  padding: 10px 12px;
  font-size: 15px;
}

.comments-area input[type="submit"] {
  background: var(--accent-color);
  color: #000;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-weight: 500;
  cursor: pointer;
}

/* =====================================================
   REMOVE SIDEBARS / WIDGETS
===================================================== */

.single-post aside,
.single-post .widget,
.single-post .widget-area {
  display: none !important;
}

/* =====================================================
   MOBILE OPTIMIZATION
===================================================== */

@media (max-width: 992px) {
  .single-post-content {
    padding: 50px 32px;
    margin-top: -70px;
  }

  .blog-hero-title {
    font-size: 28px;
  }
}


/* ===============================
   FOOTER
=============================== */

.footer-top-image{
	max-height:400px;
	object-fit:cover;
	width:100%
}
.site-footer {
  background: #fff;
}

.footer-main {
  background: #fff;
  position: relative;
}

.footer-logo {
  height: 100px;
}

.footer-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: #0b1f2a;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #0b1f2a;
  text-decoration: none;
  font-size: 0.95rem;
}

.footer-links a:hover {
  color: var(--support-color);
}

/* bottom bar */
.footer-bottom {
  font-size: 0.85rem;
}

.footer-legal a {
  color: #6c7a86;
  text-decoration: none;
}

.footer-legal a:hover {
  color: var(--theme-color);
}

/* social */
.footer-social a {
  color: #0b1f2a;
  font-size: 1.1rem;
}

.footer-social a:hover {
  color: var(--support-color);
}

/* decorative pattern */
.footer-pattern {
  position: absolute;
  right: 0;
  top: 0;  
}

.footer-pattern img {
  max-width: 150px;
}

.hero-article {
  height: 60vh;
  overflow: hidden;
}

.hero-article .hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-article::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}