/* =========================================================
   REFRO ELECTRICAL AND AIR CONDITIONING - MAIN STYLES
   ========================================================= 

   OVERVIEW: This CSS file contains all styling for the REFRO website.
   It uses CSS custom properties (variables) for consistent colors,
   responsive design patterns, and modern CSS techniques.

   STRUCTURE:
   1. CSS Variables & Root Styling
   2. Base & Reset Styles
   3. Buttons & CTA Elements
   4. Header & Navigation
   5. Hero & Banner Sections
   6. General Layouts & Sections
   7. Card Components
   8. Forms
   9. Footer
   10. WhatsApp Integration Styles (NEW)
   11. Responsive Design (Mobile)
   12. Utility Classes
   13. Animations
   ========================================================= */

/* --- CSS Variables (Color Palette & Spacing) --- 

   These custom properties define the design system.
   By changing variables here, colors update throughout the site.
   Benefits: Consistency, easier maintenance, brand color management.
*/
:root {
  /* PRIMARY BRAND COLORS */
  --color-red: #e10600;      /* Red - primary brand accent, calls-to-action */
  --color-black: #111111;    /* Black - headers, dark backgrounds */
  --color-white: #ffffff;    /* White - backgrounds, text contrast */
  --color-blue: #1f5fbf;     /* Blue - secondary accent, hover states */

  /* WHATSAPP INTEGRATION COLORS (NEW) */
  --color-whatsapp: #25D366;   /* WhatsApp brand green - primary WhatsApp CTA */
  --color-whatsapp-dark: #128C7E; /* Darker green for hover states */
  --color-whatsapp-light: #DCF8C6; /* Light green for backgrounds */

  /* GRAY SCALE - Used for subtler elements */
  --color-light-gray: #f4f4f4;  /* Light backgrounds, alt sections */
  --color-text-gray: #555555;   /* Body text - readable contrast */
  --color-border: #dddddd;      /* Borders, dividers */

  /* TYPOGRAPHY */
  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Primary font */

  /* TRANSITIONS & EFFECTS */
  --transition: all 0.3s ease-in-out;  /* Smooth animations for all properties */
  --box-shadow: 0 4px 12px rgba(0,0,0,0.08);  /* Subtle shadow for depth */
}

/* --- Base & Reset --- 

   Resets default browser styling to ensure consistent display
   across different browsers and devices.
*/
* {
  /* Remove all default margins and padding */
  margin: 0;
  padding: 0;
  /* Include padding/border in width/height calculations */
  box-sizing: border-box;
}

body {
  /* Set primary font for entire document */
  font-family: var(--font-main);
  /* Default text color - dark gray for readability */
  color: var(--color-text-gray);
  /* Line height improves readability by spacing text vertically */
  line-height: 1.6;
  /* White background - standard web practice */
  background-color: var(--color-white);
  /* Prevent horizontal scroll from large elements */
  overflow-x: hidden;
}

/* All headings use black color for strong visual hierarchy */
h1, h2, h3, h4 {
  color: var(--color-black);
  /* Small margin below headings for separation */
  margin-bottom: 0.5rem;
  /* Tighter line height for headings looks more professional */
  line-height: 1.2;
}

/* Links - Remove underline and inherit color, add smooth transitions */
a {
  text-decoration: none;   /* Remove default link underline */
  color: inherit;          /* Use parent element's color */
  transition: var(--transition);  /* Smooth color/style changes on hover */
}

/* Remove bullet points from all lists */
ul {
  list-style: none;
}

img {
  /* Images never exceed their container width */
  max-width: 100%;
  /* Maintain aspect ratio when width changes */
  height: auto;
  /* Prevent alignment issues with inline images */
  display: block;
}

/* Container - Maximum width wrapper for all content
   Ensures content doesn't stretch too wide on large screens */
.container {
  /* Maximum width on desktop - improves readability */
  max-width: 1200px;
  /* Center container on page */
  margin: 0 auto;
  /* Padding on sides prevents content touching screen edges */
  padding: 0 20px;
}

/* UTILITY CLASSES - Reusable styling patterns */
.text-center { text-align: center; }        /* Center all text */
.mt-2 { margin-top: 1rem; }                 /* Small top margin */
.mt-3 { margin-top: 2rem; }                 /* Medium top margin */
.mt-4 { margin-top: 3rem; }                 /* Large top margin (40px) */
.text-red { color: var(--color-red); }      /* Red text accent */
.text-blue { color: var(--color-blue); }    /* Blue text accent */
.w-100 { width: 100%; }                     /* Full width element */

