/* GLOBAL */



/* HEADER BACKGROUND */
.techmedia-header {
  background-color: #F8F9FA;
  padding: 14px 0;
}

/* LOGO */
.logo-text {
  font-size: 26px;
  font-weight: 700;
  color: #000000;
  letter-spacing: 0.5px;
}

.logo-text .dot {
  color: #1186E6;
}

/* 
 LINKS */
.techmedia-header .nav-link {
  color: #092551 !important;
  font-weight: 500;
  
  position: relative;
  
}

.techmedia-header .nav-link:hover,
.techmedia-header .nav-link.active {
  color: #194378 !important;
  
}

/* SEARCH BAR */
.header-search {
  margin-left: auto;
}

.search-wrapper {
  position: relative;
}

.search-wrapper input {
  background: transparent;
  border: 1px solid rgba(102, 90, 90, 0.3);
  border-radius: 6px;
  padding: 6px 12px 6px 34px;
  color: #194378;
  font-size: 14px;
  width: 250px;
}

.search-wrapper input::placeholder {
  color: #092551;
}

.search-wrapper i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #092551;
  font-size: 14px;
}

/* MOBILE FIX */
@media (max-width: 991px) {
  .header-search {
    margin-top: 15px;
  }
}


.whitepaper-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whitepaper-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

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


.webinar-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.webinar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

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


.case-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.case-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

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


.blog-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

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


/* ===== GENERAL ===== */

.section{
padding:40px 0;
background:#F8F9FA;
}

.section-title{
font-weight:700;
font-size:22px;
}

.view-all{
font-size:13px;
color:#1186E6;
text-decoration:none;
}

.media-card{
background:#FFFFFF;
border-radius:8px;
overflow:hidden;
box-shadow:0 2px 6px rgba(0,0,0,.08);
transition:.3s;
height:100%;
}

.media-card:hover{
transform:translateY(-4px);
}

.media-card img{
width:100%;
height:170px;
object-fit:cover;
}

.media-body{
padding:15px;
}

.media-title{
font-size:15px;
font-weight:600;
line-height:1.4;
}

.media-meta{
font-size:12px;
color:#BFC2C6;
}

/* ===== HERO GRID ===== */

.hero-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr;
grid-template-rows:220px 220px;
gap:15px;

}

.hero-card{

position:relative;
background-size:cover;
background-position:center;
border-radius:8px;
overflow:hidden;
color:#FFFFFF;

}

.hero-card.large{

grid-row:span 2;

}

.hero-overlay{

position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.7),
transparent
);

}

.hero-content{

position:absolute;
bottom:15px;
left:15px;
right:15px;

}

.hero-content h3{

font-size:18px;
font-weight:700;

}

/* ===== CASE SIDE LIST ===== */

.side-list a{

display:flex;
gap:10px;
margin-bottom:15px;
text-decoration:none;
color:#000000;

}

.side-list img{

width:90px;
height:65px;
object-fit:cover;
border-radius:6px;

}

/* ===== PDF STYLE LATEST NEWS ===== */

.latest-card{

display:flex;
gap:15px;
background:#FFFFFF;
padding:10px;
border-radius:6px;
margin-bottom:15px;
align-items:center;

}

.latest-card img{

width:110px;
height:75px;
object-fit:cover;
border-radius:6px;

}

/* ===== NEWS VERTICAL ===== */

.vertical-card{

background:#FFFFFF;
border-radius:8px;
padding:15px;

}

.vertical-card img{

width:100%;
height:150px;
object-fit:cover;
border-radius:6px;

}


/* ===== BODY ===== */


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

.section{

padding:45px 0;

}

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

.hero-wrap{

display:grid;

grid-template-columns:2fr 1fr;

gap:20px;

}

/* LEFT BIG */

.hero-big{

position:relative;

height:460px;

border-radius:10px;

overflow:hidden;

background-size:cover;

background-position:center;

color:#FFFFFF;

}

.hero-big:before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

to top,

rgba(0,0,0,.85),

transparent

);

}

.hero-text{

position:absolute;

bottom:20px;

left:20px;

right:20px;

}

