.hero-video{
    position:relative;
    height:100vh;
    min-height:750px;
    overflow:hidden;
}

/* Video */

.hero-bg-video{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Dark Overlay */

.hero-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.50) 45%,
        rgba(0,0,0,.30) 100%
    );

    z-index:1;
}

/* Content */

.hero-content{
    position:relative;
    z-index:5;

    height:100vh;

    display:flex;
    flex-direction:column;
    justify-content:center;

    color:#fff;

    max-width:700px;
}
#particles-js{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:5;
}

.hero-header{
    position:relative;
    z-index:10;
}
.hero-tag{
    display:inline-block;
    width:max-content;

    background:#7CC242;

    color:#fff;

    padding:10px 22px;
    border-radius:50px;

    font-size:14px;
    font-weight:600;

    margin-bottom:25px;
}

.hero-content h1{
    font-size:72px;
    font-weight:800;
    line-height:1.1;

    margin-bottom:25px;
    max-width:800px;
}

.hero-content p{
    max-width:650px;

    font-size:22px;
    line-height:1.7;

    margin-bottom:40px;

    color:rgba(255,255,255,.9);
}

.hero-buttons{
    display:flex;
    gap:15px;
}

.hero-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    padding:25px 0;
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo img{
    height:60px;
}

.main-menu ul{
    display:flex;
    gap:40px;
    list-style:none;
    margin:0;
    padding:0;
}

.main-menu a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.main-menu a:hover{
    color:#7CC242;
}

.header-btn{
    background:#7CC242;
    color:#fff;
    text-decoration:none;

    padding:18px 18px;
    border-radius:10px;
    font-weight:600;
}
.btn-primary{
    background:#7CC242;
    color:#fff;

    padding:16px 35px;

    border-radius:60px;
    text-decoration:none;
    font-weight:600;
}

.btn-outline{
    border:2px solid #fff;
    color:#fff;

    padding:16px 35px;

    border-radius:60px;
    text-decoration:none;
}

.btn-primary:hover{
    background:#6ab134;
}

.btn-outline:hover{
    background:#fff;
    color:#000;
}

/* Bottom Wave */

.hero-wave{
    position:absolute;
    bottom:-2px;
    left:0;
    width:100%;
    z-index:3;
}

.hero-wave svg{
    width:100%;
    display:block;
}

@media(max-width:768px){

.hero-content h1{
    font-size:42px;
}

.hero-content p{
    font-size:17px;
}

.hero-buttons{
    flex-direction:column;
}

}
 
.chat-widget{
    position:absolute;
    right:30px;
    bottom:200px;
    z-index:99;

    padding:15px 19px;
    border-radius:80px;

    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    box-shadow:
    0 8px 30px rgba(0,0,0,0.25),
    inset 0 1px 1px rgba(255,255,255,0.08);

    transition:all .4s ease;
}

.chat-widget:hover{
    transform:translateY(-5px);
}

.chat-btn {
    display: flex;
    align-items: center;
    gap: 0px;
    background: #7fc03f;
    color: #1b1b1b;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none; 
    font-weight: 600;
    transition: all .4s ease;
    font-size: 15px;
}

.chat-btn:hover{
    background:#e9b233;
    color:#000;

    transform:scale(1.03);
}

.chat-icon{
    width:34px;
    height:34px;

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

    border-radius:50%;
}

.chat-btn:hover .chat-icon{
    animation:rotateIcon .8s ease;
}

