/* ================= text-img-50-50 Start ================= */
.content-container.text-img-50-50-container { position: relative; }
.content-container.text-img-50-50-container.blue-pattern::before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: url(../../include/images/blue-pattern.jpg); background-size: 2600px; background-position: center; background-repeat: repeat; }
.content-container.text-img-50-50-container.gray-pattern::before { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: url(../../include/images/gray-pattern.jpg); background-size: 1366px; background-position: center; background-repeat: repeat; }
.content-container.text-img-50-50-container.right-img .row { flex-direction: row-reverse; justify-content: center; }
.ti-50-50-img { position: relative; }
.ti-50-50-img img { width: 100%; height: 100%; object-fit: cover; border: 10px solid #fff; border-radius: 5px; }
.ti-50-50-img::before { content: ''; width: 107px; height: 107px; background: var(--blue-color); position: absolute; left: -38px; bottom: -50px; border-radius: 5px; opacity: .90; box-shadow: 0 0 8px rgba(0, 0, 0, .73); z-index: -1; }
.blue-bg .ti-50-50-img::before, .blue-pattern .ti-50-50-img::before { background: var(--orange-color); opacity: .75 }
.teal-bg .ti-50-50-img::after { background: var(--orange-color); opacity: .75 }
.blue-bg, .orange-bg, .blue-pattern { color: #fff; }
.teal-bg .ti-50-50-text-content, .gray-pattern .ti-50-50-text-content { color: var(--blue-color); }
.ti-50-50-img::after { content: ''; width: 73px; height: 73px; background: var(--teal-color); position: absolute; right: -16px; top: -30px; border-radius: 5px; opacity: .85; z-index: 1; box-shadow: 0 0 8px rgb(0 0 0 / 73%); }
.ti-50-50-text-content { font-size: 18px; line-height: 24px; margin-top: 10px; }
.ti-50-50-text-content h3 { font-size: 44px; line-height: 44px; font-weight: 400; margin-bottom: 42px; }
.ti-50-50-text-content p { margin-bottom: 0; }
.ti-50-50-text-content .ti-50-50-cta { margin-top: 50px; }
.ti-50-50-img.no-shape { padding: 0; margin-bottom: 0; }
.ti-50-50-img.no-shape img { border: none; }
.ti-50-50-img.no-shape::before, .ti-50-50-img.no-shape::after { display: none; }
/* ================= text-img-50-50 End ================= */

/* ================= text-video-50-50 Start ================= */
.text-video-50-50-text{ color: var(--blue-color);}
.text-video-50-50-text h3 { font-weight: 500; margin-bottom: 22px;}
.text-video-50-50-cta { margin-top: 30px; }
.text-video-50-50-video-box { position: relative; cursor: pointer; height:0; padding-bottom: 70%;}
.text-video-50-50-video-box img { width: 100%; height: 100%; object-fit: cover;position: absolute; left: 0; top: 0; }
.text-video-50-50-video-box iframe{width: 100%; height: 100%; border: 0; position: absolute; left: 0; top: 0;}
.text-video-50-50-video-box .play-icon { font-size: 92px; color: #fff; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; }
.text-video-50-50-video-box::before { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .3); opacity: 0; visibility: hidden; transition: all .3s ease-in; }
.text-video-50-50-video-box:hover::before { opacity: 1; visibility: visible; }
/* ================= text-video-50-50 End ================= */


/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {

}

/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
    .ti-50-50-img {padding: 0 22px 0 44px;}
    .ti-50-50-img::before {left: 0;width: 88px;height: 88px;bottom: -44px;}
    .ti-50-50-img::after {right: 0px;width: 60px;height: 60px;top: -20px;}
}

/* =================================================  
 ! Small devices (landscape phones, less than 768px)
 ================================================= */
@media (max-width:767.98px) {
    .ti-50-50-text-content { width: 100%; margin-top: 56px; padding-left: 0; padding: 0 15px; }
    .ti-50-50-img { width: 100%; margin: 0 auto; margin-bottom: 44px; max-width: 450px; }
    .ti-50-50-img.no-shape { max-width: 230px; }
    .text-video-50-50-video-box .play-icon { font-size: 64px; }
    .text-video-50-50-video-box {margin-bottom: 36px;}
}

/* ======================================================
 ! Extra small devices (portrait phones, less than 576px)
 ====================================================== */
@media (max-width:413.98px) {
    .ti-50-50-text-content { margin-top: 40px; padding: 0; }
    .text-video-50-50-video-box .play-icon { font-size: 54px; }
    .ti-50-50-text-content h3, .text-video-50-50-text h3 { font-size: 33px; line-height: 36px; margin-bottom: 30px; }
}