.service-card,
.value-card {
   height: 100%
}

.camera-feeds,
.features-grid {
   grid-template-columns: repeat(2, 1fr)
}

.floating-card,
.slider-next,
.slider-prev,
.stat-item {
   backdrop-filter: blur(10px)
}

.contact-item h5 a,
.footer a,
.modern-btn,
.service-cta,
.service-link {
   text-decoration: none
}

.section-tag,
.stat-label {
   text-transform: uppercase;
   letter-spacing: 1px
}

:root {
   --primary-base: #A30F00;
   --primary-light: rgba(163, 15, 0, 0.1);
   --primary-bright: #D43F14;
   --secondary-action: #FFC200;
   --premium-accent: #EAB33B;
   --neutral-silver: #E1E1E1;
   --deep-shadow: #2B0500;
   --secondary: #212529;
   --accent: #0d6efd;
   --light-bg: #f8f9fa;
   --gradient: linear-gradient(135deg, #a30f00 0%, #d43f14 100%)
}

body {
   font-family: Roboto, sans-serif;
   color: #333;
   line-height: 1.6;
   background-color: #f9f9f9
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: Poppins, sans-serif;
   font-weight: 600
}

.navbar {
   background: #fff;
   box-shadow: 0 2px 10px rgba(43, 5, 0, .1);
   padding: 15px 0
}

.navbar-brand {
   font-family: Poppins, sans-serif;
   font-weight: 700;
   font-size: 1.8rem
}

.brand-name {
   color: var(--primary-base)
}

.brand-name span {
   color: var(--premium-accent);
   text-shadow: 1px 1px 1px rgba(43, 5, 0, .2)
}

.nav-link {
   color: var(--deep-shadow) !important;
   font-weight: 500;
   margin: 0 8px;
   padding: 8px 16px !important;
   border-radius: 4px;
   transition: .3s
}

.btn-primary,
.btn-secondary {
   padding: 10px 25px;
   font-weight: 500;
   transition: .3s;
   pointer-events: auto !important;
   cursor: pointer !important;
}

.nav-link.active,
.nav-link:hover {
   background-color: var(--primary-base);
   color: #fff !important
}

.btn-primary {
   background: var(--gradient);
   border: none;
   border-radius: 4px
}

.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(163, 15, 0, .3)
}

.btn-secondary {
   background-color: var(--secondary-action);
   border: none;
   color: var(--deep-shadow);
   border-radius: 4px
}

.area-card:hover,
.btn-outline-light:hover,
.section-header h2,
.section-tag {
   color: var(--primary-base)
}

.btn-secondary:hover {
   background-color: #ffb000;
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(255, 194, 0, .3)
}

.btn-outline-light {
   border: 2px solid rgba(255, 255, 255, .3);
   background: 0 0;
   font-weight: 600
}

.btn-outline-light:hover {
   background: #fff;
   border-color: #fff
}

.contact-info,
.service-card {
   border-top: 4px solid var(--primary-base)
}

.section-padding {
   padding: 5rem 0
}

.section-header {
   margin-bottom: 3rem;
   text-align: center
}

.section-tag {
   display: inline-block;
   font-weight: 600;
   font-size: .9rem;
   margin-bottom: 1rem
}

.section-title {
   font-size: 2.5rem;
   font-weight: 700;
   color: var(--secondary);
   margin-bottom: 1rem
}

.section-subtitle {
   color: #6c757d;
   font-size: 1.1rem;
   max-width: 600px;
   margin: 0 auto
}

.section-header h2 {
   position: relative;
   display: inline-block;
   padding-bottom: 15px
}

.section-header h2:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 3px;
   background: var(--gradient)
}

.area-card,
.contact-info,
.expertise-card,
.highlight-box,
.service-card,
.service-mini-card,
.stat-card,
.value-card {
   background: #fff;
   border-radius: 10px;
   padding: 30px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
   transition: .3s
}

.expertise-card:hover,
.service-card:hover,
.service-mini-card:hover,
.value-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 30px rgba(163, 15, 0, .1)
}

.highlight-box {
   border-left: 5px solid var(--secondary-action);
   margin-bottom: 30px
}

.value-card {
   padding: 2rem;
   border: 1px solid rgba(0, 0, 0, .05)
}

.modern-service-card:hover,
.value-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, .1)
}

.expertise-card {
   padding: 2rem;
   height: 100%;
   border-top: 5px solid var(--primary-base)
}

.expertise-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 35px rgba(0, 0, 0, .1)
}

.service-mini-card {
   padding: 30px;
   text-align: center;
   border-top: 4px solid var(--primary-base)
}

.area-card:hover,
.area-tag:hover {
   border-color: var(--primary-base)
}

.area-card {
   padding: 1rem;
   text-align: center;
   font-weight: 600;
   color: var(--secondary);
   border: 2px solid transparent
}

.area-card:hover {
   transform: translateY(-3px)
}

.stat-card {
   padding: 25px;
   display: flex;
   align-items: center;
   gap: 20px;
   border: 1px solid var(--neutral-silver)
}

.stat-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 40px rgba(163, 15, 0, .1)
}

.card-icon,
.contact-icon,
.feature-icon,
.service-icon,
.stat-icon,
.trust-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   color: #fff;
   border-radius: 50%
}

