@import url('https://fonts.googleapis.com/css2?family=Finger+Paint&display=swap');
@font-face {
    font-family: 'Mangueira';
    src: url('../../assets/fonts/Mangueira-Regular.woff2') format('woff2'),
        url('../../assets/fonts/Mangueira-Regular.woff') format('woff');
    font-weight: normal;
    font-style: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Mangueira';
    src: url('../../assets/fonts/Mangueira-Medium.woff2') format('woff2'),
        url('../../assets/fonts/Mangueira-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mangueira';
    src: url('../../assets/fonts/Mangueira-SemiBold.woff2') format('woff2'),
        url('../../assets/fonts/Mangueira-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mangueira';
    src: url('../../assets/fonts/Mangueira-Bold.woff2') format('woff2'),
        url('../../assets/fonts/Mangueira-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Mangueira';
    src: url('../../assets/fonts/Mangueira-Black.woff2') format('woff2'),
        url('../../assets/fonts/Mangueira-Black.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
html:root{
    font-size: clamp(8.5px, 1.11vw, 18.6px);
    scroll-behavior: smooth;
}
h1, h2, h3, h4, h5, h6, p, li{
    margin: 0;
    font-family: Mangueira, sans-serif;
    line-height: 100%;
}
main{
    background-color: #000;
}
.hero-wrap{
    background: url('images/stars1.webp') no-repeat center top / cover;
}
.hero{
    max-width: 90rem;
    width: 100%;
    margin: 0 auto;
    padding: 6rem 11.75rem;
}
.hero h1{
    color: #FFF;
    font-size: 4.0625rem;
    font-weight: 800;
    line-height: 108%;
    letter-spacing: -1.6px;
    text-transform: capitalize;
    margin-bottom: 3rem;    
}
.hero h1 strong{
    background: linear-gradient(270deg, #9CFCD7 0%, #7A7EED 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.calc{
    display: flex;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(12px);
    overflow: hidden;
}
.calc-input{
    width: 33%;
    padding: 2rem 2rem 1.5rem;
}
.calc-input:first-child{
    border-right: 1px solid #303030;
}
.calc-input label{
    color: rgba(255, 255, 255, 0.90);
    font-family: "Mangueira", sans-serif;
    font-size: max(0.875rem, 12px);
    font-weight: 600;
    line-height: 142%;
    letter-spacing: 0.28px;
    margin-bottom: 0.875rem;
}
.input-element{
    position: relative;
    margin-bottom: 1.5rem;
}
.input-element::before{
    content: '$';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 1rem;    
    color: #FFF;
    font-family: "Mangueira", sans-serif;
    font-size: max(0.875rem, 12px);
    line-height: 100%;
    height: max(0.875rem, 12px);
    padding-top: 0.1875rem;
    font-weight: 700;
}
.input-element input{
    width: 100%;
    height: 2.25rem;
    color: #FFF;
    font-family: "Mangueira", sans-serif;
    font-size: max(0.875rem, 12px);
    font-weight: 500;
    line-height: 100%;
    padding: 1.25rem 1rem 1.125rem 2.25rem;
    border-radius: 0.5rem;
    background: rgba(248, 248, 250, 0.02);
    border: 1px solid #F8F8FA50;
}
.input-element input::placeholder{
    opacity: 1;
    color: #FFF;
}
.calc-output{
    flex-grow: 1;
    padding: 2rem 2rem 1.5rem;
    /*background: rgba(255, 255, 255, 0.08);*/
    background-color: #303030;
}
.calc-btns{
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
#calc-calculate{
    border-radius: 99px;
    background: linear-gradient(270deg, #9CFCD7 0%, #7A7EED 100%);
    padding: 0.875rem 1.875rem 0.625rem;
    color: #000;
    font-family: "Mangueira", sans-serif;
    font-size: max(0.875rem, 12px);
    font-weight: 700;
    line-height: 66%;
    display: flex;
    width: fit-content;
    height: 2.125rem;
}
#calc-calculate:hover{
    background: linear-gradient(270deg, #7A7EED 0%, #9CFCD7 100%);
}
#calc-reset{
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.16);
    padding: 0.5rem 1rem;    
    display: flex;
    align-items: center;
    width: fit-content;
    height: 2.125rem;
}
.calc-result{
    border-radius: 1rem;
    /*background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);*/
    background-color: #303030;
    padding: 2.25rem 2rem;
    margin-bottom: 1rem;
}
.calc-result h4{
    color: #FFF;
    text-align: center;
    font-size: max(1.125rem, 16px);
    font-weight: 600;
    line-height: 134%;
    letter-spacing: -0.36px;
    margin-bottom: 1.5rem;
}
.calc-result h3{
    text-align: center;
    font-size: 2.1875rem;
    font-weight: 700;
    line-height: 182%;
    letter-spacing: -2.1px;
    text-transform: capitalize;
    background: linear-gradient(270deg, #9CFCD7 0%, #7A7EED 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.calc-details p{
    color: rgba(255, 255, 255, 0.80);
    font-size: max(0.875rem, 12px);
    font-weight: 500;
    line-height: 142%;
    opacity: 0.5;
    margin: 0.625rem 0 0.25rem;
}
.calc-details p#assets-total,
.calc-details p#debts-total,
.calc-details p#net-worth{
    color: #FFF;
    font-weight: 600;
    line-height: 228%;
    text-transform: capitalize;
    opacity: 1;
    margin: 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.result-wrap{
    /*background: #090909;*/
    background: url('images/stars1.webp') repeat center top / auto;
}
.result{
    max-width: 90rem;
    width: 100%;
    margin: 0 auto;
    padding: 3.5rem 9rem;
}
.result-header{
    padding: 0 3rem 2rem;
}
.result-header h2{
    color: #FFF;
    font-size: 2.8125rem;
    font-weight: 600;
    line-height: 112%;
    letter-spacing: -0.8px;
    margin-bottom: 1.75rem;
}
.result-header h2 strong{
    /*background: linear-gradient(89deg, #797EF5 5.63%, rgba(120, 255, 213, 0.80) 66.38%, #63AFC8 77.38%);*/
    background: linear-gradient(270deg, #9CFCD7 0%, #7A7EED 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}
.result-desc{
    color: #FFF;
    font-size: max(1rem, 14px);
    font-weight: 500;
    line-height: 150%;
    opacity: 0.7;
}
.white-boxes{
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 3.5rem;
}
.white-box{
    width: calc(33% - 1rem / 3);
    border-radius: 1rem;
    border-top: 6px solid transparent;
    background: linear-gradient(180deg, #F7F8FC 0.05%, #FFF 65.27%) padding-box, 
                linear-gradient(270deg, #5AE4E6 18.62%, #6D6AF7 100%) border-box;
    padding: 2rem 1.5rem 3.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wb-icon{
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 99px;
    background: linear-gradient(95deg, #797EF5 14.85%, #63AFC8 127.37%);
    margin-bottom: 1rem;
    position: relative;
}
.wb-icon::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1.375rem;
    height: 1.5625rem;    
    background: url('images/arrow.svg') no-repeat center / 1.375rem 1.5625rem;
}
.white-box.wb-2 .wb-icon::after{
    transform: rotate(-90deg);
}
.white-box.wb-1 .wb-icon::after{
    width: 1.875rem;
    height: 0.1875rem;
    background: #FFF;
}
.white-box h3{
    color: #000;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 134%;
    margin-bottom: 3rem;
}
.white-box ul{
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.white-box li{
    color: #000;
    font-family: "Mangueira", sans-serif;
    font-size: max(0.875rem, 12px);
    font-weight: 500;
    line-height: 1.25rem;
    margin-bottom: 1.125rem;
    position: relative;
    padding: 0 0 0 1.75rem;
}
.white-box li:last-child{
    margin-bottom: 0;
}
.white-box li::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    background: url('images/li-arrow.svg') no-repeat center / contain;
}
.black-boxes{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0 5.75rem;
}
.black-box{
    border-radius: 1.5rem;
    /*background: #000;
    backdrop-filter: blur(5px);*/
    padding: 3.75rem 5rem 2rem;
}
.black-box h3{
    color: rgba(255, 255, 255, 0.90);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 108%;
    letter-spacing: -0.48px;
    margin-bottom: 2.5rem;
}
.bb-desc{
    margin-bottom: 5rem;
}
.bb-desc p{
    color: #fff;
    font-size: max(1rem, 14px);
    font-weight: 400;
    line-height: 162.5%;
    margin-bottom: 1rem;
}
.bb-desc p:last-child{
    margin-bottom: 0;
}
.bb-desc p a{
    color: #63AFC8;
}
.bb-btn{
    display: flex;
    width: fit-content;
    margin: 0 auto;
    border-radius: 99px;
    background: linear-gradient(270deg, #9CFCD7 0%, #7A7EED 100%);
    padding: 1.0625rem 1.5rem 0.8125rem;
    color: #000;
    font-family: "Mangueira", sans-serif;
    font-size: max(0.875rem, 12px);
    font-weight: 600;
    line-height: 100%
}
.bb-btn:hover{
    background: linear-gradient(270deg, #7A7EED 0%, #9CFCD7 100%);
}
.black-box .bb-btn{
    flex-wrap: wrap;
    max-width: 10.3125rem;
    text-align: center;
    line-height: 116%;
}
.how-to-wrap{
    padding: 0 0.625rem;
}
.how-to{
    max-width: 90rem;
    width: 100%;
    margin: 0 auto;
    border-radius: 2rem;
    background: #F0F1F5;
    padding: 6.25rem 8.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ht-above-title,
.hb-above-title{
    border-radius: 99px;
    background: rgba(49, 49, 49, 0.12);
    padding: 0.625rem 0.5rem 0.375rem 1.625rem;
    color: #000;
    font-size: max(0.625rem, 8px);
    letter-spacing: 0.2px;
    text-transform: uppercase;
    margin-bottom: 2rem;
    position: relative;
}
.ht-above-title::before,
.hb-above-title::before{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0.5rem;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 99px;
    background: linear-gradient(89deg, #5AE4E6 -26.84%, #6D6AF7 82.09%);
}
.how-to h2{
    color: #000;
    text-align: center;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -1.6px;
    margin-bottom: 1.75rem;
}
p.ht-desc{
    margin-bottom: 3.75rem;
    max-width: 45.625rem;
}
p.ht-desc{
    color: #000;
    text-align: center;
    font-size: max(1rem, 14px);
    font-weight: 500;
    line-height: 150%;
    opacity: 0.7;
}
.ht-card{
    border-radius: 1rem;
    background: #FFF;
    padding: 2.25rem 2.25rem 1.5rem 3.5rem;
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    margin-bottom: 1rem;
}
.ht-card:last-child{
    margin-bottom: 0;
}
.ht-card-left{
    width: 27.5rem;
    padding-top: 1.125rem;
}
.ht-card h3{
    color: #000;
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 192%;
    letter-spacing: -0.5px;
    margin-bottom: 2.5rem;
}
.htc-desc{
    margin-bottom: 1.5rem;
}
.htc-desc p{
    color: #000;
    font-size: max(1rem, 14px);
    font-weight: 400;
    line-height: 156%;
    margin-bottom: 1rem;
}
.htc-desc p strong{
    font-weight: 700;
    letter-spacing: 0.32px;
}
.htc-features{
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0 0 0 0.75rem;
}
.htc-features li{
    color: #000;
    font-family: "Mangueira", sans-serif;
    font-size: max(0.875rem, 12px);
    font-weight: 400;
    line-height: 1.875rem;
    letter-spacing: 0.28px;
    margin-bottom: 0.25rem;
    position: relative;
    padding: 0 0 0 2.3125rem;
}
.htc-features li::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1.8125rem;
    height: 1.875rem;
    background: url('images/li.svg') no-repeat center / contain;
}
.htc-btn{
    border-radius: 99px;
    background: #000;
    padding: 0.875rem 1.5rem 0.625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    color: #FFF;
    font-family: "Mangueira", sans-serif;
    font-size: max(1rem, 14px);
    font-weight: 600;
    line-height: 100%;
    width: fit-content;
    transition: background 0.3s ease;
}
.htc-btn:hover{
    background: #303030;
    animation: bounce 0.5s ease;
}
@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-8px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}
.htc-btn svg{
    position: relative;
    top: -0.0625rem;
}
.ht-card-right{
    flex-grow: 1;
    width: 35.125rem;
    border-radius: 1rem;
    background: #000;
    backdrop-filter: blur(12px);
    padding: 2rem;
}
.htcr-header{
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-bottom: 2.75rem;
}
.htc-image{
    width: 4.0625rem;
    height: 4.0625rem;
    border-radius: 99px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.htc-name{
    color: #FFF;
    font-size: max(1.25rem, 18px);
    font-weight: 700;
    line-height: 120%;
}
.htc-age{
    font-weight: 400;
    letter-spacing: -0.4px;
}
.htcr-table{
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #FFF;
    margin-bottom: 1.25rem;
}
.htcr-row{
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 0.75rem;
}
.htcr-row:last-child{
    margin-bottom: 0;
}
.ht-row-title p{
    color: #FFF;
    font-size: max(1rem, 14px);
    font-weight: 500;
    line-height: 125%;
    opacity: 0.8;
}
.ht-row-title p + p{
    font-size: max(0.75rem, 10px);
    line-height: 150%;
}
.ht-row-value p{
    color: #FFF;
    font-size: max(1rem, 14px);
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 0.32px;
    text-transform: capitalize;
}
.ht-row-value p strong{
    color:  #9CFCD7;
    font-weight: 500;
}
.ht-card-right h4{
    color: rgba(255, 255, 255, 0.90);
    font-size: max(1.125rem, 16px);
    font-weight: 600;
    line-height: 112%;
    margin-bottom: 1.5rem;
}
.htcr-result p,
.htcr-result li{
    color: #FFF;
    font-size: max(0.875rem, 12px);
    font-weight: 400;
    line-height: 172%;
    margin-bottom: 1rem;
}
.htcr-result li{
    margin-bottom: 0.5rem;
}
.diff-wrap{
    background: url('images/stars1.webp') no-repeat center top / cover;
}
.diff{
    width: 72.5rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6.25rem 0 3.75rem;
}
.diff h2{
    max-width: 50rem;
    color: #FFF;
    text-align: center;
    font-size: 3rem;
    font-weight: 700;
    line-height: 115%;
    letter-spacing: -1.92px;
    margin-bottom: 2.5rem;
}
.dif-table{
    display: flex;
    flex-wrap: wrap;
}
.dif-first-empty,
.dif-first{
    width: 31%;
}
.dif-second-title,
.dif-third-title,
.dif-second,
.dif-third{
    width: 34.2%;
}
.dif-second-title,
.dif-second{
    margin-right: 0.6%;
}
.dif-second-title,
.dif-third-title{
    border-radius: 1rem 1rem 0 0;
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(12px);
    padding: 1.375rem;
}
.dif-second-title h3,
.dif-third-title h3{
    color: #FFF;
    text-align: center;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 110%;
}
.dif-third-title{
    background: linear-gradient(90deg, rgba(121, 126, 245, 0.80) 34.94%, rgba(99, 175, 200, 0.80) 48.12%, rgba(120, 255, 213, 0.80) 70.89%);
}
.dif-first{
    background: #1a1a1a;
    padding: 2rem;
    border-bottom: 1px solid #515151;
}
.dif-third-title + div.dif-first.df-1{
    border-top-left-radius: 1rem;
}
div.dif-first:nth-last-child(3){
    border-bottom-left-radius: 1rem;
    border-bottom: none;
}
.dif-first h4{
    color: #FFF;
    font-family: "Finger Paint", sans-serif;
    font-size: max(1.125rem, 16px);
    font-weight: 400;
    line-height: 134%;
    letter-spacing: 0.72px;
}
.dif-second::after{
    content: '';
    position: absolute;
    top: 0;    
    right: -20%;
    width: 20%;
    height: 100%;
    background: #1a1a1a;    
    z-index: 1;
}
.dif-second,
.dif-third{
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: 1.25rem 2rem;
}
.dif-third:last-child{
    border-bottom-right-radius: 1rem;
}
.dif-second h4,
.dif-third h4{
    display: none;
}
.dif-second p,
.dif-third p{
    color: #FFF;
    font-size: max(1rem, 14px);
    font-weight: 400;
    line-height: 150%;
}
.dif-second.df-1{
    background: #272727;
}
.dif-second.df-2{
    background: #232323;
}
.dif-second.df-0{
    background: #2c2c2c;
}
.dif-third.df-1{
    background: #414141;
}
.dif-third.df-0{
    background: #393939;
}
.app-wrap{
    background: url('images/stars1.webp') no-repeat center top / cover;
}
.app{
    max-width: 90rem;
    width: 100%;
    margin: 0 auto;
    padding: 6.25rem 29rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.app h2{
    color: #FFF;
    text-align: center;
    font-size: 2.8125rem;
    font-weight: 700;
    line-height: 112%;
    letter-spacing: -1.8px;
    margin-bottom: 1.75rem;
}
.app-description{
    color: #FFF;
    text-align: center;
    font-size: max(1rem, 14px);
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 1.75rem;
    max-width: 24.25rem;
}
.app-links{
    height: 2.625rem;
    width: 19.375rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 3.75rem;
}
.app-links a{    
    width: calc(50% - 0.375rem);
    height: 100%;    
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.google-play{
    background-image: url('images/google-play2.png');
}
.app-store{
    background-image: url('images/app-store2.png');
}
.app-img{
    margin-top: 3.75rem;
    width: 31.875rem;
    height: 29.8125rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.reviews{
    width: 100%;
    overflow: hidden;
    padding-top: 6.25rem;
}
.reviews-line{
    display: flex;
    align-items: stretch;
    width: max-content;
    animation: scroll 60s linear infinite;   
}
@keyframes scroll{
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.review{
    width: 23.25rem;
    border-radius: 1rem;
    border: 1px solid #9CFCD7;
    padding: 2rem 1.5rem;
    margin-right: 3rem;
}
.review-top{
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}
.review-img{
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 99px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.review-top-right h4{
    color: #FFF;
    font-size: max(1.25rem, 18px);
    font-weight: 700;
    letter-spacing: -0.2px;
    text-transform: capitalize;
    margin-bottom: 0.625rem;
}
.review-age{
    color: #FFF;
    font-size: max(0.875rem, 12px);
    font-weight: 500;
    letter-spacing: 0.28px;
    text-transform: capitalize;
    opacity: 0.6;
}
.review-rating{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}
.review-rating > p{
    padding-top: 0.125rem;
    color: #FFF;
    font-size: max(0.875rem, 12px);
    font-weight: 700;
    letter-spacing: 0.28px;
    text-transform: uppercase;
}
.review-stars{
    position: relative;
    width: 6.625rem;
    height: 1rem;
    overflow: hidden;
}
.review-stars-empty,
.review-stars-fill{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 10;
}
.review-stars-fill{
    z-index: 20;
    overflow: hidden;
}
.review-stars-empty svg,
.review-stars-fill svg{
    min-width: 1.125rem;   
    width: 1.125rem;
    height: 1rem;
}
.review-text p{
    color: #FFF;
    font-size: max(1rem, 14px);
    font-weight: 500;
    line-height: 150%;
    opacity: 0.7;
}
.reviews .bb-btn{
    display: none;
}
.exp-wrap{
    padding: 11.75rem 2rem;
}
.exp{
    max-width: 71.25rem;
    width: 100%;
    height: 28.5rem;
    margin: 0 auto;
    padding: 3rem 3.75rem 1rem;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain;
}
.exp-left{
    width: 29.375rem;
}
.exp-left h2{
    color: #FFF;
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 160%;
    letter-spacing: -1.8px;
    margin-bottom: 2.5rem;
}
.exp-description{
    margin-bottom: 3.5rem;
}
.exp-description p{
    color: #FFF;
    font-size: max(1rem, 14px);
    font-weight: 500;
    line-height: 162%;
    margin-bottom: 1.5rem;
}
.exp-description p:last-child{
    margin-bottom: 0;
}
.exp-left .bb-btn{
    margin-left: 0;
}
.home-blog{
    max-width: 90rem;    
    width: 100%;
    margin: 0 auto;    
    padding: 0 8.75rem 6.25rem;
}
.hb-above-title{
    width: fit-content;
    background: #313131;
    color: #FFF;
}
.home-blog h2{
    color: #FFF;
    font-size: 3.75rem;
    font-weight: 800;
    line-height: 107%;
    letter-spacing: -3.6px;
    text-transform: capitalize;
    margin-bottom: 2rem;
}
.hb-description{
    width: 28.875rem;
    margin-bottom: 3.75rem;
}
.hb-description p{
    color: #FFF;
    font-size: max(1rem, 14px);
    font-weight: 500;
    line-height: 150%;
    opacity: 0.7;
}
.hb-posts{
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.hb-first-post{
    min-width: 46.5rem;
    min-height: 26.75rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.10);
    overflow: hidden;
    display: flex;
    flex-grow: 1;
}
.hbf-img{
    min-width: 24.125rem;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    flex-grow: 1;
}
.hbf-right{
    padding: 2rem;
    display: flex;
    flex-direction: column;    
}
.hbf-date,
.hb-date{
    color: #BCBCC1;
    font-size: max(1rem, 14px);
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 1.25rem;
}
.hbf-right h3{
    color: #FFF;
    font-size: 2rem;
    font-weight: 600;
    line-height: 88%;
}
.hbf-view-more{
    margin-top: auto;
    color: #FFF;
    font-size: max(1rem, 14px);
    font-weight: 700;
    line-height: 163%;
    gap: 0.625rem;
    display: flex;
    align-items: center;
}
.hb-right-posts{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}
.hb-post{
    height: calc((100% - 2rem) / 3);
    width: 100%;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.10);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}
.hb-date{
    margin-bottom: 0;
}
.hb-post h3{
    color: #FFF;
    font-size: max(1.25rem, 18px);
    font-weight: 600;
    line-height: 120%;
}
/*Home Footer*/
.home-footer{
    background: #070707;
    padding: 5.625rem 8.75rem 5.875rem;    
}
.hf-top{
    margin-bottom: 3rem;
    padding-right: 27.875rem;
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 19.25rem auto;
    background-image: url("../../assets/img/home-footer-bg.webp");
}
.hf-top > h2{
    color: #FFF;
    font-size: 6.25rem;
    font-weight: 800;
    letter-spacing: -4px;
    text-transform: capitalize;
    margin-bottom: 2rem;
}
.hft-desc{
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 134%;
    letter-spacing: -0.24px;
    margin-bottom: 2.5rem;
}
.hf-form{
    width: 32.9375rem;
}
.hf-form form{
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 0.625rem;
}
.hf-form .gform_wrapper .gfield{
  margin: 0;
}
.hf-form .gform_wrapper .gfield label{
  display: none;
}
.hf-form .gform_wrapper form .gfield input[type="email"]{
  border-radius: 0.75rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  padding: 1.125rem 1.25rem 0.875rem;
  font-size: max(0.875rem, 12px);
  font-weight: 500;
  line-height: 143%;
  letter-spacing: -0.28px;
  box-shadow: none;
  border: none;
  max-height: max(3rem, 48px);
}
.hf-form .gform_wrapper form .gfield input[type="email"]::placeholder{
  color: #fff;
  opacity: 0.5;
}
.hf-form .gform_wrapper form input[type="submit"]{
  height: 100%;  
  border-radius: 99px;
  background: linear-gradient(270deg, #9CFCD7 0%, #7A7EED 100%);
  border: none;
  padding: 1.125rem 1.5rem 0.875rem;
  color: #000;
  font-family: Mangueira, sans-serif;
  font-size: max(1rem, 12px);
  font-weight: 700;
  line-height: 106%;
  min-width: 0;
  max-height: max(3rem, 48px);
}
.hf-form .gform_wrapper form .gform-footer:hover input[type="submit"]{
  background: linear-gradient(90deg, #9CFCD7 0%, #7A7EED 100%);
}
.hf-form .gform_validation_errors:focus-visible{
  outline: none;
}
.hf-form .gform_confirmation_message{
  color: #fff;
}
.hf-middle{
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}
.hf-middle-left{
    max-width: 21.9375rem;    
}
.hf-middle-left img{
    margin-bottom: 1.5rem;
}
.hf-middle-left > p{
    color: #F5F7FA;
    font-size: max(1.125rem, 16px);
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 1.5rem;
}
.hf-socials{
  display: flex;
  gap: 1.25rem;
}
.hf-socials > a{
  width: 24px;
  height: 24px;
  display: flex;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.hf-facebook{
  background-image: url("../../assets/img/hf-facebook.svg");
}
.hf-instagram{
  background-image: url("../../assets/img/hf-instagram.svg");
}
.hf-linkedin{
  background-image: url("../../assets/img/hf-linkedin.svg");
}
.hf-twitter{
  background-image: url("../../assets/img/hf-twitter.svg");
}
.hf-tiktok{
  background-image: url("../../assets/img/hf-tiktok.svg");
}
.hf-menus{
    display: flex;
}
.hf-menu{
    width: 12.5rem;
    padding-right: 2rem;
}
.hf-menu-title{
    color: #FFF;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.4px;
    margin-bottom: 2rem;
}
.hf-menu ul.menu{
  list-style: none;
  margin: 0;
  padding: 0;
}
.hf-menu ul.menu li{
  margin-bottom: 0.875rem;
}
.hf-menu ul.menu li a{
  color: #fff;
  opacity: 0.5;
  font-size: max(0.875rem, 12px);
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.28px;
}
.hf-menu ul.menu li a:hover{
  text-decoration: underline;
}
.hf-copyright{
    color: #FFF;
    opacity: 0.7;
    text-align: center;
    font-size: max(1rem, 14px);
    font-weight: 500;
    line-height: 125%;
}
/*Home Footer End*/
@media (max-width: 1439px){ 
    .black-box .bb-btn{
        max-width: 160px;
    }
    .how-to{
        padding: 6.25rem 4rem;
    }
    .ht-card-right {
        width: 41rem;
    }
    .hb-description {
        width: 50rem;
    }
}
@media (max-width: 1023px){
    .hero {
        padding: 6rem 2rem;
    }    
    .ht-row-value p{
        text-align: right;
    }
    .exp {
        max-width: 100%;
        height: 36rem;
    }
    .exp-left {
        width: 42rem;
    }
    /*Home Footer*/
    .hf-menu {
        padding-right: 1rem;
    }
    /*Home Footer End*/
}
@media (max-width: 767px){
    html:root{
        font-size: 16px;
    }
    main, footer{
        overflow-x: hidden;
    }    
    .hero{        
        padding: 72px 32px;
    }
    .hero h1{
        font-size: 40px;
        line-height: 120%;
        margin-bottom: 30px;    
    }
    .calc{
        border-radius: 12px;
        flex-direction: column;
    }
    .calc-input{
        width: 100%;
        padding: 40px 24px;
    }
    .calc-input:first-child{
        border-right: none;
        border-bottom: 1px solid #303030;
    }
    .calc-input:not(:first-child){
        padding-bottom: 16px;
    }
    .input-element{
        margin-bottom: 20px;
    }
    .calc-output{
        padding: 0 24px 24px;
        background-color: transparent;
    }
    .calc-btns{
        margin-bottom: 30px;
    }
    #calc-calculate{
        font-weight: 600;
        justify-content: center;
        width: 160px;
        height: 36px;
    }
    .calc-btns #calc-reset{
        display: none;
    }
    #calc-reset{
        margin: 0 auto;
    }
    .calc-result{
        border: 1px solid #303030;
        background-color: transparent;
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        padding: 32px 16px;
        margin-bottom: 40px;
    }
    .calc-result h4{
        line-height: 100%;
    }
    .calc-result h3{
        font-size: 24px;
        letter-spacing: -0.24px;
        line-height: 100%;
    }
    .calc-details p{
        text-align: center;
        font-size: 16px;
        font-weight: 600;
        margin: 16px 0 16px;
    }
    .calc-details p#assets-total,
    .calc-details p#debts-total,
    .calc-details p#net-worth{
        font-weight: 700;
        line-height: 160%;
        font-size: 20px;
        padding-bottom: 8px;        
    }
    .calc-details p#net-worth{
        margin-bottom: 30px;
    }
    .result{
        padding: 30px 32px 40px;
    }
    .result-header{
        padding: 0 0 38px;
    }
    .result-header h2{
        font-size: 40px;
        font-weight: 800;
        margin-bottom: 18px;
        text-align: center;
    }
    .result-header h2 strong{
        font-weight: 800;
    }
    .result-desc{
        text-align: center;
    }
    .white-boxes{
        flex-direction: column;
        margin-bottom: 90px;
    }
    .white-box{
        width: 100%;
        border-radius: 12px;
        padding: 18px 24px 34px;
    }
    .white-box h3{
        font-size: 20px;
        margin-bottom: 28px;
    }
    .white-box li{
        margin-bottom: 16px;        
    }
    .black-boxes{
        padding: 0 24px;
    }
    .black-box{
        padding: 0 0 70px;
    }
    .black-box h3{
        text-align: center;
        font-size: 26px;
    }
    .bb-desc{
        margin-bottom: 70px;
    }
    .black-box .bb-btn{
        max-width: 100%;
    }
    .how-to-wrap{
        padding: 0 8px;
    }
    .how-to{
        border-radius: 16px;
        padding: 60px 24px 46px;
    }
    .how-to h2{
        font-size: 32px;
        letter-spacing: -1.28px;
        margin-bottom: 22px;
    }
    p.ht-desc{
        margin-bottom: 24px;
        max-width: 100%;
        font-size: 14px;
        line-height: 142%;
    }
    .ht-card{
        border-radius: 12px;
        padding: 24px 24px 126px;
        flex-direction: column;
        gap: 36px;
        margin-bottom: 50px;
        position: relative;
    }
    .ht-card-left{
        width: 100%;
        padding-top: 0;
    }
    .ht-card h3{
        font-size: 22px;
        line-height: 218%;
        margin-bottom: 10px;
        text-align: center;
    }
    .htc-desc{
        margin-bottom: 18px;
    }
    .htc-desc p{
        font-size: 14px;
        line-height: 142%;
    }
    .htc-features{
        margin: 0;
        padding: 0;
    }
    .htc-features li{
        line-height: 24px;
        padding: 0 0 0 32px;
    }
    .htc-features li::before{
        width: 24px;
        height: 24px;
    }
    .htc-btn{
        font-size: 14px;
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .ht-card-right{
        width: 100%;
        border-radius: 12px;
        padding: 24px 24px 36px;
    }
    .htcr-header{
        gap: 16px;
        justify-content: center;
    }
    .htc-image{
        width: 48px;
        height: 48px;
    }
    .htc-name{
        padding-top: 7px;
    }
    .htc-name span:not(.htc-age){
        display: none;
    }
    .htc-age{
        display: block;
    }
    .htcr-table{
        margin-bottom: 26px;
    }
    .htcr-row{
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.24);
        margin-bottom: 18px;
    }
    .htcr-row:last-child{
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .ht-row-title p{
        font-size: 14px;
        text-align: center;
    }
    .ht-row-value p{
        font-weight: 600;
        line-height: 125%;
        text-align: center;
    }
    .ht-row-value p strong{
        font-weight: 600;
    }
    .ht-card-right h4{
        font-size: 16px;
    }
    .htcr-result p,
    .htcr-result li{
        line-height: 156%;
    }
    .diff{
        width: 100%;
        padding: 80px 32px 15px;
    }
    .diff h2{
        max-width: 100%;
        font-size: 30px;
        font-weight: 800;
        letter-spacing: -0.68px;
        margin-bottom: 30px;
    }
    .dif-desc{
        margin-bottom: 38px;
    }
    .dif-desc p{
        font-size: 14px;
    }
    .dif-table{
        display: flex;
        flex-wrap: wrap;
    }
    .dif-first-empty,
    .dif-first{
        display: none;
    }
    .dif-second-title,
    .dif-third-title,
    .dif-second,
    .dif-third{
        width: 100%;
    }
    .dif-second-title,
    .dif-second{
        margin-right: 0;
        order: 10;
    }
    .dif-third-title,
    .dif-third{
        order: 20;
    }
    .dif-second-title,
    .dif-third-title{
        padding: 32px;
    }
    .dif-second-title h3,
    .dif-third-title h3{
        font-size: 20px;
    }
    .dif-second-title h3{
        color: #9CFCD7;
    }
    .dif-second::after{
        display: none;
    }
    .dif-second,
    .dif-third{
        flex-direction: column;
        padding: 22px 26px 18px;
    }
    .dif-third:last-child{
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
    }
    .dif-second:nth-last-child(2){
        border-bottom-right-radius: 1rem;
        border-bottom-left-radius: 1rem;
        margin-bottom: 36px;
    }
    .dif-second h4,
    .dif-third h4{
        display: block;
        color: #FFF;
        font-family: "Finger Paint", sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 20px;
        letter-spacing: 0.64px;
        margin-bottom: 8px;
        text-align: center;
    }
    .dif-second p,
    .dif-third p{
        font-size: 14px;
        font-weight: 400;
        line-height: 128%;
        text-align: center;
    }
    .app{
        padding: 84px 0 0;
    }
    .app h2{
        font-size: 50px;
        font-weight: 800;
        padding: 0 32px;
    }
    .app-description{
        font-weight: 500;
        line-height: 125%;
        margin-bottom: 38px;
        padding: 0 32px;
    }
    .app .bb-btn{
        display: none;
    }
    .app-img{
        width: 375px;
        height: 340px;
        background-position: left center;
        margin-top: 0;
    }
    .reviews{
        padding-top: 50px;
    }
    .reviews-title h2{
        font-size: 36px;
        padding: 0 32px;
        margin-bottom: 60px;
    }
    .reviews .bb-btn{
        margin-top: 74px;
        display: block;
    }
    .exp-wrap{
        padding: 66px 40px 10px;
    }
    .exp{
        height: 734px;
        padding: 0;
        background-position: center bottom;
        background-size: auto 464px;
        position: relative;        
    }
    .exp-left{
        width: 100%;
    }
    .exp-left h2{
        font-size: 24px;
        line-height: 116%;
        letter-spacing: -0.96px;
        margin-bottom: 30px;
        text-align: center;
    }
    .exp-description p{
        font-size: 14px;
        margin-bottom: 14px;
    }
    .exp-left .bb-btn{
        position: absolute;
        bottom: 50px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .home-blog{  
        padding: 70px 32px 60px;        
        display: flex;
        flex-direction: column;
        align-items: center
    }
    .home-blog h2{
        text-align: center;
        font-size: 36px;
        letter-spacing: -2.16px;
        margin-bottom: 16px;
    }
    .hb-description{
        width: 100%;
        text-align: center;
        margin-bottom: 40px;
    }
    .hb-posts{
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
    .hb-first-post{
        min-width: 100%;
        min-height: 0;
        border-radius: 12px;
        flex-direction: column;
    }
    .hbf-img{
        min-width: 100%;
        height: 214px;
    }
    .hbf-right{
        padding: 20px;          
    }
    .hbf-date,
    .hb-date{        
        margin-bottom: 16px;
    }
    .hbf-right h3{
        font-size: 24px;
        line-height: 116%;
        margin-bottom: 40px;
    }
    .hb-right-posts{
        width: 100%;
        gap: 8px;
    }
    .hb-post{
        height: auto;
        border-radius: 8px;
        padding: 20px;
        gap: 0;
    }
    .hb-post h3{
        font-size: 16px;
        line-height: 150%;
    }
    /*Home Footer*/
    .home-footer{
        background: #000;
        padding: 60px 32px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center -400px;
        background-image: url('images/stars1.webp');  
    }
    .hf-top{
        margin-bottom: 32px;
        padding-right: 0;
        background: none;
    }
    .hf-top > h2{
        font-size: 60px;
        letter-spacing: -3.6px;
        margin-bottom: 26px;
    }
    .hft-desc{
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 26px;
    }
    .hf-form{
        width: 100%;
    }
    .hf-form form{
        flex-direction: column;
    }
    .hf-form .gform_wrapper form .gfield input[type="email"]{
        width: 100%;
    }
    .hf-form .gform_wrapper form input[type="submit"]{        
        padding: 13px 20px 13px;
        font-size: 14px;
        max-height: 36px;
        width: 100%;
    }
    .hf-middle{
        flex-direction: column;
        gap: 32px;
        margin-bottom: 32px;
    }
    .hf-middle-left{
        max-width: 100%;
        width: 100%;    
    }
    .hf-middle-left img{
        margin-bottom: 0;
    }
    .hf-middle-left > p{
        padding-left: 70px;
        font-size: 16px;
        margin-bottom: 30px;
    }
    .hf-menus{
        gap: 12px;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .hf-menu{
        max-width: calc(50% - 7px);
        width: auto;
        padding-right: 18px;
    }
    .hf-menu-title{
        margin-bottom: 24px;
    }
    .hf-copyright{
        text-align: left;
    }
    /*Home Footer End*/
}    
@media (max-width: 374px){
    .htc-btn{
        font-size: 12px;
    }
}