/* Sarter CSS

VAR ------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
    /* Colours */
    --b-black: #000C1D;
    --b-black80: #000C1DEE;
    --blue: #53C1FF;
    --blue20: #53C1FF30;
    --blue2: #125DCD ;
    --wht: #FFFFFF ;
    --wht10: #FFFFFF10 ;
    --wht20: #FFFFFF20 ;
    --grey: #D9D9D9;
    --yellow: #DBC500 ;
    --green: #45E655 ;
    --orange:  #F49E39;
    --coral: #FF5368;
    --lavendar: #AC85FF ; 
    /* Fonts */
    --font: "Kanit", sans-serif ;
    /* Border Radius  */
    --border-8: 8px;
    --border-12: 12px;
    --border-15: 15px;
    --border-30: 30px;
    /* padding */
    --sec-pad-1: 5rem 2rem 6rem;
    --sec-pad-2: 3rem 1rem 4rem;

}

/* Global ------------------------------------------------------------------------*/

.mobi {
    display: none;
}

.d-none {
    display: none;
}

.text-center {
    text-align: center
}

main{
    padding: 4rem 2rem;
    &.main-bg{
        padding: 4rem 2rem;
        background: var(--wht10);
        border-radius: 40px;
        margin-bottom: 3rem;
        width: 100%;
 
    }
}

