/*--------------------------------------------------------------
# Root Variables (Centralized Settings)
--------------------------------------------------------------*/
:root {
    /* Font Families */
    --font-default: "Inter", sans-serif;
    --font-heading: "Poppins", sans-serif;
    --font-nav: "Lato", sans-serif;
  
    /* Dark Mode Colors */
    --color-background: #121212;
    --color-darktext: #191919;
    --color-text: #00B0F0;
    --color-text-pop:#66FF33;
    --color-heading: #ffffff;
    --color-accent: #00B0F0;
    --color-highlight: #66FF33;
    --color-contrast: #ffffff;
    --color-nav-hover: #66FF33;
    --color-warnings: #ff5555;
  
    /* Button & Element Spacing */
    --btn-padding: 12px 24px;
    --btn-radius: 8px;
    --section-padding: 80px 40px;
    --box-shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
    --box-shadow-heavy: 0 6px 20px rgba(0, 0, 0, 0.2);
  
    /* Text Sizes */
    --font-size-nav: 1rem;
    --font-size-title-large: 3.3rem;
    --font-size-title-medium: 2.8rem;
    --font-size-swiper: 3rem;
    --font-size-heading-small: 2rem;
    --font-size-paragraph-large: 1.5rem;
    --font-size-paragraph-medium: 1.3rem;
    --font-size-paragraph-small: 1rem;
    --font-size-button: 1.1rem;
    --font-size-modal-title: 1.6rem;
    --font-size-contact-heading: 1.8rem;
  
    /* Image Sizes */
    --img-logo-max-width: 180px;
    --img-header-logo-max-height: 50px;
    --img-icon-large: 3rem;
  
    /* Form Elements */
    --input-padding: 8px 12px;
    --input-border-radius: 8px;
    --input-font-size: 1.3rem;
  
    --line-height-default: 1.6;
    --line-height-tight: 1.3;
    --line-height-loose: 1.8;
  }
  
  /*--------------------------------------------------------------
  # Global Styles
  --------------------------------------------------------------*/
  body {
    font-family: var(--font-default);
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
  }
  
  /*--------------------------------------------------------------
  # Header & Navbar
  --------------------------------------------------------------*/
  .header {
    background: var(--color-background);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 997;
  }
  
  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .header .logo img {
    max-height: var(--img-header-logo-max-height);
    object-fit: contain;
    filter: brightness(1.2);
  }
  
  .navmenu ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
  }
  
  .navmenu li {
    margin: 0 10px;
  }
  
  .navmenu a {
    font-family: var(--font-nav);
    font-size: var(--font-size-nav);
    color: var(--color-text);
    padding: 10px 15px;
    transition: color 0.3s, text-decoration 0.3s ease-in-out;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    text-decoration: none;
  }
  
  .navmenu a:hover {
    color: var(--color-nav-hover);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
  }
  
  .navmenu .active {
    color: var(--color-highlight);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
  }
  
  .mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
  }
  
  /*--------------------------------------------------------------
  # Section Styling
  --------------------------------------------------------------*/
  section {
    padding: var(--section-padding);
    background: var(--color-background);
    position: relative;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: var(--btn-radius);
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /*--------------------------------------------------------------
  # Hero Section
  --------------------------------------------------------------*/
  .hero-section {
    padding-top: 100px; /* Offset fixed header */
  }
  
  .hero-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
  }
  
  .hero-text {
    flex: 1;
    min-width: 300px;
    text-align: center;
  }
  
  .hero-text h1 {
    font-size: var(--font-size-title-large);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: -1px -1px 0 var(--color-highlight), 1px -1px 0 var(--color-highlight),
                 -1px 1px 0 var(--color-highlight), 1px 1px 0 var(--color-highlight);
    border-bottom: 3px solid var(--color-accent);
    display: inline-block;
    padding-bottom: 5px;
  }
  
  .hero-text p {
    font-size: var(--font-size-paragraph-medium);
    color: var(--color-text);
    line-height: var(--line-height-default);
    max-width: 700px;
    margin: 0 auto 20px;
  }

  .hero-text p:last-child {
    margin-bottom: 0; /* Removes bottom margin before the buttons */
  }
  
  .hero-img {
    flex: 1;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    min-width: 300px;
  }
  
  /*--------------------------------------------------------------
  # Section Titles
  --------------------------------------------------------------*/
  .section-title h2 {
    font-size: var(--font-size-title-large);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: -1px -1px 0 var(--color-highlight), 1px -1px 0 var(--color-highlight),
                 -1px 1px 0 var(--color-highlight), 1px 1px 0 var(--color-highlight);
    border-bottom: 3px solid var(--color-accent);
    display: inline-block;
    padding-bottom: 5px;
    width: 100%;
  }
  
  .section-title p {
    font-size: var(--font-size-paragraph-large);
    color: var(--color-text);
    text-align: center;
    margin-bottom: 0 auto 20px;
  }
  
  /*--------------------------------------------------------------
  # Efficiency & Services Sliders
  --------------------------------------------------------------*/
  /* Efficiency & Services Sliders (Parent Context) */
