@import "templates/blue-icon.css"; 


.contact-page {
    background: #F5F5F5;
    height: 100%;
    padding: 100px;
}


.contact-page .main-div {/* position: relative; */display: grid;grid-template-columns: auto auto;width: 100%;max-width: 1600px;justify-content: center;/* align-items: center; *//* background: violet; */margin: 0 auto;}

.contact-page .main-div > div:first-child {
    display: grid;
    /* place-content: space-between; */
    width: fit-content;
    /* background: yellow; */
    width: 490px;
    height: 100%;
    position: relative;
}

.contact-page .main-div > div div.mobile {
    display: grid;
    place-content: center;
    position: absolute;
    top: -55px;
    right: -200px;
}


.contact-page .main-div > div div.mobile .pic {
    padding-bottom: 100px;
}

.contact-page .main-div > div div.mobile .pic img {
    width: auto;
    height: 750px;
}

.contact-page .main-div > div.form-content {
    display: grid;
    /* height: 750px; */
    height: fit-content;
    max-width: 1200px;
    background: #ffffff;
    padding: 50px;
    border-radius: 40px;
    justify-self: center;
    gap: 30px;
}

.contact-page .main-div > div.form-content > div {
    display: grid;
    grid-template-columns: auto;
    gap: 10px;
}

.contact-page .main-div > div.form-content > div > div.icon {
    width: 95px;
    gap: 2px;
}

.contact-page .main-div > div.form-content > div > div.icon .top {
    width: 60px;
    height: 60px;
}

.contact-page .main-div > div.form-content > div > div.icon .bottom {
    width: 22px;
    height: 22px;
}

.contact-page .main-div > div.form-content > div > div.subheader h1 {
    text-align: left;
    font-size: 2.4rem;
    font-weight: 400;
    font-family: Sofia Sans Condensed, "Tektur", sans-serif;
    letter-spacing: 1.8px;
    color: #b12efd;
    text-transform: uppercase;
    opacity: 1;
}

.contact-page .main-div > div.form-content > div > div.header h2 {
    text-align: left;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 1;
    font-size: 3.5rem;
    font-weight: lighter;
}


.contact-page .main-div > div.form-content > div > div.text h3 {
    text-align: left;
    font-size: 2.4rem;
    line-height: 3rem;
    font-family: 'sofia-pro';
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    font-weight: normal;
}



.contact-page .form-content form {
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
    padding: 30px 0px;
    gap: 60px;
}


.contact-page .form-content form > div div.submit button {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 70px;
    background-color: #b12efd;
    background-color: #B02BFD;
    color: white;
    border-style: none;
    cursor: pointer;
}

.contact-page .form-content form > div div.submit button:hover {
    background-color: #5D0094;
}

.contact-page .form-content form > div div.submit button:hover > div.cta-arrow {
    background-color: #5D0094;
}

.contact-page .form-content form > div div.submit button div p {
    text-transform: uppercase;
    font-style: normal;
    font-weight: 500;
    font-size: 1.8rem;
}

.contact-page .form-content form > div div.submit button div.cta-arrow {
    background: #b12efd;
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
}

.contact-page .form-content form > div div.submit button div.cta-arrow i {
    font-size: 1.8rem;
}


.contact-page .form-content form > div {
    position: relative;
    height: 60px;
    width: calc(50% - 30px);
    width: 40%;
}

.contact-page .form-content form > div:last-child {
    /* background: yellow; */
    width: 100%;
    display: grid;
    justify-items: end;
    height: fit-content;
}


