* {
   font-family: 'Montserrat', sans-serif;
   /*box-sizing: content-box;*/
   margin: 0;
   padding: 0;
}

button, input[type="submit"], input[type="reset"] {
   background: none;
   color: inherit;
   border: none;
   padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
}

.type-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: end;
   transition: all;
   padding: 0 3rem;
}

.type-card::after {
   content: '';
   transition: opacity;
   position: absolute;
   width: 100%;
   height: 100%;
   transition-duration: 300ms;
   background: #1a202c;
   opacity: 0;
}

.type-card:hover::after {
   opacity: .1;
}

.type-card img {
   transition: all;
   transition-duration: 300ms;
   margin-top: 9rem;
   transform-origin: bottom;
   max-height: 16rem;
   max-width: calc(0.8 * (100% + 6rem));
}
.type-card:nth-of-type(1) img {
   max-width: calc(0.6 * (100% + 6rem));
}

.type-card:hover img {
   scale: 105%;
}

.categorySel {
   display: block;
   padding: 1.25em 2em;
   background-position: center;
   background-color: #4a5568;
   cursor: pointer;
   border-radius: 2em;
   text-align: left;
   color: white;
   font-weight: 500;;
   background-size: 100%;
   transition: all 500ms;
}
.categorySel.cloned {
   color: transparent;
   position: relative;
}
.categorySel.cloned:after {
   content: attr(data-title);
   position: absolute;
   inset: 0;
   padding: 1rem;
   font-size: 1.25rem;
   background: transparent;
   border-radius: 2em;
   transition: all 500ms;
}
.categorySel.cloned:hover:after {
   background: #2226;
   color: white;
}

.categorySel:hover {
   background-size: 110%;
   background-color: #614585;
}

.page-viewer{
   padding-bottom: 6rem;
}
.page-viewer > div {
   display: none;
}

.page-viewer > *[active] {
   display: block;
   font-weight: 700;
}

.radio-container {
   display: flex;
   flex: 0 1 25%;
   align-items: center;
   justify-content: space-between;
   width: 13rem;
   height: 6em;
   border-radius: 1em;
   border: 2px solid #949ca8;
   background: transparent;
   padding-inline: 2em .5em;
   transition: all 300ms;
}

.radio {
   display: inline-block;
   width: 3rem;
   height: 3rem;
   font-size: 3rem;
   border-radius: 50%;
   position: relative;
   margin-right: 10px;
   right: 0;
}

.radio input[type="radio"] {
   position: absolute;
   opacity: 0;
}

.radio-label {
   display: inline-block;
   margin-right: 10px;
   font-size: 1.25em;
   font-weight: 750;
}

.radio-inner {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   right: 0;
   border-radius: 50%;
   background-color: transparent;
   border: 2px solid #666;
   font-size: 0;
   color: transparent;
   position: absolute;
   text-align: center;
   align-content: center;
   transition: background-color 0.3s, font-size .35s;
   user-select: none;
}

.radio input[type="radio"]:checked + .radio-inner {
   background-color: #A896FF;
   color: white;
   border: none;
   font-size: .67em;
}

.selectedPlatform, .selectedDesign {
   border-color: #7b61ff;
   background: #e1dcff50;
}
#platformDisp {
   color: #9ca3af;
   font-weight: 300;
   content: 'None selected';
   margin-top: 1.5rem;
}

.pill {
   display: inline-block;
   padding: .75em 1.75em;
   position: relative;
   font-weight: 500 !important;
   font-size: .9rem !important;
   background: #d5d7db;
   color: black !important;
   border-radius: 2em;
   text-align: center;
   margin-top: 1em;
   cursor: pointer;
}
.pill button {
   display: inline-block;
   color: #9ca3af;
   font-weight: 800;
   padding-inline: .25rem 1rem;
   pointer-events: fill;
}
#feature-pills {
   display: flex;
   gap: .5rem;
}
#feature-pills:empty:after {
   content: 'None selected';
   font-weight: normal;
   margin-top: 1.5rem;
}
#feature-pills:not(:empty) + h6 {
   display: none;
}

.counter {
   box-sizing: border-box;
   position: relative;
   background: #f7fafc;
   height: 25%;
   border-radius: 1em;
   margin-bottom: 8%;
   padding: 2rem 3rem;
}
.counter h3 {
   overflow: hidden;
   position: relative;
   color: transparent;
   font-size: 1.5em;
   font-weight: 700;
}
.counter h2 {
   top: 0;
   font-size: 1.1em;
}
.counter h3::before{
   content: attr(data-current) 'h';
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   color: var(--fg, black);
   padding-inline: .25em;
}
.counter h3::after{
   content: attr(data-new) 'h';
   display: block;
   position: absolute;
   top: calc(-100% * var(--dir, -1));
   left: 0;
   color: var(--fg, black);
   padding-inline: .25em;
}
.animate-counter h3::after{
   top: 0;
   transition: top 500ms;
   transition-delay: inherit;
}
.animate-counter h3::before{
   top: calc(-100% * var(--dir, -1));
   transition: top 500ms;
   transition-delay: inherit;
}

