/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

:root {
    --white: #FFF;

    --primarycolor: #FAFAFA;
    --primarycolorheader: #6E44FF;
    --primarycolortext: #403D58;

    --primarycolorlogo-red: #ffc643;
    --primarycolorlogo-orange: #FFD275;
    --primarycolorlogo-light: #f5f5f5;
    --primarycolorbackground: #fdece4;

    --yellowopacity10: rgba(255, 201, 92, .6);

    /* --primarycolor: #FEFEFE;
    --primarycolorheader: #424852; */
}

#wrapper{
    background-color: #fff;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6 {
    font-family: nunito, sans-serif;
    font-weight: bold;
    color: var(--primarycolortext);
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.2rem;
}

p {
   font-family: 'Poppins', sans-serif;
   line-height: 1.6;
}

a {
    text-decoration: none;
}

section {
    padding: 6rem 0;
}

#nonprofitcategory {
    background-color: var(--white);
}

section:nth-child(1){
    padding: 0 0 0rem 0;
}

/*Navbar*/
.navbar {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   position: relative;
   z-index: 2;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   background-color: var(--white);
   width: 100%;
   max-width: 1312px;
   margin: 0 auto;
}

.brand-title {
   margin: .5rem;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   height: 3rem;
   width: 3rem;
}

.brand-title img {
   height: 2rem;

}

.navbar-links {
   height: 100%;
}

.navbar-links ul {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   margin: 0;
   padding: 0;
}

.navbar-links li {
   list-style: none;
}

.navbar-links li a {
   display: block;
   text-decoration: none;
   font-family: nunito, sans-serif;
   font-weight: bold;
   color: var(--primarycolortext);
   font-size: 1rem;
   padding: .5rem 0rem;
   margin: 0 1rem;
}

nav li > a {
   position: relative;
   text-decoration: none;
}

nav li > a:hover {
   color: var(--primarycolorlogo-orange);
}

nav li > a:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 2px;
   bottom: 0;
   left: 0;
   background-color: var(--primarycolorlogo-orange);
   visibility: hidden;
   -webkit-transform: scaleX(0);
   -ms-transform: scaleX(0);
       transform: scaleX(0);
   -webkit-transition: all 0.3s ease-in-out 0s;
   -o-transition: all 0.3s ease-in-out 0s;
   transition: all 0.3s ease-in-out 0s;
   }

nav li > a:hover:before {
   visibility: visible;
   -webkit-transform: scaleX(1);
   -ms-transform: scaleX(1);
       transform: scaleX(1);
}


.hamburger-menu {
   position: absolute;
   top: 1rem;
   right: 1rem;
   display: none;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: justify;
       -ms-flex-pack: justify;
           justify-content: space-between;
   width: 2rem;
   height: 1.5rem;
}

.hamburger-menu .bar {
   height: 4px;
   width: 100%;
   background-color: black;
   border-radius: 1rem;
   -webkit-transform-origin: left;
       -ms-transform-origin: left;
           transform-origin: left;
   -webkit-transition: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;
}
/* NAV Animation */
.hamburger-menu:hover .top {
-webkit-transform: rotate(40deg);
   -ms-transform: rotate(40deg);
       transform: rotate(40deg);
}

.hamburger-menu:hover .middle {
opacity: 0;
}

.hamburger-menu:hover .bottom {
-webkit-transform: rotate(-40deg);
   -ms-transform: rotate(-40deg);
       transform: rotate(-40deg);
}




.header-center {
   padding-bottom: 3rem;
   text-align: center;
}

.padding-left {
   padding-left: 2rem;
}

.padding-right {
   padding-right: 2rem;
}

.step h4{
  font-size: 3.2rem;
  font-family: 'Poppins', sans-serif !important;
  margin-top: -4rem;
  color: rgba(64, 61, 88, .12);
}

/* container */
#container {
   z-index: 1;
}

/* Main */

.welcome-grid {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   max-width: 1312px;
   margin: 0 auto;
   height: 100%;
}

.welcome-element {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}

.welcome-element:nth-child(1) {
   -ms-flex-preferred-size: 58.333%;
       flex-basis: 58.333%;
}

