.main-website,
.main-website:hover {
  background-color: var(--color-black);
  display: flex;
  width: var(--width-1366);
  height: auto;
  flex-direction: column;
  gap: 58px;
  align-items: flex-end;
  padding: var(--padding-0) var(--padding-0) var(--padding-24);
  box-sizing: border-box;
  line-height: normal;
  letter-spacing: normal;
}
.main-website {
  position: relative;
  overflow: hidden;
}
.main-website:hover {
  justify-content: flex-start;
}
.main-website-inner,
.main-website-inner:hover {
  align-self: stretch;
  width: 100%;
  justify-content: flex-end;
  padding: var(--padding-0) 50px;
  box-sizing: border-box;
}
.main-website-inner {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  height: auto;
  gap: var(--gap-0);
  transform: rotate(0deg);
  text-align: right;
  font-size: var(--fs-8);
  color: var(--color-tan-100);
  font-family: var(--font-poppins);
}
.main-website-inner:hover {
  flex-direction: row;
}
.frame-wrapper {
  flex: 1;
  flex-direction: column;
}
.frame-parent,
.frame-parent:hover,
.frame-wrapper,
.frame-wrapper:hover,
.main-website-inner:hover {
  display: flex;
  height: auto;
  gap: var(--gap-0);
  align-items: flex-start;
  transform: rotate(0deg);
  max-width: 100%;
}
.frame-wrapper:hover {
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
}
.frame-parent,
.frame-parent:hover {
  align-self: stretch;
  width: 100%;
}
.frame-parent {
  position: relative;
  isolation: isolate;
}
.frame-parent:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.chatgpt-image-jun-18-2026-02-parent,
.chatgpt-image-jun-18-2026-02-parent:hover {
  display: block;
  width: 448px;
  height: 1133px;
  gap: var(--gap-0);
  align-items: flex-start;
  transform: rotate(0deg);
}
.chatgpt-image-jun-18-2026-02-parent {
  position: absolute;
  margin: 0 !important;
  right: -50px;
  bottom: -275px;
  flex-shrink: 0;
}
.chatgpt-image-jun-18-2026-02-parent:hover {
  justify-content: flex-start;
}
.chatgpt-image-jun-18-2026-02 {
  position: absolute;
  top: 738px;
  left: 0;
  object-fit: cover;
  flex-shrink: 0;
}
.chatgpt-image-jun-18-2026-02,
.chatgpt-image-jun-18-2026-02:hover {
  display: block;
  width: 592px;
  height: 395px;
}
.frame-child {
  top: -4px;
  left: 300px;
  z-index: 1;
}
.frame-child,
.frame-child:hover,
.frame-item:hover {
  display: block;
  width: var(--width-15);
  height: 939px;
}
.frame-child,
.frame-inner,
.frame-item {
  position: absolute;
  flex-shrink: 0;
}
.frame-item {
  top: -349px;
  left: 209px;
  width: var(--width-15);
  height: 939px;
  display: block;
}
.frame-inner {
  top: 45px;
  left: 392px;
  z-index: 1;
}
.frame-inner,
.frame-inner:hover {
  display: block;
  width: var(--width-15);
  height: 1069px;
}
.chatgpt-image-jun-18-2026-12 {
  position: absolute;
  top: 120px;
  left: 216px;
  object-fit: cover;
  z-index: 2;
  flex-shrink: 0;
}
.chatgpt-image-jun-18-2026-12,
.chatgpt-image-jun-18-2026-12:hover {
  display: block;
  width: 91px;
  height: 91px;
}
.chatgpt-image-jun-18-2026-122 {
  position: absolute;
  top: 250px;
  left: 308px;
  object-fit: cover;
  z-index: 2;
  flex-shrink: 0;
}
.chatgpt-image-jun-18-2026-122,
.chatgpt-image-jun-18-2026-122:hover {
  display: block;
  width: 90px;
  height: 270px;
}
.chatgpt-image-jun-18-2026-01 {
  position: absolute;
  top: 421px;
  left: 217px;
  object-fit: cover;
  z-index: 2;
  flex-shrink: 0;
}
.chatgpt-image-jun-18-2026-01,
.chatgpt-image-jun-18-2026-01:hover {
  display: block;
  width: 91px;
  height: 61px;
}
.if-people-dont-notice-your-co-parent,
.if-people-dont-notice-your-co-parent:hover {
  display: flex;
  width: 411.1px;
  height: 172.1px;
  flex-direction: column;
  gap: var(--gap-11);
  align-items: flex-end;
  transform: rotate(0deg);
}
.if-people-dont-notice-your-co-parent {
  margin: 0 !important;
  position: absolute;
  top: 270px;
  left: 427px;
  flex-shrink: 0;
}
.if-people-dont-notice-your-co-parent:hover {
  justify-content: flex-start;
}
.if-people-dont,
.if-people-dont:hover {
  font-weight: 300;
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
  flex-shrink: 0;
}
.if-people-dont {
  position: relative;
}
.if-people-dont:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-8);
  text-align: right;
  color: var(--color-tan-100);
}
.logo-svg-icon {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.logo-svg-icon,
.logo-svg-icon:hover {
  display: block;
  align-self: stretch;
  width: 100%;
  flex: 1;
  flex-shrink: 0;
}
.frame-group,
.frame-group:hover {
  display: flex;
  width: 428px;
  height: auto;
  flex-direction: column;
  gap: 6.9px;
  align-items: flex-start;
  transform: rotate(0deg);
  max-width: 100%;
}
.frame-group {
  margin: 0 !important;
  position: absolute;
  bottom: 242.9px;
  left: calc(50% - 214px);
  flex-shrink: 0;
  text-align: left;
}
.frame-group:hover {
  justify-content: flex-start;
}
.frame-container,
.frame-container:hover {
  display: block;
  align-self: stretch;
  width: 100%;
  height: 42px;
  gap: var(--gap-0);
  align-items: flex-start;
  transform: rotate(0deg);
}
.frame-container {
  position: relative;
}
.frame-container:hover {
  justify-content: flex-start;
}
.view-our-work-wrapper,
.view-our-work-wrapper:hover {
  display: flex;
  width: auto;
  align-self: unset;
  height: auto;
  gap: var(--gap-0);
  align-items: flex-start;
  padding: var(--padding-12) 35px 9px;
  box-sizing: border-box;
  white-space: nowrap;
}
.view-our-work-wrapper {
  cursor: pointer;
  border: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.view-our-work-wrapper:hover {
  background-color: var(--color-tan-200);
  flex-direction: row;
  justify-content: flex-start;
}
.view-our-work-wrapper,
.view-our-work-wrapper:active {
  background-color: var(--color-tan-300);
}
.view-our-work {
  position: relative;
}
.view-our-work,
.view-our-work:hover {
  font-weight: 500;
  font-family: var(--font-poppins);
  font-size: var(--fs-14);
  text-align: left;
  color: var(--color-black);
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.book-a-consultation-parent,
.book-a-consultation-parent:hover {
  display: flex;
  width: 210px;
  height: 43px;
  gap: -93px;
  align-items: flex-start;
  padding: var(--padding-10) 17px var(--padding-8) var(--padding-22);
  box-sizing: border-box;
  border: var(--border-1);
}
.book-a-consultation-parent {
  cursor: pointer;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 219px;
  overflow: hidden;
}
.book-a-consultation-parent:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.book-a-consultation {
  position: relative;
  z-index: 1;
}
.book-a-consultation,
.book-a-consultation:hover {
  font-weight: 500;
  font-family: var(--font-poppins);
  font-size: var(--fs-14);
  text-align: left;
  color: var(--color-tan-200);
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.view-our-work2 {
  position: relative;
  margin-left: -93px;
}
.view-our-work2,
.view-our-work2:hover {
  font-weight: 500;
  font-family: var(--font-poppins);
  font-size: var(--fs-12);
  text-align: left;
  color: var(--color-black);
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.if-your-message-is-not-clear-wrapper,
.if-your-message-is-not-clear-wrapper:hover {
  width: 317px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-8);
  box-sizing: border-box;
  height: auto;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.if-your-message-is-not-clear-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.if-your-message,
.if-your-message:hover {
  font-weight: 300;
  display: block;
  flex: 1;
  height: 46.2px;
}
.if-your-message {
  position: relative;
}
.if-your-message:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-8);
  text-align: left;
  color: var(--color-tan-100);
}
.frame-div {
  flex: 1;
  position: relative;
  max-width: 100%;
  flex-shrink: 0;
}
.frame-div,
.frame-div:hover,
.frame-parent2,
.frame-parent2:hover {
  display: block;
  height: 858px;
  gap: var(--gap-0);
  align-items: flex-start;
  transform: rotate(0deg);
}
.frame-div:hover {
  flex: 1;
  justify-content: flex-start;
  max-width: 100%;
}
.frame-parent2,
.frame-parent2:hover {
  width: 339.9px;
}
.frame-parent2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 35px;
}
.frame-parent2:hover {
  justify-content: flex-start;
}
.group-icon {
  position: absolute;
  top: 0;
  left: 0;
}
.group-icon,
.group-icon:hover {
  display: block;
  width: var(--width-15);
  height: 704px;
}
.frame-child2 {
  position: absolute;
  top: 95px;
  left: 48px;
}
.frame-child2,
.frame-child2:hover {
  display: block;
  width: 133px;
  height: 763px;
}
.chatgpt-image-jun-18-2026-123 {
  position: absolute;
  top: 161px;
  left: 11px;
  object-fit: cover;
  z-index: 1;
}
.chatgpt-image-jun-18-2026-123,
.chatgpt-image-jun-18-2026-123:hover {
  display: block;
  width: 105px;
  height: 159px;
}
.clip-path-group {
  position: absolute;
  top: 520px;
  left: 168px;
  object-fit: cover;
  z-index: 1;
}
.clip-path-group,
.clip-path-group:hover {
  display: block;
  width: 171.9px;
  height: 231.5px;
}
.frame-header,
.frame-header:hover {
  background-color: var(--color-tan-500);
  display: flex;
  width: 100%;
  height: auto;
  gap: var(--gap-20);
  align-items: flex-end;
  justify-content: space-between;
  border-radius: 50px;
  padding: 23px 41px 23px var(--padding-48);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-header {
  position: absolute;
  top: 28px;
  left: 0;
  overflow: hidden;
  z-index: 2;
}
.frame-header:hover {
  flex-direction: row;
}
.logo-svg-wrapper,
.logo-svg-wrapper:hover {
  display: flex;
  width: 134.7px;
  height: auto;
  flex-direction: column;
  gap: var(--gap-0);
  align-items: flex-start;
  justify-content: flex-end;
  transform: rotate(0deg);
  padding: var(--padding-0) var(--padding-0) var(--padding-11);
  box-sizing: border-box;
}
.logo-svg-icon2 {
  position: relative;
}
.logo-svg-icon2,
.logo-svg-icon2:hover {
  display: block;
  width: var(--width-64);
  height: var(--height-19);
}
.frame-nav {
  margin: 0;
  gap: 44.75px;
  max-width: 100%;
  align-self: unset;
  transform: rotate(0deg);
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-tan-200);
  font-family: var(--font-poppins);
}
.frame-nav,
.frame-nav:hover,
.home-wrapper,
.home-wrapper:hover {
  display: flex;
  width: auto;
  height: auto;
  align-items: flex-start;
}
.frame-nav:hover {
  align-self: unset;
  flex-direction: row;
  gap: 44.75px;
  justify-content: flex-start;
  transform: rotate(0deg);
  max-width: 100%;
}
.home-wrapper,
.home-wrapper:hover {
  align-self: stretch;
  gap: var(--gap-10);
  padding: var(--padding-10);
  box-sizing: border-box;
}
.home-wrapper {
  overflow: hidden;
}
.home-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.home,
.work {
  position: relative;
}
.work {
  font-weight: 500;
}
.testimonials,
.testimonials:hover {
  font-weight: 500;
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.testimonials {
  position: relative;
}
.testimonials:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-16);
  text-align: left;
  color: var(--color-tan-200);
}
.frame-wrapper2,
.frame-wrapper2:hover {
  display: flex;
  width: auto;
  align-self: unset;
  height: auto;
  flex-direction: column;
  gap: var(--gap-0);
  align-items: flex-start;
  justify-content: flex-end;
  transform: rotate(0deg);
  padding: var(--padding-0) var(--padding-0) var(--padding-6);
  box-sizing: border-box;
}
.connect-with-us-wrapper,
.connect-with-us-wrapper:hover {
  display: flex;
  width: 142px;
  height: var(--height-33);
  gap: var(--gap-10);
  align-items: flex-start;
  border-radius: var(--br-8);
  padding: var(--padding-5) var(--padding-10);
  box-sizing: border-box;
}
.connect-with-us-wrapper {
  cursor: pointer;
  border: 0;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
}
.connect-with-us-wrapper:hover {
  background-color: var(--color-steelblue);
  flex-direction: row;
  justify-content: flex-start;
}
.connect-with-us-wrapper,
.connect-with-us-wrapper:active {
  background-color: var(--color-cornflowerblue);
}
.connect-with-us {
  height: 21px;
  width: 114px;
  position: absolute;
  margin: 0 !important;
  top: calc(50% - 10.5px);
  left: calc(50% - 57px);
  font-size: var(--fs-14);
  font-weight: 500;
  font-family: var(--font-poppins);
  color: var(--color-white);
  text-align: left;
  display: inline-block;
  z-index: 0;
}
.main-website-child,
.main-website-child:hover {
  align-self: stretch;
  width: 100%;
  gap: var(--gap-0);
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) 27.8px var(--padding-21);
  box-sizing: border-box;
}
.main-website-child {
  text-align: left;
  font-size: var(--fs-15);
  color: var(--color-tan-200);
  font-family: var(--font-poppins);
}
.main-website-child:hover {
  flex-direction: row;
}
.frame-parent3,
.frame-parent3:hover,
.main-website-child,
.main-website-child:hover {
  display: flex;
  max-width: 100%;
  height: auto;
  transform: rotate(0deg);
}
.frame-parent3,
.frame-parent3:hover {
  width: 523px;
  flex-direction: column;
  align-items: flex-end;
  gap: 13.3px;
}
.frame-parent3:hover {
  justify-content: flex-start;
}
.frame-wrapper3 {
  align-self: stretch;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-24);
  box-sizing: border-box;
  width: 100%;
}
.frame-wrapper3,
.frame-wrapper3:hover,
.line-parent,
.line-parent:hover {
  display: flex;
  height: auto;
  gap: var(--gap-0);
  align-items: flex-start;
  transform: rotate(0deg);
}
.frame-wrapper3:hover {
  align-self: stretch;
  width: 100%;
  flex-direction: row;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20) var(--padding-0) var(--padding-24);
  box-sizing: border-box;
}
.line-parent,
.line-parent:hover {
  width: auto;
  align-self: unset;
}
.line-parent {
  position: relative;
  isolation: isolate;
}
.line-parent:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.line-div {
  position: absolute;
  margin: 0 !important;
  bottom: 10.99px;
  left: -179.99px;
  transform-origin: 0 0;
  z-index: 1;
  flex-shrink: 0;
}
.line-div,
.line-div:hover {
  display: block;
  width: 503px;
  height: var(--height-1);
  transform: rotate(0.34deg);
  border: var(--border-1);
  box-sizing: border-box;
}
.trusted-by-brands-wrapper,
.trusted-by-brands-wrapper:hover {
  background-color: var(--color-black);
  display: flex;
  width: auto;
  align-self: unset;
  height: auto;
  gap: var(--gap-0);
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-4);
  box-sizing: border-box;
}
.trusted-by-brands-wrapper {
  overflow: hidden;
  z-index: 2;
  flex-shrink: 0;
}
.trusted-by-brands-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.trusted-by-brands,
.trusted-by-brands:hover {
  font-weight: 500;
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.trusted-by-brands {
  position: relative;
}
.trusted-by-brands:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-15);
  text-align: left;
  color: var(--color-tan-200);
}
.group-div,
.group-div:hover {
  display: flex;
  align-self: stretch;
  width: 100%;
  height: auto;
  gap: 69px;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  max-width: 100%;
}
.group-div {
  z-index: 1;
  font-size: var(--fs-48);
}
.group-div:hover {
  flex-direction: row;
}
.frame-parent4 {
  height: var(--height-84_9);
  flex-direction: column;
  padding: var(--padding-0) var(--padding-0) var(--padding-12_1);
}
.frame-parent4,
.frame-parent4:hover,
.wrapper,
.wrapper:hover {
  display: flex;
  width: auto;
  align-self: unset;
  gap: var(--gap-0);
  align-items: flex-start;
  box-sizing: border-box;
}
.frame-parent4:hover {
  height: var(--height-84_9);
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-12_1);
}
.wrapper,
.wrapper:hover {
  height: var(--height-61_7);
  transform: rotate(0deg);
  padding: var(--padding-0) var(--padding-0) var(--padding-0);
}
.wrapper {
  flex-shrink: 0;
}
.wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.h2 {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 500;
  font-family: inherit;
}
.brands-served,
.brands-served:hover,
.h2,
.h2:hover {
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
  flex-shrink: 0;
}
.h2:hover {
  font-weight: 500;
  font-family: var(--font-poppins);
  font-size: var(--fs-48);
  text-align: left;
}
.brands-served,
.brands-served:hover {
  font-size: var(--fs-15);
}
.brands-served {
  position: relative;
}
.brands-served:hover {
  font-family: var(--font-poppins);
  text-align: left;
}
.frame-parent5,
.frame-parent5:hover {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-46);
  min-width: 225px;
  max-width: 100%;
  height: auto;
  transform: rotate(0deg);
}
.frame-parent5:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-parent6 {
  height: var(--height-84_9);
  flex: 1;
  flex-direction: column;
  padding: var(--padding-0) var(--padding-0) var(--padding-12_1);
  min-width: 101px;
}
.frame-parent6,
.frame-parent6:hover,
.m-wrapper,
.m-wrapper:hover {
  display: flex;
  gap: var(--gap-0);
  align-items: flex-start;
  box-sizing: border-box;
}
.frame-parent6:hover {
  flex: 1;
  height: var(--height-84_9);
  flex-direction: column;
  justify-content: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-12_1);
  min-width: 101px;
}
.m-wrapper,
.m-wrapper:hover {
  align-self: stretch;
  width: 100%;
  height: var(--height-61_7);
  transform: rotate(0deg);
  padding: var(--padding-0) var(--padding-0) var(--padding-0);
}
.m-wrapper {
  flex-shrink: 0;
}
.m-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.m,
.m:hover {
  font-weight: 500;
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  flex: 1;
  height: auto;
  flex-shrink: 0;
}
.m {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-family: inherit;
}
.m:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-48);
  text-align: left;
}
.frame-parent7,
.frame-parent7:hover {
  height: var(--height-84_9);
  width: 144px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-12_1);
  box-sizing: border-box;
  gap: var(--gap-0);
}
.frame-parent7:hover {
  justify-content: flex-start;
}
.logos-left-wrapper,
.logos-left-wrapper:hover {
  padding: var(--padding-0) var(--padding-0) var(--padding-3);
  box-sizing: border-box;
  width: auto;
  align-self: unset;
  height: auto;
  transform: rotate(0deg);
}
.logos-left-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.logos-left,
.logos-left-wrapper,
.logos-left-wrapper:hover,
.logos-left:hover {
  display: flex;
  gap: var(--gap-0);
  align-items: flex-start;
}
.logos-left,
.logos-left:hover {
  width: var(--width-1366);
  height: var(--height-107);
}
.logos-left {
  overflow: hidden;
  flex-shrink: 0;
}
.logos-left:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.main-logo {
  width: 4034px;
  flex-shrink: 0;
}
.frame-parent8,
.frame-parent8:hover,
.main-logo,
.main-logo:hover {
  display: flex;
  height: var(--height-107);
  gap: var(--gap-80);
  align-items: flex-start;
}
.main-logo:hover {
  width: 4034px;
  flex-direction: row;
  justify-content: flex-start;
  flex-shrink: 0;
}
.frame-parent8,
.frame-parent8:hover {
  width: var(--width-1366);
}
.frame-parent8 {
  overflow: hidden;
  flex-shrink: 0;
}
.frame-parent8:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-icon {
  position: relative;
  max-height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.frame-child9,
.frame-child9:hover,
.frame-icon,
.frame-icon:hover {
  display: block;
  width: var(--width-107);
  height: var(--height-107);
  gap: var(--gap-0);
}
.frame-child9 {
  position: relative;
  object-fit: cover;
  flex-shrink: 0;
}
.frame-parent9,
.frame-parent9:hover {
  height: var(--height-107);
  width: 1977px;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-80);
}
.frame-parent9:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-child13 {
  position: relative;
  object-fit: cover;
}
.frame-child13,
.frame-child13:hover {
  display: block;
  width: var(--width-107);
  height: var(--height-107);
  gap: var(--gap-0);
}
.component-16-wrapper,
.component-16-wrapper:hover {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 13px;
  box-sizing: border-box;
  width: auto;
  align-self: unset;
  height: auto;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.component-16-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-parent10 {
  margin-left: -1495px;
  width: 2912px;
  flex-shrink: 0;
}
.frame-parent10,
.frame-parent10:hover,
.frame-parent11,
.frame-parent11:hover {
  height: var(--height-107);
  display: flex;
  align-items: flex-start;
  gap: var(--gap-80);
}
.frame-parent10:hover {
  width: 2912px;
  flex-direction: row;
  justify-content: flex-start;
  flex-shrink: 0;
}
.frame-parent11,
.frame-parent11:hover {
  width: 1416px;
}
.frame-parent11:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-child24 {
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.frame-child24,
.frame-child24:hover {
  display: block;
  width: var(--width-107);
  height: var(--height-107);
  gap: var(--gap-0);
}
.frame-parent12,
.frame-parent12:hover {
  display: flex;
  width: 1365px;
  height: var(--height-107);
  gap: var(--gap-80);
  align-items: flex-start;
}
.frame-parent12 {
  overflow: hidden;
  flex-shrink: 0;
}
.frame-parent12:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-section {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-0) 43px;
  width: 100%;
  gap: -1307px;
  text-align: left;
  font-size: var(--fs-40);
  color: var(--color-tan-200);
  font-family: var(--font-poppins);
}
.component-12-wrapper,
.component-12-wrapper:hover,
.frame-section,
.frame-section:hover {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  transform: rotate(0deg);
}
.frame-section:hover {
  align-self: stretch;
  width: 100%;
  flex-direction: row;
  gap: -1307px;
  justify-content: flex-start;
  padding: var(--padding-0) var(--padding-0) 43px;
}
.component-12-wrapper,
.component-12-wrapper:hover {
  flex-direction: column;
  padding: var(--padding-10) var(--padding-0) var(--padding-0);
  width: auto;
  align-self: unset;
  gap: var(--gap-0);
}
.component-12-wrapper:hover {
  justify-content: flex-start;
}
.component-12 {
  width: var(--width-1366);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--padding-2) var(--padding-0) var(--padding-6);
  position: relative;
  isolation: isolate;
  gap: var(--gap-4);
}
.component-12,
.component-12:hover,
.hide-1 {
  height: 510px;
  background-color: var(--color-black);
  box-sizing: border-box;
}
.component-12:hover {
  display: flex;
  width: var(--width-1366);
  flex-direction: row;
  gap: var(--gap-4);
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--padding-2) var(--padding-0) var(--padding-6);
}
.hide-1 {
  margin-bottom: -8px;
  width: 641px;
  padding: 119px 38px 331px 57px;
  position: relative;
  isolation: isolate;
  z-index: 0;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-40);
  color: var(--color-white);
  font-family: var(--font-poppins);
}
.hide-1,
.hide-1-inner,
.hide-1-inner:hover,
.hide-1:hover {
  display: flex;
  gap: var(--gap-0);
  align-items: flex-start;
}
.hide-1:hover {
  background-color: var(--color-black);
  width: 641px;
  height: 510px;
  flex-direction: row;
  justify-content: flex-start;
  padding: 119px 38px 331px 57px;
  box-sizing: border-box;
}
.hide-1-inner,
.hide-1-inner:hover {
  width: 546px;
  height: var(--height-60);
}
.hide-1-inner {
  overflow: hidden;
  flex-shrink: 0;
  z-index: 0;
}
.hide-1-inner:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.meta-creator-day-parent,
.meta-creator-day-parent:hover {
  display: flex;
  width: 455px;
  height: 378px;
  flex-direction: column;
  gap: var(--gap-46);
  align-items: flex-start;
}
.meta-creator-day-parent {
  flex-shrink: 0;
}
.meta-creator-day-parent:hover {
  justify-content: flex-start;
}
.billionaires-interior,
.kozynap-campaign,
.meta-creator-day,
.tata-sarathi {
  margin: 0;
  width: 403px;
  height: var(--height-60);
  position: relative;
  font-size: inherit;
  font-weight: 700;
  font-family: inherit;
  display: block;
}
.billionaires-interior:hover,
.kozynap-campaign:hover,
.meta-creator-day:hover,
.tata-sarathi:hover {
  font-weight: 700;
  font-family: var(--font-poppins);
  font-size: var(--fs-40);
  text-align: left;
  color: var(--color-white);
  display: block;
}
.billionaires-interior,
.kozynap-campaign,
.tata-sarathi {
  width: 290px;
}
.billionaires-interior,
.kozynap-campaign {
  width: 427px;
}
.billionaires-interior {
  width: 455px;
}
.for-metas-creator,
.for-metas-creator:hover {
  font-family: var(--font-scada);
  font-size: var(--fs-20);
  color: var(--color-linen);
  display: block;
  width: 510px;
}
.for-metas-creator {
  height: 100px;
  position: absolute;
  margin: 0 !important;
  top: 193px;
  left: 59px;
  white-space: pre-wrap;
  flex-shrink: 0;
  z-index: 1;
}
.for-metas-creator:hover {
  text-align: left;
}
.frame-parent13,
.frame-parent13:hover {
  display: flex;
  width: 721px;
  height: 440px;
  flex-direction: column;
  gap: var(--gap-26);
  align-items: flex-start;
  transform: rotate(0deg);
}
.frame-parent13 {
  z-index: 1;
  flex-shrink: 0;
}
.frame-parent13:hover {
  justify-content: flex-start;
}
.group-section,
.group-section:hover {
  display: flex;
  width: 721px;
  height: 381px;
  gap: 52.33px;
  align-items: flex-start;
}
.group-section {
  overflow: hidden;
  flex-shrink: 0;
}
.group-section:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-child40 {
  position: relative;
  object-fit: cover;
  flex-shrink: 0;
}
.frame-child40,
.frame-child40:hover {
  display: block;
  width: 305px;
  height: 381px;
  gap: var(--gap-0);
  border-radius: 29px;
  border: var(--border-1);
  box-sizing: border-box;
}
.frame-wrapper4,
.frame-wrapper4:hover {
  display: flex;
  height: var(--height-347);
  flex-direction: column;
  align-items: flex-start;
  transform: rotate(0deg);
  padding: var(--padding-33) var(--padding-0) var(--padding-0);
}
.frame-wrapper4 {
  width: var(--width-252);
  box-sizing: border-box;
  gap: var(--gap-0);
  flex-shrink: 0;
}
.frame-wrapper4:hover {
  justify-content: flex-start;
}
.frame-child41 {
  position: relative;
  object-fit: cover;
}
.frame-child41,
.frame-child41:hover,
.frame-wrapper4:hover {
  width: var(--width-252);
  gap: var(--gap-0);
  box-sizing: border-box;
}
.frame-child41,
.frame-child41:hover {
  display: block;
  height: var(--height-314);
  border: var(--border-1);
}
.frame-wrapper7,
.frame-wrapper7:hover {
  width: 500px;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) 350px;
  box-sizing: border-box;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.frame-wrapper7:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-parent14,
