@keyframes circle-1-animation {
    0% {
        left: -20%;
        top: -18%;
    }
    10% {
        left: 50%;
        top: 5%;
        transform: rotate(0deg);
    }
    20% {
        left: 120%;
        top: 5%;
        transform: rotate(-90deg);
    }
    27% {
        left: 100%;
        top: -5%;
        transform: rotate(0);
    }
    35% {
        left: 60%;
        transform: rotate(0);
    }
    45% {
        left: 40%;
        top: 40%;
        transform: rotate(90deg);
    }
    58% {
        left: 110%;
        top: -30%;
        transform: rotate(90deg);
    }
    75% {
        left: 130%;
        top: -5%;
        transform: rotate(230deg);
    }
    72% {
        left: 90%;
        top: -8%;
        transform: rotate(230deg);
    }
    82% {
        left: 52%;
        top: -3%;
        transform: rotate(90deg);
    }
    90% {
        left: 20%;
        top: 5%;
        transform: rotate(180deg);
    }
    100% {
        left: -20%;
        top: -18%;
        transform: rotate(180deg);
    }
}
@keyframes circle-2-animation {
    0% {
        right: -30%;
        bottom: -18%;
    }
    10% {
        right: 30%;
        bottom: -4%;
        transform: rotate(0deg);
    }
    20% {
        right: 70%;
        bottom: 5%;
        transform: rotate(-90deg);
    }
    27% {
        right: 100%;
        bottom: 8%;
        transform: rotate(0);
    }
    35% {
        right: 120%;
        bottom: 2%;
        transform: rotate(0);
    }
    45% {
        right: 80%;
        bottom: -10%;
        transform: rotate(90deg);
    }
    58% {
        right: 95%;
        bottom: -20%;
        transform: rotate(90deg);
    }
    75% {
        right: 130%;
        bottom: 0%;
        transform: rotate(230deg);
    }
    72% {
        right: 90%;
        bottom: -8%;
        transform: rotate(230deg);
    }
    82% {
        right: 52%;
        bottom: -3%;
        transform: rotate(90deg);
    }
    90% {
        right: 20%;
        bottom: -4%;
        transform: rotate(180deg);
    }
    100% {
        right: -30%;
        bottom: -18%;
        transform: rotate(180deg);
    }
}

