/* ===================================
   MILKY WAY WEB STUDIO
   Complete Stylesheet - index.css
   =================================== */

/* ===================================
   1. CSS VARIABLES
   =================================== */
:root {
  --font-family: system-ui;
  /* Green Palette 
  --light-green: rgb(232, 245, 233);
  --forest: rgb(102, 187, 106);
  --emerald: #4caf50;
  --dark-green: #388e3c;
  --forest-dark: rgb(46, 125, 50);
  --seagreen: SeaGreen;*/
  
  /* Blue Palette 
  --light-blue: #e3e8f5;
  --pale-blue: rgb(197, 213, 245);
  --medium-blue: rgb(107, 141, 214);*/
  --primary-blue: #3498db;
  --dark-blue: rgb(26, 58, 125);
  --navy-blue: #2851a3;
  --sidebar-blue: #2980b9;
  
  /* Yellow Palette 
  --light-yellow: rgb(255, 253, 231);
  --pale-yellow: rgb(255, 249, 196);*/
  --bright-yellow: rgba(255, 235, 59, 0.7);
  
  /* Red/Orange/Green Palette */
  --primary-red: #e74c3c;
  --dark-red: #c0392b;
  --primary-orange: #f57f17;
  --dark-orange: #e67300;
  --primary-green: #27ae60;
  --dark-green-alt: #229954;
  
  /* Neutral Colors */
  --sidebar-darker: rgb(44, 62, 80);
  --sidebar-dark: rgb(52, 73, 94);
  /* --text-dark-green: #1b5e20; */
  --text-white: #ffffff;
  --text-light-gray: rgb(236, 240, 241);
  --text-medium-gray: #bdc3c7;
  /* --text-black: rgb(0, 0, 0); */
  --text-dark: #333;
  --tree-gray: #9fa8a3;
  --gray: rgba(128, 128, 128, 0.5);
  --border-gray: #ddd;
  --bg-light-gray: #f5f5f5;
  
  /* Shadows and Effects */
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-medium: rgba(0, 0, 0, 0.15);
  --shadow-dark: rgba(0, 0, 0, 0.2);
  --shadow-darker: rgba(0, 0, 0, 0.3);
  --shadow-blue: rgba(52, 152, 219, 0.4);
  --shadow-blue-dark: rgba(52, 152, 219, 0.3);
  --shadow-red: rgba(231, 76, 60, 0.5);
  --shadow-red-dark: rgba(231, 76, 60, 0.4);
  --shadow-orange: rgba(245, 127, 23, 0.5);
  --shadow-orange-dark: rgba(245, 127, 23, 0.4);
  --shadow-green: rgba(39, 174, 96, 0.5);
  --shadow-green-dark: rgba(39, 174, 96, 0.4);
  --overlay-dark: rgba(0, 0, 0, 0.5);
  
  /* Fire Shadow Effect Colors */
  --fire-orange-1: rgba(255, 165, 0, 0.8);
  --fire-orange-2: rgba(255, 140, 0, 0.6);
  --fire-orange-3: rgba(255, 69, 0, 0.4);
  /*--fire-red: rgba(255, 0, 0, 0.8);*/
  --fire-red-1: rgba(255, 0, 0, 0.8);
  /* Header Theme Colors 
  --header-bg-seagreen: SeaGreen;
  --header-text-seagreen: white;
  --header-bg-lightseagreen: LightSeaGreen;
  --header-text-lightseagreen: white;
  --header-bg-lightskyblue: LightSkyBlue;
  --header-text-lightskyblue: #1a1a1a;
  --header-bg-mintcream: MintCream;
  --header-text-mintcream: #1a1a1a;
  --header-bg-moccasin: Moccasin;
  --header-text-moccasin: #1a1a1a;
  --header-bg-light-blue: rgb(229, 234, 246);*/
  
  /* Nav link spacing options */
  --nav-spacing-wide: 40px;
  --nav-spacing-normal: 20px;
  --nav-spacing-compact: 15px;

/*NEW ROOT VARIABLES FOR BACKGROUND THEMES*/
--bg-clr-nav:rgb(229, 234, 246);

--bg-clr-sidebar:rgb(44, 62, 80);
--bg-clr-sidebar-2:rgb(44, 62, 80);

--bg-clr-hero:rgb(229, 234, 246);
--bg-clr-section:rgb(229, 234, 246);
/*--bg-clr-section-3:rgb(255, 253, 231);*/
--bg-clr-section-2:rgb(218, 251, 240);
--bg-clr-section-3:rgb(218, 251, 240);
--bg-clr-section-3-2:rgb(102, 187, 106);
--bg-clr-section-4:rgb(102, 187, 106);
--bg-clr-section-4-2:rgb(218, 251, 240);
--bg-clr-card: rgb(236, 239, 245);
--bg-clr-card-2: rgb(236, 239, 245);
--bg-clr-card-3: rgb(236, 239, 245);
--bg-clr-btn-1: rgb(231, 76, 60);
--bg-clr-btn-2: rgb(245, 127, 40);
--bg-clr-btn-3: rgb(39, 174, 96);
--bg-clr-btn-4: rgb(52, 152, 219);
--bg-clr-btn-5: rgb(231, 76, 60);
--bg-clr-footer: rgb(44, 62, 80);

--clr-main-content: rgb(255, 255, 255);
--clr-nav: rgb(229, 234, 246);
--clr-main: rgb(229, 234, 246);
/*--clr-header: rgb(229, 234, 246);*/
--clr-header: rgb(245, 127, 23);
--clr-sidebar: rgb(44, 62, 80);
--clr-sidebar-2: rgb(44, 62, 80);
--clr-sidebar-h: rgb(52, 152, 219);
--clr-portfolio-h: rgb(236, 240, 241);

--clr-section: rgb(229, 234, 246);
--clr-section-h: rgb(26, 58, 125);
--clr-section-2: rgb(0, 0, 0);
--clr-section-2-h: rgb(26, 58, 125);
--clr-section-3: rgb(229, 234, 246);
--clr-section-3-h: rgb(26, 58, 125);
--clr-section-3-h-2: rgb(26, 58, 125);
--clr-section-4: rgb(102, 187, 106);
--clr-footer: rgb(44, 62, 80);
--clr-footer-2: rgb(44, 62, 80);
--clr-footer-3: rgb(44, 62, 80);
--clr-btn-1: rgb(231, 76, 60);
--clr-btn-2: rgb(245, 127, 40);
--clr-btn-3: rgb(39, 174, 96);
--clr-btn-4: rgb(52, 152, 219);
--clr-btn-5: rgb(231, 76, 60);
--clr-card: rgb(0, 0, 0);

--brd-clr-card: rgb(39, 174, 96);

/*Keep These*/
--gray: rgba(128, 128, 128, 0.5);
}
/* ===================================
   2. RESET & BASE STYLES
   =================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

section {
  padding: 60px 0;
}

h1, h2 {
  margin-bottom: 20px;
}

p {
  margin-bottom: 15px;
}

/* ===================================
   3. LAYOUT - PAGE WRAPPER
   =================================== */
