/*address custom CSS input here, you can add your own .customclass and then use customclass in the webcomponent */
.icf--headerminheight {
    min-height: unset !important;
}


.icf--footer a:hover {
    color: #00c1d5 !important;
    border-bottom: solid 1px #00c1d5;
}


/*this makes the button on image card 3 centred*/
.WebpageComponent-Image-Card-3-0 .card-bottom {
    display: flex;
    justify-content: center; /* Horizontally center the button */
}

.ICF-Hero-3 {
    max-height: 300px;
}

    .ICF-Hero-3 .Overlay {
        height: 132% !important
    }

.OverlayEvent-deleted {
    background-color: transparent !important;
    background-image: linear-gradient(-45deg, rgb(0, 193, 213) 0%, rgb(6, 14, 159) 100%) !important;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.HeroOverlay--green-yellow .Overlay {
    background-color: transparent !important;
    background-image: linear-gradient(-45deg, #ffb547 0%, #00c1d5 100%) !important;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    animation: gradientAnimationX 60s ease infinite; /* Add animation here */
}

.HeroOverlay--blue-light-blue .Overlay {
    background-color: transparent !important;
    background-image: linear-gradient(-45deg, #00c1d5 0%, #060e9f 100%) !important;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    animation: gradientAnimationX 60s ease infinite; /* Add animation here */
}

.HeroOverlay--orange-yellow .Overlay {
    background-color: transparent !important;
    background-image: linear-gradient(-51deg, #FFB547 0%, #FF5851 100%) !important;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    animation: gradientAnimationX 60s ease infinite; /* Add animation here */
}

.HeroOverlay--purple-red .Overlay {
    background-color: transparent !important;
    background-image: linear-gradient(-51deg, #1E1597 0%, #EC5257 100%) !important;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    animation: gradientAnimationX 60s ease infinite; /* Add animation here */
}

@keyframes gradientAnimationX {
    0% {
        background-position: 50% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 50% 0%;
    }
}


/* Curved buttons */
.btn.btn-primary {
    padding: 6px 10px !important;
    border-radius: 20px !important;
}

.btn.btn-secondary {
    padding: 6px 10px !important;
    border-radius: 20px !important;
}

.btn.btn-delete {
    padding: 6px 10px !important;
    border-radius: 20px !important;
}

.btn.btn-warning {
    padding: 6px 10px !important;
    border-radius: 20px !important;
}

/* Mobile Hamburger Menu */
.mobile-menu-header-wrapper .close-button {
    border-radius: 0px !important;
}

/*Font Face*/
@font-face {
    font-family: 'proxima-nova';
    src: url('https://use.typekit.net/af/949f99/00000000000000003b9b3068/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3') format('woff2'), url('https://use.typekit.net/af/949f99/00000000000000003b9b3068/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3') format('woff'), url('https://use.typekit.net/af/949f99/00000000000000003b9b3068/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('https://use.typekit.net/af/576d53/00000000000000003b9b3066/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3') format('woff2'), url('https://use.typekit.net/af/576d53/00000000000000003b9b3066/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3') format('woff'), url('https://use.typekit.net/af/576d53/00000000000000003b9b3066/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n6&v=3') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('https://use.typekit.net/af/705e94/00000000000000003b9b3062/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3') format('woff2'), url('https://use.typekit.net/af/705e94/00000000000000003b9b3062/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3') format('woff'), url('https://use.typekit.net/af/705e94/00000000000000003b9b3062/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}

@font-face {
    font-family: 'proxima-nova';
    src: url('https://use.typekit.net/af/6e816b/00000000000000003b9b3064/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3') format('woff2'), url('https://use.typekit.net/af/6e816b/00000000000000003b9b3064/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3') format('woff'), url('https://use.typekit.net/af/6e816b/00000000000000003b9b3064/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    font-display: auto;
}



.gradientAnimation {
    animation: gradientAnimationX 60s ease infinite;
}

.Overlay {
    animation: gradientAnimationX 60s ease infinite;
}

@keyframes gradientAnimationX {
    0% {
        background-position: 50% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 50% 0%;
    }
}



/*This is for certificates - need to isolate this to a class like .certificate next version this class should be live on the template*/

.mition--certificate{

}

h1, h2, h5 {
    color: #00c1d5;
    font-family: proxima-nova, sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
}

h1 {
    font-size: 40px;
}

h3, h4, h6 {
    color: #060e9f;
    font-family: proxima-nova, sans-serif;
    font-weight: 600;
}


@media (min-width: 1600px) {
    .WebpageComponent-Call-to-action-2-0 .card {
        padding: 20px;
        width: 100%;
        border-radius: 30px;
    }

    .card-img-top {
        border-top-left-radius: calc(.25rem - 1px);
        border-top-right-radius: calc(.25rem - 1px);
        width: 100%;
        border-radius: 30px;
    }
}

/*Add rounded corners to CTA2 tablet/mobile*/
@media (max-width: 1599px) {
    .WebpageComponent-Call-to-action-2-0 .card {
        padding: 15px;
        width: 100%;
        border-radius: 30px;
    }

    .card-img-top {
        border-top-left-radius: calc(.25rem - 1px);
        border-top-right-radius: calc(.25rem - 1px);
        width: 100%;
        border-radius: 15px;
    }
}


/*Pricing Section - make cards same height*/

.clean-pricing-item .card-body h5 {
    min-height: 80px;
    padding: 0px !important;
    margin: 0px !important;
}