.parent-wrapper{
  width: 100%;
  height: 100vh;
}

/* Style for the hamburger icon */
.hamburger {
  cursor: pointer;
  display: none;
}

.hamburger img {
  width: 30px;
  height: 30px;
}

/* Hidden mobile menu by default */
.mobile-menu {
  display: none;
  position: fixed; /* Changed to fixed for better mobile experience */
  top: 0;
  right: 0;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  width: 280px;
  padding: 20px;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
  overflow-y: auto;
}

.mobile-menu.open {
  display: block;
  transform: translateX(0);
}

.mobile-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 20px 0;
}

.mobile-menu ul li {
  padding: 0;
  margin: 8px 0;
  border-bottom: 1px solid #eaeaea;
}

.mobile-menu ul li:last-child {
  border-bottom: none;
}

.mobile-menu ul li a {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.mobile-menu ul li a:hover {
  background-color: #f8f9fa;
  color: #2563eb;
  transform: translateX(4px);
}

/* Optional: Add overlay when menu is open */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-menu-overlay.open {
  display: block;
  opacity: 1;
}

/* Add close button styles */
.mobile-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.mobile-menu-close::before,
.mobile-menu-close::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #333;
  top: 50%;
  left: 50%;
  transition: background-color 0.2s ease;
}

.mobile-menu-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-menu-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu-close:hover::before,
.mobile-menu-close:hover::after {
  background-color: #2563eb;
}


.zap-fast-icon3 {
    height: 36px;
    width: 36px;
    position: relative;
    min-height: 36px;
  }
  .imazai3 {
    align-self: stretch;
    position: relative;
    letter-spacing: -0.01em;
    line-height: 150%;
    white-space: nowrap;
  }
  .logo-imazai3,  
  .logo1 {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .logo-imazai3 {
    align-self: stretch;
    display: flex;
    gap: var(--gap-6xs);
    position: absolute;
  }
  .logo1 {
    height: 36px;
    display: none;
  }
  .imazai4 {
    margin: 0;
    position: relative;
    font-size: inherit;
    line-height: 150%;
    font-weight: 700;
    font-family: inherit;
    white-space: nowrap;
    cursor: pointer;
  }
  .logo-imazai-wrapper,
  .logo-imazai4 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .logo-imazai4 {
    flex-direction: row;
    gap: var(--gap-8xs);
  }
  .logo-imazai-wrapper {
    flex-direction: column;
    padding: var(--padding-7xs) 0 0;
  }
  .chevron-left-icon20 {
    height: 20px;
    width: 20px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: none;
  }
  .label22 {
    position: relative;
    letter-spacing: -0.01em;
    line-height: 22px;
    display: inline-block;
    min-width: 42px;
    text-decoration: none;

  }
  .button20 {
    border-radius: var(--br-81xl);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-4xs);
    gap: var(--gap-5xs);
  }
  .chevron-left-icon21 {
    height: 16px;
    width: 16px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    display: none;
  }
  .label23 {
    position: relative;
    font-size: var(--body-small-regular-size);
    letter-spacing: -0.01em;
    line-height: 22px;
    display: inline-block;
    font-family: var(--font-dm-sans);
    color: var(--default-0);
    text-align: center;
    min-width: 44px;
    text-decoration: none;
  }
  .button21 {
    cursor: pointer;
    border: 0;
    padding: var(--padding-4xs) var(--padding-mini);
    background-color: var(--color-greyscale-700);
    flex: 0.7586;
    border-radius: var(--br-81xl);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xs);
  }
  .label24 {
    position: relative;
    letter-spacing: -0.01em;
    line-height: 22px;
    display: inline-block;
    min-width: 51px;
  }
  .button22 {
    flex: 1;
    border-radius: var(--br-81xl);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-4xs) var(--padding-5xs);
    gap: var(--gap-5xs);
  }
  .label25 {
    position: relative;
    letter-spacing: -0.01em;
    line-height: 22px;
    display: inline-block;
    min-width: 58px;
    font-weight: 400px;
  }

  .nav-link2 {
    width: 374px;
    border-radius: var(--br-81xl);
    background-color: var(--default-25);
    border: 1px solid var(--default-50);
    box-sizing: border-box;
    flex-direction: row;
    justify-content: flex-start;
    padding: var(--padding-11xs) var(--padding-10xs);
    gap: var(--layout-spacing-24);
    text-align: center;
    font-size: var(--body-small-regular-size);
    color: var(--color-greyscale-700);
    /* Center the element horizontally */
    margin: 0 auto;
  }
  

  .frame-parent5,
  .nav-link2,
  .navbar-inner {
    display: flex;
    align-items: center;
    max-width: 100%;
  }
  .frame-parent5 {
    align-self: stretch;
    flex-direction: row;
    justify-content: space-between;

  }

  
  .navbar-inner {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding: var(--padding-9xs) 0 0; */
    padding-right: 138px;
    box-sizing: border-box;
  }
  .arrow-up-right1 {
    margin: 0;
    height: 24px;
    width: 24px;
    position: relative;
  }
  .icon1,
  .navbar1 {
    display: flex;
    flex-direction: row;
  }
  .icon1 {
    height: 48px;
    width: 48px;
    border-radius: var(--br-81xl);
    background-color: var(--colors-base-primary);
    align-items: center;
    justify-content: center;
  }
  .navbar1 {
    /* align-self: stretch; */
    height: 73px;
    background-color: var(--additional-white);
    border-bottom: 1px solid var(--default-100);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--padding-xs) var(--padding-29xl) var(--padding-sm)
      var(--padding-61xl);
    top: 0;
    z-index: 1000;
    position: sticky;
    width: 100%;
    /* gap: var(--gap-xl); */
    text-align: left;
    font-size: var(--font-size-5xl);
    color: var(--colors-base-primary);
    font-family: var(--font-dm-sans);
  
}


/* home nav styles */
.navbar {
  height: 73px;
  display: flex;
  align-self: stretch;
  background-color: #fff;
  border-bottom: 1px solid #dfe1e7;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 16px 51px 14px 80px;
  top: 0;
  z-index: 1000;
  position: fixed;
  gap: 20px;
  max-width: 100%;
  text-align: left;
  font-size: 24px;
  color: #0179ff;
  font-family: "Instrument Sans";
}

.nav-link-wrapper {
  width: 435px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 100%;
  font-size: 14px;
  color: #272835;
}

.nav-link {
  width: 355px;
  border-radius: 100px;
  background-color: #f6f8fa;
  border: 1px solid #eceff3;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2px 3px;
  gap: 24px;
  max-width: 100%;
}

