@font-face {
  font-family: 'Jameel Noori Nastaleeq';
  src: url('fonts/JameelNooriNastaleeq.ttf') format('truetype');
}
body {
  font-family: 'Jameel Noori Nastaleeq', serif;
}
/* ✅ General Styles */
/* =========================================================
   GLOBAL THEME
========================================================= */

:root{
    --green-dark:#0b3d24;
    --green:#0f6b3c;
    --green-light:#128a4d;
    --gold:#cf9d2e;
    --paper:#f8f5ec;
    --text:#1d1d1d;
}

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

body{
    margin:0;
    padding:0;
    direction:rtl;
    text-align:right;
    font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu',serif;
    background:var(--paper);
    color:var(--text);
    overflow-x:hidden;
    line-height:2;
}

/* Font */

@font-face{
    font-family:'Jameel Noori Nastaleeq';
    src:url('fonts/JameelNooriNastaleeq.woff2') format('woff2'),
        url('fonts/JameelNooriNastaleeq.woff') format('woff');
    font-display:swap;
}

body,
h1,h2,h3,h4,h5,h6,
p,span,a,li,
button,div{
    font-family:'Jameel Noori Nastaleeq',
    'Noto Nastaliq Urdu',
    serif;
}

/* =========================================================
   HEADER
========================================================= */

header{

    background:
    linear-gradient(180deg,
    #0f6b3c 0%,
    #0b3d24 60%,
    #071d12 100%);

    border-top:5px solid var(--gold);
    border-bottom:3px solid var(--gold);

    padding:15px 0;

    text-align:center;

    box-shadow:
    0 8px 20px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.12);

    animation:slideDown .8s ease;
    position:relative;
    overflow:hidden;

}

/* Shine Effect */

header::before{

content:"";
position:absolute;
top:0;
left:-120%;
width:45%;
height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent);

animation:shine 8s linear infinite;

}

@keyframes shine{

0%{
left:-120%;
}

100%{
left:120%;
}

}

@keyframes slideDown{

from{
opacity:0;
transform:translateY(-20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* =========================================================
   ABC CERTIFIED STRIP
========================================================= */

.certified-marquee{

position:relative;

width:100%;

overflow:hidden;

background:
linear-gradient(90deg,
#0f6b3c,
#128a4d,
#0f6b3c);

border-top:2px solid var(--gold);
border-bottom:2px solid var(--gold);

padding:10px 0;

box-shadow:0 3px 10px rgba(0,0,0,.20);

}

.certified-marquee span{

display:inline-block;

font-size:1.15rem;

font-weight:bold;

color:#fff;

white-space:nowrap;

animation:marqueeText 18s linear infinite;

}

@keyframes marqueeText{

0%{
transform:translateX(100%);
}

100%{
transform:translateX(-100%);
}

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

header{

padding:10px 0;

}

.certified-marquee{

padding:8px 0;

}

.certified-marquee span{

font-size:.95rem;

}

}/* Logo Styling */
/* ہیڈر h1 کا نیا اسٹائل */
/* h1 کنٹینر */
.h1-container {
    display: flex;
    justify-content: center; /* سینٹر میں رکھنے کے لیے */
    align-items: center;
    text-align: center;
    padding: 20px;
    
}

/* ہیڈر h1 */
#homeButton {
    margin: 10px;
    font-size: clamp(2.3rem, 5vw, 3rem); /* ریسپانسیو فونٹ سائز */
    font-family:'Jameel Noori Nastaleeq', Arial, sans-serif;
    padding: 10px 30px;
   
    border-radius: 80px;
    display: inline-block;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4); /* چاروں طرف شیڈو */
    cursor: pointer;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* ہور ایفیکٹ */
#homeButton:hover {
    transform: scale(1.05);
    box-shadow: 10px 0 30px rgba(255, 0, 0, 0.5); /* شیڈو مزید گہرا ہوگا */
}

/* ریسپانسیو ڈیزائن */
@media (max-width: 768px) {
    #homeButton {
        font-size: 2rem;
        padding: 6px 16px;
    }
}

@media (max-width: 480px) {
    #homeButton {
        font-size: 2rem;
        padding: 4px 12px;
    }
}


