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

.navbar{
    background-color: #008751;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 50px;
    position:sticky;
    top:0;
    z-index:1000;
}

.logo a{
    color:white;
    text-decoration:none;
    font-size:24px;
    font-weight:bold;
}

.nav-links{
    list-style:none;
    display:flex;
}

.nav-links li{
    position:relative;
}

.nav-links li a{
    color:white;
    text-decoration:none;
    padding:15px 20px;
    display:block;
}

.nav-links li:hover{
    background:#008751;
}

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    background:#131181;
    min-width:250px;
    display:none;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
}

.dropdown-menu li{
    width:100%;
}

.dropdown-menu li a{
    color:#333;
    padding:12px 15px;
}

.dropdown-menu li:hover{
    /* background:#240ec4; */
}

.dropdown:hover .dropdown-menu{
    display:block;
}

.menu-btn{
    display:none;
    color:white;
    font-size:28px;
    cursor:pointer;
}

@media(max-width:991px){

    .menu-btn{
        display:block;
    }

    .nav-links{
        position:absolute;
        top:70px;
        left:-100%;
        flex-direction:column;
        width:100%;
        background:#008751;
        transition:.3s;
    }

    .nav-links.active{
        left:0;
    }

    .dropdown-menu{
        position:static;
        display:none;
        background:#008751;
        box-shadow:none;
    }

    .dropdown.open .dropdown-menu{
        display:block;
    }

    .dropdown-menu li a{
        color:white;
    }
}

/* Third Level Dropdown */
.sub-dropdown{
    position:relative;
}

.sub-menu{
    position:absolute;
    top:0;
    left:100%;
    min-width:250px;
    background:#008751;
    display:none;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    z-index:1001;
}

.sub-menu li{
    width:100%;
}

.sub-menu li a{
    color:#333;
    padding:12px 15px;
    display:block;
    text-decoration:none;
}

.sub-menu li:hover{
    background:#008751;
}

.sub-dropdown:hover .sub-menu{
    display:block;
}

/* Mobile */
@media(max-width:991px){

    .sub-menu{
        position:static;
        display:none;
        background:#0055aa;
        box-shadow:none;
    }

    .sub-dropdown.open .sub-menu{
        display:block;
    }
    .sub-menu li a{
        color:white;
        padding-left:40px;
    }
    .sub-menu li a:hover{
        background:#003366;
    }
}

.logo img{
    height:60px;
    width:auto;
    display:block;
}
.logo img{
    height:100px;
    width:auto;
    transition:0.3s;
}

.logo img:hover{
    transform:scale(1.05);
}
/* Mobile Navigation Hover Effect */
@media (max-width: 991px) {

    .navbar-nav .nav-link:hover{
        background-color: #28a745; /* Your preferred color */
        color: #fff !important;
        border-radius: 5px;
        transition: all 0.3s ease;
    }

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

    .navbar-nav li:hover{
        background-color: #28a745;
        transition: 0.3s ease;
    }

    .navbar-nav li:hover a{
        color: #fff !important;
    }

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

    .navbar-nav .nav-item{
        margin-bottom: 3px;
    }

    .navbar-nav .nav-link{
        padding: 12px 20px;
        display: block;
        transition: all .3s ease;
    }

    .navbar-nav .nav-link:hover{
        background: #28a745;
        color: #fff !important;
    }
}
.feature-heading{
    color:#0c8f3f;
    margin-bottom:10px;
    font-size:18px;
    text-transform:uppercase;
    letter-spacing:1.5px;
}
/* HEADER SLIDER */

.hero-slider{
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.hero-slider .slide{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-slider .slide.active{
    opacity: 1;
    z-index: 1;
}

.hero-slider .slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.slide-content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff;
    width:90%;
    z-index:2;
}

.slide-content h1{
    font-size:3rem;
    margin-bottom:20px;
    text-transform:uppercase;
}

.slide-content p{
    font-size:1.2rem;
    margin-bottom:25px;
}

.slider-btn{
    display:inline-block;
    padding:14px 35px;
    background:#008751;
    color:#000;
    text-decoration:none;
    border-radius:5px;
    font-weight:700;
}

.slider-btn:hover{
    background:#fff;
}

.slider-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    border:none;
    background:rgba(255,255,255,.3);
    color:#fff;
    width:50px;
    height:50px;
    cursor:pointer;
    font-size:24px;
}

.prev{
    left:20px;
}