.container{
    width: 100%;
    max-width: 1660px;
    margin: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

section{
    padding: var( --sec-pad-1);
    h2{ text-align: center; padding-bottom: 2rem;}
}


.help-btn {
    background: var(--blue);
    height: 60px;
    width: 60px;
    display: flex;
    border-radius: var(--border-15);
    position: fixed;
    bottom: -5rem;
    right: 2rem;
    transition: 0.2s;
    cursor: pointer;
    justify-content: center;
    align-items: center;

    span{        
        overflow: hidden;
        display: inline-block;
        width: 0;
        transition: 0.2s;
        opacity: 0;
    }
    &:hover{ 
        width: 180px;
        span{ width: fit-content; padding-left: 1rem;  opacity: 1;}
    }
}



select {
    padding: 0.5rem;
    border-radius: var(--border-8);
}


/* Headings and text*/

html,body {
    font-family: var(--font);
    background: var(--b-black);
    color: var(--wht);
}

*, a, button, input, h1, h2, h3, h4, h5, h6, p {
    font-family: var(--font);
}

h2, h3, h4, h5, h6 {
    font-weight: 700;
}

h1 {
    font-size: 60px;
    font-weight: 600;
}

h2 {
    font-size: 40px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
    text-transform: uppercase;
}

p {
    font-size: 18px;
    line-height: 1.6em;
}

small{ 
    font-size: 14px;
    line-height: 1.6em;
}

/*Buttons*/
.btn, button.btn {
    padding: 0.6rem 2rem !important;
    border-radius: 12px !important;
    font-size: 16px;
    text-decoration: none !important;
    font-weight: 500;
    background: var(--b-black);
    text-align: center !important;
    color: var(--wht);
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: var(--b-black);
    color: var(--wht);

    &.small{
        font-size: 12px ;
        border-radius: 8px !important;

    }

    &.black-btn{
        background: var(--b-black);
        color: var(--wht);
    }
    &.wht-btn{
        background: var(--wht);
        color: var(--b-black);
    } 
    &.blue-btn{
        background: var(--blue);
    }
    &.blue2-btn{
        background: var(--blue2);
    }
    &.grey-btn{
        background: var(--grey);
    }
    &.green-btn{
        background: var(--green);
    }
    &.yellow-btn{
        background: var(--yellow);
    }
    &.orange-btn{
        background: var(--orange);
    }
    &.coral-btn{
        background: var(--coral);
    }
    &.lavendar-btn{
        background: var(--lavendar);
    }

    &:hover{
        opacity: 0.75;
    }

}

/* boxes */
.box{
    background: var(--wht);
    box-shadow: 15px 15px 0 var(--blue) ;
    color: var(--b-black);
    text-align: center;
    padding: 2rem;
    border-radius: var(--border-15);
    max-width: 400px;
    margin: auto;

    .btn{ width: 100%;}

    .header{
        text-align: left;
        h4{ text-align: left; margin: 0; padding: 0;}
        p,small{ text-align: left; font-size: 14px; margin: 0; padding: 0; line-height: 1.4em;}

        .col-3{
            display: flex;
            align-items: center;
            svg,img{ width: 100%; max-width: 80px;}
        }
        .col-9{
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;
        }
    }

    .form-field {
        display: flex;
        flex-direction: column;
        padding: 0 0 1rem;
    }

    .checkbox-wrap {
        display: flex;
        align-items: center;
        padding-top: 1rem;
        p{font-size: 14px; text-align: left; margin-left: 1rem;}
    }

    .num{
        position: absolute;
        top: 0;
        left: -10px;
        color: var(--wht);
        height: 50px;
        width: 50px;
        border-radius: var(--border-15);
        font-weight: 700;
        text-align: center;
        line-height: 50px;

    }
    .hr-text{
        display: block;
        background: var(--wht);
        position: relative;
        z-index: 1;
        width: 50%;
        margin: -3rem auto 2rem;
    }
    .row{
        padding-right: 0.6rem;
        padding-left: 0.6rem;
        .btn{
            margin-top: 1rem;
        }
        p{ 
            margin-top: 1rem;
            padding: 0;
            a{ text-decoration: none; font-weight: 700; color: var(--blue);}
        }
    }

    .inner-box {
        padding: 1.5rem;
        background: var(--blue20);
        margin: 1rem 0 ;
        border-radius: var(--border-15);
        p{ display: flex; justify-content: space-between; }
  
    }

    .progressbar{
     
        background: var(--b-black);
        height: 15px;
        border-radius: var(--border-15);
        span{
            background: var(--blue);
            height: 15px;
            width: 20px;
            border-radius: var(--border-15);
            display: block;
        }
    }

    input, button{ padding: 0.8rem 1rem; background: transparent; border-radius: var(--border-12); border: 1px solid;}
    small{ text-align: left; padding-bottom: 0.25rem; padding-left: 0;}
    input[type="checkbox"] {
        width: 30px;
        height: 30px;
    }

    .icon{
        background: var(--b-black);
        padding: 1.35rem;
        height: 70px;
        width: 70px;
        border-radius: var(--border-15);
        margin: 10px auto;
        display: block;
    }
    
    &.green-shadow{
        box-shadow: 15px 15px 0 var(--green) ;
        .num{ background-color: var(--green);}
        .btn{  background: var(--green);}
        .icn .rect{fill: var(--green) }
    }

    &.yellow-shadow{
        box-shadow: 15px 15px 0 var(--yellow) ;
        .num{ background-color: var(--yellow);}
        .btn{  background: var(--yellow);}
        .icn .rect{fill: var(--yellow) }
    }

    &.orange-shadow{
        box-shadow: 15px 15px 0 var(--orange) ;
        .num{ background-color: var(--orange);}
        .btn{  background: var(--orange);}
        .icn .rect{fill: var(--orange) }
    }

    &.coral-shadow{
        box-shadow: 15px 15px 0 var(--coral) ;
        .num{ background-color: var(--coral);}
        .btn{  background: var(--coral);}
        .icn .rect{fill: var(--coral) }
    }

    &.lavendar-shadow{
        box-shadow: 15px 15px 0 var(--lavendar) ;
        .num{ background-color: var(--lavendar);}
        .btn{  background: var(--lavendar);}
        .icn .rect{fill: var(--lavendar)}
    }

    .top-icon{
        margin-top: -4rem;
    }
    h2{
        font-size: 30px;
    }
    hr{
        width: calc(100%+4rem);
        display: block;
        border-color: var(--b-black);
        background-color: var(--b-black);
        opacity: 1;
        margin: 2rem auto;
        margin-left: -2rem;
        margin-right: -2rem;

    }

    .calc-select{
        display: flex;
        color: var(--wht);
        background: var(--b-black);
        border-radius: var(--border-12);
        font-weight: bold;

        div{
            transition: 0.2s;
            cursor: pointer;
            padding: 1rem;
            width: 33.33%;
            border-radius: var(--border-12);
            justify-content: space-between;
            font-size: 14px;
           
            &:hover{
                background-color: var(--wht20);
            }
            &.active{
                background: var(--blue) !important;
                transform: scale(1.1);
            }
    
        }
      
    }
    .calcutations{
        padding: 0 1rem 1rem;
        p{
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            text-align: left;
            margin-bottom: 0.5rem;
        }
    }
}

/* Header ------------------------------------------------------------------------*/
.mobi-nav-btn {
    display: none;
}
header {
    display: flex;
    position: fixed;
    width: 100%;
    top: 0;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    align-items: center;
    z-index: 999;
    transition: 0.3s;

    .mobi-nav-btn {
        padding: 0.2rem !important;
        margin-left: 1rem;
        width: 45px;
        height: 45px;
        align-content: center;
        svg{ width: 100%;}
    }

    nav {
        display: flex;
        align-items: center;
        .btn{
            font-size: 14px !important;
        }
    }

    .buttons {
        display: flex;
        justify-content: flex-end;
        .btn.notification-btn{ padding: 0.6rem !important;}
        
    }

    .logo{
        svg {
            height: 24px;
            width: 100%;
        }
    }


    .menu{
        padding: 0 2rem;
        .btn{ margin-left: 1rem;}
        ul {
            display: flex;
            align-items: center;
            padding: 0;
            margin: 0;
            li{ 
                list-style: none;
                a{ 
                    color: var(--wht);
                    padding: 1rem;
                    text-decoration: none;
                    transition: 0.2s;
                    &:hover{
                        color: var(--blue);
                    }
                }
            }
        }

    } 
}

.mobi-nav {
    position: fixed;
    top: 0;
    background: var(--b-black);
    padding: 2rem;
    z-index: 999;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    right: -100%;
    transition: 0.3s;
    &.active{
        right: 0;
    }

    a.btn {
        width: 300px;
        margin-top: 1rem;
        font-size: 26px;
    }

    span.close {
        display: block;
        height: 60px;
        width: 60px;
        font-size: 50px;
        text-align: center;
        line-height: 53px;
        transform: rotate(45deg);
        background: var(--wht20);
        border-radius: var(--border-12);
        margin-top: 6rem;
        transition: 0.2s;
        &:hover{
            border-radius: var(--border-30);
            transform: rotate(-45deg) scale(0.9);
            cursor: pointer;
        }
    }

    ul {
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        flex-direction: column;
        li{ 
            list-style: none;
            a{ 
                padding: 1rem;
                display: block;
                color: var(--wht);
                text-decoration: none;
                font-size: 26px;
            }
        }
    }

}

/* Footer ------------------------------------------------------------------------*/
footer {
    padding: 4rem 2rem;
    background: var(--wht10);
    border-radius: 40px 40px 0 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .social {
        width: 200px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .footer-nav-wrap {
        display: flex;
        justify-content: space-between;
        width: 100%;
        max-width: 1460px;
        padding: 2rem 0;

        .f-nav-section {
            width: 25%;
            padding: 1rem;
        }

        .heading-link{
            color: var(--wht);
            padding: 1rem;
            border-bottom: 1px solid;
            display: block;
            text-decoration: none;
        }
        ul{
            padding: 1rem;
            margin: 0;
            li{
                list-style: none;
                a{ color: var(--wht); text-decoration: none;}
            }
        }
    }
}

/* After scroll ------------------------------------------------------------------------*/

.scrolled {

    header{
        background: var(--b-black80);
    }
    .help-btn { bottom: 2rem;}
}

/* Home ------------------------------------------------------------------------*/
section.home-banner {
    position: relative;
    min-height: 65vh;
    display: flex;

    .container{
        position: relative;
        z-index: 2;
    }
    .banner-content{

        .banner-img{
            width: 90%;
            max-width: 400px;
            margin: auto;
            display: block;
        }
        .the-content{
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 1rem;
            height: 100%;
            max-width: 500px;
            img{
                width: 80%;
                max-width: 300px;
                padding-top: 1rem;
            }
            p{padding-top: 1.5rem;}
        }
    }

    &::before{
        display: block;
        content: "";
        z-index: 0;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        height: 100%;
        width: 100%;
        background: url(/assets/img/banner-bg.jpg);
        opacity: 0.5;
        background-position: center;
        background-attachment: fixed;
        background-size: cover;
    }
    &::after{
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        z-index: 1;
        width: 100%;
        height: 50%;
        left: 0;
        right: 0;
        background: linear-gradient(180deg, transparent 0%, var(--b-black) 100%);
    }
}

section.home-calculator{

    .row {
        position: relative;
        z-index: 1;
    }

    .col-lg-6{
        display: flex;
        align-items: center;
        p.shoutout {
            text-align: center;
            font-size: 50px;
            font-weight: 600;
            margin-top: -100px;
            color: var(--blue);
            span{ color: var(--wht);}
        }
    }
}


section.how-it-works{

    h2{ text-align: center; padding-bottom: 2rem;}
  

    .box{
        padding: 1rem;
        h4 {
            font-size: 22px;
            margin-top: 10px;
        }
    }

}

.box-wrap {
    display: flex;
    flex-direction: row;
    height: 300px;
    flex-wrap: wrap;

    &::after{
        content: '';
        display: block;
        width: 80%;
        border-bottom: 1px dashed var(--wht);
        position: relative;
        top: -50%;
        margin: auto;
    }
    .box{
        text-align: left;
        width: 22%;
        height: 100%;
        position: relative;
        z-index: 1;
       
        p{
            font-size: 14px;
        }
    }
}

section.testimonials{
    background: var(--wht10);
    border-radius: var(--border-30);
    overflow: hidden;

    div#tns1-mw {
        overflow: unset;
        .slide{
            padding: 1.5rem;
        }
    }
    .tns-nav {
        display: flex;
        justify-content: space-around;
        padding: 2rem 0 0;
        width: 120px;
        margin: auto;
        button {
            height: 10px;
            width: 10px !important;
            display: block;
            border: none;
            background: var(--wht20);
            border-radius: var(--border-8);
            padding: 0;
            &.tns-nav-active{
                background: var(--wht);
            }
        }
    }


    .box{
        display: flex;
        flex-direction: column;
        .pp{
            width: max-content;
            margin: -3.5rem auto 10px;
            max-width: 77px;
        }
        .stars{
            width: max-content;
            margin: 1rem auto;
        }
    }
}


section.faq{

    #faq-accordion{
        background-color: var(--blue);
        border: none !important;
        border-radius: var(--border-15);

        .accordion-item {
            border: 1px solid var(--b-black);
            background: transparent;
            color: var(--b-black);

            button.accordion-button {
                background: transparent;
                display: flex;
                justify-content: space-between;
                span{ font-weight: 700;     color: var(--b-black);}
                i{ 
                    font-size: 32px;
                    line-height: 32px;
                }
                &::after{ display: none;}
            }

            .accordion-body {
                color: var(--b-black);
                background: var(--wht20);
            }
            
        }


    }
}