.welcome-element:nth-child(2) {
   -ms-flex-preferred-size: 41.667%;
       flex-basis: 41.667%;
}

.welcome-element-text h1{
   margin-bottom: 1.6rem;
}

.welcome-element-text {
   margin-right: 2rem;
}

.welcome-button {
   padding: 1rem 4rem;
   margin: 20px 10px 20px 0;
   border-radius: 2rem;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   -webkit-transition: background-color 0.25s linear;
   -o-transition: background-color 0.25s linear;
   transition: background-color 0.25s linear;
   /* border-color: var(--primarycolorheader); */
/*    border-color: var(--primarycolorlogo-red); */
/*    border-style: solid;
   border-width: 3px;
 */
}

.welcome-buttons {
   margin-top: 1.6rem;
}

.welcome-button-fill {
   /* background-color: var(--primarycolorheader) !important; */
   background-color: var(--primarycolorlogo-red) !important;
   -webkit-box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
           box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.welcome-button-fill h3{
   color: var(--primarycolorlogo-light) !important;
   text-shadow: 0px 2px 4px rgba(0,0,0,0.2)
}

.welcome-button-fill:hover{
    background-color: var(--primarycolortext) !important;
    color: #fff;
}

.welcome-button-empty {
   margin-left: 2rem;
}

.welcome-button-empty h3 {
   color: var(--primarycolorlogo-red) !important;
}

.welcome-button-empty:hover {
   background-color: var(--primarycolorlogo-red);
   
  
}

.welcome-button-empty:hover h3 {
    color: var(--primarycolorlogo-light) !important;
   
}

.welcome-button-simple {
   color: var(--primarycolorlogo-red) !important;
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
   display: inline-flex;
   padding: 1rem;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   margin: 20px 10px;
}

.welcome-button-simple h3 {
   color: var(--primarycolorlogo-red) !important;
}

.arrow {
   margin-left: 1rem;
   margin-top: -.4rem;
   fill: var(--primarycolorlogo-red);
   width: 2rem;
   
}

.welcome-button-simple > .arrow {
   -webkit-animation: slide1 1s ease-in-out infinite;
           animation: slide1 1s ease-in-out infinite;
}

.welcome-button-simple:hover h3, .welcome-button-simple:hover .arrow {
    color: var(--primarycolortext) !important;
    fill: var(--primarycolortext);
}

/* .welcome-button-simple:after {
   content:'';
   position:absolute;
   bottom:0;
   left:0;
   right:0;
   background:red;
   height: 6px;
   border-radius:0 6px 6px 0; 
} */

.welcome-element-photo .lottie-main{
   max-width:100%;
}

.tile-row{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   width: 100%;
   gap: 2rem;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;

}

.tile-row > * {
   -ms-flex-preferred-size: 100%;
       flex-basis: 100%;
}

.tile-column {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   gap: 2rem;
   max-width: 192px;
   min-width: 148px;

}

.tile-column > * {
   max-height: 196px;
}

.tile {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   min-height: 148px;
   min-width: 148px;
   max-height: 192px;
   max-height: 192px;
   width: 100%;
   background-color: var(--white);
   position: relative;
   /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
   /* -webkit-box-shadow: rgba(110, 68, 255, .45) 0px 2px 4px;
           box-shadow: rgba(110, 68, 255, .45) 0px 2px 4px; */
   border: 2px solid rgba(64, 61, 88, .06);
   border-radius: 1rem;
}


.tile:before {
   content: '';
   display: block;
   width: 100%;
   padding-top: calc((1/1) * 100% ); /* square trick */
}

.tile-column-center {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}

.tile-column-down {
   -webkit-box-pack: end;
       -ms-flex-pack: end;
           justify-content: end;
   margin-top: 2rem;
}

.tile-inside {
   position: absolute;
   top: calc(50% - .5rem);  
   left: 50%; 
   -webkit-transform: translate(-50%, -50%); 
       -ms-transform: translate(-50%, -50%); 
           transform: translate(-50%, -50%); 
   width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -ms-flex-line-pack: center;
       align-content: center;
}

/* .tile-inside > *{
   flex-basis: 100%;

} */

.tile-inside h3{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   text-align: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-margin-before: 0px;
           margin-block-start: 0px;
   -webkit-margin-after: 0px;
           margin-block-end: 0px;
   color: var(--primarycolortext);
   opacity: 1;
   font-weight: 600;
}

.tile-inside img {
   width: calc(100% );
   height: calc(100% );
   min-width: 81px;
   min-height: 81px;
   max-width: 98px;
   max-height: 98px;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -ms-flex-line-pack: center;
       align-content: center;
   padding-bottom: .4rem;
   margin: 0 auto;
}

.tile-column.ninja {
       display: none;
       visibility: hidden;
   }

/* How It Works */

.howitworks-grid {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   width: 100%;
   gap: 2rem;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -ms-flex-line-pack: center;
       align-content: center;
   padding: 2rem 0;
   height: calc(528px * (2/3));
   
}

.howitworks-grid > * {
   -ms-flex-preferred-size: 100%;
       flex-basis: 100%;
}

.howitworks-element {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -ms-flex-preferred-size: 1;
       flex-basis: 1;
   max-width: 528px;
   min-width: 148px;
   /* max-height: calc(100% * 1.33333); */
}

/* .howitworks-element:before {
   content: '';
   display: block;
   width: 100%;
   padding-top: calc(528px * 0.75); 
} */

.howitworks-element-photo {
   /* background-color: var(--primarycolorbackground); */
  /*  -webkit-box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
           box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
   border: 2px solid rgba(64, 61, 88, .06);
   border-radius: 1rem;
}

.howitworks-element-text {
  /*  margin-top: -2rem; */
   padding: 0 3.2rem;
}

/* Credit Card */

#creditcard {
   max-width: 1200px;
   margin: 0 auto;
}

