/* --- 1. CSS Variables & Global Reset --- */
:root {
  /* Core Colors */
  --color-bg: #0b0b0b;          /* Darkest Background */
  --color-card: #151515;        /* Subtle Secondary Background for cards/sections */
  --color-accent: #ff4b3e;      /* Primary Red/Orange Accent */
  --color-accent-subtle: rgba(255, 75, 62, 0.1); /* Light background for CTA/Highlight */
  --color-text: #ffffff;
  --color-muted: #9b9b9b;       /* Subtler text color */
  --color-border: rgba(255, 255, 255, 0.08); /* Primary border/separator */
  --color-border-subtle: rgba(255, 255, 255, 0.03); /* Faintest border */

  /* Layout */
  --container: 1200px;
  --radius: 8px;
  --spacing-unit: 18px;
}
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    height: 100%;
    margin: 0;
    /* Poppins is set in the HTML head */
    font-family: 'Poppins', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}
a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}
a:hover {
    color: var(--color-accent);
}
.wrap {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
}
h1, h2, h3, h4 {
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text);
}
.muted {
    color: var(--color-muted);
    font-size: 0.9em;
}
p.lead {
    font-size: 1.15em;
}
.section-title{
    font-size:32px;
    margin-bottom:30px;
    text-align: center;
    font-weight: 800;
}
.section-title-left { /* New style for left-aligned section titles like in About */
    font-size:32px;
    margin-bottom:20px;
    text-align: left;
    font-weight: 800;
}


/* --- 2. Header & Navigation --- */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(11,11,11,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--color-border-subtle);
    transition: box-shadow 0.3s;
}
.site-header.scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--spacing-unit) 0;
}
.logo{font-weight:900;font-size:24px;}
.logo .accent{color:var(--color-accent);}

.nav ul {
    display:flex;
    gap: 30px;
    list-style:none;
    margin:0;
    padding:0;
    font-weight:500;
}
.nav ul li a {
    color: var(--color-muted);
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s ease;
}
.nav ul li a::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: var(--color-accent);
    transition: width 0.3s ease;
}
.nav ul li a:hover, .nav ul li a.active {
    color: var(--color-text);
}
.nav ul li a.active::after {
    width: 100%;
}

/* Mobile Toggle Button */
.nav-toggle-btn {
    display: none; /* Hide on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    width: 30px;
    height: 24px;
    position: relative;
}
.nav-toggle-btn .bar {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--color-text);
    border-radius: 3px;
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}
/* Javascript will add 'is-open' class to .nav-toggle-btn */
.nav-toggle-btn.is-open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle-btn.is-open .bar:nth-child(2) { opacity: 0; }
.nav-toggle-btn.is-open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- 3. Buttons & Utilities --- */
.btn{
    display:inline-block;
    padding:12px 24px;
    border-radius:var(--radius);
    font-weight:600;
    cursor:pointer;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}
.btn-primary{
    background:var(--color-accent);
    color:var(--color-text);
    border:2px solid var(--color-accent);
}
.btn-primary:hover{
    background: #ff6e63;
    border-color: #ff6e63;
}
.btn-ghost{
    background:transparent;
    border:2px solid var(--color-border);
    color:var(--color-text);
}
.btn-ghost:hover{
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* --- 4. Hero Section (index.html) --- */
.hero{padding:80px 0;}
.hero-inner{display:flex;gap:50px;align-items:center; position: relative;} /* Added relative position for absolute child */
.hero-left{flex:1;max-width:60%;}
.eyebrow{font-size:12px;color:var(--color-accent);letter-spacing:3px;text-transform: uppercase;margin-bottom:12px; font-weight: 600;}
h1{font-size:64px;line-height:1.05;margin:0 0 20px; font-weight: 900;}
h1 .accent{color:var(--color-accent);}
.hero-actions{margin-top:30px;display:flex;gap:15px;}

/* *** UPDATED STYLES FOR OVAL AND OFF-SCREEN POSITIONING *** */
.hero-right{
    flex: 0 0 auto; 
    position: absolute; 
    right: 0px; /* Moved to the left by changing this value */
    top: 50%;
    transform: translateY(-50%); /* Centers it vertically */
    z-index: 10; 
}

.hero-circle{
    width: 400px; 
    height: 400px; 
    border-radius: 50%; 
    overflow: hidden;
    border: 6px solid var(--color-border);
    background: var(--color-card);
    box-shadow: 0 0 40px rgba(255, 75, 62, 0.1);
}
.hero-circle img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1); 
}

