/* GLOBAL */


.section {
    padding: 60px 0;
}

.section-title {
    font-weight: 700;
    font-size: 1.6rem;
}

.view-all {
    font-size: 0.9rem;
    color: #6c757d;
    text-decoration: none;
}
.view-all:hover {
    color: #0d6efd;
}

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

.hero-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: 200px;
    background-size: cover;
    background-position: center;
}

.hero-card.large {
    grid-column: span 1;
    min-height: 400px;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.1));
}

.hero-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    color: #fff;
}

.hero-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

/* CARD GRID */
.media-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    transition: all .25s ease;
}

.media-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

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

.media-body {
    padding: 16px;
}

.media-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.media-meta {
    font-size: 0.8rem;
    color: #6c757d;
}

/* SIDEBAR LIST */
.side-list a {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
    text-decoration: none;
    color: #212529;
}

.side-list img {
    width: 70px;
    height: 55px;
    object-fit: cover;
    border-radius: 6px;
}

/* FOOTER FIX */
.footer {
    background: #8C8F94;
    color: #cfd8dc;
    padding: 60px 0;
}


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

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

.logo-text .dot {
  color: #4da3ff;
}

/* NAV LINKS */
.techmedia-header .nav-link {
  color: #000 !important;
  font-weight: 500;
  padding: 8px 0;
  position: relative;
  background-color:#F9F6EE;
}

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

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

.search-wrapper {
  position: relative;
}

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

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

.search-wrapper i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #b7cbd6;
  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:#f4f6f7;
}

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

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

.media-card{
background:#fff;
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:#777;
}

/* ===== 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:#fff;

}

.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:#000;

}

.side-list img{

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

}

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

.latest-card{

display:flex;
gap:15px;
background:#fff;
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:#fff;
border-radius:8px;
padding:15px;

}

.vertical-card img{

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

}


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

body{

background:#f3f6f8;

font-family:Inter,Arial;

}

/* ===== 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:#fff;

}

.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:#fff;

}

.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:#fff;

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:#888;

}

.media-title{

font-size:15px;

font-weight:600;

line-height:1.4;

}

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

.latest-news{

background:#fff;

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:#111;

}

.side-list img{

width:90px;

height:65px;

border-radius:6px;

object-fit:cover;

}

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

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

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

/* CARD */

.media-card{

background:#fff;

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:#888;

}

.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:#000;

}

.side-list img{

width:90px;

height:65px;

border-radius:6px;

object-fit:cover;

}

/* BUTTON */

.btn-blue{

background:#4dc282;

color:#fff;

border-radius:4px;

font-size:13px;

padding:6px 12px;

text-decoration:none;

}

.btn-blue:hover{

background:#41d6a9;

color:#fff;

}


.hero-big,
.hero-small{

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

}

.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:#f4f6f8;
}

.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:#fff;

}

.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:#fff;

}

.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:#fff;

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:#888;

}

/* SIDE LIST */

.side-list a{

display:flex;
gap:12px;

margin-bottom:14px;

text-decoration:none;
color:#000;

}

.side-list img{

width:95px;

height:70px;

object-fit:cover;

border-radius:6px;

}

/* BUTTON */

.btn-blue{

background:#4dc282;
color:#fff;

padding:6px 12px;

border-radius:4px;

font-size:13px;

text-decoration:none;

}

.btn-blue:hover{

background:#41d6a9;

color:#fff;

}


/* CARD GRID */

.news-grid{

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

}

/* CARD */

.news-card{

display:flex;

gap:18px;

background:#f1f4f5;

padding:15px;

border-radius:12px;

align-items:center;

text-decoration:none;

color:#222;

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:#6c757d;

margin-bottom:6px;

}

/* TITLE */

.news-title{

font-weight:600;

font-size:15px;

line-height:1.4;

margin-bottom:8px;

}

/* LEARN MORE */

.learn-more{

color:#198754;

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:#666;
margin-bottom:30px;

}

/* CATEGORY TITLE */

.vertical-cat{

font-weight:700;
font-size:15px;
border-left:4px solid #1e6bff;

padding-left:10px;

margin-bottom:15px;

}

/* BIG CARD */

.vertical-big{

display:block;

background:#fff;

border-radius:8px;

overflow:hidden;

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

text-decoration:none;

color:#000;

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:#fff;

border-radius:8px;

padding:10px;

margin-bottom:12px;

text-decoration:none;

color:#000;

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:#6c757d;

}