.proceedBtn {
   background: #7b61ff;
   color: white;
   padding: .75rem 2rem;
   border-radius: 2em;
   margin: 0 .75em 2em 0;
   overflow: hidden;
   white-space: nowrap;
   position: absolute;
   bottom: 0;
   right: 0;
   font-size: .9em;
   font-weight: 500;
   letter-spacing: .01em;
   opacity: .3;
   cursor: default;
   transition: opacity 500ms;
   display: none;
}
.proceedBtn[active] {
   opacity: 1;
   cursor: pointer;
}

.list-body {
   overflow-y: scroll;
   overflow-x: hidden;
}

.checkbox-container {
   display: flex;
   cursor: pointer;
   align-content: center;
}
.checkbox-input {
   display: none;
}
.custom-checkbox {
   display: flex;
   width: 1rem;
   height: 1rem;
   background-color: transparent;
   color: transparent;
   position: relative;
   cursor: pointer;
   border: #7b61ff 3px solid;
   border-radius: .25em;
   align-items: center;
   justify-content: center;
   transition: background-color 200ms, color 200ms;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.checkbox-label {
   display: inline-block;
   margin-left: .5em;
   color: #000;
   font-weight: 500;
   font-size: .9em;
}
.checkbox-input:checked + .custom-checkbox {
   color: white;
   background-color: #7b61ff;
}
.checkbox-label::after {
   content: attr(data-time) ' hours';
   padding: 0 1em;
   color: #949ca8;
   font-weight: 400;
}
.checkbox-input:disabled + .custom-checkbox {
   background: #BDB0FF;
   border-color: #BDB0FF;
}

.featuresList div h6 {
   font-weight: 800;
}


.feature-qy::after{
   content: '+' attr(data-time) 'h';
   color: #949ca8;
   font-weight: 750;
}
.feature-q {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: transparent;
   border: #949ca8 2px solid;
   text-align: left;
   width: 11rem;
   height: 6em;
   border-radius: 1em;
   padding: 0 2em;
   font-weight: 700;
   transition: border 300ms;
}
.feature-q:hover, .radio-container:hover {
   border-color: #7b61ff;
}
.feature-q span{
   font-size: 1.25em;
}
div:not(.list-body):not(:first-child):not(:last-child) > .list-body:not([done]) > :nth-child(n+2){
   display: none !important;
}
div:not(.list-body):not(:first-child):not(:last-child) > .list-body[done] > :nth-child(-n+2) {
   display: none !important;
}

.share-block{
   display: flex;
   justify-content: space-between;
   width: 80%;
   margin-inline: auto;
}
.share-block path {
   transition: all 300ms;
   width: 100%;
   height: 100%;
   fill: #D9DBE0;
}
.share-block svg:hover path {
   fill: #7b61ff;
}
.list-head {
   text-align: left;
   padding: 0 0 1em;
}
.list-head h3 {
   font-weight: 700;
}


.mail-send > :first-child {
   background: #A896FF;
   color: white;
   padding: 4em .5em;
}
.mail-send > :nth-child(2) {
   background: #7b61ff;
   color: white;
   padding: 4em .5em;
}
.col-12 .list-head {
   text-align: center;
}
.mail-send h1 {
   font-weight: 700;
}
.mail-send h4 {
   font-weight: 600;
}
.mail-send .times h5 {
   font-size: 1.25rem;
   font-weight: 400;
   opacity: .7;
}
.mail-send input {
   color: #f7f7f7;
   background: transparent;
   border: none;
   border-bottom: 2px solid #f7f7f766;
   outline: none;
   padding: .25rem .75rem;
   width: 70%;
   /*margin: 1rem 0;*/
   line-height: 1.5;
   font-weight: 500;
   transition: all 300ms;
}
.mail-send input:focus-visible {
   color: white;
   border-bottom: 2px solid #ffffffff;
}
.mail-send p {
   text-align: left;
   margin: 1.5rem 15% 0;
   font-size: .8em;
}
.mail-send button {
   display: block;
   position: relative;
   margin: 3rem auto;
   padding: 1rem 3rem;
   border-radius: 2em;
   background: white;
   color: #7b61ff;
   font-weight: 700;
   transition: all 200ms;
   z-index: 5;
}
.mail-send button:not([animate]):hover {
   background: #00000033;
   color: white;
}
.mail-send button[animate] {
   color: transparent;
   background: transparent;

}
.mail-send button:after {
   position: absolute;
   inset: 0;
   padding: inherit;
   content: 'Sending...';
   z-index: -1;
   color: transparent;
}
.mail-send button[animate]:after {
   color: white;
}
.mail-send label {
   position: absolute;
}
#err-line {
   text-align: center;
   margin-top: -1rem;
}
#err-line[animate] {
   animation-name: shakeText;
   animation-iteration-count: 1;
   animation-duration: 700ms;
}
@keyframes shakeText {
   0%, 100% {transform: translateX(0);}
   10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
   20%, 40%, 60%, 80% {transform: translateX(10px);}
}