.next{
    right:20px;
}

@media(max-width:768px){
    .slide-content h1{
        font-size:2rem;
    }
}

/* Remove bullets from dropdowns */
.dropdown-menu,
.sub-menu {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.dropdown-menu li,
.sub-menu li {
    list-style: none;
}
.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    background:white;
    min-width:250px;
    display:none;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    list-style:none;
    padding:0;
    margin:0;
}

.sub-menu{
    position:absolute;
    top:0;
    left:100%;
    min-width:250px;
    background:#fff;
    display:none;
    box-shadow:0 5px 15px rgba(0,0,0,0.2);
    z-index:1001;
    list-style:none;
    padding:0;
    margin:0;
}

.dropdown:hover > .dropdown-menu{
    display:block;
}
.dropdown-menu{
    display:none;
    list-style:none;
    padding:0;
    margin:0;
}
/* ======= Services Section ======= */
.page-section {
  padding: 6rem 0;
}
.page-section h2.section-heading, .page-section .section-heading.h2 {
  font-size: 2.5rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
.page-section h3.section-subheading, .page-section .section-subheading.h3 {
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  margin-bottom: 4rem;
}

.services-section {
  padding: 80px 20px;
  background: #f8f9fa;
  font-family: 'Poppins', sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.section-subtitle {
  text-align: center;
  font-size: 16px;
  max-width: 700px;
  margin: 0 auto 50px auto;
  color: #555;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.service-card {
  background: #ffffff;
  padding: 30px 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: 0.3s ease-in-out;
}

.service-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.10);
}

.service-card .icon {
  font-size: 45px;
  color: #0066cc;
  margin-bottom: 15px;
}

.service-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.service-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

.service-icon .fa-circle {
    color: #0033AA !important;
}

/* SERVICES SECTION */
#services {
    padding: 80px 0;
    background: #f8f9fa;
}

.section-heading {
    font-size: 2.5rem;
    font-weight: 700;
    color: #008751;
    margin-bottom: 15px;
}

.section-subheading {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 50px;
}

.service-icon {
    color: #008751;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.service-icon .fa-circle {
    color: #008751;
}

.service-icon:hover {
    transform: translateY(-10px);
}

#services .col-md-4 {
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

#services .col-md-4:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

#services h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #222;
    margin-bottom: 15px;
    line-height: 1.5;
}

#services p {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
}

/* Responsive */
@media (max-width: 768px) {
    .section-heading {
        font-size: 2rem;
    }

    #services .col-md-4 {
        margin-bottom: 20px;
    }
}
.row.text-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
}

.row.text-center .col-md-4 {
    flex: 1 1 300px;
    max-width: 350px;
}

/* ABOUT SECTION */
/* ABOUT SECTION */
.about-section{
    padding:80px 0;
    background:#f8f9fa;
    overflow:hidden;
}

.about-content{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

/* Initial Animation State */
.about-text{
    flex:1;
    opacity:0;
    transform:translateX(-80px);
    transition:all 1s ease;
}

.about-image{
    flex:1;
    opacity:0;
    transform:translateX(80px);
    transition:all 1s ease;
}

/* Active State */
.about-section.show .about-text,
.about-section.show .about-image{
    opacity:1;
    transform:translateX(0);
}

/* Heading Animation */
.about-text h2{
    font-size:42px;
    color:#008751;
    margin-bottom:25px;
    position:relative;
}

.about-text h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-10px;
    width:0;
    height:4px;
    background:#008751;
    transition:width 1s ease;
}

.about-section.show h2::after{
    width:80px;
}

/* Cards */
.about-item{
    margin-bottom:25px;
    padding:20px;
    background:#fff;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:all .4s ease;
}

.about-item:hover{
    transform:translateY(-10px);
    box-shadow:0 15px 30px rgba(0,0,0,.15);
}

/* Image Animation */
.about-image img{
    width:100%;
    border-radius:15px;
    transition:all .5s ease;
    box-shadow:0 15px 30px rgba(0,0,0,.15);
}

.about-image:hover img{
    transform:scale(1.05);
}

/* Button */
.about-btn{
    display:inline-block;
    margin-top:20px;
    padding:14px 35px;
    background:#008751;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    transition:all .4s ease;
}

.about-btn:hover{
    background:#006b40;
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0,135,81,.3);
}