.contact-item h5 a:hover,
.feature-icon,
.footer a:hover {
   color: var(--secondary-action)
}

.service-icon {
   width: 70px;
   height: 70px;
   font-size: 30px;
   margin-bottom: 20px;
   background: var(--gradient)
}

.card-icon {
   width: 50px;
   height: 50px;
   font-size: 22px;
   margin-bottom: 15px;
   background: var(--gradient)
}

.contact-icon,
.trust-icon {
   width: 50px;
   height: 50px;
   font-size: 20px;
   background: var(--gradient)
}

.trust-icon {
   border-radius: 12px
}

.contact-icon {
   margin-right: 15px
}

.stat-icon {
   width: 40px;
   height: 40px;
   background: var(--gradient)
}

.feature-icon {
   font-size: 24px;
   margin-right: 10px;
   background: 0 0
}

.gradient-text {
   background: var(--gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   font-weight: 700
}

.area-tag,
.feature-tag,
.hero-badge,
.modern-badge,
.section-badge,
.service-area-badge {
   display: inline-block;
   padding: 8px 20px;
   border-radius: 30px;
   font-weight: 500;
   transition: .3s
}

.feature-tag,
.modern-badge {
   font-size: 14px;
   display: inline-flex
}

.hero-badge,
.modern-badge,
.service-area-badge {
   background: var(--gradient);
   color: #fff;
   margin: 5px;
   box-shadow: 0 3px 10px rgba(163, 15, 0, .2)
}

.modern-badge {
   align-items: center;
   gap: 8px
}

.modern-badge.secondary,
.section-badge {
   background: linear-gradient(135deg, var(--secondary-action), #ffd54f);
   color: var(--deep-shadow)
}

.area-tag,
.feature-tag {
   background: linear-gradient(135deg, #f8f9fa, #fff);
   color: var(--deep-shadow)
}

.area-tag {
   border: 2px solid var(--neutral-silver);
   white-space: nowrap
}

.area-tag:hover {
   background: var(--gradient);
   color: #fff;
   transform: translateY(-2px)
}

.feature-tag {
   padding: 8px 15px;
   border: 1px solid var(--neutral-silver);
   align-items: center;
   gap: 5px
}

.about-section {
   background-color: #fff;
   border-radius: 10px;
   padding: 50px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
   margin-bottom: 50px
}

.footer {
   background-color: var(--deep-shadow);
   color: #fff;
   padding: 50px 0 20px
}

.footer h5 {
   color: var(--neutral-silver);
   margin-bottom: 20px;
   font-weight: 600
}

.footer a {
   color: #bbb;
   transition: color .3s
}

.copyright {
   border-top: 1px solid rgba(225, 225, 225, .1);
   padding-top: 20px;
   margin-top: 30px;
   text-align: center;
   color: #aaa;
   font-size: .9rem
}

.about-hero-section,
.modern-hero-section {
   position: relative;
   overflow: hidden;
   padding: 0 0 60px;
   background: linear-gradient(135deg, #fff 0, #f8f9fa 100%)
}

.about-hero-section {
   padding: 5rem 0;
   background: linear-gradient(rgba(0, 0, 0, .60), rgba(0, 0, 0, .9)) center/cover, url('images/slider/about-slider.jpg') center/cover;
   color: #fff
}

.about-hero-section::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100px;
   /* background: linear-gradient(to top, #ffffff57, transparent); */
   z-index: 1
}

.modern-hero-section::before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   width: 60%;
   height: 100%;
   background: linear-gradient(45deg, rgba(163, 15, 0, .03) 0, rgba(212, 63, 20, .03) 100%);
   clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
   z-index: 1
}

.card-inner,
.contact-info-modern,
.cta-action,
.cta-subtitle,
.cta-title,
.hero-content-wrapper {
   position: relative;
   z-index: 2
}

.hero-title,
.modern-hero-title {
   font-size: 3.5rem;
   font-weight: 800;
   line-height: 1.2;
   margin-bottom: 25px;
}

.hero-title {
   background: linear-gradient(to right, #fff, rgba(255, 255, 255, .9));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.modern-hero-title {
   color: var(--deep-shadow)
}

.hero-subtitle,
.modern-hero-subtitle {
   font-size: 1.25rem;
   line-height: 1.6;
   max-width: 700px;
   margin: 0 auto
}

.hero-subtitle {
   color: rgba(255, 255, 255, .85)
}

.modern-hero-subtitle {
   color: #555
}

.badge-container {
   display: flex;
   gap: 15px;
   flex-wrap: wrap
}

.hero-cta-container,
.slide-cta {
   display: flex;
   gap: 20px;
   flex-wrap: wrap
}

.modern-btn {
   padding: 18px 30px;
   border-radius: 12px;
   display: inline-flex;
   align-items: center;
   font-weight: 500;
   transition: .3s;
   min-width: 180px
}

.primary-btn {
   background: var(--gradient);
   color: #fff;
   box-shadow: 0 8px 25px rgba(163, 15, 0, .3)
}

.primary-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 30px rgba(163, 15, 0, .4);
   color: #fff
}

.secondary-btn {
   background: #fff;
   color: var(--deep-shadow);
   border: 2px solid var(--neutral-silver);
   box-shadow: 0 5px 20px rgba(0, 0, 0, .1)
}

.secondary-btn:hover {
   transform: translateY(-3px);
   border-color: var(--primary-base);
   color: var(--primary-base);
   box-shadow: 0 8px 25px rgba(0, 0, 0, .15)
}

.btn-text {
   display: flex;
   flex-direction: column;
   line-height: 1.2
}

.small-label {
   font-size: 12px;
   opacity: .9
}

.phone-number {
   font-size: 18px;
   font-weight: 600
}

.contact-info-modern,
.trust-indicators {
   display: flex;
   gap: 30px;
   flex-wrap: wrap
}

.contact-item,
.trust-item {
   display: flex;
   align-items: center;
   gap: 15px
}

.features-list span,
.tool-icon {
   display: flex;
   align-items: center
}

.hero-visual-container {
   position: relative;
   height: 500px;
   z-index: 2
}

.floating-card {
   position: absolute;
   background: rgba(255, 255, 255, .95);
   border-radius: 20px;
   padding: 20px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
   border: 1px solid rgba(163, 15, 0, .1);
   transition: .4s cubic-bezier(.175, .885, .32, 1.275);
   z-index: 2;
   width: 180px
}

.cctv-card {
   top: 50%;
   right: 10%;
   animation: 6s ease-in-out infinite floatCard;
   border-top: 4px solid var(--primary-base)
}

.laptop-card {
   top: 40%;
   left: 5%;
   animation: 5s ease-in-out .5s infinite floatCard;
   border-top: 4px solid var(--secondary-action)
}

.doorstep-card {
   bottom: 15%;
   right: 20%;
   animation: 7s ease-in-out 1s infinite floatCard;
   border-top: 4px solid var(--premium-accent)
}

.floating-card:hover {
   transform: translateY(-10px) scale(1.05);
   box-shadow: 0 30px 60px rgba(163, 15, 0, .2);
   z-index: 4
}

.card-icon-wrapper {
   position: relative;
   width: 70px;
   height: 70px;
   margin: 0 auto 15px
}

.icon-shine,
.pulse-ring {
   width: 100%;
   height: 100%;
   position: absolute
}

.card-icon-wrapper i {
   font-size: 32px;
   color: #fff;
   position: relative;
   z-index: 2
}

.icon-shine {
   background: var(--gradient);
   border-radius: 20px;
   z-index: 1
}

.pulse-ring {
   border: 2px solid var(--primary-base);
   border-radius: 20px;
   animation: 2s ease-out infinite pulse
}

.repair-animation {
   position: absolute;
   top: -10px;
   right: -10px;
   animation: 3s linear infinite repairSpin
}

.tool-icon {
   width: 30px;
   height: 30px;
   background: var(--secondary-action);
   border-radius: 50%;
   justify-content: center;
   color: var(--deep-shadow)
}

.card-glow,
.tech-background {
   height: 100%;
   width: 100%;
   position: absolute
}

.location-marker {
   position: absolute;
   bottom: -5px;
   right: -5px;
   color: var(--premium-accent);
   font-size: 20px;
   animation: 2s ease-in-out infinite bounce
}

.card-content h6 {
   font-weight: 600;
   color: var(--deep-shadow);
   margin-bottom: 5px
}

.dashboard-header,
.feature-content h5 {
   margin-bottom: 10px
}

.card-content .small {
   color: #666;
   font-size: 12px;
   margin-bottom: 10px
}

.features-list {
   display: flex;
   flex-direction: column;
   gap: 5px
}

.features-list span {
   font-size: 11px;
   color: #666;
   gap: 5px
}

.features-list i {
   color: var(--primary-base);
   font-size: 10px
}

.card-stats {
   margin-top: 15px;
   padding-top: 10px;
   border-top: 1px solid rgba(0, 0, 0, .1)
}

.stat-value {
   font-weight: 700;
   font-size: 18px;
   background: var(--gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.stat-label {
   display: block
}

.card-glow {
   top: 0;
   left: 0;
   background: radial-gradient(circle at center, rgba(255, 194, 0, .1) 0, transparent 70%);
   border-radius: 20px;
   opacity: 0;
   transition: opacity .3s
}

.floating-card:hover .card-glow,
.modern-service-card:hover .card-gradient-border {
   opacity: 1
}

.tech-background {
   overflow: hidden;
   border-radius: 20px;
   z-index: 1
}

.circuit-line {
   position: absolute;
   background: linear-gradient(90deg, transparent, var(--primary-base), transparent);
   height: 2px;
   animation: 20s linear infinite circuitFlow
}

.circuit-line:first-child {
   top: 20%;
   width: 80%;
   animation-delay: 0s
}

.circuit-line:nth-child(2) {
   top: 60%;
   width: 60%;
   animation-delay: 5s
}

.circuit-line:nth-child(3) {
   top: 80%;
   width: 70%;
   animation-delay: 10s
}

.glowing-dots {
   position: absolute;
   width: 100%;
   height: 100%
}

.dot {
   position: absolute;
   width: 8px;
   height: 8px;
   background: var(--secondary-action);
   border-radius: 50%;
   filter: blur(1px);
   animation: 2s ease-in-out infinite dotPulse
}

.dot-1 {
   top: 30%;
   left: 20%;
   animation-delay: 0s
}

.dot-2 {
   top: 50%;
   left: 70%;
   animation-delay: .5s
}

.dot-3 {
   top: 70%;
   left: 40%;
   animation-delay: 1s
}

.dot-4 {
   top: 40%;
   left: 80%;
   animation-delay: 1.5s
}

.dot-5 {
   top: 80%;
   left: 30%;
   animation-delay: 2s
}

.main-hero-visual {
   position: relative;
   width: 100%;
   height: 500px;
   z-index: 2
}

.visual-container {
   position: relative;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #fff, #f8f9fa);
   border-radius: 25px;
   border: 1px solid rgba(163, 15, 0, .1);
   overflow: hidden;
   box-shadow: 0 25px 50px rgba(0, 0, 0, .1)
}

.device-showcase {
   position: absolute;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center
}

.laptop-3d {
   position: relative;
   width: 300px;
   height: 200px;
   transform-style: preserve-3d;
   transform: perspective(1000px) rotateY(-15deg) rotateX(10deg);
   animation: 8s ease-in-out infinite deviceFloat
}

.screen {
   position: absolute;
   width: 280px;
   height: 160px;
   background: #1a1a1a;
   border-radius: 15px 15px 0 0;
   border: 2px solid #333;
   overflow: hidden;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .3)
}

.screen-content {
   width: 100%;
   height: 100%;
   padding: 15px
}

.monitoring-dashboard {
   width: 100%;
   height: 100%;
   background: #0a0a0a;
   border-radius: 8px;
   padding: 10px
}

.dashboard-header {
   display: flex;
   align-items: center;
   gap: 10px;
   color: var(--secondary-action);
   font-size: 12px
}

.stat-item,
.tool {
   align-items: center
}

.camera-feeds {
   display: grid;
   gap: 8px
}

.live-stats,
.stat-item,
.tool,
.tools-3d {
   display: flex
}

.feed {
   background: #222;
   border-radius: 4px;
   height: 50px;
   position: relative;
   overflow: hidden
}

.cctv-3d,
.feed::before,
.keyboard {
   position: absolute
}

.feed::before {
   content: '';
   width: 100%;
   height: 100%;
   background: linear-gradient(45deg, transparent, rgba(255, 255, 255, .1), transparent);
   animation: 3s linear infinite feedScan
}

.feed.active::after {
   content: '✓';
   position: absolute;
   top: 5px;
   right: 5px;
   color: var(--secondary-action);
   font-size: 10px
}

.keyboard {
   top: 160px;
   width: 300px;
   height: 20px;
   background: #333;
   border-radius: 0 0 10px 10px
}

.cctv-3d {
   top: 50px;
   right: 50px;
   animation: 10s ease-in-out infinite cameraPan
}

.camera-body {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, #333, #000);
   border-radius: 50%;
   position: relative;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .3)
}

.badge-pulse,
.camera-base,
.camera-lens,
.lens-reflection,
.live-stats,
.service-badge,
.signal-waves,
.tools-3d,
.wave {
   position: absolute
}

.camera-lens {
   top: 15px;
   left: 15px;
   width: 30px;
   height: 30px;
   background: radial-gradient(circle at center, #666, #000);
   border-radius: 50%
}

.lens-reflection {
   top: 5px;
   left: 5px;
   width: 10px;
   height: 10px;
   background: rgba(255, 255, 255, .3);
   border-radius: 50%
}

.camera-base {
   bottom: -15px;
   left: 20px;
   width: 20px;
   height: 15px;
   background: #222
}

.counter,
.tool {
   background: var(--gradient)
}

.signal-waves {
   top: -20px;
   left: -20px
}

.wave {
   width: 100px;
   height: 100px;
   border: 2px solid rgba(163, 15, 0, .3);
   border-radius: 50%;
   animation: 2s ease-out infinite waveExpand
}

.wave:nth-child(2) {
   animation-delay: .5s
}

.wave:nth-child(3) {
   animation-delay: 1s
}

.tools-3d {
   bottom: 50px;
   left: 50px;
   gap: 15px
}

.tool {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   justify-content: center;
   color: #fff;
   font-size: 18px;
   box-shadow: 0 5px 15px rgba(163, 15, 0, .3);
   animation: 3s ease-in-out infinite toolBounce
}

.tool-2 {
   animation-delay: .3s
}

.tool-3 {
   animation-delay: .6s
}

.live-stats {
   bottom: 30px;
   right: 30px;
   gap: 20px;
   z-index: 3
}

.stat-item {
   gap: 10px;
   background: rgba(0, 0, 0, 0.9);
   padding: 10px 20px;
   border-radius: 15px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .1)
}

.counter {
   font-size: 24px;
   font-weight: 700;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent
}

.stat-content span {
   font-size: 12px;
   color: #666;
   display: block
}

.service-badge {
   top: 30px;
   left: 30px;
   background: var(--gradient);
   color: #fff;
   padding: 15px 20px;
   border-radius: 15px;
   display: flex;
   align-items: center;
   gap: 10px;
   box-shadow: 0 10px 25px rgba(163, 15, 0, .3);
   z-index: 3;
   animation: 3s ease-in-out infinite badgeGlow
}

.badge-content i {
   font-size: 24px
}

.badge-content div,
.call-btn div,
.whatsapp-btn div {
   display: flex;
   flex-direction: column;
   line-height: 1.3
}

.badge-content span {
   font-weight: 600;
   font-size: 14px
}

.badge-content small {
   font-size: 11px;
   opacity: .9
}

.badge-pulse {
   top: -10px;
   right: -10px;
   width: 20px;
   height: 20px;
   background: var(--secondary-action);
   border-radius: 50%;
   animation: 2s ease-in-out infinite badgePulse
}

.floating-card-container {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 3
}

.modern-services-section {
   padding: 100px 0;
   background: #f8f9fa
}

.section-header-modern {
   text-align: center;
   margin-bottom: 60px
}

.modern-service-card {
   background: #fff;
   border-radius: 20px;
   padding: 40px 30px;
   height: 100%;
   position: relative;
   overflow: hidden;
   transition: .4s;
   border: 1px solid var(--neutral-silver)
}

.card-gradient-border {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: var(--gradient);
   opacity: 0;
   transition: opacity .4s
}

.service-icon-modern {
   position: relative;
   margin-bottom: 25px
}

.icon-bg {
   width: 80px;
   height: 80px;
   background: var(--gradient);
   border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 32px;
   box-shadow: 0 10px 20px rgba(163, 15, 0, .2)
}

.feature-content h5,
.icon-badge,
.service-title {
   color: var(--deep-shadow);
   font-weight: 600
}

.icon-badge {
   position: absolute;
   top: -10px;
   right: -10px;
   background: var(--secondary-action);
   padding: 5px 15px;
   border-radius: 20px;
   font-size: 12px
}

.service-title {
   font-size: 1.5rem;
   margin-bottom: 15px
}

.service-description {
   color: #666;
   line-height: 1.6;
   margin-bottom: 25px
}

.service-features {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 25px
}

.service-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 25px;
   padding-top: 20px;
   border-top: 1px solid var(--neutral-silver)
}

.service-cta,
.service-meta span {
   align-items: center;
   display: flex
}

.service-cta {
   color: var(--primary-base);
   font-weight: 500;
   gap: 10px;
   transition: .3s
}

.service-cta:hover {
   color: var(--primary-bright);
   gap: 15px
}

.service-meta {
   display: flex;
   gap: 15px;
   font-size: 14px;
   color: #666
}

.service-meta span {
   gap: 5px
}

.modern-features-section,
.service-areas-section {
   padding: 100px 0;
   background: #fff
}

.features-intro {
   position: sticky;
   top: 100px
}

.stats-container {
   display: flex;
   gap: 30px
}

.features-grid {
   display: grid;
   gap: 25px
}

.feature-card {
   background: #fff;
   padding: 30px;
   border-radius: 16px;
   border: 1px solid var(--neutral-silver);
   transition: .3s;
   display: flex;
   gap: 20px
}

.cta-card,
.cta-section,
.icon-wrapper,
.modern-cta-section {
   background: var(--gradient);
   color: #fff;
   pointer-events: auto !important;
}

.feature-card:hover {
   transform: translateY(-5px);
   border-color: var(--primary-base);
   box-shadow: 0 10px 30px rgba(163, 15, 0, .1)
}

.icon-wrapper {
   width: 60px;
   height: 60px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   flex-shrink: 0
}

.feature-content p {
   color: #666;
   font-size: 14px;
   line-height: 1.5
}

.cta-section,
.modern-cta-section {
   padding: 100px 0;
   position: relative;
   overflow: hidden
}

.cta-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none"><path d="M0,0V100H1000V0C1000,0 500,100 0,0Z" fill="rgba(255,255,255,0.05)"/></svg>') 0 0/cover
}

