*{
     margin:0;
     padding:0;
     box-sizing:border-box;
}
 :root{
     --green:#249b36;
     --green-dark:#13752a;
     --green-light:#edf8ee;
     --blue:#07579c;
     --blue-dark:#072c4c;
     --yellow:#ffc21c;
     --dark:#102334;
     --text:#586571;
     --light:#f6f9fb;
     --white:#ffffff;
     --border:#e5ebef;
     --shadow:0 10px 35px rgba(20,47,69,.09);
}
 html{
     scroll-behavior:smooth;
}
 body{
     font-family:"Inter",sans-serif;
     color:var(--dark);
     background:#fff;
     line-height:1.6;
}
 a{
     text-decoration:none;
     color:inherit;
}
 .container{
     max-width:1240px;
     margin:auto;
     overflow: hidden;
}
 .simon-topbar {
     background: var(--blue-dark);
     color: var(--white);
     border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
 .simon-topbar-inner {
     min-height: 42px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
}
/* LEFT MESSAGE */
 .simon-topbar-message {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #fff;
     font-size: 13px;
     font-weight: 500;
}
 .simon-topbar-message i {
     color: #5bd467;
     margin-top: 4px;
     font-size: 13px;
}
 .simon-topbar-contact {
     display: flex;
     align-items: center;
     gap: 24px;
}
 .simon-topbar-contact a {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     color: #fff;
     text-decoration: none;
     font-size: 13px;
     font-weight: 500;
     transition: 0.3s ease;
}
 .simon-topbar-contact a i {
     color: var(--green);
     margin-top: 4px;
     font-size: 13px;
}
 .simon-topbar-contact a:hover {
     color: var(--white);
}
 .simon-topbar-contact a:hover i {
     color: #5bd467;
}
 @media(max-width:991px){
     .simon-topbar{
         display: none;
    }
}
/* ========================================= HEADER ========================================= */
 .header {
     background: var(--white);
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
 .navbar {
     min-height: 82px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 25px;
}
/* ========================================= LOGO ========================================= */
 .logo {
     display: flex;
     align-items: center;
     flex-shrink: 0;
}
 .logo img {
     display: block;
     height: 80px;
     width: auto;
}
/* ========================================= DESKTOP NAV ========================================= */
 .main-nav {
     display: flex;
     align-items: center;
     gap: 24px;
}
 .main-nav > a {
     position: relative;
     color: var(--dark);
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: 0.3s ease;
}
 .main-nav > a:hover, .main-nav > a.active {
     color: var(--green);
}
/* Active underline */
 .main-nav > a:not(.btn)::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -7px;
     width: 0;
     height: 2px;
     background: var(--green);
     transition: 0.3s ease;
}
 .main-nav > a:not(.btn):hover::after, .main-nav > a.active::after {
     width: 100%;
}
/* ========================================= QUOTE BUTTON ========================================= */
 .main-nav .btn-small {
     padding: 11px 18px;
     background: var(--green);
     color: var(--white) !important;
     border-radius: 7px;
     font-size: 13px;
}
 .main-nav .btn-small:hover {
     background: var(--green-dark);
     transform: translateY(-2px);
}
 .main-nav .btn-small::after {
     display: none;
}
/* ========================================= MOBILE TOGGLE ========================================= */
 .menu-toggle {
     display: none;
     width: 44px;
     height: 44px;
     padding: 0;
     border: 1px solid var(--border);
     border-radius: 8px;
     background: var(--white);
     cursor: pointer;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     gap: 5px;
}
 .menu-toggle span {
     width: 21px;
     height: 2px;
     display: block;
     background: var(--blue-dark);
     border-radius: 5px;
     transition: 0.3s ease;
}
 .menu-toggle:hover {
     border-color: var(--green);
}
 .menu-toggle:hover span {
     background: var(--green);
}
/* ========================================= MOBILE MENU HEADER ========================================= */
 .mobile-menu-head {
     display: none;
}
 .mobile-logo img {
     height: 55px;
     width: auto;
}
 .menu-close {
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 0;
     border-radius: 8px;
     background: var(--green-light);
     color: var(--green);
     cursor: pointer;
     font-size: 17px;
     transition: 0.3s ease;
}
 .menu-close:hover {
     background: var(--green);
     color: var(--white);
}
/* ========================================= OVERLAY ========================================= */
 .menu-overlay {
     position: fixed;
     inset: 0;
     z-index: 999;
     background: rgba(7, 44, 76, 0.55);
     opacity: 0;
     visibility: hidden;
     transition: 0.35s ease;
}
 .menu-overlay.active {
     opacity: 1;
     visibility: visible;
}
/* ========================================= TABLET + MOBILE ========================================= */
 @media (max-width: 900px) {
     .navbar {
         min-height: 72px;
    }
     .logo img {
         height: 65px;
    }
    /* Hamburger */
     .menu-toggle {
         display: flex;
    }
    /* Sidebar */
     .main-nav {
         position: fixed;
         top: 0;
         left: 0;
         z-index: 1002;
         width: 310px;
         max-width: 85vw;
         height: 100vh;
         padding: 0 25px 30px;
         display: flex;
         flex-direction: column;
         align-items: stretch;
         gap: 0;
         background: var(--white);
         box-shadow: 15px 0 40px rgba(0, 0, 0, 0.12);
         transform: translateX(-105%);
         transition: transform 0.4s cubic-bezier(.77, 0, .18, 1);
         overflow-y: auto;
    }
    /* Open sidebar */
     .main-nav.active {
         transform: translateX(0);
    }
    /* Mobile menu top */
     .mobile-menu-head {
         min-height: 90px;
         display: flex;
         align-items: center;
         justify-content: space-between;
         border-bottom: 1px solid var(--border);
         margin-bottom: 12px;
    }
    /* Mobile links */
     .main-nav > a:not(.btn) {
         width: 100%;
         padding: 16px 5px;
         border-bottom: 1px solid #edf0f2;
         color: var(--dark);
         font-size: 14px;
    }
     .main-nav > a:not(.btn)::after {
         display: none;
    }
     .main-nav > a:hover, .main-nav > a.active {
         color: var(--green);
         padding-left: 10px;
    }
    /* Quote button */
     .main-nav .btn-small {
         width: 100%;
         margin-top: 22px;
         padding: 14px;
         display: flex;
         align-items: center;
         justify-content: center;
    }
}
/* ========================================= MOBILE ========================================= */
 @media (max-width: 600px) {
     .navbar {
         min-height: 68px;
    }
     .logo img {
         height: 58px;
    }
     .menu-toggle {
         width: 41px;
         height: 41px;
    }
     .main-nav {
         width: 285px;
         padding-left: 20px;
         padding-right: 20px;
    }
}
/* ========================================= SMALL MOBILE ========================================= */
 @media (max-width: 380px) {
     .logo img {
         height: 53px;
    }
     .main-nav {
         width: 270px;
    }
}
 .menu-toggle {
     display: none;
     width: 44px;
     height: 44px;
     border: 1px solid var(--border);
     border-radius: 8px;
     background: var(--white);
     color: var(--blue-dark);
     cursor: pointer;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     transition: 0.3s ease;
}
 .menu-toggle:hover {
     background: var(--green);
     border-color: var(--green);
     color: var(--white);
}
 @media (max-width: 900px) {
     .menu-toggle {
         display: flex;
    }
}
 @media (max-width: 600px) {
     .menu-toggle {
         width: 40px;
         height: 40px;
         font-size: 18px;
    }
}
 .btn-hero{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     background:linear-gradient( 135deg, #2ca83d, #16882c );
     margin-top: 20px;
     color:white;
     padding:13px 24px;
     border-radius:6px;
     font-size:14px;
     font-weight:700;
     transition:.3s;
     box-shadow: 0 8px 20px rgba(36,155,54,.2);
}
 .btn-hero i{
     margin-left: 6px;
}
 .btn-hero:hover{
     transform:translateY(-2px);
     box-shadow: 0 12px 25px rgba(36,155,54,.3);
}
 .btn-small{
     padding:11px 19px;
     white-space:nowrap;
}
 .hero {
     position: relative;
     width: 100%;
     height: 520px;
     overflow: hidden;
     isolation: isolate;
}
 .hero-slider {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
}
 .hero-slider .swiper-wrapper, .hero-slider .swiper-slide {
     width: 100%;
     height: 100%;
}
 .hero-slider .swiper-slide {
     position: relative;
     overflow: hidden;
}
 .hero-slider .swiper-slide img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: fill;
     object-position: right;
}
 .hero-overlay {
     position: absolute;
     inset: 0;
     z-index: 2;
     background: linear-gradient( 90deg, rgba(7, 44, 76, .88) 0%, rgba(7, 44, 76, .72) 30%, rgba(7, 44, 76, .40) 58%, rgba(7, 44, 76, .12) 100% );
}
 .hero-content-wrap {
     position: absolute;
     inset: 0;
     z-index: 5;
     display: flex;
     align-items: center;
}
 .hero-content-wrap .container {
     width: 100%;
     max-width: 1240px;
     margin: 0 auto;
     padding: 0 25px;
}
 .hero-content {
     width: 100%;
     max-width: 680px;
     color: var(--white);
}
 .hero-label {
     display: inline-flex;
     align-items: center;
     padding: 8px 16px;
     margin-bottom: 22px;
     border: 1px solid rgba(255,255,255,.3);
     border-radius: 50px;
     background: rgba(255,255,255,.10);
     color: var(--white);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1.3px;
}
 .hero h1 {
     margin: 0;
     color: var(--white);
     font-size: 45px;
     line-height: 1.05;
     font-weight: 800;
}
 .hero h1 span {
     display: block;
     color: var(--green);
}
 .hero h1 span:nth-child(2) {
     color: var(--white);
}
 .hero h4 {
     margin: 25px 0 15px;
     color: var(--yellow);
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1.2px;
}
 .hero-content > p {
     max-width: 600px;
     margin: 0;
     color: rgba(255,255,255,.86);
     font-size: 17px;
     line-height: 1.75;
}
 .hero-prev, .hero-next {
     position: absolute;
     top: 50%;
     z-index: 10;
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(255,255,255,.35);
     border-radius: 50%;
     background: rgba(7,44,76,.45);
     color: var(--white);
     cursor: pointer;
     transform: translateY(-50%);
     transition: .3s ease;
}
 .hero-prev {
     left: 25px;
}
 .hero-next {
     right: 25px;
}
 .hero-prev:hover, .hero-next:hover {
     background: var(--green);
     border-color: var(--green);
}
 @media (max-width: 767px) {
     .hero {
         height: 460px;
    }
     .hero-overlay {
         background: linear-gradient( 90deg, rgba(7,44,76,.88), rgba(7,44,76,.65) );
    }
     .hero-content-wrap .container {
         padding: 0 20px;
    }
     .hero-content {
         max-width: 100%;
    }
     .hero h1 {
         font-size: 28px;
    }
     .hero-content > p {
         font-size: 15px;
    }
     .hero-features {
         flex-wrap: wrap;
    }
     .hero-features > div {
         min-width: 110px;
         flex: 1;
    }
     .hero-prev, .hero-next {
         width: 38px;
         height: 38px;
    }
     .hero-prev {
         left: 12px;
    }
     .hero-next {
         right: 12px;
    }
}
 .quick-services {
     padding: 40px 0;
     background: var(--light);
}
 .service-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 25px;
}
 .service-card {
     overflow: hidden;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 6px;
     box-shadow: var(--shadow);
     transition: .35s ease;
}
 .service-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 18px 45px rgba(20,47,69,.14);
}
 .service-image {
     position: relative;
     height: 250px;
     overflow: hidden;
}
 .service-image img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     transition: .5s ease;
}
 .service-card:hover .service-image img {
     transform: scale(1.06);
}
 .service-image::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient( 180deg, rgba(7,44,76,.05), rgba(7,44,76,.45) );
}
 .service-icon {
     position: absolute;
     left: 22px;
     bottom: 20px;
     z-index: 2;
     width: 58px;
     height: 58px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 7px;
     background: var(--green);
     color: var(--white);
     font-size: 25px;
     box-shadow: 0 8px 20px rgba(36,155,54,.3);
     transition: .3s ease;
}
 .service-card:hover .service-icon {
     background: var(--blue);
     transform: translateY(-4px);
}
 .service-content {
     padding: 18px 15px 10px;
}
 .service-content > span {
     display: block;
     margin-bottom: 9px;
     color: var(--green);
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 1.2px;
}
 .service-content h3 {
     margin: 0 0 12px;
     color: var(--dark);
     font-size: 23px;
     line-height: 1.25;
}
 .service-content p {
     margin: 0 0 10px;
     color: var(--text);
     font-size: 14px;
     line-height: 1.7;
}
 .service-content a {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     color: var(--blue);
     text-decoration: none;
     font-size: 14px;
     font-weight: 700;
     transition: .3s ease;
}
 .service-content a:hover {
     color: var(--green);
     gap: 12px;
}
/* RESPONSIVE */
 @media (max-width: 991px) {
     .service-grid {
         grid-template-columns: repeat(2, 1fr);
    }
}
 @media (max-width: 650px) {
     .service-grid {
         grid-template-columns: 1fr;
    }
     .service-image {
         height: 230px;
    }
}
 .about {
     padding: 40px 0;
     background: var(--white);
}
 .about-grid {
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     align-items: center;
     gap: 40px;
}
 .section-label {
     display: inline-block;
     margin-bottom: 14px;
     color: var(--green);
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 1.4px;
}
 .about-content h2 {
     margin: 0 0 20px;
     color: var(--dark);
     font-size:28px;
     line-height: 1.1;
     font-weight: 800;
}
 .about-content h2 span {
     color: var(--blue);
}
 .about-content p {
     margin: 0 0 15px;
     color: var(--text);
     font-size: 15px;
     line-height: 1.8;
}
 .about-content .btn {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     margin-top: 12px;
     padding: 14px 23px;
     background: var(--green);
     color: var(--white);
     border-radius: 6px;
     text-decoration: none;
     font-size: 14px;
     font-weight: 700;
     transition: .3s ease;
}
 .about-content .btn:hover {
     background: var(--green-dark);
     transform: translateY(-2px);
}
 .about-gallery {
     position: relative;
     display: grid;
     grid-template-columns: 1.2fr .8fr;
     grid-template-rows: 210px 210px;
     gap: 18px;
     min-height: 438px;
}
 .gallery-box {
     position: relative;
     overflow: hidden;
     border-radius: 15px;
     box-shadow: var(--shadow);
}
 .gallery-cctv {
     grid-row: 1 / 3;
}
 .gallery-box img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     transition: transform .5s ease;
}
 .gallery-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient( 180deg, rgba(7,44,76,0) 35%, rgba(7,44,76,.85) 100% );
     z-index: 1;
}
 .gallery-content {
     position: absolute;
     left: 22px;
     right: 22px;
     bottom: 20px;
     z-index: 2;
}
 .gallery-content strong {
     color: var(--white);
     font-size: 19px;
     font-weight: 700;
}
 .gallery-box:hover img {
     transform: scale(1.07);
}
/* MOBILE */
 @media (max-width: 600px) {
     .about-gallery {
         grid-template-columns: 1fr 1fr;
         grid-template-rows: 10px;
         gap: 12px;
    }
     .gallery-cctv {
         grid-row: 1 / 3;
    }
     .gallery-content {
         left: 15px;
         right: 15px;
         bottom: 15px;
    }
     .gallery-content strong {
         font-size: 15px;
    }
}
 @media (max-width: 991px) {
     .about-grid {
         grid-template-columns: 1fr;
         gap: 15px;
    }
}
 @media (max-width: 600px) {
     .about-gallery {
         grid-template-columns: 1fr 1fr;
    }
     .gallery-cctv {
         grid-row: 1 / 3;
    }
     .gallery-box {
         padding: 17px;
    }
     .gallery-icon {
         width: 48px;
         height: 48px;
         font-size: 20px;
    }
     .gallery-box strong {
         font-size: 15px;
    }
}
 .stats {
     position: relative;
     padding: 30px 0;
     background: linear-gradient( 135deg, var(--blue-dark), var(--blue) );
     overflow: hidden;
}
/* Decorative circles */
 .stats::before {
     content: "";
     position: absolute;
     width: 280px;
     height: 280px;
     left: -130px;
     top: -150px;
     border-radius: 50%;
     background: var(--green);
     opacity: .15;
}
 .stats::after {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     right: -150px;
     bottom: -180px;
     border-radius: 50%;
     background: var(--yellow);
     opacity: .12;
}
/* GRID */
 .stats-grid {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
}
/* STAT */
 .stat {
     position: relative;
     display: flex;
     align-items: center;
     gap: 17px;
     min-height: 105px;
     padding: 18px 20px;
     border-radius: 12px;
     background: rgba(255,255,255,.10);
     border: 1px solid rgba(255,255,255,.18);
     backdrop-filter: blur(8px);
     transition: .35s ease;
}
 .stat:hover {
     transform: scale(1.01);
     background: rgba(255,255,255,.16);
     box-shadow: 0 15px 35px rgba(0,0,0,.15);
}
/* ICON */
 .stat-icon {
     flex-shrink: 0;
     width: 58px;
     height: 58px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     color: var(--white);
     font-size: 23px;
}
/* DIFFERENT COLORS */
 .stat-green .stat-icon {
     background: var(--green);
     box-shadow: 0 8px 20px rgba(36,155,54,.3);
}
 .stat-blue .stat-icon {
     background: var(--blue);
     box-shadow: 0 8px 20px rgba(7,87,156,.3);
}
 .stat-yellow .stat-icon {
     background: var(--yellow);
     color: var(--dark);
     box-shadow: 0 8px 20px rgba(255,194,28,.3);
}
 .stat-dark .stat-icon {
     background: var(--green-dark);
     box-shadow: 0 8px 20px rgba(19,117,42,.3);
}
/* NUMBER */
 .stat strong {
     display: block;
     color: var(--white);
     font-size: 30px;
     line-height: 1;
     font-weight: 800;
}
 .stat p {
     margin: 7px 0 0;
     color: rgba(255,255,255,.72);
     font-size: 13px;
     font-weight: 500;
}
 @media (max-width: 991px) {
     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
    }
}
 @media (max-width: 575px) {
     .stats-grid {
         grid-template-columns: 1fr;
         gap: 12px;
    }
     .stat {
         min-height: 90px;
    }
     .stat-icon {
         width: 50px;
         height: 50px;
         font-size: 20px;
    }
     .stat strong {
         font-size: 26px;
    }
}
 .services-section {
     padding: 40px 0;
     background: var(--light);
}
 .section-heading {
     text-align: center;
     margin-bottom: 25px;
}
 .section-heading h2 {
     margin: 8px 0 12px;
     color: var(--dark);
     font-size: 32px;
     line-height: 1.2;
     font-weight: 800;
}
 .section-heading .section-label{
     margin-bottom: 0px;
}
 .section-heading p {
     max-width: 650px;
     margin: 0 auto;
     color: var(--text);
     font-size: 15px;
     line-height: 1.7;
}
 .service-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
}
 .service-row {
     position: relative;
     display: grid;
     grid-template-columns: 65px 85px minmax(0, 1fr) 60px;
     align-items: center;
     gap: 15px;
     padding: 10px 15px;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 10px;
     overflow: hidden;
     transition: .35s ease;
}
 .service-row::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 5px;
     transition: .35s ease;
}
 .service-row-cctv::before {
     background: var(--blue);
}
 .service-row-solar::before {
     background: var(--green);
}
 .service-row-light::before {
     background: var(--yellow);
}
 .service-row:hover {
     transform: translateX(7px);
     box-shadow: 0 15px 40px rgba(20,47,69,.10);
}
/* NUMBER */
 .service-number {
     color: #cbd4da;
     font-size: 32px;
     font-weight: 800;
}
/* ICON */
 .service-row-icon {
     width: 70px;
     height: 70px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 15px;
     font-size: 28px;
     transition: .35s ease;
}
 .service-row-cctv .service-row-icon {
     background: #edf5fc;
     color: var(--blue);
}
 .service-row-solar .service-row-icon {
     background: var(--green-light);
     color: var(--green);
}
 .service-row-light .service-row-icon {
     background: #fff8df;
     color: #d99b00;
}
 .service-row:hover .service-row-icon {
     color: var(--white);
}
 .service-row-cctv:hover .service-row-icon {
     background: var(--blue);
}
 .service-row-solar:hover .service-row-icon {
     background: var(--green);
}
 .service-row-light:hover .service-row-icon {
     background: var(--yellow);
}
/* CONTENT */
 .service-row-content > span {
     display: block;
     margin-bottom: 7px;
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 1.2px;
}
 .service-row-cctv .service-row-content > span {
     color: var(--blue);
}
 .service-row-solar .service-row-content > span {
     color: var(--green);
}
 .service-row-light .service-row-content > span {
     color: #d99b00;
}
 .service-row-content h3 {
     margin: 0 0 9px;
     color: var(--dark);
     font-size: 24px;
     font-weight: 750;
}
 .service-row-content p {
     max-width: 720px;
     margin: 0 0 13px;
     color: var(--text);
     font-size: 14px;
     line-height: 1.65;
}
/* FEATURES */
 .service-row-content ul {
     display: flex;
     flex-wrap: wrap;
     gap: 7px 20px;
     margin: 0;
     padding: 0;
     list-style: none;
}
 .service-row-content li {
     position: relative;
     padding-left: 16px;
     color: var(--text);
     font-size: 12px;
}
 .service-row-content li::before {
     content: "";
     position: absolute;
     left: 0;
     top: 7px;
     width: 6px;
     height: 6px;
     border-radius: 50%;
}
 .service-row-cctv li::before {
     background: var(--blue);
}
 .service-row-solar li::before {
     background: var(--green);
}
 .service-row-light li::before {
     background: var(--yellow);
}
/* ARROW */
 .service-arrow {
     width: 52px;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: var(--light);
     color: var(--dark);
     text-decoration: none;
     font-size: 16px;
     transition: .35s ease;
}
 .service-row-cctv:hover .service-arrow {
     background: var(--blue);
     color: var(--white);
}
 .service-row-solar:hover .service-arrow {
     background: var(--green);
     color: var(--white);
}
 .service-row-light:hover .service-arrow {
     background: var(--yellow);
     color: var(--dark);
}
/* TABLET */
 @media (max-width: 900px) {
     .section-heading {
         align-items: flex-start;
         flex-direction: column;
         gap: 15px;
    }
     .service-row {
         grid-template-columns: 55px 70px minmax(0, 1fr) 50px;
         gap: 18px;
    }
     .service-row-icon {
         width: 60px;
         height: 60px;
    }
}
/* MOBILE */
 @media (max-width: 650px) {
     .service-row {
         grid-template-columns: 50px 1fr 45px;
         gap: 15px;
    }
     .service-number {
         font-size: 24px;
    }
     .service-row-icon {
         width: 55px;
         height: 55px;
         grid-column: 2;
         grid-row: 1;
    }
     .service-row-content {
         grid-column: 1 / -1;
         grid-row: 2;
    }
     .service-arrow {
         width: 45px;
         height: 45px;
         grid-column: 3;
         grid-row: 1;
    }
     .service-row-content h3 {
         font-size: 20px;
    }
     .service-row-content ul {
         gap: 6px 15px;
    }
}
 .why-us {
     position: relative;
     padding: 40px 0;
     background: linear-gradient( 135deg, var(--blue-dark) 0%, var(--blue) 55%, var(--green-dark) 100% );
     overflow: hidden;
}
/* DECORATION */
 .why-us::before {
     content: "";
     position: absolute;
     width: 450px;
     height: 450px;
     left: -250px;
     top: -250px;
     border-radius: 50%;
     background: var(--green);
     opacity: .12;
}
 .why-us::after {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     right: -180px;
     bottom: -220px;
     border-radius: 50%;
     background: var(--yellow);
     opacity: .10;
}
/* GRID */
 .why-grid {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: .9fr 1.1fr;
     gap: 80px;
     align-items: center;
}
 .why-left {
     max-width: 560px;
}
 .light-label {
     color: var(--yellow);
}
 .why-left h2 {
     margin: 12px 0 20px;
     color: var(--white);
     line-height: 1.1;
     font-size: 28px;
     font-weight: 800;
}
 .why-left h2 span {
     color: var(--green);
}
 .why-left > p {
     max-width: 500px;
     margin: 0 0 28px;
     color: rgba(255,255,255,.75);
     font-size: 16px;
     line-height: 1.8;
}
/* BUTTON */
 .white-btn {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     padding: 14px 23px;
     background: var(--white);
     color: var(--blue-dark);
     border-radius: 6px;
     text-decoration: none;
     font-size: 14px;
     font-weight: 700;
     transition: .3s ease;
}
 .white-btn:hover {
     background: var(--yellow);
     color: var(--dark);
     transform: translateY(-2px);
}
/* FEATURES */
 .why-features {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
}
 .why-feature {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     padding: 25px;
     background: rgba(255,255,255,.09);
     border: 1px solid rgba(255,255,255,.16);
     border-radius: 12px;
     backdrop-filter: blur(8px);
     transition: .35s ease;
}
 .why-feature:hover {
     transform: translateY(-5px);
     background: rgba(255,255,255,.15);
     border-color: rgba(255,255,255,.28);
}
/* ICON */
 .why-icon {
     flex-shrink: 0;
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 10px;
     background: var(--green);
     color: var(--white);
     font-size: 19px;
}
 .why-feature:nth-child(2) .why-icon {
     background: var(--blue);
}
 .why-feature:nth-child(3) .why-icon {
     background: var(--yellow);
     color: var(--dark);
}
 .why-feature:nth-child(4) .why-icon {
     background: var(--green-dark);
}
/* TEXT */
 .why-feature h4 {
     margin: 2px 0 7px;
     color: var(--white);
     font-size: 16px;
     font-weight: 700;
}
 .why-feature p {
     margin: 0;
     color: rgba(255,255,255,.65);
     font-size: 13px;
     line-height: 1.6;
}
/* TABLET */
 @media (max-width: 900px) {
     .why-grid {
         grid-template-columns: 1fr;
         gap: 15px;
    }
     .why-left {
         max-width: 700px;
    }
}
/* MOBILE */
 @media (max-width: 600px) {
     .why-left h2 {
         font-size: 36px;
    }
     .why-features {
         grid-template-columns: 1fr;
    }
     .why-feature {
         padding: 20px;
    }
}
 .sustainability {
     position: relative;
     padding: 40px 0;
     background: linear-gradient( 120deg, var(--green-light), #ffffff 55%, #eef7fc );
     overflow: hidden;
}
 .sustainability::before {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     left: -180px;
     top: -180px;
     border-radius: 50%;
     background: var(--green);
     opacity: .08;
}
 .sustainability::after {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     right: -150px;
     bottom: -180px;
     border-radius: 50%;
     background: var(--blue);
     opacity: .06;
}
/* INNER */
 .sustainability-inner {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     gap: 45px;
}
/* ECO CIRCLE */
 .eco-circle {
     flex-shrink: 0;
     width: 145px;
     height: 145px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: linear-gradient( 135deg, var(--green), var(--green-dark) );
     color: var(--white);
     font-size: 58px;
     box-shadow: 0 18px 40px rgba(36,155,54,.22);
     position: relative;
}
 .eco-circle::before {
     content: "";
     position: absolute;
     inset: -10px;
     border: 1px dashed rgba(36,155,54,.35);
     border-radius: 50%;
}
/* CONTENT */
 .sustainability-content {
     flex: 1;
}
 .sustainability-label {
     display: inline-block;
     margin-bottom: 8px;
     color: var(--green);
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 1.5px;
}
 .sustainability-content h2 {
     margin: 0 0 18px;
     color: var(--dark);
     font-size: 28px;
     line-height: 1.1;
     font-weight: 800;
}
 .sustainability-content h2 span {
     color: var(--green);
}
/* FEATURES */
 .eco-features {
     display: flex;
     align-items: center;
     gap: 0;
}
 .eco-feature {
     display: flex;
     align-items: center;
     gap: 13px;
     padding: 0 28px;
     border-right: 1px solid var(--border);
}
 .eco-feature:first-child {
     padding-left: 0;
}
 .eco-feature:last-child {
     border-right: 0;
}
/* ICON */
 .eco-feature strong {
     width: 48px;
     height: 48px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: var(--green-light);
     color: var(--green);
     font-size: 20px;
}
 .eco-feature:nth-child(2) strong {
     background: #fff7d9;
     color: #d99b00;
}
 .eco-feature:nth-child(3) strong {
     background: #edf5fc;
     color: var(--blue);
}
/* TEXT */
 .eco-feature span {
     color: var(--text);
     font-size: 13px;
     line-height: 1.45;
     font-weight: 600;
}
/* HOVER */
 .eco-feature {
     transition: .3s ease;
}
 .eco-feature:hover {
     transform: translateY(-4px);
}
 .eco-feature:hover strong {
     transform: scale(1.08);
}
/* TABLET */
 @media (max-width: 900px) {
     .sustainability-inner {
         align-items: flex-start;
    }
     .eco-circle {
         width: 110px;
         height: 110px;
         font-size: 42px;
    }
     .eco-features {
         flex-wrap: wrap;
         gap: 20px;
    }
     .eco-feature {
         padding: 0 20px;
    }
}
/* MOBILE */
 @media (max-width: 600px) {
     .sustainability-inner {
         flex-direction: column;
         gap: 30px;
    }
     .eco-circle {
         width: 95px;
         height: 95px;
         font-size: 36px;
    }
     .sustainability-content h2 {
         font-size: 32px;
    }
     .eco-features {
         flex-direction: column;
         align-items: flex-start;
         gap: 18px;
    }
     .eco-feature, .eco-feature:first-child {
         padding: 0;
         border-right: 0;
    }
}
 .testimonials {
     padding: 40px 0;
     background: var(--white);
     overflow: hidden;
}
 .testimonial-slider {
     position: relative;
     padding: 5px 5px 15px;
}
 .testimonial-slider .swiper-wrapper {
     align-items: stretch;
}
 .testimonial-slider .swiper-slide {
     height: auto;
}
 .testimonial-card {
     position: relative;
     padding: 20px 15px;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 8px;
     box-shadow: 0 8px 30px rgba(20,47,69,.07);
     overflow: hidden;
     transition: .35s ease;
}
 .testimonial-card::after {
     content: "";
     position: absolute;
     width: 100px;
     height: 100px;
     right: -35px;
     bottom: -35px;
     border-radius: 50%;
     background: var(--green-light);
     opacity: .8;
}
 .testimonial-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 18px 40px rgba(20,47,69,.12);
     border-color: rgba(36,155,54,.25);
}
/* TOP */
 .testimonial-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 12px;
}
 .quote-icon {
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     background: var(--green-light);
     color: var(--green);
     font-size: 20px;
}
 .stars {
     display: flex;
     gap: 3px;
     color: var(--yellow);
     font-size: 13px;
}
 .testimonial-card > p {
     position: relative;
     z-index: 2;
     margin: 0 0 28px;
     color: var(--text);
     font-size: 15px;
     line-height: 1.75;
}
 .client {
     position: relative;
     z-index: 3;
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: auto;
}
 .client-avatar {
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: linear-gradient( 135deg, var(--blue), var(--green) );
     color: var(--white);
     font-size: 16px;
}
 .client strong {
     display: block;
     margin-bottom: 3px;
     color: var(--dark);
     font-size: 14px;
}
 .client small {
     display: block;
     color: var(--text);
     font-size: 12px;
}
/* NAVIGATION */
 .testimonial-prev, .testimonial-next {
     position: absolute;
     bottom: 0;
     z-index: 10;
     width: 43px;
     height: 43px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: var(--light);
     border: 1px solid var(--border);
     color: var(--dark);
     cursor: pointer;
     transition: .3s ease;
}
 .testimonial-prev {
     left: calc(50% - 52px);
}
 .testimonial-next {
     right: calc(50% - 52px);
}
 .testimonial-prev:hover, .testimonial-next:hover {
     background: var(--green);
     border-color: var(--green);
     color: var(--white);
}
/* PAGINATION */
 .testimonial-pagination {
     position: absolute;
     bottom: 15px !important;
     left: 50% !important;
     width: auto !important;
     transform: translateX(-50%);
}
 .testimonial-pagination .swiper-pagination-bullet {
     width: 8px;
     height: 8px;
     background: var(--blue);
     opacity: .25;
}
 .testimonial-pagination .swiper-pagination-bullet-active {
     width: 22px;
     border-radius: 10px;
     background: var(--green);
     opacity: 1;
}
/* MOBILE */
 @media (max-width: 767px) {
     .testimonial-card {
         padding: 24px;
    }
     .testimonial-slider {
         padding-left: 0;
         padding-right: 0;
    }
}
 .cta {
     position: relative;
     padding: 40px 0;
     background: linear-gradient( 120deg, var(--green-dark) 0%, var(--green) 48%, var(--blue) 100% );
     overflow: hidden;
}
/* DECORATIVE SHAPES */
 .cta::before {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     left: -220px;
     top: -260px;
     border: 70px solid rgba(255,255,255,.06);
     border-radius: 50%;
}
 .cta::after {
     content: "";
     position: absolute;
     width: 300px;
     height: 300px;
     right: -130px;
     bottom: -180px;
     border-radius: 50%;
     background: rgba(255,194,28,.12);
}
/* INNER */
 .cta-inner {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 50px;
}
/* CONTENT */
 .cta-content {
     max-width: 720px;
}
 .cta-label {
     display: inline-block;
     margin-bottom: 10px;
     color: var(--yellow);
     font-size: 12px;
     font-weight: 800;
     letter-spacing: 1.5px;
}
 .cta-content h2 {
     margin: 0 0 13px;
     color: var(--white);
     font-size: 32px;
     line-height: 1.1;
     font-weight: 800;
}
 .cta-content h2 span {
     color: var(--yellow);
}
 .cta-content p {
     max-width: 650px;
     margin: 0;
     color: rgba(255,255,255,.82);
     font-size: 15px;
     line-height: 1.7;
}
/* ACTION */
 .cta-action {
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
}
/* BUTTON */
 .cta-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     min-width: 225px;
     padding: 16px 24px;
     border-radius: 7px;
     background: var(--white);
     color: var(--blue-dark);
     text-decoration: none;
     font-size: 14px;
     font-weight: 800;
     box-shadow: 0 12px 30px rgba(0,0,0,.15);
     transition: .3s ease;
}
 .cta-btn i {
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: var(--green-light);
     color: var(--green);
     transition: .3s ease;
}
 .cta-btn:hover {
     transform: translateY(-4px);
     background: var(--yellow);
     color: var(--dark);
}
 .cta-btn:hover i {
     background: var(--dark);
     color: var(--white);
     transform: translateX(3px);
}
/* SMALL TEXT */
 .cta-action small {
     color: rgba(255,255,255,.75);
     font-size: 11px;
}
 .cta-action small i {
     margin-right: 4px;
     color: var(--yellow);
}
/* TABLET */
 @media (max-width: 800px) {
     .cta-inner {
         flex-direction: column;
         align-items: flex-start;
         gap: 30px;
    }
     .cta-action {
         align-items: flex-start;
    }
     .cta-btn {
         margin-top:10px;
         padding: 10px 16px;
    }
}
/* MOBILE */
 @media (max-width: 600px) {
     .cta-content h2 {
         font-size: 32px;
    }
     .cta-content p {
         font-size: 14px;
    }
     .cta-btn {
         width: 100%;
         min-width: 0;
    }
     .cta-action {
         width: 100%;
    }
}
 .footer {
     position: relative;
     padding-top: 35px;
     background: var(--blue-dark);
     color: var(--white);
     overflow: hidden;
}
 .footer::before {
     content: "";
     position: absolute;
     width: 450px;
     height: 450px;
     right: -250px;
     top: -280px;
     border-radius: 50%;
     background: var(--green);
     opacity: .07;
}
 .footer-grid {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: 1.4fr .8fr .9fr 1.25fr;
     gap: 55px;
     padding-bottom: 25px;
}
/* LOGO */
 .footer-logo {
     display: inline-flex;
     align-items: baseline;
     gap: 7px;
     margin-bottom: 18px;
     color: var(--white);
     text-decoration: none;
}
 .footer-logo img {
     height: 95px;
     filter: brightness(5);
}
 .footer-company > p {
     max-width: 350px;
     margin: 0 0 25px;
     color: #fff;
     font-size: 14px;
     line-height: 1.75;
}
/* SOCIAL */
 .social {
     display: flex;
     gap: 9px;
}
 .social a {
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     background: rgba(255,255,255,.08);
     border: 1px solid rgba(255,255,255,.12);
     color: var(--white);
     text-decoration: none;
     font-size: 14px;
     transition: .3s ease;
}
 .social a:hover {
     background: var(--green);
     border-color: var(--green);
     transform: translateY(-3px);
}
/* HEADINGS */
 .footer-column h4 {
     position: relative;
     margin: 5px 0 18px;
     padding-bottom: 12px;
     color: var(--white);
     font-size: 16px;
     font-weight: 700;
}
 .footer-column h4::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 30px;
     height: 2px;
     background: var(--green);
     border-radius: 5px;
}
/* LINKS */
 .footer-column ul {
     margin: 0;
     padding: 0;
     list-style: none;
}
 .footer-column ul li {
     margin-bottom: 11px;
}
 .footer-column ul li a {
     display: inline-flex;
     align-items: center;
     gap: 9px;
     color: var(--white);
     text-decoration: none;
     font-size: 13px;
     transition: .3s ease;
}
 .footer-column ul li a i {
     color: var(--white);
     font-size: 13px;
     transition: .3s ease;
}
 .footer-column ul li a:hover {
     color: var(--white);
     transform: translateX(4px);
}
 .footer-column ul li a:hover i {
     color: var(--yellow);
}
/* CONTACT */
 .footer-contact > ul > li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 17px;
}
 .btn-small {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 11px 20px;
     background: var(--green);
     color: var(--white);
     border: 2px solid var(--green);
     border-radius: 6px;
     font-size: 13px;
     font-weight: 700;
     line-height: 1;
     text-decoration: none;
     white-space: nowrap;
     box-shadow: 0 6px 18px rgba(36, 155, 54, .18);
     transition: all .3s ease;
}
 .btn-small:hover {
     background: var(--green-dark);
     border-color: var(--green-dark);
     color: var(--white);
     transform: translateY(-2px);
     box-shadow: 0 8px 22px rgba(36, 155, 54, .25);
}
 .btn-small:active {
     transform: translateY(0);
}
 .contact-icon {
     flex-shrink: 0;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
     background: rgba(36,155,54,.6);
     color: var(--white);
     font-size: 13px;
}
 .footer-contact strong {
     display: block;
     margin-bottom: 3px;
     color: var(--white);
     font-size: 12px;
}
 .footer-contact p, .footer-contact a {
     margin: 0;
     color: var(--white);
     font-size: 13px;
     line-height: 1.5;
     text-decoration: none;
     transition: .3s ease;
}
 .footer-contact a:hover {
     color: var(--green);
}
/* COPYRIGHT */
 .copyright {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     padding: 20px 0;
     border-top: 1px solid rgba(255,255,255,.10);
}
 .copyright p {
     margin: 0;
     color: rgba(255,255,255,.45);
     font-size: 12px;
}
 .copyright strong {
     color: rgba(255,255,255,.75);
}
 .footer-bottom-links {
     display: flex;
     align-items: center;
     gap: 12px;
}
 .footer-bottom-links a {
     color:var(--white);
     text-decoration: none;
     font-size: 12px;
     transition: .3s ease;
}
 .footer-bottom-links a:hover {
     color: var(--green);
}
 .footer-bottom-links span {
     width: 3px;
     height: 3px;
     border-radius: 50%;
     background: var(--green);
}
/* TABLET */
 @media (max-width: 991px) {
     .footer-grid {
         grid-template-columns: 1fr 1fr;
         gap: 10px;
    }
}
/* MOBILE */
 @media (max-width: 600px) {
     .footer-grid {
         grid-template-columns: 1fr;
         gap: 15px;
         padding-bottom: 20px;
    }
     .footer-company > p {
         max-width: 100%;
    }
     .copyright {
         flex-direction: column;
         align-items: flex-start;
         gap: 12px;
    }
}
/* RESPONSIVE */
 @media(max-width:1050px){
     nav{
         display:none;
    }
     .hero-grid{
         grid-template-columns:1fr;
    }
     .hero-visual{
         margin-top:30px;
    }
     .service-grid, .detail-grid{
         grid-template-columns:repeat(2,1fr);
    }
     .about-grid, .why-grid{
         grid-template-columns:1fr;
    }
}
 @media(max-width:768px){
     .top-contact{
         display:none;
    }
     .topbar-inner{
         justify-content:center;
    }
     .navbar{
         min-height:70px;
    }
     .logo strong{
         font-size:24px;
    }
     .hero-grid{
         min-height:auto;
    }
     .hero-visual{
         height:470px;
         transform:scale(.8);
         transform-origin:left top;
         width:125%;
    }
     .service-grid, .detail-grid, .testimonial-grid{
         grid-template-columns:1fr;
    }
     .about-gallery{
         grid-template-columns:1fr;
    }
     .gallery-box{
         height:220px;
    }
     .stats-grid{
         grid-template-columns:repeat(2,1fr);
         gap:25px;
    }
     .stat{
         border:0;
    }
     .section-heading{
         display:block;
    }
     .section-heading p{
         margin-top:15px;
    }
     .why-features{
         grid-template-columns:1fr;
    }
     .sustainability-inner{
         grid-template-columns:1fr;
         gap:40px;
    }
     .eco-circle{
         margin:auto;
    }
     .footer-grid{
         grid-template-columns:repeat(2,1fr);
    }
     .cta-inner{
         display:block;
    }
     .cta .btn{
         margin-top:25px;
    }
}
 @media(max-width:500px){
     .btn-small{
         display:none;
    }
     .hero-features{
         gap:12px;
    }
     .hero-features > div{
         flex:1;
    }
     .hero-visual{
         display:none;
    }
     .about h2, .services-section h2, .testimonials h2, .why-left h2, .sustainability h2{
         font-size:29px;
    }
     .stats-grid{
         grid-template-columns:1fr;
    }
     .stat{
         justify-content:flex-start;
         padding-left:25%;
    }
     .eco-features{
         display:grid;
         grid-template-columns:1fr;
         gap:20px;
    }
     .footer-grid{
         grid-template-columns:1fr;
    }
     .copyright{
         display:block;
         text-align:center;
    }
     .copyright div{
         margin-top:10px;
         justify-content:center;
    }
}
 .about-page-hero {
     position: relative;
     display: flex;
     align-items: center;
     background: url("../images/banner3.jpeg") center center / cover no-repeat;
     overflow: hidden;
}
/* Dark blue transparent overlay */
 .about-page-hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient( 90deg, rgba(7, 44, 76, 0.92) 0%, rgba(7, 44, 76, 0.78) 45%, rgba(7, 44, 76, 0.38) 100% );
}
 .about-page-hero-inner {
     position: relative;
     z-index: 2;
     width: 100%;
     display: flex;
     align-items: center;
     gap: 50px;
     padding: 50px 0px;
}
 .about-page-hero-content {
     max-width: 720px;
}
 .about-page-crumbs {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 22px;
     font-size: 14px;
     letter-spacing: 0.2px;
}
 .about-page-crumbs a {
     color: var(--white);
     text-decoration: none;
     transition: 0.3s ease;
}
 .about-page-crumbs a:hover {
     color: var(--yellow);
}
 .about-page-crumbs span {
     color: rgba(255, 255, 255, 0.45);
}
 .about-page-crumbs strong {
     color: var(--yellow);
     font-weight: 500;
}
 .about-page-hero-content h1 {
     margin: 0 0 14px;
     color: var(--white);
     font-size: 42px;
     line-height: 1.05;
     font-weight: 700;
}
 .about-page-hero-content p {
     max-width: 600px;
     margin: 0;
     color: rgba(255, 255, 255, 0.82);
     font-size: 18px;
     line-height: 1.6;
}
/* ========================= MOBILE ========================= */
 @media (max-width: 767px) {
     .about-page-hero-inner {
         flex-direction: column;
         align-items: flex-start;
         justify-content: center;
         padding: 40px 12px !important;
         gap: 30px;
    }
     .about-page-crumbs {
         margin-bottom: 15px;
    }
     .about-page-hero-content h1 {
         font-size: 32px;
    }
     .about-page-hero-content p {
         font-size: 16px;
    }
     .about-page-hero-tagline {
         min-width: auto;
         padding-left: 20px;
    }
     .about-page-hero-tagline strong {
         font-size: 22px;
    }
     .about-page-hero-tagline small {
         font-size: 20px;
    }
}
/* ========================= OUR STORY ========================= */
 .enterprise-story {
     background: var(--white);
     padding: 40px 0px;
}
 .enterprise-story-wrapper {
     display: grid;
     grid-template-columns: 0.9fr 1.1fr;
     align-items: center;
     gap: 50px;
}
 .enterprise-story-label {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
     color: var(--green);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1.5px;
}
 .enterprise-story-label span {
     width: 32px;
     height: 2px;
     background: var(--green);
}
 .enterprise-story-heading {
     margin: 0 0 15px;
     color: var(--blue-dark);
     font-size:28px;
     line-height: 1.15;
     font-weight: 700;
}
 .enterprise-story-content p {
     margin: 0 0 12px;
     color: var(--text);
     font-size: 14px;
     line-height: 1.8;
}
/* ========================= BUTTON ========================= */
 .enterprise-story-btn {
     display: inline-flex;
     align-items: center;
     gap: 13px;
     padding: 13px 22px;
     color: var(--white);
     background: var(--green);
     border-radius: 4px;
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
     transition: all 0.3s ease;
}
 .enterprise-story-btn i {
     font-size: 12px;
     transition: transform 0.3s ease;
}
 .enterprise-story-btn:hover {
     background: var(--green-dark);
     color: var(--white);
}
 .enterprise-story-btn:hover i {
     transform: translateX(5px);
}
 .enterprise-story-gallery {
     position: relative;
     padding: 0 0 55px 45px;
}
 .enterprise-story-main-image {
     width: 100%;
     height: 380px;
     overflow: hidden;
     border-radius: 8px;
     box-shadow: var(--shadow);
}
 .enterprise-story-main-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
}
 .enterprise-story-main-image:hover img {
     transform: scale(1.04);
}
/* ========================= SMALL IMAGES ========================= */
 .enterprise-story-image-grid {
     position: absolute;
     left: 0;
     bottom: 0;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     width: calc(100% - 45px);
     gap: 10px;
}
 .enterprise-story-image {
     height: 105px;
     overflow: hidden;
     border: 5px solid var(--white);
     border-radius: 6px;
     box-shadow: 0 5px 20px rgba(20, 47, 69, 0.15);
}
 .enterprise-story-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
}
 .enterprise-story-image:hover img {
     transform: scale(1.08);
}
/* ========================= QUOTE CARD ========================= */
 .enterprise-story-quote {
     position: absolute;
     right: 25px;
     bottom: 25px;
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 16px 20px;
     background: var(--white);
     border-left: 3px solid var(--yellow);
     box-shadow: var(--shadow);
     border-radius: 4px;
}
 .enterprise-story-quote > i {
     color: var(--green);
     font-size: 24px;
}
 .enterprise-story-quote strong, .enterprise-story-quote span {
     display: block;
}
 .enterprise-story-quote strong {
     color: var(--blue-dark);
     font-size: 14px;
}
 .enterprise-story-quote span {
     margin-top: 3px;
     color: var(--text);
     font-size: 12px;
}
 @media (max-width: 991px) {
     .enterprise-story-wrapper {
         grid-template-columns: 1fr;
         gap: 15px;
    }
}
 @media (max-width: 767px) {
     .enterprise-story-gallery {
         padding: 0 0 45px;
    }
     .enterprise-story-main-image {
         height: 280px;
    }
}
 .company-features {
     padding: 0px 0 40px;
}
 .company-features-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     background: var(--green-light);
     border-radius: 10px;
     padding: 10px;
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
}
/* ========================= FEATURE CARD ========================= */
 .company-feature-card {
     position: relative;
     display: flex;
     align-items: center;
     gap: 17px;
     padding: 10px 20px;
     border-right: 1px solid rgba(36, 155, 54, 0.20);
     transition: all 0.3s ease;
}
 .company-feature-card:first-child {
     padding-left: 0;
}
 .company-feature-card:last-child {
     padding-right: 0;
     border-right: 0;
}
/* ========================= ICON ========================= */
 .company-feature-icon {
     flex: 0 0 52px;
     width: 52px;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--green);
     background: var(--white);
     border: 1px solid rgba(36, 155, 54, 0.18);
     border-radius: 50%;
     font-size: 20px;
     box-shadow: 0 5px 18px rgba(20, 47, 69, 0.06);
     transition: all 0.3s ease;
}
/* ========================= CONTENT ========================= */
 .company-feature-content h3 {
     margin: 0 0 5px;
     color: var(--blue-dark);
     font-size: 16px;
     line-height: 1.3;
     font-weight: 700;
}
 .company-feature-content p {
     margin: 0;
     color: var(--text);
     font-size: 13px;
     line-height: 1.5;
}
 .company-feature-card:hover .company-feature-icon {
     color: var(--white);
     background: var(--green);
     border-color: var(--green);
     transform: translateY(-3px);
}
 @media (max-width: 991px) {
     .company-features-grid {
         grid-template-columns: repeat(2, 1fr);
         row-gap: 13px;
    }
     .company-feature-card {
         padding: 5px 25px;
    }
     .company-feature-card:nth-child(2) {
         border-right: 0;
    }
     .company-feature-card:nth-child(3), .company-feature-card:nth-child(4) {
         padding-top: 25px;
         border-top: 1px solid rgba(36, 155, 54, 0.20);
    }
     .company-feature-card:nth-child(3) {
         padding-left: 0;
    }
}
/* ========================= MOBILE ========================= */
 @media (max-width: 575px) {
     .company-features-grid {
         grid-template-columns: 1fr;
         gap: 0;
    }
     .company-feature-card, .company-feature-card:first-child, .company-feature-card:last-child {
         padding: 18px 0;
         border-right: 0;
         border-bottom: 1px solid rgba(36, 155, 54, 0.20);
    }
     .company-feature-card:first-child {
         padding-top: 0;
    }
     .company-feature-card:last-child {
         padding-bottom: 0;
         border-bottom: 0;
    }
     .company-feature-card:nth-child(3), .company-feature-card:nth-child(4) {
         padding-top: 18px;
         border-top: 0;
    }
     .company-feature-icon {
         width: 48px;
         height: 48px;
         flex-basis: 48px;
    }
}
/* ========================= SERVICES ABOUT ========================= */
 .enterprise-services {
     padding: 40px 0;
     background: var(--light);
}
 .enterprise-services-wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     gap: 50px;
}
/* ========================= IMAGE COLLAGE ========================= */
 .enterprise-services-visual {
     position: relative;
     padding: 0 35px 45px 0;
}
 .enterprise-services-main {
     width: 100%;
     height: 430px;
     overflow: hidden;
     border-radius: 8px;
     box-shadow: var(--shadow);
}
 .enterprise-services-main img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
}
 .enterprise-services-main:hover img {
     transform: scale(1.04);
}
/* Small Images */
 .enterprise-services-secondary {
     position: absolute;
     left: 0;
     bottom: 0;
     display: flex;
     gap: 12px;
     width: 70%;
}
 .enterprise-services-small {
     width: 50%;
     height: 120px;
     overflow: hidden;
     border: 6px solid var(--white);
     border-radius: 7px;
     box-shadow: 0 8px 25px rgba(20, 47, 69, 0.15);
}
 .enterprise-services-small img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
}
 .enterprise-services-small:hover img {
     transform: scale(1.08);
}
/* ========================= SMART BADGE ========================= */
 .enterprise-services-badge {
     position: absolute;
     right: 0;
     bottom: 25px;
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 15px 20px;
     background: var(--white);
     border-left: 3px solid var(--green);
     border-radius: 5px;
     box-shadow: var(--shadow);
}
 .enterprise-services-badge > i {
     color: var(--green);
     font-size: 24px;
}
 .enterprise-services-badge strong, .enterprise-services-badge span {
     display: block;
}
 .enterprise-services-badge strong {
     color: var(--blue-dark);
     font-size: 14px;
}
 .enterprise-services-badge span {
     margin-top: 3px;
     color: var(--text);
     font-size: 12px;
}
/* ========================= RIGHT CONTENT ========================= */
 .enterprise-services-content {
     max-width: 600px;
}
 .enterprise-services-label {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 17px;
     color: var(--green);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1.5px;
}
 .enterprise-services-label span {
     width: 32px;
     height: 2px;
     background: var(--green);
}
 .enterprise-services-content > h2 {
     margin: 0 0 18px;
     color: var(--blue-dark);
     font-size: 28px;
     line-height: 1.15;
     font-weight: 700;
}
 .enterprise-services-intro {
     margin: 0 0 20px;
     color: var(--text);
     font-size: 14px;
     line-height: 1.75;
}
/* ========================= SERVICE ITEMS ========================= */
 .enterprise-service-item {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 14px 0;
     border-bottom: 1px solid var(--border);
}
 .enterprise-service-item:first-of-type {
     border-top: 1px solid var(--border);
}
 .enterprise-service-icon {
     flex: 0 0 48px;
     width: 48px;
     height: 48px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     font-size: 21px;
     transition: all 0.3s ease;
}
 .enterprise-icon-blue {
     color: var(--blue);
     background: rgba(7, 87, 156, 0.10);
}
 .enterprise-icon-green {
     color: var(--green);
     background: rgba(36, 155, 54, 0.10);
}
 .enterprise-icon-yellow {
     color: #d99d00;
     background: rgba(255, 194, 28, 0.16);
}
/* Service Text */
 .enterprise-service-info h3 {
     margin: 0 0 5px;
     color: var(--blue-dark);
     font-size: 17px;
     line-height: 1.4;
     font-weight: 700;
}
 .enterprise-service-info p {
     margin: 0;
     color: var(--text);
     font-size: 14px;
     line-height: 1.6;
}
/* Hover */
 .enterprise-service-item:hover .enterprise-service-icon {
     transform: translateY(-3px);
}
 .enterprise-service-item:hover .enterprise-icon-blue {
     color: var(--white);
     background: var(--blue);
}
 .enterprise-service-item:hover .enterprise-icon-green {
     color: var(--white);
     background: var(--green);
}
 .enterprise-service-item:hover .enterprise-icon-yellow {
     color: var(--white);
     background: var(--yellow);
}
/* ========================= TABLET ========================= */
 @media (max-width: 991px) {
     .enterprise-services-wrapper {
         grid-template-columns: 1fr;
         gap: 15px;
    }
     .enterprise-services-visual {
         max-width: 700px;
    }
     .enterprise-services-content {
         max-width: 750px;
    }
}
/* ========================= MOBILE ========================= */
 @media (max-width: 575px) {
     .enterprise-services-wrapper {
         gap: 14px;
    }
     .enterprise-services-visual {
         padding: 0 20px 35px 0;
    }
     .enterprise-services-main {
         height: 300px;
    }
     .enterprise-services-secondary {
         width: 80%;
    }
     .enterprise-services-small {
         height: 85px;
         border-width: 4px;
    }
     .enterprise-services-badge {
         right: 0;
         bottom: 15px;
         padding: 11px 14px;
    }
     .enterprise-services-badge > i {
         font-size: 19px;
    }
     .enterprise-services-badge strong {
         font-size: 12px;
    }
     .enterprise-services-badge span {
         font-size: 10px;
    }
     .enterprise-services-content > h2 {
         font-size: 34px;
    }
     .enterprise-services-intro {
         font-size: 15px;
    }
     .enterprise-service-item {
         gap: 14px;
         padding: 16px 0;
    }
     .enterprise-service-icon {
         flex-basis: 43px;
         width: 43px;
         height: 43px;
         font-size: 16px;
    }
}
/* ========================================= MISSION & VISION ========================================= */
 .company-purpose-section {
     padding: 40px 0;
     background: var(--white);
}
 .company-purpose-layout {
     display: grid;
     grid-template-columns: 0.95fr 1.05fr;
     align-items: center;
     gap: 50px;
}
/* ========================================= IMAGE ========================================= */
 .company-purpose-image {
     position: relative;
     height: 500px;
}
 .company-purpose-image::before {
     content: "";
     position: absolute;
     top: -18px;
     left: -18px;
     width: 120px;
     height: 120px;
     border-top: 3px solid var(--green);
     border-left: 3px solid var(--green);
     z-index: 0;
}
 .company-purpose-image img {
     position: relative;
     z-index: 1;
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 6px;
}
/* Image floating box */
 .company-purpose-image-box {
     position: absolute;
     z-index: 2;
     right: -25px;
     bottom: 30px;
     display: flex;
     align-items: center;
     gap: 15px;
     padding: 12px 16px;
     background: var(--white);
     border-left: 4px solid var(--yellow);
     box-shadow: var(--shadow);
     border-radius: 4px;
}
 .company-purpose-image-box i {
     color: var(--green);
     font-size: 25px;
}
 .company-purpose-image-box span {
     color: var(--blue-dark);
     font-size: 14px;
     font-weight: 700;
     line-height: 1.4;
}
/* ========================================= CONTENT ========================================= */
 .company-purpose-content {
     max-width: 600px;
}
 .company-purpose-heading {
     margin-bottom: 22px;
}
 .company-purpose-heading > span {
     display: block;
     margin-bottom: 13px;
     color: var(--green);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 2px;
}
 .company-purpose-heading h2 {
     margin: 0 0 17px;
     color: var(--blue-dark);
     font-size: 28px;
     line-height: 1.12;
}
 .company-purpose-heading p {
     max-width: 520px;
     margin: 0;
     color: var(--text);
     font-size: 15px;
     line-height: 1.8;
}
 .company-purpose-item {
     display: grid;
     grid-template-columns: 55px 1fr;
     gap: 10px;
     padding: 12px 0;
     border-top: 1px solid var(--border);
}
 .company-purpose-item:last-child {
     border-bottom: 1px solid var(--border);
}
/* Icon */
 .company-purpose-icon {
     width: 52px;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--blue);
     background: rgba(7, 87, 156, 0.08);
     border-radius: 50%;
     font-size: 19px;
}
 .company-purpose-icon-green {
     color: var(--green);
     background: rgba(36, 155, 54, 0.09);
}
/* Item text */
 .company-purpose-label {
     display: block;
     margin-bottom: 7px;
     color: var(--green);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1.5px;
}
 .company-purpose-item h3 {
     margin: 0 0 8px;
     color: var(--blue-dark);
     font-size: 21px;
     line-height: 1.3;
}
 .company-purpose-item p {
     margin: 0;
     color: var(--text);
     font-size: 14px;
     line-height: 1.7;
}
 @media (max-width: 991px) {
     .company-purpose-layout {
         grid-template-columns: 1fr;
         gap: 20px;
    }
     .company-purpose-image {
         height: 480px;
         max-width: 700px;
    }
     .company-purpose-content {
         max-width: 750px;
    }
}
 @media (max-width: 575px) {
     .company-purpose-layout {
         gap: 45px;
    }
     .company-purpose-image {
         height: 350px;
    }
     .company-purpose-image::before {
         top: -10px;
         left: -10px;
         width: 70px;
         height: 70px;
    }
     .company-purpose-image-box {
         right: 10px;
         bottom: 15px;
         padding: 13px 15px;
    }
     .company-purpose-image-box i {
         font-size: 20px;
    }
     .company-purpose-image-box span {
         font-size: 11px;
    }
     .company-purpose-heading {
         margin-bottom: 30px;
    }
     .company-purpose-heading h2 {
         font-size: 34px;
    }
     .company-purpose-item {
         grid-template-columns: 45px 1fr;
         gap: 13px;
         padding: 22px 0;
    }
     .company-purpose-icon {
         width: 43px;
         height: 43px;
         font-size: 16px;
    }
     .company-purpose-item h3 {
         font-size: 18px;
    }
     .company-purpose-item p {
         font-size: 13px;
    }
}
 .how-work-section {
     padding: 40px 0;
     background: var(--light);
}
 .how-work-steps {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
}
 .how-work-step {
     position: relative;
     text-align: center;
     padding: 0 35px 0 0;
}
 .how-work-step:not(:last-child) {
     margin-right: 35px;
}
 .how-work-step:not(:last-child)::after {
     content: "";
     position: absolute;
     top: 31px;
     right: 0;
     width: 35px;
     border-top: 1px dashed rgba(36, 155, 54, 0.35);
}
/* ========================================= TOP ========================================= */
 .how-work-top {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 14px;
     margin-bottom: 15px;
}
 .how-work-number {
     color: var(--green);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1px;
}
 .how-work-icon {
     width: 62px;
     height: 62px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--blue);
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 50%;
     font-size: 26px;
     box-shadow: 0 5px 20px rgba(20, 47, 69, 0.05);
     transition: all 0.3s ease;
}
 .how-work-step h3 {
     margin: 0 0 8px;
     color: var(--blue-dark);
     font-size: 19px;
     font-weight: 700;
}
 .how-work-step p {
     color: var(--text);
     font-size: 13px;
     line-height: 1.7;
}
 .how-work-step:hover .how-work-icon {
     color: var(--white);
     background: var(--green);
     border-color: var(--green);
     transform: translateY(-4px);
}
 .how-work-step:nth-child(4) .how-work-icon {
     color: var(--green);
}
 @media (max-width: 991px) {
     .how-work-steps {
         grid-template-columns: repeat(2, 1fr);
         gap: 15px;
    }
     .container{
         padding: 0px 12px;
    }
     .how-work-step {
         padding-right: 0;
    }
     .how-work-step:not(:last-child) {
         margin-right: 0;
    }
     .how-work-step::after {
         display: none;
    }
}
/* ========================================= MOBILE ========================================= */
 @media (max-width: 575px) {
     .how-work-steps {
         grid-template-columns: 1fr;
    }
     .how-work-icon {
         width: 55px;
         height: 55px;
    }
     .how-work-step p {
         max-width: 100%;
    }
}
/* ========================================= WHY CCTV ========================================= */
 .cctv-benefit-section {
     padding: 40px 0;
     background: var(--white);
}
 .cctv-benefit-wrapper {
     display: grid;
     grid-template-columns: 0.9fr 1.1fr;
     align-items: center;
     gap: 50px;
}
/* ========================================= LEFT CONTENT ========================================= */
 .cctv-benefit-content {
     max-width: 570px;
}
 .cctv-benefit-label {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 18px;
     color: var(--blue);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 2px;
}
 .cctv-benefit-label span {
     width: 32px;
     height: 2px;
     background: var(--blue);
}
 .cctv-benefit-content h2 {
     margin: 0 0 22px;
     color: var(--blue-dark);
     font-size: 32px;
     line-height: 1.08;
     font-weight: 700;
}
 .cctv-benefit-content h2 em {
     color: var(--blue);
     font-style: normal;
}
 .cctv-benefit-content p {
     margin: 0 0 16px;
     color: var(--text);
     font-size: 15px;
     line-height: 1.8;
}
/* ========================================= BUTTON ========================================= */
 .cctv-benefit-button {
     display: inline-flex;
     align-items: center;
     gap: 13px;
     margin-top: 12px;
     padding: 13px 21px;
     color: var(--white);
     background: var(--blue);
     border-radius: 4px;
     text-decoration: none;
     font-size: 14px;
     font-weight: 600;
     transition: all 0.3s ease;
}
 .cctv-benefit-button i {
     font-size: 11px;
     transition: transform 0.3s ease;
}
 .cctv-benefit-button:hover {
     background: var(--blue-dark);
     color: var(--white);
}
 .cctv-benefit-button:hover i {
     transform: translateX(5px);
}
/* ========================================= VISUAL AREA ========================================= */
 .cctv-benefit-visual {
     position: relative;
     min-height: 500px;
     padding: 0 45px 55px 0;
}
 .cctv-benefit-main-image {
     position: relative;
     z-index: 2;
     width: 100%;
     height: 440px;
     overflow: hidden;
     border-radius: 7px;
     box-shadow: var(--shadow);
}
 .cctv-benefit-main-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
}
 .cctv-benefit-main-image:hover img {
     transform: scale(1.04);
}
/* ========================================= SMALL IMAGE ========================================= */
 .cctv-benefit-small-image {
     position: absolute;
     z-index: 4;
     left: -35px;
     bottom: 0;
     width: 190px;
     height: 145px;
     overflow: hidden;
     border: 7px solid var(--white);
     border-radius: 6px;
     box-shadow: var(--shadow);
}
 .cctv-benefit-small-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
