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

.blog-hero{

height:80vh;

background:url("../images/hero.png") center/cover;

position:relative;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

}

.blog-overlay{

position:absolute;

inset:0;

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

}

.blog-hero-content{

position:relative;

z-index:2;

text-align:center;

color:white;

max-width:900px;

margin:auto;

}

.blog-hero-content span{

color:#c8a97e;

letter-spacing:5px;

}

.blog-hero-content h1{

font-size:90px;

margin:25px 0;

font-family:"Playfair Display",serif;

}

.blog-hero-content p{

font-size:20px;

line-height:2;

margin-bottom:40px;

}

.hero-blog-buttons{

display:flex;

justify-content:center;

gap:20px;

}

/* ================= INTRO ================= */

.blog-intro{

padding:140px 0;

background:#fff;

}

.blog-intro-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.blog-intro-image{

overflow:hidden;

border-radius:35px;

}

.blog-intro-image img{

height:700px;

object-fit:cover;

}

.blog-intro-content h2{

font-size:60px;

margin:25px 0;

line-height:1.3;

}

.blog-intro-content p{

line-height:2.3;

color:#666;

}

.blog-stats{

display:flex;

gap:35px;

margin-top:40px;

}

.blog-stats h3{

font-size:55px;

color:#c8a97e;

}

.blog-stats p{

margin-top:10px;

}

/* ================= FEATURED ================= */

.featured-blog{

padding:140px 0;

background:white;

}

.featured-blog-box{

display:grid;

grid-template-columns:1.2fr 1fr;

background:white;

border-radius:35px;

overflow:hidden;

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.featured-blog-image img{

width:100%;

height:100%;

object-fit:cover;

}

.featured-blog-content{

padding:60px;

}

.featured-blog-content span{

color:#c8a97e;

}

.featured-blog-content h2{

font-size:55px;

margin:20px 0;

}

.featured-blog-content p{

line-height:2.2;

color:#666;

margin-bottom:35px;

}

.featured-features{

display:grid;

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

gap:20px;

margin-bottom:35px;

}

.featured-features div{

background:#f7f5f2;

padding:20px;

border-radius:15px;

}

.featured-features i{

color:#c8a97e;

margin-left:10px;

}

/* ================= POSTS ================= */

/* ================= ARTICLES ================= */

.blog-posts{

padding:140px 0;

background:#f7f5f2;

}

.blog-grid{

display:grid;

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

gap:35px;

}

.blog-card{

background:white;

border-radius:35px;

overflow:hidden;

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

transition:.4s;

}

.blog-card:hover{

transform:translateY(-12px);

}

.blog-card img{

height:300px;

object-fit:cover;

}

.blog-content{

padding:40px;

}

.blog-tag{

display:inline-block;

background:#c8a97e;

color:white;

padding:10px 18px;

border-radius:40px;

margin-bottom:25px;

}

.blog-content h3{

font-size:30px;

margin-bottom:20px;

line-height:1.5;

}

.blog-content p{

line-height:2.3;

color:#666;

font-size:17px;

}

@media(max-width:992px){

.blog-grid{

grid-template-columns:1fr;

}

}

/* ================= TIPS ================= */

.travel-tips{

padding:140px 0;

background:#121627;

}

.travel-tips .section-title h2{

color:white;

}

.tips-grid{

display:grid;

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

gap:25px;

}

.tip-box{

background:white;

padding:45px;

border-radius:25px;

}

.tip-number{

font-size:55px;

color:#c8a97e;

margin-bottom:20px;

font-weight:800;

}

.tip-box p{

margin-top:20px;

line-height:2;

}

/* ================= WHY ================= */

.why-blog{

padding:140px 0;

background:#fff;

}

.why-blog-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.why-blog-image{

overflow:hidden;

border-radius:35px;

}

.why-blog-image img{

height:750px;

object-fit:cover;

}

.why-blog-content h2{

font-size:65px;

margin:25px 0;

}

.why-blog-content p{

line-height:2.2;

margin-bottom:35px;

}

.why-items{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:40px;

}

.why-items div{

padding:18px;

background:#f7f5f2;

border-radius:15px;

}

.why-items i{

color:#c8a97e;

margin-left:10px;

}

/* ================= FAQ ================= */

.faq-section{

padding:140px 0;

background:#f7f5f2;

}

.faq-container{

display:grid;

gap:25px;

}

.faq-item{

background:white;

padding:45px;

border-radius:25px;

}

.faq-item h3{

margin-bottom:20px;

font-size:30px;

}

.faq-item p{

line-height:2;

color:#666;

}

/* ================= CTA ================= */

.blog-cta{

height:550px;

background:url("../images/Jeddah7.jpg") center/cover;

position:relative;

display:flex;

align-items:center;

justify-content:center;

}

.blog-cta-overlay{

position:absolute;

inset:0;

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

}

.blog-cta-content{

position:relative;

z-index:2;

text-align:center;

color:white;

}

.blog-cta-content span{

color:#c8a97e;

}

.blog-cta-content h2{

font-size:70px;

margin:25px 0;

}

.blog-cta-content p{

line-height:2;

margin-bottom:35px;

}

/* ================= RESPONSIVE ================= */

@media(max-width:992px){

.blog-intro-grid,
.featured-blog-box,
.why-blog-grid{

grid-template-columns:1fr;

}

.blog-grid{

grid-template-columns:1fr;

}

.tips-grid{

grid-template-columns:1fr;

}

.blog-stats{

flex-direction:column;

}

.hero-blog-buttons{

flex-direction:column;

}

}

@media(max-width:768px){

.blog-hero-content h1{

font-size:50px;

}

.blog-intro-content h2,
.featured-blog-content h2,
.why-blog-content h2{

font-size:38px;

}

.blog-cta-content h2{

font-size:40px;

}

.featured-features,
.why-items{

grid-template-columns:1fr;

}

}