.cta-card {
   border-radius: 30px;
   padding: 60px;
   box-shadow: 0 20px 50px rgba(163, 15, 0, .3)
}

.cta-title {
   font-size: 2.8rem;
   font-weight: 700;
   margin-bottom: 20px
}

.cta-subtitle {
   font-size: 1.2rem;
   opacity: .9;
   max-width: 700px;
   margin: 0 auto
}

.contact-item i {
   font-size: 24px;
   color: var(--secondary-action)
}

.contact-item small {
   display: block;
   opacity: .8;
   font-size: 14px
}

.contact-item h5 a {
   color: #fff;
   font-weight: 600
}

.cta-action {
   display: flex;
   flex-direction: column;
   gap: 20px
}

.call-btn,
.whatsapp-btn {
   display: flex;
   align-items: center;
   gap: 15px;
   background: #fff;
   padding: 20px;
   border-radius: 16px;
   text-decoration: none;
   color: var(--deep-shadow);
   transition: .3s
}

.mv-card,
.mv-icon {
   border-radius: 10px
}

.call-btn:hover,
.whatsapp-btn:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, .2)
}

.whatsapp-btn i {
   font-size: 32px;
   color: #25d366
}

.call-btn i {
   font-size: 32px;
   color: var(--primary-base)
}

