.hero {
    width: 100%;
    border-bottom: 1px #232323 solid;
    color: white;
    text-align: center;
    overflow: hidden;
    padding-bottom: 20px;
    --container-width: 1200px;
    --container-max-width: 90%;
    --card-aspect-ratio: 320 / 390;
}

.hero-content {
    position: absolute;
    left: 50%;
    top: 50vh;
    z-index: 10;
    display: flex;
    gap: 20px;
    flex-direction: column;
    transform: translate(-50%, -50%);
    transition: opacity .25s ease-in-out;
    transition-delay: .4s;
}

.hero-content .play-button {
    margin-top: 50px;
    transition: all .25s ease-in-out;
}

.hero-content .play-button:hover {
    transform: scale(1.05);
}

.hero.active .hero-content {
    opacity: 0;
    transition-delay: 0s;
    pointer-events: none;
}

.hero .cards-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    /* margin-bottom: -70px; */
    width: var(--container-width);
    max-width: var(--container-max-width);
}

img.circle-logo {
    width: 140px;
}

.circle-logo-wrapper {
    display: flex;
    align-items: center;
    max-width: 150px;
}

.card-wrapper {
    z-index: 1;
    /*
    display: flex;
    flex-direction: column;
    */
}

.hero .hero-text p,
.hero .hero-text span,
.hero .hero-text .main-h-title {
    z-index: 11;
    position: relative;
    transition: all .6s cubic-bezier(0.65, 0.05, 0.36, 1);
    transition-delay: .2s;
}

.hero.active .img-left,
.hero.active .img-right {
    transform: translateX(0);
    opacity: 1;
    border-radius: 20px;
    transition: all .8s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.hero.active .expandable {
    width: 100vw;
    height: 100vh;
}

.hero.active .hero-text,
.hero.active .hero-text video,
.hero.active div.second-layer,
.hero.active .hero-text .overlay {
    border-radius: 20px;
}

.hero.active .overlay {
    opacity: 0;
}

.hero.active .hero-text {
    background: transparent !important;
}

.hero .img-left img,
.hero .img-right img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.hero .play-btn,
.play-light-box {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: block;
}

.elementor-icon svg {
    width: 100%;
    height: 100%;
}

#hero-scroll-down {
    z-index: 10;
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition: all .2s ease-in;
}

#hero-scroll-down svg {
    width: 40px;
    height: 40px;
}

.hero.active #hero-scroll-down {
    opacity: 0;
    visibility: hidden;
}

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

    .hero .play-btn,
    .play-light-box {
        width: 80px;
        height: 80px;
    }

    .main-h-title.custom-title-1 {
        margin-bottom: 10px;
    }
}


.hero .full-height {
    height: 100vh;
}

.img-left,
.img-right,
.hero-text {
    filter: drop-shadow(-2px -2px 6px rgba(79, 79, 79, 0.5)) drop-shadow(5px 8px 8px rgba(27, 30, 33, 0.5));
}

.hero .description h2 {
    margin: 0;
}

.sub-heading {
    font-size: 15px;
}

.sub-h-title.custom-title-3 {
    font-family: var(--font-stack-heading);
    margin-bottom: 20px;
    letter-spacing: 0.2rem;
}

.main-h-title .custom-title-1 {
    margin-bottom: 20px;
    font-family: var(--font-stack-heading);
    letter-spacing: 0.2rem;
}

.hero .hero-text {
    border: none !important;
}

.img-left,
.img-right {
    height: 100%;
}

.img-left,
.img-right,
.hero-text {
    filter: none !important;
}

.card-wrapper,
.spacer {
    flex: 0 0 calc(33% - 20px);
    position: relative;
}

.hero .elementor-button {
    white-space: nowrap;
}

/* Elementor gallery affects the hero
and creates an extra scrollbar */

.elementor-widget-gallery {
    overflow-x: hidden !important;
}

.hero .second-layer img {
    opacity: 0;
}

