*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{

background:#f5f7f5;

color:#222;

overflow-x:hidden;

}

/* NAVBAR */

header{

position:fixed;

top:0;

width:100%;

z-index:1000;

background:rgba(0,0,0,0.45);

backdrop-filter:blur(12px);

}

.navbar{

width:90%;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo-section{

display:flex;

align-items:center;

gap:12px;

}

.logo{

width:60px;

height:60px;

border-radius:50%;

}

.logo-section h2{

color:white;

font-size:28px;

}

.nav-links{

display:flex;

list-style:none;

gap:30px;

}

.nav-links a{

color:white;

text-decoration:none;

font-size:15px;

transition:.3s;

font-weight:500;

}

.nav-links a:hover{

color:#39b54a;

}

.mobile-menu{

display:none;

color:white;

font-size:28px;

cursor:pointer;

}

/* HERO */

.hero{

height:100vh;

background:

linear-gradient(

rgba(0,0,0,.20),

rgba(0,0,0,.20)

),

url("images/main 2.png");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:flex-end;

padding:0 5%;

overflow:hidden;

}

.hero-overlay{

width:100%;

display:flex;

justify-content:flex-end;

}

.hero-right{

display:flex;

gap:35px;

align-items:center;

}

/* BIGGER RECTANGLES */

.hero-card{

width:380px;

height:500px;

background:

rgba(255,255,255,.12);

backdrop-filter:blur(15px);

border:

1px solid rgba(255,255,255,.2);

border-radius:32px;

box-shadow:

0 15px 40px

rgba(0,0,0,.28);

overflow:hidden;

}

/* TEXT CARD */

.hero-text-card{

padding:50px;

display:flex;

flex-direction:column;

justify-content:center;

position:relative;

overflow:hidden;

}

/* GOLD ACCENT */

.hero-text-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:8px;

height:100%;

background:

linear-gradient(

#ffd54f,

#f9a825

);

}

.hero-text-card h1{

font-size:50px;

line-height:1.15;

margin-bottom:25px;

font-weight:700;

color:white;

}

.hero-text-card h1 span{

color:#FFD54F;

}

/* NICE TEXT */

.hero-text-card p{

font-size:18px;

line-height:1.9;

color:

rgba(255,255,255,.92);

margin-bottom:35px;

}

/* BUTTON */

.hero-button{

padding:16px 36px;

background:

linear-gradient(

135deg,

#1b7d32,

#29a547

);

border-radius:50px;

text-decoration:none;

font-size:16px;

font-weight:700;

color:white;

width:fit-content;

box-shadow:

0 5px 18px

rgba(41,165,71,.4);

transition:.3s;

}

.hero-button:hover{

transform:

translateY(-3px);

background:

linear-gradient(

135deg,

#29a547,

#34bf58

);

}

/* POSTER */

.hero-poster{

padding:14px;

cursor:pointer;

transition:.3s;

background:

rgba(255,255,255,.08);

}

.hero-poster:hover{

transform:

translateY(-6px);

}

.hero-poster img{

width:100%;

height:100%;

object-fit:cover;

border-radius:24px;

}

.poster-link{

text-decoration:none;

}

@media(max-width:900px){

.hero{
height:auto;
min-height:100vh;
padding:120px 20px 50px;
justify-content:center;
}

.hero-overlay{
justify-content:center;
}

.hero-right{
flex-direction:column;
width:100%;
gap:20px;
}

.hero-card{
width:100%;
max-width:340px;
height:auto;
}

.hero-text-card{
padding:30px;
min-height:320px;
}

.hero-text-card h1{
font-size:32px;
line-height:1.2;
}

.hero-text-card p{
font-size:16px;
line-height:1.7;
}

.hero-button{
width:100%;
text-align:center;
}

.hero-poster{
padding:10px;
}

.hero-poster img{
height:auto;
max-height:420px;
object-fit:cover;
}

}
/* STATS */

.stats{

width:90%;

margin:auto;

margin-top:-10px;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:25px;

position:relative;

z-index:10;

}

.stat-box{
    background:linear-gradient(
        135deg,
        #ffffff,
        #f4faf4
    );

    padding:35px 25px;
    border-radius:28px;
    text-align:center;

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

    border:1px solid rgba(27,125,50,.08);

    position:relative;
    overflow:hidden;
    transition:.3s;
}

.stat-box:hover{
    transform:translateY(-8px);
}
.stat-box:hover{

transform:

translateY(-8px);

}