/* Contact ------------------------------------------------------------------------*/

/* Login ------------------------------------------------------------------------*/

.login-header {
    padding: 6rem 2rem 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    a {
        display: block;
        svg{
            width: 100%;
            max-width: 280px;
        }
    }
}



/* Dashboard ------------------------------------------------------------------------*/


.dashheader{
    .box{ position: relative; z-index: 1;}
    .box.no-subs{ max-width: 700px; margin-bottom: 4rem; position: relative; z-index: 1;}
}

.dashpanel {
    display: flex;
    justify-content: space-between;
    background: var(--wht10);
    border-radius: var(--border-30);
    margin: 110px auto 0;
    margin-left: 1.5rem;
    margin-right: 1.5rem;

    .avatar-wrap {
        padding: 1.2rem 1.6rem;
        width: 100%;
        display: flex;
        align-items: center;
        img{
            width: 42px;
            height: auto;
            display: block;
        }
        p{ padding: 0 0 0 1.5rem; margin: 0; font-size: 16px; line-height: 1.2em;}
    }
    .settings-btn{
        background: var(--wht20);
        border-radius: var(--border-30);
        border: none;
        display: flex;
        width: 100%;
        max-width: 80px;
        justify-content: center;
        align-items: center;
        svg{ transition: 0.2s;}
        &:hover{ 
            svg{ transform: scale(1.2) rotate(90deg);}
        }
    }
}