.whatsapp-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px; /* تھوڑا نیچے لے جانے کے لیے */
}

.whatsapp-link {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #25D366;
    padding: 10px 20px;
    border-radius: 30px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.social-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* بٹن کے درمیان جگہ */
    flex-wrap: wrap; /* موبائل پر بٹن نیچے آجائیں گے */
    margin-top: 10px;
}

.social-link {
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.whatsapp {
    background-color: #25D366;
}

.whatsapp:hover {
    background-color: #1eb85d;
    transform: scale(1.08);
}

.facebook {
    background-color: #1877F2;
}

.facebook:hover {
    background-color: #165BBD;
    transform: scale(1.08);
}

.social-icon {
    width: 25px;
    height: 25px;
}

@media (max-width: 600px) {
    .social-container {
        flex-direction: column;
        gap: 10px;
    }
}
.call {
    background-color: #015ea1;
}

.call:hover {
    background-color: #e64a19;
    transform: scale(1.08);
}



/* Top Bar */
/* Top Bar */
.top-bar {
    background-color: #000000;
    padding-top: 10px;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    flex-wrap: wrap;
}

.top-bar span {
    margin: 0 0px;
    padding-bottom: 10px;
    padding: 0px;
}

/* نیوز ٹکر کا بنیادی ڈیزائن */
.news-ticker {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #222;
    padding: 8px 0;
    white-space: nowrap;
    direction: ltr; /* لیفٹ ٹو رائٹ ڈائریکشن */
}

/* ٹکر کنٹینٹ */
.news-ticker-content {
    padding: 0px;
    display: flex;
    animation: newsTicker 20s linear infinite;
}

/* کی فریم اینیمیشن (Left to Right) */
@keyframes newsTicker {
    from { transform: translateX(-100%); } /* بائیں سے شروع ہوگا */
    to { transform: translateX(100%); } /* دائیں طرف جائے گا */
}

/* نیوز آئٹمز */
.news-ticker-content span {
    display: inline-block;
    padding: 0 30px;
    font-size: 2rem;
    font-weight: bold;
    color: #f1c40f;
    font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', Arial, sans-serif;
    white-space: nowrap;
}

/* موبائل کے لیے بہتر ڈیزائن */
@media screen and (max-width: 768px) {
    .news-ticker-content {
        animation: newsTicker 15s linear infinite; /* موبائل پر تھوڑا تیز کریں */
    }

    .news-ticker-content span {
        font-size: 1rem;
        padding: 0 15px;
    }
}

/* چھوٹے موبائل فونز کے لیے */
@media screen and (max-width: 480px) {
    .news-ticker-content {
        animation: newsTicker 12s linear infinite;
    }

    .news-ticker-content span {
        font-size: 0.9rem;
        padding: 0 10px;
    }
}


/* نیویگیشن بار کا بنیادی ڈیزائن */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu&display=swap');

/*=========================================================
        PREMIUM RED NEWS CHANNEL NAVIGATION
=========================================================*/

nav{
    position:sticky;
    top:0;
    z-index:9999;
    width:100%;

    background:
    linear-gradient(
        180deg,
        #d71920 0%,
        #a30d12 45%,
        #5b0508 100%
    );

    border-top:2px solid #f5c542;
    border-bottom:2px solid #f5c542;

    box-shadow:
        0 8px 20px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.12);

    overflow:hidden;
}

/* Premium Moving Shine */

nav::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:35%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);

animation:navShine 6s linear infinite;

pointer-events:none;

}

@keyframes navShine{

0%{
left:-120%;
}

100%{
left:120%;
}

}


/* Moving Shine */

nav::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:35%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);

animation:navShine 7s linear infinite;

pointer-events:none;

}

@keyframes navShine{

0%{

left:-120%;

}

100%{

left:120%;

}

}



/* Container */

.nav-inner{

max-width:1280px;

margin:auto;

padding:8px 20px;

}



/* Menu */

nav ul{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:8px;

list-style:none;

margin:0;

padding:0;

}



/* Item */

nav ul li{

position:relative;

}



/* Links */

