.only_mobile {
  display: none;
}

main {
  position: relative;
}

.tab_info {
  text-align: start;

  display: none;
  max-width: 560px;

  animation: appear 1s;
}

.tab_info.active {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
}

.tab_info h3 {
  font-size: 1.625rem;
  color: var(--deep-purple);

  font-family: "museo-sans", sans-serif;
  font-weight: 500;
  line-height: 2.25rem;
  letter-spacing: 0.54px;

  margin-bottom: 1.125rem;
}

.tab_info p {
  color: var(--deep-purple);

  font-family: "freight-sans-pro", sans-serif;
  font-weight: 300;
  line-height: 1.75rem;
  letter-spacing: 0;

  max-width: calc(100% - 10px);
}

#introduction {
  position: relative;
  padding: 3rem;

  overflow: hidden;
}

#introduction::before {
  content: "";
  width: 100%;
  height: 50%;
  position: absolute;
  background-color: var(--purple);
  left: 0;
  bottom: -32%;
  z-index: -1;
  transform: skewY(4deg);
}

#introduction div.image_container {
  position: relative;
}

#introduction .image_angle {
  display: none;
}

#introduction div.image {
  padding: 6.25rem 0 18.75rem 3rem;
  text-align: left;

  background-image: url("../assets/man_with_notebook.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: inherit;

  border-radius: 16px;
  clip-path: polygon(0 0, 100% 0%, 83% 100%, 0% 100%);

  height: 100%;
  width: calc(100% - 3rem);
  max-width: 1920px;

  margin-inline: auto;

  position: relative;
}

#introduction div.image::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: transparent;
  position: absolute;
  top: 0;
  right: 5px;
  box-shadow: 20px -20px 0px 19px var(--light-blue);

  border-top-right-radius: 16px;
}

#introduction div.image::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-color: transparent;
  position: absolute;
  bottom: 0;
  left: calc(83% - 1rem);

  box-shadow: 20px 20px 0px 18px var(--purple);

  border-bottom-right-radius: 1.5rem;
}

#introduction div.image_container .overlay {
  height: 100%;
  width: calc(100% - 5.125rem);
  max-width: 1920px;

  background-color: var(--light-blue);
  position: absolute;
  border-top-left-radius: 16px;

  left: calc(50% + 5.125rem);
  top: -0.75rem;

  transform: translateX(-50%);

  clip-path: polygon(0 0, 100% 0%, 84% 100%, 0% 100%);

  z-index: -100;
}

#introduction div.image_container .overlay::before {
  content: "";
  width: 1rem;
  height: 1rem;
  background-color: transparent;
  position: absolute;
  top: 0;
  right: 4px;
  box-shadow: 20px -20px 0px 19px #fff;

  border-top-right-radius: 16px;
}

#introduction div.text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  text-align: left;
  max-width: 45.25rem;
}

#introduction div.text h1 {
  font-size: 4rem;
  color: var(--purple);

  margin-bottom: 1.5rem;
}

#introduction div.text h2 {
  color: var(--purple);

  margin-bottom: 2.875rem;
  max-width: 80%;

  font-weight: 300;
  font-family: "museo-sans", sans-serif;
  font-size: 1.125rem;
  line-height: 1.625rem;
  letter-spacing: 0.36px;

  opacity: 85%;
}

#introduction div.text button {
  width: 21.25rem;
}

#our_clients {
  display: flex;
  align-items: center;
  justify-content: center;

  padding-block: 4.5rem 8rem;
}

#our_clients h2 {
  color: var(--deep-purple);
  font-size: 3.375rem;

  margin-bottom: 1.75rem;
}

#our_clients .client_logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1375px;
  gap: 0 100px;

  margin-inline: 1.125rem;
}

#our_clients .client_logos img {
  width: 100%;
  max-width: 226px;
}

#our_clients .logo_flex_container {
  display: flex;
  width: 100%;
  gap: 100px;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.logosSlideContainer {
  overflow: hidden;

  max-width: 100vw;

  white-space: nowrap;
}

.logosSlideContainer:hover .logosSlide {
  animation-play-state: paused;
}

.logosSlide {
  display: inline-block;

  animation: 20s slides infinite linear;
}

.logosSlide img {
  height: 180px;
  margin: 0 24px;
}

#salesforce {
  position: relative;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding-top: 7rem;
  padding-bottom: 7rem;

  min-height: 1060px;
}