.call-btn span,
.whatsapp-btn span {
   font-weight: 600;
   font-size: 16px
}

.call-btn small,
.whatsapp-btn small {
   font-size: 14px;
   opacity: .7
}

.lead-text {
   font-size: 1.25rem;
   color: var(--secondary);
   line-height: 1.6
}

.mission-vision {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.5rem;
   margin-top: 2rem
}

.mv-card {
   background: #fff;
   padding: 1.5rem;
   box-shadow: 0 5px 15px rgba(0, 0, 0, .05);
   border-left: 4px solid var(--primary-base)
}

.mv-icon {
   width: 50px;
   height: 50px;
   background: var(--primary-light);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1rem;
   color: var(--primary-base);
   font-size: 1.5rem
}

.expertise-icon,
.value-card .value-icon {
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   margin-bottom: 1.5rem
}

.story-image-wrapper {
   position: relative
}

.experience-badge {
   position: absolute;
   bottom: -20px;
   right: 20px;
   background: var(--gradient);
   color: #fff;
   padding: 1.5rem;
   border-radius: 15px;
   text-align: center;
   box-shadow: 0 10px 30px rgba(163, 15, 0, .3)
}

.coverage-highlight,
.expertise-icon {
   background: var(--primary-light);
   color: var(--primary-base)
}

