.ctc-us2 {
  background-color: var(--color-white);
  padding-block: 5rem;

  & .title-section {
    position: relative;
    text-align: center;
  }

  & .bg-text {
    color: color-mix(in srgb, var(--color-green) 10%, transparent 90%);  
    font-size: clamp(2.75rem, calc(14vw - 1px), 12rem);
    user-select: none;
  }

  & .principal-text {  
    color: var(--color-green);
    font-size: clamp(1.5rem, calc(5vw - 1px), 3rem);
    left: 50%;
    line-height: 3rem;
    position: absolute;
    top: 35%;
    transform: translate(-50%, calc(22.5% + 1.5rem));
  }

  & button {
    background-color: var(--color-green);
    border-radius: 0.25rem;
    border-style: none;
    color: var(--color-white);
    font-size: clamp(0.5rem, 1rem, 2rem);
    font-weight: 600;
    padding: 0.75rem 5rem;
  }
}

.form-contact-us {
  display: flex;
  font-size: clamp(0.5rem, 2.5rem, 5rem);
  padding: 2rem 1rem;
  justify-content: center;
}

.grid-form {
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "i-name i-email i-tel"
    "t-msg t-msg t-msg"
    ". . btn-submit";
  grid-template-columns: 1fr 1fr 1fr;

  & :is(input, textarea) {
    background-color: var(--color-white);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 1px var(--color-black);
    color: var(--color-black);
    padding: 0.6rem 0.8rem;
    transition: box-shadow 0.4s ease-in-out;
    width: 100%;
    
    &:focus {
      box-shadow: 0 0 0 2px var(--color-black);
    }

    &:user-invalid {
      box-shadow: 0 0 0 2px var(--color-error);
    }

    &:user-valid {
      box-shadow: 0 0 0 2px var(--color-green);
    }
  }
}

.i-name { 
  grid-area: i-name; 
}

.i-email {
  grid-area: i-email; 
}

.i-tel {
  grid-area: i-tel;
}

.t-msg {
  grid-area: t-msg;

  & textarea {
    field-sizing: content;
    min-height: 8rem;
    max-height: 16rem;
    resize: block;
  }
}

.btn-submit { 
  display: flex;
  grid-area: btn-submit;
  justify-content: center;

  & > button:hover {
    --color-white: var(--color-green);
  }
}

@media (max-width: 1020px) {
  .ctc-us2 .principal-text { 
    top: 10%;
  }
}

@media (max-width: 550px) {
  .grid-form {
    grid-template-areas:
      "i-name i-name i-name"
      "i-email i-email i-email"
      "i-tel i-tel i-tel"
      "t-msg t-msg t-msg"
      ". btn-submit .";
  }
}