.hero-text h2{

font-weight:700;

font-size:26px;

}

/* RIGHT GRID */

.hero-small-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.hero-small{

position:relative;

height:220px;

border-radius:8px;

overflow:hidden;

background-size:cover;

background-position:center;

color:#FFFFFF;

}

.hero-small:before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(

to top,

rgba(0,0,0,.8),

transparent

);

}

.hero-small h4{

position:absolute;

bottom:12px;

left:12px;

right:12px;

font-size:15px;

font-weight:600;

}

/* ===== MEDIA CARD ===== */

.media-card{

background:#FFFFFF;

border-radius:8px;

overflow:hidden;

box-shadow:0 3px 8px rgba(0,0,0,.08);

height:100%;

transition:.3s;

}

.media-card:hover{

transform:translateY(-5px);

}

.media-card img{

width:100%;

height:170px;

object-fit:cover;

}

.media-body{

padding:15px;

}

.media-meta{

font-size:12px;

color:#BFC2C6;

}

.media-title{

font-size:15px;

font-weight:600;

line-height:1.4;

}

/* ===== LATEST NEWS ===== */

.latest-news{

background:#FFFFFF;

border-radius:8px;

padding:15px;

margin-bottom:15px;

display:flex;

gap:15px;

align-items:center;

}

.latest-news img{

width:120px;

height:80px;

object-fit:cover;

border-radius:6px;

}

/* ===== CASE SIDE ===== */

.side-list a{

display:flex;

gap:10px;

margin-bottom:15px;

text-decoration:none;

color:#000000;

}

.side-list img{

width:90px;

height:65px;

border-radius:6px;

object-fit:cover;

}

.section{
padding:45px 0;
background:#F8F9FA;
}

.section-title{
font-weight:700;
font-size:22px;
}

.view-all{
text-decoration:none;
font-size:13px;
color:#1186E6;
}

/* CARD */

.media-card{

background:#FFFFFF;

border-radius:10px;

overflow:hidden;

box-shadow:0 3px 10px rgba(0,0,0,.08);

transition:.3s;

height:100%;

}

.media-card:hover{

transform:translateY(-6px);

}

.media-card img{

width:100%;

height:170px;

object-fit:cover;

}

.media-body{

padding:15px;

}

.media-meta{

font-size:12px;

color:#BFC2C6;

}

.media-title{

font-weight:600;

font-size:15px;

line-height:1.4;

}

/* CASE SIDE */

.side-list a{

display:flex;

gap:12px;

margin-bottom:15px;

text-decoration:none;

color:#000000;

}

.side-list img{

width:90px;

height:65px;

border-radius:6px;

object-fit:cover;

}

/* BUTTON */

.btn-blue{

background:#092551;

color:#FFFFFF;

border-radius:4px;

font-size:13px;

padding:6px 12px;

text-decoration:none;

}

.btn-blue:hover{

background:#194378;

color:#FFFFFF;

}


.hero-big,
.hero-small{

display:block;
text-decoration:none;
color:#FFFFFF;

}

.hero-big{

position:relative;
height:460px;
background-size:cover;
background-position:center;
border-radius:10px;
overflow:hidden;

}

.hero-big:before{

content:"";
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.8),
transparent);

}

.hero-text{

position:absolute;
bottom:20px;
left:20px;
right:20px;

}

.hero-small-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:15px;

}

.hero-small{

position:relative;
height:220px;
border-radius:8px;
background-size:cover;
background-position:center;
overflow:hidden;

}

.hero-small:before{

content:"";
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,.8),
transparent);

}

.hero-small h4{

position:absolute;
bottom:10px;
left:12px;
right:12px;

font-size:15px;
font-weight:600;

}


/* GENERAL */

.section{
padding:45px 0;
background:#F8F9FA;
}

.section-title{

font-size:22px;
font-weight:700;

}

/* HERO */

.hero-main{

display:grid;
grid-template-columns:2fr 1fr;
gap:20px;

}