/* Core Values Animation */
.core-values li{
    list-style:none;
    padding:10px 0;
    transform:translateX(-20px);
    opacity:0;
    animation:slideIn .6s forwards;
}

.core-values li:nth-child(1){animation-delay:.2s;}
.core-values li:nth-child(2){animation-delay:.4s;}
.core-values li:nth-child(3){animation-delay:.6s;}
.core-values li:nth-child(4){animation-delay:.8s;}

.core-values li::before{
    content:"✓ ";
    color:#008751;
    font-weight:bold;
}

/* Keyframes */
@keyframes slideIn{
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@media(max-width:768px){
    .about-content{
        flex-direction:column;
    }

    .about-text h2{
        font-size:32px;
    }
}
.about-image img{
    animation:float 4s ease-in-out infinite;
}

@keyframes float{
    0%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
    100%{transform:translateY(0);}
}
/* section law */
/* SECTION */
.lslga-section{
    padding:80px 0;
    background:#f4f4f4;
    overflow:hidden;
}

.lslga-section .container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

/* ROWS */
.top-row,
.bottom-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    margin-bottom:50px;
}

/* LAW BOX */
.law-box h2,
.quick-links h2,
.operators h2,
.operations h2{
    font-size:32px;
    margin-bottom:20px;
    color:#222;
}

.law-box p{
    line-height:1.8;
    color:#555;
    margin-bottom:25px;
}

.download-btn{
    display:inline-block;
    padding:14px 45px;
    background:#008751;
    color:#fff;
    text-decoration:none;
    border-radius:40px;
    transition:.4s;
}

.download-btn:hover{
    transform:translateY(-5px);
    background:#002b74;
}

/* QUICK LINKS */
.quick-links{
    background:url("images/quick-links-bg.jpg") center/cover;
    padding:30px;
    position:relative;
}

.quick-links::before{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.75);
}

.quick-links h2{
    color:#fff;
    position:relative;
    z-index:1;
}

.links-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.links-grid a{
    border:1px solid rgba(255,255,255,.6);
    color:#fff;
    text-align:center;
    padding:12px;
    text-decoration:none;
    transition:.4s;
}

.links-grid a:hover{
    background:#008751;
    border-color:#003da5;
    transform:translateY(-4px);
}

/* LICENSED OPERATORS */
.operator-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:3px;
}

.operator-card{
    background:#008751;
    color:#fff;
    text-decoration:none;
    text-align:center;
    min-height:110px;
    padding:25px;
    transition:.4s;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.operator-card i{
    font-size:28px;
    margin-bottom:12px;
}

.operator-card:hover{
    background:#300f8a;
    transform:translateY(-6px);
    box-shadow:0 15px 25px rgba(0,0,0,.15);
}

/* OPERATIONS */
.accordion{
    border:1px solid #ddd;
    background:#fff;
    border-radius:10px;
}

.accordion-item{
    border-bottom:1px solid #ddd;
}

.accordion-header{
    width:100%;
    border:none;
    background:#f8f8f8;
    text-align:left;
    padding:16px 20px;
    cursor:pointer;
    font-size:15px;
    transition:.3s;
}

.accordion-header:hover{
    background:#008751;
    color:#fff;
}

.accordion-content{
    max-height:0;
    overflow:hidden;
    transition:max-height .5s ease;
    background:#fff;
}

.accordion-item.active .accordion-content{
    max-height:250px;
    padding:15px 20px;
}

.accordion-content ul{
    margin:0;
    padding-left:20px;
}

.accordion-content li{
    margin-bottom:8px;
}

/* REVEAL ANIMATION */
.reveal{
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp 1s ease forwards;
}

.reveal:nth-child(2){
    animation-delay:.3s;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* RESPONSIVE */
@media(max-width:991px){

    .top-row,
    .bottom-row{
        grid-template-columns:1fr;
    }

    .operator-grid{
        grid-template-columns:1fr;
    }

    .links-grid{
        grid-template-columns:1fr;
    }
}

/* ===========================
   UNLICENSED OPERATORS SECTION
=========================== */

.unlicensed-operators{
    position:relative;
    min-height:650px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden;

    background:url("images/lottery-balls.jpg") center center/cover no-repeat;
}

/* Background Zoom Animation */
.unlicensed-operators::before{
    content:"";
    position:absolute;
    inset:0;
    background-attachment: fixed;
    background:url("../agency/assets/img/lotteryballs.jpg") center center/cover no-repeat;
    background-attachment: fixed;

    animation:zoomBackground 20s ease-in-out infinite alternate;

    z-index:1;
}

/* Dark Overlay */
.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.72);
    z-index:2;
}

