:root {
  --color-bg: #F8FBF8;
  --color-section-alt: #F2F8F4;
  --color-section-accent: #EAF4EE;
  --color-card: #FFFFFF;
  --color-footer: #0A3828;
  --color-footer-dark: #0A3828;
  --primary: #114B35;
  --primary-dark: #0A3828;
  --primary-light: #2E6B52;
  --secondary: #6B927A;
  --accent: #D9E8DE;
  --accent-light: #EEF7F1;
  --accent-gold: #D7C38A;
  --text-default: #183326;
  --text-dark: #10261D;
  --text-muted: #66756D;
  --text-light: #FFFFFF;
  --border: #DDE8E2;
  --shadow-sm: 0 10px 25px rgba(17,75,53,.06);
  --shadow-md: 0 18px 40px rgba(17,75,53,.09);
  --shadow-lg: 0 30px 60px rgba(17,75,53,.12);
  --card-border: rgba(17,75,53,0.12);
  --card-shadow: 0 12px 35px rgba(17,75,53,.06);
  --type-on-dark: #F7F8F5;
  --header-height: 60px;
  --section-padding: 40px 0;
}

.section-space {
  padding: var(--section-padding);
}

/* Base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  scroll-padding-top: 120px;
  margin:0;
  background:var(--color-bg);
  color:var(--text-default);
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.section{padding:4rem 0}
section {
  scroll-margin-top: 120px;
}
.section--white{background:var(--color-card)}
.section--alt{background:var(--color-section-alt)}
.section--accent{background:var(--color-section-accent)}

/* Hero */
.hero{
  background: linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 55%,var(--primary-light) 100%);
  color:var(--type-on-dark);
  padding:6rem 0;
  display:flex;
  align-items:center;
}
.hero .container{display:flex;flex-direction:column;gap:1rem}
.hero h1{margin:0;font-size:2.25rem}
.hero p{max-width:60ch;margin:0;color:rgba(241,250,245,0.9)}

/* Cards */
.card{
  background:var(--color-card);
  border:1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  border-radius:12px;
  padding:1.5rem;
}
.card h3{margin-top:0}

/* Statistics / Highlight bands */
.stats{display:flex;gap:1rem;flex-wrap:wrap}
.stats .stat{flex:1;min-width:160px;padding:1rem;border-radius:10px;background:transparent}

/* CTA */
.btn{display:inline-block;padding:.75rem 1.25rem;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{filter:brightness(1.05)}
.btn--dark{background:var(--color-footer);color:var(--type-on-dark);box-shadow:0 6px 18px rgba(16,44,32,0.28)}

/* Footer */
.footer{
  background:var(--color-footer-dark);
  color:var(--type-on-dark);
  padding:3rem 0;
}
.footer a{color:var(--accent-gold);text-decoration:none}

/* Utility text colors */
.text-primary{color:var(--primary)}
.text-secondary{color:var(--secondary)}

/* Small responsive tweaks */
@media (min-width:720px){
  .hero h1{font-size:3rem}
  .container{padding:0 2rem}
}

body {
  font-family: "Segoe UI", sans-serif;
  overflow-x: hidden;
}

/* ===================================
            TOP HEADER
=================================== */
/* ===================================
            TOP HEADER
=================================== */

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1040;
  background: var(--primary);
  color: var(--text-light);
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.top-bar .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 80px;
}

.top-bar .container > .d-flex {
  width: 100%;
  justify-content: space-between;
}

.top-bar a {
  color: var(--text-light);
  text-decoration: none;
  transition: 0.3s;
}

.top-bar a:hover {
  color: var(--accent-gold);
}

.top-bar .container > .d-flex {
  justify-content: space-between;
}

.top-left {
  display: flex;
  align-items: center;
  gap: 18px;
  order: 1;
}

.top-left i {
  color: var(--accent-gold);
  margin-right: 8px;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 12px;
  order: 2;
}

.divider {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.35);
}

.top-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-right a {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  transition: 0.3s;
}

.top-right a:hover {
  background: var(--accent-gold);
  color: var(--primary);
  transform: translateY(-2px);
}

body.is-top-bar-hidden .top-bar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

body.is-top-bar-hidden .custom-navbar.fixed-top {
  top: 0;
}

.custom-navbar.scrolled {
  background: var(--color-card);
  padding: 6px 18px;
  box-shadow: var(--shadow-md);
}

.nav-cta .btn {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-light);
  padding: 8px 16px;
  font-weight: 600;
  border-radius: 999px;
  transition: 0.3s ease;
}

.nav-cta .btn:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

@media (max-width: 991px) {
  .top-bar {
    display: none;
  }
}
/*==================================================
            DRS PREMIUM HEADER
==================================================*/

.drs-header{

position:fixed;

top:0;

left:0;

width:100%;

background:#fff;

border-bottom:1px solid var(--border);

z-index:9999;

transition:.35s;

}

.header-container{

max-width:1450px;

height:60px;

margin:auto;

padding:0 45px;

display:grid;

grid-template-columns:280px 1fr;

align-items:center;

}

/*=====================
Logo
=====================*/

.logo{

display:flex;

align-items:center;

}

.logo img{

height:61px;

width:auto;

display:block;

transition:.35s;

}

/*=====================
Menu
=====================*/

.desktop-menu{

display:flex;

justify-content:flex-end;

}

.desktop-menu ul{

display:flex;

align-items:center;

gap:55px;

list-style:none;

margin:0;

padding:0;

}

.desktop-menu li{

position:relative;

}

.desktop-menu a{

text-decoration:none;

color:var(--text);

font-size:14px;

font-weight:600;

letter-spacing:1.3px;

text-transform:uppercase;

transition:.3s;

position:relative;

display:flex;

align-items:center;

gap:8px;

}
.desktop-menu a::after{

content:"";

position:absolute;

bottom:-14px;

left:0;

height:3px;

width:0;

background:var(--primary);

transition:.35s;

border-radius:20px;

}

.desktop-menu a:hover{

color:var(--primary);

}

.desktop-menu a:hover::after,

.desktop-menu .active::after{

width:100%;

}

.desktop-menu .active{

color:var(--primary);

}

.desktop-menu i{

font-size:11px;

transition:.3s;

}

.has-dropdown:hover i{

transform:rotate(180deg);

}
.mega-menu{

position:absolute;

top:calc(100% + 16px);

left:50%;

width:min(680px, calc(100vw - 32px));

min-width:280px;

background:#fff;

padding:25px;

border-radius:18px;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

box-shadow:0 25px 60px rgba(0,0,0,.08);

opacity:0;

visibility:hidden;

transform:translate(-50%, 20px);

transition:.35s;

z-index:1100;

}

.has-dropdown:hover .mega-menu{

opacity:1;

visibility:visible;

transform:translate(-50%, 0);

}

.service-card{

display:flex;

gap:18px;

padding:16px;

border-radius:12px;

cursor:pointer;

transition:.35s;

}

.service-card:hover{

background:#F6FAF9;

}

.service-card i{

width:50px;

height:50px;

border-radius:14px;

background:#123F38;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

flex-shrink:0;

}

.service-card h6{

margin:0;

font-size:15px;

font-weight:600;

}

.service-card span{

font-size:13px;

color:#666;

}
.drs-header{
    transition:
        top .35s ease,
        height .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.drs-header.scrolled{

    height:var(--header-height);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    background:#ffffff;

}

.drs-header.scrolled .header-container{

    height:var(--header-height);

}

.drs-header.scrolled .logo img{

    height:55px;

}


/*====================================================
                PREMIUM HERO SECTION
=====================================================*/

.hero-section {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  background: #ffffff;
}

.hero-slider {
  position: relative;
}

.hero-slider .carousel-item {
  position: relative;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background-color: var(--primary-dark);
}

.hero-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1);
  animation: heroZoom 14s ease-in-out infinite alternate;
}

.hero-image-cfd img {
  object-position: 50% center;
}

@keyframes heroZoom {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

@keyframes badgeFloat {
  from {
    transform: translateY(0px);
  }

  to {
    transform: translateY(-6px);
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 27, 21, 0.96) 0%, rgba(10, 56, 40, 0.88) 30%, rgba(10, 56, 40, 0.45) 62%, rgba(10, 56, 40, 0.75) 100%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.09), transparent 32%);
}

.hero-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 5;
  padding: 0 24px;
}

.hero-container .row {
  width: 100%;
  align-items: center;
  transform: translateY(-10px);
}

.hero-content {
  max-width: 660px;
  transform: translateY(70px);
  position: relative;
  z-index: 2;
  padding-right: clamp(12px, 2vw, 24px);
  padding-bottom: 40px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 50px;
  background: rgba(215, 195, 138, .14);
  border: 1px solid rgba(215, 195, 138, .35);
  backdrop-filter: blur(16px);
  color: var(--accent-gold);
  letter-spacing: 1.5px;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
  animation: fadeUp 0.2s, badgeFloat 10s ease-in-out infinite alternate;
}

.hero-accent {
  width: 64px;
  height: 3px;
  background: var(--accent-gold);
  border-radius: 50px;
  margin: 14px 0 18px;
}

.hero-title {
  color: #fff;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -1px;
  margin-bottom: 16px;
  max-width: 560px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: fadeUp 0.4s;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.38);
}

.hero-title span {
  display: block;
  color: var(--accent-gold);
}

.hero-text {
  color: rgba(255, 255, 255, .95);
  font-size: 15px;
  line-height: 1.7;
  max-width: 540px;
  min-height: 72px;
  margin-bottom: 16px;
  animation: fadeUp 0.6s;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
}

.hero-tags {
  display: flex;
  min-height: 42px;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hero-tags span {
  padding: 8px 14px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  backdrop-filter: blur(14px);
  border-radius: 40px;
  font-size: 12px;
  transition: .35s;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.24);
}

.hero-tags span:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-3px);
}

.hero-buttons {
  display: flex;
  min-height: 70px;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 15px;
  margin-bottom: 40px;
  animation: fadeUp 1s;
}

.hero-stats {
  margin-top: 20px;
  display: flex;
  gap: 28px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .15);
  width: fit-content;
  animation: fadeUp 1.2s;
}

.hero-stat h3 {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 2px;
}

.hero-stat span {
  color: rgba(255, 255, 255, .75);
  font-size: 13px;
}

/* Buttons */

.hero-btn-primary {
  background: var(--primary);
  color: var(--text-light);
  text-decoration: none;
  padding: 18px 40px;
  border-radius: 10px;
  box-shadow: 0 15px 35px rgba(17, 75, 53, .25);
  font-weight: 600;
  transition: 0.35s;
}

.hero-btn-primary:hover {
  background: var(--primary-dark);
  color: var(--text-light);
  transform: translateY(-3px);
}

.hero-btn-outline {
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .30);
  backdrop-filter: blur(10px);
  padding: 17px 38px;
  border-radius: 10px;
  transition: 0.35s;
  font-weight: 600;
}

.hero-btn-outline:hover {
  background: var(--color-card);
  color: var(--primary);
}

/* Indicators */

.hero-indicators {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 20;
  pointer-events: none;
}

.hero-indicators button {
  width: 14px;

  height: 14px;

  border: none;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.35);

  transition: 0.35s;
}

.hero-indicators .active {
  width: 45px;

  border-radius: 30px;

  background: var(--accent-gold);
}

/* Hide Bootstrap controls */

.carousel-control-prev,
.carousel-control-next {
  display: none;
}

/* Fade Animation */

.carousel-item.active .hero-badge {
  animation: fadeUp 0.8s;
}

.carousel-item.active .hero-title {
  animation: fadeUp 1s;
}

.carousel-item.active .hero-text {
  animation: fadeUp 1.2s;
}

.carousel-item.active .hero-buttons {
  animation: fadeUp 1.4s;
}

