/* ==========================
GLOBAL RESET
========================== */


* {

margin: 0;

padding: 0;

box-sizing: border-box;

}



html {

scroll-behavior: smooth;

}




body {

font-family: var(--font-main);

background: var(--background-light);

color: var(--text-dark);

line-height: 1.6;

overflow-x: hidden;

}





img {

max-width: 100%;

display: block;

}





a {

text-decoration: none;

color: inherit;

}





ul {

list-style: none;

}




.container {

width: min(90%, var(--container-width));

margin: auto;

}





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



.header {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: var(--header-height);

z-index: 1000;

background: rgba(7,17,31,0.65);

backdrop-filter: blur(15px);

}





.navbar {

height: 100%;

width: min(90%, var(--container-width));

margin: auto;

display: flex;

align-items: center;

justify-content: space-between;

}





.logo img {

height: 120px;

width: auto;

}





.nav-links {

display: flex;

gap: 35px;

align-items: center;

}



.nav-links a {

color: white;

font-size: 0.95rem;

font-weight: 500;

transition: var(--transition-fast);

}



.nav-links a:hover {

color: var(--accent-color);

}





.nav-btn {

padding: 13px 25px;

border-radius: 50px;

background: var(--accent-color);

color: #000;

font-weight: 700;

transition: var(--transition-normal);

}



.nav-btn:hover {

transform: translateY(-3px);

opacity: .85;

}







.hamburger {

display: none;

flex-direction: column;

gap: 6px;

cursor:pointer;

}



.hamburger span {

height: 2px;

width: 28px;

background:white;

}





/* ==========================
BUTTONS
========================== */



.primary-btn {

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 35px;

background:var(--accent-color);

color:#000;

border-radius:50px;

font-weight:700;

transition:var(--transition-normal);

border: none;

cursor: pointer;

}



.primary-btn:hover {

transform:translateY(-4px);

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

}





.secondary-btn {

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 35px;

border:2px solid rgba(255,255,255,.35);

border-radius:50px;

color:white;

font-weight:600;

transition:var(--transition-normal);

background: transparent;

cursor: pointer;

}



.secondary-btn:hover {

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

border-color: white;

transform:translateY(-3px);

box-shadow:0 8px 30px rgba(255,255,255,0.08);

}





/* ==========================
HERO VIDEO SECTION
========================== */

.hero {
height:100vh;
min-height:750px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
padding: 100px 0 60px;
}





.video-container {

position:absolute;

inset:0;

}



.video-container video {

height:100%;

width:100%;

object-fit:cover;

}





.video-overlay {

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(7,17,31,.95),
rgba(7,17,31,.55)
);

}





.hero-content {

position:relative;

z-index:2;

width:min(90%,900px);

color:white;

text-align:left;

padding: 20px 0;

}



.hero-badge {

display:inline-block;

padding:8px 18px;

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

border-radius:50px;

font-size:.8rem;

letter-spacing:2px;

margin-bottom:25px;

text-transform: uppercase;

}





.hero h1 {

font-size: clamp(2.8rem, 6vw, 5rem);

line-height:1.1;

font-weight:800;

margin-bottom:25px;

}



.hero h1 span {

color:var(--accent-color);

}





.hero p {

font-size:1.1rem;

max-width:600px;

color:#d6dbe2;

margin-bottom:30px;

}





.hero-buttons {

display:flex;

gap:20px;

flex-wrap:wrap;

margin-top: 10px;

}





.scroll-indicator {

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

z-index:3;

color:white;

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

font-size:.7rem;

}





.mouse {

width:25px;

height:40px;

border:2px solid white;

border-radius:20px;

display:flex;

justify-content:center;

padding-top:7px;

}





.wheel {

width:4px;

height:8px;

background:white;

border-radius:10px;

}/* ==========================
PAGE HERO SECTIONS
========================== */


.page-hero {

min-height:75vh;

background:
linear-gradient(
135deg,
#07111F,
#123A5A
);

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:150px 20px 80px;

color:white;

}




.page-hero-content {

max-width:900px;

}





.hero-label {

font-size:.8rem;

letter-spacing:3px;

font-weight:700;

color:var(--accent-color);

margin-bottom:20px;

text-transform:uppercase;

}