/* Content */
.content{
    position:relative;
    z-index:3;
    max-width:1000px;
    padding:20px;

    animation:fadeUp 1.4s ease forwards;
}

/* Heading */
.content h2{
    color:#fff;
    font-size:36px;
    font-weight:300;
    letter-spacing:2px;
    margin-bottom:35px;
    text-transform:uppercase;

    opacity:0;
    animation:slideUp 1s ease forwards;
}

/* Paragraph */
.content p{
    color:#fff;
    font-size:18px;
    line-height:1.7;
    margin-bottom:60px;

    opacity:0;
    animation:slideUp 1s ease .4s forwards;
}

/* Button */
.view-btn{
    display:inline-block;

    background:#008751;
    color:#000;

    text-decoration:none;

    padding:22px 80px;
    border-radius:60px;

    font-size:20px;
    font-weight:500;

    transition:all .4s ease;

    opacity:0;
    animation:slideUp 1s ease .8s forwards;
}

.view-btn:hover{
    background:#ffffff;
    transform:translateY(-6px);
    box-shadow:0 15px 40px rgba(0,0,0,.3);
}

/* Fade Up Animation */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Slide Up */
@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Background Zoom */
@keyframes zoomBackground{
    from{
        transform:scale(1);
    }
    to{
        transform:scale(1.12);
    }
}

/* RESPONSIVE */
@media(max-width:1200px){

    .content h2{
        font-size:46px;
    }

    .content p{
        font-size:22px;
    }
}

@media(max-width:768px){

    .unlicensed-operators{
        min-height:500px;
    }

    .content h2{
        font-size:32px;
    }

    .content p{
        font-size:18px;
    }

    .view-btn{
        padding:18px 50px;
        font-size:18px;
    }
}

@media(max-width:480px){

    .content h2{
        font-size:26px;
    }

    .content p{
        font-size:16px;
        line-height:1.6;
    }
}

/* news */
/* ==========================
   LATEST NEWS SECTION
========================== */

.latest-news-section{
    padding:100px 0;
    background:#f7f7f7;
    overflow:hidden;
}

.latest-news-section .container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

.section-header{
    text-align:center;
    margin-bottom:60px;
}

