/* ===== Dark colour palette (tweak these to match the brand precisely) ===== */
    :root{
      --body-bg:   #0d1117;   /* page background                 */
      --sb-bg:     #13171f;   /* sidebar background              */
      --sb-hover:  #1f2633;   /* sidebar link hover/active bg    */
      --sb-accent: #00c8ff;   /* accent / primary highlight      */
      --card-bg:   #1c1f26;   /* cards & widget panels           */
      --text-main: #70898e;   /* base text colour                */
    }

    /* ===== Generic dark styling ===== */
    body {font-size: 14px;background:var(--body-bg); color:var(--text-main); height: 100vh;   font-family: "Inter", sans-serif; 
   background: radial-gradient(circle at center, #2bffde82 0%, rgba(5, 199, 169, 0.2) 40%, #4a6a65 100%);}

#sidebar.offcanvas-start{
	border: none;
	box-shadow: 0 0 87px #0000005c;
	background: linear-gradient(-5deg, #171c1b, #152f2aab, #171c1b);
	transition: ease-in-out .5s;
}

    .navbar         {background:var(--sb-bg);}
    .btn-outline-light{--bs-btn-border-color:#6c757d;}

   
    .sidebar-nav .nav-link {color:var(--text-main); border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 2px;
	transition:ease-in-out .5s;
	}
    .sidebar-nav .nav-link:hover  { background: rgb(12 188 154);
    color: #ffffff;}
    .sidebar-nav .nav-link.active {color: #ffffff;
        background: rgb(12 188 154);
	}
.mbl_hdr  button.navbar-toggle {
    background: none;
    border: none;
    padding: 0;
    margin:0px;
    vertical-align: middle;
}
header.mbl_hdr {
    background: #141e1c;
    box-shadow: 0 0 15px #0000004a;
}
.mbl_hdr span.line {
    background: linear-gradient(-245deg, #09c7ac 0%, #1f9988 50%);
    width: 30px;
    display: block;
    height: 2px;
    margin: 8px 0;
    transition: ease-in-out .5s;
}
.mbl_hdr span.line.line_2 {
    width: 22px;
    margin-right: 0;
    margin-left: auto;
}
.mbl_hdr .offcanvas-header img {
    margin: 0;
	max-width: 120px;
}
ul.menuul li a img {
    width: 30px;
    margin-right: 5px;
}
.lightcolor{
	color: #70a59e;
	transition:ease-in-out .5s;
}
h2.sec_head {
	color: #fff;
    font-size: 24px;
    margin-bottom: 15px;
}
.svg_icon img {
   max-width: 36px;
    margin: 0 auto 10px;
    display: block;
}
.secrow .lightcolor{
	font-size:14px;
}
    .card {
	border-radius: 12px;
    box-shadow: 0 0 87px #00000054;
    background: linear-gradient(-205deg, #0f2724, #171b1a);
    border: 2px solid #0aa89233;
    padding: 20px !important;
	    transition: ease-in-out .5s;
		
	}
    hr {opacity:.15;}

.secrow .card:hover  {
    transform:scale(1.03);
	cursor:pointer;
}
.secrow .card:hover .lightcolor{
	color:#fff !important;
}
.secrow.card .card {
    background: #1d3d37;
    border-color:transparent;
}
.secrow.card .card:hover {
   background: #2c5d54;
    border-color: #48a694;
}
img{
	max-width:100%;
}
.offcanvas-header img {
    max-width: 120px;
    margin: 0 auto;
}

ul.menuul {
    margin: 0;
    padding: 0;
}
}
.menuul li {
    list-style: none;
}
ul.submnu {
    display: none;
    list-style: none;
    background: #141a1a;
    border-radius: 10px;
    padding: 15px;
margin-top:8px;
	transition: ease-in-out .5s;
}



.sidebar-nav ul.submnu a.nav-link {
    padding: 12px 20px;
}

 .top-bar button {
      background-color: #9ee65c;
      color: white;
      font-weight: bold;
      border: 2px solid #2c7548;
    }

    .ai-box {
      background-color: #9ee65c;
      color: white;
      font-weight: bold;
      padding: 30px 20px;
      border-radius: 5px;
      text-align: center;
    }

    .circle {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #ffee93;
    }

    .circle.brown {
      background-color: #8a6a00;
    }

   .top_bar button.btn {
    border: 3px solid rgba(255, 255, 255, 0.3);
    padding: 12px 25px;
    display: inline-block !important;
    width: auto;
    font-size: 15px;
    min-width: 220px !important;
    text-align: center;
    background: linear-gradient(45deg, #0cbc9a, #444e50);
    color: #ffffff;
    font-weight: 600;
    max-width: 200px;
    margin: 5px 10px;
    border-radius: 55px;
}
.card.top_bar {
    flex-direction: row;
    justify-content: center;
}
.card.circle {
    margin: 0 auto;
    height: 108px;
    width: 108px;
}

span.arrow {
    position: absolute;
    top: 14px;
    right: 12px;
    max-width: 12px;
    opacity: .6;
    width: 35px;
    min-width: 30px;
    display: flex;
    align-items: center;
    height: 30px;
	cursor:pointer;
}
span.arrow img {
    max-width: 12px;
    margin: 0 auto;
	transition:ease-in-out .5s;
}
.menuul li {
    position: relative;
}
span.arrow.rotate img {
    transform: rotate(180deg);
}
    /* Show sidebar permanently on ≥ lg */
    @media (min-width:992px){
      #sidebar.offcanvas-start{position: fixed;
        transform: none;
        visibility: visible !important;
        width: 240px;
        left: 0;
        bottom: 0;
		}
		main {
			padding-left: 255px !important;
		}
.offcanvas-body {
    overflow: visible;
}
ul.submnu {
    position: absolute;
    left: 100%;
    width: 200px !important;
    z-index: 99999999;
	margin-top:0px;
	        top: 30px;
        display: block;
        visibility: hidden;
opacity:0;
}
.menuul >li:hover> ul {
    top: 0;
    visibility: visible;
opacity:1;
}
		span.arrow img{
transform: rotate(270deg);
}
		span.arrow.rotate img {
    transform: rotate(90deg);
}

ul.submnu.show {
    visibility: visible;
	opacity:1;
    top: 0;
}
    }
@media (max-width:991px){
	.top_bar button.btn {
		min-width: 150px !important;
	}
	div#sidebar.in {
    width: 250px;
    visibility: visible;
    transform: translateX(-0%);
}
ul.submnu.show {
    display: block;
}
}
@media (max-width:767px){
main.container-fluid.py-4 >.p-3 {
    padding: 0 5px !important;
}
.card.top_bar {
    flex-wrap: wrap;
}



}