/* --- BUTTONS SECTION ---

   Button styles for Call-to-Actions (CTAs).
   Two main variants: Primary (red) and Secondary (black).

   Usage:
   <a href="#" class="btn btn-primary">Action</a>
   <a href="#" class="btn btn-secondary">Alternative</a>
*/

/* Base button styling - common to all button types */
.btn {
  /* Inline-block allows padding while flowing with text */
  display: inline-block;
  /* Internal spacing around button text */
  padding: 12px 24px;
  /* Slightly rounded corners for modern look */
  border-radius: 4px;
  /* Bold text stands out */
  font-weight: 600;
  /* Pointer cursor indicates clickable element */
  cursor: pointer;
  /* Remove browser default button border */
  border: none;
  /* Smooth transitions for all property changes */
  transition: var(--transition);
}

/* PRIMARY BUTTON - Red background, white text */
.btn-primary {
  background-color: var(--color-red);   /* Red background */
  color: var(--color-white);             /* White text for contrast */
}

/* Primary button hover state - slightly darker red + lift effect */
.btn-primary:hover {
  background-color: #bc0500;  /* Darker red on hover */
  transform: translateY(-2px);  /* Lift button up for 3D effect */
}

/* SECONDARY BUTTON - Black background, white text */
.btn-secondary {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Secondary button hover state - dark gray + lift effect */
.btn-secondary:hover {
  background-color: #333;  /* Slightly lighter black */
  transform: translateY(-2px);  /* Same lift effect as primary */
}

/* --- HEADER / NAVIGATION SECTION ---

   The header contains the logo, main navigation menu, and mobile hamburger button.
   Uses sticky positioning to stay at top while scrolling.
*/

.site-header {
  /* White background keeps contrast with hero section */
  background-color: var(--color-white);
  /* Subtle shadow below header for depth */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  /* Sticky: stays at top while user scrolls */
  position: sticky;
  top: 0;
  /* High z-index ensures header stays above other content */
  z-index: 1000;
  /* Full width of viewport */
  width: 100%;
}

.nav-container {
  /* Same max-width as content containers for alignment */
  max-width: 1200px;
  /* Center horizontally on page */
  margin: 0 auto;
  /* Internal spacing */
  padding: 10px 20px;
  /* Flexbox for horizontal layout */
  display: flex;
  /* Vertically center all items */
  align-items: center;
  /* Keeps the nav clustered near the logo, not pushed far right */
  justify-content: flex-start; 
  /* Space between logo and nav menu */
  gap: 40px; 
}

/* LOGO SECTION - Brand identity */
.logo-link {
  /* Horizontal flex layout for logo image and text */
  display: flex;
  /* Center logo and text vertically */
  align-items: center;
  /* Space between image and text */
  gap: 10px;
}

/* Brand logo image */
.brand-logo {
  /* Fixed square size */
  height: 50px;
  width: 50px;
  /* Crop image to square if needed */
  object-fit: cover;
  /* Slightly rounded corners for modern look */
  border-radius: 4px;
}

/* Brand name text next to logo */
.brand-name {
  /* Large, prominent text */
  font-size: 1.5rem;
  /* Bold weight for emphasis */
  font-weight: bold;
  /* Dark color for contrast */
  color: var(--color-black);
}

/* NAVIGATION MENU */
.main-nav {
  /* Margin from logo keeps them slightly separated */
  margin-left: 20px; 
}

.nav-links {
  /* Horizontal flex layout for menu items */
  display: flex;
  /* Space between menu items */
  gap: 20px;
}

/* Individual navigation links */
.nav-links a {
  /* Bold text for better visibility */
  font-weight: 600;
  /* Dark text color */
  color: var(--color-black);
  /* Small padding for clickable area */
  padding: 5px 0;
}

/* Hover and active link states */
.nav-links a:hover,
.nav-links a.active {
  /* Red accent on hover/active */
  color: var(--color-red);
  /* Red underline indicator */
  border-bottom: 2px solid var(--color-red);
}

/* MOBILE HAMBURGER MENU - Hidden on desktop */
.menu-toggle {
  /* Hidden by default - shown on mobile via media query */
  display: none;
  /* No background */
  background: none;
  /* No border */
  border: none;
  /* Pointer cursor indicates clickable */
  cursor: pointer;
  /* Flex for stacking hamburger lines vertically */
  flex-direction: column;
  /* Space between hamburger lines */
  gap: 5px;
  /* Pushes hamburger to far right on mobile */
  margin-left: auto; 
}

/* Individual lines in hamburger icon */
.menu-toggle span {
  /* Horizontal line dimensions */
  width: 25px;
  height: 3px;
  /* Dark color for visibility */
  background-color: var(--color-black);
  /* Smooth transition for animations */
  transition: var(--transition);
}

/* --- HERO SECTION (Landing/Main Banner) ---

   The hero section is the first thing users see.
   Contains headline, description, and call-to-action buttons.
*/

.hero {
  /* Light gray background for contrast */
  background-color: var(--color-light-gray);
  /* Large vertical padding for spacious feel */
  padding: 100px 20px;
  /* Center all text */
  text-align: center;
  /* Blue bottom border for visual interest */
  border-bottom: 4px solid var(--color-blue);
}

.hero-content {
  /* Limit text width for readability */
  max-width: 800px;
  /* Center content horizontally */
  margin: 0 auto;
}

/* Hero main heading */
.hero h1 {
  /* Large, prominent text */
  font-size: 3rem;
  /* Dark color */
  color: var(--color-black);
  /* Space below heading */
  margin-bottom: 20px;
}

/* Hero description paragraph */
.hero p {
  /* Larger text for prominence */
  font-size: 1.2rem;
  /* Space below for buttons */
  margin-bottom: 30px;
}

/* Container for hero action buttons */
.hero-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

/* Page Banners */
.page-banner {
  padding: 60px 20px;
  background-color: var(--color-black);
  color: var(--color-white);
  border-bottom: 4px solid var(--color-red);
}
.page-banner h1 {
  color: var(--color-white);
}

/* --- General Sections & Layouts --- */
.section {
  padding: 80px 0;
}
.bg-light {
  background-color: var(--color-light-gray);
}
.bg-dark {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Split Layout (Image + Text) */
.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.align-start {
  align-items: flex-start;
}
.row-reverse {
  direction: rtl; /* simple trick to swap columns on desktop */
}
.row-reverse > * {
  direction: ltr; /* resets text direction inside columns */
}
.split-image img {
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  width: 100%;
  object-fit: cover;
}

/* Check lists (Services/About) */
.check-list li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}
.check-list li::before {
  content: "\2713"; /* Unicode checkmark */
  position: absolute;
  left: 0;
  color: var(--color-red);
  font-weight: bold;
}

/* --- Cards Grid (Services, Projects, Testimonials) --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.card {
  background: var(--color-white);
  padding: 30px;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  border: 1px solid var(--color-border);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}
.card-icon {
  font-size: 2.5rem;
  margin-bottom: 15px;
}
.red-icon { color: var(--color-red); }
.blue-icon { color: var(--color-blue); }

/* Project Cards */
.project-card {
  padding: 0;
  overflow: hidden;
}
.project-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-card:hover .project-img {
  transform: scale(1.05);
}
.project-info {
  padding: 20px;
}
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--color-white);
  margin-bottom: 10px;
}
.red-badge { background-color: var(--color-red); }
.blue-badge { background-color: var(--color-blue); }
.dark-badge { background-color: var(--color-black); }