.zap-fast-icon {
  height: 36px;
  width: 36px;
  position: relative;
  min-height: 36px;
}
.union-icon {
  align-self: stretch;
  width: 99px;
  position: relative;
  border-radius: 100px;
  max-height: 100%;
  display: none;
  min-height: 48px;
}
.genai {
  margin: 0;
  position: relative;
  font-size: inherit;
  line-height: 150%;
  font-weight: 700;
  font-family: inherit;
  white-space: nowrap;
}

.button {
  flex: 0.8077;
  border-radius: 100px;
  background-color: #272835;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 9px 15px;
  gap: 8px;
  color: #f8fafb;
}
.button2 {
  flex: 1;
  border-radius: 100px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 9px 10px;
  gap: 8px;
}
.button3 {
  align-self: stretch;
  border-radius: 100px;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  gap: 8px;
}

.label {
  position: relative;
  line-height: 22px;
  display: inline-block;
  min-width: 41px;
}
.label2 {
  position: relative;
  line-height: 22px;
  font-weight: 500;
  display: inline-block;
  min-width: 47px;
}
.label3 {
  position: relative;
  line-height: 155%;
  font-weight: 500;
}

.chevron-left-icon {
  height: 16px;
  width: 16px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.chevron-left-icon1 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

/* ------- */

  .badge,
  .text1 {
    white-space: nowrap;
  }
  .text1 {
    position: relative;
    line-height: 20px;
    font-weight: 500;
  }
  .badge {
    border-radius: var(--br-base);
    background-color: var(--default-50);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-9xs) var(--padding-xs);
    text-align: center;
    visibility: hidden;
  }
  .welcome-to {
    color: var(--additional-black);
  }
  .welcome-to-gengreetingai- {
    letter-spacing: -0.01em;
  }
  .welcome-to-gengreetingai-container {
    margin: 0;
    align-self: stretch;
    position: relative;
    font-size: 64px;
    line-height: 120%;
    font-weight: 600;
    font-family: inherit;
    color: var(--colors-base-primary);
  }
  .dive-into-a,
  .label26 {
    position: relative;
    font-size: var(--body-medium-semibold-size);
    letter-spacing: -0.01em;
  }
  .dive-into-a {
    align-self: stretch;
    line-height: 160%;
    color: var(--colors-base-text-paragraph);
  }
  .label26 {
    line-height: 155%;
    font-weight: 600;
    font-family: var(--font-instrument-sans);
    color: var(--additional-white);
    text-align: center;
    display: inline-block;
    min-width: 74px;
  }
  .button24 {
    box-shadow: var(--shadow-xsmall);
    border-radius: var(--br-81xl);
    background-color: var(--colors-base-primary);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--padding-sm-5) var(--padding-5xl);
    gap: var(--gap-6xs);
  }
  .label27 {
    position: relative;
    font-size: var(--body-medium-semibold-size);
    line-height: 155%;
    font-weight: 600;
    font-family: var(--body-small-regular);
    color: var(--additional-black);
    text-align: center;
  }
  .phone-icon {
    height: 20px;
    width: 20px;
    position: relative;
  }
  .button25 {
    align-self: stretch;
    filter: drop-shadow(0 1px 2px rgba(13, 13, 18, 0.06));
    border-radius: var(--br-81xl);
    border: 1px solid var(--default-200);
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--padding-5xs) var(--padding-5xl);
    gap: var(--gap-5xs);
  }
  .button-groups,
  .left {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  
}

/* Navbar right items */

.button-parent {
  align-self: stretch;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-0);
  row-gap: 20px;
}

.button5 {
  cursor: pointer;
  border: 0;
  padding: 12.5px 23px;
  background-color: #0179ff;
  box-shadow: 0 1px 2px rgba(13, 13, 18, 0.06);
  border-radius: 100px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
}

.icon {
  height: 48px;
  width: 48px;
  border-radius: 100px;
  display: flex;
  background-color: #0179ff;
  align-items: center;
  justify-content: center;
  z-index: 1;
  margin-left: 3px;
}

.chevron-left-icon1 {
  height: 20px;
  width: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}

.label5 {
  position: relative;
  font-size: 15px;
  line-height: 155%;
  display: inline-block;
  color: #fff;
  min-width: 72px;
  white-space: nowrap;
}