.contact-page .form-content form > div.message textarea {background-color: transparent;height: 60px;width: 100%;min-width: 300px;border: none;outline: none;border-bottom: 3px solid #131313;min-height: 60px;padding-top: 10px;letter-spacing: 0px;line-height: 2rem;font-weight: 500;font-size: 2rem;font-style: normal;}


.contact-page .form-content form > div div.submit {padding-top: 20px;}

.contact-page .form-content form > div input {height: 60px;width: 100%;min-width: 300px;border: none;outline: none;border-bottom: 3px solid #131313;min-height: 60px;background-color: transparent;font-size: 1.5rem;}

.contact-page .form-content form > div input[type="text"] {
    opacity: 1;
    background: transparent;
    letter-spacing: 0px;
    line-height: 2rem;
    font-weight: 500;
    font-size: 2rem;
    font-style: normal;
}

.contact-page .form-content form > div :is(input,select):focus ~ label,
.contact-page .form-content form > div select.selected ~ label,
.contact-page .form-content form > div input:not(:placeholder-shown) ~ label,  .contact-page .form-content form > div.message textarea:focus ~ label, .contact-page .form-content form > div.message textarea:not(:placeholder-shown) ~ label {
    transform: translateY(-35px);
}
.contact-page .form-content form > div select
{
    opacity:0;
    transition:0.2s linear 0s;
}
.contact-page .form-content form > div select:focus,
.contact-page .form-content form > div select.selected
{
    opacity:1;
     transition:0.2s linear 0.1s;
}


.contact-page .form-content form > div select.selected option:first-child {
    color: #00000080;
}
.contact-page .form-content form > div label,.contact-page .form-content form > div .sel__placeholder {
    position: absolute;
    display: grid;
    height: 60px;
    width: 100%;
    top: 0px;
    justify-items: start;
    align-items: center;
    letter-spacing: 0px;
    /* text-transform: uppercase; */
    line-height: 1rem;
    font-weight: 300;
    font-size: 1.6rem;
    font-style: italic;
    transition: 0.2s ease-in-out;
}

.contact-page .form-content form > div label abbr {display: contents;}


.contact-page .form-content form > div select {
        display: grid;
        height: 60px;
        width: 100%;
        min-width: 300px;
        border: none;
        outline: none;
        background-color: transparent;
        align-items: center;
        z-index: 5;
        position: relative;
        letter-spacing: 0px;
        line-height: 2rem;
        font-weight: 500;
        font-size: 2rem;
        font-style: normal;
    }




.contact-page .form-content form > div label abbr {
    text-align: center;
    text-decoration: none;
    }


.contact-page .form-content form > div span.input_error {
    visibility: hidden;
    opacity: 0;
    transition: 0.3s linear 0s;
    display: block;
    width: 400px;
    display: grid;
    align-items: center;
}

.contact-page .form-content form div.error .input_error {
    display: grid;
    /* color: red; */
    visibility: visible;
    position: absolute;
    /* left: 10px; */
    bottom: -20px;
    opacity: 1;
    letter-spacing: 0px;
    text-transform: uppercase;
    line-height: 2rem;
    font-weight: bold;
    font-size: 1.4rem;
    font-style: normal;
    min-height: 20px;
}

.contact-page .form-content form div.error .contact_Message_Error.input_error {
    bottom: -31px;
    line-height: 14px;
}

.partners.partners-footer {
    background: #F5F5F5;
    padding-bottom: 50px;
}

.partners.partners-footer div {
    background: unset;
    padding-bottom: 50px;
}

.contact-page .content .header {

    width: fit-content;
}

.contact-page .content .header h3 {
    letter-spacing: 0px;
    font-style: normal;
    line-height: 7.5rem;
    font-weight: bold;
    font-size: 6rem;
}

.purple-2 {
    color: #b12efd;
}


.contact-page .form {
    display: grid;
    grid-template-columns: auto;
}

.contact-page .form {
    display: grid;
}

@media screen and (max-width: 1600px) {


    .contact-page .form-content form{
        width: 500px;
    }
    .contact-page .form-content form > div{
        width: 100%;
    }

}




@media screen and (max-width: 1200px) {

    .contact-page .main-div{
    grid-template-columns: 1fr;
    grid-template-rows: 700px 1fr;
    gap: 50px;
    }

    .contact-page .main-div > div:first-child {
        justify-self: center;
        overflow: hidden;
    }

    .contact-page .main-div > div div.mobile {top: 0;}

    .contact-page .main-div > div div.mobile .pic {
        padding-bottom: 0px;
    }

    .contact-page .main-div > div div.mobile .pic img{
        height: 650px;
    }

    .contact-page .main-div > div.form-content {
        justify-content: center;
        justify-items: center;
    }

    .contact-page .main-div > div.form-content > div > div.icon{
        left: unset;
        padding-left: 0px;
    }


}


@media screen and (max-width: 1024px) {

    .contact-page .main-div{
    align-items: end;
    }

}



    @media screen and (max-width: 768px) {

        .contact-page .form-content form{
            width: 400px;
        }

  }

  @media screen and (max-width: 576px) {

    .contact-page{  
    padding: 6%;
    }

    .contact-page .main-div > div div.mobile{ 
    right: -75px;
    }
    .contact-page .main-div > div div.mobile .pic img{
    width: 300px;
    height: auto;
    }

    .contact-page .form-content form{
        width: 300px;
    }

    .contact-page .main-div > div:first-child{
    width: 300px;
    height: 368px;
    }

    .contact-page .main-div{
    grid-template-rows: 400px 1fr;
    }

    .contact-page .form-content form > div span.input_error{
        width: 100%;
    }


    .contact-page .main-div > div.form-content > div > div.icon{
        width: 77px;
        top: 20px;
    }
    
    .contact-page .main-div > div.form-content > div > div.icon .top{
        width: 45px; 
        height: 45px;
    }
    
    .contact-page .main-div > div.form-content > div > div.icon .bottom{
        width: 18px;
        height: 18px;
        margin-right: 6px;
    }

  }

    @media screen and (max-width: 425px) {

        .contact-page .main-div > div div.mobile{
        right: -65px;
        }

        .contact-page .main-div > div.form-content{
            padding: 5px;
        }

  }