.topbackground {
    background: #EC851F;
    height: 400px;
}
.topbackground.min{
    height: 200px;
}

.logo {
    top: 2%;
    left: 5%;
}
.logomin{
    display: block;
    margin: 15px auto;
}

.backfigures {
    background-image: url("./assets/img/Header.png");
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background-repeat: repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}

.cardcredit {
    width: 100%;
    max-width: 280px;
    height: 100%;
    border-radius: 5px;
    background: #f3f3f3;
    padding: 10px 20px;
    box-sizing: border-box;
    position: relative;
}

.cardmonths {
    width: 100%;
    border-radius: 5px;
    background: #f3f3f3;
    padding: 5px 10px;
    box-sizing: border-box;
    position: relative;
    margin: 0 0 20px 0;
}

.cardmonths h6{
    color: #fff;
    position: relative;
    z-index: 1;
}

.headercolor{
    background: #EC851F;
    width: 100%;
    height: 55px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.calculate {
    background: #EC851F;
    color: #fff;
}

.calculatemore {
    color: #EC851F;
}

.cardfigure {
    width: 68px;
    height: 68px;
    position: absolute;
    top: -30px;
    right: -30px;
}

.backgroundfooter {
    background-image: url('./assets/img/backgroundfooter.png');
}

.cardvisualizer {
    width: 100%;
    max-width: 600px;
    height: 100%;
    border-radius: 5px;
    background: #f3f3f3;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    display: block;
    margin: auto;
}

.backfigureswhite {
    background-image: url("./assets/img/backgroundWhite.png");
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-repeat: repeat;
    background-position: center;
    background-attachment: scroll;
    background-size: cover;
}
iframe{
    border: none;
    margin: auto;
    display: block;
    padding: 0px;
}

@keyframes growProgressBar {
    0%, 33% { --pgPercentage: 0; }
    100% { --pgPercentage: var(--value); }
  }
  
  @property --pgPercentage {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
  }
  
  div[role="circularprogressbar"] {
    margin: auto;
    --size: 12rem;
    --fg: #ED8A29;
    --bg: #FADEC2;
    --pgPercentage: var(--value);
    animation: growProgressBar 3s 1 forwards;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: 
      radial-gradient(closest-side, white 80%, transparent 0 99.9%, white 0),
      conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0)
      ;
    font-family: Helvetica, Arial, sans-serif;
    font-size: calc(var(--size) / 5);
    color: var(--fg);
  }
  
  div[role="circularprogressbar"]::before {
    counter-reset: percentage var(--value);
    content: counter(percentage) '%';
  }

.p-color{
    background: #ED8A29;
    color: #fff;
}

ul:first-child{
    margin: 20px 15px;
    padding: 0;
    list-style: none;
}
ul li{
    margin: 0;
    padding: 10px 0;
    list-style: none;
}

.backgroundfooter {
    background-image: url('./assets/img/backgroundfooter.png');
}

[style*="--aspect-ratio"] > :first-child {
    width: 100%;
}
@supports (--custom:property) {
    [style*="--aspect-ratio"] {
        position: relative;
    }
    [style*="--aspect-ratio"]::before {
        content: "";
        display: block;
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }  
    [style*="--aspect-ratio"] > :first-child {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }  
}
iframe{
    border: 0;
    margin: 0;
    padding: 0px;
}