/* Shopify Development Section Styles */
.shopify-development {
  padding: 80px 0;
  overflow: hidden;
}

.shopify-development-wrapper {
  display: flex;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 400px;
}

.shopify-content {
  width: 50%;
  padding: 60px;
  background-color: #003333;
  color: #ffffff;
  position: relative;
  z-index: 2;
}

.shopify-background {
  width: 50%;
  background-color: #FFCC55;
  position: relative;
}

.shopify-icon {
  margin-bottom: 20px;
}

.shopify-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff;
}

.shopify-description {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 30px;
  color: #ffffff;
}

.shopify-cta-button {
  display: inline-block;
  background-color: #AAFF00;
  color: #003333;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.shopify-cta-button:hover {
  background-color: #99EE00;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .shopify-development-wrapper {
    flex-direction: column;
  }
  
  .shopify-content, 
  .shopify-background {
    width: 100%;
  }
  
  .shopify-content {
    padding: 40px 30px;
  }
  
  .shopify-background {
    min-height: 200px;
  }
}

/* Image wrapper styles for Shopify Store Setup page */
.image-wrapper-1-1.margin-bottom.margin-large {
  background-image: url('../images/Frame-27.svg'), linear-gradient(#a7e0004f, #a7e0004f);
  background-position: 50%, 0 0;
  background-size: auto, auto;
  border-radius: 16px;
  height: 230px;
  padding-top: 60%;
  width: 100%;
  position: relative;
}

.image-wrapper-1-1-item2.margin-bottom.margin-large {
  background-image: url('../images/Frame-25.svg'), linear-gradient(to bottom, var(--lime), var(--lime));
  background-position: 50%, 0 0;
  background-repeat: repeat, repeat;
  background-size: auto, auto;
  height: 230px;
  padding-top: 60%;
  width: 100%;
  position: relative;
  border-radius: 16px;
}

.image-wrapper-1-1-3.margin-bottom.margin-large {
  background-image: url('../images/Frame-26.svg'), linear-gradient(#a7e0004f, #a7e0004f);
  background-position: 50%, 0 0;
  background-size: auto, auto;
  height: 230px;
  padding-top: 60%;
  width: 100%;
  position: relative;
  border-radius: 16px;
}

@media (max-width: 768px) {
  .image-wrapper-1-1.margin-bottom.margin-large,
  .image-wrapper-1-1-item2.margin-bottom.margin-large,
  .image-wrapper-1-1-3.margin-bottom.margin-large {
    padding-top: 64%;
  }
}