.experience-badge span {
   display: block;
   font-size: 2rem;
   font-weight: 700
}

.experience-badge small {
   font-size: .9rem;
   opacity: .9
}

.value-card .value-icon {
   border-radius: 50%;
   justify-content: center;
   font-size: 1.8rem;
   color: #fff
}

.value-icon.reliability {
   background: linear-gradient(135deg, #2ecc71, #27ae60)
}

.value-icon.transparency {
   background: linear-gradient(135deg, #3498db, #2980b9)
}

.value-icon.expertise {
   background: linear-gradient(135deg, #9b59b6, #8e44ad)
}

.value-icon.customer {
   background: linear-gradient(135deg, #e74c3c, #c0392b)
}

.expertise-icon {
   border-radius: 50%;
   justify-content: center;
   font-size: 2rem
}

.expertise-list {
   list-style: none;
   padding: 0;
   margin: 1.5rem 0 0
}

.expertise-list li {
   padding: .5rem 0 .5rem 1.5rem;
   border-bottom: 1px solid rgba(0, 0, 0, .05);
   position: relative
}

.expertise-list li:before {
   content: "✓";
   position: absolute;
   left: 0;
   color: var(--primary-base);
   font-weight: 700
}

.coverage-highlight {
   display: inline-flex;
   align-items: center;
   padding: .75rem 1.5rem;
   border-radius: 50px;
   font-weight: 600
}

.coverage-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 1rem
}

.hero-slider-container {
   position: relative;
   height: 90vh;
   min-height: 700px;
   overflow: hidden
}

.hero-slider-wrapper {
   position: relative;
   width: 100%;
   height: 100%
}

.hero-slide,
.slide-overlay {
   position: absolute;
   top: 0;
   height: 100%;
   left: 0;
   width: 100%
}

.hero-slide {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   opacity: 0;
   transition: opacity 1s ease-in-out;
   z-index: 1
}

.hero-slide.active {
   opacity: 1;
   z-index: 2
}

.slide-overlay {
   background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, .4) 100%);
   z-index: 1
}

.slide-content {
   position: relative;
   z-index: 2;
   color: #fff;
   max-width: 600px;
   padding-top: 100px
}

.slide-title {
   font-size: 3.5rem;
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 20px;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, .3)
}

