@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot') format('embedded-opentype'),
        url('../fonts/Roboto-Light.woff') format('woff'),
        url('../fonts/Roboto-Light.ttf') format('truetype'),
        url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.eot');
    src: url('../fonts/Roboto-Bold.eot') format('embedded-opentype'),
        url('../fonts/Roboto-Bold.woff') format('woff'),
        url('../fonts/Roboto-Bold.ttf') format('truetype'),
        url('../fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Almarai Lt';
    src: url('../fonts/almarai-light.woff2') format('woff2'),
        url('../fonts/almarai-light.woff') format('woff'),
        url('../fonts/almarai-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Almarai Rg';
    src: url('../fonts/almarai-regular.woff2') format('woff2'),
        url('../fonts/almarai-regular.woff') format('woff'),
        url('../fonts/almarai-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Almarai Bl';
    src: url('../fonts/almarai-bold.woff2') format('woff2'),
        url('../fonts/almarai-bold.woff') format('woff'),
        url('../fonts/almarai-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Almarai Eb';
    src: url('../fonts/almarai-extrabold.woff2') format('woff2'),
        url('../fonts/almarai-extrabold.woff') format('woff'),
        url('../fonts/almarai-extrabold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gobold Bold';
    src: url('../fonts/Gobold Bold.eot');
    src: local('☺'),
        url('../fonts/Gobold Bold.woff') format('woff'),
        url('../fonts/Gobold Bold.ttf') format('truetype'),
        url('../fonts/Gobold Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.preload *,
.rtl .preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

body {
    position: relative;
    /* font-smoothing: antialiased; */
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

.custom_container {
    position: relative;
    max-width: 1140px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.intro_container {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    transform: translateY(0);
    will-change: transform, height;
    z-index: 99;
}

.escape_intro {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    /* background-color: #e60000; */
    background-color: rgba(0, 0, 0, .6);
    /* mix-blend-mode: multiply; */
    color: #fff;
    text-transform: uppercase;
    z-index: 99;
}

.escape_intro:hover {
    background-color: #fff;
    border: 1px solid #e60000;
}

.escape_intro:focus {
    box-shadow: none
}

#lottie {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    overflow: hidden;
}

.header {
    padding: 50px 0px 0px 0px;
    background-image: url(../images/header-bg.jpg);
    background-repeat: repeat-x;
    background-size: contain;
    height: 100%;
    width: 100%;


}

.navbar-brand {
    margin-right: 0px;
}

.navbar-brand img {
    width: 70%;
    float: right;
}

.main-navbar .nav-link {
    display: block;
    color: #000;
    text-transform: uppercase;
    font-family: 'Gobold Bold';
    font-size: 19px;
}

.main-navbar .nav-link:hover {
    color: #e60000;
}

.main-navbar .nav-item {
    display: flex;
    align-items: center;
    margin-right: 50px;
    position: relative;
}

.main-navbar .nav-item span {
    padding-left: 5px;
    opacity: 0;
    display: none
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-left: 0px;
    padding-right: 0rem;
}

.main-navbar .nav-item::before {
    content: url(../images/nav-after.png);
    position: absolute;
    width: 30px;
    height: 4px;
    border-radius: 4px;
    top: 10px;
    right: -35px;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.main-navbar .nav-item:hover::before {
    transform-origin: left;
    transform: scaleX(1);
}

.main-navbar .nav-item::after {
    content: url(../images/nav-before.png);
    position: absolute;
    width: 30px;
    height: 4px;
    border-radius: 4px;
    top: 10px;
    left: -35px;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform .3s ease-in-out;
}

.main-navbar .nav-item:hover::after {
    transform-origin: right;
    transform: scaleX(1);
}

.main-navbar .active::before {
    content: url(../images/nav-after.png);
    position: absolute;
    width: 30px;
    height: 4px;
    border-radius: 4px;
    top: 10px;
    right: -35px;
    transform-origin: right;
    transform: scaleX(1);
    transition: transform .3s ease-in-out;
}

.main-navbar .active::after {
    content: url(../images/nav-before.png);
    position: absolute;
    width: 30px;
    height: 4px;
    border-radius: 4px;
    top: 10px;
    left: -35px;
    transform-origin: left;
    transform: scaleX(1);
    transition: transform .3s ease-in-out;
}

.main-navbar .active .nav-link {
    color: #e60000;
}


.fixed-warpper {
    position: fixed;
    top: 25%;
    left: 0;
    right: 0px;
    z-index: 99;
    mix-blend-mode: difference;
    background: none;
}

.social-top-container {
    position: relative;
    max-width: 1170px;
    float: none;
    margin: 0 auto;
}

.social_container {
    position: absolute;
    top: 60px;
    right: -60px;
    z-index: 99;
    display: flex;
    flex-direction: column;

}

.social_container svg {
    margin: 10px 0;
    fill: #fff;
    transition: fill .35s linear;
}

.social_container svg:hover {
    /*    fill: #e60000 !important;*/
    fill: #19FFFF;
    transition: fill .35s linear;

}

.video_container {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    z-index: 11;
}

.video_container video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 2;
    mix-blend-mode: difference;
}

.video_desc {
    font-size: 20px;
    line-height: 30px;
    margin-top: 25px;
    font-family: 'Roboto-Regular';
    text-transform: capitalize;
    padding: 50px 20%;
    text-align: center;
}

.video_desc strong {
    color: #e60000;
    font-family: 'Roboto-Bold';
}

.video_desc-ar {
    font-size: 18px;
    line-height: 30px;
    margin-top: 25px;
    font-family: 'Almarai Rg';
    text-transform: uppercase;
}


.latestvideo {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
}

.latestvideocontainer {
    width: calc(33.3% - 20px);
    margin-right: 20px;
}


.homelatestvideo {
    position: relative;

}

.owl-carousel-video {
    margin: auto;
    padding: 0px 60px;
}

.videoimg {
    background-color: #E41316;
    width: 100%;
    height: 220px;
    border: 2px solid #E41316;
    overflow: hidden;
    transition: all 0.5s;
}

.videoimg img {
    width: 100%;
    height: 100%;
    filter: grayscale(50%);
    transition: all 0.5s;
    object-fit: cover;
}

.videoimg:hover img {
    filter: grayscale(0%);
    mix-blend-mode: multiply;
    transition: all 0.5s;
}


.latesttitle {
    font-size: 22px;
    color: #000;
    line-height: 26px;
    font-family: 'Gobold Bold';
    text-transform: uppercase;
}

.latestvideo_desc {
    font-size: 15px;
    line-height: 18px;
    margin-top: 5px;
    font-family: 'Roboto-Bold';
    text-transform: uppercase;
    font-style: italic;
    color: #e60000;
}

.latestvideo_desc a {color: #e60000;}

.latestvideo_desc span {
    font-size: 14px;
    line-height: 18px;
    display: block;
    font-family: 'Roboto-Regular';
    text-transform: capitalize;
    font-style: italic;
    color: #000;
}

.more-projects
{
   margin-left: auto;
   margin-right: 0px; 
}

.more-projects button
{
    color: #E41316;
    border: 2px solid #E41316;
    background-color: transparent;
    font-family: 'Roboto-Bold';
    font-size: 16px;
    line-height: 20px;
    text-transform: uppercase;
}

.more-projects button:hover
{
    color: #fff;
    border: 2px solid #E41316;
    background-color: #E41316;
     
}

.next-page {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    padding-top: 20px;
}

.linktonext a {
    color: #e60000;
    font-family: 'Gobold Bold';
    font-size: 14px;
    line-height: 16px;
}

.arrowtonext {
    text-align: center;
}

.latesttitle-ar {
    font-size: 24px;
    color: #000;
    line-height: 30px;
    font-family: 'Almarai Eb';
    text-transform: uppercase;
}

.videoplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.videoplay img {
    width: 100%;
}

.videoplay:hover img {
    filter: opacity(0.8)
}


.video-text {
    margin-top: 15px;
}

.latestvideo_desc-ar {
    font-size: 17px;
    line-height: 30px;
    margin-top: 10px;
    font-family: 'Almarai Rg';
}

.homemodal .modal-dialog {
    max-width: 60%;
}

.topbar_container {
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 30px;
    z-index: 12;
}

.video_sound_btn {
    background-color: transparent;
    outline: none;
    border: none;
    padding: 0;
    width: 20px;
    height: 25px;
    cursor: pointer;
}

.video_sound_btn span.mute {
    width: 100%;
    height: 100%;
    display: block;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 492.6 508.5' xml:space='preserve'%3E%3Cpath fill='%23fff' d='M263.5,0.1C257.8-0.4,251,1,243,5.8c0,0-132.5,115.6-138.3,121.3H31.8C14.2,127.1,0,141.4,0,158.9v194.7 c0,17.6,14.2,31.8,31.8,31.8h72.9c5.8,5.8,138.3,117.3,138.3,117.3c8,4.8,14.7,6.2,20.5,5.7c11.8-1.1,20-11,22.5-21.4 c0.1-1,0.1-464.5-0.1-465.5C283.6,11.1,275.3,1.2,263.5,0.1z M432,254.3l54.9-54.9c7.6-7.6,7.6-19.9,0-27.4c-7.6-7.6-19.9-7.6-27.4,0l-54.9,54.9L349.7,172 c-7.5-7.6-19.9-7.6-27.4,0c-7.6,7.6-7.6,19.9,0,27.4l54.9,54.9l-54.9,54.9c-7.6,7.5-7.6,19.9,0,27.4c7.5,7.6,19.9,7.6,27.4,0 l54.9-54.9l54.9,54.9c7.6,7.6,19.9,7.6,27.4,0c7.6-7.5,7.6-19.9,0-27.4L432,254.3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.video_sound_btn span.unmute {
    width: 100%;
    height: 100%;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 492.6 508.5' xml:space='preserve'%3E%3Cpath fill='%23fff' d='M263.5,0.1C257.8-0.4,251,1,243,5.8c0,0-132.5,115.6-138.3,121.3H31.8C14.2,127.1,0,141.4,0,158.9v194.7 c0,17.6,14.2,31.8,31.8,31.8h72.9c5.8,5.8,138.3,117.3,138.3,117.3c8,4.8,14.7,6.2,20.5,5.7c11.8-1.1,20-11,22.5-21.4 c0.1-1,0.1-464.5,0-465.5C283.6,11.1,275.3,1.2,263.5,0.1z M335,309.8c-7.9,4-11,13.5-7.1,21.4c2.8,5.5,8.4,8.7,14.2,8.7c2.4,0,4.8-0.6,7.2-1.7 c32.1-16.2,52.1-48.3,52.1-83.9s-20-67.7-52.1-83.9c-7.9-4-17.4-0.8-21.4,7.1c-3.9,7.9-0.8,17.4,7.1,21.4 c21.3,10.7,34.6,32,34.6,55.5S356.3,299.1,335,309.8z M331.8,59.3c-8.5-1.7-17,3.9-18.6,12.5c-1.7,8.6,3.9,17,12.5,18.7c78.3,15.3,135.1,84.1,135.1,163.7 S404,402.8,325.7,418c-8.6,1.7-14.2,10-12.6,18.7c1.5,7.6,8.1,12.8,15.5,12.8l3.1-0.3C425,431,492.6,349,492.6,254.3 S425,77.5,331.8,59.3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
}

.introOut {
    animation: introAnimation 1.8s forwards ease;
}

@keyframes introAnimation {
    0% {
        height: 100%;
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}

/* ********************************** */
.container {
    max-width: 1200px;
}

.main_wrapper {
    display: flex;
}

.main_content {
    position: relative;
    /* min-height: 80vh; */
    background-image: url('../images/mainbg.jpg');
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: contain;
    /* padding-top: 40px; */
}

.main_bg {
    position: fixed;
    top: 0;
    left: 0;
    /*
    background-image: url('../images/background.svg');
    background-repeat:  repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
*/
    z-index: -1;
}

.video_play_btn {
    position: absolute;
    z-index: 9;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.between_page_loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #626262;
    z-index: 9;
}

.is-transitioning {
    pointer-events: none;
    cursor: progress;
}

.main_wrapper {
    position: relative;
}

.page_title {
    font-family: 'Gobold Bold';
    font-size: 46px;
    color: #e60000;
    line-height: 48px;
    text-transform: uppercase;
    will-change: transform, opacity, visibilty;
    display: inline-block;
}

.page_title span {
    text-align: end;
}

.service_desc {
    font-size: 16px;
}

.service_container {
    height: 100%;
    padding-right: 70px;
    padding-left: 20px;
}

.service_categories {
    justify-content: center;
}

.service_category_details {
    overflow: hidden;
}

.service_category {
    position: relative;
    display: block;
    cursor: pointer;
}

.service_category_img {
    position: relative;
    padding-top: 75%;
    margin: 15px 0;
}

.service_category_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.service_overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #595959;
    mix-blend-mode: multiply;
    will-change: background-color;
    transition: background-color .5s ease-in-out;
    z-index: 2;
}

.service_category_text {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    visibility: hidden;
    opacity: 0;
    z-index: 3;
    transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
}

.service_category:hover .service_overlay,
.service_category.active .service_overlay {
    background-color: #e60000;
}

.service_category:hover .service_category_text,
.service_category.active .service_category_text {
    visibility: visible;
    opacity: 1;
}

.service_sub-category {
    padding: 50px 0;
}

.swiper-slide:hover .sub-category_title {
    background-color: #fff;
    color: #000;
    transition: background-color .5s ease-in-out, color .5s ease-in-out;
}

.swiper-slide:hover .service_overlay {
    background-color: #e60000;
}


.sub-category_title {
    width: fit-content;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 100%;
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    background-color: #e60000;
    z-index: 3;
    transition: background-color .5s ease-in-out, color .5s ease-in-out;
}

.swiper-button-prev,
.swiper-button-next {
    display: none;
}

.services_nav .nav-pills {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: 100%;
}


.services_nav .nav {
    justify-content: space-between;
    /* margin-top: 50px; */
    z-index: 1;
}

.services_nav .nav-item {
    width: calc(25% - 15px);
    margin: 10px 15px 10px 0;
}

.services_nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto-Bold';
    text-transform: uppercase;
    color: #e60000;
    border: 1px solid #e60000;
    border-radius: 0;
    /* margin-right: 15px; */
    margin-top: 15px;
    text-align: center;
    height: 90px;
}


.services_nav .nav-item:last-child {
    margin: 10px 0;
}

.services_nav .nav-link h2 {
    position: relative;
    font-size: 20px;
    line-height: 16px;
    margin-bottom: 0;
}

.services_nav .nav-link span {
    font-family: 'Roboto-Regular';
    display: block;
}

.services_nav .nav-link:hover {
    color: #fff;
    background: rgb(230, 0, 0);
    background: -webkit-linear-gradient(150deg, rgba(230, 0, 0, 1) 0%, rgba(171, 4, 4, 1) 30%, rgba(109, 9, 9, 1) 100%);
    background: -moz-linear-gradient(150deg, rgba(230, 0, 0, 1) 0%, rgba(171, 4, 4, 1) 30%, rgba(109, 9, 9, 1) 100%);
    background: -o-linear-gradient(150deg, rgba(230, 0, 0, 1) 0%, rgba(171, 4, 4, 1) 30%, rgba(109, 9, 9, 1) 100%);
    background: linear-gradient(150deg, rgba(230, 0, 0, 1) 0%, rgba(171, 4, 4, 1) 30%, rgba(109, 9, 9, 1) 100%);
}

.services_nav .nav-link.active {
    background: rgb(230, 0, 0);
    background: -webkit-linear-gradient(150deg, rgba(230, 0, 0, 1) 0%, rgba(171, 4, 4, 1) 30%, rgba(109, 9, 9, 1) 100%);
    background: -moz-linear-gradient(150deg, rgba(230, 0, 0, 1) 0%, rgba(171, 4, 4, 1) 30%, rgba(109, 9, 9, 1) 100%);
    background: -o-linear-gradient(150deg, rgba(230, 0, 0, 1) 0%, rgba(171, 4, 4, 1) 30%, rgba(109, 9, 9, 1) 100%);
    background: linear-gradient(150deg, rgba(230, 0, 0, 1) 0%, rgba(171, 4, 4, 1) 30%, rgba(109, 9, 9, 1) 100%);
    border: 0;
}

.services_nav .nav-link.active h2::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 50%;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
}


.podcasting {
    margin-top: 40px;
    margin-left: 15px;
}

.podcasting p:before {
    content: "*";
    padding-right: 30px;
    display: inline-block;
    position: absolute;
    left: 0;
    color: #e60000;
}


.podcasting a {
    color: #000;
    text-decoration: underline;
    text-decoration-color: #e60000;
    font-family: 'Roboto-Bold';
    width: 250px;
    height: 300px;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.podcasting a:hover {
    color: #e60000;
    text-decoration: none;
    text-decoration-color: #000;
}

.swiper-slide a {
    width: 275px;
    height: 300px;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.swiper-slide a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    width: calc(100% + 50px);
    position: relative;
    z-index: 1;
    margin-top: 100px;
}

.swiper-slide {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

.copywritingwithimg {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}


.swiper-slide .copywritingwithimg .slide {
    width: 275px;
    height: 300px;
}

.swiper-slide .copywritingwithimg .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-pagination-bullet {
    opacity: 1;
}

.swiper-pagination-bullet {
    border-radius: 0;
    height: auto;
    width: auto;
    background-color: transparent;
    font-family: 'Roboto-Bold';
    font-style: italic;
    font-size: 14px;
    margin-right: 15px;
    position: relative;
}

.swiper-pagination-bullet-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #e60000;
    animation: paginationAnimation .35s forwards;
}

@keyframes paginationAnimation {
    0% {
        width: 0;
    }

    100% {
        width: 75%;
    }
}

.owl-carousel .owl-stage-outer {
    margin-top: 100px;
}

.owl-dots {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
}

.owl-dot {
    border-radius: 0;
    height: auto;
    width: auto;
    background-color: transparent;
    font-family: 'Gobold Bold';
    font-style: italic;
    font-size: 15px;
    margin-right: 15px;
    position: relative;
    text-transform: uppercase;
}


.owl-dot.active {
    color: #e60000;
}

.owl-dot.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #e60000;
    animation: paginationAnimation .35s forwards;
}

.video-carousel {
    margin-bottom: 50px;
}

.video-carousel .owl-stage-outer {
    margin-top: 0px;
}

.video-carousel .video-item {
    position: relative;
    max-height: 300px;
}


/*.video-carousel .video-item .videoimg { height: 215px; }*/
.video-carousel .video-item .videoplay {
    top: 40%;
}

 

.rtl .video-carousel .owl-nav {
    margin-top: 15px;
    position: absolute;
    left: 0px;
    right: inherit;
    display: flex;
}

.video-item h3 {
    font-family: 'Gobold Bold';
    font-size: 16px;
    line-height: 20px;
    color: #000;
    margin-top: 15px;
    text-transform: uppercase;
}

.video-carousel .owl-prev img {
    width: 20px;
    margin-right: 15px;
    top: 40%;
    position: absolute;
    left: -35px;
}

.video-carousel .owl-next img {
    width: 20px;
    top: 40%;
    position: absolute;
    right: -35px;
}

.video-carousel .owl-nav img:hover {
    filter: brightness(70%)
}

/* sign in and up */
#signModal .modal-dialog {
    max-width: 960px;
    border-radius: 20px;
    overflow: hidden;
}

#signModal .modal-content {
    border: 0;
}

#signModal .modal-header {
    position: absolute;
    width: 100%;
    border: 0;
}

#signModal .modal-body {
    padding: 0;
}

#signModal button.close {
    color: #fff;
    border-color: #000;
    opacity: 1;
    z-index: 9;
}

.sign_form_sec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 55%;
    height: 100%;
    min-height: 450px;
    color: #000;
    padding: 1rem 3rem;
    margin: 0 auto;
}

.sign_logo_sec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
    background: rgb(230, 0, 0);
    background: linear-gradient(150deg, rgba(230, 0, 0, 1) 0%, rgba(210, 1, 1, 1) 10%, rgba(200, 2, 2, 1)20%, rgba(176, 4, 4, 1)30%, rgba(126, 8, 8, 1) 50%, rgba(109, 9, 9, 1) 100%);
    color: #fff;
}

