/**
 * Neomorphism (Soft UI) - Full site
 * Remove this file or the link in index.html to revert
 */

/* ============================================
   Global Neo Variables
   ============================================ */
:root {
  --neo-bg: #e4e8ec;
  --neo-bg-alt: #dce1e6;
  --neo-light: #ffffff;
  --neo-dark: #c4cad4;
  --neo-radius: 16px;
  --neo-radius-sm: 12px;
  --neo-shadow: 8px 8px 16px var(--neo-dark), -8px -8px 16px var(--neo-light);
  --neo-shadow-sm: 4px 4px 8px var(--neo-dark), -4px -4px 8px var(--neo-light);
  --neo-inset: inset 4px 4px 8px var(--neo-dark), inset -4px -4px 8px var(--neo-light);
  --neo-text: #4a5568;
  --neo-text-muted: #718096;
}

/* ============================================
   Global Background
   ============================================ */
body,
.main {
  background-color: var(--neo-bg) !important;
}

/* Alternating section backgrounds */
#services,
#testimonials,
#blog {
  background-color: var(--neo-bg) !important;
}

#get-started,
#alt-services,
#about,
#projects,
#trust-reasons {
  background-color: var(--neo-bg-alt) !important;
}

/* ============================================
   Header
   ============================================ */
#header {
  background: var(--neo-bg) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  border-bottom: none !important;
}

#header .logo img {
  filter: none;
}

.navmenu ul li a {
  color: var(--neo-text) !important;
}

.navmenu ul li a:hover,
.navmenu ul li a.active {
  color: var(--neo-text) !important;
  font-weight: 600;
}

.mobile-nav-toggle {
  color: var(--neo-text) !important;
}

/* Mobile nav: background only covers the menu items */
@media (max-width: 1199px) {
  .mobile-nav-active .navmenu ul {
    inset: auto !important;
    top: 70px !important;
    left: auto !important;
    right: 20px !important;
    bottom: auto !important;
    width: fit-content !important;
    min-width: 200px;
    max-width: calc(100% - 40px);
  }
}

/* ============================================
   Hero - Button only (keep hero image/overlay)
   ============================================ */
.hero .info .btn-get-started {
  background: var(--neo-bg) !important;
  color: var(--neo-text) !important;
  border: none !important;
  box-shadow: 6px 6px 12px rgba(0,0,0,0.2), -6px -6px 12px rgba(255,255,255,0.1) !important;
}

.hero .info .btn-get-started:hover {
  box-shadow: inset 3px 3px 6px rgba(0,0,0,0.2), inset -3px -3px 6px rgba(255,255,255,0.1) !important;
}

/* ============================================
   Section Titles
   ============================================ */
.section-title h2 {
  color: var(--neo-text) !important;
}

.section-title p {
  color: var(--neo-text-muted) !important;
}

/* ============================================
   Get Started Section
   ============================================ */
#get-started {
  padding: 4rem 0 !important;
}

#get-started .content {
  background: var(--neo-bg-alt);
  padding: 2.5rem;
  border-radius: var(--neo-radius);
  box-shadow: var(--neo-shadow);
  border: none !important;
}

#get-started .content h3 {
  color: var(--neo-text);
  margin-bottom: 1rem;
}

#get-started .content p {
  color: var(--neo-text-muted);
}

#get-started .php-email-form {
  background: var(--neo-bg-alt) !important;
  padding: 2.5rem !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
  border: none !important;
}

#get-started .php-email-form h3,
#contact-form .contact-form-title {
  color: var(--neo-text);
}

#get-started .php-email-form .contact-form-title,
#contact-form .contact-form-title {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
}

#get-started .php-email-form p,
#contact-form > p {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
}

#get-started .php-email-form p {
  color: var(--neo-text-muted);
}

#get-started .form-control {
  background: var(--neo-bg) !important;
  border: none !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-inset) !important;
  padding: 0.875rem 1rem !important;
  color: var(--neo-text) !important;
}