.stat-box h2{

font-size:42px;

color:#1b7d32;

}

.stat-box p{

margin-top:10px;

}

/* INDUSTRIES */

.industry-link{
text-decoration:none;
color:inherit;
display:block;
}

.industry-link:hover .industry-card{
transform:translateY(-5px);
transition:0.3s;
cursor:pointer;
}
.industries{

padding:120px 6%;

background:

linear-gradient(

180deg,

#f7faf7,

#eef5ef

);

}

.industry-heading{

text-align:center;

margin-bottom:70px;

}

.industry-heading h2{

font-size:46px;

color:#0d5b23;

margin-bottom:12px;

}

.industry-heading p{

font-size:18px;

color:#666;

}

.industry-grid{

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(280px,1fr)

);

gap:35px;

}

.industry-card{

background:white;

padding:35px;

border-radius:30px;

text-align:center;

position:relative;

overflow:hidden;

transition:.35s;

box-shadow:

0 10px 30px

rgba(0,0,0,.08);

border:

1px solid

rgba(20,91,40,.08);

}

.industry-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:6px;

background:

linear-gradient(

90deg,

#0d5b23,

#2aa548,

#FFD54F

);

}

.industry-card:hover{

transform:

translateY(-12px);

box-shadow:

0 18px 40px

rgba(0,0,0,.14);

}

.industry-image{

width:140px;

height:140px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

padding:6px;

background:

linear-gradient(

135deg,

#0d5b23,

#2aa548

);

}

.industry-image img{

width:100%;

height:100%;

border-radius:50%;

object-fit:cover;

border:5px solid white;

}

.industry-card h3{

font-size:24px;

color:#145624;

margin-bottom:15px;

}

.industry-card p{

line-height:1.8;

color:#666;

font-size:15px;

}

@media(max-width:900px){

.industry-heading h2{

font-size:34px;

}

}

/* CERTIFIED */

.certified{

padding:120px 6%;

background:

linear-gradient(

180deg,

#ffffff,

#f5f9f6

);

}

.certified-header{

text-align:center;

margin-bottom:60px;

}

.certified-header h2{

font-size:46px;

color:#0d5b23;

margin-bottom:12px;

}

.certified-header p{

color:#666;

font-size:18px;

}

.certified-grid{

display:grid;

grid-template-columns:

1fr 1fr;

gap:35px;

}

.cert-card{

background:white;

padding:35px;

border-radius:30px;

box-shadow:

0 12px 35px

rgba(0,0,0,.08);

transition:.3s;

position:relative;

overflow:hidden;

}

.cert-card:hover{

transform:

translateY(-8px);

}

.certified-side{

border-top:

6px solid #1b7d32;

}

.warning-side{

border-top:

6px solid #c62828;

}

.card-title{

display:flex;

align-items:center;

gap:14px;

margin-bottom:30px;

}

.card-title h3{

font-size:28px;

color:#145624;

}

.status-icon{

width:18px;

height:18px;

border-radius:50%;

}

.green{

background:#29a547;

box-shadow:

0 0 12px

#29a547;

}

.red{

background:#d32f2f;

box-shadow:

0 0 12px

#d32f2f;

}

.update-item{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px;

background:#f8faf8;

border-radius:18px;

margin-bottom:18px;

transition:.3s;

}

.update-item:hover{

background:#eef5ef;

}

.update-item h4{

color:#145624;

margin-bottom:6px;

}

.update-item p{

font-size:14px;

color:#666;

}

.update-item span{

font-size:14px;

font-weight:600;

color:#888;

}

.warning-item{

background:

#fff3f3;

}

.view-all,

.view-alerts{

display:inline-block;

margin-top:15px;

padding:14px 28px;

border-radius:40px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.view-all{

background:#1b7d32;

color:white;

}

.view-alerts{

background:#d32f2f;

color:white;

}

.view-all:hover{

background:#0d5b23;

}

.view-alerts:hover{

background:#b71c1c;

}

@media(max-width:900px){

.certified-grid{

grid-template-columns:1fr;

}

.certified-header h2{

font-size:34px;

}

}

/* ABOUT */

.about{

padding:100px 5%;

display:grid;

grid-template-columns:

1fr 1fr;

gap:50px;

align-items:center;

}

.about-image img{

width:100%;

border-radius:25px;

}

.about-text h2{

font-size:42px;

margin-bottom:20px;

color:#0d5b23;

}

.about-text p{

line-height:1.8;

margin-bottom:25px;

}

.about-text a{

background:#1b7d32;

padding:14px 30px;

border-radius:40px;

color:white;

text-decoration:none;

}

/* ARTICLES */

.articles{

padding:100px 5%;

background:#eef5ef;

}

.articles h2{

text-align:center;

margin-bottom:50px;

font-size:42px;

}

.article-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,

minmax(300px,1fr));