/* ****************************************************** */

/* --- 5. Partners (CSS remains but section removed from HTML) --- */
.partners{padding:25px 0;border-top:1px solid var(--color-border-subtle);border-bottom:1px solid var(--color-border-subtle);background-color: var(--color-card);}
.partners-inner{display:flex;gap:40px;align-items:center;justify-content:space-around;}
.partners img{height:30px;opacity:0.6;filter:grayscale(1);transition: opacity 0.3s;}
.partners img:hover{opacity: 1;}

/* --- 6. Services Preview (index.html) --- */
.services-preview{padding:60px 0;}
.services-scroll{
    display:flex;
    gap:20px;
    overflow-x:auto;
    padding-bottom:15px;
    scroll-behavior:smooth;
    /* Style for scrollbar on webkit */
    scrollbar-color: var(--color-accent) var(--color-card);
}
.services-scroll::-webkit-scrollbar {
    height: 6px;
}
.services-scroll::-webkit-scrollbar-thumb {
    background: var(--color-accent);
    border-radius: 10px;
}
.services-scroll::-webkit-scrollbar-track {
    background: var(--color-card);
}
.service-card{
    min-width:280px;
    background:var(--color-card);
    padding:25px;
    border-radius:var(--radius);
    /* Subtle border as requested */
    border: 1px solid var(--color-border-subtle); 
    transition: transform 0.3s, background 0.3s, border-color 0.3s;
}
.service-card:hover{
    background: #1f1f1f;
    transform: translateY(-5px);
    /* Subtle accent border on hover */
    border-color: var(--color-accent); 
}
.service-card .icon{font-size:36px;margin-bottom:15px;}
.service-card h3{margin:0 0 8px;font-weight: 600;}

/* *** NEW: About Summary Section Styles *** */
.about-summary {
    padding: 60px 0;
    border-top: 1px solid var(--color-border-subtle);
    margin-top: 20px;
}
.about-summary-inner {
    display: flex;
    gap: 40px;
    align-items: center;
}
.about-left {
    flex: 1;
}
.about-right {
    flex: 1;
    display: flex;
    justify-content: flex-start; /* align left */
}
.about-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: var(--radius);
    object-fit: cover;
    filter: grayscale(0.5); /* Subtle filter for effect */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.about-stats {
    display: flex;
    gap: 30px;
    margin: 20px 0 30px;
}
.stat-item {
    font-size: 1.1em;
    font-weight: 500;
}
.stat-number {
    display: block;
    font-size: 2.2em;
    font-weight: 800;
    margin-bottom: -5px;
}
/* *** END NEW SECTION *** */

/* --- 7. Why Choose Us (index.html) --- */
.why-choose{padding:60px 0;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px;}
.why-card{
    background:var(--color-card);
    padding:20px;
    border-radius:var(--radius);
    border: 1px solid var(--color-border-subtle);
}
.why-card h4{margin:0 0 8px;font-weight: 600;color: var(--color-accent);}