@keyframes rotateIcon{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
.hero-farmer{
    position:absolute;

    right:0;
    bottom:0;

    height:90%;

    z-index:2;

    object-fit:contain;
}
.logo-section{
    background:#fff;
    padding:40px 0;
    overflow:hidden;
    position:relative;
}

.logo-slider{
    width:100%;
    overflow:hidden;
}

.logo-track{
    display:flex;
    align-items:center;
    width:max-content;

    animation:scrollLogo 35s linear infinite;
}

.logo-track img{
    height:60px;
    width:auto;

    margin:0 60px;

    opacity:.65;

    filter:grayscale(100%);

    transition:.3s;
}

.logo-track img:hover{
    opacity:1;
    filter:grayscale(0%);
    transform:scale(1.05);
}

/* Left fade */
.logo-section::before{
    content:'';
    position:absolute;
    left:0;
    top:0;

    width:120px;
    height:100%;

    z-index:2;

    background:linear-gradient(
        to right,
        #fff,
        transparent
    );
}

/* Right fade */
.logo-section::after{
    content:'';
    position:absolute;
    right:0;
    top:0;

    width:120px;
    height:100%;

    z-index:2;

    background:linear-gradient(
        to left,
        #fff,
        transparent
    );
}

@keyframes scrollLogo{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}
.trusted-title{
    text-align:center;
    font-size:18px;
    font-weight:600;
    color:#666;
    margin-bottom:30px;
    letter-spacing:1px;
    text-transform:uppercase;
}


.category-section{
    background:#f8faf7;
    padding: 60px 0;
}

.section-title{
    text-align:center;
}

.section-title h2{
    font-size:42px;
    font-weight:700;
    color:#0b6b32;
}

.category-card{

    background:#fff;

    border-radius:24px;

    padding:35px 20px;

    text-align:center;

    box-shadow:0 5px 25px rgba(0,0,0,.06);

    transition:.3s;
}

.category-card:hover{

    transform:translateY(-8px);

    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.category-icon{

    width:90px;
    height:90px;

    border-radius:50%;

    background:#f2f5f1;

    margin:auto auto 20px;

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

    font-size:42px;
}

.category-card h4{
    font-size:20px;
    font-weight:600;
    margin:0;
}

.categorySwiper{
    overflow:hidden;
}

.swiper-slide{
    width:250px;
}
.about-dual-section{
    padding:60px 0;
    background:#ffffff;
}

.about-card{

    background:#f4f7ee;

    padding: 20px 50px;

    height:100%;

    border-radius:30px;

    transition:.4s;

    position:relative;

    overflow:hidden;
}

.about-card:hover{
    transform:translateY(-8px);
}

.why-card{
    background:#f4f0e4;
}

.who-card{
    background:#edf6eb;
}

.about-icon{

    width:90px;
    height:90px;

    border-radius:50%;

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

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

    font-size:45px;

    margin-bottom:30px;
}

.about-card h2{

    font-size:42px;
    font-weight:700;

    color:#0b6b32;

    margin-bottom:25px;
}

.about-card p{

    font-size:16px;
    line-height:1.6;

    color:#555;

    margin-bottom:20px;
}

.about-btn{

    display:inline-block;

    margin-top:20px;

    background:#ffffff;

    color:#0b6b32;

    padding:16px 30px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.about-btn:hover{

    background:#0b6b32;

    color:#fff;
}

@media(max-width:768px){

.about-card{
    padding:35px;
}

.about-card h2{
    font-size:34px;
}

.about-card p{
    font-size:16px;
}

}
.features-section{
    padding:60px 0;
    background:#f8f8f8;
}

.section-heading{
    margin-bottom:80px;
}

.section-heading span{
    display:inline-block;
    background:#d7f3c7;
    color:#2c7a2c;

    padding:8px 18px;
    border-radius:30px;

    font-size:14px;
    font-weight:600;
}

.section-heading h2{
    font-size:42px;
    font-weight:700;
    margin-top:20px;
}

.section-heading p{
    color:#666;
    max-width:700px;
    margin:auto;
}

.feature-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:0px;

    margin-bottom:0px;
}
.reverse .feature-content {
    padding-left: 45px;
}
.feature-row.reverse{
    flex-direction:row-reverse;
}

.feature-content{
    flex:1;
}

.feature-image{
    flex:1;
}

.feature-image img{
    width:100%;

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

    transition:.4s;
    height: auto; 
}

.feature-image img:hover{
    transform:translateY(-10px);
}

.feature-tag{
    display:inline-block;

    background:#f7c24f;

    padding:10px 18px;

    border-radius:30px;

    font-weight:600;

    margin-bottom:20px;
}

.feature-content h3{
    font-size:30px;
    font-weight:700;
    margin-bottom:20px;
}

.feature-content p{
    color:#666;
    line-height:1.6;
    font-size:16px;
}

.feature-btn{
    display:inline-block;

    margin-top:25px;

    padding:14px 28px;

    border:1px solid #ddd;

    border-radius:40px;

    text-decoration:none;
    color:#0b6b32;

    font-weight:600;

    transition:.3s;
}

.feature-btn:hover{
    background:#0b6b32;
    color:#fff;
}
.kd-services{

    background:#0b6b32;

    padding:60px 0;

    overflow:hidden;
}

.service-intro{

    padding-right:50px;
}

.section-tag{

    color:#b8e986;

    font-weight:600;

    letter-spacing:2px;

    display:block;

    margin-bottom:15px;
}

.service-intro h2{

    color:#fff;

    font-size:42px;

    line-height:1.1;

    margin-bottom:25px;
}

.service-intro p{

    color:rgba(255,255,255,.8);

    font-size:18px;

    line-height:1.8;
}

.service-nav{

    display:flex;

    gap:15px;

    margin-top:50px;
}

.service-prev,
.service-next{

    width:60px !important;
    height:60px !important;

    border:1px solid rgba(255,255,255,.3);

    border-radius:50%;

    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    margin:0 !important;

    color:#fff !important;
}

.service-card{

    background:#fff;

    overflow:hidden;

    border-radius:20px;

    height:100%;
}

.service-card img{

    width:100%;
    height:260px;

    object-fit:cover;
}

.service-content{

    padding:30px;
    min-height:184px;
}

.service-content h3{

    color:#0b6b32;

    font-size:27px;

    margin-bottom:15px;
}

.service-content p{

    color:#666;

    line-height:1.8;
}

.service-content a{

    color:#0b6b32;

    text-decoration:none;

    font-weight:600;
}
/* ==========================================
   SERVICES SHOWCASE (No Images Collage)
   ========================================== */
.services-showcase {
    padding: 100px 0;
    background: #ffffff;
}

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

.section-title span {
    color: #4caf50;
    font-weight: 600;
    letter-spacing: 2px;
}

.section-title h2 {
    font-size: 42px;
    color: #183b1d;
    margin-top: 15px;
}

/* Base Collage Layout */
.masonry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px; /* 👈 Add this line to explicitly set a smaller base height unit */
    gap: 20px;
}

/* Since <img> is gone, the .service-box itself handles 
   the background colors and flexbox alignment.
*/
.service-box {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 160px; /* 👈 Lower this from 280px to match your grid row base */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}

.tall {
    grid-row: span 2;
    min-height: 340px; /* 👈 Lower this from 580px (accounts for two rows + the gap) */
}

/* Subtle hover pop effect instead of scaling the image */
.service-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(24, 59, 29, 0.2);
}