.page-hero h1 {

font-size: clamp(3.2rem, 6vw, 5rem);

line-height:1.1;

font-weight:800;

margin-bottom:25px;

}





.page-hero p {

font-size:1.15rem;

color:#d5dbe2;

max-width:700px;

margin:0 auto 35px;

}







/* ==========================
GENERAL SECTIONS
========================== */



section {

padding:var(--section-padding) 5%;

}





.section-intro {

max-width:850px;

margin:0 auto 70px;

text-align:center;

}





.section-intro p:first-child {

font-size:.8rem;

letter-spacing:3px;

font-weight:700;

color:var(--accent-color);

margin-bottom:20px;

text-transform: uppercase;

}




.section-intro h2 {

font-size: clamp(2.5rem, 5vw, 4rem);

line-height:1.15;

font-weight:800;

margin-bottom:25px;

}





.section-intro p:last-child {

color:var(--text-muted);

font-size:1.1rem;

}







.section-intro.light {

color:white;

}





.section-intro.light p:last-child {

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

}









/* ==========================
INTRO SECTION
========================== */



.intro-section {

background:white;

}





.intro-section .section-intro {

max-width:900px;

}









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



.industry-grid {

max-width:1200px;

margin:auto;

display:grid;

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

gap:25px;

}





.industry-card {

padding:40px 30px;

background:white;

border:1px solid #e5e7eb;

border-radius:var(--radius-medium);

transition:var(--transition-normal);

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

}



.industry-card:hover {

transform:translateY(-8px);

box-shadow:var(--shadow-card-hover);

border-color: var(--accent-color);

}





.industry-card h3 {

font-size:1.3rem;

}









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



.services-preview,
.service-intro {

background:#f8fafc;

}





.services-grid {

max-width:1200px;

margin:auto;

display:grid;

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

gap:30px;

}





.service-box {

background:white;

padding:40px 30px;

border-radius:var(--radius-medium);

border:1px solid #e5e7eb;

transition:var(--transition-normal);

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

display: flex;

flex-direction: column;

}



.service-box:hover {

transform:translateY(-10px);

box-shadow:var(--shadow-card-hover);

border-color: var(--accent-color);

}





.service-box .service-number {

font-size:.9rem;

color:var(--accent-color);

font-weight:800;

display: block;

margin-bottom: 15px;

}





.service-box h3 {

font-size:1.5rem;

margin:0 0 20px 0;

}





.service-box p {

color:var(--text-muted);

margin-bottom:25px;

}





.service-box ul li {

padding: 6px 0;

font-size: 0.9rem;

display: flex;

align-items: center;

gap: 10px;

}





.service-box a {

font-weight:700;

transition: var(--transition-fast);

margin-top: auto;

}



.service-box a:hover {

color:var(--accent-color);

}








/* ==========================
DARK SECTIONS - FIXED GRID
========================== */



.dark-section {

background:var(--background-dark);

color:white;

}











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



.process-section {

background:white;

}





.timeline {

max-width:900px;

margin:auto;

display:flex;

flex-direction:column;

gap:30px;

}





.process-card {

display:flex;

gap:25px;

align-items:flex-start;

padding:30px;

border-radius:var(--radius-medium);

background:#f8fafc;

border:1px solid #e5e7eb;

transition: var(--transition-normal);

}



.process-card:hover {

transform:translateX(10px);

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

border-color: var(--accent-color);

}





.process-number {

min-width:60px;

height:60px;

border-radius:50%;

background:var(--accent-color);

color:#000;

display:flex;

align-items:center;

justify-content:center;

font-weight:800;

font-size:1rem;

flex-shrink:0;

}





.process-card i {

font-size: 1.2rem;

}





.process-card h3 {

margin-bottom:8px;

font-size:1.3rem;

}





.process-card p {

color:var(--text-muted);

font-size:0.95rem;

}/* ==========================
SERVICE FEATURE
========================== */


.service-feature {

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

max-width:1200px;

margin:auto;

}