#salesforce::before {
  content: "";
  width: 100%;
  height: 120%;
  position: absolute;
  background-color: var(--soft-light-blue);
  left: 0;
  top: 0;
  z-index: -999;
  transform: skewY(-3deg);
}

#salesforce h2 {
  color: var(--deep-purple);
  font-size: 3.375rem;
  line-height: 4rem;

  max-width: 1250px;
  margin-inline: auto;

  margin-bottom: calc(3.375rem - 1rem);
}

#salesforce_tabs {
  display: flex;
  align-items: center;
  justify-content: space-around;

  border-bottom: 2px solid #9586b638;
  padding: 1rem;

  color: var(--purple);

  font-family: "freight-sans-pro", sans-serif;
  font-size: 1.125rem;
  text-transform: uppercase;
  font-weight: 700;

  margin-bottom: 3.875rem;
}

#salesforce_tabs .tab {
  position: relative;

  padding-inline: 1.25rem;
  min-width: max-content;

  opacity: 50%;

  cursor: pointer;

  transition: color 0.3s, opacity 0.3s;
}

#salesforce_tabs .tab.opened {
  color: var(--purple-hover);
  opacity: 100%;
}

#salesforce_tabs .tab.opened::after {
  content: "";
  position: absolute;
  background-color: var(--purple-hover);
  width: 100%;
  height: 5px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -1rem;

  animation: appearAndGrow 0.3s;
}

#salesforce_tabs .anim_wrap {
  display: none;
}

#salesforce .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: flex-start;
  gap: 1rem;

  max-width: 92.5%;
  margin-inline: auto;
}

#salesforce .items {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;

  margin-left: 2.375rem;
}

#salesforce .item {
  font-size: 1.125rem;
  color: var(--deep-purple);

  position: relative;
}

#salesforce .item h3 {
  position: relative;

  font-family: "freight-sans-pro", sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.375rem;
  letter-spacing: 0;
  text-wrap: nowrap;

  margin-bottom: 0;

  cursor: pointer;
}

#salesforce .item.active h3 {
  cursor: auto;
}

#salesforce .item.active .item_title {
  position: relative;
}

#salesforce .item.active .item_title::before {
  content: "";
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 1px solid transparent;
  background-color: azure;
  position: absolute;
  left: calc(-2.375rem - 0.375rem);
  top: calc(50% - 0.75rem);
  z-index: -1;
}

#salesforce .item:first-child .left_line,
#salesforce .item:nth-child(2) .left_line {
  width: 1px;
  height: calc(0.75rem + 100%);

  background-color: var(--purple-hover);

  position: absolute;
  left: calc(-2.375rem + (0.75rem / 2) - 0.5px);
  top: 0.75rem;
  z-index: -10;
}

#salesforce .item:first-child.active .left_line {
  top: 1.375rem;
}

#salesforce .item h3::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--purple-hover);
  position: absolute;
  left: -2.375rem;
  top: calc(50% - 0.375rem);
  z-index: 100;
}

#salesforce .item.active h3::after {
  content: "";
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  border: 1px solid var(--purple-hover);
  background-color: azure;
  position: absolute;
  left: calc(-2.375rem - 0.375rem);
  top: calc(50% - 0.75rem);
  z-index: -1;

  animation: blink 1s ease infinite;
}

#salesforce .item p {
  overflow-y: hidden;

  font-size: 1.125rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  color: var(--deep-purple);

  max-height: 0;
  margin-top: 0;

  transition: max-height 0.3s ease-in-out, margin 0.3s ease;
}

#salesforce .item.active p {
  max-height: 120px;
  margin-top: 1.125rem;
}

#salesforce img {
  width: 100%;
}

#api_introduce {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-top: 7rem;
  padding-bottom: 12rem;
}

#api_introduce::before {
  content: "";
  width: 100%;
  height: 120%;
  position: absolute;
  background-color: var(--purple);
  left: 0;
  top: 0;
  z-index: -100;
  transform: skewY(3deg);
}

#api_introduce h3 {
  font-size: 3rem;
  color: #fff;

  max-width: 1360px;
  margin-inline: auto;

  margin-bottom: calc(7.25rem - (8.375rem / 2));
}

#api_introduce .container {
  display: flex;
  align-items: stretch;
  gap: 4.75rem;
}

#api_introduce button.arrow {
  background-color: transparent;
  border: none;

  position: absolute;
  cursor: pointer;
}

#api_introduce button.arrow:disabled {
  opacity: 50%;
  cursor: default;
}

#api_introduce .arrow_cards {
  position: relative;
  flex: 1;
}