#get-started .form-control::placeholder {
  color: #a0aec0;
}

#get-started .form-control:focus {
  box-shadow: var(--neo-inset), 0 0 0 2px rgba(7, 56, 113, 0.2) !important;
  outline: none !important;
  border: none !important;
}

#get-started select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem !important;
}

#get-started button[type="submit"] {
  background: var(--neo-bg) !important;
  color: var(--neo-text) !important;
  border: none !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  padding: 0.875rem 2rem !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

#get-started button[type="submit"]:hover {
  box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light) !important;
}

/* ============================================
   Services Section
   ============================================ */
#services .service-item {
  background: var(--neo-bg-alt) !important;
  padding: 2.5rem !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
  border: none !important;
}

#services .service-item .icon {
  background: var(--neo-bg) !important;
  color: var(--neo-text) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  border: none !important;
}

#services .service-item h3 {
  color: var(--neo-text) !important;
}

#services .service-item p,
#services .service-item li span {
  color: var(--neo-text-muted) !important;
}

/* ============================================
   Alt Services (Why Choose Us)
   ============================================ */
#alt-services .features-image img {
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
}

#alt-services h3 {
  color: var(--neo-text) !important;
}

#alt-services > .container > .row > .col-lg-5 > p {
  color: var(--neo-text-muted) !important;
}

#alt-services .icon-box {
  background: var(--neo-bg-alt) !important;
  padding: 1.5rem !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  border: none !important;
  border-left: none !important;
}

#alt-services .icon-box i {
  color: var(--neo-text) !important;
  background-color: var(--neo-bg) !important;
}

#alt-services .icon-box:hover i {
  color: var(--neo-text) !important;
  background-color: var(--neo-bg) !important;
}

#alt-services .icon-box h4 a {
  color: var(--neo-text) !important;
}

#alt-services .icon-box p {
  color: var(--neo-text-muted) !important;
}

/* ============================================
   About Section
   ============================================ */
#about .about-img img {
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
}

#about .inner-title {
  color: var(--neo-text) !important;
}

#about .our-story h3,
#about .our-story h4 {
  color: var(--neo-text) !important;
}

#about .our-story p {
  color: var(--neo-text-muted) !important;
}

#about .process-item {
  background: var(--neo-bg-alt) !important;
  padding: 1.5rem !important;
  border-radius: var(--neo-radius-sm) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  border: none !important;
}

#about .process-item i {
  color: var(--neo-text) !important;
}

#about .process-item h5 {
  color: var(--neo-text) !important;
}

#about .process-item p {
  color: var(--neo-text-muted) !important;
}

#about .text-center.mb-4 {
  color: var(--neo-text) !important;
}

/* ============================================
   Projects Section
   ============================================ */
#projects .section-title p {
  color: var(--neo-text-muted) !important;
}

/* ============================================
   Testimonials
   ============================================ */
#testimonials .testimonial-item {
  background: var(--neo-bg-alt) !important;
  padding: 2rem !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
  border: none !important;
}

#testimonials .testimonial-img {
  box-shadow: var(--neo-shadow-sm) !important;
}

#testimonials .testimonial-item h3,
#testimonials .testimonial-item h4 {
  color: var(--neo-text) !important;
}

#testimonials .stars i {
  color: var(--neo-text) !important;
}

#testimonials .testimonial-item p {
  color: var(--neo-text-muted) !important;
}

/* ============================================
   Trust Reasons
   ============================================ */
#trust-reasons .trust-card {
  background: var(--neo-bg-alt) !important;
  padding: 2rem 1.5rem !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
  border: none !important;
}

#trust-reasons .trust-card .icon-box {
  background: var(--neo-bg) !important;
  color: var(--neo-text) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  border: none !important;
}

#trust-reasons .trust-card h4 {
  color: var(--neo-text) !important;
}