nav ul li a{

display:block;

padding:9px 14px;

font-size:1.30rem;

text-decoration:none;

color:#fff;

border-radius:8px;

transition:.35s;

position:relative;

white-space:nowrap;

}



/* Gold Underline */

nav ul li a::after{

content:"";

position:absolute;

left:50%;

bottom:4px;

width:0;

height:2px;

background:#d4af37;

transform:translateX(-50%);

transition:.35s;

}



/* Hover */

nav ul li a:hover{

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

color:#f5d76e;

transform:translateY(-2px);

}

nav ul li a:hover::after{

width:80%;

}



/* Active */

nav ul li a.active{

background:rgba(255,255,255,.10);

color:#f5d76e;

}

nav ul li a.active::after{

width:80%;

}



/* Verification */

.verification{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

flex-wrap:wrap;

margin-top:10px;

padding-top:10px;

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

}

.verification a{

font-size:1rem;

color:#ddd;

transition:.3s;

}

.verification a:hover{

color:#f5d76e;

}



/* Live Button */

.live-btn{

position:relative;

overflow:hidden;

padding:9px 20px !important;

border-radius:40px;

background:

linear-gradient(
135deg,
#d80027,
#890015
);

box-shadow:

0 0 12px rgba(216,0,39,.45);

}



/* Live Dot */

.live-btn::before{

content:"";

position:absolute;

right:12px;

top:50%;

width:8px;

height:8px;

background:#00ff55;

border-radius:50%;

transform:translateY(-50%);

animation:livePulse 1.2s infinite;

}



/* Shine */

.live-btn::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:40%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

animation:liveShine 3.5s linear infinite;

}

@keyframes liveShine{

0%{

left:-120%;

}

100%{

left:120%;

}

}

@keyframes livePulse{

0%{

transform:translateY(-50%) scale(1);

opacity:1;

}

100%{

transform:translateY(-50%) scale(2.4);

opacity:0;

}

}



/* Mobile */

@media(max-width:768px){

nav{

position:relative;

}

.nav-inner{

padding:8px;

}

nav ul{

gap:4px;

}

nav ul li a{

font-size:.95rem;

padding:6px 8px;

}

.verification{

gap:8px;

}

.verification a{

font-size:.85rem;

}

.live-btn{

padding:8px 15px !important;

}

}

/* ==========================
   NEWS SECTION
========================== */

.news-section{
    max-width:1200px;
    margin:30px auto;
    padding:25px;
    background:#fff;
    border-radius:12px;
    border:1px solid #e6ddc9;
    box-shadow:0 5px 15px rgba(0,0,0,.06);
}

/* 🔷 سیکشن ہیڈنگ */
.section-title {
  font-size: 3rem;
  font-weight: bold;
  color: #015ea1;
  border-bottom: 3px solid #f1c40f;
  padding-bottom: 10px;
  margin-bottom: 20px;
  text-align: right;
  font-family: 'Jameel Noori Nastaleeq', serif;
}

/* 🔷 نیوز گرڈ */
.news-grid, .headline-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
}

/* 🔷 ہر خبر بلاک */
.news-block {
  background: #ffffff;
  border: 1px solid #ddd;
  border-right: 6px solid #015ea1;
  border-bottom: 4px solid #f1c40f;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.news-block:hover {
  transform: translateY(-5px);
}

/* 🔷 خبر کی تصویر */
.news-block img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

/* 🔷 خبر کا عنوان */
.news-title {
  font-size: 1.4rem;
  padding: 12px 15px;
  color: #222;
  line-height: 2.2;
  font-family: 'Jameel Noori Nastaleeq', serif;
  text-align: right;
}

/* 🔷 خبر کا مواد */
.news-content {
  font-size: 1rem;
  padding: 10px 15px;
  line-height: 2;
  color: #444;
  font-family: 'Jameel Noori Nastaleeq', serif;
  text-align: right;
}

/* 🔷 لوڈنگ ٹیکسٹ */
#news-loading {
  font-size: 2rem;
  color: #015ea1;
  text-align: center;
  padding: 20px;
  animation: pulse 1.5s infinite;
}