.page-wrapper {
  display: flex;
  min-height: 100vh;
}

.main-content {
  flex: 1;
  margin-left: 280px;
}

/* ===================================
   4. HEADER STYLES
   =================================== */
/* Base header styling - applies to all headers */
[class*="-header"] {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 15px 30px;
  height: 70px;
  box-sizing: border-box;
}

/* Logo positioning - far left (column 1) */
[class*="-header"] .logo {
  grid-column: 1;
}

[class*="-header"] .logo img {
  height: 50px;
  width: auto;
}

/* Show full logo by default (desktop/iPad) */
.logo .mobile-logo {
  display: none;
}

/* Title positioning - next to logo (column 2) */
[class*="-header"] .title {
  grid-column: 2;
  font-size: 24px;
  font-weight: bold;
  color: var(--clr-header);
  text-shadow: 2px 2px 4px var(--gray);
}

/* Nav container - positioned right (column 3) */
[class*="-header"] nav {
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-self: end;
}

/* Nav link base styling */
[class*="-header"] nav a {
  text-decoration: none;
  padding: 8px 12px;
  transition: opacity 0.3s;
}

[class*="-header"] nav a:hover {
  opacity: 0.7;
}

/* SeaGreen Theme (Currently in use) */
.-header{
  background-color: var(--bg-clr-nav);
}

