@import url("video.css");
    @import url("../fonts/awesome-font/css/all.css");
    @import url("../fonts/Tajawal-Black/stylesheet.css");
    /* Tajawal-Black */

    @import url("../fonts/Tajawal-Bold/stylesheet.css");
    /* Tajawal-Bold*/

    @import url("../fonts/Tajawal-Medium/stylesheet.css");
    /*  Tajawal-Regular */

    @import url("../fonts/Tajawal-Regular/stylesheet.css");
    /* Tajawal-Regular */

    body {
        font-family: "Tajawal-Regular";
        font-size: 18px;
        line-height: 1;
        width: 100%;
        height: auto;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
        direction: rtl;
        color: #000000;
    }

    a {
        color: #000000;
        text-decoration: none;
    }

    a:hover {
        color: #CF002A;
    }

    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    img {
        max-width: 100%;
    }

    .left-icons ul li {
        display: inline-block;
        vertical-align: middle;
        padding: 0 15px;
        border-left: solid 1px #707070;
    }

    .left-icons ul li:last-child {
        border: none;
        padding-left: 0;
    }

    .left-icons ul li:nth-child(3) {
        font-family: "Tajawal-Bold";
        border: none;
    }

    .left-icons ul li a {
        cursor: pointer;
    }

    .toggle-button {
        direction: ltr;
        display: block;
        width: 2.8vw;
        min-width: 35px;
        cursor: pointer;
    }

    .toggle-button span {
        height: 5px;
        width: 100%;
        background-color: #CE0027;
        display: block;
        margin-bottom: 8px;
        border-radius: 10px;
        transition: width linear .3s;
    }

    .toggle-button span:nth-child(2) {
        width: 75%;
    }

    .toggle-button span:nth-child(3) {
        width: 50%;
        margin-bottom: 0;
    }

    .toggle-button:hover span {
        width: 100%;
    }

    .navbar {
        padding: 30px 0 15px 0;
    }

    .navbar-brand {
        margin: 0;
        width: 10%;
    }

    .navbar-brand a {
        display: block;
    }

    .top-footer {
        background: #F3F3F3;
        padding: 5% 0;
    }

    .info li {
        padding-bottom: 20px;
        line-height: 1.5;
    }

    .info li:last-child {
        padding-bottom: 0;
    }

    .info i {
        margin-left: 20px;
        vertical-align: middle;
    }

    .info span {
        font-size: 90%;
        vertical-align: middle;
    }

    .info span a {
        direction: ltr;
        display: inline-block;
    }

    .social-links a {
        margin: 0 5%;
        color: #E42C2A;
        font-size: 120%;
        /* transition: linear .3s; */
        display: inline-block;
    }

    .fa-whatsapp {
        font-size: 20px;
        color: #0cc10c;
    }

    .social-links a:hover {
        color: #000;
    }

    .news-letter-form {
        width: 80%;
        margin-right: auto;
    }

    .news-letter-form button {
        height: 3vw;
        color: #fff;
        background: #000000;
        border: none;
        line-height: 1;
        min-height: 40px;
        font-size: 90%;
        width: 40%;
        float: right;
    }

    .news-letter-form input {
        height: 3vw;
        min-height: 40px;
        border: none;
        padding: 0 15px;
        outline: none !important;
        width: 60%;
        float: right;
    }

    .bottom-footer {
        background-color: #fff;
        padding: 20px 0;
    }

    /* Content */

    .section {
        width: 100%;
        height: 100vh;
        position: relative;
        min-height: 600px;
    }

    .section h1 {
        font-size: 250%;
        color: #CF002A;
        font-family: 'Tajawal-Bold';
        margin-bottom: 15px;
    }

    .section p {
        font-size: 115%;
        line-height: 1.5;
    }

    .home-section {
        height: 100vh;
    }

    .slide-item {
        height: 100vh;
        background-size: 55% auto;
        background-repeat: no-repeat;
        background-position: left bottom;
        width: 100%;
        display: flex;
        align-items: center;
    }

    /* .home-section .owl-carousel:after, */

    .slide-item:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: no-repeat left bottom/88% auto url("../images/slider-overlay.png");
        z-index: -1
    }

    .owl-carousel {
        direction: ltr;
    }

    .caption {
        position: absolute;
        direction: rtl;
        right: 0;
        /* height: 100%; */
        width: 100%;
    }

    .caption h3 {
        font-size: 300%;
        font-family: "Tajawal-Medium";
        width: 70%;
        margin-bottom: 30px;
    }

    .caption h3 span {
        font-family: "Tajawal-Black";
        color: #CF002A;
        font-size: 115%;
    }

    .caption p {
        width: 40%;
        line-height: 1.3;
        font-size: 100%;
    }

    .iso {
        width: 32%;
        margin-top: 5%;
    }

    .owl-counters {
        position: absolute;
        left: 0;
        bottom: 12%;
        width: 100%;
        direction: rtl;
    }

    .active-bar {
        width: 21%;
        height: 2px;
        background: #E7E8E8;
        position: relative;
        margin-top: 10px;
    }

    .active-bar span {
        position: absolute;
        top: -1px;
        right: 0;
        width: 0%;
        height: 3px;
        content: "";
        background: #B20F1D;
        transition: width ease-in-out 5s;
    }

    .active-bar span.fullWidth {
        animation: fullWidth 6s ease-out forwards;
    }

    @keyframes fullWidth {
        to {
            width: 100%;
        }
    }

    span.current-slide,
    span.total-slide {
        font-size: 120%;
    }

    .side-fixed {
        position: fixed;
        right: 1.5%;
        width: 35px;
        z-index: 99;
        top: 50%;
        transform: translateY(-50%) !important;
    }

    .saudi-iwaa {
        width: 100%;
    }

    .saudi-iwaa img {
        display: block;
        margin: auto;
        width: 28%;
    }

    .section-dots {
        width: 100%;
        display: block;
        margin-top: 30px;
    }

    .section-dots li a {
        display: block;
        text-align: center;
        width: 8px;
        height: 8px;
        border: solid 1px #AEB0B3;
        border-radius: 100%;
        position: relative;
        margin: auto;
        margin-bottom: 30px;
        cursor: pointer;
    }

    .section-dots li a.active {
        background: #B20F1D;
        border-color: #B20F1D;
    }

    .section-dots li a:before {
        content: "";
        background: #E6E7E8;
        border: solid 1px #AEB0B3;
        width: 0;
        height: 0;
        opacity: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 100%;
        z-index: -1;
        transform: translate(-50%, -50%);
        box-sizing: content-box;
        transition: ease-in-out .3s;
    }

    .section-dots li a.active:before {
        width: 30px;
        height: 30px;
        opacity: 1;
    }

    /* About section */

    .about-section {
        background: no-repeat left bottom / cover url("../images/bg2.jpg");
        position: relative;
        background-attachment: fixed;
    }

    .about-section .container {
        z-index: 2;
    }

    .about-section:before {
        content: "";
        background: no-repeat left bottom / cover url("../images/mask.png");
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: .8;
    }

    .welcome-section {
        background: no-repeat left bottom / cover url("../images/977479-bedroom-furniture.jpg");
        background-attachment: fixed;
    }

    .welcome-section .container {
        z-index: 2;
    }

    .black-box {
        width: 30%;
        height: 90%;
        background: rgba(0, 0, 0, .75);
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
    }

    .red-box {
        width: 36%;
        background: rgba(228, 44, 42, .8);
        padding: 10% 5%;
    }

    .red-box p {
        color: #fff;
        font-size: 210%;
    }

    iframe {
        width: 100%;
        height: 100%;
    }

    .video-section .controls {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        visibility: hidden;
        transition: linear .1s;
        cursor: pointer;
    }

    .videoPoster {
        background: no-repeat 0 0 / cover url("../images/video-bg.jpg");
    }

    .video-section:hover .controls {
        visibility: visible;
    }

    .projects-section {
        background: no-repeat left top / 82% auto url("../images/projects.jpg");
    }

    .projects-section p {
        font-size: 210%;
        color: #fff;
        width: 56%;
        display: block;
        margin: auto;
        margin-right: 26%;
        padding-top: 4%;
    }

    .projects-section p span {
        font-family: "Tajawal-Black";
    }

    .projects-carousel {
        margin-top: 7%;
    }

    .project-item {
        padding: 15px 10px;
        height: 23.2vw;
        min-height: 320px;
        transition: ease-in-out .3s;
    }

    .project-bg {
        background: #fff;
        height: 100%;
        /* display: flex;
    flex-wrap: wrap;
    align-items: center; */
        box-shadow: 0px 6px 15px 0px #2125291a;
        transition: ease-in-out .3s;
    }

    .icon {
        width: 30%;
        margin: auto;
        height: 50%;
        position: relative;
    }

    .icon img {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transition: ease-in-out .3s;
    }

    .icon .white {
        opacity: 0;
    }

    .description {
        padding: 0 15px;
        text-align: center;
        line-height: 1.5;
        font-family: 'Tajawal-Bold';
        height: 50%;
        align-items: center;
        display: flex;
        justify-content: center;
    }

    .project-item:hover {
        padding: 0;
    }

    .project-item:hover .project-bg {
        background: #8A8A8A;
    }

    .project-item:hover .description {
        color: #fff;
        font-size: 110%;
    }

    .project-item:hover .icon .white {
        opacity: 1;
    }

    .project-item:hover .icon .red {
        opacity: 0;
    }

    .projects-carousel .owl-nav {
        position: absolute;
        right: 20%;
        bottom: -4%;
    }

    .projects-carousel .owl-nav button.owl-next,
    .projects-carousel .owl-nav button.owl-prev {
        width: 3.4vw;
        height: 3.4vw;
        min-width: 35px;
        min-height: 35px;
        margin: 0 10px !important;
        border-radius: 100%;
        transition: ease-in-out .3s;
        box-sizing: content-box;
    }

    .projects-carousel .owl-nav button span {
        display: none;
    }

    .projects-carousel .owl-nav button.owl-next,
    .projects-carousel .owl-nav button.owl-next:hover {
        background: no-repeat center center / 40% auto url("../images/icons/next-icon.png");
        background-color: #D9161D;
        margin-left: 5px !important;
    }

    .projects-carousel .owl-nav button.owl-prev,
    .projects-carousel .owl-nav button.owl-prev:hover {
        background: no-repeat center center / 40% auto url("../images/icons/prev-icon.png");
        background-color: #D9161D;
        /* margin-right: 10px !important; */
    }

    .projects-carousel .owl-nav button.owl-next:hover,
    .projects-carousel .owl-nav button.owl-prev:hover {
        width: 3.7vw;
        height: 3.7vw;
        /* margin: 0 !important; */
    }

    .compounds-section h1 {
        color: #000;
        position: relative;
        padding-right: 5vw;
        margin-bottom: 25px;
    }

    .compounds-section h1::before {
        content: "";
        background-image: url("../images/icons/logoicon.png");
        background-size: 100% auto;
        background-position: center;
        width: 4.4vw;
        height: 2vw;
        position: absolute;
        right: 0;
        background-repeat: no-repeat;
        top: 50%;
        transform: translateY(-50%);
    }

    .compound-item {
        height: 82vh;
        padding: 0 15px;
    }

    .compound-bg {
        height: 82vh;
        background-repeat: no-repeat;
        background-size: 120% 120%;
        filter: grayscale(100%);
        transition: cubic-bezier(0.26, 0.92, 1, 1.04) .6s;
        position: relative;
        background-position: center;
    }

    .item-index {
        text-align: right;
        font-family: 'Tajawal-Black';
        font-size: 1800%;
        color: #fff;
        position: absolute;
        right: 15px;
        top: -8.5%;
        transition: ease-in-out .3s;
        -webkit-text-stroke: 2px #fff;
        -webkit-text-fill-color: transparent;
        z-index: 9;
        pointer-events: none;
    }

    .compound-bg:hover,
    .owl-item.active .compound-bg {
        filter: none
    }

    .compound-bg:hover {
        background-size: 100% 100%;
    }

    .compound-bg:after {
        position: absolute;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.8886905103838411) 0%, rgba(0, 0, 0, 0.21081936192445727) 30%);
        content: "";
        width: 100%;
        height: 100%;
        pointer-events: none;
        transition: ease-in-out .5s;
    }

    .owl-item.active .compound-bg:after,
    .compound-bg:hover:after {
        opacity: 0;
    }

    .compound-bg:hover+.item-index,
    .owl-item.active .item-index {
        /* -webkit-text-stroke: none; */
        -webkit-text-fill-color: #fff;
    }

    .title {
        position: absolute;
        bottom: 30px;
        z-index: 9;
        text-align: right;
        width: calc(100% - 30px);
        color: #fff;
        font-size: 150%;
        box-sizing: border-box;
        padding: 0 15px;
        padding-right: 7vw;
    }

    .title::before {
        content: "";
        background-image: url("../images/icons/white-logo.png");
        background-size: 100% auto;
        background-position: center;
        width: 4vw;
        height: 2vw;
        position: absolute;
        right: 0;
        background-repeat: no-repeat;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        right: 2vw;
    }

    .services-section {
        /* background: no-repeat left top / cover url("../images/services.jpg"); */
    }

    .service-slide {
        direction: rtl;
        padding: 0 5px;
    }

    .services-section h1 {
        /* padding-top: 6%; */
        color: #000;
    }

    .services-section p {
        font-size: 250%;
        /* padding-top: 6%; */
    }

    .services-section p span {
        display: block;
    }

    .services-section p span strong {
        font-family: "Tajawal-Black";
        color: #CF002A;
    }

    .services-section .container {
        position: relative;
        height: 100%;
        z-index: 2;
    }

    .services-slider {
        background: #E42C2A;
        width: 42%;
        position: absolute;
        left: 11.5%;
        bottom: 0;
        padding: 30px 40px;
        box-sizing: border-box;
    }

    .services-slider .owl-nav {
        position: absolute;
        width: 25%;
        left: -24.8%;
        bottom: 0;
        background-color: #000;
        padding: 2vw 0;
        margin: 0;
        z-index: 1;
    }

    .services-slider .owl-nav button.owl-next,
    .services-slider .owl-nav button.owl-prev {
        width: 3.4vw;
        height: 3.4vw;
        min-width: 35px;
        min-height: 35px;
        margin: 0 10px !important;
        border-radius: 100%;
        transition: ease-in-out .3s;
        box-sizing: content-box;
    }

    .services-slider .owl-nav button span {
        display: none;
    }

    .services-slider .owl-nav button.owl-next,
    .services-slider .owl-nav button.owl-next:hover {
        background: no-repeat center center / 40% auto url("../images/icons/next-icon.png");
        background-color: transparent;
        margin-left: 5px !important;
        border: solid 1px #fff;
    }

    .services-slider .owl-nav button.owl-prev,
    .services-slider .owl-nav button.owl-prev:hover {
        background: no-repeat center center / 40% auto url("../images/icons/prev-icon.png");
        background-color: transparent;
        margin-left: 5px !important;
        border: solid 1px #FFF;
    }

    .services-slider .owl-nav button.owl-next:hover,
    .services-slider .owl-nav button.owl-prev:hover {
        width: 3.7vw;
        height: 3.7vw;
        /* margin: 0 !important; */
    }

    .number {
        font-size: 500%;
        font-family: 'Tajawal-Black';
        color: #fff;
    }

    .service-icon {
        max-width: 78px;
    }

    .services-slider h3 span {
        display: block;
        color: #FFFFFF;
        font-family: 'Tajawal-Bold';
        font-size: 140%;
    }

    .services-slider p {
        font-size: 100%;
        color: #fff;
        padding-top: 15px;
        width: 85%;
    }

    .slider-counter {
        width: 11.5%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #000;
        height: 11.5vw;
        z-index: 3;
    }

    .counter-circle {
        width: 61px;
        height: 61px;
        border-radius: 100%;
        text-align: center;
        display: block;
        margin: 0 auto;
        margin-top: 40px;
        border: solid 1px #fff;
        line-height: 61px;
        margin-bottom: 30px;
    }

    .counter-circle span {
        color: #fff;
    }

    .slider-counter p {
        color: #fff;
        font-family: "Tajawal-Bold";
        font-size: 115%;
        text-align: center;
    }

    .slider-counter p a {
        color: #fff;
    }

    .features-section {
        background: no-repeat center center / 120% 120% url("../images/bg.jpg");
        animation: bgZoomInOut 30s ease-out infinite;
    }

    .features-section h1 {
        padding-top: 8%;
        color: #fff;
    }

    .features-slider {
        width: 62%;
        margin-right: auto;
        padding-top: 8%;
    }

    .features-slide {
        height: 70vh;
        background-size: 80%;
        background-repeat: no-repeat;
        background-position: center;
        transition: ease-in-out .3s;
        background-position: center center;
        filter: grayscale(1);
        opacity: .6;
    }

    .feature-caption {
        display: none;
        position: absolute;
        bottom: 0;
        padding: 15px;
        color: #fff;
        font-size: 200%;
        width: 100%;
        text-align: center;
        font-family: 'Tajawal-Bold';
    }

    .feature-caption span {
        padding: 0 10px;
        color: #d9161d;
        font-family: 'Tajawal-Black';
    }

    .owl-item.current .features-slide {
        background-size: 100% 100%;
        filter: none;
        opacity: 1;
    }

    .owl-item.current .features-slide:hover {
        background-size: 110% 110%;
        transition: linear .3s;
    }

    .features-slider .owl-nav {
        text-align: right;
        margin-top: 5%;
    }

    .features-slider .owl-nav button.owl-next,
    .features-slider .owl-nav button.owl-prev {
        width: 3.4vw;
        height: 3.4vw;
        min-width: 35px;
        min-height: 35px;
        margin: 0 10px !important;
        border-radius: 100%;
        transition: ease-in-out .3s;
        box-sizing: content-box;
    }

    .features-slider .owl-nav button span {
        display: none;
    }

    .features-slider .owl-nav button.owl-next,
    .features-slider .owl-nav button.owl-next:hover {
        background: no-repeat center center / 40% auto url("../images/icons/next-icon.png");
        background-color: #D9161D;
        margin-left: 5px !important;
        margin-right: 0 !important;
    }

    .features-slider .owl-nav button.owl-prev,
    .features-slider .owl-nav button.owl-prev:hover {
        background: no-repeat center center / 40% auto url("../images/icons/prev-icon.png");
        background-color: #D9161D;
        /* margin-right: 10px !important; */
    }

    .features-slider .owl-nav button.owl-next:hover,
    .features-slider .owl-nav button.owl-prev:hover {
        width: 3.7vw;
        height: 3.7vw;
        /* margin: 0 !important; */
    }

    .features-captions-slider {
        position: absolute;
        top: 50%;
        width: 25%;
        right: 10%;
    }

    .caption-slide {
        font-family: 'Tajawal-Bold';
        color: #fff;
        text-align: right;
        font-size: 220%;
        line-height: 1.5;
        opacity: 0;
        z-index: -1;
        transition: linear .3s;
        position: absolute;
    }

    .caption-slide.current {
        opacity: 1;
        z-index: 1;
    }

    .caption-slide span {
        font-family: "Tajawal-Black";
        font-size: 80%;
        color: #D9161D;
        display: block;
    }

    .features-section .container {
        position: relative;
    }

    .section.partners-section {
        height: auto;
        min-height: 100vh;
        background: no-repeat left top / 100% auto url("../images/clients-bg.jpg");
    }

    .section.partners-section h1 {
        color: #000000;
    }

    .inner-container {
        width: 85%;
        margin: auto;
    }

    .client-item {
        width: 100%;
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .client-item a {
        display: block;
    }

    .client-item img {
        max-width: 85%;
        max-height: 85%;
        display: block;
        margin: auto;
        transition: linear .3s;
        /* filter: grayscale(1); */
    }

    .client-item:hover img {
        filter: none;
        transform: scale(1.2);
    }

    .section.map-section {
        height: 50vh;
        min-height: 350px;
    }

    #map,
    #map2 {
        height: 100%;
    }


    .js .cd-nav {
        position: fixed;
        z-index: 12;
    }

    .cd-main__content {
        height: auto;
        display: block;
        position: relative;
        z-index: 15;
        background-color: #fff !important;
    }

    /* body.nav-is-open {
        position: fixed;
    } */
    /* header {}

    body.nav-is-open header .toggle-button {
        position: fixed;
        transform: translateX(-100%);
        top: 50px;
        left: 50px;
        z-index: 99;
    } */
    /* .page--home header {
        position: fixed;
        width: 100%;
        z-index: 1500;
        background: rgba(255, 255, 255, .8);
    }

    .page--home body.nav-is-open header {
        position: relative;
        background: transparent;
        z-index: -1;
    }

    .page--home .navbar.scrolled {
        padding: 0;
    } */
    /* .page--home .navbar.scrolled .navbar-brand {
        width: 6%;
    } */

    .red-side {
        width: 57%;
        height: 100vh;
        float: left;
        background: #D9161D;
        padding: 4vw;
        position: relative;
    }

    .black-side {
        height: 100vh;
        width: 43%;
        float: left;
        background: #1C1C1C;
        opacity: 95%;
    }

    .main-menu a {
        color: #fff;
        line-height: 1.7;
        font-size: 140%;
        font-weight: normal;
        font-family: 'Tajawal-Regular';
        transition: ease-in-out .2s;
    }

    .nav-toggle-button.close {
        position: absolute;
        top: 4vw;
        left: 4vw;
        width: 40px;
        height: 40px;
        z-index: 1000;
        cursor: pointer;
    }

    .red-side .info {
        /* width: 50%; */
        margin-top: 10%;
    }

    .red-side .info li,
    .red-side .info a {
        color: #fff;
    }

    .red-side .info li i {
        color: #000000;
    }

    .red-side .info span {
        font-size: 100%;
    }

    .red-side .social-links {
        /* width: 36%; */
        margin-top: 10%;
    }

    .red-side .social-links a {
        color: #fff;
        margin-right: 0;
    }

    .red-side .fa-hide {
        visibility: hidden;
        margin-left: 20px;
    }

    ul.main-menu i {
        margin-left: 20px;
        margin-right: -5px;
        vertical-align: middle;
        opacity: 0;
        color: #000;
        transition: ease-in-out .2s;
    }

    ul.main-menu li a.active,
    ul.main-menu li a:hover {
        color: #000000;
    }

    ul.main-menu li a.active i,
    ul.main-menu li a:hover i {
        opacity: 1;
    }

    .menu-logo {
        width: 50%;
        margin: auto;
    }

    .gray-side {
        width: 57%;
        height: 100vh;
        float: left;
        background: #F3F3F3;
        padding: 4vw;
        position: relative;
        align-items: center;
        display: flex;
    }

    .contact-toggle-button.close {
        width: 40px;
        height: 40px;
        display: block;
        position: absolute;
        left: 4vw;
        top: 4vw;
        cursor: pointer;
    }

    .services-toggle-button.close {
        width: 40px;
        height: 40px;
        display: block;
        position: absolute;
        left: 4vw;
        top: 4vw;
        cursor: pointer;
    }

    .contact-form {
        width: 80%;
    }

    .contact-form h3 {
        font-size: 245%;
        color: #D9161D;
    }

    .contact-form input[type='text'],
    .contact-form input[type='email'] {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: solid 2px #d9d8d8;
        height: 40px;
        text-align: right;
    }

    textarea {
        resize: none;
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: solid 2px #d9d8d8;
        height: 80px;
        text-align: right;
        outline: none;
    }

    .contact-form input[type='submit'] {
        background: #D9161D;
        border: none;
        color: #fff;
        padding: 5px 30px;
        font-size: 140%;
    }

    input:focus {
        border: none;
        border-bottom: solid 2px #D9161D;
        outline: none !important;
    }

    .gray-side .info i {
        font-size: 140%;
        color: #d9161d;
    }

    .gray-side .social-links {
        text-align: left;
    }

    .gray-side .social-links a {
        margin-left: 0;
    }

    .gray-side .info a {
        font-size: 140%;
    }

    .gallery-section {
        background: no-repeat bottom / 100% 50% url("../images/gallery.jpg");
        height: 84vh;
    }

    .gallery-slider {
        width: 76%;
        margin-right: auto;
        box-shadow: 0px 0px 6px 0px #0000003d;
    }

    .gallery-slide {
        height: 62vh;
        width: 100%;
        background-size: 100% auto;
        background-position: center;
    }

    .fixed-gallery {
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .8);
        display: none;
    }

    .fixed-gallery .gallery-slide {
        height: 90vh;
        width: 100%;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .gallery-slider-expanded {
        width: 90%;
        margin: auto;
        margin-top: 5vh;
    }

    .gallery-slider-expanded .owl-nav button.owl-prev {
        position: absolute;
        left: 0;
        top: 50%;
        background: no-repeat center center / 40% auto url(../images/icons/prev-icon.png) !important;
        width: 60px;
        height: 30px;
    }

    .gallery-slider-expanded .owl-nav button.owl-next {
        position: absolute;
        right: 0;
        top: 50%;
        background: no-repeat center center / 40% auto url(../images/icons/next-icon.png) !important;
        width: 60px;
        height: 30px;
    }

    .gallery-slider-expanded .owl-nav button.owl-prev span,
    .gallery-slider-expanded .owl-nav button.owl-next span {
        display: none;
    }

    .expand {
        position: absolute;
        bottom: 15px;
        left: 15px;
        background: none;
        border: none;
        font-size: 25px;
    }

    .compress {
        position: absolute;
        bottom: 15px;
        left: 15px;
        font-size: 25px;
        color: #fff;
        background: none;
        border: none;
    }

    .thumbs-gallery {
        width: 65%;
        margin-left: 5%;
        margin-right: auto;
        margin-top: 4%;
    }

    .thumbs-slide {
        background-size: 90% 100%;
        background-repeat: no-repeat;
        background-position: center;
        height: 3.5vw;
        min-height: 50px;
    }

    .thumbs-slide a {
        display: block;
        width: 91%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        transition: ease-in-out .3s;
        margin: auto;
    }

    .thumbs-slide a:hover,
    .thumbs-slide a.current {
        background-color: transparent
    }

    .gallery-slider .owl-nav {
        position: absolute;
        right: 4%;
        bottom: -6%;
    }

    .gallery-slider .owl-nav button.owl-next,
    .gallery-slider .owl-nav button.owl-prev {
        width: 3.4vw;
        height: 3.4vw;
        min-width: 35px;
        min-height: 35px;
        margin: 0 10px !important;
        border-radius: 100%;
        transition: ease-in-out .3s;
        box-sizing: content-box;
    }

    .gallery-slider .owl-nav button span {
        display: none;
    }

    .gallery-slider .owl-nav button.owl-next,
    .gallery-slider .owl-nav button.owl-next:hover {
        background: no-repeat center center / 40% auto url("../images/icons/next-icon.png");
        background-color: #D9161D;
        margin-left: 5px !important;
    }

    .gallery-slider .owl-nav button.owl-prev,
    .gallery-slider .owl-nav button.owl-prev:hover {
        background: no-repeat center center / 40% auto url("../images/icons/prev-icon.png");
        background-color: #D9161D;
        /* margin-right: 10px !important; */
    }

    .gallery-slider .owl-nav button.owl-next:hover,
    .gallery-slider .owl-nav button.owl-prev:hover {
        width: 3.7vw;
        height: 3.7vw;
        /* margin: 0 !important; */
    }

    .category-section {
        height: auto;
        padding-bottom: 5vw;
    }

    .category {
        width: 76%;
        margin-right: auto;
    }

    .category-bg {
        height: 33vw;
    }

    .section.category-section h1 {
        font-size: 265%;
        color: #000;
        font-family: 'Tajawal-Regular';
        margin-bottom: 20px;
    }

    .category-map {
        width: 40%;
        margin-right: -20%;
        border: solid 15px #fff;
        margin-top: -20%;
        height: 40vw;
        float: right;
    }

    .category-description {
        width: 70%;
        float: right;
        padding: 3%;
        line-height: 1.5;
        font-size: 115%;
    }

    .clear {
        clear: both;
    }

    .news-bg {
        height: 30vw;
    }

    .news-section {
        height: auto;
        padding-bottom: 5vw;
    }

    .news-section .col-md-4 {
        padding-top: calc(var(--bs-gutter-x) * .5);
        padding-bottom: calc(var(--bs-gutter-x) * .5);
    }

    .news-bg {
        position: relative;
        background-size: cover;
    }

    .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: ease-in-out .3s;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.8886905103838411) 6%, rgba(0, 0, 0, 0.21081936192445727) 40%);
    }

    .overlay:hover {
        background: none;
    }

    .overlay>div {
        position: absolute;
        bottom: 0;
        padding: 15px;
        padding-bottom: 30px;
        color: #fff;
        bottom: 0;
    }

    .overlay h3 {
        font-size: 135%;
        font-family: 'Tajawal-Bold';
    }

    .overlay p {
        font-size: 95%;
        margin-bottom: 0;
        line-height: 1.2;
    }

    body.page--rfq .cd-main__content,
    body.page--employment .cd-main__content {
        background: no-repeat center / cover url("../images/form-bg.jpg") #fff;
    }

    .forms-section {
        /* background: no-repeat center / cover url("../images/form-bg.jpg"); */
        height: auto;
    }

    .forms-section.section h1 {
        font-family: 'Tajawal-Regular';
        margin-bottom: 4vw;
        padding-right: 30px;
    }

    .form-container {
        width: 68%;
        margin: auto;
        background: #fff;
        padding: 8vw 10vw;
        margin-top: 5vw;
        margin-bottom: 5vw;
    }

    .form-container .form-group {
        position: relative;
        padding-bottom: 4vw;
        display: flex;
        align-items: center;
    }

    .form-container .form-group .form-text.text-muted {
        position: absolute;
        bottom: 2vw;
        right: 30px;
    }

    .form-container .form-group i {
        margin-left: 15px;
    }

    .form-container label {
        position: absolute;
        top: 10px;
        font-size: 20px;
        margin: 0;
        padding: 0;
        -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out;
        transition: top .2s ease-in-out, font-size .2s ease-in-out;
        right: 30px;
    }

    .form-container .active {
        top: -25px;
        font-size: 16px;
    }

    .form-container input[type=text],
    .form-container input[type=email] {
        border-radius: 0;
        width: 100%;
        border: none;
        border-bottom: 1px solid #ddd;
        font-size: 20px;
        color: #000;
        padding: 5px 0;
    }

    .form-container .form-group textarea {
        border-radius: 0;
        width: 100%;
        border: none;
        border-bottom: 1px solid #ddd;
        font-size: 20px;
        color: #000;
        padding: 5px 0;
        height: 7vw;
    }

    .form-container input[type=text]:focus {
        outline: none;
    }

    .form-container input:focus {
        box-shadow: none !important;
    }

    .form-container button.btn.btn-primary {
        background: #ce0027;
        border: none !important;
        border-radius: 0;
        padding: 5px 30px 8px 30px;
        cursor: pointer;
        box-shadow: none !important;
        outline: none !important;
        margin-right: 30px;
    }

    .form-container .form-group:last-child {
        padding-bottom: 0;
    }

    .custom-upload-btn {
        position: absolute;
        left: 0;
        border-radius: 50px;
        padding: 12px 30px;
        border: none;
        background: #787878;
        color: #fff;
        top: -7px;
    }

    .form-container input[type="file"] {
        width: 0;
        visibility: hidden;
    }

    .form-container input:disabled {
        background-color: transparent;
    }

    .form-container #captchaimg {
        position: absolute;
        left: 0;
    }

    .refresh--icon {
        position: absolute;
        left: 130px;
        color: #ce0027;
        top: 10px;
        cursor: pointer;
    }

    .form-container .text-danger {
        position: absolute;
        bottom: 2vw;
        right: 30px;
        font-weight: normal;
        font-family: 'Tajawal-Regular';
        font-size: 14px;
    }

    html,
    body {
        height: 100% !important;
    }

    .mCSB_inside>.mCSB_container {
        margin: 0
    }

    .mCSB_scrollTools {
        width: 4px;
    }

    .mCSB_scrollTools .mCSB_dragger {
        height: 30vh !important;
        z-index: 1;
        max-height: none;
    }

    .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
        background: #ce0027;
        width: 4px;
    }

    .mCSB_scrollTools_onDrag .mCSB_dragger_onDrag .mCSB_dragger_bar {
        background: #ce0027 !important;
    }

    .mCS-dir-rtl>.mCSB_inside>.mCSB_container {
        margin: 0;
    }

    .mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,
    .mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {
        right: 0;
        left: auto;
        z-index: 9999;
    }

    .nav-is-open.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,
    .nav-is-open.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools,
    .contact-is-open.mCS-dir-rtl>.mCSB_inside>.mCSB_scrollTools,
    .contact-is-open.mCS-dir-rtl>.mCSB_outside+.mCSB_scrollTools {
        z-index: 1
    }

    .loader {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: transparent;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .loader img {
        position: absolute;
        top: 30%;
        max-width: 250px;
    }

    .loader:before {
        width: 100%;
        content: "";
        position: absolute;
        top: 0;
        height: 50%;
        background: #fff;
        left: 0;
        transition: all ease-in-out .5s;
        transition-delay: .8s;
    }

    .loader:after {
        background: #fff;
        content: "";
        position: absolute;
        width: 100%;
        height: 50%;
        bottom: 0;
        transition: all ease-in-out .5s;
        transition-delay: .8s;
    }

    .loader--load {
        position: absolute;
        top: 50%;
        width: 25%;
        height: 6px;
        background-color: #f4f4f5;
        z-index: 10;
        transition: all ease-in-out .5s;
        border-radius: 10px;
    }

    .loader--loading {
        position: absolute;
        top: calc(50% - 3px);
        width: 0%;
        height: 6px;
        background-color: #cf002a;
        z-index: 20;
        border-radius: 10px;
    }

    .loader.hide-loader .loader--load {
        width: 100%;
    }

    .loader.hide-loader:before {
        top: -50%;
    }

    .loader.hide-loader::after {
        bottom: -50%;
    }

    .loader.hide-loader img {
        display: none;
    }

    .loader.hide-all .loader--load {
        display: none;
    }

    .video {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 */
        height: 0;
    }

    .video img {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 20;
        cursor: pointer;
    }

    .video:after {
        content: "";
        position: absolute;
        display: block;
        background: url('play-button.png') no-repeat 0 0;
        top: 45%;
        left: 45%;
        width: 46px;
        height: 36px;
        z-index: 30;
        cursor: pointer;
    }

    .video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* image poster clicked, player class added using js */

    .video.player img {
        display: none;
    }

    .video.player:after {
        display: none;
    }

    .captcha--group #captchaimg {
        position: absolute;
        left: 0;
    }

    .captcha--group {
        position: relative;
    }

    svg {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-90deg);
    }

    .circle {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
    }

    .circle.draowed {
        animation: stroke 6s ease-out forwards;
    }

    .serv-counter {
        color: #E42C2A;
    }

    .service-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* opacity: 0; */
    }

    .inner-bg {
        /* position: absolute;
        top: 0;
        left: 0; */
        width: 100%;
        height: 100vh;
        background-size: 100% 100%;
        /* transition: opacity cubic-bezier(0.07, -0.32, 0.71, 1.01) .5s; */
        /* opacity: 0; */
        background-position: top center;
        /* animation: bgZoomIn 6s ease-out forwards; */
    }

    .service-bg:after {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../images/services/services-mask.png') no-repeat 0 0;
        background-size: 100% auto;
        background-position: 0 0;
        opacity: .85;
    }

    /* .inner-bg:nth-child(odd) {
        background-size: 120% 120%;
    } */

    .inner-bg.zoomAnimation {
        animation: bgZoomIn 6s ease-out forwards;
    }

    /* .inner-bg.opacity:nth-child(odd) {
        opacity: 1;
        animation: bgZoomOut 6s ease-out forwards;
    } */

    @keyframes opacity {
        to {
            opacity: 1;
        }
    }

    @keyframes bgZoomInOut {
        0% {
            background-size: 100% 100%;
        }

        50% {
            background-size: 120% 120%;
        }

        100% {
            background-size: 100% 100%;
        }
    }

    @keyframes bgZoomOut {
        to {
            background-size: 100% 100%;
        }
    }

    @keyframes bgZoomIn {
        to {
            background-size: 110% 110%;
        }
    }

    @keyframes stroke {
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes circleFadeIn {
        to {
            opacity: 1;
        }
    }

    .fixed_callus {
        position: fixed;
        bottom: 20px;
        right: 15px;
        /* width: 50px; */
        /* height: 50px; */
        display: flex;
        /* border-radius: 50%; */
        align-items: center;
        justify-content: center;
        /* background-color: #d9161d; */
        /* color: #fff; */
        z-index: 999;
        cursor: pointer;
        width: auto;
        overflow: hidden;
        border-radius: 50px;
        font-size: 14px;
    }

    .fixed_callus i {
        transform: rotate(-20deg);
        width: 50px;
        height: 50px;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background-color: #d9161d;
        color: #fff;
        z-index: 100;
    }

    .fixed_callus div {
        /* display: none; */
        /* position: absolute; */
        direction: ltr;
        z-index: 99;
        /* padding: 10px; */
        display: block;
        background: var(--bs-gray-200);
        border-radius: 30px;
        right: -76px;
        padding-right: 62px;
        padding-left: 18px;
        line-height: 1;
        height: 50px;
        line-height: 50px;
        display: flex;
        opacity: 0;
        right: -350px;
        transition: ease .5s;
        position: relative;
    }

    .fixed_callus:hover div {
        opacity: 1;
        right: -50px;
    }

    .fixed_callus a:first-child {
        margin-right: 11px;
        padding-right: 13px;
        position: relative;
    }

    .phoneNum a:first-child:before {
        content: "";
        position: absolute;
        right: 0;
        width: 1.5px;
        height: 15px;
        background: #000;
        top: 50%;
        transform: translateY(-50%);
    }

    @media screen and (max-width: 1536px) {
        body {
            font-size: 16px;
        }
    }

    @media screen and (max-width: 1024px) {
        .loader--load {
            width: 50%;
        }

        .top-footer .container>.row div {
            width: 50%;
        }

        .section.partners-section {
            min-height: 0;
            max-height: none !important;
        }

        .top-footer .container>.row div:first-child {
            width: 100%;
            margin-bottom: 3%;
        }

        .social-links a {
            font-size: 180%;
        }

        .news-letter-form {
            width: 100%;
        }

        .services-slider .owl-nav {
            width: 24vw;
            left: -24vw;
            padding: 40px 0;
        }

        .caption p {
            font-size: 150%;
        }

        .section p {
            font-size: 170%;
        }

        .info span {
            font-size: 130%;
        }

        .left-icons ul li {
            font-size: 150%;
        }

        .description {
            font-size: 150%;
        }

        .title {
            font-size: 200%;
        }

        .slide-item {
            background-size: 80% auto;
        }

        .caption {
            padding-bottom: 0 60px;
        }

        .caption h3 {
            width: 100%;
        }

        .caption p {
            width: 80%;
        }

        .iso {
            width: 60%;
        }

        .about-section .col-md-6 {
            width: 100%;
        }

        .black-box {
            width: 40%;
        }

        .red-box {
            width: 45%;
            margin-right: 4%;
        }

        .services-slider {
            width: 76%;
            right: 0;
            padding: 30px 15px;
        }

        .service-slide .col-md-6 {
            width: 50%;
        }

        .service-bg:after {
            background-size: auto 100%;
        }

        .features-slider {
            width: 100%;
        }

        .inner-bg {
            height: 110vh;
            background-size: auto 100% !important;
            max-height: 768px !important;
        }

        .service-icon {
            max-width: 50px;
        }

        .about-section .container {
            z-index: 2;
        }

        .about-section {
            height: auto !important;
            min-height: 0;
            padding: 60px 30px;
        }

        .about-section:before {
            background-position: center;
        }

        .icon img {
            width: 50% !important;
        }

        .features-captions-slider {
            display: none;
        }

        .features-section .d-flex {
            display: block !important;
        }

        .features-slide {
            background-size: 100%;
            background-position: center;
            filter: none;
        }

        .feature-caption {
            display: block;
        }

        .features-slider .owl-nav {
            text-align: center;
        }

        .features-slide {
            height: 50vh;
        }

        .services-section {
            height: 110vh;
        }

        .gray-side .social-links a {
            margin-right: 0;
        }

        .gray-side .social-links {
            text-align: right;
            margin-top: 5%;
        }

        .contact-form {
            width: 100%;
        }

        .contact-form .info span {
            font-size: 100%;
        }

        .contact-form .col-md-8,
        .contact-form .col-md-4 {
            width: 100%;
        }

        .gallery-slider {
            width: 100%;
        }

        .thumbs-gallery {
            width: 96%;
            margin-left: 2%;
        }

        .category-description {
            width: 60%;
        }

        .category-map {
            margin-right: 0;
            height: 60vw;
        }

        .category-bg {
            height: 50vw;
        }

        .category {
            width: 100%;
        }
    }

    @media screen and (max-width: 768px) {
        .menu-logo {
            display: none;
        }

        .red-side,
        .cd-services .red-side {
            width: 75%;
        }

        .gray-side {
            width: 75%;
        }

        .cd-main__content:after,
        .services-is-open .cd-main__content:after {
            width: 25%;
            transform: translateX(100%);
        }

        .nav-is-open .cd-main__content,
        .contact-is-open .cd-main__content,
        .services-is-open .cd-main__content {
            -webkit-transform: translateX(75%);
            -ms-transform: translateX(75%);
            transform: translateX(75%);
        }

        .nav-is-open .cd-main__content:after,
        .contact-is-open .cd-main__content:after,
        .services-is-open .cd-main__content:after {
            transform: translateX(-300%);
            transition: all ease-in-out .7s;
        }

        .nav-toggle-button.close,
        .contact-toggle-button.close {
            width: 25px;
            height: 25px;
        }

        .contact-form .mb-5 {
            margin-bottom: 1rem !important;
        }

        .gray-side .social-links {
            text-align: center;
        }

        .contact-form input[type='text'],
        .contact-form input[type='email'],
        textarea {
            font-size: 13px;
        }

        .cd-services ul {
            font-size: 140%;
        }

        .slider-counter p {
            position: absolute;
            width: 100%;
            z-index: 999;
            font-size: 120% !important;
        }

        .navbar-brand {
            width: 20%;
        }

        .gallery-slide {
            background-size: auto 100%;
            background-position: center;
        }

        .fixed-gallery .gallery-slide {
            background-size: 100% auto;
        }

        .thumbs-gallery {
            margin-top: 17%;
        }

        .form-container label {
            font-size: 14px;
        }

        .form-container input[type=text],
        .form-container input[type=email] {
            font-size: 14px;
        }

        .form-container {
            width: 90%;
            padding: 30px;
        }

        .form-container .form-group i {
            font-size: 12px;
        }

        .form-container .form-group {
            padding-bottom: 50px;
        }

        .section.forms-section {
            min-height: 0;
            max-height: none !important;
        }

        .gray-side .social-links a {
            width: 24%;
            display: inline-block;
        }

        .main-menu,
        .contact-form {
            margin-top: 25px;
            font-size: 150%;
        }

        .red-side .info {
            font-size: 200%;
        }

        .slide-item {
            background-size: 100% auto;
        }

        .services-slider {
            width: calc(100% - 132px);
            left: 0;
        }

        .slider-counter {
            width: 132px;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #000;
            height: 132px;
            z-index: 3;
        }

        .counter-circle {
            margin-top: 10px;
            margin-bottom: 15px;
        }

        svg {
            position: absolute;
            top: calc(23% + 10px);
        }

        .counter-circle span {
            color: #fff;
            font-size: 14px;
        }

        .services-slider .owl-nav {
            left: 0;
            background-color: transparent;
            padding: 2vw 0;
        }

        .owl-nav button.owl-next,
        .owl-nav button.owl-prev {
            width: 50px !important;
            height: 50px !important;
        }

        .inner-container {
            width: 100%;
        }

        .inner-container>.row>div {
            width: 33% !important;
        }

        .projects-section {
            background-size: 100% auto;
        }

        .project-item {
            height: 50vw;
        }

        .projects-carousel .owl-nav {
            position: relative;
            bottom: -50px;
            text-align: center;
            right: auto;
        }

        .black-box {
            width: 50%;
            height: 100%;
        }

        .red-box {
            width: 60%;
            padding: 16% 5%;
        }

        /* .red-side {
            width: 65%;
        }
        .cd-main__content:after {
            transform: translateX(100%);
        }
        .nav-is-open .cd-main__content,
        .contact-is-open .cd-main__content {
            -webkit-transform: translateX(65%);
            -ms-transform: translateX(65%);
            transform: translateX(65%);
        }
        .nav-is-open .cd-main__content:after,
        .contact-is-open .cd-main__content:after {
            transform: translateX(-180%);
            width: calc(35% + 4px);
        } */
        .iso>.row>div {
            width: 33%;
        }

        .side-fixed {
            display: none;
        }

        .owl-counters {
            z-index: 33;
        }

        .active-bar {
            width: 40%;
        }

        span.current-slide,
        span.total-slide {
            font-size: 200%;
        }

        .item-index {
            top: 0;
        }

        .projects-section p {
            font-size: 210%;
            width: 100%;
            margin: auto;
            padding: 30px;
            text-align: center;
        }

        .compounds-section h1::before {
            width: 50px;
            height: 50px;
        }

        .compounds-section h1 {
            font-size: 300%;
            padding-right: 60px;
        }

        .top-footer .row>div {
            width: 100% !important;
            padding-bottom: 30px;
        }

        .info span {
            font-size: 220%;
        }

        .social-links a {
            font-size: 24px;
        }

        .news-letter-form {
            width: 100%;
            margin-right: auto;
        }

        .news-letter-form input {
            height: 50px;
            font-size: 14px;
        }

        .news-letter-form button {
            height: 50px;
            font-size: 160%;
        }

        .bottom-footer {
            text-align: center;
            font-size: 13px;
        }

        .info i {
            font-size: 180%;
        }

        .info li {
            padding-bottom: 40px;
        }

        .red-side .info li i {
            color: #000000;
            font-size: 140%;
        }

        .red-side .info li {
            padding-bottom: 20px;
        }

        .red-side .col-md-8 {
            width: 100%;
        }

        .section.partners-section {
            padding: 30px 0;
        }

        .section,
        .slide-item {
            max-height: 768px !important;
        }
    }