/** Shopify CDN: Minification failed

Line 34:11 Expected ":"
Line 34:13 Expected identifier but found "0"
Line 148:11 Expected ":"
Line 148:13 Expected identifier but found "0"

**/
.image-with-content-new {
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    background: var(--background-color);
}
.image-with-content-new .text-content h2 {
    font-size: var(--title-size);
    color: var(--title-color);
    text-transform: capitalize;
    letter-spacing: 0;
    margin: 0;
    line-height: 1.2;
    font-family: 'Roboto Condensed Bold';
}

.image-with-content-new .back-image-content img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: auto;
}

.image-with-content-new .image-with-text-content {
    position: relative;
    transform: translateY(150px);
    opacity; 0;
    
}

.image-with-content-new.active .image-with-text-content {
    transform: translateY(0);
    transition: all 0.7s;
    opacity: 1;
}

.image-with-content-new .text-content {
    position: absolute;
    max-width: 23.4375vw;
    width: 100%;
    opacity: 0;
}
.image-with-content-new.active .text-content {
    transition: all 0.8s;
    opacity: 1;
}

.image-with-content-new .text-content .desc {
    margin: 0;
    padding: 1.0417vw 0 1.7708vw;
    font-size: 1.0417vw;
    color: #FFFFFF;
    line-height: 1.3;
}

.image-with-content-new a.contact-link{
    font-size: 1.0417vw;
    color: var(--btn-font-color);
    text-decoration: none;
    padding: 0.5208vw 0.8854vw;
    background: var(--btn-bck);
    line-height: 1.2;
    text-transform: capitalize;
    max-width: 11.4583vw;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2083vw;
    min-height: 2.2917vw;
    position: relative;
}

.image-with-content-new a.contact-link svg {
    transition: all .4s;
    filter: brightness(0);
    width: 1.0417vw;
    height: 1.0417vw;
}

.image-with-content-new .animation-text {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.image-with-content-new a.contact-link:after {
    content: "";
    position: absolute;
    top: -0.3125vw;
    right: -0.3125vw;
    bottom: -0.3125vw;
    left: -0.3125vw;
    transition: all .2s;
    background: linear-gradient(var(--btn-bck),var(--btn-bck)) top left / 0.8854vw 0.1042vw no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) top left / 0.1042vw 0.8854vw no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) top right / 0.8854vw 0.1042vw no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) top right / 0.1042vw 0.8854vw no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) bottom left / 0.8854vw 0.1042vw no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) bottom left / 0.1042vw 0.8854vw no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) bottom right / 0.8854vw 0.1042vw no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) bottom right / 0.1042vw 0.8854vw no-repeat;
}

.image-with-content-new span.top-text {
    line-height: 1;
    transform: translateY(0);
    transition: all .3s ease;
    opacity: 1;
}
.image-with-content-new  a.contact-link:hover span.top-text {
    transform: translateY(-50px);
    transition: all .3s ease;
    opacity: 0;
}
.image-with-content-new  a.contact-link:hover span.bottom-text {
    transform: translateY(-200%);
    transform: translateY(0);
    transition: all .3s ease;
    opacity: 1;
}
.image-with-content-new  a.contact-link:hover svg {
    transform: rotate(30deg);
    transition: all .3s ease;
}
.image-with-content-new span.bottom-text {
    position: absolute;
    transform: translateY(50px);
    transition: all .3s ease;
    line-height: 1;
    opacity: 0;
}

.image-with-content-new  a.contact-link:hover:after {
    top: -0.2083vw;
    right: -0.2083vw;
    bottom: -0.2083vw;
    left: -0.2083vw;
}

/* text right css*/

.image-with-content-new .image-with-text-content.right {
    transform: translateY(150px);
    opacity; 0;
}

.image-with-content-new .text-content.right {
    right: 8%;
    top: 50%;
    transform: translate(-8%, 120px);
    text-align: left;
}

.image-with-content-new.active .text-content.right {
    transform: translate(-8%, -50%);
}
/* end text right css*/



/* text left css*/

.image-with-content-new .text-content.left {
    left: 10%;
    top: 50%;
    transform: translate(-10%, 120px);
}

.image-with-content-new.active .text-content.left {
    transform: translate(-10%, -50%);
}
/* end text left css*/



/* text center css*/

.image-with-content-new .text-content.center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, 120px);
    text-align: center;
}

.image-with-content-new .text-content.center .contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
}


.image-with-content-new.active .text-content.center-center {
    transform: translate(-50%, -50%);
}
/* end text center-center css*/
.image-with-content-new .back-image-content .desktop-only{
    display: block;
}
.image-with-content-new .back-image-content  .mobile-only{
    display: none;
}
@media (max-width: 768px){

.image-with-content-new {
    padding-top: var(--padding-top-mob);
    padding-bottom: var(--padding-bottom-mob);
}

.image-with-content-new .text-content {
    right: 0;
    transform: translate(0,-50%);
    max-width: 400px;
}

.image-with-content-new .text-content h2 {
    font-size: var(--title-size-mob);
}

.image-with-content-new .text-content .desc {
    padding: 8px 0 16px;
    font-size: 14px;
}

.image-with-content-new a.contact-link {
    font-size: 18px;
    padding: 8px;
    min-height: 38px;
    max-width: 180px;
}

.image-with-content-new a.contact-link svg {
    width: 16px;
    height: 16px;
}
.image-with-content-new .back-image-content .desktop-only{
    display: none;
}
.image-with-content-new .back-image-content .mobile-only{
    display: block;
}
.image-with-content-new.active .text-content.right,
.image-with-content-new.active .text-content.left{
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    padding: 0 20px;
}
.image-with-content-new  a.contact-link:hover:after {
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
}
.image-with-content-new a.contact-link:after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    transition: all .2s;
    background: linear-gradient(var(--btn-bck),var(--btn-bck)) top left / 12px 2px no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) top left / 2px 12px no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) top right / 12px 2px no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) top right / 2px 12px no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) bottom left / 12px 2px no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) bottom left / 2px 12px no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) bottom right / 12px 2px no-repeat,linear-gradient(var(--btn-bck),var(--btn-bck)) bottom right / 2px 12px no-repeat;
}
.image-with-content-new a.contact-link {
    font-size: 14px;
    padding: 8px 11px;
    min-height: 28px;
    max-width: 155px;
    gap: 7px;
    width: auto;
}
.contact-button{
    display: flex;
    align-items: center;
    justify-content: center;
}
}