.creditcard-grid {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   width: 100%;
   gap: 2rem;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -ms-flex-line-pack: center;
       align-content: center;
   
}

.creditcard-grid > * {
   -ms-flex-preferred-size: 100%;
       flex-basis: 100%;
}

.creditcard-photo {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -ms-flex-preferred-size: 2;
       flex-basis: 2;
   max-width: 1000px;
   min-width: 148px;
}

.creditcard-element {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -ms-flex-preferred-size: 1;
       flex-basis: 1;
   max-width: 528px;
   min-width: 148px;
}

.creditcard-element-text {
   padding: 0 3.2rem;
}

/* Benefit */

.benefitcard-grid {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   width: 100%;
   gap: 2rem;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}

.benefitcard-grid > * {
   -ms-flex-preferred-size: 100%;
       flex-basis: 100%;
}

.benefitcard-column-space {
   -ms-flex-preferred-size: 8.333%;
   flex-basis: 8.333%;
   max-width: 80px;
   gap: 2rem;

}

.benefitcard-column {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -ms-flex-preferred-size: 1;
       flex-basis: 1;
   gap: 2rem;
   max-width: 304px;
   min-width: 148px;
}

.benefitcard-column-text {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -ms-flex-preferred-size: 1;
       flex-basis: 1;
   gap: 2rem;
   max-width: 384px;
   min-width: 148px;
   padding-left: 2rem;
}

.benefitcard-column-center {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}

.benefitcard {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   width: 100%;
   background-color: var(--white);
   color: rgba(110, 68, 255, .06);
   position: relative;
   border: 2px solid rgba(64, 61, 88, .06);
   border-radius: 1rem;
}

.benefitcard:before {
   content: '';
   display: block;
   width: 100%;
   padding-top: calc(100% * 1.33333); /* square trick */
}

.benefitcard .benefitcard-inside {
   position: absolute;
   top: calc(50% - .5rem);  
   left: 50%; 
   -webkit-transform: translate(-50%, -50%); 
       -ms-transform: translate(-50%, -50%); 
           transform: translate(-50%, -50%); 
   width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -ms-flex-line-pack: center;
       align-content: center;
}

