:root {
    font-size: 1vw;
    --gray1: #F2F2F2;
    --gray2: #D1D1D1;
    --gray3: #999999;
    --gray4: #898786;
    --gray5: #686868;        
    --gray6: #2A2F33;
    --blue7: #5B6D76;  
    --blue8: #202A37;  
    --blue9: #202A36;  
    --orange: #F68B28;
    --px16: 0.83rem;
    --px18: 0.9375rem;
    --px24: 1.25rem;
    --px32: 1.66rem;
    --px34: 1.77rem; 
    --px40: 2.08rem; 
    --px48: 2.5rem;
    --px64: 3.33rem; 
    --px72: 3.75rem; 
    --px80: 4.16rem;
    --px160: 8.33rem; 
    --px1024: 53.3rem;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/* FONTS */
@font-face {
    font-family: Montserratarm-900;
    src: url("/font/Montserratarm-Black.otf") format("opentype");
}
@font-face {
    font-family: Montserratarm-800;
    src: url("/font/Montserratarm-ExtraBold.otf") format("opentype");
}
@font-face {
    font-family: Montserratarm-700;
    src: url("/font/Montserratarm-Bold.otf") format("opentype");
}
@font-face {
    font-family: Montserratarm-600;
    src: url("/font/Montserratarm-SemiBold.otf") format("opentype");
}
@font-face {
    font-family: Montserratarm-500;
    src: url("/font/Montserratarm-Medium.otf") format("opentype");
}
@font-face {
    font-family: Montserratarm-400;
    src: url("/font/Montserratarm-Regular.otf") format("opentype");
}
@font-face {
    font-family: Montserratarm-300;
    src: url("/font/Montserratarm-Light.otf") format("opentype");
}
@font-face {
    font-family: Montserratarm-200;
    src: url("/font/Montserratarm-ExtraLight.otf") format("opentype");
}
@font-face {
    font-family: Montserratarm-100;
    src: url("/font/Montserratarm-Thin.otf") format("opentype");
}

body {
    color: var(--blue8);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

header {
    background-color: var(--blue9);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100rem;
    z-index: 3;
    top: 0;
}

p {
    font-family: Montserratarm-400;
    font-size: var(--px24);
    letter-spacing: 0.018rem;
    line-height: var(--px32);
    margin: 0;
    margin-bottom: 0.8rem;
}

.small {
    font-family: Montserratarm-400;
    font-size: 0.625rem;
    color: var(--gray3);
    margin-top: 0.416rem;
    line-height: var(--px16);
}
.small o {
    color: var(--orange);
}
.small b {
    color: var(--gray4);
}
.small a {
    text-decoration: none;
}

h1 {
    font-family: Montserratarm-700;
    color: var(--blue8);
    font-size: var(--px64);
    line-height: var(--px72);
    letter-spacing: 0.017rem;
    text-align: left;
    margin: 0;
    margin-bottom: var(--px40);
    width: max-content;
}

h2 {
    font-family: Montserratarm-600;
    font-size: var(--px48);
    color: var(--blue8);
    padding-bottom: var(--px32);
    line-height: var(--px72);
    letter-spacing: 0.018rem;
    text-align: left;
}

h3 {
    font-family: Montserratarm-400;
    font-size: var(--px48);
    color: var(--blue8);
    padding-bottom: var(--px32);
    line-height: var(--px72);
    letter-spacing: 0.018rem;
    margin: 0;
}

h4 {
    font-family: Montserratarm-700;
    font-size: var(--px32);
    color: var(--blue8);
    margin: 0;
    margin-bottom: var(--px16);
    line-height: var(--px40);
    letter-spacing: 0.017rem;
}

h5 {
    font-family: Montserratarm-600;
    font-size: var(--px24);
    color: var(--blue8);
    margin: 0;
    margin-bottom: var(--px16);
    line-height: var(--px40);
    letter-spacing: 0.017rem;
}

.btn {
    border: none;
    font-family: Montserratarm-600;
    display: inline-block;
    background-color: var(--orange);
    color: #000;
    padding: 0.816rem 0;
    width: 100%;
    font-size: var(--px24);
    border-radius: 4rem;
    text-decoration: none;
    transition: background-color 0.3s;
    cursor: pointer;
}

p.small {
    font-size: var(--px18);
    line-height: var(--px32);
}

.header-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    border: none;
    padding: 1.4583rem var(--px160);
}

.logo {
    font-size: 24px;
    font-weight: bold;
    width: 9.863rem;
}

.contact-info {
    display: flex;
    align-items: center;
}

.contact-info a {
    text-decoration: none;
    margin-right: 1.66rem;
    font-size: 0.885416rem;
    font-family: Montserratarm-500;
    color: #000;
    background-color: var(--orange);
    padding: 0.625rem 2.083rem;
    border-radius: 3rem;
    cursor: pointer;
}

.lang-select img {
    width: var(--px24);
}
.lang-select {
    border-radius: 3px;
    font-family: Montserratarm-200;
    display: flex;
}

/*//////////////////////////////////*/
.lang-select-container {
    position: relative;
    width: max-content; /* Adjust width as needed */
    font-family: Montserratarm-400;
}

.lang-select {
    font-family: "Montserratarm-200";
    display: flex;
    align-items: center;
    padding: 0 1.2rem;
    cursor: pointer;
}

.lang-select .selected {
    flex: 1;
}

.lang-select img.arrow {
    width: var(--px24);
    transition: transform 0.3s ease;
}

.lang-options.show {
    display: block;
}
.lang-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.lang-options div {
    padding: 1.2rem;
    cursor: pointer;
    background-color: var(--blue9);
}

.lang-select.open .arrow {
    transform: rotate(180deg);
}

/*//////////////////////////////////*/

.intro-section {
    display: flex;
    justify-content: space-between;
}

.intro-text {
    margin-top: 4.7rem;
    padding-top: 5rem;
    padding-left: 8.3rem;
}

.intro-text h1 {
    font-size: 3.3rem;
    margin: 0;
    padding-bottom: var(--px16);
}

.intro-text p {
    margin: 10px 0;
    padding-bottom: var(--px16);
}

.intro-section img {
    width: 58rem;
    padding-left: var(--px32);
    height: 42rem;
}

.app-section {
    margin: 4.583rem 10rem 0 0;
}
.app-section.user-app {
    margin: 4.58rem 0 0 var(--px160);
}
.user-app .app-details > img {
    margin: 0;
    max-width: 62.083rem;
}

.app-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-details > img {
    max-width: var(--px1024);
    margin-right: var(--px80);
}

.user-app .app-text {
    margin-right: -3rem;
}

.app-text h2 {
    font-size: 28px;
    margin: 0;
}

.app-buttons {
    margin-top: var(--px40);
}

.app-buttons a {
    display: inline-block;
    margin-right: 10px;
    text-decoration: none;
    border-radius: 5px;
}

.app-buttons img {
    width: 9.375rem;
}
.steps-section {
    text-align: center;
    margin-top: 10.416rem;
    margin-left: var(--px160);
}

.steps-section h2 {
    margin-bottom: 20px;
}

.steps {
    display: flex;
    justify-content: start;
    column-gap: var(--px80);
    margin: 2.083rem 13.85rem 0;
}

img.step-cyrcle {
    opacity: 0;
    width: 6.875rem;
    z-index: 2;
}

img.step-cyrcle.anim {
    animation: stepCyrcleAnim .001s ease-in-out 1;
    animation-fill-mode: forwards;
    animation-delay: .5s;
}

.number-cont {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.steps .numbers {
    margin-top: 4.010416rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.steps .numbers .number {
    width: 5.2083rem;
    height: 5.2083rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: var(--blue8);
    color: var(--orange);
    font-size: var(--px48);
    font-family: Montserratarm-500;
    margin: .8rem;
}

.steps .numbers .number.movable {
    position: absolute;
    transform: translateY(-100%);
    opacity: 0;
}

.steps .numbers .number.movable.anim {
    animation: stepAnim .7s ease-in-out 1;
    animation-delay: .5s;
    animation-fill-mode: forwards;
}

.steps .numbers .number .number-text {
    opacity: 0;
}

.step_walker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.steps .numbers .number.anim .number-text {
    animation: stepTextAnim .7s ease-in-out;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

.steps .numbers .line-cont {
    width: 0.45rem;
    height: 12.0625rem;
    margin: var(--px24);
}

.steps .numbers .line-cont .line {
    height: 0rem;
    background: var(--orange);
    border-radius: 0.45rem;
}
.steps .numbers .line-cont .line.anim {
    animation: stepLineAnim .5s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes stepTextAnim {
    0%{ opacity: 0;}
    100%{ opacity: 1;}
}

@keyframes stepLineAnim {
    0%{ height: 0rem;}
    100%{ height: 12.0625rem;}
}

@keyframes stepCyrcleAnim {
    0%{ opacity: 0;}
    100%{ opacity: 1;}
}

@keyframes stepAnim {
    0%{transform:translateY(-100%); opacity: 0;}
    100%{transform:translateY(0%); opacity: 1;}
}

.steps .content {
    display: flex;
    margin-top: 4.010416rem;
    height: 56.4583rem;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.steps .imgs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 60.46875rem;
    align-items: start;
}
.steps .imgs > img {
    max-height: 18.22916rem;
    width: auto;
    opacity: 0;
}
.steps .imgs > img:first-child {
    opacity: 1;
}
.steps .imgs > img.anim {
    animation: imgAnim .7s ease-in-out 1;
    animation-delay: 1.3s;
    animation-fill-mode: forwards;
}
.steps .imgs > img:last-child {
    margin-top: 4.427083rem;
}

.steps .content p {
    font-family: Montserratarm-500;
}

.step-text {
    text-align: left;
    max-width: 20.83rem;
    height: max-content;
    margin-bottom: 10.97916rem;
    transform: translateX(-100%);
}

.step-text:first-child {
    transform: translateX(0%);
}

.step-text.moved {
    animation: contAnim .7s ease-in-out 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes contAnim {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0%);}
}
@keyframes imgAnim {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.steps-section.bottom .step-text {
    margin-bottom: 4.97916rem;
}

.step h3 {
    font-size: 36px;
    margin: 0;
}

.pricing-section {
    text-align: center;
    margin: 0 8.28125rem;
    display: flex;
    flex-direction: column;
    justify-content: end;
    margin-top: 13.02083rem;
}

.pricing-section h2 {
    margin-bottom: 20px;
}

.pricing-plans {
    display: flex;
    justify-content: center;
    gap:  var(--px80);
}

.plan {
    background-color: #ffffff;
    border-radius: 1.8rem;
    width: 30.625rem;
    text-align: center;
    position: relative;
    font-family: 'Montserratarm-500';
    border: 0.05rem solid var(--blue7);
}
.plan .header {
    background-color: #2f3842;
    color: white;
    padding: var(--px48) var(--px48) var(--px40);
    border-radius: 1.8rem 1.8rem 0 0;
    font-size: var(--px40);
    line-height: var(--px32);
    text-align: left;
}

.plan .discount {
    background-color: #f8a14f;
    padding: var(--px16)  var(--px24);
    position: absolute;
    border-radius: 0 1.8rem 0 1.8rem;
    top: 0;
    right: 0;
    line-height: var(--px40);
    font-size: var(--px32);
    color: #000;
}

.plan .price {
    margin: 20px 0;
    font-size: 1.875rem;
    color: #333;
    text-align: left;
    margin: 0;
    margin-bottom: var(--px32);
}
.plan-body {
    padding: 2.916rem 2.5rem;
}

.features-title {
    text-align: left;
    font-size: var(--px24);
}
.plan .plan-features {
    text-align: left;
    margin-bottom: 20px;
    font-size: var(--px24);
    padding-left: 3.5rem;
    margin-bottom: var(--px48);
}
.plan .plan-features li {
    margin: 1rem 0;
    line-height: var(--px40);
}

.features-section {
    background-color: #fff;
    text-align: center;
    margin: 10.416rem var(--px160);
}

.features-section h2 {
    margin-bottom: 20px;
}

.features {
    display: grid;
    justify-content: center;
    grid-template-columns: 24rem 26rem 22rem;
    column-gap: 5.2rem;
}

.features img:nth-child(1) {
    width: 15.625rem;
}
.features img:nth-child(2) {
    width: 21.875rem;
}
.features img:nth-child(3) {
    width: 17.083rem;
}
.features img {
        margin: auto;
}
.feature {
    margin: 0 10px;
    text-align: left;
}
.feature h5 {
    text-align: center;
    line-height: var(--32);
    margin: var(--px24) 0 var(--px16);
}

.contact-section {
    padding: 0 var(--px160);
    display: flex;
    justify-content: start;
    align-items: center;
}
.contact-section img {
    width: 35.83rem;
    margin-top: -1.97916rem;
}
.contact-section .btn {
    width: 100%;
}
.contact-section .form {
    max-width: 31.0416rem;
    margin-right: 5.8rem;
}

.contact-section h2 {
    margin-bottom: 10px;
}

.contact-section form {
    width: 24.53125rem;
    margin-bottom: 3.64583rem;
    display: flex;
    flex-direction: column;
}
.contact-section form label {
    font-family: Montserratarm-400;
    font-size: var(--px16);
    padding-left: var(--px16);
    line-height: var(--px24);
}
.contact-section form .phone-code {
    display: inherit;
    font-family: 'Montserratarm-400';
    margin: -3.2rem 0 3rem var(--px16);
}

.contact-section input, 
.contact-section textarea {
    width: -webkit-fill-available;
    padding: var(--px16);
    margin: 0.416rem 0 var(--px24);
    border: 0.05rem solid var(--gray2);
    background: var(--gray1);
    color: var(--gray5);
    border-radius: .7rem;
    font-size: var(--px18);
}

.contact-section input.phone {
    padding-left: 4rem;
}


.footer {
    background-color: #3a3a3a;
    color: white;
    padding: 4.0625rem var(--px160) 1.4583rem;
    width: -webkit-fill-available;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: -webkit-fill-available;
    margin: 0 auto;
}

.footer-left,  .footer-center,  .footer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-left {
    text-align: left;
}

.footer-left .logo {
    max-width: 11.09375rem;
    margin-bottom: 1.77083rem;
}

.footer-left .company-name {
    font-size: 24px;
    margin-top: 10px;
}

.footer-center {
    align-items: start;
    gap: 0.9rem;
    margin-left: -1rem;
}

.footer-center {}
.footer-center a {
    color: #fff;
    text-decoration: none;
    font-size: var(--px16);
}

.footer-center p {margin-bottom: 0;display: flex;align-items: center;font-family: Montserratarm-100;gap: .5rem;}

.footer-center p img {
    width: var(--px24);
}

.footer-right {
    text-align: right;
    align-items: end;
    gap: var(--px34);
}

.footer-right p {line-height: var(--px24);margin: 0;font-size: var(--px32);}

.footer-right .social-icons {
    display: flex;
    gap: var(--px40);
}

.footer-right .social-icons a {
    display: inline-block;
    margin: 0;
}

.footer-right .social-icons img {
    width: var(--px24);
    height: auto;
}

.footer-bottom {
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    display: flex;
    justify-content: end;
    gap:  var(--px160);
}

.footer-bottom p {
    font-size: var(--px16);
    font-family: Montserratarm-100;
    margin: 0;
}

.footer-bottom a {
    color: inherit;
    text-decoration: none;
}

.fadein_text {
    opacity: 0;
    transition: 1s ease-in-out;
}
.fadein{
    overflow: hidden;
}
.fadein span {
    display: inline-block;
    opacity: 0;
    transform:translateY(100%);
    transition: 1s ease-in-out;
    text-align: center;
}
.btmUp_ani{
    animation: btmUp .7s ease-in-out 1;
    animation-fill-mode: forwards;
}
@keyframes btmUp{
    0%{transform:translateY(100%); opacity: 0;}
    100%{transform:translateY(0); opacity: 1;}
}