/* ========================================= SECURITY STATUS CARD ========================================= */
 .cctv-benefit-status {
     position: absolute;
     z-index: 5;
     right: 5px;
     bottom: 28px;
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 15px 19px;
     background: var(--white);
     border-left: 3px solid var(--green);
     border-radius: 4px;
     box-shadow: var(--shadow);
}
 .cctv-benefit-status-icon {
     width: 43px;
     height: 43px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--green);
     background: var(--green-light);
     border-radius: 50%;
     font-size: 18px;
}
 .cctv-benefit-status strong, .cctv-benefit-status span {
     display: block;
}
 .cctv-benefit-status strong {
     color: var(--blue-dark);
     font-size: 14px;
}
 .cctv-benefit-status span {
     margin-top: 3px;
     color: var(--text);
     font-size: 11px;
}
/* ========================================= DECORATION ========================================= */
 .cctv-benefit-decoration {
     position: absolute;
     z-index: 1;
     top: -20px;
     right: 15px;
     width: 130px;
     height: 130px;
     border-top: 3px solid var(--green);
     border-right: 3px solid var(--green);
}
/* ========================================= TABLET ========================================= */
 @media (max-width: 991px) {
     .cctv-benefit-wrapper {
         grid-template-columns: 1fr;
         gap: 15px;
    }
     .cctv-benefit-content {
         max-width: 750px;
    }
     .cctv-benefit-visual {
         max-width: 700px;
    }
}
/* ========================================= MOBILE ========================================= */
 @media (max-width: 575px) {
     .cctv-benefit-wrapper {
         gap: 15px;
    }
     .cctv-benefit-content h2 {
         font-size: 38px;
    }
     .cctv-benefit-content p {
         font-size: 14px;
    }
     .cctv-benefit-visual {
         min-height: 350px;
         padding: 0 20px 40px 0;
    }
     .cctv-benefit-main-image {
         height: 300px;
    }
     .cctv-benefit-small-image {
         left: 0;
         width: 130px;
         height: 100px;
         border-width: 4px;
    }
     .cctv-benefit-status {
         right: 0;
         bottom: 10px;
         padding: 10px 12px;
    }
     .cctv-benefit-status-icon {
         width: 36px;
         height: 36px;
         font-size: 15px;
    }
     .cctv-benefit-status strong {
         font-size: 12px;
    }
     .cctv-benefit-status span {
         font-size: 9px;
    }
     .cctv-benefit-decoration {
         width: 75px;
         height: 75px;
         top: -10px;
         right: 5px;
    }
}
/* ========================================= CCTV SOLUTIONS ========================================= */
 .security-solutions-section {
     padding: 40px 0;
     background: var(--light);
}
 .security-solutions-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
}
 .security-solution-item {
     background: var(--white);
     border: 1px solid var(--border);
     transition: all 0.35s ease;
}
 .security-solution-item:hover {
     transform: translateY(-6px);
     border-color: rgba(7, 87, 156, 0.18);
     box-shadow: var(--shadow);
}
/* ========================================= IMAGE ========================================= */
 .security-solution-image {
     position: relative;
     height: 220px;
     overflow: hidden;
}
 .security-solution-image::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient( to bottom, transparent 55%, rgba(7, 44, 76, 0.25) );
}
 .security-solution-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
}
 .security-solution-item:hover .security-solution-image img {
     transform: scale(1.06);
}
/* Number */
 .security-solution-number {
     position: absolute;
     z-index: 3;
     top: 15px;
     left: 15px;
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white);
     background: var(--blue);
     font-size: 11px;
     font-weight: 700;
}
/* ========================================= INFO ========================================= */
 .security-solution-info {
     display: grid;
     grid-template-columns: 45px 1fr 35px;
     align-items: center;
     gap: 14px;
     padding: 15px 14px;
}
 .security-solution-icon {
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--blue);
     background: rgba(7, 87, 156, 0.08);
     border-radius: 50%;
     font-size: 16px;
     transition: all 0.3s ease;
}
 .security-solution-item:hover .security-solution-icon {
     color: var(--white);
     background: var(--green);
}
 .security-solution-info h3 {
     margin: 0 0 5px;
     color: var(--blue-dark);
     font-size: 17px;
     line-height: 1.3;
}
 .security-solution-info p {
     margin: 0;
     color: var(--text);
     font-size: 12px;
     line-height: 1.55;
}
/* Arrow */
 .security-solution-info > a {
     width: 34px;
     height: 34px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--blue);
     border: 1px solid var(--border);
     border-radius: 50%;
     text-decoration: none;
     font-size: 11px;
     transition: all 0.3s ease;
}
 .security-solution-info > a:hover {
     color: var(--white);
     background: var(--green);
     border-color: var(--green);
}
/* ========================================= TABLET ========================================= */
 @media (max-width: 991px) {
     .security-solutions-grid {
         grid-template-columns: repeat(2, 1fr);
    }
}
/* ========================================= MOBILE ========================================= */
 @media (max-width: 575px) {
     .security-solutions-grid {
         grid-template-columns: 1fr;
         gap: 20px;
    }
     .security-solution-image {
         height: 210px;
    }
     .security-solution-info {
         padding: 18px 16px;
    }
}
/* ========================================= SIMON SECURITY SERVICES ========================================= */
 .simon-security-services {
     padding: 40px 0;
     background: var(--white);
}
 .simon-security-layout {
     display: grid;
     grid-template-columns: 0.9fr 1.1fr;
     align-items: center;
     gap: 45px;
}
/* ========================================= LEFT VISUAL ========================================= */
 .simon-security-visual {
     position: relative;
     padding-bottom: 20px;
}
 .simon-security-main-photo {
     position: relative;
     height: 510px;
     overflow: hidden;
     border-radius: 6px;
}
 .simon-security-main-photo img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s ease;
}
 .simon-security-main-photo:hover img {
     transform: scale(1.04);
}
 .simon-security-photo-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient( to top, rgba(7, 44, 76, 0.65), rgba(7, 44, 76, 0.05) 55% );
}
/* ========================================= SECURITY BADGE ========================================= */
 .simon-security-badge {
     position: absolute;
     left: 25px;
     bottom: 25px;
     display: flex;
     align-items: center;
     gap: 13px;
     padding: 14px 18px;
     background: var(--white);
     border-left: 4px solid var(--green);
     box-shadow: var(--shadow);
}
 .simon-security-badge > i {
     width: 42px;
     height: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--green);
     background: var(--green-light);
     border-radius: 50%;
     font-size: 18px;
}
 .simon-security-badge strong, .simon-security-badge span {
     display: block;
}
 .simon-security-badge strong {
     color: var(--blue-dark);
     font-size: 14px;
}
 .simon-security-badge span {
     margin-top: 3px;
     color: var(--text);
     font-size: 11px;
}
 .simon-security-content {
     max-width: 650px;
}
 .simon-security-heading {
     margin-bottom: 32px;
}
 .simon-security-label {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 15px;
     color: var(--green);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 2px;
}
 .simon-security-label span {
     width: 30px;
     height: 2px;
     background: var(--green);
}
 .simon-security-heading h2 {
     margin: 0 0 17px;
     color: var(--blue-dark);
     font-size: 32px;
     line-height: 1.1;
}
 .simon-security-heading h2 strong {
     color: var(--blue);
     font-weight: 700;
}
 .simon-security-heading p {
     max-width: 590px;
     margin: 0;
     color: var(--text);
     font-size: 14px;
     line-height: 1.8;
}
/* ========================================= SERVICE ROW ========================================= */
 .simon-security-service {
     position: relative;
     display: grid;
     grid-template-columns: 32px 48px 1fr 35px;
     align-items: center;
     gap: 12px;
     padding: 12px 0;
     border-top: 1px solid var(--border);
     transition: all 0.3s ease;
}
 .simon-security-service:last-child {
     border-bottom: 1px solid var(--border);
}
/* Number */
 .simon-security-service-number {
     color: #aeb8c0;
     font-size: 11px;
     font-weight: 700;
     transition: color 0.3s ease;
}
/* Icon */
 .simon-security-service-icon {
     width: 46px;
     height: 46px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--blue);
     background: var(--light);
     border-radius: 50%;
     font-size: 17px;
     transition: all 0.3s ease;
}
/* Text */
 .simon-security-service-info h3 {
     margin: 0 0 5px;
     color: var(--blue-dark);
     font-size: 16px;
     line-height: 1.3;
}
 .simon-security-service-info p {
     margin: 0;
     color: var(--text);
     font-size: 12px;
     line-height: 1.55;
}
/* Arrow */
 .simon-security-service-arrow {
     width: 33px;
     height: 33px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--blue);
     border: 1px solid var(--border);
     border-radius: 50%;
     font-size: 10px;
     transition: all 0.3s ease;
}
/* ========================================= HOVER ========================================= */
 .simon-security-service:hover {
     padding-left: 8px;
}
 .simon-security-service:hover .simon-security-service-number {
     color: var(--green);
}
 .simon-security-service:hover .simon-security-service-icon {
     color: var(--white);
     background: var(--green);
     transform: scale(1.05);
}
 .simon-security-service:hover .simon-security-service-arrow {
     color: var(--white);
     background: var(--green);
     border-color: var(--green);
     transform: translateX(3px);
}
 @media (max-width: 991px) {
     .simon-security-layout {
         grid-template-columns: 1fr;
    }
     .simon-security-visual {
         max-width: 700px;
    }
     .simon-security-content {
         max-width: 750px;
    }
}
 @media (max-width: 575px) {
     .simon-security-layout {
         gap: 15px;
    }
     .simon-security-main-photo {
         height: 350px;
    }
     .simon-security-badge {
         left: 12px;
         bottom: 12px;
         padding: 10px 12px;
    }
     .simon-security-badge > i {
         width: 35px;
         height: 35px;
         font-size: 15px;
    }
     .simon-security-badge strong {
         font-size: 12px;
    }
     .simon-security-service {
         grid-template-columns: 27px 43px 1fr;
         gap: 10px;
         padding: 17px 0;
    }
     .simon-security-service-arrow {
         display: none;
    }
     .simon-security-service-icon {
         width: 42px;
         height: 42px;
         font-size: 15px;
    }
     .simon-security-service-info h3 {
         font-size: 14px;
    }
     .simon-security-service-info p {
         font-size: 11px;
    }
}
 .simon-cam-process-head {
     position: relative;
     z-index: 2;
     max-width: 700px;
     margin-bottom: 25px;
}
 .simon-cam-process-label {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
     color: var(--green);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 2px;
}
 .simon-cam-process-label span {
     width: 30px;
     height: 2px;
     background: var(--green);
}
 .simon-cam-process-head h2 {
     margin: 0 0 12px;
     color: var(--white);
     font-size: 28px;
     line-height: 1.1;
}
 .simon-cam-process-head h2 strong {
     color: var(--green);
     font-weight: 700;
}
 .simon-cam-process-head p {
     max-width: 620px;
     margin: 0;
     color: rgba(255, 255, 255, 0.68);
     font-size: 14px;
     line-height: 1.8;
}
 .simon-cam-process {
     position: relative;
     padding: 40px 0;
     background: var(--blue-dark);
     overflow: hidden;
}
/* Background glow */
 .simon-cam-process::before {
     content: "";
     position: absolute;
     width: 500px;
     height: 500px;
     top: -250px;
     right: -150px;
     background: rgba(36, 155, 54, 0.08);
     border-radius: 50%;
     filter: blur(10px);
}
 .simon-cam-process::after {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     bottom: -200px;
     left: -100px;
     background: rgba(7, 87, 156, 0.15);
     border-radius: 50%;
}
 .simon-cam-process-line {
     position: relative;
     z-index: 2;
     display: grid;
     grid-template-columns: 1fr 55px 1fr 55px 1fr 55px 1fr;
     align-items: start;
}
/* ========================================= STEP ========================================= */
 .simon-cam-step {
     position: relative;
     padding: 20px 15px;
     min-height: 200px;
     background: rgba(255, 255, 255, 0.055);
     border: 1px solid rgba(255, 255, 255, 0.09);
     border-radius: 5px;
     transition: all 0.35s ease;
}
 .simon-cam-step:hover {
     transform: translateY(-7px);
     background: rgba(255, 255, 255, 0.09);
     border-color: rgba(36, 155, 54, 0.5);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);
}
 .simon-cam-step-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 15px;
}
 .simon-cam-step-top > span {
     color: rgba(255, 255, 255, 0.3);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1px;
}
 .simon-cam-step-icon {
     width: 52px;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--green);
     background: rgba(36, 155, 54, 0.1);
     border: 1px solid rgba(36, 155, 54, 0.2);
     border-radius: 50%;
     font-size: 18px;
     transition: all 0.35s ease;
}
 .simon-cam-step:hover .simon-cam-step-icon {
     color: var(--white);
     background: var(--green);
     border-color: var(--green);
     transform: rotate(5deg);
}
 .simon-cam-step-content h3 {
     margin: 0 0 10px;
     color: var(--white);
     font-size: 18px;
}
 .simon-cam-step-content p {
     margin: 0;
     color: rgba(255, 255, 255, 0.58);
     font-size: 12px;
     line-height: 1.7;
}
/* ========================================= CONNECTOR ========================================= */
 .simon-cam-connector {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .simon-cam-connector::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 50%;
     height: 1px;
     background: rgba(255, 255, 255, 0.18);
}
 .simon-cam-connector span {
     position: relative;
     z-index: 2;
     width: 8px;
     height: 8px;
     background: var(--green);
     border-radius: 50%;
     box-shadow: 0 0 0 5px rgba(36, 155, 54, 0.1), 0 0 18px rgba(36, 155, 54, 0.5);
}
/* ========================================= TABLET ========================================= */
 @media (max-width: 991px) {
     .simon-cam-process-line {
         grid-template-columns: 1fr 1fr;
         gap: 20px;
    }
     .simon-cam-connector {
         display: none;
    }
     .simon-cam-step {
         min-height: 230px;
    }
}
 @media (max-width: 575px) {
     .simon-cam-process-line {
         grid-template-columns: 1fr;
         gap: 14px;
    }
     .simon-cam-step {
         min-height: auto;
         padding: 12px 10px;
    }
     .simon-cam-step-icon {
         width: 45px;
         height: 45px;
         font-size: 16px;
    }
}
/* ========================================= WHY SOLAR SECTION ========================================= */
 .why-solar {
     position: relative;
     overflow: hidden;
     background: var(--white);
     padding: 40px 0px;
}
 .why-grid {
     display: grid;
     grid-template-columns: 0.95fr 1.05fr;
     align-items: center;
     gap: 50px;
}
 .why-content {
     max-width: 600px;
}
 .why-content .section-label {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 16px;
     color: var(--green);
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 2px;
}
 .why-content .section-label span {
     width: 30px;
     height: 2px;
     background: var(--green);
}
 .why-content h2 {
     margin: 0 0 20px;
     color: var(--blue-dark);
     font-size:32px;
     line-height: 1.08;
     font-weight: 700;
}
 .why-content h2 span {
     display: block;
     color: var(--green);
}
 .why-content > p {
     margin: 0 0 15px;
     color: var(--text);
     font-size: 14px;
     line-height: 1.85;
}
/* ========================================= CHECK LIST ========================================= */
 .check-list {
     display: flex;
     flex-direction: column;
     gap: 12px;
     margin: 0 0 20px;
     padding: 0;
     list-style: none;
}
 .check-list li {
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--blue-dark);
     font-size: 13px;
     font-weight: 500;
}
 .check-list li i {
     flex: 0 0 auto;
     color: var(--green);
     font-size: 17px;
}
/* ========================================= BUTTON ========================================= */
 .why-content .primary-btn {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 13px 20px;
     color: var(--white);
     background: var(--green);
     border-radius: 3px;
     font-size: 12px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
}
 .why-content .primary-btn i {
     transition: transform 0.3s ease;
}
 .why-content .primary-btn:hover {
     background: var(--green-dark);
     transform: translateY(-2px);
}
 .why-content .primary-btn:hover i {
     transform: translateX(4px);
}
/* ========================================= SOLAR GALLERY ========================================= */
 .solar-gallery {
     position: relative;
     height: 450px;
}
 .solar-gallery img{
     height: 100%;
     width: 100%;
}
/* ========================================= TABLET ========================================= */
 @media (max-width: 991px) {
     .why-grid {
         grid-template-columns: 1fr;
         gap: 15px;
    }
     .why-content {
         max-width: 750px;
    }
     .solar-gallery {
         max-width: 720px;
    }
}
/* ========================================= MOBILE ========================================= */
 @media (max-width: 575px) {
     .why-grid {
         gap: 10px;
    }
     .check-list {
         gap: 10px;
    }
     .check-list li {
         align-items: flex-start;
         font-size: 12px;
    }
     .solar-gallery {
         padding: 0 0 15px;
    }
     .gallery-main.solar-home {
         height: 330px;
    }
}
/* ========================================= SOLAR PROJECTS ========================================= */
 .projects {
     padding: 40px 0;
     background: var(--light);
}
 .project-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
}
 .project-card {
     overflow: hidden;
     background: var(--white);
     border: 1px solid var(--border);
     transition: all 0.35s ease;
}
 .project-card:hover {
     transform: translateY(-6px);
     border-color: rgba(36, 155, 54, 0.25);
     box-shadow: var(--shadow);
}
/* ========================================= PROJECT IMAGE ========================================= */
 .project-img {
     position: relative;
     height: 285px;
     overflow: hidden;
     background: var(--blue-dark);
}
 .project-img img {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     transition: transform 0.6s ease;
}
 .project-card:hover .project-img img {
     transform: scale(1.06);
}
/* ========================================= IMAGE OVERLAY ========================================= */
 .project-overlay {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     padding: 20px;
     background: linear-gradient( to top, rgba(7, 44, 76, 0.72), transparent 55% );
     opacity: 0;
     transition: opacity 0.35s ease;
}
 .project-card:hover .project-overlay {
     opacity: 1;
}
 .project-overlay span {
     padding: 6px 9px;
     color: var(--white);
     background: var(--green);
     font-size: 9px;
     font-weight: 700;
     letter-spacing: 1px;
}
 .project-overlay i {
     width: 36px;
     height: 36px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white);
     background: rgba(255, 255, 255, 0.15);
     border: 1px solid rgba(255, 255, 255, 0.35);
     border-radius: 50%;
     font-size: 12px;
}
/* ========================================= PROJECT INFO ========================================= */
 .project-info {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 10px 12px;
}
 .project-info h3 {
     margin: 0 0 7px;
     color: var(--blue-dark);
     font-size: 15px;
}
 .project-info span {
     display: flex;
     align-items: center;
     gap: 5px;
     color: var(--text);
     font-size: 11px;
}
 .project-info span i {
     color: var(--green);
     font-size: 10px;
}
 .project-info > strong {
     flex-shrink: 0;
     padding: 7px 10px;
     color: var(--green);
     background: var(--green-light);
     font-size: 11px;
     border-radius: 3px;
}
/* ========================================= TABLET ========================================= */
 @media (max-width: 767px) {
     .project-grid {
         grid-template-columns: 1fr;
         gap: 20px;
    }
}
/* ========================================= MOBILE ========================================= */
 @media (max-width: 575px) {
     .project-img {
         height: 230px;
    }
     .project-info {
         padding: 16px;
    }
     .project-info h3 {
         font-size: 15px;
    }
     .project-overlay {
         opacity: 1;
    }
}
 .contact-section {
     padding: 40px 0;
     background: #f6f9fb;
}
 .contact-grid {
     display: grid;
     grid-template-columns: 1.05fr 0.95fr;
     gap: 15px;
     align-items: stretch;
}
/* ========================================= COMMON CARD ========================================= */
 .contact-form-card, .contact-info-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 24px;
     box-shadow: var(--shadow);
}
 .section-tag {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     color: var(--green);
     font-size: 13px;
     font-weight: 800;
     letter-spacing: 1.4px;
     text-transform: uppercase;
     margin-bottom: 14px;
}
 .section-tag span {
     display: block;
     width: 35px;
     height: 2px;
     background: var(--green);
     border-radius: 20px;
}
 .contact-form-card h2, .contact-info-card h2 {
     margin: 0 0 12px;
     color: var(--dark);
     font-size: 32px;
     line-height: 1.2;
     font-weight: 800;
}
 .section-description {
     margin: 0 0 10px;
     color: var(--text);
     font-size: 15px;
     line-height: 1.8;
     max-width: 600px;
}
 .form-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
}
 .input-group {
     display: flex;
     flex-direction: column;
     gap: 8px;
}
 .input-group.full-width {
     grid-column: 1 / -1;
}
 .input-group label {
     color: var(--dark);
     font-size: 13px;
     font-weight: 700;
}
 .input-group input, .input-group select, .input-group textarea {
     width: 100%;
     border: 1px solid #dce5eb;
     background: #fbfdfe;
     color: var(--dark);
     font-family: inherit;
     font-size: 14px;
     border-radius: 10px;
     outline: none;
     transition: 0.3s ease;
     box-sizing: border-box;
}
 .input-group input, .input-group select {
     height: 52px;
     padding: 0 16px;
}
 .input-group textarea {
     min-height: 135px;
     padding: 15px 16px;
     resize: vertical;
}
 .input-group input::placeholder, .input-group textarea::placeholder {
     color: #9aa7b1;
}
 .input-group input:focus, .input-group select:focus, .input-group textarea:focus {
     border-color: var(--green);
     background: var(--white);
     box-shadow: 0 0 0 4px rgba(36, 155, 54, 0.08);
}
 .send-btn {
     margin-top: 22px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     min-height: 52px;
     padding: 0 25px;
     border: 0;
     border-radius: 8px;
     background: var(--green);
     color: var(--white);
     font-family: inherit;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     transition: 0.3s ease;
}
 .send-btn i {
     font-size: 13px;
     transition: 0.3s ease;
}
 .send-btn:hover {
     background: var(--green-dark);
     transform: translateY(-2px);
     box-shadow: 0 10px 22px rgba(36, 155, 54, 0.22);
}
 .send-btn:hover i {
     transform: translateX(4px);
}
/* ========================================= CONTACT INFO ========================================= */
 .contact-info-card {
     position: relative;
     overflow: hidden;
}
 .contact-info-card::before {
     content: "";
     position: absolute;
     width: 180px;
     height: 180px;
     right: -80px;
     top: -80px;
     background: rgba(36, 155, 54, 0.06);
     border-radius: 50%;
}
 .contact-info-card::after {
     content: "";
     position: absolute;
     width: 120px;
     height: 120px;
     left: -70px;
     bottom: -70px;
     background: rgba(7, 87, 156, 0.05);
     border-radius: 50%;
}
/* ========================================= INFO LIST ========================================= */
 .info-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
}
 .info-item {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     padding: 18px;
     border: 1px solid #edf1f4;
     border-radius: 14px;
     background: #fbfdfe;
     transition: 0.3s ease;
}
 .info-item:hover {
     background: var(--white);
     border-color: #dce7ed;
     transform: translateX(4px);
     box-shadow: 0 8px 22px rgba(20, 47, 69, 0.06);
}
/* ========================================= INFO ICON ========================================= */
 .info-icon {
     flex: 0 0 46px;
     width: 46px;
     height: 46px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     font-size: 17px;
}
 .info-icon.green {
     color: var(--green);
     background: var(--green-light);
}
 .info-icon.blue {
     color: var(--blue);
     background: rgba(7, 87, 156, 0.08);
}
 .info-icon.yellow {
     color: #d89d00;
     background: rgba(255, 194, 28, 0.14);
}
 .info-item h4 {
     margin: 0 0 5px;
     color: var(--dark);
     font-size: 15px;
     font-weight: 750;
}
 .info-item p {
     margin: 0;
     color: var(--text);
     font-size: 13px;
     line-height: 1.7;
}
/* ========================================= EXPERT ADVICE CARD ========================================= */
 .contact-quote {
     position: relative;
     z-index: 2;
     display: flex;
     align-items: center;
     gap: 15px;
     margin-top: 22px;
     padding: 20px;
     border-radius: 15px;
     background: var(--blue-dark);
     color: var(--white);
     overflow: hidden;
}
 .contact-quote::after {
     content: "";
     position: absolute;
     right: -30px;
     top: -40px;
     width: 120px;
     height: 120px;
     border: 25px solid rgba(255, 255, 255, 0.05);
     border-radius: 50%;
}
 .contact-quote-icon {
     flex: 0 0 46px;
     width: 46px;
     height: 46px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     background: var(--green);
     color: var(--white);
     font-size: 18px;
}
 .contact-quote strong {
     display: block;
     margin-bottom: 4px;
     font-size: 15px;
}
 .contact-quote p {
     margin: 0;
     color: rgba(255, 255, 255, 0.72);
     font-size: 12px;
     line-height: 1.6;
}
 @media (max-width: 991px) {
     .contact-grid {
         grid-template-columns: 1fr;
         gap: 15px;
    }
}
 @media (max-width: 600px) {
     .contact-form-card h2, .contact-info-card h2 {
         font-size: 25px;
    }
     .section-description {
         font-size: 14px;
         line-height: 1.7;
         margin-bottom: 25px;
    }
     .form-grid {
         grid-template-columns: 1fr;
         gap: 16px;
    }
     .input-group.full-width {
         grid-column: auto;
    }
     .input-group input, .input-group select {
         height: 50px;
    }
     .input-group textarea {
         min-height: 120px;
    }
     .send-btn {
         width: 100%;
    }
     .info-item {
         padding: 15px;
         gap: 12px;
    }
     .info-icon {
         flex-basis: 42px;
         width: 42px;
         height: 42px;
    }
     .info-item p {
         font-size: 12px;
    }
     .contact-quote {
         padding: 17px;
    }
}
/* ========================================= LOCATION SECTION ========================================= */
 .location-section {
     padding: 40px 0;
     position: relative;
     overflow: hidden;
}
 .map-box iframe{
     height: 340px;
     width: 100%;
     border-radius: 10px;
}
/* ========================================= FAQ SECTION ========================================= */
 .faq-section {
     padding: 40px 0;
     background: var(--light);
     position: relative;
}
 .faq-wrapper {
     display: grid;
     grid-template-columns: 0.85fr 1.15fr;
     gap: 50px;
     align-items: start;
}
/* ========================================= LEFT CONTENT ========================================= */
 .faq-intro {
     position: sticky;
     top: 100px;
}
 .faq-intro .section-tag {
     color: var(--green);
}
 .faq-intro .section-tag span {
     background: var(--green);
}
 .faq-intro h2 {
     margin: 15px 0 20px;
     color: var(--dark);
     font-size: 42px;
     line-height: 1.15;
     font-weight: 800;
}
 .faq-intro h2 span {
     display: block;
     color: var(--green);
}
 .faq-intro > p {
     max-width: 470px;
     margin: 0;
     color: var(--text);
     font-size: 15px;
     line-height: 1.8;
}
 .faq-help-box {
     margin-top: 35px;
     padding: 17px;
     display: flex;
     align-items: center;
     gap: 14px;
     max-width: 440px;
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 14px;
     box-shadow: var(--shadow);
}
 .faq-help-icon {
     flex: 0 0 45px;
     width: 45px;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 11px;
     background: var(--green-light);
     color: var(--green);
     font-size: 17px;
}
 .faq-help-box div:nth-child(2) {
     flex: 1;
}
 .faq-help-box strong {
     display: block;
     margin-bottom: 3px;
     color: var(--dark);
     font-size: 13px;
}
 .faq-help-box span {
     display: block;
     color: var(--text);
     font-size: 12px;
}
 .faq-help-box > a {
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: var(--blue);
     color: var(--white);
     text-decoration: none;
     transition: 0.3s ease;
}
 .faq-help-box > a:hover {
     background: var(--green);
     transform: translateX(3px);
}
/* ========================================= FAQ LIST ========================================= */
 .faq-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
}
 .faq-item {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 6px;
     overflow: hidden;
     transition: 0.3s ease;
}
 .faq-item:hover {
     border-color: rgba(36, 155, 54, 0.3);
}
 .faq-item.active {
     border-color: rgba(36, 155, 54, 0.35);
     box-shadow: 0 10px 30px rgba(20, 47, 69, 0.07);
}
/* ========================================= QUESTION ========================================= */
 .faq-question {
     width: 100%;
     padding: 12px 23px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     border: 0;
     outline: 0;
     background: transparent;
     color: var(--dark);
     text-align: left;
     cursor: pointer;
     font-family: inherit;
}
 .faq-question > span {
     display: flex;
     align-items: center;
     gap: 17px;
     font-size: 15px;
     font-weight: 700;
}
 .faq-question b {
     color: var(--green);
     font-size: 11px;
     font-weight: 800;
     min-width: 25px;
}
 .faq-question > i {
     flex: 0 0 30px;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: var(--green-light);
     color: var(--green);
     font-size: 11px;
     transition: 0.3s ease;
}
 .faq-item.active .faq-question > i {
     background: var(--green);
     color: var(--white);
}
/* ========================================= ANSWER ========================================= */
 .faq-answer {
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     transition: max-height 0.4s ease, opacity 0.3s ease;
}
 .faq-answer p {
     margin: 0;
     padding: 0 70px 22px 65px;
     color: var(--text);
     font-size: 13px;
     line-height: 1.8;
}
 .faq-item.active .faq-answer {
     max-height: 250px;
     opacity: 1;
}
/* ========================================= ACTIVE QUESTION ========================================= */
 .faq-item.active .faq-question {
     color: var(--green-dark);
}
 .faq-item.active .faq-question b {
     color: var(--blue);
}
/* ========================================= TABLET ========================================= */
 @media (max-width: 1000px) {
     .faq-wrapper {
         grid-template-columns: 1fr;
         gap: 15px;
    }
     .faq-intro {
         position: static;
    }
     .faq-intro h2 {
         font-size: 36px;
    }
     .faq-intro > p {
         max-width: 650px;
    }
     .faq-help-box {
         max-width: 500px;
    }
}
/* ========================================= MOBILE ========================================= */
 @media (max-width: 600px) {
     .faq-wrapper {
         gap: 35px;
    }
     .faq-intro h2 {
         font-size: 29px;
    }
     .faq-intro > p {
         font-size: 13px;
         line-height: 1.7;
    }
     .faq-help-box {
         padding: 13px;
         margin-top: 25px;
    }
     .faq-question {
         padding: 17px 15px;
    }
     .faq-question > span {
         gap: 10px;
         font-size: 13px;
         line-height: 1.5;
    }
     .faq-question b {
         min-width: 22px;
    }
     .faq-question > i {
         flex: 0 0 27px;
         width: 27px;
         height: 27px;
    }
     .faq-answer p {
         padding: 0 20px 18px 47px;
         font-size: 12px;
         line-height: 1.7;
    }
}
 @media (max-width: 400px) {
     .faq-intro h2 {
         font-size: 26px;
    }
     .faq-question > span {
         font-size: 12px;
    }
     .faq-question {
         gap: 10px;
    }
     .faq-answer p {
         padding-left: 42px;
    }
}
/* ================= PRIVACY POLICY ================= */
 .privacy-policy {
     background: var(--white);
     padding: 40px 0px;
}
 .privacy-policy .container {
     max-width: 1000px;
}
 .privacy-policy .section-label {
     margin-bottom: 15px;
}
 .privacy-policy h1 {
     color: var(--blue-dark);
     font-size: 32px;
     line-height: 1.2;
     margin-bottom: 20px;
}
 .privacy-policy h2 {
     color: var(--dark);
     font-size: 23px;
     margin-top: 18px;
     margin-bottom: 12px;
}
 .privacy-policy p {
     color: var(--text);
     font-size: 15px;
     line-height: 1.8;
     margin-bottom: 15px;
}
 .privacy-policy ul {
     margin: 10px 0 20px;
     padding-left: 22px;
}
 .privacy-policy ul li {
     color: var(--text);
     font-size: 15px;
     line-height: 1.8;
     margin-bottom: 7px;
}
 .privacy-policy a {
     color: var(--green);
     text-decoration: none;
     font-weight: 600;
}
 .privacy-policy a:hover {
     color: var(--green-dark);
     text-decoration: underline;
}
 .privacy-policy strong {
     color: var(--dark);
}
/* ================= TABLET ================= */
 @media (max-width: 768px) {
     .privacy-policy h1 {
         font-size: 34px;
    }
     .privacy-policy h2 {
         font-size: 21px;
         margin-top: 30px;
    }
     .privacy-policy p, .privacy-policy ul li {
         font-size: 14px;
    }
}
/* ================= MOBILE ================= */
 @media (max-width: 576px) {
     .privacy-policy h1 {
         font-size: 30px;
    }
     .privacy-policy h2 {
         font-size: 19px;
         margin-top: 26px;
    }
     .privacy-policy p, .privacy-policy ul li {
         font-size: 14px;
         line-height: 1.7;
    }
     .privacy-policy ul {
         padding-left: 20px;
    }
}
 
 /* =====================================
   PROJECTS SECTION
===================================== */