@keyframes fadeUp {
  from {
    opacity: 0;

    transform: translateY(40px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/* Responsive */

@media (max-width: 1200px) {
  .hero-content {
    max-width: 620px;
    transform: translateY(20px);
  }

  .hero-title {
    font-size: 48px;
  }

  .hero-text {
    max-width: 520px;
  }
}

@media (max-width: 991px) {
  .desktop-menu {
    display: none;
  }

  .mobile-toggle {
    display: flex;
    justify-self: end;
  }

  .header-container {
    grid-template-columns: 1fr auto;
    padding: 0 20px;
  }

  .logo img {
    height: 50px;
  }

  .hero-slider .carousel-item {
    min-height: 780px;
    height: 100vh;
  }

  .hero-container {
    padding: 140px 20px 100px;
    align-items: flex-start;
  }

  .hero-container .row {
    transform: none;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
    transform: none;
    padding: 0 0 24px;
  }

  .hero-accent {
    margin: 0 auto 20px;
  }

  .hero-title {
    font-size: clamp(32px, 5vw, 42px);
    line-height: 1.15;
    max-width: 100%;
    min-height: auto;
    justify-content: flex-start;
  }

  .hero-text {
    max-width: 100%;
    margin: 0 auto 20px;
  }

  .hero-tags {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-buttons {
    justify-content: center;
    margin-bottom: 24px;
  }

  .hero-stats {
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .hero-image {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}

@media (max-width: 767px) {
  .hero-slider .carousel-item {
    min-height: 720px;
  }

  .hero-container {
    padding: 120px 16px 92px;
  }

  .hero-title {
    font-size: clamp(26px, 7vw, 32px);
  }

  .hero-text {
    font-size: 15px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-btn-primary,
  .hero-btn-outline {
    width: 100%;
    text-align: center;
  }

  .hero-stats {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .hero-stat {
    width: 100%;
    text-align: center;
  }

  .hero-image {
    height: 100%;
  }
}

@media (max-width: 480px) {
  .hero-container {
    padding: 110px 14px 50px;
  }

  .hero-title {
    font-size: 28px;
  }

  .hero-text {
    font-size: 14px;
  }

  .hero-tags {
    gap: 8px;
  }

  .hero-tags span {
    font-size: 11px;
  }

  .hero-stat h3 {
    font-size: 24px;
  }

  .hero-indicators {
    bottom: 16px;
  }
}

.mobile-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.mobile-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--primary);
  margin: 3px 0;
  transition: 0.35s;
  border-radius: 30px;
}

@media (max-width: 991px) {
  .mobile-toggle {
    display: flex;
    visibility: visible;
    opacity: 1;
  }
}

.mobile-menu {
  position: fixed;
  top: 60px;
  left: -100%;
  width: 300px;
  height: 100vh;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  transition: 0.4s;
  padding: 40px 30px;
  z-index: 9998;
}

.mobile-menu.active {
  left: 0;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu li {
  margin-bottom: 25px;
}

.mobile-menu a {
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.mobile-dropdown {
  margin-bottom: 25px;
}

.mobile-dropdown-toggle {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.mobile-dropdown-toggle i {
  font-size: 12px;
  transition: 0.3s;
}

.mobile-dropdown-toggle.active i {
  transform: rotate(180deg);
}

.mobile-dropdown-menu {
  display: none;
  margin-top: 12px;
  padding-left: 14px;
}

.mobile-dropdown-menu.active {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-dropdown-menu a {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}

/*==================================================
            SERVICES RESPONSIVE
==================================================*/

.svcx-card{
    display:flex;
    flex-direction:column;
    height:100%;
}

.svcx-image{
    width:100%;
    overflow:hidden;
}

.svcx-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.45s;
}

.svcx-content{
    display:flex;
    flex-direction:column;
    flex:1;
}

.svcx-link{
    margin-top:auto;
}

@media (max-width:1200px){

.svcx-heading{
    font-size:42px;
}

.svcx-description{
    max-width:720px;
    margin:auto;
}

.svcx-image{
    height:230px;
}

}

@media (max-width:991px){

.svcx-section{
    padding:70px 0;
}

.svcx-header{
    margin-bottom:45px;
    text-align:center;
}

.svcx-heading{
    font-size:36px;
}

.svcx-description{
    font-size:16px;
}

.svcx-card{
    margin-bottom:30px;
}

.svcx-image{
    height:220px;
}

.svcx-content{
    padding:24px;
}

.svcx-title{
    font-size:22px;
}

.svcx-features{
    gap:10px;
}

}

@media (max-width:767px){

.svcx-section{
    padding:55px 0;
}

.svcx-heading{
    font-size:30px;
}

.svcx-description{
    font-size:15px;
}

.svcx-card{
    border-radius:20px;
}

.svcx-image{
    height:190px;
}

.svcx-content{
    padding:20px;
}

.svcx-icon{
    width:56px;
    height:56px;
    margin-top:-42px;
}

.svcx-title{
    font-size:20px;
}

.svcx-features{
    flex-direction:column;
    gap:8px;
}

.svcx-link{
    width:100%;
    justify-content:center;
}

}

@media (max-width:480px){

.svcx-heading{
    font-size:26px;
}

.svcx-image{
    height:170px;
}

.svcx-content{
    padding:18px;
}

.svcx-title{
    font-size:18px;
}

.svcx-icon{
    width:50px;
    height:50px;
    font-size:18px;
}

.svcx-link{
    padding:14px;
}

}

/*==================================================
        BUILDING PERFORMANCE
==================================================*/

.performance-dashboard{
    align-items:center;
}

.dashboard-column{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.feature-card{
    min-height:165px;
}

.dashboard-center{
    position:relative;
    max-width:500px;
    margin:auto;
}

.dashboard-center img{
    width:100%;
    border-radius:28px;
}

.dashboard-info{
    width:68%;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    padding:16px;
    border-radius:18px;
}

.dashboard-info h3{
    font-size:21px;
    margin-bottom:8px;
}

.dashboard-score{
    align-items:center;
}

.dashboard-score strong{
    font-size:46px;
}

.dashboard-score span{
    font-size:13px;
}

.dashboard-chip{
    transform:scale(.95);
}

@media(max-width:1200px){

.performance-dashboard{

grid-template-columns:1fr;

gap:45px;

}

.dashboard-column{

max-width:760px;

margin:auto;

width:100%;

}

.dashboard-center{

max-width:560px;

}

.dashboard-chip{

transform:scale(.90);

}

}

@media(max-width:991px){

.performance-section{

padding:70px 0;

}

.performance-heading{

text-align:center;

}

.performance-heading h2{

font-size:36px;

}

.dashboard-center{

max-width:500px;

}

.dashboard-info{

width:74%;

padding:15px;

bottom:15px;

}

.dashboard-info h3{

font-size:20px;

}

.dashboard-score strong{

font-size:40px;

}

.feature-card{

min-height:auto;

padding:22px;

}

.dashboard-chip{

transform:scale(.82);

}

}

@media(max-width:767px){

.performance-section{

padding:55px 0;

}

.performance-heading h2{

font-size:30px;

}

.dashboard-center{

max-width:360px;

}

.dashboard-info{

width:82%;

padding:14px;

bottom:14px;

}

.dashboard-info h3{

font-size:17px;

}

.dashboard-score{

flex-direction:row;

justify-content:space-between;

}

.dashboard-score strong{

font-size:30px;

}

.dashboard-score span{

font-size:12px;

}

.feature-card{

padding:18px;

}

.dashboard-chip{

display:none;

}

}

@media(max-width:480px){

.performance-heading h2{

font-size:26px;

}

.dashboard-center{

max-width:300px;

}

.dashboard-info{

width:88%;

padding:12px;

}

.dashboard-info h3{

font-size:15px;

}

.dashboard-score strong{

font-size:26px;

}

.feature-card{

padding:16px;

}

}
/*====================================================
                ABOUT SECTION
====================================================*/

.about-section-custom {
  position: relative;
  padding: var(--section-padding);
  background: var(--color-card);
  overflow: hidden;
}

.about-section-custom .row {
  align-items: stretch;
}

.about-section-custom .col-lg-6 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-right-column {
  min-height: 620px;
  justify-content: space-between;
}

.about-right-column .about-highlights {
  margin-top: auto;
}

.about-image-panel {
  position: relative;
}

.about-main-image {
  width: 100%;
  height: 620px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  transition: transform 0.5s ease;
}

.about-main-image:hover {
  transform: scale(1.03);
}

.about-experience-badge {
  position: absolute;
  left: -18px;
  bottom: 22px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(17, 75, 53, 0.96);
  color: var(--text-light);
  box-shadow: 0 20px 40px rgba(17, 75, 53, 0.25);
  display: flex;
  align-items: center;
  gap: 14px;
}

.about-badge-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-badge-icon i {
  font-size: 28px;
  color: #9ef3b0;
}

.about-badge-content h2 {
  margin: 0;
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
}

.about-badge-content span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.5px;
}

.about-custom-tag {
  display: inline-block;
  padding: 8px 20px;
  background: var(--accent-light);
  border-radius: 40px;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 20px;
}

.about-custom-heading {
  font-size: 38px;
  line-height: 1.18;
  font-weight: 700;
  color: #222;
  margin-bottom: 16px;
}

.about-custom-description {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 18px;
  color: #555;
}

.about-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.about-highlight-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--color-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  box-shadow: 0 8px 22px rgba(17, 75, 53, 0.05);
}

.about-highlight-box:hover {
  transform: translateX(6px);
  border-color: var(--primary);
  box-shadow: 0 18px 35px rgba(17, 75, 53, 0.12);
}

.about-highlight-box i {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--primary);
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.about-highlight-box h6 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #222;
}

.about-highlight-box span {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: #666;
}

.about-custom-btn {
  display: inline-flex;
  align-items: center;
  padding: 16px 34px;
  background: var(--primary);
  color: var(--text-light);
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  transition: transform 0.35s ease, background 0.35s ease;
}

.about-custom-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-4px);
}

/*=====================
      RESPONSIVE
======================*/

@media (max-width: 1200px) {
  .about-custom-heading {
    font-size: 34px;
  }
}

@media (max-width: 991px) {
  .about-section-custom {
    padding: 30px 0;
  }

  .about-image-panel {
    margin-bottom: 30px;
  }

  .about-main-image {
    height: 500px;
  }

  .about-experience-badge {
    left: 20px;
    bottom: 40px;
  }

  .about-custom-heading {
    font-size: 30px;
  }

  .about-highlights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .about-main-image {
    height: 380px;
  }

  .about-experience-badge {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 20px;
    width: fit-content;
  }

  .about-custom-heading {
    font-size: 26px;
  }
}

.svcx-section {
    position: relative;
padding: var(--section-padding);
    background: var(--color-section-alt);
    overflow: hidden;
}

.svcx-tag {
    background: rgba(255,255,255,.18);
    color: #fff;
    backdrop-filter: blur(12px);
}

.svcx-heading {
    color: #fff;
}

.svcx-description {
    color: rgba(255,255,255,.85);
}

/* Decorative Shapes */

.svcx-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(241, 233, 210, .45);
    top: -220px;
    right: -180px;
    filter: blur(10px);
}

.svcx-section::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(18, 63, 56, .05);
    bottom: -160px;
    left: -160px;
}

/*====================================================
                    HEADER
====================================================*/

.svcx-header {
    max-width: 760px;
    margin: 0 auto 70px;
}

.svcx-header {
    color: #fff;
}

.svcx-heading {
    color: #fff;
}

.svcx-description {
    color: rgba(255, 255, 255, .85);
}

.svcx-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-radius: 40px;
    background: var(--accent-light);
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.svcx-heading {
    font-size: 54px;
    font-weight: 800;
    line-height: 1.15;
    color: #222;
    margin-bottom: 20px;
}

.svcx-description {
    font-size: 18px;
    line-height: 1.9;
    color: #666;
    margin: auto;
}

/*====================================================
                    CARD
====================================================*/

.svcx-card {
    position: relative;
    background: var(--color-card);
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    transition: all .45s ease;
}

.svcx-card:hover {
    transform: translateY(-12px);
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}

/*====================================================
                IMAGE
====================================================*/

.svcx-image {
    position: relative;
    height: 235px;
    overflow: hidden;
}

.svcx-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.svcx-card:hover .svcx-img {
    transform: scale(1.08);
}

/* Overlay */

.svcx-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.45),
        rgba(0,0,0,.05)
    );
}