.slide-subtitle {
   font-size: 1.3rem;
   line-height: 1.6;
   margin-bottom: 30px;
   opacity: .9
}

/* .slider-controls {
   position: absolute;
   bottom: 50px;
   left: 0;
   width: 100%;
   z-index: 3;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px
} */

/* .slider-next,
.slider-prev {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .2);
   border: 2px solid rgba(255, 255, 255, .3);
   color: #fff;
   font-size: 1.2rem;
   cursor: pointer;
   transition: .3s;
   display: flex;
   align-items: center;
   justify-content: center
} */

.slider-next:hover,
.slider-prev:hover {
   background: var(--primary-base);
   border-color: var(--primary-base);
   transform: scale(1.1)
}

.slider-dots {
   display: flex;
   gap: 15px
}

.slider-dots .dot {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .3);
   cursor: pointer;
   transition: .3s
}

.slider-dots .dot.active {
   background: var(--secondary-action);
   transform: scale(1.2)
}

.floating-service-cards {
   position: relative;
   z-index: 10;
   margin-top: -100px;
   margin-bottom: 100px
}

.service-link {
   color: var(--primary-base);
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   transition: gap .3s
}

.service-link:hover {
   color: var(--primary-bright);
   gap: 12px
}

.features-list {
   margin-top: 40px
}

.feature-item {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   margin-bottom: 25px
}

.feature-item .feature-icon {
   width: 40px;
   height: 40px;
   background: var(--gradient);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 18px;
   flex-shrink: 0
}

.feature-item h5 {
   color: var(--deep-shadow);
   font-weight: 600;
   margin-bottom: 5px
}

.area-card p,
.feature-item p,
.stat-card .stat-content p {
   color: #666;
   font-size: 14px;
   margin-bottom: 0
}

.stat-card .stat-content h3,
.stat-number {
   font-weight: 700;
   background: var(--gradient);
   color: transparent
}

.stats-display {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px
}

.stat-card .stat-icon {
   width: 60px;
   height: 60px;
   background: var(--gradient);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
   font-size: 24px
}

.stat-card .stat-content h3 {
   font-size: 2.2rem;
   margin-bottom: 5px;
   -webkit-background-clip: text;
   background-clip: text
}

.areas-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 20px;
   margin-top: 50px
}

.area-card i {
   font-size: 32px;
   color: var(--primary-base);
   margin-bottom: 15px
}