gap:30px;

}

.article-card{

background:white;

padding:20px;

border-radius:25px;

box-shadow:

0 5px 25px

rgba(0,0,0,.08);

}

.article-card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:15px;

margin-bottom:15px;

}

/* E NUMBERS */

.e-numbers{

padding:100px 5%;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

background:

linear-gradient(
135deg,
#0d5b23,
#18833a,
#2fa84d
);

color:white;

position:relative;

overflow:hidden;

}

.e-numbers::before{

content:"";

position:absolute;

top:-150px;

right:-120px;

width:350px;

height:350px;

background:

rgba(255,255,255,.08);

border-radius:50%;

}

.e-numbers::after{

content:"";

position:absolute;

bottom:-100px;

left:-80px;

width:250px;

height:250px;

background:

rgba(255,255,255,.05);

border-radius:50%;

}

.e-left,

.e-right{

background:

rgba(255,255,255,.12);

backdrop-filter:blur(12px);

padding:45px;

border-radius:28px;

border:

1px solid rgba(255,255,255,.2);

position:relative;

z-index:2;

}

.e-left h2,

.e-right h2{

font-size:34px;

margin-bottom:18px;

color:white;

}

.e-left p,

.e-right p{

line-height:1.9;

color:#eef5ef;

margin-bottom:25px;

}

.search-box{

display:flex;

gap:12px;

}

.search-box input{

flex:1;

padding:16px;

border:none;

border-radius:50px;

background:white;

font-size:15px;

}

.search-box button{

padding:15px 30px;

border:none;

border-radius:50px;

background:#ffc107;

color:#145624;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.search-box button:hover{

background:#ffdb5b;

}

.read-more{

display:inline-block;

padding:14px 28px;

background:white;

color:#145624;

text-decoration:none;

border-radius:40px;

font-weight:700;

transition:.3s;

}

.read-more:hover{

transform:translateY(-3px);

}

@media(max-width:900px){

.e-numbers{

grid-template-columns:1fr;

}

.search-box{

flex-direction:column;

}

}

/* FAQ */

.faq{

padding:100px 5%;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

background:#f8faf8;

}

.faq-left,

.faq-right{

padding:50px;

background:white;

border-radius:18px;

box-shadow:

0 5px 18px

rgba(0,0,0,.08);

border-top:

5px solid #1b7d32;

}

.faq-left h2,

.faq-right h2{

font-size:32px;

margin-bottom:20px;

color:#145624;

}

.faq-left p,

.faq-right p{

line-height:1.9;

color:#555;

margin-bottom:25px;

}

.ask-btn,

.search-btn{

display:inline-block;

padding:15px 35px;

background:#1b7d32;

color:white;

text-decoration:none;

border-radius:8px;

font-weight:600;

transition:.3s;

}

.ask-btn:hover,

.search-btn:hover{

background:#0d5b23;

transform:

translateY(-2px);

}

@media(max-width:900px){

.faq{

grid-template-columns:1fr;

}

}

/* CONTACT */

.contact{

padding:100px 5%;

display:grid;

grid-template-columns:

1fr 1fr;

gap:40px;

}

.contact-form{

background:white;

padding:35px;

border-radius:25px;

box-shadow:

0 5px 20px

rgba(0,0,0,.08);

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:15px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:12px;

}

.contact-form button{

background:#1b7d32;

padding:14px 30px;

border:none;

color:white;

border-radius:40px;

}

.map iframe{

width:100%;

height:100%;

border:none;

border-radius:25px;

min-height:450px;

}

/* FOOTER */

footer{

   background:linear-gradient(
        135deg,
        #0b4d1d,
        #145624,
        #1b7d32
    );
    border-top:4px solid #FFD54F;

padding:60px 8%;

display:flex;

justify-content:space-between;

flex-wrap:wrap;

color:white;

}

.footer-links{

display:flex;

flex-direction:column;

gap:12px;

}

.footer-links a{

color:white;

text-decoration:none;

}

.footer-logo{

text-align:right;

}

