@charset "UTF-8";

.roi-calc {
	color: var(--font-color-blue);
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 100px;
	margin-bottom: 80px;
  align-items: center;
}

.roi-calc-title {
  color: var(--font-color-blue);
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: left;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.roi-calc-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 400px;
}

.roi-step-container {
  width: auto;
  /* max-width: 900px; */
  height: fit-content;
  background-color: #fff;
  display: flex;
  justify-content: center;
  padding: 32px;
  border-radius: 16px;
  box-shadow: 0px 4px 12px 0px #0000001A;
}

.roi-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;

  h2 {
    color: var(--font-color-blue);
    font-size: 1.5em;
    font-weight: 700;
  }
}

.roi-step .intro-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 900px;
  gap: 20px;
   & > * {
    margin: 0;
   }

   h2 {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--font-color-blue);
    text-align: center;
   }
   .aryval-logo svg {
    display: inline-block;
    height: 30px;
    width: auto;
    margin: 0;
   }

   p {
    font-size: 16px;
    font-weight: 500;
    color: var(--font-color-blue);
   }

   .roi-animation {
    margin: 10px 0;
    height: 200px;
    width: 200px;
   }
  

  
}

.roi-step .step-form {
  display: flex; 
  flex-direction: column;
  align-items: center;
  width: 900px;
  gap: 20px;
  padding: 0 22px;
}

/* Step 1 and 2 styles */
.roi-step .step-form .options{
  display: flex;
  gap: 20px;
  width: 100%;
  justify-content: center;

  .option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: calc(33.3333333% - 10px);
    border: 2px solid var(--font-color-blue);
    border-radius: 8px;
    padding: 10px;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow:
				0px 4px 6px 0px #00345A12, 
				0px 1px 4px 0px #00345A1F, 
				0px 0px 5px 0px #00345A12; 

    svg {
      fill: #81A0B5;
      transition: fill 0.3s ease;
    }

    &:hover {
      background-color: #81a0b533;
      color: #fff;

      svg {
        fill: var(--font-color-blue);
      }
    }

    &.selected {
      background-color: #00345ABF;
      
      p {
        color: #fff;
      }

      input[type="radio"] {
        background-color: #fff;
        border-color: #00345A;
      }

      svg {
        fill: #fff;
      }
    }


    p {
      margin: 0;
      text-align: center;
    }

    input[type="radio"], input[type="checkbox"] {
      appearance: initial;
      width: 20px;
      height: 20px;
      border: 1px solid var(--font-color-blue);
      border-radius: 50%;
      cursor: pointer;
    }

    input[type="checkbox"] {
      border-radius: 4px;
    }
  }

  .option label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 5px;
    cursor: pointer;

    .option-main {
      font-size: 1.8em;
      font-weight: bold;
    }
  }

  input[type="radio"]:checked {
    position: relative;
  }

  input[type="radio"]:checked:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    border-radius: 50%;
    background-color: var(--font-color-blue);
  }
}





.additional-content {
  max-width: 75%;
  padding: 20px;
  border: 1px solid #D5E4E4;
  border-radius: 4px;
  box-shadow: inset 0px 1px 1px 1px #00345A12;
}

.additional-header > div {
  width: fit-content;
  align-items: center;
  gap: 10px;

  h4 {
    padding-top: 5px;
    font-size: 18px;
    font-weight: 700;
  }
}

.additional-header p {
  color: #8A8A8D;
  font-size: 14px;
  font-weight: 400;
  
}

.optional-inputs, .optional-input-row {
  gap: 10px;
}

.optional-input {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: calc(25% - 5px);
}

.optional-input.school {
  width: calc(33.33333% - 10px);
}


.optional-input svg {
  fill: #62859F;
  height: 27px;
  width: 27px;
}

.optional-input label {
  height: 40px;
  width: fit-content;
  align-items: center;
  gap: 10px;
  position: relative;

  span {
    font-size: 14px;
    font-weight: 700;
    color: #62859F;
    display: flex;
  }
}

.optional-input input[type="text"] {
  width: 100%;
  height: 45px;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #00345A66;
  color: var(--font-color-blue);
  font-size: 16px;
  font-weight: 400;
  box-shadow: inset 0px 1px 2px 0px #0000001A;
}

.optional-input input[type="text"]::placeholder {
 color: #62859fde;
}

/* Input icons/text */
.inputWrap {
  position: relative;
  display: inline-block;
}

.inputWrap::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
  color: #62859Fde;
  transition: color 0.2s ease;
}