/* 🔷 موبائل ریسپانسیو */
@media screen and (max-width: 768px) {
  .section-title {
    font-size: 2.6rem;
  }

  .news-title {
    font-size: 1.4rem;
    padding: 10px;
  }

  .news-grid, .headline-news {
    grid-template-columns: 1fr;
  }

  .news-block img {
    max-height: 300px;
  }
}

/* ✅ Lazy Load Animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp .5s ease forwards;
}

@keyframes fadeUp {
  to {
    opacity: 2;
    transform: translateY(0);
  }
}

/* ✅ Pulse Animation for Loader */
@keyframes pulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

/* Footer Styles */
footer {
   background:linear-gradient(rgb(255, 0, 0),black,rgb(123, 9, 9));
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}
/* Fade-in animation for date/time updates */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Slide-in animation for verification result */
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Apply animations to elements */
#currentDate, #currentTime, #islamicDate, #verificationResult {
    transition: opacity 4.5s ease-in-out, transform 4.5s ease-in-out;
}
.news-card {
  border: 1px solid #ccc;
  border-radius: 12px;
  margin: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  background: #f9f9f9;
}
.news-img {
  max-width: 100%;
  border-radius: 10px;
}
.news-content h2 {
  font-size: 1.2em;
  color: #003366;
}
.news-content p {
  font-size: 1em;
  margin: 8px 0;
}
.news-content small {
  color: #777;
}
/*/////////////////////////////////////*/
/* ✅ WhatsApp Button Fixed on Bottom-Right */
#whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 9999;
  cursor: pointer;
  animation: flipBounce 5s infinite ease-in-out;
}

/* ✅ WhatsApp Icon Styling */
#whatsapp-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  z-index: 9999;
  animation: flipBounce 3s ease-in-out infinite;
}

#whatsapp-btn img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  box-shadow: 0 4px 10px rgba(0, 128, 0, 0.3);
  transition: transform 0.3s;
}

@keyframes flipBounce {
  0% { transform: rotateY(0deg); }
  20% { transform: rotateY(180deg); }
  40% { transform: rotateY(360deg); }
  60% { transform: translateY(-10px); }
  70% { transform: translateY(0px); }
  80% { transform: translateY(-5px); }
  90% { transform: translateY(0px); }
  100% { transform: rotateY(0deg); }
}

@media (max-width: 600px) {
  #whatsapp-btn {
    width: 50px;
    height: 50px;
  }
}


/*=========================================================
        RED NEWS CHANNEL BRAND STRIP
=========================================================*/

.scrolling-name-strip{

width:min(700px,92%);

margin:30px auto;

padding:12px 0;

overflow:hidden;

position:relative;

direction:ltr;

border-radius:16px;

background:
linear-gradient(
180deg,
#d71920 0%,
#9e0b0f 55%,
#5b0508 100%
);

border:2px solid #f5c542;

box-shadow:
0 10px 25px rgba(0,0,0,.30);

}


/* Moving Shine */

.scrolling-name-strip::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:35%;

height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);

animation:brandShine 6s linear infinite;

}

@keyframes brandShine{

0%{ left:-120%; }

100%{ left:120%; }

}


/* Scroll */

.scrolling-content{

display:flex;

align-items:center;

gap:18px;

width:max-content;

animation:brandScroll 14s linear infinite;

}

.scrolling-name-strip:hover .scrolling-content{

animation-play-state:paused;

}

@keyframes brandScroll{

0%{ transform:translateX(100%); }

100%{ transform:translateX(-100%); }

}


/* Name Box */

.name-box{

background:
linear-gradient(
180deg,
#ffffff,
#f8f8f8
);

color:#8b0000;

border:2px solid #f5c542;

border-radius:100px;

padding:10px 24px;

font-size:1.2rem;

font-weight:bold;

white-space:nowrap;

box-shadow:
0 6px 16px rgba(0,0,0,.18);

transition:.35s ease;

}


/* Hover */

.name-box:hover{

transform:translateY(-3px) scale(1.05);

background:
linear-gradient(
180deg,
#ffd34d,
#f5c542
);

color:#111;

box-shadow:
0 12px 24px rgba(0,0,0,.28);

}


/* Mobile */