.feature-image {

height:450px;

overflow:hidden;

border-radius:var(--radius-large);

background:#0B1F3A;

display:flex;

align-items:center;

justify-content:center;

}
.feature-video {

width:100%;

height:100%;

display:block;

object-fit:cover;

border-radius:var(--radius-large);

}




.feature-text h2 {

font-size: clamp(2.5rem, 5vw, 4rem);

line-height:1.15;

margin-bottom:25px;

}





.feature-text p {

color:var(--text-muted);

margin-bottom:20px;

}





.feature-text ul {

display:flex;

flex-direction:column;

gap:12px;

font-weight:600;

}









/* ==========================
PORTFOLIO
========================== */



.portfolio-intro {

background:#f8fafc;

}





.portfolio-grid-section {

background:white;

}





.portfolio-grid {

max-width:1200px;

margin:auto;

display:grid;

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

gap:35px;

}





.portfolio-card {

border-radius:var(--radius-medium);

overflow:hidden;

background:white;

border:1px solid #e5e7eb;

transition:var(--transition-normal);

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

}





.portfolio-card:hover {

transform:translateY(-8px);

box-shadow:var(--shadow-card-hover);

border-color: var(--accent-color);

}





.portfolio-image {

height:350px;

overflow:hidden;

background:#e5e7eb;

}





.portfolio-image img {

width:100%;

height:100%;

object-fit:cover;

}





.portfolio-info {

padding:30px;

}





.portfolio-info span {

font-size:.75rem;

letter-spacing:2px;

font-weight:700;

color:var(--accent-color);

text-transform: uppercase;

}





.portfolio-info h3 {

font-size:1.5rem;

margin:15px 0;

}





.portfolio-info p {

color:var(--text-muted);

}









/* ==========================
ABOUT PAGE
========================== */



.about-mission {

background:white;

}





.about-content {

max-width:900px;

margin:auto;

text-align:center;

}





.about-content h2 {

font-size: clamp(2.5rem, 5vw, 4rem);

line-height:1.2;

margin-bottom:30px;

}





.about-content p {

color:var(--text-muted);

font-size:1.1rem;

margin-bottom:20px;

}





.values-section {

background:#f8fafc;

}





.values-grid {

max-width:1200px;

margin:auto;

display:grid;

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

gap:30px;

}





.value-card {

padding:40px;

background:white;

border-radius:var(--radius-medium);

border:1px solid #e5e7eb;

transition: var(--transition-normal);

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

}



.value-card:hover {

transform:translateY(-8px);

box-shadow:var(--shadow-card-hover);

border-color: var(--accent-color);

}





.value-card h3 {

color:var(--accent-color);

font-size:2rem;

}





.value-card h4 {

font-size:1.5rem;

margin:15px 0;

}





.value-card p {

color:var(--text-muted);

}








.difference-section {

background:white;

}





.difference-grid {

max-width:1100px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

}





.difference-grid h2 {

font-size: clamp(2.5rem, 5vw, 4rem);

line-height:1.15;

}





.difference-grid p {

color:var(--text-muted);

margin-bottom:20px;

}









/* ==========================
CONTACT + AUDIT FORMS
========================== */



.contact-section {

background:#f8fafc;

}





.contact-grid {

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:start;

}





.contact-info h2 {

font-size: clamp(2.5rem, 5vw, 4rem);

line-height:1.15;

margin-bottom:25px;

}





.contact-info>p {

color:var(--text-muted);

margin-bottom:40px;

}





.contact-benefits {

display:flex;

flex-direction:column;

gap:20px;

}





.contact-benefits div {

display:flex;

align-items:center;

gap:20px;

}





.contact-benefits span {

height:45px;

width:45px;

border-radius:50%;

background:var(--accent-color);

color:#000;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

flex-shrink:0;

}





.contact-form-container {

background:white;

padding:45px;

border-radius:var(--radius-large);

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

}





.contact-form {

display:flex;

flex-direction:column;

gap:20px;

}





.form-group {

display:flex;

flex-direction:column;

gap:8px;

}





.form-group label {

font-weight:600;

}





.form-group input,

.form-group textarea,

.form-group select {

width:100%;

padding:15px;

border:1px solid #d1d5db;

border-radius:10px;

font-family:inherit;

font-size:1rem;

outline:none;

transition: var(--transition-fast);

}