.inputWrap:has(input:not(:placeholder-shown))::before {
  color: var(--font-color-blue); /* Font color when input has value */
}

.inputWrap:has(#eventApplication)::before, 
.inputWrap:has(#appEnroll)::before,
.inputWrap:has(#percentRelevant)::before,
.inputWrap:has(#attendance)::before {
  right: 10px;
  content: '%';
}

.inputWrap:has(#stay)::before {
  right: 10px;
  content: 'Years';
}

.inputWrap:has(#time)::before {
  right: 10px;
  content: 'min';
}

#tuition, #salary {
  padding-left: 25px;
}

.inputWrap:has(#tuition)::before, .inputWrap:has(#salary)::before {
  left: 10px;
  content: '$';
}

.info-container {
  position: absolute;
  right: 10px;
  top: 20px;

  svg.info-icon {
    height: 20px;
    width: 20px;
  }
}

.info-tooltip {
  opacity: 0;
  min-width: 200px;
  pointer-events: none;
  background: #00345A;
  border: 1px solid var(--font-color-blue);
  position: absolute;
  text-align: center;
  padding: 0 20px;
  border-radius: 6px;
  box-shadow: 0px 2px 8px 0px #000000;
  transition: all 0.2s ease;
  z-index: 999;
  bottom: 140%;
  right: -15%;
  
  p {
    color: var(--app-color-light-blue);
    font-size: 12px;
    font-weight: 400;
  }

  &::before {
    width: 1rem;
    height: 1rem;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    background-color: inherit;
    bottom: -0.6rem;
    right: 0.7rem;
    border-radius: 2px;
    border: inherit;
  }
}

svg:hover + .info-tooltip {
  opacity: 1;
}

/* Step 3 styles */

.roi-step:has(.role-selector){
  width: 850px;
}
.roi-step .step-form .role-selector.options {
  flex-direction: column;
  align-items: center;

  .option {
    flex-direction: row;
    width: 75%;
    border-radius: 16px;
    padding: 15px;

    label {
      flex-direction: row;
      justify-content: flex-start;
      gap: 10px;

      .svg-wrap {
        padding: 7px;
        border-radius: 4px;
        border: 1px solid #BACCCC;
      }

      svg {
        height: 30px;
        width: 30px;
      }

      .label-text p {
        text-align: left;
      }

      .option-main {
        font-weight: 500;
        font-size: 16px;
      }

      .option-sub {
        font-size: 14px;
      }
    }
  }

  input[type="checkbox"]:checked {
    /* background-color: var(--font-color-blue); */
    position: relative;
  }

  
  input[type="checkbox"]:checked:after {
    content: '';
    /* background: url('../image/Check.svg') no-repeat center / contain; */
    background-image: url('../image/Subtract.svg');
    background-size: contain; 
    position: absolute;
    top: 25%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background-repeat: no-repeat;
    background-position: center;
  }

  div:has(>label[for="other"]){
    width: 100%;
  }
  
  div:has(>input[type="radio"]), div:has(>input[type="checkbox"]) {
    display: flex;
    align-items: center;
    padding: 10px;
  }
}

.step-form .options .role-option.option:has(label[for="event-manager"]) {
  border: 2px solid rgb(248, 187, 7);
}
.step-form .options .role-option.option:has(label[for="event-manager"]):hover {
  background-color: rgba(248, 187, 7, 0.102);
}
.step-form .options .role-option.option:has(label[for="event-manager"]).selected {
  background-color: rgba(248, 187, 7, 0.251);
  p{color: var(--font-color-blue);}
}



.step-form .options .role-option.option:has(label[for="admissions"]) {
  border: 2px solid rgb(231, 110, 128);
}
.step-form .options .role-option.option:has(label[for="admissions"]):hover {
  background-color: rgb(231, 110, 128, 0.102);
}
.step-form .options .role-option.option:has(label[for="admissions"]).selected {
  background-color: rgb(231, 110, 128, 0.251);
  p{color: var(--font-color-blue);}
}


.step-form .options .role-option.option:has(label[for="marketing"]) {
  border: 2px solid rgb(168, 201, 0);
}
.step-form .options .role-option.option:has(label[for="marketing"]):hover {
  background-color: rgb(168, 201, 0, 0.102);
}
.step-form .options .role-option.option:has(label[for="marketing"]).selected {
  background-color: rgb(168, 201, 0, 0.251);
  p{color: var(--font-color-blue);}
}


.step-form .options .role-option.option:has(label[for="executive"]) {
  border: 2px solid rgb(6, 151, 255);
}
.step-form .options .role-option.option:has(label[for="executive"]):hover {
  background-color: rgb(6, 151, 255, 0.102);
}
.step-form .options .role-option.option:has(label[for="executive"]).selected {
  background-color: rgb(6, 151, 255, 0.251);
  p{color: var(--font-color-blue);}
}


.step-form .options .role-option.option:has(label[for="other"]) {
  border: 2px solid rgb(129, 160, 181);
}
.step-form .options .role-option.option:has(label[for="other"]):hover {
  background-color: rgb(129, 160, 181, 0.102);
}
.step-form .options .role-option.option:has(label[for="other"]).selected {
  background-color: rgb(129, 160, 181, 0.251);
  p{color: var(--font-color-blue);}
}

#specify-role {
  width: 100%;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #00345A66;
  background-color: #fff;
  color: var(--font-color-blue);

  &::placeholder {
    color: #81A0B5;
  }
}

.no-show:has(#specify-role), .no-show.roi-step-additional.flex {
  max-height: 0;
  padding-top: 0;
}

.roi-step-additional.flex {
  padding-top: 30px;
  max-height: 400px;
  transition: max-height 0.2s ease-in-out;
  overflow: hidden;
  align-items: center;
}

.roi-step-additional > :first-child {
  width: 200px;
  height: 200px;
}

div:has(>#specify-role) {
  max-height: 50px;
  width: 100%;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

/* Summary Section */
.step-form:has(.summary-title) {
  gap: 16px;
}

.summary-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;


  p, h2 {
    margin: 0;
  }
}

div.summary-content {
  justify-content: center;
  align-items: center;
 width: 100%;
 border: 1px solid var(--font-color-blue);
 background-color: #F0FCFC;
 padding: 23px 30px;
 border-radius: 12px;
 gap: 16px;
 box-shadow: 
        0px 4px 6px 0px #00345A12, 
        0px 1px 4px 0px #00345A1F, 
        0px 0px 2.5px 0px #00345A12;
}

.estimated-roi {
  width: 75%;
  gap: 16px;
}

.summary-content .roi-cartoon {
  width: calc(25% - 16px);
}

.estimated-roi h3 {
  font-size: 25px;
  font-weight: 700;
  color: var(--font-color-blue);
}

.roi-value {
  width: 100%;
}

.roi-value p {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.roi-value.total p {
  font-size: 24px;
  font-weight: 700;
}

.roi-value .value#total-ROI {
  font-size: 24px;
}

.roi-value .value {
  width: 50%;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
}

.roi-value .title {
  align-items: center;
  position: relative;
}

.roi-value .title .info-container {
  position: absolute;
  top: 28%;
  right: -8%;

  p{
    font-size: 14px;
    font-weight: 400;
    padding: 5px 0;
  }

  svg {
    fill: var(--font-color-blue);
    height: 15px;
    width: 15px;
  }

  .info-tooltip {
    bottom: 150%;
    left: -35%;

    &::before {
      right:0;
      left:0.7rem;
    }
  }
}

.roi-value.total {
  align-items: center;
  .info-container {
    top: 68%;
    left: 32%;
    height: fit-content;
    right: unset;
  }
}

.roi-cartoon  {
  display: flex;
  justify-content: center;
  align-items: center;

  svg {
    transform: scaleX(-1) !important;
  }
}

.summary-inputs {
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: grid;
  grid-template: repeat(3, auto) / repeat(4, calc(25% - 10px));
}

.summary-inputs > .input-row:nth-child(2){
  label {
    height: 36px;
  }

  label:not(.appAnn) {
    line-height: 36px;
  }
}

.input-row {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
}

div.input {
  border: 1px solid #D5E4E4;
  border-radius: 6px;
  padding: 12px 20px 12px 15px;
  width: 100%;
  box-shadow:  0px 1px 2px 0px #00345A12;
  transition: all 0.3s ease-in-out;
  gap: 10px;

  .input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    /* width: 20%; */
  }

  .input-icon svg {
    fill: #00345A;
    height: 30px;
    width: 30px;
  }

  label {
    font-size: 12px;
    font-weight: 400;
    color: #00345A99;
  }

  input[type="text"] {
    width: 100%;
    height: 45px;
    border: 1px solid #00345A66;
    color: var(--font-color-blue);
    padding: 8px 6px;
    border-radius: 4px;
  }
}