.hero-big{

display:block;
height:470px;

background-size:cover;
background-position:center;

position:relative;

border-radius:10px;
overflow:hidden;

color:#FFFFFF;

}

.hero-big:before{

content:"";

position:absolute;
inset:0;

background:linear-gradient(
to top,
rgba(0,0,0,.85),
transparent);

}

.hero-content{

position:absolute;

bottom:20px;
left:20px;
right:20px;

}

.hero-content h2{

font-size:26px;
font-weight:700;

}

/* SMALL GRID */

.hero-side{

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.hero-small{

display:block;

height:225px;

background-size:cover;

background-position:center;

border-radius:8px;

position:relative;

overflow:hidden;

color:#FFFFFF;

}

.hero-small:before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
to top,
rgba(0,0,0,.85),
transparent);

}

.hero-small h4{

position:absolute;

bottom:12px;
left:12px;
right:12px;

font-size:15px;

}

/* CARD */

.media-card{

background:#FFFFFF;

border-radius:8px;

overflow:hidden;

box-shadow:0 3px 10px rgba(0,0,0,.08);

height:100%;

}

.media-card img{

width:100%;
height:170px;
object-fit:cover;

}

.media-body{

padding:15px;

}

.media-title{

font-weight:600;

font-size:15px;

}

.media-meta{

font-size:12px;
color:#BFC2C6;

}

/* SIDE LIST */

.side-list a{

display:flex;
gap:12px;

margin-bottom:14px;

text-decoration:none;
color:#000000;

}

.side-list img{

width:95px;

height:70px;

object-fit:cover;

border-radius:6px;

}

/* BUTTON */

.btn-blue{

background:#092551;
color:#FFFFFF;

padding:6px 12px;

border-radius:4px;

font-size:13px;

text-decoration:none;

}

.btn-blue:hover{

background:#1186E6;

color:#FFFFFF;

}


/* CARD GRID */

.news-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:25px;

}

/* CARD */

.news-card{

display:flex;

gap:18px;

background:#F8F9FA;

padding:15px;

border-radius:12px;

align-items:center;

text-decoration:none;

color:#000000;

transition:.3s;

}

