/* HOME */
/*---SLIDER---*/
.slider {
    max-width: 100%;
    position: relative;
}
.slider-item {
    position: relative;
}
.slider-heading {
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, calc(-50% + 44px));
    font-size: var(--fs-24);
    padding: 0.5em 1em;
    width: max-content;
}
.slider-button {
    width: 25px;
    height: 25px;
    font-size: 14px;
    position: absolute;
    bottom: 23.5px;
    right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: pulsingButton 2s linear 0.5s infinite alternate;
}
.slider-button.paused {
    animation: none;
}
@keyframes pulsingButton {
    from {background-color: var(--blue-accent);}
    to {background-color: var(--blue-mid);}
}
.slider-button > i {
    margin-top: 3px;
}
.slider img {
    width: 100%;
    min-height: calc(100svh - 164px);
    height: calc(100svh - 164px);
    max-height: calc(100svh - 164px);
    object-fit: cover;
    object-position: center;
}
.slider img:hover {
    cursor: grab;
}
.slider img:active {
    cursor: grabbing;
}
.slick-dots {
    position: absolute;
    display: flex;
    justify-content: center;
    gap: 1vmin;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    font-size: 0;
    cursor: grab;
}
.slick-dots li.slick-active button {
    opacity: 0.8;
}
.slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    opacity: 0.5;
    transition: all .25s ease-in-out;
    background-color: #fff;
}
.slick-dots li button:hover {
    opacity: 0.8;
}
/*---ABOUT JURAX---*/
.about_jurax {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 100px 50px;
    background-color: var(--gray-accent);
    font-family: Calibri, sans-serif;
    position: relative;
}
.about_jurax::before {
    position: absolute;
    content: '';
    background-image: url('https://jurax.org/wp-content/uploads/2026/04/about-jurax-main-bg.svg');
    background-repeat: repeat;
    background-size: contain;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 30px;
}
.about_jurax p {
    padding: 10px;
    color: var(--gray-dark);
}
.about_jurax-heading {
    width: 35%;
    font-family: Oswald;
    font-size: var(--fs-24);
    line-height: 1.5;
    color: var(--blue-accent);
}
.about_jurax-heading h1 {
    font-size: var(--fs-36);
    font-weight: 600;
    line-height: 1;
    padding: 10px 10px 10px 10px;
    text-transform: uppercase;
    position: relative;
}
.about_jurax-heading h1::after {
    content: '';
    background-color: var(--blue-accent);
    width: 50px;
    height: 4px;
    position: absolute;
    top: 50%;
    margin-left: 10px;
}
.about_jurax-heading > p {
    padding-top: 40px;
}
.about_jurax-heading, .about_jurax-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: wrap;
}
.about_jurax-info {
    width: 60%;
    line-height: 1.25;
    font-size: var(--fs-18);
}
/*---JURAX PROJECTS---*/
.jurax_projects {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
}
.jurax_projects .wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
}
.jurax_projects-heading {
    width: 100%;
    text-transform: uppercase;
    font-family: Oswald;
    font-size: var(--fs-30);
    font-weight: 500;
    color: var(--blue-accent);
    text-align: center;
    letter-spacing: 1.25px;
    padding: 40px 10px 40px;
}
.jurax_projects-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.jurax_projects-img {
    transition: all .25s ease-in-out;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.jurax_projects-item:hover .jurax_projects-img {
    transform: scale(1.1);
}
.jurax_projects-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-24);
    padding: 0.5em 1em;
    width: max-content;
}
/*---STATISTICS---*/
.jurax_stats {
    padding: 100px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    position: relative;
    background-color: var(--gray-accent);
    background-image: url(../img/home/jurax-stats-main-bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 10% 30px;
}
.jurax_stats-heading {
    width: 31%;
    display: flex;
    align-items: center;
    padding-right: 5px;
}
.jurax_stats-heading > h2{
    width: 100%;
    text-transform: uppercase;
    font-family: Oswald;
    font-size: var(--fs-30);
    font-weight: 500;
    color: var(--blue-accent);
    text-align: left;
    position: relative;
}
.jurax_stats-heading > h2::after {
    content: '';
    background-color: var(--blue-accent);
    width: 50px;
    height: 4px;
    position: absolute;
    top: 50%;
    margin-left: 10px;
}
.jurax_stats-item {
    text-align: center;
    width: 23%;
    color: var(--blue-accent);
    font-family: Oswald;
    letter-spacing: 1.25px;
    font-size: var(--fs-32);
    padding: 0 5px;
}
.jurax_stats-icon {
    margin-bottom: 10px;
}
.jurax_stats-counter {
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 10px;
}
.jurax_stats-subheading {
    font-size: var(--fs-20);
    font-weight: 400;
}
/*---JURAX SERVICES---*/
.jurax_services {
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr); */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
    padding: 40px 100px 60px;
    background-color: var(--blue-accent);
    background-image: url(../img/home/services-main-bg.jpg);
    background-position: center;
    background-size: cover;
    background-blend-mode: soft-light;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* background: linear-gradient(var(--blue-dark), #4e7191); */
.jurax_services-heading {
    /* grid-column: span 3; */
    width: 100%;
    text-transform: uppercase;
    font-family: Oswald;
    font-size: var(--fs-30);
    font-weight: 500;
    color: var(--gray-accent);
    text-align: center;
    letter-spacing: 1.25px;
}
.jurax_services-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    color: var(--gray-accent);
}
.jurax_services-icon i {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: var(--gray-accent);
    color: var(--blue-accent);
    font-size: var(--fs-24);
}
.jurax_services-icon i::before {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.jurax_services-subheading {
    margin-top: 15px;
}
.jurax_services-subheading > a {
    font-size: var(--fs-24);
    font-family: Oswald;
    color: var(--gray-accent);
}
/*---CERTIFICATION---*/
.certification {
    background: var(--gray-accent);
    padding: 20px 0 80px 0;
    scroll-margin-top: var(--header-height, 164px);
}
.certification-wrapper {
    height: 100%;
}
.certification-wrapper.is-static {
    display: flex;
    justify-content: center;
}
.certification .slick-track {
    display: flex;
    align-items: center;
    cursor: grab;
    padding: 20px 0;
}
.certification .slick-track:active {
    cursor: grabbing;
}
.certification-image {
    /* margin-left: 20px; */
    margin: 0 auto;
    padding: 0 5px;
}
.certification-image a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    min-width: 100px;
}
.certification-image img {
    max-width: 150px;
    max-height: 150px;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.certification-arrow {
    font-size: var(--fs-24);
    color: var(--blue-accent);
    transition: all .25s ease-in-out;
    position: absolute;
    bottom: -40px;
    padding: 3px;
}
.certification-arrow:hover {
    cursor: pointer;
    opacity: 0.85;
}
.certification-arrow.left {
    left: calc(49% - 24px);
    z-index: 1;
}
.certification-arrow.right {
    right: calc(49% - 24px);
    z-index: 1;
}
/*---jurax_contacts---*/
.jurax_contacts {
    background-color: #fff;
    padding: 40px;
}
.jurax_contacts-heading {
    width: 100%;
    text-transform: uppercase;
    font-family: Oswald;
    font-size: var(--fs-30);
    font-weight: 500;
    color: var(--blue-accent);
    text-align: center;
    letter-spacing: 1.25px;
    padding-bottom: 40px;
}
.jurax_contacts-map {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 400px;
    border: 4px solid var(--gray-accent);
}
.jurax_contacts-form {
    background-color: var(--gray-accent);
    width: 100%;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: var(--fs-18);
    color: var(--blue-dark);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.jurax_contacts-form_wrapper {
    padding: 20px;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.jurax_contacts-form_wrapper-item {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-end;
}
.jurax_contacts-form_wrapper-item span {
    width: 100%;
}
.jurax_contacts-form_wrapper-item.last > div {
    font-size: 14px;
    display: block;
    width: calc(80% - 120px);
    text-align: left;
    margin-top: 10px;
}
.jurax_contacts-form label{
    width: 80%;
    text-align: left;
    padding-bottom: 5px;
    font-size: var(--fs-18);
    transition: all .25s ease-in-out;
}
.jurax_contacts-form input, .jurax_contacts-form textarea {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--blue-accent);
    padding: 2px 5px;
    border: 1px solid #fff;
    transition: all .25s ease-in-out;
    border-radius: 0;
}
.jurax_contacts-form input:focus, .jurax_contacts-form textarea:focus{
    border: 1px solid var(--blue-accent);
}
.jurax_contacts-form input::placeholder, .jurax_contacts-form textarea::placeholder {
    opacity: 0.5;
    font-size: var(--fs-16);
}
.jurax_contacts-form input {
    width: 80%;
    height: 30px;
}
.jurax_contacts-form textarea {
    width: 100%;
    min-height: 125px;
    height: 125px;
    max-height: 125px;
    resize: none;
    cursor: auto;
}
.jurax_contacts-form textarea::-webkit-scrollbar {
    width: 10px;
}
.jurax_contacts-form textarea::-webkit-scrollbar-track {
    background: var(--gray-accent);
}
.jurax_contacts-form textarea::-webkit-scrollbar-thumb {
    background: #888;
    transition: all .25s ease-in-out;
    cursor: default !important;
}
.jurax_contacts-form textarea::-webkit-scrollbar-thumb:hover {
    background: var(--blue-accent);
}
.jurax_contacts-form p {
    font-size: 14px;
    display: block;
    width: calc(80% - 120px);
    text-align: left;
    margin-top: 10px;
}
.jurax_contacts-form button.button {
    width: 120px;
    padding: 12px;
    margin-top: 10px;
    max-height: 44px;
    font-size: var(--fs-16);
    font-weight: 400;
    color: #fff;
}
.wpcf7-form p {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.wpcf7-form br {
    display: none;
}
/* Success submit */
.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 10px !important;
    color: var(--blue-accent);
    text-align: center;
    font-size: 10px;
}
/* Fail submit */
span.wpcf7-not-valid-tip {
    color: #ff0000;
    font-size: 12px;
    display: block;
    margin-top: 5px;
    font-size: 10px;
}
/*---MEDIA QUERIES---*/
@media screen and (max-width: 1080px) {
    .jurax_stats {
        background-position: 0px 640px;
        background-size: 600px 300px;
        background-attachment: fixed;
    }
    .jurax_stats-heading {
        width: 100%;
        padding-bottom: 60px;
    }
    .jurax_stats-heading > h2 {
        text-align: center;
    }
    .jurax_stats-item {
        width: 33.33%;
    }
}
@media screen and (max-width: 870px) {
    .about_jurax {
        flex-wrap: wrap;
    }
    .about_jurax-heading, .about_jurax-info {
        width: 100%;
    }
    .about_jurax-heading > p {
       padding: 10px 10px 25px;
    }
    .jurax_projects .wrapper{
        grid-template-columns: 1fr 1fr;
    }
    .jurax_contacts-form label, .jurax_contacts-form input {
        width: 100%;
    }
}
@media screen and (max-width: 750px) {
    .jurax_stats {
        padding: 100px 20px;
    }
    .jurax_services {
        padding: 40px 20px 60px;
    }
    .jurax_contacts {
        padding: 40px 20px;
    }
    .jurax_contacts-form {
        padding: 10px 0;
    }
    .jurax_contacts-form p {
        width: 100%;
    }
}
@media screen and (max-width: 600px) {
    .about_jurax {
        padding: 40px 20px 60px;
    }
    .slider img {
        min-height: calc(70svh - 109px);
        height: calc(70svh - 109px);
        max-height: calc(70svh - 109px);
    }
    .slider-button {
        display: none;
    }
    .jurax_projects .wrapper{
        grid-template-columns: 1fr;
    }
    .jurax_projects-item {
        aspect-ratio: 3 / 2;
    }
    .jurax_stats {
        flex-direction: column;
        align-items: center;
        padding: 40px 20px;
    }
    .jurax_stats-heading {
        padding-bottom: 0;
    }
    .jurax_stats-item {
        padding-top: 40px;
        width: 100%;
    }
    .jurax-services:last-of-type .jurax_services-item {
        display: none;
    }
    .jurax_contacts-form {
        padding: 0;
    }
    .jurax_contacts-form_wrapper {
        width: 100%;
    }
    .jurax_contacts-form label {
        padding-top: 10px;
    }
}
@media screen and (max-width: 400px) {
   .about_jurax {
        padding: 40px 10px 60px;
    }
    .about_jurax-heading h1::after {
        width: 35px;
    }
    .jurax_projects .wrapper{
        grid-template-columns: 1fr;
    }
    .jurax_projects-item {
        aspect-ratio: 1 / 1;
    }
    .jurax_stats-heading > h2::after {
        width: 35px;
    }
    .jurax_contacts {
        padding: 40px 10px;
    }
    .jurax_contacts-form p {
        width: 100%;
    }
}
@media screen and (max-height: 600px) { 
    .slider img {
        min-height: calc(100svh - 114px);
        height: calc(100svh - 114px);
        max-height: calc(100svh - 114px);
    }
}
@media screen and (max-height: 350px) { 
    .slider img {
        min-height: 300px;
    }
}
@media (prefers-color-scheme: dark) {
    .about_jurax {
        background-color: var(--blue-accent);
    }
    .about_jurax::before {
        background-image: url('https://jurax.org/wp-content/uploads/2026/04/about-jurax-main-bg-colored.svg');
    }
    .about_jurax-heading, .about_jurax p {
        color: var(--gray-accent);
    }
    .about_jurax-heading h1:after {
        background-color: var(--gray-accent);
    }
    .jurax_projects {
        background-color: var(--blue-dark);
    }
    .jurax_projects-heading {
        color: var(--gray-accent);
    }
    .jurax_stats {
        background-color: var(--blue-accent);
        background-blend-mode: soft-light;
        box-shadow: inset 0 0 50px #0000005c;
    }
    .jurax_stats-heading > h2, .jurax_stats-item {
        color: var(--gray-accent);
    }
    .jurax_stats-heading > h2:after {
        background-color: var(--gray-accent);
    }
    .certification {
        background-color: var(--blue-dark);
        box-shadow: inset 0 0 50px #0000005c;
    }
    .certification-arrow {
        color: var(--gray-accent);
    }
    .jurax_contacts {
        background-color: var(--blue-accent);
    }
    .jurax_contacts-heading {
        color: var(--gray-accent);
    }
    .jurax_contacts-map {
        border-color: var(--blue-dark);
    }
    .jurax_contacts-form {
        color: var(--gray-accent);
        background-color: var(--blue-dark);
    }
    .jurax_contacts-form input, .jurax_contacts-form textarea {
        color: var(--gray-accent);
        background-color: var(--blue-accent);
        border-color: var(--blue-transparent);
    }
    .jurax_contacts-form input:focus, .jurax_contacts-form textarea:focus{
        border: 1px solid var(--blue-mid);
    }
    .jurax_contacts-form input::placeholder, .jurax_contacts-form textarea::placeholder {
        color: var(--gray-light);
    }
    .jurax_contacts-form button.button:hover {
        background-color: var(--blue-accent);
        opacity: 0.9;
    }
    .jurax_contacts-form textarea::-webkit-scrollbar-track {
        background: var(--gray-accent);
    }
    .jurax_contacts-form textarea::-webkit-scrollbar-thumb:hover {
        background: var(--gray-dark);
    }
}