* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    outline: none;
}

/* fonts */

@font-face {
    font-family: Nunito;
    src: url(../font/Nunito-Regular.ttf);
}

/* fonts */


/* info start */

.info {
    width: 100%;
    height: auto;
    padding: 18px 0px;
    background-color: #28235D;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cont {
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info .cont p {
    color: #FFF;
    font-family: Nunito;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}



.info_cont_first {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.info_cont_sec {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.info_cont_sec_auto {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
}

.info_hover {
    cursor: pointer;
    padding: 7px 0px;
    border-bottom: 2px solid #28235D;

}

.info_hover:hover {
    border-color: #3FA9F5;
}

/* info end */

/* hedaer start */

header {
    padding: 30px 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header_cont_for-time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.header_cont_for-time>p {
    color: #000;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: right;
}

.header_cont_for-time>p>a {
    color: #28235D;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
}

.for-time_time {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-left: 30px;
}

.for-time_time>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.for-time_time>div>p {
    color: #28235D;
    font-family: Nunito;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.for-time_time>div>div {
    width: 54px;
    height: 54px;
    border-radius: 7px;
    background: #28235D;
    color: #FFF;
    font-family: Nunito;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* hedaer end */


/* nav start */

nav {
    width: 100%;
    height: 200px;
    padding: 20px 0px;
    background: #F1EFF5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(241, 239, 245, 0.8);
    backdrop-filter: blur(5px);
}

nav ul {
    width: 70%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 46px;
    list-style: none;
}

nav ul li a {
    text-decoration: none;
    color: #28235D;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
}

nav ul li a:hover {
    border-bottom: 2px solid #28235D;
}

.nav_select {
    position: relative;
    cursor: pointer;
    color: #28235D;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
}

.nav_select ul {
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: .8s;
    gap: 10px;
    scale: 0;
    transition-property: opacity;
    width: 180px;
    border-radius: 0px 0px 10px 10px;
    padding: 0px;
    left: -10px;
    /* bottom: 0px; */
}



.nav_select:hover ul {
    scale: 1;
    opacity: 1;

}

.nav_select:hover a{
    border-bottom: none;
}

.nav_select>ul>div {
    min-width: 100%;
    height: 100%;
    background:linear-gradient(180deg,transparent 39px,rgba(241, 239, 245, 0.8) 25%) ;
    border-radius: 10px;
    /* backdrop-filter: blur(50px); */
}

.nav_select>ul li {
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    width: 100%;
}

.nav_select>ul li:hover {
    background-color: #3FA9F5;
}

.nav_select>ul li a:hover {
    border-bottom: unset;
}

.nav_select ul li a{
    color: #28235D;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    cursor: pointer;
}


/* nav end */


/* slider start */

.cont_slider {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
    gap: 20px;
}

.slideshow-container {
    position: relative;
    overflow: hidden;
    width: 70%;
    height: 400px;
}

.mySlides {
    display: none;
    width: 100%;
    height: 100%;
}

.mySlides img {
    width: 100%;
    height: 100%;
}

.text-content {
    position: absolute;
    top: 15%;
    left: 10%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.text-content h2 {
    transition: 1s;
    color: transparent;
    font-family: Nunito;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 120.9%;
    /* 48.36px */
}

.text-content p {
    transition: 1s;
    color: transparent;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 22.4px */
}

.prev,
.next {
    border-radius: 50%;
    /* Hace que los botones sean redondos */
    width: 35px;
    height: 35px;
    transform: translateY(-50%, -50%);
    cursor: pointer;
    background: #28235D;
    /* Fondo negro semi-transparente */
    color: #fff;
    transition: background-color 0.3s;
    display: flex;
    /* Establecer como contenedor flex */
    justify-content: center;
    /* Centrar horizontalmente */
    align-items: 50%;
    /* Centrar verticalmente */
    font-size: 25px;
}

.prev:hover,
.next:hover {
    color: #28235D;
    background-color: #fff;
    border: 2px solid #28235D;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.image-container {
    width: 668px;
    height: 1568px;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-30%, -30%);
}

.img {
    max-width: 100%;
    height: auto;
}


.for_radios {
    width: 150px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 0;
}

.for_radios input {
    width: 13px;
    height: 13px;
    appearance: none;
    border-radius: 50%;
    background-color: #D9D9D9;
    cursor: pointer;
}

.for_radios .checked {
    background-color: #28235D;
}


/* slider end */


/* cont pet start */

.cont_pet {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 0% 15% 150px 15%;
}


/* pet all in start */


.pet_all_in {
    width: 100%;
    position: relative;
}


.pet_all_in_info {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: center;
    padding: 25px 10%;
    background: #28235D;
    border-radius: 20px;
}

.pet_all_in_info>button {
    color: #28235D;
    font-family: Nunito;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 15px 50px;
    border-radius: 10px;
    background-color: #FFF;
    border: none;
    cursor: pointer;
    transition: .5s;
}


.pet_all_in_info>button:hover {
    background-color: #3FA9F5;
}

.pet_all_in_info>button:active {
    transition: .1s;
    color: #fff;
}

.pet_all_in_info h2 {
    color: #F1EFF5;
    font-family: Nunito;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.pet_all_in_info span {
    color: #3FA9F5;
    font-family: Nunito;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: center;
}

.pet_all_in_info p {
    color: #FFF;
    text-align: center;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.pet_all_in_info>p {
    width: 80%;
}

.pet_all_in_info_deadline {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pet_all_in_info_deadline p {
    text-align: left;
}

.pet_line {
    margin-top: 50px;
    width: 100%;
    height: 22px;
    border-radius: 15px;
    background-color: #fff;
    position: relative;
}

.pet_line>div {
    border-radius: 15px;
    height: 100%;
    background-color: #3FA9F5;
    transition: .1s;
    width: 0%;
}

.pet_line>p {
    position: absolute;
    top: -40px;
    left: 10%;
    padding: 5px 10px;
    color: #FFF;
    font-family: Nunito;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 6px;
    background: #3FA9F5;
}

.pet_line_info {
    display: flex;
    width: 80%;
}

.pet_line_info>div>span {
    color: #FFF;
    font-family: Nunito;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pet_line_info>div>p>span,
.pet_par>span {
    color: #3FA9F5;
    font-family: Nunito;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.pet_line_info>div {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pet_line_info>div>p,
.pet_par {
    color: #FFF;
    font-family: Nunito;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.pet_btns {
    display: flex;
    gap: 5%;
    width: 100%;
    justify-content: center;
}

.pet_btns button {
    border-radius: 12px;
    border: 2px solid #3FA9F5;
    background: rgba(255, 255, 255, 0.00);
    width: 45%;
    padding: 15px 40px;
    color: #FFF;
    font-family: Nunito;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    transition: .5s;
}

.pet_btns button:hover {
    background-color: #FFF;
    color: #1A1732;
}

.pet_btns button:active {
    transition: .1s;
    background-color: #3FA9F5;

}

.pet_all_in>img {
    width: 40%;
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

/* pet all in end */


/* cards start */

.actual_projects {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.actual_projects>h3 {
    color: #28235D;
    font-family: Nunito;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.actual_projects>h3>span {
    color: #3FA9F5;
    font-family: Nunito;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-bottom: 3px solid #3FA9F5;
}

.actual_projects span {
    color: #3FA9F5;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.actual_projects p {
    color: #28235D;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.actual_projects .card_gray_text {
    color: #7E7E7E;
    font-family: Nunito;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.actual_cards_cont {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 60px 20px;
    justify-content: space-between;
}

.actual_card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.card_for_img {
    position: relative;
}


.card_for_img>div {
    display: flex;
    position: absolute;
    bottom: 20px;
    left: 20px;
    gap: 10px;
}

.card_line {
    width: 100%;
    height: 10px;
    border-radius: 20px;
    margin: 40px 0px 15px 0px;
    background: #F1EFF5;
    position: relative;
}

.card_line>div {
    background-color: #3FA9F5;
    height: 100%;
    border-radius: 20px;
    transition: .5s;
    width: 0%;
}


.card_line>p {
    position: absolute;
    top: -30px;
    left: 5%;
    color: #FFF;
    font-family: Nunito;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding: 4px 8px;
    background-color: #3FA9F5;
    border-radius: 5px;
}

.card_for_img>div>div {
    padding: 8px 15px;
    background-color: #28235D;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 5px;
    color: #FFF;
    font-family: Nunito;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.card_for_img>div>div:last-child {
    background-color: #3FA9F5;
}

.card_info {
    padding: 5px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card_info>div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card_info h4 {
    color: #3FA9F5;
    font-family: Nunito;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.card_buttons {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
}

.card_buttons button {
    padding: 15px 48px;
    border-radius: 10px;
    background: #3FA9F5;
    border: none;
    color: #FFF;
    font-family: Nunito;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    transition: .5s;
}

.card_buttons button:hover {
    background-color: #28235D;
}

.card_buttons button:active {
    transition: .1s;
    background-color: #3FA9F5;
}

.card_buttons button:last-child:hover {
    background-color: #28235D;
    color: #fff;
}

.card_buttons button:last-child:active {
    transition: .1s;
    background-color: #fff;
    color: #3FA9F5;
}

.card_buttons button:last-child {
    color: #3FA9F5;
    background-color: #FFF;
    border: 1px solid #3FA9F5;
    padding: 15px 38px;
}

/* cards end */


/* cont pet end */



/* cont types start */

.cont_types {
    width: 100%;
    padding: 60px 15% 100px 15%;
    display: flex;
    flex-direction: column;
    background: #F1EFF5;
}

.types {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.types h2 {
    color: #28235D;
    font-family: Nunito;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.types>h2>span {
    color: #3FA9F5;
    border-bottom: 3px solid #3FA9F5;
}

.types>p {
    color: #28235D;
    text-align: center;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.type_cont {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 60px 0px;
}

.type {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 42px 45px;
    background-color: #3FA9F5;
    border-radius: 10px;
    color: #FFF;
    text-align: start;
    font-family: Nunito;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    opacity: 0;
    transition: .8s;

}

.type p {
    font-size: 16px;
}

/* cont types end */


/* news start */

.news_cont {
    width: 100%;
    height: auto;
    padding: 40px 15%;
    background-color: #28235D;
}

.news {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.news>div {
    width: 50%;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: start;
}

.news>div>h3 {
    color: #FFF;
    text-align: start;
    font-family: Nunito;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 30px;

}

.news>div>p {
    color: #FFF;
    font-family: Nunito;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    width: 85%;
}

.news>div>span {
    color: #FFF;
    font-family: Nunito;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.news>div>button {
    padding: 21px 26px;
    background-color: #3FA9F5;
    border-radius: 20px;
    color: #FFF;
    text-align: center;
    font-family: Nunito;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none;
    cursor: pointer;
    transition: .5s;
}

.news>div>button:hover {
    background-color: #FFF;
    color: #3FA9F5;
}

.news>div>button:active {
    transition: .1s;
    background-color: #3FA9F5;
    color: #fff;
}

/* news end */




/* about company start */

.about_company_cont {
    width: 100%;
    height: auto;
    padding: 40px 15%;
    background: #F1EFF5;
}

.about_company {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.about_company>img {
    margin-top: 7.5%;
}

.about_company>div {
    width: 60%;
    padding-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: start;
}

.about_company>div>h2 {
    color: #3FA9F5;
    font-family: Nunito;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.about_company>div h3 {
    color: #28235D;
    font-family: Nunito;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.about_company>div h3>span {
    color: #3FA9F5;
}

.about_company p {
    color: #28235D;
    font-family: Nunito;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.about_select {
    width: 90%;
}

.about_company .about_select>div>p {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: .5s;
    padding: 13px 0px 24px 20px;
    background-color: #fff;
    height: 0;
}

.about_company button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #3FA9F5;
    color: #FFF;
    text-align: center;
    font-family: Nunito;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border: none;
    cursor: pointer;
}

.about_select_text {
    margin-bottom: 30px;
}

/* about company end */


/* events start */


.events_cont {
    width: 100%;
    padding: 40px 15%;
}

.events {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.events>h2 {
    color: #28235D;
    font-family: Nunito;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.events>h2>span {
    color: #3FA9F5;
    font-size: 36px;
    border-bottom: 3px solid #3FA9F5;
}

.events span {
    color: #3FA9F5;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.events p {
    color: #7E7E7E;
    font-family: Nunito;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.event_card .card_buttons button {
    width: 100%;
    background-color: #3FA9F5;
    color: #FFF;
    cursor: pointer;
}

.for_date {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

.for_date span {
    color: #3FA9F5;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.for_events_radio {
    display: flex;
    gap: 20px;
}

.for_events_radio input {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #F1EFF5;
    cursor: pointer;
}

.for_events_radio .active_events_radio {
    background-color: #3FA9F5;
}

/* events end */



/* gray_news start */

.gray_news {
    background: #F1EFF5;
}

.gray_news .news {
    justify-content: start;
    gap: 7%;
}

.gray_news div>h3 {
    color: #28235D;
}

.gray_news div>p {
    color: #28235D;
    width: 80%;
}

.gray_news div>button {
    padding: 20px 70px;
    cursor: pointer;
    border: 1px solid #F1EFF5;
}

.gray_news div>button:hover {
    background-color: #28235D;
    border: 1px solid #3FA9F5;
    color: #fff;
}

.gray_news div>button:active {
    background-color: #3FA9F5;
}

/* gray_news end */



/* sign_up start */

.sign_up_cont {
    padding: 40px 15%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5%;
}

.sign_up_cont h2 {
    color: #28235D;
    font-family: Nunito;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.sign_up_cont p {
    color: #28235D;
    font-family: Nunito;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.sign_up_cont>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sign_up_cont div div {
    display: flex;
    margin-top: 40px;
}

.sign_up_cont div div button {
    padding: 16px 60px;
    background-color: #3FA9F5;
    border: none;
    cursor: pointer;
    color: #FFF;
    text-align: center;
    font-family: Nunito;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    transition: .5s;
}

.sign_up_cont div div button:hover {
    background-color: #28235D;
}

.sign_up_cont div div button:active {
    transition: .1s;
    background-color: #3FA9F5;
}

.sign_up_cont div div input {
    padding: 16px 250px 16px 20px;
    background-color: #F1EFF5;
    border: none;
}

.sign_up_cont div div input::placeholder {
    color: #28235D;
    font-family: Nunito;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.39px;
}


/* sign_up end */


/* footer start */

footer {
    padding: 50px 15%;
    background: #1A1732;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1A1732;
}

footer>div {
    width: 22%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: start;
    justify-content: center;
}

footer>div>img {
    width: 100%;
}

footer>div>a {
    color: #FFF;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration: none;
    text-align: start;
}

footer>div>a:hover {
    color: #3FA9F5;
}

footer>div>p {
    color: #FFF;
    text-align: center;
    font-family: Nunito;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}


footer>div>h2 {
    color: #FFF;
    text-align: center;
    font-family: Nunito;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
}

footer>div>input {
    width: 100%;
    padding: 10px 20px;
}

footer>div>textarea {
    width: 100%;
    resize: none;
    padding: 10px 10px;
    height: 150px;
}

footer>div>input::placeholder,
footer>div>textarea::placeholder {
    color: #28235D;
    font-family: Nunito;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.36px;
}

footer>div>button {
    padding: 12px 43px;
    background-color: #3FA9F5;
    border: none;
    border-radius: 10px;
    color: #FFF;
    text-align: center;
    font-family: Nunito;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: .5s;
}

footer>div>button:hover {
    background-color: #fff;
    color: #3FA9F5;
}

footer>div>button:active {
    transition: .1s;
    background-color: #3FA9F5;
    color: #FFF;
}

.pages {
    width: 10%;
}

.FAQ {
    width: 15%;
}

/* footer end */



/* modal start */

.modal_cont {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
    padding: 5%;
    transition: .5s;
    display: none;
}

.modal_cont>form {
    width: 600px;
    height: auto;
    border-radius: 20px;
    background: #FFF;
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
}

.modal_cont>form>h2 {
    color: #28235D;
    font-family: Nunito;
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.modal_sign_in>div {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.modal_sign_in>div>div {
    width: 100%;
    position: relative;
    color: #28235D;
}

.modal_sign_in>div>a {
    align-self: flex-end;
    color: #28235D;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration-line: underline;
}

.modal_sign_in>div>div>input {
    width: 100%;
    padding: 19px 68px;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    border-radius: 10px;
    border: 1px solid #E7E7E7;
    background: #F1EFF5;
}

.modal_sign_in>div>div>input::placeholder {
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.sign_in_mail>img {
    position: absolute;
    top: 18px;
    left: 18px;
}

.key {
    position: absolute;
    top: 18px;
    left: 18px;
}

.sign_in_pass .eye {
    position: absolute;
    top: 19px;
    right: 18px;
    cursor: pointer;
}

.modal_cont>form>button {
    border-radius: 10px;
    background: #3FA9F5;
    padding: 19px 101px;
    border: none;
    cursor: pointer;
    color: #FFF;
    font-family: Nunito;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transition: .5s;
}

.modal_cont>form>button:hover {
    background-color: #28235D;
}
.modal_cont>form>button:active{
    transition: .1s;
    background-color: #3FA9F5;
}
.modal_sign_in>p {
    color: #28235D;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: flex;
    gap: 10px;
}

.modal_sign_in>p>a {
    color: #3FA9F5;
    text-decoration: underline;
}

.modal_sign_in>.sign_in_horizontal {
    margin-top: 30px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: unset;
    color: #28235D;
    font-family: Nunito;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

.sign_in_horizontal>hr {
    width: 35%;
    color: #F1EFF5;
}

.modal_sign_in .sign_in_contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 30px;
}

.close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

.modal_cont .for_modal_checkbox {
    width: 80%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.modal_cont .for_modal_checkbox>p {
    color: #28235D;
    text-align: center;
    font-family: Nunito;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.modal_cont .for_modal_checkbox>p>span {
    color: #3FA9F5;
}

.modal_cont .for_modal_checkbox>input {
    appearance: none;
    width: 40px;
    height: 25px;
    border: 2px solid #F1EFF5;
    border-radius: 5px;
}

.modal_cont .for_modal_checkbox>input:checked {
    background-color: #3FA9F5;
}

.modal_sign_in .card_line {
    width: 60%;
    height: 20px;
    border-radius: 10px;
}

.modal_sign_in .card_line>div {
    width: 0%;
    border-radius: 10px;
    transition: 0s;
}

.modal_invest_cont>form{
    gap: 20px;
}

.modal_invest_cont>form>.modal_invest_info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal_invest_cont .modal_invest_info>h4 {
    color: #28235D;
    font-family: Nunito;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


.modal_invest_cont .modal_invest_info>h4>span {
    color: #3FA9F5;
}

.modal_invest_cont .modal_invest_info>p {
    color: #28235D;
    font-family: Nunito;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.modal_invest_cont .modal_invest_info>h3 {
    color: #3FA9F5;
    text-align: center;
    font-family: Nunito;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.modal_invest_cont .modal_invest_info>span {
    color: #28235D;
    font-family: Nunito;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.modal_invest_cont2 > form{
    gap: 10px;
    padding: 44px 122px;
}

.modal_invest_cont2 > form > button{
    width: 100%;
}

.modal_invest_cont2 > form > h4{
    align-self: flex-start;
    color: #28235D;
font-family: Nunito;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.modal_invest_cont2 > form > p{
    align-self: flex-start;
    color: #28235D;
font-family: Nunito;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.modal_invest_cont2 > form > p > span{
    color: #3FA9F5;
}
.modal_invest_cont2 .sign_in_mail > input{
    color: #3FA9F5;
    font-family: Nunito;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: end;
    background-color: unset ;
}


.modal_invest_cont2 .sign_in_mail > input::placeholder{
    color: #3FA9F5;
font-family: Nunito;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-align: end;
}



.modal_invest_cont3 > form{
    gap: 20px;
}

.modal_invest_cont3 > form > div{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.modal_final{
    padding: 5%;
    gap: 20px;
}

.modal_final > div{
    width: 500px;
    padding: 25px 34px;
    border-radius: 20px;
    background: #F1EFF5;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.modal_final > div > p{
    color: #28235D;
text-align: start;
font-family: Nunito;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: normal;
}

/* modal end */