div.input:hover {
  border-color: #81A0B5;
  box-shadow: 
        0px 4px 6px 0px #00345A12, 
        0px 1px 4px 0px #00345A1F, 
        0px 0px 2.5px 0px #00345A12;
  background-color: #F0FCFC;
}

.input-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 75%;
}





.buttons {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.progress-bar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  width: 45%;
  p {
    width: fit-content;
  }
}

.progress-bar {
  width: 75%;
  height: 100%;
  border-radius: 50px;
  background-color:#D5E4E4;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 50px;
  background-color: #81A0B5;
  transition: width 0.3s ease-in-out;
}

.roi-report {
  width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.roi-step-header {
  display: flex;
  flex-direction: column;
  align-items: center;

  p {
    width: 75%;
    text-align: center;
  }
}
.roi-mcform {
  width: 90%;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;

  form.wpcf7-form {
    display: flex;
    flex-direction: column;

    .wpcf7-response-output {
      position: static;
      align-self: center;
      width: 75%;
      border-radius: 4px;
    }
  }

  #backBtn {
    align-self: center;
    width: 75%;
  }
}

.roi-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  margin-bottom: 20px;

  input#email, input#fullname, input#school-name, input#phone {
    margin: 0;
    width: 100%;
    height: 45px;
    border-radius: 4px;
    border: 1px solid #00345A66;
    background-color: #00345A0D;
    color: var(--font-color-blue);
    padding: 8px 12px;
    box-shadow: 
        0 4px 8px #00345A1A,      
        inset 0 2px 5px #F0FCFCBF; 
    cursor: text;
  }
  p {
    margin: 0;
  }

  p:has(#roi-submit) {
    width: 100%;
    text-align: center;
  }

  .wpcf7-spinner {
    display: none !important;
    visibility: hidden !important;
  }
}