.area-card h5 {
   color: var(--deep-shadow);
   font-weight: 600;
   margin-bottom: 10px
}

.cta-card::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -50%;
   width: 100%;
   height: 200%;
   background: radial-gradient(circle, rgba(255, 255, 255, .1) 1px, transparent 1px);
   background-size: 50px 50px;
   animation: 20s linear infinite floatBackground;
   z-index: 1
}

.stat-number {
   font-size: 2.5rem;
   margin-bottom: .5rem;
   -webkit-background-clip: text;
   background-clip: text
}

.stat-label {
   color: rgba(255, 255, 255, .7);
   font-size: .9rem
}

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

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

@keyframes dotPulse {

   0%,
   100% {
      transform: scale(1);
      opacity: .8
   }

   50% {
      transform: scale(1.2);
      opacity: 1
   }
}

@keyframes floatCard {

   0%,
   100% {
      transform: translateY(0) rotate(0)
   }

   50% {
      transform: translateY(-20px) rotate(2deg)
   }
}

@keyframes pulse {
   0% {
      transform: scale(1);
      opacity: 1
   }

   100% {
      transform: scale(1.5);
      opacity: 0
   }
}

@keyframes repairSpin {
   0% {
      transform: rotate(0)
   }

   25% {
      transform: rotate(90deg)
   }

   50% {
      transform: rotate(180deg)
   }

   75% {
      transform: rotate(270deg)
   }

   100% {
      transform: rotate(360deg)
   }
}

@keyframes bounce {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-5px)
   }
}

@keyframes deviceFloat {

   0%,
   100% {
      transform: perspective(1000px) rotateY(-15deg) rotateX(10deg) translateY(0)
   }

   50% {
      transform: perspective(1000px) rotateY(-15deg) rotateX(10deg) translateY(-10px)
   }
}

@keyframes feedScan {
   0% {
      transform: translateX(-100%) translateY(-100%) rotate(45deg)
   }

   100% {
      transform: translateX(100%) translateY(100%) rotate(45deg)
   }
}

@keyframes cameraPan {

   0%,
   100% {
      transform: translate(0, 0) rotate(0)
   }

   25% {
      transform: translate(10px, -5px) rotate(5deg)
   }

   50% {
      transform: translate(0, -10px) rotate(0)
   }

   75% {
      transform: translate(-10px, -5px) rotate(-5deg)
   }
}

@keyframes waveExpand {
   0% {
      transform: scale(.1);
      opacity: 1
   }

   100% {
      transform: scale(1);
      opacity: 0
   }
}

@keyframes toolBounce {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-10px)
   }
}

@keyframes badgeGlow {

   0%,
   100% {
      box-shadow: 0 10px 25px rgba(163, 15, 0, .3)
   }

   50% {
      box-shadow: 0 10px 30px rgba(163, 15, 0, .5)
   }
}

@keyframes badgePulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 1
   }

   50% {
      transform: scale(1.2);
      opacity: .8
   }
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-15px)
   }
}

@keyframes floatBackground {
   0% {
      transform: translate(0, 0)
   }

   100% {
      transform: translate(50px, 50px)
   }
}

@media (max-width:992px) {

   .hero-title,
   .modern-hero-title,
   .slide-title {
      font-size: 2.8rem
   }

   .hero-visual-container {
      height: 400px;
      margin-top: 50px
   }

   .laptop-3d {
      transform: scale(.8)
   }

   .floating-card {
      width: 150px;
      padding: 15px
   }

   .features-grid,
   .mission-vision {
      grid-template-columns: 1fr
   }

   .cta-card {
      padding: 40px 30px
   }

   .service-badge {
      top: 15px;
      left: 15px;
      padding: 10px 15px
   }

   .section-title {
      font-size: 2.2rem
   }

   .hero-slider-container {
      height: 80vh;
      min-height: 600px
   }

   .slide-content {
      padding-top: 120px
   }

   .floating-service-cards {
      margin-top: 0px;
      /* Adjusted to prevent overlap */
      margin-bottom: 80px
   }

   .stats-display {
      margin-top: 40px
   }
}

@media (max-width:768px) {

   .hero-title,
   .modern-hero-title,
   .section-title,
   .slide-title {
      font-size: 2.2rem
   }

   .about-hero-section,
   .modern-hero-section {
      padding: 3rem 0
   }

   .hero-cta-container,
   .slide-cta {
      flex-direction: column;
      width: 100%
   }

   .modern-btn {
      width: 100%;
      justify-content: center
   }

   .trust-indicators {
      justify-content: center
   }

   .floating-card {
      display: none
   }

   .cta-title {
      font-size: 2rem
   }

   .contact-info-modern {
      flex-direction: column;
      gap: 20px
   }

   .hero-visual-container {
      height: 350px
   }

   .device-showcase {
      transform: scale(.7)
   }

   .live-stats {
      flex-direction: column;
      gap: 10px;
      bottom: 15px;
      right: 15px
   }

   .about-section {
      padding: 20px 15px; /* Adjusted for better mobile responsiveness */
   }

   .hero-slider-container {
      height: 70vh;
      min-height: 500px
   }

   .slide-subtitle {
      font-size: 1.1rem
   }

   .floating-service-cards {
      margin-top: 20px;
      /* Adjusted to prevent overlap */
      margin-bottom: 60px
   }

   .service-mini-card {
      margin-bottom: 20px
   }

   .features-intro {
      padding-right: 0;
      margin-bottom: 40px
   }

   /* .slider-controls {
      bottom: 10px; /* Adjusted for better positioning on smaller screens */
}