.slider {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .slider-wrapper {
    display: flex;
    transition: transform 0.6s ease-in-out;
    width: 100%;
  }
  
  .slider-item {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 20px 0;
    text-align: center;
  }
  
  /* Core .efficiency-item Styling */
  .efficiency-item, .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--color-background); /* #1e1e1e */
    border-radius: var(--btn-radius); /* 8px */
    box-shadow: var(--box-shadow-light); /* 0 4px 15px rgba(0, 0, 0, 0.1) */
    transition: transform 0.3s, box-shadow 0.3s;
    padding: 20px;
  }
  
  .efficiency-item:hover, .service-item:hover {
    transform: scale(1.05);
    box-shadow: var(--box-shadow-heavy); /* 0 6px 20px rgba(0, 0, 0, 0.2) */
  }
  
  /* Child Elements of .efficiency-item */
  .efficiency-item .icon, .service-item .icon {
    font-size: var(--font-size-swiper); /* 3rem */
    color: var(--color-text-pop); /* #66FF33 */
    margin-bottom: 10px;
  }
  
  .efficiency-item h4, .service-item h4 {
    font-size: var(--font-size-heading-small); /* 2rem */
    font-weight: 600;
    color: var(--color-text-pop); /* #66FF33 */
    margin-bottom: 10px;
  }
  
  .efficiency-item p, .service-item p {
    font-size: var(--font-size-paragraph-medium); /* 1.3rem */
    color: var(--color-text); /* #00B0F0 */
    line-height: var(--line-height-default); /* 1.6 */
  }
  
  /* Slider Controls */
  .slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-background);
    border: 2px solid var(--color-text-pop);
    border-radius: var(--btn-radius);
    padding: 10px;
    cursor: pointer;
    color: var(--color-text-pop);
    font-size: 1.5rem;
    transition: background 0.3s, color 0.3s;
  }
  
  .slider-prev:hover, .slider-next:hover {
    color: var(--color-text-pop);

  }
  
  .slider-prev {
    left: 10px;
  }
  
  .slider-next {
    right: 10px;
  }

  .slider-prev i, .slider-next i {
    display: block; /* Ensures the icon fills the button area */
  }
  
  /*--------------------------------------------------------------
  # Buttons
  --------------------------------------------------------------*/
  .button-primary {
    background-color: var(--color-highlight);
    color: var(--color-background);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-size: var(--font-size-button);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    border: none;
    cursor: pointer;
    box-shadow: var(--box-shadow-light);
  }
  
  .button-primary:hover {
    background-color: var(--color-accent);
    transform: scale(1.07);
    box-shadow: var(--box-shadow-heavy);
  }
  
  .button-secondary {
    background-color: var(--color-background);
    color: var(--color-accent);
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    font-size: var(--font-size-button);
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid var(--color-highlight);
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    cursor: pointer;
    box-shadow: var(--box-shadow-light);
  }
  
  .button-secondary:hover {
    background-color: var(--color-highlight);
    color: var(--color-background);
    transform: scale(1.07);
    box-shadow: var(--box-shadow-heavy);
  }
  
  .hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  
  .hero-buttons .button-primary {
    min-width: 180px;
    text-align: center;
  }
  
  /*--------------------------------------------------------------
  # Contact Section
  --------------------------------------------------------------*/
  .contact-options {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  
  .contact .info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--color-background);
    padding: 20px;
    border-radius: var(--btn-radius);
    box-shadow: var(--box-shadow-light);
    transition: transform 0.3s, box-shadow 0.3s;
    min-width: 200px;
  }
  
  .contact .info-item:hover {
    transform: scale(1.05);
    box-shadow: var(--box-shadow-heavy);
  }
  
  .contact .info-item .icon {
    font-size: var(--font-size-swiper);
    color: var(--color-highlight);
    margin-bottom: 10px;
  }
  
  .contact .info-item h3 {
    font-size: var(--font-size-contact-heading);
    font-weight: 600;
    color: var(--color-highlight);
    margin-bottom: 15px;
  }
  
  /*--------------------------------------------------------------
  # Footer
  --------------------------------------------------------------*/
  .footer {
    text-align: center;
    padding: 20px;
    color: var(--color-highlight);
    background-color: var(--color-background);
  }
  
  .footer-logo-img {
    max-width: var(--img-logo-max-width);
    height: auto;
    object-fit: contain;
    filter: brightness(1.2);
    display: block;
    margin: 0 auto 10px auto;
  }
  
  /*--------------------------------------------------------------
  # Scroll Top
  --------------------------------------------------------------*/
  .scroll-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--color-highlight);
    color: var(--color-background);
    border-radius: var(--btn-radius);
    padding: 10px;
    font-size: 1.5rem;
    border: none;
    cursor: pointer;
    display: none;
    transition: background 0.3s;
  }
  
  .scroll-top.active {
    display: block;
  }
  
  .scroll-top:hover {
    background: var(--color-accent);
  }
  