.benefitcard-inside h3{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   text-align: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -webkit-margin-before: 0px;
           margin-block-start: 0px;
   -webkit-margin-after: 0px;
           margin-block-end: 0px;
   color: var(--primarycolortext);
   opacity: 1;
   font-weight: 600;
   max-width: calc(100% - 3rem);
   margin: 0 auto;
   line-height: 1.25;
}

.benefitcard-inside img {

   min-width: 81px;
   min-height: 81px;
   max-width: 188px;
   max-height: 188px;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   -ms-flex-line-pack: center;
       align-content: center;
   padding-bottom: .4rem;
   margin: 0 auto;
}



.benefitcard-text h1, .howitworks-element h2 {
   margin-bottom: 1.6rem;
}

/* The end */

.cta-grid{
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   width: 100%;
   gap: 2rem;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
}

.app-icon-btn { 
width: 45%;
max-width: 160px;
color: #fff;
margin: 20px 10px;
text-align: left;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-size: 10px;
text-transform: uppercase; 
padding: 1rem 2rem;
border-radius: 2rem;
text-shadow: 0px 2px 4px rgb(0 0 0 / 20%)
}

.app-icon-btn p {
line-height: 1rem;
text-align: left;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-size: 10px;
text-transform: uppercase;
text-shadow: 0px 2px 4px rgb(0 0 0 / 20%);   

}

.color-btn {
background-color: #ffc643;
-webkit-transition: background-color 0.25s linear;
-o-transition: background-color 0.25s linear;
transition: background-color 0.25s linear; 

}

.color-btn:hover {
   background-color: var(--primarycolortext);
}

i {
width: 20%;
text-align: center;
font-size: 28px;
margin-right: 7px;
}

.big-txt {
font-size: 17px;
text-transform: capitalize;
}

.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
   -ms-flex-align: center;
       align-items: center;
-webkit-box-pack: center;
   -ms-flex-pack: center;
       justify-content: center;
}

/* Animations */

@-webkit-keyframes slide1 {
0%,
100% {
   -webkit-transform: translate(0, 0);
           transform: translate(0, 0);
}

50% {
   -webkit-transform: translate(2px, 0);
           transform: translate(2px, 0);
}
}

@keyframes slide1 {
0%,
100% {
   -webkit-transform: translate(0, 0);
           transform: translate(0, 0);
}

50% {
   -webkit-transform: translate(2px, 0);
           transform: translate(2px, 0);
}
}

.lottie-center {
   max-width: 1000px;
   margin: 0 auto;
   padding: 2rem 0;
}

#a_dog {
   max-width: 1000px;
   margin: 0 auto;
}

#a_dog2 {
    max-width: 1000px;
    margin: 0 auto;
 }

.dyplom-info{
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: justify;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    max-width: 420px;
    flex-direction: column;
    margin: 0 auto;
    
}
.dyplom-info > *{
    text-align: center;
}


footer {
    width: 100%;
    background-color: var(--white);
    padding: 2rem 0;
    position: relative;
}

footer::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    background-color: rgba(64, 61, 88, .06);
}

.footer-grid{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    max-width: 1312px;
    margin: 0 auto;
    /* padding: .5rem 0; */
    flex-direction: column;
    padding: 2rem 0;
}

.footer-grid:nth-child(2){
    padding: 0 0 2rem 0;
}
.footer-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 6rem;
 
 }
 
 .footer-logo svg{
    height: 100%;
 }

 .footer-logo svg path {
     fill: var(--primarycolortext);
 }

 .footer-social-media {
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 2rem;
} 

.footer-social-media ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    
 }

.footer-tile a{
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 2.2rem;
    width: 2.2rem;
    margin: 0 .5rem;
}

.footer-tile svg path {
    fill: var(--primarycolortext);
    transition: ease-in-out 0.2s all;
}

.footer-tile a:hover svg path, .footer-tile a:active svg path {
    fill: var(--primarycolorlogo-red);
    opacity: 1;
}

.footer-text a{
    color: var(--primarycolortext);
    position: relative;
    transition: ease-in-out 0.2s all;
    padding: .3rem 0;
}

