@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
:root{
    --text-color: #0d0d12;
    --text-blue: #297ee2;
    /* --dark-blue: #262B37;
    --blue-blured:rgba(63, 156, 213, 0.2); */

}
::selection
{
    background: #76cef386;
}
:active, :hover, :focus 
{
    outline: 0;
    outline-offset: 0;
}
html {
    scroll-behavior: smooth;
  }
body{
    padding: 0;
    margin: 0;
    min-height: 100vh;
    height: auto;
    /*background: linear-gradient(139.81deg, rgba(20, 28, 47, 0.9) 3.09%, rgba(43, 123, 172, 0.9) 94.09%);*/
    background-color: #fff;
    font-family: 'Inter';
    overflow-x: hidden;
}
p, h1, h2, h3, h4{
    margin: 0;
}
a{
    text-decoration: none;
}
main{
    min-height: calc(100vh - 80px);
}
header{
    position: fixed;
    z-index:10;
    width:100%;
    height: 85px;
    /*background-color: var(--dark-blue);*/
}
h1{
    font-weight: 500;
    margin: 0;
}
h2{
    font-weight: 400;
    margin: 0;
}
button{
    cursor:pointer;
}
.bg-blue{
    background: var(--blue) !important;
}
.flex{
    display: flex;
}
.jcc{
    justify-content: center;
}
.aic{
    align-items: center;
}
.ail{
    align-items: flex-start;
}
.flx-wrap{
    flex-wrap: wrap !important;
}
.flx-dir-row{
    flex-direction: row;
}
.flx-dir-col{
    flex-direction: column;
}
.jc-spc-btw {
    justify-content: space-between;
}
.align-left{
    align-self: start !important;
}
.w-40{
    width: 39%;
}
.w-80{
    width: 80% !important;
}
.w-100{
    width: 100% !important;
}
.w-auto{
    width: auto !important;
}
.h-100vh{
    width:100vh;
}
.weight-300{
    font-weight: 300;
}
.weight-400{
    font-weight: 400;
}
.weight-500{
    font-weight: 500;
}
.weight-600{
    font-weight: 600;
}
.weight-700{
    font-weight: 700;
}
.m-0{
    margin: 0!important;
}
.ml-1{
    margin-left: 1em !important;
}
.mr-1{
    margin-right: 1em !important;
}
.mt-1{
    margin-top: 1em !important;
}
.mb-1{
    margin-bottom: 1em !important;
}
.mb-2{
    margin-bottom: 2em !important;
}
.mt-2{
    margin-top: 2em !important;
}
.pad-0{
    padding: .5em !important;
}
.pad-1{
    padding: 1em !important;
}
.pad-2{
    padding: 2em !important;
}
.f-size-14{
    font-size: 14px;
}
.f-size-15{
    font-size: 15px;
}
.f-size-18{
    font-size: 18px;
}
.f-size-21{
    font-size: 21px;
}
.text-color{
    color:var(--text-color) !important;
}
.text-color-blue{
    color:var(--blue) !important;
}
.blue-text{
    color:var(--blue) !important;
}
.cursor-pointer{
    cursor: pointer;
}
.text-center{
    text-align: center;
}
.text-blue{
    color: var(--text-blue);
}
.row{
    display: flex;
    flex-direction: row;
    width: 100% !important;
    max-height: auto;
}
.container{
    max-width: 1200px;
}
.wrapper{
    display: flex;
    justify-content: center;
    align-items:center;
    height: auto;
    width: auto;
}
nav{
    margin: 15px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.navigation{
    display: flex;
    flex-direction: row;
}
.navigation ul{
    display: flex;
    flex-direction: row;
}
.navigation ul>li{
    list-style: none;
    font-size: 19px;
    font-weight: 400;
    margin-right: 45px;
    color: #0d0d12;
}
.navigation ul>li:hover{
    opacity:.6;
}
.navigation ul>li>a{
    color: #0d0d12;
}
.navigation_button{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(41, 126, 226, .12);
    border-radius: 900px;
    padding: 18px 42px;
    font-weight: 500;
    font-size: 17px;
    line-height: 120%;
    text-align: center;
    color: #297ee2;
}
.logo{
    width: 60px;
    height: 60px;
}

main{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.preview{
    flex-direction: column;
}
.preview_title{
    /* width: 70%; */
    font-weight: 700;
    font-size: 70px;
    line-height: 115%;
    color: var(--text-color);
}
.preview_description{
    margin: 25px 0;
    /* width: 50%; */
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    color: var(--text-color);
}
.preview_button_group{
    flex-direction: row;
}
.preview_button{
    border-radius: 900px;
    padding: 18px 42px;
    line-height: 120%;
    text-align: center;
    margin-right: 10px;
    font-size: 20px;
}
.btn-blue{
    background: #41a4df;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    transition: .2s ease;
    transition-delay: 0.02s;
}
.btn-blue:hover{
    opacity: .6;
}
.btn-light{
    background-color: rgba(41, 126, 226, .12);
    font-weight: 500;
    text-align: center;
    color: #297ee2;
}
.btn-light:hover{
    opacity: .6;
}
.main_phone{
    margin-top: 50px;
    height: 650px;
}
.main_phone
{
    animation: main 40s ease-in-out infinite; 
}
@keyframes main
{
    25% 
    { 
        transform:rotate(10deg);
    }    
    50% 
    { 
        transform:rotate(-5deg);
    }  
    75% 
    { 
        transform:rotate(10deg);
    }   
    
}
.about{
    position:absolute;
    background-color: #232328;
    min-height: 100vh;
    max-height: 100vh;
    left: 0;
    width: 100vw;
}
.about_title{
    margin-bottom: 30px;
    font-weight: 629;
    font-size: 60px;
    line-height: 110%;
    letter-spacing: -0.03em;
    color: #fff;
}
.about_question{
    margin-bottom: 15px;
    font-style: italic;
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.03em;
    color: #fff;
}
.about_description{
    font-weight: 300;
    font-size: 23px;
    line-height: 135%;
    letter-spacing: -0.03em;
    color: #fff;
}
.results-phone{
    display: none;
}
.plans{
    margin-top:100vh;
    width: 100%;
}
.plans_img{
    margin: 10% 0;
    width: 60%;
}
.features{
    position: relative;
    /* top:110vh; */
    min-height: 80vh;
}
.features_card{
    border-radius: 40px;
    width: 50%;
    height: auto;
    background: #f7f9fb;
    margin-right: 20px;
}
.features_card_container{
    width: 90%;
    margin: 50px;
}
.features_card_header{

    align-items: center;
}
.features_card_title{
    font-weight: 629;
    font-size: 37px;
    color: #232328;
    margin-left: 30px;
}
.features_card_description{
    margin-top: 15px;
    font-weight: 400;
    font-size: 20px;
    line-height: 120%;
    color: #232328;
}
footer{
    width: 100vw;
    height: 200px;
    background-color: #0d0d12;
}
footer
{
    position: absolute;

    margin-top: auto;

    width:100%;
    height: 150px;
    background: rgba(0, 0, 0, 0.8);
}