:root{
  --nf-dark:#0b1220;
  --nf-accent:#ffb400;
  --nf-accent2:#ff7a00;
}
*{font-family:'Poppins',sans-serif;}
h1,h2,h3,h4,.display-3,.display-4{font-family:'Rajdhani',sans-serif;letter-spacing:.5px;}
.fw-black{font-weight:900;}
body{padding-top:0;}
.nf-nav:not(.transparent) + * { padding-top: 70px; }
.hero, .page-banner { margin-top: 0; }

/* NAV */
.nf-nav{background:rgba(11,18,32,.95);backdrop-filter:blur(8px);transition:.4s ease;position:fixed;top:0;width:100%;z-index:1000;}
.nf-nav.transparent{background:transparent;backdrop-filter:none;box-shadow:none;}
.nf-nav.transparent .nav-link { text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.nf-nav .nav-link{color:#fff;font-weight:500;position:relative;margin:0 .25rem;}
.nf-nav .nav-link::after{content:"";position:absolute;left:50%;bottom:-4px;width:0;height:2px;background:var(--nf-accent);transition:.3s;}
.nf-nav .nav-link:hover::after,.nf-nav .nav-link.active::after{width:80%;left:10%;}
.nf-logo{color:var(--nf-accent);}

/* HERO */
.hero{min-height:90vh;position:relative;overflow:hidden;background:#0b1220;}
.hero-carousel{position:absolute;inset:0;z-index:0;}
.hero-carousel .hero-slide{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;transition:opacity 1.4s ease-in-out;transform:scale(1.05);}
.hero-carousel .hero-slide.active{opacity:1;}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(120deg,rgba(11,18,32,.9),rgba(11,18,32,.55));}
.hero .container{z-index:2;}
.hero-title{line-height:1.05;text-shadow:0 6px 30px rgba(0,0,0,.4);}

/* BUTTONS */
.nf-btn{border-radius:50px;padding:.75rem 2rem;font-weight:600;transition:.3s transform,.3s box-shadow;}
.nf-btn:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(0,0,0,.2);}

/* FEATURE CARDS */
.feature-card{transition:.4s;border-top:3px solid transparent;}
.feature-card:hover{transform:translateY(-8px);border-top-color:var(--nf-accent);}

/* STATS */
.nf-stats{background:linear-gradient(135deg,var(--nf-dark),#1a2540);}

/* PAGE BANNER */
.page-banner{min-height:45vh;background:linear-gradient(120deg,rgba(11,18,32,.85),rgba(11,18,32,.6)),url('https://i.pinimg.com/736x/c8/47/81/c84781e3bec1bebe1a24c483ffdf84f6.jpg') center/cover no-repeat;}

/* SERVICE CARDS */
.service-page{background:url('../images/sub-station.jpg') center/cover no-repeat fixed;position:relative;}
.service-page::before{content:"";position:absolute;inset:0;background:rgba(11,18,32,0.8);z-index:0;}
.service-page .container{position:relative;z-index:1;}

.service-card{cursor:pointer;background:#2a6592 !important;border-radius:1rem;box-shadow:0 8px 25px rgba(0,0,0,.15);transition:.4s;position:relative;overflow:hidden;border:none;}
.service-card .card{background:transparent !important;border:none;color:#fff;}
.service-card .card-title{color:#ffb400;}
.service-card .card-text{color:#e0e0e0;}
.service-card::before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--nf-accent);transform:scaleY(0);transform-origin:top;transition:.4s;}
.service-card:hover{transform:translateY(-10px);box-shadow:0 20px 40px rgba(0,0,0,.3);}
.service-card:hover::before{transform:scaleY(1);}
.service-card i{font-size:2.2rem;color:var(--nf-accent);margin-bottom:1rem;}
.service-card h5{font-weight:700;}

/* Floating Animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0px); }
}
.float-img {
  animation: float 4s ease-in-out infinite;
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
}

/* Modal Styling */
.modal-content { background: #0b1220; color: #fff; border: 1px solid #2a6592; border-radius: 1rem; }
.modal-header { border-bottom: 1px solid #2a6592; }
.btn-close-white { filter: invert(1) grayscale(100%) brightness(200%); }


/* PROJECT PAGE */
.project-page{background:url('../images/sub-stat.jpg') center/cover no-repeat fixed;position:relative;}
.project-page::before{content:"";position:absolute;inset:0;background:rgba(11,18,32,0.85);z-index:0;}
.project-page .container{position:relative;z-index:1;}

/* PROJECT CARDS */
.project-card{position:relative;overflow:hidden;border-radius:1rem;cursor:pointer;border: 1px solid rgba(255,255,255,0.1);}
.project-card img{width:100%;height:260px;object-fit:cover;transition:.6s;}
.project-card:hover img{transform:scale(1.1);}
.project-card .overlay{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(11,18,32,.95));color:#fff;padding:1.5rem;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transform:translateY(20px);transition:.4s;}
.project-card:hover .overlay{opacity:1;transform:translateY(0);}
.project-card .overlay h5{color:var(--nf-accent);}


.card-img-top{
    height: 300px;
}
.heading{
            border-style: inset;
            border-radius: 10px;
            padding: 10px;
            
            


}

/* FOOTER */
.site-footer {
    background-color: rgba(11,18,32,.95); /* Dark industrial background */
    color: #ffffff;
    padding: 60px 0 0 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    padding: 0 20px 40px 20px;
}

/* Typography */
.footer-column h4 {
    color: #ff9900; /* Industrial accent color (orange) */
    font-size: 1.2rem;
    margin-bottom: 25px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 2px;
    background-color: #ff9900;
}

.footer-column p {
    line-height: 1.6;
    color: #cccccc;
    font-size: 0.95rem;
}

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

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    font-size: 0.95rem;
}

.footer-column ul li a:hover {
    color: #ff9900;
    padding-left: 5px;
}

/* Logo Section */
.footer-logo {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: #ffffff;
}

.footer-logo span {
    color: #ff9900;
}

/* Social Links */
.social-links {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background-color: #333333;
    color: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background-color: #ff9900;
    transform: translateY(-3px);
}

/* Contact Details */
.contact-details p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.contact-details i {
    color: #ff9900;
    width: 20px;
}

/* Bottom Bar */
.footer-bottom {
    background-color: #111111;
    padding: 20px 0;
    border-top: 1px solid #333333;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bottom p {
    color: #777777;
    font-size: 0.85rem;
    margin: 0;
}

.footer-legal a {
    color: #777777;
    text-decoration: none;
    font-size: 0.85rem;
    margin-left: 20px;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: #ff9900;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-legal {
        margin-top: 10px;
    }
    
    .footer-legal a {
        margin: 0 10px;
    }
}

/* RESPONSIVE */
@media(max-width:768px){
  /* Let the existing carousel continue behind the transparent mobile navbar. */
  .nf-nav{background:transparent;backdrop-filter:none;}
  .nf-nav:not(.transparent) + .hero{padding-top:0;}
  .nf-nav .navbar-collapse.show,
  .nf-nav .navbar-collapse.collapsing{background:#0d3b66;border-radius:0 0 .75rem .75rem;padding:.75rem 1rem 1rem;}
  .nf-nav .navbar-nav{gap:.15rem;}
  .nf-nav .navbar-nav .nav-link{padding:.65rem .75rem;}
  .nf-nav .navbar-nav .nf-btn{display:block;margin-top:.5rem;text-align:center;}
  .hero{min-height:80vh;text-align:center;align-items:flex-start!important;padding:90px 0 48px;}
  .hero .container{width:100%;}
  .hero-title{font-size:2.5rem;}
}


/* Narefree branded opening splash */
body.nf-site-loading{overflow:hidden}
.nf-splash{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#08101d 0%,#0b1220 58%,#1b2b46 100%);color:#fff;opacity:1;visibility:visible;transition:opacity .65s ease,visibility .65s ease}
.nf-splash.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.nf-splash-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:nfSplashEnter .8s cubic-bezier(.23,1,.32,1) both}
.nf-splash-logo{width:min(220px,48vw);height:min(220px,48vw);object-fit:cover;border-radius:50%;background:#fff;box-shadow:0 0 0 8px rgba(255,180,0,.12),0 20px 60px rgba(0,0,0,.38);padding:8px}
.nf-splash-name{margin-top:1.2rem;font-family:'Rajdhani',sans-serif;font-size:clamp(2.2rem,7vw,4.8rem);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 6px 28px rgba(0,0,0,.35)}
.nf-splash-line{width:92px;height:3px;margin-top:1rem;border-radius:999px;background:linear-gradient(90deg,#ff7a00,#ffb400,#ffe08a);animation:nfSplashLine 1.15s ease-in-out infinite alternate}
@keyframes nfSplashEnter{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes nfSplashLine{from{transform:scaleX(.55);opacity:.6}to{transform:scaleX(1);opacity:1}}
@media (max-width:575px){.nf-splash-logo{width:170px;height:170px}.nf-splash-name{letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.nf-splash,.nf-splash-content,.nf-splash-line{animation:none;transition:none}}
body:not(.nf-site-loading) .nf-splash{display:none}

.nf-nav .navbar-brand img{object-fit:cover;background:#fff;padding:1px}
.nf-nav .navbar-brand.fw-black{letter-spacing:.04em}


/* Product catalogue, quote form and map additions */
.filter-toolbar{position:relative;z-index:1}.filter-btn{border-radius:999px!important;font-weight:700!important;transition:all .25s ease}.filter-btn.active,.filter-btn:hover{background:#0d3b66!important;border-color:#0d3b66!important;color:#fff!important}.product-card{border:0;border-radius:1rem;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}.product-card:hover{transform:translateY(-8px);box-shadow:0 1rem 2.25rem rgba(13,59,102,.16)!important}.product-card .card-img-top{height:220px;object-fit:cover}.product-card .card-body{padding:1.35rem}.product-card .badge{font-family:'Rajdhani',sans-serif;letter-spacing:.08em;text-transform:uppercase}.product-card strong{font-family:'Rajdhani',sans-serif;font-size:1.05rem}.product-page h2,.quote-page h2{color:#0d3b66}.quote-page form{border:1px solid rgba(13,59,102,.08)}.quote-page .form-label{font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0d3b66}.quote-page .form-control,.quote-page .form-select{border-radius:.75rem;border:1px solid #dbe2e8;padding:.8rem 1rem}.quote-page .form-control:focus,.quote-page .form-select:focus{border-color:#ffb400;box-shadow:0 0 0 .25rem rgba(255,180,0,.18)}.map-card{padding:1.5rem;background:#fff;border-radius:1rem;box-shadow:0 .75rem 2rem rgba(13,59,102,.1)}.map-card iframe{border:0;width:100%;height:100%}.map-card .ratio{min-height:300px}.product-item,.service-item{transition:opacity .25s ease,transform .25s ease}.product-item.d-none,.service-item.d-none{display:none!important}
@media (max-width:768px){.page-banner{min-height:360px}.product-card .card-img-top{height:200px}.filter-toolbar{justify-content:flex-start!important}.filter-btn{font-size:.8rem}.map-card .ratio{min-height:260px}.quote-page form{padding:1.25rem!important}}