/*====================================================
                NUMBER
====================================================*/

.svcx-number {
    position: absolute;
    top: 18px;
    right: 22px;
    font-size: 58px;
    font-weight: 800;
    color: rgba(255,255,255,.22);
    z-index: 3;
    line-height: 1;
    transition: .4s;
}

/*====================================================
                CONTENT
====================================================*/

.svcx-content {
    padding: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(100% - 235px);
}

.svcx-icon {
    width: 70px;
    height: 70px;
    margin-top: -64px;
    margin-bottom: 22px;
    border-radius: 18px;
    background: var(--primary);
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 15px 35px rgba(18,63,56,.28);
    transition: all .4s ease;
    z-index: 5;
}

.svcx-title {
    font-size: 25px;
    font-weight: 700;
    color: #222;
    margin-bottom: 16px;
    transition: .35s;
}

.svcx-desc {
    font-size: 15px;
    line-height: 1.85;
    color: #666;
    margin-bottom: 28px;
    flex-grow: 1;
}
/*====================================================
                SERVICE LINK
====================================================*/

.svcx-link {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: var(--primary);

}

.svcx-link i {

    transition: .35s;

}

.svcx-link:hover {

    color: var(--primary-dark);

}

.svcx-link:hover i {

    transform: translateX(8px);

}

/*====================================================
                CARD EFFECTS
====================================================*/

.svcx-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 0;

    height: 4px;

    background: var(--primary);

    transition: .45s ease;

    z-index: 15;

}

.svcx-card:hover::before {

    width: 100%;

}

.svcx-card:hover .svcx-title {

    color: var(--primary);

}

.svcx-card:hover .svcx-number {

    color: rgba(255,255,255,.42);

}

.svcx-card:hover .svcx-icon {

    transform: rotate(-8deg) scale(1.08);

    background: var(--primary-dark);

}

.svcx-card:hover .svcx-image::after {

    background: linear-gradient(
        to top,
        rgba(18,63,56,.35),
        rgba(18,63,56,.05)
    );

}


/*====================================================
                RESPONSIVE
====================================================*/

@media (max-width:1200px){

.svcx-heading{

font-size:46px;

}

}

@media (max-width:991px){

.svcx-image{

height:220px;

}

.svcx-content{

height:auto;

}


}

@media (max-width:767px){

.svcx-section{

padding:90px 0;

}

.svcx-header{

margin-bottom:55px;

}

.svcx-heading{

font-size:34px;

}

.svcx-description{

font-size:16px;

}

.svcx-image{

height:200px;

}

.svcx-content{

padding:24px;

}

.svcx-icon{

width:60px;

height:60px;

font-size:24px;

margin-top:-52px;

}

.svcx-title{

font-size:22px;

}

.svcx-number{

font-size:46px;

}

.svcx-cta-title{

font-size:28px;

}

.svcx-cta-text{

font-size:15px;

}

.svcx-cta-btn{

width:100%;

justify-content:center;

}

}
/*====================================================
            WHY DRS ENERGY
====================================================*/

.why-section{

    padding: var(--section-padding);

    background:var(--color-card);

    position:relative;

    overflow:hidden;
}

/* Decorative Background */

.why-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:radial-gradient(circle,var(--accent-light) 0%,transparent 70%);

    top:-180px;

    right:-120px;

    opacity:.7;

}

.why-section::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    background:radial-gradient(circle,var(--primary) 0%,transparent 70%);

    bottom:-180px;

    left:-120px;

    opacity:.05;

}

/*==================================
            HEADER
==================================*/

.why-header{

    max-width:760px;

    margin:0 auto 70px;
}

.why-tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

    background:var(--accent-light);

    color:var(--primary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;
}

.why-heading{

    font-size:54px;

    font-weight:800;

    line-height:1.15;

    color:#222;

    margin-bottom:20px;
}

.why-description{

    color:#666;

    line-height:1.9;

    font-size:17px;
}

/*==================================
            GRID
==================================*/

.why-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

    position:relative;

    z-index:2;
}

/*==================================
            TILE
==================================*/

.why-item{

    position:relative;

    background:var(--color-card);

    border-radius:28px;

    padding:36px;

    min-height:280px;

    border:1px solid var(--border);

    transition:.45s;

    overflow:hidden;

    display:flex;

    flex-direction:column;
}

.why-item:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow-md);

    border-color:var(--primary);
}

/*==================================
        BIG BACKGROUND NUMBER
==================================*/

.why-number{

    position:absolute;

    right:24px;

    top:18px;

    font-size:82px;

    font-weight:800;

    color:var(--primary);

    opacity:.06;

    line-height:1;

    transition:.45s;
}

.why-item:hover .why-number{

    transform:scale(1.12);

    opacity:.12;
}

/*==================================
            TITLE
==================================*/

.why-item h4{

    font-size:28px;

    font-weight:700;

    color:#222;

    line-height:1.3;

    margin-top:35px;

    margin-bottom:18px;

    transition:.35s;
}

.why-item:hover h4{

    color:var(--primary);
}

/*==================================
        DESCRIPTION
==================================*/

.why-item p{

    color:#666;

    line-height:1.8;

    margin-bottom:auto;

    font-size:15px;
}

/*==================================
            LINK
==================================*/

.why-item a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    margin-top:25px;

    transition:.35s;
}

.why-item a i{

    transition:.35s;
}

.why-item:hover a{

    color:var(--primary-light);
}

.why-item:hover a i{

    transform:translateX(8px);
}
/*==================================
        FEATURED TILE
==================================*/

.why-highlight{

    background:var(--primary);

    color:var(--text-light);

    border:none;
}

.why-highlight h4{

    color:#fff;
}

.why-highlight p{

    color:#d9e5e2;
}

.why-highlight .why-number{

    color:#fff;

    opacity:.08;
}

.why-highlight a{

    color:#fff;
}

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

.highlight-footer{

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.15);
}

.highlight-footer strong{

    display:block;

    font-size:42px;

    font-weight:800;

    color:#fff;

    line-height:1;
}

.highlight-footer span{

    color:#d8d8d8;

    font-size:15px;
}
/*====================================================
        PREMIUM TOP ACCENT
====================================================*/

.why-item::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--accent-gold));

    transition:.45s ease;

}

.why-item:hover::before{

    width:100%;

}

/*====================================================
        SOFT GRADIENT GLOW
====================================================*/

.why-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle at top right,
    rgba(18,63,56,.08),
    transparent 60%);

    opacity:0;

    transition:.45s;

    pointer-events:none;

}

.why-item:hover::after{

    opacity:1;

}

/*====================================================
        TITLE ANIMATION
====================================================*/

.why-item h4{

    transition:.35s;

}

.why-item:hover h4{

    transform:translateX(6px);

}

/*====================================================
        DESCRIPTION
====================================================*/

.why-item p{

    transition:.35s;

}

.why-item:hover p{

    color:#555;

}

/*====================================================
        LINK ANIMATION
====================================================*/

.why-item a{

    position:relative;

}

.why-item a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.35s;

}

.why-item:hover a::after{

    width:100%;

}

/*====================================================
        HIGHLIGHT CARD
====================================================*/

.why-highlight{

    position:relative;

    overflow:hidden;

}

.why-highlight::before{

    background:linear-gradient(90deg,var(--accent-light),var(--color-card),var(--accent-light));

}

.why-highlight:hover{

    transform:translateY(-12px) scale(1.02);

    box-shadow:0 30px 70px rgba(17,75,53,.28);

}

/* Fix text color for highlighted card on hover */
.why-highlight:hover h4,
.why-highlight:hover p,
.why-highlight:hover a,
.why-highlight:hover span,
.why-highlight:hover strong {
    color: #ffffff !important;
}

.why-highlight:hover .highlight-footer span {
    color: rgba(255,255,255,0.9) !important;
}

/*====================================================
        FOOTER STATS
====================================================*/

.why-highlight .highlight-footer span{
    color: rgba(255,255,255,.85);
}

.why-highlight:hover .highlight-footer span{
    color:#ffffff;
}

.highlight-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}

.highlight-footer strong{

    transition:.35s;

}

.why-highlight:hover .highlight-footer strong{

    transform:scale(1.08);

}

/*====================================================
        ENTRANCE ANIMATION
====================================================*/

.why-item{

    opacity:0;

    animation:fadeWhy .8s forwards;

}

.why-item:nth-child(1){

    animation-delay:.10s;

}

.why-item:nth-child(2){

    animation-delay:.20s;

}

.why-item:nth-child(3){

    animation-delay:.30s;

}

.why-item:nth-child(4){

    animation-delay:.40s;

}

.why-item:nth-child(5){

    animation-delay:.50s;

}

.why-item:nth-child(6){

    animation-delay:.60s;

}

@keyframes fadeWhy{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*====================================================
        RESPONSIVE
====================================================*/

@media(max-width:1200px){

.why-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:991px){

.why-section{

    padding:90px 0;

}

.why-heading{

    font-size:40px;

}

}

@media(max-width:767px){

.why-section{

    padding:80px 0;

}

.why-grid{

    grid-template-columns:1fr;

}

.why-heading{

    font-size:32px;

}

.why-description{

    font-size:16px;

}

.why-item{

    min-height:auto;

    padding:30px;

}

.why-number{

    font-size:70px;

}

.why-item h4{

    font-size:24px;

}

.highlight-footer{

    flex-direction:column;

    align-items:flex-start;

}

}
/*=====================================================
            BUILDING PERFORMANCE SECTION
======================================================*/
/*======================================================
        BUILDING PERFORMANCE SECTION
======================================================*/

.performance-section{

    position:relative;

    padding:90px 0;

    background:var(--color-section-alt);

    overflow:hidden;

}

.performance-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(rgba(17,75,53,.04) 1px,transparent 1px),

    linear-gradient(90deg,rgba(17,75,53,.04) 1px,transparent 1px);

    background-size:50px 50px;

    pointer-events:none;

}

.performance-section .container{

    max-width:1450px;

}
.performance-heading{

    max-width:900px;

    margin:auto;

    text-align:center;

    margin-bottom:70px;

}

.performance-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 24px;

    border-radius:50px;

    background:var(--accent-light);

    color:var(--primary-light);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

}

.performance-badge i{

    font-size:9px;

}

.performance-heading h2{

    margin:22px 0 18px;

    font-size:48px;

    font-weight:800;

    color:var(--primary);

    line-height:1.15;

}

.performance-heading p{

    max-width:760px;

    margin:auto;

    color:var(--text-muted);

    font-size:20px;

    line-height:1.8;

}

