/* Color Theme Variables */
:root {
    /* Primary Color - Vibrant Lime Green */
    --primary: #A4D138;
    --primary-light: #C1E06B;
    --primary-dark: #88B01D;
    
    /* Secondary Color - Warm Orange */
    --secondary: #FF9400;
    --secondary-light: #FFB04D;
    --secondary-dark: #D17900;
    
    /* Accent/Neutral Color - Muted Gray */
    --accent: #8F8E9C;
    --accent-light: #ACACB7;
    --accent-dark: #6F6E7C;
    
    /* Additional Colors for UI Elements */
    --dark: #333340;
    --light: #F8F9FA;
    --gray: #6C757D;
    --success: #28A745;
    --warning: #FFC107;
    --danger: #DC3545;
    --info: #17A2B8;
    
    /* Text Colors */
    --text-dark: #333340;
    --text-light: #F8F9FA;
    --text-muted: #8F8E9C;
  }
  
  /* Additional styles for inner pages */
  
  /* Page Hero */
  .page-hero {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: var(--text-dark);
      padding: 4rem 0;
      text-align: center;
  }
  
  .page-hero h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      font-weight: 700;
  }
  
  .page-hero p {
      font-size: 1.2rem;
      max-width: 700px;
      margin: 0 auto;
  }
  
  /* Services Overview Page */
  .services-overview {
      padding: 5rem 0;
  }
  
  .service-detail {
      margin-bottom: 5rem;
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      border-bottom: 4px solid var(--primary);
      border-right: 3px solid var(--secondary);
      
  }
  
  .service-detail:last-child {
      margin-bottom: 0;
  }
  
  .service-image img {
      width: 100%;
      height: 400px;
      object-fit: cover;
  }
  
  .service-content {
      padding: 2rem;
  }
  
  .service-content h3 {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: var(--dark);
  }
  
  .service-content h4 {
      font-size: 1.3rem;
      margin: 2rem 0 1rem;
      color: var(--dark);
  }
  
  .service-content ul {
      list-style: none;
      margin-bottom: 2rem;
  }
  
  .service-content ul li {
      margin-bottom: 1.5rem;
  }
  
  .service-content ul li strong {
      display: block;
      margin-bottom: 0.5rem;
      color: var(--primary);
  }
  
  .tech-stack {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 2rem;
  }
  
  .tech-stack span {
      background-color: rgba(164, 209, 56, 0.1);
      color: var(--primary-dark);
      padding: 0.5rem 1rem;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 500;
  }
  
  /* CTA Section */
  .cta-section {
      background-color: var(--dark);
      color: var(--text-light);
      padding: 4rem 0;
      text-align: center;
  }
  
  .cta-section h2 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
  }
  
  .cta-section p {
      max-width: 700px;
      margin: 0 auto 2rem;
      font-size: 1.1rem;
  }
  
  .btn-large {
      padding: 1rem 2rem;
      font-size: 1.1rem;
      background-color: var(--primary);
      color: var(--text-dark);
      border: none;
      border-radius: 4px;
      display: inline-block;
      transition: background-color 0.3s, transform 0.3s;
  }
  
  .btn-large:hover {
      background-color: var(--primary-dark);
      color: var(--text-light);
      transform: translateY(-3px);
  }
  
  /* About Page */
  .team-section {
      padding: 5rem 0;
      background-color: white;
  }
  
  .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 2rem;
  }
  
  .team-member {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      transition: transform 0.3s;
  }
  
  .team-member:hover {
      transform: translateY(-5px);
  }
  
  .team-member-image {
      height: 300px;
      overflow: hidden;
  }
  
  .team-member-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s;
  }
  
  .team-member:hover .team-member-image img {
      transform: scale(1.05);
  }
  
  .team-member-info {
      padding: 1.5rem;
      text-align: center;
  }
  
  .team-member-info h3 {
      margin-bottom: 0.5rem;
      font-size: 1.3rem;
  }
  
  .team-member-info p {
      color: var(--primary);
      margin-bottom: 1rem;
      font-weight: 500;
  }
  
  .team-social {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
  }
  
  .team-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 35px;
      height: 35px;
      background-color: rgba(164, 209, 56, 0.1);
      border-radius: 50%;
      color: var(--primary);
      transition: all 0.3s;
  }
  
  .team-social a:hover {
      background-color: var(--primary);
      color: var(--text-light);
  }
  
  /* Portfolio Page */
  .portfolio-section {
      padding: 5rem 0;
  }
  
  .portfolio-filters {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 3rem;
  }
  
  .portfolio-filter {
      padding: 0.5rem 1.5rem;
      background-color: white;
      border: 1px solid #ddd;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.3s;
  }
  
  .portfolio-filter.active,
  .portfolio-filter:hover {
      background-color: var(--primary);
      color: var(--text-dark);
      border-color: var(--primary);
  }
  
  .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 2rem;
  }
  
  .portfolio-item {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  
  .portfolio-image {
      height: 250px;
      overflow: hidden;
  }
  
  .portfolio-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s;
  }
  
  .portfolio-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(164, 209, 56, 0.9);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s;
      padding: 1.5rem;
      color: var(--text-dark);
      text-align: center;
  }
  
  .portfolio-item:hover .portfolio-overlay {
      opacity: 1;
  }
  
  .portfolio-item:hover .portfolio-image img {
      transform: scale(1.1);
  }
  
  .portfolio-overlay h3 {
      margin-bottom: 0.5rem;
      font-size: 1.5rem;
  }
  
  .portfolio-overlay p {
      margin-bottom: 1.5rem;
  }
  
  .portfolio-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      background-color: white;
      border-radius: 50%;
      color: var(--primary-dark);
      transition: all 0.3s;
      margin: 0 0.5rem;
  }
  
  .portfolio-icon:hover {
      background-color: var(--dark);
      color: white;
  }
  
  /* Blog Page */
  .blog-section {
      padding: 5rem 0;
  }
  
  .blog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 2rem;
  }
  
  .blog-post {
      background-color: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      transition: transform 0.3s;
  }
  
  .blog-post:hover {
      transform: translateY(-5px);
  }
  
  .blog-image {
      height: 200px;
      overflow: hidden;
  }
  
  .blog-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s;
  }
  
  .blog-post:hover .blog-image img {
      transform: scale(1.05);
  }
  
  .blog-content {
      padding: 1.5rem;
  }
  
  .blog-meta {
      display: flex;
      margin-bottom: 0.5rem;
      font-size: 0.85rem;
      color: var(--gray);
  }
  
  .blog-meta span {
      display: flex;
      align-items: center;
      margin-right: 1rem;
  }
  
  .blog-meta i {
      margin-right: 0.3rem;
  }
  
  .blog-content h3 {
      font-size: 1.3rem;
      margin-bottom: 1rem;
  }
  
  .blog-content h3 a {
      color: var(--dark);
      text-decoration: none;
      transition: color 0.3s;
  }
  
  .blog-content h3 a:hover {
      color: var(--primary);
  }
  
  .blog-excerpt {
      margin-bottom: 1.5rem;
      color: var(--gray);
  }
  
  /* Contact Page */
  .contact-page {
      padding: 5rem 0;
  }
  
  .map-container {
      height: 400px;
      margin-bottom: 5rem;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  
  .map-container iframe {
      width: 100%;
      height: 100%;
      border: 0;
  }
  
  /* Media Queries for Responsive Design */
  @media (max-width: 992px) {
      .service-detail {
          margin-bottom: 3rem;
      }
      
      .blog-grid {
          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      }
  }
  
  @media (max-width: 768px) {
      .page-hero h1 {
          font-size: 2.2rem;
      }
      
      .service-image img {
          height: 300px;
      }
      
      .portfolio-grid,
      .blog-grid {
          grid-template-columns: 1fr;
      }
      
      .team-grid {
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
  }
  
  @media (max-width: 480px) {
      .tech-stack span {
          font-size: 0.8rem;
          padding: 0.4rem 0.8rem;
      }
      
      .portfolio-filters {
          flex-direction: column;
          align-items: center;
      }
      
      .portfolio-filter {
          width: 100%;
          text-align: center;
      }
  }