.footer-logo img{

width:90px;

margin-bottom:15px;

}

.socials{

margin-top:15px;

}

.socials i{

margin-left:15px;

font-size:22px;

cursor:pointer;

}

/* MOBILE */

@media(max-width:900px){

.nav-links{

display:none;

}

.mobile-menu{

display:block;

}

.hero-overlay h1{

font-size:42px;

}

.hero-overlay p{

font-size:18px;

}

.about,

.contact,

.certified{

grid-template-columns:1fr;

}

.circle{

width:90px;

height:90px;

}

.e-numbers input{

width:100%;

margin-bottom:15px;

}

}

/* FOOD NEWS */

.food-news{

padding:100px 5%;

background:#f7faf7;

}

.food-news h2{

text-align:center;

font-size:42px;

color:#0d5b23;

margin-bottom:15px;

}

.food-subtitle{

text-align:center;

color:#666;

margin-bottom:50px;

font-size:17px;

}

.food-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(320px,1fr));

gap:30px;

}

.food-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:

0 8px 25px rgba(0,0,0,.08);

transition:.3s;

}

.food-card:hover{

transform:

translateY(-8px);

}

.food-card img{

width:100%;

height:230px;

object-fit:cover;

}

.food-content{

padding:25px;

}

.food-content h3{

color:#145624;

margin-bottom:12px;

}

.food-content p{

line-height:1.8;

color:#666;

margin-bottom:18px;

}

.food-content a{

display:inline-block;

padding:12px 25px;

background:#1b7d32;

color:white;

text-decoration:none;

border-radius:35px;

font-weight:600;

}

.food-content a:hover{

background:#0d5b23;

}
.about-hero{

height:60vh;

background:

linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.65)
),

url(images/about.png);

background-size:cover;

background-position:center;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

}

.overlay h1{

font-size:60px;

margin-bottom:20px;

}

.overlay p{

font-size:20px;

}

.about-main{

padding:100px 5%;

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

}

.about-card{

background:white;

padding:40px;

border-radius:25px;

box-shadow:

0 8px 25px rgba(0,0,0,.08);

}

.about-card h2{

color:#145624;

margin-bottom:20px;

}

.about-card p{

line-height:1.9;

margin-bottom:15px;

}

.about-card ul{

padding-left:25px;

line-height:2;

}

.values{

padding:100px 5%;

background:#eef5ef;

text-align:center;

}

.values h2{

font-size:42px;

margin-bottom:50px;

}

.values-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}

.value-box{

background:white;

padding:40px;

border-radius:25px;

}

.value-box i{

font-size:45px;

color:#1b7d32;

margin-bottom:20px;

}

.services{

padding:100px 5%;

}

.services h2{

text-align:center;

margin-bottom:50px;

}

.service-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

.service-card{

background:white;

padding:35px;

border-radius:25px;

box-shadow:

0 5px 20px rgba(0,0,0,.08);

}

.mission{

padding:100px 5%;

background:#145624;

color:white;

text-align:center;

}

.mission h2{

margin-bottom:25px;

}

.mission p{

max-width:900px;

margin:auto;

line-height:2;

margin-bottom:15px;

}

.help{

padding:100px 5%;

text-align:center;

}

.help-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin:50px 0;

}

.help-grid div{

background:white;

padding:30px;

border-radius:20px;

box-shadow:

0 5px 20px rgba(0,0,0,.08);

}

.help h3{

color:#1b7d32;

font-size:34px;

}

@media(max-width:900px){

.about-main{

grid-template-columns:1fr;

}

.overlay h1{

font-size:42px;

}

}

#result{
margin-top:20px;
}

#result div{
padding:15px;
border-radius:10px;
font-weight:bold;
text-align:center;
color:white;
}

.halaal{
background:#16a34a;
}

.haraam{
background:#dc2626;
}

.doubtful{
background:#f59e0b;
}

.unknown{
background:#6b7280;
}
.mobile-nav-active{
display:flex !important;
flex-direction:column;
position:absolute;
top:100%;
left:0;
width:100%;
background:#082111;
padding:20px 0;
gap:0;
}

.mobile-nav-active li{
width:100%;
text-align:center;
padding:15px 0;
border-bottom:1px solid rgba(255,255,255,.1);
}