div.roi-form-row {
  width: 100%;
  gap: 20px;
  justify-content: flex-start;
}

.roi-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: calc(50% - 10px);

  label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    height: 30px;
    font-size: 16px;
    font-weight: 700;
  }
}

.roi-submit-btn {
  width: 100%;
  display: flex;
  justify-items: center;
}

#roi-submit {
  width: 75%;
}

.what-you-get {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  padding: 23px 30px;
  border: 1px solid #00345A;
  border-radius: 12px;
  background-color: #F0FCFC;

  .roi-cartoon {
    svg {
      height: 200px !important;
      width: 200px !important;
      transform: scaleX(1) !important;
    }
  }
  .roi-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    width: calc(75%);

    h2 {
      margin-bottom: 12px;
    }
  }
}

.roi-info-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;

  p {
    font-size: 18px;
    margin: 0;
  }

  li div {
    line-height: 20px;
  }

  li div p:first-of-type {
    font-weight: 700;
  }

  li + li {
    margin-top: 12px;
  }
}

.asterisk {
  color: red;
  margin-left: -10px;
}

#nextBtn:disabled, #roi-submit:disabled {
  background-color: #E1F86A;
  color: #00345A;
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

#backBtn {
  box-shadow: 
        0px 8px 12px 0px #00345A12, 
				0px 2px 8px 0px #00345A1F, 
				0px 0px 5px 0px #00345A12;
}

#backBtn:hover {
   background-color: color-mix(in srgb, currentColor 5%, black 5%);
}

/*PDF*/
:root {
  --font-color-alt-blue: #204964;
  --font-color-dark-grey: #444444;
  --font-color-light-grey: #888;
  --font-color-faded-grey: #44444499;
  --background-color: #eee;
  --border-line: 1px solid #81A0B5;
}

.roi-pdf-wrapper {
  display: flex;
  height: fit-content;
  justify-content: center;
  width: 100%;
  /* display: none; */
}

.download-pdf-button {
  position: absolute;
  top: 120px;
  right: 10%;
}

.roi-step-container:has(.roi-pdf) {
  background-color: inherit;
  box-shadow: none;
  padding: 0;
}

.roi-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 794px;
  background-color: inherit;

  p {
    margin: 0;
  }
}

.roi-pdf-section:first-of-type {
  margin-top: 10px;
}
.roi-pdf-section {
  background-color: #fff;
  border-radius: 16px;
  padding: 16px 16px;
  width: 780px;
  /* box-shadow: 0px 4px 12px 0px #0000001A; */
  border: var(--border-line);
  height: fit-content;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  .revenue-roi {
    border-bottom: var(--border-line);
  }

  h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--font-color-blue);
    width: auto;
  }

  .pdf-header-wrapper {
    svg {
      height: 18px;
      max-width: unset;
      display: inline;
      width: auto;
      margin-left: 3px;
      margin-bottom: 2px;
    }
  }
}

.pdf-header-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
  border-bottom: var(--border-line);

  img {
    height: 34px;
  }
}