#arrow_right {
  position: absolute;

  right: calc(-1.625rem - 34px);
  top: 50%;
}

#arrow_left {
  position: absolute;

  left: 10px;
  top: 50%;
}

#api_introduce .arrow_cards .card_wrap {
  overflow-x: hidden;

  width: 460px;
  height: 100%;
  max-width: 460px;
  min-height: calc(380px + 8.375rem / 2);

  padding-top: calc(8.375rem / 2);

  display: flex;
  gap: 2rem;

  margin-left: calc(1.625rem + 34px);

  position: relative;
}

#api_introduce .arrow_cards .card {
  color: var(--deep-purple);

  position: absolute;

  border-radius: 10px;
  box-shadow: 0px 10px 20px #0000004d;
  background-color: #fff;

  padding: 5.375rem 1.625rem 1.625rem 1.625rem;

  width: 100%;
  max-width: 460px;

  height: calc(100% - 8.375rem / 2);
  min-height: 380px;

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.125rem;

  left: 0;
  bottom: 0;
}

#api_introduce .arrow_cards .card.active {
  display: flex;

  /* animation: appear 1.5s; */
}

#api_introduce .arrow_cards .card h3 {
  font-size: 2.25rem;
  line-height: 2.25rem;
  color: var(--deep-purple);

  justify-self: center;

  margin-bottom: 0;
}

#api_introduce .arrow_cards .card p {
  font-family: "freight-sans-pro", sans-serif;
  line-height: 1.5rem;

  margin-top: 1.125rem;
  padding-inline: calc(2.25rem - 1.625rem);
}

#api_introduce .arrow_cards .card .circle_icon {
  width: 8.375rem;
  height: 8.375rem;

  position: absolute;
  border: 14px solid var(--purple);
  border-radius: 50%;

  background-color: #fff;

  top: calc((-8.375rem / 2));
  left: calc(50% - (8.375rem / 2));

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

#api_introduce #card_indexes {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  position: absolute;
  top: calc(100% + 1.375rem);
  left: calc(50% + (1.625rem + 34px) / 2);
  transform: translateX(-50%);
}

#api_introduce #card_indexes .circle_index {
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  border: 1px solid #f7f3fb;

  transition: background 0.3s;

  cursor: pointer;
}

#api_introduce #card_indexes .circle_index.active {
  background-color: #fff;
  border-color: #fff;

  cursor: default;
}

#api_introduce .button,
#api_introduce a {
  text-align: center;
  width: 100%;
}

#api_introduce #terminal {
  flex: 2;
  width: 100%;
  background-color: #2c2c2c;
  opacity: 95%;

  border-radius: 10px;
  box-shadow: 0px 10px 20px #0000004d;

  max-width: 780px;

  margin-top: calc(8.375rem / 2);
}

#api_introduce #terminal .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  color: #fff;

  font-family: "museo-sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;

  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid #707070;
}

#api_introduce #terminal .bar ul {
  display: flex;
  align-items: center;
  gap: 3.625rem;
}

#api_introduce #terminal .bar ul li {
  position: relative;
  padding: 0.375rem 0.75rem;

  cursor: pointer;
}

#api_introduce #terminal .bar ul li.active::before {
  content: "";
  width: calc(100% + 20px);
  height: 3px;
  background-color: #fff;
  position: absolute;
  bottom: calc(-1.25rem - 1px);
  left: 50%;
  transform: translateX(-50%);

  animation: appearAndGrowTerminalBar 0.3s;
}

#api_introduce #terminal .bar .response_cards {
  display: flex;
  align-items: center;
  gap: 2rem;

  opacity: 0;
  visibility: hidden;

  transition: 300ms;
}

#api_introduce #terminal .bar .response_cards.active {
  opacity: 100%;
  visibility: visible;
}

#api_introduce #terminal .bar .response_cards .card {
  padding: 0.375rem 0.75rem;
  background-color: #5c5c5c;
  border-radius: 3px;
}

#api_introduce #terminal .bar div #status {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  margin-left: 2px;
}

#api_introduce #terminal .bar div #status::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  background-color: #fff;
  border-radius: 50%;
}

#api_introduce #terminal .bar div #status.success {
  background-color: #07a751;
}

#api_introduce #terminal .bar div #status.failure {
  background-color: #d20f0f;
}

#api_introduce #terminal .json_preview {
  padding: 3.375rem 2.25rem 2rem 2.25rem;

  color: #fff;

  font-size: 1.125rem;
  text-align: left;

  overflow-y: auto;

  display: none;
}

