/* Custom CSS */

/* Example: Override main section background color. */
/* body .jupiterx-main {
    background-color: gray;
} */

.image-card-slider .jet-animated-box__back .jet-animated-box__overlay {
    background-color: #E6007E !important;
}

.image-card-slider .jet-animated-box__back .elementor-button {
    background-color: #fff !important;
    color: #E6007E !important;
    font-family: 'IBM Plex Sans', sans-serif !important;
    font-weight: 700 !important;
}

.text-card h4 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding-top: 30px;
}

.text-card h4 span .jet-headline__label {
    line-height: 1.1em !important;
}

.text-card h4 .jet-headline__space {
    line-height: 0 !important;
}

.anchor--button-text-left a {
    text-align: left;
}

body main#jupiterx-main {
    background-image: none;
}

.animated-card-container div.jet-animated-box__content h2,
.animated-card-container div.jet-animated-box__content h4 {
    line-height: unset;
    margin: -160px 0px 120px 0px !important;
    padding-top: 30px !important;
}

.animated-card-container .jet-animated-box__icon {
    transform: translateY(30px) !important;
}

.breadcrumb a {
    color: #fff;
}


body:not(.single) .raven-breadcrumbs ol.breadcrumb .breadcrumb-item span,
body:not(.single) .raven-breadcrumbs ol.breadcrumb .breadcrumb-item::before,
body:not(.single) .raven-breadcrumbs ol.breadcrumb .breadcrumb-item.active span {
    color: #fff !important;
}

.single-post h1.elementor-heading-title {
    color: #000;
}

form input[type="checkbox"]:checked + label::before {
    background: url("/wp-content/themes/jupiterx-child/assets/icons/check-solid.svg"), linear-gradient(to bottom, #007bff, #007bff) !important;
}

form input[type="checkbox"]:checked + label::after {
    display: none;
}

form.raven-form .raven-field-label::after {
    color: #e6007e !important;
}

.jet-listing-grid__items h3 {
    padding-left: 20px;
    padding-right: 20px;
}

div.jet-animated-box__front,
div.jet-animated-box__back {
    height: 95%;
    width: 97%;
}

p {
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
}

/** Flip card widget **/

.flip-card-front {
    border: 1px solid #0BBBEF;
    border-radius: 5px;
    background-color: #fff;
    color: #fff;
}

.flip-card-back {
    background-color: #E6007E;
    border: 1px solid #E6007E;
    border-radius: 5px;
}

.flip-card-front,
.flip-card-back {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    align-items: center;
    height: 100%;
}

.flip-card-title {
    margin-bottom: 30px;
    font-size: 23px;
    line-height: 1em;
    padding: 0 10px;
}

.flip-card-back .flip-card-title {
    color: #fff;
}

.flip-card-front .flip-card-image-wrapper {
    border: 1px solid #0BBBEF;
    border-radius: 100%;
}

.flip-card-back .flip-card-image-wrapper {
    border: 1px solid #fff;
    border-radius: 100%;
    background-color: #fff;
}

.flip-card-image-wrapper {
    width: 101px;
    height: 100px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.flip-card-image {
    font-size: 60px;
}

.flip-card-link.invisible {
    visibility: 0;
}

.flip-card .flip-card-description {
    font-family: "IBM Plex Sans", sans-serif;
    text-align: center;
    color: #000;
    font-size: 13px;
    line-height: 25px;
    padding: 0 10px;
}

.flip-card .flip-card-back .flip-card-description {
    color: #fff;
}

.flip-card .flip-card-back .flip-card-link {
    color: #fff;
    font-size: 16px;
    line-height: 1em;
    font-family: "IBM Plex Sans", sans-serif;
}

.flip-card .flip-card-back .flip-card-link.button-secondary-style {
    color: #000;
    padding: 15px 30px;
    background-color: #fff;
    border-radius: 5px;
}


 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 420px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #fff;
  color: black;
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
} 


#cn-notice-text {
    font-family: "IBM Plex Sans", Sans-serif;
}

#cookie-notice .cn-button {
    background-color: #E6007E;
    border-radius: 25px 25px 25px 25px;
    font-family: "IBM Plex Sans", Sans-serif;
}