.dashboard-grid{

    position:absolute;

    inset:0;

    background:

    linear-gradient(rgba(17,75,53,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(17,75,53,.05) 1px,transparent 1px);

    background-size:45px 45px;

    pointer-events:none;

    z-index:0;

}

.dashboard-bg-lines{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}

.dashboard-bg-lines::before{

    content:"";

    position:absolute;

    width:180%;

    height:180%;

    left:-40%;

    top:-40%;

    background:

    repeating-linear-gradient(

        60deg,

        transparent 0,

        transparent 38px,

        rgba(17,75,53,.05) 39px,

        rgba(17,75,53,.05) 40px

    );

    animation:moveLines 18s linear infinite;

}

.dashboard-bg-lines::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    repeating-linear-gradient(

        -60deg,

        transparent 0,

        transparent 55px,

        rgba(17,75,53,.03) 56px,

        rgba(17,75,53,.03) 57px

    );

    animation:moveLinesReverse 22s linear infinite;

}

.dashboard-bg-glow{

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at center,

        rgba(17,75,53,.08),

        transparent 70%

    );

    filter:blur(80px);

    pointer-events:none;

    z-index:2;

}

.energy-particles{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:3;

    overflow:hidden;

}

.energy-particles::before{

    content:"";

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--primary-light);

    box-shadow:

        180px 80px var(--primary-light),

        420px 240px var(--primary-light),

        760px 110px var(--primary-light),

        930px 380px var(--primary-light),

        1120px 180px var(--primary-light),

        1280px 520px var(--primary-light);

    animation:particleMove 10s linear infinite;

}

.performance-dashboard{

    position:relative;

    display:grid;

    grid-template-columns:

    320px

    520px

    320px;

    justify-content:center;

    align-items:center;

    column-gap:70px;

    row-gap:0;

}
.dashboard-column{

    display:flex;

    flex-direction:column;

    gap:42px;

    position:relative;

    z-index:10;

}
.feature-card{

    position:relative;

    overflow:visible;

    background:#fff;

    border-radius:28px;

    padding:28px;

    min-height:220px;

    border:1px solid rgba(17,75,53,.08);

    box-shadow:

    0 18px 40px rgba(0,0,0,.08);

    transition:.35s;

    animation:fadeInUp .8s ease-out forwards;

}

.left-column .feature-card:nth-child(1){

    animation-delay:.1s;

}

.left-column .feature-card:nth-child(2){

    animation-delay:.25s;

}

.right-column .feature-card:nth-child(1){

    animation-delay:.35s;

}

.right-column .feature-card:nth-child(2){

    animation-delay:.5s;

}

.feature-card:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 50px rgba(32,170,110,.15);

}
.feature-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:28px;

}
.feature-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

}

.feature-icon i{

    color:var(--text-light);

    font-size:30px;

}
.feature-value{

    background:var(--accent-light);

    color:var(--primary-light);

    padding:9px 16px;

    border-radius:40px;

    font-size:18px;

    font-weight:700;

}
.feature-card h3{

    font-size:22px;

    font-weight:700;

    line-height:1.3;

    color:#222;

}
.feature-line{

    display:block;

    width:52px;

    height:3px;

    background:var(--primary-light);

    border-radius:10px;

    margin:16px 0 18px;

}
.feature-card p{

    color:#6e7b7d;

    font-size:16px;

    line-height:1.8;

}
.dashboard-center{

    position:relative;

    width:min(100%, 620px);

    aspect-ratio: 4 / 5;

    margin:0 auto;

    z-index:15;

}
.dashboard-ring{

    position:absolute;

    width:620px;

    height:620px;

    left:50%;

    top:50%;

    transform:

    translate(-50%,-50%);

    border:2px dashed rgba(38,180,118,.18);

    border-radius:50%;

}
.dashboard-screen{

    position:relative;

    width:100%;
    height:100%;
    min-height:320px;
    overflow:hidden;
    border-radius:34px;
    background:#071612;
    box-shadow:

    0 25px 70px rgba(0,0,0,.18);

}
.dashboard-screen img{

    width:100%;
    height:100%;
    min-height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
    filter:
    brightness(.78)
    contrast(1.08)
    saturate(.95);
    transform:scale(1.03);

}

.dashboard-screen::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:linear-gradient(90deg,transparent,rgba(82,255,176,.4),transparent);

    animation:dashboardScan 6s ease-in-out infinite;

    z-index:10;

}

/*=====================================================
                DASHBOARD GLASS PANEL
======================================================*/

.dashboard-info{

    position:absolute;
    left:24px;
    right:24px;
    bottom:24px;
    transform:none;
    width:auto;
    max-width:min(440px, calc(100% - 48px));
    padding:20px 22px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:12px;
    border-radius:24px;

    background:rgba(11,42,34,.70);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

        0 25px 60px rgba(0,0,0,.25);

    z-index:15;

    animation:breathingGlow 6s ease-in-out infinite;

}

.live-tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:12px;

    letter-spacing:1px;

    font-weight:600;

}

.live-tag i{

    color:#66ffb2;

    font-size:8px;

}

.dashboard-info h3{

    margin:0;

    color:#fff;

    font-size:28px;

    line-height:1.3;

    font-weight:700;

}
.dashboard-score{

    display:flex;
    width:100%;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:14px;

}

.dashboard-score strong{

    color:#63ffb2;

    font-size:72px;

    line-height:1;

    font-weight:800;

}

.dashboard-score label{

    display:block;

    color:#d9e7df;

    font-size:18px;

    margin-bottom:12px;

}
.score-graph{

    display:flex;

    align-items:flex-end;

    gap:6px;

}

.score-graph span{

    width:8px;

    background:#54ffaf;

    border-radius:20px;

    transform-origin:bottom;

    animation:barPulse 3s ease-in-out infinite;

}

.score-graph span:nth-child(1){

    height:10px;

    animation-delay:.1s;

}

.score-graph span:nth-child(2){

    height:22px;

    animation-delay:.2s;

}

.score-graph span:nth-child(3){

    height:14px;

    animation-delay:.3s;

}

.score-graph span:nth-child(4){

    height:30px;

    animation-delay:.4s;

}

.score-graph span:nth-child(5){

    height:18px;

    animation-delay:.5s;

}
/*=====================================================
                FLOATING CHIPS
======================================================*/

.dashboard-chip{

    position:absolute;

    display:flex;

    align-items:center;

    gap:12px;

    width:165px;

    padding:12px;

    border-radius:20px;

    background:rgba(13,57,46,.95);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.08);

    box-shadow:

        0 20px 45px rgba(0,0,0,.30);

    transition:.35s;

    z-index:50;

    animation:chipPulse 4s ease-in-out infinite;

}

.dashboard-chip:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.40),0 0 40px rgba(70,255,180,.20);

}
.chip-icon{

    width:42px;

    height:42px;

    border-radius:14px;

    background:linear-gradient(
    135deg,
    #159868,
    #123f38);

    display:flex;

    align-items:center;

    justify-content:center;

}

.chip-icon i{

    color:#fff;

    font-size:18px;

}
.chip-text{

    flex:1;

}

.chip-text small{

    display:block;

    color:#95e5bf;

    font-size:10px;

    letter-spacing:2px;

    margin-bottom:4px;

}

.chip-text strong{

    display:block;

    color:#fff;

    font-size:16px;

}

.chip-status{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:8px;

    color:#cde8dc;

    font-size:11px;

}
.chip-status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:#5dffb3;

    box-shadow:

    0 0 12px #5dffb3;

}
.chip-left-top{

    left:-95px;

    top:120px;

}

.chip-right-top{

    right:-95px;

    top:210px;

}

.chip-left-bottom{

    left:-95px;

    bottom:170px;

}

.chip-right-bottom{

    right:-95px;

    bottom:70px;

}
.feature-card::after{

    content:"";

    position:absolute;

    top:50%;

    width:45px;

    height:2px;

    background:#25c37f;

}
.left-column .feature-card::after{

    right:-45px;

}
.right-column .feature-card::after{

    left:-45px;

}
.feature-card::before{

    content:"";

    position:absolute;

    width:12px;

    height:12px;

    top:calc(50% - 6px);

    border-radius:50%;

    background:#25d88f;

    box-shadow:

    0 0 15px rgba(37,216,143,.6);

}
.left-column .feature-card::before{

    right:-52px;

}
.right-column .feature-card::before{

    left:-52px;

}
/*=====================================================
            PREMIUM EFFECTS
======================================================*/

.dashboard-screen{

    transition:all .45s ease;

}

.dashboard-center:hover .dashboard-screen{

    transform:translateY(-8px);

    box-shadow:
        0 45px 100px rgba(0,0,0,.30);

}

.dashboard-center:hover .dashboard-ring{

    transform:
        translate(-50%,-50%)
        rotate(180deg);

    transition:8s linear;

}
.dashboard-ring{

    animation:ringRotate 30s linear infinite;

}

@keyframes ringRotate{

from{

transform:
translate(-50%,-50%)
rotate(0deg);

}

to{

transform:
translate(-50%,-50%)
rotate(360deg);

}

}
.feature-card{

animation:cardFloat 6s ease-in-out infinite;

}

.left-column .feature-card:nth-child(2){

animation-delay:1.5s;

}

.right-column .feature-card:nth-child(1){

animation-delay:.8s;

}

.right-column .feature-card:nth-child(2){

animation-delay:2.3s;

}

@keyframes cardFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}
.dashboard-chip{

animation:chipFloat 5s ease-in-out infinite;

}

.chip-right-top{

animation-delay:1s;

}

.chip-left-bottom{

animation-delay:2s;

}

.chip-right-bottom{

animation-delay:3s;

}

@keyframes chipFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

}

@keyframes moveLines{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(80px);

    }

}

@keyframes moveLinesReverse{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-80px);

    }

}

@keyframes particleMove{

    from{

        transform:translateY(0);

        opacity:.2;

    }

    50%{

        opacity:1;

    }

    to{

        transform:translateY(-30px);

        opacity:.2;

    }

}

@keyframes dashboardScan{

    0%{

        transform:translateX(-100%);

        opacity:0;

    }

    10%{

        opacity:.6;

    }

    90%{

        opacity:.6;

    }

    100%{

        transform:translateX(100%);

        opacity:0;

    }

}

@keyframes breathingGlow{

    0%,100%{

        box-shadow:0 25px 60px rgba(0,0,0,.25);

    }

    50%{

        box-shadow:0 25px 80px rgba(20,160,110,.12),0 25px 60px rgba(0,0,0,.25);

    }

}

@keyframes chipPulse{

    0%,100%{

        box-shadow:0 20px 45px rgba(0,0,0,.30);

    }

    50%{

        box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 30px rgba(70,255,180,.15);

    }

}

@keyframes barPulse{

    0%,100%{

        transform:scaleY(1);

    }

    50%{

        transform:scaleY(1.08);

    }

}

@keyframes fadeInUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes connectorDot{

    0%{

        left:0;

        opacity:.3;

    }

    50%{

        opacity:1;

    }

    100%{

        left:100%;

        opacity:.3;

    }

}

.dashboard-screen img{

transition:1.2s ease;

}

.dashboard-center:hover img{

transform:scale(1.05);

}
.feature-icon{

transition:.4s;

}

.feature-card:hover .feature-icon{

    transform:rotate(8deg) scale(1.1);

    background:#169165;

    box-shadow:0 0 25px rgba(22,145,101,.40);

}
.feature-card{

overflow:hidden;

}

.feature-card::after{

background:

linear-gradient(

90deg,

#18b372,

#5dffb3

);

}
.dashboard-screen::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at center,

rgba(90,255,180,.12),

transparent 70%

);

pointer-events:none;