#api_introduce #terminal .json_preview.active {
  display: block;
}

#api_introduce #terminal .json_preview p {
  font-size: 1.125rem;
  line-height: 1.5rem;
  font-weight: 300;
}

#industry_solutions {
  padding-top: 5rem;
  padding-bottom: calc(9.375rem + (16.25rem - 4.25rem));
  background-color: var(--bg-color);

  color: var(--purple);

  z-index: 100;
}

#industry_solutions h3 {
  font-size: 3rem;
  line-height: 3rem;
}

#industry_solutions p {
  font-family: "freight-sans-pro", sans-serif;
  line-height: 1.75rem;

  max-width: 750px;
  margin-top: 1.75rem;
  margin-bottom: 2.875rem;
  margin-inline: auto;
}

#industry_solutions .cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;

  max-width: 1200px;
  margin-inline: auto;

  position: relative;
}

#industry_solutions .cards a.card {
  width: 100%;
  height: 15.25rem;

  color: #fff;
  font-size: 2.25rem;
  font-weight: 700;
  font-family: "museo-sans", sans-serif;
  letter-spacing: 0.72px;
  text-decoration: none;

  cursor: pointer;

  background-image: url("../assets/insurance.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background 0.3s;
}

#industry_solutions .cards #non_profit {
  background-image: url("../assets/non_profit.png");
}

#industry_solutions .cards .pre_loader_bg_non_profit {
  background-image: url("../assets/non_profit_hover.png");

  visibility: hidden;
}

#industry_solutions .cards #non_profit:hover {
  background-image: url("../assets/non_profit_hover.png");
}

#industry_solutions .cards #ira_custodians {
  background-image: url("../assets/ira_custodians.png");
}

#industry_solutions .cards .pre_loader_bg_ira_custodians {
  background-image: url("../assets/ira_custodians_hover.png");

  visibility: hidden;
}

#industry_solutions .cards #ira_custodians:hover {
  background-image: url("../assets/ira_custodians_hover.png");
}

#industry_solutions .cards #property_management {
  background-image: url("../assets/property_management.png");
}

#industry_solutions .cards .pre_loader_bg_property_management {
  background-image: url("../assets/property_management_hover.png");

  visibility: hidden;
}

#industry_solutions .cards #property_management:hover {
  background-image: url("../assets/property_management_hover.png");
}

#industry_solutions .cards #insurance {
  background-image: url("../assets/insurance.png");
}

#industry_solutions .cards .pre_loader_bg_insurance {
  background-image: url("../assets/insurance_hover.png");

  visibility: hidden;
}

#industry_solutions .cards #insurance:hover {
  background-image: url("../assets/insurance_hover.png");
}

#industry_solutions .cards #payology_logo_p {
  position: absolute;
  top: calc(50% - 65px);
  left: calc(50% - 65px);
}

@keyframes toRight {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}

@media only screen and (min-width: 2550px) {
  #introduction::before {
    transform: skewY(2.5deg);
  }
}

@media only screen and (max-width: 1740px) {
  #introduction div.image {
    padding-bottom: 12rem;
  }
}

@media only screen and (max-width: 1460px) {
  #introduction div.image {
    padding-block: 3.5rem 10rem;
  }

  #introduction div.text {
    max-width: 35rem;
  }

  #introduction div.text h1 {
    font-size: 3rem;
  }
}

@media only screen and (max-width: 1260px) {
  .wrapper {
    margin-inline: 1.125rem;
  }

  #introduction {
    padding-left: 0;
  }

  #introduction div.image {
    padding-bottom: 8rem;
    padding-left: 2rem;
  }

  #introduction div.text {
    max-width: 35rem;
  }

  #introduction div.text h1 {
    font-size: 3rem;
  }

  #introduction div.text h2 {
    margin-bottom: 1.5rem;
  }

  #api_introduce .container {
    gap: 1.125rem;
  }

  #api_introduce .arrow_cards .card_wrap {
    margin-left: 0;
  }

  #api_introduce #card_indexes {
    left: 50%;
  }

  #api_introduce .arrow.non_mobile {
    display: none;
  }

  #api_introduce #terminal .bar {
    padding-inline: 1rem;
    /* flex-direction: column-reverse; */
    gap: 1rem;
  }
}