@media screen and (min-width: 1025px) {
    .hero {
        height: calc(100vh + 1px);
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .hero:not(.enable-overflow) .hero-text {
        overflow: hidden;
    }

    .hero .first-layer-wrapper img,
    .hero .first-layer-wrapper video {
        position: absolute;
        max-width: 100vw;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all .2s cubic-bezier(0.65, 0.05, 0.36, 1);
        transition-delay: .1s;
    }

    .hero img.second-layer {
        opacity: 0;
        transition-delay: 0s;
    }

    .hero.active img.second-layer {
        opacity: 1;
        transition-delay: .25s;
    }

    .hero-main-img {
        position: absolute;
        max-width: 100vw;
        width: 100vw;
        height: auto;
        object-fit: cover;
        left: 0;
        bottom: -10px;
        transition: all .2s cubic-bezier(0.65, 0.05, 0.36, 1);
        transition-delay: .1s;
    }

    video.second-layer {
        position: absolute;
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
        object-fit: cover;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: all .2s cubic-bezier(0.65, 0.05, 0.36, 1);
        transition-delay: .1s;
    }

    .hero.active .second-layer img {
        opacity: 1;
    }

    .hero .hidden-row {
        opacity: 0;
        visibility: hidden;
        transition: all .2s cubic-bezier(0.65, 0.05, 0.36, 1);
        transform: translateY(-20px);
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        width: var(--container-width);
        max-width: var(--container-max-width);
        text-align: left;
    }

    .hidden-row p {
        max-width: 800px;
    }

    .hero.active .hidden-row {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        transition: all 1.8s cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
        /* 0.5s delay */
    }

    .hero .img-left,
    .hero .img-right {
        opacity: 0;
        transition: all .20s ease-in-out;
        width: 100%;
        height: auto;
        aspect-ratio: var(--card-aspect-ratio);
        z-index: 20;
        overflow: hidden;
    }

    .hero .spacer {
        width: 100%;
        height: auto;
        aspect-ratio: var(--card-aspect-ratio);
    }

    .hero .img-details img {
        width: 50px;
    }

    .hero.hero-w-img .img-details {
        opacity: 0;
        position: absolute;
        bottom: -20px;
        transform: translateY(0px);
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .hero.hero-w-img.active .img-details {
        opacity: 1;
        transform: translateY(-25px);
        transition: all 2.8s cubic-bezier(0.65, 0.05, 0.36, 1) 0.5s;
    }

    .hero:not(.hero-w-img) .img-details {
        opacity: 0;
        position: absolute;
        left: calc(50% - 25px);
        bottom: -75px;
        transform: translateY(0px);
        transition: none;
        z-index: 20;
    }

    .hero:not(.hero-w-img).active .img-details {
        opacity: 1;
        transform: translateY(-25px);
        transition: all 2.8s cubic-bezier(0.65, 0.05, 0.36, 1) 0.5s;
        /* 0.5s delay */
        z-index: 20;
    }

    .hero.hero-w-img .img-left img,
    .hero.hero-w-img .img-right img,
    .hero.hero-w-img .second-layer {
        max-width: 85%;
        margin: 0 auto;
        object-fit: contain;
    }

    .img-details-icon {
        display: block;
    }

    .img-details-text {
        padding-top: 5px;
    }

    .hero .img-left {
        transform: translateX(-500px);
    }

    .hero .img-right {
        transform: translateX(500px);
    }

    .hero:not(.hero-w-img) .img-details.mid {
        position: absolute;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        bottom: 0;
    }

    .hero:not(.hero-w-img).active .img-details.mid {
        transform: translateX(-50%) translateY(calc(100% - 30px));
    }

    .hero.active .card-wrapper.with-link a>img,
    .hero.active .hero-text.with-link .second-layer {
        transform: scale(1);
        transition: transform 0.3s ease-out, opacity 0.3s ease-in .25s;
    }

    .hero.active .card-wrapper.with-link:hover a>img,
    .hero.active .hero-text.with-link:hover .second-layer {
        transform: scale(1.05);
    }

    .hero.active .card-wrapper.with-link:hover .elementor-button,
    .hero.active .hero-text.with-link:hover .elementor-button {
        background-color: white;
        color: black;
    }

    .hero.active .hero-text p,
    .hero.active .hero-text span,
    .hero.active .hero-text .main-h-title {
        opacity: 0;
        transition: all .2s cubic-bezier(0.65, 0.05, 0.36, 1);
        transition-delay: .1s;
    }

    .hero.active video.second-layer,
    .hero.active div.second-layer {
        width: 100%;
        height: auto;
        aspect-ratio: var(--card-aspect-ratio);
    }

    .hero .hero-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: black;
        border-left: 1px #232323 solid;
        border-right: 1px #232323 solid;
        gap: 50px;
        width: 650px;
        z-index: 5;
        height: 100%;
        position: absolute;
        font-size: 32px;
        transition: background .25s ease-in;
        top: 0;
    }

    .hero-w-img.hero .hero-text {
        background: none;
    }

    .hero .hero-text .img-details-text,
    .hero .hero-text .img-details-text span {
        font-size: 1rem;
        opacity: 1;
    }

    .hero .expandable {
        position: absolute;
        background: #232323;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: background .5s ease-in-out, height .8s cubic-bezier(0.65, 0.05, 0.36, 1), width .8s cubic-bezier(0.65, 0.05, 0.36, 1);
        z-index: 1;
        width: 650px;
        height: 100%;
    }

    .hero-w-img.hero:not(.active) .expandable {
        background: #00000049;
    }

    .hero .overlay {
        opacity: 1;
        background: #00000050 !important;
        transition: opacity .3s ease-out;
        width: 100%;
        height: 100%;
        position: absolute !important;
        left: 0;
        top: 0;
        transition-delay: .5s;
    }

    .hero-w-img.hero .overlay {
        display: none;
    }

    .hero.active .overlay {
        transition-delay: .0s;
    }

    .hero-text-mobile {
        display: none;
    }
}

@media screen and (max-width: 1024px) {
    .hero {
		padding-bottom: 60px;
		border-bottom: none;
	}
	.first-layer-wrapper {
        height: 100vh;
        position: relative;
    }

    .first-layer-wrapper::after {
        content: "";
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(0, 0, 0, .5);
        /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(255, 118, 19, 0.4)); */
        position: absolute;
    }

    video.first-layer {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero .first-layer-wrapper img {
        height: 100%;
        object-fit: cover;
    }

    .hero-text-mobile {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% - 40px);
    }

    .hero.hero-w-img .cards-row {
        flex-direction: column;
        padding: 0 0 50px;
        gap: 50px;
        align-items: center;
    }
	

    .hero.hero-w-img .hero-text,
    .hero.hero-w-img .card-wrapper {
        width: 75%;
    }

    .spacer {
        display: none;
    }

    /* Desktop hero text */
    .hero-text .main-h-title,
    .hero-text .sub-h-title,
    .hero-text .play-btn {
        display: none;
    }

    .hero-text,
    .card-wrapper {
        flex: 0 0 30%;
        aspect-ratio: 100 / 123;
        position: relative;
    }

    .hero-text video,
    .card-wrapper img {
        border-radius: 5px;
        overflow: hidden;
    }

    .hero-content {
        width: 100%;
        gap: 0;
    }

    .hero .cards-row {
        gap: 20px;
    }

    .hero-text .second-layer {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .img-details {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -40px;
        text-align: center;
    }

    .img-details .img-wrapper {
        width: 29px;
        height: 29px;
        padding: 3px;
        background: #232323;
        display: flex;
        align-items: center;
        justify-items: center;
        border-radius: 50%;
    }

    .img-details img {
        width: 25px;
        display: block;
    }

    .cards-row,
    .hidden-row {
        width: calc(100% - 40px);
        margin: 0 auto;
        /*
        text-align: left;
        */
    }

    .hidden-row {
        text-align: left;
    }

    .hero {
        display: flex;
        flex-direction: column;
    }

    .hero .first-layer-wrapper {
        order: 1;
    }
    
    .hero .hidden-row {
        order: 2;
    }

    .hero .cards-row {
        order: 3;
    }

    .hidden-row {
        padding: 50px 0 0px;
        position: relative;
    }

    .cards-row {
        margin: 35px auto;
    }

    .circle-logo-wrapper {
        width: 75px;
        height: 75px;
        position: absolute;
        right: 10px;
        top: 20px;
    }

    .hero .expandable {
        display: none;
    }

    .hero-w-img.hero .hero-text {
        background: none;
    }

    #hero-scroll-down { 
        top: 80vh;
        bottom: unset;
    }
}
@media screen and (max-width: 768px) and (min-width: 370px) {
	.hero.hero-w-img .hero-text,
	.hero.hero-w-img .card-wrapper {
        width: calc(50% - 5px);
        flex: inherit;
        aspect-ratio: 1 / 1;
    }
/* 	.hero.hero-w-img .img-right a {
		display: block;
		width: 80%;
		margin: auto;
	} */
	.hero.hero-w-img .cards-row {
        flex-direction: row;
        padding: 0px;
        gap: 50px 10px;
        align-items: center;
        flex-wrap: wrap;
    }
	    .img-details {
        bottom: -40px;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1440px) {
    .hero {
        --container-width: 960px;
        --container-max-width: 90%;
    }
}

@media screen and (min-width: 1600px) {
    .hero {
        --container-width: 1360px;
        --container-max-width: 90%;
    }

    .hero .cards-row {
        gap: 50px;
    }

    .card-wrapper,
    .spacer {
        flex: 0 0 calc(33.33% - 33.33px);
        position: relative;
    }
}

.product-hero .hero-content .sub-h-title {
    margin-bottom: 0;
}

.product-hero .hero-content {
    flex-direction: column-reverse;
    gap: 0px;
}

.extra-card {
    display: none;
}


.mob-extra .img-left,
.mob-extra .img-right {
    height: 100%;
	display: flex;
    align-items: center;
}

.mob-extra .hero-text.with-link {
    display: flex;
    align-items: center;
}

@media screen and (min-width: 1600px) {
    .mob-extra .hero .cards-row {
        gap: 20px;
    }
}

@media screen and (max-width: 1024px) {
	.mob-extra .img-left,
	.mob-extra .img-right, 
	.mob-extra .hero-text.with-link{
		align-items: flex-start;
	}
	.mob-extra .hero.hero-w-img .cards-row{
		padding: 0px;
	}
	.mob-extra .cards-row {
        margin:0px auto;
    }
	.mob-extra .extra-card {
		display: block;
	}
	
	.mob-extra .hero.hero-w-img .cards-row{
		display: flex;
		flex-flow: wrap;
		gap: 50px 0px;
	}
	.mob-extra .hero-text, .mob-extra .card-wrapper {
        flex: 0 0 50%;
    }
}
/*hero*/
.hero .overlay{
	background:#00000050!important;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}

.rotate-icon .words {
    animation: rotate 20s linear infinite;
    transform-origin: center;
}

.scoll-icon svg{
    animation: float 3s ease-in-out infinite;
}

.rotate-icon svg path {
    fill: #FFF !important;
}



@media screen and (max-width: 768px) {
	.card-with .elementor-widget-image {
		width: 100%;
	}
	.mob-hide{
		display:none;
	}
	.rotate-icon svg{
		width: 80px;
	}
}