.sign_form_text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Roboto-Regular';
    margin-bottom: 15px;
}

.sign_form_text h4 {
    font-family: 'Roboto-Bold';
    margin-bottom: 0;
}

.sign_form_sec form {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sign_form_sec .form-group {
    position: relative;
    width: 100%;
}

.sign_form_sec input:not([type=checkbox]),
.sign_form_sec .select-input {
    position: relative;
    width: 100%;
    height: auto;
    padding: 10px 15px 10px 40px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

.sign_form_sec input.select-input {
    padding: 10px 15px 10px 20px;
}

.sign_form_sec .form-group::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 13px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 9;
}

.sign_form_sec .email::before {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 384' xml:space='preserve'%3E%3Cpath fill='%23e60000' d='M464,0H48C21.5,0,0,21.5,0,48v288c0,26.5,21.5,48,48,48h416c26.5,0,48-21.5,48-48V48C512,21.5,490.5,0,464,0z M464,32 c2.2,0,4.2,0.5,6.1,1.2L256,218.8L41.9,33.2c1.9-0.8,4-1.2,6.1-1.2L464,32z M464,352H48c-8.8,0-16-7.2-16-16V67l213.5,185 c3,2.6,6.8,3.9,10.5,3.9c3.7,0,7.5-1.3,10.5-3.9L480,67v269C480,344.8,472.8,352,464,352z'%3E%3C/path%3E%3C/svg%3E");
}

.sign_form_sec .password::before {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 40 53.2' xml:space='preserve'%3E%3Cpath fill='%23e60000' d='M40,49.5c0,2-1.7,3.7-3.7,3.7H3.7c-2,0-3.7-1.7-3.7-3.7V25.9c0-2,1.7-3.7,3.7-3.7h32.6c2,0,3.7,1.7,3.7,3.7 V49.5z M20,31.1c-8.6,0-15.6-7-15.6-15.6C4.4,7,11.4,0,20,0c8.6,0,15.6,7,15.6,15.6C35.6,24.1,28.6,31.1,20,31.1 M20,3.1c-6.9,0-12.4,5.6-12.4,12.4S13.1,28,20,28c6.9,0,12.4-5.6,12.4-12.4S26.9,3.1,20,3.1 M20,31.1c-8.6,0-15.6-7-15.6-15.6C4.4,7,11.4,0,20,0c8.6,0,15.6,7,15.6,15.6C35.6,24.1,28.6,31.1,20,31.1 M20,3.1c-6.9,0-12.4,5.6-12.4,12.4S13.1,28,20,28c6.9,0,12.4-5.6,12.4-12.4S26.9,3.1,20,3.1 M20,31.1c-8.6,0-15.6-7-15.6-15.6C4.4,7,11.4,0,20,0c8.6,0,15.6,7,15.6,15.6C35.6,24.1,28.6,31.1,20,31.1 M20,3.1c-6.9,0-12.4,5.6-12.4,12.4S13.1,28,20,28c6.9,0,12.4-5.6,12.4-12.4S26.9,3.1,20,3.1'/%3E%3Cpath fill='%23fff' d='M24.5,35.7c0,2.5-2,4.5-4.5,4.5s-4.5-2-4.5-4.5c0-2.5,2-4.5,4.5-4.5S24.5,33.2,24.5,35.7 M22.2,41.6c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2c0-1.2,1-2.2,2.2-2.2C21.2,39.4,22.2,40.4,22.2,41.6'/%3E%3Cpolygon fill='%23fff' points='17.9,42.3 15.9,37.5 24.1,37.5 22.1,42.3'/%3E%3C/svg%3E");
}

.sign_form_sec .name::before {
    top: 10px;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve'%3E%3Cpath fill='%23e60000' d='M256,0c-74.439,0-135,60.561-135,135s60.561,135,135,135s135-60.561,135-135S330.439,0,256,0z M423.966,358.195C387.006,320.667,338.009,300,286,300h-60c-52.008,0-101.006,20.667-137.966,58.195 C51.255,395.539,31,444.833,31,497c0,8.284,6.716,15,15,15h420c8.284,0,15-6.716,15-15 C481,444.833,460.745,395.539,423.966,358.195z'%3E%3C/path%3E%3C/svg%3E");
}

.form-control:focus,
.form-control:focus-visible {
    border-color: rgba(0, 0, 0, 0.1);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(230, 0, 0, 0.2);
}

.password-eye {
    display: inline-block;
    position: absolute;
    top: 12px;
    right: 13px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg height='20px' width='20px' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23e60000' d='m436.266 161.779c-10.11-9.821-20.363-18.84-30.708-27.052l106.442-106.443-28.284-28.284-111.382 111.382c-4.592-2.813-9.193-5.471-13.798-7.951-33.794-18.202-67.955-27.431-101.536-27.431-33.561 0-67.811 9.22-101.799 27.404-26.455 14.154-52.826 33.765-78.38 58.291-43.025 41.292-69.042 82.192-70.124 83.913l-6.697 10.659 6.712 10.649c1.082 1.716 27.102 42.494 70.131 83.661 9.919 9.49 19.962 18.231 30.083 26.213l-106.926 106.926 28.284 28.284 111.918-111.918c5.001 3.06 10.01 5.931 15.022 8.604 33.982 18.124 68.224 27.314 101.776 27.314 33.571 0 67.725-9.198 101.513-27.34 26.305-14.124 52.458-33.694 77.73-58.167 42.546-41.198 68.21-82.013 69.272-83.73l6.485-10.497-6.47-10.505c-1.061-1.722-26.722-42.659-69.264-83.982zm-300.808 186.479c-42.446-32.577-74.079-73.124-87.613-92.042 24.483-34.425 108.079-140.216 209.155-140.216 30.805 0 59.88 9.901 86.099 24.617l-31.588 31.588c-15.691-10.242-34.416-16.205-54.511-16.205-55.14 0-100 44.86-100 100 0 20.095 5.963 38.82 16.205 54.511zm175.345-118.777c3.96 8.002 6.197 17.003 6.197 26.519 0 33.084-26.916 60-60 60-9.516 0-18.517-2.237-26.519-6.197zm-108.251 51.683c-3.554-7.659-5.552-16.18-5.552-25.164 0-33.084 26.916-60 60-60 8.984 0 17.505 1.998 25.164 5.552zm54.448 114.836c-31.253 0-60.856-10.141-87.564-25.152l31.847-31.847c15.933 10.729 35.106 16.999 55.717 16.999 55.14 0 100-44.86 100-100 0-20.611-6.27-39.784-16.999-55.716l37.036-37.036c42.503 32.839 74.087 73.991 87.394 93.001-23.921 34.155-106.321 139.751-207.431 139.751z' /%3E%3C/svg%3E");
}

.password-eye.show {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 511.999 511.999' xml:space='preserve'%3E%3Cpath fill='%23e60000' d='M508.745,246.041c-4.574-6.257-113.557-153.206-252.748-153.206S7.818,239.784,3.249,246.035 c-4.332,5.936-4.332,13.987,0,19.923c4.569,6.257,113.557,153.206,252.748,153.206s248.174-146.95,252.748-153.201 C513.083,260.028,513.083,251.971,508.745,246.041z M255.997,385.406c-102.529,0-191.33-97.533-217.617-129.418 c26.253-31.913,114.868-129.395,217.617-129.395c102.524,0,191.319,97.516,217.617,129.418 C447.361,287.923,358.746,385.406,255.997,385.406z M255.997,154.725c-55.842,0-101.275,45.433-101.275,101.275s45.433,101.275,101.275,101.275 s101.275-45.433,101.275-101.275S311.839,154.725,255.997,154.725z M255.997,323.516c-37.23,0-67.516-30.287-67.516-67.516 s30.287-67.516,67.516-67.516s67.516,30.287,67.516,67.516S293.227,323.516,255.997,323.516z'/%3E%3C/svg%3E%0A");
}

.change-btn {
    cursor: pointer;
    font-family: 'Roboto-Regular';
    color: #000;
}

.change-btn:hover {
    text-decoration: underline;
}

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #e60000;
    border-radius: 5px;
    background-color: #fff;
}