/*.seagreen-header {
  background-color: var(--header-bg-seagreen);
}
.light-blue-header {
  background-color: var(--header-bg-light-blue);  
}

.sidebar-dark-header {
  background-color: var(--sidebar-dark);
}

.seagreen-header nav a {
  color: var(--header-text-seagreen);
  margin-left: var(--nav-spacing-normal);
}
  */

/* ===================================
   5. SIDEBAR STYLES
   =================================== */
.sidebar {
  width: 280px;
  background: linear-gradient(180deg, var(--bg-clr-sidebar) 0%, var(--bg-clr-sidebar-2) 100%);
  color: var(--clr-sidebar);
  padding: 20px;
  padding-top: 170px;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow: 2px 0 10px var(--shadow-light);
}

.sidebar h2 {
color: var(--clr-sidebar-h);
border-bottom: 2px solid var(--clr-sidebar-h);
  margin-bottom: 20px;
  font-size: 1.5rem;
  padding-bottom: 10px;
}

.portfolio-category {
  margin-bottom: 25px;
}

.portfolio-category h3 {
  color: var(--text-light-gray);
  font-size: 1.1rem;
  margin-bottom: 10px;
  padding-left: 5px;
}

.portfolio-category ul {
  list-style: none;
}

.portfolio-category li {
  margin-bottom: 8px;
}

.portfolio-category a {
  color: var(--text-medium-gray);
  text-decoration: none;
  display: block;
  padding: 8px 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-size: 0.8rem;
}

.portfolio-category a:hover {
  background-color: var(--primary-blue);
  color: var(--clr-main-content);
  transform: translateX(5px);
}

/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 70px;
  left: 15px;
  z-index: 1001;
  background-color: var(--primary-blue);
  color: var(--clr-main-content);
  border: none;
  padding: 12px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  box-shadow: 0 2px 10px var(--shadow-dark);
}

.mobile-menu-btn:hover {
  background-color: var(--sidebar-blue);
}

/* Overlay when sidebar is open */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-dark);
  z-index: 999;
}

.sidebar-overlay.active {
  display: block;
}

/* ===================================
   6. GRID SYSTEM
   =================================== */
/* Container - wraps your grid rows */
.grid-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Row - contains your columns */
.grid-row {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

/* Column Layouts */
.grid-row.two-col {
  grid-template-columns: 1fr 1fr;
}

.grid-row.three-col {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Gap Utilities */
.grid-row.gap-large {
  gap: 40px;
}

/* Column - individual grid items */
.grid-col {
  padding: 20px;
  background-color: var(--bg-light-gray);
  border: 1px solid var(--border-gray);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Only apply hover lift to Services section */
#services .grid-col:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px var(--shadow-medium);
}
#testimonial-cards {
  align-items: start;
}


/* ===================================
   7. COLOR UTILITY CLASSES
   =================================== */
/* Section/Component Backgrounds */
.bg-light-green {
  background-color: var(--light-green);
  color: var(--text-dark-green);
}
.bg-light-blue{
  background-color: var(--light-blue);
  color: white;

}


.bg-forest {
  background-color: var(--forest);
  color: var(--text-white);
}

.bg-emerald {
  background-color: var(--emerald);
  color: var(--text-white);
}

.bg-dark-green {
  background-color: var(--dark-green);
  color: var(--text-white);
}

.bg-forest-dark {
  background-color: var(--forest-dark);
  color: var(--text-white);
}

/* Gradient Backgrounds */
/* not light green medium exist*/
.bg-gradient-green {
  background: linear-gradient(135deg, var(--light-green-medium) 0%, var(--emerald) 100%);
  color: var(--clr-main-content);
}

.bg-gradient-forest {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-dark) 100%);
  color: var(--clr-main-content);
}

