@import url('https://fonts.googleapis.com/css2?family=Ojuju:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    font-family: "Playfair Display", sans-serif;
}

@media (max-width: 768px) {
    body {
        overflow: auto;
    }
}


body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/*Header*/
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.logo {
    width: 3rem;
    height: auto;
}

.navbar-dark .navbar-nav .nav-link {
    color: black;
}

.logo_name {
    display: inline-block;
    margin-bottom: 0.1rem;
}

.logo_name a {
    text-decoration: none;
    color: black;
    font-size: 1.5rem;
}

.menu {
    margin-right: 5rem;
}

.menu_parts li {
    padding-right: 3rem;
}
.menu_item {
    color: black;
}
.menu_item:hover {
    color: black;
    font-weight: bold;
}

@media (max-width: 768px) {
    .menu {
        margin-right: 0;
    }
    .logo_name a {
        text-decoration: none;
        font-size: 1rem;
        font-weight: bold;
    }
    .menu_parts li {
        padding-right: 0;
    }
}


.menu_item:focus {
    outline: none;
    color: black;
}

/*Content*/

/*Modal*/
.alarm {
    color: #34ce57;
    font-size: 1.3rem;
    font-weight: bold;
    margin: 1rem auto;
    width: 100%;

}
.modal-dialog {
    background-color: rgba(31, 8, 75, 0.1);
    max-width: 900px;
    border-radius: 8px;
}

.modal-content {
    background-color: rgba(245, 245, 245, 1);
    color: black;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}



.test_info {
    width: 55%;
    margin: 0 auto;
}

.test_info span {
    margin-left: 1rem;
    font-size: 1.3rem;
}

.button_start_test {
    width: 20rem;
    height: 4rem;
    margin: 0 auto;
    color: white !important;
    font-weight: bold !important;
    border-color: black !important;

}

@media (max-width: 768px) {
    .test_info {
        width: 65%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;

    }

    .test_info span {
        margin-left: 1rem;
        font-size: 1rem;
    }

    .button_start_test {
        width: 95%;
        height: 3rem;
        margin: 0 auto;
    }
}

@media (max-width: 595px) {
    .test_info {
        width: 80%;
    }
}

@media (max-width: 442px) {
    .test_info {
        width: 90%;
    }
}

@media (max-width: 400px) {
    .test_info {
        width: 100%;
    }
}


/*Index*/
.container_index {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;

}

.banner {
    margin-top: 6rem;
    height: 30rem;
    background-image: url('/images/banner.png');
    background-size: cover;
    background-position: center;
}

@media (max-width: 1002px) {
    .banner {
        height: 35rem;
    }
}
@media (max-width: 778px) {
    .banner {
        height: 40rem;
    }
}

.banner_text {
    margin: 5rem auto;
    font-weight: bold;
    font-size: 1.6rem;
    color: #444447;
}

.banner_text h1{
    font-size: 3rem;
    margin-bottom: 2rem;
    color: #444447;
}

@media (max-width: 768px) {
    .banner {
        height: 30rem;
    }
    .banner_text {
        margin: 2rem auto;
        font-size: 1rem;
    }
    .banner_text h1{
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
}

.posner {
    font-size: 16px !important;
}

.gates {
    font-size: 13px !important;
}
@media (max-width: 768px) {
    .posner {
        font-size: 9px !important;
    }
    .gates {
        font-size: 7.5px !important;
    }
}

.button_test {
    font-weight: bold;
    color: white;
    background-color: #34ce57;
    border-radius: 15px;
    border: #34ce57;
}

.button_test:hover {
    background-color: #1e7e34;
}

.persons {
    margin-left: 2rem;
    margin-right: 2rem;
}

@media (max-width: 768px) {
    .persons {
        margin-left: 0;
        margin-right: 0;
    }
}

/*Footer*/
.copy {
    color: black;
}

.logo_footer {
    width: 5rem;
    height: auto;
    margin: 2rem auto;
}

/*personalities*/
.personalities {
    margin-top: 7rem;
}

.accordion-button:not(.collapsed) {
    background-color: #34ce57;
    color: white;
    font-weight: bold;
}

/*Test*/
#testIQ {
    margin-top: 7rem;
    margin-bottom: 7rem;
    height: 100vh;
}