/* --- 8. Mini CTA (index.html) --- */
.mini-cta{
    background:var(--color-accent-subtle);
    padding:30px 0;
    margin-top:40px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.mini-cta-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.mini-text h3{margin:0 0 5px;font-size: 1.6em;}
.mini-text p{color:var(--color-muted);}


/* ---------------------------------------------------- */
/* --- SPECIFIC PAGE STYLES --- */
/* ---------------------------------------------------- */

/* About Page (about.html) */
.about-hero{padding:80px 0;}
.about-hero-inner{display:flex;gap:50px;align-items:center;}
.about-left img{
    width:100%;
    max-width:550px;
    border-radius:var(--radius);
    object-fit:cover;
    filter:grayscale(0.8) contrast(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.about-right h1 {
    font-size: 3em;
    margin-bottom: 20px;
}
.frost-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:25px;}
.frost-card{
    background:var(--color-card);
    padding:20px;
    border-radius:var(--radius);
    border:1px solid var(--color-border-subtle);
    min-height: 150px;
}
.frost-card h3 {
    color: var(--color-accent);
    font-size: 1.1em;
    margin-bottom: 8px;
}

/* Counters */
.counters{padding:40px 0;}
.counters-inner{display:flex;gap:20px;justify-content:space-between;background:var(--color-card);padding:20px;border-radius:var(--radius);}
.counter-card{
    text-align:center;
    padding:10px;
    flex-grow: 1;
}
.counter{font-size:32px;font-weight:800;color: var(--color-accent);}
.label {color: var(--color-muted);}

/* Team Grid */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
.team-card{
    background:var(--color-card);
    padding:15px;
    border-radius:var(--radius);
    text-align:center;
    border: 1px solid var(--color-border-subtle);
}
.team-card img{width:100%;height:220px;object-fit:cover;border-radius:8px;}


/* Services Page Grid (services.html) */
.services-page {padding: 60px 0;}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:30px 0;}
.service-full{
    background:var(--color-card);
    padding:25px;
    border-radius:var(--radius);
    /* Only subtle border, no red left border here either */
    border: 1px solid var(--color-border-subtle);
    transition: border-color 0.3s;
}
.service-full:hover {
    border-color: var(--color-accent);
}
.service-icon{font-size:32px;margin-bottom: 10px;}
.service-full h3 {margin-bottom: 10px;}
.learn-more {
    display: inline-block;
    margin-top: 15px;
    color: var(--color-accent);
    font-weight: 600;
}

/* Portfolio Page (portfolio.html) */
.portfolio-page {padding: 60px 0;}
.portfolio-controls{display:flex;gap:10px;margin:20px 0; justify-content: center;}
.filter-btn{
    padding:8px 16px;
    border-radius:var(--radius);
    border:1px solid var(--color-border);
    background:transparent;
    cursor:pointer;
    color: var(--color-muted);
    transition: all 0.3s;
}
.filter-btn:hover {
    color: var(--color-text);
    border-color: var(--color-text);
}
.filter-btn.active{
    background:var(--color-accent);
    border-color:var(--color-accent);
    color: var(--color-text);
}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;}
.project{position:relative;overflow:hidden;border-radius:var(--radius);border: 1px solid var(--color-border-subtle);}
.project img{width:100%;height:280px;object-fit:cover;display:block;}
.project .overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.9) 100%);
    opacity:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:20px;
    transition:all .3s;
}
.project:hover .overlay{opacity:1;}
.project .overlay h3 {font-size: 1.4em;}
.project .overlay p {color: var(--color-accent);}

/* Blog Page (blog.html) */
.blog-page {padding: 60px 0;}
.blog-layout{display:grid;grid-template-columns:3fr 1fr;gap:40px;}
.post-card{display:flex;gap:20px;margin-bottom:25px;background:var(--color-card);padding: 15px;border-radius: var(--radius); border: 1px solid var(--color-border-subtle);}
.post-card img{width:200px;height:140px;object-fit:cover;border-radius:var(--radius);}
.post-body h3 {margin-top: 0;}
.blog-sidebar .widget{background:var(--color-card);padding:20px;border-radius:var(--radius);margin-bottom:20px; border: 1px solid var(--color-border-subtle);}
.blog-sidebar input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
    border-radius: 5px;
}
.blog-sidebar ul {list-style: none; padding: 0;}
.blog-sidebar li {margin-bottom: 8px;}
.blog-sidebar h4 {color: var(--color-accent);}

/* Contact Page (contact.html) */
.contact-page {padding: 60px 0;}
.contact-grid{display:grid;grid-template-columns:2fr 1.5fr;gap:40px;background:var(--color-card);padding:40px;border-radius:var(--radius);}
.contact-form label{display:block;margin-bottom:15px;}
.contact-form input, .contact-form textarea{
    width:100%;
    padding:12px;
    border-radius:var(--radius);
    border:1px solid var(--color-border);
    background:var(--color-bg);
    color:var(--color-text);
    margin-top: 5px;
    font-size: 1em;
}
.contact-form span {
    display: block;
    font-weight: 500;
    color: var(--color-text);
}
.contact-info h3 {color: var(--color-accent); margin-bottom: 15px;}
.contact-info h4 {color: var(--color-text); margin-top: 25px; margin-bottom: 10px;}
.contact-info p {line-height: 1.4;}
.map-placeholder{margin-top: 20px;}
.map-placeholder iframe{border-radius:var(--radius);border:1px solid var(--color-border);}

