:root{
  --brand-red:#FF0000;
  --brand-black:#0b0b0b;
  --muted:#9aa0a6;
  --light-gray:#f5f6f7;
  --dark-gray:#2a2a2a;
}

body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, Montserrat; background:#fff; color:#222; line-height:1.6; letter-spacing:0.3px;}
.fw-300{font-weight:300}

.bg-black{background:var(--brand-black)!important}

.logo{width:40px; height:40px; object-fit: contain;}
.brand-text{font-family:Montserrat, sans-serif; font-weight:700; letter-spacing:0.8px; font-size: 0.95rem; color: #ffffff; text-transform: uppercase;}

/* Logo styles */
.navbar{padding: 0.4rem 0; background-color: #000000 !important; border-bottom: 2px solid var(--brand-red); box-shadow: 0 2px 12px rgba(11,11,11,0.15);}
.navbar .logo{transition:transform .3s cubic-bezier(.34,.1,.68,.55)}
.navbar:hover .logo{transform:scale(1.12)}
.navbar-brand{margin-right: auto; gap: 0.6rem; font-size: 1rem;}
.navbar-nav{margin-left: auto; gap: 0.1rem;}
.nav-link{font-size: 0.9rem; padding: 0.5rem 0.9rem !important; color: rgba(255,255,255,0.8) !important; transition: all 0.3s; position: relative; font-weight: 500;}
.nav-link::after{content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--brand-red); transition: all 0.3s; transform: translateX(-50%);}
.nav-link:hover{color: #fff !important;}
.nav-link:hover::after{width: 60%;}

.hero{background:linear-gradient(180deg, rgba(11,11,11,1) 0%, rgba(30,30,30,1) 100%); position:relative}

/* Hero slideshow background */
.hero-slideshow{background-attachment:fixed; background-size:cover; background-position:center; height:80vh; display:flex; align-items:center}
.hero-slideshow-bg{position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; filter: brightness(0.9) contrast(1.1);}
.slideshow-slide{position:absolute; top:0; left:0; right:0; bottom:0; background-size:cover; background-position:center; opacity:0; animation:slideshow 18s ease-in-out infinite}
.slideshow-slide:nth-child(1){animation-delay:0s}
.slideshow-slide:nth-child(2){animation-delay:6s}
.slideshow-slide:nth-child(3){animation-delay:12s}
@keyframes slideshow{0%{opacity:0} 11%{opacity:1} 44%{opacity:1} 55%{opacity:0} 100%{opacity:0}}

.hero-title{font-family:Montserrat, sans-serif; font-weight:700; letter-spacing:-1px; line-height:1.1; font-size: 3.5rem; text-shadow: 0 4px 12px rgba(0,0,0,0.5);}
.hero-copy{position:relative; z-index:1}
.hero-copy p{text-shadow: 0 2px 8px rgba(0,0,0,0.4); font-size: 1.1rem; letter-spacing: 0.5px;}
.hero-media{position:relative; z-index:1}
.z-2{z-index:2}
.hero-copy h1{color:#ffffff; text-shadow: 0 4px 16px rgba(0,0,0,0.8);}
.barrier-span{color: #ffffff; font-weight: 800; text-shadow: 0 4px 16px rgba(0,0,0,0.8);}
.hero-copy h1 .text-danger{color:#ffffff; text-shadow: 0 4px 16px rgba(0,0,0,0.8);}
.hero-illustration{max-width:320px; filter:drop-shadow(0 20px 40px rgba(200,10,10,0.15))}

/* decorative hero pattern */
.hero-pattern{position:absolute; right:-10%; top:-10%; width:60%; height:120%; background:radial-gradient(circle at 30% 20%, rgba(0,0,0,0.15), transparent 20%), repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 6px, transparent 6px 12px); transform:rotate(12deg); pointer-events:none; z-index:0}
.hero-divider{position:absolute; bottom:0; left:0; width:100%; height:72px; z-index:1}

/* Accent line for sections */
.accent-line{width:60px; height:4px; background:linear-gradient(90deg, transparent, var(--brand-red), transparent); margin:0 auto; box-shadow: 0 2px 8px rgba(200,16,46,0.3);}

/* Section titles */
.section-title{font-family:Montserrat, sans-serif; font-weight:700; font-size:2.5rem; letter-spacing:-0.8px; color: var(--brand-black); position: relative; display: inline-block;}
.section-title::after{content: ''; position: absolute; bottom: -8px; left: 0; width: 40%; height: 3px; background: var(--brand-red);}

/* CTA pulse */
.btn-pulse{position:relative; box-shadow:0 8px 24px rgba(200,10,10,0.3); transition:all .3s cubic-bezier(.34,.1,.68,.55); font-weight: 600; letter-spacing: 0.5px; border-radius: 8px;}
.btn-pulse:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(200,10,10,0.4); background: #a30b20;}
.btn-pulse::after{content:''; position:absolute; left:50%; top:50%; width:120%; height:120%; transform:translate(-50%,-50%); border-radius:8px; background:radial-gradient(circle, rgba(200,10,10,0.12), transparent 40%); opacity:0; transition:opacity .25s, transform .4s}
.btn-pulse:hover::after{opacity:1; transform:translate(-50%,-50%) scale(1.04)}

/* Service cards */
.service-card{position:relative; overflow:hidden; border-radius:14px; background:#fff; transition:transform .3s cubic-bezier(.34,.1,.68,.55), box-shadow .3s, border .3s; box-shadow:0 10px 28px rgba(11,11,11,0.12); border: 2px solid transparent;}
.service-card:hover{transform:translateY(-16px) scale(1.02); box-shadow:0 32px 56px rgba(11,11,11,0.2); background:#fff; border-color: var(--brand-red);}
.service-card .card-accent{position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--brand-red), rgba(200,16,46,0.3)); transition: height 0.3s;}
.service-card:hover .card-accent{height: 6px;}
.icon-badge{font-size:2.8rem; line-height:1; color: var(--brand-red); transition: transform 0.3s; display: inline-block;}
.service-card:hover .icon-badge{transform: scale(1.15) rotate(5deg);}
.service-card .card-title{color:var(--brand-red); font-family:Montserrat, sans-serif; font-weight:700; margin-bottom:0.75rem; font-size: 1.2rem;}
.service-card .card-body{padding:2rem; background: linear-gradient(135deg, #fff 0%, rgba(200,16,46,0.02) 100%);}

/* About section */
.about-list{list-style:none; padding:0; margin:0}
.about-list li{padding:1rem; display:flex; align-items:center; gap:14px; color:#555; font-weight: 500; border-left: 3px solid transparent; transition: all 0.3s; margin-bottom: 0.5rem;}
.about-list li:hover{border-left-color: var(--brand-red); padding-left: 1.2rem; color: #222;}
.badge-accent{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; background:linear-gradient(135deg, var(--brand-red), #8b0820); color:#fff; border-radius:50%; font-size:0.875rem; flex-shrink:0; font-weight: 700; box-shadow: 0 4px 12px rgba(200,16,46,0.25);}
.about-box{background:linear-gradient(135deg, rgba(200,10,10,0.08), rgba(11,11,11,0.03)); border:2px solid rgba(200,10,10,0.15); transition:all .3s cubic-bezier(.34,.1,.68,.55); box-shadow:0 8px 20px rgba(11,11,11,0.08); border-radius: 14px; padding: 2rem;}
.about-box:hover{transform:translateY(-8px); box-shadow:0 16px 40px rgba(200,10,10,0.2); background:linear-gradient(135deg, rgba(200,10,10,0.12), rgba(11,11,11,0.05)); border-color: var(--brand-red);}
.about-icon{font-size:3.5rem; line-height:1; margin-bottom:1rem; filter: drop-shadow(0 2px 6px rgba(200,16,46,0.2));}
.about-box h4{font-family: Montserrat, sans-serif; font-weight: 700; color: var(--brand-black);}

/* Testimonials */
.testimonial{background:linear-gradient(135deg, #fff 0%, rgba(200,16,46,0.02) 100%); padding:2.5rem; border:2px solid rgba(11,11,11,0.1); border-radius: 14px; transition:all .3s cubic-bezier(.34,.1,.68,.55); box-shadow:0 8px 20px rgba(11,11,11,0.08); position: relative; overflow: hidden;}
.testimonial::before{content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--brand-red); transform: scaleY(0); transform-origin: top; transition: transform 0.3s;}
.testimonial:hover{transform:translateY(-8px); box-shadow:0 16px 40px rgba(11,11,11,0.15); border-color:var(--brand-red); background:linear-gradient(135deg, #fff, rgba(200,16,46,0.04));}
.testimonial:hover::before{transform: scaleY(1);}
.testimonial .stars{font-size:1.1rem; color: var(--brand-red); margin-bottom: 1rem;}
.testimonial-author{border-top:2px solid rgba(11,11,11,0.1); padding-top:1.5rem; margin-top:1.5rem; font-weight: 600; color: var(--brand-black);}
.testimonial-author span{color: var(--muted); font-size: 0.9rem; display: block; margin-top: 0.3rem;}

/* Contact section */
.contact-section{background:linear-gradient(135deg, var(--brand-black) 0%, rgba(11,11,11,0.96) 100%); position:relative; overflow:hidden; border-top: 3px solid var(--brand-red);}
.contact-section::before{content:''; position:absolute; top:-50%; right:-20%; width:60%; height:200%; background:radial-gradient(circle at 40% 40%, rgba(0,0,0,0.15), transparent 60%); pointer-events:none; z-index:0}
.contact-section > .container{position:relative; z-index:1}
.form-control-dark{background:rgba(255,255,255,0.09); border:2px solid rgba(255,255,255,0.15); color:#fff; transition:all .3s; border-radius: 8px; padding: 0.8rem 1rem; font-weight: 500;}
.form-control-dark::placeholder{color:rgba(255,255,255,0.5)}
.form-control-dark:focus{background:rgba(255,255,255,0.12); border-color:var(--brand-red); box-shadow:0 0 0 0.3rem rgba(200,10,10,0.2); color: #fff;}
.contact-info-card{background:rgba(255,255,255,0.07); border:2px solid rgba(255,255,255,0.12); backdrop-filter:blur(10px); transition:all .3s; border-radius: 12px; padding: 2rem;}
.contact-info-card:hover{background:rgba(255,255,255,0.1); border-color:var(--brand-red); box-shadow: 0 8px 24px rgba(200,16,46,0.2); transform: translateY(-4px);}
.contact-info-card a{text-decoration:none; transition:color .2s; font-weight: 600;}
.contact-info-card a:hover{color:var(--brand-red)}
.social-links{display:flex; gap:1rem; flex-wrap:wrap}
.social-link{display:inline-block; padding:0.7rem 1.3rem; background:rgba(200,10,10,0.15); color:#fff; text-decoration:none; border-radius:8px; transition:all .3s; border:2px solid rgba(200,10,10,0.3); font-weight: 600;}
.social-link:hover{background:var(--brand-red); color:#fff; border-color:var(--brand-red); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(200,16,46,0.3);}

/* Responsive tweaks */
@media(min-width:992px){
  .hero{padding:6rem 0}
}

/* Buttons */
.btn-danger{background:var(--brand-red); border-color:var(--brand-red); transition:all .3s; font-weight: 600; border-radius: 8px; padding: 0.65rem 1.8rem; letter-spacing: 0.5px; box-shadow: 0 4px 12px rgba(200,16,46,0.25);}
.btn-danger:hover{background:#a30b20; border-color:#a30b20; transform:translateY(-2px); box-shadow: 0 8px 20px rgba(200,16,46,0.35);}
.btn-outline-light{border: 2px solid rgba(255,255,255,0.4); border-radius: 8px; padding: 0.65rem 1.8rem; font-weight: 600; transition: all 0.3s; letter-spacing: 0.5px;}
.btn-outline-light:hover{border-color: #fff; background-color: transparent; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255,255,255,0.15);}

/* Contact form alerts */
#formAlert{color:var(--brand-red)}

/* Minor utility */
.text-muted{color:var(--muted) !important}

/* High-contrast focus for accessibility */
:focus{outline:3px solid rgba(200,0,0,0.25); outline-offset:2px}

/* Animations & reveals */
.animate-up{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.34,.1,.68,.55), transform .7s cubic-bezier(.34,.1,.68,.55)}
.in-view{opacity:1; transform:translateY(0)}

/* Hero illustration parallax */
.hero-illustration{transition:transform .25s ease-out}

/* Footer styles */
.site-footer .footer-top{background:#070505; border-top:2px solid var(--brand-red); box-shadow: inset 0 2px 8px rgba(0,0,0,0.3);}
.site-footer .footer-bottom{background:#0d0d0d; border-top:1px solid rgba(255,255,255,0.05)}
.site-footer .footer-link{color:rgba(255,255,255,0.7); text-decoration:none; transition:all .3s; font-weight: 500; position: relative;}
.site-footer .footer-link::after{content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--brand-red); transition: width 0.3s;}
.site-footer .footer-link:hover{color:#fff; text-decoration:none;}
.site-footer .footer-link:hover::after{width: 100%;}
.site-footer .footer-logo .brand-text{font-size:1.05rem; font-weight: 700;}
.site-footer .footer-logo .logo{width:52px; height:52px; object-fit: contain;}
.site-footer .social{display:inline-block; margin-left:8px; width:40px; height:40px; border-radius:8px; background:rgba(255,255,255,0.06); padding:6px; transition:all .3s; border: 2px solid rgba(200,16,46,0.2);}
.site-footer .social svg{display:block}
.site-footer .social:hover{transform:translateY(-4px); background:var(--brand-red); border-color: var(--brand-red); box-shadow: 0 6px 16px rgba(200,16,46,0.3);}
.site-footer .language-select .btn{background:#ffffff; color:#111; border-radius:6px; transition:all .3s; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.site-footer .language-select .btn:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,0.15)}
.site-footer h6{letter-spacing:0.6px; font-family:Montserrat, sans-serif; font-weight: 700; color: rgba(255,255,255,0.95);}
.site-footer p{color: rgba(255,255,255,0.75); font-weight: 500;}

@media(max-width:767px){
  .site-footer .footer-top .col-lg-3{text-align:center}
  .site-footer .footer-top .text-lg-end{text-align:center !important}
  .section-title{font-size:1.5rem}
  .hero-title{font-size:2rem !important}
}

/* small utility for visually-hidden but accessible elements */
.sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* New page styles for SPA */

/* Hero mini section (for page headers) */
.hero-mini{background:linear-gradient(135deg, var(--brand-black), rgba(11,11,11,0.98)); position:relative; border-bottom:3px solid var(--brand-red)}
.hero-mini .accent-line{margin-left:0}

/* Service detail cards */
.service-detail-card{background:#fff; padding:2rem; border-radius:12px; box-shadow:0 8px 20px rgba(11,11,11,0.1); border-left:4px solid var(--brand-red); transition:all .3s}
.service-detail-card:hover{transform:translateY(-4px); box-shadow:0 12px 32px rgba(11,11,11,0.15)}
.service-badge{display:inline-block; background:var(--brand-red); color:#fff; padding:0.4rem 0.8rem; border-radius:4px; font-size:0.75rem; font-weight:700; letter-spacing:1px; margin-bottom:1rem}

/* Benefit cards */
.benefit-card{padding:2rem; text-align:center; transition:all .3s}
.benefit-card:hover{transform:translateY(-6px)}
.benefit-icon{font-size:2.5rem; margin-bottom:1rem}
.benefit-card h5{font-family:Montserrat, sans-serif; font-weight:700; color:#0b0b0b}

/* Stat cards */
.stat-card{padding:2rem; background:linear-gradient(135deg, rgba(200,10,10,0.05), rgba(11,11,11,0.02)); border:1px solid rgba(200,10,10,0.1); border-radius:12px; transition:all .3s}
.stat-card:hover{border-color:rgba(200,10,10,0.3); box-shadow:0 8px 20px rgba(200,10,10,0.1)}
.stat-number{font-family:Montserrat, sans-serif; font-size:2.5rem; font-weight:700; color:var(--brand-red); line-height:1}
.stat-card p{margin-top:0.75rem}

/* Job cards */
.job-card{background:#fff; padding:2rem; border-radius:12px; box-shadow:0 4px 12px rgba(11,11,11,0.08); border-top:3px solid var(--brand-red); transition:all .3s}
.job-card:hover{box-shadow:0 12px 28px rgba(11,11,11,0.15); transform:translateY(-4px)}
.job-card h5{font-family:Montserrat, sans-serif; font-weight:700; color:#0b0b0b}

/* Blog cards */
.blog-card{background:#fff; padding:1.5rem; border-radius:12px; box-shadow:0 4px 12px rgba(11,11,11,0.08); position:relative; overflow:hidden; transition:all .3s; border:1px solid rgba(11,11,11,0.06)}
.blog-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand-red), transparent); transform:scaleX(0); transform-origin:left; transition:transform .3s}
.blog-card:hover{box-shadow:0 12px 28px rgba(11,11,11,0.15); transform:translateY(-6px)}
.blog-card:hover::before{transform:scaleX(1)}
.blog-date{display:inline-block; font-size:0.75rem; color:var(--brand-red); font-weight:700; letter-spacing:0.5px; text-transform:uppercase}
.blog-card h5{font-family:Montserrat, sans-serif; font-weight:700; color:#0b0b0b; margin-top:0.5rem}

/* CTA sections */
.cta-section{background:linear-gradient(135deg, var(--brand-black), rgba(11,11,11,0.98)); color:#fff; position:relative; overflow:hidden; border-left:4px solid var(--brand-red)}
.cta-section::before{content:''; position:absolute; top:-30%; right:-20%; width:50%; height:150%; background:radial-gradient(circle at 40% 40%, rgba(0,0,0,0.15), transparent 60%); pointer-events:none; z-index:0}
.cta-section > *{position:relative; z-index:1}
.cta-section h3{font-family:Montserrat, sans-serif; font-weight:700}

/* Contact form page */
.contact-form{background:rgba(255,255,255,0.95); border-radius:12px}
.contact-form .form-label{font-weight:600; color:#0b0b0b; margin-bottom:0.5rem; font-family:Montserrat, sans-serif}
.contact-form .form-control{background:#fff; border:1px solid rgba(11,11,11,0.15); color:#222; border-radius:6px; padding:0.75rem 1rem; transition:all .2s}
.contact-form .form-control::placeholder{color:rgba(11,11,11,0.5)}
.contact-form .form-control:focus{background:#fff; border-color:var(--brand-red); box-shadow:0 0 0 0.2rem rgba(200,10,10,0.15)}
.contact-form .form-select{background:#fff; border:1px solid rgba(11,11,11,0.15); color:#222; border-radius:6px; padding:0.75rem 2rem 0.75rem 1rem; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23222222' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-position:right 0.5rem center; background-size:16px; background-repeat:no-repeat; transition:all .2s}
.contact-form .form-select:focus{background:#fff; border-color:var(--brand-red); box-shadow:0 0 0 0.2rem rgba(200,10,10,0.15)}
.contact-form .form-select option{background:#fff; color:#222}

/* Page container fade transition */
#pageContainer{transition:opacity .3s ease-in-out}

/* Active nav link styling */
.navbar-nav .nav-link.active{color:var(--brand-red) !important; font-weight:600}

/* Mobile responsiveness for new pages */
@media(max-width:767px){
  .service-detail-card{padding:1.5rem; border-left-width:3px}
  .stat-number{font-size:2rem}
  .hero-mini .hero-title{font-size:1.75rem}
  .blog-card{padding:1.25rem}
  .benefit-icon{font-size:2rem}
  .job-card{padding:1.5rem}
}