.frame-parent14:hover,
.frame-wrapper7,
.frame-wrapper7:hover {
  height: var(--height-33);
  display: flex;
  align-items: flex-start;
}
.frame-parent14,
.frame-parent14:hover {
  width: 150px;
  gap: 25px;
}
.frame-parent14:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-wrapper8,
.frame-wrapper8:hover {
  height: 25px;
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-8) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.frame-wrapper8:hover {
  justify-content: flex-start;
}
.frame-child44,
.frame-child44:hover {
  display: block;
  width: 92px;
  height: 17px;
}
.frame-child44,
.frame-child45 {
  position: relative;
}
.frame-child45,
.frame-child45:hover {
  background-color: var(--color-tan-200);
  display: block;
  width: 33px;
  height: var(--height-33);
  gap: var(--gap-0);
  border-radius: 57px;
}
.chatgpt-image-jun-18-2026-022 {
  position: absolute;
  margin: 0 !important;
  bottom: -245.4px;
  left: -325px;
  object-fit: contain;
  z-index: 2;
  flex-shrink: 0;
}
.chatgpt-image-jun-18-2026-022,
.chatgpt-image-jun-18-2026-022:hover {
  display: block;
  width: 707px;
  height: 621.4px;
}
.featured-work,
.featured-work:hover {
  font-weight: 700;
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.featured-work {
  position: relative;
  font-size: inherit;
  font-family: inherit;
  z-index: 3;
  margin: 0 0 0-1307px;
}
.featured-work:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-40);
  text-align: left;
  color: var(--color-tan-200);
}
.main-website-inner2,
.main-website-inner2:hover {
  width: auto;
  align-self: unset;
  gap: var(--gap-0);
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-19) 95px;
  box-sizing: border-box;
}
.main-website-inner2 {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  height: auto;
  transform: rotate(0deg);
  text-align: left;
  font-size: var(--fs-64);
  color: var(--color-tan-200);
  font-family: var(--font-porter-sans-block);
}
.main-website-inner2:hover {
  flex-direction: row;
}
.frame-parent15 {
  flex-direction: column;
  gap: var(--gap-30);
  width: auto;
  align-self: unset;
}
.frame-parent15,
.frame-parent15:hover,
.main-website-inner2:hover,
.what-we-offer-wrapper,
.what-we-offer-wrapper:hover {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  height: auto;
  transform: rotate(0deg);
}
.frame-parent15:hover {
  width: auto;
  align-self: unset;
  flex-direction: column;
  gap: var(--gap-30);
  justify-content: flex-start;
}
.what-we-offer-wrapper,
.what-we-offer-wrapper:hover {
  width: 906px;
  padding: var(--padding-0) var(--padding-15);
  box-sizing: border-box;
  gap: var(--gap-0);
}
.what-we-offer-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.what-we-offer,
.what-we-offer:hover {
  line-height: var(--lh-64);
  display: block;
  flex: 1;
  height: auto;
  max-width: 100%;
}
.what-we-offer {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-weight: 400;
  font-family: inherit;
}
.what-we-offer:hover {
  font-family: var(--font-porter-sans-block);
  font-size: var(--fs-64);
  text-align: left;
  color: var(--color-tan-200);
}
.component-2,
.component-2:hover {
  display: flex;
  width: 1105px;
  height: 470px;
  gap: 62px;
  align-items: flex-start;
  padding: 166px 290px 160px 335px;
  box-sizing: border-box;
}
.component-2 {
  position: relative;
  isolation: isolate;
  z-index: 1;
  font-size: var(--fs-14);
  color: var(--color-white);
  font-family: var(--font-poppins);
}
.component-2:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.box-icon {
  position: absolute;
  margin: 0 !important;
  bottom: -221.7px;
  left: -401px;
  object-fit: contain;
  z-index: 0;
  flex-shrink: 0;
}
.box-icon,
.box-icon:hover {
  display: block;
  width: 898.1px;
  height: 895.7px;
}
.icon {
  position: relative;
  max-height: 100%;
  object-fit: cover;
  z-index: 1;
  flex-shrink: 0;
}
.icon,
.icon:hover {
  display: block;
  width: 256px;
  height: 144px;
}
.component-14-wrapper {
  height: 88px;
  flex-direction: column;
  padding: 49px var(--padding-0) var(--padding-0);
  gap: var(--gap-0);
  transform: rotate(0deg);
  z-index: 2;
  flex-shrink: 0;
}
.component-14,
.component-14-wrapper,
.component-14-wrapper:hover,
.component-14:hover {
  display: flex;
  width: 162px;
  align-items: flex-start;
  box-sizing: border-box;
}
.component-14-wrapper:hover {
  height: 88px;
  flex-direction: column;
  gap: var(--gap-0);
  justify-content: flex-start;
  transform: rotate(0deg);
  padding: 49px var(--padding-0) var(--padding-0);
}
.component-14,
.component-14:hover {
  height: 39px;
  gap: var(--gap-64);
  padding: 7px var(--padding-8) var(--padding-8);
}
.component-14 {
  overflow: hidden;
  flex-shrink: 0;
}
.component-14:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.weuiarrow-filled-icon {
  height: var(--height-24);
  width: 12px;
  position: relative;
}
.click-here-wrapper,
.click-here-wrapper:hover {
  height: 23px;
  width: 70px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-2) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.click-here-wrapper:hover {
  justify-content: flex-start;
}
.click-here {
  width: 70px;
  height: 21px;
  position: relative;
  font-weight: 500;
  display: inline-block;
}
.main-website-inner3 {
  padding: var(--padding-0) var(--padding-0) var(--padding-30);
  box-sizing: border-box;
  width: auto;
  align-self: unset;
  text-align: left;
  font-size: var(--fs-24);
  color: var(--color-white);
  font-family: var(--font-poppins);
}
.clip-path-group-parent,
.clip-path-group-parent:hover,
.main-website-inner3,
.main-website-inner3:hover {
  display: flex;
  height: auto;
  gap: var(--gap-0);
  align-items: flex-start;
  transform: rotate(0deg);
  max-width: 100%;
}
.main-website-inner3:hover {
  width: auto;
  align-self: unset;
  flex-direction: row;
  justify-content: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-30);
  box-sizing: border-box;
}
.clip-path-group-parent,
.clip-path-group-parent:hover {
  width: var(--width-1366);
}
.clip-path-group-parent {
  position: relative;
  isolation: isolate;
}
.clip-path-group-parent:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.clip-path-group2 {
  position: absolute;
  margin: 0 !important;
  top: -617px;
  right: -217px;
  object-fit: cover;
  flex-shrink: 0;
}
.clip-path-group2,
.clip-path-group2:hover {
  display: block;
  width: 677px;
  height: 747.2px;
}
.line-group {
  position: relative;
  background-image: url(./public/Frame-43@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  z-index: 1;
  flex-shrink: 0;
}
.line-group,
.line-group:hover {
  display: block;
  flex: 1;
  height: 682px;
  gap: var(--gap-0);
  border: var(--border-1);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-child46 {
  position: absolute;
  top: 0;
  left: -37px;
  flex-shrink: 0;
}
.frame-child46,
.frame-child46:hover,
.frame-child47,
.frame-child47:hover,
.frame-child48:hover,
.frame-child49:hover,
.frame-child50:hover,
.frame-child51:hover,
.frame-child52:hover,
.frame-child53:hover,
.frame-child54:hover,
.frame-child55:hover,
.frame-child56:hover {
  display: block;
  width: var(--width-1404);
  height: var(--height-1);
  border: var(--border-1);
  box-sizing: border-box;
}
.frame-child47 {
  top: 61.8px;
  left: -37px;
}
.frame-child47,
.frame-child48,
.frame-child49 {
  position: absolute;
  flex-shrink: 0;
}
.frame-child48 {
  top: 123.6px;
  left: -37px;
  box-sizing: border-box;
  width: var(--width-1404);
  height: var(--height-1);
  display: block;
  border: var(--border-1);
}
.frame-child49 {
  top: 185.5px;
}
.frame-child49,
.frame-child50,
.frame-child51 {
  left: -37px;
  box-sizing: border-box;
  width: var(--width-1404);
  height: var(--height-1);
  display: block;
  border: var(--border-1);
}
.frame-child50 {
  position: absolute;
  top: 247.3px;
  flex-shrink: 0;
}
.frame-child51 {
  top: 309.1px;
}
.frame-child51,
.frame-child52,
.frame-child53 {
  position: absolute;
  flex-shrink: 0;
}
.frame-child52 {
  top: 370.9px;
  left: -37px;
  box-sizing: border-box;
  width: var(--width-1404);
  height: var(--height-1);
  display: block;
  border: var(--border-1);
}
.frame-child53 {
  top: 432.7px;
}
.frame-child53,
.frame-child54,
.frame-child55 {
  left: -37px;
  box-sizing: border-box;
  width: var(--width-1404);
  height: var(--height-1);
  display: block;
  border: var(--border-1);
}
.frame-child54 {
  position: absolute;
  top: 494.5px;
  flex-shrink: 0;
}
.frame-child55 {
  top: 556.4px;
}
.frame-child55,
.frame-child56,
.frame-child57 {
  position: absolute;
  flex-shrink: 0;
}
.frame-child56 {
  top: 618.2px;
  left: -37px;
  box-sizing: border-box;
  width: var(--width-1404);
  height: var(--height-1);
  display: block;
  border: var(--border-1);
}
.frame-child57 {
  top: 1px;
  bottom: 0;
  left: 0;
  max-height: 100%;
  z-index: 1;
}
.frame-child57,
.frame-child57:hover,
.frame-child58,
.frame-child58:hover {
  display: block;
  width: 770px;
  height: 679px;
}
.frame-child58 {
  position: absolute;
  top: 1px;
  bottom: 0;
  left: 840px;
  max-height: 100%;
  z-index: 1;
  flex-shrink: 0;
}
.clip-path-group-group,
.clip-path-group-group:hover {
  display: flex;
  width: 329.3px;
  height: auto;
  flex-direction: column;
  gap: var(--gap-0);
  align-items: flex-start;
  padding: 95px var(--padding-20) 95.7px 69px;
  box-sizing: border-box;
}
.clip-path-group-group {
  position: absolute;
  top: 381px;
  left: 125px;
  isolation: isolate;
  z-index: 2;
  flex-shrink: 0;
}
.clip-path-group-group:hover {
  justify-content: flex-start;
}
.clip-path-group3 {
  position: absolute;
  margin: 0 !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}
.clip-path-group3,
.clip-path-group3:hover {
  display: block;
  width: 100%;
  height: 100%;
}
.step-3,
.step-3:hover {
  font-weight: 700;
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.step-3 {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-family: inherit;
  z-index: 1;
  flex-shrink: 0;
}
.step-3:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-24);
  text-align: left;
  color: var(--color-white);
}
.we-create-everything,
.we-create-everything:hover {
  font-weight: 500;
  font-size: var(--fs-14);
  display: block;
  width: 193px;
  height: auto;
}
.we-create-everything {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.we-create-everything:hover {
  font-family: var(--font-poppins);
  text-align: left;
  color: var(--color-white);
}
.clip-path-group-container,
.clip-path-group-container:hover {
  display: flex;
  width: 297.3px;
  height: auto;
  flex-direction: column;
  gap: var(--gap-0);
  align-items: flex-start;
  padding: 91px var(--padding-20) 44.3px 55px;
  box-sizing: border-box;
}
.clip-path-group-container {
  position: absolute;
  top: -12px;
  left: 28px;
  isolation: isolate;
  z-index: 2;
  flex-shrink: 0;
}
.clip-path-group-container:hover {
  justify-content: flex-start;
}
.we-understand-your,
.we-understand-your:hover {
  font-weight: 500;
  font-size: var(--fs-14);
  display: block;
  width: 192px;
  height: auto;
}
.we-understand-your {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.we-understand-your:hover {
  font-family: var(--font-poppins);
  text-align: left;
  color: var(--color-white);
}
.group-parent {
  position: absolute;
  top: 381px;
  left: 987px;
  width: 351.4px;
  padding: 124px var(--padding-20) 107.4px var(--padding-80);
  isolation: isolate;
  z-index: 2;
  flex-shrink: 0;
}
.clip-path-group-parent2,
.clip-path-group-parent2:hover,
.group-parent,
.group-parent:hover {
  display: flex;
  height: auto;
  flex-direction: column;
  gap: var(--gap-0);
  align-items: flex-start;
  box-sizing: border-box;
}
.group-parent:hover {
  width: 351.4px;
  justify-content: flex-start;
  padding: 124px var(--padding-20) 107.4px var(--padding-80);
}
.clip-path-group-parent2,
.clip-path-group-parent2:hover {
  width: 297.9px;
  padding: 87px var(--padding-20) 48.9px 45px;
}
.clip-path-group-parent2 {
  position: absolute;
  top: -12px;
  left: 1040px;
  isolation: isolate;
  z-index: 2;
  flex-shrink: 0;
}
.clip-path-group-parent2:hover {
  justify-content: flex-start;
}
.we-plan-content,
.we-plan-content:hover {
  font-weight: 500;
  font-size: var(--fs-14);
  display: block;
  width: 216px;
  height: auto;
}
.we-plan-content {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.we-plan-content:hover {
  font-family: var(--font-poppins);
  text-align: left;
  color: var(--color-white);
}
.how-we-work,
.how-we-work:hover {
  font-family: var(--font-porter-sans-block);
  font-size: var(--fs-64);
  line-height: 72.8px;
  color: var(--color-tan-200);
  display: block;
  height: 128px;
}
.how-we-work {
  margin: 0;
  position: absolute;
  top: calc(50% - 64px);
  left: calc(50% - 218px);
  font-weight: 400;
  z-index: 2;
  flex-shrink: 0;
}
.how-we-work:hover {
  text-align: left;
}
.most-business-post,
.most-business-post:hover {
  font-weight: 600;
  font-size: var(--fs-16);
  text-align: center;
  color: var(--color-tan-200);
  display: block;
  width: 468px;
}
.most-business-post {
  position: absolute;
  top: 429px;
  left: calc(50% - 234px);
  z-index: 4;
  flex-shrink: 0;
}
.most-business-post:hover {
  font-family: var(--font-poppins);
}
.frame-main,
.frame-main:hover {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  width: 100%;
  height: auto;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.frame-main:hover {
  justify-content: flex-start;
}
.about-us-parent {
  position: relative;
  border-top: var(--border-1);
  border-bottom: var(--border-1);
  box-sizing: border-box;
  text-align: left;
  font-size: var(--fs-32);
  color: var(--color-tan-200);
  font-family: var(--font-poppins);
}
.about-us-parent,
.about-us-parent:hover {
  display: block;
  align-self: stretch;
  width: 100%;
  height: 303px;
  gap: var(--gap-0);
}
.about-us,
.about-us:hover {
  font-weight: 700;
  display: block;
}
.about-us {
  margin: 0;
  position: absolute;
  top: 34px;
  left: 45px;
  font-size: inherit;
  font-family: inherit;
  flex-shrink: 0;
}
.about-us:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-32);
  text-align: left;
  color: var(--color-tan-200);
}
.avc-is-a,
.avc-is-a:hover {
  font-family: var(--font-scada);
  font-size: var(--fs-16);
  color: var(--color-linen);
  display: block;
  width: 448px;
}
.avc-is-a {
  position: absolute;
  top: 99px;
  left: 45px;
  flex-shrink: 0;
}
.avc-is-a:hover {
  text-align: left;
}
.read-more-wrapper,
.read-more-wrapper:hover {
  display: flex;
  width: auto;
  align-self: unset;
  height: 37px;
  gap: var(--gap-0);
  align-items: flex-start;
  padding: var(--padding-5) var(--padding-28) var(--padding-4);
}
.read-more-wrapper {
  cursor: pointer;
  position: absolute;
  top: 229px;
  left: 47px;
  overflow: hidden;
  flex-shrink: 0;
}
.read-more-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
  box-sizing: border-box;
  border: var(--border-1);
}
.read-more-wrapper,
.read-more-wrapper:active {
  background-color: var(--color-tan-400);
  border: 1px solid var(--color-tan-300);
  box-sizing: border-box;
}
.read-more {
  position: relative;
}
.read-more,
.read-more:hover {
  font-weight: 500;
  font-family: var(--font-poppins);
  font-size: var(--fs-16);
  text-align: left;
  color: var(--color-tan-200);
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.clip-path-group-parent3,
.clip-path-group-parent3:hover {
  display: block;
  width: 177.6px;
  height: 247.1px;
  gap: var(--gap-0);
  align-items: flex-start;
  transform: rotate(0deg);
}
.clip-path-group-parent3 {
  position: absolute;
  top: 34.9px;
  left: 490.2px;
  flex-shrink: 0;
}
.clip-path-group-parent3:hover {
  justify-content: flex-start;
}
.clip-path-group6 {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: contain;
  z-index: 1;
}
.clip-path-group6,
.clip-path-group6:hover {
  display: block;
  width: 177.6px;
  height: 233.1px;
}
.noto-v1camera-icon {
  position: absolute;
  top: 213.1px;
  left: 2.8px;
  object-fit: contain;
  z-index: 2;
}
.noto-v1camera-icon,
.noto-v1camera-icon:hover {
  display: block;
  width: 34px;
  height: 34px;
  gap: var(--gap-0);
}
.file-00000000a1e4720685ed4b1ba-icon {
  position: absolute;
  right: 34px;
  bottom: -73px;
  object-fit: cover;
  z-index: 3;
  flex-shrink: 0;
}
.file-00000000a1e4720685ed4b1ba-icon,
.file-00000000a1e4720685ed4b1ba-icon:hover {
  display: block;
  width: 466px;
  height: 311px;
}
.frame-wrapper9 {
  width: 1333px;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  gap: var(--gap-0);
}
.frame-parent16,
.frame-parent16:hover,
.frame-wrapper9,
.frame-wrapper9:hover {
  display: flex;
  max-width: 100%;
  height: auto;
  transform: rotate(0deg);
}
.frame-wrapper9:hover {
  width: 1333px;
  flex-direction: row;
  gap: var(--gap-0);
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
}
.frame-parent16,
.frame-parent16:hover {
  width: 1143px;
  flex-direction: column;
  align-items: flex-end;
  gap: 92px;
}
.frame-parent16:hover {
  justify-content: flex-start;
}
.frame-wrapper10 {
  width: 1109px;
  justify-content: flex-end;
  padding: var(--padding-0) 159px var(--padding-21);
  transform: rotate(0deg);
  text-align: left;
  font-size: var(--fs-40);
  color: var(--color-tan-200);
  font-family: var(--font-poppins);
}
.contact-us-wrapper,
.contact-us-wrapper:hover,
.frame-wrapper10,
.frame-wrapper10:hover {
  display: flex;
  height: auto;
  gap: var(--gap-0);
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.frame-wrapper10:hover {
  width: 1109px;
  flex-direction: row;
  justify-content: flex-end;
  transform: rotate(0deg);
  padding: var(--padding-0) 159px var(--padding-21);
}
.contact-us-wrapper,
.contact-us-wrapper:hover {
  flex: 1;
  justify-content: center;
  border-radius: 0 0 var(--br-60) var(--br-60);
  padding: var(--padding-36) var(--padding-20) 34px;
}
.contact-us-wrapper {
  border-right: var(--border-1);
  border-bottom: var(--border-1);
  border-left: var(--border-1);
  overflow: hidden;
  z-index: 4;
}
.contact-us-wrapper:hover {
  flex-direction: row;
}
.contact-us,
.contact-us:hover {
  font-weight: 700;
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.contact-us {
  margin: 0;
  position: relative;
  font-size: inherit;
  font-family: inherit;
}
.contact-us:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-40);
  text-align: left;
  color: var(--color-tan-200);
}
.frame-parent17 {
  align-self: stretch;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-20);
  width: 100%;
}
.frame-parent17,
.frame-parent17:hover,
.frame-parent18,
.frame-parent18:hover {
  display: flex;
  height: auto;
  transform: rotate(0deg);
  max-width: 100%;
}
.frame-parent17:hover {
  align-self: stretch;
  width: 100%;
  flex-direction: row;
  gap: var(--gap-20);
  align-items: flex-start;
  justify-content: space-between;
}
.frame-parent18,
.frame-parent18:hover {
  width: auto;
  align-self: unset;
  flex-direction: column;
  gap: 38px;
  align-items: flex-end;
}
.frame-parent18 {
  text-align: left;
  font-size: var(--fs-16);
  color: var(--color-peru);
  font-family: var(--font-poppins);
}
.frame-parent18:hover {
  justify-content: flex-start;
}
.frame-wrapper11 {
  align-self: stretch;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-8) var(--padding-0) var(--padding-0);
  width: 100%;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.frame-parent19,
.frame-parent19:hover,
.frame-wrapper11,
.frame-wrapper11:hover {
  display: flex;
  height: auto;
  align-items: flex-start;
  box-sizing: border-box;
  max-width: 100%;
}
.frame-wrapper11:hover {
  align-self: stretch;
  width: 100%;
  flex-direction: row;
  gap: var(--gap-0);
  justify-content: flex-end;
  transform: rotate(0deg);
  padding: var(--padding-0) var(--padding-8) var(--padding-0) var(--padding-0);
}
.frame-parent19,
.frame-parent19:hover {
  flex: 1;
  flex-direction: column;
  gap: var(--gap-10);
  border-radius: var(--br-31);
  padding: 34px 42px var(--padding-33);
  border: var(--border-1);
}
.frame-parent19 {
  overflow: hidden;
}
.frame-parent19:hover {
  justify-content: flex-start;
}
.email-parent,
.email-parent:hover {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  gap: 53px;
  width: 100%;
  height: auto;
  transform: rotate(0deg);
}
.email-parent:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.email,
.email:hover {
  font-weight: 700;
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.email {
  position: relative;
}
.email:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-16);
  text-align: left;
  color: var(--color-peru);
}
.avcmarketingsalesgmailcom,
.avcmarketingsalesgmailcom:hover {
  font-weight: 500;
  color: var(--color-tan-200);
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.avcmarketingsalesgmailcom {
  position: relative;
}
.avcmarketingsalesgmailcom:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-16);
  text-align: left;
}
.phone-parent,
.phone-parent:hover {
  width: 226px;
  gap: var(--gap-20);
  justify-content: space-between;
}
.phone-parent {
  display: flex;
  align-items: flex-start;
  height: auto;
  transform: rotate(0deg);
}
.phone-parent:hover {
  flex-direction: row;
}
.instagram-parent {
  gap: var(--gap-11);
  width: auto;
  align-self: unset;
}
.address-parent,
.address-parent:hover,
.instagram-parent,
.instagram-parent:hover,
.phone-parent:hover {
  display: flex;
  align-items: flex-start;
  height: auto;
  transform: rotate(0deg);
}
.instagram-parent:hover {
  width: auto;
  align-self: unset;
  flex-direction: row;
  gap: var(--gap-11);
  justify-content: flex-start;
}
.address-parent,
.address-parent:hover {
  align-self: stretch;
  gap: var(--gap-30);
  width: 100%;
}
.address-parent:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-child59 {
  width: 374px;
  position: relative;
  border-radius: var(--br-31);
  max-height: 100%;
  object-fit: cover;
  display: block;
  border: var(--border-1);
  cursor: pointer;
}
.frame-child59,
.frame-child59:hover,
.frame-wrapper12,
.frame-wrapper12:hover {
  height: auto;
  gap: var(--gap-0);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-child59:hover {
  display: block;
  width: 374px;
  border-radius: var(--br-31);
  border: var(--border-1);
}
.frame-wrapper12,
.frame-wrapper12:hover {
  display: flex;
  width: auto;
  align-self: unset;
  flex-direction: column;
  align-items: flex-start;
  transform: rotate(0deg);
  padding: var(--padding-30) var(--padding-0) var(--padding-0);
}
.frame-wrapper12 {
  text-align: left;
  font-size: var(--fs-10);
  color: var(--color-white);
  font-family: var(--font-poppins);
}
.frame-wrapper12:hover {
  justify-content: flex-start;
}
.frame-parent20 {
  border-radius: var(--br-31);
  border: var(--border-1);
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--padding-33) 70px 73px 71px;
  gap: var(--gap-16);
}
.frame-parent20,
.frame-parent20:hover,
.frame-parent21,
.frame-parent21:hover {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: auto;
}
.frame-parent20:hover {
  gap: var(--gap-16);
  justify-content: flex-start;
  border-radius: var(--br-31);
  padding: var(--padding-33) 70px 73px 71px;
  box-sizing: border-box;
  border: var(--border-1);
}
.frame-parent21,
.frame-parent21:hover {
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.frame-parent21:hover {
  justify-content: flex-start;
}
.chatgpt-image-jun-25-2026-01-wrapper,
.chatgpt-image-jun-25-2026-01-wrapper:hover {
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-3);
  box-sizing: border-box;
  width: auto;
  align-self: unset;
  height: auto;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.chatgpt-image-jun-25-2026-01-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.chatgpt-image-jun-25-2026-01-icon {
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  display: block;
  height: 185px;
}
.chatgpt-image-jun-25-2026-01-icon:hover {
  display: block;
  flex: 1;
  height: 185px;
}
.make-an-inquiry-wrapper,
.make-an-inquiry-wrapper:hover {
  display: flex;
  align-self: stretch;
  width: 100%;
  height: auto;
  gap: var(--gap-0);
  align-items: flex-start;
  border-radius: 49px;
  padding: var(--padding-10) 73px 9px;
  box-sizing: border-box;
}
.make-an-inquiry-wrapper {
  cursor: pointer;
  border: 0;
  overflow: hidden;
}
.make-an-inquiry-wrapper:hover {
  background-color: var(--color-tan-200);
  flex-direction: row;
  justify-content: flex-start;
}
.make-an-inquiry-wrapper,
.make-an-inquiry-wrapper:active {
  background-color: var(--color-tan-300);
}
.make-an-inquiry {
  position: relative;
}
.make-an-inquiry,
.make-an-inquiry:hover {
  font-weight: 600;
  font-family: var(--font-poppins);
  font-size: var(--fs-20);
  text-align: left;
  color: var(--color-black);
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.click-make-an-inquiry-to-fil-wrapper,
.click-make-an-inquiry-to-fil-wrapper:hover {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 51px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.click-make-an-inquiry-to-fil-wrapper:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.click-make-an,
.click-make-an:hover {
  display: block;
  width: auto;
  align-self: unset;
  height: auto;
}
.click-make-an {
  position: relative;
}
.click-make-an:hover {
  font-family: var(--font-poppins);
  font-size: var(--fs-10);
  text-align: left;
  color: var(--color-white);
}
.frame-footer,
.frame-footer:hover {
  display: flex;
  width: 1109px;
  height: auto;
  gap: var(--gap-0);
  align-items: flex-start;
  justify-content: center;
  transform: rotate(0deg);
  padding: var(--padding-0) var(--padding-20);
  box-sizing: border-box;
  max-width: 100%;
}
.frame-footer {
  text-align: left;
  font-size: var(--fs-15);
  color: var(--color-tan-200);
  font-family: var(--font-poppins);
}
.frame-footer:hover {
  flex-direction: row;
}
.frame-parent22 {
  flex-direction: column;
  gap: var(--gap-10);
}
.frame-parent22,
.frame-parent22:hover,
.frame-wrapper13,
.frame-wrapper13:hover {
  display: flex;
  align-items: flex-start;
  width: auto;
  align-self: unset;
  height: auto;
  transform: rotate(0deg);
}
.frame-parent22:hover {
  flex-direction: column;
  gap: var(--gap-10);
  justify-content: flex-start;
}
.frame-wrapper13,
.frame-wrapper13:hover {
  padding: var(--padding-0) 29px;
  box-sizing: border-box;
  gap: var(--gap-0);
}
.frame-wrapper13:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.frame-child60 {
  position: absolute;
  margin: 0 !important;
  bottom: 10.99px;
  left: -207.99px;
  transform-origin: 0 0;
  flex-shrink: 0;
}
.frame-child60,
.frame-child60:hover {
  display: block;
  width: 503px;
  height: var(--height-1);
  transform: rotate(0.34deg);
  border: var(--border-1);
  box-sizing: border-box;
}
.find-us-on-wrapper {
  background-color: var(--color-black);
  overflow: hidden;
  padding: var(--padding-0) var(--padding-5);
  box-sizing: border-box;
  gap: var(--gap-0);
  z-index: 1;
  flex-shrink: 0;
}
.find-us-on-wrapper,
.find-us-on-wrapper:hover,
.frame-parent23,
.frame-parent23:hover {
  display: flex;
  align-items: flex-start;
  width: auto;
  align-self: unset;
  height: auto;
}
.find-us-on-wrapper:hover {
  background-color: var(--color-black);
  flex-direction: row;
  gap: var(--gap-0);
  justify-content: flex-start;
  padding: var(--padding-0) var(--padding-5);
  box-sizing: border-box;
}
.frame-parent23,
.frame-parent23:hover {
  gap: var(--gap-18);
  transform: rotate(0deg);
}
.frame-parent23:hover {
  flex-direction: row;
  justify-content: flex-start;
}
.icon-park-outlineinstagram-wrapper,
.icon-park-outlineinstagram-wrapper:hover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-1) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  width: auto;
  align-self: unset;
  height: auto;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.icon-park-outlineinstagram-wrapper:hover {
  justify-content: flex-start;
}
.icon-park-outlineinstagram,
.icon-park-outlineinstagram:hover {
  display: block;
  width: var(--width-24);
  height: var(--height-24);
  gap: var(--gap-0);
}
.icon-park-outlineinstagram,
.mingcutelinkedin-line-icon {
  position: relative;
  cursor: pointer;
}
.mingcutelinkedin-line-icon,
.mingcutelinkedin-line-icon:hover {
  display: block;
  width: 27px;
  height: 27px;
  gap: var(--gap-0);
}
.mingcutefacebook-line-icon {
  position: relative;
}
.mingcutefacebook-line-icon,
.mingcutefacebook-line-icon:hover {
  display: block;
  width: 25px;
  height: 25px;
  gap: var(--gap-0);
}
.logosgoogle-maps-wrapper,
.logosgoogle-maps-wrapper:hover {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-2) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  width: auto;
  align-self: unset;
  height: auto;
  gap: var(--gap-0);
  transform: rotate(0deg);
}
.logosgoogle-maps-wrapper:hover {
  justify-content: flex-start;
}
.logosgoogle-maps-icon {
  position: relative;
  max-height: 100%;
  cursor: pointer;
}
.logosgoogle-maps-icon,
.logosgoogle-maps-icon:hover {
  display: block;
  width: var(--width-15);
  height: var(--height-22);
  gap: var(--gap-0);
}
@media screen and (max-width: 1200px) {
  .frame-header {
    padding-left: var(--padding-24);
    box-sizing: border-box;
  }
  .frame-parent16 {
    gap: var(--gap-46);
  }
  .frame-wrapper10 {
    padding-left: 79px;
    padding-right: 79px;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1050px) {
  .frame-header {
    width: 676px;
  }
  .frame-nav {
    display: none;
  }
  .h2,
  .m {
    font-size: var(--fs-38);
  }
  .featured-work {
    font-size: var(--fs-32);
  }
  .how-we-work,
  .what-we-offer {
    font-size: 51px;
  }
  .about-us {
    font-size: 26px;
  }
  .contact-us {
    font-size: var(--fs-32);
  }
  .frame-parent17 {
    flex-wrap: wrap;
  }
  .frame-parent18,
  .frame-wrapper12 {
    flex: 1;
  }
}
@media screen and (max-width: 750px) {
  .main-website {
    gap: 29px;
  }
  .main-website-inner {
    padding-left: 25px;
    padding-right: 25px;
    box-sizing: border-box;
  }
  .frame-nav {
    gap: 22px;
  }
  .group-div {
    gap: 34px;
  }
  .frame-section {
    padding-bottom: var(--padding-28);
    box-sizing: border-box;
  }
  .main-website-inner2 {
    padding-bottom: 62px;
    box-sizing: border-box;
  }
  .frame-parent16 {
    gap: 23px;
  }
  .frame-wrapper10 {
    padding-left: 39px;
    padding-right: 39px;
    box-sizing: border-box;
  }
  .frame-parent18,
  .frame-wrapper12 {
    min-width: 100%;
  }
}
@media screen and (max-width: 450px) {
  .group-div {
    gap: 17px;
  }
  .h2 {
    font-size: 29px;
  }
  .frame-parent5 {
    gap: 23px;
    flex-wrap: wrap;
  }
  .m {
    font-size: 29px;
  }
  .featured-work {
    font-size: var(--fs-24);
  }
  .what-we-offer {
    font-size: var(--fs-38);
  }
  .step-3 {
    font-size: var(--fs-19);
  }
  .how-we-work {
    font-size: var(--fs-38);
  }
  .about-us {
    font-size: var(--fs-19);
  }
  .contact-us {
    font-size: var(--fs-24);
  }
  .frame-parent18 {
    gap: 19px;
  }
  .frame-parent19 {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .email-parent {
    gap: var(--gap-26);
  }
  .address-parent,
  .email-parent {
    flex-wrap: wrap;
  }
  .frame-parent20 {
    padding: var(--padding-21) 35px 47px;
    box-sizing: border-box;
  }
  .click-make-an-inquiry-to-fil-wrapper,
  .make-an-inquiry-wrapper {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
}

/* ================================================
   Added: mobile touch behavior + animated interactions
   ================================================ */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  -webkit-tap-highlight-color: transparent;
}
#site-scale-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-black);
}

button,
.connect-with-us-wrapper,
.make-an-inquiry-wrapper,
.home-wrapper[data-scroll-target],
.component-14,
.featured-next-button,
.icon-park-outlineinstagram-wrapper,
.logosgoogle-maps-wrapper,
.mingcutelinkedin-line-icon,
.mingcutefacebook-line-icon,
#frameImage16,
[id^="frame"] {
  touch-action: manipulation;
}

.home-wrapper[data-scroll-target],
.component-14,
.featured-next-button {
  cursor: pointer;
  user-select: none;
}

.home-wrapper[data-scroll-target]:focus-visible,
.component-14:focus-visible,
.featured-next-button:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-tan-200);
  outline-offset: 4px;
}