.news-card:hover{

transform:translateY(-4px);

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

/* IMAGE */

.news-card img{

width:160px;

height:95px;

object-fit:cover;

border-radius:6px;

}

/* META */

.news-meta{

font-size:13px;

color:#BFC2C6;

margin-bottom:6px;

}

/* TITLE */

.news-title{

font-weight:600;

font-size:15px;

line-height:1.4;

margin-bottom:8px;

}

/* LEARN MORE */

.learn-more{

color:#092551;

font-weight:600;

font-size:14px;

}

.learn-more span{

margin-left:5px;

}

/* NEWS VERTICALS */

.vertical-title{

font-size:22px;
font-weight:700;
margin-bottom:5px;

}

.vertical-sub{

font-size:14px;
color:#BFC2C6;
margin-bottom:30px;

}

/* CATEGORY TITLE */

.vertical-cat{

font-weight:700;
font-size:15px;
border-left:4px solid #1186E6;

padding-left:10px;

margin-bottom:15px;

}

/* BIG CARD */

.vertical-big{

display:block;

background:#FFFFFF;

border-radius:8px;

overflow:hidden;

box-shadow:0 2px 8px rgba(0,0,0,.08);

text-decoration:none;

color:#000000;

margin-bottom:15px;

}

.vertical-big img{

width:100%;

height:200px;

object-fit:cover;

}

.vertical-big-body{

padding:12px;

}

.vertical-big-title{

font-weight:600;

font-size:15px;

}

/* SMALL CARD */

.vertical-small{

display:flex;

gap:12px;

align-items:center;

background:#FFFFFF;

border-radius:8px;

padding:10px;

margin-bottom:12px;

text-decoration:none;

color:#000000;

box-shadow:0 2px 6px rgba(0,0,0,.07);

}

.vertical-small img{

width:90px;

height:55px;

border-radius:6px;

object-fit:cover;

}

.vertical-small-title{

font-size:13px;

font-weight:600;

}

.vertical-date{

font-size:12px;

color:#BFC2C6;

}



.container {
  width: 85%;
  margin: auto;
}

/* HERO */
.hero {
  
  color: #FFFFFF;
  padding: 80px 0;
}

.hero h1 {
  font-size: 42px;
  margin-bottom: 20px;
}

.hero p {
  max-width: 600px;
  margin-bottom: 25px;
  color: #BFC2C6;
}

.buttons {
  display: flex;
  gap: 15px;
}

.btn {
  padding: 12px 20px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

.primary {
  background: #092551;
  color: #FFFFFF;
}

.outline {
  border: 2px solid #1186E6;
  color: #1186E6;
}

/* ABOUT */
.about {
  padding: 70px 0;
  background: #F8F9FA;
}

.about h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.about p {
  margin-bottom: 10px;
  color: #BFC2C6;
}

/* PARTNERS */
.partners {
  padding: 60px 0;
  text-align: center;
}

.partners h2 {
  margin-bottom: 30px;
}

.logos {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.logo {
  background: #F8F9FA;
  padding: 15px 25px;
  border-radius: 6px;
  font-weight: bold;
}

/* CATEGORIES */
.categories {
  padding: 70px 0;
  background: #F8F9FA;
}

.categories h2 {
  text-align: center;
  margin-bottom: 40px;
}

.cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  padding: 25px;
  width: 280px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.card h3 {
  margin-bottom: 10px;
}

.marketing {
  border-left: 6px solid #092551;
}

.hr {
  border-left: 6px solid #1186E6;
}

.finance {
  border-left: 6px solid #000000;
}

/* SUBSCRIBE */
.subscribe {
  padding: 60px 0;
  text-align: center;
}

.subscribe h2 {
  margin-bottom: 20px;
}

.carousel-image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

/* Image styling */
.carousel-image-wrapper img {
  height: 420px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Zoom effect */
.carousel-item.active img {
  transform: scale(1.05);
}

/* Bottom gradient overlay */
.carousel-overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 25px;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.5),
    transparent
  );

  color: #FFFFFF;
}

/* Title */
.carousel-overlay-bottom h3 {
  font-size: 1.5rem;
  line-height: 1.4;
}

/* Remove arrows */
.carousel-control-prev,
.carousel-control-next {
  display: none;
}

/* Indicators styling */
.carousel-indicators {
  bottom: 10px;
}

.carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #FFFFFF;
  opacity: 0.5;
}

