/* AEU Image Widget - Style 3 (choose-img-box) */
.choose-img-box {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 120px;
    z-index: 1;
}

.choose-img-box:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1000000px;
    bottom: 0;
    right: 200px;
    background-color: var(--thm-base, #ff8300);
    z-index: -1;
}

.choose-img-box .inner {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--thm-bg, #1a1a1a);
}

/* Border box - uses padding offset to stay centered with image */
.choose-img-box .border-box {
    position: absolute;
    top: 120px; /* matches padding-top */
    bottom: 0;
    left: -10px;
    width: 10px;
    background: #ffffff;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    z-index: 2;
    /* Add some margin to not touch edges */
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Style Four - both padding: adjust top */
.choose-img-box.choose-img-box--both .border-box {
    top: 120px;
    bottom: 120px;
}

/* Style Five - bottom padding only: no top offset */
.choose-img-box.choose-img-box--bottom .border-box {
    top: 0;
    bottom: 120px;
    margin-top: 40px;
}

.choose-img-box .inner {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--thm-bg, #1a1a1a);
}

.choose-img-box .inner img {
    width: 100%;
    display: block;
    -webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    transform: scale(1.0);
    -webkit-transition: transform 0.5s ease-out !important;
    -moz-transition: transform 0.5s ease-out !important;
    transition: transform 0.5s ease-out !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    mix-blend-mode: luminosity;
}

.choose-img-box .inner:hover img {
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    transform: scale(1.3);
    mix-blend-mode: normal;
}

/* Float Bob Y Animation */
@-webkit-keyframes float-bob-y {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(-20px);
    }
}

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

.float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/* Float Bob X Animation */
@-webkit-keyframes float-bob-x {
    0% {
        transform: translateX(-20px);
    }
    50% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(-20px);
    }
}

@keyframes float-bob-x {
    0% {
        transform: translateX(-20px);
    }
    50% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(-20px);
    }
}

.float-bob-x {
    -webkit-animation-name: float-bob-x;
    animation-name: float-bob-x;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/* Responsive */
@media only screen and (max-width: 1200px) {
    .choose-img-box:before {
        display: none;
    }
    .choose-img-box.choose-img-box--right:before {
        display: none;
    }
}

@media only screen and (max-width: 991px) {
    .choose-img-box {
        padding-top: 60px;
    }

    .choose-img-box:before {
        left: -1000000px;
        right: -100000px;
    }

    .choose-img-box.choose-img-box--right:before {
        left: -100000px !important;
        right: -1000000px !important;
    }
}

@media only screen and (max-width: 767px) {
    .choose-img-box {
        padding-top: 40px;
    }

    .choose-img-box .border-box {
        display: none;
    }
}

/* Right side background extension */
.choose-img-box.choose-img-box--right:before {
    left: 200px !important;
    right: -1000000px !important;
}

.choose-img-box.choose-img-box--right .border-box {
    left: auto;
    right: -10px;
}

/* Disable background extension */
.choose-img-box.no-bg-extension:before {
    display: none !important;
}

/* Style Four - padding top AND bottom 120px */
.choose-img-box.choose-img-box--both {
    padding-top: 120px;
    padding-bottom: 120px;
}

/* Style Five - padding bottom only 120px */
.choose-img-box.choose-img-box--bottom {
    padding-top: 0;
    padding-bottom: 120px;
}

/* Responsive for Style Four and Five */
@media only screen and (max-width: 991px) {
    .choose-img-box.choose-img-box--both {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .choose-img-box.choose-img-box--bottom {
        padding-bottom: 60px;
    }

    /* Border box responsive adjustments */
    .choose-img-box .border-box {
        top: 60px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .choose-img-box.choose-img-box--both .border-box {
        top: 60px;
        bottom: 60px;
    }

    .choose-img-box.choose-img-box--bottom .border-box {
        top: 0;
        bottom: 60px;
        margin-top: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .choose-img-box.choose-img-box--both {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .choose-img-box.choose-img-box--bottom {
        padding-bottom: 40px;
    }
}

/* === STANDALONE SHAPE ELEMENTS === */
/* Shape 1 - Skewed rectangle (orange) - uses :before for skew so paroller can work */
.shape-1 {
    position: absolute;
    top: 60px;
    left: -100px;
    width: 120px;
    height: 170px;
    z-index: 2;
}

.shape-1:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--thm-base, #ff8300);
    -moz-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    -o-transform: skew(20deg, 0deg);
    -ms-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
}

/* Shape 1 - Right side variant (for style 2) */
.shape-1.shape-right {
    left: auto;
    right: -120px;
}

.shape-1.shape-right:before {
    -moz-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    -o-transform: skew(-20deg, 0deg);
    -ms-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
}

/* Shape 2 - Smaller skewed square (dark) */
.shape-2 {
    position: absolute;
    top: 230px;
    left: -170px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.shape-2:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--thm-black, #1a1a1a);
    -moz-transform: skew(20deg, 0deg);
    -webkit-transform: skew(20deg, 0deg);
    -o-transform: skew(20deg, 0deg);
    -ms-transform: skew(20deg, 0deg);
    transform: skew(20deg, 0deg);
}

/* Shape 2 - Right side variant */
.shape-2.shape-right {
    left: auto;
    right: -200px;
}

.shape-2.shape-right:before {
    -moz-transform: skew(-20deg, 0deg);
    -webkit-transform: skew(-20deg, 0deg);
    -o-transform: skew(-20deg, 0deg);
    -ms-transform: skew(-20deg, 0deg);
    transform: skew(-20deg, 0deg);
}