.Offers{
    background: var(--wht10);
    border-radius: var(--border-30);
    overflow: hidden;
    margin: 0 1.5rem 4rem;

    p{ text-align: center; }

    .offers-wrap{
        .box{
            position: relative;
            padding-top: 4.5rem;
            svg.icn{
                width: 120px;
                position: absolute;
                top: -2rem;
                left: 1rem;
            }
            p{ 
                padding: 0; margin: 0; text-align: left; 
                b{ float: right;}
            }
        }
    }

    div#tns1-mw {
        overflow: unset;
        .slide{
            padding: 1.5rem;
        }
    }
    .tns-nav {
        display: flex;
        justify-content: space-around;
        padding: 2rem 0 0;
        width: 120px;
        margin: auto;
        button {
            height: 10px;
            width: 10px !important;
            display: block;
            border: none;
            background: var(--wht20);
            border-radius: var(--border-8);
            padding: 0;
            &.tns-nav-active{
                background: var(--wht);
            }
        }
    }

}



/* Apply ------------------------------------------------------------------------*/
.disable{
    opacity: 0.5;
    pointer-events: none !important;
}
section.apply , section.approved{
    margin-top: 100px;
    border-radius: var(--border-30);
    background: var(--wht10);
    padding: 2rem 2rem 3rem;
    margin-bottom: 3rem;
    position: relative;

    .back {
        height: 40px;
        width: 40px;
        background: var(--blue);
        text-align: center;
        line-height: 40px;
        border-radius: var(--border-30);
        position: absolute;
        top: 2rem;
        right: 2rem;
        cursor: pointer;
        transition: 0.2s;
        &:hover{
            transform: scale(1.2);
        }
    }
    .apply-footer {
        position: relative;
        display: flex;
        margin: 2rem auto ;
        max-width: 400px;
        align-items: center;
        justify-content: space-between;
        .back{ position: static;}
        .btn{ width: 80%;}
    }

    .apply-part{
        display: none;
        &.active{
            display: block;
        }
    }

}

