#contactform.hidden {
    opacity: 0;
}
#contactform {
    z-index: 30;
    position: fixed;
    width: 100vw;
    height: 100dvh;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.25);
    transition:
        opacity var(--transition_time)
    ;

    .content.hidden {
        transform: translateX(100%);
    }

    .content {
        position: fixed;
        right: 0;
        height: 100dvh;
        width: 100%;
        background: var(--bg);
        box-shadow: rgba(0,0,0,.35) 0px 0px 40px 10px;
        transition:
            width var(--transition_time),
            transform var(--transition_time)
        ;
        display: flex;
        flex-direction: column;

        .head {
            display: flex;
            justify-content: start;
            padding: var(--padding) var(--padding) 0;
            svg {
                transition:
                    transform var(--transition_time)
                ;
                width: 25px;
                background: rgba(0,0,0,.07);
                border-radius: 100px;
                padding: 4px;
                cursor: pointer;
            }
            svg:hover {
                background: rgba(0,0,0,.15);
            }
            svg:active {
                transform: scale(.85);
            }
        }
        .body.hidden {
            transform: translateX(20px);
            opacity: 0;
        }
        .body.next {
            transform: translateX(-20px);
            opacity: 0;
        }
        .body {
            display: flex;
            flex-direction: column;
            padding: 0 var(--padding);
            gap: 0px;
            font-family: 'Nunito';

            transition:
                opacity var(--transition_time),
                transform var(--transition_time)
            ;


            h2 {
                font-weight: normal;
                font-family: 'Playfair Display';
                margin: var(--padding) 0 0;
                margin-bottom: 20px;
            }
            >input {
                background-color: #fff;
                box-shadow: rgba(0,0,0,.15) 0px 0px 10px 1px;
                border-radius: 10px;
                border: 0;
                outline: 0;
            }

            
            .input {
                display: flex;
                max-width: 100%;
                /* padding: 10px; */
                background-color: #fff;
                box-shadow: rgba(0,0,0,.15) 0px 0px 15px 0px;
                border-radius: 10px;
                margin: 5px 0 20px;
                .country {
                    padding: 10px;
                    border-right: solid 1px rgba(0,0,0,.15);
                }
                input {
                    width: 100%;
                    background: transparent;
                    border: 0;
                    padding: 10px;
                    outline: none;
                    font-family: 'Nunito';
                    font-size: 16px;
                }
            }
            .btn {
                display: flex;
                justify-content: end;
                button {
                    margin-top: 10px;
                    padding: 10px 20px;
                    border-radius: 10px;
                    border: 0;
                    font-family: 'Nunito';
                    font-size: 16px;
                    font-weight: bold;
                    color: #fff;
                    box-shadow: rgba(0,0,0,.15) 0px 0px 15px 1px;
                    background:
                        linear-gradient(
                            -60deg,
                            var(--color500) 00%,
                            var(--color500) 40%,
                            var(--color700) 50%,
                            var(--color500) 70%,
                            var(--color500) 100%
                        ) var(--color700)
                    ;
                    background-size: 1000% 1000%;
                    animation: menu_contact 2s infinite linear;
                    cursor: pointer;
                    transition: transform var(--transition_time), background var(--transition_time);
                }
                button:hover {
                    background:var(--color700);
                }
                button:active {
                    transform: scale(.95);
                    background:var(--color600);
                }
            }
            #error {
                margin-top: 10px;
                margin-bottom: var(--padding);
                background: rgb(255, 199, 199);
                padding: 10px;
                border: solid 2px rgba(0, 0, 0, 0.068);
                color: rgb(182, 0, 0);
                border-radius: 10px;
            }
            #error.hidden {
                display: none;
            }

            .plans {
                display: flex;
                flex-direction: column;
                gap: 5px;

                .plan.selected {
                    border: solid 4px var(--color700);
                }
                .plan {
                    cursor: pointer;
                    border: solid 3px transparent;
                    border-radius: 13px;
                    box-shadow: rgba(0,0,0,.15) 0px 0px 15px 1px;
                    margin: 3px;
                    display: flex;
                    align-items: center;
                    background: #fff;
                    gap: 10px;
                    padding: 5px;
                    border-radius: 10px;

                    svg {
                        fill: #000;
                        height: 25px;
                        width: 25px;
                        padding: 10px;
                        background: rgba(0,0,0,.12);
                        border-radius: 5px;
                    }

                    .info {
                        display: flex;
                        flex-direction: column;
                        
                        h3 {
                            margin: 0;
                            font-weight: 700;
                            font-family: 'Nunito';
                            font-size: 17px;

                            span {
                                background: rgba(0,0,0,.15);
                                font-family: 'Nunito';
                                font-weight: normal;
                                padding: 0 7px;
                                border-radius: 99px;
                                font-size: 14px;
                            }
                        }
                        p {
                            margin: 0;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}


@media (min-width: 500px) {
    #contactform {
        .content {
            width: 350px;
        }
    }
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}