/* ------- */


  .button-groups {
    cursor: pointer;
    border: 0;
    padding: 0;
    background-color: transparent;
    flex-direction: row;
    gap: var(--layout-spacing-20);
  }
  .left {
    width: 40%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--layout-spacing-24);
    /* min-width: 580px;
    max-width: 100%; */
  }
  .image-placeholder-icon {
    position: absolute;
    top: -93px;
    left: -169px;
    width: 909px;
    height: 509px;
    object-fit: contain;
    z-index: 1;
  }
  .m1 {
    position: relative;
    letter-spacing: -0.01em;
    line-height: 120%;
    font-weight: 600;
    display: inline-block;
    min-width: 108px;
  }
  .image-caption {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-mini);
  }
  .image-generated-successfully1 {
    width: 139px;
    position: relative;
    font-size: var(--font-size-lg);
    letter-spacing: -0.01em;
    line-height: 140%;
    font-weight: 600;
    text-align: center;
    display: inline-block;
  }
  .image-caption-parent {
    position: relative;
    /* top: 109px;
    left: 208px; */
    backdrop-filter: blur(10px);
    border-radius: var(--layout-radius-radius-xl);
    background-color: var(--blur);
    border: 10px solid var(--default-25);
    box-sizing: border-box;
    width: 199px;
    height: 193px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--layout-spacing-20);
    z-index: 2;
  }

  .image-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  
  .img {
    /* align-self: stretch; */

    height: 400px;
    width: 100%;
    position: relative;
    overflow: hidden;

    border-radius: 10px;

     /* flex-shrink: 0;  */
    
  }

  .left-content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .left-content,
  .left-content-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .img-wrapper {
    display: flex;
    width: 40%;
    flex-direction: column;
    padding: var(--padding-42xl) 0 0;
    box-sizing: border-box;
    align-items: center; /* Center elements horizontally */
    justify-content: center; /* Center elements vertically if needed */
    font-size: var(--font-size-29xl);
    color: var(--additional-black);
  }
  
  .left-content,
  .left-content-wrapper {
    flex-direction: row;
  }
  .left-content {
    flex: 1;
    gap: 104px;
  }
  @media (min-width: 1920px) {
    .left-content,
  .left-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
   
  }

  .list-wrapper{
    
    width: 100%;
    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;
  }

  .list{
    width: 60%;
  }




  .left-content {
    /* flex: 1; */
    gap: 50px;
    width: 80%;
  }

  .img{
    /* width: 750px;
    align-self: stretch; */
    width: 750px;
  }

  .img-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* width: 50%; */
  }

  .right-content{
    margin-top: 65px;
  }

  .left{
    justify-content: center;
    align-items: center;
  }

  }
  /* .left-content-wrapper {
    align-self: stretch;
    padding: 0 0 0 var(--padding-11xs);
    box-sizing: border-box;
    text-align: left;
    color: var(--default-900);
  } */
  .what-we-offer {
    margin: 0;
    position: relative;
    font-size: inherit;
    letter-spacing: -0.01em;
    line-height: 120%;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
  }
  .what-we-offer-wrapper {
    /* align-self: stretch; */
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* padding: 0 var(--padding-4xl) 0 var(--padding-xl); */
  }
  .transformative-card-designing {
    margin: 0;
    position: relative;
    font-size: var(--font-size-5xl);
    letter-spacing: -0.01em;
    line-height: 160%;
    font-weight: 700;
    font-family: inherit;
    color: var(--colors-base-text-paragraph);
  }
  .frame-parent6,
  .right-content-inner {
    display: flex;
    align-items: flex-start;

    max-width: 100%;
  }
  .frame-parent6 {
    width: 481px;
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-base);
  }
  .right-content-inner {
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    padding: 0 var(--padding-xl) var(--padding-8xs) var(--padding-3xl);
    box-sizing: border-box;
  }
  .card-child,
  .mask-group-icon3 {
    position: absolute;
    top: -1.5px;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .card-child {
    border-radius: var(--br-xl);
  }
  .mask-group-icon3 {
    object-fit: cover;
    z-index: 1;
  }
  .card-bottom-child {
    width: 406px;
    height: 337px;
    position: relative;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0), #0050aa);
    display: none;
    max-width: 100%;
  }
  .innovative-technology,
  .our-ai-driven-platform {
    position: relative;
    letter-spacing: -0.01em;
    z-index: 3;
  }
  .innovative-technology {
    margin: 0;
    font-size: inherit;
    line-height: 150%;
    font-weight: 600;
    font-family: inherit;
  }
  .our-ai-driven-platform {
    width: 313px;
    font-size: var(--body-medium-semibold-size);
    line-height: 160%;
    text-align: left;
    display: inline-block;
  }
  .card-bottom {
    position: absolute;
    top: 63px;
    left: 0;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0), #0050aa);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-130xl) var(--padding-xl) var(--padding-31xl)
      var(--padding-31xl);
    box-sizing: border-box;
    gap: var(--gap-5xl);
    max-width: 100%;
    z-index: 2;
  }
  .card7,
  .frame-child7 {
    width: 406px;
    position: relative;
    border-radius: var(--layout-radius-radius-2xl);
    max-width: 100%;
  }
  .card7 {
    height: 400px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .frame-child7 {
    height: 350px;
    background-color: var(--primary-100);
    display: none;
    z-index: 0;
  }
  .mask-group-icon4 {
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0 !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    max-width: 100%;
    overflow: hidden;
    max-height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .frame-child8 {
    width: 406px;
    height: 337px;
    position: relative;
    border-radius: var(--br-xl);
    background: linear-gradient(180deg, rgba(217, 217, 217, 0), #0050aa);
    display: none;
    max-width: 100%;
  }
  .from-classic-paintings {
    width: 318px;
    position: relative;
    font-size: var(--body-medium-semibold-size);
    letter-spacing: -0.24px;
    line-height: 160%;
    text-align: left;
    display: inline-block;
    min-height: 104px;
    z-index: 3;
  }
  .rectangle-container,
  .rectangle-group {
    flex: 1;
    border-radius: var(--br-xl);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    max-width: 100%;
  }
  .rectangle-container {
    background: linear-gradient(180deg, rgba(217, 217, 217, 0), #0050aa);
    flex-direction: column;
    padding: var(--padding-130xl) var(--padding-xl) var(--padding-5xl)
      var(--padding-31xl);
    gap: var(--gap-5xl);
    z-index: 2;
  }
  .rectangle-group {
    background-color: var(--primary-100);
    flex-direction: row;
    padding: var(--padding-smi) 0 0;
    position: relative;
  }
  .we-at-gengreetingai {
    width: 1080px;
    position: absolute;
    margin: 0 !important;
    top: -58px;
    right: -338px;
    font-size: var(--body-medium-semibold-size);
    letter-spacing: -0.01em;
    line-height: 160%;
    font-weight: 600;
    color: var(--colors-base-text-paragraph);
    display: inline-block;
    z-index: 4;
  }
  .card8 {
    width: 406px;
    border-radius: var(--layout-radius-radius-2xl);
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-31xl) 0 0;
    box-sizing: border-box;
    position: relative;
    max-width: 100%;
  }
  .card-item {
    position: absolute;
    top: -1.5px;
    left: 0;
    border-radius: var(--br-xl);
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .we-strive-to {
    width: 318px;
    position: relative;
    font-size: var(--body-medium-semibold-size);
    letter-spacing: -0.01em;
    line-height: 160%;
    text-align: left;
    display: inline-block;
    z-index: 3;
  }
  .card-group,
  .our-team-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .card-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    gap: var(--gap-11xl);
    max-width: 100%;
    /* margin-top: -58px; */
    padding-top: 58px;
    font-size: var(--font-size-5xl);
    color: var(--additional-white);
  }
  .our-team-wrapper {
    padding: 0 64px 0 63px;
  }
  .meet-the-minds {
    position: relative;
    font-size: var(--body-medium-semibold-size);
    letter-spacing: -0.01em;
    line-height: 160%;
    color: var(--colors-base-text-paragraph);
  }
  .frame-parent7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-base);
  }
  .right-content-child {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--padding-xl) 0 var(--padding-7xl);
  }
  .card-inner
 {
    /* align-self: stretch; */
    max-width: 100%;
  }
  .right-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 69px;
    font-size: var(--font-size-21xl);
  }
  .card-inner {
    width: 406px;
    position: relative;
    border-radius: var(--layout-radius-radius-2xl);
    background-color: var(--default-50);
    display: none;
  }
  .co-founder-ceo,
  .john-doe {
    position: relative;
    letter-spacing: -0.01em;
    font-weight: 600;
  }
  .john-doe {
    margin: 0;
    width: 138px;
    font-size: inherit;
    line-height: 45px;
    font-family: inherit;
    display: inline-block;
  }
  .co-founder-ceo {
    font-size: var(--font-size-lg);
    line-height: 140%;
    color: var(--colors-base-text-paragraph);
    white-space: nowrap;
  }
  .member-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .avatars-base-icon {
    width: 250px;
    height: 250px;
    position: relative;
    object-fit: contain;
  }
  .label28 {
    position: relative;
    letter-spacing: -0.01em;
    line-height: 25px;
    font-weight: 600;
    display: inline-block;
    min-width: 44px;
  }
  .button26,
  .button27 {
    box-shadow: var(--shadow-xsmall);
    background-color: var(--colors-base-primary);
    display: flex;
    flex-direction: row;
    align-items: center;
    box-sizing: border-box;
  }
  .button26 {
    width: 290px;
    border-radius: var(--br-81xl);
    justify-content: flex-start;
    padding: var(--padding-xs-5) var(--padding-5xl);
    gap: var(--gap-5xs);
  }
  .button27 {
    height: 48px;
    width: 52px;
    border-radius: var(--br-981xl);
    justify-content: center;
    padding: var(--padding-sm) var(--padding-base);
  }
  .card11,
  .member-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }
  .member-actions {
    align-self: stretch;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-0);
    row-gap: 20px;
    font-size: var(--body-medium-semibold-size);
    color: var(--additional-white);
  }
  .card11 {
    flex: 1;
    flex-direction: column;
    align-items: center;
    padding: var(--layout-spacing-32);
    box-sizing: border-box;
    min-height: 500px;
    max-width: 100%;
    z-index: 1;
  }
  .card-child1,
  .card10 {
    border-radius: var(--layout-radius-radius-2xl);
    background-color: var(--default-50);
  }
  .card10 {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    min-width: 304px;
    max-width: 100%;
  }
  .card-child1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
  }
  .avatars-base-icon1 {
    position: absolute;
    top: calc(50% - 331px);
    left: calc(50% - 330px);
    width: 660px;
    height: 660px;
    object-fit: cover;
    z-index: 1;
  }
  .member-background {
    position: absolute;
    bottom: 0;
    left: calc(50% - 203px);
    border-radius: var(--br-xl);
    background: linear-gradient(180deg, rgba(217, 217, 217, 0), #0050aa);
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  .head-of-design,
  .julia-santy {
    position: relative;
    letter-spacing: -0.01em;
    font-weight: 600;
  }
  .julia-santy {
    margin: 0;
    align-self: stretch;
    font-size: inherit;
    line-height: 45px;
    font-family: inherit;
  }
  .head-of-design {
    font-size: var(--font-size-lg);
    line-height: 140%;
    display: inline-block;
    min-width: 128px;
  }
  .button28,
  .member-details {
    width: 158px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .button28 {
    width: 290px;
    border: 0;
    outline: 0;
    background-color: var(--color-greyscale-700);
    height: 48px;
    border-radius: var(--br-81xl);
    flex-direction: row;
    padding: var(--padding-xs-5) var(--padding-5xl);
    box-sizing: border-box;
    font-family: var(--font-instrument-sans);
    font-weight: 600;
    font-size: var(--body-medium-semibold-size);
    color: var(--default-0);
  }
  .arrow-up-right2 {
    margin: 0;
    height: 20px;
    width: 20px;
    position: relative;
  }
  .button-parent,
  .button29 {
    display: flex;
    flex-direction: row;
  }
  .button29 {
    height: 48px;
    width: 52px;
    border-radius: var(--br-981xl);
    background-color: var(--color-greyscale-700);
    align-items: center;
    justify-content: center;
    padding: var(--padding-sm) var(--padding-base);
    box-sizing: border-box;
  }

  .card13 {
    position: absolute;
    top: calc(50% - 250px);
    left: calc(50% - 203px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 330px var(--layout-spacing-32) var(--layout-spacing-32);
    box-sizing: border-box;
    gap: var(--layout-spacing-20);
    height: 100%;
    z-index: 3;
  }
  .card12 {
    height: 500px;
    flex: 1;
    position: relative;
    border-radius: var(--layout-radius-radius-2xl);
    background-color: var(--default-50);
    overflow: hidden;
    min-width: 304px;
    max-width: 100%;
    color: var(--additional-white);
  }
  .david-lee,
  .lead-developer {
    position: relative;
    letter-spacing: -0.01em;
    font-weight: 600;
  }
  .david-lee {
    margin: 0;
    font-size: inherit;
    line-height: 45px;
    font-family: inherit;
  }
  .lead-developer {
    font-size: var(--font-size-lg);
    line-height: 140%;
    color: var(--colors-base-text-paragraph);
  }
  .list {
    flex: 1;
    border-radius: var(--layout-radius-radius-2xl);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-11xl);
    max-width: 100%;
  }
  .list-wrapper {
    align-self: stretch;
    flex-direction: row;
    padding: 0 var(--padding-12xs) 0 var(--padding-10xs);
    box-sizing: border-box;
    font-size: var(--font-size-13xl);
  }
  .content,
  .list-wrapper,
  .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding-top: 73px;
  }
  .main-content {
    flex: 1;
    flex-direction: column;
    gap: 39.5px;
  }
  .content {
    align-self: stretch;
    flex-direction: row;
    padding: 0 var(--padding-61xl) var(--padding-31xl) 78px;
    box-sizing: border-box;
    text-align: center;
   
    font-size: var(--body-small-regular-size);
    color: var(--additional-black);
    font-family: var(--font-instrument-sans);
  }
  .experience-the-power1 {
    position: relative;
    letter-spacing: -0.01em;
    line-height: 160%;
  }
  .experience-the-power-of-ai-ima-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 var(--padding-12xl) 0 29px;
    font-size: var(--body-medium-semibold-size);
    color: var(--colors-base-text-paragraph);
  }
  .our-vision-mission-parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-base);
    max-width: 100%;
  }
  .image-icon4 {
    width: 498.9px;
    height: 450px;
    position: relative;
    object-fit: cover;
    display: none;
    max-width: 100%;
  }
  .button32 {
    width: 52px;
    height: 52px;
    box-shadow: var(--shadow-xsmall);
    border-radius: var(--br-981xl);
    background-color: var(--colors-base-primary);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: var(--padding-5xs) var(--padding-base);
    box-sizing: border-box;
    z-index: 1;
  }
  .label30 {
    position: relative;
    font-size: var(--body-medium-semibold-size);
    letter-spacing: -0.01em;
    line-height: 25px;
    font-weight: 600;
    font-family: var(--font-instrument-sans);
    color: var(--additional-white);
    text-align: center;
    display: inline-block;
    min-width: 84px;
  }
  .button33,
  .button34 {
    box-shadow: var(--shadow-xsmall);
    background-color: #0179ff;
    display: flex;
    flex-direction: row;
  }
  .button33 {
    background-color: #0179ff;
    cursor: pointer;
    border: 0;
    padding: var(--padding-xs-5) var(--padding-5xl);
    flex: 1;
    border-radius: var(--br-81xl);
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-5xs);

  }
  .button34 {
    height: 48px;
    width: 52px;
    border-radius: var(--br-981xl);
    align-items: center;
    justify-content: center;
    padding: var(--padding-5xs) var(--padding-base);
    box-sizing: border-box;
  }
  .button-container,
  .frame-wrapper3 {
    display: flex;
    flex-direction: row;

  }
  .button-container {
    width: 227px;
    z-index: 1;
  }
  .frame-wrapper3 {
    align-self: stretch;
    padding: 0 var(--padding-12xs);
    align-items: flex-start;
    justify-content: center;
  }
  .frame-wrapper2,
  .image-group {
    display: flex;
    justify-content: flex-start;
    box-sizing: border-box;
    max-width: 100%;
  }
  .image-group {
    height: 450px;
    flex: 1;
    flex-direction: column;
    align-items: flex-end;
    padding: var(--padding-xl);
    gap: 260px;
    background-image: url(./public/image7@2x.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  .frame-wrapper2 {
    height: 400px;
    width: 500px;
    border-radius: var(--layout-radius-radius-2xl);
    background-color: var(--default-50);
    overflow: hidden;
    flex-shrink: 0;
    flex-direction: row;
    align-items: flex-start;
    padding: 0 0 0 var(--padding-12xs);
    min-width: 500px;
  }
  .zap-icon {
    height: 30px;
    width: 30px;
    position: relative;
  }
  .our-vision1 {
    margin: 0;
    flex: 1;
    position: relative;
    font-size: inherit;
    letter-spacing: -0.01em;
    line-height: 45px;
    font-weight: 600;
    font-family: inherit;
  }
  .icon-parent {
    width: 225px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--layout-spacing-20);
  }
  .our-vision-at {
    align-self: stretch;
    position: relative;
    font-size: var(--body-medium-semibold-size);
    line-height: 160%;
    text-align: left;
  }
  .vision-points {
    align-self: stretch;
    border-radius: var(--layout-radius-radius-2xl);
    background-color: var(--primary-0);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--layout-spacing-20) var(--padding-xl) var(--padding-sm)
      var(--layout-spacing-24);
    gap: var(--layout-spacing-20);
  }
  .frame-parent10,
  .shield-zap-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .shield-zap-wrapper {
    border-radius: var(--layout-radius-radius-lg);
    background-color: var(--colors-base-primary);
    justify-content: center;
    padding: var(--padding-3xs);
  }
  .frame-parent10 {
    justify-content: flex-start;
    gap: var(--layout-spacing-20);
  }
  .vision-content,
  .vision-points1 {
    flex-direction: column;
    justify-content: flex-start;
  }
  .vision-points1 {
    align-self: stretch;
    border-radius: var(--layout-radius-radius-2xl);
    border: 1px solid var(--default-100);
    display: flex;
    align-items: flex-start;
    padding: var(--padding-lg) var(--padding-xl) var(--padding-lg)
      var(--layout-spacing-24);
    gap: var(--layout-spacing-20);
  }
  .vision-content {
    flex: 1;
    gap: var(--gap-11xl);
    min-width: 474px;
  }
  .about-page-inner,
  .frame-parent8,
  .frame-parent9,
  .vision-content {
    display: flex;
    align-items: flex-start;
    max-width: 100%;
  }
  .frame-parent9 {
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    gap: var(--gap-31xl);
    font-size: var(--font-size-13xl);
  }
  .about-page-inner,
  .frame-parent8 {
    justify-content: flex-start;
  }
  .frame-parent8 {
    flex: 1;
    flex-direction: column;
    gap: var(--gap-21xl);
  }
  .about-page-inner {
    align-self: stretch;
    flex-direction: row;
    padding: 0 var(--padding-61xl) var(--padding-31xl);
    box-sizing: border-box;
    text-align: center;
    font-size: var(--font-size-21xl);
    color: var(--additional-black);
    font-family: var(--font-instrument-sans);
  }
  .contact-container-child {
    width: 1440px;
    height: 347px;
    position: relative;
    background-color: var(--default-100);
    display: none;
    max-width: 100%;
  }
  .contact-us {
    margin: 0;
    position: relative;
    font-size: inherit;
    letter-spacing: -0.01em;
    line-height: 120%;
    font-weight: 600;
    font-family: inherit;
    z-index: 1;
  }
  .contact-title-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 59px 0 55px;
    box-sizing: border-box;
    max-width: 100%;
  }
  .experience-the-power2 {
    position: relative;
    font-size: var(--body-medium-semibold-size);
    letter-spacing: -0.01em;
    line-height: 160%;
    color: var(--colors-base-text-paragraph);
    z-index: 1;
  }
  .contact-container {
    align-self: stretch;
    background-color: var(--default-100);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-31xl) var(--padding-xl) 207px var(--padding-3xl);
    box-sizing: border-box;
    gap: var(--gap-base);
    max-width: 100%;
  }
  .mask-group-icon6 {
    height: 431px;
    width: 100%;
    position: absolute;
    margin: 0 !important;
    right: 0;
    bottom: -53px;
    left: 0;

    overflow: hidden;
  }
  .ornament-icon {
    align-self: stretch;
    height: 277px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 1;
  }
  .ornament-container {
    margin-left: -453px;
    height: 246px;
    width: 339px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 109px var(--padding-3xs) 136px 0;
    box-sizing: border-box;
    max-width: calc(100% - 698px);
    flex-shrink: 0;
  }
  .have-questions-or {
    margin: 0;
    position: relative;
    font-size: inherit;
    letter-spacing: -0.01em;
    line-height: 150%;
    font-weight: 600;
    font-family: inherit;
    z-index: 1;
  }
  .feedback-title-container {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--padding-3xl) 0 var(--padding-xl);
  }
  .wed-love-to {
    margin: 0;
    letter-spacing: -0.01em;
  }
  .coreaiconsultingcom-or-connec {
    margin: 0;
  }
  .wed-love-to-container {
    align-self: stretch;
    position: relative;
    font-size: var(--font-size-lg);
    line-height: 155%;
    font-weight: 500;
    z-index: 1;
  }
  .logos-icon4 {
    height: 30px;
    width: 30px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    min-height: 30px;
    z-index: 1;
  }
  .logos-container,
  .logos-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .logos-row {
    justify-content: flex-start;
    gap: var(--gap-xl);
  }
  .logos-container {
    align-self: stretch;
    justify-content: center;
    padding: 0 var(--padding-xl);
  }
  .label31 {
    position: relative;
    font-size: var(--body-medium-semibold-size);
    letter-spacing: -0.01em;
    line-height: 25px;
    font-weight: 600;
    font-family: var(--font-instrument-sans);
    color: var(--additional-white);
    text-align: center;
    display: inline-block;
    min-width: 83px;
  }

  /* .feedback-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  } */
  .button35 {
    cursor: pointer;
    border: 0;
    padding: var(--padding-sm-5) var(--padding-5xl);
    background-color: var(--colors-base-primary);
    box-shadow: var(--shadow-xsmall);
    border-radius: var(--br-81xl);
    flex-direction: row;
    gap: var(--gap-5xs);
    z-index: 1;
  }
  .feedback-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-5xl);
    width: auto; /* Let the content define its width */
    max-width: 100%; /* Prevent overflow */
    margin: 0 auto; /* Ensure horizontal centering */
  }
  
  .form-container,
  .ornament-icon1 {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }
  .ornament-icon1 {
    margin-top: -160px;
    height: 277px;
    width: 329px;
    max-width: calc(100% - 1161px);
  }

  .form-container {
    display: flex;
    flex-direction: row;
    height: 326px;
    width: 100%;
    border-radius: var(--layout-radius-radius-4xl);
    background-color: var(--additional-black);
    overflow: hidden;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    gap: 114px; /* Space between child elements */
    margin: 0 auto; /* Ensures the form-container is centered horizontally if it has a fixed width */
  }

  /* For tablets and smaller screens (max-width: 768px) */