#trust-reasons .trust-card p {
  color: var(--neo-text-muted) !important;
}

/* ============================================
   Blog Section
   ============================================ */
#blog .post-item {
  background: var(--neo-bg-alt) !important;
  border-radius: var(--neo-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--neo-shadow) !important;
  border: none !important;
}

#blog .post-img img {
  border-radius: var(--neo-radius) var(--neo-radius) 0 0 !important;
}

#blog .post-date {
  background: var(--neo-bg) !important;
  color: var(--neo-text) !important;
  box-shadow: var(--neo-shadow-sm) !important;
}

#blog .post-content {
  background: var(--neo-bg-alt) !important;
}

#blog .post-title {
  color: var(--neo-text) !important;
}

#blog .meta,
#blog .meta span {
  color: var(--neo-text-muted) !important;
}

#blog .readmore {
  color: var(--neo-text) !important;
}

#blog hr {
  border-color: var(--neo-dark) !important;
}

/* ============================================
   Footer - Soft UI (matches rest of site)
   ============================================ */
#footer.footer,
#footer.dark-background,
footer#footer {
  --background-color: var(--neo-bg-alt);
  --default-color: var(--neo-text);
  --heading-color: var(--neo-text);
  --contrast-color: var(--neo-text);
  background: var(--neo-bg-alt) !important;
  background-image: none !important;
  color: var(--neo-text) !important;
  box-shadow: inset 0 4px 12px var(--neo-dark) !important;
}

#footer.footer::before,
#footer.dark-background::before,
footer#footer::before {
  display: none !important;
}

#footer .footer-top {
  padding-top: 50px;
}

#footer .footer-contact p,
#footer .footer-links p {
  color: var(--neo-text) !important;
}

#footer .footer-links h4 {
  color: var(--neo-text) !important;
}

#footer .footer-links ul li a {
  color: var(--neo-text-muted) !important;
}

#footer .footer-links ul li a:hover {
  color: var(--neo-text) !important;
}

#footer .btn {
  background: var(--neo-bg) !important;
  color: var(--neo-text) !important;
  border: none !important;
  box-shadow: var(--neo-shadow-sm) !important;
}

#footer .btn:hover {
  box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light) !important;
}

#footer .copyright {
  border-top: 1px solid var(--neo-dark) !important;
}

#footer .copyright p {
  color: var(--neo-text-muted) !important;
}

/* Footer design improvements */
#footer .footer-top {
  padding: 3rem 0 2rem !important;
}

#footer .footer-about {
  padding-bottom: 0.5rem;
}

#footer .footer-about .logo {
  margin-bottom: 1rem;
}

#footer .footer-links {
  margin-bottom: 1.5rem;
}

#footer .footer-links h4 {
  font-size: 0.9375rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem !important;
}

#footer .footer-links ul {
  padding-left: 0;
}

#footer .footer-links ul li {
  padding: 0.35rem 0 !important;
}

#footer .footer-links ul li a {
  transition: color 0.2s ease;
}

#footer .footer-contact p {
  line-height: 1.7;
}

/* Mobile: center footer content */
@media (max-width: 767px) {
  #footer .footer-top .row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #footer .footer-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #footer .footer-about .logo {
    justify-content: center !important;
  }

  #footer .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #footer .footer-links ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
  }

  #footer .footer-links ul li {
    justify-content: center;
  }

  #footer .footer-links h4 {
    text-align: center;
  }

  #footer .footer-links p {
    text-align: center;
  }
}

/* ============================================
   Scroll Top Button
   ============================================ */
#scroll-top {
  background: var(--neo-bg) !important;
  color: var(--neo-text) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  border: none !important;
}

#scroll-top i {
  color: #073871 !important;
}

#scroll-top:hover {
  box-shadow: inset 2px 2px 4px var(--neo-dark), inset -2px -2px 4px var(--neo-light) !important;
}

#scroll-top:hover i {
  color: #073871 !important;
}