@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

/* ================= HERO BACKGROUND STYLE ================= */

.tw-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background: url("images/Advertising.jpg") no-repeat right center;
    background-size: contain;
    background-color: #111;
    display: flex;
    align-items: center;
    padding: 0 8%;
    overflow: hidden;
}

/* Dark Gradient Overlay */
.tw-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.85) 40%,
        rgba(0,0,0,0.5) 70%,
        rgba(0,0,0,0.1) 100%
    );
}

/* TEXT CONTENT */
.tw-hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    color: #fff;
}

.tw-hero-content h1 {
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2;
}

.tw-hero-content h1 span {
    color: #f4b400;
}

.tw-hero-content p {
    margin: 20px 0 35px;
    font-size: 18px;
    color: #ddd;
    line-height: 1.6;
}

/* BUTTONS */
.tw-hero-buttons {
    display: flex;
    gap: 20px;
}

.btn-primary {
    background: #f4b400;
    color: #000;
    padding: 14px 32px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-primary:hover {
    background: #ffcc33;
    transform: translateY(-3px);
}

.btn-outline {
    border: 2px solid #f4b400;
    color: #f4b400;
    padding: 14px 32px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-outline:hover {
    background: #f4b400;
    color: #000;
}


/* ===============================
WHY ADVERTISE WITH JIBON
PREMIUM STARTUP DESIGN
================================ */
body{
font-family:'Inter',sans-serif;
}
.advertise-section{
padding:110px 20px;
background: linear-gradient(to bottom,#fff8e1,#ffffff);
}

.container{
max-width:1250px;
margin:auto;
}

/* HEADER */

.section-header{
text-align:center;
margin-bottom:70px;
}

.section-header h2{
font-size:40px;
font-weight:700;
color:#222;
margin-bottom:10px;
}

.section-header span{
color:#f4b400;
}

.section-header p{
font-size:17px;
color:#666;
max-width:650px;
margin:auto;
line-height:1.6;
}

/* GRID */

.advertise-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

/* CARD */

.advertise-card{
background:#fff;
padding:45px 35px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,0.05);
transition:all 0.35s ease;
position:relative;
overflow:hidden;
 border: 1px solid #eee;
}

/* GLOW EFFECT */

.advertise-card:hover{
transform:translateY(-12px);
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

/* TOP LINE */

.advertise-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#ffd54f;
transform:scaleX(0);
transition:0.4s;
}

.advertise-card:hover::before{
transform:scaleX(1);
}

/* ICON */

.icon{
width:75px;
height:75px;
background:#fff4d6;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
margin:auto;
margin-bottom:20px;
transition:0.3s;
}

.icon svg{
width:37px;
height:37px;
stroke:#f4b400;
stroke-width:2;
}

.advertise-card:hover .icon{
background:#f4b400;
}

.advertise-card:hover .icon svg{
stroke:white;
}
.icon{
box-shadow:0 5px 15px rgba(0,0,0,0.08);
}
/* TITLE */

.advertise-card h3{
font-size:19px;
margin-bottom:10px;
color:#222;
}

/* TEXT */

.advertise-card p{
font-size:15px;
color:#777;
line-height:1.6;
}

/* TABLET */

@media(max-width:1024px){

.advertise-grid{
grid-template-columns:repeat(2,1fr);
}

}

/* MOBILE */

@media(max-width:600px){

.advertise-grid{
grid-template-columns:1fr;
}

.section-header h2{
font-size:30px;
}

}



/* ===============================
NORTH EAST PRESENCE SECTION
================================ */

.ne-presence{
padding:110px 20px;
background:linear-gradient(to bottom,#ffffff,#fff8e1);
}

.ne-presence .container{
max-width:1250px;
margin:auto;
}

/* HEADER */

.ne-presence .section-header{
text-align:center;
margin-bottom:70px;
}

.ne-presence h2{
font-size:40px;
font-weight:700;
color:#222;
margin-bottom:10px;
}

.ne-presence span{
color:#f4b400;
}

.ne-presence p{
max-width:650px;
margin:auto;
color:#666;
font-size:17px;
line-height:1.6;
}


/* GRID */

.presence-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}


/* CARD */

.presence-card{
background:white;
padding:45px 35px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,0.05);
transition:all 0.35s ease;
position:relative;
overflow:hidden;
border: 1px solid #eee;
}


/* HOVER EFFECT */

.presence-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(0,0,0,0.08);
}