.wide {
    grid-column: span 2;
}

/* Changed from absolute layout to a relative flex system 
   so it fills the box safely without an image below it.
*/
.overlay {
    padding: 30px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-sizing: border-box;
}

.overlay small {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overlay h3 {
    color: #ffffff;
    font-size: 36px;
    margin-top: 10px;
    font-weight: 600;
    line-height: 1.2;
}

/* ==========================================
   Color Palette Varieties 
   ========================================== */
.box-green  { background: linear-gradient(135deg, #1e5c2d, #11361a); }
.box-blue   { background: linear-gradient(135deg, #2b3e56, #162230); }
.box-orange { background: linear-gradient(135deg, #e67e22, #d35400); }
.box-dark   { background: linear-gradient(135deg, #2c3e50, #1a252f); }
.box-teal   { background: linear-gradient(135deg, #16a085, #117a65); }


/* ==========================================
   RESPONSIVE MEDIA QUERIES
   ========================================== */
@media(max-width: 991px) {
    .masonry-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .tall {
        min-height: 350px;
        grid-row: span 1; /* Stops it from breaking grid layout on smaller tablets */
    }
    
    .wide {
        grid-column: span 2;
    }

    .overlay h3 {
        font-size: 24px;
    }
}

@media(max-width: 576px) {
    .masonry-grid {
        grid-template-columns: 1fr; /* Completely stacked row structure on standard mobile */
    }
    .wide {
        grid-column: span 1;
    }
    .section-title h2 {
        font-size: 32px;
    }
}
   .philosophy-section{
    position:relative;
    padding:60px 20px;
    background:url('images/farm-bg.jpg') center center/cover no-repeat;
    overflow:hidden;
}

/* Dark Overlay */

.philosophy-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(8,35,18,0.72);
}

/* Center Box */

.philosophy-content{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:auto;
    text-align:center;

    padding:60px;

    background:rgba(255,255,255,0.10);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.20);

    border-radius:24px;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.15);
}

.sub-title{
    display:inline-block;
    color:#b8ffb8;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:20px;
}

.philosophy-content h2{
    color:#fff;
    font-size:42px;
    line-height:1.2;
    margin-bottom:25px;
}

.philosophy-content p{
    color:rgba(255,255,255,.90);
    font-size:18px;
    line-height:1.9;
    margin-bottom:35px;
}

.philosophy-btn{
    display:inline-block;
    padding:14px 35px;
    background:#7ed957;
    color:#183b1d;
    font-weight:700;
    border-radius:50px;
    text-decoration:none;
    transition:.3s;
}

.philosophy-btn:hover{
    transform:translateY(-3px);
}

@media(max-width:768px){

.philosophy-section{
    padding:90px 15px;
}

.philosophy-content{
    padding:35px 25px;
}

.philosophy-content h2{
    font-size:34px;
}

.philosophy-content p{
    font-size:16px;
}

}
   .workshop-section{
    padding:60px 0;
    background:#f8faf7;
}

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

.section-tag{
    background:#dff2d0;
    color:#2d6b2d;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
}

.section-header h2{
    font-size:42px;
    font-weight:700;
    margin-top:20px;
}

.section-header p{
    color:#666;
}

.workshop-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;

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

    transition:.3s;
    height:100%;
}

.workshop-card:hover{
    transform:translateY(-8px);
}

.workshop-image{
    position:relative;
    height:350px;
}

.workshop-image img{
    width:100%;

}

.badge-live{
    position:absolute;
    top:15px;
    left:15px;

    background:#76c043;
    color:#fff;

    padding:8px 15px;
    border-radius:30px;

    font-size:13px;
    font-weight:600;
}

.workshop-content{
    padding:30px;
}

.event-date{
    color:#76c043;
    font-weight:600;
    margin-bottom:12px;
}

.workshop-content h3{
    font-size:30px;
    margin-bottom:15px;
    font-weight:700;
}

.workshop-content p{
    color:#666;
    line-height:1.7;
}

.speaker{
    display:flex;
    align-items:center;
    gap:10px;

    margin-top:20px;
    margin-bottom:25px;
}

.speaker img{
    width:45px;
    height:45px;
    border-radius:50%;
    object-fit:cover;
}

.speaker span{
    font-weight:600;
}

.register-btn{
    display:inline-block;

    background:#0b6b32;
    color:#fff;

    padding:12px 28px;

    border-radius:40px;
    text-decoration:none;

    font-weight:600;
}

.register-btn:hover{
    color:#fff;
}
.forum-section{
    padding:60px 0;
    background:#fff;
}

.forum-header{
    margin-bottom:60px;
}

.forum-badge{
    display:inline-block;

    background:#dff2d0;
    color:#0b6b32;

    padding:10px 20px;

    border-radius:30px;

    font-size:14px;
    font-weight:600;
}

.forum-header h2{
    font-size:42px;
    font-weight:700;

    margin-top:20px;
    margin-bottom:15px;

    color:#111;
}

.forum-header p{
    max-width:700px;
    margin:auto;

    color:#666;
    font-size:18px;
}

.forum-card{
    background:linear-gradient(
        135deg,
        #f8f1e4,
        #f7e9ce
    );

    border-radius:24px;
    padding:30px;

    height:100%;

    border:1px solid #f9e4bc;

    transition:.4s ease;

    position:relative;
    overflow:hidden;
}

.forum-card:hover{
    transform:translateY(-8px);

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

.forum-user{
    display:flex;
    align-items:center;
    gap:15px;

    margin-bottom:20px;
}

.forum-user img{
    width:55px;
    height:55px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #dff2d0;
}

.forum-user h6{
    margin:0;
    font-size:16px;
    font-weight:700;
}

.forum-user span{
    color:#888;
    font-size:13px;
}

.forum-card h4{
    font-size:24px;
    font-weight:700;

    line-height:1.5;

    margin-bottom:20px;

    color:#222;
}

.forum-tags{
    margin-bottom:20px;
}

.forum-tags span{
    display:inline-block;

    background:#eef9e9;

    color:#0b6b32;

    padding:8px 14px;

    border-radius:30px;

    font-size:13px;
    font-weight:600;
}

.forum-footer{
    display:flex;
    justify-content:space-between;

    padding-top:20px;

    border-top:1px solid #eee;

    color:#666;

    font-size:14px;
    font-weight:500;
}

.forum-btn{
    display:inline-block;

    background:#0b6b32;
    color:#fff;

    padding:14px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;
}

.forum-btn:hover{
    background:#085126;
    color:#fff;
}
.impact-section{
    background: linear-gradient(
        135deg,
        #0b6b32,
        #149347
    );

    padding:60px 0;
    color:#fff;
    position:relative;
    overflow:hidden;
}

/* decorative circles */

.impact-section::before{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-120px;
    right:-100px;
}

.impact-section::after{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
    bottom:-80px;
    left:-80px;
}

.impact-tag{
    display:inline-block;
    padding:8px 18px;
    background:rgba(255,255,255,.15);
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    margin-bottom:20px;
}

.impact-section h2{
    font-size:42px;
    font-weight:700;
    line-height:1.2;
    color:#fff;
    margin-bottom:20px;
}

.impact-section p{
    font-size:18px;
    opacity:.9;
    max-width:700px;
}

.expert-btn{
    display:inline-block;
    background:#fff;
    color:#0b6b32;
    padding:18px 35px;
    border-radius:60px;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}

.expert-btn:hover{
    transform:translateY(-4px);
    background:#f4f4f4;
}

.stats-row{
    margin-top:60px;
}

.stat-box{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.15);

    padding:30px;
    border-radius:20px;

    text-align:center;

    transition:.3s;
}

.stat-box:hover{
    transform:translateY(-5px);
    background:rgba(255,255,255,.18);
}

.stat-box h3{
    color:#fff;
    font-size:42px;
    font-weight:800;
    margin-bottom:10px;
}

.stat-box span{
    color:#fff;
    opacity:.9;
    font-size:15px;
}
   .announcement-bar{
    background:#7cc243;
    color:#fff;

    height:45px;
    line-height:45px;

    overflow:hidden;
    white-space:nowrap;

    position:relative;
    z-index:9999;
}

.announcement-track{
    display:inline-flex;
    align-items:center;

    width:max-content;

    animation:announcementScroll 30s linear infinite;
}

.announcement-track span{
    margin-right:80px;

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

    letter-spacing:.3px;
}

@keyframes announcementScroll{

    0%{
        transform:translateX(0);
    }

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

}




/* Container section configuration matching your layout */
.download-app-section {
    background-color: #ffffff; 
    border-top: 5px solid #2d663b; /* The green top accent border from your graphic */
    border-bottom: 5px solid #2d663b;
}

/* Typography styles to match your font colors */
.app-title {
    color: #2b3e56; /* The deep blue/slate color from your image */
    font-size: 42px;
    font-weight: 600;
    letter-spacing: 1.5px;
    margin-bottom: 8px;
}

.app-subtitle {
    color: #939ca3; /* The muted gray text */
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Flexbox wrapper for buttons to wrap seamlessly on mobile devices */
.app-buttons-flex {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* Base button properties using your signature brand green */
.app-btn {
    background-color: #333; /* Forest green color matching your screenshot */
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 6px;
    min-width: 175px;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.app-btn:hover {
    background-color: #214c2c; /* Slightly darker shade on hover */
    transform: translateY(-2px);
}

/* Icon / SVG spacing configurations */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.btn-icon svg {
    width: 24px;
    height: 24px;
}

/* Label text properties inside the buttons */
.btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.btn-text small {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}

.btn-text strong {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Responsive adjustment for center alignment on mobile devices */
@media (max-width: 767.98px) {
    .app-title, .app-subtitle {
        text-align: center;
    }
    .app-buttons-flex {
        justify-content: center;
    }
}

/* Styling for headings inside the footer */
.footer-heading {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

/* Subtle accent line indicator under menu columns */
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: #b8e986; /* Matches your signature light green indicator */
}

/* List element alignments */
.footer-menu li {
    margin-bottom: 12px;
}

.footer-menu li a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
    display: inline-block;
}

/* Hover shift animation for links */
.footer-menu li a:hover {
    color: #b8e986;
    padding-left: 4px;
}

/* Corporate external site anchor layout styling */
.propikr-link {
    color: #b8e986;
    font-size: 14px;
    transition: opacity 0.2s ease;
}

.propikr-link:hover {
    color: #ffffff;
    opacity: 0.9;
}

/* Optional helper to keep dark logos clean on dark backgrounds if necessary */
.brand-invert {
    filter: brightness(0) invert(1); /* Forces a dark image logo asset to display crisp white */
    opacity: 0.9;
}