button,
.connect-with-us-wrapper,
.make-an-inquiry-wrapper {
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
button:hover,
.connect-with-us-wrapper:hover,
.make-an-inquiry-wrapper:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}
button:active,
.connect-with-us-wrapper:active,
.make-an-inquiry-wrapper:active {
  transform: scale(0.96);
  opacity: 0.85;
}

.icon-park-outlineinstagram-wrapper,
.logosgoogle-maps-wrapper,
.mingcutelinkedin-line-icon,
.mingcutefacebook-line-icon,
#frameImage16 {
  transition: transform 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}
.icon-park-outlineinstagram-wrapper:hover,
.logosgoogle-maps-wrapper:hover,
.mingcutelinkedin-line-icon:hover,
.mingcutefacebook-line-icon:hover,
#frameImage16:hover {
  transform: scale(1.08);
  opacity: 0.85;
}
.icon-park-outlineinstagram-wrapper:active,
.logosgoogle-maps-wrapper:active,
.mingcutelinkedin-line-icon:active,
.mingcutefacebook-line-icon:active,
#frameImage16:active {
  transform: scale(0.92);
}

.component-14,
.featured-next-button {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.component-14:hover,
.featured-next-button:hover {
  transform: translateX(6px);
}

.component-14:active,
.featured-next-button:active {
  transform: translateX(3px) scale(0.96);
}

.group-section {
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.group-section::-webkit-scrollbar {
  display: none;
}

.reveal-section {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.box-icon {
  animation: decorative-float 6s ease-in-out infinite;
}

.chatgpt-image-jun-18-2026-022 {
  animation: decorative-drift 8s ease-in-out infinite;
}

@keyframes decorative-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-14px) rotate(1.5deg);
  }
}

@keyframes decorative-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(12px, -8px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}