:root {
      --stoxrich-primary: #007bff;
      --stoxrich-green: #28a745;
      --stoxrich-bg-light: #f8f9fa;
      --stoxrich-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .navbar-brand .text-primary { color: var(--stoxrich-primary) !important; }
    .text-success { color: var(--stoxrich-green) !important; }

    .btn-outline-success {
      border-color: var(--stoxrich-green);
      color: var(--stoxrich-green);
    }
    .btn-outline-success:hover {
      background-color: var(--stoxrich-green);
      color: #fff;
    }

    .card-feature {
      transition: all 0.3s ease-in-out;
      border-top: 5px solid var(--stoxrich-green);
      border-radius: 10px;
    }
    .card-feature:hover {
      transform: translateY(-5px);
      box-shadow: var(--stoxrich-shadow);
    }

    .vh-80 { min-height: 80vh; }


    /* ---------------------------------------------------------------- */


    /* Navbar link style */

.nav-custom{
    font-weight:500;
    color:#555 !important;
    position:relative;
    transition:0.3s;
}

/* Hover */
.nav-custom:hover{
    color:#198754 !important;
}

/* Underline animation */
.nav-custom::after{
    content:"";
    position:absolute;
    width:0%;
    height:2px;
    left:0;
    bottom:-5px;
    background:#198754;
    transition:0.3s;
}

.nav-custom:hover::after{
    width:100%;
}

/* Active link */
.active-link{
    color:#198754 !important;
}

/* Navbar smooth feel */
.navbar{
    transition:all 0.3s ease;
}




/* ====================================================== */



/* =================================
FOOTER DESIGN
================================= */



.footer-section{
/* background:#0f172a; */
/* background:#0f172a; */

background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
url("/static/images/team1.jpg");

background-size: cover;
background-position: center;
background-repeat: no-repeat;

color:white;
color:#cbd5e1;
padding-top:60px;
border-top:1px solid rgba(255,255,255,0.05);
box-shadow:0 -10px 40px rgba(0,0,0,.4);
}

/* headings */

.footer-heading{
color:#22c55e;
font-weight:600;
text-transform:uppercase;
font-size:0.9rem;
letter-spacing:0.5px;
}

/* text */

.footer-section p{
font-size:0.9rem;
line-height:1.6;
}

/* links */

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

.footer-links a{
color:#cbd5e1;
text-decoration:none;
transition:all .3s ease;
}

.footer-links a:hover{
color:#22c55e;
padding-left:4px;
}

/* social icons */

.footer-social a{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,0.05);
color:#ffffff;
font-size:18px;
transition:all .3s ease;
}

.footer-social a:hover{
background:#22c55e;
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(34,197,94,.4);
}

/* contact icons */

.footer-contact i{
color:#22c55e;
font-size:1rem;
}

/* divider */

.footer-section hr{
border-color:rgba(255,255,255,0.1);
}

/* responsive */

@media (max-width:768px){

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

.footer-social{
justify-content:center;
}

.footer-contact li{
justify-content:center;
}

}



/* ================================================= */

/* ANNOUNCEMENT BAR */

/* ANNOUNCEMENT BAR */

.announcement-bar{
background: linear-gradient(
90deg,
#fde2e4,
#fad2e1,
#e2ece9,
#cddafd,
#e4c1f9,
#ffd6a5
);

color:#333;
overflow:hidden;
white-space:nowrap;
font-size:14px;
font-weight:600;
padding:15px 0;
border-bottom:1px solid rgba(0,0,0,0.05);
}

.announcement-track{
display:inline-block;
padding-left:100%;
animation:scrollTicker 30s linear infinite;
}

.announcement-track span{
margin-right:70px;
}

/* animation */

@keyframes scrollTicker{
0%{transform:translateX(0);}
100%{transform:translateX(-100%);}
}

/* pause on hover */

.announcement-bar:hover .announcement-track{
animation-play-state:paused;
}
.announcement-track span{
margin-right:60px;
}

/* Animation */

@keyframes scrollTicker{

0%{
transform:translateX(0);
}

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

}

.announcement-bar:hover .announcement-track{
animation-play-state: paused;
}


/* ======================Bottom to Up buttopn============= */


.back-to-top{
position: fixed;
bottom: 100px;
right: 70px;
width: 45px;
height: 45px;
border: none;
border-radius: 50%;
background: #22c55e;
color: white;
font-size: 20px;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
transition: 0.3s;
z-index: 999;
}

.back-to-top:hover{
background:#16a34a;
transform: translateY(-3px);
}