z-index:2;

}
.dashboard-info{

box-shadow:

0 25px 50px rgba(0,0,0,.35),

0 0 40px rgba(20,160,110,.08);

}
.dashboard-chip:hover{

box-shadow:

0 20px 50px rgba(0,0,0,.35),

0 0 30px rgba(70,255,180,.18);

}
.feature-card:hover{

border-color:

rgba(35,180,120,.25);

}
@media(max-width:1200px){

.performance-dashboard{

grid-template-columns:1fr;

row-gap:50px;

}

.dashboard-center{

margin:auto;

order:1;

}

.left-column{

order:2;

}

.right-column{

order:3;

}

.dashboard-column{

max-width:700px;

margin:auto;

}

.dashboard-chip{

display:none;

}

.feature-card::after,

.feature-card::before{

display:none;

}

}
@media(max-width:991px){

.performance-section{

padding:70px 0;

}

.performance-heading{

text-align:center;

}

.performance-heading h2{

font-size:36px;

}

.dashboard-center{

width:100%;
max-width:560px;
margin:0 auto;
}

.dashboard-info{

left:18px;
right:18px;
bottom:18px;
max-width:calc(100% - 36px);
padding:18px 20px;

}

.dashboard-info h3{

font-size:20px;

}

.dashboard-score strong{

font-size:40px;

}

.feature-card{

min-height:auto;

padding:22px;

}

}

@media(max-width:767px){

.performance-section{

padding:55px 0;

}

.performance-heading h2{

font-size:30px;

}

.dashboard-center{

width:100%;
max-width:390px;
margin:0 auto;
}

.dashboard-screen{

min-height:280px;

}

.dashboard-info{

left:14px;
right:14px;
bottom:14px;
max-width:calc(100% - 28px);
padding:14px;

}

.dashboard-info h3{

font-size:17px;

}

.dashboard-score{

flex-direction:column;
align-items:flex-start;
justify-content:space-between;
gap:10px;

}

.dashboard-score strong{

font-size:30px;

}

.dashboard-score label{

font-size:14px;
margin-bottom:8px;

}

.dashboard-score span{

font-size:12px;

}

.feature-card{

padding:18px;

}

.dashboard-chip{

display:none;

}

}

@media(max-width:480px){

.performance-heading h2{

font-size:26px;

}

.dashboard-center{

width:100%;
max-width:320px;
margin:0 auto;
}

.dashboard-screen{

min-height:250px;

}

.dashboard-info{

left:10px;
right:10px;
bottom:10px;
max-width:calc(100% - 20px);
padding:12px;

}

.dashboard-info h3{

font-size:15px;

}

.dashboard-score strong{

font-size:26px;

}

.feature-card{

padding:16px;

}

}

/*====================================================
            INDUSTRIES SECTION
====================================================*/

.industries-section {
  padding: var(--section-padding);

  position: relative;

  overflow: hidden;
}

/*====================================================
                HEADER
====================================================*/

.industries-header {
  max-width: 760px;

  margin: 0 auto 80px;
}

.industry-tag {
  display: inline-block;

  padding: 10px 24px;

  border-radius: 40px;

  background: var(--accent-light);

  color: var(--primary);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 22px;
}

.industry-heading {
  font-size: 54px;

  font-weight: 800;

  color: #222;

  line-height: 1.15;

  margin-bottom: 20px;
}

.industry-description {
  font-size: 17px;

  color: #666;

  line-height: 1.9;
}

/*====================================================
                BENTO GRID
====================================================*/

.industry-bento {
  display: grid;

  grid-template-columns: 1.7fr 1fr 1fr;

  grid-auto-rows: 270px;

  gap: 24px;
}

/*====================================================
            FEATURED CARD
====================================================*/

.industry-feature {
  position: relative;

  grid-row: span 2;

  overflow: hidden;

  border-radius: 30px;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
}

.industry-feature img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.8s;
}

.industry-feature:hover img {
  transform: scale(1.08);
}

.industry-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 40px;

  background: linear-gradient(
    to top,

    rgba(8, 30, 27, 0.92),
    rgba(8, 30, 27, 0.15),
    transparent
  );
}

.industry-overlay span {
  display: inline-block;

  width: max-content;

  padding: 8px 18px;

  border-radius: 30px;

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(15px);

  color: #fff;

  font-size: 13px;

  font-weight: 700;

  margin-bottom: 20px;
}

.industry-overlay h3 {
  font-size: 36px;

  color: #fff;

  font-weight: 800;

  line-height: 1.2;

  margin-bottom: 18px;
}

.industry-overlay p {
  color: #ececec;

  line-height: 1.8;

  max-width: 420px;

  margin: 0;
}

/*====================================================
                SMALL CARDS
====================================================*/

.industry-box {
  position: relative;

  overflow: hidden;

  border-radius: 24px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);

  cursor: pointer;
}

.industry-box img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.7s;
}

.industry-box:hover img {
  transform: scale(1.08);
}

.industry-content {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 26px;

  background: linear-gradient(
    to top,

    rgba(8, 30, 27, 0.92),
    rgba(8, 30, 27, 0.08),
    transparent
  );
}

.industry-content i {
  width: 60px;

  height: 60px;

  border-radius: 18px;

  background: rgba(255, 255, 255, 0.16);

  backdrop-filter: blur(12px);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 24px;

  margin-bottom: 18px;
}

.industry-content h4 {
  color: #fff;

  font-size: 24px;

  font-weight: 700;

  margin-bottom: 10px;
}

.industry-content p {
  color: #ddd;

  line-height: 1.7;

  margin: 0;
}

/*====================================================
                INDUSTRY TAGS
====================================================*/

.industry-tags {
  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 16px;

  margin-top: 55px;
}

.industry-tags span {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 14px 24px;

  border-radius: 50px;

  background: var(--color-card);

  color: var(--primary);

  font-size: 15px;

  font-weight: 600;

  border: 1px solid #ececec;

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

  transition: 0.35s;
}

.industry-tags span i {
  color: var(--primary-light);

  font-size: 16px;

  transition: 0.35s;
}

.industry-tags span:hover {
  transform: translateY(-8px);

  background: var(--primary);

  color: var(--text-light);

  box-shadow: 0 25px 60px rgba(18, 63, 56, 0.2);
}

.industry-tags span:hover i {
  color: var(--text-light);

  transform: rotate(12deg);
}

/*====================================================
            FEATURE HOVER
====================================================*/

.industry-feature {
  transition: 0.45s;
}

.industry-feature:hover {
  transform: translateY(-10px);

  box-shadow: 0 40px 90px rgba(18, 63, 56, 0.2);
}

/* Shine Effect */

.industry-feature::before {
  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 60%;

  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );

  transform: skewX(-25deg);

  transition: 1s;

  z-index: 2;
}

.industry-feature:hover::before {
  left: 140%;
}

/*====================================================
                SMALL CARD HOVER
====================================================*/

.industry-box {
  transition: 0.4s;
}

.industry-box:hover {
  transform: translateY(-10px);

  box-shadow: 0 35px 70px rgba(18, 63, 56, 0.18);
}

.industry-box:hover .industry-content i {
  background: var(--color-card);

  color: var(--primary);

  transform: rotate(10deg) scale(1.08);
}

.industry-content i {
  transition: 0.4s;
}

.industry-box:hover h4 {
  color: #c8f5d5;
}

.industry-content h4 {
  transition: 0.35s;
}
.stats-icon {
  font-size: 42px;

  color: var(--accent-gold);

  margin-bottom: 18px;
}
/*====================================================
            ENTRANCE ANIMATION
====================================================*/

.industry-feature {
  animation: fadeLeft 0.9s ease;
}

.industry-box {
  opacity: 0;

  animation: fadeUp 0.7s forwards;
}

.industry-box:nth-child(2) {
  animation-delay: 0.15s;
}

.industry-box:nth-child(3) {
  animation-delay: 0.3s;
}

.industry-box:nth-child(4) {
  animation-delay: 0.45s;
}

.industry-box:nth-child(5) {
  animation-delay: 0.6s;
}

.industry-box:nth-child(6) {
  animation-delay: 0.75s;
}

@keyframes fadeLeft {
  from {
    opacity: 0;

    transform: translateX(-60px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;

    transform: translateY(40px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/*====================================================
                RESPONSIVE
====================================================*/

@media (max-width: 1200px) {
  .industry-heading {
    font-size: 46px;
  }

  .industry-bento {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

@media (max-width: 991px) {
  .industries-section {
    padding: var(--section-padding);
  }

  .industry-heading {
    font-size: 38px;
  }

  .industry-bento {
    grid-template-columns: 1fr;

    grid-auto-rows: auto;
  }

  .industry-feature {
    grid-row: auto;

    min-height: 500px;
  }

  .industry-box {
    min-height: 320px;
  }
}

@media (max-width: 767px) {
  .industries-section {
    padding: var(--section-padding);
  }

  .industries-header {
    margin-bottom: 35px;
  }

  .industry-heading {
    font-size: 30px;
  }

  .industry-description {
    font-size: 16px;
  }

  .industry-feature {
    min-height: 400px;
  }

  .industry-overlay {
    padding: 24px;
  }

  .industry-overlay h3 {
    font-size: 28px;
  }

  .industry-overlay p {
    font-size: 15px;
  }

  .industry-box {
    min-height: 280px;
  }

  .industry-content {
    padding: 20px;
  }

  .industry-content h4 {
    font-size: 21px;
  }

  .industry-tags {
    gap: 12px;
  }

  .industry-tags span {
    padding: 12px 18px;

    font-size: 14px;
  }
}

/*====================================================
            PERFORMANCE
====================================================*/

.industry-feature,
.industry-box,
.industry-tags span {
  will-change: transform;
}

/*====================================================
            DRS ENGINEERING HIGHLIGHTS
====================================================*/

.industry-stats {
  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 270px;

  border-radius: 24px;

  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);

  box-shadow: 0 25px 60px rgba(18, 63, 56, 0.22);

  transition: 0.45s;
}

.industry-stats:hover {
  transform: translateY(-10px);

  box-shadow: 0 40px 80px rgba(18, 63, 56, 0.3);
}

/* Decorative Shapes */

.industry-stats::before {
  content: "";

  position: absolute;

  width: 320px;

  height: 320px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.05);

  top: -170px;

  right: -120px;
}

.industry-stats::after {
  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.04);

  bottom: -90px;

  left: -70px;
}

/*====================================================
                CONTENT
====================================================*/

.stats-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  height: 100%;

  padding: 20px;
}

/* Icon */

.stats-icon {
  width: 60px;

  height: 60px;

  margin: 0 auto 16px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.35s;
}

.stats-icon i {
  font-size: 24px;

  color: #9ef3b0;
}

.industry-stats:hover .stats-icon {
  transform: rotate(12deg) scale(1.08);

  background: rgba(255, 255, 255, 0.18);
}

/* Badge */

.stats-badge {
  display: inline-block;

  padding: 7px 18px;

  border-radius: 30px;

  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-top: 5px;
  margin-bottom: 16px;
}

/* Title */

.stats-content h3 {
  font-size: 24px;

  font-weight: 800;

  line-height: 1.25;

  margin-bottom: 20px;

  color: #fff;
}

/*====================================================
                STATS
====================================================*/

.stats-row {
  display: flex;

  justify-content: center;

  gap: 32px;

  margin-bottom: 18px;
  position: relative;
}
.stats-row::after {
  content: "";

  position: absolute;

  left: 50%;

  top: 8px;

  bottom: 8px;

  width: 1px;

  background: rgba(255, 255, 255, 0.15);
}
.stat-item {
  text-align: center;
}

.stat-item strong {
  display: block;

  font-size: 34px;

  font-weight: 800;

  color: #9ef3b0;

  line-height: 1;
}

.stat-item small {
  display: block;

  margin-top: 6px;

  color: #d8d8d8;

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 1px;
}

/* Divider */

.stats-divider {
  width: 70px;

  height: 2px;

  margin: 0 auto 16px;

  background: rgba(255, 255, 255, 0.18);
}
/*=====================================
        STATS FOOTER
=====================================*/

.stats-footer {
  margin-top: 14px;

  color: rgba(255, 255, 255, 0.82);

  font-size: 13px;

  font-weight: 500;

  letter-spacing: 0.5px;
}

/*====================================================
            ENGINEERING PROCESS
====================================================*/

.process-section {
  padding: var(--section-padding);

  position: relative;

  overflow: hidden;
}

/*====================================================
                    HEADER
====================================================*/

.process-header {
  max-width: 760px;

  margin: 0 auto 80px;
}

.process-tag {
  display: inline-block;

  padding: 10px 24px;

  border-radius: 50px;

  background: var(--accent-light);

  color: var(--primary);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 22px;
}

.process-heading {
  font-size: 54px;

  font-weight: 800;

  line-height: 1.15;

  color: #1b1b1b;

  margin-bottom: 20px;
}

.process-description {
  font-size: 17px;

  line-height: 1.9;

  color: #666;
}

/*====================================================
                LEFT SHOWCASE
====================================================*/

.process-showcase {
  position: relative;

  height: 100%;

  min-height: 860px;

  overflow: hidden;

  border-radius: 28px;

  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.18);

  transition: 0.5s;
}

.process-showcase:hover {
  transform: translateY(-10px);

  box-shadow: 0 45px 90px rgba(18, 63, 56, 0.18);
}

.process-showcase img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 1s;
}