.projects-section {
    padding: 40px 0;
    background: #f7faf8;
}
.project-grid{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
}

.project-card {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-radius: 8px;
    background: #ddd;
    box-shadow: 0 10px 30px rgba(0, 50, 25, 0.10);
}

.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}


.project-overlay {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 9px;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.82) 0%,
            rgba(0, 0, 0, 0.45) 40%,
            rgba(0, 0, 0, 0.05) 75%
        );

    transition: all 0.4s ease;
}

.project-content {
    transform: translateY(8px);
    transition: transform 0.4s ease;
}


.project-content h3 {
    margin: 7px 0 12px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}


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

.project-card:hover .project-overlay {
    background:
        linear-gradient(
            to top,
            rgba(0, 70, 35, 0.90) 0%,
            rgba(0, 0, 0, 0.45) 55%,
            rgba(0, 0, 0, 0.08) 100%
        );
}

.project-card:hover .project-content {
    transform: translateY(0);
}

.project-card:hover .project-content a {
    opacity: 1;
    transform: translateY(0);
}

.project-card:hover .project-content a i {
    transform: translateX(4px);
}

@media (max-width: 991px) {

    .project-card {
        height: 230px;
    }
}

@media (max-width: 767px) {

    .project-card {
        height: 200px;
        border-radius: 10px;
    }
    .project-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

    .project-content h3 {
        font-size: 15px;
        white-space: nowrap;
    }
}