body { font-family: Arial, sans-serif; opacity: 1; overflow-x: hidden; position: relative; line-height: 1.3; color: #000; margin: 0; background-color: #e1eff0; }
img { max-width: 100%; }
svg { width: 100%; height: auto; }
.container { width: 100%; margin: 0 auto; max-width: 1600px; text-align: center; padding: 0 30px; box-sizing: border-box;}
.pageIndex.container { width: 100vw; margin: 0 auto; padding: 0; height: 100vh; max-width: 100%; position: relative; overflow: hidden; font-size: 14px; background-color: #080710; }
.wrapperForm {  width: 100%;  height: 100%;  max-width: 400px;  max-height: 500px;  color: #ffffff;  background-color:rgba(255,255,255,0.2);  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  padding: 30px;  border-radius: 10px;  text-align: center;  backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,0.1);  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; }
.wrapperForm-custom { max-width: 800px; max-height: 450px }
.wrapperForm-table { display: flex; }
.wrapperForm-table .wrapperForm-item { flex: 1 0; padding: 0 20px 0 0; position: relative; }
.wrapperForm-table .wrapperForm-item + .wrapperForm-item { padding:0  0  0 20px; }
.wrapperForm-table .wrapperForm-item + .wrapperForm-item:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; height: 100%; background-color: rgba(255,255,255,0.2); }
.wrapperForm-item p { margin: 30px 0 10px 0; font-size: 16px; font-weight: 500; }
.wrapperForm-item .noice { line-height: 1.4; font-style: italic; line-height: 1.4; text-align: left; margin: 15px 0 0 0; }
.wrapperForm-item .noice span + a { display: inline-block; color:#e13152 }
.wrapperForm-item img { width: 220px; }
.wrapperForm .database { overflow: hidden; }
.alert { position: relative; padding: 1rem 1rem; margin-top: 1rem; border: 1px solid transparent; border-radius: .25rem; }
.alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7; }
.pageIndex .background { width: 100%; height: 100%; max-width: 450px; max-height: 500px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.pageIndex .background .shape{ height: 200px; width: 200px; position: absolute; border-radius: 50%; }
.pageIndex .shape-1{ background: linear-gradient( #1845ad, #23a2f6 ); left: -20%; top: -18%; }
.pageIndex .shape-2{ background: linear-gradient(to right, #ff512f, #f09819); right: -30%; bottom: -18%; }
.section-title { font-weight: bold; margin-bottom: 50px; font-size: 36px; text-transform: uppercase; }
.database label { display: block; margin-top: 30px; font-size: 16px; font-weight: 500; text-align:  left; }
.database input { display: block; height: 50px; width: 100%; background-color: rgba(255,255,255,0.07); border-radius: 3px; padding: 0 10px; margin-top: 8px; font-size: 14px; font-weight: 300; line-height: 50px;border: none; color: #ffffff;box-sizing: border-box;outline: none; }
.database input::placeholder{ color: #e5e5e5; }
.database input[type="button"],
.database input[type="submit"] { margin-top: 50px; width: 100%; background-color: #ffffff; color: #080710; font-size: 18px; font-weight: 600; border-radius: 5px; cursor: pointer; display: inline-block; }
.shape-1 { animation: circle-1-animation 100s infinite; }
.shape-2 { animation: circle-2-animation 80s infinite; }
.triangle { width: 0; height: 0; margin: 0 auto; position: relative; border-left: 70px solid transparent; border-right: 70px solid transparent; border-bottom: 120px solid transparent; border-bottom-color: #89D9CA; }
.triangle-text-top,
.triangle-text-left,
.triangle-text-right { position: absolute; min-width: 120px; font-weight: 600; font-size: 18px; }
.triangle-text-top { top: -55px; left: 50%; color: #003bdc; transform: translateX(-50%); }
.triangle-text-left { top: 130px; right: -100%; color: #008e38; transform: translateX(calc(-50% + 45px)); }
.triangle-text-right { top: 130px; left: -100%; color: #e13152; transform: translateX(calc(50% - 45px)); }
.section-title { font-weight: bold; margin-bottom: 20px; font-size: 24px; text-align: left;}
.result { display: flex; justify-content: space-between; }
.result-item { width: 60%; }
.formula { font-size: 0.9em; color: #e2e2e2; }
.chart { text-align: center; margin-top: 10px; width: 40%; }
.wrapperGrid { position: relative; z-index: 10; display: grid; gap: 0 15px; grid-template-columns: repeat(6, 1fr);}
.wrapperGrid .Grid { position: relative; z-index: 10; text-align: center; transition: all 2s; }
.wrapperGrid .Grid p { margin-top: 0; margin-bottom: 10px;}
.wrapperGrid .Grid-1 { grid-area: grid1; grid-column: 1 / 4;} 
.wrapperGrid .Grid-2 { grid-area: grid2; grid-column: 4 / 7;} 
.wrapperGrid .Grid-3 { grid-area: grid3; grid-column: 1 / 3;} 
.wrapperGrid .Grid-4 { grid-area: grid4; grid-column: 3 / 5;} 
.wrapperGrid .Grid-5 { grid-area: grid5; grid-column: 5 / 7;} 
.Grid-content { display: flex; justify-content: space-around; align-items: center; }
.Grid-item { position: relative; flex-grow: 1; flex-basis: 0;}
.Grid-content-custom { position: initial;}
.Grid-content-custom .Grid-item { position: absolute; font-size: 0.85em;}
.Grid-content-custom .Grid-item-1 { top: 50%; left: 50%; transform: translateX(calc( -55% - 100px)) translateY(calc( -50% - 50px));}
.Grid-content-custom .Grid-item-2 { bottom: 50%; right: 50%; transform: translateX(calc( 55% + 100px)) translateY(calc( 50% + 100px));}
.Grid-title { font-size: 16px; text-transform: capitalize; margin-bottom: 15px; }
.mapBirthday { display: grid; width: 216px; margin: 0 auto; grid-template: 'c f i' 'b e h' 'a d g'; border: 1px solid gray;}
.mapBirthday .item { width: 70px; height: 70px; display : flex; align-items : center; border: 1px solid gray; font-size: 18px;}
.mapBirthday .item span { display: block; margin: 0 auto; }
.mapBirthday .item:nth-child(1) {grid-area: a}
.mapBirthday .item:nth-child(2) {grid-area: b}
.mapBirthday .item:nth-child(3) {grid-area: c}
.mapBirthday .item:nth-child(4) {grid-area: d}
.mapBirthday .item:nth-child(5) {grid-area: e}
.mapBirthday .item:nth-child(6) {grid-area: f}
.mapBirthday .item:nth-child(7) {grid-area: g}
.mapBirthday .item:nth-child(8) {grid-area: h}
.mapBirthday .item:nth-child(9) {grid-area: i}
.wrapperTitle { color: #000; backdrop-filter: blur(8px); -webkit-backdrop-filter:blur(8px); display: inline-block; position: relative; z-index: 10; text-align: center; margin: 80px 0 50px 0; padding-bottom: 20px; border-bottom: 1px solid #000; }
.wrapperTable { width: 100%; border: 1px solid gray; color:forestgreen; }
.wrapperTable th, .wrapperTable td { border: 1px solid gray; padding: 5px;}
.wrapperTable td[data="0"] { color: transparent; }
.wrapperTable td:last-child { font-size: 20px; font-weight: 700;}
.wrapperTable tr td:first-child, .wrapperTable tr td:first-child, .wrapperTable tr.tableName { font-weight: 700; color: #000;}
.wrapperTable tr.tableName .destiny_number { color: red; }
.wrapperBasic { display: flex; flex-wrap: wrap; text-align: left; max-width: 600px; }
.wrapperBasic > div { flex: 50%; position: relative;}
.wrapperBasic p > strong { min-width: 120px; display: inline-block; }
.wrapperBasic p > span { position: absolute; top: 70%; width: auto; left: 120px; font-style: italic; color: red; }
.wrapperBasic .title { font-weight: 700; font-size: 18px; color:#003bdc; position: relative; top: auto; left: auto; line-height: 1; }
.padding-top { padding-top: 25px; }
.padding-top-70 { padding-top: 70px; }
.margin-bottom { margin-bottom: 50px;}
.svg-container { display: flex; justify-content: center; }
.svg-container text { font-size: 16px;}
.svg-container text > span{ background-color: aquamarine;}
.wrapperLogo { display: block; position: absolute; width: 120px; height: 120px; top: 20px; left: 20px;}
#popup, #popup2 { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 700px; padding: 20px; background-color: white; box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); text-align: center; z-index: 1000; }
#popup2 { width: 300px; }
#popup button,
#popup2 button { margin: 0; position: absolute; right: 0; top: 0; font-size: 30px; border: none; width: 40px; height: 40px; line-height: 1; background-color: rgb(189, 5, 5); color: #fff; z-index: 100; cursor: pointer; }
#overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; }
@media only screen and (max-width: 767px) {
    .container {
        padding: 0 15px;
    }
    .wrapperGrid {
        display: block;
    }

    .wrapperGrid .Grid {
        margin-bottom: 30px;
    }

    .Grid-content,
    .wrapperBasic {
        display: block;
    }

    .Grid-content .Grid-item {
        margin-bottom: 30px;
    }

    .Grid-3 .Grid-content .Grid-item {
        margin-bottom: 100px;
    }

    .padding-top-70 {
        padding-top: 50px;
    }

    .triangle {
        position: relative;
    }

    .pageIndex.container {
        padding: 0;
    }

    #popup, #popup2 {
        width: calc(100% - 30px);
        padding: 15px;
    }
    .wrapperForm-custom,
    .wrapperForm {
        max-width: calc(100% - 30px);
        max-height: calc(100% - 30px);
        box-sizing: border-box;
        padding: 20px;
        overflow-y: auto;
    }
    .wrapperForm-table {
        display: block;
    }
    .wrapperForm-table .wrapperForm-item {
        flex: none;
        padding: 0;
    }

    .wrapperForm-table .wrapperForm-item + .wrapperForm-item {
        padding: 30px 0 0 0;
        margin-top: 30px;
    }

    .wrapperForm-table .wrapperForm-item + .wrapperForm-item:before {
        width: 100%;
        height: 1px;
    }

    .wrapperForm-item p {
        margin-top: 0;
    }

    .section-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .wrapperLogo {
        width: 70px;
        height: 70px;
        top: 10px;
        left: 10px;
    }

    .wrapperTitle h1 {
        font-size: 24px;
    }
    .wrapperBasic p > span {
        top: 100%;
    }
}