/*--------------------------------------------------------------
# Universal Modal Styling (Consistent Across All Modals)
--------------------------------------------------------------*/
.modal {
    display: none; /* Hidden by default, as in prior */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999; /* Matches prior z-index */
    justify-content: center;
    align-items: center;
    padding: var(--section-padding); /* Matches existing --section-padding */
    border-radius: var(--btn-radius); /* Matches existing --btn-radius */
    font-family: var(--font-default); /* Matches existing --font-default */
    color: var(--color-text); /* Matches existing --color-text */
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out; /* Matches body transition */
}

.modal-content {
    background: var(--color-background); /* Matches existing --color-background */
    color: var(--color-text); /* Matches existing --color-text */
    border-radius: var(--btn-radius); /* Matches existing --btn-radius */
    border: 2px solid var(--color-text-pop);
    box-shadow: var(--box-shadow-heavy); /* Matches existing --box-shadow-heavy */
    padding: 20px;
    max-width: 600px;
    width: 100%;
    position: relative; /* Changed from fixed to relative */
    top: 35%; /* Sets 20% buffer from the top */
    left: 50%; /* Centers horizontally */
    transform: translate(-50%, -50%);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid var(--color-accent); /* Matches existing --color-accent */
    padding-bottom: 10px;
}

.modal-title {
    font-size: var(--font-size-modal-title); /* Matches existing --font-size-modal-title */
    font-weight: bold;
    text-align: center;
    color: var(--color-text-pop); /* Matches existing --color-accent */
    margin-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 3px solid var(--color-accent); /* Matches existing --color-accent */
    display: inline-block;
    padding-bottom: 5px;
    flex-grow: 1; /* Centers title in remaining space */
    margin-right: 40px;
}

.modal label {
    color: var(--color-highlight); /* Matches existing --color-highlight */
    font-weight: bold;
    font-size: var(--font-size-paragraph-medium); /* Matches existing --font-size-paragraph-medium */
    line-height: var(--line-height-default); /* Matches existing --line-height-default */
    margin-bottom: 10px;
}

.modal-close {
    background: none;
    border: none;
    color: var(--color-highlight); /* Matches existing --color-highlight */
    font-size: var(--font-size-modal-title);
    cursor: pointer;
    transition: color 0.3s;
    padding: var(--btn-padding); /* Matches existing --btn-padding */
    border-radius: var(--btn-radius); /* Matches existing --btn-radius */
}

.modal-close:hover {
    color: var(--color-accent); /* Matches existing --color-accent */
}

.modal-body {
    padding: 15px 10px 0;
    font-size: var(--font-size-paragraph-medium); /* Matches existing --font-size-paragraph-medium */
    color: var(--color-accent); /* Matches existing --color-accent */
    line-height: var(--line-height-default); /* Matches existing --line-height-default */
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 10px;
    border-top: 2px solid var(--color-accent); /* Matches existing --color-accent */
    margin-top: 20px;
}

/* Adjusting input styles */
.modal input,
.modal textarea {
    width: 95%;
    padding: var(--input-padding); /* Matches existing --input-padding */
    background: var(--color-background); /* Matches existing --color-background */
    border: 1px solid var(--color-accent); /* Matches existing --color-accent */
    color: var(--color-text-pop); /* Matches existing --color-text */
    border-radius: var(--btn-radius); /* Matches existing --btn-radius */
    font-size: var(--input-font-size); /* Matches existing --input-font-size */
    font-family: var(--font-default); /* Matches existing --font-default */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin: 0 auto 20px; /* Centers input and adds padding to next label */
    display: block;

}

.modal input:focus,
.modal textarea:focus {
    border-color: var(--color-highlight); /* Matches existing --color-highlight */
    box-shadow: 0 0 5px var(--color-highlight); /* Matches existing --color-highlight */
    outline: none;
}

#meetingDate {
    width: 40%;
    padding: var(--input-padding); /* Matches existing --input-padding */
    background: var(--color-background); /* Matches existing --color-background */
    border: 1px solid var(--color-accent); /* Matches existing --color-accent */
    color: var(--color-text-pop); /* Matches existing --color-text */
    border-radius: var(--btn-radius); /* Matches existing --btn-radius */
    font-size: var(--input-font-size); /* Matches existing --input-font-size */
    font-family: var(--font-default); /* Matches existing --font-default */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    margin: 0 0 20px 0; /* Removed 'auto' to left align, kept bottom padding */
    display: block; /* Retained for layout */
    text-align: left;
}