/* Text Colors */
.text-dark-green {
  color: var(--forest-dark);
}

/* ===================================
   8. BUTTONS & CTA
   =================================== */
/* Button hover enhancement */
button {
  transition: all 0.3s ease;
}

button:hover {
  background-color: var(--primary-blue) !important;
  color: var(--clr-main-content) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow-blue);
}

/* Button click/press down effect */
button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px var(--shadow-blue-dark);
  transition: all 0.1s ease;
}

/* Call to Action Buttons Container */
.cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

.cta-button {
  text-decoration: none;
}

/* Call Now Button - Tilt Left Animation */
.btn-call {
  background-color: var(--primary-red);
  color: var(--clr-main-content);
  padding: 15px 40px;
  font-size: 1.1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-call:hover {
  background-color: var(--dark-red) !important;
  transform: translateY(-5px) rotate(2deg) !important;
  box-shadow: 0 10px 30px var(--shadow-red) !important;
  animation: tiltLeft 0.5s ease !important;
}

@keyframes tiltLeft {
  0%, 100% { transform: translateY(-5px) rotate(2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

.btn-call:active {
  transform: translateY(-2px) rotate(1deg) !important;
  box-shadow: 0 5px 15px var(--shadow-red-dark) !important;
}

/* Get Started Button - Pulse Animation */
.btn-start {
  background-color: var(--primary-orange);
  color: var(--clr-main-content);
  padding: 15px 40px;
  font-size: 1.1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
  animation: pulseMid 2.5s infinite;
}

@keyframes pulseMid {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--bright-yellow);
  }
  50% {
    box-shadow: 0 0 8px 8px rgba(255, 235, 59, 0);
  }
}

.btn-start:hover {
  background-color: var(--dark-orange) !important;
  transform: scale(1.1) !important;
  animation: none;
  box-shadow: 0 8px 25px var(--shadow-orange) !important;
}

.btn-start:active {
  transform: scale(1.05) !important;
  box-shadow: 0 4px 15px var(--shadow-orange-dark) !important;
}

/* Email Button - Bounce Animation */
.btn-email {
  background-color: var(--primary-green);
  color: var(--clr-main-content);
  padding: 15px 40px;
  font-size: 1.1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-email:hover {
  background-color: var(--dark-green-alt) !important;
  transform: translateY(-5px) rotate(-2deg) !important;
  box-shadow: 0 10px 30px var(--shadow-green) !important;
  animation: bounce 0.5s ease !important;
}

@keyframes bounce {
  0%, 100% { transform: translateY(-5px) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(-2deg); }
}

.btn-email:active {
  transform: translateY(-2px) rotate(-1deg) !important;
  box-shadow: 0 5px 15px var(--shadow-green-dark) !important;
}

/* Hero section h1 fire shadow */
.hero-title {
  text-shadow: 
    0 0 10px var(--fire-orange-1),
    0 0 20px var(--fire-orange-2),
    0 0 30px var(--fire-orange-3),
    2px 2px 4px var(--shadow-darker);
}
.hero-p {
  text-shadow: 
    1px 1px 30px var(--fire-red-1),
    2px 2px 4px var(--shadow-darker);
}


/* ===================================
   10. FOOTER STYLES
   =================================== */
.footer {
  background-color: var(--bg-clr-footer);
  color: var(--text-light-gray);
  padding: 40px 20px 20px;
  margin-top: 60px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 30px;
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col:first-child {
  margin-right: 40px;
}

.footer-col h3 {
  color: var(--primary-blue);
  margin-bottom: 15px;
  font-size: 1.2rem;
}

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

.footer-col ul li {
  margin-bottom: 10px;
  line-height: 1.4;
  margin-bottom: 3px;
}

.footer-col a {
  color: var(--text-light-gray);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-col a:hover {
  color: var(--primary-blue);
  transform: translateX(3px);
}

.footer-col p {
  line-height: 1.6;
  color: var(--text-medium-gray);
}

/* Footer Bottom - Copyright Area */
.footer-bottom {
  border-top: 1px solid var(--bg-clr-footer);
  padding-top: 20px;
  text-align: center;
}

.footer-bottom p {
  margin: 0;
  color: #95a5a6;
  font-size: 0.9rem;
}

/* ===================================
   11. RESPONSIVE DESIGN
   =================================== */
/* Tablets (max-width: 1024px) */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    padding-top: 20px;
    overflow-y: auto;
  }
  
  .sidebar.active {
    transform: translateX(0);
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .main-content {
    margin-left: 0;
  }
}
.hero-p {
  color: var(--fire-orange-1);
  font-size: 1.3rem;
  margin-bottom: 30px;
}
#hero {
  position: relative;
  overflow: hidden;
}

#hero canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#hero .grid-container {
  position: relative;
  z-index: 1;
}

/* Tablets (max-width: 768px) */
@media (max-width: 768px) {
   /*trees background size adjustments*/
  #hero {
  padding-bottom: .8% !important;
}
   #features {
  background-size: 1%, 12% !important;
  padding-top: 8px !important;
  }
   /* #testimonials {
    background-color: var(--bg-clr-section-3);
     padding: 60px 0;
      background-image: url('images/mesquite-tree\(2\)-trans.png'), url('images/mesquite-tree\(2\)-trans.png');
       background-repeat: no-repeat, no-repeat;
        background-position: 10% 5%, left 95%;
         background-size: 6%, 9%;
  }*/
  
  #action{
    padding: 3% 1% 1% 1% !important;
  }
  /* Header - switch to mobile logo */
  
  .logo .desktop-logo {
    display: none;
  }
  
  .logo .mobile-logo {
    display: block;
    height: 40px;
  }
  
  /* Grid - stack 3-column to 2-column */
  .grid-row.three-col {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Footer - 2 columns */
  .footer-content {
    grid-template-columns: 1fr 1fr;
  }
  
  .footer {
    padding: 30px 15px 15px;
  }
  
  /* CTA buttons */
  .cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
  
  .btn-call, .btn-start, .btn-email {
    width: 100%;
    max-width: 300px;
  }
  
  
  /* Typography */
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.8rem !important;
  }
  
  /* Hero section 
  section.bg-gradient-green {
    padding: 30px 15px !important;
  }
  
  .bg-gradient-green p {
    font-size: 1.1rem !important;
  }*/
  
  /* Sections */
  section {
    padding: 40px 0 !important;
  }
  
  /* Buttons */
  button {
    padding: 12px 30px !important;
    font-size: 1rem !important;
  }
  
  /* Links */
  a {
    padding: 5px;
    display: inline-block;
  }
  
  /* Grid columns */
  .grid-col {
    padding: 15px !important;
  }
  
  /* Call to action section */
  .bg-gradient-forest {
    padding: 50px 15px !important;
  }
  
  .bg-gradient-forest h2 {
    font-size: 2rem !important;
  }
  
  .bg-gradient-forest p {
    font-size: 1rem !important;
  }
  
}

/* Mobile (max-width: 480px) */
@media (max-width: 480px) {
  /*trees background size adjustments*/
  #features {
  background-size: 9%, 11% !important;
}
 #testimonials {
  background-size: 100%, 100% !important;
}
 /*#testimonials {
    background-color: var(--bg-clr-section-3);
     padding: 60px 0;
      background-image: url('images/mesquite-tree')
  background-size: 100%, 1% !important;*/

  /* Grid - stack everything to single column */
  .grid-row.two-col,
  .grid-row.three-col {
    grid-template-columns: 1fr;
  }
  
  /* Footer - single column */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  /* Typography */
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  /* Header title */
  .title {
    font-size: 18px !important;
  }
}