.process-showcase:hover img {
  transform: scale(1.08);
}

/*====================================================
                    OVERLAY
====================================================*/

.process-overlay {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
  padding: 35px;
  overflow-y: auto;
  background: linear-gradient(
    to top,
    rgba(7, 24, 22, 0.92),
    rgba(7, 24, 22, 0.25),
    transparent
  );
}

/*====================================================
                TOP TAG
====================================================*/

.overlay-tag {
  align-self: flex-start;

  padding: 10px 22px;

  border-radius: 40px;

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.18);

  color: #fff;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 24px;
}

/*====================================================
                TITLE
====================================================*/

.process-overlay h3 {
  font-size: 34px;

  font-weight: 800;

  color: #fff;

  line-height: 1.25;

  margin-bottom: 16px;
}

.process-overlay p {
  color: #ececec;

  line-height: 1.8;

  margin-bottom: 30px;

  max-width: 360px;
}

/*====================================================
            SERVICE LIST
====================================================*/

.overlay-services {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px 22px;

  margin-bottom: 35px;
}

.overlay-services div {
  display: flex;

  align-items: center;

  gap: 12px;

  color: #fff;

  font-weight: 600;

  transition: 0.35s;
}

.overlay-services div:hover {
  transform: translateX(8px);
}

.overlay-services i {
  color: #8ef0a5;

  font-size: 18px;

  transition: 0.35s;
}

.overlay-services div:hover i {
  transform: scale(1.2);

  color: #fff;
}

/*====================================================
            STATS
====================================================*/

.overlay-stats {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 22px;

  border-radius: 22px;

  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.16);
}

.overlay-stats div {
  flex: 1;

  text-align: center;
}

.overlay-stats div:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.overlay-stats strong {
  display: block;

  color: #fff;

  font-size: 38px;

  font-weight: 800;

  line-height: 1;
}

.overlay-stats span {
  color: #ddd;

  font-size: 14px;

  margin-top: 8px;

  display: block;
}
/*====================================================
                PROCESS LIST
====================================================*/

.process-list {
  display: flex;

  flex-direction: column;

  gap: 22px;

  height: 100%;
}

/*====================================================
                PROCESS ITEM
====================================================*/

.process-item {
  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 22px;

  padding: 28px;

  border-radius: 24px;

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.55);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);

  overflow: hidden;

  transition: 0.45s;
}

/* Left Accent */

.process-item::before {
  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 5px;

  height: 100%;

  background: var(--primary);

  transform: scaleY(0);

  transform-origin: top;

  transition: 0.45s;
}

.process-item:hover::before {
  transform: scaleY(1);
}

.process-item:hover {
  transform: translateY(-8px);

  background: #ffffff;

  box-shadow: 0 28px 60px rgba(18, 63, 56, 0.15);
}

/*====================================================
                    ICON
====================================================*/

.process-icon {
  flex-shrink: 0;

  width: 72px;

  height: 72px;

  border-radius: 22px;

  background: var(--primary);

  color: var(--text-light);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 28px;

  transition: 0.45s;
}

.process-item:hover .process-icon {
  background: var(--primary-light);

  transform: rotate(10deg) scale(1.08);
}

/*====================================================
                STEP NUMBER
====================================================*/

.step-no {
  display: inline-block;

  padding: 6px 14px;

  border-radius: 30px;

  background: var(--accent-light);

  color: var(--primary);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 12px;
}

/*====================================================
                    TITLE
====================================================*/

.process-item h4 {
  font-size: 24px;

  font-weight: 700;

  color: #222;

  margin-bottom: 12px;

  transition: 0.35s;
}

.process-item:hover h4 {
  color: #123f38;
}

/*====================================================
                DESCRIPTION
====================================================*/

.process-item p {
  color: #666;

  line-height: 1.8;

  margin: 0;

  font-size: 15px;
}

/*====================================================
                CONNECTOR LINE
====================================================*/

.process-item:not(:last-child)::after {
  content: "";

  position: absolute;

  left: 63px;

  bottom: -22px;

  width: 2px;

  height: 22px;

  background: rgba(18, 63, 56, 0.18);
}

/*====================================================
                ENTRANCE
====================================================*/

.process-item {
  opacity: 0;

  animation: processFade 0.7s forwards;
}

.process-item:nth-child(1) {
  animation-delay: 0.1s;
}

.process-item:nth-child(2) {
  animation-delay: 0.2s;
}

.process-item:nth-child(3) {
  animation-delay: 0.3s;
}

.process-item:nth-child(4) {
  animation-delay: 0.4s;
}

.process-item:nth-child(5) {
  animation-delay: 0.5s;
}

.process-item:nth-child(6) {
  animation-delay: 0.6s;
}

@keyframes processFade {
  from {
    opacity: 0;

    transform: translateY(40px);
  }

  to {
    opacity: 1;

    transform: translateY(0);
  }
}

/*====================================================
                HOVER DETAILS
====================================================*/

.process-item:hover .step-no {
  background: var(--primary);

  color: var(--text-light);
}

.process-item:hover p {
  color: #444;
}

.process-icon i {
  transition: 0.35s;
}

.process-item:hover .process-icon i {
  transform: scale(1.1);
}
/*====================================================
                BOTTOM STATISTICS
====================================================*/

.process-stat {
  background: rgba(255, 255, 255, 0.85);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.65);

  border-radius: 22px;

  padding: 35px 25px;

  text-align: center;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);

  transition: 0.45s;
}

.process-stat i {
  width: 68px;

  height: 68px;

  margin: 0 auto 18px;

  border-radius: 18px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--primary);

  color: var(--text-light);

  font-size: 26px;

  transition: 0.45s;
}

.process-stat h3 {
  font-size: 42px;

  font-weight: 800;

  color: var(--primary);

  margin-bottom: 8px;
}

.process-stat span {
  color: #666;

  font-size: 15px;

  font-weight: 600;
}

.process-stat:hover {
  transform: translateY(-12px);

  background: var(--primary);

  box-shadow: 0 30px 70px rgba(18, 63, 56, 0.2);
}

.process-stat:hover i {
  background: var(--color-card);

  color: var(--primary);

  transform: rotate(10deg) scale(1.08);
}

.process-stat:hover h3,
.process-stat:hover span {
  color: #fff;
}

/*====================================================
                FLOATING EFFECT
====================================================*/

.process-showcase {
  animation: floatImage 6s ease-in-out infinite;
}

@keyframes floatImage {
  0% {
    transform: translateY(0);
  }

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

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

/*====================================================
                SHINE EFFECT
====================================================*/

.process-showcase::before {
  content: "";

  position: absolute;

  top: 0;

  left: -120%;

  width: 60%;

  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.18),
    transparent
  );

  transform: skewX(-25deg);

  transition: 1.2s;

  z-index: 2;
}

.process-showcase:hover::before {
  left: 150%;
}

/*==================================================
        ENGINEERING PROCESS RESPONSIVE
==================================================*/

@media (max-width:1200px){

.process-showcase{

    min-height:820px;
    height:auto;

}

.process-overlay{

    padding:28px;

}

.overlay-feature-card{

    max-width:100%;

}

.overlay-feature-card:nth-child(2),
.overlay-feature-card:nth-child(4){

    margin-left:0;

}

}

/*==========================
TABLET
==========================*/

@media (max-width:991px){

.process-section{

    padding:70px 0;

}

.process-header{

    margin-bottom:50px;

}

.process-heading{

    font-size:38px;

}

.process-showcase{

    min-height:auto;
    height:760px;

}

.process-overlay{

    padding:24px;

}

.process-overlay h3{

    font-size:28px;

}

.process-overlay p{

    max-width:100%;
    margin-bottom:20px;

}

.overlay-services{

    grid-template-columns:1fr;
    gap:12px;

}

.overlay-feature-card{

    width:100%;
    max-width:100%;

}

.overlay-feature-card:nth-child(2),
.overlay-feature-card:nth-child(4){

    margin-left:0;

}

.overlay-features{

    gap:14px;

}

.overlay-bottom{

    margin-top:20px;

}

.process-item{

    align-items:flex-start;
    text-align:left;
    gap:18px;

}

.process-stat{

    margin-top:20px;

}

}

/*==========================
MOBILE
==========================*/

@media (max-width:767px){

.process-section{

    padding:55px 0;

}

.process-heading{

    font-size:30px;

}

.process-showcase{

    height:auto;
    min-height:1040px;
    overflow:hidden;

}

.process-overlay{

    position:absolute;
    inset:0;
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:14px;
    overflow-y:auto;

}

.process-overlay h3{

    font-size:22px;

}

.process-overlay p{

    font-size:14px;

}

.overlay-services{

    display:grid;
    grid-template-columns:1fr;

}

.overlay-feature-card{

    padding:14px;
    gap:12px;
    max-width:100%;

}

.overlay-feature-card i{

    width:42px;
    height:42px;
    font-size:17px;

}

.overlay-feature-card strong{

    font-size:15px;

}

.overlay-feature-card span{

    font-size:12px;

}

.overlay-feature-card:nth-child(2),
.overlay-feature-card:nth-child(4){

    margin-left:0;

}

.overlay-stats{

    padding:14px;

}

.overlay-stats strong{

    font-size:24px;

}

.process-item{

    flex-direction:row;
    align-items:flex-start;
    text-align:left;

}

.step-no{

    margin-bottom:0;

}

.process-stat{

    padding:22px;

}

}

/*====================================================
            SMOOTH TRANSITIONS
====================================================*/

.process-item,
.process-stat,
.process-showcase,
.overlay-services div,
.process-icon,
.process-stat i {
  will-change: transform;
}
.overlay-feature-card {
  display: flex;

  align-items: center;

  gap: 16px;

  padding: 12px 16px;
  min-height: 68px;

  background: rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(16px);

  border: 1px solid rgba(255, 255, 255, 0.18);

  border-radius: 18px;

  transition: 0.35s;

  max-width: 320px;
}

.overlay-feature-card:hover {
  transform: translateX(8px);

  background: rgba(255, 255, 255, 0.18);
}

.overlay-feature-card:nth-child(2) {
  margin-left: 18px;
}

.overlay-feature-card:nth-child(4) {
  margin-left: 18px;
}

.overlay-feature-card i {
  width: 42px;

  height: 42px;

  border-radius: 14px;

  background: #fff;

  color: #123f38;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;
}

.overlay-feature-card strong {
  display: block;

  color: #fff;

  font-size: 15px;

  font-weight: 700;

  margin-bottom: 4px;
}