.form-group textarea {

min-height:140px;

resize:vertical;

}





.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus {

border-color:var(--accent-color);

box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);

}







/* ==========================
CTA
========================== */



.cta-section {

background:

linear-gradient(
135deg,
#0B1F3A,
#123A5A
);

color:white;

text-align:center;

}





.cta-section h2 {

max-width:850px;

margin:0 auto 25px;

font-size: clamp(2.5rem, 5vw, 4rem);

line-height:1.15;

}





.cta-section p {

max-width:650px;

margin:0 auto 35px;

color:#dbe3ed;

}/* ==========================
INFO CARDS
========================== */


.info-section {

background:white;

}



.info-grid {

max-width:1200px;

margin:auto;

display:grid;

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

gap:30px;

}





.info-card {

padding:35px;

background:#f8fafc;

border-radius:var(--radius-medium);

border:1px solid #e5e7eb;

text-align:center;

transition: var(--transition-normal);

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

}



.info-card:hover {

transform:translateY(-8px);

box-shadow:var(--shadow-card-hover);

border-color: var(--accent-color);

}





.info-card h3 {

font-size:1.2rem;

margin-bottom:15px;

}





.info-card p {

color:var(--text-muted);

}









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



.footer {

background:#050d18;

color:white;

padding:60px 5% 30px;

text-align:center;

}





.footer-logo img {

height:120px;

margin:0 auto 30px;

}





.footer-links {

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

margin-bottom:35px;

}





.footer-links a {

color:#cbd5e1;

font-size:.95rem;

transition:var(--transition-fast);

}





.footer-links a:hover {

color:var(--accent-color);

}





.footer p {

font-size:.9rem;

color:#64748b;

}









/* ==========================
MOBILE NAV BASE
========================== */



.mobile-active .nav-links {

display:flex;

position:absolute;

top:90px;

left:0;

width:100%;

background:#07111F;

flex-direction:column;

padding:40px;

gap:25px;

}



.mobile-active .nav-buttons {

display:flex;

position:absolute;

top:430px;

left:0;

width:100%;

background:#07111F;

justify-content:center;

padding-bottom:40px;

}









/* ==========================
UTILITY CLASSES
========================== */



.text-center {

text-align:center;

}



.text-light {

color:white;

}



.mt-large {

margin-top:80px;

}



.mb-large {

margin-bottom:80px;

}









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



.placeholder-image {

background:

linear-gradient(
135deg,
#0B1F3A,
#123A5A
);

height:400px;

border-radius:var(--radius-large);

display:flex;

align-items:center;

justify-content:center;

color:white;

font-weight:700;

}









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



.card-hover {

transition:var(--transition-normal);

}



.card-hover:hover {

transform:translateY(-8px);

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

}









/* ==========================
SELECTION COLOR
========================== */



::selection {

background:var(--accent-color);

color:black;

}









/* ==========================
SCROLLBAR
========================== */



::-webkit-scrollbar {

width:10px;

}



::-webkit-scrollbar-track {

background:#07111F;

}



::-webkit-scrollbar-thumb {

background:#C9A227;

border-radius:20px;

}/* ==========================
HOMEPAGE SECTION ALIGNMENT FIXES
========================== */


/* Fix homepage View Our Work button */

.intro-section,
.intro-section .section-intro {

text-align:center;

}



.intro-section .primary-btn {

display:flex;

width:max-content;

margin:35px auto 0;

justify-content:center;

}





/* Fix homepage How It Works steps */

.process-preview {

text-align:center;

}



.process-preview .process-grid {

display:grid;

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

gap:40px;

max-width:1100px;

margin:50px auto 0;

}




.process-preview .process-item {

text-align:center;

align-items:center;

}





.process-preview .process-number {

margin:0 auto 25px;

width:90px;

height:90px;

display:flex;

align-items:center;

justify-content:center;

background:var(--accent-color);

color:#000;

font-size:2rem;

font-weight:800;

border-radius:50%;

}






@media(max-width:900px){


.process-preview .process-grid{

grid-template-columns:1fr;

}


}/* ==========================
OUR WORK BUTTON SPACING
========================== */