.footer-text a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 4px;
    bottom: 0;
    left: 0;
    background-color: var(--primarycolorlogo-orange);
/*     -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
        transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s; */
}

.footer-text a:hover, .footer-text a:active {
    color: #ffc500;
}

/* .footer-text a:hover:before{
    background-color: var(--primarycolortext);
} */

/* RWD */

@media screen and (max-width: 1331px) {
   section {
       padding: 2rem 3rem;
   }

   section:nth-child(1){
       padding: 0rem 3rem 4rem 3rem;
   }

   p{
      line-height: normal;
   }

   .welcome-grid {
      height: 100%;
   }

/*    .welcome-element:nth-child(1){
      -ms-flex-preferred-size: 41.667%;
          flex-basis: 41.667%;
   }
   .welcome-element:nth-child(2){
      -ms-flex-preferred-size: 58.333%;
          flex-basis: 58.333%;
   } */


   .howitworks-grid{
      height: 100%;
   }

   .step h4 {
      font-size: 2.4rem;
      margin-top: -2rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding: 0 rem;
      margin-bottom: 1rem;
    }
    
    .howitworks-element-text {
      padding: 0 0 0 2.4rem;
    }

   .tile-row {
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
           height: 100%;
           max-width: 642px;
           margin: 0 auto;
       
   }
   .tile-column {
       min-width: 12rem;
       -ms-flex-wrap: wrap;
           flex-wrap: wrap;
   }

   .tile-column-center {
       -ms-flex-line-pack: start !important;
           align-content: start !important; 
       -webkit-box-pack: end !important; 
           -ms-flex-pack: end !important; 
               justify-content: end !important;
       
   }

   .tile-column-down {
       -webkit-box-pack: start;
           -ms-flex-pack: start;
               justify-content: flex-start;
       margin-top: 0rem;
   }

   .tile-column:nth-child(1) {
       -webkit-box-ordinal-group: 5;
           -ms-flex-order: 4;
               order: 4;
       -ms-flex-line-pack: end !important;
           align-content: flex-end !important;
   }
   
   .tile-inside img{
      max-width: 98px;
      max-height: 98px;
   }

   .benefitcard-inside img {
       max-width: calc(100% - 2rem);
       max-height: calc(100% - 2rem);
   }

   .benefitcard-inside h3 {
       max-width: calc(100% - 2rem);
       max-height: calc(100% - 2rem);
       margin: 0 auto;
   }

}

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

   h1 {
      font-size: 1.6rem;
  }

  h2 {
      font-size: 1.4rem;
  }

  h3 {
      font-size: 1.2rem;
  }

  p {
      font-size: .9rem;
      line-height: 1.4rem;
  }

  .navbar{
     position: relative;
  }
    

   .tile-row{
       height: 100%;
       max-width: 418px;
       margin: 0 auto;
   }

   .tile-column {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   gap: 2rem;
   max-width: 148px;

   }

   .tile-column > * {
   min-width: 148px;
   }

   .tile {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   min-height: 148px;
   min-width: 148px;
   width: 100%;
   background-color: var(--white);
   position: relative;
   /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
   /* -webkit-box-shadow: rgba(110, 68, 255, .45) 0px 2px 4px;
           box-shadow: rgba(110, 68, 255, .45) 0px 2px 4px; */
   border: 2px solid rgba(64, 61, 88, .06);
   border-radius: 1rem;
   }

   .tile-column.ninja {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       visibility: visible;

   }

   .tile-column-center {
           -ms-flex-line-pack: end !important;
               align-content: flex-end !important; 
           -webkit-box-pack: start !important; 
               -ms-flex-pack: start !important; 
                   justify-content: flex-start !important;
       
   }

   .tile-column-down {
       -webkit-box-pack: start;
           -ms-flex-pack: start;
               justify-content: flex-start;
       margin-top: 0rem;
   }

   .tile-column:nth-child(2), .tile-column:nth-child(4) {
       margin-top: 7rem;
       margin-bottom: -7rem;
   }
   .tile-column:nth-child(1) {
       margin-top: -14rem; 
   }