.custom-checkbox input:checked~.checkmark {
    background-color: #fff;
}

.custom-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.custom-checkbox input:checked~.checkmark:after {
    display: block;
}

.custom-checkbox .checkmark:after {
    left: 6px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid #e60000;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.forget-password {
    color: #000;
    text-transform: capitalize;
}

.forget-password:hover {
    color: #e60000;
    text-transform: capitalize;
}

.form_btn {
    position: relative;
    background: #e60000;
    background: linear-gradient(110deg, rgba(230, 0, 0, 1) 0%, rgba(171, 4, 4, 1) 50%, rgba(109, 9, 9, 1) 100%);
    color: #fff;
    border-radius: 15px;
    border: 0;
    padding: 5px 50px;
    text-transform: uppercase;
    font-size: 14px;
    will-change: width;
    transition: width .35s ease-in-out;
}

.form_btn .loader {
    border: 1px solid #fff;
    border-top: 3px solid #e60000;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

.form_btn:disabled {
    color: #000;
    background: transparent;
    border: 1px solid #000;
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}

.page-item.active .page-link {
    background-color: #e60000;
    border-color: #e60000;
}

.page-link {
    border-color: #e60000;
    color: #e60000;
}

.page-link:hover {
    border-color: #e60000;
    color: #e60000;
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgb(230 0 0 / 25%);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* clients */


.our {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.our_clients {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.client_img {
    flex-basis: calc(100% / 5);
    padding: 0 15px;
    margin: 15px 0;
    align-items: center;
    justify-content: center;
    filter: none;
    transition: filter .5s ease, transform .5s ease-in-out;
    ;
    text-align: center;
}

.client_img:hover {
    transform: scale(1.1);
    filter: grayscale(1);
    transition: filter .5s ease, transform .5s ease-in-out;
    ;
}

/* about us */
.about-top {
    display: flex;
}

.about-title {
    width: 13%;
    margin-top: 20px;
}

.about_bodytext {
    font-family: 'Roboto-Regular';
    font-size: 17px;
    color: #000;
    line-height: 28px;
    width: 75%;
    margin-top: 20px;
}

.about_bodytext strong {
    font-family: 'Roboto-Bold';
    color: #e60000;
    font-style: italic;
}

.team-section {
    display: flex;
    flex-wrap: wrap;
    padding: 70px 10%;
    justify-content: center;
}

.member-container {
    width: 26%;
    position: relative;
    margin: 1% 1.5%;

}

.team-member_img_container {
    position: relative;
    border-radius: 50%;
    background-color: #e6e6e6;
    margin: 15px auto;
    z-index: 9;
}

.team-member_img_container::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*    border: 2px solid #e60000;*/
    border-radius: 50%;
    z-index: 9;
}

.team-member_img {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    z-index: 1;
}

.team-member_img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    filter: grayscale(1);
}


.team-member_img .aboutimg1 {
    top: 0px;
    left: 10px;
}

.team-member_img .aboutimg2 {
    top: -10px;
    left: 0px;
}

.team-member_img .aboutimg3 {
    top: 10px;
    left: 0px;
}

.team-member_img .aboutimg4 {
    top: 10px;
    left: -10px;
}

.team-member_img .aboutimg5 {
    top: 10px;
    left: 10px;
}

.team-member_img .aboutimg6 {
    top: -10px;
    left: -10px;
}

.team-member_name {
    font-size: 20px;
    text-align: center;
    font-family: 'Roboto-Bold';
    margin-bottom: 0px;
}

.team-member_title {
    font-size: 16px;
    text-align: center;
    font-family: 'Roboto-Light';
    font-style: italic;
}

.sal0 {
    clip-path: url(#line-img1);
    fill: none;
    stroke: #e60000;
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.sal1 {
    clip-path: url(#line-img12);
}

.JZyxytcu_1,
.JZyxytcu_2 {
    opacity: 0;
    transition: 0ms;
}

.team-member:hover .JZyxytcu_2 {
    opacity: 1;
    transition-delay: 1300ms;
}

.team-member:hover .JZyxytcu_1 {
    opacity: 1;
    stroke-dasharray: 434 436;
    stroke-dashoffset: 435;
    animation: JZyxytcu_draw 1000ms linear 333ms forwards;
}

.subtitle_container .nav-item:hover .JZyxytcu_2 {
    opacity: 1;
    transition-delay: 1300ms;
}

.subtitle_container .nav-item:hover .JZyxytcu_1 {
    opacity: 1;
    stroke-dasharray: 434 436;
    stroke-dashoffset: 435;
    animation: JZyxytcu_draw 1000ms linear 333ms forwards;
}

.JZyxytcu_0 {
    stroke-dasharray: 766 768;
    stroke-dashoffset: 767;
    animation: JZyxytcu_draw 2000ms linear 0ms forwards;
}

.JZyxytcu_2 {
    stroke-dasharray: 30 32;
    stroke-dashoffset: 31;
    animation: JZyxytcu_draw 2000ms linear 666ms forwards;
}

.JZyxytcu_3 {
    stroke-dasharray: 30 32;
    stroke-dashoffset: 31;
    animation: JZyxytcu_draw 2000ms linear 1000ms forwards;
}

@keyframes JZyxytcu_draw {
    100% {
        stroke-dashoffset: 0;
    }
}

.line-img svg {
    position: absolute;
    z-index: 99;
    display: block;
    top: 30px;
    left: 10px;
    transform: rotate(108deg);
}

.team-member:hover .line-img svg {
    display: block;
}

@keyframes team {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(10px, 0);
    }

    75% {
        transform: translate(10px, -10px);
    }

    100% {
        transform: translate(0, 0);
    }
}


/* services sub categories  */

.services-title-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.services-img {
    margin: auto;
    display: block;
}


.services-title-nav .nav {
    align-items: flex-end;
}

.services-title-nav .nav-link {
    background-color: transparent;
    color: #000;
    text-align: center;
    font-family: 'Roboto-Bold';
    text-transform: uppercase;
    line-height: 26px;
}

.services-title-nav .nav-link.active {
    background-color: transparent;
    color: #e60000;
}

.services-title-nav .nav-link span {
    display: block;
    text-align: center;
    font-family: 'Roboto-Regular';
    font-size: 18px;
    line-height: 18px;
    text-transform: uppercase;
    padding-top: 5px;
}

.services-title-nav .nav-link h2 {
    font-size: 16px;
    line-height: 18px;
    text-transform: uppercase;
    padding-top: 8px;
}

.services-title-nav .nav-item:hover .nav-link {
    color: #e60000;
}

.services-title-nav .nav-item {
    position: relative;
    background-image: url(../images/services/line.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center right;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-title-nav .nav-item:hover,
.services-title-nav .item1.actived {
    background-image: url(../images/services/line-co.png);
}

.services-title-nav .item1.actived img,
.services-title-nav .item1:hover img {
    content: url(../images/services/video-co.png)
}

.services-title-nav .item2.actived img,
.services-title-nav .item2:hover img {
    content: url(../images/services/subtitling-co.png)
}

.services-title-nav .item3.actived img,
.services-title-nav .item3:hover img {
    content: url(../images/services/copywriting-co.png)
}

.services-title-nav .item4.actived img,
.services-title-nav .item4:hover img {
    content: url(../images/services/archive-co.png)
}

.services-title-nav .item2 {
    background-image: url(../images/services/line2.png);
}

.services-title-nav .item2 h2 {
    padding-top: 25px;
}

.services-title-nav .item2:hover,
.services-title-nav .item2.actived {
    background-image: url(../images/services/line2-co.png);
}

.services-title-nav .item3 {
    background-image: url(../images/services/line3.png);
}

.services-title-nav .item3 h2 {
    padding-top: 20px;
}

.services-title-nav .item3:hover,
.services-title-nav .item3.actived {
    background-image: url(../images/services/line3-co.png);
}

.services-title-nav .item4 {
    background-image: url(../images/services/line4.png);
}

.services-title-nav .item4:hover,
.services-title-nav .item4.actived {
    background-image: url(../images/services/line4-co.png);
}

.services-margin {
    margin-top: 700px;
}

.services_subcategory_desc {
    font-size: 22px;
    line-height: 30px;
    font-family: 'Roboto-Regular';
    padding: 30px 10%;
}

.services_subcategory_desc strong {
    font-family: 'Roboto-Bold';
    font-style: italic;
    color: #e60000;
}

.subtitling_subcategory_desc {
    font-size: 18px;
    line-height: 28px;
    font-family: 'Roboto-Light';
    padding: 15px 0%;
}

.subtitling_subcategory_desc strong {
    font-family: 'Roboto-Bold';
    font-style: italic;
    color: #e60000;
}

.videoprod_video_container {
    position: relative;
    width: 100%;
    height: 700px;
    margin: 0 10px 0 0px;
    left: 0px;
    overflow: hidden;
}

.videoprod_video_container .playbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    z-index: 9;

}

.videoprod_video_container .playbtn svg {
    fill: #fff;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.videoprod_video_container video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.subtitle_container .nav-item {
    width: 110px;
    margin: 0px;
    height: 100px;
    position: relative;
}

.subtitle_container .nav {
    position: relative;
    display: flex;
    flex-direction: row;
    width: auto;
    z-index: 1;
    justify-content: flex-start;
    align-items: center;
}

.subtitle_container .nav .nav-link {
    font-family: 'Gobold Bold';
    font-size: 15px;
    line-height: 18px;
    text-transform: uppercase;
    color: #000;
    border: none;
    border-radius: 0;
    z-index: 10;
    position: absolute;
    height: 80%;
    width: 100%;
}

.subtitle_container .nav .nav-link:hover {
    background: transparent;
    color: #e60000;
}

.subtitle_container .nav .nav-link.active {
    background: transparent;
    color: #e60000;
}


.subtitling-line-img svg {
    position: absolute;
    z-index: 0;
    display: block;
    top: 0px;
    left: 10px;
    transform: rotate(25deg);
}

.team-member:hover .line-img svg {
    display: block;
}

.subtitle_container .nav-item .sal0 {
    clip-path: url(#line-img1);
    fill: none;
    stroke: #e60000;
    stroke-width: 4;
    stroke-miterlimit: 10;
}

.subtitle_container .nav-item .sal1 {
    clip-path: url(#line-img12);
}

.subtitle_container .nav-item .JZyxytcu_1,
.JZyxytcu_2 {
    opacity: 0;
    transition: 0ms;
}

.subtitle_container .nav-item:hover .JZyxytcu_2 {
    opacity: 1;
    transition-delay: 1300ms;
}

.subtitle_container .nav-item:hover .JZyxytcu_1 {
    opacity: 1;
    stroke-dasharray: 434 436;
    stroke-dashoffset: 435;
    animation: JZyxytcu_draw 1000ms linear 333ms forwards;
}

.subtitle_container .nav-item.actived .JZyxytcu_2 {
    opacity: 1;
    transition-delay: 1500ms;
}

.subtitle_container .nav-item.actived .JZyxytcu_1 {
    opacity: 1;
    stroke-dasharray: 434 436;
    stroke-dashoffset: 435;
    animation: JZyxytcu_draw 500ms linear 500ms forwards;
}

.subtitle_container .nav-item.actived .JZyxytcu_3 {
    fill: #e60000;
}

.subtitle_container .nav-item .JZyxytcu_0 {
    stroke-dasharray: 766 768;
    stroke-dashoffset: 767;
    animation: JZyxytcu_draw 2000ms linear 0ms forwards;
}

.subtitle_container .nav-item .JZyxytcu_2 {
    stroke-dasharray: 30 32;
    stroke-dashoffset: 31;
    animation: JZyxytcu_draw 2000ms linear 666ms forwards;
}

.subtitle_container .nav-item .JZyxytcu_3 {
    stroke-dasharray: 30 32;
    stroke-dashoffset: 31;
    animation: JZyxytcu_draw 2000ms linear 1000ms forwards;
}

.subtitle_container .nav-item:hover .JZyxytcu_3 {
    stroke-dasharray: 30 32;
    fill: #e60000;
    stroke-dashoffset: 31;
    animation: JZyxytcu_draw 2000ms linear 1000ms forwards;
}

@keyframes JZyxytcu_draw {
    100% {
        stroke-dashoffset: 0;
    }
}

.subtitle_img_container {
    width: 100%;
    height: 380px;
    margin-bottom: 30px;
    overflow: hidden;
}

.subtitle_img_container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.topsubs_film-container {
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
}

.topsubs_film_title {
    text-transform: uppercase;
    margin-bottom: 0;
    color: #e60000;
    font-size: 24px;
    font-family: 'Gobold Bold';
}

.topsubs_film_country {
    display: block;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 15px;
    font-family: 'Roboto-Regular';
}

.topsubs_film_content ul {
    /* list-style: none; */
    padding-left: 20px;
    font-family: 'Roboto-Regular';
}

.topsubs_film_content li::marker {
    color: #e60000;
    font-size: 16px;

}

.subtitle_laguages {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.subtitle_laguages h2 {
    font-family: 'Gobold Bold';
}

.languages_list {
    list-style: none;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    margin-top: 30px;
}

.language_item {
    flex: 0 0 150px;
    /* margin: 15px 5px; */
}

.language_item span {
    display: block;
    width: 100%;
    padding: 10px 0;
    border: 1px solid #e60000;
    text-align: center;
    /* border-radius: 15px; */
    text-transform: uppercase;
}

.languages_list .break {
    flex-basis: 100%;
    /* height: 0; */
}

.subtitle_map {
    text-align: center;
    font-family: 'Gobold Bold';
}

.subtitle_map img {
    width: 80%;
}

.extra-services {
    font-family: 'Roboto-Regular';
}

.extra-services strong {
    font-family: 'Gobold Bold';
}

.extra-services h3 {
    font-size: 22px;
    color: #e60000;
    font-family: 'Roboto-Bold';
    margin-top: 40px;
    display: block;
}

.extra-services li::marker {
    color: #e60000;
    /* font-size: 12px; */
}

.extra-services li {
    margin: 2px 0;
    line-height: 28px;
    font-family: 'Roboto-Regular';
}

.copywring_container h2 {
    font-family: 'Gobold Bold';
    font-size: 42px;
    line-height: 44px;
    color: #000;
    text-transform: uppercase;
}

.copywring_container p.first {
    font-family: 'Gobold Bold';
    font-size: 16px;
    line-height: 24px;
    color: #000;
    text-transform: uppercase;
}

.copywriting_list {
    padding: 0;
    padding-left: 20px;
}

.copywriting_list li::marker {
    color: #e60000;
    font-size: 16px;
}

.copywriting_list li {
    font-family: 'Roboto-Bold';
    font-size: 18px;
    line-height: 20px;
    color: #e60000;
}

.copywring_container p.second {
    font-family: 'Roboto-Regular';
    font-size: 18px;
    line-height: 24px;
    color: #000;
    font-style: italic;
}

/* contant */
.contact-container {
    position: relative;
    margin-bottom: 20px;
    margin-top: 20px;
}

h1.contact_item {
    position: relative;
    width: fit-content;
    font-family: 'Roboto-Regular';
    font-size: 28px;
    line-height: 22px;
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #e60000;
    cursor: pointer;
}

.contact_item a {
    color: #000000;
}

.contact_item a:hover {
    color: #e60000;
}

.contact_item {
    position: relative;
    display: block;
    font-family: 'Roboto-Regular';
    font-size: 17px;
    margin: 10px 0 10px 40px;
}

.contact_item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -30px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    transform: translate(0, -50%);
}

.map {
    margin-bottom: 20px;
}

.contact_mail::before {
    background-image: url('data:image/svg+xml,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve"%3E%3Cpath fill="%23e60000" d="M25,0C11.2,0,0,11.2,0,25s11.2,25,25,25s25-11.2,25-25S38.8,0,25,0 M39.4,32.9c0,0.6-0.5,1-1,1H11.6c-0.6,0-1-0.5-1-1V17.1 c0-0.6,0.5-1,1-1h26.7c0.6,0,1,0.5,1,1L39.4,32.9L39.4,32.9z M25.6,27.8C25.4,27.9,25.2,28,25,28s-0.4-0.1-0.6-0.2l-2-1.5l-7.6,5.6h20.5l-7.6-5.6L25.6,27.8z M12.7,19.1L12.7,30.9L20.6,25 M37.3,30.9L37.3,19.1L29.4,25 M35.2,18.1L14.8,18.1L25,25.7"/%3E%3C/svg%3E%0A');
}

.contact_address::before {
    background-image: url('data:image/svg+xml,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve"%3E%3Cpath fill="%23e60000" class="st0" d="M25,12.2c-2.5,0-4.8,1-6.6,2.7c-1.8,1.8-2.7,4.1-2.7,6.6c0,1.5,0.8,4.4,4.9,10.2c1.7,2.5,3.5,4.7,4.4,5.8 c0.9-1.1,2.7-3.3,4.4-5.8c4-5.8,4.9-8.7,4.9-10.2c0-2.5-1-4.8-2.7-6.6C29.8,13.1,27.5,12.2,25,12.2 M25,26.9c-3,0-5.4-2.4-5.4-5.4 c0-3,2.4-5.4,5.4-5.4s5.4,2.4,5.4,5.4C30.4,24.4,28,26.9,25,26.9 M25,18.2c-1.8,0-3.2,1.5-3.2,3.2c0,1.8,1.5,3.2,3.2,3.2c1.8,0,3.2-1.5,3.2-3.2C28.2,19.7,26.8,18.2,25,18.2 M25,0C11.2,0,0,11.2,0,25s11.2,25,25,25c13.8,0,25-11.2,25-25S38.8,0,25,0 M31.2,32.9c-2.5,3.6-5,6.5-5.1,6.6 C25.8,39.8,25.4,40,25,40s-0.8-0.2-1.1-0.5c0,0-2.6-3-5.1-6.6c-3.5-5.1-5.3-8.8-5.3-11.5c0-3.1,1.2-5.9,3.4-8.1 c2.2-2.2,5-3.4,8.1-3.4c3.1,0,5.9,1.2,8.1,3.4c2.2,2.2,3.4,5,3.4,8.1C36.5,24.1,34.7,27.8,31.2,32.9"/%3E%3C/svg%3E%0A');
}

.contact_phone::before {
    background-image: url('data:image/svg+xml,%3Csvg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve"%3E%3Cpath fill="%23e60000" d="M33.6,29.3c-1.2-0.7-2.1-1.1-2.5-1.1c-0.2,0-0.4,0.2-0.8,0.6c-0.6,0.6-1.1,1.3-1.3,1.8l0,0.1 c-0.2,0.3-0.5,0.5-0.9,0.5c0,0,0,0-0.1,0c-1.1,0-2.9-1.2-5.4-3.6c0,0,0,0,0,0c-2.4-2.6-3.6-4.4-3.6-5.5c0-0.4,0.2-0.7,0.5-0.9 l0.1,0c0.4-0.3,1.2-0.7,1.8-1.3c0.5-0.5,0.6-0.6,0.6-0.9c0-0.4-0.5-1.3-1.1-2.4c-0.8-1.5-1.5-2.8-1.8-3c-0.3,0-0.8-0.1-1.2-0.1 c-1.4,0-2.1,0.3-2.2,0.4c-0.6,0.7-2.1,2.8-2.2,3.5c0,0.3,0.1,1.7,0.9,3.8c0.8,2.1,2.5,5.3,6,8.8l0,0c2.7,2.7,5.5,4.7,8.4,5.9 c2,0.8,3.6,1.1,4.1,1.1l0,0c0.7-0.1,2.8-1.6,3.5-2.2c0.4-0.4,0.5-2.4,0.3-3.4C36.3,30.8,35,30.1,33.6,29.3 M25,0C11.2,0,0,11.2,0,25s11.2,25,25,25c13.8,0,25-11.2,25-25S38.8,0,25,0 M37.7,36c-0.6,0.6-3.2,2.5-4.6,2.8 c-0.1,0-0.2,0-0.4,0c-0.9,0-2.8-0.3-5-1.2c-3.1-1.3-6.2-3.4-9.1-6.3c0,0,0,0,0,0c-3.8-3.8-5.6-7.3-6.5-9.5c-0.9-2.3-1.1-4.3-1-4.9 c0.2-1.4,2.1-3.9,2.8-4.6c0.7-0.7,1.9-1.1,3.7-1.1c0.6,0,1.1,0,1.6,0.1c0.7,0.1,1.2,0.5,1.6,1.1c0.4,0.5,0.9,1.5,1.8,3 c0.9,1.6,1.3,2.4,1.4,3.2c0.1,1.3-0.6,2-1.2,2.6c-0.4,0.4-0.9,0.8-1.5,1.2c0.3,0.6,1.1,1.7,2.8,3.5c1.8,1.7,2.9,2.5,3.5,2.8 c0.4-0.6,0.8-1.1,1.2-1.5c0.5-0.5,1.2-1.2,2.3-1.2c0.9,0,1.8,0.5,3.5,1.4c1.6,0.9,2.5,1.4,3,1.8c0.6,0.4,1,0.8,1.1,1.6 C38.7,30.8,39.3,34.6,37.7,36"/%3E%3C/svg%3E%0A');
}


/* footer */
/* footer {
    margin-right: -30px;
} */
.footer_container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px;
    margin-top: 50px;
    z-index: 8;
    font-family: 'Roboto-Light';
    font-size: 15px;
    line-height: 18px;
}

.mad-logo {
    transform: scale(1);
    transition: transform .5s linear;
}

.mad-logo:hover {
    transform: scale(1.05);
    transition: transform .5s linear;
}

.back_btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.back_btn a {
    border: 1px solid;
    transition: color .35s ease, background-color .35s ease;
}

.back_btn a:hover {
    background-color: #e60000;
    color: #fff;
    border: 1px solid;
    transition: color .35s ease, background-color .35s ease;
}

.lang_btn {
    position: relative;
    border: 1px solid #000;
    padding: 0 5px;
    font-size: 13px;
    margin-right: 20px;
    transition: border .35s ease, color .35s ease, background-color .35s ease;
}

.lang_btn:hover {
    background-color: #e60000;
    color: #fff;
    border: 1px solid transparent;
    transition: border .35s ease, color .35s ease, background-color .35s ease;
}

.rtl .lang_btn {
    margin-left: 0;
    margin-right: 10px;
}

/* archive */
.archive_content {
    width: 100%;
    margin-left: 0;
    padding-top: 35px !important;
    text-align: right !important;
}

.profile_content {
    text-align: left !important;
}

.avatar {
    position: relative;
}

.avatar_name,
.avatar_img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto-Bold';
    font-size: 22px;
    width: 32px;
    height: 32px;
    padding-top: 3px;
    color: #fff;
    background-color: #e60000;
    border-radius: 50%;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
}

.avatar_img {
    padding-top: 0;
    background-color: transparent;
}

.avatar_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar_nav {
    position: absolute;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    width: 100px;
    top: 40px;
    right: 0;
    padding: 2.5px 10px;
    background-color: #e60000;
    border-radius: 5px;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}

.avatar_nav a {
    color: #fff;
    text-transform: capitalize;
    margin: 2.5px 0;
}

.avatar_nav.avatar_nav--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}

.archive_container {
    font-family: 'Almarai Rg';
}

.archive_content .page_title {
    font-family: 'Almarai Rg';
}

.archive_search_form {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.archive_item {
    position: relative;
    height: 350px;
    margin-bottom: 25px;
    overflow: hidden;
}

.archive_item_img {
    height: 60%;
    width: 100%;
    overflow: hidden;
}

.archive_item_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.archive_item_title {
    font-family: 'Almarai Bl';
    font-size: 16px;
    margin-bottom: 10px;
    overflow: hidden;
}

.archive_item_date {
    color: #fff;
    background-color: #e60000;
    width: fit-content;
    padding: 2px 15px;
}

.archive_tags_container {
    display: flex;
    flex-wrap: wrap;
    max-height: 50px;
    overflow: hidden;
}

.archive_tags {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.archive_tags a {
    color: #e60000;
    font-style: italic;
    text-decoration: underline;
    font-weight: 700;
    font-size: 75%;
    padding: 2px 4px;
}

.archive_search_btn {
    font-family: 'Almarai Rg';
    background-color: #e60000;
    color: #fff;
    border: 1px solid #e60000;
}

.archive_search_btn:hover {
    background-color: #fff;
    color: #e60000;
}

.add_search_field {
    margin-left: 10px;
    margin-right: 5px;
    width: 30px;
    height: 30px;
}

.add_search_field:focus {
    outline: none;
    box-shadow: none;
}

.add_btn {
    width: 100%;
    height: 100%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cpath fill='%23E60000' d='M12,0c6.6,0,12,5.4,12,12s-5.4,12-12,12S0,18.6,0,12S5.4,0,12,0z M18,13v-2h-5V6h-2v5H6v2h5v5h2v-5H18z'/%3E%3Cpath fill='%23FFFFFF' d='M11,11L11,6L13,6L13,11L18,11L18,13L13,13L13,18L11,18L11,13L6,13L6,11'/%3E%3C/svg%3E%0A");
}

.remove_btn {
    width: 100%;
    height: 100%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24' xml:space='preserve'%3E%3Cpath fill='%23E60000' d='M12,0c6.6,0,12,5.4,12,12s-5.4,12-12,12S0,18.6,0,12S5.4,0,12,0z'/%3E%3Cpath fill='%23fff' d='M13,11h5v2h-5l0,0h-2l0,0H6v-2H13z'/%3E%3C/svg%3E%0A");
}

.profile_form label {
    width: 170px;
}

.reset_pswd_btn {
    display: flex;
    align-self: flex-end;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background-color: transparent;
    border: 0;
    text-transform: capitalize;
}

#reset_pswd_form {
    width: 100%;
    padding: 0;
    min-height: 260px;
}

#reset_pswd_form .modal-body {
    width: 100%;
}

#reset_pswd_form .form_btn {
    display: block;
    margin: 20px 0 0px auto;
    border-radius: 5px;
    padding: 5px 15px;
}

.pswp img {
    max-width: none;
    object-fit: contain;
}

.search_term {
    color: #e60000;
    font-family: 'Almarai Bl';
}

input::-webkit-calendar-picker-indicator {
    opacity: 100;
    color: #e60000;
}

/* arabic version */
[dir=rtl] body {
    font-family: 'Almarai Rg';
    text-align: right;
}

.rtl .main_content {
    margin-left: auto;
    margin-right: var(--nav-width);
    padding-right: 15px;
    padding-left: 50px;
}

.rtl .nav {
    left: auto;
    right: 0;
}

.rtl .nav_container {
    padding: 50px 30px 100px 0;
}

.rtl .nav_hidden .nav_container {
    transform: translateX(100%);
}

.rtl .nav_line {
    left: auto;
    right: -50%;
}

.rtl .nav_logo {
    text-align: center;
}

.rtl .nav_link {
    font-family: 'Almarai Rg';
}

.rtl .nav_active .nav_link {
    transform: translateX(-20%) !important;
}

.rtl .page_title {
    font-family: 'Almarai Bl';
    line-height: 42px;
    margin-bottom: 15px;
}

.rtl .service_category_text {
    text-align: center;
}

.rtl .swiper-button-prev {
    right: auto;
    left: 10px;
}

.rtl .swiper-button-next {
    right: auto;
    left: 50px;
}

.rtl .sign_logo_sec {
    right: auto;
    left: 0;
}

.rtl .sign_form_sec input:not([type=checkbox]),
.sign_form_sec .select-input {
    padding: 10px 40px 10px 15px;
}

.rtl .sign_form_sec .form-group::before {
    left: auto;
    right: 13px;
}

.rtl .password-eye {
    right: auto;
    left: 13px;
}

.rtl .custom-checkbox .checkmark {
    right: 0;
    left: auto;
}

.rtl .custom-checkbox {
    padding-left: initial;
    padding-right: 35px;
}

.rtl .change-btn {
    font-family: 'Almarai Rg';
}

.rtl .sign_form_text {
    font-family: 'Almarai Rg';
}

.rtl .sign_form_text h4 {
    font-family: 'Almarai Bl';
    margin-bottom: 15px;
}

.rtl .contact-container {
    font-family: 'Almarai Rg';
}

.rtl .contact_item {
    font-family: 'Almarai Rg';
    position: relative;
    display: block;
    margin: 10px 40px 10px 0;
}

.rtl .contact_item::before {
    right: -30px;
    left: auto;
}

.rtl .social_container {
    right: auto;
    left: 15px;
}

.rtl .services_nav .nav {
    padding-right: 0;
}

.rtl .services_nav .nav-link {
    font-family: 'Almarai Bl';
}

.rtl .subtitle_container .nav {
    padding: 0;
}

.rtl .subtitle_container .nav .nav-link {
    font-family: 'Almarai Bl';
}

.rtl .topsubs_film_content ul {
    padding-left: 0;
    padding-right: 20px;
}

.rtl .extra-services h3 {
    font-family: 'Almarai Bl';
}

.rtl .copywriting_list {
    padding: 0;
    padding-right: 20px;
}

.rtl .owl-dot {
    margin-right: 0;
    margin-left: 10px;
}

.rtl .owl-dot.active::after {
    left: initial;
    right: 0;
}

.copywriting_list li {
    font-family: 'Roboto-Regular';
    font-size: 20px;
    line-height: 24px;
    color: #e60000;
}

/* animation */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    background-color: #e6e6e6;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    will-change: transform, transform-origin;
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
    transition: transform 1s cubic-bezier(.81, .22, .43, .64), background-color .5s ease-in-out;
}

.preloader.in {
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}

.preloader.out {
    -ms-transform: scale(1, 0);
    transform: scale(1, 0);
    -ms-transform-origin: top;
    transform-origin: top;
}

.preloader svg {
    position: fixed;
    z-index: 11;
    left: 50%;
    top: 50%;
    -ms-transform-origin: center;
    transform-origin: center;
    will-change: transform;
    width: 100px;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    transition: all .5s ease-in-out;

}

.preloader path {
    stroke-dasharray: 140 540;
    stroke-dashoffset: -474;
    opacity: 0;
    transition: all .5s linear;
}

.preloader path {
    animation: preloaderSVG 2s forwards infinite ease-in-out;
}

@keyframes preloaderSVG {

    0%,
    100% {
        stroke-dasharray: 140 540;
        stroke-dashoffset: -474;
        opacity: 0
    }

    40%,
    60% {
        stroke-dasharray: 1860;
        stroke-dashoffset: 0;
        opacity: 1
    }
}

#videoControls {
    position: absolute;
    bottom: 15%;
    right: 20%;
    padding: 5px;
    z-index: 99;
    mix-blend-mode: difference;
}

#buttonControls img {
    width: 90%
}



#progress {
    display: none;
}

#progressBar {
    width: 0;
    position: absolute;
    top: -10px;
    right: 1%;
    -webkit-appearance: none;
    background-color: #6d6e6d;
    height: 5px;
}

#progressBar:focus {
    outline: none;
}

#progressBar::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    height: 0;
    width: 0;
}

#progressBar::-moz-range-thumb {
    visibility: hidden !important;
}

#buttons {
    opacity: 1.0;
    transition: opacity .3s ease-out;
    background-color: transparent;
}

#videoContainer:hover #buttons {
    opacity: 0.5;
}

#mute,
#closedCaption,
#fullScreen,
#volumeBar,
#play {
    float: right;
    background-color: transparent;
    border: none;
}

#volumeSlider {
    width: 60px;
    float: right;
}

#volumeSlider::-webkit-slider-thumb {
    background-color: green;
    height: 10px;
    width: 10px;
}