.section-intro .primary-btn {

margin-top:35px;

}/* ==========================
STATISTICS SECTION
========================== */


.stats-section {

background:var(--background-dark);

color:white;

}





.stats-section .section-intro {

max-width:850px;

}





.stats-grid {

margin-top:60px;

}



.stat-card h3 {

font-size:4rem;

color:var(--accent-color);

font-weight:800;

}



.stat-card p {

color:#d1d5db;

}.audit-success {

display:none;

text-align:center;

padding:50px 30px;

background:white;

border-radius:20px;

}


.audit-success h2 {

font-size:32px;

margin-bottom:20px;

}


.audit-success p {

font-size:18px;

line-height:1.7;

}


.success-line {

margin-top:25px;

font-weight:600;

}




/* ==========================
COMPARISON SECTION FIX
========================== */

.comparison-section {
background: white;
padding: 100px 5%;
}

/* ==========================
FAQ SECTION FIX
========================== */

.faq-section {
background: #f8fafc;
padding: 100px 5%;
}

.faq-section .faq-item {
background: white;
padding: 20px 25px;
border-radius: var(--radius-medium);
border: 1px solid #e5e7eb;
margin-bottom: 15px;
box-shadow: var(--shadow-card);
}

.faq-section .faq-item h3 {
font-size: 1.05rem;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 12px;
}

.faq-section .faq-item p {
color: var(--text-muted);
font-size: 0.95rem;
margin: 0;
}

/* ==========================
PRICING SECTION FIX
========================== */

.pricing-section {
background: white;
padding: 100px 5%;
}


/* ============================================================
   FORCE FIX: STATS GRID - 3 COLUMNS ON ALL SCREENS ABOVE 1024px
   ============================================================ */

/* DESKTOP - 3 COLUMNS */
.stats-grid,
.dark-section .stats-grid,
.stats-section .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1100px !important;
    margin: 60px auto 0 !important;
}

/* TABLET - 2 COLUMNS */
@media screen and (max-width: 1024px) {
    .stats-grid,
    .dark-section .stats-grid,
    .stats-section .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 25px !important;
    }
}

/* MOBILE - 1 COLUMN */
@media screen and (max-width: 600px) {
    .stats-grid,
    .dark-section .stats-grid,
    .stats-section .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* CENTER STAT CARDS */
.stat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 40px 25px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: var(--radius-medium) !important;
    min-height: 180px !important;
}

.stat-card h3 {
    font-size: 3rem !important;
    color: var(--accent-color) !important;
    margin-bottom: 12px !important;
    font-weight: 800 !important;
}

.stat-card p {
    font-weight: 600 !important;
    color: #d1d5db !important;
    font-size: 1rem !important;
    margin-bottom: 0 !important;
}

/* COUNTER NUMBERS FOR INDEX.HTML */
.counter {
    font-size: 4rem !important;
    color: var(--accent-color) !important;
    font-weight: 800 !important;
}

@media screen and (max-width: 1024px) {
    .counter {
        font-size: 3rem !important;
    }
}

@media screen and (max-width: 600px) {
    .counter {
        font-size: 2.5rem !important;
    }
}
/* ==========================
MOBILE NAV BUTTON FIX
========================== */

@media screen and (max-width: 850px) {
    .nav-btn {
        padding: 10px 18px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }
    
    .nav-buttons {
        display: flex !important;
        align-items: center !important;
    }
}

@media screen and (max-width: 600px) {
    .nav-btn {
        padding: 8px 14px !important;
        font-size: 0.7rem !important;
    }
}/* ==========================
HOW IT WORKS - 2 COLUMN GRID FIX
========================== */

@media screen and (max-width: 768px) {
    .dark-section > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
    
    .dark-section > div[style*="grid-template-columns"] > div {
        padding: 25px 20px !important;
    }
    
    .dark-section > div[style*="grid-template-columns"] > div > div:first-child {
        font-size: 2rem !important;
    }
    
    .dark-section > div[style*="grid-template-columns"] > div h3 {
        font-size: 1rem !important;
    }
    
    .dark-section > div[style*="grid-template-columns"] > div p {
        font-size: 0.85rem !important;
        max-width: 100% !important;
    }
}