@media only screen and (max-width: 1140px) {
  #api_introduce #terminal .bar {
    justify-content: center;
  }

  #api_introduce #terminal .bar .response_cards {
    width: 100%;
    justify-content: center;

    position: absolute;
    left: 50%;
    top: calc(4.6875rem + 2rem);
    transform: translateY(-50%) translateX(-50%);
  }
  #api_introduce #terminal .json_preview {
    padding-top: 4rem;
  }
  #api_introduce #card_indexes .circle_index {
    width: 1rem;
    height: 1rem;
  }
}

@media only screen and (max-width: 1020px) {
  /* ==============TIPOGRAPHY=============== */
  #introduction div.text h1 {
    font-size: 2.5rem;
  }

  /*==============COMPONENTS===============*/

  .only_mobile,
  #api_introduce .arrow.non_mobile {
    display: block;
  }

  #our_clients .only_mobile,
  #salesforce .non_mobile,
  #api_introduce #terminal.non_mobile {
    display: none;
  }

  #introduction {
    padding-inline: 0 0.5rem;
  }

  #introduction div.image_container .overlay {
    left: calc(50% + 2.5rem);
  }

  #introduction div.image {
    padding-bottom: 6rem;
  }

  #introduction div.text {
    max-width: 26.5rem;
  }

  #our_clients {
    /* padding-top: 0; */
    padding-bottom: 6.5rem;
  }

  #our_clients .client_logos {
    grid-template-columns: repeat(3, 1fr);
  }

  #our_clients .logo_flex_container {
    margin-inline: 1.125rem;
    width: auto;
    justify-content: space-between;
  }

  #our_clients .client_logos img.on_mobile {
    display: none;
  }

  #salesforce {
    text-align: left;

    padding-bottom: 5rem;
  }

  #salesforce .item h3 {
    text-wrap: wrap;
  }

  #salesforce::before {
    background-color: #d7eff0;
    transform: skewY(-8deg);
  }

  #salesforce .item .left_line {
    display: none;
  }

  #salesforce_tabs {
    width: 100%;
    padding: 0;

    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1.75rem;

    text-align: left;
    text-transform: none;

    border: none;
  }

  #salesforce_tabs .tab {
    width: 100%;
    min-width: auto;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    opacity: 100%;
  }

  #salesforce_tabs .anim_wrap {
    display: block;

    height: 0;
    overflow-y: hidden;
  }

  #salesforce_tabs .tab.active .anim_wrap {
    height: 100%;
  }

  #salesforce_tabs .tab_info {
    display: flex;
    flex-direction: column;
    gap: 1.625rem;

    padding-top: 1.75rem;
    max-width: none;
    margin-inline: auto;
    margin-bottom: calc(4rem - 1.75rem);
  }

  #salesforce_tabs .tab_info h3 {
    font-weight: 700;
  }

  #salesforce_tabs .tab .mobile_tab_text {
    padding: 0 0.75rem 0.375rem 0;
    color: var(--purple-hover-b);

    border-bottom: 2px solid var(--purple-hover-b);
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  #salesforce_tabs .tab img {
    width: 22px;
    height: 22px;
  }

  #salesforce_tabs .tab .tab_info .button {
    padding: 0.75rem 2.25rem;
    margin-inline: auto;
  }

  #salesforce_tabs .tab .tab_info > div {
    display: flex;
    flex-direction: column;
  }

  #salesforce_tabs .tab .tab_info .screen_pictures {
    width: 100%;
    height: auto;

    max-width: 550px;

    margin-inline: auto;

    margin-bottom: 1.75rem;
  }

  #salesforce_tabs .tab img.decrease {
    display: none;

    animation: appear 0.3s;
  }
  #salesforce_tabs .tab.active img.decrease {
    display: block;
  }

  #salesforce_tabs .tab.active img.increase {
    display: none;
  }

  #salesforce_tabs .tab.opened::after {
    display: none;
  }

  #salesforce_tabs .item h3::before,
  #salesforce_tabs .item.active h3::after {
    display: none;
  }

  #salesforce_tabs .item h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.375rem;

    font-weight: 700;
    font-family: "museo-sans", sans-serif;
    line-height: 1.75rem;
  }

  #salesforce_tabs .items {
    margin: 0;
  }

  #salesforce_tabs .item h3 img {
    padding: 5px;
    height: 2.25rem;
    width: 2.25rem;
    background-color: #3e137427;
    border-radius: 50%;
  }

  #salesforce_tabs .items .item p {
    margin-left: calc(2.25rem + 0.375rem);
    margin-top: 0.625rem;

    max-height: none;
    opacity: 1;
  }

  #api_introduce {
    padding-top: 8rem;
    padding-bottom: 8.375rem;
  }

  #api_introduce::before {
    transform: skewY(8deg);
  }

  #api_introduce .arrow_cards {
    max-width: 460px;
    margin-inline: auto;
  }

  #api_introduce .arrow_cards .card_wrap {
    width: 100%;

    min-height: calc(380 + 6.875rem / 2);
    padding-top: calc(6.875rem / 2);
    margin-inline: auto;
  }

  #arrow_left {
    left: calc(-1.625rem - 34px);
  }

  #api_introduce .arrow_cards .card {
    padding: 5.25rem 1.125rem 1.75rem 1.125rem;
  }

  #api_introduce .arrow_cards .card h3 {
    font-size: 1.75rem;
  }

  #api_introduce .arrow_cards .card .circle_icon {
    width: 6.875rem;
    height: 6.875rem;
    border: 10px solid var(--purple);

    top: calc((-6.875rem / 2));
    left: 50%;
    transform: translateX(-50%);
  }

  #api_introduce .arrow_cards .card .circle_icon img {
    width: 2.875rem;
    aspect-ratio: 1 / 1;
  }

  #industry_solutions {
    padding-bottom: 4.125rem;
  }

  #industry_solutions .cards #payology_logo_p {
    width: 2.375rem;
    height: 2.375rem;

    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