.question {
    font-size: 2rem;
    line-height: 4rem;
    margin: 0 auto;
    width:70%;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: rgba(128,128,128,0.5);
    border-bottom-color: rgba(128,128,128,0.5);
}

@media (max-width: 768px) {
    .question {
        width:90%;
        font-size: 1.5rem;
        line-height: 2.5rem;
    }
}

.divForLabel {
    margin-bottom: 3rem;
}
.answers input {
    display: none;
}
.answer_text {
    font-size: 1.7rem;
}

@media (max-width: 768px) {
    .answer_text {
        font-size: 1.2rem;
    }
}

                /*BUTTON*/

.btn-one {
    color: black;
    transition: all 0.3s;
    position: relative;
}
.btn-one span {
    transition: all 0.3s;
}
.btn-one::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #34ce57;
    border-bottom-color: #34ce57;
    transform: scale(0.1, 1);
}
.btn-one:hover span {
    letter-spacing: 1px;
}
.btn-one:hover::before {
    opacity: 1;
    transform: scale(1, 1);
}
.btn-one::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: all 0.3s;
    background-color: rgba(255,255,255,0.1);
}
.btn-one:hover::after {
    opacity: 0;
    transform: scale(0.1, 1);
}

@media only screen and (max-width: 768px) {
    .btn-one:hover::before {
        opacity: 0;
    }
    .btn-one {
        width: 20rem;
        box-shadow: 0 1px 4px rgba(52, 206, 87, 1),
        -23px 0 20px -23px rgba(52, 206, 87, .8),
        23px 0 20px -23px rgba(52, 206, 87, .8),
        0 0 40px rgba(52, 206, 87, .1) inset;
    }
}
/*END BUTTON*/
.a_div {
    margin-top: 4rem;
}


/*Finish*/
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 100;
}
.container-loading {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:350px;
    height:100px;
}
.container-loading h3 {
    color:rgba(100,100,100,0.9);
}
.container-loading .progress-bar {
    width:0%;
    height:15px;
    background:linear-gradient(to right,rgb(76,217,105),rgb(90,200,250),rgb(0,132,255),rgb(52,170,220),rgb(88,86,217),rgb(255,45,83));
    margin-top:10px;
    background-size:350px 5px;
    border-radius:10px;
    animation:loading 18s ease-in-out forwards;
}

.container-loading-loading .shadow {
    width:100%;
    height:40px;
    background:linear-gradient(to bottom,rgba(100,100,100,0.17),rgba(100,100,100,0.1),transparent);
    transform:skew(45deg) translate(8px,15px);
}
@keyframes loading {
    to {
        width:100%;
    }
}

.finish_test {
    width: 90%;
    margin: 0 auto;
}
.finish_input {
    width: 20rem;
}

.finish_button {
    width: 20rem;
    height: 3rem;
    margin: 1rem;
    border-color: rgba(52, 206, 87, 0.3);
    color: black !important;
    font-weight: normal !important;
}

.form-group button:hover {
    background-color: rgba(52, 206, 87, 0.3);
}
/*Result*/
.result_test {
    margin-top: 7rem;
}

.test_result {
    font-size: 5rem;
    font-weight: bold;
    color: rgba(52, 206, 87, 1);
}

.result_about ul>li {
    list-style-type:  none;
}

.about_more {
    color: rgba(52, 206, 87, 1);
    font-size:1.5rem;
    font-weight: bold;
}

.about_more:hover {
    color:#1e7e34;
}

@media (max-width: 768px) {
    .result_about ul {
        padding-left: 0;
    }
    .result_about {
        width: 100%;
    }
}

/*Contacts*/
.contact_div {
    margin: 6rem auto;
}
.contact_input {
    margin: 1rem auto!important;
}

/*pay*/
.iframe-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 80%;
}

@media screen and (max-width: 767px) {
    .iframe-container {
        position: relative;
        width: 100%;
        height: 100%;
        padding-bottom: 280%;
    }
}

.iframe-container iframe {
    position: absolute;
    top: 5%;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}