.mobile-nav-active a{
color:white;
display:block;
}
@media(max-width:768px){

.e-numbers{
padding:60px 20px;
gap:20px;
}

.e-left,
.e-right{
padding:25px;
border-radius:20px;
}

.e-left h2,
.e-right h2{
font-size:26px;
line-height:1.3;
}

.e-left p,
.e-right p{
font-size:15px;
line-height:1.7;
}

.search-box{
display:flex;
flex-direction:column;
gap:12px;
}

.search-box input{
width:100%;
padding:14px;
}

.search-box button,
.enumbers-btn{
width:100%;
padding:14px;
}

.read-more{
display:block;
text-align:center;
width:100%;
}

#result{
margin-top:15px;
}

}
.search-box{
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
margin-top:20px;
}

.search-box input{
padding:12px;
width:250px;
border:1px solid #ccc;
border-radius:6px;
}

.search-box button{
padding:12px 20px;
background:#006400;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
}

.search-box button:hover{
opacity:0.9;
}
.socials a {
    color: #fff;
    font-size: 24px;
    margin: 0 10px;
    text-decoration: none;
    transition: 0.3s;
}

.socials a:hover {
    color: #25D366; /* Change color on hover */
}
.hero-right{
    position:absolute;
    bottom:20px;
    right:20px;
    z-index:10;
}



.close-poster{
    position:absolute;
    top:-10px;
    right:-10px;
    width:32px;
    height:32px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#333;
    cursor:pointer;
    box-shadow:0 4px 10px rgba(0,0,0,0.2);
    z-index:20;
}

.close-poster:hover{
    transform:scale(1.1);
}
.hero{
    position:relative;
}
@media(max-width:768px){

    .stats{
        grid-template-columns:repeat(3,1fr);
        gap:10px;
        margin-top:-35px;
    }

    .stat-box{
        padding:18px 8px;
    }

    .stat-box h2{
        font-size:20px;
    }

    .stat-box p{
        font-size:11px;
    }
}
.certified-section{
    padding:80px 5%;
    background:linear-gradient(
        180deg,
        #f8faf8,
        #eef5ef
    );
}

.certified-side{
    max-width:900px;
    margin:auto;
    border-top:8px solid #1b7d32;
}

.certified-side .card-title{
    justify-content:center;
    margin-bottom:35px;
}

.certified-side .card-title h3{
    font-size:34px;
}

.update-item{
    border-left:5px solid #29a547;
    background:white;
    box-shadow:0 4px 15px rgba(0,0,0,.06);
}

.update-item h4{
    font-size:18px;
    font-weight:700;
}

.update-item span{
    background:#1b7d32;
    color:white;
    padding:6px 14px;
    border-radius:30px;
}
.warning-side{
    max-width:900px;
    margin:30px auto 0;
    border-top:8px solid #d32f2f;
}

.closure-item{
    background:#fff5f5;
    border-left:5px solid #d32f2f;
    box-shadow:0 4px 15px rgba(0,0,0,.06);
}

.closure-item h4{
    color:#b71c1c;
    display:flex;
    align-items:center;
    gap:10px;
}

.closure-badge{
    background:#d32f2f;
    color:white;
    padding:8px 16px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}
.stat-icon{
    width:75px;
    height:75px;
    margin:0 auto 18px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #1b7d32,
        #34b553
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:white;
    font-size:32px;

    box-shadow:
    0 10px 25px rgba(27,125,50,.25);
}
.stat-link{
    text-decoration:none;
    color:inherit;
    display:block;
}

.stat-link .stat-box{
    cursor:pointer;
}

.stat-link:hover .stat-box{
    transform:translateY(-8px);
}
.updates-section{
    width:90%;
    margin:80px auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
    align-items:stretch;
}
.certified-side,
.warning-side{
    width:100%;
    height:100%;
    margin:0;
}
@media(max-width:768px){

    .updates-section{
        grid-template-columns:1fr;
        gap:20px;
        width:95%;
    }

    .cert-card{
        padding:20px;
    }

    .card-title h3{
        font-size:24px;
    }

    .update-item{
        flex-wrap:wrap;
        gap:10px;
    }

    .update-item span{
        margin-top:5px;
    }
}
@media(max-width:768px){

.hero{

background:
linear-gradient(
rgba(0,0,0,.10),
rgba(0,0,0,.10)
),
url("images/main-mobile.png");

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

height:100vh;
min-height:100vh;

}

}
@media(max-width:768px){

.hero-right{

bottom:10px;
right:10px;

}

.hero-card{

max-width:220px;

}

}
@media(max-width:768px){

    .industries{
        padding:60px 15px;
    }

    .industry-heading{
        margin-bottom:35px;
    }

    .industry-heading h2{
        font-size:28px;
        line-height:1.2;
    }

    .industry-heading p{
        font-size:14px;
        padding:0 10px;
    }

    .industry-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .industry-card{
        padding:20px;
        border-radius:20px;
        display:flex;
        align-items:center;
        text-align:left;
        gap:15px;
    }

    .industry-image{
        width:85px;
        height:85px;
        margin:0;
        flex-shrink:0;
    }

    .industry-card h3{
        font-size:18px;
        margin-bottom:5px;
    }

    .industry-card p{
        font-size:13px;
        line-height:1.5;
    }

}