#meetingDate {
    border-color: var(--color-highlight); /* Matches existing --color-highlight */
    box-shadow: 0 0 5px var(--color-highlight); /* Matches existing --color-highlight */
    outline: none;
}

/* Buttons */
.modal .btn-primary {
    background: var(--color-highlight); /* Matches existing --color-highlight */
    color: var(--color-background); /* Matches existing --color-background */
    font-size: var(--font-size-button); /* Matches existing --font-size-button */
    font-weight: bold;
    border-radius: var(--btn-radius); /* Matches existing --btn-radius */
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    padding: var(--btn-padding); /* Matches existing --btn-padding */
    box-shadow: var(--box-shadow-light); /* Matches existing --box-shadow-light */
    display: inline-block;
    text-align: center;
}

.modal .btn-primary:hover {
    background: var(--color-accent); /* Matches existing --color-accent */
    transform: scale(1.07);
    box-shadow: var(--box-shadow-heavy); /* Matches existing --box-shadow-heavy */
}

.modal .btn-secondary {
    background: var(--color-background); /* Matches existing --color-background */
    color: var(--color-accent); /* Matches existing --color-accent */
    border: 2px solid var(--color-highlight); /* Matches existing --color-highlight */
    font-size: var(--font-size-button); /* Matches existing --font-size-button */
    font-weight: bold;
    border-radius: var(--btn-radius); /* Matches existing --btn-radius */
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
    padding: var(--btn-padding); /* Matches existing --btn-padding */
    box-shadow: var(--box-shadow-light); /* Matches existing --box-shadow-light */
    display: inline-block;
    text-align: center;
}

.modal .btn-secondary:hover {
    background: var(--color-highlight); /* Matches existing --color-highlight */
    color: var(--color-background); /* Matches existing --color-background */
    transform: scale(1.07);
    box-shadow: var(--box-shadow-heavy); /* Matches existing --box-shadow-heavy */
}

/* Time Slot Grid Container */
.time-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    padding: 10px;
    text-align: center;
    font-size: var(--font-size-paragraph-medium); /* Matches existing --font-size-paragraph-medium */
    color: var(--color-accent); /* Matches existing --color-accent */
    line-height: var(--line-height-default); /* Matches existing --line-height-default */
    max-width: 700px;
    margin: 0 auto;
}

/* Time Slot Box */
.time-slot-box {
    padding: 10px;
    background: var(--color-background); /* Matches existing --color-background */
    color: var(--color-text); /* Matches existing --color-text */
    border: 2px solid var(--color-accent); /* Matches existing --color-accent */
    border-radius: var(--btn-radius); /* Matches existing --btn-radius */
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    font-size: var(--input-font-size); /* Matches existing --input-font-size */
    font-weight: bold;
    text-align: center;
    box-shadow: var(--box-shadow-light); /* Matches existing --box-shadow-light */
}

/* Hover effect */
.time-slot-box:hover {
    background: var(--color-accent); /* Matches existing --color-accent */
    color: var(--color-background); /* Matches existing --color-background */
    transform: scale(1.05);
    box-shadow: var(--box-shadow-heavy); /* Matches existing --box-shadow-heavy */
}

/* Selected time slot */
.time-slot-box.selected {
    background: var(--color-highlight); /* Matches existing --color-highlight */
    color: var(--color-background); /* Matches existing --color-background */
    border-color: var(--color-highlight); /* Matches existing --color-highlight */
    transform: scale(1.05);
    box-shadow: var(--box-shadow-heavy); /* Matches existing --box-shadow-heavy */
}

#meetingConfirmationModal .modal-body p strong,
#meetingConfirmationModal .modal-body a {
    color: var(--color-highlight); /* Matches existing --color-highlight */
}
  
  /*--------------------------------------------------------------
  # Mobile Responsiveness
  --------------------------------------------------------------*/
  @media (max-width: 768px) {
    .navmenu ul {
      display: none;
      flex-direction: column;
      width: 100%;
      position: absolute;
      top: 60px;
      left: 0;
      background: var(--color-background);
      padding: 10px 0;
    }
  
    .mobile-nav-active .navmenu ul {
      display: flex;
    }
  
    .mobile-nav-toggle {
      display: block;
    }
  
    .header .container {
      flex-direction: row;
      flex-wrap: wrap;
    }
  
    .hero-content {
      flex-direction: column;
      text-align: center;
    }
  
    .section-title h2 {
      font-size: var(--font-size-title-medium);
    }
  
    section {
      padding: 60px 20px;
    }
  
    .contact-options {
      flex-direction: column;
      align-items: center;
    }
  }