.pdf-header {
  border-bottom: var(--border-line);
  width: 100%;
  h2 {
    text-align: center;
    margin-bottom: 5px;
    margin-left: 10px;
    font-size: 34px;
    font-weight: 400;
  }
}

.school-info .client-name, .school-info .school-name, .school-info .client-position {
  font-size: 20px;
  font-weight: 700;
  color: var(--font-color-dark-grey);
  margin-top: 10px;
  + p {
    margin-bottom: 10px;
  }
}
.school-info p{
  .client-position {
    color: var(--font-color-light-grey);
  }
}

.section-row {
  display: grid;
  grid-template-columns: 30px repeat(3, 230px);
  grid-template-rows: repeat(3, auto) 6px;
  gap: 5px 10px;
  width: 100%;
  align-items: start;

  p {
    font-size: 12px;
    font-weight: 700;
    grid-row: 1;
    color: var(--font-color-alt-blue);
  }

  .box {
    display: flex; 
    padding: 20px 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: var(--background-color);
    border-radius: 16px;
    grid-row: 2;
    p {
      font-size: 24px;
      font-weight: 700;
      color: var(--font-color-blue);
    }
  }

  .box-note {
    font-size: 8px;
    font-weight: 400;
    color: var(--font-color-faded-grey);
    grid-row: 3;
    line-height: 10px;
    padding: 0 5px;
  }
}

.section-row.revenue {
  grid-template-columns: calc(50% - 5px) calc(50% - 5px);
  width: 100%;
}

.section-row.total {
  grid-template-columns: 1fr;
  grid-template-rows: auto 52px auto;
  p {
    font-size: 16px;
    font-weight: 700;
    color: var(--font-color-blue);
  }
  .total-value {
    background-color: #E3FF54;
    border-radius: 16px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    p {
      font-size: 26px;
      font-weight: 700;

      span {
        font-variant-numeric: normal;
        font-feature-settings: normal;
      }
    }
  }

  .box-note {
    font-size: 10px;
    color: var(--font-color-faded-grey);
    grid-row: 3;
    font-weight: 400;
    padding: 0 5px;
    line-height: 12px;
  }
}

.row-title {
  height: 100%;
  background-color: var(--background-color);
  justify-content: center;
  align-items: center;
  grid-column: 1;
  grid-row: 1 / span 3;
  border-radius: 12px;
  padding: 0 5px;
  display: flex;


  p {
    transform: rotate(-90deg);
    transform-origin: bottom;
    width: fit-content;
    text-wrap: nowrap;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 26px;
    margin-left: 16px;
  }
}

