/*
 Theme Name: DevOps Daylight
 Theme URI: https://example.com/devops-daylight
 Description: Vibrant daylight DevOps landing site as a child theme for Astra.
 Author: ChatGPT
 Template: astra
 Version: 1.1
*/

/* Global */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Utility layout */
.devops-day-page {
  background: #f3f4f6;
  color: #0f172a;
}

.devops-day-container {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}

.devops-day-section {
  padding: 80px 0;
}

.devops-day-section-header {
  text-align: center;
  margin-bottom: 40px;
}

.devops-day-section-header h2 {
  font-size: 30px;
  margin-bottom: 8px;
  color: #111827;
}

.devops-day-section-header p {
  color: #6b7280;
}

/* Buttons */
.devops-day-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all .2s ease;
}

.devops-day-btn-primary {
  background: #0ea5e9;
  color: #f9fafb;
}

.devops-day-btn-primary:hover {
  background: #0284c7;
}

.devops-day-btn-outline {
  background: transparent;
  color: #0f172a;
  border-color: #0ea5e9;
}

.devops-day-btn-outline:hover {
  background: #e0f2fe;
}

/* HERO (Home) */
.devops-day-hero {
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.35), transparent 55%),
    radial-gradient(circle at bottom right, rgba(52,211,153,0.35), transparent 55%),
    #e5f3ff;
}

.devops-day-hero-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
}

.devops-day-hero-text {
  flex: 1 1 380px;
}

.devops-day-hero-text h1 {
  font-size: 40px;
  line-height: 1.2;
  margin-bottom: 16px;
  color: #0f172a;
}

.devops-day-hero-text p {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 20px;
}

.devops-day-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}

.devops-day-badge {
  background: #0ea5e9;
  color: #f9fafb;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.devops-day-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.devops-day-hero-visual {
  flex: 1 1 320px;
  text-align: center;
}

.devops-day-hero-visual img {
  max-width: 440px;
  width: 100%;
}

/* Logos strip */
.devops-day-logos {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 24px 0;
  text-align: center;
}

.devops-day-logos-title {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}

.devops-day-logos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.devops-day-logos-row img {
  max-height: 32px;
  opacity: 0.75;
}

/* Cards (services, pricing) */
.devops-day-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px;
}

.devops-day-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 12px 30px rgba(15,23,42,0.06);
}

.devops-day-card img {
  max-width: 60px;
  margin-bottom: 16px;
}

.devops-day-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #111827;
}

.devops-day-card p {
  font-size: 14px;
  color: #6b7280;
}

/* Process */
.devops-day-process {
  background: #f9fafb;
}

.devops-day-process-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
}

.devops-day-process-text {
  flex: 1 1 380px;
}

.devops-day-process-text p {
  color: #6b7280;
  margin-bottom: 16px;
}

.devops-day-steps {
  list-style: none;
  padding: 0;
  margin: 0;
}

.devops-day-steps li {
  margin-bottom: 14px;
  font-size: 14px;
  color: #374151;
}

.devops-day-steps strong {
  color: #0ea5e9;
}

.devops-day-process-visual {
  flex: 1 1 320px;
  text-align: center;
}

.devops-day-process-visual img {
  max-width: 420px;
  width: 100%;
}

/* Stack */
.devops-day-stack {
  background: #ffffff;
}

.devops-day-stack-columns {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}

.devops-day-stack-column {
  background: #f9fafb;
  border-radius: 18px;
  padding: 20px 22px;
  border: 1px solid #e5e7eb;
}

.devops-day-stack-column h3 {
  margin-bottom: 8px;
}

.devops-day-stack-column ul {
  padding-left: 18px;
  margin: 0;
  font-size: 14px;
  color: #4b5563;
}

/* Why Us */
.devops-day-why {
  background:
    radial-gradient(circle at top right, rgba(56,189,248,0.25), transparent 55%),
    #f3f4f6;
}

.devops-day-why-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
}

.devops-day-why-text {
  flex: 1 1 380px;
}

.devops-day-why-text p {
  color: #4b5563;
  margin-bottom: 12px;
}

.devops-day-why-list {
  padding-left: 18px;
  margin: 0;
  font-size: 14px;
  color: #374151;
}

.devops-day-why-visual {
  flex: 1 1 320px;
  text-align: center;
}

.devops-day-why-visual img {
  max-width: 360px;
  width: 100%;
}

/* Pricing */
.devops-day-pricing {
  background: #ffffff;
}

.devops-day-pricing .devops-day-card {
  position: relative;
}

.devops-day-price-tag {
  color: #0ea5e9;
  font-size: 13px;
  margin-bottom: 10px;
}

.devops-day-card ul {
  padding-left: 18px;
  margin: 0 0 18px;
  font-size: 14px;
  color: #4b5563;
}

/* CTA (home) */
.devops-day-cta {
  background:
    radial-gradient(circle at bottom left, rgba(52,211,153,0.25), transparent 55%),
    #e0f2fe;
}