section.approved{
    margin-top: 200px;

    .image-header {
        text-align: center;
        margin: -100px 0 0;
    }
}

.part-header {
    padding: 2rem;
}
.part-content {
    padding: 2rem;
}

.part-progress {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin: 2rem auto;
    position: relative;

    .porgress {
        position: absolute;
        border-bottom: 5px solid var(--blue);
        display: block;
        top: -22px;
        z-index: 1;
        left: 13%;
    }

    &::after{
        display: block;
        content: '';
        border-bottom: 1px solid var(--wht);
        position: absolute;
        width: 76%;
        margin: auto;
        top: -20px;
        left: 0;
        right: 0;
    }

    .details{
        width: 25%;
        text-align: center;
        span{
            height: 15px;
            width: 15px;
            background: var(--wht);
            border-radius: 50px;
            display: block;
            position: relative;
            top: -27px;
            margin: auto;
            z-index: 1;
        }
        &.active{
            color: var(--blue);
            span{ background: var(--blue);}
        }
    }
}

.application-btns button {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    background: var(--grey);
}

.shareholders {
    margin-top: 2rem;
    padding: 0;
    overflow: hidden;
    height: 0;
    transition: 0.2s;
    &.active{ height: fit-content; overflow:unset;}
}

.shareholder {
    background: var(--b-black);
    color: var(--wht);
    padding: 2rem;
    border-radius: var(--border-15);
    margin: 1rem 0;
    hr{ border-color: var(--wht);}
    p{ font-size: 14px; display: flex; justify-content: space-between; margin: 0.5rem 0 !important;}
    &.active{
         background: var(--blue);
         position: relative;
         &::after{ 
            content: '';
            display: block;
            background: url(/assets/img/yes.svg);
            position: absolute;
            bottom: 84px;
            left: 0;
            right: 0;
            margin: auto;
            height: 50px;
            width: 50px;
            background-repeat: no-repeat;
            background-position: center;
         }
    }
}