/* Testimonial Cards */
.testimonial-card .quote {
  font-style: italic;
  margin: 15px 0;
}

/* Highlights Bar */
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: var(--color-black);
  color: var(--color-white);
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  transform: translateY(-50%); /* Pulls it up into the hero */
  box-shadow: var(--box-shadow);
}

/* --- Forms --- */
.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--color-black);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-blue);
}

/* --- Footer --- */
.site-footer {
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 60px 0 20px;
  border-top: 5px solid var(--color-red);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-logo {
  height: 60px;
  margin-bottom: 15px;
  border-radius: 4px;
}
.footer-links h3,
.footer-contact h3 {
  color: var(--color-white);
  margin-bottom: 20px;
  font-size: 1.2rem;
}
.footer-links ul li {
  margin-bottom: 10px;
}
.footer-links ul li a:hover {
  color: var(--color-red);
  padding-left: 5px;
}
.footer-contact p {
  margin-bottom: 10px;
}
.footer-bottom {
  border-top: 1px solid #333;
  padding-top: 20px;
  font-size: 0.9rem;
  color: #aaa;
}
.agency-credit {
  margin-top: 5px;
  font-size: 0.85rem;
}

/* =========================================================
   WHATSAPP INTEGRATION STYLES (NEW SECTION)
   =========================================================

   These styles add WhatsApp functionality to the contact page
   while maintaining the existing REFRO brand identity.

   Features:
   - WhatsApp CTA buttons styled with brand colors
   - Floating action button for persistent WhatsApp access
   - WhatsApp card with descriptive text and action buttons
   - Hover animations consistent with existing button patterns

   Color Mapping:
   - WhatsApp Primary: #25D366 (WhatsApp brand green)
   - WhatsApp Secondary: #128C7E (darker green for hover)
   - WhatsApp Light: #DCF8C6 (background tint)
   - Border accent: var(--color-red) for brand consistency
*/

/* --- WhatsApp Card Component ---

   The WhatsApp card sits inside the contact info column.
   It provides a dedicated space for WhatsApp CTAs with
   brand-consistent styling.
*/
.whatsapp-card {
  /* Subtle green tint background to distinguish from other cards */
  background: linear-gradient(135deg, var(--color-white) 0%, var(--color-whatsapp-light) 100%);
  /* Red left border ties it to REFRO brand identity */
  border-left: 4px solid var(--color-red);
}

.whatsapp-card h3 {
  /* WhatsApp icon color */
  color: var(--color-whatsapp);
  display: flex;
  align-items: center;
  gap: 10px;
}

.whatsapp-card h3 i {
  font-size: 1.5rem;
}

/* --- WhatsApp Primary Button ---

   Main CTA for WhatsApp chat. Uses WhatsApp green but
   follows the same button pattern as existing CTAs.
*/
.btn-whatsapp {
  background-color: var(--color-whatsapp);
  color: var(--color-white);
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-whatsapp:hover {
  background-color: var(--color-whatsapp-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp i {
  font-size: 1.2rem;
}

/* --- Floating WhatsApp Button ---

   Fixed-position button that remains visible while scrolling.
   Positioned bottom-right corner for easy thumb access on mobile.
   Uses WhatsApp green with white icon for instant recognition.

   Position: fixed - stays in viewport regardless of scroll
   z-index: 9999 - above all other content
   box-shadow - adds depth and visibility
   transition - smooth hover animation
*/
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: var(--color-whatsapp);
  color: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  transition: var(--transition);
  text-decoration: none;
}

.whatsapp-float:hover {
  background-color: var(--color-whatsapp-dark);
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* Pulse animation for floating button to draw attention */
.whatsapp-float::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--color-whatsapp);
  opacity: 0.6;
  z-index: -1;
  animation: whatsapp-pulse 2s infinite;
}

@keyframes whatsapp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.4);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* --- Utility Classes --- */
.subtitle { color: #666; font-size: 1.1rem; margin-bottom: 20px; }
.text-light { color: #999; font-size: 0.9rem; }
.text-small { font-size: 0.85rem; }
.mb-3 { margin-bottom: 2rem; }
.mt-4 { margin-top: 40px; }
.justify-center { justify-content: center; }
.caption { font-size: 0.9rem; color: #999; margin-top: 10px; }
.caption-bold { font-size: 0.9rem; color: #999; margin-top: 10px; font-weight: bold; }
.description-text { color: #666; margin-bottom: 20px; font-size: 1.05rem; }
.container-50 { max-width: 600px; margin: 0 auto; }

/* --- Animations --- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* --- Responsive Breakpoints --- */
@media (max-width: 992px) {
  .highlights-grid {
    grid-template-columns: repeat(2, 1fr);
    transform: translateY(0); /* Reset overlap on tablets */
    margin: 20px auto;
  }
  .split-layout {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* WhatsApp float button sizing for tablets */
  .whatsapp-float {
    width: 55px;
    height: 55px;
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .nav-container {
    justify-content: space-between; /* Space out logo and hamburger */
    gap: 0;
  }
  .main-nav {
    display: none; /* Hide default nav */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--color-white);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-left: 0;
  }
  .main-nav.show {
    display: block;
  }
  .nav-links {
    flex-direction: column;
    gap: 0;
  }
  .nav-links a {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border);
  }
  .menu-toggle {
    display: flex;
  }
  .hero h1 {
    font-size: 2rem;
  }
  .hero-buttons {
    flex-direction: column;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  /* WhatsApp float button positioning for mobile */
  .whatsapp-float {
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 1.6rem;
  }
  /* WhatsApp card adjustments for mobile */
  .whatsapp-card {
    border-left: none;
    border-top: 4px solid var(--color-red);
  }
}