.recommendation-section {
  font-size: 10px;
  text-align: left;
  width: calc(33.333333% - 10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px 5px 5px 0;

  h4 {
    font-size: 12px;
    font-weight: 700;
    color: var(--font-color-dark-grey)
  }

  p {
    line-height: 110%;
    color: var(--font-color-dark-grey);
  }

  ul {
    padding: 0;
    padding-left: 12px;

    li {
      line-height: 110%;
      color: var(--font-color-dark-grey);
    }
  }

  span {
    font-weight: 700;
  }
	
	&:not(:last-child){
		border-right: 0.5px solid rgba(204, 204, 204, 0.5);
	}
}

.next-steps {
  width: 100%;
	margin-top: 5px;
  .content h3 {
    color: var(--font-color-blue);
  }
}

.roi-pdf-section .contact-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.section-row.next-steps {
  margin-top: 5px;
  height: 48px;
  grid-template-columns: repeat(3, calc(33.3333333% - 5px));
  grid-template-rows: 0;
}

.next-steps.row-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.next-steps .box {
  justify-content: space-evenly;
  padding: 10px 5px;
  svg {
    height: 24px;
    width: 24px;
  }
  
  p {
    font-size: 10px;
    font-weight: 700;
    width: 180px;
    color: var(--font-color-dark-grey);
  }
}
  
.contact-details {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 700;
  width: 100%;
  justify-content: space-evenly;
}

.in-touch {
  width: 200px;
  justify-content: left;
  gap: 10px;
}

.contact-methods {
  width: 375px;
  justify-content: space-between;

  a {
    text-decoration: none;
    color: var(--font-color-blue);

    &:has(.website) {
      p{
        color: #81A0B5;
      }
    }
  }

  a:hover {
    text-decoration: underline;
  }
}


/* Confirmation Dialog */
.confirmation-dialog.roi dialog {
  width: 65%;
  max-width: 900px;
}

.confirmation-content.roi {
  h2 {
    margin-bottom: 30px;
    font-size: 25px;
    font-weight: 700;
  }

  .message p {
    font-size: 16px;
    font-weight: 500;
    color: var(--font-color-blue);
    margin: 30px 0;
  }

  .buttons {
    display: flex;
    flex-direction: column;
    width: 85%;
    button {
      width: 100%;
    }

    button + button {
      margin-top: 20px;
    }
    
    .backBtn-dialog:hover {
      background-color: color-mix(in srgb, currentColor 5%, black 5%);
    }
  }
  
  .next-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    border: 1px solid var(--font-color-blue);
    border-radius: 12px;
    padding: 16px;
    gap: 16px;
    background-color: #F0FCFC;
    margin-top: 20px;

    .content {
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    ul li::marker {
      color: var(--font-color-blue);
    }

    li p {
      margin: 0;
      font-size: 16px;
    }

    .roi-cartoon {
      width: 24%;
    }
  }
}

/*Animations*/
@keyframes typing {
  from { width: 0; }
  to { width: var(--target-width); }
}

.type {
  animation: typing 1s ease-in-out;
}

@property --target {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

.low-value, .high-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

.animated-number {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-variant-numeric: tabular-nums;
}

@media(max-width: 1200px) {
  .roi-calc-content, .roi-step-container, .roi-step .intro-step, .roi-step .step-form, .roi-step .roi-report {
    width: 100%;
  }

  .roi-calc-title {
    height: 40px;
    img {
      height: 60px;
      width: auto;
    }
  }
}

@media (max-width: 992px) {
  .roi-calc-title {
    height: 30px;
    img {
      height: 50px;
      width: auto;
    }
  }
  .roi-step-container { padding: 16px; }

  .roi-step .step-form .options {
    gap: 0;
    justify-content: space-between;

    .option {
      padding: 8px;
      gap: 8px;

      label{
        svg {
          height: 40px;
          width: 40px;
        }

        .option-main { font-size: 24px; }
        .option-sub { font-size: 14px; }
      }
    }
  }

  .optional-input input[type="text"] {
    height: 40px;
    padding: 8px;
  }

  .roi-step .step-form .role-selector.options {
    gap: 10px;

    .option {
      padding: 10px;

      label {
        .svg-wrap {
          padding: 5px;

          svg {
            height: 25px;
            width: 25px;
          }
        }

        .label-text {
          .option-main { font-size: 14px; }
          .option-sub { font-size: 12px; }
        }
      }
    }
  }

  .optional-input label span { font-size: 12px; }

  .roi-step-additional.flex { padding-top: 15px; }

  .additional-content { padding: 10px; }

  .additional-header{
    > div {
      svg {
        height: 20px;
        width: 20px;
      }
      
      h4 {
        font-size: 16px;
        padding-top: 6px;
      }
    }

    p {
      font-size: 12px;
      margin: 0.5em 0;
    }
  } 

  .progress-bar-wrapper {
    width: 50%;
    height: 15px;
    p { font-size: 14px; }
  }

  .info-container, .roi-value .title .info-container {
    height: 15px;
    width: 15px;
  }

  .roi-value .title .info-container {
    top: 20%;
    right: -10%;
  }

  .info-container.info-associates {
    top: 2px;
    right: 5px;
  }

  .info-tooltip, .roi-value .title .info-container .info-tooltip {
    padding: 0 5px;

    p { margin: 0.5em 0; }
  }

  .info-tooltip.relevant { right: -40%; }

  #specify-role {
    font-size: 14px;
    height: 36px;
    padding: 4px 8px;
  }

  div.summary-content {
    padding: 12px 15px;
    gap: 10px;
  }

  .estimated-roi h3 { font-size: 20px; }

  .roi-value p { font-size: 14px; }

  .roi-value.total p { font-size: 16px; }

  .roi-value .value { width: 45%; }

  div.input {
   padding: 10px;
    label { 
      height: 36px; 
      display: flex;
      align-items: center;
    }
  }

  .summary-inputs > .input-row:nth-child(3) label:not(.relAssoc), 
  .summary-inputs > .input-row:nth-child(2) label:not(.avgSal) {
    line-height: 36px;
  }

  .summary-inputs { grid-template: repeat(4, auto) / repeat(3, calc(33.33333% - 10px)); }


  .roi-step-header p { font-size: 14px; margin: 0.5em 0;}
  .roi-form-field label { font-size: 14px; }

  .roi-form {
    gap: 20px;
    input#email, input#fullname, input#school-name, input#phone {
      height: 40px;
      font-size: 14px;
      padding: 5px 10px;
    }
  }

  .what-you-get {
    padding: 15px;
    gap: 0;

    .roi-text-content h2 { font-size: 20px;}
    .roi-info-list p { font-size:16px; }
  }

  .confirmation-dialog.roi dialog { 
    padding: 15px; 
    .confirmation-content, .message { padding: 0 10px; }

    .message {
      h2 { margin-bottom: 20px; }
      svg {
        height: 90px;
        width: 90px;
      }

      p {
        font-size: 14px;
        margin: 20px 0;
      }
    }

    .buttons .backBtn-dialog { font-size: 12px; }
    
    .next-steps {
      padding: 10px;
      gap: 0;

      .content {
        gap: 0;
        h3 { font-size: 22px; }
        li p { font-size: 14px; }
      }
    }
  }

  .pdf-header .roi-calc-title { margin-bottom: 15px; }

  #nextBtn, #backBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    padding: 10px 15px;
    height: 35px;
  }
}

