/*
Theme Name: July36 Global News
Version: 15.3 Ultra Premium Global Newsroom
Author: Mamun
*/

/* RESET */

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

/* ROOT */

:root{

--primary:#d40000;
--primary-dark:#a80000;

--green:#0f8a2a;

--sky:#5aa7b5;

--dark:#041b34;

--bg:#eef2f7;

--text:#1f2937;

--muted:#6b7280;

--white:#ffffff;

--border:#e5e7eb;

--radius:14px;

--shadow:
0 4px 20px rgba(0,0,0,.06);

--container:1450px;

}

/* BASE */

html{

scroll-behavior:smooth;

}

body{

font-family:
'SolaimanLipi',
Inter,
Arial,
sans-serif;

font-size:16px;

line-height:1.8;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

}

img{

display:block;

max-width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

transition:.25s;

}

a:hover{

color:var(--primary);

}

ul,
ol{

list-style:none;

}

.container{

width:100%;

max-width:1450px;

margin:auto;

padding:0 20px;

}

/* TOP HEADER */

.top-header{

background:var(--sky);

padding:10px 0;

font-size:14px;

color:#fff;

}

.top-header-wrap{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:12px;

}

.top-social{

display:flex;

gap:14px;

}

.live-indicator{

font-size:13px;

font-weight:800;

animation:livePulse 1.4s infinite;

}

@keyframes livePulse{

0%{opacity:1;}

50%{opacity:.55;}

100%{opacity:1;}

}

/* HEADER */

.header{

background:var(--green);

position:sticky;

top:0;

z-index:9999;

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

}

.main-header{

background:var(--green);

}

.header-wrap{

display:flex;

justify-content:space-between;

align-items:center;

padding:12px 0;

gap:30px;

}

.custom-logo{

max-height:90px;

width:auto;

}

.site-branding img{

max-width:240px;

height:auto;

}

.nav{

margin-left:auto;

}

.nav-menu{

display:flex;

gap:28px;

align-items:center;

flex-wrap:wrap;

}

.nav-menu a{

font-size:17px;

font-weight:800;

color:#fff;

padding:10px 0;

}

.nav-menu a:hover{

color:#d4ffd9;

}

.mobile-toggle{

display:none;

background:none;

border:none;

cursor:pointer;

}

.mobile-toggle span{

display:block;

width:26px;

height:3px;

background:#fff;

margin:5px 0;

}

.search-toggle{

background:none;

border:none;

color:#fff;

font-size:20px;

cursor:pointer;

}

/* BREAKING */

.breaking-wrapper{

background:var(--primary);

overflow:hidden;

border-bottom:4px solid red;

}

.breaking-bar{

display:flex;

height:50px;

align-items:center;

overflow:hidden;

}

.breaking-label{

background:#920000;

padding:0 18px;

font-weight:900;

color:#fff;

display:flex;

align-items:center;

flex-shrink:0;

}

.breaking-news{

overflow:hidden;

flex:1;

}

.breaking-track{

display:flex;

gap:80px;

white-space:nowrap;

width:max-content;

animation:
tickerNews 70s linear infinite;

will-change:transform;

}

.breaking-track a{

color:#fff;

font-weight:700;

}

@keyframes tickerNews{

0%{

transform:
translateX(100%);

}

100%{

transform:
translateX(-100%);

}

}

/* SECTION */

.section-head{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.section-head h2{

font-size:24px;

font-weight:800;

color:var(--dark);

}

/* LAYOUT */

.hero-grid{

display:grid;

grid-template-columns:
minmax(0,2.3fr)
320px;

gap:24px;

align-items:start;

}

.main-news-grid,
.archive-grid,
.search-layout{

display:grid;

grid-template-columns:
minmax(0,1fr)
320px;

gap:24px;

}

.hero-sidebar{

display:flex;

flex-direction:column;

gap:14px;

}

/* HERO */

.hero-image{

width:100%;

height:620px;

object-fit:cover;

border-radius:14px;

}

.hero-overlay{

padding:18px;

}

.hero-overlay h1{

font-size:34px;

line-height:1.3;

margin:10px 0;

}

.hero-overlay p{

color:var(--muted);

}

/* GRID */

.news-grid,
.latest-grid{

display:grid;

grid-template-columns:
repeat(4,minmax(0,1fr));

gap:24px;

width:100%;

}

.latest-strip{

margin:35px 0;

}

/* CARD */

.news-card{

background:#fff;

border-radius:14px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.25s;

display:flex;

flex-direction:column;

height:100%;

}

.news-card:hover{

transform:
translateY(-4px);

}

.news-card img{

width:100%;

aspect-ratio:16/9;

object-fit:cover;

}

.news-content{

padding:16px;

}

.news-content h3{

font-size:17px;

line-height:1.45;

}

.news-category{

font-size:12px;

font-weight:800;

color:var(--primary);

margin-bottom:8px;

display:block;

}

/* SIDEBAR */

.sidebar-widget{

background:#fff;

padding:18px;

border-radius:14px;

box-shadow:var(--shadow);

margin-bottom:22px;

}

.sidebar-story{

display:flex;

gap:10px;

padding:8px;

align-items:center;

background:#fff;

border-radius:12px;

min-height:70px;

}

.sidebar-thumb{

width:90px;

flex-shrink:0;

}

.sidebar-thumb img{

width:100%;

height:65px;

object-fit:cover;

border-radius:8px;

}

.sidebar-content{

flex:1;

display:flex;

align-items:center;

}

.sidebar-content h3{

font-size:14px;

line-height:1.4;

}

.popular-sidebar{

position:sticky;

top:100px;

align-self:start;

}

/* SEARCH */

.search-overlay{

position:fixed;

inset:0;

background:
rgba(0,0,0,.75);

display:none;

z-index:99999;

}

.search-overlay.active{

display:flex;

justify-content:center;

align-items:center;

}

.search-box{

background:#fff;

padding:30px;

border-radius:18px;

width:90%;

max-width:700px;

}

/* FOOTER */

.footer{

background:var(--sky);

padding:70px 0;

margin-top:70px;

color:#fff;

overflow:hidden;

}

.footer-grid{

display:grid;

grid-template-columns:
2fr 1fr 1fr 1fr;

gap:30px;

}

/* TABLET */

@media(max-width:1100px){

.hero-grid,
.main-news-grid,
.archive-grid,
.search-layout{

grid-template-columns:1fr;

}

.news-grid,
.latest-grid{

grid-template-columns:
repeat(2,1fr);

}

.popular-sidebar{

position:static;

}

}

/* MOBILE */

@media(max-width:768px){

.mobile-toggle{

display:block;

}

.nav-menu{

display:none;

}

.nav-menu.active{

display:flex;

position:absolute;

top:90px;

left:0;

width:100%;

background:var(--green);

padding:20px;

flex-direction:column;

overflow-y:auto;

max-height:
calc(100vh - 90px);

}

.news-grid,
.latest-grid{

grid-template-columns:1fr;

}

.hero-image{

height:320px;

}

.custom-logo{

max-height:70px;

}

.popular-sidebar{

position:static;

}

.footer-grid{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.section-head h2{

font-size:20px;

}

.hero-overlay h1{

font-size:26px;

}

.sidebar-thumb{

width:78px;

}

.sidebar-thumb img{

height:58px;

}

}