@media (max-width: 768px) {
  .feedback-container {
    gap: var(--gap-3xl); /* Reduce the gap for smaller screens */
    padding: 16px; /* Add padding to prevent content from touching screen edges */
    width: 90%; /* Adjust width for better responsiveness */
  }
}

/* For mobile phones (max-width: 480px) */
@media (max-width: 480px) {
  .feedback-container {
    gap: var(--gap-2xl); /* Further reduce the gap for mobile */
    padding: 8px; /* Further reduce padding */
    width: 100%; /* Allow the container to take full width */
    justify-content: flex-start; /* Align content at the top */
  }
}

/* For very small devices (max-width: 320px) */
@media (max-width: 320px) {
  .feedback-container {
    gap: var(--gap-xl); /* Minimize the gap */
    padding: 4px; /* Minimal padding for very small screens */
    width: 100%; /* Full width for smallest devices */
    font-size: 12px; /* Reduce font size for readability */
  }
}


  .contact-container-parent,
  .contact-form,
  .form-container {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  .contact-form {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 var(--padding-61xl);
    margin-top: -157px;
    font-size: var(--font-size-5xl);
    color: var(--additional-white);
  }
  .contact-container-parent {
    align-self: stretch;
    flex-direction: column;
    padding: 0 0 42px;
    text-align: center;
    font-size: var(--font-size-21xl);
    color: var(--additional-black);
    font-family: var(--font-instrument-sans);
  }
  .create-your-image1 {
    margin: 0;
    height: 48px;
    position: relative;
    font-size: inherit;
    line-height: 120%;
    font-weight: 700;
    font-family: inherit;
    display: inline-block;
  }
  .contact-us-to-container1 {
    position: relative;
    line-height: 160%;
  }
  .footer-description-container {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    padding: 0 var(--padding-xl);
    font-size: var(--body-medium-semibold-size);
    color: var(--colors-base-text-paragraph);
    font-family: var(--font-dm-sans);
  }
  .footer-content,
  .title1 {
    display: flex;
    align-items: flex-start;
    max-width: 100%;
  }
  .title1 {
    width: 734px;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--layout-spacing-16);
  }
  .footer-content {
    align-self: stretch;
    flex-direction: row;
    justify-content: center;
    padding: 0 var(--padding-xl);
    box-sizing: border-box;
  }
  .mask-group-icon7,
  .shape-footer-item {
    position: absolute;
    top: 0;
    left: calc(50% - 640px);
    width: 100%;
    height: 100%;
  }
  .shape-footer-item {
    border-radius: var(--br-11xl);
    z-index: 2;
  }
  .mask-group-icon7 {
    z-index: 3;
  }
  .create-image-manipulations-container1 {
    margin: 0;
    width: 620px;
    position: relative;
    font-size: inherit;
    line-height: 120%;
    font-weight: 700;
    font-family: inherit;
    display: inline-block;
    flex-shrink: 0;
    max-width: 100%;
    z-index: 4;
  }
  .command-description-container {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    max-width: 100%;
  }
  .logo-container-item {
    position: absolute;
    top: -1px;
    left: -0.3px;
    border-radius: var(--br-5xl);
    width: 386.8px;
    height: 121px;
  }
  .zap-fast-icon5 {
    height: 60px;
    width: 60px;
    position: relative;
  }
  .imazai5 {
    margin: 0;
    position: relative;
    font-size: inherit;
    line-height: 150%;
    font-weight: 700;
    font-family: inherit;
  }
  .logo-imazai5 {
    position: absolute;
    top: 30px;
    left: calc(50% - 151.5px);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-2xs-3);
    z-index: 1;
  }
  .logo-container1 {
    width: 368px;
    height: 120px;
    position: relative;
    max-width: 100%;
    font-size: var(--font-size-13xl);
  }
  .footer-bottom {
    position: absolute;
    top: 50px;
    left: 0;
    width: 670px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-68xl);
    max-width: 100%;
  }
  .label32 {
    position: relative;
    font-size: var(--body-medium-semibold-size);
    line-height: 155%;
    display: inline-block;
    font-family: var(--font-dm-sans);
    color: var(--additional-white);
    text-align: center;
    min-width: 79px;
  }
  .arrow-up-right-icon12 {
    width: 20px;
    height: 20px;
    position: relative;
  }
  .arrow-up-right-frame,
  .button36 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-10xs-5) 0 0;
  }
  .button36 {
    cursor: pointer;
    border: 0;
    padding: var(--padding-sm-5) var(--padding-5xl);
    background-color: var(--colors-base-primary);
    box-shadow: var(--shadow-xsmall);
    border-radius: var(--br-81xl);
    flex-direction: row;
    gap: var(--gap-7xs);
    z-index: 4;
  }
  .label33 {
    position: relative;
    line-height: 22px;
    display: inline-block;
    min-width: 42px;
  }
  .arrow-up-right-icon13 {
    width: 16px;
    height: 16px;
    position: relative;
  }
  .arrow-up-right-wrapper1,
  .button37 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-10xs) 0 0;
  }
  .button37 {
    border-radius: var(--br-81xl);
    background-color: var(--color-greyscale-700);
    flex-direction: row;
    padding: var(--padding-4xs) var(--padding-base);
    gap: var(--gap-7xs);
    color: var(--additional-white);
  }
  .label34 {
    position: relative;
    line-height: 22px;
    display: inline-block;
    min-width: 44px;
  }
  .frame-input3 {
    margin: 0;
    height: 21px;
    width: 20px;
  }
  .button38 {
    border-radius: var(--br-81xl);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-4xs) var(--padding-3xs);
    gap: var(--gap-7xs);
  }
  .label35 {
    position: relative;
    line-height: 22px;
    display: inline-block;
    min-width: 52px;
  }
  .button39 {
    border-radius: var(--br-81xl);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--padding-4xs) var(--padding-3xs);
    gap: var(--gap-8xs);
  }
  .label36 {
    position: relative;
    line-height: 155%;
  }
  .button40 {
    align-self: stretch;
    border-radius: var(--br-81xl);
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-5xs) var(--padding-4xs) var(--padding-5xs)
      var(--padding-3xs);
    gap: var(--gap-6xs);
  }
  .label37,
  .label38 {
    position: relative;
    display: inline-block;
  }
  .label37 {
    line-height: 22px;
    min-width: 59px;
  }
  .label38 {
    height: 22px;
    line-height: 155%;
  }
  .button42 {
    align-self: stretch;
    border-radius: var(--br-81xl);
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-5xs) var(--padding-11xs) var(--padding-5xs)
      var(--padding-3xs);
    gap: var(--gap-9xs);
  }
  .footer-links-container1,
  .nav-link3 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    box-sizing: border-box;
    max-width: 100%;
  }
  .nav-link3 {
    border-radius: var(--br-81xl);
    justify-content: center;
    padding: 0 var(--padding-9xs);
    gap: var(--layout-spacing-24);
    z-index: 4;
  }
  .footer-links-container1 {
    justify-content: flex-end;
    padding: 0 var(--padding-9xs) 0 0;
  }
  .footer-button-container1 {
    position: absolute;
    top: 50px;
    left: 763px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: var(--gap-220xl);
    max-width: 100%;
    text-align: center;
    font-size: var(--body-small-regular-size);
    color: var(--default-300);
  }
  .logos-icon8 {
    height: 30px;
    width: 30px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    min-height: 30px;
  }
  .sosmed1 {
    position: absolute;
    top: 206px;
    left: 50px;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--layout-spacing-20);
  }
  .shape-footer1 {
    align-self: stretch;
    height: 431px;
    position: relative;
    max-width: 100%;
    text-align: left;
    font-size: var(--font-size-29xl);
    color: var(--additional-white);
    font-family: var(--font-dm-sans);
  }
  .about-page,
  .footer-container1,
  .footer1 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .footer1 {
    flex: 1;
    flex-direction: column;
    gap: var(--gap-31xl);
    max-width: 100%;
  }
  .about-page,
  .footer-container1 {
    box-sizing: border-box;
  }
  .footer-container1 {
    align-self: stretch;
    flex-direction: row;
    padding: 0 var(--padding-61xl);
    max-width: 100%;
    text-align: center;
    font-size: var(--font-size-21xl);
    color: var(--additional-black);
    font-family: var(--font-instrument-sans);
  }
  .about-page {
    position: relative;
    background-color: var(--default-25);
    /* overflow: hidden; */
    flex-direction: column;
    padding: 0 0 5px;
    gap: var(--gap-31xl);
    line-height: normal;
    letter-spacing: normal;
    height: 100vh;
  }
  @media screen and (max-width: 1200px) {

    .img{
      width: 100%;
    }

    .left {
      flex: 1;
    }
    .left-content {
      flex-wrap: wrap;
    }
    .content {
      padding-bottom: var(--padding-13xl);
      box-sizing: border-box;
    }
    .frame-wrapper2 {
      flex: 1;
    }
    .frame-parent9 {
      flex-wrap: wrap;
    }
    .form-container {
      padding-left: var(--padding-152xl);
      padding-right: var(--padding-152xl);
      box-sizing: border-box;
    }
  }
  @media screen and (max-width: 1050px) {

    .img-wrapper {
      min-width: 100%;
    }

    .nav-link2 {
      display: none;
    }

    .navbar-inner{
      align-items: end;
      justify-content: end;
      padding-right: 0px;
    }

    .hamburger{
      display: block;
    }

    .welcome-to-gengreetingai-container {
      font-size: 51px;
      line-height: 61px;
    }
    .left {
      min-width: 100%;
    }
    .m1 {
      font-size: var(--font-size-19xl);
      line-height: 46px;
    }
    .what-we-offer {
      font-size: var(--font-size-13xl);
      line-height: 38px;
    }
    .david-lee,
    .john-doe,
    .julia-santy {
      font-size: var(--font-size-7xl);
      line-height: 36px;
    }
    .content {
      padding-bottom: var(--padding-2xl);
      box-sizing: border-box;
    }
    .our-vision1 {
      font-size: var(--font-size-7xl);
      line-height: 36px;
    }
    .contact-us,
    .create-your-image1 {
      font-size: var(--font-size-13xl);
      line-height: 38px;
    }
    .create-image-manipulations-container1 {
      font-size: var(--font-size-19xl);
      line-height: 46px;
    }
    .imazai5 {
      font-size: var(--font-size-7xl);
      line-height: 38px;
    }
  }
  @media screen and (max-width: 750px) {
    .navbar1 {
      padding-left: var(--padding-21xl);
      padding-right: var(--padding-5xl);
      box-sizing: border-box;
    }

    .card-group{
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .we-at-gengreetingai{
      width: 0;
      height: 0; 
       display: none;
      visibility: hidden;
    }

    .our-ai-driven-platform{
      width: 100%;
      flex-wrap: wrap;
    }

    .from-classic-paintings{
      width: 100%;
      flex-wrap: wrap;
    }
    .we-strive-to{
      width: 100%;
      flex-wrap: wrap;
    }

    .img-wrapper {
      min-width: 100%;
    }
    .left-content {
      gap: 52px;
    }
    .right-content {
      gap: 34px;
    }
    .member-actions {
      flex-wrap: wrap;
    }
    .card11 {
      padding-top: var(--layout-spacing-32);
      padding-bottom: var(--layout-spacing-32);
      box-sizing: border-box;
    }
    .button-parent {
      flex-wrap: wrap;
    }
    .card12 {
      height: auto;
      min-height: 500;
    }
    .main-content {
      gap: var(--gap-xl);
      padding-top: 73px;
    }
    .content {
      padding-left: 39px;
      padding-right: var(--padding-21xl);
      padding-bottom: var(--padding-xl);
      box-sizing: border-box;
      padding-top: 73px;
    }
    .image-group {
      /* gap: 130px; */
    }
    .frame-wrapper2,
    .vision-content {
      min-width: 100%;
    }
    .frame-parent9 {
      gap: var(--gap-6xl);
    }
    .frame-parent8 {
      gap: var(--gap-xl);
    }
    .about-page-inner {
      padding-left: var(--padding-21xl);
      padding-right: var(--padding-21xl);
      padding-bottom: var(--padding-13xl);
      box-sizing: border-box;
    }
    .ornament-container {
      padding-top: var(--padding-158xl);
      padding-bottom: 88px;
      box-sizing: border-box;
    }
    .form-container {
      gap: 57px;
      padding-left: var(--padding-66xl);
      padding-right: var(--padding-66xl);
      box-sizing: border-box;
    }
    .contact-form {
      padding-left: var(--padding-21xl);
      padding-right: var(--padding-21xl);
      box-sizing: border-box;
    }
    .contact-container-parent {
      padding-bottom: var(--padding-8xl);
      box-sizing: border-box;
    }
    .nav-link3 {
      flex-wrap: wrap;
    }
    .footer1 {
      gap: var(--gap-6xl);
    }
    .footer-container1 {
      padding-left: var(--padding-21xl);
      padding-right: var(--padding-21xl);
      box-sizing: border-box;
    }
    .about-page {
      gap: var(--gap-6xl);
    }
  }
  @media screen and (max-width: 450px) {
    .welcome-to-gengreetingai-container {
      font-size: var(--font-size-19xl);
      line-height: 46px;
    }

    .image-content{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .img-wrapper {
      min-width: 100%;
    }

    .card-group{
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .we-at-gengreetingai{
       width: 0;
      height: 0; 
      display: none;
      visibility: hidden;
    }

    .our-ai-driven-platform{
      width: 100%;
      flex-wrap: wrap;
    }

    .from-classic-paintings{
      width: 100%;
      flex-wrap: wrap;
    }
    .we-strive-to{
      width: 100%;
      flex-wrap: wrap;
    }

    .m1 {
      font-size: var(--font-size-10xl);
      line-height: 35px;
    }
    .img-wrapper {
      padding-top: 46px;
      box-sizing: border-box;
    }
    .left-content {
      gap: var(--gap-7xl);
    }
    .what-we-offer {
      font-size: var(--font-size-5xl);
      line-height: 29px;
    }
    .innovative-technology,
    .transformative-card-designing {
      font-size: var(--font-size-lgi);
      line-height: 31px;
    }
    .innovative-technology {
      line-height: 29px;
    }
    .card-bottom,
    .rectangle-container {
      padding-left: var(--padding-xl);
      box-sizing: border-box;
    }
    .card8 {
      padding-top: var(--padding-13xl);
      box-sizing: border-box;
    }
    .our-team-wrapper {
      padding-left: var(--padding-xl);
      padding-right: var(--padding-xl);
      box-sizing: border-box;
    }
    .right-content {
      gap: 17px;
    }
    .david-lee,
    .john-doe,
    .julia-santy,
    .our-vision1 {
      font-size: var(--font-size-lgi);
      line-height: 27px;
    }
    .contact-us {
      font-size: var(--font-size-5xl);
      line-height: 29px;
    }
    .contact-title-container {
      padding-left: var(--padding-xl);
      padding-right: var(--padding-xl);
      box-sizing: border-box;
    }
    .have-questions-or {
      font-size: var(--font-size-lgi);
      line-height: 29px;
    }
    .form-container {
      gap: 28px;
      padding: var(--padding-158xl) var(--padding-xl) var(--padding-7xl);
      box-sizing: border-box;
    }
    .create-your-image1 {
      font-size: var(--font-size-5xl);
      line-height: 29px;
    }
    .create-image-manipulations-container1 {
      font-size: var(--font-size-10xl);
      line-height: 35px;
    }
    .imazai5 {
      font-size: var(--font-size-lgi);
      line-height: 29px;
    }
    .logo-imazai5 {
      flex-wrap: wrap;
    }
    .logo-container1 {
      height: auto;
      min-height: 120;
    }
    .shape-footer1 {
      height: auto;
      min-height: 431;
    }
  }

  @media screen and(min-width: 1920px) and(max-width: 2600px){
    .left-content {
      gap: 400px;
     
    }
    .img{
      overflow: hidden;
    }
    .left-content-wrapper{
      width: 100%;
    }
    .img-wrapper{
      margin-left: 100px;
    }
  }
  

  /* animate */

  /* Initial states and transitions */
.welcome-to-gengreetingai-container,
.welcome-to-gengreetingai-,
.welcome-to,
.dive-into-a {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* Animation classes */
.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Specific states for animations */
.welcome-to-gengreetingai-container.animate {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.welcome-to-gengreetingai-animate {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.welcome-to.animate {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.dive-into-a.animate {
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* Delays for sequential animations */
.welcome-to-gengreetingai-container {
    animation-delay: 0.5s;
}

.welcome-to-gengreetingai- {
    animation-delay: 1s;
}

.welcome-to {
    animation-delay: 1.5s;
}

.dive-into-a {
    animation-delay: 2s;
}

/* Initial states and transitions */
.what-we-offer,
.we-at-gengreetingai,
.image-placeholder-icon
.transformative-card-designing {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Keyframe animation for fading in and scaling up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Animation classes */
.animate {
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes popup {
  from {
      transform: scale(0.8);
      opacity: 0;
  }
  to {
      transform: scale(1);
      opacity: 1;
  }
}

.animate-popup,
.card-group {
  animation: popup 0.8s ease-out forwards;
}


/* new footer */

.new-footer {
  background-color: #000000;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  width: 95%;
  height: 343px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  padding: 40px 20px;
}

.footer-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: -5px;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: gridMove 15s linear infinite;
}

/* Add subtle glow effect */
.footer-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.1),
    transparent 70%
  );
  pointer-events: none;
}

/* Add grid overlay with different size for depth */
.footer-bg::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(30px);
  }
}

/* Content Styles */
.footer-title {
  font-size: 26px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  
}

.footer-description {
  font-size: 16px;
  margin-bottom: 20px;
  max-width: 80%;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.social-icon {
  width: 40px;
  height: 40px;
  transition: transform 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
}

.contact-button {
  background-color: #0179ff;
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.contact-button:hover {
  background-color: #0060cc;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(1, 121, 255, 0.2);
}

.contact-button:active {
  transform: translateY(0);
}

/* Add gradient overlay to fade edges */
.new-footer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
}

/* Media Queries */
@media (max-width: 768px) {
  .new-footer {
    height: auto;
    min-height: 343px;
    padding: 30px 15px;
  }
  
  .footer-title {
    font-size: 22px;
  }
  
  .footer-description {
    font-size: 14px;
    max-width: 90%;
  }
  
  .social-icon {
    width: 35px;
    height: 35px;
  }
}

@media (max-width: 480px) {
  .footer-title {
    font-size: 20px;
  }
  
  .footer-description {
    max-width: 95%;
  }
  
  .social-icons {
    gap: 12px;
  }
  
  .social-icon {
    width: 30px;
    height: 30px;
  }
}