@media(max-width: 768px){
  .roi-calc-title {
    margin-bottom: 30px;
    img { height: 40px; }
  }

  .roi-step-container { padding: 15px; }

  .roi-step .intro-step {
    gap: 10px;
    h2 {
      font-size: 24px;
      svg { height: 24px; }
    }
    p {
      font-size: 14px;
      text-align: center;
      padding: 0 30px;
    }

    .roi-animation {
      margin: 0;
    }
  }

  .roi-step {
    gap: 10px;
    h2 { font-size: 22px; }

    .step-form { 
      padding: 0; 
      gap: 10px; 

      .options {
        gap: 10px;
        justify-content: center;

        .option {
          gap: 5px;
          label {
            svg {
              height: 30px;
              width: 30px;
            }

            .option-main { font-size: 22px; }
            .option-sub { font-size: 12px; }

            input[type="radio"], input[type="checkbox"] {
              height: 15px;
              width: 15px;
            }
          }
        }
      }

      .roi-step-additional.flex{
        .roi-animation { display: none; }
        .additional-content { max-width: 100%; }
      }

      .progress-bar-wrapper {
        width: 60%;
        height: 12px;
        justify-content: center;
        gap: 10px;

        p { font-size: 12px; }

        .progress-bar { width: 60%; }
      }
    }
  }

  .info-tooltip {
    left: -25%;

    &::before {
      right: unset;
      left: 0.7rem;
    }
  }

  div.summary-content {
    padding: 10px;
    .estimated-roi { 
      width: 100%; 
      gap: 8px;

    }
    .roi-animation { display: none; }
  }

  #nextBtn, #backBtn {
    padding: 5px 15px;
    height: 30px;
  }

  .roi-step .step-form .summary-buttons .progress-bar-wrapper { width: 40%; }
  .roi-mcform #backBtn { display: block; }

  #roi-submit {
    padding: 5px 25px;
    font-size: 12px;
    height: 32px;
  }

  .what-you-get {
    .roi-animation { display: none; }
    .roi-text-content {
      width: 100%;
    }
  }

  .roi-mcform form.wpcf7-form .wpcf7-response-output {
    width: 100%;
    font-size: 12px;
  }

  .summary-inputs {
      grid-template: repeat(6, auto) / repeat(2, calc(50% - 10px));
    }
}