.overlay-feature-card span {
  display: block;

  color: #ddd;

  font-size: 12px;

  line-height: 1.5;
}
.overlay-features {
  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 18px;
}
.overlay-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/*====================================================
            FEATURED PROJECT
====================================================*/

.featured-project-section {
  padding: var(--section-padding);
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

/* Decorative Shapes */

.featured-project-section::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  background: rgba(18, 63, 56, 0.03);
  border-radius: 50%;
  top: -180px;
  left: -150px;
}

.featured-project-section::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  background: rgba(241, 233, 210, 0.18);
  border-radius: 50%;
  bottom: -120px;
  right: -120px;
}

/*======================================
            IMAGE
======================================*/

.featured-project-image {
  position: relative;

  overflow: hidden;

  border-radius: 22px;

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);

  transition: 0.45s;

  cursor: pointer;

  animation: fadeLeft 0.9s ease;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: #f4f7f5;
}

.featured-project-image img {
  width: 100%;

  height: 100%;

  min-height: 520px;

  object-fit: cover;

  object-position: center;

  display: block;

  background: #f4f7f5;

  transition: 0.8s;
}

.featured-project-image:hover img {
  transform: none;
}

/*======================================
            AWARDED BADGE
======================================*/

.project-status {
  position: absolute;
  top: 30px;
  left: 30px;
}

.project-status span {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px 24px;

  border-radius: 50px;

  color: #fff;

  background: rgba(18, 63, 56, 0.88);

  backdrop-filter: blur(14px);

  font-weight: 600;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.project-status i {
  color: #ffd54f;

  font-size: 18px;
}

/*======================================
            RIGHT CONTENT
======================================*/

.project-tag {
  display: inline-block;

  padding: 10px 22px;

  background: #f1e9d2;

  color: #123f38;

  border-radius: 40px;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 22px;
}

.project-heading {
  font-size: 42px;

  line-height: 1.2;

  font-weight: 800;

  color: #1d1d1d;

  margin-bottom: 18px;
}

.project-description {
  color: #666;

  font-size: 16px;

  line-height: 1.75;

  margin-bottom: 28px;
}

/*======================================
            SERVICES
======================================*/

.project-services {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px 20px;

  margin-bottom: 28px;
}

.project-service {
  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 15px;

  font-weight: 600;

  color: #333;
  position: relative;

  padding-left: 5px;
}

.project-service i {
  color: #1f8f63;

  font-size: 17px;
  transition: 0.35s;
}

/*======================================
            INFO BOXES
======================================*/

.project-info {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 15px;

  margin-bottom: 28px;
}

.info-box {
  background: #fff;

  border-radius: 16px;

  padding: 16px 18px;

  border-left: 4px solid var(--primary);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

  transition: 0.35s;
}

.info-box:hover {
  transform: translateY(-8px);

  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
}

.info-box small {
  display: block;

  font-size: 11px;

  color: #888;

  margin-bottom: 6px;

  letter-spacing: 1.2px;

  text-transform: uppercase;
}

.info-box strong {
  font-size: 18px;

  color: #123f38;

  font-weight: 700;
}

/*======================================
            BUTTON
======================================*/

.project-btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 16px 34px;

  border-radius: 10px;

  background: #123f38;

  color: #fff;

  text-decoration: none;

  font-size: 15px;

  font-weight: 700;

  transition: 0.35s;
  position: relative;

  overflow: hidden;
}

.project-btn:hover {
  background: #0d312d;

  color: #fff;

  transform: translateY(-4px);

  box-shadow: 0 18px 40px rgba(18, 63, 56, 0.3);
}

.project-btn i {
  transition: 0.35s;
}

.project-btn:hover i {
  transform: translateX(6px);
}
/*======================================
        PROJECT BOTTOM
======================================*/

.project-bottom {
  display: flex;

  align-items: stretch;

  gap: 16px;

  margin-top: 15px;
  flex-wrap: wrap;
  width: 100%;
}

.project-bottom .info-box {
  flex: 1;

  margin: 0;
}

.project-bottom .project-btn {
  flex: 1 1 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0;

  min-height: 74px;
  align-self: flex-start;
}

.project-bottom .info-box strong {
  display: flex;

  align-items: center;

  gap: 8px;
}

.project-bottom .info-box strong i {
  color: #0d8d63;

  font-size: 16px;
}
/*====================================================
        FEATURED PROJECT RESPONSIVE
====================================================*/

@media (max-width: 1200px) {
  .project-heading {
    font-size: 44px;
  }

  .featured-project-image img {
    height: 380px;
  }
}

@media (max-width: 991px) {
  .featured-project-section {
    padding: var(--section-padding);
  }
  .project-content {
    height: auto;
  }
  .project-heading {
    font-size: 38px;
  }

  .featured-project-image img {
    height: 360px;
  }

  .project-services {
    grid-template-columns: 1fr;
  }
  .project-bottom {
    flex-direction: column;
  }
  .project-info {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .featured-project-section {
    padding: var(--section-padding);
  }
  .project-content {
    height: auto;
  }
  .project-heading {
    font-size: 30px;
  }

  .project-description {
    font-size: 16px;
  }

  .featured-project-image img {
    height: 280px;
    object-fit: cover;
  }

  .project-status {
    top: 15px;
    left: 15px;
  }

  .project-status span {
    padding: 10px 18px;
    font-size: 13px;
  }

  .project-btn {
    width: 100%;
    justify-content: center;
  }
}
/*======================================
        IMAGE OVERLAY
======================================*/

.project-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    to top,
    rgba(8, 30, 27, 0.82),
    rgba(8, 30, 27, 0.08)
  );

  opacity: 0;

  transition: 0.45s;

  display: flex;

  align-items: flex-end;

  padding: 35px;
}

.featured-project-image:hover .project-overlay {
  opacity: 1;
}

.overlay-content {
  color: #fff;

  transform: translateY(30px);

  transition: 0.45s;
}

.featured-project-image:hover .overlay-content {
  transform: translateY(0);
}

.overlay-content span {
  display: inline-block;

  background: rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(10px);

  padding: 8px 18px;

  border-radius: 30px;

  font-size: 13px;

  margin-bottom: 15px;
}

.overlay-content h4 {
  font-size: 28px;

  font-weight: 700;

  margin: 0;
}
/*====================================================
        PREMIUM EFFECTS
====================================================*/

.featured-project-image:hover {
  transform: translateY(-8px);

  box-shadow: 0 35px 80px rgba(0, 0, 0, 0.18);
}

.project-service:hover {
  padding-left: 12px;

  color: #123f38;
}

.project-service:hover i {
  transform: scale(1.2);

  color: #0d8d63;
}

.project-status {
  animation: floatProject 5s ease-in-out infinite;

  z-index: 5;
}

@keyframes floatProject {
  0% {
    transform: translateY(0);
  }

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

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

.project-btn::before {
  content: "";

  position: absolute;

  left: -120%;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.18);

  transform: skewX(-30deg);

  transition: 0.8s;
}

.project-btn:hover::before {
  left: 120%;
}
/*====================================================
        SCROLL ANIMATION
====================================================*/
@keyframes fadeLeft {
  from {
    opacity: 0;

    transform: translateX(-80px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;

    transform: translateX(80px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}
/*======================================
        CONTENT HEIGHT MATCH
======================================*/

.project-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  min-height: auto;
  height: auto;

  animation: fadeRight 1s ease;
}
/*====================================================
                PREMIUM FAQ SECTION
====================================================*/

.faq-section {
  position: relative;
  padding: var(--section-padding);
  overflow: hidden;
  z-index: 1;
}

/* Decorative Background */

.faq-section::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(18, 63, 56, 0.05);
  top: -180px;
  left: -180px;
  z-index: -1;
}

.faq-section::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(241, 233, 210, 0.35);
  right: -100px;
  bottom: -100px;
  z-index: -1;
}

/*==================================
            SECTION TITLE
==================================*/

.faq-tag {
  display: inline-block;

  padding: 10px 24px;

  border-radius: 50px;

  background: #f1e9d2;

  color: #123f38;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 20px;
}

.faq-heading {
  font-size: 54px;

  font-weight: 800;

  color: #1c1c1c;

  line-height: 1.15;

  margin-bottom: 22px;
}

.faq-description {
  color: #666;

  font-size: 17px;

  line-height: 1.9;
}

/*==================================
            IMAGE
==================================*/

.faq-image-wrapper {
  position: relative;
}

.faq-image {
  width: 100%;

  height: 670px;

  object-fit: cover;

  border-radius: 30px;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);

  transition: 0.7s;
}

.faq-image-wrapper:hover .faq-image {
  transform: scale(1.05);
}

/*==================================
        FLOATING CARD
==================================*/

.faq-floating-card {
  position: absolute;

  left: 35px;

  bottom: 35px;

  width: 280px;

  background: rgba(18, 63, 56, 0.88);

  backdrop-filter: blur(15px);

  color: #fff;

  border-radius: 24px;

  padding: 28px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.faq-mini-title {
  display: inline-block;

  color: var(--accent-light);

  font-size: 12px;

  letter-spacing: 2px;

  font-weight: 700;

  margin-bottom: 10px;
}

.faq-floating-card h2 {
  font-size: 56px;

  font-weight: 800;

  margin-bottom: 8px;
}

.faq-floating-card p {
  color: #f2f2f2;

  margin-bottom: 18px;
}

.faq-floating-card ul {
  list-style: none;

  padding: 0;

  margin: 0;
}

.faq-floating-card li {
  margin-bottom: 12px;

  font-size: 15px;
}

.faq-floating-card i {
  color: #8ce99a;

  margin-right: 10px;
}

/*==================================
            ACCORDION
==================================*/

.custom-faq .accordion-item {
  border: none;

  border-radius: 18px !important;

  overflow: hidden;

  margin-bottom: 18px;

  background: rgba(255, 255, 255, 0.82);

  backdrop-filter: blur(10px);

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);

  transition: 0.35s;
}

.custom-faq .accordion-item:hover {
  transform: translateX(8px);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

.custom-faq .accordion-button {
  padding: 28px;

  font-size: 20px;

  font-weight: 700;

  color: #222;

  background: transparent;

  box-shadow: none;
}

.custom-faq .accordion-button:focus {
  box-shadow: none;
}

.custom-faq .accordion-button:not(.collapsed) {
  background: #123f38;

  color: #fff;
}

.custom-faq .accordion-body {
  padding: 26px 30px;

  color: #666;

  line-height: 1.9;

  font-size: 16px;
}

/*==================================
        CUSTOM PLUS ICON
==================================*/

.custom-faq .accordion-button::after {
  background-image: none;

  content: "+";

  width: 38px;

  height: 38px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 26px;

  font-weight: 300;

  color: #123f38;

  background: #f1e9d2;

  transform: none;
}

.custom-faq .accordion-button:not(.collapsed)::after {
  content: "−";

  color: #fff;

  background: rgba(255, 255, 255, 0.18);
}

/*==================================
        RESPONSIVE
==================================*/

@media (max-width: 1200px) {
  .faq-heading {
    font-size: 46px;
  }
}

@media (max-width: 991px) {
  .faq-section {
    padding: var(--section-padding);
  }

  .faq-image {
    height: 500px;
  }

  .faq-floating-card {
    left: 20px;

    bottom: 20px;

    width: 230px;

    padding: 24px;
  }

  .faq-heading {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .faq-section {
    padding: var(--section-padding);
  }

  .faq-heading {
    font-size: 32px;
  }

  .faq-description {
    font-size: 16px;
  }

  .faq-image {
    height: 340px;
  }

  .faq-floating-card {
    position: relative;

    left: 0;

    bottom: 0;

    margin-top: 20px;

    width: 100%;
  }

  .custom-faq .accordion-button {
    padding: 22px;

    font-size: 17px;
  }

  .custom-faq .accordion-body {
    padding: 22px;

    font-size: 15px;
  }
}
/*====================================================
            FAQ PREMIUM ANIMATIONS
====================================================*/

/* Floating Image */

.faq-image {
  animation: faqImageFloat 8s ease-in-out infinite;
}

/* Floating Card */

.faq-floating-card {
  animation: faqCardGlow 5s ease-in-out infinite;
}

/* Accordion Hover */

.custom-faq .accordion-item {
  transform-origin: center;
}

.custom-faq .accordion-item:hover {
  transform: translateX(8px) scale(1.01);
}

/* Smooth Icon */

.custom-faq .accordion-button::after {
  transition: 0.35s;
}

.custom-faq .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}

/* Image Shine */

.faq-image-wrapper {
  overflow: hidden;

  border-radius: 30px;

  position: relative;
}

.faq-image-wrapper::before {
  content: "";

  position: absolute;

  top: 0;

  left: -150%;

  width: 70%;

  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );

  transform: skewX(-20deg);

  transition: 1.1s;

  z-index: 2;
}

