#header {
    /* width: 100%; */
    display: flex;
    justify-content: center;
    /* background-color: #2a2e42; */
    color: #fff;
    padding: 10px 5px 5px;
    /* border-top: 3px solid #239BD6; */
}
.body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#header2 {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 5px 5px 5px;
    /* border-top: 3px solid #239BD6; */
}

#footer {
    font-size: 11px;
    padding: 10px 5% 1% 5%;
    text-align: center;
}

#footer2 {
    font-size: 11px;
    padding: 10px 5% 1% 5%;
    text-align: left;
    background-color: white;
    justify-content: center;
}

.body-bg {
    background-image: url("/imgs/bg.png") !important;
    background: #f6f6f6;
}

.body-bgDeg {
    background-image: linear-gradient(180deg,
            #65a3ff 0%,
            rgba(132, 182, 254, 0.81) 16.36%,
            #ffffff 21.19%);
    max-width: 100%;
    height: 1000px;
}

.container-fluid {
    text-align: center;
    padding: 51px 254px 51px !important;
}

.formDiv {
    position: relative;
    max-width: 236px;
    margin: auto;
}

.logo-petaw {
    width: 125px;
    height: 116px;
    top: 24px;
    left: 135px;
    gap: 0px;
    opacity: 0px;
}

#iconphone {
    width: 35px;
    height: 35px;
    top: 411px;
    left: 69px;
    gap: 0px;
    opacity: 0px;
}

#iconphone2 {
    width: 35px;
    height: 35px;
    top: 17px;
    left: 0px;
    position: absolute;
}

#inviteContainer {
    margin: 25px;
}

.acceptBtn {
    background-color: #de6e2b;
    color: white;
}

#tel1 {
    padding-left: 32px;
    max-width: 265px;
    margin: auto;
    height: 50px;
    box-shadow: 0px 0px 8px #333 inset;
}

#tel2 {
    padding-left: 32px;
    max-width: 236px;
    margin: auto;
    height: 50px;
}

.register {
    font-family: Inter;
    font-size: 12px;
    font-weight: 600;
    line-height: 14.52px;
    text-align: center;
}

.register2 {
    font-family: Inter;
    font-size: 11px;
    font-weight: 500;
    line-height: 13.31px;
    text-align: left;
}

.input1 {
    border: none;

    outline: none;
}

.price {
    font-family: Inter;
    font-size: 10px;
    font-weight: 500;
    line-height: 12.1px;
    text-align: center;
}

.blink {
    animation: blink 1s ease-in-out infinite alternate;
}

@keyframes blink {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

.btnconn {
    font-weight: bold;
    color: white;
    background-color: black;
    border-radius: 20px;
    padding: 10px 50px;
    /* transform: skewX(-15deg); */
    cursor: pointer;
    /* transition: 0.2s; */
    font-size: 17px;
    line-height: 50px;
    border: 0;
}

.btnconn2 {
    font-weight: inter;
    color: rgb(0, 0, 0);
    background-color: #60dd68;
    padding: 10px 50px;
    border: 1px inner black !important;
    /* transform: skewX(-15deg); */
    cursor: pointer;
    /* transition: 0.2s; */
    font-size: 24px;
    line-height: 29.05px;
}

.btnconn3 {
    width: 328px;
    height: 57px;
    top: -16px;
    left: 3px;
    gap: 0px;
    border: 0;
    border-radius: 4px;
    opacity: 0px;
    background-color: #e5e5e5;
    color: #a5a3a4;
    font-family: Inter;
    font-size: 21.7px;
    font-weight: 500;
    line-height: 26.26px;

}


.buttonconn2 {
    background-color: #60dd68;
    padding: 10px 50px;
    font-weight: bold;
    color: #000000;
    border: 1px solid #000000;
    box-shadow: 3px 2px 4px 2px #cf1e1e61;
    font-family: Inter;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0em;
    text-align: center;
    width: 100%;
    animation: glow 1s infinite;
    animation-timing-function: ease-out;

    line-height: 50px;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 30px #f8616144;
        text-shadow: 0 0 0px #fff;
    }

    40% {
        box-shadow: 0 0 30px #f03535ee;
        text-shadow: 0 0 20px #fff;
    }

    100% {
        box-shadow: 0 0 30px #f8616144;
        text-shadow: 0 0 1px #fff;
    }
}



label {
    position: absolute;
    bottom: 60%;
    left: 1rem;
    margin-left: -50px;
    transform: translateY(-50%);
    color: #4b85ac;
    font-size: 1rem;
    pointer-events: none;
    padding: 0 0.3rem;
    background-color: #ffffff;
    transition: 200ms ease-in-out top, 200ms ease-in-out font-size,
        200ms ease-in-out color;
}

.btnconn3.active {
    background-color: rgba(75, 133, 172, 1);
    cursor: pointer;
}

.responsive-img {
    width: 360px;
    height: auto;
}

/* Mobile */
@media (max-width: 768px) {
    .responsive-img {
        width: 363px;
    }
    .container-fluid {
    text-align: center;
    padding: 21px 0px 21px !important;
}
}
.phone-input {
    position: relative;
    width: 100%;
}

.phone-input .prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
    font-size: 14px;
}

.phone-input input {
    padding-left: 70px; /* espace pour iphone + 40 */
    text-align: center;
    background: #effff4;
    border: 1px solid #9fdfb3;
    border-radius: 10px;
}

.phone-input input::placeholder {
    color: #000;
}


.pin-input {
    position: relative;
    width: 100%;
}

.pin-input .prefix {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    color: #333;
    font-size: 14px;
}

.pin-input input {
    padding-left: 70px; /* espace pour iphone + 40 */
    background: #effff4;
    border: 1px solid #9fdfb3;
    border-radius: 10px;
}

.pin-input input::placeholder {
    color: #000;
}