@media only screen and (min-width: 768px) {
    nav > ul > li > a {
        font-family: "IBM Plex Mono", sans-serif !important;
        font-weight: 500 !important;
        font-size: 16px !important;
        line-height: 21px !important;
    }

    .sub-menu {
        margin-top: 30px !important;
        margin-left: -20px !important;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.25);
    }
    
    .sub-menu a {
        color: #000;
        transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
        font-size: 15px !important;
        line-height: 20px !important;
    }
    
    .sub-menu a:hover {
        color: #E6007E !important;
        background-color: #E1EBF7 !important;
    }
}

@media only screen and (max-width: 768px) {
    .flip-card-inner {
        transition: none !important;
        transform: rotateY(180deg);
    }

    .flip-card-back {
        background-color: #fff !important;
        border: 1px solid #0BBBEF;
    }

    .flip-card-back .flip-card-image-wrapper {
        border: 1px solid #0BBBEF;
        border-radius: 100%;
    }

    .flip-card-back .flip-card-title,
    .flip-card .flip-card-back .flip-card-description {
        color: #000 !important;
    }

    h1 {
        font-size: 36px !important;
    }

    .flip-card-link {
        background-color: #E6007E !important;
        color: #fff !important;
    }
    
    body > div.jupiterx-site > header > div.elementor.elementor-182 > div > section > div > div.elementor-column.elementor-col-33.elementor-top-column.elementor-element.elementor-element-545581f > div > div > div > nav.raven-nav-icons-hidden-tablet.raven-nav-icons-hidden-mobile.raven-nav-menu-mobile.raven-nav-menu-dropdown.raven-nav-menu-dropdown {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        margin-top: 90px;
    }

    #menu-mobile-16b5f78 .sub-menu > li > a,
    #menu-mobile-9d00862 .sub-menu > li > a {
        background-color: #000;
    }

    #menu-mobile-16b5f78 .menu-item > a,
    #menu-mobile-9d00862 .menu-item > a {
        color: #fff;
    }

    .flip-box-inner {
        transform: rotateY(180deg);
        transition: 0 !important;
    }
}

.flip-box-front {
    background-color: #fff;
    color: #fff;
}

.flip-box-back {
    background-color: #fff;
}

.flip-box-front,
.flip-box-back {
    padding-top: 20px;
    align-items: center;
    height: 100%;
}

.flip-box-header {
    color: #000;
    font-size: 23px;
    line-height: 30px;
    font-family: "IBM Plex Sans", sans-serif;
}

.flip-box .flip-box-title {
    margin-bottom: 30px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    padding: 0 10px;
    color: #000;
}

.flip-box-description {
    color: #000;
}

.flip-box-image-wrapper {
    width: 101px;
    height: 100px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
}

.flip-box-image {
    font-size: 60px;
}

.flip-box .flip-box-description {
    font-family: "IBM Plex Sans", sans-serif;
    text-align: center;
    color: #000;
    font-size: 16px;
    line-height: 25px;
    padding: 0 10px;
    font-weight: 400;
    margin-bottom: 50px;
}

.flip-box-link {
    color: #fff;
    font-size: 16px;
    line-height: 1em;
    font-family: "IBM Plex Sans", sans-serif;
    background-color: #E6007E;
    border-radius: 5px;
    padding: 15px 30px;
    margin-top: 30px;
    display: inline-block;
}

.flip-box-link:hover {
    color: #fff;
}

.flip-box .flip-box-back .flip-box-link.button-secondary-style {
    color: #000;
    padding: 15px 30px;
    background-color: #fff;
}


 /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
  background-color: transparent;
  width: 100%;
  height: 420px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  background-color: #fff;
  color: black;
}

/* Style the back side */
.flip-box-back {
  transform: rotateY(180deg);
} 

p a:visited {
    color: #0d8eb5 !important;
}

#jupiterx-main .eael-elements-flip-box-rear-container, #jupiterx-main .eael-elements-flip-box-front-container  {
    transition: unset !important;
}

/** Cookie notice **/

div.madwise-cookie-notice-holder {
    z-index: 999;
    background-color: #000;
}

.madwise-cookie-notice-holder p a,
.madwise-cookie-notice-holder p a:hover,
.madwise-cookie-notice-holder p a:visited,
.madwise-cookie-notice-holder p a:active {
    text-decoration: underline;
    color: #fff !important;
}

.madwise-cookie-notice-settings-popup {
    z-index: 1000;
}

button.madwise-cookie-notice-button {
    padding: 10px 20px;
    background: #EB3398;
    border: none;
    border-radius: 25px;
}