.faq-image-wrapper:hover::before {
  left: 170%;
}

/*====================================
            KEYFRAMES
====================================*/

@keyframes faqImageFloat {
  0% {
    transform: translateY(0);
  }

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

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

@keyframes faqCardGlow {
  0% {
    box-shadow: 0 20px 45px rgba(18, 63, 56, 0.25);
  }

  50% {
    box-shadow: 0 30px 70px rgba(18, 63, 56, 0.45);
  }

  100% {
    box-shadow: 0 20px 45px rgba(18, 63, 56, 0.25);
  }
}
.faq-image-wrapper::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    to top,
    rgba(18, 63, 56, 0.35),
    rgba(18, 63, 56, 0.05)
  );

  border-radius: 30px;
}
/*====================================================
            PREMIUM CONTACT SECTION
====================================================*/

.cta-section {
  position: relative;
  padding: var(--section-padding);
  overflow: hidden;
  z-index: 1;
}

/* Decorative Background */

.cta-section::before {
  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  border-radius: 50%;

  background: rgba(18, 63, 56, 0.05);

  left: -180px;

  top: -180px;

  z-index: -1;
}

.cta-section::after {
  content: "";

  position: absolute;

  width: 300px;

  height: 300px;

  border-radius: 50%;

  background: rgba(241, 233, 210, 0.35);

  right: -120px;

  bottom: -120px;

  z-index: -1;
}

/*==================================
        SECTION TITLE
==================================*/

.cta-tag {
  display: inline-block;

  padding: 10px 24px;

  border-radius: 40px;

  background: #f1e9d2;

  color: #123f38;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 20px;
}

.cta-heading {
  font-size: 56px;

  font-weight: 800;

  line-height: 1.15;

  color: #1b1b1b;

  margin-bottom: 25px;
}

.cta-description {
  max-width: 780px;

  margin: auto;

  color: #666;

  font-size: 17px;

  line-height: 1.9;
}

/*==================================
        LEFT PANEL
==================================*/

.cta-content {
  background: rgba(255, 255, 255, 0.55);

  backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.35);

  border-radius: 30px;

  padding: 50px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);

  transition: 0.4s;
}

.cta-content:hover {
  transform: translateY(-8px);

  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
}

.cta-content h3 {
  font-size: 38px;

  font-weight: 800;

  line-height: 1.25;

  color: #123f38;

  margin-bottom: 22px;
}

.cta-content p {
  color: #666;

  line-height: 1.9;

  margin-bottom: 35px;
}

/*==================================
        STATISTICS
==================================*/

.cta-stats {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

  margin-bottom: 35px;
}

.stat-box {
  background: #fff;

  border-radius: 18px;

  text-align: center;

  padding: 25px 15px;

  transition: 0.35s;

  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
}

.stat-box:hover {
  transform: translateY(-8px);
}

.stat-box h2 {
  font-size: 40px;

  color: #123f38;

  font-weight: 800;

  margin-bottom: 8px;
}

.stat-box span {
  font-size: 14px;

  color: #666;
}

/*==================================
        FEATURES
==================================*/

.cta-features {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;
}

.cta-features div {
  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 600;

  color: #333;
}

.cta-features i {
  color: #123f38;

  font-size: 18px;
}

/*==================================
        CONTACT CARD
==================================*/

.cta-contact-card {
  background: rgba(255, 255, 255, 0.7);

  backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.35);

  border-radius: 30px;

  padding: 45px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);

  transition: 0.4s;
}

.cta-contact-card:hover {
  transform: translateY(-8px);
}

.cta-contact-card h3 {
  font-size: 34px;

  font-weight: 800;

  color: #123f38;
}

.cta-contact-card > p {
  color: #666;

  margin-bottom: 35px;
}

/*==================================
        CONTACT ITEMS
==================================*/

.contact-item {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 28px;
}

.contact-icon {
  width: 62px;

  height: 62px;

  border-radius: 18px;

  background: #123f38;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  flex-shrink: 0;
}

.contact-item small {
  display: block;

  color: #888;

  margin-bottom: 5px;
}

.contact-item h5 {
  margin: 0;

  font-size: 20px;

  font-weight: 700;

  color: #222;
}

/*==================================
        BUTTON
==================================*/

.cta-main-btn {
  display: block;

  width: 100%;

  text-align: center;

  padding: 18px;

  margin-top: 20px;

  border-radius: 12px;

  background: #123f38;

  color: #fff;

  text-decoration: none;

  font-weight: 700;

  transition: 0.35s;
}

.cta-main-btn:hover {
  background: #0b2d28;

  color: #fff;

  transform: translateY(-3px);
}

/*==================================
        RESPONSIVE
==================================*/

@media (max-width: 991px) {
  .cta-section {
    padding: var(--section-padding);
  }

  .cta-heading {
    font-size: 42px;
  }

  .cta-content {
    padding: 35px;

    margin-bottom: 30px;
  }

  .cta-stats {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 767px) {
  .cta-heading {
    font-size: 32px;
  }

  .cta-content {
    padding: 28px;
  }

  .cta-contact-card {
    padding: 28px;
  }

  .contact-item h5 {
    font-size: 17px;
  }
}
/*====================================================
        CONTACT PREMIUM ANIMATIONS
====================================================*/

/* Floating Animation */

@keyframes floatCard {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0px);
  }
}

.cta-content {
  animation: floatCard 7s ease-in-out infinite;
}

.cta-contact-card {
  animation: floatCard 8s ease-in-out infinite;
}

/*==============================
        SHINE EFFECT
==============================*/

.cta-content,
.cta-contact-card {
  position: relative;

  overflow: hidden;
}

.cta-content::before,
.cta-contact-card::before {
  content: "";

  position: absolute;

  top: 0;

  left: -130%;

  width: 60%;

  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );

  transition: 1s;
}

.cta-content:hover::before,
.cta-contact-card:hover::before {
  left: 140%;
}

/*==============================
        ICON HOVER
==============================*/

.contact-icon {
  transition: 0.45s;
}

.contact-item:hover .contact-icon {
  transform: rotate(-10deg) scale(1.1);

  background: #f1e9d2;

  color: #123f38;
}

/*==============================
        STAT BOX
==============================*/

.stat-box {
  transition: 0.4s;
}

.stat-box:hover {
  background: #123f38;

  color: #fff;
}

.stat-box:hover h2 {
  color: #fff;
}

.stat-box:hover span {
  color: #f4f4f4;
}

/*==============================
        BUTTON
==============================*/

.cta-main-btn {
  position: relative;

  overflow: hidden;
}

.cta-main-btn::before {
  content: "";

  position: absolute;

  left: -120%;

  top: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );

  transition: 0.8s;
}

.cta-main-btn:hover::before {
  left: 130%;
}

/*==============================
      SCROLL ANIMATION
==============================*/

.fade-up {
  opacity: 0;

  transform: translateY(60px);

  transition: all 0.8s ease;
}

.fade-up.show {
  opacity: 1;

  transform: translateY(0);
}
/*====================================================
                    FOOTER
====================================================*/

.footer {
  background: var(--color-footer);
  color: var(--text-light);
  padding-top: 50px;
}

.footer-top {
  padding-bottom: 30px;
}

.footer-logo {
  width: 220px;
  max-width: 100%;
  background: var(--accent-light);
  padding: 12px;
  border-radius: 15px;
  margin-bottom: 25px;
}

.footer-text {
  color: rgba(255,255,255,.82);
  line-height: 1.9;
  margin-bottom: 30px;
  font-size: 15px;
}

/*==============================
        SOCIAL
==============================*/

.footer-social {
  display: flex;
  gap: 15px;
}

.footer-social a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
  text-decoration: none;
  transition: 0.35s;
}

.footer-social a:hover {
  background: var(--accent-gold);
  color: var(--primary);
  transform: translateY(-5px);
}

/*==============================
          TITLES
==============================*/

.footer h4 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 30px;
  position: relative;
}

.footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 45px;
  height: 3px;
  background: var(--accent-gold);
}

/*==============================
          LINKS
==============================*/

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

.footer ul li a {
  color: rgba(255,255,255,.82);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer ul li a:hover {
  color: var(--accent-gold);
  padding-left: 8px;
}

/*==============================
          CONTACT
==============================*/

.footer-contact {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 22px;
  color: #d8d8d8;
}

.footer-contact i {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
}

.footer-contact span {
  line-height: 1.7;
}

/*==============================
        COPYRIGHT
==============================*/

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 28px 0;
  color: #bdbdbd;
  font-size: 15px;
}

.footer-bottom a {
  color: #bdbdbd;
  text-decoration: none;
  margin: 0 10px;
  transition: 0.3s;
}

.footer-bottom a:hover {
  color: var(--text-light);
}

/*==============================
        RESPONSIVE
==============================*/

@media (max-width: 991px) {
  .footer {
    padding-top: 70px;
  }

  .footer-top {
    padding-bottom: 50px;
  }
}
@media (max-width: 767px) {
  .footer {
    text-align: left;
  }

  .footer-logo {
    width: 180px;
  }

  .footer h4 {
    margin-top: 20px;
  }

  .footer-social {
    justify-content: flex-start;
  }

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

  .footer-bottom .text-md-end {
    text-align: center !important;
    margin-top: 15px;
  }
}
.footer-follow {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

/*==============================
   ENERGY CONNECTIONS ANIMATIONS
==============================*/

@keyframes dashMove{
    from{
        stroke-dashoffset:0;
    }
    to{
        stroke-dashoffset:-150;
    }
}

@keyframes flowMove{
    from{
        transform:translateX(-30px);
    }
    to{
        transform:translateX(30px);
    }
}

@keyframes thermalPulse{
    0%,100%{
        opacity:.35;
        transform:scale(.98);
    }
    50%{
        opacity:.65;
        transform:scale(1.04);
    }
}

@keyframes hvacRotate{
    0%,100%{
        transform:rotate(0deg);
    }
    50%{
        transform:rotate(3deg);
    }
}

@keyframes particlesMove{
    from{
        background-position:0 0;
    }
    to{
        background-position:0 300px;
    }
}

@keyframes chipPulse{
    0%{
        transform:scale(.9);
        opacity:.8;
    }
    50%{
        transform:scale(1.3);
        opacity:1;
    }
    100%{
        transform:scale(.9);
        opacity:.8;
    }
}

@keyframes borderRotate{
    from{
        filter:hue-rotate(0deg);
    }
    to{
        filter:hue-rotate(360deg);
    }
}

@keyframes orbFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-25px);
    }
}

@keyframes gridMove{
    from{
        background-position:0 0;
    }
    to{
        background-position:50px 50px;
    }
}