@media(max-width:768px){

.scrolling-name-strip{

width:95%;

padding:10px 0;

}

.scrolling-content{

gap:12px;

animation-duration:10s;

}

.name-box{

font-size:1rem;

padding:8px 18px;

}

}
/*live */
.live-btn{
    background: linear-gradient(45deg, #ff0000, #b30000);
    color: #fff;
    padding: 8px 18px;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: 0.3s ease;
    box-shadow: 0 0 10px rgba(255,0,0,0.6);
}

/* Hover effect */
.live-btn:hover{
    transform: scale(1.08);
    box-shadow: 0 0 20px rgba(255,0,0,0.9);
}

/* Pulsing dot animation */
.live-btn::before{
    content: "";
    width: 10px;
    height: 10px;
    background: #00ff00;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    animation: pulse 1s infinite;
}

@keyframes pulse{
    0%{
        transform: translateY(-50%) scale(1);
        opacity: 1;
    }
    100%{
        transform: translateY(-50%) scale(2.5);
        opacity: 0;
    }
}

/* ✅ Profile Section */
.profile-section {
    text-align: center;
    padding: 35px 30px;
    padding-bottom: 80px;
    padding-top: 70px;
    padding-left: 50px;
    background: url(White\ Red\ Simple\ Student\ ID\ Card\ \(1\).jpg) no-repeat center center fixed;
    background-size: cover;
    color: white;
    border-radius: 10px;
    box-shadow: 0 16px 24px rgba(0, 0, 0, 0.2);
    max-width: 100%;
    margin: 20px auto;
    position: relative;
    overflow: hidden;
    opacity: 0;
    left: 10px;
    animation: fadeIn 2s ease-in-out forwards;
}

/* ✅ Profile Card */
.profile-card {
    background: white;
    padding: 16px 30px 0px 10px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 60px;
    margin-top: 50px;
    left: 50px;
}

.profile-card .profile-image {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 3px solid #860101;
    object-fit: cover;
    object-position: center;
    margin-bottom: 8px;
}

@media (max-width: 768px) {
    .profile-card .profile-image {
        width: 100px;
        height: 100px;
        border: 2px solid #860101;
    }
}

@media (max-width: 480px) {
    .profile-card .profile-image {
        width: 150px;
        height: 150px;
    }
}

.profile-card h3 {
    margin-top: 8px;
    color: #2c3e50;
    font-weight: bold;
    font-size: large;
}

.profile-card p {
    margin: 5px 0;
    color: #080808;
    font-weight: bold;
    font-size: small;
}

.profile-card p strong {
    color: #2c3e50;
}

.certificate-block {
    margin-top: 20px;
}

.certificate-button {
    display: inline-block;
    padding: 8px 16px;
    font-size: 1.2rem;
    font-weight: bold;
    background: #f1c40f;
    color: #2c3e50;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
}

.certificate-button:hover {
    background: #2c3e50;
    color: #fff;
    transform: scale(1.08);
}

/* ✅ Image Container */
.image-container {
    width: 100%;
    max-width: 600px;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* ✅ Footer */
footer {
   background: linear-gradient(135deg, rgb(88, 6, 6),  rgba(0, 0, 0, 0.543));
    color: #fff;
    text-align: center;
    padding: 8px 0;
    margin-top: 15px;
    opacity: 0;
    animation: fadeIn 1s ease-in-out 1.5s forwards;
}

/* ✅ WhatsApp Floating Button */
#whatsapp-btn {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    z-index: 9999;
    animation: flipBounce 3s ease-in-out infinite;
}

#whatsapp-btn img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 4px 10px rgba(0, 128, 0, 0.3);
    transition: transform 0.3s;
}

@keyframes flipBounce {
    0% { transform: rotateY(0deg); }
    20% { transform: rotateY(180deg); }
    40% { transform: rotateY(360deg); }
    60% { transform: translateY(-10px); }
    70% { transform: translateY(0px); }
    80% { transform: translateY(-5px); }
    90% { transform: translateY(0px); }
    100% { transform: rotateY(0deg); }
}

@media (max-width: 600px) {
    #whatsapp-btn {
        width: 50px;
        height: 50px;
    }
}