@import url('utilServices.css');

main > div{
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem 0;
}

.plan{
    height: min-content;
    line-height: 1.3rem;
}

.plan,
.plan ul{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: var(--mainTextColor);
}

.plan > h3{
    color: var(--secondaryColor);
    font-size: clamp(1.2rem, 1.8vw, 3rem);
}

.plan > h4{
    color: var(--thirdColor);
    font-size: clamp(1rem, 1.6vw, 2.5rem);
}

.plan span{
    color: var(--secondaryColor);
}

form{
    width: clamp(200px, 50vw, 600px);
}
.tip{
    padding: 1rem;
    color: var(--mainTextColor);
    border-radius: var(--border1);
    background-color: var(--white);
}

  /* ============ SMALL TABLETS / SMARTPHONES ============ */
  @media screen and (max-width: 578px){
    main{
        padding: 1rem;
    }
    .calendly-inline-widget{
        translate: -1rem;
    }
    .plan > h3{
        color: var(--secondaryColor);
        font-size: clamp(1.2rem, 4vw, 5rem);
    }
    
    .plan > h4{
        color: var(--thirdColor);
        font-size: clamp(1rem, 3vw, 3.5rem);
    }
  }