.devops-day-cta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: stretch;
  justify-content: space-between;
}

.devops-day-cta-text {
  flex: 1 1 360px;
}

.devops-day-cta-text p {
  color: #374151;
  margin-bottom: 12px;
}

.devops-day-cta-points {
  padding-left: 18px;
  margin: 0;
  font-size: 14px;
  color: #374151;
}

.devops-day-cta-form {
  flex: 1 1 360px;
  background: #ffffff;
  border-radius: 18px;
  padding: 24px;
  border: 1px solid #bfdbfe;
}

.devops-day-cta-form .devops-day-form-row {
  margin-bottom: 12px;
}

.devops-day-cta-form input,
.devops-day-cta-form textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 10px 12px;
  font-size: 14px;
}

.devops-day-cta-form input:focus,
.devops-day-cta-form textarea:focus {
  outline: none;
  border-color: #0ea5e9;
}

/* Footer note */
.devops-day-footer-note {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  padding: 24px 0 40px;
  background: #f9fafb;
}

/* ABOUT PAGE */
.devops-day-hero-simple {
  padding: 80px 0 40px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,0.25), transparent 55%),
    #eff6ff;
}

.devops-day-hero-simple h1 {
  font-size: 36px;
  margin-bottom: 8px;
}

.devops-day-hero-simple p {
  color: #4b5563;
}

.devops-day-two-col {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
}

.devops-day-two-col-main {
  flex: 1 1 380px;
}

.devops-day-two-col-side {
  flex: 1 1 280px;
}

/* Timeline / stats blocks */
.devops-day-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
}

.devops-day-timeline li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #4b5563;
}

.devops-day-timeline li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #0ea5e9;
  position: absolute;
  left: 0;
  top: 6px;
}

/* Web dev feature grid */
.devops-day-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}

.devops-day-feature {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  text-align: left;
}

.devops-day-feature h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

/* Contact page */
.devops-day-contact-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  justify-content: space-between;
}

.devops-day-contact-details {
  flex: 1 1 320px;
}

.devops-day-contact-form {
  flex: 1 1 360px;
}

/* Responsive */
@media (max-width: 992px) {
  .devops-day-cards-grid,
  .devops-day-stack-columns,
  .devops-day-feature-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .devops-day-hero-text h1 {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .devops-day-section {
    padding: 60px 0;
  }
  .devops-day-cards-grid,
  .devops-day-stack-columns,
  .devops-day-feature-grid {
    grid-template-columns: minmax(0,1fr);
  }
  .devops-day-hero-inner,
  .devops-day-process-inner,
  .devops-day-why-inner,
  .devops-day-cta-inner,
  .devops-day-two-col,
  .devops-day-contact-wrap {
    flex-direction: column;
  }
}


/* --- Inner pages (About, Services, Case Studies, Contact) --- */
.devops-day-page--inner .devops-day-hero-inner {
  padding: 40px 0 10px;
}

.devops-day-page--inner .devops-day-hero {
  padding-top: 60px;
}

.devops-day-breadcrumb {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 10px;
}

.devops-day-two-column {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.devops-day-two-column-main {
  flex: 1 1 380px;
}

.devops-day-two-column-side {
  flex: 0 0 300px;
}

.devops-day-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.devops-day-pill-list li {
  background: #e0f2fe;
  color: #0369a1;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
}

.devops-day-timeline {
  border-left: 2px solid #e5e7eb;
  padding-left: 16px;
  margin: 0;
  list-style: none;
}

.devops-day-timeline li {
  margin-bottom: 18px;
  position: relative;
}

.devops-day-timeline li::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #0ea5e9;
}

.devops-day-feature-list {
  padding-left: 18px;
  margin: 0;
  font-size: 14px;
  color: #374151;
}

.devops-day-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}

.devops-day-feature-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid #e5e7eb;
}

.devops-day-feature-card h3 {
  font-size: 16px;
  margin-bottom: 6px;
}

.devops-day-feature-card p {
  font-size: 14px;
  color: #6b7280;
}

/* Case studies */
.devops-day-case-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
}

.devops-day-case-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(15,23,42,0.05);
}

.devops-day-case-card img {
  max-width: 80px;
  margin-bottom: 14px;
}

/* Contact */
.devops-day-contact-grid {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap: 30px;
}

.devops-day-contact-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid #e5e7eb;
}

/* Responsive tweaks for new grids */
@media (max-width: 992px) {
  .devops-day-feature-grid,
  .devops-day-case-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .devops-day-two-column {
    flex-direction: column;
  }
  .devops-day-two-column-side {
    flex: 1 1 auto;
  }
  .devops-day-contact-grid {
    grid-template-columns: minmax(0,1fr);
  }
}

@media (max-width: 768px) {
  .devops-day-feature-grid,
  .devops-day-case-grid {
    grid-template-columns: minmax(0,1fr);
  }
}