.section-header h2{
    font-size:48px;
    font-weight:700;
    color:#222;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* Grid */

.news-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

/* Card */

.news-card{
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    overflow:hidden;
    position:relative;
    transition:.5s ease;
    animation:fadeUp 1s ease forwards;
}

.news-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

/* Image */

.news-image{
    position:relative;
    overflow:hidden;
}

.news-image img{
    width:100%;
    height:340px;
    object-fit:cover;
    transition:transform .8s ease;
}

.news-card:hover .news-image img{
    transform:scale(1.12);
}

/* Badge */

.news-badge{
    position:absolute;
    left:20px;
    bottom:20px;
    background:#19c637;
    color:#fff;
    padding:12px 22px;
    font-size:15px;
    font-weight:700;
    text-transform:uppercase;
    z-index:2;
}

/* Content */

.news-content{
    padding:30px;
}

.news-content h3{
    font-size:20px;
    line-height:1.3;
    color:#111;
    margin-bottom:20px;
    font-weight:700;
    transition:.3s;
}

.news-card:hover h3{
    color:#19c637;
}

.news-content p{
    color:#666;
    line-height:1.8;
    margin-bottom:25px;
    font-size:16px;
}

/* Date */

.news-date{
    color:#999;
    font-size:15px;
    display:flex;
    align-items:center;
    gap:8px;
}

/* Fade Animation */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(60px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Stagger Animation */

.news-card:nth-child(1){
    animation-delay:.2s;
}

.news-card:nth-child(2){
    animation-delay:.4s;
}

.news-card:nth-child(3){
    animation-delay:.6s;
}

/* Responsive */

@media(max-width:991px){

    .news-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .section-header h2{
        font-size:40px;
    }
}

@media(max-width:768px){

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

    .section-header h2{
        font-size:34px;
    }

    .news-image img{
        height:280px;
    }
}
.news-card{
    opacity:0;
    transform:translateY(80px);
    transition:all .8s ease;
}

.news-card.show{
    opacity:1;
    transform:translateY(0);
}

/* * Footer Full Width Background */ 
.modern-footer {
    margin:0px;
    width: 100%;
    color: #eaeaea;
    font-family: "Poppins", sans-serif;
    padding: 0;
    background: #111; /* ensure visible full width */
}

/* Center the content but keep footer background full width */
.footer-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Grid Layout */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

/* Titles and text */
.footer-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-text {
    color: #bdbdbd;
    line-height: 1.6;
}

/* Section Headings */
.footer-heading {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #bdbdbd;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateX(5px);
}

/* Social icons */
.footer-socials {
    display: flex;
    gap: 12px;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: #1a1a1a;
    color: #eaeaea;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    transition: 0.3s ease;
}

.social-icon:hover {
    background: #ffffff;
    color: #000000;
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
    transform: translateY(-4px);
}

/* Bottom Bar */
.footer-bottom {
    margin-top: 40px;
    text-align: center;
    border-top: 1px solid #1f1f1f;
    padding-top: 15px;
}

.footer-bottom p {
    color: #bdbdbd;
    margin: 0;
}
/* close modern footer */
/* chat pop up */
/* Floating WhatsApp Chat Button */
.whatsapp-chat-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #25d366; /* WhatsApp Green */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    z-index: 9999;
    animation: popUp 0.4s ease-in-out;
    transition: transform 0.2s ease-in-out;
}

.whatsapp-chat-btn:hover {
    transform: scale(1.1);
}

/* Popup Chat Box */
.whatsapp-popup {
    position: fixed;
    bottom: 100px;
    right: 25px;
    width: 260px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    padding: 15px;
    z-index: 9999;
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.whatsapp-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.whatsapp-popup-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.whatsapp-popup-header h4 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.whatsapp-popup p {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

.whatsapp-popup a {
    display: block;
    text-align: center;
    margin-top: 15px;
    background: #25d366;
    color: white;
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}

.whatsapp-popup a:hover {
    background: #1ebe5c;
}
/* Animations */
@keyframes popUp {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* demo */
/* Footer Logo */
.footer-logo {
    display: inline-block;
    margin-bottom: 15px;
}

.footer-logo img {
    width: 120px;
    height: auto;
    transition: transform 0.4s ease;
}

.footer-logo img:hover {
    transform: scale(1.08);
}

/* Social Icons */
.footer-socials {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.footer-socials a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    color: #fff;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    transform: translateY(-5px);
    background: #ffb400;
    color: #000;
}

/* Logo below social icons */
.social-logo-container {
    margin-top: 15px;
}

.social-logo-container img {
    width: 100px;
    height: auto;
    cursor: pointer;
    transition: all 0.4s ease;
}

.social-logo-container img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px rgba(255,180,0,0.7));
}

/* Responsive */
@media (max-width: 768px) {
    .footer-logo img {
        width: 90px;
    }

    .social-logo-container img {
        width: 80px;
    }
}
.logo-spin {
    animation: spinLogo 1s ease;
}

.logo-pulse {
    animation: pulseLogo 1s infinite;
}

@keyframes spinLogo {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseLogo {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}
/* responsive bars */
/* @media(max-width:991px){

.nav-links{

    position:fixed;

    top:0;

    right:-100%;

    width:300px;

    height:100vh;

    background:#008751;

    flex-direction:column;

    padding-top:90px;

    transition:.4s;

    overflow-y:auto;

}

.nav-links.active{

    right:0;

}

.menu-btn{

    display:block;

    z-index:10001;

}

}
/* Dark overlay */
.nav-overlay{

    position:fixed;

    inset:0;

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

    display:none;

    z-index:999;

}

.nav-overlay.show{

    display:block;

} */
/* ---------------------------------------------------------------------------
   Utilities the homepage markup uses but nothing defined.
   These came from the Bootstrap template stylesheet that was deleted along
   with its index.html. Only four rules were actually needed, so they live
   here rather than restoring 210 KB of template CSS that would override the
   Board's own design.
   --------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border: 0;
    border-radius: 4px;
    background: #1b6b3a;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.btn:hover,
.btn:focus {
    background: #14512c;
    color: #fff;
    transform: translateY(-1px);
}

.btn:focus-visible {
    outline: 3px solid #f4c430;
    outline-offset: 2px;
}

.text-uppercase { text-transform: uppercase; }
.text-muted     { color: #6c757d; }
.my-3           { margin-top: 1rem; margin-bottom: 1rem; }