.sub-card{
    position: relative;
    padding: 2rem 1rem;
    svg{ 
        width: 120px;
        left: -44px;
        position: absolute;
        top: 20px;
    }
    .col-7{
        text-align: left;
        small{ display: block; text-align: left;}
    }

    .amount-wrap {
        text-align: center;
        line-height: 80px;
        display: block;
        border-radius: var(--border-8);
    }

    &.green-shadow {
        .amount-wrap{ background: #45E65520;}
        svg rect{fill: var(--green)}
    }

    &.yellow-shadow{
        .amount-wrap{ background: #DBC50020;}
        svg rect{fill: var(--yellow)}
    } 
    &.orange-shadow{
        .amount-wrap{ background: #F49E3920;}
        svg rect{fill: var(--orange)}
    } 
}


button.btn.blue-btn.upload{
    position: relative;
    svg{ position: absolute;
        left: 1rem;
    }
}

.docupload{
    transition: 0.3s;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    margin-top: 1rem;
}

/* Page ------------------------------------------------------------------------*/
/* Page ------------------------------------------------------------------------*/


/* Animation ------------------------------------------------------------------------*/

@property --p{
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  
  .mini-pie {
    --p: 20;
    --b: 10px;
    --c: var(--blue);
    --w: 180px;
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    margin: 1rem auto;
    background: #53c2ff21;
    border-radius: 50%;
    svg{ animation: rotate 1s ease infinite;}
  }
  .pie {
    --p: 20;
    --b: 10px;
    --c: var(--blue);
    --w: 250px;
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    place-content: center;
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
    margin: 1rem auto;
    background: #53c2ff21;
    border-radius: 50%;
    svg{ animation: rotate 1s ease infinite;}
  }
  .pie:before,
  .pie:after , .mini-pie:before, .mini-pie:after{
    content:"";
    position:absolute;
    border-radius:50%;
  }
  .pie:before,   .mini-pie:before {
    inset:0;
    background:
      radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
      conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
            mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
  }
  .pie:after ,.mini-pie:after{
    inset:calc(50% - var(--b)/2);
    background:var(--c);
    transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
  }
  .animate {
    animation:p 3s 1s  both;
  }
  .animate2 {
    animation:p 4.5s infinite;
  }
  .no-round:before {
    background-size:0 0,auto;
  }
  .no-round:after {
    content:none;
  }
  @keyframes p {
    from{--p:0}
  }

  @keyframes rotate {
    0%{transform: rotate(0) scale(1);}
    60%{ transform: rotate(360deg) scale(1.3);}
    100%{ transform: rotate(360deg) scale(1);}
  }
.ani-bg{
    position: relative;
    &::after{
        display: block;
        content: '';
        background: url(/assets/img/bg-pattern.svg);
        background-repeat: repeat-x;
        background-size: 600px;
        background-position: center;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 500px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        animation: bg-move 30s linear infinite;
    }
}
@keyframes bg-move {
    0% {
      background-position: 0 center;
    }
    100% {
        background-position: 100% center ;
    }
  }


  .scale0{  transform: scale(0); height: 0;}
  .scale100{  transform: scale(1); height: auto;}

/* Media Queries ------------------------------------------------------------------------*/

/* Macbook */

@media screen and (max-width: 1400px) {

    header#site-header .nav-left {

        width: 25%;

    }

}

/* Laptop */

@media screen and (max-width: 1366px) {


    section.home-banner {
        & .banner-content {

            .banner-img {
                width: 100%;
                max-width: 300px;
                margin: auto;
                display: block;
            }

            .the-content {
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 1rem;
                height: 100%;
                max-width: 500px;
                margin: auto;
                align-items: center;
                text-align: center;
            }
        }
    }

    section.how-it-works{
        padding: var( --sec-pad-1);
        h2{ text-align: center; padding-bottom: 2rem;}        
    }

    .box-wrap {
        display: flex;
        flex-direction: column;
        height: auto;
        flex-wrap: wrap;
        position: relative;

        &::after{
            content: '';
            display: block;
            width: 1px;
            height: 80%;
            border-bottom: none;
            border-right: 1px dashed var(--wht);
            position: absolute;
            left: 0%;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        .box{
            text-align: left;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 1;
            margin-bottom: 3rem;
            max-width: 460px;
           
            p{
                font-size: 14px;
            }
        }
    }
}

/* Tab - Landscape */

@media screen and (max-width: 1100px) {

    .menu {
        display: none;
    }

    .btn.mobi-nav-btn {
        display: flex;
    }
    .f-nav-section ul {
        display: none;
    }
    section.home-calculator {
        & .col-lg-6 {
            p.shoutout {
                text-align: center;
                font-size: 30px;
                font-weight: 600;
                margin-top: -100px;
                color: var(--blue);
                margin-bottom: 4rem;
            }
        }
    }
}

/* Tab - Portait */

@media screen and (max-width: 800px) {

    footer {
        .footer-nav-wrap {
            flex-direction: column;
            align-items: center;
            .f-nav-section {
                width: 100%;
                padding: 0;
            }
        }
    }


    section.home-calculator {
        & .col-lg-6 {
            p.shoutout {
                text-align: center;
                font-size: 20px;
                font-weight: 600;
                margin-top: -100px;
                color: var(--blue);
                margin-bottom: 4rem;
            }
        }
    }
    section{
        padding: var( --sec-pad-2);
        h2 {
            font-size: 28px;
        }
    }

    main {
        padding: 4rem 1rem;
    }
    .login-header {
        a {
            display: block;
            svg{
                width: 100%;
                max-width: 220px;
            }
        }
    }

}

/* Mobile */

@media screen and (max-width: 580px) {
:root{
    --sec-pad-1: 4rem 1rem 5rem;
    --sec-pad-2: 2rem 1.5rem 3rem;
}

main {
    padding: 2rem 0rem;
}

    header {
        display: flex;
        position: fixed;
        width: 100%;
        top: 0;
        justify-content: space-between;
        padding: 1rem 0.6rem 1rem 1.5rem;
        align-items: center;

        & .logo {
            svg {
                height: 15px;
                width: 100%;
            }
        }

        & nav {
            .btn {
                font-size: 12px !important;
                padding: 0.5rem 1rem !important;
            }
        }

        .btn.mobi-nav-btn {
            padding: 0.6rem !important;
            margin-left: 0.6rem;
        }
    }
    section.home-banner {
        & .banner-content {
            .banner-img {
                width: 100%;
                max-width: 200px;
                margin: auto;
                display: block;
            }
        }
    }
    section{
        h2 {
            font-size: 24px;
        }
    }
    section.testimonials {
        .box {
            display: flex;
            flex-direction: column;
            width: 60%;
        }
    }
    section.testimonials {
        & div#tns1-mw {
            .slide {
                padding: 0rem;
            }
        }
    }

    .banner-content.row {
        padding: 4rem 2rem;
        .btn{    width: 100%;}
    }
    .login-header {
        padding: 4rem 4rem 2.5rem;
        a {
            display: block;
            svg{
                width: 100%;
                max-width: 180px;
            }
        }
    }

    .dashpanel {
        border-radius: var(--border-15);
        margin: 90px 1.5rem 0;

        .avatar-wrap {
            padding: 1rem 1.2rem;
            img{ width: 40px;}
  
        }
        .settings-btn {
            background: var(--wht20);
            border-radius: var(--border-15);
            max-width: 70px;
        }
    }

    .dashheader {
        .box.no-subs {
            max-width: 400px;
            margin-bottom: 4rem;
            position: relative;
            z-index: 1;
        }
    }
    .box{ padding: 1.5rem;}



    .apply-footer {
        padding: 2rem 2rem;
        margin: 0 !important;
    }
    .part-content {
        padding: 1rem 0rem;
    }
    .part-header {
        padding: 0rem 0rem 1rem;
        p {
            font-size: 14px;
        }
        
    }

    h4 {
        font-size: 22px;
        text-transform: uppercase;
    }
    .box {
        hr { width: calc(99% + 3.7rem);}
    }

    .part-progress {
        & .details small{ line-height: 1.2em; font-size: 12px;}
    }

    .Offers {
        & div#tns1-mw {
            .slide {
                padding: 1.5rem 0;
                .box {
                    width: 80%;
                    margin: 0;
                    font-size: 12px;
                    p{
                        font-size: 14px;
                    }
                    svg.icn {
                        width: 108px;
                        position: absolute;
                        top: -1.5rem;
                        left: 0;
                    }
                }
            }
        }
    }

}

/* Mobile */

@media screen and (max-width: 380px) {
    header {
        & nav {
            .btn {
                font-size: 12px !important;
                padding: 0.4rem 0.75rem !important;
            }
        }
        & .logo {
            svg {
                height: 12px;
                width: 100%;
            }
        }
    }
    .box {
        padding: 1.2rem;
        .calcutations {
            padding: 0 0rem 1rem;
        }
        & .calc-select {
            div {
                transition: 0.2s;
                cursor: pointer;
                padding: 1rem;
                width: 33.33%;
                border-radius: var(--border-12);
                justify-content: space-between;
                font-size: 12px;
            }
        }
        .checkbox-wrap {
            display: flex;
            align-items: center;
            padding-top: 0;
        }
    }

    section.apply, section.approved {
        margin-top: 100px;
        border-radius: var(--border-30);
        background: var(--wht10);
        padding: 2rem 1.5rem 2rem;
        margin-bottom: 3rem;
        position: relative;
    }

    .shareholder {
        padding: 1.5rem;
    }
    .apply-footer {
        padding: 2rem 0rem;
        margin: 0 !important;
    }

    .Offers {
        & div#tns1-mw {
            .slide {
                padding: 1.5rem 0;
                .box {
                    width: 66%;
                    margin: 0;
                    font-size: 12px;
             
                }
            }
        }
    }

    

}