.carousel-indicators .active {
  opacity: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .carousel-image-wrapper img {
    height: 250px;
  }

  .carousel-overlay-bottom h3 {
    font-size: 1.2rem;
  }
}
.vendors-section {
  background: linear-gradient(to bottom, #F8F9FA, #F8F9FA);
  position: relative;
  overflow: hidden;
}

.vendors-section {
  background-color: #F8F9FA; /* flat light gray like screenshot */
  padding-top: 80px;
  padding-bottom: 80px;
}

/* logo box */
.vendor-box {
  width: 80px;
  height: 70px;
  background: #FFFFFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: 0.3s;
}

.vendor-box img {
  max-width: 100%;
  max-height: 35px;
  object-fit: contain;
}

.vendor-box:hover {
  transform: translateY(-3px);
}

/* =========================
   ROOT + BETTER SCALING
========================= */
:root {
  --space: 16px;
}

body {
  overflow-x: hidden;
}

/* Better typography scaling */
h1 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

h3 {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

p {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
}

/* =========================
   HERO SECTION (PRO LEVEL)
========================= */
.hero {
  overflow: hidden;
}

.hero .row {
  row-gap: 25px;
}

/* Center text on mobile */
@media (max-width: 768px) {
  .hero {
    text-align: center;
  }
}

/* Carousel improvements */
.carousel-inner {
  border-radius: 16px;
}

.carousel-image-wrapper img {
  width: 100%;
  height: clamp(200px, 40vw, 420px);
  object-fit: cover;
  border-radius: 16px;
}

/* Overlay smooth padding */
.carousel-overlay-bottom {
  padding: clamp(12px, 2vw, 25px);
}

/* =========================
   VENDOR SECTION PERFECT ALIGN
========================= */
.vendors-section .container {
  max-width: 1100px;
}

.vendor-box {
  width: clamp(70px, 10vw, 120px);
  height: clamp(40px, 6vw, 60px);
  padding: 5px;
}

.vendor-box img {
  max-height: 100%;
  object-fit: contain;
}

/* Prevent overflow rows */
.vendors-section .d-flex {
  justify-content: center;
}

/* =========================
   CATEGORY CARDS (SMART GRID)
========================= */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.cards .card {
  padding: 20px;
  border-radius: 12px;
}

/* =========================
   NEWS GRID (PERFECT AUTO GRID)
========================= */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-card img {
  height: clamp(160px, 25vw, 200px);
  object-fit: cover;
}

/* Make cards equal height */
.news-card > div {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* =========================
   BLOG SECTION (SMART STACK)
========================= */
.vertical-big img {
  height: clamp(180px, 25vw, 220px);
}

.vertical-small {
  display: flex;
  gap: 10px;
  align-items: center;
}

.vertical-small img {
  width: 70px;
  height: 60px;
  border-radius: 6px;
}

/* =========================
   SPACING SYSTEM (CLEAN UI)
========================= */
.section {
  padding: clamp(40px, 6vw, 70px) 0;
}

.section-title {
  margin-bottom: 25px;
}

.vertical-title {
  margin-bottom: 10px;
}

.vertical-sub {
  margin-bottom: 30px;
}

/* =========================
   BUTTON IMPROVEMENT
========================= */
.btn.primary {
  padding: 12px 24px;
  font-size: 1rem;
  border-radius: 8px;
}

/* =========================
   MOBILE POLISH
========================= */
@media (max-width: 576px) {

  /* Reduce spacing */
  .section {
    padding: 35px 0;
  }

  /* Better tap targets */
  a {
    display: block;
  }

  .news-card {
    border-radius: 10px;
    overflow: hidden;
  }

  /* Center subscribe */
  .subscribe {
    text-align: center;
  }

}

/* =========================
   ULTRA SMALL DEVICES
========================= */
@media (max-width: 360px) {

  h1 {
    font-size: 1.3rem;
  }

  .carousel-overlay-bottom h3 {
    font-size: 0.95rem;
  }

}

/* =========================
   LARGE SCREEN IMPROVEMENT
========================= */
@media (min-width: 1400px) {

  .container {
    max-width: 1250px;
  }

}

/* =========================
   SMOOTH UI TOUCH
========================= */
.carousel,
.news-card,
.card,
.vendor-box {
  transition: all 0.3s ease;
}

/* Hover (desktop only) */
@media (hover: hover) {

  .news-card:hover {
    transform: translateY(-5px);
  }

  .vendor-box:hover {
    transform: scale(1.05);
  }

}

/* =========================
   PREVENT LAYOUT BREAKS
========================= */
.row {
  margin-left: 0;
  margin-right: 0;
}

/* =========================
   GRID (LIKE YOUR FIRST UI)
========================= */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* =========================
   CARD DESIGN (MODERN)
========================= */
.news-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #BFC2C6;
}

.news-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Hover effect */
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Title */
.news-title {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #000000;
}

/* Learn more */
.learn-more {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1186E6;
}

/* =========================
   CATEGORY BUTTONS
========================= */
.category-btn {
  background: #F8F9FA;
  color: #1186E6;
  border: none;
  transition: all 0.3s ease;
}

.category-btn:hover {
  background: #1186E6;
  color: #FFFFFF;
}

/* =========================
   RESPONSIVE PERFECT
========================= */
@media (max-width: 992px) {
  .news-card img {
    height: 160px;
  }
}

@media (max-width: 768px) {

  .news-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .news-card img {
    height: 150px;
  }

}

@media (max-width: 480px) {

  .news-grid {
    grid-template-columns: 1fr;
  }

  .news-card img {
    height: 140px;
  }

}

/* Fix card overflow */
.whitepaper-card,
.news-card {
  overflow: hidden;
}

/* Fix badge wrapping */
.badge {
  white-space: normal !important;
  word-break: break-word;
  text-align: center;
}

/* Prevent long text overflow */
.news-title,
.card-title {
  word-break: break-word;
}

/* Fix flex wrapping issue */
.d-flex.flex-wrap {
  flex-wrap: wrap !important;
}

/* Ensure proper spacing */
.news-card .badge,
.whitepaper-card .badge {
  max-width: 100%;
}

/* Fix container overflow issue */
.container {
  overflow-x: hidden;
}

/* =========================
   GRID
========================= */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

/* =========================
   CARD
========================= */
.news-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #BFC2C6;
  transition: all 0.3s ease;
}

.news-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Hover */
.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* =========================
   TEXT
========================= */
.news-title {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: #000000;
  word-break: break-word;
}

.learn-more {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1186E6;
}

/* =========================
   BADGE FIX (IMPORTANT)
========================= */
.badge {
  white-space: normal !important;
  word-break: break-word;
  text-align: center;
  font-size: 0.75rem;
  border-radius: 20px;
}

/* =========================
   CATEGORY BUTTON
========================= */
.category-btn {
  background: #F8F9FA;
  color: #1186E6;
  border: none;
  transition: 0.3s;
}

.category-btn:hover {
  background: #1186E6;
  color: #FFFFFF;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {
  .news-card img {
    height: 160px;
  }
}

@media (max-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .news-card img {
    height: 150px;
  }
}

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

  .news-card img {
    height: 140px;
  }
}