@media(max-width: 478px) {
  .roi-calc-title {
    margin-bottom: 20px;
    img { height: 35px; }
  }

  .roi-step .intro-step h2 {
    font-size: 22px;

    .aryval-logo svg { height: 22px; }
  }

  .roi-step .step-form .options {
    flex-direction: column;
    align-items: center;

    .option {
      width: 100%;
      flex-direction: row;
      gap: 20px;

      label {
        flex-direction: row;
        justify-content: space-between;
      }
    }
  }
  .additional-header {
    > div {
      gap: 5px;
      svg {
        height: 18px;
        width: 18px;
      }
      h4 { font-size: 14px;}
    }
    p {margin: 5px 0;}
  }
  .optional-input {
    gap: 0;
    label { 
      gap: 5px; 

      span { font-size: 10px; }
    }
    svg {
      width: 25px;
      height: 25px;
    }

    input[type="text"] {
      height: 30px;
      font-size: 12px;
    }

    .inputWrap::before {
      font-size: 14px;
    }

    .info-tooltip p, .roi-value .title .info-container p { font-size: 10px; }
  }

  #tuition, #salary {
    padding-left: 20px;
  }
  
  .info-container.info-associates {
    top: 2px;
    right: -5px;
  }

  .roi-step .step-form .role-selector.options .option {
    width: 100%;
    gap: 0;
  }

  .summary-inputs {
    grid-template: auto / repeat(2, 50%);

    .input-field { 
      width: 85%; 
      label { 
        height: 24px; 
        line-height: 100%;
      }

      input[type="text"] {
        height: 30px;
        font-size: 12px;
      }
    }

    .inputWrap::before {
      font-size: 12px;
    }
  }

  .roi-step .step-form .summary-buttons {
    justify-content: center;
    gap: 10px;
  }

  .roi-step .step-form .summary-buttons .progress-bar-wrapper {
    flex-direction: column;
    width: 30%;
    gap: 5px;
    height: auto;

    p { margin:0; }
    .progress-bar { height: 12px; width: 100%; }
  }

  .roi-step h2 {
    font-size: 20px;
  }

  .roi-step-header p {
    font-size: 12px;
    margin: 0;
  }
  .roi-form { gap: 5px; margin-bottom: 10px;}
  div.roi-form-row {
    flex-direction: column;
    gap: 5px;

    .roi-form-field { 
      width: 100%;
      
      input#email, input#fullname, input#school-name, input#phone {
        height: 30px;
        font-size: 12px;
      }
    
    }

  }

  #roi-submit { margin-top: 5px; }

  .what-you-get {
    padding: 10px;

    .roi-text-content h2 { font-size: 18px; }

    .roi-info-list p { font-size: 14px; }
  }

  .confirmation-dialog.roi dialog { 
    width: 90%; 
    .message { 
      svg {
        height: 70px;
        width: 70px;
      }
      p { margin: 10px 0; }
    }

    button {
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }

    .roi-animation { display: none; }
  }
}

@media(max-width: 400px) {
  .roi-calc-title {
    margin-bottom: 15px;
    img { height: 30px; }
  } 

  .roi-step .intro-step {
    h2 {
      font-size: 20px;
      
      .aryval-logo svg { height: 20px; }
    }
    p { font-size: 12px; padding: 0 20px; }
  }

  .roi-step .step-form .options .option {
    svg { height: 25px; width: 25px; }
    label {
      .option-main { font-size: 18px; }
    }
  }

  .optional-inputs { gap: 0; }
  .optional-input-row {
    justify-content: center;
  }

  .optional-input {
    svg { display: none; }
    label {
      height: 30px;
      span { line-height: 100%; }
    }
  }

  .additional-content.team-size .optional-inputs {
    flex-wrap: wrap;
    gap: 10px;
    .optional-input {
      flex: 0 0 calc(50% - 5px);
      .info-container, .info-container.info-associates {
        top: 0px;
        right: -20px;
      }
      .info-icon { display: block; }
      label { height: 20px; }

      .info-associates .info-tooltip.relevant {
        left: unset;

        &::before {
          left: unset;
          right: 0.7rem;
        }
      }
    }
  }


  .roi-step .step-form .role-selector.options {

    .option {
      padding: 10px;

      label {
        .svg-wrap {
          padding: 5px;

          svg {
            height: 20px;
            width: 20px;
          }
        }

        .label-text {
          .option-main { font-size: 12px; }
          .option-sub { font-size: 10px; }
        }
      }
    }
  }

  #specify-role {
    font-size: 12px;
    height: 36px;
  }

  .roi-step .step-form .progress-bar-wrapper {
    flex-direction: column;
    width: 30%;
    gap: 5px;
    height: auto;

    p { margin:0; }
    .progress-bar { height: 12px; width: 100%; }
  }

  .roi-step .step-form { gap: 10px; }

  .summary-title {
    gap: 5px;

    h2 { font-size: 18px; }
    p { font-size: 12px; padding: 0 10px; }
  }

  div.summary-content {
    .estimated-roi {
      h3 { font-size: 16px; }
      p { line-height: 100%; }
      .roi-value .value { width: 55%;}
      .roi-value p { font-size: 12px; }
      .roi-value.total p { 
        font-size: 14px; 
        padding: 0 2px 0 0;
      }

      .roi-value .title .info-container {
        top: 50%;
        right: 50%;
      }

      .roi-value.total .title .info-container {
        top: 50%;
        right: 27%;
        left: unset;
      }
    }
  }
  .summary-inputs {
    grid-template: auto / 100%;

    .input {
      .input-icon {
        height: auto;
        width: auto;
        svg {
          height: 25px;
          width: 25px;
        }
      } 
      .input-field {
        width: 90%;
        label {
          height: 20px;
  
        }
      }
    }
  }

  .summary-buttons {
    #nextBtn, #backBtn {
      padding: 5px;
      font-size: 10px;
    }
  }
}