*/ .areas-grid,
.coverage-grid {
   grid-template-columns: repeat(2, 1fr)
}

/* } */

@media (max-width:576px) {

   .hero-title,
   .modern-hero-title,
   .slide-title,
   .stat-card .stat-content h3 {
      font-size: 1.8rem
   }

   .modern-service-card {
      padding: 30px 20px
   }

   .features-intro {
      position: static
   }

   .stats-container {
      justify-content: center;
      gap: 20px
   }

   .stat-number {
      font-size: 2rem
   }

   .btn-lg {
      padding: .75rem 1.5rem;
      font-size: 1rem
   }

   .hero-slider-container {
      height: 60vh;
      min-height: 400px
   }

   .slide-content {
      padding-top: 100px;
      text-align: center
   }

   .badge-container {
      justify-content: center
   }

   /* .slider-controls {
      gap: 15px
   } */

   .areas-grid {
      grid-template-columns: 1fr
   }
}

/* Add any additional styles here */

@media (max-width: 768px) {
    .navbar {
        padding: 10px 0;
    }

    .navbar-brand {
        font-size: 1.5rem;
    }

    .nav-link {
        margin: 5px 0;
        padding: 6px 12px !important;
        text-align: center;
    }

    .hero-title,
    .modern-hero-title {
        font-size: 2.5rem;
        margin-bottom: 15px;
    }

    .hero-subtitle,
    .modern-hero-subtitle {
        font-size: 1rem;
        max-width: 90%;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .hero-visual-container,
    .main-hero-visual {
        height: 400px;
    }

    .floating-card {
        width: 150px;
        padding: 15px;
    }

    .cctv-card {
        top: 10%;
        right: 5%;
    }

    .laptop-card {
        top: 30%;
        left: 5%;
    }

    .doorstep-card {
        bottom: 5%;
        right: 10%;
    }

    .laptop-3d {
        width: 250px;
        height: 180px;
    }

    .screen {
        width: 230px;
        height: 140px;
    }

    .keyboard {
        top: 140px;
        width: 250px;
    }

    .cctv-3d {
        top: 30px;
        right: 30px;
    }

    .tools-3d {
        bottom: 30px;
        left: 30px;
        gap: 10px;
    }

    .live-stats {
        bottom: 10px;
        right: 10px;
        gap: 10px;
    }

    .stat-item {
        padding: 8px 15px;
    }

    .counter {
        font-size: 20px;
    }

    .stat-content span {
        font-size: 10px;
    }

    .service-badge {
        top: 10px;
        left: 10px;
        padding: 10px 15px;
    }

    .badge-content i {
        font-size: 20px;
    }

    .badge-content span {
        font-size: 12px;
    }

    .badge-content small {
        font-size: 9px;
    }

    .modern-service-card {
        padding: 30px 20px;
    }

    .service-title {
        font-size: 1.3rem;
    }

    .service-description {
        font-size: 0.9rem;
    }

    .service-features {
        flex-direction: column;
    }

    .service-footer {
        flex-direction: column;
        gap: 10px;
    }

    .service-cta {
        width: 100%;
        text-align: center;
    }

    .service-link {
        width: 100%;
        text-align: center;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .camera-feeds {
        grid-template-columns: 1fr;
    }

    .contact-info-modern {
        flex-direction: column;
        gap: 20px;
    }

    .trust-indicators {
        flex-direction: column;
        gap: 20px;
    }

    .footer h5 {
        text-align: center;
    }

    .footer ul {
        padding: 0;
        text-align: center;
    }

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

    .copyright {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .hero-title,
    .modern-hero-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .hero-visual-container,
    .main-hero-visual {
        height: 300px;
    }

    .floating-card {
        width: 120px;
        padding: 10px;
    }

    .cctv-card {
        top: 5%;
        right: 2%;
    }

    .laptop-card {
        top: 20%;
        left: 2%;
    }

    .doorstep-card {
        bottom: 2%;
        right: 5%;
    }

    .laptop-3d {
        width: 200px;
        height: 150px;
    }

    .screen {
        width: 180px;
        height: 110px;
    }

    .keyboard {
        top: 110px;
        width: 200px;
    }

    .cctv-3d {
        top: 20px;
        right: 20px;
    }

    .tools-3d {
        bottom: 20px;
        left: 20px;
        gap: 8px;
    }

    .live-stats {
        bottom: 5px;
        right: 5px;
        gap: 8px;
    }

    .stat-item {
        padding: 5px 10px;
    }

    .counter {
        font-size: 18px;
    }

    .stat-content span {
        font-size: 9px;
    }

    .service-badge {
        top: 5px;
        left: 5px;
        padding: 8px 12px;
    }

    .badge-content i {
        font-size: 18px;
    }

    .badge-content span {
        font-size: 10px;
    }

    .badge-content small {
        font-size: 8px;
    }

    .modern-service-card {
        padding: 20px 15px;
    }

    .service-title {
        font-size: 1.1rem;
    }

    .service-description {
        font-size: 0.8rem;
    }
}