/* ================================
   CONTACT PAGE SPECIFIC STYLES
   ================================ */

/* Contact Page Layout */
.contact--page {
 padding: calc(80px + var(--spacing-sm)) 0 var(--spacing-md);
  background-color: var(--color-white);
}

/* Contact Info Centered Layout */
.contact__info-centered {
  max-width: 1000px;
  margin: 0 auto;
}

.contact__header {
  text-align: center;
   margin-bottom: var(--spacing-md);
}

.contact__intro {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--color-gray);
  max-width: 800px;
  margin: 0 auto;

}

/* Contact Items Grid */
.contact__items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}
.section__title {
    font-weight: 300;
}
    h1{
    font-size: 40px
    }

.contact__item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
    padding: var(--spacing-sm);
  background-color: var(--color-light);
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.contact__item-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Clickable Cards */
.contact__item-card--clickable {
  cursor: pointer;
  background-color: var(--color-white);
  border: 2px solid var(--color-secondary);
}

.contact__item-card--clickable:hover {
  background-color: var(--color-secondary);
  transform: translateY(-10px);
  box-shadow: var(--shadow-xl);
}

.contact__item-card--clickable:hover .contact__icon {
  background-color: var(--color-white);
  color: var(--color-secondary);
  transform: scale(1.1) rotate(5deg);
}

.contact__item-card--clickable:hover .contact__details h3,
.contact__item-card--clickable:hover .contact__link {
  color: var(--color-white);
}

/* WhatsApp Card Special Styling */
.contact__item-card--whatsapp {
  border-color: #25D366;
}

.contact__item-card--whatsapp:hover {
  background-color: #25D366;
}

.contact__item-card--whatsapp:hover .contact__icon {
  background-color: var(--color-white);
  color: #25D366;
}

/* Card Link (wraps entire card) */
.contact__card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* Contact Icon */
.contact__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-size: 1.4rem;
  margin-bottom: var(--spacing-xs);
  transition: all var(--transition-base);
}

.contact__icon--phone {
  background-color: var(--color-accent);
}

.contact__icon--whatsapp {
  background-color: #25D366;
}

/* Contact Details */
.contact__details {
  width: 100%;
}

.contact__details h3 {
   font-size: 0.85rem;
  font-weight: 600;
 margin-bottom: var(--spacing-xs);
  color: var(--color-primary);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: var(--transition-base);
}

.contact__details p {
  font-size: 0.9rem;
  color: var(--color-gray);
  line-height: 1.6;
 margin-bottom: 0.15rem;
}

/* Contact Links */
.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--color-secondary);
  font-weight: 500;
  transition: var(--transition-base);
  text-decoration: none;
}

.contact__link:hover {
  color: var(--color-accent);
}

.contact__link--phone {
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: 600;
}

.contact__link--phone i {
  font-size: 1rem;
}

.contact__link--whatsapp {
  color: #25D366;
  font-size: 1.2rem;
  font-weight: 600;
}

.contact__link--whatsapp i {
  font-size: 1.3rem;
}
.contact__link--phone,
.contact__link--whatsapp {
  font-size: 1rem;
}
/* Why Choose Us Section */
.why-choose {
   padding: var(--spacing-md) 0;
  background: linear-gradient(135deg, var(--color-light) 0%, var(--color-white) 100%);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: var(--spacing-sm);
   margin-top: var(--spacing-sm);
}

.feature__card {
  text-align: center;
  padding: var(--spacing-sm);
  background-color: var(--color-white);
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.feature__card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.feature__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-secondary);
  color: var(--color-white);
   font-size: 1.4rem;
  transition: all var(--transition-slow);
  margin-bottom: var(--spacing-sm);
}

.feature__card:hover .feature__icon {
  background-color: var(--color-accent);
  transform: rotate(360deg);
}

.feature__title {
font-size: 1rem;
  margin-bottom: var(--spacing-sm);
  color: var(--color-primary);
}

.feature__description {
   font-size: 0.9rem;
  color: var(--color-gray);
   line-height: 1.5;
}

/* ========== RESPONSIVE DESIGN ========== */
@media screen and (max-width: 968px) {
  .contact--page {
    padding: calc(80px + var(--spacing-md)) 0 var(--spacing-lg);
  }

  .contact__items-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
  }

  .features__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media screen and (max-width: 576px) {
  .contact__items-grid {
    grid-template-columns: 1fr;
  }

  .contact__item-card {
    padding: var(--spacing-md);
  }

  .contact__icon {
    width: 70px;
    height: 70px;
    font-size: 1.75rem;
  }

  .feature__card {
    padding: var(--spacing-md);
  }

  .feature__icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  .features__grid {
    grid-template-columns: 1fr;
  }
}

/* Force grid to 2 columns for rows 1-2, then full-width hours at bottom */
.contact__items-grid {
  grid-template-columns: repeat(2, 1fr);  /* override the auto-fit */
}

/* Business Hours card spans full width on its own row */
.contact__item-card--hours {
  grid-column: 1 / -1;
  flex-direction: row;
  gap: var(--spacing-lg);
  text-align: left;
  align-items: flex-start;
}

.contact__item-card--hours .contact__details {
  flex: 1;
}

.contact__item-card--hours h3 {
  text-align: left;
  margin-bottom: var(--spacing-md);
}

/* Two-column key/value layout for hours */
.contact__hours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.5rem;
}

.contact__hours-grid span {
  font-size: 0.9rem;
  color: var(--color-gray);
  line-height: 1.4;
}

.contact__hours-grid span:nth-child(odd) {
  font-weight: 500;
  color: var(--color-primary);
}

.contact__hours-closed {
  font-weight: 700 !important;
  color: var(--color-accent) !important;
}

/* Responsive: stack to 1 col on small screens */
@media screen and (max-width: 576px) {
  .contact__items-grid {
    grid-template-columns: 1fr;
  }

  .contact__item-card--hours {
    flex-direction: column;
  }
}