@media(max-width:768px){

    .articles{
        padding:60px 15px;
    }

    .articles h2{
        font-size:28px;
        margin-bottom:25px;
    }

    .article-grid{
        display:flex;
        overflow-x:auto;
        gap:15px;
        padding:5px 20px 15px 0;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
    }

    .article-grid::-webkit-scrollbar{
        display:none;
    }

    .article-card{
    min-width:75%;
    max-width:75%;
    flex-shrink:0;
    scroll-snap-align:start;
    border-radius:20px;
}

    .article-card img{
        height:180px;
    }

}
.swipe-hint{
    text-align:center;
    color:#1b7d32;
    font-size:13px;
    font-weight:600;
    margin:-10px 0 20px;
    animation:swipeHint 2s infinite;
}

@keyframes swipeHint{
    0%,100%{
        transform:translateX(0);
    }
    50%{
        transform:translateX(8px);
    }
}

@media(min-width:769px){
    .swipe-hint{
        display:none;
    }
}
@media(max-width:768px){

    .articles{
        position:relative;
    }

    .articles::after{
        content:"";
        position:absolute;
        right:0;
        top:120px;
        width:50px;
        height:250px;
        background:linear-gradient(
            to right,
            transparent,
            #eef5ef
        );
        pointer-events:none;
    }

}
@media(max-width:768px){

.e-numbers{
    padding:50px 15px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.e-left,
.e-right{
    width:100%;
    padding:22px;
    border-radius:20px;
}

.e-left h2,
.e-right h2{
    font-size:24px;
    margin-bottom:12px;
}

.e-left p,
.e-right p{
    font-size:14px;
    line-height:1.6;
}

}
@media(max-width:768px){

.search-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.search-box input{
    grid-column:1 / -1;
    width:100%;
    padding:16px;
    border-radius:15px;
}

.search-box button,
.enumbers-btn{
    width:100%;
    border-radius:15px;
    padding:14px;
}

}
#result div{
    animation:fadeIn .3s ease;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
.restaurant-location{
    color:#666;
    font-size:14px;
    margin:8px 0 12px;
    display:flex;
    align-items:center;
    gap:6px;
}

.restaurant-location i{
    color:#1b7d32;
}

@media(max-width:768px){

    .footer-links{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:15px;
        width:100%;
        max-width:300px;
        margin:auto;
    }

}
@media(max-width:768px){

    .footer-logo{
        border-top:1px solid rgba(255,255,255,.15);
        padding-top:25px;
    }

}



.floating-zamha-logo{
    position:absolute;

    /* Final landing position */
    right:8%;
    top:15%;

    z-index:20;

    animation:
        logoEntrance 4s ease-out forwards,
        logoFloat 6s ease-in-out infinite 4s;
}

.floating-zamha-logo img{
    width:800px;
    height:auto;
}

@keyframes logoEntrance{

    0%{
        opacity:0;
        transform:translateY(-250px) scale(.6);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

@keyframes logoFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

}


@media(max-width:768px){

    .floating-zamha-logo{
        right:20%;
        top:15%;
        transform:translateX(50%);
    }

    .floating-zamha-logo img{
        width:250px;
    }

}

@media(max-width:768px){

    footer{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:30px;
        padding:40px 20px;
    }

    .footer-links{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:15px;
        width:100%;
        max-width:300px;
        margin:auto;
        text-align:center;
    }

    .footer-logo{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        width:100%;

        border-top:1px solid rgba(255,255,255,.15);
        padding-top:25px;
    }

    .footer-logo img{
        margin:0 auto 12px;
    }

    .footer-logo p{
        text-align:center;
        margin:0;
    }

    .socials{
        display:flex;
        justify-content:center;
        gap:20px;
        margin-top:15px;
    }

    .socials i{
        margin-left:0;
    }

}