/* Prevent overflow */
.container {
  overflow-x: hidden;
}

/* Fix spacing + prevent touching */
.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/* Card styling */
.card-custom {
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s ease;
    border: 1px solid #BFC2C6;
    background: #FFFFFF;
}

.card-custom:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Image fix */
.img-container {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Card body spacing */
.card-body {
    padding: 15px;
}

/* Badge styling */
.badge-custom {
    background-color: #F8F9FA;
    color: #000000;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
}

/* Remove unwanted global conflicts (important) */
.row > * {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}

#refreshCaptcha {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
}

#captchaError {
  color: #092551;
  font-size: 14px;
  margin-top: 5px;
}

.site-footer {
    position: relative;
    padding: 70px 0 30px;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-top: 1px solid rgba(255,255,255,.7);
    box-shadow:
        0 -10px 40px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(37,99,235,.08),
            transparent 35%),
        radial-gradient(circle at 85% 10%,
            rgba(99,102,241,.06),
            transparent 30%);
}

.footer-logo {
    max-width: 140px;
    margin-bottom: 25px;
}

.footer-about {
    color: #475569;
    line-height: 1.9;
    max-width: 300px;
    font-size: 15px;
}



.footer-links {
    list-style: none;
    padding: 0;
}

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

.footer-links a {
    color: #64748b;
    text-decoration: none;
    transition: .3s ease;
}

.footer-links a:hover {
    color: #2563eb;
    padding-left: 4px;
}

/* Newsletter */
.newsletter-label {
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.newsletter-heading {
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 25px;
}

.newsletter-form {
    max-width: 420px;
}

.footer-input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 14px;

    border-radius: 12px;
    border: 1px solid rgba(148,163,184,.25);

    background: rgba(255,255,255,.65);
    backdrop-filter: blur(12px);

    color: #0f172a;
    transition: all .3s ease;
}

.footer-input::placeholder {
    color: #94a3b8;
}

.footer-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* Button below inputs */
.footer-btn {
    width: 180px;

    padding: 13px 20px;

    border: none;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #3b82f6
    );

    color: #fff;
    font-weight: 600;

    transition: .3s ease;
}

.footer-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(37,99,235,.25);
}

.newsletter-note {
    margin-top: 15px;

    color: #64748b;
    font-size: 14px;
}

.newsletter-note a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 500;
}

.footer-bottom {
    margin-top: 60px;
    padding-top: 25px;

    border-top: 1px solid rgba(148,163,184,.15);

    text-align: center;

    color: #64748b;
    font-size: 14px;
}