/*    .footer-grid{
    flex-direction: column;
    width: 100%;
    padding: 2rem 0;  
    }

    .footer-social-media {
        padding-top: 2rem;
    }
 */

    .footer-tile a{
        height: 3rem;
        width: 3rem;
        margin: 0 .75rem;
    }

/*     .welcome-element-photo .lottie-main {
        max-width: 80%;
        height: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;  
        -webkit-box-pack: center;  
            -ms-flex-pack: center;  
                justify-content: center;
        -ms-flex-line-pack: center;
            align-content: center;

        margin: 0 auto;
    } */

}


@media (max-width: 768px) {

   .navbar {
      position: fixed;
      top: 0;
      left: 0;
      max-width: 768px;
      width: 100vw;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       -webkit-box-align: start;
           -ms-flex-align: start;
               align-items: flex-start;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      overflow: hidden;
      /* min-width: 0px; */
       
   }

   .hamburger-menu {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
   }

   .navbar-links {
       display: none;
       width: 100%;
       height: 100vh;
   }

   .navbar-links ul {
       width: 100%;
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
   }

   .navbar-links ul li {
       text-align: center;
   }

   .navbar-links ul li a {
       padding: 1rem 0rem;
       margin: 1rem 0;
       font-size: 1.6rem;
   }

   .navbar-links.active {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
   }

   nav li > a:hover:before{
       visibility: hidden;
   }

   section {
       padding: 2rem 3rem;
   }

   section:nth-child(1){
       padding: 4rem 3rem;
       margin-top: 1rem;
   }

   /* WELCOME GRID */

   .welcome-grid {
       -webkit-box-orient: vertical;
       -webkit-box-direction: reverse;
           -ms-flex-direction: column-reverse;
               flex-direction: column-reverse;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
       -webkit-box-align: center;
           -ms-flex-align: center;
               align-items: center;
       max-width: 100%;
       height: 100%;
   }

   /* .welcome-element {
       display: flex;
       justify-content: center;
       align-content: center;
   } */

   .welcome-element {
      max-width: 528px;
   }

   .welcome-element-text{
      margin-right: 0;
   }

   .welcome-element-photo .lottie-main {
       max-width: 70%;
       height: auto;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;  
       -webkit-box-pack: center;  
           -ms-flex-pack: center;  
               justify-content: center;
       -ms-flex-line-pack: center;
           align-content: center;
       margin: 0 auto;
   }

   /* HowItWorks */

   #howitworks h1.header-center{
       padding-bottom: 0;
   }

   .howitworks-grid{
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
               -webkit-box-align: center;
                   -ms-flex-align: center;
                       align-items: center;
       max-width: 100%;
       height: 100%;
       gap: 2.4rem;
       margin: 4rem 0; 
   }

   .howitworks-grid:nth-child(2n){
       -webkit-box-orient: vertical;
       -webkit-box-direction: reverse;
           -ms-flex-direction: column-reverse;
               flex-direction: column-reverse;
   }

   .step h4{
       font-size: 2rem;
       margin-top: 0rem;
       display: none;
   }

   .howitworks-element-text {
       padding: 0;
   }

   .howitworks-element-text h2 {
       margin-bottom: 1rem;
   }

   .howitworks-element-photo img{
      max-width: 100%;
      height: auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -ms-flex-line-pack: center;
      align-content: center;
      width: 528px;
      margin: 0 auto;
   }

   /* nonprofitcategory */

   .tile-row{
       height: 100%;
       max-width: 418px;
       margin: 0 auto;
   }

   .tile-column {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   gap: 2rem;
   max-width: 148px;

   }

   .tile-column > * {
   min-width: 148px;
   }

   .tile {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
   min-height: 148px;
   min-width: 148px;
   width: 100%;
   background-color: var(--white);
   position: relative;
   /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
   /* -webkit-box-shadow: rgba(110, 68, 255, .45) 0px 2px 4px;
           box-shadow: rgba(110, 68, 255, .45) 0px 2px 4px; */
   border: 3px solid rgba(110, 68, 255, .06);
   border-radius: 1rem;
   }

   .tile-column.ninja {
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
       visibility: visible;

   }

   .tile-column-center {
           -ms-flex-line-pack: end !important;
               align-content: flex-end !important; 
           -webkit-box-pack: start !important; 
               -ms-flex-pack: start !important; 
                   justify-content: flex-start !important;
       
   }

   .tile-column-down {
       -webkit-box-pack: start;
           -ms-flex-pack: start;
               justify-content: flex-start;
       margin-top: 0rem;
   }

   .tile-column:nth-child(2), .tile-column:nth-child(4) {
       margin-top: 7rem;
       margin-bottom: -7rem;
   }
   .tile-column:nth-child(1) {
       margin-top: -14rem; 
   }

   /* =========== CREDIT CARD ========= */

   .creditcard-grid{
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
           -webkit-box-align: center;
               -ms-flex-align: center;
                   align-items: center;
   max-width: 100%;
   margin: 0 0;
   }

   .creditcard-photo{
   max-width: 480px;
   height: -webkit-fit-content;
   height: -moz-fit-content;
   height: fit-content;
   }

   /* =========== Benefit ========= */

   .benefitcard-grid {
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
           -webkit-box-align: center;
               -ms-flex-align: center;
                   align-items: center;
   max-width: 100%;
   margin: 0 0;
   height: 100%;;
   }

   .benefitcard-column{
       max-width: 75%;
       min-width: calc( 50% + 2rem );         
   }

   .benefitcard {
      max-width: 100%;

   }

   .benefitcard-column-text {
   padding: 1rem 0;
   max-width: 100%;
   }

   .benefitcard-column-text h1{
   margin-bottom: 1rem;
   }

   /* APPS DONWLOAD */

   .cta-grid{
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
   max-width: 100%;
   margin: 0 0;
   }

   .app-icon-btn {
   height: auto;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;  
   -webkit-box-pack: center;  
       -ms-flex-pack: center;  
           justify-content: center;
   -ms-flex-line-pack: center;
       align-content: center;
   width: 300px;
   margin: 0 auto;
   }
   .dyplom-info {
    width: 360px;
    }
}

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

   section {
       padding: 2rem 1.5rem;
   }

   section:nth-child(1){
       padding: 4rem 1.5rem 2rem 1.5rem;
   }

   .welcome-element-photo .lottie-main {
      max-width: 60%;
   }
   .howitworks-grid {
       margin: 0 0;
       padding: 2rem 0;
   }

   .tile-row {
       gap: 1.5rem;
   }

   .tile-column {
       max-width: 148px !important;
       min-width: 0px;
       gap: 1.5rem;
   }

   .tile-column:nth-child(2), .tile-column:nth-child(4) {
       margin-top: 5rem;
       margin-bottom: -5rem;
   }
   .tile-column:nth-child(1) {
       margin-top: -11rem;
   }

   .tile{
       border: 2px solid rgba(64, 61, 88, .06);
   }

   .tile-inside img{
       max-width: 81px;
       max-height: 81px;
    }

   /* =========== Benefit ========= */

   .benefitcard-grid {
       -webkit-box-orient: vertical;
       -webkit-box-direction: normal;
           -ms-flex-direction: column;
               flex-direction: column;
       -webkit-box-pack: center;
           -ms-flex-pack: center;
               justify-content: center;
               -webkit-box-align: center;
                   -ms-flex-align: center;
                       align-items: center;
       max-width: 100%;
       margin: 0 0;
       height: 100%;;
       }

       .benefitcard-column{
           max-width: 75%;
           min-width: 61.8%;
           
       }

       .benefitcard {
          max-width: 100%;

       }

       .benefitcard-column-text {
       padding: 1rem 0;
       max-width: 100%;
       }

       .benefitcard-column-text h1{
       margin-bottom: 1rem;
       }

}

@media screen and (max-width: 367px) { 
   .tile-column:nth-child(2), .tile-column:nth-child(4) {
       margin-top: 0;
       margin-bottom: 0;
   }
   .tile-column:nth-child(1) {
       margin-top: 0;
   }

}