@media only screen and (max-width: 800px) {
  /*==============TIPOGRAPHY===============*/
  h2,
  h3 {
    letter-spacing: -0.72px;
  }

  #introduction div.text h1 {
    color: #fff;
    font-size: 2.25rem;
    line-height: 2.875rem;
    letter-spacing: -0.72px;

    margin: 0;
  }

  #introduction div.text h2 {
    max-width: none;

    color: #fff;
    letter-spacing: 0;
    opacity: 80%;

    margin-bottom: 1.75rem;
  }

  #our_clients h2 {
    font-size: 2.25rem;
    line-height: 2.875rem;

    margin-bottom: 4rem;
  }

  #salesforce h2 {
    font-size: 2.25rem;
    line-height: 2.875rem;
  }

  #api_introduce h3,
  #industry_solutions h3 {
    font-size: 2.25rem;
    line-height: 2.875rem;
  }

  #industry_solutions p {
    font-family: "museo-sans", sans-serif;
    font-weight: 300;
    margin-bottom: 1.875rem;
  }

  .tab_info p {
    font-family: "museo-sans", sans-serif;
    line-height: 1.5rem;
  }

  /*==============COMPONENTS===============*/

  #introduction {
    padding: 0;

    overflow: initial;
  }

  #introduction::before {
    display: none;
  }

  #introduction div.image::before,
  #introduction div.image::after,
  #introduction div.image_container .overlay {
    display: none;
  }

  #introduction div.image_container {
    padding: 2.25rem 0 6rem 0;
    margin: 0;

    background-color: var(--purple);
  }

  #introduction div.image {
    width: 100%;

    margin: 0;
    padding: 0;
    padding-inline: 1.125rem;

    background: none;
    clip-path: none;

    text-align: center;
  }

  #introduction div.text {
    text-align: center;
    gap: 1.75rem;

    width: 100%;
    margin-inline: auto;
  }

  #introduction button.button {
    background-color: #fff;
    color: var(--purple);

    padding: 0.75rem 2.25rem;
  }

  #our_clients .only_mobile {
    display: block;
  }

  #our_clients .non_mobile {
    display: none;
  }

  #our_clients {
    padding-top: 0;
    padding-bottom: 7rem;
  }

  #salesforce::before {
    transform: skewY(-6deg);
  }

  #api_introduce::before {
    transform: skewY(12deg);
  }

  #industry_solutions .cards a.card {
    letter-spacing: 0.36px;
    font-size: 1.125rem;

    height: auto;
    max-height: 4.5rem;
    padding: 1.5rem 1.25rem;
  }

  #introduction .image_angle {
    display: block;

    width: 100%;

    clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0% 100%);

    transform: translateY(-15%);
  }
}

@media only screen and (max-width: 600px) {
  #api_introduce .arrow.non_mobile {
    display: none;
  }
}
@media only screen and (max-width: 480px) {
  .logosSlide img {
    height: 120px;
    margin: 0 20px;
  }

  #api_introduce .arrow_cards .card_wrap {
    min-height: calc(450px + 6.875rem / 2);
  }

  #salesforce::before {
    transform: skewY(-12deg);
  }
}

@keyframes slides {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 100%;
  }
  100% {
    opacity: 0;
  }
}