/* ICON */

.presence-card .icon{
width:75px;
height:75px;
margin:auto;
margin-bottom:18px;
background:#fff4d6;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
transition:0.3s;
}

.presence-card .icon svg{
width:33px;
height:33px;
stroke:#f4b400;
stroke-width:2;
}

.presence-card:hover .icon{
background:#f4b400;
}

.presence-card:hover .icon svg{
stroke:white;
}


/* TITLE */

.presence-card h3{
font-size:20px;
margin-bottom:10px;
color:#222;
}


/* STATUS BADGE */

.status{
display:inline-block;
font-size:16px;
padding:6px 14px;
border-radius:20px;
margin-bottom:15px;
font-weight:600;
}

.status.active{
background:#fff2cc;
color:#b8860b;
}

.status.soon{
background:#eee;
color:#666;
}


/* TEXT */

.presence-card p{
font-size:16px;
color:#777;
line-height:1.6;
}


/* TABLET */

@media(max-width:1024px){

.presence-grid{
grid-template-columns:repeat(2,1fr);
}

}


/* MOBILE */

@media(max-width:600px){

.presence-grid{
grid-template-columns:1fr;
}

.ne-presence h2{
font-size:30px;
}

}


/* ===============================
ADVERTISING PLACEMENTS SECTION
================================ */

.ad-placements{
padding:60px 20px;
background: linear-gradient(to bottom,#fff8e1,#ffffff);
}

.ad-placements .container{
max-width:1220px;
margin:auto;
}


/* HEADER */

.section-header{
text-align:center;
margin-bottom:70px;
}

.section-header h2{
font-size:40px;
font-weight:700;
color:#222;
margin-bottom:10px;
}

.section-header span{
color:#f4b400;
}

.section-header p{
max-width:650px;
margin:auto;
color:#666;
font-size:17px;
line-height:1.6;
}


/* GRID */

.placements-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}


/* CARD */

.placement-card{
background:white;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,0.05);
transition:all 0.35s ease;
}

.placement-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(0,0,0,0.08);
}


/* IMAGE */

.placement-image{
position:relative;
height:230px;
overflow:hidden;
}

.placement-image img{
width:100%;
height:100%;
object-fit:cover;
transition:0.4s;
}

.placement-card:hover img{
transform:scale(1.05);
}



/* CONTENT */

.placement-content{
padding:28px;
text-align:left;
}

.placement-content h3{
font-size:20px;
margin-bottom:10px;
color:#222;
}

.placement-content p{
font-size:15px;
color:#666;
line-height:1.6;
}


/* RESPONSIVE */

@media(max-width:1024px){

.placements-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.placements-grid{
grid-template-columns:1fr;
}

.section-header h2{
font-size:30px;
}

}


/* ================================
CAMPAIGN IMPACT SECTION
================================ */

.campaign-impact{

padding:60px 20px;

background:linear-gradient(180deg,#ffffff,#fff9ec);

}


.impact-container{

max-width:1220px;

margin:auto;

}


.impact-header{

text-align:center;

margin-bottom:70px;

}


.impact-header h2{

font-size:38px;

font-weight:700;

color:#222;

margin-bottom:10px;

}


.impact-header span{

color:#f4b400;

}


.impact-header p{

color:#666;

max-width:600px;

margin:auto;

font-size:16px;

line-height:1.6;

}


/* GRID */

.impact-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}


/* CARD */

.impact-card{

background:white;

padding:40px 30px;

border-radius:18px;

text-align:center;

box-shadow:0 15px 40px rgba(0,0,0,0.05);

transition:0.35s;

}


.impact-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(0,0,0,0.08);

}


/* ICON */

.impact-icon{

width:70px;

height:70px;

margin:auto;

margin-bottom:15px;

background:#fff4d6;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

}


.impact-icon svg{

width:30px;

height:30px;

stroke:#f4b400;

stroke-width:2;

}


/* TEXT */

.impact-card h3{

font-size:28px;

font-weight:700;

color:#222;

margin-bottom:5px;

}


.impact-card p{

color:#666;

font-size:15px;

}


/* MOBILE */

@media(max-width:900px){

.impact-grid{

grid-template-columns:repeat(2,1fr);

}

}


@media(max-width:500px){

.impact-grid{

grid-template-columns:1fr;

}

}
