/* Studio Plenicare specific styles */
.photo-caption {
  font-family: Inter, sans-serif;
  color: #333;
  font-size: 14px;
}

.service-item {
  transition: transform 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
}

.service-icon {
  transition: background-color 0.3s ease;
}

/* Professionals Grid Responsive Styles */
@media (max-width: 991px) {
  .professionals-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-column-gap: 20px !important;
  }
}

@media (max-width: 767px) {
  .professionals-grid {
    grid-template-columns: 1fr !important;
    grid-column-gap: 0 !important;
    max-width: 400px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .professional-card {
    margin-bottom: 0 !important;
  }
}

/* Services Grid Responsive Styles */
@media (max-width: 991px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    grid-column-gap: 0 !important;
    max-width: 600px !important;
  }
}

/* Responsive Design */
@media (max-width: 991px) {
  .header-section {
    height: 400px !important;
  }

  .w-layout-grid[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  .w-layout-grid[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 767px) {
  .header-section {
    height: 350px !important;
  }

  .section-title.dark {
    font-size: 32px !important;
  }

  .text-block-101.inverted {
    font-size: 14px !important;
  }

  .w-layout-grid[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    grid-row-gap: 30px !important;
  }

  .w-layout-grid[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    grid-row-gap: 30px !important;
    grid-column-gap: 0 !important;
  }

  .w-layout-grid[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .service-item h4 {
    font-size: 18px !important;
  }

  .service-item p {
    font-size: 16px !important;
  }

  .photo-caption {
    font-size: 16px !important;
  }
}

@media (max-width: 479px) {
  .header-section {
    height: 300px !important;
  }

  .section-title.dark {
    font-size: 28px !important;
  }

  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .service-icon {
    width: 60px !important;
    height: 60px !important;
  }

  .service-icon div {
    font-size: 28px !important;
  }
}

/* Studio-specific background image with purple overlay */
.div-block-9.studio-hero {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(123, 75, 148, 0.3)), to(rgba(0, 0, 0, 0.7))), url('../images/covers/cover-studio.png') !important;
  background-image: linear-gradient(180deg, rgba(123, 75, 148, 0.3), rgba(0, 0, 0, 0.7)), url('../images/covers/cover-studio.png') !important;
  background-position: 0px 0px, 50% 25%;
  background-size: auto, cover;
  background-repeat: repeat, repeat-y;
}

/* Purple theme colors */
.studio-primary-color {
  color: #7B4B94 !important;
}

.studio-primary-bg {
  background-color: #7B4B94 !important;
}

.studio-primary-border {
  border-color: #7B4B94 !important;
}

/* Studio Image Grid Responsive Styles */
@media (max-width: 991px) {
  .studio-image-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 15px !important;
  }
}

@media (max-width: 767px) {
  .studio-image-grid {
    grid-template-columns: 1fr !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 15px !important;
  }

  .studio-image-grid .w-inline-block {
    height: 200px !important;
  }
}

/* Service items responsive grid adjustments */
@media (max-width: 991px) {
  .w-layout-grid[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-column-gap: 25px !important;
  }
}

@media (max-width: 767px) {
  .w-layout-grid[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
    grid-column-gap: 0 !important;
    grid-row-gap: 30px !important;
  }

  .service-item h4 {
    font-size: 14px !important;
  }
}
