/* Base */
body { font-family: Roboto, sans-serif; font-size:16px; font-weight:400;  background-color: #f8f9fa; color:#212529; margin:0; padding:0; }
.logo-row { border-bottom: 2px solid #0d6efd; background:#ffffff; }
.logo-row img { vertical-align: middle; }
.logo-row h1 { display:inline-block; margin:0 0 0 10px; vertical-align: middle; font-size:24px; color:#0d6efd; }

/* Gradient Navbar */
.navbar { background: linear-gradient(90deg, #cc3300, #802000) !important; position: sticky; top: 0; z-index:1030; }
.navbar.scrolled { box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: box-shadow 0.3s ease-in-out; }

.navbar .nav-link { color:#fff !important; font-weight:500; padding:10px 18px; position: relative; transition: color .3s, transform .3s; }
.navbar .nav-link:hover { color:#fd7e14 !important; transform: translateY(-3px); }
.navbar .nav-link::after { content:""; position:absolute; left:0; bottom:0; width:0; height:3px; background:#fd7e14; transition:width .3s; }
.navbar .nav-link:hover::after, .navbar .nav-link.active::after { width:100%; }
.horitab-banner-section {
    padding: 20px 0;
    background: #F4BB44;
    color: #000000;
}
    .horitab-banner-section a {
        color: #000000;
        text-decoration: none;
        padding: 10px;
    }
.horitab-section {
    padding: 20px 0;
    background: #802000;
    color: #ffffff;
    
}

.top-menu {
    background: #F4BB44;
    padding: 6px 0;
   /* border-bottom: 1px solid #e0c200;*/
}

    .top-menu ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: flex-start;
        
        gap: 20px;
    }

        .top-menu ul li a {
            text-decoration: none;
            
            color: #333;
            font-weight: 600;
            padding: 5px 10px;
            transition: 0.3s;
        }

            .top-menu ul li a:hover {
                background: #fff4a8;
                border-radius: 5px;
            }

@media (max-width: 768px) {
    .top-menu ul {
        flex-direction: column; /* stack vertically */
        gap: 0; /* remove gap because border will separate */
        align-items: center;
        width: 100%; /* full width for mobile */
    }

        .top-menu ul li {
            width: 100%; /* make each item full width */
            border-bottom: 1px solid #E0A030; /* bottom border */
        }

            .top-menu ul li:last-child {
                border-bottom: none; /* remove border for last item */
            }

            .top-menu ul li a {
                padding: 10px 15px; /* bigger tap area */
                display: block; /* ensure clickable area covers full width */
                width: 100%;
            }
}
}
/* Different background colors */
.top-menu.primary {
    background: #F4BB44; /* warm yellow/orange */
}

.top-menu.secondary {
    background: #802000; /* green */
    
}

    .top-menu.secondary ul li a {
        color: #ffffff; /* white text */
    }

        .top-menu.secondary ul li a:hover {
            background: #66BB6A; /* slightly lighter green on hover */
            color: #ffffff; /* keep text white on hover */
        }
    .horitab-section a {
        color: #ffffff;
        text-decoration: none;
        padding: 10px;
    }


    /* Intro + sidebar */
    .intro-section {
        padding: 40px 0;
        background: #F7F7F7;
    }
   
    .list-group-item {
        font-weight: 500;
        transition: all .3s ease;
        cursor: pointer;
    }
.list-group-item:hover { background-color:#0d6efd; color:#fff; }
.leftscontent {
    border: 0px solid;
    background: #ffffff;
    padding: 10px;
    box-shadow: 10px 10px 5px #F0F0F0;
}
/* Sticky sidebar */
.col-md-3 .list-group { position: sticky; top:120px; }

/* Services section with bg fade */
.services-section { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../images/services-bg.jpg') no-repeat center center/cover; color:#fff; padding:60px 0; }
.services-section h2 { color:#fff; }
.services-section .card { background: rgba(255,255,255,0.95); color:#000; border-radius:12px; border:none; transition: transform .2s, box-shadow .2s; }
.services-section .card:hover { transform: translateY(-6px); box-shadow: 0 8px 20px rgba(0,0,0,0.2); border-top:4px solid #198754; }

/* Footer */
footer { background:#0a1931; color:#fff; padding:30px 0; }
footer h5 { color:#fff; }
footer p, footer a { color:#e1e1e1; text-decoration:none; }

/* Buttons */
.btn-primary { background-color:#0d6efd; border:none; }
.btn-primary:hover { background-color:#fd7e14; }

/* Cards used elsewhere */
.card { border-radius:12px; }

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Dark mode */
body.dark-mode { background-color:#121212; color:#e1e1e1; }
body.dark-mode .navbar { background: linear-gradient(90deg, #333, #111) !important; }
body.dark-mode footer { background:#000 !important; color:#fff; }
body.dark-mode .card { background:#1c1c1c; color:#e1e1e1; border:1px solid #333; }
body.dark-mode .services-section .card { background: rgba(255,255,255,0.06); color:#e1e1e1; }

/* Responsive tweaks */
@media (max-width:767px) {
  .col-md-3 .list-group { position: static; top:auto; }
  .logo-row h1 { display:block; margin-top:10px; }
}

.img-fluid {
    max-width: 100%;
    height: auto;
    display: block; /* ensures proper spacing */
}