@media (max-width: 768px) {
  .section-wrapper {
    padding: 10px !important;
  }

  .content-container {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .left-content {
    width: 100% !important;
    padding: 10px 12px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .headline {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  .description {
    font-size: 14px !important;
    line-height: 22px !important;
    text-align: center;
  }

  .button-group {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
  }

  .btn {
    white-space: nowrap !important;
  }

  .image-container {
    width: 100% !important;
    justify-content: center !important;
  }

  .main-image {
    width: 100% !important;
    height: auto !important;
  }
}

@media (max-width: 768px) {
  .main-grid {
    flex-direction: column !important;
  }

  .card-col {
    width: 100% !important;
  }

  .card-row {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .responsive-title {
    font-size: 32px !important;
    line-height: 40px !important;
  }

  .responsive-subtitle {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .responsive-heading {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .responsive-body {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .card-image {
    height: 240px !important;
  }

  .half-image {
    width: 100% !important;
  }

  .half-content {
    padding: 16px !important;
  }
}
@media (max-width: 768px) {
  .responsive-containers {
    flex-direction: column-reverse !important;
    height: auto !important;
  }

  .half-image,
  .half-content {
    width: 100% !important;
  }

  .half-image {
    height: 240px !important;
  }
}
/* Tablet and below */
@media (max-width: 768px) {
  .outer-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    gap: 40px !important;
  }

  .content-wrapper {
    gap: 40px !important;
    align-items: center !important;
  }

  .flex-columns {
    flex-direction: column !important;
    gap: 40px !important;
    align-items: center !important;
  }

  .left-content,
  .right-content {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  .headline-text {
    font-size: 36px !important;
    line-height: 44px !important;
  }

  .description-text {
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
  }

  .button-row {
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .image-section {
    height: auto !important;
    max-height: 400px !important;
    object-fit: cover;
  }
}

/* Mobile (extra small screens) */
@media (max-width: 480px) {
  .outer-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  .headline-text {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .description-text {
    font-size: 15px !important;
    line-height: 22px !important;
  }

  .button-text {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}
@media (max-width: 768px) {
  .top-section {
    flex-direction: column !important;
    align-items: center !important;
    gap: 40px !important;
    display: flex !important;
  }

  .left-col {
    width: 100% !important;
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
  }

  .right-col {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .button-row {
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap;
    gap: 16px !important;
    display: flex !important;
  }

  .main-image {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
}
@media (max-width: 768px) {
  .outer-container {
    gap: 40px !important;
  }

  .content-wrapper {
    gap: 40px !important;
    align-items: center !important;
  }

  .flex-columns {
    flex-direction: column !important;
    gap: 40px !important;
    align-items: center !important;
  }

  .left-column {
    flex: 1 1 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  .feature-card {
    flex: 1 1 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  .right-image {
    max-width: 100% !important;
    height: auto !important;
  }
  .title-text {
    font-size: 20px !important;
    line-height: 36px !important;
    text-align: center !important;
  }

  .subtitle-text {
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
  }

  .text-wrapper {
    align-items: center !important;
  }
}
@media (max-width: 600px) {
  .top-section {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important;
    text-align: center !important;
  }

  .left-column,
  .right-column {
    width: 100% !important;
    align-items: center !important;
    text-align: center;
  }

  .left-column > div,
  .right-column > div {
    align-items: center !important;
  }

  .bottom-image {
    height: auto !important;
    width: 100% !important;
    background: cover;
  }

  .main-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .inner-container {
    gap: 40px !important;
  }

  .card-column {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 32px !important;
  }

  .card-item {
    align-items: center !important;
    text-align: center !important;
  }

  .text-h1 {
    font-size: 20px !important;
    line-height: 30px !important;
  }

  .text-body {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .text-title {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .text-subtitle {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  .text-button {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}
@media (max-width: 768px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 10px !important;
  }

  .inner-container {
    gap: 40px !important;
    align-items: center !important;
  }

  .content-box {
    gap: 24px !important;
    align-items: center !important;
    text-align: center !important;
  }

  .title-text {
    font-size: 20px !important;
    line-height: 30px !important;
  }

  .description-text {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .button-group {
    flex-direction: row !important;
    align-items: center !important;
  }
}
@media screen and (max-width: 600px) {
  .blog-wrapper {
    padding: 32px 16px !important;
  }

  .blog-container {
    gap: 32px !important;
  }

  .blog-header {
    gap: 8px !important;
  }

  .blog-subheader > div:first-child {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .blog-subheader > div:last-child {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .cards-section {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .card img {
    height: auto !important;
  }
}
@media (max-width: 768px) {
  .feedback-row {
    flex-direction: column !important;
    gap: 32px !important;
    align-items: center !important; /* Center cards horizontally */
    justify-content: center !important; /* Optional: center vertically if needed */
  }

  .feedback-card {
    width: 100% !important;

    flex: 1 1 100% !important;
  }

  body {
    padding: 0 15px !important;
  }
  .profile-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: center;
  }

  .profile-info {
    align-items: center !important;
  }
  .feedback-container {
    align-items: center !important;
  }

  .feedback-title {
    font-size: 28px !important;
    line-height: 36px !important;
    text-align: center !important;
    width: 100% !important;
  }

  .feedback-subtitle {
    font-size: 16px !important;
    line-height: 24px !important;
    text-align: center !important;
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .section-container {
    padding: 10px 16px;
    gap: 40px !important;
  }

  .content-wrapper {
    flex-direction: column !important;
    gap: 40px !important;
    height: auto !important;
  }

  .text-column,
  .image-column {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .image-column {
    height: auto !important;
  }

  .image-column img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }

  /* Font size adjustments */
  .title {
    font-size: 20px !important;
    line-height: 30px !important;
  }

  .subtitle {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .description {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .button-text {
    font-size: 14px !important;
    line-height: 20px !important;
  }
}

@media (max-width: 400px) {
  .section-container {
    padding: 10px 16px;
    gap: 40px !important;
  }
}
@media (max-width: 900px) {
  .container-gap {
    gap: 10px !important;
  }
}