/* --- 9. Footer --- */
.site-footer{
    padding:40px 0 20px;
    border-top:1px solid var(--color-border-subtle);
}
.footer-inner{
    display:flex;
    gap:40px;
    justify-content:space-between;
    align-items:flex-start;
    padding-bottom:25px;
}
.footer-inner .col{flex:1; min-width: 150px;}
.logo-footer {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 10px;
    display: inline-block;
}
.foot-links{list-style:none;padding:0;margin:0}
.foot-links li{margin-bottom:8px}
.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:15px;
    border-top:1px solid var(--color-border-subtle);
    margin-top:15px;
}
.socials a{
    margin-left:15px;
    color:var(--color-muted);
    font-weight: 600;
}
.socials a:hover {
    color: var(--color-accent);
}

/* --- 10. Responsive Layout --- */
@media (max-width:1080px){
    /* Tablet/Medium Screen Adjustments */
    .hero-inner{flex-direction:column-reverse; text-align: center;}
    .hero-left{max-width:100%;}
    .hero-actions{justify-content: center;}
    h1{font-size:48px;}
    
    /* REVERTING OVAL POSITIONING FOR MOBILE/TABLET */
    .hero-right{
        flex:0 0 auto;
        position: static; /* Reverts to normal flow */
        right: auto;
        top: auto;
        transform: none; /* Removes absolute positioning effects */
        margin-top: 40px; /* Adds space after hero text */
        display: flex;
        justify-content: center;
    }
    .hero-circle{
        width:320px;
        height:320px; /* Reverts to a smaller circle */
    }

    .about-summary-inner {
        flex-direction: column;
    }
    .about-right {
        justify-content: center;
        margin-top: 20px;
    }
    .about-left {
        text-align: center;
    }
    .section-title-left {
        text-align: center;
    }
    .about-stats {
        justify-content: center;
    }

    .why-grid{grid-template-columns:repeat(2,1fr);}
    .frost-cards{grid-template-columns:1fr;}
    .team-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
    /* Mobile Navigation Activation */
    .nav-toggle-btn {display: block;} /* Show mobile button */
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--color-bg);
        border-top: 1px solid var(--color-border-subtle);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }
    .nav.is-open {
        max-height: 400px; /* Adjusted to fit content */
        padding: 10px 0;
    }
    .nav ul {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    /* General Mobile Adjustments */
    .header-inner {padding: 15px 0;}
    h1{font-size:36px;}
    .section-title, .section-title-left {font-size: 28px;}
    .services-grid, .portfolio-grid{grid-template-columns:1fr;}
    .blog-layout{grid-template-columns:1fr;}
    .post-card{flex-direction: column; align-items: center;}
    .post-card img{width: 100%; height: auto; max-height: 200px;}
    .counters-inner {flex-wrap: wrap;}
    .counter-card {flex-basis: 45%;}
    .contact-grid {grid-template-columns: 1fr; padding: 20px;}
    .mini-cta-inner {flex-direction: column; text-align: center; gap: 15px;}
    .partners-inner img {height: 25px;}
    .footer-inner {flex-direction: column; gap: 20px;}
    .footer-bottom {flex-direction: column; gap: 10px;}
}

@media (max-width: 480px) {
    .counters-inner {flex-direction: column;}
    .counter-card {flex-basis: 100%;}
    .why-grid {grid-template-columns: 1fr;}
    .team-grid {grid-template-columns: 1fr;}
    .about-stats {
        flex-direction: column;
        gap: 15px;
    }
}
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background: #25D366; /* WhatsApp green */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 9999;
}

.whatsapp-icon {
  width: 30px;
  height: 30px;
  fill: #fff;
}