body{
    color: #ffffff;
    background: #0D0D12;
    background-image: url(../img/sitebg.svg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}
.text-muted{
    color: #ffffff88 !important;
}
/*  Color  */
.primary-color{
    color: #0BFF7B;
}
.primary-varient-color{
    color: #00fb57;
}
.primary-background{
    color: #0BFF7B;
}

.secondary-color{
    color: #A4FFCA;
}
.secondary-background{
    color: #A4FFCA;
}

.success-color{
    color: #00C66D;
}
.success-background{
    color: #00C66D;
}

.danger-color{
    color: #D10049;
}
.danger-background{
    color: #D10049;
}

.warning-color{
    color: #F9A825;
}
.warning-background{
    color: #F9A825;
}

.info-color{
    color: #4A6DFF;
}
.info-background{
    color: #4A6DFF;
}

.white-background{
    background: #ffffff !important;
}

.img-radious{
    border-radius: 2rem;
}
.badge{
    margin-right: .5rem;
}
.badge-outline{
    border-radius: 99px;
    border: 1px solid #ffffff32;
}
.badge img{
    width: 1.75rem;
    height: auto;
    margin-right: .5rem;
    opacity: .75;
}


/* ---Typhography--- */

html, body{
    font-family: 'Inter Tight', 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 12px;
}

/* ---Typhography Responsive--- */
/* Medium screens */
@media (min-width: 768px) {
  html {
    font-size: 14px;
  }
}

/* Large screens */
@media (min-width: 1200px) {
  html {
    font-size: 16px;
  }
}

/* Large screens */
@media (min-width: 1400px) {
  html {
    font-size: 18px;
  }
}

/* Large screens */
@media (min-width: 1600px) {
  html {
    font-size: 20px;
  }
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    line-height: 1.25;
}
h1, .h1{
  font-size: 2.75rem;
}
h2, .h2{
  font-size: 2.25rem;
}
h3, .h3{
  font-size: 1.75rem;
}
h4, .h4{
  font-size: 1.5rem;
}
h5, .h5{
  font-size: 1.25rem;
}
h6, .h6{
  font-size: .875rem;
  letter-spacing: 1px;
}
.display-1, .display-2, .display-3, .display-4{
    font-weight: 300;
    line-height: 1.25;
}
.display-4{
    font-size:3.25rem;
}
.display-3{
    font-size:4rem;
}
.display-2{
    font-size:4.75rem;
}
.display-1{
    font-size:5.5rem;
}

p, .p{
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: .02rem;
}
.p-lg{
    font-size: 1.15rem;
}
.p-sm{
  font-size: .875rem;
  letter-spacing: 1px;
}
.p-xsm{
    font-size: .75rem;
  letter-spacing: 1px;
}

a{
    font-size: 1rem;
}

a, a:focus, a:hover, a:active{
    text-decoration: none;
    letter-spacing: 1px;
    line-height: 1.5;
    font-weight: 500;
}
a{
    color: #3CDA64;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
a:focus, a:hover, a:active{
    color: #00fb57;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
.tag {
    background: #efefef;
    padding: .25rem .5rem;
    border-radius: 2rem;
    margin: auto .25rem;
}

.line-height-1{
    line-height: 1;
}
.line-height-125{
    line-height: 1.25;
}
.line-height-15{
    line-height: 1.5;
}
.line-height-175{
    line-height: 1.75;
}
.line-height-2{
    line-height: 2;
}
.line-height-225{
    line-height: 2.25;
}

.font-weight-100{
    font-weight: 100;
}
.font-weight-200{
    font-weight: 200;
}
.font-weight-300{
    font-weight: 300;
}
.font-weight-400{
    font-weight: 400;
}
.font-weight-500{
    font-weight: 500;
}
.font-weight-600{
    font-weight: 600;
}
.font-weight-700{
    font-weight: 700;
}
.font-weight-800{
    font-weight: 800;
}

.letter-spacing-0{ letter-spacing: 0px; }
.letter-spacing-1{ letter-spacing: 1px; }
.letter-spacing-1n{ letter-spacing: -1px; }
.letter-spacing-2{ letter-spacing: 2px; }
.letter-spacing-2n{ letter-spacing: -2px; }
.letter-spacing-4{ letter-spacing: 4px; }
.letter-spacing-4n{ letter-spacing: -4px; }
.letter-spacing-6{ letter-spacing: 6px; }
.letter-spacing-6n{ letter-spacing: -6px; }
.letter-spacing-8{ letter-spacing: 8px; }
.letter-spacing-8n{ letter-spacing: -8px; }




/* ---Clearfix---  */
.clear{
  clear: both;
}
.no-margin{
  margin: 0px;
}
.no-padding{
  padding: 0px;
}
.no-radius{
    border-radius: 0px !important;
}




.width-25{
    width: 25% !important;
}
.width-50{
    width: 50% !important;
}
.width-75{
    width: 75% !important;
}
.width-100{
    width: 100% !important;
}
.width-25vw{
    width: 25vw !important;
}
.width-50vw{
    width: 50vw !important;
}
.width-75vw{
    width: 75vw !important;
}
.width-100vw{
    width: 100vw !important;
}


.height-25{
    height: 25% !important;
}
.height-50{
    height: 50% !important;
}
.height-75{
    height: 75% !important;
}
.height-100{
    height: 100% !important;
}
.height-25vh{
    height: 25vh !important;
}
.height-50vh{
    height: 50vh !important;
}
.height-75vh{
    height: 75vh !important;
}
.height-100vh{
    height: 100vh !important;
}


.flex-masonry{
    border-radius: 3px;
    padding: 20px;
    display: flex;
    flex-flow: column wrap;
    align-content: space-between;
    height: 580px;
}
.flex-child {
    border-radius: 3px;
    background-color: #A2CBFA;
    border: 1px solid #4390E1;
    box-shadow: 0 2px 2px rgba(0, 90, 250, 0.05), 0 4px 4px rgba(0, 90, 250, 0.05), 0 8px 8px rgba(0, 90, 250, 0.05), 0 16px 16px rgba(0, 90, 250, 0.05);
    width: 32%;
    margin-bottom: 2%;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    color: white;
}
.justify-content-left{
    justify-content: left;
}
.justify-content-right{
    justify-content: right;
}


/* Column */

@media only screen and (min-width: 990px) and (max-width: 1600px) {

    .col-x-md-12{
        flex: 0 0 auto;
        width: 100%;
    }
    .col-x-md-11{
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-x-md-10{
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-x-md-9{
        flex: 0 0 auto;
        width: 75%;
    }
    .col-x-md-8{
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-x-md-7{
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-x-md-6{
        flex: 0 0 auto;
        width: 50%;
    }
    .col-x-md-5{
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-x-md-4{
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}




/* for lineicons */
.lni::before{
    display: flex;
    align-items: center;
}



/* Text alignment */

.text-right{
    text-align: right;
}

@media only screen and (max-width: 640px){
    .text-left-sm{
        text-align: left;
    }
    .text-right-sm{
        text-align: right;
    }
    .text-center-sm{
        text-align: center;
    }
    .text-left-sm-imp{
        text-align: left !important;
    }
    .text-right-sm-imp{
        text-align: right !important;
    }
    .text-center-sm-imp{
        text-align: center !important;
    }
}

/* margin */

.ml-0{ margin-left: 0!important; }
.ml-1{ margin-left: .25rem!important; }
.ml-2{ margin-left: .5rem!important; }
.ml-3{ margin-left: 1rem!important; }
.ml-4{ margin-left: 1.5rem!important; }
.ml-5{ margin-left: 3rem!important; }

.mr-0{ margin-right: 0!important; }
.mr-1{ margin-right: .25rem!important; }
.mr-2{ margin-right: .5rem!important; }
.mr-3{ margin-right: 1rem!important; }
.mr-4{ margin-right: 1.5rem!important; }
.mr-5{ margin-right: 3rem!important; }

@media only screen and (max-width: 1600px){
    .m-0-xmd{ margin: 0!important; }
    .m-1-xmd{ margin: .25rem!important; }
    .m-2-xmd{ margin: .5rem!important; }
    .m-3-xmd{ margin: 1rem!important; }
    .m-4-xmd{ margin: 1.5rem!important; }
    .m-5-xmd{ margin: 3rem!important; }

    .mx-0-xmd{ 
        margin-left: 0!important; 
        margin-right: 0!important; 
    }
    .mx-1-xmd{ 
        margin-left: .25rem!important; 
        margin-right: .25rem!important; 
    }
    .mx-2-xmd{ 
        margin-left: .5rem!important; 
        margin-right: .5rem!important; 
    }
    .mx-3-xmd{ 
        margin-left: 1rem!important; 
        margin-right: 1rem!important; 
    }
    .mx-4-xmd{ 
        margin-left: 1.5rem!important; 
        margin-right: 1.5rem!important; 
    }
    .mx-5-xmd{ 
        margin-left: 3rem!important; 
        margin-right: 3rem!important; 
    }

    .my-0-xmd{ 
        margin-top: 0!important; 
        margin-bottom: 0!important; 
    }
    .my-1-xmd{ 
        margin-top: .25rem!important; 
        margin-bottom: .25rem!important; 
    }
    .my-2-xmd{ 
        margin-top: .5rem!important; 
        margin-bottom: .5rem!important; 
    }
    .my-3-xmd{ 
        margin-top: 1rem!important; 
        margin-bottom: 1rem!important; 
    }
    .my-4-xmd{ 
        margin-top: 1.5rem!important; 
        margin-bottom: 1.5rem!important; 
    }
    .my-5-xmd{ 
        margin-top: 3rem!important; 
        margin-bottom: 3rem!important; 
    }

    .mt-0-xmd{ margin-top: 0!important; }
    .mt-1-xmd{ margin-top: .25rem!important; }
    .mt-2-xmd{ margin-top: .5rem!important; }
    .mt-3-xmd{ margin-top: 1rem!important; }
    .mt-4-xmd{ margin-top: 1.5rem!important; }
    .mt-5-xmd{ margin-top: 3rem!important; }

    .mb-0-xmd{ margin-bottom: 0!important; }
    .mb-1-xmd{ margin-bottom: .25rem!important; }
    .mb-2-xmd{ margin-bottom: .5rem!important; }
    .mb-3-xmd{ margin-bottom: 1rem!important; }
    .mb-4-xmd{ margin-bottom: 1.5rem!important; }
    .mb-5-xmd{ margin-bottom: 3rem!important; }

    .mr-0-xmd{ margin-right: 0!important; }
    .mr-1-xmd{ margin-right: .25rem!important; }
    .mr-2-xmd{ margin-right: .5rem!important; }
    .mr-3-xmd{ margin-right: 1rem!important; }
    .mr-4-xmd{ margin-right: 1.5rem!important; }
    .mr-5-xmd{ margin-right: 3rem!important; }

    .ml-0-xmd{ margin-left: 0!important; }
    .ml-1-xmd{ margin-left: .25rem!important; }
    .ml-2-xmd{ margin-left: .5rem!important; }
    .ml-3-xmd{ margin-left: 1rem!important; }
    .ml-4-xmd{ margin-left: 1.5rem!important; }
    .ml-5-xmd{ margin-left: 3rem!important; }
}

@media only screen and (max-width: 960px){
    .m-0-md{ margin: 0!important; }
    .m-1-md{ margin: .25rem!important; }
    .m-2-md{ margin: .5rem!important; }
    .m-3-md{ margin: 1rem!important; }
    .m-4-md{ margin: 1.5rem!important; }
    .m-5-md{ margin: 3rem!important; }

    .mx-0-md{ 
        margin-left: 0!important; 
        margin-right: 0!important; 
    }
    .mx-1-md{ 
        margin-left: .25rem!important; 
        margin-right: .25rem!important; 
    }
    .mx-2-md{ 
        margin-left: .5rem!important; 
        margin-right: .5rem!important; 
    }
    .mx-3-md{ 
        margin-left: 1rem!important; 
        margin-right: 1rem!important; 
    }
    .mx-4-md{ 
        margin-left: 1.5rem!important; 
        margin-right: 1.5rem!important; 
    }
    .mx-5-md{ 
        margin-left: 3rem!important; 
        margin-right: 3rem!important; 
    }

    .my-0-md{ 
        margin-top: 0!important; 
        margin-bottom: 0!important; 
    }
    .my-1-md{ 
        margin-top: .25rem!important; 
        margin-bottom: .25rem!important; 
    }
    .my-2-md{ 
        margin-top: .5rem!important; 
        margin-bottom: .5rem!important; 
    }
    .my-3-md{ 
        margin-top: 1rem!important; 
        margin-bottom: 1rem!important; 
    }
    .my-4-md{ 
        margin-top: 1.5rem!important; 
        margin-bottom: 1.5rem!important; 
    }
    .my-5-md{ 
        margin-top: 3rem!important; 
        margin-bottom: 3rem!important; 
    }

    .mt-0-md{ margin-top: 0!important; }
    .mt-1-md{ margin-top: .25rem!important; }
    .mt-2-md{ margin-top: .5rem!important; }
    .mt-3-md{ margin-top: 1rem!important; }
    .mt-4-md{ margin-top: 1.5rem!important; }
    .mt-5-md{ margin-top: 3rem!important; }

    .mb-0-md{ margin-bottom: 0!important; }
    .mb-1-md{ margin-bottom: .25rem!important; }
    .mb-2-md{ margin-bottom: .5rem!important; }
    .mb-3-md{ margin-bottom: 1rem!important; }
    .mb-4-md{ margin-bottom: 1.5rem!important; }
    .mb-5-md{ margin-bottom: 3rem!important; }

    .mr-0-md{ margin-right: 0!important; }
    .mr-1-md{ margin-right: .25rem!important; }
    .mr-2-md{ margin-right: .5rem!important; }
    .mr-3-md{ margin-right: 1rem!important; }
    .mr-4-md{ margin-right: 1.5rem!important; }
    .mr-5-md{ margin-right: 3rem!important; }

    .ml-0-md{ margin-left: 0!important; }
    .ml-1-md{ margin-left: .25rem!important; }
    .ml-2-md{ margin-left: .5rem!important; }
    .ml-3-md{ margin-left: 1rem!important; }
    .ml-4-md{ margin-left: 1.5rem!important; }
    .ml-5-md{ margin-left: 3rem!important; }
}

@media only screen and (max-width: 640px){
    .m-0-sm{ margin: 0!important; }
    .m-1-sm{ margin: .25rem!important; }
    .m-2-sm{ margin: .5rem!important; }
    .m-3-sm{ margin: 1rem!important; }
    .m-4-sm{ margin: 1.5rem!important; }
    .m-5-sm{ margin: 3rem!important; }

    .mx-0-sm{ margin: 0!important; }
    .mx-1-sm{ margin: .25rem!important; }
    .mx-2-sm{ margin: .5rem!important; }
    .mx-3-sm{ margin: 1rem!important; }
    .mx-4-sm{ margin: 1.5rem!important; }
    .mx-5-sm{ margin: 3rem!important; }

    .my-0-sm{ margin: 0!important; }
    .my-1-sm{ margin: .25rem!important; }
    .my-2-sm{ margin: .5rem!important; }
    .my-3-sm{ margin: 1rem!important; }
    .my-4-sm{ margin: 1.5rem!important; }
    .my-5-sm{ margin: 3rem!important; }

    .mt-0-sm{ margin-top: 0!important; }
    .mt-1-sm{ margin-top: .25rem!important; }
    .mt-2-sm{ margin-top: .5rem!important; }
    .mt-3-sm{ margin-top: 1rem!important; }
    .mt-4-sm{ margin-top: 1.5rem!important; }
    .mt-5-sm{ margin-top: 3rem!important; }

    .mb-0-sm{ margin-bottom: 0!important; }
    .mb-1-sm{ margin-bottom: .25rem!important; }
    .mb-2-sm{ margin-bottom: .5rem!important; }
    .mb-3-sm{ margin-bottom: 1rem!important; }
    .mb-4-sm{ margin-bottom: 1.5rem!important; }
    .mb-5-sm{ margin-bottom: 3rem!important; }

    .mr-0-sm{ margin-right: 0!important; }
    .mr-1-sm{ margin-right: .25rem!important; }
    .mr-2-sm{ margin-right: .5rem!important; }
    .mr-3-sm{ margin-right: 1rem!important; }
    .mr-4-sm{ margin-right: 1.5rem!important; }
    .mr-5-sm{ margin-right: 3rem!important; }

    .ml-0-sm{ margin-left: 0!important; }
    .ml-1-sm{ margin-left: .25rem!important; }
    .ml-2-sm{ margin-left: .5rem!important; }
    .ml-3-sm{ margin-left: 1rem!important; }
    .ml-4-sm{ margin-left: 1.5rem!important; }
    .ml-5-sm{ margin-left: 3rem!important; }
}






/* padding */

.pl-0{ padding-left: 0!important; }
.pl-1{ padding-left: .25rem!important; }
.pl-2{ padding-left: .5rem!important; }
.pl-3{ padding-left: 1rem!important; }
.pl-4{ padding-left: 1.5rem!important; }
.pl-5{ padding-left: 3rem!important; }

.pr-0{ padding-right: 0!important; }
.pr-1{ padding-right: .25rem!important; }
.pr-2{ padding-right: .5rem!important; }
.pr-3{ padding-right: 1rem!important; }
.pr-4{ padding-right: 1.5rem!important; }
.pr-5{ padding-right: 3rem!important; }

.px-0{ 
    padding-left: 0!important;
    padding-right: 0!important;
 }
.px-1{ 
    padding-left: .25rem!important; 
    padding-right: .25rem!important; 
}
.px-2{ 
    padding-left: .5rem!important;
    padding-right: .5rem!important; 
}
.px-3{ 
    padding-left: 1rem!important; 
    padding-right: 1rem!important; 
}
.px-4{ 
    padding-left: 1.5rem!important; 
    padding-right: 1.5rem!important;
}
.px-5{ 
    padding-left: 3rem!important; 
    padding-right: 3rem!important; 
}

.py-0{ 
    padding-top: 0!important;
    padding-bottom: 0!important;
 }
.py-1{ 
    padding-top: .25rem!important; 
    padding-bottom: .25rem!important; 
}
.py-2{ 
    padding-top: .5rem!important;
    padding-bottom: .5rem!important; 
}
.py-3{ 
    padding-top: 1rem!important; 
    padding-bottom: 1rem!important; 
}
.py-4{ 
    padding-top: 1.5rem!important; 
    padding-bottom: 1.5rem!important;
}
.py-5{ 
    padding-top: 3rem!important; 
    padding-bottom: 3rem!important; 
}


@media only screen and (max-width: 1600px){
    .p-0-xmd{ padding: 0!important; }
    .p-1-xmd{ padding: .25rem!important; }
    .p-2-xmd{ padding: .5rem!important; }
    .p-3-xmd{ padding: 1rem!important; }
    .p-4-xmd{ padding: 1.5rem!important; }
    .p-5-xmd{ padding: 3rem!important; }

    .px-0-xmd{ 
        padding-left: 0!important; 
        padding-right: 0!important; 
    }
    .px-1-xmd{ 
        padding-left: .25rem!important; 
        padding-right: .25rem!important; 
    }
    .px-2-xmd{ 
        padding-left: .5rem!important; 
        padding-right: .5rem!important; 
    }
    .px-3-xmd{ 
        padding-left: 1rem!important; 
        padding-right: 1rem!important; 
    }
    .px-4-xmd{ 
        padding-left: 1.5rem!important; 
        padding-right: 1.5rem!important; 
    }
    .px-5-xmd{ 
        padding-left: 3rem!important; 
        padding-right: 3rem!important; 
    }

    .py-0-xmd{ 
        padding-top: 0!important; 
        padding-bottom: 0!important; 
    }
    .py-1-xmd{ 
        padding-top: .25rem!important; 
        padding-bottom: .25rem!important; 
    }
    .py-2-xmd{ 
        padding-top: .5rem!important; 
        padding-bottom: .5rem!important; 
    }
    .py-3-xmd{ 
        padding-top: 1rem!important; 
        padding-bottom: 1rem!important; 
    }
    .py-4-xmd{ 
        padding-top: 1.5rem!important; 
        padding-bottom: 1.5rem!important; 
    }
    .py-5-xmd{ 
        padding-top: 3rem!important; 
        padding-bottom: 3rem!important; 
    }

    .pt-0-xmd{ padding-top: 0!important; }
    .pt-1-xmd{ padding-top: .25rem!important; }
    .pt-2-xmd{ padding-top: .5rem!important; }
    .pt-3-xmd{ padding-top: 1rem!important; }
    .pt-4-xmd{ padding-top: 1.5rem!important; }
    .pt-5-xmd{ padding-top: 3rem!important; }

    .pb-0-xmd{ padding-bottom: 0!important; }
    .pb-1-xmd{ padding-bottom: .25rem!important; }
    .pb-2-xmd{ padding-bottom: .5rem!important; }
    .pb-3-xmd{ padding-bottom: 1rem!important; }
    .pb-4-xmd{ padding-bottom: 1.5rem!important; }
    .pb-5-xmd{ padding-bottom: 3rem!important; }

    .pr-0-xmd{ padding-right: 0!important; }
    .pr-1-xmd{ padding-right: .25rem!important; }
    .pr-2-xmd{ padding-right: .5rem!important; }
    .pr-3-xmd{ padding-right: 1rem!important; }
    .pr-4-xmd{ padding-right: 1.5rem!important; }
    .pr-5-xmd{ padding-right: 3rem!important; }

    .pl-0-xmd{ padding-left: 0!important; }
    .pl-1-xmd{ padding-left: .25rem!important; }
    .pl-2-xmd{ padding-left: .5rem!important; }
    .pl-3-xmd{ padding-left: 1rem!important; }
    .pl-4-xmd{ padding-left: 1.5rem!important; }
    .pl-5-xmd{ padding-left: 3rem!important; }
}

@media only screen and (max-width: 960px){
    .p-0-md{ padding: 0!important; }
    .p-1-md{ padding: .25rem!important; }
    .p-2-md{ padding: .5rem!important; }
    .p-3-md{ padding: 1rem!important; }
    .p-4-md{ padding: 1.5rem!important; }
    .p-5-md{ padding: 3rem!important; }

    .px-0-md{ 
        padding-left: 0!important; 
        padding-right: 0!important; 
    }
    .px-1-md{ 
        padding-left: .25rem!important; 
        padding-right: .25rem!important; 
    }
    .px-2-md{ 
        padding-left: .5rem!important; 
        padding-right: .5rem!important; 
    }
    .px-3-md{ 
        padding-left: 1rem!important; 
        padding-right: 1rem!important; 
    }
    .px-4-md{ 
        padding-left: 1.5rem!important; 
        padding-right: 1.5rem!important; 
    }
    .px-5-md{ 
        padding-left: 3rem!important; 
        padding-right: 3rem!important; 
    }

    .py-0-md{ 
        padding-top: 0!important; 
        padding-bottom: 0!important; 
    }
    .py-1-md{ 
        padding-top: .25rem!important; 
        padding-bottom: .25rem!important; 
    }
    .py-2-md{ 
        padding-top: .5rem!important; 
        padding-bottom: .5rem!important; 
    }
    .py-3-md{ 
        padding-top: 1rem!important; 
        padding-bottom: 1rem!important; 
    }
    .py-4-md{ 
        padding-top: 1.5rem!important; 
        padding-bottom: 1.5rem!important; 
    }
    .py-5-md{ 
        padding-top: 3rem!important; 
        padding-bottom: 3rem!important; 
    }

    .pt-0-md{ padding-top: 0!important; }
    .pt-1-md{ padding-top: .25rem!important; }
    .pt-2-md{ padding-top: .5rem!important; }
    .pt-3-md{ padding-top: 1rem!important; }
    .pt-4-md{ padding-top: 1.5rem!important; }
    .pt-5-md{ padding-top: 3rem!important; }

    .pb-0-md{ padding-bottom: 0!important; }
    .pb-1-md{ padding-bottom: .25rem!important; }
    .pb-2-md{ padding-bottom: .5rem!important; }
    .pb-3-md{ padding-bottom: 1rem!important; }
    .pb-4-md{ padding-bottom: 1.5rem!important; }
    .pb-5-md{ padding-bottom: 3rem!important; }

    .pr-0-md{ padding-right: 0!important; }
    .pr-1-md{ padding-right: .25rem!important; }
    .pr-2-md{ padding-right: .5rem!important; }
    .pr-3-md{ padding-right: 1rem!important; }
    .pr-4-md{ padding-right: 1.5rem!important; }
    .pr-5-md{ padding-right: 3rem!important; }

    .pl-0-md{ padding-left: 0!important; }
    .pl-1-md{ padding-left: .25rem!important; }
    .pl-2-md{ padding-left: .5rem!important; }
    .pl-3-md{ padding-left: 1rem!important; }
    .pl-4-md{ padding-left: 1.5rem!important; }
    .pl-5-md{ padding-left: 3rem!important; }
}

@media only screen and (max-width: 640px){
    .p-0-sm{ padding: 0!important; }
    .p-1-sm{ padding: .25rem!important; }
    .p-2-sm{ padding: .5rem!important; }
    .p-3-sm{ padding: 1rem!important; }
    .p-4-sm{ padding: 1.5rem!important; }
    .p-5-sm{ padding: 3rem!important; }

    .px-0-sm{ 
        padding-left: 0!important; 
        padding-right: 0!important; 
    }
    .px-1-sm{ 
        padding-left: .25rem!important; 
        padding-right: .25rem!important; 
    }
    .px-2-sm{ 
        padding-left: .5rem!important; 
        padding-right: .5rem!important; 
    }
    .px-3-sm{ 
        padding-left: 1rem!important; 
        padding-right: 1rem!important; 
    }
    .px-4-sm{ 
        padding-left: 1.5rem!important; 
        padding-right: 1.5rem!important; 
    }
    .px-5-sm{ 
        padding-left: 3rem!important; 
        padding-right: 3rem!important; 
    }

    .py-0-sm{ 
        padding-top: 0!important; 
        padding-bottom: 0!important; 
    }
    .py-1-sm{ 
        padding-top: .25rem!important; 
        padding-bottom: .25rem!important; 
    }
    .py-2-sm{ 
        padding-top: .5rem!important; 
        padding-bottom: .5rem!important; 
    }
    .py-3-sm{ 
        padding-top: 1rem!important; 
        padding-bottom: 1rem!important; 
    }
    .py-4-sm{ 
        padding-top: 1.5rem!important; 
        padding-bottom: 1.5rem!important; 
    }
    .py-5-sm{ 
        padding-top: 3rem!important; 
        padding-bottom: 3rem!important; 
    }

    .pt-0-sm{ padding-top: 0!important; }
    .pt-1-sm{ padding-top: .25rem!important; }
    .pt-2-sm{ padding-top: .5rem!important; }
    .pt-3-sm{ padding-top: 1rem!important; }
    .pt-4-sm{ padding-top: 1.5rem!important; }
    .pt-5-sm{ padding-top: 3rem!important; }

    .pb-0-sm{ padding-bottom: 0!important; }
    .pb-1-sm{ padding-bottom: .25rem!important; }
    .pb-2-sm{ padding-bottom: .5rem!important; }
    .pb-3-sm{ padding-bottom: 1rem!important; }
    .pb-4-sm{ padding-bottom: 1.5rem!important; }
    .pb-5-sm{ padding-bottom: 3rem!important; }

    .pr-0-sm{ padding-right: 0!important; }
    .pr-1-sm{ padding-right: .25rem!important; }
    .pr-2-sm{ padding-right: .5rem!important; }
    .pr-3-sm{ padding-right: 1rem!important; }
    .pr-4-sm{ padding-right: 1.5rem!important; }
    .pr-5-sm{ padding-right: 3rem!important; }

    .pl-0-sm{ padding-left: 0!important; }
    .pl-1-sm{ padding-left: .25rem!important; }
    .pl-2-sm{ padding-left: .5rem!important; }
    .pl-3-sm{ padding-left: 1rem!important; }
    .pl-4-sm{ padding-left: 1.5rem!important; }
    .pl-5-sm{ padding-left: 3rem!important; }
}




/* ---Button---  */
.btn{
    font-size: 1rem;
    text-transform: capitalize;
    letter-spacing: 1px;
    border-radius: 6rem;
    font-weight: 500;
    border-color: transparent;
    padding: .5rem 1.25rem;
    box-shadow: none;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
.btn-sm{
    font-size: .75rem;
}
.btn-lg{
    font-size: 1.15rem;
}
.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disable{
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
    box-shadow: 0 0 16px 0.16rem #003fff32;
    letter-spacing: 1px;
    border-color: transparent;
}


.btn-primary{
    background: #0BFF7B;
    color: #0BFF7B;
    background: linear-gradient(0deg, #0BFF7B16 0%, #0BFF7B00 100%), #00000032;
    mix-blend-mode: normal;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 1.69px 13.521px 0px rgba(0, 0, 0, 0.12), 5.07px 5.07px 0.845px -5.915px #0BFF7Bbf inset, -5.07px -5.07px 0.845px -5.07px #0BFF7Bcc inset, 1.69px 1.69px 1.69px -0.845px #0BFF7Bbf inset, -1.69px -1.69px 1.69px -0.845px #0BFF7Bbf inset, 0px 0px 1.69px 1.69px #0BFF7B24 inset, 0px 0px 1.69px 1.69px #0BFF7B32 inset, 0px 0px 27.041px 0px #0BFF7B32 inset;
    backdrop-filter: blur(6px);
}
.btn-outline-primary{
    color: #0BFF7B;
    border-color: #0BFF7B;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus{
    background: #0BFF7B;
    color: #150737;
    background: linear-gradient(0deg, #0BFF7B72 0%, #0BFF7B80 100%), #0BFF7B72;
    mix-blend-mode: normal;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 1.69px 13.521px 0px rgba(0, 0, 0, 0.12), 5.07px 5.07px 0.845px -5.915px #0BFF7Bbf inset, -5.07px -5.07px 0.845px -5.07px #0BFF7Bcc inset, 1.69px 1.69px 1.69px -0.845px #0BFF7Bbf inset, -1.69px -1.69px 1.69px -0.845px #0BFF7Bbf inset, 0px 0px 1.69px 1.69px #0BFF7B24 inset, 0px 0px 1.69px 1.69px #0BFF7B32 inset, 0px 0px 27.041px 0px #0BFF7B32 inset;
}


.btn-secondary{
    background: #A4FFCA;
    color: #A4FFCA;
    background: linear-gradient(0deg, #A4FFCA16 0%, #A4FFCA00 100%), #00000016;
    mix-blend-mode: normal;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #A4FFCAbf inset, -5px -5px 1px -5px #A4FFCAcc inset, 2px 2px 2px -1px #A4FFCAbf inset, -2px -2px 2px -1px #A4FFCAbf inset, 0px 0px 2px 2px #A4FFCA24 inset, 0px 0px 2px 2px #A4FFCA32 inset, 0px 0px 28px 0px #A4FFCA32 inset;
    backdrop-filter: blur(6px);
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus{
    background: #A4FFCA;
    background: linear-gradient(0deg, #A4FFCA72 0%, #A4FFCA80 100%), #A4FFCA72;
    mix-blend-mode: normal;
    color: #110534;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #A4FFCAbf inset, -5px -5px 1px -5px #A4FFCAcc inset, 2px 2px 2px -1px #A4FFCAbf inset, -2px -2px 2px -1px #A4FFCAbf inset, 0px 0px 2px 2px #A4FFCA24 inset, 0px 0px 2px 2px #A4FFCA32 inset, 0px 0px 28px 0px #A4FFCA32 inset;
    backdrop-filter: blur(6px);
}


.btn-success{
    background: #00C66D;
    color: #fff;  
}
.btn-success:, .btn-success:active, .btn-success:focus{
    background: #00993B;
    color: #fff;
}


.btn-danger{
    background: #D10049;
    color: #fff; 
}
.btn-danger:, .btn-danger:active, .btn-danger:focus{
    background: #A80043;
    color: #fff;
}


.btn-warning{
    background: #F9A825;
    color: #fff;  
}
.btn-warning:, .btn-warningwarning:active, .btn-warningwarning:focus{
    background: #FF9B03;
    color: #fff;
}


.btn-info{
    background: #4A6DFF;
    color: #fff;  
}
.btn-info:, .btn-info:active, .btn-info:focus{
    background: #003CE6;
    color: #fff;
}


.btn-link{
    color: #0BFF7B;
}
.btn-link:, .btn-link:active, .btn-link:focus{
    color: #212121;
}



.btn-sm{
  font-size: .875rem;
}
.btn-sm:hover, .btn-sm:focus, .btn-sm:active{
  font-size: .875rem;
}
.btn-lg{
  font-size: 1.25rem;
}


.figma-button img{
    width: 24px;
    height: 24px;
}


/* Image */
.img-fullwidth{
    width: 100%;
    height: auto;
}
.img-fullheight{
    height: 100%;
    width: auto;
}
.img-radious{
    border-radius: 2rem;
    overflow: hidden;
}


/* Navbar (menubar) 
.navbar .logo .logo-img { 
    height: 2.75rem; 
    width: auto;
    border-radius: 16rem;
    padding: .25rem;
    background: linear-gradient(0deg, #A4FFCA16 0%, #A4FFCA08 100%), #00000016;
    mix-blend-mode: luminosity;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #ffffffbf inset, -5px -5px 1px -5px #ffffffcc inset, 2px 2px 2px -1px #ffffffbf inset, -2px -2px 2px -1px #ffffffbf inset, 0px 0px 2px 2px #ffffff24 inset, 0px 0px 2px 2px #ffffff32 inset, 0px 0px 28px 0px #ffffff32 inset;
    backdrop-filter: blur(6px);
}*/

.navbar .logo .logo-img { 
    height: 2.75rem; 
    width: auto;
}


.logo-mobile{
        display: none;
}
.navbar{
    background: transparent;
    border: 0px;
    width: 96%;
    margin: 1rem auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar .navbar-nav{
    border-radius: 16rem;
    background: linear-gradient(0deg, #A4FFCA16 0%, #A4FFCA00 100%), #00000008;
    mix-blend-mode: luminosity;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #ffffffbf inset, -5px -5px 1px -5px #ffffffcc inset, 2px 2px 2px -1px #ffffffbf inset, -2px -2px 2px -1px #ffffffbf inset, 0px 0px 2px 2px #ffffff24 inset, 0px 0px 2px 2px #ffffff32 inset, 0px 0px 28px 0px #ffffff32 inset;
    backdrop-filter: blur(6px);
    padding: 0rem;
    background: none;
    box-shadow: none;
    margin: auto;
}
.navbar .navbar-nav>li{
    padding: 0rem;
    margin: .25rem;
}
.navbar .navbar-nav>li>a.nav-link{
    text-decoration: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 16rem;
}

.navbar .navbar-nav>li>a.nav-link:hover, .navbar .navbar-nav>li>a:focus, .navbar .navbar-nav>li>a:active, .navbar .navbar-nav>li>a.nav-link.active, .navbar-light .navbar-nav .show>.nav-link{
    background: linear-gradient(0deg, #A4FFCA16 0%, #A4FFCA00 100%), #00000016;
    mix-blend-mode: normal;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #A4FFCAbf inset, -5px -5px 1px -5px #A4FFCAcc inset, 2px 2px 2px -1px #A4FFCAbf inset, -2px -2px 2px -1px #A4FFCAbf inset, 0px 0px 2px 2px #A4FFCA24 inset, 0px 0px 2px 2px #A4FFCA32 inset, 0px 0px 28px 0px #A4FFCA32 inset;
    backdrop-filter: blur(6px);
}
.navbar .navbar-nav>li>a, .navbar .navbar-nav>li>a.nav-link:hover, .navbar .navbar-nav>li>a:focus, .navbar .navbar-nav>li>a:active, .navbar .navbar-nav>li>a.nav-link.active, .navbar-light .navbar-nav .show>.nav-link{
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}

.top-nav-collapse{
    background-color: #0D0D1296;
    border-radius: 2rem;
    box-shadow: 0 0 1.5rem 0.48rem #10042E56;
    margin-top: .125rem;
    backdrop-filter: blur(4px);
}
.navbar, .top-nav-collapse{
    -webkit-transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
    -ms-transition: 0.5s all ease-in-out;
    transition: 0.5s all ease-in-out;  
}
.navbar-light .navbar-toggler{
    background-color: transparent;
    border-color: #0BFF7B16;
    color: #0BFF7B00;
    min-height: 48px;
    padding: .5rem;
    border-radius: 1rem;
    width: 4rem;
    border-radius: 16rem;
    padding: .125rem;
    background: linear-gradient(0deg, #A4FFCA16 0%, #A4FFCA08 100%), #A4FFCA16;
    mix-blend-mode: luminosity;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #A4FFCAbf inset, -5px -5px 1px -5px #A4FFCAcc inset, 2px 2px 2px -1px #A4FFCAbf inset, -2px -2px 2px -1px #A4FFCAbf inset, 0px 0px 2px 2px #A4FFCA24 inset, 0px 0px 2px 2px #A4FFCA32 inset, 0px 0px 28px 0px #A4FFCA32 inset;
    backdrop-filter: blur(6px);
}
.navbar-light button.navbar-toggler:focus{
    background-color: #0BFF7B00;
    border-color: transparent;
}
.navbar-light button.navbar-toggler .navbar-toggler-icon {
    background-image: url(../img/navbar-toggler.svg);
}




@media (min-width: 980px){
    .navbar-expand-lg .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .collapse:not(.show) {
        display: none;
    }
}

@media only screen and (max-width: 980px){
    .navbar{
        padding-left: .5rem;
        padding-right: .5rem;
        width: 100vw;
    }
    .top-nav-collapse{
        border-radius: 2rem;
    }
    .navbar-collapse.collapsing, .navbar-collapse.collapse {
        background-image: linear-gradient(180deg, #0d0d12 48%, #0b2919 99%);
        text-align: end;
        padding: 2rem;
        padding-bottom: 2rem;
        border-radius: .5rem .5rem 1rem 1rem;
    }
    .navbar .navbar-nav>li{
        width: fit-content;
    }
    .navbar .logo .logo-img{
        height: 3rem;
        border-radius: 16rem;
        padding: .25rem;
        background: linear-gradient(0deg, #A4FFCA16 0%, #A4FFCA08 100%), #00000016;
        mix-blend-mode: luminosity;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #ffffffbf inset, -5px -5px 1px -5px #ffffffcc inset, 2px 2px 2px -1px #ffffffbf inset, -2px -2px 2px -1px #ffffffbf inset, 0px 0px 2px 2px #ffffff24 inset, 0px 0px 2px 2px #ffffff32 inset, 0px 0px 28px 0px #ffffff32 inset;
        backdrop-filter: blur(6px);
    }
    .navbar .navbar-nav{
        background: none;
        box-shadow: none;
        align-items: center;
        margin-bottom: 1rem !important;
    }
    .navbar .navbr-text{
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

@media only screen and (max-width: 640px){
    .logo-desktop{
        display: none;
    }
    .logo-mobile{
        display: block;
    }
    .navbar .logo .logo-img{
        height: 4rem;
    }
}




/* Form */
form .form-group{
    margin-bottom: 1rem;
}
form .form-group label{
    margin-bottom: .5rem;
}
form#contact-form input, form#contact-form textarea{
    text-align: center;
    font-size: 1.15rem;
    padding: .75rrem;
    border-radius: .5rem;
    border: 1px solid #ddd;
    background: #fafafa;
    font-weight: 400;
}

form#contact-form input:hover,
form#contact-form input:active,
form#contact-form input:visited,
form#contact-form input:focus,
form#contact-form input:target,
form#contact-form textarea:hover,  
form#contact-form textarea:active, 
form#contact-form textarea:visited, 
form#contact-form textarea:focus,
form#contact-form textarea:target{
    color: #212121;
    font-size: 1.15rem;
    font-weight: 500;
    border-color: #bbb;
    box-shadow: 0 0 24px 0.48rem #10042E56;

}

form#contact-form input:active,
form#contact-form input:visited,
form#contact-form input:focus,
form#contact-form input:target,  
form#contact-form textarea:active, 
form#contact-form textarea:focus,
form#contact-form textarea:target{
    border-color: #00fb57;
    box-shadow: 0 0 24px 0.48rem #0BFF7B10;
}

form#contact-form input, 
form#contact-form input:hover,
form#contact-form input:active,
form#contact-form input:visited,
form#contact-form input:focus,
form#contact-form textarea, 
form#contact-form textarea:hover,
form#contact-form textarea:active, 
form#contact-form textarea:visited, 
form#contact-form textarea:focus {
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}

form#contact-form button{
    margin-top: 1rem;
}



/* Header */
header{
    padding-top: 7rem;
    padding-bottom: 3rem;
    width: 96%;
    height: auto;
    margin: 1rem auto;
    margin-top: 6rem;
    border-radius:2rem;
    overflow: hidden;
    background-image: url(/../img/grid.svg), linear-gradient(180deg, #0BFF7B00 48%, #0BFF7B00 99%);
    background-repeat: no-repeat;
    background-size: cover;
}
header, header:hover{
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
header:hover{
    box-shadow: 0 0 1rem 0.4rrem #0BFF7B00;
}

header .title-hero{
  font-size: 6rem;
  line-height: 125%;
  background: -webkit-linear-gradient(#A4FFCA, #0BFF7B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transition: 0.8s all ease-in-out;
  -moz-transition: 0.8s all ease-in-out;
  -o-transition: 0.8s all ease-in-out;
  -ms-transition: 0.8s all ease-in-out;
  transition: 0.8s all ease-in-out;
  mix-blend-mode: normal;
}
header .title-hero:hover{
    -webkit-transition: 0.8s all ease-in-out;
    -moz-transition: 0.8s all ease-in-out;
    -o-transition: 0.8s all ease-in-out;
    -ms-transition: 0.8s all ease-in-out;
    transition: 0.8s all ease-in-out;
    mix-blend-mode: luminosity;
}
header .sub-title-hero{
    font-size: 2rem;
    line-height: 125%;
}

header.header-wrap .header-content .badge{
  color: #A4FFCA;
}
header .badge{
    border-radius: 16rem;
    border: 1px solid #A4FFCA32;
    margin: .25rem;
}
header.header-wrap .header-content img.key-icon{
    width: 1.25rem;
    height: 1.25rem;
}

header.header-portfolio{
    width: 100%;
    height: auto;
    margin-top: 0px;
    padding-top: 0rem;
    border-radius: 0rem;
    background-image: url(/../img/grid.svg), linear-gradient(180deg, #030014 48%, #03001400 99%);
    background-repeat: no-repeat;
    background-size: cover;
}



@media only screen and (max-width: 860px){
    header .header-content{
        padding: 0rem 2rem;
    }
}
@media only screen and (min-width: 861px){
    header .header-content{
        padding: 0rem 3rem;
    }
    header .title-hero{
        font-size: 8rem;
        line-height: 125%;
    }
    header .sub-title-hero{
        font-size: 2rem;
        line-height: 125%;
    }
}
@media only screen and (min-width: 1280px){
    header .header-content{
        padding: 0rem 4rem;
    }
    header .title-hero{
        font-size: 8rem;
        line-height: 125%;
    }
    header .sub-title-hero{
        font-size: 1.5rem;
        line-height: 125%;
    }
}
@media only screen and (min-width: 1600px){
    header .header-content{
        padding: 0rem 6rem;
    }
    header .title-hero{
        font-size: 12rem;
        line-height: 125%;
    }
    header .sub-title-hero{
        font-size: 2rem;
        line-height: 125%;
    }
}


/* Sections  */

section{
    padding: 6rem 0rem;
}
section.content, footer{
    -webkit-transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
    -ms-transition: 0.5s all ease-in-out;
    transition: 0.5s all ease-in-out;
    background-image: url(../img/grid.svg), linear-gradient(180deg, #03001400 48%, #03001488 99%);
    background-repeat: no-repeat;
    background-size: cover;
}
section.content:hover, footer:hover{
    /* box-shadow: 0 0 2rem .8rem #0BFF7B04; */
    background-image: url(../img/grid.svg), linear-gradient(180deg, #03001408 48%, #03001488 99%);
    -webkit-transition: 0.5s all ease-in-out;
    -moz-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
    -ms-transition: 0.5s all ease-in-out;
    transition: 0.5s all ease-in-out;
}

section .content-alignment{
    align-items: center;
}

section img{
    width: 80%;
    height: 80%;
}

section .content-block{
    width: 88%;
    margin: 0 auto;
}

.mt-site{
    margin-top: 6.5rem !important;
}

section.portfolio-row{
    width: 96%;
    height: auto;
    margin: 1rem auto;
    border-radius:2rem;
    overflow: hidden;
    background-image: linear-gradient(180deg, #0B0120, #10042E);
}
section.portfolio-content{
    padding: 2.5rem 0rem;
    padding-bottom: 5.5rem;
    height: auto;
    overflow: hidden;
    background: #10042E;
    background-image: linear-gradient(180deg, #0B0120, #10042E);
    text-align: center;
    box-shadow: 0 0 .04rem .04rem #10042E56;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
section.portfolio-content:hover{
    z-index: 500;
    border-radius:2rem;
    box-shadow: 0 0 2rem .8rem #10042E08;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
section.portfolio-content .content-block-text{
    padding: 0 4rem;
}

section .scrolling-wrapper{
    overflow-x: auto; 
}
section .scrolling-wrapper .card-block{
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-color: #00000000;
    border: none;
}

section .section-title{
    font-size: 4rem;
    line-height: 125%;
} 
section .section-title-2{
    font-size: 2.75rem;
    line-height: 125%;
} 
section .section-sub-title{
    font-size: 1.25rem;
    line-height: 150%;
}

section .scrolling-wrapper .card-block-works{
    text-align: left;
}

section .blarb-1{
    border-radius: .125rem;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
section .blarb-1:hover{
    border-radius: 2rem;
    background: linear-gradient(0deg, #A4FFCA16 0%, #A4FFCA08 100%), #00000008;
    mix-blend-mode: luminosity;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #A4FFCAbf inset, -5px -5px 1px -5px #A4FFCAcc inset, 2px 2px 2px -1px #A4FFCAbf inset, -2px -2px 2px -1px #A4FFCAbf inset, 0px 0px 2px 2px #A4FFCA24 inset, 0px 0px 2px 2px #A4FFCA32 inset, 0px 0px 28px 0px #A4FFCA32 inset;
    backdrop-filter: blur(6px);
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}


iframe.about-video{
    position: absolute;
    top: 0px;
    z-index: -9999;
    opacity: 0;
}

@media only screen and (max-width: 1600px){
    section .section-title, .section-title-2{
        font-size: 2.75rem;
        line-height: 125%;
    } 
    section .section-sub-title{
        font-size: 1.25rem;
        line-height: 150%;
    }
}

@media only screen and (max-width: 960px){
    section.content, section.portfolio-content{
        padding: 3rem 0rem;
    }
    .flex-tab-column-reverse{
        flex-direction: column-reverse !important;
    }
}

@media only screen and (max-width: 640px){
    section .content-block, section.portfolio-content{
        width: 88%;
    }
    .d-mobile-visible{
        display: block !important;
    }
    .d-mobile-none{
        display: none !important;
    }
}


/* footer  */
footer { 
    padding: 7.5rem 0px 2.5rem 0px; 
    background-repeat: no-repeat;
    background-size: cover;
}
footer .logo{
    height: 2.75rem;
    width: auto;
    margin-bottom: 1.5rem;
}

footer .footer-contact{}

footer .social-icons { 
    margin-top: 2rem;
    margin-bottom: 2rem;
}
footer .social-icons a { 
    font-size: 2rem;
    line-height: 2rem; 
}
footer .social-icons div.icons { 
    height: 4rem;
    width: 4rem;
    align-content: center;
    padding: 1rem;
    margin: .5rem;
    border-radius: 16rem;
    background: linear-gradient(0deg, #A4FFCA16 0%, #A4FFCA00 100%), #00000008;
    mix-blend-mode: luminosity;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #ffffffbf inset, -5px -5px 1px -5px #ffffffcc inset, 2px 2px 2px -1px #ffffffbf inset, -2px -2px 2px -1px #ffffffbf inset, 0px 0px 2px 2px #ffffff24 inset, 0px 0px 2px 2px #ffffff32 inset, 0px 0px 28px 0px #ffffff32 inset;
    backdrop-filter: blur(6px);
}

footer .social-icons div.icons:hover{
    background: linear-gradient(0deg, #00a344 0%, #00a34424 100%), #0ea24c08;
    mix-blend-mode: normal;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 2px 12px 0px rgba(0, 0, 0, 0.12), 5px 5px 1px -6px #A4FFCAbf inset, -5px -5px 1px -5px #A4FFCAcc inset, 2px 2px 2px -1px #A4FFCAbf inset, -2px -2px 2px -1px #A4FFCAbf inset, 0px 0px 2px 2px #A4FFCA24 inset, 0px 0px 2px 2px #A4FFCA32 inset, 0px 0px 28px 0px #A4FFCA32 inset;
    backdrop-filter: blur(6px);
}

.text-white{
    color: #fff;
}
.text-muted{
    color: #ffffff88 !important;
}
.linkedin{
    color: #ffffff;
}
.behance{
    color: #fff;
}
.dribbble{
    color: #fff;
}
.twitter{
    color: #fff;
}
.producthunt{
    color: #fff;
}

footer .social-icons a.contra img{
    margin-top: -.25rem;
    width: 1.75rem;
    height: auto;

}

footer .social-icons a, footer .social-icons a:hover{
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}
footer .social-icons a:hover { 
    color: #0BFF7B;
}
footer .social-icons a img:hover {
    opacity: .8;
    -webkit-transition: 0.3s all ease-in-out;
    -moz-transition: 0.3s all ease-in-out;
    -o-transition: 0.3s all ease-in-out;
    -ms-transition: 0.3s all ease-in-out;
    transition: 0.3s all ease-in-out;
}



@media only screen and (max-width: 640px){
    footer {}
    footer .logo{ 
        height: 2rem; 
        width: auto; 
    }
}






/* about page  */
img.company-logo{
    height: 3rem;
    width: auto;
}
img.img-rounded{
    border-radius:1rem; 
}
img.un-logo{
    height: 3rem;
    width: auto;
}



/* Calendly */
.calendly-inline-widget{
    background-color: #10042e00 !important;
    border-radius: 2rem;
    overflow: hidden;
}